.tng-form {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
}

.twf-label {
    display: flex;
    flex-direction: row;
    margin: 0rem var(--twf-input-margin) 0.125rem var(--twf-input-margin);
    font-weight: 500;
    font-size: var(--font-size-13px);
    min-height: 1.5rem;
}

    .twf-label.inline {
        overflow: hidden;
        padding: 0.35rem 0rem 0rem 0rem;
        margin: 0rem 0.75rem 0.125rem 0rem;
    }


select.twf-form-control {
    padding-left: 0.5rem;
    padding-right: 2.5rem;
}

.tng-dark-theme .form-control, .tng-dark-theme select, .tng-dark-theme input, .tng-dark-theme textarea {
    color: var(--dark-textcolor-1);
    background-color: transparent !important;
}

    .tng-dark-theme input:focus, .tng-dark-theme textarea:focus, .tng-dark-theme select:focus {
        background-color: var(--dark-gray-5) !important;
        box-shadow: var(--dark-shadow-1); /*highlighting überschreiben, dass standart blau ist im dark-theme kaum zu erkennen.*/
    }

.tng-dark-theme .card {
    color: var(--dark-textcolor-1);
    border: 1px solid var(--dark-border-1);
}

.tng-dark-theme .twf-group {
    background-color: var(--dark-background-1);
    border: 1px solid var(--dark-border-1);
}

.tng-dark-theme .twf-color-info, .tng-dark-theme .twf-info-icon {
    color: var(--dark-info);
}

.tng-dark-theme .my-1, .tng-dark-theme .m-1, .tng-dark-theme .mx-2 {
    background-color: var(--dark-main-background);
}

.tng-form-border {
    display: flex;
    flex-direction: column;
    flex: 0;
    padding: 0rem;
    margin: 0rem;
}

.tng-dark-theme .tng-form-border {
    display: flex;
    flex-direction: column;
    background: var(--dark-gray-4);
    flex: 0;
    border-radius: 0.25rem;
    padding: 0rem;
    margin: 0rem;
    border-style: solid;
    border-color: var(--dark-gray-2);
    border-width: thin;
}

.twf-required-icon {
    margin-left: 0.3rem;
    margin-top: 0.25rem;
    font-size: var(--icon-1);
    color: var(--f-color-4);
}

.tng-dark-theme .twf-required-icon {
    margin-left: 0.3rem;
    margin-top: 0.25rem;
    font-size: var(--icon-1);
    color: var(--dark-red-1);
}

.twf-error-icon {
    margin-left: 0.3rem;
    color: var(--error);
}

.tng-dark-theme .twf-error-icon {
    margin-left: 0.3rem;
    color: var(--dark-error);
}

.twf-info-icon {
    margin-left: 0.3rem;
    color: var(--info);
}

.twf-attention-icon {
    margin-left: 0.3rem;
    color: var(--warning);
}

.twf-edit-icon {
    cursor: pointer;
    color: var(--textcolor-1);
}

.tng-dark-theme .twf-edit-icon {
    color: var(--dark-textcolor-1);
}

.tng-dark-theme .twf-attention-icon {
    color: var(--dark-warning);
}

.twf-helper-text {
    font-size: var(--font-size-12px); /*12px */
    margin: 0.125rem var(--twf-input-margin) 0rem var(--twf-input-margin);
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 1.385rem;
    column-gap: 0.3rem;
}

    .twf-helper-text.inline {
        max-width: 93%;
        flex: 0 0 100%;
    }

.twf-group-info-text {
    font-size: var(--font-size-12px); /* 12px */
    margin-left: 1rem;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    flex: 1;
    align-items: baseline;
}

.twf-color-info {
    color: var(--info);
}

.twf-color-attention {
    color: var(--attention);
}

.tng-dark-theme .twf-color-attention {
    color: var(--dark-warning);
}

.twf-color-danger {
    color: var(--f-color-4);
}

.tng-dark-theme .twf-color-danger {
    color: var(--dark-red-1);
}

.twf-form {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow-x: hidden;
    overflow-y: auto;
}

