.sp_event_stats {
    display: flex;
    padding: 12px;
    flex-wrap: wrap;
}

.sp_event_stat {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: center;
    width: 50%;
}

.sp_event_stat_diagram {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
}
.sp_event_stat_diagram_title {
    color: var(--Secondary-text, #7D889A);
    font-size: 14px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}
.sp_event_stat_tables {
    width: 100%;
}
.sp_event_stat_table {
    border-collapse: separate;
    border-spacing: 10px;
    width: 100%;
}

.sp_event_stat_table td {
    padding: 4px 12px;
    border-radius: 4px;
    background: #F7F8F9;
    text-align: center;
    font-size: 14px;
    line-height: 20px;
    color: #0F151E    
}
.sp_event_stat_table td.home {
    background: #15A863;
    color: #FFF;
    font-weight: 700;
}

.sp_event_stat_table td.away {
    background: #0059B2;
    color: #FFF;
    font-weight: 700;
}

.diagram {
    width: 85px;
    height:85px;
    border-radius: 50%;
    background: #15A863;
    position: relative;
    overflow: hidden;
}
.sp_event_stat.away .diagram {
    background: #0059B2;
}
.diagram::before {
    content: '';
    display: block;
    position: absolute;
    top:12px;
    left:12px;
    right:12px;
    bottom:12px;
    border-radius: 50%;
    background: #fff;
    z-index: 3;
    opacity: 1;
}
.diagram .piece {
    width: 100%;
    height: 100%;
    left: 0;
    right: 0;
    overflow: hidden;
    position: absolute;
}
.diagram .piece::before {
    content: '';
    display: block;
    position: absolute;
    width: 50%;
    height: 100%;
}
.diagram .piece.left {
    transform: rotate(0deg);
    z-index: 2;
    border-radius: 50%; 
}
.diagram.over_50 .piece.left {
    transform: rotate(180deg);
}
.diagram .piece.right {
    z-index: 1;
    border-radius: 50%; 
}
.diagram.over_50 .piece.right {
    transform: rotate(360deg);
}
.diagram .left::before {
    background: #ccc;
}
.diagram.over_50 .left::before {
    background: #15A863;
}
.sp_event_stat.away .diagram.over_50 .left::before {
    background: #0059B2;
}
.diagram .right::before {
    background: #ccc;
}
.diagram .text {
    position: absolute;
    z-index: 3;
    top: 0;
    bottom: 0;
    left:0;
    right:0;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--Text-Menu, #0F151E);
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;    
}



@media(min-width: 576px) {

}
@media(min-width: 768px) {
    .sp_event_stat_tables {
        order: 1;
        width: 40%;
    }
    .sp_event_stat.home {
        order: 0;
        width: 30%;
    }
    .sp_event_stat.away {
        order: 2;
        width: 30%;
    }    
}
@media(min-width: 1000px) {
  
}
@media(min-width: 1140px) {

}
@media(min-width: 1200px) {

}
@media(min-width: 1280px) {

}