/* Sub-menu indent. Reduced from 26px now that sub-items carry an icon. */
    .nav-padding{
    padding-left:14px !important;
    }

    .background{
    background: rgba(0, 0, 0, 0.4);
    background-size: cover;
    height: 100%;
    max-height: 100%;
    }

    .text-primary-color{
      color:#1b7ae2 !important;
    }
    .text-secondary-color{
      color: #fb8c00 !important;
    }
   
    .bg-primary-color{
      background-color:#1b7ae2 !important;
    }
    .bg-secondary-color{
      background-color: #fb8c00 !important;
    }
    .bg-3{
      background-color: #8d00f7 !important;
    }
    .bg-4{
      background-color: #f7e400 !important;
    }
    .text-5{
      color: #339537 !important;
    }

    .espl-text-size{
      font-size:13px !important;
    }
    
    .espl-text-size2{
      font-size:14px !important;
    }
    
    .input-group>.form-control{
      width:100% !important;
    }

    .brand-img{
    /* width: 80px; */
    margin-top:3px;
    max-height: 5rem!important;
    }

    /* No fixed/percentage height on .sidenav-header. It is a plain block with
       visible overflow, so a box shorter than the logo + <hr> does not clip
       them - it lets them paint on top of the first menu item. Shrink the
       CONTENTS instead (.navbar-brand padding, .brand-img max-height).

       This rule is required, not just a removal: material-dashboard.min.css
       declares .sidenav-header{height:4.875rem} (78px), and this project's
       brand block - pt-3, a 5rem logo, its mb-3, the <br> and the <hr> - is
       roughly twice that. Letting the theme's height through is what makes
       the menu items collide with the horizontal rule. */
    .sidenav-header {
        height: auto;
        min-height: 0;
    }
    /* */
    .bg-color{
    background-color:#f3f3f3;
    }

    .bg-gray{
      background-color: #f5f5f5 !important;
    }

    /* .current-page{
        background-image: linear-gradient(195deg,#e91e63,#e91e63);
    } */
    .table-hover>tbody>tr:hover {
      --bs-table-accent-bg: #f6faff !important;
      color: var(--bs-table-hover-color);
  }

  .dataTable-sorter2 {
    display: none !important;
  }

.async-hide {
    opacity: 0 !important
}

.aside-img {
  height: 100% !important;
  background-image: none !important;
  background-color: white !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06) !important;
}

.navbar {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06) !important;
}


.espl-nav-link{
  padding-top: 0.45rem !important; 
  padding-bottom: 0.45rem !important;
  color:rgb(0, 0, 0) !important;
  font-weight:400 !important
}

.sidenav .navbar-brand {
  padding: 1rem 1.5rem;
}

.navbar .nav-link{
  font-size: 13px ;
}
.dataTable-wrapper .dataTable-container .table thead tr th {
  text-transform: none!important;

}

.bg-gradient-primary {
  background-image: linear-gradient(195deg, #ec407a, #d81b60);
}

.btn-white{
  background-color: white;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06) !important;
  color: #0984e3;
}

.btn-white:hover{
  color: #666666;
}
.btn-gray{
  background-color: white;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06) !important;
  color: #0984e3;
}

.btn-gray:hover{
  color: #666666;
}

/* Date pill heading a group of rows on the Dispatch Planning board, worn by an
   .btn-gray h6. Fixed width so the pills line up down the page instead of
   shrink-wrapping each date. Mirrors .task-date-size on the Daily Task board. */
.dispatch-date-size{
  width:100px;
}

/* Date pill + the day's summary chips on one line. gap spaces the chips evenly
   and, unlike a margin on each, leaves no trailing space when a chip is dropped
   for being zero. */
.dispatch-group-head{
  gap:6px;
  row-gap:6px;
}

/* Dispatch filter bar - status select, the two day presets, then the range. */
.dispatch-filter{
  gap:6px;
  row-gap:6px;
}
/* Filter controls and the summary share one line, so the row needs its own gap
   for when the summary wraps below the controls on a narrow screen. */
.dispatch-filter-row{
  gap:10px;
  row-gap:8px;
}
/* The statement of what is in force, sitting at the right of the filter bar. */
.dispatch-filter-summary{
  gap:8px;
  row-gap:4px;
}
/* The status select and the two date boxes are cut to the same pattern as the
   Today / Tomorrow buttons standing next to them, so the bar reads as one row of
   controls rather than as buttons with form fields wedged between them. The
   figures below are the theme's own: .btn gives border-radius .5rem, font-size
   .75rem and line-height 1.45, .btn-outline-info gives the #1a73e8 border, and
   the buttons' py-1 px-3 utilities give the .25rem/1rem padding. Height is left
   to the padding, exactly as it is on a button.

   padding, font-size and border-radius carry !important because this file has a
   bare `input, select` rule (around line 370) that sets all three with
   !important, and two more copies inside the @media(width:1366px) and max-width
   blocks further down. An element selector loses to a class on specificity, but
   !important outranks specificity - so without matching it here these three
   silently keep the theme's values. */
