/* =========================================================================
   YAHYABYTE THEME — main.css (single file)
   Komets Press | OJS 3.5+ | yahyabyte
   ========================================================================= */

/* ===== VARIABLES & RESET ===== */
:root {
   --yb-red: #2e7d32;
   --yb-red-dark: #1b5e20;
   --yb-red-light: #81c784;
   --yb-text: #222;
   --yb-text-muted: #555;
   --yb-border: #e0e0e0;
   --yb-bg-alt: #f7f7f7;
   --yb-max: 1200px;
}

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

html,
body {
   margin: 0;
   padding: 0;
   width: 100%;
   overflow-x: hidden;
}

body {
   font-family: 'Open Sans', Arial, sans-serif;
   font-size: 14px;
   line-height: 1.6;
   color: var(--yb-text);
   background: #fff;
}

a {
   color: var(--yb-red);
   text-decoration: none;
}

a:hover {
   color: var(--yb-red-dark);
   text-decoration: underline;
}

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

p {
   margin: 0 0 1em;
}

ul,
ol {
   padding-left: 1.4em;
   margin: 0 0 1em;
}

h1,
h2,
h3,
h4,
h5,
h6 {
   font-family: 'Open Sans', Arial, sans-serif;
   line-height: 1.3;
   margin: 0 0 .6em;
   color: #1a1a1a;
}

hr {
   border: 0;
   border-top: 1px solid var(--yb-border);
   margin: 1.2em 0;
}

table {
   border-collapse: collapse;
   width: 100%;
}

/* OJS overrides */
#pkp_app,
.pkp_structure,
.pkp_structure_content,
.pkp_structure_main,
#pkp_content_main {
   max-width: 100% !important;
   width: 100% !important;
   padding: 0 !important;
   margin: 0 !important;
   float: none !important;
}

.pkp_breadcrumbs,
.cmp_breadcrumbs,
.breadcrumb,
.pkp_navigation_primary_row .cmp_breadcrumbs {
   display: none !important;
}

.pkp_screen_reader {
   position: absolute !important;
   width: 1px;
   height: 1px;
   overflow: hidden;
   clip: rect(0 0 0 0);
}

/* ===== HEADER ===== */
.eds-c-header {
   background: #fff;
   border-bottom: 1px solid var(--yb-border);
   width: 100%;
}

.eds-c-header__container {
   max-width: var(--yb-max);
   margin: 0 auto;
   padding: 25px 30px;
   display: flex;
   align-items: center;
   justify-content: space-between;
}

.eds-c-header__brand {
   flex: 1;
   display: flex;
}

.eds-c-header__brand a {
   text-decoration: none !important;
}

.eds-c-header__brand a h1 {
   font-size: 40px;
   font-weight: 700;
   color: #1a3a5c;
   margin: 0;
}

.eds-c-header__brand a:hover h1 {
   color: #1a3a5c;
}

.eds-c-header__login {
   font-size: 14px;
   color: #333;
   text-decoration: none;
   white-space: nowrap;
}

.eds-c-header__login:hover {
   color: var(--yb-red);
}

/* Mobile bar — hidden di desktop, show di mobile via @media */
.eds-c-header__mobile-bar {
   display: none;
}

.eds-c-header__nav {
   border-top: 1px solid var(--yb-border);
}

.eds-c-header__nav-container {
   max-width: var(--yb-max);
   margin: 0 auto;
   padding: 0 20px;
   display: flex;
   align-items: center;
}

.eds-c-header__item--inline-links {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
}

.eds-c-header__link {
   color: #333;
   padding: 10px 14px;
   font-size: 15px;
   font-weight: 700;
   text-decoration: none;
   display: inline-block;
   white-space: nowrap;
   border-bottom: 2px solid transparent;
   transition: color .15s;
}

.eds-c-header__link:hover {
   color: var(--yb-red);
   text-decoration: none !important;
   border-bottom: 2px solid var(--yb-red);
   padding-bottom: 8px;
}

.eds-c-header__item--divider {
   border-left: 1px solid var(--yb-border);
   margin-left: 4px;
}

.eds-c-header__dropdown {
   position: relative;
   display: inline-block;
}

.eds-c-header__dropdown-toggle::after {
   content: ' ▾';
   font-size: 10px;
   opacity: .7;
}

.eds-c-header__dropdown-menu {
   display: none;
   position: absolute;
   top: 100%;
   left: 0;
   background: #fff;
   border: 1px solid var(--yb-border);
   min-width: 200px;
   box-shadow: 0 4px 12px rgba(0, 0, 0, .1);
   z-index: 1000;
   padding: 4px 0;
}

.eds-c-header__dropdown:hover .eds-c-header__dropdown-menu {
   display: block;
}

.eds-c-header__dropdown-item {
   display: block;
   padding: 8px 16px;
   color: #333;
   font-size: 14px;
   font-weight: 400;
   text-decoration: none;
}

.eds-c-header__dropdown-item:hover {
   background: #f5f5f5;
   color: var(--yb-red);
   text-decoration: none;
}

/* ===== MASTHEAD ===== */
.app-masthead__colour-18 {
   background-color: var(--yb-red);
   width: 100%;
}

.app-masthead {
   background: transparent !important;
   padding: 28px 0 !important;
   width: 100%;
}

.app-masthead__container {
   max-width: var(--yb-max);
   margin: 0 auto;
   padding: 0 20px;
}

.app-journal-masthead {
   display: grid;
   grid-template-areas: "breadcrumbs breadcrumbs breadcrumbs" "cover info issn";
   grid-template-columns: 158px 1fr 220px;
   gap: 0 28px;
   align-items: center;
}

.app-journal-masthead__breadcrumbs {
   grid-area: breadcrumbs;
   margin-bottom: 16px;
}

.app-journal-masthead__journal-cover {
   grid-area: cover;
}

.app-journal-masthead__info {
   grid-area: info;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   min-height: 160px;
}

.app-journal-masthead__imprints-and-societies {
   grid-area: issn;
}

.c-breadcrumbs {
   list-style: none;
   padding: 0;
   margin: 0;
   display: flex;
   align-items: center;
   gap: 6px;
   font-size: 13px;
}

.c-breadcrumbs--contrast .c-breadcrumbs__item {
   color: rgba(255, 255, 255, .75);
}

.c-breadcrumbs--contrast .c-breadcrumbs__link {
   color: rgba(255, 255, 255, .85);
   text-decoration: underline;
}

.c-breadcrumbs--contrast .c-breadcrumbs__link:hover {
   color: #fff;
}

.app-journal-masthead__journal-cover a {
   display: block;
}

.app-journal-masthead__journal-cover img {
   width: 158px;
   height: auto;
   display: block;
}

