/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */
html {
  line-height: 1.15;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  background: #FFFFFF !important;
}

/* ===== JESSI Portal Layout (Different from classic OJS) ===== */
.jessi-portal {
  --ink: #0b1220;
  --muted: #3b455a;
  --bg: #ffffff;
  --panel: #f6f8fc;
  --line: rgba(11, 18, 32, .12);
  --shadow: 0 18px 55px rgba(11, 18, 32, .12);
  --radius: 22px;

  --navy: #0f1e3a;
  --navy2: #478b8c;
  --accent: #000000;
  --accent2: #4aa3ff;

  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
  color: var(--ink);
}

/* Normal container */
.jp-wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 14px 12px 0px;
}

/* Break out ONLY to the OJS container width (more visually centered) */
.jp-breakout {
  /*
  margin-left: -24px;     
  margin-right: -24px;    
  */
  padding-left: 0;
  padding-right: 0;
}

.jp-heroShell {
  max-width: 1180px;
  margin: 0 auto;
}

.jp-breakout .jp-wrap {
  padding-left: 0;
  padding-right: 0;
}

/* If your theme clips overflow, uncomment these (depends on theme) */
/*
.pkp_structure_main,
.pkp_structure_content,
.pkp_structure_main::before,
.pkp_structure_main::after{
  overflow: visible !important;
}
*/

/* HERO */
.jp-hero {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: none;
  /* changed: remove “card” feel (optional) */
  background: none;
  /* changed: no bg */
}

/* changed: remove background hero image (true "no background") */
.jp-hero>img {
  display: none;
}

/* changed: remove overlay */
.jp-hero::after {
  content: none;
}

.jp-heroContent {
  position: relative;
  /* changed: was absolute; now content sits naturally */
  inset: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* changed: give cover more room */
  gap: 16px;
  align-items: center;
  padding: 18px 18px;
}

.jp-heroContent p {
  text-align: justify;
}

/* changed: text becomes colored */
.jp-title {
  z-index: 1;
  color: var(--navy);
}

.jp-title h1 {
  margin: 0 0 10px;
  margin-bottom: 10px !important;
  font-size: clamp(20px, 1.9vw + 10px, 34px);
  line-height: 1.12;
  letter-spacing: .15px;
}

.jp-title p {
  margin: 0 0 16px;
  margin-top: 10px !important;
  max-width: 680px;
  color: var(--muted);
  /* changed */
  line-height: 1.6;
  font-size: 14px;
}

.jp-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* changed: buttons become colored-on-transparent */
.jp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 11px 15px;
  border-radius: 14px;
  text-decoration: none;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .2px;
  border: 1px solid #478b8c;
  /* changed */
  color: var(--navy);
  /* changed */
  background: transparent;
  /* changed */
  backdrop-filter: none;
  /* changed */
}

/* ===== Primary CTA: subtle looping animation (not flashy) ===== */
.jp-btn.primary {
  position: relative;
  overflow: hidden;
  /* needed for the sheen */
  border: none;
  color: #FFFFFF;

  /* Gradient derived from #478b8c */
  background: linear-gradient(135deg,
      #2b5f60 0%,
      #3e7f80 25%,
      #478b8c 50%,
      #5aa6a7 75%,
      #7fc9ca 100%);

  background-size: 260% 260%;
  animation: jp-gradientFlow 6.5s ease-in-out infinite;

  /* gentle depth */
  box-shadow:
    5px 10px 26px rgba(61, 46, 38, 0.685),
    0 2px 0 rgba(255, 255, 255, .08) inset;

  transform: translateZ(0);
  /* helps smooth animation */
}

/* subtle “sheen” sweep across the button */
.jp-btn.primary::after {
  content: "";
  position: absolute;
  inset: -40% -60%;
  background: linear-gradient(120deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, .22) 48%,
      rgba(255, 255, 255, 0) 100%);
  transform: translateX(-55%) rotate(12deg);
  animation: jp-sheen 4.8s ease-in-out infinite;
  pointer-events: none;
  mix-blend-mode: soft-light;
  /* classy shine */
}

/* on hover: slightly more “alive” */
.jp-btn.primary:hover {
  color: #2f6f6f;
  filter: brightness(1.05);
  transform: translateY(-1px);
  box-shadow:
    5px 14px 34px #8951305e,
    0 2px 0 rgba(255, 255, 255, .10) inset;
}

/* Keyframes */
@keyframes jp-gradientFlow {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

@keyframes jp-sheen {

  0%,
  55% {
    opacity: 0;
    transform: translateX(-60%) rotate(12deg);
  }

  65% {
    opacity: .55;
  }

  85% {
    opacity: 0;
    transform: translateX(60%) rotate(12deg);
  }

  100% {
    opacity: 0;
    transform: translateX(60%) rotate(12deg);
  }
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {

  .jp-btn.primary,
  .jp-btn.primary::after {
    animation: none !important;
  }
}

/* ===== Accent injection (#478b8c) for the Aims & Scope + Journal Info area ===== */
.jessi-portal {
  --primary: #478b8c;
}

/* Big section cards: thin accent bar on top + softer border */
.jessi-portal .jp-section {
  border-color: rgba(71, 139, 140, .14);
}

.jessi-portal .jp-section .head {
  border-bottom-color: rgba(71, 139, 140, .10);
}

.jessi-portal .jp-section .head::before {
  content: "";
  display: block;
  height: 3px;
  width: 56px;
  /* small accent, not full width */
  border-radius: 999px;
  background: var(--primary);
  margin-right: 10px;
}

/* Make the title slightly pick up the brand color */
.jessi-portal .jp-section .head h2 {
  color: var(--navy);
}

/* Meta cards (right side): subtle left accent stripe */
.jessi-portal .jp-item {
  position: relative;
  border-color: rgba(71, 139, 140, .14);
  background: rgba(71, 139, 140, .03);
}

.jessi-portal .jp-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 4px;
  border-radius: 999px;
  background: #478b8c
    /* lebih lembut */
  ;
}

/* Label (k): a hint of brand */
.jessi-portal .jp-item .k {
  color: #478b8c;
}

/* Links: use brand color */
.jessi-portal .jp-item .v a {
  color: var(--primary);
  border-bottom-color: rgba(71, 139, 140, .35);
}

.jessi-portal .jp-item .v a:hover {
  border-bottom-color: rgba(71, 139, 140, .70);
}

/* ===== Hover lift + brand accent for stats items ===== */
.jessi-portal {
  --primary: #478b8c;
}

.jp-stat {
  position: relative;
  transition:
    transform .22s ease,
    box-shadow .22s ease,
    border-color .22s ease,
    background-color .22s ease;
  will-change: transform;
}

/* optional: tiny accent line (appears on hover) */
.jp-stat::before {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  top: 10px;
  height: 3px;
  border-radius: 999px;
  background: var(--primary);
  opacity: 0;
  transform: scaleX(.6);
  transition: opacity .22s ease, transform .22s ease;
}

/* Hover effect (JoSPA theme: primary = #478b8c) */
.jp-stat:hover {
  transform: translateY(-6px);
  border-color: var(--primary);
  background: rgba(71, 139, 140, .06);
  /* soft primary tint */
  box-shadow:
    0 18px 48px rgba(11, 18, 32, .14),
    0 10px 24px rgba(71, 139, 140, .18);
  /* primary-tinted glow */
}

.jp-stat:hover::before {
  opacity: 1;
  transform: scaleX(1);
}

/* Text color shifts (subtle) */
.jp-stat:hover .k {
  color: rgba(71, 139, 140, .92);
  /* primary-ish */
}

.jp-stat:hover .v {
  color: var(--ink);
  /* keep readable */
}

/* Links inside stat become brand-colored */
.jp-stat:hover a {
  color: var(--primary);
  border-bottom-color: rgba(71, 139, 140, .55);
}

/* Accessibility: keyboard focus also triggers the effect */
.jp-stat:focus-within {
  transform: translateY(-6px);
  border-color: var(--primary);
  background: rgba(71, 139, 140, .06);
  box-shadow:
    0 18px 48px rgba(11, 18, 32, .14),
    0 10px 24px rgba(71, 139, 140, .18);
}

/* Respect reduced-motion users */
@media (prefers-reduced-motion: reduce) {

  .jp-stat,
  .jp-stat::before {
    transition: none !important;
  }

  .jp-stat:hover {
    transform: none;
  }
}



/* ===== Compact OJS Publication Timeline (CSS ONLY) ===== */
:root {
  --primary: #66c899;
  --ink: #0b1220;
  --muted: #5b6474;
  --border: rgba(11, 18, 32, .10);
  --radius: 16px;
}

/* apply Montserrat to timeline block */
.jp-timeline,
.jp-timeline * {
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif !important;
}

.jp-timeline {
  border-radius: 18px;
  background: #fff;
  overflow: hidden;
  padding: 14px;
}

/* header */
.jp-tl-head h2 {
  margin: 0;
  font-size: 16px;
  letter-spacing: .15px;
}

.jp-tl-head p {
  margin: 6px 6px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
  max-width: 100ch;
}

.jp-tl-head {
  display: flex;
  align-items: baseline;
  /* aligns with H2 text */
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}

.jp-tl-head h2 {
  margin: 0;
}

.jp-tl-link {
  text-decoration: none;
  background: none;
  border: none;
  padding: 0;
  margin: 0;

  font-size: 12px;
  font-weight: 800;
  color: var(--primary);
  white-space: nowrap;

  display: inline-flex;
  align-items: center;
  gap: 6px;

  opacity: .92;
  transition: opacity .18s ease, transform .18s ease;
}

.jp-tl-link span {
  transition: transform .18s ease;
}

.jp-tl-link:hover {
  opacity: 1;
  transform: translateY(-1px);
}

.jp-tl-link:hover span {
  transform: translateX(3px);
}

.jp-tl-sub {
  margin: 0 !important;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.6;
}


/* stepper spacing */
.jp-stepper {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
  /* tighter vertical rhythm */
}

.jp-step {
  display: grid;
  grid-template-columns: 34px 1fr;
  /* smaller dot column */
  gap: 10px;
  align-items: start;
  position: relative;
}

/* vertical connector line */
.jp-step::after {
  content: "";
  position: absolute;
  left: 17px;
  top: 34px;
  bottom: -10px;
  width: 2px;
  background: rgba(71, 139, 140, .20);
}

.jp-step:last-child::after {
  display: none;
}

/* number dot */
.jp-stepDot {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 11px;
  color: var(--primary);
  background: rgba(71, 139, 140, .10);
  border: 1px solid rgba(71, 139, 140, .28);
}

/* compact card */
.jp-stepCard {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: 0 8px 18px rgba(11, 18, 32, .04);
  padding: 10px 12px 9px;
  /* reduced height */
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease;
}

/* title row */
.jp-stepTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
}

.jp-stepTop h3 {
  margin: 0 !important;
  margin-top: 10px !important;
  font-size: 13.5px;
  line-height: 1.2;
  color: var(--ink);
  font-weight: 800;
}

/* pill */
.jp-stepPill {
  font-size: 10.5px;
  font-weight: 800;
  color: var(--primary);
  background: rgba(71, 139, 140, .10);
  border: 1px solid rgba(71, 139, 140, .24);
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
  line-height: 1;
}

.jp-stepPill--done {
  color: #000;
  background: rgba(0, 0, 0, .06);
  border-color: rgba(0, 0, 0, .12);
}

/* list tight */
.jp-stepCard ul {
  margin: 6px 0 0;
  padding-left: 16px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.jp-stepCard li {
  margin: 1px 0;
  /* tighter bullets */
}

/* hover */
.jp-stepCard:hover {
  transform: translateY(-3px);
  border-color: rgba(71, 139, 140, .55);
  background: rgba(71, 139, 140, .04);
  box-shadow: 0 14px 34px rgba(11, 18, 32, .10), 0 10px 22px rgba(71, 139, 140, .12);
}

/* very narrow */
@media (max-width: 420px) {
  .jp-timeline {
    padding: 12px;
  }

  .jp-step {
    grid-template-columns: 30px 1fr;
  }

  .jp-stepDot {
    width: 30px;
    height: 30px;
    font-size: 10.5px;
  }

  .jp-step::after {
    left: 15px;
    top: 30px;
  }
}




/* ===== Timeline: apply modern fonts + primary-colored Stage badges ===== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@500;600;700&display=swap');

.jessi-portal {
  --primary: #478b8c;
}

/* Fonts for this section */
.jessi-portal .jp-timeline {
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Force Montserrat + better rendering for the whole timeline */
.jp-timeline,
.jp-timeline *,
.jp-stepper,
.jp-stepper * {
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}


strong {
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.jp-sideNav .jp-sideGroup h4 {
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.jp-sideNav .jp-sideGroup a {
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.jp-sideCard.jp-toolsBlock {
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.jp-sideCard.jp-visitorBlock {
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.jp-issnCard {
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.jp-issnCard strong {
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.ojsTextCard h3 {
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.ojsTextCard p {
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.jessi-portal .jp-timeline h2,
.jessi-portal .jp-tl-card h3 {
  font-family: "Poppins", "Inter", system-ui, sans-serif !important;
  font-weight: 650;
}

.jessi-portal .jp-timeline p,
.jessi-portal .jp-tl-card p,
.jessi-portal .jp-tl-meta,
.jessi-portal .jp-tl-meta strong {
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif !important;
}

/* Stage badge: primary text (not white), outlined chip */
.jessi-portal .jp-tl-badge {
  color: var(--primary) !important;
  background: rgba(71, 139, 140, .06) !important;
  border: 1px solid rgba(71, 139, 140, .28) !important;
  box-shadow: 0 10px 22px rgba(71, 139, 140, .10) !important;
  font-family: "Poppins", "Inter", system-ui, sans-serif !important;
  font-weight: 700 !important;
}

/* Optional: make Stage badge feel a bit more “clickable” on hover */
.jessi-portal .jp-tl-card:hover .jp-tl-badge {
  background: rgba(71, 139, 140, .10) !important;
  border-color: rgba(71, 139, 140, .40) !important;
}

/* Keep the “Typical” pill consistent with the new badge styling */
.jessi-portal .jp-tl-meta .pill {
  color: #478b8c !important;
  border-color: #478b8c !important;
  background: #478b8c3f !important;
  font-family: "Poppins", "Inter", system-ui, sans-serif !important;
  font-weight: 650 !important;
}


.jp-btn:hover {
  color: #478b8c;
  transform: translateY(-1px);
}

.jp-btn:active {
  transform: translateY(0);
}

/* Floating cover inside hero */
.jp-coverFloat {
  z-index: 1;
  justify-self: end;
  width: min(520px, 100%);
  /* changed: bigger */
  border-radius: 18px;
  overflow: visible;
  /* changed */
  border: none;
  /* changed */
  background: none;
  /* changed: remove glass bg */
  box-shadow: none;
  /* changed: remove shadow (optional) */
}

.jp-coverFloat img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  background: transparent;
}

/* STATS STRIP */
.jp-stats {
  margin-top: 14px;
  background: rgba(71, 139, 140, .10);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 10px 10px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.jp-stat {
  background: #fff;
  border: 1px solid rgba(11, 18, 32, .10);
  border-radius: 16px;
  padding: 10px 12px;
  min-height: 60px;
}

.jp-stat .k {
  font-size: 12px;
  color: rgba(11, 18, 32, .62);
  font-weight: 800;
  letter-spacing: .2px;
  margin-bottom: 4px;
}

.jp-stat .v {
  font-size: 13px;
  color: var(--ink);
  font-weight: 800;
  line-height: 1.25;
}

.jp-stat a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px dotted rgba(11, 18, 32, .45);
}

.jp-stat a:hover {
  border-bottom-style: solid;
}

/* BODY GRID */
.jp-body {
  margin-top: 16px;
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  gap: 16px;
  align-items: start;
}

.jp-section {
  border-radius: 18px;
  background: #fff;
  border: 1px solid rgba(11, 18, 32, .10);
  overflow: hidden;
}

.jp-section .head {
  padding: 14px 16px;
  border-bottom: 1px solid rgba(11, 18, 32, .08);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.jp-section .head h2 {
  margin: 0;
  font-size: 15px;
  letter-spacing: .2px;
}

.jp-section .body {
  padding: 14px 16px 16px;
  color: var(--muted);
  line-height: 1.75;
  font-size: 14px;
  text-align: justify;
}

/* Meta list on right */
.jp-meta {
  padding: 12px 16px 16px;
  display: grid;
  gap: 10px;
}

.jp-item {
  border: 1px dashed rgba(11, 18, 32, .16);
  border-radius: 16px;
  padding: 10px 12px;
  background: rgba(11, 18, 32, .03);
}

.jp-item .k {
  font-size: 12px;
  color: rgba(11, 18, 32, .62);
  font-weight: 900;
  margin-bottom: 4px;
}

.jp-item .v {
  font-size: 13px;
  font-weight: 900;
  color: var(--ink);
  line-height: 1.35;
}

@media (max-width: 980px) {

  /* changed: since hero image is hidden, no need for height rules */
  .jp-heroContent {
    grid-template-columns: 1fr;
    align-items: start;
    padding: 14px;
  }

  .jp-coverFloat {
    justify-self: start;
    width: min(560px, 100%);
    /* keep big on mobile too */
  }

  .jp-stats {
    grid-template-columns: 1fr 1fr;
  }

  .jp-body {
    grid-template-columns: 1fr;
  }
}

/* jp-item: ready for stripe + hover animation */
.jp-item {
  position: relative;
  overflow: hidden;
  /* keeps stripe neatly inside rounded corners */
  transition: transform .22s ease, box-shadow .22s ease, background-color .22s ease, border-color .22s ease;
}

/* LEFT VERTICAL ACCENT STRIPE (visible by default) */
.jp-item::before {
  content: "";
  position: absolute;
  left: 10px;
  /* distance from left edge (tweak) */
  top: 14px;
  /* padding from top */
  bottom: 14px;
  /* padding from bottom */
  width: 4px;
  /* stripe thickness */
  border-radius: 999px;
  background: var(--primary);

  opacity: 1;
  /* visible by default */
  transform: scaleY(1);
  transform-origin: center;
  transition: opacity .22s ease, transform .22s ease;
  pointer-events: none;
}

/* Hover/focus: stripe VANISHES */
.jp-item:hover::before,
.jp-item:focus-within::before {
  opacity: 0;
  transform: scaleY(.6);
}

/* Hover effect (JoSPA theme) */
.jp-item:hover,
.jp-item:focus-within {
  transform: translateY(-6px);
  border-color: var(--primary);
  background: rgba(71, 139, 140, .06);
  box-shadow:
    0 18px 48px rgba(11, 18, 32, .14),
    0 10px 24px rgba(71, 139, 140, .18);
}

/* Links inside item become brand-colored */
.jp-item:hover a {
  color: var(--primary);
  border-bottom-color: rgba(71, 139, 140, .55);
}


/* ===== TYPOGRAPHY UPGRADE (Inter + Poppins) ===== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@500;600;700&display=swap');

.jessi-portal {
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Titles / headings use Poppins for a crisp modern feel */
.jessi-portal .jp-title h1,
.jessi-portal .jp-section .head h2 {
  font-family: "Poppins", "Inter", system-ui, sans-serif !important;
  font-weight: 650;
  /* modern semi-bold */
}

/* Paragraphs: more readable */
.jessi-portal .jp-title p,
.jessi-portal .jp-section .body {
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif !important;
  font-weight: 450;
}

/* Buttons: modern, not overly heavy */
.jessi-portal .jp-btn {
  font-family: "Poppins", "Inter", system-ui, sans-serif !important;
  font-weight: 600;
  /* was 800 */
  letter-spacing: .15px;
  /* slightly tighter */
}

/* Stats strip: reduce “shouty bold” */
.jessi-portal .jp-stat .k {
  font-family: "Poppins", "Inter", system-ui, sans-serif !important;
  font-weight: 600;
  /* was 800 */
  letter-spacing: .18px;
}

.jessi-portal .jp-stat .v a {
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif !important;
  font-weight: 650;
  /* was 800 */
}

.jessi-portal .jp-stat .v {
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif !important;
  font-weight: 650;
  /* was 800 */
}

/* Right meta cards: THIS is the block in your screenshot */
.jessi-portal .jp-item .k {
  font-family: "Poppins", "Inter", system-ui, sans-serif !important;
  font-weight: 600;
  /* was 900 */
  letter-spacing: .18px;
  text-transform: none;
  /* keep clean */
}

.jessi-portal .jp-item .v {
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif !important;
  font-weight: 650;
  /* was 900 */
  letter-spacing: .05px;
}

/* Optional: make the dashed card feel more premium */
.jessi-portal .jp-item {
  border-style: solid;
  /* instead of dashed */
  border-color: rgba(11, 18, 32, .12);
  background: rgba(11, 18, 32, .02);
}



/* 60% centered divider between the two sections inside jp-body */
.jp-hero {
  position: relative;
  /* anchor for the divider */
}

/* The horizontal line */
/*
.jp-hero::after{
  content: "";
  display: block;
  width: min(60%, 520px);         /* 60% but capped so it looks neat 
  height: 1px;
  margin: 18px auto 0;            /* centered 
  background: rgba(11,18,32,.14); /* match your soft line style 
  border-radius: 999px;
}
*/
/* Place the line between article and aside (for desktop grid) */
@media (min-width: 900px) {
  .jp-hero {
    display: grid;
    /* only if you already use grid; harmless if already set */
  }

  .jp-hero::after {
    grid-column: 1 / -1;
    /* spans grid, but the line itself is only 60% wide */
    grid-row: 2;
    /* line sits between row 1 (article+aside) and next content */
    margin: 6px auto;
    /* tighten spacing on desktop */
  }

  /* Ensure article+aside are on row 1 */
  .jp-hero>.jp-section {
    grid-row: 1;
  }
}

/* TAGS / CHIPS above title */
.jp-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.jp-tag {
  display: inline-flex;
  align-items: center;
  padding: 7px 12px;
  border-radius: 999px;
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif !important;
  font-weight: 450;

  font-size: 12px;
  font-weight: 700;
  letter-spacing: .2px;

  border: 1.5px solid #478b8c;
  color: #000000;
  background: rgba(71, 139, 140, .10);
  /* primary tint */

  transition: background-color .18s ease,
    color .18s ease,
    border-color .18s ease,
    transform .18s ease,
    box-shadow .18s ease;
  line-height: 1;
  white-space: nowrap;

}

/* optional: subtle hover */
.jp-tag:hover {
  background: #478b8c;
  color: #ffffff;
  border-color: #478b8c;
  transform: translateY(-1px);
  box-shadow: 0 10px 24px #8951305e;
}

@media (max-width: 680px) {
  .jp-tags {
    gap: 8px;
  }

  .jp-tag {
    font-size: 11.5px;
    padding: 6px 10px;
  }
}


/* ===== FOOTER (inspired layout, with map) ===== */
.jessi-portal {
  --primary: #478b8c;
}

.jp-footer {
  margin-top: 26px;
}

/* CTA band */
.jp-footerCta {
  background:
    radial-gradient(1200px 420px at 20% 10%, rgba(71, 139, 140, .25), rgba(71, 139, 140, 0) 60%),
    radial-gradient(900px 380px at 80% 20%, rgba(71, 139, 140, .18), rgba(71, 139, 140, 0) 62%),
    #478b8c !important;
  border-radius: 22px;
  border: 1px solid rgba(71, 139, 140, .16);
  padding: 16px;
}


.jp-footerCta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 14px;
  border-radius: 18px;
  background: rgba(7, 1, 44, 0.1);
}

.jp-footerCta-text h3 {
  margin: 0 0 6px;
  font-size: 20px;
  line-height: 1.2;
  color: var(--ink);
  font-family: "Poppins", "Inter", system-ui, sans-serif;
  font-weight: 650;
}

.jp-footerCta-text p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
  font-size: 13.5px;
}

.jp-footerCta-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.jp-footerBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 14px;
  border-radius: 14px;
  text-decoration: none;
  font-weight: 650;
  font-size: 13px;
  border: 1px solid white;
  color: white;
  background: none;
  transition: transform .22s ease, box-shadow .22s ease, filter .22s ease;
}

.jp-footerBtn.primary {
  background: var(--primary);
  color: #fff;
  border-color: rgb(60, 64, 72);
  box-shadow: 0 14px 34px #8951305e;
}

.jp-footerBtn:hover {
  color: white;
  transform: translateY(-3px);
  box-shadow: #478b8c;
}

/* Main footer */
.jp-footerMain {
  margin-top: 14px;
  border-radius: 22px;
  background: #000000;
  color: #fff;
  padding: 18px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: 0 22px 65px rgba(11, 18, 32, .18);
}

.jp-footerGrid {
  display: grid;
  grid-template-columns: 1.2fr .8fr 1fr 1.1fr;
  /* includes map */
  gap: 16px;
  align-items: start;
}

/* Column headings */
.jp-footerMain h4 {
  margin: 2px 0 10px;
  font-size: 13px;
  letter-spacing: .2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .85);
  font-weight: 750;
  font-family: "Poppins", "Inter", system-ui, sans-serif;
}

/* Brand block */
.jp-footBrand {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 10px;
}

.jp-footMark {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  letter-spacing: .5px;
}

.jp-footTitle {
  font-size: 14.5px;
  font-weight: 750;
  line-height: 1.25;
}

.jp-footTag {
  font-size: 12.5px;
  color: rgba(255, 255, 255, .75);
  margin-top: 2px;
}

.jp-footDesc {
  margin: 0 0 12px;
  color: rgba(255, 255, 255, .80);
  line-height: 1.65;
  font-size: 13.5px;
}

.jp-footMini {
  display: grid;
  gap: 6px;
  font-size: 12.5px;
  color: rgba(255, 255, 255, .82);
}

.jp-footMini strong {
  color: rgba(255, 255, 255, .95);
}

/* Links */
.jp-footCol.links a {
  display: block;
  text-decoration: none;
  color: rgba(255, 255, 255, .86);
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0);
  transition: transform .2s ease, background-color .2s ease, border-color .2s ease;
}

.jp-footCol.links a:hover {
  transform: translateX(4px);
  background: rgba(255, 255, 255, .10);
  border-color: rgba(255, 255, 255, .14);
  color: #fff;
}

/* Contact block */
.jp-footContact .k {
  font-size: 12px;
  color: rgba(255, 255, 255, .72);
  margin-top: 10px;
  font-weight: 650;
}

.jp-footContact .v {
  font-size: 13.5px;
  color: rgba(255, 255, 255, .92);
  line-height: 1.55;
  font-weight: 650;
}

.jp-footContact a {
  color: #fff;
  text-decoration: none;
  border-bottom: 1px dotted rgba(255, 255, 255, .55);
}

.jp-footContact a:hover {
  border-bottom-style: solid;
}

/* Social pills */
.jp-footSocial {
  display: flex;
  gap: 10px;
  margin-top: 14px;
  flex-wrap: wrap;
}

.jp-footSocial a {
  text-decoration: none;
  color: #fff;
  font-weight: 800;
  font-size: 12px;
  padding: 9px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .16);
  transition: transform .2s ease, background-color .2s ease;
}

.jp-footSocial a:hover {
  transform: translateY(-3px);
  background: rgba(255, 255, 255, .18);
}

/* Map */
.jp-footMap {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .10);
  height: 190px;
}

.jp-footMap iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.jp-footMapHint {
  margin-top: 10px;
  color: rgba(255, 255, 255, .80);
  font-size: 12.5px;
  line-height: 1.5;
}

/* Bottom row */
.jp-footBottom {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed rgba(255, 255, 255, .22);
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  color: rgba(255, 255, 255, .85);
  font-size: 12.5px;
}

.jp-footBottom .right {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.jp-footBottom a {
  color: rgba(255, 255, 255, .92);
  text-decoration: none;
  border-bottom: 1px dotted rgba(255, 255, 255, .55);
}

.jp-footBottom a:hover {
  border-bottom-style: solid;
}

/* Responsive */
@media (max-width: 980px) {
  .jp-footerCta-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .jp-footerGrid {
    grid-template-columns: 1fr;
  }

  .jp-footMap {
    height: 220px;
  }
}

/* ===== Footer updates: bottom social + map email button ===== */

/* Email button under map */
.jp-footMailBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 12px;
  width: 100%;
  padding: 11px 14px;
  border-radius: 14px;
  text-decoration: none;
  font-weight: 750;
  font-size: 13px;

  color: #0b1220;
  background: rgba(255, 255, 255, .92);
  border: 1px solid rgba(255, 255, 255, .22);
  box-shadow: 0 18px 45px rgba(11, 18, 32, .18);
  transition: transform .2s ease, filter .2s ease, box-shadow .2s ease;
}

.jp-footMailBtn:hover {
  transform: translateY(-3px);
  filter: brightness(1.02);
  box-shadow: 0 22px 60px rgba(11, 18, 32, .22);
}

/* Bottom social pills (replaces privacy/terms/cookies) */
.jp-footSocialBottom {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.jp-footSocialBottom a {
  text-decoration: none;
  color: #fff;
  font-weight: 800;
  font-size: 12px;
  padding: 9px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .16);
  transition: transform .2s ease, background-color .2s ease, filter .2s ease;
}

.jp-footSocialBottom a:hover {
  transform: translateY(-3px);
  background: rgba(255, 255, 255, .18);
  filter: brightness(1.03);
}

.pkp_brand_footer {
  display: none !important;
}

/* ===== DARKER FOOTER THEME + SVG SOCIAL ICONS ===== */
.jessi-portal {
  --primary: #478b8c;
}

/* Darker footer background (deep indigo) */
.jp-footerMain {
  background: #000000 !important;
  /* darker than primary */
  border: none;
}

/* Slight subtle glow using your brand */
.jp-footerMain {
  background: #000000 !important;
}

/* Map email button ABOVE map */
.jp-footMailBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 0 12px !important;
  /* top of map */
  width: 100%;
  padding: 11px 14px;
  border-radius: 14px;
  text-decoration: none;
  font-weight: 750;
  font-size: 13px;

  color: #ffffff;
  background: rgba(71, 139, 140, .85);
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 18px 45px rgba(71, 139, 140, .22);
  transition: transform .2s ease, filter .2s ease, box-shadow .2s ease;
}

.jp-footMailBtn .ico {
  width: 18px;
  height: 18px;
  display: inline-flex;
}

.jp-footMailBtn .ico svg {
  width: 18px;
  height: 18px;
  display: block;
}

.jp-footMailBtn:hover {
  transform: translateY(-3px);
  filter: brightness(1.05);
  box-shadow: 0 22px 64px rgba(71, 139, 140, .28);
}

/* Map container a bit darker framed */
.jp-footMap {
  border: 1px solid rgba(255, 255, 255, .12) !important;
  background: rgba(255, 255, 255, .06) !important;
}

/* Bottom social: real icons */
.jp-footSocialBottom {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.jp-footSocialBottom .soc {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;

  color: rgba(255, 255, 255, .92);
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .14);

  transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease, color .2s ease;
}

.jp-footSocialBottom .soc svg {
  width: 18px;
  height: 18px;
  display: block;
}

.jp-footSocialBottom .soc:hover {
  transform: translateY(-3px);
  background: rgba(71, 139, 140, .35);
  color: #fff;
  box-shadow: 0 18px 45px rgba(0, 0, 0, .22);
}

/* Quick links hover: more contrast on dark background */
.jp-footCol.links a:hover {
  background: rgba(255, 255, 255, .12) !important;
  border-color: rgba(255, 255, 255, .16) !important;
}

/* ===== Modern Sidebar Menu (jp-sideNav / jp-sideGroup) ===== */
:root {
  --primary: #478b8c;
}

/* Sidebar spacing */
.jp-sideNav {
  display: grid;
  gap: 14px;
}

/* Each group becomes a "card" */
.jp-sideGroup {
  background: #fff;
  border: 1px solid rgba(11, 18, 32, .10);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 12px 34px rgba(11, 18, 32, .06);
}

/* Header styling (h4) */
.jp-sideGroup>h4 {
  margin: 0;
  padding: 12px 14px;
  font-family: "Poppins", "Inter", system-ui, sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .22px;
  text-transform: uppercase;
  color: #FFFFFF;
  background: #478b8c;
  border-bottom: 1px solid rgba(11, 18, 32, .08);
  position: relative;
}

/* Small accent bar on header */
.jp-sideGroup>h4::before {
  content: "";
  position: absolute;
  left: 14px;
  bottom: 0;
  width: 52px;
  height: 3px;
  border-radius: 999px;
  background: white;
  opacity: .85;
}

/* UL reset */
.jp-sideGroup>ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Link row */
.jp-sideGroup>ul>li>a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  text-decoration: none;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  color: rgba(11, 18, 32, .86);
  position: relative;
  transition: transform .18s ease, background-color .18s ease, color .18s ease;
}

/* Divider line between items (subtle) */
.jp-sideGroup>ul>li+li>a,
.jp-sideGroup>ul>li+li.is-static {
  border-top: 1px solid rgba(11, 18, 32, .06);
}

/* Left accent indicator (animated) */
.jp-sideGroup>ul>li>a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 4px;
  border-radius: 999px;
  background: var(--primary);
  opacity: 0;
  transform: scaleY(.6);
  transition: opacity .18s ease, transform .18s ease;
}

/* Tiny arrow cue (modern) */
/* .jp-sideGroup>ul>li>a::after {
  content: "→";
  margin-left: auto;
  font-weight: 800;
  opacity: .35;
  transform: translateX(-2px);
  transition: opacity .18s ease, transform .18s ease;
} */

/* Hover animation: slide + brand accent */
.jp-sideGroup>ul>li>a:hover {
  background: #478b8c50;
  color: var(--primary);
  transform: translateX(4px);
}

.jp-sideGroup>ul>li>a:hover::before {
  opacity: 1;
  transform: scaleY(1);
}

.jp-sideGroup>ul>li>a:hover::after {
  opacity: .9;
  transform: translateX(2px);
}

/* Keyboard focus (accessibility) */
.jp-sideGroup>ul>li>a:focus-visible {
  outline: 3px solid #000000;
  outline-offset: -3px;
  border-radius: 12px;
}

/* Static item (non-clickable) 
.jp-sideGroup > ul > li.is-static{
  padding: 11px 14px;
  font-family: "Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  color: rgba(11,18,32,.60);
  background: rgba(11,18,32,.03);
  position: relative;
}
*/
/*
.jp-sideGroup > ul > li.is-static::after{
  content:"(info)";
  margin-left: auto;
  float: right;
  font-size: 12px;
  font-weight: 800;
  opacity: .55;
}

/* Optional: make the whole group subtly react on hover */
.jp-sideGroup:hover {
  border-color: #5130895e;
  box-shadow: 0 16px 44px rgba(11, 18, 32, .08);
}

/* Mobile spacing */
@media (max-width: 980px) {
  .jp-sideNav {
    gap: 12px;
  }

  .jp-sideGroup>ul>li>a,
  .jp-sideGroup>ul>li.is-static {
    padding: 12px 14px;
  }
}

/* ===== Apply SAME sidebar card style to TOOLS + VISITOR tables ===== */
:root {
  --primary: #478b8c;
}

/* Generic card wrapper for table blocks */
.jp-sideCard {
  width: 100%;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border-radius: 18px;
  overflow: hidden;
  background: #fff !important;
  border: 1px solid rgba(11, 18, 32, .10) !important;
  box-shadow: 0 12px 34px rgba(11, 18, 32, .06) !important;
}

/* Header cell: match your sidebar header style */
.jp-sideCard tr:first-child td {
  height: auto !important;
  padding: 12px 14px !important;
  text-align: left !important;

  font-family: "Poppins", "Inter", system-ui, sans-serif !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  letter-spacing: .22px !important;
  text-transform: uppercase !important;

  color: white;
  background: #478b8c !important;
  border-bottom: white;
  position: relative !important;
}

/* Accent bar under header */
.jp-sideCard tr:first-child td::before {
  content: "";
  position: absolute;
  left: 14px;
  bottom: 0;
  width: 52px;
  height: 3px;
  border-radius: 999px;
  background: white;
  opacity: .85;
}

/* Body cell: remove grey, clean padding */
.jp-sideCard tr:nth-child(2) td {
  background: #fff !important;
  padding: 14px !important;
  text-align: center !important;
  border-bottom: 0 !important;
}

/* ============ TOOLS: equal logo sizing + nice hover ============ */
.jp-toolsBlock tr:nth-child(2) td {
  /* turn the body into a responsive grid */
  display: grid !important;
  grid-template-columns: 1fr !important;
  /* stack like your screenshot */
  gap: 12px !important;
  align-items: stretch !important;
}

/* Each logo link becomes a "logo card" */
.jp-toolsBlock .tools-img {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 12px !important;

  height: auto !important;
  /* equal tile height */
  text-decoration: none !important;

  position: relative !important;
  overflow: hidden !important;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease;
}

/* Brand bar on hover */
.jp-toolsBlock .tools-img::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 4px;
  border-radius: 999px;
  background: var(--primary);
  opacity: 0;
  transform: scaleY(.6);
  transition: opacity .18s ease, transform .18s ease;
}

