#pp {
    font-size: 140%;
    font-weight: bold;
}

.active {
    border: green solid 2px;
}

.inactive {
    border: gray dashed 2px;
}

input[type=checkbox] {
    display:none;
}

input[type=checkbox] + label {
    background-size: 75%;
    background-repeat: no-repeat;
    background-position: center; 
    height: 66px;
    width: 68px;
    display: inline-block;
    padding: 0;
    cursor: pointer;
    
    -webkit-transition: background-size 0.2s, -webkit-transform 0.2s;
    transition:         background-size 0.2s, transform 0.2s;
    -webkit-transition-timing-function: ease;
    transition-timing-function:         ease;
}

input[type=checkbox]:checked + label {
    background-size: 100%;
    -webkit-transform: rotate(5deg);
    transform:         rotate(5deg);
}

#EZ + label {
    	background-image: url("./img/EZ.png");
}
#HR + label {
    	background-image: url("./img/HR.png");
}
#HT + label {
    	background-image: url("./img/HT.png");
}
#DT + label {
    	background-image: url("./img/DT.png");
}
#HD + label {
    	background-image: url("./img/HD.png");
}
#FL + label {
    	background-image: url("./img/FL.png");
}
#NF + label {
    	background-image: url("./img/NF.png");
}