.sidenav {
  height: calc(100% - 155px);
  width: 90px; /* Set the width of the sidebar */
  position: fixed; /* Fixed Sidebar (stay in place on scroll) */
  z-index: 1; /* Stay on top */
  background-color: #111; /* Black */
}

/* The navigation menu links */

.sidenav a {
  text-decoration: none;
  font-size: 20px;
  color: #818181;
  display: block;
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
    color: #f1f1f1;
}

.main {
  margin-left: 90px;
  width: calc(100% - 118px);
  font-size: 28px; /* Increased text to enable scrolling */
}

@media screen and (max-height: 450px) {
    .sidenav {padding-top: 15px;}
    .sidenav a {font-size: 18px;}
}

.sideHeaderBar{
  width: 100%;
  height: 38px;
  background-color: #e6e5e5;
}

.scrollbar
{
  float: left;
  overflow-y: scroll;
  overflow-x: hidden;
  border-bottom: 10px solid #6d6d6d;
  border-top: 3px solid #6d6d6d;
  border-right: 3px solid #6d6d6d;
  background-color: #6d6d6d;
}

#style-1::-webkit-scrollbar-track
{
  background-clip: content-box;
  border-radius: 33px;
  background-color: white;
}

#style-1::-webkit-scrollbar
{
  border-radius: 25px;
  width: 5px;
  background-color: #e6e5e5;
}

#style-1::-webkit-scrollbar-thumb
{
  border-radius: 20px;
  background-color: #f5f4f4;
  border: 3px solid #c3c1c1;
}

#style-1::-webkit-scrollbar-track-piece
{
 margin: 5px;
}

.sidebar-container {
  height:83px;
  width: 100%;
  background-color: #6d6d6d;
}

.sidebar-box {
  border-radius: 18px; 
  margin: 10px 5px 3px 3px; 
  width: 63;
  height: 63;
  border: 1px solid #DDDDDD;
  background-color: white
}

.sidebar-header {
  margin-top: 3px; 
  color:black;
  width: 98%;
  text-align: center
}

.sidebar-boxtext {
  text-align: center; 
  display: block;
  margin-top:13;
  color:#6d6d6d;
}