shared-styles.css

.grade-progress {
    height: 45px;
}

.grade-progress-day {
    background-color: grey;
    color: grey;
    width: 10px;
    height: 40px;
    transition: border-top 0.8s;
    top: 0;
    bottom: 0;
}

.grade-progress-day:hover {
    border-top: solid currentColor 10px;
}

.day-submitted {
    background-color: green;
    color: green;
}

.day-future {
    background-color: black;
    color: black;
}

/* Tooltip text */
.tooltip .tooltiptext {
    visibility: hidden;
    width: 110px;
    display: block;

    background-color: black;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;

    position: relative;
    z-index: 1;

    top: 50px;
    left: -85px;
}

/* Tooltip Marker */
.tooltip-bottom::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 85px;

    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent black transparent;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
    visibility: visible;
}