:root {
--color-default: #1e4e79;
--color-hover: #0b2c4d;
--body-color: #899393;
--body-footer: #d3e7bd;

/*
 * BACKGROUND BODY
 */
--img-body: url("URL-BACKGROUND-OJS");

/*
 * HEADER / LOGO
 * Logo menggunakan file yang di-upload langsung melalui OJS 3.5.
 * Tidak perlu URL header di CSS.
 */
}

/* =========================================================
GENERAL
========================================================= */

a {
color: var(--color-default);
}

section.item.abstract,
.obj_article_details.page_title,
section.item.references p,
.description p {
text-align: justify;
}

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

#sidebarDevelopedBy,
#sidebarHelp,
#additionalMenu {
font-size: 1em !important;
text-transform: uppercase !important;
background: #f2f2f2;
padding: 9px 15px;
border-left: 5px solid rgb(9 52 10);
margin-bottom: 3px;
}

#additionalMenu:hover {
color: #fff;
background-color: #d3e1d6;
}

span.task_count {
background-color: #fff;
padding: 3px 7px;
border-radius: 12px;
color: var(--color-default);
}

/* =========================================================
BUTTON & GALLEY
========================================================= */

.cmp_button_wire,
.obj_galley_link {
border: 1px solid var(--color-default);
color: var(--color-default);
}

.obj_announcement_summary .read_more,
.pkp_page_index .current_issue .read_more {
color: var(--color-default);
}

/* =========================================================
INDEXATION / ALAT
========================================================= */

.img-alat {
width: 64px;
}

.content-alat {
width: 100%;
display: flex;
}

.item_index {
display: inline;
padding: 1%;
}

.indexation-list {
display: table;
}

.item_index img {
width: 14% !important;
height: auto;
border-radius: 2px;
margin-top: 1%;
padding: 0.4%;
}

/* =========================================================
SIDEBAR BLOCK
========================================================= */

.pkp_block {
margin-bottom: 10px !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}

.pkp_block .title {
margin: 0;
font-size: 17px;
min-height: 48px;
height: auto;
padding: 8px 15px;
line-height: 1.3;
display: flex;
align-items: center;
border-color: #ddd;
border-top-left-radius: 5px;
border-bottom: 1px solid #f7e7a8;
color: #fff;
background-color: var(--color-default);
background-image: linear-gradient(
349deg,
#567662 0%,
var(--color-default) 74%
);
box-shadow: 0 0 2px 1px rgb(148 139 139 / 87%);
}

.pkp_block .content {
background-color: #fff;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
padding: 15px 10px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}

/* =========================================================
MENU SIDEBAR
========================================================= */

.icon-menu::before {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: 1.1em;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
transform: translate(0, 0);
margin-right: 10px;
color: var(--color-default);
cursor: pointer;
}

.icon-menu.reviewers::before {
content: "\f183";
}

.icon-menu.editorial::before {
content: "\f0c0";
}

.icon-menu.focus::before {
content: "\f10c";
}

.icon-menu.peer::before {
content: "\f02d";
}

.icon-menu.publication::before {
content: "\f073";
}

.icon-menu.openaccess::before {
content: "\f09c";
}

.icon-menu.ethics::before {
content: "\f024";
}

.icon-menu.plagiarism::before {
content: "\f002";
}

.icon-menu.publishing::before {
content: "\f0c5";
}

.icon-menu.withdrawal::before {
content: "\f24d";
}

.icon-menu.submission::before {
content: "\f093";
}

.icon-menu.guidlines::before {
content: "\f00b";
}

.icon-menu.copyright::before {
content: "\f1f9";
}

.icon-menu.fees::before {
content: "\f0d6";
}

.icon-menu.upload::before {
content: "\f0ee";
}

.icon-menu.paper::before {
content: "\f15b";
}

a.item-menu {
display: flex;
align-items: center;
position: relative;
text-decoration: none;
padding: 6px 10px;
margin-bottom: 2px;
color: var(--color-default);
line-height: 1;
}

a.item-menu::before,
a.item-menu::after {
content: "";
position: absolute;
width: 100%;
height: 2px;
background-color: var(--color-hover);
transform: scaleX(0);
transition: transform 0.5s ease;
}

a.item-menu::before {
top: 0;
left: 0;
transform-origin: top left;
}

a.item-menu::after {
bottom: 0;
right: 0;
transform-origin: top right;
}

a.item-menu:hover::before {
transform: scaleX(1);
transform-origin: top right;
}

