@font-face {
    font-family: 'swiper-icons';
    src: d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj;
    font-weight:400;
    font-style: normal
}

:root {
    --white: #fff;
    --gray3: #f9f9f9;
    --gray5: #f5f5f5;
    --gray10: #f0f0f0;
    --gray20: #eaeaea;
    --gray30: #e5e5e5;
    --gray40: #dadada;
    --gray45: #d0d0d0;
    --gray50: #999;
    --gray60: #666;
    --gray65: #555;
    --gray70: #444;
    --gray80: #333;
    --gray90: #222;
    --gray95: #151515;
    --black: #000;
    --black85: rgba(0,0,0,.85);
    --black60: rgba(0,0,0,.6);
    --black50: rgba(0,0,0,.5);
    --black40: rgba(0,0,0,.4);
    --black30: rgba(0,0,0,.3);
    --black20: rgba(0,0,0,.2);
    --black15: rgba(0,0,0,.15);
    --black05: rgba(0,0,0,.05);
    --white85: rgba(255,255,255,.85);
    --white70: rgba(255,255,255,.7);
    --white60: rgba(255,255,255,.6);
    --white45: rgba(255,255,255,.45);
    --white30: rgba(255,255,255,.3);
    --white20: rgba(255,255,255,.2);
    --white10: rgba(255,255,255,.1);
    --primary-color: #307b06;
    --second-color: #226204;
    --thirdly-color: #f60;
    --red20: #ec7979;
    --red40: #d64444;
    --red60: #be0000;
    --blue10: #e7eef8;
    --blue40: #0076e3;
    --blue60: #0057a6;
    --green40: #0d9f1c;
    --yellow20: #fffae0;
    --yellow30: #fff6d1;
    --yellow60: #ffc700;
    --redbg: #ffe8e8;
    --greenbg: #e5ffd9;
    --goalbg: #ffe99c;
    --home_team: #de682f;
    --away_team: #2495da;
    --table_header: var(--gray10);
    --table_highlight: var(--gray5);
    --down: red;
    --up: green;
    --body-bg: var(--gray30);
    --footer-bg: var(--gray65);
    --white-bg: var(--white);
    --bgcolor-1: var(--white);
    --bgcolor-2: var(--gray5);
    --bgcolor-3: var(--gray30);
    --bgcolor-4: var(--gray40);
    --text-white: var(--white);
    --textcolor-1: var(--gray90);
    --textcolor-2: var(--gray60);
    --textcolor-3: var(--gray50);
    --textcolor-4: var(--gray40);
    --border-1: var(--white);
    --border-2: var(--gray10);
    --border-3: var(--gray30);
    --border-4: var(--gray45);
}

body {
    background-color: #D7DFE6;
}

.swiper {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    overflow: hidden;
    list-style: none;
    padding: 0;
    z-index: 1
}

.swiper-vertical>.swiper-wrapper {
    flex-direction: column
}

.swiper-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: flex;
    transition-property: transform;
    box-sizing: content-box
}

.swiper-android .swiper-slide,
.swiper-wrapper {
    transform: translate3d(0, 0, 0)
}

.swiper-pointer-events {
    touch-action: pan-y
}

.swiper-pointer-events.swiper-vertical {
    touch-action: pan-x
}

.swiper-slide {
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    position: relative;
    transition-property: transform
}

.swiper-slide-invisible-blank {
    visibility: hidden
}

.swiper-autoheight,
.swiper-autoheight .swiper-slide {
    height: auto
}

.swiper-autoheight .swiper-wrapper {
    align-items: flex-start;
    transition-property: transform, height
}

.swiper-3d,
.swiper-3d.swiper-css-mode .swiper-wrapper {
    perspective: 1200px
}

.swiper-3d .swiper-wrapper,
.swiper-3d .swiper-slide,
.swiper-3d .swiper-slide-shadow,
.swiper-3d .swiper-slide-shadow-left,
.swiper-3d .swiper-slide-shadow-right,
.swiper-3d .swiper-slide-shadow-top,
.swiper-3d .swiper-slide-shadow-bottom,
.swiper-3d .swiper-cube-shadow {
    transform-style: preserve-3d
}

