@font-face {
    font-family: 'Ubuntu';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('/fonts/ubuntu-v20-cyrillic_cyrillic-ext_greek_greek-ext_latin_latin-ext-300.woff2') format('woff2');
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* ubuntu-300italic - cyrillic_cyrillic-ext_greek_greek-ext_latin_latin-ext */
@font-face {
    font-family: 'Ubuntu';
    font-style: italic;
    font-weight: 300;
    font-display: swap;
    src: url('/fonts/ubuntu-v20-cyrillic_cyrillic-ext_greek_greek-ext_latin_latin-ext-300italic.woff2') format('woff2');
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* ubuntu-regular - cyrillic_cyrillic-ext_greek_greek-ext_latin_latin-ext */
@font-face {
    font-family: 'Ubuntu';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/ubuntu-v20-cyrillic_cyrillic-ext_greek_greek-ext_latin_latin-ext-regular.woff2') format('woff2');
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* ubuntu-italic - cyrillic_cyrillic-ext_greek_greek-ext_latin_latin-ext */
@font-face {
    font-family: 'Ubuntu';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/ubuntu-v20-cyrillic_cyrillic-ext_greek_greek-ext_latin_latin-ext-italic.woff2') format('woff2');
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* ubuntu-500 - cyrillic_cyrillic-ext_greek_greek-ext_latin_latin-ext */
@font-face {
    font-family: 'Ubuntu';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/fonts/ubuntu-v20-cyrillic_cyrillic-ext_greek_greek-ext_latin_latin-ext-500.woff2') format('woff2');
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* ubuntu-500italic - cyrillic_cyrillic-ext_greek_greek-ext_latin_latin-ext */
@font-face {
    font-family: 'Ubuntu';
    font-style: italic;
    font-weight: 500;
    font-display: swap;
    src: url('/fonts/ubuntu-v20-cyrillic_cyrillic-ext_greek_greek-ext_latin_latin-ext-500italic.woff2') format('woff2');
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* ubuntu-700 - cyrillic_cyrillic-ext_greek_greek-ext_latin_latin-ext */
@font-face {
    font-family: 'Ubuntu';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/fonts/ubuntu-v20-cyrillic_cyrillic-ext_greek_greek-ext_latin_latin-ext-700.woff2') format('woff2');
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* ubuntu-700italic - cyrillic_cyrillic-ext_greek_greek-ext_latin_latin-ext */
@font-face {
    font-family: 'Ubuntu';
    font-style: italic;
    font-weight: 700; 
    font-display: swap;
    src: url('/fonts/ubuntu-v20-cyrillic_cyrillic-ext_greek_greek-ext_latin_latin-ext-700italic.woff2') format('woff2');
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

@font-face {
    font-family: 'Roboto Flex';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url('/fonts/RobotoFlex-VariableFont_wght-900.woff2') format('woff2-variations');
}

html, body {
    font-family: "Ubuntu", "Helvetica Neue", Arial, sans-serif!important;
}

.header{
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 1000;
    margin-bottom: 24px;
}

.header__content{
    height: 44px;
}

.bottom-nav{
    height: calc(55px + env(safe-area-inset-bottom));
}

.bottom-nav.casino{
    background: #151923;
    color: #c0cce7;
}

.bottom-nav.sport{
    background: #fcfcfd;
    color: #60739f;
}
.bottom-nav__button > a{
    gap: 2px;
    color: inherit;
}

.bottom-nav.sport .bottom-nav__button a.active{
    color: #db3300
}

.bottom-nav.casino .bottom-nav__button a.active{
    color: #ff825c
}

.bottom-nav__section-btn{
    height: 100%;
}

.bottom-nav__section-btn--sport{
    background: #2d374d;
    border-top-right-radius: 64px;
    border-bottom-right-radius: 64px;
}

.bottom-nav__section-btn--casino{
    background: #e2e8f8;
    border-top-left-radius: 64px;
    border-bottom-left-radius: 64px;
}

.bottom-nav__section-btn a{
    display: flex;
    justify-content: center;
    align-content: center;
    width: 48px;
    height: 100%;
    flex-wrap: wrap;
}
.bottom-nav__section-btn a svg{
    width: 40px;
    height: 40px;
    color: #ff6333;
}
.page.casino .bottom-nav.sport{
    display: none;
}

.page.sport .bottom-nav.casino{
    display: none;
}


@media (max-width: 1000px){
    .header{
        display: flex;
        margin-bottom: 16px;
    }
}