body{ padding: 0px 10px; overflow-X: hidden; background: #F8F8F8; } .table-item{ } #content{ border: 1px solid #DDDDDD; background: #fff; margin-top: 10px; margin-bottom: 10px; padding-left: 30px; padding-right: 30px; } footer{ margin: 30px auto; } #auth{ text-align: center; margin-bottom: 20px; } /*-------------------------------*/ /* VARIABLES */ /*-------------------------------*/ body { position: relative; overflow-x: hidden; } body, html { height: 100%; } .nav .open > a { background-color: transparent; } .nav .open > a:hover { background-color: #583e7e; } .nav .open > a:focus { background-color: #583e7e; } /*-------------------------------*/ /* Wrappers */ /*-------------------------------*/ #wrapper { -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; -webkit-transition: all 0.5s ease; padding-left: 0; transition: all 0.5s ease; } #wrapper.toggled { padding-left: 220px; } #wrapper.toggled #sidebar-wrapper { width: 220px; } #wrapper.toggled #page-content-wrapper { margin-right: -220px; } #sidebar-wrapper { -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; -webkit-transition: all 0.5s ease; background: #fff; height: 100%; left: 220px; margin-left: -220px; overflow-x: hidden; overflow-y: auto; transition: all 0.5s ease; width: 0; z-index: 1000; border-right: 1px solid #DDDDDD; } #sidebar-wrapper::-webkit-scrollbar { display: none; } #page-content-wrapper { width: 100%; } /*-------------------------------*/ /* Sidebar nav styles */ /*-------------------------------*/ .sidebar-nav { list-style: none; margin: 0; padding: 0; padding-top: 15px; position: absolute; width: 220px; } .sidebar-nav li { display: inline-block; line-height: 20px; position: relative; width: 100%; } .sidebar-nav li:before { content: ''; height: 100%; left: 0; position: absolute; top: 0; -webkit-transition: width 0.2s ease-in; transition: width 0.2s ease-in; width: 3px; z-index: -1; } .sidebar-nav li:hover:before { -webkit-transition: width 0.2s ease-in; transition: width 0.2s ease-in; width: 100%; } .sidebar-nav li a { display: block; padding: 10px 15px 10px 30px; text-decoration: none; } .sidebar-nav li.open:hover before { -webkit-transition: width 0.2s ease-in; transition: width 0.2s ease-in; width: 100%; } .sidebar-nav .dropdown-menu { background-color: #222222; border-radius: 0; border: none; box-shadow: none; margin: 0; padding: 0; position: relative; width: 100%; } .sidebar-nav li a:hover, .sidebar-nav li a:active, .sidebar-nav li a:focus, .sidebar-nav li.open a:hover, .sidebar-nav li.open a:active, .sidebar-nav li.open a:focus { background-color: #583e7e; color: #ffffff; text-decoration: none; } .sidebar-nav > .sidebar-brand { font-size: 20px; height: 65px; line-height: 44px; } /*-------------------------------*/ /* Hamburger-Cross */ /*-------------------------------*/ .hamburger { background: transparent; border: none; display: block; height: 32px; margin-left: 15px; position: fixed; top: 20px; width: 32px; z-index: 999; } .hamburger:hover { outline: none; } .hamburger:focus { outline: none; } .hamburger:active { outline: none; } .hamburger.is-closed:before { -webkit-transform: translate3d(0, 0, 0); -webkit-transition: all 0.35s ease-in-out; color: #ffffff; content: ''; display: block; font-size: 14px; line-height: 32px; opacity: 0; text-align: center; width: 100px; } .hamburger.is-closed:hover before { -webkit-transform: translate3d(-100px, 0, 0); -webkit-transition: all 0.35s ease-in-out; display: block; opacity: 1; } .hamburger.is-closed:hover .hamb-top { -webkit-transition: all 0.35s ease-in-out; top: 0; } .hamburger.is-closed:hover .hamb-bottom { -webkit-transition: all 0.35s ease-in-out; bottom: 0; } .hamburger.is-closed .hamb-top { -webkit-transition: all 0.35s ease-in-out; background-color: rgba(0, 0, 0, 0.7); top: 5px; } .hamburger.is-closed .hamb-middle { background-color: rgba(0, 0, 0, 0.7); margin-top: -2px; top: 50%; } .hamburger.is-closed .hamb-bottom { -webkit-transition: all 0.35s ease-in-out; background-color: rgba(0, 0, 0, 0.7); bottom: 5px; } .hamburger.is-closed .hamb-top, .hamburger.is-closed .hamb-middle, .hamburger.is-closed .hamb-bottom, .hamburger.is-open .hamb-top, .hamburger.is-open .hamb-middle, .hamburger.is-open .hamb-bottom { height: 4px; left: 0; position: absolute; width: 100%; } .hamburger.is-open .hamb-top { -webkit-transform: rotate(45deg); -webkit-transition: -webkit-transform 0.2s cubic-bezier(0.73, 1, 0.28, 0.08); background-color: #000; margin-top: -2px; top: 50%; } .hamburger.is-open .hamb-middle { background-color: #000; display: none; } .hamburger.is-open .hamb-bottom { -webkit-transform: rotate(-45deg); -webkit-transition: -webkit-transform 0.2s cubic-bezier(0.73, 1, 0.28, 0.08); background-color: #000; margin-top: -2px; top: 50%; } .hamburger.is-open:before { -webkit-transform: translate3d(0, 0, 0); -webkit-transition: all 0.35s ease-in-out; color: #ffffff; content: ''; display: block; font-size: 14px; line-height: 32px; opacity: 0; text-align: center; width: 100px; } .hamburger.is-open:hover before { -webkit-transform: translate3d(-100px, 0, 0); -webkit-transition: all 0.35s ease-in-out; display: block; opacity: 1; } /*-------------------------------*/ /* Dark Overlay */ /*-------------------------------*/ .overlay { position: fixed; display: none; width: 100%; height: 100%; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.4); z-index: 1; } .overlay .export-wrap{ border-bottom: 1px solid #ddd; } .overlay .export-wrap .dropdown { margin: 20px 30px 20px 30px; } .scroll-top{ right: 60px; position: fixed; width: 50px; height: 50px; bottom: 91px; padding: 2px 10px; background: #583e7e; color: #fff; } .scroll-top a{ font-size: 30px; color: #fff; }