@charset "UTF-8";
@import url('./global.css');

.introjs-tooltipReferenceLayer .introjs-tooltip {
  background-color: rgba(000, 0, 0, 0.5);
  color: #fff;
  /* max-width: 800px; */
}

.introjs-overlay {
  background: -webkit-radial-gradient(
    center,
    ellipse farthest-corner,
    rgba(255, 255, 255, 0.5) 0,
    rgba(255, 255, 255, 0.2) 100%
  );
}

.introjs-tooltipReferenceLayer .introjs-tooltip .introjs-tooltiptext {
  font-size: 16px;
  font-weight: 300;
  font-family: 'Open Sans';
  line-height: 20px;
}

.introjs-tooltipReferenceLayer .introjs-tooltip .introjs-button,
.introjs-tooltipReferenceLayer .introjs-tooltip .introjs-button:hover,
.introjs-tooltipReferenceLayer .introjs-tooltip .introjs-button:focus,
.introjs-tooltipReferenceLayer .introjs-tooltip .introjs-button:active,
.introjs-tooltipReferenceLayer .introjs-tooltip .introjs-disabled,
.introjs-tooltipReferenceLayer .introjs-tooltip .introjs-disabled:focus,
.introjs-tooltipReferenceLayer .introjs-tooltip .introjs-disabled:hover {
  outline: none;
  background-image: none;
  background-color: transparent;
  color: #fff;
  border: 1px solid transparent;
  border-radius: 50px;
  box-shadow: none;
  border-shadow: none;
  text-shadow: none;
}

.introjs-tooltipReferenceLayer .introjs-tooltip .introjs-button:hover,
.introjs-tooltipReferenceLayer .introjs-tooltip .introjs-button:focus,
.introjs-tooltipReferenceLayer .introjs-tooltip .introjs-button:active {
  border: 1px solid #fff;
  background-color: transparent;
}

.introjs-tooltipReferenceLayer .introjs-tooltip .introjs-nextbutton,
.introjs-tooltipReferenceLayer .introjs-tooltip .introjs-nextbutton:active,
.introjs-tooltipReferenceLayer .introjs-tooltip .introjs-nextbutton:focus {
  background-color: var(--primary-color);
  border: none;
}
.introjs-tooltipReferenceLayer .introjs-tooltip .introjs-skipbutton,
.introjs-tooltipReferenceLayer .introjs-tooltip .introjs-skipbutton:active,
.introjs-tooltipReferenceLayer .introjs-tooltip .introjs-skipbutton:focus {
  border: 1px solid var(--primary-color);
}

.introjs-tooltipReferenceLayer .introjs-tooltip .introjs-donebutton,
.introjs-tooltipReferenceLayer .introjs-tooltip .introjs-donebutton:active,
.introjs-tooltipReferenceLayer .introjs-tooltip .introjs-donebutton:focus {
  background-color: var(--primary-color);
  border: none;
}

.introjs-tooltipReferenceLayer .introjs-tooltip .introjs-disabled,
.introjs-tooltipReferenceLayer .introjs-tooltip .introjs-disabled:focus,
.introjs-tooltipReferenceLayer .introjs-tooltip .introjs-disabled:hover {
  color: #ccc;
  border: 1px solid #ccc;
  background-color: transparent;
}

.introjs-tooltipReferenceLayer .introjs-tooltip .introjs-arrow {
  border: 10px solid #fff;
}
.introjs-tooltipReferenceLayer .introjs-tooltip .introjs-arrow.top,
.introjs-tooltipReferenceLayer .introjs-tooltip .introjs-arrow.top-middle,
.introjs-tooltipReferenceLayer .introjs-tooltip .introjs-arrow.top-right {
  border-color: transparent transparent rgba(000, 0, 0, 0.5);
  top: -20px;
  /* left: 20px; */
}
.introjs-tooltipReferenceLayer .introjs-tooltip .introjs-arrow.bottom,
.introjs-tooltipReferenceLayer .introjs-tooltip .introjs-arrow.bottom-middle,
.introjs-tooltipReferenceLayer .introjs-tooltip .introjs-arrow.bottom-right {
  border-color: rgba(000, 0, 0, 0.5) transparent transparent;
  bottom: -20px;
  right: 5;
  /* left: 20px; */
}
.introjs-tooltipReferenceLayer .introjs-tooltip .introjs-arrow.left,
.introjs-tooltipReferenceLayer .introjs-tooltip .introjs-arrow.right {
  top: 10px;
}
.introjs-tooltipReferenceLayer .introjs-tooltip .introjs-arrow.left-bottom,
.introjs-tooltipReferenceLayer .introjs-tooltip .introjs-arrow.right-bottom {
  bottom: 20px;
}

.introjs-tooltipReferenceLayer .introjs-tooltip .introjs-arrow.left,
.introjs-tooltipReferenceLayer .introjs-tooltip .introjs-arrow.left-bottom {
  left: -20px;
  border-color: transparent rgba(000, 0, 0, 0.5) transparent transparent;
}
.introjs-tooltipReferenceLayer .introjs-tooltip .introjs-arrow.right,
.introjs-tooltipReferenceLayer .introjs-tooltip .introjs-arrow.right-bottom {
  right: -20px;
  border-color: transparent transparent transparent rgba(000, 0, 0, 0.5);
}
