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

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

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

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

.modern .XItem .text-color-green {
    color: var(--green-1);
}

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

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

.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 .XItem {
    outline-color: var(--main-red);
}

html, body {
  min-height: 100%;
}


body.body.modern  {
    background: linear-gradient(217deg, rgba(255, 255, 255, 1) 0%, rgba(197, 197, 197, 1) 100%);
    /* display: flex; // wenn aktiviert, dann wird der Content vertikal zentriert */
    /*justify-content: center;*/
    align-items: center;
    /*min-height: 100vh;*/
    margin: 0;
    padding: 10px;
    display: block;
    background-repeat: no-repeat;
}

@media screen {
    body.body.modern  {
        form.modern {
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
        }
    }
}

@media print {
    body.body.modern  {
        background: none;
    }
    .modern .CXContainer {
        padding: 15px 0 0 0;
    }
}

FORM.xm-form {
    padding: 0;
}

/*
body.modern  > div {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  width: 100%;
}*/

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

.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 {
    content: "\f055";
    font-family: 'FontAwesomeCB';
    font-size: 21px;
    background-image: none;
}

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

/* 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 .CXNavigationBar .label-top {
    font-size: 14px;
}

.modern .xm-help-icon::before {
    color: var(--main-red);
}

.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;
}



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;
}

/* Fieldset */
.CXFieldSet {
	border-color: var(--grey-2);
	-moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 3px;
}

.CXFooter {
    background-color: var(--white);
}

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

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

.XFieldSet {
    padding-bottom: 0px;
    padding-top: 0px;
    padding-left: 0px;
    padding-right: 0px;
    margin-top: 0px;
    border: none;
    background-color: transparent;
}


/* Bezeichnung der Fieldsets */
.XFieldSet legend {
	font-size: 16px;
    float: left;
	font-weight: 600;
	padding: 10px 10px 15px 10px;
	width:100%;
	background-color:transparent;
	margin-top:-25px;
	position: relative;
}

.CXFieldSet .XFieldSetWrapper {
	margin-top: 20px!important;
}


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

.modern .xnav-link{
    font-size: 14px;
}

.XItem {
    font-size: 16px;
}


.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: var(--grey-1) !important;
}

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

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

.singleBorderGrey{
    border: solid 1px var(--grey-2);
}

.img-upload-preview {
	display: unset;
}

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

.XTextField,
.XContainerInvisible.XContainer .XTextField,
select.XSelect {
    /*background-color: var(--clr-lightblue);*/
    border: solid 1px var(--grey-5);
}

/* verschachtelter Container */
.modern .CXContainer .XContainer {
    background-color: var(--clr-lightblue);
    border: none;
    border-radius: 0;
	margin: 0;
}


.CXTextField span {
	font-weight: 400;
}

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

.modern span.required-star {
    margin: 5px;
}

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

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

.modern .xm-item-div .XItem .XButton,
.modern .xm-item-div .XItem .submit {
    color: var(--white);
    background-color: var(--grey-4);
    border: 0.25px solid var(--grey-4);
    height:40px;
    padding: 8px 20px;
}
.modern .xm-item-div .XItem .XSubmit {
    color: var(--white);
    background-color: var(--main-red);
    border: 0.25px solid var(--main-red);
    height:40px;
    padding: 8px 20px;
}
.modern .xm-item-div .XItem .XButtonList:Hover{
    background-color: var(--main-red);
}
.modern .xm-item-div LABEL::before {
    color: var(--grey-3);
}
.modern .XItem,
.modern .xm-item-div input[type="checkbox"]:checked + label::before,
.modern .xm-item-div input[type="radio"]:checked + label::before {
    color: var(--grey-3);
}

