/*Algemeen*/
 
* {
  box-sizing: border-box;
}


html,body{margin:0;padding:0}
body{font-size:    11px;
     font-family:  verdana;
     text-align: center;
     background: #FFF ;
     padding: 0px 0px}
p{margin:0}
h1{font: normal normal 16pt verdana}
h2{font-size:16px}
h3{font-size:14px; font-weight: normal; color:#195ea9; margin:5px 0 10px auto; padding:0;}
h4{font-size:12px; font-weight: normal; color: #195ea9; margin:10px 0 0px; padding:0;}
h5{font-size:11px; font-weight: normal; color:#195ea9; margin:0px 0 10px;}
h6{font-size:11px}
table{border-collapse: collapse;}
td,th {
  font-size:    11px;
  font-family:  Verdana;
  color:        black;
}

.button {
        border: 1px Chocolate solid;
        background-color: #ffffff;
        font-family:Verdana;
        font-size: 11px;
}
.input {
  font-size:    12px;
  font-family:  Verdana;
  color:        #000000;
}
a{text-decoration:none; color:blue }
a:hover{color: #cc0033;text-decoration:none; }

.roostertabel td{
    border: 1px solid rgba(74,74,74,1.00); 
    padding: 0px 0px;
}
.roostertabel tbody{
    border: 1px solid rgba(74,74,74,1.00); 
    padding: 0px 0px;
}
/*.hover_tbl td {background-color: white;}*/
.hover_tbl tr td.problemen {background-color: lightgrey;}
.hover_tbl tr:hover td{background-color: lightblue;}


.dashboard_tabel td {background-color: white;}
.dashboard_tabel tr:hover td{background-color: lightblue;}

span#roosterwensen{font-size:11px}
span#roosterwensenmnd{font-size:12px;   }

div#totaalcontainer {width:1850px; height:auto; margin:0 auto; padding:0 0; text-align:left; vertical-align:middle; border: 0px solid black; background: #C8C8C8 }
div#titel {width:auto; height:auto; margin:0 auto; padding:10; display: flex; justify-content: space-between; border: 0px solid red; background: #195ea9}
div#titel h1{display: inline-block;margin:5px; padding:10px; font: normal normal 30px verdana; color: white; background: transparent;}
p#welkom_naam{display: inline-block; align-self: flex-end; margin:5px; align:right; padding:10px; font: normal normal 10px verdana; color: white; background: transparent;}
div#hoofdcontainergroot{clear: both;width:1800px;height:auto;margin:25px 25px; padding:0 0 0 0 ;border: 0px solid black; background: #C8C8C8 }
div#onderhoofdcontainer{clear: both;width:1850px;height:44px;margin:0 0 ; padding:22px 0 0 0 ;text-align:center;color:#FFF; border: 0px solid #c91e00; background: #195ea9}
div#hoofdcontainer{clear: both;width:auto;height:auto;margin:15px 5px 10px; padding:10px 3px 10px 20px ;border: 2px solid #195ea9; background: #FFF;}

div.mijnrooster{float: left; width:auto;height:auto;margin:15px 5px 10px; padding:10px 20px ;border: 2px solid #195ea9; background: #FFF;}
div#mijnrooster_info{width:600px;height:auto;}

div#algemeen{margin:0px 0px 10px 0px; padding:0 0 0 0; background-color: transparent;}
div#tekst{float:left;width:320;height:130;margin:5px 5px 15px; padding:0 0 0 0 ;}
div#menu1{float:left;width:150;height:auto;margin:5px 5px 5px; padding:0 0 0 0 ;border: 1px solid blue; background: #FFF;}
div#menu2{float:left;width:150;height:auto;margin:5px 5px 5px; padding:0 0 0 0 ;border: 1px solid blue; background: #FFF;}
div#menu3{float:left;width:150;height:auto;margin:5px 5px 5px; padding:0 0 0 0 ;border: 1px solid blue; background: #FFF;}
div#menu1 ul{list-style-type:none;margin:0;padding:0;font: normal normal 16px verdana}
div#menu2 ul{list-style-type:none;margin:0;padding:0;font: normal normal 16px verdana}
div#menu3 ul{list-style-type:none;margin:0;padding:0;font: normal normal 16px verdana}

.menu_alg {float: left;width:500;height:auto;margin:0 20px 10px ;padding:0px 0 0;text-align:left; border: 0px solid #195ea9;background: red}
.menu_alg ul{list-style-type:none;width:auto;height:auto;margin:0;padding:0;font: normal normal 14px verdana; background: #C8C8C8}
/*div#menu_alg li{float: left;width:200;height:30;margin:auto ;padding:15px 0 0;text-align:center; border: 0px solid #195ea9;background: #C8C8C8}
*/
.menu_alg a:hover{color: yellow;text-decoration:none; }
.actievelink a{color: yellow;text-decoration:none;}
.gewonelink a{color:#195ea9; text-decoration:none;}

.roosterlink a{color:black; text-decoration:none;}

div.weekroosterDiv {float: left; border: 0px solid  rgba(252,0,4,1.00); margin:0px 10px 10px 0px;}
table#weekrooster {border-collapse: collapse; border: 1px solid black;}
table#weekrooster {border-collapse: collapse; border: 1px solid black;}
table#weekrooster tr{border-collapse: collapse; border: 1px solid black;}
table#weekrooster td{width: 170px; word-wrap: normal; border: 1px solid  black; padding:5px 5px 5px 5px;}
table#weekrooster th{border: 0px solid rgba(35,34,207,1.00) ;}
table#weekrooster td>span{border: 0px solid rgba(43,192,97,1.00) ;display: block;}
.erin{color: orange; border: 1px solid blue;}
/*div.weekroosterDiv td:has(button){background-color: red;}*/

.forestgreen {background-color: rgba(35,100,25,0.30);}
.chocolate {background-color: rgba(200,114,39,0.40) ;}
.cornflowerblue {background-color: rgba(40,117,197,0.50);} /*rgba(40,117,197,0.70)*/
.grey {background-color: rgba(117,117,117,0.32);}
.lightyellow {background-color: rgba(246,255,157,0.33);}
.lightgrey{background-color: rgba(117,117,117,0.32);}
.erinmodal23 {display: none; background-color: transparent; color: grey; border: 0px solid blue; width:15px;height:15px;text-align:center;padding:0px 0 0;}
.erinmodal231 {display: none; background-color: transparent; color: grey; border: 0px solid blue; width:15px;height:15px;text-align:center;padding:0px 0 0;}
.erinmodal232 {display: none; background-color: transparent; color: grey; border: 0px solid blue; width:15px;height:15px;text-align:center;padding:0px 0 0;}

div#persoon_toevoegen{background-color: rgba(147,144,144,0.21);border: 1px solid grey;}
h4.toevoegen{
    cursor: default;
    padding: 0px 5px 0px 5px
 }
ul.toevoeglijst{
    list-style-type:none
 }
ul.toevoeglijst li{
    margin: 5px 0px;
 }

span.OK{
    cursor: default;
    
 } 
span.bijz{
    cursor: default;
 } 
.btn_bijz{
   background-color: rgba(0,193,4,0.54); color: black; border: 1px solid rgba(0,146,0,1.00); 
}

/*eerste modal op weekrooster*/
.modal{
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

.modal-content {
  background-color: #efefef;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 0px 0px 8px 0px;
  border: 1px solid #888;
  width: 800px; /* Could be more or less, depending on screen size */
}
.modal-content h1{
  background-color: #195ea9;
  border: 0px solid #888;
  color: white;
  margin: 0px 0 5px 0;
    padding: 0 0 8px 8px;
}
.modal-dienst-aanpassen{
   display: none; 
}

.close{
    display: block;
  background-color: #195ea9;
  border: 0px solid #888;
  color: white; 
  width: 100%;
  font-size: 20px;
    text-align: right;
    padding: 0px;
    cursor: default;
}
#modal-txt button{
    width: 50%;
    color: white;
    text-align: left;
    background-color:  RGBa(25, 94, 169, 0.7);
    border: 1px solid #888;
    margin: 1px 1px 1px 8px;
    padding: 5px;
}

/*tweede modal op weekrooster*/
.modal2{
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
.modal-content2 {
  background-color: white;
  margin: 17% auto; /* 15% from the top and centered */
  padding: 0px 0px 8px 0px;
  border: 2px solid #195ea9;;
  width: 400px; /* Could be more or less, depending on screen size */
}
.modal-content2 h1{
  background-color: #195ea9;
  border: 0px solid #888;
  color: white;
  margin: 0px 0 5px 0;
    padding: 10px 10px 10px 10px;
   font-size: 14px; 
}
.modal-content2 p{
  text-align: center;
}
span#ja{
   display: inline-block;
    height: 46px;
    width: 100px;
    background-color: green;
    color: white;
    margin: 10px;
    text-align: center;
    padding: 15px 0px;
    font-size: 14px;
    border: 1px solid black;
    cursor: default;
}
span#nee{
   display: inline-block;
    height: 46px;
    width: 100px;
    background-color: red;
    color: white;
    margin: 10px;
    text-align: center;
    padding: 15px 0px;
    font-size: 14px;
    border: 1px solid black;
    cursor: default;
}

/*modal op roosterwens*/
div#modal-roosterwens p{
  background-color: #efefef;
  border: 0px solid #888;
  color: black;
  margin: 0px 0 0px 0;
  padding: 5px 10px 5px 20px;
  font-size: 12px; 
}
button#invoeren_feest{
    border: 1px darkgreen solid;
    background-color: forestgreen;
    font-size: 12px;
    color: white;
    margin: 5px 0 10px 30px;
    padding: 5px 5px 5px 5px;
}
div#roosterwens_algemeen{
    float: left;
    background-color: white;
    color: black;
    margin: 10px 10px 20px 10px;
    padding: 15px 15px;
    border: 1px solid black;
    height: auto;
    width: auto;
}
div#roosterwens_wensen_datum{
    clear: both;
    background-color: rgba(152,151,151,0.17);
    color: black;
    margin: 10px;
    padding: 15px 15px;
    border: 1px solid black;
    height: auto;
    width: 400px;
}
div#roosterwens_wensen_datum tr:hover td{background-color: ghostwhite;}

div#roosterwens_dec{
    float: left;
    background-color: rgba(152,151,151,0.17);
    color: black;
    margin: 10px 10px 20px 10px;
    padding: 15px 15px;
    border: 1px solid black;
    height: auto;
    width: auto;
}
div#roosterwens_dec p{
    background-color: transparent;
  border: 0px solid #888;
  color: black;
  margin: 0px 0 0px 0;
  padding: 5px 10px 5px 20px;
  font-size: 12px; 
}
button#invoeren_feest_alg{
    border: 1px darkgreen solid;
    background-color: forestgreen;
    font-size: 12px;
    color: white;
    margin: 5px 0 10px 30px;
    padding: 5px 5px 5px 5px;
}

