@import 'variables.css';



/* Basic */

* {
    box-sizing: border-box;
}

/* Hide Edge's and Chrome's default password reveal icon */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
    display: none;
}

input[type="password"]::-webkit-credentials-auto-fill-button {
    visibility: hidden;
    display: none !important;
    pointer-events: none;
    position: absolute;
    right: 0;
}

/* Hide Safari's password reveal icon */
/* REMOVED: This rule breaks password input on iOS Safari (iPad/iPhone) */
/* input[type="password"]::-webkit-textfield-decoration-container {
    display: none;
} */


body {
    font-family: var(--typography-font-family);
    font-size: var(--typography-font-size-base);
    font-weight: var(--typography-font-weight-regular);
    line-height: var(--typography-lineHeight-base);
    letter-spacing: var(--typography-spacing-letter-none);
    color: var(--typography-color-default-neutral);
    margin: 0;
    padding: 0;
}

main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    flex: 1;
}

.layout-container {
    font-family: var(--typography-font-family, 'Proxima Nova');
    background: #F8FBFF;
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    min-height: 100vh;
}

    .layout-container.modal-container {
        display: none;
        left: 0px;
        top: 0px;
        position: fixed;
        background: unset;
    }


.container-full-width {
    width: 100%;
}

.container-inner-width {
    width: 100%;
    max-width: var(--container-max-width, 1440px);
}

.background-overlay {
    background: #F6F7FB !important;
}

.no-border {
    border: none !important;
}

.no-text-decoration {
    text-decoration: none !important;
}

.red-border {
    border: 1px solid red !important;
}

.green-border {
    border: 1px solid green !important;
}



/* Common */

