/* -------------------------------------------- */
/* Custom Variables */
/* -------------------------------------------- */
:root {
  --bs-app-bg-color: #f7faf9;
  --bs-border-color: #e0ece8;

  --bs-emerald-50: #e5faf3;
  --bs-blue-gray-400: #b3c6c0;
  --bs-blue-gray-500: #9ab3ab;
  --bs-blue-gray-600: #678c81;
  --bs-blue-gray-700: #356657;
  --bs-blue-gray-800: #02402d;
  --bs-text-warning-3: #d97706;
  --bs-text-warning: #fffbeb;
  --bs-scrollbar-color: var(--bs-gray-500);
  --bs-scrollbar-hover-color: var(--bs-gray-500);
}
.spinner-primary {
  color: var(--bs-primary);
}
.background-color {
  background-color: #ecf5f2 !important
  ;
}
/* -------------------------------------------- */
/* Side Bar */
/* -------------------------------------------- */
.app-sidebar-menu-primary.menu > .menu-item .menu-item .menu-link .menu-title {
  font-size: 11px;
  font-weight: 500;
}
.app-sidebar-menu-primary.menu
  > .menu-item
  .menu-item
  .menu-link.active
  .menu-title,
.app-sidebar-menu-primary.menu > .menu-item .menu-link.active .menu-title {
  color: var(--bs-primary);
}
.app-sidebar-menu-primary.menu > .menu-item .menu-item .menu-link.active,
.app-sidebar-menu-primary.menu > .menu-item .menu-link.active {
  background-color: var(--bs-primary-light);
}
.app-sidebar-menu-primary.menu
  > .menu-item
  .menu-item
  .menu-link.active
  .menu-bullet
  .bullet {
  background-color: var(--bs-primary);
}
.app-sidebar-menu-primary.menu
  > .menu-item
  .menu-item
  .menu-link
  .menu-bullet
  .bullet {
  height: 6px;
  width: 6px;
}
.app-sidebar-menu-primary.menu > .menu-item > .menu-link .menu-title {
  color: var(--bs-gray-900);
  font-weight: 500;
}

/* -------------------------------------------- */
/* Header Container */
/* -------------------------------------------- */
#kt_app_header_container {
  box-shadow: 0px 2px 3px rgba(4, 22, 55, 0.1);
}

/* -------------------------------------------- */
/* Forms styles */
/* -------------------------------------------- */
.form-check-input[type="radio"] {
  width: 18px;
  height: 18px;
}
.form-check-input[type="radio"]:not(:checked) {
  --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23ffffff'/%3e%3c/svg%3e");
  background-image: var(--bs-form-check-bg-image);
  background-color: #aabfbd !important;
}
.form-control.form-control-solid::placeholder {
  color: #9ab3ab !important;

  opacity: 1;
}

.form-control.form-control-dark {
  background-color: #ecf5f2;
}
.form-check-input:checked {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}
/* -------------------------------------------- */
/* Custom Colors styles */
/* -------------------------------------------- */
.text-blue-500 {
  color: #00a3ff !important;
}
.border-blue-500 {
  border-color: #00a3ff !important;
}
.bg-blue-300 {
  background-color: #f1faff;
}

.text-danger-2 {
  --bs-danger: #f64e60;
  --bs-danger-light: #f64e5f27;
}
.text-warning-2 {
  --bs-warning: #ffa800;
  --bs-warning-light: #fff4de;
}
.text-warning-3 {
  color: #d97706;
  color: var(--bs-text-warning-3) !important;
}
.text-warning-600 {
  color: #d97706;
}
.text-warning-300 {
  color: #ffa800;
}
.bg-warning-50 {
  background-color: var(--bs-text-warning) !important;
}
.bg-warning-600 {
  background-color: var(--bs-text-warning-3);
}
.custom-tooltip {
  --bs-tooltip-color: var(--bs-primary);
  font-weight: 500;
  font-size: 8px;
}
.custom-tooltip-danger {
  --bs-tooltip-color: var(--bs-danger);
  font-weight: 500;
  font-size: 8px;
}

/* Emerald color */
.text-emerald-300 {
  color: #6ee7b7;
}

.text-blue-gray-400 {
  color: #b3c6c0 !important;
  color: var(--bs-blue-gray-400) !important;
}
.text-blue-gray-500 {
  color: #9ab3ab !important;
  color: var(--bs-blue-gray-500) !important;
}
.text-blue-gray-600 {
  color: var(--bs-blue-gray-600) !important;
}
.text-blue-gray-700 {
  color: #356657 !important;
  color: var(--bs-blue-gray-700) !important;
}
.text-blue-gray-800 {
  color: #02402d !important;
  color: var(--bs-blue-gray-800) !important;
}
.bg-blue-gray-50 {
  background: rgba(236, 245, 242, 1) !important;
}
.bg-blue-gray-300 {
  background: rgba(217, 226, 223, 1) !important;
}
.bg-blue-gray-600 {
  background: rgba(103, 140, 129, 1) !important;
}
.bg-blue-gray-700 {
  background-color: rgba(53, 102, 87, var(--bs-bg-opacity)) !important;
}
.border-blue-gray-200 {
  border-color: #ebf0ee !important;
}
.border-blue-gray-300 {
  border-color: #d9e2df !important;
}
.border-blue-gray-400 {
  border-color: #b3c6c0 !important;
}
.border-blue-gray-500 {
  border-color: #9ab3ab !important;
}

