@CHARSET "ISO-8859-1"; /* Fixes Bug in IE10 for right-aligned text in input; not used in this layout? input.search::-ms-clear { display: none; } */ /******************** Change Browser Standards ********************/ input:focus, textarea:focus, a:focus { outline: none; } .control { /* overflow: hidden; cannot be used since otherwise focus-outline-border, which are bigger than the field, are cut */ } .control.displayNone { display: none; } /******************** linkText ********************/ .linkText { display: flex; flex-direction: row; align-items: center; justify-content: center; width: 100%; margin-block-end:24px; /*No formal definition? */ } .linkText > a { text-decoration: none; } .linkText > a > label { font: var(--FONT_LINKTEXT); letter-spacing : var(--FONT_LINKTEXT_LETTERSPACING); color: var(--COLOR_LINKTEXT); cursor: pointer; } .linkText > a > label > a { color: var(--COLOR_LINKTEXT); } .linkText > a > label > span { color: var(--COLOR_LINKTEXT); } .linkText > a > label > span:focus { outline: auto; } .linkText > a > label > a:focus { outline: auto; } /******************** linkCard1 ********************/ div.linkCard1 { display: flex; } div.linkCard1 > div { display: flex; flex-direction: column; position: relative; align-items: left; justify-content: flex-start; min-height: var(--LINKCARD1_MIN_HEIGHT); width: 100%; padding: var(--LINKCARD1_CONTENT_PADDING); border-radius: var(--LINKCARD1_BORDER_RADIUS); border: var(--FIELD_BORDER); box-sizing: border-box; box-shadow: var(--FIELD_BOXSHADOW); text-align: left; text-decoration: none; font: var(--FONT_LINKCARD1_LABEL); letter-spacing: var(--FONT_LINKCARD1_LABEL_LETTERSPACING); color: var(--COLOR_LINKCARD1_LABEL); background: var(--COLOR_LINKCARD1_BACKGROUND); cursor: pointer; transition: var(--TRANSITION_FADE_BORDER); } div.linkCard1.productDisabled > div { background: var(--COLOR_LINKCARD1_PRODUCTDISABLED_BACKGROUND); box-shadow: none; } div.linkCard1 > div:focus-within { box-shadow: var(--LINKCARD1_BOXSHADOW_FOCUS); } div.linkCard1 > div:hover { box-shadow: var(--LINKCARD1_BOXSHADOW_HOVER); } div.linkCard1 > div > label { cursor: pointer; } div.linkCard1 > div > .text { margin-top: var(--LINKCARD1_LABEL_TO_TEXT_GAP); font: var(--FONT_LINKCARD1_TEXT); letter-spacing: var(--FONT_LINKCARD1_TEXT_LETTERSPACING); } div.linkCard1 > div > .link { display: flex; align-self: flex-end; align-items: center; height: var(--LINKCARD1_LINK_HEIGHT); margin-top: auto; margin-right: auto; padding-right: calc( var(--LINKCARD1_LABEL_TO_ARROW_GAP) + var(--LINKCARD1_ARROW_WIDTH) ); background: url(../images/arrow_no_right.svg) no-repeat center right transparent; font: var(--FONT_LINKCARD1_LINK); letter-spacing: var(--FONT_LINKCARD1_LINK_LETTERSPACING); } /******************** print1 ********************/ .print1 { display: flex; flex-direction: row; align-items: center; justify-content: center; width: 100%; } .print1 > a { display: flex; flex-direction: row; position: relative; align-items: center; justify-content: flex-start; text-align: left; text-decoration: none; cursor: pointer; vertical-align: middle; gap: var(--PRINT1_ICON_TO_LABEL_GAP); } .print1 > a > div { display: flex; flex-direction: row; align-items: center; justify-content: center; width: 100%; border-radius: var(--PRINT1_BORDER_RADIUS); border: var(--PRINT1_BORDER); box-sizing: border-box; box-shadow: var(--PRINT1_BOXSHADOW); background: url(../images/arrow_no_down.svg) no-repeat 0 0 var(--COLOR_PRINT1_BACKGROUND); min-width: calc( var(--PRINT1_ICON_SIZE) + var(--PRINT1_ICON_PADDING_SIZE)); width: calc( var(--PRINT1_ICON_SIZE) + var(--PRINT1_ICON_PADDING_SIZE)); height: calc( var(--PRINT1_ICON_SIZE) + var(--PRINT1_ICON_PADDING_SIZE));; background-size: var(--PRINT1_ICON_SIZE); background-position: center; transition: var(--TRANSITION_FADE_BORDER); } .print1 > a > label { font: var(--FONT_PRINT1_LABEL); letter-spacing: var(--FONT_PRINT1_LABEL_LETTERSPACING); color: var(--COLOR_PRINT1_LABEL); } .print1 > a:focus-visible > div { box-shadow: var(--PRINT1_BOXSHADOW_FOCUS); } .print1 > a > div:hover { box-shadow: var(--PRINT1_BOXSHADOW_HOVER); } .print1 > a > label { cursor: pointer; } /******************** dateTime1 ********************/ .labelClass.dateTime1 { display: flex; } .labelClass.dateTime1 > label { margin-bottom: var(--DATETIME_OUTERLABEL_TO_CONTROL_GAP); font: var(--FONT_DATETIME_OUTERLABEL); letter-spacing: var(--FONT_DATETIME_OUTERLABEL_LETTERSPACING); } .control>.dataClass>.inputDateClass { /* width: calc(100% - 34px); text-align: left;*/ } .dataClass.dateTime1 { display: flex; flex-direction: row; position: relative; justify-content: flex-start; height: var(--FIELD_MIN_HEIGHT); width: 100%; /* min-width: 148px;*/ padding: var(--FIELD_CONTENT_VERTICAL_PAD) var(--FIELD_CONTENT_HORIZONTAL_PAD); border-radius: var(--FIELD_BORDER_RADIUS); border: var(--FIELD_BORDER); box-sizing: border-box; box-shadow: var(--FIELD_BOXSHADOW); align-items: center; text-align: left; text-decoration: none; cursor: pointer; white-space: nowrap; gap: var(--DATETIME_LABEL_TO_PICKER_GAP); transition: var(--TRANSITION_FADE_BORDER); } .dataClass.dateTime1:focus-within { box-shadow: var(--FIELD_BOXSHADOW_FOCUS); } .dataClass.dateTime1:hover { box-shadow: var(--FIELD_BOXSHADOW_HOVER); } .dataClass.dateTime1.errorField { box-shadow: var(--FIELD_BOXSHADOW_ERROR); } .dataClass.dateTime1 > div { display: flex; flex-direction: column; flex: 1; } .dataClass.dateTime1 > div > div { font: var(--FONT_DATETIME_LABEL); letter-spacing: var(--FONT_DATETIME_LABEL_LETTERSPACING); color: var(--COLOR_DATETIME1_LABEL); } .dataClass.dataClassDisabled.dateTime1 > div > div { color: var(--COLOR_DATETIME1_LABEL_DISABLED); } .dataClass.dateTime1 > div > input { background: var(--INPUT_BACKGROUND); border: var(--INPUT_BORDER); font: var(--FONT_DATETIME_INPUT); letter-spacing: var(--FONT_DATETIME_INPUT_LETTERSPACING); color: var(--COLOR_DATETIME1_INPUT); } .dataClass.dataClassDisabled.dateTime1 > div > label { background: var(--INPUT_BACKGROUND); border: var(--INPUT_BORDER); font: var(--FONT_DATETIME_INPUT); letter-spacing: var(--FONT_DATETIME_INPUT_LETTERSPACING); color: var(--COLOR_DATETIME1_INPUT_DISABLED); } div.labelClass.dateTime1.unobtrusive+div.dataClass.inputDisabledClass { background-color: white; } /******************** solfinSearch2 ********************/ .dataClass.dataClass.solfinSearch2 > .search-icon { width: 24px; /* größe der Lupe */ height: 24px; background-image: url("../images/search.svg"); } .dataClass.solfinSearch2.open:focus-within { box-shadow: none; } .dataClass.solfinSearch2.open:hover { box-shadow: none; } .dataClass.solfinSearch2.open { border-radius: 32px 32px 0px 0px; box-shadow: none; border-top: 2px solid var(--COLOR_BORDER_STRONG); border-right: 2px solid var(--COLOR_BORDER_STRONG); border-left: 2px solid var(--COLOR_BORDER_STRONG); border-bottom: none; background-color: var(--COLOR_NEUTRALS_WHITE); } .dataClass.solfinSearch2 > .labelAndInputDiv { width: 100%; display: flex; flex-direction: column; flex: 1; position: relative; } /**** Alt ****/ .dataClass.solfinSearch2 { display: flex; flex-direction: row; position: relative; justify-content: flex-start; height: var(--FIELD_MIN_HEIGHT); width: 100%; padding: var(--SPACE_5) var(--SPACE_6); border-radius: var(--FIELD_BORDER_RADIUS); border: var(--FIELD_BORDER); box-sizing: border-box; box-shadow: var(--FIELD_BOXSHADOW); align-items: center; text-align: left; text-decoration: none; cursor: pointer; white-space: nowrap; gap: var(--SPACE_3); transition: var(--TRANSITION_FADE_BORDER); align-self: stretch; } .dataClass.solfinSearch2:focus-within { box-shadow: var(--FIELD_BOXSHADOW_FOCUS); } .dataClass.solfinSearch2:hover { box-shadow: var(--FIELD_BOXSHADOW_HOVER); } .dataClass.solfinSearch2.errorField { box-shadow: var(--FIELD_BOXSHADOW_ERROR); } .dataClass.dataClassDisabled.solfinSearch2 { box-shadow: var(--FIELD_BOXSHADOW_DISABLED); } .dataClass.solfinSearch2 > div > div.movingLabel { position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; height: fit-content; /* transition: all 12s;*/ transition: var(--TRANSITION_INPUT_LABEL); font: var(--FONT_SOLFINSEARCH2_INPUT); letter-spacing: var(--FONT_SOLFINSEARCH2_INPUT_LETTERSPACING); color: var(--COLOR_SOLFINSEARCH2_INPUT); } .dataClass.solfinSearch2 > div > input:not(:placeholder-shown) + .movingLabel, .dataClass.solfinSearch2 > div > input:focus + .movingLabel, .dataClass.solfinSearch2 > div > input:-webkit-autofill + .movingLabel { transform: translateY(-100%); font: var(--FONT_SOLFINSEARCH2_LABEL); letter-spacing: var(--FONT_SOLFINSEARCH2_LABEL_LETTERSPACING); color: var(--COLOR_SOLFINSEARCH2_LABEL); } .dataClass.dataClassDisabled.solfinSearch2 > div > div.movingLabel { transform: translateY(-100%); font: var(--FONT_SOLFINSEARCH2_LABEL); letter-spacing: var(--FONT_SOLFINSEARCH2_LABEL_LETTERSPACING); color: var(--COLOR_SOLFINSEARCH2_LABEL_DISABLED); } /*.dataClass.solfinSearch2 > div { display: flex; flex-direction: column; flex: 1; position: relative; }*/ .dataClass.solfinSearch2 > div > div { font: var(--FONT_SOLFINSEARCH2_LABEL); letter-spacing: var(--FONT_SOLFINSEARCH2_LABEL_LETTERSPACING); } .dataClass.solfinSearch2 > div > input { padding: 0; background: var(--INPUT_BACKGROUND); border: var(--INPUT_BORDER); font: var(--FONT_SOLFINSEARCH2_INPUT); letter-spacing: var(--FONT_SOLFINSEARCH2_INPUT_LETTERSPACING); } .dataClass.dataClassDisabled.solfinSearch2 > div > label { padding: 0; background: var(--INPUT_BACKGROUND); border: var(--INPUT_BORDER); font: var(--FONT_SOLFINSEARCH2_INPUT); letter-spacing: var(--FONT_SOLFINSEARCH2_INPUT_LETTERSPACING); color: var(--COLOR_SOLFINSEARCH2_INPUT_DISABLED); } .dataClass.solfinSearch2 > div > input::placeholder { color: transparent; } .labelClass.solfinSearch2 > label { margin-bottom: var(--SOLFINSEARCH2_OUTERLABEL_TO_CONTROL_GAP); font: var(--FONT_SOLFINSEARCH2_OUTERLABEL); letter-spacing: var(--FONT_SOLFINSEARCH2_OUTERLABEL_LETTERSPACING); } /******************** solfinSearch1 ********************/ .dataClass.solfinSearch1 > div.dynSearchDiv { /* erstmal so bis klar ist, ob wirklich das native-control */ width: 100%; position: absolute; display: flex; top: 48px; /* left: -2px; */ /* background-color: var(--COLOR_FORM_CONTAINER);*/ padding: none; left: 0; } .dataClass.solfinSearch1 { display: flex; flex-direction: row; position: relative; justify-content: flex-start; height: var(--FIELD_MIN_HEIGHT); width: 100%; /* min-width: 148px;*/ padding: var(--FIELD_CONTENT_VERTICAL_PAD) var(--FIELD_CONTENT_HORIZONTAL_PAD); border-radius: var(--FIELD_BORDER_RADIUS); border: var(--FIELD_BORDER); box-sizing: border-box; box-shadow: var(--FIELD_BOXSHADOW); align-items: center; text-align: left; text-decoration: none; cursor: pointer; white-space: nowrap; /* gap: var(--DATETIME_LABEL_TO_PICKER_GAP);*/ transition: var(--TRANSITION_FADE_BORDER); } .dataClass.solfinSearch1:focus-within { box-shadow: var(--FIELD_BOXSHADOW_FOCUS); } .dataClass.solfinSearch1:hover { box-shadow: var(--FIELD_BOXSHADOW_HOVER); } .dataClass.solfinSearch1.errorField { box-shadow: var(--FIELD_BOXSHADOW_ERROR); } .dataClass.solfinSearch1 > div > div.movingLabel { position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; height: fit-content; /* transition: all 12s;*/ transition: var(--TRANSITION_INPUT_LABEL); font: var(--FONT_SOLFINSEARCH2_INPUT); letter-spacing: var(--FONT_SOLFINSEARCH2_INPUT_LETTERSPACING); color: var(--COLOR_SOLFINSEARCH2_INPUT); } .dataClass.solfinSearch1 > div > input:not(:placeholder-shown) + .movingLabel, .dataClass.solfinSearch1 > div > input:focus + .movingLabel, .dataClass.solfinSearch1 > div > input:-webkit-autofill + .movingLabel { transform: translateY(-100%); font: var(--FONT_SOLFINSEARCH2_LABEL); letter-spacing: var(--FONT_SOLFINSEARCH2_LABEL_LETTERSPACING); color: var(--COLOR_SOLFINSEARCH2_LABEL); } .dataClass.solfinSearch1 > div { display: flex; flex-direction: column; flex: 1; position: relative; } .dataClass.solfinSearch1 > div > div { font: var(--FONT_SOLFINSEARCH2_LABEL); letter-spacing: var(--FONT_SOLFINSEARCH2_LABEL_LETTERSPACING); } .dataClass.solfinSearch1 > div > input { padding: 0; background: var(--INPUT_BACKGROUND); border: var(--INPUT_BORDER); font: var(--FONT_SOLFINSEARCH2_INPUT); letter-spacing: var(--FONT_SOLFINSEARCH2_INPUT_LETTERSPACING); } .dataClass.solfinSearch1 > div > input::placeholder { color: transparent; } .labelClass.solfinSearch1 > label { margin-bottom: var(--SOLFINSEARCH2_OUTERLABEL_TO_CONTROL_GAP); font: var(--FONT_SOLFINSEARCH2_OUTERLABEL); letter-spacing: var(--FONT_SOLFINSEARCH2_OUTERLABEL_LETTERSPACING); } /******************** all fields with label and input in box ********************/ div.labelAndInputDiv.errorField { border: none !important; } .inputFieldAndOutline { position: relative; } /* For select2 */ .control .select2-container .select2-choice .select2-arrow { right: 10px; } /* .itemFull>.control>.radiodiv { justify-content: left; } */ /* iPadiPhone disabled in js in the moment .control>.dataClass.iPadiPhone>.solfinSearchClass { width: calc(100% - 32px); } */ /* .control>.radiodiv>.radioClass.radio2.asItem, .control>.radiodiv>.radioClass.radio2.asItemFull { margin: unset; } */ /* Used for print-popup, numbers should be defined in layout */ .printDiv { margin: 0 15px; width: calc(100% - 32px); background: white; } /******************** WIZZARD Progressindicator ********************/ .wizardCenteringDiv { display: flex; flex-direction: column; } .wizardDiv { display: flex; flex-flow: column; align-self: center; position: relative; margin-left: var(--FORM_CONTAINER_MARGIN); margin-right: var(--FORM_CONTAINER_MARGIN); padding-left: calc( var(--FORM_CONTAINER_PADDING) ); padding-right: calc( var(--FORM_CONTAINER_PADDING) ); max-width: calc(var(--FORM_CONTAINER_MAX_WIDTH) - 2 * var(--FORM_CONTAINER_PADDING)); width: calc(100% - 2 * var(--FORM_CONTAINER_PADDING) - 2 * var(--FORM_CONTAINER_MARGIN)); background-color: var(--COLOR_FORM_CONTAINER); } .pagination { display: flex; margin-top: var(--FORM_SECTION_HEADER_GAP); padding-left: 60px; padding-right: 60px; padding-bottom: var(--FORM_FIELD_ROW_GAP); } .pagination.displayNone { display: none; } .paginationNumber { width: 32px; height: 32px; font: var(--FONT_PROGRESSINDICATOR_NUMBER); letter-spacing: var(--FONT_PROGRESSINDICATOR_NUMBER_SPACING); color: var(--COLOR_TEXT_PRIMARY); text-align: center; background: url(../images/wizzard_Circle_inactive.svg) no-repeat center center transparent; z-index: 10; margin-top: 4px; } .paginationNumberDiv { padding-top: 9px; } .paginationTextDiv > h2 { font: var(--FONT_PROGRESSINDICATOR_TEXT); letter-spacing: var(--FONT_PROGRESSINDICATOR_TEXT_LETTERSPACING); padding-top: var(--FORM_CONTAINER_TOPBOTTOM_DESKTOP); margin-block-start: 0; margin-block-end: 0; } .paginationItemDiv { display: flex; flex-direction: column; align-items: center; margin-left: 15px; margin-right: 15px; } .paginationSeperator { border-bottom: 1px solid #D6D1C7; width: calc(100% - 200px); height: 0px; margin-top: 20px; } .paginationSeperator.selected { border-bottom: 1px solid var(--COLOR_NEUTRALS_BLACK); } .paginationNumber.active { background: url(../images/wizzard_Circle_active.svg) no-repeat center center transparent; } .paginationNumber.selected, .paginationNumber.next { cursor: pointer; text-decoration: none; } .paginationNumber.selected { background: url(../images/wizzard_Circle_checked.svg) no-repeat center center transparent; } /*------------------------- WIZZARD Progressindicator-----------------------------*/ /******************** select2 ********************/ div.dataClass.selection2 { display: flex; flex-direction: row; position: relative; justify-content: flex-start; height: var(--FIELD_MIN_HEIGHT); width: 100%; /* min-width: 148px;*/ padding: var(--FIELD_CONTENT_VERTICAL_PAD) var(--FIELD_CONTENT_HORIZONTAL_PAD); border-radius: var(--FIELD_BORDER_RADIUS); border: var(--FIELD_BORDER); box-sizing: border-box; box-shadow: var(--FIELD_BOXSHADOW); align-items: center; text-align: left; text-decoration: none; cursor: pointer; white-space: nowrap; gap: var(--SELECT2_LABEL_TO_OPENER_GAP); transition: var(--TRANSITION_FADE_BORDER); } div.dataClass.selection2.disabled { box-shadow: var(--FIELD_BOXSHADOW_DISABLED); cursor: auto; } div.dataClass.selection2:focus-within { box-shadow: var(--FIELD_BOXSHADOW_FOCUS); } div.dataClass.selection2:not(.disabled):hover { box-shadow: var(--FIELD_BOXSHADOW_HOVER); } div.dataClass.selection2.errorField { box-shadow: var(--FIELD_BOXSHADOW_ERROR); } div.control.selection2 > div.label2 { padding: var(--SELECT2_PADDING_OUTERLABEL); } div.control.selection2 > div.label2 > label { display: inline-block; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: var(--FONT_SELECT2_OUTERLABEL); letter-spacing: var(--FONT_SELECT2_OUTERLABEL_LETTERSPACING); } div.dataClass.selection2 > div { display: flex; flex-direction: column; flex: 1; max-width: 100%; /*For ellipsing label*/ } div.dataClass.selection2 > div.labelAndInputDiv > div.label2 > label { display: inline-block; max-width: 100%; vertical-align: bottom; /*So no extra space is added below label because of strange behaviour of inline-block*/ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: var(--FONT_SELECT2_LABEL); letter-spacing: var(--FONT_SELECT2_LABEL_LETTERSPACING); } div.dataClass.selection2.disabled > div > div { color: var(--COLOR_SELECT2_LABEL_DISABLED); } div.select2-container .select2-choice>.select2-chosen { font: var(--FONT_SELECT2_INPUT); letter-spacing: var(--FONT_SELECT2_INPUT_LETTERSPACING); } div.dataClass.selection2.disabled > div.labelAndInputDiv > div.value > label { display: inline-block; max-width: 100%; vertical-align: bottom; /*So no extra space is added below label because of strange behaviour of inline-block*/ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--COLOR_SELECT2_ITEM_DISABLED); font: var(--FONT_SELECT2_INPUT); letter-spacing: var(--FONT_SELECT2_INPUT_LETTERSPACING); } div.dataClass.selection2 > span.select2-arrow { background: transparent url("../images/chevron_no_down.svg") no-repeat scroll center center; background-color: transparent; background-size: auto; /* float: right;*/ width: var(--SELECT2_OPENER_SIZE); height: var(--SELECT2_OPENER_SIZE); /* position: absolute; */ text-decoration: none; background-size: var(--SELECT2_OPENER_SIZE) var(--SELECT2_OPENER_SIZE); /* background-color: #fbed42;*/ margin: 0px; /* right: 1px; top: 1px; border-left: 2px solid #dee8de;*/ z-index: 1; /*So it is in front of outline-div and thus catches the click*/ } div.dataClass.selection2.disabled > span.select2-arrow { background: transparent url("../images/chevron_no_down_grey.svg") no-repeat scroll center center; } select.selection2 { width: 100%; border: var(--INPUT_BORDER); color: var(--COLOR_STRING_INPUT); background: var(--INPUT_BACKGROUND); font: var(--FONT_STRING_INPUT); letter-spacing: var(--FONT_STRING_INPUT_LETTERSPACING); appearance: auto; -moz-appearance: auto; -webkit-appearance: auto; } select.selection2:focus { outline: none; } select.selection2 option { background: var(--INPUT_BACKGROUND); font: var(--FONT_STRING_INPUT); letter-spacing: var(--FONT_STRING_INPUT_LETTERSPACING); } /******************** checkbox3 ********************/ div.checkbox3>a.booleanChecked, div.checkbox3>a.booleanUnchecked { height: var(--CHECKBOX3_BOX_SIZE); min-width: var(--CHECKBOX3_BOX_SIZE); box-shadow: var(--CHECKBOX3_BOXSHADOW); transition: var(--TRANSITION_FADE_BORDER); background-size: var(--CHECKBOX3_CHECK_SIZE) var(--CHECKBOX3_CHECK_SIZE); } div.checkbox3.enabled>a.booleanChecked { background: var(--COLOR_CHECKBOX3_CHECKED_BACKGROUND) url("../images/check.svg") no-repeat scroll center; } div.checkbox3.enabled>a.booleanUnchecked { background: var(--COLOR_CHECKBOX3_BACKGROUND) no-repeat scroll 0px 0px; } div.checkbox3.disabled>a { box-shadow: var(--CHECKBOX3_BOXSHADOW_DISABLED); background: var(--COLOR_CHECKBOX3_DISABLED_BACKGROUND) no-repeat scroll 0px 0px; } div.checkbox3.disabled>a.booleanChecked { background: var(--COLOR_CHECKBOX3_DISABLED_BACKGROUND) url("../images/check_disabled.svg") no-repeat scroll center; } div.checkbox3>a.booleanChecked:focus-visible, div.checkbox3>a.booleanUnchecked:focus-visible { box-shadow: var(--CHECKBOX3_BOXSHADOW_FOCUS); } div.checkbox3.enabled>a.booleanChecked:hover, div.checkbox3.enabled>a.booleanUnchecked:hover { box-shadow: var(--CHECKBOX3_BOXSHADOW_HOVER); } div.checkbox3.enabled>a.booleanUnchecked:hover { position: relative; } div.checkbox3.enabled>a.booleanUnchecked:hover::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--COLOR_CHECKBOX3_BACKGROUND) url("../images/check.svg") no-repeat scroll center; background-size: var(--CHECKBOX3_CHECK_SIZE) var(--CHECKBOX3_CHECK_SIZE); opacity: var(--CHECKBOX3_HOVER_CHECK_OPACITY); /* z-index: 1;*/ /* Ensure the pseudo-element is behind the content */ } div.checkbox3>a.booleanChecked:errorField, div.checkbox3>a.booleanUnchecked:errorField { box-shadow: var(--CHECKBOX3_BOXSHADOW_ERROR); } div.checkbox3 > div { margin-left: var(--CHECKBOX3_BOX_TO_LABEL_GAP); } div.checkbox3 > div > label { margin-top: 0px; font: var(--FONT_CHECKBOX3_LABEL); letter-spacing: var(--FONT_CHECKBOX3_LABEL_LETTERSPACING); color: var(--COLOR_CHECKBOX3_LABEL); cursor: pointer; word-break: break-word; } div.checkbox3.disabled > div > label { color: var(--COLOR_CHECKBOX3_LABEL_DISABLED); } /* div.checkbox3.booleanCompactClass>div>label>a { background: url("../images/link.gif") no-repeat scroll 0 center transparent; color: black; font-weight: bold; padding-left: 10px; text-decoration: none; } div.checkbox3.booleanCompactClass>label>a:hover { text-decoration: underline; }*/ div.checkbox3.booleanCompactClass > div > label > p { margin-block-end: 0; /*So no space after final Paragraph*/ } div.checkbox3.booleanCompactClass { display: flex; } /* .checkbox3.booleanCompactClass.errorField { border: 2px solid #FAFAFA !important; } */ /******************** TabGroupCustom1 ********************/ div.tabGroupCustom1 { min-width: 100%; max-width: 100%; } div.tabGroupCustom1 > div.buttonsAndRadiosDiv { display: flex; justify-content: space-between; gap: var(--TABGROUPCUSTOM1_SCROLLBUTTON_TO_TABS_GAP); width: 100%; max-width: 100%; } div.tabGroupCustom1 div.radiosScrollDiv { display: flex; width: 100%; max-width: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; /* Firefox */ } div.tabGroupCustom1 div.radiosScrollDiv::-webkit-scrollbar { display: none; /* Chrome, Safari, Edge */ } div.tabGroupCustom1 .scrollButton { display: flex; margin: var(--TABGROUPCUSTOM1_PAD_FOR_FOCUSOUTLINE) 0; padding: var(--TABGROUPCUSTOM1_SCROLLBUTTON_VERTICAL_PAD) var(--TABGROUPCUSTOM1_SCROLLBUTTON_HORIZONTAL_PAD); width: calc( var(--TABGROUPCUSTOM1_SCROLLBUTTON_ICON_SIZE) + 2 * var( --TABGROUPCUSTOM1_SCROLLBUTTON_HORIZONTAL_PAD ) ); /* height: calc( var(--TABGROUPCUSTOM1_SCROLLBUTTON_ICON_SIZE) + 2 * var( --TABGROUPCUSTOM1_SCROLLBUTTON_VERTICAL_PAD ) ); */ border-radius: var(--FIELD_BORDER_RADIUS); border: var(--FIELD_BORDER); box-sizing: border-box; box-shadow: var(--TABGROUPCUSTOM1_BOXSHADOW); } div.tabGroupCustom1 .scrollButton:hover { box-shadow: var(--TABGROUPCUSTOM1_BOXSHADOW_HOVER); } div.tabGroupCustom1 .scrollButton:focus-visible { box-shadow: var(--TABGROUPCUSTOM1_BOXSHADOW_FOCUS); } div.tabGroupCustom1 .scrollButton.left { background: url(../images/arrow_yes_left.svg) no-repeat center center var(--COLOR_TABGROUPCUSTOM1_SCROLLBUTTON_BACKGROUND); } div.tabGroupCustom1 .scrollButton.right { background: url(../images/arrow_yes_right.svg) no-repeat center center var(--COLOR_TABGROUPCUSTOM1_SCROLLBUTTON_BACKGROUND); } div.tabGroupCustom1 div.radiosSizerDiv { display: flex; margin: var(--TABGROUPCUSTOM1_PAD_FOR_FOCUSOUTLINE); /* Necessary space so focus outline is not cut by overflow scrollable div outside */ min-width: calc(100% - 2 * var(--TABGROUPCUSTOM1_PAD_FOR_FOCUSOUTLINE)); /* See margin */ } div.tabGroupCustom1 div.radiosContainer { display: flex; flex: 1; justify-content: space-between; gap: var(--TABGROUPCUSTOM1_GAP_BETWEEN_TABS); background-color: white; border-radius : var(--FIELD_BORDER_RADIUS); border: var(--FIELD_BORDER); box-sizing: border-box; box-shadow: var(--TABGROUPCUSTOM1_BOXSHADOW); } div.tabGroupCustom1 div.radiosContainer > a { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; min-height: var(--TABGROUPCUSTOM1_TAB_MIN_HEIGHT); width: 100%; min-width: var(--TABGROUPCUSTOM1_TAB_MIN_WIDTH); padding: 0px var(--TABGROUPCUSTOM1_TAB_HORIZONTAL_PAD); border-radius: var(--FIELD_BORDER_RADIUS); box-sizing: border-box; text-align: left; text-decoration: none; font: var(--FONT_TABGROUPCUSTOM1_ITEM); letter-spacing: var(--FONT_TABGROUPCUSTOM1_ITEM_LETTERSPACING); color: var(--COLOR_TABGROUPCUSTOM1_ITEM); cursor: pointer; white-space: break-spaces; transition: var(--TRANSITION_FADE_BORDER); } div.tabGroupCustom1 div.radiosContainer > a > div { width: 100%; display: flex; flex-direction: row; justify-content: center; align-items: center; } div.tabGroupCustom1 div.radiosContainer > a > div.withRemove { justify-content: space-between; } a.tabGroupCustom1.radioChecked { background-color: var(--COLOR_TABGROUPCUSTOM1_CHECKED_BACKGROUND); box-shadow: var(--TABGROUPCUSTOM1_BOXSHADOW); border: var(--FIELD_BORDER); } a.tabGroupCustom1.secondary.radioChecked { background-color: var(--COLOR_TABGROUPCUSTOM1_SECONDARY_CHECKED_BACKGROUND); } div.tabGroupCustom1 div.radiosContainer > a:focus-visible { box-shadow: var(--TABGROUPCUSTOM1_BOXSHADOW_FOCUS); } div.tabGroupCustom1 .radioUnchecked:hover, div.tabGroupCustom1 .radioChecked:hover { box-shadow: var(--TABGROUPCUSTOM1_BOXSHADOW_HOVER); } .tabGroupCustom1_remove { display: flex; flex-direction: row; width: 100%; border-radius: var(--TABGROUPCUSTOM1_BORDER_RADIUS); border: var(--TABGROUPCUSTOM1_BORDER); box-sizing: border-box; background: url(../images/delete.svg) no-repeat 0 0; width: calc( var(--TABGROUPCUSTOM1_REMOVE_ICON_SIZE) + var(--TABGROUPCUSTOM1_REMOVE_ICON_PADDING_SIZE)); height: calc( var(--TABGROUPCUSTOM1_REMOVE_ICON_SIZE) + var(--TABGROUPCUSTOM1_REMOVE_ICON_PADDING_SIZE)); background-size: var(--TABGROUPCUSTOM1_REMOVE_ICON_SIZE); background-position: center; transition: var(--TRANSITION_FADE_BORDER); } /******************** selectCardSingle1 ********************/ /* Grundstruktur für selectCardSingle1 */ .labelClass.selectCardSingle1 { display: flex; } .radioClass.selectCardSingle1 { display: grid; grid-template-columns: repeat(var(--GRID_COLUMN_COUNT), 1fr); column-gap: var(--ITEM_GAP); row-gap: var(--FORM_FIELD_ROW_GAP); } a.selectCardSingle1 { display: flex; flex-direction: column; position: relative; align-items: left; justify-content: flex-start; min-height: var(--SELECTCARDSINGLE1_MIN_HEIGHT); width: 100%; min-width: var(--SELECTCARDSINGLE1_MIN_WIDTH); padding: var(--SELECTCARDSINGLE1_CONTENT_PADDING); border-radius: var(--SELECTCARDSINGLE1_BORDER_RADIUS); border: var(--FIELD_BORDER); box-sizing: border-box; box-shadow: var(--FIELD_BOXSHADOW); text-align: left; text-decoration: none; font: var(--FONT_SELECTCARDSINGLE1_LABEL); letter-spacing: var(--FONT_SELECTCARDSINGLE1_LABEL_LETTERSPACING); color: var(--COLOR_SELECTCARDSINGLE1_LABEL); cursor: pointer; transition: var(--TRANSITION_FADE_BORDER); } a.selectClassSingle1.radioUnchecked { background-color: transparent; } a.selectClassSingle1 { margin-top: var(--SELECTCARDMULTI1_BOX_TO_LABEL_GAP); } a.selectCardSingle1 .selectCardSingle1_radiobutton { flex: 1; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; position: relative; gap: var(--SELECTCARDSINGLE1_BUTTON_TO_TEXT_GAP); } .selectCardSingle1_price { display: flex; position: absolute; right: 0px; top: 0px; max-height: var(--SELECTCARDSINGLE1_PRICE_HEIGHT); min-height: var(--SELECTCARDSINGLE1_PRICE_HEIGHT); padding: 0 var(--SPACE_3); align-items: center; gap: var(--SPACE_2); border-radius: var(--SELECTCARDSINGLE1_BORDER_RADIUS); background: var(--COLOR_CANVAS_PRIMARY); font: var(--FONT_DECORATIVE_DEFAULT); } a.selectCardSingle1.radioChecked .selectCardSingle1_price { background: var(--COLOR_CANVAS_PRIMARY); } a.selectCardSingle1.radioUnchecked .selectCardSingle1_price { background: var(--COLOR_SELECTCARDSINGLE1_CHECKED_BACKGROUND); } a.selectCardSingle1.radioChecked{ background: var(--COLOR_SELECTCARDSINGLE1_CHECKED_BACKGROUND); } a.selectCardSingle1.radioUnchecked.disabled, a.selectCardSingle1.radioChecked.disabled{ background: var(--COLOR_SELECTCARDSINGLE1_DISABLED_BACKGROUND); box-shadow: var(--SELECTCARDSINGLE1_BOXSHADOW_DISABLED); } .selectCardSingle1_bgKnob { position: relative; width: var(--SELECTCARDSINGLE1_BGKNOB_HEIGHT); height: var(--SELECTCARDSINGLE1_BGKNOB_WIDTH); margin: 0 !important; border-radius: var(--BORDER_RADIUS_ROUNDEDFULL); background-color: var(--COLOR_CANVAS_PRIMARY); border: var(--SELECTCARDSINGLE1_BUTTON_BORDER); box-sizing: border-box; z-index: 2; } a.selectCardSingle1.radioUnchecked > .selectCardSingle1_radiobutton > .selectCardSingle1_bgKnob { background-color: transparent; } .selectCardSingle1_knob { position: absolute; top: calc(50% - (var(--SELECTCARDSINGLE1_KNOB_HEIGHT)/2)); left: calc(50% - (var(--SELECTCARDSINGLE1_KNOB_WIDTH)/2)); width: var(--SELECTCARDSINGLE1_KNOB_WIDTH); height: var(--SELECTCARDSINGLE1_KNOB_HEIGHT); border-radius: var(--BORDER_RADIUS_ROUNDEDFULL); background-color: var(--COLOR_NEUTRALS_BLACK); overflow: hidden; } a.selectCardSingle1.radioUnchecked .selectCardSingle1_knob { background-color: transparent; } input[type="radio" i] { background-color: initial; cursor: default; appearance: auto; box-sizing: border-box; margin: 3px 3px 0px 5px; padding: initial; border: initial; } /* Hover */ a.selectCardSingle1.enabled:hover { box-shadow: var(--SELECTCARDSINGLE1_BOXSHADOW_HOVER); } a.selectCardSingle1.enabled.radioChecked:hover, a.selectCardSingle1.enabled.radioUnchecked:hover { box-shadow: var(--SELECTCARDSINGLE1_BOXSHADOW_HOVER); } a.selectCardSingle1.enabled.radioUnchecked:hover { position: relative; } a.selectCardSingle1.enabled.radioUnchecked:hover .selectCardSingle1_knob { position: absolute; top: calc(50% - (var(--SELECTCARDSINGLE1_KNOB_HEIGHT_HOVER)/2)); left: calc(50% - (var(--SELECTCARDSINGLE1_KNOB_WIDTH_HOVER)/2)); width: var(--SELECTCARDSINGLE1_KNOB_WIDTH_HOVER); height: var(--SELECTCARDSINGLE1_KNOB_HEIGHT_HOVER); background-color: var(--COLOR_NEUTRALS_BLACK); } a.selectCardSingle1.enabled.radioUnchecked:hover .selectCardSingle1_bgKnob { border: var(--SELECTCARDSINGLE1_BORDER_BGKNOD_HOVER); } /* Focus */ a.selectCardSingle1:focus-within { box-shadow: var(--SELECTCARDSINGLE1_BOXSHADOW_FOCUS); } /* Disabled */ a.selectCardSingl1.disabled{ color: var(--COLOR_SELECTCARDSINGLE1_LABEL_DISABLED); } /* Error */ a.selectCardSingle1.radioChecked.errorField, a.selectCardSingle1.radioUnchecked.errorField { box-shadow: var(--FIELD_BOXSHADOW_ERROR); } a.selectCardSingle1.errorField .selectCardSingle1_bgKnob { border: var(--SELECTCARDSINGLE1_BUTTON_BORDER_ERROR); box-shadow: none; } div.selectCardSingle1 div.selectCardSingle1_text { margin-top: var(--SELECTCARDSINGLE1_LABEL_TO_TEXT_GAP); font: var(--FONT_SELECTCARDSINGLE1_TEXT); letter-spacing: var(--FONT_SELECTCARDSINGLE1_TEXT_LETTERSPACING); } /******************** selectCardMulti1 ********************/ div.selectCardMulti1 { display: flex; flex-direction: column; position: relative; align-items: left; justify-content: flex-start; min-height: var(--SELECTCARDMULTI1_MIN_HEIGHT); width: 100%; min-width: 148px; padding: var(--SELECTCARDMULTI1_CONTENT_PADDING); border-radius: var(--SELECTCARDMULTI1_BORDER_RADIUS); border: var(--FIELD_BORDER); box-sizing: border-box; box-shadow: var(--FIELD_BOXSHADOW); text-align: left; text-decoration: none; font: var(--FONT_SELECTCARDMULTI1_LABEL); letter-spacing: var(--FONT_SELECTCARDMULTI1_LABEL_LETTERSPACING); color: var(--COLOR_SELECTCARDMULTI1_LABEL); cursor: pointer; transition: var(--TRANSITION_FADE_BORDER); } .selectCardMulti1_price { display: flex; position: absolute; right: var(--SELECTCARDMULTI1_CONTENT_PADDING_HORIZONTAL); top: var(--SELECTCARDMULTI1_CONTENT_PADDING_VERTICAL); max-height: var(--SELECTCARDMULTI1_PRICE_HEIGHT); min-height: var(--SELECTCARDMULTI1_PRICE_HEIGHT); padding: 0 var(--SPACE_3); align-items: center; gap: var(--SPACE_2); border-radius: var(--SELECTCARDMULTI1_BORDER_RADIUS); font: var(--FONT_DECORATIVE_DEFAULT); } div.selectCardMulti1.booleanChecked > div.selectCardMulti1_price { background: var(--COLOR_CANVAS_PRIMARY); } div.selectCardMulti1.booleanUnchecked > div.selectCardMulti1_price { background: var(--COLOR_SELECTCARDMULTI1_CHECKED_BACKGROUND); } div.selectCardMulti1.disabled { color: var(--COLOR_SELECTCARDMULTI1_LABEL_DISABLED); } div.selectCardMulti1.booleanChecked { background: var(--COLOR_SELECTCARDMULTI1_CHECKED_BACKGROUND); } div.selectCardMulti1.booleanChecked.disabled, div.selectCardMulti1.booleanUnchecked.disabled { background: var(--COLOR_SELECTCARDMULTI1_DISABLED_BACKGROUND); box-shadow: var(--SELECTCARDMULTI1_BOXSHADOW_DISABLED); } div.selectCardMulti1>a.booleanChecked, div.selectCardMulti1>a.booleanUnchecked { min-height: var(--SELECTCARDMULTI1_CHECKBOX_SIZE); width: var(--SELECTCARDMULTI1_CHECKBOX_SIZE); box-shadow: var(--SELECTCARDMULTI1_BOXSHADOW); transition: var(--TRANSITION_FADE_BORDER); } div.selectCardMulti1>a.booleanChecked { background: var(--COLOR_SELECTCARDMULTI1_CHECKBOX_BACKGROUND) url("../images/check.svg") no-repeat scroll center; background-size: var(--SELECTCARDMULTI1_CHECK_SIZE) var(--SELECTCARDMULTI1_CHECK_SIZE); } div.selectCardMulti1>a.booleanUnchecked { background: var(--COLOR_SELECTCARDMULTI1_CHECKBOX_BACKGROUND) no-repeat scroll 0px 0px; background-size: var(--SELECTCARDMULTI1_CHECK_SIZE) var(--SELECTCARDMULTI1_CHECK_SIZE); } div.selectCardMulti1.disabled>a.booleanChecked, div.selectCardMulti1.disabled>a.booleanUnchecked { box-shadow: var(--SELECTCARDMULTI1_BOXSHADOW_DISABLED); } div.selectCardMulti1.disabled>a.booleanChecked { background: var(--COLOR_SELECTCARDMULTI1_CHECKBOX_BACKGROUND) url("../images/check_disabled.svg") no-repeat scroll center; } div.selectCardMulti1:focus-within, div.selectCardMulti1:focus-within { box-shadow: var(--SELECTCARDMULTI1_BOXSHADOW_FOCUS); } div.selectCardMulti1.enabled:hover, div.selectCardMulti1.enabled:hover { box-shadow: var(--SELECTCARDMULTI1_BOXSHADOW_HOVER); } div.selectCardMulti1.enabled:hover>a.booleanChecked, div.selectCardMulti1.enabled:hover>a.booleanUnchecked { box-shadow: var(--SELECTCARDMULTI1_BOXSHADOW_HOVER); } div.selectCardMulti1>a.booleanUnchecked:hover { position: relative; } div.selectCardMulti1>a.booleanUnchecked:hover::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--COLOR_SELECTCARDMULTI1_CHECKBOX_BACKGROUND) url("../images/check.svg") no-repeat scroll center; background-size: var(--SELECTCARDMULTI1_CHECK_SIZE) var(--SELECTCARDMULTI1_CHECK_SIZE); opacity: var(--SELECTCARDMULTI1_HOVER_CHECK_OPACITY); /* z-index: 1;*/ /* Ensure the pseudo-element is behind the content */ } div.selectCardMulti1>a.booleanChecked:errorField, div.selectCardMulti1>a.booleanUnchecked:errorField { box-shadow: var(--FIELD_BOXSHADOW_ERROR); } div.selectCardMulti1>label { cursor: pointer; } div.selectCardMulti1>label:first-of-type { margin-top: var(--SELECTCARDMULTI1_BOX_TO_LABEL_GAP); } div.table.selectCardMulti1>a.booleanChecked { background: url("../images/checkedSmall.png") no-repeat scroll center center transparent; } div.table.selectCardMulti1>a.booleanUnchecked { background: url("../images/uncheckedSmall.png") no-repeat scroll center center transparent; } div.selectCardMulti1 { display: flex; } div.selectCardMulti1 > label:not(:first-of-type) { margin-top: var(--SELECTCARDMULTI1_LABEL_TO_TEXT_GAP); font: var(--FONT_SELECTCARDMULTI1_TEXT); letter-spacing: var(--FONT_SELECTCARDMULTI1_TEXT_LETTERSPACING); } /* .selectCardMulti1.errorField { border: 2px solid #FAFAFA !important; } */ /******************** SectionHeader ********************/ .item > div > .controlSectionHeader, .itemFull > div > .controlSectionHeader { margin-top: var(--FORM_SECTION_HEADER_IN_ITEM_MARGIN_TOP); } .item > div > .controlSectionHeader.emptyLabel, .itemFull > div > .controlSectionHeader.emptyLabel { margin-top: var(--FORM_SECTION_HEADER_NOLABEL_MARGIN_TOP); /* since there is no label, there is no gap betweeen label and next item */ } div.controlSectionHeader > label > h3, div.controlSectionHeader > label > h2 { display: inline; margin-block-start: 0; margin-block-end: 0; font: var(--FONT_SECTION_HEADER); } div.controlSectionHeader > label:not(:first-of-type) { display: block; margin-top: var(--SECTIONHEADER_LABEL_TO_SUBLABEL_GAP); font: var(--FONT_SECTION_HEADER_SUBLABEL); letter-spacing: var(--FONT_SECTION_HEADER_SUBLABEL_LETTERSPACING); } /******************** help ********************/ .fieldAndHelpContainer { display: flex; flex-direction: row; gap: var(--FIELD_TO_HELP_GAP); align-items: center; } /******************** Button1 ********************/ div.button1 { width: 100%; height: 100%; display: flex; } div.button1 > a { display: flex; width: 100%; height: var(--SECONDARY_BUTTON_LABEL_SIZE); padding: var(--FIELD_CONTENT_VERTICAL_PAD) var(--FIELD_CONTENT_HORIZONTAL_PAD); justify-content:center; background: var(--COLOR_BUTTON_SECONDARY_BACKGROUND); border-radius: var(--FIELD_BORDER_RADIUS); border: var(--FIELD_BORDER); box-shadow: var(--FIELD_BOXSHADOW); text-decoration: none; font: var(--FONT_BUTTON_SECONDARY); letter-spacing: var(--FONT_BUTTON_SECONDARY_LETTERSPACING); color: var(--COLOR_BUTTON_SECONDARY_LABEL); cursor: pointer; white-space: nowrap; transition: var(--TRANSITION_FADE_BORDER); } div.button1 > a:focus-visible { box-shadow: var(--FIELD_BOXSHADOW_FOCUS); } div.button1 > a:hover { box-shadow: var(--FIELD_BOXSHADOW_HOVER); } div.button1.primaryButton > a { height: var(--PRIMARY_BUTTON_LABEL_SIZE); background: var(--COLOR_BUTTON_PRIMARY_BACKGROUND); font: var(--FONT_BUTTON_PRIMARY); letter-spacing: var(--FONT_BUTTON_PRIMARY_LETTERSPACING); color: var(--COLOR_BUTTON_PRIMARY_LABEL); } div.button1 > a > div { align-content: center; } /******************** Button Forward ********************/ div.button_Forward { width: 100%; height: 100%; display: flex; justify-content: right; } div.button_Forward > a { display: flex; /*ABUS-4777 height: var(--BUTTON_FORWARD_LABEL_SIZE); */ padding: var(--FIELD_CONTENT_VERTICAL_PAD) var(--FIELD_CONTENT_HORIZONTAL_PAD); justify-content:center; background: var(--COLOR_FORWARD_BACKGROUND); border-radius: var(--FIELD_BORDER_RADIUS); border: var(--FIELD_BORDER); box-shadow: var(--FIELD_BOXSHADOW); text-decoration: none; font: var(--FONT_FORWARD_LABEL); letter-spacing: var(--FONT_FORWARD_LABEL_LETTER_SPACING); color: var(--COLOR_FORWARD_LABEL); cursor: pointer; /*ABUS-4777 white-space: nowrap; */ transition: var(--TRANSITION_FADE_BORDER); } div.button_Forward > a:focus-visible { box-shadow: var(--FIELD_BOXSHADOW_FOCUS); } div.button_Forward > a:hover { box-shadow: var(--FIELD_BOXSHADOW_HOVER); } @media (max-width: 767px) { div.button_Forward > a { width: 100%; } } div.button_Forward > a > div { align-content: center; } /******************** Button Backward ********************/ div.button_Backward { width: 100%; height: 100%; display: flex; justify-content: left; } div.button_Backward > a { display: flex; /*ABUS-4777 height: var(--BUTTON_BACKWARD_LABEL_SIZE);*/ padding: var(--FIELD_CONTENT_VERTICAL_PAD) var(--FIELD_CONTENT_HORIZONTAL_PAD); justify-content:center; background: var(--COLOR_BACKWARD_BACKGROUND); border-radius: var(--FIELD_BORDER_RADIUS); border: var(--FIELD_BORDER); box-shadow: var(--FIELD_BOXSHADOW); text-decoration: none; font: var(--FONT_BACKWARD_LABEL); letter-spacing: var(--FONT_BACKWARD_LABEL_LETTER_SPACING); color: var(--COLOR_BACKWARD_LABEL); cursor: pointer; /*ABUS-4777 white-space: nowrap;*/ transition: var(--TRANSITION_FADE_BORDER); } div.button_Backward > a:focus-visible { box-shadow: var(--FIELD_BOXSHADOW_FOCUS); } div.button_Backward > a:hover { box-shadow: var(--FIELD_BOXSHADOW_HOVER); } @media (max-width: 767px) { div.button_Backward > a { width: 100%; } } div.button_Backward > a > div { align-content: center; } /******************** string1 ********************/ .dataClass.string1 { display: flex; flex-direction: row; position: relative; justify-content: flex-start; height: var(--FIELD_MIN_HEIGHT); width: 100%; /* min-width: 148px;*/ padding: var(--FIELD_CONTENT_VERTICAL_PAD) var(--FIELD_CONTENT_HORIZONTAL_PAD); border-radius: var(--FIELD_BORDER_RADIUS); border: var(--FIELD_BORDER); box-sizing: border-box; box-shadow: var(--FIELD_BOXSHADOW); align-items: center; text-align: left; text-decoration: none; cursor: pointer; white-space: nowrap; transition: var(--TRANSITION_FADE_BORDER); } .dataClass.string1:focus-within { box-shadow: var(--FIELD_BOXSHADOW_FOCUS); } .dataClass.string1:hover { box-shadow: var(--FIELD_BOXSHADOW_HOVER); } .dataClass.string1.errorField { box-shadow: var(--FIELD_BOXSHADOW_ERROR); } .dataClass.dataClassDisabled.string1 { box-shadow: var(--FIELD_BOXSHADOW_DISABLED); } .dataClass.string1 > div > div.movingLabel { position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; height: fit-content; /* transition: all 12s;*/ transition: var(--TRANSITION_INPUT_LABEL); font: var(--FONT_STRING_INPUT); letter-spacing: var(--FONT_STRING_INPUT_LETTERSPACING); color: var(--COLOR_STRING_INPUT); } .dataClass.string1 > div > input:not(:placeholder-shown) + .movingLabel, .dataClass.string1 > div > input:focus + .movingLabel, .dataClass.string1 > div > input:-webkit-autofill + .movingLabel { transform: translateY(-100%); font: var(--FONT_STRING_LABEL); letter-spacing: var(--FONT_STRING_LABEL_LETTERSPACING); color: var(--COLOR_STRING_LABEL); } .dataClass.dataClassDisabled.string1 > div > div.movingLabel { transform: translateY(-100%); font: var(--FONT_STRING_LABEL); letter-spacing: var(--FONT_STRING_LABEL_LETTERSPACING); color: var(--COLOR_STRING_LABEL_DISABLED); } .dataClass.string1 > div { display: flex; flex-direction: column; flex: 1; position: relative; } .dataClass.string1 > div > div { font: var(--FONT_STRING_LABEL); letter-spacing: var(--FONT_STRING_LABEL_LETTERSPACING); } .dataClass.string1 > div > input { padding: 0; background: var(--INPUT_BACKGROUND); border: var(--INPUT_BORDER); font: var(--FONT_STRING_INPUT); letter-spacing: var(--FONT_STRING_INPUT_LETTERSPACING); color: var(--COLOR_STRING_INPUT); } .dataClass.dataClassDisabled.string1 > div > label { padding: 0; background: var(--INPUT_BACKGROUND); border: var(--INPUT_BORDER); font: var(--FONT_STRING_INPUT); letter-spacing: var(--FONT_STRING_INPUT_LETTERSPACING); color: var(--COLOR_STRING_INPUT_DISABLED); } .dataClass.string1 > div > input::placeholder { color: transparent; } .labelClass.string1 > label { margin-bottom: var(--STRING_OUTERLABEL_TO_CONTROL_GAP); font: var(--FONT_STRING_OUTERLABEL); letter-spacing: var(--FONT_STRING_OUTERLABEL_LETTERSPACING); } div.labelAndInputDiv.errorField { border: none !important; } /******************** TextArea1 ********************/ .dataClass.textarea1 { display: flex; flex-direction: row; position: relative; justify-content: flex-start; min-height: var(--FIELD_MIN_HEIGHT); width: 100%; /* min-width: 148px;*/ padding: var(--TEXTAREA1_CONTENT_VERTICAL_PAD) var(--TEXTAREA1_CONTENT_HORIZONTAL_PAD); border-radius: var(--TEXTAREA1_BORDER_RADIUS); border: var(--TEXTAREA1_BORDER); box-sizing: border-box; box-shadow: var(--FIELD_BOXSHADOW); align-items: center; text-align: left; text-decoration: none; cursor: pointer; white-space: nowrap; transition: var(--TRANSITION_FADE_BORDER); } .dataClass.textarea1:focus-within { box-shadow: var(--FIELD_BOXSHADOW_FOCUS); } .dataClass.textarea1:hover { box-shadow: var(--FIELD_BOXSHADOW_HOVER); } .dataClass.textarea1.errorField { box-shadow: var(--FIELD_BOXSHADOW_ERROR); } .dataClass.textarea1 > div > div.movingLabel { position: absolute; left: 0; right: 0; top: 0; /* transition: all 12s;*/ transition: var(--TRANSITION_INPUT_LABEL); font: var(--FONT_TEXTAREA1_INPUT); letter-spacing: var(--FONT_TEXTAREA1_INPUT_LETTERSPACING); color: var(--COLOR_TEXTAREA1_INPUT); } .textarea1 div.label2 { padding: var(--TEXTAREA1_PADDING_OUTERLABEL); } .textarea1 div.label2 > label { display: inline-block; max-width: 100%; /* overflow: hidden; white-space: nowrap; text-overflow: ellipsis;*/ font: var(--FONT_TEXTAREA1_FORCEDOUTERLABEL); letter-spacing: var(--FONT_TEXTAREA1_FORCEDOUTERLABEL_LETTERSPACING); } .dataClass.textarea1 textarea:not(:placeholder-shown) + .movingLabel, .dataClass.textarea1 textarea:focus + .movingLabel, .dataClass.textarea1 textarea:-webkit-autofill + .movingLabel { font: var(--FONT_TEXTAREA1_LABEL); letter-spacing: var(--FONT_TEXTAREA1_LABEL_LETTERSPACING); color: var(--COLOR_TEXTAREA1_LABEL); } .dataClass.textarea1 > div { display: flex; flex-direction: column; flex: 1; position: relative; max-width: 100%; /*min/max width to 100% so no horizontal resizing in child textarea */ min-width: 100%; } .dataClass.textarea1 > div > div { font: var(--FONT_TEXTAREA1_LABEL); letter-spacing: var(--FONT_TEXTAREA1_LABEL_LETTERSPACING); } .dataClass.textarea1 textarea { padding: 0; max-width: 100%; /*min/max width to 100% so no horizontal resizing */ min-width: 100%; min-height: var(--TEXTAREA1_TEXTAREA_MIN_HEIGHT); max-height: var(--TEXTAREA1_TEXTAREA_MAX_HEIGHT); resize: auto; background: var(--INPUT_BACKGROUND); border: var(--INPUT_BORDER); font: var(--FONT_TEXTAREA1_INPUT); letter-spacing: var(--FONT_TEXTAREA1_INPUT_LETTERSPACING); color: var(--COLOR_TEXTAREA1_INPUT); overflow-y: auto; } .dataClass.textarea1 textarea::placeholder { color: transparent; } .labelClass.textarea1 > label { margin-bottom: var(--TEXTAREA1_OUTERLABEL_TO_CONTROL_GAP); font: var(--FONT_TEXTAREA1_OUTERLABEL); letter-spacing: var(--FONT_TEXTAREA1_OUTERLABEL_LETTERSPACING); } /******************** Number1 ********************/ .dataClass.number1 { display: flex; flex-direction: row; position: relative; justify-content: flex-start; height: var(--FIELD_MIN_HEIGHT); width: 100%; /* min-width: 148px;*/ padding: var(--FIELD_CONTENT_VERTICAL_PAD) var(--FIELD_CONTENT_HORIZONTAL_PAD); border-radius: var(--FIELD_BORDER_RADIUS); border: var(--FIELD_BORDER); box-sizing: border-box; box-shadow: var(--FIELD_BOXSHADOW); align-items: center; text-align: left; text-decoration: none; cursor: pointer; white-space: nowrap; transition: var(--TRANSITION_FADE_BORDER); } .dataClass.number1:focus-within { box-shadow: var(--FIELD_BOXSHADOW_FOCUS); } .dataClass.number1:hover { box-shadow: var(--FIELD_BOXSHADOW_HOVER); } .dataClass.number1.errorField { box-shadow: var(--FIELD_BOXSHADOW_ERROR); } .dataClass.dataClassDisabled.number1 { box-shadow: var(--FIELD_BOXSHADOW_DISABLED); } .dataClass.number1 > div > div.movingLabel { position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; height: fit-content; /* transition: all 12s;*/ transition: var(--TRANSITION_INPUT_LABEL); font: var(--FONT_NUMBER1_INPUT); letter-spacing: var(--FONT_NUMBER1_INPUT_LETTERSPACING); color: var(--COLOR_NUMBER1_INPUT); } .dataClass.number1 > div > input:not(:placeholder-shown) + .movingLabel, .dataClass.number1 > div > input:focus + .movingLabel, .dataClass.number1 > div > input:-webkit-autofill + .movingLabel { transform: translateY(-100%); font: var(--FONT_NUMBER1_LABEL); letter-spacing: var(--FONT_NUMBER1_LABEL_LETTERSPACING); color: var(--COLOR_NUMBER1_LABEL); } .dataClass.dataClassDisabled.number1 > div > div.movingLabel { transform: translateY(-100%); font: var(--FONT_NUMBER1_LABEL); letter-spacing: var(--FONT_NUMBER1_LABEL_LETTERSPACING); color: var(--COLOR_NUMBER1_LABEL_DISABLED); } .dataClass.number1 > div { display: flex; flex-direction: column; flex: 1; position: relative; } .dataClass.number1 > div > div { font: var(--FONT_NUMBER1_LABEL); letter-spacing: var(--FONT_NUMBER1_LABEL_LETTERSPACING); } .dataClass.number1 > div > input { padding: 0; background: var(--INPUT_BACKGROUND); border: var(--INPUT_BORDER); font: var(--FONT_NUMBER1_INPUT); letter-spacing: var(--FONT_NUMBER1_INPUT_LETTERSPACING); color: var(--COLOR_NUMBER1_INPUT); } .dataClass.dataClassDisabled.number1 > div > label { padding: 0; background: var(--INPUT_BACKGROUND); border: var(--INPUT_BORDER); font: var(--FONT_NUMBER1_INPUT); letter-spacing: var(--FONT_NUMBER1_INPUT_LETTERSPACING); color: var(--COLOR_NUMBER1_INPUT_DISABLED); } .dataClass.number1 > div > input::placeholder { color: transparent; } div.labelAndInputDiv.errorField { border: none !important; } /******************** PricingItem1 ********************/ .pricingItem1 { display: flex; width: 100%; justify-content: space-between; padding-top: calc(var(--PRICINGITEM1_PAD_TOP) - var(--FORM_FIELD_ROW_GAP)); padding-bottom: var(--PRICINGITEM1_PAD_BOTTOM); padding-right: var(--PRICINGITEM1_PAD_RIGHT); box-shadow: var(--PRICINGITEM1_BORDER); font: var(--FONT_PRICINGITEM1); letter-spacing: var(--FONT_PRICINGITEM1_LETTERSPACING); } .pricingItem1.result { box-shadow: var(--PRICINGITEM1_RESULT_BORDER); font: var(--FONT_PRICINGITEM1_RESULT); letter-spacing: var(--FONT_PRICINGITEM1_RESULT_LETTERSPACING); } .pricingItem1 > div { display: block; /* padding-top: var(--SPACE_6);*/ /*Not used since item already generates a SPACE_6 gap */ padding-left: 0; } .pricingItem1 .leftPart { display: flex; gap: var(--PRICINGITEM1_LEFT_ITEMS_GAP); } .pricingItem1 .rightPart { display: flex; margin-left: var(--PRICINGITEM1_LEFT_TO_RIGHT_ITEMS_GAP); gap: var(--PRICINGITEM1_RIGHT_ITEMS_GAP); } .pricingItem1 .rightPart > div:last-child { text-align: right; white-space: nowrap; } .pricingItem1 div.pricingItemMenu { position: relative; display: flex; flex-direction: column; width: var(--HEADER_MENU_BUTTON_SIZE); background: transparent url(../images/menu.svg) no-repeat scroll center 0px; background-size: auto; cursor: pointer; overflow: visible; } .pricingItem1 div.pricingItemMenu>div { display: flex; flex-direction: column; position: absolute; right: 0; top: var(--HEADER_MENU_BUTTON_SIZE); padding: var(--HEADERMENU_POPUP_PAD_TOPBOTTOM) 0; background-color: var(--COLOR_MENU_POPUP); cursor: default; border: var(--HEADERMENU_BORDER); border-radius: var(--HEADERMENU_BORDER_RADIUS); overflow: hidden; transition: var(--TRANSITION_MENU_POPUP); opacity: 0%; pointer-events: none; /* do not catch clicks on invisible menu */ } .pricingItem1 div.pricingItemMenu>div.visible { top: calc( var(--HEADER_MENU_BUTTON_SIZE) + var(--HEADERMENU_POPUP_TO_BUTTON_GAP) ); right: var(--HEADERMENU_POPUP_MARGIN_RIGHT); height: initial; z-index: 25; opacity: 100%; pointer-events: initial; } .pricingItem1 div.pricingItemMenu > div > a { display: flex; position: relative; align-items: center; justify-content: center; padding: var(--HEADERMENU_ITEM_PAD); font: var(--FONT_MENU_ITEM); letter-spacing : var(--FONT_MENU_ITEM_LETTERSPACING); color: var(--COLOR_MENU_POPUP_ITEM); white-space: nowrap; text-decoration: none; } .pricingItem1 div.pricingItemMenu > div > a:hover { background-color: var(--COLOR_MENU_ITEM_BACKGROUND_HOVER); } .pricingItem1 div.badge { position: relative; display: flex; max-height: var(--PRICINGITEM1_BADGE_MAX_HEIGHT); padding: var(--PRICINGITEM1_BADGE_PAD); box-sizing: border-box; align-items: center; border: var(--PRICINGITEM1_BADGE_BORDER); border-radius: var(--PRICINGITEM1_BADGE_BORDER_RADIUS); background: var(--COLOR_PRICINGITEM_BADGE_BACKGROUND); font: var(--FONT_PRICINGITEM1_BADGE); letter-spacing : var(--FONT_PRICINGITEM1_BADGE_LETTERSPACING); white-space: nowrap; } /******************** PricingItemCheckbox1 ********************/ div.pricingItemCheckbox1 { display: flex; flex-direction: row; justify-content: space-between; width: 100%; padding-top: calc( var(--PRICINGITEMCHECKBOX1_PAD_TOP) - var(--FORM_FIELD_ROW_GAP) ); padding-bottom: var(--PRICINGITEMCHECKBOX1_PAD_BOTTOM); padding-right: var(--PRICINGITEMCHECKBOX1_PAD_RIGHT); box-shadow: var(--PRICINGITEMCHECKBOX1_BORDER); /* padding-top: var(--SPACE_6);*/ /*Not used since item already generates a SPACE_6 gap */ } div.pricingItemCheckbox1 > div.checkboxControl { display: flex; flex-direction: row; } div.pricingItemCheckbox1 > div.checkboxControl > a.booleanChecked, div.pricingItemCheckbox1 > div.checkboxControl > a.booleanUnchecked { height: var(--PRICINGITEMCHECKBOX1_BOX_SIZE); min-width: var(--PRICINGITEMCHECKBOX1_BOX_SIZE); box-shadow: var(--PRICINGITEMCHECKBOX1_BOXSHADOW); transition: var(--TRANSITION_FADE_BORDER); background-size: var(--PRICINGITEMCHECKBOX1_CHECK_SIZE) var(--PRICINGITEMCHECKBOX1_CHECK_SIZE); } div.pricingItemCheckbox1 > div.checkboxControl > a.booleanChecked { background: var(--COLOR_PRICINGITEMCHECKBOX1_CHECKED_BACKGROUND) url("../images/check.svg") no-repeat scroll center; } div.pricingItemCheckbox1 > div.checkboxControl > a.booleanUnchecked { background: var(--COLOR_PRICINGITEMCHECKBOX1_BACKGROUND) no-repeat scroll 0px 0px; } div.pricingItemCheckbox1 > div.checkboxControl > a.booleanChecked:focus-visible, div.pricingItemCheckbox1 > div.checkboxControl > a.booleanUnchecked:focus-visible { box-shadow: var(--PRICINGITEMCHECKBOX1_BOXSHADOW_FOCUS); } div.pricingItemCheckbox1 > div.checkboxControl > a.booleanChecked:hover, div.pricingItemCheckbox1 > div.checkboxControl > a.booleanUnchecked:hover { box-shadow: var(--PRICINGITEMCHECKBOX1_BOXSHADOW_HOVER); } div.pricingItemCheckbox1 > div.checkboxControl > a.booleanUnchecked:hover { position: relative; } div.pricingItemCheckbox1 > div.checkboxControl > a.booleanUnchecked:hover::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--COLOR_PRICINGITEMCHECKBOX1_BACKGROUND) url("../images/check.svg") no-repeat scroll center; background-size: var(--PRICINGITEMCHECKBOX1_CHECK_SIZE) var(--PRICINGITEMCHECKBOX1_CHECK_SIZE); opacity: var(--PRICINGITEMCHECKBOX1_HOVER_CHECK_OPACITY); /* z-index: 1;*/ /* Ensure the pseudo-element is behind the content */ } div.pricingItemCheckbox1 > div.checkboxControl > div { margin-left: var(--PRICINGITEMCHECKBOX1_BOX_TO_LABEL_GAP); } div.pricingItemCheckbox1 > div.checkboxControl > div > label { margin-top: 0px; font: var(--FONT_PRICINGITEMCHECKBOX1_LABEL); letter-spacing: var(--FONT_PRICINGITEMCHECKBOX1_LABEL_LETTERSPACING); color: var(--COLOR_PRICINGITEMCHECKBOX1_LABEL); cursor: pointer; word-break: break-word; } div.pricingItemCheckbox1 > div.checkboxControl > div > label > p { margin-block-end: 0; /*So no space after final Paragraph*/ } div.pricingItemCheckbox1 > div.price { font: var(--FONT_PRICINGITEMCHECKBOX1_PRICE); letter-spacing: var(--FONT_PRICINGITEMCHECKBOX1_PRICE_LETTERSPACING); } /******************** Radio2 ********************/ .labelClass.radio2 { display: flex; } div.radioClass.radio2 { display: grid; grid-template-columns: repeat(var(--GRID_COLUMN_COUNT),1fr); column-gap: var(--ITEM_GAP); row-gap: var(--FORM_FIELD_ROW_GAP); } div.radioClass.radio2.errorField { border: none !important; } .radio2 > div > a { display: flex; flex-direction: row; position: relative; align-items: center; justify-content: flex-start; height: var(--FIELD_MIN_HEIGHT); width: 100%; min-width: 148px; padding: 0px var(--FIELD_CONTENT_HORIZONTAL_PAD); border-radius: var(--FIELD_BORDER_RADIUS); border: var(--FIELD_BORDER); box-sizing: border-box; box-shadow: var(--RADIO2_BOXSHADOW); text-align: left; text-decoration: none; font: var(--FONT_RADIO2_ITEM); letter-spacing: var(--FONT_RADIO2_ITEM_LETTER_SPACING); color: var(--COLOR_RADIO2_ITEM); cursor: pointer; white-space: nowrap; transition: var(--TRANSITION_FADE_BORDER); } .radio2.disabled > div > a { color: var(--COLOR_RADIO2_ITEM_DISABLED); box-shadow: var(--RADIO2_BOXSHADOW_DISABLED); background-color: var(--COLOR_RADIO2_CHECKED_DISABLED_BACKGROUND); cursor: default; } a.radio2.radioChecked { background-color: var(--COLOR_RADIO2_CHECKED_BACKGROUND); } a.radio2.radioUnchecked { background-color: var(--COLOR_RADIO2_UNCHECKED_BACKGROUND); } a.radio2:focus-visible { box-shadow: var(--RADIO2_BOXSHADOW_FOCUS); } .errorField > div > a.radio2 { box-shadow: var(--RADIO2_BOXSHADOW_ERROR); } .radioUnchecked:hover, .radioChecked:hover { box-shadow: var(--RADIO2_BOXSHADOW_HOVER); } .radio2 > label { margin-bottom: var(--RADIO2_OUTERLABEL_TO_CONTROL_GAP); font: var(--FONT_RADIO2_LABEL); letter-spacing: var(--FONT_RADIO2_LABEL_LETTERSPACING); } .radio2_knob { position: absolute; top: calc(50% - 4px); left: calc(50% - 4px); width: 8px; height: 8px; border-radius: var(--BORDER_RADIUS_ROUNDEDFULL); background-color: var(--RADIO2_BUTTON_COLOR); overflow: hidden; } .radioUnchecked > div > div > .radio2_knob { background-color: transparent; } .radioUnchecked:hover > div > div > .radio2_knob { background-color: var(--RADIO2_BUTTON_UNCHECKED_HOVER_COLOR); } div.radio2.disabled > div > a.radio2 > .radio2_radiobutton > div > .radio2_knob { background-color: var(--RADIO2_BUTTON_DISABLED_COLOR); } .radio2_bgKnob { position: relative; width: 26px; height: 26px; margin: 0 !important; border-radius: var(--BORDER_RADIUS_ROUNDEDFULL); background-color: var(--COLOR_CANVAS_PRIMARY); border: var(--RADIO2_BUTTON_BORDER); box-sizing: border-box; z-index: 2; } a.radio2.radioUnchecked > .radio2_radiobutton > .radio2_bgKnob { background-color: transparent; } div.radio2.disabled > div > a.radio2 > .radio2_radiobutton > .radio2_bgKnob { border: var(--RADIO2_BUTTON_DISABLED_BORDER); background-color: transparent; } div.radio2.errorField > div > a.radio2 > .radio2_radiobutton > .radio2_bgKnob { border: var(--RADIO2_BUTTON_BORDER_ERROR); } .radio2_radiobutton { flex: 1; display: flex; flex-direction: row; align-items: flex-start; justify-content: flex-start; position: relative; gap: var(--RADIO2_BUTTON_TO_TEXT_GAP); } /******************** Radio5 ********************/ /* a.radio5 { border-radius: 999px; border: 1px solid #999485; box-sizing: border-box; margin-bottom: 5px; cursor: pointer; font-family: GT_Walsheim_ARAG_CondensedRegular,Helvetica,sans-serif; font-size: 15px; line-height: 40px; overflow: hidden; text-align: center; text-decoration: none; white-space: nowrap; } */ div.radioClass.radio5 { /*min-width: 300px;*/ display: flex; flex-direction: column; font-family: GT_Walsheim_ARAG_CondensedRegular,Helvetica,sans-serif; } a.radio5.radioChecked { background-color: var(--COLOR_SURFACE_PRIMARY); color: #000; } a.radio5.radioUnchecked { background-color: transparent; color: #000; } .TABLE { display: flex; /* height: 905px; */ flex-direction: column; align-items: flex-start; align-self: stretch; /* border: 2px solid green; */ } .radio5_HeaderRowBeitragZahlweise { display: flex; align-items: flex-start; gap: var(--Spacing-Space-1, 4px); align-self: stretch; /* border-bottom: 1px solid var(--border-Accent, #D6D1C7); */ } .radio5_HeaderRowVariante { display: flex; align-items: flex-start; gap: var(--Spacing-Space-1, 4px); align-self: stretch; } .radio5_HeaderRow { display: flex; flex-direction: column; align-items: flex-start; align-self: stretch; } .radio5_HeaderElement { display: flex; /* padding: var(--Spacing-Space-4, 16px) var(--Spacing-Space-6, 24px); */ padding: 0px var(--Spacing-Space-6, 24px); flex-direction: column; justify-content: center; align-items: center; gap: var(--Spacing-Space-1, 4px); flex: 1 1 auto; align-self: stretch; /* border-bottom: 1px solid var(--border-Accent, #D6D1C7); */ width: 1px; /* search for Note width: 1px; */ text-align: center; } .radio5_HeaderElement.Variante { padding-top: var(--Spacing-Space-4, 16px); } .radio5_HeaderElement.BeitragZahlweise { border-bottom: 1px solid var(--border-Accent, #D6D1C7); padding-top: var(--Spacing-Space-4, 16px); padding-bottom: var(--Spacing-Space-4, 16px); } /* Note width: 1px; When specified on a flex item, the 'auto' keyword retrieves the value of the main size property(=width in our case) as the used flex-basis. If that value is itself 'auto', then the used value is content. /* Therefore, if flex-basis is set to 'auto' and a width is defined (e.g. width: 1px), so the flex-basis is not the content of the element and all element in the table have the same flex-basis. And the remaining space is evenly distributed. "flex: 1 1 px;" is strangely not the same. */ .radio5_HeaderElement.first { padding: var(--Spacing-Space-4, 16px) var(--spacing-Space-4, 16px); gap: var(--Spacing-Space-2, 8px); background-color: #F8F0DD; justify-content: flex-start; /* min-height: 50px; */ } .radio5_HeaderElement > div.variante { font-size: 32px; } .radio5_HeaderElement > div { gap: 4px; display: flex; align-items: baseline; justify-content: center; } .beitragZahlweise { flex-wrap: wrap; } .radio5_HeaderElement > div > label.beitrag { font-size: 32px; } .radio5_HeaderElement > div > label.zahlweise { font: var(--FONT_RADIO5_ZAHLWEISE); letter-spacing: var(--FONT_RADIO5_ZAHLWEISE_LETTERSPACING); } .BODY { display: flex; flex-direction: column; align-items: flex-start; align-self: stretch; /* border: 2px solid blue; nur für bessere Sichtbarkeit */ } .ROW { display: flex; align-items: flex-start; gap: 4px; /* gap: var(--Spacing-Space-1, 4px); */ align-self: stretch; /* background-color: #fb9985; nur für bessere Sichtbarkeit */ } .ROW.closed { display: none; } .CELL { display: flex; padding: var(--Spacing-Space-4, 16px) var(--Spacing-Space-6, 24px); justify-content: center; align-items: center; gap: var(--Spacing-Space-1, 4px); flex: 1 1 auto; align-self: stretch; border-bottom: 1px solid var(--border-Accent, #D6D1C7); width: 1px; /* search for Note width: 1px; */ } .selectedRow { display: flex; align-items: flex-start; gap: var(--Spacing-Space-1, 4px); align-self: stretch; /* background-color: #fb7185; nur für bessere Sichtbarkeit */ } .radio5_SelectedRow_Element { display: flex; padding: var(--Spacing-Space-4, 16px) var(--Spacing-Space-6, 24px); justify-content: center; align-items: center; gap: var(--Spacing-Space-1, 4px); flex: 1 1 auto; align-self: stretch; width: 1px; /* search for Note width: 1px; */ } .radio5_SelectedRow_Element.checked { border-radius: 20px 20px 0px 0px; background: rgba(255, 241, 0, 0.49); } .radio5_SelectedRow.first { display: flex; justify-content: center; align-items: center; flex: 1 1 auto; align-self: stretch; width: 1px; /* search for Note width: 1px; */ padding: var(--Spacing-Space-4, 16px) var(--spacing-Space-4, 16px); gap: var(--Spacing-Space-2, 8px); } .CELL.first { padding: var(--Spacing-Space-4, 16px) var(--spacing-Space-4, 16px); gap: var(--Spacing-Space-2, 8px); background-color: #F8F0DD; justify-content: space-between; min-height: 50px; } .CELL.first > label { text-align: start; } .radio5_HeaderElement.checked { /* height: 80px; */ background: var(--surface-Primary, #FFF100); } .radio5_HeaderElement.unchecked { background: #FFF; } .CELL.checked { /* height: 80px; */ background: var(--surface-Primary, #FFF100); } .CELL.unchecked { background: #FFF; } .CELL > label { text-align: center; /*font-family: "ARAG Walsheim";*/ font-size: 16px; font-style: normal; font-weight: 500; line-height: 150%; /* 24px */ letter-spacing: 0.32px; flex: 1 0 0; } .radio5_RadioButtonElement { display: flex; padding: var(--Spacing-Space-4, 16px) var(--Spacing-Space-6, 24px); justify-content: center; gap: var(--Spacing-Space-1, 4px); flex: 1 1 auto; border-bottom: 1px solid var(--border-Accent, #D6D1C7); width: 1px; /* search for Note width: 1px; */ } .radio5_RadioButtonElement.first { display: flex; justify-content: center; align-items: center; flex: 1 1 auto; align-self: stretch; border-bottom: 1px solid var(--border-Accent, #D6D1C7); width: 1px; /* search for Note width: 1px; */ padding: var(--Spacing-Space-4, 16px) var(--spacing-Space-4, 16px); gap: var(--Spacing-Space-2, 8px); justify-content: flex-start; } .radio5_RadioButtonElement.radio2 > div.fieldAndHelpContainer { width: 100% } .radio5_RadioButtonElement.radio2 > div > a { padding: 0 0; min-width: 140px; } .radio5_RadioButtonElement > div > a > .radio2_radiobutton { justify-content: center; } .optional_Choice_first { flex: 1 1 0; line-height: 150%; letter-spacing: 0.32px; gap: var(--Spacing-Space-2, 8px); display: flex; flex-direction: column; } .optional_Choice_first > p { font-size: 12px; margin: 0 0; line-height: 100%; } .optional_Choice { display: flex; padding: var(--Spacing-Space-4, 16px) var(--Spacing-Space-6, 24px); justify-content: center; align-items: center; gap: var(--Spacing-Space-1, 4px); flex: 1 1 auto; align-self: stretch; border-bottom: 1px solid var(--border-Accent, #D6D1C7); background-color: #FFFDD7; width: 1px; /* search for Note width: 1px; */ } .moreDetails { display: flex; /* flex-direction: column; */ align-items: center; gap: 10px; align-self: stretch; padding-top: 24px; justify-content: center; cursor: pointer; margin: 0px auto; border-bottom: 1px solid var(--border-Accent, #D6D1C7); } .chevron_down { background: url(../images/chevron_no_down.svg) no-repeat 0 0 transparent; width: 25px; height: 25px; background-size: 100% 100%; } .chevron_up { background: url(../images/chevron_no_up.svg) no-repeat 0 0 transparent; width: 25px; height: 25px; background-size: 100% 100%; } div.radioClass > table{ border-spacing: 0px 0px; } .containerMobile { flex-direction: column; } /*@container desktopScreen (min-width: 0) { .containerMobile { display: none; } }*/ @container tabletScreen (min-width: 0) { .TABLE{ display: none; } } @media (max-width: 767px) { .TABLE { display: none; } } .containerLVBeitrag { width: 100%; display: flex; justify-content: space-between; } .Leistungsvariante_mobil { font: var(--FONT_COPY_DEFAULT); flex-direction: column; display: flex; } .Leistungsvariante_mobil_subtitle { font: var(--FONT_COPY_XS); } .mobileLV { display: grid; border-radius: 12px; border: 1px solid #D6D1C7; justify-items: flex-start; margin: 10px 0; padding: var(--spacing-Space-6, 24px); gap: var(--spacing-Space-4, 16px); } .mobileLV.radioChecked { display: grid; justify-items: flex-start; background: var(--COLOR_SURFACE_PRIMARY); } .mobileLV:focus-within { box-shadow: var(--SELECTCARDSINGLE1_BOXSHADOW_FOCUS); } .divRadioButtonMobil:focus-within .RadioButton_Mobile { box-shadow: var(--SELECTCARDSINGLE1_BOXSHADOW_FOCUS); } .divRadioButtonMobil input:unchecked ~ .RadioButton_Mobile:after { position: absolute; content: ""; /*notwendig*/ top: 9px; left: 9px; width: 8px; height: 8px; border-radius: 50%; background-color: black; } .Optional_Choice_Mobile:focus-within .Checkbox_mobil{ /*box-shadow: var(--LINK_BOXSHADOW_FOCUS);*/ box-shadow: var(--SELECTCARDSINGLE1_BOXSHADOW_FOCUS); } .Optional_Choice_Mobile:hover input:not(:checked) ~ .Checkbox_mobil:after { border: solid lightgray; border-width: 0 2px 2px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .mobileLV.radioUnchecked:hover .RadioButton_Mobile::after { position: absolute; content: ""; top: 11px; left: 11px; width: 4px; height: 4px; border-radius: 50%; background-color: black; } .mobileLV.radioUnchecked:hover .RadioButton_Mobile{ border: 2px solid black; } .radioButton_Desktop { position: relative; /* top: 6px; */ left: -7px; height: 20px; width: 20px; background-color: #fff; border-radius: 50%; border: 1px solid #999485; display: inline-flex; } .radioButton_Desktop.checked:after { position: absolute; content: ""; /*notwendig*/ top: 6px; left: 6px; width: 8px; height: 8px; border-radius: 50%; background-color: black; } .RadioButton_Mobile { position: relative; top: 5px; left: 0; height: 25px; width: 25px; background-color: #fff; border-radius: 50%; border: 1px solid #999485; display: inline-flex; } .divRadioButtonMobil input:checked ~ .RadioButton_Mobile { /* background-color: #2196F3; */ } .divRadioButtonMobil input:checked ~ .RadioButton_Mobile:after { position: absolute; content: ""; /*notwendig*/ top: 9px; left: 9px; width: 8px; height: 8px; border-radius: 50%; background-color: black; } .containerLVBeitrag input:checked ~ .RadioButton_Mobile:after { /* display: inline-flex; */ } label.BeitragPretender_mobil { font-size: 12px; font: var(--FONT_COPY_XS); } label.Beitrag_mobil { font: var(--FONT_RADIO5_MOBILE_PRICE); letter-spacing: var(--FONT_RADIO5_MOBILE_PRICE_LETTERSPACING); } label.Zahlweise_mobil { font-size: 12px; margin-left: 2px; font: var(--FONT_COPY_XS); } div.Highlight { display: flex; gap: 4px; font: var(--FONT_COPY_DEFAULT); align-items: baseline; } div.Highlight.success { color: var(--COLOR_ADDITIONAL_GREEN_100); } div.Optional_Choice_Mobile { font: var(--FONT_COPY_DEFAULT); display: flex; } .Checkbox_desktop { position: relative; top: -1px; left: 0; margin-right: 3px; background-color: #fff; border: var(--FIELD_BORDER); box-sizing: border-box; box-shadow: var(--FIELD_BOXSHADOW); height: 20px; width: 20px; flex-shrink: 0; } .optional_Choice input:checked ~ .Checkbox_desktop:after { display: inline-flex; border: solid black; border-width: 0 2px 2px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .Checkbox_desktop.radioChecked:hover { /* border: 2px solid green; */ /* height: 18px; */ /* width: 18px; */ /* box-shadow: var(--FIELD_BOXSHADOW_HOVER); */ /* background: #0f07; */ } .Checkbox_desktop.radioUnchecked:hover { /* height: 18px; */ /* width: 18px; */ /* border: 2px solid blue; */ /* box-shadow: var(--FIELD_BOXSHADOW_HOVER); */ } .Checkbox_desktop.radioChecked { background-color: var(--COLOR_SURFACE_PRIMARY); } /* .optional_Choice:hover input ~ .Checkbox_desktop { */ /* background-color: #ccc; */ /* } */ /* .optional_Choice input:checked ~ .Checkbox_desktop { */ /* background-color: red; */ /* } */ .Checkbox_mobil:after, .Checkbox_desktop:after { content: ""; position: relative; } .Checkbox_mobil { position: relative; /* top: -3px; */ left: -1px; margin-right: 12px; height: 24px; width: 24px; background-color: #fff; display: inline-flex; border: var(--FIELD_BORDER); box-sizing: border-box; box-shadow: var(--FIELD_BOXSHADOW); } .Optional_Choice_Mobile input:checked ~ .Checkbox_mobil:after { border: solid black; border-width: 0 2px 2px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .Optional_Choice_Mobile .Checkbox_mobil:after { top: 1px; width: 7px; height: 14px; border: solid transparent; border-width: 0 2px 2px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); display: flex; margin-left: 7px; } .optional_Choice .Checkbox_desktop:after { left: 6px; top: 1px; width: 6px; height: 12px; border: solid transparent; border-width: 0 2px 2px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); /* display: flex; */ } .Optional_Choice_Mobile:hover input ~ .Checkbox_mobil { box-shadow: var(--FIELD_BOXSHADOW_HOVER); } .radio5 div.helpClass { background: url(../images/info.svg) no-repeat 0 0 transparent; width: 24px; height: 24px; /*background-size: 20px;*/ } div.haken_desktop { background: url(../images/check.svg) no-repeat 0 0 transparent; width: 24px; height: 24px; /* background-size: 100% 100%; */ display: inline-block; } div.minus_desktop { background: url(../images/minus.svg) no-repeat 0 0 transparent; width: 24px; height: 24px; /* background-size: 100% 100%; */ display: inline-block; } div.haken_mobil { background: url(../images/check_green.svg) no-repeat 0 0 transparent; width: 15px; height: 15px; background-size: 100% 100%; display: inline-block; } div.minus_mobil { background: url(../images/minus.svg) no-repeat 0 0 transparent; width: 15px; height: 15px; background-size: 100% 100%; display: inline-block; } a.AlleAnzeigen { text-decoration: none; cursor: pointer; color: #000; font: var(--FONT_COPY_XS); display: flex; gap: var(--spacing-Space-2, 8px); /*box-shadow: rgb(143, 134, 43) 0px 1px 0px 0px;*/ border-bottom: solid 1px rgb(153, 148, 133); } .AlleAnzeigen:focus { /*box-shadow: var(--LINK_BOXSHADOW_HOVER);*/ border-bottom: solid 2px rgb(0, 0, 0); } .AlleAnzeigen:hover { /*box-shadow: var(--LINK_BOXSHADOW_HOVER);*/ border-bottom: solid 2px rgb(0, 0, 0); } div.pfeil { background: url(../images/arrow.svg) no-repeat 0 0 transparent; width: 15px; height: 15px; background-size: 100% 100%; display: inline-block; } /* End radio5 */ /* a.radio2 { flex: 1 1 100%; } */ /******************** contacts ********************/ .commentClass.label1.contactsAligned { /*make this part of contacts control, as its label */ padding-left: var(--CONTACTS_MARGIN_LEFT); font: var(--FONT_CONTACTS_LABEL); letter-spacing: var(--FONT_CONTACTS_LABEL_LETTERSPACING); color: var(--COLOR_CONTACTS_LABEL); } /******************** Label ********************/ .commentClass.label1 { /*change to label? this is used for target=label without any style*/ font: var(--FONT_LABEL1); letter-spacing: var(--FONT_LABEL1_LETTERSPACING); color: var(--COLOR_LABEL1); } /******************** Hint1 ********************/ div.hint1 > div.control { display: flex; flex-direction: row; gap: var(--HINT1_ICON_TO_LABEL_GAP); padding: var(--HINT1_PADDING); background: var(--COLOR_HINT1_BACKGROUND); word-break: break-word; } div.hint1.Info > div.control { border-left: var(--HINT1_INFO_BORDER); color: var(--COLOR_HINT1_INFO_LABEL); } div.hint1.Sale > div.control { border-left: var(--HINT1_SALE_BORDER); color: var(--COLOR_HINT1_SALE_LABEL); } div.hint1 > div.control > div:first-of-type { min-width: var(--HINT1_ICON_BACKGROUND_SIZE); height: var(--HINT1_ICON_BACKGROUND_SIZE); border-radius: 50%; } div.hint1.Info > div.control > div:first-of-type { background: url("../images/alert.svg") no-repeat scroll center center var(--COLOR_HINT1_ICON_BACKGROUND); } div.hint1.Sale > div.control > div:first-of-type { background: url("../images/percent.svg") no-repeat scroll center center var(--COLOR_HINT1_SALE_ICON_BACKGROUND); } div.hint1 > div.control > div > label:first-of-type { display: block; font: var(--FONT_HINT1_LABEL); letter-spacing: var(--FONT_HINT1_LABEL_LETTERSPACING); } div.hint1 > div.control > div > label:not(:first-of-type) { display: block; margin-top: var(--HINT1_LABEL_TO_TEXT_GAP); font: var(--FONT_HINT1_TEXT); letter-spacing: var(--FONT_HINT1_TEXT_LETTERSPACING); } div.hint1 > div.control > div > label:not(:first-of-type) > p { margin-block-start: 0; margin-block-end: 0; } div.hint1 > div.control > div > label:not(:first-of-type) > p:not(:first-of-type) { margin-top: var(--HINT1_LABEL_TO_TEXT_GAP); } /******************** List1 ********************/ div.list1 > div.control { display: flex; flex-direction: column; gap: var(var(--LIST1_LABEL_TO_TEXT_GAP)); word-break: break-word; } div.list1 > div.control > label.title { font: var(--FONT_LIST1_LABEL); letter-spacing: var(--FONT_LIST1_LABEL_LETTERSPACING); } div.list1 > div.control > label.text { margin-block-start: 0; margin-block-end: 0; } div.list1.Size_L > div.control > label.text { font: var(--FONT_LIST1_L_TEXT); letter-spacing: var(--FONT_LIST1_L_TEXT_LETTERSPACING); } div.list1.Size_M > div.control > label.text { font: var(--FONT_LIST1_M_TEXT); letter-spacing: var(--FONT_LIST1_M_TEXT_LETTERSPACING); } div.list1.Size_S > div.control > label.text { font: var(--FONT_LIST1_S_TEXT); letter-spacing: var(--FONT_LIST1_S_TEXT_LETTERSPACING); } div.list1.Checklist > div.control > label.text > ul > li { list-style-image: url("../images/check.svg"); padding-left: 8px; /*Estimated; every browser has its own standard distance which can only be added to by padding*/ } div.list1.Checklist.Size_L > div.control > label.text > ul > li:not(:last-of-type) { margin-bottom: var(--LIST1_L_ITEMS_GAP); } div.list1.Checklist.Size_M > div.control > label.text > ul > li:not(:last-of-type) { margin-bottom: var(--LIST1_M_ITEMS_GAP); } div.list1.Checklist.Size_S > div.control > label.text > ul > li:not(:last-of-type) { margin-bottom: var(--LIST1_S_ITEMS_GAP); } @media (max-width: 767px) { div.itemFull:has( div.list1.hideOnMobile ) { /* No display of Lists for mobile; wait if the spec is wrong here */ display:none; } } /******************** help1 ********************/ /* Consider changing control to name "link" */ .help1 > .link { display: flex; width: fit-content; padding-top: var(--LINK_LABEL_VERTICAL_PAD); padding-bottom: var(--LINK_LABEL_VERTICAL_PAD); box-shadow: var(--LINK_BOXSHADOW); transition: var(--TRANSITION_FADE_BORDER); } .help1 > .link:focus-within { box-shadow: var(--LINK_BOXSHADOW_FOCUS); } help1 > .link:hover { box-shadow: var(--LINK_BOXSHADOW_HOVER); } help1 > .link.errorField { box-shadow: var(--LINK_BOXSHADOW_ERROR); } help1 > .link > a { display: flex; min-height: var(--LINK_ICON_SIZE); padding-left: calc(var(--LINK_ICON_SIZE) + var(--LINK_ICON_TO_LABEL_GAP)); padding-top: 0; padding-bottom: 0; background: url("../images/document.svg") no-repeat scroll 0 0 transparent; text-decoration: none; } .help1 > .link > a > label { display: flex; margin: auto; font: var(--FONT_LINK); letter-spacing: var(--FONT_LINK_LETTERSPACING); color: var(--COLOR_LINK); } .help1 > .link > a > label:after { content: ""; background: url("../images/arrow_no_right.svg") no-repeat scroll center transparent; background-size: var(--LINK_ICON_SIZE) var(--LINK_ICON_SIZE); width: var(--LINK_ICON_SIZE); min-width: var(--LINK_ICON_SIZE); /* Otherwise arrow gets shrinked proportionally for small displays, since space is shared with text */ margin-left: var(--LINK_LABEL_TO_ARROW_GAP); /* min-height: var(--LINK_ICON_SIZE);*/ } .help1 > .text { font: var(--FONT_LINK_SUBTEXT); letter-spacing: var(--FONT_LINK_SUBTEXT_LETTERSPACING); cursor: pointer; word-break: break-word; } /******************** Contacts ********************/ .contacts > div { display: flex; flex-direction: row; flex: 0 1 100%; min-width: 100%; gap: var(--ITEM_GAP); } .contacts > div > div { display: flex; padding-top: var(--CONTACTS_LABEL_VERTICAL_PAD); padding-bottom: var(--CONTACTS_LABEL_VERTICAL_PAD); box-shadow: var(--CONTACTS_BOXSHADOW); transition: var(--TRANSITION_FADE_BORDER); width: calc(50% - var(--ITEM_GAP)); } .contacts > div > div:focus-within { box-shadow: var(--CONTACTS_BOXSHADOW_FOCUS); } .contacts > div > div:hover { box-shadow: var(--CONTACTS_BOXSHADOW_HOVER); cursor: pointer; } .contacts > div > div > a label:hover { cursor: pointer; } .contacts > div > div.errorField { box-shadow: var(--CONTACTS_BOXSHADOW_ERROR); } .contacts > div > div > a { display: flex; min-height: var(--CONTACTS_ICON_SIZE); padding-left: calc(var(--CONTACTS_ICON_SIZE) + var(--CONTACTS_ICON_TO_LABEL_GAP)); padding-top: 0; padding-bottom: 0; background: url("../images/document.svg") no-repeat scroll 0 0 transparent; text-decoration: none; } .contacts > div > div > a.telefonContact { background: url("../images/phone.svg") no-repeat scroll 0 0 transparent; } .contacts > div > div > a.rueckrufServiceContact { background: url("../images/callback.svg") no-repeat scroll 0 0 transparent; } .contacts > div > div > a > label { display: flex; margin: auto; font: var(--FONT_CONTACTS); letter-spacing: var(--FONT_CONTACTS_LETTERSPACING); color: var(--COLOR_CONTACTS); } .contacts > div > div > a > label:after { content: ""; background: url("../images/arrow_no_right.svg") no-repeat scroll center transparent; background-size: var(--CONTACTS_ICON_SIZE) var(--CONTACTS_ICON_SIZE); width: var(--CONTACTS_ICON_SIZE); margin-left: var(--CONTACTS_LABEL_TO_ARROW_GAP); /* min-height: var(--CONTACTS_ICON_SIZE);*/ } /******************** Content of header area ********************/ div.headerContent { display: flex; width: 100%; max-width: var(--HEADER_MAX_WIDTH); /* height: 50px; */ padding-left: var(--HEADER_HORIZONTAL_PADDING); padding-right: var(--HEADER_HORIZONTAL_PADDING); margin-top: var(--HEADER_TO_FORM_GAP); margin-bottom: var(--HEADER_TO_FORM_GAP); flex-direction: column; gap: var(--HEADER_ROWS_GAP); } div.headerHeadline > h1 { font: var(--FONT_PAGE_HEADER); margin-block-start: 0; margin-block-end: 0; } .headerFeeAndMenu { align-self: stretch; display: flex; flex-direction: row; align-items: center; justify-content: flex-start; /* gap: 24px;*/ } .headerFeeAndMenuLeft { flex: 1; position: relative; font: var(--FONT_HEADER_FEE_MENU_LEFT); letter-spacing: var(--FONT_HEADER_FEE_MENU_LEFT_LETTER_SPACING); } .headerFeeAndMenuRight { display: flex; flex-direction: row; gap: var(--HEADER_PRICE_MENU_GAP); } .headerFeeLabel { } .headerFeeValue { font: var(--FONT_HEADER_FEE_VALUE); } div.headerMenu { background: transparent url(../images/menu.svg) no-repeat scroll center center; background-size: cover; cursor: pointer; width: var(--HEADER_MENU_BUTTON_SIZE); height: var(--HEADER_MENU_BUTTON_SIZE); } div.headerMenu:focus { /*border: 1px solid black;*/ box-shadow: var(--FIELD_BOXSHADOW_FOCUS); outline: none; } div.headerMenu.pdf { background: transparent url("../images/menue_download.png") no-repeat scroll center center; } div.headerMenu.opacity.disabled { cursor: default; opacity: 0; } /******************** headerMenu ********************/ div.headerMenu>div { display: table; position: relative; float: right; right: 0; top: var(--HEADER_MENU_BUTTON_SIZE); padding: var(--HEADERMENU_POPUP_PAD_TOPBOTTOM) 0; background-color: var(--COLOR_MENU_POPUP); cursor: default; border: var(--HEADERMENU_BORDER); border-radius: var(--HEADERMENU_BORDER_RADIUS); overflow: hidden; transition: var(--TRANSITION_MENU_POPUP); opacity: 0%; pointer-events: none; /* do not catch clicks on invisible menu */ } div.headerMenu>div.visible { top: calc( var(--HEADER_MENU_BUTTON_SIZE) + var(--HEADERMENU_POPUP_TO_BUTTON_GAP) ); right: var(--HEADERMENU_POPUP_MARGIN_RIGHT); height: initial; z-index: 25; opacity: 100%; pointer-events: initial; } div.headerMenu ul { cursor: pointer; list-style: outside none none; margin-block-start: 0; margin-block-end: 0; margin-inline-start: 0; margin-inline-end: 0; padding-inline-start: 0; } div.headerMenu li { display: flex; position: relative; align-items: center; justify-content: center; padding: var(--HEADERMENU_ITEM_PAD); font: var(--FONT_MENU_ITEM); letter-spacing : var(--FONT_MENU_ITEM_LETTERSPACING); color: var(--COLOR_MENU_POPUP_ITEM); white-space: nowrap; } div.headerMenu li:hover { background-color: var(--COLOR_MENU_ITEM_BACKGROUND_HOVER); } div.headerMenu li>span>div { cursor: pointer; } div.headerMenu li.border { /* border-bottom: 2px solid #d8d8d8;*/ height: 0px; /* No grouping of items in the moment, wait to see if grouping will be implemented */ position: relative; padding: 0; margin: 0; } div.headerMenu span:last-of-type { /* color: #000; font-family: ARAGWalsheimMd,Helvetica,sans-serif; font-size: 16px; left: -10px; white-space: nowrap;*/ } /******************** LandingPage ********************/ /* NO DEFINITION YET; IF REMOVED, STANDARD LABEL DEFINTION ((.commentClass.label1) IS USED */ .commentClass.label1.landingPageText { font: var(--FONT_LABEL1); letter-spacing: var(--FONT_LABEL1_LETTERSPACING); color: var(--COLOR_LABEL1); text-align: center; } .landingPageImage { background: transparent url("../images/Loader-206x206.jpg") no-repeat center center; padding: 130px 50px; } /******************** Table1 ********************/ div.container.style2 > div.table { min-width: calc(100% - 20px); margin: 0 10px; } .table1 { margin-top: var(--FORM_SECTION_HEADER_IN_ITEM_MARGIN_TOP); display: flex; flex-direction: column; } .table1 > label { margin-bottom: var(--TABLE1_OUTERLABEL_TO_CONTROL_GAP); font: var(--FONT_TABLE1_OUTERLABEL); letter-spacing: var(--FONT_TABLE1_OUTERLABEL_LETTERSPACING); } div.table1 div.tableRow { display: flex; padding-top: var(--TABLE1_VERTICAL_PAD); padding-bottom: var(--TABLE1_VERTICAL_PAD); padding-right: var(--TABLE1_PADDING_RIGHT); background-color: var(--COLOR_TABLE1_BACKGROUND); box-shadow: var(--TABLE1_BOXSHADOW); transition: var(--TRANSITION_FADE_BORDER); font: var(--FONT_TABLE1_CONTENT); letter-spacing: var(--FONT_TABLE1_CONTENT_LETTERSPACING); color: var(--COLOR_TABLE1_CONTENT); } div.table1 div.tableRow:focus-within { box-shadow: var(--TABLE1_BOXSHADOW_FOCUS); } div.table1 div.tableRow:hover { box-shadow: var(--TABLE1_BOXSHADOW_HOVER); } div.tableRow > div.label { display: flex; align-items: center; width: 100%; padding: 0 0; justify-content: space-between; } div.tableRow > div.label.enabled { cursor: pointer; } div.tableRow > div.label > div { font: var(--FONT_TABLE1_CONTENT); letter-spacing : var(--FONT_TABLE1_CONTENT_LETTERSPACING); color: var(--COLOR_TABLE1_CONTENT); } div.tableRow > div.label > div > label:first-of-type{ font: var(--FONT_TABLE1_SUBTITLE); letter-spacing : var(--FONT_TABLE1_SUBTITLE_LETTERSPACING); color: var(--COLOR_TABLE1_SUBTITLE); } div.tableRow > div.label > div > label:not(:first-of-type){ margin-top: var(--TABLE1_TEXT_CONTENT_TO_SUBTITLE_GAP); } div.tableRow > div.label > div > ul { /* padding-top: var(--TABLE1_LIST_CONTENT_TO_SUBTITLE_GAP);*/ margin-block-start: 0; margin-block-end: 0; margin-inline-start: 0; margin-inline-end: 0; padding-inline-start: 0; list-style-position: inside; font: var(--FONT_TABLE1_CONTENT); letter-spacing : var(--FONT_TABLE1_CONTENT_LETTERSPACING); color: var(--COLOR_TABLE1_CONTENT); } div.tableRow > div.label > div > ul > li { padding-top: var(--TABLE1_LIST_CONTENT_TO_SUBTITLE_GAP); } div.tableRow > div > div.tableMenu { position: relative; display: flex; flex-direction: column; width: var(--HEADER_MENU_BUTTON_SIZE); height: var(--HEADER_MENU_BUTTON_SIZE); background: transparent url(../images/menu.svg) no-repeat scroll center center; background-size: cover; cursor: pointer; overflow: visible; } div.tableMenu>div { display: flex; flex-direction: column; position: absolute; right: 0; top: var(--HEADER_MENU_BUTTON_SIZE); padding: var(--HEADERMENU_POPUP_PAD_TOPBOTTOM) 0; background-color: var(--COLOR_MENU_POPUP); cursor: default; border: var(--HEADERMENU_BORDER); border-radius: var(--HEADERMENU_BORDER_RADIUS); overflow: hidden; transition: var(--TRANSITION_MENU_POPUP); opacity: 0%; pointer-events: none; /* do not catch clicks on invisible menu */ } div.tableMenu>div.visible { top: calc( var(--HEADER_MENU_BUTTON_SIZE) + var(--HEADERMENU_POPUP_TO_BUTTON_GAP) ); right: var(--HEADERMENU_POPUP_MARGIN_RIGHT); height: initial; z-index: 25; opacity: 100%; pointer-events: initial; } div.tableMenu > div > a { display: flex; position: relative; align-items: center; justify-content: center; padding: var(--HEADERMENU_ITEM_PAD); font: var(--FONT_MENU_ITEM); letter-spacing : var(--FONT_MENU_ITEM_LETTERSPACING); color: var(--COLOR_MENU_POPUP_ITEM); white-space: nowrap; text-decoration: none; } div.tableMenu > div > a:hover { background-color: var(--COLOR_MENU_ITEM_BACKGROUND_HOVER); } div.tableMenu > div > a:focus { outline: auto; } div.tablePlus { width: 100%; height: 100%; margin-top: var(--TABLE1_LISTNEW_BUTTON_GEP); } div.tablePlus > a { display: flex; height: var(--BUTTON_FORWARD_LABEL_SIZE); padding: var(--FIELD_CONTENT_VERTICAL_PAD) var(--FIELD_CONTENT_HORIZONTAL_PAD); justify-content:center; background: var(--COLOR_FORWARD_BACKGROUND); border-radius: var(--FIELD_BORDER_RADIUS); border: var(--FIELD_BORDER); box-shadow: var(--FIELD_BOXSHADOW); text-decoration: none; font: var(--FONT_FORWARD_LABEL); letter-spacing: var(--FONT_FORWARD_LABEL_LETTER_SPACING); color: var(--COLOR_FORWARD_LABEL); cursor: pointer; white-space: nowrap; transition: var(--TRANSITION_FADE_BORDER); } div.tablePlus > a:focus-visible { box-shadow: var(--FIELD_BOXSHADOW_FOCUS); } div.tablePlus > a:hover { box-shadow: var(--FIELD_BOXSHADOW_HOVER); } div.tablePlus > a > div { align-content: center; } /******************** Upload1 ********************/ div.upload1 { display: flex; flex-flow: column; width: 100%; } div.progressUpload { background: transparent; width: 32px; height: 32px; margin-left: 50%; margin-top: 350px; } div.progressTransparent { background: none repeat scroll 0 0 transparent; height: 100%; position: fixed; top: 0; width: 100%; z-index: 100; right: 0; } div.progressTransparentNone { display: none; } div.upload1 > div.uploadBaseDiv { display: flex; min-width: 343px; padding: var(--SPACE_8); flex-direction: column; align-items: center; gap: var(--SPACE_8); align-self: stretch; border-radius: var(--UPDATE1_DRAGFIELD_BORDER_RADIUS); border: var(--UPDATE1_DRAGFIELD_BORDER); } div.upload1 > div.uploadBaseDiv.dragover, div.upload1 > div.uploadBaseDiv.loadFiles { background-color: var(--COLOR_UPLOAD1_BACKGROUND_DRAG); } div.upload1 > div.uploadBaseDiv > div.uploadDiv { display: flex; align-items: center; justify-content: center; padding: var(--SPACE_5); gap: 12px; border-radius: var(--BORDER_RADIUS_ROUNDEDFULL); border: 1px solid var(--COLOR_BORDER_PRIMARY); background: var(--COLOR_BRAND_YELLOW); } a.uploadLink { font: var(--FONT_UPLOAD1_LINKTEXT); letter-spacing: var(--FONT_UPLOAD1_LINKTEXT_LETTERSPACING); color: var(--COLOR_UPLOAD1_LINKTEXT); cursor: pointer; } a.uploadLink.dragover, a.uploadLink.loadFiles { color: var(--COLOR_UPLOAD1_LINKTEXT_DRAG); } div.upload1 > div.uploadBaseDiv > div.uploadDiv.dragover { background: var(--COLOR_SURFACE_TERTIARY); } div.upload1 > div.uploadBaseDiv > label { font: var(--FONT_UPLOAD1_LABEL); letter-spacing : var(--FONT_UPLOAD1_LABEL_LETTERSPACING); text-align: center; } div.upload1 > label { display: flex; font: var(--FONT_UPLOAD1_FILELIST_LABEL); letter-spacing : var(--FONT_UPLOAD1_FILELIST_LABEL_LETTERSPACING); padding-top: var(--SPACE_6); } div.upload1 > div.uploadBaseDiv > div.uploadDiv > a { background: transparent url(../images/upload.svg) no-repeat scroll center center; display: flex; padding: var(--SPACE_5); justify-content: center; align-items: center; gap: 12px; } div.upload1 > div.uploadBaseDiv > div.uploadDiv.loadFiles > a { background: transparent url(../images/spinner.svg) no-repeat scroll center center; display: flex; padding: var(--SPACE_5); justify-content: center; align-items: center; gap: 12px; -webkit-animation:spin 4s linear infinite; -moz-animation:spin 4s linear infinite; animation:spin 4s linear infinite; } @-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } } @-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } } @keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } } div.upload1 > div.inputFileDiv { display: none; } div.upload1 > div.fileListDiv > ul { padding-left: 0px; } div.upload1 > div.fileListDiv > ul > li { display: flex; font: var(--FONT_UPLOAD1_FILELIST_ITEM); letter-spacing: var(--FONT_UPLOAD1_FILELIST_ITEM_LETTERSPACING); padding-top: var(--UPDATE1_FILELIST_VERTICAL_PAD); padding-bottom: var(--UPDATE1_FILELIST_VERTICAL_PAD); padding-right: var(--UPDATE1_FILELIST_PADDING_RIGHT); background-color: var(--COLOR_UPLOAD1_BACKGROUND); box-shadow: var(--UPDATE1_FILELIST_BOXSHADOW); transition: var(--TRANSITION_FADE_BORDER); } div.upload1 > div.fileListDiv > ul > li:focus-within { box-shadow: var(--UPDATE1_FILELIST_BOXSHADOW_FOCUS); } div.upload1 > div.fileListDiv > ul > li:hover { box-shadow: var(--UPDATE1_FILELIST_BOXSHADOW_HOVER); } div.upload1 > div.fileListDiv > ul > li > a { background: transparent url(../images/delete.svg) no-repeat scroll center center; min-width: 24px; min-height: 24px; } div.upload1 > div.fileListDiv > ul > li > a.loading { background: none; } div.upload1 > div.fileListDiv > ul > li > a.error { background: transparent url(../images/close.png) no-repeat scroll center center; min-width: 24px; min-height: 24px; background-size: 16px; } /**************** CheckboxImage ********************************************/ div.checkboxImage > div > a.booleanChecked, div.checkboxImage > div > a.booleanUnchecked { height: var(--CHECKBOX_IMAGE_BOX_SIZE); min-width: var(--CHECKBOX_IMAGE_BOX_SIZE); box-shadow: var(--CHECKBOX_IMAGE_BOXSHADOW); transition: var(--TRANSITION_FADE_BORDER); } div.checkboxImage > div > a.booleanChecked { background: var(--COLOR_CHECKBOX_IMAGE_CHECKED_BACKGROUND) url("../images/check.svg") no-repeat scroll center; background-size: var(--CHECKBOX_IMAGE_CHECK_SIZE) var(--CHECKBOX_IMAGE_CHECK_SIZE); } div.checkboxImage > div > a.booleanUnchecked { background: var(--COLOR_CHECKBOX_IMAGE_BACKGROUND) no-repeat scroll 0px 0px; background-size: var(--CHECKBOX_IMAGE_CHECK_SIZE) var(--CHECKBOX_IMAGE_CHECK_SIZE); } div.checkboxImage > div > a.booleanChecked:focus-visible, div.checkboxImage > div > a.booleanUnchecked:focus-visible { box-shadow: var(--CHECKBOX_IMAGE_BOXSHADOW_FOCUS); } div.checkboxImage > div > a.booleanChecked:hover, div.checkboxImage > div > a.booleanUnchecked:hover { box-shadow: var(--CHECKBOX_IMAGE_BOXSHADOW_HOVER); } div.checkboxImage > div > a.booleanUnchecked:hover { position: relative; } div.checkboxImage > div > a.booleanUnchecked:hover::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--COLOR_CHECKBOX_IMAGE_BACKGROUND) url("../images/check.svg") no-repeat scroll center; background-size: var(--CHECKBOX_IMAGE_CHECK_SIZE) var(--CHECKBOX_IMAGE_CHECK_SIZE); opacity: var(--CHECKBOX_IMAGE_HOVER_CHECK_OPACITY); /* z-index: 1;*/ /* Ensure the pseudo-element is behind the content */ } div.checkboxImage > div > a.booleanChecked:errorField, div.checkboxImage > div > a.booleanUnchecked:errorField { box-shadow: var(--CHECKBOX_IMAGE_BOXSHADOW_ERROR); } div.checkboxImage.booleanCompactClass { display: flex; flex-flow: column; } div.checkboxImage.booleanCompactClass > div > label { margin-left: var(--CHECKBOX_IMAGE_BOX_TO_LABEL_GAP); margin-top: 0px; font: var(--FONT_CHECKBOX_IMAGE_LABEL); letter-spacing: var(--FONT_CHECKBOX_IMAGE_INPUT_LETTERSPACING); color: var(--COLOR_CHECKBOX_IMAGE_LABEL); cursor: pointer; } div.checkboxImage.booleanCompactClass> div > label > a { background: url("../images/link.gif") no-repeat scroll 0 center transparent; color: black; font-weight: bold; padding-left: 10px; text-decoration: none; } div.checkboxImage.booleanCompactClass> div > label > a:hover { text-decoration: underline; } div.checkboxImage.booleanCompactClass > div > label > p { margin-block-end: 0; /*So no space after final Paragraph*/ } tr.tableCell > td > div.checkboxImage > div > a.booleanChecked, tr.tableCell > td > div.checkboxImage > div > a.booleanUnchecked { display: flex; } div.table.checkboxImage > div > a.booleanChecked { background: url("../images/checkedSmall.png") no-repeat scroll center center transparent; } div.table.checkboxImage > div > a.booleanUnchecked { background: url("../images/uncheckedSmall.png") no-repeat scroll center center transparent; } /**************** CheckboxImage SDM Glas ********************************************/ div.checkboxImage.imageGlasbruch > div.dataClass.checkboxImageClass { background: url("../images/glasbruch.png") no-repeat scroll 0 center transparent; height: 300px; margin-top: var(--SPACE_3); } div.checkboxImage.imageGlaskorrosion > div.dataClass.checkboxImageClass { background: url("../images/korrosion.png") no-repeat scroll 0 center transparent; height: 300px; margin-top: var(--SPACE_3); } div.checkboxImage.imageGlaskratzer > div.dataClass.checkboxImageClass { background: url("../images/kratzer.png") no-repeat scroll 0 center transparent; height: 300px; margin-top: var(--SPACE_3); } div.checkboxImage.imageGlasmuschelbruch > div.dataClass.checkboxImageClass { background: url("../images/muschel_bruch.png") no-repeat scroll 0 center transparent; height: 300px; margin-top: var(--SPACE_3); } @media (max-width: 767px) { div.checkboxImage.imageGlasbruch > div.dataClass.checkboxImageClass { width: 280px; height: 200px; margin-top: var(--SPACE_3); } div.checkboxImage.imageGlaskorrosion > div.dataClass.checkboxImageClass { width: 280px; height: 200px; margin-top: var(--SPACE_3); } div.checkboxImage.imageGlaskratzer > div.dataClass.checkboxImageClass { width: 280px; height: 200px; margin-top: var(--SPACE_3); } div.checkboxImage.imageGlasmuschelbruch > div.dataClass.checkboxImageClass { width: 280px; height: 200px; margin-top: var(--SPACE_3); } } /******************** time ********************/ .dataClass.time { display: flex; flex-direction: row; position: relative; justify-content: flex-start; height: var(--FIELD_MIN_HEIGHT); width: 100%; /* min-width: 148px;*/ padding: var(--FIELD_CONTENT_VERTICAL_PAD) var(--FIELD_CONTENT_HORIZONTAL_PAD); border-radius: var(--FIELD_BORDER_RADIUS); border: var(--FIELD_BORDER); box-sizing: border-box; box-shadow: var(--FIELD_BOXSHADOW); align-items: center; text-align: left; text-decoration: none; cursor: pointer; white-space: nowrap; transition: var(--TRANSITION_FADE_BORDER); } .dataClass.time:focus-within { box-shadow: var(--FIELD_BOXSHADOW_FOCUS); } .dataClass.time:hover { box-shadow: var(--FIELD_BOXSHADOW_HOVER); } .dataClass.time.errorField { box-shadow: var(--FIELD_BOXSHADOW_ERROR); } .dataClass.dataClassDisabled.time { box-shadow: var(--FIELD_BOXSHADOW_DISABLED); } .dataClass.time > div > div.movingLabel { position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; height: fit-content; /* transition: all 12s;*/ transition: var(--TRANSITION_INPUT_LABEL); font: var(--FONT_STRING_INPUT); letter-spacing: var(--FONT_STRING_INPUT_LETTERSPACING); color: var(--COLOR_STRING_INPUT); } .dataClass.time > div > input:not(:placeholder-shown) + .movingLabel, .dataClass.time > div > input:focus + .movingLabel, .dataClass.time > div > input:-webkit-autofill + .movingLabel { transform: translateY(-100%); font: var(--FONT_STRING_LABEL); letter-spacing: var(--FONT_STRING_LABEL_LETTERSPACING); color: var(--COLOR_STRING_LABEL); } .dataClass.dataClassDisabled.time > div > div.movingLabel { transform: translateY(-100%); font: var(--FONT_STRING_LABEL); letter-spacing: var(--FONT_STRING_LABEL_LETTERSPACING); color: var(--COLOR_STRING_LABEL_DISABLED); } .dataClass.time > div { display: flex; flex-direction: column; flex: 1; position: relative; } .dataClass.time > div > div { font: var(--FONT_STRING_LABEL); letter-spacing: var(--FONT_STRING_LABEL_LETTERSPACING); } .dataClass.time > div > input { padding: 0; background: var(--INPUT_BACKGROUND); border: var(--INPUT_BORDER); font: var(--FONT_STRING_INPUT); letter-spacing: var(--FONT_STRING_INPUT_LETTERSPACING); color: var(--COLOR_STRING_INPUT); } .dataClass.dataClassDisabled.time > div > label { padding: 0; background: var(--INPUT_BACKGROUND); border: var(--INPUT_BORDER); font: var(--FONT_STRING_INPUT); letter-spacing: var(--FONT_STRING_INPUT_LETTERSPACING); color: var(--COLOR_STRING_INPUT_DISABLED); } .dataClass.time > div > input::placeholder { /*color: transparent; */ } .labelClass.time > label { margin-bottom: var(--STRING_OUTERLABEL_TO_CONTROL_GAP); font: var(--FONT_STRING_OUTERLABEL); letter-spacing: var(--FONT_STRING_OUTERLABEL_LETTERSPACING); } /******************** radioGroup - Boolean als Radio *********************/ div.itemFull.radioGroup { display: grid; } div.radioGroup { grid-template-columns: repeat(var(--GRID_COLUMN_COUNT),1fr); column-gap: var(--ITEM_GAP); row-gap: var(--FORM_FIELD_ROW_GAP); } div.radioGroup > a { display: flex; flex-direction: row; position: relative; align-items: center; justify-content: flex-start; height: var(--FIELD_MIN_HEIGHT); width: 100%; /*min-width: 148px;*/ padding: 0px var(--FIELD_CONTENT_HORIZONTAL_PAD); border-radius: var(--FIELD_BORDER_RADIUS); border: var(--FIELD_BORDER); box-sizing: border-box; box-shadow: var(--FIELD_BOXSHADOW); text-align: left; text-decoration: none; font: var(--FONT_RADIO2_ITEM); letter-spacing: var(--FONT_RADIO2_ITEM_LETTER_SPACING); color: var(--COLOR_RADIO2_ITEM); cursor: pointer; white-space: nowrap; transition: var(--TRANSITION_FADE_BORDER); } div.radioGroup > a.booleanChecked { background-color: var(--COLOR_SURFACE_PRIMARY); } div.radioGroup > a.booleanUnchecked { background-color: transparent; } div.radioGroup > a.booleanChecked { background-color: var(--COLOR_SURFACE_PRIMARY); } div.radioGroup > a.booleanUnchecked { background-color: transparent; } div.radioGroup > a.booleanUnchecked:focus-visible, div.radioGroup > a.booleanChecked:focus-visible { box-shadow: var(--FIELD_BOXSHADOW_FOCUS); } .errorField > a.booleanUnchecked, .errorField > a.booleanChecked { box-shadow: var(--FIELD_BOXSHADOW_ERROR); } div.radioGroup > a.booleanUnchecked:hover, div.radioGroup > a.booleanChecked:hover { box-shadow: var(--FIELD_BOXSHADOW_HOVER); } div.radioGroup.booleanCompactClass > label { margin-bottom: var(--RADIO2_OUTERLABEL_TO_CONTROL_GAP); font: var(--FONT_RADIO2_LABEL); letter-spacing: var(--FONT_RADIO2_LABEL_LETTERSPACING); } .radioGroup_knob { position: absolute; top: calc(50% - 4px); left: calc(50% - 4px); width: 8px; height: 8px; border-radius: var(--BORDER_RADIUS_ROUNDEDFULL); background-color: var(--COLOR_NEUTRALS_BLACK); overflow: hidden; } .booleanUnchecked > div > div > .radioGroup_knob { background-color: transparent; } .booleanUnchecked:hover > div > div > .radioGroup_knob { background-color: rgba(0, 0, 0, 0.16); } .radioGroup_bgKnob { position: relative; width: 26px; height: 26px; margin: 0 !important; border-radius: var(--BORDER_RADIUS_ROUNDEDFULL); background-color: var(--COLOR_CANVAS_PRIMARY); border: var(--RADIO2_BUTTON_BORDER); box-sizing: border-box; z-index: 2; } a.radioGroup.radioUnchecked > .radioGroup_radiobutton > .radioGroup_bgKnob { background-color: transparent; } div.radioGroup.errorField > a.radio2 > .radioGroup_radiobutton > .radioGroup_bgKnob { border: var(--RADIO2_BUTTON_BORDER_ERROR); } .radioGroup_radiobutton { flex: 1; display: flex; flex-direction: row; align-items: flex-start; justify-content: flex-start; position: relative; gap: var(--RADIO2_BUTTON_TO_TEXT_GAP); } /* ------------------- radioGroup als Radio ---------ENDE------------------------------*/ div.labelAndInputDiv.errorField { border: none !important; } @media (max-width: 767px) { div.button_Forward > a { width: 100%; } } /******************** divider ********************/ div.divider { /*box-shadow: var(--BORDER_WIDTH_PRIMARY) 0px 0px 0px inset var(--COLOR_BORDER_PRIMARY);*/ width: 100%; height: var(--DIVIDER_HEIGHT); border-top: var(--DIVIDER_BORDER_TOP); box-sizing: border-box; } /******************** Pricings ********************/ .pricings > .pricingsHeader { margin-top: 56px; margin-bottom: 0px; font: normal normal 500 var(--FONT_SIZE_2XL) / 100% GT_Walsheim_ARAG_CondensedRegular; letter-spacing: normal; } .pricings > .pricingsList { list-style: none; margin: 0; padding: 0; } .pricings > .pricingsList .pricingItem { display: flex; justify-content: space-between; position: relative; padding-top: var(--SPACE_6); padding-bottom: var(--SPACE_6); padding-left: 0; padding-right: calc(var(--SPACE_4) + 16px); vertical-align: middle; box-shadow: var(--AMOUNT_BORDER_TEXT_SECONDARY); font: var(--FONT_AMOUNT_ITEM); letter-spacing: var(--FONT_AMOUNT_ITEM_LETTER_SPACING); } .pricings > .pricingsList .pricingItem > .pricingAmount::after { text-align: right; content: " \20AC"; position: absolute; padding-left: 8px; right: 19px; } .pricings > .pricingsList .pricingItem.TOTAL span { font: var(--FONT_COPY_STRONG); font-weight: bold; letter-spacing: var(--FONT_COPY_STRONG_LETTER_SPACING); }