@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Saira:ital,wght@0,100..900;1,100..900&display=swap');
*{    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Roboto", sans-serif;
}
  .contentofpage{
    padding: 20px;
  }
  .con-head .list-head{
    font-size: 18px;
    font-weight: bold;
    color: #008994;
    margin-bottom: 10px;
  }
  .contrators{
    /* margin: 10px; */
    display: flex;
    justify-content: center;
    width: 100%;
  }
  .searchbox{
    padding:5px;
    margin-bottom: 10px;
  }
  .search {
    max-width: 500px;
    width: 100%;
    /* position: relative; */
    display: flex;
  }
  
  .searchTerm {
    width: 100%;
    border: 1px solid rgb(194, 194, 194);
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
    border-right: none;
    padding: 5px 10px;
    font-size: 14px;
    border-radius: 5px 0 0 5px;
    outline: none;
  }
  
  /* .searchTerm:focus{
    color: #00B4CC;
  } */
  
  .searchButton {
    padding: 5px 10px;
    border: 1px solid #00B4CC;
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;

    background: #00B4CC;
    text-align: center;
    color: #fff;
    border-radius: 0 5px 5px 0;
    cursor: pointer;
    font-size: 16px;
  }
    

  .list{
    display: flex;
    align-items: center;  
    flex-direction: column;
    gap: 5px;
    padding: 5px;
    width: 100%;
  }
  .contractor-box{
    border: 1px solid rgb(194, 194, 194);
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
    border-radius: 4px;
    padding:0px 10px;
    /* max-width: 1200px; */
    width: 100%;
    margin-bottom: 10px;
  }
  .upper-side{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
  }
  .profile-box{
    display: flex;
    
  }
  .profile-box img{
    margin-top: 10px;
    max-width: 60px;
    width: 100%;
    height: 60px;
    object-fit: cover;
    border: 1px solid rgb(179, 179, 179);
    border-radius: 50%;
  }
  .profile-content{
    margin-top: 10px;
    margin-left: 10px;
    cursor: pointer;
  }
  .profile-content .profile-name{
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
  }
  
  .profile-name i{
    color: green;
  }
  .profile-content .org-name{
    font-size: 14px;
    font-weight: 400;
    text-decoration: underline;
    margin-top: 0px;

  }
  .profile-content .org-location{
    font-size: 14px;
    font-weight: 300;
    margin-top: 2px;

  }
  .org-location i{
    color: blue;
  }
  .profile-content .mob-no{
    font-size: 14px;
    font-weight: 400;
    margin-top: 5px;
  }
  .mob-no i{
    color:rgb(13, 143, 224);
  }
  /* rating */
  .rating{
    text-align: right;
    display: flex;
    justify-content: right;
    align-items: end;
    flex-direction: column;
    gap: 5px;
    margin-top: 15px;
  }
  @media(max-width:400px){
    .rating{
        margin-top: 5px;
        margin-bottom: 5px;
        flex-direction: row;
        justify-content: space-evenly;
        align-items: center;
        width: 100%;
    }
  }
  .rating .star{
    font-size: 14px;
  }
  .star i{
    color: rgb(249, 212, 0);
  }
  .rating .review{
    font-size: 12px;
    font-weight: 300;
  }
  .share{
    cursor: pointer;
    font-size: 14px;
    border: 1px solid rgb(149, 149, 149);
    padding: 2px 8px;
    width: max-content;
    border-radius: 5px;
  }
  
  /* mid */
  .mid-side{
    margin-top: 6px;
    margin-bottom: 6px;
    display: flex;
    justify-content:left;
    flex-wrap: wrap;
    gap: 10px;

  }
  .mid-side .response{
    font-size: 13px;
    font-weight: 300;
    background-color: rgb(224, 224, 224);
    padding: 0px 6px;
    border-radius: 4px;
    border: 1px solid rgb(191, 191, 191);
    width: max-content;
  }
  .response .bold{
    font-weight: 400;
  }

  /* desp */
  .descpbox{
    font-size: 14px;
  }
  /* service */
  .services{
    margin-top: 4px;
    margin-bottom: 2px;
  }
  .services .ser-head{
    font-size: 14px;
    margin-bottom: 1px;
  }
  .services-provided{
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
  }
  .services-provided .ser-text{
    border: 1px solid gray;
    padding: 0px 6px;
    font-size: 13px;
    border-radius: 4px;
    height: max-content;
  }
  /* contact */
  .contact{
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    /* margin-top: 8px; */
    margin-bottom: 8px;
  }
  .contact-type{
    display: flex;
    flex-direction: column;
  }
  .connect{
    display: flex;
    justify-content: right;
    align-items: end;
    gap: 8px;
    margin-bottom: 2px;
  }
  .chat, .enq, .chatting{
    font-size: 14px;
    font-weight: 500;
    padding: 2px 6px;
    cursor: pointer;
  } 
  .chat:hover{
    transform: scale(1.02);
  }
  .enq:hover, .chatting:hover{
    transform: scale(1.02);
  }
  .chat , .chatting{
   border: 1px solid black;
   border-radius: 4px;
  }
  .chat i, .chatting i{
    margin-right: 4px;
    color: rgb(7, 131, 145);
  }
  .chatting i{
    color: #0a00c0c1;
  }
  .enq{
    background-color: rgb(135, 0, 135);
    border-radius: 4px;
    border: 1px solid rgb(135, 0, 135);
    color: white;
  }
  .views{
    display: flex;
    justify-content: right;
    align-items: end;
    gap: 10px;
  }
  .prof-view, .enq-no{
    font-size: 12px;
    display: flex;
    gap: 2px;
    justify-content: center;
    align-items: center;
    padding: 2px 4px;
  }
  .prof-view i, .enq-no i{
    color: rgb(135, 0, 135);
  }
  .element{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
  }

   /* Popup container */
   .popup-enq {
    display: none; 
    position: fixed;
    z-index: 9; 
    left: 0;
    top: 0;
    width: 100%; 
    height: 100vh; 
    overflow: auto; 
    background-color: rgba(0, 0, 0, 0.4);
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Popup content */
.popup-content-enq {
    border: 1px solid gainsboro;
    box-shadow: rgba(6, 24, 44, 0.4) 0px 0px 0px 2px, rgba(6, 24, 44, 0.65) 0px 4px 6px -1px, rgba(255, 255, 255, 0.08) 0px 1px 0px inset;
    background-color: #F7F8FA;
    margin: 10% auto 0% auto ; 
    padding: 20px 0px;
    border: 1px solid #888;
    width: 95%; 
    max-width: 800px;
    text-align: center;
    border-radius: 10px;
}
@media (max-width:768px) {
  .popup-content-enq {
    margin: 20% auto 0% auto;
  }
}
.popup-content-enq .hr{
    margin: 20px auto;
    width: 95%;
    
}
.hr hr{
    border: 1px solid #808080;
}
.contractor-pop{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.contractor-pop img{
    max-width: 60px;
    height: 60px;
    object-fit: cover;
    width: 100%;
    border: 1px solid rgb(179, 179, 179);
    border-radius: 50%;
}
.contractor-pop #contractorName{
    font-size: 16px;
    font-weight: 500;
}
/* Close button */
.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;

    margin-right: 20px;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

/* get quote / enquire */

 #constructionForm{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 10px;
}
#constructionForm .form-group{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  width: 100%;
  padding: 0px 10px;
}
#constructionForm .input-box{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 5px;
  background-color: white;
  border: 1px solid #3d4e70;
  max-width: 350px;
  width: 100%;
  padding: 10px 1px;
  border-radius:50px ;
  
}
.input-box:hover{
  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}
