:root {
    /* Photoshop logo colors - these must be changed with the logo (and other complementary colors that will work well with it as well!*/
    --logo-color-1: #00aae9; /* light blue */
    --logo-color-2: #e3913a; /* orange */
    --photoshop-green: #99c555; /* A light green from the 'pure' photoshop green category */
    --logo-color-1-gradient-bg: linear-gradient(90deg, var(--logo-color-1) 0%, rgba(15,73,84,1) 100%);
    --logo-color-2-gradient-bg: linear-gradient(90deg, var(--logo-color-2) 0%, rgba(84, 68, 15,1) 100%);
    --photoshop-green-gradient-bg: linear-gradient(90deg, var(--photoshop-green) 0%, rgba(15, 84, 68,1) 100%);
    --body-bg: rgb(248,248,248);
    --body-bg-inverted: rgb(60,60,60);
    --base-bg: #ffffff;
    --slightly-darker-white-bg: #f3f3f3;
    --dark-body-bg: rgb(60,60,60);
    --inset-bg: rgb(245,245,245);
    /*    --blue-bg-accent: #17899d;*/
    --blue-bg-accent: var(--logo-color-1);
    --orange-bg-accent: var(--logo-color-2);
    --action-blue: #4968f1;
    --action-green: var(--photoshop-green);
    --action-orangered: #e53100;
    /*    --action-orange: #d69336;*/
    --action-orange: var(--logo-color-2);
    --action-orange2: var(#fc8505);
    --info-text: #17899d;
    --green-text: #507e30;
    --blue-text: #106FA3;
    --border-general: #e5e5e5;
    /*    --blue-accent-gradient-bg: linear-gradient(90deg, rgba(23,137,157,1) 0%, rgba(15,73,84,1) 100%);*/
    --blue-accent-gradient-bg: var(--logo-color-1-gradient-bg);
    --orange-accent-gradient-bg: var(--logo-color-2-gradient-bg);
    --faq-bg: rgba(16, 112, 163, .25);
    --faq-featured-bg: rgba(44, 166, 17, .25);
    --clear-accent: rgba(16, 111, 163, .75);
    --clear-accent-g: rgba(131, 174, 32, .75);
    --opaque-accent-g: #84AE20;
    --bright-blue-bg: #00AAE8;
    --offer-box-gradient-bg: linear-gradient(180deg, #ffffff 0%, var(--logo-color-1) 70%);
    --offer-box-2-gradient-bg: linear-gradient(180deg, #ffffff 0%, var(--photoshop-green) 30%);
    --dark-blue: #244566; /* dark blue */
    --transparent-green-bg: rgba(0, 255, 68, .1);
    --dark-green-nav-link: #1b8e00;
    --dark-green-nav-link-hover: #20381d;
}

body {
    background-color: var(--base-bg);
    padding-top: 165px;
    font-family: 'Hind', sans-serif;
    padding-bottom: 76px;
}

.error-text-container {
    margin: 40px 30px;
    padding: 10px;
}

a.disabled {
    color: gray;
    pointer-events: none;
}

.footer {
    line-height: 40px;
}

@media (max-width: 978px) {
    /* Footer padding changes around this px */
    body {
        padding-bottom: 120px;
    }

}

@media (max-width: 576px) {
    /* Header collapses around this point */
    body {
        padding-top: 62px;
        padding-bottom: 300px;
    }
}

footer a {
    color: white;
    font-weight: bold;
}

.footer-bottom-container {
    color: lightgray;
}

    .footer-bottom-container a {
        color: lightgray;
        font-weight: 600;
    }

.rxce-navbar-logo {
    /*  max-height: 60%;
    max-width: 60%;*/
}

.bold-label {
    font-weight: bold;
}

.caption-123 {
    margin-top: 7px;
    font-weight: bold;
}

.caption-credentials {
    color: white;
    font-weight: 500;
    font-size: 15pt;
    text-align: center;
}

/* Fix a problem where the small-caps font-varient screws up google icons */
.nav-link span.material-icons {
    font-variant: normal;
    display: inline-flex;
    vertical-align: middle;
}

.form-error-container {
    margin: 5px;
}


.white-bg-container {
    background-color: var(--base-bg);
    border-top: 1px solid var(--border-general);
    border-bottom: 1px solid var(--border-general);
    margin: 1rem 0;
    box-shadow: 0 0 .75rem -1px rgba(0, 0, 0, .35);
    /*transition: transform .75s, box-shadow .75s;*/
}

.wbgc-padded {
    padding: 30px;
}

.wbgc-form label {
    font-weight: bold;
    font-size: 12pt;
    text-align: left;
    margin-bottom: 2px;
}

.white-bg-container-nomargin {
    background-color: var(--base-bg);
    border-top: 1px solid var(--border-general);
    border-bottom: 1px solid var(--border-general);
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .35);
    /*transition: transform .75s, box-shadow .75s;*/
}

.gradient-bg-container {
    color: white;
    background: var(--blue-bg-accent);
    background: var(--blue-accent-gradient-bg);
    border-top: 1px solid var(--border-general);
    border-bottom: 1px solid var(--border-general);
    margin-bottom: .5rem;
    padding: 2rem 5.5rem;
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
    font-size: 36px;
    text-align: left;
}

    .gradient-bg-container.gradient-bg-container-o {
        background: var(--orange-bg-accent);
        background: var(--orange-accent-gradient-bg);
    }

    .gradient-bg-container.gradient-bg-container-g {
        background: var(--photoshop-green);
        background: var(--photoshop-green-gradient-bg);
    }

.page-explainer-container-wbgc {
    padding: 0 0 50px 0;
}

.page-explainer-container {
    padding: 0 0 50px 0;
}

    .page-explainer-container .explainer-header {
        font-weight: bold;
    }

.error-div {
    text-align: center;
    margin: 4px;
}

.pauldron { /* Pauldrons are big containers for major, large amounts of content. I don't know how much or little we will use this class*/
    padding: .5em .2em;
}

.pauldron-heading {
    font-size: 24px;
}

/*.white-bg-container:hover {
        box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .1);
        transform: scale(1.0,1.03);
    }*/


/* Make design responsive in real time because it's pretty. EXPERIMENTAL */
.fancy-transform {
    transition: transform .75s, box-shadow .75s;
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

    .fancy-transform:hover {
        box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .1);
        transform: scale(1.03,1.03);
    }

/* The power of the Buttons */

.btn-awesome {
    color: #ffffff;
    background-color: var(--action-blue);
    /*    border-width: 0;
    border-radius: 0;*/
    /*cursor: pointer;*/
    font-size: 18px;
    font-weight: 600;
    height: auto;
    /*letter-spacing: 1px;*/
    /*padding: 1px 2px;*/
    text-align: center;
    /*text-decoration: none;*/
    text-transform: uppercase;
    -webkit-font-smoothing: antialiased;
    white-space: normal;
    /*width: auto;*/
    margin: 2px;
}

.btn-awesome-g {
    background-color: var(--action-green);
}

.btn-awesome-or {
    background-color: var(--action-orangered);
}

    .btn-awesome-g:disabled {
        background-color: #2d3b2c;
        opacity: .75;
    }

.btn-awesome-o {
    background-color: var(--action-orange);
}

.btn-awesome-o2 {
    background-color: var(--action-orange2);
}

.btn-awesome-b {
    background-color: var(--action-blue);
}

.btn-awesome:hover {
    background-color: #ffffff;
    border: 1px solid #000000;
    color: black;
    /*    margin: 1px;*/
}

.btn-bigger {
    /*    min-width: 50%;
    width: 300px;*/
    max-width: 100%;
    padding: 7px 50px;
}

.btn-giant {
    width: 100%;
    padding: 10px;
}

.btn-bigintropicture {
    font-size: 1.5em;
    min-width: 290px;
    margin-top: 10px;
}

.btn-oldsettings {
    text-transform: none;
    font-size: 14pt;
}

.btn-smalltext {
    text-transform: none;
    font-size: 11pt;
    padding-left: 3px;
    padding-right: 3px;
}

/* Big Intro Picture and Similar */

.trainfreepicture {
    background: center center no-repeat;
    background-size: cover;
    /*background-image: url("/img/intro-bg.jpg");*/
    background-image: url("/img/free-train-bg.png");
    /*    min-height: 570px;*/
    color: white;
    text-align: center;
    /* From the header - makes the page seem more segmented*/
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
    /*    margin-bottom: 1rem !important;*/
    border-bottom: 1px solid var(--border-general);
    position: relative;
    min-height: 258px;
    border: 0;
}

@media (min-width: 992px) {
    .trainfreepicture {
        min-height: 288px;
    }
}


    .trainfreepicture .container h3 {
        font-size: 2.75rem;
        font-weight: 500;
        line-height: 1.2;
    }

.trainfreepicture-insert {
    padding: 50px 8px;
    padding-bottom: 60px;
}

.trainfreepicture-buttons {
    margin-top: .1vh;
}


.bigintropicture {
    background: center center no-repeat;
    background-size: cover;
    /*background-image: url("/img/intro-bg.jpg");*/
    background-image: url("/img/intro-cancer-picture.png");
    /*    min-height: 570px;*/
    color: white;
    text-align: center;
    /* From the header - makes the page seem more segmented*/
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
    /*    margin-bottom: 1rem !important;*/
    border-bottom: 1px solid var(--border-general);
    position: relative;
    min-height: 328px;
    border: 0;
}

    .bigintropicture .container {
        /*        padding: 80px 8px;*/
    }

        .bigintropicture .container h1 {
            font-size: 2.75rem;
            font-weight: 500;
            line-height: 1.2;
        }

.bigintropicture-insert {
    padding: 80px 8px;
    padding-top: 100px;
}

.bigintropicture-buttons {
    margin-top: 100px;
}

.whypicture {
    background: center center no-repeat;
    background-size: cover;
    background-image: url("/img/why-bg.png");
    color: white;
    text-align: center;
    /* From the header - makes the page seem more segmented*/
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
    /*    margin-bottom: 1rem !important;*/
    border-bottom: 1px solid var(--border-general);
    position: relative;
    min-height: 250px;
    border: 0;
}

    .whypicture .container h3 {
        font-size: 2.25rem;
        font-weight: 500;
    }

/* "It's as easy as 1,2,3!" advertisement thing */
.promoeasyas123 {
    /*background: #ffffff;*/
    text-align: center;
    /* From the header - makes the page seem more segmented*/
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
    /*margin-bottom: 1rem !important;*/
    /*border-bottom: 1px solid var(--border-general);*/
    /*border-top: 1px solid var(--border-general);*/
}

    .promoeasyas123 li {
        text-align: left;
    }

/* The nav time */
.nav-font { /* Controls the nav (or nav-like) fonts */
    font-variant: small-caps;
    font-size: 14px;
}

/* FAQ */

.faq-container {
    background-color: var(--faq-bg);
    padding: 30px 0;
    color: black;
}

.faq-container-featured {
    padding: 20px 0 15px 0;
    color: black;
    background-color: var(--faq-featured-bg);
}

.faq-header {
    text-align: left;
    font-size: 16pt;
    font-weight: bold;
    margin: 25px 0;
    margin-top: 50px;
}

.faq-featured-link {
    text-align: left;
    font-size: 14pt;
    margin: 25px 0;
    margin-top: 10px;
}

.faq-questions {
    font-size: 11pt;
}

.faq-q {
    margin-top: 25px;
    font-weight: 500;
}
.faq-a {
    margin-bottom: 25px;
}

/* StateBoardBar */

.findyourboardbar {
    /*background-color: black;
    color: white;*/
    /*    margin-bottom: 1rem !important;*/
    padding: 10px 0;
    /*border-bottom: 1px solid var(--border-general);*/
    /*border-top: 1px solid var(--border-general);*/
}

/* The StateBoardBar's select menu */
#stateReqSelect {
    margin: 2px;
}

/* The StateBoardBar's checkrequirements button */
#CheckReqButton {
    margin: 2px;
}


