/*
|--------------------------------------------------------------------------
| Dark mode button
|--------------------------------------------------------------------------
*/
.dark-mode-container {
	display: inline-block;
	margin-top: 3px;
	padding: 10px;
	border-radius: 50%;
}

.dark-mode-container:hover {
	background-color: #DEDEDE;
}

.dark-mode-container .dark-mode-image {
	width: 20px;
	filter: grayscale(1) brightness(70%);
}

.dark-mode-container:hover .dark-mode-image {
	width: 20px;
	height: 20px;
	filter: grayscale(1) brightness(20%);
}

/* Dark mode invert */
.dark-mode-container.dark-mode-on:hover {
	background-color: #29292c;
}

.dark-mode-container.dark-mode-on .dark-mode-image {
	filter: none;
}

/*
|--------------------------------------------------------------------------
| Dark mode layout
|--------------------------------------------------------------------------
*/
body.dark-mode-on {
	color: #FFFFFF;
	background-color: #2f2f32;
}

body.dark-mode-on a {
	color: #ff6d99;
}

body.dark-mode-on .tooltip-inner {
	background-color: #ff6d99;
	color: #FFF;
	padding: 0.2rem 0.75rem 0.3rem 0.75rem;
}

body.dark-mode-on .tooltip .arrow::before {
	border-top-color: #ff6d99;
}

body.dark-mode-on .h1, body.dark-mode-on .h2, body.dark-mode-on .h3, body.dark-mode-on .h4, body.dark-mode-on .h5, body.dark-mode-on .h6,
body.dark-mode-on h1, body.dark-mode-on h2, body.dark-mode-on h3, body.dark-mode-on h4, body.dark-mode-on h5, body.dark-mode-on h6 {
	color: #f6f6f6
}

body.dark-mode-on pre {
	background: #3b3b40;
	color: white;
}

body.dark-mode-on .navbar-minimalize.minimalize-styl-2 {
	color: #a3a5b9;
}

/* Navbar */
body.dark-mode-on .navbar-default {
	background: #2f2f32;
}

body.dark-mode-on #side-menu > li > a.special, body.dark-mode-on .navbar-default .nav > li > a.special {
	background: #29292c;
	color: #FFF;
}

body.dark-mode-on .nav-header {
	background-image: none;
	background-color: #2f2f32;
}

body.dark-mode-on .navbar-default .landing_link a, body.dark-mode-on .navbar-default .landing_link a:hover {
	background-color: #ff6d99 !important;
	color: #FFFFFF;
	cursor: default;
}

body.dark-mode-on .nav > li > a {
	color: #a2a5b9;
}

body.dark-mode-on .nav > li.active > a {
	color: #ff6d99;
}

body.dark-mode-on .nav > li.active,
body.dark-mode-on .navbar-default .nav > li > a:hover,
body.dark-mode-on .navbar-default .nav > li > a:focus,
body.dark-mode-on ul.nav-second-level {
	background-color: #2f2f32;
}

body.dark-mode-on .navbar-default .nav > li > a:hover, body.dark-mode-on .navbar-default .nav > li > a:focus {
	color: #ff6d99;
}

body.dark-mode-on .navbar-top-links .dropdown-menu {
	background: #2f2f32;
	border: 1px solid #4e4e53;
}

body.dark-mode-on .navbar-top-links .dropdown-menu li a {
	color: #a3a5b9;
}

body.dark-mode-on .dropdown-menu .dropdown-btn {
	width: 100%;
	font-size: 13px;
	padding-top: 10px;
	padding-bottom: 10px;
}

body.dark-mode-on .dropdown-menu .dropdown-btn:hover {
	background: #4e4e53;
}

/* Misc */
body.dark-mode-on table a {
	color: #ff6d99;
}

body.dark-mode-on .border-bottom {
	border-bottom: 1px solid #4e4e53 !important;
}

body.dark-mode-on .ibox-content, body.dark-mode-on .ibox-title, body.dark-mode-on .ibox-footer {
	border-radius: 0.25rem;
	border: none;
	margin-bottom: 3px;
	-webkit-box-shadow: 0 0.75rem 1.5rem rgb(18 38 63 / 3%);
	box-shadow: 0 0.75rem 1.5rem rgb(18 38 63 / 3%);
	background-color: #2f2f32;
}

body.dark-mode-on .loading-info {
	color: #FFFFFF;
	background-color: #3b3b3f;
	border: 1px solid #FFFFFF;
}

/* Colors */
body.dark-mode-on .text-muted {
	color: #a2a5b9 !important;
}

