/* ==================
Z INDEX
====================*/
.zi1{z-index: 1;}
.zi3{z-index: 3;}
.zi5{z-index: 5;}

/* ==================
BOX SIZE
====================*/
.box_max{
	position: relative;
	width: 100dvw;
	height: 100dvh;
}

/* ==================
FLEX
====================*/
.flxR_cc{
	display: flex;
	flex-direction: row;	
	align-items: center;
	justify-content: center;
}
.flxR_ct{
	display: flex;
	flex-direction: row;	
	justify-content: center;
}

.flxC_cc{
	display: flex;
	flex-direction: column;	
	align-items: center;
	justify-content: center;
}
.flxC_ct{
	display: flex;
	flex-direction: column;	
	align-items: center;
}
/* ==================
BUTTONS
====================*/
.button{
	display: flex;
	flex-direction: row;	
	align-items: center;
	justify-content: center;	
}
.button span{
	height: 2.5rem;
	display: flex;
	flex-direction: row;	
	align-items: center;
	justify-content: center;	
	padding: 0 1em;
	border-radius: 10px;
	font-weight: 500;
	font-size: 1em;
	box-shadow: inset -3px -3px 6px 0px rgba(0,0,0,0.4);
	cursor: pointer;
}

/* ==================
CHEKCKBOX
====================*/
.checkbox{
	display: flex;
	align-items: center;
}
input[type=checkbox]{
	font-size: 1.3em;
    width: 1.4em;
    height: 1.4em;
	display: none;
}
label{
	position: relative;
	font-size: inherit;
	line-height: inherit;
}
label:before{
	float: left;
	display: flex;
	align-items: center;
	justify-content: center;
    content:'';
	margin: 0 10px 0 0;
    width: 1.4em;
    height: 1.4em;
	border: 1px solid #ddd;
	border-radius: 0.2em;
    background-color: #fff;
	color: #fff;
}
input[type=checkbox]:checked + label:before{
    content:'\2713';
    background-color: #3b88fd;
	color: #fff;
}
/* ==================
DOTS
====================*/
.dotter{
    position: relative;
    margin: 10vh 0 0 0;
}
.dots{
  display: block;
  position: relative;
  left: -9999px;
  width: 40px;
  height: 40px;
  border-radius: 20px;
  color: chocolate;
  box-shadow: 9944px -30px 0 0, 9999px 0 0 0, 10054px 15px 0 0;
  animation: dots 1.5s infinite linear;
}
@keyframes dots{
   0%{box-shadow: 9944px -30px 0 0,	9999px 0 0 0, 		10054px 15px 0 0;}
12.5%{box-shadow: 9944px -15px 0 0, 9999px -15px 0 0, 	10054px 30px 0 0;}
  25%{box-shadow: 9944px 0 0 0,     9999px -30px 0 0, 	10054px 15px 0 0;}
37.5%{box-shadow: 9944px 15px 0 0,  9999px -15px 0 0, 	10054px 0px 0 0;}
  50%{box-shadow: 9944px 30px 0 0,  9999px 0 0 0, 		10054px -15px 0 0;}
62.5%{box-shadow: 9944px 15px 0 0,  9999px 15px 0 0, 	10054px -30px 0 0;}
  75%{box-shadow: 9944px 0px 0 0,   9999px 30px 0 0, 	10054px -15px 0 0;}
87.5%{box-shadow: 9944px -15px 0 0, 9999px 15px 0 0, 	10054px 0 0 0;}
 100%{box-shadow: 9944px -30 0 0,	9999px 0 0 0, 		10054px 15px 0 0;}
}

.dotter2{
    position: relative;
	display: flex;
	justify-content: center;
    margin: -15px 0 -18px 0;
}
.dots2{
  display: block;
  position: relative;
  left: -9999px;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  color: #fff;
  box-shadow: 9984px -4px 0 0, 9999px 0 0 0, 10014px 2px 0 0;
  animation: dots2 1.5s infinite linear;
}
@keyframes dots2{
   0%{box-shadow: 9984px -4px 0 0,	9999px 0 0 0, 		10014px 2px 0 0;}
12.5%{box-shadow: 9984px -2px 0 0, 9999px -2px 0 0, 	10014px 4px 0 0;}
  25%{box-shadow: 9984px 0 0 0,     9999px -4px 0 0, 	10014px 2px 0 0;}
37.5%{box-shadow: 9984px 2px 0 0,  9999px -2px 0 0, 	10014px 0px 0 0;}
  50%{box-shadow: 9984px 4px 0 0,  9999px 0 0 0, 		10014px -2px 0 0;}
62.5%{box-shadow: 9984px 2px 0 0,  9999px 2px 0 0, 		10014px -4px 0 0;}
  75%{box-shadow: 9984px 0px 0 0,   9999px 4px 0 0, 	10014px -2px 0 0;}
87.5%{box-shadow: 9984px -2px 0 0, 9999px 2px 0 0, 		10014px 0 0 0;}
 100%{box-shadow: 9984px -4 0 0,	9999px 0 0 0, 		10014px 2px 0 0;}
}



/* ==================
COVER
====================*/
#cover{
	position: absolute;
	top: 0;
	left: 0;
}

/* ---------------------
FONT SIZE
--------------------- */
.fn1{font-size: 0.8em !important;;}

/* ---------------------
COLORS
--------------------- */
.colP1{
	background: purple;
	color:#fff;
}
.colG1{
	background: #306a00;
	color:#fff;
}
.colB1{
	background: #250451;
	color:#fff;
}


/* ==================
HEADER
====================*/
#header{
	width: 100%;
	height: 3em;
	line-height: 3em;
	background-color: rgba(0,46,70,1);
	color: #fff;
}
.h_name{
	float: left;
	font-size: 1.6em;
	font-weight:500;
	margin: 0 0 0 1em;
}
.headH{
	float: right;
	height: 2em;
	width: 2em;
	margin: 0.5em 1em 0.5em 0;
	background-image: url("uof.png");
	background-size: contain;
	background-repeat: no-repeat;
}


/* ==================
MAIN MENU
====================*/
.mainMenu{
	width: 100%;
}
.btn_main{
	height: 5rem;
	width: 12rem;
	margin: 0.3rem;
	line-height: 1.2em;
	background-color: #066f6f;
	color: #fff;
	font-variant: small-caps;
	font-weight: 500;
	font-size:1rem;
	box-shadow: inset -3px -3px 6px 0px rgba(0,0,0,0.4);
	cursor: pointer;
	border-radius: 10px;
}
.acti{
	padding: 0 10px;
	border-radius: 5px;
}
/* is aan */
.btn_main[data-pol="1"]{
	background: #395606;
}
/* is busy */
.btn_main[data-pol="2"]{
	background: #395606;
}
.btn_main[data-pol="2"] .acti{
	background: #990000;
	padding: 0 10px;
	border-radius: 5px;
}

/* is uit */
.btn_main[data-pol="3"]{
	background: #CC5500;
}
.btn_main[data-pol="3"] .acti{
	background: #fff;
	color: #CC5500;
}

/* is pending */


/* is error */
.btn_main[data-pol="9"]{
	background: #990000;
}