/* Button used to open the chat form - fixed at the bottom of the page */
.open-button {
    padding:5px 20px;
    background-color: #04AA6D;
    color: white;
    font-size:17px;
    max-width:300px;
    border-radius:20px;
    border: none;
    cursor: pointer;
    position: fixed;
    bottom: 23px;
    right: 28px;  
    line-height: 30px;
  }
  
  /* The popup chat - hidden by default */
  .chat-popup {
    display: none;
    position: fixed;
    bottom: 30px;
    right: 12px;
    z-index: 9;
   
  }
  
  /* Add styles to the form container */
  .form-container {
    max-width: 300px;
    padding: 10px;
    border-radius:20px;
    background-color: white;
    color:#777;
  }
  
  /* Full-width textarea */
  .form-container textarea {
    width: 100%;
    padding: 15px;
    margin: 5px 0 22px 0;
    border: none;
    border-radius:20px;
    background: #ddd;
    resize: none;
    min-height: 200px;
    color:#777;
  }
  
  /* When the textarea gets focus, do something */
  .form-container textarea:focus {
    background-color: #ddd;
    outline: none;
  }
  
  /* Set a style for the submit/send button */
  .form-container .btn {
    background-color: #04AA6D;
    color: white;
     font-size:17px;
    padding: 10px 20px;
    border: none;
    border-radius:20px;
    cursor: pointer;
    width: 100%;
    margin-bottom:10px;
  }
  
  /* Add a red background color to the cancel button */
  .form-container .cancel {
    background-color: #1974D2;
  }
  
  /* Add some hover effects to buttons */
  .form-container .btn:hover, .open-button:hover {
  opacity: 0.8;
  }
  .col-kdf{
      display: flex; 
      justify-content: center;
  }
  
  .h3-text{
      margin: 60px 0;
  }
  .review-button{
      bottom: 320px !important;
      rotate: 90deg !important;
      right: 0 !important;
      background: #ffbf00;
  }
  .mt-60{ margin-top: 60px; } .mt-55{ margin-top: 55px; } .mt-50{ margin-top: 50px; } 
  .mt-40{ margin-top: 40px; } .mt-35{ margin-top: 35px; } .mt-30{ margin-top: 30px; } 
  .mt-25{ margin-top: 25px; } .mt-20{ margin-top: 20px; } .mt-15{ margin-top: 15px; } 
  .mt-10{ margin-top: 10px; } .mt-5{ margin-top: 5px; } .mt-0{ margin-top: 0px;}
  
  .mb-60{ margin-bottom: 60px; } .mb-55{ margin-bottom: 55px; } .mb-50{ margin-bottom: 50px; } 
  .mb-40{ margin-bottom: 40px; } .mb-35{ margin-bottom: 35px; } .mb-30{ margin-bottom: 30px; } 
  .mb-25{ margin-bottom: 25px; } .mb-20{ margin-bottom: 20px; } .mb-15{ margin-bottom: 15px; } 
  .mb-10{ margin-bottom: 10px; } .mb-5{ margin-bottom: 5px; } .mb-0{ margin-bottom: 0px;}
  
  .ml-60{ margin-left: 60px; } .ml-55{ margin-left: 55px; } .ml-50{ margin-left: 50px; } 
  .ml-40{ margin-left: 40px; } .ml-35{ margin-left: 35px; } .ml-30{ margin-left: 30px; } 
  .ml-25{ margin-left: 25px; } .ml-20{ margin-left: 20px; } .ml-15{ margin-left: 15px; } 
  .ml-10{ margin-left: 10px; } .ml-5{ margin-left: 5px; } .ml-0{ margin-left: 0px;}
  
  .mr-60{ margin-right: 60px; } .mr-55{ margin-right: 55px; } .mr-50{ margin-right: 50px; } 
  .mr-40{ margin-right: 40px; } .mr-35{ margin-right: 35px; } .mr-30{ margin-right: 30px; } 
  .mr-25{ margin-right: 25px; } .mr-20{ margin-right: 20px; } .mr-15{ margin-right: 15px; } 
  .mr-10{ margin-right: 10px; } .mr-5{ margin-right: 5px; } .mr-0{ margin-right: 0px;}
  
  .pt-60{ padding-top: 60px; } .pt-55{ padding-top: 55px; } .pt-50{ padding-top: 50px; } 
  .pt-40{ padding-top: 40px; } .pt-35{ padding-top: 35px; } .pt-30{ padding-top: 30px; } 
  .pt-25{ padding-top: 25px; } .pt-20{ padding-top: 20px; } .pt-15{ padding-top: 15px; } 
  .pt-10{ padding-top: 10px; } .pt-5{ padding-top: 5px; } .pt-0{ padding-top: 0px;}
  
  .pb-60{ padding-bottom: 60px; } .pb-55{ padding-bottom: 55px; } .pb-50{ padding-bottom: 50px; } 
  .pb-40{ padding-bottom: 40px; } .pb-35{ padding-bottom: 35px; } .pb-30{ padding-bottom: 30px; } 
  .pb-25{ padding-bottom: 25px; } .pb-20{ padding-bottom: 20px; } .pb-15{ padding-bottom: 15px; } 
  .pb-10{ padding-bottom: 10px; } .pb-5{ padding-bottom: 5px; } .pt-0{ padding-bottom: 0px;}
  
  .pl-60{ padding-left: 60px; } .pl-55{ padding-left: 55px; } .pl-50{ padding-left: 50px; } 
  .pl-40{ padding-left: 40px; } .pl-35{ padding-left: 35px; } .pl-30{ padding-left: 30px; } 
  .pl-25{ padding-left: 25px; } .pl-20{ padding-left: 20px; } .pl-15{ padding-left: 15px; } 
  .pl-10{ padding-left: 10px; } .pl-5{ padding-left: 5px; } .pl-0{ padding-left: 0px;}
  
  .pr-60{ padding-right: 60px; } .pr-55{ padding-right: 55px; } .pr-50{ padding-right: 50px; } 
  .pr-40{ padding-right: 40px; } .pr-35{ padding-right: 35px; } .pr-30{ padding-right: 30px; } 
  .pr-25{ padding-right: 25px; } .pr-20{ padding-right: 20px; } .pr-15{ padding-right: 15px; } 
  .pr-10{ padding-right: 10px; } .pr-5{ padding-right: 5px; } .pr-0{ padding-right: 0px;}
  
  .w-100{ width: 100%; } .w-90{ width: 90%; } .w-80{ width: 80%; }
  .w-70{ width: 70%; } .w-60{ width: 60%; } .w-50{ width: 50%; }
  .w-40{ width: 40%; } .w-30{ width: 30%; } .w-20{ width: 20%; }
  .w-10{ width: 10%; }
  
  .content-chat{
      /* margin-right: 30px;
      margin-left: 30px; */
      display: flex;
      justify-content: center;
      gap: 25px;
      padding: 50px;
  }
  
  
  
  .content-chat .content-chat-user .head-search-chat{
      background-color: #75BB8F;
      margin: -15px -15px 15px -15px;
      border-radius: 25px 25px 0 0;
      padding: 10px 15px;
  }
  
  .content-chat .content-chat-user .head-search-chat h4{
      color: #ffffff;
  }
  
  .content-chat .content-chat-user .search-user{
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 25px;
  }
  
  .content-chat .content-chat-user .search-user input{
      padding: 10px 15px;
      border-radius: 25px;
      border: 2px solid #949494;
      outline: none;
      width: 100%;
  }
  
  .content-chat .content-chat-user .search-user span i{
      position: absolute;
      top: 10px;
      right: 15px;
  }
  
  .content-chat .content-chat-user .list-search-user-chat {
      display: flex;
      flex-direction: column;
      gap: 15px;
      height: 100%;
      max-height: 430px;
      overflow-y: auto;
  }
  
  .content-chat .content-chat-user .list-search-user-chat::-webkit-scrollbar{
      -webkit-appearance: none;
  }
  
  .content-chat .content-chat-user .list-search-user-chat::-webkit-scrollbar:vertical {
      width:10px;
  }
  
  .content-chat .content-chat-user .list-search-user-chat::-webkit-scrollbar-button:increment,
  .content-chat .content-chat-user .list-search-user-chat::-webkit-scrollbar-button {
      display: none;
  } 
  
  .content-chat .content-chat-user .list-search-user-chat::-webkit-scrollbar:horizontal {
      height: 10px;
  }
  
  .content-chat .content-chat-user .list-search-user-chat::-webkit-scrollbar-thumb {
      background-color: #75BB8F;
      border-radius: 20px;
      border: 2px solid #f1f2f3;
  }
  
  .content-chat .content-chat-user .list-search-user-chat::-webkit-scrollbar-track {
      border-radius: 10px;  
  }
  
  .content-chat .content-chat-user .list-search-user-chat .user-chat{
      display: flex;
      gap: 15px;
      padding: 10px 15px;
      border-radius: 25px;
      cursor: pointer;
  }
  
  .content-chat .content-chat-user .list-search-user-chat .user-chat:hover{
      background-color: #d5e5db;
  }
  
  .content-chat .content-chat-user .list-search-user-chat .user-chat.active{
      background-color: #d5e5db;
  }
  
  .content-chat .content-chat-user .list-search-user-chat .user-chat .user-chat-img{
      position: relative;
      width: 60px;
      height: 60px;
      border-radius: 50%;
  }
  
  .content-chat .content-chat-user .list-search-user-chat .user-chat .user-chat-img img {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      object-fit: cover;
  }
  
  .content-chat .content-chat-user .list-search-user-chat .user-chat .user-chat-img .online{
      position: absolute;
      bottom: 5px;
      right: 5px;
      width: 10px;
      height: 10px;
      font-size: 20px;
      background-color: #009975;
      border-radius: 50%;
      border: 3px solid #ffffff;  
      box-shadow: 1px 1px 15px -4px #000;
  }
  
  .content-chat .content-chat-user .list-search-user-chat .user-chat .user-chat-img .offline{
      position: absolute;
      bottom: 5px;
      right: 5px;
      width: 10px;
      height: 10px;
      font-size: 20px;
      background-color: #bb4315;
      border-radius: 50%;    
      border: 3px solid #ffffff;
      box-shadow: 1px 1px 15px -4px #000;
  }
  
  .content-chat .content-chat-message-user{
      /* display: none; */
      background-color: #ffffff;
      box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
      padding: 15px;
      border-radius: 25px;
      /* max-width: 700px; */
      width: 100%;
  }
  
  .content-chat .content-chat-message-user.active{
      display: block;
  }
  
  /* .content-chat .content-chat-message-user.d-none{
      display: none;
  } */
  
  .content-chat .content-chat-message-user .head-chat-message-user{
      display: flex;
      gap: 15px;
      padding: 10px 15px;
      border-radius: 25px 25px 0 0;
      background-color: #75BB8F;
      margin-top: -15px;
      margin-left: -15px;
      margin-right: -15px;
  }
  
  .content-chat .content-chat-message-user .head-chat-message-user img{
      width: 60px;
      height: 60px;
      border-radius: 50%;
      object-fit: cover;
  }
  
  .content-chat .content-chat-message-user .head-chat-message-user .message-user-profile small {
      display: flex;
      gap: 5px;
  }
  
  .content-chat .content-chat-message-user .head-chat-message-user .message-user-profile small .online{
      width: 10px;
      height: 10px;
      font-size: 20px;
      background-color: #009975;
      border-radius: 50%;
      border: 3px solid #ffffff;  
      box-shadow: 1px 1px 15px -4px #000;
  }
  
  .content-chat .content-chat-message-user .head-chat-message-user .message-user-profile small .offline{
      width: 10px;
      height: 10px;
      font-size: 20px;
      background-color: #bb4315;
      border-radius: 50%;
      border: 3px solid #ffffff;  
      box-shadow: 1px 1px 15px -4px #000;
  }
  .content-chat .content-chat-message-user .body-chat-message-user {
      display: flex;
      flex-direction: column;
      gap: 15px;
      box-sizing: border-box;
      padding: 15px;
      height: 400px;
      margin: 15px 0;
      overflow: auto;
      background-color: #ececec;
      border-radius: 10px;
  }
  
  .content-chat .content-chat-message-user .body-chat-message-user::-webkit-scrollbar{
      -webkit-appearance: none;
  }
  
  .content-chat .content-chat-message-user .body-chat-message-user::-webkit-scrollbar:vertical {
      width:10px;
      border-radius: 25px;
  }
  
  .content-chat .content-chat-message-user .body-chat-message-user::-webkit-scrollbar-button:increment,
  .content-chat .content-chat-message-user .body-chat-message-user::-webkit-scrollbar-button {
      display: none;
  } 
  
  .content-chat .content-chat-message-user .body-chat-message-user::-webkit-scrollbar:horizontal {
      height: 10px;
  }
  
  .content-chat .content-chat-message-user .body-chat-message-user::-webkit-scrollbar-thumb {
      background-color: #75BB8F;
      border-radius: 20px;
      border: 2px solid #f1f2f3;
  }
  
  .content-chat .content-chat-message-user .body-chat-message-user::-webkit-scrollbar-track {
      border-radius: 10px;  
  }
  
  .content-chat .content-chat-message-user .body-chat-message-user .message-user-left{
      display: flex;
      flex-direction: column;
      /* gap: 15px; */
  }
  
  .content-chat .content-chat-message-user .body-chat-message-user .message-user-left .message-user-left-img{
      display: flex;
      gap: 10px;
      justify-content: start;
      align-items: center;
  }
  
  .content-chat .content-chat-message-user .body-chat-message-user .message-user-left .message-user-left-img img{
      width: 40px;
      height: 40px;
      border-radius: 50%;
      object-fit: cover;
  }
  
  .content-chat .content-chat-message-user .body-chat-message-user .message-user-left .message-user-left-text{
      position: relative;
      padding: 15px 25px;
      background-color: #ffffff;
      border-radius: 15px;
      color: #949494;
      max-width: 250px;
      margin-top: 15px;
  }
  
  .content-chat .content-chat-message-user .body-chat-message-user .message-user-left .message-user-left-text::before{
      content: '';
      position: absolute;
      top: -26px;
      left: 15px;
      border-right: 15px solid transparent;
      border-top: 15px solid transparent;
      border-left: 0px solid transparent;
      border-bottom: 15px solid #ffffff;
  }
  
  .content-chat .content-chat-message-user .body-chat-message-user .message-user-right{
      display: flex;
      flex-direction: column;
      align-items: end;
      /* gap: 15px; */
  }
  
  .content-chat .content-chat-message-user .body-chat-message-user .message-user-right .message-user-right-img{
      display: flex;
      gap: 10px;
      justify-content: end;
      align-items: center;
  }
  
  .content-chat .content-chat-message-user .body-chat-message-user .message-user-right .message-user-right-img img{
      width: 40px;
      height: 40px;
      border-radius: 50%;
      object-fit: cover;
  }
  
  .content-chat .content-chat-message-user .body-chat-message-user .message-user-right .message-user-right-text{
      position: relative;
      padding: 15px 25px;
      background-color: #d5e5db;
      border-radius: 15px;
      color: #949494;
      width: 250px;
      margin-top: 15px;
  }
  
  .content-chat .content-chat-message-user .body-chat-message-user .message-user-right .message-user-right-text::before{
      content: '';
      position: absolute;
      top: -26px;
      right: 15px;
      border-right: 0px solid transparent;
      border-top: 15px solid transparent;
      border-left: 15px solid transparent;
      border-bottom: 15px solid #d5e5db;
  }
  
  .content-chat .content-chat-message-user .footer-chat-message-user {
      background-color: #d5e5db;
      padding: 15px 25px;
      border-radius: 15px;
      box-sizing: border-box;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 10px;
  }
  
  .content-chat .content-chat-message-user .footer-chat-message-user .message-user-send{
      position: relative;
      width: 100%;
  }
  
  .content-chat .content-chat-message-user .footer-chat-message-user .message-user-send input {
      box-sizing: border-box;
      width: 100%;
      padding: 10px 15px;
      border-radius: 25px;
      outline: none;
      border: 2px solid #949494;
  }
  
  .content-chat .content-chat-message-user .footer-chat-message-user button{
      font-size: 15px;
      width: 38px;
      height: 32px;
      border-radius: 50%;
      border: none;
      background-color: #75BB8F;
      color: #ffffff;
      cursor: pointer;
  }
  
  .content-chat .content-chat-message-user .footer-chat-message-user button:hover{
      background-color: #75BB8F;
  }
  
  @media (max-width: 913px){
      .content-chat{
          padding: 0px;
      }
  
      .content-chat .content-chat-user {
          max-width: 300px;
          width: 100%;
      }
  
      .content-chat .content-chat-message-user {
          background-color: #ffffff;
          padding: 15px;
          border-radius: 25px;
          max-width: 600px;
          width: 100%;
      }
  }
  
  @media (max-width: 728px){
      .content-chat {
          display: flex;
          flex-direction: column;
      }
  
      .content-chat .content-chat-user {
          box-sizing: border-box;
          max-width: 1000px;
          width: 100%;
      }
  
      .content-chat .content-chat-message-user {
          box-sizing: border-box;
          max-width: 1000px;
          width: 100%;
      }
  
      .content-chat .content-chat-user .list-search-user-chat {
          box-sizing: border-box;
          max-width: -moz-fit-content;
          max-width: fit-content;
          display: flex;
          flex-direction: row;
          margin: 0 auto;
          overflow-x: auto;
          max-height: -moz-fit-content;
          max-height: fit-content;
          padding: 15px;
      }
  
      .content-chat .content-chat-user .list-search-user-chat::-webkit-scrollbar{
          -webkit-appearance: none;
      }
      
      .content-chat .content-chat-user .list-search-user-chat::-webkit-scrollbar:vertical {
          width:10px;
      }
      
      .content-chat .content-chat-user .list-search-user-chat::-webkit-scrollbar-button:increment,
      .content-chat .content-chat-user .list-search-user-chat::-webkit-scrollbar-button {
          display: none;
      } 
      
      .content-chat .content-chat-user .list-search-user-chat::-webkit-scrollbar:horizontal {
          height: 10px;
      }
      
      .content-chat .content-chat-user .list-search-user-chat::-webkit-scrollbar-thumb {
          background-color: #75BB8F;
          border-radius: 20px;
          border: 2px solid #f1f2f3;
      }
      
      .content-chat .content-chat-user .list-search-user-chat::-webkit-scrollbar-track {
          border-radius: 10px;  
      }
      
  
      .content-chat .content-chat-user .list-search-user-chat .user-chat {
          width: 60px;
          height: 60px;
          padding: 10px;
          background-color: #75BB8F;
          max-height: -moz-fit-content;
          max-height: fit-content;
          border-radius: 50%;
      }
  
      .content-chat .content-chat-user .list-search-user-chat .user-chat .user-chat-text {
          display: none;
      }
  }
  .small_time{
      max-width: 250px;
      display: flex;
      justify-content: end;
  }
  /* CSS for review modal rating stars */
  .rating-stars {
      display: flex;
      justify-content: center;
      direction: rtl;
  }
  
  .rating-stars input[type="radio"] {
      display: none;
  }
  
  .rating-stars label {
      font-size: 60px;
      color: #ccc;
      cursor: pointer;
      transition: color 0.2s;
  }
  
  .rating-stars label:hover,
  .rating-stars label:hover ~ label,
  .rating-stars input[type="radio"]:checked ~ label {
      color: #ffcc00;
  }
  
  /* CSS for reviews display rating stars */
  .review-rating-stars {
      display: inline-block;
      direction: rtl;
  }
  
  .review-rating-stars input[type="radio"] {
      display: none;
  }
  
  .review-rating-stars label {
      font-size: 24px;
      color: #ddd;
      cursor: default;
      margin: 0;
  }
  
  .review-rating-stars input:checked ~ label {
      color: #f5c518;
  }
  
  /* .review-rating-stars label:hover,
  .review-rating-stars label:hover ~ label {
      color: #f5c518;
  } */
  .ClientReview_Card {
      min-height: 355px;
      border-top: 5px solid #E94560;
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
      font-weight: 700;
      overflow: hidden;
      padding: 60px 50px 0px;
      position: relative;
    }
    .ClientReview_Top {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      padding-bottom: 30px;
    }
    .ClientReview_Pfp {
      width: 70px;
    }
    .ClientReview_Stars {
      font-size: 36px;
      padding-left: 20px;
      color: #ffbf00;
    }
    .ClientReview_Body {
      padding-bottom: 20px;
    }
    .ClientReview_Name {
      color: #E94560;
      font-size: 18px;
      padding-bottom: 40px;
    }
    .ClientReview_Img img {
      filter: brightness(0) invert(1) sepia(1) saturate(10000%) hue-rotate(180deg) brightness(1.1);
      position: absolute;
      right: -70px;
      bottom: -50px;
      z-index: -1;
    }