/* Backgrounds */
body.dark-mode-on .gray-bg {
	background-color: #3b3b40 !important;
}

body.dark-mode-on .bg-white {
	background-color: #313135 !important;
}

body.dark-mode-on .bg-light-grey {
	background-color: #29292c !important;
}

body.dark-mode-on .bg-light-info {
	background-color: #ff6d99;
}

body.dark-mode-on .bg-white, body.dark-mode-on .white-bg {
	background-color: #212529 !important;
}

body.dark-mode-on .bg-light-brown {
	background-color: #2b2a27 !important;
}

body.dark-mode-on .bg-light-green, body.dark-mode-on .bg-success-light {
	background-color: #2E7D32 !important;
}

body.dark-mode-on .bg-light-orange {
	background-color: #86280c !important;
}

body.dark-mode-on .bg-danger-light {
	background-color: #392326;
}

/*
|--------------------------------------------------------------------------
| Tables
|--------------------------------------------------------------------------
*/
body.dark-mode-on .table {
	color: #a3a5b9;
}

body.dark-mode-on .table > thead > tr > th,
body.dark-mode-on .table > tbody > tr > th,
body.dark-mode-on .table > tfoot > tr > th,
body.dark-mode-on .table > thead > tr > td,
body.dark-mode-on .table > tbody > tr > td,
body.dark-mode-on .table > tfoot > tr > td {
	border: 1px solid #4e4e53;
}

body.dark-mode-on .table-bordered > thead > tr > th, body.dark-mode-on .table-bordered > thead > tr > td {
	background-color: #2f2f32;
	border: 1px solid #4e4e53;
}

body.dark-mode-on .table-bordered, body.dark-mode-on .table.table-striped {
	border: 1px solid #4e4e53;
}

body.dark-mode-on .table-hover tbody tr:hover {
	color: #DDDDDD;
}

body.dark-mode-on .table-danger, body.dark-mode-on .table-danger > td, .table-danger > th {
	background-color: #2e1921;
}

body.dark-mode-on .table-warning, body.dark-mode-on .table-warning > td, .table-warning > th {
	background-color: #2e251a;
}

body.dark-mode-on .table-info, body.dark-mode-on .table-info > td, body.dark-mode-on .table-info > th {
	background-color: #1c2f33;
}

body.dark-mode-on .table-light, body.dark-mode-on .table-dark {
	--bs-table-bg: #4e4e53;
	--bs-table-striped-bg: #3c4357;
	--bs-table-striped-color: #fff;
	--bs-table-active-bg: #474d60;
	--bs-table-active-color: #fff;
	--bs-table-hover-bg: #41485b;
	--bs-table-hover-color: #fff;
}

body.dark-mode-on .table.table-hover tbody tr:hover {
	color: #a3a5b9;
	background-color: #36363a;
}

body.dark-mode-on .table > :not(caption) > * > * {
	padding: 0.75rem 0.75rem;
	background-color: var(--bs-table-bg);
	border-bottom-width: 1px;
	-webkit-box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);
	box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);
}

body.dark-mode-on .table th, body.dark-mode-on .table strong {
	font-weight: 600;
}

body.dark-mode-on .table .table-light {
	color: #a3a5b9;
	border-color: #4e4e53;
	background-color: #4e4e53;
}

body.dark-mode-on .table > thead > tr > th, body.dark-mode-on .table > tbody > tr > th, body.dark-mode-on .table > tfoot > tr > th {
	border: none;
}

body.dark-mode-on .table > thead > tr > td, body.dark-mode-on .table > tbody > tr > td, body.dark-mode-on .table > tfoot > tr > td {
	border: none;
	border-bottom: 1px solid #3b3b3f;
	line-height: 1.4;
}

/* Pagination */
body.dark-mode-on .pagination > li > a, body.dark-mode-on .pagination > li > span, body.dark-mode-on .pagination > li > button {
	background-color: #2f2f32;
	color: #aaaaaa;
	border: 1px solid #4e4e53 !important;
}

body.dark-mode-on .page-item.disabled .page-link {
	background-color: #2f2f32;
	color: #aaaaaa;
	border: 1px solid #4e4e53 !important;
}

body.dark-mode-on .page-item.active .page-link {
	background-color: #e8165f;
	border-color: #4e4e53 !important;
}

body.dark-mode-on .page-link:hover {
	background-color: #e8165f !important;
	color: #FFF !important;
}

body.dark-mode-on .page-item.active:hover .page-link {
	border-color: #4e4e53 !important;
	color: #FFF !important;
}

