/* ==========================================================================
   LEADERSHIP IN MUSLIM SOCIETIES (LMS)
   COMPLETE JOURNAL STYLE SHEET

   THEME:
   Black & Gold
   Islamic Leadership / Academic / Institutional

   COLOR PALETTE:
   Black Primary   : #050505
   Black Secondary : #0b0b0b
   Black Soft      : #171717
   Gold Primary    : #c9a34b
   Gold Light      : #e4cb7a
   Gold Dark       : #a47e2c
   Ivory           : #f7f4ec
   Light Gray      : #eeeeea
   Text            : #1f1f1f
   White           : #ffffff

   BACKGROUND:
   https://ejournal.tuah.or.id/public/site/images/ade/LMS.png

   Upload:
   Website > Appearance > Advanced > Journal Style Sheet
   ========================================================================== */


/* ==========================================================================
   0. VARIABLES
   ========================================================================== */

:root {
    --lms-black: #050505;
    --lms-black-main: #0b0b0b;
    --lms-black-soft: #171717;
    --lms-black-light: #242424;

    --lms-gold: #c9a34b;
    --lms-gold-light: #e4cb7a;
    --lms-gold-dark: #a47e2c;

    --lms-ivory: #f7f4ec;
    --lms-gray: #eeeeea;

    --lms-text: #1f1f1f;
    --lms-white: #ffffff;
}


/* ==========================================================================
   1. GLOBAL BOX MODEL
   ========================================================================== */

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


/* ==========================================================================
   2. WEBSITE BACKGROUND
   ========================================================================== */

html,
body {
    margin: 0;

    background-color: #050505 !important;

    background-image:
        linear-gradient(
            rgba(0, 0, 0, 0.18),
            rgba(0, 0, 0, 0.18)
        ),
        url("https://ejournal.tuah.or.id/public/site/images/ade/LMS.png") !important;

    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;

    color: var(--lms-text);
}


/* ==========================================================================
   3. MAIN PAGE CONTAINER
   ========================================================================== */

.pkp_structure_page {
    position: relative;

    background-color: #ffffff;

    border-left: 1px solid var(--lms-gold);
    border-right: 1px solid var(--lms-gold);

    box-shadow:
        -14px 0 30px rgba(0, 0, 0, 0.45),
         14px 0 30px rgba(0, 0, 0, 0.45);

    overflow: visible;
}


/* ==========================================================================
   4. HEADER STRUCTURE
   ========================================================================== */

.pkp_structure_head {
    position: relative;

    width: 100%;

    margin: 0 !important;
    padding: 0 !important;

    background: var(--lms-black) !important;

    border-top: 2px solid var(--lms-gold) !important;
    border-bottom: 0 !important;

    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.30) !important;
}


/* ==========================================================================
   5. HEADER WRAPPER
   ========================================================================== */

.pkp_head_wrapper {
    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;

    background: var(--lms-black) !important;
}


/* ==========================================================================
   6. SITE NAME / HEADER BANNER
   ========================================================================== */

.pkp_site_name_wrapper {
    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;

    background: var(--lms-black) !important;
}


.pkp_site_name {
    display: block !important;

    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;

    background: var(--lms-black) !important;
}


.pkp_site_name .is_img {
    display: block !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
}


.pkp_site_name .is_img img {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;

    height: auto !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 0 !important;

    border: none !important;
}


/* ==========================================================================
   7. USER MENU
   ========================================================================== */

.pkp_navigation_user {
    color: var(--lms-gold-light) !important;
}


.pkp_navigation_user > li > a,
.pkp_navigation_user a {
    color: var(--lms-gold-light) !important;

    font-weight: 600 !important;

    text-decoration: none !important;
}


.pkp_navigation_user > li > a:hover,
.pkp_navigation_user a:hover {
    color: #ffffff !important;
}


/* User dropdown */

.pkp_navigation_user .dropdown-menu {
    background: var(--lms-black-main) !important;

    border: 1px solid var(--lms-gold) !important;

    border-radius: 4px !important;

    box-shadow:
        0 7px 16px rgba(0, 0, 0, 0.42) !important;
}


.pkp_navigation_user .dropdown-menu a {
    color: var(--lms-gold-light) !important;

    background: var(--lms-black-main) !important;
}


.pkp_navigation_user .dropdown-menu a:hover {
    color: var(--lms-black) !important;

    background: var(--lms-gold) !important;
}


/* ==========================================================================
   8. NAVIGATION WRAPPER
   FULL BLACK AND SYMMETRICAL
   ========================================================================== */

