/* COLORS */
:root {
  --light-blue: #3852b4;
  --hover-blue: #1e6292;
  --link-blue: #0071bc;
  --sky-blue: #c6e7ff;
  --yellow: #f4d051;
  --default-white: #ffffff;
  --custom-white: #fcfcfc;
  --custom-white-border: #eeeeee;
  --default-black: #000000;
  --custom-black: #353b48;
}

body {
  overflow-x: hidden !important;
}

/* NOTIFICATION */
.cmp_notification {
  background-color: var(--custom-white) !important;
  padding: 18px !important;
  border-left: 6px solid var(--light-blue) !important;
  border-radius: 4px !important;
}

/* DEFAULT STYLES */
.default-text {
  line-height: 1.8 !important;
  text-align: justify !important;
  font-size: 14px !important;
}

.default-additional {
  background-color: var(--custom-white);
  padding: 14px;
  border-left: 6px solid var(--light-blue);
  border-radius: 4px;
}

.default-list {
  list-style-type: disc !important;
}

.default-list-number {
  list-style-type: decimal !important;
}

.default-accordion-margin {
  margin-top: -42px !important;
}

.default-icon {
  width: 24px !important;
  height: 24px !important;
  margin-right: 16px !important;
  display: block !important;
}

/* E-ISSN & P-ISSN */
.e-issn,
.p-issn {
  display: flex;
  align-items: center;
  background-color: var(--light-blue);
  color: var(--default-white) !important;
  text-align: left;
  padding: 16px 15px;
  font-weight: bold;
  font-size: 14px;
  border-radius: 4px;
}

.e-issn {
  margin-bottom: 18px;
}

.p-issn {
  margin-bottom: 24px;
}

.issn-icon {
  width: 36px;
  height: 36px;
  margin-right: 16px;
  display: block;
}

/* SIDEBAR*/
/* Sidebar Menu */
.sidebar-menu-item {
  width: 100%;
  color: var(--default-black);
  box-sizing: border-box;
  transition: all 0.2s ease-in-out;
  display: flex;
  align-items: center;
  border: 2px solid var(--light-blue);
  border-left: 6px solid var(--light-blue);
  text-align: left;
  padding: 10px 15px;
  margin-bottom: 5px;
  text-decoration: none;
  font-weight: bold;
  font-size: 12px;
  border-radius: 4px;
}

.sidebar-menu-item img {
  transition: all 0.2s ease-in-out !important;
}

.sidebar-menu-item:hover {
  background-color: var(--light-blue) !important;
  border: 2px solid var(--light-blue) !important;
  border-left: 6px solid var(--yellow) !important;
  color: var(--default-white) !important;
  text-decoration: none !important;
}

.sidebar-menu-item:hover img {
  filter: brightness(0) invert(1) !important;
}

/* Sidebar Menu Pages */
body.pkp_page_editorial-team a[href*="editorial-team"],
body.pkp_page_focus-and-scope a[href*="focus-and-scope"],
body.pkp_page_publication-ethics a[href*="publication-ethics"],
body.pkp_page_copyright-notice a[href*="copyright-notice"],
body.pkp_page_author-guidelines a[href*="author-guidelines"],
body.pkp_page_peer-review-process a[href*="peer-review-process"],
body.pkp_page_peer-reviewer-list a[href*="peer-reviewer-list"],
body.pkp_page_article-processing-charges a[href*="article-processing-charges"],
body.pkp_page_indexing-and-abstracting a[href*="indexing-and-abstracting"],
body.pkp_page_open-access-policy a[href*="open-access-policy"] {
  background-color: var(--light-blue) !important;
  border: 2px solid var(--light-blue) !important;
  border-left: 6px solid var(--yellow) !important;
  color: var(--default-white) !important;
}

body.pkp_page_editorial-team a[href*="editorial-team"] img,
body.pkp_page_focus-and-scope a[href*="focus-and-scope"] img,
body.pkp_page_publication-ethics a[href*="publication-ethics"] img,
body.pkp_page_copyright-notice a[href*="copyright-notice"] img,
body.pkp_page_author-guidelines a[href*="author-guidelines"] img,
body.pkp_page_peer-review-process a[href*="peer-review-process"] img,
body.pkp_page_peer-reviewer-list a[href*="peer-reviewer-list"] img,
body.pkp_page_article-processing-charges
  a[href*="article-processing-charges"]
  img,
body.pkp_page_indexing-and-abstracting a[href*="indexing-and-abstracting"] img,
body.pkp_page_open-access-policy a[href*="open-access-policy"] img {
  filter: brightness(0) invert(1) !important;
}

