@media (max-width:820px){
  body:not(.kk-match-active) #root .hero-metrics,
  body:not(.kk-match-active) #root .hero .hero-metrics{gap:10px!important;margin-top:12px!important}

  body:not(.kk-match-active) #root .hero-metrics > div,
  body:not(.kk-match-active) #root .hero .hero-metrics > div{
    background:#ffffff!important;
    border:1px solid rgba(216,223,219,.98)!important;
    box-shadow:0 10px 22px rgba(15,32,23,.12)!important;
    opacity:1!important;
  }

  body:not(.kk-match-active) #root .hero-metrics > div > span,
  body:not(.kk-match-active) #root .hero .hero-metrics > div > span{
    width:28px!important;
    height:28px!important;
    background:#e7f3eb!important;
    color:#2f7a4a!important;
    border-radius:10px!important;
    opacity:1!important;
  }

  body:not(.kk-match-active) #root .hero-metrics > div > b,
  body:not(.kk-match-active) #root .hero .hero-metrics > div > b{
    color:#173528!important;
    -webkit-text-fill-color:#173528!important;
    font-size:18px!important;
    font-weight:900!important;
    line-height:1.05!important;
    opacity:1!important;
    text-shadow:none!important;
  }

  body:not(.kk-match-active) #root .hero-metrics > div > small,
  body:not(.kk-match-active) #root .hero .hero-metrics > div > small{
    color:#65726d!important;
    -webkit-text-fill-color:#65726d!important;
    font-size:11px!important;
    font-weight:800!important;
    line-height:1.15!important;
    opacity:1!important;
    text-shadow:none!important;
    margin-top:3px!important;
  }

  body:not(.kk-match-active) #root .hero-metrics *{filter:none!important}
}
@media (max-width:390px){
  body:not(.kk-match-active) #root .hero-metrics > div > b,
  body:not(.kk-match-active) #root .hero .hero-metrics > div > b{font-size:17px!important}
  body:not(.kk-match-active) #root .hero-metrics > div > small,
  body:not(.kk-match-active) #root .hero .hero-metrics > div > small{font-size:10px!important}
}