/**
 * This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/
 */
/***************************************************************
** TODO: This stylesheet doesn't use our current guidelines.  **
** It has to be refactored.                                   **
***************************************************************/
/**
 * This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/
 */
.u-font-weight-bold {
  font-weight: bold; }

.u-font-size-bigger {
  font-size: bigger; }

.u-width-1rem {
  width: 1rem; }

.u-width-full {
  width: 100%; }

.u-height-full {
  height: 100%; }

.u-position-relative {
  position: relative; }

.u-display-flex {
  display: flex; }

.u-display-block {
  display: block; }

.u-display-inline-block {
  display: inline-block; }

.u-full-w {
  width: 100%; }

.u-full-h {
  height: 100%; }

.u-shadow {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); }

.u-clickable {
  cursor: pointer; }

.u-opacity-07 {
  opacity: 0.7; }

/**
 * This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/
 */
.landing-container {
  height: 100%;
  width: 100%;
  background-image: url("../images/landing-background.jpeg");
  background-position: center;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center; }

.landing {
  height: auto;
  margin-bottom: 10%;
  padding: 0 5%;
  display: flex;
  flex-direction: column;
  align-items: center; }
  .landing.theme-light {
    background-color: #fff; }
  .theme-light .landing {
    background-color: #fff; }
  .landing.theme-dark {
    background-color: #424242; }
  .theme-dark .landing {
    background-color: #424242; }

.landing header {
  padding: 5%;
  display: flex;
  text-align: center;
  align-items: center; }
  .landing header.theme-light {
    color: #000; }
  .theme-light .landing header {
    color: #000; }
  .landing header.theme-dark {
    color: #fff; }
  .theme-dark .landing header {
    color: #fff; }
  .landing header img {
    width: 70px;
    margin-right: 10px; }
  .landing header h1 {
    margin-bottom: 5px; }

.login-form-container {
  margin: 10px 0;
  display: flex;
  flex-direction: column;
  align-items: center; }

.login-form {
  padding: 10px; }

.form-field {
  padding: 10px;
  width: 300px;
  border-radius: 5px;
  border-style: solid;
  border-top-width: 1px;
  border-right-width: 1px;
  border-left-width: 1px;
  border-bottom-width: 0px;
  display: flex;
  flex-direction: row;
  align-items: center;
  overflow: auto; }
  .form-field.theme-light {
    border-color: #cccccc; }
  .theme-light .form-field {
    border-color: #cccccc; }
  .form-field.theme-dark {
    border-color: black; }
  .theme-dark .form-field {
    border-color: black; }
  .form-field:focus.theme-light {
    background-color: #fff; }
  .theme-light .form-field:focus {
    background-color: #fff; }
  .form-field:focus.theme-dark {
    background-color: #424242; }
  .theme-dark .form-field:focus {
    background-color: #424242; }

.form-field:first-child {
  border-radius: 5px 5px 0 0; }

.form-field:last-child {
  border-radius: 0 0 5px 5px;
  border-bottom-width: 1px; }

.form-field__icon {
  padding: 10px 5px;
  border-right: solid 1px gray; }

.form-field__input {
  padding: 10px 5px;
  flex: 1;
  border-left: solid 1px gray;
  outline: none;
  border: none;
  align-self: stretch; }

.login-btn {
  padding: 10px 30px;
  margin: 10px;
  transition: transform .2s; }
  .login-btn:hover {
    transform: scale(1.2); }

.password-visibility-btn {
  border: none;
  outline: none; }
  .password-visibility-btn.theme-light {
    background-color: #fff; }
  .theme-light .password-visibility-btn {
    background-color: #fff; }
  .password-visibility-btn.theme-dark {
    background-color: #333333; }
  .theme-dark .password-visibility-btn {
    background-color: #333333; }

@media (max-width: 425px) {
  .landing header img {
    width: 40px; }
  .landing header h1 {
    font-size: 18px; }
  .form-field {
    max-width: 50vw; }
    .form-field__input {
      font-size: 12px; } }

input::-ms-clear,
input::-ms-reveal {
  display: none; }