/*
Copyright (C) 2016 Atomian Cognitive Architects S.L. - All Rights Reserved.
No warranty, explicit or implicit, provided. In no event shall the author
be liable for any claim or damages.
This is proprietary software.
*/
/* fonts */
@font-face {
  font-family: 'AtomianFont';
  src: url(/FontAwesome.otf?0d2717cd5d853e5c765ca032dfd41a4d) format('truetype');
  /* Safari, Android, iOS */
}
/** Brand colors **/
/** Font colors **/
/** Background colors **/
/** border **/
/* placeholder box (colors with opacity)*/
/** various **/
/*----------------------------------------------------------------------------*/
/* shades of grey */
/* disabled colors */
/*----------------------------------------------------------------------------*/
/* chart colors */
/** font sizes - used for font icons as well **/
/** spacing sizes = padding, margin **/
/* heading sizes */
/* icon sizes */
/* base sizes */
/* borders */
/* Margins */
/* media queries */
html {
  background-color: white;
}
.login-container {
  display: inline-block;
  width: 100%;
  height: 75vh;
  content: " ";
}
#login {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 15%;
  min-width: min-content;
  display: flex;
  flex-direction: column;
}
.login-content,
.reset-password-content,
.info-message {
  display: flex;
  flex-direction: column;
  min-width: 200px;
}
form {
  display: flex;
  flex-direction: column;
  margin-top: 1em;
}
form > input {
  font-size: 1.125em;
}
div.logo img {
  width: 100%;
}
.logo {
  margin: 0 0 16px 0;
}
#loginButton,
#resetPasswordButton {
  margin: 0.3em 0 0 0;
}
.action-link {
  align-self: center;
  cursor: pointer;
  margin: 4px;
}
.action-link:hover {
  text-decoration: underline;
}
.message,
.response {
  border: 1px solid hsl(0, 0%, 82%);
  padding: 1em;
  font-size: 1em;
  margin-top: 0.3em;
  margin-bottom: 0.5em;
  text-align: left;
  background-color: hsl(0, 0%, 100%);
  min-width: min-content;
}
.fa {
  margin-right: 4px;
  vertical-align: middle;
}
#responseText {
  vertical-align: middle;
}
