@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&family=Tajawal:wght@200;300;400;500;700;800;900&display=swap');

/* ==========================================================================
   RTL Support & Direction-Agnostic CSS
   ========================================================================== */

[dir="ltr"] .me-3 {
  margin-left: 1rem !important;
}

[dir="ltr"] .ms-3 {
  margin-left: 1rem !important;
}







/* RTL-specific variables and utilities */
[dir="rtl"] {
  --sidebar-padding-left: 13px;
  --sidebar-padding-right: 8px;
  --content-padding-left: 15px;
  --content-padding-right: 15px;
  --lg-content-padding-left: 10px;
  --lg-content-padding-right: 16px;
  --xl-content-padding-left: 10px;
  --xl-content-padding-right: 22px;
}

[dir="ltr"] {
  --sidebar-padding-left: 8px;
  --sidebar-padding-right: 13px;
  --content-padding-left: 15px;
  --content-padding-right: 15px;
  --lg-content-padding-left: 16px;
  --lg-content-padding-right: 10px;
  --xl-content-padding-left: 22px;
  --xl-content-padding-right: 10px;
}

/* RTL utility classes */
.rtl-flip {
  transform: scaleX(-1);
}

[dir="rtl"] .rtl-flip {
  transform: scaleX(1);
}

/* RTL font priority - Tajawal first for RTL languages */
[dir="rtl"] body,
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6,
[dir="rtl"] #main-menu > *,
[dir="rtl"] .font-noto, [dir="rtl"] .font-noto *,
[dir="rtl"] .font-outfit, [dir="rtl"] .font-outfit *,
[dir="rtl"] .dropdown-menu .dropdown-item, [dir="rtl"] .dropdown-menu .dropdown-header,
[dir="rtl"] .form-group label, [dir="rtl"] .form-group legend.col-form-label,
[dir="rtl"] .form-group.field-collection .accordion-item .form-group label,
[dir="rtl"] .form-group.field-collection .accordion-item .form-group legend.col-form-label,
[dir="rtl"] .user-menu-wrapper .dropdown-menu .dropdown-user-details,
[dir="rtl"] .user-menu-wrapper .user-details .user-name,
[dir="rtl"] .content-top .content-search input[type='search'][name='query']::placeholder,
[dir="rtl"] .datagrid thead a, [dir="rtl"] .datagrid thead span:not(.icon) {
  font-family: "Tajawal", "Outfit", sans-serif !important;
}

/* Additional RTL font overrides for specific elements */
[dir="rtl"] .navbar-dark .nav-link,
[dir="rtl"] .popover.ea-content-help-popover .popover-body,
[dir="rtl"] .e-tab-text, [dir="rtl"] .e-dlg-header, [dir="rtl"] .e-control-wrapper, [dir="rtl"] .e-control {
  font-family: "Tajawal", "Outfit", sans-serif !important;
}

/* RTL override for numbers class */
[dir="rtl"] .numbers {
  font-family: "Tajawal", "Ubuntu", sans-serif !important;
}

/* ==========================================================================
   Dark Mode CSS Custom Properties
   ========================================================================== */


/* Helpers */


.d-none-temporarily{
  display: none !important;
}

.opacity-30{
  opacity: 0.3;
}

:root {
  /* Light Mode Colors */
  --dm-body-bg: #ecedf6;
  --dm-bg-secondary: #000;
  --dm-content-bg: #ffffff;
  --dm-card-bg: #ffffff;
  --dm-text-primary: #333333;
  --dm-text-secondary: #666666;
  --dm-text-muted: #9fa9b7;
  --dm-border-color: #e7e7e7;
  --dm-border-light: #e8eaf9;
  --dm-input-bg: #f0f1f7;
  --dm-input-border: #0020946c;
  --dm-input-text: #3e0078;
  --dm-table-bg: #ffffff;
  --dm-table-hover: #f3e8ff3d;
  --dm-table-header: #000000;
  --dm-table-header-text: #ffffff;
  --dm-sidebar-bg: #000000;
  --dm-sidebar-menu: #ffffff;
  --dm-sidebar-menu-active: #09acff30;
  --dm-sidebar-menu-icon: #ffffff;
  --dm-header-bg: #f8fafc;
  --dm-header-text: #333333;
  --dm-modal-bg: #ffffff;
  --dm-modal-header: #f8fafc;
  --dm-dropdown-bg: #ffffff;
  --dm-dropdown-text: #666666;
  --dm-dropdown-hover: #f5f5f5;
  --dm-form-label: #666666;
  --dm-form-help: #9fa9b7;
  --dm-badge-bg: #f8f9fa;
  --dm-badge-text: #333333;
  --dm-alert-bg: #f8f9fa;
  --dm-alert-text: #333333;
  --dm-alert-border: #e7e7e7;
  --dm-shadow: 0 0.125rem 2px rgba(10,10,10,.09);
  --dm-shadow-hover: 0 4px 8px rgba(0, 0, 0, 0.2);
  --dm-overlay: rgba(0, 0, 0, 0.45);
  --dm-code-bg: #f5f7fa;
  --dm-code-text: #333333;
}

/* Dark Mode Colors */
body.ea-dark-scheme {
  --dm-body-bg: #202020;
  --dm-bg-secondary: #000;
  --dm-content-bg: #303030;
  --dm-card-bg: #2d2d2d;
  --dm-text-primary: #ffffff;
  --dm-text-secondary: #cccccc;
  --dm-text-primary: #ffffff;
  --dm-text-secondary: #cccccc;
  --dm-text-muted: #888888;
  --dm-border-color: #404040;
  --dm-border-light: #404040;
  --dm-input-bg: #545454;
  --dm-input-border: #8000fa;
  --dm-input-text: #ffffff;
  --dm-table-bg: #2d2d2d;
  --dm-table-hover: #343434;
  --dm-table-header: #1a1a1a;
  --dm-table-header-text: #ffffff;
  --dm-sidebar-bg: #000000;
  --dm-sidebar-menu: #ffffff;
  --dm-sidebar-menu-active: #09acff30;
  --dm-sidebar-menu-icon: #ffffff;
  --dm-header-bg: #1a1a1a;
  --dm-header-text: #ffffff;
  --dm-modal-bg: #2d2d2d;
  --dm-modal-header: #1a1a1a;
  --dm-dropdown-bg: #2d2d2d;
  --dm-dropdown-text: #ffffff;
  --dm-dropdown-hover: #404040;
  --dm-form-label: #cccccc;
  --dm-form-help: #888888;
  --dm-badge-bg: #404040;
  --dm-badge-text: #ffffff;
  --dm-alert-bg: #404040;
  --dm-alert-text: #ffffff;
  --dm-alert-border: #555555;
  --dm-shadow: 0 0.125rem 2px rgba(0,0,0,.3);
  --dm-shadow-hover: 0 4px 8px rgba(0, 0, 0, 0.5);
  --dm-overlay: rgba(0, 0, 0, 0.7);
  --dm-code-bg: #404040;
  --dm-code-text: #ffffff;
}


.accordion {
  --bs-accordion-color: hsl(225, 15%, 35%);
  --bs-accordion-bg: hsl(220, 20%, 91%);
  --bs-accordion-transition: all 0.08s ease-in, border-radius 0.15s ease;
  --bs-accordion-border-color: var(--bs-border-color);
  --bs-accordion-border-width: 1px;
  --bs-accordion-border-radius: 0.375rem;
  --bs-accordion-inner-border-radius: calc(0.375rem - 1px);
  --bs-accordion-btn-padding-x: 1.25rem;
  --bs-accordion-btn-padding-y: 1rem;
  --bs-accordion-btn-color: hsl(225, 15%, 35%);
  --bs-accordion-btn-bg: var(--bs-accordion-bg);
  --bs-accordion-btn-icon: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e);
  --bs-accordion-btn-icon-width: 1.25rem;
  --bs-accordion-btn-icon-transform: rotate(-180deg);
  --bs-accordion-btn-icon-transition: transform 0.2s ease-in-out;
  --bs-accordion-btn-active-icon: url(data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27 fill=%27%235768bc%27%3e%3cpath fill-rule=%27evenodd%27 d=%27M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z%27/%3e%3c/svg%3e);
  --bs-accordion-btn-focus-border-color: #b0bae8;
  --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(97, 116, 209, 0.25);
  --bs-accordion-body-padding-x: 1.25rem;
  --bs-accordion-body-padding-y: 1rem;
  --bs-accordion-active-color: #5768bc;
  --bs-accordion-active-bg: #eff1fa;
}


.dropdown-menu{
  background: linear-gradient(135deg, rgba(221, 59, 246, 1) 0%, rgba(37, 99, 235, 1) 100%);
  border: none !important;
  box-shadow: none !important;
  border-radius: 10px !important;
  padding: 10px !important;
  margin: 10px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  text-align: left !important;
}

.dropdown-menu .dropdown-divider{
  border-top-color:#5a5a5a5c !important;
  box-shadow: 0 -1px 0 #5a5a5a5c !important;
}

.dropdown-settings .dropdown-item.active, .dropdown-settings .dropdown-item.active i{
  color: var(--white) !important;
}





.application-menu .dropdown-menu .dropdown-header, .application-menu .dropdown-menu .dropdown-item {
  block-size: 36px !important;
}

.application-menu .navbar-brand{
  color: var(--dm-text-muted);
  font-size: var(--font-size-lg);
  margin-right: 0 !important;
  margin-left: 0 !important;
}

.application-menu .nav-link{
  font-size: var(--font-size-base) !important;
  white-space: nowrap !important;
}

.application-menu .navbar-nav .dropdown-menu a{
  font-size: var(--font-size-lg) !important;
}

.application-menu .navbar-brand img{
  margin-right: 6px;
}

[dir="rtl"] .application-menu .navbar-brand img{
  margin-left: 6px;
  margin-right: 0;
}



/* Custom Font Awesome icons for accordion (circle arrows) */
.accordion-button::after {
	display: none !important;
	background-image: none !important;
}

.accordion-button::before {
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	content: "\f055"; /* fa-plus-circle */
	position: absolute;
	right: 1.25rem;
	width: 1.25rem;
	height: 1.25rem;
	display: inline-block;
	text-align: center;
	line-height: 1.25rem;
	transition: all 0.2s ease-in-out;
	font-size: 1.4rem;
	color: #ffffff;
	background-image: none;
	transform: none;
	background-color: transparent;
}

.accordion-button:not(.collapsed)::before {
	content: "\f056"; /* fa-minus-circle */
}

/* RTL support for accordion icons */
[dir="rtl"] .accordion-button::before {
	right: auto;
	left: 1.25rem;
}

.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-danger-light,.btn-danger-light:hover{
  background-color: var(--red-200) !important;
  color: var(--red-700) !important;
  box-shadow: none !important;
}
.btn-danger-light i,.btn-danger-light:hover i,
.datagrid .dropdown-menu li a.btn-danger-light,.datagrid .dropdown-menu li a.btn-danger-light i{
  color: var(--red-700) !important;
}


.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: var(--blue-800);
  --bs-btn-border-color: var(--blue-800);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--blue-800);
  --bs-btn-hover-border-color: var(--blue-800);
  --bs-btn-focus-shadow-rgb: 130,138,145;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--blue-800);
  --bs-btn-active-border-color: var(--blue-800);
  --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, .btn-info:not(:disabled):not(.disabled):not(.btn-link):not(.btn-danger):hover, .btn-info:not(:disabled):not(.disabled):not(.btn-link):not(.btn-danger):focus, .btn-info:not(:disabled):not(.disabled):not(.btn-link):not(.btn-danger):active, .btn-info:not(:disabled):not(.disabled):not(.btn-link):not(.btn-danger):active:focus {
  background-color: var(--button-info-bg);
  color: var(--button-info-color);
}









.badge {
  border-radius: var(--border-radius);
  box-shadow: var(--badge-box-shadow);
  color: var(--text-color);
  font-size: var(--font-size-base);
  line-height: 18px;
  padding: 2px 5px;
}


.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.processing {
  background-color: var(--yellow-300);
  box-shadow: var(--yellow-800);
  color: var(--yellow-800);
}

