/* =========================================================
   SUBMENU PANEL
   ========================================================= */

#gcAccountUserMenu
.gc-account-user-submenu-bar {
    position: fixed !important;

    top: 0 !important;
    left: 252px !important;

    width: 284px !important;

    height: 100vh !important;
    max-height: 100vh !important;

    margin: 0 !important;

    padding:
        28px
        16px
        24px !important;

    box-sizing: border-box !important;

    background: #FFFFFF !important;

    border: 0 !important;
    border-right:
        1px solid #EEF1F5 !important;

    box-shadow:
        12px 0 32px
        rgba(23, 28, 38, 0.06) !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;

    z-index: 1001 !important;

    scrollbar-width: thin;
    scrollbar-color:
        #D9DEE7
        transparent;
}


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

#gcAccountUserMenu
.gc-account-user-submenu-bar
> div:first-child {
    margin: 0 0 20px !important;

    padding: 0 10px !important;
}


#gcAccountUserMenu
.gc-account-user-submenu-bar
h3 {
    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;

    color: #171C26 !important;

    font-family:
        Manrope,
        Arial,
        sans-serif !important;

    font-size: 18px !important;
    line-height: 1.35 !important;
    font-weight: 650 !important;

    letter-spacing: -0.01em !important;
}


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

#gcAccountUserMenu
.gc-account-user-submenu {
    display: flex !important;

    flex-direction: column !important;

    gap: 4px !important;

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

    list-style: none !important;

    background: transparent !important;
}


/* =========================================================
   LIST ITEM
   ========================================================= */

#gcAccountUserMenu
.gc-account-user-submenu
> li {
    display: block !important;

    width: 100% !important;

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

    background: transparent !important;

    border: 0 !important;
}


/* =========================================================
   SUBITEM LINK
   ========================================================= */

#gcAccountUserMenu .gc-account-user-submenu > li > .subitem-link {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 42px !important;
    padding: 9px 12px !important;
    box-sizing: border-box !important;
    border: 0 !important;
    border-radius: 9px !important;
    background: transparent !important;
    color: #697386 !important;
    font-family:
        Manrope,
        Arial,
        sans-serif !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    text-transform: none !important;
    transition:
        background-color 0.18s ease,
        color 0.18s ease,
        box-shadow 0.18s ease !important;
}


/* =========================================================
   HOVER
   ========================================================= */

#gcAccountUserMenu
.gc-account-user-submenu
> li
> .subitem-link:hover {
    background: #EAF4FF !important;

    color: #3499FD !important;

    text-decoration: none !important;
}


/* =========================================================
   ACTIVE
   ========================================================= */

#gcAccountUserMenu
.gc-account-user-submenu
> li.active
> .subitem-link,

#gcAccountUserMenu
.gc-account-user-submenu
> li.selected
> .subitem-link,

#gcAccountUserMenu
.gc-account-user-submenu
> li
> .subitem-link.active {
    background: #EAF4FF !important;

    color: #3499FD !important;

    font-weight: 600 !important;
}


/* =========================================================
   CUSTOM PROFILE SUBITEM
   ========================================================= */

#gcAccountUserMenu
.gc-account-user-submenu
.gc-psych-custom-profile-subitem {
    position: relative !important;
}


/* =========================================================
   REMOVE GETCOURSE DECORATIONS
   ========================================================= */

#gcAccountUserMenu
.gc-account-user-submenu
.subitem-link::before,

#gcAccountUserMenu
.gc-account-user-submenu
.subitem-link::after {
    content: none !important;
}


/* =========================================================
   USER BALANCE
   ========================================================= */

#gcAccountUserMenu
.gc-account-user-submenu-bar
.user-balance {
    margin-top: 0 !important;
    margin-left: 0 !important;
}


/* =========================================================
   SCROLLBAR
   ========================================================= */

#gcAccountUserMenu
.gc-account-user-submenu-bar::-webkit-scrollbar {
    width: 5px;
}

#gcAccountUserMenu
.gc-account-user-submenu-bar::-webkit-scrollbar-track {
    background: transparent;
}

#gcAccountUserMenu
.gc-account-user-submenu-bar::-webkit-scrollbar-thumb {
    background: #D9DEE7;

    border-radius: 10px;
}


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

