:root {
      --dark: #34495E;
      --light: #ffffff;
      --success: #82de2e;
      --error: #f93f32;
      --warning: #f9b826;
      --info: #64b3f4;
      --resaltado: #fa7a50;
  }

  .notifications {
      position: fixed;
      top: 15px;
      right: 10px;
      z-index: 999;
  }

  .notifications :where(.toast, .column) {
      display: flex;
      align-items: center;
  }

  .notifications .toast {
      width: 400px;
      position: relative;
      overflow: hidden;
      list-style: none;
      border-radius: 4px;
      padding: 16px 17px;
      margin-bottom: 10px;
      background: var(--light);
      justify-content: space-between;
      animation: show_toast 0.7s ease-out forwards;
  }

  @keyframes show_toast {
      0% {
          transform: translateX(100%);
      }

      40% {
          transform: translateX(-5%);
      }

      80% {
          transform: translateX(0%);
      }

      100% {
          transform: translateX(-10px);
      }
  }

  .notifications .toast.hide {
      animation: hide_toast 0.3s ease forwards;
  }

  @keyframes hide_toast {
      0% {
          transform: translateX(-10px);
      }

      40% {
          transform: translateX(0%);
      }

      80% {
          transform: translateX(-5%);
      }

      100% {
          transform: translateX(calc(100% + 20px));
      }
  }

  .toast::before {
      position: absolute;
      content: "";
      height: 3px;
      width: 100%;
      bottom: 0px;
      left: 0px;
      animation: progress 5s linear forwards;
  }

  @keyframes progress {
      100% {
          width: 0%;
      }
  }

  .icono_fondo {
      width: 25px;
      height: 25px;
      border-radius: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      padding-right: 12px;
  }

  .icono_fondo.success {
      background: var(--success);
      color: var(--light);
  }

  .icono_fondo.info {
      background: var(--info);
      color: var(--light);
  }

  .icono_fondo.error {
      background: var(--error);
      color: var(--light);
  }

  .icono_fondo.warning {
      background: var(--warning);
      color: var(--light);
  }

  .toast.success::before,
  .btn#success {
      background: var(--success);
  }

  .toast.error::before,
  .btn#error {
      background: var(--error);
  }

  .toast.warning::before,
  .btn#warning {
      background: var(--warning);
  }

  .toast.info::before,
  .btn#info {
      background: var(--info);
  }

  .toast .column i {
      font-size: 1.75rem;
  }

  .toast.success .column i {
      color: var(--success);
  }

  .toast.error .column i {
      color: var(--error);
  }

  .toast.warning .column i {
      color: var(--warning);
  }

  .toast.info .column i {
      color: var(--info);
  }

  .toast .column span {
      font-size: 1.07rem;
      margin-left: 12px;
  }

  .botonCerrarToast {
      color: #aeb0d7;
      cursor: pointer;
  }

  .botonCerrarToast:hover {
      color: var(--resaltado);
  }

  @media screen and (max-width: 530px) {
      .notifications {
          width: 95%;
      }

      .notifications .toast {
          width: 100%;
          font-size: 1rem;
          margin-left: 20px;
      }

  }