.badge.badge-primary.validated, .badge.badge-primary.open {
  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, .badge.badge-primary.closed {
  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: var(--font-size-lg2);
  font-weight: bold;
  font-family: 'Outfit', sans-serif;
  /* 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;
}

/* RTL support for navbar badge */
[dir="rtl"] .navbar-dark .nav-link .badge{
  right: auto;
  left: 0;
}

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


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

/* RTL support for form tabs active indicator */
[dir="rtl"] .form-tabs-tablist .nav-tabs .nav-link.active:after {
  left: auto;
  right: var(--form-tabs-gutter-x);
}

.form-tabs-tablist .nav-tabs .nav-link.active {
  background: transparent;
  color: var(--blue-500);
  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 */
}

/* RTL support for editable update marker */
[dir="rtl"] .editable-update::after {
  right: auto;
  left: 10px;
  transform: translate(-50%, -50%);
}


.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;
}

/* RTL support for horizontal scroll track */
[dir="rtl"] .scroll-container .simplebar-track.horizontal {
  /* Keep same positioning for RTL */
}


[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,"Outfit","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: 11px;
  --font-size-sm: 12px;
  --font-size-base: 13px;
  --font-size-lg: 14px;
  --font-size-lg2: 15px;
  --font-size-xl: 16px;
  --font-size-xl2: 17px;
  --font-size-xl3: 19px;
  --font-size-xxl: 22px;
  --font-size-xxxl: 26px;
  --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: 246px;
  --menu-max-width: 242px;
  --sidebar-max-width-compact: 54px;
  --menu-max-width-compact: 52px;
  --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;
  --Xl-content-padding-left: 22px;
  --lg-content-padding-right: 10px;
  --user-avatar-icon-bg: #000;
  --user-avatar-icon-color: var(--gray-500);
  --user-name-color: var(--gray-800);
  --user-menu-impersonated-link-color: var(--color-primary);
  --popover-bg: var(--black);
  --popover-border-color: transparent;
  --popover-color: var(--white);
  --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: #5a5a5a5c !important;
  --dropdown-link-color: var(--white);
  --dropdown-link-hover-bg: #00000030;
  --dropdown-icon-color: var(--white);
  --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-500);
  --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-400);
  --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: var(--blue-600);
  --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;
}


#global-settings-icon{
  font-size: 18px;
}

a{
  color:var(--blue-500);
  font-weight: 600;
}
a:hover{
  color:#036ae0;
}

p {
  margin-bottom: 1rem;
  margin-top: 0;
  font-weight: 300;
  font-size: var(--font-size-lg);
}

h1,h2,h3,h4,h5,h6{
  font-family: "Outfit","Tajawal", sans-serif;
}



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;
}

.content-header-title .title{
  /* font-family: "Outfit","Tajawal", sans-serif !important; */
  letter-spacing: -0.2px;
}


hr{
  border-color: #808080;
}

.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: var(--dm-content-bg);
  color: var(--dm-text-primary);
  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: var(--dm-text-secondary);
}

.card {
  border: none;
  background-color: var(--dm-card-bg);
  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: var(--dm-modal-header);
  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: var(--dm-modal-header);
  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: var(--dm-text-primary) !important;
  background:none ;
}

.menu-application-item a:hover, .menu-application-item a.dropdown-toggle:hover{
  /* color: var(--dm-input-border) !important; */
  background:none ;
}


.navbar-nav .dropdown-menu a{
  width: 100%;
}

.navbar-nav .dropdown-menu a:hover{
  background:none ;
}

.dropdown-item.active, .dropdown-item:active, .dropdown-item.active:hover, .dropdown-item:active:hover {
  color: white !important;
  background-color: #00000030 !important;
  font-weight: 800 !important;
  text-decoration: none;
}
.dropdown-item:hover, .dropdown-item:focus{
  background-color: #00000030 !important;
}

.dropdown-item.active, .dropdown-item:active a,.dropdown-item.active, .dropdown-item:active i{
  color: white !important;
}

#navigation-toggler {
  color: white;
  filter: opacity(100%);
  font-size: 20px;
  margin: 0 5px 0 0px;
  padding: 0;
  width: 24px;
}


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

/* .table{
    border-radius: 4px;
    overflow: hidden;
} */
.table tbody {
  background: var(--dm-table-bg);
}

.table tbody tr:nth-child(even) {
  background-color: var(--dm-table-hover);
}

.table tbody tr:hover, .table tbody tr:hover td{
  background-color: var(--dm-table-hover);
}




/* Filter Form */

#filter-form .dropdown-toggle{
   font-size: 14px !important;
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
   }


/* Statistics */

.modern-stat-card {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.modern-stat-card:hover {
  /* transform: translateY(-5px); */
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}





.stat-card-content {
  padding: 16px 24px;
  color: white;
  position: relative;
  z-index: 2;
}

.stat-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
}

.stat-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.stat-icon i {
  font-size: 18px;
  color: white;
}

.modern-stat-card:hover .stat-icon {
  /* transform: scale(1.1); */
  background: rgba(255, 255, 255, 0.3);
}

.stat-label {
  font-size: 14px;
  font-weight: 500;
  opacity: 0.9;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  flex: 1;
}

.stat-value {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 4px;
  line-height: 1.2;
}

.stat-unit {
  font-size: 14px;
  opacity: 0.8;
  font-weight: 400;
}

.stat-description {
  font-size: 12px;
  opacity: 0.7;
  margin-bottom: 4px;
  line-height: 1.2;
  white-space: nowrap; 
  overflow: hidden; 
  text-overflow: ellipsis;
}

.stat-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 4px;
}

.stat-action-btn {
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: white;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.stat-action-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  color: white;
  /* transform: translateY(-1px); */
}

.stat-period {
  font-size: 10px;
  opacity: 0.6;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Stat period styles for compact, progress, and minimal cards */
.compact-stat-card,
.progress-stat-card,
.minimal-stat-card {
  position: relative;
}

.compact-stat-content,
.progress-stat-content,
.minimal-stat-content {
  position: relative;
}

.progress-stat-content {
  padding-bottom: 30px;
}

.minimal-stat-content {
  padding-bottom: 35px;
}

.compact-stat-period,
.minimal-stat-period {
  font-size: 10px;
  opacity: 0.6;
  display: flex;
  align-items: center;
  gap: 4px;
  color: white;
  position: absolute;
}

.compact-stat-period {
  top: 12px;
  right: 12px;
  bottom: auto;
}

.minimal-stat-period {
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
}

.progress-stat-period {
  font-size: 10px;
  opacity: 0.6;
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--dm-text-muted);
  position: absolute;
  bottom: 12px;
  right: 12px;
}

/* RTL support for stat periods */
[dir="rtl"] .compact-stat-period {
  right: auto;
  left: 12px;
}

[dir="rtl"] .progress-stat-period {
  right: auto;
  left: 12px;
}

/* Dark mode support for progress cards */
body.ea-dark-scheme .progress-stat-period {
  color: rgba(255, 255, 255, 0.6) !important;
}

/* Light cards support */
.stat-card-light .compact-stat-period,
.stat-card-light .minimal-stat-period {
  color: rgba(0, 0, 0, 0.6);
}