/* Force ALL tool logos to same visual size */
.jp-toolsBlock .tools-img img {
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
}

/* Hover effect (tinted to softer #478b8c) */
.jp-toolsBlock .tools-img:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(71, 139, 140, .28) !important;
  /* soft purple border */
  background: rgba(71, 139, 140, .10) !important;
  /* very light purple wash */
  box-shadow:
    0 18px 48px rgba(11, 18, 32, .14),
    /* neutral depth */
    0 10px 24px rgba(71, 139, 140, .18) !important;
  /* purple glow */
}

/* orange glow */

.jp-toolsBlock .tools-img:hover::before {
  opacity: 1;
  transform: scaleY(1);
}

/* Kill extra <br> spacing inside the cell */
.jp-toolsBlock br {
  display: none;
}

.jp-toolsBlock strong {
  color: #FFFFFF;
}

/* ============ VISITOR: clean embeds, consistent spacing ============ */
.jp-visitorBlock tr:nth-child(2) td p {
  margin: 0 0 10px !important;
}

.jp-visitorBlock tr:nth-child(2) td p:last-child {
  margin-bottom: 0 !important;
}

/* Make visitor images responsive and tidy */
.jp-visitorBlock img {
  max-width: 100% !important;
  height: auto !important;
  border-radius: 12px !important;
  border: 1px solid rgba(11, 18, 32, .10) !important;
  background: #fff !important;
}

/* Style the "View INTEC Stats" link like modern pill link */
.jp-visitorBlock a {
  color: var(--primary) !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

.jp-visitorBlock a:hover {
  text-decoration: underline !important;
}



:root {
  --primary: #478b8c;
}

/* ===== ISSN Card (scoped) ===== */
.jp-issnCard {
  width: 100%;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border-radius: 18px;
  overflow: hidden;
  background: #fff !important;
  border: 1px solid rgba(11, 18, 32, .10) !important;
  box-shadow: 0 12px 34px rgba(11, 18, 32, .06) !important;
}

/* Header row (ISSN) — override inline styles safely */
.jp-issnCard tr:first-child td {
  padding: 12px 14px !important;
  text-align: left !important;
  background: #478b8c !important;
  border-bottom: 1px solid rgba(11, 18, 32, .08) !important;

  font-family: "Poppins", "Inter", system-ui, sans-serif !important;
  font-weight: 750 !important;
  font-size: 12px !important;
  letter-spacing: .22px !important;
  text-transform: uppercase !important;
  color: white !important;
  position: relative !important;
}

/* Accent bar */
.jp-issnCard tr:first-child td::before {
  content: "";
  position: absolute;
  left: 14px;
  bottom: 0;
  width: 52px;
  height: 3px;
  border-radius: 999px;
  background: white;
  opacity: .85;
}

/* Content cells */
.jp-issnCard td {
  padding: 12px 14px !important;
  text-align: left !important;
  background: #fff !important;
}

/* Barcode images: responsive + tidy */
.jp-issnCard img {
  width: 100% !important;
  height: auto !important;
  max-width: 420px;
  display: block !important;
  margin: 6px 0 8px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(11, 18, 32, .10) !important;
  background: #fff !important;
}

/* Make the image row left-aligned cleanly */
.jp-issnCard tr:nth-child(2) td,
.jp-issnCard tr:nth-child(5) td {
  display: flex !important;
  justify-content: flex-start !important;
}

/* E-ISSN / P-ISSN label rows */
.jp-issnCard td[align="center"] {
  text-align: left !important;
  position: relative;
  padding-top: 10px !important;
}

.jp-issnCard td[align="center"] strong {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  color: rgba(11, 18, 32, .82) !important;
}

/* subtle accent line above labels */
.jp-issnCard td[align="center"]::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 0;
  width: 44px;
  height: 3px;
  border-radius: 999px;
  background: rgba(71, 139, 140, .35);
}

/* =========================
   KEYWORDS BLOCK → modern card
   ========================= */


/* Header like your other cards */
.pkp_block.block_Keywordcloud .title {
  font-family: "Poppins", "Inter", system-ui, sans-serif;
  font-weight: 750;
  font-size: 12px;
  letter-spacing: .22px;
  text-transform: uppercase;
  color: #478b8c;
  background: none;
  border-bottom: 1px solid rgba(11, 18, 32, .08);
  position: relative;
}

.pkp_block.block_Keywordcloud .title::before {
  content: "";
  position: absolute;
  left: 14px;
  bottom: 0;
  width: 52px;
  height: 3px;
  border-radius: 999px;
  background: #478b8c;
  opacity: .85;
}


/* Keep the wordcloud itself nicely centered inside the card */
.pkp_block.block_Keywordcloud #wordcloud {
  display: block;
  width: 100%;
  max-width: 420px;
  margin: 6px 0 0;
  /* left aligned container */
}

/* Force wordcloud text to look modern (override serif in inline styles) */
.pkp_block.block_Keywordcloud text.keyword {
  font-family: "Inter", "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-weight: 650 !important;
}

/* Optional: make hover feel more “brand” even with random colors */
.pkp_block.block_Keywordcloud text.keyword:hover {
  opacity: 1 !important;
  text-decoration: underline;
  text-decoration-color: #478b8c
    /* lebih lembut */
  ;
  text-underline-offset: 3px;
}

/* ===== Fix Keywordcloud width to match other sidebar cards (CSS-only) ===== */
:root {
  --primary: #478b8c;
}

/* 1) Make the whole keyword block follow sidebar column width */
.sidebar .pkp_block.block_Keywordcloud {
  width: 100% !important;
  /* follow sidebar */
  max-width: 100% !important;
  /* prevent over-wide */
  box-sizing: border-box !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* 2) If theme gives pkp_block negative margins/paddings, neutralize */
.sidebar .pkp_block.block_Keywordcloud {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* 3) Keep content area consistent with other cards */
.sidebar .pkp_block.block_Keywordcloud .content {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* 4) Force the SVG container to fit card, not overflow */
.sidebar .pkp_block.block_Keywordcloud #wordcloud,
.sidebar .pkp_block.block_Keywordcloud svg {
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
  overflow: hidden !important;
}

/* 5) Optional: reduce perceived “wide” look by reducing inner padding */
.sidebar .pkp_block.block_Keywordcloud .content {
  padding: 12px 14px 14px !important;
  /* same as your other cards */
}

/* 6) Optional: make the cloud itself slightly smaller so it doesn't feel oversized */
.sidebar .pkp_block.block_Keywordcloud svg {
  /* if it still feels too big, uncomment these:
  transform: scale(.94);
  transform-origin: top left;
  */
}

/* Secondary button: outline → filled on hover (does NOT touch .jp-btn.primary) */
.jp-btn.jp-btn-sc {
  border: 1.5px solid #478b8c;
  color: #478b8c;
  background: transparent;

  transition: background-color .18s ease,
    color .18s ease,
    border-color .18s ease,
    transform .18s ease,
    box-shadow .18s ease;
}

.jp-btn.jp-btn-sc:hover {
  background: #478b8c;
  color: #FFFFFF;
  border-color: #478b8c;
  transform: translateY(-1px);
  box-shadow: 0 10px 24px #8951305e;
}

.jp-btn.jp-btn-sc:active {
  transform: translateY(0);
  box-shadow: none;
}

.jp-btn.jp-btn-sc:focus-visible {
  outline: 3px solid rgba(71, 139, 140, .25);
  outline-offset: 2px;
}

/* Secondary button: outline → filled on hover */
.jp-btn.jp-btn-sc {
  border: 1.5px solid #478b8c !important;
  color: #478b8c !important;
  background: transparent !important;
}

.jp-btn.jp-btn-sc:hover {
  background: #478b8c !important;
  color: #FFFFFF !important;
  border-color: #478b8c !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 10px 24px #8951305e !important;
}

/* Centered divider line (like your first line style) */
hr.jp-divider {
  border: 0;
  height: 1px;
  margin: 18px auto 0;
  width: min(60%, 520px);
  /* not full width */
  margin: 18px auto;
  /* centered */
  background: rgba(11, 18, 32, .14);
  border-radius: 999px;
  opacity: 1;
}

/* Optional: slightly tighter on mobile */
@media (max-width: 980px) {
  hr.jp-divider {
    width: min(78%, 520px);
    margin: 16px auto;
  }
}

:root {
  --primary: #478b8c;
}

/* Section container */
.jp-posters {
  margin-top: 18px;
  border-radius: 18px;
  background: #fff;
  overflow: hidden;
}

.jp-postersHead {
  padding: 16px 18px;
  border-bottom: 1px solid rgba(11, 18, 32, .08);
}

.jp-postersHead h2 {
  margin: 0 0 6px;
  font-size: 18px;
  letter-spacing: .2px;
}

.jp-postersHead p {
  margin: 0;
  color: rgba(11, 18, 32, .62);
  line-height: 1.6;
  font-size: 13.5px;
}

/* Grid */
.jp-postersGrid {
  padding: 16px 18px 18px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

@media (max-width: 980px) {
  .jp-postersGrid {
    grid-template-columns: 1fr;
  }
}

:root {
  --primary: #478b8c;
  --ink: #0b1220;
}

/* Card */
.jp-posterCard {
  margin: 0;
  border-radius: 16px;
  border: 1px solid rgba(11, 18, 32, .10);
  background: rgba(11, 18, 32, .02);
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(11, 18, 32, .06);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.jp-posterCard:hover {
  transform: translateY(-3px);
  border-color: rgba(71, 139, 140, .45);
  box-shadow: 0 18px 48px rgba(11, 18, 32, .12), 0 10px 22px rgba(71, 139, 140, .12);
}

/* Click area */
.jp-posterLink {
  display: block;
  position: relative;
  overflow: hidden;
  background: #0b1220;
  /* helps poster edges pop */
}

/* Poster image */
.jp-posterLink img {
  width: 100%;
  height: auto;
  display: block;
  transform: scale(1);
  transition: transform .28s ease, filter .28s ease;
  will-change: transform;
}

/* Hover zoom (bigger + crisp) */
.jp-posterCard:hover .jp-posterLink img {
  transform: scale(1.06);
  filter: saturate(1.05) contrast(1.03);
}

/* Fancy focus outline for accessibility (primary) */
.jp-posterLink:focus-visible {
  outline: 3px solid rgba(71, 139, 140, .28);
  outline-offset: -3px;
}

/* Caption */
.jp-posterCard figcaption {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  background: #fff;
}

.jp-posterCard .tag {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1.5px solid var(--primary);
  color: var(--primary);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .2px;
  background: rgba(71, 139, 140, .08);
}

.jp-posterCard .hint {
  color: rgba(11, 18, 32, .55);
  font-size: 12px;
  font-weight: 600;
}

/* ===== CSS-only Lightbox (no JS) ===== */
.jp-lightbox {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 9999;
}

/* show when targeted */
.jp-lightbox:target {
  display: block;
}

/* Black transparent overlay around image (focus effect like your image 2) */
.jp-lightboxBackdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .72);
  /* dark overlay */
  backdrop-filter: blur(6px);
  /* soft blur */
  -webkit-backdrop-filter: blur(6px);
}

/* Centering container */
.jp-lightboxInner {
  position: absolute;
  inset: 18px;
  display: grid;
  place-items: center;
  padding: 18px;
  pointer-events: none;
  /* only image/button accept pointer */
}

/* Image styling */
.jp-lightboxInner img {
  max-width: min(1100px, 92vw);
  max-height: 90vh;
  width: auto;
  height: auto;

  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, .18);
  box-shadow: 0 24px 80px rgba(0, 0, 0, .55);
  background: #fff;

  pointer-events: auto;
}

/* Close button (primary themed) */
.jp-lightboxClose {
  position: absolute;
  right: 16px;
  top: 14px;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;

  text-decoration: none;
  font-size: 28px;
  font-weight: 900;
  line-height: 1;
  color: #fff;

  background: rgba(71, 139, 140, .92);
  box-shadow: 0 14px 36px rgba(71, 139, 140, .22);
  z-index: 10000;
  pointer-events: auto;
  transition: transform .18s ease, filter .18s ease;
}

.jp-lightboxClose:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
}

/* Optional: click anywhere on the dark area to close (if your HTML uses <a class="jp-lightboxBackdrop" href="#jpPoster2">) */
.jp-lightboxBackdrop {
  cursor: zoom-out;
}


/* ========= OJS Feature Cards (stable in narrow OJS columns) ========= */

.ojsFeatureSection {
  --imgW: 360px;
  --imgH: 500px;


  --textW: 500px;
  /* FIXED text card width (prevents skinny vertical card) */
  --overlap: 130px;
  /* how much image overlaps text */

  background: none;
  padding: 42px 24px;
  overflow: visible;
}

/* IMPORTANT: auto-fit prevents forced 2-column on narrow OJS content area */
.ojsFeatureGrid {
  max-width: 1280px;
  margin: 0 auto;
  justify-items: center;


  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(560px, 1fr));
  gap: clamp(22px, 3vw, 70px);
  align-items: center;
}

/* One tile */
.ojsFeature {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  /* overlap handled by negative margin */

  min-height: var(--imgH);
  position: relative;
  overflow: visible;
}

/* Text card = normal flow (NOT absolute) */
.ojsTextCard {
  width: var(--textW);
  max-width: 92%;
  background: white;
  border-radius: 22px;
  padding: 28px 30px;
  box-shadow: 0 14px 28px rgba(0, 0, 0, .14);
  z-index: 1;
}

.ojsTextCard h3 {
  margin: 0 0 14px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 600;
  font-size: 22px;
  line-height: 1.2;
  color: #111;
}

.ojsTextCard p {
  margin: 0;
  text-align: justify;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 14.5px;
  line-height: 1.55;
  color: #222;
  max-width: 34ch;
}

/* Image card overlaps the text using negative margin */
.ojsImageCard {
  width: var(--imgW);
  height: var(--imgH);
  margin-left: calc(var(--overlap) * -1);

  border-radius: 28px;
  overflow: hidden;
  background: #478b8c;
  box-shadow: 0 18px 40px rgba(65, 60, 130, 0.28);

  z-index: 2;
}

.ojsImageCard img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* OPTIONAL reverse layout */
.ojsFeature.ojsFeature--reverse {
  flex-direction: row-reverse;
}

.ojsFeature.ojsFeature--reverse .ojsImageCard {
  margin-left: 0;
  margin-right: calc(var(--overlap) * -1);
}

/* Responsive tuning for OJS */
@media (max-width: 1200px) {
  .ojsFeatureGrid {
    grid-template-columns: 1fr;
    /* force 1 column earlier (OJS sidebar layout) */
  }
}

@media (max-width: 640px) {
  .ojsFeatureSection {
    --imgW: 100%;
    --imgH: 520px;
    --textW: 100%;
    padding: 26px 16px;
  }

  .ojsFeature {
    flex-direction: column;
    align-items: stretch;
    min-height: auto;
  }

  .ojsImageCard {
    margin-left: 0;
    margin-right: 0;
    height: var(--imgH);
    border-radius: 24px;
  }
}

/* === Zoom-out hover effect (starts slightly zoomed, zooms OUT on hover) === */
.ojsImageCard {
  cursor: pointer;
}

.ojsImageCard img {
  transform: scale(1.08);
  /* initial zoom-in */
  transition: transform .55s ease;
  /* smooth */
  will-change: transform;
}

.ojsImageCard:hover img {
  transform: scale(1);
  /* zoom out to normal */
}

/* Optional: slightly lift the card for a nicer feel */
.ojsImageCard {
  transition: transform .55s ease, box-shadow .55s ease;
}

