/* tooltip is used to show text by hover */

/* common      ----------------------------- */

.tooltip 
{
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}


/* tooltiptext1  ----------------------------- */

.tooltip .tooltiptext1 
{
  visibility: hidden;
  width: 530px;
  background-color: white;
  color: purple;
  text-align: left; 
  text-align: center;
  border-radius: 30px;
  padding: 10px 15px;

  /* Position the tooltip */
  position: absolute;
  z-index: 1;

  bottom: 150%;
  left: 50%;
  margin-left: -200px; /* Start Horizontal Position Of Area Text */
}

.tooltip:hover .tooltiptext1 
{
  visibility: visible;
}

.tooltip .tooltiptext1::after 
{
  content: "";
  position: absolute;
  top: 100%;
  left: 34%; /* Angle Horizontal Position */
  margin-left: -5px;
  border-width: 10px;
  border-style: dotted;
  border-style: solid;
  border-color: black transparent transparent transparent;
  border-color: white transparent transparent transparent;
}

/* tooltiptext2  ----------------------------- */

.tooltip .tooltiptext2 
{
  visibility: hidden;
  width: 520px;
  text-align: left; 
  text-align: center;
  border-radius: 30px;
  padding: 10px 15px;

  /* Position the tooltip */
  position: absolute;
  z-index: 1;

  bottom: 150%;
  left: -70%;
  margin-left: -200px;
}

.tooltip:hover .tooltiptext2
{
  visibility: visible;
  background-color: white;
  color: turquoise;
  color: orange;
  color: purple; 
 /* color: #336699;  Violet Variation */
}

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

/* tooltiptext3  ----------------------------- */

.tooltip .tooltiptext3 
{
  visibility: hidden;
  width: 460px;
  text-align: center;
  text-align: left; 
  text-align: center;
  border-radius: 30px;
  padding: 10px 15px;

  /* Position the tooltip */
  position: absolute;
  z-index: 1;

  bottom: 150%;
  left: -220%;
  margin-left: -170px;
}

.tooltip:hover .tooltiptext3
{
  visibility: visible;
  background-color: white;
  color: turquoise;
  color: orange;
  color: purple; 
 /* color: #336699;  Violet Variation */
}

.tooltip .tooltiptext3::after 
{
  content: "";
  position: absolute;
  top: 100%;
  left: 65%;
  margin-left: -5px;
  border-width: 10px;
  border-style: solid;
  border-color: black transparent transparent transparent;
  border-color: white transparent transparent transparent;
}