@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Tajawal:wght@200;300;400;500;700;800;900&display=swap');





.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #8000fa;
  --bs-btn-border-color: #8000fa;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #8000fa;
  --bs-btn-hover-border-color: #8000fa;
  --bs-btn-focus-shadow-rgb: 49,132,253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #8000fa;
  --bs-btn-active-border-color: #8000fa;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0,0,0,.125);
  --bs-btn-disabled-color: #333;
  --bs-btn-disabled-bg: #d8d8d8;
  --bs-btn-disabled-border-color: #d8d8d8;
}


.btn-primary-light {
  --bs-btn-color: #fff;
  --bs-btn-bg: #ec0bc1;
  --bs-btn-border-color: #ec0bc1;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #ec0bc1;
  --bs-btn-hover-border-color: #ec0bc1;
  --bs-btn-focus-shadow-rgb: 130,138,145;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #ec0bc1;
  --bs-btn-active-border-color: #ec0bc1;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0,0,0,.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #6c757d;
}
.btn-primary-light, .btn-primary-light:not(:disabled):not(.disabled):not(.btn-link):not(.btn-danger):active, .btn-primary-light:not(:disabled):not(.disabled):not(.btn-link):not(.btn-danger):active:focus, .btn-primary-light:not(:disabled):not(.disabled):not(.btn-link):not(.btn-danger):focus, .btn-primary-light:not(:disabled):not(.disabled):not(.btn-link):not(.btn-danger):hover {
  background-color: var(--bs-btn-bg);
  color: var(--bs-btn-color);
}

.btn-secondary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #333;
  --bs-btn-border-color: #333;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #333;
  --bs-btn-hover-border-color: #333;
  --bs-btn-focus-shadow-rgb: 130,138,145;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #333;
  --bs-btn-active-border-color: #333;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0,0,0,.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #6c757d;
}

.btn-info {
  --bs-btn-color: #fff;
  --bs-btn-bg: #0aacff;
  --bs-btn-border-color: #0aacff;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #0aacff;
  --bs-btn-hover-border-color: #0aacff;
  --bs-btn-focus-shadow-rgb: 130,138,145;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #0aacff;
  --bs-btn-active-border-color: #0aacff;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0,0,0,.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #6c757d;
}




.badge.badge-primary {
  background-color: var(--badge-primary-bg);
  box-shadow: var(--badge-primary-box-shadow);
  color: var(--badge-primary-color);
}
.badge.badge-info {
  background-color: var(--blue-100);
  color: var(--blue-700);
}

.badge.badge-primary.association {
  background-color: var(--violet-50);
  color: var(--violet-800);
}

.badge.badge-primary.draft {
  background-color: var(--neutral-gray-200);
  box-shadow: var(--neutral-gray-700);
  color: var(--neutral-gray-700);
}

.badge.badge-primary.waiting {
  background-color: var(--yellow-200);
  box-shadow: var(--yellow-700);
  color: var(--yellow-700);
}

.badge.badge-primary.validated {
  background-color: var(--lime-200);
  box-shadow: var(--lime-700);
  color: var(--lime-700);
}

.badge.badge-primary.prepared {
  background-color: var(--cyan-200);
  box-shadow: var(--cyan-700);
  color: var(--cyan-700);
}

.badge.badge-primary.partially_prepared {
  background-color: var(--cyan-100);
  box-shadow: var(--cyan-800);
  color: var(--cyan-800);
}

.badge.badge-primary.completed {
  background-color: var(--green-200);
  box-shadow: var(--green-700);
  color: var(--green-700);
}

.badge.badge-primary.canceled {
  background-color: var(--red-200);
  box-shadow: var(--red-700);
  color: var(--red-700);
}

.badge.badge-primary.failed {
  background-color: var(--rose-200);
  box-shadow: var(--rose-700);
  color: var(--rose-700);
}

.badge.badge-primary.lost {
  background-color: var(--amber-200);
  box-shadow: var(--amber-700);
  color: var(--amber-700);
}

.badge.badge-primary.reserved {
  background-color: var(--indigo-200);
  box-shadow: var(--indigo-700);
  color: var(--indigo-700);
}

.badge.badge-primary.shipped {
  background-color: var(--blue-200);
  box-shadow: var(--blue-700);
  color: var(--blue-700);
}

.badge.badge-primary.damaged {
  background-color: var(--red-100);
  box-shadow: var(--red-800);
  color: var(--red-800);
}

.badge.badge-primary.received {
  background-color: var(--teal-200);
  box-shadow: var(--teal-700);
  color: var(--teal-700);
}

.badge.badge-primary.returned {
  background-color: var(--orange-200);
  box-shadow: var(--orange-700);
  color: var(--orange-700);
}

.badge.badge-primary.in_transit {
  background-color: var(--purple-200);
  box-shadow: var(--purple-700);
  color: var(--purple-700);
}

.badge.badge-primary.arrived {
  background-color: var(--emerald-200);
  box-shadow: var(--emerald-700);
  color: var(--emerald-700);
}

.badge.badge-primary.partially_arrived {
  background-color: var(--emerald-100);
  box-shadow: var(--emerald-800);
  color: var(--emerald-800);
}

.badge.badge-primary.accidented {
  background-color: var(--rose-100);
  box-shadow: var(--rose-800);
  color: var(--rose-800);
}


.navbar-dark .nav-link {
  color: #ffffff;
  display: block;
  font-size: 12px;
  font-weight: bold;
  /* padding: var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x); */
  /* transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out; */
}

.navbar-dark .nav-link .badge{
  position: absolute;
  top: -5px;
  right: 0;
  padding: 0px 6px;
  min-width: 25px;
  font-size: 7px;
  font-weight: 400;
  padding: 0px 6px;
}

.navbar-dark .nav-link .badge.badge-success{
  background-color: #2ecc703c;
  color: #2ecc70;
}


.form-tabs-tablist .nav-tabs .nav-link.active:after {
  background: #0aacff;
  bottom: -2px;
  content: "";
  height: 2px;
  left: var(--form-tabs-gutter-x);
  position: absolute;
  width: calc(100% - var(--form-tabs-gutter-x)* 2);
}

.form-tabs-tablist .nav-tabs .nav-link.active {
  background: transparent;
  color: #0aacff;
  position: relative;
}



:root {
  --animate-duration: 1s;
  --animate-delay: 1.5s;
}

@keyframes zoomFadeIn {
  0% {
    transform: scale(0.8); /* Start at 40% size */
    opacity: 0;           /* Fully transparent */
  }
  
  100% {
    transform: scale(1);  /* End at 100% size */
    opacity: 1;           /* Fully visible */
  }
}

.animate__customZoomIn {
  animation: zoomFadeIn 0.3s ease-in-out; /* Adjust duration and easing as needed */
}


/* .editable-association span{
  cursor: pointer;
} */

.editable-update {
  position: relative;
  background-color: #e2ffaf50 !important; /* Light green for success */
  transition: background-color 1s ease; /* Smooth transition */
  font-weight: 600;
  color: #000000 !important;
}

.editable-update::after {
  content: "*"; /* The marker to display */
  position: absolute; /* Position relative to the parent element */
  top: 10px; /* Align to the top */
  right: 10px; /* Align to the right */
  color: rgb(119, 0, 255); /* Optional: Set color of the marker */
  font-size: 12px; /* Optional: Adjust size of the marker */
  transform: translate(50%, -50%); /* Optional: Adjust alignment to appear slightly outside the corner */
}


.editable-failed {
  background-color: #edd4d45d !important; /* Light green for success */
  transition: background-color 1s ease; /* Smooth transition */
}


.editable,.editable-association{
  cursor:pointer;
}


.scroll-container .simplebar-track.horizontal {
  position: absolute;
  bottom: 100%;
  top: auto;
  height: 8px;
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  transition: opacity 0.3s ease;
}


[contenteditable="true"] {
  background-color: #fe00ff !important; /* Keep light yellow on focus */
  border: none; /* Custom dashed border */
  outline: none; /* Remove default focus outline */
  padding: 10px;
  font-weight: 600;
  color: #000000 !important;
}
[contenteditable="true"]:focus {
  background-color: #fe00ff !important; /* Keep light yellow on focus */
  border: none; /* Custom dashed border */
  outline: none; /* Remove default focus outline */
  padding: 10px;
  color: #000000 !important;
}

[contenteditable="true"]:hover {
  background-color: #ff00ffcf !important; /* Slightly darker yellow on hover */
}