.swiper-3d .swiper-slide-shadow,
.swiper-3d .swiper-slide-shadow-left,
.swiper-3d .swiper-slide-shadow-right,
.swiper-3d .swiper-slide-shadow-top,
.swiper-3d .swiper-slide-shadow-bottom {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10
}

.swiper-3d .swiper-slide-shadow {
    background: rgba(0, 0, 0, .15)
}

.swiper-3d .swiper-slide-shadow-left {
    background-image: linear-gradient(to left, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))
}

.swiper-3d .swiper-slide-shadow-right {
    background-image: linear-gradient(to right, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))
}

.swiper-3d .swiper-slide-shadow-top {
    background-image: linear-gradient(to top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))
}

.swiper-3d .swiper-slide-shadow-bottom {
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))
}

.swiper-css-mode>.swiper-wrapper {
    overflow: auto;
    scrollbar-width: none;
    -ms-overflow-style: none
}

.swiper-css-mode>.swiper-wrapper::-webkit-scrollbar {
    display: none
}

.swiper-css-mode>.swiper-wrapper>.swiper-slide {
    scroll-snap-align: start start
}

.swiper-horizontal.swiper-css-mode>.swiper-wrapper {
    scroll-snap-type: x mandatory
}

.swiper-vertical.swiper-css-mode>.swiper-wrapper {
    scroll-snap-type: y mandatory
}

.swiper-centered>.swiper-wrapper::before {
    content: '';
    flex-shrink: 0;
    order: 9999
}

.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child {
    margin-inline-start: var(--swiper-centered-offset-before)
}

.swiper-centered.swiper-horizontal>.swiper-wrapper::before {
    height: 100%;
    min-height: 1px;
    width: var(--swiper-centered-offset-after)
}

.swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child {
    margin-block-start: var(--swiper-centered-offset-before)
}

.swiper-centered.swiper-vertical>.swiper-wrapper::before {
    width: 100%;
    min-width: 1px;
    height: var(--swiper-centered-offset-after)
}

.swiper-centered>.swiper-wrapper>.swiper-slide {
    scroll-snap-align: center center
}

