/* Custom styles */
@font-face {
    font-family: "MarkPro-Regular";
    font-style: normal;
    font-weight: normal;
    src: url("../fonts/MarkPro-Regular.woff2") format("woff2"), url("../fonts/MarkPro-Regular.woff") format("woff"), url("../fonts/MarkPro-Regular.ttf") format("truetype")
}

@font-face {
    font-family: "MarkPro-Heavy";
    font-style: normal;
    font-weight: normal;
    src: url("../fonts/MarkPro-Heavy.woff2") format("woff2"), url("../fonts/MarkPro-Heavy.woff") format("woff"), url("../fonts/MarkPro-Heavy.ttf") format("truetype")
}

@font-face {
    font-family: "MarkPro-Light";
    font-style: normal;
    font-weight: normal;
    src: url("../fonts/MarkPro-Light.woff2") format("woff2"), url("../fonts/MarkPro-Light.woff") format("woff"), url("../fonts/MarkPro-Light.woff") format("truetype")
}
/* New Fonts for form */
@font-face {
    font-family: 'ffmark-xl';
    font-weight: 200;
    font-style: normal;
    src: url('../fonts/Mark-Extralight.woff2') format('woff2'), url('../fonts/Mark-Extralight.woff') format('woff'), url('../fonts/Mark-Extralight.ttf') format('truetype');
}
@font-face {
    font-family: 'ffmark-regular';
    font-weight: 400;
    font-style: normal;
    src: url('../fonts/Mark-Regular.woff2') format('woff2'), url('../fonts/Mark-Regular.woff') format('woff'), url('../fonts/Mark-Regular.ttf') format('truetype');
}
@font-face {
    font-family: 'ffmark-heavy';
    font-weight: 800;
    font-style: normal;
    src: url('../fonts/Mark-Heavy.woff2') format('woff2'), url('../fonts/Mark-Heavy.woff') format('woff'), url('../fonts/Mark-Heavy.ttf') format('truetype');
}

html, body{
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: "MarkPro-Regular", "Arial", "sans-serif";
    font-size: 12px;
    height: 100%;
    width: 100%;
}

ol.multipleChoice {
    padding: 0;
}

ol.multipleChoice li {
    list-style: none;
    padding: 0 0 2px 0;
}

ol.multipleChoice label {
    margin: 0;
    font-weight: normal;
    width: 100%;
    text-align: left;
    text-wrap: normal;
    white-space: normal;
    height: auto;
}

.styled-input input:focus + label {
    font-size: 11px !important;
}

select, textarea, input {
    font-size: 13px !important;
}

#content {
    margin: 15px 20px 30px 20px;
}

.call-to-action{
    border-radius: .33333rem;
    border-style: none;
    color: #fff;
    cursor: pointer;
    font-family: "MarkPro-Heavy", "Arial", "sans-serif";
    font-size: 13px;
    letter-spacing: 2px;
    height: 40px;
    line-height: 40px;
    padding: 0;
    width: 100%;
    font-weight: bold;
}

form textarea{
    width: 400px;
}
.section h3 {
    margin: 0 0 20px;
    color: #000;
    clear: both;
    border-bottom: solid 2px #C4C4C4;
    padding-bottom: 5px;
    font-family: "MarkPro-Heavy", "Arial", "sans-serif";
    position: relative;
}
label {
    color: #000;
    font-size: 13px !important;
    font-family: "MarkPro-Heavy", "Arial", "sans-serif";
    text-align: left;
    white-space: normal;
}

.data-privacy-notice {
    font-size: 13px !important;
}

select.required {
    /*background: #E6E9ED;*/
    border-radius: 3px;
    border: solid 1px #C4C4C4 ;
    padding: 0.5em 0.75em;
    color: #003A5A;
    font-family: "MarkPro-Heavy", "Arial", "sans-serif";
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: url('../assets/select-down.png') 96% / 27px no-repeat !important;
}

input:focus ~ label, textarea:focus ~ label, textarea:valid ~ label {
    color: #246EA7;
    top: -2.25rem;
    -webkit-transition: all 0.125s ease;
    transition: all 0.125s ease;
    outline: 0;
}

input:focus, textarea:focus, input.required:focus {
    outline: 0;
    border-bottom: 2px solid #246EA7;
}
form input {
    margin: 0;
    padding: 0;
}
.styled-input {
    float: left;
    margin: 0;
    position: relative;
    width: 100%;
    height: 40px;
    margin-bottom: 15px;
}
.styled-input input, .styled-input input.required {
    z-index: 2;
    position: relative;
    background: none;
    -webkit-appearance: none;
    border-radius: 0;
}
.styled-input label {
    padding: 0.8rem 0;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transition: all 0.25s ease;
    transition: all 0.25s ease;
    pointer-events: none;
    z-index: 1;
    width: 100%;
}
.styled-input label, label span.checkbox_new {
    color: #999;
    font-family: "MarkPro-Light";
    text-align: left;
}
.radio, .checkbox, label span.checkbox_new a,
#site .info-icon::after {
    color: #999;
}