:root {

  --bs-dropdown-font-size:0.675rem;

  --black: #000;
  --white: #fff;
  --rose-50: #fff1f2;
  --rose-100: #ffe4e6;
  --rose-200: #fecdd3;
  --rose-300: #fda4af;
  --rose-400: #fb7185;
  --rose-500: #f43f5e;
  --rose-600: #e11d48;
  --rose-700: #be123c;
  --rose-800: #9f1239;
  --rose-900: #881337;
  --pink-50: #fdf2f8;
  --pink-100: #fce7f3;
  --pink-200: #fbcfe8;
  --pink-300: #f9a8d4;
  --pink-400: #f472b6;
  --pink-500: #ec4899;
  --pink-600: #db2777;
  --pink-700: #be185d;
  --pink-800: #9d174d;
  --pink-900: #831843;
  --fuchsia-50: #fdf4ff;
  --fuchsia-100: #fae8ff;
  --fuchsia-200: #f5d0fe;
  --fuchsia-300: #f0abfc;
  --fuchsia-400: #e879f9;
  --fuchsia-500: #d946ef;
  --fuchsia-600: #c026d3;
  --fuchsia-700: #a21caf;
  --fuchsia-800: #86198f;
  --fuchsia-900: #701a75;
  --purple-50: #faf5ff;
  --purple-100: #f3e8ff;
  --purple-200: #e9d5ff;
  --purple-300: #d8b4fe;
  --purple-400: #c084fc;
  --purple-500: #a855f7;
  --purple-600: #9333ea;
  --purple-700: #7e22ce;
  --purple-800: #6b21a8;
  --purple-900: #581c87;
  --violet-50: #f5f3ff;
  --violet-100: #ede9fe;
  --violet-200: #ddd6fe;
  --violet-300: #c4b5fd;
  --violet-400: #a78bfa;
  --violet-500: #8b5cf6;
  --violet-600: #7c3aed;
  --violet-700: #6d28d9;
  --violet-800: #5b21b6;
  --violet-900: #4c1d95;
  --indigo-50: #eef2ff;
  --indigo-100: #e0e7ff;
  --indigo-200: #c7d2fe;
  --indigo-300: #a5b4fc;
  --indigo-400: #818cf8;
  --indigo-500: #6366f1;
  --indigo-600: #4f46e5;
  --indigo-700: #4338ca;
  --indigo-800: #3730a3;
  --indigo-900: #312e81;
  --blue-50: #eff6ff;
  --blue-100: #dbeafe;
  --blue-200: #bfdbfe;
  --blue-300: #93c5fd;
  --blue-400: #60a5fa;
  --blue-500: #3b82f6;
  --blue-600: #2563eb;
  --blue-700: #1d4ed8;
  --blue-800: #1e40af;
  --blue-900: #1e3a8a;
  --sky-50: #f0f9ff;
  --sky-100: #e0f2fe;
  --sky-200: #bae6fd;
  --sky-300: #7dd3fc;
  --sky-400: #38bdf8;
  --sky-500: #0ea5e9;
  --sky-600: #0284c7;
  --sky-700: #0369a1;
  --sky-800: #075985;
  --sky-900: #0c4a6e;
  --cyan-50: #ecfeff;
  --cyan-100: #cffafe;
  --cyan-200: #a5f3fc;
  --cyan-300: #67e8f9;
  --cyan-400: #22d3ee;
  --cyan-500: #06b6d4;
  --cyan-600: #0891b2;
  --cyan-700: #0e7490;
  --cyan-800: #155e75;
  --cyan-900: #164e63;
  --teal-50: #f0fdfa;
  --teal-100: #ccfbf1;
  --teal-200: #99f6e4;
  --teal-300: #5eead4;
  --teal-400: #2dd4bf;
  --teal-500: #14b8a6;
  --teal-600: #0d9488;
  --teal-700: #0f766e;
  --teal-800: #115e59;
  --teal-900: #134e4a;
  --emerald-50: #ecfdf5;
  --emerald-100: #d1fae5;
  --emerald-200: #a7f3d0;
  --emerald-300: #6ee7b7;
  --emerald-400: #34d399;
  --emerald-500: #10b981;
  --emerald-600: #059669;
  --emerald-700: #047857;
  --emerald-800: #065f46;
  --emerald-900: #064e3b;
  --green-50: #f0fdf4;
  --green-100: #dcfce7;
  --green-200: #bbf7d0;
  --green-300: #86efac;
  --green-400: #4ade80;
  --green-500: #22c55e;
  --green-600: #16a34a;
  --green-700: #15803d;
  --green-800: #166534;
  --green-900: #14532d;
  --lime-50: #f7fee7;
  --lime-100: #ecfccb;
  --lime-200: #d9f99d;
  --lime-300: #bef264;
  --lime-400: #a3e635;
  --lime-500: #84cc16;
  --lime-600: #65a30d;
  --lime-700: #4d7c0f;
  --lime-800: #3f6212;
  --lime-900: #365314;
  --yellow-50: #fefce8;
  --yellow-100: #fef9c3;
  --yellow-200: #fef08a;
  --yellow-300: #fde047;
  --yellow-400: #facc15;
  --yellow-500: #eab308;
  --yellow-600: #ca8a04;
  --yellow-700: #a16207;
  --yellow-800: #854d0e;
  --yellow-900: #713f12;
  --amber-50: #fffbeb;
  --amber-100: #fef3c7;
  --amber-200: #fde68a;
  --amber-300: #fcd34d;
  --amber-400: #fbbf24;
  --amber-500: #f59e0b;
  --amber-600: #d97706;
  --amber-700: #b45309;
  --amber-800: #92400e;
  --amber-900: #78350f;
  --orange-50: #fff7ed;
  --orange-100: #ffedd5;
  --orange-200: #fed7aa;
  --orange-300: #fdba74;
  --orange-400: #fb923c;
  --orange-500: #f97316;
  --orange-600: #ea580c;
  --orange-700: #c2410c;
  --orange-800: #9a3412;
  --orange-900: #7c2d12;
  --red-50: #fef2f2;
  --red-100: #fee2e2;
  --red-200: #fecaca;
  --red-300: #fca5a5;
  --red-400: #f87171;
  --red-500: #ef4444;
  --red-600: #dc2626;
  --red-700: #b91c1c;
  --red-800: #991b1b;
  --red-900: #7f1d1d;
  --warm-gray-50: #fafaf9;
  --warm-gray-100: #f5f5f4;
  --warm-gray-200: #e7e5e4;
  --warm-gray-300: #d6d3d1;
  --warm-gray-400: #a8a29e;
  --warm-gray-500: #78716c;
  --warm-gray-600: #57534e;
  --warm-gray-700: #44403c;
  --warm-gray-800: #292524;
  --warm-gray-900: #1c1917;
  --warm-gray-950: #0c0a09;
  --true-gray-50: #fafafa;
  --true-gray-100: #f5f5f5;
  --true-gray-200: #e5e5e5;
  --true-gray-300: #d4d4d4;
  --true-gray-400: #a3a3a3;
  --true-gray-500: #737373;
  --true-gray-600: #525252;
  --true-gray-700: #404040;
  --true-gray-800: #262626;
  --true-gray-900: #171717;
  --true-gray-950: #0a0a0a;
  --neutral-gray-50: #fafafa;
  --neutral-gray-100: #f4f4f5;
  --neutral-gray-200: #e4e4e7;
  --neutral-gray-300: #d4d4d8;
  --neutral-gray-400: #a1a1aa;
  --neutral-gray-500: #71717a;
  --neutral-gray-600: #52525b;
  --neutral-gray-700: #3f3f46;
  --neutral-gray-800: #27272a;
  --neutral-gray-900: #18181b;
  --neutral-gray-950: #09090b;
  --cool-gray-50: #f9fafb;
  --cool-gray-100: #f3f4f6;
  --cool-gray-200: #e5e7eb;
  --cool-gray-300: #d1d5db;
  --cool-gray-400: #9ca3af;
  --cool-gray-500: #6b7280;
  --cool-gray-600: #4b5563;
  --cool-gray-700: #374151;
  --cool-gray-800: #1f2937;
  --cool-gray-900: #111827;
  --cool-gray-950: #030712;
  --blue-gray-50: #f8fafc;
  --blue-gray-100: #f1f5f9;
  --blue-gray-200: #e2e8f0;
  --blue-gray-300: #cbd5e1;
  --blue-gray-400: #94a3b8;
  --blue-gray-500: #64748b;
  --blue-gray-600: #475569;
  --blue-gray-700: #334155;
  --blue-gray-800: #1e293b;
  --blue-gray-900: #0f172a;
  --blue-gray-950: #020617;
  --gray-50: var(--blue-gray-50);
  --gray-100: var(--blue-gray-100);
  --gray-200: var(--blue-gray-200);
  --gray-300: var(--blue-gray-300);
  --gray-400: var(--blue-gray-400);
  --gray-500: var(--blue-gray-500);
  --gray-600: var(--blue-gray-600);
  --gray-700: var(--blue-gray-700);
  --gray-800: var(--blue-gray-800);
  --gray-900: var(--blue-gray-900);
  --font-family-sans-serif: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
  --font-family-monospace: "JetBrains Mono",ui-monospace,"Roboto Mono",SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  --font-family-base: var(--font-family-sans-serif);
  --font-size-xs: 10px;
  --font-size-sm: 11px;
  --font-size-base: 12px;
  --font-size-lg: 13px;
  --font-size-xl: 15px;
  --font-size-xxl: 17px;
  --font-size-xxxl: 20px;
  --shadow-md: 0 4px 6px -1px rgba(15,23,43,.1),0 2px 4px -2px rgba(15,23,42,.1);
  --shadow-lg: 0 10px 15px -3px rgba(15,23,43,.1),0 4px 6px -4px rgba(15,23,42,.1);
  --shadow-xl: 0 20px 25px -5px rgba(15,23,42,.2),0 8px 10px -6px rgba(15,23,42,.2);
  --width-sm: 576px;
  --width-md: 768px;
  --width-lg: 992px;
  --width-xl: 1200px;
  --width-xxl: 1400px;
  --form-tabs-gutter-x: 5px;
  --text-primary-color: var(--text-color);
  --text-secondary-color: var(--text-muted);
  --text-tertiary-color: var(--gray-400);
  --border-primary-color: var(--gray-500);
  --border-secondary-color: var(--gray-300);
  --border-tertiary-color: var(--gray-100);
  --primary-bg: var(--gray-300);
  --secondary-bg: var(--gray-100);
  --tertiary-bg: var(--gray-50);
  --body-max-width: 1440px;
  --body-bg: var(--white);
  --responsive-header-bg: var(--gray-50);
  --responsive-header-border-color: var(--gray-200);
  --responsive-header-logo-color: var(--gray-800);
  --responsive-table-label-color: var(--gray-500);
  --responsive-table-row-border-color: var(--gray-300);
  --sidebar-max-width: 195px;
  --menu-max-width: 192px;
  --menu-header-max-width:190px;
  --sidebar-min-width: 188px;
  --sidebar-bg: var(--gray-50);
  --sidebar-border-color: var(--gray-200);
  --sidebar-logo-color: var(--gray-800);
  --sidebar-padding-left: 8px;
  --sidebar-padding-right: 13px;
  --sidebar-menu-items-padding-left: 3px;
  --sidebar-menu-items-padding-right: 10px;
  --sidebar-menu-color: var(--gray-700);
  --sidebar-menu-badge-bg: var(--indigo-100);
  --sidebar-menu-badge-color: var(--gray-500);
  --sidebar-menu-badge-active-bg: var(--color-primary);
  --sidebar-menu-badge-active-color: var(--indigo-50);
  --sidebar-menu-submenu-color: var(--gray-600);
  --sidebar-menu-header-color: var(--gray-400);
  --sidebar-menu-icon-color: var(--gray-500);
  --sidebar-menu-active-item-bg: var(--gray-200);
  --sidebar-menu-active-item-color: var(--color-primary);
  --sidebar-menu-compact-hover-box-shadow: 0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);
  --resize-handler-width: 10px;
  --content-section-border-color: var(--gray-200);
  --resize-handler-hover-bg: var(--indigo-600);
  --content-search-input-bg: var(--body-bg);
  --content-search-icon-color: var(--gray-500);
  --content-search-reset-button-bg: var(--red-700);
  --content-search-reset-button-color: var(--white);
  --content-search-reset-button-hover-bg: var(--red-800);
  --content-search-reset-button-hover-color: var(--gray-200);
  --content-top-border-color: var(--gray-200);
  --content-bg: var(--white);
  --content-padding-left: 15px;
  --content-padding-right: 15px;
  --lg-content-padding-left: 16px;
  --lg-content-padding-right: 10px;
  --user-avatar-icon-bg: var(--gray-200);
  --user-avatar-icon-color: var(--gray-500);
  --user-name-color: var(--gray-500);
  --user-menu-impersonated-link-color: var(--color-primary);
  --popover-bg: var(--gray-100);
  --popover-border-color: var(--gray-300);
  --popover-color: var(--text-color);
  --popover-shadow: var(--shadow-xl);
  --popover-max-width: 480px;
  --dropdown-toggle-bg: var(--white);
  --dropdown-toggle-color: var(--gray-600);
  --dropdown-toggle-border-color: var(--gray-300);
  --dropdown-toggle-hover-border-color: var(--gray-400);
  --dropdown-bg: var(--white);
  --dropdown-color: var(--gray-600);
  --dropdown-border-color: var(--gray-200);
  --dropdown-link-color: var(--gray-700);
  --dropdown-link-hover-bg: var(--gray-100);
  --dropdown-icon-color: var(--gray-600);
  --dropdown-settings-icon-color: var(--gray-400);
  --dropdown-settings-active-item-bg: var(--gray-100);
  --dropdown-settings-active-item-color: var(--color-primary);
  --dropdown-settings-active-item-shadow: inset 0 0 0 1px #5368d580;
  --datagrid-noresults-placeholder-bg: var(--gray-100);
  --datagrid-hidden-results-gradient-bg: var(--gray-50);
  --table-thead-color: var(--gray-800);
  --table-cell-color: var(--gray-600);
  --table-thead-marker-color: var(--gray-400);
  --table-cell-border-color: var(--gray-200);
  --table-hover-cell-bg: var(--gray-50);
  --table-selected-cell-bg: var(--indigo-50);
  --table-thead-sorted-color: var(--gray-900);
  --table-thead-sorted-marker-color: var(--color-primary);
  --datalist-border-color: var(--gray-200);
  --datalist-label-color: var(--gray-500);
  --datalist-value-color: var(--gray-600);
  --pagination-color: var(--gray-600);
  --pagination-hover-border-color: var(--gray-300);
  --pagination-disabled-color: var(--gray-400);
  --pagination-active-bg: var(--color-primary);
  --pagination-active-color: var(--white);
  --field-language-badge-border-color: var(--gray-300);
  --field-country-flag-border-color: var(--gray-200);
  --modal-bg: var(--white);
  --modal-border-color: var(--gray-200);
  --modal-header-bg: var(--gray-50);
  --modal-header-border-color: var(--gray-300);
  --modal-footer-bg: var(--gray-100);
  --modal-title-color: var(--gray-700);
  --detail-label-tooltip-underline-color: var(--gray-400);
  --form-label-color: var(--gray-800);
  --form-control-bg: var(--white);
  --form-control-disabled-bg: var(--gray-200);
  --form-control-disabled-color: var(--gray-600);
  --form-input-border-color: var(--gray-300);
  --form-input-error-border-color: var(--red-600);
  --form-input-hover-border-color: var(--gray-400);
  --form-input-shadow: 0 1px 2px 0 var(--gray-50);
  --form-input-hover-shadow: 0 0 0 4px var(--gray-100);
  --form-input-error-shadow: 0 0 0 3px var(--red-100);
  --form-input-text-color: var(--gray-700);
  --form-input-group-text-bg: #f0f1f77a;
  --form-input-group-text-border-color: var(--form-input-border-color);
  --form-switch-bg: var(--body-bg);
  --form-switch-border-color: var(--gray-400);
  --form-switch-checked-bg: var(--indigo-500);
  --form-type-check-input-border-color: var(--gray-400);
  --form-type-check-input-box-shadow: 0 1px 2px 0 var(--gray-50);
  --form-type-check-input-checked-bg: var(--indigo-500);
  --form-type-text-editor-toolbar-bg: var(--white);
  --form-type-text-editor-toolbar-button-color: var(--gray-600);
  --form-type-text-editor-toolbar-button-hover-color: var(--gray-100);
  --form-type-text-editor-toolbar-button-active-bg: var(--gray-200);
  --form-type-text-editor-toolbar-button-active-color: var(--gray-700);
  --form-type-text-editor-dialog-bg: var(--white);
  --form-type-text-editor-dialog-box-shadow: 0 4px 12px var(--gray-300);
  --form-type-text-editor-content-pre-bg: var(--gray-200);
  --form-type-text-editor-content-pre-color: var(--text-color);
  --form-type-collection-item-collapsed-hover-bg: var(--gray-100);
  --form-type-autocomplete-dropdown-bg: var(--white);
  --form-type-autocomplete-dropdown-input-wrapper-bg: var(--gray-100);
  --form-type-autocomplete-dropdown-input-border-color: var(--form-input-border-color);
  --form-type-autocomplete-dropdown-active-item-bg: var(--gray-200);
  --form-type-autocomplete-close-button-bg: var(--gray-500);
  --form-type-autocomplete-close-button-hover-bg: var(--gray-700);
  --form-type-autocomplete-optgroup-bg: var(--body-bg);
  --form-type-autocomplete-optgroup-color: var(--gray-500);
  --form-type-autocomplete-multi-item-bg: var(--gray-100);
  --form-type-autocomplete-multi-item-border-color: var(--white);
  --form-type-autocomplete-multi-item-remove-button-hover-bg: var(--gray-200);
  --form-global-error-bg: var(--red-100);
  --form-global-error-color: var(--color-danger);
  --form-global-error-border: 1px solid transparent;
  --form-help-color: var(--gray-600);
  --form-help-error-color: var(--gray-800);
  --form-help-active-color: var(--gray-800);
  --form-tabs-border-color: var(--gray-200);
  --form-tabs-help-color: var(--gray-600);
  --form-column-header-color: var(--gray-700);
  --form-column-help-color: var(--gray-600);
  --form-column-icon-color: var(--gray-500);
  --form-fieldset-header-color: var(--gray-700);
  --form-fieldset-help-color: var(--gray-600);
  --form-fieldset-border-color: var(--gray-200);
  --form-fieldset-header-border-color: var(--gray-200);
  --form-fieldset-icon-color: var(--gray-500);
  --form-fieldset-collapse-marker-color: var(--gray-400);
  --form-collection-item-collapse-marker-color: var(--gray-400);
  --badge-border: 0;
  --badge-boolean-false-bg: var(--gray-200);
  --badge-boolean-false-box-shadow: inset 0 0 0 1px var(--gray-300);
  --badge-boolean-false-color: var(--text-color);
  --badge-boolean-true-bg: var(--color-primary);
  --badge-boolean-true-box-shadow: none;
  --badge-boolean-true-color: var(--white);
  --badge-success-bg: var(--green-100);
  --badge-success-box-shadow: none;
  --badge-success-color: var(--text-green-600);
  --badge-warning-bg: var(--yellow-100);
  --badge-warning-box-shadow: none;
  --badge-warning-color: var(--text-yellow-600);
  --badge-danger-bg: var(--red-100);
  --badge-danger-box-shadow: none;
  --badge-danger-color: var(--text-red-600);
  --badge-info-bg: var(--blue-100);
  --badge-info-box-shadow: none;
  --badge-info-color: var(--text-blue-600);
  --badge-primary-bg: var(--violet-200);
  --badge-primary-box-shadow: none;
  --badge-primary-color: var(--violet-800);
  --badge-secondary-bg: var(--gray-200);
  --badge-secondary-box-shadow: none;
  --badge-secondary-color: var(--gray-600);
  --badge-light-bg: var(--gray-50);
  --badge-light-box-shadow: none;
  --badge-light-color: var(--text-color);
  --badge-dark-bg: var(--gray-900);
  --badge-dark-box-shadow: none;
  --badge-dark-color: var(--gray-50);
  --badge-outline-box-shadow: inset 0 0 0 1px var(--gray-300);
  --badge-outline-color: var(--datalist-value-color);
  --alert-primary-bg: var(--indigo-100);
  --alert-primary-color: var(--indigo-800);
  --alert-primary-border-color: var(--indigo-200);
  --alert-secondary-bg: var(--gray-100);
  --alert-secondary-color: var(--gray-800);
  --alert-secondary-border-color: var(--gray-200);
  --alert-success-bg: var(--emerald-100);
  --alert-success-color: var(--emerald-900);
  --alert-success-border-color: var(--emerald-200);
  --alert-info-bg: var(--sky-100);
  --alert-info-color: var(--sky-800);
  --alert-info-border-color: var(--sky-200);
  --alert-warning-bg: var(--orange-100);
  --alert-warning-color: var(--orange-800);
  --alert-warning-border-color: var(--orange-200);
  --alert-danger-bg: var(--rose-100);
  --alert-danger-color: var(--rose-800);
  --alert-danger-border-color: var(--rose-200);
  --alert-light-bg: var(--white);
  --alert-light-color: var(--gray-800);
  --alert-light-border-color: var(--gray-200);
  --alert-dark-bg: var(--gray-800);
  --alert-dark-color: var(--gray-50);
  --alert-dark-border-color: var(--gray-500);
  --button-bg: var(--white);
  --button-color: var(--gray-700);
  --button-hover-color: var(--gray-800);
  --button-active-color: var(--gray-800);
  --button-border-color: var(--gray-300);
  --button-hover-border-color: var(--gray-300);
  --button-shadow: 0 0 0 1px var(--gray-300),0 1px 1px 0 rgba(15,23,41,.1),0 2px 5px 0 rgba(52,66,86,.1);
  --button-hover-shadow: 0 0 0 1px var(--gray-300),0 1px 1px 0 rgba(15,23,41,.1),0 2px 5px 0 rgba(52,66,86,.1),0 3px 9px 0 rgba(52,66,86,.1);
  --button-active-shadow: 0 0 0 1px var(--gray-300),0 0 0 4px var(--gray-200),0 1px 1px 0 rgba(15,23,41,.1),0 2px 5px 0 rgba(52,66,86,.1),0 3px 9px 0 rgba(52,66,86,.1);
  --button-active-primary-shadow: 0 0 0 1px var(--gray-300),0 0 0 4px var(--indigo-200),0 1px 1px 0 rgba(15,23,41,.1),0 2px 5px 0 rgba(52,66,86,.1),0 3px 9px 0 rgba(52,66,86,.1);
  --button-primary-bg: var(--color-primary);
  --button-primary-color: var(--text-on-primary);
  --button-secondary-bg: var(--white);
  --button-secondary-color: var(--button-color);
  --button-info-bg: var(--color-info);
  --button-info-color: var(--white);
  --button-success-bg: var(--color-success);
  --button-success-color: var(--white);
  --button-danger-bg: var(--color-danger);
  --button-danger-color: var(--white);
  --button-warning-bg: var(--color-warning);
  --button-warning-color: var(--white);
  --text-color: var(--gray-800);
  --text-color-dark: #292d42;
  --text-color-light: #9fa9b7;
  --box-shadow-lg: 0 10px 15px -3px rgba(15,23,41,.1),0 4px 6px -2px rgba(15,23,41,.05);
  --content-panel-bg: #f8fafc;
  --fieldset-bg: #f5f7fa;
  --code-editor-string-color: #032f62;
  --code-editor-keyword-color: #d73a49;
  --code-editor-comment-color: #22863a;
  --code-editor-definition-color: #e36209;
  --code-editor-variable-color: var(--form-input-text-color);
  --code-editor-number-color: var(--form-input-text-color);
  --code-editor-argument-color: #6f42c1;
  --code-editor-key-color: #005cc5;
  --code-editor-attribute-color: #22863a;
  --code-editor-addition-bg: #e6ffed;
  --code-editor-deletion-bg: #ffeef0;
  --page-login-bg: var(--gray-100);
  --page-login-form-bg: var(--white);
  --page-login-form-control-bg: var(--form-control-bg);
  --page-login-form-control-border-color: var(--form-input-border-color);
  --page-login-form-control-button-bg: var(--button-primary-bg);
  --zindex-700: 777;
  --zindex-800: 888;
  --zindex-900: 999;
  --zindex-1050: 1050;
  --text-blue-600: #075692;
  --text-green-600: #0d5e42;
  --text-indigo-600: #3c4caa;
  --text-red-600: #a11b4c;
  --text-yellow-600: #943505;
  --color-primary: #5368d5;
  --color-success: #3dbf12;
  --color-info: #0aacff;
  --color-warning: var(--amber-400);
  --color-danger: var(--red-600);
  --highlight-bg: rgba(255,237,40,.4);
  --text-on-primary: var(--white);
  --text-muted: var(--gray-500);
  --link-color: #5c70d6;
  --link-hover-color: #99a6e6;
  --link-hover-decoration: none;
  --link-danger-color: var(--red-600);
  --link-danger-hover-color: var(--red-500);
  --border-radius: 4px;
  --border-width: 1px;
  --border-style: solid;
  --border-color: #e3e7ee;
}

