/* 
###
BACKSTAGE 5.1 CSS > (USER) FORMS PLUGIN
###
*/
.form-thanks {
    color: #323232;
}
.content .form {
    margin-top: 30px;
    width: 100%;
}
.content .form h2.title {
    margin-bottom: 30px;
    font-size: 28px;
}

.content .form .intro { margin: 25px 0 30px 0; padding: 40px; font-size: 14px; line-height: 1.5; border-radius: 5px; background-color: rgb(26 96 96 / 8%); }
.content .form .intro p { margin-bottom: 12px; }
.content .form .intro p:last-of-type { margin-bottom: 0; }
.content .form .intro strong { font-weight: 700; }
.content .form .intro a { font-weight: 700; text-decoration: underline; }
.content .form .intro a:hover { text-decoration: none; }
.content .form .intro ol { margin-top: -10px; margin-bottom: 12px; }
.content .form .intro ol li { list-style: decimal; list-style-position: inside; }
.content .form .intro ol li::marker { font-weight: 700; }

.content .form form {
    width: 100%;
    position: relative;
    margin-top: 15px;
    /*max-width: 800px;*/
}
.content .form form .field {
    position: relative;
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
}
.content .form form .field.textfield label span,
.content .form form .field.select label span {
    display: block;
    margin: 2px 0 5px 0;
    font-size: 14px;
    color: #323232;
    font-weight: 400;
    font-style: italic;
    opacity: 0.75;
}
.content .form form .field.textarea {
    margin: 20px 0 30px 0;
}
.content .form form .field label { margin-bottom: 10px; font-size: 18px; color: #1a6060; font-weight: 700; line-height: 1.3; letter-spacing: 0; }

.content .form form .field label.checkbox {
    /* checkbox */
}
.content .form form .field.radio label, 
.content .form form .field.checkbox label/*,
.content .form form .field.checkboxes label*/ {
    display: flex;
    flex-direction: row;
}
.content .form form .field.checkbox label.noflex {
    display: block;
    padding-left: 30px;
    color: #323232;
    font-weight: 500;
}
.content .form form .field.checkbox label.noflex input {
    position: absolute;
    left: 0;
}
.content .form form .field.radio label span, 
.content .form form .field.checkbox label span,
.content .form form .field.checkboxes label span {
    width: calc(100% - 25px);
}

.content .form form .field.radiobuttons label { font-size: 16px; font-size: 18px; }
.content .form form .field.radiobuttons label:not(:first-of-type) { color: #323232; font-weight: 500; cursor: pointer; }
.content .form form .field.radiobuttons label:not(:first-of-type):hover input,
.content .form form .field.radiobuttons label:not(:first-of-type):hover span { opacity: 0.8; }
.content .form form .field.radiobuttons label:hover input:checked { opacity: 0.85; }
.content .form form .field.radiobuttons label:hover input:checked + span { opacity: 1; }

.content .form form .field.checkbox label { font-size: 16px; font-size: 18px; }
.content .form form .field.checkbox label:not(:first-of-type) { color: #323232; font-weight: 500; cursor: pointer; }
.content .form form .field.checkbox label:not(:first-of-type):hover input,
.content .form form .field.checkbox label:not(:first-of-type):hover span { opacity: 0.8; }
.content .form form .field.checkbox label:hover input:checked { opacity: 0.85; }
.content .form form .field.checkbox label:hover input:checked + span { opacity: 1; }

.content .form form .field.checkboxes label { font-size: 16px; font-size: 18px; }
.content .form form .field.checkboxes label:not(:first-of-type) { color: #323232; font-weight: 500; cursor: pointer; }
.content .form form .field.checkboxes label:not(:first-of-type):hover input,
.content .form form .field.checkboxes label:not(:first-of-type):hover span { opacity: 0.8; }
.content .form form .field.checkboxes label:hover input:checked { opacity: 0.85; }
.content .form form .field.checkboxes label:hover input:checked + span { opacity: 1; }

.content .form form input[type=text],
.content .form form input[type=time],
.content .form form input[type=date],
.content .form form textarea, 
.content .form form select {
    padding: 10px 15px 12px 15px;
    width: 100%;
    font-family: inherit;
    font-size: 16px;
    color: inherit;
    line-height: 1.4;
    border: 0;
    border-radius: 5px;
    box-sizing: border-box;
    -webkit-appearance: none;
    background-color: rgb(26 96 96 / 8%);
}

.content .form form .field.p10 label + * { width: 10%; }
.content .form form .field.p25 label + * { width: 25%; }
.content .form form .field.p50 label + * { width: 50%; }
.content .form form .field.p75 label + * { width: 75%; }

.content .form form select {
    padding: 10px 15px 12px 15px;
    border: 0;
    border-radius: 5px;
    background-color: rgb(26 96 96 / 8%);
    background-position: calc(100% - 14px) 50%;
    background-size: 12px;
    background-repeat: no-repeat;
}
.content .form form select {
	background-image: url('../../images/icons/arrow-dropdown.svg');
}
.content .form form input.timepicker,
.content .form form input.datepicker {
	/*width: 100%!important;*/
	box-sizing: border-box!important;
	display: block;
	/*background: var(--accents);*/
    font-family: inherit;
    font-size: inherit!important;
    color: inherit;	
    height: 45px;
}
.content .form form textarea {
    min-height: 180px;
    max-height: 300px;
    max-width: 100%;
    background-color: rgb(26 96 96 / 8%);
}
.content .form form input[type=checkbox],
.content .form form input[type=radio] {
    width: auto;
    padding: 0;
    margin: 0;
    border: none;
    margin-right: 5px;
    margin-top: -2px;
    height: 20px;
    width: 20px;
    border: 0px;
    background: var(--accents);
    margin-right: 10px;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    transform: translateY(4px); 
}
.content .form form input[type=radio] {
    border-radius: 20px;
}
.content .form form input[type=checkbox]:checked,
.content .form form input[type=radio]:checked {
    opacity: 0.85;
    background-color: #33aaa1;
    background-image: url(../../images/icons/checkmark-w.svg);
    background-size: 12px;
    background-position: 50%;
    background-repeat: no-repeat;
}
.content .form form input[type=checkbox]:checked + span,
.content .form form input[type=radio]:checked + span {
    color: #33aaa1;
    font-weight: 700;
}
.content .form form .field.header {
    margin-top: 30px;
}
.content .form form .field.header h3 {
    margin-bottom: 0;
    font-size: 21px;
    color: #323232;
    line-height: 1.3;
}
.content .form form .field.header + .field.header {
    margin-top: -5px;
    margin-bottom: 30px;
}
.content .form form .field.header + .field.header h3 {
    font-size: 16px;
    color: #323232;
    font-weight: 500;
    line-height: 1.5;
}
.content .form form br {
    display: none;
}
.content .form form label.error {
    position: absolute;
    display: inline-block;
    top: -5px;
    right: 0;
    padding: 10px;
    width: auto;
    font-size: 13px !important;
    color: #fff;
    font-weight: 500;
    line-height: 1;
    border-radius: 3px;
    background-color: #F44336;
}
.content .form form label.error.checked {
    top: -1px;
    right: 0;
    padding: 0;
    padding-right: 0;
    width: 26px;
    height: 26px;
    color: var(--primarycta);
    border-radius: 50%;
    background-color: var(--primarycta);
    background-image: url(../../images/icons/form-checkmark.svg);
    background-position: 50% 50%;
    background-size: 12px;
    background-repeat: no-repeat;
}
.content .form form .field.select label.error.checked {
    top: 11px;
    right: 9px;
}
.content .form form label.error:after {
    /*content: "";*/
    width: 0; 
    height: 0; 
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid var(--error);
    position: absolute;
    bottom: -5px;
    left: 50%;
    margin-left: -5px;
}
.content .form form label.error.checked:after {
    border-top-color: var(--primarycta);
}
/*.content .form div.field.bc {*/
form div.field.bc{
    display: none!important;
}
.content .form form .btn.submit {
    position: relative;
    display: flex;
    justify-content: space-between;
    left: -2px;
    margin-top: 30px;
    padding: 15px 40px 18px 40px;
    font-size: 18px;
    color: #fff;
    font-weight: 600;
    line-height: 1;
    opacity: 1;
    border-radius: 10px;
    box-sizing: border-box;
    transition: all ease 0.15s;
}
.content .form form .btn.submit:hover {
    opacity: 0.9;
    background-color: #32aaa1;
}


/* file upload ** BETA
.content .form form .field.fileupload label.error {
    visibility: hidden;
}
.content .form form input[type=file] {
    margin-top: 5px;
    color:  transparent;
    font-family: inherit;
    font-size:  inherit;
    line-height: 1;
}
.content .form form input[type=file]::-webkit-file-upload-button {
    visibility: hidden;
}
.content .form form input[type=file]::before {
    content: 'Selecteer bestand';
    display: inline-block;
    border: 0px;
    border-radius: 2px;
    padding: 10px;
    white-space: nowrap;
    -webkit-user-select: none;
    cursor: pointer;
    color: var(--main);
    background-color: var(--accents);
    text-shadow: none;
}
.content .form form input[type=file].valid::before {
    content: 'Selecteer bestand ✓ ';
    color:  var(--background);
    background:  var(--primarycta);
}*/
.content .form form input[type=file] {
    -webkit-appearance: none;
    margin-top: 7px;
}
.content .form form input[type=file],
.content .form form input[type=file]::-webkit-file-upload-button {
    font-family: inherit;
    font-size: inherit;
    -webkit-appearance: none;

}
.content .form form input[type=file]::-webkit-file-upload-button {
    border:  0;
    padding:  10px;
    margin-right: 15px;
    cursor: pointer;
    color: var(--main);
    background-color: var(--accents);
    border-radius: 2px;   
}
input[type=file]::-ms-browse {
    color:  #f00;
}

/* alle pagina's met formulieren (userforms), met uitzondering van Zelftests, Klachten & blessures (Screenings) en Contact */
body.userforms:not(.pid458):not(.pid3):not(.pid4) .row.first .content .page_content { padding-right: 40%; }

/* Zelftests */
body.userforms.pid458 .content .media a { pointer-events: none; }

body.userforms.pid458 .content .form { margin: 0; }
body.userforms.pid458 .content .form h2 { margin-bottom: 30px; font-family: 'Manrope', sans-serif; font-size: 32px; color: #323232; font-weight: 900; line-height: 1.2; }
body.userforms.pid458 .content .form form .field > label:first-of-type { margin-bottom: 15px; font-size: 21px; color: #323232; font-weight: 700; line-height: 1.3; cursor: auto; pointer-events: none; }
body.userforms.pid458 .content .form form .field.radiobuttons { margin-bottom: 30px; }

/* Klachten & blessures > .. > Screenings */
body.userforms.pid3 .content .form { margin: 0; padding: 0; width: 100%; background-color: transparent; }
body.userforms.pid3 .content .form h2 { margin: 0; font-size: 18px; color: #323232; font-weight: 500; }
body.userforms.pid3 .content .form form { margin: 0; margin-top: 40px; }
body.userforms.pid3 .content .form form .field { display: flex; flex-direction: row; flex-wrap: wrap; margin-bottom: 20px; padding: 40px 40px 35px 40px; border: 1px solid rgb(26 96 96 / 25%); border-radius: 5px; }
body.userforms.pid3 .content .form form .field.header { margin-bottom: 45px; padding: 0; background-color: transparent; }
body.userforms.pid3 .content .form form .field.header h3 { margin-bottom: 0; }
body.userforms.pid3 .content .form form .field label { color: #333; }
body.userforms.pid3 .content .form form .field.radiobuttons label { margin-right: 25px; font-size: 18px; cursor: pointer; }
body.userforms.pid3 .content .form form .field.radiobuttons label:hover { color: rgb(51 51 51 / 70%); }
body.userforms.pid3 .content .form form .field.radiobuttons label:first-of-type { margin-right: 0; margin-bottom: 15px; width: 100%; font-size: 21px; color: #323232; font-weight: 700; line-height: 1.3; cursor: auto; pointer-events: none; opacity: 1; }
body.userforms.pid3 .content .form form .field.radiobuttons label input[type=radio]:checked { background-color: #32aaa1; background-image: url(../../images/icons/checkmark-w.svg); }
body.userforms.pid3 .content .form form .field.radiobuttons label.error { top: -10px; right: -10px; margin: 0; padding: 8px 15px; font-size: 14px; color: #fff; font-weight: 700; width: auto; border-radius: 0; opacity: 1!important; background-color: #F44336; }
body.userforms.pid3 .content .form form .field.radiobuttons label.error.checked { display: none!important; padding: 0; width: 34px; height: 34px; background-color: #8bc34a; }

/* Contact */
body.contact.userforms.pid4 .row.first .content .page_content { padding: 60px; }

body.userforms.pid4 .content .form { order: 2; margin: 0; padding: 60px; width: 55%; border-radius: 10px; box-sizing: border-box; background-color: #fff; }
body.userforms.pid4 .content .form h2 { margin-top: -8px; margin-bottom: 30px; font-family: 'Manrope', sans-serif; font-size: 36px; color: #323232; font-weight: 900; line-height: 1.2; }


@media screen and (max-width: 1000px) {

    /* FORMS */
    .content .form .intro { padding: 30px; background-color: #fff; }
    
    .content .form h2.title { margin-bottom: 20px; font-size: 21px; }
    
    .content .form form input[type=text],
    .content .form form select { background-color: #fff; }
    
    .content .form form input[type=checkbox],
    .content .form form input[type=radio] { transform: translateY(3px); background-color: #fff; }
    
    .content .form form textarea { background-color: #fff; }
    
    .content .form form .btn.submit { padding: 14px 30px 16px 30px; font-size: 16px; white-space: wrap; overflow: initial; text-overflow: initial; }

    body.userforms:not(.pid458):not(.pid3):not(.pid4) .row.first .content .page_content { padding: 0; }
    
    .content .form form .field.header h3 { font-size: 18px; }
    
    .content .form form .field label,
    .content .form form .field.radiobuttons label,
    .content .form form .field.checkboxes label { font-size: 16px; }
    
    .content .form form .field.checkboxes label:not(:first-of-type),
    .content .form form .field.radiobuttons label:not(:first-of-type),    
    .content .form form .field.checkbox label.noflex { font-size: 15px; }
    
    .content .form form .field.p10 label + * { width: 25%; }
    .content .form form .field.p25 label + * { width: 60%; }
    .content .form form .field.p25.datefield label + input + input { width: 60%; background-color: #fff; }
    .content .form form .field.p50 label + * { width: 100%; }
    .content .form form .field.p75 label + * { width: 100%; }


    /* Klachten & blessures > .. > Screenings */
    body.userforms.pid3 .content .form h2 { font-size: 15px; }
    body.userforms.pid3 .content .form form { margin-top: 30px; }
    body.userforms.pid3 .content .form form .field { margin-bottom: 15px; padding: 0; border: none; }
    body.userforms.pid3 .content .form form .field.radiobuttons label { font-size: 16px; }
    body.userforms.pid3 .content .form form .field.radiobuttons label:first-of-type { margin-bottom: 10px; font-size: 16px; }
    
    /* Contact */
    body.contact.userforms.pid4 .row.first .content .page_content { padding: 0; }
    
    body.userforms.pid4 .content .form { margin-top: 30px; padding: 0; width: 100%; background-color: transparent; }
    body.userforms.pid4 .content .form h2 { margin-top: 0; font-size: 24px; }

}