#mainmenu {background:#222A38; color:#fff; box-shadow: 0px 0px 100px rgba(0, 0, 0, .75);}

#mainmenu .offcanvas-header {padding: 0.25rem 0.5rem;}
#mainmenu .offcanvas-header .btn-close {background:none; color:#fff; opacity: 1; font-size: 16px;padding: 0; height:45px;width:45px;}
#mainmenu h5.offcanvas-title {display: none;}
#mainmenu .offcanvas-header form {width:90%;position: relative;}
#mainmenu .offcanvas-header form input {border:none; background:none; color:#fff; font-size: 14px; font-weight: 600; line-height: 1; height:45px; padding: 0 0 0 35px;}
#mainmenu .offcanvas-header form button {position: absolute;border:none; background:none; width:35px; height: 100%; font-size: 14px; color:#fff;}

#mainmenu .offcanvas-body {border-top:solid 1px #ffffff; padding: 0;}

#mainmenu .navbar-nav {background:#262a3d;}
#mainmenu .navbar-nav > li {position: relative; margin: 0 15px; border-bottom: solid 1px #ffffff;}
#mainmenu .navbar-nav > li:first-child {border-top:none;}
#mainmenu .navbar-nav > li a {color:#fff; padding: 18px 20px 18px 0; font-weight: 600; font-size: 16px; line-height: 1;}
#mainmenu .navbar-nav > li a i {position: absolute; right: 0; font-size: 14px; height:100%; top:0; line-height: 1; display: -webkit-box; display:-moz-box; display:-webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack:center; -ms-flex-pack:center; justify-content: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; align-items:center; text-align: center; width:20px;}

#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:#222A38; 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:0.25rem 0 0.25rem 0.5rem; 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:#191D26;}
#mainmenu .submenu > div a {position: relative; padding-left: 30px; font-size: 15px; width:80%;}
#mainmenu .submenu > div a i {position: absolute; left: 5px;}
#mainmenu .submenu > div button.btn-close {background:none; color:#fff; opacity: 1; font-size: 15px;padding: 0; height:45px;width:45px;}
    
#mainmenu .submenu > ul {position: relative; border-top:1px solid #fff;}
#mainmenu .submenu > ul li {position: relative; margin: 0 15px; border-bottom: solid 1px #ffffff;}
#mainmenu .submenu > ul li.nothing {padding:18px 0; font-weight: 600; font-size: 16px; line-height: 1; border-bottom: none;}
#mainmenu .submenu > ul li a {display: block; color:#fff; padding: 18px 0 18px 0; font-weight: 600; font-size: 16px; line-height: 1;}
#mainmenu .submenu > ul li a i {display: none;}

#mainmenu ::-webkit-input-placeholder {color: #fff; color: rgba(255, 255, 255,0.75);}
#mainmenu :-moz-placeholder {color: #fff; color: rgba(255, 255, 255,0.75);}
#mainmenu ::-moz-placeholder {color: #fff; color: rgba(255, 255, 255,0.75);}
#mainmenu :-ms-input-placeholder {color: #fff; color: rgba(255, 255, 255,0.75);}
#mainmenu .placeholder {color: #fff; color: rgba(255, 255, 255,0.75);}

@media (max-width: 400px) {
    #mainmenu {box-shadow: none;}
    .offcanvas-backdrop.show {opacity: 0;}
}