@import "libs/variables";
@import "libs/mixins";
@import "libs/icons";
@import 'bundles/mapbendermanager/sass/manager/manager.scss';

.authWrapper {
  margin-top: 15vh;
  .head {
    position: absolute;
    width: 100%;
    height: 300px;
  }
  /** Apply .login-wrapper also to .logoContainer for FOM 3.1 reset password page markup */
  .login-wrapper, .logoContainer {
    position: relative; // solve z-index clash vs .head
    width: 90%;
    max-width: 340px;
    margin: 0 auto;
  }

  .loginBox {
    padding: $space;
    background-color: lighten($contentColor, 2%);
    border: {
      top: solid 1px $secondColor;
      left: solid 1px $thirdColor;
      right: solid 1px $thirdColor;
      bottom: solid 5px $thirdColor;
      radius: $containerBorderRadius;
    }

    .input {
      width: 100%;
    }
    .labelInput {
      width: 100%;
      line-height: 1.414;
    }

    .inputWrapper {
      width: 100%;
    }
  }

  a {
    text-decoration: none;
  }

  .logoContainer {
    text-align: center;
    display: block;
    height: auto;
    padding-top: 15px;
    .logo {
      max-height: 120px;
      max-width: 100%;
    }
  }
  .loginBox {
    margin-top: 15px;
  }
  .labelInput {
    display: block;
    width: 100%;
    margin-bottom: 2px;
  }
  .input {
    margin-bottom: $space/2;
  }

  .linkButton {
    margin-right: $space/2;
  }

  .sitelinks {
    text-align: right;
    li {
      display: inline-block;
      a, a:visited {
        color: inherit;
      }
    }
  }
}

// Mobile resonsive
@media only screen and (max-width: 1024px) {
  .authWrapper {
    margin-top: 0;
    .head {}

    > .logoContainer {
      .logo {
        max-height: 10vh;
      }
    }
  }
}
