:root {
    --Primary: #0f2637;
    --Secondary: #09b363;
    --Bg-Light: #f7f7f7;
    --Red: #e8503a;
    --Yellow: #ffda55;
    --Accent-Green: #daf2e3;
    --Accent-Yellow: #ffefb5;
    --Neutral-White: #ffffff;
    --Neutral-Dark: #191919;
    --Neutral-100: #fdfdfd;
    --Neutral-200: #fbfbfb;
    --Neutral-300: #f7f7f7;
    --Neutral-400: #f3f3f3;
    --Neutral-500: #ededed;
    --Neutral-600: #e7e7e7;
    --Neutral-700: #dfdfdf;
    --Neutral-800: #d6d6d6;
    --Neutral-900: #cbcbcb;
    --Neutral-1000: #bebebe;
    --Neutral-1100: #b0b0b0;
    --Neutral-1200: #a0a0a0;
    --Neutral-1300: #8d8d8d;
    --Neutral-1400: #797979;
    --Neutral-1500: #636363;
    --Neutral-1600: #4b4b4b;
    --Neutral-1700: #323232
}

.dark {
    --Bg-Light: #282b2d;
    --Accent-Green: #636363;
    --Neutral-White: #4b4b4b;
    --Neutral-Dark: #ffffff;
    --Neutral-100: #fdfdfd;
    --Neutral-200: #3e3e3e;
    --Neutral-300: #393939;
    --Neutral-400: #858585;
    --Neutral-500: #475156;
    --Neutral-600: #e7e7e7;
    --Neutral-700: #626262;
    --Neutral-800: #575d61;
    --Neutral-900: #cbcbcb;
    --Neutral-1000: #616161;
    --Neutral-1100: #b0b0b0;
    --Neutral-1200: #a0a0a0;
    --Neutral-1300: #b7b7b7;
    --Neutral-1400: #9f9f9f;
    --Neutral-1500: #a2a2a2;
    --Neutral-1600: #4b4b4b;
    --Neutral-1700: #e9eef5
}

:root {
    --gap-2: 2px;
    --gap-3: 3px;
    --gap-4: 4px;
    --gap-6: 6px;
    --gap-8: 8px;
    --gap-10: 10px;
    --gap-12: 12px;
    --gap-16: 16px;
    --gap-18: 18px;
    --gap-20: 18px;
    --gap-24: 24px;
    --gap-26: 26px;
    --gap-28: 28px;
    --gap-30: 30px;
    --fontSize-10: 10px;
    --fontSize-12: 12px;
    --fontSize-14: 14px;
    --fontSize-16: 16px;
    --fontSize-18: 18px;
    --fontSize-20: 20px;
    --fontSize-22: 22px;
    --fontSize-24: 24px
}

