.Leagues ul.TABI3-cards, .Teams ul.TABI3-cards { display: -ms-grid; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--Main-Gap); padding: 0; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center } ul.TABI3-cards li.card { display: -webkit-box; display: -ms-flexbox; display: flex; position: relative; background-color: var(--Body-BG); -webkit-border-radius: var(--Main-Border-Radius); -moz-border-radius: var(--Main-Border-Radius); border-radius: var(--Main-Border-Radius); font-size: var(--Font-Size-2); padding: var(--Main-Padding); border: var(--Main-Border); -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; overflow: hidden } ul.TABI3-cards li.card a { display: -webkit-box; display: -ms-flexbox; display: flex; width: var(--Full-width); -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: var(--Main-Gap); -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center } li.card span.card-image { display: -webkit-box; display: -ms-flexbox; display: flex; background-color: #b3cbdf; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; width: 110px; height: 110px; border: 10px solid #e9ecef; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; overflow: hidden; -webkit-filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.1)); filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.1)) } li.card span.card-image img { display: table; width: 50px !important; height: 50px !important; margin: 0 auto; object-fit: contain; -webkit-filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.1)); filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.1)) } li.card span.card-name { display: block; width: var(--Full-width); background-color: var(--Secondary-BG); border: var(--Main-Border); margin: 0; padding: 0; -webkit-border-radius: var(--Main-Border-Radius); -moz-border-radius: var(--Main-Border-Radius); border-radius: var(--Main-Border-Radius); text-align: center; height: 35px; overflow: hidden } .Night li.card span.card-image { border: 10px solid #191d2d } .Standing, .Team, .Player { padding: var(--Main-Padding) } .Leagues-list, .Teams-list { display: block; position: relative; padding: var(--Main-Padding); overflow: hidden } .EntityHeader { display: -webkit-box; display: -ms-flexbox; display: flex; position: relative; background: var(--Body-BG); margin-bottom: var(--Margin-4); padding: 0; -webkit-border-radius: var(--Main-Border-Radius); -moz-border-radius: var(--Main-Border-Radius); border-radius: var(--Main-Border-Radius); width: var(--Full-width); overflow: hidden; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center } .EntitySection { display: block; position: relative } .EntityCover { display: block; position: absolute; width: var(--Full-width); height: 100%; overflow: hidden } .EntityCover .Cover { position: absolute; width: var(--Full-width); height: 100%; background: url(https://cdn.jsdelivr.net/gh/tabi3livexyz/images/card-light-bg.svg) no-repeat center center var(--Body-BG); background-size: 100% 100%; overflow: hidden } body.Night .EntityCover .Cover { background: url(https://cdn.jsdelivr.net/gh/tabi3livexyz/images/card-dark-bg.svg) no-repeat center center var(--Body-BG) } .EntityBanner { display: -webkit-box; display: -ms-flexbox; display: flex; position: relative; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 20px; background: linear-gradient(135deg, rgba(57, 219, 191, 0.15), rgba(57, 219, 191, 0.05)); overflow: hidden } .Player .EntityBanner, .Player .EntityCover { -webkit-border-radius: var(--Main-Border-Radius) !important; -moz-border-radius: var(--Main-Border-Radius) !important; border-radius: var(--Main-Border-Radius) !important } .EntityImg { display: -webkit-box; display: -ms-flexbox; display: flex; background-color: var(--Secondary-BG); height: 110px; width: 110px; margin-left: 24px; margin-right: var(--Margin-4); -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; -webkit-box-shadow: var(--Main-Box-Shadow); -moz-box-shadow: var(--Main-Box-Shadow); box-shadow: var(--Main-Box-Shadow); -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column } .EntityImg img { display: table; height: 60px; width: 60px; margin: auto; vertical-align: top; object-fit: contain } .EntityInfo { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: flex-start; -ms-flex-align: flex-start; align-items: flex-start; height: 110px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center } .Player .EntityInfo { -webkit-box-pack: space-between !important; -ms-flex-pack: space-between !important; justify-content: space-between !important } .EntityTitle { display: block; position: relative; -webkit-box-align: center; color: var(--Gray-Color-1); -ms-flex-align: center; align-items: center; font-size: var(--Font-Size-6); font-weight: var(--Font-Weight-1); overflow: hidden } body.Night .EntityTitle { color: var(--Main-Font-Color) } .EntityTitle .EntityName { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: flex-end; -ms-flex-align: flex-end; align-items: flex-end } .EntityMeta { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; gap: 10px } .MetaItem { font-size: var(--Font-Size-2); color: var(--Main-Color); font-weight: var(--Font-Weight-1) } span.Entity-Imgs { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: var(--Main-Gap) } span.M-img { display: -webkit-box; display: -ms-flexbox; display: flex; width: 30px; height: 30px; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center } span.M-img img { max-width: 30px; max-height: 30px; width: auto; height: auto; object-fit: contain } span.ShortBio { font-size: var(--Font-Size-2); line-height: 25px; color: var(--Main-Color) } .Buttons { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 8px; width: var(--Full-width); padding: var(--Main-Padding); -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center } .Buttons button { cursor: pointer; width: var(--Full-width); color: var(--White-Color); font-family: inherit; border: 0; -webkit-border-radius: var(--Main-Border-Radius); -moz-border-radius: var(--Main-Border-Radius); border-radius: var(--Main-Border-Radius); background: var(--Gray-Color-1); font-size: var(--Font-Size-2); text-align: center; padding: var(--Padding-1) 0; overflow: hidden } .Scorers-Tabs, .Stages-Tabs { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 8px; margin-bottom: var(--Margin-4) } .Scorers-Tab, .Stages-Tab { cursor: pointer; width: var(--Full-width); -webkit-border-radius: var(--Main-Border-Radius); -moz-border-radius: var(--Main-Border-Radius); border-radius: var(--Main-Border-Radius); background: var(--Body-BG); font-size: var(--Font-Size-2); text-align: center; padding: var(--Padding-1) 0; border: var(--Main-Border); overflow: hidden } .Buttons button.active, .Scorers-Tab.active, .Stages-Tab.active { background: var(--Main-Color); color: var(--White-Color); text-shadow: 1px 0 5px #4b4b4b } .Night .Buttons button:not(.active) { background: var(--Secondary-BG) } table.standings, table.players { width: var(--Full-width); font-size: var(--Font-Size-2); border-spacing: 2px; margin: 0 auto } table.standings thead tr, table.players thead tr { background-color: #718ba1; color: var(--White-Color) } table.standings th:not(:nth-of-type(2)) { width: 65px } table.standings th, table.players th { -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; padding: var(--Padding-2) 0; text-align: center } table.standings th.won { background-color: #00800030 !important } table.standings th.draw { background-color: #a9710930 !important } table.standings th.lost { background-color: #ff000030 !important } table.standings tbody tr.odd th:not(.won):not(.draw):not(.lost) { background: var(--Body-BG) } table.standings tbody tr.even th:not(.won):not(.draw):not(.lost) { background: #eceef2 } table.standings tbody tr.even.highlighted th, table.standings tbody tr.odd.highlighted th { background: #c4d9ff !important } table.standings th span.team a, th span.player-info a, span.player-team-info a { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; width: var(--Full-width); gap: 10px; padding-right: 10px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: flex-start; -ms-flex-pack: flex-start; justify-content: flex-start } span.s-team-img, span.player-img, span.player-team-img { display: block; position: relative; width: 30px; height: 30px; overflow: hidden } span.s-team-img img, span.player-img img, span.player-team-img img { max-width: 30px !important; max-height: 30px !important; width: auto; height: auto !important; margin: 0 auto } span.s-team-name, span.player-name, span.player-team-name { font-size: var(--Font-Size-1); height: 35px; overflow: hidden } th.against span.s-team-img { margin: auto !important } .standings-group { display: -webkit-box; display: -ms-flexbox; display: flex; position: relative; overflow: hidden; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 8px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center } .standings-group:not(:last-child) { margin-bottom: var(--Margin-4) } h5.group-name, .Match-Date-Title, .position, h5.player-h5 { display: block; width: var(--Full-width); background: radial-gradient(circle, rgba(89, 152, 220, 0.6) 0, rgb(35, 35, 35) 130%); color: var(--White-Color); font-weight: var(--Font-Weight-1); text-align: center; font-size: var(--Font-Size-3); padding: var(--Padding-2); -webkit-border-radius: var(--Main-Border-Radius); -moz-border-radius: var(--Main-Border-Radius); border-radius: var(--Main-Border-Radius); } table.standings thead tr th span.hide, .Buttons button span.hide { display: none } table.players th:not(:nth-of-type(2)):not(:nth-of-type(3)) { width: 60px } table.players tbody tr.odd th:not(.tnt) { background-color: #e4eeff } table.players tbody tr.even th:not(.tnt) { background-color: #eceef2 } .keys { display: -webkit-box; display: -ms-flexbox; display: flex; background-color: var(--Body-BG); padding: var(--Main-Padding); gap: var(--Main-Gap); overflow: hidden; position: relative; -webkit-border-radius: var(--Main-Border-Radius); -moz-border-radius: var(--Main-Border-Radius); border-radius: var(--Main-Border-Radius); -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-top: var(--Margin-4) } .keys span.key { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center } span.destinations-color { width: 5px; height: 25px; display: inline-block; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; margin-left: var(--Margin-2) } span.destinations-name { font-size: var(--Font-Size-1) } .Night table.standings tbody tr.even th:not(.won):not(.draw):not(.lost), .Night table.standings tbody tr.odd th:not(.won):not(.draw):not(.lost), .Night table.players tbody tr.even th:not(.tnt), .Night table.players tbody tr.odd th:not(.tnt) { background: var(--Body-BG) } .Night table.standings tbody tr.even.highlighted th, .Night table.standings tbody tr.odd.highlighted th { background: rgb(57 219 191 / 15%) !important } .Night table.standings thead tr, .Night table.players thead tr { background-color: var(--Black-BG) } .CollapseTitle { display: block; width: var(--Full-width); background: radial-gradient(circle, rgba(89, 152, 220, 0.6) 0, rgb(35, 35, 35) 130%); color: var(--White-Color); font-weight: var(--Font-Weight-1); text-align: center; font-size: var(--Font-Size-3); padding: var(--Padding-2); -webkit-border-radius: var(--Main-Border-Radius); -moz-border-radius: var(--Main-Border-Radius); border-radius: var(--Main-Border-Radius); margin-bottom: var(--Margin-4) } .collapse-items { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; width: var(--Full-width); -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: var(--Main-Gap); -webkit-box-align: center; -ms-flex-align: center; align-items: center } .collapse-items:not(:last-child) { margin-bottom: var(--Margin-4) } .collapse-item-wrap { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: var(--Main-Gap); width: var(--Full-width); -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center } .collapse-header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; cursor: pointer; background: var(--Body-BG); -webkit-border-radius: var(--Main-Border-Radius); -moz-border-radius: var(--Main-Border-Radius); border-radius: var(--Main-Border-Radius); font-size: var(--Font-Size-2); border: var(--Main-Border); -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: var(--Main-Padding); width: var(--Full-width); -webkit-box-pack: space-between; -ms-flex-pack: space-between; justify-content: space-between } .collapse-header .Content { margin-right: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-left: 20px; gap: 12px } .collapse-header .Content span { color: var(--Main-Color) } .collapse-header .Content .star { display: -webkit-box; display: -ms-flexbox; display: flex; width: 15px; height: 15px; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center } .collapse-header .Content .star svg { -webkit-transform: none !important; -moz-transform: none !important; -ms-transform: none !important; -o-transform: none !important; transform: none !important } .collapse-item-wrap .collapse-header svg { -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg) } .collapse-item-wrap .collapse-header.active svg { -webkit-transform: rotate(270deg); -moz-transform: rotate(270deg); -ms-transform: rotate(270deg); -o-transform: rotate(270deg); transform: rotate(270deg) } .collapse-content { width: 90%; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 8px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center } .collapse-content .EventItemLink { display: block; width: var(--Full-width); background: var(--Body-BG); border: var(--Main-Border); color: var(--Main-Font-Color); -webkit-border-radius: var(--Main-Border-Radius); -moz-border-radius: var(--Main-Border-Radius); border-radius: var(--Main-Border-Radius) } .EventTeams { display: -webkit-box; display: -ms-flexbox; display: flex; width: var(--Full-width); -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; flex-wrap: wrap } .EventTeam, .EventCenter { display: -webkit-box; display: -ms-flexbox; display: flex; width: 33.3333%; height: 60px; -webkit-box-flex: 0 0 33.3333% !important; -ms-flex: 0 0 33.3333% !important; flex: 0 0 33.3333% !important; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center } .EventCenter { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column } .EventTeam.Right { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row } .EventTeam.Left { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse } .EventTeamLogo { display: flex; position: relative; width: 50%; height: 100%; overflow: hidden; align-items: center; justify-content: center } .EventTeamLogo img { max-width: 30px !important; max-height: 30px !important; width: auto; height: auto !important; margin: 0 auto } .EventTeamName { display: -webkit-box; display: -ms-flexbox; display: flex; width: 50%; height: 100%; margin: 0 auto; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font-size: var(--Font-Size-1) } .EventTiming { display: -webkit-box; display: -ms-flexbox; display: flex; margin: 0 auto; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; line-height: 20px; font-size: var(--Font-Size-1) } .EventTiming>div { display: block; height: 22px; line-height: 22px; margin: 0; font-size: var(--Font-Size-1) } .Match-Date-Group, .squad-grid { display: -ms-grid; display: grid; gap: 6px } .Match-Date-Group:not(:last-of-type), .squad-grid:not(:last-of-type) { margin-bottom: var(--Margin-4) !important } a.TABI3LIVE-Match { color: var(--Main-Font-Color) !important } .Match-Teams { display: -ms-grid; display: grid; grid-template-columns: 2fr 1fr 2fr; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background: var(--Body-BG); border: var(--Main-Border); width: var(--Full-width); margin: 0 auto; padding: var(--Padding-2); -webkit-border-radius: var(--Main-Border-Radius); -moz-border-radius: var(--Main-Border-Radius); border-radius: var(--Main-Border-Radius); gap: var(--Main-Gap) } .Right-Team { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: flex-start; -ms-flex-pack: flex-start; justify-content: flex-start; gap: var(--Main-Gap) } .Left-Team { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: flex-start; -ms-flex-pack: flex-start; justify-content: flex-start; gap: var(--Main-Gap) } .TABI3LIVE-Scorers-Header .Position { text-align: start; margin-right: 18px } .Right-Team img, .Left-Team img { width: 30px; height: 30px; object-fit: contain; aspect-ratio: 1/1 } .Match-Time, .Match-Goals, .Match-Round { text-align: center; font-size: var(--Font-Size-1); line-height: 18px } .Match-Center { display: -ms-grid; display: grid; gap: 6px; -webkit-box-align: center; -ms-flex-align: center; align-items: center } .Club { width: 30px; height: 30px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; justify-self: center } .Right-Team span, .Left-Team span { font-size: var(--Font-Size-1) } .Club img { width: 100%; height: 100%; object-fit: contain; aspect-ratio: 1/1 } .TeamList { display: -webkit-box; display: -ms-flexbox; display: flex; gap: var(--Main-Gap); position: relative; overflow: hidden; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center } table.team-members { display: table; width: var(--Full-width); border-spacing: 2px; font-size: var(--Font-Size-2); margin: 0 auto } table.team-members thead tr { background-color: #718ba1; color: var(--White-Color) } table.team-members tbody tr { background-color: #e4eeff } table.team-members thead tr th, table.team-members tbody tr td { position: relative; -webkit-border-radius: var(--Main-Border-Radius); -moz-border-radius: var(--Main-Border-Radius); border-radius: var(--Main-Border-Radius); padding: 6px 0; text-align: center; overflow: hidden; vertical-align: middle } table.team-members thead tr th:nth-child(1), table.team-members tbody tr td:nth-child(1), table.team-members thead tr th:nth-child(4), table.team-members tbody tr td:nth-child(4), table.team-members thead tr th:nth-child(5), table.team-members tbody tr td:nth-child(5) { width: 10% } table.team-members thead tr th:nth-child(2), table.team-members tbody tr td:nth-child(2), table.team-members thead tr th:nth-child(3), table.team-members tbody tr td:nth-child(3) { width: 35% } table.team-members tbody tr td img.playerlogo, table.team-members tbody tr td img.nationallogo { display: table; width: var(--Full-width); height: auto; max-width: 40px; max-height: 40px; margin: 0 auto } .Night .TeamName, .Night table.team-members tbody tr { background: var(--Body-BG) } .Night table.team-members thead tr, .Night span.team-player { background-color: var(--Black-BG) } td.PlayerNum { color: #444 !important } .player-data, .PlayerStatistics { display: -webkit-box; display: -ms-flexbox; display: flex; gap: var(--Main-Gap); position: relative; overflow: hidden; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center } table.player-table, table.SeasonStatistics { width: var(--Full-width); border-spacing: 2px; position: relative; overflow: hidden } table.player-table tbody tr, table.SeasonStatistics tbody tr { background: var(--Body-BG) } table.player-table tbody tr th, table.SeasonStatistics tbody tr th { width: 50%; -webkit-border-radius: var(--Main-Border-Radius); -moz-border-radius: var(--Main-Border-Radius); border-radius: var(--Main-Border-Radius); padding: var(--Padding-3); font-size: var(--Font-Size-2); text-align: center } .PlayerStats { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; grid-gap: 5px; width: 100%; -webkit-box-align: center; -ms-flex-align: center; align-items: center; overflow: hidden } .PlayerStats .Stats { display: -webkit-box; display: -ms-flexbox; display: flex; max-width: 130px; margin: auto; height: 130px; background: var(--Body-BG); -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: var(--Full-width); overflow: hidden; border: var(--Main-Border); -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px } .PlayerStats .Stats span { font-size: var(--Font-Size-1); height: 40px } .PlayerStats .Stats span:not(:first-of-type) { height: 30px !important } .PlayerStats .Stats span img { width: 40px; height: 40px } table.SeasonStatistics tbody tr th span { width: 50%; float: right; font-size: var(--Font-Size-1); text-align: center !important } table.SeasonStatistics tbody tr th span:First-of-type { border-left: 2px solid #d1e7ff } ul.player-transfers { display: block; position: relative; width: 100%; background: var(--Body-BG); -webkit-border-radius: var(--Main-Border-Radius); -moz-border-radius: var(--Main-Border-Radius); border-radius: var(--Main-Border-Radius); padding: var(--Main-Padding); overflow: hidden } ul.player-transfers li { display: -ms-grid; display: grid; grid-auto-rows: 50px; grid-template-columns: calc(50% - 6px) 12px 1fr; place-items: start; padding: 0; margin: 0 } ul.player-transfers li span.s-r { display: -ms-grid; display: grid; grid-auto-rows: 50px; grid-column: 1; grid-template-columns: repeat(2, auto); grid-template-rows: repeat(2, 25px); width: 100%; -webkit-box-align: center; -ms-flex-align: center; align-items: center } ul.player-transfers li span.s-r span.s-s { font-size: var(--Font-Size-2); padding-left: 8px; grid-column: 1; grid-row: 1 } ul.player-transfers li span.s-r span.s-d { color: #6c757d; font-size: var(--Font-Size-1); grid-column: 1; grid-row: 2 } ul.player-transfers li span.s-r span.s-p { align-self: center; font-size: 14px; grid-column: 2; grid-row: 1/3; justify-self: end; padding-left: 8px } ul.player-transfers li span.s-c { -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-flex; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; grid-column: 2; height: 100%; -webkit-justify-content: space-between; -webkit-box-pack: space-between; -ms-flex-pack: space-between; justify-content: space-between; padding: 0 2px } ul.player-transfers li span.s-c span.l-t { background-color: var(--Main-Color); height: calc(50% - 10px); width: 1px } ul.player-transfers li span.s-c span.l-c.false, ul.player-transfers li span.s-c span.l-c.true { border: 1px solid var(--Main-Color); -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; height: 10px; margin: 2px 0; width: 10px } ul.player-transfers li span.s-c span.l-c.true { background-color: var(--Main-Color) } ul.player-transfers li span.s-c span.l-b { background-color: var(--Main-Color); height: calc(50% - 10px); width: 1px } ul.player-transfers li span.s-l { display: -ms-grid; display: grid; grid-auto-rows: 50px; grid-column: 3; grid-template-columns: repeat(2, auto); grid-template-rows: repeat(2, 25px) } ul.player-transfers li span.s-l span.s-img { align-self: center; box-sizing: border-box; display: -webkit-box; display: -ms-flexbox; display: flex; grid-column: 4; grid-row: 1/3; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 0 8px; width: 60px } ul.player-transfers li span.s-l span.s-img img { max-width: 32px; max-height: 32px; width: auto; height: auto; visibility: visible } ul.player-transfers li:first-child span.s-c span.l-t, ul.player-transfers li:last-child span.s-c span.l-b { background-color: #ffffff00 } ul.player-trophies { display: -ms-grid; display: grid; grid-template-columns: repeat(auto-fit, minmax(121px, 1fr)); gap: var(--Main-Gap); width: var(--Full-width); -webkit-border-radius: var(--Main-Border-Radius); -moz-border-radius: var(--Main-Border-Radius); border-radius: var(--Main-Border-Radius); padding: var(--Main-Padding); background: var(--Body-BG) } ul.player-trophies li { display: -webkit-box; display: -ms-flexbox; display: flex; height: 120px; width: var(--Full-width); margin: 0 auto; position: relative; background-color: var(--Secondary-BG); -webkit-border-radius: var(--Main-Border-Radius); -moz-border-radius: var(--Main-Border-Radius); border-radius: var(--Main-Border-Radius); -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: space-around; -ms-flex-pack: space-around; -webkit-box-pack: space-between; -ms-flex-pack: space-between; justify-content: space-between; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding: var(--Padding-4); border: var(--Main-Border) } span.trophies-numbers { display: -webkit-box; display: -ms-flexbox; display: flex; position: absolute; top: 6px; right: 6px; background-color: var(--Main-Color); color: var(--White-Color); width: 25px; height: 25px; -webkit-border-radius: var(--Border-Radius-4); -moz-border-radius: var(--Border-Radius-4); border-radius: var(--Border-Radius-4); -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row } .trophies-img { display: -webkit-box; display: -ms-flexbox; display: flex; width: 70px; height: 70px; margin: 0 auto; padding: var(--Padding-2); -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center } .trophies-img img { display: table; margin: auto; width: auto; height: auto; max-width: 60px; max-height: 60px; object-fit: contain } span.trophie-name { display: block; font-size: var(--Font-Size-1); line-height: 25px; text-align: center; height: 30px; overflow: hidden } @media screen and (max-width:480px) { table.standings th { width: 30px !important } table.standings tbody tr th img.teamlogo { width: 30px; height: 30px } th span.team-name { display: none } th span.player-info { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: flex-start; -ms-flex-align: flex-start; align-items: flex-start; -webkit-box-pack: flex-start; -ms-flex-pack: flex-start; justify-content: flex-start; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column } table.team-members thead tr th:nth-child(3), table.team-members tbody tr td:nth-child(3) { display: none } .PlayerStats { display: -ms-grid; display: grid; grid-template-columns: repeat(2, 1fr) } table.players th:nth-of-type(3) { display: none } th span.player-name { font-size: var(--Font-Size-1) } .LeagueImg img { height: 60px; width: 60px } table.standings thead tr th span.hide, .Buttons button span.hide { display: block } table.standings thead tr th span.show, .Buttons button span.show { display: none } table.SeasonStatistics tbody tr th span { width: 100% } table.SeasonStatistics tbody tr th span:first-of-type { border-left: none } table.player-table tbody tr th, table.SeasonStatistics tbody tr th { font-size: var(--Font-Size-1) } } @media screen and (max-width:576px) { .LeaguePanner { -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center } .LeagueInfo { -webkit-box-pack: flex-end; -ms-flex-pack: flex-end; justify-content: flex-end; -webkit-box-align: center; -ms-flex-align: center; align-items: center } .LeagueImg { margin: 0 auto } span.League { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: space-around; -ms-flex-pack: space-around; justify-content: space-around; margin-bottom: 8px } .Buttons button { font-size: 12px } table.standings th { width: 50px; margin: auto } table.standings th span.team { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: flex-start; -ms-flex-align: flex-start; align-items: flex-start; -webkit-box-pack: space-between; -ms-flex-pack: space-between; justify-content: space-between } table.standings th:nth-of-type(8), span.s-team-name { display: none } table.standings th span.team a { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 0 !important } .keys { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column !important; flex-direction: column !important; -webkit-box-align: flex-start; -ms-flex-align: flex-start; align-items: flex-start } table.standings th span.team { margin-bottom: 0 } table.standings th:nth-of-type(7) { display: none } } @media screen and (max-width:768px) { .EntityBanner { padding: 16px 8px; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; text-align: center } .EntityImg { margin: 0 auto 10px } .EntityInfo { height: auto; -webkit-box-align: center; -ms-flex-align: center; align-items: center } .EntityTitle { font-size: 20px } th span.team-info { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: flex-start; -ms-flex-align: flex-start; align-items: flex-start } table.standings th span.team { width: 100%; margin-bottom: 6px } } @media screen and (max-width:992px) { .PlayerStats { display: -ms-grid; display: grid; grid-template-columns: repeat(3, 1fr) } }