﻿.tooltipped {
  position: relative
}

  .tooltipped::after {
    position: absolute;
    z-index: 1000000;
    display: none;
    padding: .5em .75em;
    font: normal normal 11px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
    -webkit-font-smoothing: subpixel-antialiased;
    color: var(--color-fg-on-emphasis);
    text-align: center;
    text-decoration: none;
    text-shadow: none;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: break-word;
    white-space: pre;
    pointer-events: none;
    content: attr(aria-label);
    background: var(--color-neutral-emphasis-plus);
    border-radius: 6px;
    opacity: 0
  }

  .tooltipped::before {
    position: absolute;
    z-index: 1000001;
    display: none;
    width: 0;
    height: 0;
    color: var(--color-neutral-emphasis-plus);
    pointer-events: none;
    content: "";
    border: 6px solid transparent;
    opacity: 0
  }

@keyframes tooltip-appear {
  from {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

.tooltipped:active::after, .tooltipped:active::before, .tooltipped:focus::after, .tooltipped:focus::before, .tooltipped:hover::after, .tooltipped:hover::before {
  display: inline-block;
  text-decoration: none;
  animation-name: tooltip-appear;
  animation-duration: .1s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in;
  animation-delay: .4s
}

.tooltipped-no-delay:active::after, .tooltipped-no-delay:active::before, .tooltipped-no-delay:focus::after, .tooltipped-no-delay:focus::before, .tooltipped-no-delay:hover::after, .tooltipped-no-delay:hover::before {
  animation-delay: 0s
}

.tooltipped-multiline:active::after, .tooltipped-multiline:focus::after, .tooltipped-multiline:hover::after {
  display: table-cell
}

.tooltipped-s::after, .tooltipped-se::after, .tooltipped-sw::after {
  top: 100%;
  right: 50%;
  margin-top: 6px
}

.tooltipped-s::before, .tooltipped-se::before, .tooltipped-sw::before {
  top: auto;
  right: 50%;
  bottom: -7px;
  margin-right: -6px;
  border-bottom-color: var(--color-neutral-emphasis-plus)
}

.tooltipped-se::after {
  right: auto;
  left: 50%;
  margin-left: -16px
}

.tooltipped-sw::after {
  margin-right: -16px
}

.tooltipped-n::after, .tooltipped-ne::after, .tooltipped-nw::after {
  right: 50%;
  bottom: 100%;
  margin-bottom: 6px
}

.tooltipped-n::before, .tooltipped-ne::before, .tooltipped-nw::before {
  top: -7px;
  right: 50%;
  bottom: auto;
  margin-right: -6px;
  border-top-color: var(--color-neutral-emphasis-plus)
}

.tooltipped-ne::after {
  right: auto;
  left: 50%;
  margin-left: -16px
}

.tooltipped-nw::after {
  margin-right: -16px
}

.tooltipped-n::after, .tooltipped-s::after {
  transform: translateX(50%)
}

.tooltipped-w::after {
  right: 100%;
  bottom: 50%;
  margin-right: 6px;
  transform: translateY(50%)
}

.tooltipped-w::before {
  top: 50%;
  bottom: 50%;
  left: -7px;
  margin-top: -6px;
  border-left-color: var(--color-neutral-emphasis-plus)
}

.tooltipped-e::after {
  bottom: 50%;
  left: 100%;
  margin-left: 6px;
  transform: translateY(50%)
}

.tooltipped-e::before {
  top: 50%;
  right: -7px;
  bottom: 50%;
  margin-top: -6px;
  border-right-color: var(--color-neutral-emphasis-plus)
}

.tooltipped-align-right-1::after, .tooltipped-align-right-2::after {
  right: 0;
  margin-right: 0
}

.tooltipped-align-right-1::before {
  right: 10px
}

.tooltipped-align-right-2::before {
  right: 15px
}

.tooltipped-align-left-1::after, .tooltipped-align-left-2::after {
  left: 0;
  margin-left: 0
}

.tooltipped-align-left-1::before {
  left: 5px
}

.tooltipped-align-left-2::before {
  left: 10px
}

.tooltipped-multiline::after {
  width: max-content;
  max-width: 250px;
  word-wrap: break-word;
  white-space: pre-line;
  border-collapse: separate
}

.tooltipped-multiline.tooltipped-n::after, .tooltipped-multiline.tooltipped-s::after {
  right: auto;
  left: 50%;
  transform: translateX(-50%)
}

.tooltipped-multiline.tooltipped-e::after, .tooltipped-multiline.tooltipped-w::after {
  right: 100%
}

@media screen and (min-width:0\0) {
  .tooltipped-multiline::after {
    width: 250px
  }
}

.tooltipped-sticky::after, .tooltipped-sticky::before {
  display: inline-block
}

.tooltipped-sticky.tooltipped-multiline::after {
  display: table-cell
}
