:root {
    --accent-color: #79B70D;
    --primary-color: #093B9F;
    --dlb-blue: #1950AF;
    --dlb-green: #79B70D;
    --dlb-orange: #F28C25;
    --dlb-darkgreen: #279812;
    --shadow-style: rgba(50, 50, 105, 0.15) 0px 2px 5px 0px, rgba(0, 0, 0, 0.05) 0px 1px 1px 0px;
    --shadow-cop: rgba(100,100,100, 0.05) 1px 1px 1px 1px;
    --shadow-highlight: 0 0 6px rgba(46,46,245,0.4);
    --bkg-color: #f2f4f2;
    --text-color: #2c2c2c;
    --cop-title: #194E94;
    --cop-subtitle: #2376E3;
    --rz-editor-focus-outline: 0.125em solid rgba(90,180,90,0.70);
    --rz-editor-button-selected-background-color: rgba(90,180,90,0.3);
    --rz-editor-button-selected-color: #000;
    --rz-editor-outline: 0.125em solid rgba(90,180,90,0.70);
    --bkg-info: rgb(15, 71, 198);
    --bkg-danger: rgb(234,32,39);
    --bkg-warning: rgb(251, 179, 6);
    --bkg-success: rgb(54, 155, 9);
    --bkg-Purple: rgba(16,51,191,1);
    --bkg-Green: rgb(106,176,76);
    --bkg-Gold: rgb(249,202,36);
    --bkg-Orange: #F1E90D;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    padding: 0;
    margin: 0;
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 15px;
    line-height: 1.5;
    /*font-weight: 400;*/
    /*font-size: calc(12px + 0.390625vw);*/
    color: #333;
    line-height: 1.2;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    color: #000;
    /*background: rgba(210,222,235,0.3);*/
    background: #fff;
}

a .btn {
    text-decoration: none;
}

.btn {
    min-width: 6em;
    border-radius: 1.6em;
    padding: 0.6em 0.8em;
    text-align: center;
    /*background: var(--dlb-green);*/
    background: var(--dlb-blue);
    color:#fff !important;
    font-size: 0.9em;
    outline: 0;
    /*border: 0.15em solid var(--dlb-green);*/
    border: 0.15em solid var(--dlb-blue);
    transition: all 0.3s ease;
}

    .btn:hover {
        background: var(--dlb-green);
        outline: 0;
        border: 0.15em solid var(--dlb-green);
        color: #fff !important;
        cursor: pointer;
        transform: translateY(-3px);
        box-shadow: 0 12px 30px rgba(102, 126, 234, 0.2);
    }

.btn-outline {
    position: relative;
    min-width: 6em;
    border-radius: 1.6em;
    padding: 0.6em 0.8em;
    text-align: center;
    background: transparent;
    color: var(--dlb-blue);
    font-size: 0.9em;
    outline: 0;
    border: 0.15em solid var(--dlb-blue);
    /*box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);*/
    transition: all 0.3s ease;
}

    .btn-outline:hover {
        background: var(--dlb-green);
        outline: 0;
        border: 0.15em solid var(--dlb-green);
        color: #fff;
        cursor: pointer;
        transform: translateY(-3px);
        box-shadow: 0 12px 30px rgba(102, 126, 234, 0.2);
    }    

.btn-sm-outline {
    min-width: 4em;
    border-radius: 1.2em;
    padding:0.6em;
    text-align: center;
    border: 0.08em solid var(--primary-color);
    background: #fff;
    font-size: 0.7em;
    color: var(--dlb-blue);
    transition: ease-in-out 0.5s;
}

    .btn-sm-outline:hover {
        background: var(--primary-color);
        color: #fff;
        cursor: pointer;
    }

.btn-footer {
    min-width: 6em;
    border-radius: 1.6em;
    padding: 0.6em 0.8em;
    text-align: center;
    border: 0.08em solid var(--primary-color);
    background: #ccc;
    font-size: 0.9em;
    color: var(--dlb-blue);
    transition: ease-in-out 0.5s;
}

