/* global settings
======================================================================================================================================================================================================== */

/* root */
:root
{
    /* default font settings
    ==================================================================================================== */

    /* font settings */
    font-optical-sizing: auto;

    /* font size */
    font-size: 16px; line-height: 1.35em;

    /* font variables */
    --fa6: "Font Awesome 6 Free";
    --outfit: "Outfit", sans-serif;
    --mono: "Roboto Mono", monospace;










    /* color variables
    ==================================================================================================== */

    /* transparent */
    --transparent: rgba(0,0,0,0);

    /* whites */
    --white-lite: rgba(255,255,255,1);
    --white-norm: rgba(235,235,235,1);
    --white-dark: rgba(215,215,215,1);

    /* grays */
    --gray-lite: rgba(180,180,180,1);
    --gray-norm: rgba(150,150,150,1);
    --gray-dark: rgba(100,100,100,1);

    /* charcoal */
    --charcoal-lite: rgba(090,090,090,1);
    --charcoal-norm: rgba(070,070,070,1);
    --charcoal-dark: rgba(050,050,050,1);

    /* blacks */
    --black-lite: rgba(075,075,075,1);
    --black-norm: rgba(030,030,030,1);
    --black-dark: rgba(000,000,000,1);

    /* greens */
    --green-lite: rgba(085,174,070,1);
    --green-norm: rgba(081,160,064,1);
    --green-dark: rgba(072,145,058,1);

    /* teal */
    --teal-lite: rgba(049,184,189,1);
    --teal-norm: rgba(046,145,148,1);
    --teal-dark: rgba(029,116,119,1);

    /* blues */
    --blue-lite: rgba(030,136,196,1);
    --blue-norm: rgba(042,125,177,1);
    --blue-dark: rgba(042,117,164,1);

    /* reds */
    --red-lite: rgba(229,080,080,1);
    --red-norm: rgba(204,051,051,1);
    --red-dark: rgba(128,032,032,1);

    /* oranges */
    --orange-lite: rgba(230,078,048,1);
    --orange-norm: rgba(195,068,049,1);
    --orange-dark: rgba(172,061,045,1);

    /* yellows */
    --yellow-lite: rgba(255,223,155,1);
    --yellow-norm: rgba(252,204,103,1);
    --yellow-dark: rgba(209,166,072,1);

    /* icsf colors */
    /* blue */
    --icsf-blue-lite: rgba(019,073,129,1);
    --icsf-blue-norm: rgba(010,036,063,1);
    --icsf-blue-dark: rgba(005,026,049,1);

    /* gold */
    --icsf-gold-lite: rgba(245,199,092,1);
    --icsf-gold-norm: rgba(194,153,061,1);
    --icsf-gold-dark: rgba(184,134,017,1);





    /* ds colors ========== */

    /* blue */
    --ds-blue-lite: rgba(030,136,196,1);
    --ds-blue-norm: rgba(042,125,177,1);
    --ds-blue-dark: rgba(042,117,164,1);

    /* dark blue */
    --ds-dark-blue-lite: rgba(040,087,130,1);
    --ds-dark-blue-norm: rgba(021,045,067,1);
    --ds-dark-blue-dark: rgba(014,021,028,1);

    /* green */
    --ds-green-lite: rgba(085,174,070,1);
    --ds-green-norm: rgba(081,160,064,1);
    --ds-green-dark: rgba(072,145,058,1);

    /* yellow */
    --ds-yellow-lite: rgba(255,223,155,1);
    --ds-yellow-norm: rgba(252,204,103,1);
    --ds-yellow-dark: rgba(209,166,072,1);

    /* orange */
    --ds-orange-lite: rgba(230,078,048,1);
    --ds-orange-norm: rgba(195,068,049,1);
    --ds-orange-dark: rgba(172,061,045,1);





    /* c1 training colors ========== */

    /* red */
    --c1-red-lite: rgba(229,080,080,1);
    --c1-red-norm: rgba(204,051,051,1);
    --c1-red-dark: rgba(128,032,032,1);

    /* blue */
    --c1-blue-lite: rgba(145,209,255,1);
    --c1-blue-norm: rgba(106,163,204,1);
    --c1-blue-dark: rgba(064,116,153,1);

    /* gray */
    --c1-gray-lite: rgba(073,093,107,1);
    --c1-gray-norm: rgba(033,047,057,1);
    --c1-gray-dark: rgba(015,024,031,1);





    /* prosafe cdl colors ========== */

    /* alt blue */
    --ps-blue-alt-lite: rgba(142,196,255,1);
    --ps-blue-alt-norm: rgba(077,163,255,1);

    /* blue */
    --ps-blue-xlit: rgba(026,118,217,1);
    --ps-blue-lite: rgba(004,094,191,1);
    --ps-blue-norm: rgba(003,062,127,1);
    --ps-blue-dark: rgba(001,031,064,1);

    /* gold */
    --ps-gold-xlit: rgba(255,221,153,1);
    --ps-gold-lite: rgba(255,201,064,1);
    --ps-gold-norm: rgba(253,181,000,1);
    --ps-gold-dark: rgba(189,135,000,1);





    /* elearning course colors ========== */

    /* hazmat */
    --hazmat-lite: rgba(255,119,051,1);
    --hazmat-dark: rgba(179,036,036,1);

    /* passenger */
    --passenger-lite: rgba(255,217,102,1);
    --passenger-dark: rgba(243,167,018,1);

    /* class a */
    --class-a-lite: rgba(092,117,153,1);
    --class-a-dark: rgba(041,051,092,1);

    /* class b */
    --class-b-lite: rgba(034,154,158,1);
    --class-b-dark: rgba(031,127,131,1);










    /* transition variables
    ==================================================================================================== */

    /* duration */
    --gtd: 0.15s;

    /* ease */
    --gte: cubic-bezier(.6,0,.4,1);
}




