.pkp_navigation_primary_wrapper {
    position: relative !important;

    display: block !important;

    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;

    background:
        linear-gradient(
            180deg,
            #111111 0%,
            #050505 100%
        ) !important;

    border-top:
        1px solid rgba(201, 163, 75, 0.28) !important;

    border-bottom:
        2px solid var(--lms-gold) !important;

    border-left: none !important;
    border-right: none !important;

    box-shadow:
        0 3px 7px rgba(0, 0, 0, 0.25) !important;
}


/* ==========================================================================
   9. NAVIGATION ROW
   ========================================================================== */

.pkp_navigation_primary_row {
    display: flex !important;

    align-items: stretch !important;
    justify-content: space-between !important;

    width: 100% !important;
    max-width: none !important;

    min-height: 42px !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
}


/* ==========================================================================
   10. PRIMARY NAVIGATION
   ========================================================================== */

.pkp_navigation_primary {
    display: flex !important;

    flex: 1 1 auto !important;

    align-items: stretch !important;

    width: auto !important;
    max-width: none !important;

    margin: 0 !important;

    padding:
        0 0 0 20px !important;

    background: transparent !important;
}


.pkp_navigation_primary > li {
    display: flex !important;

    align-items: stretch !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
}


/* ==========================================================================
   11. NAVIGATION LINKS
   ========================================================================== */

.pkp_navigation_primary > li > a {
    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    height: 42px !important;

    margin: 0 !important;

    padding:
        0 15px !important;

    color: var(--lms-gold-light) !important;

    background: transparent !important;

    border: none !important;

    border-bottom:
        2px solid transparent !important;

    font-size: 12px !important;

    font-weight: 700 !important;

    line-height: 42px !important;

    text-decoration: none !important;

    transition:
        color 0.20s ease,
        background-color 0.20s ease,
        border-color 0.20s ease !important;
}


/* Hover */

.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary > li > a:focus {
    color: #ffffff !important;

    background:
        rgba(201, 163, 75, 0.09) !important;

    border-bottom-color:
        var(--lms-gold) !important;
}


/* Current menu */

.pkp_navigation_primary > li.current > a,
.pkp_navigation_primary > li.active > a {
    color: #ffffff !important;

    border-bottom-color:
        var(--lms-gold) !important;
}


/* ==========================================================================
   12. NAVIGATION DROPDOWN
   ========================================================================== */

.pkp_navigation_primary .dropdown-menu {
    margin-top: 0 !important;

    padding: 4px 0 !important;

    background: var(--lms-black-main) !important;

    border:
        1px solid var(--lms-gold) !important;

    border-radius:
        0 0 5px 5px !important;

    box-shadow:
        0 7px 16px rgba(0, 0, 0, 0.42) !important;
}


.pkp_navigation_primary .dropdown-menu li,
.pkp_navigation_primary .dropdown-menu li a {
    background: var(--lms-black-main) !important;
}


.pkp_navigation_primary .dropdown-menu a {
    display: block !important;

    padding:
        9px 14px !important;

    color: var(--lms-gold-light) !important;

    font-size: 12px !important;

    text-decoration: none !important;
}


.pkp_navigation_primary .dropdown-menu a:hover,
.pkp_navigation_primary .dropdown-menu a:focus {
    color: var(--lms-black) !important;

    background:
        var(--lms-gold) !important;
}


/* ==========================================================================
   13. SEARCH AREA
   ========================================================================== */

.pkp_navigation_search_wrapper {
    display: flex !important;

    flex: 0 0 auto !important;

    align-items: center !important;
    justify-content: center !important;

    min-width: 120px !important;

    height: 42px !important;

    margin: 0 !important;

    padding:
        0 20px !important;

    background: transparent !important;
}


.pkp_navigation_search_wrapper a {
    display: flex !important;

    align-items: center !important;

    color: var(--lms-gold-light) !important;

    font-size: 12px !important;

    font-weight: 700 !important;

    line-height: 42px !important;

    text-decoration: none !important;
}


.pkp_navigation_search_wrapper a:hover,
.pkp_navigation_search_wrapper a:focus {
    color: #ffffff !important;
}


.pkp_navigation_search_wrapper .fa,
.pkp_navigation_search_wrapper [class*="icon"] {
    color: var(--lms-gold) !important;
}


/* ==========================================================================
   14. REMOVE OJS HEADER GAPS
   ========================================================================== */

.pkp_structure_head .pkp_head_wrapper,
.pkp_structure_head .pkp_site_name_wrapper,
.pkp_structure_head .pkp_navigation_primary_wrapper,
.pkp_structure_head .pkp_navigation_primary_row {
    border-left: none !important;
    border-right: none !important;
}


