/* --------------------- Template Parameters --------------------- */
html{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    width: 100%;
}

body{
    padding: 0;
    margin: 0;
    width: 100%;
    /* background-attachment: fixed; */
    /* background-size: 100% 100%; */
    background-repeat: no-repeat;
    background-color: white;
}

/* --------------------- Custom Template Variables --------------------- */
:root{
    --primary: #0038c8;
    --primary_lite: #3770ff;
    --primary_extra_lite: #97cdff;
    --primary_whisp: #e2f5ff;
    --primary_dark: #03007d;

    --secondary: #419873;
    --secondary_lite: #84c5a9;
    --secondary_extra_lite: #baeacc;
    --secondary_whisp: #d4fae3;
    --secondary_dark: #367e5f;

    /* --secondary: #00aa3f; */
    /* --secondary_dark: #019637; */

    --test: #808080;

    --red: #ff0000;

    --tertiary: #7e00c2;
    --tertiary_dark: #4e0178;
    --tertiary_lite: #c27ce8;
    --tertiary_whisp: #dec0f0;

    --accent: #FC7805;
    --accent_dark: #ae5200;
    --accent_lite: #ffa213;
    --accent_whisp: #f9cea1;


    --bg1: #07071a;
    --bg2: #06010e;
    --bg3: #868686;
    /* --bg3: #f0f2f8; */
    --bg4: whitesmoke;
    --bg5: #021464;
    --bg6: #3d52a0;
    /* --bg7: #f7f7f7; */
    --bg7: #f7f8ff;

    --bg_dark1: #2a2d36;
    --bg_dark2: #353e43;
    --bg_dark3: #353839;

    /* Buttons */
    --btn1: #22aaff;
    --btn1_hover: #0397e0;
    --btn2: #0077ff;
    --btn2_hover: #0051ff;
    --btn3: #1c7159;
    --btn3_hover: #275246;

    --btnSec: #00aa3f;
    --btnSec_hover: #019637;


    /* OLD COLORS */
    /* --primary_lite: #53ce80; */
    /* --primary_dark: #019637; */
    /* --accent: #273ea5; */
    /* --alternate: #FC7805; */
    /* --accent: #00aa3f; */
    /* --tertiary_old: #3c3c70; */

}

/* --------------------- Custom Text and Widget styles --------------------- */

/* ----- Horizontal Rules ----- */
.hrMain{
    width: 90%;
    border: 1px solid var(--primary);
}
.hrFull{
    width: calc(100% - 4px);
    /* border: 1px solid var(--accent); */
    border: 1px solid black;
}
.hrFull_Pri{
    width: calc(100% - 4px);
    border: 1px solid var(--primary);
}
.hrFull_Sec{
    width: calc(100% - 4px);
    border: 1px solid var(--secondary);
}
.hrBlack80{
    width: 80%;
    border-color: black;
}
.hrFullPri{
    width: 90%;
    border: 1px solid var(--primary);
}
.hrFullBla{
    width: 90%;
    border: 1px solid black;
}
.hrFullGra{
    width: 90%;
    border: 1px solid gray;
}
.hrThinPri{
    width: 80%;
    border-top: 1px solid var(--primary);
}
.hrThinBla{
    width: 80%;
    border-top: 1px solid black;
}
.hrThinGra{
    width: 80%;
    border-top: 1px solid gray;
}

/* ---------- Spans ---------- */
.spanVertTiny{
    height: 5px; min-height: 5px;
}
.spanVertVerySmall{
    height: 10px; min-height: 10px;
}
.spanVertSmall{
    height: 20px; min-height: 20px;
}
.spanVertMedium{
    height: 50px; min-height: 50px;
}
.spanVertLarge{
    height: 100px; min-height: 100px;
}
.spanVertExtraLarge{
    height: 200px; min-height: 200px;
}
.spanHorizTiny{
    width: 5px; min-width: 5px;
}
.spanHorizVerySmall{
    width: 10px; min-width: 10px;
}
.spanHorizSmall{
    width: 20px; min-width: 20px;
}
.spanHorizMedium{
    width: 50px; min-width: 50px;
}
.spanHorizLarge{
    width: 100px; min-width: 100px;
}
.spanHorizExtraLarge{
    width: 200px; min-width: 200px;
}
.fillVertSpace{
    height: 100%; 
}
.fillHorizSpace{
    width: 100%; 
}
.headerSpace{
    height: 50px; min-height: 50px;
}


