@import "reset.css";
body{background-color:#fff;font-family:Arial;font-size:14px;margin:0px;color:#002868;}
a{color:#000;}
a:hover{color:#f60;}
.err{color:#c00;}
.wrapper{width:100%;max-width:900px;background-color:#eee;margin:0px auto;padding:30px;padding-top:10px;box-sizing:border-box}
.totaal{font-weight:bold;font-size:12px;}
input{width:150px;font-size:12px;padding:0px;margin:1px;border:solid 1px #aaa;}
select{padding:0px;margin:1px;border:solid 1px #aaa;}
h1{margin:0px;padding:0px;font-size:20px;}
#fout{color:#c00;}
.clearfix:after { content: ".";display: block; height: 0;clear: both;visibility: hidden;}
.clearfix {display: inline-block;}  /* for IE/Mac */
.clear{clear:both;}

#header{background-color:#86b9f0;color:#fff;width:100%;text-transform:uppercase;font-size:12px;}
#header div{border-right:solid 1px #fff;}

#nieuws{background-color:#fff;padding:20px;margin-bottom:10px;}
#nieuws h2{font-weight:bold;}
.nieTitel{text-transform:uppercase;text-decoration:none;}
.nieDat{margin-top:10px;}
.div50{float:left;width:50%;}
.nieTekst{display:none;margin-top:10px;padding:10px;border:solid 1px #eee;}
.totFWerkn{display:inline-block;margin-left:20px;}
.totTit{font-weight:bold;width:auto;color:#fff;padding:5px;width:100%;box-sizing:border-box;border-right:solid 5px #eee;}
.weekLnk{display:inline-block;width:160px;text-decoration:none;}
.subClima,.subClima3{background-color:#002868;color:#fff;padding:5px;cursor:pointer;text-decoration:none;text-transform:uppercase;display:inline-block;margin:0px 0px 5px 0px;text-align:center;box-sizing:border-box}
.subClima{width:160px;}
.subClima3{width:120px;}
.statusBtnO,.statusBtnG,.statusBtnP,.statusBtnB{border-radius:5px;padding:5px;text-decoration:none;display:inline-block;width:160px;text-align:center;box-sizing:border-box;text-transform:uppercase;}
.statusBtnO{background-color:#a70d00;color:#fff;}
.statusBtnO:hover{background-color:#640000;color:#fff;}
.statusBtnG{background-color:#606700;color:#fff;}
.statusBtnG:hover{background-color:#152400;color:#fff;}
.statusBtnP{background-color:#9a2398;color:#fff;}
.statusBtnP:hover{background-color:#59005d;color:#fff;}
.statusBtnB{background-color:#3470a3;color:#fff;}
.statusBtnB:hover{background-color:#002b50;color:#fff;}
a.vll{background-color:#fff;padding:2px;color:#000;font-weight:bold;text-decoration:none;border-radius:10px;padding-left:5px;padding-right:5px;}
a.vll:hover{background-color:#ff9900;}
#klad{visibility:hidden;}
td{margin:0px;padding:0px;}
.delErr{color:#000;font-weight:bold;}
#herrError{color:#c00;}
.dateCheckOk,.dateCheckNot,.dateCheckKlad{display:block;padding:5px;text-decoration:none;}
.dateCheckOk{background-color:#86b9f0;}
.dateCheckNot{background-color:#f60;color:#fff;}
.dateCheckKlad{background-color:#CCCC33;color:#fff;}
.dateCheckOk:hover,.dateCheckNot:hover,.dateCheckKlad:hover{background-color:#002868;color:#fff;}
#download{background-color:#f60;padding:20px;height:27px;text-transform:uppercase;color:#fff;text-decoration:none;font-size:20px;display:inline-block;margin-top:1px;}
#download:hover{background-color:#c00;}
#circles{width:100%;margin-bottom:20px;background-color:#ddd;padding:10px 0px 10px 0px;border-bottom:solid 1px #002868;}
.uurCircle{float:left;widows: 10px;text-align:center;font-weight:bold;}
.circle2,.circle3,.circle4{background-color:#002868;color:#fff;text-align:center;margin:5px 20px 0 20px;;border-radius:100%;padding:15px 0 15px 0;font-size:15px;width:50px;display:inline-block;font-weight:bold;}
.circle3{background-color:#c00;color:#fff;}
.circle4{border:solid 2px #c00;}
.fl50{float:left;width:50%;}
.fl40{float:left;width:40%;}
.fl60{float:left;width:60%;}
.fl30{float:left;width:30%;}
.fl70{float:left;width:70%;}
.pijltjes{font-size:18px;}
a.naamDown2{cursor:default;}
a.naamDown2:hover{cursor:default;}
a.naamDown:hover{color:#f60;}
a.overweek:hover{color:#f60;}

.verlofInd,.overzOpenst{color:#f60;text-decoration:none;background-color:#fff;padding:10px;margin-top:10px;border-radius:10px;display:block;text-transform;}
.verlofInd:hover,.overzOpenst:hover{background-color:#f60;color:#fff;text-decoration:none;}
.openstaand{display:block;text-decoration:none;padding:10px;background-color:#ddd;border-bottom:solid 1px #fff;text-transform:uppercase;}
.openstaand:hover{background-color:#f60;color:#fff;}
.nakijken{font-size:14px;color:#fff;display:inline-block;padding:3px;border-radius:5px;text-decoration:none;background-color:#f60;text-transform:uppercase;}
.nakijken:hover{background-color:#fff;color:#f60;}


.statusbox{margin:0px;padding:0px;width:100%;text-align:center;margin-bottom:10px;box-sizing:border-box;background-color:#fff;border-bottom-right-radius:5px;border-bottom-left-radius:5px;}
.nietCor{background-color:#c00;color:#fff;padding:5px;width:100%;text-align:center;box-sizing:border-box;margin-bottom:5px;}
.btn{width:80px;background-color:#002868;color:#fff;border:solid 0px #fff;cursor:pointer;padding:5px;text-decoration:none;}
.btn:hover{background-color:#f90;}

#statusbox{float:left;width:50%;box-sizing:border-box;padding:0 0px 0px 30px;}
#days{float:left;width:50%;}
.day{width:30%;}
.adjust{width:55%;padding-bottom:15px;}
.addDay{width:15%;}

#werknemer{float:left;width:40%;}
#datums{float:left;width:40%;}
#btns{float:left;width:20%;}
.tsnSel{display:none;}
.tsnCircle{display:none;}

#totaalTabel div .clear {clear:both;}
#header div{text-align:center;}
.naam a{color:#000;text-transform:uppercase;text-decoration:none;}
.wrapper2{width:1030px;margin:0px auto;}
.werk{display:none;}

#totaalTabel div div,#totaalTabel div div div{float:left;width:45px;padding:2px 3px 2px 3px;;text-align:center;}
#totaalTabel div div.naam{width:200px;text-align:left;}
.verlDiv{width:100%;}
.verl{float:left;width:25%;backgroubnd-color:#c00;text-align:center;}
.verlNeg{color:#c00;}
.verlPos{color:#002868;border:solid 1px #002868;box-sizing:border-box;border-radius:3px;}
@keyframes blinker {
  50% {
    opacity: 0;
  }
}


@media screen and (max-width: 1130px) {
	#statusbox{width:90%;padding:0;margin:0px auto;}
	#days{width:90%;padding:0;margin:0px auto;}
	
}
@media screen and (max-width: 850px) {
	.row{padding-left:30px;}
	body{font-size:18px;}
	#days{width:100%;}
	.wrapper{padding:10px;}
	.day{width:100%;}
	.adjust{width:80%;padding-bottom:15px;}
	.addDay{width:15%;}
	#werknemer{float:left;width:100%;}
	#werknemer{}
	#datums{float:left;width:100%;}
	#btns{float:left;width:100%;}
	.brr{display:none;}
	.uurCircle{width:24%;}
	.pijltjes{font-size:30px !important;margin-left:7px;}
	.tsnSel{display:block;}
	.day{padding-left:30px;box-sizing:border-box;}
	.tsnCircle{display:block;}
	.div50{width:100%;}
}