body{
	font-family: Arial;
	background:#e4efff;
	font-size:16px;
}

h1{
	margin: 10px -15px;
	padding:5px 15px;
	background:#5787c5;
	color:#fff;
}

h5{
    width:900px;
	margin-left:-15px;
	padding:5px 15px;
	background:#eaf3ff;
	color:#000;
	margin-top:-10px;
    font-style:italic;
}

h6{
    padding-top: 100px;
    font-size: 12px;
}



#container {
	position: relative;
	top: 0;
	margin: auto;
	width: 100%;
	background: #fff;
}
@media (min-width: 992px) {
	#container {
		width: 960px;
	}
}


#content {
	background: #fff;
	padding: 15px;
	overflow: auto;
}



#container #logo{
		/*margin-bottom:-32px;*/
	}
	
	#container .field{
		float:left;
		margin:4px 0;
		width:100%;
	}
	#container label{
		float:left;
		margin-top:2px;
		width:200px;
		}
		#container label.error{
			float:right;
			width:220px;
			margin:4px 0 0 3px;
			font-size:12px;
			color:red;
			font-weight:bold;
		}

    #container .box label{
        width:auto;
    }
	#container p{
		font-weight:bold;
	   }
       .ui-state-default{
            height:18px;
       }
       a.fieldPageVraag{
            height:50px;
            margin-top:3px;
       }
       a.fieldPageVraag p{
            margin:0;
            width:300px;
            height:18px;
            float:left;
            overflow:hidden;
       }
	#container input{
		float:left;
        border: solid 1px #5787c5;
		}
		#container input.volgende,
		#container input.vorige{
			padding: 6px 12px;
			margin-top:20px;
			background:#ff6201;
		}

		#container input.volgende{
			float:right;
		}
		#container input.vorige{

		}

	#container .vragen{
		border:1px solid #173976;
		margin:10px 0;
		padding: 0 3.5% 20px;
		width: 92%;
		overflow: auto;
		}
		@media (min-width: 992px) {
			#container .vragen{
				padding: 0 1.5% 2%;
				width: 96%;
			}
		}
		#container .vragen.color{
			background:#ecf2fd;
		}
        #container .vragen .telefoon{
            float:left;
            margin-bottom:10px;
            width:100%;
            display:none;
        }
        #container .vragen .email{
            float:left;
            margin-bottom:10px;
            width:100%;
        }
        #container .vragen .telefoon.relatie-1{
            display:block
        }
        #container .vragen .telefoon-add{
            float:left;
            margin-left: 4px;
            cursor:pointer;
        }
        #container .vragen input.adres{
            width:300px;
        }
        #container .vragen select.relatie{
            float:left;
            margin-right:6px;
            padding:1px 4px 1px 4px;
        }
		#container ul.box{
			margin:0;
			padding:0;
			list-style-type:none;
			}
			#container ul.box li{
				float:left;
				width:100%;
				}
				#container ul.box li label.error{
					float:right;
					width:115px;
				}
			
	#container #vraag{
		margin:0;
		padding:0;
		font-size:14px;
		font-weight:bold;
	}
	
	#container #progress{
		float:left;
		margin-top:20px;
        margin-bottom:20px;
		width:90%;
	}
    #container #progress-txt{
        float:left;
        margin: 28px 0 0 5px;
        width:20px;
        font-weight:bold;
        color:#71a7d3;
    }
	
	#container ul#overzicht{
		margin:0 0 100px 0;
		padding:0;
		}
		#container ul#overzicht li{
			list-style-type:none;
			float:left;
			padding:10px;
			width:880px;
			}
			#container ul#overzicht li.color{
				background:#ecf2fd;
			}
	#container .btn{
		float:left;
		margin-top:10px;
        margin-right:10px;
		background:#ff6201;
		padding:6px;
		}
		#container .btn a{
			color:#fff;
			text-decoration:none;
		}
    #container .btn.top{
        margin-bottom:10px;
	}
    #container .btn.overzicht{
        float:right;
        background:none;
        }    
        #container .btn.overzicht a{
            color:#5787c5;
        }
        #container .btn.overzicht a:hover{
            text-decoration:underline;
        }
	#container .btn.logout{

		position: absolute;
		top: 15px;
		background: none;
		right: 15px;
	}
	#container .btn.return{
		margin:0;
		background:none;
		float:right;
	}

	#container .submit, #container .edit{
		float:left;
		border:none;
		background:#ff6201;
		padding:6px;
		color:#fff;
		font-weight:bold;
		font-size:13px;
		cursor:pointer;
	}
	#container .edit{
		padding:5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
		margin:0 5px;
		background:#5787c5;
	}
	#container .edit.verwijder, #container .edit.verwijder2{
		background:url(../gfx/btn-verwijder.png);
		width:18px;
		height:18px;
	}
	#container .edit.add{
		background:url(../gfx/btn-add.png);
		float:right;
		margin:3px 24px 0 0;
		width:18px;
		height:18px;
	}
	#container .edit.kopieer{
		background:url(../gfx/btn-kopieer.png);
		width:20px;
		height:20px;
	}
	#container .edit.save{
		background:url(../gfx/btn-save.png);
		width:18px;
		height:18px;
	}
	#container #fieldContent, #container #fieldPage{
		float:left;
		margin-bottom:10px;
		padding:10px;
		width:880px;
		border:1px solid #d8f1ff;
		background:#eaf3ff;
		}
		#container #fieldPage .connectedSortable{
			float:left;
			width:384px;
			padding:10px;
			background:#eaf3ff;
			}
			#container #fieldPage .connectedSortable .fieldPageVraag:hover{
				color:#5194f5;
			}
		#container #fieldPage #fieldPageEdit{
			float:left;
			margin:15px 0 15px 5px;
			width:880px;		
		}		
		#container #fieldPage .fieldPageAntwoord{
			float:left;
			width:850px;
			padding:10px;
			background:#fff;
            font-size:12px;
		}
		
