/* =============================================================
   CUSTOM CSS - Open Journal Systems 3 (OJS 3)
   Kompatibel dengan tema Default / Bootstrap OJS 3
   Cara pakai: Upload file ini lalu daftarkan di
   Website Settings > Appearance > Additional Stylesheet
   ============================================================= */


/* ─────────────────────────────────────────────
   1. VARIABEL WARNA & TIPOGRAFI
   Ubah nilai di sini untuk mengganti tema warna
   ───────────────────────────────────────────── */
:root {
  --color-primary:      #1a5276;   /* Biru tua – warna utama */
  --color-primary-dark: #154360;   /* Hover / aksen lebih gelap */
  --color-accent:       #2e86c1;   /* Biru terang – link, highlight */
  --color-bg:           #ffffff;   /* Background halaman – PUTIH */
  --color-surface:      #ffffff;   /* Background card / konten */
  --color-border:       #dee2e6;   /* Garis pembatas */
  --color-text:         #212529;   /* Teks utama */
  --color-text-muted:   #6c757d;   /* Teks sekunder */
  --color-footer-bg:    #1a2733;   /* Background footer */
  --color-footer-text:  #c8d6df;   /* Teks footer */
  --header-bg-image: url('https://raw.githubusercontent.com/SyaidiPutra/jurnal-pustakakarya/refs/heads/main/assets/225716460_5f106cdf-b3ae-46a8-8f00-f54c80e845e7.jpg');

  --font-body:    'Noto Serif', Georgia, serif;
  --font-heading: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
  --font-ui:      'Source Sans Pro', Arial, sans-serif;

  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --shadow-card: 0 2px 8px rgba(0,0,0,0.08);
}


/* ─────────────────────────────────────────────
   2. BASE / TYPOGRAPHY
   ───────────────────────────────────────────── */
body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.75;
  color: var(--color-text);
  background-color: #ffffff !important;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--color-primary);
  line-height: 1.3;
  margin-bottom: 0.75rem;
}

h1, .h1 { font-size: 2rem; }
h2, .h2 { font-size: 1.6rem; }
h3, .h3 { font-size: 1.35rem; }

a {
  color: var(--color-accent);
  text-decoration: none;
  transition: color 0.2s;
}
a:hover {
  color: var(--color-primary-dark);
  text-decoration: underline;
}

p { margin-bottom: 1.1rem; }

.page_title {
  font-family: var(--font-heading);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--color-primary);
  border-bottom: 3px solid var(--color-accent);
  padding-bottom: 0.5rem;
  margin-bottom: 1.5rem;
}


/* ─────────────────────────────────────────────
   3. HEADER & NAVIGASI
   (selector berdasarkan DOM asli OJS dari inspect element)
   ───────────────────────────────────────────── */

/* ===============================
   BURGER (SPAN VERSION - OJS SAFE)
================================= */
.pkp_site_nav_toggle {
  display: none;
  position: relative;
  width: 30px;
  height: 22px;
  cursor: pointer;
}

/* garis tengah */
.pkp_site_nav_toggle span {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 3px;
  background: #ffffff;
  transform: translateY(-50%);
}

/* garis atas */
.pkp_site_nav_toggle::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: black;
}

/* garis bawah */
.pkp_site_nav_toggle::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: black;
}

/* ── Reset wrapper utama ── */
#headerNavigationContainer,
.pkp_head,
.pkp_head_wrapper {
  background-color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
}

/* ── pkp_site_name_wrapper – BANNER / LOGO area ── */
.pkp_site_name_wrapper {
  background-image: var(--header-bg-image) !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-color: transparent !important;
  min-height: 150px !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 16px 24px !important;
  position: relative;
  box-sizing: border-box;
}

/* ── Tampilkan SEMUA elemen di dalam site_name_wrapper ── */
.pkp_site_name_wrapper *,
.pkp_site_name_wrapper .pkp_site_name,
.pkp_site_name_wrapper .pkp_site_name a,
.pkp_site_name_wrapper img,
.pkp_site_name_wrapper .pkp_site_name img,
.pkp_site_name_wrapper a img {
  opacity: 1 !important;
  visibility: visible !important;
  /* display: block !important; */
  pointer-events: auto !important;
  height: auto !important;
  max-height: 120px !important;
  width: auto !important;
}

