.formsTable{
      display: flex;
      flex-direction: column;
      width: 100%;
    }
    .form{
      display: none;
    }
    .form.active{
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      gap: 30px;
      padding: 50px 25px;
      flex-direction: column;
    }

    .form > div{
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 50px;
    }

    .form input, .form select{
      height: 50px;
      padding: 10px;
      border: none;
      border-radius: 5px;
      color: #000000;
      font-size: 16px;

    }

    .form select{
      padding: 0 10px;
    }

    .form button{
      border: none;
      height: 40px;
      background: #FFCC00;
      color: #fff;
      padding: 0 20px;
      cursor: pointer;
      transition: all ease .3s;
      border-radius: 5px;
      font-weight: bold;
      font-size: 16px;
      min-width: 150px;
    }

    .form .join{
      /* display: flex;
      background: #fff;
      gap: 0;
      justify-content: center;
      align-items: center;
      border-radius: 5px;
      padding: 0 20px; */
      /* width: 50%; */
    }
    .form .join label{
      color:white;
    }

    .r1, .r2, .r3{
      display: flex;
      flex-direction: row;
      width: 100%;
    }

    .form .join span{
      padding: 0 5px;
      color: #000000;
      font-size: 18px;
    }

    .form button:hover{
      background: #9d1c1ee3;
    }
    .r1 input, .r1 select, .r1 .join, .r2 input{
      width: 100%;
    }
    .r2 select, .r2 .join{
      width: 100%;
    }
    
    .r2 > div{
      gap: 50px;
    }

    input[type="date"]:focus + span {
      display: none;
    }

    .form input[type=number]{
      width: 75px;
    }

    .form .pDetails{
      display: flex;
      gap: 10px;
    }
    .form .pDetails input{
      width: 100px;
    }
    .r3{
      font-size: 15px;
    }

    @media(max-width:769px){
      .form > div{
        gap: 20px;
      }.r2 > div{
        gap: 20px;
      }
    }
    @media(max-width:669px){
      .r2{
        flex-direction: column;
      }
      .r2 > div{
        gap: 20px;
      }
      
    }
    @media(max-width:420px){
      .form input, .form select, .form button, .form .join span{
        font-size: 12px;
      }
      .r3{
        font-size: 10px;
      }
    }

    /* @media(max-width:1220px){
      .formsTable{
        width: 100vw;
      }
    }

    @media(max-width:1185px){
      .forms{
        height: fit-content;
      }
      .form{
        flex-direction: column;
      }
      .form > div{
        width: 100%;
      }
      .form > div input, .form > div button, .form > div select{
        width: 100%;
      }
      .form > div:nth-child(1) .join,.form > div:nth-child(1) input[type=date]{
        width: calc(25% - 8px);
      }
      .form > div:nth-child(1) .join{
        width: calc(25% - 8px);
      }
      .form .pDetails{
        width: 100%;
      }
      .form .pDetails input{
        width: 100%;
      }

      .transferForm input[type=number]{
        width: 150px;
      }
    }
    @media(max-width:680px){
      .form > div{
        flex-wrap: wrap;
      }
      .form > div:nth-child(1){
        flex-direction: column;
      }
      .form > div:nth-child(1) .join{
        width: 100%;
      }
      .form > div:nth-child(1) .join input,.form > div:nth-child(1) .join select, .form > div:nth-child(1) input[type=date]{
        width: 100%;
      }
      .form > div:nth-child(2) .join{
        width: calc(25% - 8px);
      }
      .form > div:nth-child(2) .join input{
        width: 100%;
      }
      .form > div:nth-child(2) button{
        flex: 1 1 100%;
      }
    }
    @media(max-width:450px){
      .form > div:nth-child(2) .join{
        width: calc(50% - 6px);
      }
    } */