/*
Theme Name: JS Service Form
Author: Onest Digital Agency B.V.
*/
@import url('https://fonts.googleapis.com/css?family=Lato:300,400,700,900');
@import url('https://fonts.googleapis.com/css?family=Roboto+Slab:100,400,700');

:root {
    --red: #CC3243;
    --gray: #F0F1F2;
    --black: #333333;
}

body {
    word-wrap: break-word;
    overflow-x: hidden;
    font-family: "Hind Guntur", sans-serif;
    font-style: normal;
	font-size: 14px;
	color: #333333;
}


h1, h2, h3, h4 {
	font-family: "Hind Guntur", sans-serif;
	font-weight: 300;
	font-style: normal;
}

a {
	transition: all .4s;
}

b, strong {
	font-weight: 500;
}

[type=button], [type=reset], [type=submit], button {
    -webkit-appearance: none;
    border-radius: 3px;
    border: 1px solid;
}

button.cky-btn-accept {
	background-color: var(--red) !important;
	border-color: var(--red) !important;
}

button.cky-btn-preferences {
	border-color: var(--black) !important;
	color: var(--black) !important;	
}

select:not([multiple]) {
    -webkit-appearance: none;
    -moz-appearance: none;
    background-position: calc(100% - 15px) 50%;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M1.25 0L5 3.6L8.75 0L10 1.2L5 6L0 1.2L1.25 0Z' fill='%236E6E6E'/%3E%3C/svg%3E");
	padding: .5em;
    padding-right: 1.5em;
	border-radius: 0;
	height: 42px;
}

#mfcf7_zl_add_file {
	color: var(--black);
	border-color: var(--black);
}

header {
	-webkit-box-shadow: 0px 4px 30px 0px rgba(0,0,0,0.16);
	-moz-box-shadow: 0px 4px 30px 0px rgba(0,0,0,0.16);
	box-shadow: 0px 4px 30px 0px rgba(0,0,0,0.16);
	padding-bottom: 8px;
	z-index: 2;
    position: relative;	
}

ul.lang_selector li a {
	font-size: 13px;
}

ul.lang_selector li a i {
	transform: scale(1.1);	
}

ul.lang_selector,
ul.lang_selector ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

ul.lang_selector {
	position: relative;
	width: 65px;
	background-color: #FFF;
}

ul.lang_selector > li {
	padding-left: 10px;
}

ul.lang_selector ul {
	position: absolute;
	padding: 5px 10px 2px 10px;	
	width: 100%;
	display: none;
	transition: all .4s;
	background-color: #FFF;
		-webkit-box-shadow: 0px 5px 15px 5px rgba(0,0,0,0.15);
	-moz-box-shadow: 0px 5px 15px 5px rgba(0,0,0,0.15);
	box-shadow: 0px 5px 15px 5px rgba(0,0,0,0.15);
}

ul.lang_selector:hover ul {
	display: block;
}

.service_form_wrap {
	justify-content: space-between;
}

.service_form {
	padding: 45px;
	background-color: #FFF;
	    -webkit-box-shadow: 0px 0px 24px 0px rgba(112, 144, 176, 0.16);
    -moz-box-shadow: 0px 0px 24px 0px rgba(112, 144, 176, 0.16);
    box-shadow: 0px 0px 24px 0px rgba(112, 144, 176, 0.16);
}

.service_form > p:first-of-type {
	font-size: 16px;
}

.service_form_wrap .service_form { 
	margin-top: -50px;
}

.service_form,
.service_form_intro {
	-webkit-box-flex: 0;
    -ms-flex: 0 0 58.333333%;
    flex: 0 0 58.333333%;
    max-width: 58.333333%;	
}

.service_form hr {
	border-color: #E6E6E6;
	opacity: 1;
	margin-top: 1rem;
	margin: 2rem 0;
}

.service_column {	
	padding-top: 45px;	
}

.service_column,
.service_form_intro_column {
	-webkit-box-flex: 0;
	-ms-flex: 0 0 33.333333%;
	flex: 0 0 33.333333%;
	max-width: 33.333333%;	
}

