@import "../css/ToastMessage.css";
@import "../css/SentSuccessScreenContent.css";
@import "../css/SignIn.css";
@import "../css/EnrollModalLoginScreen.css";

#enroll-modal {
    font-family: "Montserrat", sans-serif;
    width: 100vw;
    background-color: transparent;
}

#enroll-modal .modal {
    max-height: inherit;
    min-height: auto;
    height: 100%;
    width: 100%;
    border-radius: 0;
}

#enroll-modal .modal-container {
    width: 100%;
    height: 100%;
}

#enroll-modal .modal__content > div {
    width: 100%;
}

#enroll-modal .content {
    padding: 1.25rem;
}

#enroll-modal .modal__content {
    display: flex;
    overflow-y: auto;
    width: 100%;
    height: 100%;
}

#enroll-modal .tnaa-icon img {
    width: 2.125rem;
    height: auto;
    margin-bottom: 1.25rem;
}

#enroll-modal .tnaa-icon svg {
    height: auto;
    margin-bottom: 1.25rem;
}

#enroll-modal i {
    user-select: none;
}

#enroll-modal .enroll-image {
    overflow: hidden;
    max-height: 18.75rem;
    margin-bottom: 1.25rem;
    border-radius: 1rem;
}

#enroll-modal .enroll-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#enroll-modal .enroll-confirmation:not(.account-claim-process-ff) .btn-group,
#enroll-modal .enroll-error:not(.account-claim-process-ff) .btn-group {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

#enroll-modal .enroll-confirmation:not(.account-claim-process-ff) .btn-item,
#enroll-modal .enroll-error:not(.account-claim-process-ff) .btn-item {
    width: 100%;
}

#enroll-modal .enroll-confirmation:not(.account-claim-process-ff) .btn-group .cta,
#enroll-modal .enroll-error:not(.account-claim-process-ff) .btn-group .cta {
    flex: 1;
    width: auto;
    margin-bottom: 1.25rem;
}

#enroll-modal .intro-text {
    line-height: 1.5;
    margin: 1em 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
}

#enroll-modal .cta {
    display: block;
    margin-bottom: 0;
    padding: 0.875rem 1.25rem;
    transition: opacity 400ms ease;
}

#enroll-modal .cta[type='submit'] {
    width: 100%;
}

#enroll-modal .cta[disabled=''] {
    opacity: 0.5;
    cursor: not-allowed;
}

#enroll-modal .purple-link {
    display: inline-block;
    color: #2618B1;
    text-decoration: none;
    margin-top: 1.25rem;
}

#enroll-modal .cta.btn--red {
    background-color: #e5002c;
}

#enroll-modal .cta--outlined.btn--red {
    background-color: transparent;
    box-shadow: inset 0 0 0 2px #e5002c;
    color: #e5002c;
}

#enroll-modal .color-red {
    color: #e5002c;
}

#enroll-modal .field--input {
    border: none;
}

#enroll-modal input {
    width: -webkit-fill-available;
}

#enroll-modal input::placeholder {
    color: rgb(84, 84, 84);
    opacity: 1;
}

#enroll-modal select:invalid {
    color: rgb(84, 84, 84);
}

#enroll-modal .field--input input:not(:focus) {
    box-shadow: none;
}

#enroll-modal .sub-message {
    font-family: "Montserrat", sans-serif;
    font-size: .75rem;
    line-height: 1.5;
    margin-bottom: .25rem;

    color: rgb(84, 84, 84);
    opacity: 1;
}

#enroll-modal .error-message {
    font-family: "Montserrat", sans-serif;
    font-size: .75rem;
    line-height: 1.3;
    color: #e5002c;
    margin-bottom: .25rem;
}

#enroll-modal .error-message + .field-wrap input,
#enroll-modal .error-message + .field-wrap select {
    border-color: #e5002c;
}

#enroll-modal .error-message + form .field-wrap input,
#enroll-modal .error-message + form .field-wrap select {
    border-color: #e5002c;
}

#enroll-modal .input {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

#enroll-modal .password-toggle {
    display: inline-flex;
    position: absolute;
    right: 1.25rem;
    z-index: 2;
    cursor: pointer;
}

#enroll-modal .password-toggle:before {
    content: "\e8f4";
    font-family: 'Material Symbols Outlined', monospace;
    font-style: normal;
    font-weight: normal;
    text-decoration: none;
    font-size: 1.25rem;
}

