: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: #117992; /* cyan milk blue */
    /*117992 = Accessiblity safe blue with white text   OLD #158FAD*/
    --logo-color-2: #4F832F; /* green */
    /*3B6124 = Accessiblity safe green with white text   OLD #74BF41*/
    /*--logo-color-1: #0e174f;*/ /* light blue */
    /*--logo-color-2: #62a63a;*/ /* green */
    /*    --logo-color-2: rgb(33, 146, 56);*/
    --logo-color-3: #e3913a; /* orange */
    /*B36614 or 81490E = Accessiblity safe orange with white text   OLD #e3913a*/

    --photoshop-green-old: #99c555;
    --photoshop-green: var(--logo-color-2); /* 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(23,84,15,1) 100%);
    --logo-color-3-gradient-bg: linear-gradient(90deg, var(--logo-color-3) 0%, rgba(84,23,15,1) 100%);
    --body-bg: rgb(248,248,248);
    --body-bg-inverted: rgb(60,60,60);
    --base-bg: #ffffff;
    --dark-body-bg: rgb(60,60,60);
    --inset-bg: rgb(245,245,245);
    /*    --blue-bg-accent: #17899d;*/
    --blue-bg-accent: var(--logo-color-1);
    --green-bg-accent: var(--logo-color-2);
    --orange-bg-accent: var(--logo-color-3);
    --action-blue: #4968f1;
    --action-gray: #7f7c79;
    --action-green: var(--photoshop-green);
    /*    --action-orange: #d69336;*/
    --action-orange: var(--logo-color-3);
    --info-text: #17899d;
    --green-text: #507e30;
    --border-general: #e5e5e5;
    --faq-bg: rgba(16, 112, 163, .25);
    --faq-featured-bg: rgba(44, 166, 17, .25);
    --clear-accent-g: rgba(131, 174, 32, .75);
    /*    --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);
    --green-accent-gradient-bg: var(--logo-color-2-gradient-bg);
    --orange-accent-gradient-bg: var(--logo-color-3-gradient-bg);
    --transparent-green-bg: rgba(0, 255, 68, .1);
}


body {
    background-color: var(--body-bg);
    padding-top: 75px; /* Navbar should only be 60px*/
    padding-bottom: 82px;
    font-family: 'Hind', sans-serif;
    
}

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

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

.footer {
    line-height: 40px;
}

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

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

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


.rxce-navbar-logo {
    /*max-width: 120px;*/
    width: auto;
    height: 50px;
}

.satisfaction-logo {
    width: auto;
}

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

.wm-alert {
    border: 1px solid var(--border-general);
    border-radius: 10px;
    margin: 10px 0;
    padding: 10px;
}


.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 .25rem .75rem rgba(0, 0, 0, .05);
    /*transition: transform .75s, box-shadow .75s;*/
}

.white-bg-container-no-border {
    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 .25rem .75rem rgba(0, 0, 0, .05);
    /*transition: transform .75s, box-shadow .75s;*/
}

.wbgc-padded {
    padding: 30px;
}

.wbgc-form label {
    font-weight: bold;
    font-size: 10pt;
    text-align: left;
}


.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 .5rem;
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
    font-size: 36px;
}

.color-w {
    color: white;
}

.error-div {
    text-align: center;
    margin: 10px 4px;
    /*    padding: 10px 4px;*/
    border-radius: 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);
    }

.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);
    }

/* The power of the Buttons */

