/**
 * mobile nav controls - stuff not contained 'within' the actual mobile nav menu *
**/
body.mobile-nav-active { height: 100vh; }
.mobile-control-container { background: transparent; cursor: pointer; display: none; min-height: 40px; padding: 0; }
.open-mobile-nav-search { color: #ffffff; cursor: pointer; margin: 0 0 0 8px; }
.open-mobile-nav-btn { margin: 0 10px 0 0; position: relative; transition: all 0.2s ease-in-out; }
.mobile-control .fa { transition: all 0.2s ease-in-out; }
.mobile-control .fa:hover { transform: scale(1.1); }
.open-mobile-nav-btn:hover { cursor: pointer; }

.has-tabbed .mobile-control-container:focus { outline: 2px dashed #ffffff; outline-offset: 1px; }
.mobile-control-container:focus { outline: none; }

/**
 * actual mobile menu styled below here *
**/
.msu-mobile-nav-container { display: none; transition: right 0.2s ease-in-out; }
.mobile-nav-background { background: rgb(0, 0, 0); left: 0; opacity: 0; position: fixed; top: 0;
    transition: opacity 0.2s ease-in-out; z-index: 998; }
.msu-mobile-nav { background: rgb(39, 39, 39); color: #ffffff; height: 100vh; overflow-y: auto;
    position: absolute; right: -800px; top: 0; transition: right 0.2s ease-in-out; width: 0px; z-index: 999; }

/* nav menu top close button */
.msu-mobile-nav-container .close-btn-container { display: flex; justify-content: flex-end; padding: 20px 18px 10px; }
.msu-mobile-nav-container .close-nav-btn { align-items: center; background: transparent; display: flex;
    justify-content: space-between; padding: 0; width: 80px; color: #FFFFFF; }
.msu-mobile-nav-container .close-nav-btn .upper-case { line-height: 1; }
.msu-mobile-nav-container .close-icon { align-items: center; border: 1px solid #ffffff; border-radius: 50%;
    display: flex; height: 20px; justify-content: center; transition: all 0.2s ease-in-out; width: 20px; }
.msu-mobile-nav-container .close-icon .fa { font-size: 13px; color: #FFFFFF; }
.msu-mobile-nav-container .close-nav-btn:hover .close-icon { transform: scale(1.1); }

.msu-mobile-nav-container .close-nav-btn:focus { outline: none; }
.has-tabbed .msu-mobile-nav-container .close-nav-btn:focus { outline: 2px dashed #ffffff; }

/* nav menu search bar */
.msu-mobile-nav .msu-mobile-nav-searchbar-form-container { border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: 10px 18px; }
.msu-mobile-nav .msu-mobile-nav-searchbar-form { background: #ffffff; border: 1px solid #eee;
    border-radius: 3px; display: flex; justify-content: space-between; }
.msu-mobile-nav .msu-mobile-nav-searchbar { border: 0; color: #000000; padding: 8px; width: 80%; }
.msu-mobile-nav .submit-btn { background: transparent; color: #000000; }

.has-tabbed .msu-mobile-nav .msu-mobile-nav-searchbar:focus,
.has-tabbed .msu-mobile-nav .submit-btn:focus { outline: 2px dashed #4c7e00; outline-offset: -5px; }
.msu-mobile-nav .msu-mobile-nav-searchbar:focus,
.msu-mobile-nav .submit-btn:focus { outline: none; }

/* nav menu items */
.msu-mobile-nav .nav-item-container { padding: 0 20px; }
.msu-mobile-nav .nav-item-container:not(:last-of-type) { border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.msu-mobile-nav .toggle-submenu { background: rgb(39, 39, 39); display: inline-block; padding: 0; position: relative;
    text-align: left; white-space: nowrap; }
.msu-mobile-nav .toggle-submenu .fa { position: absolute; top: 50%; transform: translateY(-50%); color: #FFFFFF; }
.msu-mobile-nav .toggle-submenu[aria-expanded="true"] .fa { transform: rotate(180deg) translateY(50%); }
.msu-mobile-nav .submenu { background: #424242; box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.4); display: none;
    margin-top: 10px; }
.msu-mobile-nav .text-wrap { display: inline-block; font-size: 14px; line-height: 16px; padding: 14px 12px; }
.msu-mobile-nav .msu-mobile-nav-list>li.nav-item-container:nth-of-type(1) .text-area { padding-left: 11px; }

.msu-mobile-nav a,
.msu-mobile-nav a:hover,
.msu-mobile-nav a:focus,
.msu-mobile-nav .text-wrap { color: #FFFFFF; text-decoration: none; white-space: normal; }
.msu-mobile-nav .msu-mobile-nav-list li:not(:first-of-type) .text-wrap { padding-left: 32px; }
.msu-mobile-nav .msu-mobile-nav-list li:not(:first-of-type) .text-wrap.nav-item-label { padding-left: 12px; }

.has-tabbed .msu-mobile-nav a:focus,
.has-tabbed .msu-mobile-nav button:focus { outline: 2px dashed #ffffff; }
.msu-mobile-nav a:focus,
.msu-mobile-nav button:focus { outline: none; }

/* enabling classes */
.msu-mobile-nav-container.active .mobile-nav-background { height: 100%; opacity: 0.8; width: 100%;  }
.msu-mobile-nav-container.active .msu-mobile-nav { right: 0; width: 300px; }
.msu-mobile-nav .submenu.active { display: block; }

@media screen and (max-width: 1024px) {
    .mobile-control-container { display: flex; }
    .open-mobile-nav-btn:after { content: '|'; opacity: 0.8; position: absolute; right: -12px; top: 2px; }
    .msu-mobile-nav-container { display: block; }
    .mobile-nav-active .msu-mobile-nav-container { height: 100%; position: fixed; top: 0; width: 100%; z-index: 2; }

    .browser-safari.mobile-nav-active .msu-mobile-nav-container { z-index: 10; }
}