/* Add here all your CSS customizations */


.finger {
	cursor: pointer;
}

.checkbox-custom input[type="checkbox"] {
    opacity: 7;
    top: 28%;
}

#header .container {
    background-image: url(/assets/gfx/backgrounds/decorello-streifen-top.webp);
}

html .card-primary .card-actions a, html .card-primary .card-title {
    color: #444444;
}

html.dark .text-dark {
    color: #2c2c2c !important;
}

@-webkit-keyframes progress-bar-stripes {
    0% {
        background-position-x: 1.25rem;
    }
}
@keyframes progress-bar-stripes {
    0% {
        background-position-x: 1.25rem;
    }
}
.progress {
    --progress-height: 1.25rem;
    --progress-font-size: calc(var(--body-font-size) * 0.85);
    --progress-bg: var(--gray-200);
    --progress-border-radius: var(--border-radius);
    --progress-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075);
    --progress-bar-color: var(--white);
    --progress-bar-bg: var(--primary);
    --progress-bar-transition: width 0.6s ease;
    display: -ms-flexbox;
    display: flex;
    height: var(--progress-height);
    overflow: hidden;
    font-size: var(--progress-font-size);
    background-color: var(--progress-bg);
    border-radius: var(--progress-border-radius);
    box-shadow: var(--progress-box-shadow);
}
.progress-bar {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: center;
    justify-content: center;
    overflow: hidden;
    color: var(--progress-bar-color);
    text-align: center;
    white-space: nowrap;
    background-color: var(--progress-bar-bg);
    transition: var(--progress-bar-transition);
}
@media (prefers-reduced-motion: reduce) {
    .progress-bar {
        transition: none;
    }
}
.progress-bar-striped {
    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-size: var(--progress-height) var(--progress-height);
}
.progress-bar-animated {
    -webkit-animation: 1s linear infinite progress-bar-stripes;
    animation: 1s linear infinite progress-bar-stripes;
}
@media (prefers-reduced-motion: reduce) {
    .progress-bar-animated {
        -webkit-animation: none;
        animation: none;
    }
}

hr {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to left, #b3eb0b, #5bc0de, #b3eb0b);
    margin: 22px 0 22px 0;
}

.bg-purple {
    border: 0.5;
    background-color: #b999ef;
    --alert-color: #634e87;
    --alert-bg: #f4f1f9;
    --alert-border-color: #c7b8e0;
}

/* Colors */
.btn-purple {
    background-color: #634e87;
    border-color: #CCC #CCC #b3b2b2;
    color: #FFF;
}

.btn-purple:hover, .btn-purple.hover {
    background-color: #937ab8;
    border-color: #e6e5e5 #e6e5e5 #CCC;
    color: #FFF;
}

.btn-purple:focus, .btn-purple.focus {
    box-shadow: 0 0 0 3px rgba(204, 204, 204, 0.5);
    color: #FFF;
}

.btn-purple.disabled, .btn-purple:disabled {
    background-color: #CCC;
    border-color: #CCC #CCC #b3b2b2;
}

.btn-purple:active, .btn-purple.active,
.show > .btn-purple.dropdown-toggle {
    background-color: #b9b9b9;
    background-image: none;
    border-color: #b3b2b2 #b3b2b2 #999999;
}

/* Custom Styles für das Modal im Dark Mode */
#rezeptorModal .modal-content {
    background-color: #333; /* Dunkler Hintergrund */
    color: #fff; /* Helle Schrift */
}

#rezeptorModal .modal-header {
    border-bottom: 1px solid #7f13a4; /* Dunklere Linie für den Header */
}

#rezeptorModal .modal-footer {
    border-top: 1px solid #444; /* Dunklere Linie für den Footer */
}

#rezeptorModal .btn-primary {
    background-color: #9ede0a; /* Primäre Button-Farbe */
    border-color: #9ede0a;
}

#rezeptorModal .btn-link {
    color: #ddd; /* Helle Link-Farbe */
}