:root {
  --color-primary: #325B4B;
  --color-secondary: #B18F61;
  --color-white: #fff;
  --color-gray: #ddd;
  --color-bg: #191a1d;
}
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-thumb {
  background: var(--color-secondary);
}
.fi-sidebar-header,
.fi-topbar nav {
  background: var(--color-primary) !important;
}
.fi-sidebar {
  background: var(--color-gray) !important;
}
.fi-sidebar-header .fi-logo {
  /*height: 2rem !important;*/
  /*width: 13rem !important;*/
  /*margin:0 auto !important;*/
}
.fi-logo {
  
  /* padding: 20px; */
  

}
.fi-sidebar-header a div {
  color: var(--color-white) !important;
}
.fi-sidebar-open a span,
.fi-sidebar-open a svg {
  color: var(--color-primary) !important;
}
.fi-sidebar-open .fi-sidebar-item-active a {
  background-color: var(--color-secondary) !important;
}
.fi-sidebar-open .fi-sidebar-item-active a span ,
.fi-sidebar-open .fi-sidebar-item-active  a svg {
  color: var(--color-gray) !important;
}
.fi-sidebar-open a:hover {
  background-color: var(--color-secondary) !important;
}
.fi-sidebar-open a:hover span,
.fi-sidebar-open a:hover svg {
  color: var(--color-gray) !important;
}
.fi-topbar nav span svg,
.fi-topbar nav button,
.fi-topbar nav span {
  color: var(--color-white) !important;
}
.fi-topbar .fi-dropdown-list {
  background: var(--color-primary) !important;
}
.fi-topbar .fi-dropdown-list button:hover {
  background: var(--color-secondary) !important;
}
.fi-topbar .fi-dropdown-list span:first-child {
  background: var(--color-secondary) !important;
}
.fi-topbar .fi-dropdown-header {
  background: var(--color-primary) !important;
}
.fi-topbar .fi-dropdown-panel .fi-dropdown-list div button {
  background: transparent !important;
}
.fi-topbar .fi-dropdown-panel .fi-dropdown-list div button:hover {
  background: var(--color-secondary) !important;
}
.fi-simple-main-ctn {
  background: var(--color-white) !important;
}
.fi-simple-main {
  border: 1px solid white !important;
  box-shadow: none !important;
}

.fi-logo{
  width: 130px !important;
  height: 40px !important
}
.fi-simple-header .fi-logo{
  width: 130px !important;
  height: auto !important
}
.fi-simple-main .fi-simple-header-heading {
  color: var(--color-primary) !important;
}
.fi-dropdown .fi-dropdown-trigger {
  background: var(--color-primary) !important;
  border-radius: 5px;
}
.fi-dropdown .fi-dropdown-trigger span {
  color: white !important;
}
.fi-dropdown .fi-dropdown-list {
  background: var(--color-primary) !important;
  border-radius: 5px;
}
.fi-dropdown .fi-dropdown-list span {
  color: white !important;
}
.fi-dropdown .fi-dropdown-list span:first-child {
  background: var(--color-secondary) !important;
}
.flatpickr-calendar .flatpickr-months .flatpickr-month {
  background-color: var(--color-primary) !important;
  color: white !important;
}
.flatpickr-calendar .flatpickr-months .flatpickr-current-month {
  padding: 0 !important;
}
.flatpickr-calendar
  .flatpickr-months
  .flatpickr-current-month
  .flatpickr-monthDropdown-months {
  background: var(--color-primary) !important;
  font-size: 16px !important;
  padding: 0 !important;
}
.flatpickr-calendar
  .flatpickr-months
  .flatpickr-current-month
  .flatpickr-monthDropdown-months
  option {
  font-size: 16px !important;
  color: var(--color-primary) !important;
}
.flatpickr-calendar
  .flatpickr-months
  .flatpickr-current-month
  .numInputWrapper
  input {
  background-color: var(--color-primary) !important;
  color: #fff !important;
}
.flatpickr-calendar .flatpickr-months .flatpickr-current-month .arrowDown,
.flatpickr-calendar .flatpickr-months .flatpickr-current-month .arrowUp {
  background-color: var(--color-secondary) !important;
}

.flatpickr-calendar .flatpickr-months .flatpickr-next-month {
  color: white !important;
}
.flatpickr-calendar .flatpickr-months .flatpickr-prev-month {
  color: white !important;
}
.flatpickr-weekdays,
.flatpickr-weekday {
  background-color: var(--color-secondary) !important;
  color: white !important;
}

.fi-dropdown-panel > div {
  max-height: 350px;
  overflow-y: auto;
}
.fi-simple-main-ctn {
  background: linear-gradient(to right, #325B4B, #B18F61) !important ;
  /*background:#ddd !important;*/
}
.fi-simple-page{
  background:;
}
.fi-wi-stats-overview-stats-ctn {
  grid-column: 1 / -1 !important; /* Span all columns */
  display: grid !important;
  gap: 1rem; /* Add gap between stats */
}

/* Small screens (default) */
.fi-wi-stats-overview-stats-ctn {
  grid-template-columns: repeat(1, 1fr) !important; /* 1 column */
}

/* Medium screens (e.g., tablets) */
@media (max-width: 512px) {
  .fi-wi-stats-overview-stats-ctn {
    grid-template-columns: repeat(2, 1fr) !important; /* 3 columns */
  }
}
@media (max-width: 1325px) {
  .fi-wi-stats-overview-stats-ctn {
    grid-template-columns: repeat(3, 1fr) !important; /* 3 columns */
  }
}
/* Large screens (e.g., desktops) */
@media (min-width: 1325px) {
  .fi-wi-stats-overview-stats-ctn {
    grid-template-columns: repeat(7, 1fr) !important; /* 6 columns */
  }
}
/* $colors = ['#016f44', '#ba4b01', '#8ed617', '#2F425A']; */
.fi-wi-stats-overview-stats-ctn > :nth-child(odd) {
  background-color: #325B4B;
}
.fi-wi-stats-overview-stats-ctn > :nth-child(even) {
  background-color: #B18F61;
}

.fi-wi-stats-overview-stats-ctn > div > div {
  color: white !important;
  font-size: 22px;
}

.fi-wi-stats-overview-stats-ctn > div > div > div > span {
  color: white !important;
  font-size: 22px;
}
.fi-wi-stats-overview-stat-description {
  width: 100% !important;
}

button.fi-dropdown-list-item:hover {
  background-color: var(--color-secondary) !important;
}
.fi-icon-btn-icon{
  color: #333 !important;
}
.fi-dropdown-list-item:hover,
.fi-dropdown-list-item:focus-visible {
    background-color: var(--color-secondary) !important; /* خلفية وردية فاتحة عند hover/focus */
}

.dark .fi-dropdown-list-item:hover,
.dark .fi-dropdown-list-item:focus-visible {
    background-color: rgba(255, 192, 203, 0.2) !important; /* خلفية وردية خفيفة للوضع المظلم */
}