input[text] {
    box-sizing: border-box;
    -moz-box-sizing: border-box; /* Firefox */
    -webkit-box-sizing: border-box; /* Safari */
}

.header {
    font-size: 110%;
    font-weight: bold;
    margin: 0;
    padding: 0;
	color: #154273;
} /* Wieb: color toegevoegd */

.subheader {
    font-size: 100%;
    font-weight: bold;
    margin: 0;
    padding: 0;
	color: #154273;
} /* Wieb: color toegevoegd */

h1 {
    width: 100%;
    text-align: center;
}

#header {
    width: 100%;
    text-align: center;
}

#subheader {
    font-size: 100%;
    font-weight: bold;
    margin: -3px 0 0 0;
    padding: 0;
    height: 59px;
    background-color: #007BC7;
    border-bottom-width: 10px;
    border-bottom-style: solid;
    border-bottom-color: #B2D7EE;
	color: #154273;
} /* Wieb: bg-color titelbalk en border-bottom-color aangepast en color toegevoegd */

    #subheader > h1 {
        text-align: left;
        font-size: 1.637em;
        margin-left: 1em;
        vertical-align: middle;
        color: #ffffff;
        width: 50%;
        line-height: 2.5em;
        font-family: Arial,Helvetica,Sans-Serif;
    }

/* Textbox and textarea controls */
.generic-input[readonly] {
    background: #D4E8F5;
} /* Wieb: kleur aangepast */

.generic-input {
    display: block;
    width: 98%;
    margin: 0px; /* migratie fix */
    padding: 0px; /* migratie fix */
    height: 20px; /* migratie fix */
}

.input-valuta {
    text-align: right;
}

textarea.generic-input {
    font-size: 10pt;
    height: 80px;
    overflow-y: scroll;
}

.generic-input-indented {
    display: block;
    width: 80%;
    margin-left: 26px;
}

textarea.generic-input {
    font-size: 10pt;
    height: 80px;
    overflow-y: scroll;
}

/* auto-complete styling */
.generic-input input {
    width: 100%;
    height: 18px; /* migratie fix */
}

.text-right {
    text-align: right;
    display: block;
}

/* Validation error message */

.errormessage {
    display: block;
    color: #ff0000;
    font-size: 80%;
    font-weight: bold;
}

/* Question labels */

.label-active {
    color: #000;
}

.label-passive {
    color: #444;
}

/* Alert message text block */

.alert-message {
    display: block;
    padding: 10px 10px 10px 38px;
    background: #F8DAD9 url('images/icon-foutmelding24x24.png') no-repeat;
    background-position: 7px 10px;
    color: #000;
} /* Wieb: bg-kleur en bg-image veranderd */

/* Additional information text block */

.information {
    display: block;
    padding: 10px 10px 10px 38px;
    background: #D4E8F5 url('images/icon-infomelding24x24.png') no-repeat;
    background-position: 7px 10px;
    color: #000;
} /* Wieb: bg-kleur en bg-image veranderd */

.waarschuwing {
    display: block;
    padding: 10px 10px 10px 38px;
    background: #FFF2D9 url('images/icon-warning24x24.png') no-repeat;
    background-position: 7px 7px;
    color: #000;
} /* Wieb: nieuw element; dit is de oude (gele) .information met andere .gif */

/* Horizontal line (divider) */

div.line {
    width: 100%;
    padding: 0px;
    display: block;
    font-size: 1px;
    height: 1px;
    line-height: 1px;
    margin-bottom: 5px;
    text-indent: -3000em;
}

div.linedark {
    width: 100%;
    padding: 0px;
    display: block;
    font-size: 1px;
    height: 1px;
    line-height: 2px;
    margin-bottom: 5px;
    text-indent: -3000em;
}

/* Bullet for required items */

.required-active, .required-passive {
    display: block;
    height: 6px;
    width: 6px;
    margin-top: 6px;
    margin-left: 8px;
    background-position: top left;
    background-repeat: no-repeat;
    color: #000;
    text-indent: -3000em;
    line-height: 50%;
}

.required-active {
    background-image: url('images/required-active.gif' );
}

.required-passive {
    background-image: url('images/required-passive.gif' );
}

/* Various other input controls */

.dropdown-input {
    width: 100%;
    height: 22px;
}

.calendar-input {
    width: 80%;
    margin-right: 2px;
    line-height: 16px;
}

