:root {
	--giz-blue: #224968;
	--pf-global--primary-color--100: var(--giz-blue);
	--pf-global--primary-color--dark: var(--giz-blue);
	--pf-global--primary-color--dark-100: var(--giz-blue);
	--pf-global--active-color--100: var(--giz-blue);
	--pf-global--BackgroundColor--dark-100: var(--giz-blue);
	--pf-global--link--Color: var(--giz-blue);
	--pf-global--link--Color--dark: var(--giz-blue);
};

.pf-v5-c-login {
    align-items: start;
}

.pf-v5-c-login__header {
    --pf-v5-c-login__header--xl--MarginTop: 0;
}

.login-pf a {
	color: var(--giz-blue);
}

.login-pf body {
	background: white url('../img/background.jpg') no-repeat 50% 50% fixed;
	background-size: cover;
	height: auto;
	min-height: 100%;
}

/* Avoid iPhones zooming in on input fields */
input, textarea {
	font-size: 16px !important;
}

#login-logo {
	display: block;
    margin-left: auto;
	margin-right: auto;
	width: 300px;
	padding-top: 1vh;
	padding-bottom: 2vh;
}

/* Ensure login and cancel button keep some distance */
#kc-cancel {
        margin-top: 5px;
}

@media(max-height: 900px){
	#login-logo {
		width: 200px;
	}
}

/*
767 is the breakpoint when Keycloak displays the mobile friendly view.
*/
@media(max-width: 767px){
    /* Give the login box some margin to have some room on the screen edges */
    .pf-v5-c-login__main {
	    margin: 0px 8px;
	}
	#login-logo {
		width: 200px;
	}
}

@media(max-height: 670px){
	#login-logo {
		width: 150px;
	}
}