.modern .xm-item-div input[type=checkbox]:hover+.label-icon-checkbox::before,
.modern .xm-item-div input[type=checkbox]:active+.label-icon-checkbox::before,
.modern .xm-item-div input[type=checkbox]:focus+.label-icon-checkbox::before,
.modern .xm-item-div input[type=checkbox]:visited+.label-icon-checkbox::before,
.modern .xm-item-div input[type=radio]:hover+.label-icon-radio::before,
.modern .xm-item-div input[type=radio]:visited+.label-icon-radio::before,
.modern .xm-item-div input[type=radio]:active+.label-icon-radio::before,
.modern .xm-item-div input[type=radio]:focus+.label-icon-radio::before {
    color: var(--main-red);
    text-shadow: 0 0 1px var(--main-red);
}

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

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

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

.modern .XItem:focus:not(:disabled) {
    border: 1px solid var(--main-red);
}

@media screen and (min-width:450px) {
/* Bei jedem größeren Monitor kommen neue Regeln hinzu */

}

@media screen and (min-width:720px) {
/* Noch größer, noch mehr Regeln */
}

.modern .CXFooter .XFooter .FooterImage {
    padding: 0;
}

.modern .CXFooter .XFooter .cLogoContainer {
    padding-right: 0;
}
.modern .CXFooter .XFooter .FooterImage {
    background-image: url("../includes/ressource?mid=1&name=FutureTech_2023-05-05.svg");
    background-repeat: no-repeat;
    background-size:  100px;
    background-position: bottom right;
    background-origin: content-box, padding-box;
    min-height: 60px;
    padding-top:0;
    float: left;
    margin-top: 10px;
    width: 100%;
}

.modern label .question-info {
    margin-top: 20px;
    margin-bottom: 10px;
    display: block;
}

.modern label .question-info .block {
    font-weight:400 !important;
    display: contents;
}

.modern label .question-info SPAN.required-star {
    display: contents !important;
}

.CXTable table tbody td {
    font-size: 16px;
}
.CXTable table tbody td {
    background-color: white;
}
.CXTable table tbody td.odd {
    background-color: var(--clr-lightblue);
}
.CXTable table thead th{
    background-color: #33617C; 
}


.modern .Antwort-Block {
    padding-bottom: 17px;
}

.modern .ico-rating-emoticon,
.modern .ico-rating-emoticon-cool {
    font-size: 1.4rem;
}
.modern .ico-rating-star-outline,
.modern .ico-rating-star-face{
    font-size: 1.6rem;
}

.modern DIV.XPage .CXTable LABEL.label-icon-radio,
.modern DIV.XPage .CXTable LABEL.label-icon-checkbox{
 margin: 0 -10px 0 0;
}

@media screen and (min-width: 600px) {
    .modern .xm-help-icon .xm-help-text.xm-text{
        max-width: 400px;
        width: 400px;
        background-color: #eee;
    }
    .modern .xm-help-container:focus .xm-help-icon .xm-help-text {
        border: 1px solid #ebebeb;
        box-shadow: 1px 1px 1px #7b7b7b;
    }
    .modern .xm-help-container:focus .xm-help-icon .xm-help-text p {
        font-size: 14px;
    }
}

.CXFooter .XItem.XSpan.powered-by-ITSC{
    position: relative;
    top: 10px;
    margin-top: -10px ;
}

.modern .CXSpan span.isEditLink {
    width: 20px;
    height: 20px;
    float: right;
    cursor: pointer;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjI0Ij48cGF0aCBkPSJNMCAwaDI0djI0SDBWMHoiIGZpbGw9Im5vbmUiLz48cGF0aCBmaWxsPSIjZGMwYTFlIiBkPSJNMTQuMDYgOS4wMmwuOTIuOTJMNS45MiAxOUg1di0uOTJsOS4wNi05LjA2TTE3LjY2IDNjLS4yNSAwLS41MS4xLS43LjI5bC0xLjgzIDEuODMgMy43NSAzLjc1IDEuODMtMS44M2MuMzktLjM5LjM5LTEuMDIgMC0xLjQxbC0yLjM0LTIuMzRjLS4yLS4yLS40NS0uMjktLjcxLS4yOXptLTMuNiAzLjE5TDMgMTcuMjVWMjFoMy43NUwxNy44MSA5Ljk0bC0zLjc1LTMuNzV6Ii8+PC9zdmc+);
    background-repeat: no-repeat;
    background-size: 20px 18px;
}