/* Form */
body.dark-mode-on .form-control, body.dark-mode-on .single-line {
	background-color: #3b3b40;
	border: 1px solid #4e4e53;
	color: #a3a5b9;
}

body.dark-mode-on .bootstrap-select.form-control .btn-light {
	background-color: #3b3b40;
	border: none;
	color: #a3a5b9;
}

body.dark-mode-on .form-control:disabled, body.dark-mode-on .form-control[readonly] {
	background-color: #2d2d31 !important;
}

body.dark-mode-on input:not(input[type=submit]) {
	background-color: #3b3b40;
	color: #a3a5b9;
	border: 1px solid #4e4e53;
}

body.dark-mode-on .input-group-addon {
	background-color: #2f2f32;
	border: 1px solid #4e4e53;
}

body.dark-mode-on .bootstrap-select .dropdown-menu {
	background-color: #3b3b40;
}

body.dark-mode-on .bootstrap-select .dropdown-menu.inner {
	color: #a3a5b9;
}

body.dark-mode-on .dropdown-menu > li > a:focus, body.dark-mode-on .dropdown-menu > li > a:hover {
	background-color: #313135;
	color: #a3a5b9;
}

body.dark-mode-on .dropdown-menu > li.selected > a {
	color: #FFFFFF;
}

body.dark-mode-on .dropdown-menu > li > a {
	color: #a3a5b9;
}

body.dark-mode-on .input-group .input-group-text {
	background-color: #2f2f32;
	border-color: #4e4e53;
}

body.dark-mode-on .custom-file-label {
	background: #29292c;
	color: #a3a5b9;
	border: 1px solid #4e4e53;
}

body.dark-mode-on .custom-file-label::after {
	background: #29292c;
	color: #a3a5b9;
	cursor: pointer !important;
}

/* Buttons */
body.dark-mode-on .btn {
	color: #FFFFFF;
}

body.dark-mode-on .btn.btn-default {
	background-color: #3b3b40;
	border: 1px solid #4e4e53;
}

/* Custom color buttons */
body.dark-mode-on .btn.btn-grey {
	color: #FFF;
	background-color: #3b3b3f;
	border-color: #29292c;
}

body.dark-mode-on .btn.btn-grey:hover {
	color: #fff;
	background-color: #29292c;
	border-color: #3b3b40;
}

body.dark-mode-on .btn.btn-primary {
	background-color: #00796B;
	border-color: #00796B;
	color: #FFFFFF;
}

body.dark-mode-on .btn-primary:hover, body.dark-mode-on .btn-primary:focus, body.dark-mode-on .btn-primary:active, body.dark-mode-on .btn-primary.active, .open .dropdown-togglebody.dark-mode-on .btn-primary, body.dark-mode-on .btn-primary:active:focus, body.dark-mode-on .btn-primary:active:hover, body.dark-mode-on .btn-primary.active:hover, body.dark-mode-on .btn-primary.active:focus {
	background-color: #004D40;
	border-color: #004D40;
	color: #FFFFFF;
}

body.dark-mode-on .btn.btn-info {
	background-color: #e8165f;
	border-color: #e8165f;
	color: #FFFFFF;
}

body.dark-mode-on .btn-info:hover, body.dark-mode-on .btn-info:focus, body.dark-mode-on .btn-info:active, body.dark-mode-on .btn-info.active, .open .dropdown-togglebody.dark-mode-on .btn-info, body.dark-mode-on .btn-info:active:focus, body.dark-mode-on .btn-info:active:hover, body.dark-mode-on .btn-info.active:hover, body.dark-mode-on .btn-info.active:focus {
	background-color: #e8165f;
	border-color: #e8165f;
	color: #FFFFFF;
}

body.dark-mode-on .btn.btn-success {
	background-color: #388E3C;
	border-color: #388E3C;
	color: #FFFFFF;
}

body.dark-mode-on .btn-success:hover, body.dark-mode-on .btn-success:focus, body.dark-mode-on .btn-success:active, body.dark-mode-on .btn-success.active, .open .dropdown-togglebody.dark-mode-on .btn-success, body.dark-mode-on .btn-success:active:focus, body.dark-mode-on .btn-success:active:hover, body.dark-mode-on .btn-success.active:hover, body.dark-mode-on .btn-success.active:focus {
	background-color: #1B5E20;
	border-color: #1B5E20;
	color: #FFFFFF;
}

body.dark-mode-on .btn.btn-warning {
	background-color: #c1611f;
	border-color: #c1611f;
	color: #FFFFFF;
}