.btn-footer:hover {
    background:#fff;
    cursor: pointer;
}

.DspError {
    color: var(--dlb-orange);
    font-size: 0.8em;
}

.disabled-link {
    pointer-events: none;
    /*opacity: 0.5;*/
    cursor: not-allowed;
    text-decoration: none;
}

.gradient-outline {
    padding:0.6em;
    font-size: 16px;
    color: #333;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: 2px solid transparent;
    padding: 0.6em;
    height: 2em;
    min-width: 6em;
    font-size: 1.2rem;
    font-weight: 600;
    border-radius: 50px;
    cursor: pointer;
    background-clip: padding-box, border-box;
    background-origin: border-box;
    background-image: linear-gradient(#fff, #fff), /* inner background */
    linear-gradient(135deg, #667eea 0%, #764ba2 100%); /* border gradient */
    display: inline-block;
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease;
}

    .gradient-outline:hover {
        color: white;
        background-image: linear-gradient(to right, #667eea, #764ba2), linear-gradient(to right, #667eea, #764ba2);
    }

.FlatBtn {
    background: transparent;
    border: none;
    outline: none;
    margin: 0;
    padding: 0;
}

h1 {
    font-size: 2.5rem;
    color: var(--dlb-blue);
    font-weight: 700;
}

.joinBtn {
    min-width: 6em;
    border-radius: 1.6em;
    padding: 0.6em 0.8em;
    text-align: center;
    border: 0.08em solid var(--dlb-green);
    background: var(--dlb-green);
    font-size: 0.9em;
    color:#fff;
    transition: ease-in-out 0.5s;
    /*transition: background-color 0.15s linear, color 0.15s 0.3s ease-in-out;*/
}

    .joinBtn:hover {
        background: var(--dlb-blue);
        border: 0.08em solid var(--dlb-blue);
        color: #fff;
        cursor: pointer;
    }

.infoBkg {
    background-color: var(--dlb-blue);
}

p {
    font-size: 1em;
    line-height: 1.2;
    color: var(--text-color);
}


/* Progress Indicator */
.ProgressWrapper {
    position: fixed;
    inset: 0;
    pointer-events: auto;
    user-select: none;
    background-color: rgba(255, 255, 255, 0.65);
    display: flex;
    justify-content: center; /* horizontal center */
    align-items: center;
    z-index: 5;
}

.progressIndicator {
    width: fit-content;
    height: fit-content;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .progressIndicator .progressBar {
        width: 20em;
        height: 20em;
        display: flex;
        justify-content: center;
        align-items: center;
        gap:2em;
    }

        .progressIndicator .progressBar img {
            height: 7em;
            width: auto;
        }

        .progressIndicator .progressBar i {
            font-size: 3em;
            color: var(--primary-blue);
            animation: spin 1s linear infinite;
        }

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.progressIndicator .progressBar .progressText {
    font-size: 1.2em;
    color: var(--primary-blue);
    font-weight: 600;
}

/* End Progress Indicator */

.dangerBkg {
    background-color: var(--bkg-danger);
}

.warningBkg {
    background-color: var(--bkg-warning);
}

.successBkg {
    background-color: var(--bkg-success);
}

.infoTxt {
    color: var(--bkg-info);
}

.dangerTxt {
    color: var(--bkg-danger);
}

.warningTxt {
    color: var(--bkg-warning);
}

.successTxt {
    color: var(--bkg-success);
}

.BlueIcon {
    color: var(--dlb-blue);
}

    .BlueIcon:hover {
        color: #1950E6;
    }

.GreenIcon {
    color: #2C8F09;
}

    .GreenIcon:hover {
        color: #0B9E1F;
    }

.PurpleIcon {
    color: var(--bkg-Purple);
}

.OrangeIcon {
    color: var(--bkg-Orange);
}

.GoldIcon {
    color: var(--bkg-Gold);
}

img{
    pointer-events:none;
}

.InfoIcon {
    color: var(--bkg-info);
}

.WarningIcon {
    color: var(--bkg-warning);
}

.green {
    color:forestgreen;
}

.orange {
    color:orange;
}

.blue {
    color:#2376E3;
}

.red {
    color:red;
}


.banner {   
    display: grid;
    grid-template-columns: 60% 40%;
    grid-template-areas: 'bannerImg heading'
        'bannerImg note'
        'bannerImg blank';
    margin: 2em 0;
    grid-column-gap: 3em;
}

.headerImg {
    grid-area: bannerImg;
    height:100%;
    display: flex;
    align-items:center;
}

    .headerImg img {        
        width: 100%;
        height: auto;
    }

.headerTxt {
    grid-area: heading;
    display: flex;
    align-items: flex-end;
    font-size: 2.5em;
    font-weight:900;
}

.headerNote {
    grid-area: note;
    color:var(--AATFGold);
    font-size:0.8em;
    font-weight:900;
}

.heading{
    color:var(--cop-title);
    font-size:2em;
    font-weight:500;
    margin:1em 0;
}

.h1header {
    margin-bottom: 2em;
}

.ActionCallDiv {
    grid-area: blank;
    height: 4em;
}

h1 {
    font-size: 3em;
    /*font-weight: 900;*/
    font-variation-settings: 'wght' 600, 'wdth' 150;
    color: #2376E3;
}

.h1-title {
    font-size: 2em;
    font-weight:900;
    color: #2376E3;
}

.h1Blue {    
    font-size: 1em;
    font-weight: 700;
    width: 180%;
    height: 180%;
    color: #2376E3;
}

.h1BlueSmall {
    font-weight: 600;
    color: #2376E3;
}

.h1Black {    
    font-size: 1em;
    font-weight: 700;
    width: 180%;
    height: 180%;
}

.h1BlackSmall {
    font-weight: 600;
}

.h1Green {
    font-size: 1em;
    font-weight: 700;
    width: 180%;
    height: 180%;
    color: #8DCF19;
}

.h1GreenSmall {
    font-weight: 600;
    color: #8DCF19;
}

.h1PeachSmall {
    font-weight: 600;
    color: var(--dlb-orange);
}

.h2-title {
    font-size: 1.5em;
    font-weight: bold;
}

h2 {
    font-size: 2em;
    display: block;
    margin-block-start: 0;
    margin-block-end: 0;
    font-variation-settings: 'wght' 700, 'wdth' 150;
}

.modalcontainer {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden !important;
    background: rgba(255, 255, 255, 0.8);
    z-index: 2;
}

.PageContainer {
    background: transparent;
    z-index: 1;
    padding-top: 3em;
    width: 100%;
}

.hide {
    display: none;
}

.show {
    display: unset;
}

.Title {
    color: var(--cop-subtitle);
    font-size: 3em;
    font-weight: 500;
}

.SubTitle {
    color: var(--cop-subtitle);
    font-size: 1em;
    font-weight: 400;
}

.verticalRule {
    width: 1px;
    height: 3em;
    background: #999;
}

@media only screen and (max-width:800px) {
    .banner {
        display: grid;
        grid-template-columns: 60% 30%;
        grid-template-areas: 'heading heading'
            'bannerImg bannerImg'
            'note blank';
        margin: 2em 5%;
        gap: 2em;
    }
    .btn-outline {        
        border-radius: 1.6em;
        padding:0.5em 0.8em;
    }
    /*.PageContainer{
        margin:0 2em;
    }*/
}

@media only screen and (max-width:500px) {
    .btn, .btn-outline {        
        min-width: 5em;
        font-size: 0.8em;
        border-radius: 1.1em;
        padding: 0.4em 0.6em;
        height: 2.2em;
    }
}

@media only screen and (max-width:400px) {
    .joinBtn {
        border-radius: 1em;
        padding: 0.3em 0.4em;
        min-width: fit-content;
    }
}