@media only screen and (max-width: 1020px) {
    .header-area .search-box{ display: none; }
    
    .w48p{ width: 100%; margin-right: 0; }
    .white-panel-box{ width: calc(100% - 20px); }

    .big-panel, .sub-item-boxes{ float: unset; width: 100%; margin-left: 0px; }
    .sub-item-boxes .sub-list{ width: 100%; }
}

@media only screen and (max-width: 768px) {
    .desktop{ display: none !important; }
    .mobile{ display: block !important; }
    .mobile-flex{ display: flex !important; }
    .mobile-hidden{ display: none !important; }


    .header-area{ justify-content: space-between; }
        .header-area .menu_icon{ display: inline-block; cursor: pointer; z-index: 99; position: relative; left: 6px; height: 24px; width: 28px; display: flex; justify-content: center; align-items: center;}
        .header-area .menu_icon .hamburger{ display: inline-block; }
        .header-area .menu_icon.active .hamburger{ display: none; }
        .header-area .menu_icon .hamburger span{ width: 28px; height: 3px; background-color: #000; margin: 5px 0; display: block; }
        .header-area .menu_icon .hamburger span:first-child,
        .header-area .menu_icon .hamburger span:last-child{ margin: 0px; }
        body.archive .header-area .menu_icon .hamburger span{ background-color: #fff; }
        .header-area .menu_icon .close{ color: #000; font-size: 30px; display: none; }
        .header-area .menu_icon.active .close{ display: inline-block; }
        .header-area .site-logo{ margin: 0 auto; width: 62px; }
        .user-profile{ margin-right: 0; padding-right: 0; border-right: 0; color: #036; gap: 10px; align-items: center; }


    .main-content #menu{ display: none; }
        .main-content #menu.active{ display: block; width: 100%; position: fixed; top: 80px; }
        
        .main-content #menu .user_row { margin-bottom: 20px; justify-content: space-between; }
        .main-content #menu .user_row .user-profile { color: #fff; }
        .main-content #menu .user_row .user-name { color: #fff; margin-left: 0; }
        .main-content #menu .user_row .user-avatar { position: relative; top: -4px; }
        .main-content #menu .user_row .title { color: #fff; }

        .main-content .body-content{ width: 100%; }

    .status{ padding: 2px 4px; }
    #calendarTable label{ width: auto; max-width: 25px; }

    .ticket-filter-box thead th{ padding: 5px; }
    .ticket-filter-box thead th .th-content{ padding-right: 0px; }
    .ticket-filter-box tbody td{ padding: 3px 5px; word-wrap: anywhere; }
}