.evtTblHeader {
    height: 40px;
    min-height: 40px;
    background-color: #000000 !important;
    color: #FFFFFF;    
}

.timeCol {
    width: 10%;
    height: 50px;
    min-height: 50px;
    background-color: #000000 !important;
    color: #FFFFFF;
    font-weight: bold;
    text-align: center;
    vertical-align: center;
}

.room1Col {
    width: 30%;
    background-color: #000000 !important;
}

.room2Col {
    width: 30%;
    background-color: #000000 !important;
}

.room3Col {
    width: 30%;
    background-color: #000000 !important;
}

.rm1HideIcon {
    color: var(--gng-room1) !important;
}

.rm2HideIcon {
    color: var(--gng-room2) !important;
}

.rm3HideIcon {
    color: var(--gng-room3) !important;
}

[data-bs-theme="dark"] .hideIcon {
    color: #212529 !important;
}

[data-bs-theme="light"] .hideIcon {
    color: #FFFFFF !important;
}

.room1 {
    background-color: var(--gng-room1) !important;
    color: var(--gng-room1-text);
    text-align: center;
    vertical-align: center;
}

.room2 {
    background-color: var(--gng-room2) !important;
    color: var(--gng-room2-text);
    text-align: center;
    vertical-align: center;
}

.room3 {
    background-color: var(--gng-room3) !important;
    color:var(--gng-room3-text);
    text-align: center;
    vertical-align: center;
}

/* Ensure the row and columns stretch to match each other */
.row.align-items-stretch {
    display: flex;
    flex-wrap: wrap; /* Allows stacking on mobile */
}

/* On Desktop: Force equal height and remove wrapping */
@media (min-width: 768px) {
    .row.align-items-stretch {
        flex-wrap: nowrap;
    }
}

/* Ensure the card body fills the assigned height */
/* Ensure the grid looks like a seamless calendar */
.card-body {
    flex-grow: 1; /* Pushes background color to fill empty space */
    display: flex;
    align-items: center; /* Centers text vertically */
    justify-content: center;
    border-bottom: 1px solid rgba(0,0,0,0.1);
}

.timeSlot1 { border-width: 1px; height: 75px !important; }
.timeSlot2 { border-width: 1px; height: 150px !important; }
.timeSlot3 { border-width: 1px; height: 225px !important; }
.timeSlot4 { border-width: 1px; height: 300px !important; }
.timeSlot5 { border-width: 1px; height: 375px !important; }
.timeSlot6 { border-width: 1px; height: 450px !important; }
.timeSlot7 { border-width: 1px; height: 525px !important; }
.timeSlot8 { border-width: 1px; height: 600px !important; }
.timeSlot9 { border-width: 1px; height: 675px !important; }
.timeSlot10 { border-width: 1px; height: 750px !important; }
.timeSlot11 { border-width: 1px; height: 825px !important; }
.timeSlot12 { border-width: 1px; height: 900px !important; }
.timeSlot13 { border-width: 1px; height: 975px !important; }
.timeSlot14 { border-width: 1px; height: 1050px !important; }
.timeSlot15 { border-width: 1px; height: 1125px !important; }
.timeSlot16 { border-width: 1px; height: 1200px !important; }
.timeSlot17 { border-width: 1px; height: 1275px !important; }
.timeSlot18 { border-width: 1px; height: 1350px !important; }
.timeSlot19 { border-width: 1px; height: 1425px !important; }
.timeSlot20 { border-width: 1px; height: 1500px !important; }
.timeSlot21 { border-width: 1px; height: 1575px !important; }
.timeSlot22 { border-width: 1px; height: 1650px !important; }
.timeSlot23 { border-width: 1px; height: 1725px !important; }
.timeSlot24 { border-width: 1px; height: 1800px !important; }
.timeSlot25 { border-width: 1px; height: 1875px !important; }
.timeSlot26 { border-width: 1px; height: 1950px !important; }
.timeSlot27 { border-width: 1px; height: 2025px !important; }
.timeSlot28 { border-width: 1px; height: 2100px !important; }
.timeSlot29 { border-width: 1px; height: 2175px !important; }
.timeSlot30 { border-width: 1px; height: 2250px !important; }
.timeSlot31 { border-width: 1px; height: 2325px !important; }
.timeSlot32 { border-width: 1px; height: 2400px !important; }
.timeSlot33 { border-width: 1px; height: 2475px !important; }
.timeSlot34 { border-width: 1px; height: 2525px !important; }
.timeSlot35 { border-width: 1px; height: 2600px !important; }
.timeSlot36 { border-width: 1px; height: 2675px !important; }
.timeSlot37 { border-width: 1px; height: 2750px !important; }
.timeSlot38 { border-width: 1px; height: 2825px !important; }
.timeSlot39 { border-width: 1px; height: 2900px !important; }
.timeSlot40 { border-width: 1px; height: 2975px !important; }
.timeSlot41 { border-width: 1px; height: 3050px !important; }
.timeSlot42 { border-width: 1px; height: 3125px !important; }
.timeSlot43 { border-width: 1px; height: 3200px !important; }
.timeSlot44 { border-width: 1px; height: 3275px !important; }
.timeSlot45 { border-width: 1px; height: 3325px !important; }
.timeSlot46 { border-width: 1px; height: 3400px !important; }
.timeSlot47 { border-width: 1px; height: 3475px !important; }
.timeSlot48 { border-width: 1px; height: 3525px !important; }
.timeSlot49 { border-width: 1px; height: 3600px !important; }
.timeSlot50 { border-width: 1px; height: 3675px !important; }

/* On mobile, add space between the stacked room timelines */
@media (max-width: 767px) {
    [class*="order-"] {
        margin-bottom: 5px;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    }
}

/* Ensure the event blocks have a consistent height so they align on desktop */
@media (min-width: 500px) {
    .d-flex.flex-column {
        height: 75px; /* This acts as your "grid unit" */
    }
}

/* Add a margin between room blocks on mobile for better legibility */
@media (max-width: 500px) {
    .col-12[class*="order-"] {
        margin-bottom: 10px;
        border-radius: 8px;
        overflow: hidden;
    }
}