:root {
    --bg-light-1: rgb(255,255,255);
    --bg-light-2: rgb(255,255,255);
    --bg-light-3: rgb(255,255,255);
    --bg-dark-1: rgb(17 17 17);
    --bg-dark-2: rgb(26 26 26);
    --bg-dark-3: rgb(46 46 46);
    --fg-dark-1: rgb(255,255,255);
    --fg-light-1: rgb(0,0,0);
    --accent-1: rgb(36 36 36);
    --accent-2: rgb(16 194 127);
    --br-light: rgb(225,225,225);
    --br-dark: rgb(36 36 36);
    --bg-dark-acrylic-1: rgb(0 0 0 / 30%);
    --bg-dark-acrylic-2: rgb(10 10 10 / 40%);
    --bg-dark-acrylic-3: rgb(20 20 20 / 50%);
    --bg-light-acrylic-1: rgb(255 255 255 / 10%);
    --bg-light-acrylic-2: rgb(255 255 255 / 20%);
    --bg-light-acrylic-3: rgb(255 255 255 / 30%);
    --fg-acrylic-1: rgb(155 155 155);
    --fg-acrylic-2: rgb(205 205 205);
    --fg-acrylic-3: rgb(255 255 255);
    --fg-accent: rgb(16 194 127);
    --sidebar-width: 250px;
    --sidebar-translate: calc(0px - var(--sidebar-width));
}

html, body {
    font-family: Roboto,sans-serif;
    height: 100%;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

.margin-top-bottom-auto {
    margin-top: auto;
    margin-bottom: auto;
}

.font-size-small {
    font-size: small;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.keyboard-container {
    position: fixed;
    left: 0;
    right: 0;
    margin: 0;
    padding: 0;
    bottom: 0;
    transform: translateY(@translateY);
    transition: transform 0.5s ease 0s;
}

.blurry-warning {
    padding-top: 25%;
    background: rgb(255 0 0 / 80%);
    box-shadow: 0 8px 32px 0 rgb(255 255 255 / 0%);
    backdrop-filter: blur(4px);
    z-index: 9999;
}

.disabled {
    pointer-events: none;
}

.content-center {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.bg-danger-glass {
    background: rgb(255 0 0 / 80%);
}

.bg-warning-glass {
    background: rgb(255 193 0 / 80%);
}