.service_form_intro_column p {
	font-size: 14px;
	margin-bottom: 0;
	margin-top: 6px;
}

.service_form_intro_column p a {
	color: #333333;
}

.service_form_intro_column p a:hover {
	text-decoration: none;
}

.vestigingen {
	margin-top: 44px;
	margin-bottom: 30px;
	padding-bottom: 15px;
	position: relative;
}

.vestigingen:after {
	content: '';
	background-color: var(--red);
	height: 2px;
	width: 65px;
	position: absolute;
	bottom: 0;
	left: 0;
}

.vestiging, 
.calamiteiten {
	line-height: 2;
	padding-top: 24px;
	padding-bottom: 24px;
	font-size: 16px;
	border-bottom: 1px solid #E6E6E6;
	margin: 0;
}

.calamiteiten {
	border-bottom: none;
}

.vestiging a, .calamiteiten a {
	color: var(--red);
	text-decoration: none;
	font-weight: 500;
}

.vestiging a:hover, .calamiteiten a:hover {
	text-decoration: underline;	
}

.vestiging p {
	margin-bottom: 0;
}

.service_column p {
	font-size: 16px;
}

.service_column a.lees_meer {
	position: relative;
	display: inline-block;
	margin-top: 16px;
	color: var(--red);
	font-weight: 500;
	text-decoration: none;
}

.service_column a.lees_meer:after {
	content: '';
	background-image: url("data:image/svg+xml,%3Csvg width='11' height='8' viewBox='0 0 11 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.82357 4.66667L5.52214 7.06L6.42857 8L10.2857 4L6.42857 0L5.52214 0.94L7.82357 3.33333H0V4.66667H7.82357Z' fill='%23DE163D'/%3E%3C/svg%3E"); 
	background-repeat: no-repeat;
	background-size: contain;
	width: 11px;
	height: 8px;
	position: absolute;
	right: -20px;
	top: -1px;
	bottom: 1px;
	margin: auto;
}

.service_column a.lees_meer:hover {
	text-decoration: underline;
}

.form-checkbox-small label {
	padding-left: 18px;
	position: relative;
}

.form-checkbox-small label input {
	position: absolute;
	top: 0;
	left: 0;
}


.inlog_column button, 
.inlog_column input, 
.inlog_column optgroup, 
.inlog_column select, 
.inlog_column textarea {
    padding-top: 6px;
}

.inlog_column input[type="text"]{
	padding-left: 6px;
}

.radio_list {
	margin-bottom: 25px;
}

.radio_list p {
	columns: 200px 2;
}

input[type="radio"] {
	position: relative;
	top: 1px;
}

[data-name="makeAccount"] label {
	font-weight: 500;
}

form hr {
	opacity: 1;
	border-color: #E6E6E6;
	margin-top: 1rem;
	margin-bottom: 1rem;
}

form input[type="button"] {
	padding: 0 30px;
	height: 34px;
	line-height: 34px;
	font-size: 13px;
	font-weight: 500;
}

textarea:focus, input:focus, select:focus, button:focus {
    outline: none;
}

.form-question-container br {
	display: none;
}

.form-question-container.contactpersoon {
	margin-bottom: 25px;
}

.radio_list p br {
	display: block;
}

.inlog_wrap {
	min-height: 400px;
	
}

body .is-layout-flow.inlog_column {
	max-width: 350px;
	margin: auto;
}

.inlog_column input[type="text"],
.inlog_column input[type="password"],
.inlog_column input[type="button"] {
	width: 100%;
}

.inlog_column input[type="text"],
.inlog_column input[type="password"] {
	margin-bottom: 16px;
}

.inlog_column #jsLogin input[type="text"],
.inlog_column #jsLogin input[type="password"],
#mijngegevens_section input[type="password"],
#mijngegevens_section input[type="text"],
#mijngegevens_section input[type="tel"] { 
	padding: 10px 16px 8px 16px;
}

.inlog_column h2.wp-block-heading {
	margin-bottom: 18px;
}