.ojsImageCard:hover {
  transform: translateY(-4px);
  box-shadow: 0 26px 60px rgba(0, 0, 0, .34);
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {

  .ojsImageCard img,
  .ojsImageCard {
    transition: none !important;
  }
}


/* ===== Indexation Sidebar Block (for your exact HTML) ===== */
/* ===== Indexation Sidebar Block (fixed) ===== */
.idx-card {
  width: 100%;
  border-radius: 18px;
  overflow: hidden;
  background: #fff !important;
  border: 1px solid rgba(11, 18, 32, .10) !important;
  box-shadow: 0 12px 34px rgba(11, 18, 32, .06) !important;
}

/* header bar (jangan pakai ::after untuk container) */
.idx-head {
  padding: 12px 14px !important;
  text-align: left !important;

  background: #478b8c !important;
  border-bottom: 1px solid rgba(255, 255, 255, .22) !important;
}

/* title text */
.idx-title {
  font-family: "Poppins", "Inter", system-ui, sans-serif !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  letter-spacing: .2px !important;
  color: #fff !important;
  margin: 0 !important;
}

/* ===== Make underline same as ISSN block ===== */
.idx-underline {
  /* kill the &nbsp; effect */
  font-size: 0 !important;
  line-height: 0 !important;
  margin-bottom: 0 !important;
  padding-bottom: 0;

  display: block !important;
  width: 64px !important;
  /* panjang garis */
  height: 3px !important;
  /* tebal garis */
  margin-top: 10px !important;
  background: rgba(255, 255, 255, .85) !important;
  /* warna garis */
  border-radius: 999px !important;
  padding: 0 !important;
}

/* if OJS theme injects ::after lines, disable */
.idx-underline::before,
.idx-underline::after {
  content: none !important;
}


/* Body */
.idx-body {
  padding: 14px;
}

/* ===== GRID: default 2 columns ===== */
.idx-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

/* ===== ITEM: no bg, dashed border (like your screenshot) ===== */
.idx-item {
  text-decoration: none !important;
  border-radius: 16px;
  border: 1px dashed rgba(11, 18, 32, .22);
  background: transparent;
  padding: 18px 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.idx-item:hover {
  transform: translateY(-1px);
  border-color: rgba(11, 18, 32, .35);
  box-shadow: 0 10px 22px rgba(11, 18, 32, .10);
}

/* ===== LOGO: force readable size regardless of original image ratio ===== */
.idx-logo {
  width: 100% !important;
  max-width: 170px;
  /* bigger */
  height: 74px;
  /* bigger */
  object-fit: contain;
  display: block;

  /* white pill behind logo */
  background: #fff;
  border-radius: 14px;
  padding: 10px 12px;
  border: 1px solid rgba(11, 18, 32, .10);
}

/* Remove forced width/height attributes from HTML images (important) */
.idx-logo[width],
.idx-logo[height] {
  width: 100% !important;
  height: 74px !important;
}

/* ===== Mobile: switch to 1 column automatically + bigger ===== */
@media (max-width: 520px) {
  .idx-grid {
    grid-template-columns: 1fr;
  }

  .idx-logo {
    max-width: 220px;
    height: 82px;
  }

  .idx-logo[width],
  .idx-logo[height] {
    height: 82px !important;
  }
}

/* ===== Indexation: 2 columns + no logo bg (moderate size) ===== */

/* 2 kolom */
.idx-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

/* item box */
.idx-item {
  padding: 16px 12px !important;
}

/* no bg behind logo + size reasonable */
.idx-logo {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  border-radius: 0 !important;

  width: 100% !important;
  max-width: 150px !important;
  /* ukuran logo */
  height: 64px !important;
  /* tinggi logo */
  object-fit: contain !important;
  display: block !important;
  margin: 0 auto !important;
}

/* override width/height attributes in HTML img */
.idx-logo[width],
.idx-logo[height] {
  width: 100% !important;
  height: 64px !important;
}

/* mobile: 1 kolom biar nggak sempit */
@media (max-width: 520px) {
  .idx-grid {
    grid-template-columns: 1fr !important;
  }

  .idx-logo {
    max-width: 190px !important;
    height: 78px !important;
  }

  .idx-logo[width],
  .idx-logo[height] {
    height: 78px !important;
  }
}

/* Generic card wrapper for table blocks */
.jp-sideCard {
  width: 100%;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border-radius: 18px;
  overflow: hidden;
  background: #fff !important;
  border: 1px solid rgba(11, 18, 32, .10) !important;
  box-shadow: 0 12px 34px rgba(11, 18, 32, .06) !important;
}

/* Header cell: match your sidebar header style */
.jp-sideCard tr:first-child td {
  height: auto !important;
  padding: 12px 14px !important;
  text-align: left !important;

  font-family: "Poppins", "Inter", system-ui, sans-serif !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  letter-spacing: .22px !important;
  text-transform: uppercase !important;

  color: white;
  background: #478b8c !important;
  border-bottom: white;
  position: relative !important;
}

/* ===== Indexation Marquee (CSS-only infinite) ===== */
.idxMarquee {
  margin: 26px auto;
  margin-top: 5px !important;
  padding: 10px 0 0;
  max-width: 1180px;
}

.idxMarquee__title {
  font-family: "Poppins", "Inter", system-ui, sans-serif !important;
  letter-spacing: .2px;
  color: #111;
  font-size: 16px;
  font-weight: bold;
  margin: 0 0 10px 15px;
  /* top right bottom left */
}

/* viewport */
.idxMarquee__wrap {
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg, #FFFFFF 0%, #ffffff 100%);
  padding: 14px 0;
}

/* soft fade edges like your screenshot */
.idxMarquee__wrap::before,
.idxMarquee__wrap::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 70px;
  pointer-events: none;
  z-index: 2;
}

.idxMarquee__wrap::before {
  left: 0;
  background: linear-gradient(90deg, #FFFFFF 0%, rgba(247, 247, 247, 0) 100%);
}

.idxMarquee__wrap::after {
  right: 0;
  background: linear-gradient(270deg, #FFFFFF 0%, rgba(247, 247, 247, 0) 100%);
}

/* track that moves */
.idxMarquee__track {
  display: flex;
  align-items: center;
  gap: 28px;
  width: max-content;
  will-change: transform;
  animation: idxMarqueeMove 22s linear infinite;
  padding: 0 22px;
}

/* logo item */
.idxMarquee__item {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none !important;
  opacity: .95;
  transition: transform .15s ease, opacity .15s ease;
}

.idxMarquee__item:hover {
  transform: translateY(-1px) scale(1.03);
  opacity: 1;
}

/* logo sizing */
.idxMarquee__item img {
  height: 34px;
  /* adjust size here */
  width: auto;
  object-fit: contain;
  display: block;
  filter: none;
}

/* Make the thumbnail look clickable */
.ojsLightboxThumb img {
  width: 100%;
  height: auto;
  display: block;
  cursor: zoom-in;
  border-radius: 16px;
}

/* LIGHTBOX overlay (hidden by default) */
.ojsLightbox {
  position: fixed;
  inset: 0;
  z-index: 99999;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
}

/* Show overlay when targeted (#jospaPoster) */
.ojsLightbox:target {
  opacity: 1;
  pointer-events: auto;
}

/* Dark backdrop */
.ojsLightboxBackdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .86);
}

/* Panel holds the image; allows scroll for tall posters */
.ojsLightboxPanel {
  position: relative;
  margin: 0;
  width: min(980px, 92vw);
  max-height: 92vh;
  overflow: auto;
  border-radius: 18px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .65);
  background: rgba(0, 0, 0, .08);
  padding: 14px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Full image inside overlay */
.ojsLightboxPanel img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  cursor: zoom-out;
}

/* Close button */
.ojsLightboxClose {
  position: sticky;
  /* stays visible when you scroll inside panel */
  top: 8px;
  margin-left: auto;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  text-decoration: none;
  font-size: 28px;
  line-height: 1;
  border-radius: 999px;
  background: rgba(0, 0, 0, .55);
  color: #fff;
  backdrop-filter: blur(6px);
}

/* Small-screen tweak */
@media (max-width: 520px) {
  .ojsLightboxPanel {
    width: 94vw;
    max-height: 94vh;
    padding: 10px;
    border-radius: 14px;
  }
}

/* ====== FORCE FULLSCREEN OVERLAY (OJS-safe) ====== */
.ojsLightbox {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483647 !important;
  /* super high to beat theme */
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;

  /* IMPORTANT: dark overlay lives here too */
  background: rgba(0, 0, 0, .90) !important;
}

.ojsLightbox:target {
  opacity: 1;
  pointer-events: auto;
}

/* Backdrop link: keep it, but force darkness too */
.ojsLightboxBackdrop {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0, 0, 0, .90) !important;
  z-index: 1 !important;
}

/* Panel (the image container) */
.ojsLightboxPanel {
  position: fixed !important;
  z-index: 2 !important;

  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  width: min(980px, 92vw);
  max-height: 92vh;
  overflow: auto;

  border-radius: 18px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .65);
  background: rgba(0, 0, 0, .08);
  padding: 14px;
}

.ojsLightboxPanel img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  cursor: zoom-out;
}

/* Close button */
.ojsLightboxClose {
  position: sticky;
  top: 8px;
  margin-left: auto;

  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;

  text-decoration: none;
  font-size: 28px;
  line-height: 1;

  border-radius: 999px;
  background: rgba(0, 0, 0, .55);
  color: #fff;
  backdrop-filter: blur(6px);
}

/* ===== Posters grid (optional nice hover) ===== */
.jp-postersGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

@media (max-width: 820px) {
  .jp-postersGrid {
    grid-template-columns: 1fr;
  }
}

.jp-posterCard img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 16px;
  cursor: zoom-in;
  transition: transform .18s ease, box-shadow .18s ease;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .12);
}

.jp-posterLink:hover img {
  transform: scale(1.02);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .18);
}

/* ===== CSS-only Lightbox (OJS-safe + forced dark overlay) ===== */
.jp-lightbox {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483647 !important;

  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;

  /* Force dark overlay even if theme overrides backdrop */
  background: rgba(0, 0, 0, .90) !important;
}

.jp-lightbox:target {
  opacity: 1;
  pointer-events: auto;
}

/* Clickable dark area to close */
.jp-lightboxBackdrop {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0, 0, 0, .90) !important;
  z-index: 1 !important;
}

/* Panel */
.jp-lightboxPanel {
  position: fixed !important;
  z-index: 2 !important;

  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  width: min(980px, 92vw);
  max-height: 92vh;
  overflow: auto;

  margin: 0;
  padding: 14px;
  border-radius: 18px;

  background: rgba(0, 0, 0, .08);
  box-shadow: 0 24px 80px rgba(0, 0, 0, .65);
}

/* Full image */
.jp-lightboxPanel img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  cursor: zoom-out;
}

/* Close button */
.jp-lightboxClose {
  position: sticky;
  top: 8px;
  margin-left: auto;

  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;

  text-decoration: none;
  font-size: 28px;
  line-height: 1;

  border-radius: 999px;
  background: rgba(0, 0, 0, .55);
  color: #fff;
  backdrop-filter: blur(6px);
}

/* Mobile tweak */
@media (max-width: 520px) {
  .jp-lightboxPanel {
    width: 94vw;
    max-height: 94vh;
    padding: 10px;
    border-radius: 14px;
  }
}

/* ===== Hide scrollbar but keep scroll ===== */
.jp-lightboxPanel {
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* old Edge/IE */
}

.jp-lightboxPanel::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.jp-lightboxPanel {
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  /* smooth iOS scroll */
}


/* ===== Hide scrollbar but keep scroll ===== */
.ojsLightboxPanel {
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* old Edge/IE */
}

.ojsLightboxPanel::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.ojsLightboxPanel {
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  /* smooth iOS scroll */
}

/* Pause on hover (nice UX) */
.idxMarquee__wrap:hover .idxMarquee__track {
  animation-play-state: paused;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .idxMarquee__track {
    animation: none;
  }
}

@keyframes idxMarqueeMove {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }

  /* because we duplicated the list */
}

/* === NEW layout wrapper === */
.jospa-footerMain {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* 50/50 */
  gap: 18px;
  margin-top: 16px;
}

/* Left + Right cards share same “panel” feel */
.jospa-footerLeft,
.jospa-footerRight {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 16px;
  padding: 16px 16px;
}

/* Publisher block spacing */
.jospa-footerH--small {
  font-size: 14px;
  opacity: .92;
  margin-top: 14px;
}

.jospa-footerP--tight {
  text-align: justify;
  margin: 8px 0 0;
  line-height: 1.6;
}

.jospa-muted {
  opacity: .90;
}

/* Make visitors image “bigger” and centered */
.jospa-statsBox--big {
  margin-top: 10px;
}

.jospa-statsBox--big .jospa-raw {
  text-align: center;
}

/* Force the FlagCounter image to scale nicely */
.jospa-statsBox--big img {
  max-width: 100%;
  height: auto;
}

/* Full-width map row */
.jospa-footerMapRow {
  margin-top: 18px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 16px;
  overflow: hidden;
}

#map-canvas {
  height: 100px !important;
}

.jospa-map.jospa-map--full {
  height: 280px !important;
  width: 100%;
  border: 0;
  display: block;
}

/* 100% width map */
.jospa-map--full iframe {
  width: 100%;
  height: 100px !important;
  /* adjust */
  border: 0;
  display: block;
}

/* Map note spacing */
.jospa-footerNote--map {
  padding: 10px 14px 14px;
}

/* Responsive: stack columns on small screens */
@media (max-width: 860px) {
  .jospa-footerMain {
    grid-template-columns: 1fr;
  }

  .jospa-map--full iframe {
    height: 300px;
  }
}

/* LEFT card becomes a 2-column layout */
.jospa-footerLeft {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  /* description wider, publisher narrower */
  gap: 16px;
  align-items: start;
}

/* Keep title full width above both columns */
.jospa-footerLeft .jospa-footerH {
  grid-column: 1 / -1;
  margin-bottom: 6px;
}

/* Description should stay in column 1 */
.jospa-footerLeft .jospa-footerP {
  margin: 0;
}

/* Publisher block goes to column 2 */
.jospa-footerLeft .jospa-publisher {
  margin: 0;
}

/* Make publisher text tighter & readable */
.jospa-footerLeft .jospa-footerP--tight {
  margin: 8px 0 0;
  line-height: 1.65;
  opacity: .95;
}

/* Responsive: stack back to 1 column on small screens */
@media (max-width: 860px) {
  .jospa-footerLeft {
    grid-template-columns: 1fr;
  }
}

/* FIX: remove the big vertical gap inside the left card */
.jospa-footerLeft {
  /* keep your 2 columns */
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 16px;

  /* IMPORTANT: prevent “space-between” distribution */
  align-content: start !important;
  justify-content: start !important;
  place-content: start !important;

  /* make rows size to content (no stretching) */
  grid-auto-rows: min-content;
}

/* Title should sit close to content */
.jospa-footerLeft .jospa-footerH {
  grid-column: 1 / -1;
  margin: 0 0 10px 0 !important;
}

/* Remove default paragraph margins that add surprise space */
.jospa-footerLeft .jospa-footerP {
  margin: 0 !important;
}

.jospa-footerLeft .jospa-footerP--tight {
  margin: 0 !important;
}

/* Publisher block should not add extra top spacing */
.jospa-footerLeft .jospa-publisher {
  margin: 0 !important;
  align-self: start;
}


article,
aside,
footer,
header,
nav,
section {
  display: block
}

h1 {
  font-size: 2em;
  margin: .67em 0
}

figcaption,
figure,
main {
  display: block
}

figure {
  margin: 1em 40px
}

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible
}

pre {
  font-family: monospace, monospace;
  font-size: 1em
}

a {
  background-color: transparent;
  -webkit-text-decoration-skip: objects
}

abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  text-decoration: underline dotted
}

b,
strong {
  font-weight: inherit
}

b,
strong {
  font-weight: bolder
}

code,
kbd,
samp {
  font-family: monospace, monospace;
  font-size: 1em
}

dfn {
  font-style: italic
}

mark {
  background-color: #478b8c;
  color: #000
}

small {
  font-size: 80%
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline
}

sub {
  bottom: -0.25em
}

sup {
  top: -0.5em
}

audio,
video {
  display: inline-block
}

audio:not([controls]) {
  display: none;
  height: 0
}

img {
  border-style: none
}

svg:not(:root) {
  overflow: hidden
}

button,
input,
optgroup,
select,
textarea {
  font-family: sans-serif;
  font-size: 100%;
  line-height: 1.15;
  margin: 0
}

button,
input {
  overflow: visible
}

button,
select {
  text-transform: none
}

button,
html [type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button
}

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0
}

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText
}

fieldset {
  padding: .35em .75em .625em
}

legend {
  box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal
}

progress {
  display: inline-block;
  vertical-align: baseline
}

textarea {
  overflow: auto
}

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box;
  padding: 0
}

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto
}

[type="search"] {
  -webkit-appearance: textfield;
  outline-offset: -2px
}

[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit
}

details,
menu {
  display: block
}

summary {
  display: list-item
}

canvas {
  display: inline-block
}

template {
  display: none
}

[hidden] {
  display: none
}

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box
}

@keyframes pkp_spin {
  0% {
    transform: rotateZ(-360deg);
    -webkit-transform: rotateZ(-360deg);
    -moz-transform: rotateZ(-360deg);
    -o-transform: rotateZ(-360deg)
  }

  100% {
    transform: rotateZ(0deg);
    -webkit-transform: rotateZ(0deg);
    -moz-transform: rotateZ(0deg);
    -o-transform: rotateZ(0deg)
  }
}

@-webkit-keyframes pkp_spin {
  0% {
    transform: rotateZ(-360deg);
    -webkit-transform: rotateZ(-360deg);
    -moz-transform: rotateZ(-360deg);
    -o-transform: rotateZ(-360deg)
  }

  100% {
    transform: rotateZ(0deg);
    -webkit-transform: rotateZ(0deg);
    -moz-transform: rotateZ(0deg);
    -o-transform: rotateZ(0deg)
  }
}

@-moz-keyframes pkp_spin {
  0% {
    transform: rotateZ(-360deg);
    -webkit-transform: rotateZ(-360deg);
    -moz-transform: rotateZ(-360deg);
    -o-transform: rotateZ(-360deg)
  }

  100% {
    transform: rotateZ(0deg);
    -webkit-transform: rotateZ(0deg);
    -moz-transform: rotateZ(0deg);
    -o-transform: rotateZ(0deg)
  }
}

@-o-keyframes pkp_spin {
  0% {
    transform: rotateZ(-360deg);
    -webkit-transform: rotateZ(-360deg);
    -moz-transform: rotateZ(-360deg);
    -o-transform: rotateZ(-360deg)
  }

  100% {
    transform: rotateZ(0deg);
    -webkit-transform: rotateZ(0deg);
    -moz-transform: rotateZ(0deg);
    -o-transform: rotateZ(0deg)
  }
}

.btn {
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.btn-primary {
  background-color: var(--bg-primary);
  color: white;
}

.btn-primary:hover {
  background-color: #7a6bb0;
  color: white;
  transform: translateY(-2px);
}

/* Sidebar */
.sidebar h3 {
  color: var(--bg-primary);
  font-size: 1.3rem;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.sidebar .current-issue {
  padding: 1.5rem;
  background: #674faa;
}

.current-issue h3 {
  margin-bottom: 1rem;
}

.sidebar-section {
  background: white;
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 2rem;
  box-shadow: 0 4px 20px rgba(142, 124, 195, 0.1);
}

.current-issue {
  padding: 1.5rem;
}

/* Table Menu Block Styles */
.table-menu-block {
  margin-bottom: 1.5rem;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(142, 124, 195, 0.1);
}

.menu-table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  border-radius: 12px;
  overflow: hidden;
}

.menu-header-cell {
  background-color: var(--bg-primary);
  color: #f0f0f0;
  padding: 1rem 1.5rem;
  font-weight: 600;
  font-size: 1.1rem;
  text-align: center;
  border-bottom: 1px solid rgba(142, 124, 195, 0.2);
}

.menu-header-cell i {
  margin-right: 0.5rem;
}

.menu-item-cell {
  background-color: #ffffff;
  padding: 0;
  border-bottom: 1px solid rgba(142, 124, 195, 0.1);
}

.menu-item-cell:last-child {
  border-bottom: none;
}

.table-menu-link {
  display: block;
  padding: 0.875rem 1.5rem;
  color: #333;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s ease;
  width: 100%;
  box-sizing: border-box;
}

.table-menu-link:hover {
  background-color: rgba(142, 124, 195, 0.08);
  color: var(--bg-primary);
  padding-left: 2rem;
}

.table-menu-link i {
  color: var(--bg-primary);
  margin-right: 0.75rem;
  width: 16px;
  text-align: center;
  font-size: 0.9rem;
}

.pkp_button,
.pkp_button_primary,
.pkp_button_offset,
.pkp_button_link {
  display: inline-block;
  padding: 0 .5em;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 3px;
  font-size: .93rem;
  line-height: 2rem;
  font-weight: 700;
  color: #4b7d92;
  text-decoration: none;
  box-shadow: 0 1px 0 #ddd;
  cursor: pointer
}

.pkp_button:hover,
.pkp_button:focus,
.pkp_button_primary:hover,
.pkp_button_primary:focus,
.pkp_button_offset:hover,
.pkp_button_offset:focus,
.pkp_button_link:hover,
.pkp_button_link:focus {
  color: #4b7d92;
  border-color: #4b7d92;
  outline: 0
}

.pkp_button:active,
.pkp_button_primary:active,
.pkp_button_offset:active,
.pkp_button_link:active {
  box-shadow: 0 0 2px
}

.pkp_button:disabled,
.pkp_button_primary:disabled,
.pkp_button_offset:disabled,
.pkp_button_link:disabled {
  color: #aaa
}

.pkp_button:disabled:hover,
.pkp_button_primary:disabled:hover,
.pkp_button_offset:disabled:hover,
.pkp_button_link:disabled:hover {
  color: #aaa;
  border-color: #ddd;
  cursor: not-allowed
}

.pkp_button_primary {
  color: #fff;
  background: #4b7d92;
  border-color: #4b7d92;
  box-shadow: 0 1px 0 #4b7d92
}

.pkp_button_primary:hover,
.pkp_button_primary:focus {
  background: #6298ae;
  color: #fff
}

.pkp_button_primary:disabled,
.pkp_button_primary:disabled:hover {
  color: #fff;
  background: #b7c5ca;
  border-color: #b7c5ca;
  box-shadow: 0 1px 0 #888;
  cursor: not-allowed
}

.pkp_button_offset {
  color: #ff4040
}

.pkp_button_offset:hover,
.pkp_button_offset:focus {
  border-color: #ff4040;
  color: #ff4040
}

.pkp_button_offset:disabled,
.pkp_button_offset:disabled:hover {
  color: #fff;
  background: #b7c5ca;
  border-color: #b7c5ca;
  box-shadow: 0 1px 0 #888;
  cursor: not-allowed
}

.pkp_button_link {
  box-shadow: none;
  border-color: transparent
}

.pkp_button_link:disabled:hover {
  border-color: transparent
}

.pkp_spinner:after {
  display: inline-block;
  position: relative;
  width: 1.25rem;
  height: 1.25rem;
  vertical-align: middle;
  -webkit-animation: pkp_spin .6s linear infinite;
  -moz-animation: pkp_spin .6s linear infinite;
  -ms-animation: pkp_spin .6s linear infinite;
  -o-animation: pkp_spin .6s linear infinite;
  animation: pkp_spin .6s linear infinite;
  border-radius: 100%;
  border-top: 1px solid #888;
  border-bottom: 1px solid transparent;
  border-left: 1px solid #888;
  border-right: 1px solid transparent;
  border-top-color: rgba(0, 0, 0, 0.5);
  border-left-color: rgba(0, 0, 0, 0.5);
  content: '';
  opacity: 1
}

.pkp_loading {
  font-size: .93rem;
  line-height: 1.43rem
}

.pkp_loading .pkp_spinner {
  margin-right: 0.25em
}

.pkp_unstyled_list,
.cmp_article_list,
.cmp_breadcrumbs ol,
.cmp_announcements.cmp_announcements,
.pkp_site_nav_menu ul,
.pkp_page_index .journals ul,
.page_catalog_category .subcategories ul,
.page_issue_archive .issues_archive,
.page_register .context_optin .contexts,
.obj_article_details .authors,
.obj_article_details .galleys_links,
.obj_article_details .supplementary_galleys_links,
.obj_article_summary .galleys_links,
.obj_issue_toc .articles,
.obj_issue_toc .galleys_links,
.pkp_block .content ul {
  margin: 0;
  padding: 0;
  list-style: none
}

.pkp_caret {
  content: ' ';
  display: inline-block;
  width: 0;
  height: 0;
  border: .25rem solid transparent;
  vertical-align: middle
}

.pkp_caret_down {
  border-top: .375rem solid
}

.pkp_caret_right {
  border-left: .375rem solid
}

.pkp_screen_reader,
.cmp_skip_to_content a,
.pkp_page_index .journals h2,
.pkp_page_index .cmp_announcements h2,
.page_register .context_optin .roles legend {
  clip: rect(1px, 1px, 1px, 1px);
  position: absolute !important;
  left: -2000px
}

.pkp_screen_reader:focus,
.pkp_page_index .cmp_announcements h2:focus {
  background-color: #fff;
  border-radius: 3px;
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
  -webkit-box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
  clip: auto !important;
  color: #000;
  display: block;
  font-size: 1rem;
  height: auto;
  line-height: normal;
  padding: 1rem;
  position: absolute;
  left: 0.5rem;
  top: 0.5rem;
  text-decoration: none;
  width: auto;
  z-index: 100000
}

.pkp_helpers_clear:before,
.pkp_helpers_clear:after {
  content: " ";
  display: table
}

.pkp_helpers_clear:after {
  clear: both
}

.pkp_help_link {
  display: inline-block;
  padding: .25rem 0;
  font-size: .75rem;
  line-height: 1rem;
  font-weight: 700;
  text-decoration: none;
  border: none;
  box-shadow: none;
  color: #4b7d92;
  z-index: 3
}

.pkp_help_link:hover,
.pkp_help_link:focus {
  color: #6298ae
}

.pkp_help_link:focus {
  outline: 0;
  box-shadow: 0 0 0 3px #4b7d92;
  border-radius: 3px
}

.pkp_help_tab,
.pkp_help_modal {
  position: absolute;
  top: -2rem;
  right: 2rem;
  padding: .5rem 1em;
  background: #fff;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px
}

.pkp_help_modal {
  top: 0.5rem;
  padding: 0.5rem;
  right: 3rem;
  border: none
}

.pkp_uploadedFile_summary {
  font-size: .93rem;
  line-height: 1.43rem
}

.pkp_uploadedFile_summary .filename .display {
  line-height: 2rem
}

.pkp_uploadedFile_summary .filename .edit {
  line-height: 1.43rem
}

.pkp_uploadedFile_summary .details {
  margin-top: 0.5rem;
  color: rgba(0, 0, 0, 0.54)
}

.pkp_uploadedFile_summary .details>span {
  margin-left: 2rem
}

.pkp_uploadedFile_summary .details>span:first-child {
  margin-left: 0
}

.pkp_uploadedFile_summary .details>span:before {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transform: translate(0, 0);
  padding-right: 0.25em;
  color: #aaa
}

.pkp_uploadedFile_summary .pixels:before {
  content: "\f108"
}

.pkp_uploadedFile_summary .print {
  margin-left: 2rem
}

.pkp_uploadedFile_summary .print:before {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transform: translate(0, 0);
  padding-right: 0.25em;
  color: #aaa;
  content: "\f02f"
}

.pkp_uploadedFile_summary .type:before {
  content: "\f016"
}

.pkp_uploadedFile_summary .type.pdf:before {
  content: "\f1c1"
}

.pkp_uploadedFile_summary .type.doc:before,
.pkp_uploadedFile_summary .type.docx:before {
  content: "\f1c2"
}

.pkp_uploadedFile_summary .type.xls:before,
.pkp_uploadedFile_summary .type.xlsx:before {
  content: "\f1c3"
}

.pkp_uploadedFile_summary .file_size:before {
  content: "\f0a0"
}

.pkp_helpers_invisible {
  visibility: hidden
}

.pkp_helpers_display_none {
  display: none !important
}

.pkp_helpers_align_left {
  float: left
}

.pkp_helpers_align_right {
  float: right
}

.pkp_helpers_text_left {
  text-align: left
}

.pkp_helpers_text_right {
  text-align: right
}

.pkp_helpers_text_center {
  text-align: center
}

.pkp_helpers_text_justify {
  text-align: justify
}

.pkp_helpers_title_padding {
  padding: 5px !important
}

.pkp_helpers_image_left {
  float: left;
  margin: 4px 10px 4px 0
}

.pkp_helpers_image_right {
  float: right;
  margin: 4px 0 4px 10px
}

.pkp_helpers_container_center {
  margin: 0 auto
}

.pkp_helpers_debug,
.pkp_helpers_debug div {
  border: 1px dashed #f00;
  padding: 2px
}

.pkp_helpers_flatlist {
  margin: 0;
  padding: 0
}

.pkp_helpers_flatlist li {
  float: left;
  position: relative
}

.pkp_helpers_bulletlist li {
  list-style: disc
}

.pkp_helpers_icon_link_valign {
  line-height: 24px
}

.pkp_helpers_moveicon {
  cursor: move
}

.pkp_helpers_full {
  width: 100%
}

.pkp_helpers_half {
  width: 50%
}

.pkp_helpers_third {
  width: 33%
}

.pkp_helpers_quarter {
  width: 25%
}

.pkp_helpers_fifth {
  width: 20%
}

.pkp_helpers_threeQuarter {
  width: 75%
}

.pkp_helpers_underline:after {
  border-bottom: 2px solid #fff;
  content: " ";
  display: block
}

.pkp_helpers_dotted_underline {
  border-bottom: 1px dotted #999
}

.pkp_helpers_black_bg {
  background-color: black
}

.pkp_helpers_text_warn {
  color: #d00a6c
}

.pkp_helpers_text_primary {
  color: black
}

.NMI_TYPE_CUSTOM_EDIT {
  display: none
}

.pkp_helpers_form_input_title_text {
  font-weight: bold;
  color: #777777
}

.row:before,
.row:after {
  content: " ";
  display: table
}

.row:after {
  clear: both
}

.cmp_button,
.cmp_form .buttons button,
.page_lost_password .buttons button,
.page_search .submit button,
.block_make_submission a {
  display: inline-block;
  padding: 0 1em;
  background: #eee;
  border: 1px solid rgba(0, 0, 0, 0.4);
  border-top-color: #bbb;
  border-radius: 3px;
  box-shadow: inset 0 -1em 1em rgba(0, 0, 0, 0.1);
  font-size: .93rem;
  line-height: calc(2.143rem - 2px);
  font-weight: 700;
  color: #4b7d92;
  text-decoration: none
}

.cmp_button:hover,
.cmp_button:focus,
.page_search .submit button:hover,
.page_search .submit button:focus {
  box-shadow: inset 0 1em 1em rgba(0, 0, 0, 0.1)
}

.cmp_button_wire,
.obj_galley_link {
  display: inline-block;
  padding: 0 1em;
  background: #fff;
  border: 1px solid #4b7d92;
  border-radius: 3px;
  font-size: .93rem;
  line-height: calc(2.143rem - 2px);
  color: #4b7d92;
  text-decoration: none
}

.cmp_button_wire:hover,
.cmp_button_wire:focus,
.obj_galley_link:hover,
.obj_galley_link:focus {
  background: #4b7d92;
  color: #fff
}

.cmp_article_list>li {
  margin-bottom: 2.143rem
}

.cmp_article_list>li:before,
.cmp_article_list>li:after {
  content: " ";
  display: table
}

.cmp_article_list>li:after {
  clear: both
}

.cmp_form fieldset {
  margin: 0 0 1.43rem;
  padding: 0;
  border: none
}

.cmp_form legend {
  margin-bottom: .714rem;
  font-size: 1.143rem;
  font-weight: 700;
  line-height: 1.43rem
}

.cmp_form .fields>div {
  position: relative;
  padding-bottom: 2.143rem
}

.cmp_form .fields>div .error {
  position: absolute;
  left: 0.5em;
  bottom: 11px;
  padding: 0 .5em;
  background: #ff4040;
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
  font-size: .93rem;
  line-height: 1.43rem;
  font-weight: 700;
  color: #fff
}

.cmp_form label {
  display: block;
  cursor: pointer
}

.cmp_form .label {
  display: block;
  font-size: .93rem;
  font-weight: 400
}

.cmp_form input[type="text"],
.cmp_form input[type="email"],
.cmp_form input[type="password"],
.cmp_form input[type="url"],
.cmp_form input[type="tel"],
.cmp_form select,
.cmp_form textarea {
  padding: 0 .5em;
  width: 100%;
  height: calc(2.143rem - 2px);
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.4);
  border-radius: 3px;
  font-size: .93rem;
  line-height: calc(2.143rem - 2px)
}

