.material-tooltip {
    padding: 10px 8px;
    font-size: .9rem;
    z-index: 5000;
    border-radius: 3px;
    max-width: 400px;
    min-height: 36px;
    // max-width: 350px;
    opacity: .5;
    display: none;
    position: absolute;
    text-align: center;
    left:0;
    top:0;

    will-change: top, left;

    @media #{$small-only} {
      display: none !important;
    }
    &:before {
      content: '';
      position: absolute;
      width: 0;
      height: 0;
      border: .4em solid transparent;
    }
    &.position-top:before {
      top: 100%;
      left: 50%;
      border-bottom-width: 0;
      border-top-color: inherit;
      transform: translate(-50%, 0);
    }
    &.position-bottom:before {
      bottom: 100%;
      left: 50%;
      border-bottom-color: inherit;
      transform: translate(-50%, 0);
    }
    &.position-right:before {
      top: 50%;
      right: 100%;
      border-right-color: inherit;
      transform: translate(0, -50%);
    }
    &.position-left:before {
      top: 50%;
      left: 100%;
      border-left-color: inherit;
      transform: translate(0, -50%);
    }
}