@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@700&display=swap');

:root {
    --id-link: #F640C4;

    --background: #f4f5f5;
    --background-hue: #35373b;

    --button-primary: #FFFFFF;
    --button-primary-bg: #06d373;

    --button-secondary: #FFFFFF;
    --button-secondary-bg: #FF80E3;

    --button-tertiary: #35373B;
    --button-tertiary-bg: #DBD7E2;

    --text-primary: #35373B;
    --text-secondary: #565B61;
    --text-tertiary: #9EA2A9;

    --success-primary: #288F46;
    --success-secondary: #38C761;
    --success-tertiary: #EFFBF2;

    --warning-primary: #B34700;
    --warning-secondary: #F48500;
    --warning-tertiary: #FFF7EE;

    --danger-primary: #A7111F;
    --danger-secondary: #E7182C;
    --danger-tertiary: #FDECEE;

    --info-primary: #565B61;
    --info-secondary: #9EA2A9;
    --info-tertiary: #F4F5F5;

    --border-subdued: #F4F5F5;
    --border-muted: #E4E5E7;
    --border-light: #9EA2A9;
    --border-dim: #17191C;

    --white: #FFFFFF;
}

/*unset browser defaults*/
input, select, button {
    all: unset; /* Removes all browser default styles */
    box-sizing: border-box; /* Consistent sizing */
    margin: 0;
    padding: 0;
    font: inherit; /* Inherit font from parent */
    color: inherit;
    background: none;
    border: none;
    outline: none; /* Remove default focus outline */
    appearance: none; /* Remove platform-native styling (Safari/Chrome) */
}

html {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    color: var(--text-primary);
    background-color: var(--background);
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-weight: normal;
    font-style: normal;
}

h1 {
    font-size: 36px;
    line-height: 42px;
    margin: 24px 0;
}

h2 {
    font-size: 24px;
    line-height: 28px;
    margin: 24px 0;
}

.login {
    margin: 0;
    padding: 0 15px;
    display: flex;
    flex-flow: column nowrap;
    justify-content: start;
    align-items: center;
    min-height: 100vh;
}

.header {
    height: 112px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.header img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    max-height: 48px;
}

.login__main {
    position: relative;
    background-color: var(--white);
    box-sizing: border-box;
    width: 100%;
    max-width: 400px;
    padding: 4px;
    border-radius: 10px;
    box-shadow: 0 0 25px -10px var(--background-hue);
    display: flex;
    flex-flow: column-reverse nowrap;
}

.login__form {
    margin: 4px;
    padding: 3px 24px 24px;
}

.login__hero {
    margin: 4px;
}

.login__hero img {
    width: 100%;
    height: 283px;
    object-fit: cover;
    display: block;
    border-radius: 8px;
}

.language-selector-wrapper {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    padding: 16px;
}

.language-selector {
    position: relative;
}

.language-selector__flag {
    display: block;
    position: absolute;
    width: 16px;
    height: 16px;
    margin: 4px;
    object-fit: cover;
    border-radius: 50%;
    border: 1px solid var(--border-muted);
    box-sizing: border-box;
    pointer-events: none;
}

.language-selector__select {
    display: block;
    width: auto;
    cursor: pointer;
    text-align: center;
    box-sizing: content-box;
    padding: 0 28px;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    line-height: 24px;
}

.language-selector__arrow {
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    width: 14px;
    height: 14px;
    margin: 5px;
    pointer-events: none;
}

.login__id-link {
    text-decoration: none;
    color: var(--id-link);
    font-size: 12px;
    font-weight: bold;
    line-height: 14px;
}

.login__title {
    margin: 30px 0 22px;
}

.login__welcome-msg {
    font-size: 14px;
    line-height: 18px;
    color: var(--text-secondary);
}

.login__footer {
    padding: 32px;
    color: #787E87;
    font-family: Content, sans-serif;
    font-weight: 700;
    font-size: 12px;
    text-align: center;
}

.login__footer img {
    margin-top: 10px;
}

.redirect {
    display: inline-block;
    margin: 16px 0 0;
    font-family: Inter, sans-serif;
    font-size: 14px;
    line-height: 16px;
    letter-spacing: -0.02px;
    color: var(--text-secondary);
}

