html, body, #map {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: #ffffff;
}

#slider {
  position: absolute;
  top: 10px;
  right: 10px;
}

#buttons {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1000;
}

.modal {
  max-height: 1000px !important;
  max-width: fit-content + 10px !important;
  background-color: rgba(49, 54, 56, 0.8) !important; /* White background with 80% opacity */
  color: #fdfff4 !important;
}

.modal-content {
  background-color: transparent; /* Make modal content background transparent */
  color: #fdfff4 !important;
  overflow-y: auto;
  max-height: 80vh; /* Adjust the height as needed */
}

.modal-footer {
  background-color: transparent !important; 
}

.modal input {
  color: #fdfff4 !important; /* Change to desired color */
}

.modal textarea {
  color: #fdfff4 !important; /* Change to desired color */
}

#buttons .profile-circle {
  width: 75px;
  height: 75px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  display: none; /* Initially hidden */
}

/* Custom scrollbar styles */
#leaderboardList {
  overflow-y: auto;
  max-height: 1000px; /* Adjust the height as needed */
}

#leaderboardList::-webkit-scrollbar {
  width: 12px;
}

#leaderboardList::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}

#leaderboardList::-webkit-scrollbar-thumb {
  background: #2bbaac33;
  border-radius: 10px;
}

#leaderboardList::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* Custom scrollbar styles for modal content */
.modal-content::-webkit-scrollbar {
  width: 10px;
}

.modal-content::-webkit-scrollbar-track {
  background: #00000025;
  border-radius: 5px;
}

.modal-content::-webkit-scrollbar-thumb {
  background: #ffffff0c;
  border-radius: 10px;
}

.modal-content::-webkit-scrollbar-thumb:hover {
  background: #ffffff25;
}

.modal {
  max-height: 80vh !important; 
  max-width: 600px !important; 
  background-color: rgba(49, 54, 56, 0.8) ; 
  color: #fdfff4; }

.modal-content { 
  background-color: 
  transparent; color: #fdfff4; 
  overflow-y: auto; 
  max-height: 80vh; }

@media (max-width: 768px) { 
  .modal { 
    max-width: 90% !important; 
    max-height: 90vh !important; } 
  } 

  .toast {
    top: 10px !important;
    right: 10px !important;
  }

    .stats-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr); /* Two columns */
      gap: 10px; /* Space between items */
      margin-bottom: 20px; /* Space below each themed area */
  }
 

.stats-item {
    padding: 5px;
    border: 1px solid #00000009;
    border-radius: 4px;
    text-align: center;
    width: 150px; 
      
  }

  .stats-item img.ride-badge {
    width: 80px;
    height: 80px;
    margin-bottom: 5px;
}

.stats-item strong {
    display: block;
    margin-bottom: 5px;
    white-space: nowrap; /* Prevent text wrapping */
    overflow: hidden;
    text-overflow: ellipsis;
}

.ride-badge {
    display: block;
    margin: 0 auto 5px; /* Center the badge and add spacing below */
    width: 75px; /* Adjust size as needed */
    height: 75px;
    object-fit: contain; /* Ensure the image fits within the dimensions */
}

.progress-bar-container {
  background-color: #e0e0e0;
  border-radius: 4px;
  height: 8px;
  margin-top: 5px;
  overflow: hidden;
  width: 100%;
}

.progress-bar {
  background-color: #73dd77;
  height: 100%;
  transition: width 0.3s ease;
  border-radius: 4px;
}

.toast {
  position: fixed !important; /* Ensure the toast is fixed */
  top: 10px !important; /* Position it at the top */
  right: 10px !important; /* Align it to the right */
  z-index: 9999 !important; /* Ensure it appears above other elements */
}

#language-changer .dropdown-trigger {
  background-color: #4caf50; /* Green background */

}

/* Style the dropdown menu */
#language-dropdown {
  background-color: #ffffff; /* White background */
  border: 1px solid #ddd; /* Light border */
  border-radius: 5px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow */
  min-width: 150px; /* Minimum width for dropdown */
}

/* Style each dropdown item */
#language-dropdown li a {
  display: flex;
  align-items: center;
  padding: 10px 15px;
  color: #333; /* Dark text */
  font-size: 14px;
  text-decoration: none;
  transition: background-color 0.3s ease;
}

/* Add spacing between the flag and text */
#language-dropdown li a img {
  margin-right: 10px;
  border-radius: 3px; /* Rounded corners for flags */
}

/* Hover effect for dropdown items */
#language-dropdown li a:hover {
  background-color: #f0f0f0; /* Light gray background on hover */
}

/* Active dropdown item styling */
#language-dropdown li.active a {
  background-color: #4caf50; /* Green background */
  color: white; /* White text */
}

.collection {
  margin: .5rem 0 1rem 0;
  overflow: hidden;
  position: relative;
  border: none !important;
}

.collection-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #fff;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  border: none !important;
  margin-bottom: 10px;
}

.collection-item .profile-info {
  display: flex;
  align-items: center;
}

.collection-item .profile-info img {
  margin-right: 15px;
}

.collection-item .btn-small {
  align-self: center;
  margin: 0;
}

.collection .collection-item.avatar .secondary-content {
  position: static !important; /* Remove absolute positioning */
  margin-left: auto; /* Push the button to the right */
  align-self: center; /* Center the button vertically */
}

.vip-username {
  background: linear-gradient(
    to right,
    #AA771C, /* Dark gold */
    #B38728, /* Medium-dark gold */
    #FBF5B7, /* Light gold */
    #B38728, /* Medium-dark gold */
    #AA771C  /* Dark gold */
  );
  background-size: 200% auto;
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: Gradient 3s linear infinite;
  font-weight: bold;
  display: inline;
}

.vip-button {
  background: linear-gradient(
    to right,
    #AA771C, /* Dark gold */
    #B38728, /* Medium-dark gold */
    #FBF5B7, /* Light gold */
    #B38728, /* Medium-dark gold */
    #AA771C  /* Dark gold */
  );
  background-size: 200% auto;
  animation: Gradient 3s linear infinite;
  color: black !important;
  font-weight: bold;
  text-shadow: 0px 0px 3px rgba(255, 255, 255, 0.5);
}

/* Add this after the .vip-username class */
.dev-username {
  background: linear-gradient(
    to right,
    #ea0000, /* Deep purple */
    #b80000, /* Light purple */
    #741212, /* Medium purple */
    #b80000, /* Light purple */
    #ff0000  /* Dark purple */
  );
  background-size: 200% auto;
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: Gradient 3s linear infinite;
  font-weight: bold;
  display: inline;
}

.dev-button {
  background: linear-gradient(
    to right,
    #ea0000, /* Deep purple */
    #b80000, /* Light purple */
    #741212, /* Medium purple */
    #b80000, /* Light purple */
    #ea0000 /* Dark purple */
  );
  background-size: 200% auto;
  animation: Gradient 3s linear infinite;
  color: black !important;
  font-weight: bold;
  text-shadow: 0px 0px 3px rgba(255, 255, 255, 0.5);
}

@keyframes Gradient {
  0% {
    background-position: 0% center;
  }
  100% {
    background-position: 200% center;
  }
}