.pagina{
	float:left;
	padding:10px;
	margin:5px;
	width:408px;
	border:1px solid #0d3a8b;
	background:#fff;
}

.pagina.nieuw{
	background:yellow;
}

.slider{
	margin:20px 0;
	width:100%;
}

.extensie{
    float:left;
    margin:5px 0 0 5px;
	color: grey;
}

.open-vraag{
    width:400px;
}

.nummer.span{
    float:left;
    margin:7px 0 0 4px;
    font-size:11px;
    color:red;
    font-weight:bold;
}

.en{
    float:left;
    margin:4px 5px 0 5px;
    color:#2e6e9e;
    font-weight:bold;
}


.slider-all{
    float:left;
    width:100%;
}
.slider-left{
    float:left;
    /*margin:23px 5px 0 0;*/
    margin: 23px 0 0 0;
	/*width:58px;*/
    width: 10%;
    color: #71a7d3;
    font-weight: bold;
	text-align:center;
}
.slider-center{
    float:left;
    /*width:300px;*/
    width: 80%;
    /*margin-right:-148px;*/
    marign: 0;
    }
    /*@media (min-width: 992px) {*/
	/*    .slider-center{*/
	/*	    width:925px;*/
	/*    }*/
    /*}*/


.slider-right{
    float:right;
	/*width:60px;*/

    width: 10%;
    /*margin:23px 0px 0 5px;*/
    margin: 23px 0 0 0;
    color: #71a7d3;
    font-weight: bold;
	text-align:center;
	}
	.slider-tekst{
		float:left;
		margin-top:20px;
		width:100%;
        /*font-size:1.2rem;*/
	}
    .slider-tekst .slider-label{
        width: 16%;
        text-align: center;
        float: left;
		min-height: 2px;
        margin: 0;
        padding: 0 2%;
    }
	/*.slider-tekst .begin, */
    /*.slider-tekst .midden, */
    /*.slider-tekst .einde{*/
	/*	float:left;*/
	/*	width:130px;*/
	/*	text-align:center;*/
	/*}*/
	/*.slider-tekst .einde{*/
	/*	float:right;*/
	/*}*/
	/*.slider-tekst .midden{*/
	/*	margin-left:240px;*/
	/*	width:130px;*/
	/*	text-align:center;*/
	/*}*/
    .slider-waarde{
		float:left;
		margin-top:10px;
        margin-left: 5%;
        margin-bottom:-7px;
		width:90%;
        font-size:1.0rem;
        line-height:1rem;
	}
	.slider-waarde .begin, .slider-waarde .midden, .slider-waarde .einde{
		float:left;
		/*width:130px;*/
        width: 5%;

		text-align:center;
	}
    .slider-waarde .begin{
        margin-left: 3%;
    }
    .slider-waarde .midden{
        margin-left: 39.5%;
    }
	.slider-waarde .einde{
        margin-left: 39.5%;
	}
	/*.slider-waarde .midden{*/
	/*	margin-left:240px;*/
	/*	width:130px;*/
	/*	text-align:center;*/
	/*}*/
    .slider-waarde span{
        font-size:0.8rem;
    }
    #container label.slider{
        width:70px;
    }
        

