.preference-color{
  background-color:#A5DCF1 !important;
}
#profile_pref_tab , .light_gray_bg{
  background-color: #E5E8EC !important;

}
.w-10-rem{
  width: 10rem !important;
}
.w-5-rem{
  width: 5rem !important;
}
.filter-blur{
  filter: blur(2px) !important;
}
.banner{
    background-color:#eeeeee;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
}
.border-2{
  border: 2px solid  !important;
}
.border-left-2{
  border-left: 2px solid !important;
}
.border-right-2{
  border-right: 2px solid  !important;
}
.border-top-2{
  border-top: 2px solid  !important;
}
.border-bottom-2{
  border-bottom: 2px solid  !important;
}
.bg_color_yellow{
  background: #F7931E;
}
.bg_color_orange{
  background:  #FD7E14;

}  
.bg_color_pitch{
  background:  #D63384;

} 
.bg_color_purple{
  background:#432874;
}
.bg-color-pink{
  background: #F7D6E6;
}  
.bg-color-indigo{
  background: #E0CFFC;
}



.no-table-striping tbody tr,
.no-table-striping tbody tr:hover,
.no-table-striping tbody td {
    background-color: transparent !important;
}

/* .alert-success {
  color: #155724 !important;
  background-color: #d4edda !important;
  border-color: #c3e6cb !important;
}



.alert-warning {
  color: #856404 !important;
  background-color: #fff3cd !important;
  border-color: #ffeeba !important;
}

.alert-info {
  color: #0c5460 !important;
  background-color: #d1ecf1 !important;
  border-color: #bee5eb !important;
} */
.alert-danger {
  color: #721c24 !important;
  background-color: #f8d7da !important;
  border-color: #f5c6cb !important;
}
.alert-primary {
  color: #004085;              /* dark blue text */
  background-color: #cce5ff;   /* light pastel blue background */
  border-color: #b8daff;       /* border */
}

/*
    component: Boxes
-------------------------
*/
.catering_banner {
    background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)),
    url("/htdocs/assets/img/catering/caterer_banner.jpg") center/cover no-repeat;
}

.box.box-primary {
    border-top-color: #3c8dbc;
  }
  
  .box {
    position: relative;
    background: #ffffff;
    border-top: 2px solid #c1c1c1;
    margin-bottom: 20px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    width: 100%;
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
  }
  
  .box .box-header {
    position: relative;
    -webkit-border-top-left-radius: 3px;
    -webkit-border-top-right-radius: 3px;
    -webkit-border-bottom-right-radius: 0;
    -webkit-border-bottom-left-radius: 0;
    -moz-border-radius-topleft: 3px;
    -moz-border-radius-topright: 3px;
    -moz-border-radius-bottomright: 0;
    -moz-border-radius-bottomleft: 0;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    border-bottom: 0px solid #f4f4f4;
    color: #444;
    padding-bottom: 5px;
  }
  
  .box .box-header > .fa,
  .box .box-header > .glyphicon,
  .box .box-header > .ion,
  .box .box-header .box-title {
    display: inline-block;
    padding: 10px 0px 10px 10px;
    margin: 0;
    font-size: 20px;
    font-weight: 400;
    float: left;
    cursor: default;
  }
  
  .box-footer{
    margin: 3%;
  }

  .components_to_hide{
    display: none;
  }

  /* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-flex;
  width: 42px;
  height: 20px;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 15px;
  width: 15px;
  left: 6px;
  bottom: 3px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #689f38;
}

input:focus + .slider {
  box-shadow: 0 0 1px #689f38;
}

input:checked + .slider:before {
  -webkit-transform: translateX(16px);
  -ms-transform: translateX(16px);
  transform: translateX(16px);
}

.fixed-vertical-header {
  position: sticky;
  left: 0; /* Sticks the header to the left side */
  background-color: #f1f1f1; /* Add a background color to prevent text overlap */
  z-index: 1; /* Ensures the header is above scrolling content */
  border-left: 1px !important;
  border-right: 1px !important;
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}
.calendar-menu{
  width:95% !important;
  float:left !important;
 }

 .nav-menu,
    .nav-menu * {
      margin: 0;
      padding: 0;
      list-style: none;
    }
    
    .nav-menu ul {
      position: absolute;
      display: none;
      top: 100%;
      left: 0;
      z-index: 99;
    }
    
    .nav-menu li {
      position: relative;
      white-space: nowrap;
    }
    
    .nav-menu > li {
      float: left;
    }
    
    .nav-menu li:hover > ul,
    .nav-menu li.sfHover > ul {
      display:block;
    
    }
    
    .nav-menu ul ul {
      top: 0;
      left: 100%;
    }
    
    .nav-menu ul li {
      min-width: 180px;
    }
    
    /* Nav Menu Styling */
    
    .nav-menu a {
      padding: 10px 8px;
      text-decoration: none;
      display: inline-block;
      color: #555;
      font-family: "Raleway", sans-serif;
      font-weight: 700;
      font-size: 14px;
      outline: none;
    }
    
    .nav-menu li:hover > a,
    .nav-menu .menu-active > a {
      color: #50d8af;
    }
    
    .nav-menu > li {
      margin-left: 10px;
    }
    
    .nav-menu ul {
      margin: 4px 0 0 0;
      padding: 10px;
      box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
      background: rgb(211, 209, 209);
    }
    
    .nav-menu ul li a {
      padding: 10px;
      color: #333;
      transition: 0.3s;
      display: block;
      font-size: 13px;
      text-transform: none;
    }
    
    .nav-menu ul li:hover > a {
      color: #50d8af;
    }
    
    .nav-menu ul ul {
      margin: 0;
    }

  .nav-menu-cal {
    white-space: nowrap;
    overflow-x: auto !important;
    touch-action: pan-x !important;
  }
  .nav-menu-cal::-webkit-scrollbar{ 
      display: none; 
  } 
   
 .calendar-date-menu, .calendar-date-inactivemenu{
   width:75px;
   padding:0 !important;
   margin:0 !important;
   text-align:center;
   display:inline-block !important;
   float:none !important;
}
 
