body { background-color: #DBF6FF; margin: 0px; font-size: 1em; font-family: arial;}
@media screen and (max-width: 825px) { body {font-size: 1.1em; } }

header { width: 800px; background-color: #DBF6FF; position: relative;} 
@media screen and (max-width: 825px) { header { width: 95%; } }

#menu {
				border: 3px solid black;
				border-radius: 3px 3px 3px 3px;
				cursor: pointer;
				display: block;
				height: 24px;
				padding: 3px 4px 3px;
				position: absolute;
				width: 25px;
				background: #DBF6FF;
				top: 10px;
				right: 10px;
}
#menu div {
    background-color: black;
    border: 1px solid black;
    border-radius: 2px 2px 2px 2px;
    height: 2px;
    margin-top: 3px;
	margin-bottom: 2px;
    width: 90%;
}
@media screen and (min-width: 825px) { #menu { display: none; } }

@media screen and (min-width: 825px) { .mob { display: none; } }
@media screen and (max-width: 825px) { .pc { display: none;} }

@media screen and (min-width: 825px) { #logo { width: 100%; z-index: -1;} }
@media screen and (max-width: 825px) { #logo { width: calc(100% - 60px); z-index: -1; float: left;} }
@media screen and (max-width: 600px) { #logo { width: calc(100% - 60px); z-index: -1; float: left; margin-top: 5px;} }
#mobiel_lijn { clear: both; border: 0; height: 1px; width: 100%; margin-top: 10px; background: #333; background-image: linear-gradient(to right, #ccc, #333, #ccc); }
@media screen and (min-width: 825px) { #mobiel_lijn { display: none; } }

nav { width: 100%; background-color: black; }
nav ul { padding: 0px; margin: 0px; list-style: none; text-align: left;}
@media screen and (max-width: 825px) { nav ul { width: 100%; } }
@media screen and (min-width: 825px) { nav  ul { width: 800px; } }
@media screen and (min-width: 825px) { nav ul li { float: left;} }
@media screen and (max-width: 825px) { nav ul li { border-bottom: 1px solid white;} }
@media screen and (max-width: 825px) { nav { display: none; width: 95%; } }
@media screen and (min-width: 825px) { nav { display: block; height: 30px; padding-top: 3px; padding-bottom: 3px;} }
nav a { padding: 5px; display: block; text-decoration: none; color: white; font-weight: bold; padding-right: 10px;}
@media screen and (max-width: 825px) { nav a { font-size: 1.1em; }}

.popup_bg { opacity: 0.85; background-color: black; width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
.popup { background-color: white; border: 2px solid black; width: 300px; min-height: 220px; position: absolute; top: calc(50% - 170px); left: calc(50% - 150px); }
.popupcontent { width: calc(100% - 10px); height: calc(100% - 20px); margin: 5px; }
.popup h3 { position: relative; margin: 0px; padding: 3px; font-size: 14px; background-color: black; color: white; }
.popup h3 a.sluit { position: absolute; top: -15px; right: -15px; }
.popup h3 a.sluit img { width: 25px; height: 25px; }
.popup a.knop { display: block; font-weight: bold; border: 1px solid #a8a8a8; background: linear-gradient(#ffffff,#eeeeee); padding: 5px; border-radius:8px; margin: 10px; text-decoration: none; color:black;}
.popup .benodigdbalk { width: calc(100% - 6px); height: 40px; padding: 3px; border: 1px solid black; margin: 3px 0px 3px 0px;}
.popup .benodigdbalk input[type=number]{ height: 100%; width: 17%; text-align: center; font-size: 1.5em; float: left; margin-right: 4px; border-style: none;}
.popup .benodigdbalk span { display: block; width: 80%; float: left; font-size: 0.9em;}

#main { width: 780px; padding: 10px; background-color: #DBF6FF; text-align: left;}
@media screen and (max-width: 825px) { #main { width: calc(95% - 20px); } }

h1 { font-size: 1.3em; color: black; font-weight: bold;}
h2 { font-size: 1.15em; color: black; font-weight: bold;}
a { color: red; }
hr { border: none; height: 1px; color: black; background-color: black;}

span.fouten_melding { display: block; border: 1px solid white; background-color: #ff4d4d; padding: 3px; color: black; margin-bottom: 5px;}
span.waarschuwing_melding { display: block; border: 1px solid black; background-color: #ffd24d; padding: 3px; color: black; margin-bottom: 5px;}
span.algemene_melding { display: block; border: 1px solid black; background-color: #f2f2f2; padding: 3px; color: black; margin-bottom: 5px;}


@media screen and (max-width: 825px) { 
#formulier label { display: block; margin: 3px 0px 3px 0px;}
#formulier input[type=text], input[type=password], input[type=time] { width: calc(100% - 8px); padding: 4px; font-size: 1em;}
#formulier select { width: 100%; padding: 4px; font-size: 1em;}
#formulier select.tijd { width: 80px; margin-right: 5px; float: left;}
#formulier input[type=submit] { width: 100%; padding: 4px; color: white; background-color: black; border: 1px solid white; font-size: 1em; margin-top: 5px;}
.selecteer_medewerkers { width: 100%; }
.selecteer_medewerkers .check { width: calc(15% - 8px); height: 22px; background-color: white; border-bottom: 1px solid black; padding: 4px; float: left;}
.selecteer_medewerkers input[type=checkbox] { width: 20px; height: 20px;}
.selecteer_medewerkers .naam { width: 85%; height: 30px; background-color: white; border-bottom: 1px solid black; float: left; }
.selecteer_medewerkers label { padding: 4px; display: block;}
}
@media screen and (min-width: 825px) { 
#formulier label { float: left; width: 150px; height: 25px; margin-bottom: 3px; }
#formulier input[type=text], input[type=password], input[type=time] { width: 400px; max-width: 100%; float: left; padding: 3px; font-size: 1em; height: 25px; margin-bottom: 3px;}
#formulier select { width: 406px; max-width: 100%; float: left; padding: 3px; font-size: 1em; height: 25px; margin-bottom: 3px;}
#formulier select.tijd { width: 80px; max-width: 100%;margin-right: 5px; float: left;}
#formulier input[type=submit] { width: 142px; padding: 3px; color: white; background-color: black; border: 1px solid white; font-size: 1em; margin-top: 5px;}
.selecteer_medewerkers { width: 558px;}
.selecteer_medewerkers .check { width: calc(15% - 8px); height: 22px; background-color: white; border-bottom: 1px solid black; padding: 4px; float: left;}
.selecteer_medewerkers input[type=checkbox] { width: 22px; height: 22px;}
.selecteer_medewerkers .naam { width: 85%; height: 30px; background-color: white; border-bottom: 1px solid black; float: left; }
.selecteer_medewerkers .naam label { padding: 4px; display: block; width: 100%;}
}

@media screen and (max-width: 825px) { 
.linksh, .linkstd, .rechtsh, .rechtstd { width: 100%; margin-bottom: 10px;}
}
@media screen and (min-width: 825px) {
.linksh { width: calc(50% - 10px); float: left; margin-right: 10px;}
.linkstd { width: calc(66.6666666% - 10px); float: left; margin-right: 10px;}
.rechtsh { width: calc(50% - 10px); float: left; margin-left: 10px;}
.rechtstd { width: calc(33.3333333% - 10px); float: left; margin-left: 10px;}
}
@media screen and (max-width: 825px) { 
.knop { display: block; position: relative; margin: 3px 0px 3px 0px; text-decoration: none; font-weight: bold; font-size: 1.5em; color: black; border: 2px solid black; padding: 4px; text-align: center; border-radius: 4px; background-color: white;}
.knop img { height: 25px; width: 25px; position: absolute; top: 5px; left: 5px;}
}
@media screen and (min-width: 825px) { 
.knop { float: left; position: relative; margin: 3px 10px 3px 0px; text-decoration: none; font-weight: bold; font-size: 1.1em; color: black; border: 2px solid black; padding: 3px 10px 3px 10px; text-align: center; border-radius: 4px; background-color: white;}
.knop img { height: 22px; width: 22px; position: absolute; top: 2px; left: 5px;}
}

/* calendar */
@media screen and (max-width: 825px) { 
	#maand { font-size: 1em;}
	#jaar { font-size: 1em;}
	#bedrijf { width: 100%; font-size: 1em;}
}
table.calendar		{ border-left:1px solid #999; width: 100%; }
tr.calendar-row	{  }
td.calendar-day	{ font-size:1em; position:relative; text-align: center; background-color: white;} * html div.calendar-day { height:80px; }
td.calendar-day:hover	{ background:#eceff5; }
td.calendar-day-np	{ background:#eee;  } * html div.calendar-day-np { height:80px; }
td.calendar-day-head { background:black; color: white; font-weight:bold; text-align:center; width:130px; padding:5px; border-bottom:1px solid #999; border-top:1px solid #999; border-right:1px solid #999; }
div.day-number		{ position:relative;  background:#999; padding:5px; color:#fff; font-weight:bold; float:right; margin:-5px -5px 0 0; width:20px; text-align:center; }
/* shared */
td.calendar-day, td.calendar-day-np { width:14%; border-bottom:1px solid #999; border-right:1px solid #999; }	
td.calendar-day a { text-decoration: none; padding: 5px; color: black; display: block;}

table.lijst { border: 1px solid black; width: 100%; border-spacing: 0px; border-collapse: separate; font-size: 0.9em; }
table.lijst th { background-color: black; color: white; font-weight: bold; padding: 3px; }
table.lijst td { background-color: white; color: black; border-bottom: 1px solid #eee;}
table.lijst a { color: black; text-decoration: none; padding: 3px; display: block;}
table.lijst tr:hover td { background-color: #eee; }
table.lijst td.subtitel { background-color: #eee; }

@media screen and (max-width: 825px) { 
.overzicht { width: 100%; background-color: white; border: 1px solid #eee; margin-bottom: 10px;}
.label { display: block; padding: 3px;}
.data { display: block; padding: 3px; border-bottom: 1px solid #eee; font-weight: bold;}

}
@media screen and (min-width: 825px) { 
.overzicht { width: 100%; border: 1px solid #eee; margin-bottom: 10px;}
.label { width: 100%; background-color: white; padding: 3px; border-bottom: 1px solid #eee; float: left;}
.data { width: 100%; background-color: white; padding: 3px; border-bottom: 1px solid #eee; font-weight: bold; float: left;}
}

@media screen and (min-width: 600px) { 
.planningvak { width: 100%; background: white; position: relative;}
.planningvak .tijd { width: calc(4.16% - 1px); background: white; border-left: 1px solid #eee; float: left; font-size: 0.7em;}
.planningvak .plan { position: absolute; height: 25px; overflow: hidden;}
.planningvak .plan a { text-decoration: none; display: block; padding: 4px 2px 3px 2px; font-size: 0.7em; overflow: hidden;}
.planningvakklein { display: none; }
}
@media screen and (max-width: 600px) { 
.planningvak { display: none; }
}
@media screen and (min-width: 1000px) {
.planningvak { width: 1000px; margin-left: -100px; margin-right: -100px; }
}
@media screen and (min-width: 1200px) {
.planningvak { width: 1200px; margin-left: -200px; margin-right: -200px; }
}
@media screen and (min-width: 1400px) {
.planningvak { width: 1400px; margin-left: -300px; margin-right: -300px; }
}
@media screen and (min-width: 1600px) {
.planningvak { width: 1600px; margin-left: -400px; margin-right: -400px; }
}

@media screen and (min-width: 825px) { .deel { float: left; margin-right: 10px; } }
@media screen and (max-width: 825px) { .deel { width: 100%;} }

@media screen and (min-width: 825px) { 
.helft_links { width: calc(50% - 5px); float: left; margin-right: 10px; }
.helft_rechts { width: calc(50% - 5px); float: left; }
.helft_links img { width: 70%; height: auto; }
.helft_rechts img { width: 100%; height: auto; }
.knop { float: left; position: relative; margin: 3px 10px 3px 0px; text-decoration: none; font-weight: bold; font-size: 1.1em; color: black; border: 2px solid black; padding: 3px 10px 3px 10px; border-radius: 4px; background-color: white; background: linear-gradient(#ffffff,#f1f1f1); }
.knop img { height: 22px; width: 22px; position: absolute; top: 2px; left: 5px;}
}
@media screen and (max-width: 825px) { 
.helft_links { width: 100%; }
.helft_rechts { width: 100%; margin-top: 10px; }
.helft_links img, .helft_rechts img { width: 100%; height: auto; }
.knop { display: block; width: 100%; position: relative; margin: 3px 0px 3px 0px; text-decoration: none; font-weight: bold; font-size: 1.5em; color: black; border: 2px solid black; padding: 4px; border-radius: 4px; background-color: white; background: linear-gradient(#ffffff,#f1f1f1);}
.knop img { height: 25px; width: 25px; position: absolute; top: 5px; left: 5px;}
}
.statistiekvak { width: 100%; background-color: white; border: 1px solid grey; font-size: 0.9em; margin-bottom: 10px; }
.statistiekvak_titel { font-weight: bold; padding: 5px;}
.statistiekvak_tekst { padding: 5px; }
.statistiekvak_container { height: 30px; width: height: 30px; width: calc(100% - 10px); margin: 4px; border: 1px solid grey;}
.statistiekvak_label { height: calc(100% - 5px); width: 45px; padding-top: 5px; text-align: center; background-color: grey; color: white; float: left;}
.statistiekvak_bar { height: 100%; width: calc(100% - 90px); float: left;}
.statistiekvak_bar_groen { height: 100%; background: linear-gradient(#00ff00,#00cc00,#00ff00); float: left;}
.statistiekvak_bar_rood { height: 100%; background: linear-gradient(#ff0000,#cc0000,#ff0000); float: left;}


#signature{
width: 90%; max-width: 350px; height: 150px;; border: 1px solid grey; position: relative; }
#signature canvas { width: 100%; height: 100% !important; }
#leegmaken { position: absolute; top: 3px; right: 3px; font-size: 1.5em; }