a.item-menu:hover::after {
transform: scaleX(1);
transform-origin: top left;
}

.label-menu {
margin: 0;
font-size: 13px;
text-transform: uppercase;
color: var(--color-default);
font-weight: 500;
cursor: pointer;
line-height: 1.2;
}

.label-menu a {
color: var(--color-default);
}

.label-menu p {
margin-bottom: 0;
}

/* =========================================================
USER NAVIGATION
========================================================= */

#navigationUserWrapper {
background-color: var(--color-default);
width: 100%;
max-width: 1170px;
margin: 0 auto;
}

.pkp_navigation_user {
display: flex;
justify-content: flex-end;
padding-right: 5%;
margin: 0;
list-style: none;
align-items: center;
min-height: 40px;
max-width: 100% !important;
}

.pkp_navigation_user li {
margin-left: 25px;
padding: 10px 0;
}

.pkp_navigation_user li a {
color: azure;
text-transform: uppercase;
font-size: 13px;
text-decoration: none;
font-weight: 500;
}

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

.pkp_navigation_user .task_count {
background-color: #fff;
color: var(--color-default);
padding: 1px 5px;
font-weight: bolder;
border-radius: 50%;
margin-left: 5px;
}

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

.pkp_footer_content {
background: #e9f9e9;
width: 71%;
}

.pkp_footer_content ul {
list-style: none;
}

.rowfooter {
display: flex;
}

/* =========================================================
LOGO / HEADER
========================================================= */

.pkp_site_name .is_text {
color: transparent;
font-size: 0;
}

.aman img {
width: 120px !important;
height: 50px !important;
box-shadow: none !important;
}

/* =========================================================
DESKTOP
========================================================= */

@media only screen and (min-width: 1200px) {
body {
    background-image: var(--img-body);
    background-blend-mode: luminosity;
    background-color: var(--body-color);
}

.index-list {
    margin-left: -59%;
}

.pkp_site_name {
    height: 334px;
    width: 99.9%;
    padding: 0 !important;
    overflow: hidden;
    background-image: none !important;
    border-left: 1px solid #ddd;
    border-top: 1px solid #ddd;
}

.pkp_site_name .is_img {
    display: block !important;
    width: 100%;
    height: 334px;
    padding: 0 !important;
    margin: 0 !important;
}

.pkp_site_name .is_img img {
    display: block !important;
    width: 100% !important;
    height: 334px !important;
    max-width: 100% !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: cover;
    object-position: center center;
}

.pkp_structure_head {
    background-color: transparent;
    border-bottom: 0;
    padding-top: 2px;
}

nav.pkp_site_nav_menu {
    background-color: transparent;
}

.pkp_navigation_primary_wrapper {
    padding-left: 0;
    padding-right: 0;
    background: var(--color-default);
}

ul#navigationPrimary {
    padding-left: 21px;
}

.pkp_structure_content.has_sidebar {
    background-color: #fff;
}

.page_index_journal {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}

.homepage_image {
    width: 28%;
    flex: 0 0 28%;
    max-width: 28%;
    margin-top: 24px !important;
    margin-left: 1px !important;
    padding-top: 3%;
    padding-right: 20px;
    box-sizing: border-box;
}

.pkp_page_index .homepage_image img {
    display: block;
    width: 100% !important;
    max-width: 275px;
    height: auto !important;
    margin-left: auto;
    margin-right: auto;
}

section.homepage_about {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    margin-left: 0;
}

.pkp_page_index .homepage_about h2 {
    display: none;
}

.pkp_brand_footer {
    padding: 2.143rem;
    background-color: #e9f9e9;
    width: 29%;
}

.pkp_structure_footer_wrapper {
    background-color: transparent;
    width: 99.9%;
}

.pkp_structure_footer {
    display: flex;
    border: 1px solid #ddd;
    border-top: 0;
    background: #e9f9e9;
}

.pkp_navigation_primary .dropdown-menu a:focus,
.pkp_navigation_primary .dropdown-menu a:hover {
    border-color: var(--color-default);
}

.pkp_nav_list ul a {
    display: block;
    padding-left: 0.357rem;
    border-left: 0.357rem solid transparent;
    color: var(--color-default);
}

}

/* =========================================================
TABLET
========================================================= */