body.dark-mode-on .btn-warning:hover, body.dark-mode-on .btn-warning:focus, body.dark-mode-on .btn-warning:active, body.dark-mode-on .btn-warning.active, .open .dropdown-togglebody.dark-mode-on .btn-warning, body.dark-mode-on .btn-warning:active:focus, body.dark-mode-on .btn-warning:active:hover, body.dark-mode-on .btn-warning.active:hover, body.dark-mode-on .btn-warning.active:focus {
	background-color: #964e1c;
	border-color: #964e1c;
	color: #FFFFFF;
}

body.dark-mode-on .btn.btn-danger {
	background-color: #ed5565;
	border-color: #ed5565;
	color: #FFFFFF;
}

body.dark-mode-on .btn-danger:hover, body.dark-mode-on .btn-danger:focus, body.dark-mode-on .btn-danger:active, body.dark-mode-on .btn-danger.active, .open .dropdown-togglebody.dark-mode-on .btn-danger, body.dark-mode-on .btn-danger:active:focus, body.dark-mode-on .btn-danger:active:hover, body.dark-mode-on .btn-danger.active:hover, body.dark-mode-on .btn-danger.active:focus {
	background-color: #d24958;
	border-color: #d24958;
	color: #FFFFFF;
}

/* Alerts */
body.dark-mode-on .alert-danger {
	color: #ffffff;
	background-color: #ed5565;
	border: none;
}

body.dark-mode-on .alert-danger a {
	color: #85082e;
}

body.dark-mode-on .alert-warning {
	color: #ffffff;
	background-color: #c1611f;
	border: none;
}

body.dark-mode-on .alert-warning a {
	color: #391d0a;
}

body.dark-mode-on .alert-success {
	color: #ffffff;
	background-color: #1B5E20;
	border: none;
}

body.dark-mode-on .server-time {
	background-color: #2f2f32;
	border: 1px solid #4e4e53
}

/* Date Range Picker */
body.dark-mode-on .predefined-range {
	border: 1px solid #34383d;
	background-color: #171a1d;
}

body.dark-mode-on .daterangepicker {
	color: #222222;
}

body.dark-mode-on .android-preview {
	color: #333333;
}

/* Dropdown */
body.dark-mode-on .dropdown-menu {
	color: #333333;
}

/* Modal */
body.dark-mode-on .modal-header .close {
	color: #FFFFFF;
}

body.dark-mode-on .modal-content {
	background-color: #2f2f32;
	color: #FFFFFF !important;
	box-shadow: 0 1px 3px rgb(12 13 15);
}

body.dark-mode-on .modal-header {
	border-bottom: 1px solid #19191b;
}

body.dark-mode-on .modal-footer {
	border-top: 1px solid #19191b;
}

/* Collapse */
.collapse-absolute {
	background-color: #2f2f32;
	border: 1px solid #3b3b40;
}

/*
|--------------------------------------------------------------------------
| MSP
|--------------------------------------------------------------------------
*/

body.dark-mode-on .msp-page-wrapper {
	border-left: 1px solid rgb(49 49 53);
	border-image: linear-gradient(180deg, rgb(49 49 53) 85%, rgb(59 59 64) 100%) 1%;
}

body.dark-mode-on .msp-navbar ul li {
	border-bottom: 1px solid #313135;
}

body.dark-mode-on .msp-navbar ul li:first-child {
	border-top: 1px solid #34383d;
}

body.dark-mode-on .msp-navbar ul li:hover {
	background: #2f2f32;
}

body.dark-mode-on .msp-navbar ul li.active {
	background: rgb(59, 59, 63);
	background: linear-gradient(90deg, rgb(47, 47, 50) 70%, rgb(59, 59, 63) 100%);
}

body.dark-mode-on .msp-navbar ul li a {
	padding: 15px 20px;
	display: block;
	color: #FFFFFF;
}

/*
|--------------------------------------------------------------------------
| jQuery UI Datepicker
|--------------------------------------------------------------------------
*/
body.dark-mode-on .ui-widget.ui-widget-content {
	border: 1px solid #3b3b40;
	background-color: #2f2f32;
	color: #a3a5b9;
	font-family: "Poppins", sans-serif;
	-webkit-box-shadow: 0 0.75rem 1.5rem rgb(18 38 63 / 3%);
	box-shadow: 0 0.75rem 1.5rem rgb(18 38 63 / 3%);
}

body.dark-mode-on .ui-widget input, body.dark-mode-on .ui-widget select, body.dark-mode-on .ui-widget textarea,
body.dark-mode-on .ui-widget button {
	font-family: "Poppins", sans-serif;
	font-size: 1em;
}

