.heatmap-container {
    display: flex;
    flex-direction: column;
    overflow: auto; /* Ensure both scrollbars are visible */
}
.heatmap-x-axis {
    display: flex;
    position: sticky;
    top: 0;
    background-color: white;
    z-index: 2;
}
.heatmap-y-axis {
    position: sticky;
    left: 0;
    background-color: white;
    z-index: 1;
}
.heatmap-grid {
    display: flex;
    flex-direction: column;
}
.heatmap-row {
    display: flex;
}
.heatmap-item {
    border: 1px solid white;
    min-width: 64px;
}
.heatmap-item:hover {
    border: 1px solid black;
}

.heatmap-item-no-hover {
    border: 1px solid white;
    min-width: 64px;
    background: white;
}

.heatmap-x-axis-label {
    min-width: 64px;
    background-color: white; /* Ensure background color is set */
    position: sticky;
    top: 30px; /* Adjust this value to position below the month label */
    z-index: 2;
}
.heatmap-y-axis-label {
    min-width: 50px;
    position: sticky;
    left: 0;
    background-color: white;
    z-index: 1;
}

.heatmap-month-label {
    position: sticky;
    top: 0;
    background-color: white;
    z-index: 3;
    text-transform: capitalize;
    
}
.heatmap-placeholder {
    min-width: 50px;
}