.pkp_navigation_primary_wrapper::before,
.pkp_navigation_primary_wrapper::after {
    display: none !important;
}


/* ==========================================================================
   15. MAIN CONTENT / SIDEBAR
   ========================================================================== */

.pkp_structure_main {
    background-color: #ffffff;
}


.pkp_structure_sidebar {
    background-color: #ffffff;
}


/* ==========================================================================
   16. HOMEPAGE LAYOUT
   ========================================================================== */

.homepage_image {
    display: inline-block;

    width: 28%;

    margin-left: 0;

    float: right;
}


.homepage_image img {
    display: block;

    width: 300px;
    max-width: 100%;
    height: auto;

    margin:
        60px 0 0 -20px;

    border:
        1px solid var(--lms-black);

    border-bottom:
        3px solid var(--lms-gold);

    border-radius:
        5px;

    box-shadow:
        0 6px 14px rgba(0, 0, 0, 0.28),
        0 0 0 1px rgba(201, 163, 75, 0.25);
}


.homepage_about {
    display: inline-block;

    width: 70%;
}


.homepage_about p {
    text-align: justify;
}


.current_issue {
    display: block;

    clear: both;
}


/* ==========================================================================
   17. ISSUE COVER
   ========================================================================== */

.obj_issue_toc .heading .cover img,
.current_issue .cover img {
    max-height: 380px;

    width: auto;
    max-width: 100%;

    border:
        1px solid var(--lms-black);

    border-bottom:
        3px solid var(--lms-gold);

    border-radius:
        4px;

    box-shadow:
        0 5px 12px rgba(0, 0, 0, 0.28),
        0 0 0 1px rgba(201, 163, 75, 0.22);
}


/* ==========================================================================
   18. ARTICLE LIST RESET
   ========================================================================== */

.obj_issue_toc .cmp_article_list > li,
.obj_issue_toc .articles > li,
.cmp_article_list > li {
    list-style: none !important;

    border: none !important;

    padding: 0 !important;

    margin:
        0 0 18px 0 !important;
}


.obj_issue_toc .cmp_article_list,
.cmp_article_list {
    margin: 0 !important;

    padding: 0 !important;

    list-style:
        none !important;
}


/* ==========================================================================
   19. ARTICLE CARD
   ========================================================================== */

.obj_article_summary {
    position: relative;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #ffffff 72%,
            #f8f6f0 100%
        );

    border:
        1px solid var(--lms-black);

    border-bottom:
        2px solid var(--lms-gold);

    border-radius:
        10px;

    padding:
        18px 22px;

    box-shadow:
        0 3px 8px rgba(0, 0, 0, 0.16),
        0 0 0 1px rgba(201, 163, 75, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        border-color 0.2s ease;
}


/* Gold top accent */

.obj_article_summary::before {
    content: "";

    position: absolute;

    top: 0;
    left: 18px;
    right: 18px;

    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            var(--lms-gold) 20%,
            var(--lms-gold-light) 50%,
            var(--lms-gold) 80%,
            transparent 100%
        );

    border-radius:
        0 0 3px 3px;
}


/* Card hover */

.obj_article_summary:hover {
    border-color:
        var(--lms-black);

    transform:
        translateY(-2px);

    box-shadow:
        0 8px 18px rgba(0, 0, 0, 0.24),
        0 0 0 1px rgba(201, 163, 75, 0.35);
}


/* ==========================================================================
   20. ARTICLE TITLE
   ========================================================================== */

.obj_article_summary .title,
.obj_article_summary h3.title,
.obj_article_summary h4.title {
    text-transform:
        none;

    letter-spacing:
        normal;

    line-height:
        1.45;

    margin:
        0 0 10px 0;

    padding:
        0;
}


.obj_issue_toc .articles .title a,
.obj_issue_toc .section .title a,
.obj_article_summary .title a,
.obj_article_summary h3.title a,
.obj_article_summary h4.title a {
    color:
        var(--lms-black) !important;

    font-weight:
        700;

    text-decoration:
        none;
}


.obj_issue_toc .articles .title a:hover,
.obj_issue_toc .section .title a:hover,
.obj_article_summary .title a:hover,
.obj_article_summary h3.title a:hover,
.obj_article_summary h4.title a:hover {
    color:
        var(--lms-gold-dark) !important;

    text-decoration:
        underline;

    text-decoration-color:
        var(--lms-gold);

    text-decoration-thickness:
        2px;

    text-underline-offset:
        3px;
}


/* ==========================================================================
   21. AUTHORS AND META
   ========================================================================== */

