/* * * * * * * * * * * * * * *  * * * * * *
* BASE SHEET JAN 5 2017 | MSR * * * * * * *
* * * * * * * * * * * * * * * * * * * * * */

/* * * * * * * * * * * * * * *  * * * * * *
* EDIT DEC 2017 | SHK * * * * * * * * * * *
* * * * * * * * * * * * * * * * * * * * * */

/* Aangepast door SK vanaf 08-12-2017
1. Aanpasknoppen op de overzichtspagina rechts uitgelijnd en getoond als linkjes
2. Media queries verplaatst zodat ze altijd werken
3. Formulier een vaste breedte zodat knoppen etc. mooi uitlijnen
4. Verzendknop rechts uitgelijnd
5. Teksten niet groter op mobiel
6. Hamburgermenu minder padding (mobiel menu)
7. Spaties tussen tekst over grootte bijlagen gelijk
8. Verzendknop disabled tonen wanneer niet alle verplichte vragen zijn ingevuld
9. Inputvelden niet breder dan het formulier laten zijn
10. Tekst op overzichtspagina niet meer dikgedrukt, tussenkopjes wel dikgedrukt
11. Navigatie menu-opties geen vaste hoogte
12. Hamburgermenu op mobiel meer margin-bottom bij uitklappen
13. Datum en tijdvelden icoon beter uitgelijnd
14. Verplichte velden tekst meer ruimte tussen volgende/vorige buttons onderaan formulier
15. Op overzicht: bloktitels wel dikgedrukt en antwoorden niet
16. upload knoppen als je zelf tekst toevoegt standaard hoogte maken
17. Op overzicht vraag-antwoord koppels wat meer margin
18. Hint en errortekst zelfde lettergrootte en zelfde margin-top
19. Navigatieknoppen gelijke breedte op IE en Edge
*/

html,
body {
    width: auto;
    overflow-x: hidden;
    min-height: 100%;
    font-size: 13px;
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
}

html {
    font-size: 100%;
    height: 100%;
}

#doc4 {
    padding: 20px;
}

.orbeon .container h1 .xforms-control .xforms-output-output {
    margin-left: 0;
}

.orbeon .fr-mode-new .fr-view-appearance-full,
.orbeon .fr-mode-edit .fr-view-appearance-full,
.orbeon .fr-mode-view .fr-view-appearance-full,
.orbeon .fr-mode-test .fr-view-appearance-full {
    border: unset;
}

.orbeon .xforms-select1-appearance-full .xforms-selected,
.orbeon .xforms-select-appearance-full .xforms-selected,
.orbeon .xforms-select1-appearance-full .xforms-deselected,
.orbeon .xforms-select-appearance-full .xforms-deselected,
.orbeon .xforms-select1-appearance-full .xforms-items,
.orbeon .xforms-select-appearance-full .xforms-items {
    display: inline-block;
    float: none;
    clear: none;
}

.orbeon .xforms-select1-appearance-full .xforms-selected,
.orbeon .xforms-select-appearance-full .xforms-selected,
.orbeon .xforms-select1-appearance-full .xforms-deselected,
.orbeon .xforms-select-appearance-full .xforms-deselected,
.orbeon .xforms-select-appearance-full .xforms-items {
    display: block;
    float: none;
    clear: none;
}

.orbeon h1 .xforms-control .xforms-output-output {
    font-size: 18px;
}

.orbeon h2 .xforms-control .xforms-output-output {
    font-size: 18px;
}

.orbeon h3 .xforms-control .xforms-output-output,
.orbeon h4 .xforms-control .xforms-output-output,
.block_title div.xforms-output-output {
    font-size: 16px;
}

.orbeon .orbeon-portlet-body,
.orbeon .xforms-output-output,
.orbeon .xforms-label,
.orbeon label,
.orbeon button,
.orbeon .btn,
.orbeon .xforms-alert.xforms-active,
.orbeon .digid-button .yui-button.yui-push-button,
.xforms-required label em,
.mandatory-text div em,
.orbeon .xforms-visited > .xforms-alert.xforms-active,
.orbeon .xforms-visited.xforms-alert.xforms-active,
.orbeon .xforms-hint-appearance-inline .xforms-hint,
.orbeon .navbar .fr-language-choice,
.orbeon .navbar .fr-goto-content {
    font-size: 13px;
}

.orbeon .fr-orbeon-version {
    font-size: 10px;
}

.orbeon .xbl-fr-section .fr-section-title .fr-section-label {
    font-size: 18px;
}

.orbeon .xbl-fr-section .fr-section-title .fr-section-label label {
    font-size: 18px;
}

.orbeon .navbar .navbar-inner .brand {
    font-size: 20px;
}

/* * * * * * * RESPONSIVE MENU * * * * * * * */
.collapseTrigger {
    position: absolute;
    clip: rect(0px, 0px, 0px, 0px);
    opacity: 0;
}

