:root {
    --main-color-rgb: 240,131,25;
    --bg_light_free_hdd_space: 184,200,187;
    --content-text-main-color: #6d3b0b;
}


body, * {
    font-size: 13px;
}

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: rgba(var(--main-color-rgb), 1);
    --bs-btn-border-color: #97520f;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #ff8b1b;
    --bs-btn-hover-border-color: #eee;
    --bs-btn-focus-shadow-rgb: 38, 121, 244;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #ff8b1b;
    --bs-btn-active-border-color: #777;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #ccc;
    --bs-btn-disabled-bg: #808080;
    --bs-btn-disabled-border-color: #888;
}


body {
    font-family: 'Open Sans';
    color: #333;
    background-color: rgba(39,47,59, 1);
}

.progress .bg-primary {
    background-color: rgba(var(--main-color-rgb), 1) !important;
}

#layoutAuthentication {
    min-height: 100vh;
}

.card-body, .card-body label {
    color: var(--content-text-main-color);
}

h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 {
    color: #fff;
}

.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) !important;
    border-bottom: var(--bs-card-border-width) solid var(--bs-card-border-color);
}
div.sub-header h4.card-title {
    color:#fff;
}

.card-header h3 {
    color: #fff;
    font-weight: bold;
}

.card:not([class*=bg-]) .card-header {
    color:#fff;
}

.sidenav-dark .sidenav-menu .nav-link {
    color: rgba(255, 255, 255, 0.50);
}

    .sidenav-dark .sidenav-menu .nav-link:hover {
        background-color: rgba(var(--main-color-rgb), 1) !important;
        color: #fff
    }

.sidenav-dark .sidenav-menu .nav-link .nav-link-icon {
    color: rgba(255, 255, 255, 0.70);
}

.sidenav .sidenav-menu .nav .sidenav-menu-heading {
    padding: 0;
    margin-top: .75rem
}
    .sidenavXXX .sidenav-menu .nav .sidenav-menu-heading:first-of-type:not( [style*='XXXdisplay: none'] ) {
        margin: 0;
    }
.sidenav .sidenav-menu .nav .sidenav-menu-heading > div {
    background-color: rgba(var(--main-color-rgb), .2);
    padding: .5rem 1rem .5rem;
    color: rgba(var(--main-color-rgb), 1);
}

.sidenav .sidenav-menu .nav .nav-link.active {
    background-color: rgba(var(--main-color-rgb), .8);
    font-weight: bold;
}
.sidenav .sidenav-menu .nav .nav-link.active[data-bs-toggle="collapse"] {
    background-color: rgba(var(--main-color-rgb), .3);
}
.sidenav .sidenav-menu .nav .sidenav-menu-nested {
    padding-left: 0.1rem;
}

.topnav {
    background-color: rgba(var(--main-color-rgb), 1) !important;
    color: #fff;
}
.topnav .nav-link {
    color: #fff;
}

.btn-transparent-dark {
    color:#fff !important;
    background-color:rgba(0,0,0,.04)
}
.btn-transparent-dark:hover {
    color: #fff !important;
    background-color: rgba(0,0,0,.3)
}
    .btn-transparent-dark:focus {
        border:none !important;
        box-shadow:none !important;
    }

.nav-fixed #layoutSidenav #layoutSidenav_content {
    top:3.6rem;
}

.XXfade {
    opacity: 0;
    -webkit-transition: opacity 0.15s linear;
    -o-transition: opacity 0.15s linear;
    transition: opacity 0.15s linear;
}

.rotate-180 {
    transform: rotate(180deg)
}
.inline {
    display:inline-block;
}

/* Hide the default file input */
input[type="file"] {
    visibility:hidden;
    display:none;
}

/* Style the custom label */
.custom-file-upload {
    display: inline-block;
    padding: 10px 20px;
    background-color: #4CAF50;
    color: white;
    font-size: 16px;
    border-radius: 5px;
    cursor: pointer;
    text-align: center;
    transition: background-color 0.3s ease;
}

/* Hover effect */
.custom-file-upload:hover {
    background-color: #45a049;
}

.bg-white {
    background-color:#fff
}

.toast-container > :not(:last-child) {
    margin-bottom: 1rem;
}

.mr-auto, .mx-auto {
    margin-right: auto !important;
}

