/* COI Modal stylings for RF Template */

.aarp-c-modal {
    -webkit-box-align: center;
    align-items: center;
    display: -webkit-box;
    display: flex;
    height: 100vh;
    left: 0;
    margin: 0;
    position: fixed;
    top: 0;
    width: 100vw;
    z-index: 2000001
}

.aarp-c-modal__overlay {
    background: rgba(0,0,0,.5);
    height: 100%;
    position: fixed;
    top: 0;
    width: 101%
}

.aarp-c-modal__container {
    background: #fff;
    display: -webkit-box;
    display: flex;
    position: relative
}

.aarp-c-modal__container .aarp-c-modal-content {
    overflow-y: auto;
    max-height: calc(100vh - 10px)
}

.aarp-c-modal__container .aarp-c-modal-content .toolbar {
    -webkit-box-pack: center;
    justify-content: center;
    gap: 15px
}

.aarp-c-modal__container .aarp-c-modal-content .toolbar .sharp-u-rewards-buttons__width {
    min-width: 14.5em
}

@media (max-width: 767px) {
    .aarp-c-modal__container .aarp-c-modal-content .toolbar {
        -webkit-box-orient:vertical;
        -webkit-box-direction: normal;
        flex-direction: column;
        -webkit-box-align: center;
        align-items: center;
        gap: 10px
    }
}

.aarp-c-modal-content:focus,
.aarp-c-modal-content:focus-within {
    outline: none;
}