#enroll-modal .password-toggle.shown:before {
    content: "\e8f5";
}

#enroll-modal .arrow-down {
    display: inline-flex;
    position: absolute;
    right: 1.25rem;
    z-index: 2;
    pointer-events: none;
}

#enroll-modal .arrow-down:before {
    content: "\e5c5";
    font-family: 'Material Symbols Outlined', monospace;
    font-style: normal;
    font-weight: normal;
    text-decoration: none;
    font-size: 1.25rem;
}

#enroll-modal .back-btn {
    appearance: none;
    background-color: transparent;
    color: #000;
    padding: 0;
    border: none;
    display: inline-flex;
    align-items: center;
    margin-bottom: 1.25rem;
    line-height: 1;
    font-weight: 600;
    font-size: 1rem;
}

#enroll-modal .back-btn .icon {
    display: inline-block;
    width: 2.125rem;
    height: 2.125rem;
    text-align: center;
    line-height: 2.125rem;
    background-color: #F4F5F7;
    color: inherit;
    border-radius: 100%;
    margin-right: .75rem;
}

#enroll-modal .back-btn .icon:before {
    content: "\e5c4";
    font-family: 'Material Symbols Outlined', monospace;
    font-style: normal;
    font-weight: normal;
    text-decoration: none;
    font-size: 1.5rem;
}

#enroll-modal .button--close {
    background-color: transparent;
    right: 1.25rem;
    top: 1.25rem;
    opacity: 0.5;
}

#enroll-modal input,
#enroll-modal select {
    line-height: 1.5rem;
    padding: .875rem 1.5rem;
    border: 1px solid #DCDCDD;
    background: none;
}

#enroll-modal input:not(.cta),
#enroll-modal select:not(.cta) {
    border-radius: 0.25rem;
}

#enroll-modal .fieldset {
    align-items: flex-end;
    margin: 0;
}

#enroll-modal .fieldset .field {
    flex: 1;
    margin: 0;
    margin-bottom: 1.25rem;
}

#enroll-modal h2 {
    position: relative;
    font-size: 1.75rem;
    line-height: 1.2;
    margin-bottom: 1rem;
}

#enroll-modal .enroll-content h2 {
    margin-bottom: 0.5rem;
}

#enroll-modal .enroll-intro-text {
    font-size: 1.125rem;
    font-weight: 500;
    margin-top: 0;
}

#enroll-modal form .actions {
    margin-top: 0;
}

@media (max-width: 768px) {
    .modal__content {
        top: 0;
        position: fixed;
    }
}

@media (min-width: 992px) {
    #enroll-modal .enroll-confirmation:not(.account-claim-process-ff) .btn-group,
    #enroll-modal .enroll-error:not(.account-claim-process-ff) .btn-group {
        display: flex;
        flex-wrap: nowrap;
        width: calc(100% + 1rem);
        margin: 0 -0.5rem;
    }

    #enroll-modal .enroll-confirmation:not(.account-claim-process-ff) .btn-item,
    #enroll-modal .enroll-error:not(.account-claim-process-ff) .btn-item {
        padding: 0 0.5rem;
    }

    #enroll-modal .fieldset .field:first-child {
        margin-right: .5rem;
    }

    #enroll-modal .fieldset .field:last-child {
        margin-left: .5rem;
    }

    #enroll-modal .reset-password .fieldset .field {
        margin-right: 0;
        margin-left: 0;
    }
}

@media (min-width: 1200px) {
    #enroll-modal .modal {
        max-width: 48.75rem;
        height: auto;
        max-height: 100%;
        transform: translateY(0%);
    }

    #enroll-modal .modal__content {
        max-height: 100vh;
    }
}

.button--close {
    position: absolute;
    top: 1.5rem;
    right: 1rem;
    cursor: pointer;
    height: 32px;
    width: 32px;
    padding: 0;
    background: rgba(82, 82, 87, 0.2);
    color: inherit;
    border: 0;
    border-radius: 50%;
    text-align: center;
    line-height: 32px;
    font-size: 28px;
    transition: all 0.3s ease-in-out;
    z-index: 9;
}

.no-scroll {
    overflow: hidden;
}

#enroll-modal .enroll-content .fieldset .field--checkbox {
    margin: 0;
    margin-bottom: 1.25rem;
    padding-left: 2rem;
}

#enroll-modal .field--checkbox input ~ label {
    font-size: .75rem;
    line-height: 1.3;
    color: inherit;
    margin-left: 0;
    user-select: none;
    -webkit-user-select: none;
}

