body {
    font-size: 16px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    margin: 0 10px;
    padding: 0px;
    background-color: #F4F5F9;
    font-weight: 400;
    line-height: 1.5;
}

a {
    color: #007EFC;
    text-decoration: none;
    background-color: transparent;
}

.warningMessageHeader {
    color: #FFFFFF;
    background-color: #000063;
}

.timeoutWarning {
    height: 250px;
    width: 300px;
    text-align: center;
    position: absolute;
    z-index: 999;
    background-color: #FFFFFF;
    padding: 3px;
    border: 1px solid #000000;
}

.darkenBackground {
    opacity: .70; /* Safari, Opera */
    filter: alpha(opacity=70); /* IE */
    -moz-opacity: 0.7; /* FireFox */
    z-index: 1;
    background-color: rgb(0, 0, 0);
    height: 100%;
    width: 100%;
    background-repeat: repeat;
    position: absolute;
    top: 0px;
    left: 0px;
}

.actionOption {
    cursor: pointer;
    border: 1px solid #1A50B8;
    background-color: #efefff;
    margin: 1px;
    padding: 2px;
    display: inline-block;
    white-space: nowrap;
    color: #000000;
}

    .actionOption:hover {
        background-color: #ffffff;
        text-decoration: none;
    }

.new-feature-tag { /*styles for beta tag next to QB and other features*/
    color: #fff;
    background-color: #007EFC;
    margin-left: .5rem;
    display: inline-block;
    padding: 0.25em 0.4em;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.25rem;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.beta-feature-tag { /*styles for beta tag next to QB and other features*/
    color: #fff;
    background-color: #17a2b8;
    margin-left: .5rem;
    display: inline-block;
    padding: 0.25em 0.4em;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.25rem;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.home-page .icon-badge {
    background-color: #2a5298;
}

.assignments-page .icon-badge {
    background-color: #007EFC;
}

.help-page .icon-badge {
    background-color: #A839E9;
}

.tools-page .icon-badge {
    background-color: #fd7e14;
}

.settings-page .icon-badge {
    background-color: #F5B92A;
}

.reports-page .icon-badge {
    background-color: #28a745;
}

.fa-2x {
    font-size: 1.5em !important;
}

.icon-badge {
    display: inline-block;
    color: #fff;
    width: 48px;
    height: 48px;
    text-align: center;
    border-radius: 50%;
}

    .icon-badge i {
        margin-top: 11px;
    }

/* Header Styles */
.header {
    display: flex;
    padding: 10px;
}

    .header > div {
        margin: 0 5px;
    }

.header-container {
    background-color: #354152;
}

#HeaderLayer > table {
    margin: 10px 10px 0 10px;
}

.HeadingNames {
    font-size: 0.875rem;
}

.navigation-menu {
    display: flex;
    white-space: nowrap;
    font-size: 14px;
    background: #fff;
    border-bottom: 1px solid #DDE2E3;
    padding: 10px;
}


.menuBtnoutline {
    color: #6c757d;
    border: 1px solid transparent;
    display: inline-block;
    font-weight: 400;
    text-align: center;
    vertical-align: middle;
    user-select: none;
    background-color: transparent;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 0.25rem;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

    .menuBtnoutline:hover {
        color: #212529;
        background: transparent;
        border: 1px solid #6c757d;
        text-decoration: none;
    }

        .menuBtnoutline:hover a {
            text-decoration: none;
        }

    .menuBtnoutline a {
        color: #6c757d;
    }

.menuBtn {
    color: #f8f9fa;
    display: inline-block;
    font-weight: 400;
    text-align: center;
    vertical-align: middle;
    user-select: none;
    background-color: transparent;
    border: 1px solid #f8f9fa;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 0.25rem;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

    .menuBtn a, .menuBtn a i {
        color: #f8f9fa;
    }

    .menuBtn:hover {
        color: #212529;
        background-color: #f8f9fa;
        border-color: #f8f9fa;
        text-decoration: none;
    }

        .menuBtn:hover a, .menuBtn:hover a i {
            color: #212529;
            text-decoration: none;
        }

.menuTab {
    margin-right: 10px;
    color: #6c757d;
    border: 1px solid transparent;
    display: inline-block;
    font-weight: 400;
    text-align: center;
    vertical-align: middle;
    user-select: none;
    background-color: transparent;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 0.25rem;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

    .menuTab.active, .menuTab:hover {
        color: #212529;
        background: transparent;
        border: 1px solid #6c757d;
        text-decoration: none;
    }

/*.menuTab.active:hover {
            text-decoration: none;
        }*/


.page-header {
    display: flex;
    flex-wrap: wrap;
    margin-top: 20px;
}

.page-header-link {
    display: inline-block;
    font-weight: 400;
    color: #212529;
    text-align: center;
    vertical-align: middle;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 0.25rem;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    font-weight: 400;
    color: #007EFC;
    text-decoration: none;
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
    text-align: right;
}

    .page-header-link:hover {
        color: #0058b0;
        text-decoration: underline;
    }

.page-title {
    border: 1px solid transparent;
    border-width: 1px 0;
    padding: 0.375rem .5rem;
    font-size: 1.75rem;
    font-weight: 500;
    line-height: 1.2;
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
}

/* Homes Styles */
#menuLinkDescriptionAnnouncement {
    background-color: #2a5298;
    padding: 20px;
    border-radius: .25rem;
    color: #fff;
    margin: 20px 10px 0;
}

#newEditionBanner {
    background-color: #FA8215;
    padding: 20px;
    border-radius: .25rem;
    color: black;
    margin: 20px 10px 0;
}

#newEditionBanner a {
    color: white;
    text-decoration: underline;
}

#LPAnnouncement p {
    margin: 0;
}