.btn-awesome {
    color: #ffffff;
    background-color: var(--action-blue);
    /*    border-width: 0;
    border-radius: 0;*/
    /*cursor: pointer;*/
    font-size: 14px;
    font-weight: 800;
    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-giant {
    margin: 4px 2px;
    padding: 10px 0;
    font-size: 18px;
}

    .btn-awesome-giant.btn-awesome-with-icon {
        padding: 10px 15px;
        max-width: 500px;
    }

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

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

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

.btn-awesome-b-light {
    background-color: #889df6;
}

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

.btn-awesome-width100 {
    width: 100%;
    /*    height:100%;*/
    vertical-align: middle;
    margin: 5px 0;
}

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

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

.btn-bigintropicture {
    font-size: 19px;
    min-width: 290px;
}

.btn-awesome-icon-text {
    float: left;
    /*    margin-right: 25px;*/
    text-align: center;
}

.btn-awesome-icon {
    float: right;
    vertical-align: middle;
}
/* Big Intro Picture */
.bigintropicture {
    background: center center no-repeat;
    background-size: cover;
    /*    background-image: url("/img/nurse-intro-bg.png");*/
    /*    background-image: url("/img/intro-bg.jpg");*/
    min-height: 420px;
    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);
}

/*
    3/16/23
    In case we want to try pre-loading this image...
    Here are some examples where the LCP resource cannot be discovered from scanning the HTML document response:

    The LCP element is an <img> that is dynamically added to the page via JavaScript.
    The LCP element is lazily loaded with a JavaScript library that hides its src or srcset attributes (often as data-src or data-srcset).
    The LCP element requires a CSS background image. <<<----- */
.no-js .bigintropicture {
    background-image: url("/img/intro-bg.png");
}

.no-webp .bigintropicture {
    background-image: url("/img/intro-bg.png");
}

.webp .bigintropicture {
    background-image: url("/img/intro-bg.webp");
}

.bigintropicture .container {
    padding: 100px 8px;
}

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

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

/* "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);*/
    padding-bottom: 20px;
}

    .promoeasyas123 li {
        text-align: left;
    }

.caption-123 {
    margin-top: 10px;
    font-size: 14pt;
}

.whypicture {
    background: center center no-repeat;
    background-size: cover;
    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;
}

.webp .whypicture {
    background-image: url("/img/why-bg.webp");
}

.no-webp .whypicture {
    background-image: url("/img/why-bg-png.png");
}

.no-js .whypicture {
    background-image: url("/img/why-bg-png.png");
}

.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;
}

.popularcoursescontainer {
    background-color: var(--logo-color-1);
    padding: 20px;
    color: white;
}

    .popularcoursescontainer a {
        color: white;
    }

        .popularcoursescontainer a:hover {
            color: #dbdbdb;
        }

.popularcoursesheader {
    font-weight: bold;
    font-size: 24pt;
}

.whyCnaZoneheader {
    font-weight: bold;
    font-size: 24pt;
}
/* StateBoardBar */
.findyourboardbar {
    /*background-color: black;
    color: white;*/
    /*    margin-bottom: 1rem !important;*/
    padding: 16px 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;
}

.custom-tooltip {
    position: relative;
    border-bottom: 1px dotted black;
}

    .custom-tooltip .tooltip-text {
        opacity: 0;
        /*width: 160px;*/
        font-size: 13px;
        background-color: black;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 5px 12px;
        /* Position the tooltip */
        position: absolute;
        z-index: 1;
        transition: all .5s;
    }

    .custom-tooltip:hover .tooltip-text {
        opacity: 1;
    }

/*.plan {
    margin: 80px auto 0 auto;
}*/

.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;
    }
/*
.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: center;
    padding: 4px;
}

.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;
}

/* 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: 1em 1em;
}

    .course-list-item-row-div.freecoursediv {
        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;
}

.course-list-item-topics {
    font-size: 12pt;
    font-style: italic;
}

.course-list-item-credits {
    font-size: 12pt;
    font-weight: bold;
}

.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: 20px;
    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: 2px 0;
    padding: 5px;
}

.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: 0 .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-badges {
    margin: .5em .1em;
}

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

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

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

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

/* FAQ container */

.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;
}

/* 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-header {
    padding: 10px;
    font-weight: 600;
    font-style: italic;
}

.account-test-semi-header {
    padding: 10px;
    font-weight: 600;
    font-size: 1.3em;
    /*    font-style: italic;*/
}

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

.account-test-row-name {
    font-size: 11pt;
    font-weight: bold;
}

