.form-select option {
	background-color: #686c76 !important;
}

.select2.select2-container {
	background-color: transparent;
}

.select2-selection__placeholder {
	font-style: italic;
	color: #cccccc !important;
}

.select2.select2-container .selection .select2-selection.select2-selection--multiple .select2-selection__choice {
	color: #000000 !important;
}

.frq-datatable-inline-input::placeholder {
    color: rgba(255,255,255,.5);
    opacity: 1
}

.frq-datatable-inline-select option {
	background-color: #686c76 !important;
}

.input-group-text {
	background-color: transparent!important;
}

.swal-overlay .swal-modal {
	background-color: rgba(51, 51, 51, 0.9)!important;
}

/** Theme colors **/

:root {
	color-scheme: dark;

	--gw-bg: #303137;
	--gw-side: #28292e;
	--gw-surface: #3a3b42;
	--gw-surface-2: #45464e;
	--gw-border: #52535c;
	--gw-border-2: #62636d;
	--gw-active: #575862;
	--gw-hover: rgba(255, 255, 255, .06);
	--gw-text: #f7f7f5;
	--gw-text-2: #d8d7d2;
	--gw-text-3: #aeada7;

	--gw-c1: #8b93ff; --gw-c2: #22d3ee; --gw-c3: #34d399; --gw-c4: #fbbf24; --gw-c5: #fb7185;
	--gw-c6: #c084fc; --gw-c7: #38bdf8; --gw-c8: #a3e635; --gw-c9: #fb923c; --gw-c10: #f472b6;

	--gw-ok: #4ade80; --gw-warn: #facc15; --gw-danger: #f87171; --gw-info: #60a5fa; --gw-opp: #d8b4fe;
	--gw-ok-bg: rgba(74, 222, 128, .2); --gw-warn-bg: rgba(250, 204, 21, .2); --gw-danger-bg: rgba(248, 113, 113, .22);
	--gw-info-bg: rgba(96, 165, 250, .22); --gw-opp-bg: rgba(192, 132, 252, .22);

	--bs-body-color: var(--gw-text);
	--bs-body-bg: var(--gw-bg);
	--bs-border-color: var(--gw-border);
	--bs-link-color: #a5b4fc;
	--bs-link-hover-color: #c7d2fe;

	--app-component-bg: var(--gw-surface-2);
	--app-component-color: var(--gw-text);
	--app-component-border-color: var(--gw-border);
	--app-component-dropdown-bg: var(--gw-surface);
	--app-component-dropdown-border-color: var(--gw-border-2);
	--app-component-dropdown-hover-bg: var(--gw-active);
	--app-component-modal-bg: var(--gw-surface);
	--app-component-table-border-color: var(--gw-border);
	--app-component-table-separator-color: var(--gw-border-2);
	--app-component-active-bg: var(--gw-active);
	--app-header-bg: var(--gw-side);
	--app-sidebar-bg: var(--gw-side);
	--app-sidebar-active-component-bg: var(--gw-active);
}

body:has(#sidebar) {
	background: var(--gw-bg) !important;
	color: var(--gw-text);
}

body:has(#sidebar) .app-cover {
	background: var(--gw-bg) !important;
}

.app:has(> #sidebar), .app-content {
	background: var(--gw-bg) !important;
}

/** Header, sidebar **/
.app-header {
	background: var(--gw-side) !important;
	border-bottom: 1px solid var(--gw-border);
	box-shadow: none !important;
}

.app-sidebar, .app-sidebar-bg {
	background: var(--gw-side) !important;
	border-right: 1px solid var(--gw-border);
}

.app-sidebar .menu {
	padding: 0 8px !important;
}

.app-sidebar .menu .menu-item .menu-link {
	border-radius: 4px;
	margin: 0 0 1px;
	padding: 6px 10px;
	color: var(--gw-text-2);
}

.app-sidebar .menu .menu-item .menu-link .menu-text {
	font-size: 12.5px;
}

.app-sidebar .menu .menu-item .menu-link .menu-icon {
	color: var(--gw-text-3);
}

.app-sidebar .menu .menu-item .menu-link:hover {
	background: var(--gw-surface-2) !important;
	color: var(--gw-text);
}

.app-sidebar .menu .menu-item.active > .menu-link {
	background: var(--gw-active) !important;
	color: var(--gw-text) !important;
	font-weight: 500;
}

.app-sidebar .menu .menu-item.active > .menu-link .menu-icon {
	color: var(--gw-c1);
}

.app-sidebar .menu .menu-submenu {
	margin-left: 18px;
	border-left: 1px solid var(--gw-border-2);
	padding-left: 2px;
}

.app-sidebar .menu .menu-submenu .menu-item .menu-link {
	padding: 4px 10px;
	margin-left: 4px;
}

.app-sidebar .menu .menu-item .menu-badge {
	background: var(--gw-surface-2) !important;
	color: var(--gw-text-2) !important;
	font-family: var(--gw-mono);
	font-size: 10.5px;
	border-radius: 3px;
	padding: 0 6px;
	border: 1px solid var(--gw-border);
}

.app-sidebar-minify-btn {
	background: var(--gw-surface-2) !important;
	color: var(--gw-text-2) !important;
}

