body {
	--background:rgb(30, 144, 255);
	--backgroundGradient: rgb(30, 144, 255);
	--shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
	--hover: rgb(86, 172, 255);
	--linkColor: rgb(30, 144, 255);
	--borderColor: rgb(30, 144, 255);
	--sidebarTextColor: rgb(220,220,220);
	--default: rgb(115,115,115);
	--defaultGradient: rgb(115,115,115);
	--primary: rgb(0,123,255);
	--primaryGradient: rgb(0,123,255);
	--warning: rgb(255, 184, 79);
	--warningGradient: rgb(255, 184, 79);
	--success: rgb(0,166,90);
	--successGradient: rgb(0,166,90);
	--info: rgb(91,134,229);
	--infoGradient: rgb(91,134,229);
	--danger: rgb(221,75,48);
	--dangerGradient: rgb(221,75,48);
	--textColor: #4a3f35;
	
	color: var(--textColor) !important;
	background-color: #d9d9d9 !important;
	background-image: url("/images/new-back.png");
	/* This is mostly intended for prototyping; please download the pattern and re-host for production environments. Thank you! */
	font-family: Arial, sans-serif;
}

.dark-mode {
	--background: #000;
	--backgroundGradient: #000;
	--shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
	--hover: rgb(255, 194, 102);
	--linkColor: #fff;
	--borderColor: #fff;
	--sidebarTextColor: rgb(245, 245, 245);
	--default: rgb(115,115,115);
	--defaultGradient: rgb(115,115,115);
	--primary: rgb(0,123,255);
	--primaryGradient: rgb(0,123,255);
	--warning: #fff;
	--warningGradient: #fff;
	--success: rgb(0,166,90);
	--successGradient: rgb(0,166,90);
	--info: rgb(91,134,229);
	--infoGradient: rgb(91,134,229);
	--danger: rgb(221,75,48);
	--dangerGradient: rgb(221,75,48);
	--textColor: #4a3f35;
}

* {
	-webkit-transition: all 0.3s ease-out;
	-moz-transition: all 0.3s ease-out;
	-o-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
}

@keyframes flickerAnimation {
	0% {
		opacity: 1;
	}

	50% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

/**/
@-webkit-keyframes fade-in {
	0% { opacity: 0; -webkit-transform: scale(.1);}
	100% {-webkit-transform: scale(1); opacity: 1;}
}

.fadeIn {
	opacity: 1;
}
.fadeIn.one { 
	-webkit-animation: fade-in .5s ease-in !important;
}  
.fadeIn.two { 
	-webkit-animation: fade-in .7s ease-in !important;
}  
.fadeIn.three { 
	-webkit-animation: fade-in .9s ease-in !important;
}
.fadeIn.four { 
	-webkit-animation: fade-in 1.1s ease-in !important;
}
.fadeIn.five { 
	-webkit-animation: fade-in 1.3s ease-in !important;
 }
.fadeIn.six { 
	-webkit-animation: fade-in 1.5s ease-in !important;
}
.fadeIn.seven { 
	 -webkit-animation: fade-in 1.7s ease-in !important;
}
.fadeIn.seven { 
	 -webkit-animation: fade-in 1.9s ease-in;
}

.sidebar-mini .main-sidebar .sidebar .logo .logo-mini {
	display: none !important;
}

.sidebar-mini .main-sidebar .sidebar .logo .logo-lg {
	display: block !important;
}

.sidebar-mini.sidebar-collapse .main-sidebar .sidebar .logo .logo-lg {
	display: none !important;
}

.sidebar-mini.sidebar-collapse .main-sidebar .sidebar .logo .logo-mini {
	display: block !important;
}

#tog-cont {
    border: 2px solid #eee;
}

#tog-cont:hover {
    border: 2px solid var(--linkColor);
}

.notif-box {
    z-index: 9999; 
    position: fixed; 
    right: -460px;
	width: 460px;
	top: 15px;
}

.content-header .sidebar-toggle::before {
	content: "\f009" !important;
	font-family: FontAwesome;
	color: var(--backgroundGradient);
	font-weight: bold;
}

