.toasters {
  background: white;
  border-radius: 15px;
  padding: 30px;
}

.toaster {
  margin-bottom: 20px;
  display: grid;
  grid-template-columns: 200px 300px auto;
  align-items: center;
}

.toast__label {
}

.toast__label span {
  font-size: 18px;
  margin-bottom: 10px;
}


.toast {
  max-width: 320px;
  padding: 8px 15px 8px 60px;
  border-radius: 10px;
  margin-right: 10px;
  margin-bottom: 0;

  display: flex;
  align-items: center;
  opacity: 1;
  box-shadow: none;
  position: relative;
}

.toast__block > div {
  position: relative;
  pointer-events: auto;
  overflow: hidden;
  background-position: 15px center;
  background-repeat: no-repeat;
}

#toast-container > div:hover {
  box-shadow: none;
}

#toast-container {
  top: 8%;
}

#toast-container .toast {
  max-width: 320px;
  height: auto;
  min-height: 45px;
  padding: 8px 15px 8px 60px;
  border-radius: 10px;
  position: relative;

  display: flex;
  align-items: center;
  opacity: 1;
  box-shadow: none;
}


.toast-info {
  background: #E6ECF7;
  border: 1px solid #4FA0FF;
}

.toast-info .toast-close-button {
  color: #4FA0FF;
}

.toast-info .toast-close-button:focus, .toast-info .toast-close-button:hover {
  opacity: 1;
  color: #316bad;
}

#toast-container > .toast-info {
  background-image: url("../images/info.svg") !important;
}

.toast-info {
  background-image: url("../images/info.svg") !important;
  background-repeat: no-repeat;
}

.toast-success {
  background: #E6F7F4;
  border: 1px solid #5ACBB8;
}

.toast-success .toast-close-button {
  color: #5ACBB8;
}


.toast-success .toast-close-button:focus, .toast-success .toast-close-button:hover {
  opacity: 1;
  color: #3e9386;
}


#toast-container > .toast-success {
  background-image: url("../images/success.svg") !important;
}


.toast-success {
  background-image: url("../images/success.svg") !important;
}


.toast-error {
  background: #F5E9ED;
  border: 1px solid #C15177;
}

.toast-error .toast-close-button {
  color: #C15177;
}


.toast-error .toast-close-button:focus, .toast-error .toast-close-button:hover {
  opacity: 1;
  color: #a13e60;
}


#toast-container > .toast-error {
  background-image: url("../images/error.svg") !important;
}

.toast-error {
  background-image: url("../images/error.svg") !important;
}


.toast-message {
  font-weight: normal;
  font-size: 14px;
  line-height: 16px;
  color: #2F3C44;
  margin-right: 20px;
}

button.toast-close-button {
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  right: 20px;
  font-size: 26px;
  font-weight: normal;
  opacity: 1;
  transition: all 0.2s ease-in-out;
}

@media (max-width: 992px) {
  .toaster {
    grid-template-columns: 1fr;
    grid-gap: 10px;
    align-items: center;
  }

  #toast-container {
    top: 11%;
    margin-right: 0;
    right: 0;
  }
}


@media (min-width: 241px) and (max-width: 480px) {
  #toast-container .toast-close-button {
    right: 20px;
    top: 50%;
  }
}