/************************************************************************************************* Global layout */

.form {
	background:#FFF /* for hiding loading icon on iframe background */
}
.form div.item {
	display: block;
	float: left;
	width: 100%;
}

.form label,
div .label,
.form .buttons .buttons-links {
	display: block;
	width: 45%;
	text-align: right;
	float: left;
}
.form label {
	line-height: 20px;
}
.form table#overview{
	padding-bottom:30px;
	width:100%;
}
.form .buttons {
	display: inline-block;
	width: 100%;
	padding-bottom:30px; /* ruimte ivm klik conflict bottom bar UI van bijv iPhone */
}
.form .buttons .button.button-previous{
	margin-right:0px;
}
.form .buttons .button.button-middle{
	float:left;
	font-size:110%;
}
.form .buttons .buttons-links{
	padding:0;
	min-height:1px; /* fix */
}
.form .buttons .buttons-links a.button-previous{
	float:right;
	font-size:110%;
}
.form .buttons .buttons-rechts {
	float: left;
	margin-top: 0px;
	display: inline;
}
.form .buttons .buttons-rechts > div{
	float:left;
}

.form div.value {
	float: left;
	margin-top: 0px;
	display: inline;
}
.label-center-error > .errors {
	max-width: 100% !important;
	min-width: 100% !important;
	text-align: center;
}

.form div.label-center-error {
	max-width: 100% !important;
	min-width: 100% !important;
	text-align: center;
}
.form .small-text {
	font-size: 14px;
}

.form div.value label {
	float: none;
	text-align: left;
	padding: 0px;
	display: inline;
	clear: none;
	cursor: pointer;
}
.form div.value label.radio-onder {
    line-height:20px;

}
.form div.value input[type='radio'] {
	margin-left:0px;
	border: 0;
}
.form div.value input[type="checkbox"] {
    margin-left: 0px;
    border: 0;
}
.form div.value textarea {
	margin: 0px;
	height: 80px;
	width: 300px;
}
.form div.value select{
	max-width:350px; /* ivm auto gevulde selects, auto "type" bijv */
}
table#overview h1{
	padding-top: 0px;
}
.form .buttons .button.button-middle{
	margin-right: 20px;
}
.form label + div.value, .form label + div div.value, .form div.label + div.value, .form .buttons .buttons-rechts {
	margin-left: 20px;
	width: 50% /* voorkom vergroten van div ivm te veel content */
}

/* Mobile */
@media only screen and (max-width: 700px) { /* maximaal ivm breedte bepaalde websites */
	h1{font-size:20px!important;} /* ivm lange namen verzekeringen */
	.form label {
		text-align: left;
		float: none;
		padding-bottom: 0px;
		padding-top:0px;
		width: auto;
		margin-left:0;
	}
	.form label + div.value, .form label + div div.value, .form div.label + div.value, .form .buttons .buttons-rechts {
		width: auto;
	}
	.value.deelpremie, .value.deelpremieuit	{
		width: 5rem !important; text-align: right;
	}
	.form .buttons .buttons-links a.button-previous{
		margin-left:0px;
		margin-right:20px;
	}
	.form .buttons .buttons-rechts{
		margin-left:0px;
	}
	.form div.value, .form label ~ div.value:first-of-type {
		margin-left: 0px!important;
	}
	.form div.value.select, .form div.value.textarea{
		width:100%; /* voor de 2 selectors hieronder */
	}
	.form div.value textarea {
		width: 90%;
	}
	.form div.value select{
		width: 98%;
	}
	.form .buttons .buttons-links {
		width: auto;
	}
	/* grote radio en checkbox inputs
	.form div.value input[type='radio'], .form div.value input[type="checkbox"] {
		margin-left:8px;
		transform: scale(1.5, 1.5);
		-moz-transform: scale(1.5, 1.5);
		-ms-transform: scale(1.5, 1.5);
		-webkit-transform: scale(1.8, 1.8);
		-o-transform: scale(1.5, 1.5);
	}*/

}



/************************************************************************************************* File upload */
.form span.fileinput-button i {
    display: inline-block;
    font-style: normal;
	position: relative;

}
.form a.delete-button {
  background: url("/avonline/images/1.0/icons/delete.png") no-repeat scroll 5px top rgba(0, 0, 0, 0);
    border: 0 none;
    display: inline-block;
    font-style: normal;
    height: 21px;
    width: 23px;
    cursor:pointer;
}

