.info-box {
    display: flex;
    flex-flow: row nowrap;
    gap: 1rem;
    align-items: center;

    padding: 0.75rem 1rem;
    margin-bottom: 1.5rem;

    background-color: #E1E9F1;

    border-radius: 0.25rem;
    line-height: 1.375rem;

    span {
        flex-grow: 0;
        color: var(--primary-80);
    }

    p {
        flex-grow: 1;
    }
}

.invitations-list {
    display: flex;
    flex-flow: column nowrap;
    gap: 1rem;

    padding-bottom: 1.5rem;
}

.selectable-icon-entry {
    display: flex;
    flex-flow: row nowrap;
    gap: 1rem;

    padding: 1.25rem;

    border: 1px solid var(--grey-40);
    border-radius: 0.25rem;

    align-items: center;

    color: black;
    font-size: 1rem;
    font-weight: 600;
    line-height: 150%;

    cursor: pointer;

    > .icon {
        display: flex;
        align-items: center;
        justify-content: center;

        flex-shrink: 0;

        width: 2.5rem;
        height: 2.5rem;

        border-radius: 0.25rem;
        border: 1px dashed #8B8B8D;

        color: var(--grey-100);
    }

    > .text {
        display: flex;
        flex-flow: column nowrap;
        gap: 0.25rem;

        flex-grow: 1;

        > .inviter {
            font-weight: 400;
        }
    }

    .checkmark {
        display: none;

        flex-shrink: 0;
    }

    &.selected {
        background-color: var(--primary-10);
        border-color: var(--primary-80);

        > .icon {
            background-color: var(--primary-60);
            color: white;

            border: unset;
        }

        .checkmark {
            display: unset;
        }
    }
}

.create-company-entry {
    margin-bottom: 1.5rem;
    font-weight: normal;
}

.create-company-entry > .icon {
    background-color: var(--primary-10);

    border: 1px solid var(--primary-90);
}

.create-company-entry.selected > .icon {
    background-color: var(--primary-10);
    color: var(--grey-100);

    border: 1px solid var(--primary-90);
}

.auth-content {
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
}

.auth-form {
    margin-top: 2.5rem;
    margin-bottom: 2rem;

    padding: 3rem 7.5rem;

    width: 52.5rem;

    border: 1px solid var(--grey-40);
    border-radius: 4px;
}

.auth-form h2 {
    text-align: center;
    margin-bottom: 1rem;
}

.auth-form .infotext {
    text-align: center;
    margin-bottom: 1.5rem;
}

.auth-form .infotext h3 {
    font-weight: 600;
    margin-bottom: 1rem
}

.auth-form .labeled-input {
    margin-bottom: 1.5rem;
}

.auth-form button[type="submit"] {
    width: 100%;
    margin-bottom: 1rem;
}

.auth-form .agb-wrapper {
    display: flex;
    flex-flow: column nowrap;
    align-items: end;

    margin-bottom: 2rem;
}

.auth-form .agb-input {
    display: flex;
    flex-flow: row nowrap;
    justify-content: end;
}

.auth-form .agb-input label {
    font-weight: normal;
    font-size: 1rem;
}

.auth-form .buttons {
    display: flex;
    flex-flow: row nowrap;
    gap: 1rem;

    width: 100%;
}

.auth-form .buttons button:last-child {
    flex-grow: 1;
}

.auth-form .login-link {
    text-align: center;
}

.password-reset-form {
    display: flex;
    flex-flow: column nowrap;

    .icon-wrapper {
        display: flex;
        align-items: center;
        justify-content: center;

        width: 4rem;
        height: 4rem;

        background-color: var(--signal-green-10);

        border-radius: 99px;
        align-self: center;

        margin-bottom: 1rem;

        svg {
            color: var(--signal-green-80);
        }

        &.error {
            background-color: var(--signal-red-20);

            svg {
                color: var(--signal-red-70);
            }
        }
    }



    .buttons {
        flex-flow: column nowrap;
        gap: 1rem;

        .btn {
            width: unset;
        }

        *:last-child {
            text-align: center;
        }
    }
}

.code-container {
    display: flex;
    flex-flow: row nowrap;
    gap: 0.5rem;
    justify-content: center;


    input {
        max-width: 3rem;
    }
}

.confirm-form .input-error {
    margin-top: 1.5rem;
    justify-content: center;
}

.confirm-form .buttons {
    margin-top: 2.5rem;
}

.create-company-form .labeled-input label {
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.create-company-form hr {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    color: var(--grey-30);
}

.department-selection > label {
    font-size: 0.875rem;
    font-weight: 600;
}

.department-selection > div {
    display: grid;
    grid-template-columns: 1fr 1fr;

    row-gap: 1.5rem;
    column-gap: 1.5rem;

    margin-top: 0.75rem;
    margin-bottom: 2.5rem;
}

.department-selection input {
    margin: 0;
}

.mfa-enroll-wrapper {
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
}

.mfa-enroll-content {
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    gap: 1.5rem;

    width: 52.5rem;

    margin-top: 2.5rem;
    padding: 3rem 7.5rem;

    border: 1px solid var(--grey-40);

    margin-bottom: 2rem;

    h2 {
        font-size: 1.5rem;
        font-weight: 600;
    }

    .info-box {
        margin-bottom: 0;
    }

    .qr-code-panel {
        display: flex;
        flex-flow: column nowrap;
        gap: 1rem;
        align-items: center;

        .qr-code-text {
            display: flex;
            flex-flow: row nowrap;
            gap: 1rem;
            align-items: center;

            padding: 0.5rem 1.25rem;

            background-color: var(--grey-blue-10);

            border-radius: 0.25rem;

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

        hr {
            width: 100%;

            border: none;

            border-bottom: 1px solid var(--grey-30);
        }

        .input-fields {
            display: flex;
            flex-flow: row nowrap;
            gap: 0.5rem;
            justify-content: center;

            input {
                width: 3rem;
            }
        }

        button {
            width: 100%;
        }
    }

    .buttons {
        display: flex;
        flex-flow: row nowrap;
        gap: 1rem;

        width: 100%;
    }

    .buttons button:last-child {
        flex-grow: 1;
    }
}