.dispatch-filter-select,
.dispatch-filter-date{
  height:auto;
  padding:.25rem 1rem !important;
  font-size:.75rem !important;
  font-weight:700;
  line-height:1.45;
  color:#1a73e8;
  background-color:#fff;
  border:1px solid #1a73e8;
  border-radius:.5rem !important;
  transition:all .15s ease-in;
}
.dispatch-filter-select{
  cursor:pointer;
}
/* Sized to the picker's own content rather than stretched to fill the bar: a
   date box only ever holds dd-mm-yyyy plus the browser's calendar button. */
.dispatch-filter-date{
  width:135px;
  flex:0 0 auto;
  min-width:0;
}
/* Deliberately no hover fill. A button may invert on hover because it is about
   to be pressed; these hold a value, and flooding them blue hides what they say
   at the moment the pointer is over them. */
.dispatch-filter-select:focus,
.dispatch-filter-date:focus{
  outline:0;
  box-shadow:0 0 0 .2rem rgba(26,115,232,.5);
}
/* A control carrying a value, filled the same way an active Today / Tomorrow
   button is - so every applied filter is visible at a glance, not just the two
   presets. */
.dispatch-filter-select.is-on,
.dispatch-filter-date.is-on{
  color:#fff;
  background-color:#1a73e8;
  border-color:#1a73e8;
}
/* The native calendar button is drawn in the browser's own dark ink, which
   disappears against the filled state. */
.dispatch-filter-date.is-on::-webkit-calendar-picker-indicator{
  filter:invert(1);
}

/* Priority chip inside a planning row - narrower and lighter than a full badge
   so it reads as a qualifier on the row, not a heading.

   Written as .badge.dispatch-badge, and with !important, because this file sets
   .badge again further down - font-size:14px at ~line 785, and font-size:8px
   !important inside the @media(width:1366px) block. Both come after this rule,
   so a plain .dispatch-badge loses on source order at equal specificity and the
   size silently does not take. The padding is trimmed along with the width; the
   theme's own .badge padding is !important too and would otherwise pad the label
   back out past the narrowed box. */
.badge.dispatch-badge{
  width:58px;
  font-size:9px !important;
  padding:2px 4px !important;
}

/* Loose / package quantities stacked in one Qty cell, one line each. Only the
   kinds an order actually has are printed, so a cell carries one line or two.
   Plain black text, left aligned - no chip or badge treatment. */
.qty-split{
  text-align:left;
  line-height:1.5;
  white-space:nowrap;
  color:#000;
}

/* Delivered / Ready to dispatch / Pending figures. Carried by colour rather than
   by a label, because the column heading already names them and three labelled
   chips per row would drown the table. Green is done, blue is packed and
   waiting, amber has not been started. */
.fulfil-cell{
  font-weight:700;
}
.fulfil-delivered{ color:#2e7d32; }
.fulfil-ready{ color:#035fe0; }
.fulfil-pending{ color:#c77700; }
/* Nothing in this state - a dash, set back so the eye passes over it. */
.fulfil-nil{
  color:#c5ccd6;
  font-weight:400;
}

@media(max-width:480px){
  .dispatch-date-size{
    width:75px !important;
  }
  .badge.dispatch-badge{
    width:48px !important;
    font-size:7.5px !important;
    padding:1px 3px !important;
  }
}

.btn-secondary{
  background-color: #6e6d6d;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06) !important;
}

.btn-secondary:hover{
  background-color: #807f7f;
}


.nav-link {
  font-weight: 500;
  font-size: 13px !important;
  color: #000000 ;
}

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
 
  color: #1b7ae2 ;
}

.nav-link:focus, .nav-link:hover {
  color: #1b7ae2;
}


.input-group.input-group-outline .form-control {
  border-top-left-radius: 0.2rem!important;
  border-bottom-left-radius: 0.2rem!important;
}


.text-dark{
  color:#000 !important;
}

#style-3::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(196, 196, 196, 0.3);
	background-color: #F5F5F5;
}

#style-3::-webkit-scrollbar
{
	width: 6px;
	background-color: #F5F5F5;
}

#style-3::-webkit-scrollbar-thumb
{
	background-color: #c7c7c7;
}

label{
  color:#000;
  font-size: 13px;
  font-weight: 500;
}
.form-head{
  background-color:white;
  top: 0;
  z-index: 1023;
  width:100%;
  box-shadow: 0 1px 0px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06) !important;

}

