/* First container wrapper */
.match_info_container_wrapper{
    background: var(--zaliasLinear1);
}

/* Main page container */
.match_info_container{
    padding-top: 187px;
}

/* General info */
.match_info_header{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* General info text */
.match_info_header > .h2, .match_info_header div > .h3{
    color: var(--white1);
}

/* Team/Tournament separator */
.match_info_header > div{
    display: flex;
}

/* Green line separator */
.team_tournament_divider{
    border: 1px solid var(--green2);
    margin: 0px 10px;
    border-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 25%, var(--green2) 25%, var(--green2) 75%, rgba(0, 0, 0, 0) 75%) 1;
    border-image-slice: 1;
}

/* Match summary */
.match_info_summary{
    margin-top: 30px;
    padding: 30px 25px;
    background-color: var(--grey3);
}

/* Tour/Stadium */
.match_info_summary > p{
    color: var(--grey1);
    text-align: center;
}

/* Date */
.match_info_summary > .h4{
    color: var(--white1);
    text-align: center;
    margin: 7px 0px;
}

/* Teams */
.match_summary_teams{
    background-color: var(--grey3);
    padding: 0px 25px 30px 25px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Teams title */
.match_summary_teams .h3{
    color: var(--white1);
}

/* Winning score */
.game_result p.summary_winning_score{
    color: var(--green2);
}

/* Statistics container */
.match_statistics_container{
    background-color: var(--background1);
}

/* Statistics container extra wrapper */
.match_statistics_container.container{
    max-width: unset;
}

/* Short goals summary */
.goals_summary{
    background-color: var(--grey7);
    padding: 30px;
    display: flex;
}

/* First and second team goals */
.goals_summary .first_team_goals, .goals_summary .second_team_goals{
    flex: 1;
}

/* First team goal summary */
.first_team_summary{
    justify-content: end;
}

.first_team_summary .body2{
    text-align: right;
}

.first_team_summary .body2{
    text-align: right;
}

/* Second team goal summary */
.second_team_summary{
    justify-content: start;
}

/* Goal divider (between teams) */
.goal_summary_divider{
    margin: 0px 30px;
    border: 1px solid var(--grey2);
}

/* Goal summary div */
.goal_summary{
    display: flex;
    gap: 15px;
}

/* Player name + time of goal */
.goals_summary p{
    color: var(--white1);
}

/* First/second team goals div */
.first_team_goals, .second_team_goals{
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Goal summary div */
.goal_summary div{
    display: flex;
    gap: 2px;
    position: relative;
    width: 20px;
    height: 20px;
}

/* Extra time of goal */
.goal_summary .h8{
    display: flex;
    align-items: end;
}

/* Goal tooltip */
.goal_tooltip{
    visibility: hidden;
    background-color: var(--green2);
    color: var(--white1);
    text-align: center;
    padding: 8px 12px;
    position: absolute;
    z-index: 1;
    bottom: 31px;
    right: -26px;
}

/* Goal tooltip (on hover) */
.goal_summary div:hover .goal_tooltip{
    visibility: visible;
}

/* Adds pointy figure to the tooltip */
.goal_tooltip::after{
    content: " ";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: var(--green2) transparent transparent transparent;
}

/* Selectable match options div */
.match_options{
    padding-top: 50px;
    background-color: var(--background1);
}

/* Selectable match options */
.match_statistics_options{
    display: flex;
    gap: 50px;
    justify-content: center;
}

/* Match statistics option button */
.match_options button{
    width: 445px;
    border: none;
    border-bottom: 4px solid var(--grey1);
    background-color: inherit;
    padding-bottom: 20px;
    color: var(--grey1);
    cursor: pointer;
    transition: 0.5s ease all;
}

/* Selected statistics button */
.match_options button.selected_option{
    border-bottom: 4px solid var(--green2);
    color: var(--white1);
    transition: 0.5s ease all;
}

/* "Eiga" container */
.match_stages{
    background-color: var(--grey3);
}

/* Match start time (in "eiga" container) */
.match_start_time{
    text-align: center;
    color: var(--green2);
}

/* "Start of match" div */
.match_start{
    margin-top: 7px;
    display: flex;
    align-items: center;
    padding-bottom: 40px;
}

/* "Break" div */
.match_middle{
    display: flex;
    align-items: center;
    padding-top: 40px;
    padding-bottom: 40px;
}

/* "End of match" div */
.match_end{
    display: flex;
    align-items: center;
    padding-top: 40px;
}

/* Text at each breakpoint of match */
.match_start .h5, .match_middle .h5, .match_end .h5{
    color: var(--white1);
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    padding-left: 20px;
    padding-right: 20px;
    white-space: nowrap;
}

/* Empty div with border */
.empty_border_div{
    width: 100%;
    border: 1px solid var(--grey2);
    height: 0px;
}

/* Different match event div */
.event_time_intervals{
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Default state on match statistics */
.team_composition_div, .match_flow_stage, .team_composition_div *, .match_flow_stage *{
    opacity: 0;
    visibility: hidden;
    height: 0px;
    pointer-events: none;
    transition: height 0.7s ease, opacity 0.7s ease;
}

/* Team composition starting players div (default)*/
.team_composition_div .starting_players,.team_composition_div .reserve_players{
    padding: 0;
}

/* Team composition starting players div (active) */
.team_composition_div.current_view, .match_flow_stage.current_view{
    padding-top: 50px;
    padding-bottom: 50px;
}

/* Selected option */
.current_view, .current_view *{
    opacity: 1;
    visibility: visible;
    height: auto;
    pointer-events: all;
    transition: height 0.7s ease, opacity 0.7s ease;
}

/* White text in center (team composition) */
.team_composition_div > .h5{
    color: var(--white1);
    text-align: center;
}

/* Starting players div (active) */
.team_composition_div.current_view .starting_players{
    padding-top: 40px;
    padding-bottom: 40px;
}

/* Reserved players */
.team_composition_div.current_view .reserve_players{
    padding-top: 40px;
}

/* Starting/reserve players div */
.starting_players, .reserve_players{
    display: flex;
    justify-content: center;
    gap: 10px;
}

/* Every player row */
.starting_players > div, .reserve_players > div{
    flex: 1;
    gap: 10px;
}

/* Home team */
.first_starting_team{
    display: flex;
    flex-direction: column;
    align-items: end;
}

/* Away team */
.second_starting_team{
    display: flex;
    flex-direction: column;
    align-items: start;
}

/* Tournament name */
.tournament_team_div > .tournament_text{
    max-width: 400px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: right;
}

/* No resutls */
.match_info_no_results{
    color: white;
    padding-top: 200px;
    padding-bottom: 50px;
    display: flex;
    justify-content: center;
}

@media screen and (max-width:1150px) {

    /* Main page container */
    .match_info_container{
        padding-top: 102px;
    }

    /* Selectable match options */
    .match_statistics_options{
        max-width: 1440px;
        margin: auto;
        width: 100%;
        padding: 0 100px;
    }

    /* No resutls */
    .match_info_no_results{
        padding-top: 130px;
        padding-bottom: 50px;
    }
}

@media screen and (max-width:1100px) {

    /* General info */
    .match_info_header{
        align-items: start;
        flex-direction: column;
        gap: 15px;
    }

}

@media screen and (max-width:1000px) {

    /* Team names */
    .match_summary_teams .h3{
        text-align: center;
    }

    /* Second team player name */
    .second_team_summary .body2{
        order: 2;
    }

    /* second team event time */
    .second_team_summary > div{
        order: 1;
    }
}

@media screen and (max-width:800px) {

    /* Results text */
    .match_info_header .h2{
        font-size: 24px;
        line-height: 27px;
        font-weight: 600;
    }

    /* Team/tournament name text */
    .match_info_header .h3{
        font-size: 18px;
        line-height: 22px;
        font-weight: 600;
    }
}

@media screen and (max-width:769px) {

    /* Goal divider (between teams) */
    .goal_summary_divider{
        margin: 0px 15px;
    }

    /* Tournament name */
    .tournament_team_div > .tournament_text{
        max-width: 200px;
    }

    /* Match summary */
    .match_info_summary{
        margin-top: 15px;
        padding: 15px 25px;
    }

    .goal_summary .body2{
        font-size: 12px;
        line-height: 17px;
        font-weight: 400;
    }

    .goal_summary .h6{
        font-size: 16px;
        line-height: 20px;
        font-weight: 600;
    }

    /* Goal summary div */
    .goal_summary{
        gap: 10px;
        align-items: center;
    }

    /* Short goals summary */
    .goals_summary{
        padding: 20px 15px 15px 15px;
    }

    .match_info_summary .caption1{
        font-size: 12px;
        line-height: 15px;
        font-weight: 400;
    }

    .match_info_summary .caption5{
        font-size: 14px;
        line-height: 17px;
        font-weight: 400;
    }

    .match_info_summary .h4{
        font-size: 18px;
        line-height: 22px;
        font-weight: 600;
    }

    /* Date */
    .match_info_summary > .h4{
        margin: 5px 0px;
    }

    /* Teams */
    .match_summary_teams{
        padding: 0px 15px 20px 15px;
    }

    .match_summary_teams .h3{
        font-size: 20px;
        line-height: 24px;
        font-weight: 600;
    }

    .match_summary_teams .game_result{
        margin: 0px 15px;
    }

    .match_summary_teams .first_team, .match_summary_teams .second_team{
        gap: 5px;
    }

    /* Main page container */
    .match_info_container{
        padding-top: 101px;
    }

    .event_tooltip.body3, .goal_tooltip.body3{
        font-size: 12px;
        line-height: 17px;
        font-weight: 400;
        bottom: 28px;
        right: -22px;
    }

    /* Selectable match options div */
    .match_options{
        padding-top: 35px;
    }

    /* Match statistics option button */
    .match_options button{
        padding-bottom: 10px;
    }

    /* Selectable match options */
    .match_statistics_options button{
        font-size: 18px;
        line-height: 26px;
        font-weight: 600;
    }

    /* Selectable match options */
    .match_statistics_options{
        padding: 0px 100px;
    }

    /* Team composition starting players div (active) */
    .team_composition_div.current_view, .match_flow_stage.current_view{
        padding: 20px 100px;
    }

    /* "Start of match" div */
    .match_start{
        margin-top: 4px;
    }

    .match_start_time{
        font-size: 14px;
        line-height: 17px;
        font-weight: 400;
    }

    /* Text at each breakpoint of match */
    .match_start .h5, .match_middle .h5, .match_end .h5{
        padding-left: 10px;
        padding-right: 10px;
        font-size: 16px;
        line-height: 20px;
        font-weight: 600;
    }

    /* "Start of match" div */
    .match_start{
        padding-bottom: 25px;
    }

    /* "Break" div */
    .match_middle{
        padding-top: 25px;
        padding-bottom: 25px;
    }

    /* "End of match" div */
    .match_end{
        padding-top: 25px;
    }

    /* White text in center (team composition) */
    .team_composition_div > .h5{
        font-size: 16px;
        line-height: 20px;
        font-weight: 600;
    }

    /* Starting players div (active) */
    .team_composition_div.current_view .starting_players, .team_composition_div.current_view .reserve_players{
        flex-direction: column;
    }

    /* Home team */
    .first_starting_team{
        display: flex;
        flex-direction: column;
        align-items: start;
    }

    /* Away team */
    .second_starting_team{
        display: flex;
        flex-direction: column;
        align-items: end;
    }

    .first_starting_team .player_number, .second_starting_team .player_info_div{
        order: 1;
    }

    .first_starting_team .player_info_div, .second_starting_team .player_number{
        order: 2;
    }

    /* Starting players div (active) */
    .team_composition_div.current_view .starting_players{
        padding-top: 30px;
        padding-bottom: 30px;
    }

    .team_composition_div.current_view .reserve_players{
        padding-top: 30px;
    }

    /* No resutls */
    .match_info_no_results{
        padding-top: 80px;
        padding-bottom: 50px;
        font-size: 24px;
        line-height: 27px;
        font-family: "Barlow";
        font-weight: 600;
    }
}

@media screen and (max-width:700px) {

    /* Selectable match options */
    .match_statistics_options{
        padding: 0px 50px;
    }

    /* Team composition starting players div (active) */
    .team_composition_div.current_view, .match_flow_stage.current_view{
        padding: 20px 50px;
    }
}

@media screen and (max-width:500px) {

    /* Selectable match options */
    .match_statistics_options{
        padding: 0px 20px;
    }

    /* Team composition starting players div (active) */
    .team_composition_div.current_view, .match_flow_stage.current_view{
        padding: 20px 20px;
    }
}

@media screen and (max-width:479px) {

    /* team name */
    .tournament_team_div > .team_text{
        max-width: 75px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        text-align: right;
    }

    /* Selectable match options */
    .match_statistics_options{
        gap: 35px;
    }
}