/* An unlimited package container */
.unlimited-plan {
    /*    background-color: var(--base-bg);*/
    padding: 60px 70px 40px 70px;
    text-align: center;
    font-size: 18px;
    margin: 0 auto;
    /*    border: 2px solid var(--border-general);*/
    min-height: 350px;
    position: relative;
}

    .unlimited-plan.special { /* This is the 'highlighted' package, assumedly in the middle, because that's pretty */
        border: 2px solid var(--action-green);
    }

.unlimited-plan-name {
    color: var(--info-text);
    font-weight: bold;
    font-size: 22px;
}

.unlimited-plan-price {
    color: var(--action-green);
    font-weight: bold;
    font-size: 44px;
}

.unlimited-plan-details {
    max-width: 200px;
    margin: 0 auto;
}

.unlimited-plan.planspecial {
    background: url('../img/svg/best-deal.svg') top center no-repeat;
    background-size: contain;
    color: #fff;
    margin: 0 auto;
    padding: 60px 70px 40px 70px;
}

.planspecial .unlimited-plan-name {
    color: white;
}

.planspecial .unlimited-plan-price {
    color: white;
}

.unlimited-plan-button-div {
    /*    position: absolute;
    bottom: 24px;*/
    width: 100%;
    text-align: center;
    padding: 5px 10px;
    /*left: 0;
    right: 0;*/ /* These are important to define for some reason, otherwise they are 10, -10 respectively*/
}

    .unlimited-plan-button-div .btn-awesome {
        /*    position: absolute;
    bottom: 24px;*/
        width: 100%;
        text-align: center;
        padding: 5px 10px;
        font-size: 24px;
        font-weight: 500;
    }