.account-stat-tracker {
    /*border: 1px solid white;*/ /*border: 1px solid white;*/
    font-size: 1.2em;
    /*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;
}

.receipt-container {
    border: 3px solid black;
    padding: 6px;
    /*width: 27.94cm;
    height: 21.59cm;*/
    /*    margin: 14px auto;*/
    margin: 0px;
    /*text-align: center;*/
}

.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;
    text-align: center;
}

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

.certificate-container .certbigfont {
    font-size: 35px;
    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;
}

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

.board-info-container {
    margin: 20px;
}

.board-title {
    color: var(--green-text);
    font-weight: bold;
    font-size: 16pt;
    /*    margin-bottom: 20px;*/
}

@media (max-width: 767.98px) {
    .board-title {
        margin-bottom: 20px;
    }

    .rxce-navbar-logo {
        display: none;
    }

    .satisfaction-logo {
        display: none;
    }

    .disappearOnSmall {
        display: none;
    }

    .custom-tooltip .tooltip-text {
        /* Position the tooltip */
        position: relative;
        z-index: 1;
        transition: all .5s;
    }
}

.plan-manager-container {
    border: 3px solid var(--border-general);
    border-radius: 10px;
    padding: 30px 10px;
    margin: 8px 0px;
}

.plan-manager-ul {
    margin: 30px 0;
}

.account-materials-button {
    padding: 5px;
    font-size: 24px;
}

    .account-materials-button span {
        font-size: 35px;
    }

.complete-purchase-instructions {
    margin: 20px 10px;
}

.complete-purchase-instructions-subsection {
    padding-bottom: 20px;
    font-size: 14pt;
}

.complete-purchase-subheader {
    text-align: center;
    margin-bottom: 50px;
    font-style: italic;
    color: var(--green-text);
}

.why-checkmarks-h4 {
    font-size: 20pt;
    font-weight: 500;
    margin: 25px 0;
}

.why-checkmarks-header {
    font-size: 14pt;
    color: var(--green-text);
    font-weight: 600;
}

.why-checkmarks-col {
    margin: 10px;
    font-size: 14pt;
}

    .why-checkmarks-col span {
        color: var(--green-text);
        font-size: 16pt;
        font-weight: 600;
    }

.moneyback-container {
}

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

.pretty-blue-container {
    background-color: var(--logo-color-1);
    color: white;
}

.pretty-green-container {
    background-color: var(--logo-color-2);
    color: white;
}

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

.results-percentage {
    font-size: 36px;
    font-weight: bold;
}

.test-results-header {
    font-size: 28px;
}

/* Plans - from cnazone.com */

.dropThatText {
    text-shadow: 1px 1px #4d4d4d;
}

.accordion-account-button {
    background-color: var(--action-green);
    font-size: 20pt;
    color: white;
    font-weight: bold;
    margin: 10px 2px;
    text-decoration: none;
}

    .accordion-account-button:hover {
        background-color: green;
        font-size: 20pt;
        color: white;
        font-weight: bold;
        margin: 10px 2px;
    }

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

/*A little test of overriding bootstrap containers*/

.container,
.container-fluid,
.container-sm,
.container-md,
.container-lg,
.container-xl {
    /* width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;*/
}

@media (min-width: 381px) {
    .container, .container-sm {
        /* max-width: 381px;*/
    }
}

@media (min-width: 576px) {
    .container, .container-sm {
        /* max-width: 540px;*/
    }
}

@media (min-width: 768px) {
    .container, .container-sm, .container-md {
        /* max-width: 720px;*/
    }
}

@media (min-width: 992px) {
    .container, .container-sm, .container-md, .container-lg {
        /* max-width: 960px;*/
    }
}

/*For screen sizes over 1200...*/
@media (min-width: 1300px) {
    .container, .container-sm, .container-md, .container-lg, .container-xl {
        /*Bootstrap sets it to max-width: 1140px;*/
        max-width: 1300px; /*This sets the max width for large screens*/
    }
}