@import url('https://fonts.googleapis.com/css?family=Calibri:400,700,400italic,700italic');

/*GENERAL*/

.orbeon .orbeon-portlet-body,
.orbeon input,
.orbeon button,
.orbeon select,
.orbeon textarea,
.orbeon input[type="file"],
.orbeon .xforms-textarea textarea,
html,
body{
	font-family:'Poppins', sans-serif;
}

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

/*LOGO*/


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

/*TITLE*/

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

@media only screen and (max-width:939px){
    .orbeon .navbar-inverse{
        margin:10px;
    }
}

@media only screen and (max-width:480px){
    .orbeon .orbeon-portlet-body .navbar-inverse .navbar-inner{
        padding-bottom:0;
    }
}

.orbeon .orbeon-portlet-body h1 .xforms-control .xforms-output-output,
.fr-container h1.fr-form-title{
	color:#399;
    font-weight:500;
    font-size:30px;
}

/*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: #515159;
    font-weight:700;
    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:14px;
}

@media only screen and (max-device-width: 480px), only screen and (max-width: 480px){
    .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,
    .orbeon h3 .xforms-control .xforms-output-output{
        font-size:18px;
    }
    .orbeon a{
        font-size:1em;
    }
}

.orbeon h2.section-header:first-of-type .xforms-control .xforms-output-output{
    color:#399;
}

@media only screen and (max-width:939px){
    .orbeon h2.section-header:first-of-type .xforms-control .xforms-output-output{
        padding-top:2em;
    }
}

@media only screen and (max-width:480px){
    .orbeon h2.section-header:first-of-type .xforms-control .xforms-output-output{
        padding-top:0;
    }
}

/*NAVIGATION*/

.orbeon .fr-formnavigation button.btn,
.orbeon .fr-formnavigation button.btn:hover,
.orbeon .fr-formnavigation button.btn:focus,
.orbeon .fr-formnavigation button.btn:active{
    color:#399;
    min-width:200px;
    font-size:14px;
    font-weight:500;
    display:block;
}

@media only screen and (max-width:939px){
    .orbeon .fr-formnavigation button.btn{
        min-width:0;
    }
    .orbeon .fr-formnavigation{
        max-width:100%;
        display:block;
        margin:0;
    }
}

.orbeon .fr-formnavigation span.button-active button,
.orbeon .fr-formnavigation span.button-active button:hover,
.orbeon .fr-formnavigation span.button-active button:focus{
    background-color:#f36;
    color:#FFF;
}

.orbeon .fr-formnavigation button.btn:hover,
.orbeon .fr-formnavigation button.btn:focus,
.orbeon .fr-formnavigation span.problem span button.btn:hover,
.orbeon .fr-formnavigation span.problem.button-inactive.button-relevant span button.btn:hover,
.orbeon .fr-formnavigation span.problem span button.btn:focus,
.orbeon .fr-formnavigation span.problem.button-inactive.button-relevant span button.btn:focus{
    background-color:#FF0140;
}

.orbeon .fr-formnavigation span.problem span button.btn,
.orbeon .fr-formnavigation span.problem.button-inactive.button-relevant span button.btn{
    border:none;
    background-color:#ff3366;
    color:#fff;
}

.orbeon .fr-formnavigation button.btn-stop,
.orbeon .fr-formnavigation button.btn-stop:hover,
.orbeon .fr-formnavigation button.btn-stop:focus,
.orbeon .fr-formnavigation button.btn-stop:active{
    color:#399;
    min-width:200px;
    font-size:14px;
    font-weight:500;
    display:block;
}

@media only screen and (max-width:939px){
    .orbeon .fr-formnavigation button.btn-stop{
        min-width:0;
    }
    .orbeon .fr-formnavigation{
        max-width:100%;
        display:block;
        margin:0;
    }
}

.orbeon .fr-formnavigation span.button-active button,
.orbeon .fr-formnavigation span.button-active button:hover,
.orbeon .fr-formnavigation span.button-active button:focus{
    background-color:#f36;
    color:#FFF;
}

.orbeon .fr-formnavigation button.btn-stop:hover,
.orbeon .fr-formnavigation button.btn-stop:focus,
.orbeon .fr-formnavigation span.problem span button.btn-stop:hover,
.orbeon .fr-formnavigation span.problem.button-inactive.button-relevant span button.btn-stop:hover,
.orbeon .fr-formnavigation span.problem span button.btn-stop:focus,
.orbeon .fr-formnavigation span.problem.button-inactive.button-relevant span button.btn-stop:focus{
    background-color:#FF0140;
}

.orbeon .fr-formnavigation span.problem span button.btn-stop,
.orbeon .fr-formnavigation span.problem.button-inactive.button-relevant span button.btn-stop{
    border:none;
    background-color:#ff3366;
    color:#fff;
}

@media only screen and (max-width:480px){
    .collapseTrigger:checked ~ .collapseTriggerLabel{
        background-color:#f36
    }
    label.collapseTriggerLabel{
        background-color:#399;
    }
}

/*FORM*/

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

