.status-btn {
    width: 140px;
    padding: auto;
    height: 40px;
    border: none;
    border-radius: 20px;
    color: white;
    outline: none;
    font-size: 1.4rem;
    transition: background-color 0.3s;
    text-transform: uppercase;
    /* Smooth transition for background color */
    pointer-events: none;
    /* Prevents the button from being clickable */
    cursor: default;
    /* Changes cursor to the default instead of pointer */
}


/* For elements with both 'status-btn' and 'critical' classes */

.lifeprintstatus-btn.coping {
    background-color: var(--coping);
}
.lifeprintstatus-btn.surviving {
    background-color: var(--surviving);
}
.lifeprintstatus-btn.thriving {
    background-color: var(--thriving);
}

.status-btn.critical,
.progress-bar-critical {
    background-color: var(--critical);
    /* Bootstrap's `.btn-danger` color */
}

.progress-bar-percentage-no-data {
    background-color: #ddd;
    color: #888;
}


.progress-bar-percentage-critical {
    color: var(--lighterCritical); /* tiny bit brighter than regular critical colour (for better readability in progress bar) */

    &.part-of-bar {
        background: var(--darkerCritical);
        color: #e4e4e4;
    }
}

.progress-bar-percentage-priority {
    color: var(--priority);

    &.part-of-bar {
        background: var(--darkerPriority);
        color: #e4e4e4;
    }
}

.progress-bar-percentage-attention {
    color: var(--attention);

    &.part-of-bar {
        background: var(--darkerAttention);
        color: #e4e4e4;
    }
}

.progress-bar-percentage-optimal {
    color: var(--optimal);

    &.part-of-bar {
        background: var(--darkerOptimal);
        color: #e4e4e4;
    }
}



#donut-pop-up {
    display: none;
    flex-direction: column; 
    gap: 12px; 
}
#donut-pop-up.pop-up-active { display: flex; }

.donut-bar-container.progress-container {
    display: flex;
    gap: 8px;
}
.donut-bar-container .title {
    flex: 1 1 20%;
    margin: 0;
    font-size: large;
}
.donut-bar-container .progress {
    height: 40px;
    border-radius: 10px;
    flex: 1 1 60%;
}
.donut-bar-container .status-btn { flex: 1 1 20%; }
#bars {
    display: flex; 
    flex-direction: column; 
    gap: 8px; 
    width: 90%; 
    margin: 0 auto;
}



.progress {
    margin-bottom: 0;
    height: 40px;
    border-radius: 10px;
    /* Remove margin-bottom if any, to better align within the cell */
    /* ...other styles... */
}

.progress-bar.critical {
    background-color: var(--critical);
    /* Red */
}

.progress-bar.priority {
    background-color: var(--priority);
    /* Red-orange */
}

.progress-bar.attention {
    background-color: var(--attention);
    /* Yellow */
}

.progress-bar.optimal {
    background-color: var(--optimal);
    /* Green */
}
.progress-percentage.progress-bar-critical, .progress-percentage.progress-bar-priority, .progress-percentage.progress-bar-attention, .progress-percentage.progress-bar-optimal {
    position: static;
    color: white;
}
.progress-percentage.progress-bar-no-data {
    position: static;
    background-color: #ddd;
    color: #888;
}

.lifeprintstatus-btn.no-data {
    color: #aaa;
}
.status-btn.no-data, .statussm-btn.no-data {
    background-color: #aaa;
}

/* For elements with both 'status-btn' and 'priority' classes */

.status-btn.priority,
.progress-bar-priority {
    background-color: var(--priority);
    /* Bootstrap's `.btn-warning` color */
}


/* For elements with both 'status-btn' and 'attention' classes */

.status-btn.attention,
.progress-bar-attention {
    background-color: var(--attention);
    /* Bootstrap's `.btn-info` color */
}


/* For elements with both 'status-btn' and 'optimal' classes */

.status-btn.optimal,
.progress-bar-optimal {
    background-color: var(--optimal);
    /* Bootstrap's `.btn-success` color */
}

.statussm-btn {
    width: 100px;
    padding: auto;
    height: 40px;
    border: none;
    border-radius: 20px;
    color: white;
    outline: none;
    font-size: 0.9rem;
    transition: background-color 0.3s;
    pointer-events: none;
    /* Prevents the button from being clickable */
    cursor: default;
    /* Smooth transition for background color */
}

.statussm-btn.critical {
    background-color: var(--critical);
    /* Bootstrap's `.btn-danger` color */
}

.statussm-btn.priority {
    background-color: var(--priority);
    /* Bootstrap's `.btn-warning` color */
}

.statussm-btn.attention {
    background-color: var(--attention);
    /* Bootstrap's `.btn-info` color */
}

.statussm-btn.optimal {
    background-color: var(--optimal);
    /* Bootstrap's `.btn-success` color */
}