.app-journal-masthead__title {
   font-size: 28px;
   font-weight: 700;
   color: #fff !important;
   margin: 0 0 14px;
   line-height: 1.25;
   text-decoration: underline;
}

.app-journal-masthead__title-link,
.app-journal-masthead__title-link:hover {
   color: #fff !important;
   text-decoration: underline !important;
}

.app-journal-masthead__publishing-model {
   margin-bottom: 20px;
}

.app-journal-masthead__publishing-model dl {
   display: flex;
   flex-direction: column;
   margin: 0;
   font-size: 14px;
   color: rgba(255, 255, 255, .9);
}

.app-journal-masthead__publishing-model dt {
   font-weight: 400;
}

.app-journal-masthead__publishing-model dd {
   margin: 0;
   font-weight: 700;
   font-size: 14px;
   color: #fff;
}

.eds-c-button,
.eds-c-button--secondary {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   background: transparent;
   border: 2px solid #fff;
   color: #fff !important;
   padding: 10px 24px;
   font-size: 14px;
   font-weight: 400;
   border-radius: 30px;
   text-decoration: none !important;
   cursor: pointer;
   white-space: nowrap;
   transition: background .15s;
}

.eds-c-button:hover,
.eds-c-button--secondary:hover {
   background: rgba(255, 255, 255, .2);
   color: #fff !important;
}

.app-journal-masthead__imprint-society-container {
   background: #fff !important;
   border-radius: 4px;
   padding: 20px 24px;
   min-width: 200px;
   text-align: center;
}

.app-journal-masthead__imprint-society-container * {
   color: #333 !important;
}

.journal-issn p {
   margin: 8px 0;
   font-size: 14px;
   color: #333 !important;
}

.app-journal-masthead__society {
   padding-top: 10px;
   border-top: 1px solid #e0e0e0;
}

.app-journal-masthead__society img {
   max-width: 130px;
   max-height: 75px;
   width: auto;
   margin: 0 auto;
   display: block;
}

/* Issue view — article separators */
.issue-article-list li {
   margin-bottom: 0 !important;
   list-style: none !important;
}

.issue-article-list .app-card-open {
   border-bottom: 1px solid rgba(168, 29, 25, 0.2) !important;
   padding: 16px 0;
}

.issue-article-list .app-card-open:last-child {
   border-bottom: none !important;
}

/* ===== LAYOUT ===== */
.app-page-layout {
   width: 100% !important;
   max-width: 100% !important;
   margin: 0 !important;
   padding: 30px 40px !important;
   display: grid !important;
   grid-template-columns: 1fr 320px !important;
   gap: 10px !important;
   box-sizing: border-box !important;
}

.app-page-layout__main {
   min-width: 0;
   width: 100%;
}

.app-page-layout__side {
   min-width: 0;
   width: 320px;
}

.app-page-layout--no-sidebar {
   width: 100% !important;
   max-width: 100% !important;
   margin: 0 !important;
   padding: 30px 40px !important;
   display: block !important;
   grid-template-columns: unset !important;
}

.app-page-layout--no-sidebar .app-page-layout__main {
   width: 100% !important;
   max-width: 100% !important;
   min-width: 0;
}

.app-page-layout__main--full {
   width: 100% !important;
   max-width: 100% !important;
}

/* ===== HOME — OVERVIEW ===== */
.steps-section {
   margin-bottom: 28px;
}

.sec-title-two {
   padding-bottom: 6px;
   margin-bottom: 14px;
}

.sec-title-two h2 {
   border-bottom: none !important;
   padding-bottom: 0 !important;
   margin: 0 !important;
   font-size: 20px !important;
}

.app-journal-overview {
   font-size: 14px;
}

.app-journal-overview table.data td {
   padding: 8px 12px;
   border-bottom: 1px solid #ddd;
   vertical-align: top;
   font-size: 14px;
}

.app-journal-overview table.data tr:last-child td {
   border-bottom: 0;
}

.app-journal-overview p {
   text-align: justify;
   margin: .8em 0;
}

/* ===== ARTICLE DETAIL ===== */
.art_author {
   font-size: 14px;
   color: #333;
   margin-bottom: 8px;
   padding: 0;
}

.art_author .list_authors {
   line-height: 1.8;
}

.art_author a {
   color: var(--yb-red);
   margin: 0 3px;
}

.affiliations.aff_detail {
   font-size: 13px;
   color: #555;
   margin-bottom: 16px;
   line-height: 1.8;
}

.main_galley {
   background: var(--yb-bg-alt);
   border: 1px solid var(--yb-border);
   border-radius: 4px;
   padding: 14px;
   margin-bottom: 20px;
   font-size: 14px;
}

.main_galley .galley-link {
   color: var(--yb-red) !important;
   font-weight: 600 !important;
   text-decoration: underline !important;
}

.main_galley .galley-link:hover {
   color: var(--yb-red-dark) !important;
}

.art_keywords {
   font-size: 14px;
   color: #444;
   margin-bottom: 16px;
}

.abs_article {
   margin-bottom: 24px;
}

.abs_article .sub_heading {
   font-size: 17px;
   font-weight: 700;
   color: #1a1a1a;
   border-bottom: 2px solid var(--yb-red);
   padding-bottom: 6px;
   margin-bottom: 12px;
}

.abs_article p {
   font-size: 14px;
   line-height: 1.9;
   color: #333;
   text-align: justify;
}

.ref_article {
   margin-top: 24px;
}

.ref_article .sub_heading {
   font-size: 17px;
   font-weight: 700;
   color: #1a1a1a;
   border-bottom: 2px solid var(--yb-red);
   padding-bottom: 6px;
   margin-bottom: 12px;
}

.ref_article p {
   font-size: 13px;
   line-height: 1.7;
   color: #444;
   margin-bottom: 8px;
   padding-bottom: 8px;
   border-bottom: 1px solid #f0f0f0;
}

.ref_article p:last-child {
   border-bottom: none;
}

.ref_article a {
   color: var(--yb-red);
   word-break: break-all;
}

/* Article masthead title */
.app-article-masthead__journal-title {
   color: #fff;
   font-size: 15px;
   margin: 0 0 8px;
}

.app-article-masthead__submission-link {
   color: #fff !important;
   font-size: 13px;
   text-decoration: none !important;
   display: inline-flex;
   align-items: center;
   gap: 6px;
}

.app-article-masthead__submission-link:hover {
   text-decoration: underline !important;
}

/* Article masthead layout */
.app-journal-masthead.app-journal-masthead--article {
   grid-template-areas: "breadcrumbs breadcrumbs" "info issn" !important;
   grid-template-columns: 1fr 220px !important;
   align-items: start !important;
}

