floodteam-modal-add-step #step-type span {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem;
  flex-direction: column;
  margin: 1rem auto;
  border: 2px solid var(--step-type-color, var(--ion-color-medium));
  border-radius: 10px;
}

floodteam-modal-add-step #step-type span:hover {
  cursor: pointer;
  --step-type-color: var(--ion-color-primary);
}

floodteam-modal-add-step #step-type span.active {
  --step-type-color: var(--ion-color-primary);
}

floodteam-modal-add-step #step-type ion-icon {
  display: block;
  margin: 0 auto;
  height: 60px;
  width: 60px;
  color: var(--step-type-color, var(--ion-text-medium));
  opacity: 0.6;
}

floodteam-modal-add-step #step-type span.active ion-icon {
  opacity: 1;
}

floodteam-modal-add-step #step-type label {
  display: block;
  margin: 0 auto;
  text-align: center;
  font-size: 1.1rem;
  color: var(--step-type-color, var(--ion-text-medium));
}