table.calendar-input {
}

    table.calendar-input tr td {
        vertical-align: middle;
    }

    /* Limit calendar input width in all browsers (to prevent input field from covering 
   calendar control button and to keep popup aligned properly) */
    table.calendar-input input {
    }

/* Calender - calender-input / text */
.calendar-input button.ui-datepicker-trigger {
    width: 24px;
    height: 24px;
    /*display: block;*/
    position: absolute;
    /*right: 25%;*/
    margin-left: -5px;
    top: 4px;
    background: none;
    border: none;
    cursor: pointer;
}

img.ui-datepicker-trigger {
    position: absolute;
    bottom: 6px;
    cursor: pointer;
}

.calendar-input button.ui-datepicker-trigger:focus {
    outline: 2px solid #525248;
}

.calendar-input button.ui-datepicker-trigger::-moz-focus-inner {
    border: none;
    outline: none;
}

/* Next question and change answers buttons */

.change-button {
    float: right;
    display: block;
    height: 26px;
    line-height: 21px;
    margin: 4px; /*give safari space to show it's glow in the dark features*/
    padding: 0 12px 0 28px;
    background-color: transparent;
    background-image: url('images/icon-change24x24.png');
    background-repeat: no-repeat;
	background-position: 11px center;
	background-size: 16px;	
    border: solid 1px #007BC7;
    color: #007BC7;
    text-decoration: none;
    text-align: center;
    vertical-align: top;
    width: 100px;
	/* font-weight: bold; */
} /* Wieb: bg-image, bg-position, height, borderkleur, color gewijzigd en font-weight toegevoegd */

.change-button:hover {
    color: #01537C;
	border: 1px solid #01537C;
	background-color: #f9f9f9;
} /* Wieb: hover-rule toegevoegd */

.previous-step-button {
    float: left;
    display: block;
    height: 26px;
    width: 130px;
    /* line-height: 19px; */
    /* font-size: 1em; */
    text-align: center;
    font-weight: 400;
    margin: 4px; /*give safari space to show it's glow in the dark features*/
    padding: 0 4px 0 8px;
    color: #01689B;
    cursor: pointer;
    background-color: #FFFFFF;
	border: 1px solid #01689B;
} /* Wieb: Wieb: bg-color, border, height, font-weight, color  */

.previous-step-button:hover {
    color: #01537C;
	border: 1px solid #01537C;
	background-color: #f9f9f9;
} /* Wieb: hover-rule toegevoegd */

.next-step-button, .next-question-button {
    float: right;
    display: block;
    height: 26px;
    width: 130px;
    /* line-height: 19px; */
    /* font-size: 1em; */
    text-align: center;
    font-weight: 400;
    margin: 4px;
    padding: 0 8px 0 4px;
    color: #FFFFFF;
    cursor: pointer;
    background-color: #01689B;
    border: 1px solid #01689B;
} /* Wieb: bg-color, border, height, font-weight, color aangepast */

.next-step-button:hover, .next-question-button:hover {
	background-color: #01537C;
	border: 1px solid #01537C;
} /* Wieb: hover-rule toegevoegd */

/* Help button */

.help-callout 
{ background-color: #D4E8F5 !important;
} /* Wieb: bg-color voor i-tje (niet de foutmelding, daarvoor evt. toevoegen: ", .validate-callout")  */

.help-callout-co-up  {
    border-bottom: 10px solid #D4E8F5 !important;
	} /* Wieb: bg-color voor pijltje in i-tje (niet de foutmelding, daarvoor evt. toevoegen: ", .validate-callout") */

a.help {
    position: relative;
    background-image: url('images/icon-infomelding24x24.png' );
	background-size: 18px 18px;
    background-position: -1px -1px;
    background-repeat: no-repeat;
    display: block;
    margin: 0 10px 0 10px;
    text-indent: -3000em;
    width: 17px;
    height: 17px;
    /*border: 1px solid #000;*/
    background-color: transparent;
    cursor: pointer;
} /* Wieb: border verwijderd, margin gewijzigd en background-size toegevoegd */

    .help:hover {
    }

#help-popup {
    display: none;
    position: absolute;
    top: 0px;
    left: 0px;
    color: Black;
    padding: 16px 12px 12px 12px;
    width: 376px;
    background-image: url('images/help-popup-background.gif');
    background-repeat: no-repeat;
    background-position: top left;
}

