/* =========================================================
   JSKM THEME
   OJS 3.4
   ========================================================= */

:root {
    --jskm-primary: #2f5daa;
    --jskm-primary-dark: #23498f;
    --jskm-primary-deep: #173f78;
    --jskm-text: #374151;
    --jskm-text-soft: #49566b;
    --jskm-muted: #667085;
    --jskm-border: #e5eaf3;
    --jskm-border-soft: #eef2f7;
    --jskm-surface: #ffffff;
    --jskm-surface-soft: #f7f9fc;
    --jskm-surface-hover: #f5f9ff;
    --jskm-radius: 8px;
    --jskm-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    --jskm-shadow-hover: 0 6px 18px rgba(47, 93, 170, 0.08);
}

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

/* =========================================================
   SIDEBAR LAYOUT
   ========================================================= */

.pkp_structure_sidebar {
    flex: 1;
    min-width: 250px;
    max-width: 300px;
}

.pkp_structure_sidebar .pkp_block {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 24px !important;
}

.pkp_structure_sidebar .pkp_block.block_custom {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
}

.pkp_structure_sidebar .pkp_block.block_custom > h2,
.pkp_structure_sidebar .pkp_block.block_custom > .title,
.pkp_structure_sidebar .pkp_block.block_custom h2.title {
    display: none !important;
}

.pkp_structure_sidebar .pkp_block.block_custom > .content,
.pkp_structure_sidebar .pkp_block.block_information {
    display: block;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid var(--jskm-border) !important;
    border-radius: var(--jskm-radius) !important;
    background: var(--jskm-surface) !important;
    box-shadow: var(--jskm-shadow) !important;
    overflow: hidden !important;
}

.jskm-sidebar-title,
.pkp_structure_sidebar .pkp_block.block_information h2.title {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 16px 20px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: var(--jskm-primary) !important;
    color: #fff !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
}

.pkp_structure_sidebar .pkp_block.block_information .content {
    padding: 0 !important;
}

.pkp_structure_sidebar .pkp_block.block_information ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.pkp_structure_sidebar .pkp_block.block_information li {
    margin: 0;
}

.pkp_structure_sidebar .pkp_block.block_information a {
    display: block;
    padding: 14px 20px;
    border-top: 1px solid var(--jskm-border-soft);
    color: var(--jskm-text-soft) !important;
    text-decoration: none;
}

.pkp_structure_sidebar .pkp_block.block_information a:hover,
.pkp_structure_sidebar .pkp_block.block_information a:focus {
    background: var(--jskm-surface-hover);
    color: var(--jskm-primary) !important;
}

/* =========================================================
   JOURNAL NAVIGATION
   ========================================================= */

.jskm-nav-section {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 0 8px !important;
    border: 0 !important;
    border-bottom: 1px solid #e7ecf3 !important;
    background: var(--jskm-surface) !important;
}

.jskm-nav-section:last-child {
    border-bottom: 0 !important;
}

.jskm-nav-section > h3 {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 13px 18px 9px !important;
    border: 0 !important;
    background: var(--jskm-surface-soft) !important;
    color: var(--jskm-primary) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.45 !important;
    letter-spacing: 0.035em !important;
    text-transform: uppercase !important;
}

