/* body */
.kzvn-login-body {
    margin: 0;
    padding: 0;
    width: 100dvw;
    height: 100dvh;
    font-size: 14px;
    line-height: unset;
    text-align: unset;
    display: flex;
    flex-direction: column;
    background-color: var(--kzvn-blue-color-shade-100);
}

/* container */
.kzvn-login-container {
    display: flex;
    flex-direction: column;
    height: var(--content-height);
    width: 100%;
    overflow: hidden;
}

/* content */
.kzvn-login-container-content {
    background-color: var(--white-color);
    border-radius: var(--border-radius);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

@supports not (gap: 1.5rem) {
    .kzvn-login-container-content > * {
        margin-bottom: 1.5rem;
    }

    .kzvn-login-container-content > *:last-child {
        margin-bottom: 0;
    }
}

@supports (gap: 1.5rem) {
    .kzvn-login-container-content {
        gap: 1.5rem;
    }
}

/* content for login page */
.kzvn-login-container-content:has(.kzvn-login-form),
.kzvn-login-container-content:has(.kzvn-reset-form) {
    height: fit-content;
    width: 30rem;
    max-width: calc(100%);
}

.kzvn-login-container-content:has(.kzvn-login-form.register-web-authn) {
    width: 32rem;
}

/* breakpoints */

@media (min-width: 1080px) {
    /* container */
    .kzvn-login-container {
        justify-content: center;
        align-items: center;
        padding: 1rem;
    }

    /* content */
    .kzvn-login-container-content {
        box-shadow: var(--box-shadow);
        max-height: 100%;
        max-width: 100%;
        padding: 2rem;
    }

    .kzvn-login-container-content:has(#kc-error-credential-form) {
        min-width: 480px;
    }
}

@media (min-width: 810px) and (max-width: 1079px) {
    /* container */
    .kzvn-login-container {
        justify-content: center;
        align-items: center;
        padding: 1rem;
    }

    /* content */
    .kzvn-login-container-content {
        box-shadow: var(--box-shadow);
        padding: 2rem;
    }

}

@media (max-width: 809px) {
    /* container */
    .kzvn-login-container {
        background-color: var(--white-color);
        justify-content: center;
        align-items: center;
    }

    /* content */
    .kzvn-login-container-content {
        padding: 3rem 3rem 2rem;
        width: 100%;
        flex: 1;
    }

    .kzvn-login-container-content:has(.kzvn-login-form),
    .kzvn-login-container-content:has(.kzvn-reset-form) {
        height: fit-content;
        width: 100%;
    }

    .kzvn-form-footer {
        margin-top: auto;
    }

    .go-back-link {
        margin-top: auto;
    }

}


/* alert gap */
@supports not (gap: 1rem) {
    .kzvn-login-container-content:has(.kzvn-alert) > * {
        margin-bottom: 1rem;
    }

    .kzvn-login-container-content:has(.kzvn-alert) > *:last-child {
        margin-bottom: 0;
    }
}

@supports (gap: 1rem) {
    .kzvn-login-container-content:has(.kzvn-alert) {
        gap: 1rem;
    }
}


/* content header */
.kzvn-login-container-content-header {
    display: flex;
    flex-direction: column;
}

@supports not (gap: 0.7rem) {
    .kzvn-login-container-content-header > * {
        margin-bottom: 0.7rem;
    }

    .kzvn-login-container-content-header > *:last-child {
        margin-bottom: 0;
    }
}

@supports (gap: 0.7rem) {
    .kzvn-login-container-content-header {
        gap: 0.7rem;
    }
}

.kzvn-login-container-content-header-h2,
.kzvn-login-container-content-header-h3 {
    padding: 0;
    margin: 0;
}

.kzvn-login-container-content-header-h3 {
    font-size: 1.3rem;
    font-weight: normal;
    word-break: break-word;
    hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
}

.kzvn-login-container-content-header-h2 {
    font-size: 1.2rem;
    font-weight: 600;
    word-break: break-word;
    hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
}


.subtitle {
    background-color: var(--alert-danger-bkg-color);
    border-radius: var(--border-radius);
    padding: .2rem .5rem;
    width: max-content;
    max-width: 100%;
    display: inline-flex;
    justify-content: flex-start;
    align-items: center;
}

@supports not (gap: 0.2rem) {
    .subtitle > * {
        margin-right: 0.2rem;
    }

    .subtitle > *:last-child {
        margin-right: 0;
    }
}

@supports (gap: 0.2rem) {
    .subtitle {
        gap: 0.2rem;
    }
}

.required {
    display: inline-flex;
    justify-content: center;
    align-items: center;
}


.kzvn-row-flex {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
}

@supports not (gap: 1rem) {
    .kzvn-row-flex > * {
        margin-right: 1rem;
    }

    .kzvn-row-flex > *:last-child {
        margin-right: 0;
    }
}

@supports (gap: 1rem) {
    .kzvn-row-flex {
        gap: 1rem;
    }
}


.kzvn-col-flex {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
}

@supports not (gap: .5rem) {
    .kzvn-col-flex > * {
        margin-bottom: .5rem;
    }

    .kzvn-col-flex > *:last-child {
        margin-bottom: 0;
    }

    .kzvn-col-flex.no-gap > * {
        margin-bottom: 0;
    }

    .kzvn-col-flex.no-gap > *:last-child {
        margin-bottom: 0;
    }
}

@supports (gap: .5rem) {
    .kzvn-col-flex {
        gap: .5rem;
    }

    .kzvn-col-flex.no-gap {
        gap: 0;
    }
}

.instruction {
    margin: unset;
}

.error-template-flex {
    display: flex;
    flex-direction: column;
}

@supports not (gap: 1.5rem) {
    .error-template-flex > * {
        margin-bottom: 1.5rem;
    }

    .error-template-flex > *:last-child {
        margin-bottom: 0;
    }
}

@supports (gap: 1.5rem) {
    .error-template-flex {
        gap: 1.5rem;
    }
}

.error-link-flex {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}

@supports not (gap: 0.5rem) {
    .error-link-flex > * {
        margin-right: 0.5rem;
    }

    .error-link-flex > *:last-child {
        margin-right: 0;
    }
}

@supports (gap: 0.5rem) {
    .error-link-flex {
        gap: 0.5rem;
    }
}

.line-height-for-alert {
    line-height: normal;
    padding: 0;
    margin: 0;
    text-align: left;
    word-break: break-word;
    hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
}

.margin-top-1rem {
    margin-top: 1rem;
}

.margin-top-halb-rem {
    margin-top: .5rem;
}

.passkeys {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 2rem;
}

.passkey-item {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    gap: 0.5rem;
    border-left: var(--border-2px);
    padding: 0.3rem 0;
}

.passkey-item svg {
    width: 3rem;
    height: 3rem;
    padding: 0 0.5rem;
}

.passkey-item-content {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.kzvn-hilfe {
    width: max-content;
}

.delete-credential-name-title {
    text-transform: uppercase;
    font-weight: bolder;
    padding: 0 0.1rem;
}

.loading{
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    border: 2px solid white;
    margin-left: .3rem;
    border-bottom-color: transparent;
    animation: loading 1s linear infinite;
}

@keyframes loading {
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg);
    }
}

.text-split {
    display: flex;
    flex-direction: row;
    color: var(--kzvn-grey-color-700);
}

.text-split:before, .text-split:after {
    content: '';
    flex: 1 1;
    border-bottom: var(--kzvn-grey-color-700) 1px solid;
    margin: auto;
}

.text-split:before {
    margin-right: .8rem;
}

.text-split:after {
    margin-left: .8rem;
}