html,
body {
    overflow-x: hidden;
    /* Prevent scroll on narrow devices */
}

.text-white-50 {
    color: rgba(255, 255, 255, .5);
}

.bg-purple {
    background-color: var(--purple);
}

.border-bottom {
    border-bottom: 1px solid #e5e5e5;
}

.bemerkungen {
    overflow-y: scroll;
    height:150px;
}

.add-bemerkungen {
    height:65px;
}

#bemerkungen1 {
    height:375px;
}

.btn-icon {
    width:50px;
    height:50px;
}

.grey-card {
    margin:5px;
    border-radius:10px;
    background-color:rgb(247,247,247)
}

.grey-card-dark {
    margin:5px;
    border-radius:10px;
    background-color:rgb(238,238,238)
}

.grey-card-dark2 {
    margin:5px;
    border-radius:10px;
    background-color:rgb(199, 198, 198)
}

.btn-light-green {
    background-color: rgba(26, 211, 2, 0.781)!important;
    border-color:rgba(30, 219, 5, 0.87)!important;
    color:white!important;
}

.btn-light-green:hover {
    background-color: rgba(24, 173, 5, 0.781)!important;
    border-color:rgba(24, 173, 5, 0.781)!important;
    color:white!important;
}

.btn-outline-light-green {
    background-color: rgba(26, 211, 2, 0)!important;
    border-color:rgba(26, 211, 2, 0.781)!important;
    color:rgba(26, 211, 2, 0.781)!important;
}

.btn-outline-light-green:hover {
    background-color: rgba(26, 211, 2, 0.781)!important;
    border-color:rgba(26, 211, 2, 0.781)!important;
    color:white!important;
}

.btn-light-red {
    background-color: rgb(255, 58, 101)!important;
    border-color:rgba(255, 96, 130, 1)!important;
    color:white!important;
}

.btn-light-red:hover {
    background-color: rgb(199, 44, 77)!important;
    border-color:rgba(199, 44, 77)!important;
    color:white!important;
}

.btn-outline-light-red {
    background-color: rgba(255, 58, 101, 0)!important;
    border-color:rgb(255, 58, 101)!important;
    color:rgb(255, 58, 101)!important;
}
.btn-outline-light-red:hover {
    background-color: rgb(255, 58, 101)!important;
    border-color:rgb(255, 58, 101)!important;
    color:white!important;
}

.btn-light-orange {
    background-color: rgb(253, 176, 10)!important;
    border-color:rgba(253, 176, 10)!important;
    color:rgb(0, 0, 0)!important;
}

.tooltip-inner {background-color: rgb(46, 46, 46);color:rgb(255, 250, 241);font-weight:500;}

.timer.colon {
    font-size:20px!important;
}

.timepicker {
    z-index:9999;
}

/* HTML: <div class="loader"></div> */
#overlay_load {
    position: fixed!important;
    width: 100%!important;
    height: 100%!important;
    top: 0!important;
    left: 0!important;
    background-color: rgba(0, 0, 0, 0.5)!important;
    z-index: 9999!important;
    display: flex;
    justify-content: center!important;
    align-items: center!important;
    
}
.loader {
    position: absolute; /* Ändern Sie die Positionierung auf absolute */
    top: 50%; /* Verschieben Sie den Loader zur vertikalen Mitte */
    left: 50%; /* Verschieben Sie den Loader zur horizontalen Mitte */
    --d:50px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    color: #ffffff;
    box-shadow: 
    calc(1*var(--d))      calc(0*var(--d))     0 0,
    calc(0.707*var(--d))  calc(0.707*var(--d)) 0 1px,
    calc(0*var(--d))      calc(1*var(--d))     0 2px,
    calc(-0.707*var(--d)) calc(0.707*var(--d)) 0 3px,
    calc(-1*var(--d))     calc(0*var(--d))     0 4px,
    calc(-0.707*var(--d)) calc(-0.707*var(--d))0 5px,
    calc(0*var(--d))      calc(-1*var(--d))    0 6px;
    animation: l27 1s infinite steps(8);
}

@keyframes l27 {
    100% {transform: rotate(1turn)}
}

.hide-overlay {
    display:none!important;
}