.content-header .sidebar-toggle {
    border-radius: 50%;
    width: 30px;
    height: 30px;
    background-color: #fff !important;
    /* background-color: #b3e6ff !important; */
    margin: 15px;
    padding: 5px 8px !important;
    margin-left: 10px !important;
	box-shadow: var(--shadow) !important;
}

.main-header {
	/* opacity: 0; */
	display: none !important;
}

.skin-blue-light .main-header .navbar {
	background-color: var(--background) !important;
	box-shadow: var(--shadow) !important;
}

.content, .content-header {
	margin-left: 30px !important;
}

.circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
	margin: 10px 25px;background: var(--background) !important;
	background: var(--backgroundGradient) !important;
    margin: 20px auto 40px;
    color: #fff;
    font-size: 45px;
    padding: 18px;
}

.sidebar-menu {
	height: 80vh !important;
	overflow-y: auto !important;
	overflow-x: hidden !important;
	scrollbar-color: rgba(0, 0, 0, 0.5) transparent;
	scrollbar-width: thin;
}


.sidebar-menu::-webkit-scrollbar, body::-webkit-scrollbar {
	width: 5px !important;               /* width of the entire scrollbar */
}
.sidebar-menu::-webkit-scrollbar-track, body::-webkit-scrollbar-track {
	background: transparent;        /* color of the tracking area */
}
.sidebar-menu::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb {
	background-color: rgba(0, 0, 0, 0.5);    /* color of the scroll thumb */
	border-radius: 5px;       /* roundness of the scroll thumb */
	border: 1px solid rgba(0, 0, 0, 0.5);  /* creates padding around scroll thumb */
}

body {
	scrollbar-color: rgba(0, 0, 0, 0.5) transparent;
	scrollbar-width: thin;
}


.sidebar-mini.sidebar-collapse .content-wrapper {
	margin-left: 25px !important
}

.fixed .content-wrapper {
	padding-top: 0 !important;
}

.skin-blue-light .wrapper, .skin-blue-light .left-side {
	background-color: transparent !important;
}

.content-wrapper, .right-side {
	background-color: transparent !important;
}

.main-sidebar {
	min-height: 95vh !important;
	margin: 20px;
	background: var(--backgroundr) !important;
	background: var(--backgroundGradient) !important;
	padding-top: 0px !important;
	border-radius: 5px;
	box-shadow: var(--shadow) !important;
	
	-webkit-transition: all 0.2s ease-out !important;
	-moz-transition: all 0.2s ease-out !important;
	-o-transition: all 0.2s ease-out !important;
	transition: all 0.2s ease-out !important;
}

.sidebar a, .skin-blue-light .treeview-menu > li > a {
	color: var(--sidebarTextColor) !important;
}

.sidebar-menu .treeview-menu > li > a {
    padding: 5px 5px 5px 33px !important;
}

.sidebar {
    padding-bottom: 20px !important;
}

.skin-blue-light .sidebar-menu > li:hover > a, .skin-blue-light .sidebar-menu > li.active > a {
	background: var(--hover) !important;
	border-left: 2px solid var(--sidebarTextColor) !important;
}

.sidebar-menu .treeview-menu > li:hover > a, .sidebar-menu .treeview-menu > li.active > a {
	background: var(--hover) !important;
	font-weight: bold;
}

.sidebar-menu .treeview-menu > li a::before {
    content: '';
    position: absolute;
    width: 13px;
    height: 102%;
    left: 16px;
    top: -16px;
    border-left: 1px solid var(--sidebarTextColor);
    border-bottom: 1px solid var(--sidebarTextColor);
}

.skin-blue-light .sidebar-menu > li > .treeview-menu {
	background: var(--hover) !important;
}

.footer {
	background: var(--background) !important;
	background: var(--backgroundGradient) !important;
	border-radius: 5px 8px 0 0;
	box-shadow: var(--shadow) !important;
	/* position: absolute;  */
	bottom: 0; 
	width: 100%;
	z-index: 0 !important;
	margin-left: 0px !important;
	padding-left: 10px;
	padding-right: 10px;
	color: var(--sidebarTextColor) !important;
}

.footer a {
	color: #fff;
}

