.my-table-container {
    border-radius: 6px;
    /* margin auf container übertragen, damit der border-radius auch unten zu sehen ist */
    margin-bottom: 1rem;
    overflow: hidden;
}

.my-table-container table {
    /* margin auf container übertragen, damit der border-radius auch unten zu sehen ist */
    margin-bottom: 0;
}

/* Wrapper für horizontales Scrollen */
.table-scroll-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* für sanftes Scrollen auf mobilen Geräten */
}

/* Warenkorb in der Höhe so anpassen, dass immer der gesamte Platz der Seite genutzt wird, aber die Tabelle vertikal scrollt, statt Elemente zu verdrängen */
.table-scroll-warenkorb {
    max-height: calc(100vh - var(--navbar-height) - 3rem - calc(1.2 * (1.375rem + 1.5vw)) - 1.5rem - 1rem - 78px - 45px - 1rem);
    overflow-y: auto;
}

@media (min-width: 1200px) {
    .table-scroll-warenkorb {
        max-height: calc(100vh - var(--navbar-height) - 3rem - calc(1.2 * (2.5rem)) - 1.5rem - 1rem - 78px - 45px - 1rem);
    }
}

.table-scroll-warenkorb table th {
    z-index: 1;
    /* Die input-group bei der Anbruch-Menge schiebt sich sonst über die Kopfzeile */
}

/* Bestellhistorie in der Höhe so anpassen, dass immer der gesamte Platz der Seite genutzt wird, aber die Tabelle vertikal scrollt, statt Elemente zu verdrängen */
.table-scroll-bestellung-historie {
    max-height: calc(100vh - var(--navbar-height) - 3rem - calc(1.2 * (1.375rem + 1.5vw)) - 1.5rem - 38px - 1.5rem - 1rem - 32px - 0.5rem - 45px);
    overflow-y: auto;
}

@media (min-width: 1200px) {
    .table-scroll-bestellung-historie {
        max-height: calc(100vh - var(--navbar-height) - 3rem - calc(1.2 * (2.5rem)) - 1.5rem - 38px - 1.5rem - 1rem - 32px - 0.5rem - 45px);
    }
}

@media (max-width: 767px) {
    .table-scroll-bestellung-historie {
        max-height: calc(100vh - var(--navbar-height) - 3rem - calc(1.2 * (1.375rem + 1.5vw)) - 1.5rem - 38px - 1rem - 38px - 1.5rem - 1rem - 32px - 0.5rem - 45px);
    }
}

/* Bestelldetails in der Höhe so anpassen, dass immer der gesamte Platz der Seite genutzt wird, aber die Tabelle vertikal scrollt, statt Elemente zu verdrängen */
.table-scroll-bestellung-details {
    max-height: calc(100vh - var(--navbar-height) - 3rem - calc(1.2 * (1.375rem + 1.5vw)) - 1.5rem - 1rem - 24px - 1rem - 45px);
    overflow-y: auto;
}

@media (min-width: 1200px) {
    .table-scroll-bestellung-details {
        max-height: calc(100vh - var(--navbar-height) - 3rem - calc(1.2 * (2.5rem)) - 1.5rem - 1rem - 24px - 1rem - 45px);
    }
}

@media (max-width: 490px), (min-width: 697px) and (max-width: 767px) {
    .table-scroll-bestellung-details {
        max-height: calc(100vh - var(--navbar-height) - 3rem - calc(2 * 1.2 * (1.375rem + 1.5vw)) - 1.5rem - 1rem - 24px - 1rem - 45px);
    }
}

.table-scroll-blacklist {
    max-height: 710px;
    padding-right: 10px;
}

.table-scroll-wrapper table th,
.table-scroll-wrapper table td {
    white-space: nowrap;
}

.table-scroll-wrapper thead th {
    position: sticky;
    top: 0;
}

.btn-sm-icon-xl {
    padding: 0;
    height: 1.9375rem;
    width: 2rem;
}

.btn-sm-icon-xl>i {
    font-size: 1.7rem;
    line-height: 1;
}

.btn-sm-icon-l {
    padding: 0;
    height: 2rem;
    width: 2rem;
}

.btn-sm-icon-l>i {
    font-size: 1.5rem;
    line-height: 1.25;
}

ul.center-ul {
    width: fit-content;
    margin: auto;
}

ul.center-ul>li {
    padding-left: 0.85rem;
}

.pointer {
    cursor: pointer;
}

p.keep-height:empty::before {
    content: "\00a0";
    /* Leerzeichen erzeugen, wenn kein Inhalt, um Höhe zu erhalten */
}

#alertPlaceholder {
    /*Notwendig, damit die Alerts keine anderen Elemente verschieben. Würde man die Alerts selbst absolut positionieren, wären alle übereinander*/
    z-index: 1090;
    /* Damit es über allen anderen Elementen anzeigt wird */
}

.alert {
    z-index: 1;
    /* Wird sonst eventuell verdeckt, wenn etwas absolut positioniert ist */
}

/* Tooltip auf z.B. dem Label einer Button-Group anzeigen, auch wenn es "gesperrt" ist. Für andere Arten von Elementen erstmal testen */
.disabled-tooltip {
    pointer-events: auto !important;
    /* Maus aktivieren, damit Tooltip angezeigt wird */
    cursor: default;
    /* Mauszeiger wieder zurücksetzen, damit es nicht aussieht als könnte man den Button anklicken */
}

.no-bullets {
    list-style-type: none;
}

.fixed-center {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.fixed-right {
    position: fixed;
    top: var(--navbar-height);
    right: 0%;
}

.fixed-top-center {
    position: fixed;
    top: var(--navbar-height);
    left: 50%;
    transform: translate(-50%, 0%);
    min-width: 80%;
    text-align: center;
}