/* =========================================================
   SIMPLE PC HELP — STANDARD MOBILE MENU
   Reusable across all pages
   ========================================================= */

@media (max-width: 767.98px) {

    /* =====================================================
       OUTER MENU SECTION
       ===================================================== */

    .mobile-menu-section {
        position: relative !important;
        z-index: 1000 !important;

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

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

        background: #FFFFFF !important;
    }


    /* =====================================================
       MENU CONTAINER
       ===================================================== */

    .mobile-menu-container,
    .mobile-menu-section > .container,
    .mobile-menu-section > .container-fluid {
        width: 100% !important;
        max-width: none !important;

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

        background: #FFFFFF !important;
    }


    /* =====================================================
       MAIN MENU ROW
       ===================================================== */

    .mobile-menu-section .mobile-menu-row {
        position: relative !important;

        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;

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

        width: 100% !important;

        min-height: 0 !important;
        height: auto !important;

        margin: 0 !important;
        padding: 14px 16px !important;

        background: #FFFFFF !important;

        border: 0 !important;
        border-bottom: 1px solid #D9E3F2 !important;
    }

    .mobile-menu-section .mobile-menu-row > *,
    .mobile-menu-section .mobile-menu-row > [class*="col"] {
        min-width: 0 !important;

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


    /* =====================================================
       LOGO COLUMN
       ===================================================== */

    .mobile-menu-section .mobile-menu-logo-column {
        display: flex !important;

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

        flex: 1 1 auto !important;

        width: auto !important;
        max-width: calc(100% - 70px) !important;

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


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

    .mobile-menu-section .mobile-menu-logo {
        display: block !important;

        width: auto !important;
        max-width: 220px !important;
        height: auto !important;

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

        object-fit: contain !important;
    }


    /* =====================================================
       NAVIGATION COLUMN
       ===================================================== */

    .mobile-menu-section .mobile-menu-nav-column {
        position: static !important;

        display: flex !important;

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

        flex: 0 0 auto !important;

        width: auto !important;

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

        background: transparent !important;
    }


    /* =====================================================
       NAVBAR
       ===================================================== */

    .mobile-menu-section .mobile-menu-nav,
    .mobile-menu-section .mobile-menu-nav > .container,
    .mobile-menu-section .mobile-menu-nav > .container-fluid {
        position: static !important;

        width: auto !important;
        max-width: none !important;

        min-height: 0 !important;

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

        background: transparent !important;

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


    /* =====================================================
       MENU TOGGLE
       ===================================================== */

    .mobile-menu-section .navbar-toggler,
    .mobile-menu-section #nav-toggle {
        position: absolute !important;

        top: 8px !important;
        right: 5px !important;

        display: flex !important;

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

        width: 48px !important;
        height: 48px !important;

        min-width: 48px !important;
        min-height: 48px !important;

        margin: 0 !important;
        padding: 7px !important;

        background: rgba(0, 74, 216, 0.045) !important;

        border: 1px solid rgba(0, 74, 216, 0.07) !important;
        border-radius: 8px !important;

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

        z-index: 10002 !important;
    }

    .mobile-menu-section .navbar-toggler:hover,
    .mobile-menu-section .navbar-toggler:focus,
    .mobile-menu-section #nav-toggle:hover,
    .mobile-menu-section #nav-toggle:focus {
        background: rgba(0, 74, 216, 0.075) !important;

        border-color: rgba(0, 74, 216, 0.12) !important;

        outline: none !important;
        box-shadow: none !important;
    }

    .mobile-menu-section .navbar-toggler-icon {
        width: 29px !important;
        height: 29px !important;

        background-size: 29px 29px !important;
    }


    /* =====================================================
       MOBILE MENU PANEL
       ===================================================== */

    .mobile-menu-section .mobile-menu-panel {
        position: absolute !important;

        top: 100% !important;
        left: 0 !important;
        right: 0 !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 7px 16px 12px !important;

        background: #FFFFFF !important;

        border: 0 !important;
        border-bottom: 1px solid #D9E3F2 !important;

        border-radius: 0 !important;

        box-shadow:
            0 8px 18px
            rgba(36, 49, 99, 0.06) !important;

        z-index: 9999 !important;
    }


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

    .mobile-menu-section .mobile-menu-list {
        display: block !important;

        width: 100% !important;

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

        list-style: none !important;

        text-align: left !important;

        background: #FFFFFF !important;
    }

    .mobile-menu-section .mobile-menu-list > li {
        position: relative !important;

        display: block !important;

        width: 100% !important;

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

        list-style: none !important;

        text-align: left !important;

        border-bottom:
            1px solid
            rgba(36, 49, 99, 0.09) !important;
    }

    .mobile-menu-section .mobile-menu-list > li:last-child {
        border-bottom: 0 !important;
    }


    /* =====================================================
       MAIN MENU LINKS
       ===================================================== */

    .mobile-menu-section .mobile-menu-list > li > a,
    .mobile-menu-section .mobile-menu-list > li > .nav-link {
        position: relative !important;

        display: flex !important;

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

        width: 100% !important;

        min-height: 56px !important;

        margin: 0 !important;
        padding: 14px 40px 14px 12px !important;

        color: #243163 !important;

        font-family:
            -apple-system,
            BlinkMacSystemFont,
            "Segoe UI",
            Arial,
            sans-serif !important;

        font-size: 17px !important;
        line-height: 1.25 !important;
        font-weight: 600 !important;

        text-align: left !important;
        text-decoration: none !important;

        background: #FFFFFF !important;

        border: 0 !important;
        border-radius: 6px !important;
    }

    .mobile-menu-section
    .mobile-menu-list > li > a::before,

    .mobile-menu-section
    .mobile-menu-list > li > .nav-link::before {
        content: none !important;
        display: none !important;
    }


    /* =====================================================
       DROPDOWN MAIN LINKS
       ===================================================== */

    .mobile-menu-section
    .mobile-menu-list > li:nth-child(3)
    .dropdown-toggle,

    .mobile-menu-section
    .mobile-menu-list > li:nth-child(5)
    .dropdown-toggle {
        position: relative !important;

        display: flex !important;

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

        width: 100% !important;

        min-height: 56px !important;

        margin: 0 !important;
        padding: 14px 40px 14px 12px !important;

        color: #243163 !important;

        font-family:
            -apple-system,
            BlinkMacSystemFont,
            "Segoe UI",
            Arial,
            sans-serif !important;

        font-size: 17px !important;
        line-height: 1.25 !important;
        font-weight: 600 !important;

        text-align: left !important;
        text-decoration: none !important;

        background: #FFFFFF !important;

        border: 0 !important;
        border-radius: 6px !important;
    }

    .mobile-menu-section .dropdown-toggle::after {
        position: absolute !important;

        top: 50% !important;
        right: 13px !important;

        margin: 0 !important;

        transform: translateY(-50%) !important;
    }


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

    .mobile-menu-section
    .mobile-menu-list > li > a:hover,

    .mobile-menu-section
    .mobile-menu-list > li > a:focus,

    .mobile-menu-section
    .mobile-menu-list > li > .nav-link:hover,

    .mobile-menu-section
    .mobile-menu-list > li > .nav-link:focus {
        color: #004AD8 !important;

        background:
            rgba(0, 74, 216, 0.04) !important;
    }

    .mobile-menu-section
    .mobile-menu-list .active > a,

    .mobile-menu-section
    .mobile-menu-list .nav-link.active {
        color: #004AD8 !important;

        background:
            rgba(0, 74, 216, 0.045) !important;
    }


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

    .mobile-menu-section .dropdown-menu {
        position: static !important;

        float: none !important;

        width: 100% !important;
        min-width: 0 !important;

        margin: 0 !important;
        padding: 3px 0 8px 22px !important;

        background: #F8FAFD !important;

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

        box-shadow: none !important;
    }

    .mobile-menu-section .dropdown-menu a,
    .mobile-menu-section .dropdown-item {
        display: block !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 10px 12px !important;

        color: #243163 !important;

        font-family:
            -apple-system,
            BlinkMacSystemFont,
            "Segoe UI",
            Arial,
            sans-serif !important;

        font-size: 15px !important;
        line-height: 1.35 !important;
        font-weight: 400 !important;

        text-align: left !important;
        text-decoration: none !important;

        white-space: normal !important;

        background: transparent !important;

        border: 0 !important;
        border-radius: 6px !important;
    }


    /* =====================================================
       BOOK SUPPORT BUTTON
       Hidden on mobile
       ===================================================== */

    .mobile-menu-section .mobile-menu-book-button {
        display: none !important;
    }
}


/* =========================================================
   VERY SMALL MOBILE MENU
   ========================================================= */

@media (max-width: 380px) {

    .mobile-menu-section .mobile-menu-logo {
        max-width: 200px !important;
    }

    .mobile-menu-section .mobile-menu-row {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    .mobile-menu-section .mobile-menu-panel {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    .mobile-menu-section .navbar-toggler,
    .mobile-menu-section #nav-toggle {
        top: 6px !important;
        right: 3px !important;
    }
}