.switch {
    position: relative;			/* способ позиционирования 
								относительно его исходного места */
    display: inline-block;	
    width: 120px;
    height: 68px;
}

.switch input {
    display: none				/* элемент не отображается */
}

.slider {						/* ползунок */
    position: absolute;			/* элемент абсолютно позиционирован	*/
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #949494;	/* цвет фона */
    border-radius: 34px;		/* радиус скругления уголков рамки */
}

.slider:before {				/* псевдоэлементами :after (после) и :before(до)  */
    position: absolute;
    content: "";				/* позволяет вставлять генерируемое содержание в текст веб-страницы */
    height: 52px;
    width: 52px;
    left: 8px; bottom: 8px;
    background-color: #fff;
    -webkit-transition: .4s;
    transition: .4s;			/* Анимационные переходы:
								   Смена одних CSS-стилей другими через заданный промежуток времени 
								   и с определенной скоростью — это и есть задача свойства transition */
    border-radius: 68px;
}


input:checked+.slider {
    background-color: #008B74;
}

input:checked+.slider:before {				/*  */
    -webkit-transform: translateX(52px); 	/* Устанавливает эффект перехода между двумя
								    состояниями  элемента, они могут быть определены с помощью 
								    псевдоэлемента :hover или :active, а также динамически через JavaScript.*/
								    /* translateX(52px) - Сдвигает элемент по горизонтали на 
								   			указанное значение. */ 
    -ms-transform: translateX(52px); /* применяет трансформацию к элементу */
    transform: translateX(52px);	/* Трансформирует элемент, в частности, позволяет его 															масштабировать, вращать, сдвигать, наклонять, а также 
									комбинировать виды трансформаций. */
}

input[type=text], input[type=number], select {
								/* number - Ввод чисел.	*/
    width: 100%;
    padding: 12px 20px;			/* задать величину поля 
								   сразу для всех сторон */
    margin: 8px 0;				/* задаёт внешние отступы блока */
    display: inline-block;
    border: 1px solid #ccc;		/* установить толщину, стиль и 
								   цвет границы вокруг элемента */
    border-radius: 4px;			/* Радиус скругления для всех 
								   уголков сразу */
    box-sizing: border-box;		/* Согласно спецификации CSS 	ширина блока складывается 
								   из ширины контента (width), значений отступов (margin), 
								   полей (padding) и границ (border).
								   Аналогично обстоит и с высотой блока. Свойство box-sizing 
								   позволяет изменить этот алгоритм, чтобы свойства width и 
								   height задавали размеры не контента, а размеры блока. */
								/* border-box;  - Свойства width и height включают в себя 
								   значения полей и границ, но не отступов (margin). */	

}

input[type=submit] {
								/* submit - Кнопка для отправки данных формы на сервер.	*/
    width: 100%;
    background-color: #008B74;
    color: white;
    padding: 14px 20px;			/* задать величину поля сразу для всех сторон */
    margin: 8px 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;			/* Устанавливает форму курсора, в пределах элемента. */
								/* pointer (указатель) т.е. - рука */
}

input[type=submit]:hover {
    background-color: #005a4c;
}