.alert {
  box-sizing: border-box;

  padding: 1rem 0.5rem;
  position: fixed;
  top: 15%;
  right: 2%;

  width: 30%;
  height: max-content;
  border: none;
  border-radius: 0.5rem;

  display: flex;
  justify-content: left;
  align-items: center;
  opacity: 1;

  font-family: Comfortaa;

  transition: opacity 0.3s;
  z-index: 50;
}
.alert__content {
  display: flex;
  flex-direction: column;
  padding: 0 2rem;
}
.alert__icon {
  font-size: 1.5rem;
}

.alert.danger {
  border-left: 5px solid rgb(217, 8, 60);
  background-color: rgb(249, 219, 219);
}
.alert__icon.danger {
  color: rgb(182, 5, 49);
}

.alert.success {
  border-left: 5px solid rgb(3, 91, 44);
  background-color: rgb(219, 249, 221);
}
.alert__icon.success {
  color: rgb(3, 91, 44);
}
.alert__content.success h1 {
  color: rgb(6, 65, 10);
}

.alert.info {
  border-left: 5px solid rgb(3, 66, 91);
  background-color: rgb(219, 236, 249);
}
.alert__icon.info {
  color: rgb(3, 66, 91);
}
.alert__content.info h1 {
  color: rgb(2, 44, 60);
}
.alert__content.info p {
  color: rgb(2, 52, 71);
}
.alert__content .fa-solid {
  color: rgb(3, 66, 91);
}


.fade {
  transition: opacity 0.5s ease, max-height 0.5s ease;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
}

.progress-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: transparent;
  border-radius: 0 0 4px 4px;
  overflow: hidden;
}

.progress-bar__fill {
  height: 100%;
  width: 0;
  transition: width 1s;
}

.progress-bar__fill.success {
  background-color: rgb(3, 66, 91);
}

.progress-bar__fill.info {
  background-color: rgb(9, 144, 198);
}

.progress-bar__fill.danger {
  background-color: rgb(182, 5, 49);
}