.headerBanner {
    border-bottom: 1px solid var(--gray);
    border-top: 5px solid var(--red);
    font-family: "Hind Guntur", sans-serif;
    font-weight: 600;
    font-style: normal;
}

.gradientHeader {
	display: flex;
    align-items: center;
}

body.page .gradientHeader {
	background-color: #FFFFFF;
	height: 55px;
}

body.home .gradientHeader {
	height: 100px;
    background-color: #F6F6F6;
}

.headerBanner .container {
    display: flex;
    gap: 50px;
    justify-content: space-between;
}

.flexLeft, .flexRight {
    display: flex;
    gap: 20px;
}

.phoneNumber, .languageSwitcher {
    margin-top: 30px;
}

.phoneNumber a, .languageSwitcher a {
	color: var(--black);
	text-decoration: none;
}

.phoneNumber a:hover, .languageSwitcher a:hover {
	color: var(--red);
}

.loginAccount a {
    color: #FFF;
    text-decoration: none;
}

.logoutAccount a {
    color: var(--black);
    text-decoration: none;
}

.loginAccount {
    background-color: var(--red);
    height: 35px;
    width: 120px;
    text-align: center;
    color: #FFF;
    margin-top: 20px;
}

.loginAccount a {
	display: block;
	line-height: 38px;
}

.jsForm-MG-Btn,
#mijngegevens_section input[type=button].jsForm-MG-Btn-Cancel {
    background-color: var(--red);
    padding: 0 16px 0 16px;
    height: 35px;
	line-height: 36px;
    border: 0;
    text-align: center;
    color: #FFF;
    margin-top: 20px;
    border: 1px solid var(--red);
	font-size: 16px;
}

.jsForm-MG-Btn:hover {
	box-shadow: inset 0 0 100px 100px rgba(0, 0, 0, 0.072);
}

#mijngegevens_section input[type=button].jsForm-MG-Btn-Cancel {
	border: 1px solid var(--black);
	color: var(--black);
	background-color: #FFF;
	margin-right: 16px;
}

.jsForm-MG-Btn-Black {
    background-color: var(--black);
    padding: 10px;
    height: 45px;
    border: 0;
    text-align: center;
    color: #FFF;
    margin-top: 20px;
    border: 1px solid var(--black);
}

.logoutAccount {
    border: 1px solid var(--black); 
    height: 35px;
    width: 120px;
    text-align: center;
    margin-top: 20px;
    float: right;
}

.logoutAccount a {
	display: block;
	line-height: 38px;
}

header nav ul {
    list-style: none;
    display: flex;
    margin-left: -32px;
	margin-bottom: 0;
    gap: 40px;
    font-family: "Hind Guntur", sans-serif;
    font-style: normal;
}

header nav ul li {
    margin-top: 10px;
}

header nav ul li a {
    color: var(--black);
    text-decoration: none;
	display: inline-block;
	padding-top: 4px;
	padding-bottom: 4px;
	font-size: 16px;
}

header nav ul li a:hover, header nav ul .current_page_item a {
    color: var(--red);
}

.wpcf7-form-control-wrap input[type=text], 
.wpcf7-form-control-wrap input[type=email], 
.wpcf7-form-control-wrap select,
#jsLogin input[type=text], 
#jsLogin input[type=email],
#jsLogin input[type=password],
#mijngegevens_section [type=text],
#mijngegevens_section [type=email],
#mijngegevens_section [type=password],
#mijngegevens_section [type=tel] {
    width: 100%;
    padding: 8px 8px 6px 8px;
    color: #6E6E6E;
    border: 1px solid #D3D3D3;
    font-size: 14px;
	line-height: 1;
	background-color: #FFF;
}

.form-extra-email .wpcf7-form-control-wrap > input:nth-child(n+2) {
	margin-top: 1rem;
}

#jsLogin input[type=text], 
#jsLogin input[type=email],
#jsLogin input[type=password],
#mijngegevens_section [type=text],
#mijngegevens_section [type=email],
#mijngegevens_section [type=password],
#mijngegevens_section [type=tel] { 
	font-size: 14px;
	height: 42px;
	line-height: 42px;
}

