#mainmenu {background-color: #265ca6; height:100vh;}
#mainmenu .offcanvas-header {padding: 10px 50px 10px 15px;text-align: left; height:56px;background:#fff;border-bottom: 1px solid #eee;}
#mainmenu .offcanvas-header .btn-close {display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-content: center; align-content: center;-webkit-align-items: center; align-items: center; -webkit-box-pack:center; -ms-flex-pack:center; justify-content: center; position: absolute; top:6px; right:5px; width:45px;height:45px;padding: 0; margin: 0;}
#mainmenu h5.offcanvas-title {font-size: 18px; line-height: 22px; text-align: left; margin: 0; font-weight: 700; color:#29255D;}
#mainmenu h5.offcanvas-title > span {display: block;}
#mainmenu .offcanvas-body {}

#mainmenu .navbar-nav {position: relative;padding: 0 0 40px 0;}
#mainmenu .navbar-nav > li {position: relative; margin: 0px 0;border-bottom: solid 1px rgba(255,255,255,0.2);}
#mainmenu .navbar-nav > li a {font-size: 20px; display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-content: center; align-content: center;-webkit-align-items: center; align-items: center; position: relative; color:#fff; font-weight: 700; padding: 20px 0; text-decoration: none;}
#mainmenu .navbar-nav > li > a > i {position: absolute; color:#fff; line-height: 1;right:5px;}

html.webapp #mainmenu .navbar-nav > li.mobileapplink {display: none;}

#mainmenu .submenu {position: fixed; left: -100%; top:0; bottom:0; width:400px; max-width:100%; height:100%; z-index:1046;-webkit-transform:translate3d(0, 0, 0); transform:translate3d(0, 0, 0);transition:all 0.5s; background:#265ca6; border-right:1px solid rgba(0, 0, 0, 0.175);}
#mainmenu .submenu.subopen {left:0; -webkit-transform:translate3d(0px, 0, 0); transform: translate3d(0px, 0, 0);}
#mainmenu .submenu > div {padding:0px; position: relative; display: -webkit-box; display:-moz-box; display:-webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack:space-between; -ms-flex-pack:justify; justify-content: space-between; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; align-items:center; background:#fff; }
#mainmenu .submenu > div a.mp-back {padding: 10px 50px 10px 15px; position: relative; display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-content: center; align-content: center;-webkit-align-items: center; align-items: center; -webkit-box-pack:center; -ms-flex-pack:center; justify-content: flex-start; width:100%; height:56px;color:#29255D; font-size: 18px; line-height: 22px;}
#mainmenu .submenu > div a.mp-back i {position: relative; margin-right:15px; top:-1px; line-height: 1;}

#mainmenu .submenu > ul {position: relative;padding: 16px;}
#mainmenu .submenu > ul li {position: relative; margin: 0 0; border-bottom: solid 1px rgba(255,255,255,0.2);}
#mainmenu .submenu > ul li.nothing {padding:18px 0; line-height: 1; border-bottom: none;}
#mainmenu .submenu > ul li a {display: block; color:#fff; padding: 18px 0 18px 0; line-height: 1;}
#mainmenu .submenu > ul li a i {display: none;}

#searchmenu {background-color: #265ca6;}
#searchmenu .offcanvas-header {padding: 10px 50px 10px 15px;text-align: left; height:56px;background:#fff;border-bottom: 1px solid #eee;}
#searchmenu .offcanvas-header .btn-close {display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-content: center; align-content: center;-webkit-align-items: center; align-items: center; -webkit-box-pack:center; -ms-flex-pack:center; justify-content: center; position: absolute; top:6px; right:5px; width:45px;height:45px;padding: 0; margin: 0;}
#searchmenu h5.offcanvas-title {font-size: 18px; line-height: 22px; text-align: left; margin: 0; font-weight: 700; color:#29255D;}
#searchmenu h5.offcanvas-title > span {display: block;}
#searchmenu .offcanvas-body {position: relative;}
#searchmenu form {width:100%; margin-left:auto; margin-right:auto; position: relative;}
#searchmenu form .col-12 {padding: 0;position: relative;}
#searchmenu form input {height:50px;border-radius: 25px; box-shadow: 0 8px 18px -5px #013d84; border:none; position: relative;}
#searchmenu form button.btn {height:100%; border:none; background-color:transparent; color:#444;border-radius: 0; padding: 0 15px; height:50px; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; align-items:center;font-weight: 700; position: absolute;right:5px;top:0; z-index: 2;}
#searchmenu form button.btn i {position: relative; font-size: 20px; }
#searchmenu form button.btn span {display: none;}


@media (min-width: 768px) {
    #searchmenu .offcanvas-body {padding-top:30px;}
}

@media (max-width: 400px) {
    #mainmenu {box-shadow: none; border-right:none;}
    #mainmenu h5.offcanvas-title > span {display: none;}
    #mainmenu .navbar-nav > li a {font-size:18px;padding: 17px 0;}
    
    #mainmenu .submenu {border-right:none;}
    body.backdrop .offcanvas-backdrop.show {opacity: 0;}
}

@media (max-width: 360px) {
    #mainmenu h5.offcanvas-title {font-size: 16px;}
    #mainmenu .submenu > div a.mp-back {font-size: 16px;}
    
    #searchmenu form input {height:48px;}
    #searchmenu form button.btn {height:48px;}
}

@media (max-height: 450px) {
    #searchmenu {height:50vh}
}

@media (max-height: 350px) {
    #searchmenu {height:80vh}
}