.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    right: 0;
    background:#6563a4;
    overflow-x: hidden;
    transition: 0.05s;
    padding-top: 60px;
    font-family: helvetica;

}

.sidenav ul {
  padding:0px; 
  margin: 0px;
  padding-top:16px;
}

.sidenav ul li{
  padding:0px; 
  margin:0px;
  text-decoration:none;
  list-style-position:outside;
}

.sidenav ul li a {
  display:block;
  padding:12px 15px; 
  margin:0px;
  text-decoration:none;
  list-style-position:outside;
  font-size:14px;
  color:#FFF;
  border-bottom: 1px solid #8987C5;
}

.sidenav ul li a:hover { background:#645d99; }

.sidenav a:hover, .offcanvas a:focus{
  color: #f1f1f1;
}

.sidenav .closebtn {
    position: absolute;
    top:10px;
    right: 30px;
    font-size: 36px;
    margin-left: 50px;
    padding-bottom: 0px!important;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px; border-bottom:1px solid #DDD!important;}
}
 
.closebtn { width:110%; background:#6563a4!important; padding:12px!important; padding-top: 0px!important; text-align:right; padding-right:30px!important; margin-right:-30px!important; color:#FFF!important; }
.closebtn:hover {text-decoration:none;}