/* ---------------------------------------------------
SIDEBAR STYLE
----------------------------------------------------- */

.sidebar {
width: 100%;
position: fixed;
top: 0;
left: -100%;
height: 100vh;
z-index: 9999;
background: #1c2a2d;
color: #fff;
transition: all 0.3s;
overflow-y: scroll;
}
.sidebar.active {
left: 0;
}
.dismiss {
width: 35px;
height: 35px;
line-height: 35px;
text-align: center;
background: #f3bb32;
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
-webkit-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.dismiss .bi-arrow-left::before {
line-height:35px;
}
.dismiss:hover {
background: #fff;
color:#000;
}
.overlay {
display: none;
position: fixed;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.7);
z-index: 998;
opacity: 0;
transition: all 0.5s ease-in-out;
top:0;
}
.overlay.active {
display: block;
opacity: 1;
}
.sidebar .sidebar-header {
padding: 20px;
background: #6d7fcc;
}
.sidebar ul.components {
padding: 20px 0;
}
.sidebar ul p {
color: #fff;
padding: 10px;
}
.sidebar ul li {
padding: 10px 20px;
font-size:15px;
display: block;
color:#fff;
border-bottom:solid 1px #364548
}
.sidebar ul li a {
font-size:15px;
display: block;
color:#fff;
}
.mt-3 {
margin-top:5px
}
/* Style the sidenav links and the dropdown button */
.sidenav a, .dropdown-btn {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 20px;
color: #818181;
display: block;
border: none;
background: none;
width:100%;
text-align: left;
cursor: pointer;
outline: none;
}
/* On mouse-over */
.sidenav a:hover, .dropdown-btn:hover {
color: #f1f1f1;
}
/* Main content */
.main {
margin-left: 200px; /* Same as the width of the sidenav */
font-size: 20px; /* Increased text to enable scrolling */
padding: 0px 10px;
}
.dropdown-container {
display: none;
background-color: #fff;
}
.dropdown-container li a {
color:#000!important
}
.dropdown-container li:hover {
background:#000!important;
color:#fff!important
}
.dropdown-container li:hover a {
color:#fff!important
}
/* Optional: Style the caret down icon */
.bi-chevron-down {
float: right;
padding-right: 8px;
margin-top:0
}