@charset "utf-8";
/* CSS Document */
/*settings for forms*/
/*
reserve:
#containerform{
	width:100%;
	max-width: 700px;
}
*/
#containerform{
	width:75%;
	max-width: 1028px;
}
.invul01{
	width:99%;
	padding-left: 1%;
	border:0;
	background-color:rgba(120,215,120,1.00);
	height:2em;
	margin-bottom:1em;
	font-size: 100%;
}
.invul01:hover, select:hover, select.invul02grey:hover, select.invul02green:hover{
	background-color:rgba(170,245,245,1.00);
}
select.invul02grey, input.invul02grey{
	width:99%;
	padding-left: 1%;
	border:0;
	background-color:#E6E6E6;
	height:2em;
	margin-bottom:1em;
	font-size: 100%;
}
select.invul02green, input.invul02green{
	width:99%;
	padding-left: 1%;
	border:0;
	background-color:rgba(120,215,120,1.00);
	height:2em;
	margin-bottom:1em;
	font-size: 100%;
}
select.invul02grey, select.invul02green{
	box-sizing: content-box;
}
input.invul01[value=""]{
	background-color:#E6E6E6;
}
input[id="otherValue"].invul03green{
	width:30%;
	border:0;
	background-color:rgba(120,215,120,1.00);
	height:2em;
	margin-bottom:1em;
	visibility: visible;
	display: inline;
	color: black;
}
input[id="otherValue"].invul03grey{
	width:30%;
	border:0;
	background-color:#E6E6E6;
	height:2em;
	margin-bottom:1em;
	visibility: hidden;
	display: inline;
	color: black;
}
input.totalhours{
	width:100%;
	padding-left: 1%;
	border:0;
	background-color:yellow;
	height:2em;
	marging-top:-2em;
	margin-bottom:1em;
	font-size: 100%;
	cursor: pointer;
}
input.yellow{
	background-color: rgba(255,255,72,1.0); /* yellow background */
}
textarea.invul01{
	width:99%;
	height: 10%;
	color:black;
	/*background-color:rgba(120,215,120,1.00);
	border: 1px solid #6E6E6E;
	overflow-y: scroll;*/
}
textarea.grey{
	background-color: #E6E6E6;
}
textarea.green{
	background-color: rgba(120,215,120,1.00);
}
/*onderstaand werkt niet bij textarea*/
textarea.invul01[value=""]{
	background-color:#E6E6E6;
}
.warning{
	color:red;
	display:inline;
	margin-bottom:1em;
}
.formsubjecttitel, .formsubjectcontent, .formsubjecthead, .formlink, div.accordion{
	display: block;
	width: 99%;
	/*max-width: 700px;*/
	padding-left: 1%;
	padding-top: 0.5em;
	padding-bottom: 0.5em;
	/*margin-right: 3%;*/
}
.formworkvisit{
	display: flex;
	width: 96%;
	max-width: 700px;
	padding-left: 1%;
	padding-top: 0.1em;
	padding-bottom: 0.1em;
	margin-top: 0;
	margin-bottom: 0;
	margin-right: 3%;
	border-bottom:solid thin #C7C7C7;
	background-color: #FFF;
}
.formworkvisithalf{
	
	width:50%;
	float:left;
}
.formworkvisiteenderde{
	display: inherit;
	width:39%;
	float:left;
	padding-right: 1%;
}
.formworkvisittweederde{
	display: inherit;
	width:60%;
	float:left;
}
.formsubjectfill{
	display: block;
	width: 100%;
	max-width: 700px;
	padding-left: 0%;
	padding-top: 0.5em;
	padding-bottom: 0.5em;
	/*margin-right: 3%;*/
}
.formsubjectfilltextarea{
	display: block;
	width: 97%;
	max-width: 700px;
	padding-left: 0%;
	padding-top: 0.5em;
	padding-bottom: 0.5em;
	margin-right: 3%;
}
/*
.formgeneral{
	display: block;
	width: 100%;
	max-width: 700px;
	padding-left: 0%;
	padding-top: 0.5em;
	padding-bottom: 0.5em;
}
reserve
*/
.formgeneral{
	display: block;
	width: 75%;
	max-width: 1028px;
	padding-left: 0%;
	padding-top: 0.5em;
	padding-bottom: 0.5em;
}
.formlink{
	color:#CC0000;
	background-color: #FFF;
	font-weight: bold;
	text-align: center;
}
.formlink:active, .formlink:hover {
    background-color: #000000;
	color: #fff;
}
.formlinkdriekwart{
	color:#CC0000;
	background-color: #FFF;
	font-weight: bold;
	text-align: center;
	width:73%;
	float:left;
	padding-top: 0.5em;
	padding-bottom: 0.5em;
}
.formlinkkwart{
	width:25%;
	float:left;
	cursor: pointer;
}
div.accordion{
	/*background-color: rgba(255,165,0,0.50);*/
	margin-bottom: 0.3em;
	cursor:pointer;
}
div.accordion:after {
    content: 'open\00a0\00a0';
    color: black;
    font-weight: bold;
    float: right;
    margin-left: 5px;
}
div.accordion.active:after {
    content: "close\00a0\00a0";
}
div.panelform {
    padding: 0 0px;
    background-color: transparent;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out;
}
.panelform.white{
	background-color: #FFF;
	width: 99%;
	padding-left: 1%;
}
.panelform.show {
 	opacity: 1;
 	max-height: 6000px;
	transition: max-height 0.4s ease-in;
}
.panelform.hide {
  opacity: 0;
  height: 0;
}
.formsubjecttitel{
	background-color: #E6E6E6;	
}
.formsubjectcontent{
	background-color: #FFF;
}
.formsubjectcontenthalf, .formsubjecttitelhalf, .formsubjectfillhalf, .formgeneralhalf, .formsubjectnofillhalf{
	width:50%;
	float:left;
}
.formsubjecttitelhalf.green{
	background-color:rgba(120,215,120,1.00);
	display: block;
	height:1.5em;
	margin-bottom:1em;
	padding-top: 0.5em;
}
.formsubjectcontentkwart, .formsubjecttitelkwart, .formsubjectfillkwart,.formgeneralkwart{
	width:25%;
	float:left;
}
.totalsumyear{
	text-align: right;
}
.formsubjectcontent3kwart, .formsubjecttitel3kwart, .formsubjectfill3kwart{
	width:75%;
	float:left;
}
.formsubjectcontentvijfde, .formsubjecttitelvijfde, .formsubjectfillvijfde,.formgeneralvijfde{
	width:20%;
	float:left;
	text-align: center;
}
.formsubjectfill10percent{
	width:7%;
	float:left;
	text-align: right;
}
.formsubjectfill40percent{
	width:43%;
	float:left;
	text-align: left;
}
div.totalhours{
	width:99%;
	padding-left: 1%;
	border:0;
	/*background-color:yellow;*/
	height:1.6em;
	padding-top: 0.4em;
	margin-bottom:1em;
	font-size: 100%;
}
div.totalhours.green, div.hoursperweek.green{
	background-color:rgba(120,215,120,1.00); 
}
div.totalhours.leeg, div.hoursperweek.leeg{
	background-color:#E6E6E6; 
	/*border-style: solid;*/
  	/*border-width: 0.01em;*/
}
.notapproved{
	background-color: rgba(255, 153, 0,1.00);
}
.approved{
	background-color: rgba(120,215,120,1.00);
}
.approved_readytosend{
	background-color: rgba(255,255,72,1.0);
}