div.progress {
    background-color: #f5f5f5;
    border-radius: 3px;
    height: 20px;
    overflow: hidden;
    margin-top:10px;
    box-shadow:0 1px 2px rgba(0, 0, 0, 0.1) inset;
}
div.files{
	margin-top:5px;
}
div.progress-bar {
    box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15) inset;
    color: #fff;
    float: left;
    font-size: 12px;
    height: 100%;
    line-height: 20px;
    text-align: center;
    transition: width 0.6s ease 0s;
    width: 0;
}
div.progress-bar span{
	visibility: hidden;
}
div.progress-bar.progress-bar-success {
    background-color: #5cb85c;
}
div.progress-bar.progress-bar-success span{
	visibility:visible;
}


/************************************************************************************************* Premie berekening message - overlay */

/* same styling as tooltipster */
div#premieberekenmessage{
	background: url('/avonline/images/1.0/icons/ajax-loader.gif') no-repeat center 10px #333;
	font-family:inherit;
	padding: 10px;
	padding-top:30px;
	color: #FFF;
	top:30px;
	border: 2px solid #333;
	border-radius: 5px;
	position: absolute;
    z-index: 2;
    width:220px;
    margin-left:-123px;
    left:50%;
    text-align:center;
}

div#premieberekenmessage span{
	margin: 0 auto;
	width:95%;
}


/************************************************************************************************* Cross-sell */

div.box-cross-sell div.cross-sell- {
	display:none;
}

/************************************************************************************************* Inline errors */

div.error input[type=text],
div.error input[type=number],
div.error input[type=email],
div.error input[type=tel],
div.error select,
div.error textarea {
	background-color: #FBE3E4;
}

div.errors {
	color: #F00;
	font-size: 11px;
	font-style:italic;
	max-width: 350px;
	white-space:normal;
}

/* Mobile */
@media only screen and (max-width: 700px) { /* maximaal ivm breedte bepaalde websites */

	div.errors {
		max-width: 100%;
	}

}


/************************************************************************************************* Itjes */

a.itje, img.itje{
	cursor:help;
}


/************************************************************************************************* Top error container */

div.rubriekerrors {
    background: none repeat scroll 0 0 #FBE3E4;
    border: 1px solid #FBC2C4;
    height: auto;
    line-height: 15px;
    overflow: hidden;
    padding: 10px;
    margin-bottom:15px;
}
div.rubriekerrors ul.error
{
	margin-top:10px;
	line-height: 15px;
    list-style: disc outside none;
    text-align: left;
    z-index: 5;
    margin-left:15px;
}
div.rubriekerrors ul.error li
{
    list-style: disc outside none;
    padding-bottom: 5px;
}



/************************************************************************************************* Stappenteller */

/* steps */
.stappen {
	float: left;
    position: absolute;
    right: 0;
    top: 0;
}
.stepvisited {
	cursor:pointer;
}

/* tabsteps */

div.tabsteps
{
    text-align: center;
}
div.tabstepvisited, div.tabstepcurrent, div.tabstepunvisited
{
	float: left;
}
div.tabstepvisited
{
	cursor: pointer;
}
div.tabstepcurrent, div.tabstepunvisited
{
	cursor: default;
} 


/* tabsteps TG formulier  */
div.tabsteps.tg{ 
	color: black;
	width: 100%;
	display:inline-block;
}

.tg .tabstepcurrent, .tg .tabstepunvisited, .tg .tabstepvisited {
	float:left;
	text-align:center;
	position:relative;
	font-size: 16px;
}
.tabsteps.tg span{
	display:block;
	background-repeat:no-repeat;
	background-position:center;
	width:30px;
	height:30px;
	margin: 0 auto 10px;
	line-height:30px;	
	z-index:10;
	position:relative;
	background-color:white;
}
.tg .tabstepcurrent span{
	background-image: url("../../img/stappenteller/Stap_actief.svg");
	color: #0083A9;
}
.tg .tabstepvisited span{
	background-image: url("../../img/stappenteller/Stap_Done.svg");
	color:transparent;
	cursor:pointer;
}
.tg .tabstepunvisited span{
	background-image: url("../../img/stappenteller/Stap_inactief.svg");
	color: #fff;
}

.tg .tabstepunvisited:before, .tg .tabstepvisited:before, .tg .tabstepcurrent:before, .tabsteps.tg div:last-child:after{
	content: "";
	width:100%;
    height:2px;
    position:absolute;
   	top:14px;
	z-index:1
}

.tg .tabstepunvisited:before { /* make line before step unvisited blue */
    background-color: #6eb5cc;
	left:-50%;
}
.tg .tabstepcurrent:before, .tg .tabstepvisited:before{ /* make line before step visited and current green */
   	background-color:#7ab800; 
	left:-50%;
}
.tabsteps.tg div:last-child:after { /* line after last step */
   	background-color: #6eb5cc; 
	left:50%;
	width:50%;
}