#constructionForm .input-box input{
  max-width: 200px;
  width: 100%;
  border: none;
  outline: none;
  font-weight: 500;
  color: #3d4e70;
}
#constructionForm .input-box span{
  color: #3d4e70;
}
#constructionForm .input-box {
  display: flex;
  align-items: center;
  gap: 10px; /* Space between elements */
  position: relative;
  padding-left: 15px;
}

#constructionForm .input-box select,
#constructionForm .input-box input {
  padding:5px 0px;
  border: 1px solid #ccc;
  border-radius: 5px;
}
#constructionForm .input-box input{
  border: none;
}
#constructionForm .input-box select{
  padding-right: 0px;
}
#constructionForm .form-group .sel-dif{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left:  32px;

}
#constructionForm .form-group .sel-dif #otherNameType{
  width: 100%;
  border-radius: 0 10px 10px 0;
  /* border: 1px solid black; */
  overflow: hidden;
}
#constructionForm .input-box select{
  text-align: left;
  outline: none;
  border: none;
}
#constructionForm .input-box .material-symbols-outlined {
  position: absolute;
  right: 10px;
  pointer-events: none;
}

#otherNameType {
  margin-top: 0px;
}
#constructionForm option{
  color: #3d4e70;
  font-weight: 500;

}
#constructionForm input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button{
  -webkit-appearance: none;
}
#constructionForm .input-box {
  display: flex;
  align-items: center;
  gap: 10px; /* Adjust gap between elements */
}

