/* Modern theme css */
/* TODO: if Modern is going to be the default theme, we may want to migrate some of this css to icsglobal.css */
:root {
    --font-family: "Averta Regular","Lucida Grande", Verdana, Arial, Helvetica, sans-serif, "Lucida Sans Unicode";
    --header-height: 50px;
    --component-background-color: #F1F0F4;
    --notice-info-background-color: #DBBCE1;
    --card-divider-color: #7AADFA;
    --header-background-color: #FAF9FD;
    --header-login-background-color: #D5E3FF;
    --header-login-link-color: #333333;
    --link-font-color: #10069f;
    --enrollment-link-color: var(--link-font-color);
    --nav-background-color: #FAF9FD;
    --nav-link-font-color: rgba(0,0,0,.5);
    --nav-link-hover-font-color: rgba(0,0,0,.5);
    --mobile-nav-link-hover-font-color: #fff;
    --mobile-nav-link-font-color: #4d4d4d;
    --mobile-header-background-color: #4d4d4d;
    --footer-background-color: #FFF;
    --footer-link-color: #333333;
    --button-border-color: #D9E3F8;
    --button-background-color: #D9E3F8;
    --button-font-color: #121C2B;
    --button-hover-font-color: #FFFFFF;
    --button-hover-background-color: #245FA6;
    --button-hover-border-color: #245FA6;
    --calendar-button-border-color: #245FA6;
    --calendar-button-background-color: #245FA6;
    --calendar-button-font-color: #D5E3FF;
    --calendar-button-hover-background-color: #E3E3DC;
    --calendar-button-hover-border-color: #E3E3DC;
    --hints-border-color: #C4C6CF;
    --hints-background-color: #F1F0F4;
    --cart-footer-background-color: #C4C6CF;
    --cart-table-background-color: #E0E2EC;
    --mini-cart-background-color: #F1F0F4;
    --material-theme-sys-light-on-surface-variant: #43474E;
}

#headertarget {
    padding-left: 8px;
    position: relative;
    height: var(--header-height);
    background: var(--header-background-color);
    box-shadow: 0px 4px 4px 0px #EFF1F1;
    -moz-box-shadow: 0px 4px 4px 0px #EFF1F1;
    -webkit-box-shadow: 0px 4px 4px 0px #EFF1F1;
    margin: 0 auto;
}

#headertarget div > a img,
#headertarget > a img,
#headertarget > img {
    position: absolute;
    max-height: var(--header-height);
}

#headermiddle {
    display: flex !important;
    justify-content: center;
    align-items: center;
}


#headerrightcorner {
    float: right;
    background-color: var(--header-login-background-color);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 120px;
    height: var(--header-height);
}

#headerrightcorner a {
    color: #001B3C;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

#headerrightcorner .login-span {
    padding-right: 10px;
    border-right: 1px solid #001B3C;
}

#headerrightcorner .cart-span {
    padding-left: 10px;
}

#footer {
    margin: 0 auto;
}

#footertarget {
    margin: 0 auto;
    clear: both;
}

#footertarget {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 6px 20px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s;
}

.landing #bodytarget {
    margin: 0 auto;
    padding: 19px 0 0 0;
    background-color: #fff;
    clear: both;
}

#bodytarget {
    margin: 0 auto;
    background-color: #fff;
}

#fieldsetinnerwrapper, #CreateAccountForm, #addContactFieldSetInnerWrapper,
#addSignUpSheetFieldSetInnerWrapper, #signUpSheetFieldSetInnerWrapper,
#emailFormBean, .editContactRow {
    padding: 25px;
    margin: 0 0 30px 0;
    border-radius: 6px;
    background: var(--component-background-color);
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}

.checkout-link {
    margin-bottom: 20px;
}


.calendarBtn:hover .init-img, .calendarBtn:focus .init-img {
    display: none;
}

#btn_validation_next_step {
    margin-top: 10px;
}

.calendarBtn {
    background-color: var(--calendar-button-background-color) !important;
    border: 1px solid var(--calendar-button-border-color) !important;
    color: var(--calendar-button-font-color) !important;
}

.calendarBtn:hover, .calendarBtn:focus {
    background-color: var(--calendar-button-hover-background-color) !important;
    border: 1px solid var(--calendar-button-hover-border-color) !important;
}

.calendarBtn .hover-img {
    display: none;
}

.calendarBtn:hover .hover-img, .calendarBtn:focus .hover-img {
    display: inline-block;
}