.planspecial .unlimited-plan-button-div .btn-awesome {
    /*    position: absolute;
    bottom: 24px;*/
    background-color: rgba(0,0,0,0);
    border: 3px solid var(--action-orange);
    max-width: 200px;
}

    .planspecial .unlimited-plan-button-div .btn-awesome:hover {
        /*    position: absolute;
    bottom: 24px;*/
        background-color: white;
        border-color: black;
    }

.fancy-transform-no-shadow {
    background-color: rgba(0,0,0,0);
    transition: transform .75s, background-color .75s;
}

    .fancy-transform-no-shadow:hover {
        transform: scale(1.03,1.03);
        background-color: var(--transparent-green-bg);
    }
/* OLD (non-RXCE original Wm attempt) */
/* An unlimited package container */
/*.unlimited-plan {
    background-color: var(--base-bg);
    padding: 10px;
    text-align: center;
    font-size: 18px;
    margin: .5em 1em;
    border: 2px solid var(--border-general);
    min-height: 350px;
    position: relative;
}

    .unlimited-plan.special {*/ /* This is the 'highlighted' package, assumedly in the middle, because that's pretty */
        /*border: 2px solid var(--action-green);
    }*/

/*.unlimited-plan-name {
    color: var(--info-text);
    font-weight: bold;
}

.unlimited-plan-price {
    color: var(--action-green);
    font-size: 36px;
}

.unlimited-plan-details {
    margin-bottom: 100px;
}

.unlimited-plan-button-div {
    position: absolute;
    bottom: 3px;
    width: 100%;
    left: 0;
    right: 0;*/ /* These are important to define for some reason, otherwise they are 10, -10 respectively*/