/* Standard color variations for different card types */
.stat-card-primary { background: linear-gradient(135deg, #5700ac 0%, #a60aee 100%); }
.stat-card-success { background: linear-gradient(320deg, #01e0aa 0%, #0cbe44 100%); }
.stat-card-info { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); }
.stat-card-warning { background: linear-gradient(135deg, #fa709a 0%, #fee140 100%); }
.stat-card-danger { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); }
.stat-card-secondary { background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%); }
.stat-card-light { background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); }
.stat-card-light .stat-card-content, .stat-card-light .stat-icon { color: black !important; }
.stat-card-dark { background: linear-gradient(135deg, #374151 0%, #1f2937 100%); }

/* Additional standard variations */
.stat-card-purple { background: linear-gradient(135deg, #5700ac 0%, #a60aee 100%); }
.stat-card-blue { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); }
.stat-card-green { background: linear-gradient(320deg, #01e0aa 0%, #0cbe44 100%); }
.stat-card-orange { background: linear-gradient(135deg, #fa709a 0%, #fee140 100%); }
.stat-card-pink { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); }
.stat-card-cyan { background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%); }
.stat-card-teal { background: linear-gradient(135deg, #fb7185 0%, #f43f5e 100%); }
.stat-card-indigo { background: linear-gradient(135deg, #c084fc 0%, #a855f7 100%); }

/* Neutral variations */
.stat-card-gray { background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%); }
.stat-card-slate { background: linear-gradient(135deg, #64748b 0%, #475569 100%); }
.stat-card-zinc { background: linear-gradient(135deg, #71717a 0%, #52525b 100%); }
.stat-card-stone { background: linear-gradient(135deg, #78716c 0%, #57534e 100%); }



/* ===========================================
   COMPACT STAT CARDS
   =========================================== */
   .compact-stat-card {
    border: none;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
    height: 100%;
}

.compact-stat-card:hover {
    /* transform: translateY(-2px); */
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.compact-stat-content {
    padding: 20px;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.compact-stat-header {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.compact-stat-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    background: rgba(255,255,255,0.2);
    color: white;
    font-size: 18px;
}

[dir="rtl"] .compact-stat-icon{
  margin-left: 12px;
  margin-right:0;
}

.compact-stat-info {
    flex: 1;
}

.compact-stat-label {
    font-size: 14px;
    font-weight: 500;
    color: rgba(255,255,255,0.9);
    margin-bottom: 4px;
}

.compact-stat-value {
    font-size: 24px;
    font-weight: 700;
    color: white;
    line-height: 1.2;
}

.compact-stat-unit {
    font-size: 14px;
    font-weight: 500;
    opacity: 0.8;
}

.compact-stat-description {
    font-size: 12px;
    color: rgba(255,255,255,0.8);
    line-height: 1.4;
    margin-top: auto;
}

/* ===========================================
   PROGRESS STAT CARDS
   =========================================== */
.progress-stat-card {
    border: none;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
    height: 100%;
    background: white !important;
}

/* Dark mode override */
body.ea-dark-scheme .progress-stat-card {
  background: linear-gradient(135deg, #374151 0%, #1f2937 100%) !important;
}

body.ea-dark-scheme .progress-stat-label {
    color: white !important;
}

body.ea-dark-scheme .progress-stat-value {
    color: white !important;
}

body.ea-dark-scheme .progress-stat-unit {
    color: white !important;
}

body.ea-dark-scheme .progress-stat-progress small {
    color: rgba(255,255,255,0.7) !important;
}

body.ea-dark-scheme .progress-stat-description {
    color: rgba(255,255,255,0.8) !important;
}

.progress-stat-card:hover {
    /* transform: translateY(-2px); */
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.progress-stat-content {
    padding: 12px;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.progress-stat-header {
    display: flex;
    align-items: center;
    margin-bottom: 6px;
}

.progress-stat-icon {
    width: 28px;
    height: 28px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
    background: var(--dm-primary-color);
    color: white;
    font-size: 16px;
}

[dir="rtl"] .progress-stat-icon {
  margin-left: 8px !important;
  margin-right: 0 !important;
}

.progress-stat-label {
    font-size: 15px;
    font-weight: 500;
    color: var(--dm-text-color);
}

.progress-stat-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--dm-text-color);
    margin-bottom: 4px;
    line-height: 1.1;
}

[dir="ltr"] .progress-stat-value {
  margin-left: auto;
}

[dir="rtl"] .progress-stat-value {
  margin-right: auto;
}

.progress-stat-unit {
    font-size: 12px;
    font-weight: 500;
    color: var(--dm-text-color);
    opacity: 0.8;
}

.progress-stat-progress {
    margin-bottom: 6px;
}

.progress-stat-progress .progress {
    height: 4px;
    background: var(--dm-border-color);
    border-radius: 2px;
}

.progress-stat-progress .progress-bar {
    background: var(--dm-primary-color);
    border-radius: 2px;
    transition: width 0.3s ease;
}

.progress-stat-progress small {
    font-size: 10px;
    color: var(--dm-text-muted);
}

.progress-stat-description {
    font-size: 10px;
    color: var(--dm-text-muted);
    line-height: 1.2;
    margin-top: auto;
}

/* Override gradient backgrounds for progress cards to use theme colors */
.progress-stat-card.stat-card-success .progress-stat-icon,
.progress-stat-card.stat-card-success .progress-stat-progress .progress-bar {
    background: #10b981 !important;
}

.progress-stat-card.stat-card-primary .progress-stat-icon,
.progress-stat-card.stat-card-primary .progress-stat-progress .progress-bar {
    background: #667eea !important;
}

.progress-stat-card.stat-card-info .progress-stat-icon,
.progress-stat-card.stat-card-info .progress-stat-progress .progress-bar {
    background: #4facfe !important;
}

.progress-stat-card.stat-card-warning .progress-stat-icon,
.progress-stat-card.stat-card-warning .progress-stat-progress .progress-bar {
    background: #fa709a !important;
}

.progress-stat-card.stat-card-danger .progress-stat-icon,
.progress-stat-card.stat-card-danger .progress-stat-progress .progress-bar {
    background: #f5576c !important;
}

.progress-stat-card.stat-card-purple .progress-stat-icon,
.progress-stat-card.stat-card-purple .progress-stat-progress .progress-bar {
    background: #764ba2 !important;
}

.progress-stat-card.stat-card-indigo .progress-stat-icon,
.progress-stat-card.stat-card-indigo .progress-stat-progress .progress-bar {
    background: #a855f7 !important;
}

.progress-stat-card.stat-card-dark .progress-stat-icon,
.progress-stat-card.stat-card-dark .progress-stat-progress .progress-bar {
    background: #1f2937 !important;
}

.progress-stat-card.stat-card-teal .progress-stat-icon,
.progress-stat-card.stat-card-teal .progress-stat-progress .progress-bar {
    background: #f43f5e !important;
}

/* ===========================================
   PROGRESS BAR STRIPED & ANIMATED EFFECTS
   =========================================== */

/* Striped effect for progress bars */
.progress-bar-striped {
    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-size: 1rem 1rem;
}

/* Animated stripes */
.progress-bar-animated {
    animation: progress-bar-stripes 1s linear infinite;
}

@keyframes progress-bar-stripes {
    0% {
        background-position-x: 1rem;
    }
}

/* ===========================================
   MINIMAL STAT CARDS
   =========================================== */
.minimal-stat-card {
    border: none;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
    height: 100%;
    text-align: center;
}

.minimal-stat-card:hover {
    /* transform: translateY(-2px); */
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.minimal-stat-content {
    padding: 30px 20px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.minimal-stat-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
    background: rgba(255,255,255,0.2);
    color: white;
    font-size: 24px;
}

.minimal-stat-value {
    font-size: 32px;
    font-weight: 700;
    color: white;
    margin-bottom: 8px;
    line-height: 1.2;
}

.minimal-stat-unit {
    font-size: 18px;
    font-weight: 500;
    opacity: 0.8;
}

.minimal-stat-label {
    font-size: 14px;
    font-weight: 500;
    color: rgba(255,255,255,0.9);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Custom with Table Card Styles */
.custom-with-table-card {
    /* min-height: 200px; */
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    display: flex;
}

.custom-with-table-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(128, 0, 250, 0.6) 0%,rgba(128, 0, 250, 0.4) 50%, rgba(0, 0, 0, 0) 100%);
    z-index: 0;
}

.custom-with-table-card .row {
    direction: ltr;
    flex-direction: row;
}

[dir="rtl"] .custom-with-table-card .row {
    direction: ltr;
    flex-direction: row;
}

/* Allow inner content to respect RTL direction */
.custom-with-table-card .row .col-6 {
    direction: inherit;
}

[dir="rtl"] .custom-with-table-card .row .col-6 {
    direction: rtl;
}

.custom-with-table-content {
    padding: 1.5rem;
    position: relative;
    z-index: 1;
    /* min-height: 200px; */
}

.custom-with-table-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    flex-shrink: 0;
    margin-right: 12px;
}

[dir="rtl"] .custom-with-table-icon {
    margin-right: 0;
    margin-left: 12px;
}

.custom-with-table-icon i {
    font-size: 18px;
    color: white;
}

.custom-with-table-card:hover .custom-with-table-icon {
    background: rgba(255, 255, 255, 0.3);
}

.custom-with-table-item:last-child {
    border-bottom: none !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Equal Height Stats Cards */
.stats-cards-container > div {
    display: flex;
}

.stats-cards-container .card {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.stats-cards-container .card > div {
    flex: 1;
    display: flex;
    flex-direction: column;
}






/* Responsive adjustments */
@media (max-width: 768px) {
  
  
  .stat-value {
      font-size: 28px;
  }
  
  .stat-card-content {
      padding: 20px;
  }
}

.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;
  color: #a5a5a5 !important;
}
.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;
}

.content-top .content-search .form-group {
    flex-basis: 100%;
    padding: 2px 0;
    margin: 0 0 0 10px !important;
}

/* RTL support for content search form group */
[dir="rtl"] .content-top .content-search .form-group {
    margin-left: 0;
    margin: 0 10px 0 0 !important;
}

.content-top .content-search .form-widget {
    display: flex !important;
}

/* Fix Datatable Grid Width */
#main{
  display: grid;
  /* min-height: 80vh; */
}

#main-menu > * {
  font-family: "Outfit","Tajawal", sans-serif;
}

/* RTL-aware sidebar scrollbar positioning */
#main-menu .simplebar-track.simplebar-vertical {
  right: -5px;
}

[dir="rtl"] #main-menu .simplebar-track.simplebar-vertical {
  right: auto;
  left: -5px;
}

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


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

/* 
::-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-flexynity{
  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;
}

.text-pink {
  color: #ff00eb !important;
}

.text-gray {
  color: #bbbfc6 !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: var(--blue-500);
  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: var(--blue-500);
}

.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: 6px;
  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 28px 10px 32px;
}

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

}

.responsive-header {
  padding: 14px 15px;
}

.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: "Outfit","Tajawal", sans-serif;
  letter-spacing: -0.1px;
  font-size: var(--font-size-lg);
}

.font-noto, .font-noto *{
  font-family: "Outfit","Tajawal", sans-serif !important;
}
.font-outfit, .font-outfit *{
  font-family: "Outfit","Tajawal", sans-serif !important;
}

body:not(.ea-dark-scheme) {
  background-color: var(--dm-body-bg);
}

body.ea-dark-scheme {
  background-color: var(--dm-body-bg);
}

table{
  font-weight: 300;
  font-size: var(--font-size-lg2);
}

/* body:not(.ea-dark-scheme) thead,body:not(.ea-dark-scheme) tbody,body:not(.ea-dark-scheme) tfoot, body:not(.ea-dark-scheme) tr, body:not(.ea-dark-scheme) td, body:not(.ea-dark-scheme) 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"],td[data-column="orderNumberFormatted"] {
  font-weight: 700 !important;
  color : var(--purple-800) !important;
}


/* Field TD Styles */
table td.field-filtered-association,table td.field-association,table .badge-text{
  text-align: center !important;
}


table td.field-datetime{
  font-weight: 500;
  font-size: var(--font-size-lg2);
  white-space: nowrap;
}



table td.field-money{

  font-size: var(--font-size-xl);
}

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;
}

/* RTL support for sticky actions column */
[dir="rtl"] table.datagrid th:last-child,
[dir="rtl"] table.datagrid td:last-child {
  right: auto;
  left: 0;
}

/* Fix batch actions column width in RTL to prevent colspan-like appearance */
[dir="rtl"] table.datagrid th:first-child,
[dir="rtl"] table.datagrid td.batch-actions-selector {
  width: auto;
  min-width: 50px;
  max-width: 50px;
}

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;
}

/* Internal shadows for scrollable table depth effect */
#datagrid {
  position: relative;
}

#datagrid::before,
#datagrid::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 20px;
  pointer-events: none;
  z-index: 10;
  transition: opacity 0.3s ease;
}

#datagrid::before {
  left: 0;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.12) 0%, rgba(0, 0, 0, 0.04) 20%, transparent 50%, transparent 100%);
  opacity: 0;
  border-radius: 10px;
}

#datagrid::after {
  right: 0;
  background: linear-gradient(to left, rgba(0, 0, 0, 0.12) 0%, rgba(0, 0, 0, 0.04) 20%, transparent 50%, transparent 100%);
  opacity: 0;
  border-radius: 10px;
}

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{
  position: sticky;
  right: 0;
  background-color: var(--dm-table-bg);
  z-index: 15;
}

table.datagrid:not(.datagrid-empty) tr:not(.empty-row) td.actions::before, 
table.datagrid:not(.datagrid-empty) tr:not(.empty-row) td.actions.actions-as-dropdown::before {
  content: '';
  position: absolute;
  top: 0;
  height: 103%;
  left: -10px;
  bottom: 0;
  width: 10px;
  background: linear-gradient(to left, rgba(0, 0, 0, 0.12) 0%, rgba(0, 0, 0, 0.04) 20%, transparent 50%, transparent 100%);
  pointer-events: none;
  z-index: 5;
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* Show shadow when scrolled left */
#datagrid.scrolled-left table.datagrid:not(.datagrid-empty) tr:not(.empty-row) td.actions::before,
#datagrid.scrolled-left table.datagrid:not(.datagrid-empty) tr:not(.empty-row) td.actions.actions-as-dropdown::before {
  opacity: 1;
}

/* Show right shadow when scrolled right (LTR) */
#datagrid.scrolled-right table.datagrid:not(.datagrid-empty) tr:not(.empty-row) td.actions::after,
#datagrid.scrolled-right table.datagrid:not(.datagrid-empty) tr:not(.empty-row) td.actions.actions-as-dropdown::after {
  content: '';
  position: absolute;
  top: 0;
  height: 103%;
  right: -10px;
  left: auto;
  bottom: 0;
  width: 10px;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.12) 0%, rgba(0, 0, 0, 0.04) 20%, transparent 50%, transparent 100%);
  pointer-events: none;
  z-index: 5;
  opacity: 1;
  transition: opacity 0.3s ease;
}

/* Dark theme for right shadow (LTR) */
body.ea-dark-scheme #datagrid.scrolled-right table.datagrid:not(.datagrid-empty) tr:not(.empty-row) td.actions::after,
body.ea-dark-scheme #datagrid.scrolled-right table.datagrid:not(.datagrid-empty) tr:not(.empty-row) td.actions.actions-as-dropdown::after {
  background: linear-gradient(to right, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.04) 20%, transparent 50%, transparent 100%);
}

/* Dark theme for actions shadow */
body.ea-dark-scheme table.datagrid:not(.datagrid-empty) tr:not(.empty-row) td.actions::before,
body.ea-dark-scheme table.datagrid:not(.datagrid-empty) tr:not(.empty-row) td.actions.actions-as-dropdown::before {
  background: linear-gradient(to left, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.04) 20%, transparent 50%, transparent 100%);
}

/* RTL support for actions shadow */
[dir="rtl"] table.datagrid:not(.datagrid-empty) tr:not(.empty-row) td.actions::before, 
[dir="rtl"] table.datagrid:not(.datagrid-empty) tr:not(.empty-row) td.actions.actions-as-dropdown::before {
  content: '';
  position: absolute;
  top: 0;
  height: 103%;
  right: -10px;
  left: auto;
  bottom: 0;
  width: 10px;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.12) 0%, rgba(0, 0, 0, 0.04) 20%, transparent 50%, transparent 100%);
  pointer-events: none;
  z-index: 5;
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* Show RTL shadow when scrolled right */
[dir="rtl"] #datagrid.scrolled-right table.datagrid:not(.datagrid-empty) tr:not(.empty-row) td.actions::before,
[dir="rtl"] #datagrid.scrolled-right table.datagrid:not(.datagrid-empty) tr:not(.empty-row) td.actions.actions-as-dropdown::before {
  opacity: 1;
}

/* Show RTL left shadow when scrolled left */
[dir="rtl"] #datagrid.scrolled-left table.datagrid:not(.datagrid-empty) tr:not(.empty-row) td.actions::after,
[dir="rtl"] #datagrid.scrolled-left table.datagrid:not(.datagrid-empty) tr:not(.empty-row) td.actions.actions-as-dropdown::after {
  content: '';
  position: absolute;
  top: 0;
  height: 103%;
  left: -10px;
  right: auto;
  bottom: 0;
  width: 10px;
  background: linear-gradient(to left, rgba(0, 0, 0, 0.12) 0%, rgba(0, 0, 0, 0.04) 20%, transparent 50%, transparent 100%);
  pointer-events: none;
  z-index: 5;
  opacity: 1;
  transition: opacity 0.3s ease;
}



/* Show shadows when scrolled */
#datagrid.scrolled-left::before {
  opacity: 1;
}

#datagrid.scrolled-right::after {
  opacity: 1;
}
/* Dark theme for RTL left shadow */
[dir="rtl"] body.ea-dark-scheme #datagrid.scrolled-left table.datagrid:not(.datagrid-empty) tr:not(.empty-row) td.actions::after,
[dir="rtl"] body.ea-dark-scheme #datagrid.scrolled-left table.datagrid:not(.datagrid-empty) tr:not(.empty-row) td.actions.actions-as-dropdown::after {
  background: linear-gradient(to left, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.04) 20%, transparent 50%, transparent 100%);
}

/* RTL Dark theme for actions shadow */
[dir="rtl"] body.ea-dark-scheme table.datagrid:not(.datagrid-empty) tr:not(.empty-row) td.actions::before,
[dir="rtl"] body.ea-dark-scheme table.datagrid:not(.datagrid-empty) tr:not(.empty-row) td.actions.actions-as-dropdown::before {
  background: linear-gradient(to right, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.04) 20%, transparent 50%, transparent 100%);
}