.user-box {
	background: var(--background) !important;
	background: var(--backgroundGradient) !important;
	padding: 5px 5px 5px 20px;
	margin-top: -45px;
	margin-right: 110px;
	border-radius: 5px;
	font-size: 14px;
	font-weight: bold;
    box-shadow: var(--shadow) !important;
}

.user-box .dropdown-toggle {
	color: var(--sidebarTextColor) !important;
}

.user-box img {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	margin-left: 10px;
}

.user-box > .dropdown-menu {
	background: var(--backgroundGradient) !important;
	border: none !important;
	width: 320px !important;
	box-shadow: var(--shadow) !important;
	border-radius: 5px !important;
	padding: 10px !important;
	-webkit-animation: fade-in .2s ease-in !important;
	color: var(--sidebarTextColor);
}

.dropdown-menu > li > a {
	padding: 10px;
	border-radius: 5px !important;
	color: var(--sidebarTextColor) !important;
}

.dropdown-menu > li > a:hover {
	background: var(--hover) !important;
	font-weight: bold;

}

.panel-primary {
    border-color: transparent !important;
}

.panel-primary > .panel-heading {
    background-color: #fff !important;
    border-color: #fff !important;
	border-radius: 5px !important;
	color: var(--backgroundGradient) !important;
}

.panel-title {
	font-weight: bold !important;
}

.panel-footer {
    padding: 10px 15px;
    background-color: rgba(245, 245, 245, 0.8) !important;
    border-top: none !important;
    border-bottom-right-radius: 10px !important;
    border-bottom-left-radius: 15px !important;
}

.kv-panel-after {
    background: rgba(245, 245, 245, 0.8) !important;
}

.btn-scr {
	position: fixed;
	bottom: 50px;
	right: 50px;
	z-index: 99;
	display:none;
}

.btn-scr button {
	width: 45px;
	height: 45px;
	background: var(--background) !important;
	background: var(--backgroundGradient) !important;
	border-radius: 50%;
	border: 1px solid #fff;
	color: #fff !important;
  	font-size: 2em;
	padding-bottom: 4px;
}

.btn-scr button:hover {
	background: #fff !important;
	color: var(--linkColor) !important;
	border: 1px solid var(--borderColor);
}


.btn-warning {
	background: transparent !important;
	font-weight: bold;
    color: var(--warning) !important;
}

.btn-warning:hover {
	background: var(--warning) !important;
	background: var(--warningGradient) !important;
	border: 1px solid var(--warning);
	color: #fff !important;
}

.btn-info {
	background: transparent !important;
	font-weight: bold;
    color: var(--info) !important;
}

.btn-info:hover {
    background: var(--info) !important;
	background: var(--infoGradient) !important;
	border: 1px solid var(--info);
	color: #fff !important;
}

.btn-danger {
	background: transparent !important;
	font-weight: bold;
    color: var(--danger) !important;
}

.btn-danger:hover {
    background: var(--danger) !important;
	background: var(--dangerGradient) !important;
	border: 1px solid var(--danger);
	color: #fff !important;
}

.btn-success {
	background: transparent !important;
	font-weight: bold;
    color: var(--success) !important;
}

.btn-success:hover {
    background: var(--success) !important;
	background: var(--successGradient) !important;
	border: 1px solid var(--success);
	color: #fff !important;
}

.btn-default {
	background: transparent !important;
	font-weight: bold;
	border: 1px solid var(--default);
    color: var(--default) !important;
}

.btn-default:hover {
	background: var(--default) !important;
	background: var(--defaultGradient) !important;
	border: 1px solid var(--default);
	color: #fff !important;
}

.btn-primary {
	background: transparent !important;
	font-weight: bold;
	border: 1px solid var(--primary);
    color: var(--primary) !important;
}

.btn-primary:hover {
	background: var(--primary) !important;
	background: var(--primaryGradient) !important;
	border: 1px solid var(--primary);
	color: #fff !important;
}

.modal-content {
	border-radius: 3px !important;
	box-shadow: var(--shadow) !important;
	border-left: 5px solid var(--background) !important;
}

.modal-header {
	/* background: var(--backgroundGradient) !important;
	color: #fff !important; */
	border-radius: 5px !important;
}

