@import "https://media.beautylive8.com/slick/slick.css";
@import "https://media.beautylive8.com/slick/slick-theme.css";

:root{
    --font-large: 23px;
    --font-superb: 14px;
    --font-primary: 13px;
    --font-secondary: 11px;
    --family-primary: "Roboto", "Arial", "Helvetica Neue", sans-serif;
    --text-black: #000;
    --text-white: #FFF;
}
@-webkit-keyframes blink { 50% { background-color: pink; }}
        @keyframes blink { 50% { background-color: pink; }}

        .blink {
            background-color: yellow;
            -webkit-animation: blink 800ms step-end infinite;
                    animation: blink 800ms step-end infinite;
        }


@keyframes slideIn {
    0% {
      transform: translateY(400px);
      animation-timing-function: ease-out;
    }
    60% {
      transform: translateY(0px);
      animation-timing-function: ease-in;
    }
    80% {
      transform: translateY(10px);
      animation-timing-function: ease-out;
    }
    100% {
      transform: translateY(0px);
      animation-timing-function: ease-in;
    }
  }

 .btn:not(:disabled) {
    cursor: pointer;
    padding: 0.7rem 1.5rem;
    border: 1px solid var(--primary);
    background-color: var(--primary);
    color: var(--text-white);
    border-radius: 5px;
    cursor: pointer;
    width: 100%;
    font-size: var(--text-primary);
}
.slider {
    width: 100%;
}

.slick-slide {
}

.slick-slide img {
    width: 100%;
}

.slick-prev:before,
.slick-next:before {
    color: var(--text-black);
}

.slick-slide {
    transition: all ease-in-out .3s;
    /* opacity: .2; */
}

.slick-active {
    /* opacity: .5; */
}

.slick-current {
    /* opacity: 1; */
}

.status-container {
    /* position: absolute;
    right: 20px;
    top: 80px; */
    background: #01ACB0;
    padding: 1px 6px;
    color: white;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
    border-radius: 5px;
    font-size: var(--font-primary);
    width: 50px;
    margin: -10px 0 0 auto;
    z-index: 1;
    display: table;
}
.right{
    margin: 0 0 0 auto
}


/********************************** BEGIN :: 直播视频 **********************************/
.matches-container {
    max-width: 95%;
    margin: 0;
    padding: 0;
    margin: 0 auto;
}

