:root {
	--dark-bg-color: #292929;
	--dark-font-color: #ffffff;
	--dark-border-color: #555555;
	--dark-box-shadow: 0 0 0 1px rgb(255 255 255 / 10%);
	--dark-transparent-color: transparent;
	--dark-text-shadow: none;
	--light-dark-bg-color: #444444;
}

html.dark-mode #top {
	background-color: var(--dark-bg-color);
}

html.dark-mode body {
	color: var(--dark-font-color);
	background-color: var(--dark-bg-color);
	color-scheme: dark;
}

html.dark-mode .form-control {
	color: var(--dark-font-color);
	box-shadow: var(--dark-box-shadow);
	background-color: var(--dark-bg-color);
	border-top-color: var(--dark-border-color);
	border-right-color: var(--dark-border-color);
	border-bottom-color: var(--dark-border-color);
	border-left-color: var(--dark-border-color);
}

html.dark-mode .multifieldmember:nth-child(2n+1) {
	background-color: var(--dark-bg-color);
}

html.dark-mode .multifieldmember {
	border-top-color: var(--dark-border-color);
	border-right-color: var(--dark-border-color);
	border-bottom-color: var(--dark-border-color);
	border-left-color: var(--dark-border-color);
}

html.dark-mode .dropdown-menu {
	box-shadow: var(--dark-box-shadow);
	background-color: var(--dark-bg-color);
	border-top-color: var(--dark-border-color);
	border-right-color: var(--dark-border-color);
	border-bottom-color: var(--dark-border-color);
	border-left-color: var(--dark-border-color);
}

html.dark-mode .dashboardcard h3 {
	background-color: var(--dark-bg-color);
}

html.dark-mode a:not(.btn) {
	background-color: var(--dark-transparent-color);
	color: var(--dark-font-color);
}

html.dark-mode .table > tbody > tr > td {
	background-color: var(--dark-bg-color) !important;
	border-top-color: var(--dark-border-color);
}

html.dark-mode .btn-default {
	color: var(--dark-font-color);
	background-color: var(--dark-bg-color);
	border-top-color: var(--dark-border-color);
	border-right-color: var(--dark-border-color);
	border-bottom-color: var(--dark-border-color);
	border-left-color: var(--dark-border-color);
}

/* keep default buttons readable on hover/focus/active in dark mode (Bootstrap would turn them white) */
html.dark-mode .btn-default:hover,
html.dark-mode .btn-default:focus,
html.dark-mode .btn-default.focus,
html.dark-mode .btn-default:active,
html.dark-mode .btn-default.active,
html.dark-mode .btn-default:active:hover,
html.dark-mode .btn-default:active:focus,
html.dark-mode .btn-default.active:hover,
html.dark-mode .btn-default.active:focus,
html.dark-mode .open > .dropdown-toggle.btn-default {
	color: var(--dark-font-color);
	background-color: var(--light-dark-bg-color);
	border-color: var(--dark-border-color);
}

html.dark-mode button.close {
	color: var(--dark-font-color);
	background-color: var(--dark-bg-color);
}

html.dark-mode button.close {
	text-shadow: var(--dark-text-shadow);
}

html.dark-mode .h1,
html.dark-mode h1 small,
html.dark-mode h2,
html.dark-mode h2 small,
html.dark-mode h3,
html.dark-mode h3 small,
html.dark-mode h4,
html.dark-mode h4 small,
html.dark-mode h5,
html.dark-mode h5 small,
html.dark-mode h6 {
	color: var(--dark-font-color);
}

html.dark-mode .nav-tabs > li.active > a {
	color: var(--dark-font-color);
	background-color: var(--dark-bg-color);
	border-top-color: var(--dark-border-color);
	border-left-color: var(--dark-border-color);
	border-right-color: var(--dark-border-color);
}

html.dark-mode .datatableheaderclone {
	background-color: var(--dark-bg-color);
	color: var(--dark-font-color);
}

html.dark-mode .dashboardcard {
	box-shadow: var(--dark-box-shadow);
}

html.dark-mode .panel {
	box-shadow: var(--dark-box-shadow);
	background-color: var(--dark-bg-color);
}

html.dark-mode .modal-content {
	box-shadow: var(--dark-box-shadow);
	background-color: var(--dark-bg-color);
	border-top-color: var(--dark-border-color);
	border-right-color: var(--dark-border-color);
	border-bottom-color: var(--dark-border-color);
	border-left-color: var(--dark-border-color);
}

html.dark-mode .modal-header {
	border-bottom-color: var(--dark-border-color);
}

html.dark-mode .modal-footer {
	border-top-color: var(--dark-border-color);
}

html.dark-mode a#link_schedule3 {
	color: var(--dark-font-color) !important;
}

html.dark-mode .ui-widget-content {
	color: var(--dark-font-color);
	background-color: var(--dark-bg-color);
	border-top-color: var(--dark-border-color);
	border-right-color: var(--dark-border-color);
	border-bottom-color: var(--dark-border-color);
	border-left-color: var(--dark-border-color);
}

html.dark-mode .dataTables_wrapper .dataTables_length,
html.dark-mode .dataTables_wrapper .dataTables_length select option,
html.dark-mode .dataTables_wrapper .dataTables_filter,
html.dark-mode .dataTables_wrapper .dataTables_info,
html.dark-mode .dataTables_wrapper .dataTables_processing,
html.dark-mode .dataTables_wrapper .dataTables_paginate {
	color: var(--dark-font-color);
}

html.dark-mode .dataTables_wrapper .dataTables_length select {
	border-top-color: var(--dark-border-color);
	border-right-color: var(--dark-border-color);
	border-bottom-color: var(--dark-border-color);
	border-left-color: var(--dark-border-color);
}

html.dark-mode .dataTables_wrapper .dataTables_length select option {
	background-color: var(--dark-bg-color);
}

html.dark-mode .dataTables_wrapper .dataTables_filter input {
	background-color: var(--dark-transparent-color);
	border-top-color: var(--dark-border-color);
	border-right-color: var(--dark-border-color);
	border-bottom-color: var(--dark-border-color);
	border-left-color: var(--dark-border-color);
}

html.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button {
	color: var(--dark-font-color) !important;
	background-color: var(--dark-bg-color);
}

html.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button.current,
html.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
	color: var(--dark-font-color) !important;
	background-image: none;
	border-top-color: var(--dark-border-color);
	border-right-color: var(--dark-border-color);
	border-bottom-color: var(--dark-border-color);
	border-left-color: var(--dark-border-color);
}

html.dark-mode .alert-info a,
html.dark-mode .alert-warning a {
	color: var(--dark-bg-color);
}

html.dark-mode #ineedhourlast,
html.dark-mode #ineedhournever {
	color: var(--dark-bg-color);
}

html.dark-mode table.dataTable table tbody tr {
	background-color: var(--light-dark-bg-color);
}