/* TODO: [Theming] Root-Theme */
:root {
    /* App Color*/
    --background-color: #111011;
    --primary-color: #00a9ff;
    --primary-hover-color: #00aaffbb;
    --onPrimary-color: #ffffff;
    --onBackground-color: #ffffff;
    --onLightBackground-color: #000000;
    --surface-color: #242324;
    --surface-hover-color: #373537;
    --onSurface-color: #ffffff;
    --surfaceShadeMoreBright-color: #282728;
    --surfaceShadeMoreBright-hover-color: #333333;
    --secondary-color: #c22a2c;
    --primaryVariant-color: #0390dd;

    --fullscreen-background: url(/img/web_grid_3840.jpg);
    --title-border: 3px solid #00a9ff;
    --title-box-shadow: 0 0 10px rgba(0, 112, 192, 0.5);
    --title-border-radius: 5px;
    --filterText-color: white;
    --step-text-color: #e0e0e0;

    --tab-background: #242324;
    --tab-button-color: #757475;
    --tab-button-border: 1px solid black;
    --tab-button-border-bottom: 3px solid #757475;
    --tab-button-hover-background: #777777;
    --tab-button-active-background: #3f3f3f;
    --tab-button-active-color: #0095e1;
    --tab-button-active-border-bottom: 3px solid #0095e1;

    --jtable-title-background: #232323;
    --jtable-header-background: #303030;
    --jtable-row-background: #555;
    --jtable-row-even-background: #777;
    --jtable-row-hover-color: white;
    --jtable-row-hover-background: #2d5e77;
    --jtable-row-selected-background: #2d5e77;
    --jtable-row-selected-color: #ffffff;
    --jtable-bottom-panel-background: #343434;
    --jtable-bottom-panel-color: #ffffff;

    --panelPart-background: rgba(17, 16, 17, 0.88);
    --panelPart-text-color: #ffffff;
    --panelPart-text-contrast-color: white;
    --panelPart-line-color: lightgrey;
    --panelPart-border: 2px solid rgba(255, 255, 255, 0.1);
    --panelPart-box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);

    --subpanel-background: inherit;
    --subpanel-color: #ffffff;
    --subpanel-content-part-hover-background: #f7f7f7d2;
    --subpanel-content-part-hover-color: black;
    --subpanel-content-part-hover-border: 2px solid black;
    --detailPanel-background: #d3d3d3;
    --detailPanel-color: black;
    --detailPanel-border: 3px solid #00a9ff;
    --detailPanel-box-shadow: 0 0 10px rgba(0, 112, 192, 0.5);
    --detailPanel-header-background: #00a9ff;
    --detailPanel-header-color: white;
    --panel-hint-text-color: #666;
    --contentDiv-background: #0000001a;

    /* Tile */
    --tile-primary-background: #202222;
    --tile-aktive-background: #c22a2c;
    --tile-aktive-color: white;
    --tile-app-background: #3f4447;

    --list-header-background-color-grey: #3b3f46;
    --list-content-background-color-grey: #20262e;

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

    --detailView-background: #ffffff29;

    --menu-panel-background-color: rgba(32, 32, 32, 0.75);
    --menu-level-background-color: #012;
    --menu-level-background-hover-color: #024;
    --menu-text-hover-color: #FF0000;

    /* Fix Color */
    --blue-color: #00a9ff;
    --blue-secondary-color: #0676bb;
    --green-color: #4aaf57;
    --app-green-color: #51bf5a;
    --yellow-color: #FFC107;
    --lightgrey-color: #484848;
    --grey-color: #4d4d4d;
    --red-color: #c22a2c;
    --filter-btn-background-color: linear-gradient(to right, #242324 83%, #939391 80%);

    /* Hover */
    --OnDarkBackground-hover-background: rgba(17, 16, 17, 0.6);
    --hover-light-onDarkBackground: rgb(255 255 255 / 18%);

    --modern-background: linear-gradient(135deg, rgb(255 255 255 / 84%) 0%, rgb(255 255 255 / 72%) 100%);

    /* Border-Radius */
    --border-radius-panel: 8px;
    --border-radius-btn: 8px;
    --border-radius-thin: 4px;

    --font-size-text: 12px;
}

/* TODO: [Theming] (old, not used) Dark-Theme */
[data-theme="1"] {
    --background-color: black;
    --fullscreen-background: url(/img/web_grid_3840.jpg);
    --primary-color: #1e1e1e;
    --onPrimary-color: #ffffff;
    --surface-color: black;
    --onSurface-color: #ffffff;


    --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;
    --filterArea-background: #2e2e2e;

    --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);

    --menu-panel-background-color: #1e1e1e;
    --menu-level-background-color: #1e1e1e;
    --menu-level-background-hover-color: #1e1e1e;
}

