@media only screen and (min-width: 320px) { /* --------------------------------------Mobile 320px to 479px-------------------------------------- */
  .tooltip {
      position: relative;
      display: inline-block;
      border-bottom: 1px dotted black;
  }
  

  .tooltip .tooltiptext {
      visibility: hidden;
      display: none;
      width: auto;
      background-color: black;
      color: #cdc707;
      text-align: center;
      border-radius: 6px;
      padding: 5px 10px;
      font-size: 14px;

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

  .tooltip:hover .tooltiptext {
      visibility: visible;
      display: none;
  }
}
@media only screen and (min-width:480px){ /* --------------------------------------Mobile 480px to 767px-------------------------------------- */
  .tooltip .tooltiptext {
    display: block;
  }
  .tooltip:hover .tooltiptext {
      visibility: visible;
      display: block;
  }
}
@media only screen and (min-width:768px){ /* --------------------------------------Mobile 768px to 991px-------------------------------------- */

}
@media only screen and (min-width:992px){ /* --------------------------------------Laptop 992px to 1024px-------------------------------------- */
 
}
@media only screen and (min-width:1280px){ /* --------------------------------------Laptop/Desktop 1280px to 1439px-------------------------------------- */
 
}
@media only screen and (min-width:1440px){ /* --------------------------------------Laptop/Desktop 1440px-------------------------------------- */

}