.app-journal-masthead--article .app-journal-masthead__info h1 {
   color: #fff !important;
}

.app-journal-masthead--article .app-journal-masthead__publishing-model dt,
.app-journal-masthead--article .app-journal-masthead__publishing-model dd,
.app-journal-masthead--article .app-journal-masthead__publishing-model a {
   color: #fff !important;
}

.app-journal-masthead--article .app-journal-masthead__title {
   font-size: 35px !important;
   line-height: 1.2 !important;
}

.app-journal-masthead--article .app-journal-masthead__publishing-model dt {
   font-size: 16px !important;
   font-weight: 700 !important;
   color: #fff !important;
}

.app-journal-masthead--article .app-journal-masthead__publishing-model dd {
   font-size: 16px !important;
   color: #fff !important;
   margin-top: 4px !important;
}

.app-journal-masthead--article .app-journal-masthead__publishing-model a {
   color: #fff !important;
   font-size: 16px !important;
}

/* ===== HOME — CURRENT ISSUE ===== */
.app-reading-width,
.app-journal-latest-issue--journalPage {
   width: 100%;
}

.app-journal-latest-issue {
   display: flex;
   align-items: flex-start;
   gap: 16px;
   background: var(--yb-bg-alt);
   padding: 16px;
   margin-bottom: 24px;
}

.app-journal-latest-issue__cover {
   flex: 0 0 auto;
   margin: 0;
}

.app-journal-latest-issue__cover img {
   width: 130px;
   height: auto;
   display: block;
   border: 1px solid var(--yb-border);
   box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
}

.app-journal-latest-issue__contents {
   flex: 1 1 auto;
   min-width: 0;
   margin: 0;
   padding: 0;
}

.app-journal-latest-issue__contents>* {
   display: block;
   margin: 0 0 4px;
}

.app-journal-latest-issue__heading {
   font-size: 14px;
   color: var(--yb-text-muted);
   text-transform: uppercase;
   letter-spacing: .05em;
   margin: 0 0 4px;
   font-family: 'Open Sans', sans-serif;
   border: 0 !important;
   padding-bottom: 0 !important;
   text-decoration: none !important;
}

.app-journal-latest-issue__date {
   display: inline;
   font-size: 14px;
   color: var(--yb-text-muted);
}

.app-journal-latest-issue__volume {
   display: inline;
   font-size: 14px;
}

.app-journal-latest-issue__volume::before {
   content: ' | ';
   color: var(--yb-text-muted);
   margin: 0 4px;
}

.app-journal-latest-issue__volume a {
   color: var(--yb-red);
   font-weight: 400;
}

.app-journal-latest-issue__volume a:hover {
   text-decoration: underline;
}

.app-journal-latest-issue__info {
   margin-top: 16px;
}

.app-latest-issue-btn {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   background: transparent;
   color: var(--yb-red) !important;
   padding: 8px 22px;
   border-radius: 30px;
   font-size: 14px;
   font-weight: 600;
   text-decoration: none !important;
   border: 2px solid var(--yb-red);
   transition: all .15s;
}

.app-latest-issue-btn:hover {
   background: var(--yb-red) !important;
   color: #fff !important;
}

/* ===== HOME — ARTICLE CARDS ===== */
.u-list-reset {
   list-style: none;
   padding: 0;
   margin: 0;
}

.u-mb-16 {
   margin-bottom: 16px !important;
}

.u-mt-0 {
   margin-top: 0 !important;
}

.u-h3 {
   font-size: 20px !important;
   font-weight: 700;
   color: #1a1a1a;
   padding-bottom: 10px;
   border-bottom: 1px solid var(--yb-border);
   margin-bottom: 16px !important;
}

.app-reading-width section[data-ga="latest-articles"] {
   padding-top: 8px;
}

.app-card-open {
   border: none;
   border-bottom: 1px solid rgba(168, 29, 25, 0.2);
   padding: 16px 0;
}

.app-card-open:last-child {
   border-bottom: none;
}

.app-card-open__heading {
   font-size: 19px;
   font-weight: 700;
   margin: 0 0 6px;
   line-height: 1.35;
}

.app-card-open__heading a,
.app-card-open__heading a:visited,
.app-card-open__heading span a {
   color: #1a1a1a !important;
   text-decoration: underline !important;
}

.app-card-open__heading a:hover,
.app-card-open__heading span a:hover {
   color: var(--yb-red) !important;
   text-decoration: underline !important;
}

.app-card-open__authors {
   color: #555;
   font-size: 13px;
   margin: 2px 0 0;
   font-style: normal;
   font-weight: 400;
}

.app-card-open__authors span {
   font-style: normal;
}

.app-card-open__meta {
   margin-top: 0;
}

.c-meta {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   font-size: 13px;
   font-weight: 700;
   color: var(--yb-text-muted);
   line-height: 1.8;
}

.c-meta__item {
   display: inline-flex;
   align-items: center;
   gap: 5px;
   padding: 0 14px;
   border-right: 1px solid #d0d0d0;
}

.c-meta__item:first-child {
   padding-left: 0;
}

.c-meta__item:last-child {
   border-right: 0;
   padding-right: 0;
}

.doi_container {
   display: inline-flex;
   align-items: center;
   gap: 4px;
}

.doi_link {
   color: var(--yb-red) !important;
   font-size: 13px;
   text-decoration: none;
}

.doi_link:hover {
   text-decoration: underline;
}

.article_stat,
.galley_stat {
   color: var(--yb-text-muted);
   font-size: 13px;
   display: inline-flex;
   align-items: center;
   gap: 5px;
}

.article_stat i,
.galley_stat i {
   font-size: 12px;
   opacity: .8;
}

.galley-link,
a.galley-link,
a.galley-link.pdf {
   background: transparent !important;
   color: var(--yb-red) !important;
   padding: 0 !important;
   border: none !important;
   border-radius: 0 !important;
   font-size: 13px !important;
   font-weight: 400 !important;
   text-decoration: none !important;
   display: inline-flex !important;
   align-items: center !important;
   gap: 4px !important;
}

.galley-link:hover,
a.galley-link:hover {
   text-decoration: underline !important;
}

.gallery_item_link {
   display: inline-flex;
   align-items: center;
   gap: 4px;
}

.gallery_item_link i {
   font-size: 12px;
}

/* ===== SIDEBAR ===== */
.app-page-layout__side .pkp_block {
   border: 1px solid #e8e8e8;
   margin-bottom: 20px;
   background: #fff;
   padding: 16px;
   overflow: hidden;
}

.app-page-layout__side .pkp_block .title {
   display: none !important;
}

