@charset "UTF-8";

.survey {position: relative; padding-bottom: 15px; border: solid 1px #ccc; border-radius: 5px; overflow: hidden; box-shadow: 0 3px 20px -5px #222; }

.survey [data-page] {position: relative; display: none; overflow: hidden; padding: 10px 10px 45px; }
	.survey .active_page {display: block; z-index: 100; /*min-height: 150vh;*/ }

.survey h2,
.survey h3 {color: #000; }

/**/
.survey .survey_nav {/* display: none; */text-align: center;}
	.survey.on_last_page .survey_nav,
	.survey.validation_progress .survey_nav {display: block; }

.survey button[onclick^="F_submit"] {margin: 15px auto; display: inline-block; min-width: 120px; font-size: 1.2em; padding: 10px 15px; }
.survey button[onclick^="F_save"] {display: none; }


.survey .page_nav {position: static; bottom: 0; left: 0; right: 0; padding: 15px; }
	.prev_button {float: left; }
	.next_button {float: right; }

.survey .survey_submit {display: inline-block; padding: 10px; outline: solid 10px lightgreen; }

.registration_form .survey_nav {display: block; }


.survey button {
	margin-top: 24px;
}


/*
[data-input="true"] {border-left: solid 5px green; }
[data-input-applied] {border-left: solid 5px orange; }
*/



.survey input[type="text"],
.survey input[type="number"],
.survey textarea,
.survey select {border: solid 2px #777; min-width: 250px; max-width: 100%; font-family: inherit; padding: 2px 5px; font-size: 1em; border-radius: 4px; background: #fafafa; height: auto; }

	.survey input[type="text"]:focus,
	.survey input[type="number"]:focus,
	.survey textarea:focus,
	.survey select:focus {border: solid 2px #444; background: #f5f5f5; }


.survey select {font-size: 0.9em; }
.survey textarea {min-height: 5em; }


.survey input[type="checkbox"],
.survey input[type="radio"] {margin-right: 3px; display: inline-block; vertical-align: top; }


.survey input[data-anchor="live"] {margin-left: 5px; border-color: transparent; border-bottom: solid 2px #444; min-width: 120px; display: inline-block; font-size: 0.9em; padding: 2px 5px; max-width: 200px; }

	.survey input[data-anchor="live"]:hover {border-color: #444;}
	

	
	
.survey .intro {text-align: center; max-width: 600px; margin: 60px auto 0; }

.survey .info {padding: 0 15px; }
.survey h2 {margin: 15px 0 30px; }


.survey .answers+.info {padding-top: 30px; clear: both; }



.survey .item_group {}
	.survey .item_group h2 {margin: 0 0 30px; font-size: 1.4em; display: block; padding: 5px 15px 10px; line-height: 1.1em; background: #bcdcff; font-weight: bold; border-bottom: solid 2px #000; }



.survey .item {clear: both; overflow: hidden; margin: 15px 0 0; padding: 15px 0 0; border-top: solid 1px #aaa; position: relative; }
	.survey .item_group .item:first-of-type {border-top: none; }
	.survey .item_group .item:last-of-type {border-bottom: solid 1px #aaa; margin-bottom: 30px; }

	.survey .item h3 {font-size: 1.2em; font-weight: bold; margin: 0 0 0; }
	.survey .question {width: 50%; float: left; padding: 15px; }
	.survey .answers {width: 50%; float: left; padding: 45px 15px 15px; }

	.survey label {display: block; clear: both; }
		.survey .row-answers label {display: inline-block; width: 20%; max-width: 6em; }


	.survey .note,
	.survey .notice {color: #444; font-style: italic; font-size: 0.9em; line-height: 1.1em; margin: 15px 0 0;
	
			/* выделение подсказок "маркером" */
			/*
		    background: lightyellow;
    		padding: 2px;
    		display: inline-block;
			*/
	
	}
	
	
	.survey .anno {margin-bottom: 15px; }
	
	
	
/* item level 2 */
.survey .level-2 {}
	.survey .level-2 .question {padding-left: 30px; }
	.survey .level-2 h3 {font-weight: 600; }


/* item level 3 */
.survey .level-3 {margin: 0; padding: 5px 0 5px 0; border-top: none; border-bottom: dotted 1px #ccc; }
	.survey .level-3 .question {padding: 5px 15px 5px 45px; }
		.survey .level-3 h3 {font-size: 1em; font-weight: normal; margin: 0; }
	.survey .level-3 .answers {padding: 5px 15px; }
	


.survey .level-3+.item {margin-top: 30px; }
	.survey .level-3+.level-3 {margin-top: 0; }
	
	.survey .item_group .level-3+.level-3:last-of-type {padding-bottom: 30px; }





/* эксперимент с двойными колонками 
.survey .half-left {float: left; width: 50%; }
.survey .half-right {float: left; width: 50%; }
	.survey .half-right .level-3 .question {margin-left: -50%; opacity: 0; }
	
	.survey .half-left .level-2 .question,
	.survey .half-right .level-2 .question,
	.survey .half-left .level-2 .answers,
	.survey .half-right .level-2 .answers {width: 100%; clear: both; }

	.survey .half-left .level-2 .answers,
	.survey .half-right .level-2 .answers {padding: 0 30px 0; }

*/






/* mobile */

@media (max-width: 768px) {
.survey .question,
.survey .answers {width: 100%; float: none; clear: both; padding: 15px; }
	.survey .row-answers label {text-align: center; }
	
.survey input[type="text"],
.survey input[type="number"],
.survey textarea,
.survey select {width: 100%; }
}





.survey .required {/* border: dotted 2px pink; */ }
	.survey .required:after {content: "ответ обязателен"; position: absolute; font-size: 10px; top: 2px; right: 0; z-index: 0; background: pink; padding: 0 5px; opacity: 0; transition: opacity 0.8s ease; }

/*.survey .required:hover:after {opacity: 0.5; }*/

.survey .validate_warning {border: solid 2px red !important; padding-top: 24px; margin: 15px 0; }
/*.validate_helper {display: none; }*/

.survey .validate_helper {
	/* margin: 0 0 10px; */ opacity: 0.01; background: red; padding: 0 5px; color: #000;
	position: absolute; top: 0; right: 0; height: 22px; line-height: 22px; z-index: 10;
}




.pre_info {text-align: center; padding: 60px 15px 45px; }