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

body{
    padding: 0;
    margin: 0;
    width: 100%;
    /* height: 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: #00aa3f;
    --secondary_dark: #019637;
    --secondary_lite: #b5f3cd;
    --secondary_whisp: #cbf0d9;

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

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


    --bg1: #07071a;
    --bg2: #06010e;
    --bg3: #dee4f8;

    /* Buttons */
    --btn1: #22aaff;
    --btn1_hover: #0397e0;
    --btn2: #0077ff;
    --btn2_hover: #0051ff;
    --btn3: #1c7159;
    --btn3_hover: #275246;
    --btn4: #7e00c2;
    --btn4_hover: #4e0178;

    /* Border colors */
    --border1: lightgray;
    --border2: darkgrey;
    --border3: black;

}


/* ----- Horizontal Rules ----- */
.hrMain{
    width: 90%;
    border: 1px solid var(--primary);
}
.hrFull{
    width: calc(100% - 4px);
    /* border: 1px solid var(--accent); */
    border: 1px solid black;
}
.hrBlack80{
    width: 80%;
    border-color: black;
}

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

/* ----- Text ----- */
p{
    font-size: 16px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
}

/* Text sizes */
.textSize6{
    font-size: 6px;
    line-height: 9px;
}
.textSize8{
    font-size: 8px;
    line-height: 12px;
}
.textSize10{
    font-size: 10px;
    line-height: 15px;
}
.textSize12{
    font-size: 12px;
    line-height: 18px;
}
.textSize14{
    font-size: 14px;
    line-height: 21px;
}
.textSize16{
    font-size: 16px;
    line-height: 24px;
}
.textSize18{
    font-size: 18px;
    line-height: 27px;
}
.textSize22{
    font-size: 22px;
    line-height: 33px;
}
.textSize28{
    font-size: 28px;
    line-height: 42px;
}
.textSize34{
    font-size: 34px;
    /* line-height: 51px; */
    line-height: 64px;
}
.textSize38{
    font-size: 38px;
    line-height: 51px;
}
.textSize42{
    font-size: 42px;
    line-height: 62px;
}
.textSize48{
    font-size: 48px;
    line-height: 72px;
}
.textSize52{
    font-size: 52px;
    line-height: 78px;
}
.textLinethrough{
    text-decoration: line-through;
}


/* Text Color Schemes */
.textColorPri{
    color: var(--primary);
}
.textColorSec{
    color: var(--secondary);
}
.textColorTer{
    color: var(--tertiary);
}
.textColorWhi{
    color: white;
}
.textColorBla{
    color: black;
}
.textColorRed{
    color: red;
}
.textColorAcc{
    color: var(--accent);
}
.textColorGra{
    color: gray;
}
/* Text & Object Alignment */
.textAlignCen{
    text-align: center;
}
.textAlignLef{
    text-align: left;
}

/* Font & Text Styles */
.textDecorationNone{
    text-decoration: none;
}



.alignObjLef{
    display: flex;
    align-items: start;
    width: 100%;
}
.alignObjLCen{
    display: flex;
    justify-content: center;
    width: 100%;
}
.alignObjRig{
    display: flex;
    align-items: end;
    width: 100%;
}
.alignObjFlexStart{
    justify-content: flex-start;
}
.alignObjFlexEnd{
    justify-content: flex-end;
    /* align-items: flex-end; */
}
.alignObjFlexCenter{
    justify-content: center;
    align-items: center;
}
.alignFlexSpaceBetween{
    display: flex;
    justify-content: space-between;
}
.objSizeFull{
    width: 100%;
    /* border: 1px solid red; */
}
.objSize80{
    width: 80%;
}
.setDisplayFlex{
    display: flex;
}

/* Button styles */
.btnSquare{
    border-radius: 0;
}
.btnRoundLite{
    border-radius: 4px;
}
.btnRoundHeavy{
    border-radius: 10px;
}

/* Box Shadow */
.boxShadowLiteCenter{
    box-shadow: 0 0 10px -2px gray;
}
.boxShadowLiteTopLeft{
    box-shadow: -2px -2px 10px -2px gray;
}
.boxShadowLiteTopRight{
    box-shadow: 2px -2px 10px -2px gray;
}
.boxShadowLiteBottomRight{
    box-shadow: 2px 2px 10px -2px gray;
}
.boxShadowLiteBottomLeft{
    box-shadow: -2px 2px 10px -2px gray;
}

/* --------------------- Custom Text and Widget styles --------------------- */
/* ----- Headers ----- */
h1{
    font-size: 64px;
    line-height: 96px;
    font-weight: 400;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    padding: 0;
    margin: 5px 0;
}
h2{
    font-size: 56px;
    line-height: 84px;
    font-weight: 400;
    /* font-family: playfair display; */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    padding: 0;
    margin: 5px 0;
}
h3{
    font-size: 48px;
    line-height: 72px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 500;
    padding: 0;
    margin: 5px 0;
}
h4{
    font-size: 38px;
    line-height: 57px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 450;
    padding: 0;
    margin: 5px 0;
}
h5{
    font-size: 30px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 500;
    line-height: 45px;
    padding: 0;
    margin: 5px 0;
}
h6{
    font-size: 22px;
    line-height: 33px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 500;
    padding: 0;
    margin: 5px 0;
}


/* ----- Title / Text classes for CMS widgets ----- */
/* Titles */
.mainTitle{
    margin: 25px 0;
}


/* ----- Horizontal Rules ----- */
.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;
}

/* ----- Text ----- */
p{
    font-size: 16px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
}

/* ----- Hypertext Styles ----- */
.cms_hyperstyle1{
    color: black;
    text-decoration: none;
}
.cms_hyperstyle1:hover{
    cursor: pointer;
    color: var(--primary);
}
.cms_hyperstyle2{
    color: var(--primary);
    text-decoration: none;
}
.cms_hyperstyle2:hover{
    cursor: pointer;
    color: var(--accent);
    text-decoration: underline;
}
.cms_hyperstyle3{
    color: white;
    text-decoration: none;
}
.cms_hyperstyle3:hover{
    cursor: pointer;
    /* text-decoration: underline; */
    color: var(--secondary);
}



/* ---------- Background Colors ---------- */
.bgColor1{
    background-color: var(--bg1);
}
.bgColor2{
    background-color: var(--bg2);
}
.bgColor3{
    background-color: var(--bg3);
}
.bgColorPri{
    background-color: var(--primary);
}
.bgColorPri_lite{
    background-color: var(--primary_lite);
}
.bgColorPri_dark{
    background-color: var(--primary_dark);
}
.bgColorSec{
    background-color: var(--secondary);
}
.bgColorSec_lite{
    background-color: var(--secondary_lite);
}
.bgColorSec_dark{
    background-color: var(--secondary_dark);
}
.bgColorTer{
    background-color: var(--tertiary);
}
.bgColorAcc{
    background-color: var(--accent);
}
.bgColorAcc_lite{
    background-color: var(--accent_lite);
}
.bgColorWhi{
    background-color: white;



}





/* ----- Messages ----- */
.message_bin1{
    list-style: none;
    padding: 0;
}
.message_error1{
    list-style: none;
    color: red;
    margin: 5px 0;

}

/* ---------- Standard Django form errors classes ---------- */
.errorlist{
    list-style: none;

    padding: 0;
    margin: 0;
}
.errorlist li{
    font-size: 14px;
    color: red;

    margin: 4px 0;
}
.errorlist li:before{
    content: "* ";
    color: red;
}


