body { padding-bottom: 30px!important; position: relative!important; min-height: 100%!important; } a { transition: background 0.2s, color 0.2s!important; } a:hover, a:focus { text-decoration: none!important; } #wrapper { padding-left: 0!important; transition: all 0.5s ease!important; position: relative!important; } #sidebar-wrapper { z-index: 1000!important; position: fixed!important; left: 250px!important; width: 0!important; height: 100%!important; margin-left: -250px!important; overflow-y: auto!important; overflow-x: hidden!important; background: #222!important; transition: all 0.5s ease!important; } #wrapper.toggled #sidebar-wrapper { width: 250px!important; } .sidebar-brand { position: absolute!important; top: 0!important; width: 250px!important; text-align: center!important; padding: 20px 0!important; } .sidebar-brand h2 { margin: 0!important; font-weight: 600!important; font-size: 24px!important; color: #fff!important; } .sidebar-nav { position: absolute!important; top: 75px!important; width: 250px!important; margin: 0!important; padding: 0!important; list-style: none!important; } .sidebar-nav > li { text-indent: 10px!important; line-height: 42px!important; } .sidebar-nav > li a { display: block!important; text-decoration: none!important; color: #757575!important; font-weight: 600!important; font-size: 18px!important; } .sidebar-nav > li > a:hover, .sidebar-nav > li.active > a { text-decoration: none!important; color: #fff!important; background: #F8BE12!important; } .sidebar-nav > li > a i.fa { font-size: 24px!important; width: 60px!important; } #navbar-wrapper { width: 100%!important; position: absolute!important; z-index: 2!important; } #wrapper.toggled #navbar-wrapper { position: absolute!important; margin-right: -250px!important; } #navbar-wrapper .navbar { border-width: 0 0 0 0!important; background-color: #eee!important; font-size: 24px!important; margin-bottom: 0!important; border-radius: 0!important; } #navbar-wrapper .navbar a { color: #757575!important; } #navbar-wrapper .navbar a:hover { color: #F8BE12!important; } #content-wrapper { width: 100%!important; position: absolute!important; padding: 15px!important; top: 100px!important; } #wrapper.toggled #content-wrapper { position: absolute!important; margin-right: -250px!important; } @media (min-width: 992px) { #wrapper { padding-left: 250px!important; } #wrapper.toggled { padding-left: 60px!important; } #sidebar-wrapper { width: 250px!important; } #wrapper.toggled #sidebar-wrapper { width: 60px!important; } #wrapper.toggled #navbar-wrapper { position: absolute!important; margin-right: -190px!important; } #wrapper.toggled #content-wrapper { position: absolute!important; margin-right: -190px!important; } #navbar-wrapper { position: relative!important; } #wrapper.toggled { padding-left: 60px!important; } #content-wrapper { position: relative!important; top: 0!important; } #wrapper.toggled #navbar-wrapper, #wrapper.toggled #content-wrapper { position: relative!important; margin-right: 60px!important; } } @media (min-width: 768px) and (max-width: 991px) { #wrapper { padding-left: 60px!important; } #sidebar-wrapper { width: 60px!important; } #wrapper.toggled #navbar-wrapper { position: absolute!important; margin-right: -250px!important; } #wrapper.toggled #content-wrapper { position: absolute!important; margin-right: -250px!important; } #navbar-wrapper { position: relative!important; } #wrapper.toggled { padding-left: 250px!important; } #content-wrapper { position: relative!important; top: 0!important; } #wrapper.toggled #navbar-wrapper, #wrapper.toggled #content-wrapper { position: relative!important; margin-right: 250px!important; } } @media (max-width: 767px) { #wrapper { padding-left: 0!important; } #sidebar-wrapper { width: 0!important; } #wrapper.toggled #sidebar-wrapper { width: 250px!important; } #wrapper.toggled #navbar-wrapper { position: absolute!important; margin-right: -250px!important; } #wrapper.toggled #content-wrapper { position: absolute!important; margin-right: -250px!important; } #navbar-wrapper { position: relative!important; } #wrapper.toggled { padding-left: 250px!important; } #content-wrapper { position: relative!important; top: 0!important; } #wrapper.toggled #navbar-wrapper, #wrapper.toggled #content-wrapper { position: relative!important; margin-right: 250px!important; } }