.jskm-link {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.jskm-link a {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 9px 20px !important;
    border: 0 !important;
    background: var(--jskm-surface) !important;
    color: var(--jskm-text-soft) !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    text-decoration: none !important;
    overflow-wrap: anywhere !important;
}

.jskm-link a::before {
    content: none !important;
}

.jskm-link a[target="_blank"]::after {
    content: "\2197" !important;
    margin-left: 6px !important;
    color: #a8b5c8 !important;
    font-size: 10px !important;
}

.jskm-link a:hover,
.jskm-link a:focus {
    padding-left: 24px !important;
    background: var(--jskm-surface-hover) !important;
    color: var(--jskm-primary) !important;
}

/* =========================================================
   SHARED CUSTOM BLOCK COMPONENTS
   ========================================================= */

.jskm-card-content {
    width: 100% !important;
    margin: 0 !important;
    padding: 18px !important;
    border: 0 !important;
    background: var(--jskm-surface) !important;
}

.jskm-divider {
    margin: 18px 0;
    border-top: 1px solid #edf2f7;
}

.jskm-button-link {
    display: block;
    padding: 10px;
    border-radius: 6px;
    background: var(--jskm-primary);
    color: #fff !important;
    text-align: center;
    text-decoration: none;
}

.jskm-button-link:hover,
.jskm-button-link:focus {
    background: var(--jskm-primary-dark);
}

/* =========================================================
   INDEXING BLOCK
   ========================================================= */

.jskm-indexing {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    width: 100% !important;
    padding: 18px !important;
}

.jskm-indexing a {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px;
    border: 1px solid #e7edf6;
    border-radius: var(--jskm-radius);
    background: var(--jskm-surface);
}

.jskm-indexing a:hover,
.jskm-indexing a:focus {
    border-color: var(--jskm-primary);
    background: #f6faff;
    box-shadow: 0 4px 12px rgba(47, 93, 170, 0.1);
    transform: translateY(-2px);
}

.jskm-indexing img {
    width: auto;
    max-width: 170px;
    height: auto;
    max-height: 42px;
    object-fit: contain;
}

/* =========================================================
   VISITORS BLOCK
   ========================================================= */

.jskm-card-content img {
    display: block !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 auto !important;
}

.jskm-card-content > a {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
}

.jskm-visitors > a:first-child {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100% !important;
    min-height: 100px;
}

/* =========================================================
   JOURNAL SUMMARY / ABOUT
   ========================================================= */

.journal-description h1 {
    margin-bottom: 30px;
    color: #1f2937;
    font-size: 38px;
    font-weight: 700;
}

.jskm-about {
    width: 100%;
    margin-bottom: 32px;
    border-collapse: collapse;
}

.jskm-cover-cell {
    width: 240px;
    padding-right: 28px;
    vertical-align: top;
}

.jskm-cover {
    width: 100%;
    border: 1px solid var(--jskm-border);
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.jskm-description {
    vertical-align: top;
    line-height: 1.9;
    text-align: justify;
}

.jskm-section-title {
    margin-bottom: 0;
    padding: 15px 20px;
    border-radius: var(--jskm-radius) var(--jskm-radius) 0 0;
    background: var(--jskm-primary);
    color: #fff;
    font-size: 17px;
    font-weight: 700;
}

.jskm-factsheet {
    width: 100%;
    border: 1px solid var(--jskm-border);
    border-top: 0;
    border-collapse: collapse;
}

.jskm-factsheet tr {
    border-bottom: 1px solid var(--jskm-border-soft);
}

.jskm-factsheet td:first-child {
    width: 30%;
    padding: 15px 18px;
    background: #f8fafd;
    color: var(--jskm-primary);
    font-weight: 700;
}

.jskm-factsheet td:last-child {
    padding: 15px 18px;
    color: var(--jskm-text);
}

/* =========================================================
   CURRENT ISSUE
   ========================================================= */

.page_index_journal .current_issue {
    width: 100%;
    margin: 0 0 32px;
}

.page_index_journal .current_issue > .page-header {
    margin: 0 0 18px !important;
    padding: 0 0 12px !important;
    border-bottom: 1px solid var(--jskm-border) !important;
}

.page_index_journal .current_issue > .page-header h2 {
    margin: 0 !important;
    color: var(--jskm-primary-deep) !important;
    font-size: 22px !important;
    font-weight: 700 !important;
}

.page_index_journal .current_issue_title {
    margin: 0 0 18px !important;
    color: var(--jskm-text-soft) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
}

.page_index_journal .issue-toc {
    width: 100%;
    margin: 0 0 20px !important;
    border: 1px solid var(--jskm-border) !important;
    border-radius: var(--jskm-radius) !important;
    background: var(--jskm-surface) !important;
    box-shadow: var(--jskm-shadow) !important;
    overflow: hidden !important;
}

.page_index_journal .issue-toc > .heading.row {
    display: flex !important;
    align-items: flex-start !important;
    gap: 24px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 22px !important;
}

.page_index_journal .issue-toc .thumbnail.col-md-4 {
    flex: 0 0 220px !important;
    width: 220px !important;
    max-width: 220px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

.page_index_journal .issue-toc .thumbnail img {
    display: block !important;
    width: 100% !important;
    max-width: 220px !important;
    height: auto !important;
    margin: 0 !important;
    border: 1px solid var(--jskm-border) !important;
    border-radius: var(--jskm-radius) !important;
}

.page_index_journal .issue-toc .issue-details.col-md-8 {
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.page_index_journal .issue-toc .issue-details p {
    margin: 0 0 14px !important;
    color: var(--jskm-text) !important;
    font-size: 14px !important;
    line-height: 1.8 !important;
    text-align: left !important;
}

.page_index_journal .issue-toc .sections {
    width: 100% !important;
    margin: 0 !important;
    padding: 20px 22px !important;
    border-top: 1px solid var(--jskm-border) !important;
    background: #fbfcfe !important;
}

.page_index_journal .current_issue > .read-more,
.page_index_journal .current_issue a.btn.read-more {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 40px !important;
    padding: 10px 17px !important;
    border: 1px solid var(--jskm-primary) !important;
    border-radius: 6px !important;
    background: var(--jskm-primary) !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}

/* =========================================================
   ARTICLE LIST
   ========================================================= */

#main-content .obj_article_summary {
    width: 100% !important;
    margin: 0 0 18px !important;
    padding: 20px 22px !important;
    border: 1px solid var(--jskm-border) !important;
    border-radius: var(--jskm-radius) !important;
    background: var(--jskm-surface) !important;
    box-shadow: var(--jskm-shadow) !important;
}

#main-content .obj_article_summary:hover {
    border-color: #cbd6e5 !important;
    box-shadow: var(--jskm-shadow-hover) !important;
    transform: translateY(-1px);
}

#main-content .obj_article_summary > .title {
    margin: 0 0 10px !important;
    padding: 0 !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.45 !important;
}

#main-content .obj_article_summary > .title a {
    color: var(--jskm-primary-deep) !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}

