body, html {    height: auto;    margin: 0;    padding: 0;line-height:1.3;background-color: #e4e4e4;}
body.login
 {min-height: calc(100vh - 120px);position:relative;padding:60px;display:flex;flex-wrap:wrap;justify-content:center;align-items:center}
body.login:before {content:"";position:absolute;top:30px;left:30px;width:calc(100% - 60px);height:calc(100% - 60px);z-index:1;background-size: cover;background-position: center;background-repeat: no-repeat;border-radius:30px;}
body.login:after {content:"";position:absolute;top:30px;left:30px;width:calc(100% - 60px);height:calc(100% - 60px);z-index:2;border-radius:30px; background: linear-gradient(90deg, var(--color-green) 10%, var(--color-blue) 90%);opacity:.85}

body {	font-family: var(--font-default);font-size: 14px;color: #000;margin: 0;}
p {margin:0;}




#login, .login-form {
    display: block;
    position: relative;
    margin: 0 auto;
    box-sizing: border-box;
	border: 1px solid #E4E4E4;
    background: #fff;
    padding: 45px 60px;
    border-radius: 30px;
    z-index: 10;
    max-width: 420px;
    width: 100%;display:flex;flex-wrap:wrap;
}
.login h1 a {    background-image: url(../images/gemeente-goeree-overflakkee-logo.svg);       background-size: contain;        width: 100%;    height: 51px;cursor:pointer; outline:0;margin-bottom:30px;}

.login form {width:100%;overflow:visible!important;    margin: 0;    padding: 0;    font-weight: 400;    overflow: hidden;    background: none;    border: none;    box-shadow: none;}

#login > * {width:100%;}



form:before{content:"Samen in beweging 2025-2028";    color: #000;
    text-align: center;
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;font-family:var(--font-bold);
   margin:0 auto 30px;display:block;    max-width: 270px;}


.login label {    display: block;    color: #000;    text-transform: none;    font-size: 14px;    margin-bottom: 0px;font-weight:400;}


.login form .forgetmenot{float:none;  }
p.forgetmenot, p.login-remember {    display: flex;    flex-wrap: wrap;    align-items: center;}

.login form .forgetmenot input, p.login-remember input {display:none;}
.login form .forgetmenot label, p.login-remember label {    font-size: 14px; font-weight:400;   line-height: 1;    padding-left: 30px;    text-transform: none;    color: #000;display: block;position:relative;}
.login form .forgetmenot label:before, p.login-remember label:before {box-sizing:border-box;width:20px;height:20px;border:1px solid #E4E4E4;border-radius:50%;left:0;top:-4px;position:absolute;content:"";}
.login form .forgetmenot input:checked + label:after, p.login-remember input:checked +  label {width:14px;height:14px;background:var(--color-blue);border-radius:50%;left:3px;top:-1px;position:absolute;content:"";}





input[type=text]:focus, input[type=search]:focus, input[type=radio]:focus, input[type=tel]:focus, input[type=time]:focus, input[type=url]:focus, input[type=week]:focus, input[type=password]:focus, input[type=checkbox]:focus, input[type=color]:focus, input[type=date]:focus, input[type=datetime]:focus, input[type=datetime-local]:focus, input[type=email]:focus, input[type=month]:focus, input[type=number]:focus, select:focus, textarea:focus{box-shadow:none	}
.login form .input, .login input[type=text] {height:45px;margin:10px auto 20px;   display: block;    color: #000;    font-size: 18px;    width: 100%;    padding: 8px 16px;      outline: none;    border-radius: 0;    background-color: #fff;   border-radius: 30px;
border: 1px solid #E4E4E4;}


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



.login #backtoblog a, .login #nav a {color:#000;font-size:12px;text-decoration:underline}
.login #nav a:hover, .login #nav a:focus, .login #backtoblog a:hover, .login #backtoblog a:focus{    color: var(--color-blue);}
p#backtoblog {    margin-bottom: 0;    margin-top: 0px;    text-align: center;}



.login #nav {
    text-align: center;
    border-top: none;
    text-align: left;
    margin-top: 0px;
    padding-top: 0px;
    width: 50%;
    padding: 0;
}

.login #backtoblog {width:50%;text-align:right;padding:0;}



.login .privacy-policy-page-link {margin-top:10px;}

a.privacy-policy-link {color:#000;font-size:10px;}
a.privacy-policy-link:hover, a.privacy-policy-link:focus {color:#C03E14;}

#login form p.submit, .login-submit, form p.submit{margin-top:30px;}

.login.wp-core-ui .button-primary, .button-primary {
	line-height:1;
	      box-shadow: none;
    text-decoration: none;
    text-shadow: none;
    color: #fff;
    font-size: 14px;
    text-transform: none;
    margin-bottom: 45px;
    padding: 13px;
    border-radius: 20px!important;
    display: block;
    width: 100%;
    font-weight: 400;
    background-color: var(--color-blue);
    border: none;
    cursor: pointer;
    height: auto;
	text-align:center;float:none;
}
.login.wp-core-ui .button-primary:hover, .login.wp-core-ui .button-primary:focus, .button-primary:hover, .button-primary:focus {
	    background-color: #000;color:#fff
}
.wp-core-ui .button, .wp-core-ui .button-secondary, .wp-core-ui .button-secondary:hover, .wp-core-ui .button.hover, .wp-core-ui .button:hover {color:var(--color-blue)}
.login .button.wp-hide-pw:focus {border-color:var(--color-blue)}





.login-page {padding:30px;}
.login-screen{position:relative;border-radius: 30px;min-height:calc(100vh - 60px);overflow:hidden;display:flex;align-items:center;justify-content:center;padding:30px;background-size:cover;background-position:center center;}
.login-screen:before {content:"";z-index:2;width:100%;height:100%;left:0;top:0;position:absolute;
 background: linear-gradient(90deg, var(--color-green) 10%, var(--color-blue) 90%);opacity:.85}


.login-brand, .login-brand img {display:block;width:100%;height:51px;margin-bottom:30px;object-fit:contain}







a:focus {box-shadow:none}

a, .button-primary {
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
	
}

@media screen and (max-width:768px){
	form:before {font-size:18px;max-width:200px;}
	.login-brand, .login-brand img, .login h1 a {height:41px;margin-bottom:20px}
	.login-screen {    min-height: calc(100vh - 30px);padding:20px;}
	.login-page {    padding: 15px;}
	
	#login, .login-form { padding:30px;}
	body.login:before, body.login:after, #login, .login-form, .login-screen {border-radius:15px;}
	
	body.login:before, body.login:after {    top: 15px;    left: 15px;    width: calc(100% - 30px);		height: calc(100% - 30px);}
	body.login {    min-height: calc(100vh - 70px);    padding: 35px;}
	
	.login label, .login form .forgetmenot label, p.login-remember label {font-size:12px}
	.login form .input, .login input[type=text] {margin-top:5px}
	.login.wp-core-ui .button-primary, .button-primary {margin-bottom:30px}
}