.rounded-grey-card {
    background-color: #ececec;
    border-radius: 15px;
    padding: 40px 80px;
    margin: 20px auto;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 130%;
    position: relative;
    /* Add this */
    left: 50%;
    /* Center the element */
    transform: translateX(-50%);
    /* Adjust based on the element's width */
}

.card-title-container {
    display: flex;
    align-items: center;
    /* Vertically center the content */
    justify-content: space-between;
    /* Space out the child elements */
    width: 100%;
    /* Ensure it 
    takes the full width of its parent */
}

.card-title-text {
    /* Allow the title to take up available space */
    /* Centers the text horizontally */
    flex-grow: 1;
    font-weight: 600;
    font-size: 2.4rem;
    /* Center the title text */
}

.rounded-card {
    border-radius: 16px;
    transform: scale(1.00);
    /*transition: all 0.1s ease;*/
    min-width: 120px;
}

.rounded-card-bottom {
    border-radius: 0px 0px 16px 16px;
}

.rounded-progress-card {
    height: 90%;
    overflow: hidden;
    border: 0;
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
    /* Adjusted to match typical shadow */
    /* 3 is assumed to be 1 rem based on typical browser defaults */
    margin-bottom: 3rem;
    /* 5 is assumed to be 3 rem based on typical browser defaults */
    background-color: #FFEEDE;
    border-radius: .25rem;
    display: flex;
    /* Adjusted to match typical card border-radius */
}

.hidden {
    display: none;
    /* This class can be used to hide elements */
}

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

.no-data-fit-hbsvw, .locked-fit-hbsvw, .locked-overlay {
    display: flex;
    position: absolute; 
    top: 0; left: 0; 
    width: 100%; height: 100%; 
    background-color: rgba(128, 128, 128, 0.5); 
    border-radius: 16px;
    z-index: 10;
}
.no-data-fit-hbsvw > div, .locked-fit-hbsvw > div, .locked-overlay > div {

    border-radius: 16px;
    font-size: 1.5rem; font-weight: bold; 

    & > i {
        font-size: 3rem;
        margin-bottom: 1rem;
    }
}


@media screen and (max-width: 820px) {
    #focus-top-container { flex-direction: column; }
}