@media screen and (max-width: 1024px) {  
.login-left-section {	width: 400px;} 
.login-right-section { width: calc(100% - 400px); }
.login-right-section .login-form { max-width: 320px; }
#line-chart-here { max-width: 1200px !important; width: 1200px !important; max-height: 400px !important; overflow-x: hidden; }
.line-graph-container { overflow-x: auto; }
}
@media screen and (max-width: 991px) {  
/* ==========================================
   MOBILE PREMIUM NAVIGATION - 2026 DESIGN
   Modern click-based dropdowns
   ========================================== */

/* Show Hamburger Button */
.hamburger-menu {
    display: flex !important;
    width: 100%;
    justify-content: space-between;
    border-radius: 0;
}

.hamburger-menu .menu-text {
    flex: 1;
    text-align: left;
    font-family: 'Montserrat', sans-serif;
}

/* Hide Navigation Content by Default on Mobile */
.sub-navication-content {
    display: none !important;
    position: fixed;
    top: 52px;
    right: 0;
    bottom: 0;
    /* background: rgba(15, 23, 42, 0.75); */
    /* backdrop-filter: blur(8px); */
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    max-width: 300px;
    width: 100%;
}

/* Show Navigation Content When Active */
.sub-navication-content.active {
    display: block !important;
    opacity: 1;
    z-index: 2;
}

/* Mobile Navigation Panel - Clean Vertical List */
.sub-navication-content.active .sub-navication {
    position: fixed;
    top: 60px;
    left: 16px;
    right: 16px;
    bottom: auto;
    max-width: calc(100% - 32px);
    width: auto;
    height: auto;
    max-height: calc(100vh - 80px);
    background: #ffffff !important;
    padding: 20px !important;
    margin: 0 !important;
    flex-direction: column !important;
    align-items: stretch !important;
    overflow-y: auto;
    overflow-x: hidden;
    border-radius: 20px !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25), 0 0 1px rgba(0, 0, 0, 0.1);
    animation: slideInDown 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    gap: 0 !important;
    font-family: 'Montserrat', sans-serif;
    display: flex !important;
}