/*}

.special .unlimited-plan-button-div .btn-awesome {
    background-color: var(--action-green);
}

    .special .unlimited-plan-button-div .btn-awesome:hover {
        background-color: var(--base-bg);
    }*/

/* Header for pricing divs (before the plans) */
.pricing-header {
    text-align: left;
    padding: 4px;
}

.nha-pricing-header {
    padding: 4px;
/*    margin-top: 10px;*/
    font-size: 24px;
}

.pricing-subheader {
    text-align: center;
    padding: 4px;
}

/*.individual-plan {
    background-color: var(--base-bg);
    padding: 1em 10px;
    text-align: center;
    font-size: 18px;
    margin: .5em 1em;
    border: 2px solid var(--border-general);*/
    /*min-height: 350px;*/
    /*position: relative;*/
/*}*/

.individual-plan-text {
    /*position: absolute;
    top: 0;
    bottom: 0;*/
}

/* CourseList Page */

/* Container for the filter controls (and pagination probably)*/
.course-list-filter-container {
    padding: 10px;
}

.course-list-search-form {
    margin-bottom:20px;
}

/* Row container (highest level container) for individual course partial view */
.course-list-item-row-div {
    background-color: var(--base-bg);
    border: 3px solid var(--blue-bg-accent);
    box-shadow: 0 20px 20px -10px rgba(0,20,50,.2);
    margin: 1.25em 1em;
}

