/*@import url("owl.carousel.min.css");
@import url("flexslider.css");
@import url("fontawesome.css?v=1");
@import url("magnific.popup.css");
@import url("Helvetica.css?v=1");*/
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

/* Reset
-------------------------------------------------------------- */
:root {
    --toastify-color-light: #fff;
    --toastify-color-dark: #121212;
    --toastify-color-info: #3498db;
    --toastify-color-success: #07bc0c;
    --toastify-color-warning: #f1c40f;
    --toastify-color-error: #e74c3c;
    --toastify-color-transparent: hsla(0,0%,100%,.7);
    --toastify-icon-color-info: var(--toastify-color-info);
    --toastify-icon-color-success: var(--toastify-color-success);
    --toastify-icon-color-warning: var(--toastify-color-warning);
    --toastify-icon-color-error: var(--toastify-color-error);
    --toastify-toast-width: 320px;
    --toastify-toast-offset: 16px;
    --toastify-toast-top: max(var(--toastify-toast-offset),env(safe-area-inset-top));
    --toastify-toast-right: max(var(--toastify-toast-offset),env(safe-area-inset-right));
    --toastify-toast-left: max(var(--toastify-toast-offset),env(safe-area-inset-left));
    --toastify-toast-bottom: max(var(--toastify-toast-offset),env(safe-area-inset-bottom));
    --toastify-toast-background: #fff;
    --toastify-toast-min-height: 64px;
    --toastify-toast-max-height: 800px;
    --toastify-toast-bd-radius: 6px;
    --toastify-font-family: sans-serif;
    --toastify-z-index: 9999;
    --toastify-text-color-light: #757575;
    --toastify-text-color-dark: #fff;
    --toastify-text-color-info: #fff;
    --toastify-text-color-success: #fff;
    --toastify-text-color-warning: #fff;
    --toastify-text-color-error: #fff;
    --toastify-spinner-color: #616161;
    --toastify-spinner-color-empty-area: #e0e0e0;
    --toastify-color-progress-light: linear-gradient(90deg,#4cd964,#5ac8fa,#007aff,#34aadc,#5856d6,#ff2d55);
    --toastify-color-progress-dark: #bb86fc;
    --toastify-color-progress-info: var(--toastify-color-info);
    --toastify-color-progress-success: var(--toastify-color-success);
    --toastify-color-progress-warning: var(--toastify-color-warning);
    --toastify-color-progress-error: var(--toastify-color-error);
    --toastify-color-progress-bgo: 0.2
}

.Toastify__toast-container {
    z-index: var(--toastify-z-index);
    -webkit-transform: translateZ(var(--toastify-z-index));
    position: fixed;
    padding: 4px;
    width: var(--toastify-toast-width);
    box-sizing: border-box;
    color: #fff
}

.Toastify__toast-container--top-left {
    top: var(--toastify-toast-top);
    left: var(--toastify-toast-left)
}

.Toastify__toast-container--top-center {
    top: var(--toastify-toast-top);
    left: 50%;
    transform: translateX(-50%)
}

.Toastify__toast-container--top-right {
    top: var(--toastify-toast-top);
    right: var(--toastify-toast-right)
}

.Toastify__toast-container--bottom-left {
    bottom: var(--toastify-toast-bottom);
    left: var(--toastify-toast-left)
}

.Toastify__toast-container--bottom-center {
    bottom: var(--toastify-toast-bottom);
    left: 50%;
    transform: translateX(-50%)
}

.Toastify__toast-container--bottom-right {
    bottom: var(--toastify-toast-bottom);
    right: var(--toastify-toast-right)
}

@media only screen and (max-width: 480px) {
    .Toastify__toast-container {
        width:100vw;
        padding: 0;
        left: env(safe-area-inset-left);
        margin: 0
    }

    .Toastify__toast-container--top-center,.Toastify__toast-container--top-left,.Toastify__toast-container--top-right {
        top: env(safe-area-inset-top);
        transform: translateX(0)
    }

    .Toastify__toast-container--bottom-center,.Toastify__toast-container--bottom-left,.Toastify__toast-container--bottom-right {
        bottom: env(safe-area-inset-bottom);
        transform: translateX(0)
    }

    .Toastify__toast-container--rtl {
        right: env(safe-area-inset-right);
        left: auto
    }
}

.Toastify__toast {
    --y: 0;
    position: relative;
    touch-action: none;
    min-height: var(--toastify-toast-min-height);
    box-sizing: border-box;
    margin-bottom: 1rem;
    padding: 8px;
    border-radius: var(--toastify-toast-bd-radius);
    box-shadow: 0 4px 12px rgba(0,0,0,.1);
    display: flex;
    justify-content: space-between;
    max-height: var(--toastify-toast-max-height);
    font-family: var(--toastify-font-family);
    cursor: default;
    direction: ltr;
    z-index: 0;
    overflow: hidden
}

.Toastify__toast--stacked {
    position: absolute;
    width: 100%;
    transform: translate3d(0,var(--y),0) scale(var(--s));
    transition: transform .3s
}

.Toastify__toast--stacked[data-collapsed] .Toastify__close-button,.Toastify__toast--stacked[data-collapsed] .Toastify__toast-body {
    transition: opacity .1s
}

.Toastify__toast--stacked[data-collapsed=false] {
    overflow: visible
}

.Toastify__toast--stacked[data-collapsed=true]:not(:last-child)>* {
    opacity: 0
}

.Toastify__toast--stacked:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: calc(var(--g) * 1px);
    bottom: 100%
}

.Toastify__toast--stacked[data-pos=top] {
    top: 0
}

.Toastify__toast--stacked[data-pos=bot] {
    bottom: 0
}

.Toastify__toast--stacked[data-pos=bot].Toastify__toast--stacked:before {
    transform-origin: top
}

.Toastify__toast--stacked[data-pos=top].Toastify__toast--stacked:before {
    transform-origin: bottom
}

.Toastify__toast--stacked:before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    transform: scaleY(3);
    z-index: -1
}

.Toastify__toast--rtl {
    direction: rtl
}

.Toastify__toast--close-on-click {
    cursor: pointer
}

.Toastify__toast-body {
    margin: auto 0;
    flex: 1 1 auto;
    padding: 6px;
    display: flex;
    align-items: center
}

.Toastify__toast-body>div:last-child {
    word-break: break-word;
    flex: 1 1
}

.Toastify__toast-icon {
    -webkit-margin-end: 10px;
    margin-inline-end:10px;width: 20px;
    flex-shrink: 0;
    display: flex
}

.Toastify--animate {
    animation-fill-mode: both;
    animation-duration: .5s
}

.Toastify--animate-icon {
    animation-fill-mode: both;
    animation-duration: .3s
}

@media only screen and (max-width: 480px) {
    .Toastify__toast {
        margin-bottom:0;
        border-radius: 0
    }
}

.Toastify__toast-theme--dark {
    background: var(--toastify-color-dark);
    color: var(--toastify-text-color-dark)
}

.Toastify__toast-theme--colored.Toastify__toast--default,.Toastify__toast-theme--light {
    background: var(--toastify-color-light);
    color: var(--toastify-text-color-light)
}

.Toastify__toast-theme--colored.Toastify__toast--info {
    color: var(--toastify-text-color-info);
    background: var(--toastify-color-info)
}

.Toastify__toast-theme--colored.Toastify__toast--success {
    color: var(--toastify-text-color-success);
    background: var(--toastify-color-success)
}

.Toastify__toast-theme--colored.Toastify__toast--warning {
    color: var(--toastify-text-color-warning);
    background: var(--toastify-color-warning)
}

.Toastify__toast-theme--colored.Toastify__toast--error {
    color: var(--toastify-text-color-error);
    background: var(--toastify-color-error)
}

.Toastify__progress-bar-theme--light {
    background: var(--toastify-color-progress-light)
}

.Toastify__progress-bar-theme--dark {
    background: var(--toastify-color-progress-dark)
}

.Toastify__progress-bar--info {
    background: var(--toastify-color-progress-info)
}

.Toastify__progress-bar--success {
    background: var(--toastify-color-progress-success)
}

.Toastify__progress-bar--warning {
    background: var(--toastify-color-progress-warning)
}

.Toastify__progress-bar--error {
    background: var(--toastify-color-progress-error)
}

.Toastify__progress-bar-theme--colored.Toastify__progress-bar--error,.Toastify__progress-bar-theme--colored.Toastify__progress-bar--info,.Toastify__progress-bar-theme--colored.Toastify__progress-bar--success,.Toastify__progress-bar-theme--colored.Toastify__progress-bar--warning {
    background: var(--toastify-color-transparent)
}

.Toastify__close-button {
    color: #fff;
    background: transparent;
    outline: none;
    border: none;
    padding: 0;
    cursor: pointer;
    opacity: .7;
    transition: .3s ease;
    align-self: flex-start;
    z-index: 1
}

.Toastify__close-button--light {
    color: #000;
    opacity: .3
}

.Toastify__close-button>svg {
    fill: currentColor;
    height: 16px;
    width: 14px
}

.Toastify__close-button:focus,.Toastify__close-button:hover {
    opacity: 1
}

@keyframes Toastify__trackProgress {
    0% {
        transform: scaleX(1)
    }

    to {
        transform: scaleX(0)
    }
}

.Toastify__progress-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: var(--toastify-z-index);
    opacity: .7;
    transform-origin: left;
    border-bottom-left-radius: var(--toastify-toast-bd-radius)
}

.Toastify__progress-bar--animated {
    animation: Toastify__trackProgress linear 1 forwards
}

.Toastify__progress-bar--controlled {
    transition: transform .2s
}

.Toastify__progress-bar--rtl {
    right: 0;
    left: auto;
    transform-origin: right;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: var(--toastify-toast-bd-radius)
}

.Toastify__progress-bar--wrp {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 5px;
    border-bottom-left-radius: var(--toastify-toast-bd-radius)
}

.Toastify__progress-bar--wrp[data-hidden=true] {
    opacity: 0
}

.Toastify__progress-bar--bg {
    opacity: var(--toastify-color-progress-bgo);
    width: 100%;
    height: 100%
}

.Toastify__spinner {
    width: 20px;
    height: 20px;
    box-sizing: border-box;
    border: 2px solid;
    border-radius: 100%;
    border-color: var(--toastify-spinner-color-empty-area);
    border-right-color: var(--toastify-spinner-color);
    animation: Toastify__spin .65s linear infinite
}

@keyframes Toastify__bounceInRight {
    0%,60%,75%,90%,to {
        animation-timing-function: cubic-bezier(.215,.61,.355,1)
    }

    0% {
        opacity: 0;
        transform: translate3d(3000px,0,0)
    }

    60% {
        opacity: 1;
        transform: translate3d(-25px,0,0)
    }

    75% {
        transform: translate3d(10px,0,0)
    }

    90% {
        transform: translate3d(-5px,0,0)
    }

    to {
        transform: none
    }
}

@keyframes Toastify__bounceOutRight {
    20% {
        opacity: 1;
        transform: translate3d(-20px,var(--y),0)
    }

    to {
        opacity: 0;
        transform: translate3d(2000px,var(--y),0)
    }
}

@keyframes Toastify__bounceInLeft {
    0%,60%,75%,90%,to {
        animation-timing-function: cubic-bezier(.215,.61,.355,1)
    }

    0% {
        opacity: 0;
        transform: translate3d(-3000px,0,0)
    }

    60% {
        opacity: 1;
        transform: translate3d(25px,0,0)
    }

    75% {
        transform: translate3d(-10px,0,0)
    }

    90% {
        transform: translate3d(5px,0,0)
    }

    to {
        transform: none
    }
}

@keyframes Toastify__bounceOutLeft {
    20% {
        opacity: 1;
        transform: translate3d(20px,var(--y),0)
    }

    to {
        opacity: 0;
        transform: translate3d(-2000px,var(--y),0)
    }
}

@keyframes Toastify__bounceInUp {
    0%,60%,75%,90%,to {
        animation-timing-function: cubic-bezier(.215,.61,.355,1)
    }

    0% {
        opacity: 0;
        transform: translate3d(0,3000px,0)
    }

    60% {
        opacity: 1;
        transform: translate3d(0,-20px,0)
    }

    75% {
        transform: translate3d(0,10px,0)
    }

    90% {
        transform: translate3d(0,-5px,0)
    }

    to {
        transform: translateZ(0)
    }
}

@keyframes Toastify__bounceOutUp {
    20% {
        transform: translate3d(0,calc(var(--y) - 10px),0)
    }

    40%,45% {
        opacity: 1;
        transform: translate3d(0,calc(var(--y) + 20px),0)
    }

    to {
        opacity: 0;
        transform: translate3d(0,-2000px,0)
    }
}

@keyframes Toastify__bounceInDown {
    0%,60%,75%,90%,to {
        animation-timing-function: cubic-bezier(.215,.61,.355,1)
    }

    0% {
        opacity: 0;
        transform: translate3d(0,-3000px,0)
    }

    60% {
        opacity: 1;
        transform: translate3d(0,25px,0)
    }

    75% {
        transform: translate3d(0,-10px,0)
    }

    90% {
        transform: translate3d(0,5px,0)
    }

    to {
        transform: none
    }
}

