.argue
{
 position: relative;
 width: 7rem;
 height: 7rem;
 margin: 0.5rem;
 border: 3px solid transparent;
 box-sizing: border-box;
/* background-color: lightgray;*/
 cursor: pointer;
}
/*
.argue[data-no="1"], td[data-argue_no="1"]
{ background: hsl(calc(1 * 41deg), 70%, 60%); }
.argue[data-no="2"], td[data-argue_no="2"]
{ background: hsl(calc(2 * 41deg), 70%, 60%); }
.argue[data-no="3"], td[data-argue_no="3"]
{ background: hsl(calc(3 * 41deg), 70%, 60%); }
.argue[data-no="4"], td[data-argue_no="4"]
{ background: hsl(calc(4 * 41deg), 70%, 60%); }
.argue[data-no="5"], td[data-argue_no="5"]
{ background: hsl(calc(5 * 41deg), 70%, 60%); }
.argue[data-no="6"], td[data-argue_no="6"]
{ background: hsl(calc(6 * 41deg), 70%, 60%); }
.argue[data-no="7"], td[data-argue_no="7"]
{ background: hsl(calc(7 * 41deg), 70%, 60%); }
.argue[data-no="8"], td[data-argue_no="8"]
{ background: hsl(calc(8 * 41deg), 70%, 60%); }
.argue[data-no="9"], td[data-argue_no="9"]
{ background: hsl(calc(9 * 41deg), 70%, 60%); }
.argue[data-no="10"], td[data-argue_no="10"]
{ background: hsl(calc(10 * 41deg), 70%, 60%); }
.argue[data-no="11"], td[data-argue_no="11"]
{ background: hsl(calc(11 * 41deg), 70%, 60%); }
.argue[data-no="12"], td[data-argue_no="12"]
{ background: hsl(calc(12 * 41deg), 70%, 60%); }
.argue[data-no="13"], td[data-argue_no="13"]
{ background: hsl(calc(13 * 41deg), 70%, 60%); }
.argue[data-no="14"], td[data-argue_no="14"]
{ background: hsl(calc(14 * 41deg), 70%, 60%); }
.argue[data-no="15"], td[data-argue_no="15"]
{ background: hsl(calc(15 * 41deg), 70%, 60%); }
.argue[data-no="16"], td[data-argue_no="16"]
{ background: hsl(calc(16 * 41deg), 70%, 60%); }
*/

.argue[data-no="101"]
{ background: red; }

.icon
{
 position: absolute;
 inset: 0;
 margin: 0.5rem;
 background-size: contain;
 background-repeat: no-repeat;
 background-position: center;
}

td, .argue
{
 padding: 0.3rem;
 box-sizing: border-box;
}

.argue[ data-no = "1" ] .icon, td[ data-argue_no = "1" ] .icon
{ background-image: url( "../logos/1.png" ); }
.argue[ data-no = "2" ] .icon, td[ data-argue_no = "2" ] .icon
{ background-image: url( "../logos/2.png" ); }
.argue[ data-no = "3" ] .icon, td[ data-argue_no = "3" ] .icon
{ background-image: url( "../logos/3.png" ); }
.argue[ data-no = "4" ] .icon, td[ data-argue_no = "4" ] .icon
{ background-image: url( "../logos/4.png" ); }
.argue[ data-no = "5" ] .icon, td[ data-argue_no = "5" ] .icon
{ background-image: url( "../logos/5.png" ); }
.argue[ data-no = "6" ] .icon, td[ data-argue_no = "6" ] .icon
{ background-image: url( "../logos/6.png" ); }
.argue[ data-no = "7" ] .icon, td[ data-argue_no = "7" ] .icon
{ background-image: url( "../logos/7.png" ); }
.argue[ data-no = "8" ] .icon, td[ data-argue_no = "8" ] .icon
{ background-image: url( "../logos/8.png" ); }
.argue[ data-no = "9" ] .icon, td[ data-argue_no = "9" ] .icon
{ background-image: url( "../logos/9.png" ); }
.argue[ data-no = "10" ] .icon, td[ data-argue_no = "10" ] .icon
{ background-image: url( "../logos/10.png" ); }
.argue[ data-no = "11" ] .icon, td[ data-argue_no = "11" ] .icon
{ background-image: url( "../logos/11.png" ); }
.argue[ data-no = "12" ] .icon, td[ data-argue_no = "12" ] .icon
{ background-image: url( "../logos/12.png" ); }
.argue[ data-no = "13" ] .icon, td[ data-argue_no = "13" ] .icon
{ background-image: url( "../logos/13.png" ); }
.argue[ data-no = "14" ] .icon, td[ data-argue_no = "14" ] .icon
{ background-image: url( "../logos/14.png" ); }
.argue[ data-no = "15" ] .icon, td[ data-argue_no = "15" ] .icon
{ background-image: url( "../logos/15.png" ); }
.argue[ data-no = "16" ] .icon, td[ data-argue_no = "16" ] .icon
{ background-image: url( "../logos/16.png" ); }


/*
.argue {
  width: 80px;
  height: 80px;
  border: 3px solid transparent;
  box-sizing: border-box;
  transition: 0.2s ease;
}
*/
.argue:hover:not(.selected) {
  border-color: gray;
}

.argue.selected {
  box-shadow: 0 0 0 3px lightgray inset;
}