.customTooltip * {
  pointer-events: all;
  user-select: none;
}

.introjs-tooltip {
 font-family: IMMORTAL, arial, sans-serif;
 font-size: 20px;
 min-width: 400px;
 margin-left: -175px;
 color: white;
 background-color: #10131dcc;
 border: 2px solid black;
}

.introjs-tooltiptext {
 font-family: IMMORTAL, arial, sans-serif;
 color: white;
}

@media (max-height: 499px) {
  .introjs-tooltiptext {
    max-height: 150px;
    overflow-y: auto;
  }
}

@media (min-height: 500px) and (max-height:549px) {
  .introjs-tooltiptext {
    max-height: 200px;
    overflow-y: auto;
  }
}

@media (min-height: 550px) and (max-height:650px) {
  .introjs-tooltiptext {
    max-height: 250px;
    overflow-y: auto;
  }
}

.introjs-tooltiptext > b {
 font-family: IMMORTAL, arial, sans-serif;
 color: #ffc107;
}

.introjs-tooltip-title {
 font-size: 22px;
 font-family: IMMORTAL, arial, sans-serif;
 color: white;
}

.introjs-tooltipbuttons * {
 font-family: IMMORTAL, arial, sans-serif;
 color: white;
 background-color: #10131dcc;
 border: 2px solid black;
 text-shadow: unset;
 font-weight: bold;
 font-size: 18px;
}

.introjs-button:hover, .introjs-button:focus, .introjs-button:active{
    outline: none;
    text-decoration: none;
    border-color: unset;
    background-color: unset;
    color: white;
    text-shadow: unset;
    box-shadow: none;
}