* {
	padding:0;
	margin:0;
	box-sizing:border-box;
}
html,body,.wrap {
	height:100%;
}
.wrap {
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
}
.section {
	width:300px;
}
.checkbox {
	position:relative;
	padding-left:1.5em;
	cursor:pointer
}
.checkbox input {
	display:none;
}
.checkbox span {
	display:inline-block;
	user-select:none;
}
.checkbox span::before,.checkbox span::after {
	content:'';
	position:absolute;
	left:0;
	top:50%;
	transform:translateY(-50%);
	width:1em;
	height:1em;
	border:1px solid #ccc;
	border-radius:3px;
	transition:200ms;
}
.checkbox span::before {
	width:1em;
	height:1em;
	border:1px solid #444;
}
.checkbox span::after {
	width:0.6em;
	height:0.6em;
	left:0.2em;
	background-color:#579ef8;
	border-color:#579ef8;
	opacity:0;
}
.checkbox input:checked ~ span::before {
	border-color:#579ef8;
}
.checkbox input:checked ~ span::after {
	opacity:1
}
/* --------------- */
    .input-checkbox {
	position:relative;
	display:flex;
	align-items:center;
	cursor:pointer
}
.input-checkbox__fauxbox {
	margin-right:6px;
	position:relative;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:18px;
	height:18px;
	background:#579ef8;
	border-radius:3px;
	box-shadow:inset 0 0 0 1px #949aa4;
	transition:background 250ms ease,box-shadow 250ms ease;
	overflow:hidden;
}
.input-checkbox__fauxbox::before,.input-checkbox__fauxbox::after {
	content:'';
	position:absolute;
	left:8px;
	bottom:4px;
	width:0;
	height:2px;
	background-color:#fff;
	border-radius:3px;
	transform-origin:center left;
	transition:width 200ms ease;
}
.input-checkbox__fauxbox::before {
	transform:rotate(45deg);
	left:4px;
	bottom:9px;
	transition-delay:180ms
}
.input-checkbox__fauxbox::after {
	transform:rotate(-50deg);
	transition-delay:0ms
}
.input-checkbox:active .input-checkbox__fauxbox {
	box-shadow:inset 0 0 0 2px #596170
}
.input-checkbox__realbox {
	position:absolute;
	width:0;
	height:0;
	opacity:0;
	z-index:-1
}
.input-checkbox input:checked ~ .input-checkbox__fauxbox:before {
	width:7px;
	transition-delay:0ms
}
.input-checkbox input:checked ~ .input-checkbox__fauxbox::after {
	width:11px;
	transition-delay:180ms
}