.eui-tooltip {
  position: relative;
  display: inline-block;
}

.eui-tooltip .eui-tooltiptext-top {
  visibility: hidden;
  width: 300px;
  background-color: black;
  text-align: left;
  border-radius: 0px;
  padding: 10px;
  position: absolute;
  z-index: 1;
  bottom: 150%;
  left: 50%;
  margin-left: -160px;
  text-justify: auto;
	background: rgba(0, 0, 0, .87);
	color: white;
	border: 0 solid transparent;
	font-size: 12px;
	font-family: 'Lucida Grande', sans-serif;
	font-weight: bold;
	line-height: 16px;
	text-shadow: 0 1px black;
}

.eui-tooltip .eui-tooltiptext-top::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: black transparent transparent transparent;
}

.eui-tooltip .eui-tooltiptext-bottom {
  visibility: hidden;
  width: 300px;
  background-color: black;
  color: #fff;
  text-align: left;
  border-radius: 0px;
  padding: 10px;
  position: absolute;
  z-index: 1;
  top: 150%;
  left: 50%;
  margin-left: -160px;
  text-justify: auto;
	background: rgba(0, 0, 0, .87);
	border: 0 solid transparent;
	font-size: 12px;
	font-family: 'Lucida Grande', sans-serif;
	font-weight: bold;
	line-height: 16px;
	text-shadow: 0 1px black;
}

.eui-tooltip .eui-tooltiptext-bottom::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent black transparent;
}

.eui-tooltip:hover .eui-tooltiptext-top, .eui-tooltip:hover .eui-tooltiptext-bottom {
  visibility: visible;
}

@media (min-width: 313px) and (max-width: 411px) {
  .eui-tooltip .eui-tooltiptext-top, .eui-tooltip .eui-tooltiptext-bottom {
    margin-left: -10px;
  }
}

@media (max-width: 440px) {
  .eui-tooltip .eui-tooltiptext-top, .eui-tooltip .eui-tooltiptext-bottom {
    width: 170px;
  }
}

@media (min-width:441px) and (max-width: 540px) {
  .eui-tooltip .eui-tooltiptext-top, .eui-tooltip .eui-tooltiptext-bottom {
    width: 190px;
  }
}