.app-page-layout__side .pkp_block .content {
   padding: 0 !important;
}

.app-page-layout__side .pkp_block .content h2 {
   font-size: 20px !important;
   font-weight: 700 !important;
   color: #1a1a1a !important;
   margin: 0 0 8px !important;
   padding: 0 !important;
   border-bottom: none !important;
   background: none !important;
   text-transform: none !important;
}

.app-page-layout__side .pkp_block .content ul {
   list-style: none !important;
   padding: 0 !important;
   margin: 0 !important;
}

.app-page-layout__side .pkp_block .content ul li {
   list-style: none !important;
   border-bottom: 1px solid #e8e8e8;
}

.app-page-layout__side .pkp_block .content ul li:last-child {
   border-bottom: none;
}

.app-page-layout__side .pkp_block .content ul li a {
   display: flex !important;
   align-items: center !important;
   justify-content: space-between !important;
   padding: 11px 6px !important;
   color: var(--yb-red) !important;
   font-size: 14px !important;
   text-decoration: none !important;
}

.app-page-layout__side .pkp_block .content ul li a span {
   text-decoration: underline;
}

.app-page-layout__side .pkp_block .content ul li a:hover {
   background: #f5f5f5 !important;
   color: #1a1a1a !important;
}

.app-page-layout__side .pkp_block .content ul li a:hover span {
   color: #1a1a1a;
}

.app-page-layout__side .pkp_block .content ul li a::after {
   content: '→';
   display: flex !important;
   align-items: center;
   justify-content: center;
   width: 44px;
   height: 44px;
   min-width: 44px;
   background: var(--yb-red);
   border-radius: 50%;
   color: #fff;
   font-size: 18px;
   flex-shrink: 0;
   transition: background .15s;
}

.app-page-layout__side .pkp_block .content ul li a:hover::after {
   background: #1a1a1a;
}

.app-page-layout__side .pkp_block .content ul li a::before {
   display: none !important;
   content: none !important;
}

/* ===== GENERAL CONTENT ===== */
.app-page-layout__main {
   font-size: 14px;
   line-height: 1.8;
   color: #333;
}

.app-page-layout__main h1,
.app-page-layout__main h2 {
   font-size: 22px;
   font-weight: 700;
   color: #1a1a1a;
   border-bottom: 2px solid var(--yb-red);
   padding-bottom: 8px;
   margin: 0 0 20px;
}

.app-page-layout__main h1 {
   font-size: 26px;
}

.app-page-layout__main h3 {
   font-size: 18px;
   font-weight: 700;
   color: #1a1a1a;
   margin: 20px 0 10px;
}

.app-page-layout__main h4 {
   font-size: 16px;
   font-weight: 700;
   color: #1a1a1a;
   margin: 16px 0 8px;
}

.app-page-layout__main p {
   font-size: 14px;
   line-height: 1.8;
   color: #333;
   margin: 0 0 12px;
}

.app-page-layout__main a {
   color: var(--yb-red);
   text-decoration: none;
}

.app-page-layout__main a:hover {
   color: var(--yb-red-dark);
   text-decoration: underline;
}

.app-page-layout__main ul,
.app-page-layout__main ol {
   font-size: 14px;
   line-height: 1.8;
   padding-left: 1.6em;
   margin: 0 0 14px;
}

.app-page-layout__main li {
   margin-bottom: 6px;
}

.app-page-layout__main table {
   width: 100%;
   border-collapse: collapse;
   font-size: 14px;
   margin-bottom: 16px;
}

.app-page-layout__main table td,
.app-page-layout__main table th {
   padding: 8px 10px;
   border: 1px solid #e0e0e0;
   vertical-align: top;
   line-height: 1.6;
}

.app-page-layout__main table th {
   background: #f5f5f5;
   font-weight: 700;
}

.app-page-layout__main img {
   max-width: 100%;
   height: auto;
}

.app-page-layout__main hr {
   border: 0;
   border-top: 1px solid var(--yb-border);
   margin: 20px 0;
}

.app-page-layout__main .alert {
   padding: 12px 16px;
   border-radius: 4px;
   font-size: 14px;
   margin-bottom: 16px;
}

.app-page-layout__main .alert-info {
   background: #eef4fb;
   border: 1px solid #d0e4f7;
   color: #1a3a5c;
}

.app-page-layout__main .alert-warning {
   background: #fff8e5;
   border: 1px solid #ffe082;
   color: #7a5500;
}

.app-page-layout__main .alert a {
   color: var(--yb-red);
   text-decoration: underline;
}

.list-group {
   list-style: none !important;
   padding: 0 !important;
   margin: 0 0 16px !important;
}

.list-group-item {
   padding: 10px 14px;
   border: 1px solid #e0e0e0;
   border-top: none;
   font-size: 14px;
   line-height: 1.7;
   display: flex;
   align-items: flex-start;
   gap: 10px;
   background: #fff;
}

.list-group-item:first-child {
   border-top: 1px solid #e0e0e0;
}

.glyphicon-check::before {
   content: '✓';
   color: var(--yb-red);
   font-weight: 700;
}

.lead.description {
   font-size: 14px;
   color: #555;
   margin-bottom: 14px;
}

.separator {
   border-bottom: 1px solid var(--yb-border);
   margin: 20px 0;
}

.page-header {
   border-bottom: 1px solid var(--yb-border);
   padding-bottom: 8px;
   margin: 20px 0 12px;
}

.page-header h4,
h4.page-header {
   font-size: 17px;
   font-weight: 700;
   color: #1a1a1a;
   margin: 0;
   padding: 0;
}

.app-page-layout__main input[type="text"],
.app-page-layout__main input[type="email"],
.app-page-layout__main input[type="password"],
.app-page-layout__main select,
.app-page-layout__main textarea {
   border: 1px solid #ccc;
   padding: 8px 12px;
   font-size: 14px;
   border-radius: 3px;
   width: 100%;
   max-width: 500px;
   font-family: 'Open Sans', sans-serif;
}

.app-page-layout__main input[type="text"]:focus,
.app-page-layout__main input[type="email"]:focus,
.app-page-layout__main textarea:focus {
   border-color: var(--yb-red);
   outline: none;
   box-shadow: 0 0 0 2px rgba(168, 29, 25, .1);
}

.app-page-layout__main input[type="submit"],
.app-page-layout__main button[type="submit"],
.app-page-layout__main .btn-primary {
   background: var(--yb-red);
   color: #fff;
   border: none;
   padding: 9px 22px;
   font-size: 14px;
   border-radius: 3px;
   cursor: pointer;
   font-family: 'Open Sans', sans-serif;
   transition: background .15s;
}