.checkout-link:hover, .checkout-link:focus {
    text-decoration: none !important;
}

a.enrollment {
    cursor: pointer;
    color: var(--enrollment-link-color) !important;
}

.usertarget, .login, .logout {
    color: var(--header-login-link-color) !important;
    font-weight: bolder;
}

#mincarttarget {
    margin-top: 20px;
    -moz-box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
    -webkit-box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
    background-color: var(--mini-cart-background-color);
}

#rightSide {
    padding: 30px;
}

#left {
    background-color: #fff;
    border-right: 1px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 4px 4px 4px 4px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 4px 4px 4px 4px rgba(0, 0, 0, 0.1);
    box-shadow: 4px 4px 4px 4px rgba(0, 0, 0, 0.1);
}

#bodytarget_inner table tr td, #bodytarget_inner_float table tr td, #bodytarget_inner_cart table tr td, .modal-body table tr td {
    padding: 15px 10px 15px 10px;
}

#bodytarget_inner, #bodytarget_inner_cart {
    padding: 30px;
    overflow: auto;
}

#bodytarget_inner .content-wrapper,
#bodytarget_inner_float .content-wrapper,
#bodytarget_inner_cart .content-wrapper {
    margin: 19px 0;
}

#bodytarget_inner .results,
#bodytarget_inner_cart .results {
    border: 1px solid #C4C6CF;
    border-radius: 2px;
}

#bodytarget_inner_float .results {
    background-color: #fff;
    margin-right: 0;
}

#bodytarget_inner .results table tr td, #bodytarget_inner_float .results table tr td, #bodytarget_inner_cart .results table tr td, .modal-body table tr td {
    border-bottom: 1px solid #C4C6CF;
}

#bodytarget_inner .form-control, #CreateAccountForm .form-control {
    border-radius: 8px;
    border: 1px solid var(--material-theme-sys-light-outline-variant, #C4C6CF);
    background: var(--material-theme-white, #FFF);
    height: 35px;
}

.averta-font {
    font-feature-settings: 'clig' off, 'liga' off;
    font-family: Averta;
    font-size: 24px;
    font-style: normal;
    font-weight: 300;
}

.helvetica-font {
    color: #43474E;
    font-feature-settings: 'clig' off, 'liga' off;
    font-family: Helvetica Neue;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.preferenceQuestionGroupHeader {
    text-align: center;
    font-feature-settings: 'clig' off, 'liga' off;
    font-family: Helvetica Neue;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    background-color: #F1F0F4;
    padding: 5px;
}

.preferenceQuestionGroup {
    text-align: left;
    background-color: #F1F0F4;
    padding: 5px;
    font-feature-settings: 'clig' off, 'liga' off;
    font-family: Helvetica Neue;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
}

.forEachCatalogImage {
    height: 155px;
    padding: 0px;
    background-color: #fff;
    border-bottom: 4px #83c5f2 solid;
    position: relative;
    margin: 20px auto;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 1px;
    -moz-box-shadow: 4px 4px 4px 4px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 4px 4px 4px 4px rgba(0, 0, 0, 0.3);
    box-shadow: 4px 4px 4px 4px rgba(0, 0, 0, 0.3);
}

.forEachCatalogCaption {
    background-color: #F1F0F4;
    padding: 10px;
    color: #333;
    position: absolute;
    bottom: 14px;
    width: 100%;
    height: 105px;
    z-index: 1;
    text-decoration: none;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cardCatalogName {
    font-size: 16px !important;
}

.emailSectionWrapper {
    margin: 20px;
}

.catalogSearchBtn {
    margin-top: 20px;
    width: 150px;
}

#sectionDetailsTarget, #sectiontarget, #conditionsContent, #messageContent, #loginLookupForm {
    background-color: var(--component-background-color);
    padding: 20px;
    -moz-box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
    -webkit-box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}

#displayHoldMessageBlock, .message-block {
    text-align: center;
    margin: 0 auto;
}

#actionMsg, #registrationCodeMsg {
    justify-content: center;
    background: #DBBCE1;
    padding: 15px;
    display: flex;
    align-items: center;
}

#actionMsg a, #registrationCodeMsg a {
    font: inherit;
}

#actionMsg span, #registrationCodeMsg span {
    padding-left: 5px;
}

#displayGlobalErrorMessageBlock, .modal-error, .modal-alert {
    text-align: center;
    background: #DBBCE1;
    padding: 10px;
}

#displayGlobalErrorMessageBlock a {
    font: inherit;
}