@keyframes slideInDown {
    from {
        transform: translateY(-30px) scale(0.95);
        opacity: 0;
    }
    to {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

/* Mobile Navigation Items - Vertical List */
.sub-navication-content.active .sub-navication li {
    width: 100% !important;
    margin: 0 !important;
    display: block !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

.sub-navication-content.active .sub-navication li:last-child {
    border-bottom: none !important;
}
.customQ-dropdown ul li:not(.subQ) > a::before {
  display: none;
}

.sub-navication-content.active .sub-navication li a {
    /* width: 100% !important; */
    padding: 5px 10px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    border: none !important;
    background: transparent !important;
    color: #475569 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.sub-navication-content.active .sub-navication li a:hover,
.sub-navication-content.active .sub-navication li a:active {
    background: #f8fafc !important;
    color: #0284c7 !important;
    border: none !important;
    box-shadow: none !important;
    transform: none !important;
}

.sub-navication-content.active .sub-navication li a.active {
    background: #f1f5f9 !important;
    color: #0ea5e9 !important;
    border: none !important;
    box-shadow: none !important;
    font-weight: 600 !important;
}

/* Dropdown Indicators for Mobile */
.sub-navication-content.active .sub-navication li.top-queue > a::after,
.sub-navication-content.active .sub-navication li.has-dropdown > a::after,
.sub-navication-content.active .sub-navication li:has(.customQ-dropdown) > a::after {
    content: '›';
    font-size: 24px;
    font-weight: 400;
    margin-left: auto;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    color: #64748b;
}

.sub-navication-content.active .sub-navication li.dropdown-open > a::after {
    transform: rotate(90deg);
    color: #0ea5e9;
}

/* Mobile Dropdown Menu - Nested List Style */
.sub-navication-content.active .customQ-dropdown {
    position: static !important;
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 0 0 20px !important;
    background: #f8fafc !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    max-height: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.sub-navication-content.active li.dropdown-open > .customQ-dropdown {
    max-height: 600px !important;
    opacity: 1 !important;
    padding: 8px 0px 8px 0px !important;
}

.sub-navication-content.active .customQ-dropdown ul {
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    list-style: none !important;
}

.sub-navication-content.active .customQ-dropdown li {
    border-bottom: 1px solid #e2e8f0 !important;
    margin: 0 !important;
}

.sub-navication-content.active .customQ-dropdown li:last-child {
    border-bottom: none !important;
}

.sub-navication-content.active .customQ-dropdown li a {
    padding: 0px 0 0 15px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #64748b !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center;
    gap: 8px;
    margin: 0 !important;
}

.sub-navication-content.active .customQ-dropdown li a:hover,
.sub-navication-content.active .customQ-dropdown li a:active {
    background:transparent !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: none !important;
    transform: none !important;
}

#new-ticket {
	padding: 10px !important;
	background: #0284c7 !important;
	text-align: center;
	justify-content: center;
	color: #fff !important;
	border-radius: 15px !important;
	margin-top: 8px !important;
}
.sub-navication-content.active .customQ-dropdown li a.active {
    background: #ffffff !important;
    color: #0ea5e9 !important;
    border: none !important;
    font-weight: 600 !important;
}

/* Queue count badges */
.sub-navication-content.active .customQ-dropdown .queue-count {
    margin-left: auto;
    padding: 2px 8px;
    background: #f1f5f9;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    top: 6px;
    position: relative;
    right: 10px;
}

.sub-navication li.top-queue > a::after,
.sub-navication li.has-dropdown > a::after,
.sub-navication li:has(.customQ-dropdown) > a::after {
  display: block;
}
.sub-navication li .icon-sort-down {
	margin-top: 0px;
	margin-left: 0;
}
/* Smooth scrollbar for mobile menu */
.sub-navication-content.active .sub-navication::-webkit-scrollbar {
    width: 6px;
}

.sub-navication-content.active .sub-navication::-webkit-scrollbar-track {
    background: transparent;
    margin: 8px 0;
}

.sub-navication-content.active .sub-navication::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}

.sub-navication-content.active .sub-navication::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Rest of mobile styles */
.user-directory-header {  align-items: flex-start; flex-direction: column; }
.user-directory-header .card-header-right-content { margin-top: 10px;}
.user-directory-header .card-header-right-content .commanbutton { margin: 3px 0 !important; }

.default-card .card-header { align-items: flex-start; justify-content: space-between; flex-direction: column; }
.default-card .card-header .card-header-right-content { margin-top: 15px; }

.card-header.systemlogs-header { flex-direction: row; align-items: center; }
.card-header.mb-3.systemlogs-header .card-header-right-content { margin: 0; }
.condition-search-content .properties .condition-property { width: calc(50% - 12px); }

#action-dropdown-statuses { left: inherit !important; }
#action-dropdown-statuses::before, #action-dropdown-statuses::after { left: 40px; right: auto; }
.listing-action-buttons #sort-dropdown { left: inherit !important; }
.listing-action-buttons #sort-dropdown::before, .listing-action-buttons #sort-dropdown::after { left: calc(50% - 10px); right: auto; }
#action-dropdown-print { left: auto !important; }
#action-dropdown-print::before, #action-dropdown-print::after { left: calc(50% - 10px); right: auto; }
#action-dropdown-more { left: auto !important; }
#action-dropdown-more::before, #action-dropdown-more::after { left: calc(50% - 10px); right: auto; }
#action-dropdown-more.schedules-actions-button { left: auto !important; }
.table-content .table-scroll { border-radius: .5rem; max-height: inherit; }
#sub_nav.sub-navication > li > a, #customQ_nav .jb-overflowmenu-menu-primary li.item > a { background: linear-gradient(45deg, #f4fbff, #eef9ff); }
.landing-container { max-width: 100%; width: calc(100% - 30px) !important; margin-left: 15px; margin-right: 15px; }
.landing-container + #footer { margin-bottom: 30px; }
.DTFC_ScrollWrapper .DTFC_LeftWrapper { display: none; }
/* user */
.user-directory-header.useractionbutton {	flex-direction: row; margin: 0 !important; padding-top: 20px; }
.useractionbutton .buttontext {	display: none; }
.user-directory-header.useractionbutton .card-header-right-content { margin-top: 0; }
.user-directory-header.useractionbutton .commanbutton { margin: 0 !important; }
}
@media screen and (max-width: 767px) {  
.page-wrapper.toggled .closesidebaricon { left: 250px; position: relative; }
.login-cards { flex-direction: column; }
.login-left-section { width: 100%; padding: 45px 0 25px 0; text-align: center; background: transparent; }
.login-left-section .login-image { display: none; }
.login-right-section { width: calc(100% - 0px); }
.login-left-section .copyright-text { display: none; }
.login-right-section .copyright-text { display: block; margin-top: 20px; }
.login-right-section .login-form { max-width: 400px; }
.jb-overflowmenu .jb-overflowmenu-container { border: 0; }
.jb-overflowmenu .jb-overflowmenu-container > a.jb-overflowmenu-menu-secondary-handle { color: #0076BC; background-color: transparent; border-right: 0;
  padding: 0; }
/* .jb-overflowmenu .jb-overflowmenu-container { right: 30px; border-bottom: 0; border-left: 0; width: 30px; display: flex; align-items: center; justify-content: center; background: #ddf2ff; } */
.jb-overflowmenu .jb-overflowmenu-menu-secondary { top: 30px; }
.jb-overflowmenu-menu-secondary { background-color: #f7f7f7; border: 1px solid #ddd; border-radius: 5px; }
.jb-overflowmenu-menu-secondary li.item { width: 100%; }
.jb-overflowmenu .jb-overflowmenu-container > a.jb-overflowmenu-menu-secondary-handle:hover { background-color: transparent; }
#close-sidebar { background: #0076bc; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 5px; z-index: 9999999; }
.card-header.mb-3.systemlogs-header .card-header-right-content .deleteentries-button p { display: none; }
.main-header { z-index: 10; }
.sidebar-wrapper { z-index: 99; }
.comman-popup-body { max-width: 100%; width: 100%; left: 0 !important; right: 0 !important; }
.card-comman-tab .nav-tabs .nav-item { margin-right: 5px; }
.card-comman-tab .nav-tabs .nav-link { border-radius: 25px; padding: 5px 10px; }
.myaccount-profile-cards { display: grid; grid-template-columns: 100%; column-gap: 0px; width: calc(100% -  0px); gap: 15px; }
/* .page-filter .refresh-button { top: auto; margin: 15px 0 0 0; } */
/* .page-wrapper.toggled::after { background-color: rgba(0,0,0,0.5); position: fixed; left: 0; right: 0; bottom: 0; top: 0; width: 100%; z-index: 1; content: ''; }*/

.page-filter.dashboard-filter .refresh-button { top: 0; margin: 0; }
.page-wrapper.toggled { overflow: hidden; } 
.desktop-menu { display: none; }
.mobile-menu-close { display: block; }
.page-wrapper .mobile-menu-close { display: none; }
.page-wrapper.toggled .mobile-menu-close { display: block; }
/* .page-wrapper.toggled .sidebar-content { box-shadow: 0 0 10px #c8c8c8; } */
.page-wrapper.toggled .sidebar-wrapper { box-shadow: 0 0 22px rgba(0, 0, 0, 0.1); }
.typeahead.dropdown-menu a { font-size: 13px; }
.typeahead.dropdown-menu { z-index: 1; }
#header p { width: auto; }
.landing-nav-button { display: flex; background-color: #0f79b1; }
.landing-navication ul#nav.landing-page-nav { display: none; }
.landing-navication ul#nav.landing-page-nav.show { display: flex; flex-direction: column; align-items: flex-start; box-shadow: 0 10px 15px -5px rgba(189, 189, 189, 0.5) !important;
  border-radius: 0 0 10px 10px; background-color: #fff !important; padding: 0px !important; gap: 0; }
ul#nav.landing-page-nav.show li { width: 100%; }
.landing-navication ul#nav.landing-page-nav.show li a { margin: 0; padding: 10px 15px; border-radius: 0; color: #333; border:0; }
.landing-navication ul#nav.landing-page-nav.show li a.active { color: #0f79b1; background-color: #ebf8ff; box-shadow: none; border:0; }
.landing-navication ul#nav.landing-page-nav.show li a:hover { box-shadow: none; background-color: #ebf8ff; border:0; color: #0f79b1; }
.landing-navication ul#nav.landing-page-nav.show li:last-child a:hover { color: #0f79b1; box-shadow: none; background-color: #ebf8ff; border:0; border-radius: 0 0 10px 10px; }
.landing-navication ul#nav.landing-page-nav.show li:last-child a.active { color: #0f79b1; background-color: #ebf8ff; box-shadow: none; border:0; border-radius: 0 0 10px 10px; }
.ask-questions-page-container .col-md-8 { order: 1; }
.default-card.card { padding: 15px; }
}
@media screen and (max-width: 667px) {  
#ui-datepicker-div.ui-datepicker-multi { width: auto !important; }
.ui-datepicker-group { float: none !important; width: 100% !important; margin-bottom: 15px; }
.ui-datepicker-row-break { display: none; }
}
@media screen and (max-width: 640px) { 
.datatable-filter-field .dataTables_filter label::before, .dataTables_wrapper .dataTables_filter label::before { right: 8px; }
.datatable-filter-field #display_length { width: 200px; text-align: left;
}
}
@media screen and (max-width: 575px) {  
.tip_box { left: 0 !important; right: 0 !important; margin: 0 30px !important; z-index: 999999; }
.tip_box .tip_content { min-width: 300px !important; top: auto !important; bottom: 0 !important; width: 100%; }
.tip_box .tip_content p { word-break: break-all; }
.tip_arrow { display: none !important; }
.tip_content .tip_close + div { width: 100% !important; }
.tip_content #ticket-preview_container th, #ticket-preview_container td { font-size: 13px; }
.tip_content .nav-tabs .nav-link { font-size: 13px; padding: 2px 5px; }
.tip_content .nav-tabs .nav-link i { display: none; }
.tip_content .tip_menu li a { font-size: 13px; }
.kb-search-card .search-icon { display: none; }
.alcapply-columns { flex-direction: column; }
.default-timezone-colums  { flex-direction: column; }
.username-pass-field { flex-direction: column; }
.username-pass-field .username-field { margin: 0 0 15px 0 !important; width: 100% !important; }
.submitbutton, .resetbutton, .cancelbutton { font-size: 12px !important; }
.submitbutton i, .resetbutton i, .cancelbutton i { display: none; }
.page-action-footer { padding: 10px; }
.page-action-footer .buttons { justify-content: center; }
.myprofile-tabs { column-gap: 5px; gap: 5px; }
ul.myprofile-tabs li a { font-size: 12px; padding: 5px 12px; }
.ticket-header { align-items: flex-start; flex-direction: column; }
.search-button-filter { margin-top: 15px; }
/* User */
.user-directory-header.useractionbutton { flex-direction: column;	gap: 17px; }
}
@media screen and (max-width: 479px) {  
.login-right-section .login-form { max-width: 300px; }
/* #customQ_nav ul li.item:hover div.customQ-dropdown { display: block; position: relative !important; left: 0 !important; box-shadow: none !important; margin: 0 0 10px 0 !important; border-radius: 10px !important; } */
.condition-search-content .properties .condition-property { width: calc(100% - 12px); }
.toggled .main-header .welcome-user .user-dropdown-button { color: #0076BC; display: none; }
.comman-select2-dropdown.cannedresponse-apend { display: flex; flex-direction: column; }
.comman-select2-dropdown.cannedresponse-apend .checkbox { padding-left: 0; }
.user-collaborators-field .changepasswordbutton { width: 150px; text-align: center; }
.page-action-footer .buttons { column-gap: 5px; }
input.submitbutton[type="submit"] { height: 30px; padding: 0 10px; font-size: 12px; }
.cancelbutton[type="submit"] { height: 30px; padding: 0 10px; font-size: 12px; }
.agent-module-table-header { flex-direction: column !important; align-items: flex-start !important; }
.agent-module-table-header .card-header-right-content { margin-top: 15px !important; }
.kb-search-card > form { flex-direction: column; }
.landing-container #header #logo img { max-height: 45px; }
/* calendar css */
#ui-datepicker-div { left: 0 !important; right: 0 !important; width: 100% !important; box-sizing: border-box; padding: 10px; }
.ui-datepicker { font-size: 14px !important; }
.ui-datepicker-calendar th span, .ui-datepicker-calendar td a { padding: 6px !important; font-size: 12px !important; }
.ui-datepicker-title { font-size: 16px !important; text-align: center; }
.ui-datepicker-header { padding: 6px 0 !important; }
.ui-datepicker-prev, .ui-datepicker-next { top: 8px !important; }
.ui-datepicker-buttonpane button { width: 48% !important; margin: 4px 1% !important;  }
/* calendar css End*/
}

/* =====================================
   MOBILE RESPONSIVE - PAGINATION & EXPORT
   Modern Mobile-First Design
   ===================================== */

@media screen and (max-width: 768px) {
    /* Pagination Container - Wrap and Center */
    .table-pagination {
        flex-wrap: wrap !important;
        gap: 6px !important;
        padding: 12px !important;
        justify-content: center !important;
        align-items: center !important;
    }
    
    /* Page Number Buttons */
    .table-pagination a,
    .table-pagination .first-pagination {
        min-width: 32px !important;
        height: 32px !important;
        padding: 0 8px !important;
        font-size: 13px !important;
    }
    
    /* Showing Text - Move to Bottom, Full Width */
    .table-pagination .faded.pull-right {
        order: 3 !important;
        width: 100% !important;
        text-align: center !important;
        margin-left: 0 !important;
        margin-top: 8px !important;
        font-size: 13px !important;
        display: block !important;
    }
    
    /* Export Button - Keep Visible */
    .table-pagination .no-pjax,
    .table-pagination .export {
        order: 2 !important;
        padding: 0 12px !important;
        font-size: 13px !important;
        height: 32px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* Page Label */
    .table-pagination::before {
        order: 0 !important;
        width: 100% !important;
        text-align: center !important;
    }
}

@media screen and (max-width: 576px) {
    /* Pagination Container - Compact Mobile Layout */
    .table-pagination {
        flex-wrap: wrap !important;
        gap: 5px !important;
        padding: 10px 8px !important;
        justify-content: center !important;
    }
    
    /* Page Number Buttons - Smaller */
    .table-pagination a,
    .table-pagination .first-pagination {
        min-width: 30px !important;
        height: 30px !important;
        padding: 0 6px !important;
        font-size: 12px !important;
        border-radius: 6px !important;
    }
    
    /* Export Button */
    .table-pagination .no-pjax,
    .table-pagination .export {
        order: 2 !important;
        width: auto !important;
        padding: 0 16px !important;
        font-size: 12px !important;
        margin-top: 6px !important;
        height: 30px !important;
    }
    
    /* Showing Text */
    .table-pagination .faded.pull-right {
        order: 3 !important;
        width: 100% !important;
        text-align: center !important;
        margin-left: 0 !important;
        margin-top: 8px !important;
        font-size: 12px !important;
        display: block !important;
    }
    
    /* Hide Help Icon on Mobile */
    .table-pagination .help-tip,
    .table-pagination .icon-question-sign {
        display: none !important;
    }
    
    /* Ensure Arrows are Visible */
    .table-pagination a strong {
        font-size: 14px !important;
    }
}

@media screen and (max-width: 480px) {
    /* Extra Compact for Small Devices */
    .table-pagination {
        gap: 4px !important;
        padding: 8px 6px !important;
    }
    
    /* Smaller Page Buttons */
    .table-pagination a,
    .table-pagination .first-pagination {
        min-width: 28px !important;
        height: 28px !important;
        padding: 0 5px !important;
        font-size: 11px !important;
        border-radius: 5px !important;
    }
    
    /* Export Button Compact */
    .table-pagination .no-pjax,
    .table-pagination .export {
        padding: 0 14px !important;
        height: 30px !important;
        font-size: 11px !important;
    }
    
    /* Showing Text Small */
    .table-pagination .faded.pull-right {
        font-size: 11px !important;
    }
}

@media screen and (max-width: 403px) {  
.schedule-actionbutoon text { display: none; }
}