/* General var(--main-bg-color)*/

/* body[data-current-skin="base"] .toggle-switch .ts-helper:before, */

:root {
	--main-bg-color: #009BDD;
	--secondary-bg-color: #009BDD;
}

.bgm-base {
	background-color: var(--main-bg-color) !important;
	
}

.bgm-secondary {
	background-color: var(--secondary-bg-color) !important;
	
}

.c-secondary {
	color: var(--secondary-bg-color) !important;
	/* text-shadow: -1px 1px 0 rgba(0, 0, 0, .5); */
}

.c-base {
	color: var(--main-bg-color) !important;
	/* text-shadow: -1px 1px 0 rgba(0, 0, 0, .5); */
}

.linea-b{
	border: 1px solid var(--main-bg-color);
}

.noBgm {
	background-color: #edecec;
}

.graficoitem:nth-child(odd) .contenedorGrafico {
    background-color: var(--main-bg-color);
}
.graficoitem:nth-child(even) .contenedorGrafico{
    background-color: var(--secondary-bg-color);
}

::-webkit-scrollbar {
    width: 5px;
}

/* Track */

::-webkit-scrollbar-track {
    background: var(--main-bg-color) !important;
}

::-webkit-scrollbar-thumb {
	background: var(--secondary-bg-color) !important;
}

/* Handle on hover */

::-webkit-scrollbar-thumb:hover {
	background: var(--secondary-bg-color) !important;
}

.btn[data-current-skin] {
	color: #fff;
}

/* skin-base */

.toggle-switch[data-ts-color="base"] input:not(:disabled):checked+.ts-helper:before {
	background: var(--main-bg-color);
}

.toggle-switch[data-ts-color="secondary"] input:not(:disabled):checked+.ts-helper:before {
	background: var(--secondary-bg-color);
}

.toggle-switch[data-ts-color="main"] input:not(:disabled):checked+.ts-helper:before {
	background: var(--secondary-bg-color);
	background: -webkit-linear-gradient(to right, var(--main-bg-color), var(--secondary-bg-color));
	background: linear-gradient(to right, var(--main-bg-color), var(--secondary-bg-color));
}

body[data-current-skin="base"] .preloader .plc-path {
	stroke: var(--main-bg-color) !important;
}

body[data-current-skin="base"] .form-control:not([aria-label="Search"]):active, body[data-current-skin="base"] .form-control:not([aria-label="Search"]):focus {
	border-bottom: 2px solid var(--main-bg-color) !important;
}

body[data-current-skin="base"] .bootstrap-datetimepicker-widget table td.today:not(.active):before, body[data-current-skin="base"] .bootgrid-table thead {
	border-bottom-color: var(--main-bg-color);
}

body[data-current-skin="base"] .checkbox .input-helper:after {
	border-bottom: 2px solid var(--main-bg-color);
	border-left: 2px solid var(--main-bg-color);
}

body[data-current-skin="base"] .btn-loader, body[data-current-skin="base"] .grid-loader {
	border-top: 3px solid var(--main-bg-color) !important;
}

body[data-current-skin="base"] .datepicker table thead tr:first-child th, body[data-current-skin="base"] .datepicker table thead tr:last-child:not(:only-child), body[data-current-skin="base"] .datepicker table thead tr:first-child th:hover {
	background: var(--main-bg-color) !important;
}

body[data-current-skin="base"] .bootstrap-datetimepicker-widget table td.active, body[data-current-skin="base"] .bootstrap-datetimepicker-widget table td.active:hover {
	background: var(--secondary-bg-color) !important;
}

[data-current-skin="base"]:not(.noBgm), [data-current-skin-body="base"],
/* body[data-current-skin="base"] .datepicker table td.active:before, */

body[data-current-skin="base"] .timepicker-picker .btn.btn-primary, body[data-current-skin="base"] .datepicker-months .month.active, body[data-current-skin="base"] .datepicker-years .year.active, body[data-current-skin="base"] .timepicker-minutes .minute.active, body[data-current-skin="base"] .timepicker-hours .hour.active, body[data-current-skin="base"] .bootstrap-datetimepicker-widget table td span.active, body[data-current-skin="base"] .fg-line:not([class*=has-]):after, body[data-current-skin="base"] .pagination>.active>a, body[data-current-skin="base"] .pagination>.active>span, body[data-current-skin="base"] .pagination>.active>a:hover, body[data-current-skin="base"] .pagination>.active>span:hover, body[data-current-skin="base"] .pagination>.active>a:focus, body[data-current-skin="base"] .pagination>.active>span:focus, body[data-current-skin="base"] .cropper-line, body[data-current-skin="base"] .cropper-point, body[data-current-skin="base"] .thecube .cube:before, body[data-current-skin="base"] .tab-nav>li>a:after, body[data-current-skin="base"] .radio .input-helper:after, body[data-current-skin="base"] .note-editor .note-toolbar .btn.active, body[data-current-skin="base"] .btn-file, body[data-current-skin="base"] .panel-group[data-collapse-color="base"] .panel-collapse .panel-heading.active .panel-title>a:after {
	background: var(--main-bg-color);
	/* background: var(--secondary-bg-color) !important;
	background: -webkit-linear-gradient(to right, var(--main-bg-color), var(--secondary-bg-color)) !important;
	background: linear-gradient(to right, var(--main-bg-color), var(--secondary-bg-color)) !important; */
}

body[data-current-skin="base"] .swal2-confirm {
	/* background: var(--main-bg-color); */
	background: var(--secondary-bg-color) !important;
}

body[data-current-skin="base"] .bootstrap-datetimepicker-widget a[data-action], body[data-current-skin="base"] .ss-icon, body[data-current-skin="base"] [data-current-skin-active="base"], body[data-current-skin="base"] .bootstrap-select .dropdown-menu li:not(.disabled) a:hover small, body[data-current-skin="base"] .bootstrap-select .dropdown-menu li:not(.disabled) a:focus small, body[data-current-skin="base"] .bootstrap-select .dropdown-menu li.active:not(.disabled) a small, body[data-current-skin="base"] .field-success .control-label, body[data-current-skin="base"] .field-success .help-block, body[data-current-skin="base"] .field-success .form-control-feedback, body[data-current-skin="base"] .bootgrid-table th>.column-header-anchor>.icon, body[data-current-skin="base"] .main-menu .active, body[data-current-skin="base"] .popover-title, body[data-current-skin="base"] .modal-header .close, body[data-current-skin="base"] .item-dir, body[data-current-skin="base"] .item-info, body[data-current-skin="base"] .bootstrap-select .bs-searchbox:before,
/* body[data-current-skin="base"] .swal2-icon.swal2-info, */

body[data-current-skin="base"] .helpme, body[data-current-skin="base"] .input-group-addon {
	color: var(--secondary-bg-color) !important;
	/* text-shadow: -1px 1px 0 rgba(0, 0, 0, .5); */
}

/* body[data-current-skin="base"] .swal2-icon {
    border-color: var(--main-bg-color);
} */

@media (max-width: 767px) {
	[data-current-skin="base"] .ha-menu {
		background: var(--main-bg-color);
	}
	body[data-current-skin="base"] .page-login-main:before {
		background: var(--main-bg-color);
	}
}