@media screen and (max-width: 455px) {
    .date-break-tag {
        display: block;
    }

    .date-seperator {
        display: none;
    }

    .fc-content {
        font-size: smaller;
    }

    .fc-content .fc-time {
        display: none;
    }
}

@media screen and (max-width: 767px) {
    .fc-content .fc-time {
        display: none;
    }

    .fc-day-top .fc-day-number,
    .fc-day-top a {
        display: block;
        font-size: xx-small;
    }

    .calendar-title {
        font-size: larger;
    }

    .sc_main_box,
    .sc_header {
        width: 300px !important;
    }
}


@media screen and (min-width: 455px) {
    .date-break-tag {
        display: none;
    }

    .date-seperator {
        display: inline;
    }
}

.calendar-title,
.fc-day-top .fc-day-number,
.fc-day-top a {
    color: hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), var(--color-o, 1));
}

.fc td.fc-today {
    border: solid;
    border-width: 1px;
}

:root,
[data-theme="default"] {
    .fc td.fc-today {
        background-color: rgb(190, 190, 190);
    }

    .plan-level-disapproved {
        background-color: #ac0101;
        border-color: #ac0101;
    }

    .plan-level-approved {
        background-color: green;
        border-color: green;
    }

    .plan-level-pending {
        background-color: #a76c00;
        border-color: #a76c00;
    }
}

[data-theme="dark"] {
    .fc td.fc-today {
        background-color: rgb(101, 101, 101);
    }

    .plan-level-disapproved {
        background-color: #ac0101;
    }

    .plan-level-approved {
        background-color: green;
    }

    .plan-level-pending {
        background-color: #a76c00;
    }
}


.fc-toolbar.fc-header-toolbar {
    display: flex;
    justify-content: space-between;
    /* Horizontally center elements */
    align-items: center;
    /* Vertically center elements */
    flex-wrap: wrap;
    /* Allow elements to wrap if necessary */
    margin-bottom: 5px !important;
    /* Add some spacing between elements */
}

.fc-next-button,
.fc-basicDay-button {
    margin: 0 !important;
    border-radius: 0 5px 5px 0;
}

.fc-prev-button,
.fc-month-button {
    border-radius: 5px 0 0 5px;
}