/* FIX For Nav height */
#container {
    position: relative;
    margin-top: 86px;
}

@media screen and (max-width: 440px) {
    #container {
        position: relative;
        margin-top: 0;
    }
}
@media screen and (min-width: 992px) {
    .on-desktop {
        display: block;
    }

    .on-mobile {
        display: none;
    }

    .cargo-nav-bar {
        background-color: #ffffff;
        position: fixed;
        clear: both;
        top: 0;
        left: 0;
        right: 0;
        z-index: 999;
        display: flex;
        height: 86px;
        align-items: center;
    }

    .cargo-nav-bar .cargo-login-icon {
        margin-right: 8px;
        font-size: 19px;
    }

    /** Needs to be changed for Viewports */
    .cargo-nav-bar .cargo-nav-container {
        max-width: 1224px;
        width: 100vw;
        display: flex;
        margin: 0 auto;
        height: 100%;
        align-items: center;
        justify-content: space-between;
    }

    .cargo-nav-bar .collapsible-menu  {
        display: flex;
        height: 100%;
    }

    .cargo-nav-bar .cargo-nav-logo {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 20px;
    }

    .cargo-nav-bar .toggle-responsive-menu {
        display: none;
        cursor: pointer;
    }

    .cargo-nav-bar .cargo-menu-item.has-submenu:hover,
    .cargo-nav-bar .cargo-menu-item > a:hover,
    .cargo-nav-bar .cargo-menu-item > span:hover{
        background: #2a3249;
        color: #ffffff;
        cursor: pointer;
        text-decoration: none;
    }

    .cargo-nav-bar .cargo-menu-item.has-submenu.active:hover,
    .cargo-nav-bar .cargo-menu-item.active > a:hover,
    .cargo-nav-bar .cargo-menu-item.active > span:hover{
        background: #ffffff;
        color: #2a3249;
        cursor: pointer;
        text-decoration: none;
    }

    .cargo-nav-bar .cargo-menu-item.has-submenu.active,
    .cargo-nav-bar .cargo-menu-item.active a,
    .cargo-nav-bar .cargo-menu-item.active span  {
        /* background: #3B4563; */
        box-shadow: inset 0 -10px 0px -5px #3b4563;
        color: #3b4563;
        cursor: pointer;
        text-decoration: none;
    }
    
    .cargo-nav-bar .cargo-menu-item.has-submenu:hover .submenu,
    .cargo-nav-bar .cargo-menu-item.has-submenu:hover .submenu:hover {
        display: block;
        right: 0;
        background: #3B4563;
        color: #ffffff
    }

    .cargo-nav-bar .cargo-menu-item.has-submenu.active .cargo-submenu-item a {
        color: #ffffff !important;
    }

    .cargo-nav-bar .cargo-menu-item.has-submenu.active .cargo-submenu-item:hover a,
    .cargo-nav-bar .cargo-menu-item.has-submenu.active .cargo-submenu-item.active a {
        color: #F8B709 !important;
    }
    
    .cargo-nav-bar .cargo-menu-item.has-submenu .submenu.open {
        display: block;
        right: 0;
        background: #3B4563
    }
    .cargo-nav-bar .cargo-menu-item.has-submenu {
        position: relative;
    }

    .cargo-nav-bar .submenu {
        display: none;
        position: absolute;
        margin-top: 0px;
        padding: 20px;
        list-style: none;
    }

    .cargo-nav-bar .cargo-submenu-item a:hover *,
    .cargo-nav-bar .cargo-submenu-item a:hover {
        color: #F8B709;
    }

    .cargo-nav-bar .cargo-menu-item .link-icon {
        display: none;
    }

    .cargo-nav-bar .cargo-submenu-item .sub-link-icon {
        margin-top: 5px;
        margin-right: 12px;
        display: inline;
    }

    .cargo-nav-bar .cargo-submenu-item * {
        text-decoration: none;
    }

    .cargo-nav-bar .cargo-submenu-item a {
        display: flex; 
        width: 100%;
        height: 100%;
        padding: 4px 0px;
        margin-left: 20px;
        margin-right: 20px;
    }

    .cargo-nav-bar .cargo-submenu-item.active *,
    .cargo-nav-bar .cargo-submenu-item.active a {
        color: #F8B709;
    }
    .cargo-nav-bar .cargo-submenu-item,
    .cargo-nav-bar .cargo-submenu-item * {
        color: #ffffff;
    }

    .cargo-nav-bar .cargo-menu-item,
    .cargo-nav-bar .cargo-menu-item > a {
        color: #3B4563;
    }

    .cargo-nav-bar .cargo-menu-item > a,
    .cargo-nav-bar .cargo-menu-item > span {
        height: 100%;
        padding-left: 18px;
        padding-right: 18px;
        display: flex;
        flex: 1;
        align-items: center;
        text-decoration: none;
    }
}