a{
  color:#008cff;
  font-weight: 600;
}
a:hover{
  color:#036ae0;
}

p {
  margin-bottom: 1rem;
  margin-top: 0;
  font-weight: 300;
  font-size: 11px;
}

h1,h2,h3{
  font-weight: 800 !important;
}

.h1, h1 {
  font-size: 1.75rem;
}
.h2, h2 {
  font-size: 1.65rem;
}
.h3, h3 {
  font-size: 1.25rem;
}
.h4, h4 {
  font-size: 1rem;
}
.h5, h5 {
  font-size: 0.89375rem;
}
.h6, h6 {
  font-size: 0.79375rem;
}

.highlight {
  font-weight: bold;
  color: rgb(10, 172, 255);
}
.highlight-pink {
  font-weight: bold;
  color: rgb(230, 10, 255);
}
.highlight-purple {
  font-weight: bold;
  color: rgb(153, 10, 255);
}

.highlight-orange {
  font-weight: bold;
  color: rgb(255, 100, 10);
}

.highlight-darkblue {
  font-weight: bold;
  color: rgb(10, 88, 255);
}
.feature-icon {
  width: 36px;
  height: 36px;
  background: #fff;
  color: #002b5b;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
  font-size: 1.5rem;
}
footer.footer-copyright{
  
}

footer.footer-copyright p{
 font-size: 10px;
 color: #616161;
}

.card {
  border: none;
  background-color: #ffffff;
  box-shadow: none !important;
}

.card.no-shadow {
  box-shadow: none !important;
}

.card.shadow{
  box-shadow: 0 0.125rem 2px rgba(10,10,10,.09);
}

.card-header {
  background-color: #ffffff;
  border-bottom: var(--bs-card-border-width) solid var(--bs-card-border-color);
  color: var(--bs-card-cap-color);
  margin-bottom: 0;
  padding: var(--bs-card-cap-padding-y) var(--bs-card-cap-padding-x);
}


.card-footer {
  background-color: #ffffff;
  border-top: var(--bs-card-border-width) solid var(--bs-card-border-color);
  color: var(--bs-card-cap-color);
  padding: var(--bs-card-cap-padding-y) var(--bs-card-cap-padding-x);
}

.menu-application-item a,.menu-application-item a.dropdown-toggle{
  color:#000 !important;
  background:none ;
}

.menu-application-item a:hover, .menu-application-item a.dropdown-toggle:hover{
  color:#5a07cc  !important;
  background:none ;
}


#navigation-toggler {
  color: white;
}


.numbers{
  font-family: "Ubuntu",sans-serif;
  font-weight: inherit;
}

/* .table{
    border-radius: 4px;
    overflow: hidden;
} */
.table tbody {
  background: white;
}

.table tbody tr:nth-child(even) {
  background-color: #f8fafc61;
}

.table tbody tr:hover, .table tbody tr:hover td{
  background-color: #f3e8ff3d;
}

.quick-stats .card {
  height: 140px;
}
.stats-title {
  font-weight: bold;
  font-size: 11px;
}

.stats-title span {
  font-weight: bold;
  white-space: nowrap;
  font-size: 18px;
}

.quick-stats .card ul li {
  font-size: 10px;
}

.simplebar-scrollbar::before {
  background-color: #088af5;
  opacity: 0.65 !important;
}

.simplebar-track:hover .simplebar-scrollbar::before {
  opacity: 1 !important;
}



.simplebar-track.simplebar-vertical {
  top: 0;
  width: 10px;
}


.sidebar input.menu-search {
  width: 100%;
  border-radius: 30px;
  box-shadow: none;
  border: none;
  padding: 4px 12px;
  margin-left: 5px;
  margin-bottom: 14px;
  background-color: rgba(255, 255, 255, 0.164);
  outline: none;
  color: white;
  font-weight: bold;
}
.sidebar input.menu-search::placeholder{
  font-weight: 400;
}
.sidebar input.menu-search:focus-visible,.sidebar input.menu-search:focus {
  border: none !important;
  box-shadow: none; 
  outline: none;
}

body.ea-sidebar-width-compact .sidebar input.menu-search{
  display: none;
}

/* Fix Datatable Grid Width */
#main{
  display: grid;
}

#main-menu .simplebar-track.simplebar-vertical {
  right: -2px;
}

.simplebar-track.simplebar-horizontal {
  height: 10px;
}


.user-name small{
  font-size:8px;
}

/* 
::-webkit-scrollbar {
  width: 6px;
  height: 6px; 
}
::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 10px;
}


::-webkit-scrollbar-thumb {
  background-color: #088af57d;
  border-radius: 10px;
  border: none;
}


::-webkit-scrollbar-thumb:hover {
  background: #088af5;
}

*/



.icon-container {
  border-radius: 50%;
  padding: 10px 5px 0 5px;
  width: 40px;
  height: 40px;
  background: white;
  text-align: center;
}
.icon-container i {
  font-size: 20px;
}


/* .bg-dark{
  background-color: #000000 !important;
} */

.bg-dark {
  --bs-bg-opacity: 1;
  background-color: rgb(0 0 0) !important;
}
.bg-navbar-flexy{
  background: linear-gradient(90deg, rgb(34, 2, 59) 0%, rgb(60, 1, 105) 40%, rgb(0, 0, 0) 100%);
}
.bg-pink {
  background: rgb(255, 82, 228);
  background: linear-gradient(
    0deg,
    rgba(255, 82, 228, 1) 0%,
    rgba(255, 125, 235, 1) 100%
  );
}

.bg-pink-dark {
  background: rgb(231, 71, 207);
  background: linear-gradient(
    0deg,
    rgb(209, 67, 188) 0%,
    rgb(242, 86, 218) 100%
  );
}

