.registrationPrompt {
    background-color: var(--color-combination-11);
    display: grid;
    grid-template: " image image   image "auto " .     content .     "auto/1fr 368px 1fr
}

@media only screen and (max-width:479px) {
    .registrationPrompt {
        grid-template-columns: 1fr 280px 1fr
    }
}

.registrationPrompt__imageWrapper {
    display: flex;
    grid-area: image;
    justify-content: center;
    margin-bottom: 16px
}

.registrationPrompt__imageWrapper img {
    overflow: hidden
}

.registrationPrompt__content {
    display: grid;
    grid-area: content;
    justify-content: center;
    margin-bottom: 56px
}

@media only screen and (max-width:639px) {
    .registrationPrompt__content {
        margin-bottom: 28px
    }
}

.registrationPrompt__title {
    color: var(--color-combination-1);
    font-size: 22px;
    font-weight: 700;
    text-align: center
}

.registrationPrompt__subTitle {
    color: var(--color-combination-5);
    font-size: 13px;
    margin-top: 12px;
    text-align: center
}

.registrationPrompt__buttonsWrapper {
    display: grid;
    justify-self: center;
    margin: 32px 0 0;
    row-gap: 12px;
    width: 320px
}

@media only screen and (max-width:639px) {
    .registrationPrompt__buttonsWrapper {
        margin: 16px 0 0;
        width: 280px
    }
}

.registrationPrompt__legal {
    color: var(--color-support-4);
    font-size: 11px;
    line-height: 15px;
    margin-top: 12px;
    text-align: center
}

.registrationPrompt__legal a {
    color: var(--color-support-4);
    cursor: pointer;
    font-weight: 700;
    text-decoration: underline
}

.registrationPrompt__legal a:hover {
    text-decoration: none
}

.langBoxSetup {
    color: var(--color-combination-1);
    display: grid;
    grid-template: " header  "max-content " content "1fr " footer  "max-content/auto;
    overflow: hidden;
    width: 436px;
    --content-width: 320px
}

@media only screen and (max-width:449px) {
    .langBoxSetup {
        --content-width: 250px
    }
}

@media only screen and (max-width:639px) {
    .langBoxSetup {
        max-height: unset;
        width: 100%
    }
}

.langBoxSetup__header {
    display: flex;
    grid-area: header
}

.langBoxSetup__content {
    display: grid;
    grid-area: content;
    justify-items: center;
    overflow: hidden;
    padding: 0 45px
}

@media only screen and (max-width:449px) {
    .langBoxSetup__content {
        padding: 0
    }
}

.langBoxSetup__image {
    width: 100%
}

@media only screen and (max-width:359px) {
    .langBoxSetup__image {
        display: none
    }
}

@media only screen and (max-height:785px) {
    .langBoxSetup--hideImage .langBoxSetup__image {
        display: none
    }
}

.langBoxSetup__title {
    font-size: 18px;
    font-weight: 700;
    margin: 16px 0 8px;
    text-align: center
}

@media only screen and (max-width:449px) {
    .langBoxSetup__title {
        padding: 0 40px
    }
}

@media only screen and (max-height:785px) {
    .langBoxSetup--hideImage .langBoxSetup__title {
        padding: 0 40px
    }
}

.langBoxSetup__perex {
    font-size: 13px;
    line-height: 22px;
    margin-bottom: 8px
}

.langBoxSetup__langList {
    display: grid;
    gap: 5px;
    justify-content: center;
    overflow: auto
}

.langBoxSetup__lang {
    display: grid;
    grid-template: " flag text radio "36px/36px 1fr 20px;
    grid-column-gap: 8px;
    align-items: center;
    background-color: var(--color-combination-7);
    border-radius: 8px;
    box-sizing: border-box;
    padding: 8px 16px 8px 8px;
    width: var(--content-width)
}

.langBoxSetup__lang--noFlag {
    grid-template: " text radio "36px/1fr 20px;
    padding: 8px 16px
}

.langBoxSetup__lang:last-of-type {
    margin-bottom: 8px
}

