.input-container {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 50%;
  position: relative;
}

.input-container input{
  width: 100%;
}

.dropdown {
  position: relative;
}

.dropdown-toggle{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 5vh;
  cursor: pointer;
  padding: 8px 12px;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  color: #717374;
}

.dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  overflow-y: scroll;
  width: max-content;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  z-index: 10;
}

.dropdown-menu.show {
  display: block;
  
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  cursor: pointer;
  
}

.dropdown-item a{
  text-decoration: none;
}

.dropdown-item:hover {
  background-color: #f0f0f0;
}

.flag {
  text-align: center;
  color: #717374;
  text-decoration: none;
}

.custom-dropdown {
position: relative;
width: 100%;

}

.dropdown-button {
width: 100%;
padding: 10px;
background-color: #f1f1f1;
border: 1px solid #ccc;
text-align: left;
cursor: pointer;
position: relative;

}


.dropdown-button::before {
content: "";
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%); /* Center the arrow vertically */
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #000; /* Black color for the arrow */
}

/* Optional: When dropdown is active, you can rotate the arrow */
.custom-dropdown.active + .dropdown-button::before {
transform: translateY(-50%) rotate(180deg);
}

.dropdown-options {
display: none;
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 31vh;
overflow-y: auto;
background-color: #fff;
border: 1px solid #ccc;
z-index: 100;
}

.dropdown-option {
padding: 10px;
cursor: pointer;
}

.dropdown-option:hover {
background-color: #f1f1f1;
}

/* When dropdown is active, show options */
.custom-dropdown.active .dropdown-options {
display: block;
}