#uip-login-wrap {
  height: 100vh;
  color: var(--uip-text-color-base);

  #backtoblog a,
  #nav a {
    color: var(--uip-text-color-base);
  }

  input[type='color'],
  input[type='date'],
  input[type='datetime-local'],
  input[type='datetime'],
  input[type='email'],
  input[type='month'],
  input[type='number'],
  input[type='password'],
  input[type='search'],
  input[type='tel'],
  input[type='text'],
  input[type='time'],
  input[type='url'],
  input[type='week'],
  select,
  textarea {
    border: var(--uip-border-width) solid var(--uip-border-color);
    background-color: var(--uip-color-base-0);
    color: var(--uip-text-color-base);
    &:active,
    &:focus {
      box-shadow: none;
      border-color: var(--uip-color-primary);
    }
  }
  label {
    margin-bottom: var(--uip-margin-s);
    color: var(--uip-text-color-muted);
  }
  #login {
    padding: 0;
    width: 100%;
  }
  #login form {
    padding: 0;
    border: none;
    background: none;
  }
  #login_error,
  .message,
  .success {
    border-radius: var(--uip-border-radius);
    background: var(--uip-color-base-1);
    padding: var(--uip-padding-xs);
    border: none;
  }
  #login_error {
    background: var(--uip-color-red-lighter);
  }
  #loginform {
    background: none;
    box-shadow: none;
    border: none;
    padding: 0;
  }
  .button-primary {
    background-color: var(--uip-color-primary);
    border-width: var(--uip-button-border-width);
    border-color: var(--uip-button-primary-border-color);
    color: var(--uip-text-color-inverse);
    width: 100%;
  }
  #backtoblog,
  #nav {
    padding: 0;
  }
  .language-switcher {
    text-align: left;
    padding: 0;
    #language-switcher {
      display: flex;
      align-items: center;
      column-gap: 10px;
      row-gap: 10px;
      flex-wrap: wrap;

      label {
        margin: 0;
      }
    }
  }
  #uip-login-form-wrap {
    display: flex;
    align-items: center;
    height: 100vh;
    justify-content: center;
    box-sizing: border-box;
    background-color: var(--uip-color-base-1);
  }
  #uip-login-form {
    width: 350px;
    max-width: 100%;
    padding: var(--uip-padding-m);
    background: var(--uip-color-base-0);
    border-radius: var(--uip-border-radius);
  }
}

.uip-login-left {
  #uip-login-wrap {
    display: flex;

    #uip-login-form-wrap {
      width: 50%;
      background: var(--uip-color-base-0);
    }
    #uip-login-panel {
      width: 50%;
      background-color: var(--uip-color-primary);
    }
  }
  @media only screen and (max-width: 768px) {
    #uip-login-panel {
      display: none;
    }
    #uip-login-form-wrap {
      width: 100% !important;
    }
  }
}

.uip-login-right {
  #uip-login-wrap {
    display: flex;
    flex-direction: row-reverse;

    #uip-login-form-wrap {
      width: 50%;
      background: var(--uip-color-base-0);
    }
    #uip-login-panel {
      width: 50%;
      background-color: var(--uip-color-primary);
    }
  }
  @media only screen and (max-width: 768px) {
    #uip-login-panel {
      display: none;
    }
    #uip-login-form-wrap {
      width: 100% !important;
    }
  }
}