/* if overriding this we lso need to find  way to put the new value in pj_ui_helper.toogleMenu

    we should, I guess, put this css file in resources, and put the media-query max-width in  {} for interpoltion
    then we should alter toggleMenu to reference a variable, which we can populate in PageLoad

*/

@media (max-width: 750px) {
    /* On mobile, make the menu slide in from the left */
    .pj_logged_in_slide_menu {
        position: fixed; /* Fix the menu in place on mobile */
        top: 0;
        left: -300px;
        height: 100%;
        transform: translateX(0);
        z-index: 2;
    }

    .pj_small_screen {
        display: block;
    }

    .pj_logged_in_slide_menu.active {
        transform: translateX(300px);
    }

    .pj_logged_in_menu_button {
        display: block;
    }

    .pj_logged_in_container {
        width: 100%;
        margin-left: 0; /* Remove the margin for mobile */
    }

    .pj_logged_in_title_bar .pj_in_game_user_menu {
        margin-left: 1em;
    }

    .pj_profile_image_container {
        display: block;
    }
}

@media (min-width: 600px) 
{
    :root {
        --ui_small_margin: 1em;
        --ui_big_margin: 2em;
    }

    .pj_login_container .pj_input_container {
        display: grid;
        grid-template-columns: 96px 1fr;
        align-items: center;
        column-gap: 10px;
    }

    .pj_input_container img {
        display: block;
    }


}