#enroll-modal .field--checkbox input ~ label a {
    font-size: inherit;
    font-weight: 600;
    text-decoration: none;
    color: #e5002c;
}

#enroll-modal .field--checkbox input:checked ~ label::after {
    background-color: #000;
}

#enroll-modal .field--checkbox label::before {
    box-shadow: inset 0 0 0 1px #DCDCDD;
}

#enroll-modal .field--checkbox input:checked ~ label::before {
    box-shadow: inset 0 0 0 1px #000;
}

#enroll-modal .field--checkbox label::before,
#enroll-modal .field--checkbox label::after {
    left: -1.875rem;
    top: -0.125rem;
    border-radius: 4px;
}

#enroll-modal .field--checkbox label.is-required:before,
#enroll-modal .field--checkbox label.is-required:after {
    box-shadow: inset 0 0 0 1px #e5002c;
}

.terms-and-conditions {
    display: flex;
    flex-direction: column;
}

.terms-and-conditions .header {
    padding: 1.25rem;
    box-shadow: 0px 1px 2px #00000029;
    z-index: 1;
}

.terms-and-conditions.account-claim-process-ff .header {
    display: flex;
    align-items: center;
}

#enroll-modal .header .back-btn {
    margin: 0;
}

.terms-and-conditions:not(.account-claim-process-ff) .terms-and-conditions--content {
    flex: 1;
    overflow-x: auto;
    padding: 1.25rem;
}

.terms-and-conditions.account-claim-process-ff .terms-and-conditions--content {
    flex: 1;
    display: flex;
    padding: 24px;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    align-self: stretch;
    overflow-x: auto;
}

.terms-and-conditions:not(.account-claim-process-ff) .terms-and-conditions--content a {
    font-size: inherit;
    font-weight: inherit;
    color: #e5002c;
}

.terms-and-conditions.account-claim-process-ff .terms-and-conditions--content p {
    color: #101828;
    font-family: Montserrat, sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
    margin: 0;
}

.terms-and-conditions.account-claim-process-ff .terms-and-conditions--content a {
    font-size: inherit;
    font-weight: inherit;
    color: #F51238;
}

.terms-and-conditions.account-claim-process-ff .terms-and-conditions--heading {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    align-self: stretch;
}

#enroll-modal .terms-and-conditions.account-claim-process-ff .terms-and-conditions--heading h2 {
    margin: 0;
}

.terms-and-conditions.account-claim-process-ff .footer-back-btn {
    display: flex;
    padding: 0.625rem 1rem;
    justify-content: center;
    align-items: center;
    gap: 0.375rem;
    border-radius: 0.5rem;
    border: 1px solid #0C111D;
    background: #0C111D;
    box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05);

    color: #FFF;
    font-family: Montserrat, sans-serif;
    font-size: 1rem;
    font-style: normal;
    font-weight: 600;
    line-height: 1.5rem;
}

@media (min-width: 1200px) {
    .terms-and-conditions--content {
        max-height: 28rem;
    }
}

.terms-and-conditions--content .cta {
    width: 100%;
    background-color: #121212;
}

.grecaptcha-badge {
    display: none;
}

.flexHeader {
    color: #101828 !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 28px !important;
    margin: 0 !important;
}

.enroll-flex-intro-text {
    color: #475467;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    margin: 0;
}

.flex-sign-in {
    color: #E41E2E;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    text-decoration: none;
}

@media (max-width: 391px) {
    .flex-sign-in {
        display: block;
    }
}

.enroll-modal-header {
    display: flex;
    flex-direction: column;
    padding-bottom: 1.875rem;
}

.enroll-modal-header .header-icon {
    margin-right: 1rem;
}

#enroll-modal .enroll-modal-header .header-icon img {
    min-width: 2.813rem;
    margin-bottom: 0.75rem;
}

#enroll-modal .enroll-modal-header .header-text h2 {
    font-family: Montserrat, sans-serif;
    font-size: 1.25rem;
    line-height: 1.875rem;
    font-weight: 700;
    margin-bottom: 0;
}

.enroll-modal-header .header-text p {
    font-size: 1.125rem;
    line-height: 1.75rem;
    font-weight: 400;
    margin: 0.25rem 0;
}

.enroll-modal-header strong {
    font-weight: 600;
}

.enroll-modal-header em {
    font-family: inherit;
    font-style: italic;
    font-weight: inherit;
}

