body.lab { background-color: #F1F5F8; position: relative; width: 100%; height: 100vh; padding: 0px; margin: 0px;  overflow: hidden; -webkit-transition: background .4s ease-in-out, color .4s ease-in-out; -o-transition: background .4s ease-in-out, color .4s ease-in-out; transition: background .4s ease-in-out, color .4s ease-in-out; }

[rel="behandelaar[connect]"] { display: none; }
[rel="behandelaar[reconnect]"] { display: none; }
[rel="behandelaar[disconnected]"] { display: none; }
[rel="behandelaar[connected]"] { display: none; }
[rel="behandelaar[disconnected]"] { display: none; }

[rel="client[connect]"] { display: none; }
[rel="client[reconnect]"] { display: none; }
[rel="client[connected]"] { display: none; }
[rel="client[disconnected]"] {display: none; }
[rel="client[stopped]"] {display: none; }

audio { opacity: 0.00; }

.button:disabled { cursor: not-allowed; }
.button .loading { display: none; }
.button.button-loading .loading { display: inline; }

.clienterror { display: none; }
.behandelaarerror { display: none; }

.lab .app { padding: 0px; }

body.lab.lab-white { background-color: #0e0e0e; }

.lab div[rel="client[connect]"] { width: 100%; height: 100%; }
.lab div[rel="client[connect]"] .vertical { display: table; width: 100%; height: 100%; }
.lab div[rel="client[connect]"] .vertical .align { display: table-cell; vertical-align: middle; width: 100%; height: 100%; }
.lab div[rel="client[connect]"] .vertical .align .box { max-width: 480px; margin: 0px auto; }

.lab div[rel="client[reconnect]"] { width: 100%; height: 100%; }
.lab div[rel="client[reconnect]"] .vertical { display: table; width: 100%; height: 100%; }
.lab div[rel="client[reconnect]"] .vertical .align { display: table-cell; vertical-align: middle; width: 100%; height: 100%; }
.lab div[rel="client[reconnect]"] .vertical .align .box { max-width: 480px; margin: 0px auto; }


div[rel="client[connected]"].box { width: 100%; height: 100%; display: table; }
div[rel="client[connected]"].box .box-align { width: 100%; height: 100%; display: table-cell; vertical-align: middle;  }
div[rel="client[connected]"].box .box-align .preview  { margin: 0px auto; }

.preview { border-radius: 0.375rem; background-color: #F1F5F8; width: calc(1920px / 4); height: calc(1080px / 4); overflow: hidden; -webkit-transition: background .4s ease-in-out, color .4s ease-in-out; -o-transition: background .4s ease-in-out, color .4s ease-in-out; transition: background .4s ease-in-out, color .4s ease-in-out; }
.preview.preview-white { background-color: #0e0e0e; }
.preview #animatedball { position: absolute; z-index: 1000; top: 0px; left: 0px; width: 100%; height: 100%; }
.preview #animatedball .animatedball { position: absolute; top: 12.5px; left: 12.5px; width: calc(100% - 25px); height: calc(100% - 25px); }
.preview #animatedball .animatedball .ball { position: absolute; top: 50%; left: 50%; margin: -12.5px 0px 0px -12.5px; width: 25px; height: 25px; border-radius: 100%;  }
#animatedball { z-index: 1000; position: absolute; z-index: 1000; top: 0px; left: 0px; width: 100%; height: 100%; }
#animatedball .animatedball { position: absolute; top: 50px; left: 50px; width: calc(100% - 100px); height: calc(100% - 100px); }
#animatedball .animatedball .ball { position: absolute; top: 50%; left: 50%; margin: -50px 0px 0px -50px; width: 100px; height: 100px; border-radius: 100%;  }
#animatedball .animatedball .ball.ball-adults { background-color: #FFC312; -webkit-transition: background .4s ease-in-out, color .4s ease-in-out; -o-transition: background .4s ease-in-out, color .4s ease-in-out; transition: background .4s ease-in-out, color .4s ease-in-out; }
#animatedball .animatedball .ball.ball-adults svg { display: none; }
#animatedball .animatedball .ball.ball-adults.ball-sunflower {  }
#animatedball .animatedball .ball.ball-adults.ball-radiantyellow { background-color: #F79F1F; }
#animatedball .animatedball .ball.ball-adults.ball-puffinsbill { background-color: #EE5A24; }
#animatedball .animatedball .ball.ball-adults.ball-redpigment { background-color: #EA2027; }
#animatedball .animatedball .ball.ball-adults.ball-mediterraneansea { background-color: #1289A7; }
#animatedball .animatedball .ball.ball-adults.ball-pixelatedgrass { background-color: #009432; }
#animatedball .animatedball .ball.ball-adults.ball-androidgreen { background-color: #A3CB38; }
#animatedball .animatedball .ball.ball-adults.ball-energos { background-color: #C4E538; }
#animatedball .animatedball .ball.ball-adults.ball-marineblue { background-color: #1c3faa; }
#animatedball .animatedball .ball.ball-adults.ball-turkishaqua { background-color: #006266; }
#animatedball .animatedball .ball.ball-adults.ball-barared { background-color: #ED4C67; }
#animatedball .animatedball .ball.ball-adults.ball-veryberry { background-color: #B53471; }
#animatedball .animatedball .ball.ball-adults.ball-hollyhock { background-color: #833471; }
#animatedball .animatedball .ball.ball-adults.ball-white { background-color: #FFFFFF; }
#animatedball .animatedball .ball.ball-children { background-color: rgba(0, 0, 0, 0.00); }
#animatedball .animatedball .ball.ball-children svg { display: block; }
#animatedball .animatedball .ball.ball-children svg g path.color { fill: #FFC312; -webkit-transition: fill .4s ease-in-out; -o-transition: fill .4s ease-in-out; transition: fill .4s ease-in-out; }
#animatedball .animatedball .ball.ball-children.ball-sunflower svg g path.color {  }
#animatedball .animatedball .ball.ball-children.ball-radiantyellow svg g path.color { fill: #F79F1F; }
#animatedball .animatedball .ball.ball-children.ball-puffinsbill svg g path.color { fill: #EE5A24; }
#animatedball .animatedball .ball.ball-children.ball-redpigment svg g path.color { fill: #EA2027; }
#animatedball .animatedball .ball.ball-children.ball-mediterraneansea svg g path.color { fill: #1289A7; }
#animatedball .animatedball .ball.ball-children.ball-pixelatedgrass svg g path.color { fill: #009432; }
#animatedball .animatedball .ball.ball-children.ball-androidgreen svg g path.color { fill: #A3CB38; }
#animatedball .animatedball .ball.ball-children.ball-energos svg g path.color { fill: #C4E538; }
#animatedball .animatedball .ball.ball-children.ball-marineblue svg g path.color { fill: #1c3faa; }
#animatedball .animatedball .ball.ball-children.ball-turkishaqua svg g path.color { fill: #006266; }
#animatedball .animatedball .ball.ball-children.ball-barared svg g path.color { fill: #ED4C67; }
#animatedball .animatedball .ball.ball-children.ball-veryberry svg g path.color { fill: #B53471; }
#animatedball .animatedball .ball.ball-children.ball-hollyhock svg g path.color { fill: #833471; }
#animatedball .animatedball .ball.ball-children.ball-white svg g path.color { fill: #FFFFFF; }


.preview #touchball { position: absolute; z-index: 1000; top: 0px; left: 0px; width: 100%; height: 100%; }
.preview #touchball .touchball { position: absolute; top: 12.5px; left: 12.5px; width: calc(100% - 25px); height: calc(100% - 25px); }
.preview #touchball .touchball .ball { position: absolute; top: 50%; left: 50%; margin: -12.5px 0px 0px -12.5px; width: 25px; height: 25px; border-radius: 100%;  }
#touchball { z-index: 2000; position: absolute; z-index: 1000; top: 0px; left: 0px; width: 100%; height: 100%; }
#touchball .touchball { position: absolute; top: 50px; left: 50px; width: calc(100% - 100px); height: calc(100% - 100px); }
#touchball .touchball .ball { display: none; position: absolute; top: 50%; left: 50%; margin: -50px 0px 0px -50px; width: 100px; height: 100px; border-radius: 100%;  }
#touchball .touchball .ball.ball-adults { background-color: #FFC312; -webkit-transition: background .4s ease-in-out, color .4s ease-in-out; -o-transition: background .4s ease-in-out, color .4s ease-in-out; transition: background .4s ease-in-out, color .4s ease-in-out; }
#touchball .touchball .ball.ball-adults svg { display: none; }
#touchball .touchball .ball.ball-adults.ball-sunflower {  }
#touchball .touchball .ball.ball-adults.ball-radiantyellow { background-color: #F79F1F; }
#touchball .touchball .ball.ball-adults.ball-puffinsbill { background-color: #EE5A24; }
#touchball .touchball .ball.ball-adults.ball-redpigment { background-color: #EA2027; }
#touchball .touchball .ball.ball-adults.ball-mediterraneansea { background-color: #1289A7; }
#touchball .touchball .ball.ball-adults.ball-pixelatedgrass { background-color: #009432; }
#touchball .touchball .ball.ball-adults.ball-androidgreen { background-color: #A3CB38; }
#touchball .touchball .ball.ball-adults.ball-energos { background-color: #C4E538; }
#touchball .touchball .ball.ball-adults.ball-marineblue { background-color: #1c3faa; }
#touchball .touchball .ball.ball-adults.ball-turkishaqua { background-color: #006266; }
#touchball .touchball .ball.ball-adults.ball-barared { background-color: #ED4C67; }
#touchball .touchball .ball.ball-adults.ball-veryberry { background-color: #B53471; }
#touchball .touchball .ball.ball-adults.ball-hollyhock { background-color: #833471; }
#touchball .touchball .ball.ball-adults.ball-white { background-color: #FFFFFF; }
#touchball .touchball .ball.ball-children { background-color: rgba(0, 0, 0, 0.00); }
#touchball .touchball .ball.ball-children svg { display: block; }
#touchball .touchball .ball.ball-children svg g path.color { fill: #FFC312; -webkit-transition: fill .4s ease-in-out; -o-transition: fill .4s ease-in-out; transition: fill .4s ease-in-out; }
#touchball .touchball .ball.ball-children.ball-sunflower svg g path.color {  }
#touchball .touchball .ball.ball-children.ball-radiantyellow svg g path.color { fill: #F79F1F; }
#touchball .touchball .ball.ball-children.ball-puffinsbill svg g path.color { fill: #EE5A24; }
#touchball .touchball .ball.ball-children.ball-redpigment svg g path.color { fill: #EA2027; }
#touchball .touchball .ball.ball-children.ball-mediterraneansea svg g path.color { fill: #1289A7; }
#touchball .touchball .ball.ball-children.ball-pixelatedgrass svg g path.color { fill: #009432; }
#touchball .touchball .ball.ball-children.ball-androidgreen svg g path.color { fill: #A3CB38; }
#touchball .touchball .ball.ball-children.ball-energos svg g path.color { fill: #C4E538; }
#touchball .touchball .ball.ball-children.ball-marineblue svg g path.color { fill: #1c3faa; }
#touchball .touchball .ball.ball-children.ball-turkishaqua svg g path.color { fill: #006266; }
#touchball .touchball .ball.ball-children.ball-barared svg g path.color { fill: #ED4C67; }
#touchball .touchball .ball.ball-children.ball-veryberry svg g path.color { fill: #B53471; }
#touchball .touchball .ball.ball-children.ball-hollyhock svg g path.color { fill: #833471; }
#touchball .touchball .ball.ball-children.ball-white svg g path.color { fill: #FFFFFF; }

.preview #cogsums { position: absolute; z-index: 1000; top: 0px; left: 0px; width: 100%; height: 100%; }
.preview #cogsums .cogsums { position: absolute; top: 12.5px; left: 12.5px; width: calc(100% - 75px); height: calc(100% - 25px); }
.preview #cogsums .cogsums .sum { position: absolute; top: 50%; left: 50%; margin: -12.5px 0px 0px -12.5px; width: 75px; height: 25px; border-radius: 100%;  }
.preview #cogsums .cogsums .sum { line-height: 25px; text-align: center; }
.preview.preview-white #cogsums .cogsums .sum { color: #FFFFFF; }
#cogsums { z-index: 2000; position: absolute; z-index: 1000; top: 0px; left: 0px; width: 100%; height: 100%; }
#cogsums .cogsums { position: absolute; top: 50px; left: 50px; width: calc(100% - 200px); height: calc(100% - 100px); }
#cogsums .cogsums .sum { display: none; position: absolute; top: 50%; left: 50%; margin: -50px 0px 0px -50px; width: 200px; height: 100px; border-radius: 100%;  }
#cogsums .cogsums .sum { line-height: 100px; text-align: center; white-space: nowrap; font-weight: 600; font-size: 50px; } 
.lab-white #cogsums .cogsums .sum { color: #FFFFFF; }

.preview #cogsums .cogsums .sum { font-size: 20px; }

#voc { z-index: 9000; display: none; position: absolute; top: 0px; left: 0px; width: 100%; height: 100vh; background-color: rgba(28, 63, 170, 0.15); }
#voc .voc { display: table; width: 100%; height: 100%; }
#voc .voc .voc-popup { display: table-cell; vertical-align: middle; width: 100%; height: 100%; }
#voc .voc .voc-popup .popup {-webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
#voc .voc .voc-popup .popup { border-radius: 0.25rem; display: block; background-color: #FFFFFF; width: 100%; max-width: 450px; margin: 0px auto; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); }
#voc .voc .voc-popup .popup button[rel="voc"] { color: #718096; background-color: #edf2f7; -webkit-transition: background .4s ease-in-out, color .4s ease-in-out; -o-transition: background .4s ease-in-out, color .4s ease-in-out; transition: background .4s ease-in-out, color .4s ease-in-out; }
#voc .voc .voc-popup .popup button[rel="voc"]:hover { color: #FFFFFF; background-color: #1C3FAA; }

#sud { z-index: 9000; display: none; position: absolute; top: 0px; left: 0px; width: 100%; height: 100vh; background-color: rgba(28, 63, 170, 0.15); }
#sud .sud { display: table; width: 100%; height: 100%; }
#sud .sud .sud-popup { display: table-cell; vertical-align: middle; width: 100%; height: 100%; }
#sud .sud .sud-popup .popup {-webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
#sud .sud .sud-popup .popup { border-radius: 0.25rem; display: block; background-color: #FFFFFF; width: 100%; max-width: 450px; margin: 0px auto; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); }
#sud .sud .sud-popup .popup button[rel="sud"] { color: #718096; background-color: #edf2f7;  }
#sud .sud .sud-popup .popup button[rel="sud"]:hover { color: #FFFFFF; background-color: #1C3FAA; }


#voc img { margin: 0px auto; height: 100%; max-height: 600px; width: auto; }
#sud img { margin: 0px auto; height: 100%; max-height: 600px; width: auto; }

.preview #voc { height: 100%; }
.preview #voc .voc  {  }
.preview #sud { height: 100%; }
.preview #sud .sud {  }

.preview {  }
.preview #startstop { z-index: 9000; position: absolute; top: 0px; left: 0px; }
.preview #startstop span:first-child { margin: 10px 0px 10px 10px;float: left; }
.preview #startstop span:last-child { margin: 10px 10px 10px 5px;float: left; }
.preview #startstop input { margin: 10px 5px 10px 5px; float: left; }
.preview #stopwatch { z-index: 9000; position: absolute; bottom: 0px; left: 0px; padding: 10px; font-size: 1.125rem; font-weight: 500; }
#volume { float: right; overflow: hidden; }
#volume span { margin: 10px 10px 10px 5px;float: left; }
#volume input { margin: 10px 5px 10px 10px; float: left; }

.preview #startstop span { -webkit-transition: background .4s ease-in-out, color .4s ease-in-out; -o-transition: background .4s ease-in-out, color .4s ease-in-out; transition: background .4s ease-in-out, color .4s ease-in-out; }
.preview #stopwatch { -webkit-transition: background .4s ease-in-out, color .4s ease-in-out; -o-transition: background .4s ease-in-out, color .4s ease-in-out; transition: background .4s ease-in-out, color .4s ease-in-out; }
.preview.preview-white #startstop span { color: #FFFFFF; }
.preview.preview-white #stopwatch { color: #FFFFFF; }

.preview #startstop .input.input--switch[type=checkbox]:checked { background-color: #91C714; border-color: #91C714; }
#volume .input.input--switch[type=checkbox]:checked { background-color: #91C714; border-color: #91C714; }


.switch { overflow: hidden; line-height: 39px; }
.switch .switch-text { width: 100px; float: left; line-height: 39px; }
.switch .switch-range { width: calc(100% - 100px - 100px); float: left; padding-top: 4.5px; }
.switch .switch-input { width: 100px; float: right; line-height: 39px; margin: 7.5px 7.5px 7.5px 7.5px; }
.switch .input.input--switch[type=checkbox]:checked { background-color: #91C714; border-color: #91C714; }

#start .input.input--switch[type=checkbox]:checked { background-color: #91C714; border-color: #91C714; }

input[name="state[speed]"]{ direction: rtl }
input[name="disco[speed]"]{ direction: rtl }
input[name="touch[speed]"]{ direction: rtl }
input[name="cog[speed]"]{ direction: rtl }

.switch { overflow: hidden; line-height: 39px; }
.switch .switch-text { float: left; line-height: 39px; }
.switch .switch-input { float: right; line-height: 39px; margin: 7.5px 7.5px 7.5px 7.5px; }
.input--switch[type=checkbox]:not(:checked) { background-color: #FBC500;}
.input--switch[type=checkbox]:not(:checked):before { background-color: #FFFFFF;  }
.input--switch[type=checkbox]:checked { background-color: #91C714; border-color: #91C714; }

@media (max-width: 1023px){

	.dohide { display: none; }

}


.input.input--switch.input--muted[type=checkbox]:not(:checked) { background-color: #FBC500 !important;}
.input.input--switch.input--muted[type=checkbox]:not(:checked):before { background-color: #FFFFFF;  }
.input.input--switch.input--muted[type=checkbox]:checked { background-color: #91C714 !important; border-color: #91C714 !important; }

@media only screen and (max-height: 600px) {
	#sud img {
		height: 400px;
	}
	#sud .sud .sud-popup {
		vertical-align: top;
	}
	#voc img {
		height: 400px;
	}
	#voc .sud .sud-popup {
		vertical-align: top;
	}
}