.select-sim {
  height:2rem;
  width: 8rem;
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position:relative;
  background:white;
  overflow:hidden;
  border-radius: 6px;
}

.select-sim::after {
  content:"▼";
  font-size:0.5em;
  font-family:arial;
  position:absolute;
  top:50%;
  right:5px;
  transform:translate(0, -50%);
}

.select-active::after {
  content:"";
}

.select-active {
  height:2rem;
  width: 8rem;
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position:relative;
  background:white;
  border-radius: 6px;
  overflow: visible;
  cursor: pointer;
  z-index: 1000;
}

.select-active .options .option:hover {
  cursor: pointer;
}

.select-active .options .option:hover, .select-active .options .option label:hover, .select-active .options .option img:hover {
  cursor: pointer;
}

.select-active .options .option:hover {
  transform: scale(1.05);
  transition: transform 200ms ease-in-out;
}

.select-active .options {
  background:white;
  position:absolute;
  top: 0;
  left: 0;
  width:7rem;
  overflow-y:scroll;
  box-shadow: 0px 0px 2px rgb(228, 73, 73);
  border-radius: 6px;
  padding: 1rem 1rem;
  display: flex;
  flex-direction:column;
  gap: 0.5rem;
  cursor: pointer;
}



.select-sim .options .option, .select-active .options .option {
  overflow:hidden;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  transform: scale(1);
  transition: transform 200ms ease-in-out;
}

.select-sim .options .option input:checked + label, .select-active .options .option input:checked + label{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1rem;
  cursor: pointer;
}

.select-sim .options .option img, .select-active .options .option img {
  max-width: 20px;
  max-height: 20px;
  border-radius: 3px;
}

.select-sim .options .option label, .select-active .options .option label {
  display:none;
}

.select-sim .options .option input, .select-active .options .option input {
  width:0;
  height:0;
  overflow:hidden;
  margin:0;
  padding:0;
  float:left;
  /* fix specific for Firefox */
  position: absolute;
  left: -10000px;
}

.select-active .options .option label {
  display: flex;
  cursor: pointer;
  align-items: center;
  justify-content: flex-start;
  gap: 1rem;
}