/* ---------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* default component structure */ /* ---------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* variables */ :root { /* layout */ --component-label-pos: row; /* label position (row=left, column=top, column-reverse=bottom) */ --component-label-area-ratio: 1; /* label area ratio (none: use width, not flexbox) */ --component-inner-area-ratio: 4; /* inner component area ratio */ --component-label-area-size: auto; /* label area size (label width, auto: use flexbox) */ --component-label-area-base-width: 0; /* label area flex base width (set to 100% for top labels, 0 for left labels) */ --component-label-align: center; /* label vertical alignment if label left, horizontal if label top (align-self) */ --component-item-align: center; /* component vertical alignment if label left, horizontal if label top (align-self) */ --component-margin: 0 0 10px 0; /* component margin */ --component-gap: 30px; /* multi column gap */ --component-inline-gap: 10px; /* inline gap */ --component-row-margin: 20px; /* bottom margin for dialog component rows */ --component-dialog-paragraph-margin: 10px; /* bottom margin for paragraph in dialogs */ --component-min-col-width: 400px; /* min. column width before column break for small screens 500px*/ /* mobile layout */ --component-mobile-label-pos: column; /* label position (row=left, column=top) */ --component-mobile-label-area-ratio: none; /* label area ratio (none: use width, not flexbox) */ --component-mobile-inner-area-ratio: none; /* inner component area ratio */ --component-mobile-label-area-size: auto; /* label area size (label width, auto: use flexbox) */ --component-mobile-label-area-base-width: 0; /* label area flex base width (set to 100% for top labels, 0 for left labels) */ --component-mobile-label-align: flex-start; /* label vertical alignment (align-self) */ --component-mobile-item-align: flex-start; /* component vertical alignment (align-self) */ --component-mobile-margin: 0 0 10px 0; /* component margin */ --component-mobile-gap: 30px; /* multi column gap */ --component-mobile-inline-gap: 10px; /* inline gap */ --component-mobile-row-margin: 20px; /* bottom margin for dialog component rows */ /* basic styles */ --component-font: "Open Sans";/* default component font family */ --component-font-size: 17px; /* default component font size */ --component-font-weight: normal; /* default component font weight */ --component-font-style: normal; /* default component font style */ --component-line-height: 1; /* default component line height */ --component-text-color: black; /* default component text color */ --component-background-color: white; /* default component background color */ --component-shadow: none; /* default component box shadow */ --component-border-radius: 4px; /* default component border radius */ --component-border-size: 1px; /* default component border size */ --component-border-color: #b3b3b3; /* default component border color */ --component-outline-size: 0; /* default component outline size */ --component-outline-color: #b3b3b3; /* default component outline color */ --component-outline-offset: 0; /* default component outline offset */ --component-placeholder-font: var(--component-font);/* default component placeholder font */ --component-placeholder-font-size: var(--component-font-size);/* default component placeholder font size */ --component-placeholder-font-weight: var(--component-font-weight);/* default component placeholder font weight */ --component-placeholder-color: #888888; /* default component placeholder color */ --component-padding-top: 10px; /* default component padding, top */ --component-padding-right: 20px; /* default component padding, right */ --component-padding-bottom: 10px; /* default component padding, bottom */ --component-padding-left: 20px; /* default component padding, left */ --component-padding: var(--component-padding-top) var(--component-padding-right) var(--component-padding-bottom) var(--component-padding-left);/* default component padding */ --error-msg-color: #fd0100; /* error message color */ --component-important-font-weight: var(--component-font-weight);/* important: default component font weight */ --component-important-font-style: var(--component-font-style);/* important: default component font style */ --component-important-text-color: var(--component-text-color);/* important: default component text color */ --component-important-background-color: var(--component-background-color);/* important: default component background color */ --component-important-shadow: var(--component-shadow);/* important: default component box shadow */ --component-important-border-size: 2px; /* important: default component border size */ --component-important-border-color: #002D72; /* important: default component border color */ --component-important-outline-size: var(--component-outline-size);/* important: default component outline size */ --component-important-outline-color: var(--component-outline-color);/* important: default component outline color */ --component-important-outline-offset: var(--component-outline-offset);/* important: default component outline offset */ --component-important-placeholder-font: var(--component-font);/* important: default component placeholder font */ --component-important-placeholder-font-size: var(--component-font-size);/* important: default component placeholder font size */ --component-important-placeholder-color: var(--component-placeholder-color);/* important: default component placeholder color */ --component-required-font-weight: var(--component-font-weight);/* required: default component font weight */ --component-required-font-style: var(--component-font-style);/* required: default component font style */ --component-required-text-color: var(--component-text-color);/* required: default component text color */ --component-required-background-color: var(--component-background-color);/* required: default component background color */ --component-required-shadow: var(--component-shadow);/* required: default component box shadow */ --component-required-border-size: var(--component-border-size);/* required: default component border size */ --component-required-border-color: var(--component-border-color);/* required: default component border color */ --component-required-outline-size: var(--component-outline-size);/* required: default component outline size */ --component-required-outline-color: var(--component-outline-color);/* required: default component outline color */ --component-required-outline-offset: var(--component-outline-offset);/* required: default component outline offset */ --component-required-placeholder-font: var(--component-font);/* required: default component placeholder font */ --component-required-placeholder-font-size: var(--component-font-size);/* required: default component placeholder font size */ --component-required-placeholder-color: var(--component-placeholder-color); /* required: default component placeholder color */ --component-empty-font-weight: var(--component-font-weight);/* empty: default component font weight */ --component-empty-font-style: var(--component-font-style);/* empty: default component font style */ --component-empty-text-color: var(--component-text-color);/* empty: default component text color */ --component-empty-background-color: var(--component-background-color);/* empty: default component background color */ --component-empty-shadow: var(--component-shadow);/* empty: default component box shadow */ --component-empty-border-size: var(--component-border-size);/* empty: default component border size */ --component-empty-border-color: var(--component-border-color);/* empty: default component border color */ --component-empty-outline-size: var(--component-outline-size);/* empty: default component outline size */ --component-empty-outline-color: var(--component-outline-color);/* empty: default component outline color */ --component-empty-outline-offset: var(--component-outline-offset);/* empty: default component outline offset */ --component-empty-placeholder-font: var(--component-font);/* empty: default component placeholder font */ --component-empty-placeholder-font-size: var(--component-font-size);/* empty: default component placeholder font size */ --component-empty-placeholder-color: var(--component-placeholder-color);/* empty: default component placeholder color */ --component-invalid-font-weight: normal; /* invalid: default component font weight */ --component-invalid-font-style: normal; /* invalid: default component font style */ --component-invalid-text-color: black; /* invalid: default component text color */ --component-invalid-background-color: white; /* invalid: default component background color */ --component-invalid-shadow: none; /* invalid: default component box shadow */ --component-invalid-border-size: 1px; /* invalid: default component border size */ --component-invalid-border-color: #fd0100; /* invalid: default component border color */ --component-invalid-outline-size: 0; /* invalid: default component outline size */ --component-invalid-outline-color: #c4c4c4; /* invalid: default component outline color */ --component-invalid-outline-offset: 0; /* invalid: default component outline offset */ --component-invalid-placeholder-font: var(--component-font);/* invalid: default component placeholder font */ --component-invalid-placeholder-font-size: var(--component-font-size);/* invalid: default component placeholder font size */ --component-invalid-placeholder-color: var(--component-placeholder-color); /* invalid: default component placeholder color */ --component-focus-font-weight: normal; /* focus: default component font weight */ --component-focus-font-style: normal; /* focus: default component font style */ --component-focus-text-color: black; /* focus: default component text color */ --component-focus-background-color: white; /* focus: default component background color */ --component-focus-shadow: inset 0 0 1px 2px #55c3f1;/* focus: default component box shadow */ --component-focus-border-size: 1px; /* focus: default component border size */ --component-focus-border-color: #c4c4c4; /* focus: default component border color */ --component-focus-outline-size: 0; /* focus: default component outline size */ --component-focus-outline-color: #c4c4c4; /* focus: default component outline color */ --component-focus-outline-offset: 0; /* focus: default component outline offset */ --component-focus-placeholder-font: var(--component-font);/* focus: default component placeholder font */ --component-focus-placeholder-font-size: var(--component-font-size);/* focus: default component placeholder font size */ --component-focus-placeholder-color: var(--component-placeholder-color);/* focus: default component placeholder color */ --component-disabled-font-weight: normal; /* disabled: default component font weight */ --component-disabled-font-style: normal; /* disabled: default component font style */ --component-disabled-text-color: #888; /* disabled: default component text color */ --component-disabled-background-color: #fafafa; /* disabled: default component background color */ --component-disabled-shadow: none; /* disabled: default component box shadow */ --component-disabled-border-size: 1px; /* disabled: default component border size */ --component-disabled-border-color: #d0d0d0; /* disabled: default component border color */ --component-disabled-outline-size: 0; /* disabled: default component outline size */ --component-disabled-outline-color: #c4c4c4; /* disabled: default component outline color */ --component-disabled-outline-offset: 0; /* disabled: default component outline offset */ --component-disabled-placeholder-font: var(--component-font);/* disabled: default component placeholder font */ --component-disabled-placeholder-font-size: var(--component-font-size);/* disabled: default component placeholder font size */ --component-disabled-placeholder-color: var(--component-placeholder-color);/* disabled: default component placeholder color */ /* headlines */ --component-h1-margin: 10px; /* headline h1, bottom margin */ --component-h2-margin: 10px; /* headline h2, bottom margin */ --component-h3-margin: inherit; /* headline h3, bottom margin */ --component-h4-margin: inherit; /* headline h4, bottom margin */ --component-h1-color: inherit; /* headline h1, color */ --component-h2-color: #a2a3a3; /* headline h2, color */ --component-h3-color: inherit; /* headline h3, color */ --component-h4-color: inherit; /* headline h4, color */ --component-h1-font-size: 40px; /* headline h1, font size */ --component-h2-font-size: 26px; /* headline h2, font size */ --component-h3-font-size: 30px; /* headline h3, font size */ --component-h4-font-size: 30px; /* headline h4, font size */ --component-h1-font-weight: inherit; /* headline h1, font weight */ --component-h2-font-weight: inherit; /* headline h2, font weight */ --component-h3-font-weight: inherit; /* headline h3, font weight */ --component-h4-font-weight: inherit; /* headline h4, font weight */ --component-h1-line-height: inherit; /* headline h1, line height */ --component-h2-line-height: inherit; /* headline h2, line height */ --component-h3-line-height: inherit; /* headline h3, line height */ --component-h4-line-height: inherit; /* headline h4, line height */ --component-h1-style: normal; /* h1 font style */ --component-h2-style: normal; /* h2 font style */ --component-h3-style: normal; /* h3 font style */ --component-h4-style: normal; /* h4 font style */ --component-h1-text-transform: none; /* h1 text transform */ --component-h2-text-transform: none; /* h2 text transform */ --component-h3-text-transform: none; /* h3 text transform */ --component-h4-text-transform: none; /* h4 text transform */ --component-h1-align: left; /* h1 alignment */ --component-h2-align: left; /* h2 alignment */ --component-h3-align: left; /* h3 alignment */ --component-h4-align: left; /* h4 alignment */ --component-h1-margin: 10px; /* h1 bottom margin */ --component-h2-margin: 10px; /* h2 bottom margin */ --component-h3-margin: 10px; /* h3 bottom margin */ --component-h4-margin: 10px; /* h4 bottom margin */ /* label/sublabel */ --component-label-margin: 0 15px 0 0; /* label margin */ --component-label-textalign: right; /* label horizontal alignment */ --component-label-font: inherit; /* label font family */ --component-label-font-size: 16px; /* label font size */ --component-label-font-weight: 300; /* label font weight */ --component-label-font-style: inherit; /* label font style */ --component-label-decoration: none; /* label decoration */ --component-label-line-height: calc(var(--component-label-font-size) * 1.4);/* label line height */ --component-label-color: inherit; /* label color */ --component-sublabel-font-size: 12px; /* sublabel font size */ --component-sublabel-font-weight: inherit; /* sublabel font weight */ --component-sublabel-font-style: inherit; /* sublabel font style */ --component-sublabel-decoration: inherit; /* sublabel decoration */ --component-sublabel-line-height: 1.0; /* sublabel line height */ --component-sublabel-color: none; /* sublabel color */ --component-small-label-font-size: 10px; /* small label font size */ --component-small-label-font-weight: 300; /* small label font weight */ --component-small-label-font-style: inherit; /* small label font style */ --component-small-label-line-height: inherit; /* small label line height */ --component-small-label-decoration: inherit; /* small label decoration */ --component-small-label-color: inherit; /* small label color */ --component-required-marker-font-size: 12px; /* required marker font size */ --component-required-marker-font-weight: bold; /* required marker font weight */ --component-required-marker-offset: -4px; /* required marker top offset */ --component-required-marker-margin: 0 0 0 3px; /* required marker margin */ --component-label-top-height: 1.2em; /* label top min. height */ --component-label-top-margin: 0 0 2px 5px;/* label top margin */ --component-important-label-font-size: var(--component-label-font-size);/* important field: label font size */ --component-important-label-font-weight: 600; /* important field: label font weight */ --component-important-label-font-style: var(--component-label-font-style);/* important field: label font style */ --component-important-label-decoration: var(--component-label-decoration);/* important field: label decoration */ --component-important-label-color: #002D72; /* important field: label color */ --component-important-sublabel-font-size: var(--component-sublabel-font-size);/* important field: sublabel font size */ --component-important-sublabel-font-weight: var(--component-sublabel-font-weight);/* important field: sublabel font weight */ --component-important-sublabel-font-style: var(--component-sublabel-font-style);/* important field: sublabel font style */ --component-important-sublabel-decoration: var(--component-sublabel-decoration);/* important field: sublabel decoration */ --component-important-sublabel-color: var(--component-sublabel-color);/* important field: sublabel color */ --component-required-label-font-size: var(--component-label-font-size);/* required field: label font size */ --component-required-label-font-weight: var(--component-label-font-weight);/* required field: label font weight */ --component-required-label-font-style: var(--component-label-font-style);/* required field: label font style */ --component-required-label-decoration: var(--component-label-decoration);/* required field: label decoration */ --component-required-label-color: var(--component-label-color);/* required field: label color */ --component-required-sublabel-font-size: var(--component-sublabel-font-size);/* required field: sublabel font size */ --component-required-sublabel-font-weight: var(--component-sublabel-font-weight);/* required field: sublabel font weight */ --component-required-sublabel-font-style: var(--component-sublabel-font-style);/* required field: sublabel font style */ --component-required-sublabel-decoration: var(--component-sublabel-decoration);/* required field: sublabel decoration */ --component-required-sublabel-color: var(--component-sublabel-color);/* required field: sublabel color */ --component-empty-label-font-size: var(--component-label-font-size);/* empty field: label font size */ --component-empty-label-font-weight: var(--component-label-font-weight);/* empty field: label font weight */ --component-empty-label-font-style: var(--component-label-font-style);/* empty field: label font style */ --component-empty-label-decoration: var(--component-label-decoration);/* empty field: label decoration */ --component-empty-label-color: var(--component-label-color);/* empty field: label color */ --component-empty-sublabel-font-size: var(--component-sublabel-font-size);/* empty field: sublabel font size */ --component-empty-sublabel-font-weight: var(--component-sublabel-font-weight);/* empty field: sublabel font weight */ --component-empty-sublabel-font-style: var(--component-sublabel-font-style);/* empty field: sublabel font style */ --component-empty-sublabel-decoration: var(--component-sublabel-decoration);/* empty field: sublabel decoration */ --component-empty-sublabel-color: var(--component-sublabel-color);/* empty field: sublabel color */ --component-invalid-label-font-size: var(--component-label-font-size);/* invalid: label font size */ --component-invalid-label-font-weight: var(--component-label-font-weight);/* invalid: label font weight */ --component-invalid-label-font-style: var(--component-label-font-style);/* invalid: label font style */ --component-invalid-label-decoration: var(--component-label-decoration);/* invalid: label decoration */ --component-invalid-label-color: var(--component-label-color);/* invalid: label color */ --component-invalid-sublabel-font-size: var(--component-sublabel-font-size);/* invalid: sublabel font size */ --component-invalid-sublabel-font-weight: var(--component-sublabel-font-weight);/* invalid: sublabel font weight */ --component-invalid-sublabel-font-style: var(--component-sublabel-font-style);/* invalid: sublabel font style */ --component-invalid-sublabel-decoration: var(--component-sublabel-decoration);/* invalid: sublabel decoration */ --component-invalid-sublabel-color: var(--component-sublabel-color);/* invalid: sublabel color */ --component-focus-label-font-size: var(--component-label-font-size);/* focus: label font size */ --component-focus-label-font-weight: var(--component-label-font-weight);/* focus: label font weight */ --component-focus-label-font-style: var(--component-label-font-style);/* focus: label font style */ --component-focus-label-decoration: var(--component-label-decoration);/* focus: label decoration */ --component-focus-label-color: var(--component-label-color);/* focus: label color */ --component-focus-sublabel-font-size: var(--component-sublabel-font-size);/* focus: sublabel font size */ --component-focus-sublabel-font-weight: var(--component-sublabel-font-weight);/* focus: sublabel font weight */ --component-focus-sublabel-font-style: var(--component-sublabel-font-style);/* focus: sublabel font style */ --component-focus-sublabel-decoration: var(--component-sublabel-decoration);/* focus: sublabel decoration */ --component-focus-sublabel-color: var(--component-sublabel-color);/* focus: sublabel color */ --component-disabled-label-font-size: var(--component-label-font-size);/* disabled: label font size */ --component-disabled-label-font-weight: var(--component-label-font-weight);/* disabled: label font weight */ --component-disabled-label-font-style: var(--component-label-font-style);/* disabled: label font style */ --component-disabled-label-decoration: var(--component-label-decoration);/* disabled: label decoration */ --component-disabled-label-color: var(--component-label-color);/* disabled: label color */ --component-disabled-sublabel-font-size: var(--component-sublabel-font-size);/* disabled: sublabel font size */ --component-disabled-sublabel-font-weight: var(--component-sublabel-font-weight);/* disabled: sublabel font weight */ --component-disabled-sublabel-font-style: var(--component-sublabel-font-style);/* disabled: sublabel font style */ --component-disabled-sublabel-decoration: var(--component-sublabel-decoration);/* disabled: sublabel decoration */ --component-disabled-sublabel-color: var(--component-sublabel-color);/* disabled: sublabel color */ /* mobile label */ --component-mobile-label-margin: var(--component-label-margin);/* mobile label margin */ --component-mobile-label-textalign: var(--component-label-textalign);/* mobile label horizontal alignment */ --component-mobile-label-font: var(--component-label-font);/* mobile label font family */ --component-mobile-label-font-size: var(--component-label-font-size);/* mobile label font size */ --component-mobile-label-font-weight: var(--component-label-font-weight);/* mobile label font weight */ --component-mobile-label-font-style: var(--component-label-font-style);/* mobile label font style */ --component-mobile-label-decoration: var(--component-label-decoration);/* mobile label decoration */ --component-mobile-label-line-height: var(--component-label-line-height); /* mobile label line height */ --component-mobile-label-color: var(--component-label-color);/* mobile label color */ --component-mobile-sublabel-font-size: var(--component-mobile-sublabel-font-size);/* mobile sublabel font size */ --component-mobile-sublabel-font-weight: var(--component-mobile-sublabel-font-weight);/* mobile sublabel font weight */ --component-mobile-sublabel-font-style: var(--component-mobile-sublabel-font-style);/* mobile sublabel font style */ --component-mobile-sublabel-decoration: var(--component-mobile-sublabel-decoration);/* mobile sublabel decoration */ --component-mobile-sublabel-line-height: var(--component-mobile-sublabel-line-height);/* mobile sublabel line height */ --component-mobile-sublabel-color: var(--component-mobile-sublabel-color); /* mobile sublabel color */ --component-mobile-small-label-font-size: var(--component-mobile-small-label-font-size);/* mobile small label font size */ --component-mobile-small-label-font-weight: var(--component-mobile-small-label-font-weight);/* mobile small label font weight */ --component-mobile-small-label-font-style: var(--component-mobile-small-label-font-style);/* mobile small label font style */ --component-mobile-small-label-decoration: var(--component-small-label-decoration);/* mobile small label decoration */ --component-mobile-small-label-line-height: var(--component-mobile-small-label-line-height);/* mobile small label line height */ --component-mobile-small-label-color: var(--component-mobile-small-label-color);/* mobile small label color */ --component-required-mobile-label-font-size: var(--component-mobile-label-font-size);/* required field: label font size */ --component-required-mobile-label-font-weight: var(--component-mobile-label-font-weight);/* required field: label font weight */ --component-required-mobile-label-font-style: var(--component-mobile-label-font-style);/* required field: label font style */ --component-required-mobile-label-decoration: var(--component-mobile-label-decoration);/* required field: label decoration */ --component-required-mobile-label-color: var(--component-mobile-label-color);/* required field: label color */ --component-required-mobile-sublabel-font-size: var(--component-mobile-sublabel-font-size);/* required field: sublabel font size */ --component-required-mobile-sublabel-font-weight: var(--component-mobile-sublabel-font-weight);/* required field: sublabel font weight */ --component-required-mobile-sublabel-font-style: var(--component-mobile-sublabel-font-style);/* required field: sublabel font style */ --component-required-mobile-sublabel-decoration: var(--component-mobile-sublabel-decoration);/* required field: sublabel decoration */ --component-required-mobile-sublabel-color: var(--component-mobile-sublabel-color);/* required field: sublabel color */ --component-important-mobile-label-font-size: var(--component-mobile-label-font-size);/* important field: label font size */ --component-important-mobile-label-font-weight: var(--component-mobile-label-font-weight);/* important field: label font weight */ --component-important-mobile-label-font-style: var(--component-mobile-label-font-style);/* important field: label font style */ --component-important-mobile-label-decoration: var(--component-mobile-label-decoration);/* important field: label decoration */ --component-important-mobile-label-color: var(--component-mobile-label-color);/* important field: label color */ --component-important-mobile-sublabel-font-size: var(--component-mobile-sublabel-font-size);/* important field: sublabel font size */ --component-important-mobile-sublabel-font-weight: var(--component-mobile-sublabel-font-weight);/* important field: sublabel font weight */ --component-important-mobile-sublabel-font-style: var(--component-mobile-sublabel-font-style);/* important field: sublabel font style */ --component-important-mobile-sublabel-decoration: var(--component-mobile-sublabel-decoration);/* important field: sublabel decoration */ --component-important-mobile-sublabel-color: var(--component-mobile-sublabel-color);/* important field: sublabel color */ --component-empty-mobile-label-font-size: var(--component-mobile-label-font-size);/* empty field: label font size */ --component-empty-mobile-label-font-weight: var(--component-mobile-label-font-weight);/* empty field: label font weight */ --component-empty-mobile-label-font-style: var(--component-mobile-label-font-style);/* empty field: label font style */ --component-empty-mobile-label-decoration: var(--component-mobile-label-decoration);/* empty field: label decoration */ --component-empty-mobile-label-color: var(--component-mobile-label-color);/* empty field: label color */ --component-empty-mobile-sublabel-font-size: var(--component-mobile-sublabel-font-size);/* empty field: sublabel font size */ --component-empty-mobile-sublabel-font-weight: var(--component-mobile-sublabel-font-weight);/* empty field: sublabel font weight */ --component-empty-mobile-sublabel-font-style: var(--component-mobile-sublabel-font-style);/* empty field: sublabel font style */ --component-empty-mobile-sublabel-decoration: var(--component-mobile-sublabel-decoration);/* empty field: sublabel decoration */ --component-empty-mobile-sublabel-color: var(--component-mobile-sublabel-color);/* empty field: sublabel color */ --component-invalid-mobile-label-font-size: var(--component-mobile-label-font-size);/* invalid: label font size */ --component-invalid-mobile-label-font-weight: var(--component-mobile-label-font-weight);/* invalid: label font weight */ --component-invalid-mobile-label-font-style: var(--component-mobile-label-font-style);/* invalid: label font style */ --component-invalid-mobile-label-decoration: var(--component-mobile-label-decoration);/* invalid: label decoration */ --component-invalid-mobile-label-color: var(--component-mobile-label-color);/* invalid: label color */ --component-invalid-mobile-sublabel-font-size: var(--component-mobile-sublabel-font-size);/* invalid: sublabel font size */ --component-invalid-mobile-sublabel-font-weight: var(--component-mobile-sublabel-font-weight);/* invalid: sublabel font weight */ --component-invalid-mobile-sublabel-font-style: var(--component-mobile-sublabel-font-style);/* invalid: sublabel font style */ --component-invalid-mobile-sublabel-decoration: var(--component-mobile-sublabel-decoration);/* invalid: sublabel decoration */ --component-invalid-mobile-sublabel-color: var(--component-mobile-sublabel-color);/* invalid: sublabel color */ --component-focus-mobile-label-font-size: var(--component-mobile-label-font-size);/* focus: label font size */ --component-focus-mobile-label-font-weight: var(--component-mobile-label-font-weight);/* focus: label font weight */ --component-focus-mobile-label-font-style: var(--component-mobile-label-font-style);/* focus: label font style */ --component-focus-mobile-label-decoration: var(--component-mobile-label-decoration);/* focus: label decoration */ --component-focus-mobile-label-color: var(--component-mobile-label-color);/* focus: label color */ --component-focus-mobile-sublabel-font-size: var(--component-mobile-sublabel-font-size);/* focus: sublabel font size */ --component-focus-mobile-sublabel-font-weight: var(--component-mobile-sublabel-font-weight);/* focus: sublabel font weight */ --component-focus-mobile-sublabel-font-style: var(--component-mobile-sublabel-font-style);/* focus: sublabel font style */ --component-focus-mobile-sublabel-decoration: var(--component-mobile-sublabel-decoration);/* focus: sublabel decoration */ --component-focus-mobile-sublabel-color: var(--component-mobile-sublabel-color);/* focus: sublabel color */ --component-disabled-mobile-label-font-size: var(--component-mobile-label-font-size);/* disabled: label font size */ --component-disabled-mobile-label-font-weight: var(--component-mobile-label-font-weight);/* disabled: label font weight */ --component-disabled-mobile-label-font-style: var(--component-mobile-label-font-style);/* disabled: label font style */ --component-disabled-mobile-label-decoration: var(--component-mobile-label-decoration);/* disabled: label decoration */ --component-disabled-mobile-label-color: var(--component-mobile-label-color);/* disabled: label color */ --component-disabled-mobile-sublabel-font-size: var(--component-mobile-sublabel-font-size);/* disabled: sublabel font size */ --component-disabled-mobile-sublabel-font-weight: var(--component-mobile-sublabel-font-weight);/* disabled: sublabel font weight */ --component-disabled-mobile-sublabel-font-style: var(--component-mobile-sublabel-font-style);/* disabled: sublabel font style */ --component-disabled-mobile-sublabel-decoration: var(--component-mobile-sublabel-decoration);/* disabled: sublabel decoration */ --component-disabled-mobile-sublabel-color: var(--component-mobile-sublabel-color);/* disabled: sublabel color */ /* field group */ --component-field-group-border-radius: var(--component-border-radius);/* field group border radius */ --component-field-group-border-size: var(--component-border-size);/* field group border size */ --component-field-group-border-color: var(--component-border-color);/* field group border color */ --component-field-group-border-padding: 20px 20px 5px 20px;/* field group border inner padding */ --component-field-group-button-size: 15px; /* field group select button size */ --component-field-group-button-gap: 10px; /* field group select button gap */ --component-field-group-button-offset-left: 20px; /* field group select button offset from left */ --component-field-group-button-offset-bottom: -10px; /* field group select button offset from bottom */ /* input field */ --component-input-item-align: var(--component-item-align);/* input field vertical alignment (align-self) */ --component-input-margin: var(--component-margin);/* input field margin */ --component-input-padding: var(--component-padding);/* input field padding */ --component-input-textarea-height: 5em; /* min. textarea height */ --component-input-font: var(--component-font);/* input field font family */ --component-input-font-size: var(--component-font-size);/* input field font size */ --component-input-font-weight: var(--component-font-weight);/* input field font weight */ --component-input-font-style: var(--component-font-style);/* input field font style */ --component-input-line-height: var(--component-line-height);/* input field line height */ --component-input-textarea-line-height: 1.3; /* input field textarea line height */ --component-input-text-color: var(--component-text-color);/* input field text color */ --component-input-background-color: var(--component-background-color);/* input field background color */ --component-input-shadow: var(--component-shadow);/* input field box shadow */ --component-input-border-radius: var(--component-border-radius);/* input field border radius */ --component-input-border-size: var(--component-border-size);/* input field border size */ --component-input-border-color: var(--component-border-color);/* input field border color */ --component-input-outline-size: var(--component-outline-size);/* input field outline size */ --component-input-outline-color: var(--component-outline-color);/* input field outline color */ --component-input-outline-offset: var(--component-outline-offset);/* input field outline offset */ --component-input-placeholder-font: var(--component-placeholder-font);/* input field placeholder font */ --component-input-placeholder-font-size: var(--component-placeholder-font-size);/* input field placeholder font size */ --component-input-placeholder-font-weight: var(--component-placeholder-font-weight);/* input field placeholder font weight */ --component-input-placeholder-color: var(--component-placeholder-color);/* input field placeholder color */ --component-input-important-font-weight: var(--component-important-font-weight);/* important: input field font weight */ --component-input-important-font-style: var(--component-important-font-style);/* important: input field font style */ --component-input-important-text-color: var(--component-important-text-color);/* important: input field text color */ --component-input-important-background-color: var(--component-important-background-color);/* important: input field background color */ --component-input-important-shadow: var(--component-important-shadow);/* important: input field box shadow */ --component-input-important-border-size: var(--component-important-border-size);/* important: input field border size */ --component-input-important-border-color: var(--component-important-border-color);/* important: input field border color */ --component-input-important-outline-size: var(--component-important-outline-size);/* important: input field outline size */ --component-input-important-outline-color: var(--component-important-outline-color);/* important: input field outline color */ --component-input-important-outline-offset: var(--component-important-outline-offset);/* important: input field outline offset */ --component-input-important-placeholder-font-weight:var(--component-important-placeholder-font-weight);/* input field placeholder font weight */ --component-input-important-placeholder-font-size:var(--component-important-placeholder-font-size);/* input field placeholder font size */ --component-input-important-placeholder-color: var(--component-important-placeholder-color);/* input field placeholder color */ --component-input-required-font-weight: var(--component-required-font-weight);/* required: input field font weight */ --component-input-required-font-style: var(--component-required-font-style);/* required: input field font style */ --component-input-required-text-color: var(--component-required-text-color);/* required: input field text color */ --component-input-required-background-color: var(--component-required-background-color);/* required: input field background color */ --component-input-required-shadow: var(--component-required-shadow);/* required: input field box shadow */ --component-input-required-border-size: var(--component-required-border-size);/* required: input field border size */ --component-input-required-border-color: var(--component-required-border-color);/* required: input field border color */ --component-input-required-outline-size: var(--component-required-outline-size);/* required: input field outline size */ --component-input-required-outline-color: var(--component-required-outline-color);/* required: input field outline color */ --component-input-required-outline-offset: var(--component-required-outline-offset);/* required: input field outline offset */ --component-input-required-placeholder-font-weight: var(--component-required-placeholder-font-weight);/* input field placeholder font-weight */ --component-input-required-placeholder-font-size:var(--component-required-placeholder-font-size);/* input field placeholder font size */ --component-input-required-placeholder-color: var(--component-required-placeholder-color);/* input field placeholder color */ --component-input-empty-font-weight: var(--component-empty-font-weight);/* empty: input field font weight */ --component-input-empty-font-style: var(--component-empty-font-style);/* empty: input field font style */ --component-input-empty-text-color: var(--component-empty-text-color);/* empty: input field text color */ --component-input-empty-background-color: var(--component-empty-background-color);/* empty: input field background color */ --component-input-empty-shadow: var(--component-empty-shadow);/* empty: input field box shadow */ --component-input-empty-border-size: var(--component-empty-border-size);/* empty: input field border size */ --component-input-empty-border-color: var(--component-empty-border-color);/* empty: input field border color */ --component-input-empty-outline-size: var(--component-empty-outline-size);/* empty: input field outline size */ --component-input-empty-outline-color: var(--component-empty-outline-color);/* empty: input field outline color */ --component-input-empty-outline-offset: var(--component-empty-outline-offset);/* empty: input field outline offset */ --component-input-empty-placeholder-font-weight:var(--component-empty-placeholder-font-weight);/* input field placeholder font-weight */ --component-input-empty-placeholder-font-size: var(--component-empty-placeholder-font-size);/* input field placeholder font size */ --component-input-empty-placeholder-color: var(--component-empty-placeholder-color);/* input field placeholder color */ --component-input-invalid-font-weight: var(--component-invalid-font-weight);/* invalid: input field font weight */ --component-input-invalid-font-style: var(--component-invalid-font-style);/* invalid: input field font style */ --component-input-invalid-text-color: var(--component-invalid-text-color);/* invalid: input field text color */ --component-input-invalid-background-color: var(--component-invalid-background-color);/* invalid: input field background color */ --component-input-invalid-shadow: var(--component-invalid-shadow);/* invalid: input field box shadow */ --component-input-invalid-border-size: var(--component-invalid-border-size);/* invalid: input field border size */ --component-input-invalid-border-color: var(--component-invalid-border-color);/* invalid: input field border color */ --component-input-invalid-outline-size: var(--component-invalid-outline-size);/* invalid: input field outline size */ --component-input-invalid-outline-color: var(--component-invalid-outline-color);/* invalid: input field outline color */ --component-input-invalid-outline-offset: var(--component-invalid-outline-offset);/* invalid: input field outline offset */ --component-input-invalid-placeholder-font-weight:var(--component-invalid-placeholder-font-weight);/* input field placeholder font-weight */ --component-input-invalid-placeholder-font-size:var(--component-invalid-placeholder-font-size);/* input field placeholder font size */ --component-input-invalid-placeholder-color: var(--component-invalid-placeholder-color);/* input field placeholder color */ --component-input-focus-font-weight: var(--component-focus-font-weight);/* focus: input field font weight */ --component-input-focus-font-style: var(--component-focus-font-style);/* focus: input field font style */ --component-input-focus-text-color: var(--component-focus-text-color);/* focus: input field text color */ --component-input-focus-background-color: var(--component-focus-background-color);/* focus: input field background color */ --component-input-focus-shadow: var(--component-focus-shadow);/* focus: input field box shadow */ --component-input-focus-border-size: var(--component-focus-border-size);/* focus: input field border size */ --component-input-focus-border-color: var(--component-focus-border-color);/* focus: input field border color */ --component-input-focus-outline-size: var(--component-focus-outline-size);/* focus: input field outline size */ --component-input-focus-outline-color: var(--component-focus-outline-color);/* focus: input field outline color */ --component-input-focus-outline-offset: var(--component-focus-outline-offset);/* focus: input field outline offset */ --component-input-focus-placeholder-font-weight:var(--component-focus-placeholder-font-weight);/* input field placeholder font-weight */ --component-input-focus-placeholder-font-size: var(--component-focus-placeholder-font-size);/* input field placeholder font size */ --component-input-focus-placeholder-color: var(--component-focus-placeholder-color);/* input field placeholder color */ --component-input-disabled-font-weight: var(--component-disabled-font-weight);/* disabled: input field font weight */ --component-input-disabled-font-style: var(--component-disabled-font-style);/* disabled: input field font style */ --component-input-disabled-text-color: var(--component-disabled-text-color);/* disabled: input field text color */ --component-input-disabled-background-color: var(--component-disabled-background-color);/* disabled: input field background color */ --component-input-disabled-shadow: var(--component-disabled-shadow);/* disabled: input field box shadow */ --component-input-disabled-border-size: var(--component-disabled-border-size);/* disabled: input field border size */ --component-input-disabled-border-color: var(--component-disabled-border-color);/* disabled: input field border color */ --component-input-disabled-outline-size: var(--component-disabled-outline-size);/* disabled: input field outline size */ --component-input-disabled-outline-color: var(--component-disabled-outline-color);/* disabled: input field outline color */ --component-input-disabled-outline-offset: var(--component-disabled-outline-offset);/* disabled: input field outline offset */ --component-input-disabled-placeholder-font-weight:var(--component-disabled-placeholder-font-weight);/* input field placeholder font-weight */ --component-input-disabled-placeholder-font-size:var(--component-disabled-placeholder-font-size);/* input field placeholder font size */ --component-input-disabled-placeholder-color: var(--component-disabled-placeholder-color);/* input field placeholder color */ --component-input-addon-padding: 0 10px 0 10px;/* input field addon padding */ --component-input-addon-width: 52px; /* input field addon min. width */ --component-input-addon-font: var(--component-font);/* input field addon font family */ --component-input-addon-font-size: var(--component-font-size);/* input field addon font size */ --component-input-addon-font-weight: var(--component-font-weight);/* input field addon font weight */ --component-input-addon-font-style: var(--component-font-style);/* input field addon font style */ --component-input-addon-line-height: var(--component-line-height);/* input field addon line height */ --component-input-addon-text-color: var(--component-text-color);/* input field addon text color */ --component-input-addon-background-color: var(--component-background-color);/* input field addon background color */ --component-input-addon-important-font-weight: var(--component-important-font-weight);/* important: input field addon font weight */ --component-input-addon-important-font-style: var(--component-important-font-style);/* important: input field addon font style */ --component-input-addon-important-text-color: var(--component-important-text-color);/* important: input field addon text color */ --component-input-addon-important-background-color: var(--component-important-background-color);/* important: input field addon background color */ --component-input-addon-required-font-weight: var(--component-required-font-weight);/* required: input field addon font weight */ --component-input-addon-required-font-style: var(--component-required-font-style);/* required: input field addon font style */ --component-input-addon-required-text-color: var(--component-required-text-color);/* required: input field addon text color */ --component-input-addon-required-background-color: var(--component-required-background-color);/* required: input field addon background color */ --component-input-addon-empty-font-weight: var(--component-empty-font-weight);/* empty: input field addon font weight */ --component-input-addon-empty-font-style: var(--component-empty-font-style);/* empty: input field addon font style */ --component-input-addon-empty-text-color: var(--component-empty-text-color);/* empty: input field addon text color */ --component-input-addon-empty-background-color: var(--component-empty-background-color);/* empty: input field addon background color */ --component-input-addon-invalid-font-weight: var(--component-invalid-font-weight);/* invalid: input field addon font weight */ --component-input-addon-invalid-font-style: var(--component-invalid-font-style);/* invalid: input field addon font style */ --component-input-addon-invalid-text-color: var(--component-invalid-text-color);/* invalid: input field addon text color */ --component-input-addon-invalid-background-color: var(--component-invalid-background-color);/* invalid: input field addon background color */ --component-input-addon-focus-font-weight: var(--component-focus-font-weight);/* focus: input field addon font weight */ --component-input-addon-focus-font-style: var(--component-focus-font-style);/* focus: input field addon font style */ --component-input-addon-focus-text-color: var(--component-focus-text-color);/* focus: input field addon text color */ --component-input-addon-focus-background-color: var(--component-focus-background-color);/* focus: input field addon background color */ --component-input-addon-disabled-font-weight: var(--component-disabled-font-weight);/* disabled: input field addon font weight */ --component-input-addon-disabled-font-style: var(--component-disabled-font-style);/* disabled: input field addon font style */ --component-input-addon-disabled-text-color: var(--component-disabled-text-color);/* disabled: input field addon text color */ --component-input-addon-disabled-background-color: var(--component-disabled-background-color);/* disabled: input field addon background color */ --component-input-show-password-font-size: var(--component-input-font-size); /* show password button: font size */ --component-input-show-password-color: var(--component-placeholder-color); /* show password button: text color */ --component-input-show-password-offset-x: var(--component-padding-right); /* show password button: offset from right */ --component-input-show-password-width: auto; /* show password button: width */ --component-input-show-password-height: auto; /* show password button: height */ /* segmented field */ --component-segmented-item-align: var(--component-item-align);/* segmented field vertical alignment (align-self) */ --component-segmented-margin: var(--component-margin);/* segmented field margin */ --component-segmented-padding: var(--component-padding);/* segmented field padding */ --component-segmented-container-align: baseline; /* item alignment in container */ --component-segmented-font: var(--component-font);/* segmented field font family */ --component-segmented-font-size: var(--component-font-size);/* segmented field font size */ --component-segmented-font-weight: var(--component-font-weight);/* segmented field font weight */ --component-segmented-font-style: var(--component-font-style);/* segmented field font style */ --component-segmented-line-height: var(--component-line-height);/* segmented field line height */ --component-segmented-text-color: var(--component-text-color);/* segmented field text color */ --component-segmented-background-color: var(--component-background-color);/* segmented field background color */ --component-segmented-shadow: var(--component-shadow);/* segmented field box shadow */ --component-segmented-border-radius: var(--component-border-radius);/* segmented field border radius */ --component-segmented-border-size: var(--component-border-size);/* segmented field border size */ --component-segmented-border-color: var(--component-border-color);/* segmented field border color */ --component-segmented-outline-size: var(--component-outline-size);/* segmented field outline size */ --component-segmented-outline-color: var(--component-outline-color);/* segmented field outline color */ --component-segmented-outline-offset: var(--component-outline-offset);/* segmented field outline offset */ --component-segmented-placeholder-font: var(--component-important-placeholder-font);/* segmented field placeholder font */ --component-segmented-placeholder-font-weight: var(--component-important-placeholder-font-weight);/* segmented field placeholder font-weight */ --component-segmented-placeholder-font-size: var(--component-important-placeholder-font-size);/* segmented field placeholder font size */ --component-segmented-placeholder-color: var(--component-important-placeholder-color);/* segmented field placeholder color */ --component-segmented-segment-background-color: var(--component-segmented-background-color);/* segmented field background color (single segment) */ --component-segmented-segment-shadow: var(--component-segmented-shadow);/* segmented field box shadow (single segment) */ --component-segmented-segment-border-radius: 0; /* segmented field border radius (single segment) */ --component-segmented-segment-border-size: 0; /* segmented field border size (single segment) */ --component-segmented-segment-border-color: var(--component-segmented-border-color);/* segmented field border color (single segment) */ --component-segmented-segment-padding-top: 0px; /* segmented field padding (single segment, top) */ --component-segmented-segment-padding-right: 0px; /* segmented field padding (single segment, right) */ --component-segmented-segment-padding-left: 0px; /* segmented field padding (single segment, bottom) */ --component-segmented-segment-padding-bottom: 0px; /* segmented field padding (single segment, left) */ --component-segmented-separator-font-size: var(--component-font-size);/* segmented field font size (separators) */ --component-segmented-separator-font-weight: var(--component-font-weight);/* segmented field font weight (separators) */ --component-segmented-separator-font-style: var(--component-font-style);/* segmented field font style (separators) */ --component-segmented-separator-line-height: var(--component-line-height);/* segmented field line height (separators) */ --component-segmented-separator-text-color: var(--component-text-color);/* segmented field text color (separators) */ --component-segmented-separator-background-color:var(--component-segmented-background-color);/* segmented field background color (separators) */ --component-segmented-separator-shadow: var(--component-segmented-shadow);/* segmented field box shadow (separators) */ --component-segmented-separator-border-radius: 0; /* segmented field border radius (separators) */ --component-segmented-separator-border-size: 0; /* segmented field border size (separators) */ --component-segmented-separator-border-color: var(--component-segmented-border-color);/* segmented field border color (separators) */ --component-segmented-separator-padding: 0 7px 0 7px;/* segmented field padding (separators) */ --component-segmented-separator-first-padding: var(--component-segmented-separator-padding);/* segmented field padding (first separator) */ --component-segmented-separator-last-padding: var(--component-segmented-separator-padding);/* segmented field padding (last separator) */ --component-segmented-important-font-weight: var(--component-important-font-weight);/* important: segmented field font weight */ --component-segmented-important-font-style: var(--component-important-font-style);/* important: segmented field font style */ --component-segmented-important-text-color: var(--component-important-text-color);/* important: segmented field text color */ --component-segmented-important-background-color:var(--component-important-background-color);/* important: segmented field background color */ --component-segmented-important-shadow: var(--component-important-shadow);/* important: segmented field box shadow */ --component-segmented-important-border-size: var(--component-important-border-size);/* important: segmented field border size */ --component-segmented-important-border-color: var(--component-important-border-color);/* important: segmented field border color */ --component-segmented-important-outline-size: var(--component-important-outline-size);/* important: segmented field outline size */ --component-segmented-important-outline-color: var(--component-important-outline-color);/* important: segmented field outline color */ --component-segmented-important-outline-offset: var(--component-important-outline-offset);/* important: segmented field outline offset */ --component-segmented-important-placeholder-font-weight:var(--component-important-placeholder-font-weight);/* segmented field placeholder font-weight */ --component-segmented-important-placeholder-font-size:var(--component-important-placeholder-font-size);/* segmented field placeholder font size */ --component-segmented-important-placeholder-color:var(--component-important-placeholder-color);/* segmented field placeholder color */ --component-segmented-important-segment-background-color:var(--component-segmented-segment-background-color);/* important: segmented field background color (single segment) */ --component-segmented-important-segment-shadow: var(--component-segmented-segment-shadow);/* important: segmented field box shadow (single segment) */ --component-segmented-important-segment-border-size:var(--component-segmented-segment-border-size);/* important: segmented field border size (single segment) */ --component-segmented-important-segment-border-color:var(--component-segmented-segment-border-color);/* important: segmented field border color (single segment) */ --component-segmented-important-separator-font-weight:var(--component-segmented-separator-font-weight);/* important: segmented field font weight (separators) */ --component-segmented-important-separator-font-style:var(--component-segmented-separator-font-style);/* important: segmented field font style (separators) */ --component-segmented-important-separator-text-color:var(--component-segmented-separator-text-color);/* important: segmented field text color (separators) */ --component-segmented-important-separator-background-color:var(--component-segmented-separator-background-color);/* important: segmented field background color (separators) */ --component-segmented-important-separator-shadow:var(--component-segmented-separator-shadow);/* important: segmented field box shadow (separators) */ --component-segmented-important-separator-border-size:var(--component-segmented-separator-border-size);/* important: segmented field border size (separators) */ --component-segmented-important-separator-border-color:var(--component-segmented-separator-border-color);/* important: segmented field border color (separators) */ --component-segmented-required-font-weight: var(--component-required-font-weight);/* required: segmented field font weight */ --component-segmented-required-font-style: var(--component-required-font-style);/* required: segmented field font style */ --component-segmented-required-text-color: var(--component-required-text-color);/* required: segmented field text color */ --component-segmented-required-background-color:var(--component-required-background-color);/* required: segmented field background color */ --component-segmented-required-shadow: var(--component-required-shadow);/* required: segmented field box shadow */ --component-segmented-required-border-size: var(--component-required-border-size);/* required: segmented field border size */ --component-segmented-required-border-color: var(--component-required-border-color);/* required: segmented field border color */ --component-segmented-required-outline-size: var(--component-required-outline-size);/* required: segmented field outline size */ --component-segmented-required-outline-color: var(--component-required-outline-color);/* required: segmented field outline color */ --component-segmented-required-outline-offset: var(--component-required-outline-offset);/* required: segmented field outline offset */ --component-segmented-required-placeholder-font-weight:var(--component-required-placeholder-font-weight);/* segmented field placeholder font-weight */ --component-segmented-required-placeholder-font-size:var(--component-required-placeholder-font-size);/* segmented field placeholder font size */ --component-segmented-required-placeholder-color:var(--component-required-placeholder-color);/* segmented field placeholder color */ --component-segmented-required-segment-background-color:var(--component-segmented-segment-background-color);/* required: segmented field background color (single segment) */ --component-segmented-required-segment-shadow: var(--component-segmented-segment-shadow);/* required: segmented field box shadow (single segment) */ --component-segmented-required-segment-border-size:var(--component-segmented-segment-border-size);/* required: segmented field border size (single segment) */ --component-segmented-required-segment-border-color:var(--component-segmented-segment-border-color);/* required: segmented field border color (single segment) */ --component-segmented-required-separator-font-weight:var(--component-segmented-separator-font-weight);/* required: segmented field font weight (separators) */ --component-segmented-required-separator-font-style:var(--component-segmented-separator-font-style);/* required: segmented field font style (separators) */ --component-segmented-required-separator-text-color:var(--component-segmented-separator-text-color);/* required: segmented field text color (separators) */ --component-segmented-required-separator-background-color:var(--component-segmented-separator-background-color);/* required: segmented field background color (separators) */ --component-segmented-required-separator-shadow:var(--component-segmented-separator-shadow);/* required: segmented field box shadow (separators) */ --component-segmented-required-separator-border-size:var(--component-segmented-separator-border-size);/* required: segmented field border size (separators) */ --component-segmented-required-separator-border-color:var(--component-segmented-separator-border-color);/* required: segmented field border color (separators) */ --component-segmented-empty-font-weight: var(--component-empty-font-weight);/* empty: segmented field font weight */ --component-segmented-empty-font-style: var(--component-empty-font-style);/* empty: segmented field font style */ --component-segmented-empty-text-color: var(--component-empty-text-color);/* empty: segmented field text color */ --component-segmented-empty-background-color: var(--component-empty-background-color);/* empty: segmented field background color */ --component-segmented-empty-shadow: var(--component-empty-shadow);/* empty: segmented field box shadow */ --component-segmented-empty-border-size: var(--component-empty-border-size);/* empty: segmented field border size */ --component-segmented-empty-border-color: var(--component-empty-border-color);/* empty: segmented field border color */ --component-segmented-empty-outline-size: var(--component-empty-outline-size);/* empty: segmented field outline size */ --component-segmented-empty-outline-color: var(--component-empty-outline-color);/* empty: segmented field outline color */ --component-segmented-empty-outline-offset: var(--component-empty-outline-offset);/* empty: segmented field outline offset */ --component-segmented-empty-placeholder-font-weight: var(--component-empty-placeholder-font-weight);/* segmented field placeholder font-weight */ --component-segmented-empty-placeholder-font-size:var(--component-empty-placeholder-font-size);/* segmented field placeholder font size */ --component-segmented-empty-placeholder-color: var(--component-empty-placeholder-color);/* segmented field placeholder color */ --component-segmented-empty-segment-background-color:var(--component-segmented-segment-background-color);/* empty: segmented field background color (single segment) */ --component-segmented-empty-segment-shadow: var(--component-segmented-segment-shadow);/* empty: segmented field box shadow (single segment) */ --component-segmented-empty-segment-border-size:var(--component-segmented-segment-border-size);/* empty: segmented field border size (single segment) */ --component-segmented-empty-segment-border-color:var(--component-segmented-segment-border-color);/* empty: segmented field border color (single segment) */ --component-segmented-empty-separator-font-weight:var(--component-segmented-separator-font-weight);/* empty: segmented field font weight (separators) */ --component-segmented-empty-separator-font-style:var(--component-segmented-separator-font-style);/* empty: segmented field font style (separators) */ --component-segmented-empty-separator-text-color:var(--component-segmented-separator-text-color);/* empty: segmented field text color (separators) */ --component-segmented-empty-separator-background-color:var(--component-segmented-separator-background-color);/* empty: segmented field background color (separators) */ --component-segmented-empty-separator-shadow: var(--component-segmented-separator-shadow);/* empty: segmented field box shadow (separators) */ --component-segmented-empty-separator-border-size:var(--component-segmented-separator-border-size);/* empty: segmented field border size (separators) */ --component-segmented-empty-separator-border-color:var(--component-segmented-separator-border-color);/* empty: segmented field border color (separators) */ --component-segmented-invalid-font-weight: var(--component-invalid-font-weight);/* invalid: segmented field font weight */ --component-segmented-invalid-font-style: var(--component-invalid-font-style);/* invalid: segmented field font style */ --component-segmented-invalid-text-color: var(--component-invalid-text-color);/* invalid: segmented field text color */ --component-segmented-invalid-background-color: var(--component-invalid-background-color);/* invalid: segmented field background color */ --component-segmented-invalid-shadow: var(--component-invalid-shadow);/* invalid: segmented field box shadow */ --component-segmented-invalid-border-size: var(--component-invalid-border-size);/* invalid: segmented field border size */ --component-segmented-invalid-border-color: var(--component-invalid-border-color);/* invalid: segmented field border color */ --component-segmented-invalid-outline-size: var(--component-invalid-outline-size);/* invalid: segmented field outline size */ --component-segmented-invalid-outline-color: var(--component-invalid-outline-color);/* invalid: segmented field outline color */ --component-segmented-invalid-outline-offset: var(--component-invalid-outline-offset);/* invalid: segmented field outline offset */ --component-segmented-invalid-placeholder-font-weight: var(--component-invalid-placeholder-font-weight);/* segmented field placeholder font-weight */ --component-segmented-invalid-placeholder-font-size:var(--component-invalid-placeholder-font-size);/* segmented field placeholder font size */ --component-segmented-invalid-placeholder-color:var(--component-invalid-placeholder-color);/* segmented field placeholder color */ --component-segmented-invalid-segment-background-color:var(--component-segmented-segment-background-color);/* invalid: segmented field background color (single segment) */ --component-segmented-invalid-segment-shadow: var(--component-segmented-segment-shadow);/* invalid: segmented field box shadow (single segment) */ --component-segmented-invalid-segment-border-size:var(--component-segmented-segment-border-size);/* invalid: segmented field border size (single segment) */ --component-segmented-invalid-segment-border-color:var(--component-segmented-segment-border-color);/* invalid: segmented field border color (single segment) */ --component-segmented-invalid-separator-font-weight:var(--component-segmented-separator-font-weight);/* invalid: segmented field font weight (separators) */ --component-segmented-invalid-separator-font-style:var(--component-segmented-separator-font-style);/* invalid: segmented field font style (separators) */ --component-segmented-invalid-separator-text-color:var(--component-segmented-separator-text-color);/* invalid: segmented field text color (separators) */ --component-segmented-invalid-separator-background-color:var(--component-segmented-separator-background-color);/* invalid: segmented field background color (separators) */ --component-segmented-invalid-separator-shadow:var(--component-segmented-separator-shadow);/* invalid: segmented field box shadow (separators) */ --component-segmented-invalid-separator-border-size:var(--component-segmented-separator-border-size);/* invalid: segmented field border size (separators) */ --component-segmented-invalid-separator-border-color:var(--component-segmented-separator-border-color);/* invalid: segmented field border color (separators) */ --component-segmented-focus-font-weight: var(--component-focus-font-weight);/* focus: segmented field font weight */ --component-segmented-focus-font-style: var(--component-focus-font-style);/* focus: segmented field font style */ --component-segmented-focus-text-color: var(--component-focus-text-color);/* focus: segmented field text color */ --component-segmented-focus-background-color: var(--component-focus-background-color);/* focus: segmented field background color */ --component-segmented-focus-shadow: var(--component-focus-shadow);/* focus: segmented field box shadow */ --component-segmented-focus-border-size: var(--component-focus-border-size);/* focus: segmented field border size */ --component-segmented-focus-border-color: var(--component-focus-border-color);/* focus: segmented field border color */ --component-segmented-focus-outline-size: var(--component-focus-outline-size);/* focus: segmented field outline size */ --component-segmented-focus-outline-color: var(--component-focus-outline-color);/* focus: segmented field outline color */ --component-segmented-focus-outline-offset: var(--component-focus-outline-offset);/* focus: segmented field outline offset */ --component-segmented-focus-placeholder-font-weight: var(--component-focus-placeholder-font-weight);/* segmented field placeholder font-weight */ --component-segmented-focus-placeholder-font-size:var(--component-focus-placeholder-font-size);/* segmented field placeholder font size */ --component-segmented-focus-placeholder-color: var(--component-focus-placeholder-color);/* segmented field placeholder color */ --component-segmented-focus-segment-background-color:var(--component-segmented-segment-background-color);/* focus: segmented field background color (single segment) */ --component-segmented-focus-segment-shadow: var(--component-segmented-segment-shadow);/* focus: segmented field box shadow (single segment) */ --component-segmented-focus-segment-border-size:0; /* focus: segmented field border size (single segment) */ --component-segmented-focus-segment-border-color:var(--component-segmented-segment-border-color);/* focus: segmented field border color (single segment) */ --component-segmented-focus-separator-font-weight:var(--component-segmented-separator-font-weight);/* focus: segmented field font weight (separators) */ --component-segmented-focus-separator-font-style:var(--component-segmented-separator-font-style);/* focus: segmented field font style (separators) */ --component-segmented-focus-separator-text-color:var(--component-segmented-separator-text-color);/* focus: segmented field text color (separators) */ --component-segmented-focus-separator-background-color:var(--component-segmented-separator-background-color);/* focus: segmented field background color (separators) */ --component-segmented-focus-separator-shadow:var(--component-segmented-separator-shadow);/* focus: segmented field box shadow (separators) */ --component-segmented-focus-separator-border-size:var(--component-segmented-separator-border-size);/* focus: segmented field border size (separators) */ --component-segmented-focus-separator-border-color:var(--component-segmented-separator-border-color);/* focus: segmented field border color (separators) */ --component-segmented-disabled-font-weight: var(--component-disabled-font-weight);/* disabled: segmented field font weight */ --component-segmented-disabled-font-style: var(--component-disabled-font-style);/* disabled: segmented field font style */ --component-segmented-disabled-text-color: var(--component-disabled-text-color);/* disabled: segmented field text color */ --component-segmented-disabled-background-color:var(--component-disabled-background-color);/* disabled: segmented field background color */ --component-segmented-disabled-shadow: var(--component-disabled-shadow);/* disabled: segmented field box shadow */ --component-segmented-disabled-border-size: var(--component-disabled-border-size);/* disabled: segmented field border size */ --component-segmented-disabled-border-color: var(--component-disabled-border-color);/* disabled: segmented field border color */ --component-segmented-disabled-outline-size: var(--component-disabled-outline-size);/* disabled: segmented field outline size */ --component-segmented-disabled-outline-color: var(--component-disabled-outline-color);/* disabled: segmented field outline color */ --component-segmented-disabled-outline-offset: var(--component-disabled-outline-offset);/* disabled: segmented field outline offset */ --component-segmented-disabled-placeholder-font-weight:var(--component-disabled-placeholder-font-weight);/* segmented field placeholder font-weight */ --component-segmented-disabled-placeholder-font-size:var(--component-disabled-placeholder-font-size);/* segmented field placeholder font size */ --component-segmented-disabled-placeholder-color:var(--component-disabled-placeholder-color);/* segmented field placeholder color */ --component-segmented-disabled-segment-background-color:var(--component-segmented-segment-background-color);/* disabled: segmented field background color (single segment) */ --component-segmented-disabled-segment-shadow: var(--component-segmented-segment-shadow);/* disabled: segmented field box shadow (single segment) */ --component-segmented-disabled-segment-border-size:var(--component-segmented-segment-border-size);/* disabled: segmented field border size (single segment) */ --component-segmented-disabled-segment-border-color:var(--component-segmented-segment-border-color);/* disabled: segmented field border color (single segment) */ --component-segmented-disabled-separator-font-weight:var(--component-segmented-separator-font-weight);/* disabled: segmented field font weight (separators) */ --component-segmented-disabled-separator-font-style:var(--component-segmented-separator-font-style);/* disabled: segmented field font style (separators) */ --component-segmented-disabled-separator-text-color:var(--component-segmented-separator-text-color);/* disabled: segmented field text color (separators) */ --component-segmented-disabled-separator-background-color:var(--component-segmented-separator-background-color);/* disabled: segmented field background color (separators) */ --component-segmented-disabled-separator-shadow:var(--component-segmented-separator-shadow);/* disabled: segmented field box shadow (separators) */ --component-segmented-disabled-separator-border-size:var(--component-segmented-separator-border-size);/* disabled: segmented field border size (separators) */ --component-segmented-disabled-separator-border-color:var(--component-segmented-separator-border-color);/* disabled: segmented field border color (separators) */ --component-segmented-addon-padding: var(--component-padding);/* segmented field addon padding */ --component-segmented-addon-width: 32px; /* segmented field addon width */ --component-segmented-addon-font: var(--component-font);/* segmented field addon font family */ --component-segmented-addon-font-size: var(--component-font-size);/* segmented field addon font size */ --component-segmented-addon-font-weight: var(--component-font-weight);/* segmented field addon font weight */ --component-segmented-addon-font-style: var(--component-font-style);/* segmented field addon font style */ --component-segmented-addon-line-height: var(--component-line-height);/* segmented field addon line height */ --component-segmented-addon-text-color: var(--component-text-color);/* segmented field addon text color */ --component-segmented-addon-background-color: var(--component-background-color);/* segmented field addon background color */ --component-segmented-addon-important-font-weight: var(--component-important-font-weight);/* important: segmented field addon font weight */ --component-segmented-addon-important-font-style: var(--component-important-font-style);/* important: segmented field addon font style */ --component-segmented-addon-important-text-color: var(--component-important-text-color);/* important: segmented field addon text color */ --component-segmented-addon-important-background-color: var(--component-important-background-color);/* important: segmented field addon background color */ --component-segmented-addon-required-font-weight: var(--component-required-font-weight);/* required: segmented field addon font weight */ --component-segmented-addon-required-font-style: var(--component-required-font-style);/* required: segmented field addon font style */ --component-segmented-addon-required-text-color: var(--component-required-text-color);/* required: segmented field addon text color */ --component-segmented-addon-required-background-color: var(--component-required-background-color);/* required: segmented field addon background color */ --component-segmented-addon-empty-font-weight: var(--component-empty-font-weight);/* empty: segmented field addon font weight */ --component-segmented-addon-empty-font-style: var(--component-empty-font-style);/* empty: segmented field addon font style */ --component-segmented-addon-empty-text-color: var(--component-empty-text-color);/* empty: segmented field addon text color */ --component-segmented-addon-empty-background-color: var(--component-empty-background-color);/* empty: segmented field addon background color */ --component-segmented-addon-invalid-font-weight: var(--component-invalid-font-weight);/* invalid: segmented field addon font weight */ --component-segmented-addon-invalid-font-style: var(--component-invalid-font-style);/* invalid: segmented field addon font style */ --component-segmented-addon-invalid-text-color: var(--component-invalid-text-color);/* invalid: segmented field addon text color */ --component-segmented-addon-invalid-background-color: var(--component-invalid-background-color);/* invalid: segmented field addon background color */ --component-segmented-addon-focus-font-weight: var(--component-focus-font-weight);/* focus: segmented field addon font weight */ --component-segmented-addon-focus-font-style: var(--component-focus-font-style);/* focus: segmented field addon font style */ --component-segmented-addon-focus-text-color: var(--component-focus-text-color);/* focus: segmented field addon text color */ --component-segmented-addon-focus-background-color: var(--component-focus-background-color);/* focus: segmented field addon background color */ --component-segmented-addon-disabled-font-weight: var(--component-disabled-font-weight);/* disabled: segmented field addon font weight */ --component-segmented-addon-disabled-font-style: var(--component-disabled-font-style);/* disabled: segmented field addon font style */ --component-segmented-addon-disabled-text-color: var(--component-disabled-text-color);/* disabled: segmented field addon text color */ --component-segmented-addon-disabled-background-color: var(--component-disabled-background-color);/* disabled: segmented field addon background color */ /* segmented field - input separated */ --component-segmented-separated-padding: 0 0 0 0;/* segmented field padding */ --component-segmented-separated-font: var(--component-font);/* segmented field font family */ --component-segmented-separated-font-size: var(--component-font-size);/* segmented field font size */ --component-segmented-separated-font-weight: var(--component-font-weight);/* segmented field font weight */ --component-segmented-separated-font-style: var(--component-font-style);/* segmented field font style */ --component-segmented-separated-line-height: var(--component-line-height);/* segmented field line height */ --component-segmented-separated-text-color: var(--component-text-color);/* segmented field text color */ --component-segmented-separated-segment-background-color:var(--component-segmented-background-color);/* segmented field background color (single segment) */ --component-segmented-separated-segment-shadow: var(--component-segmented-shadow);/* segmented field box shadow (single segment) */ --component-segmented-separated-segment-border-radius: var(--component-segmented-border-radius); /* segmented field border radius (single segment) */ --component-segmented-separated-segment-border-size: var(--component-segmented-border-size); /* segmented field border size (single segment) */ --component-segmented-separated-segment-border-color: var(--component-segmented-border-color);/* segmented field border color (single segment) */ --component-segmented-separated-segment-padding-top: var(--component-padding-top); /* segmented field padding (single segment, top) */ --component-segmented-separated-segment-padding-right: var(--component-padding-right); /* segmented field padding (single segment, right) */ --component-segmented-separated-segment-padding-left: var(--component-padding-left); /* segmented field padding (single segment, bottom) */ --component-segmented-separated-segment-padding-bottom: var(--component-padding-bottom); /* segmented field padding (single segment, left) */ --component-segmented-separated-separator-font-size: var(--component-font-size);/* segmented field font size (separators) */ --component-segmented-separated-separator-font-weight: var(--component-font-weight);/* segmented field font weight (separators) */ --component-segmented-separated-separator-font-style: var(--component-font-style);/* segmented field font style (separators) */ --component-segmented-separated-separator-line-height: var(--component-line-height);/* segmented field line height (separators) */ --component-segmented-separated-separator-text-color: var(--component-text-color);/* segmented field text color (separators) */ --component-segmented-separated-separator-background-color:var(--component-segmented-background-color);/* segmented field background color (separators) */ --component-segmented-separated-separator-shadow: var(--component-segmented-shadow);/* segmented field box shadow (separators) */ --component-segmented-separated-separator-padding: 0 7px 0 7px;/* segmented field padding (separators) */ --component-segmented-separated-separator-first-padding:var(--component-segmented-separated-separator-padding);/* segmented field padding (first separator) */ --component-segmented-separated-separator-last-padding: var(--component-segmented-separated-separator-padding);/* segmented field padding (last separator) */ --component-segmented-separated-important-segment-background-color:var(--component-segmented-separated-segment-background-color);/* important: segmented field background color (single segment) */ --component-segmented-separated-important-segment-shadow: var(--component-segmented-separated-segment-shadow);/* important: segmented field box shadow (single segment) */ --component-segmented-separated-important-segment-border-size:var(--component-segmented-separated-segment-border-size);/* important: segmented field border size (single segment) */ --component-segmented-separated-important-segment-border-color:var(--component-segmented-separated-segment-border-color);/* important: segmented field border color (single segment) */ --component-segmented-separated-important-separator-font-weight:var(--component-segmented-separated-separator-font-weight);/* important: segmented field font weight (separators) */ --component-segmented-separated-important-separator-font-style:var(--component-segmented-separated-separator-font-style);/* important: segmented field font style (separators) */ --component-segmented-separated-important-separator-text-color:var(--component-segmented-separated-separator-text-color);/* important: segmented field text color (separators) */ --component-segmented-separated-required-segment-background-color:var(--component-segmented-separated-segment-background-color);/* required: segmented field background color (single segment) */ --component-segmented-separated-required-segment-shadow: var(--component-segmented-separated-segment-shadow);/* required: segmented field box shadow (single segment) */ --component-segmented-separated-required-segment-border-size:var(--component-segmented-separated-segment-border-size);/* required: segmented field border size (single segment) */ --component-segmented-separated-required-segment-border-color:var(--component-segmented-separated-segment-border-color);/* required: segmented field border color (single segment) */ --component-segmented-separated-required-separator-font-weight:var(--component-segmented-separated-separator-font-weight);/* required: segmented field font weight (separators) */ --component-segmented-separated-required-separator-font-style:var(--component-segmented-separated-separator-font-style);/* required: segmented field font style (separators) */ --component-segmented-separated-required-separator-text-color:var(--component-segmented-separated-separator-text-color);/* required: segmented field text color (separators) */ --component-segmented-separated-empty-segment-background-color:var(--component-segmented-separated-segment-background-color);/* empty: segmented field background color (single segment) */ --component-segmented-separated-empty-segment-shadow: var(--component-segmented-separated-segment-shadow);/* empty: segmented field box shadow (single segment) */ --component-segmented-separated-empty-segment-border-size:var(--component-segmented-separated-segment-border-size);/* empty: segmented field border size (single segment) */ --component-segmented-separated-empty-segment-border-color:var(--component-segmented-separated-segment-border-color);/* empty: segmented field border color (single segment) */ --component-segmented-separated-empty-separator-font-weight:var(--component-segmented-separated-separator-font-weight);/* empty: segmented field font weight (separators) */ --component-segmented-separated-empty-separator-font-style:var(--component-segmented-separated-separator-font-style);/* empty: segmented field font style (separators) */ --component-segmented-separated-empty-separator-text-color:var(--component-segmented-separated-separator-text-color);/* empty: segmented field text color (separators) */ --component-segmented-separated-invalid-segment-background-color:var(--component-segmented-separated-segment-background-color);/* invalid: segmented field background color (single segment) */ --component-segmented-separated-invalid-segment-shadow: var(--component-segmented-separated-segment-shadow);/* invalid: segmented field box shadow (single segment) */ --component-segmented-separated-invalid-segment-border-size:var(--component-segmented-separated-segment-border-size);/* invalid: segmented field border size (single segment) */ --component-segmented-separated-invalid-segment-border-color:var(--component-segmented-separated-segment-border-color);/* invalid: segmented field border color (single segment) */ --component-segmented-separated-invalid-separator-font-weight:var(--component-segmented-separated-separator-font-weight);/* invalid: segmented field font weight (separators) */ --component-segmented-separated-invalid-separator-font-style:var(--component-segmented-separated-separator-font-style);/* invalid: segmented field font style (separators) */ --component-segmented-separated-invalid-separator-text-color:var(--component-segmented-separated-separator-text-color);/* invalid: segmented field text color (separators) */ --component-segmented-separated-focus-segment-background-color:var(--component-segmented-separated-segment-background-color);/* focus: segmented field background color (single segment) */ --component-segmented-separated-focus-segment-shadow: var(--component-segmented-separated-segment-shadow);/* focus: segmented field box shadow (single segment) */ --component-segmented-separated-focus-segment-border-size:var(--component-segmented-separated-segment-border-size);/* focus: segmented field border size (single segment) */ --component-segmented-separated-focus-segment-border-color:var(--component-segmented-separated-segment-border-color);/* focus: segmented field border color (single segment) */ --component-segmented-separated-focus-separator-font-weight:var(--component-segmented-separated-separator-font-weight);/* focus: segmented field font weight (separators) */ --component-segmented-separated-focus-separator-font-style:var(--component-segmented-separated-separator-font-style);/* focus: segmented field font style (separators) */ --component-segmented-separated-focus-separator-text-color:var(--component-segmented-separated-separator-text-color);/* focus: segmented field text color (separators) */ --component-segmented-separated-disabled-segment-background-color:var(--component-segmented-separated-segment-background-color);/* disabled: segmented field background color (single segment) */ --component-segmented-separated-disabled-segment-shadow: var(--component-segmented-separated-segment-shadow);/* disabled: segmented field box shadow (single segment) */ --component-segmented-separated-disabled-segment-border-size:var(--component-segmented-separated-segment-border-size);/* disabled: segmented field border size (single segment) */ --component-segmented-separated-disabled-segment-border-color:var(--component-segmented-separated-segment-border-color);/* disabled: segmented field border color (single segment) */ --component-segmented-separated-disabled-separator-font-weight:var(--component-segmented-separated-separator-font-weight);/* disabled: segmented field font weight (separators) */ --component-segmented-separated-disabled-separator-font-style:var(--component-segmented-separated-separator-font-style);/* disabled: segmented field font style (separators) */ --component-segmented-separated-disabled-separator-text-color:var(--component-segmented-separated-separator-text-color);/* disabled: segmented field text color (separators) */ /* segmented field - big input */ --component-segmented-big-font-size: 26px;/* segmented field font size */ --component-segmented-big-font-weight: var(--component-segmented-separated-font-weight);/* segmented field font weight */ --component-segmented-big-font-style: var(--component-segmented-separated-font-style);/* segmented field font style */ --component-segmented-big-line-height: var(--component-segmented-separated-line-height);/* segmented field line height */ --component-segmented-big-border-radius: var(--component-segmented-separated-border-radius);/* segmented field border radius */ --component-segmented-big-placeholder-font-weight: var(--component-segmented-separated-placeholder-font-weight);/* segmented field placeholder font-weight */ --component-segmented-big-placeholder-font-size: var(--component-segmented-big-font-size);/* segmented field placeholder font size */ --component-segmented-big-segment-border-radius: 10px; /* segmented field border radius (single segment) */ --component-segmented-big-segment-padding-top: 20px; /* segmented field padding (single segment, top) */ --component-segmented-big-segment-padding-right: 5px; /* segmented field padding (single segment, right) */ --component-segmented-big-segment-padding-left: 5px; /* segmented field padding (single segment, bottom) */ --component-segmented-big-segment-padding-bottom: 20px; /* segmented field padding (single segment, left) */ --component-segmented-big-separator-font-size: var(--component-segmented-big-font-size);/* segmented field font size (separators) */ --component-segmented-big-separator-font-weight: var(--component-segmented-separated-separator-font-weight);/* segmented field font weight (separators) */ --component-segmented-big-separator-font-style: var(--component-segmented-separated-separator-font-style);/* segmented field font style (separators) */ --component-segmented-big-separator-line-height: var(--component-segmented-separated-separator-line-height);/* segmented field line height (separators) */ --component-segmented-big-separator-border-radius: var(--component-segmented-separated-separator-border-radius); /* segmented field border radius (separators) */ --component-segmented-big-separator-padding: var(--component-segmented-separated-separator-padding);/* segmented field padding (separators) */ --component-segmented-big-separator-first-padding: var(--component-segmented-separated-separator-first-padding);/* segmented field padding (first separator) */ --component-segmented-big-separator-last-padding: var(--component-segmented-separated-separator-last-padding);/* segmented field padding (last separator) */ /* signature field */ --component-signature-item-align: var(--component-item-align);/* signature field vertical alignment (align-self) */ --component-signature-margin: var(--component-margin);/* signature field margin */ --component-signature-inner-margin: 5px 0 0 0; /* component inner margin (signature div itself) */ --component-signature-padding: 4px 4px 4px 4px; /* signature field padding */ --component-signature-height: auto; /* signature field fixed height */ --component-signature-max-height: none; /* signature field max. height */ --component-signature-aspect-ratio: 5; /* signature field aspect ratio */ --component-signature-background-color: var(--component-background-color);/* signature field background color */ --component-signature-shadow: var(--component-shadow);/* signature field box shadow */ --component-signature-border-radius: var(--component-border-radius);/* signature field border radius */ --component-signature-border-size: var(--component-border-size);/* signature field border size */ --component-signature-border-color: var(--component-border-color);/* signature field border color */ --component-signature-outline-size: var(--component-outline-size);/* signature field outline size */ --component-signature-outline-color: var(--component-outline-color);/* signature field outline color */ --component-signature-outline-offset: var(--component-outline-offset);/* signature field outline offset */ --component-signature-important-background-color:var(--component-important-background-color);/* important: signature field background color */ --component-signature-important-shadow: var(--component-important-shadow);/* important: signature field box shadow */ --component-signature-important-border-size: var(--component-important-border-size);/* important: signature field border size */ --component-signature-important-border-color: var(--component-important-border-color);/* important: signature field border color */ --component-signature-important-outline-size: var(--component-important-outline-size);/* important: signature field outline size */ --component-signature-important-outline-color: var(--component-important-outline-color);/* important: signature field outline color */ --component-signature-important-outline-offset: var(--component-important-outline-offset);/* important: signature field outline offset */ --component-signature-required-background-color:var(--component-required-background-color);/* required: signature field background color */ --component-signature-required-shadow: var(--component-required-shadow);/* required: signature field box shadow */ --component-signature-required-border-size: var(--component-required-border-size);/* required: signature field border size */ --component-signature-required-border-color: var(--component-required-border-color);/* required: signature field border color */ --component-signature-required-outline-size: var(--component-required-outline-size);/* required: signature field outline size */ --component-signature-required-outline-color: var(--component-required-outline-color);/* required: signature field outline color */ --component-signature-required-outline-offset: var(--component-required-outline-offset);/* required: signature field outline offset */ --component-signature-empty-background-color: var(--component-empty-background-color);/* empty: signature field background color */ --component-signature-empty-shadow: var(--component-empty-shadow);/* empty: signature field box shadow */ --component-signature-empty-border-size: var(--component-empty-border-size);/* empty: signature field border size */ --component-signature-empty-border-color: var(--component-empty-border-color);/* empty: signature field border color */ --component-signature-empty-outline-size: var(--component-empty-outline-size);/* empty: signature field outline size */ --component-signature-empty-outline-color: var(--component-empty-outline-color);/* empty: signature field outline color */ --component-signature-empty-outline-offset: var(--component-empty-outline-offset);/* empty: signature field outline offset */ --component-signature-invalid-background-color: var(--component-invalid-background-color);/* invalid: signature field background color */ --component-signature-invalid-shadow: var(--component-invalid-shadow);/* invalid: signature field box shadow */ --component-signature-invalid-border-size: var(--component-invalid-border-size);/* invalid: signature field border size */ --component-signature-invalid-border-color: var(--component-invalid-border-color);/* invalid: signature field border color */ --component-signature-invalid-outline-size: var(--component-invalid-outline-size);/* invalid: signature field outline size */ --component-signature-invalid-outline-color: var(--component-invalid-outline-color);/* invalid: signature field outline color */ --component-signature-invalid-outline-offset: var(--component-invalid-outline-offset);/* invalid: signature field outline offset */ --component-signature-focus-background-color: var(--component-focus-background-color);/* focus: signature field background color */ --component-signature-focus-shadow: var(--component-focus-shadow);/* focus: signature field box shadow */ --component-signature-focus-border-size: var(--component-focus-border-size);/* focus: signature field border size */ --component-signature-focus-border-color: var(--component-focus-border-color);/* focus: signature field border color */ --component-signature-focus-outline-size: var(--component-focus-outline-size);/* focus: signature field outline size */ --component-signature-focus-outline-color: var(--component-focus-outline-color);/* focus: signature field outline color */ --component-signature-focus-outline-offset: var(--component-focus-outline-offset);/* focus: signature field outline offset */ --component-signature-disabled-background-color: var(--component-disabled-background-color);/* disabled: signature field background color */ --component-signature-disabled-shadow: var(--component-disabled-shadow);/* disabled: signature field box shadow */ --component-signature-disabled-border-size: var(--component-disabled-border-size);/* disabled: signature field border size */ --component-signature-disabled-border-color: var(--component-disabled-border-color);/* disabled: signature field border color */ --component-signature-disabled-outline-size: var(--component-disabled-outline-size);/* disabled: signature field outline size */ --component-signature-disabled-outline-color: var(--component-disabled-outline-color);/* disabled: signature field outline color */ --component-signature-disabled-outline-offset: var(--component-disabled-outline-offset);/* disabled: signature field outline offset */ --component-signature-button-container-pos: row; /* signature field: button container position (column: top/bottom, row: left/right) */ --component-signature-button-pos: column; /* signature field: buttons position */ --component-signature-button-container-margin: 20px; /* signature field: left (right) margin of the button container */ --component-signature-button-gap: 20px; /* signature field: button gap */ --component-signature-button-container-align: normal; /* signature field: button container align (align-self) */ --component-signature-button-width: 45px; /* signature field button width */ --component-signature-button-height: auto; /* signature field button height */ /* static field */ --component-static-item-align: var(--component-item-align);/* static field vertical alignment (align-self) */ --component-static-margin: var(--component-margin);/* static field margin */ --component-static-padding: var(--component-padding);/* static field padding */ --component-static-font: var(--component-font);/* static field font family */ --component-static-font-size: var(--component-font-size);/* static field font size */ --component-static-font-weight: var(--component-font-weight);/* static field font weight */ --component-static-font-style: var(--component-font-style);/* static field font style */ --component-static-line-height: var(--component-line-height);/* static field line height */ --component-static-text-color: var(--component-text-color);/* static field text color */ --component-static-background-color: transparent;/* static field background color */ --component-static-shadow: var(--component-shadow);/* static field box shadow */ --component-static-border-radius: 0; /* static field border radius */ --component-static-border-size: 0; /* static field border size */ --component-static-border-color: var(--component-border-color);/* static field border color */ --component-static-outline-size: var(--component-outline-size);/* static field outline size */ --component-static-outline-color: var(--component-outline-color);/* static field outline color */ --component-static-outline-offset: var(--component-outline-offset);/* static field outline offset */ --component-static-disabled-font-weight: var(--component-disabled-font-weight);/* disabled: static field font weight */ --component-static-disabled-font-style: var(--component-disabled-font-style);/* disabled: static field font style */ --component-static-disabled-text-color: var(--component-disabled-text-color);/* disabled: static field text color */ --component-static-disabled-background-color: var(--component-disabled-background-color);/* disabled: static field background color */ --component-static-disabled-shadow: var(--component-disabled-shadow);/* disabled: static field box shadow */ --component-static-disabled-border-size: var(--component-disabled-border-size);/* disabled: static field border size */ --component-static-disabled-border-color: var(--component-disabled-border-color);/* disabled: static field border color */ --component-static-disabled-outline-size: var(--component-disabled-outline-size);/* disabled: static field outline size */ --component-static-disabled-outline-color: var(--component-disabled-outline-color);/* disabled: static field outline color */ --component-static-disabled-outline-offset: var(--component-disabled-outline-offset);/* disabled: static field outline offset */ /* select field */ --component-select-item-align: var(--component-item-align);/* select field vertical alignment (align-self) */ --component-select-margin: var(--component-margin);/* select field margin */ --component-select-padding: var(--component-padding-top) 0 var(--component-padding-bottom) var(--component-padding-left);/* select field padding */ --component-select-font: var(--component-font);/* select field font family */ --component-select-font-size: var(--component-font-size);/* select field font size */ --component-select-font-weight: var(--component-font-weight);/* select field font weight */ --component-select-font-style: var(--component-font-style);/* select field font style */ --component-select-line-height: var(--component-line-height);/* select field line height */ --component-select-text-color: var(--component-text-color);/* select field text color */ --component-select-background-color: var(--component-background-color);/* select field background color */ --component-select-shadow: var(--component-shadow);/* select field box shadow */ --component-select-border-radius: var(--component-border-radius);/* select field border radius */ --component-select-border-size: var(--component-border-size);/* select field border size */ --component-select-border-color: var(--component-border-color);/* select field border color */ --component-select-outline-size: var(--component-outline-size);/* select field outline size */ --component-select-outline-color: var(--component-outline-color);/* select field outline color */ --component-select-outline-offset: var(--component-outline-offset);/* select field outline offset */ --component-select-placeholder-font: var(--component-placeholder-font);/* select field placeholder font */ --component-select-placeholder-font-weight: var(--component-placeholder-font-weight);/* select field placeholder font-weight */ --component-select-placeholder-font-size: var(--component-placeholder-font-size);/* select field placeholder font size */ --component-select-placeholder-color: var(--component-placeholder-color);/* select field placeholder color */ --component-select-icon-width: auto; /* select field option icon width */ --component-select-icon-height: var(--component-select-font-size); /* select field option icon height */ --component-select-icon-margin: 0 10px 0 0; /* select field option icon margin */ --component-select-important-font-weight: var(--component-important-font-weight);/* important: select field font weight */ --component-select-important-font-style: var(--component-important-font-style);/* important: select field font style */ --component-select-important-text-color: var(--component-important-text-color);/* important: select field text color */ --component-select-important-background-color: var(--component-important-background-color);/* important: select field background color */ --component-select-important-shadow: var(--component-important-shadow);/* important: select field box shadow */ --component-select-important-border-size: var(--component-important-border-size);/* important: select field border size */ --component-select-important-border-color: var(--component-important-border-color);/* important: select field border color */ --component-select-important-outline-size: var(--component-important-outline-size);/* important: select field outline size */ --component-select-important-outline-color: var(--component-important-outline-color);/* important: select field outline color */ --component-select-important-outline-offset: var(--component-important-outline-offset);/* important: select field outline offset */ --component-select-important-placeholder-font-weight:var(--component-important-placeholder-font-weight);/* select field placeholder font-weight */ --component-select-important-placeholder-font-size:var(--component-important-placeholder-font-size);/* select field placeholder font size */ --component-select-important-placeholder-color: var(--component-important-placeholder-color);/* select field placeholder color */ --component-select-required-font-weight: var(--component-required-font-weight);/* required: select field font weight */ --component-select-required-font-style: var(--component-required-font-style);/* required: select field font style */ --component-select-required-text-color: var(--component-required-text-color);/* required: select field text color */ --component-select-required-background-color: var(--component-required-background-color);/* required: select field background color */ --component-select-required-shadow: var(--component-required-shadow);/* required: select field box shadow */ --component-select-required-border-size: var(--component-required-border-size);/* required: select field border size */ --component-select-required-border-color: var(--component-required-border-color);/* required: select field border color */ --component-select-required-outline-size: var(--component-required-outline-size);/* required: select field outline size */ --component-select-required-outline-color: var(--component-required-outline-color);/* required: select field outline color */ --component-select-required-outline-offset: var(--component-required-outline-offset);/* required: select field outline offset */ --component-select-required-placeholder-font-weight:var(--component-required-placeholder-font-weight);/* select field placeholder font-weight */ --component-select-required-placeholder-font-size:var(--component-required-placeholder-font-size);/* select field placeholder font size */ --component-select-required-placeholder-color: var(--component-required-placeholder-color);/* select field placeholder color */ --component-select-empty-font-weight: var(--component-empty-font-weight);/* empty: select field font weight */ --component-select-empty-font-style: var(--component-empty-font-style);/* empty: select field font style */ --component-select-empty-text-color: var(--component-empty-text-color);/* empty: select field text color */ --component-select-empty-background-color: var(--component-empty-background-color);/* empty: select field background color */ --component-select-empty-shadow: var(--component-empty-shadow);/* empty: select field box shadow */ --component-select-empty-border-size: var(--component-empty-border-size);/* empty: select field border size */ --component-select-empty-border-color: var(--component-empty-border-color);/* empty: select field border color */ --component-select-empty-outline-size: var(--component-empty-outline-size);/* empty: select field outline size */ --component-select-empty-outline-color: var(--component-empty-outline-color);/* empty: select field outline color */ --component-select-empty-outline-offset: var(--component-empty-outline-offset);/* empty: select field outline offset */ --component-select-empty-placeholder-font-weight:var(--component-empty-placeholder-font-weight);/* select field placeholder font-weight */ --component-select-empty-placeholder-font-size: var(--component-empty-placeholder-font-size);/* select field placeholder font size */ --component-select-empty-placeholder-color: var(--component-empty-placeholder-color);/* select field placeholder color */ --component-select-invalid-font-weight: var(--component-invalid-font-weight);/* invalid: select field font weight */ --component-select-invalid-font-style: var(--component-invalid-font-style);/* invalid: select field font style */ --component-select-invalid-text-color: var(--component-invalid-text-color);/* invalid: select field text color */ --component-select-invalid-background-color: var(--component-invalid-background-color);/* invalid: select field background color */ --component-select-invalid-shadow: var(--component-invalid-shadow);/* invalid: select field box shadow */ --component-select-invalid-border-size: var(--component-invalid-border-size);/* invalid: select field border size */ --component-select-invalid-border-color: var(--component-invalid-border-color);/* invalid: select field border color */ --component-select-invalid-outline-size: var(--component-invalid-outline-size);/* invalid: select field outline size */ --component-select-invalid-outline-color: var(--component-invalid-outline-color);/* invalid: select field outline color */ --component-select-invalid-outline-offset: var(--component-invalid-outline-offset);/* invalid: select field outline offset */ --component-select-invalid-placeholder-font-weight:var(--component-invalid-placeholder-font-weight);/* select field placeholder font-weight */ --component-select-invalid-placeholder-font-size:var(--component-invalid-placeholder-font-size);/* select field placeholder font size */ --component-select-invalid-placeholder-color: var(--component-invalid-placeholder-color);/* select field placeholder color */ --component-select-focus-font-weight: var(--component-focus-font-weight);/* focus: select field font weight */ --component-select-focus-font-style: var(--component-focus-font-style);/* focus: select field font style */ --component-select-focus-text-color: var(--component-focus-text-color);/* focus: select field text color */ --component-select-focus-background-color: var(--component-focus-background-color);/* focus: select field background color */ --component-select-focus-shadow: var(--component-focus-shadow);/* focus: select field box shadow */ --component-select-focus-border-size: var(--component-focus-border-size);/* focus: select field border size */ --component-select-focus-border-color: var(--component-focus-border-color);/* focus: select field border color */ --component-select-focus-outline-size: var(--component-focus-outline-size);/* focus: select field outline size */ --component-select-focus-outline-color: var(--component-focus-outline-color);/* focus: select field outline color */ --component-select-focus-outline-offset: var(--component-focus-outline-offset);/* focus: select field outline offset */ --component-select-focus-placeholder-font-weight:var(--component-focus-placeholder-font-weight);/* select field placeholder font-weight */ --component-select-focus-placeholder-font-size: var(--component-focus-placeholder-font-size);/* select field placeholder font size */ --component-select-focus-placeholder-color: var(--component-focus-placeholder-color);/* select field placeholder color */ --component-select-disabled-font-weight: var(--component-disabled-font-weight);/* disabled: select field font weight */ --component-select-disabled-font-style: var(--component-disabled-font-style);/* disabled: select field font style */ --component-select-disabled-text-color: var(--component-disabled-text-color);/* disabled: select field text color */ --component-select-disabled-background-color: var(--component-disabled-background-color);/* disabled: select field background color */ --component-select-disabled-shadow: var(--component-disabled-shadow);/* disabled: select field box shadow */ --component-select-disabled-border-size: var(--component-disabled-border-size);/* disabled: select field border size */ --component-select-disabled-border-color: var(--component-disabled-border-color);/* disabled: select field border color */ --component-select-disabled-outline-size: var(--component-disabled-outline-size);/* disabled: select field outline size */ --component-select-disabled-outline-color: var(--component-disabled-outline-color);/* disabled: select field outline color */ --component-select-disabled-outline-offset: var(--component-disabled-outline-offset);/* disabled: select field outline offset */ --component-select-disabled-placeholder-font-weight:var(--component-disabled-placeholder-font-weight);/* select field placeholder font-weight */ --component-select-disabled-placeholder-font-size:var(--component-disabled-placeholder-font-size);/* select field placeholder font size */ --component-select-disabled-placeholder-color: var(--component-disabled-placeholder-color);/* select field placeholder color */ --component-select-caret-padding: 0 5px 0 5px; /* select field caret padding */ --component-select-caret-width: 52px; /* select field caret min. width */ --component-select-caret-background-color: var(--component-background-color);/* select field caret background color */ --component-select-caret-border-radius: var(--component-border-radius);/* select field caret border radius */ --component-select-caret-border-size: var(--component-border-size);/* select field caret border size */ --component-select-caret-border-color: var(--component-border-color);/* select field caret border color */ --component-select-caret-outline-size: var(--component-outline-size);/* select field caret outline size */ --component-select-caret-outline-color: var(--component-outline-color);/* select field caret outline color */ --component-select-caret-outline-offset: var(--component-outline-offset);/* select field caret outline offset */ --component-select-caret-important-background-color:var(--component-important-background-color);/* important: select field caret background color */ --component-select-caret-important-border-size: var(--component-important-border-size);/* important: select field caret border size */ --component-select-caret-important-border-color:var(--component-important-border-color);/* important: select field caret border color */ --component-select-caret-important-outline-size:var(--component-important-outline-size);/* important: select field caret outline size */ --component-select-caret-important-outline-color:var(--component-important-outline-color);/* important: select field caret outline color */ --component-select-caret-important-outline-offset:var(--component-important-outline-offset);/* important: select field caret outline offset */ --component-select-caret-required-background-color:var(--component-required-background-color);/* required: select field caret background color */ --component-select-caret-required-border-size: var(--component-required-border-size);/* required: select field caret border size */ --component-select-caret-required-border-color: var(--component-required-border-color);/* required: select field caret border color */ --component-select-caret-required-outline-size: var(--component-required-outline-size);/* required: select field caret outline size */ --component-select-caret-required-outline-color:var(--component-required-outline-color);/* required: select field caret outline color */ --component-select-caret-required-outline-offset:var(--component-required-outline-offset);/* required: select field caret outline offset */ --component-select-caret-empty-background-color:var(--component-empty-background-color);/* empty: select field caret background color */ --component-select-caret-empty-border-size: var(--component-empty-border-size);/* empty: select field caret border size */ --component-select-caret-empty-border-color: var(--component-empty-border-color);/* empty: select field caret border color */ --component-select-caret-empty-outline-size: var(--component-empty-outline-size);/* empty: select field caret outline size */ --component-select-caret-empty-outline-color: var(--component-empty-outline-color);/* empty: select field caret outline color */ --component-select-caret-empty-outline-offset: var(--component-empty-outline-offset);/* empty: select field caret outline offset */ --component-select-caret-invalid-background-color:var(--component-invalid-background-color);/* invalid: select field caret background color */ --component-select-caret-invalid-border-size: var(--component-invalid-border-size);/* invalid: select field caret border size */ --component-select-caret-invalid-border-color: var(--component-invalid-border-color);/* invalid: select field caret border color */ --component-select-caret-invalid-outline-size: var(--component-invalid-outline-size);/* invalid: select field caret outline size */ --component-select-caret-invalid-outline-color: var(--component-invalid-outline-color);/* invalid: select field caret outline color */ --component-select-caret-invalid-outline-offset: var(--component-invalid-outline-offset);/* invalid: select field caret outline offset */ --component-select-caret-focus-background-color:var(--component-focus-background-color);/* focus: select field caret background color */ --component-select-caret-focus-border-size: var(--component-focus-border-size);/* focus: select field caret border size */ --component-select-caret-focus-border-color: var(--component-focus-border-color);/* focus: select field caret border color */ --component-select-caret-focus-outline-size: var(--component-focus-outline-size);/* focus: select field caret outline size */ --component-select-caret-focus-outline-color: var(--component-focus-outline-color);/* focus: select field caret outline color */ --component-select-caret-focus-outline-offset: var(--component-focus-outline-offset);/* focus: select field caret outline offset */ --component-select-caret-disabled-background-color:var(--component-disabled-background-color);/* disabled: select field caret background color */ --component-select-caret-disabled-border-size: var(--component-disabled-border-size);/* disabled: select field caret border size */ --component-select-caret-disabled-border-color: var(--component-disabled-border-color);/* disabled: select field caret border color */ --component-select-caret-disabled-outline-size: var(--component-disabled-outline-size);/* disabled: select field caret outline size */ --component-select-caret-disabled-outline-color:var(--component-disabled-outline-color);/* disabled: select field caret outline color */ --component-select-caret-disabled-outline-offset:var(--component-disabled-outline-offset);/* disabled: select field caret outline offset */ --component-select-list-max-height: 30vh; /* select field option list max. height */ --component-select-list-padding: 4px 8px 4px 8px;/* select field option list padding */ --component-select-list-font: var(--component-font);/* select field option list font family */ --component-select-list-font-size: var(--component-font-size);/* select field option list font size */ --component-select-list-font-weight: var(--component-font-weight);/* select field option list font weight */ --component-select-list-font-style: var(--component-font-style);/* select field option list font style */ --component-select-list-line-height: var(--component-line-height);/* select field option list line height */ --component-select-list-text-color: var(--component-text-color);/* select field option list text color */ --component-select-list-background-color: var(--component-background-color);/* select field option list background color */ --component-select-list-shadow: var(--component-shadow);/* select field option list box shadow */ --component-select-list-border-radius: var(--component-border-radius);/* select field option list border radius */ --component-select-list-border-size: var(--component-border-size);/* select field option list border size */ --component-select-list-border-color: var(--component-border-color);/* select field option list border color */ --component-select-list-outline-size: var(--component-outline-size);/* select field option list outline size */ --component-select-list-outline-color: var(--component-outline-color);/* select field option list outline color */ --component-select-list-outline-offset: var(--component-outline-offset);/* select field option list outline offset */ --component-select-option-padding: 4px 8px 4px 8px;/* select field option padding */ --component-select-list-hover-text-color: var(--component-background-color);/* select field option hover text color */ --component-select-list-hover-background-color: #2c84ca; /* select field option hover background color */ --component-select-list-selected-text-color: var(--component-background-color);/* select field option selected item text color */ --component-select-list-selected-background-color: #55c3f1; /* select field option selected item background color */ --component-select-list-icon-width: auto; /* select field option icon width */ --component-select-list-icon-height: calc(var(--component-select-list-font-size) + 4px); /* select field option icon height */ --component-select-list-icon-margin: var(--component-select-icon-margin); /* select field option icon margin */ --component-select-option-line1-margin: 7px; /* select field option (line 1) bottom margin */ --component-select-option-line1-padding: 0 0 0 0; /* select field option (line 1) padding */ --component-select-option-line2-margin: 7px; /* select field option (line 2) bottom margin */ --component-select-option-line2-padding: 0 0 0 0; /* select field option (line 2) padding */ --component-select-option-line2-font: var(--component-select-list-font);/* select field option (line 2) font family */ --component-select-option-line2-font-size: 12px; /* select field option (line 2) font size */ --component-select-option-line2-font-weight: var(--component-select-list-font-weight);/* select field option (line 2) font weight */ --component-select-option-line2-font-style: var(--component-select-list-font-style);/* select field option (line 2) font style */ --component-select-option-line2-line-height: var(--component-select-list-line-height);/* select field option (line 2) line height */ --component-select-option-line2-text-color: var(--component-select-list-text-color);/* select field option (line 2) text color */ --component-select-option-line2-hover-text-color:var(--component-select-list-hover-text-color);/* select field option (line 2) hover text color */ --component-select-multiselect-padding: 3px var(--component-padding-right) 3px var(--component-padding-left);/* select field padding */ --component-select-tag-list-padding: 0 0 0 0; /* select field tag list padding */ --component-select-tag-list-background-color: var(--component-background-color);/* select field tag list background color */ --component-select-tag-list-border-size: 0;/* select field tag list border size */ --component-select-tag-list-border-color: var(--component-border-color);/* select field tag list border color */ --component-select-tag-list-disabled-background-color:var(--component-background-color);/* disabled: select field tag list background color */ --component-select-tag-list-disabled-border-size:var(--component-border-size);/* disabled: select field tag list border size */ --component-select-tag-list-disabled-border-color:var(--component-border-color);/* disabled: select field tag list border color */ --component-select-tag-margin: 3px 0 3px 4px;/* select field tag margin */ --component-select-tag-padding: 4px 4px 4px 4px;/* select field tag padding */ --component-select-tag-font: var(--component-font);/* select field tag font family */ --component-select-tag-font-size: 15px; /* select field tag font size */ --component-select-tag-font-weight: var(--component-font-weight);/* select field tag font weight */ --component-select-tag-font-style: var(--component-font-style);/* select field tag font style */ --component-select-tag-line-height: var(--component-line-height);/* select field tag line height */ --component-select-tag-text-color: var(--component-text-color);/* select field tag text color */ --component-select-tag-background-color: var(--component-background-color);/* select field tag background color */ --component-select-tag-shadow: var(--component-shadow);/* select field tag box shadow */ --component-select-tag-border-radius: var(--component-border-radius);/* select field tag border radius */ --component-select-tag-border-size: var(--component-border-size);/* select field tag border size */ --component-select-tag-border-color: var(--component-border-color);/* select field tag border color */ --component-select-tag-hover-font-weight: var(--component-font-weight);/* hover: select field tag font weight */ --component-select-tag-hover-font-style: var(--component-font-style);/* hover: select field tag font style */ --component-select-tag-hover-text-color: var(--component-text-color);/* hover: select field tag text color */ --component-select-tag-hover-background-color: var(--component-background-color);/* hover: select field tag background color */ --component-select-tag-hover-shadow: var(--component-shadow);/* hover: select field tag box shadow */ --component-select-tag-hover-border-color: var(--component-border-color);/* hover: select field tag border color */ --component-select-tag-x-padding: 0px 4px 0px 8px;/* select field tag x padding */ --component-select-tag-x-offset_x: 0; /* select field tag x offset in x direction */ --component-select-tag-x-offset_y: -1px; /* select field tag x offset in y direction */ --component-select-tag-x-font: "Font Awesome 5 Pro";/* select field tag x font family */ --component-select-tag-x-font-size: 14px;/* select field tag x font size */ --component-select-tag-x-font-weight: var(--component-font-weight);/* select field tag x font weight */ --component-select-tag-x-font-style: var(--component-font-style);/* select field tag x font style */ --component-select-tag-x-text-color: var(--component-text-color);/* select field tag x text color */ --component-select-tag-x-hover-font-weight: var(--component-font-weight);/* hover: select field tag x font weight */ --component-select-tag-x-hover-font-style: var(--component-font-style);/* hover: select field tag x font style */ --component-select-tag-x-hover-text-color: var(--component-text-color);/* hover: select field tag x text color */ --component-select-search-margin: 5px 10px 5px 10px; /* select field search input margin */ --component-select-search-padding: 8px 10px 8px 10px; /* select field search input padding */ --component-select-search-font: var(--component-select-font);/* select field search input font family */ --component-select-search-font-size: 16px; /* select field search input font size */ --component-select-search-font-weight: var(--component-select-font-weight);/* select field search input font weight */ --component-select-search-font-style: var(--component-select-font-style);/* select field search input font style */ --component-select-search-line-height: var(--component-select-line-height);/* select field search input line height */ --component-select-search-text-color: var(--component-select-text-color);/* select field search input text color */ --component-select-search-background-color: var(--component-select-background-color);/* select field search input background color */ --component-select-search-shadow: var(--component-select-shadow);/* select field search input box shadow */ --component-select-search-border-radius: var(--component-select-border-radius);/* select field search input border radius */ --component-select-search-border-size: var(--component-select-border-size);/* select field search input border size */ --component-select-search-border-color: var(--component-select-border-color);/* select field search input border color */ --component-select-search-outline-size: var(--component-select-outline-size);/* select field search input outline size */ --component-select-search-outline-color: var(--component-select-outline-color);/* select field search input outline color */ --component-select-search-outline-offset: var(--component-select-outline-offset);/* select field search input outline offset */ --component-select-add-button-color: #002D72; /* select field add button color */ --component-select-add-button-hover-color: #2c84ca; /* select field add button color */ --component-select-add-button-active-color: #2c84ca; /* select field add button color */ --component-select-add-button-font-size: 16px; /* select field add button font size */ --component-select-add-button-padding: 0 0 0 15px; /* select field add button padding */ /* date field */ --component-date-item-align: var(--component-segmented-item-align);/* date field vertical alignment (align-self) */ --component-date-margin: var(--component-segmented-margin);/* date field margin */ --component-date-padding: var(--component-segmented-padding);/* date field padding */ --component-date-container-align: var(--component-segmented-container-align); /* item alignment in container */ --component-date-font: var(--component-segmented-font);/* date field font family */ --component-date-font-size: var(--component-segmented-font-size);/* date field font size */ --component-date-font-weight: var(--component-segmented-font-weight);/* date field font weight */ --component-date-font-style: var(--component-segmented-font-style);/* date field font style */ --component-date-line-height: var(--component-segmented-line-height);/* date field line height */ --component-date-text-color: var(--component-segmented-text-color);/* date field text color */ --component-date-background-color: var(--component-segmented-background-color);/* date field background color */ --component-date-shadow: var(--component-segmented-shadow);/* date field box shadow */ --component-date-border-radius: var(--component-segmented-border-radius);/* date field border radius */ --component-date-border-size: var(--component-segmented-border-size);/* date field border size */ --component-date-border-color: var(--component-segmented-border-color);/* date field border color */ --component-date-outline-size: var(--component-segmented-outline-size);/* date field outline size */ --component-date-outline-color: var(--component-segmented-outline-color);/* date field outline color */ --component-date-outline-offset: var(--component-segmented-outline-offset);/* date field outline offset */ --component-date-placeholder-font: var(--component-segmented-placeholder-font);/* date- field placeholder font */ --component-date-placeholder-font-weight: var(--component-segmented-placeholder-font-weight);/* date- field placeholder font-weight */ --component-date-placeholder-font-size: var(--component-segmented-placeholder-font-size);/* date- field placeholder font size */ --component-date-placeholder-color: var(--component-segmented-placeholder-color);/* date- field placeholder color */ --component-date-segment-background-color: var(--component-segmented-segment-background-color);/* date field background color (single segment) */ --component-date-segment-shadow: var(--component-segmented-segment-shadow);/* date field box shadow (single segment) */ --component-date-segment-border-radius: var(--component-segmented-segment-border-radius); /* date field border radius (single segment) */ --component-date-segment-border-size: var(--component-segmented-segment-border-size); /* date field border size (single segment) */ --component-date-segment-border-color: var(--component-segmented-segment-border-color);/* date field border color (single segment) */ --component-date-segment-padding: var(--component-segmented-segment-padding); /* date field padding (single segment) */ --component-date-separator-font-size: var(--component-segmented-separator-font-size);/* date field font size (separators) */ --component-date-separator-font-weight: var(--component-segmented-separator-font-weight);/* date field font weight (separators) */ --component-date-separator-font-style: var(--component-segmented-separator-font-style);/* date field font style (separators) */ --component-date-separator-line-height: var(--component-segmented-separator-line-height);/* date field line height (separators) */ --component-date-separator-text-color: var(--component-segmented-separator-text-color);/* date field text color (separators) */ --component-date-separator-background-color: var(--component-segmented-separator-background-color);/* date field background color (separators) */ --component-date-separator-shadow: var(--component-segmented-separator-shadow);/* date field box shadow (separators) */ --component-date-separator-border-radius: var(--component-segmented-separator-border-radius); /* date field border radius (separators) */ --component-date-separator-border-size: var(--component-segmented-separator-border-size); /* date field border size (separators) */ --component-date-separator-border-color: var(--component-segmented-separator-border-color);/* date field border color (separators) */ --component-date-separator-padding: var(--component-segmented-separator-padding);/* date field padding (separators) */ --component-date-separator-first-padding: var(--component-segmented-separator-first-padding);/* date field padding (first separator) */ --component-date-separator-last-padding: var(--component-segmented-separator-last-padding);/* date field padding (last separator) */ --component-date-important-font-weight: var(--component-segmented-important-font-weight);/* important: date field font weight */ --component-date-important-font-style: var(--component-segmented-important-font-style);/* important: date field font style */ --component-date-important-text-color: var(--component-segmented-important-text-color);/* important: date field text color */ --component-date-important-background-color: var(--component-segmented-important-background-color);/* important: date field background color */ --component-date-important-shadow: var(--component-segmented-important-shadow);/* important: date field box shadow */ --component-date-important-border-size: var(--component-segmented-important-border-size);/* important: date field border size */ --component-date-important-border-color: var(--component-segmented-important-border-color);/* important: date field border color */ --component-date-important-outline-size: var(--component-segmented-important-outline-size);/* important: date field outline size */ --component-date-important-outline-color: var(--component-segmented-important-outline-color);/* important: date field outline color */ --component-date-important-outline-offset: var(--component-segmented-important-outline-offset);/* important: date field outline offset */ --component-date-important-placeholder-font-weight:var(--component-segmented-important-placeholder-font-weight);/* date- field placeholder font-weight */ --component-date-important-placeholder-font-size:var(--component-segmented-important-placeholder-font-size);/* date- field placeholder font size */ --component-date-important-placeholder-color: var(--component-segmented-important-placeholder-color);/* date- field placeholder color */ --component-date-important-segment-background-color:var(--component-segmented-important-segment-background-color);/* important: date field background color (single segment) */ --component-date-important-segment-shadow: var(--component-segmented-important-segment-shadow);/* important: date field box shadow (single segment) */ --component-date-important-segment-border-size: var(--component-segmented-important-segment-border-size);/* important: date field border size (single segment) */ --component-date-important-segment-border-color:var(--component-segmented-important-segment-border-color);/* important: date field border color (single segment) */ --component-date-important-separator-font-weight:var(--component-segmented-important-separator-font-weight);/* important: date field font weight (separators) */ --component-date-important-separator-font-style:var(--component-segmented-important-separator-font-style);/* important: date field font style (separators) */ --component-date-important-separator-text-color:var(--component-segmented-important-separator-text-color);/* important: date field text color (separators) */ --component-date-important-separator-background-color:var(--component-segmented-important-separator-background-color);/* important: date field background color (separators) */ --component-date-important-separator-shadow: var(--component-segmented-important-separator-shadow);/* important: date field box shadow (separators) */ --component-date-important-separator-border-size:var(--component-segmented-important-separator-border-size);/* important: date field border size (separators) */ --component-date-important-separator-border-color:var(--component-segmented-important-separator-border-color);/* important: date field border color (separators) */ --component-date-required-font-weight: var(--component-segmented-required-font-weight);/* required: date field font weight */ --component-date-required-font-style: var(--component-segmented-required-font-style);/* required: date field font style */ --component-date-required-text-color: var(--component-segmented-required-text-color);/* required: date field text color */ --component-date-required-background-color: var(--component-segmented-required-background-color);/* required: date field background color */ --component-date-required-shadow: var(--component-segmented-required-shadow);/* required: date field box shadow */ --component-date-required-border-size: var(--component-segmented-required-border-size);/* required: date field border size */ --component-date-required-border-color: var(--component-segmented-required-border-color);/* required: date field border color */ --component-date-required-outline-size: var(--component-segmented-required-outline-size);/* required: date field outline size */ --component-date-required-outline-color: var(--component-segmented-required-outline-color);/* required: date field outline color */ --component-date-required-outline-offset: var(--component-segmented-required-outline-offset);/* required: date field outline offset */ --component-date-required-placeholder-font-weight:var(--component-segmented-required-placeholder-font-weight);/* date- field placeholder font-weight */ --component-date-required-placeholder-font-size:var(--component-segmented-required-placeholder-font-size);/* date- field placeholder font size */ --component-date-required-placeholder-color: var(--component-segmented-required-placeholder-color);/* date- field placeholder color */ --component-date-required-segment-background-color:var(--component-segmented-required-segment-background-color);/* required: date field background color (single segment) */ --component-date-required-segment-shadow: var(--component-segmented-required-segment-shadow);/* required: date field box shadow (single segment) */ --component-date-required-segment-border-size: var(--component-segmented-required-segment-border-size);/* required: date field border size (single segment) */ --component-date-required-segment-border-color: var(--component-segmented-required-segment-border-color);/* required: date field border color (single segment) */ --component-date-required-separator-font-weight:var(--component-segmented-required-separator-font-weight);/* required: date field font weight (separators) */ --component-date-required-separator-font-style: var(--component-segmented-required-separator-font-style);/* required: date field font style (separators) */ --component-date-required-separator-text-color: var(--component-segmented-required-separator-text-color);/* required: date field text color (separators) */ --component-date-required-separator-background-color:var(--component-segmented-required-separator-background-color);/* required: date field background color (separators) */ --component-date-required-separator-shadow: var(--component-segmented-required-separator-shadow);/* required: date field box shadow (separators) */ --component-date-required-separator-border-size:var(--component-segmented-required-separator-border-size);/* required: date field border size (separators) */ --component-date-required-separator-border-color:var(--component-segmented-required-separator-border-color);/* required: date field border color (separators) */ --component-date-empty-font-weight: var(--component-segmented-empty-font-weight);/* empty: date field font weight */ --component-date-empty-font-style: var(--component-segmented-empty-font-style);/* empty: date field font style */ --component-date-empty-text-color: var(--component-segmented-empty-text-color);/* empty: date field text color */ --component-date-empty-background-color: var(--component-segmented-empty-background-color);/* empty: date field background color */ --component-date-empty-shadow: var(--component-segmented-empty-shadow);/* empty: date field box shadow */ --component-date-empty-border-size: var(--component-segmented-empty-border-size);/* empty: date field border size */ --component-date-empty-border-color: var(--component-segmented-empty-border-color);/* empty: date field border color */ --component-date-empty-outline-size: var(--component-segmented-empty-outline-size);/* empty: date field outline size */ --component-date-empty-outline-color: var(--component-segmented-empty-outline-color);/* empty: date field outline color */ --component-date-empty-outline-offset: var(--component-segmented-empty-outline-offset);/* empty: date field outline offset */ --component-date-empty-placeholder-font-weight: var(--component-segmented-empty-placeholder-font-weight);/* date- field placeholder font-weight */ --component-date-empty-placeholder-font-size: var(--component-segmented-empty-placeholder-font-size);/* date- field placeholder font size */ --component-date-empty-placeholder-color: var(--component-segmented-empty-placeholder-color);/* date- field placeholder color */ --component-date-empty-segment-background-color:var(--component-segmented-empty-segment-background-color);/* empty: date field background color (single segment) */ --component-date-empty-segment-shadow: var(--component-segmented-empty-segment-shadow);/* empty: date field box shadow (single segment) */ --component-date-empty-segment-border-size: var(--component-segmented-empty-segment-border-size);/* empty: date field border size (single segment) */ --component-date-empty-segment-border-color: var(--component-segmented-empty-segment-border-color);/* empty: date field border color (single segment) */ --component-date-empty-separator-font-weight: var(--component-segmented-empty-separator-font-weight);/* empty: date field font weight (separators) */ --component-date-empty-separator-font-style: var(--component-segmented-empty-separator-font-style);/* empty: date field font style (separators) */ --component-date-empty-separator-text-color: var(--component-segmented-empty-separator-text-color);/* empty: date field text color (separators) */ --component-date-empty-separator-background-color:var(--component-segmented-empty-separator-background-color);/* empty: date field background color (separators) */ --component-date-empty-separator-shadow: var(--component-segmented-empty-separator-shadow);/* empty: date field box shadow (separators) */ --component-date-empty-separator-border-size: var(--component-segmented-empty-separator-border-size);/* empty: date field border size (separators) */ --component-date-empty-separator-border-color: var(--component-segmented-empty-separator-border-color);/* empty: date field border color (separators) */ --component-date-invalid-font-weight: var(--component-segmented-invalid-font-weight);/* invalid: date field font weight */ --component-date-invalid-font-style: var(--component-segmented-invalid-font-style);/* invalid: date field font style */ --component-date-invalid-text-color: var(--component-segmented-invalid-text-color);/* invalid: date field text color */ --component-date-invalid-background-color: var(--component-segmented-invalid-background-color);/* invalid: date field background color */ --component-date-invalid-shadow: var(--component-segmented-invalid-shadow);/* invalid: date field box shadow */ --component-date-invalid-border-size: var(--component-segmented-invalid-border-size);/* invalid: date field border size */ --component-date-invalid-border-color: var(--component-segmented-invalid-border-color);/* invalid: date field border color */ --component-date-invalid-outline-size: var(--component-segmented-invalid-outline-size);/* invalid: date field outline size */ --component-date-invalid-outline-color: var(--component-segmented-invalid-outline-color);/* invalid: date field outline color */ --component-date-invalid-outline-offset: var(--component-segmented-invalid-outline-offset);/* invalid: date field outline offset */ --component-date-invalid-placeholder-font-weight:var(--component-segmented-invalid-placeholder-font-weight);/* date- field placeholder font-weight */ --component-date-invalid-placeholder-font-size: var(--component-segmented-invalid-placeholder-font-size);/* date- field placeholder font size */ --component-date-invalid-placeholder-color: var(--component-segmented-invalid-placeholder-color);/* date- field placeholder color */ --component-date-invalid-segment-background-color:var(--component-segmented-invalid-segment-background-color);/* invalid: date field background color (single segment) */ --component-date-invalid-segment-shadow: var(--component-segmented-invalid-segment-shadow);/* invalid: date field box shadow (single segment) */ --component-date-invalid-segment-border-size: var(--component-segmented-invalid-segment-border-size);/* invalid: date field border size (single segment) */ --component-date-invalid-segment-border-color: var(--component-segmented-invalid-segment-border-color);/* invalid: date field border color (single segment) */ --component-date-invalid-separator-font-weight: var(--component-segmented-invalid-separator-font-weight);/* invalid: date field font weight (separators) */ --component-date-invalid-separator-font-style: var(--component-segmented-invalid-separator-font-style);/* invalid: date field font style (separators) */ --component-date-invalid-separator-text-color: var(--component-segmented-invalid-separator-text-color);/* invalid: date field text color (separators) */ --component-date-invalid-separator-background-color:var(--component-segmented-invalid-separator-background-color);/* invalid: date field background color (separators) */ --component-date-invalid-separator-shadow: var(--component-segmented-invalid-separator-shadow);/* invalid: date field box shadow (separators) */ --component-date-invalid-separator-border-size: var(--component-segmented-invalid-separator-border-size);/* invalid: date field border size (separators) */ --component-date-invalid-separator-border-color:var(--component-segmented-invalid-separator-border-color);/* invalid: date field border color (separators) */ --component-date-focus-font-weight: var(--component-segmented-focus-font-weight);/* focus: date field font weight */ --component-date-focus-font-style: var(--component-segmented-focus-font-style);/* focus: date field font style */ --component-date-focus-text-color: var(--component-segmented-focus-text-color);/* focus: date field text color */ --component-date-focus-background-color: var(--component-segmented-focus-background-color);/* focus: date field background color */ --component-date-focus-shadow: var(--component-segmented-focus-shadow);/* focus: date field box shadow */ --component-date-focus-border-size: var(--component-segmented-focus-border-size);/* focus: date field border size */ --component-date-focus-border-color: var(--component-segmented-focus-border-color);/* focus: date field border color */ --component-date-focus-outline-size: var(--component-segmented-focus-outline-size);/* focus: date field outline size */ --component-date-focus-outline-color: var(--component-segmented-focus-outline-color);/* focus: date field outline color */ --component-date-focus-outline-offset: var(--component-segmented-focus-outline-offset);/* focus: date field outline offset */ --component-date-focus-placeholder-font-weight: var(--component-segmented-focus-placeholder-font-weight);/* date- field placeholder font-weight */ --component-date-focus-placeholder-font-size: var(--component-segmented-focus-placeholder-font-size);/* date- field placeholder font size */ --component-date-focus-placeholder-color: var(--component-segmented-focus-placeholder-color);/* date- field placeholder color */ --component-date-focus-segment-background-color:var(--component-segmented-focus-segment-background-color);/* focus: date field background color (single segment) */ --component-date-focus-segment-shadow: var(--component-segmented-focus-segment-shadow);/* focus: date field box shadow (single segment) */ --component-date-focus-segment-border-size: var(--component-segmented-focus-segment-border-size);/* focus: date field border size (single segment) */ --component-date-focus-segment-border-color: var(--component-segmented-focus-segment-border-color);/* focus: date field border color (single segment) */ --component-date-focus-separator-font-weight: var(--component-segmented-focus-separator-font-weight);/* focus: date field font weight (separators) */ --component-date-focus-separator-font-style: var(--component-segmented-focus-separator-font-style);/* focus: date field font style (separators) */ --component-date-focus-separator-text-color: var(--component-segmented-focus-separator-text-color);/* focus: date field text color (separators) */ --component-date-focus-separator-background-color:var(--component-segmented-focus-separator-background-color);/* focus: date field background color (separators) */ --component-date-focus-separator-shadow: var(--component-segmented-focus-separator-shadow);/* focus: date field box shadow (separators) */ --component-date-focus-separator-border-size: var(--component-segmented-focus-separator-border-size);/* focus: date field border size (separators) */ --component-date-focus-separator-border-color: var(--component-segmented-focus-separator-border-color);/* focus: date field border color (separators) */ --component-date-disabled-font-weight: var(--component-segmented-disabled-font-weight);/* disabled: date field font weight */ --component-date-disabled-font-style: var(--component-segmented-disabled-font-style);/* disabled: date field font style */ --component-date-disabled-text-color: var(--component-segmented-disabled-text-color);/* disabled: date field text color */ --component-date-disabled-background-color: var(--component-segmented-disabled-background-color);/* disabled: date field background color */ --component-date-disabled-shadow: var(--component-segmented-disabled-shadow);/* disabled: date field box shadow */ --component-date-disabled-border-size: var(--component-segmented-disabled-border-size);/* disabled: date field border size */ --component-date-disabled-border-color: var(--component-segmented-disabled-border-color);/* disabled: date field border color */ --component-date-disabled-outline-size: var(--component-segmented-disabled-outline-size);/* disabled: date field outline size */ --component-date-disabled-outline-color: var(--component-segmented-disabled-outline-color);/* disabled: date field outline color */ --component-date-disabled-outline-offset: var(--component-segmented-disabled-outline-offset);/* disabled: date field outline offset */ --component-date-disabled-placeholder-font-weight:var(--component-segmented-disabled-placeholder-font-weight);/* date- field placeholder font-weight */ --component-date-disabled-placeholder-font-size:var(--component-segmented-disabled-placeholder-font-size);/* date- field placeholder font size */ --component-date-disabled-placeholder-color: var(--component-segmented-disabled-placeholder-color);/* date- field placeholder color */ --component-date-disabled-segment-background-color:var(--component-segmented-disabled-segment-background-color);/* disabled: date field background color (single segment) */ --component-date-disabled-segment-shadow: var(--component-segmented-disabled-segment-shadow);/* disabled: date field box shadow (single segment) */ --component-date-disabled-segment-border-size: var(--component-segmented-disabled-segment-border-size);/* disabled: date field border size (single segment) */ --component-date-disabled-segment-border-color: var(--component-segmented-disabled-segment-border-color);/* disabled: date field border color (single segment) */ --component-date-disabled-separator-font-weight:var(--component-segmented-disabled-separator-font-weight);/* disabled: date field font weight (separators) */ --component-date-disabled-separator-font-style: var(--component-segmented-disabled-separator-font-style);/* disabled: date field font style (separators) */ --component-date-disabled-separator-text-color: var(--component-segmented-disabled-separator-text-color);/* disabled: date field text color (separators) */ --component-date-disabled-separator-background-color:var(--component-segmented-disabled-separator-background-color);/* disabled: date field background color (separators) */ --component-date-disabled-separator-shadow: var(--component-segmented-disabled-separator-shadow);/* disabled: date field box shadow (separators) */ --component-date-disabled-separator-border-size:var(--component-segmented-disabled-separator-border-size);/* disabled: date field border size (separators) */ --component-date-disabled-separator-border-color:var(--component-segmented-disabled-separator-border-color);/* disabled: date field border color (separators) */ --component-date-addon-padding: var(--component-segmented-addon-padding);/* date field addon padding */ --component-date-addon-width: var(--component-segmented-addon-width); /* date field addon width */ --component-date-addon-font: var(--component-segmented-addon-font);/* date field addon font family */ --component-date-addon-font-size: var(--component-segmented-addon-font-size);/* date field addon font size */ --component-date-addon-font-weight: var(--component-segmented-addon-font-weight);/* date field addon font weight */ --component-date-addon-font-style: var(--component-segmented-addon-font-style);/* date field addon font style */ --component-date-addon-line-height: var(--component-segmented-addon-line-height);/* date field addon line height */ --component-date-addon-text-color: var(--component-segmented-addon-text-color);/* date field addon text color */ --component-date-addon-background-color: var(--component-segmented-addon-background-color);/* date field addon background color */ --component-date-addon-important-font-weight: var(--component-segmented-addon-important-font-weight);/* important: date field addon font weight */ --component-date-addon-important-font-style: var(--component-segmented-addon-important-font-style);/* important: date field addon font style */ --component-date-addon-important-text-color: var(--component-segmented-addon-important-text-color);/* important: date field addon text color */ --component-date-addon-important-background-color:var(--component-segmented-addon-important-background-color);/* important: date field addon background color */ --component-date-addon-required-font-weight: var(--component-segmented-addon-required-font-weight);/* required: date field addon font weight */ --component-date-addon-required-font-style: var(--component-segmented-addon-required-font-style);/* required: date field addon font style */ --component-date-addon-required-text-color: var(--component-segmented-addon-required-text-color);/* required: date field addon text color */ --component-date-addon-required-background-color:var(--component-segmented-addon-required-background-color);/* required: date field addon background color */ --component-date-addon-empty-font-weight: var(--component-segmented-addon-empty-font-weight);/* empty: date field addon font weight */ --component-date-addon-empty-font-style: var(--component-segmented-addon-empty-font-style);/* empty: date field addon font style */ --component-date-addon-empty-text-color: var(--component-segmented-addon-empty-text-color);/* empty: date field addon text color */ --component-date-addon-empty-background-color: var(--component-segmented-addon-empty-background-color);/* empty: date field addon background color */ --component-date-addon-invalid-font-weight: var(--component-segmented-addon-invalid-font-weight);/* invalid: date field addon font weight */ --component-date-addon-invalid-font-style: var(--component-segmented-addon-invalid-font-style);/* invalid: date field addon font style */ --component-date-addon-invalid-text-color: var(--component-segmented-addon-invalid-text-color);/* invalid: date field addon text color */ --component-date-addon-invalid-background-color:var(--component-segmented-addon-invalid-background-color);/* invalid: date field addon background color */ --component-date-addon-focus-font-weight: var(--component-segmented-addon-focus-font-weight);/* focus: date field addon font weight */ --component-date-addon-focus-font-style: var(--component-segmented-addon-focus-font-style);/* focus: date field addon font style */ --component-date-addon-focus-text-color: var(--component-segmented-addon-focus-text-color);/* focus: date field addon text color */ --component-date-addon-focus-background-color: var(--component-segmented-addon-focus-background-color);/* focus: date field addon background color */ --component-date-addon-disabled-font-weight: var(--component-segmented-addon-disabled-font-weight);/* disabled: date field addon font weight */ --component-date-addon-disabled-font-style: var(--component-segmented-addon-disabled-font-style);/* disabled: date field addon font style */ --component-date-addon-disabled-text-color: var(--component-segmented-addon-disabled-text-color);/* disabled: date field addon text color */ --component-date-addon-disabled-background-color:var(--component-segmented-addon-disabled-background-color);/* disabled: date field addon background color */ --component-date-day-width: 24px; /* date field day/month fields width */ --component-date-year-width: 48px; /* date field year field width */ --component-date-time-width: 24px; /* date field time fields width */ /* checkbox field */ --component-checkbox-item-align: var(--component-item-align);/* checkbox field vertical alignment (align-self) */ --component-checkbox-margin: 0 0 15px 0;/* checkbox field margin */ --component-checkbox-padding: var(--component-padding);/* checkbox field padding */ --component-checkbox-font: var(--component-font);/* checkbox field font family */ --component-checkbox-font-size: var(--component-font-size);/* checkbox field font size */ --component-checkbox-font-weight: var(--component-font-weight);/* checkbox field font weight */ --component-checkbox-font-style: var(--component-font-style);/* checkbox field font style */ --component-checkbox-line-height: 1.3;/* checkbox field line height */ --component-checkbox-text-color: var(--component-text-color);/* checkbox field text color */ --component-checkbox-outline-size: var(--component-outline-size);/* checkbox field outline size */ --component-checkbox-outline-color: var(--component-outline-color);/* checkbox field outline color */ --component-checkbox-outline-offset: var(--component-outline-offset);/* checkbox field outline offset */ --component-checkbox-important-font-weight: var(--component-important-font-weight);/* important: checkbox field font weight */ --component-checkbox-important-font-style: var(--component-important-font-style);/* important: checkbox field font style */ --component-checkbox-important-text-color: var(--component-important-text-color);/* important: checkbox field text color */ --component-checkbox-important-outline-size: var(--component-important-outline-size);/* important: checkbox field outline size */ --component-checkbox-important-outline-color: var(--component-important-outline-color);/* important: checkbox field outline color */ --component-checkbox-important-outline-offset: var(--component-important-outline-offset);/* important: checkbox field outline offset */ --component-checkbox-required-font-weight: var(--component-required-font-weight);/* required: checkbox field font weight */ --component-checkbox-required-font-style: var(--component-required-font-style);/* required: checkbox field font style */ --component-checkbox-required-text-color: var(--component-required-text-color);/* required: checkbox field text color */ --component-checkbox-required-outline-size: var(--component-required-outline-size);/* required: checkbox field outline size */ --component-checkbox-required-outline-color: var(--component-required-outline-color);/* required: checkbox field outline color */ --component-checkbox-required-outline-offset: var(--component-required-outline-offset);/* required: checkbox field outline offset */ --component-checkbox-empty-font-weight: var(--component-empty-font-weight);/* empty: checkbox field font weight */ --component-checkbox-empty-font-style: var(--component-empty-font-style);/* empty: checkbox field font style */ --component-checkbox-empty-text-color: var(--component-empty-text-color);/* empty: checkbox field text color */ --component-checkbox-empty-outline-size: var(--component-empty-outline-size);/* empty: checkbox field outline size */ --component-checkbox-empty-outline-color: var(--component-empty-outline-color);/* empty: checkbox field outline color */ --component-checkbox-empty-outline-offset: var(--component-empty-outline-offset);/* empty: checkbox field outline offset */ --component-checkbox-invalid-font-weight: var(--component-invalid-font-weight);/* invalid: checkbox field font weight */ --component-checkbox-invalid-font-style: var(--component-invalid-font-style);/* invalid: checkbox field font style */ --component-checkbox-invalid-text-color: var(--component-invalid-text-color);/* invalid: checkbox field text color */ --component-checkbox-invalid-outline-size: var(--component-invalid-outline-size);/* invalid: checkbox field outline size */ --component-checkbox-invalid-outline-color: var(--component-invalid-outline-color);/* invalid: checkbox field outline color */ --component-checkbox-invalid-outline-offset: var(--component-invalid-outline-offset);/* invalid: checkbox field outline offset */ --component-checkbox-focus-font-weight: var(--component-focus-font-weight);/* focus: checkbox field font weight */ --component-checkbox-focus-font-style: var(--component-focus-font-style);/* focus: checkbox field font style */ --component-checkbox-focus-text-color: var(--component-focus-text-color);/* focus: checkbox field text color */ --component-checkbox-focus-outline-size: var(--component-focus-outline-size);/* focus: checkbox field outline size */ --component-checkbox-focus-outline-color: var(--component-focus-outline-color);/* focus: checkbox field outline color */ --component-checkbox-focus-outline-offset: var(--component-focus-outline-offset);/* focus: checkbox field outline offset */ --component-checkbox-disabled-font-weight: var(--component-disabled-font-weight);/* disabled: checkbox field font weight */ --component-checkbox-disabled-font-style: var(--component-disabled-font-style);/* disabled: checkbox field font style */ --component-checkbox-disabled-text-color: var(--component-disabled-text-color);/* disabled: checkbox field text color */ --component-checkbox-disabled-outline-size: var(--component-disabled-outline-size);/* disabled: checkbox field outline size */ --component-checkbox-disabled-outline-color: var(--component-disabled-outline-color);/* disabled: checkbox field outline color */ --component-checkbox-disabled-outline-offset: var(--component-disabled-outline-offset);/* disabled: checkbox field outline offset */ --component-checkbox-label-padding: 25px; /* checkbox field label left padding */ --component-checkbox-box-size: 20px; /* checkbox box size */ --component-checkbox-box-border-size: 2px; /* checkbox box border radius */ --component-checkbox-box-border-radius: 4px; /* checkbox box border radius */ --component-checkbox-box-color: #b3b3b3; /* checkbox box color */ --component-checkbox-box-background-color: white; /* checkbox box inner background color */ --component-checkbox-dot-size: 10px; /* checkbox dot size */ --component-checkbox-dot-border-radius: 2px; /* checkbox dot border radius */ --component-checkbox-dot-color: #002d72; /* checkbox dot color */ --component-checkbox-dot-speed: .1s; /* checkbox dot animation speed */ --component-checkbox-box-important-color: var(--component-important-border-color);/* checkbox box important color */ --component-checkbox-box-important-background-color:var(--component-checkbox-box-background-color);/* checkbox box important inner background color */ --component-checkbox-dot-important-color: var(--component-checkbox-dot-color);/* checkbox dot important color */ --component-checkbox-box-required-color: var(--component-checkbox-box-color);/* checkbox box required color */ --component-checkbox-box-required-background-color:var(--component-checkbox-box-background-color);/* checkbox box required inner background color */ --component-checkbox-dot-required-color: var(--component-checkbox-dot-color);/* checkbox dot required color */ --component-checkbox-box-empty-color: var(--component-checkbox-box-color);/* checkbox box empty color */ --component-checkbox-box-empty-background-color:var(--component-checkbox-box-background-color);/* checkbox box empty inner background color */ --component-checkbox-dot-empty-color: var(--component-checkbox-dot-color);/* checkbox dot empty color */ --component-checkbox-box-invalid-color: var(--component-checkbox-box-color);/* checkbox box invalid color */ --component-checkbox-box-invalid-background-color:var(--component-checkbox-box-background-color);/* checkbox box invalid inner background color */ --component-checkbox-dot-invalid-color: var(--component-checkbox-dot-color);/* checkbox dot invalid color */ --component-checkbox-box-focus-color: var(--component-checkbox-box-color);/* checkbox box focus color */ --component-checkbox-box-focus-background-color:var(--component-checkbox-box-background-color);/* checkbox box focus inner background color */ --component-checkbox-dot-focus-color: var(--component-checkbox-dot-color);/* checkbox dot focus color */ --component-checkbox-box-disabled-color: #dddddd; /* checkbox box disabled color */ --component-checkbox-box-disabled-background-color:white; /* checkbox box disabled inner background color */ --component-checkbox-dot-disabled-color: #dddddd; /* checkbox dot disabled color */ /* radio field */ --component-radio-item-align: var(--component-item-align);/* radio field vertical alignment (align-self) */ --component-radio-margin: 0 0 15px 0; /* radio field margin */ --component-radio-option-margin: 4px; /* radio field option top/bottom margin */ --component-radio-padding: var(--component-padding);/* radio field padding */ --component-radio-font: var(--component-font);/* radio field font family */ --component-radio-font-size: var(--component-font-size);/* radio field font size */ --component-radio-font-weight: var(--component-font-weight);/* radio field font weight */ --component-radio-font-style: var(--component-font-style);/* radio field font style */ --component-radio-line-height: 1.3;/* radio field line height */ --component-radio-text-color: var(--component-text-color);/* radio field text color */ --component-radio-outline-size: var(--component-outline-size);/* radio field outline size */ --component-radio-outline-color: var(--component-outline-color);/* radio field outline color */ --component-radio-outline-offset: var(--component-outline-offset);/* radio field outline offset */ --component-radio-important-font-weight: var(--component-important-font-weight);/* important: radio field font weight */ --component-radio-important-font-style: var(--component-important-font-style);/* important: radio field font style */ --component-radio-important-text-color: var(--component-important-text-color);/* important: radio field text color */ --component-radio-important-outline-size: var(--component-important-outline-size);/* important: radio field outline size */ --component-radio-important-outline-color: var(--component-important-outline-color);/* important: radio field outline color */ --component-radio-important-outline-offset: var(--component-important-outline-offset);/* important: radio field outline offset */ --component-radio-required-font-weight: var(--component-required-font-weight);/* required: radio field font weight */ --component-radio-required-font-style: var(--component-required-font-style);/* required: radio field font style */ --component-radio-required-text-color: var(--component-required-text-color);/* required: radio field text color */ --component-radio-required-outline-size: var(--component-required-outline-size);/* required: radio field outline size */ --component-radio-required-outline-color: var(--component-required-outline-color);/* required: radio field outline color */ --component-radio-required-outline-offset: var(--component-required-outline-offset);/* required: radio field outline offset */ --component-radio-empty-font-weight: var(--component-empty-font-weight);/* empty: radio field font weight */ --component-radio-empty-font-style: var(--component-empty-font-style);/* empty: radio field font style */ --component-radio-empty-text-color: var(--component-empty-text-color);/* empty: radio field text color */ --component-radio-empty-outline-size: var(--component-empty-outline-size);/* empty: radio field outline size */ --component-radio-empty-outline-color: var(--component-empty-outline-color);/* empty: radio field outline color */ --component-radio-empty-outline-offset: var(--component-empty-outline-offset);/* empty: radio field outline offset */ --component-radio-invalid-font-weight: var(--component-invalid-font-weight);/* invalid: radio field font weight */ --component-radio-invalid-font-style: var(--component-invalid-font-style);/* invalid: radio field font style */ --component-radio-invalid-text-color: var(--component-invalid-text-color);/* invalid: radio field text color */ --component-radio-invalid-outline-size: var(--component-invalid-outline-size);/* invalid: radio field outline size */ --component-radio-invalid-outline-color: var(--component-invalid-outline-color);/* invalid: radio field outline color */ --component-radio-invalid-outline-offset: var(--component-invalid-outline-offset);/* invalid: radio field outline offset */ --component-radio-focus-font-weight: var(--component-focus-font-weight);/* focus: radio field font weight */ --component-radio-focus-font-style: var(--component-focus-font-style);/* focus: radio field font style */ --component-radio-focus-text-color: var(--component-focus-text-color);/* focus: radio field text color */ --component-radio-focus-outline-size: var(--component-focus-outline-size);/* focus: radio field outline size */ --component-radio-focus-outline-color: var(--component-focus-outline-color);/* focus: radio field outline color */ --component-radio-focus-outline-offset: var(--component-focus-outline-offset);/* focus: radio field outline offset */ --component-radio-disabled-font-weight: var(--component-disabled-font-weight);/* disabled: radio field font weight */ --component-radio-disabled-font-style: var(--component-disabled-font-style);/* disabled: radio field font style */ --component-radio-disabled-text-color: var(--component-disabled-text-color);/* disabled: radio field text color */ --component-radio-disabled-outline-size: var(--component-disabled-outline-size);/* disabled: radio field outline size */ --component-radio-disabled-outline-color: var(--component-disabled-outline-color);/* disabled: radio field outline color */ --component-radio-disabled-outline-offset: var(--component-disabled-outline-offset);/* disabled: radio field outline offset */ --component-radio-label-padding: 25px; /* radio field label left padding */ --component-radio-box-size: 20px; /* radio box size */ --component-radio-box-border-size: 2px; /* radio box border radius */ --component-radio-box-border-radius: 10px; /* radio box border radius */ --component-radio-box-color: #b3b3b3; /* radio box color */ --component-radio-box-background-color: white; /* radio box inner background color */ --component-radio-dot-size: 10px; /* radio dot size */ --component-radio-dot-border-radius: 5px; /* radio dot border radius */ --component-radio-dot-color: #002d72; /* radio dot color */ --component-radio-dot-speed: .1s; /* radio dot animation speed */ --component-radio-option-direction: row; /* radio option direction (row / column) */ --component-radio-option-gap: 25px; /* radio option distance */ --component-radio-box-important-color: var(--component-important-border-color);/* radio box important color */ --component-radio-box-important-background-color:var(--component-radio-box-background-color);/* radio box important inner background color */ --component-radio-dot-important-color: var(--component-radio-dot-color);/* radio dot important color */ --component-radio-box-required-color: var(--component-radio-box-color);/* radio box required color */ --component-radio-box-required-background-color:var(--component-radio-box-background-color);/* radio box required inner background color */ --component-radio-dot-required-color: var(--component-radio-dot-color);/* radio dot required color */ --component-radio-box-empty-color: var(--component-radio-box-color);/* radio box empty color */ --component-radio-box-empty-background-color: var(--component-radio-box-background-color);/* radio box empty inner background color */ --component-radio-dot-empty-color: var(--component-radio-dot-color);/* radio dot empty color */ --component-radio-box-invalid-color: var(--component-radio-box-color);/* radio box invalid color */ --component-radio-box-invalid-background-color: var(--component-radio-box-background-color);/* radio box invalid inner background color */ --component-radio-dot-invalid-color: var(--component-radio-dot-color);/* radio dot invalid color */ --component-radio-box-focus-color: var(--component-radio-box-color);/* radio box focus color */ --component-radio-box-focus-background-color: var(--component-radio-box-background-color);/* radio box focus inner background color */ --component-radio-dot-focus-color: var(--component-radio-dot-color);/* radio dot focus color */ --component-radio-box-disabled-color: #dddddd; /* radio box disabled color */ --component-radio-box-disabled-background-color:white; /* radio box disabled inner background color */ --component-radio-dot-disabled-color: #dddddd; /* radio dot disabled color */ /* button */ --component-button-item-align: var(--component-item-align);/* button field vertical alignment (align-self) */ --component-button-margin: var(--component-margin);/* button field margin */ --component-button-padding: var(--component-padding);/* button padding */ --component-button-font: var(--component-font);/* button font family */ --component-button-font-size: var(--component-font-size);/* button font size */ --component-button-font-weight: var(--component-font-weight);/* button font weight */ --component-button-font-style: var(--component-font-style);/* button font style */ --component-button-line-height: var(--component-line-height);/* button line height */ --component-button-text-color: white; /* button text color */ --component-button-background-color: #002d72; /* button background color */ --component-button-shadow: var(--component-shadow);/* button box shadow */ --component-button-border-radius: var(--component-border-radius);/* button border radius */ --component-button-border-size: var(--component-border-size);/* button border size */ --component-button-border-color: var(--component-border-color);/* button border color */ --component-button-outline-size: var(--component-outline-size);/* button outline size */ --component-button-outline-color: var(--component-outline-color);/* button outline color */ --component-button-outline-offset: var(--component-outline-offset);/* button outline offset */ --component-button-disabled-font-weight: var(--component-disabled-font-weight);/* disabled: button font weight */ --component-button-disabled-font-style: var(--component-disabled-font-style);/* disabled: button font style */ --component-button-disabled-text-color: var(--component-disabled-text-color);/* disabled: button text color */ --component-button-disabled-background-color: var(--component-disabled-background-color);/* disabled: button background color */ --component-button-disabled-shadow: var(--component-disabled-shadow);/* disabled: button box shadow */ --component-button-disabled-border-size: var(--component-button-border-size);/* disabled: button border size */ --component-button-disabled-border-color: var(--component-disabled-border-color);/* disabled: button border color */ --component-button-disabled-outline-size: var(--component-button-outline-size);/* disabled: button outline size */ --component-button-disabled-outline-color: var(--component-disabled-outline-color);/* disabled: button outline color */ --component-button-disabled-outline-offset: var(--component-disabled-outline-offset);/* disabled: button outline offset */ --component-button-focus-font-weight: var(--component-focus-font-weight);/* focus: button font weight */ --component-button-focus-font-style: var(--component-focus-font-style);/* focus: button font style */ --component-button-focus-text-color: white; /* focus: button text color */ --component-button-focus-background-color: #002d72; /* focus: button background color */ --component-button-focus-shadow: none; /* focus: button box shadow */ --component-button-focus-border-size: var(--component-button-border-size);/* focus: button border size */ --component-button-focus-border-color: var(--component-focus-border-color);/* focus: button border color */ --component-button-focus-outline-size: var(--component-button-outline-size);/* focus: button outline size */ --component-button-focus-outline-color: var(--component-focus-outline-color);/* focus: button outline color */ --component-button-focus-outline-offset: var(--component-focus-outline-offset);/* focus: button outline offset */ --component-button-hover-font-weight: var(--component-font-weight);/* hover: button font weight */ --component-button-hover-font-style: var(--component-font-style);/* hover: button font style */ --component-button-hover-text-color: white; /* hover: button text color */ --component-button-hover-background-color: #2c84ca; /* hover: button background color */ --component-button-hover-shadow: var(--component-button-shadow);/* hover: button box shadow */ --component-button-hover-border-size: var(--component-button-border-size);/* hover: button border size */ --component-button-hover-border-size: var(--component-button-border-size);/* hover: button border size */ --component-button-hover-border-color: var(--component-border-color);/* hover: button border color */ --component-button-hover-outline-size: var(--component-button-outline-size);/* hover: button outline size */ --component-button-hover-outline-color: var(--component-outline-color);/* hover: button outline color */ --component-button-hover-outline-offset: var(--component-outline-offset);/* hover: button outline offset */ --component-button-active-font-weight: var(--component-font-weight);/* active: button font weight */ --component-button-active-font-style: var(--component-font-style);/* active: button font style */ --component-button-active-text-color: white; /* active: button text color */ --component-button-active-background-color: #2c84ca; /* active: button background color */ --component-button-active-shadow: var(--component-button-shadow);/* active: button box shadow */ --component-button-focus-border-size: var(--component-button-border-size);/* focus: button border size */ --component-button-active-border-size: var(--component-button-border-size);/* active: button border size */ --component-button-active-border-color: var(--component-border-color);/* active: button border color */ --component-button-active-outline-size: var(--component-button-outline-size);/* active: button outline size */ --component-button-active-outline-color: var(--component-outline-color);/* active: button outline color */ --component-button-active-outline-offset: var(--component-outline-offset);/* active: button outline offset */ --component-button-active-offset-x: 0; /* active: button offset x */ --component-button-active-offset-y: 1px; /* active: button offset y */ /* primary button */ --component-button-primary-padding: var(--component-button-padding);/* primary button padding */ --component-button-primary-font: var(--component-button-font);/* primary button font family */ --component-button-primary-font-size: var(--component-button-font-size);/* primary button font size */ --component-button-primary-font-weight: var(--component-button-font-weight);/* primary button font weight */ --component-button-primary-font-style: var(--component-button-font-style);/* primary button font style */ --component-button-primary-line-height: var(--component-button-line-height);/* primary button line height */ --component-button-primary-text-color: white; /* primary button text color */ --component-button-primary-background-color: #002d72;/* primary button background color */ --component-button-primary-shadow: var(--component-button-shadow);/* primary button box shadow */ --component-button-primary-border-radius: var(--component-button-border-radius);/* primary button border radius */ --component-button-primary-border-size: var(--component-button-border-size);/* primary button border size */ --component-button-primary-border-color: var(--component-button-border-color);/* primary button border color */ --component-button-primary-outline-size: var(--component-button-outline-size);/* primary button outline size */ --component-button-primary-outline-color: var(--component-button-outline-color);/* primary button outline color */ --component-button-primary-outline-offset: var(--component-button-outline-offset);/* primary button outline offset */ --component-button-primary-disabled-font-weight: var(--component-button-disabled-font-weight);/* disabled: primary button font weight */ --component-button-primary-disabled-font-style: var(--component-button-disabled-font-style);/* disabled: primary button font style */ --component-button-primary-disabled-text-color: var(--component-button-disabled-text-color);/* disabled: primary button text color */ --component-button-primary-disabled-background-color: var(--component-button-disabled-background-color);/* disabled: primary button background color */ --component-button-primary-disabled-shadow: var(--component-button-disabled-shadow);/* disabled: primary button box shadow */ --component-button-primary-disabled-border-size: var(--component-button-disabled-border-size);/* disabled: primary button border size */ --component-button-primary-disabled-border-color: var(--component-button-disabled-border-color);/* disabled: primary button border color */ --component-button-primary-disabled-outline-size: var(--component-button-disabled-outline-size);/* disabled: primary button outline size */ --component-button-primary-disabled-outline-color: var(--component-button-disabled-outline-color);/* disabled: primary button outline color */ --component-button-primary-disabled-outline-offset: var(--component-button-disabled-outline-offset);/* disabled: primary button outline offset */ --component-button-primary-focus-font-weight: var(--component-button-focus-font-weight);/* focus: primary button font weight */ --component-button-primary-focus-font-style: var(--component-button-focus-font-style);/* focus: primary button font style */ --component-button-primary-focus-text-color: var(--component-button-focus-text-color);/* focus: primary button text color */ --component-button-primary-focus-background-color: var(--component-button-focus-background-color);/* focus: primary button background color */ --component-button-primary-focus-shadow: var(--component-button-focus-shadow);/* focus: primary button box shadow */ --component-button-primary-focus-border-size: var(--component-button-focus-border-size);/* focus: primary button border size */ --component-button-primary-focus-border-color: var(--component-button-focus-border-color);/* focus: primary button border color */ --component-button-primary-focus-outline-size: var(--component-button-focus-outline-size);/* focus: primary button outline size */ --component-button-primary-focus-outline-color: var(--component-button-focus-outline-color);/* focus: primary button outline color */ --component-button-primary-focus-outline-offset: var(--component-button-focus-outline-offset);/* focus: primary button outline offset */ --component-button-primary-hover-font-weight: var(--component-button-hover-font-weight);/* hover: primary button font weight */ --component-button-primary-hover-font-style: var(--component-button-hover-font-style);/* hover: primary button font style */ --component-button-primary-hover-text-color: var(--component-button-hover-text-color);/* hover: primary button text color */ --component-button-primary-hover-background-color: var(--component-button-hover-background-color);/* hover: primary button background color */ --component-button-primary-hover-shadow: var(--component-button-hover-shadow);/* hover: primary button box shadow */ --component-button-primary-hover-border-size: var(--component-button-hover-border-size);/* hover: primary button border size */ --component-button-primary-hover-border-color: var(--component-button-hover-border-color);/* hover: primary button border color */ --component-button-primary-hover-outline-size: var(--component-button-hover-outline-size);/* hover: primary button outline size */ --component-button-primary-hover-outline-color: var(--component-button-hover-outline-color);/* hover: primary button outline color */ --component-button-primary-hover-outline-offset: var(--component-button-hover-outline-offset);/* hover: primary button outline offset */ --component-button-primary-active-font-weight: var(--component-button-active-font-weight);/* active: primary button font weight */ --component-button-primary-active-font-style: var(--component-button-active-font-style);/* active: primary button font style */ --component-button-primary-active-text-color: var(--component-button-active-text-color);/* active: primary button text color */ --component-button-primary-active-background-color: var(--component-button-active-background-color);/* active: primary button background color */ --component-button-primary-active-shadow: var(--component-button-active-shadow);/* active: primary button box shadow */ --component-button-primary-active-border-size: var(--component-button-active-border-size);/* active: primary button border size */ --component-button-primary-active-border-color: var(--component-button-active-border-color);/* active: primary button border color */ --component-button-primary-active-outline-size: var(--component-button-active-outline-size);/* active: primary button outline size */ --component-button-primary-active-outline-color: var(--component-button-active-outline-color);/* active: primary button outline color */ --component-button-primary-active-outline-offset: var(--component-button-active-outline-offset);/* active: primary button outline offset */ --component-button-primary-active-offset-x: var(--component-button-active-offset-x);/* active: primary button offset x */ --component-button-primary-active-offset-y: var(--component-button-active-offset-y);/* active: primary button offset y */ /* sub button */ --component-button-sub-padding: var(--component-button-padding);/* sub button padding */ --component-button-sub-font: var(--component-button-font);/* sub button font family */ --component-button-sub-font-size: var(--component-button-font-size);/* sub button font size */ --component-button-sub-font-weight: var(--component-button-font-weight);/* sub button font weight */ --component-button-sub-font-style: var(--component-button-font-style);/* sub button font style */ --component-button-sub-line-height: var(--component-button-line-height);/* sub button line height */ --component-button-sub-text-color: black; /* sub button text color */ --component-button-sub-background-color: #eeeeee; /* sub button background color */ --component-button-sub-shadow: var(--component-button-shadow);/* sub button box shadow */ --component-button-sub-border-radius: var(--component-button-border-radius);/* sub button border radius */ --component-button-sub-border-size: var(--component-button-border-size);/* sub button border size */ --component-button-sub-border-color: var(--component-button-border-color);/* sub button border color */ --component-button-sub-outline-size: var(--component-button-outline-size);/* sub button outline size */ --component-button-sub-outline-color: var(--component-button-outline-color);/* sub button outline color */ --component-button-sub-outline-offset: var(--component-button-outline-offset);/* sub button outline offset */ --component-button-sub-disabled-font-weight: var(--component-button-disabled-font-weight);/* disabled: sub button font weight */ --component-button-sub-disabled-font-style: var(--component-button-disabled-font-style);/* disabled: sub button font style */ --component-button-sub-disabled-text-color: var(--component-button-disabled-text-color);/* disabled: sub button text color */ --component-button-sub-disabled-background-color: var(--component-button-disabled-background-color); /* disabled: sub button background color */ --component-button-sub-disabled-shadow: var(--component-button-disabled-shadow);/* disabled: sub button box shadow */ --component-button-sub-disabled-border-size: var(--component-button-disabled-border-size);/* disabled: sub button border size */ --component-button-sub-disabled-border-color: var(--component-button-disabled-border-color);/* disabled: sub button border color */ --component-button-sub-disabled-outline-size: var(--component-button-disabled-outline-size);/* disabled: sub button outline size */ --component-button-sub-disabled-outline-color: var(--component-button-disabled-outline-color);/* disabled: sub button outline color */ --component-button-sub-disabled-outline-offset: var(--component-button-disabled-outline-offset);/* disabled: sub button outline offset */ --component-button-sub-focus-font-weight: var(--component-button-focus-font-weight);/* focus: sub button font weight */ --component-button-sub-focus-font-style: var(--component-button-focus-font-style);/* focus: sub button font style */ --component-button-sub-focus-text-color: var(--component-button-sub-text-color);/* focus: sub button text color */ --component-button-sub-focus-background-color: var(--component-button-sub-background-color);/* focus: sub button background color */ --component-button-sub-focus-shadow: var(--component-button-focus-shadow);/* focus: sub button box shadow */ --component-button-sub-focus-border-size: var(--component-button-focus-border-size);/* focus: sub button border size */ --component-button-sub-focus-border-color: var(--component-button-focus-border-color);/* focus: sub button border color */ --component-button-sub-focus-outline-size: var(--component-button-focus-outline-size);/* focus: sub button outline size */ --component-button-sub-focus-outline-color: var(--component-button-focus-outline-color);/* focus: sub button outline color */ --component-button-sub-focus-outline-offset: var(--component-button-focus-outline-offset);/* focus: sub button outline offset */ --component-button-sub-hover-font-weight: var(--component-button-hover-font-weight);/* hover: sub button font weight */ --component-button-sub-hover-font-style: var(--component-button-hover-font-style);/* hover: sub button font style */ --component-button-sub-hover-text-color: black;/* hover: sub button text color */ --component-button-sub-hover-background-color: #fefefe;/* hover: sub button background color */ --component-button-sub-hover-shadow: var(--component-button-hover-shadow);/* hover: sub button box shadow */ --component-button-sub-hover-border-size: var(--component-button-hover-border-size);/* hover: sub button border size */ --component-button-sub-hover-border-color: var(--component-button-hover-border-color);/* hover: sub button border color */ --component-button-sub-hover-outline-size: var(--component-button-hover-outline-size);/* hover: sub button outline size */ --component-button-sub-hover-outline-color: var(--component-button-hover-outline-color);/* hover: sub button outline color */ --component-button-sub-hover-outline-offset: var(--component-button-hover-outline-offset);/* hover: sub button outline offset */ --component-button-sub-active-font-weight: var(--component-button-active-font-weight);/* active: sub button font weight */ --component-button-sub-active-font-style: var(--component-button-active-font-style);/* active: sub button font style */ --component-button-sub-active-text-color: var(--component-button-sub-hover-text-color);/* active: sub button text color */ --component-button-sub-active-background-color: var(--component-button-sub-hover-background-color);/* active: sub button background color */ --component-button-sub-active-shadow: var(--component-button-active-shadow);/* active: sub button box shadow */ --component-button-sub-active-border-size: var(--component-button-active-border-size);/* active: sub button border size */ --component-button-sub-active-border-color: var(--component-button-active-border-color);/* active: sub button border color */ --component-button-sub-active-outline-size: var(--component-button-active-outline-size);/* active: sub button outline size */ --component-button-sub-active-outline-color: var(--component-button-active-outline-color);/* active: sub button outline color */ --component-button-sub-active-outline-offset: var(--component-button-active-outline-offset);/* active: sub button outline offset */ --component-button-sub-active-offset-x: var(--component-button-active-offset-x);/* active: sub button offset x */ --component-button-sub-active-offset-y: var(--component-button-active-offset-y);/* active: sub button offset y */ /* icon button */ --component-button-icon-item-align: var(--component-button-item-align);/* input field vertical alignment (align-self) */ --component-button-icon-img-padding: 0 0 0 0; /* icon button image padding (icon top) */ --component-button-icon-left-img-padding: 0 0 0 0; /* icon button image padding (icon left) */ --component-button-icon-text-padding: 4px 0 0 0; /* icon button text padding (icon top) */ --component-button-icon-left-text-padding: 0 0 0 0; /* icon button text padding (icon left) */ --component-button-icon-padding: 8px 13px 8px 13px;/* icon button padding */ --component-button-icon-only-padding: 13px 13px 13px 13px;/* icon button padding (no text) */ --component-button-icon-font: var(--component-button-font);/* icon button font family */ --component-button-icon-font-size: 16px; /* icon button icon font size */ --component-button-icon-font-weight: var(--component-button-font-weight);/* icon button font weight */ --component-button-icon-font-style: var(--component-button-font-style);/* icon button font style */ --component-button-icon-color: var(--component-button-text-color);/* icon button icon color */ --component-button-icon-text-font-size: 8px; /* icon button text font size */ --component-button-icon-text-font-weight: var(--component-button-font-weight);/* icon button text font weight */ --component-button-icon-text-font-style: var(--component-button-font-style);/* icon button text font style */ --component-button-icon-text-text-color: var(--component-button-text-color);/* icon button text color */ --component-button-icon-line-height: var(--component-button-line-height);/* icon button line height */ --component-button-icon-background-color: var(--component-button-background-color);/* icon button background color */ --component-button-icon-shadow: var(--component-button-shadow);/* icon button box shadow */ --component-button-icon-border-radius: var(--component-button-border-radius);/* icon button border radius */ --component-button-icon-border-size: var(--component-button-border-size);/* icon button border size */ --component-button-icon-border-color: var(--component-button-border-color);/* icon button border color */ --component-button-icon-outline-size: var(--component-button-outline-size);/* icon button outline size */ --component-button-icon-outline-color: var(--component-button-outline-color);/* icon button outline color */ --component-button-icon-outline-offset: var(--component-button-outline-offset);/* icon button outline offset */ --component-button-icon-disabled-font-weight: var(--component-button-disabled-font-weight);/* disabled: icon button font weight */ --component-button-icon-disabled-font-style: var(--component-button-disabled-font-style);/* disabled: icon button font style */ --component-button-icon-disabled-color: var(--component-button-disabled-text-color);/* disabled: icon button icon color */ --component-button-icon-disabled-text-font-weight: var(--component-button-disabled-font-weight);/* disabled: icon button text font weight */ --component-button-icon-disabled-text-font-style: var(--component-button-disabled-font-style);/* disabled: icon button text font style */ --component-button-icon-disabled-text-color: var(--component-button-disabled-text-color);/* disabled: icon button text color */ --component-button-icon-disabled-background-color:var(--component-button-disabled-background-color);/* disabled: icon button background color */ --component-button-icon-disabled-shadow: var(--component-button-disabled-shadow);/* disabled: icon button box shadow */ --component-button-icon-disabled-border-size: var(--component-button-disabled-border-size);/* disabled: icon button border size */ --component-button-icon-disabled-border-color: var(--component-button-disabled-border-color);/* disabled: icon button border color */ --component-button-icon-disabled-outline-size: var(--component-button-disabled-outline-size);/* disabled: icon button outline size */ --component-button-icon-disabled-outline-color: var(--component-button-disabled-outline-color);/* disabled: icon button outline color */ --component-button-icon-disabled-outline-offset:var(--component-button-disabled-outline-offset);/* disabled: icon button outline offset */ --component-button-icon-focus-font-weight: var(--component-button-focus-font-weight);/* focus: icon button font weight */ --component-button-icon-focus-font-style: var(--component-button-focus-font-style);/* focus: icon button font style */ --component-button-icon-focus-color: var(--component-button-focus-text-color);/* focus: icon button icon color */ --component-button-icon-focus-text-font-weight: var(--component-button-focus-font-weight);/* focus: icon button text font weight */ --component-button-icon-focus-text-font-style: var(--component-button-focus-font-style);/* focus: icon button text font style */ --component-button-icon-focus-text-color: var(--component-button-focus-text-color);/* focus: icon button text color */ --component-button-icon-focus-background-color: var(--component-button-focus-background-color);/* focus: icon button background color */ --component-button-icon-focus-shadow: var(--component-button-focus-shadow);/* focus: icon button box shadow */ --component-button-icon-focus-border-size: var(--component-button-focus-border-size);/* focus: icon button border size */ --component-button-icon-focus-border-color: var(--component-button-focus-border-color);/* focus: icon button border color */ --component-button-icon-focus-outline-size: var(--component-button-focus-outline-size);/* focus: icon button outline size */ --component-button-icon-focus-outline-color: var(--component-button-focus-outline-color);/* focus: icon button outline color */ --component-button-icon-focus-outline-offset: var(--component-button-focus-outline-offset);/* focus: icon button outline offset */ --component-button-icon-hover-font-weight: var(--component-button-hover-font-weight);/* hover: icon button font weight */ --component-button-icon-hover-font-style: var(--component-button-hover-font-style);/* hover: icon button font style */ --component-button-icon-hover-color: var(--component-button-hover-text-color);/* hover: icon button text color */ --component-button-icon-hover-text-font-weight: var(--component-button-hover-font-weight);/* hover: icon button text font weight */ --component-button-icon-hover-text-font-style: var(--component-button-hover-font-style);/* hover: icon button text font style */ --component-button-icon-hover-text-color: var(--component-button-hover-text-color);/* hover: icon button text color */ --component-button-icon-hover-background-color: var(--component-button-hover-background-color);/* hover: icon button background color */ --component-button-icon-hover-shadow: var(--component-button-hover-shadow);/* hover: icon button box shadow */ --component-button-icon-hover-border-size: var(--component-button-hover-border-size);/* hover: icon button border size */ --component-button-icon-hover-border-color: var(--component-button-hover-border-color);/* hover: icon button border color */ --component-button-icon-hover-outline-size: var(--component-button-hover-outline-size);/* hover: icon button outline size */ --component-button-icon-hover-outline-color: var(--component-button-hover-outline-color);/* hover: icon button outline color */ --component-button-icon-hover-outline-offset: var(--component-button-hover-outline-offset);/* hover: icon button outline offset */ --component-button-icon-active-font-weight: var(--component-button-active-font-weight);/* active: icon button font weight */ --component-button-icon-active-font-style: var(--component-button-active-font-style);/* active: icon button font style */ --component-button-icon-active-color: var(--component-button-active-text-color);/* active: icon button icon color */ --component-button-icon-active-text-font-weight: var(--component-button-active-font-weight);/* active: icon button text font weight */ --component-button-icon-active-text-font-style: var(--component-button-active-font-style);/* active: icon button text font style */ --component-button-icon-active-text-color: var(--component-button-active-text-color);/* active: icon button text color */ --component-button-icon-active-background-color: var(--component-button-active-background-color);/* active: icon button background color */ --component-button-icon-active-shadow: var(--component-button-active-shadow);/* active: icon button box shadow */ --component-button-icon-active-border-size: var(--component-button-active-border-size);/* active: icon button border size */ --component-button-icon-active-border-color: var(--component-button-active-border-color);/* active: icon button border color */ --component-button-icon-active-outline-size: var(--component-button-active-outline-size);/* active: icon button outline size */ --component-button-icon-active-outline-color: var(--component-button-active-outline-color);/* active: icon button outline color */ --component-button-icon-active-outline-offset: var(--component-button-active-outline-offset);/* active: icon button outline offset */ --component-button-icon-active-offset-x: var(--component-button-active-offset-x);/* active: icon button offset x */ --component-button-icon-active-offset-y: var(--component-button-active-offset-y);/* active: icon button offset y */ --component-button-context-width: 90px; /* context icon button width */ --component-button-context-height: 90px; /* context icon button height */ --component-button-context-img-padding: var(--component-button-icon-img-padding); /* context icon button image padding (icon top) */ --component-button-context-left-img-padding: var(--component-button-icon-left-img-padding); /* context icon button image padding (icon left) */ --component-button-context-text-padding: 10px 0 0 0; /* context icon button text padding (icon top) */ --component-button-context-left-text-padding: var(--component-button-icon-left-text-padding); /* context icon button text padding (icon left) */ --component-button-context-padding: 13px 13px 13px 13px;/* context icon button padding */ --component-button-context-font-size: 24px; /* context icon button icon font size */ --component-button-context-text-font-size: 14px; /* context icon button text font size */ --component-button-function-width: 120px; /* function icon button width */ --component-button-function-height: 120px; /* function icon button height */ --component-button-function-img-padding: var(--component-button-context-img-padding); /* function icon button image padding (icon top) */ --component-button-function-left-img-padding: var(--component-button-context-left-img-padding);/* function icon button image padding (icon left) */ --component-button-function-text-padding: var(--component-button-context-text-padding); /* function icon button text padding (icon top) */ --component-button-function-left-text-padding: var(--component-button-context-left-text-padding);/* function icon button text padding (icon left) */ --component-button-function-padding: var(--component-button-context-padding); /* function icon button padding */ --component-button-function-font-size: 45px; /* function icon button icon font size */ --component-button-function-text-font-size: var(--component-button-context-text-font-size); /* function icon button text font size */ /* toolbar button */ --component-button-toolbar-margin: 0 0 0 0; /* toolbar icon button width */ --component-button-toolbar-width: 40px; /* toolbar icon button width */ --component-button-toolbar-height: 40px; /* toolbar icon button height */ --component-button-toolbar-item-align: var(--component-button-icon-item-align);/* input field vertical alignment (align-self) */ --component-button-toolbar-img-padding: var(--component-button-icon-img-padding); /* toolbar icon button image padding (icon top) */ --component-button-toolbar-left-img-padding: var(--component-button-icon-left-img-padding);/* toolbar icon button image padding (icon left) */ --component-button-toolbar-text-padding: var(--component-button-icon-text-padding); /* toolbar icon button text padding (icon top) */ --component-button-toolbar-left-text-padding: var(--component-button-icon-left-text-padding);/* toolbar icon button text padding (icon left) */ --component-button-toolbar-padding: var(--component-button-icon-padding);/* toolbar button padding */ --component-button-toolbar-only-padding: var(--component-button-icon-only-padding);/* icon button padding (no text) */ --component-button-toolbar-font: var(--component-button-font);/* toolbar button font family */ --component-button-toolbar-font-size: 14px; /* toolbar button font size */ --component-button-toolbar-font-weight: var(--component-button-font-weight);/* toolbar button font weight */ --component-button-toolbar-font-style: var(--component-button-font-style);/* toolbar button font style */ --component-button-toolbar-line-height: var(--component-button-line-height);/* toolbar button line height */ --component-button-toolbar-color: black;/* toolbar button icon color */ --component-button-toolbar-text-font-size: 6px; /* toolbar icon button text font size */ --component-button-toolbar-text-font-weight: var(--component-button-icon-text-font-weight);/* toolbar button text font weight */ --component-button-toolbar-text-font-style: var(--component-button-icon-text-font-style);/* toolbar button text font style */ --component-button-toolbar-text-color: black;/* toolbar button text color */ --component-button-toolbar-background-color: #eeeeee; /* toolbar button background color */ --component-button-toolbar-shadow: var(--component-button-shadow);/* toolbar button box shadow */ --component-button-toolbar-border-radius: var(--component-button-border-radius);/* toolbar button border radius */ --component-button-toolbar-border-size: var(--component-button-border-size);/* toolbar button border size */ --component-button-toolbar-border-color: var(--component-button-border-color);/* toolbar button border color */ --component-button-toolbar-outline-size: var(--component-button-outline-size);/* toolbar button outline size */ --component-button-toolbar-outline-color: var(--component-button-outline-color);/* toolbar button outline color */ --component-button-toolbar-outline-offset: var(--component-button-outline-offset);/* toolbar button outline offset */ --component-button-toolbar-disabled-font-weight: var(--component-button-disabled-font-weight);/* disabled: toolbar button font weight */ --component-button-toolbar-disabled-font-style: var(--component-button-disabled-font-style);/* disabled: toolbar button font style */ --component-button-toolbar-disabled-color: var(--component-button-icon-disabled-color);/* disabled: toolbar button icon color */ --component-button-toolbar-disabled-text-font-weight: var(--component-button-icon-disabled-text-font-weight);/* disabled: toolbar button text font weight */ --component-button-toolbar-disabled-text-font-style: var(--component-button-icon-disabled-text-font-style);/* disabled: toolbar button text font style */ --component-button-toolbar-disabled-text-color: var(--component-button-disabled-text-color);/* disabled: toolbar button text color */ --component-button-toolbar-disabled-background-color: var(--component-button-disabled-background-color); /* disabled: toolbar button background color */ --component-button-toolbar-disabled-shadow: var(--component-button-disabled-shadow);/* disabled: toolbar button box shadow */ --component-button-toolbar-disabled-border-size: var(--component-button-disabled-border-size);/* disabled: toolbar button border size */ --component-button-toolbar-disabled-border-color: var(--component-button-disabled-border-color);/* disabled: toolbar button border color */ --component-button-toolbar-disabled-outline-size: var(--component-button-disabled-outline-size);/* disabled: toolbar button outline size */ --component-button-toolbar-disabled-outline-color: var(--component-button-disabled-outline-color);/* disabled: toolbar button outline color */ --component-button-toolbar-disabled-outline-offset: var(--component-button-disabled-outline-offset);/* disabled: toolbar button outline offset */ --component-button-toolbar-focus-font-weight: var(--component-button-focus-font-weight);/* focus: toolbar button font weight */ --component-button-toolbar-focus-font-style: var(--component-button-focus-font-style);/* focus: toolbar button font style */ --component-button-toolbar-focus-color: var(--component-button-toolbar-active-color);/* focus: toolbar button icon color */ --component-button-toolbar-focus-text-font-weight: var(--component-button-toolbar-active-text-font-weight);/* focus: toolbar button text font weight */ --component-button-toolbar-focus-text-font-style: var(--component-button-toolbar-active-text-font-style);/* focus: toolbar button text font style */ --component-button-toolbar-focus-text-color: var(--component-button-toolbar-active-text-color);/* focus: toolbar button text color */ --component-button-toolbar-focus-background-color: var(--component-button-toolbar-active-background-color);/* focus: toolbar button background color */ --component-button-toolbar-focus-shadow: var(--component-button-focus-shadow);/* focus: toolbar button box shadow */ --component-button-toolbar-focus-border-size: var(--component-button-focus-border-size);/* focus: toolbar button border size */ --component-button-toolbar-focus-border-color: var(--component-button-focus-border-color);/* focus: toolbar button border color */ --component-button-toolbar-focus-outline-size: var(--component-button-focus-outline-size);/* focus: toolbar button outline size */ --component-button-toolbar-focus-outline-color: var(--component-button-focus-outline-color);/* focus: toolbar button outline color */ --component-button-toolbar-focus-outline-offset: var(--component-button-focus-outline-offset);/* focus: toolbar button outline offset */ --component-button-toolbar-hover-font-weight: var(--component-button-hover-font-weight);/* hover: toolbar button font weight */ --component-button-toolbar-hover-font-style: var(--component-button-hover-font-style);/* hover: toolbar button font style */ --component-button-toolbar-hover-color: black;/* hover: toolbar button icon color */ --component-button-toolbar-hover-text-font-weight: var(--component-button-icon-hover-text-font-weight);/* hover: toolbar button text font weight */ --component-button-toolbar-hover-text-font-style: var(--component-button-icon-hover-text-font-style);/* hover: toolbar button text font style */ --component-button-toolbar-hover-text-color: black;/* hover: toolbar button text color */ --component-button-toolbar-hover-background-color: #fefefe;/* hover: toolbar button background color */ --component-button-toolbar-hover-shadow: var(--component-button-hover-shadow);/* hover: toolbar button box shadow */ --component-button-toolbar-hover-border-size: var(--component-button-hover-border-size);/* hover: toolbar button border size */ --component-button-toolbar-hover-border-color: var(--component-button-hover-border-color);/* hover: toolbar button border color */ --component-button-toolbar-hover-outline-size: var(--component-button-hover-outline-size);/* hover: toolbar button outline size */ --component-button-toolbar-hover-outline-color: var(--component-button-hover-outline-color);/* hover: toolbar button outline color */ --component-button-toolbar-hover-outline-offset: var(--component-button-hover-outline-offset);/* hover: toolbar button outline offset */ --component-button-toolbar-active-font-weight: var(--component-button-active-font-weight);/* active: toolbar button font weight */ --component-button-toolbar-active-font-style: var(--component-button-active-font-style);/* active: toolbar button font style */ --component-button-toolbar-active-color: var(--component-button-toolbar-hover-color);/* active: toolbar button icon color */ --component-button-toolbar-active-text-font-weight: var(--component-button-toolbar-hover-text-font-weight);/* active: toolbar button text font weight */ --component-button-toolbar-active-text-font-style: var(--component-button-toolbar-hover-text-font-style);/* active: toolbar button text font style */ --component-button-toolbar-active-text-color: var(--component-button-toolbar-hover-text-color);/* active: toolbar button text color */ --component-button-toolbar-active-background-color: var(--component-button-toolbar-hover-background-color);/* active: toolbar button background color */ --component-button-toolbar-active-shadow: var(--component-button-toolbar-shadow);/* active: toolbar button box shadow */ --component-button-toolbar-active-border-size: var(--component-button-toolbar-border-size);/* active: toolbar button border size */ --component-button-toolbar-active-border-color: var(--component-button-toolbar-border-color);/* active: toolbar button border color */ --component-button-toolbar-active-outline-size: var(--component-button-toolbar-outline-size);/* active: toolbar button outline size */ --component-button-toolbar-active-outline-color: var(--component-button-toolbar-outline-color);/* active: toolbar button outline color */ --component-button-toolbar-active-outline-offset: var(--component-button-toolbar-outline-offset);/* active: toolbar button outline offset */ --component-button-toolbar-active-offset-x: var(--component-button-active-offset-x);/* active: toolbar button offset x */ --component-button-toolbar-active-offset-y: var(--component-button-active-offset-y);/* active: toolbar button offset y */ /* number plate field */ --component-numberplate-item-align: var(--component-item-align);/* numberplate field vertical alignment (align-self) */ --component-numberplate-margin: var(--component-margin);/* numberplate field margin */ --component-numberplate-width: 180px; /* numberplate field input field width */ --component-numberplate-gap: 20px; /* numberplate field input - selector - gap width */ --component-numberplate-padding: 10px 15px 10px 15px;/* numberplate field input padding */ --component-numberplate-font: "NumberPlate",sans-serif;/* numberplate field input font family */ --component-numberplate-font-size: 20px; /* numberplate field input font size */ --component-numberplate-font-weight: var(--component-font-weight);/* numberplate field font weight */ --component-numberplate-font-style: var(--component-font-style);/* numberplate field font style */ --component-numberplate-line-height: var(--component-line-height);/* numberplate field line height */ --component-numberplate-text-color: var(--component-text-color);/* numberplate field text color */ --component-numberplate-background-color: var(--component-background-color);/* numberplate field background color */ --component-numberplate-shadow: var(--component-shadow);/* numberplate field box shadow */ --component-numberplate-border-radius: var(--component-border-radius);/* numberplate field border radius */ --component-numberplate-border-size: 2px; /* numberplate field border size */ --component-numberplate-border-color: black; /* numberplate field border color */ --component-numberplate-outline-size: var(--component-outline-size);/* numberplate field outline size */ --component-numberplate-outline-color: var(--component-outline-color);/* numberplate field outline color */ --component-numberplate-outline-offset: var(--component-outline-offset);/* numberplate field outline offset */ --component-numberplate-important-font-weight: var(--component-numberplate-font-weight);/* important: numberplate field font weight */ --component-numberplate-important-font-style: var(--component-numberplate-font-style);/* important: numberplate field font style */ --component-numberplate-important-text-color: var(--component-important-text-color);/* important: numberplate field text color */ --component-numberplate-important-background-color: var(--component-important-background-color);/* important: numberplate field background color */ --component-numberplate-important-shadow: var(--component-important-shadow);/* important: numberplate field box shadow */ --component-numberplate-important-border-size: var(--component-important-border-size);/* important: numberplate field border size */ --component-numberplate-important-border-color: var(--component-important-border-color);/* important: numberplate field border color */ --component-numberplate-important-outline-size: var(--component-important-outline-size);/* important: numberplate field outline size */ --component-numberplate-important-outline-color: var(--component-important-outline-color);/* important: numberplate field outline color */ --component-numberplate-important-outline-offset: var(--component-important-outline-offset);/* important: numberplate field outline offset */ --component-numberplate-required-font-weight: var(--component-numberplate-font-weight);/* required: numberplate field font weight */ --component-numberplate-required-font-style: var(--component-numberplate-font-style);/* required: numberplate field font style */ --component-numberplate-required-text-color: var(--component-required-text-color);/* required: numberplate field text color */ --component-numberplate-required-background-color: var(--component-required-background-color);/* required: numberplate field background color */ --component-numberplate-required-shadow: var(--component-required-shadow);/* required: numberplate field box shadow */ --component-numberplate-required-border-size: var(--component-required-border-size);/* required: numberplate field border size */ --component-numberplate-required-border-color: var(--component-required-border-color);/* required: numberplate field border color */ --component-numberplate-required-outline-size: var(--component-required-outline-size);/* required: numberplate field outline size */ --component-numberplate-required-outline-color: var(--component-required-outline-color);/* required: numberplate field outline color */ --component-numberplate-required-outline-offset: var(--component-required-outline-offset);/* required: numberplate field outline offset */ --component-numberplate-empty-font-weight: var(--component-numberplate-font-weight);/* empty: numberplate field font weight */ --component-numberplate-empty-font-style: var(--component-numberplate-font-style);/* empty: numberplate field font style */ --component-numberplate-empty-text-color: var(--component-empty-text-color);/* empty: numberplate field text color */ --component-numberplate-empty-background-color: var(--component-empty-background-color);/* empty: numberplate field background color */ --component-numberplate-empty-shadow: var(--component-empty-shadow);/* empty: numberplate field box shadow */ --component-numberplate-empty-border-size: var(--component-empty-border-size);/* empty: numberplate field border size */ --component-numberplate-empty-border-color: var(--component-empty-border-color);/* empty: numberplate field border color */ --component-numberplate-empty-outline-size: var(--component-empty-outline-size);/* empty: numberplate field outline size */ --component-numberplate-empty-outline-color: var(--component-empty-outline-color);/* empty: numberplate field outline color */ --component-numberplate-empty-outline-offset: var(--component-empty-outline-offset);/* empty: numberplate field outline offset */ --component-numberplate-invalid-font-weight: var(--component-numberplate-font-weight);/* invalid: numberplate field font weight */ --component-numberplate-invalid-font-style: var(--component-numberplate-font-style);/* invalid: numberplate field font style */ --component-numberplate-invalid-text-color: var(--component-invalid-text-color);/* invalid: numberplate field text color */ --component-numberplate-invalid-background-color:var(--component-invalid-background-color);/* invalid: numberplate field background color */ --component-numberplate-invalid-shadow: var(--component-invalid-shadow);/* invalid: numberplate field box shadow */ --component-numberplate-invalid-border-size: var(--component-invalid-border-size);/* invalid: numberplate field border size */ --component-numberplate-invalid-border-color: var(--component-invalid-border-color);/* invalid: numberplate field border color */ --component-numberplate-invalid-outline-size: var(--component-invalid-outline-size);/* invalid: numberplate field outline size */ --component-numberplate-invalid-outline-color: var(--component-invalid-outline-color);/* invalid: numberplate field outline color */ --component-numberplate-invalid-outline-offset: var(--component-invalid-outline-offset);/* invalid: numberplate field outline offset */ --component-numberplate-focus-font-weight: var(--component-numberplate-font-weight);/* focus: numberplate field font weight */ --component-numberplate-focus-font-style: var(--component-numberplate-font-style);/* focus: numberplate field font style */ --component-numberplate-focus-text-color: var(--component-focus-text-color);/* focus: numberplate field text color */ --component-numberplate-focus-background-color: var(--component-focus-background-color);/* focus: numberplate field background color */ --component-numberplate-focus-shadow: var(--component-focus-shadow);/* focus: numberplate field box shadow */ --component-numberplate-focus-border-size: var(--component-focus-border-size);/* focus: numberplate field border size */ --component-numberplate-focus-border-color: var(--component-focus-border-color);/* focus: numberplate field border color */ --component-numberplate-focus-outline-size: var(--component-focus-outline-size);/* focus: numberplate field outline size */ --component-numberplate-focus-outline-color: var(--component-focus-outline-color);/* focus: numberplate field outline color */ --component-numberplate-focus-outline-offset: var(--component-focus-outline-offset);/* focus: numberplate field outline offset */ --component-numberplate-disabled-font-weight: var(--component-numberplate-font-weight);/* disabled: numberplate field font weight */ --component-numberplate-disabled-font-style: var(--component-numberplate-font-style);/* disabled: numberplate field font style */ --component-numberplate-disabled-text-color: var(--component-disabled-text-color);/* disabled: numberplate field text color */ --component-numberplate-disabled-background-color:var(--component-disabled-background-color);/* disabled: numberplate field background color */ --component-numberplate-disabled-shadow: var(--component-disabled-shadow);/* disabled: numberplate field box shadow */ --component-numberplate-disabled-border-size: var(--component-disabled-border-size);/* disabled: numberplate field border size */ --component-numberplate-disabled-border-color: var(--component-disabled-border-color);/* disabled: numberplate field border color */ --component-numberplate-disabled-outline-size: var(--component-disabled-outline-size);/* disabled: numberplate field outline size */ --component-numberplate-disabled-outline-color: var(--component-disabled-outline-color);/* disabled: numberplate field outline color */ --component-numberplate-disabled-outline-offset:var(--component-disabled-outline-offset);/* disabled: numberplate field outline offset */ --component-numberplate-addon-padding: 0 0 0 0; /* numberplate field addon padding */ --component-numberplate-addon-offset: 6px; /* numberplate field addon bottom offset */ --component-numberplate-addon-width: 18px; /* numberplate field addon width */ --component-numberplate-addon-font: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;/* numberplate field addon font family */ --component-numberplate-addon-font-size: 10px; /* numberplate field addon font size */ --component-numberplate-addon-font-weight: bold; /* numberplate field addon font weight */ --component-numberplate-addon-font-style: normal; /* numberplate field addon font style */ --component-numberplate-addon-line-height: var(--component-line-height);/* numberplate field addon line height */ --component-numberplate-addon-text-color: black; /* numberplate field addon text color */ --component-numberplate-addon-background-color: white; /* numberplate field addon background color */ --component-numberplate-addon-important-font-size: var(--component-numberplate-addon-font-size);/* numberplate field addon font size */ --component-numberplate-addon-important-font-weight: var(--component-numberplate-addon-font-weight);/* numberplate field addon font weight */ --component-numberplate-addon-important-font-style: var(--component-numberplate-addon-font-style);/* numberplate field addon font style */ --component-numberplate-addon-important-text-color: var(--component-numberplate-addon-text-color);/* numberplate field addon text color */ --component-numberplate-addon-important-background-color:var(--component-numberplate-addon-background-color);/* numberplate field addon background color */ --component-numberplate-addon-required-font-size: var(--component-numberplate-addon-font-size);/* numberplate field addon font size */ --component-numberplate-addon-required-font-weight: var(--component-numberplate-addon-font-weight);/* numberplate field addon font weight */ --component-numberplate-addon-required-font-style: var(--component-numberplate-addon-font-style);/* numberplate field addon font style */ --component-numberplate-addon-required-text-color: var(--component-numberplate-addon-text-color);/* numberplate field addon text color */ --component-numberplate-addon-required-background-color:var(--component-numberplate-addon-background-color);/* numberplate field addon background color */ --component-numberplate-addon-empty-font-size: var(--component-numberplate-addon-font-size);/* numberplate field addon font size */ --component-numberplate-addon-empty-font-weight: var(--component-numberplate-addon-font-weight);/* numberplate field addon font weight */ --component-numberplate-addon-empty-font-style: var(--component-numberplate-addon-font-style);/* numberplate field addon font style */ --component-numberplate-addon-empty-text-color: var(--component-numberplate-addon-text-color);/* numberplate field addon text color */ --component-numberplate-addon-empty-background-color:var(--component-numberplate-addon-background-color);/* numberplate field addon background color */ --component-numberplate-addon-invalid-font-size: var(--component-numberplate-addon-font-size);/* numberplate field addon font size */ --component-numberplate-addon-invalid-font-weight: var(--component-numberplate-addon-font-weight);/* numberplate field addon font weight */ --component-numberplate-addon-invalid-font-style: var(--component-numberplate-addon-font-style);/* numberplate field addon font style */ --component-numberplate-addon-invalid-text-color: var(--component-numberplate-addon-text-color);/* numberplate field addon text color */ --component-numberplate-addon-invalid-background-color: var(--component-numberplate-addon-background-color);/* numberplate field addon background color */ --component-numberplate-addon-focus-font-size: var(--component-numberplate-addon-font-size);/* numberplate field addon font size */ --component-numberplate-addon-focus-font-weight: var(--component-numberplate-addon-font-weight);/* numberplate field addon font weight */ --component-numberplate-addon-focus-font-style: var(--component-numberplate-addon-font-style);/* numberplate field addon font style */ --component-numberplate-addon-focus-text-color: var(--component-numberplate-addon-text-color);/* numberplate field addon text color */ --component-numberplate-addon-focus-background-color:var(--component-numberplate-addon-background-color);/* numberplate field addon background color */ --component-numberplate-addon-disabled-font-size: var(--component-numberplate-addon-font-size);/* numberplate field addon font size */ --component-numberplate-addon-disabled-font-weight: var(--component-numberplate-addon-font-weight);/* numberplate field addon font weight */ --component-numberplate-addon-disabled-font-style: var(--component-numberplate-addon-font-style);/* numberplate field addon font style */ --component-numberplate-addon-disabled-text-color: var(--component-numberplate-addon-text-color);/* numberplate field addon text color */ --component-numberplate-addon-disabled-background-color:var(--component-numberplate-addon-background-color);/* numberplate field addon background color */ --component-numberplate-city-font: var(--component-font);/* number plate city text font */ --component-numberplate-city-font-size: 8px; /* number plate city text font size */ --component-numberplate-city-font-weight: normal; /* number plate city text font weight */ --component-numberplate-city-font-style: normal; /* number plate city text font style */ --component-numberplate-city-text-color: #aaaaaa; /* number plate city text color*/ --component-numberplate-city-bottom: 3px; /* number plate city text offset from bottom */ --component-numberplate-city-left: 35px; /* number plate city text offset from left */ /* list-field */ --component-list-margin: var(--component-margin);/* list field margin */ --component-list-gap: 20px; /* list field: row gap */ --component-list-add-pos: row; /* list field: add button position (column: top/bottom, row: left/right) */ --component-list-add-margin: 0 0 0 25px; /* list field: margin of the add button */ --component-list-add-align: center; /* list field: add button align (justify-content) */ --component-list-item-align: normal; /* list field: item align (justify-content) */ --component-list-item-padding: 10px 10px 5px 5px; /* list field: item padding */ --component-list-item-content-padding: 0 0 0 0; /* list field: item content padding */ --component-list-item-border-radius: 0; /* list field: item border radius */ --component-list-item-border-size: 1px; /* list field: item border size */ --component-list-item-border-color: #c4c4c4; /* list field: item border color */ --component-list-remove-margin: 20px; /* list field: left (right) margin of the remove button */ --component-list-remove-align: center; /* list field: remove button align (align-self) */ --component-list-add-button-width: auto; /* list field: add button width */ --component-list-add-button-height: 40px; /* list field: add button height */ --component-list-remove-button-width: auto; /* list field: remove button width */ --component-list-remove-button-height: 40px; /* list field: remove button height */ /* image field */ --component-image-item-align: var(--component-item-align);/* image field vertical alignment (align-self) */ --component-image-margin: var(--component-margin);/* image field margin */ --component-image-padding: var(--component-padding);/* image field inner padding */ --component-image-height: 150px; /* image field height */ --component-image-max-width: 100%; /* image field image max. width */ --component-image-max-height: 100%; /* image field image max. height */ --component-image-background-color: var(--component-background-color);/* image field background color */ --component-image-border-radius: var(--component-border-radius);/* image field border radius */ --component-image-border-size: var(--component-border-size);/* image field border size */ --component-image-border-color: var(--component-border-color);/* image field border color */ --component-image-outline-size: var(--component-outline-size);/* image field outline size */ --component-image-outline-color: var(--component-outline-color);/* image field outline color */ --component-image-outline-offset: var(--component-outline-offset);/* image field outline offset */ --component-image-hover-background-color: var(--component-image-background-color);/* hover: image field background color */ --component-image-hover-border-size: var(--component-image-border-size);/* hover: image field border size */ --component-image-hover-border-color: var(--component-image-border-color);/* hover: image field border color */ --component-image-important-background-color: var(--component-important-background-color);/* important: image field background color */ --component-image-important-border-size: var(--component-important-border-size);/* important: image field border size */ --component-image-important-border-color: var(--component-important-border-color);/* important: image field border color */ --component-image-important-outline-size: var(--component-important-outline-size);/* important: image field outline size */ --component-image-important-outline-color: var(--component-important-outline-color);/* important: image field outline color */ --component-image-important-outline-offset: var(--component-important-outline-offset);/* important: image field outline offset */ --component-image-required-background-color: var(--component-required-background-color);/* required: image field background color */ --component-image-required-border-size: var(--component-required-border-size);/* required: image field border size */ --component-image-required-border-color: var(--component-required-border-color);/* required: image field border color */ --component-image-required-outline-size: var(--component-required-outline-size);/* required: image field outline size */ --component-image-required-outline-color: var(--component-required-outline-color);/* required: image field outline color */ --component-image-required-outline-offset: var(--component-required-outline-offset);/* required: image field outline offset */ --component-image-empty-background-color: var(--component-empty-background-color);/* empty: image field background color */ --component-image-empty-border-size: var(--component-empty-border-size);/* empty: image field border size */ --component-image-empty-border-color: var(--component-empty-border-color);/* empty: image field border color */ --component-image-empty-outline-size: var(--component-empty-outline-size);/* empty: image field outline size */ --component-image-empty-outline-color: var(--component-empty-outline-color);/* empty: image field outline color */ --component-image-empty-outline-offset: var(--component-empty-outline-offset);/* empty: image field outline offset */ --component-image-invalid-background-color: var(--component-invalid-background-color);/* invalid: image field background color */ --component-image-invalid-border-size: var(--component-invalid-border-size);/* invalid: image field border size */ --component-image-invalid-border-color: var(--component-invalid-border-color);/* invalid: image field border color */ --component-image-invalid-outline-size: var(--component-invalid-outline-size);/* invalid: image field outline size */ --component-image-invalid-outline-color: var(--component-invalid-outline-color);/* invalid: image field outline color */ --component-image-invalid-outline-offset: var(--component-invalid-outline-offset);/* invalid: image field outline offset */ --component-image-focus-background-color: var(--component-focus-background-color);/* focus: image field background color */ --component-image-focus-border-size: var(--component-focus-border-size);/* focus: image field border size */ --component-image-focus-border-color: var(--component-focus-border-color);/* focus: image field border color */ --component-image-focus-outline-size: var(--component-focus-outline-size);/* focus: image field outline size */ --component-image-focus-outline-color: var(--component-focus-outline-color);/* focus: image field outline color */ --component-image-focus-outline-offset: var(--component-focus-outline-offset);/* focus: image field outline offset */ --component-image-disabled-background-color: var(--component-disabled-background-color);/* disabled: image field background color */ --component-image-disabled-border-size: var(--component-disabled-border-size);/* disabled: image field border size */ --component-image-disabled-border-color: var(--component-disabled-border-color);/* disabled: image field border color */ --component-image-disabled-outline-size: var(--component-disabled-outline-size);/* disabled: image field outline size */ --component-image-disabled-outline-color: var(--component-disabled-outline-color);/* disabled: image field outline color */ --component-image-disabled-outline-offset: var(--component-disabled-outline-offset);/* disabled: image field outline offset */ --component-image-placeholder-background-color: var(--component-image-background-color);/* placeholder: image field background color */ --component-image-placeholder-outline-size: 0; /* placeholder: image field outline size */ --component-image-placeholder-outline-color: var(--component-outline-color);/* placeholder: image field outline color */ --component-image-placeholder-outline-offset: var(--component-outline-offset);/* placeholder: image field outline offset */ --component-image-button-container-pos: row; /* image field: button container position (column: top/bottom, row: left/right) */ --component-image-button-pos: column; /* image field: buttons position */ --component-image-button-container-margin: 20px; /* image field: left (right) margin of the button container */ --component-image-button-gap: 20px; /* image field: button gap */ --component-image-button-container-align: normal; /* image field: button container align (align-self) */ --component-image-button-width: 45px; /* image field button width */ --component-image-button-height: auto; /* image field button height */ /* login field */ --component-login-item-align: var(--component-item-align);/* login field vertical alignment (align-self) */ --component-login-margin: var(--component-margin);/* login field margin */ --component-login-padding: 100px 0 0 0; /* login field inner padding */ --component-login-max-width: 800px; /* login field max width */ --component-login-outline-size: var(--component-outline-size);/* login field outline size */ --component-login-outline-color: var(--component-outline-color);/* login field outline color */ --component-login-outline-offset: var(--component-outline-offset);/* login field outline offset */ --component-login-title-font: var(--component-font);/* login field title font family */ --component-login-title-font-size: 40px; /* login field title font size */ --component-login-title-font-weight: var(--component-font-weight);/* login field title font weight */ --component-login-title-font-style: var(--component-font-style);/* login field title font style */ --component-login-title-line-height: var(--component-line-height);/* login field title line height */ --component-login-title-text-color: var(--component-text-color);/* login field title text color */ --component-login-title-margin: 0 0 30px 0; /* login field title margin */ --component-login-info-font: var(--component-font);/* login field info font family */ --component-login-info-font-size: var(--component-font-size); /* login field info font size */ --component-login-info-font-weight: var(--component-font-weight);/* login field info font weight */ --component-login-info-font-style: var(--component-font-style);/* login field info font style */ --component-login-info-line-height: 1.4;/* login field info line height */ --component-login-info-text-color: var(--component-text-color);/* login field info text color */ --component-login-info-margin: 0 0 10px 0; /* login field info margin */ --component-login-options-font: var(--component-font);/* login field options font family */ --component-login-options-font-size: var(--component-font-size); /* login field options font size */ --component-login-options-font-weight: var(--component-font-weight);/* login field options font weight */ --component-login-options-font-style: var(--component-font-style);/* login field options font style */ --component-login-options-line-height: var(--component-line-height);/* login field options line height */ --component-login-options-text-color: #002D72;/* login field options text color */ --component-login-options-margin: 10px 0 10px 0; /* login field options margin */ --component-login-options-text-decoration: underline; /* login field options text decoration */ --component-login-error-font: var(--component-font);/* login field error font family */ --component-login-error-font-size: var(--component-font-size); /* login field error font size */ --component-login-error-font-weight: var(--component-font-weight);/* login field error font weight */ --component-login-error-font-style: var(--component-font-style);/* login field error font style */ --component-login-error-line-height: var(--component-line-height);/* login field error line height */ --component-login-error-text-color: var(--error-msg-color);/* login field error text color */ --component-login-error-margin: 0 0 10px 0; /* login field error margin */ /* table-field */ --table-field-margin: var(--component-margin);/* table field margin */ --table-field-padding: 0 0 0 0; /* table field padding */ --table-field-border-color: inherit; /* table field border color */ --table-field-border-size: 0; /* table field border size */ --table-field-tool-margin: 0; /* table field tool area bottom margin */ --table-field-tool-padding: 0 0 0 0; /* table field tool area padding */ --table-field-tool-input-filter-margin-left: 10px; /* table field tool area filter input margin left */ --table-field-tool-input-filter-margin-right: 0px; /* table field tool area filter input margin right */ --table-field-tool-input-filter-max-width: 400px; /* table field tool area filter input max. width */ --table-field-tool-input-filter-flex: 1 1 0; /* table field tool area filter input flex value */ --table-field-tool-date-filter-margin-left: 0; /* table field tool area filter date margin left */ --table-field-tool-date-filter-margin-right: 10px; /* table field tool area filter date margin right */ --table-field-tool-date-filter-max-width: 200px; /* table field tool area filter date max. width */ --table-field-tool-date-filter-flex: 1 1 0; /* table field tool area filter date flex value */ --table-field-tool-date-range-filter-margin-left:0; /* table field tool area filter date range margin left */ --table-field-tool-date-range-filter-margin-right:10px; /* table field tool area filter date range margin right */ --table-field-tool-date-range-filter-max-width: 200px; /* table field tool area filter date range max. width (single date field width) */ --table-field-tool-date-range-filter-flex: 1 1 0; /* table field tool area filter date range flex value */ --table-field-tool-select-filter-margin-left: 0; /* table field tool area filter select margin left */ --table-field-tool-select-filter-margin-right: 0; /* table field tool area filter select margin right */ --table-field-tool-select-filter-max-width: 300px; /* table field tool area filter select max. width */ --table-field-tool-select-filter-flex: 1 1 0; /* table field tool area filter select flex value */ --table-field-tool-button-margin-left: 5px; /* table field tool area button margin left */ --table-field-tool-button-margin-right: 5px; /* table field tool area button margin right */ --table-field-tool-button-width: 50px; /* table field tool area button width */ --table-field-tool-checkbox-margin-left: 5px; /* table field tool area checkbox margin left */ --table-field-tool-checkbox-margin-right: 20px; /* table field tool area checkbox margin right */ --table-field-tool-checkbox-min-width: unset; /* table field tool area checkbox min. width */ --table-field-tool-separator-width: 10px; /* table field tool area separator width */ --table-field-tool-long-separator-width: 25px; /* table field tool area long separator width */ --table-field-header-row-background-color: #002d72; /* table field header row background color */ --table-field-row-background-color: white; /* table field row background color */ --table-field-even-row-background-color: #f6f6f6; /* table field background color for even rows */ --table-field-odd-row-background-color: #e9e9e9; /* table field background color for odd rows */ --table-field-hover-row-background-color: #ffffff; /* table field background color for row hovering */ --table-field-cell-padding: 10px 25px 10px 25px;/* table field cell padding */ --table-field-header-cell-padding: var(--table-field-cell-padding);/* table field header cell padding */ --table-field-cell-height: 37px; /* table field cell default height (=min. height) */ --table-field-cell-inner-hborder-color: #c4c4c4; /* table field cell inner horizontal border color */ --table-field-cell-inner-hborder-size: 1px; /* table field cell inner horizontal border size */ --table-field-cell-inner-vborder-color: inherit; /* table field cell inner vertical border color */ --table-field-cell-inner-vborder-size: 1px; /* table field cell inner vertical border size */ --table-field-cell-outer-border-color: transparent;/* table field cell outer border color */ --table-field-cell-outer-border-size: 0; /* table field cell outer border size */ --table-field-header-cell-inner-hborder-color: var(--table-field-cell-inner-border-color);/* table field header cell inner horizontal border color */ --table-field-header-cell-inner-hborder-size: var(--table-field-cell-inner-border-size);/* table field header cell inner horizontal border size */ --table-field-header-cell-inner-vborder-color: white; /* table field header cell inner vertical border color */ --table-field-header-cell-inner-vborder-size: 1px; /* table field header cell inner vertical border size */ --table-field-header-cell-outer-border-color: var(--table-field-cell-outer-border-color);/* table field header cell outer border color */ --table-field-header-cell-outer-border-size: var(--table-field-cell-outer-border-size);/* table field header cell outer border size */ --table-field-header-cell-sorting-offset: 10px; /* x offset (from right) of the sorting icon */ --table-field-font: var(--component-font);/* table field font family */ --table-field-font-size: var(--component-font-size);/* table field font size */ --table-field-font-weight: var(--component-font-weight);/* table field font weight */ --table-field-font-style: var(--component-font-style);/* table field font style */ --table-field-line-height: var(--component-line-height);/* table field line height */ --table-field-text-color: var(--component-text-color);/* table field text color */ --table-field-even-row-text-color: var(--component-text-color);/* table field text color for even rows */ --table-field-odd-row-text-color: var(--component-text-color);/* table field text color for odd rows */ --table-field-hover-row-text-color: var(--component-text-color);/* table field text color for row hovering */ --table-field-header-font: var(--table-field-font);/* table field header font family */ --table-field-header-font-size: var(--table-field-font-size);/* table field header font size */ --table-field-header-font-weight: var(--table-field-font-weight);/* table field header font weight */ --table-field-header-font-style: var(--table-field-font-style);/* table field header font style */ --table-field-header-line-height: var(--table-field-line-height);/* table field header line height */ --table-field-header-text-color: white; /* table field header text color */ --table-field-title-area-margin: 40px; /* right margin of title area */ --table-field-title-font: var(--table-field-header-font);/* table field header font family */ --table-field-title-font-size: 40px; /* table field header font size */ --table-field-title-font-weight: var(--table-field-header-font-weight);/* table field header font weight */ --table-field-title-font-style: var(--table-field-header-font-style);/* table field header font style */ --table-field-title-line-height: var(--table-field-header-line-height);/* table field header line height */ --table-field-title-text-color: black;/* table field header text color */ --table-field-title-margin: 0 0 10px 0; /* margin of title text */ --table-field-subtitle-font-size: 30px; /* table field header font size */ --table-field-subtitle-font-weight: var(--table-field-title-font-weight);/* table field header font weight */ --table-field-subtitle-font-style: var(--table-field-title-font-style);/* table field header font style */ --table-field-subtitle-line-height: var(--table-field-title-line-height);/* table field header line height */ --table-field-subtitle-text-color: black;/* table field header text color */ --table-field-subtitle-margin: 0 0 10px 0; /* margin of subtitle text */ --table-field-title-counter-font-size: var(--table-field-header-font-size);/* table field header counter font size */ --table-field-title-counter-font-weight: var(--table-field-header-font-weight);/* table field header counter font weight */ --table-field-title-counter-font-style: var(--table-field-header-font-style);/* table field header counter font style */ --table-field-title-counter-line-height: var(--table-field-header-line-height);/* table field header counter line height */ --table-field-title-counter-text-color: black;/* table field header counter text color */ --table-field-title-counter-flex-align: end; /* table field header counter (vertical) flex align */ --table-field-title-counter-text-align: left; /* table field header counter text align */ --table-field-title-counter-margin: 0 0 14px 10px; /* table field header counter margin */ --table-field-multiselect-col-width: 40px; /* width of the multiselection column */ --table-field-multiselect-col-padding: 10px 10px 10px 10px; /* padding for the multiselection column */ --table-field-multiselect-icon-font: "Font Awesome 5 Pro"; /* icon font for multiselection selector */ --table-field-multiselect-icon-font-size: inherit; /* icon size for multiselection selector */ --table-field-multiselect-icon-color: var(--table-field-text-color);/* icon color for multiselection selector */ --table-field-multiselect-icon-unchecked: "\f0c8"; /* icon for multiselection selector "unselected" */ --table-field-multiselect-icon-checked: "\f14a"; /* icon for multiselection selector "selected" */ --table-field-multiselect-even-row-background-color:var(--table-field-even-row-background-color);/* table field background color for selected even rows */ --table-field-multiselect-odd-row-background-color:var(--table-field-odd-row-background-color);/* table field background color for selected odd rows */ --table-field-multiselect-even-row-text-color: var(--table-field-even-row-text-color);/* table field text color for selected even rows */ --table-field-multiselect-odd-row-text-color: var(--table-field-odd-row-text-color);/* table field text color for selected odd rows */ --table-field-multiselect-icon-select-all: "\f560"; /* icon for multiselection header "select all" */ --table-field-multiselect-icon-header-font-size:var(--table-field-multiselect-icon-font-size); /* icon size for multiselection header */ --table-field-multiselect-icon-header-color: var(--table-field-header-text-color);/* icon color for multiselection header */ /* rating-field */ --component-rating-item-align: var(--component-item-align);/* rating field vertical alignment (align-self) */ --component-rating-margin: var(--component-margin);/* rating field margin */ --component-rating-star-padding: 0 0 0 0; /* rating star padding */ --component-rating-font-size: var(--component-font-size);/* rating field font size */ --component-rating-text-color: var(--component-text-color);/* rating field text color */ --component-rating-outline-size: var(--component-outline-size);/* rating field outline size */ --component-rating-outline-color: var(--component-outline-color);/* rating field outline color */ --component-rating-outline-offset: var(--component-outline-offset);/* rating field outline offset */ --component-rating-important-text-color: var(--component-important-text-color);/* important: rating field text color */ --component-rating-important-outline-size: var(--component-important-outline-size);/* important: rating field outline size */ --component-rating-important-outline-color: var(--component-important-outline-color);/* important: rating field outline color */ --component-rating-important-outline-offset: var(--component-important-outline-offset);/* important: rating field outline offset */ --component-rating-required-text-color: var(--component-required-text-color);/* required: rating field text color */ --component-rating-required-outline-size: var(--component-required-outline-size);/* required: rating field outline size */ --component-rating-required-outline-color: var(--component-required-outline-color);/* required: rating field outline color */ --component-rating-required-outline-offset: var(--component-required-outline-offset);/* required: rating field outline offset */ --component-rating-empty-text-color: var(--component-empty-text-color);/* empty: rating field text color */ --component-rating-empty-outline-size: var(--component-empty-outline-size);/* empty: rating field outline size */ --component-rating-empty-outline-color: var(--component-empty-outline-color);/* empty: rating field outline color */ --component-rating-empty-outline-offset: var(--component-empty-outline-offset);/* empty: rating field outline offset */ --component-rating-invalid-text-color: var(--component-invalid-text-color);/* invalid: rating field text color */ --component-rating-invalid-outline-size: var(--component-invalid-outline-size);/* invalid: rating field outline size */ --component-rating-invalid-outline-color: var(--component-invalid-outline-color);/* invalid: rating field outline color */ --component-rating-invalid-outline-offset: var(--component-invalid-outline-offset);/* invalid: rating field outline offset */ --component-rating-focus-text-color: var(--component-focus-text-color);/* focus: rating field text color */ --component-rating-focus-outline-size: var(--component-focus-outline-size);/* focus: rating field outline size */ --component-rating-focus-outline-color: var(--component-focus-outline-color);/* focus: rating field outline color */ --component-rating-focus-outline-offset: var(--component-focus-outline-offset);/* focus: rating field outline offset */ --component-rating-disabled-text-color: var(--component-disabled-text-color);/* disabled: rating field text color */ --component-rating-disabled-outline-size: var(--component-disabled-outline-size);/* disabled: rating field outline size */ --component-rating-disabled-outline-color: var(--component-disabled-outline-color);/* disabled: rating field outline color */ --component-rating-disabled-outline-offset: var(--component-disabled-outline-offset);/* disabled: rating field outline offset */ --component-rating-hover-text-color: inherit; /* rating field hover text color */ /* zoom-field */ --component-zoom-item-align: var(--component-item-align);/* zoom field vertical alignment (align-self) */ --component-zoom-margin: var(--component-margin);/* zoom field margin */ --component-zoom-gap: 10px; /* zoom field button gap */ /* progressbar-field */ --component-progressbar-margin: var(--component-margin);/* progressbar field margin */ --component-progressbar-item-align: var(--component-item-align);/* progressbar field vertical alignment (align-self) */ --component-progressbar-outline-size: var(--component-outline-size);/* progressbar field outline size */ --component-progressbar-outline-color: var(--component-outline-color);/* progressbar field outline color */ --component-progressbar-outline-offset: var(--component-outline-offset);/* progressbar field outline offset */ --component-progressbar-padding-top: 5px; /* progressbar field padding, top */ --component-progressbar-padding-right: 20px; /* progressbar field padding, right */ --component-progressbar-padding-bottom: 5px; /* progressbar field padding, bottom */ --component-progressbar-padding-left: 20px; /* progressbar field padding, left */ --component-progressbar-font: var(--component-font);/* progressbar field font family */ --component-progressbar-font-size: var(--component-font-size);/* progressbar field font size */ --component-progressbar-font-weight: var(--component-font-weight);/* progressbar field font weight */ --component-progressbar-font-style: var(--component-font-style);/* progressbar field font style */ --component-progressbar-text-color: var(--component-text-color);/* progressbar field text color */ --component-progressbar-text-color-inverted: var(--component-background-color);/* progressbar field text color */ --component-progressbar-text-shadow: none; /* progressbar field text shadow */ --component-progressbar-text-shadow-inverted: none; /* progressbar field text shadow */ --component-progressbar-text-align: center; /* progressbar field text align */ --component-progressbar-line-height: 1.7; /* progressbar field line height */ --component-progressbar-height: calc(var(--component-progressbar-font-size) * var(--component-progressbar-line-height) + var(--component-progressbar-padding-top) + var(--component-progressbar-padding-bottom)); /* progressbar field bar height */ --component-progressbar-background-color: var(--component-background-color);/* progressbar field background color */ --component-progressbar-shadow: var(--component-shadow);/* progressbar field box shadow */ --component-progressbar-border-radius: var(--component-border-radius);/* progressbar field border radius */ --component-progressbar-border-size: var(--component-border-size);/* progressbar field border size */ --component-progressbar-border-color: var(--component-border-color);/* progressbar field border color */ --component-progressbar-bar-radius: 4px; /* progressbar field bar radius (left side) */ --component-progressbar-bar-tip-radius: 4px; /* progressbar field bar radius (tip, right side) */ --component-progressbar-bar-steps-radius: 2px; /* progressbar field, type=steps, bar radius (left side) */ --component-progressbar-bar-steps-tip-radius: 2px; /* progressbar field, type=steps, bar radius (tip, right side) */ --component-progressbar-step-width: 25px; /* progressbar field, type=steps, step item width (overwritten by component!) */ --component-progressbar-step-gap: 5px; /* progressbar field, type=steps, step item gap (overwritten by component!) */ --component-progressbar-color: #002D72; /* progressbar field inner color */ --component-progressbar-color0: #D00B0B; /* progressbar field inner color, multicolor 0% */ --component-progressbar-color25: #D0880B; /* progressbar field inner color, multicolor 25% */ --component-progressbar-color50: #D7DE0C; /* progressbar field inner color, multicolor 50% */ --component-progressbar-color75: #9CDE0C; /* progressbar field inner color, multicolor 75% */ --component-progressbar-color100: #4FDE0C; /* progressbar field inner color, multicolor 100% */ --component-progressbar-info-top-font: var(--component-font);/* progressbar field top text font family */ --component-progressbar-info-top-font-size: var(--component-font-size);/* progressbar field top text font size */ --component-progressbar-info-top-font-weight: var(--component-font-weight);/* progressbar field top text font weight */ --component-progressbar-info-top-font-style: var(--component-font-style);/* progressbar field top text font style */ --component-progressbar-info-top-text-color: var(--component-text-color);/* progressbar field top text color */ --component-progressbar-info-top-line-height: var(--component-line-height);/* progressbar field top text line height */ --component-progressbar-info-top-text-align: center; /* progressbar field top text alignment */ --component-progressbar-info-top-margin: 5px; /* progressbar field top text bottom(!) margin */ --component-progressbar-info-bottom-font: var(--component-font);/* progressbar field bottom text font family */ --component-progressbar-info-bottom-font-size: var(--component-font-size);/* progressbar field bottom text font size */ --component-progressbar-info-bottom-font-weight:var(--component-font-weight);/* progressbar field bottom text font weight */ --component-progressbar-info-bottom-font-style: var(--component-font-style);/* progressbar field bottom text font style */ --component-progressbar-info-bottom-text-color: var(--component-text-color);/* progressbar field bottom text color */ --component-progressbar-info-bottom-line-height:var(--component-line-height);/* progressbar field bottom text line height */ --component-progressbar-info-bottom-text-align: center; /* progressbar field top text alignment */ --component-progressbar-info-bottom-margin: 5px; /* progressbar field bottom text top(!) margin */ --component-progressbar-indicator-font: var(--component-font);/* progressbar field indicator font family */ --component-progressbar-indicator-font-size: var(--component-font-size);/* progressbar field indicator font size */ --component-progressbar-indicator-font-weight: var(--component-font-weight);/* progressbar field indicator font weight */ --component-progressbar-indicator-font-style: var(--component-font-style);/* progressbar field indicator font style */ --component-progressbar-indicator-text-color: var(--component-text-color);/* progressbar field indicator color */ --component-progressbar-indicator-background-color: var(--component-progressbar-background-color);/* progressbar field indicator background color */ --component-progressbar-indicator-shadow: var(--component-progressbar-shadow);/* progressbar field box shadow */ --component-progressbar-indicator-border-radius: 4px; --component-progressbar-indicator-border-size: var(--component-progressbar-border-size);/* progressbar field indicator border size */ --component-progressbar-indicator-border-color: var(--component-progressbar-border-color);/* progressbar field indicator border color */ --component-progressbar-indicator-padding: 0 0 0 0; /* progressbar field indicator padding */ --component-progressbar-indicator-width: 50px; /* progressbar field indicator min. width */ --component-progressbar-indicator-height: 30px; /* progressbar field indicator height (without nose) */ --component-progressbar-indicator-nose-height: 7px; /* progressbar field indicator nose height */ --component-progressbar-indicator-offset: -3px; /* progressbar field indicator vertical offset (top/bottom) */ --component-progressbar-addon-padding: 0 10px 0 10px;/* progressbar field addon padding */ --component-progressbar-addon-width: 52px; /* progressbar field addon min. width */ --component-progressbar-addon-font: var(--component-font);/* progressbar field addon font family */ --component-progressbar-addon-font-size: var(--component-font-size);/* progressbar field addon font size */ --component-progressbar-addon-font-weight: var(--component-font-weight);/* progressbar field addon font weight */ --component-progressbar-addon-font-style: var(--component-font-style);/* progressbar field addon font style */ --component-progressbar-addon-line-height: var(--component-line-height);/* progressbar field addon line height */ --component-progressbar-addon-text-color: var(--component-text-color);/* progressbar field addon text color */ --component-progressbar-addon-background-color: var(--component-background-color);/* progressbar field addon background color */ /* progressbar-field: small */ --component-progressbar-small-padding-top: 3px; /* small progressbar field padding, top */ --component-progressbar-small-padding-right: 4px; /* small progressbar field padding, right */ --component-progressbar-small-padding-bottom: 3px; /* small progressbar field padding, bottom */ --component-progressbar-small-padding-left: 4px; /* small progressbar field padding, left */ --component-progressbar-small-height: calc(15px + var(--component-progressbar-small-padding-top) + var(--component-progressbar-small-padding-bottom)); /* small progressbar field bar height */ --component-progressbar-small-background-color: var(--component-progressbar-background-color);/* small progressbar field background color */ --component-progressbar-small-shadow: var(--component-progressbar-shadow);/* small progressbar field box shadow */ --component-progressbar-small-border-radius: var(--component-progressbar-border-radius);/* small progressbar field border radius */ --component-progressbar-small-border-size: var(--component-progressbar-border-size);/* small progressbar field border size */ --component-progressbar-small-border-color: var(--component-progressbar-border-color);/* small progressbar field border color */ --component-progressbar-small-indicator-offset: 0px; /* small progressbar field indicator vertical offset (top/bottom) */ --component-progressbar-small-bar-radius: 4px; /* small progressbar field bar radius (left side) */ --component-progressbar-small-bar-tip-radius: 4px; /* small progressbar field bar radius (tip, right side) */ --component-progressbar-small-font: var(--component-progressbar-font);/* small progressbar field font family */ --component-progressbar-small-font-size: 10px;/* small progressbar field font size */ --component-progressbar-small-font-weight: var(--component-progressbar-font-weight);/* small progressbar field font weight */ --component-progressbar-small-font-style: var(--component-progressbar-font-style);/* small progressbar field font style */ --component-progressbar-small-text-color: var(--component-progressbar-text-color);/* small progressbar field text color */ --component-progressbar-small-text-color-inverted: var(--component-progressbar-small-background-color);/* small progressbar field text color */ --component-progressbar-small-text-shadow: var(--component-progressbar-text-shadow);/* small progressbar field text shadow */ --component-progressbar-small-text-shadow-inverted: var(--component-progressbar-text-shadow-inverted);/* small progressbar field text shadow */ --component-progressbar-small-text-align: var(--component-progressbar-text-align);/* small progressbar field text align */ --component-progressbar-small-line-height: var(--component-progressbar-line-height);/* small progressbar field line height */ --component-progressbar-small-info-top-font: var(--component-progressbar-info-top-font);/* small progressbar field top text font family */ --component-progressbar-small-info-top-font-size: 14px;/* small progressbar field top text font size */ --component-progressbar-small-info-top-font-weight: var(--component-progressbar-info-top-font-weight);/* small progressbar field top text font weight */ --component-progressbar-small-info-top-font-style: var(--component-progressbar-info-top-font-style);/* small progressbar field top text font style */ --component-progressbar-small-info-top-text-color: var(--component-progressbar-info-top-text-color);/* small progressbar field top text color */ --component-progressbar-small-info-top-line-height: var(--component-progressbar-info-top-line-height);/* small progressbar field top text line height */ --component-progressbar-small-info-top-text-align: var(--component-progressbar-info-top-text-align); /* small progressbar field top text alignment */ --component-progressbar-small-info-top-margin: var(--component-progressbar-info-top-margin); /* small progressbar field top text bottom(!) margin */ --component-progressbar-small-info-bottom-font: var(--component-progressbar-info-bottom-font);/* small progressbar field bottom text font family */ --component-progressbar-small-info-bottom-font-size: 14px;/* small progressbar field bottom text font size */ --component-progressbar-small-info-bottom-font-weight: var(--component-progressbar-info-bottom-font-weight);/* small progressbar field bottom text font weight */ --component-progressbar-small-info-bottom-font-style: var(--component-progressbar-info-bottom-font-style);/* small progressbar field bottom text font style */ --component-progressbar-small-info-bottom-text-color: var(--component-progressbar-info-bottom-text-color);/* small progressbar field bottom text color */ --component-progressbar-small-info-bottom-line-height: var(--component-progressbar-info-bottom-line-height);/* small progressbar field bottom text line height */ --component-progressbar-small-info-bottom-text-align: var(--component-progressbar-info-bottom-text-align); /* small progressbar field top text alignment */ --component-progressbar-small-info-bottom-margin: var(--component-progressbar-info-bottom-margin); /* small progressbar field bottom text top(!) margin */ /* progressbar-field: wizard */ --component-progressbar-wizard-padding-top: 5px; /* progressbar field, wizard, padding, top */ --component-progressbar-wizard-padding-right: 20px; /* progressbar field, wizard, padding, right */ --component-progressbar-wizard-padding-bottom: 5px; /* progressbar field, wizard, padding, bottom */ --component-progressbar-wizard-padding-left: 20px; /* progressbar field, wizard, padding, left */ --component-progressbar-wizard-background-color: #dbdbdb; /* progressbar field, wizard, item background color */ --component-progressbar-wizard-item-gap-size: 6px; /* progressbar field, wizard, item gap size */ --component-progressbar-wizard-item-height: 30px; /* progressbar field, wizard, item height (not active item) */ --component-progressbar-wizard-item-align: center; /* progressbar field, wizard, item inner alignment */ --component-progressbar-wizard-item-padding-left: 0px; /* progressbar field, wizard, item padding left */ --component-progressbar-wizard-item-padding-right: 0px; /* progressbar field, wizard, item padding right */ --component-progressbar-wizard-height: calc(max(var(--component-progressbar-wizard-item-height), var(--component-progressbar-wizard-active-item-height), var(--component-progressbar-wizard-done-item-height)) + var(--component-progressbar-wizard-padding-top) + var(--component-progressbar-wizard-padding-bottom)); /* progressbar field, wizard, bar height */ --component-progressbar-wizard-outside-num-font: var(--component-font);/* progressbar field, wizard, top/bottom number font family */ --component-progressbar-wizard-outside-num-font-size: var(--component-font-size);/* progressbar field, wizard, top/bottom number font size */ --component-progressbar-wizard-outside-num-font-weight: var(--component-font-weight);/* progressbar field, wizard, top/bottom number font weight */ --component-progressbar-wizard-outside-num-font-style: var(--component-font-style);/* progressbar field, wizard, top/bottom number font style */ --component-progressbar-wizard-outside-num-text-color: var(--component-text-color);/* progressbar field, wizard, top/bottom number text color */ --component-progressbar-wizard-outside-num-line-height: var(--component-line-height);/* progressbar field, wizard, top/bottom number line height */ --component-progressbar-wizard-outside-num-background-color: var(--component-background-color);/* progressbar field, wizard, top/bottom number background color */ --component-progressbar-wizard-outside-num-shadow: var(--component-shadow);/* progressbar field, wizard, top/bottom number box shadow */ --component-progressbar-wizard-outside-num-border-radius: var(--component-border-radius);/* progressbar field, wizard, top/bottom number border radius */ --component-progressbar-wizard-outside-num-border-size: var(--component-border-size);/* progressbar field, wizard, top/bottom number border size */ --component-progressbar-wizard-outside-num-border-color:var(--component-border-color);/* progressbar field, wizard, top/bottom number border color */ --component-progressbar-wizard-outside-num-gap: 10px; /* progressbar field, wizard, top/bottom number right gap to the text */ --component-progressbar-wizard-outside-num-width: 24px; /* progressbar field, wizard, top/bottom number width */ --component-progressbar-wizard-outside-num-height: 24px; /* progressbar field, wizard, top/bottom number height */ --component-progressbar-wizard-outside-text-font: var(--component-font);/* progressbar field, wizard, top/bottom text font family */ --component-progressbar-wizard-outside-text-font-size: var(--component-font-size);/* progressbar field, wizard, top/bottom text font size */ --component-progressbar-wizard-outside-text-font-weight: var(--component-font-weight);/* progressbar field, wizard, top/bottom text font weight */ --component-progressbar-wizard-outside-text-font-style: var(--component-font-style);/* progressbar field, wizard, top/bottom text font style */ --component-progressbar-wizard-outside-text-text-color: var(--component-text-color);/* progressbar field, wizard, top/bottom text text color */ --component-progressbar-wizard-outside-text-line-height: var(--component-line-height);/* progressbar field, wizard, top/bottom text line height */ --component-progressbar-wizard-outside-align: center; /* progressbar field, wizard, top/bottom number / text alignment */ --component-progressbar-wizard-outside-top-margin: 5px; /* progressbar field, wizard, top text bottom(!) margin */ --component-progressbar-wizard-outside-bottom-margin: 5px; /* progressbar field, wizard, top text top(!) margin */ --component-progressbar-wizard-extra-padding-top: 0px; /* progressbar field, wizard extra padding variable (dynamically changed for top text/number) */ --component-progressbar-wizard-extra-padding-bottom: 0px; /* progressbar field, wizard extra padding variable (dynamically changed for bottom text/number) */ --component-progressbar-wizard-num-font: var(--component-font);/* progressbar field, wizard, inside number font family */ --component-progressbar-wizard-num-font-size: var(--component-font-size);/* progressbar field, wizard, inside number font size */ --component-progressbar-wizard-num-font-weight: var(--component-font-weight);/* progressbar field, wizard, inside number font weight */ --component-progressbar-wizard-num-font-style: var(--component-font-style);/* progressbar field, wizard, inside number font style */ --component-progressbar-wizard-num-text-color: #666;/* progressbar field, wizard, inside number text color */ --component-progressbar-wizard-num-line-height: 22px; /* progressbar field, wizard, inside number line height */ --component-progressbar-wizard-num-background-color: var(--component-progressbar-wizard-background-color);/* progressbar field, wizard, inside number background color */ --component-progressbar-wizard-num-shadow: var(--component-shadow);/* progressbar field, wizard, inside number box shadow */ --component-progressbar-wizard-num-border-radius: 12px; /* progressbar field, wizard, inside number border radius */ --component-progressbar-wizard-num-border-size: var(--component-border-size);/* progressbar field, wizard, inside number border size */ --component-progressbar-wizard-num-border-color: var(--component-border-color);/* progressbar field, wizard, inside number border color */ --component-progressbar-wizard-num-gap: 10px; /* progressbar field, wizard, inside number right gap to the text */ --component-progressbar-wizard-num-width: 24px; /* progressbar field, wizard, inside number width */ --component-progressbar-wizard-num-height: 24px; /* progressbar field, wizard, inside number height */ --component-progressbar-wizard-text-font: var(--component-font);/* progressbar field, wizard, inside text font family */ --component-progressbar-wizard-text-font-size: var(--component-font-size);/* progressbar field, wizard, inside text font size */ --component-progressbar-wizard-text-font-weight: var(--component-font-weight);/* progressbar field, wizard, inside text font weight */ --component-progressbar-wizard-text-font-style: var(--component-font-style);/* progressbar field, wizard, inside text font style */ --component-progressbar-wizard-text-text-color: #666;/* progressbar field, wizard, inside text text color */ --component-progressbar-wizard-text-line-height: var(--component-line-height);/* progressbar field, wizard, inside text line height */ --component-progressbar-wizard-active-background-color: #1CB53F;/* progressbar field, wizard, active item background color */ --component-progressbar-wizard-active-item-height: calc(var(--component-progressbar-wizard-item-height) + 8px); /* progressbar field, wizard, item height (active item) */ --component-progressbar-wizard-active-num-font-size: var(--component-font-size);/* progressbar field, wizard, active item, inside number font size */ --component-progressbar-wizard-active-num-font-weight: var(--component-font-weight);/* progressbar field, wizard, active item, inside number font weight */ --component-progressbar-wizard-active-num-font-style: var(--component-font-style);/* progressbar field, wizard, active item, inside number font style */ --component-progressbar-wizard-active-num-text-color: white;/* progressbar field, wizard, active item, inside number text color */ --component-progressbar-wizard-active-num-background-color: #1CB53F;/* progressbar field, wizard, active item, inside number background color */ --component-progressbar-wizard-active-num-shadow: var(--component-shadow);/* progressbar field, wizard, active item, inside number box shadow */ --component-progressbar-wizard-active-num-border-color: white; /* progressbar field, wizard, active item, inside number border color */ --component-progressbar-wizard-active-text-font-size: var(--component-font-size);/* progressbar field, wizard, active item, inside text font size */ --component-progressbar-wizard-active-text-font-weight: var(--component-font-weight);/* progressbar field, wizard, active item, inside text font weight */ --component-progressbar-wizard-active-text-font-style: var(--component-font-style);/* progressbar field, wizard, active item, inside text font style */ --component-progressbar-wizard-active-text-text-color: white;/* progressbar field, wizard, active item, inside text text color */ --component-progressbar-wizard-done-background-color: #002D72;/* progressbar field, wizard, done item background color */ --component-progressbar-wizard-done-item-height: var(--component-progressbar-wizard-active-item-height);/* progressbar field, wizard, item height (done item) */ --component-progressbar-wizard-done-num-font-size: var(--component-font-size);/* progressbar field, wizard, done item, inside number font size */ --component-progressbar-wizard-done-num-font-weight: var(--component-font-weight);/* progressbar field, wizard, done item, inside number font weight */ --component-progressbar-wizard-done-num-font-style: var(--component-font-style);/* progressbar field, wizard, done item, inside number font style */ --component-progressbar-wizard-done-num-text-color: white;/* progressbar field, wizard, done item, inside number text color */ --component-progressbar-wizard-done-num-background-color: #002D72;/* progressbar field, wizard, done item, inside number background color */ --component-progressbar-wizard-done-num-shadow: var(--component-shadow);/* progressbar field, wizard, done item, inside number box shadow */ --component-progressbar-wizard-done-num-border-color: var(--component-border-color);/* progressbar field, wizard, done item, inside number border color */ --component-progressbar-wizard-done-text-font-size: var(--component-font-size);/* progressbar field, wizard, done item, inside text font size */ --component-progressbar-wizard-done-text-font-weight: var(--component-font-weight);/* progressbar field, wizard, done item, inside text font weight */ --component-progressbar-wizard-done-text-font-style: var(--component-font-style);/* progressbar field, wizard, done item, inside text font style */ --component-progressbar-wizard-done-text-text-color: white; /* progressbar field, wizard, done item, inside text text color */ /* progressbar-field: wizard style: block */ --component-progressbar-wizard-block-gap-size: 1px; /* progressbar field, wizard, block style, item gap size */ /* progressbar-field: wizard style: round end caps */ --component-progressbar-wizard-round-border-radius: 30px; /* progressbar field, wizard, border radius for round end caps */ /* progressbar-field: wizard style: lines + arrows */ --component-progressbar-wizard-lines-arrows-text-align: center; /* progressbar field, wizard, lines+arrows style, top/bottom text alignment */ --component-progressbar-wizard-lines-arrows-gap-size: 4px; /* progressbar field, wizard, lines+arrows style, item gap size */ --component-progressbar-wizard-lines-arrows-height: 10px; /* progressbar field, wizard, lines+arrows style, line height (normal) */ --component-progressbar-wizard-lines-background-color: #dbdbdb; /* progressbar field, wizard, line color */ --component-progressbar-wizard-lines-num-font-size: var(--component-font-size);/* progressbar field, lines+arrows style, number font size */ --component-progressbar-wizard-lines-num-font-weight: var(--component-font-weight);/* progressbar field, lines+arrows style, number font weight */ --component-progressbar-wizard-lines-num-font-style: var(--component-font-style);/* progressbar field, lines+arrows style, number font style */ --component-progressbar-wizard-lines-num-text-color: #666; /* progressbar field, lines+arrows style, number text color */ --component-progressbar-wizard-lines-num-line-height: 30px; /* progressbar field, lines+arrows style, number line height */ --component-progressbar-wizard-lines-num-background-color: var(--component-progressbar-wizard-background-color);/* progressbar field, lines+arrows style, number background color */ --component-progressbar-wizard-lines-num-border-radius: 17px; /* progressbar field, lines+arrows style, number border radius */ --component-progressbar-wizard-lines-num-border-size: var(--component-border-size);/* progressbar field, lines+arrows style, number border size */ --component-progressbar-wizard-lines-num-border-color: var(--component-border-color);/* progressbar field, lines+arrows style, number border color */ --component-progressbar-wizard-lines-num-width: 34px; /* progressbar field, wizard, lines+arrows style, number width */ --component-progressbar-wizard-lines-num-height: 34px; /* progressbar field, wizard, lines+arrows style, number height */ --component-progressbar-wizard-lines-text-top-margin: 20px; /* progressbar field, wizard, lines+arrows style, top text bottom(!) margin */ --component-progressbar-wizard-lines-text-bottom-margin:20px; /* progressbar field, wizard, lines+arrows style, bottom text top(!) margin */ --component-progressbar-wizard-lines-arrows-active-height: var(--component-progressbar-wizard-lines-arrows-height);/* progressbar field, wizard, lines+arrows style, item height (active item) */ --component-progressbar-wizard-lines-active-background-color: #1CB53F;/* progressbar field, wizard, active item background color */ --component-progressbar-wizard-lines-active-num-font-size: var(--component-font-size);/* progressbar field, wizard, lines+arrows style, active item, inside number font size */ --component-progressbar-wizard-lines-active-num-font-weight: var(--component-font-weight);/* progressbar field, wizard, lines+arrows style, active item, inside number font weight */ --component-progressbar-wizard-lines-active-num-font-style: var(--component-font-style);/* progressbar field, wizard, lines+arrows style, active item, inside number font style */ --component-progressbar-wizard-lines-active-num-text-color: white;/* progressbar field, wizard, lines+arrows style, active item, inside number text color */ --component-progressbar-wizard-lines-active-num-background-color: #1CB53F;/* progressbar field, wizard, lines+arrows style, active item, inside number background color */ --component-progressbar-wizard-lines-active-num-border-color: white; /* progressbar field, wizard, lines+arrows style, active item, inside number border color */ --component-progressbar-wizard-lines-arrows-done-height: var(--component-progressbar-wizard-lines-arrows-height);/* progressbar field, wizard, lines+arrows style, item height (done item) */ --component-progressbar-wizard-lines-done-background-color: #002D72;/* progressbar field, wizard, done item background color */ --component-progressbar-wizard-lines-done-num-font-size: var(--component-font-size);/* progressbar field, wizard, lines+arrows style, done item, inside number font size */ --component-progressbar-wizard-lines-done-num-font-weight: var(--component-font-weight);/* progressbar field, wizard, lines+arrows style, done item, inside number font weight */ --component-progressbar-wizard-lines-done-num-font-style: var(--component-font-style);/* progressbar field, wizard, lines+arrows style, done item, inside number font style */ --component-progressbar-wizard-lines-done-num-text-color: white;/* progressbar field, wizard, lines+arrows style, done item, inside number text color */ --component-progressbar-wizard-lines-done-num-background-color: #002D72;/* progressbar field, wizard, lines+arrows style, done item, inside number background color */ --component-progressbar-wizard-lines-done-num-border-color: var(--component-border-color);/* progressbar field, wizard, lines+arrows style, done item, inside number border color */ /* progressbar-field: wizard style: lines only */ --component-progressbar-wizard-lines-text-align: center; /* progressbar field, wizard, lines only style, top/bottom text alignment */ --component-progressbar-wizard-lines-gap-size: 1px; /* progressbar field, wizard, lines only style, item gap size */ --component-progressbar-wizard-lines-height: 6px; /* progressbar field, wizard, lines only style, line height (normal) */ --component-progressbar-wizard-lines-active-height: var(--component-progressbar-wizard-lines-height);/* progressbar field, wizard, lines only style, item height (active item) */ --component-progressbar-wizard-lines-done-height: var(--component-progressbar-wizard-lines-height);/* progressbar field, wizard, lines only style, item height (done item) */ /* progressbar-field: round */ --component-progressbar-round-diameter: 45px; /* progressbar field round diameter */ --component-progressbar-round-ring-size: 20px; /* progressbar field round progress ring size */ --component-progressbar-round-background-color: var(--component-progressbar-background-color);/* progressbar field round inner background color */ --component-progressbar-round-ring-background-color: #e0e0e0;/* progressbar field round ring background color */ --component-progressbar-round-padding-top: var(--component-progressbar-padding-top); /* progressbar field round padding, top */ --component-progressbar-round-padding-right: var(--component-progressbar-padding-right); /* progressbar field round padding, right */ --component-progressbar-round-padding-bottom: var(--component-progressbar-padding-bottom);/* progressbar field round padding, bottom */ --component-progressbar-round-padding-left: var(--component-progressbar-padding-left); /* progressbar field round padding, left */ --component-progressbar-round-font: var(--component-progressbar-font);/* progressbar field round font family */ --component-progressbar-round-font-size: 9px; /* progressbar field round font size */ --component-progressbar-round-font-weight: var(--component-progressbar-font-weight);/* progressbar field round font weight */ --component-progressbar-round-font-style: var(--component-progressbar-font-style);/* progressbar field round font style */ --component-progressbar-round-text-color: var(--component-progressbar-text-color);/* progressbar field round text color */ --component-progressbar-round-info-top-font: var(--component-progressbar-info-top-font);/* progressbar field round top text font family */ --component-progressbar-round-info-top-font-size: 12px;/* progressbar field round top text font size */ --component-progressbar-round-info-top-font-weight: var(--component-progressbar-info-top-font-weight);/* progressbar field round top text font weight */ --component-progressbar-round-info-top-font-style: var(--component-progressbar-info-top-font-style);/* progressbar field round top text font style */ --component-progressbar-round-info-top-text-color: var(--component-progressbar-info-top-text-color);/* progressbar field round top text color */ --component-progressbar-round-info-top-line-height: var(--component-progressbar-info-top-line-height);/* progressbar field round top text line height */ --component-progressbar-round-info-top-margin: 5px; /* progressbar field top text bottom(!) margin */ --component-progressbar-round-info-bottom-font: var(--component-progressbar-round-info-top-font);/* progressbar field round bottom text font family */ --component-progressbar-round-info-bottom-font-size: var(--component-progressbar-round-info-top-font-size);/* progressbar field round bottom text font size */ --component-progressbar-round-info-bottom-font-weight: var(--component-progressbar-round-info-top-font-weight);/* progressbar field bottom round text font weight */ --component-progressbar-round-info-bottom-font-style: var(--component-progressbar-round-info-top-font-style);/* progressbar field round bottom text font style */ --component-progressbar-round-info-bottom-text-color: var(--component-progressbar-round-info-top-text-color);/* progressbar field round bottom text color */ --component-progressbar-round-info-bottom-line-height: var(--component-progressbar-round-info-top-line-height);/* progressbar field bottom round text line height */ --component-progressbar-round-info-bottom-margin: var(--component-progressbar-round-info-top-margin); /* progressbar field bottom text top(!) margin */ /* file select field */ --component-file-select-item-align: var(--component-item-align);/* file-select field vertical alignment (align-self) */ --component-file-select-margin: var(--component-margin);/* file-select field margin */ --component-file-select-height: 45.5px; /* file-select content min. height */ --component-file-select-max-height: 150px; /* file-select content max. height */ --component-file-select-padding: var(--component-padding);/* file-select field padding */ --component-file-select-font: var(--component-font);/* file-select field font family */ --component-file-select-font-size: var(--component-font-size);/* file-select field font size */ --component-file-select-font-weight: var(--component-font-weight);/* file-select field font weight */ --component-file-select-font-style: var(--component-font-style);/* file-select field font style */ --component-file-select-line-height: var(--component-line-height);/* file-select field line height */ --component-file-select-text-color: var(--component-text-color);/* file-select field text color */ --component-file-select-background-color: var(--component-background-color);/* file-select field background color */ --component-file-select-shadow: var(--component-shadow);/* file-select field box shadow */ --component-file-select-border-radius: var(--component-border-radius);/* file-select field border radius */ --component-file-select-border-size: var(--component-border-size);/* file-select field border size */ --component-file-select-border-color: var(--component-border-color);/* file-select field border color */ --component-file-select-outline-size: var(--component-outline-size);/* file-select field outline size */ --component-file-select-outline-color: var(--component-outline-color);/* file-select field outline color */ --component-file-select-outline-offset: var(--component-outline-offset);/* file-select field outline offset */ --component-file-select-placeholder-font: var(--component-placeholder-font);/* file-select field placeholder font */ --component-file-select-placeholder-font-size: var(--component-placeholder-font-size);/* file-select field placeholder font size */ --component-file-select-placeholder-font-weight:var(--component-placeholder-font-weight);/* file-select field placeholder font weight */ --component-file-select-placeholder-color: var(--component-placeholder-color);/* file-select field placeholder color */ --component-file-select-error-color: var(--error-msg-color);/* file-select field error text color */ --component-file-select-important-font-weight: var(--component-important-font-weight);/* important: file-select field font weight */ --component-file-select-important-font-style: var(--component-important-font-style);/* important: file-select field font style */ --component-file-select-important-text-color: var(--component-important-text-color);/* important: file-select field text color */ --component-file-select-important-background-color: var(--component-important-background-color);/* important: file-select field background color */ --component-file-select-important-shadow: var(--component-important-shadow);/* important: file-select field box shadow */ --component-file-select-important-border-size: var(--component-important-border-size);/* important: file-select field border size */ --component-file-select-important-border-color: var(--component-important-border-color);/* important: file-select field border color */ --component-file-select-important-outline-size: var(--component-important-outline-size);/* important: file-select field outline size */ --component-file-select-important-outline-color:var(--component-important-outline-color);/* important: file-select field outline color */ --component-file-select-important-outline-offset:var(--component-important-outline-offset);/* important: file-select field outline offset */ --component-file-select-important-placeholder-font-weight:var(--component-important-placeholder-font-weight);/* file-select field placeholder font weight */ --component-file-select-important-placeholder-font-size:var(--component-important-placeholder-font-size);/* file-select field placeholder font size */ --component-file-select-important-placeholder-color:var(--component-important-placeholder-color);/* file-select field placeholder color */ --component-file-select-required-font-weight: var(--component-required-font-weight);/* required: file-select field font weight */ --component-file-select-required-font-style: var(--component-required-font-style);/* required: file-select field font style */ --component-file-select-required-text-color: var(--component-required-text-color);/* required: file-select field text color */ --component-file-select-required-background-color:var(--component-required-background-color);/* required: file-select field background color */ --component-file-select-required-shadow: var(--component-required-shadow);/* required: file-select field box shadow */ --component-file-select-required-border-size: var(--component-required-border-size);/* required: file-select field border size */ --component-file-select-required-border-color: var(--component-required-border-color);/* required: file-select field border color */ --component-file-select-required-outline-size: var(--component-required-outline-size);/* required: file-select field outline size */ --component-file-select-required-outline-color: var(--component-required-outline-color);/* required: file-select field outline color */ --component-file-select-required-outline-offset:var(--component-required-outline-offset);/* required: file-select field outline offset */ --component-file-select-required-placeholder-font-weight:var(--component-required-placeholder-font-weight);/* file-select field placeholder font-weight */ --component-file-select-required-placeholder-font-size:var(--component-required-placeholder-font-size);/* file-select field placeholder font size */ --component-file-select-required-placeholder-color: var(--component-required-placeholder-color);/* file-select field placeholder color */ --component-file-select-empty-font-weight: var(--component-empty-font-weight);/* empty: file-select field font weight */ --component-file-select-empty-font-style: var(--component-empty-font-style);/* empty: file-select field font style */ --component-file-select-empty-text-color: var(--component-empty-text-color);/* empty: file-select field text color */ --component-file-select-empty-background-color: var(--component-empty-background-color);/* empty: file-select field background color */ --component-file-select-empty-shadow: var(--component-empty-shadow);/* empty: file-select field box shadow */ --component-file-select-empty-border-size: var(--component-empty-border-size);/* empty: file-select field border size */ --component-file-select-empty-border-color: var(--component-empty-border-color);/* empty: file-select field border color */ --component-file-select-empty-outline-size: var(--component-empty-outline-size);/* empty: file-select field outline size */ --component-file-select-empty-outline-color: var(--component-empty-outline-color);/* empty: file-select field outline color */ --component-file-select-empty-outline-offset: var(--component-empty-outline-offset);/* empty: file-select field outline offset */ --component-file-select-empty-placeholder-font-weight:var(--component-empty-placeholder-font-weight);/* file-select field placeholder font-weight */ --component-file-select-empty-placeholder-font-size:var(--component-empty-placeholder-font-size);/* file-select field placeholder font size */ --component-file-select-empty-placeholder-color:var(--component-empty-placeholder-color);/* file-select field placeholder color */ --component-file-select-invalid-font-weight: var(--component-invalid-font-weight);/* invalid: file-select field font weight */ --component-file-select-invalid-font-style: var(--component-invalid-font-style);/* invalid: file-select field font style */ --component-file-select-invalid-text-color: var(--component-invalid-text-color);/* invalid: file-select field text color */ --component-file-select-invalid-background-color:var(--component-invalid-background-color);/* invalid: file-select field background color */ --component-file-select-invalid-shadow: var(--component-invalid-shadow);/* invalid: file-select field box shadow */ --component-file-select-invalid-border-size: var(--component-invalid-border-size);/* invalid: file-select field border size */ --component-file-select-invalid-border-color: var(--component-invalid-border-color);/* invalid: file-select field border color */ --component-file-select-invalid-outline-size: var(--component-invalid-outline-size);/* invalid: file-select field outline size */ --component-file-select-invalid-outline-color: var(--component-invalid-outline-color);/* invalid: file-select field outline color */ --component-file-select-invalid-outline-offset: var(--component-invalid-outline-offset);/* invalid: file-select field outline offset */ --component-file-select-invalid-placeholder-font-weight:var(--component-invalid-placeholder-font-weight);/* file-select field placeholder font-weight */ --component-file-select-invalid-placeholder-font-size:var(--component-invalid-placeholder-font-size);/* file-select field placeholder font size */ --component-file-select-invalid-placeholder-color:var(--component-invalid-placeholder-color);/* file-select field placeholder color */ --component-file-select-focus-font-weight: var(--component-focus-font-weight);/* focus: file-select field font weight */ --component-file-select-focus-font-style: var(--component-focus-font-style);/* focus: file-select field font style */ --component-file-select-focus-text-color: var(--component-focus-text-color);/* focus: file-select field text color */ --component-file-select-focus-background-color: var(--component-focus-background-color);/* focus: file-select field background color */ --component-file-select-focus-shadow: var(--component-focus-shadow);/* focus: file-select field box shadow */ --component-file-select-focus-border-size: var(--component-focus-border-size);/* focus: file-select field border size */ --component-file-select-focus-border-color: var(--component-focus-border-color);/* focus: file-select field border color */ --component-file-select-focus-outline-size: var(--component-focus-outline-size);/* focus: file-select field outline size */ --component-file-select-focus-outline-color: var(--component-focus-outline-color);/* focus: file-select field outline color */ --component-file-select-focus-outline-offset: var(--component-focus-outline-offset);/* focus: file-select field outline offset */ --component-file-select-focus-placeholder-font-weight:var(--component-focus-placeholder-font-weight);/* file-select field placeholder font-weight */ --component-file-select-focus-placeholder-font-size:var(--component-focus-placeholder-font-size);/* file-select field placeholder font size */ --component-file-select-focus-placeholder-color:var(--component-focus-placeholder-color);/* file-select field placeholder color */ --component-file-select-disabled-font-weight: var(--component-disabled-font-weight);/* disabled: file-select field font weight */ --component-file-select-disabled-font-style: var(--component-disabled-font-style);/* disabled: file-select field font style */ --component-file-select-disabled-text-color: var(--component-disabled-text-color);/* disabled: file-select field text color */ --component-file-select-disabled-background-color:var(--component-disabled-background-color);/* disabled: file-select field background color */ --component-file-select-disabled-shadow: var(--component-disabled-shadow);/* disabled: file-select field box shadow */ --component-file-select-disabled-border-size: var(--component-disabled-border-size);/* disabled: file-select field border size */ --component-file-select-disabled-border-color: var(--component-disabled-border-color);/* disabled: file-select field border color */ --component-file-select-disabled-outline-size: var(--component-disabled-outline-size);/* disabled: file-select field outline size */ --component-file-select-disabled-outline-color: var(--component-disabled-outline-color);/* disabled: file-select field outline color */ --component-file-select-disabled-outline-offset:var(--component-disabled-outline-offset);/* disabled: file-select field outline offset */ --component-file-select-disabled-placeholder-font-weight:var(--component-disabled-placeholder-font-weight);/* file-select field placeholder font-weight */ --component-file-select-disabled-placeholder-font-size:var(--component-disabled-placeholder-font-size);/* file-select field placeholder font size */ --component-file-select-disabled-placeholder-color: var(--component-disabled-placeholder-color);/* file-select field placeholder color */ --component-file-select-preview-img-margin: 0 20px 0 0; /* file-select field preview image margin */ --component-file-select-preview-img-border-size: 0px; /* file-select field preview image border size */ --component-file-select-preview-img-border-color:var(--component-border-color);/* file-select field preview image border color */ --component-file-select-preview-img-shadow: none; /* file-select field preview image box shadow */ --component-file-select-size-font-size: var(--component-file-select-font-size); /* file-select field preview file size font size */ --component-file-select-size-font-weight: var(--component-file-select-font-weight); /* file-select field preview file size font weight */ --component-file-select-size-font-style: italic; /* file-select field preview file size font style */ --component-file-select-size-text-color: var(--component-file-select-text-color); /* file-select field preview file size text color */ --component-file-select-size-padding: 10px; /* file-select field preview file size left padding */ --component-file-select-size-before: "("; /* file-select field preview file size before text */ --component-file-select-size-after: ")"; /* file-select field preview file size after text */ --component-file-select-dragover-text-color: var(--component-file-select-text-color);/* file-select field drag-over text color */ --component-file-select-dragover-background-color:var(--component-file-select-background-color);/* file-select field drag-over background color */ --component-file-select-dragover-shadow: var(--component-file-select-shadow);/* file-select field drag-over box shadow */ --component-file-select-dragover-border-radius: var(--component-file-select-border-radius);/* file-select field drag-over border radius */ --component-file-select-dragover-border-size: var(--component-file-select-border-size);/* file-select field drag-over border size */ --component-file-select-dragover-border-color: var(--component-file-select-border-color);/* file-select field drag-over border color */ --component-file-select-dragover-outline-size: 2px; /*var(--component-file-select-outline-size);*/ /* file-select field drag-over outline size */ --component-file-select-dragover-outline-color: #55c3f1;/*var(--component-file-select-outline-color);*//* file-select field drag-over outline color */ --component-file-select-dragover-outline-offset:var(--component-file-select-outline-offset);/* file-select field drag-over outline offset */ /* modal window */ --modal-window-backdrop-color: transparent;/* modal window backdrop background color */ --modal-window-lowest-backdrop-color: rgba(0,0,0,0.25);/* modal window lowest backdrop background color */ --modal-window-background-color: #e5e5e5; /* modal window background color */ --modal-window-border-color: #c4c4c4; /* modal window border color */ --modal-window-border-size: 1px; /* modal window border size */ --modal-window-border-radius: 8px; /* modal window border radius */ --modal-window-header-color: white; /* modal window header background color */ --modal-window-footer-color: white; /* modal window header background color */ --modal-window-body-color: transparent;/* modal window body background color */ --modal-window-shadow: 0px 1px 12px 1px rgba(0,0,0,0.2);/* modal window box shadow */ --modal-window-width-sm: 25vw; /* modal window width, small size */ --modal-window-width-sm2: 32vw; /* modal window width, small size 2 (larger) */ --modal-window-width-md: 40vw; /* modal window width, medium size */ --modal-window-width-md2: 55vw; /* modal window width, medium size 2 (larger) */ --modal-window-width-lg: 75vw; /* modal window width, large size */ --modal-window-width-lg2: 85vw; /* modal window width, large size 2 (larger) */ --modal-window-width-xl: 90vw; /* modal window width, extra large size */ --modal-window-min-width-sm: 500px; /* modal window min. width, small size */ --modal-window-min-width-sm2: 550px; /* modal window min. width, small size 2 (larger) */ --modal-window-min-width-md: 850px; /* modal window min. width, medium size */ --modal-window-min-width-md2: 900px; /* modal window min. width, medium size 2 (larger) */ --modal-window-min-width-lg: 1400px; /* modal window min. width, large size */ --modal-window-min-width-lg2: 1500px; /* modal window min. width, large size 2 (larger) */ --modal-window-min-width-xl: 1700px; /* modal window min. width, extra large size */ --modal-window-top: 35px; /* modal window top position */ --modal-window-max-height: 95vh; /* modal window max. outer height */ --modal-window-body-max-height: calc(95vh - 175px); /* modal window max. body height */ --modal-window-header-padding: 20px 35px 20px 35px;/* modal window header padding */ --modal-window-header-border-size: 1px; /* modal window header bottom border size */ --modal-window-header-border-color: #e5e5e5; /* modal window header bottom border color */ --modal-window-footer-padding: 20px 35px 20px 35px;/* modal window header padding */ --modal-window-footer-border-size: 1px; /* modal window footer top border size */ --modal-window-footer-border-color: #e5e5e5; /* modal window footer top border color */ --modal-window-body-padding: 20px 35px 20px 35px;/* modal window body padding */ --modal-window-title-font: inherit; /* modal window header title font family */ --modal-window-title-font-size: 26px; /* modal window header title font size */ --modal-window-title-font-weight: normal; /* modal window header title font weight */ --modal-window-title-font-style: normal; /* modal window header title font style */ --modal-window-title-line-height: inherit; /* modal window header title line height */ --modal-window-title-color: black; /* modal window header title color */ --modal-window-title-margin: 0; /* modal window header title bottom margin */ --modal-window-subtitle-font: inherit; /* modal window header subtitle font family */ --modal-window-subtitle-font-size: 18px; /* modal window header subtitle font size */ --modal-window-subtitle-font-weight: normal; /* modal window header subtitle font weight */ --modal-window-subtitle-font-style: normal; /* modal window header subtitle font style */ --modal-window-subtitle-line-height: inherit; /* modal window header subtitle line height */ --modal-window-subtitle-color: black; /* modal window header subtitle color */ --modal-window-subtitle-margin: 0; /* modal window header subtitle bottom margin */ --modal-window-button-gap: 20px; /* modal window button distance */ --modal-window-header-button-gap: 30px; /* modal window header button distance */ --modal-window-button-icon-width: 45px; /* modal window button icon width */ --modal-window-button-icon-height: 45px; /* modal window button icon height */ --modal-window-header-button-img-margin: 0 0 0 0; /* modal window header button image margin (icon top) */ --modal-window-header-button-padding: 0 0 0 0;/* modal window header button padding */ --modal-window-header-button-font: var(--component-button-font);/* modal window header button font family */ --modal-window-header-button-font-size: 20px; /* modal window header button font size */ --modal-window-header-button-font-weight: var(--component-button-font-weight);/* modal window header button font weight */ --modal-window-header-button-font-style: var(--component-button-font-style);/* modal window header button font style */ --modal-window-header-button-line-height: var(--component-button-line-height);/* modal window header button line height */ --modal-window-header-button-text-color: #666666; /* modal window header button text color */ --modal-window-header-button-background-color: transparent;/* modal window header button background color */ --modal-window-header-button-shadow: none; /* modal window header button box shadow */ --modal-window-header-button-border-radius: 0; /* modal window header button border radius */ --modal-window-header-button-border-size: 0; /* modal window header button border size */ --modal-window-header-button-border-color: var(--component-button-border-color);/* modal window header button border color */ --modal-window-header-button-outline-size: var(--component-button-outline-size);/* modal window header button outline size */ --modal-window-header-button-outline-color: var(--component-button-outline-color);/* modal window header button outline color */ --modal-window-header-button-outline-offset: var(--component-button-outline-offset);/* modal window header button outline offset */ --modal-window-header-button-focus-font-weight: var(--component-button-focus-font-weight);/* focus: modal window header button font weight */ --modal-window-header-button-focus-font-style: var(--component-button-focus-font-style);/* focus: modal window header button font style */ --modal-window-header-button-focus-text-color: black; /* focus: modal window header button text color */ --modal-window-header-button-focus-background-color: transparent;/* focus: modal window header button background color */ --modal-window-header-button-focus-shadow: none; /* focus: modal window header button box shadow */ --modal-window-header-button-focus-border-size: 0; /* focus: modal window header button border size */ --modal-window-header-button-focus-border-color: var(--component-button-focus-border-color);/* focus: modal window header button border color */ --modal-window-header-button-focus-outline-size: var(--component-button-focus-outline-size);/* focus: modal window header button outline size */ --modal-window-header-button-focus-outline-color: var(--component-button-focus-outline-color);/* focus: modal window header button outline color */ --modal-window-header-button-focus-outline-offset: var(--component-button-focus-outline-offset);/* focus: modal window header button outline offset */ --modal-window-header-button-hover-font-weight: var(--component-button-hover-font-weight);/* hover: modal window header button font weight */ --modal-window-header-button-hover-font-style: var(--component-button-hover-font-style);/* hover: modal window header button font style */ --modal-window-header-button-hover-text-color: black; /* hover: modal window header button text color */ --modal-window-header-button-hover-background-color: transparent;/* hover: modal window header button background color */ --modal-window-header-button-hover-shadow: none; /* hover: modal window header button box shadow */ --modal-window-header-button-hover-border-size: 0; /* hover: modal window header button border size */ --modal-window-header-button-hover-border-color: var(--component-button-hover-border-color);/* hover: modal window header button border color */ --modal-window-header-button-hover-outline-size: var(--component-button-hover-outline-size);/* hover: modal window header button outline size */ --modal-window-header-button-hover-outline-color: var(--component-button-hover-outline-color);/* hover: modal window header button outline color */ --modal-window-header-button-hover-outline-offset: var(--component-button-hover-outline-offset);/* hover: modal window header button outline offset */ --modal-window-header-button-active-font-weight: var(--component-button-active-font-weight);/* active: modal window header button font weight */ --modal-window-header-button-active-font-style: var(--component-button-active-font-style);/* active: modal window header button font style */ --modal-window-header-button-active-text-color: black; /* active: modal window header button text color */ --modal-window-header-button-active-background-color: transparent;/* active: modal window header button background color */ --modal-window-header-button-active-shadow: none; /* active: modal window header button box shadow */ --modal-window-header-button-active-border-size: 0; /* active: modal window header button border size */ --modal-window-header-button-active-border-color: var(--component-button-active-border-color);/* active: modal window header button border color */ --modal-window-header-button-active-outline-size: var(--component-button-active-outline-size);/* active: modal window header button outline size */ --modal-window-header-button-active-outline-color: var(--component-button-active-outline-color);/* active: modal window header button outline color */ --modal-window-header-button-active-outline-offset: var(--component-button-active-outline-offset);/* active: modal window header button outline offset */ --modal-window-header-button-active-offset-x: var(--component-button-active-offset-x);/* active: modal window header button offset x */ --modal-window-header-button-active-offset-y: var(--component-button-active-offset-y);/* active: modal window header button offset y */ /* message window */ --message-window-font: inherit; /* message window font family */ --message-window-font-size: inherit; /* message window font size */ --message-window-font-weight: inherit; /* message window font weight */ --message-window-font-style: inherit; /* message window font style */ --message-window-line-height: inherit; /* message window line height */ --message-window-color: inherit; /* message window text color */ --message-window-text-padding: 0 0 0 0; /* message window text padding */ --message-window-icon-width: auto; /* message window icon width */ --message-window-icon-font-size: 60px; /* message window icon font size */ --message-window-icon-font-weight: normal; /* message window icon font weight */ --message-window-icon-font-style: normal; /* message window icon font style */ --message-window-icon-padding: 0 20px 0 0; /* message window icon padding */ --message-window-icon-color: #002d72; /* message window icon color (info) */ --message-window-icon-color-error: #fd0100; /* message window icon color (error) */ --message-window-icon-color-question: var(--message-window-icon-color);/* message window icon color (question) */ /* security 2fa window */ --security-code-font-size: 30px; /* security 2fa code window font size */ /* layout-app */ --layout-app-header-height: inherit; /* layout app header height */ --layout-app-header-padding: 0 0 0 0; /* layout app header padding */ --layout-app-header-background-color: #e9e9e9; /* layout app header background color */ --layout-app-header-border: none; /* layout app header border */ --layout-app-header-top-height: inherit; /* layout app header top area height */ --layout-app-header-top-padding: 10px 50px 10px 50px;/* layout app header top area padding */ --layout-app-header-top-background-color: white; /* layout app header top background color */ --layout-app-header-top-border: none; /* layout app header top border */ --layout-app-header-top-align: center; /* layout app header top element alignment (align-items) */ --layout-app-header-tool-height: inherit; /* layout app header tool area height */ --layout-app-header-tool-padding: 10px 50px 0 50px;/* layout app header tool area padding */ --layout-app-header-tool-background-color: inherit; /* layout app header tool area background color */ --layout-app-header-tool-border: 1px solid #aaa; /* layout app header tool area border */ --layout-app-logo-width: inherit; /* layout app logo width */ --layout-app-logo-height: inherit; /* layout app logo height */ --layout-app-logo-background-color: inherit; /* layout app logo background color */ --layout-app-logo-border: none; /* layout app logo border */ --layout-app-main-menu-height: inherit; /* layout app main menu height */ --layout-app-main-menu-padding: 0 0 0 20px; /* layout app main menu padding */ --layout-app-main-menu-align: flex-start; /* layout app main menu flex align (justify-content) */ --layout-app-main-menu-background-color: inherit; /* layout app main menu background color */ --layout-app-main-menu-border: none; /* layout app main menu border */ --layout-app-user-menu-height: inherit; /* layout app user menu height */ --layout-app-user-menu-padding: 0 0 0 0; /* layout app user menu padding */ --layout-app-user-menu-align: flex-end; /* layout app user menu flex align (justify-content) */ --layout-app-user-menu-background-color: inherit; /* layout app user menu background color */ --layout-app-user-menu-border: none; /* layout app user menu border */ --layout-app-breadcrumb-font: inherit; /* layout app breadcrumb font family */ --layout-app-breadcrumb-font-size: 32px; /* layout app breadcrumb font size */ --layout-app-breadcrumb-font-weight: inherit; /* layout app breadcrumb font weight */ --layout-app-breadcrumb-font-style: inherit; /* layout app breadcrumb font style */ --layout-app-breadcrumb-line-height: inherit; /* layout app breadcrumb line height */ --layout-app-breadcrumb-color: inherit; /* layout app breadcrumb text color */ --layout-app-breadcrumb-height: inherit; /* layout app breadcrumb height */ --layout-app-breadcrumb-padding: 10px 50px 0 50px;/* layout app breadcrumb padding */ --layout-app-breadcrumb-align: flex-end; /* layout app breadcrumb flex align (justify-content) */ --layout-app-breadcrumb-background-color: #e9e9e9; /* layout app breadcrumb background color */ --layout-app-breadcrumb-border: none; /* layout app breadcrumb border */ --layout-app-toolbar-height: inherit; /* layout app toolbar height */ --layout-app-toolbar-padding: 0 0 0 0; /* layout app toolbar padding */ --layout-app-toolbar-align: flex-end; /* layout app toolbar flex align (justify-content) */ --layout-app-toolbar-background-color: inherit; /* layout app toolbar background color */ --layout-app-toolbar-border: none; /* layout app toolbar border */ --layout-app-status-icons-height: inherit; /* layout app status icons height */ --layout-app-status-icons-max-width: none; /* layout app status icons max width */ --layout-app-status-icons-padding: 0 0 0 0; /* layout app status icons padding */ --layout-app-status-icons-align: flex-end; /* layout app status icons flex align (justify-content) */ --layout-app-status-icons-top: 0; /* layout app status icons position (from top) */ --layout-app-status-icons-right: 0; /* layout app status icons position (from right) */ --layout-app-status-icons-background-color: inherit; /* layout app status icons background color */ --layout-app-status-icons-border: none; /* layout app status icons border */ --layout-app-body-padding: 0 0 0 0; /* layout app body padding */ --layout-app-body-background-color: inherit; /* layout app body background color */ --layout-app-body-border: none; /* layout app body border */ --layout-app-context-area-width: inherit; /* layout app context area width */ --layout-app-context-area-padding: 0 0 0 0; /* layout app context area padding */ --layout-app-context-area-background-color: #e9e9e9; /* layout app context area background color */ --layout-app-context-area-border: none; /* layout app context area border */ --layout-app-context-padding: 20px 10px 20px 10px;/* layout app context padding */ --layout-app-context-background-color: inherit; /* layout app context background color */ --layout-app-context-align: flex-end; /* layout app context flex align (justify-content) */ --layout-app-context-border: 1px solid #aaa; /* layout app context border */ --layout-app-context-footer-height: inherit; /* layout app context footer height */ --layout-app-context-footer-padding: 5px 5px 5px 10px;/* layout app context footer padding */ --layout-app-context-footer-background-color: var(--layout-app-main-background-color);/* layout app context footer background color */ --layout-app-context-footer-align: flex-start; /* layout app context footer flex align (justify-content) */ --layout-app-context-footer-border: none; /* layout app context footer border */ --layout-app-main-container-padding: 0 0 0 0; /* layout app main container padding */ --layout-app-main-container-background-color: #e9e9e9; /* layout app main container background color */ --layout-app-main-padding: 20px 50px 10px 50px;/* layout app main area padding */ --layout-app-main-background-color: #e9e9e9; /* layout app main area background color */ --layout-app-main-border: none; /* layout app main area border */ --layout-app-footer-height: inherit; /* layout app footer height */ --layout-app-footer-padding: 0 0 0 0; /* layout app footer padding */ --layout-app-footer-background-color: var(--layout-app-main-background-color);/* layout app footer background color */ --layout-app-footer-align: flex-start; /* layout app footer flex align (justify-content) */ --layout-app-footer-border: none; /* layout app footer border */ --layout-app-spacer-size: 15px; /* layout app spacer width/height */ /* horizontal line in dialogs */ --hr-color: inherit; /* horizontal line color */ --hr-size: 1px; /* horizontal height */ --hr-margin: 20px 0 30px 0;/* horizontal margin */ /* todo tooltip */ /* todo info-tag (for all components) */ } /* ---------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* global and basic settings */ /* Every component can have different modes (also multiple modes at once): - normal: normal mode (no extra css class) - important: component input is important ("soft" required, css class: "important") - required: component input is required by the user ("hard" required, attribute "required") - empty: component input is curently empty (css class: "empty") - invalid: component input is invalid (e.g. wrong format, too few characters, css class: "invalid") - focus: component has keyboard/input focus (css class: "focus") - disable: component is disabled for user input (attribute "disabled") The css styles are addded in a specific order so that modes with higher priority can override styles with lower prio: (lowest) (highest) normal -> important -> required -> empty -> invalid -> focus -> disabled */ .field-inner, .field-group-inner { flex: var(--component-inner-area-ratio) var(--component-inner-area-ratio) 0; font-family: var(--component-font); font-size: var(--component-font-size); font-weight: var(--component-font-weight); font-style: var(--component-font-style); line-height: var(--component-line-height); width: 100%; } /* label */ .group-label { flex: var(--component-label-area-ratio) var(--component-label-area-ratio) var(--component-label-area-base-width); font-family: var(--component-label-font); font-size: var(--component-label-font-size); font-weight: var(--component-label-font-weight); font-style: var(--component-label-font-style); text-decoration: var(--component-label-decoration); line-height: var(--component-label-line-height); color: var(--component-label-color); width: var(--component-label-area-size); margin: var(--component-label-margin); text-align: var(--component-label-textalign); align-self: var(--component-label-align); text-overflow: ellipsis; overflow: hidden; min-height: var(--component-label-line-height); } .label-top > .group-label { text-align: left; align-self: normal; overflow-y: visible; overflow-x: hidden; flex-basis: 100%; min-height: var(--component-label-top-height); margin: var(--component-label-top-margin); } .group-mainlabel { display: block; } .group-sublabel { display: block; font-size: var(--component-sublabel-font-size); font-weight: var(--component-sublabel-font-weight); font-style: var(--component-sublabel-font-style); text-decoration: var(--component-sublabel-decoration); line-height: var(--component-sublabel-line-height); color: var(--component-sublabel-color); } .label-small { font-size: var(--component-small-label-font-size); font-weight: var(--component-small-label-font-weight); font-style: var(--component-small-label-font-style); line-height: var(--component-small-label-line-height); color: var(--component-small-label-color); text-decoration: var(--component-small-label-decoration); } .important > .group-label { font-size: var(--component-important-label-font-size); font-weight: var(--component-important-label-font-weight); font-style: var(--component-important-label-font-style); text-decoration: var(--component-important-label-decoration); color: var(--component-important-label-color); } .important > .group-sublabel { font-size: var(--component-important-sublabel-font-size); font-weight: var(--component-important-sublabel-font-weight); font-style: var(--component-important-sublabel-font-style); text-decoration: var(--component-important-sublabel-decoration); color: var(--component-important-sublabel-color); } *[required] > .group-label { font-size: var(--component-required-label-font-size); font-weight: var(--component-required-label-font-weight); font-style: var(--component-required-label-font-style); text-decoration: var(--component-required-label-decoration); color: var(--component-required-label-color); } *[required] > .group-sublabel { font-size: var(--component-required-sublabel-font-size); font-weight: var(--component-required-sublabel-font-weight); font-style: var(--component-required-sublabel-font-style); text-decoration: var(--component-required-sublabel-decoration); color: var(--component-required-sublabel-color); } .empty > .group-label { font-size: var(--component-empty-label-font-size); font-weight: var(--component-empty-label-font-weight); font-style: var(--component-empty-label-font-style); text-decoration: var(--component-empty-label-decoration); color: var(--component-empty-label-color); } .empty > .group-sublabel { font-size: var(--component-empty-sublabel-font-size); font-weight: var(--component-empty-sublabel-font-weight); font-style: var(--component-empty-sublabel-font-style); text-decoration: var(--component-empty-sublabel-decoration); color: var(--component-empty-sublabel-color); } .invalid > .group-label { font-size: var(--component-invalid-label-font-size); font-weight: var(--component-invalid-label-font-weight); font-style: var(--component-invalid-label-font-style); text-decoration: var(--component-invalid-label-decoration); color: var(--component-invalid-label-color); } .invalid > .group-sublabel { font-size: var(--component-invalid-sublabel-font-size); font-weight: var(--component-invalid-sublabel-font-weight); font-style: var(--component-invalid-sublabel-font-style); text-decoration: var(--component-invalid-sublabel-decoration); color: var(--component-invalid-sublabel-color); } .focus > .group-label { font-size: var(--component-focus-label-font-size); font-weight: var(--component-focus-label-font-weight); font-style: var(--component-focus-label-font-style); text-decoration: var(--component-focus-label-decoration); color: var(--component-focus-label-color); } .focus > .group-sublabel { font-size: var(--component-focus-sublabel-font-size); font-weight: var(--component-focus-sublabel-font-weight); font-style: var(--component-focus-sublabel-font-style); text-decoration: var(--component-focus-sublabel-decoration); color: var(--component-focus-sublabel-color); } *[disabled] > .group-label { font-size: var(--component-disabled-label-font-size); font-weight: var(--component-disabled-label-font-weight); font-style: var(--component-disabled-label-font-style); text-decoration: var(--component-disabled-label-decoration); color: var(--component-disabled-label-color); } *[disabled] > .group-sublabel { font-size: var(--component-disabled-sublabel-font-size); font-weight: var(--component-disabled-sublabel-font-weight); font-style: var(--component-disabled-sublabel-font-style); text-decoration: var(--component-disabled-sublabel-decoration); color: var(--component-disabled-sublabel-color); } /* mobile label */ .mobile-group-label { display: none; flex: var(--component-mobile-label-area-ratio) var(--component-mobile-label-area-ratio) var(--component-mobile-label-area-base-width); font-family: var(--component-mobile-label-font); font-size: var(--component-mobile-label-font-size); font-weight: var(--component-mobile-label-font-weight); font-style: var(--component-mobile-label-font-style); text-decoration: var(--component-mobile-label-decoration); line-height: var(--component-mobile-label-line-height); color: var(--component-mobile-label-color); width: var(--component-mobile-label-area-size); margin: var(--component-mobile-label-margin); text-align: var(--component-mobile-label-textalign); align-self: var(--component-mobile-label-align); text-overflow: ellipsis; overflow: hidden; } .label-top > .mobile-group-label { flex-basis: 100%; } .mobile-group-sublabel { font-size: var(--component-mobile-sublabel-font-size); font-weight: var(--component-mobile-sublabel-font-weight); font-style: var(--component-mobile-sublabel-font-style); text-decoration: var(--component-mobile-sublabel-decoration); line-height: var(--component-mobile-sublabel-line-height); color: var(--component-mobile-sublabel-color); } .mobile-group-mainlabel {} .mobile-label-small { font-size: var(--component-mobile-small-label-font-size); font-weight: var(--component-mobile-small-label-font-weight); font-style: var(--component-mobile-small-label-font-style); line-height: var(--component-mobile-small-label-line-height); color: var(--component-mobile-small-label-color); text-decoration: var(--component-mobile-small-label-decoration); } .important > .mobile-group-label { font-size: var(--component-important-mobile-label-font-size); font-weight: var(--component-important-mobile-label-font-weight); font-style: var(--component-important-mobile-label-font-style); text-decoration: var(--component-important-mobile-label-decoration); color: var(--component-important-mobile-label-color); } .important > .mobile-group-sublabel { font-size: var(--component-important-mobile-sublabel-font-size); font-weight: var(--component-important-mobile-sublabel-font-weight); font-style: var(--component-important-mobile-sublabel-font-style); text-decoration: var(--component-important-mobile-sublabel-decoration); color: var(--component-important-mobile-sublabel-color); } *[required] > .mobile-group-label { font-size: var(--component-required-mobile-label-font-size); font-weight: var(--component-required-mobile-label-font-weight); font-style: var(--component-required-mobile-label-font-style); text-decoration: var(--component-required-mobile-label-decoration); color: var(--component-required-mobile-label-color); } *[required] > .mobile-group-sublabel { font-size: var(--component-required-mobile-sublabel-font-size); font-weight: var(--component-required-mobile-sublabel-font-weight); font-style: var(--component-required-mobile-sublabel-font-style); text-decoration: var(--component-required-mobile-sublabel-decoration); color: var(--component-required-mobile-sublabel-color); } .empty > .mobile-group-label { font-size: var(--component-empty-mobile-label-font-size); font-weight: var(--component-empty-mobile-label-font-weight); font-style: var(--component-empty-mobile-label-font-style); text-decoration: var(--component-empty-mobile-label-decoration); color: var(--component-empty-mobile-label-color); } .empty > .mobile-group-sublabel { font-size: var(--component-empty-mobile-sublabel-font-size); font-weight: var(--component-empty-mobile-sublabel-font-weight); font-style: var(--component-empty-mobile-sublabel-font-style); text-decoration: var(--component-empty-mobile-sublabel-decoration); color: var(--component-empty-mobile-sublabel-color); } .invalid > .mobile-group-label { font-size: var(--component-invalid-mobile-label-font-size); font-weight: var(--component-invalid-mobile-label-font-weight); font-style: var(--component-invalid-mobile-label-font-style); text-decoration: var(--component-invalid-mobile-label-decoration); color: var(--component-invalid-mobile-label-color); } .invalid > .mobile-group-sublabel { font-size: var(--component-invalid-mobile-sublabel-font-size); font-weight: var(--component-invalid-mobile-sublabel-font-weight); font-style: var(--component-invalid-mobile-sublabel-font-style); text-decoration: var(--component-invalid-mobile-sublabel-decoration); color: var(--component-invalid-mobile-sublabel-color); } .focus > .mobile-group-label { font-size: var(--component-focus-mobile-label-font-size); font-weight: var(--component-focus-mobile-label-font-weight); font-style: var(--component-focus-mobile-label-font-style); text-decoration: var(--component-focus-mobile-label-decoration); color: var(--component-focus-mobile-label-color); } .focus > .mobile-group-sublabel { font-size: var(--component-focus-mobile-sublabel-font-size); font-weight: var(--component-focus-mobile-sublabel-font-weight); font-style: var(--component-focus-mobile-sublabel-font-style); text-decoration: var(--component-focus-mobile-sublabel-decoration); color: var(--component-focus-mobile-sublabel-color); } *[disabled] > .mobile-group-label { font-size: var(--component-disabled-mobile-label-font-size); font-weight: var(--component-disabled-mobile-label-font-weight); font-style: var(--component-disabled-mobile-label-font-style); text-decoration: var(--component-disabled-mobile-label-decoration); color: var(--component-disabled-mobile-label-color); } *[disabled] > .mobile-group-sublabel { font-size: var(--component-disabled-mobile-sublabel-font-size); font-weight: var(--component-disabled-mobile-sublabel-font-weight); font-style: var(--component-disabled-mobile-sublabel-font-style); text-decoration: var(--component-disabled-mobile-sublabel-decoration); color: var(--component-disabled-mobile-sublabel-color); } /* required marker */ .input-field[required] .group-mainlabel:after, .radio-field[required] .group-mainlabel:after, .checkbox-field[required] .group-mainlabel:after, .date-field[required] .group-mainlabel:after, .select-field[required] .group-mainlabel:after, .rating-field[required] .group-mainlabel:after, .progressbar-field[required] .group-mainlabel:after, .field-group[required] .group-mainlabel:after, .list-field[required] .group-mainlabel:after, .signature-field[required] .group-mainlabel:after, .number-plate-field[required] .group-mainlabel:after, .file-select-field[required] .group-mainlabel:after, .input-field[required] .mobile-group-mainlabel:after, .radio-field[required] .mobile-group-mainlabel:after, .checkbox-field[required] .mobile-group-mainlabel:after, .date-field[required] .mobile-group-mainlabel:after, .select-field[required] .mobile-group-mainlabel:after, .rating-field[required] .mobile-group-mainlabel:after, .progressbar-field[required] .mobile-group-mainlabel:after, .field-group[required] .mobile-group-mainlabel:after, .list-field[required] .mobile-group-mainlabel:after, .signature-field[required] .mobile-group-mainlabel:after, .number-plate-field[required] .mobile-group-mainlabel:after, .file-select-field[required] .mobile-group-mainlabel:after { content: "*"; display: inline-block; font-size: var(--component-required-marker-font-size); font-weight: var(--component-required-marker-font-weight); position: relative; top: var(--component-required-marker-offset); margin: var(--component-required-marker-margin); } .no-required-marker .input-field[required] .group-mainlabel:after, .no-required-marker .radio-field[required] .group-mainlabel:after, .no-required-marker .checkbox-field[required] .group-mainlabel:after, .no-required-marker .date-field[required] .group-mainlabel:after, .no-required-marker .select-field[required] .group-mainlabel:after, .no-required-marker .rating-field[required] .group-mainlabel:after, .no-required-marker .progressbar-field[required] .group-mainlabel:after, .no-required-marker .field-group[required] .group-mainlabel:after, .no-required-marker .list-field[required] .group-mainlabel:after, .no-required-marker .signature-field[required] .group-mainlabel:after, .no-required-marker .number-plate-field[required] .group-mainlabel:after, .no-required-marker .file-select-field[required] .group-mainlabel:after, .no-required-marker .input-field[required] .mobile-group-mainlabel:after, .no-required-marker .radio-field[required] .mobile-group-mainlabel:after, .no-required-marker .checkbox-field[required] .mobile-group-mainlabel:after, .no-required-marker .date-field[required] .mobile-group-mainlabel:after, .no-required-marker .select-field[required] .mobile-group-mainlabel:after, .no-required-marker .rating-field[required] .mobile-group-mainlabel:after, .no-required-marker .progressbar-field[required] .mobile-group-mainlabel:after, .no-required-marker .field-group[required] .mobile-group-mainlabel:after, .no-required-marker .list-field[required] .mobile-group-mainlabel:after, .no-required-marker .signature-field[required] .mobile-group-mainlabel:after, .no-required-marker .number-plate-field[required] .mobile-group-mainlabel:after, .no-required-marker .file-select-field[required] .mobile-group-mainlabel:after { content: ""; } .no-required-marker.input-field[required] .group-mainlabel:after, .no-required-marker.radio-field[required] .group-mainlabel:after, .no-required-marker.checkbox-field[required] .group-mainlabel:after, .no-required-marker.date-field[required] .group-mainlabel:after, .no-required-marker.select-field[required] .group-mainlabel:after, .no-required-marker.rating-field[required] .group-mainlabel:after, .no-required-marker.progressbar-field[required] .group-mainlabel:after, .no-required-marker.field-group[required] .group-mainlabel:after, .no-required-marker.list-field[required] .group-mainlabel:after, .no-required-marker.signature-field[required] .group-mainlabel:after, .no-required-marker.number-plate-field[required] .group-mainlabel:after, .no-required-marker.file-select-field[required] .group-mainlabel:after, .no-required-marker.input-field[required] .mobile-group-mainlabel:after, .no-required-marker.radio-field[required] .mobile-group-mainlabel:after, .no-required-marker.checkbox-field[required] .mobile-group-mainlabel:after, .no-required-marker.date-field[required] .mobile-group-mainlabel:after, .no-required-marker.select-field[required] .mobile-group-mainlabel:after, .no-required-marker.rating-field[required] .mobile-group-mainlabel:after, .no-required-marker.progressbar-field[required] .mobile-group-mainlabel:after, .no-required-marker.field-group[required] .mobile-group-mainlabel:after, .no-required-marker.list-field[required] .mobile-group-mainlabel:after, .no-required-marker.signature-field[required] .mobile-group-mainlabel:after, .no-required-marker.number-plate-field[required] .mobile-group-mainlabel:after, .no-required-marker.file-select-field[required] .mobile-group-mainlabel:after { content: ""; } /* error message */ .error-msg { color: var(--error-msg-color); } .error-msg-hidden { display: none; } .error-text .field-inner span { color: var(--error-msg-color); } .send-error { color: var(--error-msg-color); } /* ---------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* dialog row/col layout */ .dialog-row { display: flex; flex-direction: row; flex-wrap: wrap; column-gap: var(--component-gap); margin-bottom: var(--component-row-margin); } .dialog-row:last-child { margin-bottom: 0; } .dialog-col { flex: 1 1 0; min-width: var(--component-min-col-width); max-width: 100%; } .dialog-col.align-right { text-align: right; } .dialog-row.max-height, .dialog-col.max-height { height: 100%; } /* horizontal line in dialogs */ hr.dialog, .dialog-row hr, .dialog-col hr, .layout-main hr, .modal-window-body hr { background-color: var(--hr-color); height: var(--hr-size); margin: var(--hr-margin); } /* paragraphs in dialogs */ .layout-main p, .modal-window-body p { margin-bottom: var(--component-dialog-paragraph-margin); } /* h1,... */ h1.dialog, .dialog-row h1, .dialog-col h1, .layout-main h1, .modal-window-body h1 { max-width: none; margin: 0 0 var(--component-h1-margin) 0; padding: 0; background-color: transparent; hyphens: none; font-size: var(--component-h1-font-size); font-weight: var(--component-h1-font-weight); color: var(--component-h1-color); line-height: var(--component-h1-line-height); font-style: var(--component-h1-style); text-transform: var(--component-h1-text-transform); text-align: var(--component-h1-align); margin-bottom: var(--component-h1-margin); } h2.dialog, .dialog-row h2, .dialog-col h2, .layout-main h2, .modal-window-body h2 { max-width: none; margin: 0 0 var(--component-h2-margin) 0; padding: 0; background-color: transparent; hyphens: none; font-size: var(--component-h2-font-size); font-weight: var(--component-h2-font-weight); color: var(--component-h2-color); line-height: var(--component-h2-line-height); font-style: var(--component-h2-style); text-transform: var(--component-h2-text-transform); text-align: var(--component-h2-align); margin-bottom: var(--component-h2-margin); } h3.dialog, .dialog-row h3, .dialog-col h3, .layout-main h3, .modal-window-body h3 { max-width: none; margin: 0 0 var(--component-h3-margin) 0; padding: 0; background-color: transparent; hyphens: none; font-size: var(--component-h3-font-size); font-weight: var(--component-h3-font-weight); color: var(--component-h3-color); line-height: var(--component-h3-line-height); font-style: var(--component-h3-style); text-transform: var(--component-h3-text-transform); text-align: var(--component-h3-align); margin-bottom: var(--component-h3-margin); } h4.dialog, .dialog-row h4, .dialog-col h4, .layout-main h4, .modal-window-body h4 { max-width: none; margin: 0 0 var(--component-h4-margin) 0; padding: 0; background-color: transparent; hyphens: none; font-size: var(--component-h4-font-size); font-weight: var(--component-h4-font-weight); color: var(--component-h4-color); line-height: var(--component-h4-line-height); font-style: var(--component-h4-style); text-transform: var(--component-h4-text-transform); text-align: var(--component-h4-align); margin-bottom: var(--component-h4-margin); } /* ---------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* field group: field-group.field-group.[multiline].[important].[center-items].[group-border].[group-select-buttons] | +--label.group-label.[label-small] | | | +--span.group-mainlabel | | | +--span.group-sublabel | +--label.mobile-group-label.[label-small] | | | +--span.mobile-group-mainlabel | | | +--span.mobile-group-sublabel | +--div.field-group-inner | | | +--{sub elements} | +--div.select-buttons | +--button.group-select-btn | | | +--span | +--button.group-unselect-btn | | | +--span | +--button.group-invert-btn | +--span */ /*normal -> important -> required -> empty -> invalid -> focus -> disabled*/ .field-group { display: flex; flex-direction: var(--component-label-pos); margin: var(--component-margin); } .field-group.important {} /* todo */ .field-group.multiline { align-content: start; } .field-group.multiline .group-label { align-self: start; } .field-group.inline .field-group-inner, .field-group.center-items .field-group-inner { display: flex; flex-direction: row; column-gap: var(--component-inline-gap); } .dialog-col.align-right .field-group.inline .field-group-inner { justify-content: flex-end; } .field-group .field-group-inner > * { margin-bottom: 0; flex-grow: 1; } .field-group.center-items .field-group-inner { justify-content: center; } .field-group.group-border .field-group-inner { border: var(--component-field-group-border-size) solid var(--component-field-group-border-color); border-radius: var(--component-field-group-border-radius); padding: var(--component-field-group-border-padding); } .field-group.group-select-buttons .field-group-inner { position: relative; } .field-group .select-buttons { position: absolute; left: var(--component-field-group-button-offset-left); bottom: var(--component-field-group-button-offset-bottom); } .field-group .select-buttons button { width: var(--component-field-group-button-size); height: var(--component-field-group-button-size); padding: 0; margin-right: var(--component-field-group-button-gap); cursor: pointer; } .field-group .select-buttons button span { background-repeat: no-repeat; background-position: center; display: block; width: 100%; height: 100%; } .field-group .select-buttons .select-icon { background-image: url(../lib/field_group/select.svg); } .field-group .select-buttons .unselect-icon { background-image: url(../lib/field_group/unselect.svg); } .field-group .select-buttons .invert-icon { background-image: url(../lib/field_group/invert.svg); } /* ---------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* buttons button-field.button-field.[inline].[primary].[icon].[icon-only].[important].[focus].[context-button].[function-button].[sub-button] | +--label.group-label.[label-small] | | | +--span.group-mainlabel | | | +--span.group-sublabel | +--label.mobile-group-label.[label-small] | | | +--span.mobile-group-mainlabel | | | +--span.mobile-group-sublabel | +--div.field-inner | +--button.[button-icon-left] | +--span.button-icon | | | +--img | +--span.button-text */ /*normal -> important -> required -> empty -> invalid -> focus -> disabled*/ /*todo*/ .button-field { display: flex; flex-direction: var(--component-label-pos); margin: var(--component-button-margin); } .button-field.important {} /* todo */ .button-field.label-top { flex-direction: column; } .button-field div.field-inner { align-self: var(--component-button-item-align); } .button-field.label-top div.field-inner { align-self: normal; } .button-field div button { -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer; padding: var(--component-button-padding); font-family: var(--component-button-font); font-size: var(--component-button-font-size); font-weight: var(--component-button-font-weight); font-style: var(--component-button-font-style); line-height: var(--component-button-line-height); color: var(--component-button-text-color); background-color: var(--component-button-background-color); box-shadow: var(--component-button-shadow); border-radius: var(--component-button-border-radius); border: var(--component-button-border-size) solid var(--component-button-border-color); outline: var(--component-button-outline-size) solid var(--component-button-outline-color); outline-offset: var(--component-button-outline-offset); } .button-field div button:hover { font-weight: var(--component-button-hover-font-weight); font-style: var(--component-button-hover-font-style); color: var(--component-button-hover-text-color); background-color: var(--component-button-hover-background-color); box-shadow: var(--component-button-hover-shadow); border: var(--component-button-hover-border-size) solid var(--component-button-hover-border-color); outline: var(--component-button-hover-outline-size) solid var(--component-button-hover-outline-color); outline-offset: var(--component-button-hover-outline-offset); cursor: pointer; } .button-field div button:focus { font-weight: var(--component-button-focus-font-weight); font-style: var(--component-button-focus-font-style); color: var(--component-button-focus-text-color); background-color: var(--component-button-focus-background-color); box-shadow: var(--component-button-focus-shadow); border: var(--component-button-focus-border-size) solid var(--component-button-focus-border-color); outline: var(--component-button-focus-outline-size) solid var(--component-button-focus-outline-color); outline-offset: var(--component-button-focus-outline-offset); } .button-field div button[disabled] { font-weight: var(--component-button-disabled-font-weight); font-style: var(--component-button-disabled-font-style); color: var(--component-button-disabled-text-color); background-color: var(--component-button-disabled-background-color); box-shadow: var(--component-button-disabled-shadow); border: var(--component-button-disabled-border-size) solid var(--component-button-disabled-border-color); outline: var(--component-button-disabled-outline-size) solid var(--component-button-disabled-outline-color); outline-offset: var(--component-button-disabled-outline-offset); } .button-field div button:active { font-weight: var(--component-button-active-font-weight); font-style: var(--component-button-active-font-style); color: var(--component-button-active-text-color); background-color: var(--component-button-active-background-color); box-shadow: var(--component-button-active-shadow); border: var(--component-button-active-border-size) solid var(--component-button-active-border-color); outline: var(--component-button-active-outline-size) solid var(--component-button-active-outline-color); outline-offset: var(--component-button-active-outline-offset); position: relative; left: var(--component-button-active-offset-x); top: var(--component-button-active-offset-y); } /* icon button */ .button-field.icon div .field-inner { align-self: var(--component-button-icon-item-align); } .button-field.icon div button { padding: var(--component-button-icon-padding); font-family: var(--component-button-icon-font); font-size: var(--component-button-icon-font-size); font-weight: var(--component-button-icon-font-weight); font-style: var(--component-button-icon-font-style); line-height: var(--component-button-icon-line-height); color: var(--component-button-icon-color); background-color: var(--component-button-icon-background-color); box-shadow: var(--component-button-icon-shadow); border-radius: var(--component-button-icon-border-radius); border: var(--component-button-icon-border-size) solid var(--component-button-icon-border-color); outline: var(--component-button-icon-outline-size) solid var(--component-button-icon-outline-color); outline-offset: var(--component-button-icon-outline-offset); display: flex; flex-direction: column; align-items: center; justify-content: center; } .button-field.icon.icon-only div button { padding: var(--component-button-icon-only-padding); } .button-field.icon div button .button-text { font-size: var(--component-button-icon-text-font-size); font-weight: var(--component-button-icon-text-font-weight); font-style: var(--component-button-icon-text-font-style); color: var(--component-button-icon-text-text-color); padding: var(--component-button-icon-text-padding); white-space: nowrap; } .button-field.icon div button:hover { font-weight: var(--component-button-icon-hover-font-weight); font-style: var(--component-button-icon-hover-font-style); color: var(--component-button-icon-hover-color); background-color: var(--component-button-icon-hover-background-color); box-shadow: var(--component-button-icon-hover-shadow); border: var(--component-button-icon-hover-border-size) solid var(--component-button-icon-hover-border-color); outline: var(--component-button-icon-hover-outline-size) solid var(--component-button-icon-hover-outline-color); outline-offset: var(--component-button-icon-hover-outline-offset); cursor: pointer; } .button-field.icon div button:hover .button-text { font-weight: var(--component-button-icon-hover-text-font-weight); font-style: var(--component-button-icon-hover-text-font-style); color: var(--component-button-icon-hover-text-color); } .button-field.icon div button:focus { font-weight: var(--component-button-icon-focus-font-weight); font-style: var(--component-button-icon-focus-font-style); color: var(--component-button-icon-focus-color); background-color: var(--component-button-icon-focus-background-color); box-shadow: var(--component-button-icon-focus-shadow); border: var(--component-button-icon-focus-border-size) solid var(--component-button-icon-focus-border-color); outline: var(--component-button-icon-focus-outline-size) solid var(--component-button-icon-focus-outline-color); outline-offset: var(--component-button-icon-focus-outline-offset); } .button-field.icon div button:focus .button-text { font-weight: var(--component-button-icon-focus-text-font-weight); font-style: var(--component-button-icon-focus-text-font-style); color: var(--component-button-icon-focus-text-color); } .button-field.icon div button[disabled] { font-weight: var(--component-button-icon-disabled-font-weight); font-style: var(--component-button-icon-disabled-font-style); color: var(--component-button-icon-disabled-color); background-color: var(--component-button-icon-disabled-background-color); box-shadow: var(--component-button-icon-disabled-shadow); border: var(--component-button-icon-disabled-border-size) solid var(--component-button-icon-disabled-border-color); outline: var(--component-button-icon-disabled-outline-size) solid var(--component-button-icon-disabled-outline-color); outline-offset: var(--component-button-icon-disabled-outline-offset); } .button-field.icon div button[disabled] .button-text { font-weight: var(--component-button-icon-disabled-text-font-weight); font-style: var(--component-button-icon-disabled-text-font-style); color: var(--component-button-icon-disabled-text-color); } .button-field.icon div button:active { font-weight: var(--component-button-icon-active-font-weight); font-style: var(--component-button-icon-active-font-style); color: var(--component-button-icon-active-color); background-color: var(--component-button-icon-active-background-color); box-shadow: var(--component-button-icon-active-shadow); border: var(--component-button-icon-active-border-size) solid var(--component-button-icon-active-border-color); outline: var(--component-button-icon-active-outline-size) solid var(--component-button-icon-active-outline-color); outline-offset: var(--component-button-icon-active-outline-offset); position: relative; left: var(--component-button-icon-active-offset-x); top: var(--component-button-icon-active-offset-y); } .button-field.icon div button:active .button-text { font-weight: var(--component-button-icon-active-text-font-weight); font-style: var(--component-button-icon-active-text-font-style); color: var(--component-button-icon-active-text-color); } .button-field.icon div img { flex: 1 1 auto; padding: var(--component-button-icon-img-padding); } .button-field.icon div button.button-icon-left { flex-direction: row; justify-content: normal; } .button-field.icon div button.button-icon-left img { padding: var(--component-button-icon-left-img-padding); } .button-field.icon div button.button-icon-left .button-text { padding: var(--component-button-icon-left-text-padding); } /* context button*/ .button-field.icon.context-button div button { padding: var(--component-button-context-padding); font-size: var(--component-button-context-font-size); width: var(--component-button-context-width); height: var(--component-button-context-height); } .button-field.icon.context-button div button .button-text { font-size: var(--component-button-context-text-font-size); padding: var(--component-button-context-text-padding); } .button-field.icon.context-button div button.button-icon-left .button-text { padding: var(--component-button-context-left-text-padding); } .button-field.icon.context-button div img { flex: 1 1 auto; padding: var(--component-button-context-img-padding); } .button-field.icon.context-button div button.button-icon-left img { padding: var(--component-button-context-left-img-padding); } /* function button */ .button-field.icon.function-button div button { padding: var(--component-button-function-padding); font-size: var(--component-button-function-font-size); width: var(--component-button-function-width); height: var(--component-button-function-height); } .button-field.icon.function-button div button .button-text { font-size: var(--component-button-function-text-font-size); padding: var(--component-button-function-text-padding); } .button-field.icon.function-button div button.button-icon-left .button-text { padding: var(--component-button-function-left-text-padding); } .button-field.icon.function-button div img { flex: 1 1 auto; padding: var(--component-button-function-img-padding); } .button-field.icon.function-button div button.button-icon-left img { padding: var(--component-button-function-left-img-padding); } /* primary button */ .button-field.primary div button { padding: var(--component-button-primary-padding); font-family: var(--component-button-primary-font); font-size: var(--component-button-primary-font-size); font-weight: var(--component-button-primary-font-weight); font-style: var(--component-button-primary-font-style); line-height: var(--component-button-primary-line-height); color: var(--component-button-primary-text-color); background-color: var(--component-button-primary-background-color); box-shadow: var(--component-button-primary-shadow); border-radius: var(--component-button-primary-border-radius); border: var(--component-button-primary-border-size) solid var(--component-button-primary-border-color); outline: var(--component-button-primary-outline-size) solid var(--component-button-primary-outline-color); outline-offset: var(--component-button-primary-outline-offset); } .button-field.primary div button:hover { font-weight: var(--component-button-primary-hover-font-weight); font-style: var(--component-button-primary-hover-font-style); color: var(--component-button-primary-hover-text-color); background-color: var(--component-button-primary-hover-background-color); box-shadow: var(--component-button-primary-hover-shadow); border: var(--component-button-primary-hover-border-size) solid var(--component-button-primary-hover-border-color); outline: var(--component-button-primary-hover-outline-size) solid var(--component-button-primary-hover-outline-color); outline-offset: var(--component-button-primary-hover-outline-offset); cursor: pointer; } .button-field.primary div button:focus { font-weight: var(--component-button-primary-focus-font-weight); font-style: var(--component-button-primary-focus-font-style); color: var(--component-button-primary-focus-text-color); background-color: var(--component-button-primary-focus-background-color); box-shadow: var(--component-button-primary-focus-shadow); border: var(--component-button-primary-focus-border-size) solid var(--component-button-primary-focus-border-color); outline: var(--component-button-primary-focus-outline-size) solid var(--component-button-primary-focus-outline-color); outline-offset: var(--component-button-primary-focus-outline-offset); } .button-field.primary div button[disabled] { font-weight: var(--component-button-primary-disabled-font-weight); font-style: var(--component-button-primary-disabled-font-style); color: var(--component-button-primary-disabled-text-color); background-color: var(--component-button-primary-disabled-background-color); box-shadow: var(--component-button-primary-disabled-shadow); border: var(--component-button-primary-disabled-border-size) solid var(--component-button-primary-disabled-border-color); outline: var(--component-button-primary-disabled-outline-size) solid var(--component-button-primary-disabled-outline-color); outline-offset: var(--component-button-primary-disabled-outline-offset); } .button-field.primary div button:active { font-weight: var(--component-button-primary-active-font-weight); font-style: var(--component-button-primary-active-font-style); color: var(--component-button-primary-active-text-color); background-color: var(--component-button-primary-active-background-color); box-shadow: var(--component-button-primary-active-shadow); border: var(--component-button-primary-active-border-size) solid var(--component-button-primary-active-border-color); outline: var(--component-button-primary-active-outline-size) solid var(--component-button-primary-active-outline-color); outline-offset: var(--component-button-primary-active-outline-offset); position: relative; left: var(--component-button-primary-active-offset-x); top: var(--component-button-primary-active-offset-y); } /* sub button */ .button-field.sub-button div button { padding: var(--component-button-sub-padding); font-family: var(--component-button-sub-font); font-size: var(--component-button-sub-font-size); font-weight: var(--component-button-sub-font-weight); font-style: var(--component-button-sub-font-style); line-height: var(--component-button-sub-line-height); color: var(--component-button-sub-text-color); background-color: var(--component-button-sub-background-color); box-shadow: var(--component-button-sub-shadow); border-radius: var(--component-button-sub-border-radius); border: var(--component-button-sub-border-size) solid var(--component-button-sub-border-color); outline: var(--component-button-sub-outline-size) solid var(--component-button-sub-outline-color); outline-offset: var(--component-button-sub-outline-offset); } .button-field.sub-button div button:hover { font-weight: var(--component-button-sub-hover-font-weight); font-style: var(--component-button-sub-hover-font-style); color: var(--component-button-sub-hover-text-color); background-color: var(--component-button-sub-hover-background-color); box-shadow: var(--component-button-sub-hover-shadow); border: var(--component-button-sub-hover-border-size) solid var(--component-button-sub-hover-border-color); outline: var(--component-button-sub-hover-outline-size) solid var(--component-button-sub-hover-outline-color); outline-offset: var(--component-button-sub-hover-outline-offset); cursor: pointer; } .button-field.sub-button div button:focus { font-weight: var(--component-button-sub-focus-font-weight); font-style: var(--component-button-sub-focus-font-style); color: var(--component-button-sub-focus-text-color); background-color: var(--component-button-sub-focus-background-color); box-shadow: var(--component-button-sub-focus-shadow); border: var(--component-button-sub-focus-border-size) solid var(--component-button-sub-focus-border-color); outline: var(--component-button-sub-focus-outline-size) solid var(--component-button-sub-focus-outline-color); outline-offset: var(--component-button-sub-focus-outline-offset); } .button-field.sub-button div button[disabled] { font-weight: var(--component-button-sub-disabled-font-weight); font-style: var(--component-button-sub-disabled-font-style); color: var(--component-button-sub-disabled-text-color); background-color: var(--component-button-sub-disabled-background-color); box-shadow: var(--component-button-sub-disabled-shadow); border: var(--component-button-sub-disabled-border-size) solid var(--component-button-sub-disabled-border-color); outline: var(--component-button-sub-disabled-outline-size) solid var(--component-button-sub-disabled-outline-color); outline-offset: var(--component-button-sub-disabled-outline-offset); } .button-field.sub-button div button:active { font-weight: var(--component-button-sub-active-font-weight); font-style: var(--component-button-sub-active-font-style); color: var(--component-button-sub-active-text-color); background-color: var(--component-button-sub-active-background-color); box-shadow: var(--component-button-sub-active-shadow); border: var(--component-button-sub-active-border-size) solid var(--component-button-sub-active-border-color); outline: var(--component-button-sub-active-outline-size) solid var(--component-button-sub-active-outline-color); outline-offset: var(--component-button-sub-active-outline-offset); position: relative; left: var(--component-button-sub-active-offset-x); top: var(--component-button-sub-active-offset-y); } /* toolbar button */ .button-field.icon.toolbar-button { margin: var(--component-button-toolbar-margin); } .button-field.icon.toolbar-button div .field-inner { align-self: var(--component-button-toolbar-item-align); } .button-field.icon.toolbar-button div button { width: var(--component-button-toolbar-width); height: var(--component-button-toolbar-height); padding: var(--component-button-toolbar-padding); font-family: var(--component-button-toolbar-font); font-size: var(--component-button-toolbar-font-size); font-weight: var(--component-button-toolbar-font-weight); font-style: var(--component-button-toolbar-font-style); line-height: var(--component-button-toolbar-line-height); color: var(--component-button-toolbar-color); background-color: var(--component-button-toolbar-background-color); box-shadow: var(--component-button-toolbar-shadow); border-radius: var(--component-button-toolbar-border-radius); border: var(--component-button-toolbar-border-size) solid var(--component-button-toolbar-border-color); outline: var(--component-button-toolbar-outline-size) solid var(--component-button-toolbar-outline-color); outline-offset: var(--component-button-toolbar-outline-offset); display: flex; flex-direction: column; align-items: center; justify-content: center; } .button-field.icon.icon-only.toolbar-button div button { padding: var(--component-button-toolbar-only-padding); } .button-field.icon.toolbar-button div button .button-text { font-size: var(--component-button-toolbar-text-font-size); font-weight: var(--component-button-toolbar-text-font-weight); font-style: var(--component-button-toolbar-text-font-style); color: var(--component-button-toolbar-text-text-color); padding: var(--component-button-toolbar-text-padding); white-space: nowrap; } .button-field.icon.toolbar-button div button:hover { font-weight: var(--component-button-toolbar-hover-font-weight); font-style: var(--component-button-toolbar-hover-font-style); color: var(--component-button-toolbar-hover-color); background-color: var(--component-button-toolbar-hover-background-color); box-shadow: var(--component-button-toolbar-hover-shadow); border: var(--component-button-toolbar-hover-border-size) solid var(--component-button-toolbar-hover-border-color); outline: var(--component-button-toolbar-hover-outline-size) solid var(--component-button-toolbar-hover-outline-color); outline-offset: var(--component-button-toolbar-hover-outline-offset); cursor: pointer; } .button-field.icon.toolbar-button div button:hover .button-text { font-weight: var(--component-button-toolbar-hover-text-font-weight); font-style: var(--component-button-toolbar-hover-text-font-style); color: var(--component-button-toolbar-hover-text-color); } .button-field.icon.toolbar-button div button:focus { font-weight: var(--component-button-toolbar-focus-font-weight); font-style: var(--component-button-toolbar-focus-font-style); color: var(--component-button-toolbar-focus-color); background-color: var(--component-button-toolbar-focus-background-color); box-shadow: var(--component-button-toolbar-focus-shadow); border: var(--component-button-toolbar-focus-border-size) solid var(--component-button-toolbar-focus-border-color); outline: var(--component-button-toolbar-focus-outline-size) solid var(--component-button-toolbar-focus-outline-color); outline-offset: var(--component-button-toolbar-focus-outline-offset); } .button-field.icon.toolbar-button div button:focus .button-text { font-weight: var(--component-button-toolbar-focus-text-font-weight); font-style: var(--component-button-toolbar-focus-text-font-style); color: var(--component-button-toolbar-focus-text-color); } .button-field.icon.toolbar-button div button[disabled] { font-weight: var(--component-button-toolbar-disabled-font-weight); font-style: var(--component-button-toolbar-disabled-font-style); color: var(--component-button-toolbar-disabled-color); background-color: var(--component-button-toolbar-disabled-background-color); box-shadow: var(--component-button-toolbar-disabled-shadow); border: var(--component-button-toolbar-disabled-border-size) solid var(--component-button-toolbar-disabled-border-color); outline: var(--component-button-toolbar-disabled-outline-size) solid var(--component-button-toolbar-disabled-outline-color); outline-offset: var(--component-button-toolbar-disabled-outline-offset); } .button-field.icon.toolbar-button div button[disabled] .button-text { font-weight: var(--component-button-toolbar-disabled-text-font-weight); font-style: var(--component-button-toolbar-disabled-text-font-style); color: var(--component-button-toolbar-disabled-text-color); } .button-field.icon.toolbar-button div button:active { font-weight: var(--component-button-toolbar-active-font-weight); font-style: var(--component-button-toolbar-active-font-style); color: var(--component-button-toolbar-active-color); background-color: var(--component-button-toolbar-active-background-color); box-shadow: var(--component-button-toolbar-active-shadow); border: var(--component-button-toolbar-active-border-size) solid var(--component-button-toolbar-active-border-color); outline: var(--component-button-toolbar-active-outline-size) solid var(--component-button-toolbar-active-outline-color); outline-offset: var(--component-button-toolbar-active-outline-offset); position: relative; left: var(--component-button-toolbar-active-offset-x); top: var(--component-button-toolbar-active-offset-y); } .button-field.icon.toolbar-button div button:active .button-text { font-weight: var(--component-button-toolbar-active-text-font-weight); font-style: var(--component-button-toolbar-active-text-font-style); color: var(--component-button-toolbar-active-text-color); } .button-field.icon.toolbar-button div img { flex: 1 1 auto; padding: var(--component-button-toolbar-img-padding); } .button-field.icon.toolbar-button div button.button-icon-left { flex-direction: row; justify-content: normal; } .button-field.icon.toolbar-button div button.button-icon-left img { padding: var(--component-button-toolbar-left-img-padding); } .button-field.icon.toolbar-button div button.button-icon-left .button-text { padding: var(--component-button-toolbar-left-text-padding); } /* ---------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* input field: input-field.input-field.[input-field-textarea].[inline].[segmented].[important].[empty].[focus].[invalid] | +--label.group-label.[label-small] | | | +--span.group-mainlabel | | | +--span.group-sublabel | +--label.mobile-group-label.[label-small] | | | +--span.mobile-group-mainlabel | | | +--span.mobile-group-sublabel | +--div.field-inner.[input-field-group-left].[input-field-group-right] | +--button/div.input-field-addon-left | | | +--span.{left-addon-class} | +--input/textarea | +--span.show-password-button only if show-password-button is set | +--button/div.input-field-addon-right | +--span.{right-addon-class} */ .input-field { display: flex; flex-direction: var(--component-label-pos); margin: var(--component-input-margin); } .input-field.label-top { flex-direction: column; } .input-field div.field-inner { display: flex; flex-direction: row; align-items: stretch; align-self: var(--component-input-item-align); outline: var(--component-input-outline-size) solid var(--component-input-outline-color); outline-offset: var(--component-input-outline-offset); position: relative; } .input-field.label-top div.field-inner { align-self: normal; } .input-field div input, .input-field div textarea, .input-field.ng-invalid div input.ng-untouched, .input-field div input.ng-invalid.ng-untouched, .input-field.ng-invalid div textarea.ng-untouched, .input-field div textarea.ng-invalid.ng-untouched { -webkit-appearance: none; -moz-appearance: none; appearance: none; flex: 1 1 auto; width: 100%; max-width: 100%; min-width: 1px; margin: 0; font-family: var(--component-input-font); font-size: var(--component-input-font-size); font-weight: var(--component-input-font-weight); font-style: var(--component-input-font-style); color: var(--component-input-text-color); background-color: var(--component-input-background-color); box-shadow: var(--component-input-shadow); border-radius: var(--component-input-border-radius); border: var(--component-input-border-size) solid var(--component-input-border-color); padding: var(--component-input-padding); } .input-field div input { min-height: calc(var(--component-input-font-size) * var(--component-input-line-height)); height: 2px; line-height: var(--component-input-line-height); box-sizing: content-box; } .input-field div textarea { min-height: var(--component-input-textarea-height); line-height: var(--component-input-textarea-line-height); } .input-field div input[type=number]::-webkit-inner-spin-button, .input-field div input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; appearance: none; } .input-field-number div input, .input-field div input[type=number], .input-field-number div input:focus, .input-field div input[type=number]:focus { -moz-appearance: textfield; appearance: textfield; text-align: right; } .input-field input::placeholder, .input-field textarea::placeholder { font-family: var(--component-input-placeholder-font); font-size: var(--component-input-placeholder-font-size); font-weight: var(--component-input-placeholder-font-weight); color: var(--component-input-placeholder-color); } .input-field.important div input, .input-field.important div textarea { font-weight: var(--component-input-important-font-weight); font-style: var(--component-input-important-font-style); color: var(--component-input-important-text-color); background-color: var(--component-input-important-background-color); box-shadow: var(--component-input-important-shadow); border: var(--component-input-important-border-size) solid var(--component-input-important-border-color); } .input-field.important { outline: var(--component-input-important-outline-size) solid var(--component-input-important-outline-color); outline-offset: var(--component-input-important-outline-offset); } .input-field.important input::placeholder, .input-field.important textarea::placeholder { font-weight: var(--component-input-important-placeholder-font-weight); font-size: var(--component-input-important-placeholder-font-size); color: var(--component-input-important-placeholder-color); } .input-field[required] div input, .input-field[required] div textarea { font-weight: var(--component-input-required-font-weight); font-style: var(--component-input-required-font-style); color: var(--component-input-required-text-color); background-color: var(--component-input-required-background-color); box-shadow: var(--component-input-required-shadow); border: var(--component-input-required-border-size) solid var(--component-input-required-border-color); } .input-field[required] { outline: var(--component-input-required-outline-size) solid var(--component-input-required-outline-color); outline-offset: var(--component-input-required-outline-offset); } .input-field[required] input::placeholder, .input-field[required] textarea::placeholder { font-weight: var(--component-input-required-placeholder-font-weight); font-size: var(--component-input-required-placeholder-font-size); color: var(--component-input-required-placeholder-color); } .input-field.empty div input, .input-field.empty div textarea { font-weight: var(--component-input-empty-font-weight); font-style: var(--component-input-empty-font-style); color: var(--component-input-empty-text-color); background-color: var(--component-input-empty-background-color); box-shadow: var(--component-input-empty-shadow); border: var(--component-input-empty-border-size) solid var(--component-input-empty-border-color); } .input-field.empty { outline: var(--component-input-empty-outline-size) solid var(--component-input-empty-outline-color); outline-offset: var(--component-input-empty-outline-offset); } .input-field.empty input::placeholder, .input-field.empty textarea::placeholder { font-weight: var(--component-input-empty-placeholder-font-weight); font-size: var(--component-input-empty-placeholder-font-size); color: var(--component-input-empty-placeholder-color); } .input-field.invalid div input, .input-field.invalid div textarea { font-weight: var(--component-input-invalid-font-weight); font-style: var(--component-input-invalid-font-style); color: var(--component-input-invalid-text-color); background-color: var(--component-input-invalid-background-color); box-shadow: var(--component-input-invalid-shadow); border: var(--component-input-invalid-border-size) solid var(--component-input-invalid-border-color); } .input-field.invalid { outline: var(--component-input-invalid-outline-size) solid var(--component-input-invalid-outline-color); outline-offset: var(--component-input-invalid-outline-offset); } .input-field.invalid input::placeholder, .input-field.invalid textarea::placeholder { font-weight: var(--component-input-invalid-placeholder-font-weight); font-size: var(--component-input-invalid-placeholder-font-size); color: var(--component-input-invalid-placeholder-color); } .input-field.focus div input, .input-field.focus div textarea { font-weight: var(--component-input-focus-font-weight); font-style: var(--component-input-focus-font-style); color: var(--component-input-focus-text-color); background-color: var(--component-input-focus-background-color); box-shadow: var(--component-input-focus-shadow); border: var(--component-input-focus-border-size) solid var(--component-input-focus-border-color); } .input-field.focus { outline: var(--component-input-focus-outline-size) solid var(--component-input-focus-outline-color); outline-offset: var(--component-input-focus-outline-offset); } .input-field.focus input::placeholder, .input-field.focus textarea::placeholder { font-weight: var(--component-input-focus-placeholder-font-weight); font-size: var(--component-input-focus-placeholder-font-size); color: var(--component-input-focus-placeholder-color); } .input-field[disabled] div input, .input-field[disabled] div textarea { font-weight: var(--component-input-disabled-font-weight); font-style: var(--component-input-disabled-font-style); color: var(--component-input-disabled-text-color); background-color: var(--component-input-disabled-background-color); box-shadow: var(--component-input-disabled-shadow); border: var(--component-input-disabled-border-size) solid var(--component-input-disabled-border-color); } .input-field[disabled] { outline: var(--component-input-disabled-outline-size) solid var(--component-input-disabled-outline-color); outline-offset: var(--component-input-disabled-outline-offset); } .input-field[disabled] input::placeholder, .input-field[disabled] textarea::placeholder { font-weight: var(--component-input-disabled-placeholder-font-weight); font-size: var(--component-input-disabled-placeholder-font-size); color: var(--component-input-disabled-placeholder-color); } /* left and right addon */ .input-field .input-field-addon-left, .input-field .input-field-addon-right { text-align: center; -webkit-appearance: none; -moz-appearance: none; appearance: none; padding: var(--component-input-addon-padding); font-family: var(--component-input-addon-font); font-size: var(--component-input-addon-font-size); font-weight: var(--component-input-addon-font-weight); font-style: var(--component-input-addon-font-style); line-height: var(--component-input-addon-line-height); color: var(--component-input-addon-text-color); background-color: var(--component-input-addon-background-color); min-width: var(--component-input-addon-width); border: var(--component-input-border-size) solid var(--component-input-border-color); display: flex; flex-direction: row; align-items: center; justify-content: center; line-height: 1; } .input-field.important .input-field-addon-left, .input-field.important .input-field-addon-right { font-weight: var(--component-input-addon-important-font-weight); font-style: var(--component-input-addon-important-font-style); color: var(--component-input-addon-important-text-color); background-color: var(--component-input-addon-important-background-color); border: var(--component-input-important-border-size) solid var(--component-input-important-border-color); } .input-field[required] .input-field-addon-left, .input-field[required] .input-field-addon-right { font-weight: var(--component-input-addon-required-font-weight); font-style: var(--component-input-addon-required-font-style); color: var(--component-input-addon-required-text-color); background-color: var(--component-input-addon-required-background-color); border: var(--component-input-required-border-size) solid var(--component-input-required-border-color); } .input-field.empty .input-field-addon-left, .input-field.empty .input-field-addon-right { font-weight: var(--component-input-addon-empty-font-weight); font-style: var(--component-input-addon-empty-font-style); color: var(--component-input-addon-empty-text-color); background-color: var(--component-input-addon-empty-background-color); border: var(--component-input-empty-border-size) solid var(--component-input-empty-border-color); } .input-field.invalid .input-field-addon-left, .input-field.invalid .input-field-addon-right { font-weight: var(--component-input-addon-invalid-font-weight); font-style: var(--component-input-addon-invalid-font-style); color: var(--component-input-addon-invalid-text-color); background-color: var(--component-input-addon-invalid-background-color); border: var(--component-input-invalid-border-size) solid var(--component-input-invalid-border-color); } .input-field.focus .input-field-addon-left, .input-field.focus .input-field-addon-right { font-weight: var(--component-input-addon-focus-font-weight); font-style: var(--component-input-addon-focus-font-style); color: var(--component-input-addon-focus-text-color); background-color: var(--component-input-addon-focus-background-color); border: var(--component-input-focus-border-size) solid var(--component-input-focus-border-color); } .input-field[disabled] .input-field-addon-left, .input-field[disabled] .input-field-addon-right { font-weight: var(--component-input-addon-disabled-font-weight); font-style: var(--component-input-addon-disabled-font-style); color: var(--component-input-addon-disabled-text-color); background-color: var(--component-input-addon-disabled-background-color); border: var(--component-input-disabled-border-size) solid var(--component-input-disabled-border-color); } .input-field .input-field-addon-left, .input-field.important .input-field-addon-left, .input-field[required] .input-field-addon-left, .input-field.empty .input-field-addon-left, .input-field.invalid .input-field-addon-left, .input-field.focus .input-field-addon-left .input-field[disabled] .input-field-addon-left { border-right: none; border-top-left-radius: var(--component-input-border-radius); border-bottom-left-radius: var(--component-input-border-radius); } .input-field .input-field-addon-right, .input-field.important .input-field-addon-right, .input-field[required] .input-field-addon-right, .input-field.empty .input-field-addon-right, .input-field.invalid .input-field-addon-right, .input-field.focus .input-field-addon-right .input-field[disabled] .input-field-addon-right { border-left: none; border-top-right-radius: var(--component-input-border-radius); border-bottom-right-radius: var(--component-input-border-radius); } .input-field .input-field-group-left input { border-top-left-radius: 0; border-bottom-left-radius: 0; } .input-field .input-field-group-right input { border-top-right-radius: 0; border-bottom-right-radius: 0; } .input-field div button.input-field-addon-left, .input-field div button.input-field-addon-right { cursor: pointer; } /* show password button */ .input-field .show-password-button { position: absolute; right: var(--component-input-show-password-offset-x); top: 50%; transform: translateY(-50%); cursor: pointer; color: var(--component-input-show-password-color); font-size: var(--component-input-show-password-font-size); width: var(--component-input-show-password-width); height: var(--component-input-show-password-height); } .input-field .show-password-button img { width: 100%; } /* ---------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* segmented field: segmented-field.segmented-field.[inline].[important].[empty].[focus].[invalid].[separated-input].[big-input] | +--label.group-label.[label-small] | | | +--span.group-mainlabel | | | +--span.group-sublabel | +--label.mobile-group-label.[label-small] | | | +--span.mobile-group-mainlabel | | | +--span.mobile-group-sublabel | +--div.field-inner.[segmented-field-group-left].[segmented-field-group-right] | +--button/div.segmented-field-addon-left | | | +--span.{left-addon-class} | +--div.segment-container | | | +--span.segment-separator.segment-separator0.[separator-align-left|separator-align-right|separator-align-center] | | | +--div.segment.segment0.[segment-number] | | | | | +--[span.segment-label.segment-label-top] | | | | | +--input.[segment-align-left|segment-align-right|segment-align-center] | | | | | +--[span.segment-label.segment-label-bottom] | | | +--span.segment-separator.segment-separator1.[separator-align-left|separator-align-right|separator-align-center] | | | ... | | | +--div.segment.segment[n-1].[segment-number] | | | | | +--[span.segment-label.segment-label-top] | | | | | +--input.[segment-align-left|segment-align-right|segment-align-center] | | | | | +--[span.segment-label.segment-label-bottom] | | | +--span.segment-separator.segment-separator[n].[separator-align-left|separator-align-right|separator-align-center] | +--button/div.segmented-field-addon-right | +--span.{right-addon-class} */ .segmented-field { display: flex; flex-direction: var(--component-label-pos); margin: var(--component-input-margin); } .segmented-field.important {} /* todo */ .segmented-field.label-top { flex-direction: column; } .segmented-field-textarea {} .segmented-field div.field-inner { display: flex; flex-direction: row; align-items: stretch; align-self: var(--component-segmented-item-align); outline: var(--component-segmented-outline-size) solid var(--component-segmented-outline-color); outline-offset: var(--component-segmented-outline-offset); } .segmented-field.label-top div.field-inner { align-self: normal; } .segmented-field .segment-container { display: flex; flex-direction: row; align-items: var(--component-segmented-container-align); width: 100%; max-width: 100%; min-width: 1px; margin: 0; font-family: var(--component-segmented-font); font-size: var(--component-segmented-font-size); font-weight: var(--component-segmented-font-weight); font-style: var(--component-segmented-font-style); line-height: var(--component-segmented-line-height); background-color: var(--component-segmented-background-color); box-shadow: var(--component-segmented-shadow); border-radius: var(--component-segmented-border-radius); border: var(--component-segmented-border-size) solid var(--component-segmented-border-color); padding: var(--component-segmented-padding); } .segmented-field .segment-separator { margin: 0; font-family: var(--component-segmented-font); font-size: var(--component-segmented-separator-font-size); font-weight: var(--component-segmented-separator-font-weight); font-style: var(--component-segmented-separator-font-style); line-height: var(--component-segmented-separator-line-height); color: var(--component-segmented-separator-text-color); background-color: var(--component-segmented-separator-background-color); box-shadow: var(--component-segmented-sparator-shadow); border-radius: var(--component-segmented-separator-border-radius); border: var(--component-segmented-separator-border-size) solid var(--component-segmented-separator-border-color); padding: var(--component-segmented-separator-padding); } .segmented-field .segment-separator:first-child { padding: var(--component-segmented-separator-first-padding); } .segmented-field .segment-separator:last-child { padding: var(--component-segmented-separator-last-padding); } .segmented-field .segment { flex: 1 1 auto; } .segmented-field div div.segment input.segment-align-left, .segmented-field .separator-align-left { text-align: left; } .segmented-field div div.segment input.segment-align-center, .segmented-field .separator-align-center { text-align: center; } .segmented-field div div.segment input.segment-align-right, .segmented-field .separator-align-right { text-align: right; } .segmented-field .segment-label {} .segmented-field .segment-label-top {} .segmented-field div input, .segmented-field div input.ng-untouched, .segmented-field div input.ng-untouched { -webkit-appearance: textfield; -moz-appearance: textfield; appearance: textfield; width: 100%; max-width: 100%; min-width: 1px; margin: 0; font-family: var(--component-segmented-font); font-size: var(--component-segmented-font-size); font-weight: var(--component-segmented-font-weight); font-style: var(--component-segmented-font-style); line-height: var(--component-segmented-line-height); color: var(--component-segmented-text-color); background-color: var(--component-segmented-segment-background-color); box-shadow: var(--component-segmented-segment-shadow); border-radius: var(--component-segmented-segment-border-radius); border: var(--component-segmented-segment-border-size) solid var(--component-segmented-segment-border-color); padding: var(--component-segmented-segment-padding-top) var(--component-segmented-segment-padding-right) var(--component-segmented-segment-padding-bottom) var(--component-segmented-segment-padding-left); } .segmented-field div input { min-height: calc(var(--component-segmented-font-size) * var(--component-segmented-line-height) + var(--component-segmented-segment-padding-top) + var(--component-segmented-segment-padding-bottom)); line-height: var(--component-segmented-line-height); height: 2px; display: block; } .segmented-field div input[type=number]::-webkit-inner-spin-button, .segmented-field div input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; appearance: none; } .segmented-field div input[type=number], .segmented-field div input[type=number]:focus, .segmented-field div .segment-number input, .segmented-field div .segment-number input:focus { -moz-appearance: textfield; appearance: textfield; text-align: right; } .segmented-field input::placeholder { font-family: var(--component-segmented-placeholder-font); font-size: var(--component-segmented-placeholder-font-size); font-weight: var(--component-segmented-placeholder-font-weight); color: var(--component-segmented-placeholder-color); } .segmented-field.important .segment-container { font-weight: var(--component-segmented-important-font-weight); font-style: var(--component-segmented-important-font-style); color: var(--component-segmented-important-text-color); background-color: var(--component-segmented-important-background-color); box-shadow: var(--component-segmented-important-shadow); border: var(--component-segmented-important-border-size) solid var(--component-segmented-important-border-color); } .segmented-field.important .segment-separator { font-weight: var(--component-segmented-important-separator-font-weight); font-style: var(--component-segmented-important-separator-font-style); color: var(--component-segmented-important-separator-text-color); background-color: var(--component-segmented-important-separator-background-color); box-shadow: var(--component-segmented-important-separator-shadow); border: var(--component-segmented-important-separator-border-size) solid var(--component-segmented-important-separator-border-color); } .segmented-field.important div input { font-weight: var(--component-segmented-important-font-weight); font-style: var(--component-segmented-important-font-style); color: var(--component-segmented-important-text-color); background-color: var(--component-segmented-important-segment-background-color); box-shadow: var(--component-segmented-important-segment-shadow); border: var(--component-segmented-important-segment-border-size) solid var(--component-segmented-important-segment-border-color); } .segmented-field.important { outline: var(--component-segmented-important-outline-size) solid var(--component-segmented-important-outline-color); outline-offset: var(--component-segmented-important-outline-offset); } .segmented-field.important input::placeholder {font-size: var(--component-segmented-important-placeholder-font-size); font-weight: var(--component-segmented-important-placeholder-font-weight); color: var(--component-segmented-important-placeholder-color); } .segmented-field[required] .segment-container { font-weight: var(--component-segmented-required-font-weight); font-style: var(--component-segmented-required-font-style); color: var(--component-segmented-required-text-color); background-color: var(--component-segmented-required-background-color); box-shadow: var(--component-segmented-required-shadow); border: var(--component-segmented-required-border-size) solid var(--component-segmented-required-border-color); } .segmented-field[required] .segment-separator { font-weight: var(--component-segmented-required-separator-font-weight); font-style: var(--component-segmented-required-separator-font-style); color: var(--component-segmented-required-separator-text-color); background-color: var(--component-segmented-required-separator-background-color); box-shadow: var(--component-segmented-required-separator-shadow); border: var(--component-segmented-required-separator-border-size) solid var(--component-segmented-required-separator-border-color); } .segmented-field[required] div input { font-weight: var(--component-segmented-required-font-weight); font-style: var(--component-segmented-required-font-style); color: var(--component-segmented-required-text-color); background-color: var(--component-segmented-required-segment-background-color); box-shadow: var(--component-segmented-required-segment-shadow); border: var(--component-segmented-required-segment-border-size) solid var(--component-segmented-required-segment-border-color); } .segmented-field[required] { outline: var(--component-segmented-required-outline-size) solid var(--component-segmented-required-outline-color); outline-offset: var(--component-segmented-required-outline-offset); } .segmented-field[reqired] input::placeholder {font-size: var(--component-segmented-reqired-placeholder-font-size); font-weight: var(--component-segmented-reqired-placeholder-font-weight); color: var(--component-segmented-reqired-placeholder-color); } .segmented-field.empty .segment-container { font-weight: var(--component-segmented-empty-font-weight); font-style: var(--component-segmented-empty-font-style); color: var(--component-segmented-empty-text-color); background-color: var(--component-segmented-empty-background-color); box-shadow: var(--component-segmented-empty-shadow); border: var(--component-segmented-empty-border-size) solid var(--component-segmented-empty-border-color); } .segmented-field.empty .segment-separator { font-weight: var(--component-segmented-empty-separator-font-weight); font-style: var(--component-segmented-empty-separator-font-style); color: var(--component-segmented-empty-separator-text-color); background-color: var(--component-segmented-empty-separator-background-color); box-shadow: var(--component-segmented-empty-separator-shadow); border: var(--component-segmented-empty-separator-border-size) solid var(--component-segmented-empty-separator-border-color); } .segmented-field.empty div input { font-weight: var(--component-segmented-empty-font-weight); font-style: var(--component-segmented-empty-font-style); color: var(--component-segmented-empty-text-color); background-color: var(--component-segmented-empty-segment-background-color); box-shadow: var(--component-segmented-empty-segment-shadow); border: var(--component-segmented-empty-segment-border-size) solid var(--component-segmented-empty-segment-border-color); } .segmented-field.empty { outline: var(--component-segmented-empty-outline-size) solid var(--component-segmented-empty-outline-color); outline-offset: var(--component-segmented-empty-outline-offset); } .segmented-field.empty input::placeholder {font-size: var(--component-segmented-empty-placeholder-font-size); font-weight: var(--component-segmented-empty-placeholder-font-weight); color: var(--component-segmented-empty-placeholder-color); } .segmented-field.invalid .segment-container { font-weight: var(--component-segmented-invalid-font-weight); font-style: var(--component-segmented-invalid-font-style); color: var(--component-segmented-invalid-text-color); background-color: var(--component-segmented-invalid-background-color); box-shadow: var(--component-segmented-invalid-shadow); border: var(--component-segmented-invalid-border-size) solid var(--component-segmented-invalid-border-color); } .segmented-field.invalid .segment-separator { font-weight: var(--component-segmented-invalid-separator-font-weight); font-style: var(--component-segmented-invalid-separator-font-style); color: var(--component-segmented-invalid-separator-text-color); background-color: var(--component-segmented-invalid-separator-background-color); box-shadow: var(--component-segmented-invalid-separator-shadow); border: var(--component-segmented-invalid-separator-border-size) solid var(--component-segmented-invalid-separator-border-color); } .segmented-field.invalid div input { font-weight: var(--component-segmented-invalid-font-weight); font-style: var(--component-segmented-invalid-font-style); color: var(--component-segmented-invalid-text-color); background-color: var(--component-segmented-invalid-segment-background-color); box-shadow: var(--component-segmented-invalid-segment-shadow); border: var(--component-segmented-invalid-segment-border-size) solid var(--component-segmented-invalid-segment-border-color); } .segmented-field.invalid { outline: var(--component-segmented-invalid-outline-size) solid var(--component-segmented-invalid-outline-color); outline-offset: var(--component-segmented-invalid-outline-offset); } .segmented-field.invalid input::placeholder {font-size: var(--component-segmented-invalid-placeholder-font-size); font-weight: var(--component-segmented-invalid-placeholder-font-weight); color: var(--component-segmented-invalid-placeholder-color); } .segmented-field.focus .segment-container { font-weight: var(--component-segmented-focus-font-weight); font-style: var(--component-segmented-focus-font-style); color: var(--component-segmented-focus-text-color); background-color: var(--component-segmented-focus-background-color); box-shadow: var(--component-segmented-focus-shadow); border: var(--component-segmented-focus-border-size) solid var(--component-segmented-focus-border-color); } .segmented-field.focus .segment-separator { font-weight: var(--component-segmented-focus-separator-font-weight); font-style: var(--component-segmented-focus-separator-font-style); color: var(--component-segmented-focus-separator-text-color); background-color: var(--component-segmented-focus-separator-background-color); box-shadow: var(--component-segmented-focus-separator-shadow); border: var(--component-segmented-focus-separator-border-size) solid var(--component-segmented-focus-separator-border-color); } .segmented-field.focus div input { font-weight: var(--component-segmented-focus-font-weight); font-style: var(--component-segmented-focus-font-style); color: var(--component-segmented-focus-text-color); background-color: var(--component-segmented-focus-segment-background-color); box-shadow: var(--component-segmented-focus-segment-shadow); border: var(--component-segmented-focus-segment-border-size) solid var(--component-segmented-focus-segment-border-color); } .segmented-field.focus { outline: var(--component-segmented-focus-outline-size) solid var(--component-segmented-focus-outline-color); outline-offset: var(--component-segmented-focus-outline-offset); } .segmented-field.focus input::placeholder {font-size: var(--component-segmented-focus-placeholder-font-size); font-weight: var(--component-segmented-focus-placeholder-font-weight); color: var(--component-segmented-focus-placeholder-color); } .segmented-field[disabled] .segment-container { font-weight: var(--component-segmented-disabled-font-weight); font-style: var(--component-segmented-disabled-font-style); color: var(--component-segmented-disabled-text-color); background-color: var(--component-segmented-disabled-background-color); box-shadow: var(--component-segmented-disabled-shadow); border: var(--component-segmented-disabled-border-size) solid var(--component-segmented-disabled-border-color); } .segmented-field[disabled] .segment-separator { font-weight: var(--component-segmented-disabled-separator-font-weight); font-style: var(--component-segmented-disabled-separator-font-style); color: var(--component-segmented-disabled-separator-text-color); background-color: var(--component-segmented-disabled-separator-background-color); box-shadow: var(--component-segmented-disabled-separator-shadow); border: var(--component-segmented-disabled-separator-border-size) solid var(--component-segmented-disabled-separator-border-color); } .segmented-field[disabled] div input { font-weight: var(--component-segmented-disabled-font-weight); font-style: var(--component-segmented-disabled-font-style); color: var(--component-segmented-disabled-text-color); background-color: var(--component-segmented-disabled-segment-background-color); box-shadow: var(--component-segmented-disabled-segment-shadow); border: var(--component-segmented-disabled-segment-border-size) solid var(--component-segmented-disabled-segment-border-color); } .segmented-field[disabled] { outline: var(--component-segmented-disabled-outline-size) solid var(--component-segmented-disabled-outline-color); outline-offset: var(--component-segmented-disabled-outline-offset); } .segmented-field[disabled] input::placeholder {font-size: var(--component-segmented-disabled-placeholder-font-size); font-weight: var(--component-segmented-disabled-placeholder-font-weight); color: var(--component-segmented-disabled-placeholder-color); } .segmented-field .segmented-field-addon-left, .segmented-field .segmented-field-addon-right { text-align: center; -webkit-appearance: none; -moz-appearance: none; appearance: none; display: block; padding: var(--component-segmented-addon-padding); font-family: var(--component-segmented-addon-font); font-size: var(--component-segmented-addon-font-size); font-weight: var(--component-segmented-addon-font-weight); font-style: var(--component-segmented-addon-font-style); line-height: var(--component-segmented-addon-line-height); color: var(--component-segmented-addon-text-color); background-color: var(--component-segmented-addon-background-color); min-width: var(--component-segmented-addon-width); border: var(--component-segmented-border-size) solid var(--component-segmented-border-color); } .segmented-field.important .segmented-field-addon-left, .segmented-field.important .segmented-field-addon-right { font-weight: var(--component-segmented-addon-important-font-weight); font-style: var(--component-segmented-addon-important-font-style); color: var(--component-segmented-addon-important-text-color); background-color: var(--component-segmented-addon-important-background-color); border: var(--component-segmented-important-border-size) solid var(--component-segmented-important-border-color); } .segmented-field[required] .segmented-field-addon-left, .segmented-field[required] .segmented-field-addon-right { font-weight: var(--component-segmented-addon-required-font-weight); font-style: var(--component-segmented-addon-required-font-style); color: var(--component-segmented-addon-required-text-color); background-color: var(--component-segmented-addon-required-background-color); border: var(--component-segmented-required-border-size) solid var(--component-segmented-required-border-color); } .segmented-field.empty .segmented-field-addon-left, .segmented-field.empty .segmented-field-addon-right { font-weight: var(--component-segmented-addon-empty-font-weight); font-style: var(--component-segmented-addon-empty-font-style); color: var(--component-segmented-addon-empty-text-color); background-color: var(--component-segmented-addon-empty-background-color); border: var(--component-segmented-empty-border-size) solid var(--component-segmented-empty-border-color); } .segmented-field.invalid .segmented-field-addon-left, .segmented-field.invalid .segmented-field-addon-right { font-weight: var(--component-segmented-addon-invalid-font-weight); font-style: var(--component-segmented-addon-invalid-font-style); color: var(--component-segmented-addon-invalid-text-color); background-color: var(--component-segmented-addon-invalid-background-color); border: var(--component-segmented-invalid-border-size) solid var(--component-segmented-invalid-border-color); } .segmented-field[disabled] .segmented-field-addon-left, .segmented-field[disabled] .segmented-field-addon-right { font-weight: var(--component-segmented-addon-disabled-font-weight); font-style: var(--component-segmented-addon-disabled-font-style); color: var(--component-segmented-addon-disabled-text-color); background-color: var(--component-segmented-addon-disabled-background-color); border: var(--component-segmented-disabled-border-size) solid var(--component-segmented-disabled-border-color); } .segmented-field .segmented-field-addon-left, .segmented-field.important .segmented-field-addon-left, .segmented-field[required] .segmented-field-addon-left, .segmented-field.empty .segmented-field-addon-left, .segmented-field.invalid .segmented-field-addon-left, .segmented-field.focus .segmented-field-addon-left, .segmented-field[disabled] .segmented-field-addon-left { border-right: none; border-top-left-radius: var(--component-segmented-border-radius); border-bottom-left-radius: var(--component-segmented-border-radius); } .segmented-field .segmented-field-addon-right, .segmented-field.important .segmented-field-addon-right, .segmented-field[required] .segmented-field-addon-right, .segmented-field.empty .segmented-field-addon-right, .segmented-field.invalid .segmented-field-addon-right, .segmented-field.focus .segmented-field-addon-right, .segmented-field[disabled] .segmented-field-addon-right { border-left: none; border-top-right-radius: var(--component-segmented-border-radius); border-bottom-right-radius: var(--component-segmented-border-radius); } .segmented-field .segmented-field-group-left .segment-container { border-top-left-radius: 0; border-bottom-left-radius: 0; } .segmented-field .segmented-field-group-right .segment-container { border-top-right-radius: 0; border-bottom-right-radius: 0; } .segmented-field div button.segmented-field-addon-left, .segmented-field div button.segmented-field-addon-right { cursor: pointer; } /* separated input */ .segmented-field.separated-input .segment-container { background-color: transparent; box-shadow: none; border-radius: unset; border: none; padding: var(--component-segmented-separated-padding); } .segmented-field.separated-input .segment-separator { font-family: var(--component-segmented-separated-font); font-size: var(--component-segmented-separated-separator-font-size); font-weight: var(--component-segmented-separated-separator-font-weight); font-style: var(--component-segmented-separated-separator-font-style); line-height: var(--component-segmented-separated-separator-line-height); color: var(--component-segmented-separated-separator-text-color); background-color: transparent; box-shadow: none; border-radius: unset; border: none; padding: var(--component-segmented-separated-separator-padding); } .segmented-field.separated-input div input, .segmented-field.separated-input div input.ng-untouched, .segmented-field.separated-input div input.ng-untouched { font-family: var(--component-segmented-separated-font); font-size: var(--component-segmented-separated-font-size); font-weight: var(--component-segmented-separated-font-weight); font-style: var(--component-segmented-separated-font-style); line-height: var(--component-segmented-separated-line-height); color: var(--component-segmented-separated-text-color); background-color: var(--component-segmented-separated-segment-background-color); box-shadow: var(--component-segmented-separated-segment-shadow); border-radius: var(--component-segmented-separated-segment-border-radius); border: var(--component-segmented-separated-segment-border-size) solid var(--component-segmented-separated-segment-border-color); padding: var(--component-segmented-separated-segment-padding-top) var(--component-segmented-separated-segment-padding-right) var(--component-segmented-separated-segment-padding-bottom) var(--component-segmented-separated-segment-padding-left); } .segmented-field.separated-input div input { min-height: calc(var(--component-segmented-separated-font-size) * var(--component-segmented-separated-line-height) + var(--component-segmented-separated-segment-padding-top) + var(--component-segmented-separated-segment-padding-bottom)); line-height: var(--component-segmented-separated-line-height); } .segmented-field.separated-input input::placeholder { font-family: var(--component-segmented-separated-placeholder-font); font-size: var(--component-segmented-separated-placeholder-font-size); font-weight: var(--component-segmented-separated-placeholder-font-weight); color: var(--component-segmented-separated-placeholder-color); } .segmented-field.separated-input.important .segment-container { background-color: transparent; box-shadow: none; border: none; } .segmented-field.separated-input.important .segment-separator { font-weight: var(--component-segmented-separated-important-separator-font-weight); font-style: var(--component-segmented-separated-important-separator-font-style); color: var(--component-segmented-separated-important-separator-text-color); background-color: transparent; box-shadow: none; border: none; } .segmented-field.separated-input.important div input { font-weight: var(--component-segmented-separated-important-font-weight); font-style: var(--component-segmented-separated-important-font-style); color: var(--component-segmented-separated-important-text-color); background-color: var(--component-segmented-separated-important-segment-background-color); box-shadow: var(--component-segmented-separated-important-segment-shadow); border: var(--component-segmented-separated-important-segment-border-size) solid var(--component-segmented-separated-important-segment-border-color); } .segmented-field.separated-input.important { outline: var(--component-segmented-separated-important-outline-size) solid var(--component-segmented-separated-important-outline-color); outline-offset: var(--component-segmented-separated-important-outline-offset); } .segmented-field.separated-input.important input::placeholder { font-size: var(--component-segmented-separated-important-placeholder-font-size); font-weight: var(--component-segmented-separated-important-placeholder-font-weight); color: var(--component-segmented-separated-important-placeholder-color); } .segmented-field.separated-input[required] .segment-container { background-color: transparent; box-shadow: none; border: none; } .segmented-field.separated-input[required] .segment-separator { font-weight: var(--component-segmented-separated-required-separator-font-weight); font-style: var(--component-segmented-separated-required-separator-font-style); color: var(--component-segmented-separated-required-separator-text-color); background-color: transparent; box-shadow: none; border: none; } .segmented-field.separated-input[required] div input { font-weight: var(--component-segmented-separated-required-font-weight); font-style: var(--component-segmented-separated-required-font-style); color: var(--component-segmented-separated-required-text-color); background-color: var(--component-segmented-separated-required-segment-background-color); box-shadow: var(--component-segmented-separated-required-segment-shadow); border: var(--component-segmented-separated-required-segment-border-size) solid var(--component-segmented-separated-required-segment-border-color); } .segmented-field.separated-input[required] { outline: var(--component-segmented-separated-required-outline-size) solid var(--component-segmented-separated-required-outline-color); outline-offset: var(--component-segmented-separated-required-outline-offset); } .segmented-field.separated-input[reqired] input::placeholder {font-size: var(--component-segmented-separated-reqired-placeholder-font-size); font-weight: var(--component-segmented-separated-reqired-placeholder-font-weight); color: var(--component-segmented-separated-reqired-placeholder-color); } .segmented-field.separated-input.empty .segment-container { background-color: transparent; box-shadow: none; border: none; } .segmented-field.separated-input.empty .segment-separator { font-weight: var(--component-segmented-separated-empty-separator-font-weight); font-style: var(--component-segmented-separated-empty-separator-font-style); color: var(--component-segmented-separated-empty-separator-text-color); background-color: transparent; box-shadow: none; border: none; } .segmented-field.separated-input.empty div input { font-weight: var(--component-segmented-separated-empty-font-weight); font-style: var(--component-segmented-separated-empty-font-style); color: var(--component-segmented-separated-empty-text-color); background-color: var(--component-segmented-separated-empty-segment-background-color); box-shadow: var(--component-segmented-separated-empty-segment-shadow); border: var(--component-segmented-separated-empty-segment-border-size) solid var(--component-segmented-separated-empty-segment-border-color); } .segmented-field.separated-input.empty { outline: var(--component-segmented-separated-empty-outline-size) solid var(--component-segmented-separated-empty-outline-color); outline-offset: var(--component-segmented-separated-empty-outline-offset); } .segmented-field.separated-input.empty input::placeholder {font-size: var(--component-segmented-separated-empty-placeholder-font-size); font-weight: var(--component-segmented-separated-empty-placeholder-font-weight); color: var(--component-segmented-separated-empty-placeholder-color); } .segmented-field.separated-input.invalid .segment-container { background-color: transparent; box-shadow: none; border: none; } .segmented-field.separated-input.invalid .segment-separator { font-weight: var(--component-segmented-separated-invalid-separator-font-weight); font-style: var(--component-segmented-separated-invalid-separator-font-style); color: var(--component-segmented-separated-invalid-separator-text-color); background-color: transparent; box-shadow: none; border: none; } .segmented-field.separated-input.invalid div input { font-weight: var(--component-segmented-separated-invalid-font-weight); font-style: var(--component-segmented-separated-invalid-font-style); color: var(--component-segmented-separated-invalid-text-color); background-color: var(--component-segmented-separated-invalid-segment-background-color); box-shadow: var(--component-segmented-separated-invalid-segment-shadow); border: var(--component-segmented-separated-invalid-segment-border-size) solid var(--component-segmented-separated-invalid-segment-border-color); } .segmented-field.separated-input.invalid { outline: var(--component-segmented-separated-invalid-outline-size) solid var(--component-segmented-separated-invalid-outline-color); outline-offset: var(--component-segmented-separated-invalid-outline-offset); } .segmented-field.separated-input.invalid input::placeholder {font-size: var(--component-segmented-separated-invalid-placeholder-font-size); font-weight: var(--component-segmented-separated-invalid-placeholder-font-weight); color: var(--component-segmented-separated-invalid-placeholder-color); } .segmented-field.separated-input.focus .segment-container { background-color: transparent; box-shadow: none; border: none; } .segmented-field.separated-input.focus .segment-separator { font-weight: var(--component-segmented-separated-focus-separator-font-weight); font-style: var(--component-segmented-separated-focus-separator-font-style); color: var(--component-segmented-separated-focus-separator-text-color); background-color: transparent; box-shadow: none; border: none; } .segmented-field.separated-input.focus div input { font-weight: var(--component-segmented-separated-focus-font-weight); font-style: var(--component-segmented-separated-focus-font-style); color: var(--component-segmented-separated-focus-text-color); background-color: var(--component-segmented-separated-focus-segment-background-color); box-shadow: var(--component-segmented-separated-focus-segment-shadow); border: var(--component-segmented-separated-focus-segment-border-size) solid var(--component-segmented-separated-focus-segment-border-color); } .segmented-field.separated-input.focus { outline: var(--component-segmented-separated-focus-outline-size) solid var(--component-segmented-separated-focus-outline-color); outline-offset: var(--component-segmented-separated-focus-outline-offset); } .segmented-field.separated-input.focus input::placeholder {font-size: var(--component-segmented-separated-focus-placeholder-font-size); font-weight: var(--component-segmented-separated-focus-placeholder-font-weight); color: var(--component-segmented-separated-focus-placeholder-color); } .segmented-field.separated-input[disabled] .segment-container { background-color: transparent; box-shadow: none; border: none; } .segmented-field.separated-input[disabled] .segment-separator { font-weight: var(--component-segmented-separated-disabled-separator-font-weight); font-style: var(--component-segmented-separated-disabled-separator-font-style); color: var(--component-segmented-separated-disabled-separator-text-color); background-color: transparent; box-shadow: none; border: none; } .segmented-field.separated-input[disabled] div input { font-weight: var(--component-segmented-separated-disabled-font-weight); font-style: var(--component-segmented-separated-disabled-font-style); color: var(--component-segmented-separated-disabled-text-color); background-color: var(--component-segmented-separated-disabled-segment-background-color); box-shadow: var(--component-segmented-separated-disabled-segment-shadow); border: var(--component-segmented-separated-disabled-segment-border-size) solid var(--component-segmented-separated-disabled-segment-border-color); } .segmented-field.separated-input[disabled] { outline: var(--component-segmented-separated-disabled-outline-size) solid var(--component-segmented-separated-disabled-outline-color); outline-offset: var(--component-segmented-separated-disabled-outline-offset); } .segmented-field.separated-input[disabled] input::placeholder {font-size: var(--component-segmented-separated-disabled-placeholder-font-size); font-weight: var(--component-segmented-separated-disabled-placeholder-font-weight); color: var(--component-segmented-separated-disabled-placeholder-color); } /* big input */ .segmented-field.separated-input.big-input .segment-container { padding: var(--component-segmented-big-padding); } .segmented-field.separated-input.big-input .segment-separator { font-size: var(--component-segmented-big-separator-font-size); font-weight: var(--component-segmented-big-separator-font-weight); font-style: var(--component-segmented-big-separator-font-style); line-height: var(--component-segmented-big-separator-line-height); padding: var(--component-segmented-big-separator-padding); } .segmented-field.separated-input.big-input div input, .segmented-field.separated-input.big-input div input.ng-untouched, .segmented-field.separated-input.big-input div input.ng-untouched { font-size: var(--component-segmented-big-font-size); font-weight: var(--component-segmented-big-font-weight); font-style: var(--component-segmented-big-font-style); line-height: var(--component-segmented-big-line-height); border-radius: var(--component-segmented-big-segment-border-radius); padding: var(--component-segmented-big-segment-padding-top) var(--component-segmented-big-segment-padding-right) var(--component-segmented-big-segment-padding-bottom) var(--component-segmented-big-segment-padding-left); } .segmented-field.separated-input.big-input div input { min-height: calc(var(--component-segmented-big-font-size) * var(--component-segmented-big-line-height) + var(--component-segmented-big-segment-padding-top) + var(--component-segmented-big-segment-padding-bottom)); line-height: var(--component-segmented-big-line-height); } .segmented-field.separated-input.big-input input::placeholder { font-size: var(--component-segmented-big-placeholder-font-size); font-weight: var(--component-segmented-big-placeholder-font-weight); } .segmented-field .segment-separator:first-child { padding: var(--component-segmented-big-separator-first-padding); } .segmented-field .segment-separator:last-child { padding: var(--component-segmented-big-separator-last-padding); } /* ---------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* signature field: signature-field.signature-field.[inline].[important].[empty].[focus].[invalid] | +--label.group-label.[label-small] | | | +--span.group-mainlabel | | | +--span.group-sublabel | +--label.mobile-group-label.[label-small] | | | +--span.mobile-group-mainlabel | | | +--span.mobile-group-sublabel | +--div.field-inner | +--{div.signature-field-button-container.signature-field-buttons-left} attributes "remove-button" "clear-button" "ok-button" "buttons-left" | | | +--button-field.signature-field-clear | | | +--button-field.signature-field-revert | | | +--button-field.signature-field-ok | +--div.signature-container | | | +--{div.signature-field-date-location-container} attributes "with-date" "with-location" | | | | | +--input-field.signature-field-location | | | | | +--date-field.signature-field-date | | | +--label.signature-inner-label | | | +--div.signature | | | +--canvas | +--{div.signature-field-button-container} attributes "remove-button" "clear-button" "ok-button" | +--button-field.signature-field-clear | +--button-field.signature-field-revert | +--button-field.signature-field-ok */ .signature-field { display: flex; flex-direction: var(--component-label-pos); margin: var(--component-signature-margin); } .signature-field.important {} /* todo */ .signature-field.label-top { flex-direction: column; } .signature-field .field-inner { display: flex; flex-direction: row; align-items: stretch; align-self: var(--component-signature-item-align); outline: var(--component-signature-outline-size) solid var(--component-signature-outline-color); outline-offset: var(--component-signature-outline-offset); } .signature-field.label-top .field-inner { align-self: normal; } .signature-field .signature-inner-label { flex: var(--component-mobile-label-area-ratio) var(--component-mobile-label-area-ratio) var(--component-mobile-label-area-base-width); font-family: var(--component-mobile-label-font); font-size: var(--component-mobile-label-font-size); font-weight: var(--component-mobile-label-font-weight); font-style: var(--component-mobile-label-font-style); text-decoration: var(--component-mobile-label-decoration); line-height: var(--component-mobile-label-line-height); color: var(--component-mobile-label-color); width: var(--component-mobile-label-area-size); margin: var(--component-mobile-label-margin); text-align: var(--component-mobile-label-textalign); align-self: var(--component-mobile-label-align); text-overflow: ellipsis; overflow: hidden; } .signature-field .signature-container { width: 100%; max-width: 100%; } .signature-field .signature-field-date-location-container { display: flex; flex-direction: row; column-gap: var(--component-inline-gap); } .signature-field .signature-field-location { } .signature-field .signature-field-date { min-width: 210px; max-width: 400px; margin-bottom: 0; } .signature-field .signature, .signature-field.ng-untouched .signature, .signature-field.ng-invalid.ng-untouched .signature, .signature-field .signature.ng-untouched, .signature-field .signature.ng-invalid.ng-untouched { width: 100%; max-width: 100%; min-height: 1px; height: var(--component-signature-height); max-height: var(--component-signature-max-height); margin: var(--component-signature-inner-margin); padding: 0; background-color: var(--component-signature-background-color); box-shadow: var(--component-signature-shadow); border-radius: var(--component-signature-border-radius); border: var(--component-signature-border-size) solid var(--component-signature-border-color); padding: var(--component-signature-padding); aspect-ratio: var(--component-signature-aspect-ratio); } .signature-field.important .signature { background-color: var(--component-signature-important-background-color); box-shadow: var(--component-signature-important-shadow); border: var(--component-signature-important-border-size) solid var(--component-signature-important-border-color); } .signature-field.important { outline: var(--component-signature-important-outline-size) solid var(--component-signature-important-outline-color); outline-offset: var(--component-signature-important-outline-offset); } .signature-field[required] .signature { background-color: var(--component-signature-required-background-color); box-shadow: var(--component-signature-required-shadow); border: var(--component-signature-required-border-size) solid var(--component-signature-required-border-color); } .signature-field[required] { outline: var(--component-signature-required-outline-size) solid var(--component-signature-required-outline-color); outline-offset: var(--component-signature-required-outline-offset); } .signature-field.empty .signature { background-color: var(--component-signature-empty-background-color); box-shadow: var(--component-signature-empty-shadow); border: var(--component-signature-empty-border-size) solid var(--component-signature-empty-border-color); } .signature-field.empty { outline: var(--component-signature-empty-outline-size) solid var(--component-signature-empty-outline-color); outline-offset: var(--component-signature-empty-outline-offset); } .signature-field.invalid .signature { background-color: var(--component-signature-invalid-background-color); box-shadow: var(--component-signature-invalid-shadow); border: var(--component-signature-invalid-border-size) solid var(--component-signature-invalid-border-color); } .signature-field.invalid { outline: var(--component-signature-invalid-outline-size) solid var(--component-signature-invalid-outline-color); outline-offset: var(--component-signature-invalid-outline-offset); } .signature-field.focus .signature { background-color: var(--component-signature-focus-background-color); box-shadow: var(--component-signature-focus-shadow); border: var(--component-signature-focus-border-size) solid var(--component-signature-focus-border-color); } .signature-field.focus { outline: var(--component-signature-focus-outline-size) solid var(--component-signature-focus-outline-color); outline-offset: var(--component-signature-focus-outline-offset); } .signature-field .signature[disabled] { background-color: var(--component-signature-disabled-background-color); box-shadow: var(--component-signature-disabled-shadow); border: var(--component-signature-disabled-border-size) solid var(--component-signature-disabled-border-color); } .signature-field[disabled] { outline: var(--component-signature-disabled-outline-size) solid var(--component-signature-disabled-outline-color); outline-offset: var(--component-signature-disabled-outline-offset); } .signature-field .field-inner { display: flex; flex-direction: var(--component-signature-button-container-pos); } .signature-field .signature { flex: 1 1 0; position: relative; } .signature-field-button-container { margin-left: var(--component-signature-button-container-margin); align-self: var(--component-signature-button-container-align); display: flex; flex-direction: var(--component-signature-button-pos); gap: var(--component-signature-button-gap); } .signature-field-button-container.signature-field-buttons-left { margin-left: 0; margin-right: var(--component-signature-button-container-margin); } .signature-field-button-container .button-field { margin: var(--component-signature-button-margin); } .signature-field canvas { width: 100%; height: 100%; } .signature-field .button-field { width: var(--component-signature-button-width); height: var(--component-signature-button-height); } .signature-field .button-field .field-inner, .signature-field .button-field button { width: 100%; } .signature-field .signature-field-button-container .signature-field-ok { margin-top: auto; } /* ---------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* static field: static-field.static-field.[inline].[important] | +--label.group-label.[label-small] | | | +--span.group-mainlabel | | | +--span.group-sublabel | +--label.mobile-group-label.[label-small] | | | +--span.mobile-group-mainlabel | | | +--span.mobile-group-sublabel | +--div.field-inner.[static-field-group-left].[static-field-group-right] | +--div.static-field-addon-left | | | +--span.{left-addon-class} | +--span | +--div.static-field-addon-right | +--span.{right-addon-class} */ .static-field { display: flex; flex-direction: var(--component-label-pos); margin: var(--component-static-margin); } .static-field.important {} /* todo */ .static-field.label-top { flex-direction: column; } .static-field .field-inner { align-self: var(--component-static-item-align); } .static-field.label-top .field-inner { align-self: normal; } .static-field .field-inner > span { padding: var(--component-static-padding); font-family: var(--component-static-font); font-size: var(--component-static-font-size); font-weight: var(--component-static-font-weight); font-style: var(--component-static-font-style); line-height: var(--component-static-line-height); color: var(--component-static-text-color); background-color: var(--component-static-background-color); box-shadow: var(--component-static-shadow); border-radius: var(--component-static-border-radius); border: var(--component-static-border-size) solid var(--component-static-border-color); outline: var(--component-static-outline-size) solid var(--component-static-outline-color); outline-offset: var(--component-static-outline-offset); display: inline-block; } .static-field .field-inner > span:after { content: "\00a0"; } /* ensure that the element height is always the same, even if empty */ .static-field[disabled] .field-inner > span { font-size: var(--component-static-disabled-font-weight); font-weight: var(--component-static-disabled-font-style); color: var(--component-static-disabled-text-color); background-color: var(--component-static-disabled-background-color); box-shadow: var(--component-static-disabled-shadow); border: var(--component-static-disabled-border-size) solid var(--component-static-disabled-border-color); outline: var(--component-static-disabled-outline-size) solid var(--component-static-disabled-outline-color); outline-offset: var(--component-static-disabled-outline-offset); } /* ---------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* select field: select-field.select-field.[select-field-multi].[inline].[important].[empty].[focus].[invalid] | +--label.group-label.[label-small] | | | +--span.group-mainlabel | | | +--span.group-sublabel | +--label.mobile-group-label.[label-small] | | | +--span.mobile-group-mainlabel | | | +--span.mobile-group-sublabel | +--div.field-inner | | | +--div.select-field-container | | | | | +--div.select-tag-list multi-select only | | | | | | | +--(multiple): div.select-tag multi-select only | | | | | | | +--span.select-tag-icon | | | | | | | | | +--img | | | | | | | +--div.select-tag-value | | | | | | | +--span.select-tag-x | | | | | +--span.select-field-icon non multi-select only | | | | | | | +--img | | | | | +--div.select-field-value non multi-select only | | | | | +--div.select-field-placeholder | | | +--div.select-field-caret | | | +--span.{caret-class} | +--div.select-option-list | +--div.select-field-search | | | +--input | +--div.select-option-list-container | | + +--(multiple): div.select-option-group | | | +--div.select-option-group-title | | | +--(multiple): select-option.select-option | | | +--span.select-option-icon | | | | | +--img | | | +--span.select-option-value | | | +--span.select-option-line1 optional for multi-line | | | +--span.select-option-line2 optional for multi-line | +--select-option.new-value */ .select-field { display: flex; flex-direction: var(--component-label-pos); margin: var(--component-select-margin); cursor: pointer; } .select-field.important {} /* todo */ .select-field.label-top { flex-direction: column; } .select-field .field-inner { display: flex; flex-direction: row; align-self: var(--component-select-item-align); } .select-field.label-top .field-inner { align-self: normal; } .select-field .select-field-container, .select-field.ng-invalid.ng-untouched .select-field-container { flex: 1 1 auto; overflow: hidden; -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 100%; max-width: 100%; min-width: 1px; margin: 0; padding: var(--component-select-padding); font-family: var(--component-select-font); font-size: var(--component-select-font-size); font-weight: var(--component-select-font-weight); font-style: var(--component-select-font-style); line-height: var(--component-select-line-height); color: var(--component-select-text-color); background-color: var(--component-select-background-color); box-shadow: var(--component-select-shadow); border-top-left-radius: var(--component-select-border-radius); border-bottom-left-radius: var(--component-select-border-radius); border: var(--component-select-border-size) solid var(--component-select-border-color); outline: var(--component-select-outline-size) solid var(--component-select-outline-color); outline-offset: var(--component-select-outline-offset); cursor: pointer; display: flex; flex-direction: row; align-items: center; min-height: var(--component-select-font-size); } .select-field .select-field-placeholder { font-family: var(--component-select-placeholder-font); font-size: var(--component-select-placeholder-font-size); font-weight: var(--component-select-placeholder-font-weight); color: var(--component-select-placeholder-color); flex: 1 1 auto; overflow: hidden; white-space: nowrap; } .select-field .select-field-value { font-family: inherit; font-size: inherit; font-weight: inherit; color: inherit; font-style: inherit; line-height: inherit; display: block; flex: 1 1 auto; min-height: var(--component-select-font-size); white-space: nowrap; } .select-field .select-field-icon { width: var(--component-select-icon-width); height: var(--component-select-icon-height); margin: var(--component-select-icon-margin); display: block; flex: none; } .select-field .select-field-icon img { width: var(--component-select-icon-width); height: var(--component-select-icon-height); } .select-field.important .select-field-container { font-weight: var(--component-select-important-font-weight); font-style: var(--component-select-important-font-style); color: var(--component-select-important-text-color); background-color: var(--component-select-important-background-color); box-shadow: var(--component-select-important-shadow); border: var(--component-select-important-border-size) solid var(--component-select-important-border-color); outline: var(--component-select-important-outline-size) solid var(--component-select-important-outline-color); outline-offset: var(--component-select-important-outline-offset); } .select-field.important .select-field-placeholder { font-size: var(--component-select-important-placeholder-font-size); font-weight: var(--component-select-important-placeholder-font-weight); color: var(--component-select-important-placeholder-color); } .select-field[required] .select-field-container { font-weight: var(--component-select-required-font-weight); font-style: var(--component-select-required-font-style); color: var(--component-select-required-text-color); background-color: var(--component-select-required-background-color); box-shadow: var(--component-select-required-shadow); border: var(--component-select-required-border-size) solid var(--component-select-required-border-color); outline: var(--component-select-required-outline-size) solid var(--component-select-required-outline-color); outline-offset: var(--component-select-required-outline-offset); } .select-field[required] .select-field-placeholder { font-size: var(--component-select-required-placeholder-font-size); font-weight: var(--component-select-required-placeholder-font-weight); color: var(--component-select-required-placeholder-color); } .select-field.empty .select-field-container { font-weight: var(--component-select-empty-font-weight); font-style: var(--component-select-empty-font-style); color: var(--component-select-empty-text-color); background-color: var(--component-select-empty-background-color); box-shadow: var(--component-select-empty-shadow); border: var(--component-select-empty-border-size) solid var(--component-select-empty-border-color); outline: var(--component-select-empty-outline-size) solid var(--component-select-empty-outline-color); outline-offset: var(--component-select-empty-outline-offset); } .select-field.empty .select-field-placeholder { font-size: var(--component-select-empty-placeholder-font-size); font-weight: var(--component-select-empty-placeholder-font-weight); color: var(--component-select-empty-placeholder-color); } .select-field.invalid .select-field-container { font-weight: var(--component-select-invalid-font-weight); font-style: var(--component-select-invalid-font-style); color: var(--component-select-invalid-text-color); background-color: var(--component-select-invalid-background-color); box-shadow: var(--component-select-invalid-shadow); border: var(--component-select-invalid-border-size) solid var(--component-select-invalid-border-color); outline: var(--component-select-invalid-outline-size) solid var(--component-select-invalid-outline-color); outline-offset: var(--component-select-invalid-outline-offset); } .select-field.invalid .select-field-placeholder { font-size: var(--component-select-invalid-placeholder-font-size); font-weight: var(--component-select-invalid-placeholder-font-weight); color: var(--component-select-invalid-placeholder-color); } .select-field.focus .select-field-container { font-weight: var(--component-select-focus-font-weight); font-style: var(--component-select-focus-font-style); color: var(--component-select-focus-text-color); background-color: var(--component-select-focus-background-color); box-shadow: var(--component-select-focus-shadow); border: var(--component-select-focus-border-size) solid var(--component-select-focus-border-color); outline: var(--component-select-focus-outline-size) solid var(--component-select-focus-outline-color); outline-offset: var(--component-select-focus-outline-offset); } .select-field.focus .select-field-placeholder { font-size: var(--component-select-focus-placeholder-font-size); font-weight: var(--component-select-focus-placeholder-font-weight); color: var(--component-select-focus-placeholder-color); } .select-field[disabled] .select-field-container { font-weight: var(--component-select-disabled-font-weight); font-style: var(--component-select-disabled-font-style); color: var(--component-select-disabled-text-color); background-color: var(--component-select-disabled-background-color); box-shadow: var(--component-select-disabled-shadow); border: var(--component-select-disabled-border-size) solid var(--component-select-disabled-border-color); outline: var(--component-select-disabled-outline-size) solid var(--component-select-disabled-outline-color); outline-offset: var(--component-select-disabled-outline-offset); } .select-field[disabled] .select-field-placeholder { font-size: var(--component-select-disabled-placeholder-font-size); font-weight: var(--component-select-disabled-placeholder-font-weight); color: var(--component-select-disabled-placeholder-color); } .select-field .select-field-caret, .select-field.ng-invalid.ng-untouched .select-field-caret { padding: var(--component-select-caret-padding); border-top-right-radius: var(--component-select-caret-border-radius); border-bottom-right-radius: var(--component-select-caret-border-radius); border: var(--component-select-caret-border-size) solid var(--component-select-caret-border-color); outline: var(--component-select-caret-outline-size) solid var(--component-select-caret-outline-color); outline-offset: var(--component-select-caret-outline-offset); background-color: var(--component-select-caret-background-color); border-left: none; min-width: var(--component-select-caret-width); flex: none; text-align: center; display: flex; align-items: center; justify-content: center; } .select-field.important .select-field-caret { border: var(--component-select-caret-important-border-size) solid var(--component-select-caret-important-border-color); outline: var(--component-select-caret-important-outline-size) solid var(--component-select-caret-important-outline-color); outline-offset: var(--component-select-caret-important-outline-offset); background-color: var(--component-select-caret-important-background-color); border-left: none; } .select-field[required] .select-field-caret { border: var(--component-select-caret-required-border-size) solid var(--component-select-caret-required-border-color); outline: var(--component-select-caret-required-outline-size) solid var(--component-select-caret-required-outline-color); outline-offset: var(--component-select-caret-required-outline-offset); background-color: var(--component-select-caret-required-background-color); border-left: none; } .select-field.empty .select-field-caret { border: var(--component-select-caret-empty-border-size) solid var(--component-select-caret-empty-border-color); outline: var(--component-select-caret-empty-outline-size) solid var(--component-select-caret-empty-outline-color); outline-offset: var(--component-select-caret-empty-outline-offset); background-color: var(--component-select-caret-empty-background-color); border-left: none; } .select-field.invalid .select-field-caret { border: var(--component-select-caret-invalid-border-size) solid var(--component-select-caret-invalid-border-color); outline: var(--component-select-caret-invalid-outline-size) solid var(--component-select-caret-invalid-outline-color); outline-offset: var(--component-select-caret-invalid-outline-offset); background-color: var(--component-select-caret-invalid-background-color); border-left: none; } .select-field.focus .select-field-caret { border: var(--component-select-caret-focus-border-size) solid var(--component-select-caret-focus-border-color); outline: var(--component-select-caret-focus-outline-size) solid var(--component-select-caret-focus-outline-color); outline-offset: var(--component-select-caret-focus-outline-offset); background-color: var(--component-select-caret-focus-background-color); border-left: none; } .select-field[disabled] .select-field-caret { border: var(--component-select-caret-disabled-border-size) solid var(--component-select-caret-disabled-border-color); outline: var(--component-select-caret-disabled-outline-size) solid var(--component-select-caret-disabled-outline-color); outline-offset: var(--component-select-caret-disabled-outline-offset); background-color: var(--component-select-caret-disabled-background-color); border-left: none; } .select-option-list, .select-option-list-clone { padding: var(--component-select-list-padding); font-family: var(--component-select-list-font); font-size: var(--component-select-list-font-size); font-weight: var(--component-select-list-font-weight); font-style: var(--component-select-list-font-style); line-height: var(--component-select-list-line-height); color: var(--component-select-list-text-color); background-color: var(--component-select-list-background-color); box-shadow: var(--component-select-list-shadow); border-radius: var(--component-select-list-border-radius); border: var(--component-select-list-border-size) solid var(--component-select-list-border-color); outline: var(--component-select-list-outline-size) solid var(--component-select-list-outline-color); outline-offset: var(--component-select-list-outline-offset); max-height: var(--component-select-list-max-height); position: absolute; left: 0; top: 100%; width: 100%; z-index: 60000; display: none; flex-direction: column; align-items: stretch; } .select-option-list .select-option-list-container, .select-option-list-clone .select-option-list-container { width: 100%; flex: 1 1 100%; overflow-y: auto; } .select-option-list:focus, .select-option-list-clone:focus { outline: var(--component-select-list-outline-size) solid var(--component-select-list-outline-color); } .select-option, .select-option-list-clone .select-option { padding: var(--component-select-option-padding); display: block; cursor: pointer; content-visibility: auto; } .select-option > div, .select-option-list-clone .select-option > div { display: flex; flex-direction: row; } .select-option .select-option-value, .select-option-list-clone .select-option-value { display: block; flex: 1 1 0; } .select-option-list:hover .selected, .select-option-list-clone:hover .selected { background-color: inherit; color: inherit; } .select-option:hover, .select-option.selected:hover, .select-option-list-clone .select-option:hover, .select-option-list-clone .select-option.selected:hover { color: var(--component-select-list-hover-text-color); background-color: var(--component-select-list-hover-background-color); } .select-option.selected, .select-option-list-clone .select-option.selected, .select-option.selected .select-option-line2, .select-option-list-clone .select-option.selected .select-option-line2 { color: var(--component-select-list-selected-text-color); background-color: var(--component-select-list-selected-background-color); } .select-field.select-field-multi .select-field-container { padding: var(--component-select-multiselect-padding); } .select-field.select-field-multi.empty .select-field-container { padding: var(--component-select-padding); } .select-field-multi .select-tag-list { display: flex; flex-direction: row; flex: 1 1 auto; flex-wrap: wrap; border-right: none; width: 100%; min-width: 1px; align-items: center; border: var(--component-select-tag-list-border-size) solid var(--component-select-tag-list-border-color); background-color: var(--component-select-tag-list-background-color); padding: var(--component-select-tag-list-padding); min-height: var(--component-select-font-size); } .select-field-multi[disabled] .select-tag-list { border: var(--component-select-tag-list-disabled-border-size) solid var(--component-select-tag-list-disabled-border-color); background-color: var(--component-select-tag-list-disabled-background-color); } .select-field-multi .select-tag { margin: var(--component-select-tag-margin); padding: var(--component-select-tag-padding); font-family: var(--component-select-tag-font); font-size: var(--component-select-tag-font-size); font-weight: var(--component-select-tag-font-weight); font-style: var(--component-select-tag-font-style); line-height: var(--component-select-tag-line-height); color: var(--component-select-tag-text-color); background-color: var(--component-select-tag-background-color); box-shadow: var(--component-select-tag-shadow); border-radius: var(--component-select-tag-border-radius); border: var(--component-select-tag-border-size) solid var(--component-select-tag-border-color); } .select-field-multi .select-tag:hover { font-weight: var(--component-select-tag-hover-font-weight); font-style: var(--component-select-tag-hover-font-style); color: var(--component-select-tag-hover-text-color); background-color: var(--component-select-tag-hover-background-color); box-shadow: var(--component-select-tag-hover-shadow); border-color: var(--component-select-tag-hover-border-color); } .select-field-multi .select-tag .select-tag-value { display: inline-block; } .select-field-multi .select-tag-x { height: auto; cursor: pointer; display: inline-block; padding: var(--component-select-tag-x-padding); font-family: var(--component-select-tag-x-font); font-size: var(--component-select-tag-x-font-size); font-weight: var(--component-select-tag-x-font-weight); font-style: var(--component-select-tag-x-font-style); color: var(--component-select-tag-x-text-color); position: relative; left: var(--component-select-tag-x-offset_x); top: var(--component-select-tag-x-offset_y); } .select-field-multi .select-tag-x:hover { font-weight: var(--component-select-tag-x-hover-font-weight); font-style: var(--component-select-tag-x-hover-font-style); color: var(--component-select-tag-x-hover-text-color); } .select-field-multi .select-option.selected, .select-option-list-multiselect-clone .select-option.selected { display: none; } .select-option-list .select-field-search { margin: var(--component-select-search-margin); max-width: 100%; display: flex; line-height: var(--component-select-search-line-height); flex: none; justify-content: stretch; } .select-option-list .select-field-search input { -webkit-appearance: none; -moz-appearance: none; appearance: none; display: block; flex: 1 1 auto; max-width: 100%; min-width: 1px; margin: 0; min-height: calc(var(--component-select-search-font-size) * var(--component-select-search-line-height)); height: 2px; line-height: var(--component-select-search-line-height); padding: var(--component-select-search-padding); font-family: var(--component-select-search-font); font-size: var(--component-select-search-font-size); font-weight: var(--component-select-search-font-weight); font-style: var(--component-select-search-font-style); line-height: var(--component-select-search-line-height); color: var(--component-select-search-text-color); box-shadow: var(--component-select-search-shadow); border-radius: var(--component-select-search-border-radius); border: var(--component-select-search-border-size) solid var(--component-select-search-border-color); outline: var(--component-select-search-outline-size) solid var(--component-select-search-outline-color); outline-offset: var(--component-select-search-outline-offset); background-color: var(--component-select-search-background-color); box-sizing: content-box; } .select-option .select-option-icon { max-height: 100%; width: var(--component-select-list-icon-width); height: var(--component-select-list-icon-height); margin: var(--component-select-list-icon-margin); display: inline-block; vertical-align: middle; flex: none; } .select-option .select-option-icon img { width: var(--component-select-list-icon-width); height: var(--component-select-list-icon-height); } .select-option .select-option-line1 { display: block; margin-bottom: var(--component-select-option-line1-margin); padding: var(--component-select-option-line1-padding);} .select-option .select-option-line2 { font-family: var(--component-select-option-line2-font); font-size: var(--component-select-option-line2-font-size); font-weight: var(--component-select-option-line2-font-weight); font-style: var(--component-select-option-line2-font-style); line-height: var(--component-select-option-line2-line-height); color: var(--component-select-option-line2-text-color); margin-bottom: var(--component-select-option-line2-margin); padding: var(--component-select-option-line2-padding); display: block; } .select-option:hover .select-option-line2, .select-option.selected:hover .select-option-line2, .select-option-list-clone .select-option:hover .select-option-line2, .select-option-list-clone .select-option.selected:hover .select-option-line2 { color: var(--component-select-option-line2-hover-text-color); background-color: var(--component-select-list-hover-background-color); } /* add button */ .select-field-add { color: var(--component-select-add-button-color); appearance: none; background: none; border: none; cursor: pointer; font-size: var(--component-select-add-button-font-size); padding: var(--component-select-add-button-padding); line-height: 1;} .select-field-add:hover { color: var(--component-select-add-button-hover-color); } .select-field-add:active { color: var(--component-select-add-button-active-color); } /* remove button */ .select-field-remove { color: var(--component-select-add-button-color); appearance: none; background: none; border: none; cursor: pointer; font-size: var(--component-select-add-button-font-size); padding: var(--component-select-add-button-padding); line-height: 1; flex: none; } .select-field-remove:hover { color: var(--component-select-add-button-hover-color); } .select-field-remove:active { color: var(--component-select-add-button-active-color); } /* ---------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* country field: country-field.country-field | +--select-field.select-field */ .country-field { display: flex; flex-direction: var(--component-label-pos); margin: var(--component-select-margin); cursor: pointer; } .country-field .select-field { margin: 0; } /* ---------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* language field: language-field.language-field.[language-field-locale].[language-field-language] | +--select-field.select-field */ .language-field { display: flex; flex-direction: var(--component-label-pos); margin: var(--component-select-margin); cursor: pointer; } .language-field .select-field { margin: 0; } /* ---------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* date/time field: date-field.date-field.[inline].[important].[empty].[focus].[invalid] | +--segmented-field | | | +--span.group-mainlabel | | | +--span.group-sublabel | +--label.mobile-group-label.[label-small] | | | +--span.mobile-group-mainlabel | | | +--span.mobile-group-sublabel | +--div.field-inner | +--button.date-field-button.date-field-button-left | | | +--span.{button-class} | +--input | +--button.date-field-button.date-field-button-right | | | +--span.{button-class} | +--div.date-field-time | +--input.date-field-hour | +--span ":" | +--input.date-field-minute | +--span ":" | +--input.date-field-second */ .date-field { margin: var(--component-input-margin); display: block; } .date-field-textarea {} .date-field div.field-inner { align-self: var(--component-date-item-align); outline: var(--component-date-outline-size) solid var(--component-date-outline-color); outline-offset: var(--component-date-outline-offset); } .date-field .segmented-field { margin-bottom: 0; } .date-field .segment-container { align-items: var(--component-date-container-align); font-family: var(--component-date-font); font-size: var(--component-date-font-size); font-weight: var(--component-date-font-weight); font-style: var(--component-date-font-style); line-height: var(--component-date-line-height); background-color: var(--component-date-background-color); box-shadow: var(--component-date-shadow); border-radius: var(--component-date-border-radius); border: var(--component-date-border-size) solid var(--component-date-border-color); padding: var(--component-date-padding); } .date-field .segment-separator { font-family: var(--component-date-font); font-size: var(--component-date-separator-font-size); font-weight: var(--component-date-separator-font-weight); font-style: var(--component-date-separator-font-style); line-height: var(--component-date-separator-line-height); color: var(--component-date-separator-text-color); background-color: var(--component-date-separator-background-color); box-shadow: var(--component-date-separator-shadow); border-radius: var(--component-date-separator-border-radius); border: var(--component-date-separator-border-size) solid var(--component-date-separator-border-color); padding: var(--component-date-separator-padding); } .date-field .segment-separator:first-child { padding: var(--component-date-separator-first-padding); } .date-field .segment-separator:last-child { padding: var(--component-date-separator-last-padding); } .date-field div input, .date-field div input.ng-untouched, .date-field div input.ng-untouched { font-family: var(--component-date-font); font-size: var(--component-date-font-size); font-weight: var(--component-date-font-weight); font-style: var(--component-date-font-style); line-height: var(--component-date-line-height); color: var(--component-date-text-color); background-color: var(--component-date-segment-background-color); box-shadow: var(--component-date-segment-shadow); border-radius: var(--component-date-segment-border-radius); border: var(--component-date-segment-border-size) solid var(--component-date-segment-border-color); padding: var(--component-date-segment-padding); } .date-field input::placeholder { font-family: var(--component-date-placeholder-font); font-size: var(--component-date-placeholder-font-size); font-weight: var(--component-date-placeholder-font-weight); color: var(--component-date-placeholder-color); } .date-field.important .segment-container { font-weight: var(--component-date-important-font-weight); font-style: var(--component-date-important-font-style); color: var(--component-date-important-text-color); background-color: var(--component-date-important-background-color); box-shadow: var(--component-date-important-shadow); border: var(--component-date-important-border-size) solid var(--component-date-important-border-color); } .date-field.important .segment-separator { font-weight: var(--component-date-important-separator-font-weight); font-style: var(--component-date-important-separator-font-style); color: var(--component-date-important-separator-text-color); background-color: var(--component-date-important-separator-background-color); box-shadow: var(--component-date-important-separator-shadow); border: var(--component-date-important-separator-border-size) solid var(--component-date-important-separator-border-color); } .date-field.important div input { font-weight: var(--component-date-important-font-weight); font-style: var(--component-date-important-font-style); color: var(--component-date-important-text-color); background-color: var(--component-date-important-segment-background-color); box-shadow: var(--component-date-important-segment-shadow); border: var(--component-date-important-segment-border-size) solid var(--component-date-important-segment-border-color); } .date-field.important { outline: var(--component-date-important-outline-size) solid var(--component-date-important-outline-color); outline-offset: var(--component-date-important-outline-offset); } .date-field.important input::placeholder { font-size: var(--component-date-important-placeholder-font-size); font-weight: var(--component-date-important-placeholder-font-weight); color: var(--component-date-important-placeholder-color); } .date-field[required] .segment-container { font-weight: var(--component-date-required-font-weight); font-style: var(--component-date-required-font-style); color: var(--component-date-required-text-color); background-color: var(--component-date-required-background-color); box-shadow: var(--component-date-required-shadow); border: var(--component-date-required-border-size) solid var(--component-date-required-border-color); } .date-field[required] .segment-separator { font-weight: var(--component-date-required-separator-font-weight); font-style: var(--component-date-required-separator-font-style); color: var(--component-date-required-separator-text-color); background-color: var(--component-date-required-separator-background-color); box-shadow: var(--component-date-required-separator-shadow); border: var(--component-date-required-separator-border-size) solid var(--component-date-required-separator-border-color); } .date-field[required] div input { font-weight: var(--component-date-required-font-weight); font-style: var(--component-date-required-font-style); color: var(--component-date-required-text-color); background-color: var(--component-date-required-segment-background-color); box-shadow: var(--component-date-required-segment-shadow); border: var(--component-date-required-segment-border-size) solid var(--component-date-required-segment-border-color); } .date-field[required] { outline: var(--component-date-required-outline-size) solid var(--component-date-required-outline-color); outline-offset: var(--component-date-required-outline-offset); } .date-field[required] input::placeholder { font-size: var(--component-date-required-placeholder-font-size); font-weight: var(--component-date-required-placeholder-font-weight); color: var(--component-date-required-placeholder-color); } .date-field.empty .segment-container { font-weight: var(--component-date-empty-font-weight); font-style: var(--component-date-empty-font-style); color: var(--component-date-empty-text-color); background-color: var(--component-date-empty-background-color); box-shadow: var(--component-date-empty-shadow); border: var(--component-date-empty-border-size) solid var(--component-date-empty-border-color); } .date-field.empty .segment-separator { font-weight: var(--component-date-empty-separator-font-weight); font-style: var(--component-date-empty-separator-font-style); color: var(--component-date-empty-separator-text-color); background-color: var(--component-date-empty-separator-background-color); box-shadow: var(--component-date-empty-separator-shadow); border: var(--component-date-empty-separator-border-size) solid var(--component-date-empty-separator-border-color); } .date-field.empty div input { font-weight: var(--component-date-empty-font-weight); font-style: var(--component-date-empty-font-style); color: var(--component-date-empty-text-color); background-color: var(--component-date-empty-segment-background-color); box-shadow: var(--component-date-empty-segment-shadow); border: var(--component-date-empty-segment-border-size) solid var(--component-date-empty-segment-border-color); } .date-field.empty { outline: var(--component-date-empty-outline-size) solid var(--component-date-empty-outline-color); outline-offset: var(--component-date-empty-outline-offset); } .date-field.empty input::placeholder { font-size: var(--component-date-empty-placeholder-font-size); font-weight: var(--component-date-empty-placeholder-font-weight); color: var(--component-date-empty-placeholder-color); } .date-field.ng-invalid.ng-dirty .segment-container { font-weight: var(--component-date-invalid-font-weight); font-style: var(--component-date-invalid-font-style); color: var(--component-date-invalid-text-color); background-color: var(--component-date-invalid-background-color); box-shadow: var(--component-date-invalid-shadow); border: var(--component-date-invalid-border-size) solid var(--component-date-invalid-border-color); } .date-field.ng-invalid.ng-dirty .segment-separator { font-weight: var(--component-date-invalid-separator-font-weight); font-style: var(--component-date-invalid-separator-font-style); color: var(--component-date-invalid-separator-text-color); background-color: var(--component-date-invalid-separator-background-color); box-shadow: var(--component-date-invalid-separator-shadow); border: var(--component-date-invalid-separator-border-size) solid var(--component-date-invalid-separator-border-color); } .date-field.ng-invalid.ng-dirty div input { font-weight: var(--component-date-invalid-font-weight); font-style: var(--component-date-invalid-font-style); color: var(--component-date-invalid-text-color); background-color: var(--component-date-invalid-segment-background-color); box-shadow: var(--component-date-invalid-segment-shadow); border: var(--component-date-invalid-segment-border-size) solid var(--component-date-invalid-segment-border-color); } .date-field.ng-invalid.ng-dirty { outline: var(--component-date-invalid-outline-size) solid var(--component-date-invalid-outline-color); outline-offset: var(--component-date-invalid-outline-offset); } .date-field.ng-invalid.ng-dirty input::placeholder { font-size: var(--component-date-invalid-placeholder-font-size); font-weight: var(--component-date-invalid-placeholder-font-weight); color: var(--component-date-invalid-placeholder-color); } .date-field.focus .segment-container { font-weight: var(--component-date-focus-font-weight); font-style: var(--component-date-focus-font-style); color: var(--component-date-focus-text-color); background-color: var(--component-date-focus-background-color); box-shadow: var(--component-date-focus-shadow); border: var(--component-date-focus-border-size) solid var(--component-date-focus-border-color); } .date-field.focus .segment-separator { font-weight: var(--component-date-focus-separator-font-weight); font-style: var(--component-date-focus-separator-font-style); color: var(--component-date-focus-separator-text-color); background-color: var(--component-date-focus-separator-background-color); box-shadow: var(--component-date-focus-separator-shadow); border: var(--component-date-focus-separator-border-size) solid var(--component-date-focus-separator-border-color); } .date-field.focus div input { font-weight: var(--component-date-focus-font-weight); font-style: var(--component-date-focus-font-style); color: var(--component-date-focus-text-color); background-color: var(--component-date-focus-segment-background-color); box-shadow: var(--component-date-focus-segment-shadow); border: var(--component-date-focus-segment-border-size) solid var(--component-date-focus-segment-border-color); } .date-field.focus { outline: var(--component-date-focus-outline-size) solid var(--component-date-focus-outline-color); outline-offset: var(--component-date-focus-outline-offset); } .date-field.focus input::placeholder { font-size: var(--component-date-focus-placeholder-font-size); font-weight: var(--component-date-focus-placeholder-font-weight); color: var(--component-date-focus-placeholder-color); } .date-field[disabled] .segment-container { font-weight: var(--component-date-disabled-font-weight); font-style: var(--component-date-disabled-font-style); color: var(--component-date-disabled-text-color); background-color: var(--component-date-disabled-background-color); box-shadow: var(--component-date-disabled-shadow); border: var(--component-date-disabled-border-size) solid var(--component-date-disabled-border-color); } .date-field[disabled] .segment-separator { font-weight: var(--component-date-disabled-separator-font-weight); font-style: var(--component-date-disabled-separator-font-style); color: var(--component-date-disabled-separator-text-color); background-color: var(--component-date-disabled-separator-background-color); box-shadow: var(--component-date-disabled-separator-shadow); border: var(--component-date-disabled-separator-border-size) solid var(--component-date-disabled-separator-border-color); } .date-field[disabled] div input { font-weight: var(--component-date-disabled-font-weight); font-style: var(--component-date-disabled-font-style); color: var(--component-date-disabled-text-color); background-color: var(--component-date-disabled-segment-background-color); box-shadow: var(--component-date-disabled-segment-shadow); border: var(--component-date-disabled-segment-border-size) solid var(--component-date-disabled-segment-border-color); } .date-field[disabled] { outline: var(--component-date-disabled-outline-size) solid var(--component-date-disabled-outline-color); outline-offset: var(--component-date-disabled-outline-offset); } .date-field[disabled] input::placeholder { font-size: var(--component-date-disabled-placeholder-font-size); font-weight: var(--component-date-disabled-placeholder-font-weight); color: var(--component-date-disabled-placeholder-color); } .date-field .date-field-addon-left, .date-field .date-field-addon-right { padding: var(--component-date-addon-padding); font-family: var(--component-date-addon-font); font-size: var(--component-date-addon-font-size); font-weight: var(--component-date-addon-font-weight); font-style: var(--component-date-addon-font-style); line-height: var(--component-date-addon-line-height); color: var(--component-date-addon-text-color); background-color: var(--component-date-addon-background-color); min-width: var(--component-date-addon-width); border: var(--component-date-border-size) solid var(--component-date-border-color); } .date-field.important .date-field-addon-left, .date-field.important .date-field-addon-right { font-weight: var(--component-date-addon-important-font-weight); font-style: var(--component-date-addon-important-font-style); color: var(--component-date-addon-important-text-color); background-color: var(--component-date-addon-important-background-color); border: var(--component-date-important-border-size) solid var(--component-date-important-border-color); } .date-field[required] .date-field-addon-left, .date-field[required] .date-field-addon-right { font-weight: var(--component-date-addon-required-font-weight); font-style: var(--component-date-addon-required-font-style); color: var(--component-date-addon-required-text-color); background-color: var(--component-date-addon-required-background-color); border: var(--component-date-required-border-size) solid var(--component-date-required-border-color); } .date-field.empty .date-field-addon-left, .date-field.empty .date-field-addon-right { font-weight: var(--component-date-addon-empty-font-weight); font-style: var(--component-date-addon-empty-font-style); color: var(--component-date-addon-empty-text-color); background-color: var(--component-date-addon-empty-background-color); border: var(--component-date-empty-border-size) solid var(--component-date-empty-border-color); } .date-field.invalid .date-field-addon-left, .date-field.invalid .date-field-addon-right { font-weight: var(--component-date-addon-invalid-font-weight); font-style: var(--component-date-addon-invalid-font-style); color: var(--component-date-addon-invalid-text-color); background-color: var(--component-date-addon-invalid-background-color); border: var(--component-date-invalid-border-size) solid var(--component-date-invalid-border-color); } .date-field[disabled] .date-field-addon-left, .date-field[disabled] .date-field-addon-right { font-weight: var(--component-date-addon-disabled-font-weight); font-style: var(--component-date-addon-disabled-font-style); color: var(--component-date-addon-disabled-text-color); background-color: var(--component-date-addon-disabled-background-color); border: var(--component-date-disabled-border-size) solid var(--component-date-disabled-border-color); } .date-field .date-field-addon-left, .date-field.important .date-field-addon-left, .date-field[required] .date-field-addon-left, .date-field.empty .date-field-addon-left, .date-field.invalid .date-field-addon-left, .date-field.focus .date-field-addon-left, .date-field[disabled] .date-field-addon-left { border-right: none; border-top-left-radius: var(--component-date-border-radius); border-bottom-left-radius: var(--component-date-border-radius); } .date-field .date-field-addon-right, .date-field.important .date-field-addon-right, .date-field[required] .date-field-addon-right, .date-field.empty .date-field-addon-right, .date-field.invalid .date-field-addon-right, .date-field.focus .date-field-addon-right, .date-field[disabled] .date-field-addon-right { border-left: none; border-top-right-radius: var(--component-date-border-radius); border-bottom-right-radius: var(--component-date-border-radius); } .date-field .date-field-group-left input { border-top-left-radius: 0; border-bottom-left-radius: 0; } .date-field .date-field-group-right input { border-top-right-radius: 0; border-bottom-right-radius: 0; } .date-field-day, .date-field-month, .date-field-month, .date-field-year2 { width: var(--component-date-day-width); } .date-field-year { width: var(--component-date-year-width); } .date-field-hour, .date-field-minute, .date-field-second { width: var(--component-date-time-width); } /* todo date-field popup */ /* ---------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* checkbox field: checkbox-field.checkbox-field.[inline].[important].[empty].[focus].[invalid] | +--label.group-label.[label-small] | | | +--span.group-mainlabel | | | +--span.group-sublabel | +--label.mobile-group-label.[label-small] | | | +--span.mobile-group-mainlabel | | | +--span.mobile-group-sublabel | +--div.field-inner | +--input[checkbox] | +--label.checkbox-label */ .checkbox-field { display: flex; flex-direction: var(--component-label-pos); margin: var(--component-checkbox-margin); } .checkbox-field.important {} /* todo */ .checkbox-field.label-top { flex-direction: column; } .checkbox-field .field-inner { align-self: var(--component-checkbox-item-align); } .checkbox-field.label-top .field-inner { align-self: normal; } .checkbox-field input + label span, .checkbox-field.ng-invalid input.ng-untouched + label span, .checkbox-field input.ng-invalid.ng-untouched + label span { padding: var(--component-checkbox-padding); font-family: var(--component-checkbox-font); font-size: var(--component-checkbox-font-size); font-weight: var(--component-checkbox-font-weight); font-style: var(--component-checkbox-font-style); line-height: var(--component-checkbox-line-height); color: var(--component-checkbox-text-color); outline: var(--component-checkbox-outline-size) solid var(--component-checkbox-outline-color); outline-offset: var(--component-checkbox-outline-offset); display: inline-block; } .checkbox-field.important input + label span { font-weight: var(--component-checkbox-important-font-weight); font-style: var(--component-checkbox-important-font-style); color: var(--component-checkbox-important-text-color); outline: var(--component-checkbox-important-outline-size) solid var(--component-checkbox-important-outline-color); outline-offset: var(--component-checkbox-important-outline-offset); } .checkbox-field[required] input + label span { font-weight: var(--component-checkbox-required-font-weight); font-style: var(--component-checkbox-required-font-style); color: var(--component-checkbox-required-text-color); outline: var(--component-checkbox-required-outline-size) solid var(--component-checkbox-required-outline-color); outline-offset: var(--component-checkbox-required-outline-offset); } .checkbox-field.empty input + label span { font-weight: var(--component-checkbox-empty-font-weight); font-style: var(--component-checkbox-empty-font-style); color: var(--component-checkbox-empty-text-color); outline: var(--component-checkbox-empty-outline-size) solid var(--component-checkbox-empty-outline-color); outline-offset: var(--component-checkbox-empty-outline-offset); } .checkbox-field.focus input + label span { font-weight: var(--component-checkbox-focus-font-weight); font-style: var(--component-checkbox-focus-font-style); color: var(--component-checkbox-focus-text-color); outline: var(--component-checkbox-focus-outline-size) solid var(--component-checkbox-focus-outline-color); outline-offset: var(--component-checkbox-focus-outline-offset); } .checkbox-field[disabled] input + label span { font-weight: var(--component-checkbox-disabled-font-weight); font-style: var(--component-checkbox-disabled-font-style); color: var(--component-checkbox-disabled-text-color); outline: var(--component-checkbox-disabled-outline-size) solid var(--component-checkbox-disabled-outline-color); outline-offset: var(--component-checkbox-disabled-outline-offset); } .checkbox-field input:not(:checked), .checkbox-field input:checked { position: absolute; left: -9999px; } .checkbox-field input:not(:checked) + label, .checkbox-field input:checked + label { position: relative; cursor: pointer; display: inline-block!important; min-height: 1em; padding-left: var(--component-checkbox-label-padding); } .checkbox-field input:not(:checked) + label:before, .checkbox-field input:checked + label:before { content: ''; position: absolute; width: var(--component-checkbox-box-size); height: var(--component-checkbox-box-size); border: var(--component-checkbox-box-border-size) solid var(--component-checkbox-box-color); border-radius: var(--component-checkbox-box-border-radius); background-color: var(--component-checkbox-box-background-color); left: 0; top: 50%; transform: translateY(-50%); } .checkbox-field.important input:not(:checked) + label:before, .checkbox-field.important input:checked + label:before { border-color: var(--component-checkbox-box-important-color); background-color: var(--component-checkbox-box-important-background-color); } .checkbox-field[required] input:not(:checked) + label:before, .checkbox-field[required] input:checked + label:before { border-color: var(--component-checkbox-box-required-color); background-color: var(--component-checkbox-box-required-background-color); } .checkbox-field.empty input:not(:checked) + label:before, .checkbox-field.empty input:checked + label:before { border-color: var(--component-checkbox-box-empty-color); background-color: var(--component-checkbox-box-empty-background-color); } .checkbox-field.invalid input:not(:checked) + label:before, .checkbox-field.invalid input:checked + label:before { border-color: var(--component-checkbox-box-invalid-color); background-color: var(--component-checkbox-box-invalid-background-color); } .checkbox-field.focus input:not(:checked) + label:before, .checkbox-field.focus input:checked + label:before { border-color: var(--component-checkbox-box-focus-color); background-color: var(--component-checkbox-box-focus-background-color); } .checkbox-field[disabled] input:not(:checked) + label:before, .checkbox-field[disabled] input:checked + label:before { border-color: var(--component-checkbox-box-disabled-color); background-color: var(--component-checkbox-box-disabled-background-color); } .checkbox-field input:not(:checked) + label:after, .checkbox-field input:checked + label:after { content: ''; transition: all var(--component-checkbox-dot-speed); position: absolute; border-radius: var(--component-checkbox-dot-border-radius); background-color: var(--component-checkbox-dot-color); width: var(--component-checkbox-dot-size); height: var(--component-checkbox-dot-size); left: calc((var(--component-checkbox-box-size) - var(--component-checkbox-dot-size)) / 2); top: 50%; transform: translateY(-50%); } .checkbox-field input:not(:checked) + label:after { opacity: 0; transform: translateY(-50%) scale(0); } .checkbox-field input:checked + label:after { opacity: 1; transform: translateY(-50%) scale(1); } .checkbox-field.important input:checked + label:after { background-color: var(--component-checkbox-dot-important-color); } .checkbox-field[required] input:checked + label:after { background-color: var(--component-checkbox-dot-required-color); } .checkbox-field.empty input:checked + label:after { background-color: var(--component-checkbox-dot-empty-color); } .checkbox-field.invalid input:checked + label:after { background-color: var(--component-checkbox-dot-invalid-color); } .checkbox-field.focus input:checked + label:after { background-color: var(--component-checkbox-dot-focus-color); } .checkbox-field[disabled] input:checked + label:after { background-color: var(--component-checkbox-dot-disabled-color); } /* ---------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* radio field: radio-field.radio-field.[inline].[important].[empty].[focus].[invalid] | +--label.group-label.[label-small] | | | +--span.group-mainlabel | | | +--span.group-sublabel | +--label.mobile-group-label.[label-small] | | | +--span.mobile-group-mainlabel | | | +--span.mobile-group-sublabel | +--div.radio-options | +--(multiple): radio-option.radio-option | +--div.field-inner | +--input[radio] | +--label.radio-option-label */ .radio-field { display: flex; flex-direction: var(--component-label-pos); margin: var(--component-radio-margin); } .radio-field.important {} /* todo */ .radio-field.label-top { flex-direction: column; } .radio-options { align-self: var(--component-radio-item-align); flex: var(--component-inner-area-ratio) var(--component-inner-area-ratio) 0; display: flex; flex-direction: var(--component-radio-option-direction); column-gap: var(--component-radio-option-gap); min-width: 0; flex-wrap: wrap; } .radio-field.label-top .radio-options { align-self: normal; } .radio-field input + label, .radio-field.ng-invalid input.ng-untouched + label, .radio-field input.ng-invalid.ng-untouched + label { padding: var(--component-radio-padding); font-family: var(--component-radio-font); font-size: var(--component-radio-font-size); font-weight: var(--component-radio-font-weight); font-style: var(--component-radio-font-style); line-height: var(--component-radio-line-height); color: var(--component-radio-text-color); outline: var(--component-radio-outline-size) solid var(--component-radio-outline-color); outline-offset: var(--component-radio-outline-offset); } .radio-field.important input + label { font-weight: var(--component-radio-important-font-weight); font-style: var(--component-radio-important-font-style); color: var(--component-radio-important-text-color); outline: var(--component-radio-important-outline-size) solid var(--component-radio-important-outline-color); outline-offset: var(--component-radio-important-outline-offset); } .radio-field[required] input + label { font-weight: var(--component-radio-required-font-weight); font-style: var(--component-radio-required-font-style); color: var(--component-radio-required-text-color); outline: var(--component-radio-required-outline-size) solid var(--component-radio-required-outline-color); outline-offset: var(--component-radio-required-outline-offset); } .radio-field.empty input + label { font-weight: var(--component-radio-empty-font-weight); font-style: var(--component-radio-empty-font-style); color: var(--component-radio-empty-text-color); outline: var(--component-radio-empty-outline-size) solid var(--component-radio-empty-outline-color); outline-offset: var(--component-radio-empty-outline-offset); } .radio-field.invalid input + label { font-weight: var(--component-radio-invalid-font-weight); font-style: var(--component-radio-invalid-font-style); color: var(--component-radio-invalid-text-color); outline: var(--component-radio-invalid-outline-size) solid var(--component-radio-invalid-outline-color); outline-offset: var(--component-radio-invalid-outline-offset); } .radio-field.focus input + label { font-weight: var(--component-radio-focus-font-weight); font-style: var(--component-radio-focus-font-style); color: var(--component-radio-focus-text-color); outline: var(--component-radio-focus-outline-size) solid var(--component-radio-focus-outline-color); outline-offset: var(--component-radio-focus-outline-offset); } .radio-field[disabled] input + label { font-weight: var(--component-radio-disabled-font-weight); font-style: var(--component-radio-disabled-font-style); color: var(--component-radio-disabled-text-color); outline: var(--component-radio-disabled-outline-size) solid var(--component-radio-disabled-outline-color); outline-offset: var(--component-radio-disabled-outline-offset); } .radio-field input:not(:checked), .radio-field input:checked { position: absolute; left: -9999px; } .radio-field input:not(:checked) + label, .radio-field input:checked + label { position: relative; cursor: pointer; display: inline-block!important; min-height: 1em; padding-left: var(--component-radio-label-padding); } .radio-field input:not(:checked) + label:before, .radio-field input:checked + label:before { content: ''; position: absolute; width: var(--component-radio-box-size); height: var(--component-radio-box-size); border: var(--component-radio-box-border-size) solid var(--component-radio-box-color); border-radius: var(--component-radio-box-border-radius); background-color: var(--component-radio-box-background-color); left: 0; top: 50%; transform: translateY(-50%); } .radio-field.important input:not(:checked) + label:before, .radio-field.important input:checked + label:before { border-color: var(--component-radio-box-important-color); background-color: var(--component-radio-box-important-background-color); } .radio-field[required] input:not(:checked) + label:before, .radio-field[required] input:checked + label:before { border-color: var(--component-radio-box-required-color); background-color: var(--component-radio-box-required-background-color); } .radio-field.empty input:not(:checked) + label:before, .radio-field.empty input:checked + label:before { border-color: var(--component-radio-box-empty-color); background-color: var(--component-radio-box-empty-background-color); } .radio-field.invalid input:not(:checked) + label:before, .radio-field.invalid input:checked + label:before { border-color: var(--component-radio-box-invalid-color); background-color: var(--component-radio-box-invalid-background-color); } .radio-field.focus input:not(:checked) + label:before, .radio-field.focus input:checked + label:before { border-color: var(--component-radio-box-focus-color); background-color: var(--component-radio-box-focus-background-color); } .radio-field[disabled] input:not(:checked) + label:before, .radio-field[disabled] input:checked + label:before { border-color: var(--component-radio-box-disabled-color); background-color: var(--component-radio-box-disabled-background-color); } .radio-field input:not(:checked) + label:after, .radio-field input:checked + label:after { content: ''; transition: all var(--component-radio-dot-speed); position: absolute; border-radius: var(--component-radio-dot-border-radius); background-color: var(--component-radio-dot-color); width: var(--component-radio-dot-size); height: var(--component-radio-dot-size); left: calc((var(--component-radio-box-size) - var(--component-radio-dot-size)) / 2); top: 50%; transform: translateY(-50%); } .radio-field input:not(:checked) + label:after { opacity: 0; transform: translateY(-50%) scale(0); } .radio-field input:checked + label:after { opacity: 1; transform: translateY(-50%) scale(1); } .radio-field.important input:checked + label:after { background-color: var(--component-radio-dot-important-color); } .radio-field[required] input:checked + label:after { background-color: var(--component-radio-dot-required-color); } .radio-field.empty input:checked + label:after { background-color: var(--component-radio-dot-empty-color); } .radio-field.invalid input:checked + label:after { background-color: var(--component-radio-dot-invalid-color); } .radio-field.focus input:checked + label:after { background-color: var(--component-radio-dot-focus-color); } .radio-field[disabled] input:checked + label:after { background-color: var(--component-radio-dot-disabled-color); } .radio-field .radio-option { margin-bottom: var(--component-radio-option-margin); margin-top: var(--component-radio-option-margin); } .radio-field .radio-option[disabled] input + label { font-weight: var(--component-radio-disabled-font-weight); font-style: var(--component-radio-disabled-font-style); color: var(--component-radio-disabled-text-color); outline: var(--component-radio-disabled-outline-size) solid var(--component-radio-disabled-outline-color); outline-offset: var(--component-radio-disabled-outline-offset); } .radio-field .radio-option[disabled] input:checked + label:after { background-color: var(--component-radio-dot-disabled-color); } .radio-field .radio-option[disabled] input:not(:checked) + label:before, .radio-field .radio-option[disabled] input:checked + label:before { border-color: var(--component-radio-box-disabled-color); background-color: var(--component-radio-box-disabled-background-color); } /* ---------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* rating field: rating-field.rating-field.[inline].[important].[empty].[focus].[invalid] | +--label.group-label.[label-small] | | | +--span.group-mainlabel | | | +--span.group-sublabel | +--label.mobile-group-label.[label-small] | | | +--span.mobile-group-mainlabel | | | +--span.mobile-group-sublabel | +--div.field-inner | +--(multiple): span.rating-X */ .rating-field { display: flex; flex-direction: var(--component-label-pos); margin: var(--component-rating-margin); } .rating-field.label-top { flex-direction: column; } .rating-field .field-inner { align-self: var(--component-rating-item-align); } .rating-field.label-top .field-inner { align-self: normal; } .rating-field .field-inner span { display: inline-block ;cursor: pointer; padding: var(--component-rating-star-padding); font-size: var(--component-rating-font-size); color: var(--component-rating-text-color); } .rating-field .field-inner { outline: var(--component-rating-outline-size) solid var(--component-rating-outline-color); outline-offset: var(--component-rating-outline-offset); } .rating-field.important .field-inner { outline: var(--component-rating-important-outline-size) solid var(--component-rating-important-outline-color); outline-offset: var(--component-rating-important-outline-offset); } .rating-field.important .field-inner span { color: var(--component-rating-important-text-color); } .rating-field[required] .field-inner { outline: var(--component-rating-required-outline-size) solid var(--component-rating-required-outline-color); outline-offset: var(--component-rating-required-outline-offset); } .rating-field[required] .field-inner span { color: var(--component-rating-required-text-color); } .rating-field.empty .field-inner { outline: var(--component-rating-empty-outline-size) solid var(--component-rating-empty-outline-color); outline-offset: var(--component-rating-empty-outline-offset); } .rating-field.empty .field-inner span { color: var(--component-rating-empty-text-color); } .rating-field.invalid .field-inner { outline: var(--component-rating-invalid-outline-size) solid var(--component-rating-invalid-outline-color); outline-offset: var(--component-rating-invalid-outline-offset); } .rating-field.invalid .field-inner span { color: var(--component-rating-invalid-text-color); } .rating-field.focus .field-inner { outline: var(--component-rating-focus-outline-size) solid var(--component-rating-focus-outline-color); outline-offset: var(--component-rating-focus-outline-offset); } .rating-field.focus .field-inner span { color: var(--component-rating-focus-text-color); } .rating-field .field-inner span:hover { color: var(--component-rating-hover-text-color); } .rating-field[disabled] .field-inner { outline: var(--component-rating-disabled-outline-size) solid var(--component-rating-disabled-outline-color); outline-offset: var(--component-rating-disabled-outline-offset); } .rating-field[disabled] .field-inner span { color: var(--component-rating-disabled-text-color); } /* ---------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* progressbar field: progressbar-field.progressbar-field.[inline].[progressbar-bar].[progressbar-steps].[progressbar-wizard].[progressbar-round].[progressbar-round-steps] | .[progressbar-small].[progressbar-wizard-round-caps].[progressbar-wizard-block].[progressbar-wizard-arrows-block] | .[progressbar-wizard-lines].[progressbar-wizard-lines-arrows].[clickable] | +--label.group-label.[label-small] | | | +--span.group-mainlabel | | | +--span.group-sublabel | +--label.mobile-group-label.[label-small] | | | +--span.mobile-group-mainlabel | | | +--span.mobile-group-sublabel | +--div.field-inner.[progressbar-field-group-left].[progressbar-field-group-right].[step-text-num-top].[step-text-text-top] | .[step-text-num-bottom].[step-text-text-bottom] | +--div.progressbar-field-addon-left | | | +--span.{left-addon-class} | +--div.progressbar-field-container | | | +--div.info-text.info-text-top | | | +--div.progressbar | | | | | +--div.progressbar-inner-container | | | | | +--div.indicator.indicator-top not for round bars | | | | | | | +--span | | | | | | | +--div.indicator.indicator-nose | | | | | +--div.bar-inner.[progress-color0].[progress-color25].[progress-color50].[progress-color75].[progress-color100] | | | | | | | +--div.bar-inner-text-inverted | | | | | +--div.bar-inner-text | | | | | +--(multiple): div.wizard-step.{wizard-active}.{wizard-done} wizard only | | | | | | | +--div.wizard-step-text-top | | | | | | | | | +--span.wizard-step-text-num | | | | | | | | | +--span.wizard-step-text-text | | | | | | | +--div.wizard-step-text | | | | | | | | | +--span.wizard-step-text-num | | | | | | | | | +--span.wizard-step-text-text | | | | | | | +--div.wizard-step-text-bottom | | | | | | | +--span.wizard-step-text-num | | | | | | | +--span.wizard-step-text-text | | | | | +--div.indicator.indicator-bottom not for round bars | | | | | +--span | | | | | +--div.indicator.indicator-nose | | | +--div.info-text.info-text-bottom | +--div.progressbar-field-addon-right | +--span.{right-addon-class} */ .progressbar-field { display: flex; flex-direction: var(--component-label-pos); margin: var(--component-progressbar-margin); } .progressbar-field:has(.info-text-top) { padding-top: calc(var(--component-progressbar-info-top-font-size) * var(--component-progressbar-info-top-line-height) + var(--component-progressbar-info-top-margin)); } .progressbar-field:has(.info-text-bottom) { padding-bottom: calc(var(--component-progressbar-info-bottom-font-size) * var(--component-progressbar-info-bottom-line-height) + var(--component-progressbar-info-bottom-margin)); } .progressbar-field.label-top { flex-direction: column; } .progressbar-field div.field-inner { display: flex; flex-direction: row; align-items: stretch; align-self: var(--component-progressbar-item-align); outline: var(--component-progressbar-outline-size) solid var(--component-progressbar-outline-color); outline-offset: var(--component-progressbar-outline-offset); position: relative; } .progressbar-field.label-top div.field-inner { align-self: normal; } .progressbar-field-container { flex: 1 1 auto; width: 100%; max-width: 100%; min-width: 1px; margin: 0; position: relative; } .progressbar-field.clickable { cursor: pointer; } /* top/bottom text */ .progressbar-field .info-text-top { font-family: var(--component-progressbar-info-top-font); font-size: var(--component-progressbar-info-top-font-size); font-weight: var(--component-progressbar-info-top-font-weight); font-style: var(--component-progressbar-info-top-font-style); color: var(--component-progressbar-info-top-text-color); line-height: var(--component-progressbar-info-top-line-height); text-align: var(--component-progressbar-info-top-text-align); position: absolute; width: 100%; top: calc(var(--component-progressbar-info-top-font-size) * var(--component-progressbar-info-top-line-height) * -1 - var(--component-progressbar-info-top-margin)); } .progressbar-field .info-text-bottom { font-family: var(--component-progressbar-info-bottom-font); font-size: var(--component-progressbar-info-bottom-font-size); font-weight: var(--component-progressbar-info-bottom-font-weight); font-style: var(--component-progressbar-info-bottom-font-style); color: var(--component-progressbar-info-bottom-text-color); line-height: var(--component-progressbar-info-bottom-line-height); text-align: var(--component-progressbar-info-bottom-text-align); position: absolute; width: 100%; bottom: calc(var(--component-progressbar-info-bottom-font-size) * var(--component-progressbar-info-bottom-line-height) * -1 - var(--component-progressbar-info-bottom-margin)); } /* indicator */ .progressbar-field .indicator { font-family: var(--component-progressbar-indicator-font); font-size: var(--component-progressbar-indicator-font-size); font-weight: var(--component-progressbar-indicator-font-weight); font-style: var(--component-progressbar-indicator-font-style); color: var(--component-progressbar-indicator-text-color); background-color: var(--component-progressbar-indicator-background-color); box-shadow: var(--component-progressbar-indicator-shadow); border-radius: var(--component-progressbar-indicator-border-radius); border: var(--component-progressbar-indicator-border-size) solid var(--component-progressbar-indicator-border-color); padding: var(--component-progressbar-indicator-padding); min-width: var(--component-progressbar-indicator-width); height: var(--component-progressbar-indicator-height); position: absolute; left: 0; z-index: 2; text-align: center; transform: translateX(-50%); line-height: var(--component-progressbar-indicator-height); } .progressbar-field .indicator-nose { position: absolute; width: 0; height: var(--component-progressbar-indicator-nose-height); } .progressbar-field .indicator-top { bottom: calc(var(--component-progressbar-height) + var(--component-progressbar-indicator-offset)); } .progressbar-field .indicator-top .indicator-nose { top: calc(var(--component-progressbar-indicator-height) - var(--component-progressbar-indicator-border-size)); left: 50%; transform: translateX(-50%); z-index: 3; border: var(--component-progressbar-indicator-nose-height) solid transparent; border-top: var(--component-progressbar-indicator-nose-height) solid var(--component-progressbar-indicator-border-color); } .progressbar-field .indicator-top .indicator-nose:before { content: ""; position: absolute; z-index: 4; bottom: calc(var(--component-progressbar-indicator-border-size) - var(--component-progressbar-indicator-nose-height)); left: 50%; transform: translateX(-50%); border: var(--component-progressbar-indicator-nose-height) solid transparent; border-top: var(--component-progressbar-indicator-nose-height) solid var(--component-progressbar-indicator-background-color); } .progressbar-field .indicator-bottom { top: calc(var(--component-progressbar-height) + var(--component-progressbar-indicator-offset)); } .progressbar-field .indicator-bottom .indicator-nose { bottom: calc(var(--component-progressbar-indicator-height) - var(--component-progressbar-indicator-border-size)); left: 50%; transform: translateX(-50%); z-index: 3; border: var(--component-progressbar-indicator-nose-height) solid transparent; border-bottom: var(--component-progressbar-indicator-nose-height) solid var(--component-progressbar-indicator-border-color); } .progressbar-field .indicator-bottom .indicator-nose:before { content: ""; position: absolute; z-index: 4; top: calc(var(--component-progressbar-indicator-border-size) - var(--component-progressbar-indicator-nose-height)); left: 50%; transform: translateX(-50%); border: var(--component-progressbar-indicator-nose-height) solid transparent; border-bottom: var(--component-progressbar-indicator-nose-height) solid var(--component-progressbar-indicator-background-color); } /* bar */ .progressbar-field .progressbar { width: 100%; height: var(--component-progressbar-height); background-color: var(--component-progressbar-background-color); box-shadow: var(--component-progressbar-shadow); border-radius: var(--component-progressbar-border-radius); border: var(--component-progressbar-border-size) solid var(--component-progressbar-border-color); padding: var(--component-progressbar-padding-top) var(--component-progressbar-padding-right) var(--component-progressbar-padding-bottom) var(--component-progressbar-padding-left); } .progressbar-field .progressbar-inner-container { position: relative; width: 100%; height: 100%; } .progressbar-field .bar-inner { height: 100%; background-color: var(--component-progressbar-color); border-top-left-radius: var(--component-progressbar-bar-radius); border-bottom-left-radius: var(--component-progressbar-bar-radius); border-top-right-radius: var(--component-progressbar-bar-tip-radius); border-bottom-right-radius: var(--component-progressbar-bar-tip-radius); position: absolute; left: 0; top: 0; overflow: hidden; } .progressbar-field.progressbar-steps .bar-inner { border-top-left-radius: var(--component-progressbar-bar-steps-radius); border-bottom-left-radius: var(--component-progressbar-bar-steps-radius); border-top-right-radius: var(--component-progressbar-bar-steps-tip-radius); border-bottom-right-radius: var(--component-progressbar-bar-steps-tip-radius); } .progressbar-field .bar-inner.progress-color0 { background-color: var(--component-progressbar-color0); } .progressbar-field .bar-inner.progress-color25 { background-color: var(--component-progressbar-color25); } .progressbar-field .bar-inner.progress-color50 { background-color: var(--component-progressbar-color50); } .progressbar-field .bar-inner.progress-color75 { background-color: var(--component-progressbar-color75); } .progressbar-field .bar-inner.progress-color100 { background-color: var(--component-progressbar-color100); } .progressbar-field .bar-inner-text { font-family: var(--component-progressbar-font); font-size: var(--component-progressbar-font-size); font-weight: var(--component-progressbar-font-weight); font-style: var(--component-progressbar-font-style); color: var(--component-progressbar-text-color); text-align: var(--component-progressbar-text-align); line-height: var(--component-progressbar-line-height); text-shadow: var(--component-progressbar-text-shadow); position: absolute; left: 0; z-index: 1; top: 50%; transform: translateY(-50%); width: 100%; } .progressbar-field .bar-inner-text-inverted { font-family: var(--component-progressbar-font); font-size: var(--component-progressbar-font-size); font-weight: var(--component-progressbar-font-weight); font-style: var(--component-progressbar-font-style); color: var(--component-progressbar-text-color-inverted); text-align: var(--component-progressbar-text-align); line-height: var(--component-progressbar-line-height); text-shadow: var(--component-progressbar-text-shadow-inverted); position: absolute; left: 0; z-index: 1; top: 50%; transform: translateY(-50%); width: 100%; } .progressbar-field.progressbar-steps .bar-inner { background-size: calc(var(--component-progressbar-step-width) + var(--component-progressbar-step-gap)); background-image: repeating-linear-gradient(90deg, var(--component-progressbar-color) 0px, var(--component-progressbar-color) var(--component-progressbar-step-width), var(--component-progressbar-background-color) var(--component-progressbar-step-width), var(--component-progressbar-background-color) calc(var(--component-progressbar-step-width) + var(--component-progressbar-step-gap))); } .progressbar-field.progressbar-steps .bar-inner.progress-color0 { background-image: repeating-linear-gradient(90deg, var(--component-progressbar-color0) 0px, var(--component-progressbar-color0) var(--component-progressbar-step-width), var(--component-progressbar-background-color) var(--component-progressbar-step-width), var(--component-progressbar-background-color) calc(var(--component-progressbar-step-width) + var(--component-progressbar-step-gap))); } .progressbar-field.progressbar-steps .bar-inner.progress-color25 { background-image: repeating-linear-gradient(90deg, var(--component-progressbar-color25) 0px, var(--component-progressbar-color25) var(--component-progressbar-step-width), var(--component-progressbar-background-color) var(--component-progressbar-step-width), var(--component-progressbar-background-color) calc(var(--component-progressbar-step-width) + var(--component-progressbar-step-gap))); } .progressbar-field.progressbar-steps .bar-inner.progress-color50 { background-image: repeating-linear-gradient(90deg, var(--component-progressbar-color50) 0px, var(--component-progressbar-color50) var(--component-progressbar-step-width), var(--component-progressbar-background-color) var(--component-progressbar-step-width), var(--component-progressbar-background-color) calc(var(--component-progressbar-step-width) + var(--component-progressbar-step-gap))); } .progressbar-field.progressbar-steps .bar-inner.progress-color75 { background-image: repeating-linear-gradient(90deg, var(--component-progressbar-color75) 0px, var(--component-progressbar-color75) var(--component-progressbar-step-width), var(--component-progressbar-background-color) var(--component-progressbar-step-width), var(--component-progressbar-background-color) calc(var(--component-progressbar-step-width) + var(--component-progressbar-step-gap))); } .progressbar-field.progressbar-steps .bar-inner.progress-color100 { background-image: repeating-linear-gradient(90deg, var(--component-progressbar-color100) 0px, var(--component-progressbar-color100) var(--component-progressbar-step-width), var(--component-progressbar-background-color) var(--component-progressbar-step-width), var(--component-progressbar-background-color) calc(var(--component-progressbar-step-width) + var(--component-progressbar-step-gap))); } /* wizard */ .progressbar-field.progressbar-wizard:has(.step-text-num-top) { --component-progressbar-wizard-extra-padding-top: calc(var(--component-progressbar-wizard-outside-num-height) + var(--component-progressbar-wizard-outside-top-margin)); } .progressbar-field.progressbar-wizard:has(.step-text-text-top) { --component-progressbar-wizard-extra-padding-top: calc(var(--component-progressbar-wizard-outside-text-font-size) * var(--component-progressbar-wizard-outside-text-line-height) + var(--component-progressbar-wizard-outside-top-margin)); } .progressbar-field.progressbar-wizard:has(.step-text-num-top.step-text-text-top) { --component-progressbar-wizard-extra-padding-top: calc(max(var(--component-progressbar-wizard-outside-num-height), var(--component-progressbar-info-top-font-size) * var(--component-progressbar-info-top-line-height)) + var(--component-progressbar-wizard-outside-top-margin)); } .progressbar-field.progressbar-wizard:has(.step-text-num-bottom) { --component-progressbar-wizard-extra-padding-bottom: calc(var(--component-progressbar-wizard-outside-num-height) + var(--component-progressbar-wizard-outside-bottom-margin)); } .progressbar-field.progressbar-wizard:has(.step-text-text-bottom) { --component-progressbar-wizard-extra-padding-bottom: calc(var(--component-progressbar-wizard-outside-text-font-size) * var(--component-progressbar-wizard-outside-text-line-height) + var(--component-progressbar-wizard-outside-bottom-margin)); } .progressbar-field.progressbar-wizard:has(.step-text-num-bottom.step-text-text-bottom) { --component-progressbar-wizard-extra-padding-bottom: calc(max(var(--component-progressbar-wizard-outside-num-height), var(--component-progressbar-info-bottom-font-size) * var(--component-progressbar-info-bottom-line-height)) + var(--component-progressbar-wizard-outside-bottom-margin)); } .progressbar-field.progressbar-wizard { padding-top: var(--component-progressbar-wizard-extra-padding-top); } .progressbar-field.progressbar-wizard { padding-bottom: var(--component-progressbar-wizard-extra-padding-bottom); } .progressbar-field.progressbar-wizard:has(.info-text-top) { padding-top: calc(var(--component-progressbar-wizard-extra-padding-top) + var(--component-progressbar-info-top-font-size) * var(--component-progressbar-info-top-line-height) + var(--component-progressbar-info-top-margin)); } .progressbar-field.progressbar-wizard:has(.info-text-bottom) { padding-bottom: calc(var(--component-progressbar-wizard-extra-padding-bottom) + var(--component-progressbar-info-bottom-font-size) * var(--component-progressbar-info-bottom-line-height) + var(--component-progressbar-info-bottom-margin)); } .progressbar-field.progressbar-wizard .progressbar { background-color: transparent; box-shadow: none; border-radius: 0; border: none; height: var(--component-progressbar-wizard-height); padding: var(--component-progressbar-wizard-padding-top) var(--component-progressbar-wizard-padding-right) var(--component-progressbar-wizard-padding-bottom) var(--component-progressbar-wizard-padding-left); } .progressbar-field.progressbar-wizard .progressbar-inner-container { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; position: relative; left: calc(var(--component-progressbar-wizard-item-height) / 2); } .progressbar-field .wizard-step { flex: 1 1 0; position: relative; background-color: var(--component-progressbar-wizard-background-color); height: var(--component-progressbar-wizard-item-height); display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: var(--component-progressbar-wizard-item-align); margin-right: calc(var(--component-progressbar-wizard-item-height) / 2 + var(--component-progressbar-wizard-item-gap-size)); cursor: default; } .progressbar-field .wizard-step:before { content: ""; position: absolute; top: 0; left: calc(var(--component-progressbar-wizard-item-height) / 2 * -1); border-left: calc(var(--component-progressbar-wizard-item-height) / 2) solid transparent; border-top: calc(var(--component-progressbar-wizard-item-height) / 2) solid var(--component-progressbar-wizard-background-color); border-bottom: calc(var(--component-progressbar-wizard-item-height) / 2) solid var(--component-progressbar-wizard-background-color); width: calc(var(--component-progressbar-wizard-item-height) / 2); height: var(--component-progressbar-wizard-item-height); } .progressbar-field .wizard-step:after { content: ""; position: absolute; top: 0; right: calc(var(--component-progressbar-wizard-item-height) / 2 * -1); border-left: calc(var(--component-progressbar-wizard-item-height) / 2) solid var(--component-progressbar-wizard-background-color); border-top: calc(var(--component-progressbar-wizard-item-height) / 2) solid transparent; border-bottom: calc(var(--component-progressbar-wizard-item-height) / 2) solid transparent; width: calc(var(--component-progressbar-wizard-item-height) / 2); height: var(--component-progressbar-wizard-item-height); } .progressbar-field .wizard-step.wizard-active { background-color: var(--component-progressbar-wizard-active-background-color); height: var(--component-progressbar-wizard-active-item-height); margin-right: calc(var(--component-progressbar-wizard-active-item-height) / 2 + var(--component-progressbar-wizard-item-gap-size)); } .progressbar-field .wizard-step.wizard-active:before { left: calc(var(--component-progressbar-wizard-active-item-height) / 2 * -1); border-left: calc(var(--component-progressbar-wizard-active-item-height) / 2) solid transparent; border-top: calc(var(--component-progressbar-wizard-active-item-height) / 2) solid var(--component-progressbar-wizard-active-background-color); border-bottom: calc(var(--component-progressbar-wizard-active-item-height) / 2) solid var(--component-progressbar-wizard-active-background-color); width: calc(var(--component-progressbar-wizard-active-item-height) / 2); height: var(--component-progressbar-wizard-active-item-height); } .progressbar-field .wizard-step.wizard-active:after { right: calc(var(--component-progressbar-wizard-active-item-height) / 2 * -1); border-left: calc(var(--component-progressbar-wizard-active-item-height) / 2) solid var(--component-progressbar-wizard-active-background-color); border-top: calc(var(--component-progressbar-wizard-active-item-height) / 2) solid transparent; border-bottom: calc(var(--component-progressbar-wizard-active-item-height) / 2) solid transparent; width: calc(var(--component-progressbar-wizard-active-item-height) / 2); height: var(--component-progressbar-wizard-active-item-height); } .progressbar-field .wizard-step.wizard-done { background-color: var(--component-progressbar-wizard-done-background-color); height: var(--component-progressbar-wizard-done-item-height); margin-right: calc(var(--component-progressbar-wizard-done-item-height) / 2 + var(--component-progressbar-wizard-item-gap-size)); cursor: pointer; } .progressbar-field .wizard-step.wizard-done:before { left: calc(var(--component-progressbar-wizard-done-item-height) / 2 * -1); border-left: calc(var(--component-progressbar-wizard-done-item-height) / 2) solid transparent; border-top: calc(var(--component-progressbar-wizard-done-item-height) / 2) solid var(--component-progressbar-wizard-done-background-color); border-bottom: calc(var(--component-progressbar-wizard-done-item-height) / 2) solid var(--component-progressbar-wizard-done-background-color); width: calc(var(--component-progressbar-wizard-done-item-height) / 2); height: var(--component-progressbar-wizard-done-item-height); } .progressbar-field .wizard-step.wizard-done:after { right: calc(var(--component-progressbar-wizard-done-item-height) / 2 * -1); border-left: calc(var(--component-progressbar-wizard-done-item-height) / 2) solid var(--component-progressbar-wizard-done-background-color); border-top: calc(var(--component-progressbar-wizard-done-item-height) / 2) solid transparent; border-bottom: calc(var(--component-progressbar-wizard-done-item-height) / 2) solid transparent; width: calc(var(--component-progressbar-wizard-done-item-height) / 2); height: var(--component-progressbar-wizard-done-item-height); } .progressbar-field .wizard-step-text-text { text-overflow: ellipsis; display: inline-block; cursor: default; } .progressbar-field .wizard-step-text-num { display: inline-block; text-align: center; cursor: default; } .progressbar-field .wizard-step-text .wizard-step-text-num { font-family: var(--component-progressbar-wizard-num-font); font-size: var(--component-progressbar-wizard-num-font-size); font-weight: var(--component-progressbar-wizard-num-font-weight); font-style: var(--component-progressbar-wizard-num-font-style); color: var(--component-progressbar-wizard-num-text-color); line-height: var(--component-progressbar-wizard-num-line-height); background-color: var(--component-progressbar-wizard-num-background-color); box-shadow: var(--component-progressbar-wizard-num-shadow); border-radius: var(--component-progressbar-wizard-num-border-radius); border: var(--component-progressbar-wizard-num-border-size) solid var(--component-progressbar-wizard-num-border-color); width: var(--component-progressbar-wizard-num-width); height: var(--component-progressbar-wizard-num-height); } .progressbar-field .wizard-step-text .wizard-step-text-num + .wizard-step-text-text { margin-left: var(--component-progressbar-wizard-num-gap); } .progressbar-field .wizard-step-text .wizard-step-text-text { font-family: var(--component-progressbar-wizard-text-font); font-size: var(--component-progressbar-wizard-text-font-size); font-weight: var(--component-progressbar-wizard-text-font-weight); font-style: var(--component-progressbar-wizard-text-font-style); color: var(--component-progressbar-wizard-text-text-color); line-height: var(--component-progressbar-wizard-text-line-height); } .progressbar-field .wizard-active .wizard-step-text .wizard-step-text-num { font-size: var(--component-progressbar-wizard-active-num-font-size); font-weight: var(--component-progressbar-wizard-active-num-font-weight); font-style: var(--component-progressbar-wizard-active-num-font-style); color: var(--component-progressbar-wizard-active-num-text-color); background-color: var(--component-progressbar-wizard-active-num-background-color); box-shadow: var(--component-progressbar-wizard-active-num-shadow); border-color: var(--component-progressbar-wizard-active-num-border-color); } .progressbar-field .wizard-active .wizard-step-text .wizard-step-text-text { font-size: var(--component-progressbar-wizard-active-text-font-size); font-weight: var(--component-progressbar-wizard-active-text-font-weight); font-style: var(--component-progressbar-wizard-active-text-font-style); color: var(--component-progressbar-wizard-active-text-text-color); } .progressbar-field .wizard-done .wizard-step-text .wizard-step-text-num { font-size: var(--component-progressbar-wizard-done-num-font-size); font-weight: var(--component-progressbar-wizard-done-num-font-weight); font-style: var(--component-progressbar-wizard-done-num-font-style); color: var(--component-progressbar-wizard-done-num-text-color); background-color: var(--component-progressbar-wizard-done-num-background-color); box-shadow: var(--component-progressbar-wizard-done-num-shadow); border-color: var(--component-progressbar-wizard-done-num-border-color); cursor: pointer; } .progressbar-field .wizard-done .wizard-step-text .wizard-step-text-text { font-size: var(--component-progressbar-wizard-done-text-font-size); font-weight: var(--component-progressbar-wizard-done-text-font-weight); font-style: var(--component-progressbar-wizard-done-text-font-style); color: var(--component-progressbar-wizard-done-text-text-color); cursor: pointer; } .progressbar-field .wizard-step-text-top, .progressbar-field .wizard-step-text-bottom { position: absolute; width: 100%; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: var(--component-progressbar-wizard-outside-align); } .progressbar-field .wizard-step-text-top .wizard-step-text-text, .progressbar-field .wizard-step-text-bottom .wizard-step-text-text { text-overflow: ellipsis; display: inline-block; cursor: default; } .progressbar-field .wizard-step-text-top .wizard-step-text-num, .progressbar-field .wizard-step-text-bottom .wizard-step-text-num { text-overflow: ellipsis; display: inline-block; cursor: default; } .progressbar-field .step-text-num-top .wizard-step-text-top { top: calc(var(--component-progressbar-wizard-outside-num-height) * -1 - var(--component-progressbar-wizard-outside-top-margin)); } /* number top */ .progressbar-field .step-text-text-top .wizard-step-text-top { top: calc(var(--component-progressbar-wizard-outside-text-font-size) * var(--component-progressbar-wizard-outside-text-line-height) * -1 - var(--component-progressbar-wizard-outside-top-margin)); } /* text top */ .progressbar-field .step-text-num-top.step-text-text-top .wizard-step-text-top { top: calc(max(var(--component-progressbar-wizard-outside-num-height), var(--component-progressbar-info-top-font-size) * var(--component-progressbar-info-top-line-height)) * -1 - var(--component-progressbar-wizard-outside-top-margin)); } /* number + text top */ .progressbar-field .step-text-num-bottom .wizard-step-text-bottom { bottom: calc(var(--component-progressbar-wizard-outside-num-height) * -1 - var(--component-progressbar-wizard-outside-bottom-margin)); } /* number bottom */ .progressbar-field .step-text-text-bottom .wizard-step-text-bottom { bottom: calc(var(--component-progressbar-wizard-outside-text-font-size) * var(--component-progressbar-wizard-outside-text-line-height) * -1 - var(--component-progressbar-wizard-outside-bottom-margin)); } /* text bottom */ .progressbar-field .step-text-num-bottom.step-text-text-bottom .wizard-step-text-bottom { bottom: calc(max(var(--component-progressbar-wizard-outside-num-height), var(--component-progressbar-info-bottom-font-size) * var(--component-progressbar-info-bottom-line-height)) * -1 - var(--component-progressbar-wizard-outside-bottom-margin)); } /* number + text bottom */ .progressbar-field .wizard-step-text-top .wizard-step-text-num , .progressbar-field .wizard-step-text-bottom .wizard-step-text-num { font-family: var(--component-progressbar-wizard-outside-num-font); font-size: var(--component-progressbar-wizard-outside-num-font-size); font-weight: var(--component-progressbar-wizard-outside-num-font-weight); font-style: var(--component-progressbar-wizard-outside-num-font-style); color: var(--component-progressbar-wizard-outside-num-text-color); line-height: var(--component-progressbar-wizard-outside-num-line-height); background-color: var(--component-progressbar-wizard-outside-num-background-color); box-shadow: var(--component-progressbar-wizard-outside-num-shadow); border-radius: var(--component-progressbar-wizard-outside-num-border-radius); border: var(--component-progressbar-wizard-outside-num-border-size) solid var(--component-progressbar-wizard-outside-num-border-color); width: var(--component-progressbar-wizard-outside-num-width); height: var(--component-progressbar-wizard-outside-num-height); } .progressbar-field .wizard-step-text-top .wizard-step-text-num + .wizard-step-text-text, .progressbar-field .wizard-step-text-bottom .wizard-step-text-num + .wizard-step-text-text { margin-left: var(--component-progressbar-wizard-outside-num-gap); } .progressbar-field .wizard-step-text-top .wizard-step-text-text, .progressbar-field .wizard-step-text-bottom .wizard-step-text-text { font-family: var(--component-progressbar-wizard-outside-text-font); font-size: var(--component-progressbar-wizard-outside-text-font-size); font-weight: var(--component-progressbar-wizard-outside-text-font-weight); font-style: var(--component-progressbar-wizard-outside-text-font-style); color: var(--component-progressbar-wizard-outside-text-text-color); line-height: var(--component-progressbar-wizard-outside-text-line-height); } /* wizard style: arrows-block */ .progressbar-field.progressbar-wizard-arrows-block .progressbar-inner-container { left: 0; } .progressbar-field.progressbar-wizard-arrows-block .wizard-step:first-child:before { display: none; } .progressbar-field.progressbar-wizard-arrows-block .wizard-step:last-child:after { display: none; } /* wizard style: block and round caps */ .progressbar-field.progressbar-wizard-block .progressbar-inner-container { left: 0; } .progressbar-field.progressbar-wizard-block .wizard-step:before { display: none; } .progressbar-field.progressbar-wizard-block .wizard-step:after { display: none; } .progressbar-field.progressbar-wizard-block .wizard-step { margin-right: var(--component-progressbar-wizard-block-gap-size); } .progressbar-field.progressbar-wizard-round-caps .wizard-step:first-child { border-top-left-radius: var(--component-progressbar-wizard-round-border-radius); border-bottom-left-radius: var(--component-progressbar-wizard-round-border-radius); } .progressbar-field.progressbar-wizard-round-caps .wizard-step:last-child { border-top-right-radius: var(--component-progressbar-wizard-round-border-radius); border-bottom-right-radius: var(--component-progressbar-wizard-round-border-radius); } /* wizard style: lines-arrows */ .progressbar-field.progressbar-wizard-lines-arrows .progressbar-inner-container { left: calc(var(--component-progressbar-wizard-lines-arrows-height) / 2); } .progressbar-field.progressbar-wizard-lines-arrows .wizard-step { background-color: var(--component-progressbar-wizard-lines-background-color); height: var(--component-progressbar-wizard-lines-arrows-height); justify-content: center; margin-right: calc(var(--component-progressbar-wizard-lines-arrows-height) / 2 + var(--component-progressbar-wizard-lines-arrows-gap-size)); } .progressbar-field.progressbar-wizard-lines-arrows .wizard-step:before { content: ""; position: absolute; top: 0; left: calc(var(--component-progressbar-wizard-lines-arrows-height) / 2 * -1); border-left: calc(var(--component-progressbar-wizard-lines-arrows-height) / 2) solid transparent; border-top: calc(var(--component-progressbar-wizard-lines-arrows-height) / 2) solid var(--component-progressbar-wizard-lines-background-color); border-bottom: calc(var(--component-progressbar-wizard-lines-arrows-height) / 2) solid var(--component-progressbar-wizard-lines-background-color); width: calc(var(--component-progressbar-wizard-lines-arrows-height) / 2); height: var(--component-progressbar-wizard-lines-arrows-height); } .progressbar-field.progressbar-wizard-lines-arrows .wizard-step:after { content: ""; position: absolute; top: 0; right: calc(var(--component-progressbar-wizard-lines-arrows-height) / 2 * -1); border-left: calc(var(--component-progressbar-wizard-lines-arrows-height) / 2) solid var(--component-progressbar-wizard-lines-background-color); border-top: calc(var(--component-progressbar-wizard-lines-arrows-height) / 2) solid transparent; border-bottom: calc(var(--component-progressbar-wizard-lines-arrows-height) / 2) solid transparent; width: calc(var(--component-progressbar-wizard-lines-arrows-height) / 2); height: var(--component-progressbar-wizard-lines-arrows-height); } .progressbar-field.progressbar-wizard-lines-arrows .wizard-step.wizard-active { background-color: var(--component-progressbar-wizard-lines-active-background-color); height: var(--component-progressbar-wizard-lines-arrows-active-height); margin-right: calc(var(--component-progressbar-wizard-lines-arrows-active-height) / 2 + var(--component-progressbar-wizard-lines-arrows-gap-size)); } .progressbar-field.progressbar-wizard-lines-arrows .wizard-step.wizard-active:before { left: calc(var(--component-progressbar-wizard-lines-arrows-active-height) / 2 * -1); border-left: calc(var(--component-progressbar-wizard-lines-arrows-active-height) / 2) solid transparent; border-top: calc(var(--component-progressbar-wizard-lines-arrows-active-height) / 2) solid var(--component-progressbar-wizard-lines-active-background-color); border-bottom: calc(var(--component-progressbar-wizard-lines-arrows-active-height) / 2) solid var(--component-progressbar-wizard-lines-active-background-color); width: calc(var(--component-progressbar-wizard-lines-arrows-active-height) / 2); height: var(--component-progressbar-wizard-lines-arrows-active-height); } .progressbar-field.progressbar-wizard-lines-arrows .wizard-step.wizard-active:after { right: calc(var(--component-progressbar-wizard-lines-arrows-active-height) / 2 * -1); border-left: calc(var(--component-progressbar-wizard-lines-arrows-active-height) / 2) solid var(--component-progressbar-wizard-lines-active-background-color); border-top: calc(var(--component-progressbar-wizard-lines-arrows-active-height) / 2) solid transparent; border-bottom: calc(var(--component-progressbar-wizard-lines-arrows-active-height) / 2) solid transparent; width: calc(var(--component-progressbar-wizard-lines-arrows-active-height) / 2); height: var(--component-progressbar-wizard-lines-arrows-active-height); } .progressbar-field.progressbar-wizard-lines-arrows .wizard-step.wizard-done { background-color: var(--component-progressbar-wizard-lines-done-background-color); height: var(--component-progressbar-wizard-lines-arrows-done-height); margin-right: calc(var(--component-progressbar-wizard-lines-arrows-done-height) / 2 + var(--component-progressbar-wizard-lines-arrows-gap-size)); } .progressbar-field.progressbar-wizard-lines-arrows .wizard-step.wizard-done:before { left: calc(var(--component-progressbar-wizard-lines-arrows-done-height) / 2 * -1); border-left: calc(var(--component-progressbar-wizard-lines-arrows-done-height) / 2) solid transparent; border-top: calc(var(--component-progressbar-wizard-lines-arrows-done-height) / 2) solid var(--component-progressbar-wizard-lines-done-background-color); border-bottom: calc(var(--component-progressbar-wizard-lines-arrows-done-height) / 2) solid var(--component-progressbar-wizard-lines-done-background-color); width: calc(var(--component-progressbar-wizard-lines-arrows-done-height) / 2); height: var(--component-progressbar-wizard-lines-arrows-done-height); } .progressbar-field.progressbar-wizard-lines-arrows .wizard-step.wizard-done:after { right: calc(var(--component-progressbar-wizard-lines-arrows-done-height) / 2 * -1); border-left: calc(var(--component-progressbar-wizard-lines-arrows-done-height) / 2) solid var(--component-progressbar-wizard-lines-done-background-color); border-top: calc(var(--component-progressbar-wizard-lines-arrows-done-height) / 2) solid transparent; border-bottom: calc(var(--component-progressbar-wizard-lines-arrows-done-height) / 2) solid transparent; width: calc(var(--component-progressbar-wizard-lines-arrows-done-height) / 2); height: var(--component-progressbar-wizard-lines-arrows-done-height); } .progressbar-field.progressbar-wizard-lines-arrows .wizard-step-text .wizard-step-text-num { font-size: var(--component-progressbar-wizard-lines-num-font-size); font-weight: var(--component-progressbar-wizard-lines-num-font-weight); font-style: var(--component-progressbar-wizard-lines-num-font-style); color: var(--component-progressbar-wizard-lines-num-text-color); line-height: var(--component-progressbar-wizard-lines-num-line-height); background-color: var(--component-progressbar-wizard-lines-num-background-color); box-shadow: none; border-radius: var(--component-progressbar-wizard-lines-num-border-radius); border: var(--component-progressbar-wizard-lines-num-border-size) solid var(--component-progressbar-wizard-lines-num-border-color); width: var(--component-progressbar-wizard-lines-num-width); height: var(--component-progressbar-wizard-lines-num-height); } .progressbar-field.progressbar-wizard-lines-arrows .wizard-active .wizard-step-text .wizard-step-text-num { font-size: var(--component-progressbar-wizard-lines-active-num-font-size); font-weight: var(--component-progressbar-wizard-lines-active-num-font-weight); font-style: var(--component-progressbar-wizard-lines-active-num-font-style); color: var(--component-progressbar-wizard-lines-active-num-text-color); background-color: var(--component-progressbar-wizard-lines-active-num-background-color); box-shadow: none; border-color: var(--component-progressbar-wizard-lines-active-num-border-color); } .progressbar-field.progressbar-wizard-lines-arrows .wizard-done .wizard-step-text .wizard-step-text-num { font-size: var(--component-progressbar-wizard-lines-done-num-font-size); font-weight: var(--component-progressbar-wizard-lines-done-num-font-weight); font-style: var(--component-progressbar-wizard-lines-done-num-font-style); color: var(--component-progressbar-wizard-lines-done-num-text-color); background-color: var(--component-progressbar-wizard-lines-done-num-background-color); box-shadow: none; border-color: var(--component-progressbar-wizard-lines-done-num-border-color); } .progressbar-field.progressbar-wizard-lines-arrows .wizard-step-text-top, .progressbar-field.progressbar-wizard-lines-arrows .wizard-step-text-bottom { justify-content: var(--component-progressbar-wizard-lines-arrows-text-align); } .progressbar-field.progressbar-wizard-lines-arrows .step-text-text-top .wizard-step-text-top { top: calc(var(--component-progressbar-wizard-outside-text-font-size) * var(--component-progressbar-wizard-outside-text-line-height) * -1 - var(--component-progressbar-wizard-lines-text-top-margin)); } .progressbar-field.progressbar-wizard-lines-arrows .step-text-text-bottom .wizard-step-text-bottom { bottom: calc(var(--component-progressbar-wizard-outside-text-font-size) * var(--component-progressbar-wizard-outside-text-line-height) * -1 - var(--component-progressbar-wizard-lines-text-bottom-margin)); } /* wizard style: lines only */ .progressbar-field.progressbar-wizard-lines-arrows.progressbar-wizard-lines .progressbar-inner-container { left: 0; } .progressbar-field.progressbar-wizard-lines-arrows.progressbar-wizard-lines .wizard-step { height: var(--component-progressbar-wizard-lines-height); margin-right: var(--component-progressbar-wizard-lines-gap-size); } .progressbar-field.progressbar-wizard-lines-arrows.progressbar-wizard-lines .wizard-step:before { display: none; } .progressbar-field.progressbar-wizard-lines-arrows.progressbar-wizard-lines .wizard-step:after { display: none; } .progressbar-field.progressbar-wizard-lines-arrows.progressbar-wizard-lines .wizard-step.wizard-active { height: var(--component-progressbar-wizard-lines-active-height); margin-right: var(--component-progressbar-wizard-lines-gap-size); } .progressbar-field.progressbar-wizard-lines-arrows.progressbar-wizard-lines .wizard-step.wizard-active:before { display: none; } .progressbar-field.progressbar-wizard-lines-arrows.progressbar-wizard-lines .wizard-step.wizard-active:after { display: none; } .progressbar-field.progressbar-wizard-lines-arrows.progressbar-wizard-lines .wizard-step.wizard-done { height: var(--component-progressbar-wizard-lines-done-height); margin-right: var(--component-progressbar-wizard-lines-gap-size); } .progressbar-field.progressbar-wizard-lines-arrows.progressbar-wizard-lines .wizard-step.wizard-done:before { display: none; } .progressbar-field.progressbar-wizard-lines-arrows.progressbar-wizard-lines .wizard-step.wizard-done:after { display: none; } .progressbar-field.progressbar-wizard-lines-arrows .wizard-step-text-top, .progressbar-field.progressbar-wizard-lines-arrows .wizard-step-text-bottom { justify-content: var(--component-progressbar-wizard-lines-text-align); } /* left and right addon */ .progressbar-field .progressbar-field-addon-left, .progressbar-field .progressbar-field-addon-right { text-align: center; -webkit-appearance: none; -moz-appearance: none; appearance: none; padding: var(--component-progressbar-addon-padding); font-family: var(--component-progressbar-addon-font); font-size: var(--component-progressbar-addon-font-size); font-weight: var(--component-progressbar-addon-font-weight); font-style: var(--component-progressbar-addon-font-style); line-height: var(--component-progressbar-addon-line-height); color: var(--component-progressbar-addon-text-color); background-color: var(--component-progressbar-addon-background-color); min-width: var(--component-progressbar-addon-width); border: var(--component-progressbar-border-size) solid var(--component-progressbar-border-color); display: flex; flex-direction: row; align-items: center; justify-content: center; line-height: 1; } .progressbar-field .progressbar-field-addon-left { border-right: none; border-top-left-radius: var(--component-progressbar-border-radius); border-bottom-left-radius: var(--component-progressbar-border-radius); } .progressbar-field .progressbar-field-addon-right { border-left: none; border-top-right-radius: var(--component-progressbar-border-radius); border-bottom-right-radius: var(--component-progressbar-border-radius); } .progressbar-field .progressbar-field-group-left .progressbar { border-top-left-radius: 0; border-bottom-left-radius: 0; } .progressbar-field .progressbar-field-group-right .progressbar { border-top-right-radius: 0; border-bottom-right-radius: 0; } /* small */ .progressbar-field.progressbar-small .progressbar { height: var(--component-progressbar-small-height); background-color: var(--component-progressbar-small-background-color); box-shadow: var(--component-progressbar-small-shadow); border-radius: var(--component-progressbar-small-border-radius); border: var(--component-progressbar-small-border-size) solid var(--component-progressbar-small-border-color); padding: var(--component-progressbar-small-padding-top) var(--component-progressbar-small-padding-right) var(--component-progressbar-small-padding-bottom) var(--component-progressbar-small-padding-left); } .progressbar-field.progressbar-small .indicator-top { bottom: calc(var(--component-progressbar-small-height) + var(--component-progressbar-small-indicator-offset)); } .progressbar-field.progressbar-small .indicator-bottom { top: calc(var(--component-progressbar-small-height) + var(--component-progressbar-small-indicator-offset)); } .progressbar-field.progressbar-small .bar-inner { border-top-left-radius: var(--component-progressbar-small-bar-radius); border-bottom-left-radius: var(--component-progressbar-small-bar-radius); border-top-right-radius: var(--component-progressbar-small-bar-tip-radius); border-bottom-right-radius: var(--component-progressbar-small-bar-tip-radius); } .progressbar-field.progressbar-small .info-text-top { font-family: var(--component-progressbar-small-info-top-font); font-size: var(--component-progressbar-small-info-top-font-size); font-weight: var(--component-progressbar-small-info-top-font-weight); font-style: var(--component-progressbar-small-info-top-font-style); color: var(--component-progressbar-small-info-top-text-color); line-height: var(--component-progressbar-small-info-top-line-height); text-align: var(--component-progressbar-small-info-top-text-align); position: absolute; width: 100%; top: calc(var(--component-progressbar-small-info-top-font-size) * var(--component-progressbar-small-info-top-line-height) * -1 - var(--component-progressbar-small-info-top-margin)); } .progressbar-field.progressbar-small .info-text-bottom { font-family: var(--component-progressbar-small-info-bottom-font); font-size: var(--component-progressbar-small-info-bottom-font-size); font-weight: var(--component-progressbar-small-info-bottom-font-weight); font-style: var(--component-progressbar-small-info-bottom-font-style); color: var(--component-progressbar-small-info-bottom-text-color); line-height: var(--component-progressbar-small-info-bottom-line-height); text-align: var(--component-progressbar-small-info-bottom-text-align); position: absolute; width: 100%; bottom: calc(var(--component-progressbar-small-info-bottom-font-size) * var(--component-progressbar-small-info-bottom-line-height) * -1 - var(--component-progressbar-small-info-bottom-margin)); } .progressbar-field .bar-inner-text { font-family: var(--component-progressbar-small-font); font-size: var(--component-progressbar-small-font-size); font-weight: var(--component-progressbar-small-font-weight); font-style: var(--component-progressbar-small-font-style); color: var(--component-progressbar-small-text-color); text-align: var(--component-progressbar-small-text-align); line-height: var(--component-progressbar-small-line-height); text-shadow: var(--component-progressbar-small-text-shadow); } .progressbar-field .bar-inner-text-inverted { font-family: var(--component-progressbar-small-font); font-size: var(--component-progressbar-small-font-size); font-weight: var(--component-progressbar-small-font-weight); font-style: var(--component-progressbar-small-font-style); color: var(--component-progressbar-small-text-color-inverted); text-align: var(--component-progressbar-small-text-align); line-height: var(--component-progressbar-small-line-height); text-shadow: var(--component-progressbar-small-text-shadow-inverted); } /* round */ .progressbar-field.progressbar-round .progressbar-field-container { flex: none; height: var(--component-progressbar-round-diameter); width: calc(var(--component-progressbar-round-diameter) + var(--component-progressbar-round-padding-right) + var(--component-progressbar-round-padding-left)); } .progressbar-field.progressbar-round .progressbar { display: flex; flex-direction: row; align-items: center; background-color: transparent; box-shadow: none; border-radius: 0; border: none; width: 100%; height: 100%; padding: var(--component-progressbar-round-padding-top) var(--component-progressbar-round-padding-right) var(--component-progressbar-round-padding-bottom) var(--component-progressbar-round-padding-left); } .progressbar-field.progressbar-round .progressbar-inner-container { position: relative; width: var(--component-progressbar-round-diameter); height: var(--component-progressbar-round-diameter); } .progressbar-field.progressbar-round .bar-inner { position: absolute; width: 100%; height: 100%; border-radius: 50%; background: conic-gradient(var(--component-progressbar-color) 0%, var(--component-progressbar-round-ring-background-color) 0); } .progressbar-field.progressbar-round .bar-inner:before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 50%; background-color: var(--component-progressbar-round-background-color); width: calc(var(--component-progressbar-round-diameter) - var(--component-progressbar-round-ring-size)); height: calc(var(--component-progressbar-round-diameter) - var(--component-progressbar-round-ring-size)); } .progressbar-field.progressbar-round .bar-inner-text { left: 50%; transform: translate(-50%, -50%); font-family: var(--component-progressbar-round-font); font-size: var(--component-progressbar-round-font-size); font-weight: var(--component-progressbar-round-font-weight); font-style: var(--component-progressbar-round-font-style); color: var(--component-progressbar-round-text-color); } .progressbar-field.progressbar-round .info-text-top { font-family: var(--component-progressbar-round-info-top-font); font-size: var(--component-progressbar-round-info-top-font-size); font-weight: var(--component-progressbar-round-info-top-font-weight); font-style: var(--component-progressbar-round-info-top-font-style); color: var(--component-progressbar-round-info-top-text-color); line-height: var(--component-progressbar-round-info-top-line-height); text-align: center; top: calc(var(--component-progressbar-round-info-top-font-size) * var(--component-progressbar-round-info-top-line-height) * -1 - var(--component-progressbar-round-info-top-margin)); } .progressbar-field.progressbar-round .info-text-bottom { font-family: var(--component-progressbar-round-info-bottom-font); font-size: var(--component-progressbar-round-info-bottom-font-size); font-weight: var(--component-progressbar-round-info-bottom-font-weight); font-style: var(--component-progressbar-round-info-bottom-font-style); color: var(--component-progressbar-round-info-bottom-text-color); line-height: var(--component-progressbar-round-info-bottom-line-height); text-align: center; bottom: calc(var(--component-progressbar-round-info-bottom-font-size) * var(--component-progressbar-round-info-bottom-line-height) * -1 - var(--component-progressbar-round-info-bottom-margin)); } /* ---------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* file select field: file-select-field.file-select-field.[inline].[important].[empty].[focus].[invalid] | +--label.group-label.[label-small] | | | +--span.group-mainlabel | | | +--span.group-sublabel | +--label.mobile-group-label.[label-small] | | | +--span.mobile-group-mainlabel | | | +--span.mobile-group-sublabel | +--div.field-inner | +--input.file-select-field-input | +--div.file-select-field-content | +--div.file-select-field-placeholder | +--div.file-select-field-preview | +--div.file-select-field-preview-img-container | | | +--img.file-select-field-preview-img | +--div.file-select-field-preview-name[.file-select-field-error] | +--span.file-select-field-preview-name-file | +--span.file-select-field-preview-name-size | +--button.file-select-clear */ .file-select-field { display: flex; flex-direction: var(--component-label-pos); margin: var(--component-file-select-margin); } .file-select-field.label-top { flex-direction: column; } .file-select-field-textarea {} .file-select-field div.field-inner { display: flex; flex-direction: row; align-items: stretch; align-self: var(--component-file-select-item-align); outline: var(--component-file-select-outline-size) solid var(--component-file-select-outline-color); outline-offset: var(--component-file-select-outline-offset); position: relative; } .file-select-field.label-top div.field-inner { align-self: normal; } .file-select-field div input { opacity: 0; position: absolute; -webkit-appearance: none; -moz-appearance: none; appearance: none; left: 0; top: 0; width: 100%; height: 100%; cursor: pointer; z-index: 1; } .file-select-field .file-select-field-content { flex: none; display: flex; flex-direction: row; align-items: center; cursor: pointer; width: 100%; max-width: 100%; min-width: 1px; margin: 0; min-height: var(--component-file-select-height); max-height: var(--component-file-select-max-height); font-family: var(--component-file-select-font); font-size: var(--component-file-select-font-size); font-weight: var(--component-file-select-font-weight); font-style: var(--component-file-select-font-style); line-height: var(--component-file-select-line-height); color: var(--component-file-select-text-color); background-color: var(--component-file-select-background-color); box-shadow: var(--component-file-select-shadow); border-radius: var(--component-file-select-border-radius); border: var(--component-file-select-border-size) solid var(--component-file-select-border-color); padding: var(--component-file-select-padding); } .file-select-field div.field-inner.dragover { outline: var(--component-file-select-dragover-outline-size) solid var(--component-file-select-dragover-outline-color); outline-offset: var(--component-file-select-dragover-outline-offset); } .file-select-field div.field-inner.dragover .file-select-field-content { color: var(--component-file-select-dragover-text-color); background-color: var(--component-file-select-dragover-background-color); box-shadow: var(--component-file-select-dragover-shadow); border-radius: var(--component-file-select-dragover-border-radius); border: var(--component-file-select-dragover-border-size) solid var(--component-file-select-dragover-border-color); } .file-select-field .file-select-field-preview { display: none; height: 100%; max-height: 100%; flex-direction: row; align-items: center; width: 100%; } .file-select-field .file-select-field-preview-name { cursor: pointer; flex: none; max-width: 100%; } .file-select-field .file-select-field-preview-name.file-select-field-error { color: var(--component-file-select-error-color); } .file-select-field .file-select-field-preview-name-size { font-size: var(--component-file-select-size-font-size); font-weight: var(--component-file-select-size-font-weight); font-style: var(--component-file-select-size-font-style); color: var(--component-file-select-size-text-color); padding-left: var(--component-file-select-size-padding); } .file-select-field .file-select-field-preview-name-size:before { content: var(--component-file-select-size-before); } .file-select-field .file-select-field-preview-name-size:after { content: var(--component-file-select-size-after); } .file-select-field .file-select-clear { position: relative; z-index: 2; margin-left: 5px; appearance: none; background-color: transparent; cursor: pointer; } .file-select-field .file-select-field-preview-img-container { max-height: 100%; height: 100%; flex: 1 1 100%; } .file-select-field .file-select-field-preview-img { cursor: pointer; flex: none; height: 100%; max-height: 100%; max-width: 100%; margin: var(--component-file-select-preview-img-margin); border: var(--component-file-select-preview-img-border-size) solid var(--component-file-select-preview-img-border-color); box-shadow: var(--component-file-select-preview-img-shadow); } .file-select-field .file-select-field-placeholder { font-family: var(--component-file-select-placeholder-font); font-size: var(--component-file-select-placeholder-font-size); font-weight: var(--component-file-select-placeholder-font-weight); color: var(--component-file-select-placeholder-color); cursor: pointer; } .file-select-field.important .file-select-field-content { font-weight: var(--component-file-select-important-font-weight); font-style: var(--component-file-select-important-font-style); color: var(--component-file-select-important-text-color); background-color: var(--component-file-select-important-background-color); box-shadow: var(--component-file-select-important-shadow); border: var(--component-file-select-important-border-size) solid var(--component-file-select-important-border-color); } .file-select-field.important { outline: var(--component-file-select-important-outline-size) solid var(--component-file-select-important-outline-color); outline-offset: var(--component-file-select-important-outline-offset); } .file-select-field.important .file-select-field-placeholder { font-weight: var(--component-file-select-important-placeholder-font-weight); font-size: var(--component-file-select-important-placeholder-font-size); color: var(--component-file-select-important-placeholder-color); } .file-select-field[required] .file-select-field-content { font-weight: var(--component-file-select-required-font-weight); font-style: var(--component-file-select-required-font-style); color: var(--component-file-select-required-text-color); background-color: var(--component-file-select-required-background-color); box-shadow: var(--component-file-select-required-shadow); border: var(--component-file-select-required-border-size) solid var(--component-file-select-required-border-color); } .file-select-field[required] { outline: var(--component-file-select-required-outline-size) solid var(--component-file-select-required-outline-color); outline-offset: var(--component-file-select-required-outline-offset); } .file-select-field[required] .file-select-field-placeholder { font-weight: var(--component-file-select-required-placeholder-font-weight); font-size: var(--component-file-select-required-placeholder-font-size); color: var(--component-file-select-required-placeholder-color); } .file-select-field.empty .file-select-field-content { font-weight: var(--component-file-select-empty-font-weight); font-style: var(--component-file-select-empty-font-style); color: var(--component-file-select-empty-text-color); background-color: var(--component-file-select-empty-background-color); box-shadow: var(--component-file-select-empty-shadow); border: var(--component-file-select-empty-border-size) solid var(--component-file-select-empty-border-color); } .file-select-field.empty { outline: var(--component-file-select-empty-outline-size) solid var(--component-file-select-empty-outline-color); outline-offset: var(--component-file-select-empty-outline-offset); } .file-select-field.empty .file-select-field-placeholder { font-weight: var(--component-file-select-empty-placeholder-font-weight); font-size: var(--component-file-select-empty-placeholder-font-size); color: var(--component-file-select-empty-placeholder-color); } .file-select-field.invalid .file-select-field-content { font-weight: var(--component-file-select-invalid-font-weight); font-style: var(--component-file-select-invalid-font-style); color: var(--component-file-select-invalid-text-color); background-color: var(--component-file-select-invalid-background-color); box-shadow: var(--component-file-select-invalid-shadow); border: var(--component-file-select-invalid-border-size) solid var(--component-file-select-invalid-border-color); } .file-select-field.invalid { outline: var(--component-file-select-invalid-outline-size) solid var(--component-file-select-invalid-outline-color); outline-offset: var(--component-file-select-invalid-outline-offset); } .file-select-field.invalid .file-select-field-placeholder { font-weight: var(--component-file-select-invalid-placeholder-font-weight); font-size: var(--component-file-select-invalid-placeholder-font-size); color: var(--component-file-select-invalid-placeholder-color); } .file-select-field.focus .file-select-field-content { font-weight: var(--component-file-select-focus-font-weight); font-style: var(--component-file-select-focus-font-style); color: var(--component-file-select-focus-text-color); background-color: var(--component-file-select-focus-background-color); box-shadow: var(--component-file-select-focus-shadow); border: var(--component-file-select-focus-border-size) solid var(--component-file-select-focus-border-color); } .file-select-field.focus { outline: var(--component-file-select-focus-outline-size) solid var(--component-file-select-focus-outline-color); outline-offset: var(--component-file-select-focus-outline-offset); } .file-select-field.focus .file-select-field-placeholder { font-weight: var(--component-file-select-focus-placeholder-font-weight); font-size: var(--component-file-select-focus-placeholder-font-size); color: var(--component-file-select-focus-placeholder-color); } .file-select-field[disabled] .file-select-field-content { font-weight: var(--component-file-select-disabled-font-weight); font-style: var(--component-file-select-disabled-font-style); color: var(--component-file-select-disabled-text-color); background-color: var(--component-file-select-disabled-background-color); box-shadow: var(--component-file-select-disabled-shadow); border: var(--component-file-select-disabled-border-size) solid var(--component-file-select-disabled-border-color); } .file-select-field[disabled] { outline: var(--component-file-select-disabled-outline-size) solid var(--component-file-select-disabled-outline-color); outline-offset: var(--component-file-select-disabled-outline-offset); } .file-select-field[disabled] .file-select-field-placeholder { font-weight: var(--component-file-select-disabled-placeholder-font-weight); font-size: var(--component-file-select-disabled-placeholder-font-size); color: var(--component-file-select-disabled-placeholder-color); } /* ---------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* tooltip: */ /* todo */ /* todo +info-button/window */ /* todo +hint-window */ /* ---------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* list field: list-field.list-field.[inline].[important].[empty] | +--label.group-label.[label-small] | | | +--span.group-mainlabel | | | +--span.group-sublabel | +--label.mobile-group-label.[label-small] | | | +--span.mobile-group-mainlabel | | | +--span.mobile-group-sublabel | +--div.field-inner | +--{div.list-field-add-container.list-field-add-top} attribute "add-button add-button-top" | | | +--button-field.list-field-add | +--div.list-items | | | +--(multiple): list-item.list-item | | | +--{button-field.list-field-remove.list-field-remove-left} attribute "remove-button remove-button-left" | | | +--div.list-item-content | | | +--{button-field.list-field-remove} attribute "remove-button remove-button-right" | +--{div.list-field-add-container} attribute "add-button" | +--button-field.list-field-add */ .list-field { display: flex; flex-direction: var(--component-label-pos); margin: var(--component-list-margin); } .list-field.label-top { flex-direction: column; } .list-field-add-container { margin: var(--component-list-add-margin); display: flex; flex-direction: column; justify-content: var(--component-list-add-align); } .list-field .field-inner { display: flex; flex-direction: var(--component-list-add-pos); } .list-field.label-top .field-inner { align-self: normal; } .list-items { flex: 1 1 0; display: flex; flex-direction: column; row-gap: var(--component-list-gap); } .list-item { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: var(--component-list-item-align); padding: var(--component-list-item-padding); border: var(--component-list-item-border-size) solid var(--component-list-item-border-color); border-radius: var(--component-list-item-border-radius); } .list-item-content { padding: var(--component-list-item-content-padding); flex: 1 1 0; } .list-field-remove { margin-left: var(--component-list-remove-margin); align-self: var(--component-list-remove-align); } .list-field-remove.list-field-remove-left { margin-left: -0; margin-right: var(--component-list-remove-margin); } .list-field-remove { width: var(--component-list-remove-button-width); height: var(--component-list-remove-button-height); margin-bottom: 0; margin-top: 0; } .list-field-remove .field-inner, .list-field-remove button { width: 100%; } .list-field-add { width: var(--component-list-add-button-width); height: var(--component-list-add-button-height); margin: 0; } .list-field-add .field-inner, .list-field-add button { width: 100%; } /* ---------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* number plate field: number-plate-field.number-plate-field.[inline].[important].[empty].[focus].[invalid] | +--label.group-label.[label-small] | | | +--span.group-mainlabel | | | +--span.group-sublabel | +--label.mobile-group-label.[label-small] | | | +--span.mobile-group-mainlabel | | | +--span.mobile-group-sublabel | +--div.field-inner | +--input-field.number-plate-field-input | +--select-field.number-plate-field-country optional | +--country-field.number-plate-field-country optional */ .number-plate-field { display: flex; flex-direction: var(--component-label-pos); margin: var(--component-numberplate-margin); } .number-plate-field.label-top { flex-direction: column; } .number-plate-field {} .number-plate-field .field-inner { display: flex; flex-direction: row; align-items: stretch; align-self: var(--component-numberplate-item-align); outline: var(--component-numberplate-outline-size) solid var(--component-numberplate-outline-color); outline-offset: var(--component-numberplate-outline-offset); position: relative; } .number-plate-field.label-top div.field-inner { align-self: normal; } .number-plate-field .input-field { width: var(--component-numberplate-width); max-width: var(--component-numberplate-width); margin: 0; } .number-plate-field .select-field, .number-plate-field .country-field { margin: 0; margin-left: var(--component-numberplate-gap); } .number-plate-field .country-field .select-field { margin-left: 0; } .number-plate-field .number-plate-city-name { font-family: var(--component-numberplate-city-font); max-width: 100%; white-space: nowrap; font-size: var(--component-numberplate-city-font-size); font-weight: var(--component-numberplate-city-font-weight); font-style: var(--component-numberplate-city-font-style); color: var(--component-numberplate-city-text-color); position: absolute; bottom: var(--component-numberplate-city-bottom); left: var(--component-numberplate-city-left); } .number-plate-field .input-field div input, .number-plate-field.ng-invalid .input-field div input.ng-untouched, .number-plate-field .input-field div input.ng-invalid.ng-untouched { font-family: var(--component-numberplate-font); font-size: var(--component-numberplate-font-size); font-weight: var(--component-numberplate-font-weight); font-style: var(--component-numberplate-font-style); line-height: var(--component-numberplate-line-height); color: var(--component-numberplate-text-color); background-color: var(--component-numberplate-background-color); box-shadow: var(--component-numberplate-shadow); border-radius: var(--component-numberplate-border-radius); border-bottom-left-radius: 0; border-top-left-radius: 0; border: var(--component-numberplate-border-size) solid var(--component-numberplate-border-color); padding: var(--component-numberplate-padding); } .number-plate-field.important .input-field div input, .number-plate-field.important div textarea { font-weight: var(--component-numberplate-important-font-weight); font-style: var(--component-numberplate-important-font-style); color: var(--component-numberplate-important-text-color); background-color: var(--component-numberplate-important-background-color); box-shadow: var(--component-numberplate-important-shadow); border: var(--component-numberplate-important-border-size) solid var(--component-numberplate-important-border-color); } .number-plate-field.important { outline: var(--component-numberplate-important-outline-size) solid var(--component-numberplate-important-outline-color); outline-offset: var(--component-numberplate-important-outline-offset); } .number-plate-field[required] .input-field div input { font-weight: var(--component-numberplate-required-font-weight); font-style: var(--component-numberplate-required-font-style); color: var(--component-numberplate-required-text-color); background-color: var(--component-numberplate-required-background-color); box-shadow: var(--component-numberplate-required-shadow); border: var(--component-numberplate-required-border-size) solid var(--component-numberplate-required-border-color); } .number-plate-field[required] { outline: var(--component-numberplate-required-outline-size) solid var(--component-numberplate-required-outline-color); outline-offset: var(--component-numberplate-required-outline-offset); } .number-plate-field.empty .input-field div input { font-weight: var(--component-numberplate-empty-font-weight); font-style: var(--component-numberplate-empty-font-style); color: var(--component-numberplate-empty-text-color); background-color: var(--component-numberplate-empty-background-color); box-shadow: var(--component-numberplate-empty-shadow); border: var(--component-numberplate-empty-border-size) solid var(--component-numberplate-empty-border-color); } .number-plate-field.empty { outline: var(--component-numberplate-empty-outline-size) solid var(--component-numberplate-empty-outline-color); outline-offset: var(--component-numberplate-empty-outline-offset); } .number-plate-field.invalid .input-field div input { font-weight: var(--component-numberplate-invalid-font-weight); font-style: var(--component-numberplate-invalid-font-style); color: var(--component-numberplate-invalid-text-color); background-color: var(--component-numberplate-invalid-background-color); box-shadow: var(--component-numberplate-invalid-shadow); border: var(--component-numberplate-invalid-border-size) solid var(--component-numberplate-invalid-border-color); } .number-plate-field.invalid { outline: var(--component-numberplate-invalid-outline-size) solid var(--component-numberplate-invalid-outline-color); outline-offset: var(--component-numberplate-invalid-outline-offset); } .number-plate-field.focus .input-field div input { font-weight: var(--component-numberplate-focus-font-weight); font-style: var(--component-numberplate-focus-font-style); color: var(--component-numberplate-focus-text-color); background-color: var(--component-numberplate-focus-background-color); box-shadow: var(--component-numberplate-focus-shadow); border: var(--component-numberplate-focus-border-size) solid var(--component-numberplate-focus-border-color); } .number-plate-field.focus { outline: var(--component-numberplate-focus-outline-size) solid var(--component-numberplate-focus-outline-color); outline-offset: var(--component-numberplate-focus-outline-offset); } .number-plate-field[disabled] .input-field div input { font-weight: var(--component-numberplate-disabled-font-weight); font-style: var(--component-numberplate-disabled-font-style); color: var(--component-numberplate-disabled-text-color); background-color: var(--component-numberplate-disabled-background-color); box-shadow: var(--component-numberplate-disabled-shadow); border: var(--component-numberplate-disabled-border-size) solid var(--component-numberplate-disabled-border-color); } .number-plate-field[disabled] { outline: var(--component-numberplate-disabled-outline-size) solid var(--component-numberplate-disabled-outline-color); outline-offset: var(--component-numberplate-disabled-outline-offset); } /* left addon with country name */ .number-plate-field .input-field-addon-left { text-align: center; -webkit-appearance: none; -moz-appearance: none; appearance: none; display: block; padding: var(--component-numberplate-addon-padding); font-family: var(--component-numberplate-addon-font); font-size: var(--component-numberplate-addon-font-size); font-weight: var(--component-numberplate-addon-font-weight); font-style: var(--component-numberplate-addon-font-style); line-height: var(--component-numberplate-addon-line-height); color: var(--component-numberplate-addon-text-color); background-color: var(--component-numberplate-addon-background-color); min-width: var(--component-numberplate-addon-width); border: var(--component-numberplate-border-size) solid var(--component-numberplate-border-color); } .number-plate-field.important .input-field-addon-left { font-weight: var(--component-numberplate-addon-important-font-weight); font-style: var(--component-numberplate-addon-important-font-style); color: var(--component-numberplate-addon-important-text-color); background-color: var(--component-numberplate-addon-important-background-color); border: var(--component-numberplate-important-border-size) solid var(--component-numberplate-important-border-color); } .number-plate-field[required] .input-field-addon-left { font-weight: var(--component-numberplate-addon-required-font-weight); font-style: var(--component-numberplate-addon-required-font-style); color: var(--component-numberplate-addon-required-text-color); background-color: var(--component-numberplate-addon-required-background-color); border: var(--component-numberplate-required-border-size) solid var(--component-numberplate-required-border-color); } .number-plate-field.empty .input-field-addon-left { font-weight: var(--component-numberplate-addon-empty-font-weight); font-style: var(--component-numberplate-addon-empty-font-style); color: var(--component-numberplate-addon-empty-text-color); background-color: var(--component-numberplate-addon-empty-background-color); border: var(--component-numberplate-empty-border-size) solid var(--component-numberplate-empty-border-color); } .number-plate-field.invalid .input-field-addon-left { font-weight: var(--component-numberplate-addon-invalid-font-weight); font-style: var(--component-numberplate-addon-invalid-font-style); color: var(--component-numberplate-addon-invalid-text-color); background-color: var(--component-numberplate-addon-invalid-background-color); border: var(--component-numberplate-invalid-border-size) solid var(--component-numberplate-invalid-border-color); } .number-plate-field.focus .input-field-addon-left { font-weight: var(--component-numberplate-addon-focus-font-weight); font-style: var(--component-numberplate-addon-focus-font-style); color: var(--component-numberplate-addon-focus-text-color); background-color: var(--component-numberplate-addon-focus-background-color); border: var(--component-numberplate-focus-border-size) solid var(--component-numberplate-focus-border-color); } .number-plate-field[disabled] .input-field-addon-left { font-weight: var(--component-numberplate-addon-disabled-font-weight); font-style: var(--component-numberplate-addon-disabled-font-style); color: var(--component-numberplate-addon-disabled-text-color); background-color: var(--component-numberplate-addon-disabled-background-color); border: var(--component-numberplate-disabled-border-size) solid var(--component-numberplate-disabled-border-color); } .number-plate-field .input-field-addon-left, .number-plate-field.important .input-field-addon-left, .number-plate-field[required] .input-field-addon-left, .number-plate-field.empty .input-field-addon-left, .number-plate-field.invalid .input-field-addon-left, .number-plate-field.focus .input-field-addon-left .number-plate-field[disabled] .input-field-addon-left { border-right: none; border-top-left-radius: var(--component-numberplate-border-radius); border-bottom-left-radius: var(--component-numberplate-border-radius); } .number-plate-field .input-field-group-left input { border-top-left-radius: 0; border-bottom-left-radius: 0; } .number-plate-field .input-field-addon-left { position: relative; } .number-plate-field .input-field-addon-left span { position: absolute; left: 0; text-align: center; width: 100%; bottom: var(--component-numberplate-addon-offset); } .number-plate-field .number-plate-field-input.format-type-eu .input-field-addon-left { background-image: url(../lib/number_plate/number_plate_eu.svg); background-repeat: no-repeat; background-size: auto 100%; color: white; } .number-plate-field .number-plate-field-input.format-type-eu .input-field-group-left input { border-left: none; } .number-plate-field .number-plate-field-input.country-nl .input-field-addon-left, .number-plate-field .number-plate-field-input.country-nl input { background-color: #fad20e; } .number-plate-field .number-plate-field-input.country-lu .input-field-addon-left, .number-plate-field .number-plate-field-input.country-lu input { background-color: #fad20e; } .number-plate-field .number-plate-field-input.country-gb .input-field-addon-left, .number-plate-field .number-plate-field-input.country-gb input { background-color: #fad20e; } .number-plate-field .number-plate-field-input.country-xs .input-field-addon-left, .number-plate-field .number-plate-field-input.country-me .input-field-addon-left, .number-plate-field .number-plate-field-input.country-xk .input-field-addon-left, .number-plate-field .number-plate-field-input.country-al .input-field-addon-left, .number-plate-field .number-plate-field-input.country-mk .input-field-addon-left { color: white; background-color: #2142a4; } /* ---------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* image field: image-field.image-field.[inline].[important].[empty].[focus].[invalid] | +--label.group-label.[label-small] | | | +--span.group-mainlabel | | | +--span.group-sublabel | +--label.mobile-group-label.[label-small] | | | +--span.mobile-group-mainlabel | | | +--span.mobile-group-sublabel | +--div.field-inner | +--{div.image-field-button-container.image-field-buttons-left} attributes "remove-button" "upload-button" "buttons-left" | | | +--button-field.image-field-upload | | | +--button-field.image-field-remove | +--div.image-field-container.[image-placeholder] | | | +--img.image-field-image | +--{div.image-field-button-container} attributes "remove-button" "upload-button" | +--button-field.image-field-upload | +--button-field.image-field-remove */ .image-field { display: flex; flex-direction: var(--component-label-pos); margin: var(--component-image-margin); } .image-field.label-top { flex-direction: column; } .image-field .field-inner { } .image-field.label-top .field-inner { align-self: normal; } .image-field .field-inner { display: flex; flex-direction: var(--component-image-button-container-pos); align-items: stretch; align-self: var(--component-image-item-align); outline: var(--component-image-outline-size) solid var(--component-image-outline-color); outline-offset: var(--component-image-outline-offset); } .image-field .image-field-container, .image-field.ng-invalid.ng-untouched .image-field-container { width: 100%; cursor: pointer; padding: var(--component-image-padding); background-color: var(--component-image-background-color); border: var(--component-image-border-size) solid var(--component-image-border-color); border-radius: var(--component-image-border-radius); flex: 1 1 0; justify-content: center; align-items: center; display: flex; flex-direction: row; } .image-field .image-field-container:hover { background-color: var(--component-image-hover-background-color); border: var(--component-image-hover-border-size) solid var(--component-image-hover-border-color); } .image-field.important .field-inner { outline: var(--component-image-important-outline-size) solid var(--component-image-important-outline-color); outline-offset: var(--component-image-important-outline-offset); } .image-field.important .image-field-container { background-color: var(--component-image-important-background-color); border: var(--component-image-important-border-size) solid var(--component-image-important-border-color); } .image-field[required] .field-inner { outline: var(--component-image-required-outline-size) solid var(--component-image-required-outline-color); outline-offset: var(--component-image-required-outline-offset); } .image-field[required] .image-field-container { background-color: var(--component-image-required-background-color); border: var(--component-image-required-border-size) solid var(--component-image-required-border-color); } .image-field.empty .field-inner { outline: var(--component-image-empty-outline-size) solid var(--component-image-empty-outline-color); outline-offset: var(--component-image-empty-outline-offset); } .image-field.empty .image-field-container { background-color: var(--component-image-empty-background-color); border: var(--component-image-empty-border-size) solid var(--component-image-empty-border-color); } .image-field.invalid .field-inner { outline: var(--component-image-invalid-outline-size) solid var(--component-image-invalid-outline-color); outline-offset: var(--component-image-invalid-outline-offset); } .image-field.invalid .image-field-container { background-color: var(--component-image-invalid-background-color); border: var(--component-image-invalid-border-size) solid var(--component-image-invalid-border-color); } .image-field.focus .field-inner { outline: var(--component-image-focus-outline-size) solid var(--component-image-focus-outline-color); outline-offset: var(--component-image-focus-outline-offset); } .image-field.focus .image-field-container { background-color: var(--component-image-focus-background-color); border: var(--component-image-focus-border-size) solid var(--component-image-focus-border-color); } .image-field[disabled] .field-inner { outline: var(--component-image-disabled-outline-size) solid var(--component-image-disabled-outline-color); outline-offset: var(--component-image-disabled-outline-offset); } .image-field[disabled] .image-field-container { background-color: var(--component-image-disabled-background-color); border: var(--component-image-disabled-border-size) solid var(--component-image-disabled-border-color); } .image-field-container.image-placeholder { outline: var(--component-image-placeholder-outline-size) solid var(--component-image-placeholder-outline-color); outline-offset: var(--component-image-placeholder-outline-offset); background-color: var(--component-image-placeholder-background-color); } .image-field-image { max-width: var(--component-image-max-width); max-height: var(--component-image-max-height); display: block; flex: none; } .image-field-button-container { margin-left: var(--component-image-button-container-margin); align-self: var(--component-image-button-container-align); display: flex; flex-direction: var(--component-image-button-pos); gap: var(--component-image-button-gap); } .image-field-button-container.image-field-buttons-left { margin-left: 0; margin-right: var(--component-image-button-container-margin); } .image-field-button-container .button-field { margin: var(--component-image-button-margin); } .image-field .button-field { width: var(--component-image-button-width); height: var(--component-image-button-height); } .image-field .button-field .field-inner, .image-field .button-field button { width: 100%; } /* ---------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* zoom field: zoom-field.zoom-field.[inline] | +--label.group-label.[label-small] | | | +--span.group-mainlabel | | | +--span.group-sublabel | +--label.mobile-group-label.[label-small] | | | +--span.mobile-group-mainlabel | | | +--span.mobile-group-sublabel | +--div.field-inner | +--button-field.zoom-in | +--button-field.zoom-default | +--button-field.zoom-out */ .zoom-field { display: flex; flex-direction: var(--component-label-pos); margin: var(--component-zoom-margin); } .zoom-field.label-top { flex-direction: column; } .zoom-field .field-inner { align-self: var(--component-zoom-item-align); display: flex; flex-direction: row; column-gap: var(--component-zoom-gap); } .zoom-field.label-top .field-inner { align-self: normal; } /* ---------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* table field: table-field.table-field.[important].[empty].[focus].[invalid] | +--div.table-field-tool-area | | | +--div.table-field-title-area | | | | | +--div.table-field-title-container | | | | | | | +--h1.table-field-title | | | | | | | +--h2.table-field-subtitle | | | | | +--{div.table-field-counter-title} attribute "counter" | | | +--div.table-field-tool-container | | | +--div.table-field-tool-line | | | | | +--{div.table-field-counter} attribute "counter" | | | | | +--{select-field.table-field-filter-select} attribute "select-filter" | | | | | +--{date-field.table-field-filter-date} attribute "date-filter" | | | | | +--{div.table-field-filter-date-range} attribute "date-range-filter" | | | | | | | +--{date-field.table-field-filter-date-range-start} | | | | | | | +--{date-field.table-field-filter-date-range-end} | | | | | +--{input-field.table-field-filter} attribute "input-filter" | | | | | +--{button-field.table-field-filter-button} attribute "filter-button" | | | | | +--{button-field.table-field-add-button} attribute "add-button" | | | | | +--{button-field.table-field-remove-button} attribute "remove-button" | | | | | +--{button-field.table-field-import-button} attribute "import-button" | | | | | +--{button-field.table-field-export-button} attribute "export-button" | | | | | +--{button-field.table-field-button1-button} attribute "button1" | | | | | +--... (more buttons) | | | | | +--{checkbox-field.table-field-checkbox} attribute "checkbox" | | | | | +--{checkbox-field.table-field-checkbox2} attribute "checkbox2" | | | | | +--... (more checkboxes) | | | (+--div.table-field-tool-line) only if 2nd toolbar line | | | +--... (tool button / select) | +--div.table-field-outer | +--div.table-field-inner | +--div.table-field-table | +--table-field-head.table-field-head | | | +--div.table-field-thead-tr | | | +--(multiple): table-field-col.table-field-th.[center].[right] | | | +--div.table-field-th-inner | | | +--{span.table-field-th-sorting.[sort-descending].[sort-ascending]} attribute "sortable" | +--table-field-body.table-field-body | +--(multiple): table-field-row.table-field-tr | +--(multiple): table-field-cell.table-field-td.[center].[right] */ /*normal -> important -> required -> empty -> invalid -> focus -> disabled*/ /*todo*/ .table-field { display: flex; flex-direction: column; margin: var(--table-field-margin); height: 100%; } .table-field.inline { display: inline-flex; height: auto; } .table-field-tool-area { display: flex; flex-direction: row; align-items: flex-end; margin-bottom: var(--table-field-tool-margin); padding: var(--table-field-tool-padding); justify-content: end; } .table-field-title-area { display: flex; flex-direction: row; margin-right: var(--table-field-title-area-margin); } .table-field-title-container { display: flex; flex-direction: column; } .table-field-title { font-family: var(--table-field-title-font); font-size: var(--table-field-title-font-size); font-weight: var(--table-field-title-font-weight); font-style: var(--table-field-title-font-style); line-height: var(--table-field-title-line-height); color: var(--table-field-title-text-color); margin: var(--table-field-title-margin); } .table-field-subtitle { font-family: var(--table-field-title-font); font-size: var(--table-field-subtitle-font-size); font-weight: var(--table-field-subtitle-font-weight); font-style: var(--table-field-subtitle-font-style); line-height: var(--table-field-subtitle-line-height); color: var(--table-field-subtitle-text-color); margin: var(--table-field-subtitle-margin); } .table-field-counter-title { font-size: var(--table-field-title-counter-font-size); font-weight: var(--table-field-title-counter-font-weight); font-style: var(--table-field-title-counter-font-style); line-height: var(--table-field-title-counter-line-height); color: var(--table-field-title-counter-text-color); margin: var(--table-field-title-counter-margin); align-self: var(--table-field-title-counter-flex-align); text-align: var(--table-field-title-counter-text-align); } .table-field-tool-container { display: flex; flex-direction: column; flex: 1 1 0; } .table-field-tool-line { display: flex; flex-direction: row; justify-content: end; align-items: center; } .table-field-filter { flex: var(--table-field-tool-input-filter-flex); margin-left: var(--table-field-tool-input-filter-margin-left); margin-right: var(--table-field-tool-input-filter-margin-right); max-width: var(--table-field-tool-input-filter-max-width); } .table-field-filter-select, .table-field-filter-select2, .table-field-filter-select3, .table-field-filter-select4 { flex: var(--table-field-tool-select-filter-flex); margin-left: var(--table-field-tool-select-filter-margin-left); margin-right: var(--table-field-tool-select-filter-margin-right); max-width: var(--table-field-tool-select-filter-max-width); } .table-field-filter-date { flex: var(--table-field-tool-date-filter-flex); margin-left: var(--table-field-tool-date-filter-margin-left); margin-right: var(--table-field-tool-date-filter-margin-right); max-width: var(--table-field-tool-date-filter-max-width); } .table-field-filter-date-range { flex: 0 1 0; margin-left: var(--table-field-tool-date-range-filter-margin-left); margin-right: var(--table-field-tool-date-range-filter-margin-right); display: inline-flex; flex-direction: row; align-items: center; } .table-field-filter-date-range .date-field { flex: var(--table-field-tool-date-range-filter-flex); max-width: var(--table-field-tool-date-range-filter-max-width); } .table-field-filter-date-range .table-field-filter-date-range-separator { flex: none; padding: 0 5px 0 5px; display: block; height: 100%; margin: var(--component-input-margin); } .table-field-add-button, .table-field-remove-button, .table-field-import-button, .table-field-export-button, .table-field-filter-button, .table-field-button1-button, .table-field-button2-button, .table-field-button3-button, .table-field-button4-button, .table-field-button5-button, .table-field-button6-button, .table-field-button7-button, .table-field-button8-button, .table-field-button9-button { margin-left: var(--table-field-tool-button-margin-left); margin-right: var(--table-field-tool-button-margin-right); } .table-field-add-button button, .table-field-remove-button button, .table-field-import-button button, .table-field-export-button button, .table-field-filter-button button, .table-field-button1-button button, .table-field-button2-button button, .table-field-button3-button button, .table-field-button4-button button, .table-field-button5-button button, .table-field-button6-button button, .table-field-button7-button button, .table-field-button8-button button, .table-field-button9-button button { width: var(--table-field-tool-button-width); } .table-field-checkbox, .table-field-checkbox2, .table-field-checkbox3, .table-field-checkbox4, .table-field-checkbox5 { margin-left: var(--table-field-tool-checkbox-margin-left); margin-right: var(--table-field-tool-checkbox-margin-right); min-width: var(--table-field-tool-checkbox-min-width); } .table-field-tool-separator { height: 1px; width: var(--table-field-tool-separator-width); } .table-field-tool-long-separator { height: 1px; width: var(--table-field-tool-long-separator-width); } .table-field-outer { display: flex; position: relative; overflow: hidden; flex-direction: column; flex-grow: 1; padding: var(--table-field-padding); border: var(--table-field-border-size) solid var(--table-field-border-color); height: 100%; } .table-field-inner { display: block; overflow-y: auto; flex-grow: 1; height: 100%; position: relative; } .table-field-table { display: table; table-layout: fixed; border-spacing: 0; border-collapse: separate; width: 100%; font-family: var(--table-field-font); font-size: var(--table-field-font-size); font-weight: var(--table-field-font-weight); font-style: var(--table-field-font-style); line-height: var(--table-field-line-height); color: var(--table-field-text-color); min-height: 2em; } .table-field.inline .table-field-table { display: inline-table; width: auto; } .table-field-thead { display: table-header-group; } .table-field-thead-tr { display: table-row; cursor: pointer; } .table-field-tbody { display: table-row-group; min-height: 1em; } .table-field-tr { display: table-row; content-visibility: auto; } .table-field-th { display: table-cell; overflow: hidden; white-space: nowrap; position: -webkit-sticky; position: sticky; top: 0; background-color: var(--table-field-header-row-background-color); border-bottom: var(--table-field-header-cell-inner-hborder-size) solid var(--table-field-header-cell-inner-hborder-color); border-top: var(--table-field-header-cell-outer-border-size) solid var(--table-field-header-cell-outer-border-color); padding: var(--table-field-header-cell-padding); font-family: var(--table-field-header-font); font-size: var(--table-field-header-font-size); font-weight: var(--table-field-header-font-weight); font-style: var(--table-field-header-font-style); line-height: var(--table-field-header-line-height); color: var(--table-field-header-text-color); line-height: var(--table-field-header-line-height); } .table-field-th-sorting { position: absolute; right: var(--table-field-header-cell-sorting-offset); top: 50%; transform: translateY(-50%); } .table-field-th-sorting.sort-ascending { margin-top: -4px; } .table-field-th-sorting.sort-descending { margin-top: 2px; } .table-field-td { display: table-cell; overflow: hidden; white-space: nowrap; background-color: var(--table-field-row-background-color); padding: var(--table-field-cell-padding); cursor: pointer; height: var(--table-field-cell-height); } .table-field-th.center .table-field-td.center { text-align: center; } .table-field-th.right .table-field-td.right { text-align: right; } .table-field-tr:nth-child(2n) .table-field-td { background-color: var(--table-field-even-row-background-color); color: var(--table-field-even-row-text-color); } .table-field-tr:nth-child(2n+1) .table-field-td { background-color: var(--table-field-odd-row-background-color); color: var(--table-field-odd-row-text-color); } .table-field-tr:hover .table-field-td { background-color: var(--table-field-hover-row-background-color); color: var(--table-field-hover-row-text-color); } .table-field-td + .table-field-td { border-left: var(--table-field-cell-inner-vborder-size) solid var(--table-field-cell-inner-vborder-color); } .table-field-th + .table-field-th { border-left: var(--table-field-header-cell-inner-vborder-size) solid var(--table-field-header-cell-inner-vborder-color); } .table-field-td:first-child { border-left: var(--table-field-cell-outer-border-size) solid var(--table-field-cell-outer-border-color); } .table-field-td:last-child { border-right: var(--table-field-cell-outer-border-size) solid var(--table-field-cell-outer-border-color); } .table-field-th:first-child { border-left: var(--table-field-header-cell-outer-border-size) solid var(--table-field-header-cell-outer-border-color); } .table-field-th:last-child { border-right: var(--table-field-header-cell-outer-border-size) solid var(--table-field-header-cell-outer-border-color); } .table-field-td { border-bottom: var(--table-field-cell-inner-hborder-size) solid var(--table-field-cell-inner-hborder-color); } .table-field-tr:last-child .table-field-td { border-bottom: var(--table-field-cell-outer-border-size) solid var(--table-field-cell-outer-border-color); } .table-field .table-field-multiselect { display: none; } .table-field.multiselect .table-field-multiselect { display: table-cell; text-align: center; width: var(--table-field-multiselect-col-width); padding: var(--table-field-multiselect-col-padding); } .table-field.multiselect .table-field-col.table-field-multiselect span { cursor: pointer; } .table-field.multiselect .table-field-col.table-field-multiselect span:before { content: var(--table-field-multiselect-icon-select-all); font-family: var(--table-field-multiselect-icon-font); font-size: var(--table-field-multiselect-icon-header-font-size); color: var(--table-field-multiselect-icon-header-color); cursor: pointer; } .table-field.multiselect .table-field-td.table-field-multiselect span { cursor: pointer; } .table-field.multiselect .table-field-td.table-field-multiselect span:before { content: var(--table-field-multiselect-icon-unchecked); font-family: var(--table-field-multiselect-icon-font); font-size: var(--table-field-multiselect-icon-font-size); color: var(--table-field-multiselect-icon-color); cursor: pointer; } .table-field.multiselect .row-selected .table-field-td.table-field-multiselect span:before { content: var(--table-field-multiselect-icon-checked); } .table-field.multiselect .row-selected .table-field-tr:nth-child(2n) .table-field-td { background-color: var(--table-field-multiselect-even-row-background-color); color: var(--table-field-multiselect-even-row-text-color); } .table-field.multiselect .row-selected .table-field-tr:nth-child(2n+1) .table-field-td { background-color: var(--table-field-multiselect-odd-row-background-color); color: var(--table-field-multiselect-odd-row-text-color); } /* ---------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* layout-app (app layout frame): layout-app.layout-app | +--div.layout-header | | | +--div.layout-top-area | | | | | +--div.layout-logo | | | | | +--div.layout-main-menu | | | | | +--div.layout-user-menu | | | +--div.layout-tool-area | | | +--div.layout-breadcrumb | | | +--div.layout-toolbar | | | +--div.layout-status-icons | +--div.layout-body | +--div.layout-context-container | | | +--div.layout-context | | | +--div.layout-context-footer | +--div.layout-main-container | +--div.layout-main | +--div.layout-main-footer */ .layout-app { width: 100vw; height: 100vh; min-height: 100vh; display: flex; flex-direction: column; } .layout-header { display: flex; flex-direction: column; height: var(--layout-app-header-height); padding: var(--layout-app-header-padding); background-color: var(--layout-app-header-background-color); border: var(--layout-app-header-border); } .layout-top-area { display: flex; flex-direction: row; align-items: var(--layout-app-header-top-align); height: var(--layout-app-header-top-height); padding: var(--layout-app-header-top-padding); background-color: var(--layout-app-header-top-background-color); border-bottom: var(--layout-app-header-top-border);} .layout-logo { width: var(--layout-app-logo-width); height: var(--layout-app-logo-height); background-color: var(--layout-app-logo-background-color); border: var(--layout-app-logo-border); } .layout-logo:empty { display: none; } .layout-main-menu { flex: 1 1 auto; display: flex; flex-direction: row; height: var(--layout-app-main-menu-height); padding: var(--layout-app-main-menu-padding); justify-content: var(--layout-app-main-menu-align); background-color: var(--layout-app-main-menu-background-color); border: var(--layout-app-main-menu-border); } .layout-main-menu:empty { display: none; } .layout-user-menu { display: flex; flex-direction: row; height: var(--layout-app-user-menu-height); padding: var(--layout-app-user-menu-padding); justify-content: var(--layout-app-user-menu-align); background-color: var(--layout-app-user-menu-background-color); border: var(--layout-app-user-menu-border); } .layout-user-menu:empty { display: none; } .layout-tool-area { display: flex; flex-direction: column; position: relative; height: var(--layout-app-header-tool-height); padding: var(--layout-app-header-tool-padding); background-color: var(--layout-app-header-tool-background-color); border-bottom: var(--layout-app-header-tool-border); } .layout-tool-area:empty { display: none; } .layout-breadcrumb { display: flex; flex-direction: column; height: var(--layout-app-breadcrumb-height); padding: var(--layout-app-breadcrumb-padding); justify-content: var(--layout-app-breadcrumb-align); background-color: var(--layout-app-breadcrumb-background-color); border-bottom: var(--layout-app-breadcrumb-border); font-family: var(--layout-app-breadcrumb-font); font-size: var(--layout-app-breadcrumb-font-size); font-weight: var(--layout-app-breadcrumb-font-weight); font-style: var(--layout-app-breadcrumb-font-style); line-height: var(--layout-app-breadcrumb-line-height); color: var(--layout-app-breadcrumb-color); } .layout-breadcrumb:empty { display: none; } .layout-toolbar { display: flex; flex-direction: column; height: var(--layout-app-toolbar-height); padding: var(--layout-app-toolbar-padding); justify-content: var(--layout-app-toolbar-align); background-color: var(--layout-app-toolbar-background-color); border-bottom: var(--layout-app-toolbar-border); } .layout-toolbar:empty { display: none; } .layout-status-icons { display: flex; flex-direction: column; height: var(--layout-app-status-icons-height); max-width: var(--layout-app-status-icons-max-width); padding: var(--layout-app-status-icons-padding); justify-content: var(--layout-app-status-icons-align); top: var(--layout-app-status-icons-top); right: var(--layout-app-status-icons-right); position: absolute; background-color: var(--layout-app-status-icons-background-color); border: var(--layout-app-status-icons-border); } .layout-status-icons:empty { display: none; } .layout-body { flex: 1 1 auto; overflow: hidden; display: flex; flex-direction: row; padding: var(--layout-app-body-padding); background-color: var(--layout-app-body-background-color); border: var(--layout-app-body-border); } .layout-context-container { display: flex; flex-direction: column; width: var(--layout-app-context-area-width); padding: var(--layout-app-context-area-padding); background-color: var(--layout-app-context-area-background-color); border: var(--layout-app-context-area-border); } .layout-context { flex: 1 1 auto; padding: var(--layout-app-context-padding); background-color: var(--layout-app-context-background-color); justify-content: var(--layout-app-context-align); border-right: var(--layout-app-context-border); overflow: auto; } .layout-context:empty { display: none; } .layout-context-footer { height: var(--layout-app-context-footer-height); padding: var(--layout-app-context-footer-padding); background-color: var(--layout-app-context-footer-background-color); justify-content: var(--layout-app-context-footer-align); border-top: var(--layout-app-context-footer-border); } .layout-context-footer:empty { display: none; } .layout-context > * { display: flex; flex-direction: column; } .layout-context > layout-context > br { margin-top: 10px; } .layout-main-container { flex: 1 1 auto; overflow: auto; display: flex; flex-direction: column; padding: var(--layout-app-main-container-padding); background-color: var(--layout-app-main-container-background-color); } .layout-main { flex: 1 1 auto; overflow: auto; padding: var(--layout-app-main-padding); background-color: var(--layout-app-main-background-color); border: var(--layout-app-main-border);} .layout-main-footer { height: var(--layout-app-footer-height); padding: var(--layout-app-footer-padding); background-color: var(--layout-app-footer-background-color); justify-content: var(--layout-app-footer-align); border-top: var(--layout-app-footer-border);} .layout-spacer { width: var(--layout-app-spacer-size); height: var(--layout-app-spacer-size); } @media only screen and (max-width: 768px) { :root { --component-label-pos: column; } .group-label { display: none; } .mobile-group-label { display: block; } .layout-body { flex-direction: column-reverse; } .layout-context > * { flex-direction: row; justify-content: space-evenly; } } /* ---------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* modal window: body | +--div.modal-lowest-backdrop | +--div.modal-backdrop.#modal_backdrop_ | +--div.modal-window-container.#modal_window_.modal-window-size-[sm/md/lg/xl] | +--modal-window.modal-window | +--form.modal-window-form | +--div.modal-window-header | | | +--div.modal-window-title-icon | | | +--div.modal-window-title-area | | | | | +--h1.modal-window-title | | | | | +--h2.modal-window-subtitle | | | +--div.modal-window-header-button-area | | | +--button-field.modal-button.modal-window-i | | | +--button-field.modal-button.modal-window-h | | | +--button-field.modal-button.modal-window-x | +--div.modal-window-body | +--div.modal-window-footer | +--div.modal-window-extra-area | | | +--button-field.modal-button.modal-window-remove | | | +--button-field.modal-button.modal-window-extra | | | +--button-field.modal-button.modal-window-info | +--div.modal-window-button-area | +--button-field.modal-button.modal-window-cancel | +--button-field.modal-button.modal-window-ok */ .modal-lowest-backdrop { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: var(--modal-window-lowest-backdrop-color); } .modal-backdrop { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: var(--modal-window-backdrop-color); } .modal-window-container { position: fixed; left: 0; right: 0; margin: 0 auto 0 auto; background-color: var(--modal-window-background-color); box-shadow: var(--modal-window-shadow); border: var(--modal-window-border-size) solid var(--modal-window-border-color); top: var(--modal-window-top); max-height: var(--modal-window-max-height); border-radius: var(--modal-window-border-radius); max-width: 100vw; } .modal-window-size-sm { width: var(--modal-window-width-sm); min-width: min(var(--modal-window-min-width-sm), 100vw); } .modal-window-size-sm2 { width: var(--modal-window-width-sm2); min-width: min(var(--modal-window-min-width-sm2), 100vw); } .modal-window-size-md { width: var(--modal-window-width-md); min-width: min(var(--modal-window-min-width-md), 100vw); } .modal-window-size-md2 { width: var(--modal-window-width-md2); min-width: min(var(--modal-window-min-width-md2), 100vw); } .modal-window-size-lg { width: var(--modal-window-width-lg); min-width: min(var(--modal-window-min-width-lg), 100vw); } .modal-window-size-lg2 { width: var(--modal-window-width-lg2); min-width: min(var(--modal-window-min-width-lg2), 100vw); } .modal-window-size-xl { width: var(--modal-window-width-xl); min-width: min(var(--modal-window-min-width-xl), 100vw); } .modal-window { position: relative; } .modal-window-form {} .modal-window-header { display: flex; flex-direction: row; align-items: center; background-color: var(--modal-window-header-color); padding: var(--modal-window-header-padding); border: var(--modal-window-header-border-size) solid var(--modal-window-header-border-color); border-top-left-radius: var(--modal-window-border-radius); border-top-right-radius: var(--modal-window-border-radius); } .modal-window-title-icon {} .modal-window-title-area { flex: 1 1 0; } .modal-window-title { font-family: var(--modal-window-title-font); font-size: var(--modal-window-title-font-size); font-weight: var(--modal-window-title-font-weight); font-style: var(--modal-window-title-font-style); line-height: var(--modal-window-title-line-height); color: var(--modal-window-title-color); margin: 0 0 var(--modal-window-title-margin) 0; padding: 0; } .modal-window-subtitle { font-family: var(--modal-window-subtitle-font); font-size: var(--modal-window-subtitle-font-size); font-weight: var(--modal-window-subtitle-font-weight); font-style: var(--modal-window-subtitle-font-style); line-height: var(--modal-window-subtitle-line-height); color: var(--modal-window-subtitle-color); margin: 0 0 var(--modal-window-subtitle-margin) 0; padding: 0; } .modal-window-body { background-color: var(--modal-window-body-color); padding: var(--modal-window-body-padding); position: relative; min-height: 1px; max-height: var(--modal-window-body-max-height); overflow: auto; } .modal-window-body.max-height { height: var(--modal-window-body-max-height); } .modal-window-body.fixed-height { overflow: hidden; } .modal-window-body.fixed-height modal-body { display: flex; flex-direction: column; height: 100%; } .modal-window-body.fixed-height .dialog-row { flex: none; } .modal-window-body.fixed-height .dialog-row.max-height { height: unset; flex: 1 1 100%; overflow: hidden; } .modal-window-body.fixed-height .dialog-col.max-height { height: unset; max-height: 100%; align-self: stretch; } .modal-window-footer { display: flex; background-color: var(--modal-window-footer-color); padding: var(--modal-window-footer-padding); border: var(--modal-window-footer-border-size) solid var(--modal-window-footer-border-color); border-bottom-left-radius: var(--modal-window-border-radius); border-bottom-right-radius: var(--modal-window-border-radius); } .modal-window-header-button-area { display: flex; flex-direction: row; display: flex; justify-content: flex-end; column-gap: var(--modal-window-header-button-gap); } .modal-window-header-button-area .button-field { flex: none; } .modal-window-header-button-area .button-field.icon.icon-only div button { padding: 0; } .modal-window-extra-area { display: flex; flex-direction: row; display: flex; column-gap: var(--modal-window-button-gap); } .modal-window-button-area { flex: 1 1 auto; display: flex; justify-content: flex-end; column-gap: var(--modal-window-button-gap); } .modal-window-button-area .button-field { margin-bottom: 0; } .modal-window-extra-area .modal-button.icon button { min-width: var(--modal-window-button-icon-width); min-height: var(--modal-window-button-icon-height); } .modal-button.modal-window-x.icon, .modal-button.modal-window-h.icon, .modal-button.modal-window-i.icon { min-width: 0; min-height: 0; margin: 0; } .modal-button.modal-window-x.icon button, .modal-button.modal-window-h.icon button, .modal-button.modal-window-i.icon button { padding: var(--modal-window-header-button-padding); font-family: var(--modal-window-header-button-font); font-size: var(--modal-window-header-button-font-size); font-weight: var(--modal-window-header-button-font-weight); font-style: var(--modal-window-header-button-font-style); line-height: var(--modal-window-header-button-line-height); color: var(--modal-window-header-button-text-color); background-color: var(--modal-window-header-button-background-color); box-shadow: var(--modal-window-header-button-shadow); border-radius: var(--modal-window-header-button-border-radius); border: var(--modal-window-header-button-border-size) solid var(--modal-window-header-button-border-color); outline: var(--modal-window-header-button-outline-size) solid var(--modal-window-header-button-outline-color); outline-offset: var(--modal-window-header-button-outline-offset); } .modal-button.modal-window-x.icon button:hover, .modal-button.modal-window-h.icon button:hover, .modal-button.modal-window-i.icon button:hover { font-weight: var(--modal-window-header-button-hover-font-weight); font-style: var(--modal-window-header-button-hover-font-style); color: var(--modal-window-header-button-hover-text-color); background-color: var(--modal-window-header-button-hover-background-color); box-shadow: var(--modal-window-header-button-hover-shadow); border: var(--modal-window-header-button-hover-border-size) solid var(--modal-window-header-button-hover-border-color); outline: var(--modal-window-header-button-hover-outline-size) solid var(--modal-window-header-button-hover-outline-color); outline-offset: var(--modal-window-header-button-hover-outline-offset); } .modal-button.modal-window-x.icon button:focus, .modal-button.modal-window-h.icon button:focus, .modal-button.modal-window-i.icon button:focus { font-weight: var(--modal-window-header-button-focus-font-weight); font-style: var(--modal-window-header-button-focus-font-style); color: var(--modal-window-header-button-focus-text-color); background-color: var(--modal-window-header-button-focus-background-color); box-shadow: var(--modal-window-header-button-focus-shadow); border: var(--modal-window-header-button-focus-border-size) solid var(--modal-window-header-button-focus-border-color); outline: var(--modal-window-header-button-focus-outline-size) solid var(--modal-window-header-button-focus-outline-color); outline-offset: var(--modal-window-header-button-focus-outline-offset); } .modal-button.modal-window-x.icon button:active, .modal-button.modal-window-h.icon button:active, .modal-button.modal-window-i.icon button:active { font-weight: var(--modal-window-header-button-active-font-weight); font-style: var(--modal-window-header-button-active-font-style); color: var(--modal-window-header-button-active-text-color); background-color: var(--modal-window-header-button-active-background-color); box-shadow: var(--modal-window-header-button-active-shadow); border: var(--modal-window-header-button-active-border-size) solid var(--modal-window-header-button-active-border-color); outline: var(--modal-window-header-button-active-outline-size) solid var(--modal-window-header-button-active-outline-color); outline-offset: var(--modal-window-header-button-active-outline-offset); position: relative; left: var(--modal-window-header-button-active-offset-x); top: var(--modal-window-header-button-active-offset-y); } .modal-button.modal-window-x.icon img, .modal-button.modal-window-h.icon img, .modal-button.modal-window-i.icon img { margin: var(--modal-window-header-button-img-margin); } .modal-window-remove {} .modal-window-extra {} .modal-window-cancel {} .modal-window-ok {} /* ---------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* message window: */ .message-window-body { display: flex; flex-direction: row; } .message-window-body .message-icon { align-self: center; width: var(--message-window-icon-width); font-size: var(--message-window-icon-font-size); font-weight: var(--message-window-icon-font-weight); font-style: var(--message-window-icon-font-style); color: var(--message-window-icon-color); padding: var(--message-window-icon-padding); } .message-window-body .message-icon.message-error { color: var(--message-window-icon-color-error); } .message-window-body .message-icon.message-question { color: var(--message-window-icon-color-question); } .message-window-body p { flex: 1 1 0; align-self: center; font-family: var(--message-window-font); font-size: var(--message-window-font-size); font-weight: var(--message-window-font-weight); font-style: var(--message-window-font-style); line-height: var(--message-window-line-height); color: var(--message-window-color); padding: var(--message-window-text-padding); } /* ---------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* login field: login-field.login-field.[inline].[login-field-center] | +--div.login-field-container | +--field-group | | | +--h1.login-title | | | +--{p.login-info} | +--input-field.login-email | +--input-field.login-password | +--field-group | | | +--div.login-options | | | +--a.forgot-password | | | +--a.register-new | +--field-group | | | +--p.login-error | +--button-field.login-btn */ .login-field { margin: var(--component-login-margin); } .login-field .login-field-container { max-width: var(--component-login-max-width); outline: var(--component-login-outline-size) solid var(--component-login-outline-color); outline-offset: var(--component-login-outline-offset); padding: var(--component-login-padding); } .login-field-center .login-field-container { margin-left: auto; margin-right: auto; } .login-field .login-title { font-family: var(--component-login-title-font); font-size: var(--component-login-title-font-size); font-weight: var(--component-login-title-font-weight); font-style: var(--component-login-title-font-style); line-height: var(--component-login-title-line-height); color: var(--component-login-title-text-color); margin: var(--component-login-title-margin); } .login-field .login-info { font-family: var(--component-login-info-font); font-size: var(--component-login-info-font-size); font-weight: var(--component-login-info-font-weight); font-style: var(--component-login-info-font-style); line-height: var(--component-login-info-line-height); color: var(--component-login-info-text-color); margin: var(--component-login-info-margin); } .login-field .login-options { display: flex; flex-direction: row; justify-content: space-between; } .login-field .login-options a { font-family: var(--component-login-options-font); font-size: var(--component-login-options-font-size); font-weight: var(--component-login-options-font-weight); font-style: var(--component-login-options-font-style); line-height: var(--component-login-options-line-height); color: var(--component-login-options-text-color); text-decoration: var(--component-login-options-text-decoration); margin: var(--component-login-options-margin); display: inline-block; } .login-field .login-error { font-family: var(--component-login-error-font); font-size: var(--component-login-error-font-size); font-weight: var(--component-login-error-font-weight); font-style: var(--component-login-error-font-style); line-height: var(--component-login-error-line-height); color: var(--component-login-error-text-color); margin: var(--component-login-error-margin); } /*.login-field .login-field-container, .login-field.ng-invalid.ng-untouched .login-field-container { width: 100%; cursor: pointer; padding: var(--component-image-padding); background-color: var(--component-image-background-color); border: var(--component-image-border-size) solid var(--component-image-border-color); border-radius: var(--component-image-border-radius); flex: 1 1 0; justify-content: center; align-items: center; display: flex; flex-direction: row; }*/ /*.login-field .login-field-container:hover { background-color: var(--component-image-hover-background-color); border: var(--component-image-hover-border-size) solid var(--component-image-hover-border-color); }*/ /*.login-field-button-container { margin-left: var(--component-image-button-container-margin); align-self: var(--component-image-button-container-align); display: flex; flex-direction: var(--component-image-button-pos); gap: var(--component-image-button-gap); }*/ /*.login-field-button-container.login-field-buttons-left { margin-left: 0; margin-right: var(--component-image-button-container-margin); }*/ /*.login-field-button-container .button-field { margin: var(--component-image-button-margin); }*/ /*.login-field .button-field { width: var(--component-image-button-width); height: var(--component-image-button-height); }*/ /*.login-field .button-field .field-inner, .login-field .button-field button { width: 100%; }*/ /* forgot password dialog */ /*.login_forgot_password_dialog {}*/ /* ---------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* address-field / address selector / address editor: */ .address-field input { cursor: pointer; } .address-field.important {} /* todo */ /* ---------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* ---------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* date picker (date-field) - todo */ .uib-datepicker ~ .dropdown-menu .btn-default { font-weight: normal; padding: 5px 10px; color: #333; background-color: #e6e6e6; border-color: #adadad; } .uib-datepicker ~ .dropdown-menu .btn-default span { color: #333; } .uib-datepicker ~ .dropdown-menu .btn-default.active span { font-weight: bold; } .uib-datepicker button.btn-default { padding: 5px 10px 5px 10px; } .uib-datepicker ~ .dropdown-menu table:focus { outline: none; } .uib-datepicker ~ .dropdown-menu { padding: 10px; } .uib-datepicker ~ .dropdown-menu li { padding-left: 0!important; padding-right: 0!important; } .uib-datepicker[readonly] { background-color: white; } .dropdown-menu { position: absolute; top: 100%; left: 0; z-index: 1000; display: none; float: left; min-width: 160px; padding: 5px 0; margin: 2px 0 0; font-size: 14px; text-align: left; list-style: none; background-color: #fff; -webkit-background-clip: padding-box; background-clip: padding-box; border: 1px solid #ccc; border: 1px solid rgba(0,0,0,.15); border-radius: 4px; -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175); box-shadow: 0 6px 12px rgba(0,0,0,.175); } .dropdown-menu .btn { display: inline-block; margin-bottom: 0; font-weight: 400; text-align: center; white-space: nowrap; vertical-align: middle; touch-action: manipulation; cursor: pointer; user-select: none; background-image: none; border: 1px solid transparent; } .dropdown-menu .btn-default { color: #333; background-color: #fff; } .dropdown-menu .btn-group-sm > .btn, .dropdown-menu .btn-sm { line-height: 1.5; } .dropdown-menu .text-center { text-align: center; } .dropdown-menu .btn.active, .dropdown-menu .btn:active { outline: 0; box-shadow: inset 0 3px 5px rgba(0,0,0,.125); } .dropdown-menu .btn-info.active.focus, .dropdown-menu .btn-info.active:focus, .dropdown-menu .btn-info.active:hover, .dropdown-menu .btn-info:active.focus, .dropdown-menu .btn-info:active:focus, .dropdown-menu .btn-info:active:hover, .dropdown-menu .open > .dropdown-toggle.btn-info.focus, .dropdown-menu .open > .dropdown-toggle.btn-info:focus, .dropdown-menu .open > .dropdown-toggle.btn-info:hover { color: #fff; background-color: #269abc; border-color: #1b6d85; } .dropdown-menu .text-muted { color: #777; } .dropdown-menu .pull-left { float: left !important; } .dropdown-menu .pull-right { float: right !important; } .glyphicon { position: relative; top: 1px; display: inline-block; font-family: 'Glyphicons Halflings'; font-style: normal; font-weight: 400; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .dropdown-menu .small, .dropdown-menu small { font-size: 85%; } /* ---------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* responsive */ @media only screen and (max-width: 1920px) { } @media only screen and (max-width: 1600px) { } @media only screen and (max-width: 1200px) { } @media only screen and (max-width: 1024px) { } @media only screen and (max-width: 768px) { } @media only screen and (max-width: 500px) { .dialog-col { min-width: unset; max-width: 100%; width: 100%; flex: none; } } @media only screen and (max-width: 413px) { .dialog-row { column-gap: var(--component-mobile-gap); margin-bottom: var(--component-mobile-row-margin); } .field-inner, .field-group-inner { flex: var(--component-mobile-inner-area-ratio) var(--component-mobile-inner-area-ratio) 0; } .field-group { flex-direction: var(--component-mobile-label-pos); } .field-group.inline .field-group-inner { column-gap: var(--component-mobile-inline-gap); } .button-field { flex-direction: var(--component-mobile-label-pos); } .input-field { flex-direction: var(--component-mobile-label-pos); } .static-field { flex-direction: var(--component-mobile-label-pos); } .select-field { flex-direction: var(--component-mobile-label-pos); } .date-field { flex-direction: var(--component-mobile-label-pos); } .checkbox-field { flex-direction: var(--component-mobile-label-pos); } .radio-field { flex-direction: var(--component-mobile-label-pos); } .radio-options { flex: var(--component-mobile-inner-area-ratio) var(--component-mobile-inner-area-ratio) 0; } .rating-field { flex-direction: var(--component-mobile-label-pos); } } @media only screen and (max-width: 375px) { } @media only screen and (max-width: 320px) { }