#jsLogin input[type=button] {
	height: 45px;
	line-height: 45px;
	background-color: var(--red);
	color: #FFF;
	font-weight: 500;
	font-size: 16px;
	border: 1px solid var(--red);
}

#jsLogin input[type=button]:hover {
	box-shadow: inset 0 0 100px 100px rgba(0, 0, 0, 0.072);
}

.jsForm-title,
.service_form .jsForm-title p {
    font-size: 20px;
}

.jsForm-question {
    font-weight: bold;
	font-size: 15px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    box-sizing: border-box;
}

.form-row .inner-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.form-question-container .wpcf7-list-item{
    margin: 0;
}

.form-question-container .jsForm-question>p{
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.form-question-container .wpcf7-form-control{
    display: flex;
    flex-direction: column;
}

.form-question-container input[type='radio'] {
    accent-color: #333333;
}

.form-question-container.two-columns .wpcf7-form-control{
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.form-question-container textarea{
    width: 100%;
    padding: 10px;
    border: 1px solid #D3D3D3;
}

.form-small-text{
    font-size: 12px;
    color: #6E6E6E;
}

.form-checkbox-small .wpcf7-list-item, .form-checkbox-small p {
    margin: 0;
    color: #6E6E6E;
    font-size: 13px;
	margin-bottom: 4px;
	    display: flex;
    align-items: flex-start;
}

.form-checkbox-small p a {
    color: #DE163D;
    text-decoration: none;
	padding-left: 4px;
}

.form-checkbox-small p a:hover { 
	text-decoration: underline;
}

input[type=text].wpcf7-not-valid{
    border: 1px solid #DE163D;
}

.wpcf7-not-valid-tip {
    color: #DE163D;
    font-size: 12px;
    padding: 5px 5px 5px 0;
	font-weight: 500;
}

.wpcf7-radio {
	margin-bottom: -3px;
}

input[type=text].wpcf7-succesfully{
    border: 1px solid #2D9D78;
}

input[type=text].wpcf7-unsuccesfully{
    border: 1px solid #DE163D;
}

.wpcf7-submit{
    background-color: #DE163D;
    color: white;
    border: 1px solid transparent;
    margin-top: 1rem;
    padding: 10px 30px 8px 30px;
}

.wpcf7-submit:hover{
    box-shadow: inset 0 0 100px 100px rgba(0, 0, 0, 0.072);
}

.form-extra-email{
    display: flex;
    /* grid-template-columns: auto auto; */
    gap: 1rem;
}

.form-extra-email>p{
    flex: 1;
}

.form-extra-email .extra-email-btn{
    box-sizing: border-box;
    display: flex;
    border: 1px solid #D3D3D3;
    margin-bottom: 1rem;
    justify-content: center;
    align-items: center;
    height: 100%;
}

span[data-name='emailAddress'] {
    display: none;
}

#jsForm-AfwijkendAdres {
    display: none;
}

.form-extra-email .extra-email-btn:hover{
    cursor: pointer;
    box-shadow: inset 0 0 100px 100px rgba(0, 0, 0, 0.177);
}

.form-extra-email .extra-email-btn>p{
    width: 41px;
    height: 41px;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 25px;
    padding-top: 8px;
    color: #6E6E6E;
}

.form-info-text{
    font-size: 12px;
    color: #B4B4B4;
}

input::file-selector-button{
    background-color: white;
    border: 1px solid #6E6E6E;
    font-size: 14px;
    padding: 5px 10px 3px 10px;
}

input::file-selector-button:hover{
    cursor: pointer;
    background-color:  rgb(231, 231, 231);
}

.wpcf7-form hr{
    margin: 2rem 0;
}

.jsForm-MG-View-Hidden {
    display: none;
}

.jsForm-MG-Btn-Cancel {
    background-color: #FFF;
    padding: 10px;
    height: 45px;
    border: 0;
    text-align: center;
    color: var(--black);
    border: 1px solid var(--black);
    margin-top: 20px;
}

.jsForm-MG-SidebarItem {
    margin-left: -12px;
    border-bottom: 1px solid #CCC;
    padding-bottom: 7px;
    padding-top: 15px;
    display: flex;
    cursor: pointer;
}

.jsForm-MG-SidebarItem span {
    text-align: left;
    width: 85%;
}

.jsForm-MG-SidebarItem i {
    width: 8%;
}

.jsForm-MG-SidebarItem i.fa-user-check,
.jsForm-MG-SidebarItem i.fa-pen {
	width: 24px;
}

section.jsForm-MG.container.jsForm-RS {
	padding-left: 0;
	padding-right: 0;
}

.jsForm-MG-Switch-Active, .jsForm-MG-SidebarItem:hover {
    color: var(--red);
    font-weight: 600;
}

.jsForm-MG-MyGegevens {
    padding: 20px;
    border: 1px solid #B4B4B4
}

.jsForm-MG-ViewGegevens input[type=text],  .jsForm-MG-ViewGegevens input[type=password]{
    width: 100%;
    padding: 10px;
    color: #777777;
    border: 1px solid #777777;
}

.jsForm-MG-FullGegevens input[type=text], .jsForm-MG-FullGegevens input[type=tel] {
    width: 100%;
    padding: 12px;
    color: #777777;
    border: 1px solid #777777;
    margin-top: 10px;
}

.jsForm-MG-FullGegevens-Three {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 10px
}

.jsForm-MG-FullGegevens-Two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px
}

