.toast_wrapper {
    height: 50px;
    background: #000;
    position: fixed;
    top: 10%;
    left: 40%;
    /* border-radius: 5px; */
    display: flex;
    justify-content: space-between;
    align-items: center;
    animation: reveal   .5s ease-in-out;
    padding:0px 10px;
}
.toast_wrapper::before{
  content: "";
  width: 100%;
  height: 3px;
  background: #009bb6;
  position: absolute;
  top: 47px;
  left: 0%;
  animation: line 3.1s linear;
}

@keyframes line{
  from{
    width:100%;
  }
  to{
    width:0%;
  }
}
.toast_icon {
    width: 50px;
    font-size: 20px;
    text-align: center;
}

.toast_text {
    width: 100%;
    font-size: 16px;
    ;
    text-align: center;
    color: #cdcdcd;
}

@keyframes reveal{
   from{
        transform: translateY(-50px);
    }
    to{
        transform: translateY(0px);
    }
}


/* ===============================For hiding toast after 3 seconds===========================*/
.hidetoast{
  transform: translateY(-1000px);
  transition: 1s ease-in-out;
}
/*========================================================================================== */