/* TODO: [Theming] Light-Theme */
[data-theme="2"] {
    --background-color: #e5e5e5;
    --onBackground-color: black;
    --primary-color: #dddddd;
    --onPrimary-color: #111011;
    --surface-color: white;
    --onSurface-color: #111011;
    --surface-hover-color: #f3f3f3c4;
    --surfaceShadeMoreBright-color: #f3f3f3c4;

    /* --fullscreen-background: #e5e5e5; */
    --fullscreen-background: #f3f3f3c4;
    --title-color: black;
    --title-border: 3px solid lightgrey;
    --title-box-shadow: 0 0 10px rgba(76, 76, 76, 0.5);
    --title-border-radius: 5px;
    --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-hover-color: #000000;
    --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: #d2d4d8;
    --jtable-row-selected-background: #d2d4d8;
    --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;

    --menu-panel-background-color: #dddddd;
    --menu-level-background-color: #dddddd;
    --menu-level-background-hover-color: #dddddd;
}

/* TODO: [Theming] Violet-Theme */
[data-theme="3"] {
    --background-color: #52488e;
    --primary-color: rgb(16 25 44);
    --onPrimary-color: #ffffff;
    --onBackground-color: #ffffff;
    --surface-color: #1e2638;
    --onSurface-color: #ffffff;
    --surfaceShadeMoreBright-color: linear-gradient(to bottom, #453887, #5e92e5);

    --fullscreen-background: url(/img/web_grid_3840.jpg);
    --title-border: 3px solid #10192c;

    --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: #52488e;
    --jtable-row-even-background: #6b4995;
    --jtable-row-hover-background: #9f2c95;
    --jtable-row-selected-background: #9f2c95;
    --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);

    --menu-panel-background-color: #52488e;
    --menu-level-background-color: #52488e;
    --menu-level-background-hover-color: #52488e;
}

/* TODO: [Theming] Dark-Theme */
[data-theme="4"] {
    --background-color: #111011;
    --primary-color: #00a9ff;
    --onPrimary-color: #ffffff;
    --onBackground-color: #ffffff;
    --surface-color: #242324;
    --onSurface-color: #ffffff;
    --surfaceShadeMoreBright-color: #282728;

    --fullscreen-background: #111011;
    --title-border: 3px solid #00a9ff;
    --title-box-shadow: 0 0 10px rgba(76, 76, 76, 0.5);
    --title-border-radius: 5px;

    --jtable-title-background: #2e2e2e;
    --jtable-bottom-panel-background: #2e2e2e;
    --jtable-row-even-background: #232323;
    --jtable-row-background: #303030;


    /* --tile-aktive-background: #282728;  */
    --tile-aktive-color: white;

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

    --menu-panel-background-color: #242324;
    --menu-level-background-color: #242324;
    --menu-level-background-hover-color: #282728;
}

/* TODO: [Theming] Global Style */

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

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

/* #title {
    background: var(--blue-secondary-color);
    color: #ffffff;
    border: 3px solid var(--blue-secondary-color);
    box-shadow: var(--title-box-shadow);
    border-radius: var(--title-border-radius);
    font-family: 'PoppinsBoldFont', sans-serif;
    text-align: center;
    filter: drop-shadow(1px 1px 3px black);
    padding: 1 0;
}
 */
#title {
    color: var(--onSurface-color);
    font-family: 'PoppinsMediumFont', sans-serif;
    /* filter: drop-shadow(1px 1px 3px black); */
    padding: 5px 0 5px 8px;
    /* padding: 10 0 0 20; */
    font-size: 20px;
}

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

.mainTablePanel {
    /* background: var(--surface-color); */
    color: var(--onBackground-color);
    right: 8px;
    left: 8px;
    height: 91vh;
    border-radius: 8px;
}

.filterArea,
#textArea {
    background: var(--surface-color);
    color: var(--onBackground-color);
    border: 1px solid var(--blue-color);
    border-radius: var(--border-radius-panel);
    padding: 10px;
}

#filterArea {
    display: flex;
    flex-wrap: wrap;
    width: 96%;
}

#filterArea input[type="text"] {
    color: white
}


.filtering .switch {
    margin-top: 8px;
}

.filtering .slider.round {
    background: var(--lightgrey-color);
}

.filtering .switch input:checked+.slider {
    background: var(--blue-color);
}


.filtering input[type="text"],
.filtering input[type="number"] {
    background: var(--lightgrey-color);
    color: var(--onSurface-color);
    line-height: 28px;
    border: none;
}

