::ng-deep .description-tooltip {
  background-color: var(--color-white-hex);
  color: #555555;
  font-size: 12px;
  border-radius: 8px;
  font-family: var(--font-family-poppins);
  border: 1px solid #e5effe;
}

.tooltip-wrp {
  position: relative;
  padding: 8px;
  color: #555555;
  font-size: 10px;
  text-align: justify;
  border-radius: 8px;
  font-family: var(--font-family-poppins);
  width: auto;
}

.tooltip-wrp span {
  margin: 0 2px;
}

.caret_tooltip {
  height: 8px;
  width: 8px;
  position: absolute;
  right: -4px;
  top: 50%;
  background: var(--color-white-hex);
  transform: translateY(-50%) rotate(45deg);
  background: var(--color-white-hex);
}

::ng-deep .cds-mat-tooltip {
  margin-bottom: 6px !important;
  background-color: var(--gray-light-01) !important;
  color: var(--gray) !important;
  font-size: 12px !important;
  font-family: var(--font-family-poppins);
  border-radius: 16px !important;
  padding-top: 4px !important;
  padding-bottom: 4px !important;
  padding-left: 10px !important;
  padding-right: 10px !important;
  line-height: 1.4;
}

.cds-custom-tooltip {
  background-color: #fff;
  color: #555555;
  font-size: 12px;
  border-radius: 2px;
  font-family: var(--font-family-poppins);
  padding-top: 8px;
  padding-bottom: 8px;
  border: 1px solid #e5effe;
}

::ng-deep .texarea-add-filter-panel {
  max-width: 480px;
  width: 480px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 20px 4px rgba(154, 161, 177, 0.15), 0 4px 80px -8px rgba(36, 40, 47, 0.25), 0 4px 4px -2px rgba(91, 94, 105, 0.15);
  background: var(--color-white-hex);
  border-radius: 4px;
}