.loginPage {
  background: url('../images/background.svg') no-repeat, url('../images/login-background-overlay.png'),#333333;
  background-position: center calc(50% + 170px), center center, center center;
  background-size: auto 430px, 2px 2px, 2px 2px;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;

  .c-body {
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: auto 430px;
  }

  .c-bodyContainer {
    width: 260px;
    position: static;
    overflow: visible;
    padding-left: 0;
    padding-right: 0;
  }

  .ps {
    overflow: visible !important;
  }

  .ps__scrollbar-x-rail {
    display: none !important;
  }

  .c-body {
    padding: 0;
  }

  .el-input {
    &__inner {
      border: 1px solid $primary-color;
      border-radius: 4px;
      background: none;
      color: $primary-color;

      &::placeholder {
        color: $primary-color;
        font-size: 12px;
        letter-spacing: 1.09px;
        text-transform: none;
      }
    }
  }

  .el-button--text,
  .el-switch__label {
    color: $primary-color;
    font-size: 13px;
  }

  .el-switch {
    &__label {
      font-weight: 400;
    }

    &__core {
      background: none;
      border-color: $primary-color;
      border-radius: 11.5px;
      height: 23px;
      width: 39px;

      &::after {
        background: $primary-color;
        width: 14px;
        height: 14px;
        left: 5px;
        top: 50%;
        transform: translateY(-50%);
      }
    }
  }

  .el-switch.is-checked .el-switch__core::after {
    background: #fff;
    margin-left: -18px;
  }

  .el-button {
    width: 100%;
    font-size: 13px;
    letter-spacing: 1.86px;
    text-transform: uppercase;
  }

  ::placeholder {
    color: $primary-color;
    text-transform: uppercase;
  }

  :-ms-input-placeholder {
    color: $primary-color;
    text-transform: uppercase;
  }

  ::-ms-input-placeholder {
    color: $primary-color;
    text-transform: uppercase;
  }
}

.loginPage-logo {
  width: 500px;

  @media only screen and (max-width: 768px) {
    margin: 120px 0;
    width: 100%;
  }
}

.loginPage-footerLogoWrapper {
  bottom: 26px;
  line-height: 0;
  position: fixed;
  text-align: center;

  @media only screen and (max-height: 750px) {
    margin: 142px 0 26px;
    position: static;
  }
}

.loginPage-footerLogo {
  margin-bottom: 13px;
}

.loginPage-logoWrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.loginPage-appName {
  color: white;
  margin-bottom: 30px;
}