html,body{
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
main{
  margin: 0;
  padding: 0;
  width:100%;
  height:100%;
}
.form-main{
  width: 20rem;
  margin: 8rem auto 14px;
  padding: 24px 0 40px;
  border-radius: 8px;
  border:1px solid #222;
}
.form-main h2{
  text-align: center;
  font-size: 1.4rem;
  font-weight: bold;
}
.form-main p{
  text-align: center;
}
.form-input{
  width: 14rem;
  margin: 20px auto 0px;
}
.form-input input{
  display: block;
  margin: 20px auto;
  padding-left: 8px;
  width: 13rem;
  font-size: 1.2rem;
  height: 1.8rem;
  border-radius: 4px;
  border: 1px solid #222;
  box-shadow: inset 0 0 2px #888;
}
.form-input.mini-input{
  width: 14rem;
  margin: 12px auto 0px;
}
.form-input.mini-input input{
  width: 10rem;
  margin: 4px auto;
  font-size: 1rem;
  height: 1.4rem;
}
.form-info{
  width: 12.5rem;
  margin:5px auto 5px;
  font-size: 0.8rem;
  color:red;
}
.form-submit{
  margin: 28px 0px 0px;
  text-align: center;
}
.form-submit.mini-submit{
  margin: 12px 0px 0px;
  text-align: center;
}
.button{
  padding: 0.3rem 0.8rem;
  font-size: 1.2rem;
  font-weight: bold;
  border-radius: 4px;
  border: none;
  background: #2c91a8;
  color: #FEFEFE;
  box-shadow: 0 0 2px #222;
}
.guide{
  width: 19rem;
  margin: 20px auto;
  font-size: 0.8rem;
}
.guide label,a{
  text-decoration: none;
  border-bottom: 2px solid #1e4896;
  color: #1e4896;
}
.mini-button{
  padding: 0.2rem 0.4rem;
  margin: 0 4px;
  font-size: 1rem;
  font-weight: bold;
  border-radius: 4px;
  border: none !important;
  box-shadow: 0px 0px 2px #222;
  color: #FEFEFE !important;
}
.ok{
  background: #08a322;
}
.cancel{
  background: #a30862;
}

/* form toggle */
.form-toggle{
  display: none;
}
.form-toggle + .open-toggle{
  display: block;
}
.form-toggle:checked + .open-toggle{
  display: none;
}
.form-toggle ~ .form-hidden{
  display: none;
}
.form-toggle:checked ~ .form-hidden{
  display: block;
}