.fade {
    transition: opacity 0.15s linear;
}
.myfade {
    opacity: 1;
    -webkit-transition: opacity 0.15s linear;
    -o-transition: opacity 0.15s linear;
    transition: opacity 0.15s linear;
}
.myfade:not(.in) {
    opacity: 0 !important
}

label.upload-actions, button.upload-actions {
    margin-bottom:.5rem;
}

.text-bg-primary {
    color: #fff !important;
    background-color: RGBA(var(--main-color-rgb), .9) !important;
}
.toast-body small {
    color: rgba(255,255,255, .5);
    font-size:.6rem;
}

.bg-pending-light {
    background-color: rgba(var(--main-color-rgb), .4)
}

.XXXtable-striped-every-second tr:nth-child(4n):not(thead tr) td
{
    --bs-table-accent-bg: var(--bs-table-striped-bg);
    background-color: #f00;
}
table td.placeholder {
    display:table-cell;
    vertical-align:top;
}
tbody#worklist td { padding:.3rem .5rem }

tbody#worklist .progress {
    height: 3px;
    padding: 0;
    margin: 0;
    /* border-top: 1px solid rgba(var(--main-color-rgb), .5) */
}

td.border-none {
    border: none;
    border-radius: 0;
}

tr {
    /*box-shadow: inset 0px 0px 1px 1px rgba(var(--main-color-rgb), .3) !important;*/
}

td.border-top {
    border-top: 2px solid rgba(var(--main-color-rgb), .6) !important;
}

img.fileicon {
    height: 1.4rem
}
.nav-link {
    font-size: 1em;
}

#progress-extended { 
    margin-top:.5rem; 
}

.modal-header h1.modal-title,
.modal-body h1 {
    color: rgba(var(--main-color-rgb), 1)
}

.badge-text-normal {
    font-size:1rem;
}

@media (min-width: 576px) {
    .topnav .dropdown .dropdown-menu {
        min-width: 23rem;
    }
}
.dropdown-user .dropdown-menu .dropdown-header .dropdown-user-details {
    margin-top:.8rem;
}

.dropdown-user .dropdown-menu .dropdown-header .dropdown-user-details .dropdown-user-details-name, 
.dropdown-user .dropdown-menu .dropdown-header .dropdown-user-details .dropdown-user-details-email {
    max-width: 100%;
    text-overflow: ellipsis;
    height: 1.5rem;
}

.card-header.sub-header .card-title {
    font-size: 80%;
}

.system_info_text,
table.system_info_text td {
    font-family: 'Ubuntu Sans Mono';
    font-size: .9rem;
    line-height:.9rem;
    margin-bottom:.8rem;
}
table.system_info_text td small {
    font-size: clamp(.6rem, .7rem, .8rem);
}
.system_info_text-XXXXXXXXXXXXX:last-of-type {
    margin-bottom:0rem;
}

.text-right {
    text-align:right
}

table.system_info_text td strong {
    font-size:clamp(.7rem, .9rem, 1rem)
}
hr.simple,
hr.simple_nomargin {
    border: none;
    background-color: rgb(var(--main-color-rgb));
    color: rgb(var(--main-color-rgb));
    height: 1px;
    margin: .1rem 0 .5rem 0;
    padding: 0
}
hr.simple_nomargin {
    margin: .1rem 0 .1rem 0;
}

div.heading_divider {
    margin-top: 1rem;
    border-bottom:1px solid rgba(var(--main-color-rgb), .2);
    padding:0;
    margin:1.5rem 0 -.5rem 0;
}
    div.heading_divider:first-of-type {
        margin-top:0;
    }
    table.network tr td {
        border: 0px solid #f00;
    }
table.network .progress-bar value {
    position: relative;
    top: 1rem;
    color: var(--content-text-main-color);
}

table.memory tr,
table.network tr {
    position:relative;
}