.course-list-item-row-div.freecoursediv {
    background-color: var(--base-bg);
    border: 3px solid var(--orange-bg-accent);
}

/* Header for individual course partial view */
.course-list-item-header {
    color: white;
    background-color: var(--blue-bg-accent);
    min-height: 10px;
    padding: 1px .25em;
    font-size: 18px;
}

.freecoursediv .course-list-item-header {
    background-color: var(--orange-bg-accent);
}

.course-list-difficulty {
    /*    background-color: var(--dark-body-bg);*/
    text-align: right;
}

.course-list-item-testname {
    font-size: 24px;
    margin: 2px;
}

.course-list-item-main-col {
    padding-bottom: .5em; /* Make same as the add to cart button*/
}

.course-list-item-other-col {
    padding: .5em 2em;
    text-align: center;
}

    .course-list-item-other-col a {
        width: 100%;
    }

.course-list-item-price-container {
    margin: 10px 0;
    padding: 15px;
}

.course-list-item-price {
    color: var(--green-text);
    /*    font-weight: bold;*/
    font-size: 22px;
}
/* Shopping Cart Page */
.shopping-cart-container {
    padding: 1em .2em;
    /*font-weight: bold;*/
}

.shopping-cart-item-row {
    background-color: var(--body-bg);
/*    background-color: var(--base-bg);*/
/*    border-bottom: 2px solid var(--border-general);*/
    margin: 7px .4em;
    border-radius: 10px;
    border: 2px solid rgba(0,20,50,.2);
    /*box-shadow: 0 20px 20px -10px rgba(0,20,50,.2);*/
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
    padding: 10px 0;
}

.shopping-cart-item-row-header {
/*    background-color: var(--base-bg);*/
/*    border-top: 1px solid var(--border-general);*/
    border-bottom: 1px solid var(--border-general);
    margin: 7px 0 20px 0;
/*    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);*/
    font-weight: bold;
}

.shopping-cart-total-container {
    font-weight: bold;
    font-size: 16pt;
    margin: 7px 0;
}

.checkout-button-div {
    text-align: right;
    margin: 10px .5em;
}


/* Course Description Page */
.inset-bg-container {
    min-height: 20px;
    padding: 19px;
    margin-bottom: 20px;
    background-color: var(--inset-bg);
    border: 1px solid #e3e3e3;
    border-radius: 1px;
}

.details-container-padding {
    padding-top: 20px;
}

.details-testname {
    font-size: 18pt;
    font-weight: bold;
}

.details-badges {
    margin: .5em .1em;
}

.details-price-square {
    text-align: center;
    padding: 2em;
}

.details-price-header {
    color: var(--green-text);
}

.details-price {
    font-size: 34px;
    color: var(--green-text);
    margin-bottom: .25em;
}

.details-sub-header {
    color: var(--blue-text);
    font-weight: bold;
}

.details-page-main-container ul {
    list-style: none; /* Remove default bullets */
}

