/* ===== Global Styles ===== */
body{
  font-weight: 600 !important;
}


/* ===== Dropdown Styling ===== */
.show-dropdown {
  display: block;
  position: absolute; 
  inset: auto auto 0px 0px; 
  margin: 0px; 
  transform: translate(0px, -62px);
}


/* ===== Section Margin ===== */
.section{
  margin-top: 25px;
}


/* ===== Comment Section Styling ===== */
.commentDate{
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  letter-spacing: 0em;
  text-align: left;
  color:rgba(0, 0, 0, 0.25);
}


/* ===== File Upload Section ===== */
.uploadFlle-date{
  font-size: 12px;
  font-weight: 400;
  line-height: 22px;
  letter-spacing: 0em;
  text-align: left;
  color: #000000;
}

.uploadFlle-profileName{
  font-size: 12px;
  font-weight: 600;
  line-height: 22px;
  letter-spacing: 0px;
  text-align: left;
  color: #2C3131 !important;  
  }

.uploadFile-titleAttachment{
  padding-left: 26px;
  font-size: 20px;
  font-weight: 600;
  line-height: 30px;
  letter-spacing: 0px;
  text-align: left;
  color: #000000;
}

.uploadFile-nameColor{
  color: #1890FF;
}

/* ====== 🗑️ Delete and Download Icons ====== */
.upload-delete{
  margin-left: 1rem !important;
  cursor: pointer;
}

.upload-delete i::before {
  font-size: 15px;
  
}

.download-file{ 
  margin-left: 11rem !important;
}

.download-file i::before {
  font-size: 15px;
  color: #141522 !important;  
}

.downloadFile-cls{
  display: contents;
}


/* ===== Comment Text Styling ===== */
.comment-text{
    
  font-size: 14px;
  color: #333333;
  Line-height: 22px;
  margin-top: 1rem !important;  
}

.comment-text .content {
  font-size: 14px;
  font-weight: 600;
  line-height: 22px;
  letter-spacing: 0em;
  text-align: left;
  color: #333333;
  padding: 6px;
}

.fs-12{font-size: 12px;}
.shadow-none{box-shadow: none;}
.name{color: #007bff;}
.cursor:hover{color: blue;}
.cursor{cursor: pointer;}
.textarea{resize: none;}
.note-modal-footer{
  height: 60px !important;
}

/* ===== Buttons Styling ===== */
.btn-reply{
  border: 1.5px solid;
  border-color: #1890FF;
  border-radius: 8px;
  color: #1890FF;
  font-size: 16px;
  font-weight: 400;
}

/* ===== More Text Button (Read More Feature) ===== */
.moretext {
  display: none;
}

.moreless-button {
  width: 150px;
  height: 48px;
  padding: 4px 15px;
  border-color: #e7e7e7;
  gap: 10px;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  letter-spacing: 0em;
  text-align: center;
  color: #000000;
  margin-left: 26px;
  margin-top: 1rem;
  font-family: "Manrope", sans-serif;
}

.heading-style-taskback{
    
  font-size: 24px;
  font-weight: 700;
  line-height: 36px;
  letter-spacing: -0.03em;
  text-align: left;
  color: #141522;
}

.heading-style i::before {

  font-size: 36px;
  color: #141522;
}
 
.custom-active a { 
      
  background-color: #fff;
  border-radius: 0px 20px 20px 0px;
  color: #1890FF !important;
}

.custom-active a img {
  filter: invert(35%) sepia(86%) saturate(4294%) hue-rotate(197deg) brightness(92%) contrast(102%);
   
}

/* ===== Sidebar Menu Styling ===== */
.siderbarmenu{
  padding: 0;
  margin: 0;

}

.dashboard-mdn-client{

  vertical-align: middle;
  margin: 12px;
}

.siderbarmenu .nav-link{
  position: relative;
  display: flex;
  align-items: center;
  height: 50px;
  padding: 0 20px;
  width: 100%;
  letter-spacing: 0.3px;
  color: #60686f;
  font-weight: 600;
  text-decoration: none;
}

.siderbarmenu > li > a:hover{
    background-color:#fff;
}

.siderbarmenu li a .feather {
  height: 20px;
  width: 20px;
  margin-right: 10px;
  text-align: center;
  fill: rgba(75,75,90,0.12);
}

.siderbarmenu li a span {
  margin-top: 3px;
  width: 100%;

}


/* ===== Profile and Notification Styling ===== */
.profile-input{
  height: auto;
}

.dropbtn {
  border: none;
  cursor: pointer;
}

.dropbtn:hover, .dropbtn:focus {
  background-color: #2980B9;
}

.dropdown {
  position: relative;
  display: inline-block;
  
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/*  .dropdown a:hover {background-color: #ddd;}*/

.show {display: block;}


/* Notification Bell */
.bell-count{
  position: absolute;
  height: 20px;
  width: 18px;
  border-radius: 60%;
  background-color: #d63031;
  color: white;
  margin-left: -7px;
}

.wraptable {
  border-collapse: collapse;   
}

.wraptable, .notification-msg-style{    
  width: 250px;
  word-wrap: break-word;
  vertical-align: middle;
  line-height: 22px;
  padding: 0px 0px 16px 0px;
  text-align: left;
}

.taskDetailOffset{
  
  padding-left: 26px;
}

.smallDescription{
   
  font-size: 14px;
  font-weight: 600;
  line-height: 22px;
  letter-spacing: 0em;
  text-align: left;
}
  
.taskTitle{
  font-size: 20px;
  font-weight: 600;
  line-height: 30px;
  letter-spacing: 0px;
  text-align: left;
}

.taskDescription{
  font-size: 12px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0px;
  text-align: left;
  color: #A9A9A9;  
}

/* ===== Search Button Styling ===== */
.searchButton {
  float: right;
  margin-top: -50px;
  margin-right: -53px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.4s;

}

.graphics-frm-btn{
  padding: 15px 50px;
}

#design_brief_section pre { 
    padding:0px;
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
    letter-spacing: 0em;
    margin-bottom: 0px;
    text-align: left; 
   font-family: Manrope;
}

  #design_brief_section pre b { 
    font-size: 12px !important;
    font-weight: 400;
    line-height: 32px !important;
    letter-spacing: 0px !important;
    text-align: left;
    color: #a9a9a9;
    font-family: Manrope;
    
}