.disapproved{
	background-color: #CC0000;
	color: #fff;
}
.send{
	background-color: rgba(0,160,0,1.00);
	color: #fff;
}
.workvisit{
	background-color: rgba(60,175,250,1.00);
	color: #fff;
}
.insufficient{
	background-color: #ae4c4c;
	color: #fff;
}
.sufficient{
	background-color: #4caf50;
	color: #fff;
}
.good{
	background-color: #4caeae;
	color: #fff;
}
.excellent{
	background-color: #4c7dae;
	color: #fff;
}
.formsubjecthead{
	background-color: rgba(255,165,0,0.50);
}
input.algemeen, button.algemeen{
	z-index: 1;
    cursor: pointer;
    width: 97%;
	padding-top: 0.5em;
	padding-bottom: 0.5em;
    border: none;
    text-align: center;
    outline: none;
    font-size: 100%;
    transition: 0.4s;
	margin-bottom: 0em;
	-webkit-appearance: none;
	-webkit-border-radius:0;
	-moz-border-radius:0;
}
input.rood{
	background-color: #CC0000;
    color: #fff;
}
input.groen{
	background-color: rgba(120,215,120,1.00);
    color: #fff;
}
input.white, button.white{
	background-color: #FFF;
	color:#000000;
}
button.yellow{
	background-color: rgba(255,255,72,1.0);
}
input.white:hover, button.white:hover, button.yellow:hover{
	background-color: black;
	color:#FFF;
}
.formgeneral input.groen{
	background-color: rgba(120,215,120,1.00);
    color: #fff;
}
#info{
	position: fixed;
	z-index: 10;
	width:91%;
	max-width: 400px; 
	height:400px;
	left:3%;
	top:230px;
	border: 1px solid rgba(0,115,255,1.00);
	display: none;
	color: rgba(0,115,255,1.00);
	background-color: rgba(193,236,252,0.90);
	padding: 2%;
}
#circle, #circle2{
	border-radius: 50%;
	width: 20px;
    height: 20px;
    background: #C1ECFC;
    border: 1px solid rgba(0,115,255,1.00);
	margin: 0 auto;
	display: block;
	float:left;
	cursor: pointer;
	text-align: center
}
#circle:after {
    content: 'i';
    color: rgba(0,115,255,1.00);
    font-weight: bold;    
}
#circle2:after {
    content: 'x';
    color: rgba(0,115,255,1.00);
    font-weight: bold;    
}
#circle:hover, #circle2:hover{
	background: rgba(255,255,72,1.0);
    border: 1px solid rgba(0,115,255,1.00);
}
/*css voor aantekeningen coaches*/
.note_head1, .note_head2, .note_head3{
	display: block;
	background-color: #FFF;
	width: 96%;
	max-width: 700px;
	padding-left: 1%;
	padding-top: 0.5em;
	padding-bottom: 0.5em;
	margin-right: 3%;
	margin-top: 0.5em;
	cursor: pointer;
}
.note_text1, .note_text2, .note_text3{
	display: block;
	background-color: #FFF;
	width: 99%;
	/*max-width: 700px;*/
	height: 200px;
	padding-left: 1%;
	padding-top: 0.5em;
	padding-bottom: 0.5em;
	/*margin-right: 3%;*/
	margin-bottom: 0.01em;
	border-top-style: solid;
	border-top-color: black;
	border-top-width: 0.05em;
}
textarea.text1, textarea.text2, textarea.text3, div.text1, div.text2, div.text3{
	display: block;
	background-color: #FFF;
	width: 99%;
	/*max-width: 700px;*/
	height: 200px;
	padding-left: 1%;
	padding-top: 0.5em;
	padding-bottom: 0.5em;
	/*margin-right: 3%;*/
	margin-bottom: 0.01em;
	overflow:hidden;
}
#wrap1,#wrap2,#wrap3{
	display:block;
}
#wrap21,#wrap22,#wrap23{
	display:block;
}
.notebc{
	background-color: rgba(170,245,245,1.00);
}
/* reserve
.head{
	display: block;
	width: 97%;
	max-width: 700px;
	padding-left: 0%;
	padding-top: 0.5em;
	padding-bottom: 0.5em;
	margin-right: 3%;
	margin-bottom: 0.3em;
	text-align: center;
	border-style: solid;
	border-color: black;
	border-width: 0.05em;
	background-color: #FFFFFF;
	font-weight: bold;
	text-transform: uppercase;
}
*/
.head{
	display: block;
	width: 64.8%;
	padding-top: 0.5em;
	padding-bottom: 0.5em;
	/*margin-right: 3%;*/
	margin-bottom: 0.3em;
	text-align: center;
	border-style: solid;
	border-color: black;
	border-width: 0.05em;
	background-color: #FFFFFF;
	font-weight: bold;
	text-transform: uppercase;
}