.video-wrapper{
        position: fixed;
        z-index:3;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: rgb(0 0 0 / 80%);
}
.video-close{
        width:1rem;
        height: 1rem;
        display: flex;
        float: right;
        margin: 0 1rem .5rem 0;
        cursor: pointer;
        background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAPCAYAAADUFP50AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAB2SURBVHgBldJhDoAgCAVg6GTdDDyZRyNbYs4hvd6vEL6cTqIWMzsJzJhtH2JPBEBj9mg193XNcO9pL9kX1d5IstMdXZshTtEOQ2iDMTThOqGKIgl2lD9I7eO2Q0TxmQVCKTbwylc8P7nCzFvYe8VL/9tJYHz2AvnnO2S4TZeFAAAAAElFTkSuQmCC) center/cover no-repeat;
}
.video-container{
        width: 50%;
        height: 50%;
         position: relative;
        display: flex;
        flex-direction: column;
}
.video-container >iframe{
        border: none;
        width: 100%;
}
.video-loading{
        position: absolute;
        top: 1rem;
        left: 0;
        right: 0;
        /* bottom: 0; */
        pointer-events: none;
}
.video-video{
        height: 89%;
        z-index: 9;
}
.video-iframe{
        height: 89%;
         z-index: 9;
}
@media(max-width: 768px) { /* for test */
.video-container{
           width: 100%;
}
.video-video{
            height: 17rem;
}
.video-iframe{
            height: 17rem;
}
}


.skeleton__wrapper{
  width: 100%;
  height: 100%;
  padding:1rem;
  border-radius: 0.5rem;
  box-sizing: border-box;
}
.skeleton__title{
  width: 50%;
  height: 1rem;
  margin-bottom: .25rem;
}
.skeleton__content{
  width: 100%;
  height: 2rem;
  margin-bottom: 0.5rem;
}


.match-detail__info-header[data-v-1271094c]{
    padding: 0 1rem 1.82rem 1rem; 
    text-align: left;
    color: var(--color-grey-light);
    font-size: 12.8px;
}
.match-detail__info-timeline[data-v-1271094c]{
    display:flex;
    justify-content: center;
    align-items: center;     
    padding:.75rem .8rem .75rem .8rem;
    border-bottom: 1px solid #212B30;
    font-size: .7rem;
}
.match-detail__info-timeline__left[data-v-1271094c]{
    flex:1.5
}
.match-detail__info-timeline__left-name[data-v-1271094c]{
    text-align: right;
    margin-right: .3rem;
}
.match-detail__info-timeline__left-name__1[data-v-1271094c]{
    font-size: .7rem;
}
.match-detail__info-timeline__left-name__2[data-v-1271094c]{
    font-size: .7rem;
    color: var(--color-theme-2);
}
.match-detail__info-replay[data-v-1271094c]{
    margin-top: .3rem;
    height: 8rem;
    cursor:pointer;
}
.match-detail__info-timeline__yellow[data-v-1271094c]{
    width: .5rem;
    height: .8rem;
    border-radius: .1rem;
    background-color: #FFE600;
}
.match-detail__info-timeline__yellow.left[data-v-1271094c]{
    margin-left: .4rem;
}
.match-detail__info-timeline__yellow.right[data-v-1271094c]{
    margin-right: .4rem;
}
.match-detail__info-replay[data-v-1271094c]{
    /* padding-top: 50%; */
}
.match-detail__info-timeline__middle[data-v-1271094c]{
    flex:.6;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.match-detail__info-timeline__middle-time[data-v-1271094c]{
    color: var(--color-theme-2);
    margin-bottom: .3rem;
    width: 6rem;
}
.match-detail__info-timeline__middle-score[data-v-1271094c]{
    display: flex;
}
.match-detail__info-timeline__middle-score>div[data-v-1271094c]{
    margin: 0 .3rem;
}
.match-detail__info-timeline__right[data-v-1271094c]{
    flex:1.5
}
.match-detail__info-timeline__right-name[data-v-1271094c]{
    margin-left: .3rem;
    margin-bottom: .3rem;
}
.match-detail__info-footer[data-v-1271094c]{
    padding: 1.82rem 1rem 1.82rem 1rem;
    text-align: left;
    color: var(--color-grey-light);
    font-size: 12.8px;
}
.match-detail__info-footer__card[data-v-1271094c]{
    padding: 1rem 1rem .8rem 0;
    margin-left: 1rem;
    border-bottom: .1rem solid #212B30;
}
.match-detail__info-footer__card-title[data-v-1271094c]{
    font-size:.7rem;
    color: var(--color-grey-light);
    margin-bottom: .1rem;
}
.match-detail__info-footer__card-content[data-v-1271094c]{
    font-size:.88rem
}
.match-detail__thumbnail-iframe[data-v-1271094c]{
    height: 100%;
    padding:0;
    width: 100%;
    border:none;
}
@media(max-width: 768px) { /* for test */
.match-detail__info-replay[data-v-1271094c]{
        height: 5rem;
}
}
@media (min-width: 1000px) {
.match-detail__info-timeline__middle[data-v-1271094c] {
    flex: 5.6 !important;
}
}