/*!
 * Customização de Login WP
 * @version 2 - 29/08/2024
 * @autor Weliton Martins.
 * @site devsite.com.br
 *
 * Responsável pela estilização deste site
 * @autor   Weliton Martins
 * @Data    24 de janeiro de 2020
 * 
 */

@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
@import url("https://pro.fontawesome.com/releases/v5.15.4/css/all.css");

/* ######################## Estilização do login  ######################## */
:root {
  --bg-login-desktop: url("../img/login/login_desktop.webp");
  --bg-login-tablet: url("../img/login/login_mobile.webp");
  --bg-login-mobile: url("../img/login/login_mobile.webp");
  --bg-logo-site: url("../img/login/login_logo.webp");

  --site-primary-hex: #212221;
  --site-secondary-hex: #212221;
  --site-btn-hex: #212221;

  --logo-agencia: url("../img/dev/logo-rodape-agencia.webp");
  --logo-agencia-w: 148px;
  --logo-agencia-h: 51px;
}

*,
*::after,
*::before {
  box-sizing: border-box !important;
}

html {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  background: var(--bg-login-desktop) no-repeat left top;
  background-color: #000;
  background-size: cover;
  min-height: 100vh;
}

@media (max-width: 991px) {
  html {
    background-image: none;
  }
}

html * {
  z-index: 10;
}

html::after {
  content: "";
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0px;
  left: 0px;
  background: #000;
  mix-blend-mode: multiply;
  z-index: 2;
  opacity: 0.45;
}

body {
  background: none;
  min-height: 100vh;
  font-family: "Inter", sans-serif;
}

@media (max-width: 991px) {
  body {
    padding-top: 200px;
    background: var(--bg-login-desktop) no-repeat left top;
    background-size: contain;
  }

  body * {
    z-index: 10;
  }

  body::after {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    content: "";
    top: 0px;
    left: 0px;
    background: #8F8F8F;
    mix-blend-mode: multiply;
    z-index: 5;
    opacity: 0.4;
  }
}

@media (max-width: 575px) {
  body {
    background: var(--bg-login-mobile) no-repeat left top;
    background-size: contain;
  }
}

#login {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 40%;
  margin: auto 0px;
  height: 100%;
  padding: 32px;
  min-height: 100%;
  background: #fff;
  box-shadow: 5px 0 5px -7px #000;
  box-sizing: border-box !important;
}

@media (max-width: 991px) {
  #login {
    width: 100%;
    height: auto;
    min-height: 100%;
    margin: 0px;
  }
}

@media (max-width: 600px) {
  #login {
    width: 100%;
    height: auto;
    min-height: 100%;
    margin: 0px;
    padding: 24px;
  }
}

#login h1 {
  padding-left: 20px;
  padding-right: 20px;
  margin-bottom: 20px;
  max-width: 400px;
  width: 100%;
  text-align: left;
  font-size: 24px;
}

#login h1 a {
  max-width: 240px;
  width: 100%;
  background: var(--bg-logo-site) no-repeat left center;
  background-size: contain;
  margin: 0px;
}

#login h1 a:focus {
  outline: 0;
  outline: none;
  box-shadow: unset;
}

#login form {
  padding: 20px;
  width: 100%;
  max-width: 400px;
  align-self: center;
  box-shadow: none;
  background: none;
  border: none;
}

#login form .user-pass-wrap {
  display: block;
  position: relative;
  margin-top: 24px;
  margin-bottom: 48px;
}

#login form .user-pass-wrap .button-secondary {
  color: #aaaaaa;
}

#login form .user-pass-wrap .button-secondary:hover {
  color: #8F8F8F;
}

#login form label {
  color: #9d9d9d;
  letter-spacing: 1px;
  margin-bottom: 0px;
}

#login form input:not([type=submit]):not([type=checkbox]) {
  display: block;
  position: relative;
  font-weight: 400;
  font-size: calc(14px + (16 - 14) * ((100vw - 320px) / (1920 - 320)));
  line-height: calc((14px + (16 - 14) * ((100vw - 320px) / (1920 - 320))) * 1.5);
  font-family: "Inter", sans-serif;
  padding: 8px;
  border: none;
  color: #000;
  border-radius: 0px;
  width: 100%;
  resize: none;
  background: none;
  background: transparent;
  transition: all ease-in 0.5s;
  border-bottom: 1px solid #8F8F8F;
  z-index: 2;
  margin-right: 0px;
}

#login form input:not([type=submit]):not([type=checkbox]):-moz-placeholder-shown {
  padding-left: 0px;
  padding-right: 0px;
  border-color: #9d9d9d;
  -moz-transition: all ease-in 0.5s;
  transition: all ease-in 0.5s;
}

#login form input:not([type=submit]):not([type=checkbox]):-ms-input-placeholder {
  padding-left: 0px;
  padding-right: 0px;
  border-color: #9d9d9d;
  -ms-transition: all ease-in 0.5s;
  transition: all ease-in 0.5s;
}

