html {
    --lumo-primary-color: #2649A5;
    --container-width: 100%;
}

label {
    white-space: normal;
}

/* Custom CSS, um die Label größer als das Eingabefeld machen zu können
    (siehe SonstigeHinweiseStep) */
.custom-width-container::part(input-field), /* (1) */
vaadin-text-field::part(input-field) { /* (2) or for all text fields */
    width: var(--container-width, 100%);
}

.indented-decimal-input {
    margin-right: 10%;
}

.notnumbered-decimal-input {
    padding-right: 206px;
}

.reduced-line-height {
    line-height: 1.5; /* Reduzierter Zeilenabstand */
}
/* Required Indicator anpassen und vor dem Label anzeigen */
vaadin-radio-group::part(label)::before{
    content: '*';
    margin-right:  4px;
    color: #2649A5FF;
    font-size: 1.2em;
}

/* Required Indicator vor dem Label, wenn Komponente 'required' ist */
vaadin-text-area[required]::part(label)::before {
    content: '*';
    margin-right: 4px;
    color: #2649A5FF;
    font-size: 1.2em;
}
/* Rote Farbe aus den Textfeldern entfernen VER-492 */
vaadin-text-area[required][invalid]::part(input-field) {
    background-color:  hsla(214, 57%, 24%, 0.1) !important;
}
vaadin-text-area[required][invalid]:hover::part(input-field) {
    background-color:  hsla(213, 45%, 20%, 0.2) !important;
}

vaadin-text-field[required][invalid]::part(input-field) {
    background-color:  hsla(214, 57%, 24%, 0.1) !important;
}
vaadin-text-field[required][invalid]:hover::part(input-field) {
    background-color:  hsla(213, 45%, 20%, 0.2) !important;
    --vaadin-input-field-invalid-hover-highlight: hsla(213, 45%, 20%, 0.2) !important;
}

vaadin-text-field.error-background-on-invalid[required][invalid]::part(input-field) {
    background-color: hsla(3, 100%, 60%, 0.14) !important;
}

vaadin-text-field.error-background-on-invalid[required][invalid]:hover::part(input-field) {
    background-color: hsla(3, 100%, 60%, 0.22) !important;
    --vaadin-input-field-invalid-hover-highlight: hsla(3, 100%, 60%, 0.22) !important;
}



/* Required Indicator anpassen und vor dem Label anzeigen */
vaadin-combo-box[required]::part(label)::before{
    content: '*';
    margin-right:  4px;
    color: #2649A5FF;
    font-size: 1.2em;
}
/* Required Indicator anpassen und vor dem Label anzeigen */
vaadin-combo-box[required]::part(required-indicator)::after{
    display: none !important;
}

/* Required Indicator anpassen und vor dem Label anzeigen */
vaadin-text-field[required]::part(label)::before{
    content: '*';
    margin-right:  4px;
    color: #2649A5FF;
    font-size: 1.2em;
}
/* Required Indicator anpassen und vor dem Label anzeigen */
vaadin-text-field[required]::part(required-indicator)::after{
    display: none !important;
}

/* Required Indicator anpassen und vor dem Label anzeigen */
super-text-field[required]::part(label)::before{
    content: '*';
    margin-right:  4px;
    color: #2649A5FF;
    font-size: 1.2em;
}

/* Required Indicator anpassen und vor dem Label anzeigen */
vaadin-integer-field[required]::part(required-indicator)::after{
    display: none !important;
}

/* Required Indicator anpassen und vor dem Label anzeigen */
vaadin-integer-field[required]::part(label)::before{
    content: '*';
    margin-right:  4px;
    color: #2649A5FF;
    font-size: 1.2em;
}

/* Required Indicator anpassen und vor dem Label anzeigen */
super-text-field[required]::part(required-indicator)::after{
    display: none !important;
}
/* Bold Labels */
.bold-label label {
    font-weight: bold !important;
}

vaadin-date-picker::part(label)::before{
    content: '*';
    margin-right:  4px;
    color: #2649A5FF;
    font-size: 1.2em;
}

/* Required Indicator  */
.no-required-star::part(label)::before{
    display: none !important;
}

.no-required-star vaadin-radio-group::part(label)::before{
    display: none !important;
}

/* Required Indicator anpassen und vor dem Label anzeigen */
vaadin-checkbox-group[required]::part(label)::before{
    content: '*';
    margin-right:  4px;
    color: #2649A5FF;
    font-size: 1.2em;
}
/* Required Indicator anpassen und vor dem Label anzeigen */
vaadin-checkbox-group[required]::part(required-indicator)::after{
    display: none !important;
}

/* Default Required Indicator, after ausblenden */
vaadin-radio-group::part(required-indicator)::after{
    display: none;
}
vaadin-date-picker::part(required-indicator)::after{
    display: none;
}
vaadin-text-area::part(required-indicator)::after{
    display: none;
}

/* Den Text auf einem Button linksbündig anzeigen lassen */
vaadin-button.navigations-button::part(label) {
    width: 100%;
    text-align: left;
}

vaadin-accordion-heading, vaadin-details-summary {
    background-color:  #2649A5;
    padding: 0 8px 0;
    margin: 2px 0 2px;
    color: #FFFFFF;
    height: 30px;
}

vaadin-accordion-heading::part(toggle), vaadin-details-summary::part(toggle) {
    color: #FFFFFF;
}

/* Lange Summary-Texte in Details-Komponenten abschneiden und mit "..." darstellen.
   Der vollständige Text wird per "title"-Attribut als Browser-Tooltip angezeigt. */
.ellipsis-summary > vaadin-details-summary {
    overflow: hidden;
}
.ellipsis-summary > vaadin-details-summary::part(content) {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    min-width: 0;
}