/* ---------------------------------------------------------------------------
   Page gutters + form card geometry.
   The card is position:fixed, so a fixed px height can never be scrolled
   into view once display scaling shrinks the CSS viewport. Size it from the
   four offsets below instead, and retune those - never add a height back.
   --------------------------------------------------------------------------- */
:root{
  --espl-page-gap: 15px;      /* left + right gutter                          */
  --espl-page-top: 63px;      /* pre-JS fallback; esplSyncPageTop() measures it */
  --espl-page-bottom: 15px;   /* bottom gutter                                */
  --espl-sidenav-w: 15.3rem;  /* space reserved for the pinned sidenav        */
  --espl-card-tail: 120px;    /* trailing scroll spacer                      */
}

.dyn-height {
  position: fixed;
  top:    var(--espl-page-top);
  left:   var(--espl-page-gap);
  right:  var(--espl-page-gap);
  bottom: var(--espl-page-bottom);
  width:  auto;
  height: auto;               /* NOT a fixed px height - the offsets size it  */
  min-height: 240px;          /* floor; only engages below ~330px of viewport */
  overflow-y: auto;           /* card scrolls internally                     */
  margin: 0 !important;       /* beat the .ms-4 / .mt-4 utilities on the card */
}

/* Only when the sidenav is pinned open (desktop) reserve its width */
@media (min-width: 1200px){
  .dyn-height{ left: calc(var(--espl-sidenav-w) + var(--espl-page-gap)); }
}

/* Trailing spacer so the last field row isn't clipped at the scroll bottom.
   padding-bottom on a scroll container isn't reliably scrollable; an in-flow
   block always is. .card is flex-column, so disable shrink. */
.dyn-height::after{ content:""; display:block; flex:0 0 auto; height:var(--espl-card-tail); }

input, select {
  height: calc(1.5em + .5rem + 2px);
  padding: .25rem .5rem !important;
  font-size: 13px!important;
  line-height: 1.5!important;
  border-radius: .2rem!important;
}

.input-group.input-group-outline .form-control {
  padding: 0.325rem 0.75rem!important;
}

.form-check:not(.form-switch) .form-check-input[type=checkbox]:checked:after {
  opacity: 1;
  padding-right: 15px;
  padding-bottom: 7px;
}

/* Offset the navbar only at the breakpoint where the sidenav is actually
   pinned, and subtract exactly the amount it is offset by - a mismatch here
   pushes the navbar past the right edge and puts the page into h-overflow. */
.navbar-main.fixed-top { background-color: white; }

@media (min-width: 1200px){
  .navbar-main.fixed-top{ margin-left: 14.125rem !important; width: calc(100% - 14.125rem); }
}
@media (max-width: 1199.98px){
  .navbar-main.fixed-top{ margin-left: 0 !important; width: 100%; }
}

.table-striped>tbody>tr:nth-of-type(odd) {
  --bs-table-accent-bg: #f6faff!important;
  color: var(--bs-table-striped-color);
}


.dataTable-wrapper .dataTable-bottom {
  padding: 1.5rem;
  padding-top: 1.5rem !important;
}
/* Shrinkable, not a flat pixel width - a fixed 300px is dead space once
   display scaling has already narrowed the viewport. */
.dataTable-wrapper .dataTable-top .dataTable-search input {
  width: 100% !important;
  max-width: 300px;
}

/* ---------------------------------------------------------------------------
   Unified DataTable styling. .dataTable-table is the class simple-datatables
   adds to every initialised table, so this styles the whole project at once
   (no per-page edits, no table-striped needed).
   --------------------------------------------------------------------------- */