table .memory .progress-bar value {
    position: relative;
    top: 1rem;
    color: var(--content-text-main-color);
}
table.memory tr td value { padding:5px;}
table.memory tr {
    margin: 10px 0
}
    table.memory tr td,
    table.network tr td {
        border: 0px solid;
        line-height: 1.2rem;
        position: relative;
    }
    table.memory tr td.trend,
    table.network tr td.trend
    {
        padding-right:1.5rem;
    }
        table.network tr td.trend {
            padding-right:1.2rem
        }
        table.memory tr td.trend::after,
        table.network tr td.trend::after {
            content: ' ';
            display: inline-block;
            height: 1rem;
            width: 1rem;
            background: url("/img/icons/right-arrow-mask.svg");
            background-size: contain;
            position: absolute;
            transform: rotate(0deg);
            top: 2px;
            right: 2px;
        }
@keyframes rotateUp {
    from { transform: rotate(0)}
    to {
        transform: rotate(-90deg);
        background-color: rgb(var(--main-color-rgb));
    }
}
@keyframes rotateDown {
    from {
    }
    to {
        transform: rotate(90deg);
        background-color: rgb(var(--bg_light_free_hdd_space));
    }
}
@keyframes rotateSame {
    from {
    }
    to {
        transform: rotate(0deg);
        background-color: rgb(var(--bg_light_free_hdd_space));
    }
}
table.memory tr td.trend.up::after,
table.network tr td.trend.up::after {
    background-color: rgb(var(--main-color-rgb));
    animation: rotateUp .125s linear forwards;
}
table.memory tr td.trend.down::after,
table.network tr td.trend.down::after
{
    background-color: rgb(var(--bg_light_free_hdd_space));
    animation: rotateDown .125s linear forwards;
}
table.memory tr td.trend.same::after,
table.network tr td.trend.same::after
{
    background-color: rgb(var(--bg_light_free_hdd_space));
    animation: rotateSame .125s linear forwards;
}

table.memory tr td.marker,
table.network tr td.marker
{
        /* border-left:6px solid white; */
        width: .6rem !important;
}

table.network tr td.trend.up.static::after,
table.network tr td.trend.down.static::after {
    animation: none !important
}
    table.network tr td.trend.up.static::after {
        transform: rotate(-90deg)
    }
table.network tr td.trend.down.static::after {
    transform: rotate(90deg)
}

    div.worker_desc,
    div.worker_desc_line {
        display: inline-block;
    }

div.worker {
    background-color: #f00;/*(var(--bg_light_free_hdd_space), .5);*/
    display: inline-block;
    border: 1px solid #fff;
    width: .5rem;
    height: 1rem;
    top:2px;
    position:relative;
}
    div.worker.worker__ {
        background-color: rgb(var(--bg_light_free_hdd_space), .2);
    }
    div.worker.worker_W {
        background-color: rgba(var(--main-color-rgb), 1);
    }
    div.worker.worker_C {
        background-color: rgba(191,50,84, 1);
    }
    div.worker.worker_R {
        background-color: rgba(34, 130, 57, 1);
    }
    div.worker.worker_N {
        background-color: rgba(34, 200, 98, 1);
    }
    div.worker.worker_K {
        background-color: rgba(66,166,191, 1);
    }
div.worker.worker_F {
    background-color: rgba(var(--main-color-rgb), 1);
}

.indicator {
    stroke: #f00;
    stroke-dasharray: 75, 100;
    stroke-dashoffset: -5;
    animation: 1.5s ease-in-out 0s infinite normal none running dash;
    stroke-linecap: round;
}



.form-control:focus, .datatable-input:focus {
    color: #000;
    background-color: #fff;
    border-color: rgba(var(--main-color-rgb), 1);
    outline: 0;
    box-shadow: 0 0 0 0.125rem rgba(var(--main-color-rgb), 0.25);
}

.form-control, .datatable-input {
    font-size:1rem;
}

.form-control.is-valid, .was-validated .form-control:valid {
    border-color: #eee;
}

.card-body label.small:not(.form-check-label) {
    color: rgba(var(--main-color-rgb), 1);
    position: relative;
    background-color: #fff;
    display: inline-block;
    top: 0.8rem;
    z-index: 1000;
    padding: 0 0.7rem;
    margin-left: 0.4rem;
}

.close:not(:disabled):not(.disabled) {
    cursor: pointer;
}

.alert-dismissible .close {
    position: absolute;
    top: 0;
    right: 0;
    padding: .75rem 12px 1.25rem;
    color: inherit;
}

.close {
    float: right;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    opacity: .5;
}