@keyframes Toastify__bounceOutDown {
    20% {
        transform: translate3d(0,calc(var(--y) - 10px),0)
    }

    40%,45% {
        opacity: 1;
        transform: translate3d(0,calc(var(--y) + 20px),0)
    }

    to {
        opacity: 0;
        transform: translate3d(0,2000px,0)
    }
}

.Toastify__bounce-enter--bottom-left,.Toastify__bounce-enter--top-left {
    animation-name: Toastify__bounceInLeft
}

.Toastify__bounce-enter--bottom-right,.Toastify__bounce-enter--top-right {
    animation-name: Toastify__bounceInRight
}

.Toastify__bounce-enter--top-center {
    animation-name: Toastify__bounceInDown
}

.Toastify__bounce-enter--bottom-center {
    animation-name: Toastify__bounceInUp
}

.Toastify__bounce-exit--bottom-left,.Toastify__bounce-exit--top-left {
    animation-name: Toastify__bounceOutLeft
}

.Toastify__bounce-exit--bottom-right,.Toastify__bounce-exit--top-right {
    animation-name: Toastify__bounceOutRight
}

.Toastify__bounce-exit--top-center {
    animation-name: Toastify__bounceOutUp
}

.Toastify__bounce-exit--bottom-center {
    animation-name: Toastify__bounceOutDown
}

@keyframes Toastify__zoomIn {
    0% {
        opacity: 0;
        transform: scale3d(.3,.3,.3)
    }

    50% {
        opacity: 1
    }
}

@keyframes Toastify__zoomOut {
    0% {
        opacity: 1
    }

    50% {
        opacity: 0;
        transform: translate3d(0,var(--y),0) scale3d(.3,.3,.3)
    }

    to {
        opacity: 0
    }
}

.Toastify__zoom-enter {
    animation-name: Toastify__zoomIn
}

.Toastify__zoom-exit {
    animation-name: Toastify__zoomOut
}

@keyframes Toastify__flipIn {
    0% {
        transform: perspective(400px) rotateX(90deg);
        animation-timing-function: ease-in;
        opacity: 0
    }

    40% {
        transform: perspective(400px) rotateX(-20deg);
        animation-timing-function: ease-in
    }

    60% {
        transform: perspective(400px) rotateX(10deg);
        opacity: 1
    }

    80% {
        transform: perspective(400px) rotateX(-5deg)
    }

    to {
        transform: perspective(400px)
    }
}

@keyframes Toastify__flipOut {
    0% {
        transform: translate3d(0,var(--y),0) perspective(400px)
    }

    30% {
        transform: translate3d(0,var(--y),0) perspective(400px) rotateX(-20deg);
        opacity: 1
    }

    to {
        transform: translate3d(0,var(--y),0) perspective(400px) rotateX(90deg);
        opacity: 0
    }
}

.Toastify__flip-enter {
    animation-name: Toastify__flipIn
}

.Toastify__flip-exit {
    animation-name: Toastify__flipOut
}

@keyframes Toastify__slideInRight {
    0% {
        transform: translate3d(110%,0,0);
        visibility: visible
    }

    to {
        transform: translate3d(0,var(--y),0)
    }
}

@keyframes Toastify__slideInLeft {
    0% {
        transform: translate3d(-110%,0,0);
        visibility: visible
    }

    to {
        transform: translate3d(0,var(--y),0)
    }
}

@keyframes Toastify__slideInUp {
    0% {
        transform: translate3d(0,110%,0);
        visibility: visible
    }

    to {
        transform: translate3d(0,var(--y),0)
    }
}

@keyframes Toastify__slideInDown {
    0% {
        transform: translate3d(0,-110%,0);
        visibility: visible
    }

    to {
        transform: translate3d(0,var(--y),0)
    }
}

@keyframes Toastify__slideOutRight {
    0% {
        transform: translate3d(0,var(--y),0)
    }

    to {
        visibility: hidden;
        transform: translate3d(110%,var(--y),0)
    }
}

@keyframes Toastify__slideOutLeft {
    0% {
        transform: translate3d(0,var(--y),0)
    }

    to {
        visibility: hidden;
        transform: translate3d(-110%,var(--y),0)
    }
}

@keyframes Toastify__slideOutDown {
    0% {
        transform: translate3d(0,var(--y),0)
    }

    to {
        visibility: hidden;
        transform: translate3d(0,500px,0)
    }
}

@keyframes Toastify__slideOutUp {
    0% {
        transform: translate3d(0,var(--y),0)
    }

    to {
        visibility: hidden;
        transform: translate3d(0,-500px,0)
    }
}

.Toastify__slide-enter--bottom-left,.Toastify__slide-enter--top-left {
    animation-name: Toastify__slideInLeft
}

.Toastify__slide-enter--bottom-right,.Toastify__slide-enter--top-right {
    animation-name: Toastify__slideInRight
}

.Toastify__slide-enter--top-center {
    animation-name: Toastify__slideInDown
}

.Toastify__slide-enter--bottom-center {
    animation-name: Toastify__slideInUp
}

.Toastify__slide-exit--bottom-left,.Toastify__slide-exit--top-left {
    animation-name: Toastify__slideOutLeft;
    animation-timing-function: ease-in;
    animation-duration: .3s
}

.Toastify__slide-exit--bottom-right,.Toastify__slide-exit--top-right {
    animation-name: Toastify__slideOutRight;
    animation-timing-function: ease-in;
    animation-duration: .3s
}

.Toastify__slide-exit--top-center {
    animation-name: Toastify__slideOutUp;
    animation-timing-function: ease-in;
    animation-duration: .3s
}

.Toastify__slide-exit--bottom-center {
    animation-name: Toastify__slideOutDown;
    animation-timing-function: ease-in;
    animation-duration: .3s
}

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

    to {
        transform: rotate(1turn)
    }
}

:root {
    --bg-color: #05183d;
    --text-base: #eee;
    --prx: #ffffff40;
    --line-split: #192042;
    --border-color: #151c2d;
    --border-color-high: #4e5d80;
    --border-white: #fff;
    --primary-color: #71ff53;
    --primary-color-hover: #ffc66e;
    --primary-button-text: #000;
    --primary-text: #68ff57;
    --secondary-bg: #141a2a;
    --dropdown-bg: #fff;
    --navbar-bg: #163674;
    --header-bg: #2b3348;
    --border-line: #151c2d;
    --card-header: #151c2d;
    --league-header: #474e62;
    --footer-bg: #0b101e;
    --red-color: #fd2b15;
    --yellow-color: #ffd234;
    --modal-blur: #1c253cd9;
    --color-home: #ff6691;
    --color-away: #3ebbf9;
    --row-bg: #fff;
    --row-bg-hover: #fff;
    --chat-bg: #141a2a;
    --bg-odds: #14233f;
    --border-odds: #ffffff10
}

body,html {
    background-color: var(--bg-color);
    position: relative
}

body {
    font-family: 'Inter', sans-serif;
    color: var(--text-base);
    font-size: 13px;
    line-height: 1.6;
    font-weight: 400;
    padding: 0;
    margin: 0;
    -webkit-text-size-adjust: none
}

a {
    cursor: pointer;
    color: #fff;
    text-decoration: none!important
}

a:hover {
    color: var(--primary-text)
}

.btn {
    font-weight: 500;
    font-size: 1.1em;
    padding: .7rem 1.2rem;
    border-radius: .4rem;
    border: none;
    opacity: .95;
    color: #fff;
    white-space: nowrap
}

.btn:hover,button:hover {
    color: #fff;
    opacity: 1
}

.btn-outline {
    border: 1px solid #ffffff80
}

.btn-outline-light {
    border: 1px solid hsla(0,0%,100%,.7);
    background-color: transparent!important;
    color: #fff!important
}

.btn-outline:focus,.btn-outline:hover {
    border: 1px solid #fff
}

.btn-light {
    color: #000!important;
    background-color: #fff!important
}

.btn-live {
    background-color: #e74040!important;
    color: #fff!important;
    box-shadow: 0 4px 10px 0 #6d151536!important;
    border: 1px solid #cf3f3f!important
}

.btn-wait {
    border: 1px solid #00000030!important;
    background-color: #fff!important;
    box-shadow: 0 3px 3px 0 #00000010!important
}

.btn-bet,.btn-wait {
    color: #000!important
}

.btn-bet {
    background-color: #ffdd75;
    background-image: linear-gradient(0deg,#ffdd75,#ffe7ac);
    box-shadow: 0 4px 10px 0 rgba(97,81,37,.21)!important;
    border: 1px solid #cfaf51!important
}

.btn-rounded {
    border-radius: 2rem
}

.btn-zero:focus,.btn:focus {
    box-shadow: 0 0 0 2px hsla(0,0%,100%,.09)
}

.btn-primary {
    background-color: var(--primary-color)!important;
    color: var(--primary-button-text)!important
}

.btn-primary:focus {
    box-shadow: 0 0 0 3px hsla(0,0%,100%,.1)
}

.btn-secondary {
    background-color: var(--secondary-bg)!important;
    color: #fff
}

.btn-secondary:focus {
    box-shadow: 0 0 0 3px hsla(0,0%,100%,.1)
}

.btn {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.btn-xs {
    font-size: 12px;
    line-height: 1.2;
    padding: .2rem .4rem;
    border-radius: .2rem
}

.btn-sm {
    font-size: 13px;
    padding: .4rem .8rem
}

.btn-lg {
    font-size: 16px;
    padding: .8rem 1.6rem
}

.btn-circle {
    padding: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%
}

.btn-circle.btn-sm {
    width: 32px;
    height: 32px
}

.btn-circle.btn-xs {
    width: 21px;
    height: 21px
}

.btn-circle.btn-lg {
    width: 50px;
    height: 50px
}

.badge {
    font-weight: 400!important
}

.heading-xl {
    font-size: 20px;
    font-weight: 600
}

.heading-md,.heading-xl {
    line-height: 1.5;
    margin-bottom: 1rem;
    color: #fff
}

.heading-md {
    font-size: 16px;
    font-weight: 500
}

.heading-sm {
    font-size: 14px
}

.heading-sm,.heading-xs {
    font-weight: 500;
    line-height: 1.5;
    margin-bottom: .5rem;
    color: #fff
}

.heading-xs {
    font-size: 12px
}

.o-style {
    list-style: none
}

.direct-column {
    flex-direction: column
}

.rounded {
    border-radius: .75rem!important
}

.gap-md {
    gap: 1rem!important
}

.gap-sm {
    gap: .5rem!important
}

.gap-xs {
    gap: .25rem!important
}

.x-lg,.x-md,.x-sm,.x-xl,.x-xs {
    flex-shrink: 0;
    text-align: center
}

.x-xs {
    width: 30px
}

.x-sm {
    width: 50px
}

.x-md {
    width: 70px
}

.x-lg {
    width: 100px
}

.x-xl {
    width: 120px
}

.small-text {
    font-size: .9em!important
}

.text-base {
    color: var(--text-base)!important
}

.name-short {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: normal!important
}

.lim-1 {
    -webkit-line-clamp: 1
}

.lim-3 {
    -webkit-line-clamp: 3
}

.row-reflect {
    flex-direction: row-reverse
}

.zform-control {
    background-color: transparent!important;
    font-size: 1em;
    font-weight: 400;
    color: #fff!important;
    border: 1px solid var(--prx);
    border-radius: 8px;
    height: 42px;
    box-shadow: none!important;
    padding: .75rem 1rem
}

.zform-control:disabled {
    background-color: hsla(0,0%,100%,.05)!important;
    color: var(--text-base)!important
}

.zform-control::placeholder {
    color: #ffffff70
}

.zform-control:focus {
    border-color: var(--border-white)!important
}

.zform .btn-password {
    font-size: 12px;
    padding: .6rem 1rem;
    border-radius: .4rem;
    background-color: var(--navbar-bg);
    display: inline-block
}

.btn .flex-in,.btn-flex,.card-match,.card-match .cm-wrap,.item-flex {
    display: flex;
    align-items: center;
    gap: 1rem
}

.item-flex {
    gap: .5rem
}

.bi-arrow {
    width: 14px;
    height: 14px;
    background-image: url(/images/arrow-down.svg);
    background-repeat: no-repeat;
    background-size: cover
}

.bi-arrow.bi-arrow-right {
    transform: rotate(-90deg)
}

.bi-arrow.bi-arrow-left {
    transform: rotate(90deg)
}

.bi-arrow.bi-arrow-up {
    transform: rotate(180deg)
}

b,strong {
    font-weight: 500
}

.badge-live {
    font-size: .8em;
    line-height: 1;
    padding: .2rem;
    border: 1px solid #fff;
    border-radius: 4px
}

h1,h2,h3,h4,h5,h6 {
    font-weight: 500
}

small {
    font-size: 11px
}

.base-icon {
    width: 16px;
    height: 16px;
    font-size: 0;
    flex-shrink: 0;
    display: inline-block
}

.base-icon img,.base-icon svg {
    width: 100%;
    height: 100%;
    object-fit: contain
}

.base-icon.icon-16 {
    width: 16px!important;
    height: 16px!important
}

.base-icon.icon-20 {
    width: 20px;
    height: 20px
}

.base-icon.icon-14 {
    width: 14px;
    height: 14px
}

.base-icon.icon-24 {
    width: 24px!important;
    height: 24px!important
}

.base-icon.icon-30 {
    width: 30px!important;
    height: 30px!important
}

.base-icon.icon-40 {
    width: 40px!important;
    height: 40px!important
}

.base-icon.icon-50 {
    width: 50px!important;
    height: 50px!important
}

.highlight-text,.text-primary {
    color: var(--primary-text)!important
}

.modal-blur {
    background-color: var(--modal-blur);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px)
}

.base-dropdown {
    background-color: #fff;
    color: #111;
    border: none!important;
    border-radius: .5rem;
    font-size: 1em;
    padding: .6rem;
    margin: .25rem 0!important;
    box-shadow: none!important;
    min-width: 120px;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px)
}

