@import url("https://fonts.googleapis.com/css?family=Open+Sans:400+700");
@import url("https://fonts.googleapis.com/css?family=Dosis:300,400,500,700");


/* Variables */

:root {
    --font-primary: 'Dosis', sans-serif;
    --font-secondary: 'Open Sans', sans-serif;

    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 700;

    --font-size-xs: 0.875rem;
    --font-size-sm: 1rem;
    --font-size-md: 1.125rem;
    --font-size-lg: 2rem;

    --line-height-sm: 1.25;
    --line-height-md: 1.33;
    --line-height-lg: 1.375;

    --letter-spacing-none: 0%;

    --color-text-dark: #2f3e48;
    --color-background-dark: #2f3e48;
    --color-text-deep: #2c3e50;
    --color-placeholder: #2F3E48;
    --color-border: #969ea3;
    --color-border-focus: #6c63ff;
    --color-button-bg: #c2423f;
    --color-border-error: #c2423f;
    --color-text-error: #c2423f;
    --color-white: #ffffff;
    --color-border-variable: 47, 62, 72;
    --color-text-variable: 47, 62, 72;
    --color-system-message: #fdedee;
    --color-system-message-beige: #ffedcd;
    --color-system-message-dark-red: #c2423f;
    --color-system-message-dark-grey: #2f3e48;
    --color-system-message-rose: #fdedee;

    --radius-sm: 8px;
    --radius-md: 20px;
    --radius-full: 32px;

    --space-xxs: 8px;
    --space-xs: 10px;
    --space-sm: 12px;
    --space-md: 14px;
    --space-lg: 16px;
    --space-xl: 20px;
    --space-2xl: 24px;

    --max-width: 100vw;
    --min-height: 100vh;


    --box-shadow-lg: 0px 5px 12px 0px rgba(0, 0, 0, 0.10);



}

.site__wrapper {
    width: 100vw;
    height: 100dvh;
    display: grid;
    margin: auto;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr;
    row-gap: calc(var(--space-2xl) * 3);
    padding: 0 1.5rem;
    box-sizing: border-box;
}

/* Variables */


/* Form */

.form-wrapper {
    margin-top: 72px;
    padding: 0 var(--space-xl);
    display: flex;
    flex: 1;
}

.form-signup-image {
    aspect-ratio: 710 / 1040;

}


/* Form */

/* Header block */


.header-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 56px;
    margin-block: clamp(1.25rem, 2vw, 2.5rem);

}

.header-logo img {
    width: 150px;
}

/* Header block */


/* Reset CSS */

html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: var(--max-width);
    height: 100%;
    min-height: var(--min-height);
    overflow-y: scroll;
    overflow-x: hidden;
    -ms-overflow-style: none;
    scrollbar-width: none;
    font-family: sans-serif;
    box-sizing: border-box;
}


p {
    margin: 0;
    padding: 0;
}

body::-webkit-scrollbar {
    display: none;
}

/* Reset CSS */





/* Input-fields */

.form-input-wrapper {
    display: flex;
    flex-direction: column;
    margin-bottom: var(--space-xl);
}

.form-input-label {
    font-family: var(--font-primary);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-md);
    color: var(--color-text-deep);
    background-color: white;

    position: absolute;
    top: 12px;

    pointer-events: none;
    position: absolute;
    transition: all .2s ease;
    z-index: 1;
}

.chevron-right {
    display: inline-block;
    height: 1em;
}

.form-input-field {
    display: flex;
    position: relative;
    align-items: center;
    flex-direction: row;
    justify-content: space-between;
    height: 48px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    font-family: var(--font-primary);
    transition: border 0.2s ease;
    margin-top: var(--space-xxs);
    margin-bottom: var(--space-md);
    padding-left: var(--space-sm);
    border-radius: var(--radius-sm);
}

.form-input-field:focus-within .form-input-label {
    font-size: var(----font-size-xs);
    top: -.6rem;
}

.form-input-field:focus-within {
    outline: auto;
}

.form-input-field>input {
    flex: 1;
    outline: none;
    font-size: var(--font-size-md);
    border: 0px;
    font-family: var(--font-primary);
    width: calc(100% - 48px);
}

.form-input-field>input::placeholder {
    color: transparent
}

.input-field-button {
    height: 100%;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
}



.form-input-field>input:not(:placeholder-shown)+.form-input-label {
    font-size: var(----font-size-xs);
    top: -.6rem;

}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus {
    border: 0px;
    -webkit-text-fill-color: var(--color-text-dark);
    -webkit-box-shadow: 0 0 0px 1000px #ffffff inset;
    transition: background-color 5000s ease-in-out 0s;
}


