.black_overlay {

  display: none;

  position: absolute;

  top: 0%;

  left: 0%;

  width: 100%;

  height: 100%;

  background-color: black;

  z-index: 22221;

  -moz-opacity: 0.6;

  opacity: .80;

  filter: alpha(opacity=60);

}

.white_content {

  display: none;

  position: fixed;

  left: 30%;

  bottom: 38%;

  padding: 16px;

  border: 2px solid orange;

  background-color: white;

  z-index: 22222;

  overflow: hidden;

}



#right-pincode {



  top: 80%;

  right: 0px;

  position: fixed;

}

.sidenav {

  height: ;

  width: 0px;

  position: fixed;

  z-index: 1;

  center: 0;

  right: 0;

  background-color: #111;

  transition: 0.5s;



}



.sidenav a {

  padding: 8px 8px 8px 32px;

  text-decoration: none;

  font-size: 25px;

  color: #818181;

  transition: 0.3s;

}



.sidenav a:hover {

  color: #f1f1f1;

}



.sidenav .closebtn {

  position: relative;

  top: 0;

  right: 5px;

  font-size: 36px;

  margin-left: 25px;

}



@media screen and (max-height: 450px) {

  .sidenav {
    padding-top: 20px;
  }

  .sidenav a {
    font-size: 40 px;
  }

}

.pin_icon {

  font-size: 30px;

  cursor: pointer;

  padding: 0px 20px 0px 15px;

  background: #000;

  color: #fff;

}

.white_content {
  margin: auto;
  width: 40%;
  height: 30%;

}

@media only screen and (max-width: 600px) {
  .white_content {
    margin: auto;
    width: 40%;
    height: 30%;
  }
}

.update-pin {
  padding: 0px 1px 0px 10px;
}