:root {
    --my-red: rgb(238, 118, 35);
    --my-beige: #fac79e;
    --my-light-beige: rgb(238, 142, 73);
    --my-light-braun: rgb(132, 134, 138);
    --my-braun: rgb(99, 101, 105);
    --my-dbraun: rgb(56, 56, 58);
    --my-dark-red: rgb(255, 106, 0);
}
.color-white {color: white;}
.color-red {color: var(--my-red);}
.color-beige {color: var(--my-beige);}
.color-braun {color: var(--my-braun);}
.color-dbraun {color: var(--my-dbraun);}
.color-dark-red {color: var(--my-dark-red);}

.bg-white { background-color: white;}

body {
    padding-top: 76px;
    padding-bottom: 57px;
    background-color: #FCFBFA;
    background: url('TBG2_Roel_2024.jpg') no-repeat center center fixed;
    background-size: cover;
    scrollbar-color: #666 #FCFBFA;
    scrollbar-width: thin;
    transition: background-color 0.5s ease;
}
::-webkit-scrollbar {
    width: 5px;
    background-color: #FCFBFA;
}
::-webkit-scrollbar-thumb {
    background-color: #666;
}

hr {
    margin-top: 2rem;
    margin-bottom: 2rem;
    border: 0;
    border-top: 2px solid var(--my-dbraun);
}

a.active {
    font-weight: 700;
    color: var(--my-red)!important;
}

.dropdown-item.active, .dropdown-item:active {
    background-color: var(--my-dbraun);
    color: white!important;
}

ul.romb-list {
    list-style: none;
}
.romb-list li {
    margin-top: 6px;
}
.romb-list li::before {
    content: "\25C6";
    color: var(--my-dbraun);
    font-weight: bold;
    display: inline-block;
    width: 1.5em;
    margin-left: -1.5em;
}

.card-header {
    border-bottom: none;
    background-color: var(--my-beige);
}
.card-home {
    border-color: var(--my-beige);
}

.btn-outline-primary { --bs-btn-bg: white; }
.btn-secondary {
/*    --bs-btn-color: white;*/
    --bs-btn-border-color: var(--my-braun);
    --bs-btn-hover-bg: var(--my-dbraun);
    --bs-btn-hover-border-color: var(--my-dbraun);
    --bs-btn-bg: var(--my-braun);
    --bs-btn-active-bg: var(--my-braun);
    --bs-btn-active-border-color: var(--my-braun);
}
.btn-outline-secondary {
    --bs-btn-color: var(--my-dbraun);
    --bs-btn-border-color: var(--my-braun);
    --bs-btn-hover-bg: var(--my-braun);
    --bs-btn-hover-border-color: var(--my-braun);
    --bs-btn-bg: white;
    --bs-btn-active-bg: var(--my-braun);
    --bs-btn-active-border-color: var(--my-braun);
}
.btn-outline-success { --bs-btn-bg: white; }
.btn-danger {
/*    --bs-btn-color: white;*/
    --bs-btn-border-color: var(--my-red);
    --bs-btn-hover-bg: var(--my-dark-red);
    --bs-btn-hover-border-color: var(--my-dark-red);
    --bs-btn-bg: var(--my-red);
    --bs-btn-active-bg: var(--my-red);
    --bs-btn-active-border-color: var(--my-red);
}
.btn-outline-danger {
    --bs-btn-color: var(--my-red);
    --bs-btn-border-color: var(--my-red);
    --bs-btn-hover-bg: var(--my-red);
    --bs-btn-hover-border-color: var(--my-red);
    --bs-btn-bg: white;
    --bs-btn-active-bg: var(--my-red);
    --bs-btn-active-border-color: var(--my-red);
}
.my-large-button {
    --bs-btn-bg: var(--my-braun);
    --bs-btn-border-color: var(--my-braun);
    --bs-btn-hover-bg: var(--my-dbraun);
    --bs-btn-hover-border-color: var(--my-dbraun);
}
.btn-braun {
    --bs-btn-color: var(--my-dbraun);
    --bs-btn-border-color: var(--my-dbraun);
    --bs-btn-hover-bg: var(--my-dbraun);
    --bs-btn-hover-border-color: var(--my-dbraun);
    --bs-btn-bg: white;
}