.obj_article_summary .meta {
    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        16px;

    margin:
        0 0 12px 0;

    padding:
        0;

    font-size:
        0.92rem;

    color:
        var(--lms-text);
}


.obj_article_summary .meta .authors,
.obj_article_summary .authors,
.obj_article_summary .authors .consent {
    flex:
        1 1 auto;

    min-width:
        0;

    color:
        var(--lms-text) !important;

    margin:
        0;

    padding:
        0;
}


/* Author links remain black */

.obj_article_summary .authors a,
.obj_article_summary .authors .consent a,
.obj_article_summary .meta .authors a {
    color:
        var(--lms-text) !important;

    text-decoration:
        none;
}


.obj_article_summary .authors a:hover,
.obj_article_summary .authors .consent a:hover,
.obj_article_summary .meta .authors a:hover {
    color:
        var(--lms-text) !important;

    text-decoration:
        underline;

    text-decoration-color:
        var(--lms-gold);
}


.obj_article_summary .authors b,
.obj_article_summary .authors strong,
.obj_article_summary .authors .consent b,
.obj_article_summary .authors .consent strong {
    color:
        var(--lms-text) !important;

    font-weight:
        700;
}


/* Pages */

.obj_article_summary .meta .pages {
    flex:
        0 0 auto;

    color:
        var(--lms-text) !important;

    white-space:
        nowrap;

    margin:
        0;

    padding:
        0;
}


.obj_article_summary .meta .published {
    color:
        var(--lms-text) !important;
}


/* ==========================================================================
   22. ARTICLE STATISTICS
   ========================================================================== */

.obj_article_summary .article_statistic {
    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    gap:
        16px;

    margin-top:
        10px;

    padding-top:
        9px;

    border-top:
        1px solid rgba(201, 163, 75, 0.48);
}


.obj_article_summary .article_statistic .stats {
    order:
        1;

    flex:
        1 1 auto;

    min-width:
        0;

    font-size:
        12.5px;

    color:
        var(--lms-text);

    line-height:
        1.8;
}


.obj_article_summary .article_statistic .galley_list {
    order:
        2;

    flex:
        0 0 auto;
}


/* DOI */

.obj_article_summary .stats .doi_link {
    color:
        var(--lms-black);

    text-decoration:
        none;

    margin-right:
        10px;
}


.obj_article_summary .stats .doi_link:hover {
    color:
        var(--lms-gold-dark);

    text-decoration:
        underline;

    text-decoration-color:
        var(--lms-gold);
}


/* Statistics */

.obj_article_summary .stats .article_stat,
.obj_article_summary .stats .galley_stat {
    margin-right:
        10px;

    white-space:
        nowrap;

    color:
        var(--lms-text);
}


/* Statistics icons */

.obj_article_summary .stats .fa {
    color:
        var(--lms-gold);

    margin-right:
        3px;
}


/* ==========================================================================
   23. PDF BUTTONS
   ========================================================================== */

.obj_article_summary .galleys_links {
    margin:
        0 !important;

    padding:
        0 !important;

    list-style:
        none !important;
}


.obj_article_summary .galleys_links > li {
    display:
        inline-block;

    margin:
        0 8px 0 0 !important;

    padding:
        0 !important;

    border:
        none !important;
}


/* PDF normal */

.obj_article_summary .galleys_links .obj_galley_link,
.obj_article_summary .galleys_links .obj_galley_link:link,
.obj_article_summary .galleys_links .obj_galley_link:visited {
    display:
        inline-block;

    background:
        linear-gradient(
            180deg,
            #171717 0%,
            #080808 100%
        );

    border:
        1px solid var(--lms-black);

    border-bottom:
        2px solid var(--lms-gold);

    border-radius:
        6px;

    color:
        var(--lms-gold-light) !important;

    -webkit-text-fill-color:
        var(--lms-gold-light) !important;

    padding:
        5px 14px;

    font-size:
        0.85rem;

    font-weight:
        700;

    text-decoration:
        none !important;

    white-space:
        nowrap;

    box-shadow:
        0 2px 5px rgba(0, 0, 0, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);

    transition:
        background 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}


/* PDF hover */

.obj_article_summary .galleys_links .obj_galley_link:hover,
.obj_article_summary .galleys_links .obj_galley_link:focus,
.obj_article_summary .galleys_links .obj_galley_link:active {
    background:
        var(--lms-gold) !important;

    background-image:
        none !important;

    border-color:
        var(--lms-gold-dark) !important;

    color:
        var(--lms-black) !important;

    -webkit-text-fill-color:
        var(--lms-black) !important;

    transform:
        translateY(-1px);

    box-shadow:
        0 4px 9px rgba(0, 0, 0, 0.30);

    outline:
        none;
}


