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

.lgt /* light */
{
  width: 5%;
  height: var(--cellSize);
  background: #AAA;
  border-radius: 50%;
  position: relative;
}

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

.rng /* ring */
{
  position: absolute;
  border: var(--borderFull) var(--white) solid;
  border-radius: 50%;
  box-sizing: border-box;
  opacity: 0.2;
}

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

.rngA{width: 100%; height: 100%; animation: wobbleA 2s ease 0s infinite}
.rngB{width: 88%; height: 88%; animation: wobbleB 2s ease 0s infinite}
.rngC{width: 66%; height: 66%; animation: wobbleC 2s ease 0s infinite}
.rngD{width: 44%; height: 44%; animation: wobbleD 2s ease 0s infinite}

@keyframes wobbleA
{
  0%{border-width: 0}
  25%{border-width: calc(var(--borderFull) * 1.7); opacity: 1}
  35%{border-width: 0}
  100%{border-width: 0}
}

@keyframes wobbleB
{
  0%{border-width: var(--borderFull)}
  20%{border-width: calc(var(--borderFull) * 1.7); opacity: 1}
  30%{border-width: var(--borderFull)}
  100%{border-width: var(--borderFull)}
}

@keyframes wobbleC
{
  0%{border-width: var(--borderFull)}
  15%{border-width: calc(var(--borderFull) * 1.7); opacity: 1}
  25%{border-width: var(--borderFull)}
  100%{border-width: var(--borderFull)}
}

@keyframes wobbleD
{
  0%{border-width: var(--borderFull)}
  10%{border-width: calc(var(--borderFull) * 1.7); opacity: 1}
  20%{border-width: var(--borderFull)}
  100%{border-width: var(--borderFull)}
}