/* JOURNAL PAGE */
.homepage_about p,
.page_submissions,
.page_contact,
.page_masthead,
.page_search,
.page_register,
.page_login,
.page_lost_password,
.page_issue,
.page_article,
.page_index_journal {
  line-height: 1.8 !important;
  text-align: justify !important;
  font-size: 14px !important;
}

.page_article .page_title {
  text-align: left !important;
}

.homepage_about p:nth-of-type(3) {
  background-color: var(--custom-white) !important;
  padding: 14px !important;
  border-left: 6px solid var(--light-blue) !important;
  border-radius: 4px;
}

/* Button Page */
.page_search button.submit,
.page_register button.submit,
.page_login button.submit,
.page_lost_password button.submit {
  background-image: none !important;
  background-color: var(--default-white) !important;
  box-shadow: none !important;
  border: 1px solid var(--light-blue) !important;
  color: var(--default-black) !important;
  cursor: pointer !important;
}

.page_search button.submit::before,
.page_search button.submit::after {
  background-image: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
  color: var(--default-black) !important;
}

.page_search button.submit:hover,
.page_register button.submit:hover,
.page_login button.submit:hover,
.page_lost_password button.submit:hover {
  background-color: var(--light-blue) !important;
  color: var(--default-white) !important;
  transition: all 0.2s ease-in-out !important;
}

.page_search button.submit:hover::before,
.page_search button.submit:hover::after {
  background-color: transparent !important;
  color: var(--default-white) !important;
  transition: all 0.2s ease-in-out !important;
}

/* FOOTER */
.pkp_brand_footer {
  display: none !important;
}

.pkp_structure_footer_wrapper {
  background-color: var(--custom-black) !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  border-top: 8px solid var(--yellow) !important;
}

/* Footer Content */
.sejr-footer {
  color: var(--default-white);
  padding: 8px 12px;
  font-size: 12px;
  text-align: center;
  line-height: 1.8;
  max-width: 1100px;
  margin: 0 auto;
}

.sejr-footer-logo {
  max-width: 340px;
  height: auto;
  margin-bottom: 8px;
}

/* Copyright */
.sejr-copyright {
  margin-bottom: 16px;
  font-size: 12px;
}

/* Disclaimer */
.sejr-disclaimer {
  text-align: justify;
}

.sejr-email {
  color: var(--default-white) !important;
  text-decoration: none !important;
  transition: all 0.2s ease-in-out !important;
}

.sejr-email:hover {
  text-decoration: underline !important;
}

/* CC BY-SA */
.cc-by-sa {
  border-top: 2px solid var(--custom-white-border);
  padding-top: 12px;
}

.cc-by-sa-logo {
  width: 88px;
}

/* COPE LOGO */
.cope-logo {
  width: 400px;
  height: auto;
}

/* INFORMATION MENU & INFORMATION LINKS */
/* Information Menu */
body.pkp_op_readers a[href*="readers"],
body.pkp_op_authors a[href*="authors"],
body.pkp_op_librarians a[href*="librarians"] {
  background-color: var(--light-blue) !important;
  border: 2px solid var(--light-blue) !important;
  border-left: 6px solid var(--yellow) !important;
  color: var(--default-white) !important;
}

body.pkp_op_readers a[href*="readers"] img,
body.pkp_op_authors a[href*="authors"] img,
body.pkp_op_librarians a[href*="librarians"] img {
  filter: brightness(0) invert(1) !important;
}

/* Information Links */
body.pkp_page_copyright-notice .pkp_structure_main a,
body.pkp_page_author-guidelines .pkp_structure_main a,
body.pkp_page_publication-ethics .pkp_structure_main a,
.page_announcements a,
.page_contact a,
.page_masthead a,
.page_submissions a,
.cmp_breadcrumbs a,
.page_search a,
.page_register a,
.page_login a,
.page_lost_password a,
.page_issue_archive a,
.page_issue a,
.page_article a,
.page_index_journal a,
.information {
  color: var(--link-blue) !important;
  text-decoration: none !important;
  transition: all 0.2s ease-in-out !important;
}

body.pkp_page_copyright-notice .pkp_structure_main a:hover,
body.pkp_page_author-guidelines .pkp_structure_main a:hover,
body.pkp_page_publication-ethics .pkp_structure_main a:hover,
.page_announcements a:hover,
.page_contact a:hover,
.page_masthead a:hover,
.page_submissions a:hover,
.cmp_breadcrumbs a:hover,
.page_search a:hover,
.page_register a:hover,
.page_login a:hover,
.page_lost_password a:hover,
.page_issue_archive a:hover,
.page_issue a:hover,
.page_article a:hover,
.page_index_journal a:hover,
.information:hover {
  text-decoration: none !important;
  color: var(--hover-blue) !important;
}

