/**
 * (en) Uniform design of form elements
 * (de) Einheitliche Standardformatierungen für Formular-Elemente
 *
 * @copyright			Copyright 2015, 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: #1d374a;
    }

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

    /* Chrome */
    progress::-webkit-progress-value {
        background-color: #1d374a;
    }

    /* Firefox */
    progress::-moz-progress-bar {
        background-color: #1d374a;
    }

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

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

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

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

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

    /* (en) format form element label and containers */
    /* (de) Formatierung von Form-Element Bezeichnungen und Containern */
    /*------------------------------------------------------------------------------------------------------*/
    button {
        font-family: 'Univers LT Light', sans-serif;
        cursor: pointer;
        outline: none;
        border: none;
        text-align: left;
        background: transparent;
        color: #000000;
    }

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

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

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

    label {
        position: relative;
    }

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

    .select2-style-label {
        line-height: 24px;
    }

    .select2-style-label label {
        display: inline;
    }

    .select2-style-input,
    .select2-style-result {
        display: block;
        position: relative;
        font-size: 100%;
        line-height: 22px;
        border-radius: 0;
        padding: 4px 8px;
        margin-bottom: 24px;
        background: #eff0f0;
        color: #000000;
        border: 1px solid #eff0f0;
    }

    .half-padding .no-padding .select2-style-input {
        display: block;
        position: relative;
        font-size: 100%;
        line-height: 22px;
        border-radius: 0;
        padding: 4px 8px;
        margin: 0;
        background: #ffffff;
        color: #ffffff;
        border: 1px solid #ffffff;
    }

    .no-padding .select2-style-input input,
    .no-padding .select2-style-input input:hover,
    .no-padding .select2-style-input input:active,
    .no-padding .select2-style-input input:focus {
        background: #ffffff;
    }

    .no-padding .select2-style-button-with-input button:hover {
        background: #1d374a;
        border: 1px solid #1d374a;
        color: #fff;
    }

    .select2-style-result {
        display: inline-block;
        margin: 0 0 0 8px;
    }

    .select2-style-input.icon-button {
        padding-right: 44px;
    }

    .select2-style-input.icon-button.lg-input {
        padding-right: 44px;
    }

    .select2-style-input.icon-button.lg-input input {
        font-size: 22px;
        line-height: 28px;
    }

    .select2-style-input.icon-button.lg-input button {
        height: 38px;
        width: auto;
    }

    .select2-style-input.icon-button.lg-input button[class*='icon']:before {
        font-size: 20px;
        line-height: 30px;
    }

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

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

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

    :-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 #eff0f0 inset;
    }

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

    .select2-style-input.inline-icon .fa,
    .select2-style-input.inline-icon .far {
        position: absolute;
        left: 12px;
        top: 6px;
    }

	/* (en) format radio und checkbox elements	*/
	/* (de) Formatierung von Radio- und Checkbox-Elementen */
	/*------------------------------------------------------------------------------------------------------*/

		.checkbox-radio-group {
			margin: 0 0 24px 0;
			line-height: 24px;
    }

		.checkbox-radio-group p.default {
			line-height: 18px;
    }

    .checkbox-radio-group .float-col.float-col-text {
        margin: 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: 900;*/
		font-size: 22px;
		line-height: 22px;
		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 {
		margin-left: 32px;
		display: inline-block;
	}

	.checkbox label,
	.radio label {
		background: #eff0f0;
		border-radius: 0;
		cursor: pointer;
		height: 20px;
		width: 20px;
		position: absolute;
        z-index: 1;
		top: 2px;
		-webkit-transition: background-color 0.3s ease 0s;
		transition: background-color 0.3s ease 0s;
	}

	.box-bottom-100-content .box-bottom-100-content .checkbox label,
	.box-bottom-100-content .box-bottom-100-content .radio label,
	.grid-element .box-wrapper-100 .checkbox label,
	.grid-element .box-wrapper-100 .radio label {
		background: #fff;
	}


	.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: #fff;
		border-style: none none solid solid;
		border-width: medium medium 3px 3px;
		content: "";
		height: 5px;
		width: 9px;
		left: 4px;
		top: 4px;
		opacity: 0;
		position: absolute;
		/* Force Hardware Acceleration */
		-webkit-transform: translateZ(0);
		transform: translateZ(0);
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
		-webkit-transform: rotate(-45deg);
		transform: rotate(-45deg);
		-webkit-transition: opacity 0.3s ease 0s;
		transition: opacity 0.3s ease 0s;
	}

	.radio-item,
	.radio-item-disabled,
	.radio-item-checked,
	.radio-item-checked-disabled {
		position: absolute;
	}

	.radio-item + label,
	.radio-item-disabled + label,
	.radio-item-checked + label,
	.radio-item-checked-disabled + label {
		z-index: -1;
	}
	.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: #1d374a;
	}

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

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

	.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,
	.radio input[type="radio"]:checked + label,
	.grid-element .box-wrapper-100 .radio span.radio-item-checked + label {
		background: #1d374a;
	}

	.checkbox input[type="checkbox"]:disabled + label,
	.radio input[type="radio"]:disabled + label,
	.grid-element .box-wrapper-100 .radio .radio-item-disabled + label,
	.checkbox input[type="checkbox"]:disabled + label:hover,
	.radio input[type="radio"]:disabled + label:hover,
	.grid-element .box-wrapper-100 .radio .radio-item-disabled + label:hover {
        background: rgba(29, 55, 74, 0.6);
        cursor: not-allowed;
    }

	.checkbox input[type="checkbox"]:checked:disabled + label::after,
	.radio input[type="radio"]:checked:disabled + label::after,
	.grid-element .box-wrapper-100 .radio .radio-item-checked-disabled + label::after,
	.checkbox input[type="checkbox"]:checked:disabled + label:hover::after,
	.radio input[type="radio"]:checked:disabled + label:hover::after,
	.grid-element .box-wrapper-100 .radio .radio-item-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,
	.grid-element .box-wrapper-100 .radio .radio-item-disabled + label::after,
	.checkbox input[type="checkbox"]:disabled + label:hover::after,
	.radio input[type="radio"]:disabled + label:hover::after,
	.grid-element .box-wrapper-100 .radio .radio-item-disabled + label:hover::after {
		border-color: transparent;
	}

	.checkbox input[type="checkbox"]:checked + label::after,
	.radio input[type="radio"]:checked + label::after,
	.grid-element .box-wrapper-100 .radio .radio-item-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,
	.radio.float-left {
		float: left;
		margin: 0 32px 24px 0;
	}

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

    .select2-style-input.textarea textarea,
    .select2-style-input.textarea:focus textarea,
    .select2-style-input.textarea:hover textarea {
        height: 88px;
    }

    textarea.textarea-noresize {
        resize: none;
    }

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

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

    /* (en) format of button elements */
    /* (de) Grundlagende Formatierung Schaltflächen-Elementen */
    /*------------------------------------------------------------------------------------------------------*/
    br + .button {
        margin-top: 6px;
    }

    .button,
    a.button:visited,
    a.button:active,
    a.button:focus {
        font-family: 'Univers LT Light', sans-serif;
        line-height: 22px;
        border-radius: 0;
        padding: 4px 12px;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        display: inline-block;
        background: rgba(29, 55, 74, 0.6);
        border: 1px solid rgba(29, 55, 74, 0);
        color: #ffffff;
    }

    .button.button-small {
        padding: 2px 12px;
    }

    .button:hover,
    a.button:hover {
        background: #1d374a;
        border: 1px solid #1d374a;
        color: #ffffff;
    }

    .link-inactive,
    .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: 'Univers LT Light', sans-serif;
        cursor: default;
        display: inline-block;
        line-height: 22px;
        height: 32px;
        vertical-align: bottom;
        border-radius: 0;
        padding: 4px 12px;
        color: #fff;
        -webkit-transition: all 0.3s ease;
        transition: all 0.3s ease;
        box-sizing: border-box;
        background: #eff0f0;
        color: #1d374a;
        border: 1px solid #eff0f0;

        pointer-events: none;
    }

    .button-inactive:hover,
    .button[disabled]:hover {
        background: #eff0f0;
        border: 1px solid #eff0f0;
        color: #1d374a;
    }

    div[class*=select2-style-button] {
        font-size: 0;
    }

    div[class*=select2-style-button]::after,
    div[class*=select2-style-button]::before {
        content: ' ';
        display: table;
    }

    div[class*=select2-style-button].float-col {
        font-size: inherit;
    }

    div[class*=select2-style-button] > * {
        font-size: 12px;
    }

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

    .select2-style-button-box > br {
        margin: 0;
    }

    .select2-style-button-box-right {
        text-align: right;
    }

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

    .select2-style-button-box-center > * {
        margin: 0 0 24px 0;
        text-align: left;
    }

    .select2-style-button-box-center > * + * {
        margin: 0 0 24px 24px;
    }

    .select2-style-button-box-with-text > * {
        margin: 0 0 24px 0;
        float: left;
    }

    .select2-style-button-box-with-text > span {
        padding: 4px 6px;
    }

    .select2-style-button-box-center *,
    .select2-style-button-100-center *,
    .select2-style-button-100-center {
        text-align: center;
    }

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

    .select2-style-button-100 > button,
    .select2-style-button-100-center > button {
        width: 100%;
    }

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

    .float-col.select2-style-button-box > a,
    .float-col.select2-style-button-box > span {
        margin-top: 4px;
    }

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

    .select2-style-button-with-file-upload {
        display: inline-block;
        position: absolute;
        left: -1px;
        top: -1px;
        border-radius: 0;
    }

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

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

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

    /* (en) format select element */
    /* (de) Formatierung des Select-Elements */
    /*------------------------------------------------------------------------------------------------------*/
    .custom-select {
        position: relative;
        z-index: 1;
        padding: 4px 8px;
        height: 22px;
        display: block;
    }

    .custom-select:before {
        display: block;
        font-family: 'Font Awesome 5 Free';
        /*font-weight: 900;*/
        content: '\f107';
        font-size: 1em;
        height: 100%;
        line-height: 2.4em;
        padding: 0 0.625em;
        position: absolute;
        top: 0;
        right: 0;
        text-align: center;
        width: 1em;
        z-index: -1;
        color: #000000;
    }

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

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

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

    :-moz-any(.custom-select):before {
        /* this is necessary for overcome the caret default browser */
        background: #eff0f0;
        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 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 .select2-container,
    .half-padding .select2-style-input,
    .half-padding .select2-style-result,
    .half-padding .select2-style-button [class*=button],
    .half-padding .select2-style-button-box [class*=button],
    .half-padding .select2-style-button-box-right [class*=button],
    .half-padding .select2-style-button-100 [class*=button],
    .half-padding .select2-style-button-100-center [class*=button],
    .half-padding .select2-style-button-box-with-text [class*=button],
    .half-padding .checkbox-radio-group {
        margin-bottom: 12px;
    }

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

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

    .half-padding .select2-style-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;
        vertical-align: middle;
    }

    .form-group .select2-style-input {
        display: inline-block;
        width: 42px;
        overflow: inherit;
        padding: 0 4px;
    }

    table .form-group *,
    table .form-group .select2-style-input {
        margin: 0;
    }

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

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

    table .form-group button {
        color: #1d374a;
    }

    table .form-group button:hover {
        color: #1d374a;
    }

    table .form-group .amount-controls > * {
        display: inline-block;
        position: absolute;
        left: 0;
        line-height: 8px;
    }

    table .form-group .amount-controls span.fa,
    table .form-group .amount-controls span.far {
        line-height: 8px;
    }

    table .form-group .amount-controls .up {
        top: 0;
    }

    table .form-group .amount-controls .down {
        bottom: 0;
    }

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

    .flow-inline:after {
        content: "";
        display: table;
        clear: both;
    }

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

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

    .flow-inline > li {
        display: inline-block;
        vertical-align: middle;
        text-align: left;
    }

    .flow-inline li > * {
        display: inline-block;
        vertical-align: middle;
    }

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

    .flow-inline .select2-style-label {
        margin: 0 12px 12px 0;
    }

    .flow-inline .select2-style-label-right {
        margin: 0 0 12px 12px;
    }

    .flow-inline .select2-style-label span {
        display: block;
        padding: 4px 0;
    }

    .flow-inline .select2-container {
        width: auto;
        min-width: 72px;
    }

    /* (en) format form elements in head area */
    /* (de) Formatierung von Form-Elementen im Head-Bereich */
    /*------------------------------------------------------------------------------------------------------*/
    .topnav-toggle .select2-style-button-box .button {
        border-radius: 0 0 4px 4px;
        margin-right: 0;
    }

    #topnav .select2-style {
        float: right;
        margin: 0 0 24px 24px;
        width: 218px;
    }

    #topnav .select2-style .select2-container {
        margin: 0;
    }

    #topnav .select2-style-button-box {
        margin: 0 0 24px 24px;
        float: right;
    }

    #topnav .select2-style-button-box .button,
    .select2-style-button-with-input .button {
        margin: 0;
    }

    #topnav .select2-style-input.custom-select {
        padding: 4px 8px;
        float: right;
    }

    #topnav .select2-style-input.language {
        padding-left: 30px;
        width: 180px;
        margin-left: 24px;
    }

    #topnav .select2-style-input.language span {
        position: absolute;
        left: 9px;
        top: 9px;
    }

    #topnav .select2-style-input #search {
        width: 100%;
    }

    #nachrichtSendenForm .select2-style-input,
    #kontaktForm .select2-style-input,
    #loginForm .select2-style-input,
    #requestPasswordForm .select2-style-input {
        height: auto;
    }

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

    .fluid-width-video-wrapper {
        padding-top: 50% !important;
    }

    /* (en) format upload area */
    /* (de) Formatierung des Upload-Bereichs */
    /*------------------------------------------------------------------------------------------------------*/
    .upload-area {
        background: #fff;
        border-radius: 0;
        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: 0;
        /*box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);*/
        display: inline-block;
        font-size: 12px;
        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: 0;
        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: 900;*/
        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: 0;
        height: 4px;
        min-height: 4px;
        width: 0;
        display: block;
        background: #001489;
        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: #1d374a;
    }

    .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: 0;
        width: 0%;
        height: 100%;
        display: block;
        margin: 0 !important;
        background: #001489;
        -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: 38px;
        width: 0%;
        height: 32px;
        float: right;
        overflow: hidden;
        border-radius: 0;
        -webkit-transition: width 0.3s;
        transition: width 0.3s;
    }

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

    .searchbox .select2-style-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: 0;
    }

    .searchbox-open {
        width: 100%;
    }

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

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

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

    .dropdown-button::after {
        font-family: 'Font Awesome 5 Free';
        /*font-weight: 900;*/
        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,
    .dropdown-button:focus {
        background: #1d374a;
    }

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

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

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

    .dropdown-content {
        display: none;
        position: absolute;
        margin: -24px 0 0 0;
        background: #eff0f0;
        border-radius: 0;
        min-width: 200px;
        /*box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);*/
        z-index: 1;
        /*overflow: hidden;*/
        white-space: nowrap;
    }

    .dropdown-content > button,
    .dropdown-content > a,
    .dropdown-content > span,
    .dropdown-content > a:visited,
    .dropdown-content > a:focus,
    .dropdown-content > a:active {
        color: #1d374a;
        padding: 4px 8px;
        text-decoration: none;
        display: block;
    }

    .dropdown-content > a:hover,
    .dropdown-content > button:hover {
        background: #1d374a;
        color: #fff
    }

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

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

    .select2-style-dropdown .dropdown {
        margin: 0 24px 0 0;
    }

    .select2-style-dropdown .dropdown-content {
        min-width: 100%;
    }

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

    [class*='select2-style-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*='select2-style-button'] > [class*='button']:active:after,
    .slider-wrapper h1 a:active:after,
    .filter-item .button:active:after {
        transform: scale(0, 0);
        opacity: .2;
        transition: 0s;
    }

    form[name='contactform'] .select2-container {
        margin-bottom: 0;
    }

    form[name='contactform'] .select2-style-input.land-container {
        border: 0;
        padding: 0;
    }
}

/* (en) AddSearch */
/* (de) AddSearch */
/*------------------------------------------------------------------------------------------------------*/

.search-result-screen-capture {
    /*box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);*/
    max-height: 175px;
    max-width: 100%;
    width: auto;
    overflow: hidden;
    display: inline-block;
    margin: 0 0 24px 0;
}

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

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

    #topnav .select2-style {
        width: 198px;
    }

    #topnav .select2-style-input.language {
        width: 160px;
    }

}

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

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

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

    .half-padding .linearize-level-1 > [class*='ym-g'] > [class*='ym-g'] > .select2-style-button-box [class*=button],
    .half-padding .linearize-level-1 > [class*='ym-g'] > [class*='ym-g'] > .select2-style-button-box-right [class*=button] {
        display: block;
        margin-left: 0;
        margin-right: 0;
        text-align: center;
    }

    .half-padding .linearize-level-1 > [class*='ym-g'] > [class*='ym-g'] > .select2-style-button-box button,
    .half-padding .linearize-level-1 > [class*='ym-g'] > [class*='ym-g'] > .select2-style-button-box-right button {
        width: 100%;
    }

    .half-padding .float-right {
        float: none;
    }

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

}

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

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

    #topnav .select2-style {
        margin: 0 12px 12px 0;
        float: left;
    }

    #topnav .select2-style-button-box {
        margin: 0 0 12px 0;
    }

    #topnav .select2-style-input.language {
        float: left;
        margin-left: 0;
    }

    #topnav .select2-style-button-box {
        float: left;
        margin: 0 12px 12px 0;
    }

    .grid-element,
    .float-col > label,
    .float-col > span,
    .searchbox-wrapper,
    .select2-container,
    .select2-style-input,
    .select2-style-result,
    .select2-style-button [class*=button],
    .select2-style-button-box [class*=button],
    .select2-style-button-box-right [class*=button],
    .select2-style-button-100 [class*=button],
    .select2-style-button-100-center [class*=button],
    .select2-style-button-box-with-text [class*=button],
    .checkbox-radio-group {
        margin-bottom: 12px;
    }

    .select2-style-button-box > * {
        margin: 0 12px 12px 0;
    }

    .select2-style-button-box-right > * {
        margin: 0 0 12px 12px;
    }

    .select2-style-button-box-center > * {
        margin: 0 0 12px 0;
    }

    .select2-style-button-box-center > * + * {
        margin: 0 0 12px 12px;
    }

    .select2-style-button-box-with-text > * {
        margin: 0 0 12px 0;
    }

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

    .grid-element {
        margin-bottom: 12px;
    }

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

    .half-padding .linearize-level-2 > [class*='ym-g'] > [class*='ym-gbox'] > .select2-style-button-box [class*=button],
    .half-padding .linearize-level-2 > [class*='ym-g'] > [class*='ym-gbox'] > .select2-style-button-box-right [class*=button] {
        display: block;
        margin-left: 0;
        margin-right: 0;
        text-align: center;
    }

    .list-to-select.select2-style-input.custom-select {
        margin-bottom: 12px;
    }

    [class*=select2-style-button] > [class*=button].linearize {
        display: block;
        margin-left: 0;
        margin-right: 0;
        text-align: center;
    }

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

    .checkbox-radio-group.float .float-col {
        width: 100%;
        margin: 0 0 4px 0;
    }

    .select2-style-dropdown .dropdown {
        display: block;
        margin: 0;
    }

    .dropdown-button {
        width: 100%;
    }

}