/*onderwijs rooster*/

div#onderwijs_rooster{
    float: left;
    background-color: rgba(152,151,151,0.17);
    color: black;
    margin: 10px;
    padding: 15px 15px;
    border: 1px solid black;
    height: auto;
    width: 1200px;
}
div#onderwijs_rooster h4{
    font-size: 14px;
    margin: 20px 0px 10px 0px;
}
.onderwijs_legenda{
    float: left;
    background-color: rgba(152,151,151,0.17);
    color: black;
    margin: 10px;
    padding: 15px 15px;
    border: 1px solid black;
    height: auto;
    width: 500px;
}
.onderwijs_legenda ul{
    list-style-type:none
}
.onderwijs_legenda li{
    margin: 5px 0px;
    font-size: 12px;
 }

.datumvak {
    display: flex;
    background-color: rgba(255,243,243,1.00);
    color: black;
    margin: 0px 0px 5px 0px;
    padding: 5px 0px 5px 0px;
    border: 0px solid black;
    height: auto;
    width: auto;
    border-radius: 5px;
}
.onderwijsvak {
    display: inline-block;
    background-color: transparent;
    color: black;
    margin: 0px 0px;
    padding: 0px 0px;
    border: 0px solid black;
    height: auto;
    width: auto;
}
div.onderwijsvak span.onderwijstijd{
    display: inline-block;
    background-color: transparent;
    color: black;
    margin: 0px 10px 0px 0px;
    padding: 0px 0px;
    font-size: 12px;
    border: 0px solid black;
    height: auto;
}
div.onderwijsvak span.onderwijsinvulling{
    display: inline-block;
    background-color: transparent;
    color: black;
    margin: 0px 10px 0px auto;
    padding: 0px 0px;
    font-size: 12px;
    border: 0px solid black;
    height: auto;
    width: 500px;
}
div.onderwijsvak span.onderwijslocatie{
    display: inline-block;
    background-color: transparent;
    color: black;
    margin: 0px 10px 0px auto;
    padding: 0px 0px;
    font-size: 12px;
    border: 0px solid black;
    height: auto;
    width: 100px;
}
div.onderwijsvak span.onderwijsdocenten{
    display: inline-block;
    background-color: transparent;
    color: black;
    margin: 0px 10px 0px 0px;
    padding: 0px 0px;
    font-size: 12px;
    border: 0px solid black;
    height: auto;
    width: 200px;
}
.feest_dag{
    background-color: transparent;
    border: 0px solid black;
    margin: 0px 0px 0px 5px; 
    padding: 0px 0px 0px 0px;
    font-size: 12px;
}
div#onderwijs_rooster p{
    background-color: transparent;
    color: black;
    margin: 0px;
    padding: 0px;
    border: 0px solid black;
    height: auto;
    width: auto;
    font-size: 11px;
}


