@font-face {
    font-family: 'Roboto-Regular';
    src: url('../assets/fonts/roboto/Regular/Roboto-Regular.woff2') format('woff2'),
         url('../assets/fonts/roboto/Regular/Roboto-Regular.woff')  format('woff'),
         url('../assets/fonts/roboto/Regular/Roboto-Regular.ttf')   format('truetype');
}
@font-face {
    font-family: 'Roboto-Bold';
    src: url('../assets/fonts/roboto/Bold/Roboto-Bold.woff2') format('woff2'),
         url('../assets/fonts/roboto/Bold/Roboto-Bold.woff')  format('woff'),
         url('../assets/fonts/roboto/Bold/Roboto-Bold.ttf')   format('truetype');
}
@font-face {
    font-family: 'Roboto-Black';
    src: url('../assets/fonts/roboto/Black/Roboto-Black.woff2') format('woff2'),
         url('../assets/fonts/roboto/Black/Roboto-Black.woff')  format('woff'),
         url('../assets/fonts/roboto/Black/Roboto-Black.ttf')   format('truetype');
}
@font-face {
    font-family: 'Roboto-Light';
    src: url('../assets/fonts/roboto/Light/Roboto-Light.woff2') format('woff2'),
         url('../assets/fonts/roboto/Light/Roboto-Light.woff')  format('woff'),
         url('../assets/fonts/roboto/Light/Roboto-Light.ttf')   format('truetype');
}
@font-face {
    font-family: 'Roboto-Medium';
    src: url('../assets/fonts/roboto/Medium/Roboto-Medium.woff2') format('woff2'),
         url('../assets/fonts/roboto/Medium/Roboto-Medium.woff')  format('woff'),
         url('../assets/fonts/roboto/Medium/Roboto-Medium.ttf')   format('truetype');
}
@font-face {
    font-family: 'Roboto-Thin';
    src: url('../assets/fonts/roboto/Thin/Roboto-Thin.woff2') format('woff2'),
         url('../assets/fonts/roboto/Thin/Roboto-Thin.woff')  format('woff'),
         url('../assets/fonts/roboto/Thin/Roboto-Thin.ttf')   format('truetype');
}

:root {
    --bg-color: #000;
    --text-color: #fff;
    --pale-text-color: #fff;
    --title-bg-color: #1b1b1b;
    --match-bg-color-1: #131313;
    --match-bg-color-2: #0d0d0d;
    --coef-bg-color: #313131;
    --coef-text-color: var(--text-color);
    --coef-hover-bg-color: #484848;
    --seelcted-coef-bg-color: #39b54a;
    --selected-coef-color: var(--text-color);
    --footer-bg-color: #1b1b1b;
}

* {
    margin: 0;
    padding: 0;
}

html {
    display: none;
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: 'Roboto-Regular';
    font-size: 12px;
}

.sport-widget {
    width: 100%;
    height: 365px;
}

.sport-widget h2 {
    height: 30px;
    line-height: 30px;
    background-color: var(--title-bg-color);
    font-weight: normal;
    text-align: center;
    font-size: 17px;
}

.sport-widget ul {
    width: 100%;
    height: calc(100% - 60px);
    box-sizing: border-box;
    background-color: var(--match-bg-color-1);
    border-top: 3px solid var(--match-bg-color-1);
    border-bottom: 3px solid var(--match-bg-color-1);
}
.sport-widget ul li {
    height: 11.1%;
    display: flex;
    align-items: center;
    background-color: var(--match-bg-color-1);
}
.sport-widget ul li:nth-child(even) {
    background-color: var(--match-bg-color-2);
}

.sport-widget .total-odds {
    height: 30px;
    line-height: 30px;
    background-color: var(--footer-bg-color);
    font-weight: normal;
    text-align: center;
    font-size: 15px;
    transition: filter 120ms ease-out;
    cursor: pointer;
}
.sport-widget .total-odds:hover {
    filter: brightness(1.2);
}

.start-time {
    width: 80px;
    box-sizing: border-box;
    padding-left: 15px;
    color: var(--pale-text-color);
}
.match-name {
    width: calc(100% - 270px);
}
.result-odds {
    width: 190px;
}

.coef-rect {
    position: relative;
    float: left;
    width: 50px;
    height: 30px;
    line-height: 30px;
    background-color: var(--coef-bg-color);
    color: var(--coef-text-color);
    box-sizing: border-box;
    text-align: center;
    vertical-align: middle;
    user-select: none;
    border-radius: 2px;
    overflow: hidden;
    cursor: pointer;
    margin-left: 10px;
}

.coef-rect.selected {
    background: var(--seelcted-coef-bg-color);
    color: var(--selected-coef-color);
}
.coef-rect:not(.selected):hover {
    background-color: var(--coef-hover-bg-color);
}