/* Dark theme shadows */
body.ea-dark-scheme #datagrid::before {
  background: linear-gradient(to right, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.04) 20%, transparent 50%, transparent 100%);
}

body.ea-dark-scheme #datagrid::after {
  background: linear-gradient(to left, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.04) 20%, transparent 50%, transparent 100%);
}
table.datagrid tr:hover td:last-child {
  z-index: 20;
  background-color: #faf6ff !important;
}

/* RTL support for datagrid hover */
[dir="rtl"] 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: 8px 12px;
}

.datagrid tbody tr td .badge{
  font-size: var(--font-size-lg);
}



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: var(--dm-content-bg);
  border: 1px solid var(--dm-border-color);
  border-radius: 8px;
  box-shadow: var(--dm-shadow);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#easyadmin-menu-grid .grid-item:hover {
  transform: translateY(-3px);
  box-shadow: var(--dm-shadow-hover);
}

#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: var(--dm-text-primary);
}

#easyadmin-menu-grid .grid-item.active {
  border-color: #4caf50;
  background-color: var(--dm-table-hover);
}



.dropdown-menu .dropdown-item, .dropdown-menu .dropdown-header {
  font-size: var(--font-size-lg2);
  font-family: "Outfit","Tajawal", sans-serif;
}
.dropdown-menu .dropdown-header, .dropdown-menu .dropdown-item {
  block-size: 30px;
  align-items: center;
}
.dropdown-menu .dropdown-header {
  font-size: 12px;
  font-weight: 600;
  color: #ffffff90;
  /* color: var(--blue-500) */
}

.dropdown-settings .dropdown-item.active {
  background: var(--blue-500)11;
  box-shadow: inset 0 0 0 1px var(--blue-500)82;
  color: var(--dropdown-settings-active-item-color);
}

.dropdown-menu a, .dropdown-menu a:hover, .dropdown-menu a:active{
  color: var(--white);
}

.dropdown-menu i {
  /* color: var(--dropdown-icon-color); */
  color: var(--white);
  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: "Outfit", 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: var(--dm-body-bg);
}

body.ea-dark-scheme .content-header {
  background-color: var(--dm-body-bg);
}

  .content-header-help i {
      color: var(--dm-text-primary);
      cursor: pointer;
      font-size: 17px;
  }

.content-field-help,.content-field-help:hover {
  color: var(--dm-text-primary);
      cursor: pointer;
      font-size: var(--font-size-lg2);
}

.datagrid thead th {
  background-color: #333;
  text-align: center;
}
.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: var(--blue-400) !important;
}
.datagrid thead .sorted {
  box-shadow: inset 0 -3px 0 var(--blue-400);
}

.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-family: "Outfit","Tajawal", sans-serif !important;
  font-weight: 700;
  padding: 0 0 5px;
}

.form-check-input:checked {
  background-color: var(--blue-500);
  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 .form-help {
    color: var(--form-help-color);
    font-style: italic;
    font-weight: 400;
    display: block;
    font-size: 6px !important;
    margin-top: 1px;
    margin-bottom: 1px;
    transition: color 0.5s ease;
}

.popover.ea-content-help-popover .popover-body {
  font-family: 'Outfit',sans-serif;
  background: var(--popover-bg);
  border-radius: var(--border-radius);
  color: var(--popover-color);
  font-size: var(--font-size-lg);
  font-weight: 300;
  padding: 15px;
  text-align: left;
}

.form-widget{
  position: relative;
}




.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: 10px;
  right: 8px;
  z-index: 9;
  padding: 0;
}

[dir="rtl"] .form-widget .form-widget-modal-ai-container{
  right: auto;
  left: 8px;
}

.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 ;
}
.content-body .form-group {
  padding: 0 0 15px 0;
}

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

.field-boolean.form-group .form-widget{
  display: inline-block;
}

.form-group label, .form-group legend.col-form-label,.form-group.field-collection .accordion-item .form-group label, .form-group.field-collection .accordion-item .form-group legend.col-form-label {
  color: var(--form-label-color); 
  font-family: "Outfit","Tajawal", sans-serif;
  font-size: var(--font-size-lg2);
  font-weight: 600;
  margin: 0 0 4px !important;
  padding: 0;
  display: contents;
}

.form-group.field-collection .accordion-item .form-group label, .form-group.field-collection .accordion-item .form-group legend.col-form-label {
  margin: 3px 10px 0 0;
  padding: 0;
  width: auto;
}

.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,.form-control:focus {
  border-color: #8000fa;
  box-shadow:  0 0 0 0.25rem #8000fa30;
  outline: 0;
  
}

/* Style for non-pristine/non-empty form fields (EasyAdmin forms) */
.form-widget.field-touched .form-control:not(:focus),
.form-widget.field-touched .form-select:not(:focus),
.form-widget.field-touched textarea.form-control:not(:focus),
.form-widget.field-touched input.form-check-input:not(:focus) {
  border: 1px solid #4c00946c;
  box-shadow: 0 0 0 0.25rem #8000fa30;
}

/* Style for TomSelect when not empty */
/* .form-widget.field-touched .ts-wrapper:not(.focus) .ts-control {
  border: 1px solid #4c00946c;
  box-shadow: 0 0 0 0.25rem #8000fa30;
} */

/* Style for React forms (direct form-control without form-widget wrapper) */
.form-control.field-touched:not(:focus),
.form-select.field-touched:not(:focus),
textarea.form-control.field-touched:not(:focus),
input.form-check-input.field-touched:not(:focus) {
  border: 1px solid #4c00946c;
  box-shadow: 0 0 0 0.25rem #8000fa30;
}

/* Style for react-select components when not empty */
.react-select__control.field-touched:not(.react-select__control--is-focused) {
  border: 1px solid #4c00946c !important;
  box-shadow: 0 0 0 0.25rem #8000fa30 !important;
}

/* Alternative selector for react-select (in case class is added to container) */
.react-select.field-touched .react-select__control:not(.react-select__control--is-focused) {
  border: 1px solid #4c00946c !important;
  box-shadow: 0 0 0 0.25rem #8000fa30 !important;
}



.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-lg);
  font-weight: 600;
}



.form-group.field-collection .field-collection-add-button,.form-group.field-collection .field-collection-add-button:focus {
  margin-top: 10px;
  background: var(--blue-500);
  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-link{
  
  font-size: var(--font-size-xl) !important;
  border: none !important;
}



.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;
}




.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: var(--dm-content-bg);
    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: var(--dm-content-bg);
}


.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,.form-control {
  height: 40px;
  font-size: var(--font-size-lg2) !important;
  font-weight: bold;
  color: var(--dm-input-text);
  /* background-color: #fff; */

transition: box-shadow 0.2s, border-color 0.2s;
/* background-color: #f5f7f9; */
background-color: var(--dm-input-bg);
border-color: transparent;
/* box-shadow: rgba(0, 0, 0, 0.075) 0px 1px 2px inset; */
/* border: 1px solid #e8eaf9; */
box-sizing: border-box;
 
}
textarea.form-control{
  font-weight: 400 !important;
}

.ts-wrapper .ts-control {
    padding: 3px 28px 4px 12px;
}
[dir="rtl"] .ts-wrapper .ts-control{
  padding: 3px 16px 4px 28px !important;
}

[dir="rtl"] .plugin-clear_button.ts-wrapper .clear-button, [dir="rtl"] .plugin-clear_button.ts-wrapper.multi .clear-button{
  right: auto !important;
  left: 32px !important;
}


.ts-wrapper.disabled .ts-control {
  background-color: var(--dm-border-color) !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: -10px;
} */

[dir="rtl"] .input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
  /* margin-right: -10px;
  margin-left: 0; */
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-top-left-radius: var(--border-radius);
  border-bottom-left-radius: var(--border-radius);
}

[dir="rtl"] .input-group:not(.has-validation) > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating), 
[dir="rtl"] .input-group:not(.has-validation) > .dropdown-toggle:nth-last-child(n+3), 
[dir="rtl"] .input-group:not(.has-validation) > .form-floating:not(:last-child) > .form-control, 
[dir="rtl"] .input-group:not(.has-validation) > .form-floating:not(:last-child) > .form-select

 {
    border-top-right-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius);
    border-top-left-radius: 0;
    border-bottom-left-radius: 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-xl2);
  font-weight: 800;
  font-family: "Outfit","Tajawal", sans-serif;
}

/* Make menu tabs responsive in Crud pages */
/* .form-tabs-tablist .nav-tabs a {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  max-width: 100px;
} */


.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: 12px;
  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;
  padding-left: 10px !important;
}



/* RTL support for form input padding */
[dir="rtl"] .form-widget input[type="text"].form-control:not([data-ea-align="right"]),
[dir="rtl"] .form-widget textarea.form-control:not([data-ea-align="right"]) {
  padding-right: 10px !important;
  padding-left: 30px !important;
}

/* Exception for disabled forms in RTL */
[dir="rtl"] .form-widget input[type="text"].form-control:disabled:not([data-ea-align="right"]),
[dir="rtl"] .form-widget input[type="text"].form-control[disabled]:not([data-ea-align="right"]),
[dir="rtl"] .form-widget textarea.form-control:disabled:not([data-ea-align="right"]),
[dir="rtl"] .form-widget textarea.form-control[disabled]:not([data-ea-align="right"]) {
  padding-right: 35px !important;
  padding-left: 10px !important;
}




.form-tabs .nav-tabs .nav-link.active {
  color: var(--blue-500);
}
.form-tabs .nav-tabs .nav-link.active:after{
  background: var(--blue-500);
}
.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;
}

/* Ensure proper column alignment in RTL mode */
[dir="rtl"] table.datagrid {
  direction: rtl;
}
table.datagrid tr th:first-child {
  border-top-left-radius: 7px;
}

[dir="rtl"] table.datagrid tr th:first-child {
  border-top-left-radius: 0;
  border-top-right-radius: 7px;
}

table.datagrid tr th:last-child {
  border-top-right-radius: 7px;
}

[dir="rtl"] table.datagrid tr th:last-child {
  border-top-right-radius: 0;
  border-top-left-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%;
  min-height: 50px;
}







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

.datagrid td{
  box-shadow: none;
}




.placeholder-glow .placeholder{
  background: linear-gradient(270deg, rgb(235 234 247) 0%, rgb(213 220 240) 100%) !important;
  border-radius: 4px;
  margin-bottom: 5px;
}



.btn {
  border-radius: 50px;
  padding: 6px 18px 7px;
  box-shadow: none;
  font-weight: 700;
  font-size: var(--font-size-xl);
  font-family: "Outfit","Tajawal", sans-serif;
}

.btn.btn-md{
  border-radius: 50px;
  padding: 6px 18px 7px;
  box-shadow: none;
  font-weight: 700;
  font-size: var(--font-size-base);
}

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

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


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

/* RTL support for content extra options */
[dir="rtl"] .content-top .content-extra-options .extra-option{
  margin-right: 0;
  margin-left: 8px;
}

.content-top .content-extra-options .extra-option img{
  width: 22px;
}


.content-top .content-extra-options .link{
  font-size: 18px;
  color: var(--dm-text-primary);
  position:relative;
  display: flex;
  align-self: flex-end;
}

.user-menu-wrapper .dropdown-menu .dropdown-user-details {

  font-family: "Outfit","Tajawal", sans-serif;
}

.user-menu-wrapper .dropdown-menu .dropdown-user-details .user-label {
  color: #ffffff90;
  display: block;
  font-size: var(--font-size-sm);
  margin-bottom: 0;
  min-width: 200px;
  font-family: "Outfit","Tajawal", sans-serif;
}
.user-menu-wrapper .user-avatar {
  background: #000;
  block-size: 28px;
  border-radius: 20px;
  color: var(--user-avatar-icon-color);
  display: block;
  inline-size: 5em;
  max-inline-size: 28px;
  text-align: center;
}

.user-menu-wrapper .user-details .user-name {
  margin-left: 6px;
  font-size: 14px;
  font-family: "Outfit","Tajawal", sans-serif;
}

/* RTL support for user name */
/* [dir="rtl"] .user-menu-wrapper .user-details .user-name {
  margin-left: 0;
  margin-right: 6px;
} */

.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: var(--dm-text-primary);
  font-size: 16px;
  padding: 0px 0px 0px 15px;
}

[dir="rtl"] .dropdown-settings .dropdown-settings-button {
  padding: 0px 15px 0px 10px;
}

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