.details-page-main-container ul li::before {
    position: relative;
    bottom: -3px;
    content: "\2022"; /* Add content: \2022 is the CSS Code/unicode for a bullet */
    color: var(--action-orange); /* Change the color */
    font-weight: 900; /* If you want it to be bold */
    font-size: 20pt;
    line-height: 30px;
    display: inline-block; /* Needed to add space between the bullet and the text */
    width: 1em; /* Also needed for space (tweak if needed) */
    margin-left: -1em; /* Also needed for space (tweak if needed) */
}


/* Experiments */
.inverted-colors-time {
    background-color: var(--body-bg-inverted);
    color: white;
}





/* Myaccount page (custom)*/

.myaccount-manage-link {
    text-align: right;
    font-size: 14pt;
}

.account-test-container {
    background-color: var(--body-bg);
    box-shadow: 0 20px 20px -10px rgba(0,20,50,.2);
    margin: 1.25em 1em;
}

.account-test-row {
    padding: 5px 0;
    border-bottom: 1px solid var(--border-general);
}

.account-stat-tracker {
    /*border: 1px solid white;*/ /*border: 1px solid white;*/
    font-size: 18px;
    padding: 15px;
    margin: 0px;
}

    .account-stat-tracker .tracker-heading {
        font-size: 24px;
    }

    .account-stat-tracker .tracker-unlimited-expires {
        margin-left: 5px;
    }

    .account-stat-tracker ul {
        margin-top: 1vw;
    }
/* Question (take test) page */
.question-container {
    margin: 5px 0;
    font-size: 14pt;
}

    .question-container .question-answer-container {
        margin-left: 2vw;
    }


    .question-container .question-heading {
        font-weight: bold;
        margin-top: 5px;
        font-size: 15pt;
    }

    .question-container .question-sub-heading {
        font-weight: bold;
        margin-top: 5px;
        font-size: 14pt;
        margin-left: 5vw;
    }

    .question-container .question-sub-answer {
        margin-left: 5vw;
    }

input[type="radio"]:checked + .question-answer {
    font-weight: bold;
    color: var(--action-green);
}

.question-container input {
    margin: 2px 0;
}

.radio-label input {
    margin-right: 10px;
}

.radio-label:hover {
    color: var(--green-text);
    background-color: rgba(0,255,255,.2)
}

.parent-question-container {
    padding: 18px;
}


/* Certiciate stuff */

.hidden-certificate {
    /*visibility:hidden;*/
    display: none;
}
.hidden-certificateCA {
    /*visibility:hidden;*/
    display: none;
}

.certificate-container {
    border: 3px solid black;
    padding: 6px;
    width: 27.94cm;
    height: 21.59cm;
    /*    margin: 14px auto;*/
    margin: 0px;
    text-align: center;
    background: url("../img/cert/background.gif");
}

.certificate-sub-container {
    height: 100%;
    border: 3px solid var(--info-text);
    padding: 5px;
}

.certificate-centering-div {
    padding: 80px 0;
    margin: auto 0;
}

.certificate-container h2 {
    font-size: 38px;
    text-transform: uppercase;
    font-weight: bold;
    padding: 6px;
}

.certificate-container .certbigfont {
    font-size: 48px;
    font-weight: bold;
    margin-bottom: 1rem;
}

    .certificate-container .certbigfont.name {
        color: var(--info-text);
    }

    .certificate-container .certbigfont.site {
        color: var(--info-text);
        font-size: 36px;
        font-weight: 100;
    }

.certificate-container h4 {
    font-variant-caps: all-small-caps;
}

.certificate-container p {
    font-size: 16px;
}

.certificate-container .seal-of-achivement {
    position: absolute;
    left: 35px;
    bottom: 35px;
    width: 250px;
}

.certificate-container .rxce-cert-logo {
    position: absolute;
    left: 50px;
    bottom: 60px;
    width: 250px;
    opacity: .5;
}

.complete-button-container button {
    margin: 0 auto;
}

/* Question video container for new test-taking time */
.question-video-container {
    width: 80%;
/*    max-width: 640px;*/
    margin: auto;
}

