/* controller */
[type="checkbox"] {
    display: none;
}

[id="one"]:checked~.tags [for="one"],
[id="two"]:checked~.tags [for="two"],
[id="three"]:checked~.tags [for="three"],
[id="four"]:checked~.tags [for="four"],
[id="five"]:checked~.tags [for="five"],
[id="six"]:checked~.tags [for="six"],
[id="seven"]:checked~.tags [for="seven"] {
    display: inline-block;
}

[id="one"]:checked~.boxes [for="one"],
[id="two"]:checked~.boxes [for="two"],
[id="three"]:checked~.boxes [for="three"],
[id="four"]:checked~.boxes [for="four"],
[id="five"]:checked~.boxes [for="five"],
[id="six"]:checked~.boxes [for="six"],
[id="seven"]:checked~.boxes [for="seven"] {
    background-position: .75em;
    color: green;
    padding-left: 3.1em;
}

/* event boxes */
.boxes label {
    display: block;
    padding: 3px;
    padding-left: 10px;
    margin: 6px 0;
    background:lightblue;
    background-size: 2em;
    color: gray;
    border-radius: .25em;
    cursor: pointer;
    font-weight: bold;
    transition: all .3s;
}

.boxes label span {
    color: black;

}

/* tags */
.tags label {
    display: none;
    background: #666;
    padding: .25em .5em .25em .5em;
    color: #fff;
    cursor: pointer;
    border-radius: .25em;
}

.tags label:before {
    content: 'x';
    margin-right: .5em
}

input[type="text"] {
    display: inline;
}