.was-validated .form-control:valid, 
.was-validated .datatable-input:valid, 
.form-control.is-valid, 
.is-valid.datatable-input {
    border-color: #00ac69;
    padding-right: calc(1em + 1.75rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%2300ac69' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.25em + 0.4375rem) center;
    background-size: calc(0.5em + 0.875rem) calc(0.5em + 0.875rem);
}

.form-control.is-valid, .was-validated .form-control:valid {
    border-color: var(--bs-form-valid-border-color);
    padding-right: calc(1.25em + .6rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%2341c3a9' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(.3125em + .6rem) center;
    background-size: calc(.625em + .3rem) calc(.625em + .3rem);
}

table.dataTable.hover > tbody > tr:hover > *, table.dataTable.display > tbody > tr:hover > * {
    box-shadow: inset 0 0 0 9999px rgba(var(--main-color-rgb), .3);
    background-color:rgba(var(--main-color-rgb), .4);
    color:white
}
table.dataTable.hover > tbody > tr:hover > td[colspan="6"],
table.dataTable.hover > tbody > tr:hover > td[colspan="7"],
table.dataTable.display > tbody > tr:hover > td[colspan="6"],
table.dataTable.display > tbody > tr:hover > td[colspan="7"],
table.dataTable.hover > tbody > tr > td[colspan="6"], 
table.dataTable.hover > tbody > tr > td[colspan="7"] {
    background-color: transparent !important;
    padding: 0.5rem !important
}
table.dataTable > tbody > tr.dt-hasChild > td {
    border-top: 2px solid rgba(var(--bs-success-rgb)) !important;
}

    table.dataTable > tbody > tr.dt-hasChild > td:first-of-type {
        border-top: 2px solid rgba(var(--bs-success-rgb)) !important;
        border-left: 2px solid rgba(var(--bs-success-rgb)) !important;
    }
    table.dataTable > tbody > tr.dt-hasChild > td:last-of-type {
        border-right: 2px solid rgba(var(--bs-success-rgb)) !important;
    }
tr[data-dt-row] > td[colspan="6"] {
    border-bottom: 2px solid rgba(var(--bs-success-rgb)) !important;
    border-left: 2px solid rgba(var(--bs-success-rgb)) !important;
    border-right: 2px solid rgba(var(--bs-success-rgb)) !important;
    margin-bottom: 2rem !important
}

    table.dataTable.hover > tbody > tr:hover > td > a, table.dataTable.display > tbody > tr:hover > td > a {
        color: red
    }

    table.table.dataTable.table-striped > thead > tr > th,
    table.table.dataTable.table-striped > tfoot > tr > th {
        background-color: rgba(0,0,0, .0125) !important;
        border: 1px solid #ccc
    }

    table.dataTable thead > tr > th.dt-ordering-asc span.dt-column-order:before, table.dataTable thead > tr > th.dt-ordering-desc span.dt-column-order:after, table.dataTable thead > tr > td.dt-ordering-asc span.dt-column-order:before, table.dataTable thead > tr > td.dt-ordering-desc span.dt-column-order:after {
        color: rgba(var(--main-color-rgb), 1)
    }

    .btn-verify {
        width: 3.5rem !important;
        padding: .325rem;
    }

    span.count-item-affected {
        font-weight: bold;
        color: rgba(var(--main-color-rgb), 0.70);
        margin-left: .4rem;
    }

    #please_wait_msg {
        display: block;
        background-color: rgba(0,0,0,.5);
        position: absolute;
        top: 0rem;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 100;
    }
    /* HTML: <div class="loader"></div> */
    .data-loader {
        width: 3rem;
        aspect-ratio: 1;
        border-radius: 50%;
        border: 8px solid #0000;
        border-right-color: rgba(var(--main-color-rgb), .8);
        position: relative;
        animation: l24 1s infinite linear;
        display: inline-block;
        vertical-align: middle
    }

    .loader:before,
    .loader:after {
        content: "";
        position: absolute;
        inset: -8px;
        border-radius: 70%;
        border: inherit;
        animation: inherit;
        animation-duration: 2s;
    }

    .loader:after {
        animation-duration: 4s;
    }

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

    #pacs_sum span svg use > circle {
        fill: #00ffff !important;
        color: #00f
    }

    table.table.dataTable.table-striped > tbody > tr:nth-of-type(2n+1) > * {
        box-shadow: inset 0 0 0 9999px rgba(var(--main-color-rgb), 0.05) !important;
    }

    table.table.dataTable.table-striped > tbody > tr.selected > * {
        box-shadow: inset 0 0 0 9999px rgba(var(--main-color-rgb), 0.7) !important;
    }

    table.table.dataTable.table-hover > tbody > tr:hover > * {
        box-shadow: inset 0 0 0 9999px rgba(var(--main-color-rgb), 0.075) !important;
    }

    table.table.dataTable.table-hover > tbody > tr.selected > *,
    table.table.dataTable.table-striped > tbody > tr.selected:nth-of-type(2n+1) > * {
        background-color: rgba(var(--main-color-rgb), .5) !important;
    }

    table.table.dataTable.table-striped > tbody > tr.selected:hover > * {
        background-color: rgba(var(--main-color-rgb), 1) !important;
    }
    /* profilbild upload */
    #dropzone-external {
        width: 350px;
        height: 350px;
        background-color: rgb(183 183 183 / 10%);
        border-width: 2px;
        border-style: dashed;
        padding: 10px;
        border-color: var(--dx-color-border);
    }

        #dropzone-external > * {
            pointer-events: none;
        }

        #dropzone-external.dropzone-active {
            border-style: solid;
            border-color: var(--dx-color-primary);
        }

    .widget-container > span {
        font-size: 22px;
        font-weight: bold;
        margin-bottom: 16px;
    }

    #dropzone-image {
        max-width: 100%;
        max-height: 100%;
    }

    #dropzone-text > span {
        font-weight: 100;
        opacity: 0.5;
    }

    #upload-progress {
        display: flex;
        margin-top: 10px;
    }

    .flex-box {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }


    .dz-filename {
        display: none
    }

    #benutzerbild_img {
        max-width: 100%;
        max-height: fit-content;
        border-radius: 1rem !important;
        filter: blur(0)
    }

    .blur {
        filter: blur(5px) !important;
    }

    #wait_working {
        width: -webkit-fill-available;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background-color: rgba(var(--main-color-rgb), .3);
        padding-top: 1rem;
    }

    .btn-edit-user:hover {
        background-color: rgba(255,255,255, 1);
        color: white;
    }

        .btn-edit-user:hover use .edit-user-icon-inner {
            color: white !important;
        }

    .dataTable > :not(caption) > * > *,
    .dataTable > thead > tr > th {
        border-color: #eee !important;
        border-left-width: 1px;
        border-right-width: 0px !important;
    }

    .dataTable td.edit-cell,
    .dataTable.table-striped > tbody > tr.selected > td.edit-cell,
    table.table.dataTable.table-striped > tbody > tr.selected:hover > td.edit-cell,
    {
        box-shadow: none;
        background-color: #fff !important;
        border-left: 0;
        border-bottom: 1px white solid;
        padding: 0.75rem 0.125rem;
        margin: 0;
    }

    .dataTable td.small-cell,
    .dataTable.table-striped > tbody > tr.selected > td.small-cell,
    table.table.dataTable.table-striped > tbody > tr.selected:hover > td.small-cell {
        padding: 0.75rem 0.125rem !important;
        margin: 0 !important;
    }

    #parse_output pre {
        margin-bottom: 0;
    }

    label .inputdesc {
        margin: 0 2rem 0 -.5rem;
        display: block;
        background-color: white;
        padding: 0 1rem 0 .5rem;
        line-height: .8rem;
    }


    .feather {
        vertical-align: middle;
    }

    .height-1em {
        height: 1em;
    }

    .height-2em {
        height: 2em;
    }

    .height-3em {
        height: 3em;
    }

    .hide {
        background-color: #f00 !important;
        display: none !important
    }

    .line-height-1em {
        line-height: 1em;
    }

    .expand-child {
        height: 2.5rem;
    }

    .child-table {
        background-color: white !important;
        display:inline-block;
    }

    @media screen and (max-width: 768px) {
        .child-table {
            table-layout: auto;
            display:grid;
        }

            #masterTable thead,
            .child-table thead {
                display: none;
            }
            /* Header verstecken */

            #masterTable tr,
            .child-table tr {
                display: block;
                margin-bottom: 15px;
                border: 1px solid #ddd;
            }

            #masterTable td,
            .child-table td {
                display: block;
                text-align: right;
                padding-left: 20%;
                position: relative;
                border-bottom: 1px solid #eee;
            }

            #masterTable td::before,
            .child-table td::before {
                content: attr(data-label); /* Holt Text aus dem JS-Attribut */
                position: absolute;
                left: 10px;
                font-weight: bold;
                text-align: left;
            }
    }

    @keyframes flash_error {
        0% {
            background-color: rgba(255,0,0, .5);
        }
        /* Highlight-Farbe */
        100% {
            background-color: rgba(255,0,0, .4);
        }
    }

    .highlight-flash-error {
        animation: flash_error 1s ease-in;
    }

