/* --------------------------------- Responsive --------------------------------- */


/* less then 1220px */

@media only screen and (max-width: 1200px) {
    /* ------------------- Employee Attendance ------------------- */
    .employees .attendance .calendar .day {
        width: calc(19.8% - 21.1px);
    }
    aside.side-bar.open~.side-bar-content .content .attendance .calendar .day {
        width: calc(24.8% - 21.1px);
    }
    /* --------------------- Dashboard --------------------- */
    .side-bar-content .content .boxes-parent .box {
        width: calc(33.3% - 37.2px);
    }
    .side-bar.open~.side-bar-content .content .boxes-parent .box {
        width: calc(50% - 37.2px);
    }
}


/* less then 920px */

@media only screen and (max-width: 920px) {}


/* less then 768px */

@media only screen and (max-width: 768px) {
    /* ---------------------- Side Bar ---------------------- */
    aside.side-bar.open {
        position: fixed;
        top: 46px;
        left: 0;
        z-index: 10;
    }
    aside.side-bar.open~.side-bar-content .content {
        filter: blur(10px);
    }
    /* ---------------------- Content ---------------------- */
    aside.side-bar.open~.side-bar-content {
        width: calc(100% - 40px);
    }
    /* ----------------------- Header ----------------------- */
    .side-bar-content header {
        width: calc(100% - 40px);
    }
    aside.side-bar.open~.side-bar-content header {
        width: 100%;
    }
    /* --------------------- Dashboard --------------------- */
    .side-bar-content .content .boxes-parent .box {
        width: calc(50% - 34px);
    }
    /* ----------------- Search And Add Button ----------------- */
    section.all .search-add {
        flex-direction: column-reverse;
    }
    section.all .search-add .add-btn {
        width: 100%;
    }
    /* ------------------- Employee Attendance ------------------- */
    .employees .attendance .calendar .day {
        width: calc(33.3% - 21.9px);
    }
}


/* less then 600px */

@media only screen and (max-width: 600px) {
    /* ------------------- Employee Attendance ------------------- */
    .employees .attendance .calendar .day {
        width: calc(50% - 22px);
    }
    .employees .attendance .calendar .day .full-date {
        font-size: 12px;
        line-height: 15px;
    }
    .employees .attendance .calendar .day .date-day {
        font-size: 13px;
        line-height: 14px;
    }
    .employees .attendance .calendar .day .time {
        font-size: 13px;
        line-height: 14px;
    }
    /* --------------------- Dashboard --------------------- */
    .side-bar-content .content .boxes-parent .box {
        width: calc(100% - 20px);
    }
    .side-bar-content .content .boxes-parent .box.birthday .birthday-card {
        flex-direction: column;
    }
}


/* less then 500px */

@media only screen and (max-width: 500px) {}


/* less then 390px */

@media only screen and (max-width: 390px) {}