* {
	margin: 0;
	padding: 0;
	border:0;
	outline:none;

	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}

html {
	height: 100%;
}

* html body {
	height: 100%;
}

body {
	position: relative;
	margin: 0px;
	padding:0px;
	width: 100%;
	height: 100%;
	min-height: 100%;
	font: 20px/28px Roboto;
/*	font: 16px/22px Roboto;*/
/*	font: 15px/20px 'PTSansRegular', Arial, Helvetica, sans-serif;*/
/*	font-size: 15px;*/

/*	color: #565656;*/
	color:rgb(87, 113, 126);

	background:#ffffff;
	overflow: auto;
}


/* ОБЩИЕ ТЭГИ */
h1 {
	font-size:32px;
	font-weight:normal;
	margin:0 0 25px 0;
}
h2 {
/*	font-size:32px;*/
	font-size:24px;
	font-weight:normal;
	margin:25px 0;
	text-align:center;
}
h2 span {
	display:block;
	margin:7px 0 0 0;
	font-size:16px;
	font-weight:normal;
	font-style:italic;
}

h3 {
	font-size:17px;
	font-weight:bold;
	margin:20px 0 10px 0;
}

input[type="text"], input[type="password"], input[type="radio"], select, textarea {
	padding:5px;
	font-family:Roboto;
	background-color:rgb(87, 113, 126);
	border-bottom:1px solid rgb(87, 113, 126);

/*
	border-radius:5px;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
*/
}

input[type="text"], input[type="password"], select {
/*	height:22px;*/
}

p {
	margin:5px 0;
}


:-ms-input-placeholder {
	color:#ccc;
	font-style:italic;
}
::-ms-input-placeholder {
	color:#ccc;
	font-style:italic;
}
::-webkit-input-placeholder {
	color:#ccc;
	font-style:italic;
}
:-moz-placeholder {
	color:#ccc;
	font-style:italic;
}
::-moz-placeholder {
	color:#ccc;
	font-style:italic;
}


/* ТЭГИ СО СТИЛЯМИ */
.row {
	display:flex;
	margin:0 0 50px 0;
	flex-direction:row;
}
.col {
	margin:0 3% 0 0;
	width:100%;
	box-sizing: border-box;
}
.col:last-child {
	margin-right:0;
}
label {
	display:block;
	margin:0 0 10px 0;
	padding:0;
	font-size:16px;
	line-height:18px;
	
	text-transform:normal;
}

sup {
	color:#ff0000;
	font-weight:800;
}


.col:hover input, .col:hover select, .col:hover textarea {
	border-color:#0101cc;
}
input:hover[type="text"], select:hover, textarea:hover {
	border-color:#0101cc;
}

.block-left {
	float:left;
	width:20px;
}
.block-right {
	margin-left:20px;
	float:none;
	display:block;
}

.hide {
	display:none !important;
}
/* ******************************** */


.button-panel {
	margin:25px 0 0 0;
}

.required {
	color: #cc0101;
	font-size: 20px;
	line-height:0;
}
.required.clear {
	line-height:100%;
}

a.build-in {
	margin:0 5px;
}

/***************************************************/

a.button {
	display: inline-block;
    padding: 1.5em 0;
    width:80%;
    max-width:650px;
    min-width:300px;
    font-size:18px;
    color: #333;
    text-align: center;
	text-transform:uppercase;
	text-decoration:none;
    border: 1px solid #57717e;

	border-radius:100px;
	-webkit-border-radius:100px;
	-moz-border-radius:100px;
	cursor: pointer;
}

a.button:hover {
	text-decoration:none;
}

/***************************************************/

a.build-in {
	margin:0 5px;
}

img.asterix {
	margin:0 0 0 3px;
}

ul.plain {
	list-style:none;
	margin:0;
	padding:0;
}

ul.plain li {
	float:left;
	margin:2px 10px 2px 0;
}

/* Для списков с чекбоксами */
ul.checklist {
	list-style:none;
	margin:10px;
	padding:0;
}

ul.checklist li {
	padding:2px;
}


/* ОБЩИЕ СТИЛИ */
.comment {
	font-style:italic;
	color:#808080;
}

.left {
	text-align:left;
}

.right {
	text-align:right;
}

.center {
	text-align:center;
}

.nano {
	width:9%;
}

.micro {
	width:14%;
}

.small, .small-2 {
	width:24%;
}

.average {
	width:34%;
}

.normal, .normal-2 {
	width:49%;
}

.big, .big-2{
	width:99%;
}

.free {
	float:left;
	margin:0 20px 0 0;
}

.notes {
	padding:15px;
	font-style:italic;
	color:inherit;
}





.light {
	background:#eee;
}

.upper {
	text-transform:uppercase;
}

.confirm {
	
}
.confirm .col:nth-child(2) {
	text-align:right;
}


textarea {
	height:100px;
}

