/* ポップアップ本体 */
.introjs-tooltip {
  background-color: #333333;
  border-radius: 6px;
  box-shadow: 0 1px 10px rgba(0,0,0,.4);
  box-sizing: content-box;
  display: flex;
  min-width: 240px;
  max-width: 240px;
  padding: 24px;
  flex-direction: column;
  align-items: flex-start;
  margin: -6px;
  animation: animationTooltip .2s linear;
}
.dark-mode .introjs-tooltip {
  background-color: #464646;
}
@keyframes animationTooltip {
  0% {
    opacity: .2;
  }
  100% {
    opacity: 1;
  }
}

.introjs-arrow {
  display: none !important;
}

.introjs-tooltip-image {
  width: 100%;
  margin-bottom: 16px;
  border-radius: 3px;
}

.introjs-tooltiptitle {
  color: #FAFAFA !important;
  font-size: 16px;
  line-height: 25px;
  padding-right: 10px; /* adjust for x */
  font-weight: 600;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin-top: 0;
  margin-bottom: 12px;
}
.introjs-tooltiptitle .pill.-beta {
  margin-left: 8px !important;
  color: #333333;
  background-color: #F6A524;
  font-size: 13px;
  height: 18px;
}

.introjs-tooltiptext p {
  margin: 0;
  color: #FAFAFA !important;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0.1px;
}

.introjs-tooltipbuttons {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.introjs-tooltipbuttons .button:focus,
.introjs-tooltipbuttons .button:hover {
  background-color: transparent;
}
.introjs-prevbutton {
  padding: 0 14px 0 8px;
}
.introjs-nextbutton {
  padding: 0 8px 0 14px;
}
.introjs-prevbutton,
.introjs-nextbutton {
  margin-top: 24px !important;
}
.introjs-prevbutton.is_disabled,
.introjs-nextbutton.is_disabled {
  background-color: transparent;
  border-color: transparent;
}
.introjs-prevbutton + .introjs-nextbutton {
  margin-left: 10px;
}

.introjs-skipbutton {
  top: 14px;
  right: 14px;
}

.introjs-skipbutton:after {
  left: 6px;
  top: -1px;
  height: 14px;
}
.introjs-skipbutton:before {
  left: 0px;
  top: 5px;
  width: 14px;
}
.introjs-skipbutton::after,
.introjs-skipbutton::before {
  background-color: #FAFAFA;
}
.introjs-skipbutton:hover:after,
.introjs-skipbutton:hover:before {
  opacity: .6;
}

.introjs-helperNumberLayer {
  display: none !important;
}

/* フォーカスエリア */
.introjs-overlay {
  opacity: 0 !important;
}

.introjs-helperLayer {
  box-shadow: none;
  background-color: transparent;
  border-radius: 6px !important;
  border: solid 2px rgba(246, 165, 36, .8); 
  animation: animationHelperLayer 1s linear infinite alternate;
  transform: translate3d(-2px, -2px, 0); /* border width adjustment */
}

@keyframes animationHelperLayer {
  0% {
    outline: solid 3px rgba(246, 165, 36, 0); 
  }
  100% {
    outline: solid 4px rgba(246, 165, 36, 0.8); 
  }
}

 /* 課題の更新 ポップアップの位置調整 */
.introjs-tooltip.-comment-editor-trigger {
  margin-top: -10px;
}
 /* プロジェクトナビのフォーカスの位置調整 */
.introjs-helperLayer.-project-navi-item {
  transform: translate3d(4px, -2px, 0);
  width: 189px !important;
}
.introjs-helperLayer.-project-navi-item-collapsed { 
  transform: translate3d(4px, -2px, 0);
  width: 39px !important;
}
 /* ガントスウィッチのフォーカスの位置調整 */
 .introjs-helperLayer.-gantt-beta-switch {
  transform: translate3d(-8px, -8px, 0);
  padding: 6px;
}
.introjs-tooltip.-gantt-beta-switch {
  margin-top: -10px;
}
/* @メンションポップアップの調整 */
.introjs-tooltip:has(.introjs-tooltiptitle.-mention-1) {
  margin-left: 340px;
}

/* documentポップアップの調整 */
.introjs-tooltip.-documents {
  transform: translate3d(0px, -45%, 0px);
}
.introjs-tooltip.-documents .introjs-tooltip-image {
  width: 240px;
  height: 156px;
}
.introjs-tooltip.-documents .introjs-tooltiptitle {
  padding-right: 0;
}
.introjs-dismissbutton {
  margin-top: 24px !important;
  color: #FAFAFA;
  padding-top: 2px;
}
.introjs-dismissbutton:hover {
  opacity: 0.6;
  text-decoration: none;
}
.introjs-gotobutton {
  margin-top: 24px !important;
}