main{
	margin: 20px;
}
/* ФОРМА для создания нового вопроса */
.add_group{
	margin-left: 80px;
	margin-top: 50px;
}
.input_option, .input_question, .add_btn, .check_label, .question_group label{
	font-family: sans-serif;
	font-size: 14px;
}
label.check_label{
	margin-left: 5px;
	color: #3b3b3b; 
	cursor: pointer;
}
.input_abc:checked + .check_label{ /* Селектор соседнего элемента. Если чекбокс отмечен, то к соседнему элементу применить стили */
	margin-left: 20px;
}
.input_option, .input_question{
	border: none;
	padding: 10px 0 5px;
	border-bottom: 1px solid #e0e0e0;
}
.input_option{
	width: 300px;
	margin-right: 20px; 
}
.input_question{
	width: 500px;
}
.input_option:focus, .input_question:focus{
	border-bottom: 1px solid #1a73a8;
	outline: none;
}
.add_btn{
	border: 0;
	background-color: #727272;
	color: #fff;
	padding: 12px 24px;
	border-radius: 4px;
	min-width: 100px;
	cursor: pointer;
}
.add_btn:hover, .add_btn:focus{
	background-color: #797979;
}
.add_btn:focus{
	outline: none; 
	box-shadow: inset 0 5px 15px #727272;
}
.option_group{
	margin-left: 80px;
	margin-bottom: 12px;
}
.question_group{
	margin-bottom: 50px;
}
.question_group label{
	margin-right: 25px;
	color: #3b3b3b; /*rgb(59, 59, 59);*/
}
.save_btn{
	position: absolute;
	top: 100px;
	left: 700px;
	border: 0;
	background-color: #5cb85c;
	color: #fff;
	padding: 12px 28px;
	border-radius: 4px; 
	font-size: 18px;
	cursor: pointer;
}
/* ТАБЛИЦА в стиле Exel с верхним меню */
.exel{ 
	font-size: 14px;
	border-collapse: collapse;
}
.exel thead tr{
	background: #efefef;
}
.exel th, .exel td{
	border: 1px solid #ddd;
	padding: 10px 20px;
}
.exel tbody tr{
	background: #fff;
}
.exel tbody td span.td{ /* Текст в ячейке жирный */
	font-weight: bold;
}
.exel tbody td span.red{ /* Текст в ячейке красный class="td red" */
	color: red;
}
.exel tbody td span.green{ /* Текст в ячейке зеленый class="td green" */
	color: green;
}
.dragable tbody tr:hover{
	cursor: move; /* Составной стиль table class="exel dragable" когда строки таблицы перетаскиваемые */
}
.zebra tbody tr:nth-child(even){ /* Составной стиль table class="exel zebra", зебра */
	background: #F2F8F8!important;
}
/* Заголовки любой таблицы со ссылками для сортировки */
table th a {
	color: #777777;
	text-decoration: none;
	border-bottom: 1px dashed;
}
table th a i {
	font-style: normal;
	font-size: 10px;
	line-height: 14px;
	vertical-align: middle;
}
table th a.active {
	color: #cb11ab;
	cursor: pointer;
}
/* ФОРМА для ввода даннхы в приложение, основная */
.form label, .form button{
	display: block;
}
.form input, .form select{
	margin-bottom: 12px;
	width: 250px;
}
/* Подпись под полем ввода */
span.footnote{
	display: block;
	font-size: 14px;
	color: green;
	margin-top: -10px;
	margin-bottom: 12px;
}
/* ОШИБКА ВВОДА данных в форму. Идет сразу за открывающим тегом form div class="error" */
div.error{
	background-color: red;
	/*width: 250px;*/
	color: white;
	text-align: center;
	padding: 5px;
	margin: 7px 0 12px 0;
}
/* ФЛЭШ-СООБЩЕНИЕ составной стиль div class="flash success|error|notice" */
div.flash{
	color: white;
	text-align: center;
	padding: 5px;
	margin: 7px 0;
}
.success{
	background-color: green;
}
/* МОДАЛЬНОЕ ОКНО вызывается по ссылке a href="#view" Вызвать окно a */
#view{
	background: rgba(187, 187, 187, 0.3);
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	display: none;
}
#view:target{
	display: block;
}
#frame{
	/*width: 600px;*/
	/*height: 150px;*/
	width: 40vw;
	height: 70vh;
	background: #fff;
	/*text-align: center;*/
	padding: 15px;
	border: 2px solid grey;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
}
#frame div.close{
	text-align: right;
}
/* ФОРМА - ВОПРОС - прохождение теста */
form.query div{
	margin-bottom: 7px;
}
form.query label{
	margin-left: 7px;
}
form.query button{
	margin: 24px 0;
}
/* НАВИГАЦИЯ - блок кнопок назад|вперед в тесте */
.navigation span.disable{
	color: grey;
}
/* Самостоятельные стили */
span.red{
	font-weight: bold;
	color: red;
}
span.green{
	font-weight: bold;
	color: green;
}
/* Стили для активации ссылок меню */
a.menue:hover, a.active{
	text-decoration: none;
	color: red;
}
a.active{
	cursor: default;
}
/* Стили для формы login */
div.login {
	display: flex; /* потомки будут флекс элементами */
	justify-content: center; /* потомки встанут по центру главной оси (по горизонту) */
	align-items: center; /* центрируем потомков по побочной оси (по вертикали) */
	height: 100vh; /* 1vh равен 1% высоты вьюпорта */
}
.entry {
	width: 300px;
	padding: 32px; /* со всех сторон 32px */
	border-radius: 5px; /* закругленные края */
	box-shadow: 0 4px 16px #ccc; /* Смещение по горизонту, по вертикали, размытиеб цвет */
	font-family:sans-serif; /* sans-serif ключевое слово - шрифт без засечек */
	letter-spacing: 1px; /* растояние между буквами */
}
.form_input, .form_button {
	font-family:sans-serif; /* поле ввода и кнопка не унаследовали стили шрифта */
	letter-spacing: 1px; /* поэтому дублируем для их классов эти стили */
	font-size: 16px;
}
.form_title {
	text-align: center;
	margin: 0 0 32px 0; /* отступ снизу 32px */
	font-weight: normal; /* убираем жирность */
}
.form_group {
	position: relative; /* внутри блока применим абсол.позиционирование элементов */
	margin-bottom: 32px;
}
.form_label {
	position: absolute; /* Будем позиционировать относительно родителя .form_group */
	top: 0; /* прижимаем к верху родителя */
	left: 0; /* прижимаем к левому краю родителя */
	z-index: -1; /* label отображается под полем ввода */
	color: #9e9e9e;
	transition: 0.3s; /* время перехода для анимации */
}
.form_input {
	width: 100%;
	padding: 0 0 10px 0; /* Отступ снизу 10px */
	border: none; /* убираем все границы с поля ввода */
	border-bottom: 1px solid #e0e0e0; /* нижняя граница для поля ввода */
	background-color: transparent; /* цвет фона прозрачный */
	outline: none; /* убрали обводку поля, кот. появляется при фокусе */
	transition: 0.3s;
}
.form_input:focus { /* ловим событие: поле в фокусе */
	border-bottom: 1px solid #1a73a8;
}
.form_button {
	padding: 10px 20px; /* Сверху и снизу 10px, слева и справа 20px */
	border: none;
	border-radius: 5px;
	color: #fff; /* цвет текста в кнопке */
	background-color: #0071f0; /* фон кнопки */
	outline: none;
	cursor: pointer;
	transition: 0.3s;
}
.form_button:focus, .form_button:hover { /* ловим событие нажали/навели на кнопку */
	background-color: rgba(0, 113, 240, 0.7); /* в формате RGBA можно добавить прозрачность цвета от 0 до 1 */
}
.form_input:focus ~ .form_label, /* если input в фокусе, то label меняет стили, родственные (соседние теги) */
.form_input:not(:placeholder-shown) ~ .form_label { /* ловим событие, когда не показан placeholder, т.е. когда что-то ввели.  */
	top: -18px; /* Обычное состояние мы прописали выше top: 0; */
	font-size: 12px;
	color: #e0e0e0;
}
/* placeholder в разметке специально сделали пустым */
.entry .entry_text {
	border-top: 1px solid #ddd;
	margin-top: 19px;
	padding: 10px;
	font-size: 12px;
	color: grey;
}
div.entry_error{
	background-color: red;
	color: white;
	text-align: center;
	padding: 5px;
	font-size: 12px;
	margin-bottom: 30px;
}
div.submit_area{
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.submit_area a{
	text-decoration: none;
}