/*------------------Checkbox----------------------*/
.checkboxWrapper {
	display:block;
	/* you can replace with 'display:inline-block' if you want parent element inline */
}
.checkboxWrapper input[type="checkbox"] {
	display:none;
}
.checkboxWrapper input[type="checkbox"] + label {
	cursor:pointer;
	display:block;
}
.checkboxWrapper input[type="checkbox"] + label i {
	display:inline-block;
	vertical-align:middle;
}
.checkboxWrapper input[type="checkbox"] + label path {
	stroke-dashoffset:-189;
	stroke:inherit;
	stroke-dasharray:189;
	transition:all ease-in-out 0.5s;
	-webkit-transition:all ease-in-out 0.5s;
	-moz-transition:all ease-in-out 0.5s;
	-ms-transition:all ease-in-out 0.5s;
	-o-transition:all ease-in-out 0.5s;
}
.checkboxWrapper input[type="checkbox"]:checked + label path {
	stroke-dashoffset:0;
}
/*----------------------color------------------------*/
/* Turquoise theme */
	.theme1 {
	stroke:#1ABC9C;
}
/**/

/* Emerald theme */
	.theme2 {
	stroke:#2ECC71;
}
/**/

/* Peterriver theme */
	.theme3 {
	stroke:#3498DB;
}
/**/

/* Amethyst theme */
	.theme4 {
	stroke:#9B59B6;
}
/**/

/* Wet Asphalt theme */
	.theme5 {
	stroke:#34495E;
}
/**/

/* Carrot theme */
	.theme6 {
	stroke:#E67E22;
}
/**/
/* Alizarin theme */
	.theme7 {
	stroke:#E74C3C;
}
.theme8 {
	stroke:blue;
}
/**/

/*-----------------------size------------------------------*/
.tweentyCheckboxSize.checkboxWrapper input[type="checkbox"] + label i svg {
	width:20px;
	height:20px;
}
.thirtyCheckboxSize.checkboxWrapper input[type="checkbox"] + label i svg {
	width:30px;
	height:30px;
}
.fortyCheckboxSize.checkboxWrapper input[type="checkbox"] + label i svg {
	width:40px;
	height:40px;
}
.fiftyCheckboxSize.checkboxWrapper input[type="checkbox"] + label i svg {
	width:50px;
	height:50px;
}
.sixtyCheckboxSize.checkboxWrapper input[type="checkbox"] + label i svg {
	width:60px;
	height:60px;
}
.seventyCheckboxSize.checkboxWrapper input[type="checkbox"] + label i svg {
	width:60px;
	height:60px;
}