/* Khusus teks site name (jika tidak pakai img) */
.pkp_site_name_wrapper .pkp_site_name a {
  display: inline-block !important;
  font-family: var(--font-heading);
  font-size: 1.4rem;
  font-weight: 700;
  color: #ffffff !important;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}

/* ── pkp_site_nav_menu – container nav, harus transparan ── */
.pkp_site_nav_menu {
  background-color: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  box-shadow: none !important;
}

/* ── User nav (Register / Login) di atas banner – TRANSPARAN ── */
.pkp_navigation_user,
#navigationUser {
  background: linear-gradient(to bottom, rgba(0, 0, 0, .4) 0%, rgba(0, 0, 0, 0) 100%) !important;
    width: 100vw !important;
    border: none !important;
    box-shadow: none !important;
    position: relative;
    z-index: 10;
    padding: 5px 5rem;
}
.pkp_navigation_user li a,
.pkp_navigation_user .nav-link,
#navigationUser li a,
#navigationUser .nav-link {
  font-family: var(--font-ui);
  font-size: 0.82rem;
  font-weight: 600;
  /* color: var(--color-primary)  !important; */
  /* text-shadow: 0 1px 4px rgba(0,0,0,0.55); */
  padding: 6px 12px !important;
  background: transparent !important;
  transition: background 0.2s;
}
.pkp_navigation_user li a:hover,
#navigationUser li a:hover {
  color: var(--color-primary) !important;
  background: rgba(0,0,0,0.2) !important;
  border-radius: var(--radius-sm);
  text-decoration: none;
  /* text-shadow: none; */
}
li.profile>a{
  color: white !important;
  text-shadow: 0 1px 4px rgba(0,0,0,0.55);
}
/* li.profile>a{
  color: var(--color-primary) !important;
  background: rgba(0,0,0,0.2) !important;
  border-radius: var(--radius-sm);
  text-decoration: none;
} */
li.profile ul a{
  color: var(--color-primary)  !important;
  text-shadow: none;
}
/* li.profile ul a:hover{
  color: var(--color-primary) !important;
  background: rgba(0,0,0,0.2) !important;
  border-radius: var(--radius-sm);
  text-decoration: none;
} */

li.profile .task_count {
  display: none !important;
  /* display: inline-block; */
  background: var(--color-primary);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 2px 8px;
  margin-left: 6px;
  border-radius: 12px;
  line-height: 1;
}
li.profile .dropdown-menu a {
  color: var(--color-primary);
}

li.profile .dropdown-menu a:hover {
  color: var(--color-primary);
  opacity: 0.8;
}

/* opsional */
li.profile .dropdown-menu {
  border-radius: 8px;
  padding: 6px 0;
}

li.profile .dropdown-menu li a {
  padding: 8px 16px;
  display: block;
}

/* ── pkp_navigation_primary_row – baris menu utama ── */
.pkp_navigation_primary_row {
  background-color: #ffffff !important;
  border-top: 3px solid var(--color-accent) !important;
  border-bottom: 1px solid var(--color-border) !important;
  margin: 0 !important;
  padding: 0 !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.07);
}

/* ── pkp_navigation_primary_wrapper – reset padding bawaan ── */
.pkp_navigation_primary_wrapper {
  padding: 0 5rem !important;
  margin: 0 !important;
  background-color: #ffffff !important;
}

/* Hapus border bawaan Bootstrap */
.navbar,
.navbar-default {
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin-bottom: 0 !important;
  background-color: transparent !important;
}

/* Item menu */
.pkp_navigation_primary > li > a,
.pkp_navigation_primary .nav-link,
.pkp_navigation_primary_row .navbar-nav > li > a {
  font-family: var(--font-ui);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-primary) !important;
  padding: 14px 18px !important;
  transition: background 0.2s, color 0.2s;
  text-decoration: none !important;
  background: transparent !important;
  border: none !important;
}
.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary .nav-link:hover,
.pkp_navigation_primary_row .navbar-nav > li > a:hover,
.pkp_navigation_primary > li.active > a {
  background-color: var(--color-accent) !important;
  color: #ffffff !important;
}

/* Search toggle */
.pkp_search_toggle,
.pkp_navigation_primary .pkp_search_toggle {
  color: var(--color-primary) !important;
  font-weight: 600;
  font-family: var(--font-ui);
}