.langBoxSetup__flagWrapper {
    align-items: center;
    background-color: #fff;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    padding: 10px 6px
}

.langBoxSetup__flag {
    background-size: 24px;
    grid-area: flag;
    height: 16px;
    width: 24px
}

.langBoxSetup__langText {
    grid-area: text
}

.langBoxSetup__langNameWrapper {
    align-items: center;
    display: flex
}

.langBoxSetup__langName {
    font-weight: 700;
    line-height: 17px
}

.langBoxSetup__langIsNewBadge {
    background-color: var(--color-primary-2);
    border-radius: 4px;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    margin-left: 6px;
    padding: 2px
}

.langBoxSetup__langCountry {
    color: var(--color-combination-5);
    font-size: 11px;
    text-transform: uppercase
}

.langBoxSetup__radio {
    grid-area: radio
}

.langBoxSetup__buttonWrapper {
    border-top: 1px solid var(--color-support-1);
    display: flex;
    flex-wrap: wrap;
    grid-area: footer;
    justify-content: center;
    padding: 16px 0
}

.langBoxSetup__button {
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-family: inherit;
    font-weight: 700;
    margin-bottom: 10px;
    outline: none;
    padding: 12px;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
    width: var(--content-width)
}

.langBoxSetup__button--confirmBtn {
    background-color: var(--color-combination-4);
    color: var(--color-combination-14)
}

.langBoxSetup__button--stayBtn {
    background: none;
    color: var(--color-combination-4);
    font-size: 14px;
    font-weight: 700;
    line-height: 16px;
    margin: 8px 0;
    padding: 0;
    text-decoration: underline;
    text-transform: none
}

.langBoxSetup__button--stayBtn:hover {
    text-decoration: none
}

.langBoxSetup__button:hover {
    opacity: .8
}

#scroll-to-top {
    align-items: flex-end;
    background: var(--color-secondary-3) url(/assets/css/scrollToTop.f159ff2.svg) no-repeat 50% 25%;
    border-radius: 8px;
    bottom: 16px;
    box-sizing: border-box;
    color: var(--color-white);
    cursor: pointer;
    font-size: 9px;
    height: 44px;
    justify-content: center;
    padding-bottom: 8px;
    position: fixed;
    right: 16px;
    width: 44px;
    z-index: var(--zIndex-scrollTo)
}

@media screen and (max-width:1047px) {
    #scroll-to-top {
        display: none !important
    }
}

@media screen and (max-width:1187px) {
    .isWide #scroll-to-top {
        display: none !important
    }
}

.tooltip {
    --color-tooltip-background: #00141e;
    background-color: var(--color-tooltip-background);
    border: 2px solid var(--color-tooltip-background);
    border-radius: 4px;
    box-shadow: 2px 2px 10px 0 rgba(0, 0, 0, .3);
    clear: both;
    color: var(--color-white);
    display: none;
    font-size: 11px;
    max-width: 400px;
    padding: 6px 0 6px 6px;
    position: absolute
}

.theme--dark .tooltip {
    --color-tooltip-background: #555e61
}

.tooltip-lt {
    background-position: -31px 0;
    height: 100%;
    left: -5px;
    top: 0;
    width: 5px
}

.revert .tooltip-lt {
    background-position: 0 0;
    left: -12px;
    width: 12px
}

.tooltip-rt {
    background-position: -435px 0;
    height: 100%;
    right: -14px;
    top: 0;
    width: 14px
}

.revert .tooltip-rt {
    background-position: right 0;
    height: 100%;
    right: -6px;
    top: 0;
    width: 6px
}

.tooltip-lb {
    background-position: -31px bottom;
    bottom: -6px;
    height: 6px;
    left: -5px;
    width: 5px
}

.revert .tooltip-lb {
    bottom: -6px;
    height: 6px;
    left: -12px;
    width: 12px
}

.tooltip-ct {
    background-position: -41px 0;
    height: 100%;
    left: 0;
    top: 0;
    width: 100%
}

.tooltip-cb {
    background-position: bottom;
    bottom: -6px;
    height: 6px;
    left: 0;
    width: 100%
}