@media screen and (max-width: 992px) {
    
    .on-desktop {
        display: none;
    }

    .on-mobile {
        display: block;
    }
    

    .cargo-nav-bar,
    .cargo-nav-bar * {
        box-sizing: border-box;
        color: #ffffff
    }

    .cargo-nav-bar {
        padding: 0;
        margin: 0;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 999;
        height: fit-content;
    }

    .cargo-nav-bar .brand .logo-link {
        display: flex;
        align-items: center;
    }

    .cargo-nav-bar .brand {
        background-color: #ffffff;
        display: flex;
        width: 100%;
        justify-content: space-between;
        padding: 0;
        margin: 0;
        height: 68px;
        align-items: center;
        padding-left: 12px;
        padding-right: 12px;
    }

    .cargo-nav-bar .my-cargo-link a {
        background-color: #F8B709;
        border-radius: 4px;
        color: #ffffff;
        display: flex;
        justify-content: center;
        align-items: center;
        width: fit-content;
        padding: 12px 33px;
        margin: 0 auto;
        position: fixed;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
    }

    .cargo-nav-bar .my-cargo-link a:hover, 
    .cargo-nav-bar .my-cargo-link a:hover i {
        background-color: #f89c09;
        color: #ffffff !important;
        text-decoration: none;
    }

    .cargo-nav-bar .my-cargo-link a i {
        margin-right: 8px;
    }

    .cargo-nav-bar .my-cargo-link {
        padding-bottom: 12px;
    }

    .cargo-nav-bar .collapsible-menu  {
        position: relative;
        display: none;
        padding-top: 20px;
        max-height: 100vh;
        overflow-y: scroll;
        padding-bottom: 120px
    }

    .cargo-nav-bar .toggle-responsive-menu {
        display: block;
        cursor: pointer;
    }
    
    .cargo-nav-bar .collapsible-menu.visible  {
        position: relative;
        display: block;
        min-height: 100vh;
        padding-top: 20px;
    }

    .cargo-nav-bar .collapsible-menu::after  {
        content: "";
        position: fixed;
        z-index: -1;
        height: 100%;
        top: 68px;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        background-color: rgba(37, 45, 68, 0.98);
        backdrop-filter: blur(30px);
    }



    .cargo-nav-bar .cargo-menu-item.has-submenu:hover,
    .cargo-nav-bar .cargo-menu-item > a:hover,
    .cargo-nav-bar .cargo-menu-item > span:hover,
    .cargo-nav-bar .cargo-menu-item > a:hover > i,
    .cargo-nav-bar .cargo-menu-item > span:hover > i {
        color: #F8B709;
        text-decoration: none;
    }

    .cargo-nav-bar .submenu {
        color: #ffffff;
        list-style-type: none;
    }

    .cargo-nav-bar .cargo-submenu-item a:hover *,
    .cargo-nav-bar .cargo-submenu-item a:hover {
        color: #F8B709;
        text-decoration: none;
    }

    .cargo-nav-bar .cargo-menu-item.active > a,
    .cargo-nav-bar .cargo-menu-item.active > a > i,
    .cargo-nav-bar .cargo-menu-item.active > span,
    .cargo-nav-bar .cargo-menu-item.active > span > i {
        color: #F8B709
    }

    .cargo-nav-bar .cargo-submenu-item.active > a,
    .cargo-nav-bar .cargo-submenu-item.active > a > i,
    .cargo-nav-bar .cargo-submenu-item.active > span,
    .cargo-nav-bar .cargo-submenu-item.active > span > i {
        color: #F8B709
    }

    .cargo-nav-bar .cargo-menu-item.has-submenu .submenu {
        display: none;
    }
    
    .cargo-nav-bar .cargo-menu-item.has-submenu .submenu.open {
        display: flex;
        flex-direction: column;
        margin-left: 20px;
    }

    .cargo-nav-bar .cargo-menu-item.has-submenu.active.mobile-open .submenu {
        display: flex;
        flex-direction: column;
    }

    .cargo-nav-bar .cargo-menu-item .link-icon {
        margin-top: 5px;
        margin-right: 12px;
        display: inline;
    }

    .cargo-nav-bar .cargo-submenu-item .sub-link-icon {
        margin-top: 5px;
        margin-right: 12px;
        display: inline;
    }

    .cargo-nav-bar .cargo-submenu-item a {
        display: flex;
        padding-top: 4px;
        padding-bottom: 4px;
    }

    .cargo-nav-bar .cargo-submenu-item * {
        color: #ffffff
    }

    .cargo-nav-bar .cargo-menu-item > a,
    .cargo-nav-bar .cargo-menu-item > span {
        padding: 8px 20px;
        display: flex;
    }
}


.mc-nav-item{margin:0!important;
    padding-top:8px!important;
    padding-bottom:8px!important;
    border:none!important;
    border-radius:0px!important
}
.mc-nav-item:last-child{
    margin:0!important;
    padding-top:8px!important;
    padding-bottom:8px!important;
    border:none!important;
    border-bottom-left-radius:6px!important;
    border-bottom-right-radius:6px!important
}
.mc-nav-item:first-of-type{
    margin:0!important;
    padding-top:8px!important;
    padding-bottom:8px!important;
    border:none!important;
    border-top-left-radius:6px!important;
    border-top-right-radius:6px!important
}
.mc-nav-head{margin-bottom:0!important;
    border:none!important;
    border-bottom-left-radius:0px!important;
    border-bottom-right-radius:0px!important;
    border-bottom:2px solid #e0e5ee!important
}
.subnav {
    display:none
}
.subnav:has(.subitem.active) {
    display:block
}
.subnav.has-subitem-active {
    display:block
}
#right>div>div{
    min-height:auto
}
@media screen and (min-width:840px){
    #main{
        width:calc(70% - 10px)
    }
    #right {
        max-width:none!important;
        width:calc(30% - 10px)!important
    }
}
@media screen and (max-width:840px){
    #main { 
        width:100%!important
    }
    #right { 
        max-width:none!important;
        width:100%!important
    }
}