input[type="checkbox"], input[type="radio"] {
	display:inline-block;
	margin:0px 5px 5px 0 !important;
	padding:0 !important;
	width:15px !important;
	height:15px !important;
	vertical-align:middle;
}

input, select, textarea {
	position:relative;
}

input[type="text"], select, textarea {
	padding: 0.7em;
	width:100%;
	max-width: 100%;
	line-height: normal;
	font-family:Roboto;
	font-size:18px;
	font-weight:400;
	color: rgb(87, 113, 126);
	color:#444;

/*	border:0;
    border-bottom: solid 1px rgb(87, 113, 126);*/
    border: solid 1px rgb(87, 113, 126);
    border: solid 1px #ccc;

	background:transparent;
	outline:none;

	-webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/* Error Field */
.error {
	padding:0.7em 1em !important;
	border:1px solid #ff0000 !important;
}


.message {
	position: fixed;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-content: center;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(255, 255, 255, 0.5);
}
.message .inner {
	position:relative;
	display:inline-block;
	padding: 1.5em 2em;
	max-width:90%;
	text-align: left;
	color: #fff;
	background: #f95d51;
	border-radius:4px;
	overflow:hidden;
}
.message .close {
	position: absolute;
	display:inline-block;
	top: 5px;
	right:5px;
	width:24px;
	height:24px;
	text-decoration:none;
	background:#fff;
	border-radius:4px;
	cursor:pointer;
}
.message .close:after {
	position:absolute;
	top:-2px;
	left:7px;
	content:'x';
	font-weight:bold;
	color:#f95d51;
}


/* Имитируем PLACEHOLDER для SELECT */
select:required:invalid {
	font-style:italic;
	color: #ccc;
}
option[value=""][disabled] {
	display: none;
}
option {
	font-style:normal;
	color: #444;
}


textarea {
	min-height:100px;
}

/* ОБЯЗАТЕЛЬНЫЕ ПОЛЯ */
.is-need {
	color:#0000ff !important;;
}

.is-need input, .is-need select, .is-need textarea {
	color:#000;
	background:#f0f0ff;
	border:1px solid #0000ff;
}

.is-need input[type="checkbox"] {
	color:#0000ff;
}

.is-bold {
	font-weight:bold; !important;
}

.is-italic {
	font-style:italic; !important;
}


/* Фотографии на форме */
.image {
	height:180px;
	line-height:180px;
	font-size:24px;
	text-align:center;
	color:#888;
	background:#ddd;
	border:1px dashed #000;
	opacity:0.75;

	border-radius:10px;
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
}

.image-active {
	opacity:1;
}

/* Панелька для управления фотографиями */
.edit-panel {
	position:absolute;
	top:10px;
	right:10px;
	line-height:10px;
}

.edit-panel a {
	padding:2px 5px;
	font-size:10px;
	color:#000;
	text-decoration:none;
	background:#fff;	
}

.edit-panel a:hover {
	text-decoration:underline;
}




.ms-active {
	background-color:#65adff !important;
}

.field-error {
	background-color:#ffcccc !important;
	border:1px solid #ff0000 !important;
}

.spinner {
	position:fixed;
	z-index: 100000;
	top:0;
	left:0;
	width: 100%;
	height: 100%;
	background: #f0f0f0 url('/img/ajax-loader-rectangle.gif') no-repeat center center;
	opacity:0.75;
}

/* Зависимый справочник */
.depending {
	color:#0000ff;
	font-weight:bold;
}

.form-css-editor {
	width:950px;
	height:500px;
	overflow:auto;
}

#email-template-preview {
	padding:5px;
	border:1px solid #ddd;
	display:none;
}


/* Progress */
.progress {
	position:fixed;
	width:100%;
	height:100%;
	top:0;
	left:0;
	background:rgba(255, 255, 255, 0.2) url(/img/ajax-loader-rectangle.gif) no-repeat center;
}


/* Самые важные стили */
.param-active {
	border-color: #cc0101 !important;
}
.row.param-active {
	border:0;
	background:#ffebee;
}

@media all and (-webkit-min-device-pixel-ratio:0) {
	input[type=checkbox].param-active {
		outline-offset: -1px;
		outline: 2px solid #ff0000;
	}
}

.form-design-wrapper {
	width:100%;
}


/* 650px */
@media screen and (max-width: 650px) {
	body {
		font-size:16px;
	}

	.confirm .col, .confirm .col:nth-child(2) {
		text-align:center;
	}
	.label {
/*		margin:5px 0;*/
	}

	input[type="text"], select, textarea {
		font-size:18px;
	}
	
	a.button {
	    padding: 1em 2em;
	    font-size:20px;
	}
	
	.row {
		display:block;
		margin:0;
	}
	.col {
		margin-top:25px;
	}


	input[type="text"], select, textarea {
		margin:0 0 5px 0;
	}


	.button-panel {
		margin:10px 0 0 0;
	}
}