@import url('https://fonts.googleapis.com/css?family=Fira+Sans:300,400,500,600,700,800,900');

/*GENERAL*/

.orbeon .orbeon-portlet-body,
.orbeon input,
.orbeon button,
.orbeon select,
.orbeon textarea,
.orbeon input[type="file"],
.orbeon .xforms-textarea textarea{
	font-family:'Fira Sans', arial;
}

.orbeon .orbeon-portlet-body{
    background-color:#F1f1f1;
}

/*LOGO*/

.orbeon .headerImage{
    padding:20px 0;
}

/*TITLE*/

.orbeon .orbeon-portlet-body .navbar-inverse .navbar-inner{
	background-color: transparent;
    padding:20px 0;
}

.orbeon .orbeon-portlet-body h1 .xforms-control .xforms-output-output{
	color:#0095A6;
    font-weight:800;
    font-size:36px;
}

@media only screen and (max-width: 939px){
    .orbeon .orbeon-portlet-body .navbar-inverse .navbar-inner{
        padding:20px 10px;
    }
}

/*SUBTITLE*/

.orbeon h2,
.orbeon h3,
.orbeon h4,
.orbeon h5,
.orbeon h6,
.orbeon .block_title{
    line-height:20px;
    margin-bottom:20px;
}

.orbeon h2,
.orbeon h3,
.orbeon h4,
.orbeon h5,
.orbeon h6,
.orbeon .block_title,
.orbeon h2.section-header:first-of-type .xforms-control .xforms-output-output,
.orbeon .block_title .xforms-output-output,
.orbeon .overzicht .block_title .xforms-output-output{
    color: #333081;
    font-weight:700;
    font-size:18px;
}

/*NAVIGATION*/

.fr-formnavigation{
    margin-top:0;
    width:100%;
    margin-bottom:40px;
    max-width:none;
}

.orbeon .fr-formnavigation button.btn{
    color:#DB0A5B;
    width:100%;
    padding:2px 10px;
}

.orbeon .fr-formnavigation > span{
    width:25%;
    display:inline-block;
    min-width:200px;
}

.orbeon .fr-formnavigation > span:first-child button.btn{
    border-radius:50px 5px 5px 50px;
}

.orbeon .fr-formnavigation > span:last-child button.btn{
    border-radius:5px 50px 50px 5px;
    border:none;
}

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

.orbeon .fr-formnavigation > span button.btn,
.orbeon .fr-formnavigation > span button.btn:hover,
.orbeon .fr-formnavigation > span button.btn:focus{
    border-right:1px dashed #686868;
}

.orbeon .fr-formnavigation span.button-active button.btn,
.orbeon .fr-formnavigation span.button-active button.btn:hover,
.orbeon .fr-formnavigation span.button-active button.btn:focus{
    background-color:#DB0A5B;
    color:#FFF;
    border-right:1px dashed #fff;
}

.orbeon .fr-formnavigation > span:last-child button.btn:hover,
.orbeon .fr-formnavigation > span:last-child button.btn:focus{
    border-right:none;
}

.orbeon .fr-formnavigation span.problem span button{
    border:1px solid #DB0A5B;
}

@media only screen and (max-width:837px){
    .orbeon .fr-formnavigation > span{
        width:33%;
    }
}

@media only screen and (max-width:636px){
    .orbeon .fr-formnavigation > span{
        width:50%;
    }
}

/*FORM*/

.span12 .fr-body {
    background-color: transparent;
    border: transparent;
}

.orbeon .container .row .fr-body .tab-visible {
    border-radius: 10px;
    padding:20px;
    max-width:100%;
    margin-top:0;
    box-shadow:0 0 15px rgba(0,0,0,0.15);
    background-color:#FFF;
}

div.block-layout-horizontal{
    margin-bottom:15px;
}

.orbeon form{
    margin-bottom:0;
}

.xforms-update-full{
    margin-left:0;
    width:calc(100% - 40px);
}

/*TEXT*/

.orbeon .xforms-output-output,
.orbeon .btn.disabled,
.orbeon .btn[disabled],
.orbeon .btn.disabled:hover,
.orbeon .btn[disabled]:hover,
.orbeon .xforms-label,
.orbeon .label,
.orbeon .xforms-hint,
.orbeon input[type="file"]{
    color:#686868;
    font-size:14px;
}

.orbeon .btn.disabled,
.orbeon .btn[disabled],
.orbeon .btn.disabled:hover,
.orbeon .btn[disabled]:hover,
.orbeon .xforms-hint{
    font-size:13px;
}

.xforms-hint::before{
    color:#686868;
    padding:0 0 0 4px;
}

.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:#0095A6;
    box-shadow:0px 1px 1px rgba(0, 0, 0, 0.05) inset, 0px 0px 8px rgba(0, 149, 166, 0.3)
}

.orbeon .mandatory-text{
    margin-bottom:15px;
}

div.block-layout-horizontal .xforms-label{
    width:initial;
    width:auto;
    min-width:230px;
}

.overzicht .xforms-output,
.overzicht .xforms-output .xforms-required{
    font-weight:400;
}

.overzicht span.xforms-output{
    margin-bottom:15px;
}

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

