.tcl-login-page {
  background: #fff;
  display: flex;
  align-items: center;
}

.tcl-login {
  display: flex;
  flex-wrap: wrap;
  height: 100%;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.tcl-login__left {
  width: 50%;
}

.tcl-login__right {
  width: 50%;
  display: flex;
  height: 100%;
  background-color: var(--tcl-button-primary-bg);
  background-image: var(--tcl-login-background);
  background-size: cover;
  background-position: center center;
}

.tcl-login-page #login #loginform {
  padding: 0;
  border: none;
  box-shadow: none;
  overflow: visible;
}

.tcl-login-page #login input[type="color"],
.tcl-login-page #login input[type="date"],
.tcl-login-page #login input[type="datetime-local"],
.tcl-login-page #login input[type="datetime"],
.tcl-login-page #login input[type="email"],
.tcl-login-page #login input[type="month"],
.tcl-login-page #login input[type="number"],
.tcl-login-page #login input[type="password"],
.tcl-login-page #login input[type="search"],
.tcl-login-page #login input[type="tel"],
.tcl-login-page #login input[type="text"],
.tcl-login-page #login input[type="time"],
.tcl-login-page #login input[type="url"],
.tcl-login-page #login input[type="week"],
.tcl-login-page #login select,
.tcl-login-page #login textarea {
  border: var(--tcl-border-width) solid var(--tcl-border-color);
  border-radius: var(--tcl-border-radius);
  background-color: rgb(255, 255, 255);
  color: var(--tcl-text-color-normal);
}

.tcl-login-page #login label {
  margin-bottom: 15px;
  color: var(--tcl-text-color-normal);
}

.tcl-login-page #login .message,
.tcl-login-page #login #login_error {
  border: none;
  background-color: #f2f2f4;
  border-radius: var(--tcl-border-radius);
  color: var(--tcl-text-color-normal);
  box-shadow: none;
}

.tcl-login-page #login #login_error {
  background-color: rgba(240, 80, 110, 0.21);
}

.tcl-login-page #login .button-primary {
  background-color: var(--tcl-button-primary-bg) !important;
  border: none;
  color: var(--tcl-button-primary-text-color) !important;
  padding: 5px;
  width: 100%;
  float: none;
}

.tcl-login-page #backtoblog,
.tcl-login-page #nav {
  padding: 0 0;
}

.tcl-login-page #login input[type="color"]:active,
.tcl-login-page #login input[type="color"]:focus,
.tcl-login-page #login input[type="date"]:active,
.tcl-login-page #login input[type="date"]:focus,
.tcl-login-page #login input[type="datetime-local"]:active,
.tcl-login-page #login input[type="datetime-local"]:focus,
.tcl-login-page #login input[type="datetime"]:active,
.tcl-login-page #login input[type="datetime"]:focus,
.tcl-login-page #login input[type="email"]:active,
.tcl-login-page #login input[type="email"]:focus,
.tcl-login-page #login input[type="month"]:active,
.tcl-login-page #login input[type="month"]:focus,
.tcl-login-page #login input[type="number"]:active,
.tcl-login-page #login input[type="number"]:focus,
.tcl-login-page #login input[type="password"]:active,
.tcl-login-page #login input[type="password"]:focus,
.tcl-login-page #login input[type="search"]:active,
.tcl-login-page #login input[type="search"]:focus,
.tcl-login-page #login input[type="tel"]:active,
.tcl-login-page #login input[type="tel"]:focus,
.tcl-login-page #login input[type="text"]:active,
.tcl-login-page #login input[type="text"]:focus,
.tcl-login-page #login input[type="time"]:active,
.tcl-login-page #login input[type="time"]:focus,
.tcl-login-page #login input[type="url"]:active,
.tcl-login-page #login input[type="url"]:focus,
.tcl-login-page #login input[type="week"]:active,
.tcl-login-page #login input[type="week"]:focus,
.tcl-login-page #login select:active,
.tcl-login-page #login select:focus,
.tcl-login-page #login textarea:active,
.tcl-login-page #login textarea:focus {
  box-shadow: none;
  border-color: var(--tcl-color-primary);
}

.tcl-login #login h1 a {
  background-image: var(--tcl-admin-logo);
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  width: 100%;
  height: 100px;
  display: block;
  outline: none;
}

.tcl-login #login h1 a:focus {
  outline: none;
}
