@media only screen and (max-width: 991px) {
.container { max-width: 96%; width: 100%; }  
.custommenu-container #nav li > ul { display: none; }
#nav .active, #nav .inactive { min-width: auto; }
}
@media only screen and (max-width: 767px) {
#logo img { max-height: 35px; }
.navbar-toggle { display: flex; }
.closesidebarbutton { display: flex; position: absolute; right: -200px; height: 30px; width: 25px; align-items: center; justify-content: center; border: 0; top: 10px; background: #FFF1ED; box-shadow: 0px 1px 5px #e8e8e8; color: #DB3A03; border: 1px solid #FFD5C6; }
.header-logo { display: flex; align-items: center; }
/* navbar */
.custommenu-container #nav { position: fixed; opacity: 0; visibility: hidden; left: -150px; transition: all 300ms ease; top: 0; height: 100vh; background: #5C728A; z-index: 99; right: inherit !important; display: flex; flex-direction: column; align-items: flex-start; } 
.custommenu-container #nav.main-menu.show { opacity: 1; visibility: visible; width: 150px; left: 0; padding:15px 0 !important; right: inherit !important; }
.custommenu-container #nav li { padding: 5px 15px; border: 0; width: 100%; text-align: left; margin: 0; box-sizing: border-box; height: auto; border-radius: 0; }
.custommenu-container #nav li.active { background-color: #fff; box-shadow: none; border: 0; border-radius: 5px; width: calc(100% - 20px); box-sizing: border-box; }
.custommenu-container #nav li.active a { color: #004a80; }
.custommenu-container #nav li.inactive:hover { background-color: #fff; box-shadow: none; border: 0; border-radius: 5px;  width: calc(100% - 20px); box-sizing: border-box; }
.custommenu-container #nav li a { color: #fff; padding: 0; }

.submenu-container { position: fixed; opacity: 0; visibility: hidden; left: -300px; transition: all 300ms ease; top: 0; height: 100vh; z-index: 99; background: #516473; right: inherit !important; }
.custommenu-container #nav.main-menu.show + .submenu-container { opacity: 1; visibility: visible; width: 150px; left: 150px; right: inherit !important; }

.custommenu-container #nav.main-menu.show + .submenu-container #sub_nav { display: flex; flex-direction: column; align-items: flex-start; padding: 15px 10px; height: 100vh; }
.custommenu-container #nav.main-menu.show + .submenu-container #sub_nav > li + li > a { margin-left: 0; color: #000; }
.submenu-container #sub_nav a.active, 
.submenu-container #sub_nav li.active > a, 
.submenu-container #sub_nav li.child.active > a #customQ_nav .jb-overflowmenu-menu-primary li.item > a.active { color: #000; }
.submenu-container #sub_nav > li { padding: 5px 0; line-height: inherit; }
.submenu-container .container { max-width: 100%; }
.basic-search-filter .filter-row .form-group { width: 38%; }
.statistics-container .tabs li { min-width: auto; }
/* dashboard agent directory page*/
.agent-directory-filter .form-group { display: flex; width: 30%; }
}
@media only screen and (max-width: 575px) { 
.ui-datepicker-multi-2 .ui-datepicker-group { width: 100%; }
.ui-widget.ui-widget-content { border: 1px solid #ccc; width: calc(100% - 50px) !important; }
/* dashboard agent directory page*/
.agent-directory-filter .form-group { display: flex; width: 35%; }
}
@media only screen and (max-width: 479px) { 
#loginBox { max-width: calc(300px - 0px); }
.basic-search-filter .filter-row { flex-direction: column; }
.basic-search-filter .form-group.report-timeframe-content { margin-bottom: 8px; }
.basic-search-filter .filter-row .form-group { width: 100%; }
.basic-search-filter .filter-row .form-group .form-control { max-width: 100%; }
.basic-search-filter .filter-row .icon-question-sign { top: inherit; position: absolute; bottom: 10px; left: 50px; }
/* dashboard agent directory page*/
.agent-directory-filter .form-group { width: 48%; }
.basic-search-filter .default-button { margin: 15px 0 0 0; }
}
@media only screen and (max-width: 418px) {
/* dashboard agent directory page*/
.agent-directory-filter .form-group { width: 100%; }
.agent-directory-filter .form-control { max-width: 100%; }
.agent-directory-filter .form-group #did { margin-top: 15px; }
}