div#buttonPanel1{
	display: inline-table;
	margin-right: 10px;
	white-space: normal;
}

div#buttonPanel2{
	display: inline-table;
	margin-left: 10px;
	white-space: normal;
}

div.buttonPanelTitle {
	display: table-row;
	height: 25px;
}

div.buttonPanelTitle span {
	display: table-cell;
	vertical-align: middle;
}


div#textFormat1, div#textFormat2 {
	margin: 0 0 20px 0;
	padding: 5px;
	box-sizing: border-box;
	font: 12px arial,helvetica,clean,sans-serif;
	border: solid 1px rgb(150,150,150);
}

div#textFormatBottom1, div#textFormatBottom2 {
	margin: 0 0 20px 0;
	padding: 5px;
	min-height: 50px;
	box-sizing: border-box;
	font: 12px arial,helvetica,clean,sans-serif;
	border: solid 1px rgb(150,150,150);
}

.modal{
	padding-right:0px !important;
}

.modal-dialog{
	max-width:90%;
}

div#team1 {
	display: inline-block;
	margin: 0px;
}

div#team2 {
	display: inline-block;
	margin: 0px 0px 0px 10px;
	vertical-align: top;
}

div#teamTable1, div#teamTable2 {
	white-space: nowrap;
}

div.teamData1, div.teamData2 {
	display: inline-table;
	position: relative;
	font: 12px arial,helvetica,clean,sans-serif;
	border: solid 1px rgb(150,150,150);
	vertical-align: top;
	white-space: normal;
}

div.teamDataTitle {
	display: table-row;
	height: 25px;
	font-weight: bold;
	background-color: rgb(244,244,244);
}

div.teamDataTitle span {
	display: table-cell;
	vertical-align: middle;
}

div.buttonPanelRow, div.teamDataRow {
	display: table-row;
	height: 25px;
}

div.buttonPanelRow span, div.teamDataRow span {
	display: table-cell;
	vertical-align: middle;
}

div.even {
	background-color: rgb(244,244,244);
}

div.odd {
	background-color: white;
}

span.player_status_title {
	margin-left: 2px;
	font: 12px arial,helvetica,clean,sans-serif;
	font-weight: bold;
	text-align: left;
}

span.player_status option {
	font-size: 12px;
	font-family: tahoma;
}

span.squad_preliminary {
	width: 16px;
	padding-left: 5px;
	text-align: center;
}

span.squad_application {
	width: 16px;
	padding-left: 0px;
	text-align: center;
}

span.now_game_start {
	width: 16px;
	padding-left: 20px;
	text-align: center;
}

span.now_game_subs {
	width: 16px;
	padding-left: 5px;
	text-align: center;
}

span.now_game_not_play {
	width: 16px;
	padding-left: 5px;
	text-align: center;
}

span.shirtnumber {
	width: 30px;
	max-width: 30px;
}

span.shirtnumber_cell {
	padding: 0 6px 0 2px;
	text-align: right;
}

span.name {
	width: 124px;
	max-width: 124px;
	padding-left: 6px;
}

span.name_cell {
	width: 124px;
	max-width: 124px;
	padding-left: 6px;
	font-size: 13px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

span.player_status_table {
	width: 14px;
	background-position: center center;
	border-right: 3px solid transparent; /* ������ padding-right ��� ������� ����������� */
}

span.squad_preliminary_table {
	width: 14px;
	padding: 0 2px;
	background-position: center center;
}

span.squad_application_table {
	width: 14px;
	background-position: right center;
}

span.squad_start_table {
	min-width: 14px;
	padding-right: 0px;
	padding-right:5px;
	background-position: left center;
}

span.last_game_1 {
	min-width: 10px;
	padding-right: 8px;
	background-position: right center;
}

span#last_game1_team1_title, span#last_game1_team2_title {
	padding-right: 2px;
	text-align: right;
	font-size: 8px;
	font-weight: normal;
}

span.last_game_2 {
	min-width: 10px;
	padding: 0 2px;
	background-position: center center;
}

span#last_game2_team1_title, span#last_game2_team2_title {
	padding: 0;
	text-align: center;
	font-size: 8px;
	font-weight: normal;
}

span.last_game_3 {
	min-width: 10px;
	padding-left: 8px;
	background-position: left center;
}

span#last_game3_team1_title, span#last_game3_team2_title {
	padding-left: 2px;
	text-align: left;
	font-size: 8px;
	font-weight: normal;
}