.dataTable-table thead th,
.dataTable-table thead td { background-color:#1459b3 !important; color:#ffffff !important; }
.dataTable-table thead th a,
.dataTable-table thead th .dataTable-sorter,
.dataTable-table thead th button { color:#ffffff !important; }
.dataTable-table th,
.dataTable-table td { padding:10px 16px !important; }                       /* roomier cells */
.dataTable-table tbody tr:nth-child(odd) td { background-color:#fafafa; }   /* stripes */
.dataTable-container { padding:.5rem !important; }                          /* = Bootstrap p-2 */

/* Sort arrows white on the blue header (default is black at low opacity) */
.dataTable-table thead th .dataTable-sorter::before,
.dataTable-table thead th .dataTable-sorter::after { opacity:.9 !important; }
.dataTable-table thead th .dataTable-sorter::before { border-top-color:#ffffff !important; }
.dataTable-table thead th .dataTable-sorter::after  { border-bottom-color:#ffffff !important; }

/* Search box + page-length control borders */
.dataTable-selector,
.dataTable-input { border:1px solid #cfcfcf !important; border-radius:4px !important; }

/* ---------------------------------------------------------------------------
   Wide list tables: remove the overflow instead of pinning inside it.
   1. WRAPPING - a table can never be narrower than the sum of its columns'
      min-content widths. .btn carries white-space:nowrap and views hardcode
      widths on status buttons; letting text wrap collapses min-content to the
      longest word, which is what makes the table fittable.
   2. FIXED LAYOUT - stops the browser consulting content width at all. Scoped
      with :has() to tables that actually declare column widths (40 of the 53
      index views use style="width:"); a table with no hints would get every
      column split equally. Browsers without :has() keep auto layout, where
      part 1 alone still gets them to fit.
   position:sticky on the last cell is NOT an option: Chrome does not honour
   horizontally-sticky cells when the table is border-collapse:collapse.
   --------------------------------------------------------------------------- */
.dataTable-table th,
.dataTable-table td{ white-space:normal; overflow-wrap:break-word; }
.dataTable-table td .btn{ width:auto !important; min-width:0; white-space:normal; }

.table-responsive .dataTable-table:has(thead th[style*="width"]){
  table-layout:fixed; width:100% !important;
}

body{ overflow-x:hidden; }   /* safety net once the navbar math above is correct */

@media (min-width: 1200px){
  .sidenav.fixed-start+.main-content {
      margin-left: 14.125rem !important;
  }
}

/* .aside-img{
    background-image: url("http://localhost:8080/espl/admin_resource/assets/img/esp-1 copy.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    height: 100vh;

} */
.logo-text{
    height: 6.475rem;
}
.breadcrumb-item  .breadcrumb-item::before {
    float: left; 
    padding-right:2px;  
    /* color: #666666; */
    color: #000 !important;
    content: var(--bs-breadcrumb-divider, ">") /* rtl: var(--bs-breadcrumb-divider, "/") */;
}
.breadcrumbs-color{
    /* color:#b0bec5; */
    color:#000;
}
.current-page{
    background-image: linear-gradient(195deg,#1b7ae2,#1b7ae2);
    margin: 0 1rem;
    border-radius: .375rem;
    color: white !important;
}

.navbar-vertical .navbar-nav .nav-link {
  padding-left: 0 !important;
}

.navbar-vertical .navbar-nav .nav-link[data-bs-toggle=collapse]:after {
  color: black !important;
}



.optionbox {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%)
}

.optionbox select {
background: #E91E63;
color: #fff;
padding: 10px;
width: 250px;
height: 50px;
border: none;
font-size: 20px;
box-shadow: 0 5px 48px rgb(93, 15, 9);
-webkit-appearance: button;
outline: none
}

.optionbox:before {
content: '\f358';
font-family: "Font Awesome 5 free";
position: absolute;
top: 0;
right: 0;
height: 50px;
width: 50px;
background: #E91E63;
text-align: center;
line-height: 50px;
color: #fff;
font-size: 30px;
pointer-events: none
}

.optionbox:hover:before {
background: #c72059
}

.espl-overflow-wrap{
  white-space: initial !important;
}

.client-name:hover{
  color:#0984e3!important;

}

.navbar-vertical .navbar-nav>.nav-item .nav-link.active {
  background-color: hsl(0deg 0% 78% / 0%) !important;
}

/*css for image upload for album*/

.imageThumb {
    max-height: 75px;
    border: 2px solid;
    padding: 1px;
    cursor: pointer;
  }
  .pip {
    display: inline-block;
    margin: 10px 10px 0 0;
  }
.remove {
    display: block;
    background: #444;
    border: 1px solid black;
    color: white;
    text-align: center;
    cursor: pointer;
  }
  .remove:hover {
    background: white;
    color: black;
  }

 .approve-pending{
    background: orange;
    color: black;
    content: 'Pending';
  }
  
 .approved{
    background: green;
    color: black;
    content: 'Approved';
  }

  .approve-cancel{
    background: red;
    color: black;
    content: 'Cancel';
  }

  .circle {
    border-radius: 100% !important;
    overflow: hidden;
    width: 128px;
    height: 128px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    /* position: absolute; */
    top: 72px;
}

.profile-pic {
  width: 200px;
  max-height: 200px;
  display: inline-block;
}
img {
  max-width: 100%;
  height: auto;
}

.p-image {
  /* position: absolute; */
  top: 167px;
  right: 30px;
  color: #666666;
  transition: all .3s cubic-bezier(.175, .885, .32, 1.275);
}

.upload-button {
  font-size: 12px;
  font-family: Roboto, Helvetica, Arial, sans-serif !important;
}

.file-upload {
  display: none;
}

.resize-td{
  white-space: -o-pre-wrap; 
  word-wrap: break-word;
  white-space: pre-wrap; 
  white-space: -moz-pre-wrap; 
  white-space: -pre-wrap;
}

.bg_brochure{
  /* background-image: url("http://localhost:8080/mhlaxmi-TMT/admin_resource/assets/img/Rate-card1.jpg");
  background-repeat: no-repeat;
  background-size: cover; */
  background-color: greenyellow;
  height: 154vh;
}
.brochure-barnd-img{
  width: 178px;
  margin-top: 3px;
  max-height: 12rem!important;
}
.iso-img{
  width: 80px;
  margin-top:3px;
  max-height: 5rem!important;
}
.basic-rate-margin{
    margin-bottom: 5vh;
    margin-top: 5vh;
}
.dataTable-wrapper .dataTable-container .table thead tr th {
	opacity: 1!important;
}

.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  top: 150%;
  left: 50%;
  margin-left: -60px;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent black transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}
.espl-icon{
  margin-left: 10px;
  top: 20% !important;
  font-size: 2.5rem !important;
}

.login-margin-top{
  margin-top:6rem;
}

.brand-img{
  width:120px;
}



@media(max-width:480px){
  .crm-dash-upmeet{
    margin-top:18px;
    padding:0px !important;
  }
}
/* 
.navbar-brand{
  padding-top: 3rem;
} */

.logo-height{
  height:18%;
}

.report-card-height{
  height:200px;
}

.form-head{
  padding:1.5rem;
}
.report-btn-view{
  width:20%;
}
.report-btn-view2{
  width:10%;
}
.report-btn-view3{
  width:25% !important;
}
.report-btn-view4{
  width:30% !important;
}
.sign-out-btn{
  width:15%;
}
.second-list{
  padding-left: 3rem;
}
.order-section-1{
  height:838px;
}
.order-section-2{
  height:770px;
}
.order-section-3{
  height:192px;
  padding-right: 12px;
}
.order-text {
  font-size:12px;
}
.order-tableno-show{
  padding: 8px ;
}
.menu_background {
 padding-right:16px;
 padding-left: 16px ;
}
#orderno{
  padding-left: 0px ;
}
.order-table{
  height: 526px;
}
#kot_slots{
  height:848px;
  overflow-x: hidden;
    background-color: #fffaf0;
    overflow-y: auto;
}
#contentSearch{
  height:36px;
  border:1px solid #767676;
  border-radius: 14px !important;
}

.table-wrapper {
  /* max-height: 300px; scroll height */
  overflow-y: auto;
  display: block;
  padding-left: 0px;
  padding-right: 0px;
}

.fixed-header thead th {
  position: sticky;
  top: 0;
  background: #1b7ae2; /* or your theme color */
  z-index: 2;
  color: #fff;
}

/* The max-width:1199.98px navbar rule above supersedes the old 1024px one. */

.order-table-card{
  box-shadow: none;
  height: 110px;
}
.order-icon{
  height:25px;
  width:25px;
}
.espl-text-size3{
  font-size:10px;
}
.espl-text-size4{
  font-size:20px;
}
.staticBackdrop7{
  max-width: 600px;
}
.tooing-table{
  height: 490px;
}
.espl-head-text-size{
  font-size:20px;
}
.complete-order-card{
  height:200px;
}
.kitchen-card{
  height:180px ;
}
.collapse-height{
  height: 100vh;
}


/* .topmenu height removed - the sidenav flex column below sizes the menu to
   the exact remainder of the aside, so percentage guessing is unnecessary. */
.form-select {
  background-size: 13px 9px !important;
  background-color: #fff !important;
}

.badge {
  font-size:14px ;
  font-weight:500px !important;
  padding: .35em .5em !important;
}

.badge2 {
  font-size:14px ;
  font-weight:400 !important;
  padding: .35em .5em !important;
  border-radius: 6px !important;
}
.table thead th{
  padding: 8px;
}
.sub-cat-table{
  padding-bottom:100px;
}

.gst-tag{
  width:8.3%;
}

@media(width:1366px){
.collapse-height{
  height: 75vh !important;
}
.form-switch .form-check-input {
  height: 14px !important;
  width: 20px !important;
}
.sub-cat-table{
  padding-bottom:8px;
}

.form-switch .form-check-input:after {
  width: 14px !important;
  height: 14px !important;
  top: -0.5px !important;
  left: -7.8px !important;
}
.gst-tag{
  width:10%;
}
.kitchen-card{
  height: 130px !important;
}
.complete-order-card{
  height:176px !important;
}
.report-margin-top{
  margin-top: 0px !important;
}
  .navbar-vertical.navbar-expand-xs {
    max-width: 13.925rem !important;
  }
  /* navbar offset removed - the 1200px rule already sets margin and width to
     the same 14.125rem; a 14rem override here reintroduced the mismatch. */
  .collapse1{
    padding-left:0px !important;
  }
 
  .espl-text-size3{
    font-size:8px !important;
  }
  .espl-text-size4{
    font-size:16px !important;
  }
  .staticBackdrop7{
    max-width: 480px !important;
  }
  .tooing-table{
    height: 320px !important;
  }
  .my-5{
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
  }
  .order-table-card{
    box-shadow: none;
    height: 80px;
  }
  .order-icon{
    height:18px !important;
    width:18px !important;
  }
  .espl-head-text-size{
    font-size: 14px !important;
  }

  .espl-text-size{
    font-size: 12px !important;
  }

  .espl-text-size1{
    font-size: 10px !important;
  }

  .form-check-label {
    font-size: 10.5px !important;
  }

  h6{
    font-size: 13px !important;
  }

  .login-margin-top{
    margin-top: 0px !important;
  }

  .dashboard-head-pb-4{
    padding-bottom:4px !important;
  }
  .dashboard-card{
    width:254px !important;
  }
  .dashboard-card-position{
      display: flex;
      justify-content: center;
  }
  /* .espl-navbar-main offset removed - it set margin-left:15rem against
     width:calc(100% - 14rem), a 1rem mismatch that overflowed horizontally.
     The .navbar-main.fixed-top pair above handles this breakpoint. */
  .navbar-brand{
    padding-top: 1rem !important;
    /* padding-left: 2rem !important; */
    padding-right: 2rem !important;
  }
  .logo-height{
    height:14% !important;
  }
  .report-label{
    font-size:14px !important;
  }
  .report-margin-bottom{
    margin-bottom:80px !important;
  }
  .form-head{
    padding:1rem !important;
  }
  .chart-canvas{
    height: 230px !important;
  }
  .report-btn-view{
    width:60%;
  }
  .report-btn-view2{
    width:24% !important;
  }
  .report-btn-view3{
    width:34% !important;
  }
  .report-btn-view4{
    width:42% !important;
  }
  .title-label{
    margin-bottom: 1rem !important;
  }
  .sign-out-btn{
    width:22%;
  }

  .deleted-menu-margin-bottom{
    margin-bottom:6rem !important;
  }

  .espl-para-text{
    font-size:12px !important;
  }
  .espl-para-text1{
    font-size:9px !important;
  }
  .text-size{
    font-size:11px !important;
  }
  .espl-navbar-brand{
    padding-top:0px !important;
  }
  .second-list{
    padding-left: 0rem !important;
  }
  .order-section-1{
    height:538px !important;
  }
  .order-section-2{
    height:466px !important;
  }
  .order-section-3{
    height:150px; 
    padding-right:5px !important;
  }
  .order-btn-detail{
    padding-right: 8px !important;
    padding-left:8px !important;
  }
  .badge{
    font-size:8px !important;
    border-radius:6px !important;
  }

  .badge2{
    font-size:10px !important;
    border-radius:6px !important;
  }
  .order-text {
    font-size:10px;
  }
  .order-tableno-show{
    padding: 2px !important;
    border-radius: 6px !important;
  }
  .padding-right{
    padding-right: 0px !important;
  }
  .padding-left{
    padding-left: 2px !important;
  }

  label {
    font-size: 10px !important;
  }
  .menu_background {
    height: 68px !important;
    padding-right:5px !important;
    padding-left: 5px !important;
  }
  .gallery_tabs li {
    padding: 0.3rem 0.3rem !important;
  }
  input, select {
    font-size: 10px !important;
    padding: 0.25rem 0.5rem !important; /* Adjusted padding for form inputs */
  }
  .form-select {
    background-size: 13px 9px !important;
    background-color: #fff !important;
  }
  .form-control {
    background-color: #fff !important;
  }
  .espl-text-size {
    font-size: 10px !important; /* Reduced font size for smaller screen */
  }
  #online-order-no{
    padding-right:0px !important;
  }
  #orderno{
    padding-left: 3px !important;
    padding-right: 0px !important;
  }
  .table>:not(caption)>*>* {
    padding: 3px !important;
  }
  .btn{
    font-weight: 400 !important;
  }
  .btn-sm{
    font-size: 10px !important;
    height:22px;
    padding: 0.3rem 0.7rem;
  }
  .btn-changeQuantity{
    font-size: 8px !important;
    height:22px;
    padding: 0.3rem 0.7rem;
    width: 25px;
  }
  .order-table{
    height: 250px !important;
  }
  #kot_slots{
    height:543px;
  }
  .input-group.input-group-outline .form-control {
    padding: 0.3rem 0.3rem !important;
  }   
  .order-amt-padding{
    padding: 0.3rem 0.3rem !important;
  }
  #contentSearch{
    height:26px;
    border:1px solid #767676;
    border-radius: 14px !important;
  }
  .brand-img{
    width:110px !important;
  }
  .espl-nav-link {
    padding-bottom:1px !important;
  }
}
@media screen and (max-width: 1366px) and (max-height: 768px) {
  .background {
      background: rgba(0, 0, 0, 0.4);
      background-size: cover;
      height: 100%;
      max-height: 100%;
  }


  .espl-text-size2 {
      font-size: 13px !important;
  }

  .brand-img {
      margin-top: 2px;
      max-height: 4rem !important; /* Reduced size for better fit */
  }

  /* Removed from this block, all for the same reason - see the compaction
     tiers below, which shrink chrome and whitespace instead:
       .navbar-main.fixed-top  10rem offset (contradicted the 1200px rule)
       .dyn-height             height:538px (unscrollable on a fixed card)
       .dataTable-search input 250px flat width (now 100%/max-width)
       font-size shrinks on .btn-white/.btn-gray, .navbar .nav-link and
       input,select - users raise OS scaling BECAUSE they want bigger text. */

  .dataTable-wrapper .dataTable-bottom {
      padding: 1rem !important; /* Adjusted padding for smaller layout */
  }

  input, select {
      padding: 0.25rem 0.5rem !important; /* Adjusted padding for form inputs */
  }
}



