.mat-mdc-tooltip {
  // --mdc-plain-tooltip-container-color: #002E5F;
  // --mdc-plain-tooltip-supporting-text-color: #FFFFFF;
  // --mdc-plain-tooltip-supporting-text-size: 14px;
  // --mdc-plain-tooltip-supporting-text-font: "Open Sans", sans-serif;
  // --mdc-plain-tooltip-supporting-text-weight: auto;
  // --mdc-plain-tooltip-supporting-text-tracking: 0.0333333333em;




  white-space: normal !important;
  max-width: 250px !important;
  padding: 4px 8px !important;
  word-break: break-word !important;
  // position: relative !important;
  background: #002E5F !important;
  font-weight: 600 !important;
  color: #FFFFFF !important;
  border-radius: 8px !important;
  font-size: 14px !important;

}

// .mat-mdc-tooltip-panel-above .mat-mdc-tooltip {
//   /* Clip-path with centered tail */
//   clip-path: polygon(0% 0%, 100% 0%, 100% 100%,
//       55% 100%, 50% calc(100% + 10px),
//       45% 100%, 0% 100%);
// }

// .mat-mdc-tooltip-panel-above .mat-mdc-tooltip::after {
//   content: "";
//   position: absolute;
//   bottom: -8px;
//   left: 50%;
//   transform: translateX(-50%);
//   width: 12px;
//   height: 12px;
//   background: #ffe377;
//   clip-path: polygon(100% 0, 0 0, 50% 100%);
// }

// .mat-mdc-tooltip-panel-below .mat-mdc-tooltip {
//   /* Clip-path with centered tail at the top */
//   clip-path: polygon(0% 0%, 45% 0%, 50% -10px, 55% 0%, 100% 0%, 100% 100%, 0% 100%);
// }

// .mat-mdc-tooltip-panel-below .mat-mdc-tooltip::after {
//   content: "";
//   position: absolute;
//   top: -8px; /* Move the triangle to the top */
//   left: 50%;
//   transform: translateX(-50%);
//   width: 12px;
//   height: 12px;
//   background: #002E5F;
//   clip-path: polygon(50% 0, 0 100%, 100% 100%);
// }

// .mat-mdc-tooltip-panel-left .mat-mdc-tooltip {
//   /* Clip-path with centered tail on the right */
//   clip-path: polygon(0% 0%, 100% 0%, 100% 45%, calc(100% + 10px) 50%, 100% 55%, 100% 100%, 0% 100%);
// }

// .mat-mdc-tooltip-panel-left .mat-mdc-tooltip::after {
//   content: "";
//   position: absolute;
//   top: 50%;
//   right: -8px; /* Move the triangle to the right */
//   transform: translateY(-50%);
//   width: 12px;
//   height: 12px;
//   background: #002E5F;
//   clip-path: polygon(0 0, 100% 50%, 0 100%);
// }

// .mat-mdc-tooltip-panel-right .mat-mdc-tooltip {
//   /* Clip-path with centered tail on the left */
//   clip-path: polygon(0% 45%, -10px 50%, 0% 55%, 0% 100%, 100% 100%, 100% 0%, 0% 0%);
// }

// .mat-mdc-tooltip-panel-right .mat-mdc-tooltip::after {
//   content: "";
//   position: absolute;
//   top: 50%;
//   left: -8px; /* Move the triangle to the left */
//   transform: translateY(-50%);
//   width: 12px;
//   height: 12px;
//   background: #002E5F;
//   clip-path: polygon(100% 0, 100% 100%, 0 50%);
// }
.mat-mdc-tooltip-show {
  border-radius: 4px !important;
}

.mat-mdc-tooltip .mdc-tooltip__surface.mdc-tooltip__surface-animation {
  background: transparent !important;
  line-height: 24px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  padding: 0px !important;
  border-radius: 4px !important;
  letter-spacing: 0% !important;

}

.popover-title {
  padding: 8px 16px !important;
  margin: 0 !important;
  font-size: 16px !important;
  background-color: #f2f2f2;
  border-bottom: 1px solid #ebebeb;
  border-radius: 0 !important;
  color: #000000 !important;
  font-weight: 600 !important;
  text-align: start !important;
  line-height: 24px !important;
  font-family: "Open Sans", sans-serif !important;
}

.popover-content {
  padding: 8px 16px;
  font-size: 14px !important;
  font-weight: 400 !important;
  text-align: start !important;
  line-height: 24px !important;
  font-family: "Open Sans", sans-serif !important;
}

.popover {
  padding: 0px !important;
  overflow: hidden !important;
}

[data-toggle=popover]:focus {
  /*   outline-offset: 0 !important;
  outline: 2px solid black !important;
  border: none !important;
  margin: 0 !important; */

  outline-offset: 2px !important;
  outline: 2px solid black !important;
  border: none !important;
  margin: 0 !important;
  font-size: 1.25em !important;
  padding: 0 !important;
}

[data-toggle=popover] {
  line-height: 1em !important;
  color: #002e5f !important;
  pointer-events: auto;
}

[data-toggle=popover]:hover {
  color: #00458F !important;
}

i:focus {
  outline: 2px solid red !important;
}