/* styles for slidepanel */

/* define starting animation*/
@keyframes slideDown {
  0% {
    transform: translateY(-100%)
  }
  100% {
    transform: translateY(0);
  }
}
@-webkit-keyframes slideDown {
  0% {
    -webkit-transform: translateY(-100%)
  }
  100% {
    -webkit-transform: translateY(0);
  }
}
@-moz-keyframes slideDown {
  0% {
    -moz-transform: translateY(-100%)
  }
  100% {
    -moz-transform: translateY(0);
  }
}
@keyframes spinUp {
  0% {
    transform: rotate(0)
  }
  25% {
    transform: rotate(90deg)
  }
  50% {
    transform: rotate(180deg)
  }
  75% {
    transform: rotate(270deg)
  }
  100% {
    transform: rotate(360deg)
  }
}
@-webkit-keyframes spinUp {
  0% {
    -webkit-transform: rotate(0)
  }
  25% {
    -webkit-transform: rotate(90deg)
  }
  50% {
    -webkit-transform: rotate(180deg)
  }
  75% {
    -webkit-transform: rotate(270deg)
  }
  100% {
    -webkit-transform: rotate(360deg)
  }
}
@-moz-keyframes spinUp {
  0% {
    -moz-transform: rotate(0)
  }
  25% {
    -moz-transform: rotate(90deg)
  }
  50% {
    -moz-transform: rotate(180deg)
  }
  75% {
    -moz-transform: rotate(270deg)
  }
  100% {
    -moz-transform: rotate(360deg)
  }
}

@keyframes assmbl {
  100% {
    transform: translate3d(0rem, 0rem, 0rem);
  }
}
@-webkit-keyframes assmbl {
  100% {
    -webkit-transform: translate3d(0rem, 0rem, 0rem);
  }
}
@-moz-keyframes assmbl {
  100% {
    -moz-transform: translate3d(0rem, 0rem, 0rem);
  }
}
#app_ui {
  transition: transform 0.3s 0.3s;
}

#auswahl-auswahl-row {
  transition: transform 0.3s 0.3s;
  border: 1px solid #e3e3e3;
  background: #ffffff;
  box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
  padding: 0px;
  margin: 0px;
  margin-bottom: 0px;
  border-radius: 10px;
  border-bottom-right-radius: 0px;
}
#auswahl-slide-row {
  /*animation: 1s ease-out 0s 1 slideDown;*/
  transform: translateY(-100%);
  -webkit-transform: translateY(-100%);
  -moz-transform: translateY(-100%);
}
#auswahl-slide-row.slideready {
  animation: 1s ease-out 0s 1 slideDown;
  -webkit-animation: 1s ease-out 0s 1 slideDown;
  -moz-animation: 1s ease-out 0s 1 slideDown;
  transform: translateY(0%);
  -webkit-transform: translateY(0%);
  -moz-transform: translateY(0%)
}

.dissmbl {
  animation: 1.5s ease-out 0s 1 normal forwards assmbl;
  -webkit-animation: 1.5s ease-out 0s 1 normal forwards assmbl;
  -moz-animation: 1.5s ease-out 0s 1 normal forwards assmbl;
}

button[id$="-slider"] {
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
  margin-top: 0px;
  margin-right: 25px;
  background: #007ab8;
  color: #ffffff;
}


button[id$="-slider"].sldn-up {
  visibility: hidden;
  transition-property: visibility;
  transition-delay: 0.3s;
  float: left;
}

button[id$="slider-hdr"] {
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
  margin-right: 25px;
  margin-top: 0.9em;
  background: #007ab8;
  color: #ffffff;
  visibility: hidden;
  align-self: end;
}

button[id$="slider-hdr"].slidr-up {
  visibility: visible;
  transition-property: visibility;
  transition-delay: 0.3s;
}

button[id$="-slider"] > i {
  transition: transform 0.3s;
}

button[id$="-slider"] > i {
  animation: 0.5s ease-out 1s 1 spinUp;
  -webkit-animation: 0.5s ease-out 1s 1 spinUp;
  -moz-animation: 0.5s ease-out 1s 1 spinUp;
}

button[id$="-slider"] > i.slidden-up {
  transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  transition: transform 0.3s;
}