@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');

:root {
    --color: #343a40;
    --color-text: var(--color);
    --color-text-secondary: #505861;
    --color-subtle: #c0c0c0;
    --color-inactive: #343a40b0;
    --color-background: white;
    --color-background-dark: #242424;
    --color-background-secondary: #eee;
    --color-background-tertiary: #cccccc;
    --color-box-shadow: rgba(0, 0, 0, 0.24);
    --color-input-placeholder: #9d9d9d;
    --color-focus: var(--color-text-landing);

    --color-scrollbar-track: var(--color-background);
    --color-scrollbar-thumb-lightness: brightness(0.85);

    --color-info: #20669c;
    --color-go: #009030;
    --color-go-translucent: #00903021;
    --color-caution: #FFC000;
    --color-caution-translucent: #FFC00021;
    --color-stop: #C00000;
    --color-danger: #f44336;
    --color-stop-translucent: #C0000021;

    --border: 1px solid var(--color-subtle);

    --hover-brightness : 0.85;

    --padding: 0.75em;
    --padding-input: 0.5em var(--padding);
    --margin: var(--padding);
    --padding-layout: 1.5em;
    --margin-layout: var(--padding-layout);

    --border-radius: 0.3em;

    --box-shadow-elevation-1: var(--color-box-shadow) 0px 3px 8px;
    --box-shadow-input: inset 0px 1px 8px var(--color-box-shadow);
    --box-shadow-input-focus: 0 0 0 2px #20669c7e;

    --transition-duration: 0.25s;
    --transition-timing: ease-in;
    --transition-settings: var(--transition-duration) var(--transition-timing);

    --background-landing-gradient: radial-gradient(circle, rgba(0, 0, 0, 0.75) 0%, transparent 50%);
}

.logo {
    height: var(--logo-height-header);
    width: var(--logo-width-header);
    background-image: var(--logo);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.logo.logo-landing {
    height: var(--logo-height-modal);
    width: var(--logo-width-modal);
    background-image: var(--logo-landing);
}

button,
a.button {
    background-color: #7e7e7e;
    color: var(--color-branding-contrast);
    border: none;
    padding: 0.75em;
    border-radius: 0.3em;
    font-size: 1em;
    transition: background-color var(--transition-settings), filter var(--transition-settings);
    line-height: 1.25em;
    outline: none;
}

button:focus-visible, a.button:focus-visible {
    box-shadow: 0 0 0 3px var(--color-focus);
}

button:not(:disabled):hover,
a.button:not(:disabled):hover {
    filter: brightness(var(--hover-brightness));
}

button[type="submit"],
button.button-primary,
a.button-primary {
    background-color: var(--color-branding);
    color: var(--color-branding-contrast);
}

button[type="submit"]:not(:disabled):hover,
button.button-primary:not(:disabled):hover,
a.button-primary:not(:disabled):hover {
    filter: brightness(var(--hover-brightness));
}

a.button {
    text-decoration: none;
}

button:disabled,
a.button:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

button.button-toggle {
    color: var(--color-background);
    background-color: var(--color-subtle);
}

button.button-toggle.checked {
    color: var(--color-branding-contrast);
    background-color: var(--color-branding);
}

::-webkit-scrollbar {
    width: 1em;
}

::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
    background-color: var(--color-scrollbar-track);
    border-radius: 0.5em;
}

::-webkit-scrollbar-track {
    background-color: var(--color-background-secondary);
    box-shadow: inset 0 0 4px rgba(0,0,0,0.125);
}

::-webkit-scrollbar-thumb {
    background-color: var(--color-subtle);
    filter: brightness(0.5);
    border: 3px solid transparent;
    background-clip: content-box;
}