/* Small screens (phones, ~375px). Loaded last so it overrides the desktop layout.
   The desktop layout above 768px is unchanged. */

/* inputs and boxes with fixed pixel widths never get wider than the screen */
.red_box, .login_page_input_1, .login_page_input_button, .mcst_login_notif {
    max-width:calc(100% - 32px);box-sizing:border-box;
}

/* better contrast for the small grey sidebar text */
.sidebartextsmall {
    color:rgb(150,150,150);
}

@media (max-width: 768px) {
    /* ---------- login ---------- */
    .large_login_page_name {
        font-size:80px;
    }
    #loginpage > form {
        padding:0px 16px;
    }

    /* ---------- main menu ---------- */
    #main_menu {
        padding:70px 16px 40px 16px;box-sizing:border-box;
    }
    #main_menu > h1 {
        font-size:28px;
    }
    #main_menu > h3 {
        font-size:18px;
    }
    .rename_me_later_please, .submission_processing_servers_area {
        width:100%;margin-top:20px;box-sizing:border-box;
    }
    .header_button {
        width:50%;
    }
    #main_menu_practice, #main_menu_compete {
        box-sizing:border-box;
    }
    #createCompPage {
        width:92vw;right:4vw;top:66px;height:auto;max-height:calc(100vh - 80px);overflow-y:auto;
    }

    /* ---------- sidebars become a slide-in menu (toggle button in the header) ---------- */
    #sidebar, #admin_sidebar, #spec_sidebar {
        width:85vw;max-width:350px;z-index:25;padding-top:0;
        transform:translateX(-100%);transition:transform 0.25s ease;
    }
    body.sidebar-open #sidebar, body.sidebar-open #admin_sidebar, body.sidebar-open #spec_sidebar {
        transform:none;box-shadow:0 0 20px black;
    }
    #sidebar > div, #admin_sidebar > div, #spec_sidebar > div {
        width:calc(100% + 50px);
    }
    #sidebar > div > :nth-child(1), #admin_sidebar > div > div, #spec_sidebar > div > div {
        width:calc(100% - 50px);padding-top:70px;
    }
    #competition_name, #spec_competition_name, #admin_competition_name {
        font-size:26px;word-break:break-word;
    }
    #competition_time, #spec_time, #admin_time {
        font-size:20px;
    }

    /* ---------- content area uses the whole width ---------- */
    #field, #admin_field, #spec_field {
        left:0px;width:100%;padding-top:56px;
    }
    #backlay, #spec_backlay, #admin_backlay {
        line-height:calc(100vh - 56px);font-size:25vw;
    }
    .field_card, #problemlist > div, #scoreboard > div, #allSubmissions > div, #spec_results,
    #admin_levels, #admin_groups, #admin_control_panel, #admin_problems, #admin_problem_general,
    #admin_problem_cases, #admin_case, #admin_competitors, #admin_competitor_info, #admin_submissions,
    #admin_results {
        margin-left:8px;margin-right:8px;margin-top:16px;width:calc(100% - 16px);box-sizing:border-box;
    }
    .field_card_title, .problemlist_title, .scoreboard_header_title, .all_submissions_header_title {
        font-size:22px;
    }
    .field_card_body, #scoreboardInner, #allProblemSubmissions, #spec_results_list {
        padding:10px;
    }
    #problemListInner {
        padding:10px;
    }
    .problem_body, .problem_list {
        font-size:16px;
    }
    .problem_heading {
        font-size:22px;
    }
    .problem_indent {
        padding-left:0px;
    }
    .code_textarea, .linedtextarea textarea, .linedwrap .codelines .lineno {
        font-size:14px !important;
    }
    .submit_buttons .submit_button {
        margin:10px 6px 0px 0px;font-size:16px;padding:8px;
    }
    .problemSubmissionsTable, .adminProblemsTable {
        font-size:14px;
    }
    .sidebarbutton.table_button {
        font-size:14px;padding:6px;
    }
    #editCompPage {
        margin-left:0px;width:100%;
    }
    .admin_name_input, .add_competitor_row > input {
        width:100%;
    }

    /* ---------- Code / Log popup: full width, "Close" bar on top ---------- */
    #fieldSub, #adminFieldSub {
        left:0px;width:100%;top:100px;height:calc(100vh - 100px);padding-top:0px;
    }
    #fieldSubShadow > div, #adminFieldSubShadow > div {
        top:58px;left:0px;width:100%;font-size:24px;margin:0;padding:6px;
    }
    #conn_banner {
        top:56px;
    }
}