body.login {
    background-image: url(''); /* Will be populated dynamically by JavaScript */
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

#login h1 a, .login h1 a {
    background-image: url(https://geodefender.com.ar/media/2022/08/geodefender.svg);
    height:70px!important;
    width:270px;
    background-color:#fff;
    background-size: 270px 100px;
    background-repeat: no-repeat;
    padding-bottom:0px!important;
    margin-bottom:0px!important}

    .login h1 {background-color: #fff!important}
    #nav {background-color: #fff!important;text-align:center;min-height:40px;}

#loginform::before {content: '👋 ¡Hola Fleet Manager!';font-weight: bold;font-size:150%;color:#333; text-align: center!important;}
label[for="user_login"] {margin-top:15px}

body.login {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    min-width: 350px!important;
  }

  #login {
    width: 100%;
    max-width: 320px;
    margin: 0;
    padding: 0;
    height: 100vh;
    background: #fff;
    padding-left:20px;
    padding-right:20px;
    min-width: 380px!important;
  }

  #loginform, #lostpasswordform, #login form {
    margin-top: 30px!important;
    margin-left: 0;
    padding: 26px 24px 34px;
    font-weight: 400;
    overflow: hidden;
    background: #fff;
    border: none!important;
    box-shadow: none!important;
    max-width: 300px!important;
    margin: 0 auto!important}

    .wp-core-ui .button-primary, .wp-core-ui .button-primary:active, .wp-core-ui .button-primary:focus {
        background: #f05f35!important;
        border-color: #f05f35!important;
        width: 100%!important;
        box-shadow:none!important}
        
        .wp-core-ui .button-primary:hover {
        background: #ea6d50!important;
        border-color: #ea6d50!important}
        
        #nav, .message, #login_error {max-width: 300px!important;
        margin: 0 auto!important;}
        
        .cf-turnstile {margin-left:0px!important}
        #backtoblog {display:none}
        
        .input, .input:active, .input:focus {border-color:#f05f35!important;box-shadow:none!important}    

  @media only screen and (max-width: 600px) {
    body.login {align-items: center;}
    #login {background: transparent}
    .login h1 {min-width:348px!important;max-width:348px!important;margin: 0 auto!important;}
    #nav {min-width:300px!important;max-width:300px!important}
    #loginform::before {font-size: 130%!important}
  }

.message, .notice-error {display:none} /* Caja de mensajes */
 
  



/* Alinea veticalmente */  
#login {
  display: flex;
  flex-direction: column; /* Stacks elements vertically */
  justify-content: center; /* Centers vertically within the login container */
  align-items: center; /* Centers horizontally within the login container */
  /* Add any other styling for the login container */
  height: 100vh; /* Example height; adjust as needed */
}
#login h1 {margin-bottom:0.1px;}
#loginform {width: 100%;}
#nav {}
/* FIN Alinea veticalmente */