@font-face
{
    font-family: 'strogg';
    src: url('../fonts/strogg.ttf') format('ttf'), url('../fonts/strogg.woff') format('woff'), url('../fonts/strogg.woff2') format('woff2');
}

html
{
	font-size: 2.5em;
	padding: 0;
	margin: 0;
}

body
{
	margin: 8px;
	padding: 8px;
}

.formfield
{
	margin-bottom: 4px;
	
	& > input,
	& > button
	{
		margin: 8px;
		padding: 8px;
		width: 93.75%;
		min-height: 64px;
		font-weight: bold;
		font-size: 24px;
	}	
	
	& > button
	{
		cursor: pointer;
	}
	
	& > input
	{
		border: none;
	}
	
	& > button
	{
		border: none;
	}
	
	& > label
	{
		display: block;
		font-weight: bold;
		font-size: 0.75em;
	}
}

.app
{
	&.empty
	{
		& > .app_username {display: none;}
		& > .app_password {display: none;}
		& > .app_bikename {display: none;}
		& > .app_login {display: none;}
		& > .app_logout {display: none;}
		& > .app_rentals {display: none;}
		& > .app_rent {display: none;}
		& > .app_pause {display: none;}
		& > .app_finish {display: none;}
		& > .app_open {display: none;}
	}
	
	&.logged_out
	{
		& > .app_username {}
		& > .app_password {}
		& > .app_bikename {display: none;}
		& > .app_login {}
		& > .app_logout {display: none;}
		& > .app_rentals {display: none;}
		& > .app_rent {display: none;}
		& > .app_pause {display: none;}
		& > .app_finish {display: none;}
		& > .app_open {display: none;}
	}
	
	&.logged_in
	{
		& > .app_username {display: none;}
		& > .app_password {display: none;}
		& > .app_bikename {}
		& > .app_login {display: none;}
		& > .app_logout {}
		& > .app_rentals {}
		& > .app_rent {}
		& > .app_pause {display: none;}
		& > .app_finish {display: none;}
		& > .app_open {display: none;}
	}
}

.app_logo
{
	width: 60%;
	margin: 20%;
	filter: saturate(0);
	
	& > img
	{
		width: 100%;
	}
}

.app_rentals
{
	margin: 0;
	padding: 0;
	
	& > li
	{
		list-style-type: none;
	}
}

.rental
{
	&.prior
	{
		& > .rental_bike {}
		& > .rental_start {}
		& > .rental_pause {display: none;}
		& > .rental_finish {display: none;}
		& > .rental_open {display: none;}
	}
	
	&.running
	{
		& > .rental_bike {}
		& > .rental_start {display: none;}
		& > .rental_pause {}
		& > .rental_finish {}
		& > .rental_open {}
	}
	
	&.paused
	{
		& > .rental_bike {}
		& > .rental_start {display: none;}
		& > .rental_pause {display: none;}
		& > .rental_finish {display: none;}
		& > .rental_open {}
	}
}