.accordion-button:not(.collapsed) {
    font-weight: 700;
    color: var(--my-dbraun);
    background-color: white;
}
.accordion-item {
    border-color: var(--my-beige);
    background-color: var(--my-light-beige);
}
.accordion-item.cards {
    border-color: #FCFBFA;
    background-color: #FCFBFA;
}
.accordion-button.cards {
    background-color: #FCFBFA;
    font-size: 2rem;
    color: var(--bs-heading-color);
}

.border-bottom-navbar-start {
    border: 0;
    border-bottom: 2px solid var(--my-light-braun);
    box-shadow: 0px 4px 8px var(--my-light-braun);
}
.bg-navbar-end {
    background-color: var(--my-light-braun);
    color: white;
}
.dropup a.dropdown-toggle {
    color: white;
    text-decoration: none;
}
.bg-navbar-end a.nav-link:hover {
    color: white;
}
.bg-navbar-end .nav-link.show {
    color: white;
}

.form-check-input {
    border-color: var(--my-braun);
}
.form-check-input:checked {
    background-color: var(--my-braun);
    border-color: var(--my-braun);
}

.table-light {
    --bs-table-bg: var(--my-beige);
    --bs-table-border-color: var(--my-beige);
}

.table {
    border-bottom-color: var(--my-beige);
    --bs-table-hover-bg: var(--my-light-beige)!important;
}

.bi-check-lg {
    color: green;
}
.bi-check-circle-fill.green {
    color: green;
}
.bi-check-circle-fill.orange {
    color: orange;
}
.bi-x-lg {
    color: var(--my-red);
}
.br-groove {
    border-right: solid 2px;
}

.tabulator>:not(caption)>*>* {
    padding: 0;
}
.tabulator.table-bordered {
    border: none!important;
}
.tabulator.table-bordered .tabulator-header .tabulator-col,.tabulator.table-bordered .tabulator-tableholder .tabulator-table .tabulator-row .tabulator-cell {
    border: none!important;
}
.tabulator.table:not(.thead-light) .tabulator-header,.tabulator.table:not(.thead-light) .tabulator-header .tabulator-col {
    border: none!important;
    background-color: var(--my-beige)!important;
}
.tabulator .tabulator-header .tabulator-col .tabulator-header-filter input {
    border: 1px solid var(--my-light-braun)!important;
}
.tabulator .tabulator-footer {
    border: none!important;
    background-color: var(--my-beige)!important;
}
.tabulator .tabulator-calcs-bottom .tabulator-cell {
    border: none!important;
    background-color: var(--my-beige)!important;
    text-align: center;
}
.tabulator-calcs-holder {
    border: none!important;
}
.tabulator-col-title {
    text-align: center!important;
}
.tabulator  .tabulator-group {
    text-align: left;
}

.menu-item {
    display: inline-block;
    margin-right: 15px;
    position: relative;
}
.menu-item-icon:hover ~ .menu-title {
    opacity: 1;
    transform: translateX(0);
    pointer-events: default;
}
.menu-title {
    cursor: default;
    position: absolute;
    top: 100%;
    right: -50%;
    background-color: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 5px 10px;
    border-radius: 5px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.3s ease, transform 0.4s ease;
    pointer-events: none;
}
.page-item {
    --bs-pagination-color: var(--bs-body-color);
    --bs-pagination-active-bg: var(--my-braun);
    --bs-pagination-active-border-color: var(--my-braun);
}
body {
    color: white;
}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    color: white;
}

.modal-content {
    background-color: gray;
}
.btn.disabled {
   background-color: white;
}
.btn:disabled {
   background-color: white;
}
.accordion-header {
    color: inherit;
}

.changed-app-settings {
    border-color: #dc3545 !important;
}

#infoMap {
    background-color: black;
}