@media only screen and (min-width: 992px) and (max-width: 1199px) {
body {
    background-image: var(--img-body);
    background-blend-mode: luminosity;
    background-color: var(--body-color);
}

.index-list {
    margin-left: -45%;
}

.pkp_site_name {
    height: 279px;
    width: 99.9%;
    padding: 0 !important;
    overflow: hidden;
    background-image: none !important;
    border-left: 1px solid #ddd;
    border-top: 1px solid #ddd;
}

.pkp_site_name .is_img {
    display: block !important;
    width: 100%;
    height: 279px;
    padding: 0 !important;
    margin: 0 !important;
}

.pkp_site_name .is_img img {
    display: block !important;
    width: 100% !important;
    height: 279px !important;
    max-width: 100% !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: cover;
    object-position: center center;
}

.pkp_structure_content.has_sidebar {
    background-color: #fff;
}

nav.pkp_site_nav_menu {
    background-color: transparent;
}

.pkp_navigation_primary_wrapper {
    padding-left: 0;
    padding-right: 0;
    background: var(--color-default);
}

ul#navigationPrimary {
    padding-left: 21px;
}

.page_index_journal {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}

.pkp_page_index .homepage_image {
    width: 28%;
    flex: 0 0 28%;
    max-width: 28%;
    margin-top: 24px !important;
    margin-left: 0 !important;
    padding-right: 20px;
    box-sizing: border-box;
}

.pkp_page_index .homepage_image img {
    display: block;
    width: 100% !important;
    max-width: 275px;
    height: auto !important;
    margin: 0 auto;
}

section.homepage_about {
    width: 72%;
    flex: 0 0 72%;
    min-width: 0;
    margin-left: 0;
    box-sizing: border-box;
}

.pkp_page_index .homepage_about h2 {
    display: none;
}

.pkp_structure_footer_wrapper {
    background: #e9f9e9;
    width: 81.9%;
    margin-left: 9.4%;
    border: 1px solid #ddd;
}

.pkp_footer_content {
    width: 68%;
}

.pkp_brand_footer {
    width: 24%;
}

.pkp_structure_footer {
    display: flex;
}

.pkp_structure_head {
    background-color: transparent;
    border-bottom: 1px solid #ddd;
    margin-top: 30px;
}

.pkp_navigation_primary .dropdown-menu a:focus,
.pkp_navigation_primary .dropdown-menu a:hover {
    border-color: var(--color-default);
}

.pkp_nav_list ul a {
    display: block;
    padding-left: 0.357rem;
    border-left: 0.357rem solid transparent;
    color: var(--color-default);
}

}

/* =========================================================
MOBILE
========================================================= */

@media only screen and (max-width: 991px) {
body {
    background-image: var(--img-body);
    background-blend-mode: luminosity;
    background-color: var(--body-color);
}

.index-list {
    margin-left: -38%;
}

.pkp_structure_content.has_sidebar {
    background-color: #fff;
}

.pkp_head_wrapper {
    background: var(--color-default);
    padding-top: 30px;
}

.pkp_structure_head {
    background-color: var(--color-default);
    border-bottom: 0;
    height: 48px;
}

/* Mobile menu */

.pkp_site_nav_toggle {
    color: #ffffff !important;
}

.pkp_site_nav_toggle span::before {
    background-color: #ffffff !important;
}

.pkp_navigation_primary > li > a {
    text-decoration: none !important;
    color: #fff !important;
}

.pkp_site_nav_menu ul ul li a {
    color: #fff !important;
    text-decoration: none !important;
}

.pkp_site_nav_menu ul ul {
    padding-left: 1.5rem;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: static !important;
    height: auto !important;
    transform: none !important;
}

#navigationUser li a {
    color: #fff !important;
    text-decoration: none !important;
}

nav.pkp_site_nav_menu.pkp_site_nav_menu--isOpen {
    height: auto;
    min-height: 200px;
    margin-top: 8px;
    background-color: var(--color-default);
    border: 1px solid var(--color-hover);
    border-radius: 0;
    width: 100%;
}

.pkp_navigation_primary > li > a:hover {
    border: 0;
}

/* Logo upload OJS 3.5 pada mobile */
.pkp_site_name {
    width: 100%;
    height: auto !important;
    min-height: 0;
    margin-top: 0 !important;
    padding: 0 !important;
    overflow: hidden;
    background-image: none !important;
}

.pkp_site_name .is_img {
    display: block !important;
    width: 100%;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
}

.pkp_site_name .is_img img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: contain;
    object-position: center center;
}

.pkp_site_name .is_text {
    color: transparent;
    font-size: 0;
}

.page_index_journal {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}