.twf-form-group {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

    .twf-form-group.inline {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .twf-form-group.datetime {
/*        max-width: 22rem;
        min-width: 18rem;
*/    }

.twf-form-group-header {
}

    .twf-form-group-header.inline {
        width: 25%;
        max-width: 25%;
        flex: 1;
    }

.twf-form-group-body {
}

    .twf-form-group-body.inline {
        width: 75%;
        max-width: 75%;
        flex: 1;
    }


.twf-form-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

    .twf-form-row.inline {
        flex-direction: column;
        flex-wrap: unset;
    }

.twf-form-area {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    column-gap: var(--tng-btn-margin);
    row-gap: var(--tng-btn-margin);
    /* Gleicher Anschlag wie die uebrigen Bloecke einer Gruppe (TngHintBox, AlertBox):
       --margin-group-left-right. Das ist der Feld-Anschlag plus --field-padding, denn
       Felder sitzen zusaetzlich in einem Container mit ebendiesem Padding. */
    margin: var(--margin-group-top-bottom) var(--margin-group-left-right);
}

    /* Buttons und Felder bringen eigene Aussenabstaende mit, die den Anschlag
       verschieben wuerden. Der Abstand untereinander kommt hier aus dem gap. */
    .twf-form-area > .tng-btn,
    .twf-form-area > .btn,
    .twf-form-area > .squared-btn {
        margin: 0rem;
    }

    /* Gegenstueck zu .twf-form-row.inline: der Bereich bleibt bewusst eine Zeile. */
    .twf-form-area.inline {
        flex-direction: row;
    }

    .twf-form-area.no-padding {
        margin-left: 0rem;
        margin-right: 0rem;
    }

.twf-readonly-textbox {
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Kein Eingabefeld: die von .form-control geerbte untere Linie entfaellt. */
    border-bottom: none;
}

.twf-group {
    min-width: 23rem;
}

.twf-card-group {
    /*box-shadow: 0.33rem 0.33rem 0.5rem var(--shadow-1);*/
    background-color: var(--background-1);
    padding: 0rem;
    margin: var(--margin-group-top-bottom) var(--margin-group-left-right);
    border: 1px solid var(--border-1);
}

.tng-dark-theme .twf-card-group {
    /*box-shadow: 0.33rem 0.33rem 0.5rem var(--dark-shadow-2);*/
}

.twf-group-header {
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    border-bottom: none;
    background-color: transparent;
    padding: 1rem 4rem 1rem 1rem;
    font-size: var(--font-size-14px);
}

.tng-dark-theme .card-header {
    border-bottom: 1px solid var(--dark-border-1)
}

.tng-dark-theme .twf-group-header {
    border-bottom: none;
}

.twf-card-header {
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    border-bottom: none;
    background-color: transparent;
    padding: 1.2rem 4rem 1rem 0rem;
    font-size: var(--font-size-17px);
    margin-left: calc(var(--margin-left-right) + var(--min-padding));
    font-weight: 600;
}

.tng-dark-theme .twf-card-header {
    border-bottom: none;
}

.twf-card-header-icon {
    min-width: 9px;
    margin-left: 0rem;
}

.twf-group-header-text {
    font-weight: 600;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-left: 0.7rem;
}

.twf-group-body {
    padding: 0rem var(--min-padding) var(--margin-1) var(--min-padding);
    margin: 0rem 0rem 0rem 0rem;
}

.twf-input-container {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    margin: 0rem 0rem 0.125rem 0rem;
}

    .twf-input-container.inline {
        width: 100%;
    }

    .twf-input-container.bool {
        margin-top: 0.5rem;
        margin-bottom: 0.70rem;
        margin-left: 0.75rem;
    }

    .twf-input-container.searchfield {
        flex: 1 0 70%;
    }

    .twf-input-container.collectionfield {
        flex-wrap: wrap;
    }

    .twf-input-container.full-height {
        height: 100%;
    }

.twf-input {
    background-color: transparent !important;
    min-height: 2.24519231rem;
    display: flex;
    flex: 1;
    text-overflow: ellipsis;
    min-width: var(--min-field-width);
    margin: 0 var(--twf-input-margin);
}

    .twf-input.date {
        flex: 1;
/*        flex: 1 1 57% !important;
        max-width: 57%;
*/    }

    .twf-input.dateonly {
        flex: 1;
/*        flex: 1 1 calc(57% - 0.1rem) !important;
        max-width: calc(57% - 0.1rem);
*/    }

    .twf-input.time {
        flex: 1;
/*        flex: 1 1 42% !important;
        max-width: 42%;
*/    }

    .twf-input.textarea {
        overflow: unset;
    }

    .twf-input.listfield {
        width: 100%;
        overflow-y: auto;
    }

.twf-uppercase {
    text-transform: uppercase;
}

.twf-lowercase {
    text-transform: lowercase;
}

.twf-desc-field {
    flex: 1;
    overflow: hidden;
    min-width: 0rem;
}

.tng-header-text {
    display: flex;
    flex-direction: row;
    align-items: center;
    border-bottom: none;
    background-color: transparent;
    font-weight: 500;
    overflow: hidden;
    white-space: normal;
    text-overflow: ellipsis;
    padding: 0rem 0rem 0rem 0.2rem;
    font-size: var(--font-size-19px);
}

.tng-subheader-text {
    display: flex;
    flex-direction: row;
    align-items: center;
    border-bottom: none;
    background-color: transparent;
    font-weight: 500;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding: 0rem 0rem 0rem 0.2rem;
    font-size: var(--font-size-17px);
}

textarea {
    border: 1px solid !important;
}

    textarea:focus {
        border: 1px solid transparent !important;
    }

/* Mitwachsendes Textfeld ohne JavaScript (TextAreaField2, Lab).
   field-sizing wird von Browsern, die es nicht kennen, einfach übergangen:
   Das Feld bleibt dann bei seiner rows-Höhe. Deshalb ist kein Rückfall
   nötig - nur das Mitwachsen entfällt. */
.tng-autogrow {
    field-sizing: content;
}


    textarea[readonly], textarea[disabled] {
        border: 1px dashed var(--gray-5) !important;
    }

.tng-dark-theme textarea[readonly], .tng-dark-theme textarea[disabled] {
    border: 1px dashed var(--dark-white-1) !important;
}

/* Markierung der Einfügestelle für Textfelder mit TrackCaret.
   Das Element hängt am body und wird in TextAreaField.js positioniert - eine
   <textarea> nimmt keine Kindelemente auf. */
.tng-caret-marker {
    position: absolute;
    width: 0.125rem;
    background-color: var(--blue-3);
    pointer-events: none;
    z-index: 1000;
    animation: tng-caret-blink 1s step-end infinite;
}

.tng-dark-theme .tng-caret-marker {
    background-color: var(--dark-blue-1);
}

@keyframes tng-caret-blink {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.2;
    }
}

input[type="checkbox"]:checked {
    background: var(--f-color-3) !important;
    accent-color: var(--f-color-3) !important;
}