/* `sm` applies to x-small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
    .meeting.wrapper{min-height: 100vh;}
    .meeting .ag-header{display: block; padding: 25px 30px 20px 30px; height: 60px;}
    .header-logo{margin-top: -25px;}
    .ag-header-lead{font-size: 14px;}
    .ag-header-msg{display: none;}
    .wrap-username{height: 100%; padding: 10px; background: rgba(255, 255, 255, .1); border-radius: 12px; margin: 8px;}
    .wrap-username .ant-form .ant-form-item{width: 100%;}
    .wrap-username .btn-connect{width: 100%; margin-top: 16px;}
    .ag-container{width: 100%; background: transparent;}
    .meeting .ag-footer{padding: 0px 5%; display: block; margin-top: 10px; font-size: 12px;}
    .meeting .ag-footer :first-child{margin-right: 0px;}
    .meeting .ag-main{ height: calc(100vh / 1.9); position: inherit;}
    .list-pa{padding:0px}
    .pa-item{max-height: 100%; height: calc(100vh / 1.95); margin-bottom: 16px;}
    .pa-item.you{
      position: absolute; right: 16px; width: calc(100vw / 2.7); height: calc(100vw / 2.7);bottom: 59px; max-height: auto; max-height: 100%;
    }
    .participants {display: block; height: 100%; padding-bottom: 60px; padding:8px}
    .ag-btn-group{width: 100%;}

  }
  
  /* Extra small devices (portrait phones, less than 320px)*/
  @media (max-width: 320px) {
    
  }
  
  /* `md` applies to small devices (landscape phones, less than 768px) */
  @media (min-width: 576px) and (max-width: 767.98px) {
  
  }
  
  /* `lg` applies to medium devices (tablets, less than 992px) */
  @media (min-width: 768px) and (max-width: 991.98px) {
    .meeting.wrapper{min-height: 100vh;}
    .participants {
        display: block; height: 100%; padding-bottom: 50px;
    }
    .participants .pa-item{width: 100%; height: calc(100vw / 2); margin-bottom: 16px;}
    .meeting .ag-main{height: 100%; }
    .ag-container {height: 100%;}
    .wrap-username{min-height: calc(100vh - 140px);}
  }
  
  @media (min-width: 992px) and (max-width: 1024px) {
    .participants {
        display: flex; flex-direction: row; flex-wrap: wrap;
    }
    .participants .pa-item{width: 48%; height: auto; max-height: calc(100vw / 3); }
  }
  
  /* `xl` applies to large devices (desktops, less than 1200px) */
  @media (max-width: 1199.98px) {}
  
  /* `xxl` applies to x-large devices (large desktops, less than 1400px) */
  @media (max-width: 1399.98px) {}