#loading {
    display: none;
    position: absolute;
    top: 10px;
    right: 10px;
}

#calendar {
    height: 72vh;
    min-height: 665px;
    margin: 40px auto;
    padding: 0 10px;
    margin: 0;
    padding: 0;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 14px;
}

    #calendar .fc-view-harness {
        background-color: var(--body-alt-bg-color);
    }

    #calendar .fc-day-other {
        background-color: var(--body-alt-dark-bg-color);
    }

    /* There's no easy way to override the button colours of custom buttons in FullCalendar,
        nor can custom classes be added to them easily. This is a workaround.
    */
    #calendar .fc-importCalendar-button {
        background-color: var(--info);
        border-color: var(--info);
        color: var(--greenify-text-color);
    }
        #calendar .fc-importCalendar-button:hover {
            background-color: var(--dark);
            border-color: var(--dark);
        }

    /* Hide the "Month" button on small screens; it's not useful there even in landscape mode */
    @media (max-width: 991px) {
        #calendar .fc-dayGridMonth-button {
            display: none;
        }
    }


#event-modal .modal-body {
    padding-top: 10px;
}

#event-modal .nospace p {
    margin-bottom: 0px;
}

#event-modal .row {
    margin-bottom: 5px;
}

#event-modal .largespace {
    margin-bottom: 15px;
}