#main-content .obj_article_summary .doi_container {
    display: block !important;
    margin: 0 0 6px !important;
    color: var(--jskm-text-soft) !important;
    font-size: 13px !important;
}

#main-content .obj_article_summary .meta {
    margin: 0 0 6px !important;
    color: var(--jskm-text) !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
}

#main-content .obj_article_summary .article_statistics {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px 14px !important;
    margin: 8px 0 10px !important;
    padding: 10px 12px !important;
    border-radius: 6px !important;
    background: var(--jskm-surface-soft) !important;
    color: #596579 !important;
    font-size: 12px !important;
}

#main-content .obj_article_summary .article_statistics svg {
    width: 15px !important;
    height: 15px !important;
    color: var(--jskm-primary) !important;
    stroke: currentColor !important;
}

#main-content .obj_article_summary .btn,
#main-content .obj_article_summary a.btn,
#main-content .obj_article_summary .galley-link,
#main-content .obj_article_summary [class*="btn"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 38px !important;
    padding: 9px 16px !important;
    border: 1px solid var(--jskm-primary) !important;
    border-radius: 6px !important;
    background: var(--jskm-primary) !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    box-shadow: none !important;
}

/* =========================================================
   ISSUE ARCHIVE
   ========================================================= */

#main-content .issues.media-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

#main-content .issue-summary.media {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 20px 22px !important;
    border: 1px solid var(--jskm-border) !important;
    border-radius: var(--jskm-radius) !important;
    background: var(--jskm-surface) !important;
    box-shadow: var(--jskm-shadow) !important;
}

