.modal-outer{
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 10;
    height: 100vh;
    width: 100%;
    background-color: rgba(0,0,0,0.4);
  }
  
  .modal{
    position: absolute;
    top: 50%;
    left: 50%;
    --tw-translate-x: -50%;
    --tw-translate-y: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    overflow: hidden;
    border-radius: 0.75rem;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
    width: 380px;
    height: 200px;
  }
  
  .modal-header{
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    text-align: center;
    font-size: 0.875rem;
    line-height: 1.25rem;
    --tw-text-opacity: 1;
    color: rgb(80 80 80 / var(--tw-text-opacity));
    background-color: #FFFFFF;
    position: relative;
  }
  
  .modal-body{
    --tw-bg-opacity: 1;
    background-color: #FFFFFF;
    padding: 1.25rem;
  }

  .v-enter-active,
  .v-leave-active {
    transition: opacity 0.3s ease;
  }
  
  .v-enter-from,
  .v-leave-to {
    opacity: 0;
  }



  @media (max-width:768px){
    .modal{
        width: calc(100% - 100px);
    }
  }