.cell {
    position: relative;
    overflow: hidden; /* Verhindert, dass Inhalte außerhalb der Zelle sichtbar sind */
    height: 24px; /* Höhe der Zelle, kann angepasst werden */
}

.stripes {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* Füllt die gesamte Höhe der Zelle */
    display: flex;
    flex-direction: row; /* Stripes nebeneinander */
    align-items: flex-start; /* Stripes beginnen oben */
    gap: 0; /* Kein Abstand zwischen den Stripes */
}

.stripe {
    height: 100%; /* Die Stripes füllen die komplette Höhe der Zelle */
    width: 10px; /* Breite der einzelnen Stripes */
    margin-right: 1px; /* Abstand zwischen den Stripes */
    background-color: transparent; /* Hintergrundfarbe wird durch den inline style gesetzt */
}

@keyframes blink {
    0% {
        background-color: red;
        color: white;
    }
    50% {
        background-color: white;
        color: red;
    }
    100% {
        background-color: red;
        color: white;
    }
}
.spinner-container {
    display: flex;
    position: fixed;
    z-index: 999;
    height: 100%;
    width: 100%;
    overflow: visible;
    background-color: rgba(255, 255, 255, 0.7);
    top: 0;
    left: 0;
    align-items: center;
    justify-content: center;
}

.blink{
    animation: blink 1s infinite;
}
.selected {
    background-cocomment_arear: #00FF7F; /* Beispiel-Hintergrundfarbe für ausgewählte Zeile */
}
.spinner {
    transition: opacity 0.3s ease;
}

.text-secondary {
    color: black;
}

.bg-yellow{
    background-color: #ffc125;
}

.bg-teal{
    background-color: #79CDCD;
}

.bg-blue{
    background-color: #63b8ff;
}

.bg-light-green{
    background-color: #00FF7F;
}

.bg-light-yellow1{
    background-color: #EE0;
}

.bg-light-yellow2{
    background-color: #FFFFE0;
}

.bg-orange{
    background-color: #ffa500;
}

.bg-light-teal{
    background-color: #48D1CC;
}

.bg-lime{
    background-color: #eedd82;
}

.bg-light-blue{
    background-color: #00f5ff;
}

.bg-cyan{
    background-color: #0FF;
}

.submenu {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-top: 5px;
    margin-bottom: 5px;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 10px;
}

.submenu ul {
    display: flex;
    list-style: none;
    margin: 0px;
    padding: 0px;
}

.submenu ul li {
    margin: 0px 10px;
}

.submenu ul li:not(:last-child) {
    border-right: 1px solid #ccc;
    padding-right: 10px;
}

.submenu ul li a {
    display: block;
    text-decoration: none;
    font-size: 14px;
    color: #333;
}

.submenu ul li a:hover {
    background-color: #ccc;
}

.ticket{
    border: 1px solid #0d6efd;
    border-radius: 5px;
    background-color: #0d6efd;
    color: white;
    font-size: 20px;
    font-weight: bolder;
    padding-left: 10px;
    margin-top: 10px;
}
.card-header a.btn {
    text-transform: lowercase;
    color: black;
    text-decoration: none;
}

.card-header a.btn-menu {
    text-transform: lowercase;
    color: black;
    text-decoration: none;
}
a.btn.btn-link {
    color: black;
    text-transform: none;
}
a.btn.btn-link:hover {
    text-decoration: none;
}
.form-label{
    font-size: 14px;
    font-weight: bolder;
}

main .ck.ck-content {
    min-height: 400px;
}

.signature-pad {
    /*position: absolute; /* Ändern Sie 'absolute' zu 'fixed' */
    /*bottom: 10px; /* Abstand vom unteren Rand */
    /*right: 40px; /* Abstand vom rechten Rand */
    /* display: flex;
    flex-direction: column;
    justify-content: right;*/
    width: 500px; /* Füge die gewünschte Breite hinzu */
    height: 200px; /* Füge die gewünschte Höhe hinzu */
    align-content: flex-end;
    min-height: 200px;
    border: 1px solid #e8e8e8;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
}

.signature-pad canvas {
    width: 500px;
    height: 200px;
}

