.alert{
    background: #ffdb9b;
    padding: 1rem;
    position: absolute;
    right: 0;
    top: 0.6rem;
    border-radius: 4px;
    border-left: 8px solid #ffa502;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    z-index: 906;
  }
  .alert.showAlert{
    opacity: 1;
    pointer-events: auto;
  }
  .alert.show{
    animation: show_slide 1s ease forwards;
  }
  @keyframes show_slide {
    0%{
      transform: translateX(100%);
    }
    40%{
      transform: translateX(-10%);
    }
    80%{
      transform: translateX(0%);
    }
    100%{
      transform: translateX(-10px);
    }
  }
  .alert.showAlert.hides{
    animation: hide_slide 1s ease forwards;
  }
  @keyframes hide_slide {
    0%{
      transform: translateX(-10px);
    }
    40%{
      transform: translateX(0%);
    }
    80%{
      transform: translateX(-10%);
    }
    100%{
      transform: translateX(100%);
    }
  }
  .alert .fa-bell{
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: #ce8500;
    font-size: 1.8rem;
  }
  .alert .msg{
    padding: 0 4rem;
    font-size: 1.2rem;
    color: #ce8500;
  }
  .alert .close-btn{
    position: absolute;
    right: 0px;
    top: 50%;
    transform: translateY(-50%);
    background: #ffd080;
    padding: 1.2rem 1rem;
    cursor: pointer;
  }
  .alert .close-btn:hover{
    background: #ffc766;
  }
  .alert .close-btn .fa{
    color: #ce8500;
    font-size: 22px;
    line-height: 40px;
  }