span.green_circle {
	background-image: url('/image/circle/green.png');
	background-repeat: no-repeat;
}

span.yellow_circle {
	background-image: url('/image/circle/yellow.png');
	background-repeat: no-repeat;
}

span.red_circle {
	background-image: url('/image/circle/red.png');
	background-repeat: no-repeat;
}

span.blue_circle {
	background-image: url('/image/circle/blue.png');
	background-repeat: no-repeat;
}

span.black_circle {
	background-image: url('/image/circle/black.png');
	background-repeat: no-repeat;
}

span.flag {
	width: 20px;
	padding-right: 5px;
	text-align: center;
}

span.flag_cell {
	text-align: center;
	padding-right: 5px;
}

span.age {
	width: 20px;
	padding-right: 5px;
	text-align: center;
}

span.age_cell {
	text-align: center;
	padding-right: 5px;
}

span.position {
	width: 20px;
	padding: 0 2px 0 2px;
	text-align: center;
}

span.position_cell {
	padding: 0 2px 0 2px;
	text-align: center;
}

span.game_minutes {
	width: 37px; /* 43px */
	padding: 0 4px 0 2px;
    text-align: right;
	background-color: rgb(187,187,187);
}

span.game_minutes_cell {
	padding: 0 4px 0 2px;
	text-align: right;
}

span.appearances {
	width: 20px;
	padding: 0 2px 0 2px;
    text-align: center;
}

span.appearances_cell {
	padding: 0 2px 0 2px;
	text-align: center;
}

span.lineups {
	width: 30px;
	padding: 0 2px 0 2px;
    text-align: center;
}

span.lineups_cell {
	padding: 0 2px 0 2px;
	text-align: center;
}

span.subs_in {
	width: 20px;
	padding: 0 2px 0 2px;
    text-align: center;
}

span.subs_in_cell {
	padding: 0 2px 0 2px;
	text-align: center;
}

span.subs_out {
	width: 20px;
	padding: 0 2px 0 2px;
    text-align: center;
}

span.subs_out_cell {
	padding: 0 2px 0 2px;
	text-align: center;
}

span.subs_on_bench {
	width: 20px;
	padding: 0 2px 0 2px;
    text-align: center;
}

span.subs_on_bench_cell {
	padding: 0 2px 0 2px;
	text-align: center;
}

span.goals {
	width: 20px;
	padding: 0 2px 0 2px;
    text-align: center;
}

span.goals_cell {
	padding: 0 2px 0 2px;
	text-align: center;}

span.assists {
	width: 20px;
	padding: 0 2px 0 2px;
    text-align: center;
}

span.assists_cell {
	padding: 0 2px 0 2px;
	text-align: center;
}

span.yellow_cards {
	width: 20px;
	padding: 0 2px 0 2px;
    text-align: center;
}

span.yellow_cards_cell {
	padding: 0 2px 0 2px;
	text-align: center;
}

span.yellow_2_cards {
	width: 20px;
	padding: 0 2px 0 2px;
    text-align: center;
}

span.yellow_2_cards_cell {
	padding: 0 2px 0 2px;
	text-align: center;
}

span.red_cards {
	width: 20px;
	padding: 0 2px 0 2px;
    text-align: center;
}

span.red_cards_cell {
	padding: 0 2px 0 2px;
	text-align: center;
}

span.price {
	padding-right: 2px;
	text-align: center;
}

span.price_cell {
	white-space: nowrap;
	text-align: center;
}

/* nested highlight span would otherwise inherit display:table-cell from
   "div.teamDataRow span" and sit flush left; inline-block lets the parent center it */
div.teamDataRow span.price_cell > span {
	display: inline-block;
}

span.status {
	width: 20px;
	padding: 0 2px 0 2px;
    text-align: center;
}

span.status_cell {
	padding: 0 2px 0 2px;
	text-align: center;
}

span.bio {
	width: 20px;
	padding: 0 2px 0 2px;
    text-align: center;
}

span.bio_cell {
	padding: 0 1px 0 0;
	text-align: center;
}

span.skill {
	width: 35px;
	padding: 0 2px 0 2px;
    text-align: center;
}

span.skill_cell {
	padding: 0 1px 0 1px;
	text-align: center;
}

span.code {
	width: 40px;
	padding: 0 2px 0 2px;
    text-align: center;
}

span.code_cell {
	padding: 0 1px 0 1px;
	text-align: center;
}

div.teamDataRowTotal {
	display: flex;
	align-items: center;
}

