
.app-calendar-wrapper .app-calendar-sidebar {
    position: absolute;
    overflow: hidden;
    flex-grow: 0;
    flex-basis: 18.25rem;
    left: calc(-18.25rem - 1.2rem);
    height: 100%;
    width: 18.25rem;
    transition: all .2s;
    z-index: 4
}

.app-calendar-wrapper .app-calendar-sidebar.show {
    left: 0
}

.app-calendar-wrapper .app-calendar-sidebar .flatpickr-calendar {
    box-shadow: none
}

.app-calendar-wrapper .app-calendar-sidebar .flatpickr-calendar .flatpickr-month,
.app-calendar-wrapper .app-calendar-sidebar .flatpickr-calendar .flatpickr-weekday,
.app-calendar-wrapper .app-calendar-sidebar .flatpickr-calendar .flatpickr-weekdays {
    background: rgba(0, 0, 0, 0)
}

.app-calendar-wrapper .app-calendar-sidebar .flatpickr-calendar .flatpickr-days {
    border: 0
}

.app-calendar-wrapper .app-calendar-sidebar .flatpickr-calendar:focus {
    outline: 0
}

.app-calendar-wrapper .app-calendar-content {
    position: relative
}

.app-calendar-wrapper .fc-toolbar h2 {
    font-size: 1.125rem
}

@media(max-width: 767.98px) {
    .app-calendar-wrapper .fc-toolbar h2 {
        font-size: 1rem
    }
}

.app-calendar-wrapper table.fc-scrollgrid {
    border-left: 0;
    border-right: 0
}

.app-calendar-wrapper table.fc-scrollgrid th,
.app-calendar-wrapper table.fc-scrollgrid td {
    border-right: 0
}

.app-calendar-wrapper .fc-timeGridWeek-view table>tbody>tr:last-child>td,
.app-calendar-wrapper .fc-timeGridDay-view table>tbody>tr:last-child>td {
    border-bottom: 0
}

.app-calendar-wrapper .fc-dayGridMonth-view table.fc-scrollgrid td {
    border-bottom: 0
}

.app-calendar-wrapper .fc-header-toolbar {
    margin-bottom: 1rem !important
}

.app-calendar-wrapper .fc-view-container {
    margin: 0 -1rem
}

.app-calendar-wrapper .event-sidebar .ql-editor {
    min-height: 5rem
}

.app-calendar-wrapper .event-sidebar .select2 .select2-selection__choice {
    display: flex
}

.app-calendar-wrapper .event-sidebar .select2 .select2-selection__choice .avatar {
    display: none
}

@media(min-width: 992px) {
    .app-calendar-wrapper .app-calendar-sidebar {
        position: static;
        height: auto;
        background-color: rgba(0, 0, 0, 0) !important
    }

    .app-calendar-wrapper .app-calendar-sidebar .flatpickr-days {
        background-color: rgba(0, 0, 0, 0)
    }
}

[dir=rtl] .app-calendar-wrapper .fc .fc-toolbar .fc-sidebarToggle-button {
    order: 1
}

[dir=rtl] .app-calendar-wrapper .app-calendar-sidebar {
    left: auto;
    right: calc(-18.25rem - 1.2rem)
}

[dir=rtl] .app-calendar-wrapper .app-calendar-sidebar.show {
    left: auto;
    right: 0
}

.light-style .app-calendar-wrapper .app-calendar-sidebar {
    background-color: #fff;
    box-shadow: 0 0 0 1px rgba(67, 89, 113, .075)
}

.light-style .app-calendar-wrapper .app-calendar-sidebar .flatpickr-calendar .flatpickr-month,
.light-style .app-calendar-wrapper .app-calendar-sidebar .flatpickr-calendar .flatpickr-weekday,
.light-style .app-calendar-wrapper .app-calendar-sidebar .flatpickr-calendar .flatpickr-weekdays {
    color: #697a8d
}

.light-style .app-calendar-wrapper .app-calendar-sidebar .flatpickr-calendar .flatpickr-months svg {
    fill: #697a8d
}

.light-style .app-calendar-wrapper .event-sidebar .select2-results .select2-results__option.select2-results__option--highlighted {
    background-color: rgba(67, 89, 113, .1) !important;
    color: #697a8d !important
}

@media(min-width: 992px) {
    .light-style .app-calendar-sidebar {
        box-shadow: none !important;
        border-right: 1px solid #d9dee3
    }

    .light-style[dir=rtl] .app-calendar-sidebar {
        border-right: 0;
        border-left: 1px solid #d9dee3
    }
}

.dark-style .app-calendar-wrapper .app-calendar-sidebar {
    background-color: #2b2c40;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .075)
}

.dark-style .app-calendar-wrapper .app-calendar-sidebar .flatpickr-calendar {
    background-color: #2b2c40
}

.dark-style .app-calendar-wrapper .app-calendar-sidebar .flatpickr-calendar .flatpickr-days {
    background-color: #2b2c40
}

.dark-style .app-calendar-wrapper .event-sidebar .select2-results .select2-results__option.select2-results__option--highlighted {
    background-color: rgba(0, 0, 0, .1) !important;
    color: #a3a4cc !important
}

@media(min-width: 768px) {
    .dark-style .app-calendar-sidebar {
        box-shadow: none !important;
        border-right: 1px solid #444564
    }

    .dark-style[dir=rtl] .app-calendar-sidebar {
        border-right: 0;
        border-left: 1px solid #444564
    }
}

.fc-theme-standard .fc-list {
    border: 0
}


@media(max-width: 767.98px) {
    .app-calendar-wrapper .app-calendar-sidebar {
        flex-basis: 14.25rem; /* Giảm độ rộng của sidebar */
        left: calc(-14.25rem - 1.2rem); /* Điều chỉnh vị trí của sidebar */
        width: 14.25rem; /* Cập nhật chiều rộng */
    }
}