/* It's as easy as 1,2,3 partial view styles */
.big-icon-font {
    font-size: 10vw;
}


/* NHA Dashboard stuff */

.chart-col svg {
    margin-top: 8px;
}

.credential-col svg {
    margin: 30px 0;
}

/* For forms */
.form-info-label {
    font-style: italic;
    font-size: 10pt;
}

/* These hide those weird arrows on the type="number" form fields */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance: textfield;
}

/* NHA section/sub-site */
.nha-photo {
    background-image: url("/img/intro-bg-nha.jpg");
}

.nav-2 {
    max-height: 50px;
}


/*Added by Isaias*/
.header {
    background-color: #fff;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
}

    .header .navbar-expand {
        background-color: #BBB; /*Not sure where this is*/
    }

    .header .container {
        /*background-color: #DDD;*/ /*Color behind smaller inside div. Not page wide.*/
    }

.navbar-toggler {
    position: relative;
    left: 80%;
}

.navbar-collapse {
    border-top: 0px solid #000;
    margin: 10px 0 0 0;
}

.header-main .container .row div {
    padding: 0;
    max-height: 92px;
    /*background-color: rgba( 100, 100, 200, 0);*/
    background-color: #fff;
}

    .header-main .container .row div a {
        padding: 0;
        line-height: 92px;
    }

/* Added Wm 5.6.2021*/
.header-main {
    padding-bottom: 2px;
}

/* Register Page */

.row-account-type label {
    display: block;
    cursor: pointer;
    border-radius: 10px;
}

.admin-portal-link-container {
    font-size: 18pt;
}

/* Trainer Page */

.fee-tracker {
    font-size: 8pt;
}

.fee-tracker-next {
    font-weight: bold;
}

#StudentsCounter {
    font-weight: bold;
}

.graph-card {
    height: 90%;
}

    .graph-card .card-body {
        height: 90%;
    }

.data-placeholder {
    padding: 20px;
    text-align: center;
    font-weight: bold;
}

.trainer-svg {
    display: block;
    margin: 0 auto;
}

div.tooltip-donut {
    position: absolute;
    text-align: center;
    padding: .5rem;
    background: #FFFFFF;
    color: #313639;
    border: 1px solid #313639;
    border-radius: 8px;
    pointer-events: none;
    font-size: 1.3rem;
}

.trainer-panel-card {
    box-shadow: 0 20px 20px -10px rgba(0,20,50,.2);
    margin: 10px 0;
}

.individual-plan {
    background-color: var(--base-bg);
    padding: .5em 8px;
    text-align: center;
    font-size: 14px;
    margin: .5em 10px;
    border: 2px solid var(--border-general);
    border-radius: 20px;
}

.trainer-alert {
    border-radius: 20px;
    width: auto;
}

.trainer-total-text {
    font-size: 16px;
    text-align: center;
    /*font-style: italic;*/
    font-weight: bold;
    padding: 6px;
}

    .trainer-total-text span {
        padding: 6px;
        /*        border-radius: 20px;
        border: 1px solid var(--action-orange);*/
    }

.trainer-reminder-text {
    text-align: center;
    margin: 10px 0;
}

.padded-link {
    margin: 0 9px;
}

.sidebar-header {
    font-size: 12pt;
    font-weight: 600;
    margin: 18px;
    margin-bottom: 10px;
}

.getprice-box-container {
    margin-top: 40px;
    margin-bottom: 40px;
    padding: 40px 40px;
    font-size: 14pt;
}

    .getprice-box-container button {
        margin-bottom: 10px;
    }

.getprice-info-container {
    font-weight: bold;
    font-size: 1em;
    background-color: rgba(0,0,0,.1);
    border-radius: 4px;
    padding-bottom: 0;
}

.getprice-box-info-container {
    font-size: 10pt;
}

