:root {
    --background-color: #000000;
    --fullscreen-background: url(/img/web_grid_3840.jpg);
    --title-background: rgb(0 112 192);
    --title-color: white;
    --title-border: 3px solid #0070C0;
    --title-box-shadow: 0 0 10px rgba(0, 112, 192, 0.5);
    --title-border-radius: 5px;
    --text-color: white;
    --mainTable-background: #2b2b2b;
    --filterArea-background: #232323c4;
    --filterText-color: white;
    --step-text-color: #e0e0e0;

    --tab-background: transparent;
    --tab-button-color: rgba(255, 255, 255, 0.397);
    --tab-button-border: 1px solid black;
    --tab-button-border-bottom: 3px solid grey;
    --tab-button-hover-background: #777777;
    --tab-button-active-background: #3f3f3f;
    --tab-button-active-color: rgb(236, 236, 236);

    --jtable-title-background: #232323;
    --jtable-header-background: #454545;
    --jtable-row-background: #555;
    --jtable-row-even-background: #777;
    --jtable-row-hover-color: white;
    --jtable-row-hover-background: #0070c0;
    --jtable-row-selected-background: rgb(33, 150, 243);
    --jtable-row-selected-color: #fff;
    --jtable-bottom-panel-background: #343434;
    --jtable-bottom-panel-color: #fff;

    --panelPart-background: linear-gradient(135deg, rgb(255 255 255 / 84%) 0%, rgb(255 255 255 / 72%) 100%);
    --panelPart-text-color: black;
    --panelPart-text-contrast-color: white;
    --panelPart-line-color: lightgrey;
    --panelPart-border: 2px solid #0070C0;
    --panelPart-box-shadow: 0 0 10px rgba(0, 112, 192, 0.5);

    --subpanel-background: inherit;
    --subpanel-color: black;
    --subpanel-content-part-hover-background: rgb(207 207 207 / 0%);
    --subpanel-content-part-hover-color: black;
    --subpanel-content-part-hover-border: 2px solid black;
    --detailPanel-background: #d3d3d3;
    --detailPanel-color: black;
    --detailPanel-border: 3px solid #0070C0;
    --detailPanel-box-shadow: 0 0 10px rgba(0, 112, 192, 0.5);
    --detailPanel-header-background: #0070C0;
    --detailPanel-header-color: white;
    --panel-hint-text-color: #666;
    --contentDiv-background: #0000001a;

    --tile-aktive-background: #3056ef;
    --tile-aktive-color: white;

    --fahrzeug-background: rgb(37 36 36 / 40%);
    --fahrzeug-hover-background: rgba(37, 36, 36, 0.485);

    --detailView-background: #ffffff29;
}

/* Dark */
[data-theme="1"] {
    --background-color: black;
    --fullscreen-background: url(/img/web_grid_3840.jpg);
    --title-background: #1e1e1e;
    --title-color: white;
    --title-border: 3px solid black;
    --title-box-shadow: 0 0 10px rgba(76, 76, 76, 0.5);
    --title-border-radius: 5px;
    --text-color: white;
    --mainTable-background: black;
    --filterArea-background: #2e2e2e;

    --tab-background: #323233;
    --tab-button-color: #b4b4b4;
    --tab-button-border: 1px solid black;
    --tab-button-border-bottom: 3px solid grey;
    --tab-button-hover-background: #777777;
    --tab-botton-active-background: #1e1e1e;

    --jtable-title-background: #2e2e2e;
    --jtable-header-background: #4c4c4c;
    --jtable-bottom-panel-background: #2e2e2e;

    --tile-aktive-background: #1e1e1e;
    --tile-aktive-color: white;

    --fahrzeug-background: rgb(46, 46, 46);

}

