html {
	overflow: hidden;
	background-color: white;
}

/* Hide SPA until vue is ready */
[v-cloak] {display: none;}

/* Display login form stretched to width of device */
@media only screen and (max-width: 767px)  {

	#LayoutAuth .footer {
		background: linear-gradient(0deg, rgba(255,255,255,1) 35%, rgba(245,245,245,1) 100%);
	}

}

/* Display login form as floating box */
@media only screen and (min-width: 768px)  {

	#LayoutAuth {
		margin: 0 auto;
		margin-top: 15vh;
		max-width: 450px;
	}

	#LayoutAuth .footer {
		background-color: white;
	}

}

#LayoutAuth .card {
	box-shadow: none;
}

/* Fix logo height to avoid oversized logo - could/should this be replaced with a 60px image? */
#LayoutAuth #logo {
	height: 60px;
}

#LayoutAuth .card-content {
	background-color: whitesmoke;
}

/* Adjust notification div to align with form fields */
#LayoutAuth .notification {
	padding: 0.25rem !important;
    margin-bottom: 1.25rem !important;
	background-color: gainsboro;
}

/* Override is-primary behaviour - replace with custom is-neutral class? */
#LayoutAuth .input:hover, .input:focus {
	border-color: #dbdbdb !important;
	box-shadow: inset 0 1px 2px hsla(0,0%,4%,.1);
}

/* Override is-primary behaviour - replace with custom is-neutral class? */
#LayoutAuth .icon.has-text-primary {
	color: #363636 !important;
}

/* Display anchor with underline */
#LayoutAuth .is-link {
    text-decoration: underline;
}

/* Override is-primary behaviour (checked = true) - replace with custom is-neutral class? */
#LayoutAuth .b-checkbox.checkbox input[type=checkbox]:checked+.check {
    background-color: #363636 !important;
	box-shadow: none !important;
}

/* Override is-primary behaviour  (checked = false) - replace with custom is-neutral class? */
#LayoutAuth .b-checkbox.checkbox input[type=checkbox]+.check {
	border: 1px solid #dbdbdb !important;
	background-color: white !important;
	box-shadow: inset 0 1px 2px hsla(0,0%,4%,.1);
}

/* Override is-primary behaviour (hover) - replace with custom is-neutral class? */
#LayoutAuth .b-checkbox.checkbox:hover input[type=checkbox]+.check {
	border: 1px solid #dbdbdb !important;
	box-shadow: inset 0 1px 2px hsla(0,0%,4%,.1);
}

#LayoutAuth .footer {
	color: gainsboro;
}