.introjs-tooltip-header {
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  background-color: #000;
  padding-bottom: 5px;
}

.introjs-arrow.top,
.introjs-arrow.top-middle {
  border-bottom-color: var(--main-color) !important;
}

.introjs-arrow.right {
  border-left-color: var(--main-color) !important;
}

.introjs-arrow.left {
  border-right-color: var(--main-color) !important;
}

.introjs-button {
  box-shadow: none;
  text-shadow: none;
  font-weight: 600;
}

.introjs-prevbutton,
.introjs-prevbutton:focus,
.introjs-prevbutton:active {
  background-color: #000;
  border: 2px solid #000;
  color: #fff;
}

.introjs-nextbutton,
.introjs-nextbutton:focus,
.introjs-nextbutton:active {
  background-color: var(--main-color);
  border: 2px solid #000;
  color: #000;
}

.introjs-nextbutton:hover {
  background-color: #000;
  border: 2px solid var(--main-color);
  color: #fff;
}

.introjs-prevbutton:hover {
  background-color: #fff;
  border: 2px solid #000;
  color: #000;
}

.introjs-disabled,
.introjs-disabled:focus,
.introjs-disabled:active,
.introjs-disabled:hover {
  background-color: #000000cc;
  border-color: #000000cc;
  color: #ffffffcc;
}

.introjs-tooltip {
  min-width: 300px;
}

.custom-top {
  top: 50px;
}