/** Forms **/
.form-control, .form-select {
	background-color: var(--gw-surface-2);
	border-color: var(--gw-border);
	color: var(--gw-text);
}

.form-control:focus, .form-select:focus {
	background-color: var(--gw-surface-2);
	color: var(--gw-text);
	border-color: var(--gw-c1);
}

.form-select option, .frq-datatable-inline-select option {
	background-color: var(--gw-surface) !important;
	color: var(--gw-text);
}

.dropdown-menu {
	background: var(--gw-surface);
	border: 1px solid var(--gw-border-2);
}

.select2-dropdown {
	background: var(--gw-surface) !important;
	border-color: var(--gw-border-2) !important;
	color: var(--gw-text);
}

.pagination .page-link {
	background: var(--gw-surface-2);
	border-color: var(--gw-border);
	color: var(--gw-text-2);
	font-family: var(--gw-mono);
	padding: 2px 9px;
}

.pagination .page-item.active .page-link {
	background: var(--gw-active);
	border-color: var(--gw-c1);
	color: var(--gw-text);
}

.btn-close {
	filter: invert(1) grayscale(1);
}

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: var(--gw-border-2); border-radius: 4px; border: 2px solid var(--gw-bg); }
::-webkit-scrollbar-track { background: transparent; }

/** Sidebar icons **/
.app-sidebar .menu .menu-item > .menu-link .menu-icon {
	width: 20px;
	margin-right: 10px;
	font-size: 12px;
	text-align: center;
}
.app-sidebar .menu .menu-item > .menu-link .menu-icon i:not([class*="text-"]) {
	color: var(--gw-text-3) !important;
}

/** Main menu icon colors **/
.app-sidebar .menu > .menu-item:nth-child(10n+1) > .menu-link .menu-icon i:not([class*="text-"]) { color: var(--gw-c1) !important; }
.app-sidebar .menu > .menu-item:nth-child(10n+2) > .menu-link .menu-icon i:not([class*="text-"]) { color: var(--gw-c2) !important; }
.app-sidebar .menu > .menu-item:nth-child(10n+3) > .menu-link .menu-icon i:not([class*="text-"]) { color: var(--gw-c3) !important; }
.app-sidebar .menu > .menu-item:nth-child(10n+4) > .menu-link .menu-icon i:not([class*="text-"]) { color: var(--gw-c4) !important; }
.app-sidebar .menu > .menu-item:nth-child(10n+5) > .menu-link .menu-icon i:not([class*="text-"]) { color: var(--gw-c6) !important; }
.app-sidebar .menu > .menu-item:nth-child(10n+6) > .menu-link .menu-icon i:not([class*="text-"]) { color: var(--gw-c7) !important; }
.app-sidebar .menu > .menu-item:nth-child(10n+7) > .menu-link .menu-icon i:not([class*="text-"]) { color: var(--gw-c9) !important; }
.app-sidebar .menu > .menu-item:nth-child(10n+8) > .menu-link .menu-icon i:not([class*="text-"]) { color: var(--gw-c10) !important; }
.app-sidebar .menu > .menu-item:nth-child(10n+9) > .menu-link .menu-icon i:not([class*="text-"]) { color: var(--gw-c8) !important; }
.app-sidebar .menu > .menu-item:nth-child(10n+10) > .menu-link .menu-icon i:not([class*="text-"]) { color: var(--gw-c5) !important; }

/** Submenu icon colors **/
.app-sidebar .menu-submenu > .menu-item:nth-child(10n+1) > .menu-link .menu-icon i:not([class*="text-"]) { color: var(--gw-c2) !important; }
.app-sidebar .menu-submenu > .menu-item:nth-child(10n+2) > .menu-link .menu-icon i:not([class*="text-"]) { color: var(--gw-c3) !important; }
.app-sidebar .menu-submenu > .menu-item:nth-child(10n+3) > .menu-link .menu-icon i:not([class*="text-"]) { color: var(--gw-c4) !important; }
.app-sidebar .menu-submenu > .menu-item:nth-child(10n+4) > .menu-link .menu-icon i:not([class*="text-"]) { color: var(--gw-c6) !important; }
.app-sidebar .menu-submenu > .menu-item:nth-child(10n+5) > .menu-link .menu-icon i:not([class*="text-"]) { color: var(--gw-c7) !important; }
.app-sidebar .menu-submenu > .menu-item:nth-child(10n+6) > .menu-link .menu-icon i:not([class*="text-"]) { color: var(--gw-c9) !important; }
.app-sidebar .menu-submenu > .menu-item:nth-child(10n+7) > .menu-link .menu-icon i:not([class*="text-"]) { color: var(--gw-c10) !important; }
.app-sidebar .menu-submenu > .menu-item:nth-child(10n+8) > .menu-link .menu-icon i:not([class*="text-"]) { color: var(--gw-c8) !important; }
.app-sidebar .menu-submenu > .menu-item:nth-child(10n+9) > .menu-link .menu-icon i:not([class*="text-"]) { color: var(--gw-c1) !important; }
.app-sidebar .menu-submenu > .menu-item:nth-child(10n+10) > .menu-link .menu-icon i:not([class*="text-"]) { color: var(--gw-c5) !important; }