.icon-logo{
    width: 32px; 
    height: 32px; 
    background: var(--accent); 
    border: 2px solid var(--black); 
    border-radius: 8px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-family: 'Barlow Condensed', sans-serif; 
    font-size: 11px; 
    font-weight: 900;
    text-transform: uppercase;
}
.logo-icon-xl {
    width: 44px; 
    height: 44px;
    color:black;
    background: var(--accent);
    border: 2px solid black;
    border-radius: 10px;
    display: flex; 
    align-items: center; 
    justify-content: center;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 14px; 
    font-weight: 900;
    text-transform: uppercase;
}
.logo-icon-xl.opp{
    background-color:vaR(--background);
}
.img-player-round{
    width: 34px; 
    height: 34px; 
    border-radius: 50%; 
    border: 2px solid var(--black); 
    background: var(--primary-700); 
    display: flex;
    align-items: center; 
    justify-content: center; 
    font-family: 'Barlow Condensed', sans-serif; 
    font-size: 11px; 
    font-weight: 900; 
    color: var(--white); 
    overflow: hidden;
}
.img-player-round.opp{
    background: var(--gray-dark);
}
.img-player-square{
    width: 34px; 
    height: 34px; 
    border-radius: 8px; 
    border: 2px solid var(--black); 
    background: var(--primary-700); 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-family: 'Barlow Condensed', sans-serif; 
    font-size: 11px; 
    font-weight: 900; 
    color: var(--white); 
    overflow: hidden;
}
.img-player-square.opp{
    background: var(--gray-dark);
}
.img-team{
    width: 32px; 
    height: 32px; 
    border: 2px solid var(--black); 
    border-radius: 8px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-family: 'Barlow Condensed', sans-serif; 
    font-size: 10px; 
    font-weight: 900; 
    background: var(--accent);
}
.img-team.opp{
    background: var(--background);
}
.step-num{
    width: 28px; 
    height: 28px; 
    border: 2px solid var(--black); 
    border-radius: 50%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-size: 11px; 
    font-weight: 800; 
    background: var(--background-card);
}
.setup-page .card.active .step-num{
    background: var(--accent);
}
.setup-page .card.done .step-num{
    background: var(--green); 
    color: var(--white); 
    border-color: var(--green);
}