/* Wieb: hieronder opmaak voor het 'hulp-blokje' de titel daarin en het img met het i-symbool */
.hulp-block  {
	display: block;
	width: 100%;
	height: 100%;
	padding: 15px;
	background-color: #D4E8F5;
	}
	
.hulp-titel {
	color: #007BC7; 
	font-weight: bold; 
	font-size: 1.2em;
	}

.hulp-tekst {
	line-height: 1.7;
	}

.img-hulp {
	margin: 0 0 -3px 0;
	height: 16px; 
	width: 16px;
	}

	
/* Other buttons; for example for controlling group iteration  */

.ktf_printbutton {
	text-decoration: none;
} /* Wieb: streep onder link weggehaald */

.ktf_printsavebutton {
	text-decoration: none;
	float: right;
    display: block;
    height: 20px;
    width: 200px;
    text-align: center;
    margin: 4px 0;
    padding: 6px 4px 0 4px;
    color: #FFFFFF !important;
    cursor: pointer;
    background-color: #01689B;
    border: 1px solid #01689B;
} /* Wieb: streep onder link weggehaald */

.generic-button {
    display: block;
    height: 25px;
    text-align: center;
	font-weight: 400;
    border: solid 1px #DDDDDD;
    background-color: #FFFFFF;
    color: #01689B;
    line-height: 25px;
	font-size: 1em;
    text-decoration: none;
    cursor: pointer;
    width: 100%;
} /* Wieb: style aangepast */

.generic-button:hover {
    border: 1px solid #01537C;
	color: #01537C;
	background-color: #f9f9f9;
} /* Wieb: css-rule toegevoegd */

.generic-button-blue {
    display: block;
    height: 25px;
    text-align: center;
    font-weight: 400;
    border: 1px solid #01689B;
    background-color: #FFFFFF;
    color: #01689B;
    line-height: 25px;
    font-size: 1em;
    text-decoration: none;
    cursor: pointer;
	width: 100%;
} /* Wieb: width, height, bg-color, border */ 

.generic-button-blue:hover {
    border: 1px solid #01537C;
	color: #01537C;
	background-color: #f9f9f9;
} /* Wieb: css-rule toegevoegd */

table.radiobutton-input {
    width: 100%;
}

table.radiobutton-input tr td {
        display: block;
        position: relative;
        vertical-align: top;
    }

table.radiobutton-input tr td input {
            position: absolute;
            left: 2px;
            top: 1px;
        }

table.radiobutton-input tr td label {
            display: block !important;
            margin-left: 24px;
        }

table.checkbox-input {
    width: 100%;
}

table.checkbox-input tr td {
        display: block;
        position: relative;
        vertical-align: top;
    }

table.checkbox-input tr td input {
            position: absolute;
            left: 2px;
            top: 0px;
        }

        table.checkbox-input tr td label {
            display: block !important;
            margin-left: 24px;
        }

/* add & remove iteration buttons */

.add-button, .add-button-text, .remove-button, .remove-button-text {
    background-repeat: no-repeat;
    background-color: Transparent;
    overflow: hidden;
    border: none;
    cursor: pointer; /*Image size*/
}

.add-button, .remove-button {
    font-size: 0px;
    line-height: 0px;
    outline: none;
    border: none;
    width: 20px;
    height: 20px; /*No text or borders needed so hide it*/
} /* Wieb: width en height aangepast */

.add-button-text, .remove-button-text {
    background-position: center;
    height: 18px;
    padding-left: 18px;
    text-align: left;
}

.add-button, .add-button-text {
    background-image: url('images/icon-additeration24x24.png');
	background-size: 18px;
	background-color: #F3F3F3;
	background-position: center;
} /* Wieb: css-rule helemaal aangepast */

.add-button:hover, .add-button-text:hover {
	border: solid 1px #B2D7EE;
	background-color: #C4C4C4;
} 

.remove-button, .remove-button-text {
    background-image: url('images/icon-removeiteration24x24.png');
	background-size: 18px;
	background-color: #F3F3F3;
	background-position: center;
} /* Wieb: css-rule helemaal aangepast */

.remove-button:hover, .remove-button-text:hover {
	border: solid 1px #B2D7EE;
	background-color: #C4C4C4;
} /* Wieb: css-rule toegevoegd */

.invisible {
    display: none;
}

.upload {
    font-size: 10pt;
    /* height: 24px; */
}

