html body.login,
html body.login * {
  box-sizing: border-box;
}

html body.login::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-position: top right;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: #ffffff;
  background-image: url('https://nialtoservices.co.uk/.nialto/images/login/background.jpg?v=1737136031');
}

html body.login #login,
html body.login-action-confirm_admin_email #login {
  width: 100%;
  max-width: 100%;
}

#login-pane {
  opacity: 0.975;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 400px;
  min-height: 100vh;
  min-height: 100svh;
  background-color: #ffffff;
}

#login-pane #login {
  margin: 0;
  padding: 2rem;
}

#login-pane #login :not(.message):not(.notice) div,
#login-pane #login :not(.message):not(.notice) span,
#login-pane #login :not(.message):not(.notice) p,
#login-pane #login :not(.message):not(.notice) li {
  color: #808080;
}

#login-pane #login .message,
#login-pane #login .notice,
#login-pane #login .success {
  color: #ffffff !important;
  background-color: #72aee6;
  border: none;
  border-radius: 6px;
  box-shadow: none;
}

#login-pane #login .success {
  background-color: #00a32a;
}

#login-pane #login .notice-error {
  background-color: #d63638;
}

#login-pane .button {
  padding: 8px 16px;
  font-size: 16px;
  line-height: 1.5;
  color: #202020;
  border: 1px solid #202020;
  background-color: rgba(0, 0, 0, 0);
  border-radius: 6px;
  box-shadow: none;
  outline: none;
}

#login-pane .button.button-large {
  min-height: auto;
  padding: 8px 16px;
  line-height: 1.5;
}

#login-pane .button-primary,
#login-pane .button-primary * {
  color: #ffffff !important;
  background-color: #202020 !important;
}

#login-pane .button-secondary {
  color: #808080 !important;
  border: none;
}

#login-pane #login #nav {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 1rem 0 0;
  padding: 0;
}

#login-pane #login form,
#login-pane #login #nav a {
  color: #808080;
}

#login-pane #login form {
  margin: 2rem 0 0;
  padding: 0;
  border: none;
  background-color: rgba(0, 0, 0, 0);
  box-shadow: none;
}

#login-pane #login input[type='color'],
#login-pane #login input[type='date'],
#login-pane #login input[type='datetime-local'],
#login-pane #login input[type='datetime'],
#login-pane #login input[type='email'],
#login-pane #login input[type='month'],
#login-pane #login input[type='number'],
#login-pane #login input[type='password'],
#login-pane #login input[type='search'],
#login-pane #login input[type='tel'],
#login-pane #login input[type='text'],
#login-pane #login input[type='time'],
#login-pane #login input[type='url'],
#login-pane #login input[type='week'],
#login-pane #login select,
#login-pane #login textarea {
  margin: 0 0 1rem;
  padding: 4px 0;
  border: none;
  border-radius: 0;
  border-bottom: 1px solid #d4d4d4;
  box-shadow: none;
  background-color: rgba(0, 0, 0, 0);
  outline: none;
  color: #202020;
}

#login-pane #login h1 a {
  display: block;
  width: 320px !important;
  height: 78px !important;
  margin: 0 !important;
  font-size: 0 !important;
  line-height: 0 !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  background-image: url('https://nialtoservices.co.uk/.nialto/images/login/logo.png?v=1737136031') !important;
}

#login-pane #login p.forgetmenot {
  float: none;
  display: block;
  text-align: center;
}

#login-pane #login p.forgetmenot label {
  margin: 0;
}

#login-pane #login p.submit {
  float: none;
  display: block;
  margin-top: 1rem;
}

#login-pane #login p.submit .button-primary {
  float: none;
  width: 100%;
  min-height: auto;
  margin: 0;
}

#login-pane #backtoblog {
  display: none;
}

#login-pane .bar {
  position: relative;
  display: block;
  width: 100%;
}

#login-pane .bar::before,
#login-pane .bar::after {
  content: '';
  position: absolute;
  bottom: 15px;
  width: 0;
  height: 2px;
  background-color: #eb5748;
  transition: width 0.2s ease-in-out;
}

#login-pane :focus ~ .bar::before,
#login-pane :focus ~ .bar::after {
  width: 50%;
}

#login-pane .bar::before {
  left: 50%;
}

#login-pane .bar::after {
  right: 50%;
}