.bg-pink-light {
  background: rgb(252, 136, 235);
  background: linear-gradient(0deg, rgb(252, 136, 235) 0%, #ffbcf5 100%);
}

.text-pink,
.text-pink-dark {
  color: rgb(255, 82, 228);
}

.bg-purple {
  background: rgb(138, 97, 255);
  background: linear-gradient(
    0deg,
    rgba(138, 97, 255, 1) 0%,
    rgba(163, 130, 255, 1) 100%
  );
}
.bg-purple-dark {
  background: rgb(103, 70, 193);
  background: linear-gradient(
    0deg,
    rgb(103, 70, 193) 0%,
    rgb(143, 105, 247) 100%
  );
}
.bg-purple-light {
  background: rgb(163, 130, 255);
  background: linear-gradient(
    0deg,
    rgb(163, 130, 255) 0%,
    rgb(189, 165, 255) 100%
  );
}
.text-purple,
.text-purple-dark {
  color: rgb(128, 0, 250) !important;
}

.bg-orange {
  background: #f4a63e;
  background: linear-gradient(0deg, #f4a63e 0%, #efbc75 100%);
}
.bg-orange-dark {
  background: #d68d2e;
  background: linear-gradient(0deg, #d68d2e 0%, #eaac55 100%);
}
.bg-orange-light {
  background: #f9b762;
  background: linear-gradient(0deg, #f9b762 0%, #ffd191 100%);
}
.text-orange,
.text-orange-dark {
  color: #f4a63e;
}

.bg-yellow-dark {
  background: #f4d33e;
  background: linear-gradient(0deg, #f4d33e 0%, #fade62 100%);
}
.bg-yellow {
  background: #ffd92e;
  background: linear-gradient(0deg, #ffd92e 0%, #ffe364 100%);
}
.bg-yellow-light {
  background: #fff132;
  background: linear-gradient(0deg, #fff132 0%, #fff787 100%);
}
.text-yellow,
.text-yellow-dark {
  color: #ffd92e;
}

.bg-green-dark {
  background: #52ae1d;
  background: linear-gradient(0deg, #52ae1d 0%, #6bc636 100%);
}
.bg-green {
  background: #70e52c;
  background: linear-gradient(0deg, #70e52c 0%, #83f342 100%);
}
.bg-green-light {
  background: #83f342;
  background: linear-gradient(0deg, #83f342 0%, #a1ff6b 100%);
}
.text-green,
.text-green-dark {
  color: #52ae1d;
}

.bg-blue {
  background: #1893dd;
  background: linear-gradient(0deg, #5cb1e4 0%, #59bbd9 100%);
}
.bg-blue-dark {
  background: #1581c4;
  background: linear-gradient(0deg, #499bce 0%, #6ed3f3 100%);
}
.bg-blue-light {
  background: #19a5fc;
  background: linear-gradient(0deg, #5cb1e4 0%, #6ed3f3 100%);
}
.text-blue,
.text-blue-dark {
  color: #1893dd;
}

.newBlinking {
  -webkit-animation: NEW-BLINKING 1s infinite; /* Safari 4+ */
  -moz-animation: NEW-BLINKING 1s infinite; /* Fx 5+ */
  -o-animation: NEW-BLINKING 1s infinite; /* Opera 12+ */
  animation: NEW-BLINKING 1s infinite; /* IE 10+, Fx 29+ */
}

@-webkit-keyframes NEW-BLINKING {
  0%,
  49% {
    background-color: #dcfce7;
    color: #333333;
  }
  50%,
  100% {
    background-color: #78d799;
    color: white;
  }
}

.turbo-progress-bar {
  height: 4px;
  background: rgb(73,0,223);
  background: linear-gradient(90deg, rgba(250,211,18,1) 0%, rgba(255,0,234,1) 50%, rgba(73,0,223,1) 100%) ;
}
.sidebar,
.responsive-header {
  background-color: black;
  /* background: rgb(30 30 30);
  background: linear-gradient(90deg, rgb(0, 0, 0) 0%, rgb(37, 37, 37) 100%); */
}

.main-header #header-logo .logo-custom{
  padding: 15px 22px 0 26px;
}

.responsive-logo img {
  margin: 0 !important;
  width: 120px;

}

.responsive-header #responsive-header-logo {
  width: 100%;
  text-align:center;
}

.main-header #header-logo a {
  padding-bottom: 20px ;
  /* padding: 0 0 40px 0; */
}

.modal-content {
  border-color: var(--modal-border-color);
  border-radius: 6px;
  overflow: hidden;
}
#modal-filters .modal-content {
  overflow: visible !important;
}
/* .modal-backdrop.show {
 
} */
body  {
  font-family: "Noto Sans","Tajawal", sans-serif;
  letter-spacing: 0px;
  font-size: 10.4px;
}

body:not(.ea-dark-scheme) {
  background-color: #f0f1f7;
}

table{
  font-weight: 300;
  font-size: 10.8px;
}

thead, tbody, tfoot, tr, td, th {
  border-color: #e7e7e7;
  border-style: solid;
  border-width: 1px;
}

td[data-column="id"] {
  font-weight: 700 !important;
  color : rgb(10, 172, 255) !important;
  white-space: nowrap;
}

table td[data-column="name"],td[data-column="title"] {
  font-weight: 700 !important;
  color : var(--purple-800) !important;
}
table td.field-datetime{
  font-weight: 500;
  font-size: 11px;
  white-space: nowrap;
}

table td.field-select{
  text-align:center;
}

table td.field-select,table td.field-association{
  font-weight: 700;
  white-space: nowrap;
}



/* table.datagrid th, table.datagrid.td {
  padding: 10px;
  border: 1px solid #ddd;
  white-space: nowrap;
} */

table.datagrid th:last-child,
table.datagrid td:last-child {
  position: sticky;
  right: 0;
  z-index: 20;
  height:100%;
  text-align: center;
}

table.datagrid td:last-child {

  background-color: #fff;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
  /* border-left: 1px solid #e7e7e7; */
}

table.datagrid th:last-child  {
  background: linear-gradient(225deg, rgba(255, 0, 234, 1) 0%, rgba(73, 0, 223, 1) 100%) !important;
  
  
}

#datagrid .simplebar-content-wrapper{
  border-radius: 8px;
}
table.datagrid tr:hover td:last-child {
  z-index: 20;
  background-color: #faf6ff !important;
}

table.datagrid td{
  white-space: nowrap;
  box-shadow: none;
  line-height: 20px;
  padding: 4px 2px;
}
/* table.datagrid td.field-association{
 text-align: center !important;
} */

.datagrid tbody tr:last-child td{
  padding-bottom:12px;
}

.datagrid thead+tbody tr td {
  padding: 4px 8px;
}



table td.field-code_editor .modal-body{
  font-size: 14px;
  font-weight: 400;
}

/* Menu Grid */



.applications a:hover{
  background: transparent;
  color: transparent;
}

#easyadmin-menu-grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  background-color: #f5f5f5;
}

#easyadmin-menu-grid .grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 15px;
  width: 100%;
  max-width: 800px;
}

#easyadmin-menu-grid .grid-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 10px;
  background: white;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#easyadmin-menu-grid .grid-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

#easyadmin-menu-grid .menu-button {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#easyadmin-menu-grid .menu-icon {
  font-size: 24px;
  margin-bottom: 8px;
  color: #4caf50;
}


#easyadmin-menu-grid .menu-label {
  font-size: 14px;
  font-weight: 500;
  color: #333;
}

#easyadmin-menu-grid .grid-item.active {
  border-color: #4caf50;
  background-color: #e8f5e9;
}



.dropdown-menu .dropdown-item, .dropdown-menu .dropdown-header {
  font-size: 11px;
}
.dropdown-menu .dropdown-header, .dropdown-menu .dropdown-item {
  block-size: 24px;
}
.dropdown-menu .dropdown-header {
  font-size: 12px;
  font-weight: 600;
  color: #008cff
}

.dropdown-settings .dropdown-item.active {
  background: #008cff11;
  box-shadow: inset 0 0 0 1px #008cff82;
  color: var(--dropdown-settings-active-item-color);
}
.dropdown-menu i {
  color: var(--dropdown-icon-color);
  font-size: 15px;
  margin: 0;
}

/* body {
  font-family: 'Alata','Tajawal', sans-serif;
  letter-spacing: 0.1px;
  font-size: 12px;
  background-color: #f0f1f7;
} */

/* .content-wrapper > *{
  font-family: "Noto Sans", sans-serif;
  font-size: 12px !important;
  font-weight: 300;
} */

/* .input-group-text .numbers{
  font-family: 'Alata','Tajawal', sans-serif;
} */

body:not(.ea-dark-scheme) .content-header {
  background-color: #f0f1f7;
}

.datagrid thead th {
  background-color: #333;
}
.datagrid thead a,
.datagrid thead span {
  color: white !important;
  padding: 10px 8px;
  font-weight: 800 !important;
}

.datagrid thead .sorted a,
.datagrid thead .sorted span,
.datagrid thead .sorted i {
  color: #0aacff !important;
}
.datagrid thead .sorted {
  box-shadow: inset 0 -3px 0 #0aacff;
}

.datagrid .ea-lightbox-thumbnail img {
  background: var(--white);
  border: 1px solid transparent;
  border-radius: var(--border-radius);
  max-height: 34px;
  max-width: 100px;
  padding: 0 2px;
}

.form-fieldset-header .form-fieldset-title .form-fieldset-title-content {
  align-items: center;
  box-shadow: 0 1px 0 var(--form-fieldset-header-border-color);
  color: var(--form-fieldset-header-color);
  display: flex;
  font-size: 15px;
  font-weight: 700;
  padding: 0 0 5px;
}

.form-check-input:checked {
  background-color: #0aacff;
  border: none;
}
body:not(.ea-dark-scheme) .datagrid tbody tr.selected-row td:not(:last-child) {
  background-color: #acadb938;
}
.datagrid thead th {
  box-shadow: none;
}

.ea-form-collection-items > div{
  margin-top:5px;
}



/* Forms */

.form-widget{
  position: relative;
}

.form-widget > *{ 
  font-size: 11px !important;
}


.field-datetime input[type="datetime-local"].form-control, .field-date input[type="date"].form-control, .field-time input[type="time"].form-control {
  width: 100%;
}


.form-widget .form-widget-modal-ai-container{
  opacity: 0.45;
  position: absolute;
  top: 5px;
  right: 8px;
  z-index: 9;
  padding: 0;
}

.form-widget .form-widget-modal-ai{
  
  color: white;
  background: rgba(255,0,234,1);
  background: linear-gradient(24deg, rgba(250,211,18,1) 0%, rgba(255,0,234,1) 20%, rgba(73,0,223,1) 75%, rgba(0,212,255,1) 99%);
  padding: 5px 7px;
  border-radius: 50px;
  font-size: 9px;
  font-weight: 700;
  box-shadow: 0 0 7px rgba(255, 0, 234, 0.662) !important;
}

.btn-ai,.btn-ai:focus{
  
  color: white;
  background: rgba(255,0,234,1);
  background: linear-gradient(24deg, rgba(250,211,18,1) 0%, rgba(255,0,234,1) 20%, rgba(73,0,223,1) 75%, rgba(0,212,255,1) 99%);
  border-radius: 50px;
  padding: 6px 18px 7px;
  font-size: 12px;
  font-weight: 700;
  border:0;
  box-shadow: 0 0 6px rgba(255, 0, 234, 0.662) !important;
}

.form-widget .form-widget-modal-ai .label{
  font-size: 8px;
}

.form-widget .form-widget-modal-ai-container:hover {
  opacity: 1;
}

.form-widget-modal-ai-container {
  position: relative;
  cursor: pointer;

}

.form-widget .form-widget-modal-ai-container .tooltip-ai {
  
  position: absolute;
  bottom: 14px;
  right: -5px;
  border: 0;
  background: transparent;
  z-index: 10;
  display: flex;
  /*gap: 3px;*/
  /*max-width: 100px;*/
  min-width: 310px;
  padding:0 0 20px;
  margin: 0;
  border-radius: 5px;
  /* box-shadow: 0 1px 2px #00000030; */
}


.form-widget .form-widget-modal-ai-container .tooltip-ai > div{
  padding:0;
  margin: 0;
}


.form-widget .form-widget-modal-ai-container button {
  /* opacity: 0.75; */
  border: none;
  padding: 3px 8px;
  cursor: pointer;
  font-size: 10px;
  width: 72px;
}

.form-widget .form-widget-modal-ai-container button:hover {
  /* opacity: 1; */
  border: none;
  box-shadow: none;
}


.form-widget .tooltip-ai-loading-container{
  margin: 0;
  padding-top: 0;
  padding-right: 5px;
  position: relative;
  top: -2px;
}

.form-widget .tooltip-ai-loading-container .tooltip-ai-loading{
  color:rgba(255,0,234,1);
  font-size: 18px;
  
  text-shadow:0 0 10px rgba(255, 0, 234, 0.741) ;
  
}

.fa-spin-fast {
  animation: fa-spin 0.3s infinite linear; /* Adjust the duration as needed */
}


.form-group {
  padding: 0 0 12px;
}

fieldset .form-group {
  padding:0 0 10px 0px;
}

.form-group label, .form-group legend.col-form-label {
  /* color: var(--form-label-color); */
  color:#6f7379;
  font-size: 12px;
  font-weight: 700;
  margin: 0 !important;
  padding: 0;
}

.form-widget .custom-file-input:focus~.custom-file-label, .form-widget .form-select:focus, .form-widget input.form-check-input:focus, .form-widget input.form-control:focus, .form-widget textarea.form-control:focus,.plugin-dropdown_input.focus .ts-dropdown .dropdown-input {
  border-color: #8000fa;
  box-shadow:  0 0 0 0.25rem #8000fa30;
  outline: 0;
  
}



.form-select:focus {
  border-color: #8000fa50 !important;
  box-shadow: 0 0 0 0.25rem #8000fa30;
  outline: 0;
}
.accordion-body{
  padding:0 10px 5px;
}

.accordion .accordion-item .accordion-button * {
  margin-bottom: 0;
  padding: 3px 0;
}

.form-group.field-collection .accordion-item .accordion-body .form-widget {
  flex: 100%;
}


.form-group.field-collection .accordion-item .form-group {
  align-items: flex-start;
  display: block;
  padding: 10px 0;
  white-space: nowrap;
}

.form-group.field-collection .accordion-header .accordion-button {
  font-size: var(--font-size-sm);
  font-weight: 600;
}

.form-group.field-collection .accordion-item .form-group label, .form-group.field-collection .accordion-item .form-group legend.col-form-label {
  font-weight: 700;
  margin: 3px 10px 0 0;
  padding: 0;
  width: 20%;
}

.form-group.field-collection .field-collection-add-button,.form-group.field-collection .field-collection-add-button:focus {
  margin-top: 10px;
  background: #0f9efe;
  color: white;
}

.form-group.field-collection .accordion-header {
  background: #000000;
  padding-top: 0;
  padding-bottom: 0;
  border-bottom: 1px dashed #363636;
}

.form-group.field-collection .accordion-header:hover {
  background: #000000;
  padding-top: 0;
  padding-bottom: 0;
  border: none;
  box-shadow: none;
  border-bottom: 1px dashed #363636;
}

.form-group.field-collection .accordion-button, .form-group.field-collection .accordion-button:hover {
  padding: 6px 7px;
}

.form-group.field-collection .accordion-button .form-collection-item-collapse-marker {
  color: #ffffff;
}

.form-group.field-collection .accordion-header .accordion-button {
  color: #ffffff;
}

.form-group.field-collection .field-collection-delete-button {
  position: absolute;
  top: 8px;
  right: 10px;
  font-size: 11px;
  padding: 1px 3px;
  background: var(--pink-600);
}

.form-group.field-collection .field-collection-delete-button span.icon svg {
  margin-left: 1px;
  position: relative;
  top: -1px;
  margin-top: 0px;
  fill: white;
}


.page-item.active .page-link
 {
  background: #8000fa;
  border-color: transparent;
  color: var(--pagination-active-color);
  border: none;
}

.page-link:hover{
  background: white !important;
  border: none;
}
.page-item.active .page-link:hover{
  color: #333;
  border: none;
}

.page-link{
  border: none !important;
}



.list-group-item.active{
  background: #8000fa;
  border-color: #8000fa;
}


.alert {
  border-radius: 6px;
  border-block-end-width: 1px;
  margin: 0;
  box-shadow: none;
  padding: 12px 14px;
}
.alert:last-of-type {
  border-bottom-width: 1px;
}

/* .alert.alert-success {
  background-color: #e0fad1;
  border-color: #acf3a7;
  color: var(--alert-success-color);
} */

.alert i{
  font-size: 22px;
    position: relative;
    padding: 0 4px 0 0;
    top: 3px;
}
.alert-dismissible .btn-close {
  position: absolute;
  top: 0px;
  right: 0px;
  z-index: 2;
  padding: 1.25rem 1rem;
}


/* .form-control
 {
    display: block;
    width: 100%;
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--text-color-dark);
    background-color: var(--white);
    background-clip: padding-box;
    border: 1px solid #ced4da;
    appearance: none;
    border-radius: var(--border-radius);
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
} */
.form-control::placeholder{
  font-size: 10px;
  line-height: 0px !important;
}

form.ea-new-form,form.ea-edit-form{
  background: #fff;
    padding: 15px 20px;
    border-radius: 6px;
    box-shadow: none;
}


body.ea-dark-scheme form.ea-new-form,body.ea-dark-scheme form.ea-edit-form{
  background: #333;
}


.form-widget input.form-control, .form-widget textarea.form-control, .form-widget .form-select,.ea-fileupload .custom-file-label {
    background-color: var(--form-control-bg);
    background-repeat: no-repeat;
    border: none;
    /* border-bottom: 1px solid #8100fa ; */
    box-shadow: none;
    /* border: 1px solid #4c009427 ; */
    color: var(--form-input-text-color);
    /* height: 30px; */
    padding: 3px 10px 4px;
    white-space: nowrap;
    word-break: keep-all;
    transition: box-shadow 0.08s ease-in, color 0.08s ease-in;
}
.form-widget input.form-control:focus, .form-widget textarea.form-control:focus, .form-widget .form-select:focus{
  border: 1px solid #4c00946c ;
} 

.ts-wrapper .ts-control,.input-group-text,.ea-fileupload .custom-file-label,.form-widget .form-select, .form-widget input.form-control, .form-widget textarea.form-control,.ea-fileupload .input-group-text,.ea-fileupload .custom-file-label {
  height: 34px;
  background-color: #F5F7F9;
  font-size: 11px !important;
  font-weight: bold;
  color:#3e0078
  /* background-color: #fff; */
 
}
textarea.form-control{
  font-weight: 400 !important;
}

.ts-wrapper .ts-control {
    padding: 3px 28px 4px 12px;
}
.ts-wrapper.disabled .ts-control {
  background-color: #d0dbe9 !important;
}

.input-group-text,.ea-fileupload .input-group .btn, .ea-fileupload .input-group .btn:hover {
    border: none;
    box-shadow: none;
    background: #8100fa !important;
    color: #ffffff !important;
    padding: 3px 9px 5px;
    font-size: 0.7rem !important;
    font-weight: 600;
}

.input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
    margin-left: 0;
}

form .invalid-feedback {
  color: var(--color-danger);
  font-size: 1em;
  font-weight: 500;
  padding-top: 6px;
  display: inline !important;
  white-space: normal;
}


.form-tabs-tablist .nav-tabs a, .form-tabs-tablist .nav-tabs a:hover {
  font-size: var(--font-size-lg);
  font-weight: 700;
}

.ea-fileupload .custom-file-label {
  
  padding: 7px 40px 3px 7px!important;
}


.ts-wrapper.multi .ts-control>div {
  background: #000000;
  border-radius: var(--border-radius);
  box-shadow: 0 0 0 1px var(--form-type-autocomplete-multi-item-border-color);
  color: #fff;
  margin: 2px 5px 2px 0;
  padding: 2px 8px;
  font-size: 9px;
  font-weight: 600;
}
.datagrid-empty{animation: fadeInOut 2s infinite;}
.ts-wrapper.plugin-remove_button:not(.rtl) .item .remove {
  border-left: 1px solid #717171;
  margin-left: 5px;
  
}

@keyframes fadeInOut {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 0.8; }
}

.element {
  animation: fadeInOut 3s infinite;
}

.ts-wrapper.plugin-remove_button .item .remove:hover {
  background: darkred;
}

.form-widget textarea.form-control{
  height: auto;
  padding: 10px;
}

.form-widget input[type="text"].form-control:not([data-ea-align="right"]),
.form-widget textarea.form-control:not([data-ea-align="right"]) {
  padding-right: 30px !important;
}

.form-tabs .nav-tabs .nav-link.active {
  color: #0aacff;
}
.form-tabs .nav-tabs .nav-link.active:after{
  background: #0aacff;
}
.form-tabs .nav-tabs a, .form-tabs .nav-tabs a:hover {
  border: 0;
  color: var(--text-color);
  font-size: var(--font-size-base);
  font-weight: 500;
  margin: 0;
  padding: 4px 14px 8px;
  font-weight: 800;
}
table.datagrid {
  /* border-radius: 7px;
  overflow: hidden;*/ 
  box-shadow: none;
  margin-top: 2px;
}
table.datagrid tr th:first-child {
  border-top-left-radius: 7px;
}
table.datagrid tr th:last-child {
  border-top-right-radius: 7px;
}

table.datagrid tbody tr:last-child td:first-child {
  border-bottom-left-radius: 7px;
}
table.datagrid tbody tr:last-child td:last-child {
  border-bottom-right-radius: 7px;
}
table.datagrid tbody tr:last-child {
  box-shadow: 0 0.125rem 2px rgba(10,10,10,.09);
  border-bottom-right-radius: 7px;
  border-bottom-left-radius: 7px;
}

table.datagrid:not(.datagrid-empty) tr:not(.empty-row) td.actions, table.datagrid:not(.datagrid-empty) tr:not(.empty-row) td.actions.actions-as-dropdown {
  min-width: 50px;
  width: 100%;
}




fieldset {
  background: transparent;
  border: none;
  border-radius: var(--border-radius);
  margin: 0;
  padding: 0;
}

.datagrid td{
  box-shadow: none;
}





.btn {
  border-radius: 50px;
  padding: 6px 18px 7px;
  box-shadow: none;
  font-weight: 700;
  font-size: 11px;
}

.content-top .content-extra-options{
  padding: 0px 5px 0;
  min-width: 400px;
}


.content-top .content-extra-options .extra-option{
  width: 15px;
  display: flex;
  justify-content: center;
  padding: 0 26px;
  margin-right: 8px;
}


.content-top .content-extra-options .link{
  font-size: 18px;
  color:#333;
  position:relative;
  display: flex;
  align-self: flex-end;
}
.user-menu-wrapper .dropdown-menu .dropdown-user-details .user-label {
  color: var(--text-muted);
  display: block;
  font-size: var(--font-size-sm);
  margin-bottom: 0;
}
.user-menu-wrapper .user-avatar {
  background: var(--user-avatar-icon-bg);
  block-size: 28px;
  border-radius: var(--border-radius);
  color: var(--user-avatar-icon-color);
  display: block;
  inline-size: 5em;
  max-inline-size: 28px;
  text-align: center;
}

.user-menu-wrapper .dropdown-menu .dropdown-user-details span.user-avatar .fa-stack i {
  height: 40px;
  width: 40px;
}

.user-menu-wrapper .dropdown-menu .dropdown-user-details .fa-stack {
  height: 40px !important;
  line-height: 40px !important;
}

.user-menu-wrapper span.user-avatar .user-avatar-icon-background {
  color: #0000001a;
}

.dropdown-settings .dropdown-settings-button {
  color: #333;
  font-size: 16px;
  padding: 0px 0px 0px 15px;
}

.user-menu-wrapper span.user-avatar .user-avatar-icon-foreground {
  color: #333;
}

.content-top .content-extra-options .link span.badge {
  position: absolute;
  left: 10px;
  top: -6px;
  padding: 0px 5px;
  font-size: 10px;
  border-radius: 20px;
  box-shadow: 0 1px 2px #0000006b;
  z-index: 1;
}

.content-top .content-extra-options .link span.badge.small {
  font-size: 7px;
  font-weight: 300;
  line-height: 12px;
}

.content-top .content-extra-options .dropdown-menu.show {
  display: inline-table;
}



#main-menu .menu .menu-item .submenu-toggle .submenu-toggle-icon {
  color: white;
  margin-right: 6px;
}