.nav-menu-cal li h2{ 
  font-size:1.1em;
  font-weight:bold;
  color:#333;
}

.nav-menu-cal li h3{ 
  font-size:1.5em;
  font-weight:bold;
  color:#aaa;
  margin-top:.4em;
}

.nav-menu-cal li h4{ 
  font-size:1.3em;
  font-weight:bold;
  margin-top:-.4em;
  color:#aaa;
}
   
 .calendar-active{
   background-color: #28a745;
 }

 .calendar-active h2{ 
  font-size:1.1em !important;
  font-weight:bold !important;
  color:#fff !important;
}

.calendar-active h3{ 
  font-size:1.5em !important;
  font-weight:bold !important;
  color:#fff !important;
  text-decoration: underline !important;
  margin-top:.4em !important;
}

.calendar-active h4{ 
  font-size:1.3em !important;
  font-weight:bold !important;
  margin-top:-.4em !important;
  color:#fff !important;
}


.calendar-inactive{
   background-color: #fff;
}
 
 
.horiz_left_right_arrow{
  /* position: relative; */
  display: inline-block;
  color: #50d8af;
  cursor: pointer;
}

.horiz_left_arrow{
  float:left; 
  margin-right:12px;
  margin-top:30px;
  visibility: hidden;
}
.horiz_right_arrow{
  float:right; 
  margin-right: -15px;
  margin-top: 30px;
}


.table-header-row > th{
  border: none !important;
} 
.tuck-shop-overlay-text {
  position: absolute !important;
  top: 45% !important;
  width: 100% !important;
  left: 15% !important;

}

.background-container-tuck-shop {
  position: relative !important;
  display: inline-block !important;
}
/* .background-container-tuck-shop img {
  width: 100%;
  height: 780px !important;

} */
@media (max-width:768px){
  .horiz_left_right_arrow{
    display: none;
  }
  #regeneration_plan_modal .modal-content{
    height: 75% !important;
    width: 100% !important;
  }
}
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}

/* orders ---------------------------------------------------------------------------------------------------- */
.order-wrap {
  width: 100%;
  margin-top: 20px;
  margin-bottom: 20px;
}
.order-wrap .tiles-wrap {
  overflow-y: auto;
  padding-left: 0;
  white-space: nowrap;
}
.order-wrap .tiles-wrap .tile {
  border: 1px solid #ccc;
  margin-right: 20px;
  border-radius: 5px;
  background: #fafafa;
  cursor: pointer;
  /* height: 150px; */
  width: 146px;
  display: inline-block;
}
.order-wrap .tiles-wrap .tile_new {
  background: #fafafa;
  cursor: pointer;
}
.order-wrap .tiles-wrap .tile h3 {
  margin-top: 35%;
  font-weight: 500;
  font-size: 14px;
}
.order-wrap .tiles-wrap .tile p {
  font-weight: 500;
  font-size: 12px;
}

.order-wrap .tiles-wrap .tile {
  height: 50px;
  margin-bottom: 20px;
  /* width: 29%; */
  height: 80px;
}

.order-wrap .tiles-wrap .tile h3 {
  margin-top: 15px;
}

.activeTile {
  background-color: #b9e3fb !important;
  opacity: 0.8;
}


/* order ------------------------------------------------------------------------------- */