@media(max-width:768px){
  .crm-dash-upmeet{
    margin-top:18px;
    padding:0px !important;
  }
  .icon-lg {
    width: 54px;
    height: 54px;
}
  .espl-icon{
    margin-left: 9px!important;
    top: 16%!important;
    font-size: 2.2rem!important;

  }
}


.first-letter {
  text-transform: capitalize
}


/* ===========================================================================
   DISPLAY SCALING (Windows 125% / 150%)
   Scaling does not shrink the screen, it shrinks the CSS pixel viewport: a
   1080px-tall screen at 150% reports 720 CSS px, and after ~90px of browser
   chrome only ~625px is usable. Because .dyn-height is position:fixed the
   overflow cannot be scrolled into view, so anything vertical tuned at 100%
   is permanently clipped.

   The rule for everything below: shrink chrome and whitespace, NEVER
   font-size. Users raise OS scaling because they need bigger text.
   =========================================================================== */

/* --- 6a. Automatic compaction tiers ------------------------------------- */
/* NOTE: these tiers must never put a height on .sidenav-header. It is a plain
   block with visible overflow, and this project's brand block (pt-3, a 5rem
   logo, its mb-3, the <br> and the <hr>) is ~150px tall - so a 7rem box does
   not clip it, it lets the logo and the <hr> paint on top of the first menu
   items. Shrink the CONTENTS and let the header size itself. */
