html {
    font-family: system-ui, -apple-system, -apple-system-font, 'Segoe UI', 'Roboto', sans-serif;
    -webkit-font-smoothing: antialiased;
	font-size: 14px;
	background: #000000 url("../img/login_background.jpg") no-repeat left 0px top 0px;
	background-size: cover;
	width: 100vw;
	height: 100vh;
	min-width: 400px;
	min-height: 400px;
	margin: 0;
	padding: 0px;
}

.login-container {
	background: #FFFFFF url("../img/pp-logo.svg") no-repeat left 30px top 15px;
	background-size: 185px 98px;
	box-sizing: border-box;
	position: absolute;
	left: 100px;
	top: 100px;
	width: 300px;
	padding: 120px 20px 20px 50px;
	display: inline-block;
	border: 1px solid #005500;
	border-radius: 7px;
	-webkit-box-shadow: 20px -10px 5px 0px rgba(0,0,0,0.75);
	-moz-box-shadow: 20px -10px 5px 0px rgba(0,0,0,0.75);
	box-shadow: 20px -10px 5px 0px rgba(0,0,0,0.75);
}

.error {
	font-size: 12px;
	color: #FF0000;
}

.fleet-stat {
	position: absolute;
	right: 20px;
	font-size: 72px;
	color: #888888;
	text-shadow: 5px -4px 8px #000000;
}

/* Mobile-specific styles */
@media screen and (max-width: 768px) {
    .login-container {
        position: fixed;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 90%;
        max-width: 300px;
        background-position: center 10px;
    }

    .fleet-stat {
		white-space: nowrap;
        font-size: 36px;
        left: 50%;
        right: auto;
        transform: translateX(-50%);
    }
}