*,::before,::after{-webkit-box-sizing:border-box;box-sizing:border-box}.player{position:relative;overflow:visible;width:50px;height:50px;margin:5px 0;-webkit-border-radius:50%;border-radius:50%;background:#eee}.player:hover{opacity:.8}.left-side{position:absolute;top:0;right:0;bottom:-1px;left:0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);border:4px solid #eee;border-bottom-color:transparent;border-left-color:transparent;-webkit-border-radius:50%;border-radius:50%}.left-side.fill{border-color:transparent;border-bottom-color:#b43d3d;border-left-color:#b43d3d}.right-side{position:absolute;top:0;right:0;bottom:0;left:0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);border:2px solid #b43d3d;border-bottom-color:#eee;border-left-color:#eee;-webkit-border-radius:50%;border-radius:50%}.player-text{font-size:20px;font-weight:700;position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);color:#b43d3d}.player-title{position:absolute;top:calc(50%+55px);right:0;left:0;text-align:center;color:#999}.p1{width:50%;margin:auto}.np{color:green}.op{color:red}