body.dark-mode-on .ui-state-default, body.dark-mode-on .ui-widget-content .ui-state-default,
body.dark-mode-on .ui-widget-header .ui-state-default, .ui-button {
	border: 2px solid #2f2f32;
	background: #2f2f32;
	font-weight: normal;
	color: #a3a5b9;
	text-shadow: none;
	border-radius: 3px;
	padding: 3px;
	text-align: center;
}

body.dark-mode-on .ui-button.ui-state-disabled:hover {
	border: 2px solid #3b3b40;
	background: #3b3b40;
}

body.dark-mode-on .ui-state-hover, body.dark-mode-on .ui-widget-content .ui-state-hover, body.dark-mode-on .ui-widget-header .ui-state-hover,
body.dark-mode-on .ui-state-focus, body.dark-mode-on .ui-widget-content .ui-state-focus, body.dark-mode-on .ui-widget-header .ui-state-focus {
	border: 2px solid #3b3b40;
	background: #3b3b40;
	font-weight: normal;
	color: #a3a5b9;
}

body.dark-mode-on .ui-state-active, body.dark-mode-on .ui-widget-content .ui-state-active, body.dark-mode-on .ui-widget-header,
body.dark-mode-on .ui-state-active, body.dark-mode-on a.ui-button:active, body.dark-mode-on .ui-button:active,
body.dark-mode-on .ui-button.ui-state-active:hover {
	border: 1px solid #e8165f;
	background: #e8165f;
	font-weight: normal;
	color: #ffffff;
	padding: 3px;
	text-align: center;
}

body.dark-mode-on .ui-widget-header {
	border: 1px solid #2f2f32;
	background: #2f2f32;
	color: #495057;
	font-weight: bold;
}

body.dark-mode-on .ui-datepicker .ui-datepicker-title select {
	color: #a3a5b9;
	background: #2f2f32;
	border: 1px solid #3b3b40;
}

body.dark-mode-on .ui-datepicker .ui-datepicker-prev span, body.dark-mode-on .ui-datepicker .ui-datepicker-next span {
	filter: brightness(10);
}

/*
|--------------------------------------------------------------------------
| Date range picker
|--------------------------------------------------------------------------
*/
body.dark-mode-on .daterangepicker {
	color: #a3a5b9;
	background-color: #29292c;
}

body.dark-mode-on .daterangepicker .calendar-table {
	background: #29292c;
	border: none;
}

body.dark-mode-on .daterangepicker td.off, body.dark-mode-on .daterangepicker td.off.in-range, body.dark-mode-on .daterangepicker td.off.start-date, body.dark-mode-on .daterangepicker td.off.end-date {
	background-color: #29292c;
}

body.dark-mode-on .daterangepicker .ranges li:hover {
	background-color: #3b3b40;
}

body.dark-mode-on .daterangepicker td.available:hover, body.dark-mode-on .daterangepicker th.available:hover {
	background-color: #29292c;
}

body.dark-mode-on .daterangepicker td.in-range {
	background-color: #3b3b40;
}

body.dark-mode-on .daterangepicker select.monthselect, body.dark-mode-on .daterangepicker select.yearselect {
	background-color: #2f2f32;
	color: #a3a5b9;
	border: 1px solid #29292c;
}

body.dark-mode-on .predefined-range {
	background-color: #3b3b40;
	color: #a3a5b9;
	border-radius: 0.25em;
	border: 1px solid #4e4e53;
	padding: 6px 12px;
}

/*
|--------------------------------------------------------------------------
| Login
|--------------------------------------------------------------------------
*/
body.dark-mode-on .loginscreen.middle-box {
	margin-top: 10vh;
	width: 400px;
	background: #29292c;
	border-radius: 0.25em;
	-webkit-box-shadow: 0 0.75rem 1.5rem rgb(18 38 63 / 3%);
	box-shadow: 0 0.75rem 1.5rem rgb(18 38 63 / 3%);
	padding: 0;
}

body.dark-mode-on .loginscreen.middle-box strong {
	font-weight: 400;
}

body.dark-mode-on .bg-login {
	background: url(../images/undraw/undraw_login.svg) 96% 103% no-repeat;
	background-size: 35%;
	overflow: hidden;
}

body.dark-mode-on .bg-forgot-password {
	background: url(../images/undraw/undraw_forgot_password.svg) 96% 103% no-repeat;
	background-size: 35%;
	overflow: hidden;
}

body.dark-mode-on .middle-box-header {
	padding: 40px;
	background-color: #202022;
	border-top-left-radius: 0.25em;
	border-top-right-radius: 0.25em;
}

body.dark-mode-on .middle-box-content {
	padding: 25px;
}