:root:not([data-theme=dark]),
[data-theme=light] {
    --primary: #039be5;
    --primary-hover: #0288d1;
    --primary-focus: rgba(3, 155, 229, 0.125);
    --primary-inverse: #FFF
}

@media only screen and (prefers-color-scheme:dark) {
    :root:not([data-theme=light]) {
        --primary: #039be5;
        --primary-hover: #03a9f4;
        --primary-focus: rgba(3, 155, 229, 0.25);
        --primary-inverse: #FFF
    }
}

[data-theme=dark] {
    --primary: #039be5;
    --primary-hover: #03a9f4;
    --primary-focus: rgba(3, 155, 229, 0.25);
    --primary-inverse: #FFF
}

:root {
    --form-element-active-border-color: var(--primary);
    --form-element-focus-color: var(--primary-focus);
    --switch-color: var(--primary-inverse);
    --switch-checked-background-color: var(--primary)
}

.align-center {
    text-align: center;
}

.display-inline {
    display: inline;
}