/* mainTabs overwrite colors */

.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active {
	border: 1px solid var(--button-bg-color) ;
	background: var(--button-bg-color) !important;
	color: var(--button-font-color) !important;
}

/* end mainTabs overwrite colors */

/* .title-bar, ul.ui-widget-header { #mainTabs ul.ui-widget-header
	background-image: linear-gradient(to top, var(--default-top-bar-bg-color-hover) 0%, var(--default-top-bar-bg-color) 100%);
	color: var(--default-top-bar-font-color);
} */

/* .top-bar {
	background: var(--default-top-bar-bg-color);
	color: var(--default-top-bar-font-color);
} */

.title-bar-left, .menu-icon-hcms {
	color: var(--default-top-bar-font-color) !important;
}

.top-bar-left ul li {
	background: var(--default-top-bar-bg-color);
	color: var(--default-top-bar-font-color);
}

.top-bar-left ul li a {
	color: var(--default-top-bar-font-color);
}

.top-bar-left ul li a:hover {
	background: var(--default-top-bar-bg-color-hover);
	color: var(--default-top-bar-font-color);
}
 

button.menu-icon-hcms {
	background: transparent !important;
}

.dataTables_info {
	
}

.dataTable thead, .dataTable tfoot   {
	color: var(--primary-font-color);
}

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

.dataTable tr {
	color: var(--dataTable-tr-font-color:) !important;	
}

.dataTable td {
	color: var(--primary-font-color) !important;
	border: 1px solid var(--dataTable-td-border-color) !important;
}

.dataTable tr.odd  {
	background: var(--default-table-odd-color) !important;
}

.dataTable tr.odd td.sorting_1  {
	background: var(--default-table-odd-color) !important;
}

.dataTable tr.even, td.dataTables_empty  {
	background: var(--default-table-even-color) !important;
}

.dataTable tr.even td.sorting_1  {
	background: var(--default-table-even-color) !important;
}

.dataTable  tr:hover, .dataTable  tr:hover td  {
	background: var(--default-table-hover-color) !important;
	color: var(--default-table-font-color-hover) !important;
	
}

.dataTable  tr:hover td.sorting_1 {
	background: var(--default-table-hover-color) !important;
	color: var(--default-table-font-color-hover) !important !important;
}

.dataTables_paginate a {
	background: inherit !important;
}

.button, .button:focus, .btnsStoreClose, .btnsPrintoutTypePreview  {
	background: var(--button-bg-color);
	color: var(--button-font-color); 
}

.button:disabled {
	background: var(--button-disabled-bg-color);
	color: var(--button-disabled-font-color);
}

.button:disabled:hover {
	background: var(--button-disabled-bg-color-hover);
	color: var(--button-disabled-font-color-hover); 
}  


.button, input[Type="button"], button {
	background: var(--button-bg-color) !important;
	color: var(--button-font-color) !important;
}

input[Type="submit"]{
	background: var(--button-bg-color) !important;
	color: var(--button-font-color) !important;
	border: none;
}

input[Type="button"]:hover, button:hover, .btnsEdit:hover, .btnsEdit i:hover, .btnsStoreClose:hover, .btnsPrintoutTypePreview:hover {
	background: var(--button-bg-color-hover) !important;
	color: var(--button-font-color-hover) !important;
}

button.ui-multiselect, input, textarea {
	background: var(--default-input-bg-color) !important;
	color: var(--default-input-font-color) !important; 
}
button.ui-multiselect span.ui-icon, .ui-icon-triangle-2-n-s {
	color: var(--default-input-font-color) !important;
}



input:disabled, textarea:disabled {
	background: var(--default-input-disabled-bg-color) !important;
	color: var(--default-input-font-color) !important;
}


button.ui-multiselect:hover {
	background: var(--button-bg-color) !important;
	color: var(--button-font-color) !important;
}
 
.btnsEdit {
	background: var(--button-bg-color);
	color: var(--button-font-color); 
	padding: 10px;
} 
 
 
.ui-dialog button, .ui-dialog button span, span.ui-icon-closethick  {
	/* background: transparent !important; */
	color: var(--button-font-color) !important;
}

.ui-dialog button.ui-multiselect span{
	color: var(--default-input-font-color) !important; 
}

.ui-dialog button.ui-dialog-titlebar-close {
	background: var(--dialog-close-button-bg-color) !important;
	margin-top: -18px !important;
	width: 33px !important;
}
 
 
fieldset {
	border: 2px solid var(--fieldset-border-color);
}

.accordion-title {
	background: var(--accordion-title-bg-color);
}

.switch-paddle {
	background: var(--switch-bg-color) !important;
	color: var(--switch-font-color) !important;
}

input:checked ~ .switch-paddle {
    background: var(--button-bg-color) !important;
}


.switch-paddle .fa-moon, .switch-paddle .fa-sun {
	color: var(--switch-sun-moon-font-color) !important;
	font-size: 1rem;
}


table tr, div.ui-datepicker-header table tbody tr, div.shop_uiShopAdminProduction_comps_shopOrderEdit_orderDetails table tbody tr {
	background: inherit !important;
}



/* Small only */
@media screen and (max-width: 39.9375em) {
	
	
	
	.title-bar, #mainTabs ul.ui-widget-header {
		background: #cccccc url(images/ui-bg_highlight-soft_75_cccccc_1x100.png);
		color: var(--default-top-bar-font-color-for-small-only) !important;
	}
	
	.top-bar {
		background: var(--default-top-bar-bg-color-for-small-only) !important;
		color: var(--default-top-bar-font-color-for-small-only) !important;
	} */

	.title-bar-left, button.menu-icon-hcms i  {
		color: var(--primary-font-color) !important;
	}
	
	.top-bar-left ul li {
		background: var(--default-top-bar-bg-color-for-small-only) !important;
		color: var(--default-top-bar-font-color-for-small-only) !important;
	}
	
	.top-bar-left ul li a {
		color: var(--default-top-bar-font-color-for-small-only) !important;
	}
	
	.top-bar-left ul li a:hover {
		background: var(--default-top-bar-bg-color-for-small-only) !important;
		color: var(--default-top-bar-font-color-for-small-only) !important;
	}
	
		
}