.alert{
    display: flex;
    align-items:center;
    padding: 15px;
    border-radius:1rem;
    width: 20%;
    min-width: 300px;
    justify-content: space-between;
    margin-bottom: 2rem;
    opacity: 1; 
    transition: opacity 0.5s ease-in-out;
 }
  .content-alerts{
    display: grid;
    grid-template-columns: auto auto auto;
    align-items: center;
    gap:15px
  }
  .icon-alerts{
    padding: 0.5rem;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .closebtn{
    background-color: transparent;
    border:none;
    outline:none;
    transition:all 0.2s ease-in-out;
    padding: 0.75rem;
    border-radius:0.5rem;
    cursor:pointer;
    display: flex;
    align-items:center;
    justify-content: center;
  }
  .closebtn:hover{
    background-color: #fff;
  }
  
  .success{
    background-color: rgba(62, 189, 97,0.2);
    border:2px solid #3ebd61;
  }
  .success .icon-alerts{
    background-color:#3ebd61;
  }
  .info{
    background-color: rgba(0, 108, 227,0.2);
    border:2px solid #006CE3;
  }
  .info .icon-alerts{
    background-color: #006CE3;
  }
  .warning{
    background-color: rgba(239, 148, 0, 0.2);
    border:2px solid #EF9400;
  }
  .warning .icon-alerts{
    background-color: #EF9400;
  }
  
  .danger{
    background-color: rgba(236, 77, 43, 0.2);
    border:2px solid #EF9400;
  }
  .danger .icon-alerts{
    background-color: #EC4D2B;
  }