body { min-height: 100vh; min-height: -webkit-fill-available; } html { height: -webkit-fill-available; } main { display: flex; flex-wrap: nowrap; height: 100vh; height: -webkit-fill-available; max-height: 100vh; overflow-x: auto; overflow-y: hidden; } .bi { vertical-align: -.125em; pointer-events: none; fill: currentColor; } .dropdown-toggle { outline: 0; } .nav-flush .nav-link { border-radius: 0; } .btn-toggle-nav a { display: inline-flex; padding: .1875rem .5rem; margin-top: .125rem; margin-left: 1.25rem; text-decoration: none; } .btn-toggle-nav a:hover, .btn-toggle-nav a:focus { background-color: #0d6efd; } .scrollarea { overflow-y: auto; } .fw-semibold { font-weight: 600; } .sidebar { position: fixed; top: 0; /* rtl:raw: right: 0; */ bottom: 0; /* rtl:remove */ left: 0; z-index: 100; /* Behind the navbar */ padding: 0px 0 0; /* Height of navbar */ box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1); } @media (max-width: 991.98px) { .sidebar { top: 48px; } } .sidebar-sticky { position: relative; top: 0; height: calc(100vh - 48px); padding-top: .5rem; overflow-x: hidden; overflow-y: auto; } .sidebar .nav-link { font-weight: 500; color: #333; } .sidebar .nav-link .feather { margin-right: 4px; color: #727272; } .sidebar .nav-link.active { color: #2470dc; } .sidebar .nav-link:hover .feather, .sidebar .nav-link.active .feather { color: inherit; } .sidebar-heading { font-size: .75rem; text-transform: uppercase; } .navbar-brand { padding-top: .75rem; padding-bottom: .75rem; font-size: 1rem; background-color: rgba(0, 0, 0, .25); box-shadow: inset -1px 0 0 rgba(0, 0, 0, .25); } .navbar .navbar-toggler { top: .25rem; right: 1rem; } .navbar .form-control { padding: .75rem 1rem; border-width: 0; border-radius: 0; } .form-control-dark { color: #fff; background-color: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .1); } .form-control-dark:focus { border-color: transparent; box-shadow: 0 0 0 3px rgba(255, 255, 255, .25); } .btn-toggle-nav{ max-height: 300px; -webkit-overflow-scrolling: touch; } /* Scrollbar */ .btn-toggle-nav::-webkit-scrollbar { width: 5px; } .btn-toggle-nav::-webkit-scrollbar-track { box-shadow: inset 0 0 5px grey; border-radius: 10px; } .btn-toggle-nav::-webkit-scrollbar-thumb { background-image: linear-gradient(180deg, #D0368A 0%, #708AD4 99%); box-shadow: inset 2px 2px 5px 0 rgba(#fff, 0.5); border-radius: 100px; } .nav-pills .nav-link.active { color: #212529; background-image: linear-gradient(180deg, #D0368A 0%, #708AD4 99%); } .navbar-link:hover { background-image: linear-gradient(180deg, #760A45 0%, #23449F 99%); } .navbar-link { transition: unset; color: unset; }