*,*::before,*::after {
  box-sizing: border-box;
}

body {
	margin: 0;
	padding: 0;
	font-family: 'Roboto', sans-serif;
	font-size: 15px;
	background-image: url(/img/gradient.svg);
	background-repeat: repeat;
	background-attachment: fixed;
	background-position: 50% 50%;
	background-clip: border-box;
	background-origin: padding-box;
	background-size: 100% 100%;
	
	display: flex; 
	flex-direction: column; 
	justify-content: center; 
	min-height: 100vh;

	color: #e1e1e1;

	min-width: 320px;
}

.hidden {display: none;}

.brand {width: 100%; max-width: 280px; margin: 0 auto 20px auto;}
.brand a {display: block; padding-bottom: 19.3%; background: url(https://i1.poltava.to/img3/poltava-logo.svg) no-repeat center center; background-size: contain; }

#login-form {width: 100%; max-width: 300px; margin: 0 auto; padding: 0 10px;}

.message {padding: 7px 12px; color: #fff; text-align: center; margin-bottom: 20px; font-weight: bold;}
.message-error {background-color: #ff5555;}
.message-success {background-color: #5cb85c;}

.field-row {display: flex; align-items: center; margin: 10px 0; flex-wrap: wrap;}
.field-row .name {font-weight: bold; margin-right: 5px; flex: 1 0 50px; padding-right: 10px;}
.field-row .input {flex: 3 0 100px;}
.field-row .input input {width: 100%; height: 40px; font-size: 15px; box-sizing: border-box; padding-left: 0.5em; padding-right: 0.5em;}

.centered-row {display: flex; justify-content: center;}
.centered-row input[type=checkbox] {margin: 0;}
.centered-row label {margin-left: 10px;}

.button-row {margin: 25px; text-align: center;}
.button-row button {box-sizing: border-box; padding: 5px 10px; font-size: 15px;}