.red {
    color: red;
}
.livematch_mobile_bg{
    background: white; 
    margin: 0 auto; 
    background-image: url(https://media.beautylive8.com/images/bg-tab1.jpg); 
    background-size: contain;
    background-repeat: no-repeat;
    /* background-size: 100% 60%; */
    background-position: 100% 30%;
}

.livematch_videopreview{
    padding: 10px 30px 25px 30px;
    /* background: white; 
    margin: 0 auto; 
    background-image: url(https://media.beautylive8.com/images/bg_hotmatch.jpg); 
    background-position: bottom center; 
    background-size: contain;
    background-repeat: no-repeat; */
    width: 100%;
}
.livematch_teamwrapper {
    display: grid;
    grid-template-columns: 25% 50% 25%;
    gap: 0px;
    margin: 0 auto;
    text-align: center;
    justify-content: center;
}
.livematch_txt {
    width: 50px;
    margin: 0 auto;
    text-align: center;
    color: var(--text-white);
    font-size: var(--font-secondary);
    margin: 0 -20px 0 auto;
    border-radius: 5px;
    background-color: red;
    -webkit-animation: blink 800ms step-end infinite;
            animation: blink 800ms step-end infinite;
            box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -2px 0px inset;
}
.livematch_dot {
    height: 6px;
    width: 6px;
    background-color: white;
    border-radius: 50%;
    display: inline-block;
    margin-right: 2px;
    position: relative;
    top: -1px;
}
.livematch_title{
    /* vertical-align: text-bottom; */
    font-size: var(--font-secondary);
    position: relative;
    font-size: var(--font-secondary);
    top: -1px;
}
.livematch_teamimage {
    width: 60px !important;
    height: 60px !important;
    position: relative;
}
.livematch_team {
    font-size: var(--font-primary);
    color: var(--text-white);
    overflow: hidden;
   display: -webkit-box;
   -webkit-line-clamp: 2; 
           line-clamp: 2; 
   -webkit-box-orient: vertical;
   line-height: 15px;
   text-shadow: -1px 0px 3px rgba(0,0,0,1);
}
.livematch_score {
    margin: 0 auto;
    font-size: var(--font-large);
    text-align: center;
    color: var(--text-white);
    line-height: 15px;
    text-shadow: -1px 0px 3px rgba(0,0,0,1);
    margin-bottom:5px
}
.livematch_leaguename {
    font-size: var(--font-primary);
    text-align: center;
    color: var(--text-white);
    text-transform: uppercase;
    text-shadow: -1px 0px 3px rgba(0,0,0,1);
    line-height: 11px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
}
.livematch_play {
    position: relative;
    background: #00aab3;
    width: 60px;
    margin: 0 auto;
    border-radius: 5px;
    color: white;
    margin-top: 5px;
    font-size: var(--font-primary);
    text-transform: uppercase;
    font-style: italic;
    font-weight: bold;
    display: flex;
    text-align: center;
    justify-content: center;
    padding: 2px 0;
    box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -2px 0px inset
}
.livematch_play_image{
    width: 15px !important;
    height: 15px !important;
    margin-right: 5px;
    margin-top: 2px
}
.livematch_playtitle{
}
.livematch_date {
    font-size: var(--font-primary);
    color: var(--text-white);
    text-transform: uppercase;
    text-shadow: -1px 0px 3px rgba(0,0,0,1);
    margin-top: 25px;
}
.livematch_container{
    padding: 0px 10px 10px 10px;
    background: white;
}
.livematch_header{
    display: flex;
}
/********************************** END :: 直播视频 **********************************/

/********************************** BEGIN :: 精彩片段 **********************************/
.goodshow_videopreview{
    padding: 10px 5px 5px 5px;
    background: white; 
    margin: 0 auto; 
    width: 100%;
}
.goodshow_teamwrapper {
    display: grid;
    grid-template-columns: 25% 50% 25%;
    gap: 0px;
    margin: 0 auto;
    text-align: center;
    justify-content: center;
    padding-top: 10px;
}
.goodshow_datetime {
    margin: 0 auto;
    font-size: var(--font-primary);
    text-align: center;
    color: #7f7f7f;
    line-height: 15px;
}
.goodshow_score {
    font-size: 30px;
    text-align: center;
    color: var(--text-black);
    text-transform: uppercase;
}
.goodshow_teamimage {
    width: 60px !important;
    height: 60px !important;
    position: relative;
}
.goodshow_team {
    font-size: var(--font-primary);
    color: var(--text-black);
    overflow: hidden;
    display: -webkit-box;
   -webkit-line-clamp: 2; 
           line-clamp: 2; 
   -webkit-box-orient: vertical;
   line-height: 15px;
   margin-top: 10px;
   
}
.goodshow_txt {
    width: 65px;
    margin: 0 auto;
    text-align: center;
    color: white;
    font-size: var(--font-secondary);
    margin: 0 0px 0 auto;
    border-radius: 5px;
    background-color: red;
    -webkit-animation: blink 800ms step-end infinite;
            animation: blink 800ms step-end infinite;
            box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -2px 0px inset
}
.goodshow_play {
    position: relative;
    background: #00aab3;
    width: 60px;
    margin: 0 auto;
    border-radius: 5px;
    color: white;
    margin-top: 5px;
    font-size: var(--font-primary);
    text-transform: uppercase;
    font-style: italic;
    font-weight: bold;
    display: flex;
    text-align: center;
    justify-content: center;
    padding: 2px 0;
    box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -2px 0px inset
}
.goodshow_play_image{
    height: 15px !important;
    width: 15px !important;
    margin-right: 5px;
    margin-top: 1px;
}
.goodshow_playtitle{
}
.goodshow_rewind {
    height: 15px;
    width: 15px !important;
    margin-right: 2px;
    vertical-align: text-bottom;
    position: relative;
    top: -1px;
}
.goodshow_play2{
    background: #00aab3;
    text-align: center;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    color: var(--text-white);
    font-style: italic;
    font-size: var(--font-primary);
    padding: 2px 0;
    font-weight: bold;
    border: 2px solid #00aab3;
}
/* SHOW ALL */
.goodshow_container{
    padding: 0px 10px 10px 10px;
    background: var(--text-white); 
}
.goodshow_header{
    display: flex;
}
.goodshow_showall{
    margin: 0 0 0 auto;
    background: url(https://media.beautylive8.com/images/icon_cta.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding: 0 17px 0 15px;
    color: var(--text-white);
    font-size: var(--font-primary);
    line-height: 19px
}
.goodshow_group{
    padding: 15px 5px 0 5px
}
.goodshow_content{
    border: 1px solid #9c9c9c; 
    border-radius: 10px
}
.goodshow_image {
    width: 30px !important;
    height: 30px !important;
    position: relative;
    vertical-align: bottom;
}
.goodshow_title{
    /* vertical-align: text-bottom; */
    position: relative;
    font-size: var(--font-secondary);
    top: -1px;
}
.goodshow_score2 {
    text-align:center;
    font-size: var(--font-superb);
    font-weight: bold
}

#videoplayback{
    display:none;
    padding: 10px 5px 0 5px;
    position: absolute;
    top: 100px;
    background-color: #FFF;
    height: 230px;
    width: 95%;
}

#videoplayback2{
    display:none;
    padding: 10px 5px 0 5px;
    position: absolute;
    top: 100px;
    background-color: #FFF;
    height: 200px;
    width: 95%;
}
#videoplayback3{
    display:block;
    padding: 10px;
}
.videoplayback_container{
    background: white; 
    margin-bottom: 10px; 
    width: 100%;
    display: flex;
}
.videoplayback_txt {
    width: 65px;
    text-align: center;
    color: var(--text-white);
    font-size: var(--font-secondary);
    border-radius: 20px;
    line-height: 19px;
    background-color: red;
    -webkit-animation: blink 800ms step-end infinite;
            animation: blink 800ms step-end infinite;
}
.videoplayback_rewind {
    height: 15px;
    width: 15px !important;
    margin-right: 2px;
    vertical-align: text-top;
}
.videoplayback_team{
    font-size: var(--font-primary);
    margin-left: 5px
}
.videoplayback_back{
    font-size: var(--font-primary);
    margin: 0 0 0 auto
}
.videoplayback_link {
    background: var(--text-black);
    width:100%;
    height: 220px;
    overflow: hidden;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    /* height: 200px */
}
/********************************** END :: 精彩片段 **********************************/