@media (max-height: 860px){          /* 1080p at 125% */
  :root{ --espl-page-gap:10px; --espl-page-bottom:10px; --espl-card-tail:72px; }
  .navbar-main.fixed-top .container-fluid{ padding-top:.15rem !important; padding-bottom:.15rem !important; }
  .sidenav-header{ height:auto; min-height:0; }
  .sidenav .navbar-brand{ padding-top:.5rem !important; padding-bottom:.25rem !important; }
  .brand-img{ max-height:4.25rem !important; margin-bottom:.5rem !important; }
}
@media (max-height: 700px){          /* 1080p at 150%, or 1366x768 at 125% */
  :root{ --espl-card-tail:48px; }
  .sidenav-header{ height:auto; min-height:0; }
  .sidenav .navbar-brand{ padding-top:.3rem !important; padding-bottom:.15rem !important; }
  .brand-img{ max-height:3.25rem !important; margin-bottom:.25rem !important; }
  .espl-nav-link{ padding-top:.3rem !important; padding-bottom:.3rem !important; }
  .dataTable-table th, .dataTable-table td{ padding:6px 12px !important; }
}

/* --- 6c. User density toggle -------------------------------------------- */
/* :root[data-espl-density="compact"] is specificity (0,2,0) vs plain :root at
   (0,1,0), so an explicit user choice always beats the automatic tiers above
   regardless of source order. The !importants beat the Bootstrap utilities the
   views already carry (.p-4 on .form-head, .mb-4 on field wrappers, .py-1 on
   the navbar container). */