/* JOURNAL TEMPLATE */
.template-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.template img {
  width: 100%;
  height: auto;
  border-radius: 4px;
  border: var(--custom-white-border) solid 2px;
}

.template:hover,
.visitor:hover {
  filter: brightness(0.95) !important;
  transition: all 0.2s ease-in-out !important;
}

/* ACCORDION */
/* Container utama */
.accordion-container {
  width: 100%;
}

/* Detail */
.detail-accordion {
  border: none;
  overflow: hidden;
  transition: all 0.3s ease;
}

.detail-accordion:hover {
  background-color: var(--sky-blue);
  transition: all 0.2s ease-in-out !important;
}

/* Summary */
.detail-accordion summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 15px;
  cursor: pointer;
  list-style: none;
  border: 2px solid var(--light-blue);
  border-radius: 4px;
  font-size: 16px;
  text-transform: uppercase;
  font-weight: bold;
  color: var(--default-black);
  outline: none;
  transition: background-color 0.3s ease;
}

.detail-accordion summary::-webkit-details-marker {
  display: none;
}

.detail-accordion[open] summary {
  background-color: var(--sky-blue) !important;
}

/* Animasi Ikon */
.accordion-arrow {
  width: 16px;
  height: 16px;
  transition: transform 0.4s ease;
}

.detail-accordion[open] .accordion-arrow {
  transform: rotate(180deg);
}

/* Animasi Isi */
.accordion-content-wrapper {
  text-align: center;
  overflow: hidden;
  border-top: none;
  max-height: 0;
  opacity: 0;
  transition:
    max-height 0.5s ease,
    opacity 0.5s ease,
    padding 0.5s ease;
}

.detail-accordion[open] + .accordion-content-wrapper {
  max-height: 1000px;
  opacity: 1;
  padding: 10px 0px 5px 0px;
}

/* NAVIGATION */
/* Navigation Primary */
.pkp_navigation_primary_wrapper {
  background-color: var(--light-blue) !important;
  width: 100vw !important;
  position: relative !important;
  left: 50% !important;
  right: 50% !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  padding-left: calc(50vw - 50%) !important;
  padding-right: calc(50vw - 50%) !important;
  box-sizing: border-box !important;
  border-bottom: 8px solid var(--yellow) !important;
  text-transform: uppercase !important;
  font-weight: bold !important;
}

.pkp_navigation_primary_row {
  display: flex;
  align-items: stretch;
}

.pkp_navigation_primary > li {
  margin: 0 !important;
  padding: 0 !important;
}

/* Navigation User */
.pkp_navigation_user {
  text-transform: uppercase !important;
  font-weight: bold !important;
}

.pkp_navigation_user > li > a[href*="#"] {
  text-transform: none !important;
}

/* Navigation Hover */
.pkp_navigation_primary > li:hover > a,
.pkp_navigation_primary > li > ul > li > a:hover,
.pkp_navigation_search_wrapper:hover a,
.pkp_navigation_user > li:hover > a,
.pkp_navigation_user > li > ul > li > a:hover {
  text-decoration: none !important;
}

/* BREADCRUMBS */
.cmp_breadcrumbs span {
  color: var(--default-black) !important;
}

