.s_roster {
	position: absolute;

	display: flex;
	max-width: 1980px;
	width: 100%;
	height: 100%;
	min-height: 100%;
}

.s_roster.home {
	display: flex;
	justify-content: flex-end;

	left: 0;
}

.s_roster.away {
	display: flex;
	justify-content: flex-start;
	right: 0;
}

.s_roster_wrap {
	display: flex;
	--width: 1920px;
	min-width: var(--width);
	height: 100%;

	/* min-width: var(--width); */
	width: 100%;
}

.s_roster_wrap.home {
	flex-direction: row-reverse;
}

.s_roster_wrap.away {
	flex-direction: row;
}

.s_roster_bg {
	display: flex;
	position: absolute;
	top: 0;
	left: calc(var(--radius) * -1);
	right: calc(var(--radius) * -1);
	bottom: 0;
	background: #bcbcbc;
	background: #e2e2e2;
	background: #e2e2e2f0;
	border-radius: var(--radius);
}

.s_roster_main_container {
	display: flex;
	flex-grow: 1;
}

.s_roster_main {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	--gap: 30px;
	--vgap: 30px;
	--roster-width: 1137px;
	--roster-width: 1070px;
	--player-width: 187px;
	--player-height: 163px;
	--player-width: 260px;
	--player-width: 500px;
	--player-height: 250px;
	row-gap: var(--vgap);
}

.s_roster_gk {
	display: flex;
}

.s_roster_main_players {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: var(--gap);
	row-gap: var(--vgap);
	width: var(--roster-width);
	display: block;
	/* columns: 500px; */
	column-count: 2;
	column-gap: 120px;
	/* background: red; */
}

/* player_main */

.player_main {
	display: flex;
	width: var(--player-width);
	/* height: 200px; */
	background: #ffffff87;
	background: transparent;
	flex-direction: column;
	justify-content: flex-end;
	overflow: hidden;
	--top-radius: 20px;
	/* border-top-left-radius: var(
	--top-radius); */
	border-top-right-radius: var(--top-radius);
	border-top-right-radius: 27px;
	border-bottom-left-radius: 27px;
	margin-bottom: 40px;
}

.player_name_row {
	display: flex;
	height: 30px;
	padding: 12px;
	gap: 10px;
	padding-left: 23px;
	white-space: nowrap;
	font-size: 17px;
	height: 59px;
	font-size: 36px;
	padding: 0;
	padding-left: 0.3em;
	padding-top: 10px;
}

.player_main.home .player_name_row {
	background-color: var(--home-color);
	color: var(--home-color-text);
}

.player_main.away .player_name_row {
	background-color: var(--away-color);
	color: var(--away-color-text);
}

.player_main .photo {
	height: var(--player-height);
	width: 100%;
	background-size: cover;
	background-position: top center;
}
.player_main .num {
	display: flex;
	width: 14px;
	width: 1.6em;
	flex-shrink: 0;
	justify-content: center;
}

.player_main .num_text {
	display: flex;
}

.player_main .name {
	/* display: flex; */
	white-space: nowrap;
	transform-origin: left;
	--autofit: 400px;
}

.player_main .first_name {
	/* display: flex; */
	display: inline;
}

.player_main .last_name {
	/* display: flex; */
	transform-origin: left;
	--autofit: 100px;
	display: inline;
}

/* s_roster_reserve */

.s_roster_reserve_container {
	display: flex;
	align-items: center;
}

.s_roster_reserve {
	display: flex;
	--width: 595px;
	min-width: var(--width);
	max-width: var(--width);
	height: 100%;
	align-items: center;
	padding: 70px;
	padding-left: 111px;
	/* margin: 70px; */
	/* --radius: 88px; */
}

.s_roster_reserve.home {
	background-color: var(--home-color);
	color: var(--home-color-text);
	border-top-right-radius: var(--radius);
	border-bottom-right-radius: var(--radius);
}

.s_roster_reserve.away {
	background-color: var(--away-color);
	color: var(--away-color-text);
	border-top-left-radius: var(--radius);
	border-bottom-left-radius: var(--radius);
}

.s_roster_reserve_wrap {
	display: flex;
	width: 100%;
	min-height: 400px;
	flex-direction: column;
	white-space: nowrap;
}

.s_roster_logo_container {
	position: absolute;
	display: flex;
	--size: 200px;
	--xpos: calc(var(--size) / -2);
	height: var(--size);
	width: var(--size);
}

.s_roster_logo_container.home {
	right: var(--xpos);
}

.s_roster_logo_container.away {
	left: var(--xpos);
}