@media screen and (min-width:940px){
    .xforms-update-full{
        width:70%;
    }
}

.orbeon .container .row .fr-body .tab-visible {
/*     margin-top:0; */
}

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

.orbeon form{
    margin-bottom:0;
}

.xforms-update-full{
    margin-left:0;
} */

.fr-border{
    padding-bottom:0;
}

.kader{
    border:1px solid #515159;
    padding:1em;
}

/* Solid border */
.solid {
  border-top: 3px solid #399;
}

/* Rounded border */
.rounded {
  border-top: 8px solid #399;
  border-radius: 5px;
}

.divider
{
	position: relative;
	margin-top: 90px;
	height: 1px;


	.div-transparent:before
	{
		content: "";
		position: absolute;
		top: 0;
		left: 5%;
		right: 5%;
		width: 90%;
		height: 1px;
		background-image: linear-gradient(to right, transparent, rgb(51,153,153), transparent);
	}

	.div-arrow-down:after
	{
		content: "";
		position: absolute;
		z-index: 1;
		top: -7px;
		left: calc(50% - 7px);
		width: 14px;
		height: 14px;
		transform: rotate(45deg);
		background-color: white;
		border-bottom: 1px solid rgb(51,153,153);
		border-right: 1px solid rgb(51,153,153);
	}
}

.testontwerp{
    width: 360px;
    height: 85vh;
    border: 1px solid #A5A0A0;
    -webkit-box-shadow: 0px 1px 8px rgba(50, 50, 50, 0.35);
    -moz-box-shadow:    0px 1px 8px rgba(50, 50, 50, 0.35);
    box-shadow:         0px 1px 8px rgba(50, 50, 50, 0.35);
    background-size: 360px;	   
    overflow-y: scroll;
}

