.scale { display: flex; flex-flow: row wrap; margin: 1rem 0}
.scale-item { flex: 1 0 5%;  display: flex; position: relative}
.scale-legend { flex: 1 0 100%; display: flex; justify-content: space-between; padding: 0.5rem}
.scale-item input { display: none;}

.scale-item img, .scale-item font, .scale-item .ok{ position: absolute; left: 5px; top: 5px  }

.scale-label {flex: 1 1 100%; display: block; padding: 0.5rem; text-align: center; border: 1px solid #bbb; cursor: pointer}
.scale-label:hover { background-color: #deeafb;}

:checked + .scale-label, :checked + img + .scale-label,  :checked + .ok + .scale-label, :checked + img + .ok + .scale-label, :checked + img + font + .scale-label, :checked + font + .scale-label  { font-weight: bold; background-color: #002776; color: white}