/* This is the custom login page for the customer.
It is loaded into the head via setup.php
and the function 'theme_custom_login()' */

:root {
  --primary-color: #424750;
  --secondary-color: #EBC700;
  --text-color: black;
  --background-text-color: rgb(229, 226, 226);
  --text-hover-color: white;
  --logo: url('../../resources/images/svg/logo.svg');
  --font-family: sans-serif;
  --font-size: 16px;
}

.login {
  background-color: var(--primary-color);
  font-family: var(--font-family);
  font-size: var(--font-size);
}

#login label {
  font-family: var(--font-family);
  font-size: calc(var(--font-size) - 2px);
}

.login #wp-submit {
  background-color: #1d1d1b;
  color: var(--text-color);
  font-family: var(--font-family);
}

.login h1 {
  margin-bottom: 10px;
}

.login h1 a {
  background-image: var(--logo);
  background-image: none, var(--logo);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  padding: 20px;
  margin-bottom: 0 auto 10px auto;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.3;
  text-decoration: none;
  width: 55%;
  text-indent: -9999px;
  outline: none;
  overflow: hidden;
  display: block;
  transition: transform 300ms 100ms ease-in;
}

.login h1 a:hover {
  transform: scale(1.01);
}

.login form {
  margin-top: 20px;
  margin-left: 0;
  padding: 26px 24px 34px;
  font-weight: 400;
  overflow: hidden;
  background: #fff;
  border: 3px solid var(--secondary-color);
  border-radius: 4px;
  box-shadow: 0 25px 35px #0006;
}

.login form input:focus {
  border: 1px solid var(--secondary-color);
}

.login .message {
  margin: 20px auto;
  border-left: 8px solid var(--secondary-color);
  border-radius: 10px;
}

#nav a,
#backtoblog a {
  color: var(--background-text-color) !important;
}

.dashicons-translation::before {
  color: var(--background-text-color);
}

input.button {
  background: white !important;
  color: var(--text-color) !important;
  border: 1px solid #003b8a !important;
  border-radius: 0 !important;
  padding: 0 8px !important;
}

input.button:hover {
  background: var(--secondary-color) !important;
  color: var(--text-hover-color) !important;
}

#login_error {
  font-size: calc(var(--font-size) - 2px);
}