/* You need to import font-awesome css library to make it work */

.j-checkbox .checkbox label{
	padding-left: 0;
}

.j-checkbox label {
	cursor:pointer;
	color: #666;
}

.j-checkbox input[type="checkbox"] {
	display: none;
}

.j-checkbox input[type="checkbox"] + .label-text:before {
	content: "\f096";
	font-family: "FontAwesome";
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	width: 1.3em;
	font-size: 20px;
	display: inline-block;
}

.j-checkbox .label-text:before{
	position: relative;
	top: 3.4px;
}

.j-checkbox input[type="checkbox"]:checked + .label-text:before {
	content: "\f14a";
	color: #06a3e9;
	-webkit-animation:tick 180ms ease-in;
	animation:tick 180ms ease-in;
}

.j-checkbox input[type="checkbox"]:disabled + .label-text {
	color: #aaa;
}

.j-checkbox input[type="checkbox"]:disabled + .label-text:before {
	content: "\f0c8";
	color: #ccc;
}

@-webkit-keyframes tick {
  0%   {-webkit-transform: scale(0); }
  90%  {-webkit-transform: scale(1.4); }
  200%  {-webkit-transform: scale(1); }
}

@keyframes tick {
  0%   {transform: scale(0); }
  90%  {transform: scale(1.4); }
  200%  {transform: scale(1); }
}