.alert {
  min-width: 300px;
  width: auto;
  height: 40px;
  background: #dc3545;
  border: 1px solid #a71d2a;
  border-radius: 5px;
  display: flex;
  border-bottom-color: transparent;
  overflow: hidden;
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 99;
}

.alert div {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: end;
  flex-wrap: wrap;
  align-content: center;
  position: relative;
  color: #fff;
}

.alert div span {
  width: 100%;
  height: 4px;
  background: #a71d2a;
  position: absolute;
  animation: popupAnime 10s infinite;
}
@keyframes popupAnime {
  from {
    width: 100%;
  }
  to {
    width: 0px;
  }
}
.alert div p {
  width: 100%;
  text-align: center;
  font-size: 20px;
  font-weight: 600;
  color: #fff;
}

.popup {
  transition: 2s all ease-out;
}
.popup-success {
  background-color: #28a745;
  border-color: #1e7e34;
}
.popup-success div span {
  background-color: #1e7e34;
}
.popup-info {
  background-color: #17a2b8;
  border-color: #117a8b;
}
.popup-info div span {
  background-color: #117a8b;
}
.popup-default {
  background-color: #6c757d; /* Gri */
  border-color: #5a6268;
}
.popup-default div span {
  background-color: #5a6268;
}