.modConf > .rConf .conf.color-1 { background-color: #89d0dc; }
.modConf > .rConf .conf.color-2 { background-color: #dcd9d9; }
.modConf > .rConf .conf.color-3 { background-color: #f9dea1; }
.modConf > .rConf .conf.color-4 { background-color: #bfaec7; }
.modConf > .rConf .conf.color-5 { background-color: #a5f3d3; }
.modConf > .rConf .conf.color-6 { background-color: #e89999; }
.modConf > .rConf .conf.color-7 { background-color: #8adbe0; }
.modConf > .rConf .conf.color-8 { background-color: #ffd678; }
.modConf > .rConf .conf.color-9 { background-color: #8caeb5; }
.modConf > .rConf .conf.color-10 { background-color: #cae498; }
.modConf > .rConf .conf.color-11 { background-color: #7fc393; }
.modConf > .rConf .conf.color-12 { background-color: #b5f56c; }

.modConf {width:calc(100% - 20px); margin-bottom:50px; margin-left:10px; font-family: Arial, sans-serif;}
.modConf > header {margin-left:35px; display:block; }
.modConf > header > ul.rooms {width:100%; display:flex;}
.modConf > header > ul.rooms > li {
	display:inline-block;
	flex:1; 
	padding:15px 1px; 
	text-align: center; 
	font-size:18px; 
	color: #fff;
	margin: 0;
	background-color: #0074a3;
}
.modConf > .time {display:inline-block; width:35px; vertical-align: top;}
.modConf > .time > .times {display:inline-block; width:26px; vertical-align: top; padding:3px;}
.modConf > .time > .times > li {height:calc(100px + 8px); margin-top:-8px; font-size:12px; color: #333; font-weight: bold;}
.modConf > .time > .ticks {display:inline-block; width:4px;  vertical-align: top; }
.modConf > .time > .ticks > li {border-top:1px solid #333; height:20px; width:4px;}
.modConf > .time > .ticks-bar {display:inline-block; width:4px; height:100%; background: #0074a3;}

.modConf > .rConf {display:inline-block; width:calc(100% - 35px); vertical-align: top; text-align: center;}
.modConf > .rConf > li {width:20%; display:inline-block;}
.modConf > .rConf > li > ul {position:relative; border-right: 1px solid #e3e4e4; background: #fff;}
.modConf > .rConf .meal {
	width:100%;
	background-color: #fff;
	position:absolute; 
}
.modConf > .rConf .conf { 
	width: 100%;
	position:absolute; 
	background: #fff;
	display:flex;
	border-width: 1px 0;
	overflow: hidden;
	cursor: pointer;
	left: 0;
	transition: height 0.3s ease;
}
.modConf > .rConf .conf.in {border-bottom: 8px solid rgba(0, 0, 0, 0.5); }
.modConf > .rConf .conf aside {display: none;}
.modConf > .rConf .conf section {display:inline-block; position: relative; width:100%; padding:2px 4%; height:100%; vertical-align: top;}
.modConf > .rConf .conf section h3 {position: absolute; left: 0; top: 50%; transform: translateY(-50%); font-size:12px; font-weight: normal; color:#333; width:100%; padding: 0 10px; margin-top: 5px;}
.modConf > .rConf .conf.nano h3 {font-size:12px; font-weight: normal;}
.modConf > .rConf .conf.small h3 {font-size:12px;}
.modConf > .rConf .conf section u {text-decoration: none; font-size:10px; font-weight: bold; display:block;}
.modConf > .rConf .conf s i.fa,
.modConf > .rConf .conf section u i.fa {width:16px;}
.modConf > .rConf .conf section b {border:1px solid #0074a3; border-radius:20px; width:8px; height:8px;  display:inline-block; position:absolute; top:10px; right:10px;box-sizing: initial;}
.modConf > .rConf .conf.nano b,
.modConf > .rConf .conf.small b {width:8px; height:8px; right:5px; top:5px;}
.modConf > .rConf .conf s {display: none; color:#f74949; font-size:13px; text-decoration: none;}
.modConf > .rConf .conf section b.in {background:#0c0;}
.modConf > .rConf .conf.disabled { opacity: 0.4; background-color: #cecece;}
.modConf h2 { margin: 0 0 15px 45px; color: #01415a; }

.modConf.byHour > .rConf {width:auto;}
.modConf.byHour > .rConf > li {display: block; width:auto; margin-bottom: 30px;}
.modConf.byHour > .rConf > li > span {font-size:30px; color:#f74949; display: block;}
.modConf.byHour > .rConf > li > ul {display: flex; padding:10px 10px 0 10px; flex-wrap:wrap; justify-content: center; border: 0;}
.modConf.byHour > .rConf > li > ul > li {position:relative; display:flex; width: 200px; min-height: 70px; margin: 0 10px 10px 0;}
.modConf.byHour > .rConf .conf s,
.modConf.byHour > .rConf .conf u {display:block; margin-top:5px; }
.modConf.byHour > .rConf > li > ul > li section {display:flex; flex:1; flex-direction:column; height: auto; justify-content:center;}
.modConf.byHour > .rConf .conf aside {height: auto; }
.modConf.byHour > .rConf .conf section h3 { position: initial; left: 0; top: 0; transform: initial; }
.modConf.byHour h2 { margin: 10px 0; text-align: center; }
.modConf.byHour > .rConf .conf.okFlash section { top: 0; transform: initial; }

.modConf-popup {
	background: #005679;
	position: fixed;
	top: 10px;
	left: -400px;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 400px;
	height: 100px;
	border-radius: 5px;
	z-index: 15;
	transition: left 0.5s ease-out;
	opacity: 0.95;
}
.modConf-popup p {
	color: #fff;
}
.modConf-popup i {
	position: absolute;
	top: 0;
	right: 0;
	padding: 10px;
	cursor: pointer;
}
.modConf-popup.show {
	left: 10px;
	transition: left 0.5s ease-out;
}

/*--------------- ANIMATIONS ---------------*/

.modConf > .rConf .conf section b.waiter {
	background: #f00;
}

.modConf > .rConf .conf.errFlash section {
	animation:errFlash 1s;
}

@keyframes errFlash {
	0%	{background:inherit;}
	50%	{background:#f00;}
	100%{background:inherit;}
}

.modConf > .rConf .conf.okFlash section {
	top: 50%;
	transform: translateY(-15%);
	color:#fff;
	font-size:13px;
}