.app-page-layout__main input[type="submit"]:hover,
.app-page-layout__main button[type="submit"]:hover,
.app-page-layout__main .btn-primary:hover {
   background: var(--yb-red-dark);
}

.app-page-layout__main .btn-default {
   background: #f5f5f5;
   color: #333;
   border: 1px solid #ccc;
   padding: 8px 18px;
   font-size: 14px;
   border-radius: 3px;
   cursor: pointer;
}

.app-page-layout__main label {
   font-size: 14px;
   font-weight: 600;
   color: #333;
   display: block;
   margin-bottom: 4px;
}

/* ===== PAGE-SPECIFIC ===== */
/* About */
.pkp_page_about .app-page-layout__main table.grid td {
   padding: 10px 14px;
   border-bottom: 1px solid #e0e0e0;
   vertical-align: top;
   font-size: 14px;
}

.pkp_page_about .app-page-layout__main table.grid tr:last-child td {
   border-bottom: none;
}

/* Announcement */
.pkp_page_announcement .obj_announcement_summary {
   border-bottom: 1px solid #e0e0e0;
   padding: 16px 0;
}

.pkp_page_announcement .obj_announcement_summary:last-child {
   border-bottom: none;
}

.pkp_page_announcement .title {
   font-size: 17px;
   font-weight: 700;
   margin-bottom: 4px;
}

.pkp_page_announcement .title a {
   color: #1a1a1a;
}

.pkp_page_announcement .title a:hover {
   color: var(--yb-red);
   text-decoration: underline;
}

.pkp_page_announcement .date {
   font-size: 13px;
   color: var(--yb-text-muted);
   margin-bottom: 8px;
}

.pkp_page_announcement .teaser {
   font-size: 14px;
   color: #444;
   line-height: 1.7;
}

.pkp_page_announcement .read_more {
   color: var(--yb-red);
   font-size: 13px;
   font-weight: 600;
   text-decoration: none;
   display: inline-block;
   margin-top: 6px;
}

/* Search */
.pkp_page_search .search_form {
   margin-bottom: 24px;
}

.pkp_page_search .search_form .form-group {
   margin-bottom: 12px;
}

.pkp_page_search .obj_article_summary {
   border-bottom: 1px solid #e0e0e0;
   padding: 16px 0;
}

.pkp_page_search .obj_article_summary:last-child {
   border-bottom: none;
}

.pkp_page_search .obj_article_summary .title {
   font-size: 17px;
   font-weight: 700;
   margin-bottom: 6px;
}

.pkp_page_search .obj_article_summary .title a {
   color: #1a1a1a;
}

.pkp_page_search .obj_article_summary .title a:hover {
   color: var(--yb-red);
   text-decoration: underline;
}

.pkp_page_search .obj_article_summary .authors {
   font-size: 13px;
   color: #555;
   margin-bottom: 6px;
}

.pkp_page_search .obj_article_summary .abstract {
   font-size: 13.5px;
   color: #444;
   line-height: 1.7;
}

/* Login */
.pkp_page_login .app-page-layout__main,
.pkp_page_user .app-page-layout__main {
   max-width: 500px;
}

.pkp_page_login .pkp_form .fields,
.pkp_page_user .pkp_form .fields {
   margin-bottom: 16px;
}

/* Article view */
.pkp_page_article .app-page-layout__main--full {
   max-width: 860px;
   margin: 0 auto;
}

.pkp_page_article .obj_article_details .title {
   font-size: 24px;
   font-weight: 700;
   color: #1a1a1a;
   margin: 0 0 16px;
   line-height: 1.3;
}

.pkp_page_article .obj_article_details .authors {
   font-size: 14px;
   color: #555;
   margin-bottom: 12px;
}

.pkp_page_article .obj_article_details .abstract {
   font-size: 14px;
   line-height: 1.8;
   color: #333;
   border-left: 3px solid var(--yb-red);
   padding: 12px 16px;
   background: #fafafa;
   margin: 16px 0;
}

.pkp_page_article .obj_article_details .doi a {
   color: var(--yb-red);
   font-size: 13px;
}

.pkp_page_article .galleys_links a {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   background: var(--yb-red);
   color: #fff !important;
   padding: 8px 18px;
   border-radius: 3px;
   font-size: 14px;
   text-decoration: none !important;
   margin-right: 8px;
   transition: background .15s;
}

.pkp_page_article .galleys_links a:hover {
   background: var(--yb-red-dark) !important;
}

/* ===== ARCHIVE ===== */
ul.issues_archive,
ul.issues_archive li {
   list-style: none !important;
   list-style-type: none !important;
   padding-left: 0 !important;
   margin-left: 0 !important;
}

.issue-article-list li+li {
   border-top: 1px solid rgba(168, 29, 25, 0.2);
   margin-top: 0;
}

.u-list-reset li+li {
   border-top: 1px solid rgba(168, 29, 25, 0.2);
}

ul.issues_archive {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   gap: 0;
   width: 100%;
}

ul.issues_archive li {
   width: 100%;
}

.app-issue-archive-card {
   display: flex;
   flex-direction: row;
   align-items: flex-start;
   gap: 20px;
   background: #fff;
   border-bottom: 1px solid rgba(168, 29, 25, 0.15);
   padding: 20px 0;
   width: 100%;
}

.app-issue-archive-card:last-child {
   border-bottom: none;
}

.app-issue-archive-card .app-journal-latest-issue__cover {
   flex: 0 0 auto;
   margin: 0;
}

.app-issue-archive-card .app-journal-latest-issue__cover img {
   width: 115px;
   height: auto;
   display: block;
   border: 1px solid var(--yb-border);
}

.app-issue-archive-body {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   max-width: 500px;
}

.app-issue-archive-title {
   font-size: 22px;
   font-weight: 700;
   color: var(--yb-red) !important;
   text-decoration: underline !important;
   line-height: 1.3;
   margin-bottom: 6px;
   display: block;
}

.app-issue-archive-title:hover {
   color: var(--yb-red-dark) !important;
}

.app-issue-archive-card .app-journal-latest-issue__date {
   font-size: 13px;
   color: var(--yb-text-muted);
   display: block;
   margin: 0;
}

.app-archive-btn {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   background: transparent;
   color: var(--yb-red) !important;
   padding: 8px 28px;
   border: 2px solid var(--yb-red);
   border-radius: 30px;
   font-size: 13px;
   font-weight: 600;
   text-decoration: none !important;
   transition: all .15s;
   white-space: nowrap;
   margin-top: 14px;
}

.app-archive-btn:hover {
   background: var(--yb-red) !important;
   color: #fff !important;
}

