#toastBar {
    /*visibility: hidden;*/
    visibility: hidden;
    max-width: 45px;
    height: 45px;
    margin: auto;
    background-color: #28a745;
    color: rgba(255,255,255,.9);
    font-size: 16px;
    text-align: center;
    position: fixed;
    z-index: 9999;
    top: 30px;
    overflow: hidden;
    white-space: nowrap;
    box-shadow: rgb(0 0 0 / 24%) 0px 3px 8px;
}

#toastBar #toastIcon{
  width: 45px;
  height: 45px;
  float: left;
  border-radius: 10px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  vertical-align: baseline;
}

#toastBar #toastDesc{
  padding: 10px;
  padding-right: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
}

#toastBar.success {
	background-color: #28a745;
}

#toastBar.fail {
  background-color: #dc3545;
}

#toastBar.warn {
  background-color: #ffc107;
}

#toastBar.info {
  background-color: #27b2c8;
}

#toastBar.show {
    visibility: visible;
    -moz-animation: fadein 0.5s, expand 0.75s 0.5s,stay 3s 1.25s, shrink 0.5s 4.25s, fadeout 0.5s 4.75s;
    -webkit-animation: fadein 0.5s, expand 0.75s 0.5s,stay 3s 1.25s, shrink 0.5s 4.25s, fadeout 0.5s 4.75s;
    animation: fadein 0.5s, expand 0.75s 0.5s,stay 3s 1.25s, shrink 0.5s 4.25s, fadeout 0.5s 4.75s;
}

#toastBar.closing {
	 visibility: visible;
   -moz-animation: shrink 0.5s, fadeout 0.5s 0.5s;
	 -webkit-animation: shrink 0.5s, fadeout 0.5s 0.5s;
   animation: shrink 0.5s, fadeout 0.5s 0.5s;
}

@-moz-keyframes fadein {
    from {top: 0; opacity: 0;}
    to {top: 30px; opacity: 1;}
}

@-webkit-keyframes fadein {
    from {top: 0; opacity: 0;}
    to {top: 30px; opacity: 1;}
}

@keyframes fadein {
    from {top: 0; opacity: 0;}
    to {top: 30px; opacity: 1;}
}

@-moz-keyframes expand {
    from {min-width: 50px;}
    to {max-width: 90vw;}
}

@-webkit-keyframes expand {
    from {min-width: 50px;}
    to {max-width: 90vw;}
}

@keyframes expand {
    from {min-width: 50px;}
    to {max-width: 90vw;}
}

@-moz-keyframes stay {
    from {max-width: 90vw; white-space: normal;}
    to {max-width: 90vw; white-space: normal;}
}

@-webkit-keyframes stay {
    from {max-width: 90vw; white-space: normal;}
    to {max-width: 90vw; white-space: normal;}
}

@keyframes stay {
    from {max-width: 90vw; white-space: normal;}
    to {max-width: 90vw; white-space: normal;}
}

@-moz-keyframes shrink {
    from {max-width: 90vw;}
    to {max-width: 50px;}
}

@-webkit-keyframes shrink {
    from {max-width: 90vw;}
    to {max-width: 50px;}
}

@keyframes shrink {
    from {max-width: 90vw;}
    to {max-width: 50px;}
}

@-moz-keyframes fadeout {
    from {top: 30px; opacity: 1;}
    to {top: 0px; opacity: 0;}
}

@-webkit-keyframes fadeout {
    from {top: 30px; opacity: 1;}
    to {top: 0px; opacity: 0;}
}

@keyframes fadeout {
    from {top: 30px; opacity: 1;}
    to {top: 0px; opacity: 0;}
}

@media only screen and (max-width: 984px) {
  #toastBar {
   top: 30px;
  }
}

@media only screen and (max-width: 600px) {
  #toastBar {
      font-size: 13px;
  }
}