/**estilização das quadras*/
.quadra {
    width: 300px;
    height: 300px;
    border: 2px solid black;
    background: #F78C59;
    position: relative;
}

#linha{
    width: 297px;
    height: 2px;
    background: black;
    margin-top: 100px;

}

.player {
    width: 35px;
    height: 35px;
    text-align: center;
    line-height: 32px;
   
    background: red;
    border: 2px solid black;
    border-radius: 100%;
    position: absolute;
}

#ply_L  {
    right: 10% ;
    bottom: 25% ;
    background: #0177ff;
}

#ply_P2  {
    right: 10%;
    bottom: 75%;
    background: #7ed321;
}

#ply_C1  {
    right: 44%;
    bottom: 75%;
    background: #fffb01;
}

#ply_Op  {
    right: 77%;
    bottom: 75%;
    background: #ff001e;
}

#ply_P1  {
    right: 77%;
    bottom: 25%;
    background: #7ed321;
}

#ply_Li  {
    right: 44%;
    bottom: 25%;
    background: #ffffff;
}