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

.atl /* athlete */
{
  cursor: pointer;
  width: var(--athleteSize);
  height: var(--athleteSize);
  background: #333;
  border-radius: 50%;
  border-color: var(--white);
  border-width: var(--borderFull);
  border-style: solid;
  box-sizing: border-box;
  position: absolute;
  stroke: #333;
}

.atlArt{position: absolute} /* athlete art */
.atlFil{fill: var(--white)} /* athlete fill */

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

.atlSelZon /* athlete selector zone */
{
  width: var(--athleteSize);
  height: var(--athleteSize);
  position: absolute;
}

.atlSel /* athlete selector */
{
  fill: rgba(255, 255, 255, 0);
  transition: fill 0.3s;
  stroke-width: 0;
}

.atlSel:hover{fill: rgba(255, 255, 255, 0.3)}

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

.rep{box-shadow: 0 0 0 var(--borderDouble) #000 inset}

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

.blue
{
  background: #480080;
  stroke: #480080;
}
.green
{
  background: #580;
  stroke: #580;
}