.logo-landing {
  overflow: hidden;
  min-width: ($login-screen-default-size-px * 5) + 28;
  .container {
    .download-title {
      position: absolute;
      color: $white;
      bottom: ($login-screen-default-size-px * 3 ) + 1;
      left: $login-screen-default-size-px - 4;
      width: 100%;

      @include media-breakpoint-down(md) {
        bottom: ($login-screen-default-size-px * 3 ) - 13;
      }
    }
    .login-download-image {
      @extend  .ml-2 ;
      position: absolute;
      max-height: 110px;
      height:110px;
      bottom: $login-screen-default-size-px - 2;
      left: $login-screen-default-small-size-px - 7;
      .login-download-store {
        .ibs-mobile-qr {
          img {
            object-fit: contain;
            width: 100%;
            object-position: top;
          }
        }

        @include media-breakpoint-down(md) {
          img {
            width: ($login-screen-default-size-px * 3 ) - 12;
            height: $login-screen-default-size-px - 7;
          }
        }
      }
      .login-qr-code-image {
        position: absolute;
        margin-left: ($login-screen-default-size-px * 4 ) - 10;
        margin-top: -(($login-screen-default-small-size-px / 3) - 3 );

        img {
          width: ($login-screen-default-small-size-px * 3 ) + 5;
          height: $login-screen-default-small-size-px * 3;

          @include media-breakpoint-down(md) {
            img {
              width: ($login-screen-default-small-size-px * 3 ) - 6;
              height: $login-screen-default-size-px + 28;
            }
          }
        }

        @include media-breakpoint-down(md) {
          margin-left: ($login-screen-default-size-px * 3 ) + 8;
          margin-top: 0px;
        }
      }
      @include media-breakpoint-down(sm) {
        display: none;
      }
    }
    .footer {
      @extend  .pos-fix-bot-fill ;
      color: $logo-landing-footer-text-color;
      font-size: $logo-landing-footer-text-size;
      @include media-breakpoint-down(sm) {
        display: block;
        top: auto;
        left: 0px;
        right: -($login-screen-sm-size-px / 5);
        bottom: ($login-screen-sm-size-px * 2) + 17;
        position: absolute;
        text-align: center !important;
        font-size: ($login-screen-sm-size-px / 2) + 2;
        color: $login-screen-main-color;
        margin: 0px 0px 0px 5px;
        padding: 0px;
      }
      @include media-breakpoint-down(xs2) {
        bottom: $login-screen-default-size-px;
      }
      @include media-breakpoint-down(xs1) {
        position: fixed;
        bottom: 2%;

      }
      @include media-breakpoint-down(xs) {
        bottom: ($login-screen-sm-size-px / 2) + 2;
      }
    }
    @include media-breakpoint-down(sm) {
      position: static !important;
      min-height: 100%;
      flex: 0;
      background-image: none !important;
      width: 0px;
      padding: 0px;
    }
  }
  .logo-landing-content {
    min-width: 40%;
    background: $gray-100;
    > div {
      @extend  .display-center-table ;
      width: 80%;
      margin: 20% auto;
      height: 70%;
      > div {
        @extend  .text-left ;
        @extend  .display-flex-spacebetween ;
      }
    }
    .login-landing-form-wrapper {
      .ibs-logo {
        position: absolute;
        left: $login-screen-default-small-size-px + 9;
        top: $login-screen-default-small-size-px - 5;
        img {
          @include media-breakpoint-down(sm) {
            width: ($login-screen-sm-size-px * 2) + 16;
            height: ($login-screen-sm-size-px * 2) + 15;
          }
        }
        @include media-breakpoint-down(md) {
          position: absolute;
          left: $login-screen-default-small-size-px + 2;
          top: $login-screen-default-small-size-px - 10;
          img {
            width: $login-screen-default-size-px;
            height: $login-screen-default-size-px;
          }
        }
        @include media-breakpoint-down(sm) {
          position: absolute;
          left: ($login-screen-sm-size-px - 2);
          top: -($login-screen-default-small-size-px * 2) + 4;
        }
        @include media-breakpoint-down(xs2) {
          top: -($login-screen-sm-size-px + 8);
        }
        @include media-breakpoint-down(xs) {
          top: -($login-screen-sm-size-px);
        }
      }
      .container {
        .reset-alert {
          @include media-breakpoint-down(sm) {
            bottom: ($login-screen-default-small-size-px / 3) - 1;
          }
        }
        .login-title {
          color: $login-screen-title-color;
          font-size: $login-screen-default-small-size-px + 4;
          margin-bottom: 0px !important;
          padding-left: ($login-screen-default-small-size-px / 2 ) - 1;
          @include media-breakpoint-down(sm) {
            width: 100%;
          }
        }
        .login-text {
          margin-top: 0px !important;
          color: $login-screen-text-color;
          padding-left: ($login-screen-default-small-size-px / 2) - 1;
        }
        .login-back {
          margin-left: -15%;
          margin-top: 1%;
          width: ($login-screen-default-size-px/2)+5;
          height: ($login-screen-default-size-px/2)+5;
          fill: $login-screen-title-color;
          &:hover {
            fill: $login-screen-main-color;
          }
          @include media-breakpoint-down(sm) {
            position: unset !important;
            margin-top: -16% !important;
            margin-left: 0px !important;
          }
          @include media-breakpoint-down(md) {
            margin-left: -23%;
            margin-top: 2%;
          }
          @include media-breakpoint-down(lg) {
            margin-left: -16%;
            margin-top: 2%;
          }
          @include media-breakpoint-down(xl1) {
            position: relative;
            top: 40px;
            margin-left: -12%;
            margin-top: 4%;
          }
        }
        .login-column-reset {
          margin-top: -($login-screen-default-small-size-px - 6);
          button {
            background: $login-screen-main-color;
            border: none;
            border-radius: 0.25rem;
            &:hover {
              box-shadow: $login-screen-box-shadow;
            }
            &:focus {
              box-shadow: $login-screen-box-shadow;
            }
          }
        }
        .login-column-btn {
          text-align: right;
          button {
            background: $primary;
            border: none;
            border-radius: 0.25rem;
            width: 100%;
            height: $login-screen-default-small-size-px + 15;
            &:hover {
              box-shadow: $login-screen-box-shadow;
            }
            &:focus {
              box-shadow: $login-screen-box-shadow;
            }
            @include media-breakpoint-down(sm) {
              width: 100%;
            }
          }
          .fa-icon {
            position: absolute;
            text-align: center;
            margin-left: -52%;
            margin-top: 14px;
            fill: white;
            @include media-breakpoint-down(lg) {
              margin-left: -54%;
              margin-top: 12px;
            }
            @include media-breakpoint-down(md) {
              margin-left: -55%;
            }
            @include media-breakpoint-down(sm) {
              margin-left: -51%;
              margin-top: 12px;
            }
          }
        }
        .login-reset-link {
          a {
            color: $login-screen-title-color;
            &:hover {
              color: $login-screen-main-color;
              text-decoration: underline;
              cursor: pointer;
            }
          }
          @include media-breakpoint-down(sm) {
            max-width: 100% !important;
            flex: 0 0 100%;
            margin-bottom: ($login-screen-sm-size-px/3)-3;
          }
        }
        .login-form-footer {
          position: absolute !important;
          bottom: $login-screen-default-size-px - 30 !important;

          label {
            margin-right: 3%;
            color: $login-screen-title-color;
          }
          @include media-breakpoint-down(md) {
            position: unset !important;
            margin-top: 55%;
            width: 100%;
          }

        }
        .alert {
          margin-left: $login-screen-default-small-size-px / 2;
          margin-right: $login-screen-default-small-size-px / 2;
        }
        span.is-danger {
          color: red;
        }
        input.is-danger {
          border-color: red;
        }
        @include media-breakpoint-down(sm) {
          max-width: 100%;
          width: 100%;
          padding: 0px;
          margin: 0px;
        }

        .custom-form-label-tag {
          display:                                          none;
        }
        .actions-group {
          .forgot-password-button {
             @extend .col-md-6;
            order: 0;
            text-align: left;
            margin-top: 0;
            a {
              @extend .text-primary;
            }
          }
          .login-button {
            @extend .col-md-6;
            order: 1;
          }
          .enrolment-button {
            order: 2;
            text-align: left;
            a {
              @extend .font-weight-normal;
            }
          }
        }
      }
      @include media-breakpoint-down(sm) {
        width: 100%;
        padding: $login-screen-sm-size-px/2;
        margin: 18% auto;
      }
    }
    @include media-breakpoint-down(sm) {
      min-width: 100%;
    }
  }
  > .container {
    @extend  .cover-align-right ;
    @extend  .d-flex ;
    & > div {
      flex: 0.3;
    }
  }
  @include media-breakpoint-down(sm) {
    display: block !important;
    min-height: 100%;
    position: relative !important;
  }
}