.memberships {
    border: none !important;
    margin: 0 !important;
    background-color: #F1F0F4 !important;
    -moz-box-shadow: 0 0 4px 4px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0 0 4px 4px rgba(0, 0, 0, 0.1);
    box-shadow: 0 0 4px 4px rgba(0, 0, 0, 0.1);
    padding: 10px;
}

.membership-program {
    padding: 1rem;
}

.membership-program-name {
    color: #43474E;
    font-size: 24px !important;
}

.membership-definition {
    padding: 1rem 1rem 1rem 1rem
}

.membership-definition-name {
    font-size: 18px !important;
    font-weight: 400;
}

.membership-description {
    font-weight: 700;
}

.membershipShopLinkPanel {
    display: block;
    -moz-box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
    -webkit-box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
    margin-top: 20px;
    padding: 19px;
    background-color: var(--notice-info-background-color);
}

.crossSellPanel, .recentViewPanel, .keywordsPanel, .departmentsPanel {
    display: block;
    -moz-box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
    -webkit-box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
    margin-top: 20px;
    margin-left: 0;
    padding: 19px;
    background-color: var(--component-background-color);
}

.unSelectable {
    pointer-events: none;
    background-color: #dddddd;
}

.submitInqueryBtn {
    background-color: #F4F3F7 !important;
    color: #245FA6 !important;
    border: 0 !important;
}

#addressBookTarget {
    margin: 20px 6px 6px 6px !important;
}

.nav-cart {
    background-color: transparent;
}

.mincart-actions {
    text-align: right;
    padding: 0 10px 0 0;
}

#createAccount .personNamePartsBlock {
    margin-top: 30px;
}

#bodytarget_inner .content-wrapper p, #bodytarget_inner_float .content-wrapper p {
    clear: both;
}

#membershipShoplinkZone {
    width: 100%;
    text-align: center;
    padding: 2%;
    font-size: 20px !important;
    color: #000000;
}

#marketingCodeCollectionTarget {
    padding: 0.8rem;
    margin: 0 !important;
}

.identityproviders-customer .p-2,
.identityproviders-affiliate .p-2,
.identityproviders-instructor .p-2 {
    text-align: center;
}

#identityProvidersTarget {
    padding-top: 20px;
}

#login-header {
    text-align: center;
    padding: 20px 0 10px 0 !important;
}

.registrationQuestionTitle {
    padding: .5rem 0 .5rem .5rem !important;
    margin-top: .5rem;
}

#paymentOptionsTarget {
    border-top: 1px solid #C4C6CF;
}

#relatedKeywordsZone {
    list-style-type: none;
    margin-bottom: 0 !important;
}


.tippy-content span {
    color: var(--button-font-color) !important;
}


.navbar-toggler {
    margin: 0 !important;
    padding: .30rem !important;
}

.navbar-left {
    margin-right: 10px;
}

.navbar-brand {
    font-weight: bold;
    margin-left: 10px !important;
}

.nav-link {
    white-space: nowrap;
}

.navbar .dropdown-menu {
    margin: 0px;
    border: 1px solid #10069f;
    border-radius: 0rem;
}

.modal-header span {
    font-size: 1.5rem !important;
}

.modal-header .close {
    opacity: .9 !important;
    border-radius: 2px !important;
}


/* footable custom styles */

.footable-toggle {
    margin-top: 5px;
}

.card-details {
    margin-top: 20px;
    padding: 5px;
    display: flex;
    flex-wrap: wrap;
}

.card-input-fields {
    width: 85%;
}

.card-details label {
    word-break: normal !important;
}

[id^=expmonth]  {
    width: 85% !important;
}

/* updated cart icon  */
.cartIcon img {
    width: 18px !important;
    height: 18px !important;
}

/* updated notice and information section background */
.membershipShopLinkPanel, .messageHeader, .errorMessageHeader,
.message-block, .holdListPopUp div, .disabled_menu_tooltip, .action-required-block,
.payment-message-block {
    background-color: var(--notice-info-background-color) !important;
}

/* updated login section background and font-weight  */
.usertarget, .login, .logout {
    color: var(--footer-link-color) !important;
    font-weight: bolder;
}

/* Card design */
.card {
    /* width: 38%; */
    min-width: 200px;
    max-width: 280px;
    height: 311px;
    border: 1px solid #ccc;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    background-color: var(--component-background-color) !important;
}

.card:hover {
    transform: scale(1.05); /* Increase the size on hover */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Add a box shadow on hover */
}

