/* =========================================================
   PA BUNTOK — MENU PROFIL
   MOBILE GROUP ACCORDION
   DESKTOP = NATIVE GENERATEPRESS
========================================================= */


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

@media (max-width: 1024px) {


    /* =====================================================
       SUBMENU CONTAINER
    ===================================================== */

    .main-navigation
    .main-nav
    li.pa-menu-profil
    > ul.sub-menu {

        position: static;

        display: block !important;

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

        margin: 0;

        padding: 8px 0 10px !important;

        transform: none;

        background: #FFFFFF;

        border: 0;

        border-radius: 0;

        box-shadow: none;

        box-sizing: border-box;
    }


    /* =====================================================
       GROUP
    ===================================================== */

    .pa-menu-profil-group {

        display: block;

        width: 100%;

        margin: 0;
        padding: 0;
    }


    /* =====================================================
       GROUP CLOSED
    ===================================================== */

    .pa-menu-profil-group
    > li:not(.pa-menu-separator) {

        display: none;
    }


    /* =====================================================
       GROUP OPEN
    ===================================================== */

    .pa-menu-profil-group.pa-group-open
    > li:not(.pa-menu-separator) {

        display: block;
    }


    /* =====================================================
       SEPARATOR
    ===================================================== */

    .pa-menu-profil-group
    > li.pa-menu-separator {

        display: block;

        width: 100%;

        margin: 0;
        padding: 0;

        border: 0;

        list-style: none;
    }


    /* =====================================================
       SEPARATOR BUTTON
    ===================================================== */

    .pa-menu-profil-group
    > li.pa-menu-separator
    > a {

        position: relative;

        display: flex !important;

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

        width: 100%;

        min-height: 56px;

        margin: 0;

        padding: 12px 18px !important;

        background: transparent !important;

        color: #0B7A3B !important;

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

        line-height: 1.2;

        letter-spacing: 1.6px;

        text-transform: uppercase;

        text-decoration: none;

        cursor: pointer;

        pointer-events: auto !important;

        border: 0;

        border-bottom: 1px solid #E8EEEA;

        box-sizing: border-box;

        transition:
            background-color .2s ease,
            color .2s ease;
    }


    /* =====================================================
       REMOVE NATIVE ICON
    ===================================================== */

    .pa-menu-profil-group
    > li.pa-menu-separator
    > a::before {

        display: none !important;

        content: none !important;
    }


    .pa-menu-profil-group
    > li.pa-menu-separator
    > a
    .gp-icon {

        display: none !important;
    }


    /* =====================================================
       RIGHT ARROW
    ===================================================== */

    .pa-menu-profil-group
    > li.pa-menu-separator
    > a::after {

        content: '›';

        display: flex;

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

        flex: 0 0 auto;

        width: 24px;
        height: 24px;

        margin-left: 12px;

        color: #0B7A3B;

        font-size: 23px;
        font-weight: 400;

        line-height: 1;

        transform: rotate(0deg);

        transition:
            transform .22s ease;
    }


    /* =====================================================
       OPEN ARROW
    ===================================================== */

    .pa-menu-profil-group.pa-group-open
    > li.pa-menu-separator
    > a::after {

        transform: rotate(90deg);
    }


    /* =====================================================
       OPEN GROUP
    ===================================================== */

    .pa-menu-profil-group.pa-group-open
    > li.pa-menu-separator
    > a {

        background: #F7FAF8 !important;

        color: #08783F !important;
    }


    /* =====================================================
       SUBMENU ITEM
    ===================================================== */

    .pa-menu-profil-group
    > li:not(.pa-menu-separator)
    > a {

        display: block;

        width: 100%;

        padding: 10px 18px 10px 30px !important;

        background: #FAFCFB;

        color: #26352F;

        font-size: 14px;
        font-weight: 500;

        line-height: 1.4;

        text-decoration: none;

        border-bottom: 1px solid #F0F3F1;

        border-radius: 0;

        box-sizing: border-box;

        transition:
            background-color .18s ease,
            color .18s ease;
    }


    /* =====================================================
       REMOVE LEFT ARROW FROM ITEM
    ===================================================== */

    .pa-menu-profil-group
    > li:not(.pa-menu-separator)
    > a::before {

        display: none !important;

        content: none !important;
    }


    .pa-menu-profil-group
    > li:not(.pa-menu-separator)
    > a
    .gp-icon {

        display: none !important;
    }


    /* =====================================================
       ITEM HOVER / ACTIVE
    ===================================================== */

    .pa-menu-profil-group
    > li:not(.pa-menu-separator)
    > a:hover {

        background: #F3F8F5;

        color: #0B7A3B;
    }

}