.obj_article_summary .galleys_links .obj_galley_link:hover *,
.obj_article_summary .galleys_links .obj_galley_link:focus *,
.obj_article_summary .galleys_links .obj_galley_link:active * {
    color:
        var(--lms-black) !important;

    -webkit-text-fill-color:
        var(--lms-black) !important;
}


/* ==========================================================================
   24. ARTICLES SECTION TITLE
   ========================================================================== */

.obj_issue_toc .section > h2 {
    font-size:
        1.1rem;

    color:
        var(--lms-gold-light);

    margin:
        25px 0 15px 0;

    padding:
        8px 12px;

    border-left:
        4px solid var(--lms-gold);

    border-bottom:
        2px solid var(--lms-gold);

    background:
        linear-gradient(
            90deg,
            #0b0b0b 0%,
            #171717 68%,
            rgba(23, 23, 23, 0) 100%
        );

    border-radius:
        3px 0 0 3px;
}


/* ==========================================================================
   25. CONTENT BOLD TEXT
   ========================================================================== */

.pkp_structure_main strong,
.pkp_structure_main b {
    color:
        inherit;
}


/* ==========================================================================
   26. CONTENT LINKS
   ========================================================================== */

.pkp_structure_main a {
    color:
        var(--lms-black);
}


.pkp_structure_main a:hover {
    color:
        var(--lms-gold-dark);
}


/* Author must stay black */

.pkp_structure_main .obj_article_summary .authors a,
.pkp_structure_main .obj_article_summary .meta .authors a {
    color:
        var(--lms-text) !important;
}


/* ==========================================================================
   27. FOCUS
   ========================================================================== */

.pkp_structure_main a:focus,
.obj_article_summary .galleys_links .obj_galley_link:focus {
    outline:
        2px solid var(--lms-gold);

    outline-offset:
        2px;
}


/* ==========================================================================
   28. TEXT SELECTION
   ========================================================================== */

::selection {
    background-color:
        var(--lms-gold);

    color:
        var(--lms-black);
}


::-moz-selection {
    background-color:
        var(--lms-gold);

    color:
        var(--lms-black);
}


/* ==========================================================================
   29. FOOTER WRAPPER
   FULL BLACK + STRAIGHT GOLD BORDER
   ========================================================================== */

.pkp_structure_footer_wrapper {
    width:
        100% !important;

    margin:
        0 !important;

    padding:
        0 !important;

    background:
        linear-gradient(
            180deg,
            #101010 0%,
            #050505 100%
        ) !important;

    border-top:
        2px solid var(--lms-gold) !important;

    border-left:
        none !important;

    border-right:
        none !important;

    border-bottom:
        1px solid rgba(201, 163, 75, 0.45) !important;

    box-shadow:
        0 -4px 12px rgba(0, 0, 0, 0.28) !important;

    color:
        var(--lms-gray) !important;
}


/* ==========================================================================
   30. FOOTER INNER
   ========================================================================== */

.pkp_structure_footer {
    display:
        flex !important;

    align-items:
        flex-start !important;

    justify-content:
        space-between !important;

    gap:
        35px !important;

    width:
        100% !important;

    max-width:
        none !important;

    margin:
        0 !important;

    padding:
        28px 26px !important;

    background:
        transparent !important;

    color:
        var(--lms-gray) !important;
}


/* ==========================================================================
   31. FOOTER CONTENT
   ========================================================================== */

.pkp_footer_content {
    flex:
        1 1 auto !important;

    min-width:
        0 !important;

    margin:
        0 !important;

    padding:
        0 !important;

    color:
        var(--lms-gray) !important;

    font-size:
        13px !important;

    line-height:
        1.65 !important;
}


.pkp_footer_content p,
.pkp_footer_content div,
.pkp_footer_content span,
.pkp_footer_content address,
.pkp_structure_footer p,
.pkp_structure_footer div,
.pkp_structure_footer span,
.pkp_structure_footer address {
    color:
        var(--lms-gray) !important;

    line-height:
        1.65 !important;
}


/* Footer bold */

.pkp_footer_content strong,
.pkp_footer_content b,
.pkp_structure_footer strong,
.pkp_structure_footer b {
    color:
        var(--lms-gold-light) !important;
}


/* Footer links */

.pkp_footer_content a,
.pkp_structure_footer a {
    color:
        var(--lms-gold-light) !important;

    text-decoration:
        none !important;
}


