.flag-icon {
  width: 24px; /* Or any size you prefer */
  height: 24px;
  margin-right: 12px; /* Add some space between the flag and text */
  margin-bottom: 3px;
}
.flag-icon-button {
  width: 24px; /* Or any size you prefer */
  height: 24px;
  margin-right: 8px; /* Add some space between the flag and text */
  margin-bottom: 3px;
}
@media (max-width: 575px) {
    .flag-icon-button {
      margin-left: -8px;
    }
}
.language-selector-placeholder {
  margin-right: 0px;
}
.lang-selector-btn {
  background-color: white !important; /* Ensure the button is white */
  color: #0d6efd !important; /* Text color */
  border: none !important; /* Remove border */
  padding-left: 18px;
}
.lang-selector-btn:hover {
  background-color: hsl(200, 10%, 94%) !important; /* Light grey background on hover */
}

/* If you're using a custom arrow icon, ensure the icon inherits the button's text color */
.lang-selector-btn {
  color: inherit;
}
.dropdown-item, .lang-selector-btn {
  font-family: 'Open Sans', sans-serif;
  font-weight: 500;
}
.lang-selector-menu {
  border: none !important; /* Remove border */
  box-shadow: 0 4px 6px rgba(0,0,0,.1); /* Bootstrap 5 shadow example, adjust as needed */
  margin-top: .125rem; /* Adjust the spacing between the button and the menu as needed */
}