.cmp_form textarea {
  width: 100%;
  height: 8em
}

.cmp_form .pkp_form_error {
  margin-bottom: .714rem;
  border-radius: 3px;
  padding: 0 .5em;
  font-weight: 700;
  font-size: .93rem;
  background: #ff4040;
  color: #fff
}

.cmp_form label>input[type="checkbox"],
.cmp_form label>input[type="radio"] {
  margin-right: 0.25em
}

.cmp_form .buttons:before,
.cmp_form .buttons:after {
  content: " ";
  display: table
}

.cmp_form .buttons:after {
  clear: both
}

.cmp_form .buttons a {
  font-size: .93rem;
  line-height: 2.143rem;
  margin-left: 1em
}

.cmp_form .description {
  margin-top: 0;
  font-size: .93rem;
  line-height: 1.5em;
  color: rgba(0, 0, 0, 0.54)
}

@media (min-width: 480px) {

  .cmp_form input[type="text"],
  .cmp_form input[type="email"],
  .cmp_form input[type="password"],
  .cmp_form input[type="url"],
  .cmp_form input[type="tel"],
  .cmp_form select {
    max-width: 20em
  }
}

.cmp_pagination {
  text-align: right
}

.cmp_pagination:before,
.cmp_pagination:after {
  content: " ";
  display: table
}

.cmp_pagination:after {
  clear: both
}

.cmp_pagination .prev {
  float: left;
  margin-right: 0.5em;
  text-decoration: none
}

.cmp_pagination .prev:before {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transform: translate(0, 0);
  content: "\f177";
  margin-right: 0.5em
}

.cmp_pagination .next {
  margin-left: 0.5em;
  text-decoration: none
}

.cmp_pagination .next:after {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transform: translate(0, 0);
  content: "\f178";
  margin-left: 0.5em
}

.cmp_edit_link {
  display: inline-block;
  margin-left: 1em;
  font-size: .93rem;
  font-weight: 400;
  line-height: 1;
  vertical-align: middle;
  text-decoration: none
}

.cmp_edit_link:before {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transform: translate(0, 0);
  content: "\f040"
}

.cmp_search_filter {
  margin-bottom: .714rem;
  font-size: .93rem
}

.cmp_search_filter:last-child {
  margin-bottom: 0
}

.cmp_search_filter label {
  font-style: italic
}

.cmp_search_filter .delete {
  color: #ff4040
}

.cmp_notification {
  display: block;
  width: 100%;
  padding: 1.43rem;
  margin-bottom: 2.857rem;
  background: #ddd;
  border-left: .357rem solid #4b7d92;
  font-size: 1rem;
  line-height: 1.43rem
}

.cmp_notification .success {
  border-color: #00b24e
}

.cmp_notification .no {
  border-color: #ff4040
}

.cmp_breadcrumbs {
  display: inline-block
}

.cmp_breadcrumbs ol {
  margin-bottom: 2.143rem;
  padding: .357rem 0;
  line-height: 1.43rem;
  font-size: .93rem
}

.cmp_breadcrumbs li {
  display: inline-block
}

.cmp_breadcrumbs a {
  display: inline-block;
  text-decoration: none
}

.cmp_breadcrumbs .separator {
  color: rgba(0, 0, 0, 0.54);
  padding: 0 .5em
}

.cmp_breadcrumbs .current {
  color: rgba(0, 0, 0, 0.54)
}

.cmp_breadcrumbs .current h1 {
  margin: 0;
  font-family: "Noto Serif", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif;
  font-size: .93rem;
  font-weight: 400
}

.cmp_back_link {
  margin-top: 1.43rem
}

.cmp_announcements.cmp_announcements {
  margin-left: -0.714rem;
  margin-right: -0.714rem
}

.cmp_announcements.cmp_announcements>li {
  padding: 2.143rem .714rem;
  border-bottom: 1px solid #ddd
}

.cmp_announcements.cmp_announcements>li:last-child {
  border-bottom: none
}

@media (min-width: 480px) {
  .cmp_announcements.cmp_announcements {
    margin-left: -1.43rem;
    margin-right: -1.43rem
  }

  .cmp_announcements.cmp_announcements>li {
    padding-left: 1.43rem;
    padding-right: 1.43rem
  }
}

@media (min-width: 992px) {
  .cmp_announcements.cmp_announcements {
    margin-left: -2.143rem;
    margin-right: -2.143rem
  }

  .cmp_announcements.cmp_announcements>li {
    padding-left: 2.143rem;
    padding-right: 2.143rem
  }
}

.cmp_skip_to_content a {
  display: block;
  padding: 1em;
  z-index: 99999;
  background: #fff;
  transform: translateX(-50%)
}

.cmp_skip_to_content a:focus {
  clip: auto;
  top: 0;
  left: 50%;
  color: #4b7d92
}

.cmp_table {
  width: 100%;
  border: 1px solid #ddd;
  border-bottom: none;
  border-collapse: collapse
}

.cmp_table th,
.cmp_table td {
  padding: 0.5em;
  text-align: left;
  border-bottom: 1px solid #ddd
}

.cmp_table th {
  font-weight: 700
}

body {
  font-family: "Noto Serif", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif;
  font-size: 14px;
  line-height: 1.43rem;
  color: rgba(0, 0, 0, 0.87);
  background: transparent !important;
}

body {
  /* Base gradient background */
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 25%, #334155 50%, #1e293b 75%, #0f172a 100%);
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;

  /* Font untuk demo */
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: #1e293b;
}

/* Grid Pattern menggunakan ::before */
/* body::before {
    content: '';
    position: fixed;
    top: -10%;
    left: -10%;
    width: 120%;
    height: 120%;
    background-image: 
        linear-gradient(rgba(59, 130, 246, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(59, 130, 246, 0.1) 1px, transparent 1px);
    background-size: 50px 50px;
    z-index: -2;
    animation: gridMove 15s linear infinite;
    pointer-events: none;
} */

/* Moving Shapes menggunakan ::after */
/* body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
    background-image:
        radial-gradient(2px 2px at 20% 30%, rgba(59, 130, 246, 0.8), transparent),
        radial-gradient(2px 2px at 40% 70%, rgba(59, 130, 246, 0.6), transparent),
        radial-gradient(1px 1px at 90% 40%, rgba(59, 130, 246, 0.5), transparent),
        radial-gradient(1px 1px at 50% 50%, rgba(59, 130, 246, 0.4), transparent),
        radial-gradient(2px 2px at 80% 10%, rgba(59, 130, 246, 0.7), transparent),
        
        radial-gradient(circle at 15% 20%, rgba(30, 58, 138, 0.3) 1px, transparent 2px),
        radial-gradient(circle at 75% 60%, rgba(30, 58, 138, 0.2) 1px, transparent 2px),
        radial-gradient(circle at 60% 15%, rgba(30, 58, 138, 0.4) 1px, transparent 2px),
        
        radial-gradient(ellipse at 25% 80%, rgba(59, 130, 246, 0.1) 40%, transparent 70%),
        radial-gradient(ellipse at 85% 25%, rgba(30, 58, 138, 0.15) 30%, transparent 60%);
    
    background-size: 
        200px 200px, 300px 300px, 150px 150px, 250px 250px, 180px 180px,
        100px 100px, 120px 120px, 80px 80px,
        400px 300px, 350px 400px;
    
    animation: shapesMove 10s ease-in-out infinite;
} */

@keyframes gridMove {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }

  25% {
    transform: translate(10px, 10px) rotate(0.5deg);
  }

  50% {
    transform: translate(20px, -10px) rotate(-0.5deg);
  }

  75% {
    transform: translate(-10px, 20px) rotate(0.3deg);
  }

  100% {
    transform: translate(0, 0) rotate(0deg);
  }
}

@keyframes shapesMove {

  0%,
  100% {
    background-position:
      0% 0%, 10% 10%, 20% 20%, 30% 30%, 40% 40%,
      50% 50%, 60% 60%, 70% 70%,
      0% 100%, 100% 0%;
  }

  25% {
    background-position:
      10% 5%, 20% 15%, 30% 25%, 40% 35%, 50% 45%,
      60% 55%, 70% 65%, 80% 75%,
      10% 90%, 90% 10%;
  }

  50% {
    background-position:
      20% 10%, 30% 20%, 40% 30%, 50% 40%, 60% 50%,
      70% 60%, 80% 70%, 90% 80%,
      20% 80%, 80% 20%;
  }

  75% {
    background-position:
      15% 15%, 25% 25%, 35% 35%, 45% 45%, 55% 55%,
      65% 65%, 75% 75%, 85% 85%,
      15% 85%, 85% 15%;
  }
}



a {
  color: #4b7d92
}

a:hover,
a:focus {
  color: #6298ae
}

.pkp_site_name_wrapper,
.pkp_navigation_primary_wrapper,
.pkp_navigation_user,
.pkp_search_mobile,
.pkp_structure_content,
.pkp_structure_footer {
  position: relative;
  width: 100%;
  margin: 0 auto;
  padding-left: .714rem;
  padding-right: .714rem
}

.pkp_site_name_wrapper:before,
.pkp_navigation_primary_wrapper:before,
.pkp_navigation_user:before,
.pkp_search_mobile:before,
.pkp_structure_content:before,
.pkp_structure_footer:before,
.pkp_site_name_wrapper:after,
.pkp_navigation_primary_wrapper:after,
.pkp_navigation_user:after,
.pkp_search_mobile:after,
.pkp_structure_content:after,
.pkp_structure_footer:after {
  content: " ";
  display: table
}

.pkp_site_name_wrapper:after,
.pkp_navigation_primary_wrapper:after,
.pkp_navigation_user:after,
.pkp_search_mobile:after,
.pkp_structure_content:after,
.pkp_structure_footer:after {
  clear: both
}

@media (min-width: 768px) {

  .pkp_site_name_wrapper,
  .pkp_navigation_primary_wrapper,
  .pkp_navigation_user,
  .pkp_search_mobile,
  .pkp_structure_content,
  .pkp_structure_footer {
    width: 728px;
    padding: 0
  }
}

@media (min-width: 992px) {

  .pkp_site_name_wrapper,
  .pkp_navigation_primary_wrapper,
  .pkp_navigation_user,
  .pkp_search_mobile,
  .pkp_structure_content,
  .pkp_structure_footer {
    width: 952px
  }
}

@media (min-width: 1200px) {

  .pkp_site_name_wrapper,
  .pkp_navigation_primary_wrapper,
  .pkp_navigation_user,
  .pkp_search_mobile,
  .pkp_structure_content,
  .pkp_structure_footer {
    width: 1160px
  }
}

.has_site_logo .pkp_site_name,
.has_site_logo .pkp_navigation_primary_wrapper {
  width: auto
}

.has_site_logo .pkp_head_wrapper {
  position: relative;
  width: 100%;
  margin: 0 auto;
  padding-right: .714rem
}

.has_site_logo .pkp_head_wrapper:before,
.has_site_logo .pkp_head_wrapper:after {
  content: " ";
  display: table
}

.has_site_logo .pkp_head_wrapper:after {
  clear: both
}

@media (min-width: 768px) {
  .has_site_logo .pkp_head_wrapper {
    width: 728px;
    padding-left: 0;
    padding-right: 0
  }
}

@media (min-width: 992px) {
  .has_site_logo .pkp_head_wrapper {
    width: 952px
  }
}

@media (min-width: 1200px) {
  .has_site_logo .pkp_head_wrapper {
    width: 1160px
  }
}

.pkp_structure_main {
  padding: .714rem
}

@media (min-width: 480px) {
  .pkp_structure_main {
    padding: 1.43rem
  }
}

@media (min-width: 768px) {

  .pkp_structure_main:before,
  .pkp_structure_main:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 1px;
    background: #ffffff;
  }

  .pkp_structure_main:after {
    left: 728px
  }
}

@media (min-width: 992px) {
  .pkp_structure_content {
    padding-top: 2.143rem
  }

  .pkp_structure_sidebar {
    float: right;
    width: 300px
  }

  .pkp_structure_main {
    float: left;
    padding: 0 2.143rem 6.429rem;
    width: 652px
  }

  .pkp_structure_main:after {
    left: 652px
  }
}

@media (min-width: 1200px) {
  .pkp_structure_main {
    width: 860px
  }

  .pkp_structure_main:after {
    left: 860px
  }
}

@media (min-width: 992px) {
  .pkp_structure_main:first-child:last-child {
    float: none;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2.857rem
  }

  .pkp_structure_main:first-child:last-child:before {
    left: 150px
  }

  .pkp_structure_main:first-child:last-child:after {
    left: auto;
    right: 150px
  }
}

img {
  max-width: 100%;
  width: auto;
  height: auto
}

/*
.pkp_structure_head {
background: linear-gradient(-45deg,
  #6B3400,  /* burnt brown */
#8C4500,
/* deep amber */
#B85B00,
/* amber kuat */
#478b8c,
/* warna utama */
#478b8c,
/* amber terang */
#478b8c,
/* golden peach */
#478b8c,
/* soft gold */
#478b8c
/* creamy highlight 
);
    background-size: 300% 300%;
    animation: gradientShift 8s ease infinite;
}
*/


.pkp_head_wrapper {
  position: relative
}

.pkp_site_name_wrapper {
  height: 2.857rem
}

@media (min-width: 992px) {
  .pkp_site_name_wrapper {
    height: auto
  }
}

.pkp_site_name {
  position: absolute;
  left: 2.857rem;
  right: 0;
  margin-top: 0;
  margin-bottom: 0;
  padding-left: .714rem;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #fff;
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif;
  font-size: .93rem
}

/* Tinggi header sesuai desain, misalnya 200px */
.pkp_site_name_wrapper {
  height: auto !important;
  display: block;
}

.pkp_site_name {
  width: 100% !important;
  height: auto !important;
  position: relative !important;
  left: auto !important;
  right: auto !important;
  display: block !important;
  padding: 0 !important;
  overflow: visible !important;
  white-space: normal !important;
}

.pkp_site_name a.is_img {
  width: 100%;
  display: block;
  margin: 0px;
}

.pkp_site_name a.is_img img,
.pkp_site_name .is_img img {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: none !important;
  object-fit: contain !important;
  display: block !important;
}

.pkp_site_name .is_text {
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif;
  font-size: .93rem;
  font-weight: 700;
  line-height: 2.857rem;
  color: #fff;
  text-decoration: none
}

.pkp_site_name .is_text:focus {
  text-decoration: none;
}

.pkp_navigation_primary_wrapper {
  padding-left: 0;
  padding-right: 0
}

.pkp_site_nav_menu {
  position: absolute;
  width: 100%;
  top: 100%;
  background: black;
  left: 0;
  padding: .714rem;
  z-index: 9999
}

.pkp_site_nav_menu .pkp_nav_list {
  padding-left: 0;
  margin-left: 0
}

.pkp_site_nav_menu ul ul {
  padding-left: 0.5rem
}

.pkp_site_nav_menu a {
  display: inline-block;
  padding: .125rem 0;
  color: #fff;
  text-decoration: none
}

.pkp_site_nav_menu a:hover,
.pkp_site_nav_menu a:focus {
  color: #fff;
  text-decoration: underline
}

.pkp_site_nav_menu #siteNav {
  position: absolute;
  top: 0;
  height: 0
}

.pkp_navigation_user.pkp_navigation_user {
  margin-left: auto;
  margin-right: auto;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1)
}

.pkp_navigation_user .task_count {
  display: inline-block;
  width: 1.43rem;
  height: 1.43rem;
  margin-left: 0.5em;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  line-height: 1.43rem;
  text-align: center;
  font-size: 0.857rem;
  position: relative
}

.pkp_navigation_user>li>a .task_count {
  display: none
}

.pkp_navigation_user>li>ul a .task_count {
  display: inline-block;
  background: rgba(255, 255, 255, 0.1);
  color: #fff
}

.pkp_navigation_user>li>ul a:hover .task_count,
.pkp_navigation_user>li>ul a:focus .task_count {
  background: rgba(0, 0, 0, 0.87)
}

.pkp_navigation_search_wrapper {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1)
}

@media (min-width: 992px) {
  .pkp_head_wrapper {
    padding-top: 4.286rem
  }

  .pkp_site_nav_toggle {
    display: none
  }

  .pkp_site_name {
    position: relative;
    width: 100%;
    left: auto;
    right: auto;
    padding: 0;
    white-space: normal;
    font-size: 2em;
    background: transparent;
    overflow: visible
  }



  .pkp_site_name .is_text {
    font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif;
    font-size: 1.714rem;
    line-height: 2.143rem
  }

  .pkp_site_name .is_img img {
    width: 100% !important;
    max-height: none !important;
  }

  .pkp_site_nav_menu {
    display: block;
    position: static;
    top: auto;
    padding: 0
  }

  .pkp_site_nav_menu ul ul {
    padding-left: 0
  }

  .has_site_logo .pkp_head_wrapper {
    padding-top: 2.143rem
  }

  .pkp_nav_list {
    margin: 0;
    padding: 0;
    list-style: none
  }

  .pkp_nav_list li {
    position: relative;
    display: inline-block
  }

  .pkp_nav_list a {
    display: inline-block;
    padding-left: .714rem;
    padding-right: .714rem;
    text-decoration: none;
    padding-top: .357rem;
    padding-bottom: .357rem
  }

  .pkp_nav_list a:hover,
  .pkp_nav_list a:focus {
    text-decoration: none
  }

  .pkp_nav_list ul {
    position: absolute;
    top: 100%;
    left: -9999px;
    z-index: 1000;
    width: 15em;
    margin: 0;
    padding: 0;
    background: #fff;
    border-radius: 3px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3)
  }

  .pkp_nav_list ul li {
    display: block
  }

  .pkp_nav_list ul a {
    display: block;
    padding-left: .357rem;
    border-left: .357rem solid transparent;
    color: #4b7d92
  }

  .pkp_nav_list ul a:hover,
  .pkp_nav_list ul a:focus {
    outline: 0;
    background: #ddd;
    border-color: #4b7d92;
    color: #4b7d92
  }

  .pkp_nav_list ul li:first-child a {
    border-top-left-radius: 3px;
    border-top-right-radius: 3px
  }

  .pkp_nav_list ul li:last-child a {
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px
  }

  .pkp_nav_list>li:hover ul {
    left: 0
  }

  .pkp_nav_list [aria-haspopup]:after {
    position: relative;
    display: inline-block;
    content: "";
    width: 0;
    height: 0;
    margin-left: 0.25em;
    border-top: 4px solid;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
    vertical-align: middle;
    overflow: hidden
  }

  .pkp_navigation_primary {
    text-align: center
  }

  .pkp_navigation_primary>li>a {
    margin: .357rem .5em 0;
    padding: .357rem .5em calc(.714rem - 2px);
    border-bottom: 2px solid transparent;
    color: #fff;
    text-decoration: none
  }

  .pkp_navigation_primary>li>a:hover {
    color: #fff;
    outline: 0;
    border-color: #fff
  }

  .pkp_navigation_primary>li>a:focus {
    background: #fff;
    color: #000;
    outline: 0
  }

  .pkp_navigation_primary>li:first-child a {
    margin-left: -0.5em
  }

  .pkp_navigation_primary>li:last-child a {
    margin-right: -0.5em
  }

  .pkp_navigation_primary>li:hover ul {
    position: absolute;
    transform: translate3d(7px, 40px, 0px);
    top: 0;
    left: 0;
    will-change: transform
  }

  .pkp_navigation_primary ul a {
    padding-top: .714rem;
    padding-bottom: .714rem
  }

  .pkp_navigation_primary [aria-haspopup]:hover {
    border-color: transparent
  }

  .pkp_navigation_primary .dropdown-menu a:focus,
  .pkp_navigation_primary .dropdown-menu a:hover {
    border-color: #4b7d92
  }

  .dropdown-menu {
    display: none
  }

  .dropdown-menu.show {
    display: block
  }

  [data-toggle="dropdown"]:hover+.dropdown-menu,
  .dropdown-menu:hover {
    display: block
  }

  .pkp_navigation_user_wrapper {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    padding-left: .714rem;
    padding-right: .714rem;
    text-align: right;
    padding-top: 0;
    margin-top: 0;
    border-top: none;
    z-index: 1000
  }

  .pkp_navigation_user {
    text-align: right;
    font-size: .93rem;
    padding-right: 1.43rem
  }

  .pkp_navigation_user.pkp_navigation_user {
    margin: 0;
    padding: 0;
    border: none
  }

  .pkp_navigation_user li {
    text-align: center;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    padding: 0.1rem 1.2rem;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.3s ease;
  }

  .pkp_navigation_user li:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
  }

  .pkp_navigation_user a {
    padding-top: .357rem;
    padding-bottom: .357rem;
    line-height: 1.43rem
  }

  .pkp_navigation_user>li>a:focus {
    outline: 0;
    background: #fff;
    color: #000
  }

  .pkp_navigation_user ul {
    width: 10em
  }

  .pkp_navigation_user>li:hover ul {
    position: absolute;
    top: 0;
    left: 0;
    transform: translate3d(0px, 30px, 0px);
    will-change: transform
  }

  .pkp_navigation_user>li:last-child>a {
    margin-right: -0.714rem
  }

  .pkp_navigation_user>li>a .task_count {
    display: inline-block
  }

  .pkp_navigation_user>li>a:focus .task_count {
    background: #000;
    color: #fff
  }

  .pkp_navigation_user>li>ul a .task_count {
    display: none
  }

  .pkp_navigation_search_wrapper {
    float: right;
    margin: 0;
    padding: 0;
    border: none
  }

  .pkp_navigation_search_wrapper a {
    margin: .357rem .5em 0;
    padding: .357rem .5em calc(.714rem - 2px);
    border-bottom: 2px solid transparent;
    color: black;
    text-decoration: none
  }

  .pkp_navigation_search_wrapper a:hover {
    color: black;
    outline: 0;
    border-color: #fff;
    text-decoration: none
  }

  .pkp_navigation_search_wrapper a:focus {
    background: #fff;
    color: #000;
    outline: 0;
    text-decoration: none
  }
}