.pagination {
   display: flex;
   align-items: center;
   justify-content: center;
   list-style: none;
   padding: 0;
   margin: 24px 0 0;
   gap: 4px;
}

.page-item .page-link {
   color: var(--yb-red);
   padding: 6px 14px;
   border: 1px solid var(--yb-border);
   font-size: 13px;
   text-decoration: none;
   border-radius: 3px;
   display: inline-block;
   transition: all .15s;
}

.page-item .page-link:hover {
   background: var(--yb-red);
   color: #fff !important;
   border-color: var(--yb-red);
   text-decoration: none;
}

/* ===== FOOTER ===== */
.eds-c-footer {
   background: #2a2a2a;
   color: #ddd;
   padding: 40px 0 20px;
   margin-top: 40px;
   font-size: 14px;
}

.eds-c-footer__container {
   max-width: var(--yb-max);
   margin: 0 auto;
   padding: 0 20px;
}

.eds-c-footer h3,
.eds-c-footer h4 {
   color: #fff;
   font-size: 15px;
   margin: 0 0 12px;
   padding-bottom: 6px;
   display: inline-block;
}

.eds-c-footer a {
   color: #fff;
}

.eds-c-footer a:hover {
   color: var(--yb-red-light);
}

.eds-c-footer__bottom {
   border-top: 1px solid #444;
   margin-top: 28px;
   padding-top: 14px;
   text-align: center;
   font-size: 12.5px;
   color: #aaa;
}

.eds-c-footer__cols {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
   gap: 30px;
   margin-bottom: 20px;
}

.eds-c-footer ul {
   list-style: none;
   padding: 0;
   margin: 0;
}

.eds-c-footer li {
   padding: 4px 0;
}

/* ===== GALLEY LINK BUTTONS ===== */
.obj_galley_link {
   display: inline-flex;
   align-items: center;
   gap: 5px;
   background-color: var(--yb-red);
   color: #fff !important;
   font-size: 12px;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.03em;
   padding: 5px 12px;
   border-radius: 3px;
   text-decoration: none !important;
   margin-right: 6px;
   margin-top: 4px;
   line-height: 1.4;
   transition: background-color 0.15s ease;
   white-space: nowrap;
}

.obj_galley_link:hover {
   background-color: var(--yb-red-dark) !important;
   color: #fff !important;
   text-decoration: none !important;
}

.obj_galley_link.pdf {
   background-color: var(--yb-red);
}

.obj_galley_link.html {
   background-color: #1971c2;
}

.obj_galley_link.epub {
   background-color: #2f9e44;
}

.obj_galley_link.html:hover {
   background-color: #1864ab !important;
}

.obj_galley_link.epub:hover {
   background-color: #2b8a3e !important;
}

.galleys_links {
   display: flex;
   flex-wrap: wrap;
   gap: 4px;
   margin-top: 8px;
}

/* ===== INDEX SITE — MULTI JOURNAL LISTING ===== */
.page_index_site {
   max-width: 1100px;
   margin: 0 auto;
   padding: 32px 20px 0px;
}

.site-about {
   margin-bottom: 15px;
}

.site-title {
   font-size: 22px;
   font-weight: 700;
   color: #1a1a1a;
   margin: 0 0 8px;
   padding-bottom: 10px;
   border-bottom: 2px solid var(--yb-red);
   display: block;
}

.site-description {
   font-size: 14px;
   color: #444;
   line-height: 1.8;
   border-bottom: none;
}

.site-description p {
   border-bottom: none;
   margin: 0;
}

.site-journals-heading {
   font-size: 18px;
   font-weight: 700;
   color: #1a1a1a;
   border-bottom: 2px solid var(--yb-red);
   padding-bottom: 8px;
   margin: 0 0 24px;
}

.site-journals-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 10px;
}

.site-journal-card {
   display: flex;
   gap: 16px;
   border: 1px solid #e5e5e5;
   border-radius: 4px;
   padding: 16px;
   background: #fff;
   transition: box-shadow 0.15s;
}