.ea-sidebar-width-normal #main-menu .menu .menu-item .submenu-toggle .submenu-toggle-icon{
  top:4px !important;
}

#main-menu .menu .menu-item.active .menu-item-label {
  font-weight: 800;
}

/* #main-menu .menu .submenu .menu-item.active .menu-item-label {
  font-weight: 500;
} */

.text-grey {
  color: #dddddd80 !important;
}
#main-menu .menu .menu-icon {
  color: var(--sidebar-menu-icon-color);
  font-size: 15px;
  height: 23px;
  margin-right: 4px;
  margin-top: 0;
  vertical-align: middle;
  display:inline-block !important;
  width: 20px;
  color: #ffffff;
}

#main-menu .menu .submenu {
  overflow: hidden;
  padding: 0;
  transition: max-height .15s linear;
}

#main-menu .menu .submenu .menu-item{
  margin: 0 0 0 0;
}

#main-menu .menu .submenu .menu-item:last-child{
  margin-bottom: 3px;
}

#main-menu .menu .submenu .menu-icon{
  height:20px;
  padding: 2px 0 0;
}
#main-menu .menu .submenu a {
  font-weight: 300;
  font-size: 9.8px;
  color: #fff;
  padding: 0 5px 0 5px;
  letter-spacing: 0.4px;
}
#main-menu .menu .submenu .menu-item.active {
  padding-left: 3px;
}

#main-menu .menu .submenu a span {
 top:1px;
}


#main-menu .menu .submenu .menu-icon {
  font-size: var(--font-size-base);
  margin-right: 0;
}
#main-menu .menu a {
  /* font-weight: 300; */
  font-weight: 600;
  font-size: 10.8px;
  letter-spacing: 0.1px;
  color: #ffffff;
}

#main-menu .menu a.section-link,#main-menu .menu a.section-link:hover {
    color: #7d7d7d !important;
    font-weight: bold !important;
    font-size: 9.6px !important;
}
#main-menu .menu .menu-item.active:not(.expanded) .menu-icon,
#main-menu .menu .menu-item.active:not(.expanded) a {
  color: #0aacff;
}
#main-menu .menu a span {
}
#main-menu .menu .menu-item.active a span {
  text-decoration: none;
}

#main-menu .menu .menu-item-contents {
  color: white;
  display: block;
  padding: 1px 0;
}

#main-menu .menu .menu-header {
  color: #7d7d7d;
  font-weight: bold;
  font-size: 9.6px;
  padding: 0 5px 6px var(--sidebar-menu-items-padding-left);
}

#main-menu .menu .menu-header .menu-header-contents img {
  width:20px;
}

#main-menu .menu .menu-item.active {
    background: #09acff30;
    margin-right: 8px;
}


#main-menu .menu .menu-item-badge {
  float: right;
  margin: 1px 6px 0px 0px;
  min-width: 25px;
  position: relative;
  font-size: 7px;
  font-weight: 400;
  top: 2px;
  padding: 0px 6px;
}
/* #main-menu .menu .menu-item-badge i{
  font-size: 9px;
} */

#main-menu .menu .menu-item-badge.badge-success{
  background-color: #2ecc703c;
  color: #2ecc70;
} 

#main-menu .menu .menu-item-badge.badge-warning{
  background-color: #f4db253d;
  color: #f4db25;
} 

#main-menu .menu .menu-item-badge.badge-danger{
  background-color: #ee211a2f;
  color: #ee221a;
} 

.icon-3d img{
  opacity: 1;
    /* mix-blend-mode: plus-lighter;
    object-fit: cover; */
}

.menu-header-contents .icon-3d{
  margin-right:6px;
}

.menu-header-contents .icon-3d img{
  width:16px !important;
}

.icon-3d {
  background-image: url("/themes/default/admin/apps/icons/flexy-app-icon.png");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  padding: 3px;
  margin-top: 2px;
  min-height: 26px;
  min-width: 25px;
  /* background: linear-gradient(145deg, #333333, #101010); */
  /* border-radius: 20%; */
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: #ffffff;
  font-size: 48px;
  /*transition: transform 0.3s ease, box-shadow 0.3s ease;*/
}

.icon-3d-24{
  background-image: url("/themes/default/admin/apps/icons/flexy-app-icon-24.png");
  background-size: 24px;
}

/* .icon-3d::before {
  content: "";
  position: absolute;
  top: -3%; 
    left: -3%; 
    right: -3%;
    bottom: -3%;
  border-radius: 20%; 
  background: linear-gradient(to bottom, #e0e0e0, #131313, #0e0e0e); 
  z-index: -1;
  padding: 5px; 
  box-shadow: inset 1px 1px 2px rgba(192, 192, 192, 0.4), inset -1px -1px 2px rgba(0, 0, 0, 0.3);
} */



.hero-content {
  animation-duration: 25s;
  animation-timing-function: ease-in-out;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-fill-mode: none;
  animation-play-state: running;
  animation-name: backgroundZoom;
  animation-timeline: auto;
  animation-range-start: normal;
  animation-range-end: normal;
  background-position-x: 0%;
  background-position-y: 0%;
}

@keyframes backgroundZoom{0%{background-size:100%;}50%{background-size:110%;}100%{background-size:100%;}}

.app-grid-container{
  background: rgb(2,0,36);
  background: linear-gradient(0deg, rgba(2,0,36,0.8) 0%, rgba(9,9,121,0.8) 35%, rgba(131,12,224,0.8) 100%);  
  backdrop-filter: blur(2.5px); 
   -webkit-backdrop-filter: blur(2.5px);
}

.slide_up_down {
  -webkit-animation: slide_up_down 1.5s ease-in-out infinite alternate both;
  animation: slide_up_down 1.5s ease-in-out infinite alternate both;
}

