/* ############################################################################################# */
/* eigenes Loading Symbol */
/* ############################################################################################# */

/*EN: Loading symbol - position and background color*/
/*DE: Ladesymbol - Position und Hintergrundfarbe*/
.loading {
	display: none;
	position: fixed;
	z-index: 1000;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background-color: var(--white);
	background-position: 50% 50%;
	background-repeat: no-repeat;
}

/*EN: Contents of the symbol - cut off, no scroll bar*/
/*DE: Inhalt des Symbols - abgeschnitten, kein Scrollbalken*/
form.xm-loading {
	overflow: hidden;
}

form.xm-loading .loading {
	display: block;
}

/*EN: Integration of the individual charging symbol*/
/*DE: Einbindung des individuellen Ladesymbols*/
.loading .animation {
	background-image:  url('/includes/ressource?mid=102&name=bkk24-logo.svg');  
    height: 60%;
	background-repeat: no-repeat;
	background-position: center;
	-webkit-animation: scale-up-center 1000ms infinite alternate-reverse both;
	        animation: scale-up-center 1000ms infinite alternate-reverse both;
}

/*EN: Scaling while loading*/
/*DE: Skalierung beim Laden*/
@-webkit-keyframes scale-up-center {
  0% {
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@keyframes scale-up-center {
  0% {
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
/* ############################################################################################# */

/* Farbe für Eingabefelder */
.modern .XItem.XTextField {
	color: var(--grey-080) !important;
}

.modern .XItem .text-bold {
    font-weight: 600;
}

.modern .XItem .text-italic {
    font-style: italic;
}

.modern .XItem .text-color-red {
    color: var(--red-100);
}

.modern .XItem .text-color-green {
    color: #1e824c;
}

.modern .XItem .text-color-grey {
    color: var(--grey-050);
}



.modern .XItem .item-width-10-percent {
    width:10%;
}
.modern .XItem .item-width-20-percent {
    width:20%;
}
.modern .XItem .item-width-40-percent {
    width:40%;
}
.modern .XItem .item-width-60-percent {
    width:60%;
}
.modern .XItem .item-width-80-percent {
    width:80%;
}
.modern .XItem .item-width-year-field {
    width:70px;
}
.modern .XItem .item-width-date-field {
    width:110px;
}
.modern .XItem .item-width-datetime-field {
    width:150px;
}

.modern .img-upload-preview {
    display: block;
    max-width: 250px !important;
}

.modern .xm-item-div .xm-del-button-icon::before {
    content:  "\f057";
    font-family: 'FontAwesomeCB';
    font-size: 21px;
    background-image: none;
}

.modern .xm-item-div .add-button::after {
    content: "\f055";
    font-family: 'FontAwesomeCB';
    font-size: 21px;
    background-image: none;
}

.circle-plus::after {
    content: "\f055";
    font-family: 'FontAwesomeCB';
    font-size: 21px;
    background-image: none;
    bottom: -2px !important;
    position: relative;
}

.CXImage.logo-header {
    height: 150px;
    width:auto;
    margin: 5px 20px;
    padding: 0;
    border:none;
}

/* Hilfe-Icon */
.modern .xm-help-container {
    position: relative;
    right: 0px;
    margin-top:0;
    /*padding-top: 40px;*/
}

.modern .xm-help-icon.label-top {
    margin-top:0;
}

.modern .opt-div.opt-layout-checkbox1,
.modern .opt-div.opt-layout-radio1 {
    margin-bottom: 10px;
}

.modern .xm-help-icon::before {
    color: var(--grey-100);
}

.header, .footer, .modern .CXPage {
    background-repeat: no-repeat;
    background-size:cover;
    background-color:transparent;
    border: none;
}

.modern .XFooter,
.modern .XHeader {
    padding: 0 50px;
}

.modern .XHeader .xm-form-row .CXSpan {
    padding-top: 0;
}

.modern .XHeader:not(:empty),
.modern .XFooter:not(:empty) {
    padding-bottom: 0;
}

.modern h1, .modern h2, .modern h3, .modern h4 {
    font-family: 'Univers_LT_Bold' ,sans-serif;
    color: var(--grey-080);
    display: block;
}

.modern h1 {
    color: var(--red-100);
    display: block;
    font-size: 42px;
    line-height: 42px;
    text-transform: uppercase;
}

.modern h2 {
    font-size: 24px;
    line-height: 27.2px;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
}

.modern h3 {
    font-size: 22.4px;
    line-height: 24px;
    margin: 0 0 0.7rem;
}

.modern h4 {
    font-family: 'Univers_LT_Condensed',-apple-system,Arial,sans-serif !important;
    font-weight: 600;
}


.modern h4,
.CXSelect label span.block {
	font-size: 16px;
    font-weight: 600 !important;
	margin-block-start: 0;
    margin-block-end: 0;
    font-family: 'Univers_LT_Condensed',-apple-system,Arial,sans-serif !important;
}

.modern h2 {
    font-weight: 600;
}

span.block {
    line-height: 20px;
}

.text-align-justify {
    text-align: justify;
}
.text-align-left {
    text-align: left;
}
.text-align-right {
    text-align: right;
}

.text-small,
.text-small * {
    font-size: 0.9em;
}

.text-weight-normal,
.CXCheckbox input.text-weight-normal + label {
    font-weight: 400 !important;
}


.dynamic-row .XItem.XContainer .CXFieldSet {
    padding: 0;
}

.dynamic-row .XItem.XContainer .CXFieldSet .XFieldSetWrapper {
    margin-top: 0!important;
}


.CXSelect .XSelect.XRadio:focus-within,
.CXSelect .XQuestTable:focus-within {
    background-color: transparent;
    outline: none;
}

.modern .XSelect  LABEL.opt-label-right {
    vertical-align: baseline;
}


/* Bezeichnung der Fieldsets */
.modern .XFieldSet LEGEND {
    font-family: 'Univers_LT_Bold' ,sans-serif;
    color: var(--grey-080, rgb(53,53,53));
	font-size: 18px;
    float: left;
	padding: 10px 10px 15px 10px;
	width:100%;
	background-color: transparent;
    border:none !important;
}

.modern .xm-item-div .XItem .submit {
        border:none ;
}

.modern .CXFieldSet {
    border-color: var(--grey-005, #f8f8f8);
	-moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
}

.modern .CXFieldSet .XFieldSetWrapper {
    margin-top: 0!important;
}

.modern .CXContainerInvisible .CXFieldSet {
    padding-left: 0;
    padding-right: 0;
}


.XNavigationBar .active .xnav-view,
.XNavigationBar .active-before .xnav-view {
    background-color: var(--red-100);
}


.XItem {
    font-size: 16px;
}

.modern .xm-item-div label,
.modern .xm-item-div label span.block,
.modern .CXPage .header h1,
.modern .CXPage .header h2,
.modern SPAN.required-star,
.modern .xm-error-text,
.modern .xm-progress-text {
    font-size: 16px;
    font-weight: 600;
}

.modern .xm-error-text {
    background-color: var(--red-100)!important;
    color: var(--white);
}

.modern .error-static-view.error-static-view-bubble .xm-error-icon:before {
    top: -6px;
    left: 7px;
}

.modern .xm-item-div .xm-error-icon:before {
    color: var(--red-100)!important;
}

.modern .xm-error-text li {
    color: var(--white);
}

.CXCheckbox span,
.CXSelect .XSelect span,
.CXSelect .XSelect label {
    font-weight: 400;
}


.modern .xm-item-div .CXSelect .label-left .block {
	margin-right: 10px;
	font-weight: 400;
}


.bgYellow {
    background-color:rgba(255, 242, 204, 0.401)!important;
}

.bgBlue {
    background-color:rgba(143, 200, 252, 0.122)!important;
}

.bgGrey{
	background-color:rgba(248, 248, 248, 1.000)!important;
}

.bgWhite{
	background-color: var(--white)!important;
}

.bgNone{
	background-color:transparent!important;
}

.singleBorderGrey{
    border: solid 1px var(--grey-005, #f8f8f8);
}

.img-upload-preview {
	display: unset;
}
.img-upload-preview-none:after {
    top: 10px;
}

.modern .XTextField,
.modern select.XSelect {
    background-color: var( --grey-input, #e2e2e2);
    border: none;
    border-radius: 0;
}

.bgYellow .XTextField,
.bgYellow select.XSelect,
.bgBlue .XTextField,
.bgBlue select.XSelect {
    background-color: var(--white);
}

.CXContainer {
    padding: 15px 0 0 0;
}

/* verschachtelter Container */
.CXContainer .XContainer {
    background-color: var(--grey-005, #f8f8f8);
    border: none;
    border-radius: 0;
	margin: 0;
}

.CXContainer .XContainer .XTextField {
    background-color: var(--white);
}

.CXContainerInvisible {
    padding-bottom:15px !important;
    margin-bottom: 10px;
}


.CXTextField span {
	font-weight: 400;
}

DIV.xm-item-div {
    padding-top: 15px;
}

.modern .xm-item-div SPAN.required-star {
    margin: 5px;
    color: var(--grey-100, #000000);
}

.modern .XButtonList {
    border:none;
    border-radius: 0;
}

.XItem.XButtonList.XButton {
    color: var(--red-100);
}

.modern .XSelect.XList OPTION {
  height:30px;
  padding:7px 15px;
}

.modern .xm-item-div .XItem .XButton,
.modern .xm-item-div .XItem .submit,
.modern .xm-item-div .XItem .XSubmit {
    font-family: 'Univers_LT_Condensed',-apple-system,Arial,sans-serif !important;
    font-variant-caps: normal;
    color: var(--white);
    border: none;
    background-color: var(--red-100);
    text-transform: uppercase;
    /*border: 0.25px solid var(--red-100);*/
    height: 40px;
    padding: 8px 20px;
}
.modern .xm-item-div .XItem .XButtonList:Hover{
    background-color: var(--red-100); /*#3b3a39;*/
}
.modern .xm-item-div LABEL::before {
    color: var(--grey-080);
}
.modern .XItem,
.modern .xm-item-div input[type="checkbox"]:checked + label::before,
.modern .xm-item-div input[type="radio"]:checked + label::before,
.modern .xm-item-div input[type="ckeckbox"]:checked + label::before {
    color: var(--grey-080);
}

.modern .xm-item-div .xm-help-icon:before {
    content: "\f06a";
    font-family: 'Fontawesome900Solid';
    font-size: 20px;
    color:var(--grey-020, #CECECE);
}

.modern .xm-item-div .xm-help-icon:active {
    color:var(--red-080);
}

.modern .xm-item-div .opt-div:focus-within label {
    font-weight: 400;
}

/* #### Checkbox #### */

.modern .xm-item-div input[type=checkbox]+.label-icon-checkbox:before {
    font-family: "Fontawesome900Solid";
    content: "\f0c8";
    color: var(--grey-020);
    font-size: 20px;
}

.modern .xm-item-div input[type=checkbox]:visited+.label-icon-checkbox:before,
.modern .xm-item-div input[type=checkbox]:focus+.label-icon-checkbox:before {
    color: var(--grey-020);
}

.modern .xm-item-div input[type=checkbox]:checked+.label-icon-checkbox:before {
    color: var(--grey-100);
}

.modern .xm-item-div input[type=checkbox]:hover+.label-icon-checkbox:before {
    color: var(--grey-040);
}

.modern .xm-item-div.CXCheckbox input[type="checkbox"]+.label-icon-checkbox::before{
    margin-top: 4px; 
}

.modern .CXCheckbox .label-right .block a  {
    top: -2px;
    position: relative;
}

/* #### Radiobutton #### */
.modern .xm-item-div input[type=radio]+.label-icon-radio:before {
    font-family: "Fontawesome900Solid";
    content: "\f111";
    color:var(--grey-020);
    font-size: 20px;
}

.modern .xm-item-div input[type=radio]:visited+.label-icon-radio:before,
.modern .xm-item-div input[type=radio]:focus+.label-icon-radio:before  {
    color:var(--grey-020);
}

.modern .xm-item-div input[type=radio]:checked+.label-icon-radio:before  {
    color:var(--grey-100);
}

.modern .xm-item-div input[type=radio]:hover+.label-icon-radio:before  {
    color:var(--grey-040);
}

.modern .xm-item-div .XItem.simulatedLink:hover, a:hover {
    cursor: pointer;
}

.modern .xm-item-div .XItem.simulatedLink:visited, a:visited {
    color: var(--red-100);
}

input.input-currency {
    text-align: right;
}

.label-icon-radio {
    accent-color: var(--red-100);
}

.modern .xm-item-div LABEL.label-top {
    margin-bottom: 4px;
}

.modern .xm-item-div label span.block {
    font-weight:400;
}

.modern .XTextField {
    border:none;
    border-radius: 0;
}

.modern .xm-help-container:focus .xm-help-icon .xm-help-text,
.modern .xm-help-icon:hover .xm-help-text {
    background-color: var(--white);
    color: var(--grey-100);
}

.modern .xm-item-div SPAN.required-star {
    top: -3px;
    position: relative;
    line-height: inherit;
}

/*
.modern .xm-error-text li:before{
    font-family: 'Fontawesome900Solid';
    content: "\f062";
    margin-right:5px;
}
*/
.modern a {
    color: var(--red-1);
}


@media print {
    .modern .img-upload-preview {
        display: block;
        max-width: 250px !important;
    }
    .modern .XItem:disabled,.modern .XItem[readonly] {
        background: var(--grey-input, #e2e2e2)!important;
    }
}