.datumknop{
    display: inline-flex;
    background-color: transparent;
    color: black;
    padding: 0px 0px;
    margin: 0px 5px 0px 5px;
    border: 0px solid black;
    width: 180px;
    text-align: left;
    font-size:    12px;
    font-family:  verdana;
}
span.datum_ond_zien{
   background-color: transparent;
    color: black;
    padding: 0px 0px;
    margin: 0px 5px 0px 5px;
    border: 0px solid black;
    width: 180px;
    text-align: left;
    font-size:    12px;
    font-family:  verdana;  
}
.onderwijsmoment{
    background-color: transparent;
    color: black;
    padding: 0px 0px;
    margin: 0px;
    border: 0px solid black;
    width: auto;
    text-align: left;
    font-size: 14px;
}

div.onderwijs_kleur{
    display: inline-block;
    height: 10px;
    width: 10px;
    background-color: purple;
    border-radius: 3px;
}
div.onderwijs_kleur[data-voorwie="1"]{
    background-color: rgba(120,195,109,0.80);
}
div.onderwijs_kleur[data-voorwie="2"]{
    background-color: rgba(227,173,38,0.83);
}
div.onderwijs_kleur[data-voorwie="3"]{
    background-color: rgba(5,128,30,0.65);
}
div.onderwijs_kleur[data-voorwie="4"]{
    background-color: rgba(0,0,211,0.80);
}
div.onderwijs_kleur[data-voorwie="5"]{
    background-color: rgba(12,0,118,0.72);
}
div.onderwijs_kleur[data-voorwie="6"]{
    background-color: rgba(18,152,163,0.76);
}
div.onderwijs_kleur[data-voorwie="7"]{
    background-color: rgba(19,143,106,0.83);
}
div.onderwijs_kleur[data-voorwie="8"]{
    background-color: lightgrey;
}
.soort_onderwijs{
   padding: 0px 0px;
    margin: 5px;
    border: 1px solid black; 
}
div.invullen2{
   padding: 5px 5px;
    margin: 5px;
    border: 1px solid black; 
    border-radius: 5px;
    background-color: rgba(152,151,151,0.17);
}
div.invullen2 h5{
    font-size: 14px;
    margin: 10px 0px 10px 0px;
    color: black;
}
div.invullen2 label{
    display: inline-block;
    font-size: 12px;
    font-weight: normal; 
    color: e195ea9;
    margin: 10px 0px 10px 0px;
    border: 0px solid black; 
    width: 95px;
}