.sharp-c-coi-modal__content {
    padding: 1.875em;
    border-radius: 0.1875em;
    background-color: #ffffff;
    text-align: center;
    margin: 0.625em;
    max-height: calc(100vh - 80px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;

    /* UnAuthorized modal styles */
    .sharp-c-coi-modal__logo-wrapper {
        margin-bottom: 1.125em;

        .sharp-c-coi-modal__logo-image {
            max-width: 12.5em;
        }
    }
    .sharp-c-coi-modal__seconday-btn {
        padding-top: 0.9375em;
    }

    .sharp-c-coi-modal__footer {
        .sharp-c-button {
            text-transform: inherit;
            min-width: 15.25em;
        }
    }
    .sharp-c-coi-membership-link {
        color: #486784;
        text-decoration: none;
    }
    .sharp-c-coi-modal__seconday-links {
        padding-top: 1.25em;
        margin-top: 1.875em;

        .sharp-c-coi-membership-link {
            font-size: 0.875em;
            padding: 0.125em 0.875em;
            border-right: 1px solid #d6dadc;

            &:last-child {
                border-right: none;
            }
        }
    }
    .sharp-c-coi-modal__title {
        font-weight: 400;
        color: #37383d;
    }
    .sharp-c-coi-modal__description {
        color: #37383d;
    } 
}

 @media only screen and (min-width: 768px) { 
    .sharp-c-coi-modal__content\@desktop {
        padding: 3.125em 5.625em;
        .sharp-c-coi-modal__logo-wrapper\@desktop {
            margin-bottom: 2.5em;

            .sharp-c-coi-modal__logo-image\@desktop {
                max-width: 16.875em;
            }
        }

        .sharp-c-coi-modal__description {
            font-size: 1em;
            line-height: 1.5625em;
        }
    }
}

.sharp-c-coi-modal__content:focus {
    outline: none;
}

.sharp-c-coi-modal {
    .sharp-c-lightbox__container\@desktop {
         @media only screen and (min-width: 1168px) {
            width: 50%;
        }

        .aarp-c-modal__close-button {
            height: 0.9375em;
            width: 0.9375em;
            top: 1.5625em;
            right: 1.5625em;
        }
    }

    /* for UXDIA email confirmation COI functionality */
    /* to give proper positioning to the modal in mobile view. */
     @media only screen and (max-width: 424px) {
        .sharp-c-lightbox__container\@mobile {
            &.uxdia-c-lightbox__container {
                top: 0;
            }
        }
    }
}

/* for UXDIA email confirmation COI functionality */
.uxdia-c-coi-modal__content {
    .uxdia-c-manage-preferences {
        color: #dc2a2a;
        &:hover {
            color: #dc2a2a;
        }
    }
    .sharp-c-coi-modal__content .sharp-c-coi-modal__title {
        font-family: 'Lato', sans-serif;
        font-style: normal;
        font-weight: 800;
    }

    /* Below class is for teh text "email address is confirmed" */
    .uxdia-c-coi-message {
        font-family: 'Lato', sans-serif;
        font-style: normal;
        font-weight: 700;
    }
}


/* Override the font styles for textImage component for modal */
.sharp-c-coi-modal__title,
.sharp-congratulation-modal .sharp-c-article--textimage\@mobile h2 {
    margin-bottom: 0.9375em;
    margin-top: 0;
    text-align: center;
    font-family: 'Lato', sans-serif;
    font-style: normal;
    font-weight: 700;
}

/* Override the font styles for textImage component for modal */
.sharp-c-coi-modal__title\@mobile,
.sharp-congratulation-modal .sharp-c-article--textimage\@mobile h2 {
     @media only screen and (min-width: 320px) {
        font-size: 1.25em;
        line-height: 1.125em;
        text-align: center;
        width: 80%;
        margin: 0 auto 0.625em auto;
    }
}

/* Override the font styles for textImage component for modal */
.sharp-c-coi-modal__title\@tablet,
.sharp-congratulation-modal .sharp-c-article--textimage\@tablet h2 {
     @media only screen and (min-width: 768px) {
        font-size: 2em;
        line-height: 1.125em;
        margin-bottom: 0.625em;
        width: 100%;
    }
}

/* Override the font styles for textImage component for modal */
.sharp-c-coi-modal__description,
.sharp-congratulation-modal .sharp-c-article--textimage p {
    font-size: 0.875em;
    line-height: 1.785714em;
    margin-bottom: 1.3125em;
    text-align: center;
}

.sharp-c-coi-modal__padding {
    padding-bottom: 0.6875em;
}

.sharp-c-coi-cta {
    margin: 0 auto;
}

.sharp-c-coi-link {
    color: #ec1300;
    text-decoration: none;
}

.sharp-c-coi-link:hover {
    color: #ac2a2a;
    text-decoration: underline;
}

.sharp-c-coi-button {
    background-color: #ec1300;
    color: #ffffff;
    font-size: 0.875em;
    border-radius: 0.25em;
    cursor: pointer;
    display: inline-block;
    padding-bottom: 0.625em;
    padding-left: 1.5625em;
    padding-top: 0.625em;
    padding-right: 1.5625em;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    -webkit-transition: all .2s;
    transition: all .2s;
    vertical-align: middle;
    border: 0;
    font-family: 'Lato', sans-serif;
    font-style: normal;
    font-weight: 700;
}

.sharp-c-coi-button:hover {
    background-color: #ac2a2a;
    color: #ffffff;
}

.sharp-c-coi-modal__popup {
    .sharp-c-lightbox__close-button {
        background-image: url('absolute:/content/dam/specialized-membership/staying-sharp/assessment/crossGrey.svg');
        height: 0.9375em;
        width: 0.9375em;
        top: 1.5625em;
        right: 1.5625em;
    }

    /* for UXDIA email confirmation COI functionality */
    .uxdia-c-coi-close-button {
        position: absolute;
        height: 1.5em;
        width: 1.5em;
        top: 1.5625em;
        right: 1.5625em;
        background-image: none;
        &::before,
        &::after {
            transform: translateX(50%) rotate(45deg);
            height: 1.3125em;
            position: absolute;
            left: 50%;
            top: 0;
            width: 0.125em;
            content: '';
            background-color: #121212;
             @media only screen and (max-width: 767px) {
                height: 0.9375em;
            }
        }
        &::after {
            transform: translateX(50%) rotate(-45deg);
        }
        &.mvc-category-close-icon .aarp-c-modal__close-button {
            background-image: none;
        }
    }
}

/* Congratulation Modal Styles */

.sharp-congratulation-modal {
    .sharp-c-credit-photo {
        display: inline-block;
        width: 7.5em;
        height: 7.375em;
        background-color: #51b4b2;
        border-radius: 3.75em;
        margin-bottom: 1.125em;
    }
    .sharp-c-article--textimage p {
        margin: 0;
    }
    .aarp-c-modal-content {
        background-color: #ffffff;
        text-align: center;
        max-height: calc(100vh - 80px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
     @media only screen and (min-width: 426px) and (max-width: 767px) {
        .sharp-c-lightbox__container\@mobile {
            width: 80%;
        }
    }
}

.sharp-c-coi-modal__image {
    margin-top: 1.6875em;
}

.sharp-c-coi-modal__link,
.sharp-congratulation-modal .sharp-c-article--textimage a {
    display: inline-block;
    margin-top: 1em;
}

/* browserDownloadModal */
.sharp-c-modal-browser-update .sharp-c-coi-modal__ignore-button\@tablet {
     @media only screen and (min-width: 768px) {
        margin-left: 1.125em;
    }
}

.sharp-c-modal-browser-update .sharp-c-coi-modal__ignore-button\@mobile {
     @media only screen and (max-width: 425px) {
        margin-top: 1.125em;
    }
}

.sharp-c-removeCloseBtn,
.sharp-c-externalUser-modal-secured {
    .aarp-c-modal__overlay {
        pointer-events: none;
    }

    .aarp-c-close-button {
        display: none;
    }
}

/* External users modal styles */

.sharp-c-externalUser-modal-secured,
.sharp-c-externalUser-modal-anonymous {
    .sharp-c-coi-modal__content {
        padding: 1.6875em 1.3125em;
        margin: 0;
        .sharp-c-coi-modal__logo-wrapper {
            margin-bottom: 0.5em;
        }
    }
    .sharp-c-coi-modal__title {
        font-size: 1.125em;
        line-height: 1.333333em;
    }
    .sharp-c-coi-modal__description {
        font-size: 0.875em;
        line-height: 1.285714em;
    }
    .sharp-c-coi-modal__content,
    .sharp-c-coi-modal__description,
    .sharp-c-coi-modal__title {
        text-align: left;
    }
    .sharp-c-coi-modal__description-section {
        display: block;
    }
    .sharp-c-coi-modal__right-section {
        text-align: center;
        .sharp-c-coi-button {
            font-size: 1em;
            line-height: 1.3125em;
            border-radius: 1.625em;
            padding: 0.9375em 1.875em;
            margin-bottom: 0.75em;
        }
        .sharp-c-coi-modal__login-desc {
            font-size: 1em;
            line-height: 1.3125em;

            .sharp-c-coi-modal__login-link {
                position: relative;
                font-family: 'Lato', sans-serif;
                font-style: normal;
                font-weight: 700;
                &::after {
                    content: '\003E';
                    position: absolute;
                    right: -0.75em;
                    top: 0.0625em;
                }
            }
        }
        .sharp-c-coi-modal__right-section-image {
            max-width: 7.8125em;
        }
    }
    .sharp-c-coi-modal__left-section {
        .sharp-c-coi-modal__list {
            padding-left: 2.214286em;
            margin-top: 0.571429em;
            margin-bottom: 1em;
            list-style-type: disc;
            .sharp-c-coi-modal__list {
                font-family: 'Lato', sans-serif;
                font-style: italic;
                font-weight: 400;
                padding-left: 2.714286em;
            }
        }
    }
    .sharp-c-coi-modal__condition-text {
        font-family: 'Lato', sans-serif;
        font-style: italic;
        font-weight: 400;
        font-size: 0.875em;
        line-height: 1.125em;
        text-align: center;
        margin-top: 1em;
    }
}

 @media only screen and (min-width: 768px) {
    .sharp-c-externalUser-modal-secured,
    .sharp-c-externalUser-modal-anonymous {
        .sharp-c-coi-modal__content\@desktop {
            padding: 2.75em;
        }
        .sharp-c-coi-modal__title\@desktop {
            font-size: 1.25em;
            line-height: 1.2em;
        }
        .sharp-c-coi-modal__description\@desktop {
            font-size: 1em;
            line-height: 1.5em;
        }
        .sharp-c-lightbox__container\@desktop {
            max-width: 39em;
        }
        .sharp-c-coi-modal__description-section\@desktop {
            display: flex;
            flex-wrap: wrap;
        }
        .sharp-c-coi-modal__left-section\@desktop {
            flex: 0 0 60%;
            margin-top: 1em;
            padding-right: 1em;
        }
        .sharp-c-coi-modal__right-section\@desktop {
            flex: 0 0 40%;
            text-align: center;
            .sharp-c-coi-modal__login-desc\@desktop {
                font-size: 0.875em;
                line-height: 1.285714em;
            }
            .sharp-c-coi-modal__right-section-image\@desktop {
                max-width: none;
            }
        }
        .sharp-c-coi-modal__condition-text {
            text-align: left;
            margin-top: 0;
        }
    }
}

 @media only screen and (min-width: 320px) {
    .sharp-c-externalUser-modal-secured,
    .sharp-c-externalUser-modal-anonymous {
        .sharp-c-coi-modal__title\@mobile {
            width: 100%;
        }
    }
}

.uxdia-c-button {
    font-size: 1em;
    line-height: normal;
    font-weight: 700;
    border-radius: 1.5625em;
    height: 3.125em;
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center;
    cursor: pointer;
    padding: 0 1.25em;
    text-align: center
}

.uxdia-c-button--primary {
    color: #fff;
    background-color: #ec1300;
    text-decoration: none;
    border: 2px solid #ec1300
}

.sharp-u-rewards-buttons__width {
    min-width: 7.8125em;
    max-width: 15.625em
}

.sharp-u-rewards-buttons__width:hover {
    font-family: Lato,sans-serif!important;
    font-style: normal!important;
    font-weight: 700!important
}

@media only screen and (min-width: 768px) {
    .sharp-u-rewards-buttons__width {
        min-width:15.625em;
        max-width: -webkit-fit-content;
        max-width: -moz-fit-content;
        max-width: fit-content
    }
}

.sharp-c-coi-modal__content .sharp-c-coi-modal__description {
    color: #37383d
}

@media only screen and (min-width: 768px) {
    .sharp-c-coi-modal__content\@desktop {
        padding:3.125em 5.625em
    }

    .sharp-c-coi-modal__content\@desktop .sharp-c-coi-modal__logo-wrapper\@desktop {
        margin-bottom: 2.5em
    }

    .sharp-c-coi-modal__content\@desktop .sharp-c-coi-modal__logo-wrapper\@desktop .sharp-c-coi-modal__logo-image\@desktop {
        max-width: 16.875em
    }

    .sharp-c-coi-modal__content\@desktop .sharp-c-coi-modal__description {
        font-size: 1em;
        line-height: 1.5625em
    }
}

.sharp-c-coi-modal__content:focus {
    outline: 0
}

@media only screen and (min-width: 1168px) {
    .sharp-c-coi-modal .sharp-c-lightbox__container\@desktop {
        width:50%
    }
}

.sharp-c-coi-modal .sharp-c-lightbox__container\@desktop .aarp-c-modal__close-button {
    height: .9375em;
    width: .9375em;
    top: 1.5625em;
    right: 1.5625em
}

@media only screen and (max-width: 424px) {
    .sharp-c-coi-modal .sharp-c-lightbox__container\@mobile.uxdia-c-lightbox__container {
        top:0
    }
}

.uxdia-c-button--primary:focus,.uxdia-c-button--primary:hover {
    color: #ec1300;
    background-color: #fff;
    text-decoration: none;
    border: 2px solid #ec1300
}

.sharp-c-lightbox__container\@mobile {
    width: 90%;
    margin: 0 auto
}

@media only screen and (min-width: 425px) {
    .sharp-c-lightbox__container\@mobile {
        top:0
    }
}

.sharp-orientation-landscape .sharp-c-lighbox-ss-pod .aarp-c-modal__container {
    width: 60%
}

@media only screen and (min-width: 320px) {
    .aarp-c-modal--member-benefits-offer-details .sharp-c-lightbox__container\@mobile {
        top:0
    }
}

@media only screen and (min-width: 768px) {
    .sharp-c-lightbox__container\@tablet {
        width:45em
    }
}

@media only screen and (min-width: 1168px) {
    .sharp-c-lightbox__container\@desktop {
        width:51.875em;
        top: 4.375em
    }
}

@media only screen and (min-width: 1168px) {
    .aarp-c-modal--member-benefits-offer-details .sharp-c-lightbox__container\@desktop {
        width:51.875em;
        top: 0
    }
}

.sharp-c-lightbox--player .aarp-c-modal__children {
    overflow-y: inherit
}

.sharp-c-lightbox__close-button {
    height: 1em;
    position: absolute;
    right: -.625em;
    top: -2.5em;
    cursor: pointer
}

@media only screen and (min-width: 1168px) {
    .sharp-c-lightbox__container\@desktop {
        width:50%;
    }
}

.sharp-c-coi-modal .sharp-c-lightbox__container\@desktop .aarp-c-modal__close-button {
    height: .9375em;
    width: .9375em;
    top: 1.5625em;
    right: 1.5625em
}

.aarp-c-modal__children {
    -webkit-overflow-scrolling: touch;
    align-content: center;
    background: #fff;
    flex-basis: auto;
    max-height: calc(100vh - 10px);
    position: relative;
    width: 100%
}

.aarp-c-modal__close-button:focus,.aarp-c-modal__close-button:hover {
    color: #fff
}

.aarp-c-modal__iframe {
    border: none;
    width: 100%
}

.aarp-c-modal--open {
    overflow: hidden
}

.aarp-c-modal--open:has(.aarp-c-modal__medicare) {
    position: fixed
}

.aarp-c-modal--closed {
    display: none
}

.aarp-coi-modal-closed {
    display: none;
}