/**
 * (en) Form elements
 * (de) Formular-Elemente
 *
 * @copyright			Copyright 2020, crossbase mediasolution GmbH
 * @version				1.0
 */

@-webkit-keyframes progress {
    from {
    }

    to {
        width: 50%
    }

}

@keyframes progress {
    from {
    }

    to {
        width: 50%
    }

}

@media screen {

    /* (en) Custom HTML5 Progress Styling */
    /* (de) Progressbar */
    /*------------------------------------------------------------------------------------------------------*/
    .check-state {
        position: absolute;
        right: 12px;
        top: 8px;
    }

    progress {
        appearance: none;
        -moz-appearance: none;
        -webkit-appearance: none;
        border: none;
        /* Firefox and Opera. */
        width: 100%;
        height: 3px;
        color: #6482be;
    }

    progress::-webkit-progress-bar {
        background-color: #e6e6e6;
    }

    /* Chrome */
    progress::-webkit-progress-value {
        background-color: #6482be;
    }

    /* Firefox */
    progress::-moz-progress-bar {
        background-color: #6482be;
    }

    /* IE, Edge */
    progress::-ms-fill {
        border: none;
    }

    /* (en) Invalid and warning notes */
    /* (de) Hinweise auf falsche Eingaben und Warnungen */
    /*------------------------------------------------------------------------------------------------------*/
    .highlightedText {
        background: #0d0d6e;
        color: #fff;
        padding: 0 4px;
        border-radius: 8px;
    }

    .invalidTextInput,
    .invalidSelect {
        border: 1px solid red;
        border-radius: 8px;
    }

    .invalidCheckbox {
        border: 1px solid red !important;
    }

    form .fa.fa-warning {
        display: block;
        position: absolute;
        right: 5px;
        top: 7px;
        color: red;
    }

    form .fa.fa-check {
        display: block;
        position: absolute;
        right: 5px;
        top: 7px;
        color: green;
    }

    /* (en) format info icons in form element containers	*/
    /* (de) Formatierung von Info-Icons in Form-Element Containern */
    /*------------------------------------------------------------------------------------------------------*/
    .custom-styled-input.inline-icon {
        padding: 4px 8px 4px 32px;
    }

    .custom-styled-input.inline-icon .fa,
    .custom-styled-input.inline-icon .far,
    .custom-styled-input.inline-icon .fal {
        position: absolute;
        left: 12px;
        top: 8px;
        border-color: transparent;
    }

    /* (en) Format form element labels */
    /* (de) Formatierung von Form-Element Bezeichnungen */
    /*------------------------------------------------------------------------------------------------------*/
    label {
        position: relative;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }

    label.float-left {
        margin-right: 4px;
        float: left;
    }

    .custom-styled-label {
        line-height: 24px;
    }

    .custom-styled-label label {
        display: inline;
    }

    .custom-styled-input,
    .custom-styled-result {
        display: block;
        position: relative;
        font-size: 100%;
        line-height: 22px;
        /*border-radius: 8px;*/
        padding: 4px 8px;
        margin-bottom: 24px;
        background: #ffffff;
        color: #333333;
        border: 1px solid #e0e0e0;
    }

    .custom-styled-result {
        display: inline-block;
        margin: 0 0 0 8px;
    }

    /* (en) Format placeholder */
    /* (de) Formatierung von Placeholders */
    /*------------------------------------------------------------------------------------------------------*/
    ::-webkit-input-placeholder {
        color: rgba(51, 51, 51, 0.8);
    }

    :-moz-placeholder {
        color: rgba(51, 51, 51, 0.8);
    }

    ::-moz-placeholder {
        color: rgba(0, 0, 0, 0.5);
    }

    :-ms-input-placeholder {
        color: rgba(51, 51, 51, 0.8);
    }

    input:required {
        box-shadow: none;
    }

    input:invalid {
        box-shadow: none;
    }

    input:-webkit-autofill,
    input:-webkit-autofill:hover,
    input:-webkit-autofill:focus,
    textarea:-webkit-autofill,
    textarea:-webkit-autofill:hover,
    textarea:-webkit-autofill:focus,
    select:-webkit-autofill,
    select:-webkit-autofill:hover,
    select:-webkit-autofill:focus {
        -webkit-text-fill-color: #333;
        -webkit-box-shadow: 0 0 0 30px #e6f0ff inset;
    }

    /* (en) basic format of form elements */
    /* (de) Grundlagende Formatierung von Form-Elementen */
    /*------------------------------------------------------------------------------------------------------*/
    .custom-styled-input input,
    .custom-styled-input input:focus,
    .custom-styled-input input:hover,
    .custom-styled-input select,
    .custom-styled-input select:focus,
    .custom-styled-input select:hover,
    .custom-styled-input textarea,
    .custom-styled-input textarea:focus,
    .custom-styled-input textarea:hover {
        line-height: 22px;
        min-height: 22px;
        background: transparent;
        border: none;
        width: 100%;
        padding: 0;
        margin: 0;
        font-family: 'Greycliff CF Regular', sans-serif;
        color: #333333;
        outline: none;
    }

    select + span::after,
    .searchbox input + span::after,
    .custom-styled-input input + span::after,
    .custom-styled-input input + ul + span::after,
    .custom-styled-input select + span::after,
    .custom-styled-input textarea + span::after {
        visibility: hidden;
        display: block;
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        box-sizing: border-box;
        transition: all 0.3s ease;
        box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);
        border-radius: 6px;
        cursor: text;
    }

    .custom-styled-input select + span::after {
        z-index: -1;
    }

    select:focus + span::after,
    .searchbox input:focus + span::after,
    .custom-styled-input input:focus + span::after,
    .custom-styled-input input:focus + ul + span::after,
    .custom-styled-input select:focus + span::after,
    .custom-styled-input textarea:focus + span::after {
        visibility: visible;
        box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.1);
    }

    .custom-styled-input.textarea textarea,
    .custom-styled-input.textarea:focus textarea,
    .custom-styled-input.textarea:hover textarea {
        height: 88px;
    }

    textarea.textarea-noresize {
        resize: none;
    }

    .custom-styled-input select,
    .custom-styled-input select:focus,
    .custom-styled-input select:hover {
        padding: 0;
        height: 24px;
        line-height: 24px;
    }

    .invalid,
    .invalid * {
        background: red !important;
        color: #fff !important;
    }

    [class*='custom-styled'] .hide.fas {
        position: absolute;
        top: 4px;
        right: 4px;
    }

    /* (en) format of button elements */
    /* (de) Grundlagende Formatierung Schaltflächen-Elementen */
    /*------------------------------------------------------------------------------------------------------*/
    div[class*=custom-styled-button] {
        font-size: 0;
        overflow: visible;
    }

    div[class*=custom-styled-button] > * {
        font-size: 15px;
    }

    .custom-styled-button-box > * {
        margin: 0 24px 24px 0;
        text-align: left;
    }

    .custom-styled-button-box > br {
        margin: 0;
    }

    .custom-styled-button-box-right {
        text-align: right;
    }

    .custom-styled-button-box-right > * {
        margin: 0 0 24px 24px;
        text-align: left;
    }

    .custom-styled-button-box-center > * {
        margin: 0 12px 24px 12px;
    }

    div[class*=custom-styled-button] > span {
        display: inline-block;
        padding: 4px 6px;
    }

    .custom-styled-button-box-center,
    .custom-styled-button-box-center *,
    .custom-styled-button-100-center *,
    .custom-styled-button-100-center {
        text-align: center;
    }

    .custom-styled-button-100 > *,
    .custom-styled-button-100 > [class*=button],
    .custom-styled-button-100 > [class*=button]:active,
    .custom-styled-button-100 > [class*=button]:focus,
    .custom-styled-button-100-center > *,
    .custom-styled-button-100-center > [class*=button],
    .custom-styled-button-100-center > [class*=button]:active,
    .custom-styled-button-100-center > [class*=button]:focus {
        display: block;
        margin: 0 0 24px 0;
    }

    .custom-styled-button-100 > button,
    .custom-styled-button-100-center > button {
        width: 100%;
    }

    .custom-styled-button-with-input {
        display: inline-block;
        position: absolute;
        right: -1px;
        top: -1px;
    }

    button {
        font-family: 'Open Sans', cnRegular, sans-serif;
        appearance: none;
        background: transparent;
        cursor: pointer;
        outline: none;
        border: none;
        text-align: left;
        color: #333333;
    }

    button.no-text {
        min-width: 38px;
        text-align: center;
    }

    button.text-only {
        color: #0d0d6e;
        -webkit-transition: color 0.3s ease 0s;
        transition: color 0.3s ease 0s;
    }

    button.text-only:hover {
        color: #ff6601;
    }

    br + .button {
        margin-top: 6px;
    }

    .button,
    a.button:visited,
    a.button:active,
    a.button:focus {
        font-family: 'Open Sans', cnRegular, sans-serif;
        display: inline-block;
        line-height: 22px;
        height: 32px;
        vertical-align: bottom;
        border-radius: 8px;
        padding: 4px 12px;
        background: #6482be;
        border: 1px solid #6482be;
        color: #fff;
        -webkit-transition: all 0.3s ease;
        transition: all 0.3s ease;
        box-sizing: border-box;
    }

    div[class*=custom-styled-button] .button.button-group-start,
    div[class*=custom-styled-button] a.button.button-group-start:visited,
    div[class*=custom-styled-button] a.button.button-group-start:active,
    div[class*=custom-styled-button] a.button.button-group-start:focus {
        border-radius: 8px 0 0 8px;
    }

    div[class*=custom-styled-button] .button.button-group,
    div[class*=custom-styled-button] a.button.button-group:visited,
    div[class*=custom-styled-button] a.button.button-group:active,
    div[class*=custom-styled-button] a.button.button-group:focus {
        border-radius: 0;
        margin-left: -1px;
    }

    div[class*=custom-styled-button] .button.button-group-end,
    div[class*=custom-styled-button] a.button.button-group-end:visited,
    div[class*=custom-styled-button] a.button.button-group-end:active,
    div[class*=custom-styled-button] a.button.button-group-end:focus {
        border-radius: 0 8px 8px 0;
        margin-left: -1px;
    }

    .button.button-small,
    .button.button-small:focus,
    .button.button-small:active,
    .button.button-small:visited {
        padding: 2px 12px;
        font-size: 12px;
        height: 28px;
        line-height: 22px;
    }

    .button:hover,
    a.button:hover,
    .button.button-active,
    a.button.button.active {
        background: #0d0d6e;
        color: #fff;
        border: 1px solid #0d0d6e;
    }

    .button-secondary,
    .button-secondary:active,
    .button-secondary:focus,
    .button-secondary:visited {
        background: #e0e0e0;
        border: 1px solid #e0e0e0;
        /*color: #707070;*/
    }

    .button-secondary:hover,
    a.button-secondary:hover,
    .button-secondary.button-active,
    a.button-secondary.button-active {
        background: #d0d0d0;
        border: 1px solid #d0d0d0;
        color: #707070;
    }

    .button-inactive,
    .button-inactive:active,
    .button-inactive:focus,
    .button-inactive:visited,
    .button[disabled],
    .button[disabled]:active,
    .button[disabled]:focus,
    .button[disabled]:visited,
    .button[disabled]:hover {
        font-family: 'Open Sans', sans-serif;
        line-height: 22px;
        border-radius: 8px;
        padding: 4px 12px;
        background: #ffffff;
        color: rgba(112, 112, 112, 0.5);
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        cursor: default;
        display: inline-block;
        border: 1px solid #e0e0e0;
    }

    .button-inactive:hover,
    .button[disabled]:hover {
        background: #ffffff;
        color: rgba(112, 112, 112, 0.5);
    }

    .button.button-link-style,
    a.button.button-link-style:visited,
    a.button.button-link-style:active,
    a.button.button-link-style:focus {
        background: transparent;
        border: 1px solid transparent;
        color: #6482be;
    }

    .button.button-link-style:hover,
    a.button.button-link-style:hover,
    .button.button-active.button-link-style,
    a.button.button.active.button-link-style {
        background: transparent;
        color: #0d0d6e;
        border: 1px solid transparent;
    }

    .custom-styled-input.icon-button {
        padding-right: 44px;
    }

    .custom-styled-input.icon-button.lg-input {
        padding-right: 44px;
    }

    .custom-styled-input.icon-button.lg-input input {
        font-size: 18px;
        line-height: 24px;
    }

    .custom-styled-input.icon-button.lg-input button {
        height: 34px;
        width: auto;
    }

    .custom-styled-input.icon-button.lg-input button[class*='icon']:before {
        font-size: 18px;
        line-height: 24px;
    }

    /* (en) Application by Social Media Buttons */
    /* (de) Bewebrung über Social Media Schaltflächen */
    /*------------------------------------------------------------------------------------------------------*/
    .flex-container-row {
        display: flex;
        flex-flow: row wrap;
        align-items: stretch;
        margin: 0 -6px;
    }

    .flex-container-center {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }

    .flex-button-horizontal {
        flex-grow: 1;
        text-align: center;
        min-height: 48px;
        height: auto;
        margin: 0 6px 12px 6px;
    }

    .flex-button-vertical {
        flex-grow: 1;
        text-align: center;
        min-height: 48px;
        height: auto;
        width: 200px;
        margin: 0 6px 12px 6px;
    }

    /* (en) Ripple-Effekt on Buttons */
    /* (de) Ripple-Effekt auf Schaltflächen */
    /*------------------------------------------------------------------------------------------------------*/
    [class*='custom-styled-button'] > [class*='button'],
    .slider-wrapper h1 a,
    .filter-item .button {
        position: relative;
        overflow: hidden;
        /*transform: translate3d(0, 0, 0);*/
    }

    [class*='custom-styled-button'] > [class*='button']:after,
    .slider-wrapper h1 a:after,
    .filter-item .button:after {
        content: "";
        display: block;
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        pointer-events: none;
        background-image: radial-gradient(circle, #000 20%, transparent 20.01%);
        background-repeat: no-repeat;
        background-position: 50%;
        transform: scale(10, 10);
        opacity: 0;
        transition: transform .5s, opacity 1s;
    }

    [class*='custom-styled-button'] > [class*='button']:active:after,
    .slider-wrapper h1 a:active:after,
    .filter-item .button:active:after {
        transform: scale(0, 0);
        opacity: .2;
        transition: 0s;
    }

    /* (en) format radio und checkbox elements	*/
    /* (de) Formatierung von Radio- und Checkbox-Elementen */
    /*------------------------------------------------------------------------------------------------------*/
    .checkbox-radio-group {
        margin: 0 0 18px 0;
    }

    .checkbox-radio-group::before,
    .checkbox-radio-group::after {
        display: table;
        content: '';
    }

    .checkbox-radio-group > .float-col {
        margin: 0 0 6px 0;
    }

    input[type='radio'],
    input[type='checkbox'] {
        position: absolute;
        left: 4px;
        top: 4px;
        opacity: 0;
        cursor: pointer;
        z-index: 1;
    }

    .select-img input[type='radio'],
    .select-img input[type='checkbox'] {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        cursor: pointer;
        z-index: 2;
    }

    input[type='radio'] + span,
    input[type='checkbox'] + span {
        cursor: pointer;
    }

    input[type='radio'] + span:before,
    input[type='checkbox'] + span:before {
        font-family: 'Font Awesome 5 Free';
        font-weight: 300;
        font-size: 22px;
        line-height: 26px;
        padding-left: 2px;
        display: inline-block;
        width: 22px;
        -webkit-transition: color 0.3s ease 0s;
        transition: color 0.3s ease 0s;
    }

    input[type='radio'] + span:hover:before,
    input[type='checkbox'] + span:hover:before {
        /* (de) nicht verwendet, da Mobile Safari Checkboxen im Hintergrund nicht erkennt */
        /* (de) not used because mobile safari does not recognize checkboxes in background */
        /*color: #ff6601;*/
    }

    input[type='radio'] + span:before {
        content: '\f111';
        /* circle-blank */
    }

    input[type='radio']:checked + span:before {
        content: '\f192';
        /* circle */
    }

    input[type='checkbox'] + span:before {
        content: '\f0c8';
        /* check-empty */
    }

    input[type='checkbox']:checked + span:before {
        content: '\f14a';
        /* check */
    }

    .checkbox,
    .radio {
        margin: 0;
        position: relative;
        display: block;
        line-height: 24px;
    }

    .checkbox:after,
    .radio:after {
        /*content: '\00a0';*/
    }

    .checkbox > span,
    .radio > span,
    .checkbox > div,
    .radio > div {
        margin: 0 0 6px 30px;
        display: inline-block;
        text-align: left;
    }

    .checkbox label,
    .radio label {
        background: #fff;
        border: 1px solid #e0e0e0;
        /*border-radius: 4px;*/
        cursor: pointer;
        height: 22px;
        width: 22px;
        position: absolute;
        z-index: 1;
        top: 0;
        -webkit-transition: background-color 0.3s ease 0s;
        transition: background-color 0.3s ease 0s;
    }

    .checkbox.select-img label,
    .radio.select-img label {
        background: transparent;
        box-shadow: none;
        cursor: pointer;
        height: auto;
        width: auto;
        position: relative;
    }

    .radio label {
        border-radius: 100%;
    }

    .radio.select-img label {
        border: none;
        border-radius: 0;
        display: block;
    }

    .checkbox label::after,
    .radio label::after {
        background: transparent;
        border-color: #6482be;
        border-style: none none solid solid;
        border-width: medium medium 3px 3px;
        content: "";
        height: 6px;
        width: 10px;
        left: 5px;
        top: 5px;
        opacity: 0;
        position: absolute;
        /* Force Hardware Acceleration */
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-transform: translateZ(0) rotate(-45deg);
        transform: translateZ(0) rotate(-45deg);
        -webkit-transition: opacity 0.3s ease 0s;
        transition: opacity 0.3s ease 0s;
    }

    .checkbox.select-img label::after,
    .radio.select-img label::after {
        display: none;
    }

    .radio label::after {
        border-style: solid;
        border-width: 3px;
        border-radius: 100%;
        height: 6px;
        width: 6px;
    }

    .checkbox label:hover,
    .radio label:hover {
        background: #fff;
    }

    .checkbox.select-img label:hover,
    .radio.select-img label:hover {
        background: transparent;
    }

    .checkbox label:hover::after,
    .radio label:hover::after {
        /*opacity: 0.4;*/
    }

    .checkbox.select-img label:hover::after,
    .radio.select-img label:hover::after {
        opacity: 0;
    }

    .checkbox.select-img input[type="checkbox"]:checked + label,
    .radio.select-img input[type="radio"]:checked + label {
        background: transparent;
    }

    .checkbox input[type="checkbox"]:checked + label::after,
    .radio input[type="radio"]:checked + label::after {
        opacity: 1;
    }

    .checkbox input[type="checkbox"]:disabled + label,
    .radio input[type="radio"]:disabled + label,
    .checkbox input[type="checkbox"]:disabled + label:hover,
    .radio input[type="radio"]:disabled + label:hover {
        background: #e6f0ff;
        border: 1px solid #e0e0e0
    }

    .checkbox input[type="checkbox"]:checked:disabled + label::after,
    .radio input[type="radio"]:checked:disabled + label::after,
    .checkbox input[type="checkbox"]:checked:disabled + label:hover::after,
    .radio input[type="radio"]:checked:disabled + label:hover::after {
        border-color: rgba(112, 112, 112, 0.5);
    }

    .checkbox input[type="checkbox"]:disabled + label::after,
    .radio input[type="radio"]:disabled + label::after,
    .checkbox input[type="checkbox"]:disabled + label:hover::after,
    .radio input[type="radio"]:disabled + label:hover::after {
        border-color: transparent;
    }

    .checkbox input[type="checkbox"]:checked + label::after,
    .radio input[type="radio"]:checked + label::after {
        opacity: 1;
    }

    .checkbox.select-img input[type="checkbox"]:checked + label::after,
    .radio.select-img input[type="radio"]:checked + label::after {
        opacity: 0;
    }

    .checkbox.select-img input + label > img + img,
    .radio.select-img input + label > img + img {
        display: none;
        position: absolute;
        top: 0;
        left: 0;
    }

    .checkbox.select-img input[type="checkbox"]:checked + label > img + img,
    .radio.select-img input[type="radio"]:checked + label > img + img {
        display: block;
    }

    .checkbox.float-left,
    .half-padding .checkbox.float-left,
    .radio.float-left,
    .half-padding .radio.float-left {
        float: left;
        margin: 0 36px 24px 0;
    }

    /* (en) format radio und checkbox toggle-elements	*/
    /* (de) Formatierung von Radio- und Checkbox-Elementen im Toggle-Style */
    /*------------------------------------------------------------------------------------------------------*/
    .checkbox-switch {
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    .checkbox-switch > span {
        display: inline-block;
        height: 24px;
        line-height: 24px;
        vertical-align: top;
        padding: 0 0 0 6px;
        margin: 0 0 6px 0;
    }

    .switch-area {
        position: relative;
        display: inline-block;
        width: 50px;
        height: 24px;
        box-sizing: border-box;
        vertical-align: top;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }

    /* Hide default HTML checkbox */
    .switch-area input {
        opacity: 0;
        width: 100%;
        height: 100%;
        position: static;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;

    }

    /* The slider */
    .switch-area .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #fff;
        border: 1px solid #e0e0e0;
        -webkit-transition: .4s;
        transition: .4s;
    }

    .switch-area input[type="checkbox"] + .slider::before {
        position: absolute;
        content: "";
        height: 12px;
        width: 12px;
        left: 4px;
        bottom: 4px;
        padding: 0;
        border: 1px solid #6482be;
        background-color: #6482be;
        -webkit-transition: .4s;
        transition: .4s;
    }

    .switch-area input[type="checkbox"]:checked + .slider {
        background-color: #6482be;
        border: 1px solid #6482be;
    }

    .switch-area input[type="checkbox"]:checked + .slider {
        box-shadow: 0 0 1px #6482be;
        border: 1px solid #6482be;
    }

    .switch-area input[type="checkbox"]:checked + .slider::before {
        -webkit-transform: translateX(26px);
        -ms-transform: translateX(26px);
        transform: translateX(26px);
        border: 1px solid #fff;
        background-color: #fff;
    }

    /* Rounded sliders */
    .checkbox-switch.round .switch,
    .checkbox-switch.round .slider {
        border-radius: 24px;
    }

    .checkbox-switch.round .slider::before {
        border-radius: 50%;
    }


    /* (en) format file upload element */
    /* (de) Formatierung des File-Upload Elements */
    /*------------------------------------------------------------------------------------------------------*/
    .custom-styled-input.upload-button {
        padding-left: 160px;
    }

    .custom-styled-button-with-file-upload {
        display: inline-block;
        position: absolute;
        left: -1px;
        top: -1px;
        border-radius: 8px;
    }

    .custom-styled-input input.file-upload-element {
        position: absolute;
        top: 0;
        left: 0;
        margin: 0;
        padding: 0;
        font-size: 15px;
        height: 32px;
        opacity: 0;
        filter: alpha(opacity=0);
        cursor: pointer !important;
    }

    .custom-styled-input input::-webkit-file-upload-button {
        cursor: pointer;
    }

    .upload-delete .custom-styled-button-box {
        position: absolute;
        right: -1px;
        top: -1px;
    }

    .upload-delete .custom-styled-button-box > *,
    .half-padding .upload-delete .custom-styled-button-box > * {
        margin: 0;
    }

    /* (en) format select element */
    /* (de) Formatierung des Select-Elements */
    /*------------------------------------------------------------------------------------------------------*/
    select {
        visibility: hidden;
    }

    .custom-styled-select {
        position: relative;
        z-index: 1;
        padding: 4px 8px;
        height: 22px;
        display: block;
    }

    .custom-styled-select:before {
        display: block;
        font-family: 'Font Awesome 5 Free';
        font-weight: 300;
        content: '\f107';
        font-size: 1em;
        height: 100%;
        line-height: 2.3em;
        padding: 0 0.625em;
        position: absolute;
        top: 0;
        right: 0;
        text-align: center;
        width: 1em;
        z-index: -1;
        color: #333333;
        border-radius: 8px;
    }

    .custom-styled-select select {
        visibility: visible;
        background: transparent;
        display: inline-block;
        width: 100%;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        cursor: pointer;
    }

    .custom-styled-select select::-ms-expand {
        display: none;
        /* to ie 10 */
    }

    .custom-styled-select select:focus {
        outline: none;
    }

    :-moz-any(.custom-styled-select):before {
        /* this is necessary for overcome the caret default browser */
        /*background: #ffffff;*/
        pointer-events: none;
        /* https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events	*/
        z-index: 1;
        /* this is necessary for overcome the pseudo element */
    }

    /* (en) format upload area */
    /* (de) Formatierung des Upload-Bereichs */
    /*------------------------------------------------------------------------------------------------------*/
    .upload-area {
        background: #fff;
        border-radius: 8px;
        height: 288px;
        overflow-y: auto;
        margin: 0 0 12px 0;
        padding: 6px;
        position: relative;
    }

    .upload-area .upload-field-label {
        position: absolute;
        display: block;
        left: 0;
        right: 0;
        top: 50%;
        text-align: center;
        opacity: 0.5;
    }

    .upload-area > ul {
        font-size: 0;
        line-height: 0;
        margin: 0 0 6px 0 !important;
        background: #fff;
    }

    .upload-area > ul:after {
        clear: both;
        content: '';
        display: table;
    }

    .upload-area > ul > li {
        float: left;
    }

    .upload-area ul > li > div {
        background: #fff;
        border-radius: 8px;
        box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
        display: inline-block;
        font-size: 15px;
        height: 120px;
        width: 120px;
        margin: 6px;
        padding: 6px;
        position: relative;
        text-align: center;
        vertical-align: bottom;
        -webkit-transition: background 1s;
        transition: background 1s;
    }

    .upload-area ul > li > .upload-error {
        background: #dc6b58;
    }

    .upload-area ul > li > div > div {
        padding: 2px;
        background: #fff;
        border-radius: 8px;
        height: 80px;
        line-height: 80px;
        position: relative
    }

    .upload-area ul > li > div img {
        max-height: 60px;
        vertical-align: middle;
    }

    .upload-area ul > li > div [class*=icon] {
        text-align: center;
        background: #fff;
    }

    .upload-area ul > li > div [class*=icon]:before {
        font-family: 'Font Awesome 5 Free';
        font-weight: 300;
        font-weight: normal;
        line-height: 22px;
        padding-right: 6px;
    }

    .upload-area ul > li > div p {
        position: absolute;
        bottom: 6px;
        left: 6px;
        line-height: normal;
        white-space: nowrap;
        overflow: hidden;
        margin: 0;
        text-align: left;
        text-overflow: ellipsis;
        max-width: 90%;
        -webkit-transition: color 1s;
        transition: color 1s;
    }

    .upload-area ul > li > .upload-error p {
        color: #fff;
    }

    .upload-area ul > li > div > div .upload-meter {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
    }

    .upload-area ul > li > div > div .upload-meter > span {
        border-radius: 8px;
        height: 4px;
        min-height: 4px;
        width: 0;
        display: block;
        background: #0d0d6e;
        position: relative;
        overflow: hidden;
        -webkit-transition: width 2s;
        transition: width 2s;
        /*-webkit-animation: progress 2s 1 forwards;
        animation: progress 2s 1 forwards;*/
    }

    .upload-meter-button {
        cursor: default;
        position: relative;
        min-width: 150px;
    }

    .upload-meter-button:hover {
        background: #6482be;
    }

    .upload-meter-button:after {
        content: '\00a0';
    }

    .upload-meter-button .button-progress-text {
        position: absolute;
        left: 0;
        right: 0;
        z-index: 1;
        display: block;
        margin: 0 !important;
        text-align: center;
    }

    .upload-meter-button .button-progress {
        white-space: nowrap;
        position: absolute;
        top: 0;
        left: 0;
        border-radius: 8px;
        width: 0;
        height: 100%;
        display: block;
        margin: 0 !important;
        background: #0d0d6e;
        -webkit-transition: width 2s;
        transition: width 2s;
        /*-webkit-animation: progress 2s 1 forwards;
        animation: progress 2s 1 forwards;*/
    }

    /* (en) format expandable input */
    /* (de) Formatierung expandierender Input-Felder */
    /*------------------------------------------------------------------------------------------------------*/
    .searchbox-wrapper {
        width: 100%;
        overflow: hidden;
        margin: 0 0 24px 0;
    }

    .searchbox {
        position: relative;
        min-width: 42px;
        width: 0;
        height: 34px;
        float: right;
        overflow: hidden;
        border-radius: 8px;
        -webkit-transition: width 0.3s;
        transition: width 0.3s;
        box-sizing: border-box;
        border: 1px solid transparent;
    }

    .searchbox-input {
        border-radius: 8px;
        color: #333333;
        display: block;
        font-size: 100%;
        line-height: 24px;
        margin-bottom: 24px;
        overflow: hidden;
        padding: 4px 44px 2px 8px;
        position: relative;
        border: 1px solid #e0e0e0;
        box-sizing: border-box;
    }

    .searchbox .custom-styled-button-with-input {
        top: 0;
        right: 0;
    }

    .searchbox-input input {
        border: none;
        background: transparent;
        width: 100%;
        outline: none;
    }

    .searchbox .searchbox-submit {
        width: 20px;
        height: 20px;
        display: block;
        position: absolute;
        right: 0;
        top: 0;
        margin: 0;
        border: 0;
        outline: none;
        line-height: inherit;
        text-align: center;
        cursor: pointer;
        border-radius: 8px;
    }

    .searchbox-open {
        width: 100%;
    }

    .searchbox-open .searchbox-input {
        display: block;
    }

    /* (en) Dropdown Button */
    /* (de) Auswahlliste Schaltfläche */
    /*------------------------------------------------------------------------------------------------------*/
    .dropdown {
        position: relative;
        display: inline-block;
    }

    .dropdown-100 {
        position: relative;
        display: block
    }

    .dropdown-button {
        background: #6482be;
        color: #fff;
        padding: 4px 32px 4px 8px;
        cursor: pointer;
        margin: 0 0 24px 0;
        line-height: 24px;
        border-radius: 8px;
        transition: all ease 0.3s;
        height: 32px;
        -webkit-transition: all ease 0.3s;
    }

    .half-padding .dropdown-button {
        margin: 0 0 12px 0;
    }

    .dropdown-100 .dropdown-button {
        display: block;
        width: 100%;
    }

    .dropdown-button::after {
        font-family: 'Font Awesome 5 Free';
        font-weight: 300;
        content: '\f107';
        position: absolute;
        right: 10px;
        top: 6px;
        width: auto;
        text-align: left;
        background: transparent;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-transition: transform 300ms ease 0s;
        -webkit-transition: -webkit-transform 300ms ease 0s;
        transition: -webkit-transform 300ms ease 0s;
        transition: transform 300ms ease 0s, -webkit-transform 300ms ease 0s;
        transform: rotate(0deg);
    }

    .dropdown-button.ellipsis-v-icon {
        padding: 4px 8px;
    }

    .dropdown-button.ellipsis-v-icon::after {
        content: '';
    }

    .dropdown-button:hover {
        background: #0d0d6e;
    }

    .show .dropdown-button {
        border-radius: 8px 8px 0 0;
    }

    .show .dropdown-button::after {
        -webkit-transform: rotate(-179.999deg);
        transform: rotate(-179.999deg);
    }

    .dropdown-content {
        display: none;
        position: absolute;
        margin: -24px 0 0 0;
        background: #ffffff;
        border-radius: 0 0 8px 8px;
        min-width: 160px;
        box-shadow: 5px 5px 4px 0 rgba(0, 0, 0, 0.2);
        z-index: 1;
        overflow: hidden;
        white-space: nowrap;
        border: 1px solid #e0e0e0;
        box-sizing: border-box;
    }

    .half-padding .dropdown-content {
        margin: -12px 0 0 0;
    }

    .dropdown-content > button,
    .dropdown-content > a,
    .dropdown-content > span,
    .dropdown-content > a:visited,
    .dropdown-content > a:focus,
    .dropdown-content > a:active {
        color: #333333;
        padding: 4px 8px;
        text-decoration: none;
        display: block;
        line-height: 24px;
        width: 100%;
        box-sizing: border-box;
    }

    .dropdown-content > a:hover,
    .dropdown-content > button:hover {
        background: #0d0d6e;
        color: #fff;
        border-color: transparent;
    }

    .dropdown-content .checkbox {
        display: inline-block;
        height: 18px;
    }

    .show .dropdown-content {
        display: block;
    }

    .custom-styled-dropdown .dropdown {
        margin: 0 24px 0 0;
    }

    .half-padding .custom-styled-dropdown .dropdown {
        margin: 0 12px 0 0;
    }

    .custom-styled-dropdown .dropdown-content {
        min-width: 100%;
    }

    .dropdown-content .checkbox.float-left,
    .dropdown-content .radio.float-left {
        margin: 0 36px 0 0;
    }

    /* (en) format elements in form GUIs */
    /* (de) Formatierung von Elementen in Formular-GUIs */
    /*------------------------------------------------------------------------------------------------------*/
    .grid-element {
        margin-bottom: 24px;
    }

    .half-padding .grid-element,
    .half-padding .float-col > label,
    .half-padding .float-col > span,
    .half-padding .searchbox-wrapper,
    .half-padding .custom-styled-input,
    .half-padding .custom-styled-result,
    .half-padding [class*=custom-styled-button] > span,
    .half-padding .custom-styled-button [class*=button],
    .half-padding .custom-styled-button-box [class*=button],
    .half-padding .custom-styled-button-box-right [class*=button],
    .half-padding .custom-styled-button-box-center [class*=button],
    .half-padding .custom-styled-button-100 [class*=button],
    .half-padding .custom-styled-button-100-center [class*=button],
    .half-padding .flow-inline .custom-styled-label,
    .half-padding .flow-inline .custom-styled-label-right,
    .half-padding .flow-inline .custom-styled-label-center,
    .half-padding .flex-tile-default .custom-styled-label,
    .half-padding .flex-tile-default .custom-styled-label-right,
    .half-padding .flex-tile-default .custom-styled-label-center {
        margin-bottom: 12px;
    }

    .half-padding .checkbox-radio-group {
        margin-bottom: 6px;
    }

    .half-padding .custom-styled-button-box-right > * {
        margin-left: 12px;
    }

    .half-padding .custom-styled-button-box > * {
        margin-right: 12px;
    }

    .half-padding .custom-styled-button-box-middle {
        margin: 0;
    }

    .grid-favorite-wrapper {
        padding-right: 35px;
        position: relative;
    }

    .grid-favorite,
    .grid-favorite[class*="tooltip-area"],
    .grid-favorite[class*="tooltip-popover"] {
        position: absolute;
        right: -1px;
        top: 3px
    }

    [class*="tooltip-area"].grid-favorite-pane {
        position: absolute;
        right: -4px;
        top: 2px
    }

    .form-group,
    .form-group * {
        white-space: nowrap;
    }

    .form-group .custom-styled-input {
        display: inline-block;
        width: 28px;
        overflow: inherit;
        padding: 0 4px;
    }

    table .form-group *,
    table .form-group .custom-styled-input {
        margin: 0;
    }

    div[class*="custom-styled-button"] .form-group {
        display: inline;
    }

    table .form-group .amount-controls {
        position: relative;
        padding: 0 14px 0 0;
    }

    table .form-group button {
        color: #0d0d6e;
    }

    table .form-group button:hover {
        color: #0d0d6e;
    }

    .responsive-table .form-group > a {
        padding: 0 12px 0 0;
    }

    /* (en) format elements in Inline-Flow Sections */
    /* (de) Formatierung von Elementen Inline-Flow Bereichen */
    /*------------------------------------------------------------------------------------------------------*/
    ul.flow-inline {
        margin: 0;
        font-size: 0;
        /*white-space: nowrap;*/
        display: block;
    }

    ul.flow-inline::before,
    ul.flow-inline::after {
        content: '';
        display: table;
        width: 100%;
    }

    .flow-center {
        text-align: center;
    }

    .flow-right {
        text-align: right;
    }

    .flow-inline > li {
        display: inline-block;
        vertical-align: top;
        text-align: left;
        max-width: 100%;
    }

    .flow-inline li > *,
    .flex-tile-default > * {
        display: block;
        vertical-align: middle;
        overflow: visible;
        float: left;
    }

    .flow-inline li > *::after,
    .flow-inline li > *::before,
    .flex-tile-default > *::after,
    .flex-tile-default > *::before {
        display: table;
        content: '';
    }

    .flow-inline > li > * > * {
        font-size: 15px;
        vertical-align: middle;
    }

    .flow-inline .custom-styled-label,
    .flex-tile-default .custom-styled-label {
        margin: 0 12px 24px 0;
        line-height: 32px;
        height: 32px;
    }

    .flow-inline .custom-styled-label-right,
    .flex-tile-default .custom-styled-label-right {
        margin: 0 0 24px 12px;
        line-height: 32px;
        height: 32px;
    }

    .flow-inline .custom-styled-label-center,
    .flex-tile-default .custom-styled-label-center {
        margin: 0 0 24px 0;
        line-height: 32px;
        height: 32px;
    }

    .flow-inline .checkbox > span,
    .flow-inline .radio > span,
    .flex-tile-default .checkbox > span,
    .flex-tile-default .radio > span {
        margin: 0 30px 6px 30px
    }

    /* (en) format form elements in head area */
    /* (de) Formatierung von Form-Elementen im Head-Bereich */
    /*------------------------------------------------------------------------------------------------------*/
    .nav-top-toggle .custom-styled-button-box .button {
        border-radius: 0 0 8px 8px;
        margin: 0;
        width: 42px;
        height: 42px;
    }

    .nav-top > [class*=custom-styled-] .button {
        margin-bottom: 0;
    }

    .nav-top > [class*=custom-styled-] .button {
        background: #fff;
        border-color: #e0e0e0;
        padding: 2px 6px;
        color: #6482be;
        display: inline-block;
    }

    .nav-top > [class*=custom-styled-] .button:hover {
        color: #0d0d6e;
        background: #e6f0ff;
    }

    .nav-top > .custom-styled-drop {
        width: 160px;
        margin: 0 0 0 24px;
    }

    .half-padding .nav-top > .custom-styled-drop {
        margin: 0 0 0 12px;
    }

    .nav-top > [class*=custom-styled-] {
        display: inline-block;
        vertical-align: top;
    }

    #nachrichtSendenForm .custom-styled-input,
    #kontaktForm .custom-styled-input,
    #loginForm .custom-styled-input,
    #requestPasswordForm .custom-styled-input {
        height: auto;
    }

    #nachrichtSendenForm .custom-styled-input label.error,
    #kontaktForm .custom-styled-input label.error,
    #loginForm .custom-styled-input label.error,
    #requestPasswordForm .custom-styled-input label.error {
        color: red;
    }

    /* (en) reCAPTCHA formatting */
    /* (de) reCAPTCHA Formatierung */
    /*------------------------------------------------------------------------------------------------------*/
    .recaptcha {
        margin: 0;
    }

    .recaptcha-right {
        text-align: right;
    }

    [class*=recaptcha] > #rc-imageselect,
    [class*=recaptcha] > .g-recaptcha {
        transform: scale(0.76);
        -webkit-transform: scale(0.76);
        transform-origin: 0 0;
        -webkit-transform-origin: 0 0;
    }

    .recaptcha-right > #rc-imageselect,
    .recaptcha-right > .g-recaptcha {
        transform-origin: 100% 0;
        -webkit-transform-origin: 100% 0;
        display: inline-block;
    }

    [class*=recaptcha] .dropdown-content {
        padding: 6px;
    }

    .form-element-wrapper {
        padding: 24px;
    }

    .brochure-image-wrapper {
        margin-top: -200px;
        margin-bottom: -50px;
        margin-left: -140px;
        min-width: 300px;
        padding-bottom: 60px
    }
}

