/* Adapted, but taken from: https://medium.freecodecamp.org/a-step-by-step-guide-to-making-pure-css-tooltips-3d5a3e237346 */

.w3-tooltip {
  position:relative;
}
.w3-tooltip .w3-text {
  position: absolute;
  opacity: 0.95;
  border: 5px solid inherit;
  border-radius: 5px;
  background-color: inherit;
  padding: 4px!important;
  pointer-events: none;
  white-space: nowrap;
  z-index: 99;
  left: 0;
  min-width: 80px;
  max-width: 95vw;
}

.w3-tooltip[tooltip-position='center'] .w3-text{
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.w3-tooltip[tooltip-position='left'] .w3-text{
  top: 50%;
  transform: translate(-100%,-50%) translateX(-2px);
}
.w3-tooltip[tooltip-position='right'] .w3-text{
  top: 50%;
  left: 100%;
  transform: translate(2px,-50%);
}
.w3-tooltip[tooltip-position='top'] .w3-text{
  left: 50%;
  transform: translate(-50%,-100%) translateY(-2px);
}
.w3-tooltip[tooltip-position='bottom'] .w3-text{
  top: 100%;
  left: 50%;
  transform: translate(-50%,2px);
}
.w3-tooltip[tooltip-position='bottom-right'] .w3-text{
  top: 100%;
  left: 0;
  transform: translateY(2px);
}
.w3-tooltip[tooltip-position='bottom-left'] .w3-text{
  top: 100%;
  left: 100%;
  transform: translate(-100%, 2px);
}

.ed-tooltip {
  position: absolute;
  z-index: 1;
  border: 2px solid white;
  border-radius: 4px;
  padding: 2px;
  margin: 0px;
  pointer-events: none;
  background: black;
  color: white;
  opacity: 0.7;
}
.align_center {
  transform: translate(-50%, -50%);
}
.align_vcenter {
  transform: translate(0, -50%);
}
.align_hcenter {
  transform: translate(-50%, 0);
}


/*
[tooltip-position='top']::before{
  left:50%;
}
[tooltip-position='bottom']::before{
  top:100%;
  margin-top:8px;
  transform: translateX(-50%) translatey(-100%) rotate(-180deg)
}
[tooltip-position='right']::before{
  left:100%;
  top:50%;
  margin-left:1px;
  transform:translatey(-50%) rotate(90deg)
}

[tooltip-position='left']::after{
  left:0%;
  top:50%;
  margin-left:-8px;
  transform: translateX(-100%)   translateY(-50%);
}
[tooltip-position='top']::after{
  left:50%;
}
[tooltip-position='bottom']::after{
  top:100%;
  margin-top:8px;
  transform: translateX(-50%) translateY(0%);
}
[tooltip-position='right']::after{
  left:100%;
  top:50%;
  margin-left:8px;
  transform: translateX(0%)   translateY(-50%);
}
*/