.redirect a {
    color: var(--text-secondary);
    font-weight: 700;
    text-decoration: underline;
}


/*kcFormGroupClass*/
.form-group {
    margin: 16px 0 0;
}

.form-group > button {
    margin-bottom: 16px;
}

/*kcFormButtonsClass*/
.form-buttons {
    display: flex;
    flex-flow: row wrap;
    gap: 16px;
}

/*kcInputGroup*/
.input-group {
    position: relative;
}

/*kcLabelWrapperClass*/
.label-wrapper {
    display: flex;
    justify-content: start;
    align-items: start;
    gap: 8px;
    flex-flow: row nowrap;
    font-size: 16px;
    line-height: 24px;
    content: "";
}

/*kcLabelClass*/
.label {
    display: block;
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 4px;
    cursor: pointer;
}

.label a {
    color: var(--text-primary);
    text-decoration: underline;
}

/*kcInputClass*/
.input {
    background-color: white;
    height: 48px;
    border: 1px solid var(--border-muted);
    border-radius: 8px;

    padding: 10px;

    font-size: 16px;
    font-weight: normal;
    line-height: 28px;
    width: 100%;
}

.input:focus, .input:active {
    border: 2px solid var(--border-dim);
}

.input:disabled {
    background-color: var(--border-muted);
}

.input[aria-invalid="true"], .checkbox[aria-invalid="true"] {
    border: 2px solid var(--danger-secondary);
}

/*kcInputErrorMessageClass*/
.input-error {
    display: block;
    position: relative;
    margin: 4px 0;
    padding-left: 16px;
    color: var(--danger-primary);
    font-size: 14px;
    line-height: 18px;
}

.input-error:before {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    content: "!";
    height: 12px;
    width: 12px;
    margin: 3px 0;
    text-align: center;
    font-size: 9px;
    line-height: 12px;
    box-sizing: border-box;
    border-radius: 50%;
    background-color: var(--danger-secondary);
    color: var(--white);
    font-family: "Inconsolata", sans-serif;
}

.input-tooltip {
    color: var(--text-primary);
}

.input-tooltip::before {
    content: "i";
    background-color: var(--text-secondary);
}

/*kcCheckboxInputClass*/
.checkbox {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    border: 1px solid var(--border-muted);
    border-radius: 4px;
    margin: 2px 0;
    cursor: pointer;
}

.checkbox + label {
    margin: 0;
}

