/* ===== Select Box ===== */
.sel, .sel2 {
  background-color: #FFF;
  position: relative;
  cursor: pointer;
}

.sel::before, .sel2::before {
  position: absolute;
  content: '\f078';
  font-family: 'Font Awesome 5 Pro';
  font-size: 1.22em;
  color: #000;
  right:5px;
  top: -5px;
}


#signup-form form .sel::before, #signup-form form .sel2::before {
  right: 15px;
  top: 15px;
}

#signup-form form .sel.sgl::before, #signup-form form .sel2.sgl::before  {display: none;}


#signup-form form .sel-order-locatie {z-index: 5}
#signup-form form .sel-order-genre {z-index: 4}
#signup-form form .sel-order-lessoort {z-index: 3}
#signup-form form .sel-order-groep {z-index: 2}
#signup-form form .sel-order-dag {z-index: 1}


.sel.active::before, .sel2.active::before {
  content: '\f077';
}

.sel__placeholder, .sel__placeholder2 {
  display: block;
  text-align: left;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  visibility: visible;
}

.sel.active .sel__placeholder, .sel2.active .sel__placeholder2 {
  visibility: hidden;
}

.sel__placeholder::before, sel2__placeholder::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  /* padding: 0.2em 0.5em; */
  content: attr(data-placeholder);
  visibility: hidden;
}

.sel.active .sel__placeholder::before, .sel2.active .sel__placeholder2::before {
  visibility: visible;
}

.sel__box, .sel__box2 {
  position: absolute;
  top: calc(100% +4px);
  top: -4px;
  border: 1px solid #CCC;
 
  display: none;
  list-style-type: none;
  text-align: left;
  font-size: 1em;
  background-color: #FFF;
  width: calc(100% + 8px);
  box-sizing: border-box;
}

#signup-form form  .sel__box, #signup-form form  .sel__box2 {
  top: 0;
  left: 0;
  border-radius: 4px;
  border: 0;
  width:100%;
  box-sizing: border-box;
}


#signup-form form .sel .sel__box , #signup-form form .sel2 .sel__box2 {z-index: 9;}
#signup-form form .sel, #signup-form form .sel2 {min-height: 50px;}


#signup-form form  .sel__box__options, #signup-form form  .sel__box__options2 {
   font-size: 100%;
  padding:  15px 20px 10px 20px;;
}


.sel__box-tijd span, .sel__box-tijd2 span { text-align: right; padding-right: 25%; }



.sel.active .sel__box, .sel2.active .sel__box2 {
  display: block;
  -webkit-animation: fadeInDown 500ms;
          animation: fadeInDown 500ms;
}

.sel__box__options, .sel__box__options2 {
  display: list-item;
  font-family: 'Monty-Regular';
  padding: 0.25em 0.5em;
  font-size: 90%;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.sel__box__options:hover, .sel__box__options2:hover {
  background-color: #eee;
}




/* ===== Keyframes ===== */
@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 20px, 0);
            transform: translate3d(0, 20px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 20px, 0);
            transform: translate3d(0, 20px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

@-webkit-keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}