.tooltip-rb {
    background-position: -435px bottom;
    bottom: -6px;
    height: 6px;
    right: -14px;
    width: 14px
}

.revert .tooltip-rb {
    background-position: -444px bottom;
    bottom: -6px;
    height: 6px;
    right: -6px;
    width: 6px
}

.tooltip a {
    color: var(--color-white);
    cursor: pointer;
    text-decoration: none
}

.tooltip a:hover {
    text-decoration: underline
}

.tooltip span {
    border-radius: 4px;
    color: var(--color-white);
    display: block;
    margin: 0;
    padding: 0;
    position: relative;
    white-space: normal
}

.tooltip.revert span {
    padding-right: 10px
}

.tooltip.revert-wide {
    width: auto
}

.tooltip.revert-wide span {
    padding-right: 4px
}

.tooltip div {
    background-repeat: no-repeat;
    display: none;
    position: absolute
}

.tooltip .up {
    color: green;
    text-decoration: none
}

.tooltip .down {
    color: red;
    text-decoration: none
}

.tooltip .tooltip-second-row {
    padding: 4px 0 0
}

.tooltip .tooltip-first-row__text {
    padding: 0
}

.tooltip .tooltip-first-row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    height: 16px;
    margin: 0;
    padding: 0
}

.tooltip .detail-blogos {
    float: left;
    height: 16px;
    width: 75px
}

.tooltip .tooltip-live-stream {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    padding-left: 0
}

.tooltip .tooltip-live-stream .detail-blogos {
    background: transparent url(/res/_fs/build/live_stream.2823f09.svg) no-repeat !important;
    float: right;
    height: 14px;
    margin-left: 6px;
    width: 38px
}

.theme--dark .tooltip .tooltip-live-stream .detail-blogos {
    background-image: url(/res/_fs/build/live_stream_dark.2decdc2.svg) !important
}

.tooltip .tooltip-broadcast {
    display: block;
    padding-left: 0
}

.tooltip .tooltip-logo {
    line-height: 16px;
    margin-bottom: 3px;
    padding-left: 0
}

.tooltip .tooltip-logo a:hover {
    text-decoration: underline
}

.tooltip .tooltip-logo:last-child {
    margin-bottom: 0
}

.tooltip .tooltip-logo .detail-blogos {
    margin-right: 8px
}

.tooltip.revert:after {
    left: 3px;
    right: auto
}

.tooltip:after {
    border: solid;
    border-color: #fefefe transparent;
    border-width: 0 8px 8px;
    content: none;
    left: auto;
    position: absolute;
    right: 3px;
    top: -8px
}

.tooltip.revert:before {
    left: 6px;
    right: auto
}

.tooltip:before {
    border: solid;
    border-color: var(--color-tooltip-background) transparent;
    border-width: 0 5px 5px;
    content: "";
    left: auto;
    position: absolute;
    right: 6px;
    top: -7px
}

@keyframes fadeInWindow {
    0% {
        opacity: 0
    }

    50% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

#notifications-alert-wrapper {
    display: none
}

.notificationsDialog {
    animation: fadeInWindow .6s ease-out;
    background-color: rgba(30, 36, 38, .6);
    bottom: 0;
    box-sizing: border-box;
    display: none;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: var(--zIndex-modalWindow)
}

@media only screen and (max-width:799px) {
    .notificationsDialog {
        background-color: var(--color-support-5)
    }
}

.notificationsDialog.isVisible {
    display: block
}

.notificationsDialog .notificationContainer {
    background-color: var(--color-support-5);
    border-radius: 12px;
    box-shadow: 0 2px 10px 0 rgba(0, 0, 0, .1);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    height: auto;
    left: 50%;
    max-height: calc(100vh - 260px);
    position: absolute;
    top: 120px;
    transform: translate(-50%);
    width: 480px
}

@media only screen and (max-width:799px) {
    .notificationsDialog .notificationContainer {
        border-radius: unset;
        height: 100%;
        max-height: unset;
        top: unset;
        width: 100%
    }
}

