popupsheet
{
  position: absolute;
  display: block;
  bottom:0%;
  left:50%;
  transform: translateX(-50%);
  border-radius: 20px 20px 0 0;

  height:calc(100% - 60px);
  width:100%;
  max-width: 450px;

  background:rgba(15,15,15,1);
  transition: bottom 0.4s ease;

}

popupsheet .cancel
{
  display: block;

  position: absolute;
  top:0;
  right:0;

  user-select:none;
  -webkit-user-select:none;
  -webkit-user-drag:none;

  height:25px;
  width:25px;
  margin:30px;

  opacity: 0.2;
  filter:brightness(1);
  transition: filter 0.2s ease,opacity 0.2s ease;
}
popupsheet .cancel:hover
{
  opacity:0.4;
}

popupsheet .cancel:active
{
  opacity: 0.2;
  filter:brightness(0.3);
}


popupsheet scroll
{
  padding-top: 50px;
  box-sizing: border-box;
}

popupsheet bottombar
{
  position: absolute;

  bottom:0;
  left:0;

  width:100%;
  height:80px;
}

popupsheet topper
{
  display: block;
  border-radius: 5px;
  height: 10px;
  width: 60px;
  position: absolute;
  left: calc(50% - 30px);
  top: 20px;
  background: rgba(30,30,30,1);
}
popupsheet bottombar
{
  height:auto;
  margin-bottom: 0px;
}
popupsheet.background-light
{
  background: rgba(255, 255,255,1);
}

popupsheet[jsmgr]
{
  bottom:-100%;
}

popupsheet.open
{
  bottom:0;
}

popupsheet.close
{
  bottom:-100%;
}