.popup-container {
    width: 100%;
    padding: 3% 3%;
    border: 1px solid gray;
    border-radius: 8px;
    position: relative;
  }
  
  .user-information-card {
    width: 100%;
    height: 140px;
    border: 1px solid gray;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0px 4%;
  }
  
  .name-section-container {
    display: flex;
    /* align-items: center; */
    flex-direction: column;
    gap: 1px;
  }
  
  .profile-btn-cancel {
    width: 25px;
    height: 25px;
    border: 1px solid gray;
    position: absolute;
    top: 4%;
    right: 2%;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    display: none;
  }
  
  profile-btn-cancel>i {
    font-size: 15px;
  }
  
  h4 {
    margin-top: 0px !important;
    margin-bottom: 0px important;
  }
  
  .name-text {
    margin-left: 5px;
  }
  
  .user-logo {
    width: 90px;
    height: 90px;
    border: 1px solid gray;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .container {
    /* border: 1px solid black; */
  
  }
  
  .row {
    /* border: 1px solid black; */
    padding: 10px 3px;
  }
  
  .colPro {
    border: 1px solid gray;
    padding: 5px 10px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 3%;
    margin-top: 8px;
    background-color: #e0dcdc;
  }
  
  .icon-profile {
    width: 32px;
    height: 32px;
    border: 1px solid gray;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .btn-popup-border{
    border: 1px solid gray !important;
    border-radius: 50% !important;
  }
  .name-email-date{
    color: black;
    margin-bottom: 0px;
  }
  
  @media(min-width:1729px) and (max-width:2560px){
    .container{
      padding: 0px 10px !important;
    }
    .profile-btn-cancel {
      top: 2%;
      right: 3%;
    }
    .popup-container{
      /* width: 36%; */
      padding: 4% 2%;
  
    }
    h4{
      font-size: 20px;
    }
    .user-logo{
     width: 80px;
     height: 80px;
    }
    .role-text{
      font-size: 15px;
    }
    .name-email-date{
      font-size: 16px;
    }
    .icon-profile{
      width: 30px;
      height: 30px;
    }
  }
  @media only screen and (min-width:2560px){
    .container{
      padding: 0px 10px !important;
    }
    .profile-btn-cancel {
      top: 2%;
      right: 3%;
    }
    .popup-container{
      /* width: 36%; */
      padding: 4% 2%;
  
    }
    h4{
      font-size: 20px;
    }
    .user-logo{
     width: 80px;
     height: 80px;
    }
    .role-text{
      font-size: 15px;
    }
    .name-email-date{
      font-size: 16px;
    }
    .icon-profile{
      width: 30px;
      height: 30px;
    }
  }
  @media(max-width:1728px){
    .container{
      padding: 0px 10px !important;
    }
    .profile-btn-cancel {
      top: 2%;
      right: 3%;
    }
    .popup-container{
      /* width: 36%; */
      padding: 4% 2%;
  
    }
    h4{
      font-size: 20px;
    }
    .user-logo{
     width: 80px;
     height: 80px;
    }
    .role-text{
      font-size: 15px;
    }
    .name-email-date{
      font-size: 16px;
    }
    .icon-profile{
      width: 30px;
      height: 30px;
    }
  }
  
  @media(max-width:1668px){
    .container{
      padding: 0px 10px !important;
    }
    .profile-btn-cancel {
      top: 2%;
      right: 3%;
    }
    .popup-container{
      /* width: 40%; */
      padding: 5% 3%;
    }
    h4{
      font-size: 20px;
    }
    .user-logo{
     width: 80px;
     height: 80px;
    }
    .role-text{
      font-size: 15px;
    }
    .name-email-date{
      font-size: 16px;
    }
    .icon-profile{
      width: 30px;
      height: 30px;
    }
  }
  @media(max-width:1440px){
    .container{
      padding: 0px 10px !important;
    }
    .profile-btn-cancel {
      top: 2%;
      right: 3%;
    }
    .popup-container{
      /* width: 40%; */
      padding: 5% 3%;
    }
    h4{
      font-size: 20px;
    }
    .user-logo{
     width: 80px;
     height: 80px;
    }
    .role-text{
      font-size: 15px;
    }
    .name-email-date{
      font-size: 16px;
    }
    .icon-profile{
      width: 30px;
      height: 30px;
    }
  }
  @media(max-width:1368px){
    .container{
      padding: 0px 10px !important;
    }
    .profile-btn-cancel {
      top: 2%;
      right: 3%;
    }
    .popup-container{
      /* width: 40%; */
      padding: 5% 3%;
    }
    h4{
      font-size: 17px;
    }
    .user-logo{
     width: 80px;
     height: 80px;
    }
    .role-text{
      font-size: 15px;
    }
    .name-email-date{
      font-size: 15px;
    }
    .icon-profile{
      width: 30px;
      height: 30px;
    }
  }
  @media(max-width:1280px){
    .container{
      padding: 0px 10px !important;
    }
    .profile-btn-cancel {
      top: 2%;
      right: 3%;
    }
    .popup-container{
      /* width: 40%; */
      padding: 5% 3%;
    }
    h4{
      font-size: 17px;
    }
    .user-logo{
     width: 80px;
     height: 80px;
    }
    .role-text{
      font-size: 15px;
    }
    .name-email-date{
      font-size: 15px;
    }
    .icon-profile{
      width: 30px;
      height: 30px;
    }
  }
  @media(max-width:1199px){
    .container{
      padding: 0px 10px !important;
    }
    .profile-btn-cancel {
      top: 2%;
      right: 3%;
    }
    .popup-container{
      /* width: 48%; */
      padding: 8% 3%;
    }
    h4{
      font-size: 17px;
    }
    .user-logo{
     width: 80px;
     height: 80px;
    }
    .role-text{
      font-size: 15px;
    }
    .name-email-date{
      font-size: 15px;
    }
    .icon-profile{
      width: 30px;
      height: 30px;
    }
  }
  @media(max-width:1180px){
    .container{
      padding: 0px 10px !important;
    }
    .profile-btn-cancel {
      top: 2%;
      right: 3%;
    }
    .popup-container{
      /* width: 48%; */
      padding: 8% 3%;
    }
    h4{
      font-size: 17px;
    }
    .user-logo{
     width: 80px;
     height: 80px;
    }
    .role-text{
      font-size: 15px;
    }
    .name-email-date{
      font-size: 15px;
    }
    .icon-profile{
      width: 30px;
      height: 30px;
    }
  }
  @media(max-width:1104px){
    .container{
      padding: 0px 10px !important;
    }
    .profile-btn-cancel {
      top: 2%;
      right: 3%;
    }
    .popup-container{
      /* width: 48%; */
      padding: 8% 3%;
    }
    h4{
      font-size: 17px;
    }
    .user-logo{
     width: 80px;
     height: 80px;
    }
    .role-text{
      font-size: 15px;
    }
    .name-email-date{
      font-size: 15px;
    }
    .icon-profile{
      width: 30px;
      height: 30px;
    }
  }
  @media(max-width:1024px){
    .container{
      padding: 0px 10px !important;
    }
    .profile-btn-cancel {
      top: 2%;
      right: 3%;
    }
    .popup-container{
      /* width: 48%; */
      padding: 8% 3%;
    }
    h4{
      font-size: 17px;
    }
    .user-logo{
     width: 80px;
     height: 80px;
    }
    .role-text{
      font-size: 15px;
    }
    .name-email-date{
      font-size: 15px;
    }
    .icon-profile{
      width: 30px;
      height: 30px;
    }
  }
  @media(max-width:991px){
    .container{
      padding: 0px 10px !important;
    }
    .profile-btn-cancel {
      top: 2%;
      right: 3%;
    }
    .popup-container{
      /* width: 53%; */
      padding: 8% 3%;
    }
    h4{
      font-size: 17px;
    }
    .user-logo{
     width: 80px;
     height: 80px;
    }
    .role-text{
      font-size: 15px;
    }
    .name-email-date{
      font-size: 15px;
    }
    .icon-profile{
      width: 30px;
      height: 30px;
    }
  }
  @media(max-width:768px){
  
    .container{
      padding: 0px 10px !important;
    }
    .profile-btn-cancel {
      top: 2%;
      right: 3%;
    }
    .popup-container{
      /* width: 70%; */
      padding: 6% 3%;
    }
    h4{
      font-size: 17px;
    }
    .user-logo{
     width: 80px;
     height: 80px;
    }
    .role-text{
      font-size: 15px;
    }
    .name-email-date{
      font-size: 15px;
    }
    .icon-profile{
      width: 30px;
      height: 30px;
    }
  }
  @media(max-width:700px){
    .container{
      padding: 0px 10px !important;
    }
    .profile-btn-cancel {
      top: 2%;
      right: 3%;
    }
    .popup-container{
      /* width: 70%; */
      padding: 6% 3%;
    }
    h4{
      font-size: 17px;
    }
    .user-logo{
     width: 80px;
     height: 80px;
    }
    .role-text{
      font-size: 15px;
    }
    .name-email-date{
      font-size: 15px;
    }
    .icon-profile{
      width: 30px;
      height: 30px;
    }
  }
  @media(max-width:650px){
    .container{
      padding: 0px 0px !important;
    }
    .profile-btn-cancel {
      top: 2%;
      right: 3%;
    }
    .popup-container{
      /* width: 100%; */
      padding: 5% 3%;
    }
    h4{
      font-size: 17px;
    }
    .user-logo{
     width: 80px;
     height: 80px;
    }
    .role-text{
      font-size: 15px;
    }
    .name-email-date{
      font-size: 15px;
    }
    .icon-profile{
      width: 30px;
      height: 30px;
    }
  }
  @media(max-width:600px){
    .container{
      padding: 0px 10px !important;
    }
  
    .profile-btn-cancel {
      top: 2%;
      right: 3%;
    }
    .popup-container{
      /* width: 100%; */
      padding:5% 3%;
    }
    h4{
      font-size: 17px;
    }
    .user-logo{
     width: 80px;
     height: 80px;
    }
    .role-text{
      font-size: 15px;
    }
    .name-email-date{
      font-size: 15px;
    }
    .icon-profile{
      width: 30px;
      height: 30px;
    }
  }
  @media(max-width:560px){
    .container{
      padding: 0px 10px !important;
    }
    .profile-btn-cancel {
      top: 2%;
      right: 3%;
    }
    .popup-container{
      width: 100%;
      padding: 4% 3%;
    }
    h4{
      font-size: 17px;
    }
    .user-logo{
     width: 80px;
     height: 80px;
    }
    .role-text{
      font-size: 15px;
    }
    .name-email-date{
      font-size: 15px;
    }
    .icon-profile{
      width: 30px;
      height: 30px;
    }
  }
  @media(max-width:500px){
    .container{
      padding: 0px 10px !important;
    }
    .profile-btn-cancel {
      top: 2%;
      right: 3%;
    }
    .popup-container{
      width: 100%;
      padding: 4% 3%;
    }
    h4{
      font-size: 17px;
    }
    .user-logo{
     width: 80px;
     height: 80px;
    }
    .role-text{
      font-size: 15px;
    }
    .name-email-date{
      font-size: 15px;
    }
    .icon-profile{
      width: 30px;
      height: 30px;
    }
  }
  @media(max-width:460px){
    .container{
      padding: 0px 10px !important;
    }
  
    .profile-btn-cancel {
      top: 2%;
      right: 3%;
    }
    .popup-container{
      width: 100%;
      padding: 4% 3%;
    }
    h4{
      font-size: 17px;
    }
    .user-logo{
     width: 80px;
     height: 80px;
    }
    .role-text{
      font-size: 14px;
    }
    .name-email-date{
      font-size: 14px;
    }
    .icon-profile{
      width: 30px;
      height: 30px;
    }
  }
  @media(max-width:400px){
  
    .container{
      padding: 0px 10px !important;
    }
  
    .profile-btn-cancel {
      top: 2%;
      right: 3%;
    }
    .popup-container{
      width: 100%;
      padding: 4% 3%;
    }
    h4{
      font-size: 17px;
    }
    .user-logo{
     width: 80px;
     height: 80px;
    }
    .role-text{
      font-size: 14px;
    }
    .name-email-date{
      font-size: 14px;
    }
    .icon-profile{
      width: 30px;
      height: 30px;
    }
  }
  @media(max-width:375px){
    .container{
      padding: 0px 10px !important;
    }
  
    .profile-btn-cancel {
      top: 2%;
      right: 3%;
    }
    .popup-container{
      width: 100%;
      padding: 4% 3%;
    }
    h4{
      font-size: 17px;
    }
    .user-logo{
     width: 80px;
     height: 80px;
    }
    .role-text{
      font-size: 14px;
    }
    .name-email-date{
      font-size: 13px;
    }
    .icon-profile{
      width: 27px;
      height: 27px;
    }
  }
  @media(max-width:364px){
    .container{
      padding: 0px 10px !important;
    }
  
    .profile-btn-cancel {
      top: 2%;
      right: 3%;
    }
    .popup-container{
      width: 100%;
      padding: 4% 3%;
    }
    h4{
      font-size: 17px;
    }
    .user-logo{
     width: 80px;
     height: 80px;
    }
    .role-text{
      font-size: 14px;
    }
    .name-email-date{
      font-size: 13px;
    }
    .icon-profile{
      width: 27px;
      height: 27px;
    }
  }
  @media(max-width:350px){
    .container{
      padding: 0px 10px !important;
    }
  
    .profile-btn-cancel {
      top: 2%;
      right: 3%;
    }
    .popup-container{
      width: 100%;
      padding: 4% 3%;
    }
    h4{
      font-size: 17px;
    }
    .user-logo{
     width: 80px;
     height: 80px;
    }
    .role-text{
      font-size: 14px;
    }
    .name-email-date{
      font-size: 13px;
    }
    .icon-profile{
      width: 27px;
      height: 27px;
    }
  }
  @media(max-width:320px){
  
    .container{
      padding: 0px 10px !important;
    }
    
    .profile-btn-cancel {
      top: 2%;
      right: 3%;
    }
    .popup-container{
      width: 100%;
      padding: 4% 3%;
    }
    h4{
      font-size: 17px;
    }
    .user-logo{
     width: 80px;
     height: 80px;
    }
    .role-text{
      font-size: 14px;
    }
    .name-email-date{
      font-size: 13px;
    }
    .icon-profile{
      width: 27px;
      height: 27px;
    }
   
  }