/* Light */
[data-theme="2"] {
    --background-color: #e5e5e5;
    /* --fullscreen-background: #e5e5e5; */
    --fullscreen-background: url(/img/web_grid_3840.jpg);
    --title-background: #dddddd;
    --title-color: black;
    --title-border: 3px solid lightgrey;
    --title-box-shadow: 0 0 10px rgba(76, 76, 76, 0.5);
    --title-border-radius: 5px;
    --text-color: black;
    --mainTable-background: white;
    --filterArea-background: #f3f3f3c4;
    --filterText-color: black;
    --step-text-color: #000000;

    --tab-background: #ffffff;
    --tab-button-color: grey;
    --tab-button-border: 1px solid black;
    --tab-button-border-bottom: 3px solid grey;
    --tab-button-hover-background: #d2d2d2;
    --tab-button-active-background: #dddddd;
    --tab-button-active-color: black;

    --jtable-title-background: #cbcbcb;
    --jtable-header-background: #cbcbcb;
    --jtable-row-background: #f5f5f5;
    --jtable-row-even-background: #e7e7e7;
    --jtable-row-hover-background: #b7b8ba;
    --jtable-bottom-panel-background: #cbcbcb;
    --jtable-bottom-panel-color: black;

    --panelPart-background: linear-gradient(135deg, rgb(255 255 255 / 84%) 0%, rgb(255 255 255 / 72%) 100%);
    --panelPart-text-color: black;
    --panelPart-text-contrast-color: white;
    --panelPart-line-color: darkgray;
    --contentDiv-background: #00000052;

    --tile-aktive-background: #696969e3;
    --tile-aktive-color: white;

    --fahrzeug-background: rgb(238, 238, 238);

    --detailView-background: #e5e5e5;
}

/* Violet */
[data-theme="3"] {
    --background-color: #52488e;
    --fullscreen-background: url(/img/web_grid_3840.jpg);
    --title-background: rgb(16 25 44);
    --title-color: white;
    --title-border: 3px solid #10192c;
    --text-color: white;
    --mainTable-background: #1e2638;
    /* black */
    --filterArea-background: linear-gradient(to bottom, #453887, #5e92e5);

    --tab-background: #1e2638;
    --tab-button-color: #c8c8c8;
    --tab-button-border: 1px solid black;
    --tab-button-border-bottom: 3px solid grey;
    --tab-button-hover-background: #36324c;
    --tab-button-hover-color: darkgray;
    --tab-button-active-background: #10192c;

    --jtable-title-background: #030841;
    --jtable-header-background: #030841e6;
    --jtable-row-background: #b087d4;
    --jtable-row-even-background: #6b4995;
    --jtable-row-hover-background: #ceaacb;
    --jtable-row-selected-color: #fff;
    --jtable-bottom-panel-background: #030841;

    --panelPart-background: linear-gradient(to bottom, #453887, #5e92e5);
    --panelPart-text-color: white;
    --panelPart-text-contrast-color: black;
    --panelPart-line-color: lightgrey;
    --subpanel-background: #7b68ee;
    --subpanel-color: white;
    --subpanel-content-part-hover-background: #e4e4e4;
    --subpanel-content-part-hover-color: black;

    --detailPanel-background: #463d8c;
    --detailPanel-color: black;
    --detailPanel-border: 3px solid #536cbd;
    --detailPanel-box-shadow: 0 0 10px rgb(81 100 181);
    --detailPanel-header-background: #7b68ee;
    --detailPanel-header-color: white;
    --panel-hint-text-color: white;

    --tile-aktive-background: #52488e;
    --tile-aktive-color: white;

    --fahrzeug-background: rgb(72 62 138);
    --fahrzeug-hover-background: rgb(59, 51, 114);
}

/* ------------------------------ Layout ------------------------------ */


body {
    background-color: var(--background-color);
}


.fullscreen {
    background: var(--fullscreen-background);
    background-size: 100vw 100vh;
    width: 100%;
    height: 98vh;
}

#title {
    background: var(--title-background);
    color: var(--title-color);
    border: var(--title-border);
    box-shadow: var(--title-box-shadow);
    border-radius: var(--title-border-radius);
}

.h3_subtitel {
    color: var(--text-color);
}

.mainTablePanel {
    background: var(--mainTable-background);
    color: var(--text-color);
}

#filterArea {
    background: var(--filterArea-background);
    color: var(--text-color);
}

/* ------------------------------ Tab ------------------------------ */

.tab {
    background-color: var(--tab-background);
}