@media (max-width: 578px){
	.tg .tabstepcurrent, .tg .tabstepunvisited, .tg .tabstepvisited {
		color:transparent;
		pointer-events:none;
	}
}
@media (max-width:366px ){
	div.tabsteps.tg, .tg .tabstepcurrent, .tg .tabstepunvisited, .tg .tabstepvisited {
		display:none;
	}
}
/************************************************************************************************* Produktinrichting */

/* Kenteken rubriek */
.kenteken-invoerveld, .kenteken-invoervelderror{
	background-color: #FFFFFF!important;
    background-image: url("../../images/1.0/icons/kenteken.png");
    background-repeat: no-repeat;
    border: 0 none;
    height: 53px;
    letter-spacing: 5px;
    font-weight:bold;
    margin: 0;
    text-align: center;
    text-transform: uppercase;
    width: 180px;
    padding:0;
    padding-left:30px;
    line-height:53px;
}
/* totaal maand premie rubriek */
.totaal{
	font-size:140%;
}
/* totaal jaar premie rubriek */
.totaaljaar{
	font-size:70%;
}
.gratis, .totaal, .deelpremie {
	color: green;
}
/* deelpremie rubrieken */
.deelpremie, .deelpremieuit{
	position:absolute;
	right:10px;
}
/* "optioneel" tekst achter niet verplichte inputs */
span.optional, .deelpremieuit{
	color:#999;
}


/* Inputtype ADVIES - algemeen */

div.nomobile div.value{
    margin: 0 auto;
    width: 700px;
    float:none;
    display:block;
    text-align:center;
    position:relative;
}
div.nomobile div.value > div{
	display:inline-block;
}
div.nomobile div.value > div:nth-child(2) div.fancy-basisdekkingv2 {
	padding-left:275px;
}
div.nomobile div.fancy-basisdekkingv2-list{
	background: #fff none repeat scroll 0 0;
    border: 1px solid #ccc;
    border-radius: 5px;
    height: 400px;
    left: 0;
    position: absolute;
    top: 150px;
    width: 100%;
}
div.fancy-content-button-active, div.fancy-content-button-disabled{
	display:none;
}
div.fancy-basisdekkingv2:first-child{
	vertical-align:top;
}

div.fancy-basisdekking, div.fancy-basisdekkingv2 {
	padding-top:110px;
	margin-left:4px;
}
div.fancy-basisdekking *, div.fancy-basisdekkingv2 *{
	text-align:center;
}

div.fancy-zorgenvrij div.fancy-content-button {
	width:165px !important;
}

/* Inputtype ADVIES - content */
div.fancy-basisdekking div.fancy-content, div.fancy-basisdekkingv2 div.fancy-content{
	float:left;
	position:relative;
}
div.fancy-basisdekking div.fancy-content{
	width:190px;
}
div.fancy-basisdekkingv2 div.fancy-content{
	width:100px;
}
div.fancy-basisdekkingv2 div.fancy-listcontent{
	width:230px;
	background:#f0f0f0;
}
div.fancy-basisdekking-advies, div.fancy-basisdekkingv2-advies{
	background:url("../../images/1.0/meest-gekozen.png") no-repeat center top;
}
div.fancy-content img.itje{
	position: absolute;
  	right: 0;
    top: -20px;
}

/* Inputtype ADVIES - actief */
div.item div.fancy-basisdekking-active div.fancy-content-button, div.item div.fancy-basisdekking-active div.fancy-content-button-disabled, div.item div.fancy-basisdekkingv2-active div.fancy-content-button, div.item div.fancy-basisdekkingv2-active div.fancy-content-button-disabled{
	display:none;
}
div.item div.fancy-basisdekking-disabled div.fancy-content-button, div.item div.fancy-basisdekking-disabled div.fancy-content-button-active, div.item div.fancy-basisdekkingv2-disabled div.fancy-content-button, div.item div.fancy-basisdekkingv2-disabled div.fancy-content-button-active{
	display:none;
}
div.item div.fancy-basisdekking-active div.fancy-content-button-active, div.item div.fancy-basisdekkingv2-active div.fancy-content-button-active{
	display:block;
}
div.item div.fancy-basisdekking-disabled div.fancy-content-button-disabled, div.item div.fancy-basisdekkingv2-disabled div.fancy-content-button-disabled{
	display:block;
}

/* Inputtype ADVIES - disabled */
div.fancy-basisdekking-disabled, div.fancy-basisdekkingv2-disabled {
	position:relative;
}
div.fancy-basisdekking-disabled div.fancy-content, div.fancy-basisdekkingv2-disabled div.fancy-content{
	opacity:0.2;
}
div.fancy-disabled{
 	background: none repeat scroll 0 0 #fff;
    width: 160px;
    z-index: 9999;
}

/* Inputtype ADVIES_MATRIX - content */
table.fancy-basisdekking {
	border-collapse: collapse;
	border-style: hidden;
}