.pkp_footer_content a:hover,
.pkp_structure_footer a:hover {
    color:
        #ffffff !important;

    text-decoration:
        underline !important;

    text-decoration-color:
        var(--lms-gold) !important;

    text-underline-offset:
        2px;
}


/* ==========================================================================
   32. CREATIVE COMMONS IMAGE
   ========================================================================== */

.pkp_footer_content img,
.pkp_structure_footer img {
    max-width:
        100% !important;

    height:
        auto !important;
}


/* ==========================================================================
   33. PKP BRAND FOOTER
   ========================================================================== */

.pkp_brand_footer {
    flex:
        0 0 180px !important;

    margin:
        0 !important;

    padding:
        0 !important;

    background:
        transparent !important;

    color:
        var(--lms-gold) !important;

    opacity:
        1 !important;
}


.pkp_brand_footer a {
    color:
        var(--lms-gold) !important;

    border:
        none !important;
}


.pkp_brand_footer img {
    max-width:
        150px !important;

    height:
        auto !important;

    opacity:
        0.78 !important;

    filter:
        grayscale(1)
        brightness(2)
        sepia(0.25) !important;
}


/* ==========================================================================
   34. TABLET
   ========================================================================== */

@media (max-width: 991px) {

    .homepage_about {
        margin-top:
            30px;
    }


    .pkp_navigation_primary {
        padding-left:
            8px !important;
    }


    .pkp_navigation_primary > li > a {
        padding:
            0 10px !important;
    }


    .pkp_navigation_search_wrapper {
        padding:
            0 12px !important;
    }


    .pkp_structure_footer {
        padding:
            25px 20px !important;
    }

}


/* ==========================================================================
   35. MOBILE
   ========================================================================== */

@media (max-width: 600px) {

    html,
    body {
        background-image:
            linear-gradient(
                rgba(0, 0, 0, 0.25),
                rgba(0, 0, 0, 0.25)
            ),
            url("https://ejournal.tuah.or.id/public/site/images/ade/LMS.png") !important;

        background-size:
            cover !important;

        background-position:
            center top !important;

        background-repeat:
            no-repeat !important;

        background-attachment:
            scroll !important;
    }


    .pkp_structure_page {
        border-left:
            none;

        border-right:
            none;

        box-shadow:
            none;
    }


    .pkp_navigation_primary_row {
        display:
            block !important;

        height:
            auto !important;
    }


    .pkp_navigation_primary {
        display:
            block !important;

        width:
            100% !important;

        padding:
            0 !important;
    }


    .pkp_navigation_primary > li {
        display:
            block !important;

        width:
            100% !important;
    }


    .pkp_navigation_primary > li > a {
        justify-content:
            flex-start !important;

        width:
            100% !important;

        height:
            42px !important;

        padding:
            0 15px !important;

        border-bottom:
            1px solid rgba(201, 163, 75, 0.20) !important;
    }


    .pkp_navigation_search_wrapper {
        width:
            100% !important;

        justify-content:
            flex-start !important;

        padding:
            0 15px !important;

        border-top:
            1px solid rgba(201, 163, 75, 0.25) !important;
    }


    .pkp_structure_main,
    .pkp_structure_sidebar {
        background-color:
            #ffffff;
    }


    .homepage_image,
    .homepage_about {
        width:
            100%;

        float:
            none;

        display:
            block;
    }


    .homepage_image img {
        margin:
            20px auto 0 auto;

        display:
            block;
    }


    .obj_article_summary {
        padding:
            15px 16px;
    }


    .obj_article_summary::before {
        left:
            14px;

        right:
            14px;
    }


    .obj_article_summary .meta,
    .obj_article_summary .article_statistic {
        display:
            block;
    }


    .obj_article_summary .meta .pages {
        display:
            block;

        margin-top:
            4px !important;
    }


    .obj_article_summary .article_statistic .galley_list {
        margin-top:
            8px;
    }


    .pkp_structure_footer {
        display:
            block !important;

        padding:
            22px 18px !important;
    }


    .pkp_brand_footer {
        width:
            100% !important;

        margin-top:
            22px !important;

        text-align:
            left !important;
    }

}
/* ==========================================================================
   LMS — COMPACT & SYMMETRICAL NAVIGATION
   HOME–ABOUT sejajar dengan SEARCH
   ========================================================================== */


/* Wrapper navigation */
.pkp_navigation_primary_wrapper {
    position: relative !important;

    width: 100% !important;
    max-width: none !important;

    height: 38px !important;
    min-height: 38px !important;

    margin: 0 !important;
    padding: 0 !important;

    background:
        linear-gradient(
            180deg,
            #111111 0%,
            #070707 100%
        ) !important;

    border-top:
        1px solid rgba(201, 163, 75, 0.30) !important;

    border-bottom:
        2px solid #c9a34b !important;

    overflow: visible !important;

    box-shadow:
        0 2px 5px rgba(0, 0, 0, 0.22) !important;
}


