:root {
    --bs-btn-border-color-nightshade:#375a7f;
    --bs-btn-border-color-nightshade-alt:55,90,127;
    --bs-btn-color-nightshade:#375a7f;
    --bs-text-primary-nightshade:#557392;
}
@media screen and (min-width: 1024px) {
    body {font-size: 14px!important}
}

html.dark textarea,html.dark input {background-color: var(--bs-dark-bg-subtle)}
.select2-selection--single:hover,select:hover,input[type=text]:hover,textarea:hover {background-color:var(--bs-gray-200)}
html.dark select:hover,html.dark input[type=text]:hover,html.dark textarea:hover {background-color:var(--bs-dark)}

/** bootstrap */
.nav.nav-pills span:not(.not-hover):not(.active):hover,.nav.nav-pills a:not(.not-hover):not(.active):hover {background-color: var(--bs-gray-500)}
html.light .nav-pills .nav-link.active {color: #fff !important}
.nav-pills .nav-link {font-size:16px}
.icon-flipped.bi::before {transform: scaleX(-1)}
html.dark .table:not(.table-unhover) tbody tr.hover:not(.unhover) {background-color: var(--bs-gray-dark)}

html.dark #header #site-name h2 a  {color:var(--bs-gray) !important}
html.dark img#menu_top_handler {filter: invert(0.5)}
html.dark #footer {background-color: var(--bs-dark)}

/** themes toggle */
#toggleThemeModeCheck {width:48px;height:24px;margin-bottom:2px;margin-top:0;background-image:none !important}
html.light #toggleThemeModeCheck {background-color:#fff !important}
html.light #toggleThemeModeCheck:after {content: "☀️" !important;position:relative;bottom:5px;height:24px;left:1px}
html.dark #toggleThemeModeCheck {background-color:#375a7f !important;border-color:#375a7f !important}
html.dark #toggleThemeModeCheck:after {content: "🌙" !important;position:relative;bottom:5px;height:24px;left:18px}
#toggleThemeModeCheck ~ label {margin-top:5px}

/** jquery ui */
html.dark .ui-button {background:var(--bs-dark);color:var(--bs-light)}
html.dark .ui-datepicker-calendar a.ui-state-default {background:var(--bs-dark)}
html.dark .ui-datepicker-calendar a.ui-state-default.ui-state-highlight {background:var(--bs-gray-dark)}
html.dark .ui-widget-content.ui-tooltip {background: var(--bs-dark) !important}
html.dark .ui-state-default a{color: var(--bs-light) !important}

/** menu */
html.dark #nav li,html.dark #nav li ul {background-color:var(--bs-gray-dark)}
html.dark #nav li a {color:var(--bs-gray-200) !important}
html.dark #nav li:hover,html.dark #nav li.active {background-color:var(--bs-gray-700)}

/** search popup */
html.dark #searchsite {background-color:var(--bs-gray-800)}
html.dark #searchsite:hover {background-color:var(--bs-gray-700)}
html.dark #searchsite + .result {background-color: var(--bs-dark)}
html.dark #searchsite + .result div.caption {background-color: var(--bs-gray-800);color: var(--bs-light)}

html.dark .shadow,html.dark .ui-widget-shadow  {box-shadow: 0 6px 15px rgb(10 10 13 / 65%) !important}
html.dark .bg-hover-light-info:hover {background-color:var(--bs-gray-700) !important}

/* fix bootstrap dark theme, for nightshade color, as in bootstrap dark all very contrast, but in old theme nightshade is very ok */
html.dark .pagination li:not(.disabled) a,html.dark .nav-link:not(.active,.disabled),html.dark .btn-link {color:var(--bs-text-primary-nightshade)}
html.dark .nav-pills .nav-link.active, html.dark .btn.btn-primary {background-color: var(--bs-btn-border-color-nightshade) !important;border-color:var(--bs-btn-border-color-nightshade)}
html.dark .btn.show,html.dark .btn.btn-outline-primary:hover {background-color: var(--bs-btn-border-color-nightshade) !important;color:var(--bs-white) !important;}
html.dark .btn-outline-primary{border-color:var(--bs-btn-border-color-nightshade);color:var(--bs-btn-color-nightshade)}
html.dark .bg-primary {background-color: rgba(var(--bs-btn-border-color-nightshade-alt), var(--bs-bg-opacity)) !important}
html.dark .table .table-secondary td,html.dark .table .table-secondary th {--bs-bg-opacity:1;background-color:rgba(68, 68, 68, var(--bs-bg-opacity)) !important;color:var(--bs-light) !important;box-shadow:none !important}
html.dark .btn-light {background-color:var(--bs-gray-400) !important;border-color:var(--bs-gray-400)}

/** datatables */
table.dataTables thead th {cursor: pointer !important}
.dt-container .dt-search {display: inline-block;float:right;padding:0 2px 2px 0}
.dt-container .dt-buttons {padding:0 0 0 2px}
.dt-buttons>.dt-button {font-size:inherit !important;background:var(--bs-secondary-bg) !important}
.dt-button-collection {max-height:500px;width:300px !important;overflow-y:auto !important}
.dt-container .toolbar:not(:empty) {display:inline-block;float:left;padding:3px 3px 8px 2px}
.dt-buttons:empty {margin:0 !important}
.dt-container div.dt-layout-row{margin:0 !important}
table.dataTables[data-datatables-sort=false] thead .dt-column-order {display: none}
html.dark table.fixedHeader-floating, html.dark table.fixedHeader-locked {background-color: var(--bs-gray-dark) !important}
.dtfh-floatingparent-head {top:50px !important;overflow:inherit !important}
.dtfh-floatingparent-head table[data-max-views] colgroup {display: none}
table.dataTable thead > tr > th.dt-orderable-desc span.dt-column-order::before {font-size:15px !important}
table.dataTable thead > tr > th.dt-orderable-desc span.dt-column-order::after {font-size:15px !important}
table.dataTable thead .dt-ordering-desc span.dt-column-order:before,table.dataTable thead .dt-ordering-asc span.dt-column-order:after,
.dt-orderable-asc.dt-orderable-desc:not([aria-sort]) span.dt-column-order:before,.dt-orderable-asc.dt-orderable-desc:not([aria-sort]) span.dt-column-order:after {opacity:0.0 !important}
table.dataTable thead>tr>th.dt-orderable-asc:hover, table.dataTable thead>tr>th.dt-orderable-desc:hover, table.dataTable thead>tr>td.dt-orderable-asc:hover, table.dataTable thead>tr>td.dt-orderable-desc:hover {outline:none !important}
.dt-orderable-asc.dt-orderable-desc:not([aria-sort]) span.dt-column-order {display:none}

/** tagify */
html.dark .tagify__dropdown__wrapper {background-color: var(--bs-dark)}

/** perfect scrollbar */
.perfect-scrollbar table.table.dataTables thead, .perfect-scrollbar table.table.dataTables thead th {position: sticky;top:0}
html.dark .perfect-scrollbar .ps__rail-x:hover,html.dark .perfect-scrollbar .ps__rail-y:hover {
    background-color: var(--bs-gray-800) !important;
    opacity: 0.7 !important;
    border-radius:0.5rem;
}

/** charts */
html.dark svg.apexcharts-svg {background: none !important}
.apexcharts-toolbar {z-index:2 !important}
html.light .apexcharts-bar-series text.apexcharts-datalabel {fill:var(--bs-dark)}

/** jquery bootstrap validator */
form.needs-validation .help-block {color:var(--bs-danger);font-weight:bold;display:block}

/** select2 */
html.dark .select2-container--default .select2-selection--single {background-color:var(--bs-dark) !important}
html.dark .select2-container--default .select2-results__option--selected {background-color: var(--bs-gray-700)}
html.dark .select2-dropdown {background-color:var(--bs-dark) !important}
html.dark .select2-container--default .select2-results__option[aria-selected=true] {background-color:var(--bs-gray-800) !important}
html.dark .select2-container--default .select2-selection--multiple {background-color:var(--bs-dark) !important}
html.dark .select2-container--default .select2-selection--multiple .select2-selection__choice {background-color:var(--bs-gray-700) !important}
.select2-dropdown {z-index:9998 !important}
.select2-container--default .select2-selection--single{border:1px solid var(--bs-border-color) !important;border-radius:var(--bs-border-radius) !important;padding:5px 1px !important;height:38px !important}
.select2-container--default .select2-selection--single .select2-selection__arrow b {margin-top:0 !important;}
.select2-dropdown {border-color:var(--bs-border-color) !important}
.select2-container--default .select2-selection--multiple {border-color:var(--bs-border-color) !important}
.select2-container--default .select2-selection--single .select2-selection__arrow {top:5px !important}
.select2-container--default .select2-selection--single .select2-selection__rendered {color:var(--bs-body-color) !important;padding-left:11px !important;font-size:16px}
.select2-results__options {overflow-x:hidden}

/** tinymce */
.mce-content-body [data-mce-selected=inline-boundary] {background:none !important}

/** own form style */
.ds-range-group input[type=range] {top:-12px}
.mw-75 {max-width:75% !important}
.mw-50 {max-width:50% !important}
.mw-25 {max-width:25% !important}
.mw-10 {max-width:10% !important}