
/* файл стилей для работы форм */

/* обязательные стили */
#serviceBlock { display:none; }
form { position:relative; }
label, .label, .radio_block { display:block; margin:0 0 20px; position:relative; font-size:16px; }
input:not( [type="checkbox"] ):not( .mce-textbox ):not( [type="radio"] ), textarea, select  
	{ display:block; width:100%; padding:0; height:40px; line-height:30px; font-size:16px; color:#4c4c4c; border:1px solid #ccc; background:#fff; }
input[type="text"]:focus, input[type="password"]:focus, textarea:focus, select:focus { border-color:#003399; color:#003399; }

input:not( [type="checkbox"] ):not( .mce-textbox ):not( [type="radio"] ){ text-indent:5px; }

/* стили для tinyMCE */
input.mce-textbox { display:inline-block; line-height:20px; height:28px; /* min-width:300px; портит форму редактирования изображения в редакторе */ }

select { padding:4px 0; }
option { padding:3px 10px 3px 3px; }
textarea { height:63px; text-indent:0; padding:0 5px; }

label .title { display:block; position:absolute; left:1px; top:5px; height:30px; line-height:30px; padding:0 80px 0 10px; color:#777; background:#fff; opacity:1!important; transition:.3s; }
	label input:focus + .title, label select:focus + .title, .up .title, label textarea:focus + .title { top:-10px; height:20px; line-height:20px; padding:0 10px; font-size:12px; color:#003399; }
	label .title i { margin-right:5px; }
.agreement_block { position:relative; font-size:16px; }

.errorInfo { display:flex; align-items:center; justify-content:center; position:absolute; top:0; left:0; right:0; bottom:0; padding:0!important; line-height:1.2; text-indent:0; margin:0!important;
	text-align:center; color:red!important; border:1px solid red!important; opacity:0; background:#fff; z-index:1; transition:.5s; }

.checkbox_block { position:relative; min-height:30px; margin:0 0 10px; overflow:hidden; }
	.checkbox_block .titl { display:inline-block; vertical-align:top; height:40px; }
	.checkbox_block .link_text { margin-left:30px; }

.checkbox { display:block; float:left!important; position:static; top:0; left:0; margin:0; cursor:pointer; }
	.checkbox + .checkbox { margin-left:20px; }
	.checkbox input { display:none!important; }
		.checkbox input + i, .checkbox input + i + i, .checkbox input + .errorInfo + i { display:inline-block; position:relative; width:20px; height:20px; margin:0 5px 0 0; text-align:center; vertical-align:top; border:1px solid transparent; }
			.checkbox input + i.all:before { display:none; }
			.checkbox input:checked + i.all:before { display:inline-block; }
			.checkbox input + i:not([class]), .checkbox input + i.all { border-color:#ccc; }
			.checkbox input:checked + i:not([class]):before { content:'\e80a'; font:16px 'fontello_form'; position:absolute; left:0; right:0; margin:auto; }
	.checkbox .errorInfo { width:100%; top:0; bottom:0; /* margin:-40px 0 0 !important; */ }

.checkbox .on, .checkbox .off { margin:0!important; width:30px!important; height:30px!important; text-align:left!important; }
.checkbox input + i.on { display:none;  }
.checkbox input + i.on + i.off { display:inline-block; }
.checkbox input:checked + i.on { display:inline-block; }
.checkbox input:checked + i.on + i.off { display:none; }

.cleanFormPole { display:none; position:absolute; right:3px; bottom:3px; height:34px; min-height:auto; width:34px; font-size:28px; line-height:27px; padding:0; text-indent:0!important; text-decoration:none!important; text-align:center; border-radius:50%; border:1px solid transparent; background:#ccc; z-index:1; }
	input[disabled] + .cleanFormPole { display:none !important; }
	.wrap .cleanFormPole:hover { border-color:red; color:red; background:#e1e1e1; }
	.wrap label:hover .cleanFormPole { display:block; }
textarea + .cleanFormPole { bottom:10px; }

.errorInfo.visible { opacity:1; }

.form_container { position:relative; }

.radio { display: inline-flex; align-items:center; margin:0; vertical-align:top; padding:0; cursor:pointer; overflow:hidden; }
	.radio + .radio { margin-left:20px; } /**/
	.radio input[type="radio"]{ display:none; }
	.radio input + i, .radio input + i + i { display:inline-block; position:relative; margin:0 5px 0 0!important; padding:0!important; text-indent:0!important; line-height:17px; vertical-align:top; text-align:center; color:#ccc; }
		.radio input + i:not([class]), .radio input + i + i:not([class]) { width:22px; min-width:22px; height:22px; border-radius:50%; border:1px solid #ccc; }
		.radio i.on, .radio i.off { border-color:transparent!important; margin:0 5px 0 0; text-align:left!important; font-size:20px; line-height:17px; }	
		.radio input + i.on { display:none; }
	.radio input:checked + i:not([class]), .wrap .radio:hover input + i:not([class]), .radio input:checked + i.all, .wrap .radio:hover input + i.all { border-color:#003399; }
	.radio input:checked + i:not([class]):before { content:''; display:inline-block; width:12px; height:12px; border-radius:50%; margin:4px 0 0; background:#003399; }
		.radio input:checked + i.on { display:inline-block; }
		.radio input:checked + i.on + i.off { display:none; }
	.wrap .radio:hover input + i + span, .radio input:checked + i.all, .radio input:checked + i.on, .radio input:checked + i.off { color:#003399; }
	.radio .titl, .checkbox .titl { display:inline-block; vertical-align:top; }

.select { position:relative; }	
/* 	.select:after { content:'\f107'; font:20px "fontello_form"; height:38px; width:20px; position:absolute; top:1px; right:0; padding-left:10px; line-height:1.8; border-left:1px solid #e1e1e1; background:transparent; z-index:0; color:#a5a5a5; }
		.wrap .select:hover:after { border-color:#ccc; color:#000; }
	.select:before { content:''; position:absolute; height:40px; left:0; right:0; bottom:0; background:#fff; } */
	.select:before { content:'\f107'; position:absolute; top:7px; right:10px; font:22px "fontello_form"; color:#003399; }
	.select .title { z-index:2; }
	.select select { position:relative; z-index:1;
		-webkit-appearance:none;
		-moz-appearance:none;
		appearance:none;
	}

/* оформление */
form { max-height:3000px; min-height:130px; overflow:hidden; transition:1s;/*  width:420px;*/ padding:20px 15px;  background:transparent; }

form.visible_off { max-height:300px; }
	form.visible_off * { opacity:0!important; }
		form.visible_off .info, form.visible_off .info span { opacity:1!important; }

.modalItem.registration label.checkbox { position:static; }
.modalItem.registration .checkbox .errorInfo { height:58px; margin:-22px 0 0; max-width:100%; top:auto; }

/* .chosen + .errorInfo { margin:-100% 0 0; } */

form .info { position:absolute; top:0; right:0; bottom:0; left:0; padding:50px 10px 0; text-align:center!important; z-index:10001; }
	form .info.ok { background:rgba( 123, 219, 100, .7 ); }
	form .info.no { background:rgba( 249, 71, 29, .7 ); }
form .info > span { position:relative; display:inline-block; padding:20px; font-size:20px; background:rgba(255,255,255,.8); }

form .info > span:after { content:'×'; display:block; position:absolute; top:-2px; right:4px; font-size:30px; line-height:1; cursor:pointer; }

.in_work [type="submit"] { opacity:0; }

.in_work:before { content:""; display:block; position:absolute; top:0; right:0; bottom:0; left:0; background:rgba(255,255,255,.7); z-index:10000; }

.in_work:after, .group_actions.in_work div:after, .form_container .loading:after { content:"\e838"; font:30px/1 "fontello_form"; display:block; width:30px; height:30px; position:absolute; left:0; right:0; bottom:15px; margin:auto; color:red; z-index:10000;
	-moz-animation: spin_form 2s infinite linear;
	-o-animation: spin_form 2s infinite linear;
	-webkit-animation: spin_form 2s infinite linear;
	animation: spin_form 2s infinite linear;
}

.upload_zone { position:relative; max-height:30px; min-height:30px; padding:30px 0 0; margin:-16px 0 15px; overflow:hidden; border:1px solid #c5c5c5; background:#fff; transition:.5s; }
	.upload_zone.active { max-height:2000px; min-height:180px; transition:1s; }
	.upload_zone img { display:inline-block; vertical-align:top; padding:1px; margin:3px 0 3px 2px; max-height:106px; max-width:206px; border:2px solid transparent; cursor:pointer; transition:.3s; }
	.wrap .upload_zone img:hover { border-color:orange; }
.upload_zone_open:not( .fa ):not( .fas ):not( .fab ):not( .la ):not( .las ) 
	{ display:block; width:30px; height:31px; position:absolute; top:0; right:0; border-left:1px solid #c5c5c5; border-bottom:1px solid #c5c5c5; }
	.upload_zone_open:not( .fa ):not( .fas ):not( .fab ):not( .la ):not( .las ):before 
		{ content:'\f114'; display:block; font:20px "fontello_form"; margin:4px 5px 0; color:#c5c5c5; transition:.3s; }
		.wrap .upload_zone_open:hover { text-decoration:none; }
			.wrap .upload_zone_open:hover:before { color:#595959; }
	
.upload_zone_tab { display:inline-block; position:relative; height:0; padding:0 15px; margin-top:30px; overflow:hidden; top:1px; opacity:0; vertical-align:top; border:1px solid #c5c5c5; color:#555; font-size:16px; background:#f8f8f8; }
	.active .upload_zone_tab { height:40px; padding:9px 15px 0; opacity:1; margin-top:0; }
	.upload_zone_tab.v-0 { margin-left:5px; }
	.upload_zone_tab.active { background:#fff; border-bottom-color:#fff; }
		.wrap .upload_zone_tab:hover { text-decoration:none; }
		.wrap .upload_zone_tab.active:hover { cursor:default; }

.upload_zone_content { display:none; border-top:1px solid #c5c5c5; }
	.upload_zone_content.active { display:block; }
	.upload_zone_content label { min-height:50px; }

@media ( max-width: 370px ){
	.errorInfo { font-size:14px; }
}
