﻿
#loginPage {
  box-sizing: border-box;
  margin: auto;
  align-self: center;
  justify-content: center;
  align-content: center;
  display: flex;
  flex-direction: column;
}

.loginForm {
  background-color: var(--secondaryColor, #9c9c9c);
  border: 3px solid var(--mainColor, #000000);
  box-shadow: 3px 3px 3px 0 var(--mainColor, #000000);
  color: hsl(0deg 0% 95%);
  text-align: center;
  margin: .5em auto;
  padding: 1em;
  width: clamp(var(--minWidth),50%,var(--maxWidth));
}

.loginRow, .pwChange {
  margin: 0 auto;
  margin-bottom: .5em;
}

.loginRow label, .pwChange label {
  font-weight: bold;
  text-align: center;
  display: block;
  min-width: 150px;
  margin: 0 auto;
  font-size: 1.1em;
}

.loginRow label.sameLine, .pwChange label.sameLine {
  display: inline-block;
  text-align: right;
  width: auto;
  min-width: unset;
}

.loginRow input[type=text], .loginRow input[type=password],
.pwChange input[type=text], .pwChange input[type=password] {
  display: inline-block;
  min-width: 150px;
  font-size: 1.1em;
}

.loginRow input[type=submit], .pwChange input[type=submit] {
  font-size: 1.1em;
  font-weight: bold;
}