.text {
    display: inline-block; /* needed to ensure that empty fields are 'display' (read: 'fill the reserved space') as well */
    margin: 0px 2px; /* migratie fix */
}

.text-small {
    font-size: 7pt;
}

DIV.kodision-maps {
    margin: 0px;
    padding: 0px;
    height: 400px;
}

INPUT.kodision-maps {
    width: 300px;
    margin: 0 auto;
    text-align: center;
    display: block;
}




/* Popup calendar styles */

table.scw {
    width: 180px;
    padding: 1px;
    font-size: 0.8em;
    margin-top: -6px;
}

td.scwHead {
    padding: 2px;
    font-weight: bold;
}

select.scwHead {
}

input.scwHead {
}

tr.scwWeek {
    font-weight: bold;
}

td.scwWeek {
    padding: 0px;
}

table.scwCells td {
    padding: 0px;
}

td.scwCells {
}

td.scwFoot {
}

th {
    text-align: center
}
/* Wieb: css-regel toegevoegd om table header te centreren */

/* Grid styling */
.grid th, .grid td {
    padding: 2px 5px;
}

.grid tr:nth-child(even) {
    background: #FFF;
}

.grid tr:nth-child(odd) {
    background: #E2EEE7;
}

.grid tr.header {
    background: #046F96;
    color: #FFF;
}

    .grid tr.header a:link, .grid tr.header a:visited, .grid tr.header a:active {
        color: #FFF;
    }

.grid tr.selectedRow {
    background: #9CC2D6;
}

.grid td {
    cursor: pointer;
}

.grid tr.selectedRow td {
    cursor: default;
}

.radiobutton-200h {
    max-height: 200px;
    width: 100%;
    display: inline-block;
    overflow-x: hidden;
}

    .radiobutton-200h label {
        max-width: 200px;
        overflow: hidden;
    }

    .radiobutton-200h a {
        clear: right;
        float: right;
    }

.ui-menu-item-alternate {
    background-color: #eee;
    color: black !important;
}

/* Wieb: hieronder een aanvullende styling voor het fraaier inspringen van lange tekst i.g.v. een radiobutton of checkbox */
.radiobutton-input-vertical span input[type=radio], .checkbox-input-vertical span input[type=checkbox] {
    float: left;
}

.radiobutton-input-vertical span label, .checkbox-input-vertical span label {
    /* margin: 0 0 -10px 25px; */
	margin: 1px 0 -2px 25px;
    display: block;
} /* Wieb: margin aangepast (even kijken hoe dat bij radiobuttons uitpakt) */

/* 22NOV19:Wil Pieneman: onderstaande regels verwijderd. Is een fix in 4.3. Advies van Boy Thach
 .help-callout, .validate-callout {
    position: fixed !important;
}
*/

.callout-validator {
    top: 2px !important;
	left: -20px !important;
} /* Wieb 2-6-2020: hier heeft Daniël Pollmann een aanpassing gedaan om de waarschuwingsdriehoek naast de checkbox te plaatsen */

/* Map - kodision-maps / kodision-maps-image */
.kodision-maps,
.gmap-active,
.gmap-passive,
.leaflet-control-container {
    width: 300px; /* Wieb: was 100% */
    min-height: 400px;
    margin: 0;
}

input.kodision-maps {
    width: 300px; /* Wieb: was 100% */
    margin: 0 auto;
    text-align: center;
    display: block;
}

.kodision-maps-image {
    width: 100%;
    height: auto;
    display:block;
    margin: 0;
    padding: 0;
}

.kodision-maps-image img{
    width: 100%;
    max-width: 600px;
}

.kodision-maps-buttoncontainer {
    width: auto;
    height: 65px;
    padding-top: 5px;
    background-color: #eee;
}

.kodision-maps-buttoncontainer a {
    margin: 0 auto;
    display: block;
    text-decoration: none;
    text-align: center;
}

a.kodision-maps-closebutton, a.kodision-maps-openbutton {
    display: block;
    text-decoration: none;
    text-align: center;
}

a.kodision-maps-closebutton {
    width: 80%;
}

/* Next - next-question-button */
/* The Next button control is already covered by the generic button CSS style */

/* NL Maps */
[data-tftype=nlmapsleaflet] .nlmapsleafet-container {
    width: 600px; /* Wieb: was 100% */
    height: 400px;
}

[data-tftype=nlmapsleaflet] .kodision-maps-image img {
    max-width: none;
}