.fixed-width-cls{
  width: 250px;
  border-radius: 0px;
  font-family: Manrope;
  font-size: 20px;
  font-weight: 600;
  line-height: 30px;
  letter-spacing: 0px;
  text-align: left;
}

/*.dropdown .dropdown-toggle:after{
  width: 5px !important;
  height: 5px !important;
  font-size: 5px !important;
}*/

.plus-square{
  margin-left: 3.5rem !important; 
}

.AssignDown{
  margin-left: 6.8rem !important;
} 

.LabelDown{
  margin-left: 7.5rem !important;
}

.CaretDown{
  margin-left: 2.5rem !important;
}

.fixed-Attechmentwidth-cls{
  width: 250px;
}

.uploadinput {
  margin: 0 auto;
  width: 200px;
  border: 3px dashed #bf92b1;
  background-color: #f5f5f0;
}

.uploadarea {
  margin-top: 6px;
  text-align: center;
  line-height: 28px;
  color: #ee004c;
  font-family: Arial;
}

.uploadinput input {
  position: absolute;
  margin: 0;
  padding: 0;
  width: 82%;
  height: 30%;
  outline: none;
  opacity: 0;
}

.emoji-button{
  background-color: #FFFFFF;
  border: none;
  color: #00000073;
  line-height: 20px;
  font-size: 15px;
}

.emoji-button i::before {
  font-size: 14px;
  margin-right: 0.3rem;
  color: #00000073;
}

.emoji-button.nav-link{
    
    margin-right: 1.5rem !important;
}

.edit-button{
  background-color: #FFFFFF;
  border: none;
  color: #00000073;
  line-height: 20px;
  font-size: 14px;
  margin-right: 0.5rem !important;
}

.edit-button i::before {
  font-size: 14px;
  margin-right: 0.3rem;
  color: #00000073;
}

.edit-button img { 
  pointer-events: none;

}
  
.delete-button img { 
  pointer-events: none;

  }

.delete-button{
  background-color: #FFFFFF;
  border: none;
  color: #00000073;
  line-height: 20px;
  font-size: 14px;
}

.delete-button i::before {
  font-size: 14px;
  margin-right: 0.3rem;
  color: #00000073;
}

.save-button{
  color: #00000073;
  line-height: 22px;
  font-size: 14px; 
  align-items: center;  /* Image aur text ko vertical center karega */
  justify-content: center; /* Agar button me space ho to center me rakhega */
  gap: 5px; /* Image aur text ke beech thoda space dega */
  border: none;
  background: none;
}

.save-button i::before {
  font-size: 14px;
  margin-right: 0.3rem;
  color: #00000073;
}

.cancel-button{
  color: #00000073;
  line-height: 22px;
  font-size: 14px; 
  align-items: center;  /* Image aur text ko vertical center karega */
  justify-content: center; /* Agar button me space ho to center me rakhega */
  gap: 5px; /* Image aur text ke beech thoda space dega */
  border: none;
  background: none;
}

.cancel-button i::before {
  font-size: 14px;
  margin-right: 0.3rem;
  color: #00000073;
}

.svg-icon {
  width: 24px; /* Adjust as needed */
  height: 24px; /* Adjust as needed */
  fill: currentColor; /* SVG will inherit text color */
}

.emoji{
  cursor: pointer;
  padding: 0.5rem;
  margin-left: 9px;
}

.addedEmoji{
  
  margin-left: 2px;
  font-size: 15px;
  cursor: pointer;
  border: solid #F4F4F4;
  line-height: 50px;
  padding: 3px;
  border-radius: 50%;

}


.emoji-section:hover > .dropdown-menu {
  display: block !important;

}
.emoji-section > .dropdown-menu{
  text-align: center !important;
}
.emoji-section > .dropdown-toggle:active {
  /* Remove pointer-events property for the :active state */
  pointer-events: auto !important;
}

#load-more-btn {
  border-color: #e7e7e7;
  color: black;
  margin:2rem 1rem;
  margin-left: 36%;
}

#load-more-btn:hover {
  background: #e7e7e7;
}

.btn-gap-msz-team{
  gap: 16px;
  display: flex;
  margin-top: 1rem;
}

.textColor-darkGray{
  color: #A9A9A9;
  font-size: 12px;
  font-weight: 400;
  line-height: 1px;
  letter-spacing: 0px;
  text-align: left;

}