.modal-header .close {
    margin-top: -2px;
    background: var(--danger);
    width: 35px;
    height: 35px;
    border-radius: 50%;
    opacity: 1;
    position: absolute;
    right: -15px;
    top: -10px;
    color: #fff;
	box-shadow: var(--shadow) !important;
}

.modal-header .close:hover {
    background: #fff !important;
	color: var(--danger) !important;
	border: 3px solid var(--danger);
}

.modal-dialog {
    width: 750px !important;
    margin: 85px auto !important;
}

[class^='select2'] {
	border-radius: 5px !important;
	color: #555 !important;
}

.form-control {
	border-radius: 5px !important;
	color: #555 !important;
}

.cropcircle{
    width: 100px;
    height: 100px;
    position: relative;
    overflow: hidden;
    border-radius: 50%;
    text-align: center;
}

.cropcircle img {
    display: inline;
    margin: 0 auto;
    height: 100%;
    width: auto;
}

.nicescroll-rails-vr .nicescroll-cursors {
	/* background-image: linear-gradient(45deg, rgba(247, 183, 51, 0.9
	) 25%, rgba(248,54,0.5) 25%, rgba(248,54,0.5) 50%, rgba(247, 183, 51, 0.9) 50%, rgba(247, 183, 51, 0.9) 75%, rgba(248,54,0.5) 75%, rgba(248,54,0.5)); */
	background-color: rgba(0, 0, 0, 0.5) !important;
	animation: pace-stripe-animation 10s linear infinite !important;
    background-size: 20px 20px;
 }
  
@keyframes pace-stripe-animation {
   from { background-position-y: 0; }
   to   { background-position-y: 100%; }
}  

.modal-content .box {
    box-shadow: none !important;
}

.modal-content .btn-group {
    background: #fff !important;
}

.welcome-link {
	text-align: center; 
	padding: 10px;
	font-weight: bold;
	font-size: 17px;
	width: 100%;
	display: block;
	border-radius: 5px !important;
}

.welcome-link:hover {
	background: var(--hover) !important;
	border-left: 2px solid var(--sidebarTextColor) !important;
	font-weight: bold;
}
/**/

.nav-tabs-custom > .nav-tabs > li.active {
	border-top-color: var(--linkColor) !important;
}

.box, .alert, .panel {
    box-shadow: var(--shadow) !important;
	border-radius: 5px !important;
    border-top: none !important;
}

.box:before,
.box:after,
.box > :first-child:before,
.box > :first-child:after {
  position: absolute;
  width: 25px;
  height: 25px;
  border-color: var(--background) !important; /* or whatever colour */
  border-style: solid; /* or whatever style */
  content: " ";
}

.box:before {
  top: 0;
  left: 0;
  border-width: 0;
}
.box:after {
  top: 0;
  right: 0;
  border-width: 3px 3px 0 0;
  border-radius: 0 5px 0;
}
.box > :first-child:before {
  bottom: 0;
  right: 0;
  border-width: 0;
}
.box > :first-child:after {
  bottom: 0;
  left: 0;
  border-width: 0;
}

.entry:not(:first-of-type)
{
    margin-top: 10px;
}

.glyphicon
{
    font-size: 12px;
}

@media (max-width: 640px) {
	#kucinghilang {
		display: none;
	}

	#crud-datatable-container table th {
		font-size: 10px;
	}
}

.kv-grid-table a, .div-box a, td a {
	color: var(--linkColor) !important;
}

.pagination {
	margin: -10px -5px 0px !important;
}

.pagination > .active >  a {
	background-color: var(--linkColor);
	border-color: var(--linkColor);
}

.pagination > .active >  a:hover {
	background-color: var(--linkColor);
	border-color: var(--linkColor);
}

.wizard h3 {
	margin-top: -10px;
}

.divider {
	color: #2c3b41; 
	height: 1px; 
	background: var(--sidebarTextColor); 
	margin-right: 0px !important;
	opacity: 0.2;
}

.nav-item {
	width: 25% !important;
}

#smartwizard-bc .nav-item {
	width: 33% !important;
}

.kv-md-hint {
	display: none !important;
}