#constructionForm input, select {
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
  width: 100%; /* Ensure full width */
  max-width: 200px; /* Optional: Set a max width */
}
#constructionForm input{
  border: none;
}
#otherNameType {
  width: 100%; /* Ensures input width matches the select width */
  max-width: 200px; /* Set the max width */
  transition: width 0.3s ease; /* Smooth transition */
  border-radius: 50px;
}

.material-symbols-outlined {
  font-size: 24px;
  cursor: pointer;
}

#constructionForm .submit{
  background-color: #147695;
  outline: none;
  border: none;
  color: white;
  cursor: pointer;
  font-size: 14px;
  padding: 8px 15px;
  border-radius: 50px;
  transition: all 0.1s ease-in-out;
}
.submit:hover{
  transform: scale(1.02);
}
  /* sorting */
  .contractor-filter-container {
    max-width: 220px;
    width: 100%;
    background-color: #fff;
    border: 1px solid rgb(194, 194, 194);
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
    border-radius: 4px;
    padding: 20px;
    margin: 10px;
    margin-top: 5px;
    margin-bottom: 15px;
    font-size: 14px;
}
.filter-header{
  display: flex;
  justify-content: space-between;
}
.filterbtn{
  cursor: pointer;
  font-size: 12px;
  background-color: #275DF5;
  color: white;
  height: max-content;
  padding: 2px 4px;
  border-radius: 4px;
}
.filter-headname {
    font-size: 15px;
    font-weight: 500;
    margin-bottom: 15px;
    color: #333;
}

.filter-group {
    margin-bottom: 20px;
}

.filter-title {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 10px;
    color: #333;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.filter-title::after {
    content: "\f078"; /* FontAwesome chevron-down */
    font-family: 'FontAwesome';
    color: #999;
    transition: transform 0.3s;
}

.filter-group.collapsed .filter-title::after {
    transform: rotate(-90deg);
}

.filter-options {
    padding-left: 10px;
}

.filter-group.collapsed .filter-options {
    display: none;
}

.filter-options label {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    font-weight: 400;
    color: #555;
}

.filter-options input[type="checkbox"],
.filter-options input[type="radio"] {
    margin-right: 10px;
}

.filter-search input {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-bottom: 15px;
    box-sizing: border-box;
}

.filter-search input::placeholder {
    color: #aaa;
}
.sortfilter{
  display: flex;
  justify-content: flex-end;
  margin-right: 5px;
}
.material-symbols-outlined{
  width: max-content;
}
@media (max-width: 780px) {
  .contractor-filter-container{
    max-width: 200px;
    margin-left: 5px;
    padding: 10px;
    padding-top: 10px;
    width: 100%;
  }
}

@media (max-width: 600px) {
  .contractor-filter-container{
    max-width: 220px;
    margin-left: 5px;
    padding: 10px;
    padding-top: 10px;
    width: 100%;
  }
}


