/* CKEditor Bootstrap Tabs, aligned with the JKPTG tab pattern. */
.bootstrap-tabs {
  width: 100%;
  margin-block: 24px;
  color: var(--jkptg-text-primary, #00122a);
  font-family: var(--jkptg-font-family-title, Inter, sans-serif);
}

.bootstrap-tabs > .nav-tabs {
  position: relative;
  display: flex;
  width: 100%;
  margin: 0;
  padding: 0;
  gap: 20px;
  align-items: flex-end;
  overflow-x: auto;
  overflow-y: hidden;
  border: 0;
  border-bottom: 1px solid var(--jkptg-border-neutral-on-light-20, rgb(0 0 0 / 20%));
  scrollbar-width: thin;
}

.bootstrap-tabs > .nav-tabs::after {
  display: none;
}

.bootstrap-tabs > .nav-tabs > li {
  position: relative;
  display: block;
  margin: 0;
  flex: 0 0 auto;
  float: none;
  background: transparent;
}

.bootstrap-tabs > .nav-tabs > li > .tab-link {
  position: relative;
  display: flex;
  min-height: 45px;
  margin: 0;
  padding: 8px 0 14px;
  align-items: center;
  justify-content: center;
  color: var(--jkptg-text-secondary, #3d3d3d);
  font: 400 18px / 1.2 var(--jkptg-font-family-title, Inter, sans-serif);
  text-decoration: none;
  white-space: nowrap;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.bootstrap-tabs > .nav-tabs > li > .tab-link:hover,
.bootstrap-tabs > .nav-tabs > li > .tab-link:focus-visible {
  color: var(--jkptg-text-action-hover, #027fbd);
  text-decoration: none;
  background: transparent;
  border: 0;
}

.bootstrap-tabs > .nav-tabs > li > .tab-link:focus-visible {
  outline: 2px solid var(--jkptg-border-action-press, #026ca3);
  outline-offset: -2px;
}

.bootstrap-tabs > .nav-tabs > li.active,
.bootstrap-tabs > .nav-tabs > li.active:hover,
.bootstrap-tabs > .nav-tabs > li.active:focus {
  background: transparent;
}

.bootstrap-tabs > .nav-tabs > li.active > .tab-link,
.bootstrap-tabs > .nav-tabs > li.active > .tab-link:hover,
.bootstrap-tabs > .nav-tabs > li.active > .tab-link:focus {
  color: var(--jkptg-text-action-press, #026ca3);
  font-weight: 600;
  cursor: default;
  background: transparent;
  border: 0;
}

.bootstrap-tabs > .nav-tabs > li.active::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  z-index: 1;
  height: 8px;
  background: var(--jkptg-border-action-press, #026ca3);
  border-radius: var(--jkptg-radius-full, 999px);
  content: '';
}

.bootstrap-tabs > .tab-content {
  clear: both;
}

.bootstrap-tabs > .tab-content > .tab-pane.active {
  padding: 28px 0 0;
  color: var(--jkptg-text-primary, #00122a);
  background: transparent;
  border: 0;
}

.bootstrap-tabs > .tab-content > .tab-pane > .tab-pane-content {
  min-height: 0;
}

.bootstrap-tabs > .tab-content > .tab-pane > .tab-pane-content > :first-child {
  margin-top: 0;
}

.bootstrap-tabs > .tab-content > .tab-pane > .tab-pane-content > :last-child {
  margin-bottom: 0;
}

@media (max-width: 767.98px) {
  .bootstrap-tabs {
    box-sizing: border-box;
    margin-block: 20px;
    padding-inline: var(--jkptg-layout-content-gutter, 12px);
  }

  .bootstrap-tabs > .nav-tabs {
    gap: 16px;
  }

  .bootstrap-tabs > .nav-tabs > li > .tab-link {
    min-height: 42px;
    padding-bottom: 12px;
    font-size: 16px;
  }

  .bootstrap-tabs > .tab-content > .tab-pane.active {
    padding-top: 20px;
  }
}