@media only screen and (min-width: 1901px) {
     
}

@media only screen and (min-width: 1401px) and (max-width: 1900px){ 
    :root{
      --baseFS: 14px;
      --autoWidth: 104em; 
    }
     
}

/*start of = (min-width: 1366px) and (max-width: 1440px)*/
@media only screen and (min-width: 1366px) and (max-width: 1400px){
    :root{
        --baseFS: 11.5px;
        --autoWidth: 104em; 
      } 


/*end of = (min-width: 1366px) and (max-width: 1900px)*/			
}





 
/*start of = (min-width: 1280px) and (max-width: 1365px)*/	
@media only screen and (min-width: 1280px) and (max-width: 1365px){

    :root{
        --baseFS: 11px;
        --autoWidth: 104em; 
      } 
    
/*end of = (min-width: 1280px) and (max-width: 1365px)*/			
}





/*start of = (min-width: 1024px) and (max-width: 1279px)*/
@media only screen and (min-width: 1024px) and (max-width: 1279px){

   
	
body { -webkit-text-size-adjust:none;  -webkit-overflow-scrolling: touch; }

:root{
    --baseFS: 10.5px;
    --autoWidth: 104em; 
  } 
 
/*end of = (min-width: 1024px) and (max-width: 1279px)*/			
}


/*start of = (min-width: 768px) and (max-width: 1023px)*/	
@media only screen and (min-width: 768px) and (max-width: 1023px){
  :root{
    --baseFS: 10.5px;
    --autoWidth: 104em; 
    --fs18: 1em;
    --fs20: 1.1em;
    --fs106: 5em;
    --fs96: 4em;
  }
 
body { -webkit-text-size-adjust:none; -webkit-overflow-scrolling: touch; overflow-x: hidden; }




.mobHeader{ display: block; }
      .mobHeader .logo{ flex: 1; display: flex; align-items: center; justify-content: center; }
      .side_bar_header{ display: flex; align-items: center; justify-content: space-between; position: fixed; top: 0px;  width: 100%; z-index: 99; background-color: #1f2937; }
      .mob_menuBtn { display: flex; }
      .open_mobile_menu {  overflow: hidden; }  
 
      .dashboard_main{ display: block; }
      
      .content{ width: 100%; padding-left: 0px; padding-top: 80px; }
      .content_inner{ padding-left: 0px; padding-right: 0px; }
     
      .side_bar{ display: none; position: fixed; top: 0px; left: 0px; padding: 80px 20px 15px;  -webkit-backdrop-filter: blur(90.5px); backdrop-filter: blur(90.066588401794434px);   }
  
  
      .isOpenMenu .side_bar { display: block; padding-left: 0px; padding-right: 0px; width: 260px; z-index: 999; }
 
      .side_bar_content{ background-color: #1f2937; }
      .nav_links{ height: calc(100vh - 210px); }

      .menu-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 998; opacity: 0; visibility: hidden; transition: opacity 0.3s ease }
      
      .isOpenMenu .menu-overlay { opacity: 1; visibility: visible; } 

      .isOpenMenu{ overflow: hidden;}  
      .side_bar_footer{ max-width: 260px; background-color: #1f2937; }


      .calendar-container .calendar-grid{ min-width: 1000px; }
 

/* end 768 */
}


@media only screen and (min-width:0px) and (max-width:767px){
   
    body { -webkit-text-size-adjust:none; -webkit-overflow-scrolling: touch; overflow-x: hidden; }


    :root{
        --baseFS: 11px; 
        --fs16: 1.2em;
        ----fs18: 1.4em;
        --autoWidth: 104em; 
        --fs106: 3.625em;
        --fs96: 2.8em;
        --fs58: 2.8em;
        --fs62: 2.8em;
        --fs28: 1.5em;
        
      }

      .mobHeader{ display: block; }
      .mobHeader .logo{ flex: 1; display: flex; align-items: center; justify-content: center; }
      .side_bar_header{ display: flex; align-items: center; justify-content: space-between; position: fixed; top: 0px;  width: 100%; z-index: 99; background-color: #1f2937; }
      .mob_menuBtn { display: flex; }
      .open_mobile_menu {  overflow: hidden; }  
 
      .dashboard_main{ display: block; }
      
      .content{ width: 100%; padding-left: 0px; padding-top: 80px; }
      .content_inner{ padding-left: 0px; padding-right: 0px; }
     
      .side_bar{ display: none; position: fixed; top: 0px; left: 0px; padding: 80px 20px 15px;  -webkit-backdrop-filter: blur(90.5px); backdrop-filter: blur(90.066588401794434px);   }
  
  
      .isOpenMenu .side_bar { display: block; padding-left: 0px; padding-right: 0px; width: 260px; z-index: 999; }
 
      .side_bar_content{ background-color: #1f2937; }
      .nav_links{ height: calc(100vh - 210px); }

      .menu-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 998; opacity: 0; visibility: hidden; transition: opacity 0.3s ease }
      
      .isOpenMenu .menu-overlay { opacity: 1; visibility: visible; } 

      .isOpenMenu{ overflow: hidden;}  
      .side_bar_footer{ max-width: 260px; background-color: #1f2937; }


      .page_header{ display: block; }
      .page_header_left{ padding-bottom: 14px; }

      .notes_sec_heading{ display: block; } 
      .notes_sec_heading .card_btns{ padding-top: 16px; }
      .notes_sec_heading .card_btns ul{ flex-wrap: wrap; } 
      .card_btns ul{ flex-wrap: wrap; }

      .step-panel{ padding: 20px; }

      .steps_form{ padding-top: 20px; }
      .step-footer .row{ gap: 16px; }

      .customer_import_view_steps{ padding-bottom: 20px; }

      .dropdown_menu{ margin-bottom: 20px; }

      .timeOff_dateOverride_left .row{ gap: 10px; }

      .team_performance_content ul li{ width: 50%; }
      .vehicle_size_content .row{ gap: 16px; }


      .filter_box_content .row{ flex-direction: column; gap: 20px; }

      .calendar-container .calendar-grid{ min-width: 1000px; }

      .calender_page_wrapper{ padding: 24px 16px; }
    .calendar-container .calendar-header {
        flex-direction: column;
        padding: 20px 10px;
    }

    .calendar-container .current-month {
        font-size: 22px;
    }

    .calendar-container .calendar-day {
        min-height: 40px;
        font-size: 12px;
    }

    .calendar-container .day-number {
        font-size: 12px;
    }

    .calendar-container .event {
        font-size: 10px;
    }

    .calendar-container .view-options {
        width: 100%;
        justify-content: center;
    }
 
   
}
 
 

@media only screen and (min-width:321px) and (max-width:420px){
    .time-inputs{ gap: 5px; }
    .time-input{ padding: 8px 8px; font-size: 12px; }
    .team_performance_content ul li{ width: 100%; }
    
}




@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 812px) 
and (-webkit-device-pixel-ratio : 3)
and (orientation : landscape)  {  

 


}

@supports (-webkit-touch-callout: none) {
    html, body {
        overflow-x: hidden;  
    }
}