.overzicht .block-layout-vertical div.selectitem-horizontal .xforms-output:last-of-type .xforms-output-output{
    margin-bottom:15px;
}

/*REQUIRED QUESTIONS*/

.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,
.orbeon .container .xforms-invalid > .xforms-alert.xforms-active{
    color:#DB0A5B;
}

.orbeon .container .xforms-invalid > .xforms-alert.xforms-active{
    color: #fff;
}

.xforms-required{
    background-color:#F1F1F1;
    margin-right:-10px;
}

.orbeon .xforms-required input,
.orbeon .xforms-required textarea,
.xforms-required-empty .xforms-input-input,
.orbeon .xforms-required.xforms-invalid.xforms-visited textarea{
    border:1px solid #DB0A5B;
    box-shadow:0 0 2px 1px rgba(219, 10, 91, 0.4)
}

.orbeon .xforms-required.xforms-invalid.xforms-visited textarea{
    box-shadow:none;
}

/*LINKS AND BUTTONS*/

.orbeon a,
.orbeon a:hover{
    color:#DB0A5B;
}

.orbeon a:focus{
    color:#0095A6;
}

.orbeon .nav-next .btn:hover,
.orbeon .nav-prev .btn:hover,
.orbeon .nav-next .btn:focus,
.orbeon .nav-prev .btn:focus,
.orbeon .nav-next .btn:active,
.orbeon .nav-prev .btn:active {
    background-color:#F1F1F1;
    color:#DB0A5B;
}

.orbeon button.btn[disabled],
.orbeon button.btn[disabled],
.orbeon button.btn[disabled]:hover,
.orbeon button.btn[disabled]:hover{
    box-shadow:none;
    background-color:#fff;
    color:#686868;
    cursor:default;
}

.warningtxt + span button.btn,
.warningtxt + span button.btn:hover
.div-visible + span button.btn,
.div-visible + span button.btn:hover,
.orbeon .nav-next button.btn[disabled],
.orbeon .nav-prev button.btn[disabled],
.orbeon .nav-next button.btn[disabled]:hover,
.orbeon .nav-prev button.btn[disabled]:hover{
    background-color:#F1F1F1;
}

.orbeon .nav-next .btn,
.orbeon .nav-prev .btn,
.orbeon .nav-next .btn:hover,
.orbeon .nav-prev .btn:hover,
.orbeon .nav-next .btn:focus,
.orbeon .nav-prev .btn:focus,
.div-hidden + span button.btn,
.orbeon button.close:hover {
    background-color: #DB0A5B;
    color:#FFF;
    cursor:pointer;
    box-shadow:0 2px 2px rgba(0,0,0,0.15);
}

.orbeon .btn:focus,
.orbeon select:focus,
.orbeon input[type="radio"]:focus,
.orbeon input[type="checkbox"]:focus,
.cookieLawBanner a:focus{
    outline-color:#0095A6;
    outline:none;
    border:1px solid #0095A6;
    box-shadow:0 0 5px #0095A6;
}

.orbeon .btn,
.orbeon button.btn,
.orbeon .btn:hover,
.orbeon button.btn:hover,
.orbeon button.close{
    height:initial;
    background-color:#F1F1F1;
    color:#686868;
    border:none;
    border-radius:50px;
    box-shadow:0 2px 2px rgba(0,0,0,0.15);
}

.orbeon .fr-formnavigation .button-relevant.button-inactive button.btn,
.orbeon .fr-formnavigation .button-relevant.button-inactive button.btn:hover,
.orbeon span.digid-button button.btn{
    background-color:#fff;
    color:#DB0A5B;
}

.orbeon button.btn:hover,
.orbeon button.btn:focus,
.orbeon button.btn:active,
.fr-formnavigation span.button-active button{
    color:#DB0A5B;
    background-color:#F1F1F1;
}

.orbeon button > img{
    padding:10px;
}

/*RADIOBUTTONS AND CHECKBOXES*/

.radio span,
.xforms-items span{
    color:#686868;
}

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

label.collapseTriggerLabel{
    margin-bottom:30px;
    background-color:#DB0A5B;
}

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

@media only screen and (max-device-width: 480px), only screen and (max-width: 480px){
    .collapseTriggerLabel + .fr-formnavigation{
        display:none;
    }
    .collapseTrigger:checked ~ .collapseTriggerLabel + .fr-formnavigation{
        display:block;
    }
}

/*POPOVER*/

.orbeon .popover,
.orbeon .popover-title{
    background-color:#0095A6;
    color:#FFF;
    border:none;
}

.orbeon .popover{
    border-radius:10px;
}

.orbeon .popover-title{
    border-bottom:1px solid #FFF;
}

.orbeon button.close{
    background-color:#FFF;
    color:#DB0A5B;
    min-height:1px;
}

.orbeon .popover.left .arrow,
.orbeon .popover.left .arrow::after{
    border-left-color:#0095A6;
}

/*INPUTS*/

.orbeon select,
.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:50px;
    padding:0 10px 0 10px;
    width:25%;
    min-width:206px;
}

.orbeon textarea{
    border-radius:10px;
}

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

/*DIGID BUTTON*/

.orbeon span.digid-button{
    float:right;
    position:relative;
    transform:translateY(-30px);
}