.dashboard .sales-card .card-icon {
  color: #4154f1;
  background: #f6f6fe;
}

.dashboard .revenue-card .card-icon {
  color: #2eca6a;
  background: #e0f8e9;
}
.dashboard .turnover-card .card-icon {
  color: #d41374;
  background: #e0ecf8;
}

.dashboard .customers-card .card-icon {
  color: #ff771d;
  background: #ffecdf;
}
.dashboard .win-rate-card .card-icon {
  color: #b87bf6;
  background: rgba(255, 223, 244, 0.4);
}
.dashboard .bonus-retention-card .card-icon {
  color: #1526e0;
  background: rgba(44, 165, 251, 0.38);
}
.dashboard .mug-bet-rate-card .card-icon {
  color: #e01515;
  background: rgba(248, 78, 52, 0.385);
}
.dashboard .roi-card .card-icon {
  color: #1f8f43;
  background: rgba(31, 143, 67, 0.2);
}

.dashboard .average-profit-card .card-icon {
  color: #0b8043;
  background: rgba(11, 128, 67, 0.2);
}

/* Filter dropdown */
.dashboard .filter {
  position: absolute;
  right: 0px;
  top: 15px;
}

.dashboard .filter .icon {
  color: #aab7cf;
  padding-right: 20px;
  padding-bottom: 5px;
  transition: 0.3s;
  font-size: 16px;
}

.dashboard .filter .icon:hover,
.dashboard .filter .icon:focus {
  color: #4154f1;
}

.dashboard .filter .dropdown-header {
  padding: 8px 15px;
}

.dashboard .filter .dropdown-header h6 {
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
  color: #aab7cf;
  margin-bottom: 0;
  padding: 0;
}

.dashboard .filter .dropdown-item {
  padding: 8px 15px;
}

.dashboard .card-icon {
  font-size: 24px;
  line-height: 0;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  flex-grow: 0;
}

.section.dashboard .dashboard-filter-select {
  background-color: var(--bettrackr-blue);
  color: var(--bettrackr-green);
  border: none;
  border-radius: 0.25rem;
  cursor: pointer;
  /* Center the text */
  /* text-align: center; */
  text-align-last: center; /* Ensures selected option text is centered */

  appearance: none; /* Remove default arrow */
  -webkit-appearance: none; /* For Safari */
  -moz-appearance: none; /* For Firefox */

  padding: 0.5rem 2rem; /* Add padding to keep the arrow visible */

  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="%2328A745"><path d="M7 7l3-3 3 3M7 13l3 3 3-3"/></svg>');
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1.5rem;
}

/* Style the dropdown options */
.section.dashboard .form-select option {
  color: var(--bettrackr-green);
  /* text-align: center; */
}

/* Hover effect */
.section.dashboard .form-select:hover {
  filter: brightness(0.95);
  background-color: var(--bettrackr-blue-hover);
}

/* Custom styling for the form-select elements */
.section.dashboard .form-select {
  font-family: inherit;
  font-size: 1rem; /* Ensure same font size */
  font-weight: normal; /* Match the navbar text */
}

/* Focus effect for accessibility */
.section.dashboard .form-select:focus {
  box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
  outline: none;
}

/* Style the period filter dropdown */
#dashboard_period {
  font-size: 1.5rem;
  font-weight: bold;
  border: none;
  background: none;
  text-align: center;
  padding: 0;
  margin: 0 auto;
  cursor: pointer;
  outline: none;
}

#dashboard_period:hover {
  color: #0d6efd;
}

#dashboard_period option {
  font-size: 1rem;
  color: black;
  background-color: white;
}



.compact-widget {
  width: 110px; /* Compact size */
  background: #f8f9fa;
  border: 1px solid #dee2e6;
}

.widget-value {
  font-size: 18px;
  font-weight: bold;
  margin: 4px 0;
}

.widget-title {
  font-size: 12px;
}

.widget-col {
  transition: all 0.3s ease; 
}

.widget-expanded {
  flex: 0 0 100%; 
  max-width: 100%;
  transition: flex 0.3s ease, max-width 0.3s ease; 
}