#calendar .fc-event {
    display: block;
    border: none;
    border-radius: 10px;
    margin: 0 10px;
    margin-top: 5px;
    height: 12px;
    min-width: 12px;
    padding: 0;
    color: transparent;
}
.fc-calendar-tooltip {
    position: relative;
}
.fc-calendar-tooltip::after {
    position: absolute;
    top: 0;left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.9;
    content: '';
}

.fc-calendar-tooltip.red::after,
.fc-calendar-legend > .red::after,
#calendar .fc-event.red {
    background: var(--primary-color);
}

.fc-calendar-tooltip.green::after,
.fc-calendar-legend > .green::after,
#calendar .fc-event.green {
    background: var(--green);
}

.fc-calendar-tooltip.yellow::after,
.fc-calendar-legend > .yellow::after,
#calendar .fc-event.yellow {
    background: var(--yellow);
}

.fc-calendar-tooltip.purple::after,
.fc-calendar-legend > .purple::after,
#calendar .fc-event.purple {
    background: var(--purple);
}
#calendar .fc-calendar-tooltip.visible {
    opacity: 1;
}
.fc-calendar-legend {
    display: flex;
    flex-wrap: wrap;
    margin: 15px -7px 0 -7px;
}
.fc-calendar-legend > * {
    position: relative;
    padding-left: 20px;
    margin: 5px 7px;
    color: black;
    font-size: 12px;
    font-weight: 300;
    font-family: 'Open Sans';
}
.fc-calendar-legend > *::after {
    position: absolute;
    width: 12px;
    height: 12px;
    content: '';
    border-radius: 100%;
    left: 0;
    top: 0;bottom: 0;
    margin: auto;
}
#calendar .fc-calendar-tooltip {
    position: fixed; 
    opacity: 0;
    pointer-events: none;
    max-width: 154px;
    padding: 17px;
    margin-bottom: 7px;
    font-family: 'Open Sans Condensed';
    font-weight: bold;
    font-size: .875rem;
    color: white;
    transition: opacity .2s ease-in-out, background-color .2s ease-in-out;
    z-index: 2;
}
#calendar .fc-calendar-tooltip .description {
    font-size: 15px;
    font-weight: 300;
    text-align: left;
    margin-bottom: 10px;
}
.fc-event .fc-content {
    cursor: pointer;
}