.invoice-down-right .upi {
  text-align: center;
  padding-top: 10px;
}
.invoice-down-right .upi img {
  height: 50px;
}
.invoice-down-right .qr {
  text-align: center;
}
.invoice-down-right .qr img {
  width: 120px;
}
/* loader css */
.loader{ /* loader  */
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background: url('//upload.wikimedia.org/wikipedia/commons/thumb/e/e5/Phi_fenomeni.gif/50px-Phi_fenomeni.gif') 
              50% 50% no-repeat rgb(249,249,249);
}
.cursor-pointer {
  cursor: pointer;
}

.bg-greenBlue{
  background-color: #17a2b8;
}

.input_fields{
  width: 230px;
  height: 35px;
  border: none;
  border-radius: 2px;
  box-shadow: 0px 1px 4px 0px #00000040;
}

.actives{
  background: #007BFF;
  color: #ffffff !important;
}

.actives.day{
  background-color: white;
  border: 2px solid #007BFF !important;
  border-bottom: none !important;
  color: #007BFF !important;
  font-size: 1.1rem;
}

.actives.day:hover{
  background-color:#007BFF !important;
  color: white !important;
}

.transparent{
  opacity: 0 !important;
}
.pointer-cursor{
  cursor: pointer !important;
}
.overlay{
  position: absolute;
  top: 0;
  left:0;
  z-index:1;
  bottom:0;
  right:0;
  height:100%;
}

/* The switch - the box around the slider */
.service-switch {
  position: relative;
  display: inline-block;
  width: 45px;
  height: 19px;
}

/* Hide default HTML checkbox */
.service-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.service-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.service-slider:before {
  position: absolute;
  content: "";
  height: 11px;
  width: 11px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .service-slider {
  background-color: #689f38;
}

input:focus + .service-slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .service-slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.service-slider.service-round {
  border-radius: 34px;
}

.service-slider.service-round:before {
  border-radius: 50%;
}

.pac-container {
  z-index: 10000 !important;
}

.semi-meter-top-bar{
  width: 30px;
  height: 30px;
  border-left: #FA0105 30px solid;
  border-right: #00B14C 30px solid;
  border-top: #FFD93B 30px solid;
  border-top-left-radius: 60px;
  border-top-right-radius: 60px;
}


.semi-meter-background{
  width: 50px;
  height: 25px;
  position: relative;
  background-color: #f8f9fa;
  border-top-left-radius: 25px;
  border-top-right-radius: 25px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  top: -25px;
  left: -25px;
}

.semi-meter-niddle{
  width: 0;
  height: 0;
  border-left: #f8f9fa 2.22px solid;
  border-right: #f8f9fa 2.22px solid;
  border-top: #484848 20px solid;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.semi-meter-niddle-hing{
  width: 3px;
  height: 3px;
  background-color: #f8f9fa;
  border-radius: 3px;
  border: #484848 1px solid;
  margin-top: -3px;
  margin-left: 0.5px;
}

.semi-meter-niddle-container{
  transform-origin: bottom center;
  margin-bottom: 2px;
  transform: rotate(-90deg);
}

.progress-bar-background{
  width: 50%;
  position: absolute;
  height: 100%;
}

.progress-bar-data-container{
  z-index: 10;
}

.flex-full{
  flex: 1;
}
#regeneration_plan_modal .modal-content{
  height: 490px ;
  width: 579px ;
}
.available_amt_detail{
  background: #FFF3ED;
}
.buy_meal {
  background: linear-gradient(90deg, #1E8FF7 0%, #24B3F1 93.32%);
}
.content {
  border-radius: 20px !important;
}
.border-bottom-left{
  border-bottom-left-radius: 0.25rem !important;
}
.border-bottom-right{
  border-bottom-right-radius: 0.25rem !important;
}

@media only screen and (min-width: 1025px) {
  #ts_order_summary .modal-content,
  #ts_order_approval_summary .modal-content,
  .ts_order_approval_history .modal-content{
    min-height: 200px ;
    min-width: 800px ;
    margin: auto;
  }

}
.truncate-text{
  width: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

/* Login Page */
.login-form .form-control {
    padding: 12px 16px;
    border-radius: 12px;
    border: 1px solid #d1d5db;
}
.login-form .form-control:focus {
    border-color: #FF6B35;
    box-shadow: 0 0 0 3px rgba(255,107,53,0.1);
}
.login-form .form-check-input:checked {
    background-color: #FF6B35;
    border-color: #FF6B35;
}
.login-form .btn-primary {
    background: #FF6B35;
    border: none;
    border-radius: 12px;
    box-shadow: 0 10px 15px -3px rgba(255, 107, 53, 0.3);
}
.login-form .btn-primary:hover {
    background: #e55a2b;
}
.login-split-layout {
    min-height: calc(100vh - 80px);
    max-width: 90rem;
    margin: 40px auto;
    display: flex;
    border-radius: 24px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    overflow: hidden;
}

.login-left-panel {
    width: 41.67%;
    background: url('https://images.unsplash.com/photo-1550745165-9bc0b252726f?auto=format&fit=crop&q=80&w=1200') center/cover;
    padding: 48px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
}

.login-left-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(15, 23, 42, 0.9), rgba(15, 23, 42, 0.7));
}

