[class*="gs-default-tt-"] {
  color: #333333 !important;
  padding: 2px 4px !important;
  background-color: #fff !important;
  border: 1px solid #d2d0d0 !important;
  border-radius: 4px !important;
  opacity: 1 !important;
  --bs-tooltip-bg: #333333; /* --bs-tooltip-color: #333333; */
}

.gs-default-tt-mT5[data-popper-placement="top"]{margin: 5px 0 !important;}
.gs-default-tt-mT15[data-popper-placement="top"]{margin: 15px 0 !important;}

[class*="gs-default-tt-"] > div{color: #333333 !important; } /* background-color: #fff !important; */

.gs-default-tt-mT0[data-popper-placement="top"]{margin: 0 0 0 -1px !important;}

table td[gs-bs-icon="1"]{ position: relative; }
table td[gs-bs-icon="1"]:after{ position: absolute; top: -13px; left: calc( 50% - 4px ); content: "\25E1"; } /* 25B4 | 1F781 */
/* table td[gs-bs-icon="1"]:hover:after{ opacity: 0; } */

.tooltip-inner{ background: none !important; }

/*
https://getbootstrap.com/docs/5.3/components/tooltips/

<!-- HTML to write -->
<a href="#" data-bs-toggle="tooltip" data-bs-title="Some tooltip text!">Hover over me</a>

<!-- Generated markup by the plugin -->
<div class="tooltip bs-tooltip-auto" role="tooltip">
  <div class="tooltip-arrow"></div>
  <div class="tooltip-inner">
    Some tooltip text!
  </div>
</div>
*/