.calendar {
    width: 100%;
    height: 100%;
}

/* HEADER */
.calendar .calendar-header {
    display: flex;
    justify-content: space-between;
    background-color: #ededed;
    padding: 10px;
    border: 1px solid #dbdbdb;
}

.calendar .calendar-header .left,
.calendar .calendar-header .date-picker {
    display: flex;
}


.calendar .calendar-header .left .new-order {
    text-align: center;
    border: 1px solid #cdcdcd;
    background-color: #fff;
    margin-left: .5rem;
    outline: none;
    height: 100%;
    cursor: pointer;
    padding: 5px 10px;
    transition: 250ms background-color;
}

.calendar .calendar-selected-date {
    text-align: center;
    background-color: #fff;
    border: 1px solid #ddd;
    padding: 10px;
}

/* GENERAL CALENDAR */
.calendar .picker-button {
    border: 1px solid #dcdcdc;
    color: #6a6a6a;
    background-color: #fff;
    border-radius: 0;
}

.calendar .calendar-input {
    border: 1px solid #dcdcdc;
    color: #6a6a6a;
    background-color: #fff;
    border-radius: 0;
    outline: none;
    text-align: center;
    width: 200px;
}

.calendar .calendar-input::-webkit-inner-spin-button,
.calendar .calendar-input::-webkit-calendar-picker-indicator {
    display: none;
    -webkit-appearance: none;
}

.calendar .ml-1 {
    margin-left: .5rem;
}

.calendar .ml-2 {
    margin-left: 1rem;
}

.calendar .ml-3 {
    margin-left: 2rem;
}

.calendar .calendar-select {
    -webkit-appearance: none;
    text-align: center;
    border: 1px solid #cdcdcd;
    outline: none;
    height: 100%;
    cursor: pointer;
    padding: 5px 10px;
    transition: 250ms background-color;
}

.calendar .calendar-select:hover {
    background-color: #f7f7f7;
}

.calendar .calendar-search {
    -webkit-appearance: none;
    padding: 5px 10px;
    border: 1px solid #cdcdcd;
    outline: none;
    height: 100%;
}

.calendar .intervals {
    display: flex;
}

.calendar .interval-button {
    padding: 6px 16px;
    border: 1px solid #cdcdcd;
    background-color: #fff;
    text-align: center;
    transition: 250ms background-color;
}

.calendar .interval-button.active {
    background-color: #dedede;
}

.calendar .interval-button:not(.active):hover {
    background-color: #eee;
}

/* CALENDAR HEAD */
.calendar .calendar-body table thead tr td {
    text-align: center;
}

.calendar .calendar-body table thead tr td.sortable {
    cursor: pointer;
    transition: 250ms background-color;
    user-select: none;
}

.calendar .calendar-body table thead tr td.sortable:hover {
    background-color: #f7f7f7;
}

.calendar .calendar-body table thead tr td.sortable::after {
    content: '\f0dc';
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-left: 10px;
}

/* CALENDAR TABLE */
.calendar .calendar-body table {
    table-layout: fixed;
}

.calendar .calendar-body table thead tr td {
    width: 100%;
}

.calendar .calendar-body table thead tr td:nth-child(2) {
    width: 150%;
}

/* RESPONSIVE */

@media (max-width: 900px) {
    .calendar .calendar-header {
        flex-direction: column;
        justify-content:  center;
    }

    .calendar .calendar-header >div {
        display: flex;
        justify-content: center;
    }

    .calendar .calendar-header .right {
        margin-top: 5px;
    }
}

@media (max-width: 600px) {
    .calendar .calendar-header .left {
        flex-direction: column;
        justify-content: center;
    }

    .calendar .calendar-header .left >div {
        justify-content: center;
        display: flex;
    }

    .calendar .calendar-header .left .calendar-filter {
        margin-left: 0!important;
        margin-top: 5px;
    }
}

@media (max-width: 282px) {
    .calendar .calendar-header .left .calendar-filter {
        margin-left: 0!important;
        margin-top: 5px;
        display: flex;
        flex-direction: column;
    }

    .calendar .calendar-header .left .calendar-filter .calendar-search {
        margin-left: 0!important;
        margin-top: 5px;
    }
}

/* CALENDAR MODAL - BOOTSTRAP CUSTOM */
.calendar-modal .add-button {
    border: 1px dashed #c9c9c9!important;
    color: #c9c9c9;
}