:root {
  --dark-main: #1e1f21;
  --grey-main: #6d6e6f;
  --font-size-big: 20px;
  --font-size-medium: 14px;
  --font-size-small: 12px;
}

body {
  height: 100vh;
  margin: 0;
  display: flex;
  flex-direction: column;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  outline: none;
  list-style: none;
  text-decoration: none;
  font-size: 14px;
  color: var(--dark-main);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji',
    'Segoe UI Emoji';
  user-select: none;
  -webkit-font-smoothing: subpixel-antialiased;
}

main,
header,
footer {
  display: flex;
  align-items: center;
}

main,
footer {
  justify-content: center;
}

header {
  justify-content: start;
  padding: 20px 20px 0px 20px;
  font-size: 26px;
  font-weight: bold;
}

header > img {
  width: 180px;
}

main {
  flex-grow: 1;
}

footer {
  padding: 20px 0px 30px 0px;
  color: var(--grey-main);
}

.login-outer-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 50px;
  box-shadow: rgb(100 100 111 / 20%) 0px 7px 29px 0px;
  border-radius: 20px;
  margin-top: -20px;
}

.login-inner-container {
  width: 400px;
  height: 450px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.login-title {
  font-weight: bold;
  font-size: 22px;
  color: var(--dark-main);
}

.login-text {
  font-size: 25px;
  color: var(--dark-main);
  margin-bottom: -20px;
}

.login-subtitle {
  font-size: var(--font-size-medium);
  color: var(--grey-main);
  margin-bottom: 10px;
}

.login-subtitle > a {
  color: rgb(28, 28, 253);
}

.login-subtitle > a:hover {
  text-decoration: underline;
}

.login-forgotten-password {
  font-size: var(--font-size-small);
  color: var(--grey-main);
  margin-bottom: 10px;
  text-align: right;
  align-self: flex-end;
}

.login-forgotten-password > a {
  color: rgb(28, 28, 253);
  font-size: var(--font-size-small);
}

.login-forgotten-password > a:hover {
  text-decoration: underline;
}

.login-inner-container input,
.login-button {
  outline: none;
  padding: 10px 15px;
  width: 100%;
  border: 1px solid #6d6e6f77;
  border-radius: 5px;
}

.input-container:has(input:autofill)::after {
  scale: 0.9;
  left: -5px;
  top: -25px;
}

.input-container:has(input:-webkit-autofill)::after {
  scale: 0.9;
  left: -5px;
  top: -25px;
}

#errorMessage {
  height: 20px;
  font-size: var(--font-size-medium);
  color: rgb(177, 17, 17);
  margin: -30px 0px;
}

.login-button {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #104ada;
  font-size: var(--font-size-medium);
  color: #fff;
  font-weight: bold;
  cursor: pointer;
  margin-top: -20px;
}

.login-button:hover {
  opacity: 0.9;
}

.input-container {
  position: relative;
  width: 100%;
}

.input-container::after {
  content: attr(placeholder);
  color: var(--grey-main);
  font-size: var(--font-size-medium);
  position: absolute;
  scale: 0.9;
  left: -5px;
  top: -25px;
  pointer-events: none;
  transition: scale 100ms linear, left 150ms linear, top 150ms linear;
}

.input-container.empty::after {
}

.input-container:has(input:focus)::after {
  scale: 0.9;
  left: -5px;
  top: -25px;
}

.input-container > input:focus {
  border: 1px solid rgb(50 50 255);
}

#psw-forgotten-link {
  position: absolute;
  height: 20px;
  top: -25px;
  right: 0;
  font-size: var(--font-size-small);
  color: rgb(50 50 255);
  cursor: pointer;
  transition: scale 100ms linear;
}

#psw-forgotten-link:hover {
  text-decoration: underline;
}

#psw-forgotten-link:active {
  scale: 0.95;
}

.line {
  width: 100%;
  height: 1px;
  background-color: #6d6e6f77;
}

#g_id_onload {
  margin: -30px 0px;
}

.keep-logged-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.keep-logged-in > label {
  color: var(--grey-main);
  font-size: var(--font-size-small);
  cursor: pointer;
}