#superform .note-toolbar{
  color: #333;
  background-color: #fff;
  border-bottom: none;    
  border-color: #ddd;
  border-top-left-radius: 3px; 
  border-top-right-radius: 3px;
}

.btn-reply-to-client{
  background-color: #1890FF;
  border-radius: 8px;
  border: 1px;
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 400;
}

.sendPostUserName{
  font-size: 14px;
  font-weight: 600;
  line-height: 22px;
  letter-spacing: 0px;
  text-align: left;
  color: #2C3131;
  display: inline-block;
  width: 180px;
}

.sendPostTeamName{
  font-size: 14px;
  font-weight: 600;
  line-height: 22px;
  letter-spacing: 0px;
  text-align: left;
  color: #dfce2e;
  display: inline-block;
  width: 180px;
}
.commentSectionUser{
  font-family: Manrope;
  font-size: 14px;
  font-weight: 600;
  line-height: 22.4px;
}
.sticky-column {
  position: sticky;
  top: 20px; /* Adjust the top spacing as needed */
  bottom: 20px; /* Adjust the bottom spacing as needed */
  left: 0; /* Add left spacing to position it on the left */
  z-index: 100; /* Adjust the z-index as needed */
}


.searchButton {
  margin-left: 1rem;
  margin-top: 0rem;
}

.task-typeName{
  font-size: 14px;
  font-weight: 700;
  line-height: 22px;
  letter-spacing: 0em;
  text-align: left;
  color: #333333;
  font-family: 'Manrope';
}

.filter-btn-tasklist{
  border: 1px solid #D9D9D9;
  height: 32px;
  padding: 4px 16px;
  border-radius: 0px;

}

.reset-filter{
  border: 1px solid #D9D9D9;
  width: 44px;
  height: 32px;
  padding: 4px 12px;
  border-radius: 0px;
  margin-top: 0.4rem;

}

.reset-filter-button{
  margin-right: 0.5rem;
}

.add-member-btn-tasklist{
  border: 1px solid #D9D9D9;
  height: 32px;
  padding: 4px 16px;
  border-radius: 0px;

}

.priority-btn-tasklist{
  border: 1px solid #D9D9D9;

  height: 32px;
  padding: 4px 16px;
  border-radius: 0px;

}

.filter-btn-text{
  font-family: Manrope;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  letter-spacing: 0em;
  text-align: center;
  color:#000000;
  margin-left: 0.8rem !important;
  vertical-align: middle;
}

.filter i::before {
  font-size: 16px;
  margin-top: 2.5rem;
   
}


/* ===== Task List Styling ===== */
.taskListTitle{
  width: 532px;
  height: 60px;
  text-align: left;
}

.taskListTitleHead th{
  height: 60px;
  font-family: Manrope;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 22px !important;
  letter-spacing: 0em;
  color: #000000D9 !important;
}

.taskListTitleName td{ 
  font-family: Manrope;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 24px !important;
  letter-spacing: 0em;
  color: #000000D9 !important;

}

.taskListTypeName{
  margin-left: 2rem; 
  font-family: Manrope;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 22px !important;
  letter-spacing: 0em;
  text-align: left;
  width: 80px !important;
  height: 22px !important;
  color: #1890FF;

}

.taskListPriority{
  font-family: Manrope;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 20px !important;
  letter-spacing: 0em;
  text-align: left;
  padding: 1px 8px;
  border-radius: 2px !important;
}

.taskListAddonDate{
  font-family: Manrope;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 22px !important;
  letter-spacing: 0em;
  color: #9F9F9F !important;
}

.taskListViewBtn{
  border-radius: 2px !important;
  padding: 4px 8px!important;
  background-color: #1890FF !important;
  font-family: Manrope;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 22px !important;
  letter-spacing: 0em !important;
  text-align: center !important;
  color: #ffffff !important;
  border: 1px solid #1890FF !important;
}

.backButton{

font-family: Manrope;
font-size: 22px !important;
font-weight: 400 !important;
line-height: 36px !important;
letter-spacing: -0.03em;
color: #000000;
}
.tasklist-active{
  border: 2px solid #0F5FDF !important;

}

.scrollable-dropdown {
    max-height: 90px; /* Adjust the maximum height as needed */
    overflow-y: auto;
}

.scrollable-list {
    max-height: inherit;
}

.dropdown-item.filter-button.member-item {
    cursor: pointer;
}


/* ===== Add Task Button Styling ===== */
.addNewTaskBtn{
  border-radius: 2px !important;
  padding: 4px 25px!important;
  background-color: #1890FF !important;
  font-family: Manrope;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 22px !important;
  letter-spacing: 0em !important;
  text-align: center !important;
  color: #ffffff !important;
  border: 1px solid #1890FF !important;
}

.cancelNewTaskBtn{
  border-radius: 2px !important;
  padding: 4px 25px!important;
  background-color: #ffffff !important;
  font-family: Manrope;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 22px !important;
  letter-spacing: 0em !important;
  text-align: center !important;
  color: #D20000 !important;
  border: 1px solid #D20000 !important;
}

.taskListService{
  width: 350px;
  height: 60px;
  text-align: left;
}

.taskListEmail{
  width: 250px;
  height: 60px;
  text-align: left;
}