@media (min-width: 991px) {
    .enroll-modal-header {
        flex-direction: row;
    }

    .enroll-modal-header .header-text {
        padding-right: 2.875rem;
    }
}

.reset-password.account-claim-process-ff .content-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    max-width: 23.375rem;
    margin: 0 auto;
    padding: 0.625rem 0.75rem;
}

#enroll-modal .existing-user-message {
    display: flex;
    padding: 0.625rem 1rem;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.625rem;
    align-self: stretch;
    background: #FDE9EC;
}

#enroll-modal .reset-password.account-claim-process-ff .content-wrap h2 {
    color: #101828;
    text-align: center;
    font-family: Montserrat, sans-serif;
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 700;
    line-height: 2rem;
    margin-bottom: 0;
}

.reset-password.account-claim-process-ff .content-wrap > p {
    margin: 0;
    color: #101828;
    text-align: center;
    font-family: Montserrat, sans-serif;
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.875rem;
}

.reset-password.account-claim-process-ff .content-wrap form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    width: 100%;
}

.reset-password.account-claim-process-ff .content-wrap #field--email {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    width: 100%;
}

.reset-password.account-claim-process-ff .content-wrap form label {
    color: #242C40;
    font-family: Montserrat, sans-serif;
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 600;
    line-height: 1.25rem;
}

.reset-password.account-claim-process-ff .terms-info {
    display: flex;
    padding: 0.75rem 0;
    align-items: flex-start;
    align-self: stretch;

    color: #344054;
    font-family: Montserrat, sans-serif;
    font-size: 0.75rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.25rem;
}

.reset-password.account-claim-process-ff .terms-info p {
    margin: 0;
}

.reset-password.account-claim-process-ff .terms-info a {
    color: #F51238;
    font-family: Montserrat, sans-serif;
    font-size: 0.75rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1.25rem;
    text-decoration: none;
}

.reset-password.account-claim-process-ff .terms-info a:hover {
    color: #CC0F2F;
}

.reset-password.account-claim-process-ff .submit-btn {
    display: flex;
    padding: 0.75rem 1.125rem;
    justify-content: center;
    align-items: center;
    gap: 0.375rem;
    border-radius: 0.5rem;
    border: 1px solid #84ADFF;
    background: #EFF4FF;
    box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05);
    width: 100%;

    color: #004EEB;
    font-family: Montserrat, sans-serif;
    font-size: 1rem;
    font-style: normal;
    font-weight: 600;
    line-height: 1.5rem;
}

.reset-password.account-claim-process-ff .submit-btn:not(:disabled):hover {
    background: #D1E0FF;
    color: #0040C1;
}

.reset-password.account-claim-process-ff .submit-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.reset-password.account-claim-process-ff .header-back-btn,
.terms-and-conditions.account-claim-process-ff .header-back-btn,
.enroll-modal-login-screen .header-back-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    padding: 0;
    margin: 0;
    border: none;
    background: none;

    color: #475467;

    font-family: Montserrat, sans-serif;
    font-size: 1rem;
    font-style: normal;
    font-weight: 600;
    line-height: 1.5rem;
}

.reset-password.account-claim-process-ff .header-back-btn:hover,
.terms-and-conditions.account-claim-process-ff .header-back-btn:hover,
.enroll-modal-login-screen .header-back-btn:hover {
    color: #344054;
}

.reset-password.account-claim-process-ff .header-back-btn:hover svg path,
.terms-and-conditions.account-claim-process-ff .header-back-btn:hover svg path,
.enroll-modal-login-screen .header-back-btn:hover svg path {
    stroke: #344054;
}

.enroll-modal-login-screen .header-back-btn {
    position: absolute;
    top: 1.75rem;
    left: 1.25rem;
}

.modal-close-btn {
    display: flex;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0.5rem;
    justify-content: center;
    align-items: center;
    border-radius: 3.125rem;
    background: #F4F5F7;
    color: #585E6E;
    border: none;
    font-family: "Font Awesome 6 Pro", sans-serif;
    font-size: 1.75rem;
    font-style: normal;
    font-weight: 400;
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
}

#enroll-modal .existing-user-message--container {
    display: flex;
    padding: 0.375rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.625rem;
    align-self: stretch;
    border-radius: 0.5rem;
    background: #FFF;

    box-shadow: 0 0 0 4px rgba(237, 32, 61, 0.24);
}

#enroll-modal .existing-user-message--header {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    align-self: stretch;
}