.notificationsDialog__container {
    background-color: var(--color-support-5);
    border-radius: 12px;
    padding-bottom: 12px
}

.notificationsDialog__title {
    align-items: center;
    border-bottom: 1px solid var(--color-support-1);
    box-sizing: border-box;
    display: flex;
    height: 56px;
    padding: 12px 46px 12px 12px
}

.notificationsDialog__titleHeading {
    color: var(--color-combination-2);
    font-size: 18px;
    font-weight: 700
}

.notificationsDialog__titleIcon {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23001e28' viewBox='0 0 20 20'%3E%3Cpath d='m19 0-9 9-9-9-1 1 9 9-9 9 1 1 9-9 9 9 1-1-9-9 9-9z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    cursor: pointer;
    height: 16px;
    position: absolute;
    right: 20px;
    top: 20px;
    width: 16px
}

.theme--dark .notificationsDialog__titleIcon {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 20 20'%3E%3Cpath d='m19 0-9 9-9-9-1 1 9 9-9 9 1 1 9-9 9 9 1-1-9-9 9-9z'/%3E%3C/svg%3E")
}

.notificationsDialog .notificationsSports {
    display: grid;
    margin: initial;
    overflow: initial;
    row-gap: 16px
}

.notificationsDialog__icon {
    grid-area: icon;
    height: 20px;
    place-self: center;
    width: 20px
}

.notificationsDialog__arrow {
    border-style: solid;
    border-width: 0 1px 1px 0;
    display: flex;
    grid-area: arrow;
    height: 8px;
    place-self: center;
    position: relative;
    top: -2px;
    transform: rotate(45deg);
    width: 8px
}

.notificationsDialog .sportIcon {
    display: none
}

.notificationsDialog__sportContainer {
    display: grid;
    overflow-y: auto;
    padding: 0 12px 12px;
    row-gap: 16px
}

.notificationsDialog__sport.isExpanded .notificationsDialog__options {
    display: grid
}

.notificationsDialog__sport.isExpanded .notificationsDialog__header {
    background-color: rgba(var(--color-support-2-rgb), .3);
    border-color: transparent;
    color: var(--color-combination-2)
}

.notificationsDialog__sport.isExpanded .notificationsDialog__arrow {
    top: 2px;
    transform: rotate(225deg)
}

.notificationsDialog__header {
    align-items: center;
    border: 1px solid var(--color-support-1);
    border-radius: 4px;
    box-sizing: border-box;
    color: var(--color-support-4);
    column-gap: 8px;
    display: grid;
    font-size: 13px;
    font-weight: 700;
    grid-template: " icon text arrow "auto/20px 1fr 32px;
    height: 36px;
    padding: 0 12px;
    text-transform: uppercase
}

.notificationsDialog__options {
    display: none;
    grid-auto-rows: minmax(36px, max-content);
    padding-top: 8px
}

.notificationsDialog__option {
    align-items: center;
    color: var(--color-secondary-2);
    column-gap: 10px;
    display: flex;
    justify-content: space-between;
    padding: 0 12px
}

@font-face {
    font-display: fallback;
    font-family: FS_Numbers;
    font-style: normal;
    font-weight: 400;
    src: url(/res/font/FS_Numbers.woff2) format("woff2")
}

.gameNotification {
    background-color: var(--color-combination-11);
    border: 1px solid var(--color-combination-8);
    border-radius: 8px;
    bottom: 16px;
    box-shadow: 0 2px 16px 0 rgba(0, 0, 0, .05);
    box-sizing: border-box;
    cursor: pointer;
    margin-left: 16px;
    position: fixed;
    transition: border-color .4s ease;
    z-index: var(--zIndex-myGames-notification)
}

.gameNotification:hover {
    border-color: var(--color-support-2)
}

.gameNotification__content {
    display: grid;
    grid-template: " label label    label label label label    label "28px " .     .        .     .     .     .        .     "12px " .     homeLogo .     score .     awayLogo .     "42px " .     text     text  text  text  text     .     "18px " .     .        .     .     .     .        .     "8px/16px 42px 12px 120px 12px 42px 16px
}