/* ---------- Background Colors ---------- */


/* ----- None ----- */
.bgColorNone{
    background-color: none;
}

/* ----- Themes ----- */
.bgColor_themeMain{
    background: linear-gradient(325deg, black, var(--primary), var(--tertiary));
}
.bgColor_themeMainReverse{
    background: linear-gradient(325deg, var(--tertiary), var(--primary), black);
}
.bgColor_studioTheme{
    background: linear-gradient(325deg, var(--primary), white, var(--secondary));
}
/* ----- Standard ----- */
.bgColorWhi{
    background-color: white;
}
.bgColorBla{
    background-color: black;
}
.bgColor1{
    background-color: var(--bg1);
}
.bgColor2{
    background-color: var(--bg2);
}
.bgColor3{
    background-color: var(--bg3);
}
.bgColor4{
    background-color: var(--bg4);
}
.bgColor5{
    background-color: var(--bg5);
}
.bgColor6{
    background-color: var(--bg6);
}
.bgColor7{
    background-color: var(--bg7);
}
.bgColor_dark1{
    background-color: var(--bg_dark1);

}

/* ----- variable: Primary ----- */
.bgColorPri{
    background-color: var(--primary);
}
.bgColorPri_lite{
    background-color: var(--primary_lite);
}
.bgColorPri_dark{
    background-color: var(--primary_dark);
}
.bgColorPri_whisp{
    background-color: var(--primary_whisp);
}

/* ----- variable: Secondary ----- */
.bgColorSec{
    background-color: var(--secondary);
}
.bgColorSec_lite{
    background-color: var(--secondary_lite);
}
.bgColorSec_dark{
    background-color: var(--secondary_dark);
}
.bgColorSec_whisp{
    background-color: var(--secondary_whisp);
}

/* ----- variable: Tertiary ----- */
.bgColorTer{
    background-color: var(--tertiary);
}
.bgColorTer_dark{
    background-color: var(--tertiary_dark);
}
.bgColorTer_lite{
    background-color: var(--tertiary_lite);
}
.bgColorTer_whisp{
    background-color: var(--tertiary_whisp);
}

/* ----- variable: Accent ----- */
.bgColorAcc{
    background-color: var(--accent);
}
.bgColorAcc_dark{
    background-color: var(--accent_dark);
}
.bgColorAcc_lite{
    background-color: var(--accent_lite);
}
.bgColorAcc_whisp{
    background-color: var(--accent_whisp);
}




/* -------------------- Messages -------------------- */

/* ----- Form Messages ----- */
.message_bin1{
    list-style: none;
    padding: 0;
    /* width: 80%; */
}
.message_bin2{
    list-style: disc;
    padding: 0 0 0 20px;
    margin: 0;
}
.message_error1{
    color: red;

}
.message_success1{
    color: var(--secondary);
}

/* ----- Banner Messages ----- */
.topBannerMessageBin1{
    list-style: none;
    position: absolute;
    z-index: 975;
    top: 10px;
    left: 20px;

    width: calc(100% - 80px);
    height: fit-content;

    padding: 20px;

    background-color: var(--secondary_whisp);
    opacity: 0.9;
    border-radius: 5px;

}
.bannerMessage1{
    color: black;
    opacity: 1;
    /* border: 1px solid red; */
}



.topBannerMessageBin2{
    list-style: none;
    position: absolute;
    z-index: 975;
    top: 80px;
    right: 50px;

    width: fit-content; min-width: 250px;
    height: fit-content;

    padding: 20px;

    background-color: var(--secondary_whisp);
    opacity: 0.9;
    border-radius: 5px;

}