textarea.vraag{
    width:600px;
    height:100px;
    font-family:Arial;
}

#overzichten{
    float:left;
    width:100%;
    }
    #overzichten #sortableoverzicht{
        margin:0;
        padding:0;
    }
    #overzichten #sortableoverzicht li{
        float:left;
        width:30%;
        height:130px;
        padding:10px 1%;
        margin-right:1%;
        margin-bottom:10px;
        border:1px solid #5787c5;
        text-align:center;
        vertical-align:middle;
        background:none;
        list-style-type:none;
        }
        #overzichten #sortableoverzicht .verwijderen{
            float:right;
            width:18px;
            height:18px;
            right:0;
            top:0;
        }
        #overzichten #sortableoverzicht .tekst{
            float:left;
            margin-top:20px;
            width:100%;
        }
        #overzichten #sortableoverzicht .input{
            float:left;
            width:100%;
            }
    #overzichten #sortableoverzicht li.add{
        padding-top:50px;
        height:90px;
        }
        #overzichten #sortableoverzicht li.add img{
            margin-top:4px;
        }

.onderzoek{
    float:left;
    text-align:center;
    width:97%;
    height:65px;
    margin:5px 1%;
    padding:35px 1% 5px;
    background:#fff;
    border:1px solid #5787c5;
}
@media (min-width: 768px) {
	.onderzoek{
		width:45.5%;
	}
}
@media (min-width: 768px) {
	.onderzoek{
		width:29%;
	}
}


.overzichtvolgende{
    float:left;
    margin: 15px 0;
    width:100%;
}
.overzichtvolgende a{
    background:#ff6201;
    color:#fff;
    border-radius:5px;
    text-decoration:none;
	padding: 15px;
}
.then{
    cursor:pointer;
    }
    .then a{
        text-decoration:none;
    }
#jump{
    float:left;
    width:100%;
}
#pagina{
    display:none;
}

#berekening{
    float:left;
    width:100%
    }
    #berekening .macro-vraag{
        float:left;
        display:table;
        padding:10px 10px;
        width:140px;
        height:90px;
        color:#fff;
        background:#5787c5;
        text-align:center;
        border:2px solid #fff;
        font-weight:bold;
        }
        #berekening .macro-vraag span{
            display: table-cell;
            vertical-align: middle;
            }
            #berekening .macro-vraag span a{
                color:#fff;
                text-decoration:none;
            }
            #berekening .macro-vraag span a:hover{
                color:#000;
            }
        #berekening .macro-vraag .verwijderen{
            position:relative;
            }
            #berekening .macro-vraag .verwijderen a{
                text-decoration:none;
                color:#fff;
            }
        
    #berekening .macro-vraag.leeg{
        background:#76a9ec;
    }
    #berekening .macro-vraag.getal{
        display:none;
        background:#76a9ec;
    }
#uitkomst{
    float:left;
    border-top:3px solid #5787c5;
    width:100%;
    margin-top:30px;
    }
    #uitkomst .macro-pagina{
        float:left;
        display:table;
        width:100%;
        color:#000;
        text-align:center;
        font-weight:bold;
        }
        #uitkomst .macro-pagina .pagina1, #uitkomst .macro-pagina .pagina2{
            float:left;
            display:table;
            padding:10px 10px;
            width:130px;
            height:90px;
            color:#000;
            background:#fff;
            text-align:center;
            border:2px solid #5787c5;
            font-weight:bold;
            }
            #uitkomst .macro-pagina span{
                display: table-cell;
                vertical-align: middle;
                }
                #uitkomst .macro-pagina span a{
                    text-decoration:none;
                    color:#5787c5;
                }
        #uitkomst .macro-pagina .tekst{
            float:left;
            margin:40px 0 0 0;
            padding:10px 10px;
            width:100px;
        }
    #uitkomst .macro-pagina.leeg{
        background:#76a9ec;
    }
    #berekening .macro-berekening{
        float:left;
        margin:30px 10px 0 10px;
        display:table;
        height:50px;
        width:50px;
        background: #ff6201;
        text-align:center;
        color:#fff;
        font-size:2.6rem;
        border:2px solid #fff;
        }
        #berekening .macro-berekening span{
            display: table-cell;
            vertical-align: middle;
        }
        #berekening .macro-berekening span select{
            width:100%;
            height:100%;
            background:none;
            border:none;
            font-size:2.4rem;
            color:#000;
        }
    #berekening .macro-berekening.uitkomst{
        background:#fb7e30;
    }