@media (min-width: 992px) and (min-width:992px) {
  .pkp_navigation_primary {
    display: inline-block;
    max-width: 80%;
    text-align: left
  }
}

.pkp_structure_main h1 {
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif;
  font-size: 1.714rem;
  line-height: 2.143rem;
  font-weight: 700
}

.pkp_structure_main h2 {
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif;
  font-size: 1.285rem;
  line-height: 2.143rem;
  font-weight: 700
}

.pkp_structure_main h3 {
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif;
  font-size: 1.143rem;
  line-height: 1.43rem;
  font-weight: 700
}

.pkp_structure_main h4 {
  font-size: 1rem;
  line-height: 1.43rem;
  font-weight: 700
}

.pkp_structure_main h5 {
  font-size: 1rem;
  line-height: 1.43rem;
  font-weight: 400
}

.pkp_structure_main h6 {
  font-size: .93rem;
  line-height: 1.43rem;
  font-weight: 700
}

.pkp_structure_main h1,
.pkp_structure_main h2,
.pkp_structure_main h3,
.pkp_structure_main h4 {
  margin: 2.857rem 0 1.43rem
}

.pkp_structure_main h5,
.pkp_structure_main h6 {
  margin: 1.43rem 0
}

.pkp_structure_main p,
.pkp_structure_main ul {
  line-height: 1.785rem;
  margin: 1.43rem 0
}

.pkp_structure_main p:last-child {
  margin-bottom: 0
}

.pkp_structure_main .page h1 {
  margin-top: 0
}

.pkp_structure_main .page>.cmp_edit_link {
  float: right;
  padding: .357rem 0;
  line-height: 2.143rem
}

.pkp_structure_main .page .monograph_count {
  float: right;
  padding: .714rem 0;
  font-size: .93rem;
  color: rgba(0, 0, 0, 0.54)
}

.pkp_structure_main .page .about_section {
  color: rgba(0, 0, 0, 0.54);
  line-height: 2.143rem
}

.pkp_structure_main .page .about_section:before,
.pkp_structure_main .page .about_section:after {
  content: " ";
  display: table
}

.pkp_structure_main .page .about_section:after {
  clear: both
}

.pkp_structure_main .page .about_section .cover {
  float: right;
  width: 20%;
  margin-left: 10%;
  margin-right: 10%
}

.pkp_structure_main .page .about_section .cover img {
  display: block;
  margin: 0 auto
}

.pkp_structure_main .page .about_section .description p:first-child {
  margin-top: 0
}

.pkp_structure_main .page .about_section .description p:last-child {
  margin-bottom: 0
}

@media (max-width: 480px) {
  .pkp_structure_main .page .about_section {
    font-size: 1.143rem;
    font-style: italic
  }

  .cmp_article_list.articles {
    display: grid;
    grid-template-columns: 1fr !important;
    gap: 24px;
    margin-top: 20px;
    align-items: stretch;
  }
}

.pkp_site_nav_toggle {
  position: absolute;
  top: 0;
  left: 0;
  width: 2.857rem;
  height: 2.857rem;
  border: 0;
  background: none;
  box-shadow: 1px 0 0 rgba(255, 255, 255, 0.2), -1px 0 0 rgba(255, 255, 255, 0.2);
  z-index: 999
}

.pkp_site_nav_toggle:focus {
  outline: 1px dotted #fff;
  box-shadow: none
}

.pkp_site_nav_toggle>span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 24px;
  height: 19px;
  border-bottom: 3px solid #fff;
  text-indent: -9999px;
  overflow: hidden
}

.pkp_site_nav_toggle>span:before,
.pkp_site_nav_toggle>span:after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 3px;
  background: #fff
}

.pkp_site_nav_toggle>span:before {
  top: 0
}

.pkp_site_nav_toggle>span:after {
  top: 8px
}

.pkp_site_nav_toggle--transform>span {
  border-bottom: 0;
  overflow: visible
}

.pkp_site_nav_toggle--transform>span:before {
  top: 7px;
  transform: rotate(-405deg) translateY(1px) translateX(-2px);
  -webkit-transform: rotate(-405deg) translateY(1px) translateX(-2px)
}

.pkp_site_nav_toggle--transform>span:after {
  top: 14px;
  transform: rotate(405deg) translateY(-3px) translateX(-4px);
  -webkit-transform: rotate(405deg) translateY(-3px) translateX(-4px)
}

.pkp_site_nav_menu {
  display: none
}

.pkp_site_nav_menu--isOpen {
  background-color: #478b8c;
  display: block
}

body.navIsOpen .siteHeader__details {
  right: 0
}

body.navIsOpen .siteHeader__screen {
  display: block;
  opacity: 0.5
}

body.navIsOpen .siteHeader__navToggleIcon>span:first-child {
  transform: rotate(45deg);
  top: 18px
}

body.navIsOpen .siteHeader__navToggleIcon>span:nth-child(2) {
  opacity: 0
}

body.navIsOpen .siteHeader__navToggleIcon>span:last-child {
  transform: rotate(-45deg);
  top: 18px
}

@media (min-width: 992px) {
  .pkp_site_nav_menu {
    display: block
  }
}

.pkp_page_index .journals {
  margin-top: 2.143rem
}

.pkp_page_index .journals>ul>li {
  margin: 2.143rem 0
}

.pkp_page_index .journals img {
  display: block;
  max-height: 20em
}

.pkp_page_index .journals h3 {
  margin: .714rem 0;
  font-size: 1rem;
  font-weight: 700
}

.pkp_page_index .journals h3 a {
  text-decoration: none
}

.pkp_page_index .journals p {
  margin: .714rem 0
}

.pkp_page_index .journals .links li {
  display: inline-block;
  margin: 0 .714rem .714rem 0
}

@media (min-width: 768px) {
  .pkp_page_index .journals>ul>li {
    margin: 0 -1.43rem;
    padding: 1.43rem;
    border-top: 1px solid #ddd
  }

  .pkp_page_index .journals>ul>li:before,
  .pkp_page_index .journals>ul>li:after {
    content: " ";
    display: table
  }

  .pkp_page_index .journals>ul>li:after {
    clear: both
  }

  .pkp_page_index .journals .thumb {
    float: left;
    width: 25%;
    padding-right: 1.43rem
  }

  .pkp_page_index .journals .thumb+.body {
    float: right;
    width: 75%
  }
}

@media (min-width: 992px) {
  .pkp_page_index .journals>ul>li {
    margin: 0 -2.143rem;
    padding: 2.143rem
  }

  .pkp_page_index .journals .thumb {
    padding-right: 2.143rem
  }
}

.pkp_page_index .homepage_image,
.pkp_page_index .additional_content {
  margin-left: -0.714rem;
  margin-right: -0.714rem
}

@media (min-width: 480px) {

  .pkp_page_index .homepage_image,
  .pkp_page_index .additional_content {
    margin-left: -1.43rem;
    margin-right: -1.43rem
  }
}

@media (min-width: 992px) {

  .pkp_page_index .homepage_image,
  .pkp_page_index .additional_content {
    margin-left: -2.143rem;
    margin-right: -2.143rem
  }
}

.pkp_page_index .homepage_image img {
  display: block;
  width: 100%;
  height: auto
}

@media (min-width: 992px) {
  .pkp_page_index .homepage_image {
    margin-top: -2.143rem
  }
}

.pkp_page_index .homepage_about {
  padding-top: 2.143rem;
  padding-bottom: 2.143rem
}

.pkp_page_index .homepage_about h2 {
  margin-top: -0.714rem
}

.pkp_page_index .cmp_announcements {
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd
}

.pkp_page_index .cmp_announcements:before,
.pkp_page_index .cmp_announcements:after {
  content: " ";
  display: table
}

.pkp_page_index .cmp_announcements:after {
  clear: both
}

.pkp_page_index .cmp_announcements>.obj_announcement_summary {
  position: relative;
  padding: 2.143rem .714rem
}

.pkp_page_index .cmp_announcements .more {
  position: relative
}

.pkp_page_index .cmp_announcements .more .obj_announcement_summary {
  padding: .714rem
}

.pkp_page_index .cmp_announcements .more h4 {
  font-size: .93rem
}

@media (min-width: 480px) {

  .pkp_page_index .cmp_announcements>.obj_announcement_summary,
  .pkp_page_index .cmp_announcements .more .obj_announcement_summary {
    padding-left: 1.43rem;
    padding-right: 1.43rem
  }
}

@media (min-width: 768px) {
  .pkp_page_index .cmp_announcements>.obj_announcement_summary {
    float: left;
    width: 65%
  }

  .pkp_page_index .cmp_announcements>.obj_announcement_summary:before {
    content: ' ';
    position: absolute;
    top: 0;
    right: -1px;
    width: 1px;
    height: 100%;
    border-left: 1px solid #ddd
  }

  .pkp_page_index .cmp_announcements .more {
    float: right;
    width: 35%;
    padding-top: 1.43rem;
    padding-bottom: 1.43rem
  }

  .pkp_page_index .cmp_announcements .more:before {
    content: ' ';
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 100%;
    border-left: 1px solid #ddd
  }
}

@media (min-width: 992px) {

  .pkp_page_index .cmp_announcements>.obj_announcement_summary,
  .pkp_page_index .cmp_announcements .more .obj_announcement_summary {
    padding-left: 2.143rem;
    padding-right: 2.143rem
  }
}

.pkp_page_index .current_issue .current_issue_title {
  margin: 1.43rem 0;
  font-weight: 700
}

.pkp_page_index .current_issue .read_more {
  display: inline-block;
  position: relative;
  padding-right: 2.143rem;
  font-size: .93rem;
  font-weight: 700;
  line-height: 2.143rem;
  color: #4b7d92;
  text-decoration: none;
  margin-bottom: 1.43rem
}

.pkp_page_index .current_issue .read_more:after {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transform: translate(0, 0);
  content: "\f054";
  position: absolute;
  top: 2px;
  right: 0;
  width: 2.143rem;
  height: 2.143rem;
  line-height: 2.143rem;
  text-align: center
}

.pkp_page_index .current_issue .read_more:hover,
.pkp_page_index .current_issue .read_more:focus {
  color: #6298ae
}

@media (min-width: 768px) {
  .pkp_page_index .current_issue .section:last-child {
    margin-bottom: 0
  }
}

.pkp_page_index .additional_content {
  padding: 2.143rem .714rem 0 .714rem;
  border-top: 1px solid #ddd
}

@media (min-width: 480px) {
  .pkp_page_index .additional_content {
    padding-left: 1.43rem;
    padding-right: 1.43rem
  }
}

@media (min-width: 992px) {
  .pkp_page_index .additional_content {
    padding-left: 2.143rem;
    padding-right: 2.143rem;
    padding-top: 0px;
  }
}

.pkp_page_index .additional_content>p:first-child {
  margin-top: 0
}

.pkp_page_index .additional_content>p:last-child {
  margin-bottom: 0
}

@media (min-width: 768px) {
  .pkp_page_index .cmp_announcements+.additional_content {
    border-top: none
  }
}

.page_catalog_category .article_count {
  float: right;
  padding: .714rem 0;
  font-size: .93rem;
  color: rgba(0, 0, 0, 0.54)
}

.page_catalog_category .about_section .cover {
  float: right;
  width: 20%;
  margin-left: 10%;
  margin-right: 10%
}

.page_catalog_category .subcategories li {
  padding-top: .357rem;
  padding-bottom: .357rem
}

.page_catalog_category .subcategories a {
  text-decoration: none
}

@media (min-width: 768px) {
  .page_catalog_category .subcategories {
    position: relative;
    margin-top: 4.286rem;
    margin-left: -1.43rem;
    margin-right: -1.43rem;
    padding: 2.143rem;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd
  }

  .page_catalog_category .subcategories h2 {
    position: absolute;
    top: -15px;
    left: 1.43rem;
    margin: 0;
    padding-left: .714rem;
    padding-right: .714rem;
    line-height: 2.143rem;
    background: #fff;
    color: rgba(0, 0, 0, 0.54)
  }
}

@media (min-width: 992px) {
  .page_catalog_category .subcategories {
    margin-left: -2.143rem;
    margin-right: -2.143rem
  }
}

@media (min-width: 768px) {
  .page_catalog_category .cmp_article_list {
    padding-top: 1.43rem
  }

  .page_catalog_category h2.title {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute !important;
    left: -2000px
  }

  .page_catalog_category h2.title:focus {
    background-color: #fff;
    border-radius: 3px;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
    -webkit-box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
    clip: auto !important;
    color: #000;
    display: block;
    font-size: 1rem;
    height: auto;
    line-height: normal;
    padding: 1rem;
    position: absolute;
    left: 0.5rem;
    top: 0.5rem;
    text-decoration: none;
    width: auto;
    z-index: 100000
  }
}

@media (min-width: 992px) {
  .page_catalog_category .cmp_article_list {
    padding-top: 2.143rem
  }
}

.page_contact .address,
.page_contact .phone,
.page_contact .email {
  margin-top: .714rem;
  margin-bottom: .714rem;
  font-size: .93rem
}

.page_contact .address {
  margin-top: 0
}

.page_contact .address p {
  margin: 0
}

.page_contact .label {
  display: block;
  font-weight: 700
}

.page_contact .contact.support {
  margin-top: 2.857rem
}

@media (min-width: 768px) {

  .page_contact .contact_section:before,
  .page_contact .contact_section:after {
    content: " ";
    display: table
  }

  .page_contact .contact_section:after {
    clear: both
  }

  .page_contact .contact {
    float: left;
    width: 50%
  }

  .page_contact .contact.primary {
    padding-right: 1.43rem
  }

  .page_contact .contact.support {
    margin-top: 0
  }
}

.page_issue_archive .issues_archive {
  margin-left: -0.714rem;
  margin-right: -0.714rem;
  border-top: 1px solid #ddd
}

.page_issue_archive .issues_archive>li {
  padding: 2.143rem .714rem;
  border-bottom: 1px solid #ddd
}

@media (min-width: 480px) {
  .page_issue_archive .issues_archive {
    margin-left: -1.43rem;
    margin-right: -1.43rem
  }

  .page_issue_archive .issues_archive>li {
    padding-left: 1.43rem;
    padding-right: 1.43rem
  }
}

@media (min-width: 992px) {
  .page_issue_archive .issues_archive {
    margin-left: -2.143rem;
    margin-right: -2.143rem
  }

  .page_issue_archive .issues_archive>li {
    padding-left: 2.143rem;
    padding-right: 2.143rem
  }
}

.page_issue_archive .cmp_pagination {
  margin-top: 1.43rem
}

.page_login .login {
  margin-bottom: 0;
  max-width: 17em
}

.page_login .login input[type="text"],
.page_login .login input[type="password"] {
  width: 100%
}

.page_login .password a {
  font-size: .93rem;
  font-style: normal
}

.page_login .remember {
  padding-bottom: 0
}

.page_login .remember .label {
  display: inline;
  font-style: normal
}

.page_login .buttons button {
  float: right
}

.page_login .buttons a {
  float: right;
  margin-right: 1em;
  margin-left: 0
}

.page_lost_password .lost_password {
  margin-bottom: 0;
  max-width: 17em
}

.page_lost_password .lost_password input[type="text"] {
  width: 100%
}

.page_lost_password .pkp_form_error {
  margin: 1.43rem 0;
  padding: .714rem;
  background: #ff4040;
  color: #fff;
  font-size: .93rem;
  font-weight: 700
}

.page_lost_password .buttons:before,
.page_lost_password .buttons:after {
  content: " ";
  display: table
}

.page_lost_password .buttons:after {
  clear: both
}

.page_lost_password .buttons button {
  float: right
}

.page_lost_password .buttons a {
  float: right;
  font-size: .93rem;
  line-height: 2.143rem;
  margin-right: 1em
}

.page_register .required_label {
  font-size: .93rem;
  line-height: 1.43rem;
  color: rgba(0, 0, 0, 0.54);
  margin-bottom: 1.43rem
}

.page_register .consent {
  margin-bottom: 0
}

.page_register .fields .reviewer_interests {
  max-height: 0;
  padding-bottom: 0;
  overflow: hidden;
  opacity: 0;
  transition: all .3s
}

.page_register .fields .reviewer_interests.is_visible {
  max-height: 400px;
  overflow: visible;
  padding-bottom: 2.143rem;
  opacity: 1
}

.page_register .context_optin .contexts>li {
  margin-bottom: 1em
}

.page_register .context_optin .contexts>li:last-child {
  margin-bottom: 0
}

.page_register .context_optin .roles {
  padding: .357rem 0;
  margin-bottom: 0
}

.page_register .context_optin .roles label {
  display: inline-block;
  margin-right: 1em;
  font-size: .93rem;
  line-height: 1.43rem
}

.page_register .context_optin .context_privacy {
  position: absolute;
  left: -9999px;
  padding: .357rem 0;
  font-size: .93rem;
  line-height: 1.43rem
}

.page_register .context_optin .context_privacy_visible {
  position: relative;
  left: auto
}

.page_register #formErrors {
  margin: 1.43rem 0;
  padding: .714rem;
  background: #ff4040;
  color: #fff
}

.page_register #formErrors .pkp_form_error {
  padding: 0;
  font-size: .93rem;
  font-weight: bold;
  line-height: 1.43rem
}

.page_register #formErrors .pkp_form_error_list {
  margin: 0;
  padding-left: 1.43rem;
  font-size: .93rem;
  line-height: 1.43rem
}

.page_register #formErrors .pkp_form_error_list a {
  color: #fff
}

@media (min-width: 768px) {
  .page_register .identity li {
    display: inline-block;
    padding-right: 1em;
    max-width: 13em
  }
}

@media (min-width: 1200px) {
  .page_register .identity li {
    max-width: 17em
  }
}

.pkp_op_register .ui-helper-hidden-accessible {
  clip: rect(1px, 1px, 1px, 1px);
  position: absolute !important;
  left: -2000px
}

.pkp_op_register .ui-helper-hidden-accessible:focus {
  background-color: #fff;
  border-radius: 3px;
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
  -webkit-box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
  clip: auto !important;
  color: #000;
  display: block;
  font-size: 1rem;
  height: auto;
  line-height: normal;
  padding: .714rem;
  position: absolute;
  left: .357rem;
  top: .357rem;
  text-decoration: none;
  width: auto;
  z-index: 100000
}

.pkp_op_register .ui-autocomplete {
  position: absolute !important
}

.page_search .search_input .query {
  width: 100%;
  max-width: 100%;
  height: calc(2.857rem - 2px);
  font-size: 1.285rem;
  line-height: calc(2.857rem - 2px)
}

.page_search .search_advanced {
  border: 1px solid #ddd;
  padding: 0 1.43rem 1.43rem
}

.page_search .search_advanced legend {
  padding: .714rem 1.43rem;
  margin: 0;
  font-weight: 400
}

.page_search .search_advanced label {
  font-size: 1rem;
  font-style: normal
}

.page_search .date_range legend {
  padding: 0;
  font-size: 1rem
}

.page_search .date_range label {
  clip: rect(1px, 1px, 1px, 1px);
  position: absolute !important;
  left: -2000px
}

.page_search .date_range label:focus {
  background-color: #fff;
  border-radius: 3px;
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
  -webkit-box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
  clip: auto !important;
  color: #000;
  display: block;
  font-size: 1rem;
  height: auto;
  line-height: normal;
  padding: 1rem;
  position: absolute;
  left: 0.5rem;
  top: 0.5rem;
  text-decoration: none;
  width: auto;
  z-index: 100000
}

.page_search .date_range select+label+select {
  margin-left: 0.25em
}

.page_search .date_range [name*="Year"] {
  width: 6em
}

.page_search .date_range [name*="Day"] {
  width: 4em
}

.page_search .date_range [name*="Month"] {
  width: 10em
}

.page_search .label_contexts {
  margin-top: 1.43rem
}

.page_search .submit {
  text-align: right
}

.page_search .submit button {
  position: relative;
  padding-right: 3.2145rem;
  border-right: none;
  padding-right: 1em;
  padding-left: 3.2145rem;
  border-right: 1px solid rgba(0, 0, 0, 0.4);
  border-left: none
}

.page_search .submit button:after {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transform: translate(0, 0);
  content: "\f002";
  position: absolute;
  top: -1px;
  right: 0;
  width: 2.143rem;
  height: 2.143rem;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
  line-height: 2.143rem;
  text-align: center;
  background: #4b7d92;
  box-shadow: inset 0 -1em 1em rgba(0, 0, 0, 0.2);
  color: #fff
}

.page_search .submit button:hover:after,
.page_search .submit button:focus:after {
  box-shadow: inset 0 1em 1em rgba(0, 0, 0, 0.2);
  background: #6298ae
}

.page_search .submit button:after {
  right: auto;
  left: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px
}

.page_search .submit button:after {
  right: auto;
  left: 0
}

.page_search .search_results {
  margin: 2.857rem 0;
  padding: 0;
  list-style: none
}

.page_search .search_results .obj_article_summary {
  margin: 1.43rem 0
}

.page_search .cmp_pagination {
  margin-top: 1.43rem;
  font-size: .93rem;
  line-height: 1.43rem;
  color: rgba(0, 0, 0, 0.54);
  text-align: right
}

.page_search .cmp_pagination a {
  padding-left: 0.5em;
  padding-right: 0.5em
}

@media (min-width: 768px) {

  .page_search .search_advanced:before,
  .page_search .search_advanced:after {
    content: " ";
    display: table
  }

  .page_search .search_advanced:after {
    clear: both
  }

  .page_search .date_range {
    float: left;
    width: 50%
  }

  .page_search .date_range .to fieldset {
    margin-bottom: 0
  }

  .page_search .author {
    float: right;
    width: 50%
  }
}

.page_section .section_description {
  margin-bottom: 2em
}

.header_view {
  z-index: 2;
  position: relative;
  background: #4b7d92
}

.header_view a {
  line-height: 2.143rem;
  text-decoration: none
}

.header_view .return {
  position: absolute;
  top: 0;
  left: 0;
  width: 2.143rem;
  height: 2.143rem;
  line-height: 2.143rem;
  background: #fff;
  color: #4b7d92;
  text-align: center
}

.header_view .return:before {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transform: translate(0, 0);
  content: "\f060"
}

.header_view .return:hover,
.header_view .return:focus {
  background: #6298ae;
  color: #fff
}

.header_view .title {
  display: block;
  padding-left: 2.857rem;
  max-width: 100%;
  overflow-x: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .93rem;
  color: #fff
}

.header_view .title:hover,
.header_view .title:focus {
  background: #6298ae
}

.header_view .download {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 2.143rem;
  background: #fff;
  text-align: center
}

.header_view .download:hover,
.header_view .download:focus {
  background: #6298ae;
  color: #fff
}

.header_view .download:before {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transform: translate(0, 0);
  content: "\f019"
}

.header_view .download .label {
  display: none
}

@media (min-width: 768px) {
  .header_view .title {
    font-size: 1rem
  }

  .header_view .download {
    width: auto;
    padding: 0 1.43rem
  }

  .header_view .download .label {
    display: inline-block
  }

  .header_view .download .pkp_screen_reader,
  .header_view .download .pkp_page_index .cmp_announcements h2 {
    display: none
  }
}

.galley_view {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow-y: hidden
}

.galley_view iframe {
  width: 100%;
  height: 100%;
  padding-top: 2.143rem;
  border: none
}

.galley_view.galley_view_with_notice iframe {
  padding-top: 6.429rem
}

.galley_view .galley_view_notice {
  position: absolute;
  top: 2.143rem;
  width: 100%;
  height: 4.286rem;
  background: #ff4040
}

.galley_view .galley_view_notice_message {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-weight: 700;
  text-align: center
}

.galley_view .galley_view_notice_message a {
  color: #fff;
  text-decoration: underline
}

.obj_announcement_full h1 {
  margin: 0
}

.obj_announcement_full .date {
  margin: 16px 0;
  color: rgba(0, 0, 0, 0.54)
}

.obj_announcement_full .date:before {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transform: translate(0, 0);
  content: "\f073";
  margin-right: 0.5em;
  color: #ddd
}

.obj_announcement_full .description {
  margin-top: 2.857rem
}

.obj_announcement_full .description p:first-child {
  margin-top: 0
}

.obj_announcement_full .description p:last-child {
  margin-bottom: 0
}

.obj_announcement_summary h2,
.obj_announcement_summary h3,
.obj_announcement_summary h4 {
  margin: 0;
  font-size: 1rem;
  line-height: 1.43rem
}

.obj_announcement_summary h2 a,
.obj_announcement_summary h3 a,
.obj_announcement_summary h4 a {
  text-decoration: none
}

.obj_announcement_summary .date {
  font-size: .93rem;
  line-height: 1.785rem;
  color: rgba(0, 0, 0, 0.54)
}