.kv-md-footer button {
    font-size: 12px !important;
}

#w1 .pagination {
    margin: 0 !important;
    float: right;
}


.select2-results ul li:hover {
	background-color: var(--hover) !important;
	color: #fff !important;
} 

.select2-results ul li {
    background-color: #fff !important;
}

.select2-container--krajee.select2-container--open .select2-selection, 
.select2-container--krajee .select2-selection:focus,
.select2-container--krajee .select2-dropdown,
.select2-container--krajee .select2-search--dropdown .select2-search__field {
	border-color: var(--linkColor) !important;
}

.select2-container--bootstrap .select2-selection--single {
	padding: 11px 24px 6px 12px !important;
}

/* .table > tbody > tr.info > td {
	background: #fff;
} */

@media print
{
    .table-striped > tbody > tr:nth-of-type(odd) > td {
        background-color: #f9f9f9 !important;
    }
}

.level {
	border: 1px solid #e5e5e5;
	border-radius: 5px;
	text-align: center;
	margin: 5px;
}

.current-level {
	border: 1px solid var(--background);
	border-radius: 5px;
	background: var(--background);
	text-align: center;
	margin: 5px;
	color: #fff;
}

.select2-search__field, .select2-search__field:focus {
	width: 100% !important;
	border: none !important;
}
.s2-togall-button {
	color: var(--linkColor) !important;
}

#smartwizard .panel {
	box-shadow: none !important;
}

.tool-box {
	background: var(--backgroundGradient) !important;
	padding: 5px 5px 5px 20px;
	border-radius: 5px;
	font-size: 14px;
	font-weight: bold;
	box-shadow: var(--shadow) !important;
	position: absolute;
	right: 15px;
	top: 21px;
	height: 40px;
	width: 98px;
}

.notification {
	margin-top: -27px;
	margin-left: 45px;
	position: absolute;
	font-size: 23px;
}

.notification a {
	color: #fff !important;
}

.notification .fa-bell {
	animation: flickerAnimation 2s;
	animation-iteration-count: infinite;
}

.alert-warning {
	background-color: var(--backgroundGradient) !important;
}

.box .panel {
	box-shadow: none !important;
}

.kv-panel-pager {
	text-align: right;
}

.select2-container, .select2-dropdown, .select2-search, .select2-results {
	-webkit-transition: none !important;
	-moz-transition: none !important;
	-ms-transition: none !important;
	-o-transition: none !important;
	transition: none !important;
}

.nav-tabs-custom > .nav-tabs > li.active > a, .nav-tabs-custom > .nav-tabs > li.active:hover > a {
	background-color: var(--backgroundGradient) !important;
	color: #fff !important;
	border-radius: 0 0 10px 10px !important;
	border: 1px solid var(--backgroundGradient) !important;
	margin: 0 20px !important;
}

.box, .panel, .tab-content {
	/* background-image: url('/images/wave.png') !important; */
    background-size: 500px auto !important;
    background-position: right bottom !important;
    background-repeat: no-repeat !important;
    background-color: #fff !important;
}

.table-striped > tbody > tr:nth-of-type(2n+1) {
	background-color: rgba(249, 249, 249, 0.8) !important;
}

.box .box, .box .panel, .box .tab-content {
    background: transparent !important;
}

.row-flex {
    display: flex;
    flex-wrap: wrap;
}

.tab-pane {
	min-height: 350px !important;
}

.input-group input {
	border-top-left-radius: 1px !important;
	border-bottom-left-radius: 1px !important;
}

#head {
	margin: 40px 0 20px;
}

.datepicker-orient-left, .datetimepicker, .daterangepicker {
	width: auto !important;
	background: #fff !important;
	color: #000;
	border: 3px solid var(--backgroundGradient) !important;
}

td.day.today.active, 
td.day.active, 
span.hour.active, 
span.minute.active,
td.today.weekend.active.start-date.available.in-range,
td.today.weekend.active.start-date.available,
td.weekend.active.end-date.in-range.available,
td.active.end-date.in-range.available {
	background-image: none !important;
	background-color: var(--backgroundGradient) !important;
	color: #fff !important;
}