span.total-stat {
	margin-left: auto;
	font-style: italic;
	font-size: 11px;
}

@media only screen and (max-width: 600px) {
	div#buttonPanel1{
		float: right;
		margin-left: 10px;
		margin-right: 0px;
		position: relative;
	}

	div#team1 {
		width: max-content;
	}

	div#team2 {
		margin: 0px 0px 0px 0px;
	}

	.result{
		display: inline-block;
	}

	div.teamData1, div.teamData2 {
		font: 10px arial,helvetica,clean,sans-serif !important;
	}

	span.shirtnumber {
		width: auto !important;
	}

	span.lineups {
		width: auto !important;
	}

	span.shirtnumber_cell {
		padding: 0 2px 0 2px !important;
	}

	span.name {
		width: auto !important;
		padding-left: 2px !important;
	}

	span.name_cell {
		width: auto  !important;
		padding-left: 2px !important;
	}

	span.flag {
		display:none !important;
	}

	span.flag_cell {
		display:none !important;
	}

	span.age {
		padding-right: 2px  !important;
		padding-left: 2px  !important;
	}

	span.age_cell {
		padding-right: 2px  !important;
		padding-left: 2px  !important;
	}

	span.appearances {
		display:none !important;
	}

	span.appearances_cell {
		display: none !important;
	}

	span.subs_in {
		display: none !important;
	}

	span.subs_in_cell {
		display: none !important;
	}

	span.subs_out {
		display: none !important;
	}

	span.subs_out_cell {
		display: none !important;
	}

	span.subs_on_bench {
		display: none !important;
	}

	span.subs_on_bench_cell {
		display: none !important;
	}

	span.yellow_cards {
		display: none !important;
	}

	span.yellow_cards_cell {
		display: none !important;
	}

	span.yellow_2_cards {
		display: none !important;
	}

	span.yellow_2_cards_cell {
		display: none !important;
	}

	span.red_cards {
		display: none !important;
	}

	span.red_cards_cell {
		display: none !important;
	}

	.modal-dialog{
		max-width: 100%;
	}
}
/* "Customize columns" control in the match modal header -----------------------
   The squad table is a CSS table, so a hidden column is a span removed from
   every row; this panel only flips the flags that drive those v-ifs.
   The toggle is an icon-only button on the right, above the tables and the
   "Result:" row (the button text lives in its title/aria-label tooltip), and
   the options open under it as a dropdown list of checkboxes. */
div.columnSettingsWrapper {
	position: relative;
	text-align: right;
	padding-right: 4px;
}

a.columnSettingsToggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 4px;
	border: solid 1px rgb(222,226,230);
	border-radius: 6px;
	background-color: rgb(255,255,255);
	color: rgb(108,117,125);
	text-decoration: none;
	transition: color .15s ease, border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}

a.columnSettingsToggle:hover {
	color: rgb(52,58,64);
	border-color: rgb(173,181,189);
	background-color: rgb(248,249,250);
	box-shadow: 0 1px 3px rgba(0,0,0,.08);
	text-decoration: none;
}

a.columnSettingsToggle[aria-expanded="true"] {
	color: rgb(0,123,255);
	border-color: rgb(0,123,255);
	background-color: rgb(240,247,255);
}

svg.columnSettingsIcon {
	flex: none;
	display: block;
}

div.columnSettings {
	position: absolute;
	right: 4px;
	top: 100%;
	z-index: 1060;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	min-width: 180px;
	margin-top: 4px;
	padding: 4px 0;
	border: solid 1px rgb(233,236,239);
	border-radius: 8px;
	background-color: rgb(255,255,255);
	box-shadow: 0 2px 8px rgba(33,37,41,.15);
	text-align: left;
}

label.columnSettingsItem {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 4px 12px;
	font-size: 12px;
	font-weight: normal;
	white-space: nowrap;
	color: rgb(52,58,64);
	cursor: pointer;
	user-select: none;
}

label.columnSettingsItem:hover {
	background-color: rgb(248,249,250);
}

label.columnSettingsItem input {
	flex: none;
	margin: 0;
	cursor: pointer;
}

span.columnSettingsLabel {
	flex: 1;
}

