/* GENERAL STYLES */
.text-field-fonts {
    font-family: Rubik, Montserrat, Helvetica, Arial, sans-serif;
}

.font-family-alternate {
    font-family: Poppins, Arial, Helvetica, sans-serif;
}

/* AUTHENTICATION SECTION STYLES */
.login-page-container,
.self-register-page-container,
.verification-page-container,
.forgot-password-page-container,
.reset-password-page-container {
    background-color: var(--mud-palette-background-grey);
    min-height: 100vh;
}

.logins-container {
    min-height: calc(100vh - 70px);
}

.login-methods-container {
    flex-direction: column !important;
    gap: 40px;
}

.self-register-form-container {
    min-height: calc(100vh - 81px);
}

.verification-form-container {
    min-height: calc(100vh - 68px);
}

.forgot-password-form-container,
.reset-password-form-container {
    min-height: calc(100vh - 84px);
}

.login-methods-container,
.login-form,
.login-form-container,
.recent-logins-container,
.self-register-form,
.verification-form,
.forgot-password-form,
.reset-password-form {
    background-color: transparent;
    width: calc(100vw - 40px);
}

.verification-form,
.forgot-password-form,
.reset-password-form {
    padding: 30px 20px 40px;
}

.login-form-header,
.self-register-form-header {
    font-size: 40px;
    font-weight: 700;
    line-height: 44px;
    letter-spacing: -0.8px;
}

.login-form-field .mud-input-root,
.register-form-field .mud-input-root,
.phone-number-confirmation-field .mud-input-root,
.password-reset-field .mud-input-root {
    padding: 14px 10px !important;
}

.login-form-field .mud-input-outlined-border,
.register-form-field .mud-input-outlined-border,
.phone-number-confirmation-field .mud-input-outlined-border,
.password-reset-field .mud-input-outlined-border {
    border-radius: 6px !important
}

.login-form-field .mud-input-label,
.register-form-field .mud-input-label,
.phone-number-confirmation-field .mud-input-label,
.password-reset-field .mud-input-label {
    color: var(--mud-palette-text-disabled) !important;
    font-family: Rubik, Montserrat, Helvetica, Arial, sans-serif;
}

.login-form-field .mud-input-label-outlined,
.register-form-field .mud-input-label-outlined,
.phone-number-confirmation-field .mud-input-label-outlined,
.password-reset-field .mud-input-label-outlined {
    transform: translate(5px, 15px);
}

.remove-recent-login-button {
    position: absolute !important;
    top: 0;
    left: 0;
}

    .remove-recent-login-button .mud-icon-root.mud-svg-icon {
        fill: #c4cdd5;
    }

.recent-login-company-caption {
    display: -webkit-box;
    overflow: hidden;
    padding: 5px 10px;
    white-space: pre-wrap;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}

.terms-and-conditions {
    font-size: 12px;
    line-height: 20px;
}

.otp-digit-box .mud-input-root {
    color: var(--mud-palette-text-primary) !important;
    font-weight: 500 !important;
    min-height: 48px;
    padding: 0 !important;
    text-align: center;
}

.otp-digit-box .mud-input-outlined-border {
    border-color: var(--mud-palette-secondary-text) !important;
    border-radius: 4px !important;
}

.close-recent-login {
    position: absolute !important;
    top: -20px;
    right: -20px;
}

@media (min-width: 600px) {
    .logins-container {
        min-height: calc(100vh - 24px);
    }

    .login-methods-container {
        gap: 77px;
    }

    .verification-form-container {
        min-height: calc(100vh - 76px);
    }

    .forgot-password-form-container,
    .reset-password-form-container {
        min-height: calc(100vh - 80px);
    }

    .login-form,
    .self-register-form,
    .verification-form,
    .forgot-password-form,
    .reset-password-form {
        background-color: #fff;
        box-shadow: 0px 12px 24px -4px rgba(145, 158, 171, 0.12), 0px 0px 2px 0px rgba(145, 158, 171, 0.20);
    }

    .login-form {
        max-width: 415px;
    }

    .self-register-form {
        max-width: 457px;
    }

    .verification-form,
    .forgot-password-form,
    .reset-password-form {
        max-width: 430px;
    }

    .forgot-password-form-header,
    .reset-password-form-header,
    .recent-login-company-title {
        font-size: 40px;
        font-weight: 700;
        letter-spacing: -0.8px;
    }

    .close-recent-login {
        top: -40px;
        right: -40px;
    }
}

@media (min-width: 960px) {
    .login-methods-container {
        flex-direction: row-reverse !important;
    }

    .login-form-container,
    .recent-logins-container {
        width: calc(50vh - 20px);
    }
}

@media (min-width: 1280px) {
    .login-methods-container {
        flex-direction: row !important;
    }
}

/* CUSTOMERS SECTION STYLES */
.customer-profile-page-container {
    min-height: calc(100vh - 56px);
    padding: 0 20px 15px;
}

.customer-information,
.previous-subscription {
    font-weight: 500;
    line-height: 16px;
}

.customer-information {
    color: #212836;
    text-transform: uppercase;
}

.voucher-ticket-container {
    max-height: 500px;
    overflow-y: scroll;
    padding: 1px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

    .voucher-ticket-container::-webkit-scrollbar {
        display: none;
    }

.voucher-ticket {
    border-radius: 4px;
    padding: 10px 15px;
}

    .voucher-ticket::before,
    .voucher-ticket::after {
        background-color: var(--mud-palette-surface);
        border-radius: 50%;
        content: "";
        display: block;
        height: 13px;
        position: absolute;
        top: 39px;
        width: 13px;
    }

    .voucher-ticket::before {
        left: -7px;
    }

    .voucher-ticket::after {
        right: -7px;
    }

.unused-voucher-ticket {
    border: 1px solid var(--mud-palette-primary);
}

.used-voucher-ticket {
    border: 1px solid #919eab52;
}

.expansion-panel-section {
    margin-bottom: 0 !important;
}

    .expansion-panel-section .mud-expand-panel-header {
        padding: 15px 10px !important;
    }

    .expansion-panel-section .mud-expand-panel-content {
        padding: 0 10px 10px 10px !important;
    }

.expansion-panel-labels {
    color: var(--mud-palette-secondary-text);
    font-family: Poppins, Arial, Helvetica, sans-serif;
    font-size: 10px;
}

@media(min-width: 600px) {
    .customer-profile-page-container {
        min-height: calc(100vh - 64px);
        padding: 0px 42px 21px 21px;
    }
}

/* PAYMENT CONFIRMATION SECTION STYLES */
.success-icon-shadow {
    background-color: #00ab5529;
    border-radius: 50%;
    padding: 10px;
}

    .success-icon-shadow .mud-icon-root {
        margin-bottom: 2px;
    }