@font-face {
  font-family: 'Poppins';
  src: url('/src/assets/fonts/Poppins/Poppins-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Poppins';
  src: url('/src/assets/fonts/Poppins/Poppins-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'Poppins';
  src: url('/src/assets/fonts/Poppins/Poppins-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
}

      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: 'Poppins', sans-serif;
      }
      :root {
        --dark: #34495E;
        --light: #ffffff;
        --success: #0ABF30;
        --error: #E24D4C;
        --warning: #E9BD0C;
        --info: #3498DB;
      }


      .toast {
        z-index: 1026;
        position: fixed;
        top: 30px;
        right: 20px;
        min-width: 200px;
        max-width: 900px;
        background: var(--light);
        overflow: hidden;
        border-radius: 4px;
        padding: 16px 17px;
        margin-bottom: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        display: flex;
        align-items: center;
        justify-content: space-between;
        animation: show_toast 0.3s ease forwards;
      }
      .toast :where(.column) {
        display: flex;
        align-items: center;
      }

      @keyframes show_toast {
        0% {
          transform: translateX(100%);
        }
        40% {
          transform: translateX(-5%);
        }
        80% {
          transform: translateX(0%);
        }
        100% {
          transform: translateX(-10px);
        }
      }

      .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%;
        }
      }
      .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;
        margin-right: 12px;
      }
      .toast i:last-child {
        color: #aeb0d7;
        cursor: pointer;
      }
      .toast i:last-child:hover {
        color: var(--dark);
      }
      .buttons .btn {
        border: none;
        outline: none;
        cursor: pointer;
        margin: 0 5px;
        color: var(--light);
        font-size: 1rem;
        padding: 10px 20px;
        border-radius: 4px;
      }
      @media screen and (max-width: 530px) {
        .toast {
          width: 95%;
          font-size: 1rem;
          margin-left: 20px;
        }
        .buttons .btn {
          margin: 0 1px;
          font-size: 1.1rem;
          padding: 8px 15px;
        }
      }