.jsForm-RS-List-Item, .jsForm-RS-List-Header {
    padding: 15px;
    background-color: #E6E6E6;
    display: flex;
    gap: 20px;
}

.jsForm-RS-List-Item:nth-of-type(odd) {
    background-color:#F6F6F6;
}

.jsForm-RS-List-Header {
    background-color: #FFF;
    border-top: 1px solid #e6e6e6;
    font-weight: 500;
}

.jsForm-RS-List-Item-Nr, .jsForm-RS-List-Item-StatusCode {
    width: 10%;
}

.jsForm-RS-List-Item-Date {
    width: 15%;
}

.jsForm-RS-List-Item-Melding {
    width: 40%;
    text-align: left;
}

.upload_bestand {
	margin-top: 32px;
}

.servicekosten,
.servicekosten p,
.projectnummer,
.projectnummer p {
	position: relative;
}

.servicekosten .wpcf7-form-control-wrap {
	padding-right: 33px;
}

.extra_info {
	max-height: 0;
	transition: max-height 0.15s ease-out;
    overflow: hidden;
}

.extra_info.open {
	max-height: 500px;
    transition: max-height 0.25s ease-in;
}

.extra_info .inner {
	padding: 24px 20px;
	background-color: #E6E6E6;
	color: var(--black);
	margin-left: 16px;	
	display: block;
	margin-bottom: 24px;
}

.projectnummer .extra_info .inner { 
	margin-left: 0;
	margin-bottom: 12px;
}

.extra_info p {
	margin-bottom: 0;
	display: block;
	font-size: 13px;
}

a.extra_info_btn {
	width: 33px;
	height: 33px;
	background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.65 4.25H9.35V5.95H7.65V4.25ZM7.65 7.65H9.35V12.75H7.65V7.65ZM8.5 0C3.808 0 0 3.808 0 8.5C0 13.192 3.808 17 8.5 17C13.192 17 17 13.192 17 8.5C17 3.808 13.192 0 8.5 0ZM8.5 15.3C4.7515 15.3 1.7 12.2485 1.7 8.5C1.7 4.7515 4.7515 1.7 8.5 1.7C12.2485 1.7 15.3 4.7515 15.3 8.5C15.3 12.2485 12.2485 15.3 8.5 15.3Z' fill='%236E6E6E'/%3E%3C/svg%3E");
	background-size: 17px 17px;
	background-repeat: no-repeat;
	background-position: center;
	position: absolute;
	right: 0;
	top: -10px;
	display: block;
	padding: 8px !important;
	z-index: 9;
}

.projectnummer a.extra_info_btn {
	top: 5px;
	right: 0;
	margin: auto;
}