/* the checkbox */

label.collapseTriggerLabel {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    margin-bottom:10px;
    left: calc(50% - 25px);
    height: 50px;
    width: 50px;
    display: none;
    position: relative;
    z-index: 1;
    background-color: #82B927;
    border-radius: 50%;
    transition: background-color 0.5s;
}

.collapseTriggerLabel:before {
    content: '';
    display: block;
    position: absolute;
    height: 4px;
    width: 30px;
    background-color: #FFF;
    left: 10px;
    top: 17px;
    box-shadow: 0 7px #FFF, 0 14px #FFF;
    border-radius: 4px;
    transition: box-shadow 0.5s, top 0.5s;
}

.collapseTrigger:checked ~ .collapseTriggerLabel {
    background-color: #005A26;
}

.melding-content-item {
    height: 70%;
    font-size: 14px;
}

.headerText{
    padding-top: 10px;
    float: right;
}

.footerText{
    padding-top: 10px;
    padding-bottom: 10px;
}

.headerText::before{
    content: "\f095  ";
    font-family: "Font Awesome 5 Free";
    font-weight:900;
}

/* introduceer nieuwe klasse condensed om blokken dichter op elkaar te zetten in oude formulieren */
.condensed .block-layout-horizontal.xforms-group, .orbeon .condensed li, .orbeon .condensed ul, .condensed .block-layout-vertical, .condensed {
    margin-bottom: 0px;
}

.condensed .block-layout-horizontal, .condensed div.block-layout-horizontal {
    margin-bottom: 0px;
    padding-bottom: 0px;
}

body.orbeon {
    background-color: #FFF;
    font-family: Arial;
}

.yui-skin-sam .yui-calendar a.calnav {
    color: #0645AD;
    text-decoration: underline;
}

div.groep-notification {
    width: 940px;
    margin: auto;
    max-width: 100vw;
    padding-top: 20px;
}

div.groep-notification > p {
    padding: 16px;
    color: white;
    font-size: 18px;
    border-radius: 3px;
}

div.groep-notification > p > i {
    padding-right: 8px;
}

div.groep-notification > p.info {
    background-color: #00A0D6;
}

div.groep-notification > p.warning {
    background-color: #FFD500;
}

div.groep-notification > p.danger {
    background-color: #E21212;
}

div.groep-notification > p.success {
    background-color: #6DA413;
}

/* datumveld */
.xforms-type-date .fr-width-4digits input {
    width: 50px;
}

.orbeon .xforms-type-date img {
    vertical-align: middle;
    padding-left: 0.2em;
    cursor: pointer;
}

.orbeon .xforms-input input.xforms-type-date,
.orbeon .xforms-input input.xforms-type-time{
    background-position: right 5px center;
    padding-right:20px;
}

.digidBox {
    position: relative;
}

span.digid-button{
    position:relative;
    right:10px;
}

.yui-skin-sam .digid-button .yui-button .first-child{
    text-align:right;
}

div.block-layout-horizontal {
    padding-bottom: 5px;
}

.orbeon .digid-button .yui-button.yui-push-button {
    font-size: 13px;
    margin-left: 10px;
    min-width: 160px;
    padding-top: 0;
    padding-bottom: 0;
}

.digid-button .btn {
    max-width: 220px;
    min-height: 32px;
    min-width: 160px;
    width: 100%;
    padding: 8px 0px;
}

.hidden {
    display: none !important;
}

.orbeon .fr-body {
    display: block;
    box-sizing: border-box;
}

.orbeon a {
    color: #418926;
    text-decoration: none;
    font-weight: bold;
}

.orbeon .xforms-input-input, .orbeon select, .orbeon textarea, .orbeon input[type="text"], .orbeon input[type="password"], .orbeon input[type="datetime"], .orbeon input[type="datetime-local"], .orbeon input[type="date"], .orbeon input[type="month"], .orbeon input[type="time"], .orbeon input[type="week"], .orbeon input[type="number"], .orbeon input[type="email"], .orbeon input[type="url"], .orbeon input[type="search"], .orbeon input[type="tel"], .orbeon input[type="color"], .orbeon .uneditable-input {
    border-radius: 4px;
    box-shadow: none;
    background-image: none;
    border-color: #CCC;
    width: auto;
    max-width:100%;
}