/*------------------------------------------------------------------------------------------------------*/
/* (en) Media Query 980 */
/* (de) Media Query 980 */
/*------------------------------------------------------------------------------------------------------*/

@media screen and (max-width: 980px) {
    .nav-top > [class*=custom-styled-] {
        float: none;
        display: inline-block;
        vertical-align: top;
    }

    .nav-top > .custom-styled-drop,
    .half-padding .nav-top > .custom-styled-drop {
        margin: 0 6px 12px 6px;
    }

    .nav-top > [class*=custom-styled-button] button,
    .half-padding .nav-top > [class*=custom-styled-button] {
        margin: 0;
    }

    .nav-top > [class*=custom-styled-] {
        text-align: center;
    }

    .nav-top > [class*=custom-styled-] .button,
    .half-padding .nav-top > [class*=custom-styled-] .button {
        margin: 0 6px 12px 6px;
    }

    .nav-top > [class*=custom-styled-] .button.button-group,
    .nav-top > [class*=custom-styled-] .button.button-group-end {
        margin: 0 6px 12px -7px;
    }

    .form-element-wrapper {
        padding: 12px;
    }

}

/*------------------------------------------------------------------------------------------------------*/
/* (en) Media Query 850 */
/* (de) Media Query 850 */
/*------------------------------------------------------------------------------------------------------*/

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

    .list-to-select {
        display: none;
        margin: 12px 24px;
    }

    .linearize-level-1 .flow-inline.flow-right {
        text-align: left;
    }

    .linearize-level-1.flow-inline > li {
        display: block;
    }

    .linearize-level-1.linearize-center .flow-inline,
    .linearize-level-1.linearize-center .flow-inline.flow-right {
        text-align: center;
    }

    .form-group,
    .form-group * {
        text-align: center;
    }

    .brochure-image-wrapper {
        margin-top: -150px;
        margin-bottom: 0;
        margin-left: -140px;
        min-width: 320px;
    }

}

