// Checkbox Switchers
input[type="checkbox"].ymapp-switcher {
	position: absolute;
	margin: 8px 0 0 16px;

	& + label {
		position: relative;
		padding: 5px 0 0 60px;
		line-height: 1.0em;
		height: 22px;

		&:before {
			content: "";
			position: absolute;
			display: block;
			left: 0;
			top: 0;
			width: 45px;
			height: 24px;
			border-radius: 16px;
			background: #d9d9d9;
			border: 1px solid #d9d9d9;
			-webkit-transition: all 0.3s;
			transition: all 0.3s;
		}

		&:after {
			content: "";
			position: absolute;
			display: block;
			left: 0px;
			top: 0px;
			width: 24px; /* x*3 */
			height: 24px; /* x*3 */
			border-radius: 16px; /* x*2 */
			background: #fff;
			border: 1px solid #d9d9d9;
			-webkit-transition: all 0.3s;
			transition: all 0.3s;
		}

		&:hover:after {
			box-shadow: 0 0 5px rgba(0,0,0,0.3);
		}
	}

	&:checked + label:after {
		margin-left: 21px;
	}

	&:checked + label:before {
		background: $main-color;
	}
}

@media only screen and (max-width: 782px) {

	input[type="checkbox"].ymapp-switcher + label {
		padding-left: 65px;
		padding-top: 10px;
		height: auto;

		&:before {
			width: 50px;
			height: 30px;
		}

		&:after {
			width: 30px;
			height: 30px;
		}
	}

}