@font-face {
    font-family: "Roboto";
    src: url("../fonts/Roboto-Medium.ttf") format("truetype");
}

:root {
    --groen: #008F39;
    --zwart: #3D3D3B;
    --roze: #F92C57;
    --grijs: #E0E0E0;
}

body.login {
    background-color: #fff;
    font-family: 'Roboto' !important;
    overflow: hidden;
}

#loginform, #lostpasswordform, #resetpassform {
    border-radius: 9px;
}

#container {
    background-color: var(--groen) !important;
    height: 100%;
}

#loginform label {
    color: var(--zwart);
}

.login > #container > .inner > #login > h1 > a {
    background-image: url('../images/fenj-logo.svg') !important;
    background-position: center !important;
    width: auto !important;
    background-size: 189px 48px;
}

.inner {
    position: relative;
    z-index: 122;
}

.login .button-primary,
#wp-submit {
    background: var(--groen) !important;
    border-color: var(--groen) !important;
    box-shadow: 0 1px 0 var(--groen) !important;
    text-shadow: none !important;
}

.login .button-primary:hover,
#wp-submit:hover {
    background: var(--roze) !important;
    border-color: var(--roze) !important;
    box-shadow: 0 1px 0 var(--roze) !important;
    text-shadow: none !important;
}

.login form .input, .login form input[type=checkbox], .login input[type=text] {
    background: #fff;
    border: 1px solid var(--grijs);
    border-radius: 3px;
}

.login #backtoblog a, .login #nav a {
    text-decoration: none;
    color: #fff !important;
}

.login #nav {
    color: var(--zwart);
    font-size: 12px;
}

.login form .input, .login input[type=password], .login input[type=text] {
    font-size: 14px;
    border-radius: 8px !important;
}

.login .privacy-policy-page-link a {
    color: #fff !important;
}

.dashicons-translation:before {
    color: #fff;
}

.login #login_error, .login .message, .login .success {
    border-left: 4px solid var(--zwart);
    border-right: 1px solid transparent;
    /*border-radius: 0 9px 9px 0;*/
    border-radius: 9px;
}

.wp-generate-pw {
    color: var(--zwart) !important;
    border-color: var(--zwart) !important;
    background: #f6f7f7;
    vertical-align: top;
}

.dashicons-hidden:before, .dashicons-visibility:before {
    color: var(--grijs);
}

.reset-pass-submit #wp-submit {
	width: 100%;
	color: #fff !important;
}

.login #pass-strength-result {
	margin: 5px 5px 16px 0 !important;
	border-radius: 8px !important;
}

.pw-weak #pw-weak {
	margin: 4px 0.25rem 0 0;
}

.pw-weak {
	display: flex;
}

.login .reset-pass-submit .button {
	width: 100%;
}

.language-switcher * {
	color: var(--zwart) !important;
}

#language-switcher-locales, .language-switcher .button {
	border-color: var(--grijs);
	margin-bottom: 0;
	background-color: #fff;
}

#logo-ballon {
    position: absolute;
    bottom: 4px;
    right: 12px;
    overflow: hidden;
}

@media (max-width: 768px) {
    #logo-ballon {
        display: none;
    }

    html,body{
        border: none !important;
        /*border: solid #fff 5px !Important;*/
    }
}

html,body{
    width: 100%;
    height: 100%;
    margin: 0; /* Space from this element (entire page) and others*/
    padding: 0; /*space from content and border*/
    border: solid #fff 26px;
    /*border-width: thin;*/
    overflow:hidden;
    display:block;
    box-sizing: border-box;
}