
.home-match-title-fav[data-v-50dcbe09]:hover {
    background-color: transparent;
}
.home-match-country[data-v-50dcbe09] {
    color: var(--color-text-default-secondary);
    font-size: 12px;
    line-height: 140%;
    font-family: var(--weight-400);
}
.phase1-end-column[data-v-50dcbe09] {
    border-top-right-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
}
.skeleton-match__wrapper[data-v-50dcbe09] {
    width: 100%;
    height: 100%;
    padding: 1rem;
    border-radius: 0.5rem;
    box-sizing: border-box;
}
.skeleton-match__title[data-v-50dcbe09] {
    width: 50%;
    height: 1rem;
    margin-bottom: 0.25rem;
}
.skeleton-match__content[data-v-50dcbe09] {
    width: 100%;
    height: 2rem;
    margin-bottom: 0.5rem;
}
.home-match__win-lose[data-v-50dcbe09] {
    background-color: green;
    border-radius: 50%;
    padding: 0.3rem;
    color: white;
    width: 0.75rem;
    border: 0.1rem solid white;
    height: 0.75rem;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 0.5rem;
}
.home-match__win-lose.W[data-v-50dcbe09] {
    background-color: #5cd66c;
}
.home-match__win-lose.L[data-v-50dcbe09] {
    background-color: #cf283e;
}
.home-match__win-lose.D[data-v-50dcbe09] {
    background-color: #ed9c5a;
}
.home-match__status[data-v-50dcbe09] {
    margin-right: 16px;
    margin-left: 5px;
    width: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    /* font-size: 0.563rem;
  color: var(--color-grey-light); */

    color: var(--color-text-default-secondary);
    text-align: center;
    margin-bottom: 8px;

    /* Caption Strong */
    font-family: var(--typography-caption-font-family);
    font-size: var(--typography-caption-size-large);
    font-style: normal;
    font-weight: var(--typography-caption-font-weight-strong);
    line-height: normal;
    letter-spacing: 0.2px;
}
.home-match__1-wrapper[data-v-50dcbe09] {
    flex: 1;
    display: flex;
    /* flex-direction: column; */
    justify-content: center;
    position: relative;
}
/* .home-match__1-wrapper:after {
  position: absolute;
  top: 45%;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: red;
  display: block;
  transform: translate3d(0, -50%, 0);
  content: "";
} */
.home-match__1-container[data-v-50dcbe09] {
    flex: 1;
    justify-content: space-between;
    /* margin-bottom: 0.2rem; */
}
.home-match__team-name[data-v-50dcbe09] {
    color: var(--color-grey-light);
}
.home-match__date[data-v-50dcbe09] {
    margin-bottom: 0.5rem;
    color: var(--color-text-default-default);

    /* Body Strong */
    font-size: 16px;
    font-style: normal;
    font-family: var(--weight-600);
    line-height: 140%; /* 22.4px */
    letter-spacing: 0.64px;
}
.match-home-content__wrapper .match-wrapper[data-v-50dcbe09] {
    background: var(--color-background-default-secondary);
    padding: 16px;
    border-radius: 16px;
}
.match-wrapper[data-v-50dcbe09] {
    margin-bottom: 16px;
    /* margin-top: 18px;
  margin-bottom: 18px; */
}
.match-wrapper.split[data-v-50dcbe09] {
    background-color: var(--color-background-default-secondary);
    padding: 16px;
    border-radius: 16px;
    box-sizing: border-box;
}
.match-fav-content__wrapper .match-wrapper[data-v-50dcbe09] {
    /* margin-bottom: 0.5rem; */
}
.match-fav-content__wrapper .match-wrapper.last[data-v-50dcbe09] {
    margin-bottom: 0;
}
.match-container[data-v-50dcbe09] {
    display: flex;
    margin-bottom: 0.5rem;
    position: relative;
}
.fav-match-container[data-v-50dcbe09]:last-child {
    margin-bottom: 0;
}
.fav-page-match-container.mb[data-v-50dcbe09] {
    margin-bottom: 0.5rem;
}
.fav-page-match-container.mb[data-v-50dcbe09]:last-child {
    margin-bottom: 0;
}
.fav-page-match-container[data-v-50dcbe09] {
    margin-bottom: 0;
}
.match-container:hover .home-match__score-card__wrapper[data-v-50dcbe09] {
    background-color: var(--color-background-default-tertiary-hover);
}
.match-container:hover .home-match__static-card__wrapper[data-v-50dcbe09] {
    background-color: var(--color-background-default-default-hover);
}
.match-container:hover
    .home-match__actions-card__wrapper
    .home-match__icon-wrapper[data-v-50dcbe09] {
    background-color: var(--color-background-default-default-hover);
}
.home-match__static-card__wrapper[data-v-50dcbe09] {
    background-color: #35454d;
    padding: 0.5rem 0.25rem 0.2rem;
    border-top-right-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    width: 6.25rem;
    align-items: center;
}
.home-match__static-card__brief[data-v-50dcbe09] {
    padding: 0.5rem 1.5rem;
}
.home-match__score-card__wrapper[data-v-50dcbe09] {
    display: flex;
    flex-grow: 1;
    background-color: var(--color-theme);
    border-top-left-radius: 0.5rem;
    border-bottom-left-radius: 0.5rem;
    width: 35rem;
    padding: 1rem 0 0.5rem;
    border-left: 0.4rem solid transparent;
    border-radius: var(--size-radius-200);
    background: var(--color-background-default-tertiary);
}
.home-match__score-card__wrapper.live-selected[data-v-50dcbe09] {
    position: relative;
}
.home-match__score-card__wrapper.live-selected[data-v-50dcbe09]:after {
    content: "";
    display: block;
    position: absolute;
    left: -7px;
    top: 0;
    width: 5px;
    height: 100%;
    border-radius: 100px 0 0 100px;
    background-color: var(--color-icon-primary-active);
}
.home-match__score-card__wrapper.no-odds-match[data-v-50dcbe09] {
    border-radius: 0.5rem;
}
.home-match__actions-card__wrapper[data-v-50dcbe09] {
    display: flex;
    align-items: center;
    justify-content: center;
}
.live-selected[data-v-50dcbe09] {
    /* sample */
    /* border-left: 0.4rem solid var(--color-icon-primary-active); */
}
.match-status__live[data-v-50dcbe09] {
    background-color: #cf283e;
    padding: 0.2rem;
    border-radius: 0.3rem;
    font-size: 10.4px;
}
.match-detail[data-v-50dcbe09] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}
.match-detail__status[data-v-50dcbe09] {
    width: 1.6rem;
}
.match-detail__status-w-auto[data-v-50dcbe09] {
    width: auto;
}
.match-detail__score-wrapper[data-v-50dcbe09] {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}
.match-detail__score-wrapper .score[data-v-50dcbe09] {
    min-width: 1.25rem;
    min-height: 1.2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.688rem;
    font-family: var(--weight-700);
}
.match-detail__team-container[data-v-50dcbe09] {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 15px;
}
.match-detail__name[data-v-50dcbe09] {
    width: 9rem;
    white-space: nowrap;
    overflow: hidden;
    color: var(--color-text-default-default);
    text-align: center;
    text-overflow: ellipsis;

    /* Caption */
    font-family: var(--typography-caption-font-family);
    font-size: var(--typography-body-size-small);
    font-style: normal;
    /* font-family: var(--weight-700); */
    line-height: normal;
    letter-spacing: 0.64px;
    margin-top: 0.375rem;
}
.match-middle[data-v-50dcbe09] {
    flex: 0.5;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
}
.match-middle__seperator[data-v-50dcbe09] {
    margin: 0 0.5rem;
    font-family: var(--weight-700);
}
.match-score-or-time-section[data-v-50dcbe09] {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    /* Subheading Strong */
    font-family: var(--typography-heading-font-family);
    font-size: var(--typography-heading-size-extra-small);
    font-style: normal;
    font-family: var(--weight-700);
    line-height: 120%; /* 24px */
    min-width: 97px;
    /* margin-top: 18px; */
    margin-top: -17px;
}
.fav-time-section[data-v-50dcbe09] {
    margin-top: 18px;
}
.match-score-or-time__strikethrough[data-v-50dcbe09] {
    text-decoration: line-through;
}
.match-score-or-time-container[data-v-50dcbe09] {
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--color-text-default-default);
    text-align: center;
    font-size: 24px;
    font-family: var(--weight-600);
}
.match-score-or-time-container-fav[data-v-50dcbe09] {
    margin-top: 7px;
}
.match-score-or-time__pad-for-red-card[data-v-50dcbe09] {
    padding-top: 0.375rem;
}
.match-penalty-score-wrapper[data-v-50dcbe09] {
    color: var(--color-text-default-secondary);
    text-align: center;

    /* Caption Strong */
    font-family: var(--typography-caption-font-family);
    font-size: var(--typography-caption-size-large);
    font-style: normal;
    font-weight: var(--typography-caption-font-weight-strong);
    line-height: normal;
    letter-spacing: 0.2px;
}
.match-penalty-score-separator[data-v-50dcbe09] {
    margin: 0 0.2rem;
}
.league-fav-icon[data-v-50dcbe09] {
    position: relative;
    top: 0.15rem;
    margin-left: 11px;
}
.team-fav-icon-right[data-v-50dcbe09] {
    position: absolute;
    right: -1rem;
    top: 0.375rem;
}
.team-fav-icon-left[data-v-50dcbe09] {
    position: absolute;
    left: -1rem;
    top: 0.375rem;
}
.icon-league[data-v-50dcbe09] {
    position: relative; /*absolute*/
    width: 40px;
    height: 40px;
    /* padding: 2.5px; */
    box-sizing: border-box;
}
.team-red-card-section[data-v-50dcbe09] {
    display: flex;
    justify-content: space-between;
    /* width: 100%; */
    gap: 22px;
}
.team-red-card-container[data-v-50dcbe09] {
    display: flex;
    justify-content: center;
    width: var(--size-icon-medium);
}
.team-red-card[data-v-50dcbe09] {
    background: var(--color-background-error-default);
    width: 0.375rem;
    height: 0.5rem;
    margin-right: 2px;
    border-radius: 1px;
    display: block;
}
.team-red-card[data-v-50dcbe09]:last-child {
    margin-right: 0;
}
.has-subleague-fav[data-v-50dcbe09] {
    margin-right: 0.25rem;
}
.penalty-compact-label[data-v-50dcbe09] {
    border-radius: var(--size-radius-100);
    background: var(--color-background-brand-default);
    padding: 2px 4px;
    font-size: 0.813rem;
    font-family: var(--weight-700);
    color: var(--color-tag-active-text);
    position: absolute;
}
.penalty-compact-label.left[data-v-50dcbe09] {
    top: -0.4rem;
    left: -0.6rem;
}
.penalty-compact-label.right[data-v-50dcbe09] {
    top: -0.4rem;
    right: -0.6rem;
}
.penalty-score[data-v-50dcbe09] {
    border-left: 1px solid var(--color-grey-40);
}
.capitalize[data-v-50dcbe09] {
    text-transform: capitalize;
}
.text-centered[data-v-50dcbe09] {
    text-align: center;
}
.phase1-match-status[data-v-50dcbe09] {
    width: 3.5rem; /* Phase 2-2rem */
    margin: 0 0.5rem; /* Phase 2-0 0.813rem */
}

