/* 
outline: none;
border-bottom: 1px dotted black;
*/

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

.tooltip .tooltiptext {
  visibility: hidden;
  width: auto;
  background-color: black;
  color: #fff;
  text-align: left;
  border-radius: 6px;
  padding: 5px 0;

  /* Position the tooltip */
  position: absolute;
  z-index: 9999;
  bottom: 100%;
  left: 50%;
  margin-left: -60px;
}

.tooltip:hover .tooltiptext,
.tooltip:focus-within .tooltip {
  visibility: visible;
}


.degrees-tooltip {
  position: relative;
  display: inline-block;
  width: 100%;
  border-bottom: none;
  text-decoration: underline;
  color: blue;
}

.degrees-tooltip .degrees-tooltiptext {
  visibility: hidden;
  width: 250px;
  max-height: 300px;
  /* Set a max height */
  background-color: black;
  color: #fff;
  text-align: left;
  border-radius: 6px;
  padding: 2em;

  /* Position the tooltip */
  position: absolute;
  z-index: 9999;
  bottom: 100%;
  left: 50%;
  margin-left: -50%;

  overflow-y: auto;
  /* Enable vertical scrolling */
  overflow-x: hidden;
  /* Prevent horizontal scrolling */
  opacity: 0.75 ;
}

.degrees-tooltiptext .degrees-tooltiptext-link {
  float: left;
  clear: both;
}

/*
  margin-left: -60px;
*/
.degrees-tooltip:hover .degrees-tooltiptext,
.degrees-tooltip:focus-within .degrees-tooltip {
  visibility: visible;
}