div.invullen2 input[type=text]{
  width: 200px;
  padding: 3px;
  margin: 8px 0;
}
div.invullen2 select{
  width: auto;
  padding: 3px;
  margin: 8px 0;
}
div#modal-onderwijsdag{
  width: auto;
  padding: 0px;
  margin: 10px 10px 10px 10px;
  
}
div#modal-onderwijsdag input[type=text]{
  width: 200px;
  padding: 3px;
  margin: 0px 0px 5px 0px;
    border: 1px solid black; 
}
div#modal-onderwijsdag input[type=time]{
  width: auto;
  padding: 0px;
  margin: 0px 0px 5px 0px;
    border: 1px solid black; 
}
div#modal-onderwijsdag select{
  width: auto;
  padding: 3px;
  margin: 0px 0px 5px 0px;
}
div#modal-onderwijsdag label{
    display: inline-block;
    font-size: 12px;
    font-weight: normal; 
    color: black;
    margin: 10px 0px 10px 0px;
    border: 0px solid black; 
    width: 95px;
}

 button#invoer_onderwijs, button#invoer_onderwijs_modal, button#invoer_sjabloon{
    border: 1px darkgreen solid;
    background-color: forestgreen;
    font-size: 14px;
    color: white;
    margin: 5px 0px 10px 10px;
    padding: 10px 10px 10px 10px;
}
button#invoer_sjabloon{
    display: none;
}
button#verwijderen_onderwijs_modal{
    border: 1px black solid;
    background-color: darkred;
    font-size: 14px;
    color: white;
    margin: 5px 0px 10px 10px;
    padding: 10px 10px 10px 10px;
}