.base-dropdown li+li {
    margin-top: .3rem
}

.base-dropdown .dropdown-item {
    color: #111;
    padding: .4rem .8rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    border-radius: .3rem
}

.base-dropdown .dropdown-item:focus,.base-dropdown .dropdown-item:hover {
    background-color: #00000010;
    color: #111
}

.base-dropdown .dropdown-item.active {
    background-color: #26b440!important;
    color: #fff!important
}

.base-dropdown .dropdown-item .name {
    max-width: 12rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.base-dropdown .dropdown-divider {
    border-color: var(--border-color);
    margin: 1rem 0
}

.hr-line {
    display: block;
    width: 100%;
    height: 1px;
    background-color: var(--border-color-high)
}

.card-player,.card-team {
    display: flex;
    align-items: center;
    gap: 1em
}

.card-team .base-icon {
    width: 20px;
    height: 20px
}

.card-player span,.card-team span {
    font-size: 1em;
    flex-grow: 1;
    text-align: left;
    font-weight: 400
}

.avatar,.mg-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    flex-shrink: 0
}

.avatar img,.mg-avatar img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    object-fit: cover
}

#app {
    position: relative
}

.container {
    max-width: 1290px;
    width: 100%
}

header {
    height: 120px;
    z-index: 9;
    margin-bottom: 1rem
}

header,header .header-elements {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between
}

header .header-elements {
    padding: 0;
    gap: 1rem
}

header.header-home {
    position: absolute;
    top: 0;
    left: 0;
    right: 0
}

#logo {
    display: block;
    flex-shrink: 0;
    flex-grow: 1
}

#logo img {
    height: 60px;
    width: auto
}

#open-leagues {
    display: none
}

header .header-elements .for-user .btn {
    display: flex;
    align-items: center;
    justify-content: center
}

#klayout {
    display: flex;
    flex-direction: column;
    gap: 2em
}

#klayout #main {
    max-width: 900px;
    width: 100%;
    margin: 0 auto;
    padding: 0 15px;
    position: relative
}

#body-mask {
    display: none
}

#body-mask .close-mask {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    position: fixed;
    top: 2rem;
    right: 2rem;
    cursor: pointer
}

#wrapper {
    min-height: calc(100vh - 180px);
    padding-bottom: 100px
}

.row-flex,.z-tabs {
    justify-content: space-between;
    gap: .5rem
}

.row-flex,.z-tab,.z-tabs {
    display: flex;
    align-items: center
}

.z-tab {
    padding: .5rem 1rem;
    min-width: 60px;
    height: 36px;
    border-radius: 5px;
    font-size: 1em;
    color: #fff;
    font-weight: 500;
    white-space: nowrap;
    justify-content: center;
    cursor: pointer
}

.small-tabs .z-tab {
    min-width: 50px;
    height: 32px;
    font-size: .9em;
    border-radius: .4rem
}

.z-tab span {
    display: inline-block;
    padding: 4px 6px;
    line-height: 1;
    background-color: #ed2915;
    color: #fff;
    border-radius: 20px;
    margin-left: 6px
}

.z-tab:hover {
    color: var(--primary-text)
}

.z-tab.active {
    background-color: var(--primary-color);
    color: var(--primary-button-text)!important
}

.card-league .cl-header {
    background-color: var(--card-header);
    padding: .2rem 1rem;
    border-radius: .6rem;
    position: relative;
    margin-bottom: .5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: 52px
}

.card-league .display-bet {
    display: flex;
    align-items: center;
    color: var(--prx);
    gap: 10px;
    flex-shrink: 0;
    display: none!important
}

.card-league .display-bet>div {
    width: 30px;
    text-align: center;
    flex-shrink: 0
}

.card-league .cl-matches {
    border-radius: 0
}

.button-fav {
    padding: 6px 10px;
    font-size: 16px;
    color: var(--header-bg);
    cursor: pointer
}

.button-fav.active,.button-fav:hover {
    color: var(--primary-text)
}

.button-fav.active svg path {
    fill: var(--primary-color);
    stroke: none
}

.status-match {
    font-size: 11px;
    line-height: 1;
    text-transform: uppercase;
    color: var(--text-base);
    display: inline-block
}

.status-match.is-live {
    color: var(--red-color);
    width: 68px;
    font-size: 10px;
    font-weight: 500;
    position: relative;
    text-align: left!important
}

.status-match.is-live span {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: var(--red-color);
    position: absolute;
    top: 50%;
    margin-top: -2px;
    right: 3px;
    animation: live 1s linear infinite
}

@keyframes live {
    0% {
        opacity: 1
    }

    50% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.flash {
    animation: flash 1s linear infinite
}

@keyframes flash {
    0% {
        transform: scale(1)
    }

    50% {
        transform: scale(1.025)
    }

    to {
        transform: scale(1)
    }
}

.card-match {
    gap: 0;
    align-items: stretch;
    position: relative;
    background-color: var(--row-bg);
    color: #000;
    border-radius: .75rem;
    min-height: 100px
}

.card-match .cm-wrap {
    flex-grow: 1;
    padding: 1.2rem;
    gap: 0;
    position: relative
}

.card-match .cm-wrap .status-match.is-live {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%)
}

.card-match .cm-blv {
    position: relative;
    z-index: 1;
    padding: .5rem;
    width: 110px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: .6rem;
    border-radius: .75rem 0 0 .75rem;
    overflow: hidden;
    justify-content: center;
    align-items: center;
    background-color: #00000070
}

.card-match .cm-blv div {
    position: relative;
    z-index: 3
}

.card-match .cm-blv .room-id {
    position: absolute!important;
    font-size: 11px;
    line-height: 1;
    bottom: 0;
    padding: .6rem;
    width: 100%;
    background-color: #fff;
    color: #000;
    text-align: center
}

.card-match .cm-blv .room-id .item-flex {
    justify-content: center
}

.card-match .cm-blv .loaderx,.card-match .cm-blv .loadery {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    margin-top: -20px;
    z-index: 2;
    opacity: .15;
    filter: invert(1)
}

.card-match .cm-blv .loadery {
    margin-top: -35px;
    left: 50%;
    transform: translateX(-50%);
    opacity: 1;
    filter: invert(0)!important
}

.card-match .cm-blv .backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1
}

.card-match .cm-blv .backdrop img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: blur(20px);
    opacity: .75;
    transform: scale(1.2)
}

.card-match .cm-blv .avatar {
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 2px solid #fff;
    overflow: hidden;
    position: relative
}

.card-match .cm-blv .blv-name {
    font-size: 11px;
    color: #fff;
    font-weight: 500;
    text-align: center
}

.card-single .card-match .cm-blv .blv-name {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 120px
}

.card-match+.card-match {
    margin-top: 1rem
}

.card-match:hover {
    background-color: var(--row-bg-hover)
}

.card-match .button-fav {
    position: relative;
    z-index: 3
}

.card-match .match-buttons,.card-match .match-time {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    width: 110px;
    flex-shrink: 0
}

.card-match .match-time {
    padding-left: .25rem
}

.card-match .match-time .time {
    font-size: 1.5em;
    font-weight: 600;
    line-height: 1
}

.card-match .match-time .date {
    font-size: 11px;
    margin-top: -.5rem
}

.card-match .match-time .league {
    font-size: 11px;
    line-height: 1.4
}

.card-match .match-buttons {
    padding-left: 10px;
    position: relative;
    z-index: 4;
    min-height: 32px
}

.card-match .match-buttons .btn-end {
    background-color: transparent!important;
    color: #00000050!important
}

.card-match .match-buttons .btn-light {
    background-color: #545f62!important;
    color: #fff!important
}

.card-match .match-time .cancel {
    font-size: 10px
}

.card-match .match-link {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2
}

.card-match .link-avail {
    display: flex;
    align-items: center;
    gap: .4rem
}

.card-match .link-avail .base-icon {
    color: var(--primary-color);
    width: 16px;
    height: 16px
}

.card-match .team-vs {
    display: flex;
    align-items: center;
    flex-grow: 1;
    justify-content: space-between;
    gap: .75rem;
    padding: .5rem 1.5rem
}

.card-match .team-vs .card-team {
    width: calc(50% - 30px - .75rem);
    flex-shrink: 0
}

.card-match .team-vs .card-team span {
    line-height: 1.4;
    font-size: 1em;
    text-align: center
}

.card-match .team-vs .card-team .base-icon {
    width: 40px;
    height: 40px
}

.card-match .team-vs .card-team .red-card {
    background-color: var(--red-color);
    color: #fff;
    font-size: 11px;
    width: 12px;
    height: 15px;
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center
}

.card-match .team-vs .team-away {
    flex-direction: row-reverse
}

.card-match .team-vs .team-away .red-card {
    margin-left: -.5rem
}

.card-match .team-vs .team-home .red-card {
    margin-right: -.5rem
}

.card-match .team-vs .current {
    width: 60px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .3rem
}

.card-match .team-vs .current .time {
    font-weight: 500;
    font-size: 1em;
    letter-spacing: .5px
}

.card-match .team-vs .current .score {
    display: flex;
    width: 100%;
    gap: 1rem;
    padding: .2rem .6rem;
    border-radius: .5rem;
    border: 1px solid #00000030;
    background-color: #fff;
    box-shadow: 0 3px 3px 0 #00000010;
    justify-content: center
}

.card-match.live-match .team-vs .current .score {
    border: 2px solid #e74040!important
}

.card-match .team-vs .current .score span {
    font-weight: 600;
    font-size: 15px;
    padding: 0;
    color: #000
}

.card-match .team-vs .current .score span.win {
    color: #e74040
}

.card-match .team-vs .current .pen {
    font-size: 11px
}

.card-match .team-vs .current .pen strong {
    color: #e74040
}

.card-match.live-match .time {
    animation: time-count 1s linear infinite
}

@keyframes time-count {
    0% {
        opacity: 1
    }

    50% {
        opacity: .3
    }

    to {
        opacity: 1
    }
}

.card-match .cm-blv.duo {
    gap: 0
}

.card-match .cm-blv.duo .avatar-duo {
    display: flex;
    align-items: center;
    padding: 1rem 0 .6rem
}

.card-match .cm-blv.duo .avatar-duo .avatar {
    flex-shrink: 0;
    width: 36px;
    height: 36px
}

.card-match .cm-blv.duo .avatar-duo .avatar+.avatar {
    margin-left: -.5rem
}

.card-match .cm-blv.duo .blv-name {
    font-size: 10px;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
    text-align: center
}

.card-match .cm-blv.duo .blv-name-duo {
    width: 100%
}

.card-match .team-vs .card-team.event {
    width: 100%;
    justify-content: center
}

.card-match .team-vs .card-team.event .base-icon {
    width: 60px;
    height: 60px;
    padding: 10px;
    border-radius: .75rem;
    background-color: #fff;
    border: 1px solid #00000030!important;
    box-shadow: 0 3px 3px 0 #00000010!important
}

.card-match .team-vs .card-team.event span {
    text-align: left;
    font-weight: 500;
    flex-grow: unset
}

.zbtn-xs {
    padding: .3rem .5rem;
    height: 28px;
    font-size: 11px
}

.card-match.group .cm-blv:before {
    display: none
}

.card-match.group .cm-blv .blv-name {
    line-height: 1.3;
    font-size: 12px;
    text-align: center;
    color: #000
}

.card-match.group .cm-blv.multiroom {
    background-color: #fff;
    overflow: visible
}

.card-match.group .cm-blv.multiroom .loaderx {
    filter: invert(0)!important
}

.card-match .cm-blv.multiroom .avatar {
    width: 84px;
    border-radius: 40px;
    box-shadow: 0 3px 3px 0 #00000020!important;
    background-color: #fff
}

.card-match.modal-match {
    margin-bottom: 1rem;
    background-image: url(/images/modal-match.jpg);
    background-size: cover;
    background-position: bottom;
    padding-bottom: 1rem
}

.card-match.modal-match .cm-wrap {
    flex-direction: column
}

.card-match.modal-match.live-match .match-time {
    padding: 1rem 0;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    text-align: left
}

.card-match.modal-match .match-time {
    padding: .5rem 0 1rem;
    flex-direction: column;
    max-width: 240px;
    width: 100%;
    margin: 0 auto;
    text-align: center
}

.card-match.modal-match .match-time .time {
    font-size: 1.2em
}

.zmodal-room .modal-dialog {
    width: 100%;
    max-width: 600px;
    margin: 0 auto!important
}

.zmodal-room .modal-dialog .modal-content {
    border-radius: 1rem;
    background-color: transparent;
    border: none
}

.zmodal-room .modal-dialog .modal-body {
    padding: 2rem
}