.s_roster_logo {
	display: flex;
	height: var(--size);
	width: var(--size);
	background-size: contain;
}

.s_roster_teamname {
	display: flex;
	font-size: 74px;
	margin-bottom: 47px;
	font-weight: 900;
}

.s_roster_reserve_players {
	display: flex;
	flex-direction: column;
	gap: 17px;
}

/* player_reserve */

.player_reserve {
	display: flex;
	gap: 10px;
	font-size: 26px;
	text-transform: uppercase;
}

.player_reserve .num {
	display: flex;
	width: 1.5em;
}

.player_reserve .num_text {
	display: flex;
}

.player_reserve .first_name {
	display: flex;
}

.player_reserve .last_name {
	display: flex;
}

/**/

.s_roster_z_element {
	position: absolute;
	left: 0;
	display: flex;
	--height: 710px;
	height: 100%;
	width: 100%;
	mask-image: url('../assets/images_uz/z-element2.svg');
	-webkit-mask-image: url('../assets/images_uz/z-element2.svg');
	mask-size: 115%;
	-webkit-mask-size: 115%;
	mask-repeat: no-repeat;
	-webkit-mask-repeat: no-repeat;
	mask-position: left;
	-webkit-mask-position: left;
	/* mask-clip: border-box; */
	background-color: white;
	opacity: 0.15;
}

.s_roster_z_element.home {
	background-color: var(--home-color-text);
}

.s_roster_z_element.away {
	background-color: var(--away-color-text);
}

.s_roster .plgrid_container {
	display: flex;
	flex-direction: row;
	gap: 10px;
	flex-grow: 1;
	/* 	background: url(../assets/images_uz/score_footfield.svg);
	background-repeat: no-repeat; */
}

.s_roster .footfield {
	--plgrid-gap: 20px;
	display: flex;
	flex-direction: column;
	align-items: center;
	/* background: green; */
	/* padding: var(--plgrid-gap); */
	gap: 0;
	/* 	background: url(../images/footfield.svg);
	background-repeat: no-repeat;
	background-size: 100% auto; */
	flex-grow: 1;
	margin-top: 0;
}

.s_roster .footfield .bg {
	--oversize: 30px;
	position: absolute;
	top: 0;
	left: calc(0px - var(--oversize));
	right: calc(0px - var(--oversize));
	bottom: 0;
	background: url(../assets/images_uz/score_footfield.svg);
	background-repeat: no-repeat;
	background-size: 1430px auto;
	background-position: calc(50% - (var(--oversize) / 2)) 173px;
	background-position: center 222px;
}

.s_roster .cell.gk {
	display: flex;
	margin-top: 91px;
	margin-bottom: -4px;
	grid-area: gk;
}

.s_roster .grid {
	display: grid;
	/* grid-column: 9; */
	grid-template-columns: repeat(var(--cols-count), 1fr);
	grid-template-rows: repeat(var(--rows-count), 1fr);
	gap: 0;
	/* padding: 20px; */
	height: min-content;
	/* background: green; */
	/* margin: 0px 65px; */
	width: 1100px;
	height: 794px;
	justify-items: center;
	/* margin-top: 25px; */
}

.s_roster .cell {
	display: flex;
	border: 1px solid #b0b0b0;
	border: 1px solid transparent;
	min-width: 102px;
	height: 169px;
	cursor: grab;
	/* z-index: 1; */
	overflow: visible;
	align-items: center;
	justify-content: center;
}

.s_roster .cell:hover {
	background-color: rgba(255, 255, 255, 0.161);
}

.s_roster .grid .cell {
	width: 100%;
	height: 100%;
}
.s_roster .grid .cell.dragover {
	border-color: red;
}

.s_roster .footfield .cell_player {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 152px;
	/* height: 280px; */
	width: 118px;
	/* z-index: 2; */
	/* background: red; */
	/* border-radius: 28px; */
	--radius: 28px;
	/* overflow: hidden; */
	flex-direction: column;
	position: absolute;
	/* border-top-left-radius: 0px; */
	/* border-bottom-right-radius: 0px; */
}

.s_roster .footfield .cell_player * {
	/* z-index: 2; */
}

.s_roster .footfield .cell_player .captain{
	position: absolute;
	bottom: 28px;
	left: -19px;
	width:38px;
	height:38px;
	background-image:url(../../assets/captain.svg);
	z-index: 4;
	display: none;
}

.s_roster .footfield .cell_player.captain .captain{
	display: flex;
}

.s_roster .footfield .cell_player .tshirt {
	display: flex;
	width: 100px;
	height: 100px;
	position: absolute;
	background: url(../images/t-shirt.png);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: top center;
	z-index: 1;
}

