@font-face {
    font-family: 'ralewayregular';
    src: url('raleway-regular.eot');
    src: url('raleway-regular.eot?#iefix') format('embedded-opentype'),
         url('raleway-regular.woff') format('woff'),
         url('raleway-regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}


* { padding: 0px; margin: 0px; font-size: 28px; color: #000; font-family: 'ralewayregular'; }
html, body { width: 100%; height: 100%; }
div.logo { position: fixed; bottom: 0px; left: 0px; height: 14vw; width: 100vw; box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5); z-index: 2; background-color: white; background-image: url(images/logo.png); background-position: 50% 100%; background-repeat: no-repeat; background-size: contain; }

td.right { text-align: right; }

/*
#eee -> #53ffdd
#f8f8f8 -> #95ffea
#888 -> #005a48
*/

div.top { background: #67c8ae; border-bottom: 1px solid #ccc; padding: 20px; }
div.groepselect { display: inline-block; }
div.datumselect { background: blue; display: inline-block; }
select { border: none; background: #67c8ae; font-size: 16px; padding: 10px; text-align-last: center; }
select.groep { font-size: 24px; padding: 10px;  }
option { font-size: 32px; }

div.midden { padding-bottom: calc(14vw + 1px); }

td.slot div.open { width: 45px; height: 32px; background: url(images/slotopendonker.png) 50% 50% no-repeat; background-size: contain; }
td.slot div.dicht { width: 45px; height: 32px; background: url(images/slotdichtdonker.png) 50% 50% no-repeat; background-size: contain; }

div.sleutelzwart { display: none; position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.25); }
div.sleutelvenster { display: none; position: fixed; left: calc(50% - 200px); top: calc(50% - 320px); width: 400px; height: 640px; background: white; border: 2px solid #aaa; border-radius: 5px; }
div.sleutelcode { width: 260px; padding: 15px 20px; height: 50px; margin: 20px 50px; background: #000; border-radius: 10px; }
span.sleutelcodecijfer { padding: 10px 20px; font-size: 80px; color: #fff; }
div.sleutelvenster td { padding: 10px;}
span.sleutelknop { display: inline-block; text-align: center; padding: 30px 0px 0px; margin: 0px 11px; width: 100px; height: 70px; background: #ddd; border: 1px solid #aaa; border-radius: 50px; }

table { width: 100%; border-collapse: collapse; margin: 0 auto; }
table.leerlingen th { text-align: left; padding: 10px; }
table.leerlingen td { border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; padding: 10px; vertical-align: top; }
table.leerlingen tr td { background: #fff; }
table.leerlingen tr:nth-child(2n) td { background: #ace1d3; }
table.leerlingen td:last-child { width: 50px; }
table.leerlingen td.avatar { width: 80px; padding: 5px; vertical-align: middle; }
table.leerlingen td.avatar img { width: 80px; height: 80px; /*border-radius: 20px;*/ }
table.leerlingen td.avatar span.img { display: inline-block; width: 80px; height: 80px; background-size: cover; background-position: 50% 50%; }

span.jarig { font-size: 18px; color: #444; }
span.jarig img { padding: 0px 15px; width: 24px; height: 24px; }
span.formulieringevuld { font-size: 18px; color: #444; }
span.formulieringevuld img { padding: 0px 15px; width: 32px; height: 32px; }

/* table.leerlingen tr.afwezig td { text-decoration: line-through; background: rgb(255, 128, 128); } */
table.leerlingen tr.proefles td { background: rgb(128, 255, 128); }
table.leerlingen tr.afwezig td { background: rgb(255, 128, 128); }
table.leerlingen tr.afwezig td span.naam { text-decoration: line-through; }

div.onbekend { margin: 0 auto; background: url(images/question-mark.png) 50% 50% no-repeat; background-size: contain; width: 32px; height: 32px; }
div.aanwezig { margin: 0 auto; background: url(images/check.png) 50% 50% no-repeat; background-size: contain; width: 32px; height: 32px; }
div.afwezig { margin: 0 auto; background: url(images/letter-x.png) 50% 50% no-repeat; background-size: contain; width: 32px; height: 32px; }

div.tekstballon { margin: 0 auto; background: url(images/chat-comment-oval-speech-bubble-with-text-lines.png) 50% 50% no-repeat; background-size: contain; width: 32px; height: 32px; }

div.opmerking { width: calc(100% - 22px); display: block; margin: 10px 0px; padding: 10px; background: #fcc; color: #000; border: 1px solid #800; font-size: 24px; }

button.nav { background: #fff; border: 1px solid #005a48; padding: 5px 10px; font-size: 20px; }
button.navpijl { background: #fff; border: 1px solid #005a48; padding: 5px 10px 10px; font-size: 20px; }
td.nav { font-size: 20px; }

div.groepsbericht { display: block; width: calc(94% - 6px); margin: 2%; padding: 1%; background: #fcc; font-size: 36px; font-weight: bold; border: 3px solid #f00; border-radius: 20px; text-align: center; color: #000; }

div.tekstinvoergrijs { display: none; position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); }
div.tekstinvoervenster { display: none; position: fixed; left: 25%; top: 5%; width: 50%; padding: 1%; background: #fff; border: 2px solid #444; border-radius: 10px; text-align: center; }
div.leerlingvenster { display: none; position: fixed; left: 25%; top: 5%; width: 50%; max-height: calc(85% - 14vw); overflow: auto; padding: 1%; background: #fff; border: 2px solid #444; border-radius: 10px; text-align: center; }
span.tabellabel { display: block; margin-top: 20px; font-size: 20px; }
input.fotoinput { width: 0.1px; height: 0.1px; opacity: 0; overflow: hidden; position: absolute; z-index: -1; }
input.fotoinput + label { background-image: url(images/photo-camera-outline.png); background-repeat: no-repeat; background-position: 5px 50%; background-size: 32px; color: #000; background-color: #fff; border: 2px solid #000; border-radius: 5px; font-size: 18px; padding: 5px 5px 5px 40px; display: inline-block; }
input.fotoinput:focus + label, input.fotoinput + label:hover { background-color: #ddd; }
span.fotowacht { background-image: url(images/load.gif); background-repeat: no-repeat; background-position: 5px 50%; background-size: 32px; color: #000; background-color: #fff; border: 2px solid #000; border-radius: 5px; font-size: 18px; padding: 5px 5px 5px 40px; display: none; }
input.label:disabled { font-weight: 20px; border: none; background: #53ffdd; text-align: center; }
div.label { width: 80%; margin-left: 10%; overflow: auto; font-weight: 20px; border: none; background: #53ffdd; text-align: center; }


div.textarea { margin: 2% 5% 5%; width: calc(88% - 2px); height: 25vh; padding: 1%; border: 1px solid #005a48; text-align: left; }
input.opslaan { background: #080; width: 40%; font-size: 20px; -webkit-appearance: none; -moz-appearance: none; appearance: none; padding: 1vh 2%; margin: 0% 3% 2vh; border: 1px solid #040; border-radius: 5px; color: #fff; }
input.annuleren { background: #800; width: 40%; font-size: 20px; -webkit-appearance: none; -moz-appearance: none; appearance: none; padding: 1vh 2%; margin: 0% 3% 2vh; border: 1px solid #400; border-radius: 5px; color: #fff; }

div.switches { white-space: nowrap; }
div.afwezigswitch { display: inline-block; vertical-align: middle; }
div.verplaatsswitch { display: inline-block; vertical-align: middle; }

div.onswitch span.ballot, div.offswitch span.ballot { position: absolute; display: block; margin-left: 6px; margin-top: 3px; z-index: 1; width: 36px; height: 36px; background-image: url(images/ballot.png); background-size: contain; background-repeat: no-repeat; }
div.onswitch span.check, div.offswitch span.check { position: absolute; display: block; margin-left: 54px; margin-top: 3px; z-index: 1; width: 36px; height: 36px; background-image: url(images/checkswitch.png); background-size: contain; background-repeat: no-repeat; }

div.onswitch { width: 96px; height: 51px; padding-top: 3px; border-top: 1px solid rgb(128, 128, 128); background: rgb(128,255,128); border-radius: 30px; transition: 0.3s all; cursor: pointer; }
div.offswitch { width: 96px; height: 51px; padding-top: 3px; border-top: 1px solid rgb(128, 128, 128); background: rgb(255,180,180); border-radius: 30px; transition: 0.3s all; cursor: pointer; }
span.onoffswitch { position: absolute; display: block; width: 45px; height: 45px; box-shadow: 0px 1px 3px black; background: white; border-radius: 25px; transition: 0.3s all; z-index: 2; }

div.onswitch span.onoffswitch { margin-left: 3px; }
div.offswitch span.onoffswitch { margin-left: 48px; }

td.knopnieuw { text-align: center; }
td.knopnieuw span { padding: 5px 20px; font-size: 24px; border: 1px solid #005a48; background: #fff; }
td.knopnieuw span:hover { cursor: pointer; background: #ddd; }

input.proef { background: #53ffdd; }

div.leerlingfotos { max-height: 25vh; overflow: auto; }
img.thumbnail { max-width: 20vw; max-height: 20vw; padding: 2px; border: 1px solid #005a48; margin: 2px; }
img.voorbeeldfotoleeg { max-width: 0px; max-height: 0px; padding: 0px; border: none; margin: 0px; }
img.voorbeeldfoto { max-width: 20vw; max-height: 20vw; padding: 2px; border: 1px solid #005a48; margin: 2px; }

div.fotogrijs { display: none; position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); }
div.fotovenster { display: none; position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; }
div.fotovenster div { display: table-cell; vertical-align: middle; text-align: center; width: 100%; height: 100%; }
div.fotovenster div img { max-height: 70vh; max-width: 90vw; background: #fff; padding: 2px; border: 2px solid #005a48; }