.gameNotification__label {
    border-bottom: 1px solid var(--color-combination-8);
    color: var(--color-secondary-2);
    font-size: 13px;
    grid-area: label;
    line-height: 16px;
    overflow: hidden;
    padding: 6px 26px;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap
}

.gameNotification__score {
    color: var(--color-combination-2);
    font-family: FS_Numbers, sans-serif;
    font-size: 26px;
    grid-area: score;
    place-self: center;
    text-align: center;
    white-space: nowrap
}

.gameNotification__score--bold {
    font-weight: 700
}

.gameNotification__change,
.gameNotification__text {
    color: var(--color-primary)
}

.gameNotification__text {
    align-self: center;
    font-size: 16px;
    font-weight: 700;
    grid-area: text;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap
}

.gameNotification__close {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 20 20'%3E%3Cpath fill='%23001e28' fill-rule='evenodd' d='M19.008 0 10 9.008.992 0 0 .99 9.009 10 0 19.01l.992.99L10 10.991 19.008 20l.992-.99L10.991 10 20 .99z'/%3E%3C/svg%3E");
    background-position: 50%;
    background-repeat: no-repeat;
    height: 26px;
    position: absolute;
    right: 0;
    top: 0;
    width: 26px
}

.theme--dark .gameNotification__close {
    filter: brightness(10) grayscale(1)
}

.gameNotification__close:hover {
    opacity: .6
}

.gameNotification__logo {
    background-color: #fff;
    background-position: 50%;
    background-repeat: no-repeat;
    border: 1px solid var(--color-support-1);
    border-radius: 8px;
    box-sizing: border-box;
    height: 100% !important;
    width: 100% !important
}

.gameNotification__homeLogo {
    grid-area: homeLogo
}

.gameNotification__awayLogo {
    grid-area: awayLogo
}

body.loading #live-table {
    position: relative
}

#preload {
    display: none
}

.loadingAnimation {
    background-color: var(--color-combination-9);
    border: 1px solid var(--color-combination-7);
    border-radius: 8px;
    display: flex;
    flex-flow: column nowrap;
    height: 105px;
    line-height: 46px;
    margin: 100px auto;
    position: sticky;
    position: -webkit-sticky;
    text-align: center;
    text-transform: uppercase;
    top: 100px;
    width: 140px
}

.loadingAnimation__text {
    color: var(--color-support-4);
    font-size: 11px;
    padding: 52px 0 0
}

.loading .loadingAnimation {
    display: flex
}

.loadingAnimation:after {
    animation: spin 1.8s ease-in-out infinite;
    border-top: 4px solid var(--color-combination-8);
    border: 4px solid var(--color-combination-8);
    border-radius: 50%;
    border-top-color: var(--color-combination-4);
    content: "";
    display: flex;
    height: 28px;
    left: calc(50% - 18px);
    position: absolute;
    top: calc(50% - 26px);
    width: 28px
}

.loadingOverlay {
    background: rgba(var(--color-support-1-rgb), .75);
    border-radius: 8px;
    bottom: 0;
    display: none;
    height: 100%;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: var(--zIndex-loading)
}

.loading .loadingOverlay {
    display: flex
}

.ranking_page .loadingOverlay {
    background: transparent
}

@keyframes spin {
    0% {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(1turn)
    }
}

.showMore {
    align-items: center;
    color: var(--color-combination-22);
    cursor: pointer;
    display: flex;
    font-size: 12px;
    font-weight: 700;
    justify-content: center;
    padding-top: 12px;
    text-decoration: underline
}

.showMore:hover {
    text-decoration: none
}

.showMore--wp {
    padding-bottom: 6px;
    padding-top: 0
}

.showMore--fsNews {
    border-top: 1px solid var(--color-support-1);
    color: var(--color-secondary-2);
    width: 100%
}

@media only screen and (max-width:639px) {
    .showMore--fsNews {
        margin-bottom: -4px
    }
}

.showMore svg {
    height: 12px;
    margin-left: 6px;
    transform: rotate(-90deg);
    width: 12px
}