.font-regular {
    font-family: var(--typography-font-family, 'Proxima Nova');
    font-weight: var(--typography-font-weight-regular, 400);
    font-style: normal;
    color: var(--typography-color-default-neutral, #333);
}

.font-medium-bold {
    font-family: var(--typography-font-family, 'Proxima Nova');
    font-weight: var(--typography-font-weight-medium, 500);
    font-style: normal;
    color: var(--typography-color-default-neutral, #333);
}

.font-semi-bold {
    font-family: var(--typography-font-family, 'Proxima Nova');
    font-weight: var(--typography-font-weight-bold, 600);
    font-style: normal;
    color: var(--typography-color-default-neutral, #333);
}

.font-bold {
    font-family: var(--typography-font-family, 'Proxima Nova');
    font-weight: var(--typography-font-weight-bold, 700);
    font-style: normal;
    color: var(--typography-color-default-neutral, #333);
}

.font-size-base {
    font-size: var(--typography-font-size-base, 16px);
    line-height: var(--typography-lineHeight-base, 24px);
    letter-spacing: var(--typography-spacing-letter-none, 0px);
}

.font-size-xs {
    font-size: var(--typography-font-size-xs, 13px);
    line-height: var(--typography-lineHeight-xs, 19.5px);
    letter-spacing: var(--typography-spacing-letter-none, 0px);
}

.font-size-sm {
    font-size: var(--typography-font-size-sm, 14px);
    line-height: var(--typography-lineHeight-sm, 21px);
    letter-spacing: var(--typography-spacing-letter-none, 0px);
}

.font-size-xl {
    font-size: var(--typography-font-size-xl, 20px);
    line-height: var(--typography-lineHeight-xl, 30px);
    letter-spacing: var(--typography-spacing-letter-none, 0px);
}

.font-size-2x {
    font-size: var(--typography-font-size-2x, 24px);
    line-height: var(--typography-lineHeight-2x, 35.2px);
    letter-spacing: var(--typography-spacing-letter-none, 0px);
}

.font-size-2x-custom {
    line-height: var(--typography-lineHeight-3x, 36px);
}

.font-size-4x {
    font-size: var(--typography-font-size-4x, 32px);
    line-height: var(--typography-lineHeight-4x, 42px);
    letter-spacing: var(--typography-spacing-letter-none, 0px);
}

.font-size-4x-custom {
    line-height: var(--typography-lineHeight-2x, 35.2px);
}

.font-size-7x {
    font-size: var(--typography-font-size-7x, 48px);
    line-height: var(--typography-lineHeight-7x, 60px);
    letter-spacing: var(--typography-spacing-letter-none, 0px);
}

.font-size-7x-custom {
    line-height: var(--typography-lineHeight-6x, 52.8px);
}

.form-letter-spacing {
    letter-spacing: var(--typography-spacing-letter-lg, 0.32px);
}

.banner-button-letter-spacing {
    letter-spacing: var(--typography-spacing-letter-md, 0.28px);
}

.font-banner {
    color: var(--banner-color-text, #FFF);
}

.line-preserved-text {
    white-space: pre-line;
}

.ai-sparkle-icon {
    width: var(--icon-sizing-md-width, 24px);
    height: var(--icon-sizing-md-height, 24px);
}

.button {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: var(--button-spacing-standard-primary-min-width, 64px);
    min-height: var(--button-spacing-standard-primary-min-height, 40px);
    border-radius: var(--button-radius-standard-primary, 4px);
    padding: var(--button-spacing-standard-primary-padding-top, 4px) var(--button-spacing-standard-primary-padding-right, 16px) var(--button-spacing-standard-primary-padding-bottom, 4px) var(--button-spacing-standard-primary-padding-left, 16px);
    gap: var(--button-spacing-standard-primary-padding-gap, 8px);
}

.button-small {
    min-height: 32px;
    gap: 4px;
}

.button span {
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    letter-spacing: var(--typography-spacing-letter-lg, 0.32px);
}

.button:hover {
    cursor: pointer;
}

.text-button {
    display: flex;
    align-items: center;
    border-radius: var(--button-radius-standard-primary, 4px);
    background-color: var(--typography-color-transparent, #FFFFFF00);
}

.button-secondary {
    border: 1px solid var(--button-color-secondary-border-enabled, #808080);
    background: var(--button-color-secondary-background-enabled, rgba(5, 87, 213, 0.00));
    color: var(--button-color-secondary-content-enabled, #0557D5);
}

.button-secondary-disabled {
    border: 1px solid var(--button-color-secondary-border-disabled, rgba(128, 128, 128, 0.48));
    background: var(--button-color-secondary-background-disabled, rgba(5, 87, 213, 0.00));
    color: var(--button-color-secondary-content-disabled, rgba(5, 87, 213, 0.48));
}

    .button-secondary-disabled:hover {
        cursor: unset;
    }

.button-secondary:hover {
    border: 1px solid var(--button-color-secondary-border-hover, #013D98);
    background: var(--button-color-secondary-background-hover, rgba(5, 87, 213, 0.08));
}

.button-secondary:active {
    border: 1px solid var(--button-color-secondary-border-pressed, #012865);
    background: var(--button-color-secondary-background-pressed, rgba(5, 87, 213, 0.16));
}

.button-secondary span {
    color: var(--button-color-secondary-content-enabled, #0557D5);
}

.button-secondary-disabled span {
    color: var(--button-color-secondary-content-disabled, rgba(5, 87, 213, 0.48));
}

.button-secondary:hover span {
    color: var(--button-color-secondary-content-hover, #013D98);
}

.button-secondary:active span {
    color: var(--button-color-secondary-content-pressed, #012865);
}

.button-primary {
    border: 1px solid var(--button-color-primary-border-enabled, rgba(255, 255, 255, 0.00));
    background: var(--button-color-primary-background-enabled, #0557D5);
    color: var(--button-color-primary-content-enabled, #FFF);
    box-shadow: var(--button-shadow-x, 0px) var(--button-shadow-y, 5.5px) var(--button-shadow-blur, 6px) var(--button-shadow-spread, -2px) var(--button-color-primary-shadow-enabled, rgba(5, 87, 213, 0.32));
}

    .button-primary span {
        color: var(--button-color-primary-content-enabled, #FFF);
    }

    .button-primary:hover {
        background: var(--button-color-primary-background-hover, #013D98);
    }

        .button-primary:hover span {
            color: var(--button-color-primary-content-hover, #FFF);
        }

    .button-primary:active {
        background: var(--button-color-primary-background-pressed, #012865);
    }

        .button-primary:active span {
            color: var(--button-color-primary-content-pressed, #FFF);
        }

.button-primary-disabled,
.button-primary-disabled:hover,
.button-primary-disabled:active {
    border: 1px solid var(--button-color-primary-border-disabled, rgba(255, 255, 255, 0));
    background: var(--button-color-primary-background-disabled, rgba(5, 87, 213, 0.48));
    color: var(--button-color-primary-content-disabled, rgba(255, 255, 255, 0.48));
}

    .button-primary-disabled span {
        color: var(--button-color-primary-content-disabled, rgba(255, 255, 255, 0.48));
    }

    .button-primary-disabled:hover {
        cursor: unset;
    }

.checkbox-field {
    display: flex;
    align-items: stretch;
}

.checkbox-field-checked {
    accent-color: var(--checkbox-color-control-background-selected-enabled, rgba(5, 87, 213, 1)) !important;
}

.checkbox {
    appearance: none;
    -webkit-appearance: none;
    width: var(--checkbox-sizing-control-container-width, 20px);
    height: var(--checkbox-sizing-control-container-height, 20px);
    border-radius: var(--checkbox-radius-control, 2px);
    border: var(--checkbox-border-control, 1px) solid var(--checkbox-color-control-border-enabled, #808080);
    background: var(--checkbox-color-control-background-unselected-enabled, rgba(5, 87, 213, 0.00));
}

    .checkbox:hover {
        border: var(--checkbox-border-control, 1px) solid var(--checkbox-color-control-border-hover, #013D98);
        background: var(--checkbox-color-control-background-unselected-hover, rgba(5, 87, 213, 0.08));
    }

    .checkbox:active {
        border: var(--checkbox-border-control, 1px) solid var(--checkbox-color-control-border-pressed, #012865);
        background: var(--checkbox-color-control-background-unselected-pressed, rgba(5, 87, 213, 0.16));
    }

    .checkbox:checked {
        background: var(--checkbox-color-control-background-selected-enabled, #0557D5);
    }

        .checkbox:checked::after {
            content: '';
            display: flex;
            width: var(--icon-sizing-xs-width, 16px);
            height: var(--icon-sizing-xs-height, 16px);
            background: var(--checkbox-checked-icon, url('../images/checkbox-check-icon.svg') center / contain no-repeat);
            margin: 1px;
        }

        .checkbox:checked:hover {
            background: var(--checkbox-color-control-background-selected-hover, #013D98);
        }

        .checkbox:checked:active {
            background: var(--checkbox-color-control-background-selected-pressed, #012865);
        }

.input-field-container:has(.checkbox) + .form-label .label-text {
    color: var(--checkbox-color-label-enabled, #333) !important;
}

.input-field-container:has(.checkbox:hover) + .form-label .label-text {
    color: var(--checkbox-color-label-hover, #333) !important;
}

.input-field-container:has(.checkbox:active) + .form-label .label-text {
    color: var(--checkbox-color-label-pressed, #333) !important;
}

input[type="checkbox"]:focus-visible {
    outline: 1px solid var(--input-outline-focus);
}

.radio-field {
    display: flex;
    align-self: stretch;
    align-items: flex-start;
    gap: var(--radio-spacing-standard-gap, 8px);
    padding: var(--radio-spacing-standard-top, 8px) var(--radio-spacing-standard-right, 8px) var(--radio-spacing-standard-bottom, 8px) var(--radio-spacing-standard-left, 8px);
    min-width: var(--textField-spacing-standard-min-width, 40px);
    min-height: var(--textField-spacing-standard-min-height, 40px);
    border: unset;
    background: unset;
}

    .radio-field .radio {
        appearance: none !important;
        -webkit-appearance: none !important;
        margin: 0px;
        width: var(--radio-sizing-control-container-width, 20px);
        height: var(--radio-sizing-control-container-height, 20px);
        display: flex;
        align-self: center;
        align-items: center;
        flex-grow: 0;
        flex-shrink: 0;
        flex-basis: inherit;
        border-radius: var(--radio-radius-control, 320px);
        cursor: pointer;
        border: var(--radio-border-control, 1px) solid var(--radio-color-control-border-enabled, #808080);
        background: var(--radio-color-control-background-unselected-enabled, rgba(5, 87, 213, 0.00));
    }

    .radio-field .form-label.radio-label {
        flex-grow: 1;
        cursor: pointer;
    }

        .radio-field .form-label.radio-label .label-text {
            color: var(--radio-color-label-enabled, #333);
        }

    .radio-field .radio:not(:checked):hover {
        appearance: none;
        -webkit-appearance: none;
        border: var(--radio-border-control, 1px) solid var(--radio-color-control-border-hover, #013D98);
        background: var(--radio-color-control-background-unselected-hover, rgba(5, 87, 213, 0.08));
    }

    .radio-field .radio:not(:checked):active {
        appearance: none;
        -webkit-appearance: none;
        border: var(--radio-border-control, 1px) solid var(--radio-color-control-border-pressed, #012865);
        background: var(--radio-color-control-background-unselected-pressed, rgba(5, 87, 213, 0.16));
    }

    .radio-field .radio:checked {
        background: unset;
        border: 5px solid var(--radio-color-control-background-selected-enabled, #0557D5);
    }

        .radio-field .radio:checked:hover {
            appearance: none;
            -webkit-appearance: none;
            background: #FFF;
            border: 5px solid var(--radio-color-control-background-selected-hover, #013D98);
        }

        .radio-field .radio:checked:active {
            appearance: none;
            -webkit-appearance: none;
            background: #FFF;
            border: 5px solid var(--radio-color-control-background-selected-pressed, #012865);
        }

        .radio-field .radio:not(:checked):hover + .radio-label .label-text,
        .radio-field .radio:checked:hover + .radio-label .label-text {
            color: var(--radio-color-label-hover, #333) !important;
        }

        .radio-field .radio:not(:checked):active + .radio-label .label-text,
        .radio-field .radio:checked:active + .radio-label .label-text {
            color: var(--radio-color-label-pressed, #333) !important;
        }



/* Icon Text Button  */

.text-icon-button-container {
    display: flex;
    justify-content: flex-end;
    align-items: first baseline;
}

/* button discrret */
.text-icon-button {
    min-width: var(--button-spacing-small-discreet-min-width, 20px);
    min-height: var(--button-spacing-small-discreet-min-height, 20px);
    padding: var(--button-spacing-small-discreet-padding-top, 4px) var(--button-spacing-small-discreet-padding-right, 4px) var(--button-spacing-small-discreet-padding-bottom, 4px) var(--button-spacing-small-discreet-padding-left, 4px);
    gap: var(--button-spacing-small-discreet-padding-gap, 4px);
    border-radius: var(--button-radius-small-discreet, 4px);
    border-color: var(--button-color-transparent-border, transparent);
    background: var(--button-color-discreet-background-enabled, rgba(5, 87, 213, 0.01));
}

.inline-anchor {
    padding: 0;
    background: var(--button-color-discreet-background-enabled, rgba(5, 87, 213, 0.01));
    color: var(--button-color-discreet-content-enabled, #0557D5);
    word-break: break-word;
}

    .text-icon-button:hover,
    .inline-anchor:hover {
        background: var(--button-color-discreet-background-hover, rgba(5, 87, 213, 0.08));
    }

    .text-icon-button:active,
    .inline-anchor:active {
        background: var(--button-color-discreet-background-pressed, rgba(5, 87, 213, 0.16));
    }

.text-icon-button .text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    color: var(--button-color-discreet-content-enabled, #0557D5);
    text-align: center;
    text-overflow: ellipsis;
    letter-spacing: var(--typography-spacing-letter-lg, 0.32px);
}

.text-icon-button .icon {
    width: var(--icon-sizing-sm-width, 20px);
    height: var(--icon-sizing-sm-height, 20px);
    color: var(--button-color-discreet-content-enabled, #0557D5);
    align-self: center !important;
}

.text-icon-button .learn-more-icon {
    fill: var(--button-color-discreet-content-enabled, #0557D5);
}

.text-icon-button:hover .text,
.text-icon-button:hover .icon {
    color: var(--button-color-discreet-content-hover, #013D98);
}

.text-icon-button:hover .learn-more-icon {
    color: var(--button-color-discreet-content-hover, #013D98);
}

.text-icon-button:active .text,
.text-icon-button:active .icon {
    color: var(--button-color-discreet-content-pressed, #012865);
}

.text-icon-button:active .learn-more-icon {
    fill: var(--button-color-discreet-content-pressed, #012865);
}

.tooltip-container {
    position: relative;
}

    .tooltip-container .tooltip {
        position: absolute;
        top: 110%;
        right: 100%;
        margin-right: -25px;
        margin-bottom: var(--space-xs);
        padding: var(--space-xs) var(--space-sm);
        border: 1px solid var(--textField-color-help-enabled);
        border-radius: var(--radius-sm);
        background-color: var(--typography-color-default-neutral);
        color: var(--neutrals-color-neutral-0);
        letter-spacing: var(--typography-spacing-letter-md);
        white-space: nowrap;
        transition: opacity 0.2s ease;
        opacity: 0;
        z-index: 1000;
        cursor: text;
    }

.tooltip-arrow {
    position: absolute;
    top: -9px;
    right: 12px;
    width: 0;
    height: 0;
    border-bottom: 9px solid #333;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
}

.tooltip-arrow-bottom {
    position: absolute;
    bottom: -9px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-top: 9px solid #333;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
}




.success-text {
    color: var(--functional-color-content-success-enabled, #028217) !important;
}



/* Display based on theme */

.display-on-light-theme {
    display: var(--display-on-light-theme) !important;
}

.display-on-dark-theme {
    display: var(--display-on-dark-theme) !important;
}