*, 
*::before, 
*::after {
  box-sizing: border-box;
}

html, 
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  font-family: 'Open Sans Condensed',Arial;
}

body {
  background-image: url('./img/login-bg/shutterstock_2337995005.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.languages {
  position: absolute;
  width: 100%;
  z-index: 1;
  text-align: center;
}

.languages .flag {
  width: 50px;
  margin: 10px;
  vertical-align: middle;
  opacity: .4;
}

.languages .flag.selected,
.languages .flag:hover,
.languages .flag:focus
{
  opacity: 1;
}

.container {
  position: relative;
  width: 50%;
  height: 100%;
  float: left;
}

#login {
  position: absolute;
  width: 90%;
  max-width: 400px;
  left: 50%;
  top: 50%;
  padding: 50px 1em 1em 1em;
  transform: translate(-50%, -50%);

  border-radius: 10px;

  background-color: white;
  background-image: url('./img/logo.png');
  background-repeat: no-repeat;
  background-position: center 1em;
}

label {
  display: block;
  margin: 1em auto;
  /* outline: 1px solid red; */

}

input {
  display: block;
  width: 100%;
  border: none;
  border-bottom: 1px solid green;
  outline: none;
  background-color: white;
  padding: 1em;

  font-family: 'Open Sans Condensed',Arial;
  font-size: 1.25em;

  /* outline: 1px solid red; */
}

input[type="submit"] {
  border: none;
  margin: 1em auto;
  padding: 1em;
  color: white;
  background-color: #6eb132;
  font-weight: bold;
}

#submit {
  position: relative;
  margin: 1em auto;
  padding: 1em;
  color: white;
  background-color: #6eb132;
  font-weight: bold;
  text-align: center;
}

#lost {
  position: relative;
  display: block;
  /* display: none; */
  text-align: center;
}

#log_in_lost {
  position: relative;
  margin: 1em auto;
  padding: 0;
  color: #6eb132;
  background-color: white;
  font-weight: bold;
  text-align: center;
}

[data-tooltip]::after {
  position: absolute;
  content: attr(data-tooltip);
  background-color: rgba(0, 0, 0, .8);
  color: white;
  left: 50%;
  transform: translateX(-50%);
  padding: .5em 1em;
  border-radius: 5px;
  white-space: pre;
  opacity: 0;
  bottom: 0;
  transition: all ease-out 500ms;
  font-weight: initial;
}

[data-tooltip]:hover::after {
  bottom: 100%;
  opacity: 1;
}

/* #login.error::after  */
#error {
  /* content: attr(data-error); */
  /* position: absolute; */
  display: block;
  background-color: rgba(255, 0, 0, .7);
  color: white;
  top: 0;
  width: 100%;
  text-align: center;
  font-size: 1.25em;
  margin: 1em auto;
  padding: .5em 1em;
  border-radius: 5px;
  white-space: pre;

}

#info {
  /* content: attr(data-error); */
  /* position: absolute; */
  display: block;
  background-color: rgba(0, 255, 0, 0.7);
  color: black;
  top: 0;
  width: 100%;
  text-align: center;
  font-size: 1.25em;
  margin: 1em auto;
  padding: .5em 1em;
  border-radius: 5px;
  white-space: pre;

}

#lorem {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(255, 255, 255, .8);
  /* background-image: url('./login-data/under_construction.png'); */
  background-image: url('./login-data/electric-vehicle-charging-vs-gasoline.jpg');
  background-repeat: no-repeat;
  background-position: center 25px;
  background-size: 450px;
  border-radius: 10px;
  /* min-width: 500px; */

  margin: 0;
  padding: 250px 1em 1em 1em;
  width: 500px;
  font-size: 1.5em;
  text-align: center;
}

@media (max-width: 900px) {
  .languages {
    position: relative;
  }
  .container {
    float: initial;
    width: 100%;
    /* height: 50%; */
    height: auto;
  }
  #login, #lorem {
    position: relative;
    top: auto;
    left: auto;
    margin: 1em auto;
    transform: none;
    min-width: 250px;
  }


}