/* Created by: @Frank_Alfred DEMO URL: http://gohooey.com/demo/sidebar/hoedemo.html /********** 1. IMPORTS **********/ /********************************/ @import url('hoe-horizontal-navigation.css'); /* ********** Default Theme Style************* */ #hoeapp-wrapper a:focus { outline: none; } #hoeapp-wrapper { /* background: #eef1f6; */ /* color: #7e7e7e; */ /* margin: 0; */ /* padding: 0; */ /* width: 100%; */ /* height: 100%; */ /* position: relative; */ /* font-family: "lato", sans-serif; */ /* direction: ltr; */ line-height: 20px; font-size: 13px; /* overflow-x: hidden; */ /* width: 100%; */ /* margin: 0; */ /* padding: 0; */ } /************** 3. Theme Header Style Start Here ********************/ #hoe-header { background: #fff none repeat scroll 0 0; margin: 0; padding: 0; width: 100%; z-index: 10; position: fixed; box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.2); } .hoe-left-header { background: #474747; font-size: 16px; font-weight: 600; // height: 85px; position: absolute; float: left; text-align: center; width: 280px; z-index: 999; } .hoe-left-header a { color: #FFF; } .hoe-left-header a:hover, .hoe-left-header a:focus { color: #FFF; text-decoration: none; } .hoe-left-header a i { color: #003c70; font-size: 22px; position: relative; top: 3px; } .hoe-right-header { background: #fff none repeat scroll 0 0; z-index: 101; margin-left: 280px; position: relative; } .hoe-right-header > ul { display: block; margin: 0; padding: 0; } .hoe-right-header li { display: inline; float: left; } .hoe-right-header > li a { color: #7e7e7e; padding: 17px 15px; } .right-navbar { float: right; padding-right: 7px !important; } .right-navbar li a i { font-size: 14px; } .left-navbar > li:first-child { padding-left: 50px; } .hoe-sidebar-toggle a:after { background: transparent; border: 0px solid #efefef; content: "\f0c9"; font-family: FontAwesome; font-size: 20px; line-height: 36px; padding: 0px 17px; position: absolute; color: #7e7e7e; z-index: 1000; // height: 85px; } .hoe-sidebar-toggle a:hover:after { background: #efefef; } .hoe-left-header > .hoe-sidebar-toggle > a { display: none } #hoe-header .hoe-left-header[hoe-position-type="relative"] { position: relative; } #hoe-header .hoe-left-header[hoe-position-type="absolute"] { position: absolute; } #hoe-header .hoe-left-header[hoe-position-type="fixed"] { position: fixed; } #hoe-header .hoe-right-header[hoe-position-type="relative"] { position: relative; } #hoe-header .hoe-right-header[hoe-position-type="absolute"] { position: absolute; } #hoe-header .hoe-right-header[hoe-position-type="fixed"] { padding-right: 230px; position: fixed; width: 100%; } /*******************************Theme Header Style Close Here ***********************************/ /******************************* 4. main container Style start Here ***********************************/ #hoeapp-container { margin: 0; padding: 0; width: 100%; height: 100%; position:relative; clear:both; } /************************* 4.1 Theme Left Panel Style Start Here *********************************/ #hoe-left-panel { background: #474747 none repeat scroll 0 0; color: #7e7e7e; width: 280px; top: 0; position:absolute; float:left; min-height:100%; z-index: 100; box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.2); } #hoe-left-panel .profile-box { border-bottom: 1px solid #efefef; min-height: 50px; padding: 5px 15px; position: relative; } #hoe-left-panel .profile-box .media a img { width: 40px; height: 40px; } #hoe-left-panel .profile-box .media { position: relative; } #hoe-left-panel .profile-box .media a { margin-top: 2px; } #hoe-left-panel .profile-box .media a > img { border: 1px solid #efefef; } #hoe-left-panel ul { margin: 0; padding: 0; } #hoe-left-panel .nav-level { padding: 30px 20px; font-weight: bold; color: #e2e2e2; text-transform: uppercase; } #hoe-left-panel .panel-list > li.hoe-has-menu > ul.hoe-sub-menu { list-style: none;} #hoe-left-panel .nav-level:first-child { border-top: 0px solid #efefef; } #hoe-left-panel .panel-list > li > a { background: #474747; color: #bebebe; display: block; font-size: 14px; /* font-weight: 500; */ padding: 15px 15px; position: relative; padding-left: 35px; } #hoe-left-panel .panel-list > li:last-child > a { /* border-bottom: 1px solid #efefef; */ } #hoe-left-panel .panel-list > li:first-child > a { border-top: 0px solid #efefef; } #hoe-left-panel .panel-list > li > a:hover, #hoe-left-panel .panel-list > li > a:focus { color: #eb3263; background: #404040; } #hoe-left-panel .panel-list > li.active > a { // background: #007ec5; color: #42a5f5; // background: #404040; } #hoe-left-panel .panel-list > li > a > i { font-size: 24px; padding-right: 7px; color: #BEBEBE; line-height: 20px; } #hoe-left-panel .panel-list > li > a span.menu-text { display: inline-block; } #hoe-left-panel .panel-list > li.hoe-has-menu > a:after { font-family: FontAwesome; content: "\f107"; font-size: 15px; position: relative; float: right; } #hoe-left-panel .panel-list > li.hoe-has-menu.opened > a { background: #f1f1f1; color: #000; } #hoe-left-panel .panel-list > li.hoe-has-menu.opened > a:after { font-family: FontAwesome; content: "\f106" !important; font-size: 15px; float: right; position: relative; } #hoe-left-panel .panel-list > li.hoe-has-menu li.hoe-has-menu > a:after { font-family: FontAwesome; content: "\f103"; font-size: 15px; position: relative; float: right; } #hoe-left-panel .panel-list > li.hoe-has-menu li.hoe-has-menu.opened > a:after { font-family: FontAwesome; content: "\f102"; font-size: 15px; position: relative; float: right; } #hoe-left-panel .panel-list ul { background: #fafafa; box-shadow: -1px 2px 3px 0px rgba(0, 0, 0, 0.2); } #hoe-left-panel .panel-list ul.hoe-sub-menu li > a { background: transparent; border-top: 1px solid #efefef; color: #7e7e7e; display: block; font-size: 13px; font-weight: 500; padding: 10px 10px; position: relative; } #hoe-left-panel .panel-list > li.hoe-has-menu > ul.hoe-sub-menu { display: none; } #hoe-left-panel .panel-list li.hoe-has-menu > ul.hoe-sub-menu li > a:hover, #hoe-left-panel .panel-list li.hoe-has-menu > ul.hoe-sub-menu li > a:focus { text-decoration: none; color: #000; background: #f1f1f1; } #hoe-left-panel .panel-list > li.hoe-has-menu > ul ul { display: none; } #hoe-left-panel .panel-list > li.hoe-has-menu.opened > ul { display: block; } #hoe-left-panel .panel-list > li.hoe-has-menu.opened > ul > li.hoe-has-menu.opened > ul { display: block; } #hoe-left-panel .panel-list > li.hoe-has-menu.opened > ul > li.hoe-has-menu.opened > ul > li.hoe-has-menu.opened > ul { display: block; } #hoe-left-panel .panel-list > li.hoe-has-menu.active > ul { display: block; } #hoe-left-panel .panel-list > li.hoe-has-menu.active > ul > li.hoe-has-menu.active > ul { display: block; } #hoe-left-panel .panel-list > li.hoe-has-menu.active > ul > li.hoe-has-menu.active > ul > li.hoe-has-menu.active > ul { display: block; } #hoe-left-panel .panel-list > li.hoe-has-menu > ul > li > a span.menu-text { padding-left: 15px; position: relative; } #hoe-left-panel .panel-list > li.hoe-has-menu > ul.hoe-sub-menu { list-style: outside none none; } #hoe-left-panel .panel-list > li.hoe-has-menu li.hoe-has-menu > ul.hoe-sub-menu { list-style: outside none none; } #hoe-left-panel .panel-list > li.hoe-has-menu > ul.hoe-sub-menu { list-style: outside none none; } #hoe-left-panel .panel-list > li.hoe-has-menu > ul > li.hoe-has-menu > ul > li > a span.menu-text { padding-left: 25px; position: relative; } #hoe-left-panel .panel-list > li.hoe-has-menu > ul > li.hoe-has-menu > ul > li > ul > li > a span.menu-text { padding-left: 35px; position: relative; } #hoe-left-panel .panel-list > li.hoe-has-menu > ul > li.hoe-has-menu > ul > li > ul > li > ul > li > a span.menu-text { padding-left: 40px; position: relative; } #hoe-left-panel .panel-list > li.hoe-has-menu > ul.hoe-sub-menu > li > a span.menu-text:before { font-family: FontAwesome; content: "\f0da"; font-size: 14px; position: relative; float: left; left: 4px; } #hoe-left-panel .panel-list > li.hoe-has-menu > ul.hoe-sub-menu > li.hoe-has-menu > ul.hoe-sub-menu > li > a span.menu-text:before { font-family: FontAwesome; content: "\f0da"; font-size: 12px; position: relative; float: left; left: 15px; } #hoe-left-panel .panel-list > li.hoe-has-menu > ul.hoe-sub-menu > li.hoe-has-menu > ul.hoe-sub-menu > li > a span.menu-text:before { font-family: FontAwesome; content: "\f0da"; font-size: 14px; position: relative; float: left; left: 18px; } #hoe-left-panel .panel-list > li.hoe-has-menu > ul.hoe-sub-menu > li.hoe-has-menu > ul.hoe-sub-menu > li.hoe-has-menu > ul.hoe-sub-menu > li > a span.menu-text:before { font-family: FontAwesome; content: "\f0da"; font-size: 12px; position: relative; float: left; left: 30px; } #hoe-left-panel .panel-list li.active > a .selected { border-bottom: 7px solid transparent; border-right: 7px solid #7e7e7e; border-top: 7px solid transparent; display: inline-block; height: 0; position: absolute; right: 0; top: 22px; vertical-align: middle; width: 0; } #hoe-left-panel .panel-list li.hoe-has-menu.active > a .selected { display: none; } #hoe-left-panel .panel-list li a .label { border-radius: 0.25em; color: #7e7e7e; display: inline; font-size: 75%; font-weight: 700; line-height: 1; padding: 4px 3px; position: absolute; right: 10px; text-align: center; vertical-align: baseline; white-space: nowrap; } .sul { background-color: #ebebeb; } #hoe-left-panel[hoe-position-type="relative"] { position: relative; } #hoe-left-panel[hoe-position-type="absolute"] { position: fixed; margin-top: 85px; } #hoe-left-panel[hoe-position-type="fixed"] { position: fixed; top:50px; } /********************************** Theme Left Panel Style Close Here ******************************/ /*************************** 4.2 Theme Content Section Style Start Here ********************************/ #main-content { margin-left: 280px; position:relative; } /******************* Theme Content Section Style Close Here *******************************/ /****************** 4.3 Minimized Left Panel Style Start Here *********************************/ #hoe-header.hoe-minimized-lpanel > .hoe-right-header[hoe-position-type="fixed"] { margin-left: 50px; padding-right: 50px; } #hoe-header.hoe-minimized-lpanel > .hoe-left-header { width: 70px; } #hoe-header.hoe-minimized-lpanel > .hoe-left-header > a > span { display: none; } #hoe-header.hoe-minimized-lpanel > .hoe-right-header { margin-left: 70px; padding-right:0px; } .hoe-minimized-lpanel #hoe-left-panel { width: 70px; } .hoe-minimized-lpanel #hoe-left-panel .profile-box { border-bottom: 0px solid #efefef; } .hoe-minimized-lpanel #hoe-left-panel .media-body { display: none; } .hoe-minimized-lpanel #hoe-left-panel .profile-box { padding: 5px; } .hoe-minimized-lpanel #hoe-left-panel .nav-level { display: none; } .hoe-minimized-lpanel #hoe-left-panel .panel-list > li > a span.menu-text { display: none; } .hoe-minimized-lpanel #hoe-left-panel .panel-list > li.hoe-has-menu > a:after { display: none; } .hoe-minimized-lpanel #hoe-left-panel .panel-list > li > a > i { display: inline; font-size: 25px; padding-left: 6px; padding-right: 6px; color: #BEBEBE; } .hoe-minimized-lpanel #hoe-left-panel .panel-list > li:hover > a, .hoe-minimized-lpanel #hoe-left-panel .panel-list > li:focus > a { display: block; position: relative; width: 270px; margin-bottom: -1px; border-radius: 0px 4px 4px 0px; } .hoe-minimized-lpanel #hoe-left-panel .panel-list > li:hover > a, .hoe-minimized-lpanel #hoe-left-panel .panel-list > li:focus > a { border-radius: 0px 4px 4px 0px; } .hoe-minimized-lpanel #hoe-left-panel .panel-list > li.hoe-has-menu:hover > a, .hoe-minimized-lpanel #hoe-left-panel .panel-list > li.hoe-has-menu:focus > a { border-radius: 0px 4px 0px 0px; background: #f1f1f1; } .hoe-minimized-lpanel #hoe-left-panel .panel-list > li:hover > a span.menu-text, .hoe-minimized-lpanel #hoe-left-panel .panel-list > li:focus > a span.menu-text { display: inline-block; position: absolute; left: 76px; width: 100%; } .hoe-minimized-lpanel #hoe-left-panel .panel-list ul.hoe-sub-menu li { list-style: none; } .hoe-minimized-lpanel #hoe-left-panel .panel-list > li.hoe-has-menu > ul.hoe-sub-menu { /* display: block !important; */ position: absolute; left: 70px; width: 180px; } .hoe-minimized-lpanel #hoe-left-panel .panel-list > li.hoe-has-menu:hover > ul.hoe-sub-menu, .hoe-minimized-lpanel #hoe-left-panel .panel-list > li.hoe-has-menu:focus > ul.hoe-sub-menu { display: block !important; border-right: 1px solid #efefef; width: 160px; left: 70px; } .hoe-minimized-lpanel #hoe-left-panel .panel-list > li.hoe-has-menu > ul.hoe-sub-menu ul.hoe-sub-menu { display: none !important; position: absolute; width: 180px; left: 0; } .hoe-minimized-lpanel #hoe-left-panel .panel-list > li.hoe-has-menu:hover > ul.hoe-sub-menu ul.hoe-sub-menu, .hoe-minimized-lpanel #hoe-left-panel .panel-list > li.hoe-has-menu:focus > ul.hoe-sub-menu ul.hoe-sub-menu { display: none !important; left: 0px; } .hoe-minimized-lpanel #hoe-left-panel .panel-list > li.hoe-has-menu > ul.hoe-sub-menu > li.hoe-has-menu:hover > ul.hoe-sub-menu, .hoe-minimized-lpanel #hoe-left-panel .panel-list > li.hoe-has-menu > ul.hoe-sub-menu > li.hoe-has-menu:focus > ul.hoe-sub-menu { display: block !important; position: relative; left: 0px; } .hoe-minimized-lpanel #hoe-left-panel .panel-list > li.hoe-has-menu > ul.hoe-sub-menu > li.hoe-has-menu > ul.hoe-sub-menu > li.hoe-has-menu:hover > ul.hoe-sub-menu, .hoe-minimized-lpanel #hoe-left-panel .panel-list > li.hoe-has-menu > ul.hoe-sub-menu > li.hoe-has-menu > ul.hoe-sub-menu > li.hoe-has-menu:focus > ul.hoe-sub-menu { display: block !important; position: relative; left: 0px; } .hoe-minimized-lpanel #hoe-left-panel .panel-list > li.hoe-has-menu li.hoe-has-menu > a:after { display: none; } .hoe-minimized-lpanel #hoe-left-panel .panel-list > li.hoe-has-menu li.hoe-has-menu > a:after { font-family: FontAwesome; content: "\f103"; font-size: 15px; position: relative; float: right; display: block; } .hoe-minimized-lpanel #hoe-left-panel .panel-list > li.hoe-has-menu li.hoe-has-menu:hover > a:after, .hoe-minimized-lpanel #hoe-left-panel .panel-list > li.hoe-has-menu li.hoe-has-menu:focus > a:after { font-family: FontAwesome; content: "\f102"; font-size: 15px; position: relative; float: right; display: block; } .hoe-minimized-lpanel #hoe-left-panel .panel-list li.hoe-has-menu.active > li.active a .selected { display: block; } .hoe-minimized-lpanel #hoe-left-panel .panel-list > li.active:hover > a .selected, .hoe-minimized-lpanel #hoe-left-panel .panel-list > li.active:focus > a .selected { display: none; } .hoe-minimized-lpanel #hoe-left-panel .panel-list > li.hoe-has-menu > ul.hoe-sub-menu > li.hoe-has-menu > ul.hoe-sub-menu li > a span.menu-text { padding-left: 15px; position: relative; } .hoe-minimized-lpanel #hoe-left-panel .panel-list > li.hoe-has-menu > ul.hoe-sub-menu > li.hoe-has-menu > ul.hoe-sub-menu > li > a span.menu-text:before { left: 4px; } .hoe-minimized-lpanel #hoe-left-panel .panel-list > li.hoe-has-menu > ul.hoe-sub-menu > li.hoe-has-menu > ul.hoe-sub-menu > li.hoe-has-menu > ul.hoe-sub-menu > li > a span.menu-text:before { left: 4px; } .hoe-minimized-lpanel #hoe-left-panel .panel-list li .label { display: none; } .hoe-minimized-lpanel #hoe-left-panel .panel-list li:hover a .label { display: block; position: absolute; right: 5px; top: 10px; } .hoe-minimized-lpanel #hoe-left-panel .panel-list > li.hoe-has-menu.opened > a { background: #f1f1f1; color: #000; } .hoe-minimized-lpanel #main-content { margin-left: 50px; } /****************** Minimized Left Panel Style Start Here *********************************/ /******************* 4.4 Theme Style for Phone start here***************************************/ #hoeapp-wrapper[hoe-device-type="phone"].hoe-hide-lpanel #hoe-left-panel { display: none; } #hoeapp-wrapper[hoe-device-type="phone"] #hoe-header{ position:none; height:100px; } #hoeapp-wrapper[hoe-device-type="phone"] .hoe-left-header { width: 100%; float: none; } #hoeapp-wrapper[hoe-device-type="phone"] #hoe-left-panel[hoe-position-type="fixed"] { top: 100px; } #hoeapp-wrapper[hoe-device-type="phone"] .hoe-right-header { width: 100%; padding-left: 0px !important; position: relative; z-index: 999; top: 50px; } #hoeapp-wrapper[hoe-device-type="phone"].hoe-hide-lpanel #hoe-left-panel {display:none;} #hoeapp-wrapper[hoe-device-type="phone"].hoe-hide-lpanel .hoe-right-header { margin-left: 0px; } #hoeapp-wrapper[hoe-device-type="phone"] .hoe-right-header { margin-left: 0px; } #hoeapp-wrapper[hoe-device-type="phone"] #hoe-left-panel { display: block; z-index: 1024; } #hoeapp-wrapper[hoe-device-type="phone"] #main-content { margin-left: 0px; } #hoeapp-wrapper[hoe-device-type="phone"] .hoe-left-header > .hoe-sidebar-toggle > a { display: block; } #hoeapp-wrapper[hoe-device-type="phone"] #hoe-header > .hoe-right-header .hoe-sidebar-toggle a:after { display: none !important; } #hoeapp-wrapper[hoe-device-type="desktop"] .hoe-left-header .hoe-sidebar-toggle a:after { display: none !important; } #hoeapp-wrapper[hoe-device-type="tablet"] .hoe-left-header .hoe-sidebar-toggle a:after { display: none !important; } #hoeapp-wrapper[hoe-device-type="phone"] .hoe-left-header .hoe-sidebar-toggle a:after { background: transparent; border-radius: 4px; content: "\f0c9"; font-family: FontAwesome; font-size: 16px; left: 5px; line-height: 39px; padding: 1px 13px; position: absolute; top: 3px; z-index: 1000; display: block !important; color: #003c70; border: 0px solid #003c70; font-size: 14px; } #hoeapp-wrapper[hoe-device-type="phone"].hoe-hide-lpanel #hoeapp-container[hoe-lpanel-effect="shrink"] #main-content { margin-left: 0px; } #hoeapp-wrapper[hoe-device-type="phone"] #hoeapp-container[hoe-lpanel-effect="shrink"] #main-content { margin-left: 230px; } #hoeapp-wrapper[hoe-device-type="phone"].hoe-hide-lpanel #hoeapp-container[hoe-lpanel-effect="overlay"] #main-content { margin-left: 0px; } #hoeapp-wrapper[hoe-device-type="phone"] #hoeapp-container[hoe-lpanel-effect="overlay"] #main-content { margin-left: 0px; } #hoeapp-wrapper[hoe-device-type="phone"].hoe-hide-lpanel #hoeapp-container[hoe-lpanel-effect="push"] #main-content { margin-left: 0px; margin-right: 0px; } #hoeapp-wrapper[hoe-device-type="phone"] #hoeapp-container[hoe-lpanel-effect="push"] #main-content { margin-left: 230px; margin-right:-230px; } #hoeapp-wrapper[hoe-device-type="phone"].hoe-hide-lpanel #hoe-header[hoe-lpanel-effect="shrink"] .hoe-right-header[hoe-position-type="relative"] { margin-left: 0px; padding-right: 0; } #hoeapp-wrapper[hoe-device-type="phone"].hoe-hide-lpanel #hoe-header[hoe-lpanel-effect="shrink"] .hoe-right-header[hoe-position-type="fixed"] { margin-left: 0px; padding-right: 0; } #hoeapp-wrapper[hoe-device-type="phone"] #hoe-header[hoe-lpanel-effect="shrink"] .hoe-right-header[hoe-position-type="relative"] { margin-left: 0px; padding-right: 0; } #hoeapp-wrapper[hoe-device-type="phone"] #hoe-header[hoe-lpanel-effect="shrink"] .hoe-right-header[hoe-position-type="fixed"] { margin-left: 0px; padding-right: 0; } #hoeapp-wrapper[hoe-device-type="phone"].hoe-hide-lpanel #hoe-header[hoe-lpanel-effect="overlay"] .hoe-right-header[hoe-position-type="relative"] { margin-left: 0px; padding-right: 0; } #hoeapp-wrapper[hoe-device-type="phone"].hoe-hide-lpanel #hoe-header[hoe-lpanel-effect="overlay"] .hoe-right-header[hoe-position-type="fixed"] { margin-left: 0px; padding-right: 0; } #hoeapp-wrapper[hoe-device-type="phone"]#hoe-header[hoe-lpanel-effect="overlay"] .hoe-right-header[hoe-position-type="relative"] { margin-left: 0px; padding-right: 0; } #hoeapp-wrapper[hoe-device-type="phone"] #hoe-header[hoe-lpanel-effect="overlay"] .hoe-right-header[hoe-position-type="fixed"] { margin-left: 0px; padding-right: 0; } #hoeapp-wrapper[hoe-device-type="phone"].hoe-hide-lpanel #hoe-header[hoe-lpanel-effect="push"] .hoe-right-header[hoe-position-type="relative"] { margin-left: 0px; padding-right: 0; } #hoeapp-wrapper[hoe-device-type="phone"].hoe-hide-lpanel #hoe-header[hoe-lpanel-effect="push"] .hoe-right-header[hoe-position-type="fixed"] { margin-left: 0px; padding-right: 0; } #hoeapp-wrapper[hoe-device-type="phone"] #hoe-header[hoe-lpanel-effect="push"] .hoe-right-header[hoe-position-type="relative"] { margin-left: 0px; padding-right: 0; } #hoeapp-wrapper[hoe-device-type="phone"] #hoe-header[hoe-lpanel-effect="push"] .hoe-right-header[hoe-position-type="fixed"] { margin-left: 0px; padding-right: 0; } /****************************** Theme Style for Phone Close here **********************************/ /*******************************main container Style Close Here ***********************************/ /****************************** Default Theme Style Close ******************************************/ /*Boxed Theme Layout Style Start*/ body[theme-layout="box-layout"] #hoeapp-wrapper[hoe-device-type="desktop"] { width:96%; margin:0 auto; } /*Boxed Theme Layout Style Close*/ // The following line was not getting compiled with sass. hence I modified something // body[theme-layout="box-layout" hoe-nav-placement="right"] #hoeapp-wrapper[hoe-device-type="desktop"]{ /*Theme Background Color in Start */ body[theme-layout="box-layout"] #hoeapp-wrapper[hoe-device-type="desktop"]{ margin:0 auto; } /*Theme Background Color in Close */ .hoe-minimized-lpanel #hoe-left-panel li a { padding-left: 20px; padding-top: 18px; padding-bottom: 10px; } .res-logo-sidebar{display: none;} #hoe-header.hoe-minimized-lpanel > .hoe-left-header > a > .res-logo-sidebar{ display: block; margin-top: 7px; } .sidebar-scroll{ overflow-y: scroll; max-height: 86vh !important; padding-bottom: 30px !important; } .hoe-minimized-lpanel #hoe-left-panel .panel-list.sidebar-scroll { overflow-y: inherit; max-height: 100%; margin-top:-15px; }