.form-checkbox-small .wpcf7-not-valid-tip {
    margin-top: -6px;
    margin-bottom: 8px;
	margin-left: 16px;
}

textarea {
	margin-bottom: 4px;
}

#jsForm-AfwijkendAdres {
	margin-bottom: 34px;
}

#jsForm-AfwijkendAdres .jsForm-title {
	font-weight: 500;
	font-size: 16px;
}

footer {
    margin-top: 50px;
}

.footerMenu {
    background-color: #F6F6F6;
    padding-top: 70px;
	padding-bottom: 70px;
}

.footerMenu .container {
    display: grid;
    grid-template-columns: 2.5fr 1fr 1fr;
	position: relative;
}

.footerMenu-Title {
    border-top: 2px solid var(--red);
    width: 250px;
    padding-top: 20px;
}

.footer-phoneNumber a {
    cursor: pointer;
    color: var(--red);
	text-decoration: none;
}

.footer-phoneNumber a:hover {
	text-decoration: underline;
}

.footerMenu-Office {
    background-color: #6E6E6E;
    color: #FFF;
    padding: 40px 32px;
	position: relative;
    bottom: -150px;
	margin-top: -150px;
    z-index: 2;
    width: 100%;
    height: 280px;
}

.footerMenu ul {
	list-style-image: url("data:image/svg+xml,%3Csvg width='5' height='10' viewBox='0 0 5 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M-4.99559e-08 7.99972L3 4.57115L-3.49691e-07 1.14258L1 -0.00027947L5 4.57115L1 9.14258L-4.99559e-08 7.99972Z' fill='%23333333'/%3E%3C/svg%3E");
	margin-top: 34px;
	/* Rob -> deze tijdelijk er uit gehaald */
	display: none;
}

.otgs-development-site-front-end { 
	position: relative;
	z-index: 3;
}

.flexLeft.footer_items {
	display: grid;
    grid-template-columns: 2.5fr 1fr 1fr;
	grid-gap: 0;
	align-items: center;
}

.flexLeft.footer_items .privacy_statement {
	text-align: right;
	padding-right: 30px;
}

.flexLeft.footer_items .privacy_statement a {
	color: #6E6E6E;
	text-decoration: none;
	font-size: 13px;
}

.flexLeft.footer_items .privacy_statement a:hover {
	text-decoration: underline;
}

#menu-footermenu li a {
    color: var(--black);
    text-decoration: none;
}

#menu-footermenu li a:hover,
.footerMenu a:hover {
	text-decoration: underline;
}

.mijngegevens_heading {
	font-size: 32px;
}

#mijngegevens_section {
	padding-bottom: 40px;
}

#mijngegevens_section .jsForm-MG-View {
	padding-top: 12px;
}

#mijngegevens_section .jsForm-MG-View h3,
#mijngegevens_section .jsForm-MG-View h4,
#mijngegevens_section .jsForm-MG-View h5 {
	font-weight: 500;
}

#mijngegevens_section .jsForm-MG-MyGegevens input[type=button],
#mijngegevens_section .jsForm-MG-MyGegevens input[type=submit],
#mijngegevens_section .jsForm-MG-ViewGegevens input[type=button],
#mijngegevens_section .jsForm-MG-ViewGegevens input[type=submit] {
	height: 35px;
	line-height: 37px;
	padding: 0 16px 0 16px;
}

#mijngegevens_section .jsForm-MG-SidebarItem span {
	font-weight: 500;
}

.wpcf7 form.invalid .wpcf7-response-output, 
.wpcf7 form.unaccepted .wpcf7-response-output {
	position: relative;
	width: 100%;
	margin-left: 0;
	margin-right: 0;
	padding: 16px 16px 16px 56px;
	border: none;
	background-color: #FADCDD;
	color: var(--red);
	font-weight: 500;
}

