* {
  box-sizing: border-box;
}
body, html {
  margin:0px;
  padding:opx;
  background-color:#E9E9E9;
  font-family:verdana;
  height:100%;
}  
#submitdiv {
  display:none;
}
#popup {
  position:absolute;
  top:10%;
  left:25%;
  height:80%;
  width:50%;
  background-color:#dddddd;
  border:solid black 1px;
  border-radius:5px;
  overflow:auto;
  display:none;
  padding:10px;
  padding-bottom:50px; 
}
#popupbuttonbar {
  position:fixed;
  left:25%;
  height:40px;
  width:50%;
  bottom:10%;
  background-color:#dddddd;
  border:solid black 1px;
  border-top:none;
  border-radius:5px;
}

.logindiv {
  position:absolute;
  top:10%;
  left:25%;
  width:380px;
  left:50%;
  margin-left:-190px;
  background-color:#cccccc;
  border:solid black 1px;
  border-radius:5px;
  padding:10px;
  line-height:25px;
}
.logindiv div {
  overflow:auto;
}
.logindiv h3 {
  text-align:center;
}
.logindiv a {
  display:block;
  text-align:center;
  padding:5px;
  color:black;
  text-decoration:none;
  font-size:12px;
}
.logindiv a:hover {
  text-decoration:underline;
}  
.logindiv .field {
  width:180px;
  float:left;
  text-align:right;
}  

.sidebar {
  width:200px;
  padding:10px;
  background-color:#dddddd;
  height:100%;
  position:absolute;
  top:0px;
}
.sidebar a {
  display:block;
  padding:8px;
  text-decoration:none;
  font-weigth:bold;
  color:black;
  border-bottom:solid black 1px;
}
.sidebar a:hover {
  ttext-decoration:underline;
  background-color:white;
}  
.content {
  position:absolute;
  height:100%;
  width:100%;
  padding:30px;
  background-color:#eeeeee;
  overflow:auto;
}
.cindent {
  width:calc(100% - 200px);
  left:200px;
}
.inputfield {
  height:60px;
  padding:5px;
}
.naarexcel {
  background-image:url(Office_Excel_2007_logo.svg);
  background-size:30px;
  background-repeat:no-repeat;
  background-position:90%;
  height:48px;
  padding:5px;
  font-size:12px;
  border:solid #8f8f9d 1px;
  border-radius:3px;
  background-color:#e9e9ed;
  cursor:pointer;
  margin:5px 0;   
}
.naarexcel:hover {
  background-color:#d0d0d7;
}
.csv {
  background-image:url(csv.svg);
}

.leeg {
  background-image:none;
}

.pdf {
  background-image:url(PDF_file_icon.svg);
}

.inputfield input {
  width:100%;
  padding:20px 0 5px 8px;
  font-size:16px;       
}
.inputfield select {
  width:100%;
  padding:20px 0 5px 8px;
  font-size:16px;       
}
.inputfield label {
  display:block;
  font-size:12px;
  margin:-44px 0 0 6px;
}

.inputsubfield {
  height:50px;
  padding:1px;
  margin:0;
}
.inputsubfield input {
  width:100%;
  padding:20px 0 5px 8px;
  font-size:16px;       
}
.inputsubfield select {
  width:100%;
  padding:20px 0 5px 8px;
  font-size:16px;       
}
.inputsubfield label {
  display:block;
  font-size:12px;
  margin:-44px 0 0 6px;
}

.formbutton {
  float:right;
  height:40px;width:160px;
  font-size:20px;
}
.formtable {
  width:100%;
}
.cb {
  cursor:pointer;
}   
.cb:hover {
  background-color:#ffffff;
}   
.cbb {
  cursor:pointer;
  padding:0 5px;
  border: outset black 2px;
  text-align:center;
}   
.cbb:hover {
  background-color:#ffffff;
}   
.formtable th{
  line-height:30px;
  text-align:left;
  border-bottom:solid black 1px;
}
.formtable td{
  line-height:30px;
  text-align:left;
  border-bottom:solid black 1px;
}
.heading {
  width:100%;
  background-color:#eeeeee;
  padding:5px;
  margin-bottom:30px;
  font-weight:bold;
  font-size:20px;
  text-align:center;
  border-radius:5px;
}  
/* timehood specific */