/*remove on phase 2*/
.home-match__icon-highlight__mobile-phase1[data-v-50dcbe09] {
    margin: 0 0.5rem !important; /*0 1rem*/
}
.home-match__card-odds-content-phase1[data-v-50dcbe09] {
    padding: 0.5rem 0 0.5rem 0.1rem !important;
}
/*remove on phase 2*/
.match-table__standings__form-ball[data-v-50dcbe09] {
    color: var(--white-1000);
    width: 25.6px !important;
    height: 25.6px !important;
    min-width: unset;
    border-radius: 50%;
    flex: unset !important;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: normal;
    position: absolute;
    right: 19.2px;
    top: 50%;
    transform: translate3d(0, -50%, 10px);
    letter-spacing: 0.64px;
    font-family: var(--weight-600);
}
.match-table__score-box:last-child .match-table__standings__form-ball[data-v-50dcbe09]:after {
    width: 10px;
    height: 2px;
    border-radius: 2px;
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translate3d(-50%, 0, 0);
    display: block;
    content: "";
    background-color: red;
}
.match-table__standings__form-ball.ball-0[data-v-50dcbe09],
.match-table__score-box:last-child
    .match-table__standings__form-ball.ball-0[data-v-50dcbe09]:after {
    background-color: var(--success-500);
}
.match-table__standings__form-ball.ball-1[data-v-50dcbe09],
.match-table__score-box:last-child
    .match-table__standings__form-ball.ball-1[data-v-50dcbe09]:after {
    background-color: var(--gray-500);
}
.match-table__standings__form-ball.ball-2[data-v-50dcbe09],
.match-table__score-box:last-child
    .match-table__standings__form-ball.ball-2[data-v-50dcbe09]:after {
    background-color: var(--error-500);
}
.home-match-fav-title[data-v-50dcbe09] {
    letter-spacing: 0.64px;
    font-family: var(--weight-600);
    color: var(--color-text-default-default);
    margin-top: 0px;
    margin-bottom: 4px;
}
.home-match-fav-title[data-v-50dcbe09]:hover {
    background-color: transparent;
}
.league-match-container[data-v-50dcbe09] {
    margin-bottom: 8px;
}
.btn-fav-aspn.match-list-fav[data-v-50dcbe09] {
    width: 22.83px;
    height: 21.8px;
}
.btn-fav-aspn.fav-page[data-v-50dcbe09] {
    width: 22.83px;
    height: 21.8px;
}
.btn-fav-wrapper .btn-fav-aspn[data-v-50dcbe09] {
    margin-bottom: 14px;
}
.home-match__league_icon[data-v-50dcbe09] {
    width: 33.33px;
    height: 33.33px;
    margin-right: 8px;
}
.match-wrapper.fav[data-v-50dcbe09] {
    margin-bottom: 0;
    padding-bottom: 0;
    border-radius: 0;
    padding-top: 8px;
}
.match-wrapper.fav[data-v-50dcbe09]:first-child {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}
.match-wrapper.fav.last[data-v-50dcbe09] {
    margin-bottom: 1.2rem;
    padding-bottom: 16px;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}
