.radio,.checkbox{
	display: inline-flex;
	align-items: center;
	width:250px;
}
.radio label,.checkbox label{margin-bottom:0px !important;}

input[type=checkbox],input[type=radio] {
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;
    position: relative;
    right: 0;
    bottom: 0;
    left: 0;
    height: 20px;
    width: 20px;
    vertical-align: -0.2rem;
    transition:all .15s ease-out 0s;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    margin: .4rem;
    outline: none;
    border-radius: 10%;
}

/* Checkbox */
input[type=checkbox]:before,input[type=checkbox]:after {
    position: absolute;
    content: "";
    background: #fff;
    transition: all .2s ease-in-out;
}
input[type=checkbox]:before {
    left: 2px;
    top: 6px;
    width: 0;
    height: 2px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
}
input[type=checkbox]:after {
    right: 9px;
    bottom: 3px;
    width: 2px;
    height: 0;
    transform: rotate(40deg);
    -webkit-transform: rotate(40deg);
    -moz-transform: rotate(40deg);
    -ms-transform: rotate(40deg);
    -o-transform: rotate(40deg);
    transition-delay: .2s;
}
input[type=checkbox]:checked:before {
    left: 1px;
    top: 10px;
    width: 6px;
    height: 2px;
}
input[type=checkbox]:checked:after {
    right: 5px;
    bottom: 1px;
    width: 2px;
    height: 14px;
}
input[type=checkbox]:indeterminate:before,input[type=checkbox]:indeterminate:after {
    width: 7px;
    height: 2px;
    transform: rotate(0);
    -webkit-transform: rotate(0);
    -moz-transform: rotate(0);
    -ms-transform: rotate(0);
    -o-transform: rotate(0);
}
input[type=checkbox]:indeterminate:before {
    left: 1px;
    top: 7px;
}
input[type=checkbox]:indeterminate:after {
    right: 1px;
    bottom: 7px;
}

/* Radio */
input[type=radio] {
    border-radius: 50%;
}

input[type=radio]:checked:before {
    transform: scale(1);
}

input[type=radio]:before {
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin: 3px;
    transform: scale(0);
    transition: all ease-out 250ms;
}

/* default */
input[type=checkbox],input[type=radio] {
    border: 2px solid #555555;
}

input[type=checkbox]:checked,input[type=checkbox]:indeterminate,input[type=radio]:checked:before {
    background: #555555;
}

/* blue */
input[type=checkbox].blue,input[type=radio].blue {
    border: 2px solid #2196f3;
}

input[type=checkbox].blue:checked,input[type=checkbox].blue:indeterminate,input[type=radio].blue:checked:before {
    background: #2196f3;
}
/* red */
input[type=checkbox].red,input[type=radio].red {
    border: 2px solid #f44336;
}

input[type=checkbox].red:checked,input[type=checkbox].red:indeterminate,input[type=radio].red:checked:before {
    background: #f44336;
}
/* orange */
input[type=checkbox].orange,input[type=radio].orange {
    border: 2px solid #ffc107;
}

input[type=checkbox].orange:checked,input[type=checkbox].orange:indeterminate,input[type=radio].orange:checked:before {
    background: #ffc107;
}
/* green */
input[type=checkbox].green,input[type=radio].green {
    border: 2px solid #4caf50;
}

input[type=checkbox].green:checked,input[type=checkbox].green:indeterminate,input[type=radio].green:checked:before {
    background: #4caf50;
}


/* switch */
.switch,.switchstyle,.switchstyle:before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box
}

.switch {
	display: inline-flex;
	align-items:center;
	margin-right:15px;
}

.switch .switchstyle {
	height: 20px;
	left: 0;
	background: #C0CCDA;
	-webkit-border-radius: .8em;
	border-radius: .8em;
	display: inline-block;
	position: relative;
	top: 0;
	-webkit-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
	width: 40px;
	cursor: pointer;
	margin-right:10px;
}

.switch .switchstyle:before {
	display: block;
	content: '';
	height:16px;
	position: absolute;
	width: 16px;
	background-color: #fff;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	left: 2px;
	top: 2px;
	-webkit-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out
}

.switch>input[type="checkbox"] {
	display: none
}

.switch>input[type="checkbox"][disabled]+.switchstyle {
	cursor: not-allowed;
	background-color: #D3DCE6
}

.switch>input[type="checkbox"]:checked+.switchstyle {
	background-color: #20a0ff
}

.switch>input[type="checkbox"]:checked+.switchstyle:before {
	left: 22px;
}

.switch>input[type="checkbox"]:checked[disabled]+.switchstyle {
	background-color: #b0d7f5
}

/* blue */
.switch.switchblue>input[type="checkbox"]:checked+.switchstyle {
	background-color: #20a0ff
}

.switch.switchblue>input[type="checkbox"]:checked[disabled]+.switchstyle {
	background-color: #b0d7f5
}

/* green */
.switch.switchgreen>input[type="checkbox"]:checked+.switchstyle {
	background-color: #13ce66
}

.switch.switchgreen>input[type="checkbox"]:checked[disabled]+.switchstyle {
	background-color: #a1efc4
}

/* red */
.switch.switchred>input[type="checkbox"]:checked+.switchstyle {
	background-color: #ff4949
}

.switch.switchred>input[type="checkbox"]:checked[disabled]+.switchstyle {
	background-color: #f9b3b3
}

/* yellow */
.switch.switchyellow>input[type="checkbox"]:checked+.switchstyle {
	background-color: #f7ba2a
}

.switch.switchyellow>input[type="checkbox"]:checked[disabled]+.switchstyle {
	background-color: #fbeac1
}