.styled-input.wide, input.wide { width: 100%; }

input,
textarea {
    padding: 1rem 1rem;
    border: 0;
    font-size: 1rem;
}

input ~ span{
    width: 0;
    height: 2px;
    background: #246EA7;
    position: absolute;
    bottom: 4px;
    left: 0;
    -webkit-transition: all 0.125s ease;
    transition: all 0.125s ease;
}
input:focus ~ span,
textarea:focus ~ span {
    width: 100%;
    -webkit-transition: all 0.075s ease;
    transition: all 0.075s ease;
}
.long-short, .short {
    display: inline-block;
}
.long-short {
    width: 79%;
}
.short {
    width: 20%;
}
.pull-left {
    float: left;
}
.pull-right {
    float: right;
}
form select.long-select {
    width: 100%;
    background: url('../assets/select-down.png') 98% / 27px no-repeat !important;
}

.styled-input .input_filed {
    color: #246EA7;
    top: -2.25rem;
    -webkit-transition: all 0.125s ease;
    transition: all 0.125s ease;
}

form select.medium-select {
    width: 300px;
}
#site input#zip,
label.error {
    width: 100%;
    /* margin-right: 13px; */
}
input.error:not(:focus) {
    border: 0;
    border-bottom: solid 2px #c9150f;
}
.error label span.checkbox_new {
    color: #c9150f;
}

input:focus ~ label.frei {
    display:none;
}

input.required, form input {
    border: 0 ;
    height: 40px ;
    background: #FFF;
    border-bottom: solid 1px #C4C4C4 ;
    width: 100%;
}
.radio input[type="radio"], .radio-inline input[type="radio"], .checkbox input[type="checkbox"], .checkbox-inline input[type="checkbox"] {
    height: auto;
    width: 100%;
}
.radio-line input[type="radio"],
.radio-line input[type="checkbox"],
.hide
{
    visibility:hidden !important;
}
.line-element.radio-line .container-cr {
    display: inline-block;
    width: 100px;
}
.line-element {
    /*margin-top: 10px;*/
}
.line-element select {
    /*margin-bottom: 10px;*/
}
.margin-top-0 {
    margin-top: 0;
}
.section input[type="radio"],
.section input[type="checkbox"]{
    visibility:hidden;
    height: 0;
    margin: 0;
}
.container-cr {
    margin-bottom: 10px;
}
.container-cr label {
    position: relative;
    left: 35px;
}

/* Base styles for spans */
.container-cr span::before,
.container-cr span::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
}


/* Check-boxes */
.container-cr span.checkbox_new::before{
    width: 27px;
    height: 27px;
    background-color: #fff;
    left: -35px;
    box-sizing: border-box;
    border: solid 1px #C4C4C4 ;
    transition: border-color .2s;
}

.container-cr span.checkbox_new::after {
    content: '\f00c';
    font-family: 'FontAwesome';
    left: -31px;
    top: 0;
    bottom: 0;
    color: transparent;
    transition: color .2s;
}
input[type="checkbox"]:checked + label span.checkbox_new::after {
    color: #FFF;
    background: #246EA7;
    padding-left: 5px;
    padding-top: 4px;
    width: 25px;
    height: 25px;
    left: -34px;
}

.checkbox-new_label {
    left: 35px;
}

input.error:not(:focus) {
    border-bottom: solid 2px #c9150f;
}

input.error:not(:focus) + label{
    color: #c9150f;
}

select.error:not(:focus) {
    border: solid 2px #c9150f;
}
input[type="checkbox"].error {
    color: #c9150f;
}

.row-element {
    clear: both;
    padding: 0;
}

.info-icon, span.info-layer, input ~ span{
    position: initial;
    float: none;
    left: initial;
    right: initial;
    top: initial;
    bottom: initial;
    margin: 0;
    padding: 0;
    width: auto;
    z-index: initial;
}
.tooltip-wrapper {
    position: absolute;
    right: 0;
    display: block;
    background: none;
    top: calc(50% - 5px);
    padding-left: calc(100% - 16px);
}
.tooltip-wrapper.label {
    padding-left: 16px;
}
.tooltip-wrapper.label {
    right: -20px;
    top: -1px;
}
.info-icon::after {
    cursor: pointer;
    padding: 0;
    position: relative;
    z-index: 1011; /*Tooltip popup arrow*/
}
.display-table {
    display: table;
    width: auto;
}
.relative {
    position: relative;
}
form select {
    margin: 0;
    margin-top: 10px;
    -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
    appearance: none;
}
label.section-label{
    margin: 0;
    text-align: left;
    width:100%;
    margin-bottom: 15px;
}
select::-ms-expand {
    display: none;
}