.w7m {
    --gap: 24px;
    --padding: 12px;
    --globalRadius: 8px;
    background: var(--Neutral-White, #fff);
    border-radius: var(--globalRadius);
    padding: var(--padding);
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    font-family: var(--font-primary, Inter);
    line-height: 150%
}

@media (width < 768px) {
    .w7m {
        padding: 0
    }
}

.w7m .row_blank {
    width: 100%;
    height: 60px;
    background-color: var(--Neutral-White, #fff);
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--Neutral-Dark, #fff);
    font-size: 14px
}

.w7m .break-word {
    white-space: normal;
    word-break: break-word
}

@media (width < 880px) {
    .w7m {
        --globalRadius: 0;
        padding-left: 0;
        padding-right: 0
    }
}

.w7m-title {
    --fontWeight: 500;
    --lineHeight: 150%;
    color: var(--Neutral-1700, #323232);
    font-weight: var(--fontWeight);
    font-size: var(--fontSize-16);
    line-height: var(--lineHeight)
}

.v7m-datetime:first-letter {
    display: inline-block;
    text-transform: uppercase
}

.w7m-box {
    --padding: 16px;
    border-radius: var(--globalRadius);
    border: 1px solid var(--Neutral-700, #dfdfdf);
    padding: var(--padding)
}

.w7m-box.is_small {
    --padding: 8px
}

.w7m-box.is_medium {
    --padding: 12px
}

.w7m-box.is_large {
    --padding: 24px
}

.w7m-scroll {
    scrollbar-color: var(--Neutral-1100, #323232) transparent;
    scrollbar-width: thin;
    scroll-behavior: smooth
}

.w7m-scroll::-webkit-scrollbar {
    width: 16px
}

.w7m-scroll::-webkit-scrollbar-track {
    background-color: transparent
}

.w7m-scroll::-webkit-scrollbar-thumb {
    background-color: var(--Neutral-1100, #323232);
    border-radius: 10px
}

.w7m-noscrollbar::-webkit-scrollbar {
    display: none
}

.w7m-noscrollbar::-webkit-scrollbar-track {
    display: none
}

.w7m-noscrollbar::-webkit-scrollbar-thumb {
    display: none
}

.w7m-box--note,.w7m_note {
    text-align: center;
    font-style: italic
}

#main {
    display: flex;
    gap: 16px
}

#main #left {
    float: none
}

#main #appHome {
    flex-grow: 1
}

.w7m_loadmore {
    display: flex;
    justify-content: center
}

.w7m_loadmore-btn {
    --radius: 4px;
    --padding: 6px 12px;
    --marginBottom: 0;
    --borderColor: var(--Neutral-600, #e7e7e7);
    --bg: var(--Neutral-300, #f7f7f7);
    --text: var(--Neutral-1400, #797979);
    font-size: var(--fontSize-12);
    border-radius: var(--radius);
    border: 1px solid var(--borderColor);
    background-color: var(--bg);
    color: var(--text);
    padding: var(--padding);
    cursor: pointer;
    margin-bottom: var(--marginBottom);
    text-align: center;
    margin: auto;
    display: flex;
    gap: var(--gap-4);
    align-items: center;
    justify-content: center
}

.w7m_loadmore-btn svg {
    transform: rotate(180deg)
}

.w7m_loadmore-btn:focus {
    border: 1px solid var(--borderColor);
    outline: 0;
    box-shadow: none
}

.dark .w7m_loadmore-btn {
    --borderColor: var(--Neutral-300, #f7f7f7)
}

.w7m_screen {
    height: 100dvh
}

.w7m_info {
    --padding: 16px;
    --gap: 24px;
    background-color: var(--Secondary, #09b363);
    border-radius: var(--globalRadius);
    padding: var(--padding);
    display: flex;
    gap: var(--gap)
}

.w7m_info-avatar {
    --size: 128px;
    --bg: #fff;
    width: var(--size);
    height: var(--size);
    min-width: var(--size);
    min-height: var(--size);
    border-radius: var(--size);
    background-color: var(--bg);
    border: 4px solid var(--Accent-Green, #daf2e3);
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center
}

.w7m_info-avatar img {
    object-fit: cover;
    object-position: center;
    width: 100%;
    height: 100%
}

.w7m_info-description {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-grow: 1;
    gap: var(--gap-16)
}

.w7m_info-title {
    --fontWeight: 500;
    color: var(--Neutral-White, #fff);
    font-size: var(--fontSize-20);
    font-weight: var(--fontWeight)
}

.dark .w7m_info-title {
    color: var(--Neutral-Dark, #fff)
}

.w7m_info-detail {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-4)
}

.w7m_info-detail--tag {
    --bg: rgba(255, 255, 255, .16);
    --radius: 8px;
    --padding: 4px 12px;
    --text: white;
    display: flex;
    justify-content: start;
    align-items: center;
    background-color: var(--bg);
    border-radius: var(--radius);
    padding: var(--padding);
    gap: var(--gap-8);
    color: var(--text)
}

.w7m_info-detail--tag img {
    --size: 18px;
    max-width: 18px
}

.w7m_info-detail--tag a {
    color: var(--Neutral-White, #fff)
}

.w7m_navbar {
    display: flex;
    gap: var(--gap-20)
}

.w7m_navbar .w7m_navbar-item {
    --fontWeight: 400;
    --borderColor: transparent;
    --borderSize: 2px;
    --lineHeight: 150%;
    --padding: 6px 0;
    --text: var(--Neutral-1700, #323232);
    font-size: var(--fontSize-12);
    font-weight: var(--fontWeight);
    border-bottom: var(--borderSize) solid var(--borderColor);
    line-height: var(--lineHeight);
    padding: var(--padding);
    color: var(--text)
}

.w7m_navbar .w7m_navbar-item:hover {
    --text: var(--Neutral-Dark, #191919);
    text-decoration: none
}

.w7m_navbar .w7m_navbar-item--active {
    --borderColor: var(--Secondary, #09b363);
    --text: var(--Neutral-Dark, #191919);
    --fontWeight: 600
}

.w7m-nav {
    display: flex;
    gap: var(--gap-4)
}

.w7m-nav-item {
    --radius: 4px;
    --borderColor: var(--Neutral-800, #575d61);
    --bg: var(--Neutral-White, #4b4b4b);
    --text: var(--Neutral-1700, #323232);
    --padding: 6px 8px;
    --marginBottom: 0;
    border-radius: var(--radius);
    border: 1px solid var(--borderColor);
    background-color: var(--bg);
    color: var(--text);
    padding: var(--padding);
    cursor: pointer;
    margin-bottom: var(--marginBottom);
    text-align: center;
    font-size: 12px
}

.w7m-nav-item.is_active {
    --borderColor: transparent;
    --bg: var(--Secondary, #09b363);
    --text: var(--Neutral-100, #fdfdfd)
}

.w7m-nav-item.is_disabled:not(.is_active) {
    cursor: not-allowed
}

@media (width <= 340px) {
    .w7m-nav-item {
        flex-grow: 1
    }
}

.collapse_box {
    display: flex;
    flex-direction: column
}

.collapse_box-toggle {
    --padding: 8px 10px;
    --rotate: 180deg;
    display: flex;
    align-items: center;
    background: var(--Neutral-500, #ededed);
    border-bottom: 1px solid var(--Neutral-700, #dfdfdf);
    cursor: pointer;
    padding: var(--padding);
    -webkit-user-select: none;
    user-select: none
}

.collapse_box-toggle .collapse_box-toggle--arrow {
    transform: rotate(var(--rotate))
}

.collapse_box-toggle.is_active .collapse_box-toggle--arrow {
    --rotate: 0
}

.collapse_box-toggle--title {
    flex-grow: 1;
    font-weight: 600
}

.collapse_box-toggle--arrow {
    --size: 16px;
    width: var(--size);
    height: var(--size)
}

.w7m_boxicon {
    --padding: 8px;
    border: 1px solid var(--Neutral-700);
    border-radius: var(--globalRadius);
    padding: var(--padding);
    display: flex;
    flex-direction: column;
    justify-content: start
}

.w7m_boxicon-spacing {
    --height: 20px;
    height: var(--height);
    display: block;
    flex-grow: 1
}

.w7m_boxicon-label {
    --text: #797979;
    --fontWeight: 400;
    --lineHeight: 150%;
    color: var(--text);
    font-size: var(--fontSize-12);
    font-weight: var(--fontWeight);
    line-height: var(--lineHeight)
}

.dark .w7m_boxicon-label {
    --text: #9f9f9f
}

.w7m_boxicon-content {
    --fontWeight: 400;
    --lineHeight: 150%;
    color: var(--Neutral-1700, #323232);
    font-size: var(--fontSize-16);
    font-weight: var(--fontWeight);
    line-height: var(--lineHeight)
}

.w7m_boxicon-content.is_truncate {
    max-width: 99%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.dark .w7m_boxicon-content {
    --text: #e9eef5
}

.w7m_boxicon-icon {
    color: var(--Neutral-1700, #323232);
    height: 24px
}

.dark .w7m_boxicon-icon {
    --text: #e9eef5
}

.chartbox {
    --gap: 24px;
    display: flex;
    flex-direction: column;
    gap: var(--gap)
}

.chartbox_content {
    --gap: 48px;
    display: flex;
    gap: var(--gap);
    align-items: center
}

.chartbox_title {
    color: var(--Neutral-1700, #323232);
    font-size: 16px;
    font-weight: 500;
    line-height: 150%
}

.chartbox_content .is_label {
    flex-grow: 1
}

.chartbox_label {
    --gap: 8px;
    display: flex;
    gap: var(--gap)
}

.chartbox_label-color {
    display: flex;
    flex-direction: column;
    justify-content: start
}

.chartbox_label-content {
    --gap: 4px;
    display: flex;
    flex-direction: column;
    gap: var(--gap)
}

.chartbox_label-content--title {
    color: var(--Neutral-1400, #797979);
    font-size: 14px;
    font-weight: 400;
    line-height: 150%
}

.chartbox_label-content--value {
    color: var(--Neutral-1700, #323232);
    font-size: 16px;
    font-weight: 500;
    line-height: 150%
}

.chartbox_label-color--box {
    --size: 12px;
    --radius: 2px;
    --borderColor: var(--Accent-Green, #daf2e3);
    display: block;
    width: var(--size);
    height: var(--size);
    border-radius: var(--radius);
    border: 1px solid var(--borderColor);
    background-color: var(--bg);
    margin-top: 3px
}

.is_win-plus--double .chartbox_label-color--box {
    --bg: #22b064
}

.is_win-plus .chartbox_label-color--box {
    --bg: #4bcc87
}

.is_win-less .chartbox_label-color--box {
    --bg: #80f0b4
}

.is_win .chartbox_label-color--box {
    --bg: #b4eacd
}

.is_draw-plus .chartbox_label-color--box,.is_draw .chartbox_label-color--box {
    --bg: #52b1ff
}

.is_lose-plus .chartbox_label-color--box {
    --bg: #e8503a
}

.is_lose .chartbox_label-color--box {
    --bg: #f5aca1
}

.w7m_sidebar {
    display: flex;
    flex-direction: column;
    border-radius: 8px;
    overflow: hidden;
    background: var(--Neutral-White, #4b4b4b);
    border: 1px solid var(--Accent-Green, #636363);
    margin-bottom: 16px
}

.w7m_sidebar .w7m_sidebar-content {
    display: block;
    overflow-y: hidden;
    height: var(--sidebar-height)
}

.w7m_sidebar .w7m_sidebar-content.w7m_sidebar-animation {
    transition: all .3s linear
}

.w7m_sidebar.sidebar_league .w7m_sidebar-item {
    gap: var(--gap-4)
}

.w7m_sidebar .w7m_sidebar-item {
    padding: 8px 10px;
    color: var(--Neutral-Dark, #191919);
    font-size: 12px;
    font-weight: 400;
    line-height: 150%;
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--gap-8)
}

.w7m_sidebar .w7m_sidebar-item.w7m_sidebar-head {
    background: var(--Primary, #0f2637);
    color: var(--Neutral-100, #fdfdfd);
    font-size: 14px;
    font-weight: 600;
    line-height: 150%
}

.w7m_sidebar .w7m_sidebar-item:not(.w7m_sidebar-head,.w7m_sidebar-showmore):hover {
    z-index: 1;
    border-radius: 4px;
    color: var(--Secondary, #09b363);
    background: var(--Accent-Green, #daf2e3);
    text-decoration: none
}

.w7m_sidebar .w7m_sidebar-item.w7m_sidebar-showmore {
    color: var(--Secondary, #09b363);
    font-size: 12px;
    font-weight: 600;
    line-height: 150%;
    background: var(--Neutral-White, #fff);
    cursor: pointer;
    border-top: 1px solid var(--Accent-Green, #636363);
    -webkit-user-select: none;
    user-select: none
}

.w7m_sidebar .w7m_sidebar-item .w7m_sidebar-logo.is_small img {
    --size: 14px
}

.w7m_sidebar .w7m_sidebar-item .w7m_sidebar-logo img {
    --size: 24px;
    width: var(--size)!important;
    min-width: var(--size)!important;
    height: var(--size);
    max-height: var(--size);
    border: 1px solid var(--Accent-Green, #daf2e3);
    background: #fff;
    overflow: hidden;
    border-radius: var(--size);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center
}

.w7m_sidebar .w7m_sidebar-item .w7m_sidebar-name {
    flex-grow: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.w7m_skeleton {
    --width: var(--width_desktop, 100%);
    --height: var(--height_desktop, 50px);
    --radius: var(--radius_desktop, 8px);
    display: inline-block;
    min-width: var(--width);
    min-height: var(--height);
    border-radius: var(--radius);
    background-color: var(--Neutral-700);
    animation: pulse 2s cubic-bezier(.4,0,.6,1) infinite
}

@keyframes pulse {
    50% {
        opacity: .5
    }
}

@media (width >= 480px) and (width <= 680px) {
    .w7m_skeleton {
        --width: var(--width_tablet, var(--width_desktop));
        --height: var(--height_tablet, var(--height_desktop));
        --radius: var(--radius_tablet, var(--radius_desktop))
    }
}

@media (width < 768px) {
    .w7m_skeleton {
        --width: var(--width_mobile, var(--width_desktop));
        --height: var(--height_mobile, var(--height_desktop));
        --radius: var(--radius_mobile, var(--radius_desktop))
    }
}

.w7m_tooltip[tooltip] {
    position: relative
}

.w7m_tooltip[tooltip]>* {
    display: inline-block
}

.w7m_tooltip[tooltip]:before,.w7m_tooltip[tooltip]:after {
    text-transform: none;
    font-size: .9em;
    line-height: 1;
    -webkit-user-select: none;
    user-select: none;
    pointer-events: none;
    position: absolute;
    display: none;
    opacity: 0
}

.w7m_tooltip[tooltip]:before {
    content: "";
    border: 5px solid transparent;
    z-index: 1001
}

.w7m_tooltip[tooltip]:after {
    content: attr(tooltip);
    text-align: center;
    min-width: 3em;
    max-width: 21em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: .5rem;
    border-radius: .3rem;
    box-shadow: 0 1em 2em -.5em #00000059;
    background: var(--Neutral-Dark);
    color: var(--Neutral-White);
    z-index: 1000
}

.w7m_tooltip[tooltip]:hover:before,.w7m_tooltip[tooltip]:hover:after {
    display: block
}

.w7m_tooltip[tooltip]:not([position]):before,.w7m_tooltip[tooltip][position^=top]:before {
    bottom: 100%;
    border-bottom-width: 0;
    border-top-color: var(--Neutral-Dark)
}

.w7m_tooltip[tooltip]:not([position]):after,.w7m_tooltip[tooltip][position^=top]:after {
    bottom: calc(100% + 5px)
}

.w7m_tooltip[tooltip]:not([position]):before,.w7m_tooltip[tooltip]:not([position]):after,.w7m_tooltip[tooltip][position^=top]:before,.w7m_tooltip[tooltip][position^=top]:after {
    left: 50%;
    transform: translate(-50%,-.5em)
}

.w7m_tooltip[tooltip][position^=bottom]:before {
    top: 105%;
    border-top-width: 0;
    border-bottom-color: var(--Neutral-Dark)
}

.w7m_tooltip[tooltip][position^=bottom]:after {
    top: calc(105% + 5px)
}

.w7m_tooltip[tooltip][position^=bottom]:before,.w7m_tooltip[tooltip][position^=bottom]:after {
    left: 50%;
    transform: translate(-50%,.5em)
}

.w7m_tooltip[tooltip][position^=left]:before {
    top: 50%;
    border-right-width: 0;
    border-left-color: var(--Neutral-Dark);
    left: calc(0em - 5px);
    transform: translate(-.5em,-50%)
}

.w7m_tooltip[tooltip][position^=left]:after {
    top: 50%;
    right: calc(100% + 5px);
    transform: translate(-.5em,-50%)
}

.w7m_tooltip[tooltip][position^=right]:before {
    top: 50%;
    border-left-width: 0;
    border-right-color: var(--Neutral-Dark);
    right: calc(0em - 5px);
    transform: translate(.5em,-50%)
}

.w7m_tooltip[tooltip][position^=right]:after {
    top: 50%;
    left: calc(100% + 5px);
    transform: translate(.5em,-50%)
}

.w7m_tooltip[tooltip]:not([position]):hover:before,.w7m_tooltip[tooltip]:not([position]):hover:after,.w7m_tooltip[tooltip][position^=top]:hover:before,.w7m_tooltip[tooltip][position^=top]:hover:after,.w7m_tooltip[tooltip][position^=bottom]:hover:before,.w7m_tooltip[tooltip][position^=bottom]:hover:after {
    animation: tooltips-vert .3s ease-out forwards
}

.w7m_tooltip[tooltip][position^=left]:hover:before,.w7m_tooltip[tooltip][position^=left]:hover:after,.w7m_tooltip[tooltip][position^=right]:hover:before,.w7m_tooltip[tooltip][position^=right]:hover:after {
    animation: tooltips-horz .3s ease-out forwards
}

.w7m_tooltip[tooltip=""]:before,.w7m_tooltip[tooltip=""]:after {
    display: none!important
}

@keyframes tooltips-vert {
    to {
        opacity: .9;
        transform: translate(-50%)
    }
}

@keyframes tooltips-horz {
    to {
        opacity: .9;
        transform: translateY(-50%)
    }
}

.w7m_radio {
    display: flex;
    align-items: center;
    gap: var(--gap-16);
    cursor: pointer
}

@media (width < 340px) {
    .w7m_radio {
        gap: var(--gap-8)
    }
}

.w7m_radio-dotted {
    display: flex;
    width: 14px;
    height: 14px;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    border: 1px solid var(--Neutral-1000, #bebebe);
    background: var(--Neutral-White, #fff);
    position: relative
}

.w7m_radio-dotted:before {
    content: "";
    width: 4px;
    height: 4px;
    display: block;
    border-radius: 4px;
    visibility: hidden;
    position: relative;
    z-index: 1;
    background-color: #fff
}

.w7m_radio-dotted.is_active {
    border: 1px solid var(--Secondary, #09b363);
    background: var(--Secondary, #09b363)
}

.w7m_radio-dotted.is_active:before {
    visibility: visible
}

.w7m_radio-label {
    color: var(--Neutral-1700, #323232);
    font-size: 14px;
    font-weight: 400
}

.w7m_setting-box {
    display: flex;
    flex-direction: column;
    gap: var(--gap-16)
}

.w7m_setting-box.w7m_setting-time {
    gap: var(--gap-8)
}

.w7m_setting_test {
    width: 456px;
    max-width: 100%;
    padding: 32px;
    gap: 10px;
    border-radius: 8px;
    background: var(--Neutral-200, #fbfbfb);
    box-shadow: 0 0 8px #0005441a;
    margin-bottom: 15px
}

@media (width < 340px) {
    .w7m_setting_test {
        padding: 12px
    }
}

.w7m_setting {
    display: flex;
    flex-direction: column;
    gap: var(--gap-16)
}

.w7m_setting-title {
    color: var(--Neutral-Dark, #191919);
    font-size: 20px;
    font-weight: 500;
    line-height: 150%
}

.w7m_setting-label {
    color: var(--Neutral-1700, #323232);
    font-size: 14px;
    font-weight: 600
}

.w7m_setting-timezone {
    display: flex;
    padding: 8px 12px;
    align-items: center;
    justify-content: space-between;
    border-radius: 4px;
    border: 1px solid var(--Neutral-1000, #bebebe);
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none
}

.w7m_setting-timezone .w7m_setting-collapse {
    transform: rotate(180deg)
}

.w7m_setting-timezone .w7m_setting-collapse.is_collapsed {
    transform: rotate(0)
}

.w7m_dropdown {
    position: relative
}

.w7m_setting-timezone--content {
    position: absolute;
    top: calc(100% + 8px);
    padding: 8px;
    border-radius: 4px;
    background-color: var(--Neutral-200, #fbfbfb);
    box-shadow: 0 12px 32px 4px #0000000a,0 8px 20px #00000014;
    display: grid;
    grid-template-columns: repeat(5,1fr);
    gap: var(--gap-8);
    z-index: 10;
    width: 100%
}

.w7m_setting-timezone--item {
    padding: 6px 12px;
    border-radius: 4px;
    border: 1px solid var(--Neutral-800, #d6d6d6);
    background-color: var(--Neutral-White, #fff);
    color: var(--Neutral-Dark, #191919);
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    text-align: center
}

.w7m_setting-timezone--item:hover:not(.is_active) {
    background-color: var(--Accent-Green, #daf2e3)
}

.w7m_setting-timezone--item.is_active {
    background-color: var(--Secondary, #daf2e3);
    color: #fff
}

@media (width < 340px) {
    .w7m_setting-timezone--item {
        padding: 6px
    }
}

.w7m_setting-sort {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: var(--gap-16)
}

@media (width < 340px) {
    .w7m_setting-sort {
        gap: var(--gap-8)
    }
}

.w7m_setting-rate {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: var(--gap-8)
}

.w7m_setting-rate--item {
    padding: 6px 12px;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    text-align: center;
    border-radius: 4px;
    border: 1px solid var(--Neutral-800, #d6d6d6);
    background: var(--Neutral-White, #fff)
}

.w7m_setting-rate--item:hover:not(.is_active) {
    background-color: var(--Accent-Green, #daf2e3)
}

.w7m_setting-rate--item.is_active {
    border: 1px solid var(--Secondary, #daf2e3);
    background-color: var(--Secondary, #daf2e3);
    color: #fff
}

.w7m_home {
    display: flex;
    flex-direction: column;
    gap: var(--gap-16)
}

.w7m_home-navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--gap-8);
    border-top: 1px solid var(--border-color, transparent);
    border-bottom: 1px solid var(--border-color, transparent)
}

@media (width < 768px) {
    .w7m_home-navbar {
        box-shadow: 0 4px 12px #0000001a
    }
}

.w7m_home-navbar.is_sticky {
    --border-color: var(--Neutral-700, #ededed);
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    background: var(--Neutral-White, #fff);
    z-index: 50;
    padding-top: 8px;
    padding-bottom: 8px
}

.w7m_home-filter--mobile {
    display: none
}

.w7m_home-date,.w7m_home-date--content {
    display: flex;
    align-items: center;
    gap: 4px
}

.w7m_home-date {
    padding: 6px;
    gap: 8px;
    border-radius: 4px;
    border: 1px solid var(--Neutral-800, #d6d6d6);
    background: var(--Neutral-White, #fff);
    color: var(--Neutral-1700, #323232);
    max-width: 148px
}

.w7m_home-date--content {
    cursor: pointer;
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center
}

.w7m_home-date .w7m_home-date--arrow {
    --size: 14px;
    cursor: pointer;
    width: var(--size);
    min-width: var(--size);
    height: var(--size);
    color: var(--Neutral-1000, #bebebe)
}

.w7m_home-date .w7m_home-date--arrow.is_left {
    transform: rotate(-180deg)
}

.w7m_calendar-item span,.w7m_home-date--label {
    font-size: 12px
}

.dark .w7m_home-date .w7m_home-date--arrow {
    color: var(--Neutral-900, #bebebe)
}

.w7m_filter-right {
    display: flex;
    gap: var(--gap-4)
}

@media (width < 768px) {
    .w7m_filter-right {
        width: 100%;
        display: grid;
        gap: var(--gap-4);
        grid-template-columns: repeat(2,minmax(auto,130px)) 1fr
    }
}

.w7m-nav-item.is_hot {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--gap-6)
}

.w7m-nav-item.is_hot .is_hot-ping {
    display: block;
    width: 8px;
    min-width: 8px;
    height: 8px;
    border-radius: 150px;
    background: #f01;
    position: relative
}

.w7m-nav-item.is_hot .is_hot-ping:before {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    left: 0%;
    top: 0%;
    background: #f01;
    animation: ping 1s cubic-bezier(0,0,.2,1) infinite
}

@keyframes ping {
    75%,to {
        opacity: 0;
        transform: scale(2)
    }
}

.w7m_filter-dropdown--toggle {
    display: flex;
    padding: 6px 8px;
    align-items: center;
    justify-content: space-between;
    border-radius: 4px;
    border: 1px solid var(--Neutral-1000, #bebebe);
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    gap: var(--gap-4);
    position: relative;
    overflow: hidden;
    box-sizing: border-box
}

.w7m_filter-dropdown--toggle span {
    text-align: center;
    flex-grow: 1;
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px
}

.w7m_filter-dropdown--toggle span,.w7m_filter-dropdown--toggle .w7m_filter-collapse {
    color: var(--Neutral-1700, #e9eef5)
}

.w7m_filter-dropdown--toggle .w7m_filter-collapse {
    width: 12px;
    transform: rotate(180deg)
}

.w7m_filter-dropdown--toggle .w7m_filter-collapse.is_collapsed {
    transform: rotate(0)
}

.w7m_filter-dropdown--toggle.is_active:before {
    content: "";
    display: block;
    position: absolute;
    border-top: 0 solid transparent;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px var(--Neutral-White, #fff);
    bottom: -8px;
    left: 50%;
    transform: translate(-50%);
    z-index: 10
}

.w7m_filter-dropdown--toggle.is_league_filter {
    min-width: 85px;
    overflow: hidden
}

@media (width < 768px) {
    .w7m_filter-dropdown--toggle.is_league_filter {
        width: 100%
    }
}

.w7m_filter-dropdown--toggle.is_league_filter span {
    display: inline;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.w7m_filter-dropdown--company .w7m_dropdown-toggle {
    min-width: 85px
}

.w7m_filter-dropdown--company .w7m_dropdown-content {
    position: absolute;
    top: calc(100% + 8px);
    border-radius: 4px;
    background: var(--Neutral-White, #fff);
    box-shadow: 0 12px 32px 4px #0000000a,0 8px 20px #00000014;
    display: flex;
    flex-direction: column;
    z-index: 10;
    width: 100%;
    padding: 4px 0
}

.w7m_filter-dropdown--company .w7m_dropdown-content .dropdown_content-company {
    display: flex;
    flex-direction: column
}

.w7m_filter-dropdown--company .w7m_dropdown-content .dropdown_content-company .dropdown_content-company--item {
    padding: 4px 8px;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    text-align: center
}

.w7m_filter-dropdown--company .w7m_dropdown-content .dropdown_content-company .dropdown_content-company--item:not(:last-child) {
    border-bottom: 1px solid var(--Neutral-500, #ffffff)
}

.w7m_filter-dropdown--company .w7m_dropdown-content .dropdown_content-company .dropdown_content-company--item.is_active {
    color: var(--Secondary, #09b363);
    font-weight: 600
}

.w7m_filter-dropdown--content {
    position: absolute;
    top: calc(100% + 8px);
    border-radius: 4px;
    background: var(--Neutral-White, #fff);
    box-shadow: 0 12px 32px 4px #0000000a,0 8px 20px #00000014;
    display: flex;
    flex-direction: column;
    z-index: 10;
    width: 100%;
    min-width: 200px;
    padding: 4px 0
}

.w7m_filter-dropdown--content .is_league_filter {
    max-height: 300px;
    overflow-y: auto
}

.w7m_filter-dropdown--item {
    padding: 8px;
    background: var(--Neutral-White, #fff);
    color: var(--Neutral-Dark, #191919);
    font-size: 14px;
    font-weight: 400;
    line-height: 150%
}

.w7m_filter-dropdown--item.is_active {
    color: var(--Secondary, #09b363);
    background: var(--Accent-Green, #daf2e3);
    font-weight: 600
}

.w7m_filter-dropdown--item.is_league_filter {
    display: flex;
    gap: 8px;
    align-items: center;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none
}

.w7m_filter-dropdown--item.is_league_filter .is_checkbox {
    min-width: 15px;
    height: 15px;
    background-color: transparent;
    border: 1px solid var(--Accent-Green, #daf2e3);
    border-radius: 4px
}

.w7m_filter-dropdown--item.is_league_filter .is_checkbox.is_active {
    background-color: var(--Secondary, #09b363)
}

.w7m_filter-dropdown--item.is_league_filter span:not(.is_checkbox) {
    font-size: 12px
}

.w7m_filter-dropdown--item.is_league_filter.is_control {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.w7m_filter-dropdown--item.is_league_filter.is_control .w7m_filter-dropdown--btn {
    border: 1px solid var(--Neutral-800, #575d61);
    border-radius: 4px;
    font-size: 12px;
    padding: 2px 8px;
    flex: 1;
    text-align: center
}

.w7m_filter-dropdown--item.is_league_filter.is_control .w7m_filter-dropdown--btn:hover {
    background-color: #daf2e3
}

.w7m_filter-dropdown--item.is_league_filter.is_search input {
    border: 1px solid var(--Neutral-800, #575d61);
    padding: 8px;
    border-radius: 4px;
    width: 100%;
    min-width: none;
    font-size: 12px
}

.w7m_filter-dropdown--item.is_league_filter.is_search input:focus {
    outline: none;
    box-shadow: none;
    border-color: var(--Secondary, #09b363)
}

@media (width < 880px) {
    .w7m_home-navbar {
        display: flex;
        flex-direction: column;
        justify-content: start;
        align-items: start
    }

    .w7m_home-filter {
        display: flex;
        width: 100%
    }

    .w7m_home-filter .w7m-nav-item {
        flex-grow: 1
    }

    .w7m_home-date,.w7m_home-date--content {
        gap: var(--gap-4)
    }

    .w7m_home-navbar--fav {
        display: block
    }

    .w7m_home-navbar--fav .w7m_home-filter {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(3,1fr)
    }
}

.w7m_table {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--Neutral-700, #ededed)
}

.w7m_table.is_skeleton {
    border: 0
}

.w7m_table-tr {
    display: grid;
    padding: 9px 10px
}

.w7m_table-tr:not(.is_head,:last-child) {
    border-bottom: 1px solid var(--Neutral-700, #ededed)
}

@media (width < 880px) {
    .dark .w7m_table {
        border: 0
    }

    .dark .w7m_table-tr.is_head,.dark .w7m_table-tr.is_head-odd {
        border-bottom: 1px solid #626262;
        background: #282b2d
    }
}

.w7m_table-border:not(:last-child) {
    border-bottom: 1px solid var(--Neutral-700, #ededed)
}

.dark .w7m_table-border:not(:last-child) {
    border-bottom: 1px solid var(--Neutral-700, #ededed)
}

.w7m_table-tr.is_head,.w7m_table-tr.is_head-odd {
    border-bottom: 1px solid var(--Neutral-700, #dfdfdf);
    background: var(--Neutral-500, #ededed);
    color: var(--Neutral-Dark, #191919);
    font-size: var(--fontSize-12);
    font-weight: 400
}

.w7m_table-tr.is_head {
    grid-template-columns: 22px 1fr minmax(104px,152px) 24px
}

.w7m_table-tr.is_league_collapse {
    border-bottom: 0
}

.w7m_table-tr.is_head-odd {
    grid-template-columns: 22px 1fr 188px 50px
}

.w7m_table-tr.is_head .is_favourite {
    color: var(--Neutral-1600, #4b4b4b);
    cursor: pointer
}

.w7m_table-tr:not(.is_head,.is_thead):hover {
    background: var(--Accent-Green, #daf2e3)
}

.w7m_table-tr.is_thead {
    grid-template-columns: 64px 1fr 30px 30px 40px 370px 50px 24px;
    background-color: #0f2637;
    color: #fdfdfd
}

.w7m_table-tr.is_thead.is-clean-mode {
    grid-template-columns: 64px 1fr 30px 30px 40px 70px 24px
}

.w7m_table-tr.is_thead .w7m_table-item {
    font-weight: 700;
    font-size: 12px
}

.w7m_table-tr.is_thead .is_center {
    text-align: center
}

.w7m_table-tr.is_thead .is_icon svg {
    width: 16px;
    display: flex;
    align-items: center
}

.w7m_table-tr.is_thead .is_icon .flag_corner {
    margin-left: 15px
}

.w7m_table-tr.is_thead .is_icon .flag_corner path:nth-child(3) {
    fill: #fff
}

.w7m_table-tr.is_thead .head_oddshow {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 4px;
    padding-right: 10px;
    text-align: center
}

@media (width < 880px) {
    .w7m_table-tr.is_thead {
        grid-template-columns: 1fr 24px
    }

    .w7m_table-tr.is_thead .w7m_table-item:not(:last-child,:nth-child(2)) {
        display: none
    }
}

.w7m_table-tr .w7m_table-odds--row {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 1px;
    padding-right: 20px
}

.w7m_table-tr .w7m_table-odds--row .w7m_table-odds--col {
    display: grid;
    grid-template-rows: repeat(2,1fr);
    gap: 1px
}

.w7m_table-tr .w7m_table-odds--row .odd-cols {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    text-align: center
}

.w7m_table-tr .w7m_table-odds--row .odd-cols .odd-cols--full {
    grid-column: 1/-1
}

.w7m_table-tr.is_thead .w7m_table-item:nth-child(3) {
    text-align: center
}

.w7m_table-tr.is_thead .w7m_table-item:last-child {
    text-align: right
}

.w7m_table-tr.is_thead .w7m_table-item .is_league-collapse {
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none
}

.w7m_table-tr.is_thead .w7m_table-item .is_league-collapse.is_active {
    transform: rotate(180deg)
}

.w7m_table-tr .w7m_table-item {
    align-content: center
}

.w7m_table-tr .w7m_table-item .is_spacing {
    flex-grow: 1
}

.w7m_table-item.is_favourite {
    color: var(--Neutral-1700, #4b4b4b);
    cursor: pointer
}

.w7m_table-item.is_favourite.is_active {
    color: var(--Yellow, #ffda55)
}

.w7m_table-item.is_favourite.is_active svg {
    color: var(--Yellow, #ffda55)
}

.w7m_table-item.is_favourite svg {
    color: var(--Neutral-1700, #4b4b4b);
    --size: 14px;
    width: var(--size);
    height: var(--size);
    display: flex;
    align-items: center
}

.w7m_table-item.is_nodata {
    text-align: center;
    font-style: italic
}

.w7m_table-item.is_collapse {
    display: flex;
    align-items: center;
    justify-content: end
}

.w7m_table-item.is_collapse .is_league-collapse {
    --size: 16px;
    width: var(--size);
    height: var(--size);
    display: flex;
    align-items: center;
    cursor: pointer
}

.w7m_table-item.is_collapse .is_league-collapse.is_active {
    transform: rotate(180deg)
}

.is_head .is_league {
    display: flex;
    align-items: center;
    gap: var(--gap-8)
}

.is_head .is_league .is_league-flag {
    width: 22px;
    height: 22px;
    overflow: hidden;
    display: flex;
    align-items: center
}

.is_head .is_league .is_league-flag img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center
}

.is_head .is_league .is_league-name {
    font-weight: 600
}

.is_league-detail {
    display: flex;
    align-items: center;
    justify-content: end
}

.is_league-detail .is_league-detail--list,.is_league-detail .is_league-detail--collapsed {
    display: flex;
    align-items: center;
    gap: var(--gap-3)
}

.is_league-detail .is_league-detail--collapsed {
    gap: var(--gap-4);
    cursor: pointer
}

.is_league-detail .is_league-detail--counter {
    display: flex;
    min-width: 22px;
    height: 22px;
    padding: 6px 4px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 4px;
    background: var(--Neutral-800, #d6d6d6)
}

.is_league-detail .is_league-detail--counter.is_league-detail--counter--live {
    background: var(--Secondary, #09b363);
    color: var(--Neutral-100, #fdfdfd)
}

.is_league-detail .is_league-detail--collapsed .is_league-detail--label {
    white-space: nowrap
}

.w7m_table-tr.is_match {
    grid-template-columns: 64px 1fr 30px 30px 50px 350px 60px 24px
}

.w7m_table-tr.is_match.is-clean-mode {
    grid-template-columns: 64px 1fr 30px 30px 50px 60px 24px
}

.w7m_table-item.is_time,.is_team-detail--mobile .is_time--mobile {
    color: var(--Neutral-1700, #323232);
    font-size: 12px;
    font-weight: 400;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center
}

.w7m_table-item.is_time.is_live span,.is_team-detail--mobile .is_time--mobile.is_live span {
    color: var(--Secondary, #09b363);
    font-size: 12px;
    font-weight: 600
}

.w7m_table-item.is_time.is_live span.is_time-animation,.is_team-detail--mobile .is_time--mobile.is_live span.is_time-animation {
    animation: live .7s cubic-bezier(0,0,.2,1) infinite
}

@keyframes live {
    80%,to {
        opacity: 0
    }
}

.w7m_table-item.is_team {
    display: flex;
    flex-direction: column;
    gap: var(--gap-10)
}

.w7m_table-item.is_team .is_team-detail {
    display: flex;
    align-items: center;
    gap: var(--gap-8)
}

.w7m_table-item.is_team .is_team-detail .is_team-detail--logo {
    width: 16px;
    height: 16px;
    overflow: hidden;
    display: flex;
    align-items: center
}

.w7m_table-item.is_team .is_team-detail .is_team-detail--logo a {
    display: flex;
    align-items: center;
    justify-content: center
}

.w7m_table-item.is_team .is_team-detail .is_team-detail--logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center
}

.w7m_table-item.is_team .is_team-detail .is_team-detail--name {
    color: var(--Neutral-Dark, #191919);
    font-size: 12px;
    font-weight: 400;
    line-height: 150%;
    max-width: 110px
}

.w7m_table-item.is_team .is_team-detail .is_team-detail--name a {
    display: block;
    overflow: hidden;
    max-width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis
}

.w7m_table-item.is_team .is_team-detail--mobile {
    display: none
}

.w7m_table-item.is_score {
    display: flex;
    flex-direction: column;
    gap: var(--gap-10);
    text-align: center;
    justify-content: center
}

.w7m_table-item.is_score.is_live span {
    color: var(--Secondary, #09b363)
}

.w7m_table-item.is_score span {
    color: var(--Neutral-Dark, #191919);
    font-size: var(--fontSize-16);
    font-weight: 500
}

.w7m_table-item.is_score.is_half span {
    color: var(--Neutral-1500, #636363);
    font-size: var(--fontSize-12);
    font-weight: 400;
    text-align: center
}

.w7m_table-item.is_corner {
    display: flex;
    flex-direction: column;
    gap: var(--gap-10);
    padding-left: 10px;
    justify-content: center
}

.w7m_table-item.is_corner .is_corner-detail {
    gap: var(--gap-4);
    display: flex;
    align-items: center
}

.w7m_table-item.is_corner .is_corner-detail .is_corner-detail--flag {
    width: 14px;
    height: 14px
}

.w7m_table-item.is_livescore {
    padding-left: 12px;
    border-left: 1px solid var(--Neutral-700, #dfdfdf);
    display: flex;
    align-items: center;
    justify-content: start
}

.w7m_table-item.is_livescore a {
    display: flex;
    flex-direction: column;
    justify-content: center
}

.w7m_table-item.is_favourite-match {
    display: flex;
    align-items: center;
    justify-content: end;
    padding-right: 10px
}

.w7m_table-tr.is_match-odd {
    grid-template-columns: 64px 1fr 30px 188px 50px
}

.w7m_table-tr.is_head .w7m_table-item.is_showodd {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 4px
}

@media (width > 680px) {
    .w7m_table-item.is_showodd {
        padding-right: 10px
    }
}

.w7m_table-item.is_showodd .is_showodd--label {
    display: none
}

.w7m_table-item.is_showodd .is_showodd--content {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 4px
}

.w7m_table-item.is_showodd .is_showodd-label {
    text-align: center;
    color: var(--Neutral-Dark, #191919);
    font-size: 12px;
    font-weight: 600
}

.w7m_table-item.is_showodd .is_showodd-item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px 0;
    color: var(--Neutral-Dark, #191919);
    font-size: 12px;
    font-weight: 400
}

.w7m_table-item.is_showodd .is_showodd-item.is_showodd-bind {
    border-radius: 4px;
    border: 1px solid var(--Neutral-700, #dfdfdf);
    background: var(--Neutral-White, #fff)
}

.w7m_table-item.is_showodd .is_showodd-item .odd_bind-item {
    display: inline-flex;
    align-items: center;
    justify-content: center
}

.w7m_table-item.is_showodd .is_showodd-item.is_up .odd_bind-item {
    color: #09b363;
    transform: rotate(0)
}

.w7m_table-item.is_showodd .is_showodd-item.is_down .odd_bind-item {
    color: #e8503a;
    transform: rotate(180deg)
}

.w7m_table-item.is_showodd .is_showodd-item.is_draw .is_arrow {
    display: none
}

.w7m_table-item.is_showodd .is_showodd-item.is_up_bind {
    animation: oddUp 1.5s forwards
}

.w7m_table-item.is_showodd .is_showodd-item.is_up_bind .odd_bind-item {
    animation: oddUpRun .5s .5s ease 5
}

.w7m_table-item.is_showodd .is_showodd-item.is_down_bind {
    animation: oddDown 1.5s forwards
}

.w7m_table-item.is_showodd .is_showodd-item.is_down_bind .odd_bind-item {
    animation: oddDownRun .5s .5s ease 5
}

.w7m_table-item.is_showodd .is_showodd-item.is_up {
    background-color: #c9ffe9
}

.w7m_table-item.is_showodd .is_showodd-item.is_draw {
    background-color: #fff5e7
}

.w7m_table-item.is_showodd .is_showodd-item.is_down {
    background-color: #ffdbd8
}

@keyframes oddUpRun {
    0% {
        transform: rotate(0) translateY(2px)
    }

    to {
        transform: rotate(0) translateY(-2px)
    }
}

@keyframes oddDownRun {
    0% {
        transform: rotate(180deg) translateY(2px)
    }

    to {
        transform: rotate(180deg) translateY(-2px)
    }
}

@keyframes oddUp {
    0% {
        background-color: #09b363
    }

    to {
        background-color: #c9ffe9
    }
}

@keyframes oddDown {
    0% {
        background-color: #e8503a
    }

    to {
        background-color: #ffdbd8
    }
}

.w7m_table-item.is_showodd.is_ah .is_showodd--content {
    grid-template-columns: repeat(2,1fr)
}

.w7m_table-item.is_showodd.is_ah .is_showodd-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 3px;
    padding-right: 2px
}

.w7m_table-item.is_showodd.is_ah .is_showodd-item .is_showodd-left {
    color: var(--Secondary, #09b363)
}

.w7m_table-item.is_showodd.is_ah .is_showodd-right {
    display: flex;
    align-items: center;
    gap: 3px
}

.w7m_table-tr.is_match .w7m_table-item.is_team>.is_team-detail--mobile {
    display: none
}

.dark .w7m_table-item.is_showodd .is_showodd-item:is(.is_up,.is_down,.is_draw) {
    color: var(--Neutral-White, #191919)
}

.is_corner-detail-mobile {
    display: none
}

.is_odd-group {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 14px
}

.is_odd-group .is_odd-col {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 7px;
    font-size: 12px
}

@media (width < 880px) {
    .w7m_table-tr.is_head {
        grid-template-columns: 22px 1fr 50px 24px
    }

    .w7m_table-tr:is(.is_match,.is_match-odd) {
        position: relative;
        display: flex;
        flex-wrap: wrap;
        align-items: center
    }

    .w7m_table-tr:is(.is_match,.is_match-odd) .w7m_table-item {
        order: 2
    }

    .w7m_table-tr:is(.is_match,.is_match-odd) .w7m_table-item:not(.is_favourite,.is_livescore,.is_team,.is_showodd) {
        display: none
    }

    .w7m_table-tr:is(.is_match,.is_match-odd) .w7m_table-item.is_favourite {
        width: 50%;
        order: 0;
        display: flex;
        align-items: center;
        justify-content: start;
        position: absolute;
        top: 8px;
        left: 10px
    }

    .w7m_table-tr:is(.is_match,.is_match-odd) .w7m_table-item.is_livescore {
        width: 50%;
        order: 1;
        display: flex!important;
        align-items: center;
        justify-content: end;
        border-left: 0;
        position: absolute;
        top: 8px;
        right: 8px
    }

    .w7m_table-tr:is(.is_match,.is_match-odd) .w7m_table-item.is_team {
        display: grid;
        grid-template-columns: 1fr 60px 1fr;
        width: 100%
    }

    .w7m_table-tr:is(.is_match,.is_match-odd) .w7m_table-item.is_team>.is_team-detail--mobile {
        display: flex;
        flex-direction: column;
        align-items: center;
        background: var(--Neutral-300, #f7f7f7);
        padding: 12px 10px
    }

    .w7m_table-tr:is(.is_match,.is_match-odd) .w7m_table-item.is_team .is_team-detail {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: var(--gap-3);
        overflow: hidden
    }

    .w7m_table-tr:is(.is_match,.is_match-odd) .w7m_table-item.is_team .is_team-detail .is_team-detail--logo {
        width: 24px;
        height: 24px
    }

    .w7m_table-tr:is(.is_match,.is_match-odd) .w7m_table-item.is_team .is_team-detail .is_team-detail--logo a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px
    }

    .w7m_table-tr:is(.is_match,.is_match-odd) .w7m_table-item.is_team .is_team-detail .is_team-detail--logo img {
        width: 24px;
        height: 24px;
        object-fit: cover;
        object-position: center
    }

    .w7m_table-tr:is(.is_match,.is_match-odd) .w7m_table-item.is_team .is_team-detail:first-child {
        align-items: end
    }

    .w7m_table-tr:is(.is_match,.is_match-odd) .w7m_table-item.is_team .is_team-detail:first-child .is_team-detail--name {
        text-align: right
    }

    .w7m_table-tr:is(.is_match,.is_match-odd) .w7m_table-item.is_team .is_team-detail:last-child {
        align-items: start
    }

    .w7m_table-tr:is(.is_match,.is_match-odd) .w7m_table-item.is_team .is_team-detail .is_team-detail--name>* {
        display: block;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap
    }

    .w7m_table-tr:is(.is_match,.is_match-odd) .w7m_table-item.is_team .is_team-detail .is_corner-detail-mobile {
        display: flex;
        align-items: center;
        gap: var(--gap-4)
    }

    .w7m_table-tr:is(.is_match,.is_match-odd) .w7m_table-item.is_team .is_team-detail .is_corner-detail-mobile .is_corner-detail--flag {
        width: 10px;
        height: 10px
    }

    .w7m_table-tr:is(.is_match,.is_match-odd) .w7m_table-item.is_team .is_team-detail .is_corner-detail-mobile span {
        font-size: 10px;
        font-weight: 400;
        color: var(--Neutral-1500, #636363);
        text-align: center
    }

    .w7m_table-tr:is(.is_match,.is_match-odd) .w7m_table-item.is_team .is_team-detail .is_team-detail--name {
        font-size: 10px;
        font-weight: 600;
        line-height: 150%;
        max-width: 100%
    }

    .is_team-detail--mobile .is_time--mobile.is_live span {
        font-size: var(--fontSize-10)
    }

    .is_team-detail--mobile .is_score--mobile {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 6px 1fr
    }

    .is_team-detail--mobile .is_score--mobile span {
        color: var(--Neutral-Dark, #191919);
        font-size: 12px;
        font-weight: 600;
        line-height: 150%;
        text-align: center
    }

    .is_team-detail--mobile .is_score--mobile.is_live span {
        color: var(--Secondary, #09b363)
    }

    .is_team-detail--mobile .is_half--mobile {
        display: grid;
        grid-template-columns: repeat(2,1fr);
        text-align: center;
        width: 100%
    }

    .is_team-detail--mobile .is_half--mobile span {
        color: var(--Neutral-1500, #636363);
        text-align: center;
        font-size: 10px;
        font-weight: 400;
        line-height: 150%
    }

    .w7m_table-item.is_showodd {
        display: grid;
        grid-template-columns: 60px 1fr;
        margin-top: 6px;
        width: 100%
    }

    .w7m_table-item.is_showodd .is_showodd--label {
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--Neutral-Dark, #191919);
        text-align: center;
        font-size: 12px;
        font-weight: 600;
        line-height: 150%
    }

    .is_league-detail--label {
        display: none
    }

    .w7m_table-tr.is_match-odd .w7m_table-item.is_showodd {
        width: 100%;
        order: 3
    }

    .w7m_table-item.is_league-detail {
        display: flex!important
    }

    .w7m_table-tr.is_head .w7m_table-item.is_showodd {
        display: none!important
    }

    .w7m_table-item.is_odd-group {
        grid-template-columns: 1fr;
        gap: 10px
    }

    .w7m_table-item.is_odd-group .is_odd-col {
        grid-template-columns: 40px repeat(3,1fr)
    }
}

.w7m_calendar {
    position: absolute;
    min-width: 300px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    border-radius: 4px;
    border: 1px solid var(--Neutral-500, #ededed);
    background-color: var(--Neutral-White, #fff);
    box-shadow: 0 12px 32px 4px #0000000a,0 8px 20px #00000014;
    display: grid;
    grid-template-columns: repeat(7,1fr);
    gap: var(--gap-8);
    right: 0;
    z-index: 10;
    padding: 8px;
    bottom: -8px;
    transform: translate(-50%,100%);
    max-width: 100dvw;
    left: 50%
}

@media (width < 768px) {
    .w7m_calendar {
        left: 0;
        transform: translateY(100%);
        min-height: 250px
    }
}

.w7m_calendar-item {
    text-align: center
}

.w7m_calendar-item:not(.is_active,.is_disabled) {
    cursor: pointer
}

.w7m_calendar-item:not(.is_active,.is_disabled):hover span {
    background-color: var(--Neutral-500, #797979)
}

.w7m_calendar-item.is_disabled {
    color: var(--Neutral-1400, #797979);
    cursor: not-allowed
}

.w7m_calendar-item.is_today:not(.is_active) span {
    background: var(--Accent-Green, #daf2e3)
}

.w7m_calendar-item.is_active span {
    background-color: var(--Secondary, #09b363);
    color: #fff
}

.w7m_calendar-item span {
    display: inline-flex;
    width: 30px;
    height: 30px;
    align-items: center;
    justify-content: center;
    border-radius: 30px;
    overflow: hidden
}