#calendar {
    width: 100%;
    font-size: 1rem;
    min-width: 330px;
    box-sizing: border-box;
    table-layout: fixed;
}

#calendar tr {
    overflow: auto;
}

#calendar td, #calendar th {
    border: solid 1px var(--fg);
    border-collapse: collapse;
}

.current-day {
    background-color: var(--current-day-bg);
}

.current-day:hover {
    background-color: var(--current-day-hover-bg) !important;
}

.cal-day {
    padding-left:3px;
    padding-right:3px;
}

.cal-day .task-container {
    height: 200px;
    cursor: pointer;
    padding: 3px;
    overflow: scroll;
}

.hide-scroll {
    /* Hide scrollbar for IE, Edge and Firefox */
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

.hide-scroll::-webkit-scrollbar {
    display: none;  /* Safari and Chrome */
}

.cal-day h4 {
    font-size: var(--cal-font-size);
    width: 100%;
    margin-bottom:0px;
    border-bottom: 1px solid var(--fg);
    text-align: center;
}

#calendar #weekdays {
    text-align: center;
    text-overflow: ellipsis;
}

#calendar-body tr:last-child td .task-container{
    height:100px;
}

#cal-fade-out {
    position:absolute;
    background: linear-gradient(to bottom, rgba(var(--bg-vals), 0), rgba(var(--bg-vals), 1) 50%, rgba(var(--bg-vals), 1));
    height:250px;
    width:100%;
    top: 550px;
    left:0px;
    pointer-events: none;
}

@media (hover: hover) {
    .cal-day:hover {
        background-color: var(--hover-bg);
    }
}