label { letter-spacing: -0.03em; }
input { font-weight: 500; }

#instrument-content.verzuimbenchmark { width: 100%; margin: 10px 0 100px; }

.verzuimbenchmark legend {display:none;}
#verzuimbenchmark-inleiding { font-size: 13px; margin: 20px 0; }
#verzuimbenchmark-inleiding strong { font-size: 15px; }

#verzuimbenchmark-blokken { clear: both; border: 10px #f8f8f8 solid; border-width: 20px 0 0 0; padding-top: 20px; margin-top: 20px; }
.wrapper-instrument-submenu { margin-top: 60px; }

.wrapper-instrument-submenu h3 { margin-bottom: 0; }
.wrapper-instrument-submenu ul,
#instrument-onderwerpen ul { margin: 10px !important; }
#instrument-onderwerpen li { list-style: square; margin: 0 10px; }

.wrapper-instrument-submenu,
#instrument-onderwerpen a { color: #4e4e4e!important; }
.wrapper-instrument-submenu ul { margin: 0; padding: 0!important; border:0!important;}
.wrapper-instrument-submenu ul li {margin:0 10px;}

.verzuimbenchmark #instrument-downloads,
.verzuimbenchmark .wrapper-instrument-submenu,
.verzuimbenchmark #instrument-onderwerpen { float: left !important; margin-right: 10px; }

#brinform { position: relative; top:10px; left: 40px; width: 90%; height: 100px; }

#session-message { padding: 20px 30px; }

.verzuimbenchmark input { font-size: 100%; text-transform: uppercase; -webkit-appearance: none; border-radius: 0;  }

#brincode { margin: 0; border:1px solid #999; line-height:1; padding: 2px; font-size: 300%; color: #d1174d; font-weight: bold; width: 260px; text-transform: none;}
#brincode.filled { text-transform: uppercase; }

#brinform a { position: absolute; top: 40px; left: 225px; cursor: pointer; width: 24px; height: 25px; background-position: -269px -10px; font-size: 0px; color: #ffffff; }

#brinform label { display: block; }

#brincode-not-found { position: absolute; top: 10px; left: 300px; width: 290px; z-index: 999; }


#verzuimbenchmark-brincode,
#verzuimbenchmark-instelling,
#verzuimbenchmark-resultaat,
#verzuimbenchmark-advies { background: #eee!important; overflow: visible; margin: 10px 0 0 0; position: relative; }

.step + .step.disabled { margin-top: 0 !important; }

#verzuimbenchmark-brincode { min-height: 200px; }