/* RESPONSIVE */
@media (min-width: 1023.9px) {
  /* Navigation Items */
  .pkp_navigation_primary > li > a,
  .pkp_navigation_search_wrapper > a {
    margin: 0 !important;
    padding: 9px 18px !important;
    display: flex !important;
    align-items: center !important;
  }

  .pkp_navigation_search_wrapper > a {
    gap: 6px !important;
  }

  .pkp_navigation_search_wrapper:hover,
  .pkp_navigation_primary > li:hover {
    background-color: var(--default-white) !important;
    transition: all 0.2s ease-in-out !important;
    cursor: pointer !important;
  }

  .pkp_navigation_search_wrapper:hover a,
  .pkp_navigation_primary > li:hover > a {
    color: var(--light-blue) !important;
    text-decoration: none !important;
    border-bottom-color: transparent !important;
  }

  /* Navigation User */
  .pkp_navigation_user > li:hover > a {
    background-color: var(--default-white) !important;
    transition: all 0.2s ease-in-out !important;
    color: var(--light-blue) !important;
  }

  /* Navigation Primary */
  body.pkp_page_index.pkp_op_index
    .pkp_navigation_primary
    > li:has(a[href$="/index"]),
  body.pkp_page_index.pkp_op_index
    .pkp_navigation_primary
    > li:has(a[href$="/"]),
  body.pkp_page_issue.pkp_op_view
    .pkp_navigation_primary
    > li:has(a[href*="current"]),
  body.pkp_page_issue.pkp_op_view
    .pkp_navigation_primary
    > li:has(a[href*="view"]),
  body.pkp_page_issue.pkp_op_archive
    .pkp_navigation_primary
    > li:has(a[href*="archive"]),
  body.pkp_page_announcement
    .pkp_navigation_primary
    > li:has(a[href*="announcement"]),
  body.pkp_page_about .pkp_navigation_primary > li:has(a[href*="about"]) {
    background-color: var(--default-white) !important;
    transition: all 0.2s ease-in-out !important;
    cursor: pointer !important;
  }

  body.pkp_page_index.pkp_op_index
    .pkp_navigation_primary
    > li:has(a[href$="/index"])
    > a,
  body.pkp_page_index.pkp_op_index
    .pkp_navigation_primary
    > li:has(a[href$="/"])
    > a,
  body.pkp_page_issue.pkp_op_view
    .pkp_navigation_primary
    > li:has(a[href*="current"])
    > a,
  body.pkp_page_issue.pkp_op_view
    .pkp_navigation_primary
    > li:has(a[href*="view"])
    > a,
  body.pkp_page_issue.pkp_op_archive
    .pkp_navigation_primary
    > li:has(a[href*="archive"])
    > a,
  body.pkp_page_announcement
    .pkp_navigation_primary
    > li:has(a[href*="announcement"])
    > a,
  body.pkp_page_about .pkp_navigation_primary > li:has(a[href*="about"]) > a {
    color: var(--light-blue) !important;
    text-decoration: none !important;
    border-bottom-color: transparent !important;
  }

  /* Navigation Primary Dropdown */
  .pkp_navigation_primary > li > ul {
    background-color: var(--light-blue) !important;
    border: 1px solid var(--light-blue) !important;
    padding: 0 !important;
    list-style: none;
    overflow: hidden !important;
  }

  .pkp_navigation_primary > li > ul > li > a {
    color: var(--default-white) !important;
    display: block !important;
    padding: 10px 15px !important;
    text-decoration: none !important;
    border-left: transparent !important;
  }

  .pkp_navigation_primary > li > ul > li > a:hover,
  body.pkp_page_about.pkp_op_index
    .pkp_navigation_primary
    > li
    > ul
    > li
    > a[href$="/about"],
  body.pkp_op_submissions
    .pkp_navigation_primary
    > li
    > ul
    > li
    > a[href*="submissions"],
  body.pkp_op_editorialMasthead
    .pkp_navigation_primary
    > li
    > ul
    > li
    > a[href*="editorialMasthead"],
  body.pkp_op_privacy
    .pkp_navigation_primary
    > li
    > ul
    > li
    > a[href*="privacy"],
  body.pkp_op_contact
    .pkp_navigation_primary
    > li
    > ul
    > li
    > a[href*="contact"] {
    background-color: var(--default-white) !important;
    color: var(--light-blue) !important;
    transition: all 0.2s ease-in-out !important;
  }

  /* Navigation User Dropdown */
  .pkp_navigation_user > li > ul {
    background-color: var(--default-white) !important;
    border: 1px solid var(--yellow) !important;
    padding: 0 !important;
    list-style: none;
    overflow: hidden !important;
  }

  .pkp_navigation_user > li > ul > li > a {
    color: var(--default-black) !important;
    display: block !important;
    padding: 10px 15px !important;
    text-decoration: none !important;
    border-left: transparent !important;
  }

  .pkp_navigation_user > li > ul > li > a:hover {
    background-color: var(--light-blue) !important;
    color: var(--default-white) !important;
    transition: all 0.2s ease-in-out !important;
  }
}

@media (max-width: 1023.9px) {
  /* Navigation Primary Wrapper */
  .pkp_navigation_primary_wrapper {
    width: 100% !important;
    position: static !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    left: auto !important;
    right: auto !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
    box-sizing: border-box !important;
    border-bottom: none !important;
  }

  /* Navigation User Wrapper */
  .pkp_navigation_user_wrapper {
    padding-left: 6px !important;
    padding-right: 6px !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 767.9px) {
  /* Footer Logo */
  .sejr-footer-logo {
    max-width: 60%;
  }
}