@keyframes slidein {
  0%{
      height: 50px;
   
    }
    100%{
      height: 0px;
    }
  }
.notify{
  padding: 10px;
  transition:  5s ;
  position:fixed;
  top:5px;
  width:100%  ;
  height:auto;  
  box-sizing:border-box;
  color:white;  
  text-align:center;
  z-index: 10;
  overflow:hidden;
  box-sizing:border-box;
  
}
#notifyTypes{
    display: block;
   animation-name: slidein;
}
#notifyType{
  width: 100%;
  line-height: 2;
  height: auto;
  color: #721c24;
  padding: 8px 10px;
  text-align: center;
  border-radius: 5px;
  background: #f8d7da;
  border: 1px solid #f5c6cb;
 
}
#notifyTypeB{
  width: 100%;
  line-height: 2;
  height: auto;
  color: #1c4b72;
  padding: 8px 10px;
  text-align: center;
  border-radius: 5px;
  background: #d7e7f8;
  border: 1px solid #c6d5f5;
 
}

.error-text{
  color: #721c24;
  padding: 8px 10px;
  text-align: center;
  border-radius: 5px;
  background: #f8d7da;
  border: 1px solid #f5c6cb;
  margin-bottom: 10px;
  display: none;
  
}