.field{
    position:relative;
    background-image: url('/img/soccer_field.png');
    background-position:center center;
    background-size:cover;
    aspect-ratio: 1.59/1;
    width:100%;

}

.player {
    z-index:20;
    cursor:-webkit-grab!important;
    cursor:grab!important;
    position:absolute;
    width:5vw;
    min-width:30px;
    max-width:60px;
    aspect-ratio:1/1;
    background-color: #FFED00;
    background-image:var(--bg);
    background-size:cover;
    background-position:center center;
    border-radius:50%;
    /* position:absolute;      */
    box-shadow: inset 5px 5px 5px #ffffff81, 5px 5px 5px #0008, inset -5px -5px 5px rgba(0, 0, 0, 0.496);
    transform:translateY(-50%) translateX(-50%);
}

.player.atk{
    background-color:rgb(255, 106, 0);
}

.player.mdf{
    background-color:rgb(0, 164, 44);
}

.player.def{
    background-color:rgb(0, 255, 225);
}

.player.gkp{
    background-color:rgb(4, 0, 255);
}

.player.dragging{
    cursor:-webkit-grabbing;
    cursor:grabbing;
    opacity:1;
    box-shadow:none;
    background-image:var(--bg);

}

.bench {
    min-height: 80px;
    position:relative;
    margin-top: 5px;
    width:100%;
    border:4px dashed white;
    padding:2%;
    background-color:rgba(1, 47, 8, 0.557);
}

.bench::before{
    font-weight:bolder;
    text-transform:uppercase;
    content:'panchina';
    position:absolute;
    border:3px solid white;
    padding: .4em 1em ;
    top:1%;
    right:3%;
}

.bench>*{
    position:relative;
    display:inline-block;
    margin-right: 3%;
    transform:translateY(0%) translateX(0%);
}

.field_zone{
    position:absolute;
    height:100%;
    width:33.33%;    
    transition:.2s;
}


.field_zone.atk{
    right:0%;
    background-color:rgba(255, 89, 0, 0);
}
.field_zone.atk.dragging{
    background-color:rgba(255, 89, 0, 0.1);
}
.field_zone.atk.dragover{
    background-color:rgba(255, 89, 0, 0.25);
}

.field_zone.mdf{
    right:33.33%;
    background-color:rgba(255, 255, 0, 0);
}
.field_zone.mdf.dragging{
    background-color:rgba(255, 255, 0, 0.1);
}
.field_zone.mdf.dragover{
    background-color:rgba(255, 255, 0, 0.25);
}

.field_zone.def{
    right:66.66%;
    background-color:rgba(0, 238, 255, 0);
}
.field_zone.def.dragging{
    background-color:rgba(0, 238, 255, 0.1);
}
.field_zone.def.dragover{
    background-color:rgba(0, 238, 255, 0.25);
}

.field_zone.gkp{
    z-index:10;
    height:20%;
    width:10%;
    left:4%;
    top:50%;
    transform:translateY(-50%);
    background-color:rgba(0, 26, 255, 0);
}
.field_zone.gkp.dragging{
    background-color:rgba(0, 26, 255, 0.25);
}
.field_zone.gkp.dragover{
    background-color:rgba(0, 26, 255, 0.5);
}