#main-content .issue-summary h2.media-heading {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 16px !important;
    font-weight: 700 !important;
}

#main-content .issue-summary h2.media-heading a.title {
    display: inline-block;
    margin: 0 0 6px !important;
    color: var(--jskm-primary-deep) !important;
    text-decoration: none !important;
}

#main-content .issue-summary .series.lead {
    margin: 0 !important;
    color: var(--jskm-muted) !important;
    font-size: 13px !important;
}

/* =========================================================
   ISSUE ARCHIVE PAGINATION
   ========================================================= */

.page_issue_archive .cmp_pagination,
.page_issue_archive .pagination {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    margin: 28px 0 10px !important;
}

.page_issue_archive .cmp_pagination a,
.page_issue_archive .pagination a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 40px !important;
    padding: 10px 16px !important;
    border: 1px solid var(--jskm-primary) !important;
    border-radius: 999px !important;
    background: #fff !important;
    color: var(--jskm-primary) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}

.page_issue_archive .cmp_pagination a:hover,
.page_issue_archive .pagination a:hover {
    background: var(--jskm-primary) !important;
    color: #fff !important;
}

/* =========================================================
   BREADCRUMBS
   ========================================================= */

.cmp_breadcrumbs {
    margin: 0 0 24px !important;
    padding: 0 !important;
    background: transparent !important;
}

.cmp_breadcrumbs .breadcrumb {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 !important;
    padding: 14px 18px !important;
    list-style: none !important;
    border: 1px solid var(--jskm-border) !important;
    border-radius: var(--jskm-radius) !important;
    background: var(--jskm-surface-soft) !important;
    box-shadow: var(--jskm-shadow) !important;
}

.cmp_breadcrumbs .breadcrumb > li {
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
    color: var(--jskm-muted) !important;
    font-size: 14px !important;
}

.cmp_breadcrumbs .breadcrumb > li + li::before {
    content: "/" !important;
    margin: 0 6px 0 2px !important;
    color: #98a2b3 !important;
}

.cmp_breadcrumbs .breadcrumb > li a {
    color: var(--jskm-primary) !important;
    font-weight: 500 !important;
    text-decoration: none !important;
}

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

.page.page_article .article-details {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
}

.page.page_article .article-details > h1,
.page.page_article .article-details > .article-title {
    display: block !important;
    width: 100% !important;
    margin: 0 0 26px !important;
    padding: 0 0 18px !important;
    border-bottom: 1px solid var(--jskm-border) !important;
    color: var(--jskm-primary-deep) !important;
    font-size: 32px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
}

.page.page_article .article-details > .row {
    display: flex !important;
    align-items: flex-start !important;
    gap: 24px !important;
    width: 100% !important;
    margin: 0 !important;
}

.page.page_article .article-details > .row > .article-sidebar {
    flex: 0 0 31% !important;
    width: 31% !important;
    max-width: 31% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid var(--jskm-border) !important;
    border-radius: var(--jskm-radius) !important;
    background: var(--jskm-surface) !important;
    box-shadow: var(--jskm-shadow) !important;
    overflow: hidden !important;
}

.page.page_article .article-details > .row > .col-md-8 {
    flex: 1 1 0 !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.page.page_article .article-sidebar img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
}

.page.page_article .article-sidebar .item,
.page.page_article .article-sidebar > div,
.page.page_article .article-sidebar > section {
    margin: 0 !important;
    padding: 14px 16px !important;
    border-top: 1px solid var(--jskm-border) !important;
    background: var(--jskm-surface) !important;
}

.page.page_article .article-sidebar a {
    color: var(--jskm-primary) !important;
    text-decoration: none !important;
    overflow-wrap: anywhere !important;
}

