#login {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

#login table { margin: auto; }
#login td { border: none; text-align: left; }
#login td.center { text-align: center; }
#login img.vector { width: 6em; }
#login img.horizontal { width: 14em; }
#login input { width: 8em; }
#login button { margin-top: 1ex; }
#login h3 { margin-bottom: 0.7ex; }
#logo_right img { margin: 0.5em; }

#login.horizontal_logo h3 { display: none; }
#login.horizontal_logo button { margin-left: 0; }
#login.horizontal_logo #logo_top { display: table-row; }
#login.horizontal_logo #logo_top td { padding: 0; }
#login.horizontal_logo #logo_right { display: none; }

/* Computer */
@media (min-width: 30rem) {
  #logo_top { display: none; }
  #login button { margin-left: 2em; }
  #login h3 { margin-left: 2em; }
}

/* Phone */
@media not all and (min-width: 30rem) {
  #logo_right { display: none; }
  #login input { margin-right: 0.5em; }
  #login span { margin-right: 0.5em; }
}