.alert{
  display: none;
  width: $panelWidth;
  margin: 0 auto;
  color: $alertTextColor;

  transition: display 1s;

    &.has-error{
      display: block
    }
    &.alert-warning{
    background-color: $alertBackgroundColor;
    }
}

.error{
  width: $panelWidth;
  margin: 0 auto;
  color: $alertTextColor;
  background-color: $alertBackgroundColor;
  padding: 20px;
}

.error.not-found{
  background-color: #fdab3d;
}
.message-container{
  position: absolute;
  width: 450px;
  left: calc(50% - 225px);
}
.message{
  position: relative;
  width: 450px;
  top: -25px;
  height: 50px;
  margin: auto;
  background-color: #48E882;
  padding: 16px 80px;
  border-radius: 4px 4px 0 0;
  opacity: 0;
  -webkit-transform: translate3d(0,-25px,0); /* Ch <36, Saf 5.1+, iOS < 9.2, An =<4.4.4 */
  -ms-transform: translate3d(0,-25px,0); /* IE 9 */
  transform: translate3d(0,-25px,0); /* IE 10, Fx 16+, Op 12.1+ */
  transition: all 1s
}
.message.message-3, .message.message-4{
  background-color: #fdab3d;
}

.message p{
  margin: 0;
  font-size: 1em;
  font-weight: 500;
  color: white;
}

.message.active{
  opacity: 1;
  -webkit-transform: translate3d(0,0,0); /* Ch <36, Saf 5.1+, iOS < 9.2, An =<4.4.4 */
  -ms-transform: translate3d(0,0,0); /* IE 9 */
  transform: translate3d(0,0,0); /* IE 10, Fx 16+, Op 12.1+ */
}