@media (max-width: 750px) {
  #filterBox {
      display: none;
      position: absolute; /* Position the filter box absolutely */
      top: 30px; /* Adjust this value to position it below your header or other content */
      right: 0;
      width: 100%; /* Make sure the filter box takes up the full width */
      background-color: white; /* Ensure it has a background color */
      z-index: 1000; /* Place it above other content */
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Optional: Add a shadow for better visibility */
  }

  #filterToggle {
      display: block;
      cursor: pointer;
  }
  .contrators{
    display: flex;
    flex-direction: column-reverse;
  }
  .sortfilter{
    text-align: right;
  }
}

@media (min-width: 750px) {
  #filterBox {
      display: block;
      position: relative; /* Position normally in larger screens */
      z-index: auto; /* Normal stacking context */
  }

  #filterToggle {
      display: none;
  }
}



/* message */
  /* Chat list box (floating at bottom-left) */
  .chat-box-container {
    position: fixed;
    bottom: 30px;
    left: 100px;
    z-index: 1000;
}

.chat-list-box {
    width: 250px;
    max-height: 500px;
    height: 100%;
    border: 1px solid #ccc;
    background-color: #fefefe;
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
}

.chat-list-header {
    /* background-color: #ffffff; */
    color: rgb(0, 0, 0);
    padding: 10px 10px;
    font-size: 16px;
    font-weight:500;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0px 5px;
    width: 100%;
}

.chat-list-header div{
  display: flex;
  align-items: center;
}.box-icons{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.box-icons .arrow{
  font-size: 20px;
  font-weight: 500;
}
.box-icons span{
  font-size: 20px;
  font-weight: 500;
}
.chat-list-box hr{
  margin: 0px auto;
  width: 97%;
}
.searching{
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
}
.searching .searchbox{
  display: flex;
  align-items: center;
  width: 100%;
  padding: 5px;
  border: 1px solid rgb(188, 188, 188);
  border-radius: 6px;
  background-color: #d0e8f9;
}
.searchbox input{
  width: 100%;
  padding: 2px;
  padding-left: 4px;
  border: none;
  outline: none;
  background-color: transparent;
}
.chat-list-content {
    display: none;
    max-height: 440px;
    height: 100%;
    overflow-y: auto;
}

.chat-list-content ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.chat-list-content li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    cursor: pointer;
    border-bottom: 1px solid #c0c0c0;
    margin: 0px 5px;
}

.chat-list-content li img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    margin-right: 10px;
}
.chat-list-header img{
    width: 30px;
    height: 30px;
    border-radius: 50%;
    margin-right: 10px;
}
.chat-list-content li:hover {
    background-color: #eeeeee;
}
.persontext{
  display: flex;
  align-items: center;
}
.persontext span{
  font-size: 14px;
  font-weight: 500;
}
.time{
  font-size: 12px;
  color: #5a5a5a;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.chat-list-content::-webkit-scrollbar {
  width: 5px;               /* width of the entire scrollbar */
}
.chat-list-content::-webkit-scrollbar-track {
  background: rgb(255, 255, 255);        /* color of the tracking area */
}

.chat-list-content::-webkit-scrollbar-thumb {
  background-color: #088994;    /* color of the scroll thumb */
  border-radius: 20px;       /* roundness of the scroll thumb */
  border: 3px solid rgb(112, 112, 112);  /* creates padding around scroll thumb */
}
/* Chat window */
.chat-window {
    display: none;
    max-width: 500px;
    width: 100%;
    position: fixed;
    bottom: 30px;
    overflow: hidden;
    max-height: 500px;
    height: 100%;
    border: 1px solid #ccc;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;    
    left: 360px;
}

.chat-window-header {
    background-color: #007BFF;
    color: white;
    padding: 10px;
    font-size: 16px;
    font-weight: 500;
    border-radius: 10px 10px 0px 0px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.chat-window-header img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    margin-right: 10px;
}

.close-chat {
    cursor: pointer;
    font-size: 20px;
}