.taskListServiceBtn{
  border-radius: 2px !important;
  padding: 4px 8px!important;
  font-family: Manrope;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 22px !important;
  letter-spacing: 0em !important;
  text-align: center !important;
  color: #0F5FDF !important;
  border: 1px solid #1890FF !important;
}

.pagination-container {
    float: right; /* Float the pagination links to the right side */
   
}

.filter-btn-service{
  border: 1px solid #D9D9D9;
  height: 32px;
  padding: 4px 25px;
  border-radius: 0px;

}

.filter-service{
  border: 1px solid #D9D9D9;
  height: 32px;
  padding: 4px 25px;
  border-radius: 0px;

}


.filter-btn-serviceText{
  font-family: Manrope;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  letter-spacing: 0em;
  text-align: center;
  color:#000000;
  margin-left: 0.3rem !important;
}

.servicePage-btn-text{
  font-family: Manrope;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  letter-spacing: 0em;
  text-align: center;
  color:#000000;
  margin-left: 1rem !important;
  vertical-align: middle;
}

.billing-cycle{
  color: #A9A9A9 !important;
  margin-left: 10px !important;
  font-family: Manrope;
  font-size: 10px;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: 0em;
  text-align: left;

}

.refresh-icon{
  width: 15.85px !important;
  height: 9.49px !important;
  

}

.ellipse{
  width: 20px !important;
  height: 20px !important;
  margin-left: 10px;
}

.dots-icon i::before {
 
    padding: 10px;
    background: #fff;
    border-radius: 20%;
    
  
}

.subcription-cancel {
  padding: 0.7rem 1.5rem !important;
}

.clientDetailsName{
  font-family: Manrope;
  font-size: 20px;
  font-weight: 600;
  line-height: 30px;
  letter-spacing: 0px;
  text-align: left;
  color:#000000;
  margin:15px 0px;
}

.planName{
  font-family: Manrope;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 22px !important;
  letter-spacing: 0em;
  text-align: left;
  width: 80px !important;
  height: 22px !important;
  color: #1890FF;

}

.clientDetailsService{
    font-family: Manrope;
    font-size: 12px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0px;
    text-align: left;
    color: #a9a9a9 !important;
    margin-top: 15px;
    margin-bottom: 15px;
}

.table-border-heading{
  font-family: Manrope;
  font-size: 14px !important;
  font-weight: 600;
  letter-spacing: 0em;
  text-align: left;
  color:#333333;

}

.table-border-contant{
  font-family: Manrope;
  font-size: 14px !important;
  font-weight: 400;
  letter-spacing: 0em;
  text-align: left;
  color:#333333;

}

.dots-icon-main-section i::before {
 
    padding: 12px;
    background: #fff;
    margin-top: -15px;
    border-radius: 20%;
    box-shadow: 0 0.6rem 0.9rem rgba(0, 0, 0, 0.075) !important;
  
}


.createPlanBtn{
  border-radius: 8px !important;
  padding: 6.4px 15px!important;
  background-color: #1890FF !important;
  font-family: Manrope;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 22px !important;
  letter-spacing: 0em !important;
  text-align: center !important;
  color: #ffffff !important;
  border: 1px solid #1890FF !important;
  width: 127px !important;

}

.planPageIcon{
  width: 24px !important;
  height: 45px !important;
 
}

.planTableSrNumber{
  width: 37px !important;
  height: 22px !important;

}

.createPlanLabelName{
  font-family: Manrope;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 22px !important;
  letter-spacing: 0em;
  text-align: left;
  color: #000000;

}

.createPlanInput{
  font-family: Manrope;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 22px !important;
  border: 1px solid #D6D6D6 !important;
  letter-spacing: 0em;
  border-radius: 8px !important;
  text-align: left !important;
  color: #333333 !important;
}

.createPlanDiscardBtn{
  font-family: Manrope;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 18px !important;
  letter-spacing: 0em !important;
  text-align: center !important;
  padding: 16px 40px !important;
  border-radius: 8px;
  border: 1.5px solid #D20000;
  color: #D20000 !important;
}

.createResetBtn{
  font-family: Manrope;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 18px !important;
  letter-spacing: 0em !important;
  text-align: center !important;
  padding: 16px 40px !important;
  border-radius: 8px;
  border: 1.5px solid #1890FF;
  color: #1890FF !important;
  text-decoration: none;
}

.createPlanSubmitBtn{
  font-family: Manrope;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 18px !important;
  letter-spacing: 0em !important;
  text-align: center !important;
  padding: 16px 40px !important;
  border-radius: 8px;
  border: 1.5px solid #1890FF;
  color: #FFFFFF !important;
  background-color: #1890FF !important;
}


/* Existing Select2 single dropdown box */
.serviceName .select2-container--default .select2-selection--single {
    border-color: #d6d6d6 !important;
    height: 52px !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 12px !important;
    width: 100% !important; /* Ensure it takes full column width */
}

/* Selected text inside the dropdown */
.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 1.5 !important; /* Avoid overflow issues */
    font-size: 14px;
    padding-left: 4px;
    width: 100%;
    display: block;
}

/* Arrow icon size & alignment */
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 52px !important;
    top: 0 !important;
}

/* General container width */
.select2-container {
    width: 100% !important;
}


.warning-note-card {
    border-left: 4px solid #ffbc34 !important;
    border-radius: 10px;
}

