/* ReSharper disable Html.AttributeNotResolved */
/* increase z-index to be stacked above office ui fabric containers. */

.tooltip {
  z-index: 1000000 !important;
}

.global-tooltip-trigger {
  cursor: help;
}

.global-tooltip .show {
  opacity: 1.0;
}

.global-tooltip .tooltip-inner {
  max-width: 350px;
  text-align: left;
}

.global-tooltip code {
  color: #fff;
}

.global-tooltip em {
  color: orange;
  background: transparent;
}

.global-tooltip .ms-Table {
  margin: 0;
  padding: 0;
}

.global-tooltip tr {
  line-height: 20px;
}

.global-tooltip th:first-of-type,
.global-tooltip td:first-of-type {
  padding-left: 0;
}

td span.global-tooltip-trigger {
  min-width: 20px;
  display: inline-block;
}


/* ------------------------ recolor to gray ------------------------ */
/* https://digital.sbb.ch/en/farben --> Blue. */

.global-tooltip.tooltip {
  opacity: 1.0;
}

.global-tooltip .tooltip-inner {
  background: var(--sbb-tooltip-background);
  color: var(--sbb-tooltip-foreground);
}


.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before,
.bs-tooltip-top .tooltip-arrow::before {
  border-top-color: var(--sbb-tooltip-background);
}

.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before,
.bs-tooltip-bottom .tooltip-arrow::before {
  border-bottom-color: var(--sbb-tooltip-background);
}

.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before,
.bs-tooltip-left .tooltip-arrow::before {
  border-left-color: var(--sbb-tooltip-background);
}

.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before,
.bs-tooltip-right .tooltip-arrow::before {
  border-right-color: var(--sbb-tooltip-background);
}


/*
    attempted to restyle according to
    https://digital.sbb.ch/en/websites/components/tooltip
    but given up.

.global-tooltip .tooltip-inner  {
    color: #666;
    border: 2px solid #666;
    display: block;
    background-color: #fff;
}

.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before,
.bs-tooltip-top .tooltip-arrow::before {
    left: 50%;
    border: .13333em solid transparent;
    content: " ";
    height: 1.33333em;
    width: 1.33333em;
    position: absolute;
    pointer-events: none;
    -webkit-transform: rotate(45deg) translate(1.1em);
    transform: rotate(45deg) translate(-1.1em);
    background-color: #fff;
    border-color: #fff #666 #666 #fff;
}

.global-tooltip .tooltip-shadow {
    width: calc(100%);
    background-color: rgba(102,102,102,.15);
    height: .53333em;
    bottom: 0;
    position: absolute;
    box-sizing: border-box;
    margin-left: 0;
    margin-right: 0;
}

.global-tooltip .tooltip-shadow::after {
    top: 100%;
    left: 50%;
    content: " ";
    position: absolute;
    width: 0;
    height: 0;
    border-left: .93333em solid transparent;
    border-right: .93333em solid transparent;
    border-top: .93333em solid rgba(102,102,102,.15);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

*/