/* DEMO STYLE */ @import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700"; body { font-family: "trebuchet ms", trebuchet, georgia, verdana, arial, sans serif; background: #fff; font-size: 1em; background: #eee; } a, a:hover, a:focus { color: inherit; text-decoration: none; transition: all 0.3s; } .abutton, .abutton:focus { text-decoration: none; background-color: #008000; color: white; padding: .375rem .75rem; border-radius: .25rem; border-top: 1px solid #008000; border-right: 1px solid #008000; border-bottom: 1px solid #008000; border-left: 1px solid #008000; transition: all 0.15s; } .abutton:hover { color: #E1D9D1; background-color: #006400; border-color: #006400; } h3{ color:#0f2b3d; } .navbar { padding: 15px 10px; background: #fff; border: none; border-radius: 0; margin-bottom: 40px; box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1); } .navbar h1 { margin:0; padding: 10px 0 0 0px; color:#0f2b3d; } .header{display: flex;} /* --------------------------------------------------- SIDEBAR STYLE ----------------------------------------------------- */ .page-content { display: flex; width: 100%; } #sidebar { min-width: 250px; max-width: 250px; top: 0; z-index: 999; background: #0f2b3d; color: #fff; transition: all 0.3s; box-shadow: 0 16px 38px -12px rgba(0,0,0,.56), 0 4px 25px 0 rgba(0,0,0,.52), 0 8px 10px -5px rgba(0,0,0,.2); } #sidebar .sidebar-header { margin: 0px; padding: 20px 0px; background: #0f2b3d; } #sidebar .sidebar-header img { display: block; margin-left: auto; margin-right: auto; } #sidebar .sidebar-footer { text-align: center; color: #47748b; } #sidebar ul.components { padding: 20px 0; border-bottom: 1px solid #47748b; } #sidebar ul li a { padding: 10px; font-size: 1.1em; display: block; } #sidebar ul li a:hover { color: #0f2b3d; background: #fff; } ul ul a { font-size: 0.9em !important; padding-left: 30px !important; background: #6d7fcc; } /* --------------------------------------------------- CONTENT STYLE ----------------------------------------------------- */ #content { width: 100%; padding: 20px; min-height: 100vh; transition: all 0.3s; } .btn-info { display: none; } /* --------------------------------------------------- MEDIAQUERIES ----------------------------------------------------- */ @media (max-width: 768px) { #sidebar { margin-left: -250px; } #sidebar.active { margin-left: 0; } #sidebarCollapse span { display: none; } .btn-info { display: block; background-color: #0f2b3d; border-color: #0f2b3d; color: #fff; } .navbar h1, h3 { font-size: 1.5em; } }