/* tip */
[data-tooltip] {
  position: relative;
}
[data-tooltip]::after {
  content: attr(data-tooltip);
  display: none;
  position: absolute;
  background: #00000099;
  color: white;
  font-size: x-small;
  padding: 3px 6px;
  border-radius: 10px;
  white-space: nowrap;
  z-index: 20;
}
[data-tooltip]:hover::after {
  display: block;
}
[data-tooltip].up::after {
  top: calc(-100%);
}
[data-tooltip].down::after {
  bottom: calc(-100%);
}
[data-tooltip].right::after {
  left: calc(100% + 3px);
}
[data-tooltip].left::after {
  right: calc(100% + 3px);
}
[data-tooltip]::before {
  display: none;
  content: " ";
  position: absolute;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent transparent transparent;
}
[data-tooltip]:hover::before {
  display: block;
}
[data-tooltip].up::before {
  bottom: calc(100% - 8px);
  border-top-color: #000000b3 !important;
}
[data-tooltip].down::before {
  top: calc(100% - 8px);
  border-bottom-color: #000000b3 !important;
}
[data-tooltip].left::before {
  left: calc(100% - 22px);
  border-left-color: #000000b3 !important;
}
[data-tooltip].right::before {
  right: calc(100% - 21px);
  border-right-color: #000000b3 !important;
}

.tooltip-con {
  position: relative;
}
.tooltip-con:hover .tooltip {
  display: block !important;
  opacity: 1;
}
.tooltip {
  display: none;
  position: absolute;
}
.tip {
  content: " ";
  position: absolute;
  /* margin-left: -5px; */
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent transparent transparent;
}
.tip.up {
  bottom: 100%;
  border-bottom-color: #000000b3 !important;
}
.tip.left {
  right: 100%;
  /* border-width: 6px 5px 6px 0px !important; */
  border-right-color: #000000b3 !important;
}
.tip.right {
  left: 100%;
  border-left-color: #000000b3 !important;
}
.tip.down {
  top: 100%;
  border-top-color: #000000b3 !important;
}