[data-view="viewer-dashboard"] .top-card,
[data-view="viewer-dashboard"] .top-team{
    text-align: center;
    position: relative
}

[data-component="deepstats"] .playing-card-container {
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
    position: absolute
}
[data-view="viewer-dashboard"] .top-card .playing-card-container,
[data-view="deepstats"] .top-team .playing-card-container {
    margin: 13px;
    -webkit-transform: scale(.4);
    -moz-transform: scale(.6);
    -o-transform: scale(.6);
    transform: scale(.3);
    margin: -109px -60px;
}

[data-component="deepstats"] .top-card .playing-card-container:nth-child(1) {
    left: -20;
    top: 0;
    z-index: 5;
    transform: scale(.4);
}


[data-component="deepstats"] .top-team .playing-card-container:nth-child(1) {
    left: 0;
    top: 60;
    z-index: 5;
    transform: scale(.4);
}

[data-component="deepstats"] .top-team .playing-card-container:nth-child(2) {
    left: 0;
    top: 20;
    z-index: 4;
    transform: scale(.4);
}

[data-component="deepstats"] .top-team .playing-card-container:nth-child(3) {
    left: 0;
    top: -20;
    z-index: 3;
    transform: scale(.4);

}

[data-component="deepstats"] .top-team .playing-card-container:nth-child(4) {
    left: 0;
    top: -60;
    z-index: 2;
    transform: scale(.4);
}



@media only screen and (max-width: 1279px) {

    [data-component="deepstats"] .top-card .playing-card-container:nth-child(1) {
        left: -70;
        top: -30;
        z-index: 5;
        transform: scale(.2);
    }

    [data-component="deepstats"] .top-team .playing-card-container:nth-child(1) {
        left: -70;
        top: 0;
        z-index: 5;
        transform: scale(.2);
    }
    
    [data-component="deepstats"] .top-team .playing-card-container:nth-child(2) {
        z-index: 4;
        left: -70;
        top: -20;
        transform: scale(.2);
    }
    
    [data-component="deepstats"] .top-team .playing-card-container:nth-child(3) {
        z-index: 3;
        transform: scale(.2);
        left: -70;
        top: -40;
    
    }
    
    [data-component="deepstats"] .top-team .playing-card-container:nth-child(4) {
        z-index: 2;
        transform: scale(.2);
        left: -70;
        top: -60;
    }
}

@media only screen and (max-width: 767px) {
    [data-component="deepstats"] .playing-card-container {
        opacity: 0;
    }
}


@media only screen and (min-width:569px){
    [data-component="deepstats"] .top .user{
        padding:13px;
        height: 500px;
        border:5px solid #adbbbf
    }
}

[data-component="deepstats"] .top img{
    border-radius:50%;
    max-width:93%;
    margin:13px auto
}

[data-component="leaderboard"] .info img{
    border-radius:50%;
    max-width:93%;
    margin:13px auto
}

@media only screen and (min-width:569px){
    [data-component="deepstats"] .top img{
        max-width:75%
    }
}
[data-component="deepstats"] .top .info{
    text-align:center
}
[data-component="deepstats"] .top .info .name{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    font-size:20px;
    margin-bottom:13px;
    margin-top:13px
}
[data-component="deepstats"] .top .title{
    background-color:#272727;
    color:#fff;
    display:none
}
@media only screen and (min-width:350px){
    [data-component="deepstats"] .top .title{
        display:block
    }
}
[data-component="deepstats"] .top .title p{
    font-size:13px;
    padding:5px;
    line-height:17px
}
@media only screen and (min-width:569px){
    [data-component="deepstats"] .top .title p{
        font-size:19px;
        line-height:34px
    }
}
@media only screen and (min-width:600px){
    [data-component="deepstats"] .top .title p{
        font-size:28px
    }
}
@media only screen and (min-width:992px){
    [data-component="deepstats"] .top .title p{
        font-size:15px
    }
}

.top-stats {
    display: grid; 
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    height: 70%; 
}

.second-column {
    display: flex;
    justify-content: center;
    align-items: center; 
}

.table {
    display: table;
    width: 100%; 
    border-collapse: collapse; 
}

.table-row {
    display: table-row;
}

.table-cell {
    display: table-cell; 
    padding: 8px;
    text-align: left;
}

th, td {
    padding: 10px;
    border: 1px solid #ccc;
    text-align: left;
}

.clickable-row {
    cursor: pointer;
}

.expandable-row {
    display: none; 
}

.details {
    padding: 10px;
    background-color: #f9f9f9;
}

[data-component="deepstats"] .table .info img{
    border-radius:50%;
    float:left;
    margin-right:5px;
    height: 65px;
}

.tab-container {
    display: flex;
    justify-content: space-between;
    background-color:#272727;
    color:#fff;
    overflow: hidden;
    width: 100%;
}

.tabd {
    flex: 1;
    text-align: center;
    padding: 15px 0;
    cursor: pointer;
    transition: background-color 0.3s;
}

.tabd:hover {
    background-color: #ddd;
    color:#272727;
}

.tabd.active {
    background-color: #747474;;
    color: white;
}

.tabd-content {
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 5px;
    margin-top: 10px;
}

.stats-content {
    display: none;
}

.stats-content.active {
    display: block;
}
.win {
    color: rgb(56, 56, 255);
  }
  
.loss {
color: rgb(184, 29, 29);
}