#LPAnnouncement a {
    color: #fff;
    font-weight: bold;
}

.page-options {
    margin: 20px 10px;
    display: flex;
}

.page-option-group-header > div {
    font-size: 1.25rem;
    margin: .5rem 0;
    font-family: inherit;
    font-weight: 500;
    line-height: 1.2;
    color: inherit;
}

.page-options .page-option .page-option-header, .page-options .page-option .page-option-header a {
    font-weight: bold;
    color: #212529;
}

    .page-options .page-option .page-option-header a:hover {
        text-decoration: none;
    }

.page-options .page-option {
    width: 50%;
}

    .dynamic-page-option:hover, .page-options .page-option:hover {
        cursor: pointer;
        background: #edf6ff;
        border: 1px solid #007EFC;
        text-decoration: none;
    }



.dynamic-page-option, .page-options .page-option {
    margin-right: 10px;
    margin-top: 10px;
    display: flex;
    padding: 1.25rem;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid #DDE2E3;
    border-radius: 0.25rem;
    color: #212529;
}


    .dynamic-page-option .page-option-content, .page-option .page-option-content {
        margin-top: auto;
        margin-bottom: auto;
        max-height: 100%;

    }

    .dynamic-page-option .page-option-description {
        
        font-weight: normal;
    }

    .dynamic-page-option .page-option-icon, .page-option .page-option-icon {
        margin-right: 1rem !important;
    }

    .dynamic-page-option .page-option-header, .dynamic-page-option .page-option-header a {
        font-weight: bold;
        color: #212529;
    }

        .dynamic-page-option .page-option-header a:hover {
            text-decoration: none;
        }