.font-demi {
    font-family: Manrope !important;
    font-weight: 800 !important;
}

.plan-warning-text{
  font-weight: 500 !important;
}

.reset-service-status-filter{
  cursor: pointer !important;
}

.reset-service-filter{
  cursor: pointer !important;
}
.date-filter{
  margin-top: 30px !important;
}
#reset-date-filter{
    text-align: center !important;
    margin-top: -30px !important;
    cursor: pointer !important;
}
.reset-priority-filter{
  cursor: pointer !important;
}
.reset-member-filter{
  cursor: pointer !important;
}

.comment-text:focus,
.comment-text:focus-visible {
  /* Your styles for focused and visible focus state */
   border: 4px solid  !important; /* Change to your default border color */
   border-color: #bbafaf !important; /* Change border color to blue, for example */
}


.editProfilePicBtn{
  width: 193px;
  height: 38px;
  padding: 8px, 12px, 8px, 12px !important;
  border-radius: 8px;
  border: 1px solid #ADC6FF;
  color: #2F54EB !important;
  background-color: #F0F5FF !important;
  font-family: Manrope;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  letter-spacing: 0em;
  text-align: left;

} 

.removeProfilePicBtn{
  width: 193px;
  height: 38px;
  padding: 8px, 12px, 8px, 12px !important;
  border-radius: 8px;
  border: 1px solid #FFA39E;
  color: #F5222D !important;
  background-color: #FFF1F0 !important;
  font-family: Manrope;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  letter-spacing: 0em;
  text-align: left;  
}

.changePassworTxt{
  font-family: Manrope;
  font-size: 20px;
  font-weight: 600;
  line-height: 30px;
  letter-spacing: 0px;
  text-align: left;
  color: #000000;

}



.table td.wrap-text {
  max-width: 230px; /* Adjust this value based on your requirement */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  Line-height:22px !important;
  font-family: Manrope;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0em;
  text-align: left;

}

.table td.wrap-text div {
  max-width: 100%;
  word-wrap: break-word;
  white-space: normal;
  vertical-align: middle;
}

.commentUserName{
  font-family: Manrope;
  font-size: 20px;
  font-weight: 600;
  line-height: 24px;
  letter-spacing: 0em;
  text-align: left;
  color: #000000;
  margin-bottom: 0.30rem !important;

}
.commentShow{
  font-family: Manrope;
  font-size: 14px;
  font-weight: 500;
  line-height: 22px;
  letter-spacing: 0em;
  text-align: left;

}

.img-circle{
  width: 17px !important;
  height: 20px !important;
  margin-top: 12px !important;
}

.notification-bell{
  width: 48px !important;
  height: 48px !important;
  background-color: #ffffff;
  border-radius: 50%;
}

.searchForm{
  background-color: #ffffff;
  border-radius: 50px;
  width: 386px;
}

#search{
  margin-top: 5px;
}

.dashboard-currentDate{
  font-family: Manrope;
  font-size: 14px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: 0em;
  text-align: left;
  color: #9f9f9f !important;

}

.auth-form-light{
  width: 448px !important;
  height: 663px !important;
  margin-left: 45px !important;
  border-radius: 20px;
}

.login-sign-to-continus{
  font-family: Manrope;
  font-size: 20px !important;
  font-weight: 700 !important;
  line-height: 30px !important;
  letter-spacing: 0px !important;
  color: #000000 !important;
  margin-top: 45px !important;

}

.form-check-label{
  font-family: Manrope;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 20px !important;
  letter-spacing: 0.25px !important;
  text-align: left !important;
  color: #777777 !important;

}

.login-form{
  padding-left: 10px !important;
  padding-right: 10px !important;
}

.login-form-label{
  font-family: Manrope;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 20px !important;
  letter-spacing: 0.25px !important;
  text-align: left !important;
  color: #777777 !important;
  padding-bottom: 0px !important;
}

.auth-login-btn{
  background-color: #1890FF !important;
  border-color: #1890FF !important;
  font-family: Manrope !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: 0.25px !important;

}

.auth-link{
  font-family: Manrope !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 20px !important;
  letter-spacing: 0.25px !important;
  text-align: center !important;
  color: #336AEA !important;
  padding: 5px;
  border-bottom: solid;
  text-decoration: none; 
}

#comment-text:focus-visible{
   outline: -webkit-focus-ring-color auto 1px;
   outline-color: #d9d9d9; 
} 

.full-width-button {
    padding-left: 128px !important; /* Adjust as needed */
    margin-top: 4.8px;
    
}

.emoji-section .dropdown:hover .dropdown-menu {
  display: block;
}

.cancelPopUp{
    border-radius: 2px !important;
    padding: 4px 25px!important;
    font-family: Manrope;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 22px !important;
    letter-spacing: 0em !important;
    text-align: center !important;
    border: 1px solid #1890FF !important;
}

.button-row {
  display: flex;
  justify-content: space-between; /* Buttons evenly spaced */
  align-items: center; /* Center align buttons vertically */
}

.button-row a {
  padding: 10px 10px; /* Adjust padding as needed */
  font-size: 16px; /* Adjust font size as needed */
}


.backBtnArrow a {
  color: #f5f5f5 !important;
}

.filter-btn-section{
  display: flex;
  justify-content: flex-end;

}

