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#textFormatTop1, div#textFormatTop2,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;
}