html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  min-height: 100%;
  font-family: var(--skai-font-family-default);
}

input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
  display: none;
}
input[type="text"]::-ms-clear {
  display: none;
}

button,
input {
  outline: none;
  font-family: var(--skai-font-family-default);
}

ul,
ol {
  padding: 0;
}

* {
  box-sizing: border-box;
}

.login {
  display: flex;
  justify-content: space-between;
  width: 100%;
  min-height: 100vh;
  height: auto;
}

.login_left {
  width: 54%;
  background: lightgray no-repeat center center;
  background-image: var(--desktop-bg);
  display: flex;
  justify-content: center;
  align-items: center;
  background-size: cover;
}

.login_right {
  width: 46%;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.login_right_logo {
  display: none;
}

.login_right__body {
  width: 100%;
  max-width: 464px;
  padding: 44px 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.login__container {
  width: 100%;
  max-width: 435px;
  padding: 40px 0;
  color: #fff;
  display: flex;
  flex-direction: column;
}

.login__logo {
  margin-bottom: 20px;
  text-align: center;
}

.login__logo img {
  width: 180px;
  height: auto;
  max-width: 100%;
}

.login__body {
  position: relative;
  width: 100%;
}

.login__copyright,
.login__version {
  position: absolute;
  bottom: 50px;
  text-align: center;
  color: #8f9395;
  font-family: var(--skai-font-family-noto-sans);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0.028px;
}

.login__version {
  margin-bottom: 5px;
}

/* ----------------- Portrait ----------------- */
@media (orientation: portrait) {
  @media only screen and (max-width: 1024px) {
    .login {
      flex-direction: column;
    }

    .login_left {
      display: none;
    }

    .login_right {
      display: flex;
      flex-direction: column;
      background: linear-gradient(
        180deg,
        var(--brand-color) 2%,
        color-mix(in srgb, var(--brand-color) 65%, white) 8%,
        color-mix(in srgb, var(--brand-color) 25%, white) 15%,
        #fff 23%
      );
      width: 100%;
      height: auto;
      padding: 0px;
      flex: 1 1 auto;
    }

    .login_right_logo {
      display: flex;
      position: absolute;
      top: 10%;
    }

    .login_right__body {
      padding: 0px 150px;
      max-width: 100%;
    }

    .login__container {
      padding: 20px 0;
      min-height: auto;
    }

    .login__logo img {
      width: 140px;
    }
  }

  @media only screen and (max-width: 767px) {
    .login_right__body {
      padding: 20px 15px;
      max-width: 100%;
    }
  }

  @media only screen and (max-width: 480px) {
    .login_right__body {
      padding: 0px 28px;
    }

    .login__container {
      padding: 15px 0;
    }

    .login__logo img {
      width: 120px;
    }

    .login__copyright,
    .login__version {
      font-size: 12px;
    }
  }
}

/* ----------------- Landscape ----------------- */
@media (orientation: landscape) {
  @media only screen and (max-width: 1024px) {
    .login {
      flex-direction: row;
    }

    .login_left {
      display: flex;
      width: 54%;
      background-image: var(--desktop-bg);
      background-size: cover;
    }

    .login_right {
      width: 46%;
      background: #fff;
      padding: 20px;
      position: relative;
      background-image: none;
    }

    .login_right__body {
      padding: 20px 40px;
      max-width: 100%;
    }

    .login__container {
      padding: 20px 0;
    }
  }

  @media only screen and (max-width: 926px) {
    .login__copyright {
      bottom: 20px;
    }
  }

  @media only screen and (max-width: 896px) {
    .login_left {
      display: none;
    }

    .login_right {
      position: relative;
      background: linear-gradient(
        180deg,
        var(--brand-color) 2%,
        color-mix(in srgb, var(--brand-color) 65%, white) 8%,
        color-mix(in srgb, var(--brand-color) 25%, white) 15%,
        #fff 23%
      );
      width: 100%;
      padding: 15px;
    }

    .login_right_logo {
      display: flex;
      position: absolute;
      top: 28px;
      left: 23px;
      transform: rotate(-90deg) translateX(-100%);
      transform-origin: top left;
    }

    .login_right__body {
      max-width: 358px;
      padding: 0px;
    }

    .login__container {
      padding: 15px 0;
    }

    .login__copyright {
      bottom: 28px;
      right: 23px;
      writing-mode: sideways-lr;
    }
  }
}