.login-left-panel > * { position: relative; z-index: 1; }

.login-brand-logo { margin-bottom: 40px; }
.login-brand-logo .brand-image { max-width: 180px; }

.login-benefit-item { display: flex; margin-bottom: 24px; }
.login-benefit-icon {
    width: 40px; height: 40px;
    background: rgba(255,107,53,0.2);
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    color: #fb923c; margin-right: 16px; flex-shrink: 0;
}

.login-benefit-content h4 { color: #fff; font-size: 18px; font-weight: 600; margin-bottom: 4px; }
.login-benefit-content p { color: rgba(255,255,255,0.7); font-size: 14px; margin: 0; }
.login-copyright { color: rgba(255,255,255,0.4); font-size: 12px; margin-top: 24px; }

.login-right-panel {
    width: 58.33%;
    padding: 32px 64px;
    display: flex; flex-direction: column; justify-content: center;
    background: #fff;
}

.login-right-inner { max-width: 28rem; margin: 0 auto; width: 100%; }
.login-header { margin-bottom: 32px; }
.login-header h2 { font-size: 30px; font-weight: 700; color: #111; margin-bottom: 8px; }
.login-header p { color: #666; font-size: 14px; margin: 0; }

.login-google-btn {
    display: flex; align-items: center; justify-content: center; gap: 12px;
    width: 100%; padding: 12px;
    border: 1px solid #d1d5db; border-radius: 12px;
    background: #fff; font-weight: 500; color: #333; text-decoration: none; margin-bottom: 24px;
}
.login-google-btn:hover { background: #f9fafb; }
.login-google-btn img { width: 20px; height: 20px; }

.login-divider { display: flex; align-items: center; margin-bottom: 24px; }
.login-divider::before, .login-divider::after { content: ''; flex: 1; height: 1px; background: #e5e7eb; }
.login-divider span { padding: 0 16px; color: #9ca3af; font-size: 14px; }

.login-error-msg {
    background: #fee; color: #dc2626;
    padding: 12px; border-radius: 8px; margin-bottom: 16px; font-size: 14px;
}

/* Testimonials */
.login-testimonials-section { border-top: 1px solid #f3f4f6; padding-top: 40px; }
.login-testimonials-header { text-align: center; margin-bottom: 24px; }
.login-testimonials-header h3 { font-size: 16px; font-weight: 700; color: #111; margin: 0; }

.login-testimonials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.login-testimonial-card {
    background: #f9fafb; border-radius: 16px; padding: 16px;
    border: 1px solid #f3f4f6;
    display: flex; flex-direction: column; justify-content: space-between;
    min-height: 160px;
}
.login-testimonial-rating { color: #FF6B35; font-size: 11px; margin-bottom: 8px; }
.login-testimonial-text { font-size: 12px; color: #4b5563; line-height: 1.5; margin-bottom: 12px; font-style: italic; }
.login-testimonial-author { display: flex; align-items: center; gap: 8px; }
.login-testimonial-avatar { width: 32px; height: 32px; min-width: 32px; border-radius: 50%; overflow: hidden; border: 1px solid #fff; }
.login-testimonial-avatar img { width: 100%; height: 100%; object-fit: cover; }
.login-testimonial-info h5 { font-size: 11px; font-weight: 700; color: #111; margin: 0; }
.login-testimonial-info p { font-size: 10px; color: #9ca3af; margin: 0; }

.login-footer { text-align: center; color: #9ca3af; font-size: 12px; font-style: italic; margin-top: 24px; margin-bottom: 48px; }

/* Responsive */
@media (max-width: 991px) {
    .login-split-layout { flex-direction: column; border-radius: 0; box-shadow: none; max-width: 100%; }
    .login-left-panel { width: 100%; padding: 40px 24px; min-height: auto; overflow-y: auto; }
    .login-brand-logo { margin-bottom: 40px; justify-content: center; }
    .login-benefit-item { margin-bottom: 24px; }
    .login-benefit-icon { width: 36px; height: 36px; font-size: 16px; }
    .login-benefit-content h4 { font-size: 16px; }
    .login-benefit-content p { font-size: 13px; }
    .login-copyright { text-align: center; }
    .login-right-panel { width: 100%; padding: 32px 24px; }
    .login-header h2 { font-size: 24px; }
    .login-testimonials-grid { grid-template-columns: 1fr; }
    .login-testimonial-card { margin-bottom: 12px; }
}