@charset "UTF-8";
:root {
    --bs-blue: #0d6efd;
    --bs-indigo: #6610f2;
    --bs-purple: #6f42c1;
    --bs-pink: #d63384;
    --bs-red: #dc3545;
    --bs-orange: #fd7e14;
    --bs-yellow: #ffc107;
    --bs-green: #198754;
    --bs-green-light: #04AA6D;
    --bs-teal: #20c997;
    --bs-cyan: #0dcaf0;
    --bs-white: #fff;
    --bs-gray: #6c757d;
    --bs-gray-dark: #343a40;
    --bs-primary: #15a362;
    --bs-secondary: #5d6778;
    --bs-success: #5cb377;
    --bs-danger: #d26d69;
    --bs-warning: #EEBF41;
    --bs-info: #5b99ea;
    --badge-open: #007bff;       
    --badge-inprogress: #17a2b8; 
    --badge-hold: #ffc107;      
    --badge-sendback: #fd7e14;  
    --badge-closed: #030303;     
    --badge-completed: #28a745;  
    --badge-cancelled: #dc3545; 
    --badge-pending: #6610f2;   
    /* Priority colors */
    --badge-high: #dc3545;    /* Red */
    --badge-medium: #ffc107;  /* Yellow */
    --badge-low: #28a745;     /* Green */ 
    --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0))
}
*,*::before,*::after {    box-sizing: border-box}

form { font-family: var(--vz-font-family-form) !important;}
.form-bold .form-control,.form-bold .form-select { font-weight: 500;}

/* Font size utility classes based on 16px = 1rem */
.fs-10 { font-size: 0.625rem; }   /* 10px */
.fs-11 { font-size: 0.6875rem; }  /* 11px */
.fs-12 { font-size: 0.75rem; }    /* 12px */
.fs-13 { font-size: 0.8125rem; }  /* 13px */
.fs-14 { font-size: 0.875rem; }   /* 14px */
.fs-15 { font-size: 0.9375rem; }  /* 15px */
.fs-16 { font-size: 1rem; }       /* 16px */
.fs-18 { font-size: 1.125rem; }   /* 18px */
.fs-20 { font-size: 1.25rem; }    /* 20px */
.fs-22 { font-size: 1.375rem; }   /* 22px */
.fs-24 { font-size: 1.5rem; }     /* 24px */
.fs-26 { font-size: 1.625rem; }   /* 26px */
.fs-28 { font-size: 1.75rem; }    /* 28px */
.fs-30 { font-size: 1.875rem; }   /* 30px */
.fs-32 { font-size: 2rem; }       /* 32px */
.fs-36 { font-size: 2.25rem; }    /* 36px */
.fs-40 { font-size: 2.5rem; }     /* 40px */
.fs-44 { font-size: 2.75rem; }    /* 44px */
.fs-48 { font-size: 3rem; }       /* 48px */
.fs-52 { font-size: 3.25rem; }    /* 52px */
.fs-56 { font-size: 3.5rem; }     /* 56px */
.fs-60 { font-size: 3.75rem; }    /* 60px */
.fs-64 { font-size: 4rem; }       /* 64px */

