:root,
[data-ovum-theme=light] {
    --turquoise: #00a295;
    --turquoise-2: #35b6b4;
    --turquoise-3: #a6d6cc;
    --turquoise-4: #007369;
    --magenta: #e6007e;
    --magenta-2: #ec619f;
    --magenta-3: #f29fc5;
    --black-bold: #13100d;
    --light-gray: #d3d3d379;
    --red-error: #F08080;
    --yellow-mono-warn: #ffee36;
    --yellow-warn: #EED202;
    --medium-gray: #9d9d9c;
/*    --white: #ffffffb7;*/
    --white: #ffffff;
    --black: #000000;
    --ov-body-font-family: 'TT Lakes Compressed', sans-serif, serif;
    --ov-body-font-size: 0.875rem;
    --ov-body-bg: var(--light-gray);
    --ov-item-ok: var(--turquoise);
    --ov-item-ok-hover: var(--turquoise-2);
    --ov-item-err: var(--red-error);
    --ov-item-err-hover: var(--red-error);
    --ov-item-warn: var(--yellow-warn);
    --ov-table-bg: var(--ov-body-bg);
    --ov-table-head-bg: #d3d3d3;
    --ov-table-border-lines-color: var(--medium-gray);
    --ov-table-bg-row-odd: var(--white);
    --ov-table-bg-row-even: var(--light-gray);
    --ov-table-accent-bg: #EED202;
    --ov-btn-bg: var(--turquoise);
    --ov-btn-bg-hover: var(--turquoise-2);
    --ov-btn-bg-active: var(--turquoise-3);
    --ov-btn-bg-disabled: var(--light-gray);
    --ov-btn-bg-radius: 5px;
    --ov-btn-bg-ok: var(--turquoise);
    --ov-btn-bg-ok-active: var(--turquoise);
    --ov-btn-bg-ok-hover: var(--turquoise-2);
    --ov-btn-bg-ok-active: var(--turquoise-2);
    --ov-btn-bg-ok-disabled: var(--turquoise-2);
    --ov-btn-bg-err: var(--red-error);
    --ov-btn-bg-err-hover: var(--red-error);
    --ov-btn-bg-err-active: var(--red-error);
    --ov-btn-bg-err-disabled: var(--warn);
    --ov-btn-bg-warn: var(--yellow-mono-warn);
    --ov-btn-bg-warn-hover: var(--yellow-warn);
    --ov-btn-bg-warn-active: var(--yellow-mono-warn);
    --ov-btn-bg-warn-disabled: var(--yellow-mono-warn);
    --ov-btn-bg-offline: var(--light-gray);
    --ov-btn-bg-offline-hover: var(--light-gray);
    --ov-btn-bg-offline-active: var(--light-gray);
    --ov-btn-bg-offline-disabled: var(--light-gray);
    --ov-border-color: lightgray;
    --ov-border-radius: 3px;
    --ov-border-width: 1px;
    --ov-loader-shadow-color: var(--turquoise);
    --ov-loader-accent-color: var(--magenta-2);
    --ov-icon-bg: var(--turquoise);
    --ov-nav-bg: #000000CC;
    background-color: var(--ov-body-bg);
}

[data-ovum-theme=dark] {
    --ov-body-bg: var(--medium-gray);
    --ov-item-ok: var(--turquoise-4);
    --ov-btn-bg: var(--turquoise-4);
    background-color: var(--ov-body-bg);
}

.btn-grid 
{
    border: none;
    background-color: var(--ov-btn-bg);
    width: 60px;
    height: 30px;
}
.btn-grid span
{
    left: 0;
    height: 24px;
    width: 24px;
}

.div-float {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    user-select: none;
    position: fixed;
    bottom: 16px;
    right: 16px;
    width: 30px;
    height: 30px;
    background-color: var(--ov-btn-bg);
    z-index: 1;
}
.div-float button
{
    background-color: var(--ov-btn-bg);
    border: none;
}

.dxbl-pager button
{
    background-color: var(--ov-btn-bg);
}
.grid-btn {
    width: 100% !important;
    border: none !important;
    background-color: var(--ov-btn-bg) !important;
}

h3 {
    position: relative;
    margin-left: 20px; /* Zuvor left, hat die Bildschirmgröße verändert */
}
.bg-gray{
    background-color: var(--light-gray);
}
.btn-offline {
    background-color: var(--ov-btn-bg-offline);
    color: white;
}

    .btn-offline:hover, :focus-visible {
        background-color: var(--ov-btn-bg-offline-hover) !important;
    }

    .btn-offline:active {
        background-color: var(--ov-btn-bg-offline-active);
        transform: scale(0.98);
    }

    .btn-offline:disabled {
        background-color: var(--ov-btn-bg-offline-disabled);
    }