/* Entfernt das Standard-Padding der DataTables Child-Zelle */
#masterTable td.dt-hasChild + tr td {
    padding: 0 !important;
}

/* Optional: Falls der Wrapper selbst noch Abstände hat */
#wrapper_2 {
    padding: 0;
    margin: 0;
}

/* Erzwingt volle Breite für die innere Tabelle */
#child_2 {
    width:100%;
    margin-left: 0 !important;
}

.auto-ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    width: 0;
    height:100% !important;
    min-width: 100%; /* Füllt die verfügbare Breite der Zelle */
}

.XXXchild-table thead th .dt-column-title {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}
.datatable-arzt-row { line-height: 1rem; }


.sidenav-dark {
    background-color: rgba(39,47,59, 1);
}

#layoutSidenav_nav {
    background-color: rgba(39,47,59, .8);
}

#sidebar {
    background-color: rgb(31, 38, 47) !important;
}

h1, h2, h3, h4 {
    color:#888;
}

#layoutAuthentication_footer {
    background-color: rgba(var(--main-color-rgb), .6) !important;
}

a.dropdown-item.text-secondary {
    color: #666 !important
}


.gauge-wrapper {
    /* Zentrale Steuerung: Nur diesen Wert ändern! */
    --gauge-width: 170px;
    /* Automatische Berechnungen */
    --gauge-height: calc(var(--gauge-width) / 2);
    --inner-scale: 0.7727; /* Verhältnis 170px / 220px */
    --cover-width: calc(var(--gauge-width) * var(--inner-scale));
    --cover-height: calc(var(--cover-width) / 2);
}