.site-journal-card:hover {
   box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.site-journal-thumb {
   flex-shrink: 0;
   width: 90px;
}

.site-journal-thumb img {
   width: 90px;
   height: auto;
   display: block;
   border: 1px solid #eee;
}

.site-journal-body {
   flex: 1;
   min-width: 0;
}

.site-journal-title {
   font-size: 15px;
   font-weight: 700;
   margin: 0 0 8px;
   line-height: 1.4;
}

.site-journal-title a {
   color: #1a1a1a;
   text-decoration: none;
}

.site-journal-title a:hover {
   color: var(--yb-red);
   text-decoration: underline;
}

.site-journal-desc {
   font-size: 13px;
   color: #555;
   line-height: 1.6;
   margin-bottom: 12px;
}

.site-journal-links {
   display: flex;
   gap: 8px;
   list-style: none;
   margin: 0;
   padding: 0;
}

.site-journal-links li a {
   display: inline-block;
   font-size: 12px;
   font-weight: 600;
   padding: 4px 12px;
   border-radius: 3px;
   text-decoration: none;
   transition: background 0.15s;
}

.site-journal-links li:first-child a {
   background: var(--yb-red);
   color: #fff !important;
}

.site-journal-links li:first-child a:hover {
   background: var(--yb-red-dark);
}

.site-journal-links li:last-child a {
   background: #f1f3f5;
   color: #333 !important;
   border: 1px solid #dee2e6;
}

.site-journal-links li:last-child a:hover {
   background: #e9ecef;
}

/* ===== SITE HEADER (indexSite only) ===== */
.yb-site-header {
   background: var(--yb-red);
   color: #fff;
   padding: 0;
}

.yb-site-header__inner {
   max-width: 1100px;
   margin: 0 auto;
   padding: 0 20px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   height: 56px;
}

.yb-site-logo__text {
   color: #fff;
   font-size: 18px;
   font-weight: 700;
   text-decoration: none;
}

.yb-site-logo a {
   text-decoration: none;
}

.yb-site-nav ul {
   display: flex;
   gap: 16px;
   list-style: none;
   margin: 0;
   padding: 0;
}

.yb-site-nav ul li a {
   color: #fff;
   font-size: 13px;
   text-decoration: none;
   opacity: 0.9;
}

.yb-site-nav ul li a:hover {
   opacity: 1;
   text-decoration: underline;
}

/* ===== SITE FOOTER (indexSite only) ===== */
.yb-site-footer {
   background: #1a1a1a;
   color: #aaa;
   padding: 20px 0;
   margin-top: 60px;
}

.yb-site-footer__inner {
   max-width: 1100px;
   margin: 0 auto;
   padding: 0 20px;
   display: flex;
   align-items: center;
   justify-content: space-between;
}

.yb-site-footer p {
   margin: 0;
   font-size: 13px;
}

/* ===== BREADCRUMBS (non-masthead pages) ===== */
.c-breadcrumbs__list {
   list-style: none;
   padding: 0;
   margin: 0 0 16px;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 6px;
   font-size: 13px;
   color: #555;
}

.c-breadcrumbs__item {
   display: flex;
   align-items: center;
   gap: 6px;
}

.c-breadcrumbs__item::before {
   content: "›";
   opacity: 0.5;
}

.c-breadcrumbs__item:first-child::before {
   display: none;
}

.c-breadcrumbs__link {
   color: var(--yb-red);
   text-decoration: none;
}

.c-breadcrumbs__link:hover {
   text-decoration: underline;
}

.c-breadcrumbs__item--current {
   color: #333;
   font-weight: 500;
}

/* Hide OJS default breadcrumbs — kita pakai custom di masthead */
.c-breadcrumbs__list,
.cmp_breadcrumbs,
.pkp_breadcrumbs,
nav[aria-label="breadcrumb"],
.breadcrumb {
   display: none !important;
}

/* ===== ARTICLE SIDEBAR ===== */
.sidebar-cover {
   margin-bottom: 20px;
}

.sidebar-cover__img {
   width: 100%;
   display: block;
   border: 1px solid #e0e0e0;
}

.sidebar-section {
   background: #fff;
   border: 0.5px solid #e8e8e8;
   border-top: 1px solid rgba(46, 125, 50, 0.3);
   border-left: 3px solid rgba(46, 125, 50, 0.3);
   border-radius: 0 30px 30px 0;
   padding: 12px 16px;
   margin-bottom: 10px;
   box-shadow: 0 2px 6px rgba(46, 125, 50, 0.06);
}

.sidebar-section__rule {
   display: none !important;
}

.sidebar-section__title {
   font-size: 12px;
   font-weight: 700;
   color: #888;
   text-transform: uppercase;
   letter-spacing: 0.06em;
   margin: 0 0 10px;
}

.sidebar-section__body {
   font-size: 14px;
   color: #444;
   line-height: 1.6;
}

.sidebar-link {
   color: var(--yb-red);
   text-decoration: none;
}

.sidebar-link:hover {
   text-decoration: underline;
}

.sidebar-doi__link {
   display: inline-flex;
   align-items: center;
   color: #333;
   text-decoration: none;
   font-size: 13px;
   word-break: break-all;
}

.sidebar-doi__link:hover {
   color: var(--yb-red);
}

.sidebar-copyright {
   font-size: 13px;
   color: #555;
   margin: 0 0 4px;
}

.sidebar-stats {
   display: flex;
   flex-direction: column;
   gap: 8px;
   margin-top: 4px;
}

.sidebar-stats__item {
   display: flex;
   align-items: center;
   gap: 8px;
   background: #f8f8f8;
   border: 1px solid #eee;
   border-radius: 4px;
   padding: 7px 10px;
}

.sidebar-stats__icon {
   color: var(--yb-red);
   font-size: 13px;
   width: 16px;
   text-align: center;
   flex-shrink: 0;
}

.sidebar-stats__label {
   font-size: 13px;
   color: #555;
   flex: 1;
}

.sidebar-stats__value {
   font-size: 15px;
   font-weight: 700;
   color: #1a1a1a;
}

.sidebar-section:last-child {
   border-bottom: none;
}

.app-page-layout__side .sidebar-section__rule {
   height: 3px !important;
   background-color: var(--yb-red) !important;
   margin-bottom: 8px !important;
   display: block !important;
   width: 100% !important;
   border: none !important;
}

/* ===========================================================================
   RESPONSIVE
   =========================================================================== */

/* ===== TABLET (max 900px) ===== */
@media (max-width: 900px) {

   /* Masthead */
   .app-journal-masthead {
      grid-template-areas: "breadcrumbs" "cover" "info" "issn";
      grid-template-columns: 1fr;
      gap: 16px 0;
   }

   .app-journal-masthead__journal-cover img {
      width: 120px;
   }

   .app-journal-masthead__info {
      min-height: unset;
   }

   .app-journal-masthead__imprint-society-container {
      min-width: unset;
      text-align: left;
      padding: 14px 16px;
   }

   /* Layout */
   .app-page-layout {
      grid-template-columns: 1fr !important;
      padding: 20px 20px !important;
      gap: 20px !important;
   }

   .app-page-layout__side {
      width: 100% !important;
   }

   .sidebar-section {
      border-radius: 0 16px 16px 0;
   }

   /* Current issue */
   .app-journal-latest-issue {
      flex-direction: column;
   }

   .app-journal-latest-issue__cover img {
      width: 100%;
      max-width: 160px;
   }

   /* Archive */
   .app-issue-archive-card {
      gap: 14px;
   }

   /* Site journals grid */
   .site-journals-grid {
      grid-template-columns: 1fr;
   }

   /* Footer */
   .eds-c-footer__cols {
      grid-template-columns: repeat(2, 1fr);
      gap: 20px;
   }
}

/* ===== MOBILE HEADER (max 720px) ===== */
@media (max-width: 720px) {

   /* Row 1: brand kiri, login kanan */
   .eds-c-header__container {
      display: flex !important;
      align-items: center !important;
      justify-content: space-between !important;
      padding: 12px 16px !important;
   }

   /* Tampilkan mobile bar (row 2: Menu | Search) */
   .eds-c-header__mobile-bar {
      display: flex;
      align-items: center;
      border-top: 1px solid #e8e8e8;
      padding: 0;
   }

   .eds-c-header__mob-btn {
      background: none;
      border: none;
      cursor: pointer;
      padding: 10px 16px;
      font-size: 14px;
      font-weight: 700;
      color: #333;
      display: flex;
      align-items: center;
      gap: 6px;
      text-decoration: none;
   }

   .eds-c-header__mob-btn:hover {
      color: var(--yb-red);
   }

   .eds-c-header__mob-sep {
      width: 1px;
      height: 20px;
      background: #ddd;
   }

   /* Sembunyikan desktop nav */
   .eds-c-header__item--inline-links {
      display: none !important;
   }
}

/* ===== MOBILE (max 640px) ===== */
@media (max-width: 640px) {

   /* Header brand font size */
   .eds-c-header__brand a h1 {
      font-size: 22px;
   }

   /* Masthead */
   .app-masthead {
      padding: 16px 0 !important;
   }

   .app-masthead__container {
      padding: 0 14px;
   }

   /* Reorder masthead: breadcrumbs → cover → info → issn */
   .app-journal-masthead {
      display: flex !important;
      flex-direction: column !important;
      align-items: flex-start !important;
      width: 100% !important;
   }

   .app-journal-masthead__breadcrumbs {
      order: 1 !important;
   }

   .app-journal-masthead__journal-cover {
      order: 2 !important;
      align-self: flex-start;
      margin-bottom: 10px;
   }

   .app-journal-masthead__journal-cover img {
      width: 80px !important;
      height: auto !important;
   }

   .app-journal-masthead__info {
      order: 3 !important;
      width: 100% !important;
      min-width: unset !important;
      min-height: unset !important;
      padding-right: 0 !important;
      box-sizing: border-box;
   }

   .app-journal-masthead__imprints-and-societies {
      order: 4 !important;
      width: 100% !important;
      box-sizing: border-box;
      margin-top: 12px;
   }

   .app-journal-masthead__title {
      font-size: 20px !important;
      word-break: break-word;
   }

   .app-journal-masthead__publishing-model dt,
   .app-journal-masthead__publishing-model dd {
      font-size: 13px !important;
   }

   .app-journal-masthead--article .app-journal-masthead__title {
      font-size: 20px !important;
   }

   /* Submit button full width */
   .app-journal-masthead__button a {
      display: block !important;
      width: 100% !important;
      text-align: center !important;
      box-sizing: border-box;
   }

   .eds-c-button,
   .eds-c-button--secondary {
      padding: 8px 16px;
      font-size: 13px;
   }

   /* Layout */
   .app-page-layout {
      padding: 16px 14px !important;
   }

   .app-page-layout--no-sidebar {
      padding: 16px 14px !important;
   }

   /* Article cards */
   .app-card-open__heading {
      font-size: 16px;
   }

   .c-meta {
      flex-direction: column;
      align-items: flex-start;
      gap: 4px;
   }

   .c-meta__item {
      padding: 0;
      border-right: none;
   }

   /* Sidebar */
   .sidebar-section {
      border-radius: 0 12px 12px 0;
      padding: 10px 12px;
   }

   .sidebar-stats__item {
      padding: 6px 8px;
   }

   .sidebar-cover__img {
      max-width: 200px;
   }

   .sidebar-doi__link {
      font-size: 12px;
   }

   /* Archive */
   .app-issue-archive-card {
      flex-direction: column;
   }

   .app-issue-archive-card .app-journal-latest-issue__cover img {
      width: 100%;
      max-width: 140px;
   }

   .app-issue-archive-title {
      font-size: 18px;
   }

   /* Site header */
   .yb-site-header__inner {
      padding: 0 14px;
      height: 48px;
   }

   .yb-site-logo__text {
      font-size: 15px;
   }

   .yb-site-nav ul {
      gap: 10px;
   }

   .yb-site-nav ul li a {
      font-size: 12px;
   }

   /* Site footer */
   .yb-site-footer__inner {
      flex-direction: column;
      gap: 6px;
      text-align: center;
      padding: 0 14px;
   }

   /* Footer */
   .eds-c-footer {
      padding: 24px 0 16px;
   }

   .eds-c-footer__cols {
      grid-template-columns: 1fr;
      gap: 16px;
   }

   .eds-c-footer__container {
      padding: 0 14px;
   }

   /* Index site */
   .page_index_site {
      padding: 16px 14px 0;
   }

   .site-journal-card {
      flex-direction: column;
   }

   .site-journal-thumb {
      width: 100%;
   }

   .site-journal-thumb img {
      width: 100%;
      max-width: 160px;
   }

   /* Forms */
   .app-page-layout__main input[type="text"],
   .app-page-layout__main input[type="email"],
   .app-page-layout__main input[type="password"],
   .app-page-layout__main select,
   .app-page-layout__main textarea {
      max-width: 100%;
   }

   /* Dimensions badge */
   .__dimensions_badge_embed__ {
      max-width: 100%;
      overflow: hidden;
   }

   /* Heading sizes */
   .app-page-layout__main h1 {
      font-size: 20px;
   }

   .app-page-layout__main h2 {
      font-size: 18px;
   }

   /* Login/register pages */
   div[style*="max-width:460px"],
   div[style*="max-width:640px"] {
      margin: 24px auto !important;
      padding: 0 14px 40px !important;
   }
}

@media (max-width: 640px) {

   .app-journal-masthead__society {
      padding-top: 10px !important;
      overflow: visible !important;
      text-align: center;
   }

   .app-journal-masthead__society img,
   img#logo {
      width: 120px !important;
      height: auto !important;

      transform: scale(1.5);

      transform-origin: center center;

      margin: 12px auto 8px !important;

      display: block !important;
   }
}