.content-top .content-extra-options .link span.badge {
  position: absolute;
  left: 10px;
  top: -6px;
  padding: 0px 5px;
  font-size: var(--font-size-xs);
  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;
  top:0;
}

.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: 17px;
  height: 23px;
  margin-right: 4px;
  margin-top: 0;
  vertical-align: middle;
  display:inline-block !important;
  width: 20px;
  color: #ffffff;
}

/* RTL support for menu icons */
[dir="rtl"] #main-menu .menu .menu-icon {
  margin-right: 0;
  margin-left: 4px;
}

body:not(.ea-dark-scheme) .technical-support .icon-tech-support-white{
  display: none;
}



body.ea-dark-scheme .technical-support .icon-tech-support{
  display: none;
}

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

[dir="rtl"] #main-menu .menu .submenu-toggle-icon {
  float: left !important;
  margin-left: 8px !important;
  transform: rotate(180deg) !important;
}

#main-menu .menu .submenu .menu-item{
  padding: 3px 0 3px 5px;
  margin: 0;
}

/* RTL support for submenu items */
[dir="rtl"] #main-menu .menu .submenu .menu-item{
  padding: 3px 5px 3px 0;
}

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

#main-menu .menu .submenu .menu-icon{
  height:20px;
  padding: 2px 0 0;
}
#main-menu .menu .submenu a {
  font-weight: 500;
  font-size: var(--font-size-lg);
  color: #fff;
  padding:4px  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: var(--font-size-xl2);
  color: #ffffff;
}

#main-menu .menu a.section-link {
    color: var(--dm-text-muted) !important;
    font-weight: bold !important;
    text-transform: initial !important;
    font-size: var(--font-size-xl) !important;
    transition: color 0.3s ease;
}
#main-menu .menu a.section-link:hover {
  color: var(--dm-text-secondary) !important;
}
#main-menu .menu .menu-item.active:not(.expanded) .menu-icon,
#main-menu .menu .menu-item.active:not(.expanded) a {
  color: var(--blue-400);
}
#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: 5px 0;
}

#main-menu .menu .menu-header {
  color: var(--dm-text-muted);
  font-weight: bold;
  font-size: 10px;
  padding: 0 5px 4px 0;
}


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

#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;
}

[dir="rtl"] .menu-header-contents .icon-3d{
  margin-right:0;
  margin-left:6px;
}

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

.icon-3d {
  background-image: url("/themes/default/admin/apps/icons/flexynity-app-icon.png");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  padding: 3px;
  margin-top: 2px;
  min-height: 30px;
  min-width: 30px;
  /* 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/flexynity-app-icon-24.png");
  background-size: 30px;
}

/* .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%;}}

/* Reusable overlay mask with blur effect */
.bg-overlay-mask {
	position: relative;
}

.bg-overlay-mask::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.2);
	backdrop-filter: blur(1px);
	-webkit-backdrop-filter: blur(1px);
	z-index: 1;
	border-radius: inherit;
}

.bg-overlay-mask > * {
	position: relative;
	z-index: 2;
}

@keyframes slideInFromLeft {
  0% {
    opacity: 0;
    transform: translateX(-20px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInFromRight {
  0% {
    opacity: 0;
    transform: translateX(20px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

.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{
  background: #333;
  color:white !important;
}

.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;
}

.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: var(--blue-500);
  /* 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: var(--blue-500);
}

.content-top,
.content-top .content-search input[type='search'][name='query'] {
  background: #ffffff !important;
  color:var(--blue-500);
  font-weight: 600;
}

/* Dark mode styling for content-top */
body.ea-dark-scheme .content-top,
body.ea-dark-scheme .content-top .content-search input[type='search'][name='query'] {
    background: #343434 !important;
    color: var(--dm-input-text);
    font-weight: 600;
    border: none;
    box-shadow: none;
}

.content-top .content-search input[type='search'][name='query']::placeholder {
  font-size: var(--font-size-lg2) !important;
  font-family: "Outfit","Tajawal", sans-serif !important;
}
.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;
  font-family: "Outfit","Tajawal", sans-serif !important;
}

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



.action-filters-button .action-filters-button-count{
  color: white !important;
}

.datagrid thead a, .datagrid thead span:not(.icon) {
  color: var(--table-thead-color);
  font-family: "Outfit","Tajawal", sans-serif !important;
  display: block;
  font-weight: 500;
  line-height: 1.357;
  padding: 12px 8px;
  white-space: nowrap;
  height: 40px; /*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: 7px 0;
  margin-left: 7px !important;
  display: flex;
  justify-content: center;
  border-radius: 30px;
  height: 32px;
  width: 32px;
}

.actions:not(actions-as-dropdown) a:hover,.actions:not(actions-as-dropdown) a.btn:hover{
  border-radius: 30px;
}

.actions .dropdown-menu.show{
  background-color: #f0f1f7 !important;
  border: none;
}


.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;
  text-align: center;
}
.datagrid td.actions a:not(.dropdown-item)+a:not(.dropdown-item){
  margin-inline-start: 0;
}


.list-pagination-counter {
  color: var(--pagination-color);
  font-size: var(--font-size-xl);
}
.actions:not(actions-as-dropdown) a i {
  font-size: var(--font-size-lg2) !important;
  margin-top: 2px;
}

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


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

.actions:not(actions-as-dropdown) a.action-detail{
  background-color: var(--blue-500);
  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;
}


#quick-actions{
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%);
}


@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: linear-gradient(135deg, rgba(59, 130, 246, 0.95) 0%, rgba(37, 99, 235, 0.95) 100%);
    border-radius: 8px;
    /* margin-left: 40px; */
    margin-left: 10px;
    padding: 8px 12px 8px 12px;
    position: absolute;
    top: 28px;
    width: max-content;
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.3);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    animation: slideInFromLeft 0.2s ease-out;
    z-index: 1002;
    min-width: 180px;
  }
  
  [dir="rtl"] body.ea-sidebar-width-compact #main-menu .menu .menu-item:hover .submenu {
    margin-left: 0;
    /* margin-right: 40px; */
    margin-right: 10px;
    animation: slideInFromRight 0.2s ease-out;
  }
  body.ea-sidebar-width-compact #main-menu .menu .menu-item:hover .submenu a{
    padding: 6px 8px;
    border-radius: 8px;
    transition: all 0.2s ease;
    color: white;
    font-weight: 500;
  }
  
  body.ea-sidebar-width-compact #main-menu .menu .menu-item:hover .submenu a:hover{
    background: rgba(0, 0, 0, 0.2);
  }

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

  body.ea-sidebar-width-compact #main-menu .menu .menu-header .menu-item-label {
    display: none;
    align-items: center;
    justify-content: center;
    color: #fff;
    width: 100%;
    height: auto;
    font-size: 10px;
    font-weight: 600;
    text-align: center;
}
body.ea-sidebar-width-compact #main-menu .menu a{
  font-size: 12px;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  height: 100%;
}
body.ea-sidebar-width-compact #main-menu .menu .menu-header .menu-item-label{
 
  justify-content: flex-start;
  padding-left: 6px;
 
}

[dir="rtl"] body.ea-sidebar-width-compact #main-menu .menu .menu-header .menu-item-label{
 
  justify-content: flex-end;
  padding-right: 6px;
 
}

body.ea-sidebar-width-compact #main-menu .menu .menu-item .menu-item-label {
        flex: 1;
        margin-left: 16px !important;
        font-weight: 500;
        transition: all 0.2s ease;
        text-align: center;
        display: none;
        align-items: center;
        justify-content: flex-start;
    }

  [dir="rtl"] body.ea-sidebar-width-compact #main-menu .menu .menu-item .menu-item-label {

        margin-right: 16px !important;
        margin-left: 0px !important;
    }

    body.ea-sidebar-width-compact #main-menu .menu .submenu .menu-item .menu-item-label {
      margin-left: 0px !important;
  }

  [dir="rtl"] body.ea-sidebar-width-compact #main-menu .menu .submenu .menu-item .menu-item-label {
    margin-right: 0px !important;
}

   
    body.ea-sidebar-width-compact #main-menu:hover .menu .menu-item .menu-item-label, 
    body.ea-sidebar-width-compact #main-menu:hover .menu .menu-item .menu-item-badge,
    body.ea-sidebar-width-compact #main-menu:hover .menu .menu-item .submenu-toggle .submenu-toggle-icon,
    body.ea-sidebar-width-compact #main-menu.menu-expanded .menu .menu-item .menu-item-label,
    body.ea-sidebar-width-compact #main-menu.menu-expanded .menu .menu-item .menu-item-badge,
    body.ea-sidebar-width-compact #main-menu.menu-expanded .menu .menu-item .submenu-toggle .submenu-toggle-icon {
        display: flex;
        font-size: 16px;
    }
    
    /* Submenu styling for expanded menu state */
    body.ea-sidebar-width-compact #main-menu .menu .menu-item:hover .submenu {
        background: linear-gradient(135deg, rgb(221 59 246 / 95%) 0%, rgba(37, 99, 235, 0.95) 100%);
        border-radius: 12px;
        /* margin-left: 40px; */
        margin-left: 10px;
        padding: 8px 12px 8px 12px;
        position: absolute;
        top: 28px;
        width: max-content;
        box-shadow: 0 8px 25px rgba(59, 130, 246, 0.3);
        backdrop-filter: blur(8px);
        border: none;
        animation: slideInFromLeft 0.2s ease-out;
        z-index: 1002;
        min-width: 180px;
    }
    
    [dir="rtl"] body.ea-sidebar-width-compact #main-menu.menu-expanded .menu .menu-item:hover .submenu {
        margin-left: 0;
        /* margin-right: 40px; */
        margin-right: 10px;
        animation: slideInFromRight 0.2s ease-out;
    }
    
    body.ea-sidebar-width-compact #main-menu:hover .menu .menu-header .menu-item-label,
    body.ea-sidebar-width-compact #main-menu.menu-expanded .menu .menu-header .menu-item-label {
        display: flex;
    }
    
    body.ea-sidebar-width-compact #main-menu.menu-expanded {
        min-width: var(--menu-max-width);
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.15);
        /* transform: translateY(-2px); */
    }
    
    body.ea-sidebar-width-compact #main-menu.menu-expanded .menu a {
        flex-direction: row;
    }
    
    body.ea-sidebar-width-compact #main-menu .menu .menu-item .menu-item-label {
        margin-left: 8px;
        margin-top: 0;
        font-size: 16px;
        font-weight: 600;
    }
   

  
body.ea-sidebar-width-compact #main-menu .menu .menu-item:hover i {
  color: #ffffff !important;
  transform: scale(1.1);
}
  body.ea-sidebar-width-compact #main-menu .menu .menu-item:hover {
    background: none;
  }
  body.ea-sidebar-width-compact #main-menu .menu .menu-item.has-submenu:hover .submenu-toggle .menu-item-label {
    display: flex;
  }


  .navbar-expand-lg .navbar-nav .nav-link {
    padding-left: 12px;
    padding-right: 12px;
}

.application-menu .navbar-nav .nav-link {
  padding-left: 8px !important;
  padding-right: 8px !important;
}
  .content-top {
    display: flex;
    height: 54px;
    justify-content: space-between;
    padding: 10px calc(var(--lg-content-padding-right) + var(--resize-handler-width)) 8px var(--lg-content-padding-left);
    position: relative;
  }

  /* RTL support for content top */
  [dir="rtl"] .content-top {
    padding: 10px var(--lg-content-padding-left) 8px calc(var(--lg-content-padding-right) + var(--resize-handler-width));
  }

  .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%;
}

  /* RTL support for sidebar positioning */
  [dir="rtl"] .sidebar {
    left: auto;
    right: 0;
    padding: 0 0 0 var(--sidebar-padding-left) !important;
  }

#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%);
}

/* RTL support for quick actions */
[dir="rtl"] #quick-actions{
  left: auto;
  right: 0;
  padding-right: 0;
  padding-left: 20px;
}


#quick-actions .btn-sm{
  padding: 4px 8px;
  font-size: 12px;
}

#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 10px;
        max-height: 70%;
        min-height: 350px;
        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%);
}

/* RTL support for main menu */
[dir="rtl"] body:not(.ea-sidebar-width-compact) #main-menu {
        padding: 0 10px 20px 0;
}

body.ea-sidebar-width-compact #main-menu{
  width: var(--menu-max-width-compact);
  padding: 15px 8px 15px 8px;
  max-height: 85%;
  position: fixed;
  top: 90px;
  z-index: 1000;
  background: #1f003c;
  backdrop-filter: blur(12px);
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.1);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: none;
  overflow: visible;
}

