/* Custom Login
--------------------------------------------------------------------------------------- */

.page-template-page-login .header-wrapper,
.page-template-page-login .top-bar,
.page-template-page-login .header,
.page-template-page-login .footer-wrapper,
.page-template-page-login .footer-email-wrapper,
.page-template-page-login .footer { display: none;}

.circles-login-wrap { background: #fff; width: 100%; height: 100vh; position: relative; }
.circles-login-image { position: absolute; height: 100%; width: 35%; z-index: 1; }
.circles-login-content { float: right; display: inline; width: 65%; position: relative; height: 100vh; }
.circles-login-logo { width: 50%; height: auto !important; margin-left: auto; margin-right: auto; }
.login-content { position: absolute; top: 50%; left: 50%; width: 100%; max-width: 460px; height: auto; transform: translate(-50%, -50%); }
.circles-login-form-wrap { margin-top: 40px; background: #fff; padding: 40px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; -webkit-box-shadow: 0px 0px 100px 0 rgba(0,0,0,0.2); -moz-box-shadow: 0px 0px 100px 0 rgba(0,0,0,0.2); box-shadow: 0px 0px 100px 0 rgba(0,0,0,0.2);}
.circles-login-page-title { font-size: 3em; }
.circles-login-form-copy { margin-bottom: 20px; }
.message-status { padding: 10px !important; background-color: #fff4d1; border-radius: 6px; margin: 30px 15px 10px 15px !important; transition: opacity 1s ease-in-out; opacity: 1; }
.message-status.error-message { background-color: #ffe8e9 !important; color: #000; }
.message-status p { margin: 0 !important; text-align: center; font-size: 1.6em !important; }
.circles-login-copy p { font-size: 1.8em !important; line-height: 1.3em !important;}

.circles-login-input-row { margin-top: 14px;}

/* Labels */
.circles-login-form-form label { font-size: 18px; color: #000; font-family: 'proxima-nova', Helvetica, Arial, sans-serif; font-weight: 600; }

/* Inputs */
.circles-login-input,
.circles-login-input:-webkit-autofill {  border: 1px solid #ccc; font-size: 20px !important; font-family: 'proxima-nova', Helvetica, Arial, sans-serif; color: #000; font-weight: 400 !important; margin-top: 6px; line-height: 1em; padding: 14px 20px !important; width: 100%; box-sizing: border-box; display: block !important; border-radius: 3px; }

/* Password Icon */
.password-input-wrap { position: relative;}
a.btn-password-toggle { display: block; width: 24px; padding: 10px; height: 17px; opacity:.3; filter:alpha(opacity=30); position: absolute; right: 8px; top: 50%; -webkit-transform: translateY(-50%);  -ms-transform: translateY(-50%);  transform: translateY(-50%);}
a.btn-password-toggle.active, a.btn-password-toggle:hover { opacity:1; filter:alpha(opacity=100);}
svg .block { fill:#000;}

/* Buttons */
.circles-login-submit { float:left;  display: block !important; min-width: 160px; float: none !important; text-align: center; margin: 20px 0 0 0 !important; padding: 14px 30px; font-size: 18px !important; font-weight: 700 !important;  text-align: center; border: 0; background: #000; color: #fff; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; cursor: pointer; }
.circles-login-submit:hover { background: #444; }

/* Links */
.circles-login-form-links {  margin-top: 30px; }
a.circles-login-footer-link { font-size: 1.6em; color: #000 !important; }
a.circles-login-footer-link:hover { text-decoration: underline !important;}

.marg-t-50 { margin-top: 50px !important;}
.marg-t-30 { margin-top: 30px !important;}
.marg-b-30 { margin-bottom: 30px !important;}

/* Message Status */
.message-status { padding: 10px !important; background-color: #fff4d1;  -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; margin: 30px 15px 10px 15px !important; transition: opacity 1s ease-in-out; opacity: 1;}
.message-status.success { background-color: #39b54a !important; color: #fff;}
.message-status p { margin: 0 !important; text-align: center; font-size: 1.6em !important;}
.message-status.show { opacity: 1; }
.page-template-page-login .message-status { margin-left: 0 !important; margin-right: 0 !important;}
.message-status.error-message { background-color: #ffe8e9 !important; color: #000;}
.message-status.error-message p { line-height: 1.3em !important; padding: 10px 20px;}

/* Placeholder styles */
.circles-login-input::placeholder {
    color: inherit; /* Uses the same color as the input's text color */
    font-size: inherit !important;
    opacity: 1; /* Ensures full opacity (some browsers reduce it by default) */
}

/* For cross-browser support */
.circles-login-input:-ms-input-placeholder { color: inherit; } /* IE 10+ */
.circles-login-input::-ms-input-placeholder { color: inherit; } /* Edge */
.circles-login-input::placeholder { color: inherit; } /* Modern browsers */


/* Style auto-filled input fields */
.circles-login-input:-webkit-autofill {
    background-color: #ffffff !important; /* Adjust background color */
    color: #000 !important; /* Text color */
    font-style: normal !important; /* Ensure text style matches */
    box-shadow: 0 0 0px 1000px #ffffff inset; /* Override browser's background highlight */
    border: 1px solid #ccc !important; /* Ensure consistent border */
}

/* Ensure the style is retained when focused */
.circles-login-input:-webkit-autofill:focus {
    background-color: #fff !important; /* Match the focused input background */
    box-shadow: 0 0 0px 1000px #ffffff inset; /* Ensure consistency */
    border: 1px solid #ccc !important; /* Match the regular input border */
}

/* Hides code in iframe */
#wp-auth-check-frame .circles-login-image {
    display: none !important;
}



@media only screen
and (max-width : 501px) and (orientation:portrait)  {
    
    .circles-login-image { position: relative !important; height: 80px !important; width: 100% !important; }
    .circles-login-content { float: none !important; display: block !important; width: 100%; position: relative; height: auto; padding: 30px !important; box-sizing: border-box; }
    .login-content { position: relative; top: auto; left: auto; max-width: 100%; height: auto; transform: none !important; }
    .circles-login-form-wrap.marg-t-50 { margin-top: 30px !important;}
    .circles-login-form-wrap { padding: 30px; }
    .circles-login-input,
    .circles-login-input:-webkit-autofill {  font-size: 18px !important;  padding: 12px 16px !important;  }
    .circles-login-page-title { font-size: 2em; }
    .circles-login-copy p { font-size: 1.6em !important; line-height: 1.2em !important;}
    .circles-login-form-form label { font-size: 16px; }

    .marg-t-50 { margin-top: 30px !important;}


}