.wpcf7-response-output:before {	
	content: '';
	width: 24px;
	height: 21px;
	position: absolute;
	left: 16px;
	top: 0;
	bottom: 0;
	margin: auto;
	background-image: url("data:image/svg+xml,%3Csvg width='24' height='21' viewBox='0 0 24 21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.9873 0.567519L23.8473 19.2973C23.9473 19.4699 24 19.6656 24 19.8649C24 20.0641 23.9473 20.2599 23.8473 20.4324C23.7472 20.605 23.6033 20.7483 23.43 20.8479C23.2567 20.9475 23.0601 21 22.86 21H1.14001C0.939892 21 0.743303 20.9475 0.57 20.8479C0.396696 20.7483 0.252784 20.605 0.152729 20.4324C0.052673 20.2599 -1.27095e-06 20.0641 0 19.8649C1.27099e-06 19.6656 0.0526782 19.4699 0.152736 19.2973L11.0127 0.567519C11.1128 0.39497 11.2567 0.251685 11.43 0.152065C11.6033 0.0524451 11.7999 0 12 0C12.2001 0 12.3967 0.0524451 12.57 0.152065C12.7433 0.251685 12.8872 0.39497 12.9873 0.567519ZM10.86 15.3243V17.5946H13.14V15.3243H10.86ZM10.86 7.37835V13.054H13.14V7.37835H10.86Z' fill='%23E34850'/%3E%3C/svg%3E");
	background-size: contain;
	background-repeat: no-repeat;
}

#mobile_footer {
	position: fixed;
	width: 100%;
	bottom: 0;
	left: 0;
	right: 0;
	height: 75px;
	display: none;
	background-color: #FFF;
	z-index: 10;
	-webkit-box-shadow: 0px 0px 24px 0px rgba(112, 144, 176, 0.16);
		-moz-box-shadow: 0px 0px 24px 0px rgba(112, 144, 176, 0.16);
		box-shadow: 0px 0px 24px 0px rgba(112, 144, 176, 0.16);		
}

#mobile_footer .inner {
	display: flex;
	width: 100%;
	justify-content: flex-start;
	align-items: center;
	height: 75px;
}

@media only screen and (max-width: 1024px) {
			
	.form-checkbox-small label {
		padding-left: 21px;
	}
	
	.otgs-development-site-front-end {
		display: none;
	}	
}

@media only screen and (max-width: 965px) {
	
	/*
	* Responsive menu
	*/	
	header {
		padding-bottom: 0;
	}
	
	header .phoneNumber,
	header .logoutAccount,
	header .loginAccount	{
		display: none;
	}

	footer .loginAccount,
	footer .logoutAccount {
		margin: 0;
		margin-right: 24px;
	}
	
	footer .phoneNumber {
		margin: auto auto auto 0;
	}

	.headerBanner .container {
		display: flex;
		gap: 0;
		justify-content: space-between;
	}	
	
	#mobile_footer {
		display: block;
	}
	
	#desktop_footer > div.container {
		padding-bottom: 75px;
	}
	
	#desktop_footer > div.container .flexLeft.footer_items {
		display:flex;
		justify-content: space-between;
	}
	
	footer .logo img {
		max-width: 215px;
	}
	
	.flexLeft.footer_items .privacy_statement {
		padding-right: 20px;
	}
	
	.footerMenu-Office {
		display: none;
	}
	
		
	#responsive-menu-pro-container	{
		-webkit-box-shadow: 0px 0px 24px 0px rgba(112, 144, 176, 0.16);
			-moz-box-shadow: 0px 0px 24px 0px rgba(112, 144, 176, 0.16);
			box-shadow: 0px 0px 24px 0px rgba(112, 144, 176, 0.16);
	}	
	
	button#responsive-menu-pro-button {
		bottom: 10px;
		top: auto;
	}
	
	.service_form_intro, 
	.service_form_intro_column {
		display: none;
	}
		
}

@media only screen and (max-width: 768px){
	
	.service_form_wrap {
		flex-direction: column;
	}

	.service_form, 
	.service_column, 
	.service_form_intro_column {
		-webkit-box-flex: 0;
		-ms-flex: 0 0 100%;
		flex: 0 0 100%;
		max-width: 100%;
	}

	.service_form_intro.empty {
		display: none;
	}

	.service_form_intro_column {
		width: 100%;
		text-align: right;
	}

	.gradientHeader {
		align-items: flex-start;
		padding-top: 12px;
	}

	#mijngegevens_section .col-md-12.row > div {
		width: 100%;
	}
	
	#mijngegevens_section .jsForm-MG-View {
		padding: 24px 0 0 0;
	}
	
	#mijngegevens_section .jsForm-MG-ViewGegevens {
		margin-bottom: 34px;
	}
	
	#mijngegevens_section {
		padding-bottom: 0;
	}
}