.room-list {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    width: 100%
}

.room-list .item {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem;
    background-color: #fff;
    align-items: center;
    color: #000;
    border-radius: .75rem
}

.room-list .item:hover {
    background-color: #f6f6f6
}

.room-list .item .room-id {
    white-space: nowrap;
    flex-shrink: 0;
    padding: .4rem .7rem;
    border-radius: 2rem;
    font-size: .9em;
    font-weight: 500;
    color: #fff;
    background-color: #1c5fe0
}

.room-list .item .team-icon {
    padding: .3rem;
    border-radius: .75rem;
    border: 1px solid #ccc;
    display: none
}

.room-list .item .team-icon .base-icon {
    width: 30px;
    height: 30px
}

.room-list .item .blv-group {
    display: flex;
    align-items: center;
    gap: .2rem
}

.room-list .item .blv-group .line-avatar {
    display: flex;
    align-items: center;
    justify-content: center
}

.room-list .item .blv-group .line-avatar .avatar+.avatar {
    margin-left: -.5rem
}

.room-list .item .blv-group .avatar {
    width: 36px;
    height: 36px;
    border: 3px solid #fff
}

.room-list .item .blv-group .name {
    font-size: 10px;
    white-space: nowrap;
    line-height: 1.3;
    font-weight: 500
}

.room-list .item .room-name {
    flex-grow: 1;
    font-size: 1em;
    font-weight: 500
}

.room-list .item .btn {
    border: 1px solid #fff;
    box-shadow: 0 3px 3px 0 #00000010
}

.tooltip {
    font-size: 12px
}

footer {
    background-color: #000
}

.footer-elements {
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0;
    gap: 3rem
}

.footer-elements .s-logo {
    display: block
}

.footer-elements .s-logo img {
    height: 50px;
    width: auto
}

.footer-elements .f-left {
    display: flex;
    flex-direction: column;
    gap: 1.2rem
}

.footer-elements .footer-menu {
    flex-wrap: wrap;
    gap: 2rem
}

.footer-elements .footer-menu a {
    color: #ffffff80;
    white-space: nowrap
}

.footer-elements .footer-menu a:hover {
    color: #fff
}

.footer-elements .f-right {
    text-align: right
}

.footer-elements .f-right .f-links span {
    margin: 0 .3rem
}
#scroll-top {
    position: fixed !important;
    right: 20px;
    bottom: -50px;
    width: 40px;
    height: 40px;
    padding: 0;
    background-color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 5px 0 #0005;
    font-size: 16px;
    color: #000;
    z-index: 2222;
    cursor: pointer;
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
}

#scroll-top:hover {
    background-color: var(--primary-color);
}

#scroll-top.show {
    bottom: 20px;
    filter: alpha(opacity=100);
    opacity: 1;
    visibility: visible;
}
.line-tabs {
    padding: 0
}

.line-tabs .nav-link {
    padding: .6rem;
    color: #fff;
    font-weight: 400!important
}

.line-tabs .nav-link.active,.line-tabs .nav-link:hover {
    color: #fff
}

.line-tabs .nav-link:focus,.line-tabs .nav-link:hover {
    border-color: #fff
}

.line-tabs .nav-link.active {
    border-color: var(--primary-color)
}

.nav-pills {
    padding: 0;
    gap: .5rem
}

.nav-pills .nav-item .nav-link {
    color: #fff
}

.nav-pills .nav-item .nav-link.active {
    background-color: var(--primary-color);
    color: var(--primary-button-text)!important
}

.nav-pills .nav-item .nav-link:hover {
    color: var(--primary-text)
}

.zbread {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 1.5rem
}

.zbread .breadcrumb {
    margin-bottom: 0;
    background: transparent;
    padding: 0;
}

.zbread .bread-item+.bread-item:before {
    content: "/";
    margin: 0 .5rem;
    opacity: .5
}

.zpagination {
    margin: 2rem 0
}

.zpagination .pagination {
    padding: 0;
    gap: .5rem
}

.zpagination .pagination .page-link {
    background-color: transparent;
    border: none
}

.zpagination .pagination .page-item {
    margin: 0
}

.zpagination .pagination .page-item .page-link {
    font-size: 1.2em;
    font-weight: 500;
    border-radius: .5rem;
    color: var(--text-base);
    padding: 0 .4rem;
    min-width: 32px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    background-color: var(--line-split)
}

.zpagination .pagination .page-item .page-link:hover {
    color: #fff
}

.zpagination .pagination .page-item.active .page-link {
    background-color: var(--primary-color);
    color: var(--primary-button-text)
}

.card-more {
    padding: 1rem;
    width: 100%;
    display: block;
    color: var(--primary-text);
    border-top: 1px solid var(--line-split);
    margin-top: -1px
}

.article-standard {
    position: relative;
    line-height: 1.65;
    padding: 2rem;
    border-radius: .75rem;
    background-color: var(--row-bg)
}

.article-standard h2 {
    font-size: 1.8em
}

.article-standard h2,.article-standard h3 {
    color: #fff;
    margin-bottom: 1rem;
    margin-top: 0
}

.article-standard h3 {
    font-size: 1.5em
}

.article-standard h4 {
    font-size: 1.2em
}

.article-standard h4,.article-standard h5 {
    color: #fff;
    margin-bottom: .5rem;
    margin-top: 0
}

.article-standard h5 {
    font-size: 1.1em
}

.article-standard ul {
    padding-left: 0
}

.page-not-found {
    padding: 10rem 3rem;
    margin: 0 auto;
    text-align: center;
    max-width: 600px
}

.page-not-found .img-404 {
    width: 100%;
    height: auto;
    max-width: 200px;
    margin-bottom: 2rem
}

.page-not-found .heading-sm {
    font-weight: 400;
    color: var(--text-base)
}

.content-blank {
    border-radius: .75rem;
    background-color: var(--row-bg)
}

.content-blank .content {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem
}

.content-blank .content .icon {
    font-size: 2em;
    color: #fff
}

.zmodal .modal-content {
    background-color: var(--navbar-bg);
    border-radius: .75rem;
    overflow: hidden
}

.zmodal .modal-header {
    border: none;
    display: flex;
    justify-content: space-between;
    padding: 1rem 1.5rem 0
}

.zmodal .btn-close {
    margin: 0;
    position: absolute;
    top: .5rem;
    right: .5rem;
    padding: .5rem
}

.zmodal .modal-body {
    padding: 3rem;
    position: relative;
    z-index: 3
}

.zmodal .modal-body .zform-control {
    border-color: hsla(0,0%,100%,.1)
}

.zmodal .modal-footer {
    border: none;
    padding: 0 1.5rem 1.5rem
}

.zmodal .modal-body .form-opt a {
    color: var(--text-base);
    font-size: 12px
}

.zmodal .hr-line {
    position: relative
}

.zmodal .hr-line span {
    display: block;
    padding: .2rem 1rem;
    background-color: var(--navbar-bg);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%)
}

.zmodal-sbs .modal-dialog {
    max-width: 480px!important
}

.btn-facebook {
    background-color: #4164ad!important;
    color: #fff!important
}

.btn-google {
    background-color: #fff!important;
    color: #000!important
}

.card-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background-color: var(--navbar-bg);
    padding: 1.2rem 1.5rem;
    border-radius: .75rem
}

.card-wrap .small-text {
    color: var(--text-base)
}

#body-mask,.modal-backdrop.show {
    background-color: rgba(5,24,61,.9)!important;
    opacity: 1!important;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px)
}

button#uptop {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    font-size: 16px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: #fff;
    color: #000;
    opacity: 0;
    visibility: hidden;
    border: none;
    outline: none;
    cursor: pointer;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99
}

.stream-wrapper {
    flex-direction: column
}

.match-stream,.stream-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: .5rem
}

.match-stream {
    flex-grow: 1
}

.match-stream .ms-player {
    flex-grow: 1;
    border-radius: .75rem;
    background-color: var(--navbar-bg)
}

.match-stream .is-header {
    padding: 1rem
}

.match-stream .ms-player .is-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    justify-content: space-between
}

.match-stream .is-bottom {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .6rem
}

.match-stream .match-title {
    font-size: 1.2em;
    line-height: 1.4;
    margin-bottom: 0;
    color: #fff
}

.msp-media {
    width: 100%;
    padding-bottom: 59%;
    position: relative
}

.msp-media iframe {
    width: 100%!important;
    height: 100%!important
}

.msp-media .msp-backdrop,.msp-media iframe, .msp-media .featured-video {
    position: absolute !important;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0
}

.msp-media .msp-backdrop {
    background-image: url('/img/player-backdrop.webp');
    background-color: var(--row-bg);
    background-position: 50%;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
}

.content-center {
    max-width: 500px;
    text-align: center
}

.content-center .cc-time {
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    width: 240px
}

.content-center .cc-time>div {
    text-align: center;
    flex: 1 1
}

.content-center .cc-time>div>div {
    font-size: 2em;
    line-height: 1;
    font-weight: 600;
    margin-bottom: .3rem
}

.content-center .cc-time>div>span {
    font-size: 11px;
    line-height: 1
}

.server-play {
    display: flex;
    align-items: center;
    gap: .3rem;
    flex-wrap: wrap;
    flex-grow: 1;
    padding: 1rem 0 1rem 1rem;
    max-width: 100%
}

.extend-player,.report-button,.server-play .item {
    display: block;
    padding: .4rem .8rem;
    background-color: #fff;
    color: #000 !important;
    border-radius: .4rem;
    font-weight: 500
}

.extend-player.active,.server-play .item.active, .server-play .item:hover {
    background-color: var(--primary-color);
    color: var(--primary-button-text)
}

.server-option .btn {
    padding: .2rem .6rem;
    height: 32px;
    font-size: 11px;
    border: 1px solid hsla(0,0%,100%,.7)
}

.server-option .btn .item-flex span {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis
}

.server-notice {
    font-size: 11px;
    color: #fff;
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-direction: row-reverse
}

.server-notice .is-text {
    max-width: 400px;
    width: 100%;
    padding: 1rem 0
}

.page-watch.full .server-notice .is-text {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    padding: 0
}

.server-notice .choose-server {
    padding: 1rem;
    gap: .5rem;
    flex-shrink: 0
}

.ib-right {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: 1rem 1rem 1rem 0;
    flex-shrink: 0
}

.extend-player,.report-button {
    cursor: pointer
}

.report-button .item-flex span:before {
    content: "Report"
}

.report-button.active .item-flex span:before {
    content: "Reported"
}

.report-button.active {
    color: var(--primary-text)
}

.match-stream .chat-area {
    width: 360px;
    flex-shrink: 0;
    background-color: var(--navbar-bg);
    border-radius: .75rem
}

.chat-area, #tab-chat {
    display: flex;
    flex-direction: column;
    position: relative
}
#tab-chat {
    flex: 1;
}
.chat-area .is-header {
    padding: 1rem
}

.chat-area .is-header .is-title {
    font-size: 1.2em;
    font-weight: 600;
    line-height: 1.4;
    color: #fff
}

.chat-fluid {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    background-color: rgba(0,0,0,.8);
    border-radius: 0 0 .75rem .75rem;
    overflow: hidden;
}

.chat-fluid .display {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: .6rem;
    overflow-y: hidden !important;
}
.chat-fluid .display iframe {
    height: 100%;
}
.chat-fluid .display .item {
    display: flex;
    gap: 10px
}

.chat-fluid .display .item+.item {
    margin-top: .75rem
}

.chat-fluid .display .item .avatar,.mg-avatar {
    width: 36px;
    height: 36px;
    margin-top: 3px
}

.chat-fluid .display .item .content {
    flex-grow: 1
}

.chat-fluid .display .item .c-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0;
    width: 100%
}

.chat-fluid .display .item .c-header .name-short {
    font-weight: 400;
    font-size: 13px;
    color: #81e95b;
    flex-shrink: 0
}

.chat-fluid .display .item .c-header .name-short.gr-admin {
    color: #ffc34d;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: .4rem
}

.chat-fluid .display .item .c-header .time {
    font-size: 10px;
    display: none;
    opacity: .5
}

.chat-fluid .display .item .c-header .option {
    position: relative;
    z-index: 4
}

.chat-fluid .display .item .c-header .option .option-btn {
    cursor: pointer;
    padding: .1rem .4rem;
    opacity: 0
}

.chat-fluid .display .item .c-header .option .base-dropdown {
    margin: 0!important
}

.chat-fluid .display .item:hover .c-header .option .option-btn,.chat-fluid .display .item:hover .c-header .option .option-btn:active {
    opacity: 1
}

.chat-fluid .display .item:hover .c-header .time {
    display: block
}

.chat-fluid .display .item .subject {
    font-size: 13px;
    color: #ccc;
    line-height: 1.4;
    word-break: break-word
}

.chat-fluid .display .item.hide .avatar,.chat-fluid .display .item.hide .name-short,.chat-fluid .display .item.hide .subject,.chat-fluid .display .item.hide .user-name {
    opacity: .5;
    filter: grayscale(1);
    font-style: italic
}

.chat-fluid .display .item.hide>.avatar {
    opacity: .5
}

.chat-fluid .display .item.guest .c-header .name-short,.chat-fluid .display .item.guest .subject {
    color: #ccc
}