/*------------------------------------------------------------------------------------------------------*/
/* (en) Media Query 560 */
/* (de) Media Query 560 */
/*------------------------------------------------------------------------------------------------------*/

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

    .grid-element,
    .float-col > label,
    .float-col > span,
    .searchbox-wrapper,
    .dropdown-button,
    .custom-styled-input,
    .custom-styled-result,
    [class*=custom-styled-button] > span,
    .custom-styled-button [class*=button],
    .custom-styled-button-box [class*=button],
    .custom-styled-button-box-right [class*=button],
    .custom-styled-button-box-center [class*=button],
    .custom-styled-button-100 [class*=button],
    .custom-styled-button-100-center [class*=button],
    .flow-inline .custom-styled-label,
    .flow-inline .custom-styled-label-right,
    .flow-inline .custom-styled-label-center,
    .flex-tile-default .custom-styled-label,
    .flex-tile-default .custom-styled-label-right,
    .flex-tile-default .custom-styled-label-center,
    .grid-element,
    .list-to-select.custom-styled-input.custom-styled-select {
        margin-bottom: 12px;
    }

    .flow-inline .custom-styled-label,
    .flow-inline .custom-styled-label-right,
    .flow-inline .custom-styled-label-center,
    .flow-inline .custom-styled-button-box [class*="button"],
    .flow-inline .custom-styled-button-box-right [class*="button"],
    .flow-inline .custom-styled-button-box-center [class*="button"],
    .flex-tile-default .custom-styled-label,
    .flex-tile-default .custom-styled-label-right,
    .flex-tile-default .custom-styled-label-center,
    .flex-tile-default .custom-styled-button-box [class*="button"],
    .flex-tile-default .custom-styled-button-box-right [class*="button"],
    .flex-tile-default .custom-styled-button-box-center [class*="button"] {
        margin-left: 6px;
        margin-right: 6px;
    }

    .checkbox-radio-group {
        margin-bottom: 6px;
    }

    .custom-styled-button-box > * {
        margin: 0 12px 12px 0;
    }

    .custom-styled-button-box-right > * {
        margin: 0 0 12px 12px;
    }

    .custom-styled-button-100 > *,
    .custom-styled-button-100-center > * {
        margin: 0 0 12px 0;
    }

    .linearize-level-2.linearize-center .flow-inline,
    .linearize-level-2.linearize-center .flow-inline.flow-right {
        text-align: center;
    }

    .linearize-level-2 .flow-inline.flow-right {
        text-align: left;
    }

    .linearize-level-2.flow-inline > li {
        display: block;
    }

    [class*=custom-styled-button] > [class*=button].linearize,
    [class*=custom-styled-button] > span.linearize,
    [class*=dropdown].linearize,
    [class*=dropdown].linearize .button,
    [class*=dropdown].linearize button {
        display: block;
        margin-left: 0;
        margin-right: 0;
        text-align: center;
    }

    [class*=custom-styled-button] > button[class*=button].linearize {
        width: 100%;
    }

    .custom-styled-dropdown .dropdown {
        display: block;
        margin: 0;
    }

    .dropdown-button {
        width: 100%;
    }

    .dropdown-content {
        margin: -12px 0 0 0;
    }

    .list-to-select {
        margin: 12px;
    }

    .brochure-image-wrapper {
       display: none;
    }
}