.d-flex {
    display: flex !important;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h5, .h6 {
    margin-bottom: 0.5rem;
    font-family: inherit;
    font-weight: 500;
    line-height: 1.2;
    color: inherit;
}

h1, .h1 {
    font-size: 2.5rem;
}

h2, .h2 {
    font-size: 2rem;
}

h3, .h3 {
    font-size: 1.75rem;
}

h4, .h4 {
    font-size: 1.5rem;
}

h5, .h5 {
    font-size: 1.25rem;
}

h6, .h6 {
    font-size: 1rem;
}

.w-25 {
    width: 25% !important;
}

.w-50 {
    width: 50% !important;
}

.w-75 {
    width: 75% !important;
}

.w-100, .hl-footer {
    width: 100% !important;
}

.h-25 {
    height: 25% !important;
}

.h-50 {
    height: 50% !important;
}

.h-75 {
    height: 75% !important;
}

.h-100 {
    height: 100% !important;
}

.mw-100 {
    max-width: 100% !important;
}

.mh-100 {
    max-height: 100% !important;
}

.m-0 {
    margin: 0 !important;
}

.mt-0, .qb-question .qb-question-section,
.my-0 {
    margin-top: 0 !important;
}

.mr-0,
.mx-0 {
    margin-right: 0 !important;
}

.mb-0, .cke + .hl-validation,
.my-0 {
    margin-bottom: 0 !important;
}

.ml-0,
.mx-0 {
    margin-left: 0 !important;
}

.m-1 {
    margin: 0.25rem !important;
}

.mt-1, .qb-card-header-h5,
.my-1 {
    margin-top: 0.25rem !important;
}

.mr-1,
.mx-1 {
    margin-right: 0.25rem !important;
}

.mb-1,
.my-1 {
    margin-bottom: 0.25rem !important;
}

.ml-1,
.mx-1 {
    margin-left: 0.25rem !important;
}

.m-2 {
    margin: 0.5rem !important;
}

.mt-2, .card .card, .hl-card-primary .card, .qb-question .qb-question-section .step-card .card, .hl-card-secondary .card, .hl-card-success .card, .hl-card-info .card, .hl-card-warning .card, .hl-card-danger .card, .hl-card-light .card, .hl-card-dark .card, .card .hl-card-primary, .hl-card-primary .hl-card-primary, .qb-question .qb-question-section .step-card .hl-card-primary, .hl-card-secondary .hl-card-primary, .hl-card-success .hl-card-primary, .hl-card-info .hl-card-primary, .hl-card-warning .hl-card-primary, .hl-card-danger .hl-card-primary, .hl-card-light .hl-card-primary, .hl-card-dark .hl-card-primary, .card .qb-question .qb-question-section .step-card, .qb-question .qb-question-section .card .step-card, .hl-card-primary .qb-question .qb-question-section .step-card, .qb-question .qb-question-section .hl-card-primary .step-card, .qb-question .qb-question-section .step-card .step-card, .hl-card-secondary .qb-question .qb-question-section .step-card, .qb-question .qb-question-section .hl-card-secondary .step-card, .hl-card-success .qb-question .qb-question-section .step-card, .qb-question .qb-question-section .hl-card-success .step-card, .hl-card-info .qb-question .qb-question-section .step-card, .qb-question .qb-question-section .hl-card-info .step-card, .hl-card-warning .qb-question .qb-question-section .step-card, .qb-question .qb-question-section .hl-card-warning .step-card, .hl-card-danger .qb-question .qb-question-section .step-card, .qb-question .qb-question-section .hl-card-danger .step-card, .hl-card-light .qb-question .qb-question-section .step-card, .qb-question .qb-question-section .hl-card-light .step-card, .hl-card-dark .qb-question .qb-question-section .step-card, .qb-question .qb-question-section .hl-card-dark .step-card, .card .hl-card-secondary, .hl-card-primary .hl-card-secondary, .qb-question .qb-question-section .step-card .hl-card-secondary, .hl-card-secondary .hl-card-secondary, .hl-card-success .hl-card-secondary, .hl-card-info .hl-card-secondary, .hl-card-warning .hl-card-secondary, .hl-card-danger .hl-card-secondary, .hl-card-light .hl-card-secondary, .hl-card-dark .hl-card-secondary, .card .hl-card-success, .hl-card-primary .hl-card-success, .qb-question .qb-question-section .step-card .hl-card-success, .hl-card-secondary .hl-card-success, .hl-card-success .hl-card-success, .hl-card-info .hl-card-success, .hl-card-warning .hl-card-success, .hl-card-danger .hl-card-success, .hl-card-light .hl-card-success, .hl-card-dark .hl-card-success, .card .hl-card-info, .hl-card-primary .hl-card-info, .qb-question .qb-question-section .step-card .hl-card-info, .hl-card-secondary .hl-card-info, .hl-card-success .hl-card-info, .hl-card-info .hl-card-info, .hl-card-warning .hl-card-info, .hl-card-danger .hl-card-info, .hl-card-light .hl-card-info, .hl-card-dark .hl-card-info, .card .hl-card-warning, .hl-card-primary .hl-card-warning, .qb-question .qb-question-section .step-card .hl-card-warning, .hl-card-secondary .hl-card-warning, .hl-card-success .hl-card-warning, .hl-card-info .hl-card-warning, .hl-card-warning .hl-card-warning, .hl-card-danger .hl-card-warning, .hl-card-light .hl-card-warning, .hl-card-dark .hl-card-warning, .card .hl-card-danger, .hl-card-primary .hl-card-danger, .qb-question .qb-question-section .step-card .hl-card-danger, .hl-card-secondary .hl-card-danger, .hl-card-success .hl-card-danger, .hl-card-info .hl-card-danger, .hl-card-warning .hl-card-danger, .hl-card-danger .hl-card-danger, .hl-card-light .hl-card-danger, .hl-card-dark .hl-card-danger, .card .hl-card-light, .hl-card-primary .hl-card-light, .qb-question .qb-question-section .step-card .hl-card-light, .hl-card-secondary .hl-card-light, .hl-card-success .hl-card-light, .hl-card-info .hl-card-light, .hl-card-warning .hl-card-light, .hl-card-danger .hl-card-light, .hl-card-light .hl-card-light, .hl-card-dark .hl-card-light, .card .hl-card-dark, .hl-card-primary .hl-card-dark, .qb-question .qb-question-section .step-card .hl-card-dark, .hl-card-secondary .hl-card-dark, .hl-card-success .hl-card-dark, .hl-card-info .hl-card-dark, .hl-card-warning .hl-card-dark, .hl-card-danger .hl-card-dark, .hl-card-light .hl-card-dark, .hl-card-dark .hl-card-dark,
.my-2,
.hl-validation {
    margin-top: 0.5rem !important;
}

.mr-2, .hl-navbar .hl-navbar-buttons li, .hl-footer .hl-navbar-buttons li,
.mx-2 {
    margin-right: 0.5rem !important;
}

.mb-2,
.my-2,
.hl-validation {
    margin-bottom: 0.5rem !important;
}

.ml-2,
.mx-2 {
    margin-left: 0.5rem !important;
}

.m-3 {
    margin: 1rem !important;
}

.mt-3,
.my-3 {
    margin-top: 1rem !important;
}

.mr-3,
.mx-3 {
    margin-right: 1rem !important;
}

.mb-3,
.my-3 {
    margin-bottom: 1rem !important;
}

.ml-3,
.mx-3 {
    margin-left: 1rem !important;
}

.m-4 {
    margin: 1.5rem !important;
}

.mt-4,
.my-4 {
    margin-top: 1.5rem !important;
}

.mr-4,
.mx-4 {
    margin-right: 1.5rem !important;
}

.mb-4,
.my-4 {
    margin-bottom: 1.5rem !important;
}

.ml-4,
.mx-4 {
    margin-left: 1.5rem !important;
}

.m-5 {
    margin: 3rem !important;
}

.mt-5,
.my-5 {
    margin-top: 3rem !important;
}

.mr-5,
.mx-5 {
    margin-right: 3rem !important;
}

.mb-5,
.my-5 {
    margin-bottom: 3rem !important;
}

.ml-5,
.mx-5 {
    margin-left: 3rem !important;
}

.p-0, .card-body-flush, .qb-question .qb-question-section {
    padding: 0 !important;
}

.pt-0,
.py-0 {
    padding-top: 0 !important;
}

.pr-0, .qb-sidebar .nav li a:first-of-type, .qb-sidebar .card-header-tabs-light li a:first-of-type,
.px-0 {
    padding-right: 0 !important;
}

.pb-0, .qb-sidebar .nav .nav :empty, .qb-sidebar .card-header-tabs-light .nav :empty, .qb-sidebar .nav .card-header-tabs-light :empty, .qb-sidebar .card-header-tabs-light .card-header-tabs-light :empty,
.py-0 {
    padding-bottom: 0 !important;
}

.pl-0,
.px-0 {
    padding-left: 0 !important;
}

.p-1 {
    padding: 0.25rem !important;
}

.pt-1,
.py-1 {
    padding-top: 0.25rem !important;
}

.pr-1, .hl-navbar .navbar-brand img,
.px-1 {
    padding-right: 0.25rem !important;
}

.pb-1, .qb-sidebar .nav .nav, .qb-sidebar .card-header-tabs-light .nav, .qb-sidebar .nav .card-header-tabs-light, .qb-sidebar .card-header-tabs-light .card-header-tabs-light,
.py-1 {
    padding-bottom: 0.25rem !important;
}

.pl-1,
.px-1 {
    padding-left: 0.25rem !important;
}

.p-2, .qb-sidebar {
    padding: 0.5rem !important;
}

.pt-2,
.py-2,
.qb-question .qb-question-footer {
    padding-top: 0.5rem !important;
}

.pr-2,
.px-2 {
    padding-right: 0.5rem !important;
}

.pb-2, .expression-preview,
.py-2,
.qb-question .qb-question-footer {
    padding-bottom: 0.5rem !important;
}

.pl-2, .qb-sidebar .nav > li a.qb-nav-conditional, .qb-sidebar .card-header-tabs-light > li a.qb-nav-conditional,
.px-2 {
    padding-left: 0.5rem !important;
}

.p-3, .qb-card-body-preview {
    padding: 1rem !important;
}

.pt-3,
.py-3 {
    padding-top: 1rem !important;
}

.pr-3,
.px-3 {
    padding-right: 1rem !important;
}

.pb-3,
.py-3 {
    padding-bottom: 1rem !important;
}

.pl-3,
.px-3 {
    padding-left: 1rem !important;
}

.p-4 {
    padding: 1.5rem !important;
}

.pt-4,
.py-4 {
    padding-top: 1.5rem !important;
}

.pr-4,
.px-4 {
    padding-right: 1.5rem !important;
}

.pb-4,
.py-4 {
    padding-bottom: 1.5rem !important;
}

.pl-4,
.px-4 {
    padding-left: 1.5rem !important;
}

.p-5 {
    padding: 3rem !important;
}

.pt-5,
.py-5 {
    padding-top: 3rem !important;
}

.pr-5,
.px-5 {
    padding-right: 3rem !important;
}

.pb-5,
.py-5 {
    padding-bottom: 3rem !important;
}

.pl-5,
.px-5 {
    padding-left: 3rem !important;
}

.m-auto {
    margin: auto !important;
}

.mt-auto,
.my-auto {
    margin-top: auto !important;
}

.mr-auto,
.mx-auto {
    margin-right: auto !important;
}

.mb-auto,
.my-auto {
    margin-bottom: auto !important;
}

.ml-auto,
.mx-auto {
    margin-left: auto !important;
}

.font-weight-light {
    font-weight: 300 !important;
}

.text-uppercase {
    text-transform: uppercase !important;
}

a {
    text-decoration: none;
}

.page-retiring {
    border-radius: 5px;
    background: #fc8c03;
    padding: 20px;
    width: 600px;
    height: 120px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.page-retiring a {
    color: white;
}

.text-center {
    text-align: center;
}

.alert-warning {
    background-color: #f9f1c6;
    border-color: #ffb17d;
    color: #4f2000
}

.alert {
    padding: 6px 10px;
    text-align: left;
    vertical-align: middle;
}