/* RTL support for compact main menu */
[dir="rtl"] body.ea-sidebar-width-compact #main-menu{
  padding: 15px 8px 15px 8px;
}

/* Disable all animations and transitions when sidebar is compact */
body.ea-sidebar-width-compact .sidebar *:not(.cart-animation-flying-element),
body.ea-sidebar-width-compact .sidebar *:not(.cart-animation-flying-element)::before,
body.ea-sidebar-width-compact .sidebar *:not(.cart-animation-flying-element)::after {
  animation: none !important;
  transition: none !important;
  -webkit-animation: none !important;
  -webkit-transition: none !important;
  -moz-animation: none !important;
  -moz-transition: none !important;
  -o-animation: none !important;
  -o-transition: none !important;
}

/* Disable animations specifically on hover when sidebar is compact */
body.ea-sidebar-width-compact #main-menu:hover *,
body.ea-sidebar-width-compact #main-menu:hover *::before,
body.ea-sidebar-width-compact #main-menu:hover *::after,
body.ea-sidebar-width-compact #main-menu .menu-item:hover,
body.ea-sidebar-width-compact #main-menu .menu-item:hover *,
body.ea-sidebar-width-compact #main-menu .menu-item:hover *::before,
body.ea-sidebar-width-compact #main-menu .menu-item:hover *::after,
body.ea-sidebar-width-compact .menu-hover-trigger,
body.ea-sidebar-width-compact .menu-hover-trigger:hover,
body.ea-sidebar-width-compact .menu-hover-trigger *,
body.ea-sidebar-width-compact .menu-hover-trigger *::before,
body.ea-sidebar-width-compact .menu-hover-trigger *::after {
  animation: none !important;
  transition: none !important;
  -webkit-animation: none !important;
  -webkit-transition: none !important;
  -moz-animation: none !important;
  -moz-transition: none !important;
  -o-animation: none !important;
  -o-transition: none !important;
}

/* Disable icon animations and transforms when sidebar is compact */
body.ea-sidebar-width-compact #main-menu .menu-icon,
body.ea-sidebar-width-compact #main-menu .menu-item:hover .menu-icon,
body.ea-sidebar-width-compact #main-menu .icon-3d,
body.ea-sidebar-width-compact #main-menu .icon-3d:hover,
body.ea-sidebar-width-compact #main-menu .submenu-toggle-icon,
body.ea-sidebar-width-compact #main-menu .menu-item:hover .submenu-toggle-icon,
body.ea-sidebar-width-compact #main-menu .menu-item.has-submenu:hover .submenu-toggle-icon,
body.ea-sidebar-width-compact #main-menu .menu-item.has-submenu:hover .submenu .menu-icon {
  animation: none !important;
  transition: none !important;
  transform: none !important;
  -webkit-animation: none !important;
  -webkit-transition: none !important;
  -webkit-transform: none !important;
  -moz-animation: none !important;
  -moz-transition: none !important;
  -moz-transform: none !important;
  -o-animation: none !important;
  -o-transition: none !important;
  -o-transform: none !important;
}

/* Allow cart animation element to animate even when sidebar is compact */
body.ea-sidebar-width-compact .cart-animation-flying-element {
  animation: auto !important;
  transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
  -webkit-transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
  -moz-transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
  -o-transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

body.ea-sidebar-width-compact #main-menu:hover{
  min-width: var(--menu-max-width);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.15);
  /* transform: translateY(-2px); */
}

/* Fixed button to trigger menu hover when collapsed */
.menu-hover-trigger {
  opacity: 1;
  position: fixed;
  top: 50%;
  left: 38px;
  transform: translateY(-50%);
  z-index: 1001;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.9) 0%, rgba(37, 99, 235, 0.9) 100%);
  border: none;
  color: white;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1), left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
  backdrop-filter: blur(8px);
}

.menu-hover-trigger:hover {
  opacity: 1;
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4);
  background: linear-gradient(135deg, rgba(59, 130, 246, 1) 0%, rgba(37, 99, 235, 1) 100%);
}

.menu-hover-trigger i {
  font-size: 12px;
  transition: transform 0.2s ease;
}

.menu-hover-trigger.active i {
  transform: rotate(180deg);
}

/* Show button only when sidebar is collapsed */
body.ea-sidebar-width-compact .menu-hover-trigger {
  display: flex;
  animation: slideInFromLeft 0.3s ease-out;
}

@keyframes slideInFromLeft {
  0% {
    opacity: 0;
    transform: translateY(-50%) translateX(-20px);
  }
  100% {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
  }
}

/* RTL support for menu hover trigger */
[dir="rtl"] .menu-hover-trigger {
  left: auto;
  right: 38px;
}

[dir="rtl"] .menu-hover-trigger i {
  transform: scaleX(-1);
}

[dir="rtl"] body.ea-sidebar-width-compact #main-menu.menu-expanded ~ .menu-hover-trigger {
  left: auto !important;
  right: 222px !important; /* 242px - 20px = 222px */
}

/* When menu is in hover state, move button to the end and hide it */
body.ea-sidebar-width-compact #main-menu:hover ~ .menu-hover-trigger {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%) scale(0.8);
  left: 222px !important;
  transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
}

[dir="rtl"] body.ea-sidebar-width-compact #main-menu:hover ~ .menu-hover-trigger {
  left: auto !important;
  right: 222px !important;
}

/* When menu is expanded via button, move button to the end of the menu */
body.ea-sidebar-width-compact #main-menu.menu-expanded ~ .menu-hover-trigger {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-50%) scale(1);
  left: 222px !important; /* 242px - 20px = 222px */
  transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Smooth transition for menu expansion */
body.ea-sidebar-width-compact #main-menu {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Additional rule to ensure button moves when menu is expanded */
.menu-hover-trigger.menu-expanded {
  left: 222px !important;
  transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

[dir="rtl"] .menu-hover-trigger.menu-expanded {
  left: auto !important;
  right: 222px !important;
}



body.ea-sidebar-width-compact .main-header #header-logo a {
  position: fixed;
  left: 10px;
  width: fit-content;
}

[dir="rtl"] body.ea-sidebar-width-compact .main-header #header-logo a {
  right: 10px;
}


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) ;
}

/* RTL support for main header */
[dir="rtl"] .body:not(.ea-sidebar-width-compact) #main-header {
  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: 0;
  }

  

  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: var(--sidebar-max-width-compact);
    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: var(--dm-text-primary);
    top: 10px;
    font-size: 24px;
    padding: 0;
    z-index: 1;
    box-shadow: none !important;
}

  /* RTL support for sidebar resizer */

  
  [dir="rtl"] .toggle-collapse-menu, 
  [dir="rtl"] .toggle-collapse-menu:hover, 
  [dir="rtl"] #sidebar-resizer-handler {
    right: auto;
    left: -44px;
  }

  




}


@media (max-width:991.5px) {
  


  #main-menu .menu a {

    font-size: var(--font-size-xl);
  }

  #main-menu .menu .submenu a{
    font-size: var(--font-size-base);
  }

  .content-top .content-search .content-search-label input.is-blank {
    min-width: 100px;
  }
  .menu-hover-trigger,#menu-hover-trigger {
    display: none !important;
  }


  body.ea-sidebar-width-compact .sidebar{
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding: 15px 20px !important;
  }

  body.ea-sidebar-width-compact .sidebar input.menu-search{
    display: block !important;
  }

  .toggle-collapse-menu,.toggle-collapse-menu:hover,#sidebar-resizer-handler {
    display: none;
  }

  .content-top.ea-search-disabled{
    padding: 0;
  }
  
  .dropdown-settings .dropdown-settings-button {
    color: #fff;
  }
}


.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 (max-width: 767px) {
  table.datagrid:not(.datagrid-empty) tr {
      border: none;
      box-shadow: none;
  }
  table.datagrid:not(.datagrid-empty) tr:not(.empty-row) td {
    box-shadow: none;
    padding-left: 35%;
    position: relative;
  }

  /* Fix RTL padding - use logical properties instead of padding-left */
  [dir="rtl"] table.datagrid:not(.datagrid-empty) tr:not(.empty-row) td {
    padding-left: 0;
    padding-right: 35%;
    padding-inline-start: 35%;
  }

  /* Override padding for batch actions and actions columns in RTL */
  [dir="rtl"] table.datagrid:not(.datagrid-empty) tr:not(.empty-row) td.batch-actions-selector,
  [dir="rtl"] table.datagrid:not(.datagrid-empty) tr:not(.empty-row) td.actions {
    padding-left: 8px !important;
    padding-right: 8px !important;
    padding-inline-start: 8px !important;
  }
}


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

  /* RTL support for compact sidebar hover */
  [dir="rtl"] body.ea-sidebar-width-compact
    #main-menu
    .menu
    .menu-item:hover
    .submenu {
    margin-left: 0;
    margin-right: 34px;
  }

  body.ea-sidebar-width-compact section.main-content{
    margin-left: 12px;
  }

  /* RTL support for main content */
  [dir="rtl"] body.ea-sidebar-width-compact section.main-content{
    margin-left: 0;
    margin-right: 12px;
  }

  .toggle-collapse-menu, .toggle-collapse-menu:hover, #sidebar-resizer-handler {  
    right: -50px;
  }

  [dir="ltr"] .body:not(.ea-sidebar-width-compact) .toggle-collapse-menu, [dir="ltr"] .body:not(.ea-sidebar-width-compact) .toggle-collapse-menu:hover, [dir="ltr"] .body:not(.ea-sidebar-width-compact) #sidebar-resizer-handler {  
    right: -44px;
  }

  [dir="rtl"] body.ea-sidebar-width-compact .toggle-collapse-menu, [dir="rtl"] body.ea-sidebar-width-compact .toggle-collapse-menu:hover, [dir="rtl"] body.ea-sidebar-width-compact #sidebar-resizer-handler {  
    left: -50px;
    right: auto;
  }

  [dir="rtl"] .body:not(.ea-sidebar-width-compact) .toggle-collapse-menu, [dir="rtl"] .body:not(.ea-sidebar-width-compact) .toggle-collapse-menu:hover, [dir="rtl"] .body:not(.ea-sidebar-width-compact) #sidebar-resizer-handler {  
    right: -44px !important;
    left: auto !important;
  }

  

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

  /* RTL support for content search */
  [dir="rtl"] .content-top .content-search .form-widget {
    padding-left: 0;
    padding-right: 35px;
  }

  body.ea-sidebar-width-compact #main-menu .menu .menu-item .menu-item-contents:first-child {
    margin-top: 0;
  }
  
  body.ea-sidebar-width-compact #main-menu .menu .menu-item .menu-item-contents {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
  }

  [dir="rtl"] body.ea-sidebar-width-compact #main-menu .menu .menu-item .menu-item-contents {
    padding: 5px !important;
  }

  [dir="rtl"] body.ea-sidebar-width-compact #main-menu .menu .submenu .menu-item .menu-item-contents{
    padding: 7px 5px 7px 0 !important;
  }
  
  body.ea-sidebar-width-compact #main-menu .menu .menu-header .menu-header-contents {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    flex-direction: row;
  }
  
  body.ea-sidebar-width-compact .menu-header-contents .icon-3d{
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
  }


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

  body.ea-sidebar-width-compact .sidebar #main-menu .menu .menu-item, body.ea-sidebar-width-compact .sidebar .main-header .navbar {
    padding-left: 7px;
}

[dir="rtl"] body.ea-sidebar-width-compact .sidebar #main-menu .menu .menu-item, [dir="rtl"] body.ea-sidebar-width-compact .sidebar .main-header .navbar {
  padding-right: 0;
}