.daterangepicker .drp-buttons {
    background: var(--backgroundGradient) !important;
}

.daterangepicker .drp-selected{
	color: #fff !important;
}

td.day.today {
	background-image: none !important;
	background-color: #eee !important;
}

.bootstrap-timepicker-widget table td a {
	color: var(--backgroundGradient) !important;
}

.bootstrap-timepicker-widget.dropdown-menu.open {
	width: 200px !important;
	border: 3px solid var(--backgroundGradient);
}

.datepicker table tr td.today {
	background-color: var(--backgroundGradient) !important;
	color: #fff !important;
}

.datepicker table tr td span:hover, .datepicker table tr td span.focused {
    background: var(--backgroundGradient) !important;
    color: #fff !important;
}

.box .alert {
	box-shadow: none !important;
}

/* MEDIA */
@media (max-width: 640px) {
	.main-sidebar {
		margin: 10px -10px;
	}

	.sidebar-mini.sidebar-collapse {
		margin-left: -30px !important;
	}

	.user-box {
		display: none;
	}

	.notif-box {
        width: 95%;
	}
	
	.content, .content-header {
		margin-left: 0px !important;
	}
	
	.tool-box {
		right: 15px;
		width: 60px !important;
	}

	.tool-box .notification {
		display: none;
	}

	.modal-dialog {
		width: 95% !important;
	}
}






/** DARK MODE */
.dark-mode {
	--background: #2a2f32;
	--backgroundGradient: #2a2f32;
	--shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
	--hover: #2a2f32;
	--linkColor: #fff;
	--borderColor: #fff;
	--sidebarTextColor: #fff;
	--textColor: #4a3f35;

	color: #fff !important;
	background: #2a2f32 !important;
}

.dark-mode .main-sidebar {
	border: 1px solid #fff !important;
}

.dark-mode .box {
    background: var(--backgroundGradient) !important;
    border: 1px solid #fff;
	border-top-color: rgb(255, 255, 255);
	border-top-style: solid;
	border-top-width: 1px;
	border-top: 1px solid #fff !important;
	color: #fff !important;
}

.dark-mode .box-header {
	color: #fff !important;
}

.dark-mode .box:before,
.dark-mode .box:after,
.dark-mode .box > :first-child:before,
.dark-mode .box > :first-child:after {
  position: absolute;
  width: 0;
  height: 0;
  border-color: none !important; /* or whatever colour */
  border-style: solid; /* or whatever style */
  content: " ";
}

.dark-mode .panel {
    background: var(--backgroundGradient) !important;
    border: 1px solid #fff !important;
}

.dark-mode .panel-primary > .panel-heading {
    background-color: var(--backgroundGradient) !important;
    border-color: #fff !important;
    border-radius: 5px !important;
    color: #fff !important;
}

.dark-mode .table-striped > tbody > tr:nth-of-type(2n+1) {
    background-color: var(--backgroundGradient) !important;
}

.dark-mode .table > tbody > tr.warning > td {
	background: var(--backgroundGradient) !important;
}

.dark-mode .pagination > .active > a {
    background-color: var(--backgroundGradient) !important;
    border-color: #fff !important;
}

.dark-mode .panel-footer {
    background-color: var(--backgroundGradient) !important;
    border-top: 1px solid #fff !important;
}

.dark-mode .user-box, .dark-mode .tool-box {
	border: 1px solid #fff !important;
}

.dark-mode .dropdown-menu {
	border: 1px solid #fff !important;
}

.dark-mode .btn:hover {
	color: var(--backgroundGradient) !important;
}

.dark-mode .modal-header, .dark-mode .modal-body, .dark-mode .modal-footer {
	border: 1px solid #fff !important;
	background: var(--backgroundGradient) !important;
	color: #fff !important;
}

.dark-mode .btn-scr button:hover {
    background: #fff !important;
    color: var(--backgroundGradient) !important;
    border: 1px solid var(--backgroundGradient);
}

.dark-mode .form-control {
	background: #33383b !important;
	color: #fff !important;
}

.dark-mode [class^="select2"] {
	background: #33383b !important;
	color: #fff !important;
}

.dark-mode .pagination > li > a {
	background: #33383b !important;
}

