.mat-mdc-tooltip-panel{
  margin-top: 0 !important;
  position: absolute;
}
.mdc-tooltip{
  background-color: var(--color-surface-alt-idle);
  padding: 0 !important;
  color: var(--color-on-surface-alt-primary);
  font-size: var(--font-size-m);
  border-radius: var(--border-radius-interface) !important;
  .mdc-tooltip__surface{
    padding: 4px 8px !important;
  }
}
.mat-mdc-tooltip:before{
  width: 0;
  height: 0;
  content: "";
  position: absolute;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  top: -5px !important;
  left: initial !important;
  right: calc(50% - 5px) !important;
}
.mat-mdc-tooltip.below:before,
.mat-mdc-tooltip-panel-below .mat-mdc-tooltip:before{
  border-bottom: 5px solid var(--color-surface-alt-idle);
}
.mat-mdc-tooltip.above:before,
.mat-mdc-tooltip-panel-above .mat-mdc-tooltip:before{
  border-top: 5px solid var(--color-surface-alt-idle);
  bottom: -5px !important;
  top: initial !important;
}
.mat-mdc-tooltip.left:before,
.mat-mdc-tooltip-panel-left .mat-mdc-tooltip:before{
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 5px solid var(--color-surface-alt-idle);
  right: -10px !important;
  top: calc(50% - 5px) !important;
}
.mat-mdc-tooltip.right:before,
.mat-mdc-tooltip-panel-right .mat-mdc-tooltip:before{
  border-right: 5px solid var(--color-surface-alt-idle);
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  left: -10px !important;
  top: calc(50% - 5px) !important;
}

.custom-tooltip{
  background-color: var(--color-surface-alt-idle) !important;
  padding: 4px 8px !important;
  color: var(--color-on-surface-alt-primary);
  border-radius: var(--border-radius-interface) !important;
}