.filter-btn-section button:last-child {
    margin-right: 0; /* Removes margin from the last button to prevent extra space */
}

.filter-btn-section .nav-link{
  padding: 0.4rem !important;
}

.add-task-btn{
  margin-top: 0.4rem;
  margin-left: 0.5rem;
}

.dropdown-menu .container .input-group input.form-control {
    width: 100px; /* Adjust the width to your desired size */
}

/* Target the input group and set it to flex display */
.dropdown-menu .container .input-group {
    display: flex;
    align-items: center; /* Align items vertically */
}

/* Target the input element within the input group */
.dropdown-menu .container .input-group input.form-control {
    flex: 1; /* Allow the input to grow and shrink to fit the container */
    width: auto; /* Let the width adjust dynamically */
}

/* Target the span containing the icon */
.dropdown-menu .container .input-group .input-group-text {
    flex-shrink: 0; /* Prevent the icon from shrinking */
}
.member-image img{
  width: 40px !important;
  height: 40px !important;
}

.sidebar {
    position: fixed !important;
    top: 70px !important; /* Header ke height ke according top position adjust karein */
    left: 0;
    width: 207px !important;
    background-color: #ffffff !important; /* Background color set karein */
    overflow-y: auto; /* Y-axis par scroll bar dikhayein jab content overflow ho */
    z-index: 100 !important; /* Other elements se upar dikhe */
}

.main-panel {
    margin-left: 207px !important; /* Sidenavbar ka width ke hisaab se left margin set karein */
    width: calc(100% - 207px) !important; /* Screen width se sidenavbar ka width subtract karke content ka width set karein */
}

#sidebarnew .inner-wrapper-sticky {
    
    top: 70px !important; /* Desired top value */
}
@media (max-width: 992px) {
    
    .main-panel {
        margin-left: 0; /* Sidenavbar hide hone par left margin ko reset karein */
        width: 100%; /* Sidenavbar hide hone par content ka full width set karein */
    }
 canvas{
   width:840px !important;
   height:300px !important;
   }
}
.navbar .navbar-brand-wrapper{
  width: 207px !important;
  padding: 10px 20px !important;
}

.navbar .navbar-menu-wrapper{
  padding-right: 4rem !important;
  width: calc(100% - 207px) !important;
}


/* ===== Tooltip and Icon Styling ===== */
.plus-icon-container {
    display: inline-block;
    position: relative;
    text-decoration: none;
    margin-top:2px !important;
    color: #000; /* Change the color as needed */
}

.plus-font-size {
    font-size: 1.5rem; /* Adjust the font size of the "+" icon */
}

.extra-count {
    position: absolute; 
    right: -10px;
    border-radius: 50%;
    padding: 4px 5px;
    font-size: 1rem;
}

.showPlusIcon{

    border-radius: 50%;
    box-shadow: 0 0 2px #888;
    padding: 0em 0.2em;
    width: 35px;
    height: 35px;

}

.showPlusIconLessThirdEmp {
    display: inline-block; /* Ensures the container is displayed inline */
    position: relative; /* Positioning context for absolute positioning */
}



.showPlusIconLessThirdEmp a i {
    font-size: 1.5rem; /* Adjust the font size of the "+" icon */
    color: #555; /* Set color for the "+" icon */
    padding: 4px 8px !important;
}

  /* Custom styles for dropdown and submenu */
  .showPlusIcon .dropdown-menu {
      width: 450px; /* Set the width of the dropdown menu */
      height: 450px; /* Set the maximum height of the dropdown menu */
      overflow-y: auto; /* Enable vertical scroll if content exceeds max-height */
  }
  .showPlusIcon .dropdown-item {
      display: flex;
      align-items: center;
      padding: 8px 16px;
  }
  .showPlusIcon .dropdown-item img {
      width: 40px; /* Adjust image size */
      height: 40px;
      border-radius: 50%; /* Make images circular */
      margin-right: 5px;
  }
  .showPlusIcon .dropdown-submenu {
      position: relative;
  }

 .showPlusIcon .dropdown-submenu .dropdown-menu {
      top: none;
      left: 20%;
      margin-top: 14px;
     
  }

 .showPlusIcon .dropdown-submenu .dropdown-menu {
     width: 300px;
      height: 250px;
      overflow-y: auto;
      left: 10%;
  }

.dropdown.showPlusIcon .dropdown-toggle::after {
      display: none; /* Hide the dropdown toggle arrow */
  }


