/* GENERAL SETTINGS */

header {
	background: #e8eef0; 			/* light grey */
}
footer {
	background: #c0c4c6; 			/* grey */
}

body {
	background-color: #fefefe;		/* white grey */
	color: #795548; 
}

main > .container { 	
	background-color: #fefefe;
	color: #795548;
}

th, td {
	border-bottom: 1px solid #ddd;
	padding: 2px 8px 2px 8px;
	text-align: left;
}

th.mysql {
	background-color: #e65c00;
	color: white;
}

th.mqtt {
	background-color: #e65c00;
	color: whitesmoke;
}

th.actions {
	background-color: #e6c400;
	color: rgb(0, 0, 0);
}

tr.uneven {
	background-color:#FEFEFE
}
tr.uneven:hover td {
	background-color:#ffc404;
}
tr.even {
	background-color:#E8E2E2;
}
tr.even:hover td{
	background-color:#dba903;
}

/* BUTTONS */
	.btn {
		background-color: #e65c00;
		color: white;
		border-color: #e65c00; 		/* same as button background */
		box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 4px 8px 0 rgba(0, 0, 0, 0.19);
	}

	/* Darker background on mouse-over */
	.btn:hover {
		background-color: #b34700;
		border-color: #b34700;
		box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2), 0 2px 4px 0 rgba(0, 0, 0, 0.19);
	}

	.btn:disabled {
		background-color: gray;
		border-color: gray;
	}

	.btn.on {
		background-color: #08e600;
		color: white;
		border-color: #08e600; 
	}

	.btn.off {
		background-color: #e60000;
		color: white;
		border-color: #e60000; 
	}

	.btn.levelunk {
		background-color: gray;
		color: white;
		border-color:gray;		
	}
	.btn.level0 {
		background-color: darkgreen;
		color: white;
		border-color: darkgreen;	
	}

	.btn.level1 {
		background-color: yellow;
		color: white;
		border-color:yellow;
	}

	.btn.level2 {
		background-color: darkorange;
		color: white;
		border-color: darkorange;
	}

	.btn.level3 {
		background-color: darkred;
		color: white;
		border-color: darkred;
	}

	.square {
		color: rgb(127, 127, 127);
		background: rgb(127, 127, 127);
		border: 1px solid #fff;
	}

	.square.level0 {
		background-color: darkgreen;
		color: white;
		border-color: darkgreen;
	}

	.square.level1 {
		background-color: yellow;
		color: white;
		border-color:yellow;
	}

	.square.level2 {
		background-color: darkorange;
		color: white;
		border-color: darkorange;
	}
	
	.square.level3 {
		background-color: darkred;
		color: white;
		border-color: darkred;
	}


	.pressed{
		color: #e65c00;
		background-color: white;
	}

/* RADIO INPUTS */

	.radio-selector input:checked +.btn{
		color: #e65c00;
		background-color: white;
	}
	.radio-type{
		box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 4px 8px 0 rgba(0, 0, 0, 0.19);
	}
	.radio-type:hover{
		box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2), 0 2px 4px 0 rgba(0, 0, 0, 0.19);
	}
	
/* IMAGE - ROUNDED CORNERS */

	img.rounded {
		box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 4px 8px 0 rgba(0, 0, 0, 0.19);
	}
	
/* MODALS */
	.modal-content {
		/* background-image: linear-gradient( #2E2F41, #121325); */
	}
	.card-header {
		/* background-color: #e8eef0; */
	}
	.card-body {
		/* background-color: #FFFFFF; */
	}
	
	
/* TABS */
	.nav-link {
		/* background-color: #e8eef0; */
	}
	.nav-link.active{
		/* background-color: #fefefe; */
	}
	
/* SLIDERS */

	/* TOOLTIP */
	.noUi-active .noUi-tooltip {
		color: #c37158;
	}
	
	/* HORIZONTAL (PROFILE) SLIDERS */
	.sliders.profile .noUi-connect {
		background: #ce5f00; /* background color of the sliders: */
	}
	.sliders.profile .noUi-handle {
		background-color: #ce5f00;
		color: #FFFFFF;
	}
	
	/* VERTICAL (MODULE) SLIDERS */	
	.sliders.vertical .noUi-handle{
		/* background-color: #F0F0F0; */
	}
	.sliders.vertical .noUi-connect {
		background: #795548;
	}
	#general-slider .noUi-connect {
		background: #c37158;
	}

/* DISPLAY SIZE¨*/