@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400&display=swap');


/* ==========================================================
   FONT UTAMA
========================================================== */

html,
body {
    font-family: 'Lato', sans-serif !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
.title {
    font-family: 'Lato', sans-serif !important;
}


/* ==========================================================
   BACKGROUND MATEMATIKA & STATISTIKA
========================================================== */

html {
    padding: 20px 0;

    background-color: #f7f8fb;

    background-image:

        /* grid horizontal */
        linear-gradient(
            rgba(163, 8, 60, 0.045) 1px,
            transparent 1px
        ),

        /* grid vertical */
        linear-gradient(
            90deg,
            rgba(163, 8, 60, 0.045) 1px,
            transparent 1px
        ),

        /* aksen cahaya */
        radial-gradient(
            circle at 12% 18%,
            rgba(163, 8, 60, 0.08),
            transparent 25%
        ),

        radial-gradient(
            circle at 88% 78%,
            rgba(163, 8, 60, 0.05),
            transparent 25%
        ),

        /* ilustrasi matematika dan statistika */
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1000' height='760' viewBox='0 0 1000 760'%3E%3Crect width='1000' height='760' fill='none'/%3E%3Cg stroke='%23b8bfd0' stroke-width='1.3' fill='none' opacity='0.55'%3E%3Cpath d='M70 610H390M100 640V360'/%3E%3Cpath d='M115 590 C160 590 175 445 230 445 C285 445 300 590 350 590'/%3E%3Cpath d='M540 610H900M570 640V350'/%3E%3Cpath d='M595 570L650 520L710 545L775 430L845 470'/%3E%3Crect x='590' y='530' width='34' height='60'/%3E%3Crect x='645' y='490' width='34' height='100'/%3E%3Crect x='700' y='455' width='34' height='135'/%3E%3Crect x='755' y='505' width='34' height='85'/%3E%3Crect x='810' y='435' width='34' height='155'/%3E%3Ccircle cx='150' cy='165' r='70'/%3E%3Ccircle cx='150' cy='165' r='40'/%3E%3Cpath d='M80 165H220M150 95V235'/%3E%3Cpath d='M390 110 L490 110 L540 180 L490 250 L390 250 L340 180 Z'/%3E%3Cpath d='M340 180H540M440 110V250'/%3E%3Cpath d='M600 120H860M600 120L600 260M600 220 Q670 150 740 180 T860 130'/%3E%3Ccircle cx='640' cy='200' r='4'/%3E%3Ccircle cx='710' cy='168' r='4'/%3E%3Ccircle cx='790' cy='178' r='4'/%3E%3Ccircle cx='850' cy='138' r='4'/%3E%3C/g%3E%3Cg fill='%23818ba0' opacity='0.60' font-family='Georgia,Times New Roman,serif'%3E%3Ctext x='55' y='65' font-size='28'%CE%BC = E(X)%3C/text%3E%3Ctext x='250' y='110' font-size='25'%CF%83%C2%B2 = Var(X)%3C/text%3E%3Ctext x='610' y='95' font-size='28'%CE%A3 x%E1%B5%A2 / n%3C/text%3E%3Ctext x='80' y='305' font-size='24'>P(A%7CB)=P(A%E2%88%A9B)/P(B)%3C/text%3E%3Ctext x='365' y='315' font-size='25'>y = %CE%B2%E2%82%80 + %CE%B2%E2%82%81x + %CE%B5%3C/text%3E%3Ctext x='110' y='710' font-size='27'>%E2%88%AB f(x) dx%3C/text%3E%3Ctext x='610' y='700' font-size='24'>H%E2%82%80 : %CE%BC%E2%82%81 = %CE%BC%E2%82%82%3C/text%3E%3C/g%3E%3Cg fill='%23A3083C' opacity='0.25'%3E%3Ccircle cx='605' cy='300' r='5'/%3E%3Ccircle cx='665' cy='265' r='5'/%3E%3Ccircle cx='730' cy='286' r='5'/%3E%3Ccircle cx='795' cy='238' r='5'/%3E%3Ccircle cx='855' cy='258' r='5'/%3E%3C/g%3E%3C/svg%3E");

    background-size:
        42px 42px,
        42px 42px,
        100% 100%,
        100% 100%,
        1000px 760px;

    background-position:
        top left,
        top left,
        top left,
        top left,
        center top;

    background-repeat:
        repeat,
        repeat,
        no-repeat,
        no-repeat,
        repeat;
}


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

@media (min-width: 992px) {

    body {
        width: 1162px;
        margin: auto;
    }

}


/* ==========================================================
   STRUKTUR HALAMAN
========================================================== */

.pkp_structure_page {
    background: rgba(255,255,255,0.96);
    border: 0;
    box-shadow: 2px 2px #8080804f;
}


.column {
    float: left;
    width: 33.33%;
}


/* ==========================================================
   HEADER UTAMA
========================================================== */

.pkp_structure_head {
    background: #ffffff !important;
    background-color: #ffffff !important;
    height: auto !important;
    width: auto !important;
    border: none !important;
}


/* ==========================================================
   LOGO / NAMA SITUS
========================================================== */

.pkp_site_name_wrapper {
    padding-left: 0 !important;
    padding-right: 0 !important;

    background: #ffffff !important;
}


.pkp_site_name {
    padding-top: 0 !important;
    padding-bottom: 0 !important;

    background: #ffffff !important;

    color: #000080 !important;
}


.pkp_site_name > a {
    padding-top: 0 !important;
    padding-bottom: 0 !important;

    color: #000080 !important;
}


.pkp_site_name .is_img {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}


.pkp_site_name .is_img img {
    display: block;

    width: auto;
    height: auto;

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


/* ==========================================================
   HEADER ATAS REGISTER / LOGIN
   BACKGROUND PUTIH
========================================================== */

body .pkp_structure_head .pkp_navigation_user_wrapper {
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;

    border: none !important;
    box-shadow: none !important;

    padding-top: 0 !important;
    padding-bottom: 0 !important;
}


body .pkp_structure_head .pkp_navigation_user {
    background: #ffffff !important;
    background-color: #ffffff !important;

    margin: 0 !important;

    border: none !important;
}


body .pkp_structure_head .pkp_navigation_user > li {
    background: #ffffff !important;
    background-color: #ffffff !important;
}


body .pkp_structure_head .pkp_navigation_user > li > a {
    background: #ffffff !important;
    background-color: #ffffff !important;

    color: #A3083C !important;

    font-family: 'Lato', sans-serif !important;
    font-weight: 700 !important;

    border: none !important;
    box-shadow: none !important;

    text-decoration: none !important;
}


body .pkp_structure_head .pkp_navigation_user > li > a:hover,
body .pkp_structure_head .pkp_navigation_user > li > a:focus,
body .pkp_structure_head .pkp_navigation_user > li > a:active {

    background: #ffffff !important;

    color: #A3083C !important;

    text-decoration: underline !important;
}


/* ==========================================================
   MENU NAVIGASI UTAMA
   WARNA TETAP #A3083C
========================================================== */

body .pkp_structure_head .pkp_site_nav_menu,
body .pkp_structure_head .pkp_navigation_primary_row,
body .pkp_structure_head .pkp_navigation_primary_wrapper,
body .pkp_structure_head #navigationPrimary,
body .pkp_structure_head .pkp_navigation_primary {

    background: #A3083C !important;
    background-color: #A3083C !important;
    background-image: none !important;
}


/* ==========================================================
   WRAPPER NAVIGASI
========================================================== */

body .pkp_navigation_primary_wrapper {

    min-height: 40px !important;

    padding-top: 0 !important;
    padding-bottom: 0 !important;

    padding-left: 8px !important;
    padding-right: 8px !important;

    text-align: left !important;
}


/* ==========================================================
   UL MENU UTAMA
========================================================== */

body .pkp_structure_head #navigationPrimary,
body .pkp_structure_head .pkp_navigation_primary {

    display: flex !important;

    align-items: stretch !important;

    min-height: 40px !important;

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


/* ==========================================================
   ITEM MENU UTAMA
========================================================== */

body .pkp_structure_head #navigationPrimary > li,
body .pkp_structure_head .pkp_navigation_primary > li {

    display: flex !important;

    align-items: stretch !important;

    min-height: 40px !important;

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

    background: #A3083C !important;
}


/* ==========================================================
   LINK MENU UTAMA
   TULISAN DITENGAH SECARA VERTIKAL
========================================================== */

body .pkp_structure_head #navigationPrimary > li > a,
body .pkp_structure_head .pkp_navigation_primary > li > a {

    display: flex !important;

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

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

    box-sizing: border-box !important;

    margin: 0 !important;

    /* dibuat lebih rapat */
    padding: 0 10px !important;

    background: #A3083C !important;
    background-color: #A3083C !important;

    color: #ffffff !important;

    font-family: 'Lato', sans-serif !important;

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

    line-height: 1 !important;

    border: none !important;

    box-shadow: none !important;

    text-decoration: none !important;
}


/* HOME */

body .pkp_structure_head #navigationPrimary > li:first-child > a,
body .pkp_structure_head .pkp_navigation_primary > li:first-child > a {

    padding-left: 10px !important;
    padding-right: 10px !important;
}


/* ==========================================================
   HOVER MENU UTAMA
   WARNA TETAP
========================================================== */

body .pkp_structure_head #navigationPrimary > li > a:hover,
body .pkp_structure_head #navigationPrimary > li > a:focus,
body .pkp_structure_head #navigationPrimary > li > a:active,

body .pkp_structure_head .pkp_navigation_primary > li > a:hover,
body .pkp_structure_head .pkp_navigation_primary > li > a:focus,
body .pkp_structure_head .pkp_navigation_primary > li > a:active {

    background: #A3083C !important;
    background-color: #A3083C !important;

    color: #ffffff !important;

    border: none !important;

    box-shadow: none !important;

    text-decoration: none !important;
}


/* ==========================================================
   DROPDOWN MENU
========================================================== */

body .pkp_structure_head #navigationPrimary ul,
body .pkp_structure_head .pkp_navigation_primary ul,
body .pkp_structure_head .dropdown-menu {

    background: #A3083C !important;
    background-color: #A3083C !important;
    background-image: none !important;

    border: none !important;

    padding-top: 4px !important;
    padding-bottom: 4px !important;

    box-shadow: 0 3px 8px rgba(0,0,0,0.15) !important;
}


/* ITEM DROPDOWN */

body .pkp_structure_head #navigationPrimary ul li,
body .pkp_structure_head .pkp_navigation_primary ul li,
body .pkp_structure_head .dropdown-menu li {

    background: #A3083C !important;

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


/* LINK DROPDOWN */

body .pkp_structure_head #navigationPrimary ul li a,
body .pkp_structure_head .pkp_navigation_primary ul li a,
body .pkp_structure_head .dropdown-menu li a {

    display: flex !important;

    align-items: center !important;

    min-height: 34px !important;

    padding: 6px 12px !important;

    background: #A3083C !important;
    background-color: #A3083C !important;

    color: #ffffff !important;

    font-family: 'Lato', sans-serif !important;

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

    border: none !important;

    text-decoration: none !important;
}


/* HOVER DROPDOWN */

body .pkp_structure_head #navigationPrimary ul li a:hover,
body .pkp_structure_head #navigationPrimary ul li a:focus,

body .pkp_structure_head .pkp_navigation_primary ul li a:hover,
body .pkp_structure_head .pkp_navigation_primary ul li a:focus,

body .pkp_structure_head .dropdown-menu li a:hover,
body .pkp_structure_head .dropdown-menu li a:focus {

    background: #A3083C !important;

    color: #ffffff !important;
}


/* ==========================================================
   ITEM MENU CUSTOM
========================================================== */

.item_menu {
    padding: 0 !important;
    margin: 0 !important;
}


.item_menu a {
    color: #ffffff !important;
    border: none !important;
}


.item_menu a:hover {
    color: #ffffff !important;
    border-bottom: none !important;
}


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

.cmp_breadcrumbs {

    display: block;

    background: #eeeded;

    border: 0;

    box-shadow: 1px 1px gray;

    border-radius: 3px;

    padding: 0 10px;

    margin: 10px 0 30px 0;
}


.cmp_breadcrumbs ol {
    margin-bottom: 0;
}


/* ==========================================================
   ABSTRACT
========================================================== */

.item.abstract {
    text-align: justify;
}


/* ==========================================================
   ICON PENULIS
========================================================== */

.authors::before {
    content: '\f007';
    font-family: FontAwesome;
}


.item.authors::before {
    content: '';
}


ul.authors::before {
    content: '';
}


.name::before {
    content: '\f007';
    font-family: FontAwesome;
}


/* ==========================================================
   ICON PAGES
========================================================== */

.pages::before {
    content: '\f0f6';
    font-family: FontAwesome;
}


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

.cmp_article_list li {

    border-bottom: 1px solid #c8c8c8;

    padding:
        0
        0
        10px
        10px;

    border-left: 7px solid #e1e1e1;

    border-radius:
        0
        0
        0
        5px;
}


/* ==========================================================
   GALLEYS
========================================================== */

.galleys_links li {
    border: none !important;
    padding: 0 !important;
}


/* ==========================================================
   TOMBOL PDF DAFTAR ISI
   WARNA #A3083C
========================================================== */

body .obj_galley_link,
body .galleys_links a,
body .cmp_article_list .galleys_links a,
body .obj_article_summary .galleys_links a,
body .obj_article_summary .galley-link,
body .obj_issue_toc .galleys_links a,
body .obj_issue_toc .obj_galley_link {

    display: inline-flex !important;

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

    background: #A3083C !important;
    background-color: #A3083C !important;
    background-image: none !important;

    color: #ffffff !important;

    border: 1px solid #A3083C !important;

    border-radius: 4px !important;

    padding: 5px 10px !important;

    margin-top: 5px !important;

    font-family: 'Lato', sans-serif !important;

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

    line-height: 18px !important;

    text-decoration: none !important;

    box-shadow: none !important;

    transition: none !important;
}


/* ==========================================================
   ICON PDF PUTIH
========================================================== */

body .obj_galley_link::before,
body .galleys_links a::before {

    color: #ffffff !important;
}


/* ==========================================================
   HOVER PDF
   TETAP MARUN
========================================================== */

body .obj_galley_link:hover,
body .obj_galley_link:focus,
body .obj_galley_link:active,

body .galleys_links a:hover,
body .galleys_links a:focus,
body .galleys_links a:active,

body .cmp_article_list .galleys_links a:hover,
body .obj_article_summary .galleys_links a:hover,
body .obj_issue_toc .galleys_links a:hover {

    background: #A3083C !important;
    background-color: #A3083C !important;

    border-color: #A3083C !important;

    color: #ffffff !important;

    text-decoration: none !important;

    box-shadow: none !important;
}


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

@media (min-width: 992px) {

    .pkp_structure_content {
        padding-top: 0 !important;
    }

    .pkp_navigation_user_wrapper {
        padding-left: 0 !important;
        padding-right: 5px !important;
    }

    .pages {
        border: 1px solid #d2d2d2;

        border-radius: 4px;

        padding: 0 6px;

        background: #f4f4f4;
    }

    .pkp_navigation_search_wrapper {
        display: none;
    }

    .pkp_page_index .homepage_image {
        margin-top: 0;
    }

}


/* ==========================================================
   HOMEPAGE ABOUT
========================================================== */

.homepage_about > h2 {
    display: none;
}


.pkp_page_index .homepage_about {

    padding-top: 0;

    padding-bottom: 2.143rem;
}


/* ==========================================================
   BRAND OJS
========================================================== */

.pkp_brand_footer {
    display: none !important;
}


/* ==========================================================
   DATA BOX
========================================================== */

.data {

    background: #f0f0f0;

    border: 1px solid #d7d6d6;

    border-radius: 5px;

    padding: 5px 10px;

    box-shadow: 2px 2px #80808024;
}


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

.pkp_block {
    padding: 5px !important;
}


/* ==========================================================
   HEADER BLOCK
========================================================== */

.head_block {

    background: #A3083C;

    border-bottom: 4px solid #A3083C;

    color: #ffffff;

    border-radius: 5px 5px 0 0;

    padding: 7px 10px;

    box-shadow: 3px 3px #80808096;
}


/* ==========================================================
   SUBMISSION
========================================================== */

.block_make_submission_link {

    width: 100%;

    text-align: center;

    padding: 5px 0 !important;

    box-shadow: 2px 2px #dbd9d9 !important;
}


.pkp_block .block_make_submission_link {

    background: #A3083C !important;

    color: #ffffff !important;

    border-color: #A3083C !important;
}


.pkp_block .block_make_submission_link:hover {

    background: #A3083C !important;

    color: #ffffff !important;
}


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

.pkp_block .title {

    display: block !important;

    padding: 8px 10px !important;

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

    font-weight: 700;

    text-transform: none !important;

    background: #A3083C !important;

    color: #ffffff !important;

    border-radius: 5px 5px 0 0;

    box-shadow: 2px 2px #ccccccab;
}


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

.pkp_block a {
    color: #A3083C !important;
}


/* ==========================================================
   LOGO DETAILS
========================================================== */

.logo-details {

    border-bottom: 5px solid #b5b2b2;

    font-size: 1.5em;

    padding-bottom: 10px;
}


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

footer .content .link-boxes {

    width: 100%;

    display: flex;

    justify-content: space-between;
}


footer .content .link-boxes .box {

    width: calc(100% / 5 - 10px);
}


.content .link-boxes .box .link_name {

    color: #A3083C;

    font-size: 11pt;

    font-weight: 700;

    margin-bottom: 10px;

    position: relative;
}


.content .link-boxes .box li {

    margin: 6px 0;

    list-style: none;
}


.link-boxes .box .link_name::before {

    content: '';

    position: absolute;

    left: 0;

    bottom: -2px;

    height: 2px;

    width: 35px;

    background: #A3083C;
}


ul.box {
    padding: 0 5px 0 0;
}


/* ==========================================================
   FQUERY
========================================================== */

.fquery {

    padding: 7px 10px;

    border: 1px solid gray;

    border-radius: 5px;
}


/* ==========================================================
   POLICY
========================================================== */

.policy_terms {
    float: right;
}


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

.bottom-details {

    background: #A3083C;

    margin: 0 -30px -30px;

    padding: 10px 15px;

    color: #ffffff;
}


.bottom-details a {
    color: #ffffff;
}


/* ==========================================================
   ANNOUNCEMENT
========================================================== */

.obj_announcement_summary .summary {
    font-size: 11pt !important;
}


/* ==========================================================
   INDEX IMAGE
========================================================== */

.index_list img {

    width: 180px;

    margin: 0 5px 0 0;

    border: 1px solid gray;

    border-radius: 5px;

    box-shadow: 2px 2px #8080802e;

    padding: 10px;
}


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

.pkp_structure_footer_wrapper {
    background: #f0f0f0 !important;
}


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

@media (max-width: 991px) {

    html {
        padding-top: 0;
    }

    .pkp_navigation_primary_wrapper {

        padding-left: 5px !important;

        padding-right: 5px !important;
    }

}


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

@media (max-width: 767px) {

    body .pkp_structure_head #navigationPrimary,
    body .pkp_structure_head .pkp_navigation_primary {

        display: block !important;
    }


    body .pkp_structure_head #navigationPrimary > li,
    body .pkp_structure_head .pkp_navigation_primary > li {

        display: block !important;
    }


    body .pkp_structure_head #navigationPrimary > li > a,
    body .pkp_structure_head .pkp_navigation_primary > li > a {

        display: flex !important;

        align-items: center !important;

        justify-content: flex-start !important;

        height: 38px !important;

        min-height: 38px !important;

        padding-left: 12px !important;

        padding-right: 12px !important;

        background: #A3083C !important;

        color: #ffffff !important;
    }

}


/* ==========================================================
   FINAL OVERRIDE NAVIGASI
   MENCEGAH THEME OJS MENGUBAH WARNA
========================================================== */

body .pkp_structure_head .pkp_navigation_primary_row,
body .pkp_structure_head .pkp_navigation_primary_wrapper,
body .pkp_structure_head #navigationPrimary {

    background: #A3083C !important;

    background-color: #A3083C !important;

    background-image: none !important;
}


/* ==========================================================
   FINAL OVERRIDE PDF
========================================================== */

body .obj_galley_link,
body .galleys_links a {

    background: #A3083C !important;

    background-color: #A3083C !important;

    border-color: #A3083C !important;

    color: #ffffff !important;
}


body .obj_galley_link:hover,
body .obj_galley_link:focus,
body .galleys_links a:hover,
body .galleys_links a:focus {

    background: #A3083C !important;

    background-color: #A3083C !important;

    border-color: #A3083C !important;

    color: #ffffff !important;
}


/* ==========================================================
   FINAL OVERRIDE HEADER ATAS
   REGISTER / LOGIN TETAP PUTIH
========================================================== */

body .pkp_structure_head .pkp_navigation_user_wrapper,
body .pkp_structure_head .pkp_navigation_user,
body .pkp_structure_head .pkp_navigation_user > li,
body .pkp_structure_head .pkp_navigation_user > li > a {

    background: #ffffff !important;

    background-color: #ffffff !important;
}


body .pkp_structure_head .pkp_navigation_user > li > a {

    color: #A3083C !important;
}