/* Style for circular plus icon */
 .dropdown-submenu .dropdown-item .plus-icon {
      display: inline-block !important;
      border-radius: 50% !important;
      background-color: #f0f0f0 !important;
      width: 40px !important;
      height: 40px !important;
      line-height: 40px !important;
      text-align: center !important;
  }  
  
 .custom-grid-col-2{
  width: 15% !important;
 } 

 .custom-grid-col-10{
  width: 85% !important;
 } 

 #forget-password-section{
  background-color: #ffffff !important;
 }

 .reset-password-heading{
  font-family: Manrope !important;
  font-size: 28px !important;
  font-weight: 800 !important;
  line-height: 42px !important;
  text-align: center !important;
  color: #000000 !important;
 }

 .reset-password-paragraph{
  font-family: Manrope !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 21px !important;
  text-align: center !important;
  color: #9F9F9F !important;


 }

 .password-change img{
   width: 80px !important;
   height: 80px !important;
 }

 .bottom-border-color{
  border-bottom: 1px solid #0000000F !important;
  display: flex !important;
  align-items: center !important;
 }

 .subsciption-card{
  padding: 0rem 1.5rem !important;

 }

 .subscription-name{
  font-family: Manrope !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  line-height: 22px !important;
  text-align: left !important;
  color: #000000D9 !important;
  padding: 10px 0px !important;
 }

 .subscription-detail{
  font-family: Manrope !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 24px !important;
  text-align: left !important;
  color: #000000D9 !important;

 }

 .subscribeServicesBtn{
  font-family: Manrope !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 22.5px !important;
  letter-spacing: 0.25px !important;
  text-align: left !important;
  background-color: #1890FF !important;
  padding: 10px 20px !important;
  color: #ffffff !important;
  border-radius: 4px !important;
  border-color: #1890FF !important;
 }

 .services-type{
  font-family: Manrope !important;
  font-size: 24px !important;
  font-weight: 600 !important;
  line-height: 28.8px !important;
  letter-spacing: 0.2px !important;
  text-align: left !important;
  color: #19352A !important;
  padding-top: 1.8rem !important;
 }

 .services-paragraph{
  font-family: Manrope;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0.2px;
  text-align: left;
  color: #7a7a7a !important;
  padding-right: 2.5rem !important;
 }

 .service-features li{
  font-family: Manrope !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 24px !important;
  letter-spacing: 0.2px !important;
  text-align: left !important;
  color: #2C3131 !important;

 }

 .download-invoice img{
     width: 24px !important;
     height: 24px !important;
     border-radius: 0% !important;

 }

 .tabel-header-title{
  font-family: Manrope !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  line-height: 30px !important;
  text-align: left !important;
  color:#000000 !important;

 }


/* ===== Progress Bar Animation ===== */
@keyframes progress {
  0% { --percentage: 0; }
  100% { --percentage: var(--value); }
}

@property --percentage {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

[role="progressbar"] {
  --percentage: var(--value);
  --primary: #5BE49B;
  --secondary: #919EAB29;
  --size: 80px;
  animation: progress 2s 0.5s forwards;
  width: var(--size);
  aspect-ratio: 1;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
}

[role="progressbar"]::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: conic-gradient(var(--primary) calc(var(--percentage) * 1%), var(--secondary) 0);
  mask: radial-gradient(white 55%, transparent 0);
  mask-mode: alpha;
  -webkit-mask: radial-gradient(#0000 55%, #000 0);
  -webkit-mask-mode: alpha;
}

[role="progressbar"]::after {
  counter-reset: percentage var(--value);
  content: counter(percentage) '%';
  font-family: Helvetica, Arial, sans-serif;
  font-size: calc(var(--size) / 5);
  color: #212B36;
}


.word-total{
  font-family: Manrope !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 19.2px !important;
  text-align: left !important;
  color: #637381 !important;

}

.word-limit-total{
  font-family: Manrope !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 19.2px !important;
  text-align: left !important;
  color: #212B36 !important;

}

.custom-margin-top{
  margin-top: 2rem !important;
}

.service-type-dashboard{
  font-family: Manrope !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  line-height: 30px !important;
  text-align: left !important;
  color:#000000 !important;

}

.nextBillingOnCard{
  height: 190px !important;
}

.nextBillingOnCard p{
  font-family: Manrope !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 19.2px !important;
  text-align: left !important;
  color: #637381 !important;

}

.nextBillingOnCard h3{
  font-family: Manrope !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  line-height: 30px !important;
  text-align: left !important;
  color: #000000 !important;

}

#form-elements .nav-item::before {

background: #00000000 !important;

}


.employee-image-container {
    position: relative; /* Important for positioning the close icon absolutely */
}

.close-icon {
    position: absolute; /* Position the icon absolutely within the container */
    top: -32px; /* Adjust top position as needed */
    right: 3px; /* Adjust right position as needed */
    display: none; /* Initially hide the icon */
    cursor: pointer; /* Set cursor to pointer on hover */
    opacity: 0.5; /* Add some initial opacity (optional) */
    transition: opacity 0.2s ease-in-out; /* Add a smooth transition for opacity */
  
}

.employee-image-container:hover .close-icon {
    display: block; /* Show the icon on hover */
    opacity: 1; /* Increase opacity on hover */
}

.close-icon::before {
 font-size: 30px !important; 
}

.subsciption-list-btn{
 margin-left: 1.5rem;
}

/* ====== Disabled Button Styling  ====== */
.btn-disable{
   pointer-events: none; /* Prevents clicks */
    opacity: 0.6;         /* Makes the button look disabled */
    cursor: not-allowed;  /* Shows a "not-allowed" cursor */
}

.addBrand{
  padding: 32px !important;
}

.brandName{
  padding: 0px !important;
  font-family: Manrope;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 19.5px !important;
  letter-spacing: 0.25px !important;
  color: #777777 !important;
  margin-bottom: 0.1rem !important;
}

/* Outer Upload Box Styling */
.outer-upload-box {
    background-color: #ffffff; /* Light grey background */
    padding: 15px; /* Padding around the dashed box */
    border-radius: 4px; /* Rounded corners for the background */
}