.filtering input[type="text"]:focus,
.filtering input[type="text"]:focus-visible,
.filtering input[type="number"]:focus,
.filtering input[type="number"]:focus-visible {
    border: 1px solid var(--blue-color);
    outline: none;
    box-shadow: none;
}

.drop-down {
    font-family: 'PoppinsRegularFont', sans-serif;
}

textarea,
input,
select {
    font-family: 'PoppinsRegularFont', sans-serif;
    border-radius: 8px;
}

button {
    font-family: 'PoppinsRegularFont', sans-serif;
}

/*  TODO: [Theming] Tab Style */

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

.tab button {
    background-color: var(--tab-background);
    color: var(--tab-button-color);
    border: var(--tab-button-border);
    border-bottom: var(--tab-button-border-bottom);
    font-family: 'PoppinsRegularFont', sans-serif;
    border-radius: 8px 8px 0 0;
}

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

.tab button.active {
    background: var(--tab-background);
    color: var(--tab-button-active-color, --onBackground-color);
    border-bottom: var(--tab-button-active-border-bottom);
}

.tabcontent {
    /* background-color: var(--background-color); */
    border-radius: 0 8px 8px 8px;
    background-color: var(--tab-background);
}

/* TODO: [Theming] Box Style */
.darkblue-box {
    border: 2px solid var(--blue-color);
    box-shadow: 0 0 10px rgba(0, 112, 192, 0.5);
    border-radius: 8px;
    color: white;
    background-color: #333333;
}

/* TODO: [Theming] Flex Style */

.flex-Div {
    display: flex;
    align-items: center;
    font-family: 'PoppinsRegularFont', sans-serif;
}

/* TODO: [Theming] JTable Style */

div.jtable-main-container {
    font-family: 'PoppinsRegularFont', sans-serif;
    border-radius: var(--border-radius-panel);
    overflow: hidden;
    background: var(--surface-color);
}

div.jtable-main-container>table.jtable {
    overflow-y: auto !important;
    /* overflow-x: hidden !important; */
    border: unset;
}

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

div.jtable-main-container>div.jtable-title {
    display: none;
}

div.jtable-main-container table.jtable tbody>tr.jtable-child-row>td .jtable-title {
    display: block;
}

div.jtable-main-container>table.jtable>thead th {
    font-size: 12px;
}

.jtable thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    background-color: var(--jtable-header-background);
}

.jtable th:nth-child(1),
.jtable td:nth-child(1),
.jtable th:nth-child(2),
.jtable td:nth-child(2),
.jtable th:nth-child(3),
.jtable td:nth-child(3) {
    position: sticky;
    z-index: 2;
}

.jtable td:nth-child(3)::after {
    content: "";
    position: absolute;
    top: 0;
    right: 5px;
    width: 12px;
    height: 100%;
    pointer-events: none;
    background: linear-gradient(to left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.089) 70%);
}

.jtable thead th:nth-child(1),
.jtable thead th:nth-child(2),
.jtable thead th:nth-child(3) {
    z-index: 4;
}

.jtable th {
    position: sticky;
    top: 0;
    z-index: 3;
}

div.jtable-main-container>table.jtable>thead {
    background-color: var(--jtable-header-background);
    border-bottom: 2px solid #555555;
}

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

div.jtable-main-container table.jtable thead th.jtable-column-header-sortable {
    color: var(--onBackground-color);
    font-family: 'PoppinsRegularFont', sans-serif;
}

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

div.jtable-main-container>table.jtable>tbody>tr {
    background-color: var(--jtable-row-background);
    border-bottom: 2px solid #404040;
}

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

/* div.jtable-main-container>table.jtable>tbody>tr.jtable-data-row {} */

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);
    background: var(--jtable-row-hover-background);
    border-radius: 4px;
    outline: 1px solid var(--blue-color);
    outline-offset: -1px;
}

div.jtable-main-container>table.jtable>tbody>tr.jtable-row-selected {
    color: var(--jtable-row-selected-color);
    background-color: var(--jtable-row-selected-background);
    border: 1px solid var(--blue-color);
    border-radius: 1px;
    box-sizing: border-box;
}

div.jtable-main-container>table.jtable>tbody>tr.jtable-data-row>td {
    padding: 8px;
    font-size: 12px;
}

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

div.jtable-main-container>table.jtable {
    scrollbar-width: thin;
    scrollbar-color: var(--lightgrey-color) var(--surface-color);
}

.rTableCell {
    font-family: 'PoppinsRegularFont', sans-serif;
    margin-right: 7px;
}

