:root{ --my-login-primary-color: #007c56; --my-login-primary-darker-color: #006344; --my-login-body-bg: #f0f0f1; --my-login-form-focus-color: var(--my-login-primary-darker-color); --my-login-text-on-button: #ffffff; --my-login-link-hover-color: var(--my-login-primary-darker-color)} body.login{ background: var(--my-login-body-bg)} .login #nav a, .login #backtoblog a{ color: var(--my-login-primary-color)} .login #nav a:hover, .login #nav a:focus, .login #backtoblog a:hover, .login #backtoblog a:focus{ color: var(--my-login-link-hover-color)} .login form .input:focus, .login form input[type="text"]:focus, .login form input[type="password"]:focus{ border-color: var(--my-login-form-focus-color); box-shadow: 0 0 0 1px var(--my-login-form-focus-color)} .login form input[type="checkbox"]:focus{ outline: 1px solid var(--my-login-form-focus-color); outline-offset: 1px} .login form input[type="checkbox"]:checked::before{ color: var(--my-login-primary-color); content: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M14.83%204.89l1.34.94-5.81%208.38H9.02L5.78%209.67l1.34-1.25%202.57%202.4z%27%20fill%3D%27currentColor%27%2F%3E%3C%2Fsvg%3E")} .login .wp-core-ui .button-primary{ background: var(--my-login-primary-color) !important; border-color: var(--my-login-primary-color) !important; color: var(--my-login-text-on-button) !important; box-shadow: none !important; text-shadow: none !important} .login .wp-core-ui .button-primary:hover, .login .wp-core-ui .button-primary:focus{ background: var(--my-login-primary-darker-color) !important; border-color: var(--my-login-primary-darker-color) !important; color: var(--my-login-text-on-button) !important} .login .message, .login #login_error{ border-left: 4px solid var(--my-login-primary-color)} #login h1 a, .login h1 a{ height: 160px; width: 100%; background-size: contain; background-position: center; background-repeat: no-repeat; display: block !important} body.login{ background-size: cover !important; background-position: center bottom !important; align-content: center; justify-items: center;} #nav, .login .language-switcher, .privacy-policy-page-link, .login #nav a[href*='lostpassword']{ display: none !important} #loginform{ margin-bottom: 0} div#login{ padding: 1em 3.5em; box-shadow: 1px 5px 10px rgba(0, 0, 0, 0.1); width: 100%; max-width: 420px; background-color: white; border-radius: 12px !important; margin: 1em 0; border: solid 1px #d7d7d7;} @media only screen and (max-width: 767px){ div#login{ width: 80%;}} form#loginform{ box-sizing: border-box; width: 100%; justify-self: center; padding: 0; border: none !important; box-shadow: none; overflow: visible; gap: 20px; display: flex; flex-direction: column;} .wp-core-ui .button-group.button-large .button, .wp-core-ui .button.button-large{ background-color: #019867; width: 100%; font-weight: bold; border-radius: 12px; padding: .5em; transition: all .15s linear;} .wp-core-ui .button-group.button-large .button, .wp-core-ui .button.button-large:hover{ opacity: .7;} div#wlcms-login-wrapper{ align-content: center; align-content: center; justify-content: center; justify-items: center; height: 100svh;} .login #backtoblog, .login #nav{ padding: 0; margin-top: 2em;} .login form .input, .login form input[type=checkbox], .login input[type=text]{ border: solid 1px #c1c1c1; border-radius: 10px; padding: .3em; margin: 0 !important;} ::before{ color: #019867;} .login .button.wp-hide-pw{ height: 100%; border-radius: 10px;}