.s_roster .footfield .cell_player .num {
	display: flex;
	/* background-color: black; */
	/* min-width: 42px; */
	width: 100%;
	justify-content: center;
	/* height: 100%; */
	align-items: center;
	/* user-select: none; */
	font-weight: 800;
	font-size: 77px;
	color: black;
	/* position: absolute; */
	z-index: 3;
	flex-grow: 1;
	border-bottom: 1px solid white;
	border-top-right-radius: var(--radius);
}

.s_roster .footfield.home .cell_player .num {
	color: var(--home-color-text);
	background-color: var(--home-color);
}

.s_roster .footfield.away .cell_player .num {
	color: var(--away-color-text);
	background-color: var(--away-color);
}

.s_roster .footfield .cell_player .tshirt {
    display: flex;
    width: 140px;
    width: 100%;
    height: 100%;
    position: absolute;
    /* background: url(../images/t-shirt.png); */
    /* background-repeat: no-repeat; */
    /* background-size: contain; */
    /* background-position: top center; */
    background: red;
    z-index: -1;
    -webkit-mask-image: url(../../assets/grid_extraz_z.svg);
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
}

.s_roster .footfield .cell_player .name {
	display: flex;
	/* position: absolute; */
	/* bottom: -15px; */
	/* color: var(--home-color-text); */
	font-size: 10px;
	font-weight: bold;
	/* font-weight: 500; */
	padding: 2px 5px;
	background-color: white;
	z-index: 3;
	width: 100%;
	height: 22px;
	align-items: center;
	/* padding-left: 19px; */
	justify-content: center;
	text-transform: uppercase;
	border-bottom-left-radius: var(--radius);
}

.s_roster .footfield [player-prop-c="1"] .name::after{
	/* content:"(c)"; */
	margin-left:5px;
}

.s_roster .footfield.home .cell_player .name {
	color: var(--home-color2-text);
	background-color: var(--home-color2);
}

.s_roster .footfield.away .cell_player .name {
	color: var(--away-color2-text);
	background-color: var(--away-color2);
}

.s_roster .footfield .cell_player .first_name {
	display: none;
}

.s_roster .footfield .cell_player .last_name {
	display: flex;
}

/* players color home */
.s_roster .home .footfield .cell.gk .cell_player .num {
    background-color: var(--extra_grid_color_gk_num_bg_home);
    color: var(--extra_grid_color_gk_num_text_home);
}

.s_roster .home .footfield .cell.gk .cell_player .name {
    background-color: var(--extra_grid_color_gk_name_bg_home);
    color: var(--extra_grid_color_gk_name_text_home);
}

.s_roster .home .footfield .cell.gk .cell_player .tshirt {
    background-color: var(--extra_grid_color_gk_extraz_bg_home);
    color: var(--extra_grid_color_gk_extraz_text_home);
}


.s_roster .home .footfield .cell_player .num {
    background-color: var(--extra_grid_color_player_num_bg_home);
    color: var(--extra_grid_color_player_num_text_home);
}

.s_roster .home .footfield .cell_player .name {
    background-color: var(--extra_grid_color_player_name_bg_home);
    color: var(--extra_grid_color_player_name_text_home);
}

.s_roster .home .footfield .cell_player .tshirt {
    background-color: var(--extra_grid_color_player_extraz_bg_home);
    color: var(--extra_grid_color_player_extraz_text_home);
}

/* players color away */
.s_roster .away .footfield .cell.gk .cell_player .num {
    background-color: var(--extra_grid_color_gk_num_bg_away);
    color: var(--extra_grid_color_gk_num_text_away);
}

.s_roster .away .footfield .cell.gk .cell_player .name {
    background-color: var(--extra_grid_color_gk_name_bg_away);
    color: var(--extra_grid_color_gk_name_text_away);
}

.s_roster .away .footfield .cell.gk .cell_player .tshirt {
    background-color: var(--extra_grid_color_gk_extraz_bg_away);
    color: var(--extra_grid_color_gk_extraz_text_away);
}

.s_roster .away .footfield .cell_player .num {
    background-color: var(--extra_grid_color_player_num_bg_away);
    color: var(--extra_grid_color_player_num_text_away);
}

.s_roster .away .footfield .cell_player .name {
    background-color: var(--extra_grid_color_player_name_bg_away);
    color: var(--extra_grid_color_player_name_text_away);
}

.s_roster .away .footfield .cell_player .tshirt {
    background-color: var(--extra_grid_color_player_extraz_bg_away);
    color: var(--extra_grid_color_player_extraz_text_away);
}