/*....................................................................................................................*/

.zon /* zones */
{
  cursor: pointer;
  width: calc(var(--cellSize) - var(--borderFull));
  height: calc(var(--cellSize) - var(--borderFull));
  border-radius: 50%;
  border: var(--borderDouble) #FA0 dotted;
  position: absolute;
  box-sizing: border-box;
  animation: spin 4s infinite 0s linear;
}

.zon:hover
{
  border-color: #FA0;
  border-style: solid;
  box-shadow:

    0 0 var(--borderDouble) 0 #F40,
    0 0 var(--borderDouble) 0 #F40 inset;
}

@keyframes spin{100%{transform: rotate(360deg)}}

/*....................................................................................................................*/

.zonNot
{
  border-width: calc(var(--borderFull) * 1.5);
  opacity: 0.7;
}

/*....................................................................................................................*/

.zonRed{border-color: #F00}

.zonRed:hover
{
  border-color: #F00;
  box-shadow:

    0 0 var(--borderDouble) 0 #F00,
    0 0 var(--borderDouble) 0 #F00 inset;
}

/*....................................................................................................................*/

.zonBlk{border-color: #000}

.zonBlk:hover
{
  border-color: #000;
  box-shadow:

    0 0 var(--borderDouble) 0 #000,
    0 0 var(--borderDouble) 0 #000 inset;
}