#szMenuSidenav {
  width: 400px;
  max-width:96%;
  height:100%;
  position: fixed;
  top: 0;
  left: 105%;
  overflow-x: hidden;
  transition: 0.5s;
  padding:1rem;
  padding-top: 80px;
  z-index:103;
  background: linear-gradient(to right, #f3f3f3, #fff);
  box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.25);
  -webkit-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.25);
  -moz-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}

#szMenuSidenav::before {
  position: absolute;
  content: "";
  height: 100%;
  width: 100%;
  left: 0;
  bottom: -186px;
  background-image: url(../img/tree3.png);
  background-size: cover;
  background-position: center;
  opacity: .05;
  --mask: linear-gradient(to top, rgba(0,0,0, 1) 0, rgba(0,0,0, 1) 40%, rgba(0,0,0, 0) 95%, rgba(0,0,0, 0) 0 ) 100% 50% / 100% 100% repeat-x;
  -webkit-mask: var(--mask);
  mask: var(--mask);
  z-index: -1;
}

.usersidenav .closebtn{
  opacity:1;
  position: absolute;
  top:.5rem;
  right:1rem;
}

.usersidenav .closebtn img{
  width: 32px;
  filter: brightness(0) saturate(100%) invert(32%) sepia(0%) saturate(5%) hue-rotate(11deg) brightness(94%) contrast(84%) !important;
}

.usersidenav .closebtn:hover img {
  filter:invert(0);
}

.usersidenav a {
  font-size: 22px;
  display: block;
  color: #000;
  text-decoration: none;
  border-bottom: 1px solid #ddd;
  padding: .5rem 0;
  border-image-slice:1;
  border-image-source:linear-gradient(to right, #dadada, transparent);
}
.usersidenav a:first-child, 
.usersidenav a:last-child {
  border-bottom: none;
}

.usersidenav a:hover {
  color:#2680a5;
}

.shin_nav_show {
  opacity:1 !important;
  left:4% !important;
}

.usersidenav h1 {
  font-family: 'Roboto-Thin';
  font-weight: 600;
  letter-spacing: .05em;
  font-size:22px;
  margin-top:-4rem;
  padding-bottom:1rem;
  border-bottom:1px solid #ddd;
}

#szMenuSidenav .btn-img {
  margin:1rem 0;
  transition:.2s all ease-in-out;
}

#szMenuSidenav .btn-img img {
 transition:.2s all ease-in-out;
 width:26px;
}