.contactlist ul {
    margin: 0px;
    padding: 0px;
    border: 1px #ccc;
    z-index: 0;
}
.contactlist ul li {
    margin: 0px;
    padding: 0px;
    border: 0px;

}

.holiday {
    margin: 5px 0; /* Abstand zwischen den Linien */
    font-size: 10px;
    font-weight: bolder;
    overflow: hidden;
    width: 56px;
    height: 20px;
}

.holiday_left {
    margin: 5px 0; /* Abstand zwischen den Linien */
    font-size: 10px;
    font-weight: bolder;
    overflow: hidden;
    width: 56px;
    height: 20px;
    border-top-left-radius: 10px; /* Radius der oberen linken Ecke */
    border-bottom-left-radius: 10px; /* Radius der unteren linken Ecke */
}

.holiday_right {
    margin: 5px 0; /* Abstand zwischen den Linien */
    font-size: 8px;
    overflow: hidden;
    width: 56px;
    height: 20px;
    border-top-right-radius: 10px; /* Radius der oberen rechten Ecke */
    border-bottom-right-radius: 10px; /* Radius der unteren rechten Ecke */
}

.holiday_both {
    margin: 5px 0; /* Abstand zwischen den Linien */
    font-size: 8px;
    overflow: hidden;
    width: 56px;
    height: 20px;
    border-radius: 10px; /* Radius der oberen rechten Ecke */
}

.btn-uwe:active {
    background-color: #FF69B4 !important; /* Pink */
    color: #000000 !important; /* Schwarze Textfarbe */
}
/* Container für die drei Bereiche */
.container {
    white-space: nowrap;
    margin-right: 5px !important;
}
/* Stil für jeden Bereich */
.area{
    display: inline-block;
    flex: 1;
    overflow-y: auto; /* Vertikaler Scrollbalken bei Bedarf */
    /*border: 1px solid #ccc;*/
    /*margin-right: 5px;*/
}

.comment_area {
    height: 200px ;
    overflow-y: auto;
    overflow-x: hidden;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin-bottom: 5px;
}
.area0
{
    height: 350px !important;
    overflow-y: auto;
    overflow-x: hidden;
}

.area1
{
    height: 887px; /* Höhe der Bereiche */
}
.area2{
    height: 1000px; /* Höhe der Bereiche */
    position: relative;
}

.area3{
    height: 600px; /* Höhe der Bereiche */
}

.area_left {
    width: 23%;
    overflow: hidden;
}
.area_center{
    width: 40%;
    overflow: hidden;
}
.area_right{
    width: 36%;
    overflow: hidden;
}

.area_left1{
    width: 38.5%;
    overflow: hidden;

}

.area_center2{
    width: 22%;
}

.area_right1{
    width: 60%;
    margin-left: 10px;
    overflow: hidden;
    position: relative;

}
.area_center1
{
    width: 39%;
    overflow: hidden;
}

.area_left2
{
    width: 36%;
    overflow: hidden;
}

.area_right2
{
    width: 44%;
    overflow: hidden;
}
.test-skin{
    position: absolute;
}
.bottomButtons {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    /*padding: 2px;*/
}

.labeltext {
    font-size: 18px !important;
}

.big_button{
    width: 90%;
    height: 250px;
    font-size: 3em !important;
    border-radius: 10px; /* Füge hier den Radius für die Ecken hinzu */
    border: none;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    margin: 5px 2px;
    cursor: pointer;
}
.big_button1{
    width: 98%;
    height: 80px;
    font-size: 3em !important;
    border-radius: 5px; /* Füge hier den Radius für die Ecken hinzu */
    border: none;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    margin: 5px 2px;
    cursor: pointer;
}
.big_button2{
    width: 24%;
    height: 5%;
    font-size:1.5em !important;
    border-radius: 10px; /* Füge hier den Radius für die Ecken hinzu */
    border: none;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    margin: 4px 2px;
    cursor: pointer;
}
.big_button3{
    width: 100%;
    height: 150px;
    border-radius: 10px; /* Füge hier den Radius für die Ecken hinzu */
    font-size:1em !important;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    margin: 4px 2px;
    cursor: pointer;
}

.big_button4{
    width: 90%;
    /*height: 100%;*/
    border-radius: 10px; /* Füge hier den Radius für die Ecken hinzu */
    font-size:0.5em !important;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    margin: 4px 2px;
    cursor: pointer;
}