.chat-fluid .display .item.ban .c-header .name-short {
    color: #666;
    font-weight: 300;
    text-decoration: line-through
}

.chat-fluid .display .item .reply {
    padding-left: .6rem;
    border-left: 2px solid #ffffff45;
    margin-bottom: .5rem;
    display: block;
    cursor: pointer;
    margin-top: 2px
}

.chat-fluid .display .item .reply>div {
    font-size: 12px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 200px;
    margin-bottom: 2px
}

.chat-fluid .display .item .reply .r-subject {
    color: var(--text-base)!important
}

.chat-fluid .is-mask {
    position: absolute;
    z-index: 9;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: .4rem;
    color: #fff;
    background-color: #040b17
}

.chat-fluid .is-mask .icon {
    font-size: 16px
}

.chat-area.hide .chat-fluid .is-mask {
    display: flex
}

.chat-area.hide .chat-noti {
    display: none
}

.inner-sticker {
    max-width: 200px;
    max-height: 160px;
    margin: .5rem 0;
    width: auto;
    height: auto
}

.chat-input {
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    padding: 1rem
}

.chat-input .is-textarea {
    position: relative;
    flex-grow: 1;
    margin-right: .5rem
}

.chat-input .is-textarea .form-control-textarea {
    padding: .8rem .8rem .8rem 2.5rem;
    font-size: 12px;
    font-weight: 400;
    color: #000;
    resize: none;
    height: 46px;
    border: none!important;
    border-radius: .3rem
}

.chat-input .is-textarea .form-control-textarea:focus {
    box-shadow: 0 0 0 5px rgba(202,233,98,.2)!important
}

.chat-input .is-textarea .is-emo {
    position: absolute;
    top: 8px;
    left: 12px;
    z-index: 9
}

.chat-input .is-textarea .is-emo .cb-icon {
    color: #aaa;
    font-size: 20px;
    cursor: pointer
}

.chat-input .is-textarea .is-emo.show .cb-icon {
    color: var(--primary-text)
}

.chat-input .is-textarea .characters-left {
    position: absolute;
    top: 3px;
    right: 5px;
    font-size: 10px;
    font-weight: 500;
    line-height: 1;
    color: #aaa
}

.chat-input .is-textarea .time-left {
    font-weight: 300;
    color: #fff;
    font-size: 11px;
    margin-top: .5rem
}

.chat-input .is-textarea .time-left strong {
    font-weight: 600;
    color: var(--primary-text)
}

.chat-input .is-button {
    flex-shrink: 0
}

.chat-input .is-button .btn {
    height: 46px;
    line-height: 46px;
    padding: 0 1.2rem;
    border-radius: .3rem;
    font-weight: 600;
    font-size: 13px
}

.dr-bottom-left {
    left: 0!important;
    right: auto!important
}

.dr-bottom-left,.dr-bottom-right {
    transform: none!important;
    top: auto!important;
    bottom: 100%!important
}

.dr-bottom-right {
    left: auto!important;
    right: 0!important
}

.dropdown-menu-emo {
    left: -13px!important;
    background-color: #1a2944!important
}

.w-sticker .tab-content {
    position: relative
}

.emo-list {
    overflow: hidden;
    width: 310px;
    padding: .5rem 0
}

.emo-list .el-item {
    float: left;
    width: 16.6%;
    text-align: center;
    padding: .5rem 0;
    font-size: 26px;
    cursor: pointer
}

.emo-list .el-item:hover {
    background: hsla(0,0%,100%,.1);
    border-radius: 6px
}

.base-dropdown .emo-tabs li+li {
    margin: 0!important
}

.base-dropdown .emo-tabs li .nav-link {
    padding: .3rem .6rem;
    font-weight: 400
}

.sticker-list {
    width: 310px;
    padding: 0;
    max-height: 310px;
    overflow: auto;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    position: relative
}

.sticker-list .sl-item {
    width: calc(33.33% - 10px);
    margin: 5px;
    padding: 10px;
    flex-shrink: 0;
    cursor: pointer
}

.sticker-list .sl-item .sli-img {
    position: relative;
    width: 100%;
    padding-bottom: 100%
}

.sticker-list .sl-item img {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    object-fit: cover
}

.sticker-list .sl-item:hover {
    background: hsla(0,0%,100%,.1);
    border-radius: 6px
}

.sticker-search {
    margin: 10px 0;
    position: relative
}

.sticker-search .ss-icon {
    position: absolute;
    top: 10px;
    left: 14px;
    font-size: 12px;
    color: #fff
}

.sticker-search .form-control {
    padding-left: 2rem;
    border-color: #fff!important
}

.new-chat {
    position: absolute;
    cursor: pointer;
    left: 50%;
    transform: translateX(-50%);
    top: -50px;
    z-index: 9;
    background-color: #fff;
    color: #000;
    font-weight: 500;
    padding: .5rem 1rem;
    border-radius: 3rem;
    box-shadow: 0 10px 10px 0 rgba(0,0,0,.1)
}

.new-chat i {
    animation: new-chat .5s infinite;
    position: relative
}

@keyframes new-chat {
    0% {
        top: 0
    }

    50% {
        top: -1px
    }

    to {
        top: 1px
    }
}

.chat-pin {
    background-color: var(--chat-bg)
}

.chat-pin .item {
    padding: .6rem 1rem;
    background-color: #335692;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 1rem
}

.chat-pin .item+.item {
    margin-top: 1px
}

.chat-pin .item .icon {
    width: 36px;
    font-size: 16px;
    text-align: center;
    flex-shrink: 0
}

.chat-pin .item .pin-text {
    flex-grow: 1
}

.d-polls {
    display: flex;
    align-items: center;
    gap: .3rem;
    margin: .5rem 0 .2rem
}

.d-polls .p-item {
    font-size: 12px;
    padding: .2rem .6rem;
    border-radius: 2rem;
    border: 1px solid hsla(0,0%,100%,.4);
    color: #fff;
    cursor: pointer
}

.d-polls .p-item:hover {
    color: var(--primary-text);
    border-color: var(--primary-color)
}

.d-polls-result {
    font-size: 11px;
    flex-direction: column;
    gap: .5rem;
    color: #fff;
    margin-top: .4rem
}

.d-polls-result,.d-polls-result .p-item {
    display: flex;
    justify-content: space-between
}

.d-polls-result .p-item {
    align-items: center;
    width: 100%
}

.d-polls-result .p-item>div {
    width: 50px;
    flex-shrink: 0
}

.d-polls-result .p-item>.percent {
    text-align: right;
    width: 30px
}

.d-polls-result .p-item>.prog {
    flex-grow: 1;
    flex-shrink: inherit;
    width: 100%;
    height: 3px;
    position: relative
}

.d-polls-result .p-item>.prog span {
    position: absolute;
    border-radius: 4px;
    left: 0;
    top: 0;
    bottom: 0;
    background-color: #fff
}

.chat-pin .item .sub {
    color: #fff;
    margin-bottom: .2rem
}

.chat-pin .item .sub .unpin {
    cursor: pointer;
    font-size: 10px;
    line-height: 1;
    padding-bottom: 2px;
    display: inline-block;
    border-bottom: 1px solid #fff;
    vertical-align: middle
}

.chat-pin .item .subject {
    font-size: 13px;
    color: #fff
}

.chat-pin .item .subject strong {
    color: #fff;
    margin-right: 3px;
    font-weight: 500
}

.chat-pin .item .subject strong.gr-admin {
    color: #ffc34d
}

.chat-noti {
    position: relative
}

.chat-noti .is-reply {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .6rem;
    background-color: #335692;
    margin-bottom: 0;
    font-size: 12px;
    display: none
}

.chat-noti .is-reply.active {
    display: flex!important
}

.chat-noti .is-reply .is-icon {
    color: var(--primary-text);
    font-size: 1.2em;
    margin-right: 1rem;
    flex-shrink: 0;
    padding: 0 .5rem
}

.chat-noti .is-reply .is-cancel {
    font-size: 1.2em;
    flex-shrink: 0;
    padding: 0 .5rem;
    cursor: pointer
}

.chat-noti .is-reply .is-content {
    flex-grow: 1
}

.chat-noti .is-reply .is-content .text {
    margin-top: .1rem;
    width: 100%;
    max-width: 200px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap
}

.chat-noti .is-reply .is-content .name {
    font-weight: 500;
    color: #fff
}

.ban-time-list .btn {
    padding: .3rem .8rem!important;
    width: 100%;
    text-align: left;
    color: #000
}

.ban-time-list .btn:hover {
    color: #dc3545!important
}

.chat-toggle {
    display: flex;
    gap: .6rem;
    align-items: center;
    color: #fff
}

.toggle-button {
    width: 28px;
    height: 16px;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    background-color: hsla(0,0%,100%,.2);
    cursor: pointer
}

.toggle-button,.toggle-button div {
    transition: all .2s ease 0s;
    -webkit-transition: all .2s ease 0s;
    -moz-transition: all .2s ease 0s
}

.toggle-button div {
    width: 12px;
    height: 12px;
    position: absolute;
    background-color: hsla(0,0%,100%,.6);
    border-radius: 50%;
    top: 2px;
    left: 2px;
    transform: scale(.75)
}

.toggle-button.on {
    background-color: var(--primary-color)
}

.toggle-button.on div {
    background-color: #000;
    left: 14px
}

.item-cload {
    opacity: .5
}

.c-min {
    color: #ffffff90;
    line-height: 1.5;
    padding-top: 0
}

.c-min>div {
    display: inline
}

.c-min .user-reply {
    color: #e8a7ff;
    margin-right: 4px;
    max-width: 120px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    display: inline-block;
    vertical-align: bottom
}

.c-min .user-name {
    font-weight: 500;
    color: #81e95b;
    margin-right: 6px
}

.c-min .user-name img {
    width: 16px;
    height: 16px;
    vertical-align: sub
}

.c-min .user-name.gr-admin {
    color: #ffc34d
}

.c-min .user-name.gr-guest {
    color: #fff
}

.chat-fluid.min .item {
    padding: .3rem 0
}

.chat-fluid.min .item+.item {
    margin-top: 0
}

.chat-fluid.min .item .content {
    position: relative
}

.chat-fluid.min .item .content>.option {
    position: absolute;
    right: 0;
    top: 2px;
    opacity: 0
}

.chat-fluid.min .item:hover .content>.option {
    opacity: 1;
    z-index: 99
}

.chat-fluid.min .item:hover .content>.option:hover {
    opacity: 1
}

.chat-fluid.min .item:hover .content>.option .dropdown-menu {
    z-index: 9;
    margin: 0!important
}

.chat-fluid.min .content>.option .option-btn {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background-color: #fff;
    border-radius: 50%;
    color: #000
}

.chat-fluid.min .display .item .avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    margin: 0
}

.chat-fluid.min .display .item .avatar.empty .letter {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #566a6b;
    border-radius: 50%
}

.display .push {
    display: flex;
    justify-content: center;
    position: relative;
    background-color: #f454d440;
    border-radius: .4rem;
    margin: .5rem 0;
    overflow: hidden
}

.display .push.goal .push-mask {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    color: #fff;
    opacity: .1;
    font-size: 6em;
    font-weight: 700;
    font-style: italic;
    line-height: 1;
    white-space: nowrap
}

.display .push.goal .push-content {
    display: block;
    font-weight: 600;
    text-align: center;
    padding: 1rem;
    position: relative;
    z-index: 3
}

#push-goal {
    opacity: 0;
    height: 0
}

#push-goal.active {
    opacity: 1;
    height: auto;
    display: flex
}

#push-goal.active .push-mask {
    animation: text-move 2s forwards
}

@keyframes text-move {
    0% {
        transform: translate(-80%,-50%)
    }

    40% {
        transform: translate(40%,-50%)
    }

    70% {
        transform: translate(-80%,-50%)
    }

    to {
        transform: translate(-50%,-50%)
    }
}

#push-card {
    opacity: 0;
    height: 0;
    background-color: #ff000059
}

#push-card.active {
    opacity: 1;
    height: auto;
    display: flex
}

#push-card.active .push-mask {
    animation: text-blink 2s forwards
}

@keyframes text-blink {
    0% {
        font-size: 2em
    }

    33% {
        font-size: 8em
    }

    66% {
        font-size: 2em
    }

    to {
        font-size: 6em
    }
}

.custom-tooltip {
    --bs-tooltip-bg: #fff;
    --bs-tooltip-color: #000;
    font-size: 11px
}

body.full {
    width: 100vw;
    height: 100vh;
    overflow: hidden
}

body.full #match-live {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--bg-color);
    z-index: 99;
    padding: .5rem;
    display: flex;
    flex-direction: column
}

body.full #match-live .card-detail {
    flex-shrink: 0;
    display: none
}

body.full #match-live .stream-wrapper {
    height: 100%
}

body.full .match-stream .ms-player {
    display: flex;
    flex-direction: column;
    justify-content: space-between
}

body.full .msp-media, body.full .videowrapper  {
    padding-bottom: 0;
    height: auto;
    flex-grow: 1
}

body.full #match-odds,body.full #match-other {
    display: none
}

#match-other {
    margin-top: 2rem
}

.match-list {
    position: relative
}

.match-grid {
    display: flex;
    justify-content: left;
    flex-wrap: wrap;
    margin: -.5rem
}

