/* AMOS-LAYOUT */

@placeholder-color: @black-color;
@margin-top-blocks: 30px;
@padding-login: 25px;

/**
FORM OVERRIDE
 */
.form-group-login {
  height: 45px;
  padding-left: 35px;
  padding-top: 7px;
  font-size: 1.1em !important;
  letter-spacing: 0.2px !important;
}

/**
PLACEHOLDER FORM OVERRIDE
 */
.placeholder-login {
  text-transform: uppercase;
  color: @placeholder-color;
  font-weight: normal;
  opacity: 1;
}

.login-page {
  margin: @margin-top-blocks 0;

  .container-messages {
    width: 100%;
    padding: 0;
  }

  .dropdown-languages {
    float: right;
    background: @white-color;
    padding-top: @padding-default;

    >.dropdown {
      float: right;

      >.dropdown-toggle .am {
        position: relative;
        top: 2px;
        padding: 0 5px;
      }

      >.dropdown-menu {
        min-width: auto; //bootstrap override
      }
    }
  }

  .welcome-message {
    margin: 0;
  }

  ::-webkit-input-placeholder {
    /* WebKit browsers */
    .placeholder-login;
  }

  :-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    .placeholder-login;
  }

  ::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    .placeholder-login;
  }

  :-ms-input-placeholder {
    /* Internet Explorer 10+ */
    .placeholder-login;
  }

  ::placeholder {
    /* Recent browsers */
    .placeholder-login;
  }

  .btn {
    border: 1px solid @white-color;
  }

  .title-login {
    font-size: 1.3em;
    margin-top: 0;
    color: @main-background-color;
  }

  h3.title-login {
    font-size: 1.1em;
  }

  .logo-login {
    max-width: 100%;
    background-color: @white-color;
    padding: @padding-login 0;
    .flexbox;
    align-items: flex-end;

    .login-logo-and-text {
      .flexbox;
      .flexbox-wrap(nowrap);
      justify-content: flex-start;
      align-items: center;
      padding-left: @padding-login;
      @media (max-width: 991px) {
        .flexbox-wrap;
      }
    }

    .login-logo-text {
      font-size: 18px;
      color: @brand-secondary-color;
      font-weight: 600;
      line-height: 1.3;
      display: block;
      //padding-left: @padding-login;

      a {
        margin: 0 auto;
        text-align: center;
        width: auto;
        display: inline-flex;
        background-color: #fff;
        padding: @padding-min @padding-large;

      }


    }

    // FIX FOR IE11
    @media screen and (-ms-high-contrast: active),
    screen and (-ms-high-contrast: none) {
      .login-logo-and-text {
        display: inline;

        .logo-amos {
          width: auto;
          margin: 0 auto;
        }
      }
    }

  }

  .login-block {
    background-color: @white-color;
    //padding: 0px @padding-login 0px;
    padding: 0px;
    margin-top: @margin-top-blocks;

    .login-body {
      padding: 35px @padding-login 0 @padding-login;

      //color: @placeholder-color;

      .form-group {
        margin-bottom: @margin-min;

        >.row>.col-xs-12:first-child {
          //hide label div
          display: none;
        }

        .form-control {
          .form-group-login;
        }

        +.ic {
          position: absolute;
          top: 20px;
          margin-left: 7px;
          font-size: 1.2em;
        }
      }

      .select2-container {
        background: @white-color;
        text-transform: uppercase;

        .selection .select2-selection .select2-selection__rendered .select2-selection__placeholder,
        &.select2-container--krajee .selection .select2-selection .select2-selection__rendered .select2-selection__placeholder {
          color: @black-color;
        }
      }

      .action {
        .flexbox;
        flex-direction: row-reverse;
        align-items: center;
        justify-content: space-between;
        margin-top: @margin-medium;
        .btn{
          border-radius: 0;
        }

        @media (min-width: 420px) {
          .btn {
            padding: 6px 30px;
          }
        }
      }
    }

    .rememberme {
      padding: 0px @padding-login ;
      .form-group{
        margin: 0;
        .remember-me {
          text-transform: uppercase;

          input[type="checkbox"] {
            top: -1px;
          }
        }
      }

    }

    .title-login {
      color: contrast(@brand-primary-color);
    }




    .forgot-password a {
      color: @brand-primary-color;
      text-transform: uppercase;
    }

    &.registration-block {
      //registration view
      margin-top: 30px;

      .login-body {
        background-color: inherit;



        .cookie-privacy {
          font-size: 0.9em;
          line-height: 1.2em;
          padding-top: @padding-default;
          color: @text-primary-color;

          a {
            color: @black-color;
            font-weight: bold;
          }

          div[role='radiogroup'] {
            .flexbox;
            .flexbox-row;
            align-items: center;
            justify-content: space-between;

            .radio+.radio {
              //override forms.less
              margin: @margin-medium 0;
            }

            .radio input[type='radio'] {
              //override forms.less
              margin-top: 2px;
            }

            label {
              text-transform: uppercase;
            }
          }
        }

        .recaptcha {
          .flexbox;
          justify-content: flex-end;
          padding: 0 @padding-min;
        }

        +.action-block {
          .flexbox;
          flex-direction: row-reverse;
          justify-content: space-between;

          padding: @padding-medium @padding-login;

          button,
          a {
            margin: 0;
          }
          .btn-primary, .btn-navigation-primary{
            border-radius: 0;
            &:hover{
              border-radius: 0;
            }
          }
        }
      }

      +.reactivate-profile-block {
        padding: 0  @padding-login @padding-login;
        background: @white-color;
        text-transform: uppercase;
        margin-bottom: @margin-top-blocks;

        a {
          color: contrast(@white-color);
          font-weight: bold;
        }
      }

      @media (max-width: 419px) {
        padding: 0 0 @padding-login;

        .login-body {
          padding: 35px 10px @padding-login;

          iframe {
            position: relative;
            left: 3px;
          }
        }
      }
    }

    &.forgotpwd-block {
      //forgot password view
      padding-bottom: 35px;

      .action {
        flex-direction: row-reverse;
      }
    }

    &.disablenotify-block {
      //disable notification view
      padding-bottom: 35px;

      .action {
        flex-direction: row-reverse;
      }
    }

    &.reactivate-block {
      padding-bottom: 35px;

      .form-group textarea.form-control {
        padding: 6px;
      }

      .action {
        flex-direction: row-reverse;

        button,
        a {
          min-width: 120px;
        }
      }
    }

    &.resetpwd-block {
      //reset password view
      padding-bottom: 35px;

      .eye-toggle-box,
      .field-firstaccessform-password {
        color: @white-color;
        text-transform: uppercase;
      }

      .cookie-privacy,
      .cookie-privacy a, .cookie-privacy .has-error .radio label, .cookie-privacy .has-success .radio label{
        color: @white-color;
      }

      .action {
        justify-content: flex-end;
      }
    }

    &.security-message {
      //all messages after action
      padding-bottom: 35px;

      p {
        color: @white-color;
      }

      hr {
        border-color: @white-color;
      }

      .action {
        justify-content: flex-end;
      }

      a {
        color: contrast(@brand-primary-color);
        text-decoration: none;

        &:hover {
          text-decoration: underline;
        }
      }
    }

    &.social-auth-spid {
      //amos-social-auth spid
      padding-bottom: 35px;

      &.ask-signup {
        hr {
          border-color: @white-color;
          float: none;
        }

        .action {
          flex-direction: row;
          text-align: center;
          //color: @white-color;
        }
      }
    }
  }

  .social-block {
    margin-top: @margin-top-blocks;
    background: rgba(0, 0, 0, 0.5);
    padding: @padding-login !important;
    &.social-register-block {
      background: @light-background-color;
      margin-top: @margin-top-blocks;
      padding: 0 25px 25px;

      .title-login {
        color: contrast(@light-background-color);
      }
    }

    +.spid-block {
      margin-top: 0;
    }
    .title-login {
      color: contrast(@black-color);
    }
    .social-buttons {
      text-align: center;
      display: inline-flex;
      .flexbox-wrap(nowrap);
      justify-content: space-between;

      .button-container .btn{
        margin: 5px;
        padding: 6px;
      }
      .btn-apple, .btn-farmlab {
        border: 1px solid black;
      }
      @media (max-width: 480px) {
        .flexbox-wrap;
      }

      .btn+.btn {
        margin-left: 0;
      }

      .btn {
        width: 95%;
        padding: 6px 0;
        font-weight: normal;
        font-size: 1.1em;
        line-height: 1.2em;

        span.text {
          text-align: center;
        }
      }
    }
  }

  .spid-block {
    background: rgb(255, 255, 255);
    padding: @padding-login;

    .title-login {
      color: contrast(@black-color);
    }

    .btn.btn-spid {
      //single button to spid login
      background-color: @spid;
      color: contrast(@spid);
      border-color: @spid;
      border-radius: 0;
      width: 100%;
      font-size: 1em;
      line-height: 1;
      padding: 7px 0;
      white-space: normal;

      >span:last-child {
        text-transform: initial;
        font-size: 1em;
        white-space: nowrap;
        border-right: 1px solid @white-color;
        padding-right: @padding-min;
      }

      @media (max-width: 420px) {
        font-size: 1.5em;
      }
    }

    .spid-text {
      color: contrast(@black-color);
      font-size: 0.9em;
      line-height: 1.2em;
    }
  }

  .register-block {
    margin-top: @margin-top-blocks;
    margin-bottom: @margin-top-blocks;
    background: @white-color;
    padding: @padding-login;

    .title-login {
      margin: 0;
      text-transform: uppercase;
      font-weight: 700;

      >a {
        text-transform: none;
        font-weight: normal;
        color: inherit;

        &:hover {
          color: @brand-primary-color;
        }
      }
    }
  }

}