@media (min-width: 1440.98px){
    .col-5 { flex: 0 0 20%; max-width: 20%; }
}

@media (min-width: 1720.98px){
    .call-cards .card-body { padding: 25px; }
}


@media (min-width: 1400px) and (max-width: 1850px) {
    .call-cards .title-text .title {
        min-height: 36px;
    }
}

@media (max-width: 1720.98px){
    .text-18 { font-size: 16px; }
    .text-20 { font-size: 18px; }
    .text-24 { font-size: 20px; }
    .call-cards .title-text { gap: 15px; }
    .call-cards .icon { width: 45px; height: 45px; }
    .call-cards .icon svg { width: 20px; height: 20px; }
    .legend-color-box { width: 30px; height: 15px; }
}

@media (max-width: 1440.98px){
    .text-24 { font-size: 18px; }
    .text-20 { font-size: 16px; }  
    .report-filter .report-form form .field-wrap select.form-select.account { padding: 8px 32px 8px 16px; }
}

@media(max-width: 1199.98px){
    .report-filter .filter-wrap .title { width: 100%; word-break: break-all; }
    .legend-color-box { width: 20px; }
}

@media(max-width: 991.98px){
    .sidebar { position: fixed; top: 0; left: 0; width: 250px; height: 100vh; color: white; overflow: auto; transition: transform 0.3s ease; z-index: 1004; transform: translateX(0%); }
    .sidebar.collapsed { transform: translateX(-100%); }
    .vertical-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: rgba(33, 37, 41, 0.35); z-index: 1003; display: none; }
    .hemberger-icon .default-icon { display: none; }
    .hemberger-icon .toggle-icon { display: flex; }
    .agent-report .table thead th { font-size: 14px; }
}

@media(max-width: 991.98px){
    .call-cards .icon { width: 40px; height: 40px; }
}

@media(max-width: 767.98px){
    .legend-box span { font-size: 12px; }
    #totalCallsChart { min-width: 767px; }
    .chart-scroll-wrapper { overflow-x: auto; width: 100%; position: relative; }
    #totalCallsChart { display: flex; min-width: 767px; width: fit-content; position: relative; }
    .apexcharts-yaxis { position: sticky !important; left: 0; background: white; z-index: 10; }

}

@media(max-width: 600.98px){
    #totalCallsChart { min-width: 600px; }
    #totalCallsChart { min-width: 600px; }

}

@media(max-width: 575.98px){
    .text-24 { font-size: 16px; }
    .text-20 { font-size: 14px; }
    .text-18 { font-size: 14px; }
    .text-16 { font-size: 14px; }
    .text-15 { font-size: 14px; }
    .sidebar ul.nav li span.nav-text { font-size: 14px; }
    .sidebar .nav-link { font-size: 14px; }
    header.header .icon-title { gap: 0px; }
    header.header .profile-logout { gap: 4px; }
    header.header button { width: 40px; height: 40px; }
    .report-filter .report-form form .field-wrap  .date-range { width: 100%; }
    .report-filter .report-form form .field-wrap select.form-select.account { width: 49%; } 
    .form-select { background-position: right .25rem center; }
    .legend-wrap { flex-direction: column; justify-content: flex-start !important; align-items: flex-start !important; gap: 5px !important; }
    .legend-wrap.offeredChart .custom-legend { width: 100%; justify-content: flex-start; margin: 0; }
    .legend-wrap.offeredChart .custom-legend span.legend-label { max-width: max-content; }
    .legend-wrap.offeredChart:last-child { margin-top: 5px; }
}

@media(max-width: 430.98px){
    .report-filter .report-form form .field-wrap .date-range { flex-direction: column; }
    .report-filter .report-form form .field-wrap select.form-select.account { width: 100%; } 
}

/* ====================(30-7-2025) ======================= */
@media (min-width: 1400px) and (max-width: 1920px) {
.col-6xl {flex: 0 0 auto;width: 25%;}
  .call-cards .col-6xl {
        flex: 0 0 auto;
        width: 16.6%;
        height: 100%;
    }
     .call-cards .card.card-animate .card-body {
        gap: 10px;
    }
    /*.call-cards .card.card-animate .card-body .title {
        min-height: 37px;
    }*/
}

@media(max-width: 1199.98px){
.date-range {width: 100%;}
}
@media(max-width: 991.98px){
.form_main_wrap{padding: 16px;margin-bottom: 20px;}
.row-gap-custom {row-gap: 16px;}
}
@media(max-width: 575.98px){
.content{gap: 20px;padding: 20px;}
.content-wrap {gap: 20px;}
.table-container.agent-report {padding: 20px 20px 0;}
.pagination-wrap{ margin-top:-20px;}
.form-floating_one label {margin-bottom: 6px;}
.table-container.agent-report.add_client{padding:20px;}
.report-filter .report-form form .field-wrap .select_wrap  select.form-select.account{
width:100%;}
.card-space{padding: 20px;}
}