/*Theme Colors*/
/*bootstrap Color*/
/*Light colors*/
/*Normal Color*/
/*Extra Variable*/

/*******************
/*Common Elements
*******************/
html{background-color: #F6F9FA;}
body{ background-color: transparent; color:#67757c;}
h1, h2, h3, h4, h5, h6 {
	color: #343a40
}
.page-wrapper{ background-color: #F6F9FA;}
.card{ background-color:#FFF;}
.card .progress{background-color: #000;}
input, textarea, select{ color: #67757c;}
option{color:#67757c}
option:selected{background-color: #398bf7; color:#fff;}
option:selected:disabled, option:disabled{ background-color: #ccc; color:#999;}
.custom-select{background-color: #FFF;}
a:not(.btn){color:#398bf7}
a:not(.btn):hover, a:not(.btn):focus{ color:#398bf7}
a.link{color:#fff;}
a.link:hover, a.link:focus{ color:#398bf7;}
/*.form-control{background-color: #FFF; color:#67757c; border: none; }*/
.form-control.readonly,.form-control[readonly]{ background-color: #e3e3e3; color:#343a40; cursor: text; border-color:#ddd}
.text-dark{color:#FFF !important;}
/*******************
/*Top bar
*******************/
.topbar {
	background: #FFF;
}
.topbar .navbar-header {
	background: #FFF;
}
.topbar .top-navbar .navbar-header .navbar-brand .dark-logo {
	display: block;
	color: #343a40
}
.topbar .top-navbar .navbar-header .navbar-brand .light-logo{
	display: none;
	color: #67757c
}

.topbar .top-navbar .navbar-header, .topbar .profile-pic{ border-color:#FFF;}

.topbar .navbar-light .navbar-nav .nav-item > a.nav-link {
	color: #67757c !important;
}
.topbar .navbar-light .navbar-nav .nav-item > a.nav-link:hover, .topbar .navbar-light .navbar-nav .nav-item > a.nav-link:focus {
	color: #67757c !important;
}
.hdr-nav-bar .navbar .navbar-nav > li.active > a {
	border-color: #398bf7;
}

.topbar .dropdown-menu{ background-color: #FFF; color:#67757c;}
.topbar ul.dropdown-user li a{ color:inherit}
.topbar ul.dropdown-user li.divider{ background-color: rgba(255,255,255, 0.2);}
.topbar .switch-user-wrap{background-color: #FFF;}
.topbar ul.dropdown-user li .switch-user-wrap> a.switch-user{ border-color:#4c5760; color:#ff954e}
.topbar ul.dropdown-user li a:hover{ background: #f2f2f2; color:#343a40}
.mailbox .message-center a .mail-contnet .mail-desc, .mailbox .message-center a .mail-contnet .time{ color:#FFF}
.mailbox .message-center a:hover{background-color: #FFF}
.navbar-light .navbar-nav .nav-link { color: inherit; }
.navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover{ color:#398bf7}

/*******************
/*General Elements
*******************/
.lstick {
	background: #398bf7;
}
a.link:hover, a.link:focus {
	color: #398bf7 !important;
}
.bg-theme {
	background-color: #398bf7 !important;
}
.pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus {
	background-color: #398bf7;
	border-color: #398bf7;
}
.right-sidebar .rpanel-title {
	background: #398bf7;
}
.stylish-table tbody tr:hover, .stylish-table tbody tr.active {
	border-left: 4px solid #398bf7;
}
.text-themecolor {
	color: #398bf7 !important;
}
.bg-themecolor{
	background-color: #398bf7 !important;
}
.profile-tab li a.nav-link.active, .customtab li a.nav-link.active {
	border-bottom: 2px solid #398bf7;
	color: #398bf7;
}
.profile-tab li a.nav-link:hover, .customtab li a.nav-link:hover {
	color: #398bf7;
}
/*******************
/*Buttons
*******************/
.btn-info{background: #3fa6ff; border-color:#3fa6ff; }
.btn-info:hover, .btn-info.disabled:hover, .btn-info.active.focus, .btn-info.active:focus, .btn-info.active:hover, .btn-info.focus:active, .btn-info:active:focus, .btn-info:active:hover, .open>.dropdown-toggle.btn-info.focus, .open>.dropdown-toggle.btn-info:focus, .open>.dropdown-toggle.btn-info:hover, .btn-info.focus, .btn-info:focus, .show>.btn-info.dropdown-toggle, .btn-info:not(:disabled):not(.disabled).active, .btn-info:not(:disabled):not(.disabled):active, .show>.btn-info.dropdown-toggle{background: #3fa6ff; border-color:#3fa6ff;}

.btn-success{ background:#64bd63;border-color:#64bd63 }
.btn-success:hover, .btn-success.disabled:hover, .btn-success.active.focus, .btn-success.active:focus, .btn-success.active:hover, .btn-success.focus:active, .btn-success:active:focus, .btn-success:active:hover, .open>.dropdown-toggle.btn-success.focus, .open>.dropdown-toggle.btn-success:focus, .open>.dropdown-toggle.btn-success:hover, .btn-success.focus, .btn-success:focus, .show>.btn-success.dropdown-toggle, .btn-success:not(:disabled):not(.disabled).active, .btn-success:not(:disabled):not(.disabled):active, .show>.btn-success.dropdown-toggle{background: #09a907; border-color:#09a907;}

.btn-themecolor{
	background: #398bf7;
	color: #fff;
	border-color: #398bf7;
}
.btn-themecolor:hover{
	background: #03a9f4;
	color: #fff;
	opacity: 1;
	border-color: #fff;
}
.btn-group .btn-themecolor{border-width: 0 1px !important; border-color:#398bf7 !important}
.btn-themecolor.active, .btn-themecolor:focus, .btn-themecolor.disabled.active, .btn-themecolor.disabled:focus {
	background: #398bf7;
	color: #fff;
}
.btn-themecolor.disabled, .btn-themecolor.disabled:hover{
	background-color: #666; color:#ddd; border-color:#666 #fff; cursor: not-allowed;
}

/*******************
/*sidebar navigation
*******************/
.left-sidebar{background-color:#FFF; color:#fff; }
.label-themecolor{ background: #398bf7; color: #fff !important; border-left-color: #398bf7 !important; }
.label-themecolor.has-arrow::after{border-color: currentColor;}
.sidebar-nav{ background-color: #FFF;}
.sidebar-nav ul li{color:#888; margin-top: 0;}
.sidebar-nav ul li.active{color:#398bf7;}
.sidebar-nav ul li.nav-small-cap{color:#aaa;}
.sidebar-nav ul li a.active, .sidebar-nav ul li a:hover, .sidebar-nav ul li.active > a {
	color: #398bf7; border-left-color: #398bf7; background-color: #FFF;
}
.sidebar-nav ul li>a{color:currentColor;}
.sidebar-nav > ul > li > a> i {
	color: currentColor !important;
}
.sidebar-nav>ul>li>ul{ background-color: #FFFF;}
.nav-small-cap hr {
	line-height: 5px;
	margin-top: 0.1rem;
	margin-bottom: 0;
}

.scroll-sidebar::-webkit-scrollbar {
  height: 6px;
}
.scroll-sidebar{
  scrollbar-width: 3px;
  scrollbar-color: #4C5760 #000;
}
.scroll-sidebar::-webkit-scrollbar-track {
	border-radius: 6px;
  background: #000;
}
.scroll-sidebar::-webkit-scrollbar-thumb {
  background-color:#4C5760 ;
  border-radius: 6px;
  border: 3px solid #000;
}

/* breadcrumb-item */
.bc-colored .breadcrumb-item, .bc-colored .breadcrumb-item a {
	margin-top: 5px;
	margin-bottom: 5px;
	color: #fff;
}
.bc-colored .breadcrumb-item.active, .bc-colored .breadcrumb-item a.active {
	opacity: 0.7;
	color: #68daff;
	font-weight: 500;
}
.bc-colored .breadcrumb-item + .breadcrumb-item::before {
	content: "\e649";
	font-family: themify;
	color: rgba(255, 255, 255, 0.4);
	font-size: 11px;
}
.breadcrumb {
	padding: 0px;
	margin-bottom: 0px;
	background: transparent;
	font-size: 12px;
}

.preloader{ background-color: #F6F9FA;}
.loader__figure{ border-color:#398bf7;}

/*******************
/* themecolor-table
*******************/

.table-responsive::-webkit-scrollbar {
  width: 6px;
}
.table-responsive{
  scrollbar-width: 3px;
  scrollbar-color: #c1c1c1 #f1f1f1;
}
.table-responsive::-webkit-scrollbar-track {
	border-radius: 6px;
  background: #f1f1f1;
}
.table-responsive::-webkit-scrollbar-thumb {
  background-color:#c1c1c1 ;
  border-radius: 6px;
  border: 3px solid #f1f1f1;
}

.table td, .table th{ border-color: #f3f1f1;} /*#5e6066*/
.themecolor-table { background-color: #FFF; color:inherit;}
.color-table.themecolor-table thead th, .color-table.themecolor-table thead td {
	background-color: #4c5760;
	color: #fff;
}
.full-color-table.full-themecolor-table, .full-color-table.full-themecolor-table {
	background-color: #eee;
	color: #000;
}
.full-color-table.full-themecolor-table thead th, .full-color-table.full-themecolor-table thead td {
	background-color: #4c5760;
	border: 0;
	color: #fff;
}
.full-color-table.full-themecolor-table tbody th, .full-color-table.full-themecolor-table tbody td {
	border: 0;
	border-bottom: 1px #ccc solid;
}

.full-color-table.full-themecolor-table a {
	color: #03a9f4;
}

.themecolor-table.table-hover tbody tr:hover{ background: #f6f9fa;}
.full-themecolor-table.table-hover tbody tr:hover{ background: #FFF;}

.dt-buttons .dt-button, .btn-primary {
	color: #fff;
	background: #398bf7;
	border: 1px solid #398bf7;
}
.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show>.btn-primary.dropdown-toggle, .btn-primary.disabled{
	color: #fff;
	background: #03a9f4;
	border: 1px solid #03a9f4;
}

.dt-buttons .dt-button:active, .btn-primary:active, button.dt-button:active:not(.disabled), div.dt-button:active:not(.disabled), a.dt-button:active:not(.disabled), input.dt-button:active:not(.disabled),
.dt-buttons .dt-button:focus, .btn-primary:focus, button.dt-button:focus:not(.disabled), div.dt-button:focus:not(.disabled), a.dt-button:focus:not(.disabled), input.dt-button:focus:not(.disabled),
.dt-buttons .dt-button:active:focus, .btn-primary:active:focus, button.dt-button:active:focus:not(.disabled), div.dt-button:active:focus:not(.disabled), a.dt-button:active:focus:not(.disabled), input.dt-button:active:focus:not(.disabled),
.dt-buttons .dt-button:hover, .btn-primary:hover, button.dt-button:hover:not(.disabled), div.dt-button:hover:not(.disabled), a.dt-button:hover:not(.disabled), input.dt-button:hover:not(.disabled),
.dt-buttons .dt-button:active:hover, .btn-primary:active:hover, button.dt-button:active:hover:not(.disabled), div.dt-button:active:hover:not(.disabled), a.dt-button:active:hover:not(.disabled), input.dt-button:active:hover:not(.disabled),
button.dt-button:active:not(.disabled):hover:not(.disabled), div.dt-button:active:not(.disabled):hover:not(.disabled), a.dt-button:active:not(.disabled):hover:not(.disabled), input.dt-button:active:not(.disabled):hover:not(.disabled)
{
	background: #03a9f4;
	border: 1px solid #03a9f4;
}

.dataTables_wrapper .dataTables_filter input, .dataTables_wrapper .dataTables_length select{ color:#67757c; background-color: #FFF; border-color: #ddd;}
.dataTables_filter input:focus, .dataTables_length select:focus {
    background-image: -webkit-gradient(linear, left top, left bottom, from(#398bf7), to(#398bf7)), -webkit-gradient(linear, left top, left bottom, from(#b1b8bb), to(#b1b8bb));
    background-image: -webkit-linear-gradient(#398bf7, #398bf7), -webkit-linear-gradient(#b1b8bb, #b1b8bb);
    background-image: -o-linear-gradient(#398bf7, #398bf7), -o-linear-gradient(#b1b8bb, #b1b8bb);
    background-image: linear-gradient(#398bf7, #398bf7), linear-gradient(#b1b8bb, #b1b8bb);
}

table.dataTable.themecolor-table tbody tr.selected>*{ box-shadow: inset 0 0 0 9999px rgb(64 70 90 / 75%); color: currentColor;} 
table.dataTable.full-themecolor-table tbody tr.selected>*{ box-shadow: inset 0 0 0 9999px #b5fbff; color: currentColor;}


/*vtabs*/
.vtabs .tabs-vertical li .nav-link{ color: #333; background-color: #fff;}
.vtabs .tabs-vertical li .nav-link.active, .vtabs .tabs-vertical li .nav-link:hover, .vtabs .tabs-vertical li .nav-link:focus{
	border-right-color: #398bf7; color: #398bf7; background-color: #FFF
}
.vtabs .tab-content{ background-color: #FFF}
.dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_processing, .dataTables_wrapper .dataTables_paginate{color:inherit}

/*******************
/* paginate
*******************/
.dataTables_wrapper .dataTables_paginate .paginate_button{ background:#FFF !important; color:#67757c !important; border-color:#ddd}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover{ background: #FFF !important; color:#999 !important; border-color:#ddd}
.dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover{
	background:#398bf7 !important;
	border-color: #398bf7 !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active{
	background:#eee !important; color:#666 !important;
	border-color: #ddd !important;
}


/*******************
/* search Builder
*******************/

div.dtsb-searchBuilder div.dtsb-group{ font-size: 0.825em;}

div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria select.dtsb-dropDown,div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria input.dtsb-input{ 
	background-color: #fff;
}

div.dtsb-searchBuilder button,div.dtsb-searchBuilder select,div.dtsb-searchBuilder input{
	background-color: #fff;
}

div.dtsb-searchBuilder button.dtsb-button{
    background: none;
    background-color: #398bf7;
    border-color: #398bf7;
    color: #fff;
}

div.dtsb-searchBuilder button.dtsb-button:hover{
	background-color: #03a9f4 !important;
	border-color:#03a9f4 !important;
}

div.dtsb-searchBuilder div.dtsb-logicContainer{
	background: none;
	background-color: #fff;
	color:inherit;
}

div.dtsb-searchBuilder div.dtsb-logicContainer button{
background: none;
background-color: #343a40;
	color:#fff;
}
div.dtsb-searchBuilder div.dtsb-logicContainer button:hover{
	background-color: #666 !important;
}

div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria select.dtsb-condition option.dtsb-option,div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria select.dtsb-data option.dtsb-option,div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria select.dtsb-value option.dtsb-option{
	background-color: #fff;
}

div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria{ padding: 0.5em; border: 1px dashed #ccc; background-color: #f0fdff; margin-bottom: 2px;}

.dtsb-add::before{ content: "\f067"; display:inline-block; margin-right: 0.5em;
font-family: "Font Awesome 5 Free";
font-weight: bold;
}

.dtsb-clearAll::before{
	content: "\f2ed"; display:inline-block; margin-right: 0.5em;
font-family: "Font Awesome 5 Free";
font-weight: bold;
}
.dtsb-delete{position: relative}

.dtsb-delete::before{
content: "\f00d"; display:block;
font-family: "Font Awesome 5 Free";
font-weight: bold; font-size: 1rem;
position: absolute; top:0; right:0; bottom:0; left:0; margin: auto; width: 1.5em; height: 1.5em; line-height: 1.5; background-color: #398bf7;
}
.dtsb-delete:hover::before{ background-color: #03a9f4;}


.dtsb-searchBuilder .dtsb-right, .dtsb-searchBuilder .dtsb-left{ position: relative;}
.dtsb-searchBuilder .dtsb-right::before, .dtsb-searchBuilder .dtsb-left::before{ display:block;
content: "\f1e0"; font-family: "Font Awesome 5 Free";
font-weight: bold; font-size: 0.8rem;
position: absolute; top:1px; right:0; bottom:0; left:1px; margin: auto; width: 1em; height: 1em; line-height: 1; background-color: #398bf7;
}

.dtsb-searchBuilder .dtsb-right::before{ transform: scaleX(-1);}
.dtsb-searchBuilder .dtsb-left::before{/*transform: rotate(-90deg)*/ }
.dtsb-searchBuilder .dtsb-right:hover::before, .dtsb-searchBuilder .dtsb-left:hover::before{background-color: #03a9f4;}

.chat-main-box[id='...chat-main-box...item']{box-shadow: none !important;}

/*login*/
.form-material .form-control, .form-material .form-control.focus, .form-material .form-control:focus{ background-color: #FFF; padding: 0.25em 1em;
	   background-image: -webkit-gradient(linear, left top, left bottom, from(#398bf7), to(#398bf7)), -webkit-gradient(linear, left top, left bottom, from(#e9edf2), to(#e9edf2));
    background-image: -webkit-linear-gradient(#398bf7, #398bf7), -webkit-linear-gradient(#e9edf2, #e9edf2);
    background-image: -o-linear-gradient(#398bf7, #398bf7), -o-linear-gradient(#e9edf2, #e9edf2);
    background-image: linear-gradient(#398bf7, #398bf7), linear-gradient(#e9edf2, #e9edf2);
}

.footer{ background-color: #F6F9FA; color:#67757c;border-top: none; }

@media (min-width: 768px){
	.mini-sidebar .sidebar-nav #sidebarnav>li:hover>a, .mini-sidebar .sidebar-nav #sidebarnav>li>ul{
		background-color: #F2F2F2;
	}
}