/* Input-fields */



/* Links */


.danlon-link__default {
    font-family: var(--font-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-sm);
    color: var(--color-text-dark);
    width: 100%;
}

/* Links */




/* Buttons */

.button {
    display: flex;
    align-items: center;
    gap: 4px;
    border: 0;
    font-family: var(--font-primary);
    color: var(--color-white);
    font-size: var(--font-size-md);
    padding: var(--space-lg) var(--space-lg) var(--space-lg) var(--space-2xl);

    border-radius: var(--radius-full);
    background: var(--color-button-bg);
}

.button.sm {
    padding: var(--space-xxs) var(--space-sm);
}

.button.dark {
    background: var(--color-text-dark);
}





/* Buttons */


/* Utility Classes */

.text-sm {
    font-family: var(--font-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-md);
    color: inherit;
    text-decoration: inherit;
}

.text-xs {
    color: var(--color-text-dark);
    font-family: var(--font-primary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-sm);
}

.text-sm.subtitle {
    color: rgba(var(--color-border-variable), 0.5);
}


.align-right {
    text-align: right;
}

.form-left {
    grid-area: 2 / 1 / 3 / 3;
    padding: 0 var(--space-xl);
}

.form-right {
    display: none
}

.icon-close {
    min-width: 20px;
    height: 20px;
    display: none;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M6.27991 5.22003C6.13773 5.08755 5.94969 5.01543 5.75539 5.01885C5.56109 5.02228 5.3757 5.10099 5.23829 5.23841C5.10087 5.37582 5.02216 5.56121 5.01873 5.75551C5.01531 5.94981 5.08743 6.13785 5.21991 6.28003L8.93991 10L5.21991 13.72C5.14622 13.7887 5.08712 13.8715 5.04613 13.9635C5.00514 14.0555 4.98309 14.1548 4.98132 14.2555C4.97954 14.3562 4.99807 14.4562 5.03579 14.5496C5.07351 14.643 5.12965 14.7278 5.20087 14.7991C5.27209 14.8703 5.35692 14.9264 5.45031 14.9642C5.5437 15.0019 5.64373 15.0204 5.74443 15.0186C5.84513 15.0168 5.94445 14.9948 6.03645 14.9538C6.12845 14.9128 6.21125 14.8537 6.27991 14.78L9.99991 11.06L13.7199 14.78C13.7886 14.8537 13.8714 14.9128 13.9634 14.9538C14.0554 14.9948 14.1547 15.0168 14.2554 15.0186C14.3561 15.0204 14.4561 15.0019 14.5495 14.9642C14.6429 14.9264 14.7277 14.8703 14.7989 14.7991C14.8702 14.7278 14.9263 14.643 14.964 14.5496C15.0018 14.4562 15.0203 14.3562 15.0185 14.2555C15.0167 14.1548 14.9947 14.0555 14.9537 13.9635C14.9127 13.8715 14.8536 13.7887 14.7799 13.72L11.0599 10L14.7799 6.28003C14.9124 6.13785 14.9845 5.94981 14.9811 5.75551C14.9777 5.56121 14.8989 5.37582 14.7615 5.23841C14.6241 5.10099 14.4387 5.02228 14.2444 5.01885C14.0501 5.01543 13.8621 5.08755 13.7199 5.22003L9.99991 8.94003L6.27991 5.22003Z" fill="%232F3E48"/></svg>');
}

.system-message {
    background: var(--color-system-message);
    display: flex;
    gap: 16px;
    flex-direction: row;
    justify-content: space-between;
}
.system-message > p {
    margin: 0 auto;
}

.system-message>*:not(.icon-close) {
    margin: auto;
}




.system-message-container {
    margin: auto;
}

.icon-close {
    order: 2;
}

.system-message.beige .icon-close,
.system-message.dark-grey .icon-close,
.system-message.dark-red .icon-close,
.system-message.rose .icon-close {
    display: block;
}


.beige,
.dark-grey,
.dark-red,
.rose {
    display: flex;
    flex-direction: row;
    padding: var(--space-lg) var(--space-2xl);
    border-radius: var(--radius-sm);
    font-family: var(--font-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-md);
    color: var(--color-text-dark);
}

.beige {
    background: var(--color-system-message-beige);
}

.dark-red {
    background: var(--color-system-message-dark-red);
}

.dark-grey {
    background: var(--color-system-message-dark-grey);
}

.rose {
    background: var(--color-system-message-rose);
}

.hide-shrink {
    transform: translateY(-100%);
    transition: all 0.2s ease, height 0.3s ease;
}

