@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

div,
input,
textarea,
button,
body {
    box-sizing: border-box;
    font-family: "Roboto", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    touch-action: pan-x pan-y;
    overscroll-behavior: none;
}

body,
html {
    padding: 0;
    margin: 0;
    min-height: 100%;
    scrollbar-color: #4A4A4A rgba(41, 121, 255, 0.2);
    touch-action: pan-x pan-y;
    overscroll-behavior: none;
}

.row,
#widgets {
    display: flex;
    gap: 28px;
    width: 100%;
    scrollbar-color: #3B4252 transparent;
    scrollbar-width: thin;
}

.col {
    flex: 1;
    max-width: calc(50% - 14px);
    display: flex;
    flex-flow: column;
    gap: 28px;
}

#pageContent {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    overflow: auto;
    scrollbar-color: #3B4252 transparent;
    scrollbar-width: thin;
}

#widgets {
    flex-flow: column;
    align-items: center;
    margin: 0 auto;
    padding: 20px;
}
#widgets.widgets--no-padding{padding:0;}

.fullwidth {
    width: 100%;
}

h2 {
    font-size: min(36px, 6.1vw);
    align-self: flex-start;
    color: #fff;
    margin: 12px 0 8px 0;
}

p{
    font-size: min(18px, 3vw);
    color: #fff;
    margin: 12px 0 8px 0;
}

html body .dnone {
    display: none;
}

.bettingInfo{ display: flex; flex-flow: column;color: #fff; position: relative;}
.bettingInfo__button{margin-left: auto;font-size: min(18px, 3vw); cursor: default; display: flex;align-items: center; gap: min(5px, 0.8vw);}
.bettingInfo__button::before{content: " "; display: block; width: min(30px, 5vw); height: min(30px, 5vw); background-size: contain; background-image: url("/assets/images/info.svg");}
.bettingInfo__content{transition: all 200ms linear;position: absolute; right: 0; top: 40px; background: rgb(42, 39, 40); z-index: 10; padding: 20px;border-radius: 10px;opacity: 0; pointer-events: none;}
.bettingInfo__content h2{margin-top: 0;}
.bettingInfo__content ul{margin:0; padding:0;}
.bettingInfo__content ul li{margin: 8px 0 0 20px; padding: 0; font-size: 16px;}

.bettingInfo.visible .bettingInfo__content{pointer-events: all;opacity: 1;}
.row--switcher span{display: inline-block; padding: 10px;font-size: 16px;color: #fff;cursor: pointer;}
.row--switcher span.active{cursor: default;border-bottom: 2px solid #fff;}

@media (min-width: 1021px) {
    .on--mobile, .row--switcher{display: none;}
}
@media (max-width: 1020px) {
    .on--desktop{display: none;}
    .row,
    #widgets,
    .col {
        flex-flow: column;
        gap: 24px;
        max-width: 100%;
    }
    .row--switcher{flex-flow: row;gap:10px;}
    .mobile-widget{
        display: none;
    }
    .mobile-widget--visible{display: block;}
}

@media (max-width: 766px) {
    #widgets {
        padding: 20px;
    }
}