/* defaults and resets
======================================================================================================================================================================================================== */

/* main html container and all other elements */
html, html *
{
    box-sizing: border-box;
    scroll-behavior: smooth!important;
    -webkit-overflow-scrolling: touch;
    position: relative; width: auto; height: auto; margin: 0; margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0; padding: 0; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0;
}

/* all block elements */
html, html > body, html :is(header,footer,main,nav,section,article,aside,div,h1,h2,h3,h4,h5,h6,ul,ol,dl,li,p,form,fieldset,legend,label,blockquote,pre,code,canvas) {display: block; float: left;}

/* all inline elements */
html :is(span,img,svg,b,strong,i,em,u,a) {display: inline; float: none;}

/* full width elements */
html, html > body, html :is(h1,h2,h3,h4,h5,h6,ul,ol,dl,p,form,fieldset,legend,blockquote,pre,code,.w-100) {width: 100%;}

/* html */
html {min-height: 100vh;}

/* body */
html > body
{
    min-height: 100vh;
    overflow-x: hidden;
    font-family: var(--outfit); font-size: 1em; line-height: inherit;
    color: var(--black-norm);
}

/* all elements in the body */
html > body * {font-family: inherit; font-size: inherit; line-height: inherit;}

/* give margins to text elements */
html > body :is(h1,h2,h3,h4,h5,h6,p,ul,ol,dl,blockquote) {margin: 0 0 1em 0;}




















/* links
======================================================================================================================================================================================================== */

/* main container */
html :is(a,[tabindex="0"])
{
    text-decoration: none;
    font-weight: 600;
    color: var(--blue-norm);
    outline-width: 0.2rem; outline-offset: 0.1em; outline-style: solid; outline-color: var(--transparent);
    will-change: auto;
    transition: color var(--gtd) var(--gte) 0s, background-color var(--gtd) var(--gte) 0s, background var(--gtd) var(--gte) 0s, border-color var(--gtd) var(--gte) 0s, outline-color var(--gtd) var(--gte) 0s;
}

/* hover */
html :is(a,[tabindex="0"]):hover
{
    cursor: pointer;
    color: var(--teal-lite);
}

/* focus */
html :is(a,[tabindex="0"]):focus {outline-color: var(--teal-lite);}




















/* headings
======================================================================================================================================================================================================== */

/* main containers */
html > body h1 {font-size: 2.2em;}
html > body h2 {font-size: 2.0em;}
html > body h3 {font-size: 1.8em;}
html > body h4 {font-size: 1.6em;}
html > body h5 {font-size: 1.4em;}
html > body h6 {font-size: 1.2em;}




















/* lists
======================================================================================================================================================================================================== */

/* main container */
html > body :is(ul,ol,dl) {list-style-type: none;}

/* items */
html > body :is(ul,ol,dl) > li {clear: both; padding: 0 0 0 1.75em;}

/* if the list item has a nested list */
html > body :is(ul,ol,dl) > li:has(> :is(ul,ol,dl)) {margin: 0.5em 0 0 0;}

/* if it's a nested list */
html > body :is(ul,ol,dl) > li > :is(ul,ol,dl),
html > body :is(ul,ol,dl) > li > :is(ul,ol,dl) > li > :is(ul,ol,dl),
html > body :is(ul,ol,dl) > li > :is(ul,ol,dl) > li > :is(ul,ol,dl) > li > :is(ul,ol,dl),
html > body :is(ul,ol,dl) > li > :is(ul,ol,dl) > li > :is(ul,ol,dl) > li > :is(ul,ol,dl) > li > :is(ul,ol,dl) {margin: 0;}