/*  TODO: [Theming] Button Style */

.app-filter-btn {
    border-radius: var(--border-radius-btn);
    background-color: var(--surface-color);
    color: var(--onPrimary-color);
    border: none;
    padding: 5px;
    opacity: 0.9;
}

.app-filter-btn.date-filter {
    background: url(https://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/calendar_2.png) 97% 50% no-repeat,
    var(--filter-btn-background-color);
    color: #ffffff;
}

.buttonStyle {
    font-family: 'PoppinsRegularFont', sans-serif;
    background: #00a9ff;
    padding: 5px 10px;
    border: none;
    cursor: pointer;
}

.buttonStyle:hover {
    background: #00aaff9c;
}

.searchButton,
#searchRecordsButton {
    background: #00a9ff;
    color: #ffffff;
    padding: 5px 10px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    font-size: 16;
    width: 100px;
    font-family: 'PoppinsRegularFont', sans-serif;
}

.searchButton:hover,
#searchRecordsButton:hover {
    background: var(--primary-hover-color);
}

.resetButton,
#resetButton {
    background: #282728;
    color: #ffffff;
    padding: 5px 10px;
    border-radius: 8px;
    border: 1px solid #00a9ff;
    cursor: pointer;
    width: 100px;
    font-family: 'PoppinsRegularFont', sans-serif;
}

.resetButton:hover,
#resetButton:hover {
    background: var(--surfaceShadeMoreBright-hover-color);
    color: #ffffff;
}

/* TODO: [Theming] Modul Styles */

/* TODO: [Theming] Modul: Menu */

.buttons-panel {
    background: var(--menu-panel-background-color);
}

.top-level-menu>li {
    background: var(--menu-level-background-color);
}

.top-level-menu>li:hover {
    background: var(--menu-level-background-hover-color);
}

.top-level-menu a {
    color: #00a9ff;
    font-size: 1.1em;
}

.top-level-menu a:hover {
    color: #FF0000;
}

.second-level-menu>li {
    background: var(--menu-level-background-color);
}

.second-level-menu>li:hover {
    background: var(--menu-level-background-hover-color);
}

.third-level-menu>li {
    background: var(--menu-level-background-color);
}

.third-level-menu>li:hover {
    background: var(--menu-level-background-hover-color);
}

#Menue-Anzeige-Vollbild {
    color: var(--onSurface-color);
}

#Menue-Anzeige-Normal {
    color: var(--onSurface-color);
}

.top-level-menu ul,
.second-level-menu ul,
.third-level-menu ul {
    min-width: 180px;
    width: fit-content;
    /* auto */
    white-space: nowrap;
}


/* TODO: [Theming] Modul: Fuhrparkanalyse - Wartungen */
.fahrzeug {
    background-color: var(--fahrzeug-background);
}

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

/* TODO: [Theming] Modul: Mulden */
.new-panel .drag-handle {
    background-color: var(--primary-color);
}

/* TODO: [Theming] Modul: 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(--onPrimary-color);
    opacity: 0.8;
}

.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);
}

.input {
    font-family: 'PoppinsRegularFont', sans-serif;
}

/* TODO: [Theming] Modul: APK */
.tile.active {
    background-color: var(--tile-aktive-background);
    color: var(--tile-aktive-color);
}

/* TODO: [Theming] Modul: Rechnungen */
#filterText {
    color: var(--filterText-color);
}

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

/* TODO: [Theming] Modul: Dashboard */

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

/* TODO: [Theming] AddOn: Zoom Banner */

#zoom-warning {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: #ffcc00;
    color: #000;
    text-align: center;
    padding: 10px;
    z-index: 100000;
    opacity: 1;
    font-size: 14px;
    animation: fadeOut 5s ease-out forwards;
}

@keyframes fadeOut {
    0% {
        opacity: 1;
    }

    83% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

/* TODO: [Theming] AddOn: Formular */

.required::after {
    content: " *";
    color: red;
    font-weight: normal;
}

/* TODO: [Theming] AddOn: JQuery Ui Elemente */

.ui-dialog {
    background: var(--background-color);
    color: var(--onBackground-color);
}

.ui-tabs {
    /* background: var(--background-color); */
    /* color: var(--onBackground-color); */
}

/* TODO: [Theming] Responsiv: bis 768px*/

@media screen and (max-width: 1280px) {
    #title {
        padding-top: 60px;
    }

    div.jtable-main-container>table.jtable {
        max-height: 55vh;
    }
}

@media screen and (max-width: 768px) {
    #filterArea {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: thin;
        scrollbar-color: var(--lightgrey-color) var(--surface-color);
    }
}