/*------------------------------------*\
   Garaboxform Algemeen
\*------------------------------------*/
.garage-specifiek-container {display:none}
.garage-specificiek-container-basis {display:block}

.garage-specificiek-container-formulier {display:none}



.garage-form-content-hold {display:none}
.garage-form-content-hold.active-tab {display:flex;flex-wrap:wrap;}
@media screen and (min-width:767px){
	.garage-form-content-hold .medium-10 {width:50%}
}


.garage-specifiek-container {min-height:85vh}
.garage-form-margin {margin-bottom:20px;}

.garage-form-image {margin-bottom:30px;}
.garage-form-image img {display:block}
.garage-form-content-hold {padding:0 10px 40px}

.popup-garagebox-btn .btn {width:100%}
.popup-garagebox-btn-small .btn {width:100%;max-width:220px;min-width:0;}
.form-login-hold .popup-garagebox-btn-small .btn {margin-right:15px}
.popup-garagebox-btn .btn + .btn {margin-top:20px;}


.garage-form-title {position:relative;margin-bottom:30px}
.garage-form-title h4, .garage-form-title h3 {margin:0;font-size:24px;}
.garage-form-title h5 {font-weight:normal;font-size:20px;color:#f37325;font-family: 'Lato', sans-serif;text-transform:none}
.garage-form-title h4, .garage-form-title h5, .garage-form-title h3 {line-height:1.2;margin:0}
.garage-form-title h4 span, .garage-form-title h3 span {color:#EE7219}

.garage-form-title-btn {padding-right:220px}
.garage-form-title-btn .btn {position:absolute;right:0;top:0;}
.garage-form-inputmargin, .garage-form-smallmargin {margin-bottom:15px;}

.garage-form-specs .specific-info-row {margin-bottom:5px}
.garage-form-specs .specific-info-row:last-child {margin-bottom:0}

.garage-form-opmerking {font-size:12px;font-style:italic;color:#888888}

form .form-voorkeuren h4{font-size:18px;font-family: 'Lato', sans-serif;text-transform:none}




input[type="text"].custom-form-control, input[type="email"].custom-form-control, .size-holder, input[type="password"].custom-form-control {height:40px;background:none;border-bottom:1px solid #888888;font-size:18px;font-family: 'Lato', sans-serif;padding-left:10px;-webkit-appearance:none;appearance:none;-moz-appearance:none;margin-bottom:10px;}
.searchform-box .size-holder, .search-box .size-holder{height:50px;border:none;background:#fff}

input[type="text"].custom-form-control:last-child, input[type="email"].custom-form-control:last-child, .size-holder, input[type="password"].custom-form-control:last-child {margin-bottom:0}

.form-voorkeuren input[type="radio"] + label, .garage-form-radio-btns input[type="radio"] + label {  cursor:pointer;  color: #888888;    font-size: 18px;    display: block;    margin-bottom: 15px;position:relative;padding-left:45px}
.form-voorkeuren input[type="radio"] + label:last-child, .garage-form-radio-btns > div:last-child input[type="radio"] + label {margin-bottom:0;}
.form-voorkeuren input[type="radio"] + label:before, .garage-form-radio-btns input[type="radio"] + label:before {content:"";position:absolute;left:0;top:-2px;width:30px;height:30px;border:2px solid #888;border-radius:50%}
.form-voorkeuren input[type="radio"]:checked + label:after, .garage-form-radio-btns input[type="radio"]:checked + label:after{content:"";position:absolute;left:6px;top:4px;width:18px;height:18px;background:#2D353F;border-radius:50%}
.form-voorkeuren input[type="radio"]:checked + label, .garage-form-radio-btns input[type="radio"]:checked + label {color:#2D353F}

.garage-form-radio-btns > div:last-child {padding-bottom:20px;border-bottom:1px solid #E9E9E9;margin-bottom:20px;}

.form-voorkeuren input[type="text"], .form-voorkeuren select, .garage-form-group select{font-size:18px;color:#888888;border-color:#888888}
.garage-form-group select {    color: #1e1e1e;}
.form-voorkeuren .custom-select-holder:after, .garage-form-group  .custom-select-holder:after{    font-size: 13px;    right: 10px;    top: 15px;    color: #888;}

.custom-form-label p {    color: #2D353F!important;
    font-size: 18px;
    font-weight: 600;}

.half-form-control {width:calc(50% - 15px)!important}
.half-form-control-right {float:right!important}


.datum-holder {position:relative;}
.datum-holder input {position:relative;z-index:100}
.datum-holder:after {
    content: "\f073";
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
    position: absolute;
    z-index: 1;
    right: 9px;
    top: 13px;
    color: #888;
    line-height: 1;
    font-size: 17px;
}
.jquery-datepicker.theme-light .datepicker-box .box-row.row-week .box-cell.cell-today {    background: #FFFFFF;    color: #4f8c50;}
.jquery-datepicker.theme-light .datepicker-box .box-row.row-week .box-cell.cell-selected, .jquery-datepicker.theme-light .datepicker-box .box-row.row-week .box-cell.cell-selected:hover {background:#4f8c50}

.garage-form-group {position:relative;padding-bottom:15px;margin-bottom:30px;}
.garage-form-group:after {content:"";position:absolute;bottom:0;left:15px;width:calc(100% - 30px);height:1px;background:#E9E9E9}
.garage-form-group input[type="text"].custom-form-control, .garage-form-group input[type="email"].custom-form-control, .garage-form-group select {border-width:1px}
.garage-form-group:last-child {margin-bottom:0;}
.garage-form-group:last-child:after {display:none}

a.pass-reset, .reset-canvas {    display: inline-block;    margin-top: 5px;    font-size: 16px;    text-decoration: underline;}




/*Validatie */
input[type="password"].validation-required,
input[type="email"].validation-required,
input[type="text"].validation-required {border-color:#e47f3f}

.validation-input {display:none}
select + .validation-input {margin-top:10px;}
.garage-form-inputmargin .validation-input {margin:0}
.validation-input {
    margin-bottom: 10px;
    font-size: 14px;
    line-height: 1;
    color: #e47f3f;
    padding: 0;
    margin-top: 0;
}
p.form-desc, .download-box .form-desc {
    font-size: 15px;
    font-style: italic;
}
.form-desc:first-child {margin-top:5px!important;}
#popover-password {margin-top:10px;float:left;}
.list-unstyled li {padding-left:0!important;font-size:14px;    color: #888;}
.list-unstyled li:before {display:none;}


.progress-bar {height:100%;}
.progress {
    height: 3px !important;background: #E9E9E9;margin-bottom: 15px;
}
.form-group {
    margin-bottom: 10px;
}
.show-pass{
    position: absolute;
    top:5%;
    right: 8%;
}
.progress-bar-danger {
    background-color: #e90f10;
}
.progress-bar-warning{
    background-color: #ffad00;
}
.progress-bar-success{
    background-color: #02b502;
}
.login-btn{
    width: 180px !important;
    background-image: linear-gradient(to right, #f6086e , #ff133a) !important;
    font-size: 18px;
    color: #fff;
    margin: 0 auto 5px;
    padding: 8px 0; 
}
.login-btn:hover{
    background-image: linear-gradient(to right, rgba(255, 0, 111, 0.8) , rgba(247, 2, 43, 0.8)) !important;
    color: #fff !important;
}
.fa-eye{
    color: #022255;
    cursor: pointer;
}
.ex-account p a{
    color: #f6086e;
    text-decoration: underline;
}
.fa-circle{    font-size: 4px;  vertical-align: middle;}
.fa-check{    color: #02b502;}


/*------------------------------------*\
   Garaboxform Tab#1
\*------------------------------------*/
.garagebox-form-hold {padding-top:30px;}
.kosten-box p:last-child {margin-bottom:0}

.form-grey-box.kosten-box {
    padding: 30px 15px 15px;
    text-align: left;margin-bottom:30px;
}
.form-grey-box.kosten-box:last-child {margin-bottom:0;}
.form-grey-box.kosten-box ul {text-align:left}
.form-grey-box.kosten-box p {margin:0;}

.popup-garagebox-info {    background: #e9e9e9;    margin-bottom: 30px;padding:20px 0 30px}
.totaal-kosten {background-color:#d8d8d8;font-weight:700}
.popup-garagebox-info > div{padding:5px 30px;display:flex;flex-wrap:wrap}
.popup-garagebox-info {    font-size: 18px;}

.garagebox-kosten-lijst {padding-bottom:0;}


.popup-garagebox-info-prijs {width:150px;text-align:right;font-weight:700}
.popup-garagebox-info-content {width:calc(100% - 150px);font-weight:normal;text-transform:none;}


.totaal-kosten .popup-garagebox-info-content {font-weight:700}

.popup-garagebox-info h3 {
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    color: #25303b;
    font-size: 24px;
    margin: 0;
}
.popup-garagebox-info-prijs, .popup-garagebox-info-content {font-family: var(--e-global-typography-text-font-family);   font-size: 18px;}

.garage-form-title h4, .garage-form-title h5, .garage-form-title h3 {font-family: 'Oswald', sans-serif;
    font-weight: 700;
    text-transform: uppercase;}

.garage-form-content-hold {font-family: var(--e-global-typography-text-font-family);text-transform:none;    font-weight: 400;}

/*------------------------------------*\
    GARAGEBOX
\*------------------------------------*/
	.garage-tab-holder, .garage-specific-box {display:flex;flex-wrap:wrap;}
	.garage-tab {width:50%}
	
	.garage-images{ display:flex;flex-wrap:wrap; }
	
	.garage-specific-image-holder {    width: 100%;}
	.garage-images .large-image {width:100%;}
	.garage-images .small-image {    width: 50%;}
		.garage-images .small-image:nth-child(2){padding-right:15px;}
		.garage-images .small-image:nth-child(3){padding-left:15px;}
	.garage-specific-image-holder {margin-bottom:40px;}
	
	.text-center {text-align:center}
	.garage-specific-informatie {   width: 100%;    display: flex;    flex-wrap: wrap;}
	.garage-specific-informatie .small-20 {width:100%}
	
	.specific-info-row > div:first-child {    width: 55%;}
.specific-info-row > div:last-child{    width: 45%;}
.small-20.specific-info-row, .garage-specific-informatie .medium-12, .garage-specific-image-holder {    display: flex;    flex-wrap: wrap;}
	
	.margin-fix, .marginfix {
    margin-bottom: 40px;
}
	.columns {padding-left:15px;padding-right:15px;}
	
@media screen and (max-width: 991px) {
    .garage-tab h4 {
        font-size: 20px;
    }
	    .kosten-box {
        padding: 45px 20px;
	}
	    .kosten-box .prijs {
        font-size: 30px;
    }
}

@media screen and (max-width: 767px) {
    .garage-tab h4 {
        font-size: 17px;
    }
	    .kosten-box {
        padding: 30px 20px;
    }
	    .kosten-box .prijs {
        font-size: 26px;
    }
	
	
	    .garage-form-title h4, .garage-form-title h3 {
        font-size: 20px;
    }
	.popup-garagebox-info-prijs, .popup-garagebox-info-content {font-size:16px;}
}

	@media screen and (min-width: 768px) {
    .garage-firstimg, .garage-specific-informatie .medium-12 {        width: 60%;       height:100%;   }
		.garage-specific-informatie .medium-12 {height:auto;}
		.garage-firstimg > div {height:100%}
		.garage-images, .garage-specific-informatie .medium-8 {      width: 40%;   }
		
}
	@media screen and (min-width: 992px) {
    .garage-specific-informatie .large-11 {        width: 55%;padding-right:15px;    }
    .garage-specific-informatie .large-9 {        width: 45%;   padding-left:15px }

	}
	
	
	
	@media screen and (max-width: 767px) {
		.garage-firstimg, .large-image  {margin-bottom:20px;}
		.garage-images .small-image:nth-child(2){padding-right:10px;}
		.garage-images .small-image:nth-child(3){padding-left:10px;}
		    .margin-fix, .marginfix {
        margin-bottom: 30px;
    }
		.kosten-box li {font-size:16px;}
		
	}
	@media screen and (max-width: 550px) {

		    .margin-fix, .marginfix {
        margin-bottom: 20px;
    }
		
    .kosten-box .prijs {
        font-size: 24px;
    }
			.kosten-box li, 	.popup-garagebox-info-prijs, .popup-garagebox-info-content {font-size:14px;}
		.popup-garagebox-info-content, .popup-garagebox-info-prijs {
        width: 100%;
        text-align: left;
    }

}
	
	
.garage-specific-informatie .btn-green, .popup-contact-btn {
    background-color: #508b50 !important;
}
.garage-specific-informatie .btn, .popup-contact-btn, .close-popup-btn {
    font-weight: 700;
    text-transform: uppercase;
    color: #fff;
    display: inline-block;
    padding: 15px 20px;
    line-height: 1;
    min-width: 220px;
    text-align: center;
    background-color: #ddd;
    border: none;
    outline: none;
    cursor: pointer;    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
}	
.close-popup-btn {color:#fff;
    background-color: #25303b;
}

	.close-popup-btn:hover, .close-popup-btn:focus,.popup-contact-btn:hover, .popup-contact-btn:focus, .garage-specific-informatie .btn-green:hover, .garage-specific-informatie .btn-green:focus {color:#fff!important;
    background-color: #e57f3f !important;
}




	.garage-specific-informatie ul, .garage-specific-informatie li {padding:0;list-style:none}

	.garage-specific-informatie{ text-transform:none;font-weight:normal;  font-family:var(--e-global-typography-text-font-family);font-size:var( --e-global-typography-text-font-size);}
	.garage-specific-informatie h3 {font-weight:700;}

.garage-specific-informatie h2, .garage-specific-informatie p.prijs, .garage-tab h4 {
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    color: #25303b;
}
.garage-specific-informatie p.prijs {margin-bottom:5px}
.garage-tab h4 {margin:0;}



@media screen and (max-width: 1200px) {
    .garage-form-title-btn .btn {
        position: relative;
        right: auto;
        top: 0;
        margin-top: 10px;
    }
	.garage-form-title-btn {padding-right:0;}
}

@media screen and (max-width:992px){
	.popup-garagebox-info > div {
        padding: 5px 15px;
    }
}

@media screen and (max-width: 767px) {
    .btn {
        font-size: 18px;
    }
}


@media screen and (max-width: 550px) {
    .btn {
        font-size: 15px;
        width: 100%;
    }
}