/* Tooltip CSS */
[data-md-tooltip] {
  position: relative;
}
[data-md-tooltip]:before {
  content: attr(data-md-tooltip);
  position: absolute;
  bottom: -35px;
  left: 50%;
  padding: 8px;
  transform: translateX(-50%) scale(0);
  transition: transform 0.3s ease-in-out;
  transform-origin: top;
  background: #FFFFFFEE;
  color: black;
  border-radius: 2px;
  font-size: 12px;
  font-family: Roboto,sans-serif;
  font-weight: 400;
  text-shadow: none;
  white-space: nowrap;
  z-index: 7;
}
.dark[data-md-tooltip]:before{
  background-color: #000000EE;
  color:white;
}
[data-md-tooltip]:hover:before {
  transform: translateX(-50%) scale(1);
}
[data-md-tooltip].md-tooltip--right:before {
  left: auto;
  right: -10px;
  bottom: auto;
  top: 50%;
  transform: translate(100%, -50%) scale(0);
  transform-origin: left center;
  text-transform: none;
}
[data-md-tooltip].md-tooltip--right:hover:before {
  transform: translate(100%, -50%) scale(1);
}
[data-md-tooltip].md-tooltip--left:before {
  left: -15px;
  right: auto;
  bottom: auto;
  top: 50%;
  transform: translate(-100%, -50%) scale(0);
  transform-origin: right center;
}
[data-md-tooltip].md-tooltip--left:hover:before {
  transform: translate(-100%, -50%) scale(1);
}
[data-md-tooltip].md-tooltip-disabled:before {
  display: none;
}

.md-tooltip--top:before {
  top: -35px;
  bottom: auto;
  transform: translateX(-50%) scale(0);
  transform-origin: bottom center;
}