.gauge-body {
    width: var(--gauge-width);
    height: var(--gauge-height);
    position: relative;
    overflow: visible;
    margin: 0 auto;
    background: #e9ecef;
    border-top-left-radius: var(--gauge-height);
    border-top-right-radius: var(--gauge-height);
}

.gauge-mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-top-left-radius: var(--gauge-height);
    border-top-right-radius: var(--gauge-height);
    background-color: rgba(var(--main-color-rgb),1);
    transition: background-color 0.5s ease;
    z-index: 1;
    box-shadow: inset 0 3px 8px rgba(0, 0, 0, 1);
    outline: 2px solid #fff;
    outline-offset: -1px;
}

.gauge-fill {
    position: absolute;
    top: 100%;
    left: 0;
    width: var(--gauge-width);
    height: var(--gauge-height);
    background-color: #ffffff;
    transform-origin: center top;
    transform: rotate(0.5turn);
    transition: transform 0.5s ease-out;
    z-index: 2;
}

.gauge-cover {
    width: var(--cover-width);
    height: var(--cover-height);
    background: #ffffff;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    border-top-left-radius: var(--cover-height);
    border-top-right-radius: var(--cover-height);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
}

.gauge-tick {
    position: absolute;
    left: 50%;
    width: 2px;
    height: 12px;
    background: #adb5bd;
    transform-origin: 0 var(--gauge-height);
    z-index: 15;
}

.gauge-tick-label {
    position: absolute;
    top: -25px;
    left: 50%;
    width: 40px;
    margin-left: -20px;
    text-align: center;
    font-size: 10px;
    font-weight: bold;
    color: #6c757d;
}

.card-body {
    position: relative !important;
}

#confirmCancelSection {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(30,0,0,.2);
    backdrop-filter: blur(2px);
    z-index: 2000 !important;
    display: none;
    justify-content: center;
    align-items: center;
}