.page-content.dailylogfrm { margin-top: 45px !important;}
.section-header {padding: 0.5rem 1rem;color: white;border-radius: 0.375rem 0.375rem 0 0;user-select: none;}
.section-header.slate     { background: #4A5A6A; color: #F0F0F0; }
.section-header.steel     { background: #5A8FBD; color: #FFFFFF; }
.section-header.teal      { background: #4C7C75; color: #E8F1F0; }
.section-header.dusty     { background: #758DA3; color: #FFFFFF; }
.section-header.warmgray  { background: #8D8D8D; color: #222222; }
.section-header.storm     { background: #617D98; color: #E6EBEF; }
.section-header.moss      { background: #7A8F72; color: #F0F5E9; }
.section-header.clay      { background: #A07855; color: #FAF6F0; }
.section-header.dusk      { background: #5E506A; color: #E8E4F0; }
.section-header.sand      { background: #BCAAA4; color: #403B38; }
.section-header.sky       { background: #A3C9D9; color: #2F4F4F; }
.section-header.mint      { background: #BCE3CC; color: #2E3E33; }
.section-header.blush     { background: #EAD8D7; color: #4D3D3D; }
.section-header.cloud     { background: #DCE3E8; color: #3A4B58; }
.section-header.almond    { background: #EADFCB; color: #4A4033; }
.section-header.charcoal  { background: #2E3A47; color: #FFFFFF; }  /* deep charcoal */
.section-header.graphite  { background: #3E4C59; color: #EAEAEA; }  /* graphite gray */
.section-header.platinum  { background: #E5E5E5; color: #2C2C2C; }  /* light platinum */
.section-header.ash       { background: #B0B8C1; color: #1E1E1E; }  /* cool ash */
.section-header.fog       { background: #CED4DA; color: #2A2A2A; }  /* muted fog */
.section-header.ink       { background: #1B1F23; color: #F8F9FA; }  /* nearly black */
.section-header.porcelain { background: #F3F4F6; color: #333333; }  /* off-white modern */
.section-header.cobalt    { background: #345995; color: #FFFFFF; }  /* crisp cobalt */
.section-header.forest    { background: #2F5D50; color: #ECF4F1; }  /* strong green */
.section-header.brick     { background: #943A2F; color: #FFFFFF; }  /* bold earthy red */
.section-header.amber     { background: #FFBF00; color: #222222; }  /* rich amber */
.section-header.lavender  { background: #C2C5E1; color: #2E2E3A; }  /* soft lavender */
.section-header.periwinkle{ background: #A7B8E0; color: #1A2330; }  /* light periwinkle */
.section-header.ivory     { background: #FDF8F2; color: #3E3E3E; }  /* ivory clean */
.section-header.cement    { background: #A5A5A5; color: #1F1F1F; }  /* industrial gray */
.section-header h5 {
font-size: 0.785rem;
font-weight: 500;
color: inherit; /* inherit color from parent */
margin: 0;      /* optional reset */
}
.permit-item {
display: flex;
align-items: center;
margin-bottom: 8px;
}
.permit-item label {
margin-left: 5px; font-size: 0.8125rem; padding-top: 8px;
flex: 1;
}
.permit-code {
width: 150px;
margin-left: 10px;
}
#app_date_time {padding: .55rem 0; font-weight: 500;}
.ri-time-line {font-size: 1rem; }
.privilege-box {
    min-width: 180px;  /* adjust based on your layout */
}
.tabledropicon {
  position: relative;
  overflow: visible !important; /* allow dropdown to be visible outside */
}
.table .dropdown-item {
  font-weight: 500;
}
.table .dropdown-menu i {
  font-size: 0.82rem; font-weight: 500;
}
.header-select{ background-color: transparent; border: 0;color: #06038D !important;
height: calc(3rem + calc(var(--vz-border-width) * 2)) !important;
min-height: calc(3rem + calc(var(--vz-border-width) * 2)) !important;
}
.header-select-label{color: #333 !important;}
.header-select-label::after {
  background-color:transparent !important
}

.logo_txt { letter-spacing: 2.5px; font-size: 2.5rem; margin-bottom: 0;}

.sticky-md-top{top:0}
.sticky-md-bottom,.sticky-md-top{position:-webkit-sticky;  position:sticky;  z-index:1}
.sticky-md-bottom{bottom:0}
.stickybar { scroll-margin-top:100px!important}

.section {padding: 20px;background-color: #f8f9fa; padding-top:100px}
.top-100px { top:110px;}
.scroll-mt-100{scroll-margin-top:110px!important}
.account-settings-page { padding-bottom: 20px !important;}
.custom_upload  {position: relative;overflow: hidden;}
.custom_upload input {position: absolute;font-size: 50px;opacity: 0;right: 0;top: 0;}
.logo_preview {width:150px; height:auto;}
#settingsSection,#vnav{ height: calc(100vh - 150px);}

.form-control-md {
  padding: 0.375rem 0.75rem; /* Medium padding */
  font-size: 0.75rem;        /* Slightly smaller than default (1rem) */
  line-height: 1.5;
  border-radius: 0.3rem;      /* Optional: rounder corners */
}
.scrollspy{list-style:none;padding-left:0;}
.scrollspy li.section_title { color:#fff;padding:.525rem 1.25rem; font-weight: 500;
  background-color: #5A8FBD;  font-size: 0.785rem;}
.scrollspy li a{border-left:2px solid transparent;color:#000; font-weight: 500;
display:block;padding:.785rem 1.25rem;position:relative; font-size: 0.8125rem;}
.scrollspy li a.disabled,.scrollspy li a:disabled{background-color:var(--bs-list-group-disabled-bg);
color:var(--bs-list-group-disabled-color);pointer-events:none}
.scrollspy li.active a,.scrollspy li:focus a,.scrollspy li:hover a{color:var(--bs-link-color)}
.scrollspy li.active a{
  border-color:#00a15d;
  background-color: rgba(0, 161, 93, 0.1);
  font-weight: 500;
}
.scrollspy li a > i { font-size: 1.0625rem; padding-right: 10px;}

.listgroup-item {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;  /* allow wrapping */
  align-items: flex-start; /* align to top */
  margin-bottom: 10px;
}
.listgroup-item > .invalid-feedback {
  display: block !important;
  width: 100%;
  margin-top: 4px;
  color: red;
  font-size: 0.9em;
  text-align: right;
}
.permit-input {
  width: 150px;
}
.form-switch-input { width: 100px;}

.form-switch-input .form-check-input {
  width: 100px;
  height: 30px;
  position: relative;
}

.form-switch-input .form-check-input:before {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  color: #000;
  font-weight: 600;
  font-size: 0.75rem;
  pointer-events: none;
  transition: opacity 0.3s ease;
  opacity: 1;
  z-index: 2;
  width: 100px;
  text-align: right;
}
.form-switch-input .form-check-input:checked:before {
  left: auto;
  color: #000;
  left: 8px;
  text-align: left;
}

.form-switch-input .taxtype:before {
  content: 'Exclusive';
}
.form-switch-input .taxtype:checked:before {
  content: 'Inclusive';
}

.form-switch-input .disctype:before {
  content: 'INR';
  font-size: 0.8125rem;
}
.form-switch-input .disctype:checked:before {
  content: 'PCT(%)';
  font-size: 0.8125rem;
}

.form-check-input-md {
  width: 1.2rem;
  height: 1.2rem;
}
.form-check-input-md + .form-check-label {
    padding:2px 0 0 5px; 
}
.form-check-outline .form-check-input-md:checked[type=checkbox]::before {
   font-size: 0.875rem;
   left: 2px;
}

.limited-textarea-wrapper {position: relative;display: inline-block;}
.limited-textarea {box-sizing: border-box;padding-bottom: 24px; /* space for counter */}
.charCount {position: absolute;bottom: 4px;right: 8px;font-size: 0.625rem;color: #585858;pointer-events: none;transition: color 0.2s ease;}
.charCount.warning {color: red;font-weight: bold;}

/* Font Colors */
.text-red      { color: #e74c3c; }   /* Tomato Red */
.text-green    { color: #27ae60; }   /* Emerald Green */
.text-blue     { color: #3498db; }   /* Bright Blue */
.text-yellow   { color: #f1c40f; }   /* Sunflower Yellow */
.text-orange   { color: #e67e22; }   /* Carrot Orange */
.text-purple   { color: #9b59b6; }   /* Amethyst Purple */
.text-pink     { color: #fd79a8; }   /* Light Pink */
.text-teal     { color: #1abc9c; }   /* Strong Teal */
.text-gray     { color: #7f8c8d; }   /* Grayish */
.text-black    { color: #000000; }
.text-white    { color: #ffffff; }
.text-brown    { color: #8e44ad; }   /* Rich Brownish Purple */
.text-cyan     { color: #00cec9; }
.text-lime     { color: #a3e635; }

/* Additinal Colors */
.text-desert-orange { color: #E27D60; } /* Pinterest's rustic hue */
.text-moss-green    { color: #6A7F47; } /* Pinterest's earthy tone */
.text-mocha-brown   { color: #6F4F37; } /* Pinterest's coffee-inspired shade */
.text-electric-blue { color: #00A9E0; } /* Cleo's electric blue */
.text-hot-orange    { color: #FF6F20; } /* Bonjour Paris' hot orange */
.text-lemon-lime    { color: #D4E157; } /* VerticalLoop's lemon-lime */
.text-retro-burgundy { color: #8C2B32; } /* Deep red reminiscent of vintage tones */
.text-mustard-yellow { color: #EBB045; } /* Warm mustard for a retro feel */
.text-digital-lavender { color: #B497BD; } /* Soft lavender for a calming effect */
.text-soft-pastel      { color: #F1C6D4; } /* Light pastel pink for a gentle touch */
.text-poison-green { color: #A3EA71; } /* Vibrant green for a bold statement */
.text-cobalt-blue  { color: #2628DD; } /* Electric blue for a futuristic vibe */
.text-metallic-gray { color: #CACACA; } /* Sleek gray for a minimalist design */
/* Background Colors */
.bg-red           { background-color: #e74c3c; }   /* Tomato Red */
.bg-green         { background-color: #27ae60; }   /* Emerald Green */
.bg-blue          { background-color: #3498db; }   /* Bright Blue */
.bg-yellow        { background-color: #f1c40f; }   /* Sunflower Yellow */
.bg-orange        { background-color: #e67e22; }   /* Carrot Orange */
.bg-purple        { background-color: #9b59b6; }   /* Amethyst Purple */
.bg-pink          { background-color: #fd79a8; }   /* Light Pink */
.bg-teal          { background-color: #1abc9c; }   /* Strong Teal */
.bg-gray          { background-color: #7f8c8d; }   /* Grayish */
.bg-black         { background-color: #000000; }
.bg-white         { background-color: #ffffff; }
.bg-brown         { background-color: #8e44ad; }   /* Rich Brownish Purple */
.bg-cyan          { background-color: #00cec9; }
.bg-lime          { background-color: #a3e635; }
.bg-desert-orange     { background-color: #E27D60; }
.bg-moss-green        { background-color: #6A7F47; }
.bg-mocha-brown       { background-color: #6F4F37; }
.bg-electric-blue     { background-color: #00A9E0; }
.bg-hot-orange        { background-color: #FF6F20; }
.bg-lemon-lime        { background-color: #D4E157; }
.bg-retro-burgundy    { background-color: #8C2B32; }
.bg-mustard-yellow    { background-color: #EBB045; }
.bg-digital-lavender  { background-color: #B497BD; }
.bg-soft-pastel       { background-color: #F1C6D4; }
.bg-poison-green      { background-color: #A3EA71; }
.bg-cobalt-blue       { background-color: #2628DD; }
.bg-metallic-gray     { background-color: #CACACA; }
textarea {resize: none;}
.prevent-select {
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
}
.center-content {display: flex;justify-content: center;align-items: center;height: 100vh;}
.eqaual-height-columns {display: flex;justify-content: space-around;align-items: stretch;}
.grid-container {display: grid;grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));gap: 10px;}
.center-positioned {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}
.responsive-text {font-size: calc(16px + 1vw);}
.responsive-img {width: 100%;height: auto;aspect-ratio: 16 / 9;}
.sticky-header {position: sticky;top: 0;background-color: #fff;z-index: 100;}
.fullscreen-bg {background-size: cover;background-position: center;width: 100vw;height: 100vh;}

#ivprod_list{ position:absolute; top:50; z-index: 999;}
.rupeesymbol{ font-family: var(--vz-font-family-rupee);}


.listbox { margin:0; padding:0; width: 100%; display:flex; flex-wrap: wrap; justify-content: space-between; gap: 10px;}
.listbox div{ padding: 5px 0;  flex: 1 1 calc(33.333% - 10px); box-sizing: border-box;}
.listbox .addr {flex: 1;}
.listbox .title {color: #626567; display:block; font-size: 0.725rem;}
.listbox .descr {color: #000; display: block; font-size:0.865rem; font-weight: 500;}




.table thead.charcoal   { background: #2E3A47; color: #FFFFFF; }  /* deep charcoal */
.table thead.graphite   { background: #3E4C59; color: #EAEAEA; }  /* graphite gray */
.table thead.platinum   { background: #E5E5E5; color: #2C2C2C; }  /* light platinum */
.table thead.ash        { background: #B0B8C1; color: #1E1E1E; }  /* cool ash */
.table thead.fog        { background: #CED4DA; color: #2A2A2A; }  /* muted fog */
.table thead.ink        { background: #1B1F23; color: #F8F9FA; }  /* nearly black */
.table thead.porcelain  { background: #F3F4F6; color: #333333; }  /* off-white modern */
.table thead.cobalt     { background: #345995; color: #FFFFFF; }  /* crisp cobalt */
.table thead.forest     { background: #2F5D50; color: #ECF4F1; }  /* strong green */
.table thead.brick      { background: #943A2F; color: #FFFFFF; }  /* bold earthy red */
.table thead.amber      { background: #FFBF00; color: #222222; }  /* rich amber */
.table thead.lavender   { background: #C2C5E1; color: #2E2E3A; }  /* soft lavender */
.table thead.periwinkle { background: #A7B8E0; color: #1A2330; }  /* light periwinkle */
.table thead.ivory      { background: #FDF8F2; color: #3E3E3E; }  /* ivory clean */
.table thead.cement     { background: #A5A5A5; color: #1F1F1F; }  /* industrial gray */


.table tr .slno { width: 50px; text-align: center;}
.table tr .date{ width: 110px;}
.table tr .status{ width: 70px; text-align: center;}

/* Sticky Actions column on right */
.table th.sticky-col,.table td.sticky-col {position: sticky;right: 0;z-index: 5;min-width: 120px;max-width: 120px;
white-space: nowrap; text-align: center;}
thead.platinum th.sticky-col{background-color: #E5E5E5;}
.table td.sticky-col{background-color: #fff;}
/* Raise z-index on hover so it doesn't get overlapped */
.table tr:hover td.sticky-col,
.table tr:focus-within td.sticky-col {
    z-index: 10;
}
.table td.sticky-col .dropdown-menu {
    z-index: 1050; /* Bootstrap standard */
    position: absolute; /* So it's not confined inside td */
}

#column-list li {
      list-style: none;
      padding: 5px 10px;
      border: 1px solid #ccc;
      margin-bottom: 4px;
      background: #f8f9fa;
      border-radius: 4px;
      cursor: move;
    }
  .border-black { border-color: #878a99 !important;}



#myalert{ z-index:999999; font-size:var(--vz-font-base); padding:15px; 
width: calc(100% - 100px); letter-spacing:0.07rem;}
.myalert-top{position: fixed;top: 50px; left:50px;}
.myalert-bottom{position: fixed;bottom: 100px;left:50px;}
#myalert a.close{ position: absolute; right: 10px; font-size: 1.5rem; top:5px; color:#fff;}

.btn-group .btn:not(:last-child) {border-right: none;}
.btn-export:hover {background-color: #09b76b;color: #fff;border-color: #198754;}
.btn-new:hover {background-color: #06038D;color: #fff;border-color: #06038D;}
.btn-filter:hover {background-color: #405189;color: #fff;border-color: #405189;}
.dataTables_length,.dataTables_info,.dataTables_paginate  {
    font-size: 0.765rem;
}
.dataTables_length label{
    font-weight: 400;
}
.vertical_line {position: relative;}
.vertical_line::after {content: "";position: absolute;right: 0;top: 0;width: 1px;height: 100%;background-color: #e4e4e4;}
.bottom_line {position: relative;margin-bottom: 40px; /* give space for the line */}
.bottom_line::after {  content: "";  position: absolute;  left: 50%;  bottom: -40px;  transform: translateX(-50%);  width: 2px;
  height: 40px;  background-color: #ccc;}


.link{ color:#2628DD !important;font-weight:500;}
.link-black{ color:#878a99 !important;} 
.link-blue{ color:#06038D !important; font-weight:500;} /* 3949AB 3498DB*/
.link-green{ color:#046A38 !important; font-weight:500;} /* 3949AB 3498DB*/
.link-greendark{color:#0ca940 !important;font-weight:500;}
.link-orange{ color:#fd7e14 !important;font-weight:500;}
.link-orangered{ color:#e74c3c !important;font-weight:500;}
.link-red{ color:#dc3545 !important;font-weight:500;}
.link-pink{ color:#EC407A !important;font-weight:500;}
.link:hover{ color:#009900 !important;} /*FF671F*/
.link-green:hover{ color:#f5468e !important;}
.link-orange:hover{ color:#0ca940 !important;}
.link-blue:hover{ color:#0ca940 !important;}
.link-pink:hover{ color:#06038D !important;}
.link-black:hover{ color:#000 !important;}

.dataTables_footer {display: flex;justify-content: space-between; align-items: center;flex-wrap: wrap;}
#customFilters .form-control,#customFilters .form-select,#customFilters button {min-width: 120px;}
.dataTables_filter {display: flex;align-items: center;gap: 10px; }
/* Hide sorting arrows for columns with 'no-sort' class */
th.no-sort.sorting::before,
th.no-sort.sorting::after,
th.no-sort.sorting_asc::before,
th.no-sort.sorting_asc::after,
th.no-sort.sorting_desc::before,
th.no-sort.sorting_desc::after {
    display: none !important;
}

#tableTitle { line-height: 50px; position: absolute;}
.circle-logo {width: 150px;height: 150px;background-color: #f3f4f4;color: white;border-radius: 50%;font-size: 24px;font-weight: bold;}
.ellipse-logo {width: 200px;height: 100px;background-color: #f8f9f9;color: white;border-radius: 50%;font-size: 24px;font-weight: bold;}
.transparent-bg-fill { background-color: transparent !important;}
.error-field {border: 1px solid #dc3545 !important;background-color: #fff6f6;}
.input-group-text.invalid-icon {border: 1px solid #dc3545 !important;border-right: none;border-radius: 0.375rem 0 0 0.375rem;}
/* Inherit input's focus border color */
.input-group:focus-within .input-group-text {
border-color: var(--vz-primary-border-subtle);
box-shadow: none; /* Optional: disable extra glow */
}

/* Match invalid (red) border */
.input-group .form-control.is-invalid ~ .input-group-text {
border-color: #dc3545; /* Bootstrap danger color */
}

/* Match valid (green) border */
.input-group .form-control.is-valid ~ .input-group-text {
border-color: #198754; /* Bootstrap success color */
}

/* Left-side icon (default Bootstrap layout) */
.input-group .input-group-text {
border-top-left-radius: 0.375rem;
border-bottom-left-radius: 0.375rem;
border-right: 0; /* Remove middle border */
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
  
/* Right-side icon */
.input-group .input-group-text:last-child {
border-top-right-radius: 0.375rem;
border-bottom-right-radius: 0.375rem;
border-left: 0; /* Remove middle border */
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}

.custom-preloader {position: fixed;width: 100%;height: 100%;background-color: #ffffff; z-index: 9999;display: flex;align-items: center;justify-content: center;
/* Change to #1e1e2f or any dark if needed */}
.preloader-content {text-align: center;animation: fadeIn 1s ease-in-out;}
.spinner-border {width: 3rem;height: 3rem;margin-bottom: 1rem;}
.loading-text {font-size: 1.25rem;font-weight: 500;font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;}
.loader-logo {width: 80px;height: auto;margin-bottom: 1rem;animation: pulse 1.5s infinite;}
.custom-preloader.fade-out {opacity: 0;transition: opacity 0.5s ease;}
@keyframes pulse {
0%, 100% {transform: scale(1);opacity: 1;}
50% {transform: scale(1.05);opacity: 0.8;}
}
@keyframes fadeIn {
from {opacity: 0;transform: translateY(20px);}
to {opacity: 1;transform: translateY(0);}
}

/* Loader */
.loader-overlay {position: absolute;top: 0;left: 0;width: 100%;height: 100%;
background: rgba(255, 255, 255, 0.7);display: flex;justify-content: center;align-items: center;z-index: 10;}
.loader-overlay.d-none {display: none;}

.overlay-spinner {position: fixed;top: 0;left: 0;width: 100vw;height: 100vh;
background-color: rgba(33, 37, 41, .35);
z-index: 1050; /* above modals, etc. */display: none;align-items: center;justify-content: center;}
#vejoloader {position: fixed;z-index: 999;margin: auto;top: 0;left: 0;bottom: 0;right: 0;
background-color: rgba(255,255,255,0.7);}
.icloader { position:absolute; top:55%; left: 50%; font-size:2rem;transform: translate(-55%, -50%);}
.loader-text {left: 50%;top: 50%;font-size: 36px;font-family: serif;font-weight: bold;letter-spacing: 4.4px;
text-transform: capitalize;position: absolute;overflow: hidden;transform: translate(-50%, -60%);font-family: "Inter", sans-serif;}
.loader-text:before {color: #aaa;content: attr(data-loading-text);}
.loader-text:after {top: 0;left: 0;width: 0;opacity: 1;color: #444;overflow: hidden;position: absolute;
content: attr(data-loading-text);-webkit-animation: loading 5s infinite;animation: loading 5s infinite;}
@-webkit-keyframes loading {
    0% {width: 0;}
    100% {width: 100%;}
}
@keyframes loading {
    0% {width: 0;}
    100% {width: 100%;}
}

/* Wrapper to position spinner */
    .select-wrapper {
      position: relative;
    }

    /* Custom spinner */
    .custom-spinner {
      width: 28px;
      height: 28px;
      border: 2px solid #ccc;
      border-top: 2px solid #333;
      border-radius: 50%;
      animation: spin 0.6s linear infinite;

      position: absolute;
      top: 50%;
      right: 40px;
      transform: translateY(-50%);
      pointer-events: none;
      z-index: 10;
    }

    @keyframes spin {
      0%   { transform: translateY(-50%) rotate(0deg); }
      100% { transform: translateY(-50%) rotate(360deg); }
    }

    /* Add padding to avoid overlap with spinner */
    .form-select.loading {
      padding-right: 2.5rem;
    }
/* Alert types with updated gradients */

.alert-success-gradient {
  background: linear-gradient(to right, #15a362, #198754);    /* teal to navy */
  border-left-color: #1b9a59;
  color: #fff;
}

.alert-danger-gradient {
  background: linear-gradient(to right, #ff416c, #ff4b2b);    /* pink-red to deep red */
  border-left-color: #c82333;
}

.alert-warning-gradient {
  background: linear-gradient(to right, #f7971e, #ffd200);    /* orange to yellow */
  color: #212529;
  border-left-color: #e0a800;
}

.alert-info-gradient {
  background: linear-gradient(to right, #00c6ff, #0072ff);    /* sky blue to royal blue */
  border-left-color: #0dcaf0;
  color: #000;
}

.alert-primary-gradient {
  background: linear-gradient(to right, #396afc, #2948ff);    /* deep blue to electric blue */
  border-left-color: #0d6efd;
}

.alert-secondary-gradient {
  background: linear-gradient(to right, #bdc3c7, #2c3e50);    /* gray to dark gray */
  border-left-color: #6c757d;
}

.alert-light-gradient {
  background: linear-gradient(to right, #fdfbfb, #ebedee);    /* off-white to light gray */
  color: #333;
  border-left-color: #dee2e6;
}

.alert-dark-gradient {
  background: linear-gradient(to right, #232526, #414345);    /* charcoal black */
  border-left-color: #000;
}
/*
[id$="_option_list"] {
  pointer-events: none;
  background-color: #eaf2f8;
  color: #85929e;
  cursor: not-allowed;
}*/
.disabledinput {pointer-events: none;background-color: #eaf2f8;color: #85929e;cursor: not-allowed;}
.sm-floating>.form-select {
    padding-top: 0.7rem !important;
    padding-bottom: .5rem !important
}

/* Default label position for input */
.form-floating.sm-floating input.form-control + label {
  top: 0; /* example starting position inside input */
  transition: top 0.3s ease, font-size 0.3s ease;
  padding: 0.5rem .8rem;
  font-size: 0.8125rem;
}

.form-floating.sm-floating input.form-control ~ label,
.form-floating.sm-floating input.form-control:not(:placeholder-shown) ~ label {
  top: -5px;
  color: rgba(var(--vz-body-color-rgb), .65);
  font-size: 0.75rem;
}

.form-floating.sm-floating textarea.form-control ~ label,
.form-floating.sm-floating textarea.form-control:not(:placeholder-shown) ~ label {
  top: -5px;
  color: rgba(var(--vz-body-color-rgb), .65);
  font-size: 0.75rem;
}

.sm-floating>.form-control,
.sm-floating>.form-control-plaintext,
.sm-floating>.form-select {
    height: calc(2.2rem + calc(var(--vz-border-width) * 2));
    min-height: calc(2.2rem + calc(var(--vz-border-width) * 2));
    line-height: 1;
    font-size: 0.8125rem;    
}
.sm-floating > input.form-control{ 
  padding-top: 5px !important; 
  overflow: hidden;
}
.sm-floating > textarea.form-control{ 
  padding-top: 15px !important; 
  overflow: hidden;
}


/* For select, label default is already top -16px */
.form-floating.sm-floating select.form-select + label {
  top: -12px;
  font-size: 0.82rem;
}

.form-floating.sm-floating textarea.form-control:focus ~ label,
.form-floating.sm-floating textarea.form-control:not(:placeholder-shown) ~ label {
  top: -12px;
  font-size: 0.82rem;
}

.form-floating.sm-floating input.form-control:focus ~ label,
.form-floating.sm-floating input.form-control:not(:placeholder-shown) ~ label {
  top: -12px;
  font-size: 0.82rem;
}

/* Remove shadow on focus */
.form-control:focus,
.form-select:focus {
  box-shadow: none;
  outline: none;
}

.sm-floating>.form-control-plaintext~label::after,
.sm-floating>.form-control:focus~label::after,
.sm-floating>.form-control:not(:placeholder-shown)~label::after,
.sm-floating>.form-select~label::after {
    height: 1.1em;
}


.loader-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .dots {
    display: flex;
    gap: 12px;
  }
  .dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    animation: bounce 1.4s infinite ease-in-out;
    box-shadow: 0 0 8px rgba(0,0,0,0.1);
  }
  .dot:nth-child(1) {
    background-color: #f4a261; /* soft saffron */
    animation-delay: 0s;
    box-shadow: 0 0 8px rgba(244,162,97,0.5);
  }
  .dot:nth-child(2) {
    background-color: #a8dadc; /* soft teal as subtle neutral for white */
    animation-delay: 0.2s;
    box-shadow: 0 0 8px rgba(168,218,220,0.4);
  }
  .dot:nth-child(3) {
    background-color: #81b29a; /* soft muted green */
    animation-delay: 0.4s;
    box-shadow: 0 0 8px rgba(129,178,154,0.5);
  }
  @keyframes bounce {
    0%, 80%, 100% {
      transform: scale(0.8);
      opacity: 0.6;
    }
    40% {
      transform: scale(1.3);
      opacity: 1;
    }
  }
  .loading-text {
    margin-top: 8px;
    font-weight: 600;
    color: #555; /* medium gray */
    user-select: none;
    font-size: 0.75rem;
  }


.login-screen{min-height: 100vh !important}
@media (max-width:575.98px) {
  .login-screen{min-height: 80vh !important}
  [data-layout=horizontal] .page-content {
        padding: calc(15px + var(--vz-grid-gutter-width) * 1.8) calc(var(--vz-grid-gutter-width) * .1) 60px calc(var(--vz-grid-gutter-width) * .1)
  }
}
@media (max-width:767.98px) {
}

.badge-bg-open {
  background-color: var(--badge-open);
  color: white;
}
.badge-bg-inprogress {
  background-color: var(--badge-inprogress);
  color: white;
}
.badge-bg-hold {
  background-color: var(--badge-hold);
  color: black;
}
.badge-bg-sendback {
  background-color: var(--badge-sendback);
  color: white;
}
.badge-bg-closed {
  background-color: var(--badge-closed);
  color: white;
}
.badge-bg-completed {
  background-color: var(--badge-completed);
  color: white;
}
.badge-bg-cancelled {
  background-color: var(--badge-cancelled);
  color: white;
}
.badge-bg-pending {
  background-color: var(--badge-pending);
  color: white;
}
.badge-bg-high {
  background-color: var(--badge-high);
  color: white;
}
.badge-bg-medium {
  background-color: var(--badge-medium);
  color: black;
}
.badge-bg-low {
  background-color: var(--badge-low);
  color: white;
}

.badge-outline-open {
  border: 1px solid var(--badge-open);
  color: var(--badge-open);
  background-color: transparent;
}
.badge-outline-inprogress {
  border: 1px solid var(--badge-inprogress);
  color: var(--badge-inprogress);
  background-color: transparent;
}
.badge-outline-hold {
  border: 1px solid var(--badge-hold);
  color: var(--badge-hold);
  background-color: transparent;
}
.badge-outline-sendback {
  border: 1px solid var(--badge-sendback);
  color: var(--badge-sendback);
  background-color: transparent;
}
.badge-outline-closed {
  border: 1px solid var(--badge-closed);
  color: var(--badge-closed);
  background-color: transparent;
}
.badge-outline-completed {
  border: 1px solid var(--badge-completed);
  color: var(--badge-completed);
  background-color: transparent;
}
.badge-outline-cancelled {
  border: 1px solid var(--badge-cancelled);
  color: var(--badge-cancelled);
  background-color: transparent;
}
.badge-outline-pending {
  border: 1px solid var(--badge-pending);
  color: var(--badge-pending);
  background-color: transparent;
}
.badge-outline-high {
  border: 1px solid var(--badge-high);
  color: var(--badge-high);
  background-color: transparent;
}
.badge-outline-medium {
  border: 1px solid var(--badge-medium);
  color: var(--badge-medium);
  background-color: transparent;
}
.badge-outline-low {
  border: 1px solid var(--badge-low);
  color: var(--badge-low);
  background-color: transparent;
}

.badge-open {
  color: var(--badge-open);
  background-color: rgba(0, 123, 255, 0.1);
}
.badge-inprogress {
  color: var(--badge-inprogress);
  background-color: rgba(23, 162, 184, 0.1);
}
.badge-hold {
  color: var(--badge-hold);
  background-color: rgba(255, 193, 7, 0.15);
}
.badge-sendback {
  color: var(--badge-sendback);
  background-color: rgba(253, 126, 20, 0.1);
}
.badge-closed {
  color: var(--badge-closed);
  background-color: rgba(108, 117, 125, 0.1);
}
.badge-completed {
  color: var(--badge-completed);
  background-color: rgba(40, 167, 69, 0.1);
}
.badge-cancelled {
  color: var(--badge-cancelled);
  background-color: rgba(220, 53, 69, 0.1);
}
.badge-pending {
  color: var(--badge-pending);
  background-color: rgba(102, 16, 242, 0.1);
}
.badge-high {
  color: var(--badge-high);
  background-color: rgba(220, 53, 69, 0.1);
}
.badge-medium {
  color: var(--badge-medium);
  background-color: rgba(255, 193, 7, 0.15);
}
.badge-low {
  color: var(--badge-low);
  background-color: rgba(40, 167, 69, 0.1);
}

/* For most browsers */
.custome-range-select {
  -webkit-appearance: none;  /* Chrome, Safari, Edge */
  -moz-appearance: none;     /* Firefox */
  appearance: none;
  padding-right: 2.5rem;     /* enough space for icon */
  background-image: none;    /* hide native arrow image */
}


.calendar-icon {
    position: absolute;
    top: 50% !important;
    right: 5px !important;
    transform: translateY(-50%);
    font-size: 24px;    
    cursor: pointer;
    z-index: 10;
    pointer-events: auto;
}
.calendar-icon:hover {
    color: #0a8754; /* slightly darker green */
    background-color: rgba(0, 128, 0, 0.05); /* subtle hover bg */
    border-radius: 4px;
}
.form-icon {
    position: relative;
}