.border-hour {
    border-top: 2px solid #CCCCCC;
}

td.appointment-0-primary, .appointment-0-primary {
    background-color: #b8daff;
    cursor: pointer;
}

td.appointment-1-primary, .appointment-1-primary {
    background-color: #c3e6cb;
    cursor: pointer;
}

td.appointment-2-primary, .appointment-2-primary {
    background-color: #ffeeba;
    cursor: pointer;
}

td.appointment-3-primary, .appointment-3-primary {
    background-color: #e1b8ff;
    cursor: pointer;
}

td.appointment-4-primary, .appointment-4-primary {
    background-color: #b8fff7;
    cursor: pointer;
}

td.appointment-5-primary, .appointment-5-primary, 
.location-blocked-appointment-grid label.blocked, 
.blocked {
    background-color: #ed969e;
    cursor: pointer;
}

td.appointment-6-primary, .appointment-6-primary {
    background-color: #eb9dbc;
    border-top: 1px solid #eb9dbc;
    border-bottom: 1px solid #eb9dbc;
}

td.appointment-7-primary, .appointment-7-primary {
    background-color: #ffd0b8;
}

td.appointment-8-primary, .appointment-8-primary {
    background-color: #888888;
    border-top: 1px solid #888888;
    border-bottom: 1px solid #888888;
    border-right: 1px solid #888888;
}

td.appointment-0-primary:hover,
td.appointment-1-primary:hover,
td.appointment-2-primary:hover,
td.appointment-3-primary:hover,
td.appointment-4-primary:hover,
td.appointment-5-primary:hover {
    box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.3);
    margin: 0;
}

td.appointment-data {
    min-width: 22px !important;
    min-height: 22px;
    text-align: center;
    padding: 0px;
    border-left: 0;
}

.legend-color {
    width: 20px;
    height: 20px;
    border-radius: 3px;
}

td.time-cell {
    font-size: 0.8rem;
    padding-top: 0;
    padding-bottom: 0;
    min-height: 20px;
    display: block;
}

td.day-start, th.day-start {
    border-left: 3px solid #CCCCCC;
}

td.day-end, th.day-end {
    border-right: 3px solid #CCCCCC;
}

div.popover.show {
    box-shadow: 5px 5px 12px #666666;
}

td.clickable-slot {
    cursor: pointer; /* Changes the cursor to the hand (button click) */
}

    td.clickable-slot:hover {
        box-shadow: inset 0 0 0 2px #007bff; /* Inset border effect */
        margin: 0; /* No need for negative margins */
    }