:root[data-espl-density="compact"]{ --espl-page-gap:4px; --espl-page-bottom:4px; --espl-card-tail:12px; }

/* height:auto, not a smaller fixed height - .sidenav-header has visible
   overflow, so a short box lets the logo paint over the first menu item. */
:root[data-espl-density="compact"] .sidenav-header{ height:auto; min-height:0; }
:root[data-espl-density="compact"] .sidenav .navbar-brand{ padding:.35rem .75rem !important; }
:root[data-espl-density="compact"] .brand-img{ max-height:2.75rem !important; margin-bottom:.25rem !important; }
:root[data-espl-density="compact"] .espl-nav-link{ padding-top:.18rem !important; padding-bottom:.18rem !important; }

:root[data-espl-density="compact"] .form-head{ padding:.3rem .5rem !important; }
:root[data-espl-density="compact"] .input-group.input-group-outline{ margin-bottom:.3rem !important; }
:root[data-espl-density="compact"] .navbar-main.fixed-top .container-fluid{ padding-top:.1rem !important; padding-bottom:.1rem !important; }

/* Field boxes: the base is calc(1.5em + .5rem + 2px) ~ 29.5px, this gives
   ~24px, which still clears 13px text at line-height 1.5 (19.5px). Checkboxes
   and radios are excluded - the theme sizes those itself. */
