@media all {
  body {
    background: linear-gradient(135deg, rgba(61, 75, 101, 0.7), rgba(61, 75, 101, 0.6), rgba(61, 75, 101, 0.5), rgba(61, 75, 101, 0.6), rgba(61, 75, 101, 0.7), rgba(61, 75, 101, 0.6));
  }
  div.login_odd {
    width: 90%;
    margin-left: 5%;
    margin-right: 5%;
    background: linear-gradient(230deg, rgba(240, 240, 240, 0.6), rgba(240, 240, 240, 0.5), rgba(240, 240, 240, 0.6), rgba(240, 240, 240, 0.7));
    border: 1px solid rgba(240, 240, 240, 0.8);
    border-radius: 0.5em;
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.1);
  }
  div.login_odd a {
    text-decoration: underline !important;
    color: #414141;
  }
  div.login_odd a.login {
    float: right;
    margin-left: 0.5em;
    font-size: 0.9em;
    color: #555;
  }
  img.login {
    width: calc(340px - 150px);
    height: calc(340px - 150px);
    position: relative;
    left: 50%;
    transform: translateX(-50%);
  }
  h2.login {
    width: calc(100% - 1em);
    margin: 0 0.5em;
    text-align: center;
  }
  input.login {
    width: calc(100% - 2px);
    height: calc(1.2em * 1.4);
    border-radius: 0.3em;
    font-size: 1.2em;
    border: none;
    background-color: rgba(255, 255, 255, 0.6);
    transition: 300ms;
  }
  input.login.account {
    width: calc(50% - 3px - 0.5em);
  }
  span.login {
    position: absolute;
    bottom: 6px;
    left: 0.5em;
    color: #646464;
    transition: 300ms;
  }
  input.login:focus,
  input.login:valid {
    background-color: rgba(255, 255, 255, 0.8);
  }
  input.login:focus + span.login,
  input.login:valid + span.login {
    bottom: 2.7em;
    font-size: 0.8em;
  }
  select.login {
    width: calc(100% - 2px);
    height: calc(1.2em * 1.4);
    border-radius: 0.3em;
    font-size: 1.2em;
    border: none;
    background-color: rgba(255, 255, 255, 0.6);
    transition: 300ms;
  }
  select.login.account {
    width: calc(50% - 3px - 0.5em);
  }
  button.login {
    width: calc(100% - 10px);
    padding: 3px 0.5em;
    margin: 0 5px 10px 5px;
    border-radius: 5px;
    box-shadow: 1px 1px 1px 1px rgba(150, 150, 150, 0.5);
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    cursor: pointer;
  }
  button.login:hover {
    box-shadow: 1px 1px 1px 1px rgba(150, 150, 150, 0.7);
  }
  button.login:active {
    box-shadow: inset 1px 1px 1px 1px rgba(150, 150, 150, 0.3);
  }
  button.login.blue {
    background: linear-gradient(0deg, #1166ff, #589ff8);
    color: #F8F8F8;
    font-size: 1.2em;
  }
  button.login.blue:hover {
    background: linear-gradient(0deg, #257aff, #6cb3ff);
  }
  button.login.blue:active {
    background: linear-gradient(0deg, #0052eb, #448be4);
  }
  button.login.gray {
    background: linear-gradient(0deg, #807f85, #a2a1a7);
    color: #F8F8F8;
    font-size: 1em;
  }
  button.login.gray:hover {
    background: linear-gradient(0deg, #949399, #b6b5bb);
  }
  button.login.gray:active {
    background: linear-gradient(0deg, #6c6b71, #8e8d93);
  }
  button.login.white {
    background: linear-gradient(0deg, #eeeeee, #f5f5f5);
    color: #414141;
  }
  button.login.white:hover {
    background: linear-gradient(0deg, #f8f8f8, #ffffff);
  }
  button.login.white:active {
    background: linear-gradient(0deg, #dadada, #e1e1e1);
  }
  div#flashes {
    position: relative;
    width: calc(100% - 2em);
    margin: 0.5em 1em;
    border-top: 1px solid rgba(203, 203, 203, 0.3);
    font-size: 0.9em;
    text-align: center;
  }
}
@media all and (min-width: 1000px) {
  div.login_odd {
    margin-top: 0;
    width: 540px;
    margin-left: calc((100% - 540px) / 2);
    margin-right: calc((100% - 540px) / 2);
  }
}