.chat-window-content {
    padding: 10px;
    width: 100%;
    height: 90%;
    /* border: 1px solid #ccc; */
    border-radius: 10px;
    display: flex;
    gap: 8px;
    flex-direction: column;
}

.chat-messages {
    height: 100%;
    overflow-y: auto;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 10px;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding: 5px;
    gap: 15px;
}
.chat-messages::-webkit-scrollbar {
  width: 5px;               /* width of the entire scrollbar */
}
.chat-messages::-webkit-scrollbar-track {
  background: rgb(255, 255, 255);        /* color of the tracking area */
}

.chat-messages::-webkit-scrollbar-thumb {
  background-color: #088994;    /* color of the scroll thumb */
  border-radius: 20px;       /* roundness of the scroll thumb */
  border: 3px solid rgb(112, 112, 112);  /* creates padding around scroll thumb */
  cursor: pointer;
}

#chat-input {
    width: 100%;
    height: 50px;
    padding: 5px;
    margin-bottom: 0px;
    border-radius: 5px;
    border: 1px solid #ccc;
    resize: none;
    outline-color: #b6b6b6;
}

#send-chat-btn {
    width: 100%;
    padding: 8px;
    background-color: #007BFF;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

#send-chat-btn:hover {
    background-color: #0056b3;
}

.arrow {
    transition: transform 0.3s ease;
}



.message-container{
  display: flex;
}


.left {
  justify-content: flex-start;
  /* margin-right: 60px; */
}

.right {
  /* justify-content: flex-end; */
  flex-direction: row-reverse;
  /* margin-left: 60px; */
  
}

.message-text {
  background-color: #f1f0f0;
  font-size: 14px;
  border-radius: 10px;
  padding: 10px;
  border: 1px solid rgb(202, 202, 202);
  /* max-width: 100%; */
  word-wrap: break-word;
}

.right .message-text {
  background-color: #e1f4ff;
}

.message-time {
  font-size: 12px;
  color: #888;
  margin-top: 5px;
}

.profile-pic {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin: 0 10px;
}


/* contractor */
.contractor-list {
  display: none;
  border: 1px solid #ccc;
  background-color: #fefefe;
  box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
  position: fixed;
  left: 360px;
  bottom: 30px;
  max-height: 500px;
  max-width: 350px;
  width: 100%;
  border-radius: 10px;
}
.contractor-list hr{
  margin: 0px auto;
  width: 97%;
}
.contractor-content{
  max-height: 440px;
  overflow-y: auto;
}
.contractor-content::-webkit-scrollbar {
  width: 6px;
}
.contractor-content::-webkit-scrollbar-track {
  background: #fff;
  border-radius: 25px;
}
.contractor-content::-webkit-scrollbar-thumb {
  background: #707070;
  border-radius: 25px;
}
.contractor-content ul {
  list-style: none;
  padding: 5px;
  padding-top: 0px;
  margin: 0;
}

.contractor-content li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  cursor: pointer;
  border-bottom: 1px solid #c0c0c0;
  width: 100%;
}

.contractor-content li img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin-right: 10px;
}
.contractor-list-header{
  color: rgb(0, 0, 0);
  padding: 10px 10px;
  font-size: 16px;
  font-weight:500;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0px 5px;
}
.contractor-list-header div{
  display: flex;
  align-items: center;
}
.contractor-list-header img{
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin-right: 10px;
}
.contractor-content li:hover {
  background-color: #eeeeee;
}
.contractor-list-header span{
  font-size: 16px;
  font-weight: 500;
}
.persontext{
display: flex;
align-items: center;
}
.persontext span{
font-size: 14px;
font-weight: 500;
}
.time{
font-size: 12px;
color: #5a5a5a;
}

/* menu */
.menu {
  position: fixed;
  margin-top: 50px;
  margin-left: 110px;
  background-color: white;
  border: 1px solid #ccc;
  box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
  z-index: 1000;
  border-radius: 8px;
  padding: 5px 0px 5px 0px;
}