#enroll-modal .existing-user-message--header-text {
    color: #000;
    font-family: Montserrat, sans-serif;
    font-size: 11px;
    font-style: normal;
    font-weight: 600;
    line-height: 18px;
    margin: 0;
}

#enroll-modal .existing-user-message--actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.625rem;
    align-self: stretch;
}

#enroll-modal .existing-user-message--actions button {
    display: flex;
    padding: 0.375rem 0.75rem;
    justify-content: center;
    align-items: center;
    gap: 0.25rem;

    border-radius: 0.5rem;
    border: 1px solid #155EEF;
    background: #155EEF;

    box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05);

    color: #FFF;
    font-family: Montserrat, sans-serif;
    font-size: 0.75rem;
    font-style: normal;
    font-weight: 600;
    line-height: 1.125rem;
}

#enroll-modal .existing-user-message--actions button:hover {
    border-color: #0040C1;
    background: #0040C1;
}

.enroll-confirmation.account-claim-process-ff .header,
.enroll-error.account-claim-process-ff .header {
    display: flex;
    padding: 1.5rem 1.25rem;
    align-items: center;
    gap: 1rem;
    flex: 1 0 0;
}

#enroll-modal .enroll-confirmation.account-claim-process-ff .content,
#enroll-modal .enroll-error.account-claim-process-ff .content {
    padding: 2.25rem 0.75rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
    align-self: stretch;
    max-width: 35rem;
    margin: 0 auto;
}

#enroll-modal .enroll-error.account-claim-process-ff .content {
    min-height: 24rem;
}

#enroll-modal .enroll-error.account-claim-process-ff h2,
#enroll-modal .enroll-confirmation.account-claim-process-ff h2 {
    color: #101828;
    font-family: Montserrat, sans-serif;
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 700;
    line-height: 2rem;
    margin: 0;
    text-align: left;
    width: 100%;
}

#enroll-modal .enroll-error.account-claim-process-ff h2 {
    text-align: center;
}

#enroll-modal .enroll-confirmation.account-claim-process-ff .intro-text,
#enroll-modal .enroll-error.account-claim-process-ff .intro-text {
    padding: 0 1.25rem;
    margin: 0;

    color: #101828;
    text-align: center;

    font-family: Montserrat, sans-serif;
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.875rem;

    width: 100%;
}

#enroll-modal .enroll-confirmation.account-claim-process-ff .intro-text {
    text-align: center;
    font-family: Montserrat, sans-serif;
    font-size: 1.375rem;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.enroll-confirmation.account-claim-process-ff a:not(.complete-profile-btn),
.enroll-error.account-claim-process-ff a:not(.complete-profile-btn) {
    color: #155EEF;
    font-family: Montserrat, sans-serif;
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 600;
    line-height: 1.25rem;
}

.enroll-confirmation.account-claim-process-ff a:not(.complete-profile-btn):hover,
.enroll-error.account-claim-process-ff a:not(.complete-profile-btn):hover {
    color: #0040C1;
}

.enroll-confirmation.account-claim-process-ff a.complete-profile-btn {
    display: flex;
    width: 100%;
    padding: 0.75rem 1.125rem;
    justify-content: center;
    align-items: center;
    gap: 0.375rem;
    border-radius: 0.5rem;
    border: 1px solid #155EEF;
    background: #155EEF;
    box-shadow: 0 0 0 4px rgba(18, 71, 186, 0.24);

    color: #FFF;
    font-family: Montserrat, sans-serif;
    font-size: 1rem;
    font-style: normal;
    font-weight: 600;
    line-height: 1.5rem;
}

.enroll-confirmation.account-claim-process-ff a.complete-profile-btn:hover {
    border-color: #0040C1;
    background: #0040C1;
}

.enroll-confirmation.account-claim-process-ff .btn-group,
.enroll-error.account-claim-process-ff .btn-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.25rem;
    align-self: stretch;
    text-align: center;
    width: 100%;
}

.enroll-confirmation.account-claim-process-ff .btn-group .btn-item,
.enroll-error.account-claim-process-ff .btn-group .btn-item {
    width: 100%;
}

.enroll-confirmation.account-claim-process-ff .icon-text-wrap {
    display: flex;
    padding: 0 1.25rem;
    align-items: center;
    gap: 1rem;
    align-self: stretch;
}


@media only screen and (min-width: 992px) {
    .enroll-modal-login-screen .login-wrap {
        padding: 4.5rem;
    }
}