@import url('/css/pacs_general.css?t=1');
:root {
    --main-color-rgb: 26,101,119;
    --bg_light_free_hdd_space: 184,200,187;
    --content-text-main-color: #6d3b0b;
    --bs-secondary-rgb: 255, 255, 199;
}


body, * {
    font-size: 13px;
    font-family: "Open Sans";
}


.card-header {
    padding: var(--bs-card-cap-padding-y) var(--bs-card-cap-padding-x);
    margin-bottom: 0;
    color: #fff;
    background-color: rgba(var(--main-color-rgb), 1);
    border-bottom: var(--bs-card-border-width) solid var(--bs-card-border-color);
}

.datatable-arzt-row small,
table.dataTable small{
    color: var(--content-text-main-color);
    opacity:.4;
}

table.dataTable.display > tbody > tr > td.datatable-arzt-row,
{ line-height: 1rem; }
table.dataTable.display > tbody > tr:hover > td.datatable-arzt-row small,
table.dataTable.display.child-table > tbody > tr:hover > td small {
    color: #fff !important;
    opacity: 1;
}

@keyframes flash {
    0% {
        background-color: rgba(var(--main-color-rgb), .5);
    }
    /* Highlight-Farbe */
    100% {
        background-color: transparent;
    }
}

.highlight-flash {
    animation: flash 1s ease-out;
}



        :root {
            --viewer-anim-base-h: 80px;
            /* Leuchtendere Farben für dunkle Hintergründe */
            --viewer-anim-cyan-light: #1c6477;
            --viewer-anim-cyan: #ff6600;
            --viewer-anim-orange: #ff6600;
            --viewer-anim-orange-dark: #1c6477;
            --viewer-anim-c-size: calc(var(--viewer-anim-base-h) * 1.1);
            --viewer-anim-f-size-hd: calc(var(--viewer-anim-base-h) * 0.72);
        }

        .viewer-anim-loader-wrapper {
            display: inline-flex;
            flex-direction: column;
            align-items: center;
            font-family: 'Open Sans', sans-serif;
            /* WICHTIG: Erlaubt Multiply auf dunklem Grund, ohne schwarz zu werden */
            isolation: isolate; 
            padding: 20px;
        }

        .viewer-anim-logo-container {
            position: relative;
            width: calc(var(--viewer-anim-base-h) * 3.5);
            height: calc(var(--viewer-anim-base-h) * 1.6);
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .viewer-anim-circle {
            position: absolute;
            width: var(--viewer-anim-c-size);
            height: var(--viewer-anim-c-size);
            border-radius: 50%;
            opacity: 0;
            mix-blend-mode: color;
            animation: viewer-anim-inflate 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.27) forwards;
        }

        .viewer-anim-pulse-wrapper {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background: inherit;
            /* Verstärktes Pulsieren */
            animation: viewer-anim-pulse-heavy var(--p-speed) infinite ease-in-out;
            animation-delay: 1.2s;
        }

        .c1 { background: var(--viewer-anim-cyan-light); --x: -80px; --p-speed: 2.2s; --p-scale: 1.15; animation-delay: 0.1s; }
        .c2 { background: var(--viewer-anim-cyan);       --x: -30px; --p-speed: 1.8s; --p-scale: 1.12; animation-delay: 0.25s; }
        .c3 { background: var(--viewer-anim-orange);     --x: 30px;  --p-speed: 2.0s; --p-scale: 1.14; animation-delay: 0.4s; }
        .c4 { background: var(--viewer-anim-orange-dark);--x: 80px;  --p-speed: 2.5s; --p-scale: 1.18; animation-delay: 0.55s; }

        @keyframes viewer-anim-inflate {
            0% { transform: scale(0) translateX(0); opacity: 0; }
            100% { transform: scale(1) translateX(var(--x)); opacity: 0.9; }
        }

        @keyframes viewer-anim-pulse-heavy {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(var(--p-scale)); }
        }

        .viewer-anim-hd-text {
            position: relative;
            z-index: 100;
            font-size: var(--viewer-anim-f-size-hd);
            color: #ffffff;
            font-weight: 700;
            letter-spacing: -20px;
            opacity: 0;
            filter: drop-shadow(0 2px 5px rgba(0,0,0,0.5));
            /* Start bei 0.5 -> Ende bei 1.2 (entspricht +20% Breite) */
            animation: viewer-anim-text-pop 0.5s ease-out forwards 1.1s;
            transform-origin: center;
            /* Korrektur der Positionierung aus deiner Vorlage */
            top: -.5rem;
            left: -1rem;
            position: relative;
        }

        @keyframes viewer-anim-text-pop {
            0% { opacity: 0; transform: scale(0.5, 0.5); }
            100% { opacity: 1; transform: scale(1.1, 1); } 
        }

        .viewer-anim-subline {
            font-size: 10px;
            letter-spacing: 2px;
            color: #fff;
            font-weight: 300;
            text-transform: uppercase;
            opacity: 0;
            animation: viewer-anim-fade-in 0.8s ease-out forwards 1.5s;
            position: relative;
            top: -3.4rem;
        }

        .viewer-anim-subline-viewer {
            color: #00e5ff; /* Passend zum Cyan für Akzent */
            margin: 0;
            font-weight: 600;
            font-size: 16px;
            letter-spacing: 4px;
            text-transform: uppercase;
            opacity: 0;
            animation: viewer-anim-fade-in 0.8s ease-out forwards 1.7s;
            position:relative;
            top:-2.1rem;
        }

        @keyframes viewer-anim-fade-in {
            to { opacity: 1; }
        }

.form-check-input:checked {
    background-color: #00ac69;
}

.cursor-pointer {
    cursor:pointer;
}