.logo {
  background-size:160px;
  line-height:25px;
  background-position:top -10px center;
  background-repeat:no-repeat;
  border:solid #2d4687 5px;
  height:150px;
  border-radius:15px;
  background-image:url('logo.svg');
  width:180px;
  margin:auto;
}
.formline {
  overflow:auto;
  line-height:25px;
  padding-bottom:3px;
  border-bottom:solid black 1px;
  width:100%;
}
.formheader {
  overflow:auto;
  line-height:30px;
  border-bottom:solid black 1px;
  width:100%;
  font-weight:bold;
}
.formcell {
  overflow:auto;
  float:left;
  min-height:20px;
  width:20%;
}

.w10 {
  width:10%;
}

.w6 {
  width:6%;
  font-size:12px;
}

.w8 {
  width:8%;
}

.w15 {
  width:15%;
}

.klikbaar {
  cursor:pointer;
}

.klikbaar:hover {
  background-color:white;
}

.b1 {
  font-size:20px;
  text-color:red;
}

.mnd {
  width:50px;
  height:35px;
  text-align:center;
  border:solid black 1px;
  border-radius:5px;
  margin:2px;
  font-size:24px;
  font-weight:bold;
  float:left;
  text-decoration:none;
  color:#333333;  
}
.mnd:hover {
  background-color:white;
}

.ybt {
  float:right;
  text-decoration:none;
  border:solid black 1px;
  border-radius:5px;
  padding:5px;
  margin:5px;
  color:black;
}
.ybt:hover {
  background-color:#ffffff;
}  

.mnd {
  width:50px;
  height:35px;
  text-align:center;
  border:solid black 1px;
  border-radius:5px;
  margin:2px;
  font-size:24px;
  font-weight:bold;
  float:left;
  text-decoration:none;
  color:#333333;  
}
.mnd:hover {
  background-color:white;
}

.scel {
  margin:1px;
  width:30px;
  border:solid black 1px;
  height:30px;
  float:left; 
  text-align:center;
  font-face:verdana;
  cursor:pointer;
}
.hl > :first-child {
  background-color:#aaaaaa;
}
.hl > :first-child:hover {
  background-color:white;
}
.scel:hover {
  background-color:white;
}  
.scel > :first-child {
  width:30px;
  height:30px;
  font-size:20px;
}

#dagroosterbox {
  display:none;
  position:absolute;
  background-color:#eeeeee;
  border:solid black 1px;
  border-radius:5px;
  line-height:30px;
  padding:3px;
}

.clockbut {
  background-color:#ddeedd;
  padding:20px;
  margin:10px;
  text-align:center;
  border-radius:5px;
  font-weight:bold;
  font-size:20px;
}

.clockfield {
  height:60px;
  padding:20px;
  border-radius:5px;
  font-weight:bold;
  font-size:20px;
}

.clockhead {
height:50px;font-weight:bold;font-size:25px;text-align:center;
}

.clockpanel {
width:calc(33% - 20px);height:100%;background-color:#dddddd;float:left;margin:0 10px;border-radius:5px;overflow:auto;
}

.clockelem {
background-color:#ddeedd;width:calc(100% - 20px);margin:10px 10px 0 10px;padding:10px;border-radius:5px;float:left;
}

#selectbox {
position:absolute;width:600px;left:-300px;margin-left:50%;top:50px;background-color:#eeffee;border-radius:5px;padding:10px;display:none;
}

.clockpanhead {
text-align:left;font-size:20px;padding:5px;background-color:#cccccc;border-radius:5px;
}

.editfield {
  font-size:18px;
  width:100%;
}