body { background-color: #555; margin-bottom:30px; }
.dot { height:150px; width:180px; border-radius: 50%; display: none; position:fixed; top:0; right:0; text-align:center; float:right;margin-right:70px;margin-top:-100px;padding-top:95px; }
.dot b { font-size:28px;font-weight:bold; }
#meldingen { position: fixed; top:0; left:0; width: 100%; height: 100%; z-index:9999999; background-color: #111; color: white; display: none; }
h2 { width: 100%; text-align: center; }
#awaitingscreen { position: fixed; top:0; left:0; width: 100%; height: 100%; z-index:9999999; background-color: rgba(1, 1, 1, .5); color: white; display: none; }
.klokinlogo{position:fixed;bottom:0;right:0;padding:5px;color:#fff;width:100%;background:#333;opacity:0.5;text-align:right;}
.naam { width: 100%; height: 17px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }

#sluitmodalknop { display: none; }

div#multicolumn1 { -webkit-column-count: 4; -webkit-column-gap: 20px; column-count: 4; column-gap: 20px; }
.klok-button { border: 1px solid #ddd; color: #fff; height:46px; overflow: hidden; border-radius: 10px; border: 1px solid #ddd; -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid-column; margin-bottom: 10px; padding: 6px 0 0 10px; cursor: pointer;}
.klok-button-project { border: 1px solid #ddd; color: #fff; height:46px; width: 104px; float: left; overflow: hidden; border-radius: 10px; border: 1px solid #ddd; -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid-column; margin: 0 5px 10px 0; padding: 6px 0 0 10px; cursor: pointer;}
.klok-button-select { width: 100%; padding: 0 0 0 10px; line-height: 30px; color: #333; }
.klok-button-post { padding: 10px 0 0 10px; color: #333; }
.klok-button:hover { background-color: #ddd; color: #333; }
.afdelingen { font-size: 10px; float: left; width: 100%; }
.modal-error { color: red;  position: relative;  padding: 10px 0 0 12px; }
.top { margin-top: 20px; }
.klokken-modal {margin-bottom: 120px; }
.pinform { width: 260px; height: 370px; margin-left: auto;margin-right: auto; font-size: 30px; }
.pinvoer { width: 252px; float: left; margin-bottom: 4px; font-size: 30px; text-align: center;}
.pinknop { color: #000; width: 72px; height: 72px; float: left; margin: 6px; border-radius: 5px; border: solid 2px #333; color: #333;}
.pinknop:active { background: #ccc;}
.melding { width: 180px; }
.extratop { margin-top: 20px; }
.modal-body { padding-top: 1px; }
.kb10 { width: 46%; float: left; margin-left: 1%; margin-right: 1%; }
.kb20 { width: 18%; float: left; margin-left: 1%; margin-right: 1%; font-size: 14px;}

.sh36 .klok-button { padding: 1px 0 0 6px; margin-bottom: 5px; height: 32px; }
.sh32 .klok-button { padding: 2px 0 0 6px; margin-bottom: 6px; height: 34px; }
.sh21 .klok-button { padding: 3px 0 0 7px; margin-bottom: 7px; height: 40px; }
.sh18 .klok-button { padding: 6px 0 0 7px; margin-bottom: 7px; }

.tp24 .klok-button,.tp36 .klok-button { height: 70px; }
.tp24 .afdelingen,.tp36 .afdelingen { font-size: 14px; }
.tp24 .naam { height:32px; font-size: 22px; }
.tp36 .naam { height:32px; font-size: 18px; }


.kvRadio { float: right; width: 300px; height: 60px; }
.kvRadio input[type="radio"]  { width: 26px; height: 26px; margin-right: 10px; }
.kvRadio label { display: block; float: left; width: 90px; }


@media (max-width: 980px) { .extratop { margin-top: 10px; }}
@media (max-height: 599px) { .klokken-modal {margin-bottom: 0px; }}
@media (max-height: 600px) { body { margin-bottom: 0px; }.modal-header {padding-top: 2px; padding-bottom: 2px; }	.modal-body { padding-bottom: 4px; min-height: 40px; overflow: auto; }.klok-button-post { padding: 10px 0 0 10px; height: 36px; margin-bottom: 8px;}.modal-footer { padding-bottom: 5px; padding-top: 5px; } .extratop { margin-top: 8px; }.klokinlogo { padding: 1px 5px; }}
@media (max-width: 1080px) {.container { width: 100%; }	div#multicolumn1 { column-gap: 9px; }}
@media screen and (max-width: 1040px) and (min-width: 900px) and (min-height: 800px) {.klokken-modal {margin-bottom: 500px; }}
@media (max-width: 500px) {	div#multicolumn1{ -webkit-column-count: 3; -webkit-column-gap: 20px; column-count: 3; column-gap: 9px; }}
@media (min-width: 1100px)  {.extratop { margin-top: 50px; } .container { width: 98%; } .klok-button{ margin-bottom: 14px; }}
@media (min-width: 1400px)  {
	.extratop { margin-top: 100px; }
	.container { width: 1370px; }
	div#multicolumn1{ -webkit-column-count: 5; -webkit-column-gap: 50%; column-count: 5; column-gap: 20px; }
	.klok-button{ margin-bottom: 14px; }
}

@media (min-width: 1500px)  {.container { width: 1470px; }}
@media (min-width: 1600px)  {.container { width: 1570px; }}
@media screen and (width: 1024px) and (height: 600px) {.modal-body { font-size: 14px; } .klok-button-post {  padding: 7px 0 0 10px; }}
.pd50 .klok-button { height:40px; font-size: 14px; margin-bottom: 8px ; }
.pd40 .klok-button { height:40px; font-size: 16px; margin-bottom: 8px ; }
.pd32 .klok-button { height:47px; font-size: 16px; margin-bottom: 8px ; }
.pd24 .klok-button { height:45px; margin-bottom: 8px ; }
.pd24 .naam { height:21px; font-size: 16px; margin-bottom: 0px ; }
.pd24 .afdelingen { font-size: 12px; }
.pd15 { column-gap: 14px !important; }
.pd15 .klok-button { height:56px; margin-bottom: 14px ; }
.pd15 .naam { height:23px; font-size: 18px; margin-bottom: 0px ; }
.pd15 .afdelingen { font-size: 14px; }
.pd8 { column-gap: 15px !important; }
.pd8 .klok-button { height:59px; margin-bottom: 14px ; }
.pd8 .naam { height:23px; font-size: 18px; margin-bottom: 2px ; }
.pd8 .afdelingen { font-size: 14px; }
.pd0 { column-gap: 20px !important; }
.pd0 .klok-button { height:76px; margin-bottom: 18px; }
.pd0 .naam { height:32px; font-size: 24px; margin-bottom: 2px ; }
.pd0 .afdelingen { font-size: 18px; }

@media screen and (width: 1280px) and (height: 800px) {
	.pd50 .klok-button { height:45px; font-size: 14px; margin-bottom: 8px ; }
	.pd40 .klok-button { height:52px; font-size: 16px; margin-bottom: 10px ; }
	.pd40 .afdelingen { font-size: 14px; }
	.pd32 .klok-button { height:56px; font-size: 16px; margin-bottom: 14px ; }
	.pd32 .afdelingen { font-size: 14px; }
	.pd24 .klok-button { height:56px; margin-bottom: 14px ; }
	.pd24 .naam { height:21px; font-size: 16px; margin-bottom: 0px ; }
	.pd24 .afdelingen { font-size: 14px; }
	.pd15 { column-gap: 14px !important; }
	.pd15 .klok-button { height:56px; margin-bottom: 14px ; }
	.pd15 .naam { height:23px; font-size: 18px; margin-bottom: 0px ; }
	.pd15 .afdelingen { font-size: 14px; }
	.pd8 { column-gap: 15px !important; }
	.pd8 .klok-button { height:59px; margin-bottom: 14px ; }
	.pd8 .naam { height:23px; font-size: 18px; margin-bottom: 2px ; }
	.pd8 .afdelingen { font-size: 14px; }
	.pd0 { column-gap: 20px !important; }
	.pd0 .klok-button { height:76px; margin-bottom: 18px; }
	.pd0 .naam { height:32px; font-size: 24px; margin-bottom: 2px ; }
	.pd0 .afdelingen { font-size: 18px; }
}