:root {
    --width_left: 140px;
    --width_right: 299px;
}
/* ### Elemente ### */
body {
    display: block;
    margin: 8px;
}
h1 {
    margin: 5px 0px;
}
h2 {
    margin: 0px;
}
form {
    display: flex;
    flex-wrap: wrap;
}
fieldset {
    border: 2px solid lightgray;
    padding: 5px 10px 5px 10px;
    margin: 10px 2px 0px 2px;
}
textarea {
    border: 1px solid gray;
    padding: 2px;
    margin: 0px;
    width: calc(var(--width_right) - 6px);
    max-width: calc(var(--width_left) + var(--width_right) - 2px);
    height: 3.5em;
    float: right;
}
label {
    display: inline-block;
    width: var(--width_left);
    text-align: left; /* Für Tabellenüberschrift ToDos */
}
th {
    width: calc(var(--width_right) /3);
}
td {
    text-align: center;
}
li {
    width: calc(var(--width_right) - 12px);
}
div.unloaded {
    background-color: lightgrey;
}
/* ### Klassen ### */
.flex_container_header {
    /* Flexcontainer Kontrollleiste */
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    /* align-content: ; */
}
.flex_container_control {
    /* Flexcontainer */
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
}
.disabled {
    color: darkgrey;
    user-select: none;
}
.invisible {
    visibility: hidden;
}
.unshown {
    display: none !important;
}
.unused {
    display: none !important;
}
.td_label {
    text-align: left;
}
.form_title_edit {
    background-color: lightsalmon;
}
.form_title_new {
    background-color: lightgreen;
}
.form_button {
    height: 26px;
    /* margin: 0px 25px; */
}
.group_p {
    width: calc(var(--width_left) + var(--width_right) + 4px);
    text-align: center;
}
.form_div {
    width: calc(var(--width_left) + var(--width_right) + 4px); /* + 4px Leerraum */
    margin: 4px 0px;
}
.textarea_div {
    overflow: hidden;
}
.text_input {
    border: 1px solid gray;
    padding: 2px;
    margin: 0px;
    width: calc(var(--width_right) - 6px);
}
.short_input {
    border: 1px solid gray;
    padding: 2px;
    margin: 0px;
    width: calc(var(--width_right) - 6px - 40px - 4px);
}
.very_short_input {
    border: 1px solid gray;
    padding: 2px;
    margin: 0px;
    width: calc((var(--width_right) - 6px - 6px - 4px - 4px - 4px - 40px - 40px)/2);
}
.very_short_span{
    padding: 2px;
    margin: 0px;
    width: calc((var(--width_right) - 6px - 6px - 4px - 4px - 4px - 40px - 40px)/2 + 2px);
    display: inline-block;
}
.unit {
    width: 40px;
    display: inline-block;
}
.color-box {
    width: 180px;
    height: 15px;
    background-color: #00000000;
    float: right;
}
.chosen-container .chosen-results {
    max-height: 600px; /* Default: 240px */
}
label.error {
    width: var(--width_right);
    color: red;
    padding: 0px 0px 5px calc(var(--width_left) + 4px);
}
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
    color: rgb(255, 174, 0);
}
.tooltip .tooltiptext {
    visibility: hidden;
    width: 300px;
    background-color: black;
    color: #fff;
    text-align: center;
    padding: 5px;
    border-radius: 6px;
    top: -5px;
    position: absolute;
    z-index: 1;
}
.tooltip .tooltiptext.right {
    left: 105%;
}
.tooltip .tooltiptext.left {
    right: 105%;
}
.tooltip:hover .tooltiptext {
    visibility: visible;
}
.taggle_area {
    /* border: 1px solid gray; */
    /* padding: 2px; */
    /* margin: 0px; */
    width: calc(var(--width_right));
    max-width: calc(var(--width_left) + var(--width_right) - 2px);
    /* height: 3.5em; */
    float: right;
    /* position: relative; */
    /* resize: both; */
    /* overflow: auto; */
}
/* .taggle_text {
    width: calc(var(--width_right) - 6px - 20px);
    display: inline-block;
    word-wrap:break-word;
    white-space: normal
} */
/* Taggle-CSS an Chosen-Tags anpassen */
.extensive {
    border: 1px solid gray;
    width: calc(var(--width_right) - 2px);
    min-height: 20px;
    display: inline-block;
    vertical-align: middle;
    cursor: text;
}
/* ### IDs ### */
#section_header {
    height: 30px;
}
#section_main {
    /* Flexcontainer */
    display: flex;
    flex-direction: row;
    /* flex-wrap: wrap; */
    justify-content: space-between;
    align-items: stretch;
    /* align-content: ; */
}
#control_buttons {
    /* Flexcontainer */
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
#section_footer {
    height: 30px;
}
#title {
    font-size: 2em;
    margin: 5px 0px;
}
#raumteiler{ /* Temporär, bis bessere Lösung für Label-Verschiebung gefunden ist */
    display: inline-block;
    width: calc(var(--width_right) + var(--width_left));
    visibility: hidden;
    margin: 0;
}
.loader {
    border: 5px solid #f3f3f3; /* Light grey */
    border-top: 5px solid #3498db; /* Blue */
    border-radius: 50%;
    width: 16px;
    height: 16px;
    animation: spin 1s linear infinite;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
 /* The Modal (background) */
 .modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    justify-content: center;
}
/* Modal Content/Box */
.modal-content {
    position: relative;
    background-color: #fefefe;
    margin: 3% auto auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
}
/* Modal Window Close Button */
#modal-close {
    position: absolute;
    top: 0;
    right: 0px;
    border-radius: 0;
    width: 20px;
    height: 20px;
}