#login form input:not([type=submit]):not([type=checkbox]).inactive,
#login form input:not([type=submit]):not([type=checkbox]):placeholder-shown {
  padding-left: 0px;
  padding-right: 0px;
  border-color: #9d9d9d;
  transition: all ease-in 0.5s;
}

#login form input:not([type=submit]):not([type=checkbox]):focus {
  outline: 0;
  outline: none;
  box-shadow: unset;
}

#login form input:not([type=submit]):not([type=checkbox]):-webkit-autofill,
#login form input:not([type=submit]):not([type=checkbox]):-webkit-autofill:hover,
#login form input:not([type=submit]):not([type=checkbox]):-webkit-autofill:focus {
  -webkit-text-fill-color: #000;
  box-shadow: 0 0 0px 1000px #fff inset;
  -webkit-transition: background-color 5000s ease-in-out 0s;
  transition: background-color 5000s ease-in-out 0s;
}

#login form input:not([type=submit]):not([type=checkbox])::-webkit-input-placeholder {
  color: #9d9d9d;
  opacity: 0.8;
}

#login form input:not([type=submit]):not([type=checkbox])::-moz-placeholder {
  color: #9d9d9d;
  opacity: 0.8;
}

#login form input:not([type=submit]):not([type=checkbox]):-ms-input-placeholder {
  color: #9d9d9d;
  opacity: 0.8;
}

#login form input:not([type=submit]):not([type=checkbox])::placeholder {
  color: #9d9d9d;
  opacity: 0.8;
}

#login form input:not([type=submit]):not([type=checkbox]).wpcf7-not-valid {
  border-color: #dc3545;
}

#login form input[type=checkbox] {
  background: none;
  border: 1px solid #9d9d9d;
}

#login form input[type=checkbox]:checked {
  border-color: #000;
}

#login .button-primary {
  background: var(--site-btn-hex) !important;
  border-color: var(--site-btn-hex) var(--site-btn-hex) var(--site-btn-hex) !important;
  box-shadow: 0 1px 0 var(--site-primary-hex);
}

#login .button-primary:hover {
  background: rgba(0, 0, 0, 1) !important;
  border-color: rgba(0, 0, 0, 1) rgba(0, 0, 0, 1) rgba(0, 0, 0, 1) !important;
}

#login #nav,
#login #backtoblog {
  text-align: center;
}

#login #nav a,
#login #backtoblog a {
  color: #9d9d9d !important;
}

#login #nav a:hover,
#login #backtoblog a:hover {
  color: #181818 !important;
  text-decoration: underline !important;
}

#login #nav a:focus,
#login #backtoblog a:focus {
  outline: 0;
  outline: none;
  box-shadow: unset;
}

#login #login_error,
#login .message,
#login .success {
  display: flex;
  flex-flow: column nowrap;
  padding-left: 0px;
  padding-right: 0px;
  color: #000;
  border-left: unset !important;
  border-bottom: 4px solid;
  background: none;
  text-align: left;
  max-width: 360px;
  width: 100%;
  margin-bottom: 0px;
}

#login #login_error strong,
#login .message strong,
#login .success strong {
  margin-bottom: 4px;
}

#login #login_error br,
#login .message br,
#login .success br {
  display: none;
}

@media (max-width: 991px) {

  #login #login_error,
  #login .message,
  #login .success {
    width: calc(100% - 40px);
  }
}

#login #login_error {
  border-color: #dc3232;
}

#login .message {
  border-color: #00a0d2;
}

#login .sucess {
  border-color: #46b450;
}

#login #login_error a {
  display: block;
  width: 100%;
}

#login #login_error a:focus {
  outline: 0;
  outline: none;
  box-shadow: unset;
}

/* Desenvolvedor */

.wrap-developer {
  display: block;
  position: absolute;
  bottom: 30px;
  right: 50px;
}

.wrap-developer a {
  display: block;
  overflow: hidden;
  width: var(--logo-agencia-w);
  height: var(--logo-agencia-h);
  background: var(--logo-agencia) no-repeat top center;
  background-size: contain !important;
  text-indent: -9999999px;
  transition: all 0.3s ease;
  box-shadow: unset !important;
  outline: none !important;
}

.wrap-developer a:focus {
  outline: 0;
  outline: none;
  box-shadow: unset;
}

.wrap-developer a:hover {
  transform: scale(1.05);
}

@media (max-width: 991px) {
  .wrap-developer {
    margin-top: 16px;
    margin-bottom: 8px;
    right: unset;
    bottom: unset;
    position: relative;
  }

  .wrap-developer a {
    margin-left: auto;
    margin-right: auto;
  }
}


.login .language-switcher,
.login .privacy-policy-page-link {
  display: none !important;
}