.menu ul {
  list-style: none;
  padding: 0px;
  margin: 0;
}

.menu li {
  font-size: 12px;
  padding: 6px;
  cursor: pointer;
  border-radius: 4px;
  border-bottom: none;
}

.menu li:hover {
  background-color: #f0f0f0;
}

.chat-dots{
  display: flex;
  gap: 5px;
  align-items: center;
}
.dots{
  cursor: pointer;
}
.dots:hover{
  background-color: #cfcfcf;
  border-radius: 10px;
  padding: 0px;
  margin: 0px;
  color: black;
}

.dropdown-menu {
  display: none;
  position: absolute;
  right: 60px;
  border-radius: 6px;
  background-color: white;
  border: 1px solid #ccc;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  z-index: 1000; /* Make sure it appears on top */
  padding: 4px;
}

.dropdown-item {
  padding: 4px;
  color: black;
  font-weight: 400;
  font-size: 12px;
  cursor: pointer;
}

.dropdown-item:hover {
  background-color: #f0f0f0;
  border-radius: 6px;
}

@media (max-width:768px) {
  .chat-box-container {
    bottom: 20px;
    left: 20px;
    max-height:600px ;

  }
  .chat-window {
    width:calc(100% - 10px);
    left: 5px;
    max-width: 500px;
    max-height:600px ;
    bottom: 5px;
  }
  .contractor-list {
    
    left: 10px;
    bottom: 25px;
    max-height: 550px;
    max-width: 350px;
    width: 80%;
    
  }
}

/* delete pop up */
/* Popup overlay */
.popup-overlay {
  display: none; /* Hidden by default */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 1000;
  opacity: 0;
  transition: opacity 0.3s ease-in-out; /* Smooth opacity transition */
}

/* Show the overlay */
.popup-overlay.show {
  display: block;
  opacity: 1;
  animation: fadeIn 0.3s ease-in-out forwards;
}

.popup-overlay.hide {
  animation: fadeOut 0.3s ease-in-out forwards;
}

/* Popup content */
.popup-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.9); /* Start small */
  background: #ffffff;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  text-align: center;
  width: 90%;
  max-width: 400px;
  opacity: 0;
  transition: all 0.3s ease-in-out; /* Smooth transform/opacity */
}

/* Entry animation for content */
.popup-overlay.show .popup-content {
  transform: translate(-50%, -50%) scale(1); /* Full size */
  opacity: 1;
  animation: scaleIn 0.3s ease-in-out forwards;
}

/* Exit animation for content */
.popup-overlay.hide .popup-content {
  transform: translate(-50%, -50%) scale(0.9); /* Shrink */
  opacity: 0;
  animation: scaleOut 0.3s ease-in-out forwards;
}

/* Title and message */
.popup-content h3 {
  margin: 0 0 10px;
  color: #333;
  font-size: 1.5rem;
  font-weight: bold;
}

.popup-content p {
  margin: 0 0 20px;
  color: #666;
  font-size: 1rem;
}

/* Popup actions */
.popup-actions {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.popup-actions .btn {
  padding: 10px 20px;
  font-size: 1rem;
  cursor: pointer;
  border: none;
  border-radius: 5px;
  transition: background-color 0.3s ease, transform 0.2s;
}

.btn-secondary {
  background-color: #6c757d;
  color: #fff;
}

.btn-danger {
  background-color: #dc3545;
  color: #fff;
}

.btn:hover {
  transform: translateY(-2px); /* Subtle hover animation */
  background-color: #444;
}

/* Keyframes for overlay fade */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* Keyframes for content scaling */
@keyframes scaleIn {
  from {
    transform: translate(-50%, -50%) scale(0.9);
    opacity: 0;
  }
  to {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
}

@keyframes scaleOut {
  from {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  to {
    transform: translate(-50%, -50%) scale(0.9);
    opacity: 0;
  }
}

.no-results {
  text-align: center;
  font-size: 18px;
  color: #666;
  margin-top: 20px;
  font-weight: 500;
}