.filter-panel {
  max-width: 300px;
  border: 1px solid #dee2e6;
  border-radius: 5px;
  background-color: #fff;
}

.filter-panel .btn-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  color: #000;
}

/* Employeeform */
.cover-image {
  position: relative;
  width: 100%;
  height: 200px;
  background-color: #f8f9fa;
  display: flex;
  justify-content: center;
  align-items: center;
  background-size: cover;
  background-position: center;
}

.profile-image-emp {
  position: relative;
  /* margin-top: -50px; */
}

.profile-image-emp-label {
  cursor: pointer;
}

.profile-image-emp img {
  border: 3px solid #fff;
}

.image-cropper-container {
  position: relative;
  /* display: inline-block; */
}

.image-cropper-container img {
  max-width: 100%;
}

.crop-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 2px solid rgba(255, 255, 255, 0.5);
  box-sizing: border-box;
}

.t-list small {
  color: #828282;
  font-size: 0.625rem;
}

/* .emp-body-details div:first-child{width:80%} */
/* .emp-body-details div:second-child{width:80%} */



.progress-circle {
  width: 48px;
  height: 48px;

}

.circular-chart {
  display: block;

}

.circle-bg {
  fill: none;
  stroke: #eee;
  stroke-width: 3.8;
}

.circle {
  fill: none;
  stroke-width: 4;
  stroke: #1B2844;
  stroke-linecap: round;
  transition: stroke-dasharray 0.6s ease 0s;
}

.percentage {
  fill: #000;
  font-size: 0.625rem;
  text-anchor: middle;
}

/* removable */
html .btn,
html .btn-group>.btn {
  --bs-btn-padding-y: 4px;
  --bs-btn-padding-x: 8px;
  --bs-btn-font-size: 12px;
  --bs-btn-border-radius: 4px;
  --bs-btn-font-weight: 600;
  min-height: unset !important;
}

.profile-image-container {
  position: relative;
  width: 150px;
  /* Adjust as necessary */
  height: 150px;
  /* Adjust as necessary */
}

.profile-image {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.edit-button {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background-color: white;
  border: none;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.edit-button i.material-icons {
  font-size: 20px;
}

.ratio-1x8 {
  --bs-aspect-ratio: 15%
}


/* Move the css to core.css */
.invalid-feedback {
  bottom: auto;
  top: 100%;
  margin-top: 2px;
  font-size: 0.725rem;
  font-weight: 400;
  color: var(--bs-danger);
}

.dropdown-item a {
  display: block;
}

.css-head {
  flex: 0 0 288px;
  min-height: 0px;
  min-width: 0px;
  display: flex;
  flex-flow: row;
  justify-content: center;
  align-items: center;
  background-color: rgb(255, 255, 255);
  color: rgb(33, 115, 70);
  box-shadow: rgba(0, 0, 0, 0.133) 0px 3.2px 7.2px 0px, rgba(0, 0, 0, 0.11) 0px 0.6px 1.8px 0px;
  height: 40px;
  margin-top: 4px;
  padding: 0px 10px;
  border: none;
  border-radius: 3px;
  box-sizing: border-box;
  font: inherit;
  transition: color 0.167s ease-in-out 0s, background 0.167s ease-in-out 0s;
  cursor: pointer;
}

.more-members {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #ffffff;
  width: 30px;
  height: 30px;
}

.more-count {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  font-size: 14px;
  color: #333;
  /* background-color: #ccc; */
  border-radius: 50%;
}

.hover_icon {
  border: 1px solid #ece5e5;
  border-radius: 50%;
  padding: 3px;
  color: #4d704d;
  /* for plus team member width in card */

}

.pluswidth {
  width: 22px;
  height: 22px;
}