/* Inner Dashed Border Box */
.inner-upload-box {
    border: 2px dashed #515151; /* Dashed border */
    background-color: #F2F2F2; /* White background inside */
    height: 70px; /* Fixed height */
    display: flex;
    justify-content: center; /* Center the content horizontally */
    align-items: center; /* Center the content vertically */
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.inner-upload-box:hover {
    background-color: #e9ecef; /* Slightly darker grey on hover */
}

/* Plus Icon */
.plus-icon-upload-file {
    font-size: 32px; /* Larger size for the plus icon */
    color: #000; /* Black color */
    font-weight: bold;
    padding: 10px 170px;
}

.plus-icon-color{
    font-size: 16px; /* Larger size for the plus icon */
    color: #fff !important; /* Black color */
    font-weight: bold;
    background-color: #B6B6B6;
    border-radius: 4px;

}
.color-input {
    display: flex;
    align-items: center;
    gap: 10px;
}

.form-section {
    margin: 0 auto; /* Center align the form */
}

.brand-save-btn{
  background-color: #1890FF;
  font-family: Manrope;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.25px;
  color: #ffffff;
  border-radius: 4px;
  border: 1.5px solid #1890FF;
}

.brand-save-btn:hover{
  background-color: #1890FF;
   border: 1.5px solid #1890FF;
}

.brand-discard-btn{
  border: 1.5px solid #D20000;
  font-family: Manrope;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.25px;
  color: #D20000;
  border-radius: 4px;

}

#brandName{
  border: 1px solid #C8C8C8;
  border-radius: 4px !important;
  height: 44px;
}

#additionalDetails{
  border: 1px solid #C8C8C8;
  border-radius: 4px !important;
  height: 44px;
}


.form-control-color {
    width: 50px;
    height: 40px;
    border: none;
    margin: 0;
    cursor: pointer;
    background: #fff;
}

/* Hex input styling */
.color-hex {
    border: none;
    text-align: left;
    flex: 1;
    height: 40px;
    background: #fff;
    padding: 0px;
}
/* Add Button Styling */
.btn-add-color {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background-color: #B6B6B6;

}

/* Combined input group */
.input-group.combined-input {
    display: flex;
    align-items: center;
    border: 1px solid #ccc;
    border-radius: 4px;
    overflow: hidden;
}

.input-group-text{
border: none;
}

.file-item{
  background-color: #fff;
}

.brand-name-title{
  font-family: Manrope;
  font-size: 15px;
  font-weight: 500;
  line-height: 24px;
  color: #000000D9;

}

.editBrandViewBtn{
  border-radius: 4px !important;
  padding: 6px 16px!important;
  font-family: Manrope;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 22px !important;
  letter-spacing: 0em !important;
  text-align: center !important;
  color: #1890FF !important;
  border: 2px solid #1890FF !important;
}

.form-control:disabled{
  background-color: #ffffff;
}

.card-add-brand{
  padding-left: 0px;
}

.brandTitleName{
    font-family: Manrope;
    font-size: 12px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0px;
    text-align: left;
    color: #a9a9a9 !important;
    margin-top: 25px;
    margin-bottom: 0px;
}

 #dateRangePickerDueDate {
        background-color: white; /* Set background color to white */
    }

 #datePickerDueDate{
   background-color: white; /* Set background color to white */
 }

 #resetSelectDates{
  cursor: pointer;
 }

 .divider{
  color: #999191;
 }

 /* Specific Priority Colors */
.low-priority {
    border: 1px solid #52C41A;
    color: #52C41A;
    border-radius: 500px;
    padding: 5px 20px !important;
    margin-top: 1.5rem !important;
}

.medium-priority {
    border: 1px solid #FAAD14;
    color: #FAAD14;
    border-radius: 500px;
    padding: 5px 20px !important;
    margin-top: 1.5rem !important;
}

.high-priority {
    border: 1px solid #FA541C;
    color: #FA541C;
    border-radius: 500px;
    padding: 5px 20px !important;
    margin-top: 1.5rem !important;
}

.urgent-priority {
    border: 1px solid #FF000D;
    color: #FF000D;
    border-radius: 500px;
    padding: 5px 20px !important;
    margin-top: 1.5rem !important;
}

.priority{
  padding: 0px 5px;
}

/* Task Status Colors */

.task-status-revision{
 color: #722ED1; 
 border: 1px solid #D3ADF7;

}

.task-status-progress{
 color: #13C2C2; 
 border: 1px solid #87E8DE;

}

.task-status-done{
 color: #EB2F96; 
 border: 1px solid #FFADD2;

}

.planArchiveIcon{
  width: 24px !important;
  height: 28px !important;
}

/* kanban view list */
.kanban-board {
    display: flex;
    gap: 20px;
    padding: 20px;
    align-items: flex-start;

}

.kanban-column {
    width: 24%;
    background: #f1f2f4;
    padding: 8px;
    border-radius: 12px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
}

.kanban-cards {
    display: flex;
    flex-direction: column;
    padding: 1px;
    cursor: pointer; /* ✅ Pointer cursor on hover */
}

.kanban-card {
    background: #fff;
    padding: 12px 12px;
    border-radius: 10px;
    margin-bottom: 10px;
    box-shadow: 0px 1px 1px #091e4240;
}

.kanban-item-details h4 {
  color: #000000 !important;
  margin-bottom: 4px;
}

.kanban-item-details p {
  color: #000000 !important;
  margin-bottom: 4px;
}