.labeled-field-row { clear: both; }
.verzuimbenchmark h4.onderdeel { text-align: left; margin: 0 0 20px 0; color: #d1174d!important; }
#uitkomst-titel { padding-left: 40px !important; }

.row2 { position: relative; }

.scrollbutton { padding: 1px; background-color: #e9e9e9; position: relative; margin: 0; }
.scrollbutton span { display: block; position: absolute; top: 12px; left: 10px; font-size: 26px; color: #d1174d; font-weight: bold; }
.scrollbutton h6 { font-weight: normal; font-size: 16px; line-height: 1em; color: #d1174d; padding: 0px; margin: 10px 0 4px 40px; }
.scrollbutton p { font-weight: bold; margin: 0 10px 10px 40px !important; font-size: 110%; }
.scrollbutton div { display: none; background: #e9e9e9; width: 50px; height: 50px; position: absolute; top: 30px; right: 20px; -moz-transform: scale(1) rotate(45deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg); -webkit-transform: scale(1) rotate(45deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg); -o-transform: scale(1) rotate(45deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg); -ms-transform: scale(1) rotate(45deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg); transform: scale(1) rotate(45deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg); }

.scroll-to-advies div { display: none; }
.scroll-to-advies:hover { cursor: default; background: #e9e9e9; }

.disabled .scrollbutton span,
.disabled .scrollbutton h6 { color: #CE96A6; }
.disabled .scrollbutton p { color: #aaa; }
.disabled .scrollbutton:hover { cursor: default; background-color: #eaeaea; }

.labeled-field { display: inline-block; margin-right: 10px; padding: 0 0 20px 0; position: relative; min-width: 100%; }

.row3 .labeled-field { min-width: 100px; }
.narrower { min-width: 50px!important; }

#verzuimpercentages,
#meldingsfrequenties { float: left; width: 48%; }

#verzuimpercentages { margin-right: 30px; border-right: 1px solid #ccc; width: 43%; }
#verzuimpercentages > h5,
#meldingsfrequenties > h5 { padding: 10px 0; text-align: left; margin-bottom: 10px; font-weight: bold; }
#verzuimpercentages .labeled-field,
#meldingsfrequenties .labeled-field { vertical-align: top; }

#instellingnaam .editor-field { line-height: 1.2em; }


#brinform label,
.editor-label label { text-transform: uppercase; display: block; font-size: 96%; }
.editor-label { margin-bottom: 10px; padding: 0 0 0 1px; }
.editor-field { font-size: 212%; font-weight: 600; }

.labeled-field input { width: 60px; }
#Instelling_Personeelsleden { width: 90px!important; display: inline-block; }

#Instelling_GemiddeldePersoneelslast { width: 150px; display: inline-block; }

#gvpschool-holder { width: 100px !important; overflow: hidden; }
#gvpschool-holder .editor-field span { float: right; }
.verzuimbenchmark-standalone #gvpschool-holder .editor-field span { float: none; }


#gvprg-holder { width: 100px !important; margin-right: 10px!important; }
#gvptop25-holder { width: 130px; margin-right: 0; }
#Instelling_GemiddeldeVerzuimpercentage { width: 70px; display: inline-block; }



.editor-field input[type=text] { border:1px solid #999; font-weight: 700 !important; font-size: 92% !important; display: block; padding: 1px !important; margin-top: -7px; }


.editor-label label span { display: inline-block; background: #ddd; border: 1px solid #ccc; font: 10px/1.0em sans-serif; color: #888; font-weight: bold; padding: 0 2px 1px; margin: -3px 0 0 6px; -moz-transform: scale(1) rotate(0deg) translateX(0px) translateY(-2px) skewX(0deg) skewY(0deg); -webkit-transform: scale(1) rotate(0deg) translateX(0px) translateY(-2px) skewX(0deg) skewY(0deg); -o-transform: scale(1) rotate(0deg) translateX(0px) translateY(-2px) skewX(0deg) skewY(0deg); -ms-transform: scale(1) rotate(0deg) translateX(0px) translateY(-2px) skewX(0deg) skewY(0deg); transform: scale(1) rotate(0deg) translateX(0px) translateY(-2px) skewX(0deg) skewY(0deg); border-radius: 5px; }

.editor-label:hover span { background: #DAA7B6; color: #D44D74; border-color: #D44D74; }

.editor-label:hover { cursor: default; color: #d44d74; }

#context-help { position: absolute; top: 30px; left: -10px; background: #f8f8f8; width: 300px; display: none; z-index: 10000; box-shadow: 0 0 3px 0px rgba(0,0,0,0.2); }

#context-help h5 { color: #d1174d; margin: 10px; }
#context-help p { margin: 10px !important; word-break: break-word; }
.tooltip { display: none; }
.tooltip p { word-break: break-word; }

/* Show tooltip when hovering the label area */
.editor-label { position: relative; }
.editor-label:hover .tooltip { display: block; }

/* Basic tooltip styling/positioning */
.editor-label .tooltip {
    position: absolute;
    top: 100%;
    left: 0;
    background: #f8f8f8;
    border: 1px solid #ddd;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    padding: 10px;
    width: 320px;
    z-index: 1000;
    opacity: 100;
}

input[type=text],
input[type=email] {
    background-color: #fff;
}

/* Allow tooltip to overflow this narrow holder */
#gvpschool-holder { overflow: visible !important; }

#verzuimbenchmark-instelling fieldset { margin: 20px 0px 0px 40px; padding-bottom: 30px; border-bottom: 1px solid #eee; }

#brincode-not-found,
.not-complete,
.updated { background: #eee; color: #d1174d; text-align: center; font-size: 140%; font-weight: normal; font-style: italic; padding: 20px; margin: 0 0px 0; display: none; }

.updated { color: #333; border-top: 1px #ccc solid; cursor: pointer; }

.resultaat-content { position: relative; float:left; width:40%;}
.resultaat-content .labeled-field { margin-top: 60px; }
.resultaat-content h3 { font-size: 20px; margin-bottom: 10px; }
.kwadrant-intro { font-weight: bold; max-width: 300px; }


#verzuimkosten { color: #D44D74; }

#kwadrantenholder { margin-left: 20px; }
#kwadranten { border: 2px solid #666; border-width: 0 0 2px 2px; }
#kwadranten td { margin: 0!important; background: #fff; padding: 50px 70px; margin: 0!important; }
#kwadranten a { display: block; }
#kwadranten a:hover { background: #eef; }
#y-as { width: 40px!important; background: url("/content/images/verzuimpercentage.png") 0 0 no-repeat; }
#x-as { height: 40px!important; background: url("/content/images/meldingsfrequentie.png") 100% 0 no-repeat; }

#row1 td { border-bottom: 1px solid #999; }
.col2 { border-right: 1px solid #999; }
.col1 { border-right: 1px dashed#c66; }
#row2 td { border-bottom: 1px dashed #c66; }
#nulpunt { text-align: right; vertical-align: top; }

#resultaat-teksten-en-cta { clear: both; padding-top: 20px; margin: 10px 60px 20px 40px; }
#resultaat-teksten-en-cta ul {padding-left: 30px;}
#resultaat-teksten-en-cta h3 { font-size: 30px; color: #d1174d; margin:0 0 10px 0; font-weight:700; }

#grafiek-holder { width:55%; float:left; margin: 0 0 0px 20px; position: relative; }

#grafiek-holder div { position: absolute; top: 30%; left: 25%; width: 300px; margin-left: -150px; text-align: center; background: #e6e6e6; border: 1px solid #ddd; padding: 20px 0; z-index: 50; }

.ondergrafiek { clear: both; height: 60px; }

#verzuimbenchmark-grafiek { float: none !important; width: 600px; position: relative; z-index: 100; margin: 0 !important; display: none; }

#verzuimbenchmark-advies { clear: both; }

#resultaat-cta { float: right; background: #f7f7f7; padding: 1px 20px; margin: 0 0 40px 40px; width: 30%; border: 1px solid #ccc; }

#resultaat-cta .onderdeel { background: #e8e8e8; margin: 0px -20px 20px -20px !important; padding: 10px 20px; }
#resultaat-cta input { font-size: 14px; }
#resultaat-cta input[type=text],
#resultaat-cta input[type=email] { border:1px solid #999; margin-bottom: 20px; text-transform: none; width: 100%; font-weight: normal!important; font-size: 15px !important; padding: 3px!important; }
#resultaat-cta input[type=submit] { margin-bottom: 40px; }

#resultaat-cta li a { font-weight: bold; display: block; margin: 30px 0; background: #d8d8d8; padding: 10px 5px 3px 45px; font-size: 17px; text-decoration: none; }
#resultaat-cta li a:hover { background: #dfdfdf; }
#resultaat-cta ul,
#resultaat-cta li { list-style: none; padding: 0; margin: 0; }
#resultaat-cta a div { margin: 7px 0 0 -45px; }
#resultaat-cta a p { font-weight: normal; font-size: 12px; }
#resultaat-cta .onderdeel { margin-top: 0 !important; }

.verzuimbenchmark-standalone #verzuimbenchmark-instelling,
.verzuimbenchmark-standalone #verzuimbenchmark-resultaat,
.verzuimbenchmark-standalone #verzuimbenchmark-grafiek { display: block; }

.verzuimbenchmark-standalone #brinform,
.verzuimbenchmark-standalone #brincode,
.verzuimbenchmark-standalone #resultaat-cta,
.verzuimbenchmark-standalone .scrollbutton,
.verzuimbenchmark-standalone label span { display: none !important; }

.onderdeel.standalone-only { display: none; }

.verzuimbenchmark-standalone .onderdeel { display: block !important; font-size: 130%; font-weight: normal; background: #e9e9e9; padding: 10px 20px 11px 40px; border: 1px solid #ccc; border-width: 1px 0 0 0; margin: 0 -40px 20px !important; }

.verzuimbenchmark-standalone #instrument-details { padding-top: 50px; }
.verzuimbenchmark-standalone #instrument-content { padding-top: 50px; }
.verzuimbenchmark-standalone #logo { right: 10px!important; margin-left: 750px; top: 30px; }
.verzuimbenchmark-standalone #verzuimbenchmark-resultaat { margin: 0!important; }

.verzuimbenchmark .labeled-input {padding:0; border:0;}

@media (max-width:992px) {
    #verzuimbenchmark-instelling fieldset {margin:0 20px;}
    #verzuimpercentages, #meldingsfrequenties {width:100%;}
    #verzuimpercentages {border:0; border-bottom:1px solid #999!important; margin:0;}

    #grafiek-holder {width:100%;}
    .resultaat-content {width:100%; padding:0 20px;}

    #resultaat-cta {width:40%;}
}

@media (max-width:767px) {
    #brinform {left:20px;}
    .editor-field {font-size:160%;}
    #grafiek-holder {margin:0;}
    .kwadrant-intro {max-width:none;}
    #resultaat-teksten-en-cta {margin:10px 20px;}
    #resultaat-cta {width:100%;}
    #instrument-content.verzuimbenchmark {margin-bottom:20px;}
}