/* dot/number/letter */
html > body :is(ul,ol,dl) li::before
{
    z-index: 1;
    position: absolute; display: block; float: left; width: auto; height: auto; margin: 0; padding: 0; box-sizing: border-box;
}





/* ol counters and numbers/letters
==================================================================================================== */

/* main counter */
html > body ol {counter-reset: ol-counter;}
html > body ol > li > ol {counter-reset: ol-ol-counter;}
html > body ol > li > ol > li > ol {counter-reset: ol-ol-ol-counter;}
html > body ol > li > ol > li > ol > li > ol {counter-reset: ol-ol-ol-ol-counter;}

/* increments */
html > body ol > li {counter-increment: ol-counter;}
html > body ol > li > ol > li {counter-increment: ol-ol-counter;}
html > body ol > li > ol > li > ol > li {counter-increment: ol-ol-ol-counter;}
html > body ol > li > ol > li > ol > li > ol > li {counter-increment: ol-ol-ol-ol-counter;}

/* numbers/letters */
html > body ol > li::before
{
    top: 0; left: 0; width: auto!important; height: auto!important; content: counter(ol-counter, decimal)"."!important;
    font-weight: 600;
    color: inherit;
}
html > body ol > li > ol > li::before {content: counter(ol-ol-counter, upper-alpha)"."!important;}
html > body ol > li > ol > li > ol > li::before {content: counter(ol-ol-ol-counter, lower-roman)"."!important;}
html > body ol > li > ol > li > ol > li > ol > li::before {content: counter(ol-ol-ol-ol-counter, lower-alpha)"."!important;}

/* remove number if it has a nested list */
html > body ol > li:has(> :is(ul,ol,dl))::before {display: none!important;}





/* unordered list dots
==================================================================================================== */

/* default dots */
html > body ul > li::before
{
    top: 0.5em; left: 0; display: block!important; float: left; width: 0.5em!important; height: 0.5em!important; content: ""!important;
    border-radius: 50%;
}

/* level one dots */
html > body ul > li::before
{
    background: var(--black-norm);
    border-style: solid; border-color: var(--black-norm);
}

/* remove dot if it has a nested list */
html > body ul > li:has(> :is(ul,ol,dl))::before {display: none!important;}

/* level two dots */
html > body :is(ul,ol,dl) > li > ul > li::before
{
    background: var(--transparent);
    border-width: 0.15em;
}

/* level three dots */
html > body :is(ul,ol,dl) > li > :is(ul,ol,dl) > li > ul > li::before
{
    background: var(--black-norm);
    border-width: 0; border-radius: 0;
}

/* level four dots */
html > body :is(ul,ol,dl) > li > :is(ul,ol,dl) > li > :is(ul,ol,dl) > li > ul > li::before
{
    background: var(--transparent);
    border-width: 0.15em; border-radius: 0;
}




















/* z-indexes
======================================================================================================================================================================================================== */

/* main containers */
html [data-z-index="1"] {z-index: 1;}
html [data-z-index="2"] {z-index: 2;}
html [data-z-index="3"] {z-index: 3;}
html [data-z-index="4"] {z-index: 4;}
html [data-z-index="5"] {z-index: 5;}
html [data-z-index="6"] {z-index: 6;}
html [data-z-index="7"] {z-index: 7;}
html [data-z-index="8"] {z-index: 8;}
html [data-z-index="9"] {z-index: 9;}
html [data-z-index="10"] {z-index: 10;}
html [data-z-index="11"] {z-index: 11;}
html [data-z-index="12"] {z-index: 12;}
html [data-z-index="13"] {z-index: 13;}
html [data-z-index="14"] {z-index: 14;}
html [data-z-index="15"] {z-index: 15;}
html [data-z-index="16"] {z-index: 16;}
html [data-z-index="17"] {z-index: 17;}
html [data-z-index="18"] {z-index: 18;}
html [data-z-index="19"] {z-index: 19;}
html [data-z-index="20"] {z-index: 20;}




















/* befores and afters
======================================================================================================================================================================================================== */

/* main containers */
html .hb::before,
html .ha::after {position: absolute; display: none; width: 100%; height: 100%; margin: 0; padding: 0; box-sizing: border-box; content: "";}

/* z-indexes */
html .hb::before {z-index: -2;}
html .ha::after {z-index: -1;}