.tab button {
    background-color: inherit;
    color: var(--tab-button-color);
    border: var(--tab-button-border);
    border-bottom: var(--tab-button-border-bottom);
}

.tab button:hover {
    background-color: var(--tab-button-hover-background);
    color: var(--tab-button-hover-color);
}

.tab button.active {
    background: var(--tab-button-active-background);
    color: var(--tab-button-active-color, --text-color);
    border-bottom: 3px solid red;
}

.tabcontent {
    background-color: var(--tab-button-active-background);
}

/* ------------------------------ JTable ------------------------------ */


div.jtable-main-container>div.jtable-title {
    background-color: var(--jtable-title-background);
}

div.jtable-main-container>div.jtable-title div.jtable-title-text {
    color: var(--text-color);
}

div.jtable-main-container>table.jtable>thead {
    background-color: var(--jtable-header-background);
}

div.jtable-main-container>table.jtable>thead th.jtable-column-header div.jtable-column-header-container span.jtable-column-header-text {
    color: var(--text-color);
}

div.jtable-main-container table.jtable thead th.jtable-column-header-sortable {
    color: var(--text-color);
}

#UsageTableContainer.jtable-main-container {
    background-color: var(--mainTable-background);
}

div.jtable-main-container>table.jtable>tbody>tr {
    background-color: var(--jtable-row-background);
}

div.jtable-main-container>table.jtable>tbody>tr>td {
    color: var(--text-color);
}

div.jtable-main-container>table.jtable>tbody>tr.jtable-row-even {
    background-color: var(--jtable-row-even-background);
}

div.jtable-main-container>table.jtable>tbody>tr:hover {
    /* color: var(--jtable-row-hover-color, black); */
    color: var(--jtable-row-hover-color);
    background: var(--jtable-row-hover-background);
}

div.jtable-main-container>table.jtable>tbody>tr.jtable-row-selected {
    color: var(--jtable-row-selected-color);
    background-color: var(--jtable-row-selected-background);
}

div.jtable-main-container>div.jtable-bottom-panel {
    background-color: var(--jtable-bottom-panel-background);
    color: var(--jtable-bottom-panel-color, --text-color);
}

/* ------------------------------ Speziell ------------------------------ */

/* Fuhrparkanalyse - Wartungen */

.fahrzeug {
    background-color: var(--fahrzeug-background);
}

.fahrzeug:hover {
    background-color: var(--fahrzeug-hover-background);
}

/* Mulden */

.new-panel .drag-handle {
    background-color: var(--title-background);
}

/* Bestellportal */

.panelPart {
    background: var(--panelPart-background);
    color: var(--panelPart-text-color);
    border: var(--panelPart-border);
    box-shadow: var(--panelPart-box-shadow);
}

.subpanel {
    background-color: var(--subpanel-background);
    color: var(--subpanel-color);
}

.subpanel .content .content-part:hover {
    background-color: var(--subpanel-content-part-hover-background);
    color: var(--subpanel-content-part-hover-color);
    border: var(--subpanel-content-part-hover-border);
}

.panel-hint-text {
    color: var(--panel-hint-text-color);
}

.detailPanel {
    background-color: var(--detailPanel-background);
    color: var(--detailPanel-color);
    border: var(--detailPanel-border);
    box-shadow: var(--detailPanel-box-shadow);
}

.detailPanel-header {
    background-color: var(--detailPanel-header-background);
    color: var(--detailPanel-header-color);
}

.step-text {
    color: var(--step-text-color);
}

.inner-div .content {
    background-color: var(--contentDiv-background);
}

/* APK */

.tile.active {
    background-color: var(--tile-aktive-background);
    color: var(--tile-aktive-color);
}

/* Rechnungen */

#filterText {
    color: var(--filterText-color);
}

.detailView {
    color: var(--text-color);
    background-color: var(--detailView-background);
}


/* Dashboard */

/* .chartStyle {
    border: var(--chartStyle-color);
    box-shadow: var(--chartStyle-boxShadow);
    border-radius: var(--chartStyle-borderRadius);
    background: var(--chartStyle-background);
} */