@font-face {
    font-family: 'Poppins-Light';
    src: url('../assets/fonts/poppins/Poppins-Light.woff2?v2');
}
@font-face {
    font-family: 'Poppins-Regular';
    src: url('../assets/fonts/poppins/Poppins-Regular.woff2?v2');
}
@font-face {
    font-family: 'Poppins-Medium';
    src: url('../assets/fonts/poppins/Poppins-Medium.woff2?v2');
}
@font-face {
    font-family: 'Poppins-SemiBold';
    src: url('../assets/fonts/poppins/Poppins-SemiBold.woff2?v2');
}
@font-face {
    font-family: 'Poppins-Bold';
    src: url('../assets/fonts/poppins/Poppins-Bold.woff2?v2');
}
@font-face {
    font-family: 'Poppins-ExtraBold';
    src: url('../assets/fonts/poppins/Poppins-ExtraBold.woff2?v2');
}
@font-face {
    font-family: 'Poppins-Black';
    src: url('../assets/fonts/poppins/Poppins-Black.woff2?v2');
}

@font-face {
    font-family: 'SportIcons';
    font-weight: normal;
    font-style: normal;
    src: url('../assets/fonts/sporticons.woff2') format('woff2'),
         url('../assets/fonts/sporticons.woff') format('woff');
}