.match-grid .item-match {
    margin: .5rem;
    overflow: hidden
}

.large-match-grid .item-match {
    background-color: var(--row-bg);
    border: none;
    border-radius: 1rem;
    width: calc(20% - 1rem);
    position: relative
}

.large-match-grid .item-match:hover {
    background-color: var(--row-bg-hover)
}

.large-match-grid .item-match .match-link {
    position: absolute;
    z-index: 9;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0
}

.large-match-grid .item-match .item-header {
    padding: 1.2rem 1.2rem 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff
}

.large-match-grid .item-match .teams-logo .base-icon+.base-icon {
    margin-left: .75rem
}

.large-match-grid .item-match .detail {
    text-align: right
}

.large-match-grid .item-match .detail .time {
    font-weight: 600;
    font-size: 1.5em;
    line-height: 1.4;
    display: flex;
    align-items: center;
    justify-content: right
}

.large-match-grid .item-match .detail .sub {
    color: var(--text-base)
}

.large-match-grid .item-match .detail .sub .btn-watch {
    display: flex;
    align-items: center;
    justify-content: right
}

.large-match-grid .item-match .detail .sub .btn-watch i {
    font-size: 16px
}

.large-match-grid .item-match .item-body {
    position: relative;
    padding: 1.2rem
}

.large-match-grid .item-match .detail-league {
    font-size: 11px;
    margin-bottom: .5rem;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap
}

.large-match-grid .item-match .team-line {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.large-match-grid .item-match .team-line.is-home {
    margin-bottom: .2rem
}

.large-match-grid .item-match .team-name {
    display: flex;
    flex-grow: 1;
    align-items: center;
    color: #fff
}

.large-match-grid .item-match .name {
    font-weight: 500;
    font-size: 1.1em;
    margin: 0;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.large-match-grid .item-match .cards {
    margin-left: .5rem;
    flex-shrink: 0;
    display: flex;
    flex-wrap: nowrap
}

.large-match-grid .item-match .cards>div {
    margin-left: .3rem
}

.large-match-grid .item-match .team-goal {
    font-weight: 600;
    font-size: 1em;
    width: 26px;
    line-height: 26px;
    border-radius: 50%;
    text-align: right
}

.large-match-grid .item-match .team-line.is-win .team-goal {
    color: var(--primary-text)
}

.item-match .red-card {
    width: 8px;
    height: 12px;
    border-radius: 1px;
    transform: rotate(10deg);
    background-color: #d1172b;
    display: inline-block
}

.item-match .red-card+.red-card {
    margin-left: 4px!important
}

.for-user .btn span {
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.user-content {
    max-width: 500px;
    margin: 2rem auto;
    display: flex;
    flex-direction: column;
    gap: 1.5rem
}

.u-avatar {
    border-radius: 50%;
    width: 100px;
    height: 100px;
    overflow: hidden
}

.u-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover
}

.form-avatar {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1.5rem;
    border-radius: 1rem;
    overflow: hidden;
    position: relative
}

.form-avatar>div {
    position: relative;
    z-index: 2
}

.form-avatar .avatar {
    border: 2px solid #fff
}

.form-avatar .fa-bg {
    position: absolute!important;
    z-index: 1!important;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #224a9a
}

.form-avatar .fa-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: blur(20px) grayscale(1);
    opacity: .3;
    transform: scale(1.2)
}

.avatar-list {
    display: grid;
    margin-bottom: 2rem;
    grid-gap: .5rem;
    gap: .5rem;
    grid-template-columns: auto auto auto auto auto
}

.avatar-list .u-avatar {
    cursor: pointer;
    width: 100%;
    height: 0;
    padding-bottom: 100%;
    position: relative;
    border-radius: 0
}

.avatar-list .u-avatar img {
    border-radius: 0;
    position: absolute;
    top: 0;
    bottom: 0
}

.avatar-list .u-avatar.selected {
    opacity: 1;
    box-shadow: inset 0 0 0 10px rgba(0,0,0,.1)
}

.avatar-list .u-avatar.selected:after,.avatar-list .u-avatar.selected:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 2px solid var(--primary-color);
    z-index: 2
}

.avatar-list .u-avatar.selected:after {
    border: 5px solid var(--navbar-bg);
    z-index: 1
}

.avatar-list .u-avatar:hover {
    opacity: 1
}

.filter-show {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
    margin-top: 1.25rem
}

.filter-show>.btn-outline {
    border-color: var(--border-color-high);
    color: #fff;
    font-size: 11px
}

.filter-show>.btn-outline i {
    color: var(--border-color-high)
}

.filter-show>.btn-outline:hover {
    border-color: #fff
}

.filter-show>.btn-outline:hover i {
    color: #fff
}

.filter-show>.item-title {
    background-color: var(--border-color-high)!important
}

.report-reason {
    padding: .5rem;
    font-size: 11px;
    min-width: 160px
}

.report-reason .check-base {
    text-align: left;
    color: #fff;
    display: flex;
    gap: .5rem;
    align-items: center;
    cursor: pointer
}

.report-reason .check-base+.check-base {
    margin-top: .7rem
}

.report-reason .check-base span {
    flex-grow: 1
}

.report-reason .check-base .fa-solid {
    font-size: 14px;
    opacity: .1;
    background-color: #fff;
    border-radius: 50%
}

.report-reason .check-base:hover .fa-solid {
    background-color: transparent
}

.report-reason .check-base.active .fa-solid {
    opacity: 1;
    color: var(--primary-color);
    background-color: transparent
}

.report-reason .rr-button .btn-sm {
    font-size: 11px
}

.lang-icon {
    width: 14px;
    height: auto
}

.choose-server .dropdown-menu {
    max-height: 230px;
    overflow: auto
}

.choose-server .dropdown-item {
    gap: .5rem
}

.choose-server .dropdown-item.active {
    background-color: hsla(0,0%,100%,.1)!important
}

.choose-server .dropdown-item.active span {
    color: #fff;
    font-weight: 500
}

.note-text {
    line-height: 14px;
    letter-spacing: .5px;
    padding: 0 6px;
    font-size: 9.5px;
    position: absolute;
    top: -8px;
    left: 25px;
    z-index: 3;
    background-color: var(--navbar-bg);
    color: hsla(0,0%,100%,.5)
}

.spond-box {
    border-radius: .75rem;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    gap: .75rem;
    background-image: linear-gradient(-60deg,#16a085,#f4d03f)
}

.spond-box .heading-xl {
    margin-bottom: 0;
    font-size: 2.2em;
    line-height: 1.1;
    text-shadow: 0 0 5px rgba(0,0,0,.2);
    text-transform: uppercase
}

.spond-box .contact-e a {
    font-weight: 500;
    font-size: 13px
}

.spond-box .contact-e a i {
    font-size: 16px
}

.spond-box.spond-square {
    min-height: 200px
}

.spond-box.spond-square .heading-xl {
    font-size: 2.4em;
    line-height: 1.1
}

.spond-dual {
    margin: 1.5rem 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem
}

.spond-dual .spond-box {
    flex-grow: 1;
    width: 100%
}

.block-share {
    flex-shrink: 0
}

.block-share .title {
    width: 40px;
    text-align: left;
    color: #fff;
    line-height: 1.2;
    font-size: 10px;
    margin-right: 3px
}

.sharethis-inline-share-buttons .st-btn {
    margin-right: 0!important;
    padding: 0 8px!important
}

.sharethis-inline-share-buttons .st-btn+.st-btn {
    margin-left: 6px!important
}

.current-time {
    text-align: right
}

.current-time .small {
    font-size: 12px;
    color: #fff;
    font-weight: 600
}

.z-tabs .nav-link {
    background-color: #ffffff2e;
    color: #fff
}

.z-tabs .nav-link.active {
    background-color: #fff;
    color: #000
}

.z-tabs-min .nav-link {
    font-size: 12px;
    padding: .3rem .6rem;
    border: 0;
}

.chat-input {
    position: relative
}

.chat-input.enter-name .mol-guest {
    display: flex!important;
    overflow: hidden
}

.chat-input.enter-name>div {
    display: none
}

.chat-input .mol-guest {
    position: relative;
    z-index: 10;
    display: none
}

.chat-input .mg-content,.chat-input .mol-guest {
    align-items: center;
    justify-content: center;
    width: 100%
}

.chat-input .mg-content {
    height: 100%;
    padding: .4rem;
    display: flex;
    flex-grow: 1;
    animation: guest-name .5s forwards
}

.chat-input .mg-content .zform .form-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem
}

.chat-input .mg-content .zform .zform-control {
    font-size: 11px;
    height: 32px;
    color: #fff;
    border-color: hsla(0,0%,100%,.4);
    padding: .4rem .6rem!important;
    border-radius: .4rem!important;
    font-weight: 300
}

.chat-input .mg-content .zform .zform-control::placeholder {
    color: #fff
}

.chat-input .mg-content .zform .btn-xs {
    padding: 0 .5rem;
    min-width: 32px;
    text-align: center;
    line-height: 32px;
    border-radius: .3rem;
    font-size: 11px
}

.chat-input.enter-name .is-textarea {
    filter: blur(5px);
    opacity: .2
}

@keyframes guest-name {
    0% {
        transform: translateY(100%)
    }

    to {
        transform: translateY(0)
    }
}

.chat-input .c-current-name {
    font-size: 11px;
    color: hsla(0,0%,100%,.7);
    font-weight: 300;
    margin-top: .6rem;
    margin-bottom: -.2rem;
    display: none
}

.chat-area .tab-content {
    flex-grow: 1
}

.chat-area .tab-content>.active {
    display: flex
}

.chat-area .is-emo .tab-content>.active {
    flex-direction: column
}

.chat-tab {
    flex-grow: 1;
    height: 100%
}

.chat-tab,.ms-bet {
    display: flex;
    flex-direction: column
}

.ms-bet {
    gap: .6rem;
    padding: .8rem;
    border-radius: .8rem;
    background-color: #253862;
    box-shadow: 0 5px 5px 0 rgba(0,0,0,.15);
    margin: -.5rem
}

.ms-bet .bet-logo img {
    height: 12px;
    width: auto
}

.ms-bet .bet-value {
    display: flex;
    align-items: center;
    gap: .4rem
}

.ms-bet .bet-value .bv-item {
    min-width: 60px;
    cursor: pointer;
    flex-grow: 1;
    text-align: center;
    padding: .4rem .6rem;
    border-radius: 3rem;
    background-color: #31497d;
    color: #fff;
    font-weight: 500;
    font-size: 12px;
    white-space: nowrap
}

.ms-bet .bet-value .bv-item span {
    color: var(--primary-text);
    margin-right: .4rem;
    cursor: pointer
}

.ms-bet .bet-value .bv-item:hover {
    background-color: #415e9d;
    transform: scale(1.1)
}

.ms-bet .bet-site {
    color: var(--text-base);
    font-size: 12px;
    display: block
}

.ms-bet.d-hide {
    display: none
}

.loaderx {
    height: 20px;
    aspect-ratio: 6;
    --c: #0000 64%,#000 66% 98%,#0000 101%;
    background: radial-gradient(35% 146% at 50% 159%,var(--c)) 0 0,radial-gradient(35% 146% at 50% -59%,var(--c)) 25% 100%;
    background-size: calc(100%/3) 50%;
    background-repeat: repeat-x;
    animation: l1 1s linear infinite
}

@keyframes l1 {
    to {
        background-position: 50% 0,75% 100%
    }
}

.loadery {
    width: 84px;
    aspect-ratio: 1.82;
    border-radius: 30px;
    background: #ababab;
    box-shadow: 0 0 0 0 #ababab50;
    animation: l2 1.5s linear infinite;
    position: relative
}

.loadery:after,.loadery:before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: 0 0 0 0 #ababab50;
    animation: inherit;
    animation-delay: -.5s
}

.loadery:after {
    animation-delay: -1s
}

@keyframes l2 {
    to {
        box-shadow: 0 0 0 30px #0000
    }
}

.he-bet {
    gap: .6rem
}

#hot-matches,.he-bet {
    display: flex;
    align-items: center
}

#hot-matches {
    position: relative;
    width: 100%;
    max-width: 2200px;
    padding: 120px 15px 30px;
    margin: 0 auto;
    flex-direction: column;
    justify-content: flex-end
}