@media only screen and (max-width: 650px) {
	
	.container, 
	.container-fluid, 
	.container-lg, 
	.container-md, 
	.container-sm, 
	.container-xl, 
	.container-xxl {
		padding-left: 15px;
		padding-right: 15px;
	}

	.headerBanner .languageSwitcher {
		margin: auto;
	}

	.headerBanner .flexRight {
		align-items: center;
	}

	.headerBanner .logo img {
		max-width: 215px;
	}
	
	.service_column {
		padding-top: 25px;
	}
	
	.service_column > div p {
		display: none;
	}
	
	.service_column > div strong:after {
		transform: rotate(180deg);
	}
	
	.service_column > div.open strong:after {
		transform: none;
	}

	.service_column > div p {
		max-height: 0;
		transition: max-height 0.4s ease-out;
		overflow: hidden;
	}

	.service_column > div.open p {
		max-height: 500px;
		transition: max-height 0.4s ease-in;
	}	
	
	.service_column > div.open p {
		display: block;
	}
	
	.vestiging, .calamiteiten {
		line-height: 2;
		padding-top: 20px;
		padding-bottom: 20px;
	}

	.calamiteiten {
		padding-bottom: 0;
	}		

	.over_ons {
		display: none;
	}

	.vestigingen {
		font-size: 24px;
		margin-top: 0;
		margin-bottom: 10px;
		padding-bottom: 7px;
	}
	
	.vestiging > br {
		display: none;
	}
	
	.vestiging strong {
		position: relative;
		display: block;
		padding-right: 20px;
		cursor: pointer;
	}
	
	.vestiging strong:after {
		content: '';
		width: 10px;
		height: 6px;
		background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8.75 6L5 2.4L1.25 6L1.04908e-07 4.8L5 -4.37114e-07L10 4.8L8.75 6Z' fill='%236E6E6E'/%3E%3C/svg%3E");
		background-size: contain;
		background-repeat: no-repeat;
		position: absolute;
		right: 0;
		top: 0;
		bottom: 0;
		margin: auto;
		transition: all .4s;
	}	
	
	#mobile_footer,
	#mobile_footer .inner {
		height: 55px;
	}
	
	button#responsive-menu-pro-button {
		bottom: 0;
	}

	.service_form_wrap .service_form {
		padding: 24px 15px;
		width: 100vw;
		max-width: 100vw;
		margin-left: calc(0px - ((100vw - 100%) / 2));
		margin-right: calc(0px - ((100vw - 100%) / 2));			
	}
	
	.footerMenu {
		padding-top: 32px;
		padding-bottom: 20px;
	}	

	.footerMenu .container {
		display: flex;
		flex-direction: column;
	}
	
	.footerMenu-Title {
		border-top: none;
		padding-top: 0;
		width: auto;
		position: relative;
		margin-bottom: 20px;
		margin-top: 5px;
	}
	
	.footerMenu-Title  h3 {
		padding-bottom: 5px;
	}
	
	.footerMenu-Title:after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 0;
		height: 2px;
		width: 65px;
		background-color: var(--red);
	}
	
	#menu-footermenu {
		margin-top: 20px;
		padding-left: 15px;
	}
	
	#menu-footermenu a {
		padding-top: 12px;
		padding-bottom: 12px;
	}

	#desktop_footer > div.container {
		padding-bottom: 55px;
	}
	
}

@media only screen and (max-width: 500px) {
    .form-row {
        grid-template-columns: 1fr;
    }
		
}

@media (min-width: 1400px){
	.container, .container-lg, 
	.container-md, 
	.container-sm, 
	.container-xl, 
	.container-xxl {
		max-width: 1140px;
	}
}