@-webkit-keyframes slide_up_down {
  0% {
    -webkit-transform: translateY(5px);
    transform: translateY(5px);
  }
  100% {
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px);
  }
}
@keyframes slide_up_down {
  0% {
    -webkit-transform: translateY(5px);
    transform: translateY(5px);
  }
  100% {
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px);
  }
}


/* .grid-sizer,
.grid-item { width: 25%; }
.grid-item--width2 { width: 50%; }
.grid-item--width3 { width: 75%; }
.grid-item--width4 { width: 100%; } */



/* .icon-3d:hover {
  transform: translateY(-5px);
  box-shadow: 
      inset 2px 2px 6px rgba(0, 0, 0, 0.6), 
      inset -2px -2px 6px rgba(60, 60, 60, 0.3),
      8px 8px 14px rgba(0, 0, 0, 0.6), 
      -8px -8px 14px rgba(60, 60, 60, 0.2);
}

.icon-3d:active {
  transform: translateY(2px);
  box-shadow: 
      inset 2px 2px 6px rgba(0, 0, 0, 0.6), 
      inset -2px -2px 6px rgba(60, 60, 60, 0.3),
      4px 4px 10px rgba(0, 0, 0, 0.5), 
      -4px -4px 10px rgba(60, 60, 60, 0.2);
} */

.btn-primary,
.btn-primary:not(:disabled):not(.disabled):not(.btn-link):not(.btn-danger):active,
.btn-primary:not(:disabled):not(.disabled):not(.btn-link):not(.btn-danger):active:focus,
.btn-primary:not(:disabled):not(.disabled):not(.btn-link):not(.btn-danger):focus,
.btn-primary:not(:disabled):not(.disabled):not(.btn-link):not(.btn-danger):hover

{
  background: #8000fa;
}

.btn-secondary,.btn-secondary:hover,.btn:not(:disabled):not(.disabled):not(.btn-link):active, .btn:not(:disabled):not(.disabled):not(.btn-link):active:focus, .btn:not(:disabled):not(.disabled):not(.btn-link):focus{
  background: #333;
  color:white !important;
}

.btn-secondary.disabled,.btn-secondary:disabled{
  color:#333 !important;
}

.btn-sm{
  font-size: 9px;
  padding: 6px 10px 6px 11px;
}

.btn-lg, .btn-group-lg > .btn{
  font-size: 0.9rem !important;
  padding: 8px 14px;
}

.progress-bar{
  background-color: #8000fa !important;
}

.ea-dark-scheme .form-switch .form-check-input:checked, .form-switch .form-check-input:checked {
  background-color: #0aacff;
  /* background-image: url(data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%27-4 -4 8 8%27%3E%3Ccircle r=%273%27 fill=%27rgb%28255, 255, 255%29%27/%3E%3C/svg%3E); */
  border-color: #0aacff;
}

.content-top,
.content-top .content-search input[type='search'][name='query'] {
  background: #ffffff !important;
  color:#0aacff;
  font-weight: 600;
}
.card-header:first-child {
  border-radius: calc(0.25rem - 1px) calc(0.25rem - 1px) 0 0;
  padding: 12px 14px;
  background: black;
  color: rgb(255, 0, 235) !important;
  border-radius:  6px 6px 0 0;
  font-weight: bold;
  font-size: 14px;
}

.card-header h5,.card-header h6{
  color: rgb(255, 0, 235) !important;
}


.datagrid thead a, .datagrid thead span:not(.icon) {
  color: var(--table-thead-color);
  display: block;
  font-weight: 500;
  line-height: 1.357;
  padding: 9px 8px;
  white-space: nowrap;
  height: 33px; /*Correct white border bottom when actions become sticky*/
}

.datagrid td.actions {
  text-align: right;
  white-space: nowrap;
  display: inline-flex;
  justify-content: center;
}


.actions:not(actions-as-dropdown) a,.actions:not(actions-as-dropdown) a.btn{
  padding: 6px 0;
    margin-left: 4px !important;
    display: inline-block;
    border-radius: 30px;
    height: 27px;
    width: 27px;
}

.datagrid td.actions a:not(.dropdown-item) .action-icon {
  font-size: var(--font-size-base);
  margin-inline-end: 0px !important;
  margin-left: 0px !important;
}

/* .actions:not(actions-as-dropdown) a.btn{
  width: 30px;
  height: 30px;
  padding-left: 8px;
  padding-top: 6px;
  margin-top: -2px;
} */

.actions:not(actions-as-dropdown) a:not(.btn) {
  background: #0000000d;
  color: black;
}


.datagrid td.actions .action-icon {
  filter: opacity(1);
}
.datagrid td.actions a:not(.dropdown-item) {
  font-size: 6px;
  font-weight: 500;
}
.list-pagination-counter {
  color: var(--pagination-color);
  font-size: 12px;
}
.actions:not(actions-as-dropdown) a i {
  font-size: 12px !important;
  margin-top: 2px;
}

.actions:not(actions-as-dropdown) .action-label{
  display: none;
  color: white;
}


.actions:not(actions-as-dropdown) a.action-edit{
  background: #333;
    color: white;
}

.actions:not(actions-as-dropdown) a.action-detail{
  background-color: #0aacff;
  color: white;
}

.actions:not(actions-as-dropdown) a.action-delete{
  background: #db0e3a;
  color: white;
}
.actions:not(actions-as-dropdown) a.action-delete i{
  color: white;
}
@media (min-width: 1200px) {
  .h2, h2 {
      font-size: 1.65rem;
  }


  
}

@media (min-width: 992px) {

  body.ea-sidebar-width-compact #main-menu .menu .menu-item:hover .submenu {
    background: #000;
    border-radius: 0 var(--border-radius) var(--border-radius);
    margin-left: 34px;
    padding: 2px 10px 0 0;
    position: absolute;
    top: 32px;
    width: max-content;
  }
  body.ea-sidebar-width-compact #main-menu .menu .menu-item:hover .submenu a{
    padding: 2px 0 6px 0;
  }

  body.ea-sidebar-width-compact #main-menu .menu .submenu a span{
    font-size: 9px !important;
  }

  body.ea-sidebar-width-compact #main-menu .menu .menu-header .menu-item-label {
    display: block;
    color: #fff;
}
body.ea-sidebar-width-compact #main-menu .menu a{
  font-size: 10px;
}
body.ea-sidebar-width-compact #main-menu .menu .menu-item:hover i {
  color: #ffffff !important;
}
  body.ea-sidebar-width-compact #main-menu .menu .menu-item:hover {
    background: #000000;
  }
  body.ea-sidebar-width-compact #main-menu .menu .menu-item.has-submenu:hover .submenu-toggle .menu-item-label {
    display: block;
  }


  .navbar-expand-lg .navbar-nav .nav-link {
    padding-left: 12px;
    padding-right: 12px;
}
  .content-top {
    display: flex;
    height: 48px;
    justify-content: space-between;
    padding: 8px calc(var(--lg-content-padding-right) + var(--resize-handler-width)) 8px var(--lg-content-padding-left);
    position: relative;
  }

  .sidebar {
    box-shadow: none;
    
    padding: 0 var(--sidebar-padding-right) 0 0 !important;
    position: fixed;
    overflow: hidden;
    left:0;
    width: auto;
    z-index: 1049;
    max-height: 100%;
}

#quick-actions{
  position: fixed;
  bottom: 0;
  left:0;
  width: var(--sidebar-max-width) ;
  margin: 0;
  padding-right: 20px;
  background: rgb(250,211,18);
background: linear-gradient(135deg, rgba(250,211,18,1) 0%, rgba(255,0,234,1) 30%, rgba(73,0,223,1) 85%, rgba(0,212,255,1) 100%);
}


#quick-actions .btn-sm{
  padding: 3px 6px;
  font-size: 9px;
}

#quick-actions .btn:hover,#quick-actions .btn:focus{
  border: none;
  box-shadow: none;
}




#quick-actions .mx-1{
  margin-left: 3px !important;
  margin-right: 3px !important;
}

body.ea-sidebar-width-compact #quick-actions
{
  display: none !important;
}






body:not(.ea-sidebar-width-compact) #main-menu {
        min-width: var(--menu-max-width);
        padding: 0 0 20px 5px;
        max-height: 70%;
        position: fixed;
        width: var(--menu-max-width);
        background: linear-gradient(0deg, rgba(2, 0, 36, 0.5) 0%, rgb(119, 6, 204, 0.38) 45%, rgba(2, 0, 36, 0.5) 100%);
}

body.ea-sidebar-width-compact #main-menu{
  width: 42px;
  padding: 10px 10px 0 0;
  max-height: 80%;
  position: fixed;
  top:100px;
  z-index: 1;
  background: linear-gradient(0deg, rgba(2, 0, 36, 0.5) 0%, rgb(119, 6, 204, 0.38) 45%, rgba(2, 0, 36, 0.5) 100%);
  backdrop-filter: blur(6px);
  border-radius: 8px;
}
body.ea-sidebar-width-compact #main-menu:hover{
  min-width: var(--menu-max-width);
}

body.ea-sidebar-width-compact .main-header #header-logo a {
  position: fixed;
}


body.ea-sidebar-width-compact #main-menu .simplebar-mask,
body.ea-sidebar-width-compact #main-menu .simplebar-content-wrapper{
  /* overflow: unset !important; */
  
}

#main-header {
  position: fixed;
}
.body:not(.ea-sidebar-width-compact) #main-header {
  position: fixed;
  width: var(--menu-header-max-width) ;
}
  .content-top {
    background: #f8fafc;
  }

  body.ea-sidebar-width-compact #main-menu .menu .menu-header {
    height: auto;
    overflow: hidden;
    padding: 0;
    width: auto;
    padding-left: 6px;
  }

  #main-menu .menu .menu-header .menu-header-contents {
    display: flex;
    align-content: center;
    align-items: center;
}

  body:not(.ea-sidebar-width-compact) #main-menu .menu .menu-header .menu-header-contents img {
    /* margin-right:5px;margin-left:-7px; */

  }

  
  body.ea-sidebar-width-compact .sidebar{
    position: relative;
    width: 42px;
    z-index: 1000;
  }
  body:not(.ea-sidebar-width-compact) .sidebar{
    position: fixed;
    width: var(--sidebar-max-width);
    overflow: hidden;
    z-index: 1000;
  }



  
  /*  */

  

  .content-top{
    box-shadow: none;
  }

  .resizer-handler:hover {
    background: #8000fa;
  }

  .toggle-collapse-menu, .toggle-collapse-menu:hover, #sidebar-resizer-handler {
    position: absolute;
    right: -32px;
    height: 40px;
    min-height: unset !important;
    color: #333;
    top: 10px;
    font-size: 20px;
    padding: 0;
    z-index: 1;
    box-shadow: none !important;
}

  .pos-container .cart-container .accordion {
    margin-left: 8px !important;
  }


}


.page-login .container-fluid{
  height:100%;
}



.login-wrapper {
  inline-size: 100%;
    max-inline-size: inherit;
    width: 50%;
    margin-block-start: 0;
}

.login-special-content{
  width:50%;
}

.login-wrapper .form-control{
  border-radius: 30px;
  background:#66666660 !important;
  color:white !important;
}
.login-wrapper .form-control:-webkit-autofill {
  background:#66666610 !important; /* Chrome applies a yellow background */
  box-shadow: 0 0 0px 1000px #66666610 inset !important; /* Override background */
}

.login-wrapper .form-control:-webkit-autofill:hover,
.login-wrapper .form-control:-webkit-autofill:focus {
  background:#66666610 !important;
}


#login-special-content{
    height: 100vh;
    background: #0e0e0e; /* Dark theme */
    position: relative;

}

#login-special-content .content{
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
}

#login-special-content .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.8); /* Adjust opacity as needed */
  z-index: 1;
}


.login-wrapper .content {
  background-color: #22222265;
  backdrop-filter: blur(5px);
  width: 100%;
  max-width: 460px;
  border-radius:8px !important; 
}




@media (min-width: 768px){
  .content-header {
    padding: 26px 0 16px;
}
}


@media (min-width: 992px) {
  body.ea-sidebar-width-compact
    #main-menu
    .menu
    .menu-item:hover
    .menu-item-contents {
    background: #fff;
    color: #333;
  }

  .

  .content-top .content-search .form-widget {
    padding-left: 35px;
  }

  body.ea-sidebar-width-compact #main-menu .menu .menu-item .menu-item-contents:first-child {
    margin-top: 4px;
}


body.ea-sidebar-width-compact #main-menu .menu .menu-item:hover .menu-item-contents {
  color: rgb(255, 255, 255);
  background: rgb(0, 0, 0);
}
}

  body.ea-sidebar-width-compact #main-menu .menu .menu-item .menu-icon {
    font-size: 16px;
    height: 18px;
    max-width: 18px;
  }
  body.ea-sidebar-width-compact #main-menu .menu .menu-item.has-submenu:hover .submenu-toggle-icon {
    display: inline-block;
    font-size: 13px;
    left: 1px;
    top: 1px;
    transform: rotate(0);

  }
  

  body.ea-sidebar-width-compact #main-menu .menu .menu-item:hover .menu-icon {
    color: #0b2656;
  }
  

  .navigation-toggle {
    display: none;
  }

  

  
}




	/* POS CSS */



  .possystem .content-header{
    padding: 0 0 10px !important;
  }
 
  
  .possystem  .products-container{
    padding: 0;
    background: #fff;
    border-radius: 4px;
    overflow: hidden;
}

.possystem  .products-container .head{
  background: black !important;
   
  padding: 10px 15px;
}

.possystem  .products-container .head *{
  color: #fff;
  margin-bottom: 0;
}

.possystem  .products-container .head button i{
  font-size: inherit !important;
  color: inherit !important;
}

.possystem  .products-container .body{
  padding: 15px;
}

.pos-container {
  margin-bottom: 0;
}

.pos-container  .card{
  box-shadow: none;
}