.orbeon .input-append input[type="text"] {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.orbeon .xforms-required.xforms-filled input,
.orbeon .xforms-required.xforms-filled textarea {
    border-color: #BBB;
}

.xforms-update-full.tab-visible {
    min-width:70%;
}

.orbeon .btn,
.yui-skin-sam .yui-button,
.yui-skin-sam .yui-button .first-child,
.yui-skin-sam .yui-button-hover .first-child {
    background-image: none;
    border: none;
    box-shadow: none;
    background-color: transparent;
    text-shadow: none;
}

.cookieLawBanner {
    position: fixed;
    top: 0px;
    left: 0px;
    background-color: #FFFFC0;
    margin: 1em;
    padding: 1em;
    border: 1px solid #F2C50D;
    box-shadow: 0px 0px 2px 1px #f2c50d66;
}

.cookieLawOk {
    border: 2px outset #0a0;
    padding: 0em 0.5em;
    margin-left: 1em;
    background-color: #0a0;
}

a.cookieLawOk {
    text-decoration: none;
    color: #fff;
}

.cookieLawBanner a:hover,
.orbeon button.close:hover,
.orbeon button.close:focus,
.orbeon .btn:hover,
.orbeon .btn:focus,
.orbeon .btn:active,
.orbeon .btn.active,
.orbeon .btn.disabled,
.orbeon .btn[disabled] {
    background-color: transparent;
    opacity: 1;
}

.orbeon button.close,
.cookieLawBanner a,
.orbeon .btn,
.yui-skin-sam .yui-button button {
    background-color: #83BA24;
    border: 1px solid #83BA24;
    color: #FFF;
    font-weight: bold;
    padding: 2px 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    border-radius: 0;
    text-decoration: none;
    min-width: 130px;
    min-height: 32px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.orbeon .btn.btn-default,
.orbeon .btn.btn-default:hover,
.orbeon .btn.btn-default:active,
.orbeon .btn.btn-default:focus {
    color: #666;
    border-radius: 3px;
    background: linear-gradient(#ddd 0%, #d0d0d0 100%);
    border-top: 3px solid #ddd;
    border-bottom: 3px solid #c9c9c9;
}

.fr-formnavigation button.btn {
    overflow: visible;
    white-space: normal;
}

.orbeon .btn.disabled,
.orbeon .btn[disabled],
.orbeon .btn.disabled:hover,
.orbeon .btn[disabled]:hover,
.orbeon .warningtxt.div-visible + .verstuur .VERSTUUR button.btn{
    background-color: #FAFAFA;
    border: none;
    color: #777;
    cursor:default;
}

.orbeon .fr-formnavigation button.btn,
.yui-button.yui-push-button,
.fr-formnavigation .yui-skin-sam .yui-button button {
    width: 100%;
    min-width: 160px;
    margin: 0 0 5px 0;
}

.orbeon .fr-formnavigation > span button.btn{
    display:block;
}

.nav-next {
    float: right;
}

.nav-prev {
    float: left;
}

.cookieLawBanner a {
    margin: 0 5px;
}

.orbeon button.close {
    min-width: 0px;
}

.orbeon button.close:hover,
.orbeon button.close:focus,
.cookieLawBanner a:hover,
.orbeon .btn:hover {
    color: #005A19;
    background-color: #FFF;
}

.orbeon .btn:focus {
    color: #FFF;
}

.orbeon .btn.active,
.orbeon .btn:active {
    filter: none;
    background-image: none;
}

.fr-formnavigation span.button-active button,
.cookieLawBanner a:focus,
.orbeon .btn:focus,
.orbeon .btn:active,
.orbeon .btn.active {
    background-color: #006388;
    border-color: #006388;
    color: #FFF;
}

.fr-formnavigation .button-active button:hover {
    cursor: default;
}

.orbeon h2,
.orbeon h3,
.orbeon h4,
.orbeon h5,
.orbeon h6 {
    margin: 0px 0 10px 0;
    background-color: transparent;
    background-image: none;
    filter: none;
    color: #006388;
    font-weight: bold;
}

.orbeon textarea {
    width: auto;
    height: auto;
}

.orbeon textarea:focus,
.orbeon input[type=text]:focus,
.orbeon .xforms-required.xforms-invalid.xforms-visited textarea:focus,
.orbeon .xforms-required.xforms-visited textarea:focus {
    border-color: #93D228;
    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.05) inset, 0px 0px 8px rgba(170, 221, 85, 0.3);
}

.orbeon .navbar-inverse .navbar-inner {
    background-image: none;
    background-color: #006388;
    box-shadow: none;
    border-radius: 0;
    padding: 5px 20px;
    filter: none;
    box-sizing: border-box;
}

.orbeon .navbar-inverse .navbar-inner .container h1 {
    color: #FFF;
    font-weight: bold;
}

.orbeon .navbar .navbar-inner .container h1 {
    white-space: normal;
}

.orbeon .navbar .navbar-inner .container h1,
.orbeon .navbar-inverse .navbar-inner .container h1 {
    padding-bottom: 0.3rem
}

.orbeon .navbar-inverse .brand, .orbeon .navbar-inverse .nav > li > a,
.orbeon .navbar-inverse .nav li.dropdown > .dropdown-toggle .caret {
    color: white;
    border-top-color: white;
    border-bottom-color: white;
}

.orbeon .navbar-inverse .nav li.dropdown.open > .dropdown-toggle {
    background-color: transparent;
}

.orbeon .dropdown-menu > li > span > a:hover,
.orbeon .dropdown-menu > li > span > a:focus,
.orbeon .dropdown-submenu:hover > a {
    text-decoration: none;
    color: #ffffff;
    background-color: #006388;
    background-color: #006388;
    background-image: none;
}

.orbeon .dropdown-menu > .active > span > a,
.orbeon .dropdown-menu > .active > span > a:hover {
    color: #ffffff;
    text-decoration: none;
    outline: 0;
    background-color: #006388;
    background-color: #006388;
    background-image: none;
}

.fr-formnavigation .yui-button {
    margin-bottom: 5px;
}

div.ogone button span {
    display: block;
}

/* was: .fr-border -- deleted in orbeon during update... */
.orbeon .fr-body {
    padding-bottom: 100px;
}

.fr-body {
    padding-bottom: 30px;
    background-color: #FFF;
    border: none;
    box-shadow: none;
    border-radius: 0;
}
/* *** */

.fr-formnavigation {
    float: none;
    margin: 10px 10px 0 0;
    max-width: 25%;
}

.tab-visible {
    display: inline-block;
    vertical-align: top;
    margin-top: 8px;
}

.orbeon .overzicht .xforms-label {
    width: 200px;
    opacity: 0.8;
    margin-right: 10px;
}

.orbeon .overzicht .xforms-label + *{
	display:inline-block;
}

.orbeon .overzicht .default-block > div > div{
    margin-bottom:5px;
}

.orbeon .overzicht em {
    display: none;
}

.overzicht .xforms-output,
.overzicht .xforms-output .xforms-required {
    display: inline;
    width: auto;
    padding-top: 0px;
}

.xforms-update-full .xforms-label {
    font-weight: normal;
}

.xforms-update-full .block-layout-vertical {
    display: block;
}

.block-layout-vertical div.selectitem-horizontal div {
    display: inline-block;
}

.tab-hidden {
    display: none;
}

.div-hidden div {
    display: none;
}

.div-visible div {
    display: block;
}

.button-relevant {
    display: block;
}

.button-irrelevant {
    display: block;
}

.block_title {
    color: #006388;
}

.orbeon .orbeon-portlet-body .overzicht .block_title{
    font-weight:bold;
}

.block-layout-vertical,
.block-layout-horizontal.xforms-group,
.mandatory-text{
    margin-bottom: 15px;
}

.block-layout-horizontal.xforms-group {
    display: block;
}

.orbeon .xforms-update-full > .xforms-group {
    position: relative;
    display: block;
}

.orbeon .xforms-update-full > .xforms-group > .default-block {
    display: block;
}

.orbeon .xforms-update-full > .xforms-group > .default-block > div {
    padding-right: 1.5rem;
}

.orbeon .xforms-help {
    position: absolute;
    right: -0.5em;
    margin: 3px;
    min-height: 16px;
    min-width: 16px;
}

.orbeon .xforms-help:has(+ .block_title) {
    top: 1em;
}

.block-layout-horizontal label {
    display: inline-block;
    margin-right: 30px;
    vertical-align: top;
    margin-top: 3px;
}

label.radio,
label.checkbox {
    margin-top: 0;
}

div.block-layout-vertical label.radio,
div.block-layout-vertical label.checkbox {
    margin-top: 5px;
    margin-bottom: 0;
}

.xforms-selected, .xforms-deselected {
    display: inline-block;
    margin-right: 10px;
}

div.block-layout-horizontal .xforms-label{
    display: inline-block;
    width: 230px;
    margin-right: 10px;
}

div.block-layout-vertical .xforms-label {
    display: block;
}

.overzicht div.block-layout-vertical .xforms-label{
    display:inline-block;
}

.xforms-label + .xforms-required{
	display:inline-block;
}

.block-layout-vertical .horizontal .xforms-items span {
    display: inline-block;
}

.block-layout-horizontal .horizontal .xforms-items span {
    display: inline-block;
}

.orbeon .horizontal .xforms-items {
    vertical-align: top;
    display: inline-block;
}

.orbeon .vertical .xforms-items {
    display: inline-block !important;
    vertical-align: top;
}

.orbeon .xforms-items input[type="radio"]:focus,
.orbeon .xforms-items input[type="checkbox"]:focus,
.orbeon .xforms-required .xforms-items input[type="radio"]:focus,
.orbeon .xforms-required .xforms-items input[type="checkbox"]:focus {
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.xforms-required {
    background-color: rgba(255, 252, 220, 0.7);
    border: none;
    display: block;
    border-radius: 2px;
}

.xforms-required:not(.xforms-group) {
    padding: 5px 10px 5px 10px;
    margin: -5px -10px -5px -10px;
}

.xbl-fr-dropdown-select1 .xforms-required.xforms-select1{
	margin:0;
	padding:0;
}

.overzicht .xforms-required {
    border: none;
    background: none;
}

/*remove block alignment - Orbeon erratically adds a required class when selecting decimal */
span.xbl-fr-number-decimal-separator + span.xforms-required {
    display: inline-block;
}

.xforms-required .xforms-type-date {
    background-color: transparent;
    border: none;
}

.orbeon .fr-mode-new .xforms-required.xforms-empty .xforms-label,
.orbeon .fr-mode-new .xforms-required .xforms-label {
    background-image: none;
    padding-left: 0;
}

.orbeon .fr-mode-new .xforms-required .xforms-label:before,
.orbeon .fr-mode-edit .xforms-required .xforms-label:before,
.orbeon .fr-mode-test .xforms-required .xforms-label:before,
.orbeon .xforms-dialog .xforms-required .xforms-label:before {
    content: none;
    vertical-align: unset;
    font-size: unset;
}

.orbeon .fr-mode-new .xforms-required .xforms-label:after,
.orbeon .fr-mode-edit .xforms-required .xforms.orbeon .fr-mode-new .xforms-required .xforms-label:before,
.orbeon .fr-mode-edit .xforms-required .xforms-label:before,
.orbeon .fr-mode-test .xforms-required .xforms-label:before,
.orbeon .xforms-dialog .xforms-required .xforms-label:before {
    content: '';
    vertical-align: unset;
    font-size: unset;
}

.orbeon .fr-mode-new .xforms-required .xforms-label:after,
.orbeon .fr-mode-edit .xforms-required .xforms-label:after,
.orbeon .fr-mode-test .xforms-required .xforms-label:after,
.orbeon .xforms-dialog .xforms-required .xforms-label:after {
    content: '* ';
    margin-left: 3px;
    font-weight: bold;
    color: #E17100;
    vertical-align: middle;
}

.orbeon .fr-mode-test .xforms-required .xforms-label:after,
.orbeon .xforms-dialog .xforms-required .xforms-label:after {
    content: '* ';
    margin-left: 3px;
    font-weight: bold;
    color: #E17100;
    vertical-align: middle;
}

.orbeon .xforms-required.xforms-empty input,
.orbeon .xforms-required.xforms-empty textarea,
.xforms-required-empty .xforms-input-,
.orbeon .xforms-required.xforms-empty select{
    border: 1px solid #F2C50D;
    box-shadow: 0px 0px 2px 1px rgba(242, 197, 13, 0.4);
}

.orbeon .xforms-required input[type="radio"],
.orbeon .xforms-required input[type="checkbox"] {
    box-shadow: 0px 0px 3px 1px rgba(242, 197, 13, 1);
}

.orbeon .xforms-required.xforms-visited *,
.orbeon .xforms-required.xforms-visited input[type="radio"],
.orbeon .xforms-required.xforms-visited input[type="checkbox"]{
    box-shadow: none;
}

.orbeon .xforms-required.xforms-invalid.xforms-visited textarea {
    border-color: #B94A48;
}

.orbeon .fr-formnavigation span.problem span button {
    border-right: 5px solid #B94A48;
    border-left: 5px solid #B94A48;
}

.xforms-hint {
    padding:1px;
}

.orbeon .xforms-hint-appearance-inline .xforms-hint {
    font-style: italic;
}

.orbeon .xforms-hint,
.orbeon .xforms-visited > .xforms-alert.xforms-active:not(:empty),
.orbeon .xforms-visited.xforms-alert.xforms-active:not(:empty) {
    margin-top: 3px;
    font-size: 13px;
}

/* Force visibility for upload components */
.orbeon .fr-attachment.xforms-invalid > .xforms-alert.xforms-active:not(:empty) {
    margin-top: 3px;
    font-size: smaller;
    display: block;
    width: auto;
    height: auto;
    text-indent: 0;
    white-space: normal;
    clear: both;
}

.xforms-hint::before {
    content: "\00BB";
    font-weight: bold;
    border-radius: 3px;
    background-color: transparent;
    padding:0;
    margin-right: 5px;
    margin-left: 0;
    font-style: normal;
    color: #F3D00D;
}

.xforms-alert::before {
    content: "\00BB";
    font-weight: bold;
    border-radius: 3px;
    background-color: transparent;
    padding: 0;
    margin-right: 5px;
}

.warningtxt, .warningtxt + span,
.orbeon .warningtxt.xforms-output{
    width: 100%;
    display: block;
    font-weight: bold;
    color: #B94A48;
}

.warningtxt + span{
    text-align:right;
}

.warningtxt + .verstuur > span{
    display: inline-block;
    float:right;
}

.warningtxt.div-visible{
	margin-bottom:15px;
}

.character-counter-label {
    color: gray;
    display: block;
    font-size: 80%;
}

/* .warningtxt::before {content : "Let op:";} */

.upload_size {
    margin-top: 15px;
}

.upload_size_size,
.upload_size_max_size {
    font-weight: bold;
}

.orbeon .upload_size > div > .xforms-output:nth-of-type(2){
    margin-right:0;
}

.xforms-upload-select {
    display: block;
}

.xforms-trigger a {
    display: block;
    margin: 5px 0 20px 0;
}

.orbeon a img,
.icon-download {
    margin-right: 2px;
}

.xforms-output-appearance-xxforms-download,
.xforms-upload-state-file {
    display: inline-block;
}

.orbeon .xforms-output {
    display: inline-block;
    margin-right: 5px;
}

.orbeon .xforms-output output[role="textbox"].xforms-output-output {
    background-color: #f2f2f2;
    cursor: not-allowed;
    border: 1px solid #ccc;
}

.xbl-fr-attachment {
    display: block;
}

.orbeon .radio input[type="radio"],
.orbeon .checkbox input[type="checkbox"] {
    margin-right: 5px;
}

.orbeon .radio input[type='radio'] {
    border-radius: 50%;
}

.orbeon .popover.xforms-help-popover {
    max-width: 400px;
    width: auto;
}

.orbeon .popover.top,
.orbeon .popover.bottom,
.orbeon .popover.left {
    margin-right: 10px;
}

.orbeon .popover.right {
    margin-left: 7px;
}

.orbeon .popover {
    border-color: #7FB1C3;
    background-color: #F2F7F9;
    border-radius: 0px;
    box-shadow: none;
    padding: 5px;
}

.orbeon .popover-title {
    border-bottom: 1px dashed #7FB1C3;
    padding-bottom: 15px;
    min-width: 150px;
    border-radius: 0;
    font-weight: bold;
}

.orbeon .popover.top .arrow {
    border-top-color: rgba(127, 177, 195, 1);
}

.orbeon .popover.top .arrow:after {
    border-top-color: #F2F7F9;
}

.orbeon .popover.bottom .arrow {
    border-bottom-color: rgba(127, 177, 195, 1);
}

.orbeon .popover.bottom .arrow:after {
    border-bottom-color: #F2F7F9;
}

.orbeon .popover.right .arrow {
    border-right-color: rgba(127, 177, 195, 1);
}

.orbeon .popover.right .arrow:after {
    border-right-color: #F2F7F9;
}

.orbeon .popover.left .arrow {
    border-left-color: rgba(127, 177, 195, 1);
}

.orbeon .popover.left .arrow:after {
    border-left-color: #F2F7F9;
}

.orbeon .popover.xforms-help-popover .popover-content {
    clear: both;
    float: left;
    max-width: 400px;
}

.orbeon button.close {
    background-color: #7FB423;
    color: #FFF;
    text-shadow: none;
    opacity: 1;
}

.orbeon .popover.xforms-help-popover .close {
    padding: 2px 5px;
    margin: 5px;
}

.xbl-fr-error-summary, .fr-status-icons * {
    display: none;
}

a.esriLogo {
    position: relative;
    top: 490px;
    left: 425px;
    z-index: 999;
    display: block;
    margin-top: -36px;
}

.ogone-amount-div div {
    float: left;
    clear: none;
}

.icon-prev-tab {
    margin-right: 13px;
}

.icon-next-tab {
    margin-left: 5px;
    width: 25px !important;
}

.melding-item {
    width: 100%;
    height: 100px;
    display: block;
    font-size: 0;
}

.melding-picture-item {
    width: 20%;
    display: inline-block;
    height: 100%;
    vertical-align: top;
}

.melding-content {
    width: 60%;
    display: inline-block;
    height: 100%;
}

.melding-button {
    width: 20%;
    display: inline-block;
    height: 100%;
    vertical-align: top;
}

.melding-button-item {
    vertical-align: middle;
}

.melding-top-div {
    height: 30%;
    width: 100%;
}

.lefttopdiv {
    height: 50%;
    width: 100%;
}

.melding-picture {
    width: 60%;
    position: relative;
    padding: 20px;
    max-height: 60px;
}

.melding-half-left-top {
    width: 50%;
    display: inline-block;
    height: 100%;
    font-size: 14px;
}

.melding-half-right-top {
    width: 50%;
    display: inline-block;
    height: 100%;
    font-size: 14px;
}

.melding-content-item {
    height: 70%;
    font-size: 14px;
}

.icon-selectitem {
    margin-left: 5px;
    width: 25px !important;
}

.xforms-upload-as-button {
    overflow: hidden;
    position: relative;
    cursor: pointer;
    font-weight: bold;
    text-overflow: ellipsis;
    border-radius: 0;
    text-decoration: none;
    min-width: 90px;
    min-height: 32px;
    height: auto;
    text-align: left;
    display: inline;
    vertical-align: middle;
}

.xforms-upload-cancel {
    display: none;
}

.xforms-upload-as-button {
    height:32px;
}

.xforms-upload-as-button:hover {
    color: #005A19;
    background-color: #FFF;
}

.xforms-upload-as-button:active {
    background-color: #006388;
    border-color: #006388;
    color: #FFF;
}

.xforms-upload-as-button input {
    height: 30px;
    cursor: pointer;
    position: absolute;
    top: 0px;
    right: 0px;
    font-size: 100px;
    z-index: 2;

    opacity: 0.0; /* Standard: FF gt 1.5, Opera, Safari */
    filter: alpha(opacity=0); /* IE lt 8 */
    -ms-filter: "alpha(opacity=0)"; /* IE 8 */
    -khtml-opacity: 0.0; /* Safari 1.x */
    -moz-opacity: 0.0; /* FF lt 1.5, Netscape */
}

.xforms-upload-as-button .xforms-readonly {
    display: none;
}

.xforms-upload-as-button .xforms-required {
    background-color: inherit;
}

.upload-block .xforms-label > div {
    display: inline-block;
}

.xforms-item-with-image > label {
    cursor: pointer;
    background-color: #666;
    border: 5px solid #666;
    color: #FFF;
    text-decoration: none;
    width: 135px;
    height: 150px;
    text-align: center;
    overflow: hidden;
}

.xforms-item-with-image > label > span {
    position: relative;
    display: table;
    height: calc(100% - 102px);
    width: 100%;
}

.xforms-item-with-image > label > span > span {
    padding: 2% 0;
    line-height: 1.1em;
    vertical-align: middle;
    display: table-cell;
}

.xforms-item-with-image input[type=radio] {
    clip: rect(0 0 0 0);
    position: absolute;
}

.xforms-item-with-image.xforms-selected > label,
.xforms-item-with-image.xforms-deselected > label:hover {
    background-color: #CCC;
    border: 5px solid #CCC;
    color: #333;
}

.empty-icon {
    display: none !important;
}

.xforms-item-with-image .empty-icon {
    display: none;
}

.orbeon .xforms-select1-appearance-full .xforms-item-with-image,
.orbeon .xforms-select-appearance-full .xforms-item-with-image {
    display: inline-block;
    margin: 10px 10px 0 0;
}

.orbeon .xforms-select1-appearance-full .xforms-item-with-image label.radio,
.orbeon .xforms-select-appearance-full .xforms-item-with-image label.radio,
.orbeon .xforms-select1-appearance-full .xforms-item-with-image label.checkbox,
.orbeon .xforms-select-appearance-full .xforms-item-with-image label.checkbox {
    display: inline-block;
    width: 135px;
}

.orbeon .xforms-select1-appearance-full label.radio > span,
.orbeon .xforms-select-appearance-full label.radio > span,
.orbeon .xforms-select1-appearance-full label.checkbox > span,
.orbeon .xforms-select-appearance-full label.checkbox > span {
    margin-left: 0;
    display: unset;
}

.xforms-item-with-image > label::before {
    content: "";
    width: 100%;
    height: 100px;
    position: relative;
    display: block;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 10px;
}

.orbeon .btn input[type=checkbox] {
    position: absolute;
    clip: rect(0px, 0px, 0px, 0px);
    opacity: 0;
}

.orbeon .btn label.checkbox {
    margin: 0;
}

.xforms-mobile-tooltip {
    display: block;
    padding: 4px;
    height: 32px;
    cursor: pointer;
    background-image: url('../images/help.png');
    background-repeat: no-repeat;
    background-position: center;
    background-color: #ccc;
}

/* AANPASKNOPPEN OP OVERZICHT */

.orbeon .overzicht-trigger button.btn{
    background-color:transparent;
    color:#0077A7;
    border:none;
    padding:0;
    position:absolute;
    right:0;
    bottom:0;
    min-width:0;
    min-height:0;
    height:auto;
    line-height:1.231;
}

.orbeon .overzicht-trigger button.btn:hover,
.orbeon .overzicht-trigger button.btn:active,
.orbeon .overzicht-trigger button.btn:focus{
    color:#006388;
}

.overzicht .block-layout-horizontal .default-block > div > div .overzicht-trigger,
.overzicht .block-layout-vertical .default-block > div > div .overzicht-trigger{
    position:relative;
    display:block;
    width:100%;
}

.orbeon .overzicht .xforms-disabled .overzicht-trigger button.btn{
    display:none;
}

/* * * * * * * MEDIA QUERY DESKTOP * * * * * * * * * * * * * * * * * * * */
@media only screen and (max-resolution: 92dpi), only screen and (min-width: 730px), only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {

    .fr-formnavigation {
        display: inline-block;
    }

    label.collapseTriggerLabel {
        display: none;
    }

    .digidBox {
        position: relative;
    }

    /*
        span.digid-button {
            position: absolute;
            right: 10px;
        }
    */

    .submit-wrapper.opslaan > span,
    .submit-wrapper.lokaal_opslaan > span {
        display: inline-block;
    }

    .xforms-update-full.tab-visible {
        width: 70%;
    }
}

@media only screen and (max-width:729px){
    .xforms-update-full{
        width:100%;
    }

    .fr-formnavigation{
        max-width:100%;
        margin:0;
    }
}

@media only screen and (max-width: 939px) {

    /* was: .fr-border -- deleted in orbeon during update... */
    .fr-body {
        margin: 10px;
    }

    .orbeon .fr-view {
        width: auto;
        padding: 0;
    }

    .digidBox {
        margin: 10px;
        text-align: right;
    }

    .digidBox span.digid-button {
        display: block;
        position: relative;
    }

    .orbeon .container,
    .orbeon .span12,
    .orbeon .navbar-static-top .container,
    .orbeon .navbar-fixed-top .container,
    .orbeon .navbar-fixed-bottom .container {
        width: 100%;
    }

    .orbeon .row,
    .orbeon .span12,
    .orbeon-portlet-div #o0xforms-form .row{
        margin: 0;
        padding: 0;
    }

    .orbeon .xforms-update-full {
        max-width: 100%;
    }

    .orbeon .xforms-hint {
        padding: 0;
    }

    .headerImage {
        margin: 0.5em 0 0 0.5em;
    }
}


/* * * * * * * MEDIA QUERY MOBILE * * * * * * * * * * * * */
@media only screen and (max-device-width: 480px), only screen and (max-width: 480px) {

    div.digidBox {
        text-align: center;
    }

    div.pageHeader  {
        width: calc(100% - 20px);
    }

    .headerImage {
        float: left;
        margin: 0.5em 0 0;
        width: auto;
        max-width: 100%;
        height: auto;
    }

    .headerText{
        float: left;
    }

    .collapseTrigger:checked ~ .collapseTriggerLabel:before {
        top: 14px;
        box-shadow: 0 9px #FFF, 0 18px #FFF;
    }

    .orbeon .navbar-inverse {
        margin: 10px 0px 0px 0px;
    }

    label.collapseTriggerLabel {
        display: block;
    }

    div.fr-formnavigation {
        padding: 0;
        margin: 0;
        max-width: 100%;
        transition: margin 0.5s;
    }

    .fr-formnavigation button {
        max-width: 100%;
    }

    .fr-formnavigation span.button-active,
    .fr-formnavigation span.button-inactive {
        height: 0em;
        overflow: hidden;
        transition: height 0.5s;
    }

    .collapseTrigger:checked ~ .fr-formnavigation span.button-inactive,
    .collapseTrigger:checked ~ .fr-formnavigation span.button-active {
        height: auto;
    }

    .orbeon .block-layout-horizontal .xforms-label {
        width: auto;
    }

    .orbeon .block-layout-horizontal label {
        display: block;
        margin-right: 0px;
        vertical-align: top;
        margin-top: 0px;
    }

    .xforms-update-full {
        width: 100%;
    }

    .orbeon input[type="text"],
    .orbeon input[type="date"],
    .orbeon textarea,
    .orbeon select,
    .xforms-select1 {
        width: 100% !important;
    }

    .orbeon .xforms-label {
        margin-bottom: 0px;
        cursor: auto;
    }

    .orbeon h1 .xforms-control .xforms-output-output {
        font-size: 1em;
    }

    .orbeon h2 .xforms-control .xforms-output-output {
        margin-top: 0.5em;
    }

    .orbeon a {
        color: #000080;
    }

    .orbeon .fr-orbeon-version {
        font-size: 1.0em;
    }

    .orbeon .fr-formnavigation button.btn,
    .fr-formnavigation .yui-skin-sam .yui-button button {
        width: 100%;
        max-width: none;
    }
    .orbeon .overzicht-trigger button.btn{
        position:relative;
    }
    .block_title{
        padding-top:1em;
    }

}

.btn.btn-link {
    margin: 0 20px 0 0;
    padding-left: 0;
    padding-right: 0;
}

/* * * CHANGES RELATING TO .ORBEON NOT BEING ON .ORBEON-PORTLET-DIV * * */

/* Give it some small space instead of being cramped by the navbar or group notification */
.headerImage {
    margin: 20px 0;
}

/* Don't make the navbar stick to the top of the screen */
.navbar.navbar-fixed-top {
    position: static;
    margin-bottom: 10px !important;
}

.navbar.navbar-fixed-top .navbar-inner {
    border-radius: 4px;
}

/* Duplicate from orbeon-portlet-div since the inline style gets blocked by the CSP */

.xbl-fr-button {
    display: inline
}

.xbl-fr-button .yui-button {
    display: inline-block;
    vertical-align: middle;
}

.xbl-fr-button button:hover {
    background-image: none
}

/* Inline styles */

.message-hidden {
    visibility: hidden;
}