body.ea-sidebar-width-compact .sidebar #main-menu .menu .submenu .menu-item,
[dir="rtl"] body.ea-sidebar-width-compact .sidebar #main-menu .menu .submenu .menu-item{
  padding: 0 !important;
  margin: 0 !important;
}



  body.ea-sidebar-width-compact #main-menu .menu .menu-item {
    margin: 0 ;
    border-radius: 8px;
    transition: all 0.2s ease;
    padding: 0px 8px;
    display: flex;
    align-items: center;
    justify-content: start;
    min-height: 42px;
    position: relative;
  }

  body.ea-sidebar-width-compact #main-menu .menu .menu-item .submenu .menu-item {
    min-height: 38px;
  }
  

  body.ea-sidebar-width-compact #main-menu .menu .menu-item.active a{
    background-color: rgba(0, 0, 0, 0.2) !important;
  }

  body.ea-sidebar-width-compact #main-menu .menu .menu-item.active {
    /* background: linear-gradient(135deg, rgba(59, 130, 246, 0.3) 0%, rgba(37, 99, 235, 0.3) 100%); */
    border: none;
  }
  
  body.ea-sidebar-width-compact #main-menu .menu .menu-item.active .menu-icon {
    /* color: #60a5fa !important; */
  }


  body.ea-sidebar-width-compact  .main-header #header-logo img, .main-header #header-logo svg{
    max-width: 34px !important;
  }

  body.ea-sidebar-width-compact #main-menu .menu .menu-item .menu-icon {
    font-size: 20px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    transition: none !important;
    animation: none !important;
    transform: none !important;
    color: rgba(255, 255, 255, 0.8);
    text-align: center;
    line-height: 1;
  }

  body.ea-sidebar-width-compact #main-menu .menu .icon-3d{
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    border-radius: 12px;
    transition: none !important;
    animation: none !important;
    transform: none !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
  }
  
  body.ea-sidebar-width-compact #main-menu .menu .icon-3d:hover{
    transform: none !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  }

  body.ea-sidebar-width-compact #main-menu .menu .icon-3d-24 {
    background-image: url(/themes/default/admin/apps/icons/flexynity-app-icon-24.png);
    background-size: 34px;
    background-position: center;
    background-repeat: no-repeat;
  }

  body.ea-sidebar-width-compact .menu-header-contents .icon-3d img{
    width: 24px !important;
    height: 24px !important;
    object-fit: contain;
    display: block;
    margin: 0 auto;
  }
  body.ea-sidebar-width-compact #main-menu .menu .menu-item.has-submenu:hover .submenu-toggle-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    width: 16px;
    height: 16px;
    margin: 0 auto;
    transform: rotate(0);
    inset-inline-start: initial;
  }
  

  body.ea-sidebar-width-compact #main-menu .menu .menu-item:hover .menu-icon {
    color: #ffffff;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }

  body.ea-sidebar-width-compact #main-menu .menu .menu-item.has-submenu:hover .submenu .menu-icon {
    margin-right: 0;
    margin-inline-end: 4px;
  }
  [dir="rtl"] body.ea-sidebar-width-compact #main-menu .menu .menu-item.has-submenu:hover .submenu .menu-icon {
    margin-inline-start: 4px;
  }
  

  .navigation-toggle {
    display: none;
  }

  

  .content-top .content-search .content-search-label input.is-blank{
    min-width: 170px;
    padding-top: 6px;
  }

  
}




	/* POS CSS */


  .receipt-preview-container code,pre{
    color: black;
  }




/* Tools UI */


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

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

.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: var(--dm-text-primary);
  color: var(--dm-content-bg);
}

.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: var(--dm-sidebar-menu);
  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: var(--dm-text-secondary);
}

.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: var(--dm-input-bg);
  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: var(--dm-content-bg);
  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: "Outfit", "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: var(--blue-500)!important;
}

.e-custom-event-marker-today .e-span-label {
  background-color: var(--blue-500)!important;
  color: #fff!important;
}

.e-custom-event-marker-today  .e-gantt-right-arrow {
  border-right-color: var(--blue-500)!important;
  border-left-color: var(--blue-500) !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: "Outfit", 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: var(--dm-text-primary);
  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: var(--dm-sidebar-menu);
  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-flexynity {
  -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: 1200px){
  .user-menu-wrapper .user-details .store-name{
    text-overflow: ellipsis;
      max-width: 80px;
      display: inline-block;
      white-space: nowrap;
      overflow: hidden;
  }
}

@media (max-width: 1024px){
 

  

}

@media (max-width: 980px){


  .user-menu-wrapper .user-avatar{
    background-color: white;
  }

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

  
  .content-top{
    padding: 0;
  }
  .content-top .content-search {
    flex: 1;
    padding: 0 10px;
}


}

  @media(max-width: 768px) {

    #quick-actions{
      border-radius: 8px;
    }
    

    .login-wrapper {
      padding: 20px;
      margin-block-start: 0;
      width: 100%;
      height:100%;
    }
   
    
    .login-special-content{
      display:none;
      width:100%;
    }


    
  }




  


/* Disabled Form Controls with Lock Icon */
.form-widget input.form-control:disabled,
.form-widget textarea.form-control:disabled,
.form-widget .form-select:disabled,
.form-widget .form-check-input:disabled,
.form-widget .form-check-input[disabled],
.form-widget input[type="radio"]:disabled,
.form-widget input[type="checkbox"]:disabled {
  background-color: var(--form-control-disabled-bg);
  color: var(--form-control-disabled-color);
  cursor: not-allowed;
  position: relative;
  padding-right: 35px;
}

/* SVG Lock Icon for all disabled form controls */
.form-widget input.form-control:disabled,
.form-widget textarea.form-control:disabled,
.form-widget .form-check-input:disabled,
.form-widget .form-check-input[disabled],
.form-widget input[type="radio"]:disabled,
.form-widget input[type="checkbox"]:disabled {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%236c757d' d='M144 144v48H304V144c0-44.2-35.8-80-80-80s-80 35.8-80 80zM96 192V144C96 64.5 160.5 0 240 0s144 64.5 144 144v48h16c35.3 0 64 28.7 64 64V448c0 35.3-28.7 64-64 64H80c-35.3 0-64-28.7-64-64V256c0-35.3 28.7-64 64-64H96z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 10px;
  padding-right: 35px;
}

/* For textarea, position the lock icon at the top-right */
.form-widget textarea.form-control:disabled {
  background-position: right 10px top 10px;
}

/* For checkboxes and radio buttons, position the lock icon to the right */
.form-widget .form-check-input:disabled,
.form-widget .form-check-input[disabled],
.form-widget input[type="radio"]:disabled,
.form-widget input[type="checkbox"]:disabled {
  background-position: right -25px center;
}

/* Fix select arrow positioning for disabled selects */
.form-widget .form-select:disabled {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m1 6 7 7 7-7'/%3e%3c/svg%3e"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%236c757d' d='M144 144v48H304V144c0-44.2-35.8-80-80-80s-80 35.8-80 80zM96 192V144C96 64.5 160.5 0 240 0s144 64.5 144 144v48h16c35.3 0 64 28.7 64 64V448c0 35.3-28.7 64-64 64H80c-35.3 0-64-28.7-64-64V256c0-35.3 28.7-64 64-64H96z'/%3E%3C/svg%3E");
  background-repeat: no-repeat, no-repeat;
  background-position: right 0.75rem center, right 35px center;
  background-size: 16px 12px, 12px;
  padding-right: 50px;
}

/* Disabled TomSelect controls */
.ts-wrapper.disabled .ts-control {
  background-color: var(--form-control-disabled-bg);
  color: var(--form-control-disabled-color);
  cursor: not-allowed;
  position: relative;
  padding-right: 35px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%236c757d' d='M144 144v48H304V144c0-44.2-35.8-80-80-80s-80 35.8-80 80zM96 192V144C96 64.5 160.5 0 240 0s144 64.5 144 144v48h16c35.3 0 64 28.7 64 64V448c0 35.3-28.7 64-64 64H80c-35.3 0-64-28.7-64-64V256c0-35.3 28.7-64 64-64H96z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px;
}

/* Disabled file upload controls */
.ea-fileupload .custom-file-label:disabled {
  background-color: var(--form-control-disabled-bg);
  color: var(--form-control-disabled-color);
  cursor: not-allowed;
  position: relative;
  padding-right: 35px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%236c757d' d='M144 144v48H304V144c0-44.2-35.8-80-80-80s-80 35.8-80 80zM96 192V144C96 64.5 160.5 0 240 0s144 64.5 144 144v48h16c35.3 0 64 28.7 64 64V448c0 35.3-28.7 64-64 64H80c-35.3 0-64-28.7-64-64V256c0-35.3 28.7-64 64-64H96z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px;
}




#global-loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.45);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 999999999999;
  backdrop-filter: blur(3.5px);
}

#global-loading-overlay.show {
  display: flex !important;
}

#global-loading-overlay .loading-spinner {
  background: transparent;
  padding: 2rem;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  /* box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); */
  align-items: center;
  gap: 1rem;
}

.loading-logo {
  animation: pulse 1s ease-in-out infinite;
  transform-origin: center;
}

@keyframes pulse {
  0% { 
    transform: scale(1);
    opacity: 0.8;
  }
  50% { 
    transform: scale(1.1);
    opacity: 0.65;
  }
  100% { 
    transform: scale(1);
    opacity: 0.8;
  }
}

#global-loading-overlay .loading-spinner p {
  margin: 0;
  color: #fff;
  font-size: 16px;
  font-weight: 500;
}


/* OVERRIDES */



.actions .dropstart .dropdown-toggle::before{
  content: none;
}

.row {
  --bs-gutter-x: 0.8rem;
}


.btn.btn-neutral,.btn.btn-neutral:focus,.btn.btn-neutral:active {
  background-color: #dbdbdb !important;
  color:#000000 !important;
}


/* ==========================================================================
   Custom Datagrid Responsive Behavior
   ========================================================================== */
   
/* On screens smaller than 768px, we override the default "stacking"
   and enforce a standard table layout with a sticky actions column. */
   @media (max-width: 768px) {
    /* --- 1. Restore Table Layout --- */
    /* Revert the display property to force a normal table structure */
    table.datagrid:not(.datagrid-empty) thead,
    table.datagrid:not(.datagrid-empty) tbody,
    table.datagrid:not(.datagrid-empty) tr,
    table.datagrid:not(.datagrid-empty) td {
      display: revert !important;
    }

    /* Ensure proper column width calculation in RTL mobile */
    [dir="rtl"] table.datagrid {
      table-layout: auto;
    }
  
    /* --- 2. Make Last Column Sticky --- */
    /* This applies the sticky positioning to the header and body cells */
    table.datagrid th:last-child,
    table.datagrid td:last-child {
      position: sticky !important;
      right: 0 !important;
      z-index: 10 !important;
  
      /* This is crucial: it prevents other cells from showing through on scroll */
      /* background: var(--table-cell-bg, #FFF) !important; */
      box-shadow: -2px 0 5px -2px rgba(0,0,0,0.1) !important;
    }

    /* RTL support for mobile sticky columns */
    [dir="rtl"] table.datagrid th:last-child,
    [dir="rtl"] table.datagrid td:last-child {
      right: auto !important;
      left: 0 !important;
      box-shadow: 2px 0 5px -2px rgba(0,0,0,0.1) !important;
    }

    /* Fix batch actions column in RTL mobile to prevent colspan-like appearance */
    [dir="rtl"] table.datagrid th:first-child,
    [dir="rtl"] table.datagrid td.batch-actions-selector {
      width: 50px !important;
      min-width: 50px !important;
      max-width: 50px !important;
      box-sizing: border-box !important;
      overflow: hidden !important;
      text-align: center !important;
    }

    /* Ensure actions column doesn't expand in RTL mobile */
    [dir="rtl"] table.datagrid th:last-child,
    [dir="rtl"] table.datagrid td.actions,
    [dir="rtl"] table.datagrid td.actions.actions-as-dropdown {
      width: auto !important;
      min-width: 50px !important;
      max-width: none !important;
    }

    .datagrid td.actions a:not(.dropdown-item) + a:not(.dropdown-item) {
      text-align: center;
  }
  
    /* Ensure the sticky header cell has the correct background */
    /* table.datagrid thead th:last-child {
      background: var(--table-head-bg, #f8f9fa) !important;
    } */
  
    /* --- 3. Clean Up Mobile-Only Elements --- */
    /* Hide the data-labels that are only used in the default mobile view */
    table.datagrid:not(.datagrid-empty) td::before {
      display: none !important;
    }
  
    /* Reset padding that is added for the mobile view - override the 35% from 767px media query */
    table.datagrid:not(.datagrid-empty) tr:not(.empty-row) td {
      padding-inline-start: 8px !important;
      padding-left: 8px !important;
      padding-right: 8px !important;
    }

    /* Remove padding from batch actions column in RTL mobile */
    [dir="rtl"] table.datagrid:not(.datagrid-empty) tr:not(.empty-row) td.batch-actions-selector {
      padding-inline-start: 8px !important;
      padding-left: 8px !important;
      padding-right: 8px !important;
    }

    /* Remove padding from actions column */
    table.datagrid:not(.datagrid-empty) tr:not(.empty-row) td.actions {
      padding-left: 8px !important;
      padding-right: 8px !important;
      padding-inline-start: 8px !important;
    }



  }

  .datagrid .dropdown-menu li
   {
      /* width: 20px; */
      text-align: center;
      /* width: 10px !important; */
  }

  .datagrid tr:not(.selected-row):hover .dropdown-toggle{
    background: black !important;
    color: white !important;
  }
  .datagrid .dropdown-menu li a,.datagrid .dropdown-menu li a i{
    color: white !important;
  }