.card-image img {
    width: 100%;
    height: 50%;
    object-fit: cover;
}

.card-content {
    padding: 10px;
    background-color: #fff;
    height: 50%;
    box-sizing: border-box;
}

.card-content h2 {
    margin: 0;
    font-size: 18px;
}

.card-content p {
    margin: 10px 0 0;
    font-size: 14px;
    color: #555;
}

.card-divider {
    width: 100%;
    height: 9px;
    background-color: var(--card-divider-color) !important;
}

#successTarget {
    padding-right: 20px !important;
}

#goToLogin {
    margin-left: 20px !important;
}

#poInfoTarget label {
    margin-right: 0px !important;
}

.backIcon {
    width: 15px;
    height: 15px;
    margin-bottom: 2px;
}


.recentViewPanel h2, .keywordsPanel h2, .departmentsPanel h2, .crossSellPanel h2,
.recentview-offering-dropdown h3, .related-keywords-dropdown h3, .related-offering-dropdown h3 {
    /* font-weight: 300; */
    /* font-size: 24px; */
    margin-bottom: 15px;
    /* font-family: Averta; */
    text-transform: uppercase;
    color: var(--material-theme-sys-light-on-surface-variant, #43474E);
    font-style: normal;
}


.copyright {
    color: var(--footer-link-color) !important;
}

p {
    padding-bottom: 10px;
}

.container {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
}

/*Medium devices (tablets, less than 992px)*/
@media (max-width: 991.98px) {

    .navbar-collapse {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 100%;
        max-width: 280px;
        z-index: 999;
        background-color: #fff;
        overflow-y: auto;
    }

    .navbar-collapse.collapsing {
        left: -100%;
        -webkit-transition: all ease 0.25s;
        -o-transition: all ease 0.25s;
        -moz-transition: all ease 0.25s;
        transition: all ease 0.25s;
    }

    .navbar-collapse.show {
        left: 0;
        -webkit-transition: all ease 0.25s;
        -o-transition: all ease 0.25s;
        -moz-transition: all ease 0.25s;
        transition: all ease 0.25s;
    }

    .r-sections, .programs-desc {
        display: none !important;
    }

    #programresults a.enrollment {
        text-transform: initial;
    }

    .container {
        padding-left: 0 !important;
        padding-right: 0 !important;
        max-width: 100% !important;
    }

    .navbar {
        width: 100%;
    }

    .navbar .dropdown-item {
        background-color: transparent !important;
        color: var(--mobile-nav-link-font-color);
    }

    .navbar .dropdown-menu {
        position: static !important;
        transform: translate3d(0, 0, 0) !important;
        background-color: transparent;
        border: none;
    }

    .navbar ul li a {
        font-weight: normal;
        margin: 0 20px !important;
    }

    .nav-item .dropdown-toggle::after {
        display: inline-block !important;
    }

    .navbar-light .navbar-nav .nav-link 
    {
        color: var(--mobile-nav-link-font-color);
    }

    .nav-stick {
        display: none;
    }

    #footertarget {
        display: none;
    }

    .overlay {
        display: block;
        transition: all 0.5s ease;
    }

    .overlay button {
        top: 10px;
        left: 290px;
        position: absolute;
        font-size: 2rem !important;
        background-color: transparent;
        box-shadow: none;
        border: none;
        width: 42px;
        height: 42px;
    }

    .overlay button:focus {
        background-color: #fff !important;
        border-radius: 50%;
    }

    .sidebar-copyright p {
        left: -100%;
    }

    .show .sidebar-copyright p {
        position: fixed;
        bottom: 0;
        left: 0;
        margin: 0;
        padding: 15px 0 5px 44px;
        display: block;
        width: 250px;
        transition: all .25s ease;
        background-color: #fff;
    }

    .banner p {
        padding-top: 10px;
        font-weight: bold;
        color: #fff !important;
    }

    .discount-amount {
        text-align: right;
    }

    .addthis_toolbox {
        float: none !important;
        padding-bottom: 0 !important;
    }

    .offeringInquiryButton {
        display: none !important;
    }

    .inquiryBtn {
        display: block !important;
        width: 100%;
    }

    .right-btns {
        float: right;
        margin: 10px 0;
    }

    #bodytarget_inner h2 {
        font-size: 18px !important;
    }

    .courseActionHeader {
        width: 36%;
    }

    .affiliateCourseHeader {
        width: 30%;
    }

    .courseActionColumn input[type="button"] {
        padding: 6px 4px;
    }

    .login-footer, .landing-footer {
        display: block !important;
    }

    .login-footer {
        margin-top: 1rem !important;
    }

    .login-left {
        border-bottom: 1px solid lightgrey;
    }

    .login-right {
        padding: 10px 30px;
    }

    .glbtableheader {
        font-size: 14px !important;
    }

    /* .catalog-desc {
        display: block;
        color: #fff;
        font-size: 0.8rem !important;
    } */
    body {
        background-color: #fff;
    }

    .createAccount-submit {
        float: right;
        margin-right: 26%;
    }

    .createAccountHeader {
        font-size: 19px !important;
    }

    #validationCartTarget a.enrollment,
    .makePaymentItemDisplayTarget a.enrollment {
        font-size: 10px !important;
    }

    #carttarget a.enrollment, #checkoutItemDisplayTarget a.enrollment {
        font-size: 12px !important;
    }

    .item-type {
        font-size: 10px !important;
    }

    .payment-item-type {
        font-size: 13px !important;
    }

    .cart-item-type {
        font-size: 13px !important;
    }

    .cartitem {
        width: 56%;
    }

    .aff-cartitem {
        width: 35%;
    }

    .cartfooter, .validationfooter, .paymentCheckoutFixedFooter, .paybalances-footer {
        position: static;
        left: 0;
        bottom: 0;
        width: 100%;
        margin: 0;
    }

    .cartfooter {
        height: 7rem;
    }

    .validationfooter {
        height: 4rem;
    }

    .paymentCheckoutFixedFooter {
        background-color: #ddd;
    }

    .ordertotal {
        text-align: left;
    }

    .aff-ordertotal {
        text-align: right;
    }

    #carttotaltarget {
        text-align: right;
    }

    #footerCart {
        margin-bottom: 7rem;
    }

    .validationCartWrapper, .paymentCartWrapper, .paymentGatewayWrapper {
        padding: 0 !important;
        margin: 3px !important;
    }

    .qmarketingWrapper, .tagquestionsWrapper, .buyOptionalItemWrapper {
        padding: 0.6rem !important;
        margin: 3px !important;
    }

    #paymentOptionsTarget {
        margin: 0 2rem;
        padding: 1rem 0;
    }

    .pay-now {
        padding: 2rem;
    }

    #validationCartTarget, #checkoutItemDisplayTarget, .makePaymentItemDisplayTarget {
        margin: 0 !important;
    }

    #btn_validation_next_step {
        margin-right: 1rem;
    }

    .m-below {
        margin-bottom: 4rem;
    }

    .po-label {
        text-align: left;
    }

    .action-required-block {
        width: 100%;
    }

    .uc-action {
        width: 31%;
    }

    .certificates-action {
        width: 25%;
    }

    .sectionactivity-dateheader {
        width: 21%;
    }

    .completedsec-dateheader, .ins-sectionactivity-dateheader {
        width: 25%;
    }

    .completedsec-gradeheader {
        width: 18%;
    }

    .completedsec-actionheader {
        width: 15%;
    }

    .ins-sectionactivity-actionheader {
        width: 28%;
    }

    .reglist-actionheader {
        width: 15%;
    }

    .actionSelectbtn {
        padding-left: 25px;
    }

    .payamount {
        width: 27%;
    }

    .modal-dialog {
        min-width: 530px;
    }

    .course-col {
        width: 30%;
    }

    .showSectionName, .showOfferingName {
        vertical-align: top !important;
    }

    .programs-header {
        width: 60%;
    }

    .programs-action-header {
        width: 22%;
    }

    #shopcart_no_shadow {
        background-color: #fff;
    }

    .ins-assign-grade {
        width: 22%;
    }

    .ins-attendance-actual {
        width: 20%;
    }

    #headermiddle {
        justify-content: normal;
    }
}

/*Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
    .container {
        max-width: 100% !important;
    }
}

/*Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {
    .container {
        max-width: 100% !important;
    }

    .dropdown {
        padding-right: 25px;
    }
}

/*Large devices (desktops, less than 1200px)*/
@media (max-width: 1199.98px) {
    .dropdown {
        padding-right: 0px;
    }

    .nav-link {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/*Extra small devices (portrait phones, less than 576px)*/
@media (max-width: 575.98px) {
    .modal-dialog {
        min-width: 0;
        margin: 0.5rem 1.5rem;
    }
}

/* Fix for large name issue */
#headerrightcorner .login-span a {
    white-space: nowrap;
}