#hot-matches .hm-cover {
    width: 100%;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 80px;
    -webkit-mask-image: linear-gradient(0deg,transparent 0,#000 40%,#000 60%,transparent);
    mask-image: linear-gradient(0deg,transparent 0,#000 40%,#000 60%,transparent)
}

#hot-matches .hm-cover img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(1);
    opacity: .2;
    -webkit-mask-image: linear-gradient(90deg,transparent 0,#000 20%,#000 80%,transparent);
    mask-image: linear-gradient(90deg,transparent 0,#000 20%,#000 80%,transparent)
}

.hm-flex {
    width: 100%
}

.card-single+.card-single {
    margin-top: 1rem
}

.hm-flex .card-single {
    width: 100%
}

.div-cover {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden
}

.div-cover img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.card-detail {
    margin-bottom: .5rem;
    background-color: #163674;
    border-radius: .75rem;
    position: relative;
    overflow: hidden
}

.card-detail .div-cover {
    filter: grayscale(1) blur(25px);
    opacity: .2
}

.card-detail .card-match {
    background-color: transparent;
    color: #fff;
    position: relative;
    padding: 1.5rem;
    z-index: 2
}

.card-detail .card-match .cm-blv {
    border-radius: .6rem;
}

.card-detail .card-match .cm-blv.room {
    cursor: pointer;
    padding-bottom: 32px
}

.card-detail .card-match .cm-blv.room .loaderx {
    margin-top: -30px
}

.card-detail .card-match .cm-blv .backdrop {
    display: none
}

.card-detail .card-match .cm-wrap {
    flex-direction: column;
    padding: 0
}

.card-detail .card-match .cm-wrap .status-match.is-live {
    top: -20px;
    display: none
}

.card-detail .card-match .match-time .time {
    font-size: 1.2em;
    font-weight: 400
}

.card-detail .card-match .match-time .time strong {
    font-weight: 700
}

.card-detail .card-match .team-vs {
    width: 100%;
    max-width: 600px
}

.card-detail .card-match .team-vs .card-team .base-icon {
    width: 50px;
    height: 50px
}

.card-detail .card-match .team-vs .card-team span {
    font-size: 1.2em;
    font-weight: 500
}

.card-detail .card-match .team-vs .card-team.event {
    justify-content: center
}

.card-detail .card-match .team-vs .card-team.event .base-icon {
    border: none!important;
    width: 60px!important;
    height: 60px!important
}

.card-detail .card-match .match-buttons {
    padding: 1rem 0 0;
    flex-direction: row;
    gap: .5rem;
    width: auto
}

.card-detail .card-match .match-buttons .btn {
    font-size: 14px
}

.card-detail .card-match .match-time {
    padding: 0;
    flex-direction: column-reverse;
    width: 100%;
    text-align: center
}

.card-detail .card-match .match-time .league {
    font-size: 1.1em;
    font-weight: 500;
    text-align: center!important
}

.card-detail .card-match .match-time .date {
    font-size: 1em;
    margin-top: -.2rem
}

.card-detail .card-match.end-match .time {
    font-size: 1.1em;
    margin-bottom: .5rem
}

.card-match .others,.stats-ul {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .4rem
}

.card-match .others {
    width: 320px
}

.card-match .others .o-row,.stats-ul .o-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: .9em;
    line-height: 1.3;
    padding: .8rem;
    border-radius: .5rem;
    background-color: hsla(0,0%,100%,.075);
    position: relative
}

.card-match .others .o-row .team,.stats-ul .o-row .team {
    color: #fff;
    font-weight: 500
}

.card-match .others .o-row .team.win,.stats-ul .o-row .team.win {
    color: var(--primary-text)
}

.card-detail .card-match.event .match-time {
    flex-direction: row;
    align-items: center;
    gap: 1rem;
    justify-content: center;
    padding-bottom: .5rem
}

.card-detail .card-match.event .match-time .time {
    padding-right: 1rem;
    border-right: 1px solid #ffffff20
}

.stats-ul {
    width: 100%;
    padding: 0 1.2rem 1.2rem;
    gap: 2px
}

.stats-ul .o-row {
    overflow: hidden;
    border-radius: 0
}

.stats-ul .o-row:first-of-type {
    border-radius: .5rem .5rem 0 0
}

.stats-ul .o-row:last-of-type {
    border-radius: 0 0 .5rem .5rem
}

.stats-ul .o-row .team .bar {
    position: absolute;
    bottom: 0
}

.stats-ul .o-row .team .bar span {
    flex-shrink: 0;
    height: 3px;
    background-color: #ffffff20
}

.stats-ul .o-row .team.win .bar span {
    background-color: var(--primary-color)
}

.stats-ul .o-row .team-home .bar {
    right: calc(50% + 2px);
    left: 0;
    display: flex;
    justify-content: flex-end
}

.stats-ul .o-row .team-away .bar {
    left: calc(50% + 2px);
    right: 0;
    display: flex;
    justify-content: flex-start
}

.mini-tabs {
    margin-bottom: .6rem;
    padding: .5rem 1rem;
    display: flex;
    align-items: center;
    gap: 1.2rem;
    justify-content: center
}

.mini-tabs .tab-li.active {
    color: var(--primary-text)
}

.hm-doublex {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 2rem 0
}

.doublex-duo >div {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem
}

.doublex a {
    display: block
}

.x-728 a {
    max-width: 728px;
    width: 100%!important
}

.x-728.w-100 a {
    max-width: none!important
}

.x-728 img {
    max-width: 870px;
    height: auto!important
}

.x-150 a,.x-728 img {
    width: 100%!important
}

.x-150 a {
    max-width: 200px
}

.x-150 a img {
    width: 100%!important;
    height: auto!important
}

#main .x-150 >div {
    position: absolute;
    top: 0;
    bottom: 0;
    left: -180px;
    width: 150px;
    display: flex;
    flex-direction: column;
    gap: 1rem
}

#main .x-150.is-right >div {
    left: auto;
    right: -180px
}

.x-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    position: -webkit-sticky;
    position: sticky;
    top: 0
}

.doublex.x-1300 {
    position: fixed;
    bottom: 0;
    z-index: 100;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 1300px
}

.doublex.x-1300 img {
    width: 100%;
    height: auto
}

.doublex .adlv-close {
    width: 30px;
    height: 30px;
    background-color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 5px 0 #0005;
    font-size: 16px;
    color: #000;
    z-index: 2;
    position: absolute;
    top: 8px;
    right: 8px;
    cursor: pointer
}

.doublex .adlv-close:hover {
    transform: scale(1.1)
}

.doublex.x-500 {
    width: 500px;
    height: 500px;
    margin: 0 auto;
    background-color: #222;
    position: relative;
    z-index: 1700
}

.doublex.x-500 a,.doublex.x-500 img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0
}

.doublex.x-500 img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.doublex.x-250 {
    position: fixed;
    top: 50%;
    z-index: 9;
    transform: translateY(-50%);
    left: 20px;
    width: 250px
}

.doublex.x-250.is-right {
    left: auto;
    right: 20px
}

.doublex.x-250 img {
    width: 100%;
    height: auto
}

.odds-box {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: 0;
    background-color: var(--bg-odds);
    border-radius: .75rem;
    margin-bottom: .5rem;
    border: 1px solid #335692
}

.odds-box .ob-col {
    flex: 1 1;
    display: flex;
    flex-direction: column
}

.odds-box .ob-col+.ob-col {
    border-left: 1px solid var(--border-odds)
}

.odds-box .ob-col .ob-row {
    display: flex;
    width: 100%;
    height: 50px;
    flex-grow: 1;
    align-items: center;
    justify-content: center;
    font-size: 12px
}

.odds-box .ob-col.ob-title {
    width: 140px;
    flex: inherit!important
}

.odds-box .ob-col.ob-title .ob-row {
    padding: 1rem
}

.odds-box .ob-col .ob-row.is-primary {
    background-color: #ffffff07;
    border-top: 1px solid var(--border-odds);
    border-bottom: 1px solid var(--border-odds)
}

.odds-box .ob-col .ob-row .item {
    flex: 1 1;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: .3rem;
    height: 100%
}

.odds-box .ob-col .ob-row.is-head strong {
    font-weight: 600;
    color: #f3da91
}

.odds-box .ob-col .ob-row.is-head .item+.item {
    border-color: transparent!important
}

.odds-box .ob-col .ob-row .item .pick-1 {
    color: var(--primary-text)
}

.odds-box .odds-image {
    height: 25px;
    width: auto
}

.odds-box.min {
    background-color: transparent!important;
    border-radius: 0;
    border: none!important;
    padding: 0 1rem;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1rem
}

.odds-box.min .ob-col.ob-title {
    width: 100%!important;
    flex-direction: row
}

.odds-box.min .ob-col {
    border: none!important;
    border-radius: .4rem;
    background-color: #0c1423
}

.odds-box.min .ob-col .ob-row {
    height: 40px;
    padding: .2rem 1rem
}

.odds-box.min .ob-col .ob-row.is-primary {
    border: none!important;
    background-color: #111c30!important;
    border-radius: 0 0 .4rem .4rem
}

.page-info {
    min-height: calc(100vh - 318px)!important
}

.page-info .container {
    max-width: 1000px
}

.article-content {
    position: relative;
    background-color: #fff;
    color: #000;
    padding: 2rem;
    border-radius: 1rem;
    border-top: 6px solid #35a251
}

.article-content a {
    color: #4eb645!important
}

.article-content h1 {
    font-size: 2em;
    font-weight: 700;
    line-height: 1.5;
    margin: 0 0 1.25rem
}

.article-content h2 {
    font-size: 1.8em;
    font-weight: 700;
    line-height: 1.5;
    margin: 0 0 1rem
}

.article-content h3 {
    font-size: 1.4em;
    color: #4eb645
}

.article-content h3,.article-content h4 {
    font-weight: 700;
    line-height: 1.5;
    margin: 0 0 .5rem
}

.article-content h4 {
    font-size: 1.2em
}

.article-content h5 {
    font-size: 1em;
    font-weight: 700;
    line-height: 1.5;
    margin: 0 0 .6rem
}

.article-content b,.article-content strong {
    font-weight: 600
}

@media screen and (max-width: 2100px) {
    .doublex.x-250 {
        width:180px;
        top: 60%
    }
}

@media screen and (max-width: 1680px) {
    .doublex.x-250 {
        display:none
    }
}

@media screen and (max-width: 1279px) {
    #klayout #main {
        max-width:none!important;
        padding: 0 190px
    }

    #main .x-150.is-left {
        left: 15px
    }

    #main .x-150.is-right {
        right: 15px
    }
}

@media screen and (min-width: 1200px) {
    .hm-flex {
        width:100%;
        max-width: 1260px;
        margin: 0 auto;
        display: flex;
        align-items: stretch;
        justify-content: center;
        flex-wrap: wrap;
        gap: 1.2rem
    }

    .hm-flex .card-single {
        margin: 0!important;
        width: calc(33.33% - .8rem)
    }

    .card-single+.card-single {
        margin-top: 0
    }

    .card-single .card-match {
        border-radius: .75rem;
        height: 100%
    }

    .card-single .card-match .cm-wrap {
        flex-direction: column;
        gap: 1.5rem;
        padding: 1.5rem
    }

    .card-single .card-match .cm-wrap .status-match.is-live {
        transform: none;
        left: 22px;
        top: 22px
    }

    .card-single .card-match .team-vs {
        width: 100%;
        padding: 0
    }

    .card-single .card-match .team-vs .card-team span {
        font-size: .9em
    }

    .card-single .card-match .match-time {
        width: 100%;
        flex-direction: row;
        justify-content: space-between;
        padding: 0;
        margin-top: -5px
    }

    .card-single .card-match .match-time .date {
        margin: 0;
        flex-grow: 1
    }

    .card-single .card-match .match-time .league {
        max-width: 160px;
        text-align: right
    }

    .card-single .card-match.live-match .match-time {
        padding-left: 70px
    }

    .card-single .card-match .match-time .time {
        font-size: 1.2em;
        flex-shrink: 0
    }

    .card-single .card-match .match-buttons {
        width: 100%;
        padding: 0;
        flex-direction: row;
        justify-content: flex-end
    }

    .card-single .card-match .cm-blv {
        position: absolute;
        bottom: 1.5rem;
        left: 1.5rem;
        flex-direction: row;
        width: auto;
        border-radius: .4rem;
        padding: 0;
        gap: 0;
        z-index: 5
    }

    .card-single .card-match .cm-blv:before {
        display: none
    }

    .card-single .card-match .cm-blv .avatar {
        width: 34px;
        height: 34px;
        border: none;
        border-right: 1px solid #fff;
        border-radius: .4rem 0 0 .4rem;
        padding: 0
    }

    .card-single .card-match .cm-blv.duo .avatar-duo {
        padding: 0
    }

    .card-single .card-match .cm-blv.duo .avatar-duo .avatar {
        margin: 0!important;
        width: 24px
    }

    .card-single .card-match .cm-blv .blv-name {
        padding: 0 .75rem
    }

    .card-single .card-match .cm-blv .backdrop {
        display: none
    }

    .card-single .card-match .cm-blv .loaderx {
        margin-top: -10px;
        left: 30px
    }

    .card-single .card-match .cm-blv.cm-blv.multiroom .blv-name {
        color: #fff
    }

    .card-single .card-match .cm-blv.cm-blv.multiroom .loadery {
        width: 34px;
        height: 100%;
        margin-top: 0;
        top: 0;
        left: 0;
        transform: none;
        border-radius: 0;
        z-index: 1;
        background-color: transparent;
        box-shadow: none
    }

    .card-single .card-match .cm-blv.cm-blv.multiroom .loadery:after,.card-single .card-match .cm-blv.cm-blv.multiroom .loadery:before {
        box-shadow: 0 0 0 0 #ffffff6b
    }
}

