:root {
    --system-error-color: light-dark(#FF3B30, #FF453A);
    --system-label-color: light-dark(#000000, #FFFFFF);
    --system-background-color: light-dark(#FFFFFF, #000000);
    --system-secondary-background-color: light-dark(#F2F2F7, #1C1C1E);
    --system-tertiary-background-color: light-dark(#FFFFFF, #2C2C2E);
}

body {
    margin: 0;
    padding: 0;
    background-color: var(--system-background-color);
}

#main_container {
    position: absolute;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

#login_panel {
    background-color: var(--system-secondary-background-color);
    height: calc(100% - 32pt);
    width: 360pt;
    position: absolute;
    inset-inline-start: 16pt;
    top: 16pt;

    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 24pt;

    overflow: auto;

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

    scrollbar-width: none;
    -ms-overflow-style: none;
}

#greeting_container {
    text-align: center;
    margin: 16pt;
}

#login_form_container {
    width: calc(100% - 16pt);
}

#login_form {
    text-align: center;
    padding: 8pt;
}

#login_form #username_field {
    margin-top: 8pt;
    width: calc(100% - 16pt);
    height: 16pt;
}

#login_form #password_field {
    margin-top: 8pt;
    width: calc(100% - 16pt);
    height: 16pt;
}

#login_form #otp_field {
    margin-top: 8pt;
    width: calc(100% - 16pt);
    height: 16pt;
}

#login_form #login_button {
    margin-top: 8pt;
    width: calc(80pt);
    height: 16pt;
}

#reset_link {
    color: var(--system-label-color);
    text-align: center;
}

#error_line {
    color: var(--system-error-color);
    text-align: center;
}

#otp_group_container {
    display: flex;
    align-items: center;
    justify-content: center;
}

#otp_field_container {
    display: grid;
    grid-template-rows: 30pt;
    grid-template-columns: 30pt 30pt 30pt 30pt 30pt 30pt;
    grid-column-gap: 5pt;
    text-align: center;
}

#otp_field_container input {
    text-align: center;
}

@media (max-width: 560px) {
    #login_panel {
        width: calc(100% - 32pt);
        top: 0;
        height: 100%;
        border-radius: 0;
    }
}