@font-face {font-family: ArialNarrow; src: url('font/ArialNarrow.woff2') format('woff2'), url('font/ArialNarrow.woff') format('woff'); font-weight: normal; font-style: normal;}
@font-face {font-family: DroidSans; src: url('font/DroidSans.woff2') format('woff2'), url('font/DroidSans.woff') format('woff'); font-weight: normal; font-style: normal;}
@font-face {font-family: DroidSans; src: url('font/DroidSansBold.woff2') format('woff2'), url('font/DroidSansBold.woff') format('woff'); font-weight: bold; font-style: normal;}
/* pixels naar responsive bij 18px
 1 0.055   6 0.333  11 0.611  16 0.888  30   1.666
 2 0.111   7 0.388  12 0.666  17 0.944  100  5.555
 3 0.166   8 0.444  13 0.722  18 1.0    120  6.666
 4 0.222   9 0.5    14 0.777  19 1.055  150  8.333
 5 0.277  10 0.555  15 0.833  20 1.111  200 11.111 */

* {--breedte: calc(100vw - (100vw - 100%)); --hoogte: calc(100vh - (100vh - 100%)); font-family: DroidSans, Calibri, Verdana, sans-serif; font-weight: normal; margin: 0; padding: 0; border: none; outline: none; cursor: default;}
@media only screen and (max-width: 479px) {
	* {--responsive: 12px;} /* = rem */
}
@media only screen and (min-width: 480px) and (max-width: 1000px) {
	* {--min-size: 12; --max-size: 18; --diff: calc(var(--max-size) - var(--min-size)); --responsive: calc((var(--min-size) * 1px) + (var(--diff) * ((100vw - 480px) / (1000 - 480))));}
}
@media only screen and (min-width: 1001px) {
	* {--responsive: 18px;} /* = rem */
}
body, td, div, span, select, input, textarea {font-size: calc(var(--responsive) * 0.777);}
html, body {height: 100%;}
body {background-color: #f1f4f6; overflow-y: scroll;}
input, textarea {color: #414e56; background-color: #ffffff; border: 1px inset #5c6f7a; padding: calc(var(--responsive) * 0.06) 0 calc(var(--responsive) * 0.06) calc(var(--responsive) * 0.22); vertical-align: middle;}
input[type=submit], input[type=button] {font-weight: bold; color: #ffffff; background-color: #5c6f7a; border: 1px outset #5c6f7a; border-radius: calc(var(--responsive) * 0.28); padding: calc(var(--responsive) * 0.06) 0 calc(var(--responsive) * 0.06) 0; cursor: pointer;}
select {color: #414e56; background-color: #ffffff; border: 1px inset #5c6f7a; padding: calc(var(--responsive) * 0.06) 0 calc(var(--responsive) * 0.06) calc(var(--responsive) * 0.22); vertical-align: middle;}
option {font-size: inherit; padding: 0 0 0 calc(var(--responsive) * 0.22);}
option b {font-size: inherit; font-weight: bold;}
td {color: #414e56; text-align: left; vertical-align: top;}
h1 {font-weight: bold; font-size: calc(var(--responsive) * 1.66); color: #194363; margin: calc(var(--responsive) * 0.28) 0 calc(var(--responsive) * 0.28) 0; padding: 0;}
h2 {font-weight: bold; font-size: calc(var(--responsive) * 1.1); color: #414e56; margin: calc(var(--responsive) * 0.28) 0 calc(var(--responsive) * 0.28) 0; padding: 0;}
h3 {font-weight: bold; font-size: calc(var(--responsive) * 0.9); color: #414e56; margin: 0 0 calc(var(--responsive) * 0.28) 0; padding: 0;}
h4 {font-weight: bold; font-size: calc(var(--responsive) * 0.77); color: #414e56; margin: 0; padding: 0; display: inline;}
span {font-size: inherit; font-weight: inherit; font-style: inherit; color: inherit; text-decoration: inherit; cursor: inherit;}
b, strong, .vet, tr.vet td {font-size: inherit; font-weight: bold !important; font-style: inherit; color: inherit; text-decoration: inherit; cursor: inherit;}
u, .onderstrepen {font-size: inherit; font-weight: inherit; font-style: inherit; color: inherit; text-decoration: underline !important; cursor: inherit;}
i, .cursief {font-size: inherit; font-weight: inherit; font-style: italic !important; color: inherit; text-decoration: inherit; cursor: inherit;}
.decolink {font-size: inherit; font-weight: inherit; font-style: inherit; color: #6f8593; text-decoration: underline !important; cursor: inherit;}
a, .link {font-size: inherit; font-weight: inherit; font-style: inherit; color: #6f8593; text-decoration: none !important; cursor: inherit;}
a:hover, .link:hover, .decolink:hover {color: #badff6; text-decoration: underline !important; cursor: pointer;}
.normaal {font-weight: normal !important;}
.medium, .midi, tr.midi td {font-size: calc(var(--responsive) * 0.72);}
.mini, .klein, tr.mini td {font-size: calc(var(--responsive) * 0.61);}
.center {margin: 0 auto 0 auto;}
.links {text-align: left !important;}
.midden {text-align: center !important;}
.rechts {text-align: right !important;}
.nowrap, table.nowrap td {white-space: nowrap;}

div.top {position: relative; width: calc(var(--breedte) - 2px); max-width: calc(var(--breedte) - 2px); height: calc(var(--hoogte) - 2px); border: 1px solid #f1f4f6;}
div.menu {position: fixed; top: 0vh; left: 0vw; width: calc(var(--breedte) * 0.17); max-width: calc(var(--breedte) * 0.17); height: var(--hoogte); min-height: var(--hoogte); color: #ffffff; background-color: #6f8593;}
div.statuswait, div.statusok, div.statusfout {font-size: calc(var(--responsive) * 0.7); padding-left: calc(var(--responsive) * 0.4); margin-bottom: calc(var(--responsive) * 0.4);}
div.statuswait {}
div.statusok {}
div.statusfout {font-weight: bold; color: #ff0000;}
div.menu select {display: block; width: 100%; max-width: 100%; font-family: ArialNarrow; font-size: calc(var(--responsive) * 1.0); margin-bottom: 0.6rem;}
div.menu option {font-size: inherit; padding: 0;}
div.menu input {display: block; width: 100%; max-width: 100%;}
div.knoppen {position: fixed; bottom: 0vh; left: 0vw; width: calc(var(--breedte) * 0.17); max-width: calc(var(--breedte) * 0.17); text-align: center; color: #ffffff; background-color: #6f8593;}
div.knoppen input {display: block; width: calc(100% - var(--responsive) * 0.8); font-size: calc(var(--responsive) * 0.72); margin: calc(var(--responsive) * 0.4);}
div.inhoud {width: calc(var(--breedte) * 0.83); max-width: calc(var(--breedte) * 0.83); height: 100%; margin-left: calc(var(--breedte) * 0.17);}
div#gmap {width: 100%; height: 100%;}
div#gmap .gmnoprint {width: min-content !important; margin: 0 !important;}
div#gmap .gm-bundled-control-on-bottom {right: 0 !important;}
div#gmap .gm-bundled-control, div#gmap .gm-bundled-control-on-bottom, div#gmap .gm-svpc, div#gmap .gm-control-active, div#gmap .gm-bundled-control-on-bottom > div.gmnoprint > div {width: 20px !important; max-width: 20px !important;} /* overflow: hidden !important;}*/
div#gmap .gm-style-mtc button {font-size: calc(var(--responsive) * 0.61) !important; width: 50px !important; min-width: 50px !important; max-width: 50px !important; padding: 8px 4px !important; display: block !important; height: auto !important; text-align: center;}

table.tabel {width: 98%; max-width: 800px; margin: calc(var(--responsive) * 0.28) auto calc(var(--responsive) * 0.555) auto;}
table.tabel td.l {text-align: left; padding: calc(var(--responsive) * 0.503) calc(var(--responsive) * 0.28) calc(var(--responsive) * 0.28) calc(var(--responsive) * 0.28); white-space: nowrap; vertical-align: top;}
table.tabel td.r {width: 100%; font-size: calc(var(--responsive)); text-align: left; padding: calc(var(--responsive) * 0.28);}
table.tabel td.lplaats {text-align: left; padding: calc(var(--responsive) * 0.503) calc(var(--responsive) * 0.28) calc(var(--responsive) * 0.28) calc(var(--responsive) * 0.28); white-space: nowrap; vertical-align: top;}
table.tabel td.plaats {width: 100%; font-size: calc(var(--responsive) * 1.4); font-weight: bold;}
table.tabel tr.rood {background-color: #ff0000;}
table.tabel tr.blauw {background-color: #00ffff;}
table.tabel tr.groen {background-color: #00ff00;}
table.wit td.l, table.wit td.r, table.wit td.lplaats {color: #ffffff;}

.container {position: absolute; left: 0; top: 0; width: 100%; min-width: 100%; max-width: 100%; height: 100%; display: flex; flex-direction: column;}
.container .flexcol {display: flex; flex-direction: column;}
.container .flexrow {display: flex; flex-direction: row;}
.container .flexcel {padding: calc(var(--responsive) * 0.22);}
.container .flexd {color: #414e56; background-color: #d7e1e7; padding: calc(var(--responsive) * 0.22) calc(var(--responsive) * 0.44) calc(var(--responsive) * 0.44) calc(var(--responsive) * 0.44);}
.container div, .container input {font-size: calc(var(--responsive) * 1.2);}

#overlay {position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(241,244,246,0.9); overflow-x: hidden; overflow-y: auto; z-index: 1000; visibility: hidden;}
#overlaytable {width: 100%; height: 100%;}
#overlaytd {width: 100%; height: 100%; text-align: center; vertical-align: middle;}
#overlay #dialog {width: calc(var(--responsive) * 16.66); background-color: #ffffff; border: 1px solid #000000; border-radius: calc(var(--responsive) * 0.555); margin: calc(var(--responsive) * 5.55) auto; padding: calc(var(--responsive) * 0.83);}


.foutkleur {font-weight: bold; color: #da2c4c;}
.submit1 {width: calc(var(--responsive) * 5.55);}
.submit2 {width: calc(var(--responsive) * 8.33);}
.submit4 {width: calc(var(--responsive) * 11.11);}
.submit5 {width: calc(var(--responsive) * 16.66);}
.input0 {width:  75px;}
.input1 {width: calc(var(--responsive) * 5.55);}
.input2 {width: calc(var(--responsive) * 8.33);}
.input3 {width: 150px;}
.input5 {width: calc(var(--responsive) * 16.66);}
.input6 {width: 350px;}
.input9 {width: 500px;}
.select1 {width: calc(var(--responsive) * 5.55);}
.select2 {width: calc(var(--responsive) * 8.33);}
.select5 {width: calc(var(--responsive) * 16.66);}
optgroup {font-weight: bold; font-style: normal;}
optgroup option {padding-left: calc(var(--responsive) * 1.11);}

.knop {font-size: inherit; color: #ffffff; background-color: #5c6f7a; width: calc(var(--responsive) * 1.22); height: calc(var(--responsive) * 1.22); border: 1px outset #5c6f7a; border-radius: calc(var(--responsive) * 0.28); background-repeat: no-repeat; background-position: center center; cursor: pointer;}
.midiknop {font-size: calc(var(--responsive) * 0.72) !important; color: #414e56 !important; text-align: center; border: 1px outset #5c6f7a; border-radius: calc(var(--responsive) * 0.28); padding: calc(var(--responsive) * 0.06) calc(var(--responsive) * 0.22) calc(var(--responsive) * 0.06) calc(var(--responsive) * 0.22) !important; cursor: pointer;}
.miniknop {font-size: calc(var(--responsive) * 0.61) !important; color: #414e56 !important; text-align: center; border: 1px outset #5c6f7a; border-radius: calc(var(--responsive) * 0.28); padding: 0 calc(var(--responsive) * 0.22) 0 calc(var(--responsive) * 0.22) !important; cursor: pointer;}
.bggroen {background-color: #b3e7ba !important;}
.bgblauw {background-color: #c5dae7 !important;}
.bgrood {background-color: #ecbab7 !important;}
.bgoranje {background-color: #f1d7cd !important;}
.bgpaars {background-color: #bda8d9 !important;}
.bgwit {background-color: #ffffff !important;}
.rood {color: #a82a33 !important;}
.groen {color: #389627 !important;}

.login h1 {color: #ffffff;}
.login .input {width: calc(var(--responsive) * 8.33); color: #414e56; border: 1px inset #5c6f7a; padding: calc(var(--responsive) * 0.06) 0 calc(var(--responsive) * 0.06) calc(var(--responsive) * 0.22); vertical-align: middle;}
.login .submit {width: calc(var(--responsive) * 5.55); color: #ffffff; background-color: #5c6f7a; border: 1px outset #5c6f7a; border-radius: calc(var(--responsive) * 0.28); cursor: pointer;}
.login .opvragen {width: calc(var(--responsive) * 16.66); color: #ffffff; background-color: #5c6f7a; border: 1px outset #5c6f7a; border-radius: calc(var(--responsive) * 0.28); cursor: pointer;}