/* Dropdown menu */
.pkp_navigation_primary .dropdown-menu,
.pkp_navigation_primary_row .dropdown-menu {
  background-color: #ffffff;
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-accent);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  min-width: 210px;
  margin-top: 0;
  padding: 4px 0;
}
.pkp_navigation_primary .dropdown-menu a,
.pkp_navigation_primary_row .dropdown-menu a {
  font-family: var(--font-ui);
  font-size: 0.9rem;
  color: var(--color-text) !important;
  padding: 9px 18px;
  display: block;
}
.pkp_navigation_primary .dropdown-menu a:hover,
.pkp_navigation_primary_row .dropdown-menu a:hover {
  background-color: #eaf4fb;
  color: var(--color-primary) !important;
}


/* ─────────────────────────────────────────────
   4. HALAMAN BERANDA JURNAL
   ───────────────────────────────────────────── */
.pkp_page_index .pkp_structure_main {
  background-color: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: 2rem;
  box-shadow: var(--shadow-card);
}

/* Pengumuman / announcements */
.pkp_block_announcements .title a {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--color-primary);
}


/* ─────────────────────────────────────────────
   5. DAFTAR ARTIKEL / ISSUE
   ───────────────────────────────────────────── */

/* Card setiap artikel */
.obj_article_summary {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.25rem;
  box-shadow: var(--shadow-card);
  transition: box-shadow 0.25s, transform 0.2s;
}
.obj_article_summary:hover {
  box-shadow: 0 4px 16px rgba(26,82,118,0.15);
  transform: translateY(-2px);
}

/* Judul artikel */
.obj_article_summary .title a {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-primary);
}
.obj_article_summary .title a:hover {
  color: var(--color-accent);
  text-decoration: underline;
}

/* Nama penulis */
.obj_article_summary .authors {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  margin-top: 4px;
}

/* DOI / metadata kecil */
.obj_article_summary .doi,
.obj_article_summary .published {
  font-size: 0.82rem;
  color: var(--color-text-muted);
}

/* Cover issue */
.obj_issue_summary .cover img {
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  max-width: 120px;
}


/* ─────────────────────────────────────────────
   6. HALAMAN DETAIL ARTIKEL
   ───────────────────────────────────────────── */
.obj_article_details {
  background-color: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: 2rem 2.5rem;
  box-shadow: var(--shadow-card);
}

/* Judul artikel utama */
.obj_article_details h1.title {
  font-size: 1.75rem;
  color: var(--color-primary);
  border-left: 4px solid var(--color-accent);
  padding-left: 1rem;
  margin-bottom: 1.25rem;
}

/* Section abstract */
.obj_article_details .abstract {
  background-color: #eaf4fb;
  border-left: 4px solid var(--color-accent);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 1.25rem 1.5rem;
  margin: 1.5rem 0;
  font-size: 0.97rem;
  line-height: 1.8;
}
.obj_article_details .abstract h2,
.obj_article_details .label {
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--color-accent);
  margin-bottom: 0.5rem;
}

/* Keywords */
.obj_article_details .keywords {
  margin: 1rem 0;
  font-size: 0.9rem;
}
.obj_article_details .keywords .label {
  display: inline;
  font-size: 0.85rem;
}
.obj_article_details .keywords .value a {
  display: inline-block;
  background-color: #d6eaf8;
  color: var(--color-primary);
  border-radius: 20px;
  padding: 2px 12px;
  margin: 3px 4px;
  font-size: 0.82rem;
  transition: background 0.2s;
}
.obj_article_details .keywords .value a:hover {
  background-color: var(--color-accent);
  color: #fff;
  text-decoration: none;
}

/* Informasi penggalian (DOI, volume, dll) */
.obj_article_details .article_details .label {
  font-weight: 600;
  color: var(--color-text-muted);
  min-width: 120px;
  display: inline-block;
}


/* ─────────────────────────────────────────────
   7. TOMBOL (BUTTONS)
   ───────────────────────────────────────────── */
.btn,
button,
input[type="submit"],
input[type="button"] {
  font-family: var(--font-ui);
  font-size: 0.9rem;
  font-weight: 600;
  border-radius: var(--radius-sm);
  padding: 8px 20px;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
  border: none;
}

.btn-primary,
.pkp_button_primary {
  background-color: var(--color-accent) !important;
  color: #fff !important;
  border: none !important;
}
.btn-primary:hover,
.pkp_button_primary:hover {
  background-color: var(--color-primary-dark) !important;
  box-shadow: 0 3px 10px rgba(26,82,118,0.3);
  transform: translateY(-1px);
}