.obj_announcement_summary .date:before {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transform: translate(0, 0);
  content: "\f073";
  margin-right: 0.5em;
  font-size: 1rem;
  color: #ddd
}

.obj_announcement_summary .summary {
  font-size: .93rem;
  line-height: 1.43rem;
  margin-top: .714rem
}

.obj_announcement_summary .summary p:first-child {
  margin-top: 0
}

.obj_announcement_summary .summary p:last-child {
  margin-bottom: 0
}

.obj_announcement_summary .read_more {
  display: inline-block;
  position: relative;
  padding-right: 2.143rem;
  font-size: .93rem;
  font-weight: 700;
  line-height: 2.143rem;
  color: #4b7d92;
  text-decoration: none
}

.obj_announcement_summary .read_more:after {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transform: translate(0, 0);
  content: "\f054";
  position: absolute;
  top: 2px;
  right: 0;
  width: 2.143rem;
  height: 2.143rem;
  line-height: 2.143rem;
  text-align: center
}

.obj_announcement_summary .read_more:hover,
.obj_announcement_summary .read_more:focus {
  color: #6298ae
}

.obj_article_details>.page_title {
  margin: 0
}

.obj_article_details>.subtitle {
  margin: 0;
  font-size: 1rem;
  line-height: 2.143rem;
  font-weight: 400
}

.obj_article_details .row {
  margin-top: 2.143rem
}

.obj_article_details .item {
  padding-top: 1.43rem;
  padding-bottom: 1.43rem
}

.obj_article_details .item>*:first-child {
  margin-top: 0
}

.obj_article_details .item>*:last-child {
  margin-bottom: 0
}

.obj_article_details .item>h2+p {
  margin-top: 0
}

.obj_article_details .sub_item {
  margin-bottom: 1.43rem
}

.obj_article_details .sub_item:last-child {
  margin-bottom: 0
}

.obj_article_details .main_entry .item .label {
  margin: 0 0 1.43rem;
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif;
  font-size: 1.143rem;
  font-weight: 700
}

.obj_article_details .main_entry .item.doi .label,
.obj_article_details .main_entry .item.keywords .label {
  display: inline;
  font-size: 1rem
}

.obj_article_details .main_entry .sub_item .label {
  font-size: 1rem
}

.obj_article_details .authors li {
  margin-bottom: .714rem
}

.obj_article_details .authors .name {
  font-weight: bold;
  display: block
}

.obj_article_details .authors .userGroup {
  display: block
}

.obj_article_details .authors .orcid {
  display: block;
  font-size: .93rem;
  line-height: 1.43rem
}

.obj_article_details .authors .orcid a {
  vertical-align: middle
}

.obj_article_details .authors .orcid_icon {
  width: 1.43rem;
  height: 1.43rem
}

.obj_article_details .authors .affiliation {
  font-size: .93rem;
  color: rgba(0, 0, 0, 0.54)
}

.obj_article_details .author_bios .sub_item .label {
  margin-bottom: 0
}

.obj_article_details .author_bios .sub_item .value>p:first-child {
  margin-top: 0
}

.obj_article_details .item.doi,
.obj_article_details .item.keywords {
  padding-top: 0
}

.obj_article_details .galleys_links {
  display: flex;
  flex-flow: row nowrap;
  justify-content: start
}

.obj_article_details .galleys_links li {
  margin-inline-end: 1rem
}

.obj_article_details .supplementary_galleys_links {
  margin-top: .714rem
}

.obj_article_details .copyright {
  font-size: .93rem;
  line-height: 1.43rem
}

.obj_article_details .copyright a[rel="license"]+p {
  margin-top: 0
}

.obj_article_details .entry_details {
  margin-left: -1.43rem;
  margin-right: -1.43rem;
  border-top: 1px solid #ddd
}

.obj_article_details .entry_details .item {
  padding: 1.43rem;
  border-bottom: 1px solid #ddd;
  word-wrap: break-word
}

.obj_article_details .entry_details .item:last-child {
  border-bottom: none
}

.obj_article_details .entry_details .item .label {
  margin: 0;
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif;
  font-size: .93rem;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.54)
}

.obj_article_details .categories {
  margin: 0;
  padding: 0;
  list-style: none
}

.obj_article_details .versions ul {
  margin: 0;
  padding: 0;
  list-style: none
}

.obj_article_details .citation_display .value {
  font-size: .93rem
}

.obj_article_details .citation_display .csl-left-margin {
  display: none
}

.obj_article_details .citation_display [aria-hidden="true"] {
  display: none
}

.obj_article_details .citation_display .citation_formats {
  margin-top: 1em;
  border: 1px solid rgba(0, 0, 0, 0.4);
  border-radius: 3px
}

.obj_article_details .citation_display .citation_formats_button {
  position: relative;
  background: transparent;
  border: none;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  box-shadow: none;
  padding: 0 1em;
  width: 100%;
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.54);
  text-align: left
}

.obj_article_details .citation_display .citation_formats_button:after {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transform: translate(0, 0);
  content: "\f0d7";
  position: absolute;
  top: 50%;
  right: 1em;
  transform: translateY(-50%)
}

.obj_article_details .citation_display .citation_formats_button[aria-expanded="true"]:after {
  content: "\f0d8"
}

.obj_article_details .citation_display .citation_formats_button:focus {
  background: #ddd;
  outline: 0
}

.obj_article_details .citation_display .citation_formats_styles {
  margin: 0;
  padding: 0;
  list-style: none
}

.obj_article_details .citation_display .citation_formats_styles a {
  display: block;
  padding: .5em 1em;
  border-bottom: 1px solid #ddd;
  text-decoration: none
}

.obj_article_details .citation_display .citation_formats_styles a:focus {
  background: #ddd;
  outline: 0
}

.obj_article_details .citation_display .citation_formats_styles li:last-child a {
  border-bottom: none
}

.obj_article_details .citation_display .citation_formats_list .label {
  padding: 1em 1em .25em 1em
}

.obj_article_details .citation_display .citation_formats_styles+.label {
  border-top: 1px solid #ddd
}

.obj_article_details .citation_display span {
  margin-right: 0.5em
}

@media (min-width: 480px) {
  .obj_article_details .entry_details {
    margin-left: -2.143rem;
    margin-right: -2.143rem
  }
}

@media (min-width: 768px) {
  .obj_article_details .row {
    margin-left: -1.43rem;
    margin-right: -1.43rem;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd
  }

  .obj_article_details .main_entry {
    float: left;
    width: 428px;
    border-right: 1px solid #ddd
  }

  .obj_article_details .item {
    padding: 1.43rem
  }

  .obj_article_details .item .label {
    margin: 0 0 1.43rem;
    font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif;
    font-size: 1.143rem;
    font-weight: 700
  }

  .obj_article_details .item.doi .label,
  .obj_article_details .item.keywords .label {
    display: inline;
    font-size: 1rem
  }

  .obj_article_details .entry_details {
    float: left;
    width: 300px;
    margin: 0 0 0 -1px;
    border-top: none;
    border-left: 1px solid #ddd
  }

  .obj_article_details .entry_details .item {
    margin-right: -1px;
    border-bottom: 1px solid #ddd
  }

  .obj_article_details .entry_details .item:last-child {
    border-bottom: none
  }
}

@media (min-width: 992px) {
  .obj_article_details .row {
    margin-left: -2.143rem;
    margin-right: -2.143rem
  }

  .obj_article_details .main_entry {
    width: 352px
  }

  .obj_article_details .item {
    padding: 2.143rem
  }
}

@media (min-width: 1200px) {
  .obj_article_details .main_entry {
    width: 560px
  }
}

.obj_article_summary:before,
.obj_article_summary:after {
  content: " ";
  display: table
}

.obj_article_summary:after {
  clear: both
}

.obj_article_summary .cover {
  display: block;
  margin-bottom: 1.43rem
}

.obj_article_summary .cover img {
  display: block;
  max-height: 250px;
  width: auto
}

.obj_article_summary>.title {
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif;
  font-size: 1rem;
  line-height: 1.43rem;
  font-weight: 700;
  border-bottom: none;
  color: #000000 !important;
  margin: 0
}

.obj_article_summary>.title a {
  color: #000000 !important
}

.obj_article_summary>.title a:hover {
  color: #478b8c !important;
}

.obj_article_summary .subtitle {
  display: block;
  margin-top: 0.25em;
  margin-bottom: 0.5em;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.54)
}

.obj_article_summary .meta {
  position: relative;
  padding-top: .357rem;
  font-size: .93rem;
  line-height: 1.43rem
}

.obj_article_summary .pages,
.obj_article_summary .published {
  color: rgba(0, 0, 0, 0.54)
}

.obj_article_summary .galleys_links {
  margin-top: .714rem;
  display: flex;
  flex-flow: row nowrap;
  justify-content: start
}

.obj_article_summary .galleys_links li {
  margin-inline-end: 1rem
}

.obj_article_summary .galleys_links li:last-child {
  margin-inline-end: 0
}

@media (min-width: 768px) {
  .obj_article_summary .authors {
    padding-right: 5em
  }

  .obj_article_summary .pages {
    position: absolute;
    top: 0;
    right: 0;
    line-height: 2.143rem
  }

  .obj_article_summary .cover {
    float: left;
    width: 25%;
    height: auto;
    max-height: none;
    margin-right: 1.43rem
  }
}

@media (min-width: 992px) {
  .obj_article_summary .cover {
    margin-right: 2.143rem;
    margin-bottom: 2.143rem
  }

  .obj_article_summary .cover img {
    max-height: none
  }
}

.obj_galley_link:before {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transform: translate(0, 0);
  content: "\f0f6";
  margin-right: 0.25em
}

.obj_galley_link.pdf:before {
  content: "\f1c1"
}

.obj_galley_link.restricted {
  border-color: #d00a6c;
  color: #d00a6c
}

.obj_galley_link.restricted:before {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transform: translate(0, 0);
  content: "\f023";
  color: #d00a6c
}

.obj_galley_link.restricted:hover,
.obj_galley_link.restricted:focus {
  background: #d00a6c;
  color: #fff
}

.obj_galley_link.restricted:hover:before,
.obj_galley_link.restricted:focus:before {
  color: #fff
}

.obj_galley_link_supplementary {
  display: inline-block;
  position: relative;
  padding-right: 2.143rem;
  font-size: .93rem;
  font-weight: 700;
  line-height: 2.143rem;
  color: #4b7d92;
  text-decoration: none;
  padding-right: 0;
  padding-left: 1.43rem
}

.obj_galley_link_supplementary:after {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transform: translate(0, 0);
  content: "\f0f6";
  position: absolute;
  top: 2px;
  right: 0;
  width: 2.143rem;
  height: 2.143rem;
  line-height: 2.143rem;
  text-align: center
}

.obj_galley_link_supplementary:hover,
.obj_galley_link_supplementary:focus {
  color: #6298ae
}

.obj_galley_link_supplementary:after {
  right: auto;
  left: 0;
  text-align: left
}

.obj_issue_summary h2 {
  margin: 0;
  font-size: 1rem;
  line-height: 1.43rem;
  font-weight: 400
}

.obj_issue_summary .cover {
  display: block;
  margin-bottom: 1.43rem
}

.obj_issue_summary .cover img {
  display: block;
  width: auto;
  max-height: 250px
}

.obj_issue_summary .title {
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif;
  font-weight: 700;
  text-decoration: none
}

.obj_issue_summary .series {
  margin-bottom: .357rem;
  color: rgba(0, 0, 0, 0.54)
}

.obj_issue_summary .description {
  font-size: .93rem;
  line-height: 1.43rem
}

.obj_issue_summary .description p:first-child {
  margin-top: 0
}

.obj_issue_summary .description p:last-child {
  margin-bottom: 0
}

@media (min-width: 768px) {

  .obj_issue_summary:before,
  .obj_issue_summary:after {
    content: " ";
    display: table
  }

  .obj_issue_summary:after {
    clear: both
  }

  .obj_issue_summary .cover {
    float: left;
    width: 25%;
    height: auto;
    margin-right: 1.43rem
  }

  .obj_issue_summary .cover img {
    max-height: auto
  }
}

.obj_issue_toc .cover {
  display: block;
  margin-bottom: 1.43rem
}

.obj_issue_toc .cover img {
  display: block;
  max-height: 250px;
  width: auto
}

.obj_issue_toc .description>*:first-child {
  margin-top: 0
}

.obj_issue_toc .description>*:last-child {
  margin-bottom: 0
}

.obj_issue_toc .pub_id {
  margin: 1.43rem 0
}

.obj_issue_toc .pub_id .type {
  font-weight: 700
}

.obj_issue_toc .published {
  margin: 1.43rem 0
}

.obj_issue_toc .published .label {
  font-weight: 700
}

.obj_issue_toc .articles {
  margin-top: calc(2.143rem + 1.43rem)
}

.obj_issue_toc h2+.articles,
.obj_issue_toc h3+.articles {
  margin-top: 0
}

.obj_issue_toc .sections:not(:first-child) {
  margin-top: 4.286rem
}

.obj_issue_toc .section:last-child .articles>li:last-child {
  margin-bottom: 0
}

.obj_issue_toc .galleys_links {
  margin-top: .714rem;
  display: flex;
  flex-flow: row nowrap;
  justify-content: start
}

.obj_issue_toc .galleys_links li {
  margin-inline-end: 1rem
}

.obj_issue_toc .galleys_links li:last-child {
  margin-inline-end: 0
}

@media (min-width: 768px) {

  .obj_issue_toc .heading:before,
  .obj_issue_toc .heading:after {
    content: " ";
    display: table
  }

  .obj_issue_toc .heading:after {
    clear: both
  }

  .obj_issue_toc .cover {
    float: left;
    width: 25%;
    height: auto;
    max-height: none;
    margin-right: 1.43rem
  }

  .obj_issue_toc .galleys,
  .obj_issue_toc .section {
    position: relative;
    margin: 2.143rem -1.43rem;
    padding: 2.143rem
  }

  .obj_issue_toc .galleys:before,
  .obj_issue_toc .section:before {
    content: '';
    position: absolute;
    top: 45px;
    left: 0;
    width: 100%;
    border-top: 1px solid #ddd
  }

  .obj_issue_toc .galleys>h2,
  .obj_issue_toc .section>h2,
  .obj_issue_toc .galleys>h3,
  .obj_issue_toc .section>h3 {
    display: inline-block;
    position: relative;
    left: -15px;
    margin-top: 0;
    padding: 0 1.0715rem;
    background: #fff;
    font-size: 1.143rem;
    font-weight: 400;
    line-height: 2.143rem;
    color: rgba(0, 0, 0, 0.54)
  }
}

@media (min-width: 992px) {

  .obj_issue_toc .galleys,
  .obj_issue_toc .section {
    margin: 2.143rem -2.143rem
  }

  .obj_issue_toc .cover {
    margin-right: 2.143rem;
    margin-bottom: 2.143rem
  }

  .obj_issue_toc .cover img {
    max-height: none
  }
}

.pkp_block {
  padding: 2.143rem 1.43rem;
  font-size: 1rem;
  line-height: 1.43rem
}

.pkp_block .title {
  display: block;
  margin-bottom: .714rem;
  margin-top: 0;
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif;
  font-size: 1.143rem;
  font-weight: 700;
  line-height: 1.43rem;
  color: rgba(0, 0, 0, 0.54)
}

.pkp_block .content ul li {
  line-height: 1.43rem;
  padding: .357rem 0
}

.pkp_block .content p {
  line-height: 1.785rem
}

.pkp_block .content p:first-child {
  margin-top: 0
}

.pkp_block .content p:last-child {
  margin-bottom: 0
}

.pkp_block a {
  text-decoration: none
}

@media (min-width: 992px) {
  .pkp_block {
    padding: 2.143rem
  }
}

.block_browse {
  font-size: .93rem
}

.block_browse .has_submenu {
  margin-top: 1.43rem;
  font-size: .93rem;
  font-weight: 700;
  color: rgba(0, 0, 0, 0.54)
}

.block_browse .has_submenu ul {
  margin-top: calc(.357rem - 1px);
  padding-top: .357rem;
  font-weight: 400
}

.block_browse .is_sub {
  margin-left: .714rem
}

.block_browse .current a {
  padding-left: 0.5em;
  border-left: 4px solid #ddd;
  color: rgba(0, 0, 0, 0.54);
  cursor: text
}

.block_information a,
.block_language_toggle a {
  font-size: .93rem
}

.block_subscription .subscription_name {
  margin-bottom: 0;
  font-weight: 700
}

.block_subscription .subscription_membership {
  margin-top: 0
}

.pkp_structure_footer_wrapper {
  background: rgb(60, 64, 72);
}

.pkp_structure_footer {
  text-align: center
}

.pkp_footer_content {
  padding: 2.143rem;
  text-align: left;
  color: #FFF;
}

.pkp_brand_footer {
  padding: 2.143rem
}

.pkp_brand_footer:before,
.pkp_brand_footer:after {
  content: " ";
  display: table
}

.pkp_brand_footer:after {
  clear: both
}

.pkp_brand_footer a {
  float: right;
  display: block;
  max-width: 150px
}

body[dir="rtl"] {
  direction: rtl;
  unicode-bidi: embed
}

@media (min-width: 768px) {
  body[dir="rtl"] .pkp_structure_main:before {
    left: auto;
    right: 0
  }

  body[dir="rtl"] .pkp_structure_main:after {
    left: auto;
    right: 728px
  }
}

@media (min-width: 992px) {
  body[dir="rtl"] .pkp_structure_main {
    float: right
  }

  body[dir="rtl"] .pkp_structure_main:after {
    left: auto;
    right: 652px
  }

  body[dir="rtl"] .pkp_structure_sidebar {
    float: left
  }

  body[dir="rtl"] .pkp_navigation_search_wrapper {
    float: left;
    text-align: left
  }
}

@media (min-width: 1200px) {
  body[dir="rtl"] .pkp_structure_main:after {
    left: auto;
    right: 860px
  }
}

@media (min-width: 992px) {
  body[dir="rtl"] .pkp_site_name {
    text-align: right
  }
}

body[dir="rtl"] .pkp_navigation_primary ul {
  text-align: right
}

body[dir="rtl"] .pkp_navigation_user {
  text-align: left
}

body[dir="rtl"] .pkp_navigation_user li {
  text-align: right
}

body[dir="rtl"] .pkp_screen_reader,
body[dir="rtl"] .cmp_skip_to_content a,
body[dir="rtl"] .pkp_page_index .journals h2,
body[dir="rtl"] .pkp_page_index .cmp_announcements h2,
body[dir="rtl"] .page_register .context_optin .roles legend,
body[dir="rtl"] .pkp_page_index .cmp_announcements h2 {
  left: auto;
  right: -2000px
}

body[dir="rtl"] .pkp_screen_reader:focus,
body[dir="rtl"] .cmp_skip_to_content a:focus,
body[dir="rtl"] .pkp_page_index .journals h2:focus,
body[dir="rtl"] .pkp_page_index .cmp_announcements h2:focus,
body[dir="rtl"] .page_register .context_optin .roles legend:focus,
body[dir="rtl"] .pkp_page_index .cmp_announcements h2:focus {
  right: 50%
}

body[dir="rtl"] .obj_announcement_summary .date:before {
  margin-right: 0;
  margin-left: 0.5em
}

body[dir="rtl"] .obj_issue_toc .galleys_links li {
  margin-right: inherit;
  margin-left: 1em
}

@media (min-width: 768px) {

  body[dir="rtl"] .obj_issue_toc .galleys h2,
  body[dir="rtl"] .obj_issue_toc .section h2 {
    left: auto;
    right: 1.0715rem
  }

  body[dir="rtl"] .obj_issue_toc .cover {
    float: right;
    margin-right: inherit;
    margin-left: 1.43rem
  }
}

@media (min-width: 992px) {
  body[dir="rtl"] .obj_issue_toc .cover {
    margin-right: inherit;
    margin-left: 2.143rem
  }
}

@media (min-width: 768px) {
  body[dir="rtl"] .obj_issue_summary .cover {
    float: right;
    margin-right: inherit;
    margin-left: 1.43rem
  }
}

@media (min-width: 768px) {
  body[dir="rtl"] .obj_article_summary {
    padding-right: 0;
    padding-left: 5em
  }
}

@media (min-width: 768px) {

  body[dir="rtl"] .galleys h2,
  body[dir="rtl"] .section h2 {
    left: auto;
    right: 1.0715rem
  }

  body[dir="rtl"] .cover {
    float: right;
    margin-right: inherit;
    margin-left: 1.43rem
  }
}

@media (min-width: 992px) {
  body[dir="rtl"] .cover {
    margin-right: inherit;
    margin-left: 2.143rem
  }
}

@font-face {
  font-family: 'Noto Serif';
  font-style: normal;
  font-weight: 400;
  src: url('//ejournal.radenintan.ac.id/plugins/themes/default/fonts/noto-serif-v9-vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic-regular.eot');
  src: local(''), url('//ejournal.radenintan.ac.id/plugins/themes/default/fonts/noto-serif-v9-vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic-regular.eot?#iefix') format('embedded-opentype'), url('//ejournal.radenintan.ac.id/plugins/themes/default/fonts/noto-serif-v9-vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic-regular.woff2') format('woff2'), url('//ejournal.radenintan.ac.id/plugins/themes/default/fonts/noto-serif-v9-vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic-regular.woff') format('woff'), url('//ejournal.radenintan.ac.id/plugins/themes/default/fonts/noto-serif-v9-vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic-regular.ttf') format('truetype'), url('//ejournal.radenintan.ac.id/plugins/themes/default/fonts/noto-serif-v9-vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic-regular.svg#NotoSerif') format('svg');
  font-display: swap
}

@font-face {
  font-family: 'Noto Serif';
  font-style: italic;
  font-weight: 400;
  src: url('//ejournal.radenintan.ac.id/plugins/themes/default/fonts/noto-serif-v9-vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic-italic.eot');
  src: local(''), url('//ejournal.radenintan.ac.id/plugins/themes/default/fonts/noto-serif-v9-vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic-italic.eot?#iefix') format('embedded-opentype'), url('//ejournal.radenintan.ac.id/plugins/themes/default/fonts/noto-serif-v9-vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic-italic.woff2') format('woff2'), url('//ejournal.radenintan.ac.id/plugins/themes/default/fonts/noto-serif-v9-vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic-italic.woff') format('woff'), url('//ejournal.radenintan.ac.id/plugins/themes/default/fonts/noto-serif-v9-vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic-italic.ttf') format('truetype'), url('//ejournal.radenintan.ac.id/plugins/themes/default/fonts/noto-serif-v9-vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic-italic.svg#NotoSerif') format('svg');
  font-display: swap
}

@font-face {
  font-family: 'Noto Serif';
  font-style: normal;
  font-weight: 700;
  src: url('//ejournal.radenintan.ac.id/plugins/themes/default/fonts/noto-serif-v9-vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic-700.eot');
  src: local(''), url('//ejournal.radenintan.ac.id/plugins/themes/default/fonts/noto-serif-v9-vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic-700.eot?#iefix') format('embedded-opentype'), url('//ejournal.radenintan.ac.id/plugins/themes/default/fonts/noto-serif-v9-vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic-700.woff2') format('woff2'), url('//ejournal.radenintan.ac.id/plugins/themes/default/fonts/noto-serif-v9-vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic-700.woff') format('woff'), url('//ejournal.radenintan.ac.id/plugins/themes/default/fonts/noto-serif-v9-vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic-700.ttf') format('truetype'), url('//ejournal.radenintan.ac.id/plugins/themes/default/fonts/noto-serif-v9-vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic-700.svg#NotoSerif') format('svg');
  font-display: swap
}

@font-face {
  font-family: 'Noto Serif';
  font-style: italic;
  font-weight: 700;
  src: url('//ejournal.radenintan.ac.id/plugins/themes/default/fonts/noto-serif-v9-vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic-700italic.eot');
  src: local(''), url('//ejournal.radenintan.ac.id/plugins/themes/default/fonts/noto-serif-v9-vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic-700italic.eot?#iefix') format('embedded-opentype'), url('//ejournal.radenintan.ac.id/plugins/themes/default/fonts/noto-serif-v9-vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic-700italic.woff2') format('woff2'), url('//ejournal.radenintan.ac.id/plugins/themes/default/fonts/noto-serif-v9-vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic-700italic.woff') format('woff'), url('//ejournal.radenintan.ac.id/plugins/themes/default/fonts/noto-serif-v9-vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic-700italic.ttf') format('truetype'), url('//ejournal.radenintan.ac.id/plugins/themes/default/fonts/noto-serif-v9-vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic-700italic.svg#NotoSerif') format('svg');
  font-display: swap
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: url('//ejournal.radenintan.ac.id/plugins/themes/defaultManuscript/fonts/montserrat-v15-vietnamese_latin-ext_latin_cyrillic-ext_cyrillic-regular.eot');
  src: local(''), url('//ejournal.radenintan.ac.id/plugins/themes/defaultManuscript/fonts/montserrat-v15-vietnamese_latin-ext_latin_cyrillic-ext_cyrillic-regular.eot?#iefix') format('embedded-opentype'), url('//ejournal.radenintan.ac.id/plugins/themes/defaultManuscript/fonts/montserrat-v15-vietnamese_latin-ext_latin_cyrillic-ext_cyrillic-regular.woff2') format('woff2'), url('//ejournal.radenintan.ac.id/plugins/themes/defaultManuscript/fonts/montserrat-v15-vietnamese_latin-ext_latin_cyrillic-ext_cyrillic-regular.woff') format('woff'), url('//ejournal.radenintan.ac.id/plugins/themes/defaultManuscript/fonts/montserrat-v15-vietnamese_latin-ext_latin_cyrillic-ext_cyrillic-regular.ttf') format('truetype'), url('//ejournal.radenintan.ac.id/plugins/themes/defaultManuscript/fonts/montserrat-v15-vietnamese_latin-ext_latin_cyrillic-ext_cyrillic-regular.svg#Montserrat') format('svg')
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  src: url('//ejournal.radenintan.ac.id/plugins/themes/defaultManuscript/fonts/montserrat-v15-vietnamese_latin-ext_latin_cyrillic-ext_cyrillic-700.eot');
  src: local(''), url('//ejournal.radenintan.ac.id/plugins/themes/defaultManuscript/fonts/montserrat-v15-vietnamese_latin-ext_latin_cyrillic-ext_cyrillic-700.eot?#iefix') format('embedded-opentype'), url('//ejournal.radenintan.ac.id/plugins/themes/defaultManuscript/fonts/montserrat-v15-vietnamese_latin-ext_latin_cyrillic-ext_cyrillic-700.woff2') format('woff2'), url('//ejournal.radenintan.ac.id/plugins/themes/defaultManuscript/fonts/montserrat-v15-vietnamese_latin-ext_latin_cyrillic-ext_cyrillic-700.woff') format('woff'), url('//ejournal.radenintan.ac.id/plugins/themes/defaultManuscript/fonts/montserrat-v15-vietnamese_latin-ext_latin_cyrillic-ext_cyrillic-700.ttf') format('truetype'), url('//ejournal.radenintan.ac.id/plugins/themes/defaultManuscript/fonts/montserrat-v15-vietnamese_latin-ext_latin_cyrillic-ext_cyrillic-700.svg#Montserrat') format('svg')
}