.ontwerpA{
	width:360px;
	height:2219px;
	background-image:url(https://klanten.momono.nl/waadhoeke/img/m-homepage.jpg);
	background-repeat:no-repeat;
	background-size:360px;	
}

.ontwerpB
{
	width:360px;
	height:2219px;
	background-image:url(https://klanten.momono.nl/waadhoeke/img/m-homepage-2.jpg);
	background-repeat:no-repeat;
	background-size:360px;	
}

.navA
{
	width:360px;
	height:2219px;
	background-image:url(https://klanten.momono.nl/waadhoeke/img/m-navigatiepagina.jpg);
	background-repeat:no-repeat;
	background-size:360px;	
}

.navB
{
	width:360px;
	height:2219px;
	background-image:url(https://klanten.momono.nl/waadhoeke/img/m-navigatiepagina-2.jpg);
	background-repeat:no-repeat;
	background-size:360px;	
}

/*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:#494a4f;
    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:#494a4f;
    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:rgb(46, 142, 141);
    box-shadow:0px 1px 1px rgba(0, 0, 0, 0.05) inset, 0px 0px 8px rgba(46,142,141, 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:#ff3366;
}

.xforms-required{
    background-color:#F1F1F1;
    margin-right:-10px;
    padding: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 rgb(255, 51, 102);
    box-shadow:0 0 2px 1px rgba(255,51,102, 0.4)
}

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

/*LINKS AND BUTTONS*/

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

.orbeon btn.btn-danger,
.orbeon btn.btn-danger[disabled],
.orbeon btn.btn-danger[disabled]:hover,
.orbeon btn.btn-danger:hover,
.orbeon .warningtxt.div-visible + .VERSTUUR button.btn,
.orbeon .warningtxt.div-visible + .VERSTUUR button.btn:hover{
    box-shadow:none;
    background-color:#F36;
    color:#FFF;
    cursor:default;
}

.orbeon button.btn[disabled],
.orbeon button.btn[disabled],
.orbeon button.btn[disabled]:hover,
.orbeon button.btn[disabled]:hover,
.orbeon .warningtxt.div-visible + .VERSTUUR button.btn,
.orbeon .warningtxt.div-visible + .VERSTUUR button.btn:hover{
    box-shadow:none;
    background-color:#f1f1f1;
    color:#494a4f;
    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{
    background-color: #399;
    color:#FFF;
    cursor:pointer;
}

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

.orbeon .btn:focus,
.orbeon select:focus,
.cookieLawBanner a:focus,
.orbeon input[type="radio"]:focus,
.orbeon input[type="checkbox"]:focus,
.orbeon input[type="file"]:focus,
.infoPage .xforms-group a:focus{
    outline-color:#f36;
}

.orbeon .btn,
.orbeon button.btn,
.orbeon .btn:hover,
.orbeon button.btn:hover{
    height:auto;
    background-color:#F1F1F1;
    color:#494a4f;
    border:none;
    font-size:14px;
    font-weight:500;
}

.orbeon .fr-formnavigation .button-relevant.button-inactive button.btn,
.orbeon .lokaal_opslaan button.btn,
.orbeon .VERSTUUR button.btn,
.infoPage .xforms-group a{
    background-color:#399;
    color:#fff;
}

.orbeon .fr-formnavigation .button-relevant.button-inactive button.btn:hover,
.orbeon .lokaal_opslaan button.btn:hover,
.orbeon .lokaal_opslaan button.btn:focus,
.orbeon .VERSTUUR button.btn:hover,
.infoPage .xforms-group a:hover,
.orbeon span.VERSTUUR button.btn:hover,
.orbeon span.VERSTUUR button.btn:focus{
    background-color:#f36;
}

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

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

.orbeon .ogone button.btn{
    background-color:#FFF;
    color:#494a4f;
    padding:0;
    min-width:0;
}

.orbeon .ogone button.btn img{
    padding:10px 0 0 0;
}

.orbeon .ogone button.btn:hover,
.orbeon .ogone button.btn:focus,
.orbeon .ogone button.btn:active{
    background-color:#fff;
    box-shadow:none;
    outline:none;
}

/*VERSTUREN*/

.orbeon .warningtxt .xforms-output-output{
    color:#ff3366;
}

span.VERSTUUR{
    position:relative;
}

.orbeon span.VERSTUUR button.btn{
    position:absolute;
    right:10px;
    transform:translateY(35px);
    top:0;
}

/*RADIOBUTTONS AND CHECKBOXES*/

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

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

.orbeon input[type="radio"],
.orbeon input[type="checkbox"]{
    display:none;
}

.radio > span::before{
    content:"";
    display:inline-block;
    height:12px;
    width:12px;
    border-radius:50px;
    border:1px solid #ccc;
    background-color:#fff;
    vertical-align:baseline;
    margin-right:5px;
}

.radio input[type="radio"]:checked + span::before{
    content:"";
    display:inline-block;
    height:12px;
    width:12px;
    border-radius:50px;
    border:1px solid #494a4f;
    background-color:#494a4f;
    box-shadow:0 0 0 2px #fff inset;
    vertical-align:baseline;
    margin-right:5px;
}

.checkbox > span::before{
    content:"";
    display:inline-block;
    height:12px;
    width:12px;
    border:1px solid #ccc;
    background-color:#fff;
    vertical-align:baseline;
    margin-right:5px;
}

.checkbox input[type="checkbox"]:checked + span::before{
    content:"";
    display:inline-block;
    height:12px;
    width:12px;
    border:1px solid #494a4f;
    background-color:#494a4f;
    box-shadow:0 0 0 2px #fff inset;
    vertical-align:baseline;
    margin-right:5px;
}

/*POPOVER*/

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

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

.orbeon button.close,
.orbeon button.close:hover{
    background-color:transparent;
    color:#fff;
    min-height:1px;
    border:none;
}

.orbeon button.close:focus{
    outline:none;
}

.orbeon .popover.left .arrow,
.orbeon .popover.left .arrow::after{
    border-left-color:#494a4f;
}

.orbeon .popover.right .arrow,
.orbeon .popover.right .arrow::after{
    border-right-color:#494a4f;
}

.orbeon .popover.top .arrow,
.orbeon .popover.top .arrow::after{
    border-top-color:#494a4f;
}

.orbeon .popover.bottom .arrow,
.orbeon .popover.bottom .arrow::after{
    border-bottom-color:#494a4f;
}

/*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{
    padding:0 10px 0 10px;
    max-width:100%;
}

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

/*DANKPAGINA*/

.fr-container{
    text-align:center;
}

.infoPage{
    font-size:16px;
}

.infoPage .xforms-group a{
    display:inline-block;
    padding:10px;
    text-decoration:none;
}

/* FOOTER */

.orbeon .imgcontainer img{
    height:100px;
}

.imgcontainer{
    text-align:center;
    margin:0 0px 30px 650px;
}

.orbeon .container footer .container{
    padding:20px;
    border-top:1px solid #494A4F;
    background-color:#fff;
    transform:translateY(-60px);
    position:absolute;
}

footer .footer_left > span,
footer .footer_right > span > span{
    font-weight:700;
    font-size:12px;
}

footer .footer_left,
footer .footer_right{
    width:49%;
    display:inline-block;
    vertical-align:middle;
}

footer .footer_right > span{
    width:49%;
    display:inline-block;
}

footer .footer_left > span{
    margin-right:20px;
}

.orbeon footer p{
    margin-bottom:0;
}

.orbeon footer p, .orbeon footer span, .orbeon footer i{
    color:#494A4F;
}

.orbeon .footer_right p i{
    transform:translateX(-15px);
    position:absolute;
    color:#999;
    font-size:16px;
}

.orbeon .footer_left a i{
    font-size:18px;
    border:1px solid;
    border-radius:49.9%;
    padding:5px;
    width:15px;
    height:15px;
    text-align:center;
    vertical-align:middle;
}

.orbeon .footer_left a i:hover,
.orbeon .footer_left a i:focus,
.orbeon .footer_left a i:active{
    text-decoration:none;
    color:#f36;
}

.orbeon .footer_left a:hover,
.orbeon .footer_left a:focus,
.orbeon .footer_left a:active{
    text-decoration:none;
}