.hotlist {
    /* background: var(--primary-color) url(../images/euroBG.png) no-repeat top left; */
    background-size: 100%;
    width: 100%;
    margin-bottom: 8px;
    border-radius: 7px;
    border: 1px solid rgba(255, 255, 255, 0.00);
    background: linear-gradient(182deg, rgba(255, 255, 255, 0.00) 1.84%, #FFF 40.8%, #FFF 98.04%);
}

.hotlist h2 {
    height: 40px;
    line-height: 22px;
    padding: 12px 15px;
    color: var(--text-white)
}

.hotlist .wrapper {
    display: flex;
}

.hotlist .wrapper .logo {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 20px;
    width: 70px;
}

.hotlist .mainlist {
    position: relative;
    height: 155px;
    float: left;
    width: 1060px;
    overflow: hidden
}

.hotlist .sche-cards {
    position: absolute;
    width: 88%;
    left: 33px;
    overflow: hidden
}

.hotlist .mainlist ul {
    overflow: hidden;
    position: relative
}

.hotlist .split1 {
    position: relative;
    display: block;
    float: left;
    width: 260px;
    height: 130px;
    margin: 12px 5px;
    border-radius: 12px;
    border: 1px solid #E1E1E1;
    background: linear-gradient(180deg, var(--white) 0%, #EFF0F1 100%);
}

.hotlist .split1 .line {
    height: 1px;
    background: linear-gradient(90deg, #FFF 0%, #E2E2E2 49.53%, #FFF 100%);
}

.hotlist .split1 .title {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 12px 0 16px 0;
    background-color: linear-gradient(0deg, #E1E1E1 25.51%, #FFF 82.14%);
}

.hotlist .split1 .group {
    color: #252A31;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: 18px;
}

.hotlist .split1 .title .fc-item {
    line-height: 30px;
    font-size: 12px;
    color: #999;
    text-align: center
}

.hotlist .split1 .title .dot {
    width: 4px;
    height: 4px;
    margin: 0 8px;
    border-radius: 10px;
    background: #DD2A40;
}

.hotlist .split1 .title .time {
    color: #DD2A40;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: 18px;
}

.hotlist .split1 .fc-item .ash {
    color: #999;
    padding-left: 6px
}

.hotlist .hotother {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    border-radius: 0 0 10px 10px;
    text-align: center;
    line-height: 24px;
    color: #54565A;
    height: 36px;
}

.hotlist .hotother .wrapper-item {
    display: flex;
    flex: 1;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.hotlist .hotother .wrapper-item .fc-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.hotlist .hotother .wrapper-item .fc-item span {
   font-size: 11px;
   font-style: normal;
   font-weight: 600;
   line-height: 18px;
}

.hotlist .hotother .wrapper-item .fc-item:not(:last-child) {
    border-right: 1px solid #ddd;
}

/* .hotlist .hotother:hover, */
.hotlist .mainlist .Schedule:hover,
.hotlist .Lbtn:hover,
.hotlist .Rbtn:hover {
    background: #009B3C
}

.hotlist .hotother span {
    margin: 0 12px;
    position: relative;
    font-size: 12px;
    color: var(--textcolor-2);
    cursor: pointer
}

.hotlist .hotother span:last-child::after {
    background: none !important
}

.hotlist .hotother span:last-child {
    cursor: context-menu
}

.hotlist .hotother .wrapper-item .fc-item .analysis:hover,
.hotlist .hotother .wrapper-item .fc-item .detail:hover,
.hotlist .tips:hover {
    color: #cb6f2d
}

.hotlist .hotother .tips {
    cursor: pointer !important
}

.hotlist .analysis:after {
    content: "";
    position: absolute;
    background: #ddd;
    width: 1px;
    height: 100%;
    right: -10px;
    top: 2px
}

.hotlist .tips::before {
    content: "";
    position: absolute;
    background: #ddd;
    width: 1px;
    height: 12px;
    left: -10px;
    top: 2px
}

.hotlist .mainlist .Schedule {
    position: absolute;
    display: flex;
    width: 24px;
    height: 110px;
    background: #009B3C;
    color: var(--white);
    text-align: center;
    padding: 10px;
    cursor: pointer;
    right: 10px;
    margin: 12px 0;
    border-radius: 4px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 999;
}

.hotlist .Schedule i {
    color: var(--white);
    font-size: 20px;
    width: 18px;
    height: 19px;
    margin: 5px;
    display: inline-block
}

.hotlist .matchBox {
    display: flex;
    align-items: center;
    background: none;
    border-top: 0;
    padding: 0 10px
}

.hotlist .matchBox .circle {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 26px;
   min-width: 26px;
   height: 26px;
   border-radius: 50%;
   background-color: #00AA42;
   margin: 0 10px;
   margin: 6px 10px 12px 10px;
}

.hotlist .matchBox .team {
    display: flex;
    align-items: center;
    margin: 6px 0 12px 0;
    width: 100%;
    min-height: 20px;
    color: var(--textcolor-1);
    overflow: hidden;
    cursor: pointer
}

/* .hotlist .matchBox .icon {
    width: 32px;
    height: 20px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto;
    float: left;
    border: 1px solid #efefef
} */

.hotlist .matchBox .team.left {
    justify-content: end;
}

.hotlist .matchBox .team .team-1>span,
.hotlist .matchBox .team .team-2>span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 10px;
    font-style: normal;
    font-weight: 700;
    line-height: 18px;
}

.hotlist .matchBox .home-team {
    margin-right: 10px;
}

.hotlist .matchBox .guest-team {
    margin-left: 10px;
}

.hotlist .matchBox .home-team,
.hotlist .matchBox .guest-team {
    width: 138px
}

.hotlist .matchBox .team .score {
    float: right;
    color: #06f;
    font-weight: bold
}

.hotlist .matchBox .state {
    position: absolute;
    height: 69px;
    line-height: 69px;
    min-width: 50px;
    top: 30px;
    right: 10px;
    text-align: center;
    font-weight: bold;
    font-size: 14px;
    color: #06f
}

.hotlist .Lbtn,
.hotlist .Rbtn {
    background: #009B3C;
    width: 18px;
    height: 130px;
    border-radius: 6px;
    position: relative;
    margin: 12px 9px 0 5px;
    z-index: 999;
}

.hotlist .Lbtn {
    margin: 12px 5px 0 10px
}

.hotlist .Lbtn::after,
.hotlist .Rbtn::after {
    content: "";
    position: absolute;
    top: 44%;
    border: 7px solid transparent;
    border-right-color: var(--white);
}

.hotlist .Rbtn::after {
    transform: rotate(180deg);
    left: 5px
}

.hotlist .Lbtncon {
    float: left;
    cursor: pointer
}

.hotlist .Rbtncon {
    position: absolute;
    right: 57px;
    cursor: pointer
}

.hotlist .disabled {
    cursor: auto !important
}

.hotlist .disabled .Lbtn::after,
.hotlist .disabled .Rbtn::after {
    border-right-color: #999
}

.hotlist .disabled .Lbtn:hover,
.hotlist .disabled .Rbtn:hover {
    background: #009B3C
}

.hotlist .tips {
    display: none
}

/* .dark .hotother:hover,
.dark .hotlist .mainlist .Schedule:hover,
.dark .Lbtn:hover,
.dark .Rbtn:hover {
    background: #009B3C
} */
.hotlist .mainlist .Schedule {
    width: 40px;
    height: 130px;
}

body.dark .hotlist {
    background: linear-gradient(191deg, #111213 12.72%, #262932 120.64%);
}

body.dark .hotlist .split1 {
    border: 1px solid #000;
    background: #141516;
}

body.dark .hotlist .split1 .group {
    color: var(--white);
}

body.dark .hotlist .matchBox .team .team-1>span, 
body.dark .hotlist .matchBox .team .team-2>span {
    color: var(--white);
}

body.dark .hotlist .matchBox .circle {
    background: linear-gradient(to bottom right, #1456FF, #092E8D)  !important;
}

body.dark .hotlist .mainlist .Schedule{
    background: linear-gradient(270deg, #292929 -17.65%, #0B0B0B 100%) !important;
}

body.dark .hotlist .Lbtn, body.dark .hotlist .Rbtn {
    background: linear-gradient(270deg, #292929 -17.65%, #0B0B0B 100%) !important;
}

body.dark .hotlist .mainlist .Schedule:hover, body.dark .hotlist .Lbtn:hover, body.dark .hotlist .Rbtn:hover {
    background: linear-gradient(270deg, #292929 -17.65%, #0B0B0B 100%) !important;
}

body.dark .hotlist .split1 .line {
    opacity: 0.2;
    background: linear-gradient(90deg, #141516 0%, #F0F0F0 49.53%, #141516 100%) !important;
}

body.dark  .hotlist .hotother .wrapper-item .fc-item:not(:last-child) {
    border-right: 1px solid #5E6062 !important;
}

body.dark .hotlist .hotother .wrapper-item:hover {
    border: 1px solid #cb6f2d !important;
    border-radius: 0 0 10px 10px !important;
}
.hotlist img.logo-team {
    width: 20px;
    height: 20px;
    border-radius: 50%;
}
.hotlist .matchBox .circle {
    color: white !important;
}
.fc-item, .fc-item span {
    cursor: pointer !important;
}
.fc-item:hover span {
    color: #cb6f2d !important;
}