.btn-default,
.pkp_button {
  background-color: #fff;
  color: var(--color-primary);
  border: 1.5px solid var(--color-accent) !important;
}
.btn-default:hover,
.pkp_button:hover {
  background-color: #eaf4fb;
  color: var(--color-primary-dark);
}

/* Tombol download PDF / Galley */
.obj_galley_link.pdf,
.obj_galley_link a {
  background-color: var(--color-primary);
  color: #fff !important;
  border-radius: var(--radius-sm);
  padding: 6px 16px;
  font-size: 0.88rem;
  font-weight: 600;
  display: inline-block;
  transition: background 0.2s;
  text-decoration: none !important;
}
.obj_galley_link.pdf:hover,
.obj_galley_link a:hover {
  background-color: var(--color-accent);
}


/* ─────────────────────────────────────────────
   8. FORM
   ───────────────────────────────────────────── */
.pkp_form input[type="text"],
.pkp_form input[type="email"],
.pkp_form input[type="password"],
.pkp_form input[type="search"],
.pkp_form select,
.pkp_form textarea,
input.form-control,
select.form-control,
textarea.form-control {
  font-family: var(--font-ui);
  font-size: 0.95rem;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 9px 13px;
  color: var(--color-text);
  background-color: var(--color-surface);
  width: 100%;
  transition: border-color 0.2s, box-shadow 0.2s;
}
input.form-control:focus,
select.form-control:focus,
textarea.form-control:focus,
.pkp_form input:focus,
.pkp_form select:focus,
.pkp_form textarea:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(46,134,193,0.15);
  outline: none;
}

.pkp_form label,
.form-group label {
  font-family: var(--font-ui);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 5px;
  display: block;
}

/* Search bar */
.pkp_search .search_input,
.pkp_search input[type="search"] {
  border-radius: var(--radius-lg) 0 0 var(--radius-lg) !important;
  border-right: none !important;
}
.pkp_search button[type="submit"] {
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0 !important;
  background-color: var(--color-accent);
  color: #fff;
  padding: 9px 16px;
  border: none;
}


/* ─────────────────────────────────────────────
   9. SIDEBAR
   ───────────────────────────────────────────── */
.pkp_sidebar .pkp_block {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1.25rem;
  margin-bottom: 1.25rem;
  box-shadow: var(--shadow-card);
}

.pkp_sidebar .pkp_block .title,
.pkp_sidebar .block_title {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-primary);
  border-bottom: 2px solid var(--color-accent);
  padding-bottom: 8px;
  margin-bottom: 12px;
}

.pkp_sidebar ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}
.pkp_sidebar ul li {
  padding: 5px 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.9rem;
}
.pkp_sidebar ul li:last-child { border-bottom: none; }


/* ─────────────────────────────────────────────
   10. FOOTER
   ───────────────────────────────────────────── */
.pkp_structure_footer,
footer.pkp_structure_footer {
  background-color: var(--color-footer-bg) !important;
  color: var(--color-footer-text);
  padding: 2.5rem 0 1.5rem;
  margin-top: 3rem;
  font-family: var(--font-ui);
  font-size: 0.88rem;
}

.pkp_structure_footer a {
  color: #a8cfe0 !important;
}
.pkp_structure_footer a:hover {
  color: #ffffff !important;
  text-decoration: underline;
}

.pkp_structure_footer .pkp_footer_content {
  color: var(--color-footer-text);
}

/* Teks "Powered by PKP" */
.pkp_structure_footer .pkp_brand_footer {
  opacity: 0.55;
  font-size: 0.8rem;
  margin-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 1rem;
  text-align: center;
}


/* ─────────────────────────────────────────────
   11. BREADCRUMB
   ───────────────────────────────────────────── */
.pkp_breadcrumbs,
.breadcrumb {
  font-family: var(--font-ui);
  font-size: 0.85rem;
  background: transparent !important;
  padding: 0.5rem 0;
  margin-bottom: 1rem;
}
.pkp_breadcrumbs a,
.breadcrumb-item a {
  color: var(--color-accent);
}
.pkp_breadcrumbs .current,
.breadcrumb-item.active {
  color: var(--color-text-muted);
}


/* ─────────────────────────────────────────────
   12. NOTIFIKASI / FLASH MESSAGES
   ───────────────────────────────────────────── */