.x-badge { display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; margin:0 6px; border-radius:4px; background:#000; vertical-align:middle; position:relative; top:-2px; transition:opacity .15s, transform .15s; }
.x-badge img { width:9px; height:9px; filter:invert(1); }
a:hover .x-badge { opacity:.8; transform:translateY(-1px); }

/* "Top leagues" quick filter above the games table ---------------------------
   Toggle button (star + label) in the same style as the column-settings and
   sound buttons; lit blue while the filter is on. The "?" beside it opens a
   dropdown (reuses div.columnSettings) with the list of leagues. */
div.topLeaguesWrapper {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin: 0 0 6px 10px;
	vertical-align: middle;
}

a.topLeaguesToggle {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	box-sizing: border-box;
	height: 26px;
	padding: 0 8px;
	border: solid 1px rgb(222,226,230);
	border-radius: 6px;
	background-color: rgb(255,255,255);
	color: rgb(108,117,125);
	font-size: 12px;
	font-style: normal;
	font-weight: normal;
	line-height: 1;
	white-space: nowrap;
	text-decoration: none;
	user-select: none;
	transition: color .15s ease, border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}

a.topLeaguesToggle:hover {
	color: rgb(52,58,64);
	border-color: rgb(173,181,189);
	background-color: rgb(248,249,250);
	box-shadow: 0 1px 3px rgba(0,0,0,.08);
	text-decoration: none;
}

a.topLeaguesToggle.topLeaguesActive,
a.topLeaguesToggle.topLeaguesActive:hover {
	color: rgb(0,123,255);
	border-color: rgb(0,123,255);
	background-color: rgb(240,247,255);
	font-weight: bold;
}

svg.topLeaguesIcon {
	flex: none;
	display: block;
}

a.topLeaguesInfoToggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 18px;
	height: 18px;
	border: solid 1px rgb(222,226,230);
	border-radius: 50%;
	background-color: rgb(255,255,255);
	color: rgb(108,117,125);
	font-size: 11px;
	font-style: normal;
	font-weight: bold;
	line-height: 1;
	text-decoration: none;
	user-select: none;
}

a.topLeaguesInfoToggle:hover,
a.topLeaguesInfoToggle[aria-expanded="true"] {
	color: rgb(0,123,255);
	border-color: rgb(0,123,255);
	text-decoration: none;
}

div.topLeaguesInfo {
	left: 0;
	right: auto;
	max-width: 320px;
	padding: 8px 12px;
	font-size: 12px;
	font-style: normal;
	font-weight: normal;
	line-height: 1.4;
	white-space: normal;
	color: rgb(52,58,64);
}

@media (max-width: 767.98px) {
	div.topLeaguesInfo {
		max-width: calc(100vw - 48px);
	}
}

/* "Last 3 games" block of the match modal ------------------------------------
   Sits between the squad tables and the odds. A chevron link folds it; inside,
   one small table per team: date, fixture, score, Pinnacle closing 1X2 and the
   team's CLV (green = odds shortened, red = drifted). The team's own name and
   odds are in bold. */
div.pastGames {
	margin: 15px 0 0;
	padding: 0 4px;
}

a.pastGamesToggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: bold;
	color: rgb(52,58,64);
	text-decoration: none;
	user-select: none;
}

a.pastGamesToggle:hover {
	color: rgb(0,123,255);
	text-decoration: none;
}

svg.pastGamesChevron {
	flex: none;
	display: block;
	transition: transform .15s ease;
}

svg.pastGamesChevron.pastGamesChevronClosed {
	transform: rotate(-90deg);
}

div.pastGamesBody {
	margin-top: 8px;
}

div.pastGamesFlex {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
}

div.pastGamesTeam {
	flex: 1 1 320px;
	max-width: 480px;
	min-width: 0;
}

div.pastGamesTitle {
	margin-bottom: 4px;
	font-size: 12px;
	font-weight: bold;
	color: rgb(52,58,64);
}

table.pastGamesTable {
	width: 100%;
	margin: 0;
	font-size: 12px;
}

table.pastGamesTable th,
table.pastGamesTable td {
	padding: .25rem .35rem;
	text-align: center;
	vertical-align: middle;
	border-top: solid 1px rgb(233,236,239);
}

table.pastGamesTable thead th {
	border-top: 0;
	border-bottom: solid 1px rgb(222,226,230);
	font-weight: bold;
	white-space: nowrap;
}

table.pastGamesTable td.pastGamesOdds span span {
	display: inline-block;
	min-width: 30px;
}

span.pastGamesOwn {
	font-weight: bold;
}

td.pastGamesClvDown {
	color: rgb(20,160,60);
}

td.pastGamesClvUp {
	color: rgb(220,0,0);
}