.pkp_structure_page {
  margin: 0 auto;
  max-width: 1160px;
  background: #FFFFFF;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1)
}

.cmp_article_list.articles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 20px;
  align-items: stretch;
}

.cmp_article_list>li {
  margin-bottom: 2.143rem;
  border: 1px solid #bbbbbb;
  padding: 10px;
  border-radius: 10px;
  background: #478b8c66;
  height: 100%;
}

@media (max-width: 480px) {
  .cmp_article_list.articles {
    display: grid;
    grid-template-columns: 1fr !important;
    gap: 24px;
    margin-top: 20px;
    align-items: stretch;
  }
}

#customblock-drop-down-menu .content ul li {
  /* padding: 10px; */
  border-bottom: 1px solid #aaa;
  /* background: #265495; */
  color: #fbfcfc;
  /* margin-left: -20px; */
  border-radius: 5px;
}

#customblock-drop-down-menu .content ul li h4 {
  background: #265495;
  padding: 10px;
  text-align: center;
  margin: 0px;
}

#customblock-drop-down-menu .content ul li ul li span a {
  text-decoration: none;
  background: transparent;
}

@media (min-width: 1200px) {
  .pkp_structure_page {
    margin-top: 2.143rem;
    margin-bottom: 2.143rem
  }
}

.pkp_structure_footer_wrapper {
  background: rgb(60, 64, 72);
  border-top: 1px solid #ddd;
}

.pkp_structure_main:before,
.pkp_structure_main:after {
  display: none
}

.pkp_structure_content {
  padding-top: 0
}

@media (min-width: 992px) {
  .pkp_structure_sidebar:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 300px;
    border-left: 1px solid #ddd
  }

  .pkp_structure_sidebar>* {
    position: relative
  }
}

@media (min-width: 992px) {
  .pkp_structure_main:first-child:last-child {
    float: none;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2.857rem
  }

  .pkp_structure_main:first-child:last-child:before {
    left: 150px
  }

  .pkp_structure_main:first-child:last-child:after {
    left: auto;
    right: 150px
  }
}

.cmp_manuscript_button,
.block_make_submission a,
.obj_galley_link {
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  background: #000;
  color: #fff;
  border: none
}

.cmp_manuscript_button:hover,
.cmp_manuscript_button:focus,
.block_make_submission a:hover,
.block_make_submission a:focus,
.obj_galley_link:hover,
.obj_galley_link:focus {
  background: #478b8c
}

.cmp_breadcrumbs {
  padding: 2.143rem 0;
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif;
  font-size: .93rem;
  color: rgba(0, 0, 0, 0.54);
  text-transform: uppercase
}

.cmp_breadcrumbs>ol {
  padding: 0;
  margin: 0
}

.cmp_breadcrumbs .current {
  text-transform: none
}

.cmp_breadcrumbs .current h1 {
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif
}

.cmp_breadcrumbs .separator {
  padding: 0 .1em;
  opacity: 0.3
}

.cmp_pagination {
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif
}

.cmp_pagination a {
  font-weight: 700;
  text-transform: uppercase
}

.cmp_pagination .prev:before {
  content: "\f053"
}

.cmp_pagination .next:after {
  content: "\f054"
}

.cmp_announcements {
  border: none
}

.cmp_announcements>li {
  border-bottom: none
}

.cmp_announcements .obj_announcement_summary h2,
.cmp_announcements .obj_announcement_summary h3,
.cmp_announcements .obj_announcement_summary h4,
.cmp_announcements .date,
.cmp_announcements .read_more {
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif;
  font-size: .93rem;
  font-weight: 700
}

.cmp_announcements .read_more {
  text-transform: uppercase
}

.cmp_announcements .date {
  font-weight: 400
}

.cmp_announcements .date:before {
  color: #478b8c
}

.cmp_notification {
  background: #fff;
  border-top: 1px solid #ddd;
  border-right: 1px solid #ddd;
  border-bottom: 1px solid #ddd
}

.pkp_head_wrapper,
.has_site_logo .pkp_head_wrapper {
  position: relative;
  padding-top: 0
}

/*
.pkp_site_name_wrapper {
    /* background: linear-gradient(45deg, #7f6cb6, #6047a7); 

background: linear-gradient(-45deg,
  #6B3400,  /* burnt brown */
#8C4500,
/* deep amber */
#B85B00,
/* amber kuat */
#478b8c,
/* warna utama */
#478b8c,
/* amber terang */
#478b8c,
/* golden peach */
#478b8c,
/* soft gold */
#478b8c
/* creamy highlight 
);
    background-size: 300% 300%;
    animation: gradientShift 8s ease infinite;
}
*/

.pkp_site_name_wrapper {
  background: none !important;
  background-color: none !important;
}

.pkp_site_name .is_text {
  font-size: 1rem;
  text-transform: capitalize;
  font-weight: 400;
  /* font-size: 18pt; */
  text-shadow: 5px 7px 5px #000;
}

@media (min-width: 992px) {
  .pkp_site_name {
    width: 75%;
    margin-left: 0;
    /*
        padding-top: 1.071rem;
        padding-bottom: 1.071rem
        */
  }

  .pkp_site_name .is_text {
    font-size: 1.985rem;
  }
}

@media (min-width: 992px) {
  .pkp_navigation_primary_row {
    padding-left: 2.143rem;
    padding-right: 2.143rem;
    /* Subtle “like the screenshot” orange bar (still based on #478b8c) */
    background-color: #478b8c;
    /* fallback */

    background: linear-gradient(135deg, #64c898 0%, /* harder warm start */ #65c798 25%, /* transition teal */ #feca00 50%, /* secondary color in the middle */ #61ba90 75%, /* teal bridge */ #70d4a4 100% /* primary anchor */);
  }
}

:root {
  --primary: #478b8c;
  --secondary: #000000;
  --ink: #0b1220;
}

/* Footer shell */
.jospa-footer {
  margin-top: 34px;
  background: #2f343b;
  /* dark slate */
  color: rgba(255, 255, 255, .86);
  border-radius: 22px;
  overflow: hidden;
}

.jospa-footerWrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 22px 18px 16px;
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* CTA bar */
.jospa-footerCta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 16px;
  border-radius: 18px;
  background: linear-gradient(135deg,
      #478b8c 0%,
      #478b8c 45%,
      #478b8c 100%);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .22);
}

.jospa-footerCtaTitle {
  font-weight: 900;
  font-size: 16px;
  color: black;
  margin: 0 0 4px;
}

.jospa-footerCtaText {
  color: #000000;
}

.jospa-footerCtaSub {
  color: #000 !important;
  font-size: 12.5px;
}

/* Buttons */
.jospa-footerCtaBtns {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.jospa-footerCtaBtns .jospa-btn.jospa-btnPrimary {
  background: rgba(0, 0, 0, .12);
  color: #000000;
  border-color: #000;
}

.jospa-footerCtaBtns .jospa-btn.jospa-btnGhost {
  background: rgba(0, 0, 0, .12);
  color: #000000;
  border-color: #000;
}

.jospa-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 12px;
  border-radius: 12px;
  text-decoration: none !important;
  font-weight: 800;
  font-size: 12.5px;
  border: 1px solid rgba(255, 255, 255, .26);
  transition: transform .18s ease, filter .18s ease, background .18s ease, border-color .18s ease;
  white-space: nowrap;
}

.jospa-btnPrimary {
  background: rgba(255, 255, 255, .12);
  color: black !important;
  border-color: rgba(255, 255, 255, .28);
}

.jospa-btnGhost {
  background: transparent;
  color: black !important;
}

.jospa-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
  border-color: rgba(255, 255, 255, .42);
}

/* Grid */
.jospa-footerGrid {
  display: grid;
  grid-template-columns: 1fr 1fr 1.2fr;
  gap: 16px;
  margin-top: 16px;
}

.jospa-footerCol {
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 18px;
  padding: 14px 14px;
}

.jospa-footerH {
  font-weight: 900;
  font-size: 13px;
  letter-spacing: .2px;
  color: #fff;
  margin: 0 0 10px;
}

.jospa-footerP {
  text-align: justify;
  margin: 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .78);
}

.jospa-footerNote {
  margin-top: 10px;
  font-size: 12px;
  color: rgba(255, 255, 255, .70);
}

/* Stats box (tames raw embeds) */
.jospa-statsBox {
  background: rgba(0, 0, 0, .18);
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 14px;
  padding: 10px;
}

/* Remove random paragraph spacing from pasted code */
.jospa-raw {
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
}

/* Make counter images behave nicely */
.jospa-raw img {
  max-width: 100%;
  height: auto;
  display: inline-block;
  vertical-align: middle;
  border-radius: 10px;
}

/* Style link in stats */
.jospa-raw a {
  color: #fff !important;
  text-decoration: none !important;
}

.jospa-raw strong a {
  color: var(--primary) !important;
  font-weight: 900;
}

/* Responsive map wrapper */
.jospa-map {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .10);
  background: rgba(0, 0, 0, .20);
  aspect-ratio: 16/9;
}

.jospa-map iframe {
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  display: block;
}

/* Bottom bar */
.jospa-footerBottom {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: center;
  padding: 14px 0 4px;
  margin-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, .08);
  font-size: 12px;
  color: rgba(255, 255, 255, .70);
}

.jospa-footerLink {
  color: rgba(255, 255, 255, .82) !important;
  text-decoration: none !important;
  font-weight: 700;
}

.jospa-footerLink:hover {
  color: var(--primary) !important;
}

.jospa-footerDot {
  opacity: .55;
}

/* Responsive */
@media (max-width: 980px) {
  .jospa-footerGrid {
    grid-template-columns: 1fr;
  }

  .jospa-footerCta {
    flex-direction: column;
    align-items: flex-start;
  }
}


.pkp_navigation_primary_wrapper {
  width: auto
}

#navigationPrimary a {
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif;
  font-size: .93rem;
  font-weight: 700;
  color: #000;
}

#navigationPrimary>li>a {
  padding-bottom: 6px;
  border-bottom-width: 4px
}

#navigationPrimary>li>a:hover,
#navigationPrimary>li>a:focus {
  border-color: #000000;
}

#navigationPrimary>[aria-haspopup]>a:hover,
#navigationPrimary>[aria-haspopup]>a:focus {
  border-color: transparent
}

#navigationPrimary [aria-expanded="true"]:before {
  border-bottom-color: #000
}

@media (min-width: 992px) {
  #navigationPrimary a {
    color: black;
  }

  #navigationPrimary a:hover,
  #navigationPrimary a:focus {
    color: #000000;
  }

  #navigationPrimary ul {
    background: #478b8c;
  }

  #navigationPrimary ul a {
    color: black;
  }

  #navigationPrimary ul a:hover,
  #navigationPrimary ul a:focus {
    border-color: transparent
  }
}

.pkp_navigation_search_wrapper a {
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif;
  font-size: .93rem;
  font-weight: 700;
  color: #000;
}

@media (min-width: 992px) {
  .pkp_navigation_search_wrapper a {
    padding-bottom: 6px;
    border-bottom-width: 4px;
    color: black;
  }

  .pkp_navigation_search_wrapper a:hover,
  .pkp_navigation_search_wrapper a:focus {
    color: black;
    border-color: #000
  }
}

.pkp_navigation_user_wrapper a {
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif;
  font-size: .93rem;
  font-weight: 700
}

@media (min-width: 992px) {
  .pkp_navigation_user_wrapper {
    top: 13px;
    right: 0;
    left: auto;
    width: 30%;
    transform: none;
    padding-right: 2.143rem
  }

  .pkp_navigation_user_wrapper a {
    color: rgba(0, 0, 0, 0.54)
  }

  .pkp_navigation_user_wrapper ul a:hover,
  .pkp_navigation_user_wrapper ul a:focus {
    border-color: #000
  }

  .pkp_navigation_user_wrapper .pkp_navigation_user {
    margin-right: 0;
    padding-right: 0;
    width: auto
  }

  .pkp_navigation_primary>li:hover ul {
    position: absolute;
    transform: translate3d(6px, 40px, 0px);
    top: 0;
    left: 0;
    will-change: transform
  }

  .pkp_navigation_user>li>a {
    color: #fff
  }
}

.pkp_block .title {
  display: inline-block;
  padding-bottom: 0.5em;
  border-bottom: 3px solid #478b8c;
  font-weight: 700;
  text-transform: uppercase
}

.pkp_page_index .homepage_image {
  margin-top: -1px
}

.pkp_page_index .cmp_announcements {
  border: none
}

@media (min-width: 768px) {

  .pkp_page_index .cmp_announcements>.more:before,
  .pkp_page_index .cmp_announcements>.obj_announcement_summary:before {
    display: none
  }
}

@media (min-width: 992px) {

  .pkp_page_index .cmp_announcements h2+.obj_announcement_summary,
  .pkp_page_index .cmp_announcements .more {
    padding-top: 80px;
    padding-bottom: 80px
  }

  .pkp_page_index .cmp_announcements .more .obj_announcement_summary {
    padding-top: 0;
    padding-bottom: 0;
    margin-bottom: 1.43rem
  }

  .pkp_page_index .cmp_announcements .more .obj_announcement_summary:last-child {
    margin-bottom: 0
  }
}

@media (min-width: 1200px) {
  .pkp_page_index .cmp_announcements {
    border-bottom: 1px solid #ddd
  }

  .pkp_page_index .cmp_announcements>.more:before,
  .pkp_page_index .cmp_announcements>.obj_announcement_summary:before {
    display: block
  }
}

.pkp_page_index .current_issue h2 {
  display: inline-block;
  padding-bottom: 0.5em;
  border-bottom: 3px solid #478b8c;
  text-transform: uppercase;
  font-weight: 700;
  color: rgba(0, 0, 0, 0.54)
}

.pkp_page_index .current_issue .current_issue_title {
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif;
  font-size: 1.143rem
}

.pkp_page_index .current_issue .sections {
  margin-top: 1.43rem
}

.pkp_page_index .current_issue .read_more {
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif;
  font-weight: 700;
  text-transform: uppercase
}

.pkp_structure_main:first-child:last-child .cmp_announcements {
  border-bottom: none
}

.pkp_structure_main:first-child:last-child .cmp_announcements>.more:before,
.pkp_structure_main:first-child:last-child .cmp_announcements>.obj_announcement_summary:before {
  display: none
}

.pkp_structure_main:first-child:last-child .additional_content {
  border-top: none
}

.page_announcement {
  margin-top: 2.143rem
}

.page_issue_archive .issues_archive,
.page_issue_archive .issues_archive>li {
  border: none
}

.page_search .search_advanced {
  margin-top: .714rem
}

.page_search .search_advanced>legend {
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase
}

.header_view {
  background: #000;
  color: #fff
}

.header_view .title {
  color: #fff
}

.header_view .title:hover,
.header_view .title:focus {
  background: #000;
  color: #fff;
  text-decoration: underline
}

.obj_issue_toc .heading .pub_id,
.obj_issue_toc .heading .published {
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif;
  font-size: .93rem
}

.obj_issue_toc .heading .pub_id .type,
.obj_issue_toc .heading .published .label {
  font-weight: 700;
  color: rgba(0, 0, 0, 0.54);
  text-transform: uppercase
}

.obj_issue_toc .heading .pub_id .id,
.obj_issue_toc .heading .published .value {
  margin-left: 0.5em
}

.obj_issue_toc .heading .pub_id .id a {
  color: rgba(0, 0, 0, 0.87);
  text-decoration: none
}

.obj_issue_toc .heading .pub_id .id a:hover,
.obj_issue_toc .heading .pub_id .id a:focus {
  color: #6298ae;
  text-decoration: underline
}

.obj_issue_toc>.galleys,
.obj_issue_toc .section {
  margin: 0;
  padding: 0;
  border: none
}

.obj_issue_toc>.galleys:before,
.obj_issue_toc .section:before {
  display: none
}

.obj_issue_toc>.galleys h2,
.obj_issue_toc .section h2 {
  position: relative;
  display: inline-block;
  top: auto;
  left: auto;
  padding: 0 0 .357rem;
  border-bottom: 3px solid #478b8c;
  background: transparent;
  text-transform: uppercase;
  font-weight: 700
}

.obj_issue_toc .galleys_links li {
  margin-bottom: 0.5em
}

.obj_issue_toc .pages {
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif
}

.obj_issue_toc .cover img {
  margin-left: auto;
  margin-right: auto
}

.obj_issue_summary .series {
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif
}

.obj_galley_link.restricted {
  border-color: #ddd;
  background: #ddd;
  color: rgba(0, 0, 0, 0.54)
}

.obj_galley_link.restricted:before {
  color: rgba(0, 0, 0, 0.54)
}

.obj_galley_link.restricted:hover,
.obj_galley_link.restricted:focus {
  background: rgba(0, 0, 0, 0.54)
}

.obj_article_summary .subtitle {
  font-family: "Noto Serif", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif;
  font-size: .93rem
}

.obj_article_details .subtitle {
  font-family: "Noto Serif", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif
}

.obj_article_details .authors,
.obj_article_details .doi {
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif
}

.obj_article_details .orcid a,
.obj_article_details .doi a {
  color: rgba(0, 0, 0, 0.87);
  text-decoration: none
}

.obj_article_details .orcid a:hover,
.obj_article_details .doi a:hover,
.obj_article_details .orcid a:focus,
.obj_article_details .doi a:focus {
  color: #4b7d92;
  text-decoration: underline
}

.obj_article_details .orcid a {
  font-size: 10px;
  color: rgba(0, 0, 0, 0.54)
}

.obj_article_details .authors li {
  margin-bottom: 1.43rem
}

.obj_article_details .main_entry .label {
  display: inline-block;
  padding: 0 0 .357rem;
  border-bottom: 3px solid #478b8c;
  color: rgba(0, 0, 0, 0.54);
  text-transform: uppercase
}

.obj_article_details .main_entry .doi .label,
.obj_article_details .main_entry .keywords .label {
  display: inline;
  padding: 0;
  border: none;
  text-transform: none
}

.obj_article_details .row,
.obj_article_details .main_entry,
.obj_article_details .entry_details {
  border: none
}

.obj_article_details .author_bios .sub_item .label {
  border-bottom: none;
  text-transform: none
}

.obj_article_details .entry_details {
  margin-left: 0;
  margin-right: 0
}

.obj_article_details .entry_details .label {
  font-weight: 700;
  text-transform: uppercase
}

.obj_article_details .entry_details .item {
  margin: 2.143rem 0;
  padding: 0;
  border-bottom: none;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.05);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.4)
}

.obj_article_details .entry_details .item .label+.value {
  border-top-left-radius: 0;
  border-top-right-radius: 0
}

.obj_article_details .entry_details .sub_item {
  padding: 0;
  margin-bottom: 0
}

.obj_article_details .entry_details .sub_item:last-child {
  margin-bottom: 0
}

.obj_article_details .entry_details .sub_item .label {
  color: rgba(0, 0, 0, 0.54)
}

.obj_article_details .entry_details .item>.label,
.obj_article_details .entry_details .sub_item:first-child>.label {
  padding: .5em 1.43rem;
  background: #ddd;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px
}

.obj_article_details .entry_details .item>.value,
.obj_article_details .entry_details .sub_item .value {
  padding: 1.43rem;
  border-radius: 3px
}

.obj_article_details .entry_details .sub_item:not(:first-child) .label {
  display: inline-block;
  padding: .5em 0;
  margin: 0 1.43rem;
  border-bottom: 3px solid #478b8c
}

.obj_article_details .entry_details .cover_image {
  background: transparent;
  box-shadow: none
}

.obj_article_details .entry_details .cover_image img {
  display: block;
  border-radius: 3px;
  margin-left: auto;
  margin-right: auto
}

.obj_article_details .entry_details .item.galleys {
  box-shadow: none
}

.obj_article_details .entry_details .item.galleys .galleys_links {
  padding: 0
}

.obj_article_details .entry_details .galleys_links>li {
  display: block;
  margin-bottom: 0.5em
}

.obj_article_details .entry_details .galleys_links>li:last-child {
  margin-bottom: 0
}

.obj_article_details .entry_details .galleys_links>li a {
  display: block
}

.obj_article_details .entry_details .citation_display {
  margin-bottom: 0
}

.obj_article_details .entry_details .item.copyright {
  background: transparent;
  box-shadow: none
}

@media (min-width: 768px) {
  .obj_article_details .entry_details {
    width: 240px;
    margin-left: 30px
  }
}

@media (min-width: 992px) {

  body[dir="rtl"] .pkp_navigation_user_wrapper,
  body[dir="rtl"] .pkp_navigation_user>li:hover ul {
    right: auto;
    left: 0
  }

  body[dir="rtl"] .pkp_structure_sidebar::before {
    right: auto;
    left: 0;
    border-left: none;
    border-right: 1px solid #ddd
  }
}


:root {
  --bg-page: linear-gradient(135deg, #091a82 0%, #7697ee 100%);
  --bg-primary: #478b8c;
  --accent: #ff6b6b;
  --spacer: 1rem;
  --card-radius: 12px;
}


@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }

  25% {
    background-position: 100% 50%;
  }

  50% {
    background-position: 100% 100%;
  }

  75% {
    background-position: 50% 100%;
  }

  100% {
    background-position: 0% 50%;
  }
}

.floating-particles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.particle {
  position: absolute;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  animation: float 6s ease-in-out infinite;
}

.particle:nth-child(1) {
  width: 20px;
  height: 20px;
  left: 10%;
  top: 20%;
  animation-delay: 0s;
}

.particle:nth-child(2) {
  width: 15px;
  height: 15px;
  left: 20%;
  top: 60%;
  animation-delay: 1s;
}

.particle:nth-child(3) {
  width: 25px;
  height: 25px;
  left: 70%;
  top: 30%;
  animation-delay: 2s;
}

.particle:nth-child(4) {
  width: 12px;
  height: 12px;
  left: 80%;
  top: 70%;
  animation-delay: 3s;
}

.particle:nth-child(5) {
  width: 18px;
  height: 18px;
  left: 50%;
  top: 10%;
  animation-delay: 4s;
}

@keyframes float {

  0%,
  100% {
    transform: translateY(0) translateX(0) scale(1);
    opacity: 0.3;
  }

  33% {
    transform: translateY(-20px) translateX(10px) scale(1.1);
    opacity: 0.7;
  }

  66% {
    transform: translateY(10px) translateX(-10px) scale(0.9);
    opacity: 0.5;
  }
}

/* Pulse overlay untuk efek tambahan */
.pulse-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at center,
      rgba(139, 92, 246, 0.1) 0%,
      transparent 70%);
  animation: pulse 4s ease-in-out infinite;
}

@keyframes pulse {

  0%,
  100% {
    opacity: 0.3;
    transform: scale(1);
  }

  50% {
    opacity: 0.1;
    transform: scale(1.05);
  }
}

html {
  background: #FFFFFF !important;
}

/* default (desktop): no extra text */
.pkp_site_name::after {
  content: none;
}

/* =======================================================
   MOBILE + TABLET: hide image, show text, shorter header
   ======================================================= */
@media (max-width: 1024px) {

  /* 1) remove extra padding/margins from OJS wrappers (fix offset + reduce height) */
  .pkp_structure_head,
  #headerNavigationContainer,
  .pkp_head_wrapper,
  .pkp_site_name_wrapper {
    padding: 0 !important;
    margin: 0 !important;
  }

  /* some themes add big right padding when logo exists */
  .has_site_logo .pkp_head_wrapper {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }

  /* 2) hide the logo image */
  .pkp_site_name .is_img,
  .pkp_site_name img {
    display: none !important;
  }

  /* 3) make the header link compact + centered */
  .pkp_site_name {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 10px 12px !important;
    /* controls header height */
    text-decoration: none;
  }

  /* 4) show text title instead 
  .pkp_site_name::after{
    content: "Journal of Sports \A and Physical Activity (JoSPA)";
    white-space: pre-line;   makes \A become a line break 
    font-weight: 800;
    line-height: 1.15;
    text-align: center;     no left gap 
    display: block;
    width: 100%;
    color: #000000;
    margin: 0 !important;
    padding: 0 !important; 
  } */
}

.pkp_head_wrapper {
  background-color: none !important;
  background: none !important
}

/* MOBILE: bigger title */
@media (max-width: 600px) {
  .pkp_site_name::after {
    font-size: 28px;
  }

  /* was 32; smaller header */
}

/* TABLET: slightly smaller title */
@media (min-width: 601px) and (max-width: 1024px) {
  .pkp_site_name::after {
    font-size: 22px;
  }
}

/* MOBILE: cap header wrapper height */
@media (max-width: 600px) {
  .pkp_site_name_wrapper {
    max-height: 92px;
    /* adjust 80–110 if needed */
    overflow: hidden;
    /* prevents extra tall header */
    display: flex;
    align-items: center;
  }
}

/* TABLET: slightly shorter cap */
@media (min-width: 601px) and (max-width: 1024px) {
  .pkp_site_name_wrapper {
    max-height: 72px;
    /* adjust 60–85 if needed */
    overflow: hidden;
    display: flex;
    align-items: center;
  }
}

.pkp_site_name {
  background-color: transparent !important;
  background: none !important;
}

.pkp_site_name_wrapper {
  background: none !important;
}