.pkp_notification,
.notifySuccess,
.notifyError {
  border-radius: var(--radius-md);
  padding: 12px 16px;
  font-family: var(--font-ui);
  font-size: 0.9rem;
  margin-bottom: 1rem;
}
.notifySuccess { background-color: #d4efdf; color: #1e8449; border-left: 4px solid #27ae60; }
.notifyError   { background-color: #fadbd8; color: #922b21; border-left: 4px solid #e74c3c; }
.notifyWarning { background-color: #fdebd0; color: #784212; border-left: 4px solid #f39c12; }


/* ─────────────────────────────────────────────
   13. LAYOUT RESPONSIF (MOBILE)
   ───────────────────────────────────────────── */
@media (max-width: 991px) {
  /* Hamburger menu – warna gelap di atas navbar putih */
  .navbar-toggle {
    background-color: transparent;
    border-color: var(--color-primary);
  }
  .navbar-toggle .icon-bar { background-color: var(--color-primary); }

  /* logo */
  .pkp_site_name_wrapper .pkp_site_name a img {
    max-width: 80vw !important;
  }
  .pkp_site_name {
    position: relative !important;
  }

  /* Header banner tetap full di mobile */
  .pkp_head .pkp_header,
  .pkp_head .pkp_header_wrapper,
  .pkp_site_name_wrapper,
  .pkp_head .navbar-header {
    min-height: 90px !important;
    background-size: cover !important;
    background-position: center center !important;
  }

  /* User bar tetap transparan di mobile */
  .pkp_navigation_user,
  #navigationUser {
    background-color: transparent !important;
    background-image: var(--header-bg-image) !important;
    background-size: cover !important;
    background-position: center top !important;
  }

  /* Menu mobile – putih */
  .pkp_navigation_primary_wrapper,
  .navbar-collapse {
    background-color: #ffffff !important;
  }
  .pkp_navigation_primary > li > a,
  .navbar-nav > li > a {
    padding: 12px 20px !important;
    border-bottom: 1px solid var(--color-border) !important;
    color: var(--color-primary) !important;
  }
}
/* @media (min-width: 992px) {
  
} */

@media (max-width: 767px) {
  .pkp_site_nav_toggle {
    display: block !important;
  }
  /* Layout 1 kolom */
  .pkp_structure_main,
  .pkp_structure_sidebar {
    width: 100% !important;
    float: none !important;
    padding-left: 15px;
    padding-right: 15px;
  }

  /* Artikel detail padding lebih kecil */
  .obj_article_details {
    padding: 1.25rem 1rem;
  }

  /* Judul lebih kecil */
  h1, .h1 { font-size: 1.5rem; }
  h2, .h2 { font-size: 1.25rem; }
  .obj_article_details h1.title { font-size: 1.3rem; }

  /* Tombol galley full width */
  .obj_galley_link a {
    display: block;
    text-align: center;
    margin-bottom: 8px;
  }

  /* Abstract padding */
  .obj_article_details .abstract {
    padding: 1rem;
  }

  /* Footer teks tengah */
  .pkp_structure_footer {
    text-align: center;
  }
}

@media (max-width: 480px) {
  body { font-size: 15px; }

  .obj_article_summary {
    padding: 1rem;
  }
  .obj_article_summary .title a {
    font-size: 1rem;
  }

  /* Search bar full width */
  .pkp_search { display: flex; }
  .pkp_search input { flex: 1; }
}


/* ─────────────────────────────────────────────
   14. UTILITAS TAMBAHAN
   ───────────────────────────────────────────── */

/* Skip to content accessibility */
.pkp_skip_to_content a:focus {
  background: var(--color-accent);
  color: #fff;
  padding: 8px 16px;
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 9999;
  border-radius: var(--radius-sm);
}

/* Pagination */
.pkp_navigation_public .pagination > li > a {
  color: var(--color-accent);
  border-color: var(--color-border);
  border-radius: var(--radius-sm) !important;
  margin: 0 2px;
}
.pkp_navigation_public .pagination > li.active > a,
.pagination > li.active > a {
  background-color: var(--color-accent) !important;
  border-color: var(--color-accent) !important;
  color: #fff;
}

/* Tabel data (statistik, dll) */
.pkp_page table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  margin-bottom: 1.5rem;
}
.pkp_page table th {
  background-color: var(--color-primary);
  color: #fff;
  padding: 10px 14px;
  text-align: left;
  font-family: var(--font-ui);
}
.pkp_page table td {
  padding: 9px 14px;
  border-bottom: 1px solid var(--color-border);
}
.pkp_page table tr:nth-child(even) td {
  background-color: #f1f8fc;
}
