#recoverpasswordform_logo {
  max-width:              30em;
  max-height:             20vh;
}

div.recoverpasswordform {
  margin:                 auto;
  margin-top:             10%;
  border:                 1px solid #4096b8;
  padding:                1em;
  width:                  30em;
  background:             transparent url(../image/login_fd) no-repeat scroll 98% 98%;
}

dl.recoverpasswordform {
  margin:                 0;
  padding:                0;
}

.recoverpasswordform dt {
  position:               relative;
  left:                   0;
  top:                    1.3em;
  width:                  8em;
  font-weight:            bold;
  font-size:              0.9em;
}

.recoverpasswordform dd {
  margin:                 0 0 0 9em;
  padding:                0 0 0em 0em;
}

.recoverpasswordform input, .recoverpasswordform select {
  border:                 1px inset #ccc;
  width:                  13em;
}

.recoverpasswordform input[type='submit'] {
  border:                 1px outset #ccc;
  width:                  11em;
  margin:                 1em;
}

#loading_zone {
  float:                  right;
  margin-left:            1em;
}

#recoverpassword_msg {
  text-align:             center;
  font-weight:            bold;
}

#recoverpassword_back {
  float:                  right;
  font-size:              0.8em;
  text-decoration:        none;
  color:                  #4096b8;
  font-weight:            bold;
}

@media (max-width: 30em) {
  body {
    margin: 0;
  }

  div.recoverpasswordform {
    width: 98vw;
    max-width: none;
    padding: 1vw;
    box-sizing: border-box;
    margin: 1vw;
    text-align: center;
  }

  #recoverpasswordform_logo {
    margin: 1em;
    max-width: calc(90vw - 2em);
  }

  .recoverpasswordform dt {
    position: initial;
    width: 100%;
  }

  .recoverpasswordform dd {
    margin-left: 0;
    margin-bottom: 0.5em;
    width: 100%;
  }

  #recoverpassword_back {
    float: none;
    display: block;
  }
}
