@charset "utf-8";

:root {
	--siteDefaultFontColor: #000;
	--siteDefaultFontSize: 16px;
	--siteDefaultLineHeight: 1.2em;
	--urlColor: #000;
	--urlColorActive: #8999CF;
	--siteBgColor: #fff;
	--successFontColor: #00A000;
	--errorBgColor: #f0fff0;
	--successFontSize: 1.2em;
	--errorFontColor: #A00000;
	--errorBgColor: #fff0f0;
	--errorFontSize: 1.2em;
}

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	border: 0;
}
* [draggable="true"] {
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}
html {
	scroll-behavior: smooth;
}

body {
	background-color: var(--siteBgColor); -webkit-text-size-adjust: none; margin: 0; padding: 0;
	color: var(--siteDefaultFontColor); font-size: var(--siteDefaultFontSize); line-height: var(--siteDefaultLineHeight); text-decoration: none;
}
img {
	outline: none; border: none; vertical-align:middle;
}
a {
	color: var(--urlColor); text-decoration:none; outline: none; border: none;
	transition: color 0.3s ease-in;
}
a:hover {
	color: var(--urlColorActive);
}


.container {
    width: 600px; min-height: 200px; border: #ccc 1px solid; border-radius: 5px; position: absolute; top: 10%; left: 50%; transform: translate(-50%, 0);
	box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), 0 2px 3px 0 rgba(0, 0, 0, 0.19);
}
.container > .header {
	padding: 4px 10px; min-height: 16px;
    background: linear-gradient(180deg,rgba(137, 153, 207, 1) 0%, rgba(203, 212, 238, 1) 26%, rgba(137, 153, 207, 1) 50%, rgba(203, 212, 238, 1) 78%);
	border-bottom: 1px #000 solid;
}
.container > .content {
	padding: 30px 40px 40px 40px;
}

.form > div.item {
	padding: 5px 0; text-align: center;
}
.form > div.item input {
	width: 100%; text-align: center; padding: 10px 20px; border-radius: 5px; box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, 0.2), inset 0 1px 2px 0 rgba(0, 0, 0, 0.19), inset 0 1px 2px 0 rgba(0, 0, 0, 0.19), inset 0 1px 2px 0 rgba(0, 0, 0, 0.19);
}
.form > div.item.error input {
	background-color: var(--errorBgColor); color: var(--errorFontColor);
}
.form > div.button {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); grid-gap: 10px; margin: 20px 0; cursor: pointer;
}
.form > div.button button {
	background: linear-gradient(180deg,rgba(250, 250, 250, 1) 0%, rgba(230, 230, 230, 1) 28%, rgba(238, 238, 238, 1) 37%, rgba(250, 250, 250, 1) 42%, rgba(255, 255, 255, 1) 78%);
	border: #ccc 1px solid; border-radius: 5px; padding: 5px 10px;
	font-weight: bold; font-size: 1.2em; line-height: 1.2em; cursor: pointer;
}
.form > div.succMessages:not(:empty) {
	color: var(--successFontColor); font-size: var(--successFontSize); background-color: var(--successBgColor); line-height: 1.2em; padding: 10px; margin: 0 0 20px 0;
}
.form > div.errors:not(:empty) {
	color: var(--errorFontColor); font-size: var(--errorFontSize); background-color: var(--errorBgColor); line-height: 1.2em; padding: 10px; margin: 0 0 20px 0;
}
.form > div.messages:not(:empty) {
	line-height: 1.2em; padding: 10px; margin: 0 0 20px 0;
}


@media only screen and (max-width: 640px) {
  .container {
	width: 90%; top: 5%;
  }
}