.highly-tooltip-top {
  background-color: #6f7376;
  color: white;
  text-align: center;
  padding: 5px;
  border-radius: 6px;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  /* Position the tooltip text - see examples below! */
  position: absolute;
  z-index: 10000 !important;

  line-height: normal;
}

/* Tooltip text */
.highly-tooltip-bottom {
  background-color: #6f7376;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  color: white;
  text-align: center;
  padding: 5px;
  border-radius: 6px;

  /* Position the tooltip text - see examples below! */
  position: absolute;
  z-index: 10000 !important;

  line-height: normal;
}

.highly-tooltip-top::after {
  content: " ";
  position: absolute;
  top: 95%; /* At the bottom of the tooltip */
  left: 50%;
  margin-left: -10px;
  border-width: 10px;
  border-style: solid;
  border-color: #6f7376 transparent transparent transparent;
}

.highly-tooltip-bottom::after {
  content: " ";
  position: absolute;
  bottom: 95%; /* At the top of the tooltip */
  left: 50%;
  margin-left: -10px;
  border-width: 10px;
  border-style: solid;
  border-color: transparent transparent #6f7376 transparent;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
}

.highly-tooltip-pointer-left:after {
  left: 5% !important;
}

.highly-tooltip-pointer-right:after {
  left: 95% !important;
}

.highly-tooltip-pointer-center:after {
  left: 50% !important;
}

.highly-tooltip .icon-highly {
  border-right: 0.5px black;
  margin-right: 7px;
  border-bottom: none;
  width: 30px;
  display: inline-flex;
  cursor: pointer;
  padding: 3px !important;
  width: 28px !important;
  box-sizing: border-box !important;
}

.highly-tooltip .last-icon {
  margin-right: 0 !important;
}

.highly-facebook:hover {
  fill: rgba(24, 119, 242, 0.2) !important;
}

.highly-linkedin:hover {
  fill: rgba(40, 103, 178, 0.2) !important;
}

.highly-twitter:hover {
  fill: rgba(29, 161, 242, 0.2) !important;
}

.highly-pen:hover {
  fill: #66ccff !important;
}

.highly-pen:hover + .highly-tooltiptext {
  visibility: visible;
}

.highly-saved-highlight {
  cursor: pointer;
}

.highly-tooltiptext {
  visibility: hidden;
  width: auto;
  bottom: 120%;
  left: 50%;
  margin-left: -40px; /* Use half of the width (120/2 = 60), to center the tooltip */
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 10px;
  font-size: 12px;
  white-space: nowrap;
  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  border-radius: 100px;
  font-family: sans-serif !important;
}

.save-highlight .highly-tooltiptext {
  left: 12% !important;
}

.highly-linkedin:hover + .highly-tooltiptext {
  visibility: visible;
  left: 80% !important;
}

.highly-facebook:hover + .highly-tooltiptext {
  visibility: visible;
  left: 25% !important;
}

.highly-twitter:hover + .highly-tooltiptext {
  visibility: visible;
}