html,body {
  height:100%;
  width:100%;
  margin:0;
}
body {
  display:flex;
  background: #f0f2f5;
}
form {
  margin:auto;/* nice thing of auto margin if display:flex; it center both horizontal and vertical :) */
}

#login{
  border-radius: 25px;
border: 2px solid #dddfe2;
padding: 20px;
width: 400px;
height: 350px;
background: #ffffff;
}

#login p{
  text-align: center;
}

#goodbye_message{
  text-align: center
}

label[for="id_username"]
{
font-weight: bold;
}

label[for="id_password"]
{
  display:none;
}
label[for="id_token"]
{
font-weight: bold;
}

#id_username, #id_password, #id_token{
  width: 100%;
  margin-bottom: 10px;
  border-radius: 6px;
  border: 1px solid #dddfe2;
  height: 40px;
  font-size: 16;
}

#id_password{
margin-bottom: 28px;
}

#id_token{
margin-bottom: 5px;
}

#link_to_manual{
font-size: 14px;
}

#login_button{
  float: right;
  width: 100%;
  color:#ffffff;
  background-color: #6CA0DC;
  border: 1px solid #dddfe2;
  border-radius: 6px;
  height: 40px;
  font-size: 20;
  font-weight: bold;
  margin-top: 28px;
}

#login_icon{
display: flex;
justify-content: center;
margin-bottom: 10px;
}

#login_icon .icon{
width: 52px;
}

#login_message{
text-align: center;
font-size: large;
font-weight: bold;
}