.text-green {
  color: #059669;
}
.bg-emerald-50 {
  background-color: #e5faf3 !important;
  background-color: var(--bs-emerald-50) !important;
}
.bg-emerald-100 {
  background-color: #e6f9f3 !important;
}
.bg-light-gray {
  background-color: rgba(236, 245, 242, 0.2);
}
.text-gray-2-1 {
  color: #708684 !important;
}
.text-dark-25 {
  color: #002723;
}
.bg-mint-cream-100 {
  background-color: #fbfdfc;
}
.bg-slate-gray {
  background: #708684;
}
.bg-red-50 {
  background-color: #fef2f2 !important;
}
.bg-red-400 {
  background-color: rgba(248, 113, 113, var(--bs-bg-opacity)) !important;
}
.bg-red-600 {
  background-color: #dc2626 !important;
}
.btn.btn-outline.btn-outline-red-600 {
  color: #dc2626 !important;
  border-color: #dc2626;
  background-color: transparent;
}
.text-red-400 {
  color: rgba(248, 113, 113, 1);
}
.text-red-600 {
  color: #dc2626 !important;
}
.text-purple-100 {
  color: #8f88be !important;
}
.text-purple-600 {
  color: #6425eb !important;
}
.text-purple-800 {
  color: #4e40b1 !important;
}
.border-color-purple {
  border-color: #4e40b1 !important;
}
.bg-purple-800 {
  background-color: #4e40b1 !important;
}
.text-purple-700 {
  color: #33258a !important;
}
.text-purple-600 {
  color: #1a0f64 !important;
}
.bg-purple-50 {
  background-color: #f1efff !important;
}
.bg-purple-gradient {
  background: linear-gradient(119deg, #5749b5 0%, #4131ab 100%) !important;
}
.w-80 {
  width: 80% !important;
}

@media (min-width: 992px) {
  [data-kt-app-sidebar-minimize="on"][data-kt-app-sidebar-hoverable="true"]
    .banner {
    display: none;
  }
}

/* -------------------------------------------- */
/* Custom ellipse style */
/* -------------------------------------------- */
.custom-ellipse {
  white-space: nowrap;
  overflow: hidden;
  max-width: 123px;
  position: relative;
}
.custom-ellipse:after {
  content: "...";
  position: absolute;
  inset-inline-end: 0;
  top: 0;
  background-color: white;
  padding: 0 2px;
}
/* -------------------------------------------- */
/* Custom Select  */
/* -------------------------------------------- */

select.custom-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.custom-select {
  background-image: url("../media/icons/custom-icons/select-arrow.png");
  background-position: 100%;
  background-repeat: no-repeat;
}
.custom-select:lang(ar) {
  background-position: 10%;
}
/* -------------------------------------------- */
/* Custom width */
/* -------------------------------------------- */

.mw-1200px {
  max-width: 1200px;
}

/* -------------------------------------------- */
/* Custom Shadows */
/* -------------------------------------------- */
.shadow-elevation-2 {
  box-shadow: 0px 3px 3px 0px rgba(2, 64, 45, 0.1);
}

/* -------------------------------------------- */
/* Custom Toast Styles */
/* -------------------------------------------- */
.Vue-Toastification__container:lang(ar).top-right
  .Vue-Toastification__toast--rtl:lang(ar) {
  margin-left: auto !important;
  margin-right: unset !important;
}

/* -------------------------------------------- */
/* Modal styles */
/* -------------------------------------------- */
/* Customize the scrollbar */
.modal {
  direction: ltr;
}
.modal-content:lang(ar) {
  direction: rtl;
}
.modal::-webkit-scrollbar {
  width: 8px; /* Set the width of the scrollbar */
}

.modal::-webkit-scrollbar-thumb {
  background-color: #d9e2df !important; /* Set the color of the scrollbar thumb */
  border-radius: 6px; /* Add border radius to the thumb */
  margin-inline: 50px;
}

.modal::-webkit-scrollbar-track {
  background-color: transparent; /* Set the color of the scrollbar track */
  border-radius: 6px; /* Add border radius to the track */
}

/* Tafigy */
.tagify {
  --tagify-dd-bg-color: var(--bs-body-bg);
  --tags-border-color: var(--bs-gray-300);
  --tags-hover-border-color: var(--bs-gray-300);
  --tags-focus-border-color: var(--bs-gray-400);
  --tag-bg: #ecf5f2;
  --tag-hover: var(--bs-gray-200);
  --tag-text-color: #678c81;
  --tag-text-color--edit: var(--bs-gray-700);
  --tag-pad: 0 0.5rem;
  --tag-inset-shadow-size: 1rem;
  --tag-invalid-color: var(--bs-danger);
  --tag-invalid-bg: var(--bs-danger-light);
  --tag-remove-bg: var(--bs-gray-200);
  --tag-remove-btn-color: transparent;
  --tag-remove-btn-bg: transparent;
  --tag-remove-btn-bg--hover: transparent;
  --input-color: var(--bs-gray-700);
  --placeholder-color: var(--bs-gray-400);
  --placeholder-color-focus: var(--bs-gray-500);
  --loader-size: 0.8rem;
}