.pkp_structure_head {

  background: #478b8c;
  /* fallback */
  background: linear-gradient(135deg,
      #478b8c 0%,
      #478b8c 45%,
      #478b8c 100%) !important;
}

/* =========================================================
   0) FIX HEADER GRADIENT (your background was overridden)
========================================================= */
.pkp_structure_head {
  background-color: #478b8c;
  /* fallback */
  background-image: linear-gradient(135deg, #478b8c 0%, #478b8c 45%, #478b8c 100%);
  background-repeat: no-repeat;
  background-size: cover;
}

/* =========================================================
   1) MOBILE + TABLET HEADER: shorter height + text logo
      (hide image, show left-aligned 2-line text)
========================================================= */

/* default: no extra text */
.pkp_site_name::after {
  content: none;
}

/* make wrapper not too tall on phone/tab */
@media (max-width: 992px) {

  /* header gets shorter */
  .pkp_head_wrapper {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }

  /* limit header brand area height */
  .pkp_site_name_wrapper {
    max-height: 84px;
    /* tablet/phone max height */
    overflow: hidden;
  }

  /* hide image logo */
  .pkp_site_name .is_img,
  .pkp_site_name img {
    display: none !important;
  }

  /* show text logo instead */
  .pkp_site_name {
    display: flex !important;
    align-items: center;
    justify-content: flex-start !important;
    /* no empty space on left */
    padding: 6px 12px !important;
    text-decoration: none;
    width: 100%;
  }

  /*
  .pkp_site_name::after{
    content: "Journal of Sports\Aand Physical Activity (JoSPA)";
    white-space: pre-line;        makes \A a line break 
    font-weight: 800;
    font-size: clamp(18px, 5.2vw, 28px);
    line-height: 1.15;
    text-align: left;
    display: block;
    color: #ffffff;
    margin: 0;                    remove left gap 
    padding: 0;                   remove left gap
  } */
}

/* even smaller on narrow phones */
@media (max-width: 420px) {
  .pkp_site_name_wrapper {
    max-height: 74px;
  }

  .pkp_site_name {
    padding: 6px 10px !important;
  }
}

/* =========================================================
   2) “BLACK VERSION” of rgba(255,255,255,.12)
========================================================= */
.blackGlass {
  background: rgba(0, 0, 0, .12);
}

/* =========================================================
   3) ANDROID RESPONSIVE FIX FOR ALL .jessi-portal CONTENT
      - removes horizontal overflow
      - forces wrapping for flex/grid children
      - makes images + cards scale correctly
========================================================= */

/* stop the page from allowing sideways scroll from any overflow */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

/* Scope everything to your portal so we don't break OJS globally */
.jessi-portal,
.jessi-portal * {
  box-sizing: border-box;
}

.jessi-portal {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
  /* safer than hidden, prevents side scroll */
}

/* Any long text/links must wrap */
.jessi-portal h1,
.jessi-portal h2,
.jessi-portal h3,
.jessi-portal p,
.jessi-portal a,
.jessi-portal .v {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Make all images responsive (including ones with width/height attrs) */
.jessi-portal img {
  max-width: 100% !important;
  height: auto !important;
}

/* Your layout wrappers must never exceed viewport */
.jessi-portal .jp-wrap {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding-left: 16px;
  padding-right: 16px;
}

/* IMPORTANT: breakout sections often use negative margins; kill that on small screens */
@media (max-width: 992px) {
  .jessi-portal .jp-breakout {
    width: 100%;
    max-width: 100%;
    margin-left: 0 !important;
    margin-right: 0 !important;
    overflow-x: clip;
  }
}

/* HERO: stack nicely on phone/tablet */
@media (max-width: 992px) {
  .jessi-portal .jp-heroContent {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    align-items: start;
  }

  /* cover image: center and constrain */
  .jessi-portal .jp-coverFloat {
    width: min(78vw, 320px);
    max-width: 100%;
    margin: 0 auto;
  }

  /* CTA buttons must wrap (no overflow) */
  .jessi-portal .jp-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  .jessi-portal .jp-cta a {
    flex: 1 1 180px;
    /* wrap into 2 columns if possible */
    min-width: 0;
    /* CRITICAL: allows flex items to shrink */
    max-width: 100%;
    text-align: center;
  }
}

/* STATS + BODY: collapse to 1 column on phone */
@media (max-width: 768px) {
  .jessi-portal .jp-stats {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px;
  }

  .jessi-portal .jp-body {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px;
  }
}

/* Timeline/stepper: single column cleanly */
@media (max-width: 768px) {
  .jessi-portal .jp-stepper {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    padding-left: 0;
  }

  .jessi-portal .jp-step {
    min-width: 0;
  }
}

/* Posters grid: single column on phone so no overflow */
@media (max-width: 768px) {
  .jessi-portal .jp-postersGrid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px;
  }

  /* Lightbox image must fit viewport on Android */
  .jessi-portal .jp-lightboxPanel img,
  .jessi-portal .ojsLightboxPanel img {
    max-width: 92vw !important;
    max-height: 85vh !important;
    height: auto !important;
  }
}



/* Marquee: prevent overflow and keep logos inside */
.jessi-portal .idxMarquee__wrap {
  overflow: hidden;
}

.jessi-portal .idxMarquee__item {
  display: inline-flex;
  align-items: center;
}

.jessi-portal .idxMarquee__item img {
  height: 42px !important;
  width: auto !important;
}

/* =========================================================
   4) OPTIONAL: enforce max content width 400px on small phones
      (you asked this explicitly)
========================================================= */
@media (max-width: 420px) {
  .jessi-portal .jp-wrap {
    max-width: 400px;
    /* will never exceed screen anyway */
    padding-left: 12px;
    padding-right: 12px;
  }
}

/* Header sebagai banner: rasio terkunci */
.pkp_structure_head {
  padding: 0 !important;
  margin: 0 !important;

  background: url("https://ejournal.abcollab.id/public/journals/2/pageHeaderLogoImage_en_US.gif") center / contain no-repeat !important;

  aspect-ratio: 3500 / 860;
  /* kunci rasio banner */
  height: auto !important;
  min-height: 0 !important;
}

/* Sembunyikan img biar ga dobel */
.pkp_site_name .is_img img {
  display: none !important;
}



/* TABLET */
@media (max-width: 991px) {
  .pkp_structure_head {
    min-height: 140px !important;
    background-position: center !important;
  }
}

/* MOBILE: jangan crop -> pakai CONTAIN */
@media (max-width: 575px) {
  .pkp_structure_head {
    min-height: 60px !important;
    /* sesuaikan */
    background-image: url("https://ejournal.abcollab.id/public/journals/2/pageHeaderLogoImage_en_US.gif") !important;

    background-size: contain !important;
    /* KUNCI: tidak kepotong */
    background-repeat: no-repeat !important;
    background-position: left center !important;
    /* biasanya logo di kiri */
    background-color: #f28c00 !important;
    /* warna sisa area (samakan dengan banner) */
  }
}

/* Make the page content start BELOW the header + menu (no menu changes) */
.pkp_structure_content.has_sidebar {
  clear: both !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* If the header/banner overlaps the content, add spacing equal to your banner height */
@media (min-width: 992px) {
  .pkp_structure_content.has_sidebar {
    padding-top: 5px !important;
    /* adjust: 200–320 depending on your banner height */
  }
}

/* Main navigation links */
.pkp_navigation_primary_wrapper a {
  color: #ffffff !important;
}

/* Dropdown menu links */
.pkp_navigation_primary_wrapper .dropdown-menu a {
  color: #ffffff !important;
}

/* Search link */
.pkp_navigation_search_wrapper a {
  color: #ffffff !important;
}

.logo-foot {
  display: inline-flex;
  align-items: center;
  line-height: 1;
  width: 100%;
  justify-content: center;
}

.logo-foot img {
  height: 188px;
  /* naikkan (coba 40–52px) */
  width: auto;
  max-width: 180px;
  /* biar tetap proporsional */
  object-fit: contain;
  display: block;
}

:root {
  --c-primary: #478B8C;
  --c-ink: #0b1e20;
  --c-muted: rgba(11, 30, 32, 0.62);
  --c-border: rgba(0, 86, 107, 0.14);
  --c-bg: #fff;
  --c-shadow: 0 14px 40px rgba(15, 40, 42, 0.08);
  --c-radius: 18px;
}

.cmap {
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--c-radius);
  box-shadow: var(--c-shadow);
  padding: 14px;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Helvetica Neue", sans-serif;
  color: var(--c-ink);
}

.cmap__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.cmap__kicker {
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-muted);
  line-height: 1.2;
  margin-bottom: 2px;
}

.cmap__title {
  margin: 0;
  font-size: 15px;
  line-height: 1.15;
  color: var(--c-primary);
  font-weight: 900;
}

.cmap__stats {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.cmap__pill {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--c-border);
  background: rgba(0, 98, 107, 0.04);
}

.cmap__pillLabel {
  font-size: 11px;
  color: var(--c-muted);
  font-weight: 700;
}

.cmap__pillVal {
  font-size: 12px;
  color: var(--c-primary);
  font-weight: 900;
}

.cmap__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.cmap__card {
  position: relative;
  border: 1px solid rgba(0, 89, 107, 0.12);
  border-radius: 16px;
  background:
    radial-gradient(900px 160px at 20% 0%, rgba(0, 104, 107, 0.1), transparent 55%),
    linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, .94));
  padding: 12px;
  overflow: hidden;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.cmap__card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 95, 107, 0.12), transparent 55%);
  opacity: .18;
  pointer-events: none;
}

.cmap__card:hover {
  transform: translateY(-1px);
  border-color: rgba(0, 95, 107, 0.2);
  box-shadow: 0 16px 34px rgba(15, 42, 42, 0.1);
}

.cmap__row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 1;
}

.cmap__flagImg {
  width: 38px !important;
  height: 26px !important;
  min-width: 38px !important;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 8px 16px rgba(15, 41, 42, 0.1);
  object-fit: cover;
  background: linear-gradient(180deg, rgba(0, 91, 107, 0.1), rgba(0, 84, 107, 0.04));
  /* fallback if src empty */
  display: block;
}

.cmap__meta {
  min-width: 0;
  flex: 1 1 auto;
}

.cmap__country {
  font-size: 13px;
  font-weight: 900;
  color: var(--c-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cmap__sub {
  font-size: 11px;
  color: var(--c-muted);
  font-weight: 700;
  margin-top: 2px;
}

.cmap__right {
  text-align: right;
  flex: 0 0 auto;
}

.cmap__count {
  font-size: 20px;
  font-weight: 950;
  color: var(--c-primary);
  letter-spacing: -.02em;
  line-height: 1;
}

.cmap__label {
  margin-top: 2px;
  font-size: 11px;
  color: var(--c-muted);
  font-weight: 800;
}

.cmap__foot {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed rgba(0, 95, 107, 0.18);
}

.cmap__note {
  font-size: 11px;
  color: var(--c-muted);
}

.cmap code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 11px;
  color: var(--c-primary);
}

.aillceF {
  --ink: rgba(255, 255, 255, .92);
  --muted: rgba(255, 255, 255, .66);
  --line: rgba(255, 255, 255, .12);

  background: none;

  color: var(--ink);
  font-family: 'Montserrat', 'Segoe UI', Roboto, sans-serif !important;
  margin-top: 40px;
}

/* Apply Montserrat to all footer elements */
.aillceF,
.aillceF * {
  font-family: 'Montserrat', 'Segoe UI', Roboto, sans-serif !important;
}

/* CTA */
.aillceF-cta {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 18px;
  transform: translateY(28px);
}

.aillceF-ctaInner {
  border-radius: 22px;
  padding: 18px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;

  background: linear-gradient(90deg, rgba(56, 189, 248, .18), rgba(255, 255, 255, .06));
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 18px 34px rgba(0, 0, 0, .30);
  backdrop-filter: blur(6px);
}

.aillceF-ctaLeft {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.aillceF-ctaLogo {
  width: 100px;
  height: 100px;
  object-fit: contain;
  padding: 6px;
}

.aillceF-ctaOrg {
  font-weight: 800;
  letter-spacing: .4px;
  font-size: 12px;
  color: rgba(255, 255, 255, .80);
  margin-bottom: 4px;
}

.aillceF-ctaHeadline {
  font-weight: 800;
  font-size: 26px;
  line-height: 1.1;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 720px;
}

.aillceF-ctaBtn {
  color: #fff;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, .40);
  padding: 12px 18px;
  border-radius: 14px;
  font-weight: 800;
  background: rgba(255, 255, 255, .08);
  white-space: nowrap;
}

.aillceF-ctaBtn:hover {
  background: rgba(255, 255, 255, .14);
}

/* GRID */
.aillceF-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 62px 18px 18px;
  display: grid;
  grid-template-columns: 1.45fr 1.45fr .85fr .85fr;
  gap: 26px;
}

.aillceF-head {
  font-size: 12px;
  letter-spacing: 1px;
  font-weight: 800;
  color: rgba(255, 255, 255, .88);
  margin-bottom: 14px;
}

.aillceF-badge {
  width: fit-content;
  padding: 8px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--line);
  font-weight: 800;
  letter-spacing: .6px;
  margin-bottom: 12px;
}

.aillceF-title {
  font-weight: 800;
  font-size: 16px;
  line-height: 1.3;
  margin-bottom: 10px;
}

.aillceF-desc {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.85;
  max-width: 46ch;
}

.aillceF-text {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.8;
  display: grid;
  gap: 6px;
}

.aillceF-links {
  margin-top: 14px;
  display: grid;
  gap: 12px;
}

.aillceF-links a {
  color: rgba(255, 255, 255, .78);
  text-decoration: none;
  width: fit-content;
  padding-bottom: 2px;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
}

.aillceF-links a:hover {
  color: #fff;
  border-bottom-color: rgba(255, 255, 255, .30);
}

.aillceF-muted {
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.6;
  margin-top: 2px;
}

.aillceF-social {
  margin-top: 14px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.aillceF-ico {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .05);
  color: rgba(255, 255, 255, .90);
  text-decoration: none;
}

.aillceF-ico:hover {
  background: rgba(255, 255, 255, .10);
  border-color: rgba(255, 255, 255, .22);
}

/* MAP */
.aillceF-mapWrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 18px 18px;
}

.aillceF-map {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .03);
}

.aillceF-map iframe {
  width: 100%;
  height: 320px;
  border: 0;
  display: block;
}

/* BOTTOM */
.aillceF-bottom {
  border-top: 1px solid var(--line);
  padding: 14px 0 18px;
}

.aillceF-bottomInner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 18px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  color: rgba(255, 255, 255, .70);
  font-size: 13px;
}

/* Responsive */
@media (max-width: 980px) {
  .aillceF-inner {
    grid-template-columns: 1fr 1fr;
  }

  .aillceF-desc {
    max-width: none;
  }

  .aillceF-ctaHeadline {
    font-size: 22px;
    max-width: 520px;
  }
}

@media (max-width: 640px) {
  .aillceF-ctaInner {
    flex-direction: column;
    align-items: flex-start;
  }

  .aillceF-ctaHeadline {
    white-space: normal;
    max-width: none;
  }

  .aillceF-cta {
    transform: translateY(16px);
  }

  .aillceF-inner {
    grid-template-columns: 1fr;
    padding-top: 54px;
  }

  .aillceF-map iframe {
    height: 300px;
  }
}

.pkp_footer_content {
  background: #0f172a;
}

/* =========================
   Journal Theme Tokens
   ========================= */
:root {
  --primary-color: #478B8C;
  /* teal */
  --neutral-color: #E5A544;
  /* gold */
  --text-color: #0f172a;
  --muted-text: #475569;
  --bg: #ffffff;
  --soft-bg: #f8fafc;
  --soft-bg-2: #f1f5f9;
  --border: #e5e7eb;

  --radius-lg: 18px;
  --radius-md: 14px;
  --radius-sm: 12px;

  --focus-ring: rgba(71, 139, 140, .18);
  --shadow-sm: 0 6px 20px rgba(15, 23, 42, .05);
  --shadow-md: 0 14px 30px rgba(15, 23, 42, .08);
}

/* =========================
   Wrapper / Base
   ========================= */
.msf-wrap {
  padding: 18px;
  background: var(--bg);
}

.msf {
  max-width: 920px;
  margin: 0 auto;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text-color);
}

/* =========================
   Header (light, not dark)
   ========================= */
.msf-head {
  background:
    radial-gradient(900px 260px at 10% 0%,
      rgba(71, 139, 140, .18), transparent 55%),
    radial-gradient(900px 260px at 85% 10%,
      rgba(229, 165, 68, .16), transparent 60%),
    linear-gradient(180deg, #ffffff, var(--soft-bg));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 18px 16px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-sm);
}

.msf-head h2 {
  margin: 0 0 6px;
  font-size: 20px;
  letter-spacing: .2px;
  color: var(--text-color);
}

.msf-head p {
  margin: 0;
  opacity: .95;
  line-height: 1.45;
  font-size: 13.5px;
  color: var(--muted-text);
}

/* =========================
   Cards
   ========================= */
.msf-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px;
  margin: 12px 0;
  box-shadow: var(--shadow-sm);
}

/* If you still use fieldset/legend anywhere */
.msf-card legend {
  padding: 0 8px;
  font-weight: 800;
  color: var(--text-color);
  font-size: 14px;
}

/* =========================
   Grid / Layout
   ========================= */
.msf-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 10px;
}

.msf-span2 {
  grid-column: span 2;
}

.msf-full {
  grid-column: 1 / -1;
}

.msf-subhead {
  margin-top: 12px;
  font-weight: 900;
  font-size: 13px;
  color: var(--text-color);
}

/* =========================
   Fields
   ========================= */
.msf-field {
  display: block;
}

.msf-field span {
  display: block;
  font-size: 13px;
  color: var(--text-color);
  margin-bottom: 6px;
  font-weight: 700;
}

.msf-field em {
  color: #ef4444;
  font-style: normal;
}

/* Inputs */
.msf input,
.msf textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #d1d5db;
  background: #fff;
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 14px;
  outline: none;
}

.msf textarea {
  resize: vertical;
  min-height: 120px;
}

.msf input:focus,
.msf textarea:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

/* =========================
   Requirements Panel (light)
   ========================= */
.msf-req {
  margin: 12px 0 14px;
  padding: 16px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background:
    radial-gradient(1000px 280px at 12% 0%,
      rgba(71, 139, 140, .12), transparent 55%),
    radial-gradient(1000px 280px at 88% 15%,
      rgba(229, 165, 68, .14), transparent 60%),
    linear-gradient(180deg, #ffffff, var(--soft-bg));
  color: var(--text-color);
  box-shadow: var(--shadow-sm);
}

.msf-req h3 {
  margin: 0 0 6px;
  font-size: 15.5px;
  letter-spacing: .2px;
  color: var(--text-color);
}

.msf-reqLead {
  margin: 0 0 12px;
  font-size: 13.5px;
  opacity: .95;
  line-height: 1.45;
  color: var(--muted-text);
}

.msf-reqList {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 10px;
  line-height: 1.5;
  font-size: 13.5px;
}

.msf-reqList>li {
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 1px 0 rgba(15, 23, 42, .02);
}

.msf-reqList strong {
  color: var(--primary-color);
}

.msf-reqList ul {
  margin: 8px 0 0;
  padding-left: 18px;
  display: grid;
  gap: 6px;
  color: var(--muted-text);
}

/* =========================
   Radio Group (Article Type)
   ========================= */
.msf-radio {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 10px;
  padding: 12px;
  border: 1px dashed rgba(71, 139, 140, .45);
  border-radius: var(--radius-md);
  background: var(--soft-bg);
}

.msf-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: #ffffff;
  cursor: pointer;
  line-height: 1.25;
  user-select: none;
  transition: box-shadow .15s ease, border-color .15s ease, transform .05s ease;
}

.msf-opt input {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  margin: 0;
  accent-color: var(--primary-color);
}

.msf-opt span {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-color);
  white-space: normal;
}

.msf-opt:hover {
  border-color: rgba(71, 139, 140, .55);
  box-shadow: 0 8px 18px rgba(15, 23, 42, .06);
}

/* Selected state */
.msf-opt:has(input:checked) {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(71, 139, 140, .14);
  background:
    linear-gradient(180deg, #ffffff, rgba(71, 139, 140, .06));
}

/* =========================
   Notes + Checkboxes
   ========================= */
.msf-note {
  margin: 10px 0 12px;
  color: var(--muted-text);
  line-height: 1.5;
  font-size: 13.5px;
}

.msf-check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 14px;
  color: var(--text-color);
  line-height: 1.4;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background: var(--soft-bg);
  border: 1px solid var(--border);
}

.msf-check input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--primary-color);
}

/* =========================
   Actions
   ========================= */
.msf-actions {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}

/* Button uses primary with gold highlight */
.msf-btn {
  border: 0;
  border-radius: var(--radius-md);
  padding: 12px 16px;
  font-weight: 900;
  font-size: 14px;
  cursor: pointer;
  background:
    linear-gradient(135deg,
      var(--primary-color) 0%,
      #3f7d7e 55%,
      rgba(229, 165, 68, .95) 120%);
  color: #ffffff;
  box-shadow: 0 14px 26px rgba(71, 139, 140, .18);
}

.msf-btn:hover {
  filter: brightness(1.03);
  box-shadow: 0 16px 30px rgba(71, 139, 140, .22);
}

.msf-privacy {
  margin: 0;
  font-size: 12.5px;
  color: var(--muted-text);
}

/* =========================
   Responsive
   ========================= */
@media (max-width: 720px) {
  .msf-grid {
    grid-template-columns: 1fr;
  }

  .msf-span2 {
    grid-column: auto;
  }

  .msf-radio {
    grid-template-columns: 1fr;
  }

  .msf-wrap {
    padding: 10px;
  }

  .msf-card {
    padding: 14px;
  }

  .msf-req {
    padding: 14px;
  }

  .msf-reqList {
    gap: 8px;
  }

  .msf-reqList>li {
    padding: 10px;
  }
}

.wa-creative-box {
  width: 100%;
  margin: 18px auto 24px auto;
  text-align: center;
}

.wa-creative-link {
  display: inline-block;
  text-decoration: none;
}

.wa-creative-wrap {
  position: relative;
  display: inline-block;
  width: 210px;
  max-width: 100%;
  animation: waFloat 3.2s ease-in-out infinite;
  transition: transform 0.25s ease;
}

.wa-creative-link:hover .wa-creative-wrap {
  transform: scale(1.03);
}

.wa-creative-img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

.wa-creative-overlay {
  position: absolute;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  width: 82%;
  text-align: center;
  font-family: 'Montserrat', sans-serif;
}

.wa-creative-title {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  color: #ffffff;
  margin-bottom: 2px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
  animation: waGlow 2.4s ease-in-out infinite;
}

.wa-creative-subtitle {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.25;
  color: #ffffff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
}

@keyframes waFloat {
  0% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-6px);
  }

  100% {
    transform: translateY(0px);
  }
}

@keyframes waGlow {
  0% {
    letter-spacing: 0px;
    opacity: 0.96;
  }

  50% {
    letter-spacing: 0.6px;
    opacity: 1;
  }

  100% {
    letter-spacing: 0px;
    opacity: 0.96;
  }
}

.aillceF {
  --primary: #478B8C;
  --primary-dark: #2f6667;
  --primary-soft: rgba(71, 139, 140, .24);

  --secondary: #E5A544;
  --secondary-soft: rgba(229, 165, 68, .24);

  --ink: rgba(255, 255, 255, .94);
  --muted: rgba(255, 255, 255, .72);
  --line: rgba(229, 165, 68, .24);

  background: none;
  color: var(--ink);
  font-family: 'Segoe UI', Roboto, sans-serif !important;
  margin-top: 40px;
}

/* CTA */
.aillceF-ctaInner {
  border-radius: 22px;
  padding: 18px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;

  background:
    linear-gradient(90deg,
      rgba(71, 139, 140, .78),
      rgba(71, 139, 140, .52) 55%,
      rgba(229, 165, 68, .34));
  border: 1px solid rgba(229, 165, 68, .38);
  box-shadow: 0 18px 34px rgba(0, 0, 0, .32);
  backdrop-filter: blur(6px);
}

.aillceF-ctaOrg {
  font-weight: 800;
  letter-spacing: .4px;
  font-size: 12px;
  color: rgba(229, 165, 68, .98);
  margin-bottom: 4px;
}

.aillceF-ctaHeadline {
  font-weight: 800;
  font-size: 26px;
  line-height: 1.1;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 720px;
}

.aillceF-ctaBtn {
  color: #fff;
  text-decoration: none;
  border: 1px solid rgba(229, 165, 68, .65);
  padding: 12px 18px;
  border-radius: 14px;
  font-weight: 800;
  background: rgba(229, 165, 68, .16);
  white-space: nowrap;
}

.aillceF-ctaBtn:hover {
  background: #E5A544;
  color: #263f40;
  border-color: #E5A544;
}

/* Badge */
.aillceF-badge {
  width: fit-content;
  padding: 8px 14px;
  border-radius: 12px;
  background: rgba(229, 165, 68, .13);
  border: 1px solid rgba(229, 165, 68, .30);
  color: #fff;
  font-weight: 800;
  letter-spacing: .6px;
  margin-bottom: 12px;
}

/* Links */
.aillceF-links a {
  color: rgba(255, 255, 255, .82);
  text-decoration: none;
  width: fit-content;
  padding-bottom: 2px;
  border-bottom: 1px solid rgba(229, 165, 68, .30);
}

.aillceF-links a:hover {
  color: #E5A544;
  border-bottom-color: #E5A544;
}

/* Social icons */
.aillceF-ico {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  border: 1px solid rgba(229, 165, 68, .28);
  background: rgba(71, 139, 140, .24);
  color: rgba(255, 255, 255, .92);
  text-decoration: none;
}

.aillceF-ico:hover {
  background: rgba(229, 165, 68, .18);
  border-color: rgba(229, 165, 68, .58);
  color: #fff;
}

/* Map */
.aillceF-map {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(229, 165, 68, .26);
  background: rgba(71, 139, 140, .18);
}

/* Bottom */
.aillceF-bottom {
  border-top: 1px solid rgba(229, 165, 68, .26);
  padding: 14px 0 18px;
}

/* Main OJS footer background */
.pkp_footer_content {
  background: none;
}

.pkp_structure_footer_wrapper {
  background:
    radial-gradient(circle at top left, rgba(229, 165, 68, .24), transparent 34%),
    linear-gradient(135deg,
      #2f6667 0%,
      #478B8C 48%,
      #3a7879 72%,
      #263f40 100%);
}


/* 1. Jadikan page_index_journal sebagai flex container */
.page_index_journal {
  display: flex !important;
  flex-direction: column !important;
}

/* 2. additional_content naik ke paling atas */
.page_index_journal .additional_content {
  order: -1 !important;
}

/* 3. Pastikan urutan sisanya tetap normal */
.page_index_journal .homepage_about {
  order: 0 !important;
}

.page_index_journal .current_issue {
  order: 1 !important;
}