/* Baris utama */
.pkp_navigation_primary_row {
    display: flex !important;

    align-items: center !important;
    justify-content: space-between !important;

    width: 100% !important;
    max-width: none !important;

    height: 36px !important;
    min-height: 36px !important;

    margin: 0 !important;
    padding: 0 16px !important;

    background: transparent !important;
}


/* ==========================================================================
   MENU HOME, CURRENT, ARCHIVES, CONTACT, ABOUT
   ========================================================================== */

.pkp_navigation_primary {
    display: flex !important;

    flex: 0 1 auto !important;

    align-items: center !important;

    width: auto !important;

    height: 36px !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
}


.pkp_navigation_primary > li {
    display: flex !important;

    align-items: center !important;

    height: 36px !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* Link menu */
.pkp_navigation_primary > li > a {
    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    height: 36px !important;

    margin: 0 !important;

    padding: 0 14px !important;

    color: #e4cb7a !important;

    background: transparent !important;

    border: none !important;
    border-bottom: 2px solid transparent !important;

    font-size: 12px !important;
    font-weight: 700 !important;

    line-height: 36px !important;

    text-decoration: none !important;

    white-space: nowrap !important;
}


/* Hover */
.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary > li > a:focus {
    color: #ffffff !important;

    background:
        rgba(201, 163, 75, 0.08) !important;

    border-bottom-color:
        #c9a34b !important;
}


/* ==========================================================================
   SEARCH — SEJAJAR DENGAN MENU
   ========================================================================== */

.pkp_navigation_search_wrapper {
    position: static !important;

    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    display: flex !important;

    flex: 0 0 auto !important;

    align-items: center !important;
    justify-content: flex-end !important;

    width: auto !important;
    min-width: 90px !important;

    height: 36px !important;

    margin: 0 0 0 auto !important;

    padding: 0 !important;

    background: transparent !important;

    transform: none !important;
}


/* Link Search */
.pkp_navigation_search_wrapper a {
    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    height: 36px !important;

    margin: 0 !important;

    padding: 0 8px !important;

    color: #e4cb7a !important;

    font-size: 12px !important;
    font-weight: 700 !important;

    line-height: 36px !important;

    text-decoration: none !important;

    white-space: nowrap !important;
}


/* Hover Search */
.pkp_navigation_search_wrapper a:hover,
.pkp_navigation_search_wrapper a:focus {
    color: #ffffff !important;
}


/* Ikon Search */
.pkp_navigation_search_wrapper .fa,
.pkp_navigation_search_wrapper [class*="icon"] {
    color: #c9a34b !important;

    margin-right: 3px !important;
}


/* ==========================================================================
   DROPDOWN ABOUT
   ========================================================================== */

.pkp_navigation_primary .dropdown-menu {
    top: 36px !important;

    margin: 0 !important;

    padding: 4px 0 !important;

    background: #0b0b0b !important;

    border: 1px solid #c9a34b !important;

    border-radius: 0 0 5px 5px !important;

    box-shadow:
        0 7px 15px rgba(0, 0, 0, 0.40) !important;
}


.pkp_navigation_primary .dropdown-menu a {
    display: block !important;

    height: auto !important;

    padding: 8px 14px !important;

    color: #e4cb7a !important;

    background: #0b0b0b !important;

    line-height: 1.4 !important;
}


.pkp_navigation_primary .dropdown-menu a:hover {
    color: #050505 !important;

    background: #c9a34b !important;
}


/* ==========================================================================
   HILANGKAN CELAH / HEIGHT BAWAAN OJS
   ========================================================================== */

.pkp_structure_head .pkp_navigation_primary_wrapper,
.pkp_structure_head .pkp_navigation_primary_row,
.pkp_structure_head .pkp_navigation_primary,
.pkp_structure_head .pkp_navigation_search_wrapper {
    min-height: 0 !important;
}


.pkp_navigation_primary_wrapper::before,
.pkp_navigation_primary_wrapper::after {
    display: none !important;
}
/* ==========================================================================
   FIX SEARCH LMS
   SEARCH muncul kembali dan sejajar dengan HOME - ABOUT
   ========================================================================== */


/* Navigation sebagai titik acuan */
.pkp_navigation_primary_wrapper {
    position: relative !important;

    width: 100% !important;

    height: 38px !important;
    min-height: 38px !important;

    margin: 0 !important;
    padding: 0 !important;

    background:
        linear-gradient(
            180deg,
            #111111 0%,
            #070707 100%
        ) !important;

    border-bottom: 2px solid #c9a34b !important;

    overflow: visible !important;
}


/* Row */
.pkp_navigation_primary_row {
    display: block !important;

    position: relative !important;

    width: 100% !important;

    height: 36px !important;
    min-height: 36px !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
}


/* Menu kiri */
.pkp_navigation_primary {
    display: flex !important;

    align-items: center !important;

    width: auto !important;

    height: 36px !important;

    margin: 0 !important;

    /* ruang kiri dan ruang untuk Search di kanan */
    padding: 0 130px 0 16px !important;

    background: transparent !important;
}


/* Item menu */
.pkp_navigation_primary > li {
    display: flex !important;

    align-items: center !important;

    height: 36px !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* HOME, CURRENT, ARCHIVES, CONTACT, ABOUT */
.pkp_navigation_primary > li > a {
    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    height: 36px !important;

    margin: 0 !important;

    padding: 0 14px !important;

    color: #e4cb7a !important;

    background: transparent !important;

    border: none !important;

    font-size: 12px !important;
    font-weight: 700 !important;

    line-height: 36px !important;

    text-decoration: none !important;

    white-space: nowrap !important;
}


/* Hover menu */
.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary > li > a:focus {
    color: #ffffff !important;

    background:
        rgba(201, 163, 75, 0.08) !important;
}


/* ==========================================================================
   SEARCH
   ========================================================================== */

.pkp_navigation_search_wrapper {
    display: flex !important;

    position: absolute !important;

    top: 0 !important;
    right: 16px !important;

    bottom: auto !important;
    left: auto !important;

    z-index: 50 !important;

    align-items: center !important;
    justify-content: center !important;

    width: auto !important;
    min-width: 95px !important;

    height: 36px !important;
    min-height: 36px !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;

    visibility: visible !important;
    opacity: 1 !important;

    transform: none !important;
}


/* Link Search */
.pkp_navigation_search_wrapper a {
    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    height: 36px !important;

    margin: 0 !important;

    padding: 0 8px !important;

    color: #e4cb7a !important;

    background: transparent !important;

    font-size: 12px !important;
    font-weight: 700 !important;

    line-height: 36px !important;

    text-decoration: none !important;

    white-space: nowrap !important;

    visibility: visible !important;
    opacity: 1 !important;
}


/* Hover Search */
.pkp_navigation_search_wrapper a:hover,
.pkp_navigation_search_wrapper a:focus {
    color: #ffffff !important;
}


/* Ikon Search */
.pkp_navigation_search_wrapper .fa,
.pkp_navigation_search_wrapper [class*="icon"] {
    color: #c9a34b !important;

    margin-right: 3px !important;

    visibility: visible !important;
}


/* ==========================================================================
   ABOUT DROPDOWN
   ========================================================================== */

.pkp_navigation_primary .dropdown-menu {
    top: 36px !important;

    z-index: 100 !important;

    background: #0b0b0b !important;

    border: 1px solid #c9a34b !important;
}


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

@media (max-width: 991px) {

    .pkp_navigation_primary {
        padding-right: 110px !important;
    }

    .pkp_navigation_primary > li > a {
        padding: 0 10px !important;
    }

    .pkp_navigation_search_wrapper {
        right: 10px !important;
    }

}


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

@media (max-width: 600px) {

    .pkp_navigation_primary_wrapper {
        height: auto !important;

        min-height: 0 !important;
    }


    .pkp_navigation_primary_row {
        height: auto !important;

        min-height: 0 !important;
    }


    .pkp_navigation_primary {
        display: block !important;

        width: 100% !important;

        height: auto !important;

        padding: 0 !important;
    }


    .pkp_navigation_primary > li {
        display: block !important;

        width: 100% !important;

        height: auto !important;
    }


    .pkp_navigation_primary > li > a {
        justify-content: flex-start !important;

        width: 100% !important;

        height: 40px !important;

        padding: 0 15px !important;

        border-bottom:
            1px solid rgba(201, 163, 75, 0.20) !important;
    }


    .pkp_navigation_search_wrapper {
        position: relative !important;

        top: auto !important;
        right: auto !important;

        width: 100% !important;

        height: 40px !important;

        justify-content: flex-start !important;

        padding: 0 15px !important;

        border-top:
            1px solid rgba(201, 163, 75, 0.25) !important;
    }


    .pkp_navigation_search_wrapper a {
        height: 40px !important;

        padding: 0 !important;
    }

}