/*==================================
	File name : sidenav.css
	Description: handle css that used for loading Sidenav widget area
====================================*/ 
.sidenav {
  background: #fff;
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.3);
  display: block;
  height: 100%;
  position: fixed;
  overflow-x: hidden;
  transform: translate(270px, 0);
  transition: all .3s;
  right: -138px;
  width: 400px;
  z-index: 10000;
  top: 0; /* Stay at the top */
  transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}
.sidenav::-webkit-scrollbar {
    display: none;
}
.sidenav.show {
  transform: translate(-138px, 0px); 
}

.sidenav-brand {
  border-bottom: 1px solid #f5f5f5;  
}

.sidenav-brand .logo{
  margin: 0 !important;
}

.sidenav-header {
  background: transparent;
  border-bottom: 1px solid #f5f5f5;
  color: #757575;
  margin: 0;
  padding: 16px 24px; 
}
.sidenav-header small {
  display: block;
}
#closebtn {
  font-size: 30px;
  margin-left: 10px;
}
.bg-white{
  padding: 10px;
  margin-top: 2px;
}
#right-nav {
  margin-top: -2px;
  position: relative;
  z-index: 1;
  border: 2px solid black;
  top: 40vh;
  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.14), 0px 4px 20px rgba(0, 0, 0, 0.18);
  background-color: white;
}
#right-nav a {
  color: #4DB2EC;
}
#right-nav > ul {
  height: 39px;
}
.right-nav-icon {
  padding: 5px;
  display: block;
  font-size: 20px;

}