/*

	GENERAL

----------- */
html,
body{
	background-color:#222222;
}

/*

	BARS

-------- */
.table-bars{
    display:block;
    overflow-x:auto;
    white-space:nowrap;
    margin-top:30px;
}
.table-bars tbody{
	display:table;
    width:100%;
}
.table-bars,
.table-bar-container{
 	height:700px;
 	padding:0 15px;
}
.table-bar-container{
	vertical-align:bottom;
	position:relative;
}
.bar-column{
	padding:0 5px;
	vertical-align:bottom;
	position:relative;
	min-width:170px;
}
.bar-column .name{
	position:absolute;
	top:-140px;
	left:0;
	right:0;
	text-align:center;
	font-weight:bold;
	color:#aaa;
	text-transform:uppercase;
	font-size:14px;
	line-height:1;
	padding:20px 0 0 0;
}
.week{
	position:absolute;
	top:0;
	color:#fff;
	font-size:16px;
	line-height:1;
	left:0;
	right:0;
	text-align:center;
	font-weight:bold;
	text-transform:uppercase;
}
.bar-column::before{
	content:'';
	position:absolute;
	top:-135px;
	left:5px;
	right:5px;
	bottom:0;
	background-color:#555;
	border-radius:5px;
}
.bar-column::after{
	content:'';
	position:absolute;
	bottom:500px;
	height:3px;
	background-color:rgba(247, 0, 1);
	left:-15px;
	right:-15px;
}
.bar{
	width:160px;
	background-color:#0099d1;
	color:#fff;
	padding:0 10px;
	text-align:center;
	font-size:20px;
	text-transform:uppercase;
	line-height:1.2;
	position:relative;
	border-radius:5px;
	margin:2px 0 0 0;
	white-space:initial;
	display:table;
}
.bar span{
	display:table-cell;
	vertical-align:middle;
}
.noax{
	background-color:#058283 !important;
	color:#fff !important;
}
.mediageuzen{
	background-color:#ffc800 !important;
	color:#000 !important;
}
.obg{
	background-color:#c0ce32 !important;
	color:#000 !important;
}
.skillmedia{
	background-color:#00a141 !important;
	color:#fff !important
}

/*

	FOOTER

---------- */
.footer{
	margin:30px 0;
	float:left;
	width: 100%;
}

/*

	LEGEND

---------- */
.legend{
	width:20%;
	float:left;
	padding:0 15px;
}
.legend-content{
	padding:15px;
	background-color:#000;
	border-radius:5px;
	float:left;
	width:100%;
}
.legend-content div{
	display:flex;
	color:#fff;
	margin:0 0 10px 0;
}
.legend div:last-child{
	margin:0;
}
.legend div span{
	width:24px;
	height:24px;
	border-radius:50%;
	display:block;
	margin:0 10px 0 0;
	background-color:#0099d1;
}
.legend div b{
	font-size:14px;
	line-height:24px;
}

/*

	TO DO

--------- */
.to-do{
	float:left;
	width:25%;
	padding:0 15px;
}
.pending{
	width:30%;
}
.to-do-content{
	float:left;
	background-color:#000;
	border-radius:5px;
	padding:15px;
	text-align:center;
	width:100%;
}
.to-do .title{
	color:#fff;
	width:100%;
	text-align:center;
	float:left;
	font-weight:bold;
	text-transform:uppercase;
	margin:0 0 10px 0;
	font-size:18px;
}
.to-do span{
	display:inline-block;
	padding:10px 15px;
	color:#fff;
	margin:5px;
	background-color:#0099d1;
	border-radius:5px;
	text-align:center;
}