@import url('https://fonts.googleapis.com/css2?family=Titillium+Web:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700&display=swap');

:root {
    --primary: #0D84DC !important;
    --primary-hover: #0868B7 !important;
    --primary-focus: #0D84DC20 !important;
    --primary-inverse: #F2F5F5 !important;
    --font-size: 15px !important;
    --font-family: "Titillium Web", sans-serif !important;
    --field-background-color: rgb(240, 240, 240);
    /* TODO */
    --field-border-color: rgb(220, 220, 220);
    /* TODO */
    --button-primary: rgb(40, 135, 210);
    /* TODO */
    --button-primary-hover: rgb(30, 100, 160);
    /* TODO */
    --button-primary-font-color: rgb(237, 240, 243);
    /* TODO */
    --button-primary-hover-font-color: rgb(237, 240, 243);
    /* TODO */
    --button-secondary: rgb(220, 220, 220);
    /* TODO */
    --button-secondary-hover: rgb(140, 140, 140);
    /* TODO */
    --button-secondary-font-color: black;
    /* TODO */
    --button-secondary-hover-font-color: white;
    --font-color: hsl(205, 20, 32);
    /* TODO */
    --font-color-hint: gray;
    /* TODO */
    --badge-background-color: rgb(214, 221, 227);
    --badge-light-background-color: rgb(238, 241, 244);
    /* TODO */
    --badge-font-color: rgb(100, 100, 100);
    /* TODO */
    --error-color: crimson;
    --active-color: rgb(90, 142, 221);
    /* TODO */
    --border-radius: 0.25rem;
    --chart-line-color: gray;
    --icon-color: gray;
}

@media (prefers-color-scheme: dark) {
    :root {
        --field-background-color: rgb(32, 40, 46);
        /* TODO */
        --field-border-color: rgb(52, 60, 66);
        /* TODO */
        --button-primary: rgb(40, 135, 210);
        /* TODO */
        --button-primary-hover: rgb(30, 100, 160);
        /* TODO */
        --button-primary-font-color: rgb(237, 240, 243);
        /* TODO */
        --button-primary-hoverfont-color: rgb(237, 240, 243);
        /* TODO */
        --button-secondary: rgb(52, 60, 66);
        /* TODO */
        --button-secondary-hover: rgb(132, 140, 146);
        /* TODO */
        --button-secondary-font-color: rgb(237, 240, 243);
        /* TODO */
        --button-secondary-hover-font-color: black;
        /* TODO */
        --font-color: rgb(237, 240, 243);
        /* TODO */
        --font-color-hint: gray;
        --badge-background-color: rgb(52, 60, 66);
        --badge-light-background-color: rgb(52, 60, 66);
        /* TODO */
        --badge-font-color: rgb(155, 155, 155);
        /* TODO */
        --error-color: rgb(186, 74, 96);
        --active-color: rgb(90, 142, 221);
        /* TODO */
        --border-radius: 0.25rem;
        --chart-line-color: gray;
        --icon-color: gray;
    }

    header img {
        filter: invert();
    }
}

header {
    display: flex;
    gap: 1.5rem;
    align-items: center;
}

.activeness {
    display: inline-block;
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 99rem;
    background: var(--color);
    opacity: 0.5;
    margin-right: 0.5rem;
}

.activeness[data-value='True'] {
    background: var(--active-color);
    opacity: 1;
}


.badge {
    background-color: var(--badge-background-color);
    color: var(--badge-font-color);
    font-size: 11px;
    font-weight: 400;
    padding: 2px 3px;
    border-radius: 5px;
}

.badge-monospace {
    font-family: monospace;
    padding: 3px 6px;
}

.badge-light {
    background-color: var(--badge-light-background-color);
    color: var(--badge-font-color);
}

.oidc-logout>input {
    width: auto !important;
}

.divider {
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: space-evenly;
    align-items: center;
    margin: 30px 0;
}

.divider .hrule {
    height: 0;
    border-top: 1px solid var(--muted-border-color);
    flex-grow: 4;
}

.divider span {
    margin: 0 1.5em;
}

.social-logins {
    display: flex;
    width: 100%;
    padding: 15px 0;
}

.social-logins>a {
    padding: 10px 15px;
    width: 100%;
    text-align: center;
}

.social-logins>a:hover {
    text-decoration: none;
}

a.slim-button,
button.slim-button {
    padding: 0.5em 1em;
    margin: 0.25em;
}

.code textarea {
    font-family: 'Source Sans Pro', 'Courier New', Courier, monospace;
}