.big_button5{
    /*width: 100%;
    height: 300px;*/
    width: 90%;
    height: 450px;
    font-size: 3em !important;
    border-radius: 10px; /* Füge hier den Radius für die Ecken hinzu */
    border: none;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    margin: 5px 2px;
    cursor: pointer;
}

.container-zb{
    background: url('ZahlscheinHWP.jpg') center top;
    height: 580px !important;
    background-size: contain;
    background-position: center top;
    background-repeat: no-repeat;
    background-color: #f2f2f2;
    position: relative;
    z-index: 1;
    position: absolute;
    bottom: 0;
    left: 0;
    /*width: auto;*/
}

.modal {
    z-index: 1050; /* Oder einen höheren Wert verwenden, falls erforderlich */
}

#mail_text1 {
    word-wrap: break-word;
    white-space: pre-line;
}

.bordered-box {
    border: 1px solid #000; /* Ändere #000 zu der gewünschten Rahmenfarbe */
    padding: 10px; /* Optional: Füge Padding hinzu, um den Inhalt vom Rand zu trennen */
}

.storagePlace{
    border: 1px solid #000; /* Ändere #000 zu der gewünschten Rahmenfarbe */
    padding: 10px; /* Optional: Füge Padding hinzu, um den Inhalt vom Rand zu trennen */
    width: 140px;
    height: 60px;
}

.storagePlace1Left{
    border-top: 1px solid #000; /* 1 Pixel schwarzer Rahmen oben */
    border-bottom: 1px solid #000; /* 1 Pixel schwarzer Rahmen unten */
    border-left: 1px solid #000; /* 1 Pixel schwarzer Rahmen links */
    box-sizing: border-box; /* Inkludiert den Rahmen in die Berechnung der Größe */
    padding: 2px; /* Optional: Füge Padding hinzu, um den Inhalt vom Rand zu trennen */
    width: 70px;
    height: 60px;
}

.storagePlace1Right{
    border-top: 1px solid #000; /* 1 Pixel schwarzer Rahmen oben */
    border-bottom: 1px solid #000; /* 1 Pixel schwarzer Rahmen unten */
    border-right: 1px solid #000; /* 1 Pixel schwarzer Rahmen links */
    box-sizing: border-box; /* Inkludiert den Rahmen in die Berechnung der Größe */
    padding: 2px; /* Optional: Füge Padding hinzu, um den Inhalt vom Rand zu trennen */
    width: 70px;
    height: 60px;
}

.storagePlace2Left{
    border-top: 1px solid #000; /* 1 Pixel schwarzer Rahmen oben */
    border-bottom: 1px solid #000; /* 1 Pixel schwarzer Rahmen unten */
    border-left: 1px solid #000; /* 1 Pixel schwarzer Rahmen links */
    box-sizing: border-box; /* Inkludiert den Rahmen in die Berechnung der Größe */
    padding: 2px; /* Optional: Füge Padding hinzu, um den Inhalt vom Rand zu trennen */
    width: 70px;
    height: 60px;
}

.storagePlace2Right{
    border-top: 1px solid #000; /* 1 Pixel schwarzer Rahmen oben */
    border-bottom: 1px solid #000; /* 1 Pixel schwarzer Rahmen unten */
    border-right: 1px solid #000; /* 1 Pixel schwarzer Rahmen links */
    box-sizing: border-box; /* Inkludiert den Rahmen in die Berechnung der Größe */
    padding: 2px; /* Optional: Füge Padding hinzu, um den Inhalt vom Rand zu trennen */
    width: 70px;
    height: 60px;
}

.shelf {
    border: 1px solid #000; /* Ändere #000 zu der gewünschten Rahmenfarbe */
    padding: 10px; /* Optional: Füge Padding hinzu, um den Inhalt vom Rand zu trennen */
    width: 140px;
    height: 24px;
}

.loc {
    border: 1px solid #000; /* Ändere #000 zu der gewünschten Rahmenfarbe */
    padding: 10px; /* Optional: Füge Padding hinzu, um den Inhalt vom Rand zu trennen */
    width: 24px;
    height: 60px;
}
.loc2 {
    border: 1px solid #000; /* Ändere #000 zu der gewünschten Rahmenfarbe */
    padding: 10px; /* Optional: Füge Padding hinzu, um den Inhalt vom Rand zu trennen */
    width: 24px;
    height: 24px;
}

