/* radio checkbox - dark

	we have such structure:

	label.dem__checkbox_label or label.dem__radio_label
	   └── input.dem__checkbox or input.dem__radio
	   └── input + .dem__spot

	Not use TAG names in selectors please: use '.dem__checkbox_label' not 'label.dem__checkbox_label'

	Note: set sizes with 'em' - is not good idea!
*/
.dem__checkbox,
.dem__radio{ display:none !important; }

.dem__checkbox_label,
.dem__radio_label{ position: relative; box-sizing: content-box; }

.dem__checkbox_label .dem__spot,
.dem__radio_label .dem__spot {
	position: relative;
	display: inline-block;
	vertical-align: baseline;
	top: .1em;
	cursor: pointer;
	/*style*/
	width: 12px;
	height: 12px;
	margin-right: .3em;
	background: #777;
}

.dem__checkbox_label,
.dem__radio_label{  }

.dem__checkbox_label .dem__spot { border-radius: 3px; }
.dem__radio_label .dem__spot { border-radius:50%; }

.dem__checkbox_label .dem__spot:after,
.dem__radio_label .dem__spot:after{
	content: '';
	position: absolute;
	opacity: 0;
}

.dem__checkbox_label .dem__spot:after {
	width: 11px;
    height: 4px;
    top: 0px;
    left: 2px;
	border:2px solid #fff;
	border-top: none;
	border-right: none;
	background: transparent;
	-ms-transform: rotate(-45deg);-webkit-transform: rotate(-45deg);	transform: rotate(-45deg);
	box-shadow: -1px 1px 1px #555;
}
.dem__radio_label .dem__spot:after {
	width: 6px; /*.4em;*/
    height: 6px; /*.4em;*/
	border-radius:50%;
	top: 50%;
    left: 50%;
	background: #fff;
	-ms-transform: translate(-50%, -50%);-webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
	box-shadow: 0px 0px 0px 1px #666, inset -1px -1px 1px #ccc;
}

.dem__checkbox_label:hover .dem__spot::after,
.dem__radio_label:hover .dem__spot::after {
	opacity: 0.4;
}

.dem__checkbox:checked + .dem__spot,
.dem__radio:checked + .dem__spot {
	border-color:#999;
}
.dem__checkbox:checked + .dem__spot:after,
.dem__radio:checked + .dem__spot:after {
	opacity: 1;
}
.dem__checkbox:disabled + .dem__spot,
.dem__radio:disabled + .dem__spot {
	opacity: .5;
}
.dem__checkbox:not(:checked):disabled + .dem__spot:after,
.dem__radio:not(:checked):disabled + .dem__spot:after {
	opacity:0;
}