.colorlayer-b {
    background-color: var(--clear-accent);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.colorlayer-g {
    background-color: var(--clear-accent-g);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.pretty-blue-container {
    background-color: var(--bright-blue-bg);
    color: white;
}

.pretty-green-container {
    background-color: var(--opaque-accent-g);
    color: white;
}

.btn-marginy {
    margin: 30px 0;
}

input[type="text"].how-many-input {
    margin: 30px 0;
    max-width: 100%;
    /*    margin-top: 36px;*/
}

.navbar.hi_design_navbar {
    padding: .25rem 1rem;
}

@media (max-width: 576px) {
    /* Header collapses around this point */
    .navbar.hi_design_navbar.second-navbar {
        padding: 0;
    }
    .footer {
        white-space: normal;
        
    }
}

.nav-shadow-wm {
    box-shadow: 0 8px 6px -6px rgba(0, 0, 0, .35);
}

.why-card-container {
    padding: 40px 8vw;
}

.why-card {
    background-color: var(--clear-accent-g);
    padding: 25px 10px;
    width: 100%;
    margin: 12px auto;
    font-weight: bold;
    max-width: 300px;
    white-space: nowrap;
}

.inservice-stuff-margins {
    margin-bottom: 20px;
}

.plan-container {
    border: 1px solid black;
    padding: 20px;
    border-radius: 10px;
    background-color: var(--faq-featured-bg);
}

/* Landing Pages */

.giant-header-rectangle-thing {
    background-color: var(--action-orange);
    color: white;
    width: 100%;
    height: 100%;
    font-size: 32px;
    font-weight: bold;
    padding: 20px;
}

.ghrt-o {
    background-color: var(--action-orange);
}
.ghrt-g {
    background-color: var(--action-green);
}

.ghrt-b {
    background-color: var(--dark-blue);
}

.offer-text {
    font-size: 24px;
    padding: 20px;
}

.offer-text h4 {
    color: var(--action-orange);
    font-size: 32px;
}

.offer-text-2 {
    font-size: 28px;
    padding: 20px;
    color: white;
}



.highlighted-text-o {
    color: var(--action-orange);
}

.special-offer-box {
    border-top: 10px solid var(--action-orange);
    background: var(--offer-box-gradient-bg);
}

.special-offer-box-2 {
    border-top: 10px solid var(--action-orange);
    background: var(--offer-box-2-gradient-bg);
}

.special-offer-box-3 {
    border-top: 10px solid var(--action-green);
    background: var(--offer-box-gradient-bg);
}

.special-offer-box .offer-text {
    color: white;
}

.special-offer-box-3 .offer-text {
    color: white;
}
   

.special-offer-box-header {
    color: var(--blue-text);
    font-size: 48px;
    font-weight: bold;
    padding: 0 20px;
}

.special-offer-box-header-smaller {
    color: var(--blue-text);
    font-size: 38px;
    font-weight: bold;
    padding: 0 20px;
}

.special-offer-box .offer-text  p .bigger {
    font-size: 32px;
}

.special-offer-box-3 .offer-text p .bigger {
    font-size: 32px;
}

.text-faint-box {
    background-color: rgba(59,150,0, .5);
    border-radius: 15px;
    padding: 0 10px;
}

.styled-alert {
    border-width: 3px;
    border-radius: 10px;
    padding: 10px 20px;
}

.account-type-change {
/*    margin-top: 10px;*/
text-align: center;
    margin: 10px auto;
    border: 2px solid var(--border-general);
    padding: 2px;
}

.register-container {
    border: 2px solid var(--action-green);
    background-color: var(--slightly-darker-white-bg);
    border-radius: 10px;
    padding: 10px;
    margin: 10px;
}

.register-inst-container.reg-inst {
    border: 2px solid var(--action-blue);
}

.general-border-box {
    border: 1px solid var(--border-general);
    background-color: var(--slightly-darker-white-bg);
}

.account-button-hi {
    color: var(--dark-green-nav-link) !important;
    font-weight: bold;
}

.account-button {
    color: white !important;
    font-weight: bold;
}
.course-take-index-list-header {
    font-size: 24px;
    margin: 10px 0;
}

.options-container {
    background-color: aliceblue;
    padding: 10px;
    border-radius: 20px;
}