/* .pos-container .btn-primary, .pos-container .btn-primary:not(:disabled):not(.disabled):not(.btn-link):not(.btn-danger):active, .pos-container .btn-primary:not(:disabled):not(.disabled):not(.btn-link):not(.btn-danger):active:focus,.pos-container  .btn-primary:not(:disabled):not(.disabled):not(.btn-link):not(.btn-danger):focus,.pos-container  .btn-primary:not(:disabled):not(.disabled):not(.btn-link):not(.btn-danger):hover {
  background: #8100fa;
} */
  .pos-container .details-order {
    position: fixed;
    right:0;
    bottom: 0;
    z-index: 9999999999;
    text-align: center;
    margin: 0 auto;
    background: #00000090;
    padding: 8px 4px;
    border-radius: 7px;
    width:100%;
    max-width:420px;
  }

  .pos-container .details-order > [class^="col"]{
    padding: 5px;
  }
  .pos-container .btn-save{
    background-color: #8000fa !important;
  }
  .pos-container .details-order .btn {
    font-size: 16px !important;
    box-shadow: none !important;
    width: 100%;
    
  }

  .pos-container .autoComplete_wrapper > input {
    width: 280px;
    height: 40px;
    padding-left: 20px;
    font-size: 0.8rem;
    color: #7b7b7b;
    border-radius: 8px;
    font-weight: 600;
    border: inherit;
    display: block;
    outline: 0;
    background-color: #f1f3f4;
  }
  .pos-container .autoComplete_wrapper>input:focus {

    font-weight: 400;
  }
  .pos-container .autoComplete_wrapper > ul > li mark {
    background-color: transparent;
    color: #8000fa !important;
    font-weight: 700;
  }
  .pos-container .card.parentCategory {
    padding: 3px;
    font-size: 14px;
    cursor: pointer;
    text-align: center;
  }

  .pos-container .card.subCategory {
    font-size: 8px;
    padding: 3px;
    cursor: pointer;
    text-align: center;
    max-height: 20px;
  }



  .pos-container .card.product {
    font-size: 10px;
    padding: 6px 6px 10px 6px;
    cursor: pointer;
    text-align: center;
    background: linear-gradient(0deg, rgb(235 234 247) 0%, rgb(213 220 240) 100%);
    /* box-shadow: 0 2px 2px #ccc; */
    height: 100%;
  }

  .pos-container .card.product *{
    margin:0;
    padding:0;
  }

  .pos-container .card.product span{
    font-size: 10px;
    font-weight: bold;
  }
  
  .pos-container .cartitems-placeholders{
    padding: 4px 10px ;
  }
  .pos-container .cartitems-placeholders .placeholder{
    background: linear-gradient(270deg, rgb(235 234 247) 0%, rgb(213 220 240) 100%) !important;
    padding: 8px 4px;
    width: 100%;
    height: 25px;
    border-radius: 4px;
    margin-bottom: 5px;
  }

  .pos-container .cart-items {
    padding: 8px 6px 2px 6px;
    border: 2px dashed #adadad;
    border-radius: 6px;
    margin: inherit;
}

.pos-container .cart-items > *{
  padding: 0;
}
  .pos-container .cart-item {

    background: linear-gradient(270deg, rgb(255, 4, 213) 0%, rgb(100, 1, 255) 100%) !important;
    color: #fff;
    font-weight: bold;
    padding: 10px 3px;
    border-radius: 4px;
    margin: 0;
    border: none;
    overflow: hidden;
    /* box-shadow: 0 2px 2px #ccc; */
  }



  .pos-container .cart-item .text-selected{
    font-size: 15px;
    font-weight: bold;
    position: relative;
  }

  

  .pos-container .cart-item .btn.btn-plus,
  .pos-container .cart-item .btn.btn-minus,
  .pos-container .cart-item .btn.btn-plus:focus,
  .pos-container .cart-item .btn.btn-minus:focus{
    background: #000 !important;
    color: #fff !important;
    border: none;
    box-shadow: none;
  }

  .pos-container .cart-item .btn.btn-plus:hover,
  .pos-container .cart-item .btn.btn-minus:hover{
    background: #000 !important;
    color: #fff !important;
  }



  .pos-container .cart-item *{
    padding: 0;
    margin: 0;
  }
  .pos-container .card.product .btn,
  .pos-container .cart-container .cart-item .btn {
    padding: 3px 6px;
  }
  .pos-container .cart-container input::placeholder {
    font-size: 10px;
  }
  .pos-container .cart-container {
    margin-bottom: 60px;
    /* margin-top: 20px; */
    border-radius: 5px;
    padding: 0 8px 0 0;
  }
  

  .pos-container .modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .pos-container .modal-content {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    max-width: 640px;
  }

  .pos-container .close-button {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    cursor: pointer;
  }

 

  .pos-container .btn.btn-plus,
  .pos-container .btn.btn-minus
 {
    border-radius: 30px !important;
    padding: 2px 9px !important;
    background: black !important;
    color: rgb(255, 255, 255) !important ;
    font-weight: bold;
  }

  .pos-container .btn-plus:hover,
  .pos-container .btn-minus:hover {
    background: #8000fa;
  }

  .pos-container .selected-product {
    background: linear-gradient(0deg, rgb(255, 4, 213) 0%, rgb(100, 1, 255) 100%) !important;
    color: #fff !important;
  }

  .pos-container .selected-product .text-selected{
    font-size: 13px;
    font-weight: bold;
    bottom: 4px;
    position: relative;
  }



  .pos-container .selected-product .btn.btn-plus,
  .pos-container .selected-product .btn.btn-minus{
    background: #000 !important;
    color: #fff !important;
  }

  .pos-container .selected-product

  .pos-container .text-selected {
    color: #fff !important;
    font-weight: bold;
    font-size: 14px;
  }

  .pos-container input.form-control {
    font-weight: bold;
    font-size: 12px;
    padding: 9px;
  }
  .pos-container input.form-control.input-cartitem::-webkit-outer-spin-button,
  .pos-container input.form-control.input-cartitem::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  .pos-container input[type=number].form-control.input-cartitem{
    -moz-appearance: textfield;
  }

  .pos-container input.form-control.input-cartitem:focus {
    box-shadow: 0 0 0 0.25rem rgb(253 253 253 / 41%);
}


  .pos-container .input-group-text,
  .pos-container .input-group-text:hover,
  .pos-container .input-group .btn,
  .pos-container .input-group .btn:hover {
    height: auto;
  }
  .pos-container .input-group .btn:hover {
    background: green;
    color: white;
  }

  


  .pos-container .accordion-body {
    padding: 17px 12px;
    background: #fff;
    border: none;
    box-shadow: none;
  }

 
  .pos-container .accordion-body *[class$="-menu"] *[class$="-option"]:hover{
    background: #8000fa !important;
    color:white !important;
  }
  

  .pos-container .accordion-item{
    border:none;
  }

  .pos-container .accordion-button h6 i,
  .pos-container .products-container h6 i{
    font-size: 20px;
    padding: 0 4px 0 0;
  }

  
  

  .pos-container .accordion-button {
    background: black !important;
    box-shadow: none;
    color: #ffffff;
    padding: 8px 20px;
  }


  .pos-container .accordion-button:not(.collapsed) {
    background: black !important;
    box-shadow: none;
    color: #ff00eb !important;
    text-shadow: 0 1px 1px #3333332e;
  }
  .pos-container .accordion-button *,.pos-container .accordion-button:not(.collapsed) *,
  .pos-container .products-container .head b,.pos-container .products-container .head i{
    color: #ff00eb !important;
  }

  .pos-container .products-container .head small,.pos-container .accordion-button:not(.collapsed) small,.pos-container .accordion-button:not(.collapsed) small *{
      color:white !important;
  }
  .pos-container .accordion-button small *{
    font-size: 16px;
    font-weight: bold;
  }

.pos-container .accordion-button.collapsed b,.pos-container .accordion-button.collapsed i {
  color: #ffffff !important;
}

  /* .pos-container .accordion-button small,
  .pos-container .accordion-button:not(.collapsed) small{
    display: block;
  } */


  /* .pos-container .accordion-button small,
  .pos-container .accordion-button small *
  {
    color:rgb(169, 173, 177) !important;
    font-size:11px;
    
  } */
  .pos-container .accordion-button:focus {
    box-shadow: none;

  }

  

  /* .pos-container  .accordion-button:after {
    background-image: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 320 512%22%3E%3C!--Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--%3E%3Cpath d=%22M137.4 374.6c12.5 12.5 32.8 12.5 45.3 0l128-128c9.2-9.2 11.9-22.9 6.9-34.9s-16.6-19.8-29.6-19.8L32 192c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l128 128z%22/%3E%3C/svg%3E');
    background-size: 0.85rem;
} */
 
  .pos-container .accordion-button:not(.collapsed):after,.pos-container  .accordion-button:after {
    background-image: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 320 512%22%3E%3Cpath fill=%22%23ffffff%22 d=%22M137.4 374.6c12.5 12.5 32.8 12.5 45.3 0l128-128c9.2-9.2 11.9-22.9 6.9-34.9s-16.6-19.8-29.6-19.8L32 192c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l128 128z%22/%3E%3C/svg%3E');
    background-size: 0.85rem;
}


  .pos-container .cart-item div[class^="col"] {
    padding: 0;
    text-align: center;
    align-items: center;
    justify-items: center;
    justify-content: center;
    display: flex;
  }



  .pos-container .cart-item .fa-trash-can{
    color: #fff !important;
  }
  
  /* .pos-container .row > *{
    padding-left: 5px;
    padding-right: 5px;
  } */

  .pos-container .products-container .row > *{
    padding-left: 3px;
    padding-right: 3px;
  }

  .pos-container .products-container .img-product {
    min-width: 60px;
    width: 100%;
    border-radius: 50px;
    margin-bottom: 8px !important;
  }
  .pos-container .show-products-btn,
  .pos-container .show-products-btn:focus {
    background-color: #8000fa;
    box-shadow: none;
    width: 100%;
    color: #ffffff;
    text-shadow: 0 1px 1px #3333332e;
  }
  .pos-container .show-products-btn:hover,
  .pos-container .show-products-btn:active {
    background-color: #333 !important;
    color: #fff !important;
  }


  .pos-container .btn-details{
    background: #333 !important;
  }

  

  .pos-container .location-search-input {
width: 100%;
padding: 10px;
margin-bottom: 10px;
}

.pos-container .autocomplete-dropdown-container {
border: 1px solid #ccc;
z-index: 1000;
position: absolute;
background-color: #fff;
}

.pos-container .suggestion-item {
padding: 10px;
cursor: pointer;
}

.pos-container .suggestion-item--active {
background-color: #fafafa;
padding: 10px;
}

/* .pos-container .ts-wrapper .ts-control,.pos-container  .input-group-text,.pos-container  .ea-fileupload .custom-file-label,.pos-container  .form-widget .form-select,.pos-container  .form-widget input.form-control,.pos-container  .form-widget textarea.form-control,.pos-container  .ea-fileupload .input-group-text,
.pos-container .input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
  background-color: #8100fa;
  color: white;
} */


.pos-container .payments-container {
  border: 2px dashed #ccc;
  padding: 3px 10px 0;
  border-radius: 10px;
}

.pos-container .payments-container select {
  font-size: 10px;
  padding: 9px;
  background: #00000073;
  font-weight: bold;
  color: #ffffff;
  border:none;
}

.pos-container .payments-container input.form-control {
  font-weight: bold;
    font-size: 13px;
    text-align: center;
    padding: 6px;
    background: #00000073;
    color: white;
    border: none;
}

.pos-container .payments-container input.form-control::-webkit-outer-spin-button,
.pos-container .payments-container input.form-control::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  .pos-container .payments-container input.form-control{
    -moz-appearance: textfield;
  }

.pos-container .payments-container .payment-item{
  background: linear-gradient(270deg, rgb(255, 4, 213) 0%, rgb(100, 1, 255) 100%) !important;
}

.pos-container .payments-container .payments-recap *{
  font-size: 14px;
}
.pos-container .payments-container .payments-recap strong{
  color: #6302c8;
}



/* Tools UI */


.e-kanban {
 background: transparent;
 /* font-family: "Alata"; */
 font-family: "Noto Sans";
}

.e-card,.e-kanban-dialog{
   /* font-family: "Alata"; */
 font-family: "Noto Sans";
}

.e-kanban .e-kanban-table .e-header-cells{
  background-color: white;
}

.e-kanban .e-kanban-table.e-content-table .e-content-row:not(.e-swimlane-row) td {
  background: transparent;
  padding: 0;
 
}

.e-kanban .e-kanban-content .e-content-row .e-content-cells.e-collapsed{
  background: #ffffff !important;
  box-shadow: 0 0.125rem 2px rgba(10,10,10,.09);
}
.e-kanban .e-kanban-content .e-content-row:not(.e-swimlane-row) .e-content-cells:focus{
  border: none;
}

.e-kanban .e-kanban-content .e-content-row .e-content-cells .e-card-wrapper, .e-kanban .e-kanban-content .e-content-row .e-content-cells .e-card-container {
  height: inherit;
  overflow: auto;
  padding: 8px 0;
}

.e-card {
  background: #ffffff;
  box-shadow: 0 0.125rem 2px rgba(10,10,10,.09) !important;
}
.e-card:hover {
  background: #fcfcfc;
}

.e-kanban .e-kanban-content .e-content-row .e-content-cells .e-card-wrapper .e-empty-card{
  border: none;
}

.e-kanban .e-kanban-content .e-content-row:not(.e-swimlane-row) .e-content-cells.e-dragged-column .e-kanban-border.e-dropping{
  border: none !important;
}

.e-kanban .e-kanban-content .e-content-row:not(.e-swimlane-row) .e-content-cells.e-dragged-column{
  border: none !important;
}

/* Remove borders when dragging and dropping */
.e-kanban .e-content-cells,.e-kanban .e-content-cells:hover {
  border: none !important;
}

/* Optional: Add specific styling when an item is being dragged over */
.e-kanban .e-target-dragged {
  border: none !important; /* Remove any border on drag-over */
}