.field.relatie select{
    float:left;
}
#relatieanders input{
    float:left;
    margin:0 0 0 4px;
    padding:0px 0 0px 0;
}

.wysiwyg > p, #container .wysiwyg > p {
	font-weight: normal;
}

/* FORM */
	form.cmxform{
		float: left;
	}








/* LABEL */
	form .field label{
		width: 100%;
		padding: 2px 0;
		}
		@media (min-width: 992px) {
			form .field label{
				width: 200px;
			}
		}

	/* INPUT */
	form .field input,
	form .field select,
	textarea.vraag,
	.vragen input[type=text]{
		padding: 2px;
		font-size: 14px;
		width: 95%;
	}

    /* Remove focus */
        input:focus,
        textarea:focus,
        select:focus,
        input::-moz-focus-inner,
        *:focus{
            outline: none !important;
            border: none;
        }
        input:required,
        input:invalid {
			border: solid 1px #5787c5;
			box-shadow: none;
        }

        /* Firefox test */
        ::-moz-focus-inner {
            border: 0;
        }

/*textarea.vraag{*/
	/*	padding: 2px;*/
	/*	font-size: 14px;*/
	/*	width: 95%;*/
	/*}*/
	@media (min-width: 768px) {
		form .field input,
		form .field select{
			width: 200px;
		}
	}
	/* INPUT */
	/*form .field select {*/
	/*	width: 95%;*/
	/*	padding: 2px;*/
	/*	font-size: 14px;*/
	/*}*/


	/* INPUT SUFFIX */
	#container form .field .suffix{
		font-size: 12px;
		color: grey;
		width: auto;
		}
		@media (min-width: 768px) {
			form .field .suffix{
				padding-left: 15px;
			}
		}

	.vraag-img-wrap{
		max-width: 100%;
	}
	.vraag-img-wrap img{
		max-width: 100%;
		}


	#container ul.box.horizontal li{
		width: auto;
		margin: 0 15px 0 0;
		}
		#container ul.box.horizontal li input {
					margin: 0 auto 5px;
					float: none;
					display: block;
				}
		#container ul.box.horizontal li label{
					margin: 5px 0;
				}

	#container ul.box.vertical li{
		width: 100%;
		margin: 2px 0;
		}
		#container ul.box.vertical li input {
			margin: 5px 10px;
		}
		#container ul.box.vertical li label{

		}


        /* checkbox */
        #container ul.box-checkbox{

        }
        #container ul.box-checkbox li{

        }
        #container ul.box-checkbox li label{
            margin-top: 0;
            margin-left: 5px;
        }

    /* slider */
    #container .slider-waarde-wrap{
        display: block;
        float:left;
        width:100%;
        margin-top:15px;
        }
        #container .slider-waarde-wrap input{
            background-color: transparent;
            border: 0;
            color: #f6931f;
            font-weight: bold;
            font-size:18px;
            margin-top:-3px;
            width: 75px;
            float: left;
        }
         span{
            color: grey;
            font-size: 12px;
        }
		#container .slider-waarde-wrap.slider-waarde-wrap-invisible label.slider,
		#container .slider-waarde-wrap.slider-waarde-wrap-invisible input,
		#container .slider-waarde-wrap.slider-waarde-wrap-invisible span{
			color: transparent;
		}

form .field.field--birthdate select {
	float: left;
	width: 7rem;
	margin: 0 1rem;
}

form .field.field--birthdate input {
	width: 4rem;
}

ul.errors {
	border-left: 3px red solid;
	padding: 1rem 2rem;
}