.moda{  
    /* transition: .5s; */
    border: 4px solid red;
    overflow: auto;
    width: 50vw ;
    height: fit-content;
    position: fixed;
    top: 25vh;
    left: 25vw ;
    z-index: 9999;
    animation-name: moda;
    animation-duration: .5s
  }

  .success-border{
    border: 4px solid rgb(184, 249, 147);
  }


  @keyframes moda{
    from{top: 0; opacity: .5;}
    to{top: 25vh; opacity: 1;}
  }
  @media only screen and (max-width: 850px)
  {
    .moda{
      width: 80vw;
      left: 10vw ;
    }
  }

  .messageAlert{  
    /* transition: .5s; */
    border: 4px solid red;
    overflow: auto;
    width: 10rem;
    height: fit-content;
    position: fixed;
    top: 0vh;
    left: 25vw ;
    z-index: 9999;
    animation-name: messageAlert;
    animation-duration: 1s
  }
  @keyframes messageAlert{
    from{top: 0; opacity: .4;}
    to{top: 0vh; opacity: 1;}
  }