@media (max-width: 767px) {


    /* =====================================================
       PANEL
       ===================================================== */

    #gcAccountUserMenu
    .gc-account-user-submenu-bar {
        position: absolute !important;

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

        width: 100% !important;

        height: 100dvh !important;
        max-height: 100dvh !important;

        margin: 0 !important;

        padding:
            0
            12px
            24px !important;

        box-sizing: border-box !important;

        background: #FFFFFF !important;

        border: 0 !important;

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

        box-shadow: none !important;

        overflow-x: hidden !important;
        overflow-y: auto !important;

        z-index: 20 !important;
    }


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

    #gcAccountUserMenu
    .gc-account-user-submenu-bar
    .gc-psych-submenu-mobile-header {
        position: sticky !important;

        top: 0 !important;

        display: flex !important;

        align-items: center !important;

        width: auto !important;

        min-height: 64px !important;

        margin:
            0
            -12px
            14px !important;

        padding:
            0
            56px
            0
            12px !important;

        box-sizing: border-box !important;

        background:
            rgba(255, 255, 255, 0.96) !important;

        border-bottom:
            1px solid #EEF1F5 !important;

        z-index: 5 !important;
    }


    /* =====================================================
       BACK BUTTON
       ===================================================== */

    #gcAccountUserMenu
    .gc-account-user-submenu-bar
    .gc-psych-submenu-back {
        display: flex !important;

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

        width: 40px !important;
        height: 40px !important;

        min-width: 40px !important;

        margin:
            0
            12px
            0
            0 !important;

        padding: 0 !important;

        box-sizing: border-box !important;

        background: #F7F9FC !important;

        border:
            1px solid #E8ECF2 !important;

        border-radius: 11px !important;

        color: #344054 !important;

        cursor: pointer !important;

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


    #gcAccountUserMenu
    .gc-account-user-submenu-bar
    .gc-psych-submenu-back:hover {
        background: #EAF4FF !important;

        border-color: #D3E9FF !important;

        color: #3499FD !important;
    }


    #gcAccountUserMenu
    .gc-account-user-submenu-bar
    .gc-psych-submenu-back:active {
        background: #DDEFFF !important;
    }


    /* Arrow */

    #gcAccountUserMenu
    .gc-account-user-submenu-bar
    .gc-psych-submenu-back::before {
        content: "" !important;

        display: block !important;

        width: 9px !important;
        height: 9px !important;

        margin-left: 4px !important;

        border-left:
            2px solid currentColor !important;

        border-bottom:
            2px solid currentColor !important;

        transform:
            rotate(45deg) !important;
    }


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

    #gcAccountUserMenu
    .gc-account-user-submenu-bar
    .gc-psych-submenu-mobile-title {
        display: block !important;

        min-width: 0 !important;

        color: #171C26 !important;

        font-family:
            Manrope,
            Arial,
            sans-serif !important;

        font-size: 16px !important;
        line-height: 1.3 !important;
        font-weight: 650 !important;

        letter-spacing: -0.01em !important;

        white-space: nowrap !important;

        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }


    /* =====================================================
       HIDE ORIGINAL GETCOURSE TITLE
       ===================================================== */

    #gcAccountUserMenu
    .gc-account-user-submenu-bar
    > div:not(
        .gc-psych-submenu-mobile-header
    ):first-of-type {
        display: none !important;
    }


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

    #gcAccountUserMenu
    .gc-account-user-submenu {
        gap: 4px !important;
    }


    #gcAccountUserMenu
    .gc-account-user-submenu
    > li
    > .subitem-link {
        min-height: 46px !important;

        padding:
            10px
            12px !important;

        border-radius: 10px !important;
    }
}


/* =========================================================
   DESKTOP SUBMENU ANIMATION
   ========================================================= */

@media (min-width: 768px) {

    #gcAccountUserMenu
    .gc-account-user-submenu-bar {
        animation:
            psychSubmenuOpen
            0.2s
            cubic-bezier(.22, .61, .36, 1)
            both !important;
    }

    @keyframes psychSubmenuOpen {

        from {
            opacity: 0;
            transform: translateX(-8px);
        }

        to {
            opacity: 1;
            transform: translateX(0);
        }
    }


    #gcAccountUserMenu
    .gc-account-user-submenu
    > li {
        animation:
            psychSubmenuItemIn
            0.18s
            ease
            both;
    }

    #gcAccountUserMenu
    .gc-account-user-submenu
    > li:nth-child(1) {
        animation-delay: 0.025s;
    }

    #gcAccountUserMenu
    .gc-account-user-submenu
    > li:nth-child(2) {
        animation-delay: 0.045s;
    }

    #gcAccountUserMenu
    .gc-account-user-submenu
    > li:nth-child(3) {
        animation-delay: 0.065s;
    }

    @keyframes psychSubmenuItemIn {

        from {
            opacity: 0;
            transform: translateX(-4px);
        }

        to {
            opacity: 1;
            transform: translateX(0);
        }
    }
}


/* =========================================================
   MOBILE SUBMENU ANIMATION — SMOOTH
   ========================================================= */

@media (max-width: 767px) {

    #gcAccountUserMenu
    .gc-account-user-submenu-bar {
        animation:
            psychMobileSubmenuOpenSmooth
            0.32s
            cubic-bezier(0.22, 1, 0.36, 1)
            both !important;
    }


    #gcAccountUserMenu
    .gc-account-user-submenu {
        animation:
            psychMobileSubmenuContent
            0.24s
            ease-out
            0.05s
            both !important;
    }


    @keyframes psychMobileSubmenuOpenSmooth {

        0% {
            opacity: 0;
            transform:
                translate3d(24px, 0, 0);
        }

        100% {
            opacity: 1;
            transform:
                translate3d(0, 0, 0);
        }
    }


    @keyframes psychMobileSubmenuContent {

        0% {
            opacity: 0;
            transform:
                translate3d(6px, 0, 0);
        }

        100% {
            opacity: 1;
            transform:
                translate3d(0, 0, 0);
        }
    }
}