table.fancy-basisdekking th, table.fancy-basisdekking td {
	border: 1px solid white;
	padding: 15px;
}

tr.fancy-dekking {
	font-size:14px;
	font-weight:bold;
	height:40px; /* vereist ivm eventuele multi-line dekkingsnamen */
	color:#ffffff;
	background-color:#66bae8
}

th.fancy-dekking {
	text-align:center;
}

td.fancy-content-colum1 {
	text-align:center;
	color:#ffffff;
	font-weight:bold;
}

td.fancy-content-colum2 {
	text-align:center;
}

td.fancy-content-colum3 {
	text-align:center;
}

td.fancy-content-colum4 {
	text-align:center;
}

td.even {
	background-color:#ededed;
}

td.odd {
	background-color:#d8d8d8;
}

td.fancy-content-colum1.even {
	background-color:#2a759e;
}

td.fancy-content-colum1.odd {
	background-color:#66bae8;
}

/* Inputtype DATEFORM_HTML5 */

.ui-datepicker-trigger{
	margin:0px 5px 0px 5px;
	cursor:pointer;
}

@media only screen and (max-width: 700px) { /* maximaal ivm breedte bepaalde websites */

	.ui-datepicker-trigger {
		display:none;
	}
}

.ui-datepicker {
	background:#FFF;
    display: none;
    padding: 0.5em 0.5em 0;
    width: 200px;
    border:1px solid #CCC;
}
.ui-datepicker .ui-datepicker-header {
    padding: 0.2em 0;
    position: relative;
}
.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next {
    height: 1.8em;
    position: absolute;
    top: 2px;
    width: 1.8em;
    border:0;
    cursor:pointer;
}
.ui-datepicker .ui-datepicker-prev {
    left: 2px;
}
.ui-datepicker .ui-datepicker-next {
    right: 2px;
}
.ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span {
    display: block;
    margin-top: -8px;
    position: absolute;
    top: 50%;
}
.ui-datepicker .ui-datepicker-next span {
	right:0;
}
.ui-datepicker .ui-datepicker-title {
    line-height: 1.8em;
    margin: 0 2.3em;
    text-align: center;
}
.ui-datepicker .ui-datepicker-title select {
    font-size: 1em;
    margin: 1px 0;
}
.ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year {
    width: 49%;
}
.ui-datepicker table {
    border-collapse: collapse;
    font-size: 0.9em;
    margin: 0 0 0.4em;
    width: 100%;
}
.ui-datepicker th {
    border: 0 none;
    font-weight: bold;
    padding: 0.7em 0.3em;
    text-align: center;
}
.ui-datepicker td {
    border: 0 none;
    padding: 1px;
}
.ui-datepicker td span, .ui-datepicker td a {
    display: block;
    padding: 0.2em;
    text-align: center;
    text-decoration: none;
    border:0;
}
.ui-datepicker .ui-datepicker-buttonpane {
    background-image: none;
    border-bottom: 0 none;
    border-left: 0 none;
    border-right: 0 none;
    margin: 0.7em 0 0;
    padding: 0 0.2em;
}
.ui-datepicker .ui-datepicker-buttonpane button {
    cursor: pointer;
    float: right;
    margin: 0.5em 0.2em 0.4em;
    overflow: visible;
    padding: 0.2em 0.6em 0.3em;
    width: auto;
}
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current {
    float: left;
}
.ui-datepicker.ui-datepicker-multi {
    width: auto;
}
.ui-datepicker-multi .ui-datepicker-group {
    float: left;
}
.ui-datepicker-multi .ui-datepicker-group table {
    margin: 0 auto 0.4em;
    width: 95%;
}
.ui-datepicker-multi-2 .ui-datepicker-group {
    width: 50%;
}
.ui-datepicker-multi-3 .ui-datepicker-group {
    width: 33.3%;
}
.ui-datepicker-multi-4 .ui-datepicker-group {
    width: 25%;
}
.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header, .ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header {
    border-left-width: 0;
}
.ui-datepicker-multi .ui-datepicker-buttonpane {
    clear: left;
}
.ui-datepicker-row-break {
    clear: both;
    font-size: 0;
    width: 100%;
}

.item.mobile div.value.deelpremie.validatie, .item.mobile div.value.validatie .errors{
	float: none!important;
	clear: left!important;
	position: static;
}

/* positief valideren */
#checkImg{
	background-image: url(/avonline/img/vink_aovz.png); 
	background-repeat: no-repeat;
	width: 25px;
	height: 19px;
	display: inline-block;
	margin-left: 10px;
}

/* Hide for printing */
@media print {
	.noprint  {
		display: none !important;
	}
}

.centerbutton {
	text-align: center;
	cursor: pointer;
	margin-left: auto;
	margin-right: auto;
}