@font-face
{
    font-family: Roboto;
    src: url("fonts/Roboto/Roboto-VariableFont_wdth,wght.ttf") format("truetype");
    font-weight: 100 900;
    font-display: swap;
}

body
{
    margin: 0;
    font: 14px Roboto, Arial, sans-serif;
    background: #f8f8fa;
    color: #101d31;
}

main
{
    min-height: 100vh;
    display: grid;
    place-items: center;
}

.qh-auth-panel
{
    width: 340px;
    padding: 32px;
    background: white;
    border: 1px solid #d5dbe4;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(16, 29, 49, .06), 0 4px 12px rgba(16, 29, 49, .05);
}

.qh-auth-page .qh-auth-panel
{
    background: #192535;
    color: #f8f8fa;
    border-color: #344257;
}

.qh-auth-brand
{
    display: flex;
    justify-content: center;
    margin: 0 0 24px;
}

.qh-auth-logo
{
    display: block;
}

.qh-form-field
{
    margin: 16px 0;
}

label
{
    display: block;
    margin-bottom: 6px;
}

input
{
    box-sizing: border-box;
    width: 100%;
    border: 1px solid #adb7c5;
    border-radius: 4px;
    padding: 10px;
    font: inherit;
}

button, .qh-primary-button
{
    border: 0;
    border-radius: 4px;
    background: #3f37d7;
    color: white;
    padding: 10px 20px;
    font: inherit;
    cursor: pointer;
}

a
{
    color: #3f37d7;
}

.qh-alert-error, .field-validation-error
{
    color: #d92d20;
}

:focus-visible
{
    outline: 2px solid #3f37d7;
    outline-offset: 3px;
}

.qh-auth-panel > p
{
    color: #526077;
    line-height: 1.5;
}

.qh-auth-panel h2, .qh-auth-panel h3
{
    font-size: 16px;
    font-weight: 600;
}

.qh-auth-panel code
{
    overflow-wrap: anywhere;
}

.qh-error-panel
{
    width: 560px;
}

.qh-error-panel h1
{
    font-size: 24px;
    font-weight: 600;
}

input:hover
{
    border-color: #526077;
}

input.input-validation-error
{
    border-color: #d92d20;
}

.qh-auth-page input
{
    background: #243247;
    color: #f8f8fa;
    border-color: #66758b;
    color-scheme: dark;
}

.qh-auth-page input:hover
{
    border-color: #a6b4c8;
}

.qh-auth-page input:autofill
{
    box-shadow: inset 0 0 0 1000px #243247;
    -webkit-text-fill-color: #f8f8fa;
}

.qh-auth-page .qh-alert-error, .qh-auth-page .field-validation-error
{
    color: #ffb4ab;
}

.qh-auth-page input.input-validation-error
{
    border-color: #ffb4ab;
}

.qh-auth-page :focus-visible
{
    outline-color: #a69fff;
}