@import url("glyphicons.css"); /* Using a url */
:root, [data-bs-theme=light] {
    --bs-blue: #2563eb;
    --bs-indigo: #6610f2;
    --bs-purple: #6f42c1;
    --bs-pink: #d63384;
    --bs-red: #dc2626;
    --bs-orange: #fd7e14;
    --bs-yellow: #f59e42;
    --bs-green: #22c55e;
    --bs-teal: #20c997;
    --bs-cyan: #14b8a6;
    --bs-black: #000;
    --bs-white: #fff;
    --bs-gray: #2a3547;
    --bs-gray-dark: #343a40;
    --bs-gray-100: #f6f9fc;
    --bs-gray-200: #eaeff4;
    --bs-gray-300: #e1e7ef;
    --bs-gray-400: #7c8fac;
    --bs-gray-500: #5a6a85;
    --bs-gray-600: #2a3547;
    --bs-gray-700: #495057;
    --bs-gray-800: #343a40;
    --bs-gray-900: #212529;
    --bs-primary: #2563eb;
    --bs-secondary: #007bbd;
    --bs-success: #22c55e;
    --bs-info: #14b8a6;
    --bs-warning: #f59e42;
    --bs-danger: #dc2626;
    --bs-light: #f6f9fc;
    --bs-dark: #2a3547;
    --bs-muted: #5a6a85;
    --bs-indigo: #6610f2;
    --bs-light-indigo: #ebf3fe;
    --bs-primary-rgb: 37, 99, 235;
    --bs-secondary-rgb: 0, 123, 189;
    --bs-success-rgb: 34, 197, 94;
    --bs-info-rgb: 20, 184, 166;
    --bs-warning-rgb: 245, 158, 66;
    --bs-danger-rgb: 220, 38, 38;
    --bs-light-rgb: 246, 249, 252;
    --bs-dark-rgb: 50, 50, 50;
    --bs-muted-rgb: 132, 132, 131;
    --bs-indigo-rgb: 102, 16, 242;
    --bs-light-indigo-rgb: 235, 243, 254;
    --bs-primary-text-emphasis: shade-color(#2563eb, 60%);
    --bs-secondary-text-emphasis: shade-color(#007bbd, 60%);
    --bs-success-text-emphasis: shade-color(#22c55e, 60%);
    --bs-info-text-emphasis: shade-color(#14b8a6, 60%);
    --bs-warning-text-emphasis: shade-color(#f59e42, 60%);
    --bs-danger-text-emphasis: shade-color(#dc2626, 60%);
    --bs-light-text-emphasis: #f6f9fc;
    --bs-dark-text-emphasis: #2a3547;
    --bs-primary-bg-subtle: #ecf2ff;
    --bs-secondary-bg-subtle: #e8f7ff;
    --bs-success-bg-subtle: #e6fffa;
    --bs-info-bg-subtle: #ebf3fe;
    --bs-warning-bg-subtle: #fef5e5;
    --bs-danger-bg-subtle: #fbf2ef;
    --bs-light-bg-subtle: #f6f9fc;
    --bs-dark-bg-subtle: #2a3547;
    --bs-primary-border-subtle: #becfff;
    --bs-secondary-border-subtle: #b6e5ff;
    --bs-success-border-subtle: #a1f2e3;
    --bs-info-border-subtle: #bad7ff;
    --bs-warning-border-subtle: #ffdfa5;
    --bs-danger-border-subtle: #fdd0c4;
    --bs-light-border-subtle: #eaeff4;
    --bs-dark-border-subtle: #5a6a85;
    --bs-white-rgb: 255, 255, 255;
    --bs-black-rgb: 0, 0, 0;
    --bs-font-sans-serif: "Plus Jakarta Sans", sans-serif;
    --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));
    --bs-body-font-family: var(--bs-font-sans-serif);
    --bs-body-font-size: 0.875rem;
    --bs-body-font-weight: 400;
    --bs-body-line-height: 1.5;
    --bs-body-color: #2c2c2c;
    --bs-body-color-rgb: 132, 132, 131;
    --bs-body-bg: #fff;
    --bs-body-bg-rgb: 255, 255, 255;
    --bs-emphasis-color: #000;
    --bs-emphasis-color-rgb: 0, 0, 0;
    --bs-secondary-color: rgba(132, 132, 131, 0.75);
    --bs-secondary-color-rgb: 132, 132, 131;
    --bs-secondary-bg: #eaeff4;
    --bs-secondary-bg-rgb: 234, 239, 244;
    --bs-tertiary-color: rgba(132, 132, 131, 0.5);
    --bs-tertiary-color-rgb: 132, 132, 131;
    --bs-tertiary-bg: #f6f9fc;
    --bs-tertiary-bg-rgb: 246, 249, 252;
    --bs-heading-color: #2a3547;
    --bs-link-color: #2a3547;
    --bs-link-color-rgb: 50, 50, 50;
    --bs-link-decoration: underline;
    --bs-link-hover-color: #2563eb;
    --bs-link-hover-color-rgb: 37, 99, 235;
    --bs-code-color: #d63384;
    --bs-highlight-color: #5a6a85;
    --bs-highlight-bg: #ffefd2;
    --bs-border-width: 1px;
    --bs-border-style: solid;
    --bs-border-color: #e1e7ef;
    --bs-border-color-translucent: rgba(0, 0, 0, 0.175);
    --bs-border-radius: 0.5rem;
    --bs-border-radius-sm: 5px;
    --bs-border-radius-lg: 15px;
    --bs-border-radius-xl: 12px;
    --bs-border-radius-xxl: 2rem;
    --bs-border-radius-2xl: var(--bs-border-radius-xxl);
    --bs-border-radius-pill: 50rem;
    --bs-box-shadow: 0px 15px 30px rgba(0, 0, 0, 0.12);
    --bs-box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    --bs-box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
    --bs-box-shadow-inset: unset;
    --bs-focus-ring-width: 0.25rem;
    --bs-focus-ring-opacity: 0.25;
    --bs-focus-ring-color: rgba(37, 99, 235, 0.25);
    --bs-form-valid-color: #22c55e;
    --bs-form-valid-border-color: #22c55e;
    --bs-form-invalid-color: #dc2626;
    --bs-form-invalid-border-color: #dc2626
   }
    [data-bs-theme=dark] {
    color-scheme: dark;
    --bs-body-color: #7c8fac;
    --bs-body-color-rgb: 124, 143, 172;
    --bs-body-bg: #202936;
    --bs-body-bg-rgb: 32, 41, 54;
    --bs-emphasis-color: #fff;
    --bs-emphasis-color-rgb: 255, 255, 255;
    --bs-secondary-color: #7c8fac;
    --bs-secondary-color-rgb: 124, 143, 172;
    --bs-secondary-bg: #343a40;
    --bs-secondary-bg-rgb: 52, 58, 64;
    --bs-tertiary-color: rgba(124, 143, 172, 0.5);
    --bs-tertiary-color-rgb: 124, 143, 172;
    --bs-tertiary-bg: #2b3035;
    --bs-tertiary-bg-rgb: 43, 48, 53;
    --bs-primary-text-emphasis: #9eb7ff;
    --bs-secondary-text-emphasis: #92d8ff;
    --bs-success-text-emphasis: #71ebd5;
    --bs-info-text-emphasis: #98c3ff;
    --bs-warning-text-emphasis: #ffce79;
    --bs-danger-text-emphasis: #fcb8a6;
    --bs-light-text-emphasis: #f6f9fc;
    --bs-dark-text-emphasis: #e1e7ef;
    --bs-primary-bg-subtle: #253662;
    --bs-secondary-bg-subtle: #1c455d;
    --bs-success-bg-subtle: #1b3c48;
    --bs-info-bg-subtle: #223662;
    --bs-warning-bg-subtle: #4d3a2a;
    --bs-danger-bg-subtle: #4b313d;
    --bs-light-bg-subtle: #465670;
    --bs-dark-bg-subtle: #333f55;
    --bs-primary-border-subtle: #385199;
    --bs-secondary-border-subtle: #2c7299;
    --bs-success-border-subtle: #0b856f;
    --bs-info-border-subtle: #325d99;
    --bs-warning-border-subtle: #996813;
    --bs-danger-border-subtle: #965240;
    --bs-light-border-subtle: #495057;
    --bs-dark-border-subtle: #343a40;
    --bs-heading-color: inherit;
    --bs-link-color: #7c8fac;
    --bs-link-hover-color: #2563eb;
    --bs-link-color-rgb: 124, 143, 172;
    --bs-link-hover-color-rgb: 37, 99, 235;
    --bs-code-color: #e685b5;
    --bs-highlight-color: #7c8fac;
    --bs-highlight-bg: #66460c;
    --bs-border-color: #333f55;
    --bs-border-color-translucent: rgba(255, 255, 255, 0.15);
    --bs-form-valid-color: #71ebd5;
    --bs-form-valid-border-color: #71ebd5;
    --bs-form-invalid-color: #fcb8a6;
    --bs-form-invalid-border-color: #fcb8a6
   }
   .fc .fc-scroller-liquid-absolute{
    bottom:10px;
    cursor: pointer;
   }
*:not(.fc-scroller)::-webkit-scrollbar { width: 5px; height: 5px;   }
*:not(.fc-scroller)::-webkit-scrollbar-track { box-shadow: none; border-radius: 5px; background-color: #F0F1F4; }
*:not(.fc-scroller)::-webkit-scrollbar-thumb { background: #B7BCC6; border-radius: 5px; }
@supports (-ms-overflow-style: none) {
    * { scrollbar-width: thin; scrollbar-color: #B7BCC6 #F0F1F4;}
    *:not(.fc-scroller) {-ms-overflow-style: none;   }
}
@font-face {
  font-family: 'Segoe UI Emoji';
  src: url('../fonts/segoeuiemoji/SegoeUIEmoji.eot');
  src: local('Segoe UI Emoji'), local('SegoeUIEmoji'),
      url('../fonts/segoeuiemoji/SegoeUIEmoji.eot?#iefix') format('embedded-opentype'),
      url('../fonts/segoeuiemoji/SegoeUIEmoji.woff2') format('woff2'),
      url('../fonts/segoeuiemoji/SegoeUIEmoji.woff') format('woff'),
      url('../fonts/segoeuiemoji/SegoeUIEmoji.ttf') format('truetype'),
      url('SegoeUIEmoji.svg#SegoeUIEmoji') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
#tabContent8 .emoji2 {
  font-variant-emoji: emoji;
  text-rendering: optimizeLegibility;
  font-family: "Segoe UI Emoji", "Segoe UI Symbol", "Apple Color Emoji", "Noto Color Emoji", "Android Emoji", "EmojiSymbols", "EmojiOne Mozilla", "Twemoji Mozilla", "Noto Emoji", "EmojiOne", "Twemoji", Arial, sans-serif !important;
}

body {overflow-x: hidden;}
.body-wrapper, .page-wrapper { background: #f6f9fc;}
.table tbody.ui-sortable tr  { position: relative;}
.table tbody.ui-sortable tr td:first-child::before { background: url(../img/sort_shift_icon.svg) no-repeat center; position: absolute; left: 3px; top: 50%; content: ''; display: block; width: 20px; height: 20px; background-size: 10px auto; margin: -10px 0 0 0;}
.table tbody.ui-sortable tr td:first-child { padding-left: 22px !important; }
.form-upload { max-width: 375px; width: 100%; margin: 0; }
.upload-button { display: flex; }
.badge-img-cont { width: 105px; margin-right: 20px; }
.badge-img-cont.w-179 { width: 179px; }
.badge-img-cont img, .profile-pic, .event-image { width: 105px; height: 105px; border-radius: 10px; object-fit: cover; border: 1px solid #B1B0B0; }
.badge-img-cont img.w-179, .profile-pic.w-179, .event-image.w-179 { width: 179px; }
.event-image { width: 179px; }
.badge-img-name { width: 100%; }
.badge-img-name h4 { font-size: 12px; line-height: 18px; color: #2C2C2C; font-weight: 400; padding-bottom: 0px; margin: 0; word-break: break-word; }
.badge-img-name p {font-weight: 700;color: #2C2C2C;font-size: 12px;line-height: 18px;min-height: 40px;margin-bottom: 0;word-break: break-word;display: -webkit-box;-webkit-line-clamp: 2; -webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;}
.badge-img-name .form_input_file { max-width: 190px; width: 100%; }
.badge-img-name .form_input_file .btn.btn-upload{ max-width: 190px; width: 100%; }
.badge-img-name .btn.btn-danger, .badge-img-name .btn.btn-danger.btn.btn-danger.max-135 { max-width: 190px; width: 100%;  }

.info-btn { outline: none !important; border: none !important; width: 14px; background: transparent !important; color: var(--bs-body-color); line-height: 1; }
.table-responsive .dataTables_wrapper .dataTables_filter select { padding: .25rem .5rem; font-size: .765625rem; border-radius: 5px; border: 1px solid var(--bs-border-color);}
.page-wrapper .container-fluid, html[data-layout=horizontal][data-boxed-layout=boxed] .navbar { max-width: 100% !important; }
.font-10 { font-size: 0.625rem !important; }
.font-11 { font-size: 0.688rem !important; line-height: 1 !important; }
.font-12 { font-size: 0.75rem !important; line-height: 1.25rem !important; }
.font-13 { font-size: 0.813rem !important; line-height: 1.25rem !important; }
.font-14 { font-size: 14px !important; line-height: 1.25rem !important; }
.line-height-1 { line-height: 1rem !important; }
.line-height-1-1 { line-height: 1.1rem !important; }
.line-height-1-2 { line-height: 1.2rem !important; }
.font-16 { font-size: 1rem !important; line-height: 1.25rem !important; }
.font-18 { font-size: 18px !important; line-height: 24px !important; }
.font-20 { font-size: 20px !important; line-height: 25px !important; }
.min-90 { min-width: 90px; }
.min-100 { min-width: 100px; }
.min-110 { min-width: 110px; }
.min-140 { min-width: 140px; }
.min-160 { min-width: 160px; }
.min-h-40 { min-height: 40px; }
.min-h-45 { min-height: 45px; }
.min-h-25 { min-height: 25px; }
.min-100 { min-width: 100px; }
.min-110 { min-width: 110px; }
.min-120 { min-width: 130px; }
.min-200 { min-width: 130px; }
.min-180 { min-width: 180px; }
.min-210 { min-width: 210px; }
.max-60 { max-width: 60px; }
.max-100 { max-width: 100px; }
.max-105 { max-width: 105px; }
.max-120 { max-width: 120px; }
.max-124 { max-width: 124px; }
.max-130 { max-width: 130px; }
.max-135 { max-width: 135px; }
.max-145 { max-width: 145px; }
.max-150 { max-width: 150px; }
.max-160 { max-width: 160px; }
.max-170 { max-width: 170px; }
.max-180 { max-width: 180px; }
.max-190 { max-width: 190px; }
.max-200 { max-width: 200px; }
.max-250 { max-width: 250px; }
.max-w-300 { max-width: 300px; }
.max-w-250 { max-width: 250px; }
#futr-appontment-table tr td:first-child{  white-space: nowrap;}
.max-width-100 { max-width: 100px !important; }
.select2-container {display: inline-block !important; width: 100% !important;}
.salonlist-body .widget-content .card.card-body{    min-height: calc(100vh - 201px);}
.reports-border-bookings .skill-item .chart, .reports-border-bookings .skill-item .chart canvas { margin: 0 auto;/* width: 70px !important; height: 70px !important; border: dashed 1px currentColor; */border-radius: 50%;display: flex;align-items: center;justify-content: center;}
.reports-border-bookings.reports-bookings .skill-item .percent{justify-content: center; font-size: 14px; line-height: 18px; color: currentColor; font-weight: 700;}
.highcharts-credits {display: none !important;}
.reports-card:has(.highcharts-contextbutton.highcharts-button-pressed) {z-index: 9;}
.totalRecordsTxt {display: none;}
.overlay-logo { position: absolute; left: 0; top: 0; right: 0; bottom: 0; width: 100%; height: 100%; opacity: 0.2; }
.overlay-logo .overlay-logo-img { width: 115vw; height: 20vw; left: -6vw; position: absolute; bottom: -7vw; }
.icon-shape {  width: 48px; height: 48px;  min-width: 48px; background-position: center;  border-radius: 0.75rem; align-items: center; display: flex; justify-content: center; border: 1px solid #B1B0B0; }
.log-layout { position: relative; width: 100%; max-width: 100%; min-height: 100vh; display: flex; flex-wrap: nowrap; align-items: center; justify-content: center; overflow: hidden; }
.text-break {word-break: break-all;}
div.dataTables_wrapper div.dataTables_filter input, .input-search { /*background-image: url(../../assets/img/search_icon.svg);*/ background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="13.331" height="13.331" viewBox="0 0 13.331 13.331"><path id="SEARCH" d="M6.666,2a4.666,4.666,0,1,0,3.049,8.186L10,10.47v.862l4,4L15.331,14l-4-4H10.47l-.284-.284A4.656,4.656,0,0,0,6.666,2Zm0,1.333A3.333,3.333,0,1,1,3.333,6.666,3.323,3.323,0,0,1,6.666,3.333Z" transform="translate(-2 -2)" fill="%232c2c2c"/></svg>') !important; background-repeat: no-repeat !important; background-position: 98% center !important; background-position: calc(100% - 0.625rem) center !important;  padding-right: 26px!important; }
/* div.dataTables_wrapper div.dataTables_filter input:focus{
    background-image: none !important;
} */
.bg-transparent {
    background-color: transparent !important;
  }
.btn i {line-height: inherit;}
/*image video*/
span.fr-img-caption.fr-dib {
    margin: 5px auto;
    display: block;
    float: none;
}
.fr-img-caption.fr-dib.fr-fil {
    margin-left: 0;
    text-align: left;
}
.fr-img-caption.fr-dib.fr-fir {
    margin-right: 0;
    text-align: right;
}
.fr-img-caption.fr-bordered img {
    border: solid 5px #CCC;
}
 .fr-img-caption.fr-shadow img {

 box-shadow: 10px 10px 5px 0px #cccccc;
}
.select-print:has(#printerSelectspace:empty) label  {
  display: none;
}
 img.fr-shadow{
      box-shadow: 10px 10px 5px 0px #cccccc;
}

 img.fr-bordered{
  border: solid 5px #CCC;
}

 img.fr-dib {
    margin: 5px auto;
    display: block;
    float: none;
    vertical-align: top;
}

 img.fr-dib.fr-fil {
    margin-left: 0;
    text-align: left;
}

 img.fr-rounded{
      border-radius: 10px;
}

 img.fr-dib.fr-fir {
    margin-right: 0;
    text-align: right;
}
/*image video ends*/
/*--ClientsView--*/
.clientViewTitle { font-size: 21px; padding: 6px 0 0; }
.clientViewTitle span { display: block; font-size: 12px; color: #2C2C2C; font-weight: 400; line-height: 21px; }
.clientListBox {/* border: 1px solid #e1e7ef; *//* border-radius: 20px; */margin-bottom: 16px; word-break: break-word;}
.clientListHeading {/* font-size: 16px; *//* color: #2C2C2C; *//* font-weight: 700; *//* line-height: 25px; */vertical-align: middle;/* text-align: center; */min-height: 29px;display: flex;align-items: center;justify-content: space-between;position: relative;/* border-bottom: 1px solid #e1e7ef; */}
.clientListHeading small { position: absolute; right: 0; top: 0; }
.clientListHeading span { position: absolute; right: 0; top: 0; }
.clientListCont .clientAptList h3 { color: var(--bs-primary); font-weight: 400; float: right; margin: 0; }
.clientAptList ul { display: inline-block; width: 100%; }
.clientAptList ul li { display: flex; width: 100%; padding-bottom: 6px !important; z-index: 1; position: relative; }
.clientAptList ul li:before { content: ''; width: 2px; z-index: -1; position: absolute; top: 0; left: 13px; height: 100%; border-right: 2px solid #B1B0B0; margin-left: -2px; }
.clientAptList ul li:last-child:before { display: none; }
.clientAptList ul li .clientAptCircle { width: 25px; min-width: 25px; height: 25px; background: #2563eb; display: flex; align-items: center; justify-content: center; border-radius: 100px; margin-right: 12px; }
.clientAptList ul li .clientAptCircle img { width: 15px; height: auto; object-fit: contain; }
.clientAptcont { width: 100%; }
.clientAptcont h4 { color: #2C2C2C; font-size: 13px; font-weight: 400; line-height: 18px; margin: 0; }
.clientAptcont h4 span { font-size: 11px; }
.clientAptcont p { font-size: 11px; color: #2C2C2C; line-height: 16px; margin: 0; }
.clientListCont { padding: 0; }
.clientListCont h2 { font-size: 16px; font-weight: bold; color: #2C2C2C; line-height: 24px; margin: 0 0 5px; }
.clientListCont h3 { font-size: 13px; font-weight: bold; color: #2C2C2C; line-height: 21px; margin: 0 0 5px; }
.clientListCont ul { list-style: none; padding: 0; margin: 0 0 5px; }
.clientListCont ul li { font-size: 13px; font-weight: 400; line-height: 21px; padding-bottom: 4px; color: #2C2C2C; }
.clientListCont ul li.alert { padding: 0; font-size: 11px; margin: 0; }
.clientListCont ul li.alert small { vertical-align: 1px; margin-right: 2px; }
.clientListCont ul li strong { opacity: 0.7; font-weight: 400; }
.clientListCont ul li span { float: right; font-weight: 600; }
.dangerHeading { background-color: #B1101B; border-radius: 20px 20px 0 0; color: #fff; }
.dangerHeading span img { filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7453%) hue-rotate(56deg) brightness(134%) contrast(102%); }
.font16 { font-size: 16px; }
.textMore { color: var(--bs-primary); font-size: 13px; font-weight: 400; text-decoration: underline; }
.liabilitiesCont p { color: #213E49; font-size: 13px; text-decoration: underline; margin: 0 0 10px; }
.mh93 { min-height: 93px; }
.successCircle { background: #213E49 !important; }
 .clientListScorll::-webkit-scrollbar {width: 0px;}
 .clientListScorll::-webkit-scrollbar-track { background: transparent;}
 .clientListScorll::-webkit-scrollbar-thumb { background-color: transparent; border-radius: 20px; border: 1px solid transparent;}
.clientListScorll { max-height: 288px; overflow-y: auto; }
.clientListImg img { width: 100%; height: 96px; object-fit: cover; border-radius: 7px 7px 0 0; }
.clientListprofile { max-width: 79px; margin: -35px auto 10px; width: 100%; }
.clientListprofile img { border: 1px solid #e1e7ef; border-radius: 100%; height: 79px; object-fit: cover; }
.clientListProfile h3 { font-size: 14px; color: #2C2C2C; text-align: center; position: relative; }
.clientListProfile h3 span { vertical-align: 1px; margin-left: 10px; position: absolute; top: -6px; }
.clientListProfile p { font-size: 11px; color: #2C2C2C; text-align: center; margin-bottom: 5px; }
.clientListProfile ul { list-style: none; padding: 5px 10px 5px; border-bottom: 1px solid #e1e7ef; margin: 0; }
.clientListProfile ul li { color: #2C2C2C; font-size: 14px; font-weight: 700; padding-bottom: 5px; overflow: hidden; }
.clientListProfile ul li span { width: 167px; float: right; text-align: right; font-size: 12px; font-weight: 400; }
.clientListProfile ul.clntProfle-flex li{display: flex; justify-content: space-between; gap: 5px; }
.clientListProfile ul.clntProfle-flex li span{width: auto;font-weight: 600;}
.client-btn {background: #f1f5f9;border-color: #f1f5f9; color: #2c2c2c; box-shadow: 0 0 #0000, 0 0 #0000, 0 0 #0000, 0 0 #0000, 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);}
.optInStatus span { width: 150px !important; }
.optInStatus span small { color: #797978; display: block; font-size: 12px; }
.optInStatus li { padding: 0 !important; }
.clientRating { padding: 10px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #e1e7ef; }
.clientRating h4 { color: #2C2C2C; font-size: 14px; font-weight: 700; margin: 0; }
.clientRating ul { border: 0; padding: 0 0 0 15px; }
.clientRating ul li { display: inline-block; padding-right: 4px; padding-bottom: 0; }
.clientRating ul li:last-child { padding-right: 0; }
.clientID { text-align: center; padding: 10px 0; }
.clientID h5 { font-size: 11px; color: #2C2C2C; line-height: 18px; font-weight: 400; margin: 0; }
.clientID p { font-size: 13px; margin: 0 0 5px; }
.clientID ul { border: 0; padding-bottom: 0; }
.clientID ul li { display: inline-block; padding-right: 2px; padding-bottom: 0px; }
.cardDetailsList { display: flex; position: relative; padding-right: 44px; padding-bottom: 15px; }
.cardParagh { width: 95px; min-width: 95px; }
.cardParagh p { font-size: 13px; color: #2C2C2C; line-height: 21px; }
.cardNumber { width: 100%; text-align: right; }
.cardNumber p { font-size: 13px; color: #2C2C2C; line-height: 21px; margin: 0; }
.cardEditPositoin { position: absolute; right: 0; top: 0; }
.cardEditPositoin img { width: 15px; height: auto; }
.cardDetailsBox { padding-bottom: 15px; }
.cardDetailsBox .form-check-label { padding-left: 15px; font-size: 13px; }
.cardDanger p { color: #B1101B; }
.deteleClient p { margin-bottom: 0; }
.deteleClient p img { margin-right: 6px; vertical-align: -3px; }
.version-text { position: absolute; top: 7px; right: 43px; text-decoration: none; font-size: 14px !important; line-height: 20px !important; color: #fff !important; z-index: 2; }
.accord-blue .version-text-main .accordion-button::after { position: absolute; right: 10px; }
.accord-blue .version-text-main .accordion-button { padding-right: 150px; }
.modal-frame { border: 1px solid gray; padding: 10px; overflow: auto; height: 100%; ; }
/***client***/

/* froalaEditor */
.smallfroalaEditor .fr-box.fr-basic .fr-toolbar{ border-color:#B1B0B0 !important; /* border-radius: 0 !important; background-color: #DFDFDF !important;*/ padding: 0 3px !important; }
.smallfroalaEditor .fr-toolbar .fr-btn-grp { margin: 0px !important;  }
.smallfroalaEditor .fr-toolbar .fr-command.fr-btn, .smallfroalaEditor .fr-toolbar .fr-btn {height: 20px !important;width: 20px !important; background-color: #fff !important; border: 1px solid #ffffff !important; border-radius: 0 !important; margin: 4px 2px !important; padding: 0 !important;}
.smallfroalaEditor .fr-toolbar .fr-command.fr-btn i, .smallfroalaEditor .fr-toolbar .fr-btn i, .smallfroalaEditor .fr-toolbar .fr-command.fr-btn svg, .smallfroalaEditor .fr-toolbar .fr-btn svg {width: 18px !important; height: 18px !important; margin: 0px !important;}
.smallfroalaEditor .fr-box.fr-basic .fr-element {padding: 5px !important;}
.smallfroalaEditor .fr-box.fr-basic .fr-element p {font-size: 0.825rem;}
.smallfroalaEditor #fr-logo>span {padding: 4px 5px 4px 5px !important;}
.smallfroalaEditor .fr-box .fr-counter {font-size: 12px !important; padding: 4px 5px 4px 5px !important;}
.smallfroalaEditor .fr-toolbar .fr-more-toolbar>.fr-command.fr-btn { margin-left: 2px !important; margin-right: 2px !important;  }
.smallfroalaEditor #fr-logo>svg { height: 16px !important; width: 45px !important; margin: 0 !important;   }
.smallfroalaEditor .fr-toolbar .fr-more-toolbar.fr-expanded {display: inline-flex;}
.smallfroalaEditor .fr-toolbar .fr-more-toolbar.fr-expanded { flex-wrap: wrap; height: auto !important; display: inline-flex; padding: 0 !important; justify-content: flex-end;   }
.smallfroalaEditor .fr-toolbar .fr-newline {background: transparent !important; height: 1px !important; margin: 0 !important; box-shadow: none !important; line-height: 0; font-size: 0; border-top: 1px solid #B1B0B0 !important;}
.smallfroalaEditor .fr-second-toolbar, .smallfroalaEditor .fr-box.fr-basic.fr-top .fr-wrapper {border-color: #B1B0B0 !important;}
/*froalaEditor*/
button[data-cmd="insertImage"] { display: none; }
button[data-cmd="insertFiles"] { display: none; }
button[data-cmd="insertFile"] { display: none; }
.fr-second-toolbar>a {display: none !important;}
.fr-command[data-cmd="getPDF"] { display: none !important; }
.fr-command[data-cmd="print"] { display: none !important; }
.fr-command[data-cmd="insertVideo"] { display: none !important; }
button.fr-command.fr-btn[data-title="Open Filestack File Picker"], button.fr-command.fr-btn[title="Open Filestack File Picker"], button.fr-command.fr-btn[data-cmd="openFilePicker"] {display: none !important;}
.preloader .spinner-border {display: inline-block; width: 50px; position: absolute; top: calc(50% - 10.5px); left: 0; right: 0; margin: 0 auto; height: 50px; color:#5d87ff;}

.tab-menu {display: flex; align-items: start; justify-content: space-between; flex-wrap: wrap;}
.tab-menu-top-pills { display: inline-flex; align-items: center; flex-wrap: wrap; background: #fff !important; padding:0 !important; box-shadow: 0 0.025rem 0.55rem rgba(0, 0, 0, 0.075); border-radius: 5px !important; border: 0 !important; overflow: hidden;  }
.tab-menu-top-pills li a, .tab-menu-top-pills li .nav-link {font-size: 14px; line-height: 20px; border-radius: 0 !important; color: #2c2c2c; background: transparent; position: relative; padding:12px 15px !important; }
.salonlist-body .tab-menu-top-pills li a, .salonlist-body .tab-menu-top-pills li .nav-link {padding:12px 10px !important;}
.tab-menu-top-pills li a:not(.active), .tab-menu-top-pills li .nav-link:not(.active) {color: #2c2c2c;}
.tab-menu-top-pills li a[data-url], .tab-menu-top-pills li .nav-link[data-url] {cursor: pointer;}
.tab-menu-top-pills li a.active, .tab-menu-top-pills li .nav-link.active { color: #5d87ff; background: rgba(93,136,255,0.16); background: -moz-linear-gradient(top, rgba(93,136,255,0.16) 0%, rgba(255,255,255,0.16) 79%, rgba(255,255,255,0.16) 100%); background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(93,136,255,0.16)), color-stop(79%, rgba(255,255,255,0.16)), color-stop(100%, rgba(255,255,255,0.16))); background: -webkit-linear-gradient(top, rgba(93,136,255,0.16) 0%, rgba(255,255,255,0.16) 79%, rgba(255,255,255,0.16) 100%); background: -o-linear-gradient(top, rgba(93,136,255,0.16) 0%, rgba(255,255,255,0.16) 79%, rgba(255,255,255,0.16) 100%); background: -ms-linear-gradient(top, rgba(93,136,255,0.16) 0%, rgba(255,255,255,0.16) 79%, rgba(255,255,255,0.16) 100%); background: linear-gradient(to bottom, rgba(93,136,255,0.16) 0%, rgba(255,255,255,0.16) 79%, rgba(255,255,255,0.16) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5d88ff', endColorstr='#ffffff', GradientType=0 );}
.tab-menu-top-pills li a.active:before, .tab-menu-top-pills li .nav-link.active:before { background: #5d87ff; width: 100%; height: 3px; content: ''; position: absolute; top: 0; left: 0; }
.tab-menu-top-pills .nav-item .nav-link[disabled="disabled"] { opacity: 0.8 !important; pointer-events: none !important; color: #cdcccc !important;}
.tab-menu-top-pills .nav-item .nav-link em{ width: 15px; height: 15px; background: #9F0015; font-size: 10px; color: #fff; font-weight: 700;padding: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; position: absolute; right: 0px;
 top: 5px; font-style: normal;}

 /* div:where(.swal2-container) button:where(.swal2-styled):where(.swal2-deny){font-size: 15px !important; font-weight: 500 !important;} */
.swal2-html-container { font-size: 14px; line-height: 1.5; color: #807d7d;}
.swal2-title{font-size: 20px;}
.card-title-inner {font-size: 16px;}
.form-label {font-size: 14px;margin-bottom: .3rem;}
/* .card.bg-secondary-subtle.shadow-none.position-relative  {} */
/* .card.bg-secondary-subtle.shadow-none.position-relative .card-body.px-4.py-3 { padding-top: 0.8rem !important; padding-bottom: 0.8rem !important;}
.card.bg-secondary-subtle.shadow-none.position-relative .img-fluid.mb-n4 {width: 95px; height: 95px; margin: -15px -130px 0 0 !important;} */
#event-images-preview-container1:has(.position-relative.preview-event-image) #event-images-preview-container .position-relative {display: none;}
#event-images-preview-container .position-relative[data-id^="new-"]{display: block !important;}
.portfolioImageListItem { width: 60px; height: 60px; border-radius: 10px; object-fit: cover; position: relative; margin-right: 15px; margin-bottom: 10px; }
.portfolioImageListItem>img { border-radius: 10px; border: 1px solid #B1B0B0; object-fit: cover; }
.portfolioImageListItemClose { position: absolute; right: -11px; top: -11px; cursor: pointer; }
.imageTablePlaceholder { border-radius: 10px; border: 1px solid #B1B0B0; object-fit: cover; }
[data-layout=vertical] .topbar {      box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.045);}
.disabled-icon { pointer-events: none; filter: brightness(0) saturate(100%) invert(98%) sepia(1%) saturate(369%) hue-rotate(57deg) brightness(96%) contrast(87%) !important;}
.specials-preview {display: flex; flex-wrap: wrap; justify-content: space-between; width: 100%; max-width: 585px; margin: 0 auto; }
.specials-preview-item { width: 274px; height: 594px; padding:110px 7px 34px; margin:0 5px 20px  }
.specials-preview-item.ios-preview-item { background: url('../img/ios-placeholder.png') no-repeat;}
.specials-preview-item.android-preview-item { background: url('../img/android-placeholder.png') no-repeat;}
.specials-preview-content {width: 100%; height: 100%; overflow: auto; }
.specials-preview-content>img {width: 100% !important; height: auto; border:1px solid #e1e7ef; max-width: 100% !important;}
.specials-preview-content img {width: 100% !important; height: auto; border:1px solid #e1e7ef; max-width: 100% !important;}
.specials-preview-content iframe, .specials-preview-content video { width: 100%; height: auto; }
.special-preview-desc {padding:10px; border:1px solid #e1e7ef; background: #fff; margin-top: 13px; }
.special-preview-desc p {font-size: 0.625rem !important; margin-bottom: 0.5rem !important; }
.special-preview-desc img {width: 100% !important; max-width: 100% !important; height: auto; border:1px solid #e1e7ef; margin-bottom: 0.5rem !important;}

.accord-module .accordion-button::after { filter: brightness(0) saturate(100%) invert(50%) sepia(24%) saturate(2487%) hue-rotate(201deg) brightness(99%) contrast(108%); }
.accord-module .accordion-item:has(.accordion-collapse.show) { height: 100%; }


.datepickerui, .datepickerui_hidefuture { background-image: url(../img/date.svg); background-position: 94% center; background-position: calc(100% - 10px) center; background-repeat: no-repeat; }
.timepicker { background-image: url(../img/clock.svg); background-position: 94% center; background-position: calc(100% - 10px) center; background-repeat: no-repeat; }
.datepickerui.bg-none, .datepickerui_hidefuture.bg-none, .timepicker.bg-none { background-image: none;  }

.events-calendar-view { width: 100%; max-width: 950px; margin: 0 auto; display: flex; flex-wrap: wrap; }
.events-calendar-view-lft { width: 100%; max-width: 531px; margin:0 5px 0;}
.events-calendar-view-rgt { width: 100%; max-width: 304px; margin:0 5px 0; }
.events-calendar-colors {border:1px solid #707070; border-radius: 10px; padding: 5px 10px; width: 100%; max-width: 184px; margin: 0 auto; }
.events-calendar-colors-item {position: relative; font-size: 14px; line-height: 18px; margin: 2px 0; padding-left: 20px; }
.events-calendar-colors-item span {position: absolute; width: 10px; height: 10px; border: 2px solid #2C93AF; background-color: #2C93AF; border-radius: 10px; left: 0; top: 3px; display: inline-block; }
.events-calendar-colors-item strong {position: absolute; left: -2px; top: 0; display: inline-block; color: #2C93AF; font-weight: 900; }
.events-calendar-list { border-radius: 10px; border:1px solid #707070; padding:14px 8px; margin-top: 11px;     min-height: calc(100% - 125px); }
.events-calendar-list-head { display: flex; align-items: center; justify-content: space-between; padding:4px 0 6px; border-bottom: 1px solid #707070; }
.events-calendar-list-head-title {font-size: 24px; line-height: 32px; font-weight: 600; color: #2C2C2C; padding: 0; margin:0; }
.events-calendar-list-item {padding: 10px 0; border-bottom: 1px solid #707070;}
.events-calendar-list-divider {height: 1px; width: 16px; background: #707070; display: inline-block; vertical-align: middle; margin: 5px;}
.events-calendar-list-item-scroll { width:100%; min-height: 276px; max-height: 276px; overflow: auto; }
.nofify-nav {width: 12px; height: 12px; background: #9F0015; font-size: 8px; line-height: 12px; text-align: center; color: #fff; display: inline-block; position: absolute; right: 0; top: 0; border-radius: 12px; }
.widget-content.searchable-container>.card:last-child {margin-bottom: 40px;}
.mb-40 {margin-bottom: 40px !important;}

.zsiq_theme1.zsiq_floatmain { width: 50px !important; max-height: 50px !important;}
.zsiq_theme1 .zsiq_flt_rel { width: 50px !important; border-radius: 50px !important; height: 50px !important;}
.zsiq_theme1 .siqicon:before {line-height: 50px !important;}
  /* ---- Jquery Inline Date Picker ----*/
:root{ --input-datepicker-width:280px; --inline-datepciker-header-clr : #2563eb; --inline-datepicker-width: 531px;}
.ui-datepicker {position: relative; width: var(--input-datepicker-width)!important; box-shadow: none!important; border: 1px solid #707070!important; border-radius: 10px!important; padding: 10px!important; }
.ui-datepicker th { font-size: 14px!important; color: var(--inline-datepciker-header-clr)!important; font-weight: 500!important; text-transform: capitalize!important; }
.ui-widget-header {background: none !important; border: none !important;}
.ui-datepicker-calendar { width: 100%!important; }
.ui-datepicker td > a, .ui-datepicker td > span { padding: 3px 3px!important; line-height: 28px!important; text-align: center!important; width: 27px!important; height: 27px!important; border: 1px solid transparent!important; border-radius: 50%!important; display: inline-block!important; background-color: transparent !important; }
.ui-datepicker th { padding: 6px 6px!important; text-align: center!important; }
.ui-datepicker td { padding: 4px 4px!important; line-height: 28px!important; }
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { color: #2c2c2c!important; font-size: 15px!important; font-weight: 700!important; line-height: 20px!important; }
.ui-datepicker-unselectable.ui-state-disabled span { color: #797978!important; }
*:not(>#datepicker) .ui-state-highlight,*:not(>#datepicker) .ui-widget-content .ui-state-highlight { color: #2c93af!important; border: 2px solid #2c93af!important; font-weight: 700!important; border-radius: 50%!important; }
.ui-widget-content .ui-state-active { background: transparent!important; border: 0px!important; color: #2c93af!important; font-weight: 700!important; }
.ui-datepicker-calendar .ui-datepicker-current-day > .ui-state-default.ui-state-active{ background: #2563eb !important;color: #fff !important;border-radius: 0.3125rem !important;}
.dots-container { display: flex!important; justify-content: center!important; position: absolute!important; bottom: 7px!important; left: 50%!important; transform: translateX(-50%)!important; }
.dot { width: 8px!important; height: 8px!important; border-radius: 50%!important; margin: 0 1px!important;border: 1px solid #fff;  }
.ui-datepicker .ui-datepicker-title { margin: 0 26px!important; text-align: center!important; line-height: 1!important; }
.ui-datepicker-title .ui-datepicker-month, .ui-datepicker-title .ui-datepicker-year { text-align: center!important; margin: 0!important; padding: 0!important; border: 0!important; font-size: 16px!important; color: #2C2C2C!important; font-weight: 700!important; background: none!important; }
.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next { top: -5px!important; position: absolute!important; background: none !important; border: 0 !important; }

.ui-datepicker .ui-datepicker-prev .ui-icon { background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="12.471" height="20" viewBox="0 0 12.471 20"><path id="EXPAND:DOWN" d="M8.4,9.5,5.93,11.971l10,10,10-10L23.459,9.5,15.93,17.029Z" transform="translate(21.971 -5.93) rotate(90)" fill="%232c2c2c"/></svg>')!important; width: 26px!important; height: 26px!important; position: absolute!important; background-repeat: no-repeat!important; text-indent: -1000px!important; background-size: 34% 100%!important; }
.ui-datepicker .ui-datepicker-next .ui-icon { background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="12.471" height="20" viewBox="0 0 12.471 20"><path id="EXPAND:DOWN" d="M8.4,9.5,5.93,11.971l10,10,10-10L23.459,9.5,15.93,17.029Z" transform="translate(-9.5 25.93) rotate(-90)" fill="%232c2c2c"/></svg>')!important; width: 26px!important; height: 26px!important; position: absolute!important; background-repeat: no-repeat!important; text-indent: -100000px!important; background-size: 34% 100%!important; }
.ui-datepicker .ui-datepicker-next { right: 15%!important; }
.ui-datepicker .ui-datepicker-prev { left: 15%!important; }
.ui-datepicker .ui-datepicker-header{position: relative!important;}
.inline-datepicker .ui-datepicker-inline .ui-state-default, .inline-datepicker .ui-datepicker-inline .ui-widget-content .ui-state-default, .inline-datepicker .ui-datepicker-inline .ui-widget-header .ui-state-default{position: relative!important;}

/* --- inline datepicker ----*/
.inline-datepicker { position: relative!important; z-index: 1; }
.inline-datepicker .ui-datepicker .ui-datepicker-prev, .inline-datepicker .ui-datepicker .ui-datepicker-next {top: 0 !important; cursor: pointer; }
.inline-datepicker .ui-datepicker-inline { width: var(--inline-datepicker-width)!important; box-shadow: none!important; border: 1px solid #707070!important; border-radius: 20px!important; padding: 20px!important; position: relative!important; }
.inline-datepicker .ui-datepicker-inline .ui-datepicker-title .ui-datepicker-month, .inline-datepicker .ui-datepicker-inline .ui-datepicker-title .ui-datepicker-year { font-size: 24px!important; background: none!important; width: auto!important; outline:none!important; }
.inline-datepicker .ui-datepicker-inline table th { font-size: 24px!important; }
.inline-datepicker .ui-datepicker-inline td > a, .inline-datepicker .ui-datepicker-inline td > span { width: 54px!important; height: 54px!important; }
.inline-datepicker .ui-datepicker-inline .ui-state-default, .inline-datepicker .ui-datepicker-inline .ui-widget-content .ui-state-default, .inline-datepicker .ui-datepicker-inline .ui-widget-header .ui-state-default { font-size: 24px!important; line-height: 46px!important; }
.inline-datepicker .ui-datepicker-inline .ui-datepicker-calendar { margin: 20px 0!important; }
.inline-datepicker .ui-datepicker-inline .ui-datepicker-prev .ui-icon { background-size: 44% 100%!important; }
.inline-datepicker .ui-datepicker-inline .ui-datepicker-next .ui-icon { background-size: 44% 100%!important; }
.ui-state-default.ui-state-highlight.ui-state-active { color: #fff!important; border: 2px solid #2c93af!important; font-weight: 700!important; border-radius: 50%!important; background:#2c93af !important; }
.ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year { width: auto!important; }
.ui-datepicker td { text-align: center!important; }
@media(max-width:991px) {
.inline-datepicker .ui-datepicker-inline { width: 100%!important; }
.inline-datepicker .ui-datepicker-inline td > a, .inline-datepicker .ui-datepicker-inline td > span { width: 40px!important; height: 40px!important; }
.inline-datepicker .ui-datepicker-inline .ui-state-default, .inline-datepicker .ui-datepicker-inline .ui-widget-content .ui-state-default, .inline-datepicker .ui-datepicker-inline .ui-widget-header .ui-state-default { font-size: 18px!important; line-height: 24px!important; }
.inline-datepicker .ui-datepicker-inline table th { font-size: 18px!important; }
.inline-datepicker .ui-datepicker-inline .ui-datepicker-title .ui-datepicker-month, .inline-datepicker .ui-datepicker-inline .ui-datepicker-title .ui-datepicker-year { font-size: 23px!important; }
}
@media(max-width:575px) {
.inline-datepicker .ui-datepicker-inline table th { font-size: 16px!important; }
.inline-datepicker .ui-datepicker-inline .ui-state-default, .inline-datepicker .ui-datepicker-inline .ui-widget-content .ui-state-default, .inline-datepicker .ui-datepicker-inline .ui-widget-header .ui-state-default { font-size: 16px!important; line-height: 17px!important; }
.ui-datepicker td { padding: 4px 4px!important; line-height: 20px!important; }
.inline-datepicker .ui-datepicker-inline td > a, .inline-datepicker .ui-datepicker-inline td > span { width: 37px!important; height: 37px!important; }
.inline-datepicker .ui-datepicker-inline { padding: 10px!important; }
}
/* --- inline datepicker ----*/


div.dataTables_wrapper div.dataTables_paginate{margin-top: 0 !important;}
.ui-datepicker td a.ui-state-highlight{height: auto; margin-bottom: 0; border-radius: 0;}
.icon-chevron-up, .icon-chevron-down { display: inline-block; width: 14px; height: 14px; line-height: 14px; vertical-align: text-top; background-image: url(../../assets/img/glyphicons-halflings.png); background-position: 14px 14px; background-repeat: no-repeat; margin-top: 1px; }
.icon-chevron-up { background-position: -288px -120px;}
.icon-chevron-down { background-position: -313px -119px;}
.version-text{ position: absolute; top: 19px; right: 60px; text-decoration: none; font-size: 14px !important; line-height: 20px !important; z-index: 7; font-weight: 400; color: #2a3547 !important;}
.events-calendar-view .inline-datepicker .ui-datepicker-inline .ui-state-default { border-radius: 50% !important; border: 2px solid #fff;}
.events-calendar-view .inline-datepicker .ui-datepicker-inline .ui-datepicker-today .ui-state-default {border: 2px solid #2C93AF !important; background: #fff !important; color: #2c2c2c !important;}
.events-calendar-view .inline-datepicker .ui-datepicker-inline .ui-datepicker-today .ui-state-default.ui-state-active {border: 2px solid #2563eb !important; background: #2563eb !important; color: #ffffff !important;}
.fr-sticky-on{z-index: 1 !important;}

.preview-page-main{ min-height: 100vh;background: #F7F8F9;}
.bg-gradient-preview{
    background: rgba(37, 99, 235, 1); background: -moz-linear-gradient(left, rgba(37, 99, 235, 1) 0%, rgba(46, 149, 179, 1) 62%, rgba(0, 163, 147, 1) 100%); background: -webkit-gradient(left top, right top, color-stop(0%, rgba(37, 99, 235, 1)), color-stop(62%, rgba(46, 149, 179, 1)), color-stop(100%, rgba(0, 163, 147, 1))); background: -webkit-linear-gradient(left, rgba(37, 99, 235, 1) 0%, rgba(46, 149, 179, 1) 62%, rgba(0, 163, 147, 1) 100%); background: -o-linear-gradient(left, rgba(37, 99, 235, 1) 0%, rgba(46, 149, 179, 1) 62%, rgba(0, 163, 147, 1) 100%); background: -ms-linear-gradient(left, rgba(37, 99, 235, 1) 0%, rgba(46, 149, 179, 1) 62%, rgba(0, 163, 147, 1) 100%); background: linear-gradient(to right, rgba(37, 99, 235, 1) 0%, rgba(46, 149, 179, 1) 62%, rgba(0, 163, 147, 1) 100%);  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2563eb', endColorstr='#00a393', GradientType=1);
}
.preview-header{padding: 10px 16px;  display: flex;align-items: center;}
.preview-header  .container{    max-width: 1180px;}
.preview-header h1{color: #fff;text-transform: uppercase;font-size: 25px;letter-spacing: 2.5px;line-height: 35px;font-weight: 600;}

.preview-content{ min-height: calc(100vh - 239px);    padding: 44px 16px;}
.preview-footer{padding: 5px 0; }
.preview-footer p {font-size: 12px;}

.addonService .inline-label, .addonService .inline-input-field, .appended-section .inline-input-field, .appended-section .inline-label{flex: none !important;}
.preview-form-grid form{max-width: 700px;width: 100%; margin: 0 auto;}
.preview-form-grid{max-width: 844px;width: 100%;margin: 0 auto;}
.preview-form-grid form .inline-label{ flex: 0 1 162px;}
.preview-form-grid form .preview-form-inline{display: flex;align-items: center;}
.preview-form-grid form .inline-input-field{flex: 1;}
.preview-btn{    width: 100%;margin: 0 0 0 auto;text-align: center;}
.promo-events-view{width: 100%; min-height: 100vh; background: #F7F8F9; }
.promo-events-view-head { background: #fff; padding: 30px 90px; position: relative; font-size: 16px; line-height: 1; color: var(--bs-primary); font-weight: 600; position: relative; }
.promo-events-view-logo {font-size: 24px; line-height: 32px; color: #2C2C2C; font-weight: 600; display: flex; align-items: center; }
.promo-events-view-logo span {font-size: 24px; line-height: 32px; color: #2C2C2C; font-weight: 600; flex: 1; padding-left: 10px; }
.promo-events-view-btn-head { width: 75px; height: 65px; background-color: #fff; border: 1px solid #707070; border-right: 0; border-radius: 10px 0 0 10px; display: flex; align-items: center; justify-content: center; font-size: 16px; line-height: 1; color: var(--bs-primary); font-weight: 600; position: absolute; right: 0; top: 10px; }
.promo-events-view-icon { display: flex; flex-direction: column; justify-content: center; align-items: center; }
.promo-events-view-icon span {font-size: 16px; line-height: 20px; color: var(--bs-primary); font-weight: 600; padding-top: 2px; }
.promo-events-view-banner {padding: 50px 15px; background: rgba(37, 99, 235, 1); background: -moz-linear-gradient(left, rgba(37, 99, 235, 1) 0%, rgba(46, 149, 179, 1) 62%, rgba(0, 163, 147, 1) 100%); background: -webkit-gradient(left top, right top, color-stop(0%, rgba(37, 99, 235, 1)), color-stop(62%, rgba(46, 149, 179, 1)), color-stop(100%, rgba(0, 163, 147, 1))); background: -webkit-linear-gradient(left, rgba(37, 99, 235, 1) 0%, rgba(46, 149, 179, 1) 62%, rgba(0, 163, 147, 1) 100%); background: -o-linear-gradient(left, rgba(37, 99, 235, 1) 0%, rgba(46, 149, 179, 1) 62%, rgba(0, 163, 147, 1) 100%); background: -ms-linear-gradient(left, rgba(37, 99, 235, 1) 0%, rgba(46, 149, 179, 1) 62%, rgba(0, 163, 147, 1) 100%); background: linear-gradient(to right, rgba(37, 99, 235, 1) 0%, rgba(46, 149, 179, 1) 62%, rgba(0, 163, 147, 1) 100%);  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2563eb', endColorstr='#00a393', GradientType=1);}
.promo-events-view-banner-container { max-width: 1050px; width: 100%; margin: 0 auto; }
.promo-events-view-banner img {box-shadow: 0 3px 6px rgba(0,0,0,0.16); border-radius: 5px;}
.promo-events-view-banner h1 {font-size: 30px; line-height: 46px; color: #fff; font-weight: 600; margin-bottom: 9px;}
.promo-events-view-banner p {font-size: 18px; line-height: 24px; color: #fff; font-weight: 600; margin-bottom: 9px;}
.promo-event-container {max-width: 1050px; width: 100%; margin: 0 auto; padding: 0 15px;}
.promo-events-view-midcontent {padding: 16px 0;}
.promo-event-timing  {width: 100%; max-width: 357px; margin-left: auto; margin-right: 50px; padding-top: 25px;}
.promo-event-timing p {font-size: 16px; line-height: 30px; color: var(--bs-primary); font-weight: 400; padding: 0; margin-bottom: 12px; }
.promo-event-timing p span {width: 186px;  font-weight: 600; display: inline-block; }
.promo-event-description { border-right: 1px solid #707070; padding-top: 25px; }
.promo-event-description-in {max-width: 430px; width: 100%;}
.promo-event-description p { font-size: 18px; line-height: 27px; color: var(--bs-primary); font-weight: 400; padding: 0; margin-bottom: 12px; text-transform: capitalize; }
.promo-events-view-footer {padding: 5px 15px; font-size: 10px; line-height: 15px; color: #fff; text-align: center; background: rgba(37, 99, 235, 1); background: -moz-linear-gradient(left, rgba(37, 99, 235, 1) 0%, rgba(46, 149, 179, 1) 62%, rgba(0, 163, 147, 1) 100%); background: -webkit-gradient(left top, right top, color-stop(0%, rgba(37, 99, 235, 1)), color-stop(62%, rgba(46, 149, 179, 1)), color-stop(100%, rgba(0, 163, 147, 1))); background: -webkit-linear-gradient(left, rgba(37, 99, 235, 1) 0%, rgba(46, 149, 179, 1) 62%, rgba(0, 163, 147, 1) 100%); background: -o-linear-gradient(left, rgba(37, 99, 235, 1) 0%, rgba(46, 149, 179, 1) 62%, rgba(0, 163, 147, 1) 100%); background: -ms-linear-gradient(left, rgba(37, 99, 235, 1) 0%, rgba(46, 149, 179, 1) 62%, rgba(0, 163, 147, 1) 100%); background: linear-gradient(to right, rgba(37, 99, 235, 1) 0%, rgba(46, 149, 179, 1) 62%, rgba(0, 163, 147, 1) 100%);  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2563eb', endColorstr='#00a393', GradientType=1);}
.promo-events-view-main { min-height: calc(100vh - 149px);}


.starRating { display : inline-block; position : relative; height : 35px;  background : url('../img/star_empty.svg') repeat-x; vertical-align : bottom; margin-left: 0; }
.starRating div { float : left; position : relative; height : 35px; }
.starRating input { position : relative; z-index : 1; width : 34.5px; height : 35px; margin : 0; padding : 0; opacity : 0; }
.starRating label { position : absolute; top : 0; left : 0; width : 100%; height : 35px; }
.starRating span { display : none; }
.starRating input:checked + label,  .starRating:hover input:checked:hover + label { background : url('../img/star_filled.svg') repeat-x; }
.starRating:hover input:checked + label { background : transparent; }
.starRating:hover input:hover + label { background : url('../img/star_hover.svg') repeat-x; }
.error {font-size: 0.75rem !important; line-height: 1.25rem !important; font-weight: 400 !important; margin-top: 0.25rem;  color: #9F0015; }

.business-profile-new #header { border-color: #f2f2f2 !important; background: rgba(37, 99, 235, 1); background: -moz-linear-gradient(left, rgba(37, 99, 235, 1) 0%, rgba(46, 149, 179, 1) 62%, rgba(0, 163, 147, 1) 100%); background: -webkit-gradient(left top, right top, color-stop(0%, rgba(37, 99, 235, 1)), color-stop(62%, rgba(46, 149, 179, 1)), color-stop(100%, rgba(0, 163, 147, 1))); background: -webkit-linear-gradient(left, rgba(37, 99, 235, 1) 0%, rgba(46, 149, 179, 1) 62%, rgba(0, 163, 147, 1) 100%); background: -o-linear-gradient(left, rgba(37, 99, 235, 1) 0%, rgba(46, 149, 179, 1) 62%, rgba(0, 163, 147, 1) 100%); background: -ms-linear-gradient(left, rgba(37, 99, 235, 1) 0%, rgba(46, 149, 179, 1) 62%, rgba(0, 163, 147, 1) 100%); background: linear-gradient(to right, rgba(37, 99, 235, 1) 0%, rgba(46, 149, 179, 1) 62%, rgba(0, 163, 147, 1) 100%);  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2563eb', endColorstr='#00a393', GradientType=1);
    padding: 15px 15px !important; }
.business-profile-new #header .inner-header .logo a { margin: 0 !important; color: #ffffff; font-size: 20px; line-height: 1; font-weight: 600; }
.business-profile-new #header .inner-header .logo a span { margin-left: 10px; }
.business-profile-new #content .inner-con h3 { font-size: 25px; line-height: 1.5; font-weight: 500; font-family: "Kalnia", serif; }
.business-profile-new #content .inner-con .rank { font-size: 18px; }
.business-profile-new .star_new_voga, .business-profile-new #content .review .review-in p img { filter: brightness(0) saturate(100%) invert(12%) sepia(41%) saturate(6677%) hue-rotate(228deg) brightness(93%) contrast(90%); }
.business-profile-new #content .outer-content .outer .add, .business-profile-new #content .outer-content .outer .hour { padding: 20px !important; -webkit-box-shadow: 0 0 5px -2px rgba(0, 0, 0, 0.16) !important; box-shadow: 0 0 5px -2px rgba(0, 0, 0, 0.16) !important; -moz-box-shadow: 0 0 5px -2px rgba(0, 0, 0, 0.16) !important; border-radius: 15px !important; }
.business-profile-new #content .outer-content .outer .add p a { color: var(--bs-primary); text-decoration: underline; transition: all ease-in-out 0.3s; }
.business-profile-new #content .outer-content .outer .add p a:hover { text-decoration: none; }
.business-profile-new #content .inner-content { background: #ffffff; }
.business-profile-new #content .outer-content { background: #f9f9fc; padding-top: 50px; padding-bottom: 50px; }
.business-profile-new #content .outer-content .outer .hour .act { background: none !important; line-height: 25px; }
.business-profile-new .h4-heading { font-size: 25px; line-height: 1.5; font-weight: 400 !important; font-family: "Kalnia", serif; margin: 0; padding: 0 0 15px !important; color: #000; }
.business-profile-new .location-heaing { margin: 0 auto; width: 100%; max-width: 1000px; padding-bottom: 20px; }
.business-profile-new .location-heaing h4 { color: #1d1d1d; font-family: 'Kalnia', serif; font-size: 25px; font-weight: 400 !important; line-height: normal; margin: 0; padding: 0; }
.business-profile-new .location-heaing p { color: #1d1d1d; font-size: 18px; font-weight: 300; line-height: 24px; margin: 0; padding: 10px 0 0 !important; }
.business-profile-new #content .review .review-in .rev { background: #ffffff !important; border: 1px solid #2563eb !important; border-radius: 10px; margin-bottom: 17px; padding: 5px 20px 5px; }
.business-profile-new #content .review .review-in p img { margin: 0 5px 0 0 !important; }
.business-profile-new #content .review .review-in .main-heading { border: 0 !important; }
.business-profile-new #content .review .review-in p .head { padding: 0; margin: 0; border: 0 !important; font-weight: 400 !important; }
.business-profile-new .verify-author { color: #1d1d1d; font-size: 12px !important; font-weight: 300 !important; line-height: 22px !important; padding: 10px 0 !important; }
.business-profile-new .review-desc-embed { font-size: 14px !important; line-height: 22px !important; padding: 6px 0 0 !important; color: #333 !important; font-weight: 400 !important; margin: 0 !important; }
.business-profile-new .rev-title-embed { color: #1d1d1d; font-size: 14px !important; font-weight: 500 !important; line-height: 22px !important; margin: 0 !important; padding: 10px 0 !important; }
.business-profile-new .rev-date-embed { color: #333; display: inline-block; font-size: 12px; font-weight: 400; line-height: 22px; }
.business-profile-new .salon-comments-review { color: #333; display: block; font-size: 13px !important; font-weight: 400; line-height: 20px !important; border-top: 1px solid #efebeb; }
.business-profile-new .salon-comments-review b { color: #333; display: block; font-size: 14px; font-weight: 600; line-height: 22px; }
/* #textMessagePreviewModal .modal-dialog { width: calc(100% - 1rem); max-width: 320px; }
#textMessagePreviewModal .modal-content { width: 100%; margin: 0; padding: 0; box-shadow: none; border: 0; }
#emailPreviewModal .modal-dialog { width: calc(100% - 1rem); max-width: 520px; }
#emailPreviewModal .modal-content { width: 100%; margin: 0; padding: 0; box-shadow: none; border: 0; } */
.web-modal { background: #F4F6F9; border-radius: 5px; box-shadow: 0 0 7px rgba(0, 0, 0, 0.2); }
.web-modal-head { background: #FFFFFF; border-radius: 5px 5px 0 0; padding: 10px; }
.web-modal-in { padding: 10px; }
.chat-box-lft.chat-box-rgt .chat-box-in { margin-right: 5px; margin-left: 5px; }
.chat-box-rgt .chat-box-in { margin-right: 10px; margin-left: 10px; }
.chat-box-in-list { display: flex; align-items: center; width: 100%; margin-bottom: 1px; padding: 10px; transition: all ease-in-out 0.3s; }
.chat-box-in-list-img { width: 51px; height: 51px; float: left; margin-right: 15px; }
.chat-box-in-list-img img { width: 51px; height: 51px; border-radius: 100%; object-fit: cover; }
.chat-box-in-list-details { width: calc(100%); float: right; font-size: 14px; line-height: 20px; }
.chat-box-message { font-size: 12px; line-height: 16px; max-width: 100%; border-radius: 10px; padding: 2px; background: #42413D; }
.chat-box-message-in { font-size: 12px; line-height: 16px; max-width: 100%; color: #fff; border-radius: 19px 19px 19px 0; padding: 10px 15px; }
.chat-box-in span.staff-time { font-size: 10px; line-height: 18px; padding-top: 5px; max-width: 100%; display: block; color: #fff; }
.chat-box-rgt .chat-box-message { background: #fff !important; border-radius: 10px; }
.chat-box-rgt .chat-box-message-in { background: #fff !important; border-radius: 10px; color: #2C2C2C !important; }
.chat-box-rgt .chat-box-message-in p, .chat-box-rgt .chat-box-message-in p a, .chat-box-rgt .chat-box-message-in a { color: #2C2C2C !important; }
.chat-box-message-in a { word-break: break-all; }
.chat-box-rgt .chat-box-in span.staff-time { text-align: right; }
.email-view { width: 100%; margin: 5px 0; padding: 10px; background-color: #fff; border-radius: 10px; }
.highcharts-credits { display: none !important; }
.or-text { padding: 5px 10px; background: #fff; line-height: 1; border: 1px solid rgba(0, 0, 0, 0.2); margin: 0; display: inline-block; position: relative; top: -30px; border-radius: 5px; }
.select-integration-logo-main { display: flex; flex-wrap: wrap;/*margin-left: -6px; margin-right: -6px;*/
}
.iphone-modal-layer { position: absolute; left: 13.0%; top: 4.5%; right: 11.8%; bottom: 6%; border-radius: 20px; backface-visibility: hidden; overflow: hidden; background-color: #859FB6; background-repeat: no-repeat; background-size: cover; background-position: center; }
.iphone-modal-in::before { content: ''; display: block; background: url(../img/iphone_cam_layer.png) no-repeat; background-size: 130px 20px; width: 130px; height: 20px; position: absolute; top: -3px; left: 0; right: 0; margin: 0 auto; z-index: 2; }
.message-icon, .send-mail-icon, .message-dark-icon { background-color: #fff; position: absolute; width: 20px; height: 20px; right: 0; top: 0; display: flex; align-items: center; justify-content: center; border-radius: 100%; cursor: pointer; }
.message-dark-icon { background-color: #42413D !important; }
.chat-box-lft .message-icon, .chat-box-lft .send-mail-icon, .chat-box-lft .message-dark-icon { display: none; }
.chat-box-lft.chat-box-rgt .message-icon, .chat-box-lft.chat-box-rgt .send-mail-icon, .chat-box-lft.chat-box-rgt .message-dark-icon { display: flex !important; }
#textMessagePreviewModal .modal-dialog { width: calc(100% - 1rem); max-width: 350px; }
#textMessagePreviewModal .modal-content { width: 100%; margin: 0; padding: 0; box-shadow: none; border: 0; }
#emailPreviewModal .modal-dialog { width: calc(100% - 1rem); max-width: 520px; }
#emailPreviewModal .modal-content { width: 100%; margin: 0; padding: 0; box-shadow: none; border: 0; }
.iphone-modal { max-width: 298px; width: 100%; min-width: 298px; margin: 0; position: relative; right: 0px; top: 0; font-family: 'Montserrat', sans-serif; }
.iphone-modal-in { position: absolute; left: 13.3%; top: 4.5%; right: 11.8%; bottom: 6%; border-radius: 20px; backface-visibility: hidden; overflow: hidden; }
.iphone-modal-main { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.iphone-modal-mid { position: absolute; top: 47px; left: 0; bottom: 71px; right: 0; }
.iphone-modal-mid-logo { min-height: 65px; width: 100%; display: flex; align-items: center; justify-content: center; }
.iphone-modal-mid-logo img { height: 65px; max-width: 133px; width: 100%; object-fit: contain; }
.iphone-modal-mid-menu { position: absolute; top: 65px; left: 0; bottom: 0px; right: 0; overflow: auto; -ms-overflow-style: none; scrollbar-width: none; padding: 5px; }
 .iphone-modal-mid-menu::-webkit-scrollbar {
 display: none;
}
/* team css */
.previewHeader { width: 100%; display: flex; align-items: center; justify-content: space-between; background: #fff; padding: 24px 15px 17px; }
.previewHeaderLeft { display: flex; align-items: center; }
.previewHeaderLeft .backBtn { margin-right: 20px; }
.previewHeaderLeft .backBtn img { width: 26px; height: 26px; }
.BusinessLogo img { width: 47px; height: 47px; object-fit: contain; }
.BusinessLogo span { color: #2C2C2C; font-size: 16px; font-weight: 700; padding-left: 3px; }
.previewHeaderRight .btn {margin-left: .5rem !important;}
.bannerSection { padding: 60px 12px 30px; margin-bottom: 21px; width: 100%; background: -webkit-linear-gradient(to right, #1C3D99, #2580B4, #066B67); /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(to right, #1C3D99, #2580B4, #066B67);      /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(to right, #1C3D99, #2580B4, #066B67);   /* Firefox 3.6 - 15 */
  background: linear-gradient(to right, #1C3D99, #2580B4, #066B67);
}
.bannerGird { max-width: 1200px; width: 100%; margin: 0 auto; display: flex; }
.bannerGird .bannerImg { min-width: 99px; }
.bannerGird .bannerImg img { max-width: 88px; width: 100%; border-radius: 10px; margin: 0px 11px 0 auto; /*display: block;*/ object-fit: cover; }
.scheduleAppointmentWrapper { padding-bottom: 25px; }
.bannerContent h3 { font-size: 22px; font-weight: 700; color: #fff; line-height: normal; margin: 0; }
.bannerContent p { font-size: 12px; line-height: 18px; color: #fff; font-weight: 700; }
.myHoursSection { max-width: 500px; margin: 0 auto; padding: 19px 15px 0; }
.myHoursSection h3 { color: var(--bs-primary); font-size: 20px; font-weight: 700; line-height: normal; }
.head-team-h3 { color: var(--bs-primary); font-size: 20px; font-weight: 700; line-height: normal; }
.myHoursTable { padding: 0 0px 28px; }
.myHoursTable .table>tbody>tr td { padding: 7px 5px; font-size: 11px; font-weight: 400; color: #2C2C2C; border: 0; border-bottom: 1px solid #DFDFDF; }
.myHoursTable .table { border: 1px solid #B1B0B0; border-radius: 0 0 15px 15px; }
.portfolio-col figure { position: relative; margin-bottom: 7px; }
.portfolio-col figure img { width: 86px; height: 86px; display: block; object-fit: cover; border: solid 1px #B1B0B0; border-radius: 8px; margin: 0 auto; }
.portfolio-col h3 { font-size: 12px; line-height: 20px; color: #2C2C2C; text-align: center; font-weight: 400; }
.portfolio-col h3 span { display: block; }

.btn-outline-gray { background: #fff; border: 1px solid #B1B0B0; color: #2C2C2C; font-weight: 400; font-size: 12px; max-width: 125px; width: 100%; text-align: left; border-radius: 10px; }
.btn-outline-gray.disabled { background: #DFDFDF; opacity: 1; }
.role-table th { font-size: 12px; }
.disabled-icon { pointer-events: none; filter: brightness(0) saturate(100%) invert(98%) sepia(1%) saturate(369%) hue-rotate(57deg) brightness(96%) contrast(87%) !important; }
.danger-icon.disabled { pointer-events: none; }
.danger-icon.disabled img { filter: brightness(0) saturate(100%) invert(100%) sepia(1%) saturate(3105%) hue-rotate(186deg) brightness(106%) contrast(75%); }
.card-blue { border: 1px solid #707070; box-shadow: none !important; border-radius: 15px !important; }
.card-blue .card-header { background-color: #21369C; font-size: 14px; line-height: 20px; color: #fff; text-transform: uppercase; padding: 15px 8px !important; border-radius: 15px 15px 0 0 !important; font-weight: 700; }
.card-blue-center { font-size: 20px; line-height: 28px; font-weight: 700; padding: 25px 10px 20px; }
.membership.membership-gray { border-color: #B1B0B0 !important; border-radius: 0.9375rem !important; }
.membership.membership-gray .membership-gray-title { font-weight: 700; font-size: 0.9rem; color: var(--bs-body-color); padding: 0.7375rem 0.9375rem; border-color: #B1B0B0; background-color: #DFDFDF; border-radius: 0.9375rem 0.9375rem 0 0 !important; border-bottom: 1px solid #B1B0B0; text-align: center; line-height: 1.5; }
.membership.membership-gray .profile-dob ul li { font-size: 0.850rem; line-height: 1.5; color: var(--bs-body-color); font-weight: 400; margin-top: 9px; margin-bottom: 9px; }
.membership.membership-gray .profile-dob { padding: 12px 10px; }
.membership.membership-gray ul li span { width: auto; }
/* body.bg-gray-100 { background: rgba(27,49,142,0.25); background: -moz-linear-gradient(left, rgba(27,49,142,0.25) 0%, rgba(46,149,179,0.25) 45%, rgba(0,97,87,0.25) 100%); background: -webkit-gradient(left top, right top, color-stop(0%, rgba(27,49,142,0.25)), color-stop(45%, rgba(46,149,179,0.25)), color-stop(100%, rgba(0,97,87,0.25))); background: -webkit-linear-gradient(left, rgba(27,49,142,0.25) 0%, rgba(46,149,179,0.25) 45%, rgba(0,97,87,0.25) 100%); background: -o-linear-gradient(left, rgba(27,49,142,0.25) 0%, rgba(46,149,179,0.25) 45%, rgba(0,97,87,0.25) 100%); background: -ms-linear-gradient(left, rgba(27,49,142,0.25) 0%, rgba(46,149,179,0.25) 45%, rgba(0,97,87,0.25) 100%); background: linear-gradient(to right, rgba(27,49,142,0.25) 0%, rgba(46,149,179,0.25) 45%, rgba(0,97,87,0.25) 100%);  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2563eb', endColorstr='#006157', GradientType=1 );} */
body.bg-gray-100{background: radial-gradient(rgba(210, 241, 223, 0.3), rgba(211, 215, 250, 0.3), rgba(186, 216, 244, 0.3)) 0 0 / 400% 400%; background-size: 400% 400%; animation: gradient-animation 15s ease infinite;}
@keyframes gradient-animation {
    0% { background-position: 0% 0%; }
    50% { background-position: 100% 100%;}
    100% { background-position: 0% 0%; }
}
.btn-check-green {  border: 1px solid #5d87ff !important;  color: #2C2C2C !important;  font-size: 12px !important;  line-height: 16px !important;  background: #fff !important;  width: auto !important;  border-radius: 8px !important;  font-weight: 400 !important;  text-transform: uppercase !important;  margin: 0 5px 5px 0 !important;  text-align: center !important;  padding-left: 5px;  padding-right: 5px;  box-shadow: none !important;
}
.btn-check:checked+.btn-check-green { background: #5d87ff !important; color: #fff !important;}
.min-150 { min-width: 150px !important;}
.min-100 { min-width: 100px !important;}
.min-90 { min-width: 90px !important;}
.min-60 { min-width: 60px !important;}
.min-37 { min-width: 37px !important;}
.min-h-36 { min-height: 36.6px !important;}
.border-right-gray {border-right: 1px solid #e1e7ef !important; margin-right: 1px;}
.breadcrumb-top {border: 0 !important; margin-bottom: 5px !important; background: transparent !important; }
.breadcrumb-top .card-body {border: 0 !important; margin-bottom: 0px !important; padding: 0 !important; }
.breadcrumb-top .card-body .col-9 {width: 100% !important; max-width: 100% !important; display: flex; align-items: center !important; justify-content: space-between !important; }
/* .breadcrumb-top .card-body .col-9 h4 { margin-bottom: 10px; text-transform: capitalize;}
.breadcrumb-item+.breadcrumb-item  { text-transform: capitalize;} */
.breadcrumb-top .card-body .col-9 h4 { margin-bottom: 10px; }

.breadcrumb-top .card-body .col-9 nav { margin-bottom: 10px;}
.breadcrumb-top .card-body .col-3 {display: none !important;}
.body-wrapper {  padding-top: calc(70px + 15px) !important;}

/* .table.table-bordered.dataTable th, table.table-bordered.dataTable td{word-break: break-all; white-space: normal;} */


.bg-info-subtle .col-3 .mb-n5{margin: 0 !important;}
.bg-info-subtle .col-3 .mb-n5 img{    height: 110px; object-fit: contain;}

.app-preview-box{background: var(--bs-body-bg) !important; border-radius: 10px; border: solid 1px #B1B0B0; padding: 10px; /*text-align: center;*/ min-height: 142px;}
.app-preview-box .no-details{color: #797978;  font-size: 12px; line-height: 16px; padding-top: 30px;}
.app-preview-box p{font-size: 12px; line-height: auto;}
.referral-details-cont ul{list-style: none; padding: 0; margin: 15px 0 0; max-width: 430px;}
.referral-details-cont ul li{font-size: 12px; line-height: 18px; color: #2C2C2C; display: flex; margin: 0 0 8px;}
.referral-details-cont ul li strong{width: 60%; font-weight: 500; color: var(--bs-primary);}
.referral-details-cont ul li span{text-align: left; width: 40%;}
.users-preview-card{max-width: 360px; width: 100%;}
.black-icon img{filter: brightness(0) saturate(100%) invert(16%) sepia(79%) saturate(16%) hue-rotate(109deg) brightness(97%) contrast(101%);}
.users-preview-card ul{list-style: none; display: flex; padding: 0; margin: 0 -2.5px; flex-wrap: wrap;}
.users-preview-card ul li{padding: 0 2.5px;}
.qr-code-card{max-width: 190px; width: 100%;}
.qrcode-right{flex: 1; padding: 0 0 0 20px;min-height: 100%; flex-flow: column;}
.qrcode-right a{margin: auto 0 0; padding: 5px;}
.redemptions-details-cont.referral-details-cont ul{max-width: 840px;}
.redemptions-details-cont.referral-details-cont ul li strong{width: 30%;}
.redemptions-details-cont.referral-details-cont ul li span{width: 70%;}
.search-form-control{background-image: url(../img/search_icon.svg); background-size: 13px; background-repeat: no-repeat; background-position: 98%;padding-right: 25px;}
.reports-right-card{display: flex; flex-wrap: wrap; flex: auto; justify-content: flex-end; margin-bottom: 5px;}
.reports-right-card .btn-link{padding: 0 5px; line-height: 0;}
.reports-card-border-head.reports-card-head{border-bottom: 1px solid #707070; padding: 8px 10px 2px 10px;margin:0 25px;}
.reports-card-border-head.reports-card-head h2{font-size: 12px; line-height: 16px; font-weight: 400;}
.report-chart-table .over-scroll .table th{font-size: 12px !important; line-height: 16px !important; color: #2C2C2C !important; font-weight: 400;}
.report-chart-table .over-scroll .table td{ border-radius: 0 !important; font-size: 11px; line-height: 15px;}
.report-chart-table .over-scroll .table tbody tr:nth-of-type(odd){background: #F7F8F9;}
.report-chart-table .report-chart.report-wise-chart [id*=container-]{display: block;}
.select2-container.select2-container--open {z-index: 999;}
.ui-menu.ui-widget.ui-widget-content { z-index: 99999999 !important;}
.fancybox__container {    z-index: 99999 !important;}
.fancybox-button[disabled], .fancybox-button[disabled]:hover, .fancybox-button--zoom{display: none !important;}

/* For Chrome, Edge, and Safari */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* For Firefox */
input[type="number"] {
    -moz-appearance: textfield;
}
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear,
input[type="password"]::-webkit-contacts-auto-fill-button,
input[type="password"]::-webkit-credentials-auto-fill-button {
  display: none !important;
}

input[type="password"]::-webkit-reveal-button {
  display: none;
}

.table-responsive .dataTables_wrapper select {  --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");  display: block;  width: 100%;  padding: .25rem 1.625rem .25rem .5rem !important;  font-size: .765625rem;  font-weight: 400;  line-height: 1.5;  color: #5a6a85;  -webkit-appearance: none;  -moz-appearance: none;  appearance: none;  background-color: #ffffff;  background-image: var(--bs-form-select-bg-img),var(--bs-form-select-bg-icon,none);  background-repeat: no-repeat;  background-position: right 10px center;  background-size: 16px 12px;  border: var(--bs-border-width) solid #e1e7ef;  border-radius: 5px;  box-shadow: unset;  transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out; }

@media (prefers-reduced-motion:reduce) {
    .table-responsive .dataTables_wrapper select {  transition: none }
}

.table-responsive .dataTables_wrapper select:focus { border-color: #aec3ff; outline: 0; box-shadow: unset,0 0 0 .25rem rgba(93,135,255,.25); }
.table-responsive .dataTables_wrapper select[multiple],.table-responsive .dataTables_wrapper select[size]:not([size="1"]) { padding-right: 16px; background-image: none; }
.table-responsive .dataTables_wrapper select:disabled {  background-color: var(--bs-secondary-bg);}
.table-responsive .dataTables_wrapper select:-moz-focusring { color: transparent; text-shadow: 0 0 0 #5a6a85; }

[data-layout=vertical] body[data-sidebartype=mini-sidebar] .logo-img img { width: 40px !important; height: 40px !important; }
.sidebar-nav .simplebar-content { padding: 0 10px !important;}
.min-68 {min-width: 68px;}
.logo-img { display: flex; align-items: center; }
.logo-img .dark-text {max-width: 190px;}
.action-btn, .table-menu-action {display: flex; align-items: center; gap: 0.5rem;}
.action-btn>*, .table-menu-action>* {margin: 0 !important;}
.table-responsive .dataTables_wrapper .dataTables_paginate .paginate_button {display: inline-block; margin: 0; padding: 0; border: 0;}
.highcharts-contextmenu {    z-index: 1000 !important; /* Ensure the menu appears above other elements */}
.dt-buttons {margin-bottom: 15px;}
/* #dashboard_div .reports-card-body {display: flex; flex-wrap: wrap; align-items: center; justify-content: center;} */
/* .left-sidebar {z-index: 9999;} */
.left-sidebar {z-index: 11;}

body.modal-open .left-sidebar, body.swal2-shown .left-sidebar{z-index: 9;}
[data-layout=vertical] body[data-sidebartype=mini-sidebar] .left-sidebar:not(:hover) .sidebar-nav .simplebar-content  { padding: 0 24px !important;}
[data-layout=vertical] body[data-sidebartype=mini-sidebar] .left-sidebar:not(:hover) .brand-logo  { padding: 0 24px !important;}
.brand-logo a img {object-fit: contain;}
.left-sidebar:not(:has(.fixed-profile)) .scroll-sidebar {height: calc(100vh - 70px);}

ul.billing-info-list{display: flex; flex-wrap: wrap; flex-wrap: wrap; margin-left: -12px; margin-right: -12px;}
ul.billing-info-list li{width: 50%; padding-left: 12px; padding-right: 12px; margin-bottom: 10px;}
ul.billing-info-list li label{font-weight: 700;}
.modal-backdrop.show + .select2-container, .zls-sptwndw + .select2-container {  z-index: 999999999;}

.selectArrow + .select2-container--default .select2-selection--multiple .select2-selection__rendered:after{ content: '';
    position: absolute; /*right: 13px; top: 11px;*/right: 0; top: 0; background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") no-repeat; /*background-size: 9px 6px;
    background-position: 98%; background-position: calc(100% - 10px) 9px;*/ /* width: 16px; height: 12px;*/  width: 38px;
    height: 100%;
    background-size: 16px 12px;
    background-position: 11px 13px; cursor: pointer;}
.selectArrow + .select2-container--default .select2-selection--multiple .select2-selection__clear{    margin-right: 1px !important; background: #fff; z-index: 111;     font-size: 17px !important;}
.multiple-arrow + .select2 .select2-selection--multiple {padding-right: 25px !important;  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: 98%; background-position: right 16px center; background-size: 16px 12px;}
.select2-container--default .select2-selection--multiple { border: var(--bs-border-width) solid #e1e7ef !important; border-radius: 7px !important; padding-left: 12px !important; padding-right: 30px !important;}
.select2-container .select2-search--inline .select2-search__field::-moz-placeholder { color: var(--bs-secondary-color) !important; opacity: 1}
.select2-container .select2-search--inline .select2-search__field::placeholder { color: var(--bs-secondary-color) !important; opacity: 1}
.select2-container--default .select2-selection--single .select2-selection__clear {height: 15px !important; width:15px; line-height: 15px; margin-top: 10px; margin-right: 32px !important;}
select.form-control, select.form-select {color: var(--bs-secondary-color);} /* Placeholder text color */
select.form-control option, select.form-select option {color: #7c8fac;}
select.form-control option[value=""], select.form-select option[value=""] {color: var(--bs-secondary-color); /* Placeholder text color */}
input[type="search"]::-webkit-search-cancel-button { padding-right: 18px;}
input[type="search"]::-webkit-search-decoration:hover, input[type="search"]::-webkit-search-cancel-button:hover { cursor:pointer; }
select.select2.small-select + .select2-container--default .select2-selection--single .select2-selection__rendered {height: 25px !important; padding: 0 0.70rem !important; border-color: #B1B0B0; font-size: 0.75rem;
    font-weight: 400;
    color: #2c2c2c;}

select.select2.small-select + .select2-container--classic .select2-selection--single, select.select2.small-select + .select2-container--classic .select2-selection--single .select2-selection__arrow, select.select2.small-select + .select2-container--classic .select2-selection--single .select2-selection__rendered, select.select2.small-select + .select2-container--default .select2-selection--multiple, select.select2.small-select + .select2-container--default .select2-selection--single, select.select2.small-select + .select2-container--default .select2-selection--single .select2-selection__arrow, select.select2.small-select + .select2-container--default .select2-selection--single .select2-selection__rendered {height: 25px !important; line-height:23px !important; border-color: #B1B0B0 !important;}

select.form-control:valid, select.form-select:valid {color: #7c8fac; /* Change text color when a valid option is selected */}
.review-gallery-img {width: 100%; padding-bottom: 100%; position: relative; background: rgba(0, 0, 0, 0.09); border-radius: 5px; margin-bottom: 5px;}
.review-gallery-img img {width: 100%; height: 100%; border-radius: 5px; object-fit: contain; position: absolute; left: 0;}
.review-gallery-gird p {font-size: 13px; line-height: 20px; }

.quick-list-res {display: block;}
.quick-list-res-item { width: 150px; height: 80px;  padding: 0px; border-radius: 5px; font-size:12px ; line-height: 16px; margin:0 5px 10px; display: inline-flex; align-items: center; justify-content: center; word-break: break-all; position: relative;}
.quick-list-res-item>span { display: inline-flex; align-items: center; justify-content: center; word-break: break-all; width: 100%; height: 100%; padding: 5px;     flex-direction: column; }
.quick-list-res-item small {font-size: inherit;}
.quick-list-res-item-icon {filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(2726%) hue-rotate(349deg) brightness(99%) contrast(114%); width: 30px;  height: 30px; margin: 0 0 5px;}
.btn-yellow .quick-list-res-item-icon {filter: brightness(0) saturate(100%) invert(0%) sepia(3%) saturate(7490%) hue-rotate(32deg) brightness(100%) contrast(101%);}
.quick-list-res-item .timer  {display: flex; position: absolute; top: 0; right: 4px; font-size: 9px; }
.quick-list-res-item .timer .minutes {margin-right: 5px;}

.checked-btns .btn-primary { margin: 0 8px 6px 0; }
.checked-btns .btn-check:checked + .btn-primary img {filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(2726%) hue-rotate(349deg) brightness(99%) contrast(114%); }
.checked-btns.checked-btns-icons {flex-wrap: wrap; display: flex; margin: 0 0 26px 0; max-width: 450px;}
.checked-btns.checked-btns-icons .btn-primary { min-width: 135px; display: inline-flex; align-items: center; justify-content: space-between; margin: 0 6px 6px 0; }
.checked-btns .btn-primary img { transition: all ease-in-out 0.15s; filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(2726%) hue-rotate(349deg) brightness(99%) contrast(114%); }
.client-row .client-name, .client-entry .client-name {flex: 1; word-break: break-all; }
/* manual tooltip */
/* .tooltip {text-transform: capitalize;} */
.custom-tooltip-trigger { position: relative; cursor: pointer;}
.custom-tooltip-trigger::after { content: attr(data-title); position: absolute; top: 100%; left: 50%; transform: translateX(-50%);  z-index: 1070; padding: 0.25rem 0.5rem; color: #fff; background-color: #2a3547; border-radius: 0.5rem; font-size: 0.75rem; line-height: 1.5; box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); opacity: 0; visibility: hidden; transition: opacity 0.2s, visibility 0.2s; pointer-events: none;  max-width: 150px; text-align: center; word-break: normal; white-space: normal; word-spacing: normal; line-break: auto; word-wrap: break-word; width: 150px;}

.custom-tooltip-trigger::before { content: ''; position: absolute; top:calc(100% - 10px); left: 50%; transform: translateX(-50%); border-width: 0.8rem; border-style: solid; border-color: transparent; opacity: 0; visibility: hidden; transition: opacity 0.2s, visibility 0.2s; bottom: -1px;
    border-width: 0 calc(0.8rem* .5) 0.4rem;
    border-bottom-color: #2a3547}
    .custom-tooltip-trigger:hover::after,
    .custom-tooltip-trigger:hover::before { opacity: 1; visibility: visible; }
.custom-tooltip-trigger[data-width="200px"]::after {width: 200px; max-width: 200px;}
.custom-tooltip-trigger[data-width="250px"]::after {width: 250px; max-width: 250px;}

.sidebar-nav ul .sidebar-item.selected .sidebar-link.has-arrow::after { border-color: var(--bs-white); transform: rotate(-135deg) translate(0, -50%);}
.quick-list-res-desc {width: 100%; float: left; }
.select2-container--default .select2-selection--single .select2-selection__arrow b { margin-left: -9px !important; margin-top: -2px !important; position: absolute !important; top: 50% !important; width: 12px !important; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important; height: 12px !important; border: 0 !important; background-repeat: no-repeat !important; }
.select2-container .select2-selection--single .select2-selection__rendered { padding-left: 12px !important; padding-right: 26px !important;}
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b { transform: rotate(180deg) !important; }

.shop-register-lft {max-height: calc(100vh - 200px); overflow: auto;}
.shop-register-rgt {max-height: calc(100vh - 200px); overflow: auto;}
.check-card-items  {position: relative; }
.check-card-items .form-check-input {position: absolute; opacity: 0; left: 0; top: 0;}
.check-card-items .form-check-input + .card.form-check-label {cursor: pointer;}
.check-card-items .form-check-input:checked + .card.form-check-label {background: #e6fffa !important;}
.check-card-items .form-check-input:checked + .card.form-check-label .ti-credit-card:before { content: "\ea67"; animation: zoomInOut 0.5s ease forwards; }
/* Keyframes for zoom-in and zoom-out effect */
@keyframes zoomInOut {
    0% {
        transform: scale(1); /* Default size */
    }
    50% {
        transform: scale(1.3); /* Zoom in */
    }
    100% {
        transform: scale(1); /* Zoom out back to normal */
    }
}
.reports-card { border:1px solid #dee2e6; }
.reports-card-border-head.reports-card-head {  border-bottom: 1px solid #dee2e6;}
/* .fc-resourceTimelineWeek-view.fc-view .fc-timeline-event-harness{ margin-bottom: 5px;} */
.page-wrapper .body-wrapper>.container-fluid { min-height: calc(100vh - 161px);}
.emoji2 {cursor: pointer;}

/*multiselect*/
.custom-select-all {
    padding: 8px;
    text-align: center;
    background: #f8f8f8;
    cursor: pointer;
    font-weight: bold;
    border-bottom: 1px solid #ddd;
}
.custom-select-all:hover {
    background: #e0e0e0;
}
.select2-container--default .select2-results__option {
    padding-left: 30px;
    position: relative;
}

body #addon_services .select2-results__options {  display: flex; flex-wrap: wrap;}
body #addon_services .select2-results__option {  width:100%;  padding: 0;}
body #addon_services .select2-results__option label { padding: 8px 10px 8px 30px;}
td.fc-timeline-slot.fc-timeline-slot-lane.fc-day.fc-day-future:not(.business-close-date) {cursor: pointer;}
td.fc-timeline-slot.fc-timeline-slot-lane.fc-day.fc-day-today:not(.business-close-date) {cursor: pointer;}
.dataTables_processing {display: none !important;}
.dataTables_processing>div:last-child>div {all: unset;}
.dataTables_processing>div:last-child>div:first-child { display: inline-block; width: var(--bs-spinner-width); height: var(--bs-spinner-height); vertical-align: var(--bs-spinner-vertical-align); border-radius: 50%; animation: var(--bs-spinner-animation-speed) linear infinite var(--bs-spinner-animation-name) }
 @keyframes spinner-table {  to { transform: rotate(360deg)}}
 .dataTables_processing>div:last-child>div:first-child { --bs-spinner-width: 2.3rem; --bs-spinner-height: 2.3rem; --bs-spinner-vertical-align: -0.125em; --bs-spinner-table-width: 0.25em; --bs-spinner-animation-speed: 0.75s; --bs-spinner-animation-name: spinner-table; border: var(--bs-spinner-table-width) solid var(--bs-primary); border-right-color: transparent }
.spinner-table-sm {  --bs-spinner-width: 1rem; --bs-spinner-height: 1rem; --bs-spinner-table-width: 0.2em   }
@media (prefers-reduced-motion:reduce) {  .dataTables_processing>div:last-child>div:first-child {  --bs-spinner-animation-speed: 1.5s}}
.dataTables_processing>div:last-child>div:nth-child(2){display: block;  width: 40px; height: 40px; position: absolute; top: calc(0% - -5.5px); left: 0; right: 0; margin: 0 auto; background: url('../images/webappcloud.png') no-repeat center; background-size: contain;}
[data-bs-theme=dark] #emailPreviewModal .btn-close  {filter: none !important;}
.team-apt-schedule-in { width: 100%; max-width: 1200px; margin: 0 auto; }
.fileuploader-theme-dragdrop .fileuploader-input h3 {width: 100%;}
.upload-container .upload-box { display: block; padding: 40px 30px;  background: var(--bs-body-bg); border: 1px dashed #9096A2; border-spacing: 5px; border-radius: 10px; text-align: center; margin-bottom: 0; -webkit-transition: background-color 0.2sease; transition: background-color 0.2sease; position: relative; cursor: pointer;}
.upload-box .file-upload {width: 0; height: 0; position: absolute; opacity: 0;}
#selected-tags .badge.bg-primary .btn-close {width: 8px; height: 9px; opacity: 1; min-width: 8px; min-height: 8px; padding: 0;}

.cash-caontainer-pop {padding: 0 !important;   }
.cash-caontainer-pop .card {border: 0 !important; box-shadow: none !important;}
.cash-caontainer-pop .swal2-popup {width: 100%; min-height: 100vh; max-width: 700px; border-radius: 0 !important; margin-left: auto !important; display: flex !important; flex-direction: column;}
.cash-caontainer-pop .calculator {width: 100% !important; box-shadow: none !important; padding: 0 !important; border: 0 !important;  background: no-repeat !important;      }
.cash-caontainer-pop .card.border-info {width: 100% !important; max-width: 100% !important; }
.calculator-head {display: flex; width: 100%;}
.cash-caontainer-pop .swal2-title {padding: 10px !important; background-color: #007bbd !important; color: #fff !important; font-size: 18px !important; line-height: 25px !important; }
.buttons-dollar {display: flex;}
.buttons-dollar .btn {flex: 1;}
.cash-caontainer-pop .form-control {border: 0 !important;}
.cash-caontainer-pop .form-control:focus { background: #ffffff !important; }
.cardapt-des .modal-dialog {border: 0 !important; box-shadow: none !important; width: 100%; min-height: 100vh; max-width: 700px !important; border-radius: 0 !important; margin: 0 !important; margin-left: auto !important;}
.cardapt-des .modal-dialog .modal-content {width: 100%; min-height: 100vh; max-width: 700px !important; border-radius: 0 !important;}
.cardapt-des .modal-header {background-color: rgb(0, 123, 189) !important; color: rgb(255, 255, 255) !important; font-size: 18px !important; line-height: 25px !important; padding: 10px !important; border: 0 !important; border-radius: 0 !important;}
.cardapt-des .modal-header .modal-title {background-color: rgb(0, 123, 189) !important; color: rgb(255, 255, 255) !important; font-size: 18px !important; line-height: 25px !important; }
#dynamicModal .form-group:has(select) { position: relative; }
.dt-button label {color:#2a3547 !important;}
.click-cart .card-img-top {object-fit: cover;}
#bookings-loader {position: fixed; width: 100%; height: 100%; left: 0px; top: 0px; background: rgba(255, 255, 255, 0.5); backdrop-filter: blur(5px); z-index: 999;}
#bookings-loader .spinner-border {position: absolute; left: 50%; top: 50%; margin: -40px;}
/* .ui-datepicker {z-index: 99 !important;} */
.navbar-top li.nav-item {list-style: none;}
.navbar-top li.nav-item::marker {display: none;}
.highcharts-pie-series .highcharts-point {stroke: none !important;}

#image-preview-container-push {
    display: none;
    width: 100%;
    max-height: 200px;
    border: 1px solid #dee2e6;
    border-radius: 5px;
    padding: 10px;
    overflow: hidden;
    justify-content: center;
    align-items: center;
  }
  #image-preview-container-push img {
    width: 100%;
    height: 200px;
    object-fit: contain;
  }

  #image-preview-container-push img[src=""] {
    display: none !important;
  }

  #image-preview-push {
    max-height: 380px;
    width: auto;
  }

  #removeButton-push {
    display: none;
  }

  .hidden-input-push {
    display: none;
  }
  .review-reply .avatar {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background-color: #007bff;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 18px;
  }
  .review-reply .avatar img {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    object-fit: cover;
  }

  .review-reply-review-item {
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 16px;
    margin-bottom: 24px;
  }

  .review-reply .platform-icon {
    width: auto;
    height: 16px;
  }

  .review-reply .badge-neutral {
    background-color: #fd7e14;
  }

  .review-reply .response-box {
    background-color: #eaf4ff;
    border-radius: 4px;
    padding: 12px;
    font-size: 0.95rem;
  }

  .review-reply .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    margin-bottom: 6px;
    margin-top: 24px;
  }

  .review-reply .section-header .link {
    font-weight: normal;
    font-size: 0.9rem;
    color: #0d6efd;
    cursor: pointer;
    text-decoration: none;
  }

  .review-reply .spinner-container {
    padding: 12px;
  }
  .time_appointment_filter {display: flex; align-items: center;}
  /* .table-responsive .dataTables_wrapper .dataTables_paginate .paginate_button {padding: 0 !important; border: 0 !important;} */
  .filter-white {filter: grayscale(1) invert(1);}
  .select2-container--default .select2-selection--single:has(.select2-selection__clear) .select2-selection__rendered {padding-right: 26px !important;}
  .minicolors-theme-default .minicolors-input {
    height: 40px !important;
    width: 100% !important;
    display: inline-block;
    padding-left: 26px; /* LTR */
  }
  .minicolors-theme-default.minicolors {
    width: 100% !important;
  }
  .minicolors-theme-default .minicolors-swatch {
    top:10px !important;
    cursor: pointer;
  }

.ai-genarate-head{max-width: 670px;}
.ai-genarate-head span{width: 40px;height: 40px;display: inline-flex;align-items: center;justify-content: center;}
.segments-card-row .border-primary::before{ content: "";position: absolute;top: 0;left: 0;height: 4px;width: 100%;background: linear-gradient(135deg, #4d9ef7, #387ef5);border-top-left-radius: 0.5rem;border-top-right-radius: 0.5rem;}
.segments-card-row .border-pink::before{ content: "";position: absolute;top: 0;left: 0;height: 4px;width: 100%;background: linear-gradient(135deg, #e45ae4, #a560f5);border-top-left-radius: 0.5rem;border-top-right-radius: 0.5rem;}
.segments-card-row .border-success::before{ content: "";position: absolute;top: 0;left: 0;height: 4px;width: 100%;background: linear-gradient(135deg, #2fd071, #18b46e);border-top-left-radius: 0.5rem;border-top-right-radius: 0.5rem;}
.segment-icon{width: 35px;height: 35px;display: inline-flex;align-items: center;justify-content: center; border-radius: 8px;}
.segments-card-row .border-primary .segment-icon{background: linear-gradient(135deg, #4d9ef7, #387ef5);}
.segments-card-row .border-pink .segment-icon{background: linear-gradient(135deg, #e45ae4, #a560f5);}
.segments-card-row .border-success .segment-icon{background: linear-gradient(135deg, #2fd071, #18b46e);}
.customer-segments-cont .list-group-item{border: solid 1px #e1e7ef; border-radius: 8px !important;}
.generate-exist-list{max-height: 240px; overflow: auto;}

.push-analytics-cont svg { display: inline-block; }
.analytics-card{      border: 1px solid #c1c1c1;
  text-align: left !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 10px;
  padding: 12px;}
.analytics-card h4{     font-size: 16px;
line-height: 24px;
padding-bottom: 5px;}
.analytics-card strong{    font-weight: bold;
color: #000 !important;
font-size: 18px;}
.push-analytics-tabs{display: flex; align-items: center; justify-content: space-between;}
.push-analytics-tabs ul{    background: #f5f5f4;  padding: 4px;     border-radius: 8px;}
.push-analytics-tabs ul li .nav-link.active{    background: #fff; color: #000;}
.push-analytics-tabs-select{display: flex; align-items: center;}
.campaign-list{    border: 1px solid #c1c1c1;
padding: 15px;
border-radius: 12px;}
.analytics-card-item{text-align: center; padding: 10px;}
.analytics-card-item strong{    font-size: 16px;
  font-weight: bold;
  display: block;
  color: #000;}
.analytics-card-item-title{    display: flex; align-items: center; justify-content: space-between; width: 100%;}

.generate-modal-cont .push-analytics-tabs ul{width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;}
.generate-modal-cont .push-analytics-tabs ul li .nav-link{display: block; width: 100%;}
.previewtabs-grid .nav-link{border: solid 1px #e7e5e4; font-size: 15px; line-height: 20px;}
.text-muted{color: #78716c !important;}
[data-bs-theme=dark] .text-muted{color: var(--bs-secondary-color) !important;}
[data-bs-theme=dark] #selectedColor{    border: var(--bs-table-border-color) !important;}
[data-bs-theme=dark] .btn-outline-secondary{     color: rgb(124, 143, 172) !important;}
.emailversion-card::before{content: "";position: absolute;top: 0;left: 0;height: 100%;width: 4px;background: linear-gradient(135deg, #4d9ef7, #387ef5); border-radius: 4px 0px 0px 4px;}
.smsversion-card.emailversion-card::before{background: linear-gradient(135deg, #2fd071, #18b46e);}



.dashboard-nuflow-main{width: 100%;min-height: 100%;padding: 0;}
.nuflow-card .nuflow-card-body, .nuflow-reports-tb-card .nufloe-reports-card-body{    border: 1px solid #e1e7ef;border-radius: 10px;background: #fff;padding: 12px;box-shadow: 0 0 transparent, 0 0 transparent, 0 1px 2px 0 rgba(0, 0, 0, 0.05); height: 100%;}
.sales-grid .sales-grid-inner h3 {font-size:20px;color: #020817;font-weight: 900;}
.sales-grid .icon {width:35px;height: 35px;background: #eee;border-radius: 12px;display: flex;align-items: center;justify-content: center;}

.sales-grid .icon svg {width: 22px;height: 22px;}

.sales-report p {color: #65758b;font-weight: 500;}

.nuflow-card .nuflow-card-body p {font-size: 12px;}
.nuflow-bo-inner-cards{display: flex;flex-wrap: wrap;gap: 10px;}
.nuflow-bo-inner-cards .nuflow-card{max-width: 100%;width: 100%;flex: 1;min-width: 150px;}
.nuflow-bo-inner-cards .nuflow-card .sales-grid  .sales-grid-inner{flex: 0 0 75%;}
.sales-grid{padding: 2px 0 6px;}
.nuflow-ob-cards{margin-bottom: 28px;}
.nuflow-reports-tb-card .nufloe-reports-card-body{padding: 0px;}
.sales-reports-column-grid, .sales-filter-name{padding: 16px;}
.sales-filter-name{ border-bottom: 1px solid #e1e7ef;  padding-bottom: 20px;}


/* -===== Tb =====*/
table.sales-tb{margin: 0 !important;}
table.sales-tb tr th{border: 0 !important;font-size: 12px;border: 0 !important;text-align: center;}
table.sales-tb tr td { font-size: 12px;border: 0 !important;vertical-align: middle;color: #48566a !important;}


 .detail-row {
    display: none;
  }
  .detail-row.show {
    display: table-row;
  }
  .min-w-150{min-width: 100px;}
  .badge-name{
        position: relative;
    background: #e1e7ef;
    padding: 9px;
    border-radius: 20px;
    margin-right: 8px;
    color: #48566a;
  }
  .card-payment svg, .bank-transfer svg, .cash svg{width: 16px;
    height: 16px;}
      .card-payment, .bank-transfer, .cash{gap: 5px;}
      table.sales-tb tr td .card-payment span {color: #2463eb;font-weight: 600;}
      table.sales-tb tr td .card-payment svg {filter: brightness(0) saturate(100%) invert(26%) sepia(82%) saturate(1617%) hue-rotate(207deg) brightness(109%) contrast(98%);}

         table.sales-tb tr td .bank-transfer span {color: #4b5563;font-weight: 600;}
      table.sales-tb tr td .bank-transfer svg {filter: brightness(0) saturate(100%) invert(34%) sepia(12%) saturate(727%) hue-rotate(176deg) brightness(86%) contrast(85%);}

         table.sales-tb tr td .cash span {color: #16a34a;font-weight: 600;}
      table.sales-tb tr td .cash svg {filter: brightness(0) saturate(100%) invert(44%) sepia(20%) saturate(1615%) hue-rotate(89deg) brightness(108%) contrast(97%);}

.dashboard-nuflow-main .fw-bold{font-weight: 700 !important;}
.dashboard-nuflow-main .dataTable-bottom{ padding: 0 10px 10px !important;}
      .detail-row.show td{padding:  0 !important;}
      table.sales-tb{padding-bottom: 10px;}

      .hiddenRow  .table {
            border: 1px solid #e1e7ef;
    border-radius: 10px;    border-spacing: 0px;
    table-layout: fixed;
    border-collapse: separate;
      }
        .hiddenRow  .table  tr th,   .hiddenRow  .table tr td {
            text-align: left !important;padding: 8px 16px !important;
        }
        table.sales-tb tr.accordion-toggle{cursor: pointer;}
          table.sales-tb .accordion-toggle td.arrow svg{transition: all 0.3s linear;}
      table.sales-tb .accordion-toggle[aria-expanded="true"] td.arrow svg {
    transform: rotate(90deg);
    transition: all 0.3s linear;
    transform-origin: center;
}
.dashboard-nuflow-main .badge-pending{background: #dcebfe !important;color: #2463eb !important;}
.dashboard-nuflow-main .badge-voided{background: #f1f5f9 !important;color: #344256 !important;}

       .hiddenRow  .table tr th:first-child {border-top-left-radius: 10px;}
       .hiddenRow  .table tr td:first-child {border-bottom-left-radius: 10px;}

        .hiddenRow  .table tr th:last-child {border-top-right-radius: 10px;}
       .hiddenRow  .table tr td:last-child {border-bottom-right-radius: 10px;}

       .hiddenRow  .table tr th, .hiddenRow  .table tr td{border: 0 !important;text-align: center;}

    table.sales-tb .bg-success{background: #d1fae5 !important; color: #1d8660 !important;font-size: 10px;padding: 5px 8px;font-weight: 600;}
   .dashboard-nuflow-main .badge{
        position: relative;
   font-size: 10px;
    padding: 5px 8px;
    font-weight: 600;
    border-radius: 20px;
    margin-right: 8px;
    color: #fff;
    font-size: 10px;
  }
    .detail-row .badge{
        position: relative;
   font-size: 10px;
    padding: 5px 8px;
    font-weight: 600;
    border-radius: 20px;
    margin-right: 8px;
    color: #fff !important;
    font-size: 10px;
  }
  .icons-action svg {width: 16px;height: 16px;}
  .icons-action svg {filter: brightness(0) saturate(100%) invert(26%) sepia(82%) saturate(1617%) hue-rotate(207deg) brightness(109%) contrast(98%);}


 .dashboard-nuflow-main table.dataTable thead th.sorting:before,
.dashboard-nuflow-main table.dataTable thead th.sorting_asc:before,
.dashboard-nuflow-main table.dataTable thead th.sorting_desc:before {
  display: none !important; /* Hide the default or first arrow */
}

.dashboard-nuflow-main table.dataTable thead th.sorting:after,
.dashboard-nuflow-main table.dataTable thead th.sorting_asc:after,
.dashboard-nuflow-main table.dataTable thead th.sorting_desc:after {
  content: '' !important;
  background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWFycm93LXVwLWRvd24gaC0zIHctMyI+PHBhdGggZD0ibTIxIDE2LTQgNC00LTQiPjwvcGF0aD48cGF0aCBkPSJNMTcgMjBWNCI+PC9wYXRoPjxwYXRoIGQ9Im0zIDggNC00IDQgNCI+PC9wYXRoPjxwYXRoIGQ9Ik03IDR2MTYiPjwvcGF0aD48L3N2Zz4=') no-repeat !important;
  background-size: 13px !important;
 background-size: 13px !important;
    background-position: right center;
    width: 20px;
    height: 20px;
    top: 18px !important;
}
.dashboard-nuflow-main table.sales-tb .badge.bg-success{
 background: #e1e7ef; color: #48566a;
  }


/* === colors ====*/

.dashboard-nuflow-main .report-success p{color: #36d399;}
.dashboard-nuflow-main .report-success svg {width: 12px;height: 12px;filter: brightness(0) saturate(100%) invert(63%) sepia(84%) saturate(350%) hue-rotate(106deg) brightness(95%) contrast(88%);}

.dashboard-nuflow-main .success{background: #d1fae5 !important;}
.dashboard-nuflow-main .success svg {filter: brightness(0) saturate(100%) invert(65%) sepia(14%) saturate(1675%) hue-rotate(106deg) brightness(103%) contrast(96%);}


.dashboard-nuflow-main .blue{background: #dcebfe !important;}
.dashboard-nuflow-main .blue svg {filter: brightness(0) saturate(100%) invert(26%) sepia(82%) saturate(1617%) hue-rotate(207deg) brightness(109%) contrast(98%);}

.dashboard-nuflow-main .slate{background: #f1f5f9 !important;}
.dashboard-nuflow-main .slate svg {filter: brightness(0) saturate(100%) invert(30%) sepia(27%) saturate(486%) hue-rotate(176deg) brightness(94%) contrast(84%);}

.dashboard-nuflow-main .purple{background: #eddcfe !important;}
.dashboard-nuflow-main .purple svg {filter: brightness(0) saturate(100%) invert(25%) sepia(56%) saturate(4844%) hue-rotate(262deg) brightness(94%) contrast(96%);}

.dashboard-nuflow-main .orange{background: #ffedd6 !important;}
.dashboard-nuflow-main .orange svg {filter: brightness(0) saturate(100%) invert(58%) sepia(43%) saturate(6368%) hue-rotate(353deg) brightness(108%) contrast(95%);}

.dashboard-nuflow-main .amber{background: #fff3c2 !important;}
.dashboard-nuflow-main .amber svg {filter: brightness(0) saturate(100%) invert(59%) sepia(82%) saturate(4660%) hue-rotate(13deg) brightness(100%) contrast(95%);}


/* === Endcolors ====*/


/* === forms ===*/
.form-control-reports{border: 1px solid #e1e7ef;background: #fff;border-radius: 8px;height: 40px;padding: 5px 10px;color: #48566a;font-size: 12px;}
.min-280{min-width: 280px;}
.min-185{min-width: 160px;}
.min-100{min-width: 100px;}

.search-control{padding: 5px 10px 5px 35px;background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLXNlYXJjaCBhYnNvbHV0ZSBsZWZ0LTMgdG9wLTEvMiB0cmFuc2Zvcm0gLXRyYW5zbGF0ZS15LTEvMiB0ZXh0LXNsYXRlLTQwMCBoLTQgdy00Ij48Y2lyY2xlIGN4PSIxMSIgY3k9IjExIiByPSI4Ij48L2NpcmNsZT48cGF0aCBkPSJtMjEgMjEtNC4zLTQuMyI+PC9wYXRoPjwvc3ZnPg==') no-repeat;    background-size: 6%;
    background-position: 10px;}


.sales-filter-name .form-check-input{border: 1px solid #2463eb;width: 16px;height: 16px;}
.sales-filter-name .form-check-label{font-size: 12px;font-weight: 600;    vertical-align: top;}
.sales-filter-name  .form-check{margin-bottom: 0;margin-right: 10px;}
.sales-filter-name  .form-check-input:checked[type=radio]{background:#2463eb  url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOC44MjgiIGhlaWdodD0iMTMuNDE0IiB2aWV3Qm94PSIwIDAgMTguODI4IDEzLjQxNCI+DQogIDxwYXRoIGlkPSJzdmd2aWV3ZXItb3V0cHV0XzdfIiBkYXRhLW5hbWU9InN2Z3ZpZXdlci1vdXRwdXQgKDcpIiBkPSJNMjAsNiw5LDE3LDQsMTIiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yLjU4NiAtNC41ODYpIiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyIi8+DQo8L3N2Zz4NCg==') no-repeat;    background-size: 10px;
    background-position: center;}

.sales-filter-name .mt-negative-label{display: inline-block;
    margin-top: -6px;}

.advanced-filter-reset button:hover{
    background-color:#f1f5f9;
}
.advanced-filter-reset button {text-align: center;}
    

.adv-search{
        background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMiIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIyIDIwIj4NCiAgPHBhdGggaWQ9InN2Z3ZpZXdlci1vdXRwdXRfNDBfIiBkYXRhLW5hbWU9InN2Z3ZpZXdlci1vdXRwdXQgKDQwKSIgZD0iTTIyLDNIMmw4LDkuNDZWMTlsNCwyVjEyLjQ2WiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTEgLTIpIiBmaWxsPSJub25lIiBzdHJva2U9IiMzNDQyNTYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyIi8+DQo8L3N2Zz4NCg==') no-repeat;
    background-size: 15px;
    background-position: 10px center;
}
.reset-ic{
      background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMC40MTQiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMC40MTQgMjAiPg0KICA8ZyBpZD0ic3Zndmlld2VyLW91dHB1dF80Ml8iIGRhdGEtbmFtZT0ic3Zndmlld2VyLW91dHB1dCAoNDIpIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMS41ODYgLTIpIj4NCiAgICA8cGF0aCBpZD0iUGF0aF80IiBkYXRhLW5hbWU9IlBhdGggNCIgZD0iTTMsMTJhOSw5LDAsMSwwLDktOUE5Ljc1LDkuNzUsMCwwLDAsNS4yNiw1Ljc0TDMsOCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMzQ0MjU2IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIvPg0KICAgIDxwYXRoIGlkPSJQYXRoXzUiIGRhdGEtbmFtZT0iUGF0aCA1IiBkPSJNMywzVjhIOCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMzQ0MjU2IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIvPg0KICA8L2c+DQo8L3N2Zz4NCg==') no-repeat;
    background-size: 15px;
       background-position: 18px center;
    padding: 10px 10px 10px 33px;
}

 .filter-data-select2 .selection .select2-selection .select2-selection__rendered{background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMiIgdmlld0JveD0iMCAwIDIwIDIyIj4NCiAgPGcgaWQ9InN2Z3ZpZXdlci1vdXRwdXRfMzhfIiBkYXRhLW5hbWU9InN2Z3ZpZXdlci1vdXRwdXQgKDM4KSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTIgLTEpIj4NCiAgICA8cGF0aCBpZD0iUGF0aF8xIiBkYXRhLW5hbWU9IlBhdGggMSIgZD0iTTgsMlY2IiBmaWxsPSJub25lIiBzdHJva2U9IiMzNDQyNTYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyIi8+DQogICAgPHBhdGggaWQ9IlBhdGhfMiIgZGF0YS1uYW1lPSJQYXRoIDIiIGQ9Ik0xNiwyVjYiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzM0NDI1NiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjIiLz4NCiAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlXzEiIGRhdGEtbmFtZT0iUmVjdGFuZ2xlIDEiIHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCIgcng9IjIiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDMgNCkiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzM0NDI1NiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjIiLz4NCiAgICA8cGF0aCBpZD0iUGF0aF8zIiBkYXRhLW5hbWU9IlBhdGggMyIgZD0iTTMsMTBIMjEiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzM0NDI1NiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjIiLz4NCiAgPC9nPg0KPC9zdmc+DQo=') no-repeat;    background-size: 16px !important;
    background-position: 10px center;    font-weight: 600;}
     .filter-list-btn .selection .select2-selection{font-weight: 600;}

.sales-reports-column-grid .filter-data-select2 .selection .select2-selection{text-align: center;}
.select2-container--open .select2-dropdown{width: 100%;}
.sales-reports-column-grid  .sales-reports-lft{flex:0 0 50%;}

.form-main.show {
  display: block !important;
}

.dashboard-nuflow-main .btn-outline-secondary{background: transparent !important;border: 1px solid #e1e7ef !important;
    background: #fff;
    border-radius: 8px;color: #020817 !important;
    height: 40px;
    padding: 5px 10px;
    color: #48566a;
    font-size: 12px;}
    .dashboard-nuflow-main .btn-outline-secondary:hover{
    background-color:#f1f5f9 !important;     color: #020817 !important;border: 1px solid #e1e7ef !important;
    }

.dashboard-nuflow-main .drop-btn{
    position: absolute;
    right: 6px;
    top: 6px;
    }
.dashboard-nuflow-main .drop-btn svg {transition: all 0.3s linear;}
.dashboard-nuflow-main.drop-btn.rotate svg {transform: rotate(180deg);transition: all 0.3s linear;}


    
/* ---- view page --*/

.view-sales-report .container{max-width:1160px;width:100%;margin:0 auto}
.view-sales-report-grid .card .card-body{border:1px solid #e1e7ef;border-radius:10px;background:#fff;padding:20px;box-shadow:none}
.view-sales-report-grid .card{box-shadow:0 0 transparent,0 0 transparent,0 1px 2px 0 rgba(0,0,0,.05);height:100%}
.text-2xl{font-size:1.5rem;line-height:2rem}
.view-reports{background-color:#f8fafc;border-radius:.5rem;padding:10px}
.view-reports .table th{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:#48566a!important;border:0!important;background:transparent!important;padding:3px 15px}
.view-reports .table td{background:transparent!important;font-size:.875rem;font-weight:500;color:#1a1a2e;padding-top:.5rem;border:0;padding:3px 15px}
.view-reports .btn{font-size:.875rem;font-weight:500;height:40px;padding:.5rem 1rem;line-height:1.5;border-radius:.375rem;transition:all .2s ease-in-out}
.view-reports .btn svg{width:1rem;height:1rem;flex-shrink:0;pointer-events:none}
.view-reports .btn-success-subtle{background-color:#d1fae5;color:#047857;border-color:#a7f3d0}
.view-reports .btn-success-subtle:hover{background-color:#a7f3d0}
.view-reports-main{border:1px solid #e2e8f0;border-radius:.5rem;background-color:#fff;overflow:hidden}
.view-reports-main th{font-size:.75rem;font-weight:600;color:#475569;background-color:#f8fafc;text-transform:uppercase;padding:14px 13px!important;border-bottom:0!important}
.view-reports-main td{font-size:.875rem;font-weight:500;vertical-align:middle;padding:14px 13px!important}
.view-reports-main .badge{background-color:#f1f5f9;color:#334155;font-size:.75rem;font-weight:600;text-transform:uppercase;transition:background-color .2s}
.view-reports-main .badge:hover{background-color:#6366f1;color:#fff}
.boredr-0{border-color:transparent!important}
.font-semibold{font-weight:600}
.text-md{font-size:18px!important;color:#020817!important}
.view-sales-report-grid .card .card-body p{line-height:25px}
.max-180{max-width: 180px !important; width: 100%;}

/* ---- view page --*/

@media(min-width:992px){
    .custom-grid{ width: 11%;}
    .custom-grid-28{width: 28%;}
}



 /* Status Badge Styles for DataTable */
 .status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    border: none;
    transition: all 0.2s ease;
}

.status-badge .status-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
}

.status-badge .status-icon i {
    font-size: 0.875rem;
}

/* Status Badge Color Variants */
.status-badge.blue {
    background-color: #dbeafe;
    color: #1e40af;
}

.status-badge.purple {
    background-color: #e9d5ff;
    color: #7c3aed;
}

.status-badge.green {
    background-color: #dcfce7;
    color: #15803d;
}

.status-badge.pink {
    background-color: #fce7f3;
    color: #be185d;
}

.status-badge.orange {
    background-color: #fed7aa;
    color: #ea580c;
}

.status-badge.red {
    background-color: #fecaca;
    color: #dc2626;
}

.status-badge.teal {
    background-color: #ccfbf1;
    color: #0f766e;
}

.status-badge.indigo {
    background-color: #e0e7ff;
    color: #4338ca;
}

.status-badge.yellow {
    background-color: #fef3c7;
    color: #d97706;
}

.status-badge.cyan {
    background-color: #cffafe;
    color: #0891b2;
}

.status-badge.lime {
    background-color: #ecfccb;
    color: #65a30d;
}

.status-badge.rose {
    background-color: #ffe4e6;
    color: #e11d48;
}

.status-badge.gray {
    background-color: #f3f4f6;
    color: #6b7280;
}

/* Hover effects for status badges */
.status-badge:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* Service Badge Styles for DataTable */
.service-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    border: none;
    transition: all 0.2s ease;
}

.service-badge .service-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
}

.service-badge .service-icon i {
    font-size: 0.875rem;
}

/* Service Badge Color Variants */
.service-badge.blue {
    background-color: #dbeafe;
    color: #1e40af;
}

.service-badge.purple {
    background-color: #e9d5ff;
    color: #7c3aed;
}

.service-badge.green {
    background-color: #dcfce7;
    color: #15803d;
}

.service-badge.pink {
    background-color: #fce7f3;
    color: #be185d;
}

.service-badge.orange {
    background-color: #fed7aa;
    color: #ea580c;
}

.service-badge.red {
    background-color: #fecaca;
    color: #dc2626;
}

.service-badge.teal {
    background-color: #ccfbf1;
    color: #0f766e;
}

.service-badge.indigo {
    background-color: #e0e7ff;
    color: #4338ca;
}

.service-badge.yellow {
    background-color: #fef3c7;
    color: #d97706;
}

.service-badge.cyan {
    background-color: #cffafe;
    color: #0891b2;
}

.service-badge.lime {
    background-color: #ecfccb;
    color: #65a30d;
}

.service-badge.rose {
    background-color: #ffe4e6;
    color: #e11d48;
}

.service-badge.gray {
    background-color: #f3f4f6;
    color: #6b7280;
}

/* Hover effects for service badges */
.service-badge:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* ---- quick dashboard start --*/
    /* Quick Dashboard CSS - Updated for exact color matching */
    /* ========================================
        REWARDS HUB - CUSTOM STYLES
        ======================================== */

        .report_hub {
        /* CSS Variables - Design System */
        --primary-color: #6366f1;
        --secondary-color: #8b5cf6;
        --success-color: #10b981;
        --warning-color: #f59e0b;
        --danger-color: #ef4444;
        --info-color: #3b82f6;
        --surface-color: #ffffff;
        --border-color: #e2e8f0;
        --text-primary: #1e293b;
        --text-secondary: #64748b;
        --text-muted: #6b7280;
        --shadow-sm: 0 0 transparent, 0 0 transparent, 0 1px 2px 0 rgba(0, 0, 0, 0.05);
        --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    }

    .report_hub {
        background-color: #f9fafb;
        color: var(--text-primary);
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    }

    .report_hub .bg-surface {
        background-color: var(--surface-color);
    }

    .report_hub .text-textPrimary {
        color: var(--text-primary);
    }

    .report_hub .text-textSecondary {
        color: var(--text-secondary);
    }

    .report_hub .text-accent {
        color: var(--primary-color);
    }

    .report_hub .text-accent-dark {
        color: #4f46e5;
    }

    /* ========================================
        CARD COMPONENTS
        ======================================== */

    .report_hub .card {
        background-color: var(--surface-color);
        border: 1px solid var(--border-color);
        border-radius: 0.75rem;
        box-shadow: var(--shadow-sm);
        transition: all 0.2s ease-in-out;
    }

    .report_hub .card:hover {
        box-shadow: var(--shadow-md);
    }

    .report_hub .card-header {
        background-color: var(--surface-color);
        border-bottom: 1px solid var(--border-color);
        padding: 1.5rem;
    }

    .report_hub .card-body {
        padding: 1.5rem;
    }

    /* ========================================
        DASHBOARD SPECIFIC STYLES
        ======================================== */

    /* Metric Cards */
    .report_hub .metric-card {
        background-color: var(--surface-color);
        border: 1px solid var(--border-color);
        border-radius: 0.75rem;
        box-shadow: var(--shadow-sm);
        padding: 1.5rem;
        transition: all 0.2s ease-in-out;
    }

    .report_hub .metric-card:hover {
        box-shadow: var(--shadow-md);
    }

    .report_hub .metric-card .icon {
        width: 2rem;
        height: 2rem;
        margin-right: 1rem;
    }

    .report_hub .metric-card .icon.blue { color: #2563eb; }
    .report_hub .metric-card .icon.green { color: #059669; }
    .report_hub .metric-card .icon.purple { color: #7c3aed; }
    .report_hub .metric-card .icon.orange { color: #ea580c; }
    .report_hub .metric-card .icon.indigo { color: #4338ca; }

    .report_hub .metric-card .metric-label {
        font-size: 0.875rem;
        font-weight: 500;
        color: var(--text-secondary);
        margin-bottom: 0.25rem;
    }

    .report_hub .metric-card .metric-value {
        font-size: 1.875rem;
        font-weight: 700;
        color: var(--text-primary);
        line-height: 1.2;
    }

    /* Client Cards */
    .report_hub .client-card {
        border: 1px solid var(--border-color);
        border-radius: 0.75rem;
        padding: 1.5rem;
        margin-bottom: 1.5rem;
        background: var(--surface-color);
        box-shadow: var(--shadow-sm);
        transition: all 0.2s ease;
    }

    .report_hub .client-card:hover {
        border-color: var(--primary-color);
        box-shadow: var(--shadow-md);
    }

    .report_hub .avatar {
        width: 3rem;
        height: 3rem;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        font-size: 1.125rem;
        color: white;
        background: linear-gradient(135deg, #ec4899 0%, #8b5cf6 100%);
        box-shadow: var(--shadow-sm);
    }

    /* ========================================
        TIER BADGES
        ======================================== */

    .report_hub .tier-badge {
        padding: 0.25rem 0.75rem;
        border-radius: 9999px;
        font-size: 0.75rem;
        font-weight: 500;
        border: none;
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
    }

    .report_hub .tier-be-you-tiful {
        background-color: #fdf2f8;
        color: #be185d;
    }

    .report_hub .tier-fab-you-lous {
        background-color: #f3e8ff;
        color: #7c3aed;
    }

    .report_hub .tier-spectac-you-lar {
        background-color: #fef3c7;
        color: #d97706;
    }

    .report_hub .tier-st-you-pendous {
        background: linear-gradient(135deg, #f3e8ff 0%, #fdf2f8 100%);
        color: #7c3aed;
    }

    /* ========================================
        TRANSACTION STYLES
        ======================================== */

    .report_hub .points-positive {
        color: var(--success-color);
        font-weight: 600;
    }

    .report_hub .points-negative {
        color: var(--danger-color);
        font-weight: 600;
    }

    .report_hub .transaction-dot {
        width: 0.5rem;
        height: 0.5rem;
        border-radius: 50%;
        display: inline-block;
        margin-right: 0.75rem;
        flex-shrink: 0;
    }

    .report_hub .dot-earned { background-color: var(--success-color); }
    .report_hub .dot-redeemed { background-color: var(--info-color); }
    .report_hub .dot-cashback { background-color: var(--secondary-color); }
    .report_hub .dot-bonus { background-color: var(--warning-color); }

    .report_hub .transaction-item {
        background-color: #f8fafc;
        border-radius: 0.5rem;
        padding: 0.75rem 1rem;
        margin-bottom: 0.5rem;
        transition: background-color 0.2s ease;
        border: 1px solid #e2e8f0;
    }

    .report_hub .transaction-item:hover {
        background-color: #f1f5f9;
    }

    /* ========================================
        TABLE STYLES
        ======================================== */

    .report_hub .table {
        border-radius: 0.5rem;
        overflow: hidden;
    }

    .report_hub .table th {
        background-color: #f8fafc;
        border-bottom: 1px solid var(--border-color);
        font-weight: 600;
        color: var(--text-secondary);
        text-transform: uppercase;
        font-size: 0.75rem;
        letter-spacing: 0.05em;
        padding: 0.75rem 1rem;
    }

    .report_hub .table td {
        padding: 0.75rem 1rem;
        border-bottom: 1px solid var(--border-color);
        vertical-align: middle;
    }

    .report_hub .table tbody tr:hover {
        background-color: #f8fafc;
    }

    /* ========================================
        PAGINATION STYLES
        ======================================== */

    .report_hub .pagination {
        margin: 0;
        gap: 0.25rem;
    }

    .report_hub .pagination .page-link {
        border: 1px solid var(--border-color);
        color: var(--text-secondary);
        padding: 0.5rem 0.75rem;
        border-radius: 0.375rem;
        font-weight: 500;
        transition: all 0.2s ease;
    }

    .report_hub .pagination .page-link:hover {
        background-color: var(--primary-color);
        border-color: var(--primary-color);
        color: white;
    }

    .report_hub .pagination .page-item.active .page-link {
        background-color: var(--primary-color);
        border-color: var(--primary-color);
        color: white;
    }

    .report_hub .pagination .page-item.disabled .page-link {
        background-color: #f8fafc;
        border-color: var(--border-color);
        color: var(--text-muted);
    }

    /* ========================================
        BUTTON STYLES
        ======================================== */

    .report_hub .btn {
        border-radius: 0.5rem;
        font-weight: 500;
        padding: 0.5rem 1rem;
        transition: all 0.2s ease;
        font-size: 0.875rem;
    }

    .report_hub .btn-primary {
        --bs-btn-color: #fff;
        --bs-btn-bg: #2563eb;
        --bs-btn-border-color: #2563eb;
        --bs-btn-hover-color: #fff;
        --bs-btn-hover-bg: #4f73d9;
        --bs-btn-hover-border-color: #4a6ccc;
        --bs-btn-focus-shadow-rgb: 117, 153, 255;
    }

    .report_hub .btn-primary:hover {
        color: var(--bs-btn-hover-color);
    background-color: var(--bs-btn-hover-bg);
    border-color: var(--bs-btn-hover-border-color);
       
    }

    .report_hub .btn-outline {
        color: var(--text-secondary);
        border-color: var(--border-color);
        background-color: transparent;
    }

    .report_hub .btn-outline:hover {
        background-color: var(--primary-color);
        border-color: var(--primary-color);
        color: white;
    }

    .report_hub .btn-sm {
        padding: 0.375rem 0.75rem;
        font-size: 0.75rem;
    }

    /* ========================================
        FORM STYLES
        ======================================== */

    .report_hub .form-control {
        border: 1px solid var(--border-color);
        border-radius: 0.5rem;
        padding: 0.5rem 0.75rem;
        font-size: 0.875rem;
        transition: all 0.2s ease;
    }

    .report_hub .form-control:focus {
        border-color: var(--primary-color);
        box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
    }

    .report_hub .form-label {
        font-weight: 500;
        color: var(--text-primary);
        margin-bottom: 0.5rem;
        font-size: 0.875rem;
    }

    .report_hub .form-text {
        color: var(--text-muted);
        font-size: 0.75rem;
        margin-top: 0.25rem;
    }

    .report_hub .form-switch .form-check-input {
        width: 3rem;
        height: 1.5rem;
        margin-top: 0;
        border-radius: 1rem;
        border: 2px solid var(--border-color);
        transition: all 0.2s ease;
    }

    .report_hub .form-switch .form-check-input:checked {
        background-color: var(--primary-color);
        border-color: var(--primary-color);
    }

    .report_hub .form-switch .form-check-input:focus {
        box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
    }

    /* ========================================
        MODAL STYLES
        ======================================== */

    .report_hub .modal-backdrop {
        background-color: rgba(0, 0, 0, 0.5);
    }

    .report_hub .modal-content {
        border: none;
        border-radius: 0.75rem;
        box-shadow: var(--shadow-lg);
    }

    .report_hub .modal-header {
        border-bottom: 1px solid var(--border-color);
        padding: 1.5rem;
    }

    .report_hub .modal-body {
        padding: 1.5rem;
    }

    .report_hub .modal-footer {
        border-top: 1px solid var(--border-color);
        padding: 1.5rem;
    }

    /* ========================================
        TOAST STYLES
        ======================================== */

    .report_hub .toast {
        border: none;
        border-radius: 0.5rem;
        box-shadow: var(--shadow-md);
    }

    .report_hub .toast-header {
        background-color: var(--surface-color);
        border-bottom: 1px solid var(--border-color);
    }

    /* ========================================
        SETUP PAGE SPECIFIC STYLES
        ======================================== */

    /* Tab Navigation */
    .report_hub .nav-tabs {
        border-bottom: 1px solid var(--border-color);
        margin-bottom: 2rem;
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        gap: 0.5rem;
        background-color: #f8fafc;
        padding: 0.5rem;
        border-radius: 0.75rem;
        border: 1px solid var(--border-color);
    }

    .report_hub .nav-tabs .nav-item {
        margin: 0;
    }

    .report_hub .nav-tabs .nav-link {
        color: var(--text-muted);
        border: none;
        padding: 0.75rem 1rem;
        font-weight: 500;
        border-radius: 0.5rem;
        transition: all 0.2s ease;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        background-color: transparent;
        width: 100%;
        text-align: center;
        font-size: 0.875rem;
    }

    .report_hub .nav-tabs .nav-link:hover {
        color: var(--primary-color);
        background-color: rgba(99, 102, 241, 0.05);
    }

    .report_hub .nav-tabs .nav-link.active {
        color: var(--primary-color);
        background-color: white;
        border: 1px solid var(--border-color);
        box-shadow: var(--shadow-sm);
        font-weight: 600;
    }

    .report_hub .nav-tabs .nav-link i {
        width: 1rem;
        height: 1rem;
        flex-shrink: 0;
    }

    /* Tab Content */
    .report_hub .tab-content {
        animation: fadeIn 0.3s ease-in-out;
    }

    .report_hub .tab-pane {
        display: none;
    }

    .report_hub .tab-pane.active {
        display: block;
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
            transform: translateY(10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* Tier Configuration */
    .report_hub .tier-config-item {
        border: 1px solid var(--border-color);
        border-radius: 0.5rem;
        padding: 1rem;
        margin-bottom: 1rem;
        background-color: var(--surface-color);
    }

    /* AI Suggestions */
    .report_hub .ai-suggestion {
        background-color: #eff6ff;
        border: 1px solid #bfdbfe;
        border-radius: 0.5rem;
        padding: 1rem;
        margin-top: 1rem;
    }

    .report_hub .ai-suggestion h4 {
        color: #1e40af;
        font-weight: 600;
        margin-bottom: 0.5rem;
    }

    .report_hub .ai-suggestion p {
        color: #1e40af;
        font-size: 0.875rem;
        margin-bottom: 0.25rem;
    }

    /* Preview Box */
    .report_hub .preview-box {
        background-color: #eff6ff;
        border: 1px solid #bfdbfe;
        border-radius: 0.5rem;
        padding: 1rem;
        margin-top: 1rem;
    }

    .report_hub .preview-box h4 {
        color: #1e40af;
        font-weight: 600;
        margin-bottom: 0.5rem;
    }

    .report_hub .preview-box .text-sm {
        color: #1e40af;
        font-size: 0.875rem;
    }

    /* Integration Items */
    .report_hub .integration-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1rem 0;
        border-bottom: 1px solid var(--border-color);
    }

    .report_hub .integration-item:last-child {
        border-bottom: none;
    }

    /* ========================================
        UTILITY CLASSES
        ======================================== */

    .report_hub .badge {
        padding: 0.25rem 0.5rem;
        font-size: 0.75rem;
        font-weight: 500;
        border-radius: 0.375rem;
    }

    .report_hub .text-muted {
        color: var(--text-muted) !important;
    }

    .report_hub .fw-medium {
        font-weight: 500 !important;
    }

    .report_hub .fw-semibold {
        font-weight: 600 !important;
    }

    .report_hub .fw-bold {
        font-weight: 700 !important;
    }

    .report_hub .shadow-sm {
        box-shadow: var(--shadow-sm) !important;
    }

    .report_hub .shadow-md {
        box-shadow: var(--shadow-md) !important;
    }

    .report_hub .border-0 {
        border: 0 !important;
    }

    .report_hub .rounded-lg {
        border-radius: 0.5rem !important;
    }

    .report_hub .rounded-xl {
        border-radius: 0.75rem !important;
    }

    .report_hub .spinner-border-sm {
        width: 1rem;
        height: 1rem;
        border-width: 0.125rem;
    }

    /* ========================================
        LOADING ANIMATIONS
        ======================================== */

    .report_hub .loading-skeleton {
        background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
        background-size: 200% 100%;
        animation: loading 1.5s infinite;
    }

    @keyframes loading {
        0% { background-position: 200% 0; }
        100% { background-position: -200% 0; }
    }

    /* ========================================
        RESPONSIVE ADJUSTMENTS
        ======================================== */

    @media (max-width: 768px) {
        .appointment-cards .btn-sm {
            font-size: 0.75rem;
            padding: 0.25rem 0.5rem;
        }
        
        .appointment-cards .card-body {
            padding: 1rem;
        }
        
        .appointment-cards .form-check-label {
            font-size: 0.75rem;
        }

        .report_hub .nav-tabs {
            grid-template-columns: repeat(3, 1fr);
            gap: 0.25rem;
            padding: 0.25rem;
        }
        
        .report_hub .nav-tabs .nav-link {
            padding: 0.5rem 0.75rem;
            font-size: 0.75rem;
        }
        
        .report_hub .nav-tabs .nav-link i {
            width: 0.875rem;
            height: 0.875rem;
        }
        
        .report_hub .metric-card {
            padding: 1rem;
        }
        
        .report_hub .metric-card .metric-value {
            font-size: 1.5rem;
        }
        
        .report_hub .card-header,
        .report_hub .card-body {
            padding: 1rem;
        }
    }

    @media (max-width: 576px) {
        .report_hub .nav-tabs {
            grid-template-columns: repeat(2, 1fr);
        }
        
        .report_hub .table th,
        .report_hub .table td {
            padding: 0.5rem;
            font-size: 0.875rem;
        }
        
        .report_hub .btn {
            padding: 0.375rem 0.75rem;
            font-size: 0.75rem;
        }
    } 

    /* Quick Dashboard Root Styles */
    .quick-dashboard {
        /* Primary Colors */
        --primary-500: #6366F1;
        --primary-600: #4F46E5;
        
        /* Background Colors */
        --content-bg: #F8F9FE;
        --white: #FFFFFF;
        
        /* Text Colors */
        --gray-500: #6B7280;
        --gray-600: #4B5563;
        --gray-700: #374151;
        --gray-800: #1F2937;
        --gray-900: #111827;
        
        /* Border Colors */
        --gray-200: #E5E7EB;
        --gray-100: #f3f4f6;
        --red-50 : #fef2f2;
        --red-100: #fee2e2;
        --red-600: #dc2626;
        
        /* Loyalty Tier Colors */
        --st-you-pendous-bg: #F5F3FF;
        --st-you-pendous-text: #7C3AED;
        --spectac-you-lar-bg: #FEF9C3;
        --spectac-you-lar-text: #CA8A04;
        --fab-you-lous-bg: #FCE7F3;
        --fab-you-lous-text: #DB2777;
        --be-you-tiful-bg: #FFE4E6;
        --be-you-tiful-text: #E11D48;
        
        /* Icon Background Colors */
        --indigo-100: #E0E7FF;
        --indigo-500: #6366F1;
        --green-100: #D1FAE5;
        --green-500: #10B981;
        --emerald-100: #D1FAE5;
        --emerald-500: #10B981;
        --purple-100: #F3E8FF;
        --purple-500: #8B5CF6;
        --orange-100: #FED7AA;
        --orange-500: #F97316;
        --sky-100: #E0F2FE;
        --sky-500: #0EA5E9;
        --blue-100: #DBEAFE;
        --blue-500: #3B82F6;
        --yellow-100: #FEF3C7;
        --yellow-500: #F59E0B;
        --success-100: #D1FAE5;
        --success-500: #10B981;
        --warning-100: #FEF3C7;
        --warning-500: #F59E0B;
        
        /* Shadow */
        --shadow-subtle: 0 4px 6px -1px rgba(0, 0, 0, 0.03), 0 2px 4px -2px rgba(0, 0, 0, 0.03);
        
        /* Font Weights */
        --font-light: 300;
        --font-normal: 400;
        --font-medium: 500;
        --font-semibold: 600;
        --font-bold: 700;
        --font-extrabold: 800;

        /* Bootstrap Primary Colors */
        --bs-primary: #0ea5e9;
        --bs-primary-rgb: 14, 165, 233;
        --bs-primary-50: #f0f9ff;
        --bs-primary-100: #e0f2fe;
        --bs-primary-200: #bae6fd;
        --bs-primary-300: #7dd3fc;
        --bs-primary-400: #38bdf8;
        --bs-primary-500: #0ea5e9;
        --bs-primary-600: #0284c7;
        --bs-primary-700: #0369a1;
        --bs-primary-800: #075985;
        --bs-primary-900: #0c4a6e;
        --sidebar-bg: #1a1a2e;
        --sidebar-hover: #242444;
        --sidebar-active: #16213e;
        
        /* Typography */
        --font-size-xs: 0.75rem;
        --font-size-sm: 0.875rem;
        --font-size-base: 1rem;
        --font-size-lg: 1.125rem;
        --font-size-xl: 1.25rem;
        --font-size-2xl: 1.5rem;
        --font-size-3xl: 1.875rem;
        --font-size-4xl: 2.25rem;
        
        /* Font weights */
        --font-weight-light: 300;
        --font-weight-normal: 400;
        --font-weight-medium: 500;
        --font-weight-semibold: 600;
        --font-weight-bold: 700;
        --font-weight-extrabold: 800;
        
        /* Colors */
        --text-primary: #111827;
        --text-secondary: #6b7280;
        --text-muted: #9ca3af;
        --text-light: #d1d5db;
        --text-white: #ffffff;
        
        --bg-primary: #ffffff;
        --bg-secondary: #f9fafb;
        --bg-light: #f3f4f6;
        --bg-dark: #1f2937;
        
        --border-color: #e5e7eb;
        --border-color-light: #f3f4f6;
        --border-color-dark: #d1d5db;
        
        /* Status colors */
        --success: #22c55e;
        --success-light: #dcfce7;
        --warning: #f59e42;
        --warning-light: #fef3c7;
        --danger: #ef4444;
        --danger-light: #fee2e2;
        --info: #3b82f6;
        --info-light: #dbeafe;
        
        /* Additional colors for services */
        --purple: #8b5cf6;
        --purple-light: #f3f4f6;
        --green: #10b981;
        --green-light: #ecfdf5;
        --pink: #ec4899;
        --pink-light: #fdf2f8;
        --orange: #f97316;
        --orange-light: #fff7ed;
        
        /* Loyalty level colors */
        --bronze: #cd7f32;
        --bronze-light: #fef7f0;
        --silver: #c0c0c0;
        --silver-light: #f8f9fa;
        --gold: #ffd700;
        --gold-light: #fffbf0;
        
        /* Spacing */
        --spacing-xs: 0.25rem;
        --spacing-sm: 0.5rem;
        --spacing-md: 1rem;
        --spacing-lg: 1.5rem;
        --spacing-xl: 2rem;
        --spacing-2xl: 3rem;
        
        /* Border radius */
        --border-radius-sm: 0.25rem;
        --border-radius-md: 0.375rem;
        --border-radius-lg: 0.5rem;
        --border-radius-xl: 0.75rem;
        
        /* Shadows */
        --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
        --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
        
        /* Additional old root variables */
        --danger: #ef4444;
        --danger-light: #fee2e2;
        --info: #3b82f6;
        --info-light: #dbeafe;
        --purple-light: #f3f4f6;
        --green-light: #ecfdf5;
        --pink-light: #fdf2f8;
        --orange-light: #fff7ed;
        --bronze-light: #fef7f0;
        --silver-light: #f8f9fa;
        --gold-light: #fffbf0;

        /* Base Styles */

        background-color: var(--content-bg);
        overflow-x: hidden;
    }
    .quick-dashboard  {
        font-size: 0.865rem;
    }
   

    /* Background Colors */
    .quick-dashboard .bg-contentBg {
        background-color: var(--content-bg) !important;
    }

    .quick-dashboard .bg-white {
        background-color: var(--white) !important;
    }

    /* Text Colors */
    .quick-dashboard .text-primary-600 {
        color: var(--primary-600) !important;
    }

    .quick-dashboard .text-gray-500 {
        color: var(--gray-500) !important;
    }

    .quick-dashboard .text-gray-600 {
        color: var(--gray-600) !important;
    }

    .quick-dashboard .text-gray-700 {
        color: var(--gray-700) !important;
    }

    .quick-dashboard .text-gray-800 {
        color: var(--gray-800) !important;
    }

    .quick-dashboard .text-gray-900 {
        color: var(--gray-900) !important;
    }

    .quick-dashboard .text-muted {
        color: var(--gray-500) !important;
    }

    .quick-dashboard .text-dark {
        color: var(--gray-800) !important;
    }

    /* Border Colors */
    .quick-dashboard .border-gray-200 {
        border-color: var(--gray-200) !important;
    }

    .quick-dashboard .border-primary-600 {
        border-color: var(--primary-600) !important;
    }

    /* Loyalty Tier Background Colors */
    .quick-dashboard .bg-st-you-pendous-bg {
        background-color: var(--st-you-pendous-bg) !important;
    }

    .quick-dashboard .bg-spectac-you-lar-bg {
        background-color: var(--spectac-you-lar-bg) !important;
    }

    .quick-dashboard .bg-fab-you-lous-bg {
        background-color: var(--fab-you-lous-bg) !important;
    }

    .quick-dashboard .bg-be-you-tiful-bg {
        background-color: var(--be-you-tiful-bg) !important;
    }

    /* Loyalty Tier Text Colors */
    .quick-dashboard .text-st-you-pendous-text {
        color: var(--st-you-pendous-text) !important;
    }

    .quick-dashboard .text-spectac-you-lar-text {
        color: var(--spectac-you-lar-text) !important;
    }

    .quick-dashboard .text-fab-you-lous-text {
        color: var(--fab-you-lous-text) !important;
    }

    .quick-dashboard .text-be-you-tiful-text {
        color: var(--be-you-tiful-text) !important;
    }

    /* Icon Background Colors */
    .quick-dashboard .bg-indigo-100 {
        background-color: var(--indigo-100) !important;
    }

    .quick-dashboard .bg-indigo-500 {
        background-color: var(--indigo-500) !important;
    }

    .quick-dashboard .text-indigo-500 {
        color: var(--indigo-500) !important;
    }

    .quick-dashboard .bg-green-100 {
        background-color: var(--green-100) !important;
    }

    .quick-dashboard .bg-green-500 {
        background-color: var(--green-500) !important;
    }

    .quick-dashboard .text-green-500 {
        color: var(--green-500) !important;
    }

    .quick-dashboard .bg-emerald-100 {
        background-color: var(--emerald-100) !important;
    }

    .quick-dashboard .bg-emerald-500 {
        background-color: var(--emerald-500) !important;
    }

    .quick-dashboard .text-emerald-500 {
        color: var(--emerald-500) !important;
    }

    .quick-dashboard .bg-purple-100 {
        background-color: var(--purple-100) !important;
    }

    .quick-dashboard .bg-purple-500 {
        background-color: var(--purple-500) !important;
    }

    .quick-dashboard .text-purple-500 {
        color: var(--purple-500) !important;
    }

    .quick-dashboard .bg-orange-100 {
        background-color: var(--orange-100) !important;
    }

    .quick-dashboard .bg-orange-500 {
        background-color: var(--orange-500) !important;
    }

    .quick-dashboard .text-orange-500 {
        color: var(--orange-500) !important;
    }

    .quick-dashboard .bg-sky-100 {
        background-color: var(--sky-100) !important;
    }

    .quick-dashboard .bg-sky-500 {
        background-color: var(--sky-500) !important;
    }

    .quick-dashboard .text-sky-500 {
        color: var(--sky-500) !important;
    }

    .quick-dashboard .bg-blue-100 {
        background-color: var(--blue-100) !important;
    }

    .quick-dashboard .bg-blue-500 {
        background-color: var(--blue-500) !important;
    }

    .quick-dashboard .text-blue-500 {
        color: var(--blue-500) !important;
    }

    .quick-dashboard .bg-yellow-100 {
        background-color: var(--yellow-100) !important;
    }

    .quick-dashboard .bg-yellow-500 {
        background-color: var(--yellow-500) !important;
    }

    .quick-dashboard .text-yellow-500 {
        color: var(--yellow-500) !important;
    }

    .quick-dashboard .bg-success-100 {
        background-color: var(--success-100) !important;
    }

    .quick-dashboard .bg-success-500 {
        background-color: var(--success-500) !important;
    }

    .quick-dashboard .text-success {
        color: var(--success-500) !important;
    }

    .quick-dashboard .bg-warning-100 {
        background-color: var(--warning-100) !important;
    }

    .quick-dashboard .bg-warning-500 {
        background-color: var(--warning-500) !important;
    }

    .quick-dashboard .text-warning {
        color: var(--warning-500) !important;
    }

    /* Additional old CSS classes */
    .quick-dashboard .bg-danger {
        background-color: var(--danger) !important;
    }

    .quick-dashboard .text-danger {
        color: var(--danger) !important;
    }

    .quick-dashboard .bg-danger-light {
        background-color: var(--danger-light) !important;
    }

    .quick-dashboard .bg-info {
        background-color: var(--info) !important;
    }

    .quick-dashboard .text-info {
        color: var(--info) !important;
    }

    .quick-dashboard .bg-info-light {
        background-color: var(--info-light) !important;
    }

    .quick-dashboard .bg-purple-light {
        background-color: var(--purple-light) !important;
    }

    .quick-dashboard .bg-green-light {
        background-color: var(--green-light) !important;
    }

    .quick-dashboard .bg-pink-light {
        background-color: var(--pink-light) !important;
    }

    .quick-dashboard .bg-orange-light {
        background-color: var(--orange-light) !important;
    }

    .quick-dashboard .bg-bronze-light {
        background-color: var(--bronze-light) !important;
    }

    .quick-dashboard .bg-silver-light {
        background-color: var(--silver-light) !important;
    }

    .quick-dashboard .bg-gold-light {
        background-color: var(--gold-light) !important;
    }

    /* Additional Colors for Appointments */
    .quick-dashboard .bg-purple {
        background-color: var(--purple-500) !important;
    }

    .quick-dashboard .text-purple {
        color: var(--purple-500) !important;
    }

    .quick-dashboard .bg-green {
        background-color: var(--green-500) !important;
    }

    .quick-dashboard .text-green {
        color: var(--green-500) !important;
    }

    .quick-dashboard .bg-pink {
        background-color: var(--fab-you-lous-text) !important;
    }

    .quick-dashboard .text-pink {
        color: var(--fab-you-lous-text) !important;
    }

    .quick-dashboard .bg-orange {
        background-color: var(--orange-500) !important;
    }

    .quick-dashboard .text-orange {
        color: var(--orange-500) !important;
    }

    .quick-dashboard .bg-bronze {
        background-color: #cd7f32 !important;
    }

    .quick-dashboard .text-bronze {
        color: #cd7f32 !important;
    }

    .quick-dashboard .bg-silver {
        background-color: #c0c0c0 !important;
    }

    .quick-dashboard .text-silver {
        color: #c0c0c0 !important;
    }

    .quick-dashboard .bg-gold {
        background-color: #ffd700 !important;
    }

    .quick-dashboard .text-gold {
        color: #ffd700 !important;
    }

    /* Shadows */
    .quick-dashboard .shadow-subtle {
        box-shadow: var(--shadow-subtle) !important;
    }

    .quick-dashboard .shadow-sm {
        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
    }

    /* Font Weights */
    .quick-dashboard .fw-light {
        font-weight: var(--font-light) !important;
    }

    .quick-dashboard .fw-normal {
        font-weight: var(--font-normal) !important;
    }

    .quick-dashboard .fw-medium {
        font-weight: var(--font-medium) !important;
    }

    .quick-dashboard .fw-semibold {
        font-weight: var(--font-semibold) !important;
    }

    .quick-dashboard .fw-bold {
        font-weight: var(--font-bold) !important;
    }

    .quick-dashboard .fw-extrabold {
        font-weight: var(--font-extrabold) !important;
    }

    /* Main content */
    .quick-dashboard .main-content-quick-dashboard {
        margin-left: 16rem;
        background-color: var(--content-bg);
    }

    .quick-dashboard .main-content-full {
        margin-left: 0;
        background-color: var(--content-bg);
    }

    .quick-dashboard .header {
        background-color: var(--white);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        z-index: 10;
    }

    .quick-dashboard .dashboard-content {
        background-color: var(--content-bg);
        padding: 1.5rem;
    }

    .quick-dashboard .stats-card {
        background-color: var(--white);
        border-radius: 0.5rem;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        transition: box-shadow 0.2s ease;
    }

    .quick-dashboard .stats-card:hover {
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

    .quick-dashboard .card-custom {
        border: none;
        box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
        border-radius: 0.5rem;
    }

    .quick-dashboard .stats-icon {
        width: 2.5rem;
        height: 2.5rem;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Sidebar Styles */
    .quick-dashboard .sidebar {
        width: 16rem;
        background-color: var(--sidebar-bg);
        color: white;
        height: 100vh;
        position: fixed;
        left: 0;
        top: 0;
        z-index: 1030;
        box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
        transition: width 0.3s ease;
    }

    .quick-dashboard .sidebar.collapsed {
        width: 4rem !important;
    }

    .quick-dashboard .sidebar-menu-item {
        color: #d1d5db;
        transition: all 0.2s ease;
        border: none;
        background: transparent;
        width: 100%;
        text-align: left;
        padding: 0.625rem 1rem;
        margin: 0 0.5rem;
        border-radius: 0.375rem;
    }

    .quick-dashboard .sidebar-menu-item:hover {
        background-color: var(--sidebar-hover);
        color: white;
    }

    .quick-dashboard .sidebar-menu-item.active {
        background-color: var(--bs-primary);
        color: white;
    }

    .quick-dashboard .sidebar-submenu {
        background-color: transparent;
        border: none;
        color: #9ca3af;
        font-size: 0.875rem;
        padding: 0.375rem 0;
        margin: 0;
        width: 100%;
        text-align: left;
    }

    .quick-dashboard .sidebar-submenu:hover {
        color: white;
        background-color: transparent;
    }

    /* Main content */
    .quick-dashboard .main-content {
        margin-left: 16rem;
        transition: margin-left 0.3s ease;
    }

    .quick-dashboard .main-content.expanded {
        margin-left: 4rem;
    }

    /* Main content quick dashboard specific styles */
    .quick-dashboard .main-content-quick-dashboard {
        margin-left: 16rem;
        transition: margin-left 0.3s ease;
        background-color: var(--content-bg);
    }

    .quick-dashboard .main-content-quick-dashboard.expanded {
        margin-left: 4rem;
    }

    .quick-dashboard .main-content-quick-dashboard .header {
        background-color: white;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        z-index: 10;
    }

    .quick-dashboard .main-content-quick-dashboard .dashboard-content {
        background-color: var(--content-bg);
        padding: 1.5rem;
    }

    .quick-dashboard .main-content-quick-dashboard .stats-card {
        background-color: white;
        border-radius: 0.5rem;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        transition: box-shadow 0.2s ease;
    }

    .quick-dashboard .main-content-quick-dashboard .stats-card:hover {
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

    .quick-dashboard .main-content-quick-dashboard .chart-container {
        background-color: white;
        border-radius: 0.5rem;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }

    .quick-dashboard .main-content-quick-dashboard .quick-link-item {
        background-color: white;
        border-radius: 0.5rem;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        transition: all 0.2s ease;
    }

    .quick-dashboard .main-content-quick-dashboard .quick-link-item:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    .quick-dashboard .main-content-quick-dashboard .activity-item {
        border-bottom: 1px solid #f3f4f6;
        padding: 0.75rem 0;
    }

    .quick-dashboard .main-content-quick-dashboard .activity-item:last-child {
        border-bottom: none;
    }

    .quick-dashboard .main-content-quick-dashboard .product-item {
        background-color: #f9fafb;
        border-radius: 0.375rem;
        padding: 0.75rem;
        margin-bottom: 0.5rem;
        transition: background-color 0.2s ease;
    }

    .quick-dashboard .main-content-quick-dashboard .product-item:hover {
        background-color: #f3f4f6;
    }

    /* Responsive adjustments */
    @media (max-width: 991.98px) {
        .quick-dashboard .sidebar {
            transform: translateX(-100%);
            transition: transform 0.3s ease;
        }
        
        .quick-dashboard .sidebar.show {
            transform: translateX(0);
        }
        
        .quick-dashboard .main-content-quick-dashboard {
            margin-left: 0;
        }
    }

    /* Font Awesome Icon Preservation */
    .quick-dashboard .fa, .quick-dashboard .fas, .quick-dashboard .far, .quick-dashboard .fal, .quick-dashboard .fab {
        font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands";
    }  
    .quick-dashboard #client-tier-distribution .text-xs.fw-semibold.me-3.px-2.py-1.rounded {font-size: 12px !important;}

    /* Custom Appointments Page Styles */
    .quick-dashboard .appointments-nav-tab {
        padding: 0.75rem 1.5rem;
        font-weight: 500;
        border: none;
        background: none;
        color: #6c757d;
        border-bottom: 2px solid transparent;
        transition: all 0.2s ease;
    }

    .quick-dashboard .appointments-nav-tab.active {
        color: #6366f1;
        border-bottom-color: #6366f1;
        font-weight: 600;
    }

    .quick-dashboard .appointments-nav-tab:hover {
        color: #6366f1;
        background-color: rgba(99, 102, 241, 0.05);
    }

    .quick-dashboard .filter-tag {
        background-color: #f8f9fa;
        color: #495057;
        padding: 0.375rem 0.75rem;
        border-radius: 50px;
        font-size: 0.875rem;
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        border: 1px solid #e9ecef;
    }

    .quick-dashboard .filter-tag .remove-btn {
        background: none;
        border: none;
        color: #6c757d;
        padding: 0;
        font-size: 0.75rem;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        transition: all 0.2s ease;
    }

    .quick-dashboard .filter-tag .remove-btn:hover {
        background-color: #e9ecef;
        color: #495057;
    }

    .quick-dashboard .stats-card-custom {
        background: white;
        border-radius: 12px;
        padding: 1.5rem 1rem;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        border: 1px solid #e9ecef;
        transition: all 0.2s ease;
    }

    .quick-dashboard .stats-card-custom .text-sm.text-muted.mb-0 {
        font-size: 0.875rem;
        line-height: 1.25rem;
        font-weight: 500;
    }

    .quick-dashboard .stats-icon-circle {
        width: 48px;
        min-width: 48px;
        height: 48px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 0.6rem;
        font-size: 1.2rem;
    }

    .quick-dashboard .stats-icon-circle.blue {
        background-color: #dbeafe;
        color: #2563eb;
    }

    .quick-dashboard .stats-icon-circle.green {
        background-color: #dcfce7;
        color: #16a34a;
    }

    .quick-dashboard .stats-icon-circle.amber {
        background-color: #fef3c7;
        color: #d97706;
    }

    .quick-dashboard .stats-icon-circle.purple {
        background-color: #e9d5ff;
        color: #9333ea;
    }

    .quick-dashboard .stats-icon-circle.orange {
        background-color: #fed7aa;
        color: #ea580c;
    }

    .quick-dashboard .stats-icon-circle.red {
        background-color: #fecaca;
        color: #dc2626;
    }

    .quick-dashboard .appointment-table {
        border-top: 1px solid #e9ecef !important;
    }

    .quick-dashboard .appointment-table-header {
        background-color: #f8f9fa;
        
    }

    .quick-dashboard .appointment-table-header th {
        padding: 1rem 0.75rem;
        font-size: 0.75rem;
        font-weight: 600;
        text-transform: uppercase;
        color: #6c757d;
        border: none;
        cursor: pointer;
        transition: all 0.2s ease;
        border-bottom: 1px solid #e9ecef;
    }

    .quick-dashboard .appointment-table-header th:hover {
        background-color: #e9ecef;
    }

    .quick-dashboard .appointment-table-header .sort-icon {
        margin-left: 0.5rem;
        font-size: 0.625rem;
        opacity: 0.7;
    }

    .quick-dashboard .appointment-table-row {
        border-bottom: 1px solid #f1f3f4;
        transition: all 0.2s ease;
    }

    .quick-dashboard .appointment-table-row:hover {
        background-color: #f8f9fa;
    }

    .quick-dashboard .appointment-table-row td, .quick-dashboard .appointment-table td {
        padding: 1rem 0.75rem;
        vertical-align: middle;
    }

    .quick-dashboard .client-info {
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

    .quick-dashboard .client-avatar {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        object-fit: cover;
    }

    .quick-dashboard .client-details h6 {
        font-weight: 600;
        color: #6366f1;
        margin-bottom: 0.25rem;
        cursor: pointer;
    }

    .quick-dashboard .client-details p {
        font-size: 0.75rem;
        color: #6c757d;
        margin-bottom: 0.125rem;
    }

    .quick-dashboard .vip-badge {
        background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
        color: white;
        font-size: 0.625rem;
        font-weight: 700;
        padding: 0.25rem 0.5rem;
        border-radius: 4px;
        margin-left: 0.5rem;
    }

    .quick-dashboard .member-badge {
        background-color: #6366f1;
        color: white;
        font-size: 0.625rem;
        font-weight: 500;
        padding: 0.25rem 0.5rem;
        border-radius: 4px;
        margin-left: 0.5rem;
    }
    .quick-dashboard .btn-link {
        text-decoration: none;
    }
    .quick-dashboard .service-badge {
        display: inline-flex;
        align-items: center;
        gap: 0.2rem;
        padding: 0.2rem 0.5rem;
        border-radius: 50px;
        font-size: 0.75rem;
        font-weight: 500;
        border: none;
    }

    .quick-dashboard .service-badge.blue {
        background-color: #dbeafe;
        color: #1e40af;
    }

    .quick-dashboard .service-badge.purple {
        background-color: #e9d5ff;
        color: #7c3aed;
    }

    .quick-dashboard .service-badge.green {
        background-color: #dcfce7;
        color: #15803d;
    }

    .quick-dashboard .service-badge.pink {
        background-color: #fce7f3;
        color: #be185d;
    }

    .quick-dashboard .service-icon {
        width: 16px;
        height: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.625rem;
    }

    .quick-dashboard .staff-info {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .quick-dashboard .staff-avatar {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        object-fit: cover;
    }

    .quick-dashboard .staff-name {
        font-size: 0.875rem;
        color: #212529;
        font-weight: 500;
    }

    .quick-dashboard .status-badge {
        display: inline-flex;
        align-items: center;
        padding: 0.2rem 0.5rem;
        border-radius: 50px;
        font-size: 0.75rem;
        font-weight: 500;
        border: none;
    }
    .quick-dashboard .dataTable-top label.font-12{
        font-size: 14px !important;
    }
    .quick-dashboard .dataTable-top .form-control, .quick-dashboard .dataTable-top .form-select, .quick-dashboard .dataTable-top select{
        border: 1px solid #e9ecef !important;
        border-radius: 5px !important;
        padding: 0.5rem 1rem !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        color: #2c2c2c !important;
        background-color: #fff !important;
        box-shadow: none !important;
        border: 1px solid #e9ecef !important;
        border-radius: 0.375rem !important;
        
    }
    .quick-dashboard .dataTable-top .form-select, .quick-dashboard .dataTable-top select, .quick-dashboard .dataTable-top select.form-control {
        padding-right: 2.5rem !important;
    }

    .quick-dashboard .status-badge.upcoming {
        background-color: #fef3c7;
        color: #d97706;
    }

    .quick-dashboard .status-badge.checked-in {
        background-color: #e9d5ff;
        color: #7c3aed;
    }

    .quick-dashboard .status-badge.no-show {
        background-color: #fed7aa;
        color: #ea580c;
    }


    .quick-dashboard .status-time {
        font-size: 0.75rem;
        color: #6c757d;
        margin-top: 0.25rem;
    }

    .quick-dashboard .action-buttons {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .quick-dashboard .action-btn {
        background: none;
        border: none;
        padding: 0.375rem;
        border-radius: 4px;
        color: #6c757d;
        cursor: pointer;
        transition: all 0.2s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
    }

    .quick-dashboard .action-btn:hover {
        background-color: #f8f9fa;
        color: #495057;
    }

    .quick-dashboard .action-btn.edit {
        color: #6c757d;
    }

    .quick-dashboard .action-btn.complete {
        color: #16a34a;
    }

    .quick-dashboard .action-btn.cancel {
        color: #dc2626;
    }

    .quick-dashboard .action-btn.chat {
        color: #6366f1;
    }

    .quick-dashboard .action-btn.schedule {
        color: #6366f1;
    }

    .quick-dashboard .action-btn.sms {
        color: #8b5cf6;
    }

    .quick-dashboard .action-btn.more {
        color: #6c757d;
    }

    .quick-dashboard .search-input-custom {
        background-color: #f8f9fa;
        border: 1px solid #e9ecef;
        border-radius: 8px;
        padding: 0.75rem 1rem 0.75rem 2.5rem;
        font-size: 0.875rem;
        width: 320px;
        transition: all 0.2s ease;
    }

    .quick-dashboard .search-input-custom:focus {
        background-color: white;
        border-color: #6366f1;
        box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
        outline: none;
    }

    .quick-dashboard .search-icon {
        position: absolute;
        left: 1rem;
        top: 50%;
        transform: translateY(-50%);
        color: #6c757d;
        font-size: 0.875rem;
    }

    .quick-dashboard .btn-export {
        background-color: #f8f9fa;
        border: 1px solid #e9ecef;
        color: #495057;
        padding: 0.5rem 1rem;
        border-radius: 6px;
        font-size: 0.875rem;
        font-weight: 500;
        transition: all 0.2s ease;
    }

    .quick-dashboard .btn-export:hover {
        background-color: #e9ecef;
        border-color: #dee2e6;
        color: #212529;
    }

    .quick-dashboard .btn-new-appointment {
        background-color: #6366f1;
        border: 1px solid #6366f1;
        color: white;
        padding: 0.5rem 1rem;
        border-radius: 6px;
        font-size: 0.875rem;
        font-weight: 500;
        transition: all 0.2s ease;
    }

    .quick-dashboard .btn-new-appointment:hover {
        background-color: #5855eb;
        border-color: #5855eb;
        color: white;
    }

    .quick-dashboard .form-select-custom {
        background-color: #f8f9fa;
        border: 1px solid #e9ecef;
        border-radius: 6px;
        padding: 0.75rem 1rem;
        font-size: 0.875rem;
        color: #495057;
        transition: all 0.2s ease;
    }

    .quick-dashboard .form-select-custom:focus {
        background-color: white;
        border-color: #6366f1;
        box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
        outline: none;
    }

    .quick-dashboard .dropdown-arrow {
        position: absolute;
        right: 1rem;
        top: 50%;
        transform: translateY(-50%);
        color: #6c757d;
        font-size: 0.75rem;
        pointer-events: none;
    }

    /* Responsive adjustments */
    @media (max-width: 768px) {
        .quick-dashboard .appointments-nav-tab {
            padding: 0.5rem 1rem;
            font-size: 0.875rem;
        }
        
        .quick-dashboard .stats-card-custom {
            padding: 1rem;
        }
        
        .quick-dashboard .search-input-custom {
            width: 100%;
            max-width: 280px;
        }
        
        .quick-dashboard .appointment-table-row td {
            padding: 0.75rem 1rem;
        }
    }

    /* Custom Gift Card Page Styles */
    .quick-dashboard .giftcard-header {
        background: linear-gradient(135deg, #1e3a8a 0%, #0d9488 100%);
        color: white;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        position: sticky;
        top: 0;
        z-index: 10;
    }

    .quick-dashboard .giftcard-hero {
        background: linear-gradient(135deg, #1e3a8a 0%, #7c3aed 50%, #0d9488 100%);
        padding: 4rem 0;
    }

    .quick-dashboard .giftcard-feature {
        background-color: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(8px);
        border-radius: 8px;
        padding: 1rem;
        display: flex;
        align-items: center;
        gap: 0.75rem;
        color: white;
    }

    .quick-dashboard .giftcard-item {
        background: white;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        overflow: hidden;
        transition: all 0.3s ease;
        cursor: pointer;
        border: 1px solid #e9ecef;
    }

    .quick-dashboard .giftcard-item:hover {
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
        transform: translateY(-2px);
    }

    .quick-dashboard .giftcard-custom {
        background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        overflow: hidden;
        transition: all 0.3s ease;
        cursor: pointer;
        color: white;
    }

    .quick-dashboard .giftcard-custom:hover {
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
        transform: translateY(-2px);
    }

    .quick-dashboard .giftcard-category {
        background-color: #f8f9fa;
        color: #495057;
        padding: 0.5rem 1rem;
        border-radius: 50px;
        font-size: 0.875rem;
        border: 1px solid #e9ecef;
        transition: all 0.2s ease;
        cursor: pointer;
    }

    .quick-dashboard .giftcard-category:hover {
        background-color: #e9ecef;
        color: #212529;
    }

    .quick-dashboard .giftcard-step-icon {
        width: 64px;
        height: 64px;
        border-radius: 50%;
        background-color: #f8f9fa;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
    }

    .quick-dashboard .btn-brand-teal {
        background-color: #0d9488;
        border-color: #0d9488;
        color: white;
    }

    .quick-dashboard .btn-brand-teal:hover {
        background-color: #0f766e;
        border-color: #0f766e;
        color: white;
    }

    .quick-dashboard .text-brand-teal {
        color: #0d9488 !important;
    }

    .quick-dashboard .text-brand-dark-blue {
        color: #1e3a8a !important;
    }

    /* Custom Team Page Styles */
    .quick-dashboard .team-stats-card {
        background: white;
        border-radius: 12px;
        padding: 1.5rem;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        border: 1px solid #e9ecef;
        transition: all 0.3s ease;
    }

    .quick-dashboard .team-stats-card:hover {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        transform: translateY(-1px);
    }

    .quick-dashboard .team-stats-icon {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.25rem;
    }

    .quick-dashboard .team-member-card {
        background: white;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        overflow: hidden;
        transition: all 0.3s ease;
        border: 1px solid #e9ecef;
    }

    .quick-dashboard .team-member-card:hover {
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
        transform: translateY(-2px);
    }

    .quick-dashboard .team-member-header {
        position: relative;
        padding: 1.5rem;
        background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
        text-align: center;
    }

    .quick-dashboard .team-member-avatar {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        object-fit: cover;
        border: 4px solid white;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    .quick-dashboard .team-member-status {
        position: absolute;
        bottom: 1rem;
        right: 1rem;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        border: 3px solid white;
    }

    .quick-dashboard .team-member-status.online {
        background-color: #10b981;
    }

    .quick-dashboard .team-member-status.offline {
        background-color: #6b7280;
    }

    .quick-dashboard .team-member-status.busy {
        background-color: #f59e0b;
    }

    .quick-dashboard .team-member-body {
        padding: 1.5rem;
    }

    .quick-dashboard .team-member-actions {
        display: flex;
        gap: 0.5rem;
    }

    .quick-dashboard .bg-primary-100 {
        background-color: #dbeafe !important;
    }

    .quick-dashboard .bg-success-100 {
        background-color: #dcfce7 !important;
    }

    .quick-dashboard .bg-warning-100 {
        background-color: #fef3c7 !important;
    }

    .quick-dashboard .bg-info-100 {
        background-color: #dbeafe !important;
    }

    .quick-dashboard .bg-purple-100 {
        background-color: #e9d5ff !important;
    }

    .quick-dashboard .bg-orange-100 {
        background-color: #fed7aa !important;
    }

    .quick-dashboard .bg-pink-100 {
        background-color: #fce7f3 !important;
    }

    .quick-dashboard .bg-green-100 {
        background-color: #dcfce7 !important;
    }

    .quick-dashboard .bg-red-100 {
        background-color: #fecaca !important;
    }

    .quick-dashboard .bg-blue-100 {
        background-color: #dbeafe !important;
    }

    .quick-dashboard .text-primary {
        color: #2563eb !important;
    }

    .quick-dashboard .text-success {
        color: #16a34a !important;
    }

    .quick-dashboard .text-warning {
        color: #d97706 !important;
    }

    .quick-dashboard .text-info {
        color: #2563eb !important;
    }

    .quick-dashboard .text-purple {
        color: #7c3aed !important;
    }

    .quick-dashboard .text-orange {
        color: #ea580c !important;
    }

    .quick-dashboard .text-pink {
        color: #be185d !important;
    }

    .quick-dashboard .text-green {
        color: #15803d !important;
    }

    .quick-dashboard .text-red {
        color: #dc2626 !important;
    }

    .quick-dashboard .text-blue {
        color: #1e40af !important;
    }

    /* Responsive adjustments for gift card and team pages */
    @media (max-width: 768px) {
        .quick-dashboard .giftcard-feature {
            flex-direction: column;
            text-align: center;
            gap: 0.5rem;
        }
        
        .quick-dashboard .team-member-card {
            margin-bottom: 1rem;
        }
        
        .quick-dashboard .team-stats-card {
            margin-bottom: 1rem;
        }
    }

    /* Custom Reputation Management Page Styles */
    .quick-dashboard .repman-sidebar {
        background-color: #1a1a2e;
        color: white;
        width: 16rem;
        height: 100vh;
        position: fixed;
        left: 0;
        top: 0;
        z-index: 10;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    }

    .quick-dashboard .repman-menu-item {
        display: flex;
        align-items: center;
        padding: 0.625rem 1rem;
        color: #cbd5e1;
        border-radius: 0.375rem;
        margin: 0 0.5rem;
        cursor: pointer;
        transition: all 0.2s ease;
        border: none;
        background: none;
        width: 100%;
        text-align: left;
    }

    .quick-dashboard .repman-menu-item:hover {
        background-color: #242444;
        color: white;
    }

    .quick-dashboard .repman-menu-item.active {
        background-color: #2563eb;
        color: white;
    }

    .quick-dashboard .repman-submenu {
        display: block;
        padding: 0.375rem 0;
        font-size: 0.875rem;
        color: #cbd5e1;
        cursor: pointer;
        transition: color 0.2s ease;
    }

    .quick-dashboard .repman-submenu:hover {
        color: white;
    }

    .quick-dashboard .repman-submenu.active {
        color: white;
        background-color: #242444;
        border-radius: 0.375rem;
        padding-left: 0.5rem;
        margin-right: 0.5rem;
    }

    .quick-dashboard .repman-stats-card {
        background: white;
        border-radius: 12px;
        padding: 1.5rem;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        border: 1px solid #e9ecef;
        transition: all 0.3s ease;
    }

    .quick-dashboard .repman-stats-card:hover {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        transform: translateY(-1px);
    }

    .quick-dashboard .repman-stats-icon {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.25rem;
    }

    /* Additional color utilities for repman page */
    .quick-dashboard .bg-danger-100 {
        background-color: #fee2e2 !important;
    }

    .quick-dashboard .text-danger {
        color: #dc2626 !important;
    }

    .quick-dashboard .bg-warning-100 {
        background-color: #fef3c7 !important;
    }

    .quick-dashboard .text-warning {
        color: #d97706 !important;
    }

    .quick-dashboard .bg-info-100 {
        background-color: #dbeafe !important;
    }

    .quick-dashboard .text-info {
        color: #2563eb !important;
    }

    .quick-dashboard .bg-success-100 {
        background-color: #dcfce7 !important;
    }

    .quick-dashboard .text-success {
        color: #16a34a !important;
    }

    .quick-dashboard .bg-primary-100 {
        background-color: #dbeafe !important;
    }

    .quick-dashboard .text-primary {
        color: #2563eb !important;
    }

    /* Responsive adjustments for repman page */
    @media (max-width: 768px) {
        .quick-dashboard .repman-sidebar {
            transform: translateX(-100%);
            transition: transform 0.3s ease;
        }
        
        .quick-dashboard .repman-sidebar.show {
            transform: translateX(0);
        }
        
        .quick-dashboard .repman-stats-card {
            margin-bottom: 1rem;
        }
    }

    /* ========================================
        ADDITIONAL COLOR CLASSES FOR REPUTATION PAGE
        ======================================== */

    /* Green color variations */
    .quick-dashboard .bg-green-400 {
        background-color: #4ade80 !important;
    }

    .quick-dashboard .bg-green-500 {
        background-color: #22c55e !important;
    }

    .quick-dashboard .text-green-800 {
        color: #166534 !important;
    }

    /* Yellow color variations */
    .quick-dashboard .bg-yellow-400 {
        background-color: #facc15 !important;
    }

    .quick-dashboard .text-yellow-400 {
        color: #facc15 !important;
    }

    /* Orange color variations */
    .quick-dashboard .bg-orange-400 {
        background-color: #fb923c !important;
    }

    .quick-dashboard .text-orange-400 {
        color: #fb923c !important;
    }

    /* Red color variations */
    .quick-dashboard .bg-red-500 {
        background-color: #ef4444 !important;
    }

    .quick-dashboard .text-red-500 {
        color: #ef4444 !important;
    }

    /* Amber color variations */
    .quick-dashboard .text-amber-500 {
        color: #f59e0b !important;
    }

    .quick-dashboard .text-amber-600 {
        color: #d97706 !important;
    }

    /* Blue color variations */
    .quick-dashboard .text-blue-600 {
        color: #2563eb !important;
    }

    .quick-dashboard .text-blue-800 {
        color: #1e40af !important;
    }

    /* Pink color variations */
    .quick-dashboard .text-pink-600 {
        color: #db2777 !important;
    }

    /* Red color variations for badges */
    .quick-dashboard .text-red-600 {
        color: #dc2626 !important;
    }

    .quick-dashboard .text-red-800 {
        color: #991b1b !important;
    }

    /* Progress bar specific colors */
    .quick-dashboard .progress {
        background-color: #f3f4f6 !important;
        border-radius: 9999px !important;
        overflow: hidden !important;
    }

    .quick-dashboard .progress-bar {
        border-radius: 9999px !important;
        transition: width 0.6s ease !important;
    }

    /* Custom height utilities */
    .quick-dashboard .h-3 {
        height: 0.75rem !important;
    }

    .quick-dashboard .w-100 {
        width: 100% !important;
    }

    /* Custom padding utilities */
    .quick-dashboard .p-1-5 {
        padding: 0.375rem !important;
    }

    /* Custom margin utilities */
    .quick-dashboard .space-y-4 > * + * {
        margin-top: 1rem !important;
    }

    /* Custom border radius */
    .quick-dashboard .rounded-pill {
        border-radius: 9999px !important;
    }
    /* Font Awesome Icon Preservation */
    .quick-dashboard .fa, .quick-dashboard .fas, .quick-dashboard .far, .quick-dashboard .fal, .quick-dashboard .fab {
        font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands";
    }  


    /* ========================================
        CUSTOM GIFTCARD PAGE
        ======================================== */

    /* Upload Your Own Section - Custom Design */
    .quick-dashboard .giftcard-custom {
        background: linear-gradient(135deg, #9333ea 0%, #4f46e5 100%) !important;
        border-radius: 0.5rem !important;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
        overflow: hidden !important;
        transition: all 0.2s ease-in-out !important;
        cursor: pointer !important;
        text-align: center !important;
    }

    .quick-dashboard .giftcard-custom:hover {
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
        transform: translateY(-2px) !important;
    }

    .quick-dashboard .giftcard-custom .h-48 {
        height: 12rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: transparent !important;
    }

    .quick-dashboard .giftcard-custom .h-48 i {
        font-size: 4rem !important;
        margin-bottom: 1rem !important;
        opacity: 0.8 !important;
        color: white !important;
    }

    .quick-dashboard .giftcard-custom .h-48 p {
        font-size: 1.125rem !important;
        font-weight: 600 !important;
        color: white !important;
        margin: 0 !important;
    }

    .quick-dashboard .giftcard-custom .p-4 {
        padding: 1rem !important;
        background: transparent !important;
    }

    .quick-dashboard .giftcard-custom .p-4 h3 {
        font-weight: 600 !important;
        font-size: 1.125rem !important;
        color: white !important;
        margin-bottom: 0.25rem !important;
    }

    .quick-dashboard .giftcard-custom .p-4 p {
        font-size: 0.875rem !important;
        color: rgba(255, 255, 255, 0.8) !important;
        margin-bottom: 0.75rem !important;
    }

    .quick-dashboard .giftcard-custom .p-4 .text-white {
        color: white !important;
        font-weight: 700 !important;
    }

    .quick-dashboard .giftcard-custom .p-4 .btn-light {
        background-color: white !important;
        color: #9333ea !important;
        border: none !important;
        padding: 0.5rem 1rem !important;
        border-radius: 0.375rem !important;
        font-size: 0.875rem !important;
        font-weight: 600 !important;
        transition: all 0.2s ease !important;
    }

    .quick-dashboard .giftcard-custom .p-4 .btn-light:hover {
        background-color: #f8fafc !important;
        transform: translateY(-1px) !important;
    }

    /* General Gift Card Section - Custom Design */
    .quick-dashboard .giftcard-general {
        background: linear-gradient(135deg, #f59e0b 0%, #ea580c 100%) !important;
        border-radius: 0.5rem !important;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
        overflow: hidden !important;
        transition: all 0.2s ease-in-out !important;
        cursor: pointer !important;
        text-align: center !important;
    }

    .quick-dashboard .giftcard-general:hover {
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
        transform: translateY(-2px) !important;
    }

    .quick-dashboard .giftcard-general .h-48 {
        height: 12rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: linear-gradient(135deg, #f59e0b 0%, #ea580c 100%) !important;
    }

    .quick-dashboard .giftcard-general .h-48 i {
        font-size: 4rem !important;
        margin-bottom: 1rem !important;
        color: white !important;
    }

    .quick-dashboard .giftcard-general .h-48 p {
        font-size: 1.125rem !important;
        font-weight: 600 !important;
        color: white !important;
        margin: 0 !important;
    }

    .quick-dashboard .giftcard-general .p-4 {
        padding: 1rem !important;
        background: linear-gradient(135deg, #f59e0b 0%, #ea580c 100%) !important;
    }

    .quick-dashboard .giftcard-general .p-4 h3 {
        font-weight: 600 !important;
        font-size: 1.125rem !important;
        color: white !important;
        margin-bottom: 0.25rem !important;
    }

    .quick-dashboard .giftcard-general .p-4 p {
        font-size: 0.875rem !important;
        color: rgba(255, 255, 255, 0.8) !important;
        margin-bottom: 0.75rem !important;
    }

    .quick-dashboard .giftcard-general .p-4 .text-white {
        color: white !important;
        font-weight: 700 !important;
    }

    .quick-dashboard .giftcard-general .p-4 .btn-light {
        background-color: white !important;
        color: #ea580c !important;
        border: none !important;
        padding: 0.5rem 1rem !important;
        border-radius: 0.375rem !important;
        font-size: 0.875rem !important;
        font-weight: 600 !important;
        transition: all 0.2s ease !important;
    }

    .quick-dashboard .giftcard-general .p-4 .btn-light:hover {
        background-color: #fff7ed !important;
        transform: translateY(-1px) !important;
    }

    /* Digital Gift Card Preview Section */
    .quick-dashboard .bg-gradient-to-br {
        background: linear-gradient(135deg, #0d9488 0%, #2563eb 100%) !important;
        border-radius: 0.5rem !important;
        padding: 1.5rem !important;
        color: white !important;
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
    }

    .quick-dashboard .bg-gradient-to-br .w-12 {
        width: 3rem !important;
        height: 3rem !important;
        background-color: white !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 auto 0.75rem auto !important;
    }

    .quick-dashboard .bg-gradient-to-br .w-12 i {
        color: #0d9488 !important;
        font-size: 1.25rem !important;
    }

    .quick-dashboard .bg-gradient-to-br h4 {
        font-size: 1.125rem !important;
        font-weight: 700 !important;
        margin-bottom: 0.25rem !important;
        color: white !important;
    }

    .quick-dashboard .bg-gradient-to-br p {
        font-size: 0.875rem !important;
        opacity: 0.9 !important;
        margin-bottom: 1rem !important;
        color: white !important;
    }
    .quick-dashboard .bg-gradient-to-br .bg-white.rounded-circle {
        background-color: rgba(255, 255, 255, 1) !important;
        border-radius: 50% !important;
    }
    .quick-dashboard .bg-gradient-to-br .bg-white {
        background-color: rgba(255, 255, 255, 0.1) !important;
        border-radius: 0.5rem !important;
        padding: 0.75rem !important;
        margin-bottom: 1rem !important;
        text-align: left !important;
    }

    .quick-dashboard .bg-gradient-to-br .bg-white p:first-child {
        font-size: 0.75rem !important;
        margin-bottom: 0.25rem !important;
        color: white !important;
    }

    .quick-dashboard .bg-gradient-to-br .bg-white p:last-child {
        font-size: 0.75rem !important;
        opacity: 0.8 !important;
        font-style: italic !important;
        color: white !important;
        margin: 0 !important;
    }

    .quick-dashboard .bg-gradient-to-br .border-top {
        border-top: 1px solid rgba(255, 255, 255, 0.2) !important;
        padding-top: 0.75rem !important;
    }

    .quick-dashboard .bg-gradient-to-br .border-top p:first-child {
        font-size: 1.5rem !important;
        font-weight: 700 !important;
        color: white !important;
        margin: 0 !important;
    }

    .quick-dashboard .bg-gradient-to-br .border-top p:last-child {
        font-size: 0.75rem !important;
        opacity: 0.8 !important;
        color: white !important;
        margin: 0 !important;
    }

    /* Hero Section Updates */
    .quick-dashboard .giftcard-hero {
        background: linear-gradient(135deg, #1e3a8a 0%, #7c3aed 50%, #0d9488 100%) !important;
        padding: 4rem 0 !important;
    }

    .quick-dashboard .giftcard-hero .display-4 {
        font-size: 2.25rem !important;
        font-weight: 700 !important;
        margin-bottom: 1rem !important;
        color: white !important;
    }

    .quick-dashboard .giftcard-hero .fs-5 {
        font-size: 1.25rem !important;
        margin-bottom: 2rem !important;
        opacity: 0.9 !important;
        color: white !important;
    }

    .quick-dashboard .giftcard-hero .giftcard-feature {
        background-color: rgba(255, 255, 255, 0.1) !important;
        backdrop-filter: blur(8px) !important;
        border-radius: 0.5rem !important;
        padding: 1rem !important;
        display: flex !important;
        align-items: center !important;
        gap: 0.75rem !important;
    }

    .quick-dashboard .giftcard-hero .giftcard-feature i {
        font-size: 1.25rem !important;
        color: #facc15 !important;
    }

    .quick-dashboard .giftcard-hero .giftcard-feature span {
        color: white !important;
        font-weight: 500 !important;
    }

    /* Purchase Form Updates */
    .quick-dashboard .bg-white.rounded.shadow-lg {
        background-color: white !important;
        border-radius: 0.5rem !important;
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
        padding: 2rem !important;
    }

    .quick-dashboard .bg-white.rounded.shadow-lg h3 {
        font-size: 1.5rem !important;
        font-weight: 700 !important;
        color: #1e3a8a !important;
        margin-bottom: 1.5rem !important;
        text-align: center !important;
    }

    .quick-dashboard .bg-white.rounded.shadow-lg .form-control,
    .quick-dashboard .bg-white.rounded.shadow-lg .form-select {
        border: 1px solid #d1d5db !important;
        border-radius: 0.375rem !important;
        padding: 0.75rem 1rem !important;
        font-size: 0.875rem !important;
        transition: all 0.2s ease !important;
    }

    .quick-dashboard .bg-white.rounded.shadow-lg .form-control:focus,
    .quick-dashboard .bg-white.rounded.shadow-lg .form-select:focus {
        outline: none !important;
        border-color: #0d9488 !important;
        box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.1) !important;
    }

    .quick-dashboard .bg-white.rounded.shadow-lg .form-label {
        font-weight: 500 !important;
        color: #374151 !important;
        margin-bottom: 0.5rem !important;
        font-size: 0.875rem !important;
    }

    .quick-dashboard .bg-white.rounded.shadow-lg .btn-purple {
        background-color: #9333ea !important;
        color: white !important;
        border: none !important;
        padding: 0.5rem 1.5rem !important;
        border-radius: 0.375rem !important;
        font-size: 0.875rem !important;
        font-weight: 500 !important;
        transition: all 0.2s ease !important;
    }

    .quick-dashboard .bg-white.rounded.shadow-lg .btn-purple:hover {
        background-color: #7c3aed !important;
        transform: translateY(-1px) !important;
    }

    .quick-dashboard .bg-white.rounded.shadow-lg .btn-success {
        background-color: #059669 !important;
        color: white !important;
        border: none !important;
        padding: 1rem !important;
        border-radius: 0.5rem !important;
        font-weight: 600 !important;
        font-size: 1.125rem !important;
        transition: all 0.2s ease !important;
    }

    .quick-dashboard .bg-white.rounded.shadow-lg .btn-success:hover {
        background-color: #047857 !important;
        transform: translateY(-1px) !important;
    }

    /* Order Summary Updates */
    .quick-dashboard .bg-light.rounded {
        background-color: #f9fafb !important;
        border-radius: 0.5rem !important;
        padding: 1rem !important;
    }

    .quick-dashboard .bg-light.rounded .fw-semibold {
        font-weight: 600 !important;
    }

    .quick-dashboard .bg-light.rounded .fs-5 {
        font-size: 1.125rem !important;
        font-weight: 700 !important;
    }

    /* Responsive adjustments */
    @media (max-width: 768px) {
        .quick-dashboard .giftcard-hero .giftcard-feature {
            flex-direction: column !important;
            text-align: center !important;
            gap: 0.5rem !important;
        }
        
        .quick-dashboard .giftcard-custom .h-48 i,
        .quick-dashboard .giftcard-general .h-48 i {
            font-size: 3rem !important;
        }
        
        .quick-dashboard .giftcard-custom .h-48 p,
        .quick-dashboard .giftcard-general .h-48 p {
            font-size: 1rem !important;
        }
    } 

    /* ========================================
    CUSTOM GIFT CARD DETAILS PAGE
    ======================================== */

    /* Main Content Layout */
    .quick-dashboard .main-content {
    margin-left: 16rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    }

    .quick-dashboard .main-content-area {
    flex: 1;
    overflow-y: auto;
    background-color: var(--content-bg);
    padding: 1.5rem;
    }

    /* Page Header */
    .quick-dashboard .page-header {
    margin-bottom: 1.5rem;
    }

    .quick-dashboard .breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--gray-500);
    margin: 0;
    padding: 0;
    list-style: none;
    }

    .quick-dashboard .breadcrumb-item {
    display: flex;
    align-items: center;
    }

    .quick-dashboard .breadcrumb-link {
    color: var(--gray-500);
    cursor: pointer;
    transition: color 0.2s;
    }

    .quick-dashboard .breadcrumb-link:hover {
    color: var(--primary-600);
    }

    .quick-dashboard .breadcrumb-separator {
    font-size: 0.75rem;
    margin: 0 0.25rem;
    }

    .quick-dashboard .breadcrumb-item.active {
    color: var(--gray-800);
    font-weight: 500;
    }

    .quick-dashboard .page-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-900);
    margin: 0.5rem 0 0 0;
    }

    /* Left Column Content */
    .quick-dashboard .left-column-content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    }

    /* Gift Card Visual Card */
    .quick-dashboard .gift-card-visual-card {
    background: var(--white);
    border-radius: 0.75rem;
    box-shadow: var(--shadow-sm);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    }

    .quick-dashboard .gift-card-image {
    border-radius: 0.5rem;
    width: 100%;
    height: auto;
    max-width: 300px;
    object-fit: cover;
    }

    .quick-dashboard .gift-card-code {
    margin-top: 1rem;
    font-size: 1.5rem;
    font-family: monospace;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--gray-700);
    margin-bottom: 0.25rem;
    }

    .quick-dashboard .gift-card-issue-date {
    font-size: 0.875rem;
    color: var(--gray-500);
    margin: 0;
    }

    /* Gift Card Actions Card */
    .quick-dashboard .gift-card-actions-card {
    background: var(--white);
    border-radius: 0.75rem;
    box-shadow: var(--shadow-sm);
    padding: 1rem;
    }

    .quick-dashboard .gift-card-actions-title {
    font-weight: 600;
    color: var(--gray-800);
    font-size: 1rem;
    margin-bottom: 0.75rem;
    }

    .quick-dashboard .gift-card-actions-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    }

    .quick-dashboard .gift-card-action-button {
    width: 100%;
    background: var(--gray-100);
    border: none;
    color: var(--gray-700);
    padding: 0.625rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    cursor: pointer;
    }

    .quick-dashboard .gift-card-action-button:hover {
    background: var(--gray-200);
    }

    .quick-dashboard .gift-card-action-button i {
    margin-right: 0.5rem;
    }

    .quick-dashboard .gift-card-action-button-danger {
    background: var(--red-50);
    color: var(--red-600);
    }

    .quick-dashboard .gift-card-action-button-danger:hover {
    background: var(--red-100);
    }

    /* Sender & Recipient Card */
    .quick-dashboard .sender-recipient-card {
    background: var(--white);
    border-radius: 0.75rem;
    box-shadow: var(--shadow-sm);
    padding: 1.25rem;
    }

    .quick-dashboard .sender-info-section {
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--gray-200);
    margin-bottom: 1rem;
    }

    .quick-dashboard .sender-info-title,
    .quick-dashboard .recipient-info-title {
    font-weight: 600;
    color: var(--gray-800);
    font-size: 1rem;
    margin-bottom: 0.75rem;
    }

    .quick-dashboard .sender-info-content,
    .quick-dashboard .recipient-info-content {
    display: flex;
    align-items: center;
    }

    .quick-dashboard .sender-avatar,
    .quick-dashboard .recipient-avatar {
    height: 2.5rem;
    width: 2.5rem;
    border-radius: 50%;
    margin-right: 0.75rem;
    object-fit: cover;
    }

    .quick-dashboard .sender-details,
    .quick-dashboard .recipient-details {
    flex: 1;
    }

    .quick-dashboard .sender-name,
    .quick-dashboard .recipient-name {
    font-weight: 500;
    color: var(--gray-900);
    margin: 0;
    }

    .quick-dashboard .sender-email,
    .quick-dashboard .recipient-email {
    font-size: 0.875rem;
    color: var(--gray-500);
    margin: 0;
    }

    .quick-dashboard .personal-message {
    font-size: 0.875rem;
    color: var(--gray-600);
    margin: 0.75rem 0 0 0;
    background: var(--gray-50);
    padding: 0.75rem;
    border-radius: 0.5rem;
    border: 1px solid var(--gray-200);
    }

    /* Right Column Content */
    .quick-dashboard .right-column-content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    }

    /* Gift Card Dashboard Card */
    .quick-dashboard .gift-card-dashboard-card {
    background: var(--white);
    border-radius: 0.75rem;
    box-shadow: var(--shadow-sm);
    padding: 1.25rem;
    }

    .quick-dashboard .gift-card-dashboard-title {
    font-weight: 600;
    color: var(--gray-800);
    font-size: 1rem;
    margin-bottom: 1rem;
    }

    .quick-dashboard .gift-card-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    }

    @media (min-width: 768px) {
    .quick-dashboard .gift-card-stats-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    }

    .quick-dashboard .gift-card-stat-card {
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: 0.5rem;
    padding: 1rem;
    text-align: center;
    }

    .quick-dashboard .gift-card-stat-initial {
    background: var(--bs-primary-50);
    border-color: var(--bs-primary-200);
    }

    .quick-dashboard .gift-card-stat-balance {
    background: var(--success-100);
    border-color: var(--green-200);
    }

    .quick-dashboard .gift-card-stat-status {
    background: var(--purple-100);
    border-color: var(--purple-200);
    }

    .quick-dashboard .gift-card-stat-expiry {
    background: var(--gray-50);
    border-color: var(--gray-200);
    }

    .quick-dashboard .gift-card-stat-label {
    font-size: 0.875rem;
    font-weight: 500;
    margin: 0;
    }

    .quick-dashboard .gift-card-stat-initial .gift-card-stat-label {
    color: var(--bs-primary-700);
    }

    .quick-dashboard .gift-card-stat-balance .gift-card-stat-label {
    color: var(--green-700);
    }

    .quick-dashboard .gift-card-stat-status .gift-card-stat-label {
    color: var(--purple-700);
    }

    .quick-dashboard .gift-card-stat-expiry .gift-card-stat-label {
    color: var(--gray-600);
    }

    .quick-dashboard .gift-card-stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0.25rem 0 0 0;
    }

    .quick-dashboard .gift-card-stat-initial .gift-card-stat-value {
    color: var(--bs-primary-900);
    }

    .quick-dashboard .gift-card-stat-balance .gift-card-stat-value {
    color: var(--green-900);
    }

    .quick-dashboard .gift-card-stat-expiry .gift-card-stat-value {
    color: var(--gray-800);
    }

    .quick-dashboard .gift-card-status-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 1rem;
    font-weight: 600;
    background: var(--success-100);
    color: var(--green-800);
    margin-top: 0.5rem;
    }

    /* Transactions Table Card */
    .quick-dashboard .transactions-table-card {
    background: var(--white);
    border-radius: 0.75rem;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    }

    .quick-dashboard .transactions-table-header {
    padding: 1.25rem;
    border-bottom: 1px solid var(--gray-200);
    display: flex;
    justify-content: space-between;
    align-items: center;
    }

    .quick-dashboard .transactions-table-title {
    font-weight: 600;
    color: var(--gray-800);
    font-size: 1rem;
    margin: 0;
    }

    .quick-dashboard .transactions-view-all-button {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--primary-600);
    background: none;
    border: none;
    cursor: pointer;
    transition: color 0.2s;
    }

    .quick-dashboard .transactions-view-all-button:hover {
    color: var(--primary-800);
    }

    .quick-dashboard .transactions-table-container {
    overflow-x: auto;
    }

    .quick-dashboard .transactions-table {
    width: 100%;
    font-size: 0.875rem;
    border-collapse: collapse;
    }

    .quick-dashboard .transactions-table-head {
    background: var(--gray-50);
    }

    .quick-dashboard .transactions-table-header-cell {
    padding: 0.75rem 1.25rem;
    font-weight: 500;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: left;
    border-bottom: 1px solid var(--gray-200);
    }

    .quick-dashboard .transactions-table-body {
    background: var(--white);
    }

    .quick-dashboard .transactions-table-row {
    border-bottom: 1px solid var(--gray-200);
    transition: background-color 0.2s;
    }

    .quick-dashboard .transactions-table-row:hover {
    background: var(--gray-50);
    }

    .quick-dashboard .transactions-table-cell {
    padding: 1rem 1.25rem;
    white-space: nowrap;
    color: var(--gray-600);
    border-bottom: 1px solid var(--gray-200);
    }

    .quick-dashboard .transactions-table-cell-id {
    font-family: monospace;
    color: var(--gray-700);
    }

    .quick-dashboard .transaction-type-redemption {
    color: var(--red-700);
    font-weight: 500;
    }

    .quick-dashboard .transaction-type-issue {
    color: var(--green-700);
    font-weight: 500;
    }

    .quick-dashboard .transaction-service {
    font-size: 0.75rem;
    color: var(--gray-500);
    margin: 0.25rem 0 0 0;
    }

    .quick-dashboard .transaction-amount-negative {
    font-weight: 500;
    color: var(--red-600);
    }

    .quick-dashboard .transaction-amount-positive {
    font-weight: 500;
    color: var(--green-600);
    }

    .quick-dashboard .transaction-balance {
    font-weight: 500;
    color: var(--gray-800);
    }

    /* Responsive Adjustments */
    @media (max-width: 991.98px) {
    .quick-dashboard .main-content {
        margin-left: 0;
    }

    .quick-dashboard .left-column-content,
    .quick-dashboard .right-column-content {
        margin-bottom: 1.5rem;
    }

    .quick-dashboard .gift-card-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    }

    @media (max-width: 767.98px) {
    .quick-dashboard .gift-card-actions-grid {
        grid-template-columns: 1fr;
    }

    .quick-dashboard .gift-card-stats-grid {
        grid-template-columns: 1fr;
    }

    .quick-dashboard .transactions-table-container {
        font-size: 0.75rem;
    }

    .quick-dashboard .transactions-table-header-cell,
    .quick-dashboard .transactions-table-cell {
        padding: 0.5rem 0.75rem;
    }
    } 

    /* Gift Card Dashboard and Appointment Requests Color Standardization */

    /* Gift Card Dashboard - Override Tailwind classes */
    .gift-card-dashboard-page .bg-blue-100 {
    background-color: var(--bs-primary-100) !important;
    }

    .gift-card-dashboard-page .bg-green-100 {
    background-color: var(--success-100) !important;
    }

    .gift-card-dashboard-page .bg-purple-100 {
    background-color: var(--purple-100) !important;
    }

    .gift-card-dashboard-page .bg-orange-100 {
    background-color: var(--orange-100) !important;
    }

    .gift-card-dashboard-page .text-blue-600 {
    color: var(--bs-primary-600) !important;
    }

    .gift-card-dashboard-page .text-green-600 {
    color: var(--success-600) !important;
    }

    .gift-card-dashboard-page .text-purple-600 {
    color: var(--purple-600) !important;
    }

    .gift-card-dashboard-page .text-orange-600 {
    color: var(--orange-600) !important;
    }

    .gift-card-dashboard-page .bg-primary-600 {
    background-color: var(--bs-primary-600) !important;
    }

    .gift-card-dashboard-page .bg-primary-700 {
    background-color: var(--bs-primary-700) !important;
    }

    .gift-card-dashboard-page .hover\:bg-primary-700:hover {
    background-color: var(--bs-primary-700) !important;
    }

    .gift-card-dashboard-page .focus\:ring-primary-500:focus {
    --tw-ring-color: var(--bs-primary-500) !important;
    }

    .gift-card-dashboard-page .focus\:border-primary-500:focus {
    border-color: var(--bs-primary-500) !important;
    }

    .gift-card-dashboard-page .hover\:text-primary-600:hover {
    color: var(--bs-primary-600) !important;
    }

    .gift-card-dashboard-page .hover\:text-primary-800:hover {
    color: var(--bs-primary-800) !important;
    }

    /* Status badges */
    .gift-card-dashboard-page .bg-green-100 {
    background-color: var(--success-100) !important;
    }

    .gift-card-dashboard-page .text-green-800 {
    color: var(--success-800) !important;
    }

    .gift-card-dashboard-page .bg-blue-100 {
    background-color: var(--info-100) !important;
    }

    .gift-card-dashboard-page .text-blue-800 {
    color: var(--info-800) !important;
    }

    .gift-card-dashboard-page .bg-orange-100 {
    background-color: var(--warning-100) !important;
    }

    .gift-card-dashboard-page .text-orange-800 {
    color: var(--warning-800) !important;
    }

    .gift-card-dashboard-page .bg-red-100 {
    background-color: var(--danger-100) !important;
    }

    .gift-card-dashboard-page .text-red-800 {
    color: var(--danger-800) !important;
    }

    /* Appointment Requests - Override Tailwind classes */
    .appointment-requests-page .bg-blue-600 {
    background-color: var(--bs-primary-600) !important;
    }

    .appointment-requests-page .hover\:bg-blue-700:hover {
    background-color: var(--bs-primary-700) !important;
    }

    .appointment-requests-page .bg-green-600 {
    background-color: var(--success-600) !important;
    }

    .appointment-requests-page .hover\:bg-green-700:hover {
    background-color: var(--success-700) !important;
    }

    .appointment-requests-page .bg-orange-600 {
    background-color: var(--warning-600) !important;
    }

    .appointment-requests-page .hover\:bg-orange-700:hover {
    background-color: var(--warning-700) !important;
    }

    .appointment-requests-page .bg-purple-600 {
    background-color: var(--purple-600) !important;
    }

    .appointment-requests-page .hover\:bg-purple-700:hover {
    background-color: var(--purple-700) !important;
    }

    .appointment-requests-page .bg-gray-600 {
    background-color: var(--gray-600) !important;
    }

    .appointment-requests-page .hover\:bg-gray-700:hover {
    background-color: var(--gray-700) !important;
    }

    .appointment-requests-page .focus\:ring-blue-500:focus {
    --tw-ring-color: var(--bs-primary-500) !important;
    }

    .appointment-requests-page .focus\:border-transparent:focus {
    border-color: transparent !important;
    }

    .appointment-requests-page .bg-yellow-100 {
    background-color: var(--warning-100) !important;
    }

    .appointment-requests-page .text-yellow-800 {
    color: var(--warning-800) !important;
    }

    /* Add missing color variables for consistency */
    .quick-dashboard {
    /* Additional color variables for consistency */
    --success-600: #059669;
    --success-700: #047857;
    --success-800: #065f46;
    --warning-600: #d97706;
    --warning-700: #b45309;
    --warning-800: #92400e;
    --danger-600: #dc2626;
    --danger-700: #b91c1c;
    --danger-800: #991b1b;
    --info-100: #dbeafe;
    --info-600: #2563eb;
    --info-700: #1d4ed8;
    --info-800: #1e40af;
    --orange-600: #ea580c;
    --orange-700: #c2410c;
    --orange-800: #9a3412;
    --purple-600: #7c3aed;
    --purple-700: #6d28d9;
    --purple-800: #5b21b6;
    --bs-primary-100: #dbeafe;
    --bs-primary-500: #0ea5e9;
    --bs-primary-600: #0284c7;
    --bs-primary-700: #0369a1;
    --bs-primary-800: #075985;
    }

    /* Gift Card Dashboard Page Styles */
    .gift-card-dashboard-page {
    background-color: #f9fafb;
    }

    .gift-card-dashboard-page .stats-card-custom {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid #e5e7eb;
    }

    .gift-card-dashboard-page .stats-icon-circle {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1rem;
    }

    .gift-card-dashboard-page .stats-icon-circle.blue {
    background-color: #dbeafe;
    color: #2563eb;
    }

    .gift-card-dashboard-page .stats-icon-circle.green {
    background-color: #dcfce7;
    color: #16a34a;
    }

    .gift-card-dashboard-page .stats-icon-circle.orange {
    background-color: #fed7aa;
    color: #ea580c;
    }

    .gift-card-dashboard-page .stats-icon-circle.purple {
    background-color: #e9d5ff;
    color: #9333ea;
    }

    .gift-card-dashboard-page .stats-number {
    font-size: 1.875rem;
    font-weight: 700;
    color: #111827;
    margin: 0;
    }

    .gift-card-dashboard-page .stats-label {
    font-size: 0.875rem;
    color: #6b7280;
    margin: 0;
    }

    .gift-card-dashboard-page .gift-card-preview {
    width: 60px;
    height: 40px;
    }

    .gift-card-dashboard-page .gift-card-design {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    }

    .gift-card-dashboard-page .gift-card-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
    font-size: 0.75rem;
    text-align: center;
    }

    .gift-card-dashboard-page .gift-card-amount {
    font-weight: 600;
    font-size: 0.875rem;
    }

    .gift-card-dashboard-page .page-header {
    margin-bottom: 1.5rem;
    }

    .gift-card-dashboard-page .page-title {
    font-size: 1.875rem;
    font-weight: 700;
    color: #111827;
    margin: 0;
    }

    .gift-card-dashboard-page .breadcrumb {
    background: none;
    padding: 0;
    margin: 0;
    }

    .gift-card-dashboard-page .breadcrumb-item {
    font-size: 0.875rem;
    color: #6b7280;
    }

    .gift-card-dashboard-page .breadcrumb-item.active {
    color: #374151;
    font-weight: 500;
    }

    .gift-card-dashboard-page .breadcrumb-link {
    color: #6b7280;
    text-decoration: none;
    }

    .gift-card-dashboard-page .breadcrumb-link:hover {
    color: #2563eb;
    }

    .gift-card-dashboard-page .card {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }

    .gift-card-dashboard-page .card-header {
    background-color: white;
    border-bottom: 1px solid #e5e7eb;
    padding: 1rem 1.5rem;
    }

    .gift-card-dashboard-page .card-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: #111827;
    }

    .gift-card-dashboard-page .card-body {
    padding: 1.5rem;
    }

    .gift-card-dashboard-page .table th {
    background-color: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
    font-size: 0.75rem;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    padding: 0.75rem 1rem;
    }

    .gift-card-dashboard-page .table td {
    padding: 1rem;
    vertical-align: middle;
    border-bottom: 1px solid #f3f4f6;
    }

    .gift-card-dashboard-page .badge {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    }

    .gift-card-dashboard-page .btn-group .btn {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    }

    /* Override Bootstrap colors to match design */
    .gift-card-dashboard-page .bg-success {
    background-color: #dcfce7 !important;
    color: #166534 !important;
    }

    .gift-card-dashboard-page .bg-warning {
    background-color: #fef3c7 !important;
    color: #92400e !important;
    }

    .gift-card-dashboard-page .bg-danger {
    background-color: #fee2e2 !important;
    color: #991b1b !important;
    }

    .gift-card-dashboard-page .text-success {
    color: #16a34a !important;
    }

    .gift-card-dashboard-page .btn-outline-primary {
    color: #2563eb;
    border-color: #2563eb;
    }

    .gift-card-dashboard-page .btn-outline-primary:hover {
    background-color: #2563eb;
    border-color: #2563eb;
    }

    .gift-card-dashboard-page .btn-outline-secondary {
    color: #6b7280;
    border-color: #6b7280;
    }

    .gift-card-dashboard-page .btn-outline-secondary:hover {
    background-color: #6b7280;
    border-color: #6b7280;
    }

    .gift-card-dashboard-page .btn-outline-danger {
    color: #dc2626;
    border-color: #dc2626;
    }

    .gift-card-dashboard-page .btn-outline-danger:hover {
    background-color: #dc2626;
    border-color: #dc2626;
    }

    /* Appointment Requests Page Styles */
    .appointment-requests-page {
    background-color: #f9fafb;
    }

    .appointment-requests-page .page-subtitle {
    color: #6b7280;
    margin: 0;
    font-size: 0.875rem;
    }

    .appointment-requests-page .btn-purple {
    background-color: #9333ea;
    border-color: #9333ea;
    color: white;
    }

    .appointment-requests-page .btn-purple:hover {
    background-color: #7c3aed;
    border-color: #7c3aed;
    color: white;
    }

    .appointment-requests-page .form-control:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.25);
    }

    .appointment-requests-page .card {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }

    .appointment-requests-page .card-body {
    padding: 1.5rem;
    }

    .appointment-requests-page .badge {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    }

    .appointment-requests-page .btn-group .btn {
    border-radius: 6px;
    }

    .appointment-requests-page .btn-group .btn:first-child {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    }

    .appointment-requests-page .btn-group .btn:last-child {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    }

    .appointment-requests-page .btn-group .btn:not(:first-child):not(:last-child) {
    border-radius: 0;
    }

    /* Override Bootstrap colors to match design */
    .appointment-requests-page .bg-warning {
    background-color: #fef3c7 !important;
    color: #92400e !important;
    }

    .appointment-requests-page .bg-success {
    background-color: #dcfce7 !important;
    color: #166534 !important;
    }

    .appointment-requests-page .btn-success {
    background-color: #16a34a;
    border-color: #16a34a;
    }

    .appointment-requests-page .btn-success:hover {
    background-color: #15803d;
    border-color: #15803d;
    }

    .appointment-requests-page .btn-warning {
    background-color: #f59e0b;
    border-color: #f59e0b;
    color: white;
    }

    .appointment-requests-page .btn-warning:hover {
    background-color: #d97706;
    border-color: #d97706;
    color: white;
    }

    .appointment-requests-page .btn-primary {
    background-color: #2563eb;
    border-color: #2563eb;
    }

    .appointment-requests-page .btn-primary:hover {
    background-color: #1d4ed8;
    border-color: #1d4ed8;
    }

    .appointment-requests-page .btn-secondary {
    background-color: #6b7280;
    border-color: #6b7280;
    }

    .appointment-requests-page .btn-secondary:hover {
    background-color: #4b5563;
    border-color: #4b5563;
    }

    /* ========================================
    CUSTOM STYLES FOR EXACT DESIGN MATCHING
    ======================================== */

    /* Image Widths and Heights - Performance Optimization */
    .quick-dashboard img[src*="avatar"] {
    width: 40px !important;
    height: 40px !important;
    object-fit: cover;
    }

    .quick-dashboard img[src*="avatar"].w-8 {
    width: 32px !important;
    height: 32px !important;
    }

    .quick-dashboard img[src*="avatar"].w-9 {
    width: 36px !important;
    height: 36px !important;
    }

    .quick-dashboard img[src*="avatar"].w-10 {
    width: 40px !important;
    height: 40px !important;
    }

    .quick-dashboard img[src*="avatar"].w-12 {
    width: 48px !important;
    height: 48px !important;
    }

    .quick-dashboard img[src*="gift-card"] {
    width: 300px !important;
    height: 190px !important;
    object-fit: cover;
    }

    .quick-dashboard img[src*="logo"] {
    width: 32px !important;
    height: 32px !important;
    object-fit: contain;
    }

    /* Appointment Requests Page - Exact Color Matching */
    .appointment-requests-page .sidebar-header .w-10.h-10 {
    width: 40px !important;
    height: 40px !important;
    background: linear-gradient(to right, #3b82f6, #06b6d4) !important;
    border-radius: 8px !important;
    }

    .appointment-requests-page .sidebar-header .fs-4 {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    color: #111827 !important;
    }

    .appointment-requests-page .sidebar-header .text-sm {
    font-size: 0.875rem !important;
    color: #6b7280 !important;
    }

    .appointment-requests-page .sidebar-menu-link {
    color: #374151 !important;
    font-weight: 500 !important;
    padding: 0.625rem 1rem !important;
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
    }

    .appointment-requests-page .sidebar-menu-link:hover {
    background-color: #f3f4f6 !important;
    color: #111827 !important;
    }

    .appointment-requests-page .sidebar-menu-button.active {
    background-color: #dbeafe !important;
    color: #2563eb !important;
    font-weight: 600 !important;
    }

    .appointment-requests-page .sidebar-submenu-link.active {
    background-color: #dbeafe !important;
    color: #2563eb !important;
    font-weight: 600 !important;
    }

    .appointment-requests-page .header {
    background-color: #ffffff !important;
    border-bottom: 1px solid #e5e7eb !important;
    padding: 1rem 1.5rem !important;
    }

    .appointment-requests-page .fs-2 {
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    color: #111827 !important;
    }

    .appointment-requests-page .text-sm {
    font-size: 0.875rem !important;
    color: #6b7280 !important;
    }

    .appointment-requests-page .btn-primary {
    background-color: #2563eb !important;
    border-color: #2563eb !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    padding: 0.5rem 1rem !important;
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
    }

    .appointment-requests-page .btn-primary:hover {
    background-color: #1d4ed8 !important;
    border-color: #1d4ed8 !important;
    }

    .appointment-requests-page .card {
    background-color: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    margin-bottom: 1rem !important;
    }

    .appointment-requests-page .card-body {
    padding: 1.5rem !important;
    }

    .appointment-requests-page .fw-semibold {
    font-weight: 600 !important;
    color: #111827 !important;
    }

    .appointment-requests-page .text-gray-500 {
    color: #6b7280 !important;
    }

    .appointment-requests-page .text-gray-700 {
    color: #374151 !important;
    }

    .appointment-requests-page .text-gray-900 {
    color: #111827 !important;
    }

    .appointment-requests-page .badge.bg-yellow-100 {
    background-color: #fef3c7 !important;
    color: #92400e !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    padding: 0.25rem 0.75rem !important;
    border-radius: 9999px !important;
    }

    .appointment-requests-page .btn-success {
    background-color: #16a34a !important;
    border-color: #16a34a !important;
    color: #ffffff !important;
    }

    .appointment-requests-page .btn-success:hover {
    background-color: #15803d !important;
    border-color: #15803d !important;
    }

    .appointment-requests-page .btn-warning {
    background-color: #f59e0b !important;
    border-color: #f59e0b !important;
    color: #ffffff !important;
    }

    .appointment-requests-page .btn-warning:hover {
    background-color: #d97706 !important;
    border-color: #d97706 !important;
    }

    .appointment-requests-page .btn-purple {
    background-color: #7c3aed !important;
    border-color: #7c3aed !important;
    color: #ffffff !important;
    }

    .appointment-requests-page .btn-purple:hover {
    background-color: #6d28d9 !important;
    border-color: #6d28d9 !important;
    }

    .appointment-requests-page .btn-secondary {
    background-color: #6b7280 !important;
    border-color: #6b7280 !important;
    color: #ffffff !important;
    }

    .appointment-requests-page .btn-secondary:hover {
    background-color: #4b5563 !important;
    border-color: #4b5563 !important;
    }

    .appointment-requests-page .btn-outline-secondary {
    background-color: transparent !important;
    border-color: #d1d5db !important;
    color: #374151 !important;
    }

    .appointment-requests-page .btn-outline-secondary:hover {
    background-color: #f9fafb !important;
    border-color: #9ca3af !important;
    color: #111827 !important;
    }

    .appointment-requests-page .form-control {
    border: 1px solid #d1d5db !important;
    border-radius: 8px !important;
    /* padding: 0.5rem 0.75rem !important; */
    font-size: 0.875rem !important;
    }

    .appointment-requests-page .form-control:focus {
    border-color: #2563eb !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1) !important;
    }

    .appointment-requests-page .border-top {
    border-top: 1px solid #e5e7eb !important;
    padding-top: 1rem !important;
    }

    .appointment-requests-page .gap-2 {
    gap: 0.5rem !important;
    }

    .appointment-requests-page .gap-3 {
    gap: 0.75rem !important;
    }

    .appointment-requests-page .gap-4 {
    gap: 1rem !important;
    }

    .appointment-requests-page .mb-4 {
    margin-bottom: 1rem !important;
    }

    .appointment-requests-page .me-2 {
    margin-right: 0.5rem !important;
    }

    .appointment-requests-page .me-3 {
    margin-right: 0.75rem !important;
    }

    .appointment-requests-page .px-3 {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
    }

    .appointment-requests-page .py-1 {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
    }

    .appointment-requests-page .rounded-pill {
    border-radius: 9999px !important;
    }

    .appointment-requests-page .text-xs {
    font-size: 0.75rem !important;
    }

    /* Gift Card Dashboard Page - Exact Color Matching */
    .gift-card-dashboard-page .sidebar-header .h-8.w-8 {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    }

    .gift-card-dashboard-page .sidebar-header .text-lg {
    font-size: 1.125rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    }

    .gift-card-dashboard-page .sidebar-menu-link {
    color: #d1d5db !important;
    font-weight: 500 !important;
    padding: 0.625rem 1rem !important;
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
    }

    .gift-card-dashboard-page .sidebar-menu-link:hover {
    background-color: #374151 !important;
    color: #ffffff !important;
    }

    .gift-card-dashboard-page .sidebar-menu-button.active {
    background-color: #3b82f6 !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    }

    .gift-card-dashboard-page .sidebar-submenu-link.active {
    background-color: rgba(107, 114, 128, 0.5) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    }

    .gift-card-dashboard-page .header {
    background-color: #ffffff !important;
    border-bottom: 1px solid #e5e7eb !important;
    padding: 1rem 1.5rem !important;
    height: 64px !important;
    }

    .gift-card-dashboard-page .border.border-gray-300 {
    border: 1px solid #d1d5db !important;
    border-radius: 8px !important;
    padding: 0.5rem 1rem !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    color: #374151 !important;
    background-color: #ffffff !important;
    transition: all 0.2s ease !important;
    }

    .gift-card-dashboard-page .border.border-gray-300:hover {
    background-color: #f9fafb !important;
    }

    .gift-card-dashboard-page .text-gray-600 {
    color: #4b5563 !important;
    }

    .gift-card-dashboard-page .text-gray-400 {
    color: #9ca3af !important;
    }

    .gift-card-dashboard-page .text-gray-500 {
    color: #6b7280 !important;
    }

    .gift-card-dashboard-page .hover\:text-primary-600:hover {
    color: #2563eb !important;
    }

    .gift-card-dashboard-page .bg-primary-600 {
    background-color: #2563eb !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    padding: 0.5rem 1rem !important;
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
    }

    .gift-card-dashboard-page .bg-primary-600:hover {
    background-color: #1d4ed8 !important;
    }

    .gift-card-dashboard-page .w-9.h-9 {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    }

    .gift-card-dashboard-page .ring-2 {
    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #3b82f6 !important;
    }

    .gift-card-dashboard-page .bg-contentBg {
    background-color: #f9fafb !important;
    }

    .gift-card-dashboard-page .fs-2 {
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    color: #111827 !important;
    }

    .gift-card-dashboard-page .bg-white {
    background-color: #ffffff !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    padding: 1.5rem !important;
    }

    .gift-card-dashboard-page .text-sm {
    font-size: 0.875rem !important;
    }

    .gift-card-dashboard-page .fw-medium {
    font-weight: 500 !important;
    }

    .gift-card-dashboard-page .fw-semibold {
    font-weight: 600 !important;
    }

    .gift-card-dashboard-page .fw-bold {
    font-weight: 700 !important;
    }

    .gift-card-dashboard-page .text-gray-600 {
    color: #4b5563 !important;
    }

    .gift-card-dashboard-page .text-gray-900 {
    color: #111827 !important;
    }

    .gift-card-dashboard-page .text-green-600 {
    color: #059669 !important;
    }

    .gift-card-dashboard-page .text-red-600 {
    color: #dc2626 !important;
    }

    .gift-card-dashboard-page .bg-blue-100 {
    background-color: #dbeafe !important;
    }

    .gift-card-dashboard-page .bg-green-100 {
    background-color: #dcfce7 !important;
    }

    .gift-card-dashboard-page .bg-purple-100 {
    background-color: #f3e8ff !important;
    }

    .gift-card-dashboard-page .bg-orange-100 {
    background-color: #fed7aa !important;
    }

    .gift-card-dashboard-page .text-blue-600 {
    color: #2563eb !important;
    }

    .gift-card-dashboard-page .text-green-600 {
    color: #059669 !important;
    }

    .gift-card-dashboard-page .text-purple-600 {
    color: #7c3aed !important;
    }

    .gift-card-dashboard-page .text-orange-600 {
    color: #ea580c !important;
    }

    .gift-card-dashboard-page .fs-4 {
    font-size: 1.25rem !important;
    }

    .gift-card-dashboard-page .fs-5 {
    font-size: 1.125rem !important;
    }

    .gift-card-dashboard-page .border.border-gray-300 {
    border: 1px solid #d1d5db !important;
    border-radius: 8px !important;
    padding: 0.25rem 0.75rem !important;
    font-size: 0.875rem !important;
    }

    .gift-card-dashboard-page .focus\:ring-primary-500:focus {
    border-color: #2563eb !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1) !important;
    }

    .gift-card-dashboard-page .focus\:border-primary-500:focus {
    border-color: #2563eb !important;
    }

    .gift-card-dashboard-page .hover\:text-primary-600:hover {
    color: #2563eb !important;
    }

    .gift-card-dashboard-page .hover\:text-primary-800:hover {
    color: #1e40af !important;
    }

    .gift-card-dashboard-page .hover\:bg-primary-700:hover {
    background-color: #1d4ed8 !important;
    }

    .gift-card-dashboard-page .bg-green-100 {
    background-color: #dcfce7 !important;
    }

    .gift-card-dashboard-page .text-green-800 {
    color: #166534 !important;
    }

    .gift-card-dashboard-page .bg-blue-100 {
    background-color: #dbeafe !important;
    }

    .gift-card-dashboard-page .text-blue-800 {
    color: #1e40af !important;
    }

    .gift-card-dashboard-page .bg-orange-100 {
    background-color: #fed7aa !important;
    }

    .gift-card-dashboard-page .text-orange-800 {
    color: #9a3412 !important;
    }

    .gift-card-dashboard-page .bg-red-100 {
    background-color: #fee2e2 !important;
    }

    .gift-card-dashboard-page .text-red-800 {
    color: #991b1b !important;
    }

    .gift-card-dashboard-page .table {
    width: 100% !important;
    font-size: 0.875rem !important;
    text-align: left !important;
    color: #4b5563 !important;
    }

    .gift-card-dashboard-page .table th {
    background-color: #f9fafb !important;
    font-size: 0.75rem !important;
    color: #6b7280 !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
    padding: 0.75rem 1.5rem !important;
    border-bottom: 1px solid #e5e7eb !important;
    }

    .gift-card-dashboard-page .table td {
    padding: 1rem 1.5rem !important;
    border-bottom: 1px solid #e5e7eb !important;
    background-color: #ffffff !important;
    }

    .gift-card-dashboard-page .table tbody tr:hover {
    background-color: #f9fafb !important;
    }

    .gift-card-dashboard-page .badge {
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    padding: 0.25rem 0.625rem !important;
    border-radius: 9999px !important;
    }

    .gift-card-dashboard-page .bg-green-100 {
    background-color: #dcfce7 !important;
    }

    .gift-card-dashboard-page .text-green-800 {
    color: #166534 !important;
    }

    .gift-card-dashboard-page .bg-blue-100 {
    background-color: #dbeafe !important;
    }

    .gift-card-dashboard-page .text-blue-800 {
    color: #1e40af !important;
    }

    .gift-card-dashboard-page .bg-orange-100 {
    background-color: #fed7aa !important;
    }

    .gift-card-dashboard-page .text-orange-800 {
    color: #9a3412 !important;
    }

    .gift-card-dashboard-page .bg-red-100 {
    background-color: #fee2e2 !important;
    }

    .gift-card-dashboard-page .text-red-800 {
    color: #991b1b !important;
    }

    .gift-card-dashboard-page .font-mono {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace !important;
    }

    .gift-card-dashboard-page .w-8.h-8 {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    }

    .gift-card-dashboard-page .me-3 {
    margin-right: 0.75rem !important;
    }

    .gift-card-dashboard-page .fw-medium {
    font-weight: 500 !important;
    color: #111827 !important;
    }

    .gift-card-dashboard-page .text-gray-500 {
    color: #6b7280 !important;
    }

    .gift-card-dashboard-page .text-xs {
    font-size: 0.75rem !important;
    }

    .gift-card-dashboard-page .fst-semibold {
    font-weight: 600 !important;
    color: #111827 !important;
    }

    .gift-card-dashboard-page .text-primary-600 {
    color: #2563eb !important;
    }

    .gift-card-dashboard-page .hover\:text-primary-800:hover {
    color: #1e40af !important;
    }

    .gift-card-dashboard-page .text-gray-600 {
    color: #4b5563 !important;
    }

    .gift-card-dashboard-page .hover\:text-gray-800:hover {
    color: #1f2937 !important;
    }

    .gift-card-dashboard-page .gap-2 {
    gap: 0.5rem !important;
    }

    .gift-card-dashboard-page .mb-6 {
    margin-bottom: 1.5rem !important;
    }

    .gift-card-dashboard-page .mb-4 {
    margin-bottom: 1rem !important;
    }

    .gift-card-dashboard-page .p-6 {
    padding: 1.5rem !important;
    }

    .gift-card-dashboard-page .border-bottom {
    border-bottom: 1px solid #e5e7eb !important;
    }

    .gift-card-dashboard-page .overflow-x-auto {
    overflow-x: auto !important;
    }

    .gift-card-dashboard-page .flex-1 {
    flex: 1 1 0% !important;
    }

    .gift-card-dashboard-page .position-relative {
    position: relative !important;
    }

    .gift-card-dashboard-page .position-absolute {
    position: absolute !important;
    }

    .gift-card-dashboard-page .inset-y-0 {
    top: 0 !important;
    bottom: 0 !important;
    }

    .gift-card-dashboard-page .start-0 {
    left: 0 !important;
    }

    .gift-card-dashboard-page .ps-3 {
    padding-left: 0.75rem !important;
    }

    .gift-card-dashboard-page .d-flex {
    display: flex !important;
    }

    .gift-card-dashboard-page .align-items-center {
    align-items: center !important;
    }

    .gift-card-dashboard-page .pointer-events-none {
    pointer-events: none !important;
    }

    .gift-card-dashboard-page .ps-10 {
    padding-left: 2.5rem !important;
    }

    .gift-card-dashboard-page .pe-3 {
    padding-right: 0.75rem !important;
    }

    .gift-card-dashboard-page .py-2 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    }

    .gift-card-dashboard-page .px-3 {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
    }

    .gift-card-dashboard-page .px-4 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    }

    .gift-card-dashboard-page .me-2 {
    margin-right: 0.5rem !important;
    }

    .gift-card-dashboard-page .d-flex.align-items-center.justify-content-between {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    }

    .gift-card-dashboard-page .d-flex.align-items-center.gap-3 {
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    }

    .gift-card-dashboard-page .d-flex.align-items-center.gap-4 {
    display: flex !important;
    align-items: center !important;
    gap: 1rem !important;
    }

    .gift-card-dashboard-page .text-end {
    text-align: right !important;
    }

    .gift-card-dashboard-page .mb-0 {
    margin-bottom: 0 !important;
    }

    .gift-card-dashboard-page .mt-1 {
    margin-top: 0.25rem !important;
    }

    .gift-card-dashboard-page .rounded-lg {
    border-radius: 8px !important;
    }

    .gift-card-dashboard-page .rounded-xl {
    border-radius: 12px !important;
    }

    .gift-card-dashboard-page .shadow-sm {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
    }

    /* Responsive Design */
    @media (max-width: 768px) {
    .appointment-requests-page .d-flex.flex-column.flex-lg-row {
        flex-direction: column !important;
    }

    .appointment-requests-page .gap-4 {
        gap: 1rem !important;
    }

    .gift-card-dashboard-page .row {
        margin-left: -0.5rem !important;
        margin-right: -0.5rem !important;
    }

    .gift-card-dashboard-page .col-md-6,
    .gift-card-dashboard-page .col-lg-3 {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }

    .gift-card-dashboard-page .overflow-x-auto {
        overflow-x: scroll !important;
    }
    }

    @media (max-width: 576px) {
    .appointment-requests-page .card-body {
        padding: 1rem !important;
    }

    .gift-card-dashboard-page .p-6 {
        padding: 1rem !important;
    }

    .gift-card-dashboard-page .table th,
    .gift-card-dashboard-page .table td {
        padding: 0.5rem !important;
        font-size: 0.75rem !important;
    }
    }
/* ---- quick dashboard end --*/

/* ---- quick dashboard dark theme start --*/
[data-bs-theme=dark] .dashboard-nuflow-main {
    background-color: var(--bs-body-bg-in) !important;
    color: var(--bs-body-bg-color-in) !important;
}

[data-bs-theme=dark] .nuflow-card .nuflow-card-body,
[data-bs-theme=dark] .nuflow-reports-tb-card .nufloe-reports-card-body {
    background: var(--bs-body-bg-in) !important;
    border-color: rgba(var(--bs-secondary-bg-subtle-color), var(--bs-text-opacity)) !important;
    box-shadow: 0 0 transparent, 0 0 transparent, 0 1px 2px 0 rgba(0, 0, 0, 0.2) !important;
}

[data-bs-theme=dark] .sales-grid .sales-grid-inner h3 {
    color: var(--bs-body-bg-color-in) !important;
}

[data-bs-theme=dark] .sales-grid .icon {
    background: var(--bs-secondary-bg-subtle) !important;
}

[data-bs-theme=dark] .sales-report p {
    color: var(--bs-body-bg-color-in) !important;
}

[data-bs-theme=dark] .nuflow-card .nuflow-card-body p {
    color: var(--bs-body-bg-color-in) !important;
}

[data-bs-theme=dark] .nuflow-bo-inner-cards .nuflow-card {
    background: var(--bs-body-bg-in) !important;
    border-color: rgba(var(--bs-secondary-bg-subtle-color), var(--bs-text-opacity)) !important;
}

[data-bs-theme=dark] .nuflow-reports-tb-card .nufloe-reports-card-body {
    background: var(--bs-body-bg-in) !important;
}

[data-bs-theme=dark] .sales-reports-column-grid,
[data-bs-theme=dark] .sales-filter-name {
    background: var(--bs-body-bg-in) !important;
    color: var(--bs-body-bg-color-in) !important;
}

[data-bs-theme=dark] .sales-filter-name {
    border-bottom-color: rgba(var(--bs-secondary-bg-subtle-color), var(--bs-text-opacity)) !important;
}

/* Table styles for dark theme */
[data-bs-theme=dark] table.sales-tb {
    background: var(--bs-body-bg-in) !important;
}

[data-bs-theme=dark] table.sales-tb tr th {
    background: var(--bs-secondary-bg-subtle) !important;
    color: var(--bs-body-bg-color-in) !important;
    border-color: rgba(var(--bs-secondary-bg-subtle-color), var(--bs-text-opacity)) !important;
}

[data-bs-theme=dark] table.sales-tb tr td {
    background: var(--bs-body-bg-in) !important;
    color: var(--bs-body-bg-color-in) !important;
    border-color: rgba(var(--bs-secondary-bg-subtle-color), var(--bs-text-opacity)) !important;
}

[data-bs-theme=dark] .detail-row.show {
    background: var(--bs-secondary-bg-subtle) !important;
}

[data-bs-theme=dark] .badge-name {
    background: var(--bs-secondary-bg-subtle) !important;
    color: var(--bs-body-bg-color-in) !important;
}

/* Payment method icons dark theme */
[data-bs-theme=dark] .card-payment svg,
[data-bs-theme=dark] .bank-transfer svg,
[data-bs-theme=dark] .cash svg {
    filter: brightness(0) saturate(100%) invert(61%) sepia(31%) saturate(328%) hue-rotate(177deg) brightness(87%) contrast(84%) !important;
}

[data-bs-theme=dark] table.sales-tb tr td .card-payment span {
    color: #4f9eff !important;
}

[data-bs-theme=dark] table.sales-tb tr td .bank-transfer span {
    color: #7c8fac !important;
}

[data-bs-theme=dark] table.sales-tb tr td .cash span {
    color: #4ade80 !important;
}

/* Hidden row table dark theme */
[data-bs-theme=dark] .hiddenRow .table {
    background: var(--bs-body-bg-in) !important;
    border-color: rgba(var(--bs-secondary-bg-subtle-color), var(--bs-text-opacity)) !important;
}

[data-bs-theme=dark] .hiddenRow .table tr th,
[data-bs-theme=dark] .hiddenRow .table tr td {
    background: var(--bs-body-bg-in) !important;
    color: var(--bs-body-bg-color-in) !important;
    border-color: rgba(var(--bs-secondary-bg-subtle-color), var(--bs-text-opacity)) !important;
}

/* Accordion toggle dark theme */
[data-bs-theme=dark] table.sales-tb .accordion-toggle td.arrow svg {
    filter: brightness(0) saturate(100%) invert(61%) sepia(31%) saturate(328%) hue-rotate(177deg) brightness(87%) contrast(84%) !important;
}

[data-bs-theme=dark] table.sales-tb .accordion-toggle[aria-expanded="true"] td.arrow svg {
    filter: brightness(0) saturate(100%) invert(61%) sepia(31%) saturate(328%) hue-rotate(177deg) brightness(87%) contrast(84%) !important;
}

/* Badge styles dark theme */
[data-bs-theme=dark] .badge-pending {
    background: rgba(37, 99, 235, 0.2) !important;
    color: #4f9eff !important;
}

[data-bs-theme=dark] .badge-voided {
    background: var(--bs-secondary-bg-subtle) !important;
    color: var(--bs-body-bg-color-in) !important;
}

[data-bs-theme=dark] table.sales-tb .bg-success {
    background: rgba(34, 197, 94, 0.2) !important;
    color: #4ade80 !important;
}

[data-bs-theme=dark] .badge {
    background: var(--bs-secondary-bg-subtle) !important;
    color: var(--bs-body-bg-color-in) !important;
}

[data-bs-theme=dark] .detail-row .badge {
    background: var(--bs-secondary-bg-subtle) !important;
    color: var(--bs-body-bg-color-in) !important;
}

/* Action icons dark theme */
[data-bs-theme=dark] .icons-action svg {
    filter: brightness(0) saturate(100%) invert(61%) sepia(31%) saturate(328%) hue-rotate(177deg) brightness(87%) contrast(84%) !important;
}

/* DataTable sorting arrows dark theme */
[data-bs-theme=dark] table.dataTable thead th.sorting:after,
[data-bs-theme=dark] table.dataTable thead th.sorting_asc:after,
[data-bs-theme=dark] table.dataTable thead th.sorting_desc:after {
    background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiM3YzhmYWMiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBjbGFzcz0ibHVjaWRlIGx1Y2lkZS1hcnJvdy11cC1kb3duIGgtMyB3LTMiPjxwYXRoIGQ9Im0yMSAxNi00IDQtNC00Ij48L3BhdGg+PHBhdGggZD0iTTE3IDIwVjQiPjwvcGF0aD48cGF0aCBkPSJtMyA4IDQtNCA0IDQiPjwvcGF0aD48cGF0aCBkPSJNNyA0djE2Ij48L3BhdGg+PC9zdmc+') no-repeat !important;
    background-size: 13px !important;
    background-position: right center;
    width: 20px;
    height: 20px;
}

[data-bs-theme=dark] table.sales-tb .badge.bg-success {
    background: rgba(34, 197, 94, 0.2) !important;
    color: #4ade80 !important;
}

/* Color variants dark theme */
[data-bs-theme=dark] .report-success p {
    color: #4ade80 !important;
}

[data-bs-theme=dark] .report-success svg {
    filter: brightness(0) saturate(100%) invert(63%) sepia(84%) saturate(350%) hue-rotate(106deg) brightness(95%) contrast(88%) !important;
}

[data-bs-theme=dark] .success {
    background: rgba(34, 197, 94, 0.2) !important;
}

[data-bs-theme=dark] .success svg {
    filter: brightness(0) saturate(100%) invert(65%) sepia(14%) saturate(1675%) hue-rotate(106deg) brightness(103%) contrast(96%) !important;
}

[data-bs-theme=dark] .blue {
    background: rgba(37, 99, 235, 0.2) !important;
}

[data-bs-theme=dark] .blue svg {
    filter: brightness(0) saturate(100%) invert(26%) sepia(82%) saturate(1617%) hue-rotate(207deg) brightness(109%) contrast(98%) !important;
}

[data-bs-theme=dark] .slate {
    background: var(--bs-secondary-bg-subtle) !important;
}

[data-bs-theme=dark] .slate svg {
    filter: brightness(0) saturate(100%) invert(30%) sepia(27%) saturate(486%) hue-rotate(176deg) brightness(94%) contrast(84%) !important;
}

[data-bs-theme=dark] .purple {
    background: rgba(147, 51, 234, 0.2) !important;
}

[data-bs-theme=dark] .purple svg {
    filter: brightness(0) saturate(100%) invert(25%) sepia(56%) saturate(4844%) hue-rotate(262deg) brightness(94%) contrast(96%) !important;
}

[data-bs-theme=dark] .orange {
    background: rgba(249, 115, 22, 0.2) !important;
}

[data-bs-theme=dark] .orange svg {
    filter: brightness(0) saturate(100%) invert(58%) sepia(43%) saturate(6368%) hue-rotate(353deg) brightness(108%) contrast(95%) !important;
}

[data-bs-theme=dark] .amber {
    background: rgba(245, 158, 11, 0.2) !important;
}

[data-bs-theme=dark] .amber svg {
    filter: brightness(0) saturate(100%) invert(59%) sepia(82%) saturate(4660%) hue-rotate(13deg) brightness(100%) contrast(95%) !important;
}

/* Form controls dark theme */
[data-bs-theme=dark] .form-control-reports {
    background: var(--bs-body-bg-in) !important;
    border-color: rgba(var(--bs-secondary-bg-subtle-color), var(--bs-text-opacity)) !important;
    color: var(--bs-body-bg-color-in) !important;
}

[data-bs-theme=dark] .search-control {
    background: var(--bs-body-bg-in) url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiM3YzhmYWMiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBjbGFzcz0ibHVjaWRlIGx1Y2lkZS1zZWFyY2ggYWJzb2x1dGUgbGVmdC0zIHRvcC0xLzIgdHJhbnNmb3JtIC10cmFuc2xhdGUteS0xLzIgdGV4dC1zbGF0ZS00MDAgaC00IHctNCI+PGNpcmNsZSBjeD0iMTEiIGN5PSIxMSIgcj0iOCI+PC9jaXJjbGU+PHBhdGggZD0ibTIxIDIxLTQuMy00LjMiPjwvcGF0aD48L3N2Zz4=') no-repeat !important;
    background-size: 6% !important;
    background-position: 10px !important;
    border-color: rgba(var(--bs-secondary-bg-subtle-color), var(--bs-text-opacity)) !important;
    color: var(--bs-body-bg-color-in) !important;
}

[data-bs-theme=dark] .sales-filter-name .form-check-input {
    border-color: #2563eb !important;
    background-color: var(--bs-body-bg-in) !important;
}

[data-bs-theme=dark] .sales-filter-name .form-check-label {
    color: var(--bs-body-bg-color-in) !important;
}

[data-bs-theme=dark] .sales-filter-name .form-check-input:checked[type=radio] {
    background: #2563eb url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOC44MjgiIGhlaWdodD0iMTMuNDE0IiB2aWV3Qm94PSIwIDAgMTguODI4IDEzLjQxNCI+DQogIDxwYXRoIGlkPSJzdmd2aWV3ZXItb3V0cHV0XzdfIiBkYXRhLW5hbWU9InN2Z3ZpZXdlci1vdXRwdXQgKDcpIiBkPSJNMjAsNiw5LDE3LDQsMTIiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yLjU4NiAtNC41ODYpIiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyIi8+DQo8L3N2Zz4NCg==') no-repeat !important;
    background-size: 10px !important;
    background-position: center !important;
}

[data-bs-theme=dark] .advanced-filter-reset button {
    background-color: var(--bs-body-bg-in) !important;
    color: var(--bs-body-bg-color-in) !important;
    border-color: rgba(var(--bs-secondary-bg-subtle-color), var(--bs-text-opacity)) !important;
}

[data-bs-theme=dark] .advanced-filter-reset button:hover {
    background-color: var(--bs-secondary-bg-subtle) !important;
}

[data-bs-theme=dark] .adv-search {
    background: var(--bs-body-bg-in) url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMiIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIyIDIwIj4NCiAgPHBhdGggaWQ9InN2Z3ZpZXdlci1vdXRwdXRfNDBfIiBkYXRhLW5hbWU9InN2Z3ZpZXdlci1vdXRwdXQgKDQwKSIgZD0iTTIyLDNIMmw4LDkuNDZWMTlsNCwyVjEyLjQ2WiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTEgLTIpIiBmaWxsPSJub25lIiBzdHJva2U9IiM3YzhmYWMiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyIi8+DQo8L3N2Zz4NCg==') no-repeat !important;
    background-size: 15px !important;
    background-position: 10px center !important;
    border-color: rgba(var(--bs-secondary-bg-subtle-color), var(--bs-text-opacity)) !important;
    color: var(--bs-body-bg-color-in) !important;
}

[data-bs-theme=dark] .reset-ic {
    background: var(--bs-body-bg-in) url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMC40MTQiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMC40MTQgMjAiPg0KICA8ZyBpZD0ic3Zndmlld2VyLW91dHB1dF80Ml8iIGRhdGEtbmFtZT0ic3Zndmlld2VyLW91dHB1dCAoNDIpIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMS41ODYgLTIpIj4NCiAgICA8cGF0aCBpZD0iUGF0aF80IiBkYXRhLW5hbWU9IlBhdGggNCIgZD0iTTMsMTJhOSw5LDAsMSwwLDktOUE5Ljc1LDkuNzUsMCwwLDAsNS4yNiw1Ljc0TDMsOCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjN2M4ZmFjIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIvPg0KICAgIDxwYXRoIGlkPSJQYXRoXzUiIGRhdGEtbmFtZT0iUGF0aCA1IiBkPSJNMywzVjhIOCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjN2M4ZmFjIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIvPg0KICA8L2c+DQo8L3N2Zz4NCg==') no-repeat !important;
    background-size: 15px !important;
    background-position: 18px center !important;
    border-color: rgba(var(--bs-secondary-bg-subtle-color), var(--bs-text-opacity)) !important;
    color: var(--bs-body-bg-color-in) !important;
}

[data-bs-theme=dark] .filter-data-select2 .selection .select2-selection .select2-selection__rendered {
    background: var(--bs-body-bg-in) url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMiIgdmlld0JveD0iMCAwIDIwIDIyIj4NCiAgPGcgaWQ9InN2Z3ZpZXdlci1vdXRwdXRfMzhfIiBkYXRhLW5hbWU9InN2Z3ZpZXdlci1vdXRwdXQgKDM4KSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTIgLTEpIj4NCiAgICA8cGF0aCBpZD0iUGF0aF8xIiBkYXRhLW5hbWU9IlBhdGggMSIgZD0iTTgsMlY2IiBmaWxsPSJub25lIiBzdHJva2U9IiM3YzhmYWMiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyIi8+DQogICAgPHBhdGggaWQ9IlBhdGhfMiIgZGF0YS1uYW1lPSJQYXRoIDIiIGQ9Ik0xNiwyVjYiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzc0ODI1NiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjIiLz4NCiAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlXzEiIGRhdGEtbmFtZT0iUmVjdGFuZ2xlIDEiIHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCIgcng9IjIiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDMgNCkiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzM0NDI1NiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjIiLz4NCiAgICA8cGF0aCBpZD0iUGF0aF8zIiBkYXRhLW5hbWU9IlBhdGggMyIgZD0iTTMsMTBIMjEiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzM0NDI1NiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjIiLz4NCiAgPC9nPg0KPC9zdmc+DQo=') no-repeat !important;
    background-size: 16px !important;
    background-position: 10px center !important;
    color: var(--bs-body-bg-color-in) !important;
    border-color: rgba(var(--bs-secondary-bg-subtle-color), var(--bs-text-opacity)) !important;
}

[data-bs-theme=dark] .filter-list-btn .selection .select2-selection {
    background: var(--bs-body-bg-in) !important;
    border-color: rgba(var(--bs-secondary-bg-subtle-color), var(--bs-text-opacity)) !important;
    color: var(--bs-body-bg-color-in) !important;
}

[data-bs-theme=dark] .btn-outline-secondary {
    background: var(--bs-body-bg-in) !important;
    border-color: rgba(var(--bs-secondary-bg-subtle-color), var(--bs-text-opacity)) !important;
    color: var(--bs-body-bg-color-in) !important;
}

[data-bs-theme=dark] .btn-outline-secondary:hover {
    background-color: var(--bs-secondary-bg-subtle) !important;
    color: var(--bs-body-bg-color-in) !important;
    border-color: rgba(var(--bs-secondary-bg-subtle-color), var(--bs-text-opacity)) !important;
}

[data-bs-theme=dark] .drop-btn svg {
    filter: brightness(0) saturate(100%) invert(61%) sepia(31%) saturate(328%) hue-rotate(177deg) brightness(87%) contrast(84%) !important;
}

/* View page dark theme */
[data-bs-theme=dark] .view-sales-report {
    background-color: var(--bs-body-bg-in) !important;
}

[data-bs-theme=dark] .view-sales-report-grid .card .card-body {
    background: var(--bs-body-bg-in) !important;
    border-color: rgba(var(--bs-secondary-bg-subtle-color), var(--bs-text-opacity)) !important;
}

[data-bs-theme=dark] .view-sales-report-grid .card {
    background: var(--bs-body-bg-in) !important;
    box-shadow: 0 0 transparent, 0 0 transparent, 0 1px 2px 0 rgba(0, 0, 0, 0.2) !important;
}

[data-bs-theme=dark] .view-reports {
    background-color: var(--bs-secondary-bg-subtle) !important;
}

[data-bs-theme=dark] .view-reports .table th {
    color: var(--bs-body-bg-color-in) !important;
    background: var(--bs-body-bg-in) !important;
}

[data-bs-theme=dark] .view-reports .table td {
    color: var(--bs-body-bg-color-in) !important;
    background: var(--bs-body-bg-in) !important;
}

[data-bs-theme=dark] .view-reports-main {
    background-color: var(--bs-body-bg-in) !important;
    border-color: rgba(var(--bs-secondary-bg-subtle-color), var(--bs-text-opacity)) !important;
}

[data-bs-theme=dark] .view-reports-main th {
    background-color: var(--bs-secondary-bg-subtle) !important;
    color: var(--bs-body-bg-color-in) !important;
}

[data-bs-theme=dark] .view-reports-main td {
    color: var(--bs-body-bg-color-in) !important;
    background: var(--bs-body-bg-in) !important;
}

[data-bs-theme=dark] .view-reports-main .badge {
    background-color: var(--bs-secondary-bg-subtle) !important;
    color: var(--bs-body-bg-color-in) !important;
}

[data-bs-theme=dark] .view-reports-main .badge:hover {
    background-color: #6366f1 !important;
    color: #fff !important;
}

[data-bs-theme=dark] .text-md {
    color: var(--bs-body-bg-color-in) !important;
}

[data-bs-theme=dark] .view-sales-report-grid .card .card-body p {
    color: var(--bs-body-bg-color-in) !important;
}

/* Status badge dark theme */
[data-bs-theme=dark] .status-badge.blue {
    background-color: rgba(37, 99, 235, 0.2) !important;
    color: #4f9eff !important;
}

[data-bs-theme=dark] .status-badge.purple {
    background-color: rgba(147, 51, 234, 0.2) !important;
    color: #a855f7 !important;
}

[data-bs-theme=dark] .status-badge.green {
    background-color: rgba(34, 197, 94, 0.2) !important;
    color: #4ade80 !important;
}

[data-bs-theme=dark] .status-badge.pink {
    background-color: rgba(236, 72, 153, 0.2) !important;
    color: #ec4899 !important;
}

[data-bs-theme=dark] .status-badge.orange {
    background-color: rgba(249, 115, 22, 0.2) !important;
    color: #fb923c !important;
}

[data-bs-theme=dark] .status-badge.red {
    background-color: rgba(239, 68, 68, 0.2) !important;
    color: #f87171 !important;
}

[data-bs-theme=dark] .status-badge.teal {
    background-color: rgba(20, 184, 166, 0.2) !important;
    color: #2dd4bf !important;
}

[data-bs-theme=dark] .status-badge.indigo {
    background-color: rgba(99, 102, 241, 0.2) !important;
    color: #818cf8 !important;
}

[data-bs-theme=dark] .status-badge.yellow {
    background-color: rgba(234, 179, 8, 0.2) !important;
    color: #facc15 !important;
}

[data-bs-theme=dark] .status-badge.cyan {
    background-color: rgba(6, 182, 212, 0.2) !important;
    color: #22d3ee !important;
}

[data-bs-theme=dark] .status-badge.lime {
    background-color: rgba(132, 204, 22, 0.2) !important;
    color: #84cc16 !important;
}

[data-bs-theme=dark] .status-badge.rose {
    background-color: rgba(244, 63, 94, 0.2) !important;
    color: #fb7185 !important;
}

[data-bs-theme=dark] .status-badge.gray {
    background-color: var(--bs-secondary-bg-subtle) !important;
    color: var(--bs-body-bg-color-in) !important;
}

/* Service badge dark theme */
[data-bs-theme=dark] .service-badge.blue {
    background-color: rgba(37, 99, 235, 0.2) !important;
    color: #4f9eff !important;
}

[data-bs-theme=dark] .service-badge.purple {
    background-color: rgba(147, 51, 234, 0.2) !important;
    color: #a855f7 !important;
}

[data-bs-theme=dark] .service-badge.green {
    background-color: rgba(34, 197, 94, 0.2) !important;
    color: #4ade80 !important;
}

[data-bs-theme=dark] .service-badge.pink {
    background-color: rgba(236, 72, 153, 0.2) !important;
    color: #ec4899 !important;
}

[data-bs-theme=dark] .service-badge.orange {
    background-color: rgba(249, 115, 22, 0.2) !important;
    color: #fb923c !important;
}

[data-bs-theme=dark] .service-badge.red {
    background-color: rgba(239, 68, 68, 0.2) !important;
    color: #f87171 !important;
}

[data-bs-theme=dark] .service-badge.teal {
    background-color: rgba(20, 184, 166, 0.2) !important;
    color: #2dd4bf !important;
}

[data-bs-theme=dark] .service-badge.indigo {
    background-color: rgba(99, 102, 241, 0.2) !important;
    color: #818cf8 !important;
}

[data-bs-theme=dark] .service-badge.yellow {
    background-color: rgba(234, 179, 8, 0.2) !important;
    color: #facc15 !important;
}

[data-bs-theme=dark] .service-badge.cyan {
    background-color: rgba(6, 182, 212, 0.2) !important;
    color: #22d3ee !important;
}

[data-bs-theme=dark] .service-badge.lime {
    background-color: rgba(132, 204, 22, 0.2) !important;
    color: #84cc16 !important;
}

[data-bs-theme=dark] .service-badge.rose {
    background-color: rgba(244, 63, 94, 0.2) !important;
    color: #fb7185 !important;
}

[data-bs-theme=dark] .service-badge.gray {
    background-color: var(--bs-secondary-bg-subtle) !important;
    color: var(--bs-body-bg-color-in) !important;
}

/* Export icon dark theme */
[data-bs-theme=dark] .icon_export {
    background: url('data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjN2M4ZmFjIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMiIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTggM3YySDV2MTRoMTN2MmgtMTRjLTEuMSAwLTItLjktMi0yVjRjMC0xLjEuOS0yIDItMmgxMnpNMTggMTR2LTRoLTN2LTRsLTUgNSA1IDV2LTRoM3oiLz48L3N2Zz4=') no-repeat !important;
    background-size: 15px !important;
    background-position: 10px center !important;
}

/* ---- quick dashboard dark theme end --*/

/* ---- complete quick dashboard dark theme start --*/
[data-bs-theme=dark] .report_hub {
    /* CSS Variables - Dark Theme Design System */
    --primary-color: #6366f1;
    --secondary-color: #8b5cf6;
    --success-color: #10b981;
    --warning-color: #f59e0b;
    --danger-color: #ef4444;
    --info-color: #3b82f6;
    --surface-color: var(--bs-body-bg-in);
    --border-color: rgba(var(--bs-secondary-bg-subtle-color), var(--bs-text-opacity));
    --text-primary: var(--bs-body-bg-color-in);
    --text-secondary: var(--bs-body-bg-color-in);
    --text-muted: var(--bs-body-bg-color-in);
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
}

[data-bs-theme=dark] .report_hub {
    background-color: var(--bs-body-bg-in) !important;
    color: var(--bs-body-bg-color-in) !important;
}

[data-bs-theme=dark] .report_hub .bg-surface {
    background-color: var(--bs-body-bg-in) !important;
}

[data-bs-theme=dark] .report_hub .text-textPrimary {
    color: var(--bs-body-bg-color-in) !important;
}

[data-bs-theme=dark] .report_hub .text-textSecondary {
    color: var(--bs-body-bg-color-in) !important;
    opacity: 0.8 !important;
}

[data-bs-theme=dark] .report_hub .text-accent {
    color: #818cf8 !important;
}

[data-bs-theme=dark] .report_hub .text-accent-dark {
    color: #6366f1 !important;
}

/* Card Components Dark Theme */
[data-bs-theme=dark] .report_hub .card {
    background-color: var(--bs-body-bg-in) !important;
    border-color: rgba(var(--bs-secondary-bg-subtle-color), var(--bs-text-opacity)) !important;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2) !important;
}

[data-bs-theme=dark] .report_hub .card:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2) !important;
}

[data-bs-theme=dark] .report_hub .card-header {
    background-color: var(--bs-body-bg-in) !important;
    border-bottom-color: rgba(var(--bs-secondary-bg-subtle-color), var(--bs-text-opacity)) !important;
}

[data-bs-theme=dark] .report_hub .card-body {
    background-color: var(--bs-body-bg-in) !important;
}

/* Metric Cards Dark Theme */
[data-bs-theme=dark] .report_hub .metric-card {
    background-color: var(--bs-body-bg-in) !important;
    border-color: rgba(var(--bs-secondary-bg-subtle-color), var(--bs-text-opacity)) !important;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2) !important;
}

[data-bs-theme=dark] .report_hub .metric-card:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2) !important;
}

[data-bs-theme=dark] .report_hub .metric-card .icon {
    filter: brightness(0) saturate(100%) invert(61%) sepia(31%) saturate(328%) hue-rotate(177deg) brightness(87%) contrast(84%) !important;
}

/* Dashboard Grid Dark Theme */
[data-bs-theme=dark] .dashboard-grid {
    background-color: var(--bs-body-bg-in) !important;
}

[data-bs-theme=dark] .dashboard-grid .grid-item {
    background-color: var(--bs-body-bg-in) !important;
    border-color: rgba(var(--bs-secondary-bg-subtle-color), var(--bs-text-opacity)) !important;
}

/* Chart Components Dark Theme */
[data-bs-theme=dark] .chart-container {
    background-color: var(--bs-body-bg-in) !important;
    border-color: rgba(var(--bs-secondary-bg-subtle-color), var(--bs-text-opacity)) !important;
}

[data-bs-theme=dark] .chart-title {
    color: var(--bs-body-bg-color-in) !important;
}

[data-bs-theme=dark] .chart-subtitle {
    color: var(--bs-body-bg-color-in) !important;
    opacity: 0.7 !important;
}

/* Table Components Dark Theme */
[data-bs-theme=dark] .dashboard-table {
    background-color: var(--bs-body-bg-in) !important;
}

[data-bs-theme=dark] .dashboard-table th {
    background-color: var(--bs-secondary-bg-subtle) !important;
    color: var(--bs-body-bg-color-in) !important;
    border-color: rgba(var(--bs-secondary-bg-subtle-color), var(--bs-text-opacity)) !important;
}

[data-bs-theme=dark] .dashboard-table td {
    background-color: var(--bs-body-bg-in) !important;
    color: var(--bs-body-bg-color-in) !important;
    border-color: rgba(var(--bs-secondary-bg-subtle-color), var(--bs-text-opacity)) !important;
}

[data-bs-theme=dark] .dashboard-table tr:hover {
    background-color: var(--bs-secondary-bg-subtle) !important;
}

/* Form Components Dark Theme */
[data-bs-theme=dark] .dashboard-form .form-control {
    background-color: var(--bs-body-bg-in) !important;
    border-color: rgba(var(--bs-secondary-bg-subtle-color), var(--bs-text-opacity)) !important;
    color: var(--bs-body-bg-color-in) !important;
}

[data-bs-theme=dark] .dashboard-form .form-control:focus {
    border-color: var(--bs-primary) !important;
    box-shadow: 0 0 0 0.2rem rgba(99, 102, 241, 0.25) !important;
}

[data-bs-theme=dark] .dashboard-form .form-label {
    color: var(--bs-body-bg-color-in) !important;
}

[data-bs-theme=dark] .dashboard-form .form-select {
    background-color: var(--bs-body-bg-in) !important;
    border-color: rgba(var(--bs-secondary-bg-subtle-color), var(--bs-text-opacity)) !important;
    color: var(--bs-body-bg-color-in) !important;
}

/* Button Components Dark Theme */
[data-bs-theme=dark] .dashboard-btn {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    color: #fff !important;
}

[data-bs-theme=dark] .dashboard-btn:hover {
    background-color: #4f46e5 !important;
    border-color: #4f46e5 !important;
}

[data-bs-theme=dark] .dashboard-btn-outline {
    background-color: transparent !important;
    border-color: var(--bs-primary) !important;
    color: var(--bs-primary) !important;
}

[data-bs-theme=dark] .dashboard-btn-outline:hover {
    background-color: var(--bs-primary) !important;
    color: #fff !important;
}

/* Navigation Components Dark Theme */
[data-bs-theme=dark] .dashboard-nav {
    background-color: var(--bs-body-bg-in) !important;
    border-color: rgba(var(--bs-secondary-bg-subtle-color), var(--bs-text-opacity)) !important;
}

[data-bs-theme=dark] .dashboard-nav .nav-link {
    color: var(--bs-body-bg-color-in) !important;
}

[data-bs-theme=dark] .dashboard-nav .nav-link:hover {
    background-color: var(--bs-secondary-bg-subtle) !important;
}

[data-bs-theme=dark] .dashboard-nav .nav-link.active {
    background-color: var(--bs-primary) !important;
    color: #fff !important;
}

/* Filter Components Dark Theme */
[data-bs-theme=dark] .dashboard-filter {
    background-color: var(--bs-body-bg-in) !important;
    border-color: rgba(var(--bs-secondary-bg-subtle-color), var(--bs-text-opacity)) !important;
}

[data-bs-theme=dark] .dashboard-filter .filter-item {
    background-color: var(--bs-body-bg-in) !important;
    border-color: rgba(var(--bs-secondary-bg-subtle-color), var(--bs-text-opacity)) !important;
    color: var(--bs-body-bg-color-in) !important;
}

[data-bs-theme=dark] .dashboard-filter .filter-item:hover {
    background-color: var(--bs-secondary-bg-subtle) !important;
}

/* Status Indicators Dark Theme */
[data-bs-theme=dark] .status-indicator {
    background-color: var(--bs-secondary-bg-subtle) !important;
    color: var(--bs-body-bg-color-in) !important;
}

[data-bs-theme=dark] .status-indicator.success {
    background-color: rgba(16, 185, 129, 0.2) !important;
    color: #10b981 !important;
}

[data-bs-theme=dark] .status-indicator.warning {
    background-color: rgba(245, 158, 11, 0.2) !important;
    color: #f59e0b !important;
}

[data-bs-theme=dark] .status-indicator.danger {
    background-color: rgba(239, 68, 68, 0.2) !important;
    color: #ef4444 !important;
}

[data-bs-theme=dark] .status-indicator.info {
    background-color: rgba(59, 130, 246, 0.2) !important;
    color: #3b82f6 !important;
}

/* Progress Bars Dark Theme */
[data-bs-theme=dark] .progress-bar {
    background-color: var(--bs-secondary-bg-subtle) !important;
}

[data-bs-theme=dark] .progress-bar .progress-fill {
    background-color: var(--bs-primary) !important;
}

/* Tooltip Dark Theme */
[data-bs-theme=dark] .tooltip {
    background-color: var(--bs-body-bg-in) !important;
    border-color: rgba(var(--bs-secondary-bg-subtle-color), var(--bs-text-opacity)) !important;
    color: var(--bs-body-bg-color-in) !important;
}

/* Modal Dark Theme */
[data-bs-theme=dark] .dashboard-modal .modal-content {
    background-color: var(--bs-body-bg-in) !important;
    border-color: rgba(var(--bs-secondary-bg-subtle-color), var(--bs-text-opacity)) !important;
}

[data-bs-theme=dark] .dashboard-modal .modal-header {
    background-color: var(--bs-body-bg-in) !important;
    border-bottom-color: rgba(var(--bs-secondary-bg-subtle-color), var(--bs-text-opacity)) !important;
}

[data-bs-theme=dark] .dashboard-modal .modal-title {
    color: var(--bs-body-bg-color-in) !important;
}

[data-bs-theme=dark] .dashboard-modal .modal-body {
    background-color: var(--bs-body-bg-in) !important;
    color: var(--bs-body-bg-color-in) !important;
}

[data-bs-theme=dark] .dashboard-modal .modal-footer {
    background-color: var(--bs-body-bg-in) !important;
    border-top-color: rgba(var(--bs-secondary-bg-subtle-color), var(--bs-text-opacity)) !important;
}

/* Alert Components Dark Theme */
[data-bs-theme=dark] .dashboard-alert {
    background-color: var(--bs-body-bg-in) !important;
    border-color: rgba(var(--bs-secondary-bg-subtle-color), var(--bs-text-opacity)) !important;
    color: var(--bs-body-bg-color-in) !important;
}

[data-bs-theme=dark] .dashboard-alert.success {
    background-color: rgba(16, 185, 129, 0.1) !important;
    border-color: rgba(16, 185, 129, 0.3) !important;
    color: #10b981 !important;
}

[data-bs-theme=dark] .dashboard-alert.warning {
    background-color: rgba(245, 158, 11, 0.1) !important;
    border-color: rgba(245, 158, 11, 0.3) !important;
    color: #f59e0b !important;
}

[data-bs-theme=dark] .dashboard-alert.danger {
    background-color: rgba(239, 68, 68, 0.1) !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
    color: #ef4444 !important;
}

[data-bs-theme=dark] .dashboard-alert.info {
    background-color: rgba(59, 130, 246, 0.1) !important;
    border-color: rgba(59, 130, 246, 0.3) !important;
    color: #3b82f6 !important;
}

/* Loading States Dark Theme */
[data-bs-theme=dark] .loading-spinner {
    border-color: var(--bs-secondary-bg-subtle) !important;
    border-top-color: var(--bs-primary) !important;
}

[data-bs-theme=dark] .loading-skeleton {
    background-color: var(--bs-secondary-bg-subtle) !important;
}

/* Responsive Dark Theme Adjustments */
@media (max-width: 768px) {
    [data-bs-theme=dark] .dashboard-grid {
        background-color: var(--bs-body-bg-in) !important;
    }
    
    [data-bs-theme=dark] .dashboard-nav {
        background-color: var(--bs-body-bg-in) !important;
    }
    
    [data-bs-theme=dark] .dashboard-filter {
        background-color: var(--bs-body-bg-in) !important;
    }
}

/* ---- complete quick dashboard dark theme end --*/

/* ---- quick-dashboard class dark theme start --*/
[data-bs-theme=dark] .quick-dashboard {
    background-color: var(--bs-body-bg-in) !important;
    color: var(--bs-body-bg-color-in) !important;
}

[data-bs-theme=dark] .quick-dashboard .dashboard-header {
    background-color: var(--bs-body-bg-in) !important;
    border-bottom-color: rgba(var(--bs-secondary-bg-subtle-color), var(--bs-text-opacity)) !important;
}

[data-bs-theme=dark] .quick-dashboard .dashboard-title {
    color: var(--bs-body-bg-color-in) !important;
}

[data-bs-theme=dark] .quick-dashboard .dashboard-subtitle {
    color: var(--bs-body-bg-color-in) !important;
    opacity: 0.8 !important;
}

[data-bs-theme=dark] .quick-dashboard .dashboard-stats {
    background-color: var(--bs-body-bg-in) !important;
}

[data-bs-theme=dark] .quick-dashboard .stat-card {
    background-color: var(--bs-body-bg-in) !important;
    border-color: rgba(var(--bs-secondary-bg-subtle-color), var(--bs-text-opacity)) !important;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2) !important;
}

[data-bs-theme=dark] .quick-dashboard .stat-card:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2) !important;
}

[data-bs-theme=dark] .quick-dashboard .stat-value {
    color: var(--bs-body-bg-color-in) !important;
}

[data-bs-theme=dark] .quick-dashboard .stat-label {
    color: var(--bs-body-bg-color-in) !important;
    opacity: 0.7 !important;
}

[data-bs-theme=dark] .quick-dashboard .stat-icon {
    filter: brightness(0) saturate(100%) invert(61%) sepia(31%) saturate(328%) hue-rotate(177deg) brightness(87%) contrast(84%) !important;
}

[data-bs-theme=dark] .quick-dashboard .dashboard-content {
    background-color: var(--bs-body-bg-in) !important;
}

[data-bs-theme=dark] .quick-dashboard .content-card {
    background-color: var(--bs-body-bg-in) !important;
    border-color: rgba(var(--bs-secondary-bg-subtle-color), var(--bs-text-opacity)) !important;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2) !important;
}

[data-bs-theme=dark] .quick-dashboard .content-card:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2) !important;
}

[data-bs-theme=dark] .quick-dashboard .card-header {
    background-color: var(--bs-body-bg-in) !important;
    border-bottom-color: rgba(var(--bs-secondary-bg-subtle-color), var(--bs-text-opacity)) !important;
}

[data-bs-theme=dark] .quick-dashboard .card-title {
    color: var(--bs-body-bg-color-in) !important;
}

[data-bs-theme=dark] .quick-dashboard .card-subtitle {
    color: var(--bs-body-bg-color-in) !important;
    opacity: 0.7 !important;
}

[data-bs-theme=dark] .quick-dashboard .card-body {
    background-color: var(--bs-body-bg-in) !important;
    color: var(--bs-body-bg-color-in) !important;
}

[data-bs-theme=dark] .quick-dashboard .card-footer {
    background-color: var(--bs-body-bg-in) !important;
    border-top-color: rgba(var(--bs-secondary-bg-subtle-color), var(--bs-text-opacity)) !important;
}

[data-bs-theme=dark] .quick-dashboard .dashboard-table {
    background-color: var(--bs-body-bg-in) !important;
}

[data-bs-theme=dark] .quick-dashboard .dashboard-table th {
    background-color: var(--bs-secondary-bg-subtle) !important;
    color: var(--bs-body-bg-color-in) !important;
    border-color: rgba(var(--bs-secondary-bg-subtle-color), var(--bs-text-opacity)) !important;
}

[data-bs-theme=dark] .quick-dashboard .dashboard-table td {
    background-color: var(--bs-body-bg-in) !important;
    color: var(--bs-body-bg-color-in) !important;
    border-color: rgba(var(--bs-secondary-bg-subtle-color), var(--bs-text-opacity)) !important;
}

[data-bs-theme=dark] .quick-dashboard .dashboard-table tr:hover {
    background-color: var(--bs-secondary-bg-subtle) !important;
}

[data-bs-theme=dark] .quick-dashboard .dashboard-chart {
    background-color: var(--bs-body-bg-in) !important;
    border-color: rgba(var(--bs-secondary-bg-subtle-color), var(--bs-text-opacity)) !important;
}

[data-bs-theme=dark] .quick-dashboard .chart-title {
    color: var(--bs-body-bg-color-in) !important;
}

[data-bs-theme=dark] .quick-dashboard .chart-subtitle {
    color: var(--bs-body-bg-color-in) !important;
    opacity: 0.7 !important;
}

[data-bs-theme=dark] .quick-dashboard .dashboard-form {
    background-color: var(--bs-body-bg-in) !important;
}

[data-bs-theme=dark] .quick-dashboard .form-control {
    background-color: var(--bs-body-bg-in) !important;
    border-color: rgba(var(--bs-secondary-bg-subtle-color), var(--bs-text-opacity)) !important;
    color: var(--bs-body-bg-color-in) !important;
}

[data-bs-theme=dark] .quick-dashboard .form-control:focus {
    border-color: var(--bs-primary) !important;
    box-shadow: 0 0 0 0.2rem rgba(99, 102, 241, 0.25) !important;
}

[data-bs-theme=dark] .quick-dashboard .form-label {
    color: var(--bs-body-bg-color-in) !important;
}

[data-bs-theme=dark] .quick-dashboard .form-select {
    background-color: var(--bs-body-bg-in) !important;
    border-color: rgba(var(--bs-secondary-bg-subtle-color), var(--bs-text-opacity)) !important;
    color: var(--bs-body-bg-color-in) !important;
}

[data-bs-theme=dark] .quick-dashboard .btn {
    /* background-color: var(--bs-primary) !important; */
    border-color: var(--bs-primary) !important;
    color: #fff !important;
}
[data-bs-theme=dark] .quick-dashboard .chart-period-buttons .btn-sm.active{
    background-color: var(--bs-primary) !important;
    color: #fff !important;
}
[data-bs-theme=dark] #view-all-appointments {
color: var(--bs-primary) !important;
border:none !important;
}
/* [data-bs-theme=dark] .quick-dashboard .btn:hover {
    background-color: #4f46e5 !important;
    border-color: #4f46e5 !important;
} */

[data-bs-theme=dark] .quick-dashboard .btn-outline {
    background-color: transparent !important;
    border-color: var(--bs-primary) !important;
    color: var(--bs-primary) !important;
}

[data-bs-theme=dark] .quick-dashboard .btn-outline:hover {
    background-color: var(--bs-primary) !important;
    color: #fff !important;
}

[data-bs-theme=dark] .quick-dashboard .btn-secondary {
    background-color: var(--bs-secondary-bg-subtle) !important;
    border-color: rgba(var(--bs-secondary-bg-subtle-color), var(--bs-text-opacity)) !important;
    color: var(--bs-body-bg-color-in) !important;
}

[data-bs-theme=dark] .quick-dashboard .btn-secondary:hover {
    background-color: rgba(var(--bs-secondary-bg-subtle-color), 0.3) !important;
}

[data-bs-theme=dark] .quick-dashboard .dashboard-nav {
    background-color: var(--bs-body-bg-in) !important;
    border-color: rgba(var(--bs-secondary-bg-subtle-color), var(--bs-text-opacity)) !important;
}

[data-bs-theme=dark] .quick-dashboard .nav-link {
    color: var(--bs-body-bg-color-in) !important;
}

[data-bs-theme=dark] .quick-dashboard .nav-link:hover {
    background-color: var(--bs-secondary-bg-subtle) !important;
}

[data-bs-theme=dark] .quick-dashboard .nav-link.active {
    background-color: var(--bs-primary) !important;
    color: #fff !important;
}

[data-bs-theme=dark] .quick-dashboard .dashboard-filter {
    background-color: var(--bs-body-bg-in) !important;
    border-color: rgba(var(--bs-secondary-bg-subtle-color), var(--bs-text-opacity)) !important;
}

[data-bs-theme=dark] .quick-dashboard .filter-item {
    background-color: var(--bs-body-bg-in) !important;
    border-color: rgba(var(--bs-secondary-bg-subtle-color), var(--bs-text-opacity)) !important;
    color: var(--bs-body-bg-color-in) !important;
}

[data-bs-theme=dark] .quick-dashboard .filter-item:hover {
    background-color: var(--bs-secondary-bg-subtle) !important;
}

[data-bs-theme=dark] .quick-dashboard .badge {
    background-color: var(--bs-secondary-bg-subtle) !important;
    color: var(--bs-body-bg-color-in) !important;
}

[data-bs-theme=dark] .quick-dashboard .badge-success {
    background-color: rgba(16, 185, 129, 0.2) !important;
    color: #10b981 !important;
}

[data-bs-theme=dark] .quick-dashboard .badge-warning {
    background-color: rgba(245, 158, 11, 0.2) !important;
    color: #f59e0b !important;
}

[data-bs-theme=dark] .quick-dashboard .badge-danger {
    background-color: rgba(239, 68, 68, 0.2) !important;
    color: #ef4444 !important;
}

[data-bs-theme=dark] .quick-dashboard .badge-info {
    background-color: rgba(59, 130, 246, 0.2) !important;
    color: #3b82f6 !important;
}

[data-bs-theme=dark] .quick-dashboard .progress {
    background-color: var(--bs-secondary-bg-subtle) !important;
}

[data-bs-theme=dark] .quick-dashboard .progress-bar {
    background-color: var(--bs-primary) !important;
}

[data-bs-theme=dark] .quick-dashboard .alert {
    background-color: var(--bs-body-bg-in) !important;
    border-color: rgba(var(--bs-secondary-bg-subtle-color), var(--bs-text-opacity)) !important;
    color: var(--bs-body-bg-color-in) !important;
}

[data-bs-theme=dark] .quick-dashboard .alert-success {
    background-color: rgba(16, 185, 129, 0.1) !important;
    border-color: rgba(16, 185, 129, 0.3) !important;
    color: #10b981 !important;
}

[data-bs-theme=dark] .quick-dashboard .alert-warning {
    background-color: rgba(245, 158, 11, 0.1) !important;
    border-color: rgba(245, 158, 11, 0.3) !important;
    color: #f59e0b !important;
}

[data-bs-theme=dark] .quick-dashboard .alert-danger {
    background-color: rgba(239, 68, 68, 0.1) !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
    color: #ef4444 !important;
}

[data-bs-theme=dark] .quick-dashboard .alert-info {
    background-color: rgba(59, 130, 246, 0.1) !important;
    border-color: rgba(59, 130, 246, 0.3) !important;
    color: #3b82f6 !important;
}

[data-bs-theme=dark] .quick-dashboard .modal-content {
    background-color: var(--bs-body-bg-in) !important;
    border-color: rgba(var(--bs-secondary-bg-subtle-color), var(--bs-text-opacity)) !important;
}

[data-bs-theme=dark] .quick-dashboard .modal-header {
    background-color: var(--bs-body-bg-in) !important;
    border-bottom-color: rgba(var(--bs-secondary-bg-subtle-color), var(--bs-text-opacity)) !important;
}

[data-bs-theme=dark] .quick-dashboard .modal-title {
    color: var(--bs-body-bg-color-in) !important;
}

[data-bs-theme=dark] .quick-dashboard .modal-body {
    background-color: var(--bs-body-bg-in) !important;
    color: var(--bs-body-bg-color-in) !important;
}

[data-bs-theme=dark] .quick-dashboard .modal-footer {
    background-color: var(--bs-body-bg-in) !important;
    border-top-color: rgba(var(--bs-secondary-bg-subtle-color), var(--bs-text-opacity)) !important;
}

[data-bs-theme=dark] .quick-dashboard .tooltip {
    background-color: var(--bs-body-bg-in) !important;
    border-color: rgba(var(--bs-secondary-bg-subtle-color), var(--bs-text-opacity)) !important;
    color: var(--bs-body-bg-color-in) !important;
}

[data-bs-theme=dark] .quick-dashboard .loading-spinner {
    border-color: var(--bs-secondary-bg-subtle) !important;
    border-top-color: var(--bs-primary) !important;
}

[data-bs-theme=dark] .quick-dashboard .loading-skeleton {
    background-color: var(--bs-secondary-bg-subtle) !important;
}

[data-bs-theme=dark] .quick-dashboard .dropdown-menu {
    background-color: var(--bs-body-bg-in) !important;
    border-color: rgba(var(--bs-secondary-bg-subtle-color), var(--bs-text-opacity)) !important;
}

[data-bs-theme=dark] .quick-dashboard .dropdown-item {
    color: var(--bs-body-bg-color-in) !important;
}

[data-bs-theme=dark] .quick-dashboard .dropdown-item:hover {
    background-color: var(--bs-secondary-bg-subtle) !important;
}

[data-bs-theme=dark] .quick-dashboard .pagination {
    background-color: var(--bs-body-bg-in) !important;
}

[data-bs-theme=dark] .quick-dashboard .page-link {
    background-color: var(--bs-body-bg-in) !important;
    border-color: rgba(var(--bs-secondary-bg-subtle-color), var(--bs-text-opacity)) !important;
    color: var(--bs-body-bg-color-in) !important;
}

[data-bs-theme=dark] .quick-dashboard .page-link:hover {
    background-color: var(--bs-secondary-bg-subtle) !important;
}

[data-bs-theme=dark] .quick-dashboard .page-item.active .page-link {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    color: #fff !important;
}

[data-bs-theme=dark] .quick-dashboard .breadcrumb {
    background-color: var(--bs-body-bg-in) !important;
}

[data-bs-theme=dark] .quick-dashboard .breadcrumb-item {
    color: var(--bs-body-bg-color-in) !important;
}

[data-bs-theme=dark] .quick-dashboard .breadcrumb-item.active {
    color: var(--bs-body-bg-color-in) !important;
    opacity: 0.7 !important;
}

[data-bs-theme=dark] .quick-dashboard .breadcrumb-item + .breadcrumb-item::before {
    color: var(--bs-body-bg-color-in) !important;
    opacity: 0.5 !important;
}

/* Background white override for quick-dashboard */
[data-bs-theme=dark] .quick-dashboard .bg-white {
    background-color: var(--bs-body-bg-in) !important;
    border: 1px solid rgba(var(--bs-secondary-bg-subtle-color), var(--bs-text-opacity)) !important;
    box-shadow: 0 0 transparent, 0 0 transparent, 0 1px 2px 0 rgba(0, 0, 0, 0.2) !important;
}

[data-bs-theme=dark] .quick-dashboard .bg-white {
    color: var(--bs-body-bg-color-in) !important;
}
[data-bs-theme=dark] .quick-dashboard .darkBox{
        background-color: var(--bs-body-bg-in) !important;
    color: var(--bs-body-bg-color-in) !important;  
}
[data-bs-theme=dark] .badge-img-name p, [data-bs-theme=dark] .badge-img-name h4{
    color: var(--bs-body-bg-color-in) !important;
}
[data-bs-theme=dark] .appointment-table td .text-dark{
    color: var(--bs-body-bg-color-in) !important;
}


[data-bs-theme=dark] .quick-dashboard .bg-white h1,
[data-bs-theme=dark] .quick-dashboard .bg-white h2,
[data-bs-theme=dark] .quick-dashboard .bg-white h3,
[data-bs-theme=dark] .quick-dashboard .bg-white h4,
[data-bs-theme=dark] .quick-dashboard .bg-white h5,
[data-bs-theme=dark] .quick-dashboard .bg-white h6 {
    color: var(--bs-body-bg-color-in) !important;
}

[data-bs-theme=dark] .quick-dashboard .bg-white p {
    color: var(--bs-body-bg-color-in) !important;
}

[data-bs-theme=dark] .quick-dashboard .bg-white span {
    color: var(--bs-body-bg-color-in) !important;
}

[data-bs-theme=dark] .quick-dashboard .bg-white div {
    color: var(--bs-body-bg-color-in) !important;
}

[data-bs-theme=dark] .quick-dashboard .bg-white .text-muted {
    color: var(--bs-body-bg-color-in) !important;
    opacity: 0.7 !important;
}

[data-bs-theme=dark] .quick-dashboard .bg-white .text-secondary {
    color: var(--bs-body-bg-color-in) !important;
    opacity: 0.8 !important;
}

[data-bs-theme=dark] .quick-dashboard .bg-white .text-dark {
    color: var(--bs-body-bg-color-in) !important;
}

[data-bs-theme=dark] .quick-dashboard .bg-white .text-black {
    color: var(--bs-body-bg-color-in) !important;
}

[data-bs-theme=dark] .quick-dashboard .bg-white .border {
    border-color: rgba(var(--bs-secondary-bg-subtle-color), var(--bs-text-opacity)) !important;
}

[data-bs-theme=dark] .quick-dashboard .bg-white .border-top {
    border-top-color: rgba(var(--bs-secondary-bg-subtle-color), var(--bs-text-opacity)) !important;
}

[data-bs-theme=dark] .quick-dashboard .bg-white .border-bottom {
    border-bottom-color: rgba(var(--bs-secondary-bg-subtle-color), var(--bs-text-opacity)) !important;
}

[data-bs-theme=dark] .quick-dashboard .bg-white .border-left {
    border-left-color: rgba(var(--bs-secondary-bg-subtle-color), var(--bs-text-opacity)) !important;
}

[data-bs-theme=dark] .quick-dashboard .bg-white .border-right {
    border-right-color: rgba(var(--bs-secondary-bg-subtle-color), var(--bs-text-opacity)) !important;
}

[data-bs-theme=dark] .quick-dashboard .bg-white .shadow {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2) !important;
}

[data-bs-theme=dark] .quick-dashboard .bg-white .shadow-sm {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2) !important;
}

[data-bs-theme=dark] .quick-dashboard .bg-white .shadow-md {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2) !important;
}

[data-bs-theme=dark] .quick-dashboard .bg-white .shadow-lg {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2) !important;
}

/* Responsive dark theme for quick-dashboard */
@media (max-width: 768px) {
    [data-bs-theme=dark] .quick-dashboard .dashboard-header {
        background-color: var(--bs-body-bg-in) !important;
    }
    
    [data-bs-theme=dark] .quick-dashboard .dashboard-stats {
        background-color: var(--bs-body-bg-in) !important;
    }
    
    [data-bs-theme=dark] .quick-dashboard .dashboard-content {
        background-color: var(--bs-body-bg-in) !important;
    }
    
    [data-bs-theme=dark] .quick-dashboard .dashboard-nav {
        background-color: var(--bs-body-bg-in) !important;
    }
    
    [data-bs-theme=dark] .quick-dashboard .dashboard-filter {
        background-color: var(--bs-body-bg-in) !important;
    }
    
    [data-bs-theme=dark] .quick-dashboard .bg-white {
        background-color: var(--bs-body-bg-in) !important;
    }
}

/* ---- quick-dashboard class dark theme end --*/

/* ---- body-wrapper dark theme start --*/
[data-bs-theme=dark] .body-wrapper, [data-bs-theme=dark] .page-wrapper, [data-bs-theme=dark] .body-wrapper main, [data-bs-theme=dark] .quick-dashboard .main-content-quick-dashboard {
    background-color: transparent !important;
    color: var(--bs-body-bg-color-in) !important;
}

/* ---- body-wrapper dark theme end --*/

/* ---- new design dark theme start --*/
[data-bs-theme=dark] #appointment-search-input {
    background-color: var(--bs-body-bg-in) !important;
    border-color: rgba(var(--bs-secondary-bg-subtle-color), var(--bs-text-opacity)) !important;
    color: var(--bs-body-bg-color-in) !important;
}

[data-bs-theme=dark] .tabbed-nav-pills-section .nav-item .nav-link {
    background-color: var(--bs-secondary-bg-subtle) !important;
    color: var(--bs-body-bg-color-in) !important;
    border-color: rgba(var(--bs-secondary-bg-subtle-color), var(--bs-text-opacity)) !important;
}

[data-bs-theme=dark] .tabbed-nav-pills-section .nav-item .nav-link.active {
    background-color: var(--bs-primary) !important;
    color: #fff !important;
}

[data-bs-theme=dark] .tabbed-nav-pills-section .nav-item .nav-link em {
    background: #9F0015 !important;
    color: #fff !important;
}

/* Appointment cards dark theme */
[data-bs-theme=dark] .appointment-cards {
    background-color: var(--bs-body-bg-in) !important;
    border-color: rgba(var(--bs-secondary-bg-subtle-color), var(--bs-text-opacity)) !important;
    box-shadow: 0 0 transparent, 0 0 transparent, 0 1px 2px 0 rgba(0, 0, 0, 0.2) !important;
}

[data-bs-theme=dark] .appointment-cards .card-body {
    background-color: var(--bs-body-bg-in) !important;
}

[data-bs-theme=dark] .appointment-cards .customer-name {
    color: var(--bs-body-bg-color-in) !important;
}

[data-bs-theme=dark] .appointment-cards .customer-contact {
    color: var(--bs-body-bg-color-in) !important;
    opacity: 0.8 !important;
}

[data-bs-theme=dark] .appointment-cards .card-service {
    color: var(--bs-body-bg-color-in) !important;
}

[data-bs-theme=dark] .appointment-cards .small {
    color: var(--bs-body-bg-color-in) !important;
}

[data-bs-theme=dark] .appointment-cards .text-muted {
    color: var(--bs-body-bg-color-in) !important;
    opacity: 0.7 !important;
}

[data-bs-theme=dark] .appointment-cards .fw-medium {
    color: var(--bs-body-bg-color-in) !important;
}

/* Badge dark theme variants */
[data-bs-theme=dark] .bdg-completed,
[data-bs-theme=dark] .bdg-active {
    background-color: rgba(34, 197, 94, 0.2) !important;
    color: #4ade80 !important;
}

[data-bs-theme=dark] .bdg-voided,
[data-bs-theme=dark] .bdg-expired {
    background-color: rgba(245, 158, 11, 0.2) !important;
    color: #facc15 !important;
}

[data-bs-theme=dark] .bdg-open {
    background-color: rgba(37, 99, 235, 0.2) !important;
    color: #4f9eff !important;
}

[data-bs-theme=dark] .bdg-failed,
[data-bs-theme=dark] .bdg-inactive,
[data-bs-theme=dark] .bdg-cancelled {
    background-color: rgba(239, 68, 68, 0.2) !important;
    color: #f87171 !important;
}

[data-bs-theme=dark] .bdg-refunded,
[data-bs-theme=dark] .bdg-freeze {
    background-color: var(--bs-secondary-bg-subtle) !important;
    color: var(--bs-body-bg-color-in) !important;
}

[data-bs-theme=dark] .bdg-placed {
    background-color: rgba(147, 51, 234, 0.2) !important;
    color: #a855f7 !important;
}

/* Export icon dark theme */
[data-bs-theme=dark] .icon_export {
    background: url('data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjN2M4ZmFjIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMiIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTggM3YySDV2MTRoMTN2MmgtMTRjLTEuMSAwLTItLjktMi0yVjRjMC0xLjEuOS0yIDItMmgxMnpNMTggMTR2LTRoLTN2LTRsLTUgNSA1IDV2LTRoM3oiLz48L3N2Zz4=') no-repeat !important;
    background-size: 15px !important;
    background-position: 10px center !important;
}

/* DataTable search input dark theme */
[data-bs-theme=dark] .dataTables_filter input[type="search"] {
    background-color: var(--bs-body-bg-in) !important;
    border-color: rgba(var(--bs-secondary-bg-subtle-color), var(--bs-text-opacity)) !important;
    color: var(--bs-body-bg-color-in) !important;
}

[data-bs-theme=dark] .dataTables_filter input[type="search"]::placeholder {
    color: var(--bs-body-bg-color-in) !important;
    opacity: 0.6 !important;
}

/* Responsive dark theme adjustments */
@media(max-width:767px) {
    [data-bs-theme=dark] .copyright span {
        color: var(--bs-body-bg-color-in) !important;
    }
    
    [data-bs-theme=dark] .dashboard-title-nav .btn-primary {
        background-color: var(--bs-primary) !important;
        border-color: var(--bs-primary) !important;
        color: #fff !important;
    }
    
    [data-bs-theme=dark] .breadcrumb-top .card-body {
        background-color: var(--bs-body-bg-in) !important;
        border-color: rgba(var(--bs-secondary-bg-subtle-color), var(--bs-text-opacity)) !important;
    }
    
    [data-bs-theme=dark] .addonService .inline-input-field {
        background-color: var(--bs-body-bg-in) !important;
        border-color: rgba(var(--bs-secondary-bg-subtle-color), var(--bs-text-opacity)) !important;
        color: var(--bs-body-bg-color-in) !important;
    }
}

/* ---- new design dark theme end --*/
/*--new design css start--*/
#appointment-search-input {
    padding-left: 2.5rem !important;
}
.tabbed-nav-pills-section li a, .tab-menu-top-pills li .nav-link{
    position: relative;
}
.tabbed-nav-pills-section .nav-item .nav-link em{
    width: 15px;
    height: 15px;
    background: #9F0015;
    font-size: 10px;
    color: #fff;
    font-weight: 700;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    position: absolute;
    right: 0px;
    top: -6px;
    font-style: normal;
}
.tabbed-nav-pills-section .nav-item .nav-link{
    font-size: 0.875rem;
}
.tabbed-nav-pills-section .nav-item .nav-link{
    background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}
.tabbed-nav-pills-section .nav-item .nav-link.active{
    background-color: var(--bs-nav-pills-link-active-bg);
    color: #fff;
}
  /* Custom styles for request cards */
  .appointment-cards {
    transition: all 0.3s ease;
    border: 1px solid #e9ecef;
}



.appointment-cards .card-body {
    padding: 1.5rem;
}

.appointment-cards .customer-name {
    color: #212529;
    font-weight: 600;
}

.appointment-cards .customer-contact {
    color: #6c757d;
    font-size: 0.875rem;
}

.appointment-cards .badge {
    font-size: 0.75rem;
    padding: 0.375rem 0.75rem;
}
.appointment-cards .card-service {
    color: #111827 !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
}
/* .appointment-cards .card-date {
    color: #111827 !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
} */
.appointment-cards .small {
    font-size: 0.875rem !important;
}
.appointment-cards .btn-sm {
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
}

.appointment-cards .text-muted {
    color: #374151 !important;
}

.appointment-cards .fw-medium {
    font-weight: 500 !important;
}

/* Confirm checkbox button styling */
.appointment-cards .confirm-checkbox-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.appointment-cards .confirm-checkbox-btn .form-check-input {
    margin: 0;
    cursor: pointer;
    width: 1rem;
    height: 1rem;
}

.appointment-cards .confirm-checkbox-btn span {
    font-size: 0.875rem;
    font-weight: 500;
}

/* Delete checkbox styling */
.appointment-cards .form-check {
    margin: 0;
    display: flex;
    align-items: center;
}

.appointment-cards .form-check-input.rowCheckbox {
    margin: 0;
    cursor: pointer;
    width: 1rem;
    height: 1rem;
}

.appointment-cards .form-check-label {
    margin: 0 0 0 0.5rem;
    white-space: nowrap;
    font-size: 0.875rem;
    color: #6c757d;
}

/* Select All checkbox styling */
#requests-cards-container .selectAll {
    margin: 0;
    cursor: pointer;
    width: 1.125rem;
    height: 1.125rem;
}

#requests-cards-container .selectAll + .form-check-label {
    margin-left: 0.5rem;
    font-weight: 600;
    color: #495057;
}
/*--new design css end--*/
.body-wrapper.active{
        padding-top: calc(110px + 15px) !important;
}
html[data-layout=horizontal] .app-header .navbar .navbar-collapse{
            padding: 7px 0;
}
.h-40{height: 40px;}
.dataTables_wrapper .dataTable-bottom.pagination-main{
    justify-content: space-between !important;
}
.dataTables_wrapper .dataTable-bottom.pagination-main .paging_simple_numbers{flex: 1;}
.dataTables_wrapper .dataTable-bottom.pagination-main .paging_simple_numbers ul.pagination{justify-content: end !important;}

@media(min-width:1201px){
  .preview-header{min-height: 209px;padding: 10px;}
}
@media(max-width:1200px){
  .preview-content {min-height: calc(100vh - 128px);}
}

@media (min-width: 992px) {
  .col-lg-20 { flex: 0 0 auto !important;  width: 20% !important;  }
}

@media (max-width:991px) {
#customdate{margin-bottom:10px;}
  .mob-menu { position: fixed; z-index: 1045; flex-direction: column; max-width: 100%; color: var(--bs-offcanvas-color); visibility: hidden;
/*        background-color: #fff;*/
      background: var(--bs-body-bg);
      background-clip: padding-box; outline: 0; box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); transition: transform 0.3s ease-in-out; top: 0; right: 0; width: 330px; border-left: 0 solid rgba(0, 0, 0, 0.175); transform: translateX(100%); height: 100%; padding: 15px; overflow: auto; }
  .mob-menu.show { transform: none; visibility: visible;     }
  .mob-menu .quick-links { display: block;    }
  .mob-menu .quick-links { margin-top: 20px;  }
  .mob-menu .quick-links li {  display: block; width: 100%; margin: 15px 0;   }
  .mob-menu .quick-links li a { height: auto !important; line-height: 1.5 !important;     }
  ul.billing-info-list li{width: 100%;}
  .topbar .navbar .navbar-nav.quick-links .nav-item .nav-link{font-size: 14px;}
  .topbar .navbar .navbar-nav .nav-item .nav-link{height: 40px;}
   .sidebartoggler > i.ti.ti-x{color: #fff;}
}

@media(max-width:767px){
    .dataTables_wrapper .dataTable-bottom.pagination-main .paging_simple_numbers{flex: auto;}
.dataTables_wrapper .dataTable-bottom.pagination-main .paging_simple_numbers ul.pagination{justify-content: start !important;}


  .dataTable-bottom{ margin-bottom: 10px;}
  #customdate{margin-bottom: 10px;}
  .previewHeader { padding: 15px 5px; }
  .previewHeaderLeft .backBtn { margin-right: 5px; }
  .BusinessLogo span { font-size: 12px; display: none; }
  .myHoursTable { padding: 0 0px 28px; }
  .myHoursSection { padding: 19px 12px 0; }
  .bannerGird .bannerImg { min-width: 100px; }

  .promo-events-view-head {padding: 74px 15px 20px; color:#fff; background: rgba(37, 99, 235, 1);
    background: -moz-linear-gradient(left, rgba(37, 99, 235, 1) 0%, rgba(46, 149, 179, 1) 62%, rgba(0, 163, 147, 1) 100%);
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(37, 99, 235, 1)), color-stop(62%, rgba(46, 149, 179, 1)), color-stop(100%, rgba(0, 163, 147, 1)));
    background: -webkit-linear-gradient(left, rgba(37, 99, 235, 1) 0%, rgba(46, 149, 179, 1) 62%, rgba(0, 163, 147, 1) 100%);
    background: -o-linear-gradient(left, rgba(37, 99, 235, 1) 0%, rgba(46, 149, 179, 1) 62%, rgba(0, 163, 147, 1) 100%);
    background: -ms-linear-gradient(left, rgba(37, 99, 235, 1) 0%, rgba(46, 149, 179, 1) 62%, rgba(0, 163, 147, 1) 100%);
    background: linear-gradient(to right, rgba(37, 99, 235, 1) 0%, rgba(46, 149, 179, 1) 62%, rgba(0, 163, 147, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2563eb', endColorstr='#00a393', GradientType=1);}
  .promo-events-view-logo span {color: #fff; font-size: 18px; line-height: 25px; text-transform: uppercase;}
  .promo-events-view-logo span:after {width: 31px; height: 2px; background-color: #fff;display: block; margin:10px 0 0; content: ''; }
  .promo-events-view-banner h1 {color: #2C2C2C; font-size: 24px; line-height: 32px;}
  .promo-events-view-banner p {color: #2C2C2C; }
  .promo-event-timing, .promo-event-description-in{margin: 0 auto;}
  .promo-events-view-banner img {margin: 0 auto;}
  .promo-events-view-banner { text-align: center; background: #fff !important; }
  .promo-events-view-logo   { text-align: left; font-size: 18px; }
  .promo-events-view-logo img  { display: none; }
  .promo-event-timing {max-width: 430px;}
  .promo-events-view-banner-container{border-bottom:1px solid #707070;}
  .promo-event-description {padding-left: 0.5rem !important; padding-right: 0.5rem !important; padding-top: 0;
    margin: 0;}
  .promo-event-description:after {width: calc(100% - 1.5rem); margin: 0 auto; display: block; border-bottom: 1px solid #707070; content: ''; padding: 2.5rem 0 0;}
  .promo-events-view {background: #fff;}
  .promo-event-timing .btn-primary {border-radius: 0 !important;}
  /* .promo-event-container {padding: 0;} */
  .promo-event-description p {font-size: 14px; line-height: 25px;}
  .promo-event-timing p {font-size: 14px; line-height: 25px;}
  .promo-events-view-main { min-height: calc(100vh - 156px);  }

  .dataTable-top, .dataTable-bottom  {text-align: center; display: flex; flex-wrap: wrap; gap: .5rem !important; justify-content: center !important;}
   .dataTables_filter  {text-align: center; display: flex; flex-wrap: wrap; gap: .5rem !important; justify-content: center !important;}
   .modulesBody .form-check{margin-bottom: 10px;}
   .topbar .navbar .navbar-nav .nav-item .nav-link i{margin-right: 0 !important;}
   .page-wrapper .body-wrapper>.container-fluid{ padding: 12px 12px;}
}
@media(max-width:575px){
  .preview-form-grid form .preview-form-inline{display: block;}
  .preview-btn{width: 100%;}
  .generate-modal-cont .push-analytics-tabs ul {grid-template-columns: 1fr;}
  .table>:not(caption)>*>* {
    border-color: #c9ddee;
}
.app-cancel{margin-top: 10px !important;}
}
@media(min-width:1080px){
.addonService .col-md-3{width: 24% !important;}
.addonService .col-md-9{width: 76% !important; }
}
@media(max-width:767px){

.copyright span{display: block;  margin: 0 !important;}
.dashboard-title-nav .btn-primary{margin-bottom: 5px;}

/* --new -- */
.breadcrumb-top .card-body .col-9{display:block;}
.addonService .inline-input-field{margin-bottom: 5px;}
.addonService{    padding-right: 40px;}
.addBtn{    right: 12px; top: 21px;}
}


/*** to prevent cross icon while searching in datatable ***/
.dataTables_filter input {
  width: 100%;
}


/* Add this globally to your main CSS or <style> block */
.dataTables_filter input::-ms-clear,
.dataTables_filter input::-ms-reveal {
display: none;
}

.dataTables_filter input::-webkit-search-decoration,
.dataTables_filter input::-webkit-search-cancel-button,
.dataTables_filter input::-webkit-search-results-button,
.dataTables_filter input::-webkit-search-results-decoration {
display: none;
}

.dataTables_filter input[type="search"] {
-webkit-appearance: none;
appearance: none;
}

.bdg-completed, .bdg-active{background-color: hsl(149, 80%, 90%) !important; color: hsl(158, 64%, 32%) !important;}
.bdg-voided, .bdg-expired{background-color: hsl(48, 100%, 88%) !important; color: rgb(217 119 6 / 1) !important;}
.bdg-open{background-color: hsl(214, 95%, 93%) !important; color: hsl(221, 83%, 53%) !important;}
.bdg-failed, .bdg-inactive, .bdg-cancelled{background-color: rgb(254 226 226 / 1) !important; color: rgb(185 28 28 / 1) !important;}
.bdg-refunded, .bdg-freeze{background-color: hsl(210, 40%, 96%) !important; color: hsl(215, 25%, 27%) !important;}
.bdg-placed{background-color: hsl(270, 95%, 93%) !important; color: hsl(271, 81%, 56%) !important;}

.icon_export{
    background: url('data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjMzQ0MjU2IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMiIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTggM3YySDV2MTRoMTN2MmgtMTRjLTEuMSAwLTItLjktMi0yVjRjMC0xLjEuOS0yIDItMmgxMnpNMTggMTR2LTRoLTN2LTRsLTUgNSA1IDV2LTRoM3oiLz48L3N2Zz4=') no-repeat;
    background-size: 15px;
    background-position: 10px center;
}
.export-drop-btn{
    position: absolute;
    right: 6px;
    top: 6px;
}
.w-3 {  width: 0.75rem; } 

 /* commission-section Design */
    .commission-section-main .commission-section {
        background: #ffffff;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        margin-bottom: 1.5rem;
        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
        overflow: hidden;
        transition: all 0.2s ease;
    }

    .commission-section-main .commission-section:hover {
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        border-color: #d1d5db;
    }

    .commission-section-main .commission-header {
        padding: 1.5rem 1.5rem 0 1.5rem;
        /* border-bottom: 1px solid #f3f4f6; */
        /* background: #fafafa; */
    }

    .commission-section-main .commission-title {
        font-weight: 600;
        color: #111827;
        margin: 0;
        font-size: 1.125rem;
        line-height: 1.75rem;
    }

    .commission-section-main .commission-header small {
        color: #6b7280;
        font-size: 0.875rem;
        margin-top: 0.25rem;
        display: block;
    }

    .commission-section-main .commission-body {
        padding: 1.5rem;
        background: #ffffff;
    }
    .commission-section-main .card-main-payrate {
        background: #ffffff;
        border-radius: 6px;
        border: 1px solid #e5e7eb;
    }
    .commission-section-main .tier-row {
        display: flex;
        align-items: flex-start;
        gap: 1.5rem;
        margin-bottom: 1.5rem;
        padding: 1.5rem;
        background: #fefefe;
        border-radius: 8px;
        border: 1px solid #e5e7eb;
        transition: all 0.2s ease;
    }

    .commission-section-main .tier-row:hover {
        background: #f8fafc;
        border-color: #d1d5db;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    }

    .commission-section-main .tier-row:last-child {
        margin-bottom: 0;
    }

    .commission-section-main .tier-column {
        flex: 1;
        min-width: 0;
    }

    .commission-section-main .tier-label {
        display: block;
        font-weight: 600;
        color: #6b7280;
        margin-bottom: 0.5rem;
        font-size: 0.875rem;
        text-transform: capitalize;
        letter-spacing: 0.025em;
    }

    .commission-section-main .tier-hint {
        color: #6b7280;
        font-size: 0.65rem;
        margin-bottom: 0.5rem;
        font-style: italic;
        font-weight: 400;
    }

    .commission-section-main .tier-input-wrapper {
        position: relative;
        display: flex;
        align-items: center;
        background: #ffffff;
        border: 1px solid #d1d5db;
        border-radius: 6px;
        padding: 0.5rem 0.75rem;
        transition: all 0.2s ease;
    }

    .commission-section-main .tier-input-wrapper:has(.select2-container) {
        position: relative;
        display: flex;
        align-items: center;
        background:none !important;
        border: 0px !important;
        border-radius: 6px !important;
        padding: 0 !important;
        transition: all 0.2s ease;
        padding: 0 !important;
    }
    .commission-section-main .tier-input-wrapper .select2-container .select2-selection {
        width: 100% !important;
        border: 1px solid #d1d5db !important;
        border-radius: 6px !important;
        transition: all 0.2s ease;
        font-size: 0.875rem !important;
        width: 100% !important;
    }

    .commission-section-main .tier-input-wrapper:focus-within {
        border-color: #3b82f6;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    }

    .commission-section-main .tier-input {
        border: none !important;
        background: transparent !important;
        padding: 0 !important;
        margin: 0 !important;
        box-shadow: none !important;
        width: 100% !important;
        min-width: 80px;
    }

    .commission-section-main .tier-input:focus {
        outline: none !important;
        box-shadow: none !important;
    }

    .commission-section-main .currency-symbol {
        color: #6b7280;
        font-weight: 500;
        margin-right: 0.5rem;
        font-size: 0.875rem;
    }

    .commission-section-main .percentage-symbol {
        color: #6b7280;
        font-weight: 500;
        margin-left: 0.5rem;
        font-size: 0.875rem;
    }

    /* Remove old tier styles */
    .commission-section-main .range-inputs,
    .commission-section-main .percentage-input {
        display: none;
    }

    .commission-section-main .add-tier-btn {
        background: #ffffff;
        color: #374151;
        border: 1px solid #d1d5db;
        padding: 0.5rem 1rem;
        border-radius: 8px;
        font-weight: 500;
        transition: all 0.2s ease;
        font-size: 0.875rem;
        display: inline-flex;
        align-items: center;
        gap: 0.75rem;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }

    .commission-section-main .add-tier-btn:hover {
        background: #f9fafb;
        border-color: #9ca3af;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
        transform: translateY(-1px);
    }

    .commission-section-main .add-tier-btn i {
        background: #1f2937;
        color: #ffffff;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.75rem;
        font-weight: 600;
    }

    .commission-section-main .effective-date-section {
        /* background: #f9fafb; */
        /* padding: 1.5rem; */
        /* border-radius: 8px; */
        margin-bottom: 1.5rem;
        /* border: 1px solid #e5e7eb; */
        /* box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1); */
    }

    .commission-section-main .form-label {
        font-weight: 500;
        color: #374151;
        margin-bottom: 0.5rem;
        font-size: 0.875rem;
        display: block;
    }

    .commission-section-main .form-control {
        border: 1px solid #d1d5db;
        border-radius: 6px;
        padding: 0.5rem 0.75rem;
        transition: all 0.2s ease;
        font-size: 0.875rem;
        width: 100%;
    }

    .commission-section-main .form-control:focus {
        outline: none;
        border-color: #6b7280;
        box-shadow: 0 0 0 3px rgba(107, 114, 128, 0.1);
    }

    .commission-section-main .form-control.is-valid {
        border-color: #10b981;
        box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
    }

    .commission-section-main .form-control.is-invalid {
        border-color: #ef4444;
        box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
    }

    .commission-section-main .role-display {
        background: #f3f4f6;
        border: 1px solid #d1d5db;
        color: #6b7280;
        font-weight: 500;
        border-radius: 6px;
        text-align: center;
        font-size: 0.875rem;
    }

    .commission-section-main .role-display:focus {
        box-shadow: none;
        border-color: #d1d5db;
        background: #f3f4f6;
    }

    .commission-section-main .tier-info {
        background: #f9fafb;
        border: 1px solid #e5e7eb;
        border-radius: 6px;
        padding: 0.75rem;
        margin-bottom: 1rem;
        font-size: 0.875rem;
        color: #374151;
    }

    .commission-section-main .tier-info i {
        color: #6b7280;
        margin-right: 0.5rem;
        font-size: 1rem;
    }

    .commission-section-main .section-header {
        /* background: #ffffff; */
        color: #111827;
        /* padding: 1.5rem 1.5rem 1rem 1.5rem; */
        border-radius: 8px 8px 0 0;
        margin: 0;
        /* border-bottom: 1px solid #f3f4f6; */
    }

    .commission-section-main .section-header h5 {
        margin: 0;
        font-weight: 600;
        font-size: 1.25rem;
        line-height: 1.75rem;
        color: #111827;
    }

    .commission-section-main .section-header p {
        margin: 0.5rem 0 0 0;
        color: #6b7280;
        font-size: 0.875rem;
    }

    .commission-section-main .btn-primary {
        --bs-btn-bg: #2563eb;
        --bs-btn-border-color: #2563eb;
        --bs-btn-hover-bg: #0139d6;
        --bs-btn-hover-border-color: #0139d6;
    }

    .commission-section-main .btn-primary:hover {
        color: var(--bs-btn-hover-color);
        background-color: var(--bs-btn-hover-bg);
        border-color: var(--bs-btn-hover-border-color);
    }
    .commission-section-main .btn-save {
          --bs-btn-bg: #2563eb;
    --bs-btn-border-color: #2563eb;
    --bs-btn-hover-bg: #0139d6;
    --bs-btn-hover-border-color: #0139d6;
    }
    .commission-section-main .btn-save:hover {
        color: var(--bs-btn-hover-color);
        background-color: var(--bs-btn-hover-bg);
        border-color: var(--bs-btn-hover-border-color);
    }

    .commission-section-main .btn-light {
        background: #ffffff;
        border: 1px solid #d1d5db;
        color: #6b7280;
        padding: 0.5rem 1rem;
        border-radius: 6px;
        font-weight: 500;
        transition: all 0.2s ease;
        font-size: 0.875rem;
    }
    

    .commission-section-main .btn-light:hover {
        background: #f9fafb;
        border-color: #9ca3af;
    }

    .commission-section-main .btn-light.bg-danger-subtle {
        background: #fef2f2;
        border-color: #fca5a5;
        color: #dc2626;
    }

    .commission-section-main .btn-light.bg-danger-subtle:hover {
        background: #fee2e2;
        border-color: #f87171;
        color: #b91c1c;
    }

    /* .saved-info {
        background: #d1fae5;
        border: 1px solid #a7f3d0;
        border-radius: 6px;
        padding: 0.5rem 0.75rem;
        color: #065f46;
        font-weight: 500;
    } */

    .saved-info .badge {
        background: #10b981 !important;
        color: white;
        font-weight: 500;
        padding: 0.375rem 0.75rem;
        border-radius: 9999px;
        font-size: 0.75rem;
    }

    .commission-section-main .user-item {
        background: #f9fafb;
        transition: all 0.2s ease;
        border-radius: 6px;
        margin-bottom: 0.5rem;
        border: 1px solid #e5e7eb;
        padding: 1rem;
    }

    .commission-section-main .user-item:hover {
        background: #f3f4f6;
        transform: translateY(-1px);
        box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.1);
    }

    .commission-section-main .user-avatar {
        color: #6b7280;
    }

    .commission-section-main .user-name {
        color: #111827;
        margin-bottom: 0.25rem;
        font-weight: 500;
    }

    .commission-section-main .user-email {
        color: #6b7280;
        font-size: 0.875rem;
    }

    .commission-section-main .user-status .badge {
        font-size: 0.75rem;
        padding: 0.5rem 0.75rem;
        border-radius: 9999px;
        font-weight: 500;
    }

    .commission-section-main .form-control::placeholder {
        color: #9ca3af;
        font-style: normal;
    }

    .commission-section-main .alert {
        border-radius: 6px;
        border: none;
        margin-bottom: 1rem;
        padding: 1rem;
    }

    .commission-section-main .alert-success {
        background: #d1fae5;
        color: #065f46;
        border-left: 4px solid #10b981;
    }

    .commission-section-main .alert-danger {
        background: #fee2e2;
        color: #991b1b;
        border-left: 4px solid #ef4444;
    }

    .commission-section-main .alert-info {
        background: #dbeafe;
        color: #1e40af;
        border-left: 4px solid #3b82f6;
    }

    .commission-section-main .alert-warning {
        background: #fef3c7;
        color: #92400e;
        border-left: 4px solid #f59e0b;
    }

    .commission-section-main .alert-dismissible .btn-close {
        padding: 0.75rem 1rem;
    }

    .commission-section-main .fa-spin {
        animation: fa-spin 1s infinite linear;
    }

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

    /* User Assignment Modal Styles */
    .commission-section-main .user-checkboxes {
        max-height: 400px;
        overflow-y: auto;
        border: 1px solid #e5e7eb;
        border-radius: 6px;
        padding: 1rem;
        background: #f9fafb;
    }

    .commission-section-main .user-checkbox-item {
        display: flex;
        align-items: center;
        padding: 0.75rem;
        border-bottom: 1px solid #e5e7eb;
        transition: background-color 0.2s;
    }

    .commission-section-main .user-checkbox-item:last-child {
        border-bottom: none;
    }

    .commission-section-main .user-checkbox-item:hover {
        background-color: #f3f4f6;
    }

    .commission-section-main .user-checkbox-item .form-check {
        margin: 0;
        /* flex: 1; */
        width: 50px;
    }

    .commission-section-main .user-checkbox-item .user-info {
        /* flex: 2; */
        margin-left: 1rem;
        width: 100%;
    }

    .commission-section-main .user-checkbox-item .user-name {
        font-weight: 500;
        color: #111827;
        margin-bottom: 0.25rem;
    }

    .commission-section-main .user-checkbox-item .user-email {
        font-size: 0.875rem;
        color: #6b7280;
        margin: 0;
    }

    .commission-section-main .modal-lg {
        max-width: 700px;
    }

    /* User List Styles */
    .commission-section-main .user-list {
        max-height: 300px;
        overflow-y: auto;
    }

    .commission-section-main .commission-form-container {
        transition: all 0.3s ease;
    }

    .commission-section-main .commission-form-container.role-selected {
        transform: translateY(0);
        opacity: 1;
    }

    .commission-section-main .commission-form-container:not(.role-selected) {
        opacity: 0.7;
        pointer-events: none;
    }

    .commission-section-main .commission-form-container:not(.role-selected) .btn {
        opacity: 0.5;
        pointer-events: none;
    }

    /* Loading and alert styles */
    .commission-section-main .btn:disabled {
        opacity: 0.7;
        cursor: not-allowed;
    }

    /* Responsive adjustments */
    @media (max-width: 768px) {
        .commission-section-main .tier-row {
            flex-direction: column;
            align-items: stretch;
            gap: 0.75rem;
        }

        .commission-section-main .range-inputs, .commission-section-main .percentage-input {
            width: 100%;
            justify-content: center;
        }

        .commission-section-main .range-inputs .form-control, .commission-section-main .percentage-input .form-control {
            width: 100%;
            max-width: 150px;
        }

        .commission-section-main .options-menu {
            align-self: center;
            margin-top: 0.5rem;
        }
    }

    /* Custom scrollbar */
    .commission-section-main .user-checkboxes::-webkit-scrollbar {
        width: 6px;
    }

    .commission-section-main .user-checkboxes::-webkit-scrollbar-track {
        background: #f1f5f9;
        border-radius: 3px;
    }

    .commission-section-main .user-checkboxes::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 3px;
    }

    .commission-section-main .user-checkboxes::-webkit-scrollbar-thumb:hover {
        background: #94a3b8;
    }

    /* Enhanced form styling for datepicker */
    .commission-section-main .form-control.datepickerui {
        background-color: #ffffff;
        border: 1px solid #d1d5db;
        border-radius: 6px;
        padding: 0.5rem 0.75rem;
        font-weight: 500;
        color: #111827;
        transition: all 0.2s ease;
    }

    .commission-section-main .form-control.datepickerui:focus {
        border-color: #6b7280;
        box-shadow: 0 0 0 3px rgba(107, 114, 128, 0.1);
    }

    .commission-section-main .form-control.datepickerui::placeholder {
        color: #9ca3af;
        font-weight: 500;
    }

    /* Enhanced spacing */
    .commission-section-main .mb-3 {
        margin-bottom: 1rem !important;
    }

    .commission-section-main .mt-3 {
        margin-top: 1rem !important;
    }

    .commission-section-main .mt-4 {
        margin-top: 1.5rem !important;
    }

    .commission-section-main .gap-3 {
        gap: 1rem !important;
    }

    /* Enhanced text styling */
    .commission-section-main .text-muted {
        color: #6b7280 !important;
        font-weight: 500;
    }

    .commission-section-main .text-info {
        color: #3b82f6 !important;
        font-weight: 500;
    }

    .commission-section-main .text-warning {
        color: #f59e0b !important;
        font-weight: 500;
    }

    .commission-section-main .text-success {
        color: #10b981 !important;
        font-weight: 500;
    }

    .commission-section-main .text-danger {
        color: #ef4444 !important;
        font-weight: 500;
    }

    /* Dark Theme Styles */
    [data-bs-theme=dark] .card-main-payrate,
    .dark-theme .card-main-payrate {
        background: #1f2937 !important;
        border-radius: 6px !important;
        border: 1px solid #374151 !important;
        color: #f9fafb !important;
    }

    [data-bs-theme=dark] .commission-section,
    .dark-theme .commission-section {
        background: #1f2937 !important;
        border: 1px solid #374151 !important;
        color: #f9fafb !important;
    }

    [data-bs-theme=dark] .commission-section:hover,
    .dark-theme .commission-section:hover {
        border-color: #4b5563 !important;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2) !important;
    }

    [data-bs-theme=dark] .commission-section-main,
    .dark-theme .commission-section-main {
        background: #1f2937 !important;
        border: 1px solid #374151 !important;
        color: #f9fafb !important;
    }

    [data-bs-theme=dark] .commission-section-main:hover,
    .dark-theme .commission-section-main:hover {
        border-color: #4b5563 !important;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2) !important;
    }

    /* [data-bs-theme=dark] .commission-header,
    .dark-theme .commission-header {
        background: #111827 !important;
        border-bottom: 1px solid #374151 !important;
    } */

    [data-bs-theme=dark] .commission-title,
    .dark-theme .commission-title {
        color: #f9fafb !important;
    }

    [data-bs-theme=dark] .commission-header small,
    .dark-theme .commission-header small {
        color: #d1d5db !important;
    }

    [data-bs-theme=dark] .commission-body,
    .dark-theme .commission-body {
        background: #1f2937 !important;
        color: #f9fafb !important;
    }

    [data-bs-theme=dark] .commission-section-main .tier-row,
    .dark-theme .commission-section-main .tier-row {
        background: #374151 !important;
        border: 1px solid #4b5563 !important;
        color: #f9fafb !important;
    }

    [data-bs-theme=dark] .commission-section-main .tier-row:hover,
    .dark-theme .commission-section-main .tier-row:hover {
        border-color: #6b7280 !important;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
    }

    [data-bs-theme=dark] .commission-section-main .form-control,
    .dark-theme .commission-section-main .form-control, [data-bs-theme=dark] .commission-section-main .tier-input-wrapper  {
        background: #374151 !important;
        border: 1px solid #4b5563 !important;
        color: #f9fafb !important;
    }
    [data-bs-theme=dark] .commission-section-main .tier-input-wrapper .form-control  {
        border-color: transparent !important;
    }

    [data-bs-theme=dark] .commission-section-main .tier-label,
    .dark-theme .commission-section-main .tier-label, [data-bs-theme=dark] .commission-section-main .tier-hint,
    .dark-theme .commission-section-main .tier-hint {
        color: #f9fafb !important;
    }

    [data-bs-theme=dark] .commission-section-main .form-control:focus,
    .dark-theme .commission-section-main .form-control:focus {
        border-color: #6b7280 !important;
        box-shadow: 0 0 0 3px rgba(107, 114, 128, 0.2) !important;
        background: #4b5563 !important;
    }

    [data-bs-theme=dark] .commission-section-main .form-control::placeholder,
    .dark-theme .commission-section-main .form-control::placeholder {
        color: #9ca3af !important;
    }

    [data-bs-theme=dark] .commission-section-main .form-label,
    .dark-theme .commission-section-main .form-label {
        color: #e5e7eb !important;
    }

    [data-bs-theme=dark] .commission-section-main .range-separator,
    .dark-theme .commission-section-main .range-separator {
        color: #d1d5db !important;
    }

    [data-bs-theme=dark] .commission-section-main .currency-symbol,
    .dark-theme .commission-section-main .currency-symbol {
        color: #d1d5db !important;
    }

    [data-bs-theme=dark] .commission-section-main .percentage-symbol,
    .dark-theme .commission-section-main .percentage-symbol {
        color: #d1d5db !important;
    }

    [data-bs-theme=dark] .commission-section-main .tier-info,
    .dark-theme .commission-section-main .tier-info {
        background: #374151 !important;
        border: 1px solid #4b5563 !important;
        color: #d1d5db !important;
    }

    [data-bs-theme=dark] .commission-section-main .tier-info i,
    .dark-theme .commission-section-main .tier-info i {
        color: #9ca3af !important;
    }

    [data-bs-theme=dark] .commission-section-main .section-header,
    .dark-theme .commission-section-main .section-header {
        /* background: #111827 !important; */
        color: #f9fafb !important;
        /* border-bottom: 1px solid #374151 !important; */
    }

    [data-bs-theme=dark] .commission-section-main .section-header h5,
    .dark-theme .commission-section-main .section-header h5 {
        color: #f9fafb !important;
    }

    [data-bs-theme=dark] .commission-section-main .section-header p,
    .dark-theme .commission-section-main .section-header p {
        color: #d1d5db !important;
    }

    [data-bs-theme=dark] .commission-section-main .btn-primary,
    .dark-theme .commission-section-main .btn-primary {
        background: #6b7280 !important;
        color: #f9fafb !important;
        border: 1px solid #4b5563 !important;
    }

    [data-bs-theme=dark] .commission-section-main .btn-primary:hover,
    .dark-theme .commission-section-main .btn-primary:hover {
        background: #4b5563 !important;
        border-color: #6b7280 !important;
    }

    [data-bs-theme=dark] .commission-section-main .btn-light,
    .dark-theme .commission-section-main .btn-light {
        background: #374151 !important;
        border: 1px solid #4b5563 !important;
        color: #d1d5db !important;
    }

    [data-bs-theme=dark] .commission-section-main .btn-light:hover,
    .dark-theme .commission-section-main .btn-light:hover {
        background: #4b5563 !important;
        border-color: #6b7280 !important;
    }

    [data-bs-theme=dark] .commission-section-main .btn-save,
    .dark-theme .commission-section-main .btn-save {
        background: #5855eb !important;
        color: #f9fafb !important;
        border: 1px solid #4338ca !important;
    }

    [data-bs-theme=dark] .commission-section-main .btn-save:hover,
    .dark-theme .commission-section-main .btn-save:hover {
        background: #4338ca !important;
        border-color: #3730a3 !important;
    }

    [data-bs-theme=dark] .commission-section-main .add-tier-btn,
    .dark-theme .commission-section-main .add-tier-btn {
        background: #6b7280 !important;
        color: #f9fafb !important;
        border: 1px solid #4b5563 !important;
    }

    [data-bs-theme=dark] .commission-section-main .add-tier-btn:hover,
    .dark-theme .commission-section-main .add-tier-btn:hover {
        background: #4b5563 !important;
        border-color: #6b7280 !important;
    }

    /* [data-bs-theme=dark] .effective-date-section,
    .dark-theme .effective-date-section {
        background: #374151 !important;
        border: 1px solid #4b5563 !important;
        color: #f9fafb !important;
    } */

    [data-bs-theme=dark] .commission-section-main .role-display,
    .dark-theme .commission-section-main .role-display {
        background: #374151 !important;
        border: 1px solid #4b5563 !important;
        color: #d1d5db !important;
    }

    [data-bs-theme=dark] .commission-section-main .role-display:focus,
    .dark-theme .commission-section-main .role-display:focus {
        background: #4b5563 !important;
        border-color: #6b7280 !important;
    }

    [data-bs-theme=dark] .commission-section-main .user-item,
    .dark-theme .commission-section-main .user-item {
        background: #374151 !important;
        border: 1px solid #4b5563 !important;
        color: #f9fafb !important;
    }

    [data-bs-theme=dark] .commission-section-main .user-item:hover,
    .dark-theme .commission-section-main .user-item:hover {
        background: #4b5563 !important;
        border-color: #6b7280 !important;
    }

    [data-bs-theme=dark] .commission-section-main .user-name,
    .dark-theme .commission-section-main .user-name {
        color: #f9fafb !important;
    }

    [data-bs-theme=dark] .commission-section-main .user-email,
    .dark-theme .commission-section-main .user-email {
        color: #d1d5db !important;
    }

    [data-bs-theme=dark] .commission-section-main .user-avatar,
    .dark-theme .commission-section-main .user-avatar {
        color: #9ca3af !important;
    }

    [data-bs-theme=dark] .commission-section-main .saved-info,
    .dark-theme .commission-section-main .saved-info {
        background: #065f46 !important;
        border: 1px solid #047857 !important;
        color: #d1fae5 !important;
    }

    [data-bs-theme=dark] .commission-section-main .saved-info .badge,
    .dark-theme .commission-section-main .saved-info .badge {
        background: #10b981 !important;
        color: #ffffff !important;
    }

    [data-bs-theme=dark] .commission-section-main .alert,
    .dark-theme .commission-section-main .alert {
        background: #374151 !important;
        border-left: 4px solid #6b7280 !important;
        color: #f9fafb !important;
    }

    [data-bs-theme=dark] .commission-section-main .alert-success,
    .dark-theme .commission-section-main .alert-success {
        background: #065f46 !important;
        border-left-color: #10b981 !important;
        color: #d1fae5 !important;
    }

    [data-bs-theme=dark] .commission-section-main .alert-danger,
    .dark-theme .commission-section-main .alert-danger {
        background: #991b1b !important;
        border-left-color: #ef4444 !important;
        color: #fecaca !important;
    }

    [data-bs-theme=dark] .commission-section-main .alert-info,
    .dark-theme .commission-section-main .alert-info {
        background: #1e40af !important;
        border-left-color: #3b82f6 !important;
        color: #dbeafe !important;
    }

    [data-bs-theme=dark] .commission-section-main .alert-warning,
    .dark-theme .commission-section-main .alert-warning {
        background: #92400e !important;
        border-left-color: #f59e0b !important;
        color: #fde68a !important;
    }

    [data-bs-theme=dark] .commission-section-main .text-muted,
    .dark-theme .commission-section-main .text-muted {
        color: #9ca3af !important;
    }

    [data-bs-theme=dark] .commission-section-main .text-info,
    .dark-theme .commission-section-main .text-info {
        color: #93c5fd !important;
    }

    [data-bs-theme=dark] .commission-section-main .text-warning,
    .dark-theme .commission-section-main .text-warning {
        color: #fbbf24 !important;
    }

    [data-bs-theme=dark] .commission-section-main .text-success,
    .dark-theme .commission-section-main .text-success {
        color: #6ee7b7 !important;
    }

    [data-bs-theme=dark] .commission-section-main .text-danger,
    .dark-theme .commission-section-main .text-danger {
        color: #fca5a5 !important;
    }

    [data-bs-theme=dark] .commission-section-main .modal-content,
    .dark-theme .commission-section-main .modal-content {
        background: #1f2937 !important;
        border: 1px solid #374151 !important;
        color: #f9fafb !important;
    }

    [data-bs-theme=dark] .commission-section-main .modal-header,
    .dark-theme .commission-section-main .modal-header {
        background: #111827 !important;
        border-bottom: 1px solid #374151 !important;
        color: #f9fafb !important;
    }

    [data-bs-theme=dark] .commission-section-main .modal-body,
    .dark-theme .commission-section-main .modal-body {
        background: #1f2937 !important;
        color: #f9fafb !important;
    }

    [data-bs-theme=dark] .commission-section-main .modal-footer,
    .dark-theme .commission-section-main .modal-footer {
        background: #374151 !important;
        border-top: 1px solid #4b5563 !important;
        color: #f9fafb !important;
    }

    [data-bs-theme=dark] .commission-section-main .user-checkboxes,
    .dark-theme .commission-section-main .user-checkboxes {
        background: #374151 !important;
        border: 1px solid #4b5563 !important;
        color: #f9fafb !important;
    }

    [data-bs-theme=dark] .commission-section-main .user-checkbox-item,
    .dark-theme .commission-section-main .user-checkbox-item {
        border-bottom: 1px solid #4b5563 !important;
        color: #f9fafb !important;
    }

    [data-bs-theme=dark] .commission-section-main .user-checkbox-item:hover,
    .dark-theme .commission-section-main .user-checkbox-item:hover {
        background: #4b5563 !important;
    }

    [data-bs-theme=dark] .commission-section-main .form-check-label,
    .dark-theme .commission-section-main .form-check-label {
        color: #f9fafb !important;
    }

    /* Dark theme scrollbar */
    [data-bs-theme=dark] .commission-section-main .user-checkboxes::-webkit-scrollbar-track,
    .dark-theme .commission-section-main .user-checkboxes::-webkit-scrollbar-track {
        background: #374151 !important;
    }

    [data-bs-theme=dark] .commission-section-main .user-checkboxes::-webkit-scrollbar-thumb,
    .dark-theme .commission-section-main .user-checkboxes::-webkit-scrollbar-thumb {
        background: #6b7280 !important;
    }

    [data-bs-theme=dark] .commission-section-main .user-checkboxes::-webkit-scrollbar-thumb:hover,
    .dark-theme .commission-section-main .user-checkboxes::-webkit-scrollbar-thumb:hover {
        background: #9ca3af !important;
    }

    /* Dark theme form controls */
    [data-bs-theme=dark] .commission-section-main .form-control.datepickerui,
    .dark-theme .commission-section-main .form-control.datepickerui {
        background: #374151 !important;
        border: 1px solid #4b5563 !important;
        color: #f9fafb !important;
    }

    [data-bs-theme=dark] .commission-section-main .form-control.datepickerui:focus,
    .dark-theme .commission-section-main .form-control.datepickerui:focus {
        background: #4b5563 !important;
        border-color: #6b7280 !important;
    }

    /* Dark theme badges */
    [data-bs-theme=dark] .commission-section-main .badge.bg-success,
    .dark-theme .commission-section-main .badge.bg-success {
        background: #10b981 !important;
        color: #ffffff !important;
    }

    [data-bs-theme=dark] .commission-section-main .badge.bg-secondary,
    .dark-theme .commission-section-main .badge.bg-secondary {
        background: #6b7280 !important;
        color: #ffffff !important;
    }

    [data-bs-theme=dark] .commission-section-main .badge.bg-info,
    .dark-theme .commission-section-main .badge.bg-info {
        background: #3b82f6 !important;
        color: #ffffff !important;
    }

    /* Dark theme transitions */
    [data-bs-theme=dark] .commission-section-main *,
    .dark-theme .commission-section-main * {
        transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease !important;
    }

    /* Additional dark theme overrides */
    [data-bs-theme=dark] .commission-section-main .widget-content,
    .dark-theme .commission-section-main .widget-content {
        background: #1f2937 !important;
        color: #f9fafb !important;
    }

    [data-bs-theme=dark] .commission-section-main .searchable-container,
    .dark-theme .commission-section-main .searchable-container {
        background: #1f2937 !important;
        color: #f9fafb !important;
    }

    [data-bs-theme=dark] .commission-section-main .d-flex,
    .dark-theme .commission-section-main .d-flex {
        color: #f9fafb !important;
    }

    [data-bs-theme=dark] .commission-section-main .small,
    .dark-theme .commission-section-main .small {
        color: #d1d5db !important;
    }

    [data-bs-theme=dark] .commission-section-main .fw-semibold,
    .dark-theme .commission-section-main .fw-semibold {
        color: #f9fafb !important;
    }

    [data-bs-theme=dark] .commission-section-main .mb-2,
    .dark-theme .commission-section-main .mb-2 {
        color: #f9fafb !important;
    }

    [data-bs-theme=dark] .commission-section-main .mt-3,
    .dark-theme .commission-section-main .mt-3 {
        color: #f9fafb !important;
    }

    [data-bs-theme=dark] .commission-section-main .mt-4,
    .dark-theme .commission-section-main .mt-4 {
        color: #f9fafb !important;
    }

    [data-bs-theme=dark] .commission-section-main .gap-3,
    .dark-theme .commission-section-main .gap-3 {
        color: #f9fafb !important;
    }

    [data-bs-theme=dark] .commission-section-main .me-2,
    .dark-theme .commission-section-main .me-2 {
        color: inherit !important;
    }

    [data-bs-theme=dark] .commission-section-main .fa-solid,
    .dark-theme .commission-section-main .fa-solid {
        color: inherit !important;
    }

    [data-bs-theme=dark] .commission-section-main .fa-brands,
    .dark-theme .commission-section-main .fa-brands {
        color: inherit !important;
    }

    [data-bs-theme=dark] .commission-section-main .fa-regular,
    .dark-theme .commission-section-main .fa-regular {
        color: inherit !important;
    }

    /* Dark theme tiers */
    [data-bs-theme=dark] .commission-section-main .tier-row,
    .dark-theme .commission-section-main .tier-row {
        background: #374151 !important;
        border: 1px solid #4b5563 !important;
        color: #f9fafb !important;
    }

    [data-bs-theme=dark] .commission-section-main .tier-row:hover,
    .dark-theme .commission-section-main .tier-row:hover {
        border-color: #6b7280 !important;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
    }

    [data-bs-theme=dark] .commission-section-main .tier-label,
    .dark-theme .commission-section-main .tier-label {
        color: #93c5fd !important;
    }

    [data-bs-theme=dark] .commission-section-main .tier-hint,
    .dark-theme .commission-section-main .tier-hint {
        color: #9ca3af !important;
    }

    [data-bs-theme=dark] .commission-section-main .tier-input-wrapper,
    .dark-theme .commission-section-main .tier-input-wrapper {
        background: #4b5563 !important;
        border: 1px solid #6b7280 !important;
    }

    [data-bs-theme=dark] .commission-section-main .tier-input-wrapper:focus-within,
    .dark-theme .commission-section-main .tier-input-wrapper:focus-within {
        border-color: #60a5fa !important;
        box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.2) !important;
    }

    [data-bs-theme=dark] .commission-section-main .tier-input,
    .dark-theme .commission-section-main .tier-input {
        color: #f9fafb !important;
    }

    [data-bs-theme=dark] .commission-section-main .tier-input::placeholder,
    .dark-theme .commission-section-main .tier-input::placeholder {
        color: #9ca3af !important;
    }

    [data-bs-theme=dark] .commission-section-main .currency-symbol,
    .dark-theme .commission-section-main .currency-symbol {
        color: #d1d5db !important;
    }

    [data-bs-theme=dark] .commission-section-main .percentage-symbol,
    .dark-theme .commission-section-main .percentage-symbol {
        color: #d1d5db !important;
    }

    [data-bs-theme=dark] .commission-section-main .add-tier-btn,
    .dark-theme .commission-section-main .add-tier-btn {
        background: #374151 !important;
        color: #f9fafb !important;
        border: 1px solid #4b5563 !important;
    }

    [data-bs-theme=dark] .commission-section-main .add-tier-btn:hover,
    .dark-theme .commission-section-main .add-tier-btn:hover {
        background: #4b5563 !important;
        border-color: #6b7280 !important;
    }

    [data-bs-theme=dark] .commission-section-main .add-tier-btn i,
    .dark-theme .commission-section-main .add-tier-btn i {
        background: #f9fafb !important;
        color: #1f2937 !important;
    }

    /* commission-section Design */
    

      /* --- BASE modern-style (light mode) -------------------- */
    .modern-style {
        --line:#e6e7ea !important;
       --radius-lg:12px !important;
       --ms-line: #e6e7ea;
       --ms-head: #6b7280;
       --ms-row: #111827;
       --ms-row-muted: #6b7280;
       --ms-hover: #f9fbff;
       --ms-card: #ffffff;
    }
    .modern-style .modal-content{
      border:0 !important; border-radius:var(--radius-lg) !important; overflow:hidden !important;
      box-shadow:0 12px 28px rgba(2,6,23,.16) !important;
      background:#fff !important;
    }
    .modern-style .modal-darkbar{
      /* background:#1a1a2e !important; */
      background:#2563eb !important;
      color:#fff !important;
      padding:.9rem 1rem !important;
      border-top-left-radius:var(--radius-lg) !important;
      border-top-right-radius:var(--radius-lg) !important;
      display:flex !important; align-items:center !important; justify-content:space-between !important;
    }
    .modern-style .modal-darkbar .modal-title{font-weight:700}
    .modern-style .nav-underline {
        --bs-nav-underline-gap: 0.5rem;
        --bs-nav-underline-border-width: 0.125rem;
        --bs-nav-underline-link-active-color: var(--bs-emphasis-color);
        gap: var(--bs-nav-underline-gap);
    }
    .modern-style .nav-underline .nav-link{
      border:0 !important; border-bottom:2px solid transparent !important; border-radius:0 !important;
      padding:.75rem 0.6rem !important; color:#6b7280 !important;
    }
    .modern-style .nav-underline .nav-link.active{
      color:#2563eb !important; border-bottom-color:#2563eb !important; font-weight:600 !important;
    }
    .modern-style .toolbar{gap:.75rem}
    .modern-style .search-wrap{position:relative !important; flex:1 1 340px}
    .modern-style .search-wrap .form-control{
      padding-left:2.25rem !important; border-radius:8px !important; border:1px solid var(--line) !important;
    }
    .modern-style .search-wrap .bi{
      position:absolute !important; left:.7rem !important; top:50% !important; transform:translateY(-50%) !important; opacity:.7 !important;
    }
    .modern-style .btn-ghost{background:#fff !important; border:1px solid var(--line) !important; border-radius:8px}
    .modern-style .btn-ghost:hover{background:#f6f7fb}
    .modern-style .table-card{border:1px solid var(--line) !important; border-radius:10px !important; background:#fff}
    .modern-style table.dataTable > thead > tr > th{
      font-size:.78rem !important; letter-spacing:.02em !important; border-bottom:1px solid var(--line) !important; background:#fff !important; color:#6b7280 !important; font-weight:600 !important;
    }
    .modern-style table.dataTable tbody tr td{border-bottom:1px solid #f1f2f5}
    .modern-style .chip{
      display:inline-flex !important; align-items:center !important;
      padding:.15rem .55rem !important; font-size:.72rem !important;
      border-radius:999px !important; background:#f3f4f6 !important; border:1px solid #e5e7eb !important; color:#111827 !important;
    }
    .modern-style .show-wrap{display:flex !important; align-items:center !important; gap:.5rem !important; opacity:.8}
    .modern-style .show-wrap .form-select{width:auto !important; border-radius:8px !important; border:1px solid var(--line)}

    /* --- DARK THEME variant -------------------- */
    .modern-style[data-bs-theme="dark"] .modal-content{
      background:#0b1020 !important; color:#e5e7eb !important;
      box-shadow:0 12px 28px rgba(0,0,0,.5) !important;
    }
    [data-bs-theme="dark"] .modern-style .modal-darkbar{background:#111827 !important; color:#fff !important;}
    [data-bs-theme="dark"] .modern-style .nav-underline .nav-link{color:#94a3b8}
    [data-bs-theme="dark"] .modern-style .nav-underline .nav-link.active{color:#fff !important; border-bottom-color:#60a5fa}
    [data-bs-theme="dark"] .modern-style .table-card{background:#0f1528 !important; border-color:#19233f}
    [data-bs-theme="dark"] .modern-style .search-wrap .form-control,
    [data-bs-theme="dark"] .modern-style .btn-ghost,
    [data-bs-theme="dark"] .modern-style .show-wrap .form-select{
      background:#0f1528 !important; color:#e5e7eb !important; border-color:#19233f !important;
    }
    [data-bs-theme="dark"] .modern-style table.dataTable > thead > tr > th{
      background:#0f1528 !important; color:#9aa6c1 !important; border-bottom-color:#19233f !important;
    }
    [data-bs-theme="dark"] .modern-style table.dataTable tbody tr td{border-bottom-color:#17203a}
    .modern-style[data-bs-theme="dark"] .chip{
      background:#0f1a33 !important; border:1px solid #1e3a8a !important; color:#bfdbfe !important;
    }

    .modern-style .table-card {
        background: var(--ms-card);
        border: 1px solid var(--ms-line);
        border-radius: 10px;
        overflow: hidden;
      }
      
      /* Base table reset */
      .modern-style table.table {
        margin: 0;
        border-collapse: separate;
        border-spacing: 0;
      }
      
      /* Header */
      .modern-style table.table thead th,
      .modern-style table.dataTable > thead > tr > th {
        background: var(--ms-card);
        position: sticky; /* optional sticky head */
        top: 0;
        z-index: 2;
        font-size: .78rem;
        letter-spacing: .02em;
        font-weight: 600;
        color: var(--ms-head);
        border-bottom: 1px solid var(--ms-line) !important;
        padding-top: .9rem;
        padding-bottom: .7rem;
        white-space: nowrap;
      }
      
      /* Cells */
      .modern-style table.table tbody td {
        color: var(--ms-row);
        border-bottom: 1px solid #f1f2f5;
        vertical-align: middle;
      }
      
      /* Compact density helpers */
      .modern-style .table.table-sm thead th { padding-top: .6rem; padding-bottom: .45rem;padding-left: .6rem;padding-right: .6rem; }
      .modern-style .table.table-sm tbody td { padding-top: .5rem; padding-bottom: .5rem; padding-left: .6rem;padding-right: .6rem;}
      
      /* Hover + striped */
      .modern-style table.table tbody tr:hover { background: var(--ms-hover); }
      .modern-style table.table.table-striped > tbody > tr:nth-of-type(odd) > * {
        background-color: #fbfcfe;
      }
      
      /* Last row border cleanup */
      .modern-style .table-card table.table tbody tr:last-child td { border-bottom: 0; }
      
      /* Numeric alignment helpers */
      .modern-style .text-num,
      .modern-style td[data-type="number"],
      .modern-style th[data-type="number"] { text-align: right; }
      
      /* Muted/secondary text (for sublines) */
      .modern-style .cell-muted { color: var(--ms-row-muted); font-size: .85em; }
      
      /* Soft chip (e.g., Payment Method) */
      .modern-style .chip {
        display: inline-flex; align-items: center; gap: .35rem;
        font-size: .72rem; padding: .15rem .55rem;
        background: #f3f4f6; color: #111827;
        border: 1px solid #e5e7eb; border-radius: 999px;
        line-height: 1;
      }
      
      /* -------- DataTables integration -------- */
      
      /* Remove default top/bottom borders */
      .modern-style .dataTables_wrapper .dataTables_info,
      .modern-style .dataTables_wrapper .dataTables_paginate { padding-top: .75rem; }
      
      .modern-style .dataTables_wrapper .dataTables_length select,
      .modern-style .dataTables_wrapper .dataTables_filter input {
        border-radius: 8px; border: 1px solid var(--ms-line);
      }
      
      /* Pagination look */
      .modern-style .dataTables_wrapper .dataTables_paginate .paginate_button {
        border: 1px solid var(--ms-line);
        border-radius: .5rem;
        padding: .25rem .6rem;
        margin: 0 .15rem;
        background: #fff;
      }
      .modern-style .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
        background: #f6f7fb; border-color: #dfe1e6;
      }
      .modern-style .dataTables_wrapper .dataTables_paginate .paginate_button.current,
      .modern-style .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
        background: #e8f1ff; border-color: #cfe2ff; color: #0b1324 !important;
      }
      
      /* Sort indicators (Bootstrap DT) */
      .modern-style table.dataTable > thead .sorting:after,
      .modern-style table.dataTable > thead .sorting_asc:after,
      .modern-style table.dataTable > thead .sorting_desc:after {
        opacity: .6; right: .5rem;
      }
      
      /* Responsive rows (child) */
      .modern-style table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before,
      .modern-style table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control:before {
        background-color: #e0ecff; color: #0b1324; border: 1px solid #c7d2fe;
      }
      .modern-style table.dataTable > tbody > tr.child ul.dtr-details > li {
        border-bottom: 1px dashed #e9ecf2;
      }
      
      /* Empty state */
      .modern-style table.dataTable tbody td.dataTables_empty {
        color: var(--ms-row-muted);
        background: #fbfcfe;
      }
      
      /* Sticky column helper */
      .modern-style .sticky-col {
        position: sticky; left: 0; z-index: 3; background: var(--ms-card);
        box-shadow: 2px 0 0 0 var(--ms-line);
      }
      
      /* ---- DARK VARIANT: when parent has data-bs-theme="dark" ---- */
      
      [data-bs-theme="dark"] .modern-style {
        --ms-line: #19233f;
        --ms-head: #9aa6c1;
        --ms-row: #e5e7eb;
        --ms-row-muted: #9aa6c1;
        --ms-hover: #0e1730;
        --ms-card: #0f1528;
      }
      
      [data-bs-theme="dark"] .modern-style .table-card {
        border-color: var(--ms-line);
        background: var(--ms-card);
      }
      [data-bs-theme="dark"] .modern-style .modal-content {
        border-color: var(--ms-line) !important;
        background: var(--ms-card) !important;
      } 
      
      [data-bs-theme="dark"] .modern-style table.table thead th,
      [data-bs-theme="dark"] .modern-style table.dataTable > thead > tr > th {
        background: var(--ms-card);
        color: var(--ms-head);
        border-bottom-color: var(--ms-line) !important;
      }
      
      [data-bs-theme="dark"] .modern-style table.table tbody td { border-bottom-color: #17203a; color: var(--ms-row); }
      [data-bs-theme="dark"] .modern-style table.table tbody tr:hover { background: var(--ms-hover); }
      
      [data-bs-theme="dark"] .modern-style .chip {
        background: #0f1a33;
        color: #bfdbfe;
        border: 1px solid #1e3a8a;
      }
      
      [data-bs-theme="dark"] .modern-style .dataTables_wrapper .dataTables_length select,
      [data-bs-theme="dark"] .modern-style .dataTables_wrapper .dataTables_filter input {
        background: var(--ms-card); color: var(--ms-row);
        border-color: var(--ms-line);
      }
      
      [data-bs-theme="dark"] .modern-style .dataTables_wrapper .dataTables_paginate .paginate_button {
        background: #0f1528; color: var(--ms-row) !important; border-color: var(--ms-line);
      }
      [data-bs-theme="dark"] .modern-style .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
        background: #111a33;
      }
      [data-bs-theme="dark"] .modern-style .dataTables_wrapper .dataTables_paginate .paginate_button.current,
      [data-bs-theme="dark"] .modern-style .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
        background: #0f214a; border-color: #234b8e; color: #fff !important;
      }
      
      [data-bs-theme="dark"] .modern-style table.dataTable > tbody > tr.child ul.dtr-details > li {
        border-bottom-color: #1a294f;
      }
      .modern-style-body {min-height: 500px !important; max-height: 500px !important; overflow-y: auto !important;}
     /* --- BASE modern-style (light mode) end-------------------- */

     /* Sale Refund Page Styles - Based on Neutral Design start*/
.sale-refund-form-main .rounded-table-card {
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

.sale-refund-form-main .rounded-table-card .card-header {
    background: linear-gradient(to right, #fafafa, #ffffff) !important;
    border-bottom: 1px solid #e5e7eb;
    padding: 1rem 1.5rem;
}

.sale-refund-form-main .rounded-table-card .card-header h5 {
    font-size: 1.125rem;
    color: #111827;
    margin: 0;
}

.sale-refund-form-main .rounded-table-card .card-header i {
    color: #6b7280;
}

.sale-refund-form-main .rounded-table-card .table {
    margin-bottom: 0;
    width: 100%;
}

.sale-refund-form-main .rounded-table-card .table th {
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #374151;
    background-color: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
    padding: 0.75rem 1rem;
}

.sale-refund-form-main .rounded-table-card .table td {
    vertical-align: middle;
    padding: 1rem;
    color: #111827;
}

.sale-refund-form-main .rounded-table-card .table tbody tr {
    border-bottom: 1px solid #f3f4f6;
}

.sale-refund-form-main .rounded-table-card .table tbody tr:hover {
    background-color: #f9fafb;
    transition: background-color 0.15s ease-in-out;
}

/* Form Controls - Neutral Design */
.sale-refund-form-main .form-control {
    border-radius: 8px;
    border: 1px solid #d1d5db;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    color: #111827;
}

.sale-refund-form-main .form-control:focus {
    border-color: #6b7280;
    box-shadow: 0 0 0 2px rgba(107, 114, 128, 0.2);
    outline: none;
}

.sale-refund-form-main .input-group:focus-within {
    border-color: #6b7280;
    border-radius: 8px;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}
.sale-refund-form-main .input-group:focus-within .input-group-text {
    border-color: #6b7280;
}

.sale-refund-form-main .input-group:focus-within .form-control {
    border-color: #3b82f6;
    box-shadow: none;
}

/* Total Amount Display */
.sale-refund-form-main .total-amount {
    margin-top: 20px;
    margin-bottom: 20px;
    padding: 16px 20px;
    background-color: #f8fafc;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    clear: both;
}

.sale-refund-form-main .total-amount .text-success {
    color: #059669 !important;
}

.sale-refund-form-main .total-amount .text-danger {
    color: #dc2626 !important;
}

.sale-refund-form-main .input-group-text {
    background-color: #f9fafb;
    border-color: #d1d5db;
    color: #6b7280;
}

/* Refund Amount Section */
.sale-refund-form-main .refund-amount-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e5e7eb;
}

.sale-refund-form-main .refund-amount-label {
    color: #6b7280;
    font-size: 0.875rem;
}

.sale-refund-form-main .refund-amount-value {
    font-size: 1.5rem;
    color: #111827;
    font-weight: 600;
}

/* Payment Method Labels */
.sale-refund-form-main .payment-method-label {
    display: block;
    font-size: 0.875rem;
    color: #111827;
    margin-bottom: 0.5rem;
}

.sale-refund-form-main .payment-method-amount {
    color: #6b7280;
}

/* Input with Icon */
.sale-refund-form-main .input-with-icon {
    position: relative;
}

.sale-refund-form-main .input-with-icon .form-control {
    padding-left: 2.5rem;
}

.sale-refund-form-main .input-with-icon .icon {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
    pointer-events: none;
}

/* Buttons - Neutral Design */
.sale-refund-form-main .btn {
    border-radius: 8px;
    font-weight: 500;
    padding: 0.65rem 1rem;
    font-size: 0.875rem;
    transition: all 0.15s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: auto !important;
}

.sale-refund-form-main .btn-outline-secondary {
    border: 1px solid #d1d5db;
    color: #374151;
    background-color: #ffffff;
}

.sale-refund-form-main .btn-outline-secondary:hover {
    background-color: #f9fafb;
    border-color: #9ca3af;
    color: #111827;
}

.sale-refund-form-main .btn-dark {
    background-color: #000000;
    border: 1px solid #000000;
    color: #ffffff;
}

.sale-refund-form-main .btn-dark:hover {
    background-color: #1f2937;
    border-color: #1f2937;
    color: #ffffff;
}

/* Table Footer */
.sale-refund-form-main .table-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    background-color: #f9fafb;
    border-top: 1px solid #e5e7eb;
    border-radius: 0 0 12px 12px;
}

.sale-refund-form-main .table-footer-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: #6b7280;
}

.sale-refund-form-main .table-footer-total {
    color: #111827;
    font-weight: 500;
}

.sale-refund-form-main .table-footer-total span {
    color: #6b7280;
}

/* Checkbox Styling */
.sale-refund-form-main .form-check-input {
    width: 1rem;
    height: 1rem;
    color: #6b7280;
    border: 1px solid #d1d5db;
    border-radius: 4px;
}

.sale-refund-form-main .form-check-input:focus {
    border-color: #6b7280;
    box-shadow: 0 0 0 2px rgba(107, 114, 128, 0.2);
}

/* Quantity Input Styling */
.sale-refund-form-main .quantity-input-group {
    display: flex;
    align-items: center;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    overflow: hidden;
}

.sale-refund-form-main .quantity-btn {
    padding: 0.5rem 0.75rem;
    background-color: #f9fafb;
    border: none;
    color: #6b7280;
    cursor: pointer;
    transition: background-color 0.15s ease-in-out;
}

.sale-refund-form-main .quantity-btn:hover {
    background-color: #f3f4f6;
}

.sale-refund-form-main .quantity-btn:first-child {
    border-right: 1px solid #d1d5db;
}

.sale-refund-form-main .quantity-btn:last-child {
    border-left: 1px solid #d1d5db;
}

.sale-refund-form-main .quantity-input {
    width: 4rem;
    padding: 0.5rem;
    text-align: center;
    border: none;
    outline: none;
    background-color: #ffffff;
}

.sale-refund-form-main .quantity-input:focus {
    box-shadow: 0 0 0 2px rgba(107, 114, 128, 0.2);
}

/* Price Details Column */
.sale-refund-form-main .price-details {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.sale-refund-form-main .price-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
}

.sale-refund-form-main .price-row.total-row {
    border-top: 1px solid #e5e7eb;
    padding-top: 0.25rem;
    margin-top: 0.25rem;
}

.sale-refund-form-main .price-label {
    color: #6b7280;
    min-width: 60px;
}

.sale-refund-form-main .price-value {
    color: #111827;
    font-weight: 500;
}

.sale-refund-form-main .price-row.total-row .price-label,
.sale-refund-form-main .price-row.total-row .price-value {
    color: #111827;
    font-weight: 600;
}

.sale-refund-form-main .price-row i {
    width: 14px;
    text-align: center;
}

/* Quantity Details Column */
.sale-refund-form-main .quantity-details {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.sale-refund-form-main .quantity-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
}

.sale-refund-form-main .quantity-row.available-row {
    border-top: 1px solid #e5e7eb;
    padding-top: 0.25rem;
    margin-top: 0.25rem;
}

.sale-refund-form-main .quantity-label {
    color: #6b7280;
    min-width: 70px;
}

.sale-refund-form-main .quantity-value {
    color: #111827;
    font-weight: 500;
}

.sale-refund-form-main .quantity-row.available-row .quantity-label,
.sale-refund-form-main .quantity-row.available-row .quantity-value {
    color: #111827;
    font-weight: 600;
}

.sale-refund-form-main .quantity-row i {
    width: 14px;
    text-align: center;
}

/* Refund Controls Styling */
.sale-refund-form-main .refund-controls {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.sale-refund-form-main .quantity-control {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}

.sale-refund-form-main .quantity-input-group {
    display: flex;
    align-items: center;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    overflow: hidden;
    background-color: #ffffff;
}

.sale-refund-form-main .quantity-btn {
    padding: 0.375rem 0.75rem;
    background-color: #f9fafb;
    border: none;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
}

.sale-refund-form-main .quantity-btn:hover {
    background-color: #f3f4f6;
    color: #374151;
}

.sale-refund-form-main .quantity-btn:first-child {
    border-right: 1px solid #d1d5db;
}

.sale-refund-form-main .quantity-btn:last-child {
    border-left: 1px solid #d1d5db;
}

.sale-refund-form-main .quantity-input {
    width: 3rem;
    padding: 0.1rem 0.375rem;
    text-align: center;
    border: none;
    outline: none;
    background-color: #ffffff;
    font-size: 0.875rem;
}

.sale-refund-form-main .quantity-input:focus {
    box-shadow: 0 0 0 2px rgba(107, 114, 128, 0.2);
}

/* Bootstrap Switch Styling */
.sale-refund-form-main .form-switch .form-check {
    padding-left: 2.5rem;
}

.sale-refund-form-main .form-switch .form-check-input {
    width: 2rem;
    height: 1rem;
    margin-left: -2.5rem;
    background-color: #d1d5db;
    border: 1px solid #d1d5db;
    border-radius: 1rem;
    transition: all 0.15s ease-in-out;
}

.sale-refund-form-main .form-switch .form-check-input:checked {
    background-color: #3b82f6;
    border-color: #3b82f6;
}

.sale-refund-form-main .form-check-label {
    font-size: 0.75rem;
    color: #6b7280;
    cursor: pointer;
}

/* Table Footer */
.sale-refund-form-main .table-footer {
    background-color: #f9fafb;
    border-top: 1px solid #e5e7eb;
}

/* Dark Mode Support */
[data-bs-theme="dark"] .sale-refund-form-main .rounded-table-card {
    background-color: #1f2937;
    border-color: #374151;
}

[data-bs-theme="dark"] .sale-refund-form-main .rounded-table-card .card-header {
    background: linear-gradient(to right, #374151, #4b5563) !important;
    border-bottom-color: #4b5563;
}

[data-bs-theme="dark"] .sale-refund-form-main .rounded-table-card .card-header h5 {
    color: #f9fafb;
}

[data-bs-theme="dark"] .sale-refund-form-main .rounded-table-card .card-header i {
    color: #d1d5db;
}

[data-bs-theme="dark"] .sale-refund-form-main .rounded-table-card .table th {
    background-color: #374151;
    color: #d1d5db;
    border-bottom-color: #4b5563;
}

[data-bs-theme="dark"] .sale-refund-form-main .rounded-table-card .table td {
    color: #f9fafb;
}

[data-bs-theme="dark"] .sale-refund-form-main .rounded-table-card .table tbody tr {
    border-bottom-color: #4b5563;
}

[data-bs-theme="dark"] .sale-refund-form-main .rounded-table-card .table tbody tr:hover {
    background-color: #4b5563;
}

[data-bs-theme="dark"] .sale-refund-form-main .form-control {
    background-color: #374151;
    border-color: #4b5563;
    color: #f9fafb;
}

[data-bs-theme="dark"] .sale-refund-form-main .form-control:focus {
    background-color: #374151;
    border-color: #3b82f6;
    color: #f9fafb;
}

[data-bs-theme="dark"] .sale-refund-form-main .input-group:focus-within {
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

[data-bs-theme="dark"] .sale-refund-form-main .input-group:focus-within .form-control {
    border-color: #3b82f6;
}

/* Dark Theme - Total Amount Display */
[data-bs-theme="dark"] .sale-refund-form-main .total-amount {
    background-color: #1f2937;
    border-color: #374151;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

[data-bs-theme="dark"] .sale-refund-form-main .total-amount .text-success {
    color: #10b981 !important;
}

[data-bs-theme="dark"] .sale-refund-form-main .total-amount .text-danger {
    color: #ef4444 !important;
}

[data-bs-theme="dark"] .sale-refund-form-main .input-group-text {
    background-color: #374151;
    border-color: #4b5563;
    color: #d1d5db;
}

[data-bs-theme="dark"] .sale-refund-form-main .refund-amount-section {
    border-bottom-color: #4b5563;
}

[data-bs-theme="dark"] .sale-refund-form-main .refund-amount-label {
    color: #d1d5db;
}

[data-bs-theme="dark"] .sale-refund-form-main .refund-amount-value {
    color: #f9fafb;
}

[data-bs-theme="dark"] .sale-refund-form-main .btn-outline-secondary {
    border-color: #6b7280;
    color: #d1d5db;
    background-color: #374151;
}

[data-bs-theme="dark"] .sale-refund-form-main .btn-outline-secondary:hover {
    background-color: #4b5563;
    border-color: #9ca3af;
    color: #f9fafb;
}

[data-bs-theme="dark"] .sale-refund-form-main .btn-dark {
    background-color: #f9fafb;
    border-color: #f9fafb;
    color: #1f2937;
}

[data-bs-theme="dark"] .sale-refund-form-main .btn-dark:hover {
    background-color: #e5e7eb;
    border-color: #e5e7eb;
    color: #1f2937;
}

[data-bs-theme="dark"] .sale-refund-form-main .table-footer {
    background-color: #374151;
    border-top-color: #4b5563;
}

[data-bs-theme="dark"] .sale-refund-form-main .table-footer-info {
    color: #d1d5db;
}

[data-bs-theme="dark"] .sale-refund-form-main .table-footer-total {
    color: #f9fafb;
}

[data-bs-theme="dark"] .sale-refund-form-main .table-footer-total span {
    color: #d1d5db;
}

[data-bs-theme="dark"] .sale-refund-form-main .form-check-input {
    background-color: #4b5563;
    border-color: #6b7280;
    color: #d1d5db;
}

[data-bs-theme="dark"] .sale-refund-form-main .form-check-input:checked {
    background-color: #3b82f6;
    border-color: #3b82f6;
}

[data-bs-theme="dark"] .sale-refund-form-main .form-check-input:focus {
    border-color: #3b82f6;
}

[data-bs-theme="dark"] .sale-refund-form-main .quantity-input-group {
    border-color: #4b5563;
    background-color: #374151;
}

[data-bs-theme="dark"] .sale-refund-form-main .quantity-btn {
    background-color: #4b5563;
    color: #d1d5db;
}

[data-bs-theme="dark"] .sale-refund-form-main .quantity-btn:hover {
    background-color: #6b7280;
    color: #f9fafb;
}

[data-bs-theme="dark"] .sale-refund-form-main .quantity-btn:first-child {
    border-right-color: #6b7280;
}

[data-bs-theme="dark"] .sale-refund-form-main .quantity-btn:last-child {
    border-left-color: #6b7280;
}

[data-bs-theme="dark"] .sale-refund-form-main .quantity-input {
    background-color: #374151;
    color: #f9fafb;
}

[data-bs-theme="dark"] .sale-refund-form-main .form-switch .form-check-input {
    background-color: #4b5563;
    border-color: #6b7280;
}

[data-bs-theme="dark"] .sale-refund-form-main .form-switch .form-check-input:checked {
    background-color: #3b82f6;
    border-color: #3b82f6;
}

[data-bs-theme="dark"] .sale-refund-form-main .form-check-label {
    color: #d1d5db;
}

[data-bs-theme="dark"] .sale-refund-form-main .price-details .price-label {
    color: #d1d5db;
}

[data-bs-theme="dark"] .sale-refund-form-main .price-details .price-value {
    color: #f9fafb;
}

[data-bs-theme="dark"] .sale-refund-form-main .price-row.total-row {
    border-top-color: #4b5563;
}

[data-bs-theme="dark"] .sale-refund-form-main .quantity-details .quantity-label {
    color: #d1d5db;
}

[data-bs-theme="dark"] .sale-refund-form-main .quantity-details .quantity-value {
    color: #f9fafb;
}

[data-bs-theme="dark"] .sale-refund-form-main .quantity-row.available-row {
    border-top-color: #4b5563;
}
 /* Sale Refund Page Styles - Based on Neutral Design end*/


 .modern-style-nodata {
    --neutral-900: #171717;
    --neutral-800: #262626;
    --neutral-700: #404040;
    --neutral-600: #525252;
    --neutral-500: #737373;
    --neutral-400: #a3a3a3;
    --neutral-300: #d4d4d4;
    --neutral-200: #e5e5e5;
    --neutral-150: #eeeeee;
    --neutral-100: #f5f5f5;
    --card-bg: #ffffff;
    --card-border: var(--neutral-200);
    --page-bg: #ffffff;
    }
 /* Tailwind-like neutral palette helpers (light) */
/* Dark theme overrides using Bootstrap 5.3 color mode */
[data-bs-theme="dark"] .modern-style-nodata {
--neutral-900: #fafafa;
--neutral-800: #e5e5e5;
--neutral-700: #d4d4d4;
--neutral-600: #a3a3a3;
--neutral-500: #8d8d8d;
--neutral-400: #6b7280;
--neutral-300: #4b5563;
--neutral-200: #374151;
--neutral-150: #2f3640;
--neutral-100: #1f2937;
--card-bg: #1a1a2e; /* slate-900-ish */
--card-border: #1e293b; /* slate-800-ish */
--page-bg: #0b1020; /* deep background */
}


.modern-style-nodata .text-neutral-900 { color: var(--neutral-900) !important; }
.modern-style-nodata .text-neutral-600 { color: var(--neutral-600) !important; }
.modern-style-nodata .text-neutral-500 { color: var(--neutral-500) !important; }
.modern-style-nodata .text-neutral-400 { color: var(--neutral-400) !important; }
.modern-style-nodata .border-neutral-200 { border-color: var(--card-border) !important; }
.modern-style-nodata .bg-neutral-100 { background-color: var(--neutral-100) !important; }


/* Card polish */
.modern-style-nodata.account-card { border-radius: .75rem; background-color: var(--card-bg); }
.modern-style-nodata .icon-circle { width: 64px; height: 64px; }

/* Modern no-data style: apply to .modern-style-nodata and .croot parents */
.modern-style-nodata p.text-neutral-500, .modern-style-nodata p.text-neutral-500 { font-size: 0.95rem; font-weight: 500; }
.modern-style-nodata p.text-neutral-400, .modern-style-nodata p.text-neutral-400 { font-size: 0.8rem; letter-spacing: 0.2px; }
.modern-style-nodata .icon-circle, .modern-style-nodata .icon-circle {
background: linear-gradient(135deg, var(--neutral-150), var(--neutral-100));
box-shadow: inset 0 1px 3px rgba(0,0,0,0.08);
}
[data-bs-theme="dark"] .modern-style-nodata .icon-circle,
[data-bs-theme="dark"] .modern-style-nodata .icon-circle {
background: linear-gradient(135deg, #0b1223, #1a1a2e);
box-shadow: inset 0 1px 2px rgba(255,255,255,0.04);
}



/** dark theme**/
[data-bs-theme=dark]:root  {
--bs-body-bg-in: #202936;
--fc-page-bg-color: #202936;
--bs-body-bg-color-in: #7c8fac;
--bs-primary: #2563eb;
--bs-primary-rgb: 37, 99, 235;
--bs-light-primary: rgba(37, 99, 235, 0.1);
--bs-primary-bg-subtle: rgba(37, 99, 235, 0.1);
--bs-secondary: #007bbd;
--bs-secondary-rgb: 0, 123, 189;
--bs-light-secondary: rgba(0, 123, 189, 0.1);
--bs-secondary-bg-subtle: rgba(0, 123, 189, 0.1);
--bs-secondary-bg-subtle-color: 124, 143, 172;
--bs-text-opacity: 1;
--bs-image-color: brightness(0) saturate(100%) invert(61%) sepia(31%) saturate(328%) hue-rotate(177deg) brightness(87%) contrast(84%);
}
[data-bs-theme=dark] .body-wrapper, [data-bs-theme=dark] .page-wrapper { background: #202936 !important; }
[data-bs-theme=dark] .tab-menu-top-pills { background-color: var(--bs-primary-bg-subtle) !important;}
[data-bs-theme=dark] .tab-menu-top-pills .tab-menu-top-pills li a, .tab-menu-top-pills li .nav-link {  color: rgba(var(--bs-primary-rgb),var(--bs-text-opacity))!important;}
[data-bs-theme=dark] .highcharts-axis-labels, [data-bs-theme=dark] .highcharts-axis-labels text, [data-bs-theme=dark] .highcharts-axis, [data-bs-theme=dark] .highcharts-axis text, [data-bs-theme=dark] .highcharts-legend-item, [data-bs-theme=dark] .highcharts-legend-item text {   color: rgba(var(--bs-secondary-bg-subtle-color),var(--bs-text-opacity))!important; fill:rgba(var(--bs-secondary-bg-subtle-color),var(--bs-text-opacity)) !important;}
[data-bs-theme=dark] .highcharts-legend-box, [data-bs-theme=dark] .highcharts-button-box {background: var(--bs-light-secondary) !important; fill: var(--bs-light-secondary) !important;}
[data-bs-theme=dark] .highcharts-grid path {stroke: var(--bs-light-secondary) !important;}
[data-bs-theme=dark] .highcharts-menu { color: rgba(var(--bs-secondary-bg-subtle-color),var(--bs-text-opacity))!important; border-color:rgba(var(--bs-primary-rgb),var(--bs-text-opacity)) !important; background: var(--bs-body-bg-in) !important; }
[data-bs-theme=dark] .highcharts-menu li { color: rgba(var(--bs-secondary-bg-subtle-color),var(--bs-text-opacity))!important; border-color:rgba(var(--bs-primary-rgb),var(--bs-text-opacity)) !important; }
[data-bs-theme=dark] .highcharts-menu li:hover {background: var(--bs-light-secondary) !important;}
[data-bs-theme=dark] .highcharts-title {color: var(--bs-body-bg-color-in) !important; fill: var(--bs-body-bg-color-in) !important;}
[data-bs-theme=dark] .reports-card-border-head.reports-card-head, [data-bs-theme=dark] .reports-card-border-head.reports-card-head h2 { color: rgba(var(--bs-secondary-bg-subtle-color),var(--bs-text-opacity))!important; border-color:rgba(var(--bs-secondary-bg-subtle-color),var(--bs-text-opacity)) !important; }
[data-bs-theme=dark] .calendar-modal-form-cont { background: transparent !important; }
[data-bs-theme=dark] .select2-container--default .select2-selection--single .select2-selection__placeholder {   color: rgba(var(--bs-secondary-bg-subtle-color),var(--bs-text-opacity))!important;}
[data-bs-theme=dark] .clientAptcont h4, [data-bs-theme=dark] .clientAptcont p,  [data-bs-theme=dark] .clientViewTitle span, [data-bs-theme=dark] .clientListCont h2, [data-bs-theme=dark] .clientListCont h3, [data-bs-theme=dark] .clientListCont ul li, [data-bs-theme=dark] .liabilitiesCont p, [data-bs-theme=dark] .clientListProfile h3, [data-bs-theme=dark] .clientListProfile p, [data-bs-theme=dark] .clientListProfile ul li, [data-bs-theme=dark] .optInStatus span small, [data-bs-theme=dark] .clientRating h4, [data-bs-theme=dark] .clientID h5, [data-bs-theme=dark] .cardParagh p, [data-bs-theme=dark] .cardNumber p {color: var(--bs-body-bg-color-in) !important;  }
[data-bs-theme=dark] .table-responsive .dataTables_wrapper select {background-color: #333f55; border-color: #333f55;  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%237c8fac' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");}
[data-bs-theme=dark] .form-check-input:not(:checked) {background-color: #333f55;}
[data-bs-theme=dark]  .select2-container--default .select2-selection--single .select2-selection__arrow b {background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%237c8fac' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;}
[data-bs-theme=dark] .table-responsive .dataTables_wrapper .dataTables_filter input[type="search"] {background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="13.331" height="13.331" viewBox="0 0 13.331 13.331"><path id="SEARCH" d="M6.666,2a4.666,4.666,0,1,0,3.049,8.186L10,10.47v.862l4,4L15.331,14l-4-4H10.47l-.284-.284A4.656,4.656,0,0,0,6.666,2Zm0,1.333A3.333,3.333,0,1,1,3.333,6.666,3.323,3.323,0,0,1,6.666,3.333Z" transform="translate(-2 -2)" fill="%237c8fac"/></svg>') !important;}
[data-bs-theme=dark] .reports-card { border-color:rgba(var(--bs-secondary-bg-subtle-color),var(--bs-text-opacity)) !important; }
[data-bs-theme=dark] .reports-card-border-head.reports-card-head {  border-color: rgba(var(--bs-secondary-bg-subtle-color),var(--bs-text-opacity)) !important;}
[data-bs-theme=dark] .text-black { color: var(--bs-body-bg-color-in) !important;}
[data-bs-theme=dark] .dt-button label {color:var(--bs-body-bg-color-in)  !important;}




/*** fullcalendar***/
[data-bs-theme=dark] .calendar-new-lft { background: var(--bs-body-bg) !important; }
[data-bs-theme=dark] .filter-accordion-cont .card { background-color: var(--bs-secondary-bg-subtle) !important; }
[data-bs-theme=dark] .filter-accordion-cont .card-heading>a { color: var(--bs-body-bg-color-in) !important; }
[data-bs-theme=dark] .ui-widget.ui-widget-content {background-color:var(--bs-body-bg) !important;}
[data-bs-theme=dark] .ui-widget.ui-widget-content .ui-menu-item-wrapper{color: var(--bs-body-bg-color-in) !important;}
[data-bs-theme=dark] .ui-widget.ui-widget-content .ui-menu-item:hover .ui-menu-item-wrapper{color: #fff !important;}
[data-bs-theme=dark] .calendar-new-lft-btm .ui-widget.ui-widget-content {background-color: var(--bs-secondary-bg-subtle) !important;}
[data-bs-theme=dark] .ui-datepicker .ui-datepicker-next .ui-icon {background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="12.471" height="20" viewBox="0 0 12.471 20"><path id="EXPAND:DOWN" d="M8.4,9.5,5.93,11.971l10,10,10-10L23.459,9.5,15.93,17.029Z" transform="translate(-9.5 25.93) rotate(-90)" fill="%237c8fac"/></svg>')!important;}
[data-bs-theme=dark] .ui-datepicker .ui-datepicker-prev .ui-icon { background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="12.471" height="20" viewBox="0 0 12.471 20"><path id="EXPAND:DOWN" d="M8.4,9.5,5.93,11.971l10,10,10-10L23.459,9.5,15.93,17.029Z" transform="translate(21.971 -5.93) rotate(90)" fill="%237c8fac"/></svg>')!important; }
[data-bs-theme=dark] .ui-state-default, [data-bs-theme=dark] .ui-widget-content .ui-state-default, [data-bs-theme=dark] .ui-widget-header .ui-state-default {color: #918b8b !important;}
[data-bs-theme=dark] .ui-datepicker th {color: var(--bs-body-bg-color-in) !important;}
[data-bs-theme=dark] .ui-state-active, [data-bs-theme=dark] .ui-widget-content .ui-state-active, [data-bs-theme=dark] .ui-widget-header .ui-state-active, [data-bs-theme=dark] a.ui-button:active, [data-bs-theme=dark] .ui-button:active, [data-bs-theme=dark] .ui-button.ui-state-active:hover {color: #fff !important;}
[data-bs-theme=dark] .ui-datepicker-calendar thead tr {border-color:var(--bs-body-bg-color-in)!important;}
[data-bs-theme=dark] .filter-accordion-cont .card-heading>a:before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9.867' height='5.945' viewBox='0 0 9.867 5.945'%3E%3Cpath id='arrow_forward_ios_FILL1_wght400_GRAD0_opsz48' d='M13.357,13.452a.488.488,0,0,1-.133-.324.424.424,0,0,1,.133-.324L17,9.16,13.357,5.517a.452.452,0,0,1-.133-.318.458.458,0,0,1,.781-.341l4.06,4.06a.352.352,0,0,1,.081.116.361.361,0,0,1,0,.254.352.352,0,0,1-.081.116l-4.06,4.06a.432.432,0,0,1-.318.127A.45.45,0,0,1,13.357,13.452Z' transform='translate(14.091 -12.724) rotate(90)' fill='%237c8fac' stroke='%237c8fac' stroke-width='1'/%3E%3C/svg%3E%0A"); }
[data-bs-theme=dark] .ui-datepicker-title .ui-datepicker-month, [data-bs-theme=dark] .ui-datepicker-title .ui-datepicker-year {color: var(--bs-body-bg-color-in) !important; background: none !important;}
[data-bs-theme=dark] .ui-datepicker-title select.ui-datepicker-month, [data-bs-theme=dark] .ui-datepicker-title select.ui-datepicker-year { border-color: #333f55 !important; color: #7c8fac !important; background-color: #202936 !important;}
[data-bs-theme=dark] .pac-container {border:1px solid #333f55 !important; color: #7c8fac !important; background-color: #202936 !important;}
[data-bs-theme=dark] .pac-container>div {border-color: #333f55 !important; color: #7c8fac !important; background-color: #202936 !important;}
[data-bs-theme=dark] .pac-container>div * {color: #7c8fac !important; }
[data-bs-theme=dark] .pac-container .hdpi.pac-logo:after{filter: brightness(0) saturate(100%) invert(57%) sepia(7%) saturate(1329%) hue-rotate(177deg) brightness(96%) contrast(88%);}
[data-bs-theme=dark] .pac-container .dismissButton  {border-color: #333f55 !important; background-color: var(--bs-secondary-bg-subtle) !important; color: #7c8fac !important; }
[data-bs-theme=dark] .btn.disabled, [data-bs-theme=dark] .btn:disabled, [data-bs-theme=dark] fieldset:disabled .btn { color: #b2b6bc; pointer-events: none; background-color: transparent; border-color: #b2b6bc; }
[data-bs-theme=dark] .accord-module.accord-gray-roles .accordion-button {color: var(--bs-body-bg-color-in) !important;}
[data-bs-theme=dark] .calendarNew .form-control { background-color: var(--bs-secondary-bg-subtle) !important; color: var(--bs-body-bg-color-in) !important;}
[data-bs-theme=dark] .calendarNew label { color: var(--bs-body-bg-color-in) !important; }
[data-bs-theme=dark] .paragh12 { color: var(--bs-body-bg-color-in) !important; }
[data-bs-theme=dark] .borderTop .btn-outline-light {background: #e0e0e0 !important;}
[data-bs-theme=dark] .leftList { color: var(--bs-body-bg-color-in) !important;}
[data-bs-theme=dark] .leftList .btn-primary { background: var(--bs-body-bg) !important; border-color: var(--bs-body-bg-color-in) !important;}
[data-bs-theme=dark] .leftList .btn-primary img { filter: none !important;}
[data-bs-theme=dark] .reviewslit-data-item-tile, [data-bs-theme=dark] .reviewslit-data-item-content, [data-bs-theme=dark] .ions-cont-review-txt {color: var(--bs-body-bg-color-in) !important;}
[data-bs-theme=dark] .ions-cont-review-icon img[alt="happy"] {filter: brightness(0) saturate(100%) invert(55%) sepia(33%) saturate(293%) hue-rotate(177deg) brightness(95%) contrast(88%);}




/* #202936 */


/* [data-bs-theme=dark] #viewChange { background-color: var(--bs-primary-bg-subtle) !important; } */
[data-bs-theme=dark] .calendar-head { background: var(--bs-body-bg) !important; color: var(--bs-body-bg-color-in) !important; border:0 !important;  border-top:1px solid var(--bs-body-bg-color-in)!important;}
[data-bs-theme=dark] .calendar-menu { filter: brightness(0) saturate(100%) invert(61%) sepia(31%) saturate(328%) hue-rotate(177deg) brightness(87%) contrast(84%); }
/* [data-bs-theme=dark] .calendar-head .calendar-menu img { filter: brightness(0) saturate(100%) invert(61%) sepia(31%) saturate(328%) hue-rotate(177deg) brightness(87%) contrast(84%); } */
[data-bs-theme=dark] .fc-toolbar-ltr .fc-toolbar-title, [data-bs-theme=dark] .fc-toolbar-title {color: var(--bs-body-bg-color-in) !important; }
[data-bs-theme=dark] .fc-toolbar-ltr .fc-button {background: var(--bs-secondary-bg-subtle) !important; color: #ffffff !important; }
[data-bs-theme=dark] .fc-toolbar-ltr .fc-button:before, [data-bs-theme=dark] .fc-toolbar-ltr .fc-button:after {filter: brightness(0) saturate(100%) invert(97%) sepia(100%) saturate(1%) hue-rotate(346deg) brightness(103%) contrast(101%) !important; }
[data-bs-theme=dark] .fc-col-header-cell .fc-scrollgrid-sync-inner{background-color: var(--bs-primary-bg-subtle) !important;}
[data-bs-theme=dark] .fc-scrollgrid-section {background-color: var(--bs-primary-bg-subtle) !important; color: rgba(var(--bs-primary-rgb),var(--bs-text-opacity))!important;}
[data-bs-theme=dark] .fc .fc-col-header-cell-cushion , [data-bs-theme=dark] .resource-head-title{color: var(--bs-body-bg-color-in) !important;}
[data-bs-theme=dark] .fc-theme-standard td, [data-bs-theme=dark] .fc-theme-standard th, [data-bs-theme=dark] .fc-theme-standard .fc-scrollgrid{border-color: var(--bs-body-bg-color-in)!important;}
[data-bs-theme=dark] .fc .fc-timegrid-axis-frame {background: var(--bs-body-bg-in) !important;}
[data-bs-theme=dark] .fc .fc-scrollgrid-section-sticky>* {background: #000 !important;}
[data-bs-theme=dark] .fc .fc-view,[data-bs-theme=dark] .fc .fc-timegrid-axis-chunk {background: var(--bs-body-bg-in) !important; color: var(--bs-body-bg-color-in) !important;}
[data-bs-theme=dark] .fc .fc-timegrid-slot-label-cushion { color: var(--bs-body-bg-color-in) !important;}
[data-bs-theme=dark] .fc .fc-timegrid-col, [data-bs-theme=dark] .fc .fc-timegrid-col.fc-day-today, [data-bs-theme=dark] .fc th.fc-timegrid-axis { background: var(--bs-body-bg-in) !important;}
[data-bs-theme=dark] .fc .fc-non-business { background: rgb(106 103 103 / 80%) !important;}
[data-bs-theme=dark] #contextMenu .dropdown-menu, [data-bs-theme=dark] #contextMenuEventChk .dropdown-menu, [data-bs-theme=dark] #classMenuCheck .dropdown-menu, [data-bs-theme=dark] #blockMenuCheck .dropdown-menu {background-color: #2e343d !important; color: #fff !important; border:1px solid var(--bs-body-bg-color-in)!important;}
[data-bs-theme=dark] #contextMenu .dropdown-menu a, [data-bs-theme=dark] #contextMenuEventChk .dropdown-menu a, [data-bs-theme=dark] #classMenuCheck .dropdown-menu a, [data-bs-theme=dark] #blockMenuCheck .dropdown-menu a { color: #fff !important; }
[data-bs-theme=dark] .modal.aptNewModal .modal-dialog {background: #202936 !important;}
[data-bs-theme=dark] .contact-details-inner {color: #fff !important;}
[data-bs-theme=dark] .editaptmembers .form-check::before {color: #fff !important; border-color: #fff !important; }
[data-bs-theme=dark] .fc-resourceTimelineWeek-view.fc-view .topHeaderDate, [data-bs-theme=dark] .fc-resourceTimelineWeek-view.fc-view .topHeaderDate small {color:rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1)) !important; }
[data-bs-theme=dark] .fc-resourceTimelineWeek-view.fc-view .fc-day-today .topHeaderDate small, [data-bs-theme=dark] .fc-resourceTimelineWeek-view.fc-view .fc-day-today .topHeaderDate {color:#fff !important; }


/*ediotr dark*/
[data-bs-theme=dark] .fr-toolbar {color: #FFF;  background: #353535; }
[data-bs-theme=dark] .smallfroalaEditor .fr-toolbar .fr-command.fr-btn, [data-bs-theme=dark] .smallfroalaEditor .fr-toolbar .fr-btn {background: transparent !important; border-color: transparent !important;}
[data-bs-theme=dark] .smallfroalaEditor .fr-toolbar .fr-command.fr-btn:hover, [data-bs-theme=dark] .smallfroalaEditor .fr-toolbar .fr-btn:hover {  background: #424242 !important; }
[data-bs-theme=dark] .smallfroalaEditor .fr-toolbar .fr-command.fr-btn i, [data-bs-theme=dark] .smallfroalaEditor .fr-toolbar .fr-btn i, [data-bs-theme=dark] .smallfroalaEditor .fr-toolbar .fr-command.fr-btn svg, [data-bs-theme=dark] .smallfroalaEditor .fr-toolbar .fr-btn svg {color: #fff !important;}
[data-bs-theme=dark] .fr-toolbar .fr-command.fr-btn svg path, [data-bs-theme=dark] .fr-popup .fr-command.fr-btn svg path, [data-bs-theme=dark] .fr-modal .fr-command.fr-btn svg path {fill: #fff !important;}
[data-bs-theme=dark] .fr-toolbar .fr-more-toolbar {background-color: #686868;}
[data-bs-theme=dark] .fr-command.fr-btn+.fr-dropdown-menu .fr-dropdown-wrapper .fr-dropdown-content ul.fr-dropdown-list li a {color: #000;}
[data-bs-theme=dark] .fr-toolbar .fr-command.fr-btn.fr-open:not(:hover):not(:focus):not(:active) {background: #686868;}
[data-bs-theme=dark] .fr-toolbar .fr-command.fr-btn.fr-dropdown.fr-active, [data-bs-theme=dark] .fr-popup .fr-command.fr-btn.fr-dropdown.fr-active, [data-bs-theme=dark] .fr-modal .fr-command.fr-btn.fr-dropdown.fr-active {background: #686868;}
[data-bs-theme=dark] .fr-toolbar {border-color: #686868;}
[data-bs-theme=dark] .fr-toolbar .fr-newline {background: #686868;}
[data-bs-theme=dark] .fr-desktop .fr-command:hover:not(.fr-table-cell), [data-bs-theme=dark] .fr-desktop .fr-btn:hover:not(.fr-table-cell), [data-bs-theme=dark] .fr-desktop .fr-command:focus:not(.fr-table-cell), [data-bs-theme=dark] .fr-desktop .fr-command.fr-btn-hover:not(.fr-table-cell), [data-bs-theme=dark] .fr-desktop .fr-command.fr-expanded:not(.fr-table-cell) {  background: #424242 !important;}

[data-bs-theme=dark] .version-text {  color: var(--bs-body-bg-color-in) !important; }
[data-bs-theme=dark] .fr-wrapper .fr-popup.fr-desktop.fr-active .fr-command.fr-btn svg path{fill: #000000 !important;}
[data-bs-theme=dark] .fr-wrapper .fr-popup.fr-desktop.fr-active .fr-btn:hover{background: #cfcfcf !important;}


[data-bs-theme=dark] .tabs_wrapper ul.tabs li { border-color: rgba(var(--bs-secondary-bg-subtle-color), var(--bs-text-opacity)) !important; background-color: var(--bs-table-bg); color: #eaeff4 !important;
--bs-card-subtitle-color: #7c8fac;  --bs-card-box-shadow: rgba(145, 158, 171, 0.3) 0px 0px 2px 0px, rgba(145, 158, 171, 0.02) 0px 12px 24px -4px;}
[data-bs-theme=dark] .pos-category5 h6, [data-bs-theme=dark] .pos-categories h5 a, [data-bs-theme=dark] .pos-categories h6 a, [data-bs-theme=dark] .order-list h5 a, [data-bs-theme=dark] .order-list h6 a {color: #eaeff4 !important;}
[data-bs-theme=dark] .tabs_wrapper ul.tabs li.active {border-color: #FE9F43 !important;}
[data-bs-theme=dark] .pos-page {background-color: #202936 !important; color: #7c8fac !important;}
[data-bs-theme=dark] .tab-wrap {border-right: 1px solid var(--bs-border-color) !important;}
[data-bs-theme=dark] .bg-secondary-transparent, [data-bs-theme=dark] .pos-products .product-info {background-color: var(--bs-primary-bg-subtle) !important;}
[data-bs-theme=dark] .pos-products .product-info {border-color: rgba(var(--bs-secondary-bg-subtle-color), var(--bs-text-opacity)) !important;}
[data-bs-theme=dark] .product-order-list .card {background-color: var(--bs-primary-bg-subtle) !important;}
[data-bs-theme=dark] .order-total.bg-total.bg-white { background-color: transparent !important;}
[data-bs-theme=dark] aside.product-order-list .payment-method .methods .payment-item {color: #eaeff4 !important;}
[data-bs-theme=dark] .pos-products .product-info .pro-img {background-color: var(--bs-primary-bg-subtle) !important;}
[data-bs-theme=dark] .customer-item h6 {color: #7c8fac !important;}