.page.page_article .article-sidebar .galley-link,
.page.page_article .article-sidebar .obj_galley_link,
.page.page_article .article-sidebar a[href*="/galley/"],
.page.page_article .article-sidebar a[href*="/view/"][class*="btn"],
.page.page_article .article-sidebar .btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: calc(100% - 24px) !important;
    min-height: 40px !important;
    margin: 12px !important;
    padding: 10px 16px !important;
    border: 1px solid var(--jskm-primary) !important;
    border-radius: 6px !important;
    background: var(--jskm-primary) !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}

.page.page_article .article-main {
    width: 100% !important;
    margin: 0 0 20px !important;
    padding: 22px 24px !important;
    border: 1px solid var(--jskm-border) !important;
    border-radius: var(--jskm-radius) !important;
    background: var(--jskm-surface) !important;
    box-shadow: var(--jskm-shadow) !important;
}

.page.page_article .article-main h2,
.page.page_article .article-main h3,
.page.page_article .article-main .label {
    margin: 0 0 14px !important;
    color: var(--jskm-primary) !important;
    font-size: 18px !important;
    font-weight: 700 !important;
}

.page.page_article .article-main p {
    margin: 0 0 16px !important;
    color: var(--jskm-text) !important;
    font-size: 14px !important;
    line-height: 1.8 !important;
    text-align: left !important;
}

.page.page_article .article-more-details {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid var(--jskm-border) !important;
    border-radius: var(--jskm-radius) !important;
    background: var(--jskm-surface) !important;
    box-shadow: var(--jskm-shadow) !important;
    overflow: hidden !important;
}

.page.page_article .article-more-details > div,
.page.page_article .article-more-details > section,
.page.page_article .article-more-details .item {
    margin: 0 !important;
    padding: 14px 16px !important;
    border-bottom: 1px solid var(--jskm-border) !important;
}

/* =========================================================
   FOOTER
   ========================================================= */

.footer {
    margin-top: 40px !important;
    padding: 24px 0 !important;
    border-top: 1px solid var(--jskm-border) !important;
    background: #f8fafc !important;
}

.footer .container {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
}

.footer .container > .row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 32px !important;
    margin: 0 !important;
}

.footer .container > .row > [class*="col-"] {
    float: none !important;
    padding: 0 !important;
}

.footer .col-md-10 {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 0 !important;
}

.footer .col-md-2 {
    display: flex !important;
    flex: 0 0 150px !important;
    align-items: center !important;
    justify-content: flex-end !important;
    width: 150px !important;
    text-align: right !important;
}

.footer center {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px 12px !important;
    width: 100% !important;
    margin: 0 !important;
    text-align: left !important;
}

/* Logo indexing */

.footer .col-md-10 a {
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
    text-decoration: none !important;
}

.footer .col-md-10 img {
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 28px !important;
    margin: 0 !important;
    object-fit: contain !important;
}

/* Teks lisensi */

.footer p {
    width: 100% !important;
    margin: 12px 0 0 !important;
    color: var(--jskm-muted) !important;
    font-size: 12px !important;
    line-height: 1.6 !important;
}

.footer p img {
    display: inline-block !important;
    width: auto !important;
    max-height: 30px !important;
    margin: 0 6px 4px 0 !important;
    vertical-align: middle !important;
}

.footer p a {
    color: var(--jskm-primary) !important;
    text-decoration: none !important;
}

.footer p a:hover,
.footer p a:focus {
    color: var(--jskm-primary-deep) !important;
    text-decoration: underline !important;
}

/* Logo OJS / PKP */

.footer .col-md-2 a {
    display: block !important;
    width: 100% !important;
}

.footer .col-md-2 img {
    display: block !important;
    width: auto !important;
    max-width: 130px !important;
    height: auto !important;
    max-height: 82px !important;
    margin: 0 0 0 auto !important;
}

/* Responsive */