/* ==========================================================================
   Dark Mode Typography Improvements
   ========================================================================== */

/* Enhanced text readability for dark mode */
body.ea-dark-scheme {
  /* Improve overall text contrast */
  color: var(--dm-text-primary);
}

/* Form labels and help text */
body.ea-dark-scheme .form-label,
body.ea-dark-scheme .form-check-label {
  color: var(--dm-form-label);
}

body.ea-dark-scheme .form-text,
body.ea-dark-scheme .form-help {
  color: var(--dm-form-help);
}

/* Table text improvements */
body.ea-dark-scheme .table th {
  color: var(--dm-table-header-text);
  background-color: var(--dm-table-header);
}

body.ea-dark-scheme .table td {
  color: var(--dm-text-primary);
}

body.ea-dark-scheme .card{
  color: var(--dm-text-primary);
}


body.ea-dark-scheme table td[data-column="name"],
body.ea-dark-scheme table td[data-column="title"],
body.ea-dark-scheme table td[data-column="orderNumberFormatted"] {
  color : var(--violet-500) !important;
}

body.ea-dark-scheme .badge.badge-primary.association {
  background-color: var(--violet-500) !important;
  color: var(--dm-text-primary) !important;
}


body.ea-dark-scheme table.datagrid td:last-child,
body.ea-dark-scheme table.datagrid th:last-child:hover{
  background-color: var(--dm-content-bg) !important;
  border: none !important;
}




/* Card improvements */


body.ea-dark-scheme .card-header:first-child
{
  background: var(--dm-bg-secondary) !important;
}



body.ea-dark-scheme .card-title,
body.ea-dark-scheme .card-subtitle {
  color: var(--dm-text-primary);
}

body.ea-dark-scheme .card-text {
  color: var(--dm-text-secondary);
}


/* Alert text improvements */
body.ea-dark-scheme .alert {
  /* color: var(--dm-alert-text);
  background-color: var(--dm-alert-bg); */
  border-color: var(--dm-alert-border);
}

/* Badge text improvements */
body.ea-dark-scheme .badge {
  color: var(--dm-badge-text);
  /* background-color: var(--dm-badge-bg); */
  box-shadow: none !important;
}

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

/* Code text improvements */
body.ea-dark-scheme code,
body.ea-dark-scheme pre {
  color: var(--dm-code-text);
  background-color: var(--dm-code-bg);
}

/* Link improvements */
/* body.ea-dark-scheme a:not(.btn) {
  color: var(--dm-input-border);
} */

/* body.ea-dark-scheme a:not(.btn):hover {
  color: var(--dm-text-primary);
} */

/* Dropdown improvements */
body.ea-dark-scheme .dropdown-menu {
  background-color: var(--dm-dropdown-bg);
  border-color: var(--dm-border-color);
}

body.ea-dark-scheme .dropdown-item {
  color: var(--dm-dropdown-text);
}

body.ea-dark-scheme .dropdown-item:hover {
  background-color: var(--dm-dropdown-hover);
  color: var(--dm-text-primary);
}

/* Modal improvements */
body.ea-dark-scheme .modal-content {
  background-color: var(--dm-modal-bg);
  border-color: var(--dm-border-color);
}

body.ea-dark-scheme .modal-header {
  background-color: var(--dm-modal-header);
  border-bottom-color: var(--dm-border-color);
}

body.ea-dark-scheme .modal-title {
  color: var(--dm-text-primary);
}


body.ea-dark-scheme .form-tabs-tablist .nav-tabs{
  box-shadow: 0 2px 0 #454545;
}

/* Input focus improvements */
body.ea-dark-scheme .form-control:focus,
body.ea-dark-scheme .form-select:focus,
body.ea-dark-scheme .form-widget .custom-file-input:focus ~ .custom-file-label,
body.ea-dark-scheme .form-widget .form-select:focus,
body.ea-dark-scheme .form-widget input.form-check-input:focus,
body.ea-dark-scheme .form-widget input.form-control:focus,
body.ea-dark-scheme .form-widget textarea.form-control:focus,
body.ea-dark-scheme .plugin-dropdown_input.focus .ts-dropdown .dropdown-input
{
  background-color: var(--dm-input-bg) !important;
  border-color: var(--blue-500);
  box-shadow: 0 0 0 0.2rem #3b82f630 !important;
}

body.ea-dark-scheme .form-control::placeholder{
  color: var(--dm-text-primary);
}

body.ea-dark-scheme .ts-wrapper.multi .ts-control>div{
  box-shadow: none !important;
}


body.ea-dark-scheme .form-widget input.form-check-input{
  border: 1px solid var(--form-switch-bg);
}

/* Button text improvements for dark mode */
body.ea-dark-scheme .btn-secondary {
  background-color: var(--dm-bg-secondary);
}

/* body.ea-dark-scheme .btn-secondary:hover {
  background-color: var(--dm-text-muted);
  border-color: var(--dm-text-muted);
  color: var(--dm-content-bg);
} */

/* Sidebar text improvements */
body.ea-dark-scheme #main-menu .menu a {
  color: var(--dm-sidebar-menu);
}

body.ea-dark-scheme #main-menu .menu a:hover {
  color: var(--dm-sidebar-menu);
}

/* Content area text improvements */
body.ea-dark-scheme .content-wrapper {
  color: var(--dm-text-primary);
}

/* Page title improvements */
body.ea-dark-scheme .content-header-title {
  color: var(--dm-text-primary);
}

/* Breadcrumb improvements */
body.ea-dark-scheme .breadcrumb-item {
  color: var(--dm-text-secondary);
}

body.ea-dark-scheme .breadcrumb-item.active {
  color: var(--dm-text-primary);
}

/* Pagination improvements */
body.ea-dark-scheme .page-link {
  color: var(--dm-text-primary);
  background-color: var(--dm-content-bg);
  border-color: var(--dm-border-color);
}

body.ea-dark-scheme .page-link:hover {
  color: var(--dm-text-primary);
  background-color: var(--dm-table-hover);
  border-color: var(--dm-border-color);
}

body.ea-dark-scheme .page-item.active .page-link {
  background-color: var(--dm-input-border);
  border-color: var(--dm-input-border);
  color: var(--dm-content-bg);
}

/* Tooltip improvements */
body.ea-dark-scheme .tooltip-inner {
  background-color: var(--dm-text-primary);
  color: var(--dm-content-bg);
}

/* Popover improvements */
body.ea-dark-scheme .popover {
  background-color: var(--dm-modal-bg);
  border-color: var(--dm-border-color);
}

body.ea-dark-scheme .popover-header {
  background-color: var(--dm-modal-header);
  border-bottom-color: var(--dm-border-color);
  color: var(--dm-text-primary);
}

body.ea-dark-scheme .popover-body {
  color: var(--dm-text-primary);
}


/* Accordion */
body.ea-dark-scheme .accordion-item{
  color: var(--dm-text-primary);
}

/* Close button dark mode styling */
.close-button {
  color: #333 !important;
}

body.ea-dark-scheme .close-button {
  color: #ffffff !important;
}

body.ea-dark-scheme .border-top {
  border-top: 1px solid var(--dm-border-color) !important;
}


body.ea-dark-scheme .user-menu-wrapper .user-details .user-name,
body.ea-dark-scheme .user-menu-wrapper .user-details .user-name:hover {
  color: #fff !important;
}

/* ==========================================================================
   Comprehensive RTL Support
   ========================================================================== */

/* RTL support for form fieldsets */
[dir="rtl"] .form-group.field-collection .field-collection-delete-button {
  right: auto;
  left: 10px;
}



/* RTL support for dropdown menus */
[dir="rtl"] .dropdown-menu .dropdown-item {
  text-align: right;
}

/* RTL support for form tabs */
[dir="rtl"] .form-tabs .nav-tabs a, 
[dir="rtl"] .form-tabs .nav-tabs a:hover {
  text-align: right;
}

/* RTL support for table actions */
[dir="rtl"] .datagrid td.actions {
  text-align: left;
}

/* RTL support for pagination */
[dir="rtl"] .pagination {
  justify-content: flex-end;
}

/* RTL support for breadcrumbs */
[dir="rtl"] .breadcrumb-item + .breadcrumb-item::before {
  float: right;
  padding-left: 0.5rem;
  padding-right: 0;
}

/* RTL support for form help text */
[dir="rtl"] .form-widget .form-help {
  text-align: right;
}

/* RTL support for alerts */
[dir="rtl"] .alert-dismissible .btn-close {
  right: auto;
  left: 0;
}

/* RTL support for modals */
[dir="rtl"] .modal-header .btn-close {
  margin: 0;
  margin-right: auto;
}

/* RTL support for tooltips */
[dir="rtl"] .tooltip {
  text-align: right;
}

/* RTL support for popovers */
[dir="rtl"] .popover {
  text-align: right;
}

/* RTL support for form validation messages */
[dir="rtl"] .invalid-feedback {
  text-align: right;
}

/* RTL support for form labels */
[dir="rtl"] .form-label {
  text-align: right;
}



/* RTL support for button groups */
[dir="rtl"] .btn-group > .btn:not(:last-child):not(.dropdown-toggle) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-top-left-radius: 0.375rem;
  border-bottom-left-radius: 0.375rem;
}

[dir="rtl"] .btn-group > .btn:not(:first-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-top-right-radius: 0.375rem;
  border-bottom-right-radius: 0.375rem;
}

/* RTL support for navigation pills */
[dir="rtl"] .nav-pills .nav-link {
  text-align: right;
}

/* RTL support for list groups */
[dir="rtl"] .list-group-item {
  text-align: right;
}

/* RTL support for cards */
[dir="rtl"] .card-header {
  text-align: right;
}

/* RTL support for progress bars */
[dir="rtl"] .progress-bar {
  text-align: right;
}

/* RTL support for spinners */
[dir="rtl"] .spinner-border,
[dir="rtl"] .spinner-grow {
  margin-right: 0;
  margin-left: 0.5rem;
}

/* RTL support for badges */
[dir="rtl"] .badge {
  text-align: center;
}

/* RTL support for close buttons */
[dir="rtl"] .btn-close {
  margin: 0;
  margin-right: auto;
}

/* RTL support for form switches */
[dir="rtl"] .form-check {
  padding-left: 0;
  padding-right: 1.5em;
}

[dir="rtl"] .form-check-input {
  margin-left: 0;
  margin-right: -1.5em;
}

/* RTL support for form ranges */
[dir="rtl"] .form-range::-webkit-slider-thumb {
  margin-left: 0;
  margin-right: -0.5rem;
}

/* RTL support for form selects */
[dir="rtl"] .form-select {
  background-position: left 0.75rem center;
  padding-left: 0.75rem;
  padding-right: 2.25rem;
}

/* RTL support for form textareas */
[dir="rtl"] .form-control {
  text-align: right;
}

/* RTL support for form checkboxes and radios */
[dir="rtl"] .form-check-input[type="checkbox"],
[dir="rtl"] .form-check-input[type="radio"] {
  /* margin-left: 0;
  margin-right: 0.3125em; */
}

/* RTL support for form file inputs */
[dir="rtl"] .form-file-input {
  text-align: right;
}

/* RTL support for form color inputs */
[dir="rtl"] .form-control-color {
  width: 3rem;
  height: calc(1.5em + 0.75rem + 2px);
}

/* RTL support for form date inputs */
[dir="rtl"] .form-control[type="date"] {
  text-align: right;
}

/* RTL support for form time inputs */
[dir="rtl"] .form-control[type="time"] {
  text-align: right;
}

/* RTL support for form number inputs */
[dir="rtl"] .form-control[type="number"] {
  text-align: right;
}

/* RTL support for form search inputs */
[dir="rtl"] .form-control[type="search"] {
  text-align: right;
}

/* RTL support for form tel inputs */
[dir="rtl"] .form-control[type="tel"] {
  text-align: right;
}

/* RTL support for form url inputs */
[dir="rtl"] .form-control[type="url"] {
  text-align: right;
}

/* RTL support for form password inputs */
[dir="rtl"] .form-control[type="password"] {
  text-align: right;
}

/* RTL support for form email inputs */
[dir="rtl"] .form-control[type="email"] {
  text-align: right;
}

/* RTL support for form month inputs */
[dir="rtl"] .form-control[type="month"] {
  text-align: right;
}

/* RTL support for form week inputs */
[dir="rtl"] .form-control[type="week"] {
  text-align: right;
}

/* RTL support for form datetime-local inputs */
[dir="rtl"] .form-control[type="datetime-local"] {
  text-align: right;
}