:root[data-espl-density="compact"] input:not([type="checkbox"]):not([type="radio"]),
:root[data-espl-density="compact"] select{ height:calc(1.5em + .15rem + 2px) !important; padding:0 .4rem !important; }

:root[data-espl-density="compact"] .dataTable-table th,
:root[data-espl-density="compact"] .dataTable-table td{ padding:2px 6px !important; }
:root[data-espl-density="compact"] .dataTable-container{ padding:.15rem !important; }
:root[data-espl-density="compact"] .dataTable-wrapper .dataTable-top,
:root[data-espl-density="compact"] .dataTable-wrapper .dataTable-bottom{ padding:.4rem !important; }
:root[data-espl-density="compact"] .btn-sm{ padding:.2rem .5rem !important; }

/* Bootstrap's 1.5rem column gutter is a lot of dead width once scaling has
   already shrunk the viewport. Spacing-utility overrides are scoped to
   .dyn-height so they cannot leak into cards outside the form layout. */
:root[data-espl-density="compact"] .dyn-height .row{ --bs-gutter-x:.75rem; }
:root[data-espl-density="compact"] .dyn-height .p-4{ padding:.6rem !important; }
:root[data-espl-density="compact"] .dyn-height .p-3{ padding:.45rem !important; }
:root[data-espl-density="compact"] .dyn-height .py-4{ padding-top:.6rem !important; padding-bottom:.6rem !important; }
:root[data-espl-density="compact"] .dyn-height .mb-4{ margin-bottom:.5rem !important; }
:root[data-espl-density="compact"] .dyn-height .mb-3{ margin-bottom:.35rem !important; }
:root[data-espl-density="compact"] .dyn-height .mt-4{ margin-top:.5rem !important; }

/* The toggle button itself. text-transform is reset because Material Dashboard
   uppercases every .btn - without it the label reads "SCREEN - REGULAR MODE".
   Outlined in regular, filled in compact, so the active state is obvious. */
#esplDensityToggle{
  white-space:nowrap; text-transform:none;
  font-size:13px; font-weight:500; padding:.25rem .75rem;
}
:root[data-espl-density="compact"] #esplDensityToggle{
  background-color:#1459b3; border-color:#1459b3; color:#ffffff;
}

/* --- 6d. Sidenav: one scroll area, not two ------------------------------ */
/* Material Dashboard nests two scrollports: the <aside> is 100vh/auto, and
   #sidenav-collapse-main is capped at max-height:100vh but STARTS ~10rem down,
   so its own bottom hangs below the window and its scrollbar ends off-screen -
   the last menu items become unreachable. Making the aside a flex column lets
   the header take what it needs and the list take the exact remainder. */
.sidenav.fixed-start{
  display:flex; flex-direction:column; overflow:hidden;
  /* The <aside> also carries .navbar, itself a flex ROW with align-items:center
     and justify-content:space-between. Left alone, those shrink the menu to its
     content width and shove it to the bottom. */
  flex-wrap:nowrap; align-items:stretch; justify-content:flex-start;
}
.sidenav.fixed-start .sidenav-header{ flex:0 0 auto; }
.sidenav.fixed-start #sidenav-collapse-main{
  flex:1 1 auto;
  min-height:0;                 /* load-bearing: a flex child will not shrink
                                   below its content height without it        */
  height:auto !important;       /* beat .h-auto / .h-100                      */
  max-height:none !important;   /* beat .max-height-vh-100                    */
  overflow-y:auto; overflow-x:hidden;
}