@import url(../color.css);

body, html {
    height: 0%;
    margin: 0;
    padding: 0;
}

body.login {
    background-color: #f7f7f7; /* Background color for the whole page */
}

.login #login {
    width: 400px;
    padding: 20px;
    margin: auto;
    border-radius: 20px; /* Border radius for the form */
    background-color: var(--white); /* Background color of the form */
    box-shadow: 0 0 10px #ced4da; /* Shadow for the form */
    margin-top: 5%;
}

body.login h1 a {
    background-size: contain;
    width: 100%;
    height: 80px; /* Adjust height based on your logo */
}

.login form {
    padding: 26px 24px 0px;
}

.login #nav a {
    /* #float: right; */
    font-weight: 400;
}

body.login form .input,
body.login input[type="text"],
body.login input[type="password"],
body.login input[type="email"] {
    width: 100%;
    padding: 10px;
    padding-left: 40px; /* Add padding to the left for the icon */
    font-size: 16px;
    border-radius: 20px; /* Border radius for input fields */
    border: 1px solid var(--light-gray);
    height: 1.5em; /* Height for input fields */
    line-height: 1.5; /* Line height for input fields */
    position: relative;
    margin-bottom: 20px; /* Add margin to separate input fields */
}

body form .input-icon {
    position: relative;
}

body form .input-icon i {
    position: absolute;
    left: 15px;
    top: 35%;
    transform: translateY(-50%);
    /* color: rgb(72, 113, 133); */
    font-size: 1.1em;
}

body.login #loginform label {
    font-size: 14px;
    color: #333;
}

body.login #loginform .forgetmenot {
    display: flex;
    align-items: center;
}

body.login #loginform .forgetmenot input {
    margin-right: 5px;
}
.wp-core-ui .button, .wp-core-ui .button-secondary {
    color:#333; 
 }

body.login #wp-submit {
    width: 100%;
    padding: 10px;
    font-size: 16px;
    border: none;
    border-radius: 20px; /* Border radius for the submit button */
    background-color: var(--pink); /* Button background color */
    color: #ffffff; /* Button text color */
    cursor: pointer;
    height: 1.5em; /* Height for submit button */
    line-height: 0; /* Line height for submit button */
    margin-top: 10px;
    font-weight: 700;
}

body.login #wp-submit:hover {
    background-color: var(--white); /* Button hover color */
    color: var(--pink);
    border: 1px solid var(--pink);
}

body.login #backtoblog a, body.login #nav a {
    color: var(--pink) /* Link color */
}

body.login #backtoblog a:hover, body.login #nav a:hover {
    color: var(--pink) /* Link hover color */
}

body.login form {
    border: 0px;
    box-shadow: 0 0px 0px rgba(0, 0, 0, 0.04);
    margin-top: 0px;
}
.login h1 a {
    margin-bottom: 0px;
}

body.login h1 a{
    height: 50px;
}

input[type=checkbox]:checked::before {
    content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M14.83 4.89l1.34.94-5.81 8.38H9.02L5.78 9.67l1.34-1.25 2.57 2.4z' fill='%23{var(--pink)}'/></svg>");
}
input[type="checkbox"]:checked {
    border-color: var(--pink);
}
input[type="checkbox"]:focus {
    border-color: var(--pink);
    outline: none; /* Remove default outline */
}

.login .button.wp-hide-pw:focus {
    background: 0 0;
    border-color: var(--pink);
    box-shadow: 0 0 0 1px var(--pink);
    outline: 2px solid 
}

.login #login_error, .login .message, .login .success {
    border-left: 4px solid var(--pink);
}

.input-icon input[type="hidden"] + i {
    display: none;
}

.input-icon #respass1 {
    top: 48% !important; /* Use !important only if necessary */
}

#custom-subscription-message {
    display: block;
    margin-top: 10%;
    text-align: center;
    font-size: 14px;
    color: var(--black);
}
#custom-subscription-message a {
    color: var(--pink);
    text-decoration: none;
}
#custom-subscription-message a:hover {
    color: var(--pink);
}

#login_error a{
    text-decoration: none;
    color: var(--pink);
}
.loaderLogin {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.8); /* Semi-transparent background */
    z-index: 9999; /* Ensure it sits above other content */
}

.loaderLogin img {
    width: 50px; /* Adjust the size as needed */
    height: auto;
}