@charset "utf-8";

@media all {
	:root {
		--color-form: rgba(0, 0, 0, 0.4);
		--color-text: #fff;
		--color-border: #777;

		--color-text-title: #fff;
		--title-size: 130%;
		--color-form-border: #999;

		--logo-height: 49px;
		--logo-width: auto;
	}

	body {
		font-family: Arial, Helvetica, sans-serif;
		font-size: 16px;
		background-color: var(--login-background);
	}

	#wrapper {
		width: 100%;
		margin: auto;
	}

	form {
		text-align: center;
		margin-bottom: 12px;
		/*padding: 8% 6% 0 6%;*/
		padding: 8% 2% 0 2%;

		position: relative;
		min-height: 426px;
	}

	.form_inner {
		margin: 0 auto;
		display: table;
		width: 100%;

		color: var(--color-text);
		max-width: 420px;

		background-color: var(--color-form);
		padding: 3vh 3%;
		/*	border:1px solid var(--color-form-border);*/
		border-radius: 3px;

		box-shadow: 0 4px 23px 5px rgba(0, 0, 0, 0.2), 0 2px 6px rgba(0, 0, 0, 0.15);
	}

	.form_group {
		display: table-row;
		height: 40px;
		position: relative;
		text-align: left
	}

	.form_caption, .form_item, .form_buttons, .form_error, .form_info {
		/*display: table-cell; */
		padding: 5px 0;
	}

	.form_caption, .form_error, .form_info {
		width: 14em;
		vertical-align: top;
		padding: 17px 0 0 0;
	}

	.form_error {
		color: #fff;
		width: 100%;
		vertical-align: middle;
		padding: 10px 0;
		margin: 7px 0 0;
		background: #d00;

		max-width: 450px;
	}

	.form_error p,
	.form_info p {
		padding: 0 10px;
		margin: 0;
	}

	.form_info {
		color: #fff;
		width: 100%;
		vertical-align: middle;
		padding: 7px 0;
		margin: 7px 0 0;
		background: #00a1ff;

		max-width: 450px;
	}

	.form_item {
		vertical-align: middle;
	}

	form input,
	form input[type=text],
	form input[type=password] {
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		width: 100%;
		height: 38px;
		padding: 8px 14px;
		border: 1px solid var(--color-border);
		-webkit-border-radius: 3px;
		-moz-border-radius: 3px;
		border-radius: 3px;
		font-size: 100%;
		background: #f4faff;
		outline: 0;
	}

	div {
		line-height: 1;
	}

	.title {
		text-align: left;

		font-size: var(--title-size);
		/*font-weight:bold;*/
		color: var(--color-text-title);
		/*	border-bottom:2px solid var(--color-border); */

		width: 100%;
		padding: 0;
		margin: 30px 0 20px;
		max-width: 450px;
	}

	.logo {
		max-width: var(--logo-width);
		height: auto;
	}

	.logo img {
		height: var(--logo-height);
	}

	form button, form input[type=submit] {
		margin-top: 20px;
		height: 38px;
		font-size: 1rem !important;
		width: 60%;
	}

	form button:hover, form input[type=submit]:hover {
		-webkit-box-shadow: none !important;
		-moz-box-shadow: none !important;
		box-shadow: none !important;
	}

	#footer .caption {
		color: #fff !important;
	}
}

@media (max-width: 600px) {
	form {
		padding: 12% 2% 0 2%;
	}

	.form_inner {
		max-width: 86%;
		padding: 6%;
	}

	form button, form input[type=submit] {
		width: 100%;
	}
}