.dark-mode .pagination > li > a:hover {
	color: #fff !important;
}

.dark-mode .pagination > .disabled > span, .pagination > .disabled > span:hover {
	background: #33383b !important;
}

.dark-mode .kv-md-header, .dark-mode .kv-md-input {
	background: #33383b !important;
}

.dark-mode .kv-md-header button {
    background: #33383b !important;
    color: #fff !important;
}

.dark-mode .kv-md-footer {
    background: #33383b !important;
}

.dark-mode .kv-md-footer button {
    background: #33383b !important;
    border: 1px solid !important;
}

.dark-mode .step-content {
    background: #33383b !important;
}

.dark-mode .sw-theme-arrows > ul.step-anchor > li > a {
    background: #33383b !important;
}

.dark-mode .sw-theme-arrows > ul.step-anchor > li > a::after {
    border-left: 30px solid #33383b !important;
}

.dark-mode .sw-theme-arrows > ul.step-anchor > li.active > a, .dark-mode .sw-theme-arrows > ul.step-anchor > li.done > a {
	background: var(--backgroundGradient) !important;
}

.dark-mode .sw-theme-arrows > ul.step-anchor > li.active > a::after, .dark-mode .sw-theme-arrows > ul.step-anchor > li.done > a::after {
    border-left: 30px solid var(--backgroundGradient) !important;
}

.dark-mode .btn-secondary {
	background: var(--backgroundGradient) !important;
	color: #fff !important;
	border: 1px solid #fff !important;
}

.dark-mode .panel-default > .panel-heading {
    background-color: transparent !important;
    border-color: #ddd;
}

.dark-mode td.kv-group-even {
	background: var(--backgroundGradient) !important;
}

.dark-mode td.kv-group-odd {
	background: var(--backgroundGradient) !important;
}

.dark-mode .table > tbody > tr > td, .dark-mode .kv-grouped-row {
	background: var(--backgroundGradient) !important;
}

.dark-mode .info-box {
	background: var(--backgroundGradient) !important;
	border: 1px solid #fff !important;
}

.dark-mode .alert-warning {
	border: 1px solid var(--warningGradient) !important;
}

.dark-mode .calendar-table {
	padding: 5px !important;
}

.dark-mode .daterangepicker, .dark-mode .calendar-table {
	background: var(--backgroundGradient) !important;
	border: 1px solid #fff !important;
}

.dark-mode .daterangepicker td.off {
	background: var(--backgroundGradient) !important;
}

.dark-mode .ct-form-control {
	background: none !important;
	border: 1px solid #fff !important;
	padding: 5px !important;
}


.dark-mode .tab-content {
	background: none !important;
}

.dark-mode .nav-tabs-custom > .nav-tabs > li > a, .dark-mode .nav-tabs-custom > .nav-tabs > li.header {
	color: #fff !important;
}

.dark-mode .input-group.date .kv-date-remove, 
.dark-mode .input-group.date .kv-date-picker, 
.dark-mode .input-group.date .kv-date-remove, 
.dark-mode .input-group.date .kv-date-picker, 
.dark-mode .input-group.input-daterange .kv-date-remove, 
.dark-mode .input-group.input-daterange .kv-date-picker, 
.dark-mode .input-group.input-daterange .kv-date-remove, 
.dark-mode .input-group.input-daterange .kv-date-picker {
    cursor: pointer;
    background: transparent !important;
    color: #fff !important;
}

.dark-mode .bootstrap-timepicker .picker .btn-default {
	color: #fff !important;
}

.dark-mode .select2-results ul li:hover {
	background-color: #000 !important;
	font-weight: bold;
}

.dark-mode .kv-panel-after {
    background: var(--backgroundGradient) !important;
}

.dark-mode td.today.weekend.active.start-date.available.in-range,
.dark-mode td.today.weekend.active.start-date.available,
.dark-mode td.weekend.active.end-date.in-range.available,
.dark-mode td.active.end-date.in-range.available {
	background-image: none !important;
	background-color: #fff !important;
	color: #000 !important;
}

/* End Dark-mode*/

/** */
.canOnlySwitch {
	margin-left: 20px;
}

