.div-radio {
	float: left;
}
.div-radio label {
	margin-bottom: 0px;
}

.div-radio.in-form {
    margin-top: -18px;
}


/* hide input */
input.radio:empty {
	margin-left: -999px;
	min-height: 0px;
}
/* style label */
input.radio:empty ~ label {
	position: relative;
	float: left;
	width:38px;
	line-height: 2.5em;
	text-indent: 3.25em;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

input.radio:empty ~ label:before {
	position: absolute;
	display: block;
	top: 0;
	bottom: 0;
	left: 0;
	content: '';
	width: 2.5em;
	background: #D1D3D4;
	border-radius: 3px;
}
.number-absen {
	background: #d1d3d4 none repeat scroll 0 0;
    border-radius: 3px;
    display: block;
    position: absolute;
    width: 37px;
    height: 33px;
    margin-top: 18px;
}

/* toggle hover */
/*
input.radio:hover:not(:checked) ~ label:before {
	content:'\2714';
	text-indent: .9em;
	color: #C2C2C2;
} */

input.radio:not(:checked) ~ #hadir:before {
	content:'H';
	text-indent: .9em;
	color: blue;
}
input.radio:not(:checked) ~ #izin:before {
	content:'P';
	text-indent: .9em;
	color: blue;
}
input.radio:not(:checked) ~ #sakit:before {
	content:'S';
	text-indent: .9em;
	color: blue;
}
input.radio:not(:checked) ~ #alpha:before {
	content:'A';
	text-indent: .9em;
	color: blue;
}
input.radio:not(:checked) ~ #tugas:before {
	content:'T';
	text-indent: .9em;
	color: blue;
}
input.radio:not(:checked) ~ #telat:before {
	content:'L';
	text-indent: .9em;
	color: blue;
}

input.radio:hover:not(:checked) ~ label {
	color: #888;
}

/* toggle on 
input.radio:checked ~ label:before {
	content:'\2714';
	text-indent: .9em;
	color: #9CE2AE;
	background-color: #4DCB6D;
} */
input.radio:checked ~ #hadir:before {
	content:'H';
	text-indent: .9em;
	color: #9CE2AE;
	background-color: #4DCB6D;
}
input.radio:checked ~ #izin:before {
	content:'P';
	text-indent: .9em;
	color: #9CE2AE;
	background-color: #4DCB6D;
}
input.radio:checked ~ #sakit:before {
	content:'S';
	text-indent: .9em;
	color: #9CE2AE;
	background-color: #4DCB6D;
}
input.radio:checked ~ #alpha:before {
	content:'A';
	text-indent: .9em;
	color: #9CE2AE;
	background-color: #4DCB6D;
}
input.radio:checked ~ #tugas:before {
	content:'T';
	text-indent: .9em;
	color: #9CE2AE;
	background-color: #4DCB6D;
}
input.radio:checked ~ #telat:before {
	content:'L';
	text-indent: .9em;
	color: #9CE2AE;
	background-color: #4DCB6D;
}
input.radio:checked ~ label {
	color: #777;
}

input.radio:checked ~ #ya:before {
	content:'Y';
	text-indent: .9em;
	color: #9CE2AE;
	background-color: #4DCB6D;
}
input.radio:not(:checked) ~ #ya:before {
	content:'Y';
	text-indent: .9em;
	color: blue;
}
input.radio:checked ~ #tidak:before {
	content:'T';
	text-indent: .9em;
	color: #9CE2AE;
	background-color: #4DCB6D;
}
input.radio:not(:checked) ~ #tidak:before {
	content:'T';
	text-indent: .9em;
	color: blue;
}

/* Absen Pendidikan */
input.radio:not(:checked) ~ #Hadir:before {
	content:'H';
	text-indent: .9em;
	color: blue;
}
input.radio:not(:checked) ~ #Alpha:before {
	content:'A';
	text-indent: .9em;
	color: blue;
}
input.radio:not(:checked) ~ #Sakit:before {
	content:'S';
	text-indent: .9em;
	color: blue;
}
input.radio:not(:checked) ~ #Izin:before {
	content:'I';
	text-indent: .9em;
	color: blue;
}
input.radio:not(:checked) ~ #Pulang:before {
	content:'IP';
	text-indent: .9em;
	color: blue;
}
input.radio:not(:checked) ~ #Tugas:before {
	content:'IT';
	text-indent: .9em;
	color: blue;
}

input.radio:checked ~ #Hadir:before {
	content:'H';
	text-indent: .9em;
	color: #9CE2AE;
	background-color: #4DCB6D;
}
input.radio:checked ~ #Alpha:before {
	content:'A';
	text-indent: .9em;
	color: #9CE2AE;
	background-color: #4DCB6D;
}
input.radio:checked ~ #Sakit:before {
	content:'S';
	text-indent: .9em;
	color: #9CE2AE;
	background-color: #4DCB6D;
}
input.radio:checked ~ #Izin:before {
	content:'I';
	text-indent: .9em;
	color: #9CE2AE;
	background-color: #4DCB6D;
}
input.radio:checked ~ #Pulang:before {
	content:'IP';
	text-indent: .9em;
	color: #9CE2AE;
	background-color: #4DCB6D;
}
input.radio:checked ~ #Tugas:before {
	content:'IT';
	text-indent: .9em;
	color: #9CE2AE;
	background-color: #4DCB6D;
}