

/*
* TABLE
*/

.substitutionsTable{
	--border-color: #CCC;
	display: none;
	border-collapse: collapse;
	table-layout: fixed;
	width: 100%;
}




/*
* ROWS
*/
.substitutionsTable tr{
	height: 85px;
	max-height: 85px;
	border-bottom: 1px solid var(--border-color);
	overflow: hidden;
	opacity: 0;
	animation-name: fadeIn;
	animation-duration: 1s;
	animation-fill-mode: both;
}

.substitutionsTable td{
	height: 85px;
	max-height: 85px;
}

.substitutionsTable tbody tr:nth-child(odd){
	background-color: #FFF1B6;
}


@keyframes fadeIn{
	from 	{ opacity: 0; }
	to 		{ opacity: 1; }
}

/*
* CELLS
*/
.substitutionsTable th{
	text-align: left;
	color: #00A78C;
}

.substitutionsTable td, .substitutionsTable th {
	overflow: hidden;
	word-break: break-word;
	padding: 10px;
	border-right: 1px solid var(--border-color);
	font-size: 25px;
	overflow: hidden;

}


.substitutionsTable td:last-child, .substitutionsTable th:last-child {
	border-right: none;
}



/*
*	COL WIDTHS
*/

.col-uur{
	width: 4%;
	text-align: center;
}

.col-klas{
	width: 13%;
	overflow-y: hidden;
}
.col-vervanger{
	width: 12%;
}
.col-afwezige-leerkracht{
	width: 12%;
}

.col-vak{
	width: 17%;
}


.col-lokaal,
.col-ander-lok{
	width: 8%;
}

/*
*	SPINNER
*/
.spinner-done{
	display: none;
}
.spinner-loading{
	display: block;
}

.sk-three-bounce {
  margin: 40px auto;
  width: 80px;
  text-align: center; }
  .sk-three-bounce .sk-child {
    width: 10px;
    height: 10px;
    background-color: #333;
    border-radius: 100%;
    display: inline-block;
    -webkit-animation: sk-three-bounce 1.4s ease-in-out 0s infinite both;
            animation: sk-three-bounce 1.4s ease-in-out 0s infinite both; }
  .sk-three-bounce .sk-bounce1 {
    -webkit-animation-delay: -0.32s;
            animation-delay: -0.32s; }
  .sk-three-bounce .sk-bounce2 {
    -webkit-animation-delay: -0.16s;
            animation-delay: -0.16s; }

@keyframes sk-three-bounce {
  0%, 80%, 100% {
    -webkit-transform: scale(0);
            transform: scale(0); }
  40% {
    -webkit-transform: scale(1);
            transform: scale(1); } }