button#nieuwSjabloon{
    border: 0px black solid;
}
button.sjablonen{
   border: 0px black solid; 
}

/*rooster kleuren*/
a.rooster_kleur_link{
    display:inline-block;
    width: 31px;
    margin: auto;
    
}
td.roosterkleur_rand_s{
   border: 2px solid black;
}
td.roosterkleur_rand_na{
   border: 2px solid red;
}

/*middelste deel tabel scrollen*/
table.proef{
  border-collapse: collapse;
  border-spacing: 0;
  width: 215px;
}
thead.proef, tbody.proef, tfoot.proef {
  display: table-cell;
}
thead.proef, tfoot.proef {
  width: 80px;
  padding-bottom: 17px;
    
}
tbody.proef {
  display: block;
  table-layout: fixed;
  width: 100px;
  overflow-x: auto;
}
tr.proef, td.proef {
  border: 1px solid grey;
  width: 100%;
}
td.proef {
  padding: 1rem;
  white-space: nowrap;
}
.wrapper1{
    width: 100px; 
    border: none 1px RED;
    overflow-x: scroll; 
    overflow-y:hidden;
    height: 20px;
    margin-left:122px;
}
.div1 {
    width:400px; 
    height: 20px; 
    
}


/*scrollbare tabel*/
table.scrollbaar{
  width: 1700px;
  border: 0px solid grey;
}
table.scrollbaar thead, table.scrollbaar tbody, table.scrollbaar tfoot{
  display: table-cell;
}
table.scrollbaar tbody{
  display: block; 
  table-layout: fixed;
  width: 1100px;
  overflow-x: auto;
  border: 0px solid grey;
}
table.scrollbaar thead{
  padding-bottom: 17px;
    width: 250px;
}
table.scrollbaar tfoot{
  padding-bottom: 17px;
    width: 350px;
}
table.scrollbaar tr, table.scrollbaar td{
  border: 1px solid grey;
  width: 100%;
}
table.scrollbaar tbody td{
    width: 35px;
}
table.scrollbaar tbody span{
    white-space: nowrap;
    width: 30px;
}
table.scrollbaar tfoot td{
    white-space: nowrap;
    width: 350px;
}
table.scrollbaar .naam{
    white-space: nowrap;
    width: 150px;
}
.scrollbalk_boven{
    width: 1100px; 
    border: none 1px RED;
    overflow-x: scroll; 
    overflow-y:hidden;
    height: 20px;
    margin-left:250px;
}
.scrollbalk_boven2 {
    width:1200px; 
    height: 20px; 
}
td.berekening{background-color: lightgrey;}


/*personen beheren*/
ul.UlActievePersonen{
    list-style-type:none;
    cursor: default;
    width: 1350px;
}
/*ul#UlActievePersonen li:nth-child(odd){ background: #ffffff; }
ul#UlActievePersonen li:nth-child(even){ background: #80808030; }
*/
ul.UlActievePersonen span{
    margin: 5px;
}
ul.UlActievePersonen span.naam{
    display: inline-block;
    width: 180px;
}
ul.UlActievePersonen span.periode{
    display: inline-block;
    width: 350px;
    background-color: transparent;
}
ul.UlActievePersonen div.ActievePersonen_periodes{
    display: inline-block;
    background-color: transparent;
    
}
ul.UlActievePersonen span.ActievePersonen_fte{
    display: inline-block;
    background-color: transparent;
    
}
ul.UlActievePersonen span.sein{
    display: inline-block;
    width: 50px;
    background-color: transparent;
    
}
ul.UlActievePersonen span.einddatum{
    display: inline-block;
    width: 160px;
    background-color: transparent;
    
}

.alternate{
background-color:#80808030;
}

.personen_beheer_modal form {
    margin: 10px 10px;
}
div.personen_beheer_modal tr, div.personen_beheer_modal td {
    padding: 5px 0px;
}
div#namen li{
     padding: 2px 0px;
    cursor: default;
}
h3#HNieuwPersoon, h3#HNietActievePersonen {
   cursor: default; 
}
/*div.ActievePersonen_periodes>div{
    display: inline-block;
}*/

/*help en footer*/
div#help{clear: both;width:600;height:auto;margin:50px 10px 0px; padding:5px 5px ;border: 1px solid #195ea9; background: #FFF;}

div#footer {clear: both; margin: 10px 0; width: 1000px; border: 2px solid yellow; text-align:center; }