/* added because of the additional checkbox */
@media all and (min-width: 860px) {

    .section {
        margin: 0 150px 50px 150px;
    }

    .full-row {
        margin-left: 0;
    }

}
/* overwrites the default view by 750px */
@media (min-width: 750px) {
    .section {
        margin: 0 0 15px 0;
    }
}
@media all and (max-width: 568px){
    #vcheck #street {
        width: 100%;
        margin-right: 0%;
    }

    #vcheck #streetnumber {
        width: 100%;
    }

    #site #vcheck #zip {
        width: 100%;
        margin-right: 0%;
    }

    #vcheck #location {
        width: 100%;
    }
    .error-wrapper label{
        width: 100% !important;
    }
    .long-short, .short {
        display: block;
        width: 100%;
    }
}
@media all and (max-width: 560px){
    #site #content {
        overflow: initial;
    }
    #site label.checkbox-label {
        margin: 0;
        padding: 0;
    }
    .radio-line label, .radio-line label span {
        text-align: left;
        width: 50%;
        float: none;
        display: inline;
        padding: 0;
    }
    .line-element.radio-line .container-cr {
        width: 32%;
    }
    #site label.checkbox-label {
        width: 80%;
    }
}

p.data-privacy-notice{
    font-family: "MarkPro-Light", Arial, sans-serif;
    color: #999;
    max-width: 100%;
    font-size: 15px;
    font-weight: 700;
}

input[type="text"].required + label:after {
    content: "*";
    margin-left: 3px;
}

html, body, label,
.styled-input label, label span.checkbox_new{
    font-family: "Arial", "sans-serif";
}
.call-to-action, label.error, .error .checkbox-label, input[type="checkbox"].error + label,
.error label span.checkbox_new {
    color: #c9150f;
}
.call-to-action {
    border-color: #c9150f;
    color: #c9150f;
    border: 1px solid #c9150f;
}
.call-to-action:hover,
input[type="checkbox"]:checked + label span.checkbox_new::after {
    background-color: #c9150f;
    color: #ffffff;
}
.styled-input label, label span.checkbox_new,
.radio, .checkbox, label span.checkbox_new a, #site .info-icon::after,
select.required, input.required, form input,
.container-cr span.checkbox_new::before,
.styled-textarea label, .styled-textarea textarea:focus ~ label, .styled-textarea textarea:valid ~ label,
#vcheck .styled-textarea textarea {
    color: #7f7f7f;
    background: #ffffff;
}
.styled-input label {
    z-index: 4;
    background: none;
}
input:-webkit-autofill {
    -webkit-box-shadow: inset 0 0 0 9999px #ffffff !important;
    position: relative;
    z-index: 0;
    -webkit-text-fill-color: #7f7f7f !important;
}
select.required, input.required, form input,
.container-cr span.checkbox_new::before,
#vcheck .styled-textarea textarea {
    border-color: #7f7f7f;
}
label, input:focus ~ label, textarea:focus ~ label, textarea:valid ~ label,
.styled-input .input_filed{
    color: #45464a;
}
input:focus, textarea:focus, input.required:focus {
    border-color: #45464a;
}
select.required {
    background: url(../assets/select-down.png) 96% / 27px no-repeat !important;
}
form select.long-select {
    background: url(../assets/select-down.png) 98% / 27px no-repeat !important;
}
.info-icon {
    z-index: 99;
}
#vcheck {
    padding-bottom: 1px;
}
a[data-toggle="popover"],
a[data-toggle="popover"]:hover,
a[data-toggle="popover"]:focus,
a[data-toggle="popover"]:visited {
    text-decoration: none;
}
.required-label::after {
    content: " *";
}
.error span.checkbox_new::before {
    border-color: #c9150f;
}
.container-cr.anrede label.inline-label {
    position: initial;
    color: #7f7f7f;
}
select,
textarea,
input {
    font-size: 16px;
}

#vcheck .styled-textarea textarea {
    width: 100%;
    min-width: 100%;
    border: 1px solid #7f7f7f;
    display: table;
    float: none;
    margin-left: 0;
    border-radius: 0;
}
#vcheck .styled-textarea .tooltip-wrapper {
    top: -19px;
}
#vcheck .styled-textarea label {
    top: -2.75rem;
    background: none;
}

.anrede-wrapper {
    height: 40px;
    margin-bottom: 10px;
}

@media all and (max-width: 560px) {
    .radio-line label, .radio-line label span {
        float: left;
    }
    .line-element.radio-line {
        height: 32px;
        margin-bottom: 25px;
    }
    .line-element.radio-line .container-cr.anrede {
        display: table;
        /*position: absolute;*/
        /*top: -25px;*/
        width: 100%;
    }

    .anrede-wrapper {
        margin-bottom: 35px;
    }
}

.error-wrapper > .error {
    padding-bottom: 15px;
}

input.error,
select.error{
    border-top: 0;
    border-right: 0;
    border-left: 0;
}

.overwrite-child-padding > .error {
    padding-bottom: 0 !important;
}

p.data-privacy-notice{
    font-family: Arial, sans-serif;
    color: #7f7f7f;
    max-width: 100%;
    font-size: 15px;
    font-weight: 700;
}

.img-center > img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 20%;
}