.e-kanban .e-kanban-content .e-content-row:not(.e-swimlane-row) .e-content-cells e-card-wrapper .e-target-dropped-clone,
.e-kanban .e-kanban-content .e-content-row:not(.e-swimlane-row) .e-content-cells e-card-wrapper .e-target-dropped-clone:hover{
  border: none !important;
}

.e-kanban .e-content-cells.e-target-dragged,.e-kanban .e-content-cells.e-target-dragged:hover {
  border: none !important;
}


.e-kanban .e-kanban-content .e-content-row .e-content-cells .e-card-wrapper .e-card .e-card-content, .e-kanban .e-kanban-content .e-content-row .e-content-cells .e-card-container .e-card .e-card-content {
  font-size: 11px;
  font-weight: 400;
  line-height: 15px;
}

.e-kanban .e-kanban-table.e-content-table .e-card .e-card-tag.e-card-label {
  background: #000000;
  color: #ffffff;
}

.e-kanban .e-kanban-content .e-content-row .e-content-cells .e-card-wrapper .e-card .e-card-tag, .e-kanban .e-kanban-content .e-content-row .e-content-cells .e-card-container .e-card .e-card-tag {
  border-radius: 12px;
  display: inline-block;
  font-size: 9px;
  line-height: 20px;
  margin-right: 8px;
  max-width: 100%;
  overflow: hidden;
  padding: 0px 6px;
  text-overflow: ellipsis;
}

.e-kanban .e-kanban-table.e-content-table .e-card.e-selection {
  background: #e2e8f0;
}

.e-kanban .e-kanban-table .e-header-cells .e-header-text {
  color: #fff;
  font-weight: 800;
}
.e-kanban .e-kanban-content .e-content-row .e-content-cells.e-collapsed .e-collapse-header-text {
  font-weight: 800;
  text-transform: uppercase;
}

.e-kanban .e-kanban-table .e-header-cells .e-item-count {
  color: rgb(255 255 255 / 87%);
}

.e-kanban .e-kanban-content .e-content-row .e-content-cells .e-card-wrapper .e-card .e-card-header .e-card-header-title, .e-kanban .e-kanban-content .e-content-row .e-content-cells .e-card-container .e-card .e-card-header .e-card-header-title {
  font-size: 12px;
  font-weight: 700;
  line-height: 20px;
}


.e-kanban .e-kanban-table .e-header-cells {
  background: linear-gradient(90deg, rgb(0, 0, 0) 0%, rgb(37, 37, 37) 100%);
  box-shadow: 0 0.125rem 2px rgba(10,10,10,.09);
}

.e-kanban .e-kanban-header .e-header-cells.e-max-color {
  background: #e82c3d;
}
.e-kanban .e-kanban-content .e-content-row:not(.e-swimlane-row) .e-content-cells.e-max-color {
  background: #e82c3d;
}

.e-kanban-dialog.e-dialog .e-kanban-form-wrapper table .e-field, .e-kanban-dialog.e-dialog .e-kanban-form-container table .e-field {
  width: 100%;
  padding: 8px 12px;
  border: none;
  background: #f3f6fb;
  border-radius: 5px;
}

.e-kanban .e-kanban-content .e-content-row .e-content-cells .e-card-wrapper .e-card, .e-kanban .e-kanban-content .e-content-row .e-content-cells .e-card-container .e-card{
  border: none;
}

.e-kanban .e-kanban-content .e-content-row.e-swimlane-row .e-content-cells .e-swimlane-header {
  display: -ms-flexbox;
  display: flex;
  padding:4px 10px;
  font-size: 10px;
  background: #ffffff90;
  border-radius: 4px;
  margin-top: 6px;
  /* box-shadow: 0 0.125rem 2px rgba(10,10,10,.09); */
}

.e-kanban .e-kanban-content .e-content-row.e-swimlane-row .e-content-cells .e-swimlane-header .e-swimlane-text {
  font-size: 12px;
  font-weight: 800;
  line-height: 20px;
  padding: 2px;
}

.e-kanban .e-kanban-header .e-header-cells.e-toggle-header .e-column-expand {
  cursor: pointer;
  font-size: 12px;
  padding: 6px;
  max-height: 24px;
  max-width: 24px;
}

.e-kanban .e-kanban-table .e-header-cells .e-column-expand, .e-kanban .e-kanban-table .e-header-cells .e-column-collapse {
  color: rgb(157 157 157 / 54%);
}


/* Gantt */


.gantt-actions .btn{
  padding: 4px 12px;
  font-size: 12px;
  border-radius: 50px;
}

.e-gantt {
  display: block;
  border-radius: 10px;
  width: 100%;
  overflow: hidden;
  margin-top: 20px;
  box-shadow: 0 0.125rem 2px rgba(10, 10, 10, .09) !important;
}

.e-gantt .e-gantt-chart .e-timeline-top-header-cell {
  height: 32px;
  background: #333;
  color: #fff;
}



.e-grid .e-gridheader tr:first-child th {
  border-top: 0 none;
  background: #333;
  color: #fff;
  
}

.e-gantt .e-gantt-chart .e-timeline-header-table-container {

  background: transparent;
}

.e-gantt .e-gantt-chart .e-weekend-header-cell {
  background: transparent;
  color:black;
  
}

.e-gantt .e-gantt-chart .e-weekend-header-cell .e-header-cell-label{
  background: transparent;
  color:#ddd;
  /* border-radius: 20px;
  height: 22px; */
}

.e-gantt .e-gantt-chart .e-header-cell-label{
    background: #8000fa;
    border-radius: 20px;
    height: 19px;
    color: #ffffff;
}


.e-gantt .e-gantt-chart .e-gantt-parent-progressbar-inner-div {
  background-color: #333;
  border: 0px;
  border-radius: 4px;
}

.e-gantt .e-gantt-chart .e-gantt-parent-taskbar-inner-div {
  background-color: #33333350;
  outline: none;
  border-radius: 4px;
}

.e-gantt .e-gantt-chart .e-gantt-child-progressbar-inner-div {
  background-color: #d81298;
  border: 0px;
  border-radius: 3px;
}



.e-gantt .e-gantt-chart .e-gantt-child-taskbar-inner-div {
  background: #d8129850;
  outline: none;
  border-radius: 15px;
}


.e-taskbar-left-resizer {
  left: 3px !important;
}

.e-taskbar-right-resizer {
  margin: 0 -4px 0;
}

.e-gantt .e-gantt-chart .e-timeline-top-header-cell, .e-gantt .e-gantt-chart .e-timeline-single-header-cell {
  border-color: transparent;
  padding: 0 4px;
}

.e-gantt .e-gantt-chart .e-timeline-header-table-body>tr {
  display: -ms-inline-flexbox;
  display: inline-flex;
  background: #333333;
}

.e-grid, .e-splitter.e-splitter-horizontal .e-pane, .e-splitter.e-splitter-vertical .e-pane {

   /* font-family: "Alata", "Segoe UI", "GeezaPro", "DejaVu Serif", "sans-serif", "-apple-system", "BlinkMacSystemFont"; */
 font-family: "Noto Sans", "Segoe UI", "GeezaPro", "DejaVu Serif", "sans-serif", "-apple-system", "BlinkMacSystemFont";
  
  font-size: 11px;
}

.e-splitter.e-splitter-horizontal, .e-splitter.e-splitter-vertical {
  border: none;
}





.e-gantt .e-gantt-chart .e-chart-row .e-chart-row-border {
  border-collapse: separate;
  border-style: solid;
  border-width: 0;
}

.e-grid.e-horizontallines .e-rowcell {
  border-width: 0;
}






/* .e-splitter.e-splitter-horizontal .e-pane, .e-splitter.e-splitter-vertical .e-pane {
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  font-family: "Alata", "Segoe UI", "GeezaPro", "DejaVu Serif", "sans-serif", "-apple-system", "BlinkMacSystemFont";
  font-size: 13px;
  font-weight: normal;
} */


.e-gantt .e-gantt-chart .e-chart-row-border.e-lastrow {
  border-bottom-color: transparent;
}


.e-custom-event-marker-today{
  border-left-color: #008cff!important;
}

.e-custom-event-marker-today .e-span-label {
  background-color: #008cff!important;
  color: #fff!important;
}

.e-custom-event-marker-today  .e-gantt-right-arrow {
  border-right-color: #008cff!important;
  border-left-color: #008cff !important;
}


.e-grid .e-rowcell, .e-grid .e-groupcaption, .e-grid .e-indentcell, .e-grid .e-recordplusexpand, .e-grid .e-recordpluscollapse, .e-grid .e-rowdragdropcell, .e-grid .e-detailrowcollapse, .e-grid .e-detailrowexpand, .e-grid .e-detailindentcell, .e-grid .e-detailcell{
  border-bottom-color: transparent;
}

.e-tab .e-tab-header {
  background: #8000fa !important;
}

.e-tab .e-tab-header .e-indicator {
  background: #000000 !important;
}

.e-tab-text,.e-dlg-header,.e-control-wrapper,.e-control{
  font-family: "Noto Sans", Arial, Helvetica, sans-serif !important;
}

.e-split-bar-hover,.e-split-bar-active

{
  background: #8000fa !important;
}

.e-split-bar-hover .e-resize-handler,.e-split-bar-active .e-resize-handler{
  color:#8000fa !important;
}

.e-popup.e-popup-open.e-dialog {
  overflow: hidden;
  border-radius: 8px;
}

.e-dialog .e-dlg-header-content {
  border-bottom: none;
  padding: 18px;
  background: black;
}

.e-dlg-header, .e-dlg-header * {
  color: rgb(255 255 255 / 87%);
  font-size: 18px;
  font-weight: normal;
}

.e-dialog .e-dlg-header-content .e-btn.e-dlg-closeicon-btn {
  background-color: rgb(210 210 210 / 67%);
  border-color: rgba(0, 0, 0, 0);
  border-radius: 50%;
  bottom: 0;
  float: right;
  height: 30px;
  left: 0;
  position: relative;
  width: 30px;
}

.e-btn.e-flat.e-primary, .e-css.e-btn.e-flat.e-primary {
  background: #8000fa;
  border-color: rgba(0, 0, 0, 0);
  color: #fff;
}

.e-btn.e-flat.e-primary:hover, .e-css.e-btn.e-flat.e-primary:hover {
  background: #000;
  border-color: rgba(0, 0, 0, 0);
  color: #fff;
}

/* AI Assistant */

.e-aiassistview .e-prompt-text {
  background-color: var(--pink-50);
  white-space: pre-wrap;
  height: fit-content;
  border-radius: 10px;
  padding: 10px 18px;
  font-size: 13px;
  line-height: 20px;
}

.e-aiassistview .e-views .e-content-body {
  line-height: 25px;
  border-radius: 10px;
  padding: 10px 18px;
  font-size: 13px;
  background-color: var(--violet-50);
}
.e-aiassistview .e-views .response-header {
  font-weight: 800;
  font-size: 12px;
  padding: 8px 10px 8px 4px;
  border-radius: 10px;
}

.e-aiassistview .e-views .prompt-header {
  font-weight: 800;
  font-size: 12px;
  padding: 8px 10px 8px 4px;
  border-radius: 10px;
}
.e-aiassistview .e-views .e-prompt-icon, .e-aiassistview .e-views .e-output-icon {
  border: none;
  color: #fff;
  background-color: var(--violet-600);
}

.e-aiassistview .e-view-container, .e-aiassistview .e-footer {
  width: max(90%, 425px);
}
.e-aiassistview .e-view-container{
  padding-top: 60px;
}


/* Intro JS CSS */

.introjs-button,.introjs-button:focus,.introjs-button:hover {
  background: #8000fa;
  text-shadow: none;
  color: #fff;
  border-radius: 50px;
  padding: 6px 18px 7px;
  box-shadow: none;
  font-weight: 700;
  font-size: 11px;
}

.introjs-button:focus {
  box-shadow: 0 0 0 .2rem rgba(128, 0, 250, .5);
}

.introjs-progressbar {
  box-sizing: content-box;
  float: left;
  width: 0%;
  height: 100%;
  font-size: 10px;
  line-height: 10px;
  text-align: center;
  background-color: rgba(128, 0, 250, 1);
}

.introjs-overlay {
  position: absolute;
  z-index: 999999;
  background: #000;
  opacity: 0;

  -webkit-transition: all 0.3s ease-out;
     -moz-transition: all 0.3s ease-out;
      -ms-transition: all 0.3s ease-out;
       -o-transition: all 0.3s ease-out;
          transition: all 0.3s ease-out;
}
/* END : Intro JS CSS */

.heading-flexy {
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(-220deg, rgba(250, 211, 18, 1) 0%, rgba(255, 0, 234, 1) 30%, rgba(73, 0, 223, 1) 65%, rgba(0, 212, 255, 1) 100%);
}

@media (max-width: 1199px){
  .pos-container .cart-container {
    margin-bottom: 20px;
    border-radius: 5px;
    padding: 0;
  }
  
  .pos-container .products-container {
  margin-bottom: 20px;
  }

  .pos-container .details-order {
    margin: auto;
    bottom:0;
    right:0;
    max-width:380px;
  }
}

@media (max-width: 1024px){
  .dropdown-settings .dropdown-settings-button {
    color: #fff;
  }
}

@media (max-width: 960px){
  .toggle-collapse-menu,.toggle-collapse-menu:hover,#sidebar-resizer-handler {
    display: none;
  }
  .content-top{
    padding: 0;
  }
  .content-top .content-search {
    flex: 1;
    padding: 2px 10px;
}

.pos-container .details-order {
  margin: auto;
  bottom:0;
  right:auto;
  left:auto;
  max-width:380px;
}

}

  @media(max-width: 768px) {


    

    .login-wrapper {
      padding: 20px;
      margin-block-start: 0;
      width: 100%;
      height:100%;
    }
   
    
    .login-special-content{
      display:none;
      width:100%;
    }
    .pos-container .accordion-body {
      padding: 17px 7px;
    }

    .pos-container .details-order {
      max-width:340px;
    }

    
  }




  
@media print {
  .pos-container {
    margin-bottom: 0;
  }
}