.switch {
	width: 49px;
	height: 22px;
}
  
.switch input { 
	opacity: 0;
	width: 0;
	height: 0;
}
  
.slider {
	position: absolute;
	cursor: pointer;
	top: 10px;
	left: 5px;
	right: 0;
	bottom: 0;
	background-color: #fff;
	-webkit-transition: .4s;
	transition: .4s;
	height: 20px;
	width: 50px;
}
  
.slider:before {
	position: absolute;
	content: "";
	height: 15px;
	width: 15px;
	left: 4px;
	bottom: 3px;
	background-color: var(--backgroundGradient);
	-webkit-transition: .4s;
	transition: .4s;
}
  
input:checked + .slider {
	background-color: #fff;
}
  
input:focus + .slider {
	box-shadow: 0 0 1px #2a2f32;
}
  
input:checked + .slider:before {
	-webkit-transform: translateX(26px);
	-ms-transform: translateX(26px);
	transform: translateX(26px);
}
  
/* Rounded sliders */
.slider.round {
	border-radius: 34px;
}
  
.slider.round:before {
	border-radius: 50%;
}

@media (max-width: 640px) {
	.switch {
		right: 20px;
	}

	.canOnlySwitch {
		margin-left: 0px;
	}
}

/** Calendar */
.fc-day.fc-widget-content.fc-sat, .fc-day.fc-widget-content.fc-sun {
    background: #eee !important;
}

.fc-ltr .fc-basic-view .fc-day-top .fc-day-number {
    float: right;
    margin-right: 5px !important;
    font-weight: normal !important;
}

.fc-widget-header {
    background: var(--backgroundGradient) !important;
    color: var(--sidebarTextColor) !important;
}

.fc-button {
    background: var(--background) !important;
    background-image: none;
    color: #fff !important;
    border-color: var(--sidebarTextColor) !important;
    border-bottom-color: var(--sidebarTextColor) !important;
}

.fc-event {
    /* border-radius: 10px !important; */
    border: 1px solid var(--background) !important;
    text-align: center !important;
}

.fc-toolbar.fc-header-toolbar {
    margin-bottom: -10px !important;
}

.fc-unthemed td.fc-today {
    background: #fcf8e3 !important;
}

.fc-day-grid-event.fc-h-event.fc-event.fc-start.fc-end.holiday {
    border-radius: 0 !important;
    margin: 0 !important;
}

.fc-day-grid-event {
	margin: 0 !important;
}


.mega-dropdown {
	position: static !important;
	width: 100%;
  }
  
  .mega-dropdown-menu {
	padding: 20px 0px;
	width: 100%;
	box-shadow: none;
	-webkit-box-shadow: none;
  }
  
  .mega-dropdown-menu:before {
	content: "";
	border-bottom: 15px solid #fff;
	border-right: 17px solid transparent;
	border-left: 17px solid transparent;
	position: absolute;
	top: -15px;
	left: 285px;
	z-index: 10;
  }
  
  .mega-dropdown-menu:after {
	content: "";
	border-bottom: 17px solid #ccc;
	border-right: 19px solid transparent;
	border-left: 19px solid transparent;
	position: absolute;
	top: -17px;
	left: 283px;
	z-index: 8;
  }
  
  .mega-dropdown-menu > li > ul {
	padding: 0;
	margin: 0;
  }
  
  .mega-dropdown-menu > li > ul > li {
	list-style: none;
  }
  
  .mega-dropdown-menu > li > ul > li > a {
	display: block;
	padding: 3px 20px;
	clear: both;
	font-weight: normal;
	line-height: 1.428571429;
	color: #999;
	white-space: normal;
  }
  
  .mega-dropdown-menu > li ul > li > a:hover,
  .mega-dropdown-menu > li ul > li > a:focus {
	text-decoration: none;
	color: #444;
	background-color: #f5f5f5;
  }
  
  .mega-dropdown-menu .dropdown-header {
	color: #428bca;
	font-size: 18px;
	font-weight: bold;
  }
  
  .mega-dropdown-menu form {
	margin: 3px 20px;
  }
  
  .mega-dropdown-menu .form-group {
	margin-bottom: 3px;
  }