@media screen and (max-width: 1199px) {
    #main .x-150 {
        display:none
    }

    #klayout #main {
        padding: 0 15px
    }

    #match-other .card-single+.card-single {
        margin-top: .5rem
    }

    .card-match .others {
        width: 260px
    }

    .match-stream {
        flex-direction: column
    }

    .match-stream .chat-area {
        width: 100%
    }

    .match-stream .chat-area .chat-fluid {
        height: 500px
    }

    .extend-player,.report-button,.server-play .item {
        font-size: 12px;
        padding: .3rem .7rem
    }

    body.full #match-live .card-detail,body.full .chat-area .doublex {
        display: none
    }

    body.full .msp-media {
        height: 300px
    }

    body.full .match-stream .chat-area .chat-fluid {
        height: auto
    }

    .odds-box .ob-col.ob-title {
        width: auto
    }

    #hot-matches .card-single .card-match {
        background: #fff;
        background: linear-gradient(0deg,#fff 70%,#fff7e2)
    }
}

@media screen and (max-width: 991px) {
    header {
        height:auto
    }

    header .header-elements {
        padding: 20px 0
    }

    #logo img {
        height: 50px
    }

    #hot-matches {
        padding-top: 100px
    }

    .doublex-duo>div {
        flex-direction: column
    }

    .card-detail .card-match .team-vs .card-team {
        flex-direction: column;
        position: relative
    }

    .card-detail .card-match .team-vs .card-team .red-card {
        margin: 0;
        position: absolute;
        left: calc(50% - 40px);
        top: 12px
    }

    .card-detail .card-match .team-vs .card-team .base-icon {
        width: 40px;
        height: 40px
    }

    .card-detail .card-match .team-vs .card-team span {
        font-size: 13px
    }

    .card-detail .card-match .match-buttons .btn {
        font-size: 12px;
        padding: .5rem 1rem
    }

    .card-detail .card-match .match-time {
        font-size: 12px
    }

    #match-odds,.card-match .others {
        display: none
    }

    .footer-elements {
        flex-direction: column;
        justify-content: center;
        gap: 1.5rem;
        height: auto;
        padding: 2rem 0
    }

    .footer-elements .f-left {
        align-items: center
    }

    .footer-elements .footer-menu {
        justify-content: center;
        gap: .5rem
    }

    .footer-elements .footer-menu a {
        margin: 0 .5rem
    }

    #wrapper,#wrapper.page-info {
        min-height: auto!important
    }
}

@media screen and (min-width: 800px) {
    .he-bet {
        align-items:stretch;
        flex-grow: 1;
        justify-content: flex-end
    }

    .he-bet .btn-light {
        white-space: normal;
        width: 106px;
        font-size: 13px;
        padding: 0 .7rem;
        line-height: 1.2;
        align-items: center;
        display: flex
    }

    .card-detail .card-match.event .cm-wrap {
        padding-right: 110px
    }
}

@media screen and (max-width: 799px) {
    header.header-home {
        position:relative;
        top: auto;
        left: auto;
        right: auto
    }

    header .header-elements {
        flex-direction: column;
        align-items: flex-start;
        height: auto;
        padding: 20px 5px 0
    }

    header .header-elements .doublex {
        width: 100%
    }

    header .header-elements .doublex a {
        max-width: none
    }

    .he-member {
        position: absolute;
        top: 22px;
        right: 0
    }

    .he-bet,.he-bet .btn {
        width: 100%
    }

    .doublex-duo >div,.hm-doublex {
        gap: .5rem;
        padding-top: 0
    }

    #hot-matches {
        padding-top: 0
    }

    .card-match {
        border-radius: .75rem
    }

    .card-match .cm-wrap {
        flex-direction: column;
        gap: 1.5rem;
        padding: 1.5rem
    }

    .card-match .cm-wrap .status-match.is-live {
        transform: none;
        left: 25px;
        top: 22px
    }

    .card-match .team-vs {
        width: 100%;
        padding: 0
    }

    .card-detail .card-match .team-vs {
        padding-bottom: .5rem
    }

    .card-match .team-vs .card-team span {
        font-size: .9em
    }

    .card-match .match-time {
        width: 100%;
        flex-direction: row;
        justify-content: space-between;
        padding: 0
    }

    .card-match.live-match .match-time {
        padding-left: 72px;
        margin-top: -5px
    }

    .card-match .match-time .league {
        text-align: right;
        padding-top: 1px
    }

    .card-match .match-time .time {
        font-size: 1.2em;
        flex-shrink: 0
    }

    .card-match .match-time .date {
        margin: 0;
        flex-grow: 1;
        white-space: nowrap
    }

    .card-match .match-buttons {
        width: 100%;
        padding: 0;
        flex-direction: row;
        justify-content: flex-end
    }

    .card-match .match-buttons .btn-live,.card-match .match-buttons .btn-wait {
        display: none
    }

    .card-match .cm-blv {
        position: absolute;
        bottom: 1.5rem;
        left: 1.5rem;
        flex-direction: row;
        width: auto;
        border-radius: .4rem;
        padding: 0;
        gap: 0;
        z-index: 9
    }

    .card-match .cm-blv:before {
        display: none
    }

    .card-match .cm-blv .avatar {
        width: 34px;
        height: 34px;
        border: none;
        border-right: 1px solid #fff;
        border-radius: .4rem 0 0 .4rem;
        padding: 0
    }

    .card-match .cm-blv.duo .avatar-duo {
        padding: 0
    }

    .card-match .cm-blv.duo .avatar-duo .avatar {
        margin: 0!important;
        width: 24px
    }

    .card-match .cm-blv .blv-name {
        padding: 0 .75rem
    }

    .card-match .cm-blv .backdrop {
        display: none
    }

    .card-match .cm-blv .loaderx {
        margin-top: -10px;
        left: 30px
    }

    .card-match .team-vs .card-team.event {
        justify-content: center
    }

    .card-detail .card-match.live-match .match-time {
        padding: 0
    }

    .card-detail .card-match.live-match .btn {
        font-size: 11px;
        padding: .4rem .7rem!important
    }

    .card-detail .card-match .match-buttons {
        width: 100%
    }

    .card-detail .card-match .cm-blv {
        position: absolute;
        bottom: 1.5rem;
        left: 1.5rem;
        z-index: 9
    }

    .card-detail .card-match .cm-blv.room {
        padding-bottom: 0
    }

    .card-detail .card-match .cm-blv.room .room-id {
        position: relative!important;
        bottom: auto!important;
        padding: 0 .5rem 0 0;
        background-color: transparent;
        color: #fff
    }

    .card-detail .card-match .cm-blv.room .room-id span {
        display: none
    }

    .card-detail .card-match .cm-blv.room .loaderx {
        margin-top: -10px
    }

    .zmodal .modal-body {
        padding: 1.8rem
    }

    .form-avatar .u-avatar {
        width: 60px;
        height: 60px
    }

    body.full #match-live {
        padding: 0
    }

    body.full .msp-media {
        height: auto;
        padding-bottom: 56.25%
    }

    body.full .match-stream .ms-player .is-header {
        display: none
    }

    body.full .match-stream .chat-area {
        flex-grow: 1;
        border-radius: 0
    }

    body.full .match-stream .ms-player {
        flex-grow: unset;
        border-radius: 0
    }

    body.full .match-stream {
        gap: 1px
    }

    body.full .stream-wrapper .doublex {
        display: none
    }

    .card-detail .card-match .match-buttons {
        padding-top: 0
    }

    .card-match .cm-blv .loadery {
        display: none
    }

    .room-list .item {
        padding: .8rem;
        flex-direction: column;
        align-items: flex-start;
        position: relative;
        gap: .8rem
    }

    .room-list .item .match-buttons {
        padding-left: 0!important;
        display: none
    }

    .room-list .item .blv-group {
        position: absolute;
        right: 1rem;
        top: .7rem
    }

    .card-match.modal-match .match-time .league {
        text-align: center
    }

    .card-match.modal-match.live-match .match-time .league {
        text-align: left!important
    }

    .card-match .cm-blv.multiroom,.card-match.group .cm-blv.multiroom {
        background-color: #666;
        overflow: hidden
    }

    .card-match .cm-blv.multiroom .avatar {
        width: 34px;
        border-radius: 0
    }

    .card-match.group .cm-blv .blv-name {
        color: #fff
    }

    .doublex.x-500 {
        width: 340px;
        height: 340px
    }

    .zmodal-adlv .modal-content {
        width: 340px;
        margin: 0 auto;
        overflow: unset
    }

    .doublex .adlv-close {
        width: 24px;
        height: 24px;
        border-radius: 0;
        font-size: 12px;
        top: 0;
        right: 0
    }

    button#uptop {
        display: none
    }
}

@media screen and (max-width: 479px) {
    .card-match+.card-match,.card-single+.card-single {
        margin-top:.75rem
    }

    .card-match .cm-wrap {
        gap: 1rem;
        padding: 1rem
    }

    .card-match .cm-wrap .status-match.is-live {
        top: 15px;
        left: 10px
    }

    .card-match .cm-wrap .match-buttons .btn-sm {
        font-size: 11px
    }

    .card-match .cm-wrap .match-buttons .btn-wait {
        display: none
    }

    .card-match .cm-blv {
        bottom: 1rem;
        left: 1rem;
        height: 31px;
        background-color: transparent!important
    }

    .card-match .cm-blv .avatar {
        width: 32px;
        height: 32px;
        border-radius: 50%
    }

    .card-match .cm-blv.multiroom .avatar {
        height: 32px
    }

    .card-match .cm-blv.duo .avatar-duo .avatar {
        border: 2px solid #fff;
        width: 36px;
        height: 36px
    }

    .card-match .cm-blv.duo .avatar-duo .avatar+.avatar {
        margin-left: -.75rem!important
    }

    .card-match .cm-blv.duo .blv-name {
        text-align: left;
        font-size: 11px;
        line-height: 1.3
    }

    .card-match .cm-blv .loaderx {
        display: none
    }

    .card-match .cm-blv .blv-name {
        padding: 0 0 0 .5rem;
        font-size: 12px;
        color: #000
    }

    .card-match .team-vs .card-team {
        flex-direction: column;
        gap: .6rem;
        position: relative
    }

    .card-match .team-vs .card-team .red-card {
        margin: 0;
        position: absolute;
        left: calc(50% - 40px);
        top: 12px
    }

    .card-match .team-vs .card-team.team-home .red-card {
        left: auto;
        right: calc(50% - 40px)
    }

    .card-match .team-vs .card-team.event span {
        text-align: center
    }

    .extend-player,.report-button,.server-play .item {
        font-size: 11px;
        padding: .3rem .7rem
    }

    .card-detail .card-match .cm-blv .blv-name {
        color: #fff
    }

    .card-detail .card-match .cm-blv {
        background-color: transparent!important
    }

    .card-detail .card-match {
        padding: 1rem
    }

    .card-detail .card-match .cm-blv {
        left: 1rem;
        bottom: 1rem;
        z-index: 9;
        overflow: visible
    }

    .card-detail .card-match .team-vs .card-team span {
        font-size: 12px
    }

    .match-stream .match-title {
        font-size: 1em
    }

    .extend-player {
        display: flex;
        height: 27px;
        align-items: center
    }

    .extend-player span {
        display: none
    }

    .zmodal-room .modal-dialog .modal-body {
        padding: 2rem 1rem
    }

    .card-match.modal-match .match-time {
        padding-bottom: 0!important
    }

    .card-detail .card-match .cm-blv.room .room-id {
        padding: 0 0 0 .5rem
    }

    .card-match .cm-blv.multiroom .avatar {
        width: 50px;
        border-radius: 30px
    }

    .card-match .cm-blv.multiroom {
        background-color: transparent;
        overflow: visible
    }

    .card-match .cm-blv.multiroom .blv-name {
        color: #000
    }

    .chat-area .chat-toggle span.small,body.for-mobi .chat-toggle,body.for-mobi .match-stream .is-bottom {
        display: none
    }

    body.for-mobi #exit-lite {
        display: flex!important;
        cursor: pointer;
        font-size: 12px
    }

    body.for-mobi .chat-area .is-header {
        padding: 5px 1rem 5px .5rem;
        background-color: #00000020
    }

    body.for-mobi .chat-area .is-header .z-tabs .nav-link {
        background-color: transparent!important;
        color: #fff!important;
        opacity: .5;
        padding: .3rem .5rem!important
    }

    body.for-mobi .chat-area .is-header .z-tabs .nav-link.active {
        opacity: 1!important
    }

    .chat-area.hide .chat-input {
        display: none
    }

    .chat-area.hide .chat-fluid {
        height: 80px
    }

    .chat-area.hide .chat-fluid .is-mask>div {
        display: none
    }

    .chat-area.hide .chat-fluid .is-mask .btn-xs {
        padding: .7rem 4rem;
        font-size: 14px;
        border-radius: .4rem
    }

    .page-info {
        padding-bottom: 0!important
    }

    .page-info>.container {
        padding: 0
    }

    .page-info>.container .article-content {
        padding: 1rem
    }

    .page-info>.container .zbread {
        padding: 1rem 1rem 0
    }
}

.chat-content {
    overflow-y: auto!important
}

.chat-content::-webkit-scrollbar {
    width: 6px
}

.chat-content::-webkit-scrollbar-thumb {
    background: gray;
    border-radius: 10px
}

.chat-error {
    color: red;
    margin-top: 8px;
    font-size: 13px
}

.msg-time {
    font-size: 11px;
    font-style: italic;
    color: gray
}

.page-chat {
    height: 100vh
}

.page-chat .match-stream {
    height: 100%
}