@media (max-width: 768px) {
    .footer {
        padding: 22px 0 !important;
    }

    .footer .container {
        padding-left: 18px !important;
        padding-right: 18px !important;
    }

    .footer .container > .row {
        display: block !important;
    }

    .footer .col-md-10,
    .footer .col-md-2 {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
    }

    .footer center {
        justify-content: center !important;
        text-align: center !important;
    }

    .footer .col-md-10 img {
        max-height: 25px !important;
    }

    .footer p {
        margin-top: 14px !important;
        text-align: center !important;
    }

    .footer .col-md-2 {
        margin-top: 18px !important;
    }

    .footer .col-md-2 img {
        max-width: 110px !important;
        max-height: 70px !important;
        margin: 0 auto !important;
    }
}

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

@media (max-width: 1200px) {
    .pkp_structure_sidebar {
        max-width: 260px;
    }
}

@media (max-width: 992px) {
    .pkp_structure_sidebar,
    .pkp_structure_sidebar .pkp_block,
    .pkp_structure_sidebar .pkp_block.block_custom,
    .pkp_structure_sidebar .pkp_block.block_custom > .content {
        width: 100% !important;
        max-width: 100% !important;
    }

    .pkp_structure_sidebar {
        margin-top: 30px;
    }

    .page.page_article .article-details > .row {
        display: block !important;
    }

    .page.page_article .article-details > .row > .article-sidebar,
    .page.page_article .article-details > .row > .col-md-8 {
        width: 100% !important;
        max-width: 100% !important;
    }

    .page.page_article .article-details > .row > .article-sidebar {
        margin-bottom: 22px !important;
    }
}

@media (max-width: 768px) {
    .journal-description h1 {
        margin-bottom: 24px !important;
        font-size: 34px !important;
        line-height: 1.15 !important;
    }

    .journal-description .jskm-about,
    .journal-description .jskm-about tbody,
    .journal-description .jskm-about tr,
    .journal-description .jskm-about td {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
    }

    .journal-description .jskm-cover-cell {
        display: block !important;
        width: 100% !important;
        margin: 0 0 24px !important;
        padding: 0 !important;
        text-align: center !important;
    }

    .journal-description .jskm-cover {
        display: block !important;
        width: auto !important;
        max-width: 220px !important;
        height: auto !important;
        margin: 0 auto !important;
    }

    .journal-description .jskm-description,
    .journal-description .jskm-description p {
        width: 100% !important;
        padding: 0 !important;
        font-size: 15px !important;
        line-height: 1.75 !important;
        text-align: left !important;
        word-spacing: normal !important;
    }

    .page_index_journal .issue-toc > .heading.row {
        display: block !important;
        padding: 18px !important;
    }

    .page_index_journal .issue-toc .thumbnail.col-md-4 {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 20px !important;
    }

    .page_index_journal .issue-toc .thumbnail img {
        width: 100% !important;
        max-width: 240px !important;
        margin: 0 auto !important;
    }

    #main-content .obj_article_summary,
    #main-content .issue-summary.media {
        padding: 16px !important;
    }

    .page_issue_archive .cmp_pagination,
    .page_issue_archive .pagination {
        flex-wrap: wrap !important;
        justify-content: center !important;
        text-align: center !important;
    }

    .page.page_article .article-details > h1,
    .page.page_article .article-details > .article-title {
        font-size: 25px !important;
        line-height: 1.35 !important;
    }

    .page.page_article .article-main {
        padding: 18px !important;
    }

    .footer .container > .row {
        display: block !important;
        text-align: center !important;
    }

    .footer .col-md-10,
    .footer .col-md-2 {
        width: 100% !important;
        text-align: center !important;
    }

    .footer center {
        text-align: center !important;
    }
}

@media (max-width: 480px) {
    .journal-description h1 {
        font-size: 30px !important;
    }

    .journal-description .jskm-cover {
        max-width: 190px !important;
    }

    .journal-description .jskm-description,
    .journal-description .jskm-description p {
        font-size: 14px !important;
        line-height: 1.7 !important;
    }
}