:root {
    --bgColor: #161B28;
    --headerBgColor: rgba(54, 60, 76, 0.2);
    --tableBgColor: #161B28;
    --textColorPrimary: #CCD6F6;
    --textColorSecondary: #929DBF;
    --textColorPale: #cccccc;
    --textColorActive: #00EC66;
    --liveDotBgColor: #05D889;
    --activeTabBgColor: rgba(55, 60, 76, 0.5);
    --borderRadius: 50px;
    --headerBorderRadius: 100px;
    --tableHeadTextColor: #CCD6F6;
    --tableBodyTextColor: #CCD6F6;
    --tableRow1BgColor: rgba(54, 60, 76, 0.15);
    --tableRow2BgColor: var(--tableBgColor);
    --rowSelectionBgColor: rgba(55, 60, 76, 0.5);
    --rowSelectionLiHoverBgColor: rgba(55, 60, 76, 0.8);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

ul {
    list-style: none;
}

html {
    display: none;
    color: var(--textColorPrimary);
    font-family: 'Poppins-Medium';
    font-size: 15px;
}

.bets-overview-widget {
    background-color: var(--bgColor);
    padding: 1.6rem 2.3rem;
    position: relative;
    border-radius: 20px;
    overflow: hidden;

    &::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 18rem;
        pointer-events: none;
        background: linear-gradient(0deg, #161B28 0%, rgba(22, 27, 40, 0) 59%);
    }

    .header {
        background-color: var(--headerBgColor);
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.7rem 0.7rem 0.7rem 2.5rem;
        border-radius: var(--headerBorderRadius);
        margin-bottom: 1rem;

        .title {
            display: flex;
            align-items: center;
            gap: 1rem;

            .dot {
                width: 0.5rem;
                height: 0.5rem;
                border-radius: 50%;
                background-color: var(--liveDotBgColor);
            }

            h1 {
                font-size: 1.2rem;
                font-family: 'Poppins-SemiBold';
                font-weight: normal;
            }
        }

        .settings {
            font-size: 1rem;
            color: var(--textColorPale);
            display: flex;
            align-items: center;

            .rows-number {
                position: relative;
                display: none;

                .selected-value {
                    display: flex;
                    align-items: center;
                    gap: 0.7rem;
                    background-color: var(--rowSelectionBgColor);
                    padding: 1rem 1.15rem;
                    border-radius: var(--borderRadius);
                    height: 3.2rem;
                    cursor: pointer;

                    .icon {
                        background-image: url('../assets/images/dropdown.svg');
                        height: 0.6rem;
                        width: 1.15rem;
                        background-size: contain;
                        background-repeat: no-repeat;
                        background-position: center;
                    }
                }

                .selection {
                    display: none;
                    position: absolute;
                    right: 0;
                    background-color: var(--rowSelectionBgColor);
                    width: 100%;
                    text-align: right;
                    margin-top: 0.4rem;
                    border-radius: var(--borderRadius);
                    overflow: hidden;
                    z-index: 9;

                    li {
                        padding: 0.6rem;
                        cursor: pointer;
                        background-color: var(--rowSelectionBgColor);

                        &:hover {
                            filter: brightness(1.2);
                            background-color: var(--rowSelectionLiHoverBgColor);
                        }

                        &.selected {
                            color: var(--textColorActive);
                        }
                    }
                }
            }

            .tabs {
                border-radius: var(--borderRadius);
                display: flex;

                .tab {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    cursor: pointer;
                    padding: 0.66rem 1.66rem;
                    font-family: 'Poppins-SemiBold';

                    &.active {
                        background-color: var(--activeTabBgColor);
                        border-radius: var(--borderRadius);
                        color: var(--textColorActive);
                    }
                }
            }
        }
    }

    .bets-table {
        width: 100%;
        border-radius: var(--borderRadius);
        background-color: var(--tableBgColor);
        min-height: 42.85rem;

        &:not(.visible) {
            display: none;
        }

        &.sportsbook-bets {
            tbody tr {
                cursor: pointer;

                td:first-child div {
                    display: flex;
                    align-items: center;

                    .sport-icon, img {
                        width: 1.5rem;
                        font-size: 1.5rem;
                        margin-right: 0.5rem;
                    }
                }
            }
        }

        table {
            width: 100%;
            border-collapse: collapse;

            thead {
                color: var(--tableHeadTextColor);
                font-size: 1rem;
                position: sticky;
                top: 0;
                background-color: var(--tableBgColor);
                z-index: 1;

                tr th {
                    padding: 0.8rem 1rem 0.8rem 2rem;
                    text-align: left;
                    font-weight: normal;
                    font-family: 'Poppins-SemiBold';
                    width: 20%;

                    &:nth-child(1) {
                        width: 30%;
                    }
                    &:nth-child(2) {
                        width: 15%;
                    }
                    &:nth-child(3) {
                        width: 15%;
                    }

                    &.value-highlight {
                        text-align: right;
                    }
                }
            }

            tbody {
                font-size: 0.9rem;

                tr {
                    border-radius: 1000px;

                    &:nth-child(odd) {
                        background-color: var(--tableRow1BgColor);
                    }
                    &:nth-child(even) {
                        background-color: var(--tableRow2BgColor);
                    }

                    td:first-child {
                        border-radius: var(--borderRadius) 0 0 var(--borderRadius);
                    }
                    td:last-child {
                        border-radius: 0 var(--borderRadius) var(--borderRadius) 0;
                    }
                }

                tr td {
                    padding: 0.8rem 1rem 0.8rem 2rem;
                    height: 3.8rem;

                    &.value-highlight {
                        text-align: right;
                        color: var(--tableBodyTextColor);

                        &.positive {
                            color: var(--textColorActive);
                        }
                    }

                    .game {
                        display: flex;
                        align-items: center;

                        img {
                            width: 1.7rem;
                            margin-right: 0.5rem;
                        }
                    }

                    .player {
                        display: flex;
                        align-items: center;

                        img {
                            height: 1.7rem;
                            margin-right: 0.5rem;
                        }
                    }
                }
            }
        }
    }

    .currency {
        display: flex;
        align-items: center;
        justify-content: right;

        span:first-child {
            opacity: 0.6;
            font-size: 0.8rem;
            margin-right: 0.2rem;
        }

        img {
            height: 1.6rem;
            margin-left: 0.5rem;
        }
    }
}
       
.dotted-hidden {
    overflow: hidden;
    display: inline-block;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sport-icon {
    font-family: 'SportIcons';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    &[sport='basketball']:before { content: '\e800'; }
    &[sport='basketball3x3']:before { content: '\e801'; }
    &[sport='beachsoccer']:before { content: '\e802'; }
    &[sport='beachvolley']:before { content: '\e803'; }
    &[sport='bowls']:before { content: '\e804'; }
    &[sport='boxing']:before { content: '\e805'; }
    &[sport='callofduty']:before { content: '\e806'; }
    &[sport='canoeing']:before { content: '\e807'; }
    &[sport='chess']:before { content: '\e808'; }
    &[sport='counter-strike']:before { content: '\e809'; }
    &[sport='counterstrikego']:before { content: '\e80a'; }
    &[sport='premiumcricket']:before,
    &[sport='cricket']:before { content: '\e80b'; }
    &[sport='crosscountry']:before { content: '\e80c'; }
    &[sport='curling']:before { content: '\e80d'; }
    &[sport='cycling']:before { content: '\e80e'; }
    &[sport='darts']:before { content: '\e80f'; }
    &[sport='diving']:before { content: '\e810'; }
    &[sport='dota']:before { content: '\e811'; }
    &[sport='dota2']:before { content: '\e812'; }
    &[sport='fieldhockey']:before { content: '\e813'; }
    &[sport='fifa']:before { content: '\e814'; }
    &[sport='floorball']:before { content: '\e815'; }
    &[sport='formula1']:before { content: '\e816'; }
    &[sport='futsal']:before { content: '\e817'; }
    &[sport='golf']:before { content: '\e818'; }
    &[sport='greyhoundraicing']:before { content: '\e819'; }
    &[sport='handball']:before { content: '\e81a'; }
    &[sport='harnessracing']:before { content: '\e81b'; }
    &[sport='heartstone']:before { content: '\e81c'; }
    &[sport='heroesofnewerth']:before { content: '\e81d'; }
    &[sport='heroesofthestorm']:before { content: '\e81e'; }
    &[sport='horseracing']:before { content: '\e81f'; }
    &[sport='judo']:before { content: '\e820'; }
    &[sport='luge']:before { content: '\e821'; }
    &[sport='marathonswimming']:before { content: '\e822'; }
    &[sport='rainbowsix']:before { content: '\e823'; }
    &[sport='rocketleague']:before { content: '\e824'; }
    &[sport='shorttrackspeedskating']:before { content: '\e825'; }
    &[sport='speedskating']:before { content: '\e826'; }
    &[sport='valorant']:before { content: '\e827'; }
    &[sport='fencing']:before { content: '\e828'; }
    &[sport='motorsport']:before { content: '\e829'; }
    &[sport='nhl']:before { content: '\e82a'; }
    &[sport='olympics']:before { content: '\e82b'; }
    &[sport='overwatch']:before { content: '\e82c'; }
    &[sport='pesapallo']:before { content: '\e82d'; }
    &[sport='poker']:before { content: '\e82e'; }
    &[sport='politics']:before { content: '\e82f'; }
    &[sport='baseball']:before { content: '\e830'; }
    &[sport='aussierules']:before { content: '\e831'; }
    &[sport='equestrian']:before { content: '\e832'; }
    &[sport='athletics']:before { content: '\e833'; }
    &[sport='rally']:before { content: '\e834'; }
    &[sport='rowing']:before { content: '\e835'; }
    &[sport='surfing']:before { content: '\e836'; }
    &[sport='formulae']:before { content: '\e837'; }
    &[sport='stockcarracing']:before { content: '\e838'; }
    &[sport='starcraftbroodwar']:before { content: '\e839'; }
    &[sport='moviesandtvshows']:before { content: '\e83a'; }
    &[sport='skijumping']:before { content: '\e83b'; }
    &[sport='starcraft']:before { content: '\e83c'; }
    &[sport='taekwondo']:before { content: '\e83d'; }
    &[sport='leagueoflegends']:before { content: '\e83e'; }
    &[sport='mma']:before { content: '\e83f'; }
    &[sport='bandy']:before { content: '\e840'; }
    &[sport='worldofwarcraft']:before { content: '\e841'; }
    &[sport='weightlifting']:before { content: '\e842'; }
    &[sport='11']:before { content: '\e843'; }
    &[sport='modernpentathlon']:before { content: '\e844'; }
    &[sport='americanfootball']:before { content: '\e845'; }
    &[sport='softball']:before { content: '\e846'; }
    &[sport='warcraft3']:before { content: '\e847'; }
    &[sport='swimming']:before { content: '\e848'; }
    &[sport='alpineskiing']:before { content: '\e849'; }
    &[sport='wrestling']:before { content: '\e84a'; }
    &[sport='motorcycleracing']:before { content: '\e84b'; }
    &[sport='badminton']:before { content: '\e84c'; }
    &[sport='biathlon']:before { content: '\e84d'; }
    &[sport='icehockey']:before { content: '\e84e'; }
    &[sport='triathlon']:before { content: '\e84f'; }
    &[sport='counterstrike']:before { content: '\e850'; }
    &[sport='kabaddi']:before { content: '\e851'; }
    &[sport='sailing']:before { content: '\e852'; }
    &[sport='skateboarding']:before { content: '\e853'; }
    &[sport='wintersports']:before { content: '\e854'; }
    &[sport='worldoftanks']:before { content: '\e855'; }
    &[sport='waterpolo']:before { content: '\e856'; }
    &[sport='volleyball']:before { content: '\e857'; }
    &[sport='vainglory']:before { content: '\e858'; }
    &[sport='tennis']:before { content: '\e859'; }
    &[sport='tabletennis']:before { content: '\e85a'; }
    &[sport='sumo']:before { content: '\e85b'; }
    &[sport='squash']:before { content: '\e85c'; }
    &[sport='specials']:before { content: '\e85d'; }
    &[sport='soccermythical']:before { content: '\e85e'; }
    &[sport='soccer']:before { content: '\e85f'; }
    &[sport='snooker']:before { content: '\e860'; }
    &[sport='smite']:before { content: '\e861'; }
    &[sport='rugby']:before { content: '\e862'; }
    &[sport='quakeii']:before { content: '\e863'; }
    &[sport='archery']:before { content: '\e864'; }
    &[sport='arenaofvalor']:before { content: '\e865'; }
}

@media (max-width: 1200px) {
    html {
        font-size: 14px;
    }
}
@media (max-width: 1000px) {
    html {
        font-size: 13px;
    }
}
@media (max-width: 800px) {
    html {
        font-size: 15px;
    }

    .bets-overview-widget {
        padding: 1rem;
        font-size: 0.75rem;

        .header {
            padding: 0.3rem;

            .title {
                display: none;
            }

            .settings {
                font-size: inherit;

                .tabs .tab {
                    padding: 0.6rem 1.3rem;
                }
            }
        }

        .bets-table {
            table {
                thead {
                    font-size: 0.8rem;

                    tr th {
                        padding: 0.5rem 0.5rem 0.5rem 1rem;
                    }

                    th:nth-child(2), th:nth-child(3) {
                        display: none;
                    }
                }

                tbody {
                    font-size: inherit;

                    tr td {
                        padding: 0.5rem 0.5rem 0.5rem 1rem;

                        .dotted-hidden {
                            width: 100%;
                        }
                    }

                    td:first-child {
                        max-width: 7.5rem;
                    }

                    td:nth-child(2), td:nth-child(3) {
                        display: none;
                    }
                }
            }
        }

        .sportsbook-bets tbody td:first-child {
            p.match-name {
                display: flex;
                flex-direction: column;

                span:nth-child(2) {
                    display: none;
                }

                span {
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    overflow: hidden;
                }
            }
        }
    }
}