.hidden,
.none {
    display: none;
}

button {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
}

.kc-message-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

.error {
    color: var(--color-text-error);
}

.error-input-field {
    border-color: var(--color-text-error);
}

.icon-exclamation-error {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M8 12C8.22667 12 8.41667 11.9233 8.57 11.77C8.72333 11.6167 8.8 11.4267 8.8 11.2C8.8 10.9733 8.72333 10.7833 8.57 10.63C8.41667 10.4767 8.22667 10.4 8 10.4C7.77333 10.4 7.58333 10.4767 7.43 10.63C7.27667 10.7833 7.2 10.9733 7.2 11.2C7.2 11.4267 7.27667 11.6167 7.43 11.77C7.58333 11.9233 7.77333 12 8 12ZM7.2 8.8H8.8V4H7.2V8.8ZM8 16C6.89333 16 5.85333 15.79 4.88 15.37C3.90667 14.95 3.06 14.38 2.34 13.66C1.62 12.94 1.05 12.0933 0.63 11.12C0.21 10.1467 0 9.10667 0 8C0 6.89333 0.21 5.85333 0.63 4.88C1.05 3.90667 1.62 3.06 2.34 2.34C3.06 1.62 3.90667 1.05 4.88 0.63C5.85333 0.21 6.89333 0 8 0C9.10667 0 10.1467 0.21 11.12 0.63C12.0933 1.05 12.94 1.62 13.66 2.34C14.38 3.06 14.95 3.90667 15.37 4.88C15.79 5.85333 16 6.89333 16 8C16 9.10667 15.79 10.1467 15.37 11.12C14.95 12.0933 14.38 12.94 13.66 13.66C12.94 14.38 12.0933 14.95 11.12 15.37C10.1467 15.79 9.10667 16 8 16Z" fill="%23C2423F"/></svg>');
    width: 1rem;
    aspect-ratio: 1;
    display: block;
    background-repeat: no-repeat;
}

.icon-eye {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6"><path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z" /><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" /></svg>');
    width: 1rem;
    aspect-ratio: 1;
    display: block;
    background-repeat: no-repeat;
}

.icon-eye-slash {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6"><path stroke-linecap="round" stroke-linejoin="round" d="M3.98 8.223A10.477 10.477 0 0 0 1.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.451 10.451 0 0 1 12 4.5c4.756 0 8.773 3.162 10.065 7.498a10.522 10.522 0 0 1-4.293 5.774M6.228 6.228 3 3m3.228 3.228 3.65 3.65m7.894 7.894L21 21m-3.228-3.228-3.65-3.65m0 0a3 3 0 1 0-4.243-4.243m4.242 4.242L9.88 9.88" /></svg>');
    width: 1rem;
    aspect-ratio: 1;
    display: block;
    background-repeat: no-repeat;
}

.form-right {
    position: relative;
    overflow: hidden;
    height: 100%;
}

.form-right img {
    width: 100%;
    height: auto;
    min-width: 100%;
    min-height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    object-fit: cover;
}


/* Media Queries */

@media (min-width: 768px) {
    .form-right {
        height: 100%;
        display: flex;
        background: var(--color-background-dark);
        grid-area: 1 / 2 / 3 / 3;
        align-items: flex-end;
        position: relative;
        overflow: hidden;
    }

    .site__wrapper {
        max-width: 1440px;
        height: 100dvh;
        display: grid;
        margin: auto;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto 1fr;
        row-gap: calc(var(--space-2xl) * 3);
        padding: 0;

        padding-left: 2rem;
        box-sizing: border-box;
    }

    .form-right>.app-icon {
        position: absolute;
        top: 0;
        right: 0;
        margin: 24px;
    }


    .form-wrapper {
        padding: 0;
        margin-top: 0;
    }

    .form-left {
        grid-area: 2 / 1 / 3 / 2;
        margin: 0 auto;
    }

    .header-wrapper {
        grid-area: 1 / 1 / 2 / 2;
        margin-block: clamp(1.25rem, 2vw, 2.5rem);
    }

    .site__wrapper {
        row-gap: 0;
    }

    .qr-code {
        display: block !important;
        width: 64px;
        aspect-ratio: 1;
    }

    #app-download-button {
        display: none;
    }


}

/* Media Queries */


.qr-code {
    display: none;
}

.link-free-account,
.reset-verification-method-option {
    display: block;
}

.link-free-account {
    margin-block: calc(var(--space-2xl) * 2);
    font-size: var(--font-size-md);
}

.reset-verification-method-option {
    margin-block: var(--space-2xl);

}