@media (max-width: 768px) {
    /* for test */
.btn-fav-aspn-blank[data-v-50dcbe09] {
        width: 20px;
        height: 20px;
}
.btn-fav-wrapper .btn-fav-aspn-mobile[data-v-50dcbe09] {
        margin-top: 5px;
}
.match-score-or-time-section[data-v-50dcbe09] {
        /* min-width: unset; */
        margin-top: 7px;
        line-height: unset;
}
.match-score-or-time-section.has-pen[data-v-50dcbe09] {
        margin-top: 13px;
}
.match-detail__team-container[data-v-50dcbe09] {
        margin-top: 9px;
}
.home-match__status[data-v-50dcbe09] {
        color: var(--color-text-default-secondary);
        text-align: center;
        font-size: 13px;
        font-style: normal;
        font-family: var(--weight-600);
        line-height: 140%; /* 18.2px */
        margin-right: 0;
        margin-left: 15px;
        margin-bottom: 0;
        margin-top: 7px;
        flex-shrink: 0;
}
.match-detail[data-v-50dcbe09] {
        flex-grow: 1;
}
.match-detail__name[data-v-50dcbe09] {
        font-size: 13px;
        font-weight: var(--weight-medium);
        width: 50%;
}
.match-penalty-score-wrapper[data-v-50dcbe09] {
        color: var(--color-text-default-secondary);
        text-align: center;

        font-size: 13px;
        font-style: normal;
        font-family: var(--weight-600);
        line-height: 140%; /* 18.2px */
        letter-spacing: 0.52px;
}
.league-fav-icon[data-v-50dcbe09] {
        top: 0.18rem;
}
.icon-league[data-v-50dcbe09] {
        width: 36px;
        height: 36px;
        /* padding: 2px; */
        box-sizing: border-box;
}
.penalty-team-container[data-v-50dcbe09] {
        margin-top: 15px;
}
.home-match__wrapper.fav[data-v-50dcbe09] {
        margin-bottom: 0;
        padding-bottom: 0;
        border-radius: 0;
        padding-top: 4px;
        margin-top: 0;
}
.home-match__wrapper.fav[data-v-50dcbe09]:first-child {
        margin-top: 8px;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
}
.home-match__wrapper.league[data-v-50dcbe09]:first-child {
        margin-top: 0;
}
.home-match__wrapper.fav.last[data-v-50dcbe09] {
        margin-bottom: 8px;
        padding-bottom: 16px;
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 8px;
}
}
@media (max-width: 400px) {
.home-match__team-name[data-v-50dcbe09] {
        /* display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical; */
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        max-width: 9.5rem;
}
.home-match__team-name.with-fav-star[data-v-50dcbe09],
    .home-match__team-name.with-penalty-score[data-v-50dcbe09] {
        max-width: 8.5rem;
}
.home-match__team-name.with-fav-star.with-penalty-score[data-v-50dcbe09],
    .home-match__team-name.with-penalty-score.with-penalty-win[data-v-50dcbe09] {
        max-width: 7.5rem;
}
.home-match__team-name.with-fav-star.with-penalty-score.with-penalty-win[data-v-50dcbe09] {
        max-width: 6.5rem;
}
}
@media (max-width: 320px) {
.home-match__team-name[data-v-50dcbe09] {
        max-width: 8rem;
}
.home-match__team-name.with-fav-star[data-v-50dcbe09],
    .home-match__team-name.with-penalty-score[data-v-50dcbe09] {
        max-width: 7rem;
}
.home-match__team-name.with-fav-star.with-penalty-score[data-v-50dcbe09],
    .home-match__team-name.with-penalty-score.with-penalty-win[data-v-50dcbe09] {
        max-width: 6rem;
}
.home-match__team-name.with-fav-star.with-penalty-score.with-penalty-win[data-v-50dcbe09] {
        max-width: 5rem;
}
.btn-fav-aspn-mobile.favpage[data-v-50dcbe09] {
        width: 20px;
        height: 20px;
}
}


@media (max-width: 768px) {
    /* for test */
.icon-league-fav {
        width: 37px !important;
        height: 37px !important;
}
.home-match-fav-title {
        font-size: 16px;
        letter-spacing: 0.64px;
        margin-bottom: 0;
}
.mobile-match-card-name {
        gap: 97px;
        /* margin: 0 40px 0 27.77px; */
        margin: 0 44px 0 calc(32px + 15px);
}
.mobile-match-card-name .btn-fav-wrapper {
        position: relative;
}
.home-match__date {
        margin-top: 8px;
        margin-bottom: 12px !important;
        font-size: 14px !important;
}
.match-score-or-time-container {
        min-width: 71px;
}
}