.pkp_page_index .homepage_image {
    width: 28%;
    flex: 0 0 28%;
    max-width: 28%;
    margin-top: 24px !important;
    margin-left: 0 !important;
    padding-right: 15px;
    box-sizing: border-box;
}

.pkp_page_index .homepage_image img {
    display: block;
    width: 100% !important;
    max-width: 275px;
    height: auto !important;
    margin: 0 auto;
}

section.homepage_about {
    width: 72%;
    flex: 0 0 72%;
    min-width: 0;
    margin-left: 0;
    box-sizing: border-box;
}

.pkp_page_index .homepage_about h2 {
    display: none;
}

.pkp_brand_footer {
    padding: 2.143rem;
    background-color: #e9f9e9;
    padding-left: 13%;
}

.pkp_structure_footer {
    display: flex;
    border: 1px solid #dcdcdc;
}

.pkp_structure_footer_wrapper {
    background: #e9f9e9;
    width: 73%;
    margin-left: 13.4%;
}

}

/* =========================================================
EXTRA SMALL MOBILE
Mencegah thumbnail, teks, footer, dan navigasi saling menimpa.
========================================================= */

@media only screen and (max-width: 575px) {

.page_index_journal {
    display: block;
}

.pkp_page_index .homepage_image {
    width: 100%;
    max-width: 100%;
    margin: 20px 0 0 !important;
    padding: 0;
    box-sizing: border-box;
    text-align: center;
}

.pkp_page_index .homepage_image img {
    display: block;
    width: 100% !important;
    max-width: 275px;
    height: auto !important;
    margin: 0 auto 20px;
}

section.homepage_about {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    box-sizing: border-box;
}

.content-alat,
.rowfooter,
.pkp_structure_footer {
    flex-wrap: wrap;
}

.pkp_structure_footer_wrapper {
    width: 100%;
    margin-left: 0;
    box-sizing: border-box;
}

.pkp_footer_content,
.pkp_brand_footer {
    width: 100%;
    box-sizing: border-box;
}

.pkp_navigation_user {
    flex-wrap: wrap;
    padding-right: 0;
}

.pkp_navigation_user li {
    margin-left: 0;
    margin-right: 20px;
}

}

/* =========================================================
FINAL HOMEPAGE LAYOUT FIX
Mencegah thumbnail homepage menimpa teks pada desktop,
tablet, dan viewport desktop yang lebarnya <= 991px.
Tidak mengubah warna.
========================================================= */

/* Layout utama homepage: thumbnail kiri, deskripsi kanan */
.page_index_journal {
    display: grid !important;
    grid-template-columns: minmax(0, 28%) minmax(0, 1fr);
    column-gap: 24px;
    row-gap: 0;
    align-items: start;
}

.pkp_page_index .page_index_journal > .homepage_image {
    grid-column: 1;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0;
    flex: none !important;
    margin-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box;
    overflow: hidden;
}

.pkp_page_index .page_index_journal > .homepage_image img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box;
    object-fit: contain;
}

.pkp_page_index .page_index_journal > .homepage_about {
    grid-column: 2;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0;
    margin-left: 0 !important;
    box-sizing: border-box;
    overflow-wrap: anywhere;
}

/* Elemen homepage lain seperti current issue tetap selebar area utama */
.pkp_page_index .page_index_journal > :not(.homepage_image):not(.homepage_about) {
    grid-column: 1 / -1;
    min-width: 0;
}

/* Viewport sempit yang masih sering dipakai di desktop/laptop */
@media only screen and (max-width: 991px) {
    .page_index_journal {
        grid-template-columns: minmax(0, 30%) minmax(0, 1fr);
        column-gap: 18px;
    }

    .pkp_page_index .page_index_journal > .homepage_image {
        margin-top: 24px !important;
    }
}

/* HP kecil: thumbnail di atas, teks di bawah */
@media only screen and (max-width: 575px) {
    .page_index_journal {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr);
        column-gap: 0;
        row-gap: 20px;
    }

    .pkp_page_index .page_index_journal > .homepage_image,
    .pkp_page_index .page_index_journal > .homepage_about,
    .pkp_page_index .page_index_journal > :not(.homepage_image):not(.homepage_about) {
        grid-column: 1;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
    }

    .pkp_page_index .page_index_journal > .homepage_image {
        margin-top: 20px !important;
        overflow: visible;
    }

    .pkp_page_index .page_index_journal > .homepage_image img {
        width: 100% !important;
        max-width: 275px !important;
        margin: 0 auto !important;
    }
}