.checkbox:checked {
    padding: 2px;
    background-image: url("../icons/check-lg.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.password, .restart-login {
    all: unset;
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    padding: 0 10px;
    cursor: pointer;
}

.password i {
    display: block;
    height: 20px;
    width: 20px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.restart-login i {
    display: block;
    height: 20px;
    width: 20px;
    background-size: 50%;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url("../icons/close.svg");
}

/*kcFormPasswordVisibilityIconShow*/
.password--show {
    background-image: url("../icons/show.svg");
}

.password--hide {
    background-image: url("../icons/hide.svg");
}

/*kcButtonClass, button--primary*/
.button {
    background-color: var(--button-primary-bg);
    color: var(--button-primary);
    border-radius: 8px;
    padding: 14px;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    line-height: 28px;
    cursor: pointer;
}

/*kcButtonPrimaryClass*/
.button--primary {
    background-color: var(--button-primary-bg);
    color: var(--button-primary);
}

/*kcButtonSecondaryClass*/
.button--secondary {
    background-color: var(--button-secondary-bg);
    color: var(--button-secondary);
}

/*kcButtonDefaultClass*/
.button--default {
    background-color: var(--button-tertiary-bg);
    color: var(--button-tertiary);
}

@media (hover: hover) {
    .button:hover, .button--primary:hover {
        background-color: color-mix(in srgb, var(--button-primary-bg), black 14%);
    }

    .button--secondary:hover {
        background-color: color-mix(in srgb, var(--button-secondary-bg), black 14%);
    }

    .button--default:hover {
        background-color: color-mix(in srgb, var(--button-tertiary-bg), black 14%);
    }
}

.button:active, .button--primary:active,
.button:focus, .button--primary:focus {
    background-color: color-mix(in srgb, var(--button-primary-bg), black 28%);
}

.button--secondary:active, .button--secondary:focus {
    background-color: color-mix(in srgb, var(--button-secondary-bg), black 28%);
}

.button--default:active, .button--default:focus {
    background-color: color-mix(in srgb, var(--button-tertiary-bg), black 28%);
}

/*kcButtonLargeClass*/
.button--large {
    width: 100%;
}

.button-group-responsive {
    display: flex;
    flex-flow: column nowrap;
    gap: 16px;
}

.button-group-responsive .button {
    width: 100%;
}

/*kcFormSocialAccountListClass*/
.social-account__list {
    flex: 0 0 auto;
    display: flex;
    width: 100%;
    justify-content: center;
    flex-flow: row wrap;
    gap: 8px;
    padding: 24px 0;
    margin: 0;
}

/*kcFormSocialAccountListButtonClass*/
.social-account__button {
    flex: 1 1 auto;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: center;
    min-width: 75px;
    max-width: 100%;
    height: 56px;
    border: 1px solid var(--border-light);
    border-radius: 10px;
    text-decoration: none;
    box-sizing: border-box;
}

.social-account__button:hover {
    background-color: var(--background);
}

.social-account__name {
    color: var(--text-secondary);
}

/*kcAlertClass*/
.alert {
    display: flex;
    flex-flow: row nowrap;
    gap: 12px;
    padding: 16px;
    margin: 24px 0;
    border-left: 2px solid black;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

.alert--success {
    color: var(--success-primary);
    border-color: var(--success-secondary);
    background-color: var(--success-tertiary);
}

.alert--warning {
    color: var(--warning-primary);
    border-color: var(--warning-secondary);
    background-color: var(--warning-tertiary);
}

.alert--error {
    color: var(--danger-primary);
    border-color: var(--danger-secondary);
    background-color: var(--danger-tertiary);
}

.alert--info {
    color: var(--info-primary);
    border-color: var(--info-secondary);
    background-color: var(--info-tertiary);
}

.alert-title {
    font-weight: bold;
    font-size: 16px;
    line-height: 24px;
    overflow-wrap: anywhere;
}

/*kcFeedbackSuccessIcon*/
.feedback-icon {
    flex: 0 0 auto;
    display: block;
    height: 20px;
    width: 20px;
    margin: 2px 0;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.feedback-icon--success {
    background-image: url("../icons/success.svg");
}

.feedback-icon--warning {
    background-image: url("../icons/warning.svg");
}

.feedback-icon--error {
    background-image: url("../icons/error.svg");
}

.feedback-icon--info {
    background-image: url("../icons/info.svg");
}

.divider {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    gap: 3px;
}

.divider__line {
    flex-grow: 1;
    margin: 0;
    border: none;
    border-top: 1px solid var(--border-subdued);
}

.divider__msg {
    color: var(--text-tertiary);
    font-size: 10px;
    line-height: 12px;
}

.instruction {
    font-size: 16px;
    line-height: 24px;
    margin: 24px 0;
    color: var(--text-secondary);
}

.instruction a {
    color: var(--text-secondary);
}

.instruction--small {
    font-size: 14px;
    line-height: 18px;
}


/*Utilities classes*/
.hide-mobile {
    display: none;
}

.mt-0 {
    margin-top: 0;
}

.mb-0 {
    margin-bottom: 0;
}

.mb-8 {
    margin-bottom: 8px;
}

.mb-16 {
    margin-bottom: 16px;
}

.mb-24 {
    margin-bottom: 24px;
}

.success {
    color: var(--success-primary);
}

.font-bold {
    font-weight: bold;
}

@media screen and (min-width: 850px) {
    .login__main {
        max-width: 765px;
        flex-flow: row nowrap;
    }

    .login__hero img {
        height: 100%;
        width: 332px;
    }

    .login__title {
        margin: 50px 0 22px;
    }

    .login__form {
        width: 100%;
        padding: 4px 36px 56px;
    }

    .language-selector-wrapper {
        position: absolute;
        bottom: 0;
        right: 0;
    }

    .hide-mobile {
        display: block;
    }

    .button-group-responsive {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .button-group-responsive .button {
        min-width: 100px;
        width: auto;
    }
}