input.no-border {
    border: none;
    outline: none; /* Removes the default focus outline */
}

.section-header {
    cursor: pointer;
    font-weight: bold;
    color: #007BFF; /* Blaue Farbe für den Text */
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.section-header i {
    margin-left: 10px; /* Abstand zwischen dem Pfeil und dem Text */
    transition: transform 0.3s ease; /* Animationsübergang für den Pfeil */
}
.section-header.collapsed i {
    transform: rotate(90deg); /* Rotiere den Pfeil um 90 Grad, wenn der Abschnitt zusammengeklappt ist */
}
.custom-hr {
    margin-top: 1px; /* Ändern Sie den oberen Abstand nach Bedarf */
    margin-bottom: 1px; /* Ändern Sie den unteren Abstand nach Bedarf */
    border: 0; /* Entfernen Sie den Standardrahmen des hr-Elements */
    border-top: 1px solid #ccc; /* Fügen Sie eine benutzerdefinierte oberste Grenzlinie hinzu */
}

.card-body-800 {
    height: 626px !important; /* Hier kannst du die gewünschte Höhe in Pixeln oder einer anderen Einheit festlegen */
    overflow-y: auto; /* Falls der Inhalt die festgelegte Höhe überschreitet, wird ein Scrollbalken angezeigt */
}
#bills tbody tr:hover {
    cursor: pointer;
}

.table-striped-custom tbody tr:nth-child(odd) {
    background-color: #f8f9fa; /* Farbe für ungerade Zeilen */
}

.table-striped-custom tbody tr:nth-child(even) {
    background-color: #ffffff; /* Farbe für gerade Zeilen */
}
tr.hide-row{
    display: none;
}

.hidden {
    display: none;
}

.doubleUnderline {
    border-bottom: double 3px;
}

.form-check-input:checked {
    background-color: transparent; /* Hintergrundfarbe transparent machen */
    border-color: #3498db; /* Farbe des Rahmens ändern */
    box-shadow: 0 0 0 2px #3498db; /* Schatten hinzufügen */
}

.form-check-input {
    -webkit-appearance: checkbox;
    -moz-appearance: checkbox;
    appearance: checkbox;
}
.modal {
    z-index: 1050; /* Höher als der Backdrop-Z-Index */
}
#example {
    border: 1px solid #ccc; /* Hier kannst du die gewünschte Rahmenfarbe und -dicke einstellen */
}

/* Füge einen Rahmen zu den DataTables-Zellen hinzu */
table.dataTable {
    border-collapse: collapse;
    width: 100%;
}

table.dataTable, table.dataTable th, table.dataTable td {
    border: 1px solid #0d6efd; /* Ändere die Rahmenstärke und Farbe nach Bedarf */
}

table.dataTable th, table.dataTable td {
    padding: 8px;
    text-align: left;
}

#scrollable-table-container {
    height: 550px; /* Anpassen nach Bedarf */
    overflow-y: auto;
}

#scrollable-table {
    width: 100%;
    border-collapse: collapse;
}

#scrollable-table tbody {
    display: block;
    width: 100%;
}

#scrollable-table tbody td {
    padding: 8px;
    border: 1px solid #ccc;
    display: table-cell;
}

.calendar-wrapper {
    position: relative;
    width: 100%;
    height: auto; /* Höhe anpassen, keine feste Höhe */
    overflow: hidden;
}

/* Container für die Kalender */
.calendar-container {
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease;
    padding: 10px 0;
}

/* Einzelner Kalender */
.calendar {
    width: 90%;
}

/* Header und Fußzeilen für die Scroll-Pfeile */
.scroll-arrow {
    position: absolute;
    width: 30px;
    height: 30px;
    text-align: center;
    cursor: pointer;
    background: none;
    border: none;
    font-size: 20px;
    color: black;
}

.scroll-arrow.up {
    top: 10px; /* Position oben anpassen */
    right: 10px;
}

.scroll-arrow.down {
    bottom: 18px; /* Position unten anpassen */
    right: 10px;
}