/* ====================================================== */
/* ARTICLE DETAIL */
/* ====================================================== */

.art_author{
    margin-bottom:10px;
    font-size:16px;
}

.affiliations{
    margin-bottom:20px;
    line-height:1.8;
}

.art_keywords{
    margin-top:20px;
    line-height:1.8;
}

.abs_article{
    margin-top:30px;
}

.ref_article{
    margin-top:35px;
}

.ref_article p{
    line-height:1.9;
    margin-bottom:15px;
}



/* ====================================================== */
/* DIMENSIONS */
/* ====================================================== */

.__dimensions_badge_embed__{
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:180px;
}

.__dimensions_Badge{
    position:relative;
    transition:all .35s ease-in-out !important;
    transform:scale(1);
    cursor:pointer;
}

.__dimensions_Badge:hover{
    transform:scale(1.08);
}

.__dimensions_Badge_Image{
    animation:dimFloat 4s ease-in-out infinite;
}

@keyframes dimFloat{

    0%{
        transform:translateY(0px);
    }

    50%{
        transform:translateY(-8px);
    }

    100%{
        transform:translateY(0px);
    }

}


/* ===== HIDE LEGEND ===== */

.__dimensions_Badge_Legend_padding{
    opacity:0 !important;
    visibility:hidden !important;
    transform:translateY(15px) scale(.95);
    transition:all .35s ease !important;
}


/* ===== SHOW ON HOVER ===== */

.__dimensions_Badge:hover
+ .__dimensions_Badge_Legend_padding{

    opacity:1 !important;
    visibility:visible !important;
    transform:translateY(0) scale(1);

}


/* ===== LEGEND STYLE ===== */

.__dimensions_Badge_Legend{
    border-radius:14px !important;
    box-shadow:0 10px 30px rgba(0,0,0,.12) !important;
    backdrop-filter:blur(10px);
    animation:fadeLegend .4s ease;
}


/* ===== LEGEND ANIMATION ===== */

@keyframes fadeLegend{

    from{
        opacity:0;
        transform:translateY(12px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}