body { font-size: .875rem; } .feather { width: 16px; height: 16px; vertical-align: text-bottom; } /* * Sidebar */ .sidebar { position: fixed; top: 0; /* rtl:raw: right: 0; */ bottom: 0; /* rtl:remove */ left: 0; z-index: 100; /* Behind the navbar */ padding: 48px 0 0; /* Height of navbar */ box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1); } @media (max-width: 767.98px) { .sidebar { top: 5rem; } } .sidebar-sticky { position: relative; top: 0; height: calc(100vh - 48px); padding-top: .5rem; overflow-x: hidden; overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */ } .sidebar .nav-link { font-weight: 300; font-size: 1.2em; color: #333; } .sidebar .nav-link .feather { margin-right: 4px; color: #727272; } .sidebar .nav-link.active { color: #9cc666; } .sidebar .admin.nav-link.active { color: #56beac; } .sidebar .nav-link:hover .feather, .sidebar .nav-link.active .feather { color: inherit; } .sidebar-heading { font-size: .75rem; text-transform: uppercase; } /* * Navbar */ .navbar-brand { padding-top: .75rem; padding-bottom: .75rem; font-size: 2rem; text-shadow: 2px 2px 4px #444; font-weight: 700; } .navbar-sub-brand { padding-top: .75rem; padding-bottom: .75rem; font-size: 1.5rem; color: #fff; text-decoration: none; } .navbar .navbar-toggler { top: .25rem; right: 1rem; } .navbar .form-control { padding: .75rem 1rem; border-width: 0; border-radius: 0; } .bg-green { background-color: #9cc666; } .admin.bg-green { background-color: #56beac; } .bg-grey { background-color: #545f71; height: 3.5rem; margin-bottom: 4rem; } .logout { color: #fff; position: relative; font-size: 1.5em; margin-right: 1rem; } #user-avatar { color: #fff; position: relative; font-size: 2em; } .icon_sidebar { font-size: 1.5em; margin-right: 1rem; position: relative; } .ul_sidebar { margin-left: 2.5rem; } .sidebar .nav-link.active2 { font-weight: 500; color: #000; } h3 { font-size: 1.5em; } .btn { padding: 0.1em 2em; font-weight: 700; } .btn-green-admin { background-color: #a3e3d7; } .btn-grey { background-color: #f3f3f3; } .btn-grey-selected { background-color: #b0b0b0; } .btn-green-user { background-color: #c7e3a3; } .btn-yellow { background-color: #efe3b4; } .btn-orange { background-color: #f5b587; }