/********************************** BEGIN :: 今日赛事 **********************************/
.todayshow_mobile_bg{
    background: white; 
    margin: 0 auto; 
    background-image: url(https://media.beautylive8.com/images/bg-tab3.jpg); 
    background-size: contain;
    background-repeat: no-repeat;
    /* background-size: 100% 70%; */
    background-position: center center;
}
.todayshow_container {
    padding: 10px 15px 10px 15px;
    background: var(--text-white);
}
.todayshow_txt {
    height: 17px !important;
    border: 1px solid transparent
}
.todayshow_leagueimage {
    width: 20px !important;
    height: 20px !important;
    position: relative;
    vertical-align: bottom;
    margin-right: 5px;
}
.todayshow_teamimage {
    width: 20px !important;
    height: 20px !important;
    position: relative;
    vertical-align: bottom;
    margin-right: 5px;
    margin-left: 5px
}
.todayshow_header{
    display: flex;
    margin-top: 10px
}
.todayshow_group{
    border-bottom: 1px solid rgba(131, 131, 131, 0.4); 
    padding: 6px 5px;
    font-size: var(--font-primary);
}
.todayshow_team {
    color: var(--text-black);
    font-size: var(--font-secondary);
    font-weight: bold
}
.todayshow_vs {
    color: var(--text-black);
    font-size: var(--font-secondary);
    margin: 0 5px
}
.todayshow_date {
    font-size: var(--font-primary);
    color: var(--text-white);
    text-transform: uppercase;
    text-shadow: -1px 0px 3px rgba(0,0,0,1);
}
.todayshow_txt {
    /* padding: 0 3px; 
    width: 65px;
    margin: 0 auto;
    text-align: center;
    color: white;
    font-size: var(--font-secondary);
    margin: 0 0px 0 auto;
    border-radius: 5px;
    background-color: red;
    -webkit-animation: blink 800ms step-end infinite;
            animation: blink 800ms step-end infinite;
            box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -2px 0px inset */
}
.todayshow_time{
    font-size: var(--font-secondary);
}
.todayshow_title {
    vertical-align: text-bottom;
}
.todayshow_dot {
    height: 7px;
    width: 7px;
    background-color: var(--text-white);
    border-radius: 50%;
    display: inline-block;
    margin-right: 1px;
    position: relative;
    top: -1px;
}
/********************************** END :: 今日赛事 **********************************/






/********************************** SLIDE UP MEMU **********************************/
  .menu__slideup,  .menu__slideup2,  .menu__slideup3 {
    overflow: hidden;
    margin: 0 0 0 auto
  }
  
  .menu__button, .menu__button2, .menu__button3 {
    cursor: pointer;
    z-index: 105;
    background: url(https://media.beautylive8.com/images/icon/icon_cta.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding: 2px 22px 2px 22px;
    color: var(--text-white);
    font-size: var(--font-primary);
    line-height: 19px;
    border: 0;
    margin-top: 10px;
  }
  .menu__overlay, .menu__overlay2, .menu__overlay3 {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.92);
    position: absolute;
    z-index: 100;
    top: 0;
    left:0
  }
  
  .menu__body, .menu__body2, .menu__body3 {
    display: block;
    width: 100%;
    background: var(--light);
    padding-bottom: 15px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    box-shadow: 0px -9px 50px -30px var(--text-black);
    /* position: absolute; */
    position: fixed;
    bottom: 0;
    z-index: 105;
    transition: 0.2s cubic-bezier(0.33, 1, 0.53, 1);
    left: 0;
    max-height: 70vh;
    overflow-y: auto;
    background: #f8f9fa
  }
  .menu__body > *:not(:last-child), .menu__body2 > *:not(:last-child), .menu__body3 > *:not(:last-child) {
  }
  
  .menu__header, .menu__header2, .menu__header3 {
    display: flex;
    justify-content: space-between;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    padding: 15px 20px;
    width: 100%;
    position: fixed;
    background: #f8f9fa;
    z-index: 1;
  }
  .menu__header label div, .menu__header2 label div, .menu__header3 label div {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    position: relative;
    transform: rotate(5.5rad);
  }
  .menu__header label div:after, .menu__header2 label div:after, .menu__header3 label div:after {
    content: "";
    width: 2px;
    height: 10px;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
  }
  .menu__header p, .menu__header2 p, .menu__header3 p {
    font-size: 16px;
    font-weight: bold;
    white-space: nowrap;
    margin-bottom:0
  }
  .menu__header button, .menu__header2 button, .menu__header3 button {
    /* display: flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    cursor: pointer; */
    border: none;
    background: transparent;
    margin-right: -7px;
  }
  .menu__header button div, .menu__header2 button div, .menu__header3 button div {
    width: 15px;
    height: 3px;
    /* background: var(--light); */
    position: relative;
    transform: rotate(5.5rad);
  }
  .menu__header button div:before, .menu__header2 button div:before, .menu__header3 button div:before {
    content: "";
    width: 3px;
    height: 15px;
    /* background: var(--light); */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
.menu__content, .menu__content2, .menu__content3 {
    padding: 0 15px;
    margin-top: 60px;
  }
.slideup_group{
    border-bottom: 1px solid rgba(131, 131, 131, 0.4); 
    padding: 10px 5px
}
.slideup_league{
    margin: 0 0 0 auto;
	text-transform: lowercase;
	font-size: 12px;
}
.slideup_league::first-letter {text-transform: uppercase}
.slideup_image {
    width: 20px !important;
    height: 20px !important;
    position: relative;
    /* vertical-align: bottom; */
    margin: 0 2px;
}
.slideup_team {
    color: var(--text-black);
    overflow: hidden;
    /* display: -webkit-box;
    -webkit-line-clamp: 2; 
            line-clamp: 2; 
    -webkit-box-orient: vertical; */
    line-height: 20px;
    font-size: 0.9em;
    white-space: nowrap;
    width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.slideup_play{
    width: 14px !important;
    height: 14px !important;
    position: relative;
}
.slideup_txt {
    background: red;
    text-align: center;
    color: var(--text-white);
    font-size: var(--font-secondary);
    padding: 0 1px;
    margin: 0 4px;
    border-radius: 5px;
    background-color: red;
    -webkit-animation: blink 800ms step-end infinite;
            animation: blink 800ms step-end infinite;
            box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -2px 0px inset
}
.slideup_date {
    font-size: var(--font-primary);
	font-size: 0.85em;
}
.slideup_title{
	font-size: 0.85em;
}
.slideup_dot {
    height: 6px;
    width: 6px;
    background-color: var(--text-white);
    border-radius: 50%;
    display: inline-block;
    margin-left: 2px;
}

/********************************** SLIDE UP MEMU **********************************/


/********************************** BEGIN :: OTHERS **********************************/
.alert ul{
    list-style-position: inside;
    padding-left: 0;
    margin-bottom: 0;
}
/********************************** END :: OTHERS **********************************/


.nolive_container{
    margin: 0 auto; 
    width:250px !important;
    height: 190px;
    /* need check */
}
.nolive_notice{
    margin-top: 60px; 
    z-index:1; 
    background: #FFF; 
    border-radius:10px; 
    padding: 20px 20px 5px 20px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px
}
.nolive_holder{
    display:flex
}
.nolive_image{
    height: 55px; 
    width:55px !important
}
.nolive_text{
    font-size: 15px
}


.mobile_nolive_container{
    margin: 0 auto; 
}
.mobile_nolive_notice{
    background: #FFF;
    width: 60%;
    border-radius: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
    margin: 0 auto;
}
.mobile_nolive_holder{
    display:flex
}
.mobile_nolive_image{
    height: 55px; 
    width:55px !important
}
.mobile_nolive_text{
    font-size: 13px;
    margin-bottom: 0;
    margin-top:5px
}

.livestream_list_team {
    color: var(--text-black);
    overflow: hidden;
    /* line-height: 15px; */
    font-size: 12px;
    text-align: left
}