/* Sevilla.css - ESV Rode Lopers Custom Styling              */
/* Aangepast voor ESV Rode Lopers Schaakvereniging           */
/* Gebaseerd op website thema kleuren en styling             */
/* Origineel template (C)2006-2024 JBF Software              */
/*                                                            */
/* Rode Lopers kleurenschema:                                */
/* Primair: #8B1538, Secundair: #A91D3A, Accent: #F5F5F5    */

/* MainTitle is the overall style for the main data block     */
/* which is the part that contains the unique (player, round, */
/* ....) data for the specific page                           */
.MainTitle {
	border-style: solid;
	border-width: thin;
	width: 440px;
	text-align: center;
}

/* MainTitleRow is the style for a row in the main title      */
.MainTitleRow {
	color: #F5F5F5;
	background: linear-gradient(135deg, #8B1538 0%, #A91D3A 100%);
	font-weight: bold;
	padding: 15px;
	border-radius: 8px 8px 0 0;
}

/* Unit is the style for a page unit                          */
/* used mainly to style the main boxes                        */
.Unit {
	margin: 2px;
	font-family: helvetica, arial, serif;
	font-size: 1em;
	vertical-align: top;
	border-color: grey;
}

.HFlex {
	display: flex;
	flex-direction: row;
}

.VFlex {
	display: flex;
	flex-direction: column;
}

.IVFlex {
	display: inline-flex;
	flex-direction: column;
}

/* SingleLineTitle is the overall style for the single line   */
/* data block.                                                */
.SingleLineTitle {
	border-style: solid;
	border-width: thin;
	width: 360px;
	text-align: center;
	padding: 2px;
}

/* SingleLineRow is the style for the row in the singleLine   */
.SingleLineRow {
	background-color: #f8f9fa;
	font-size: 1em;
	padding: 8px;
}

/* MemoTitle is the overall style for the memo                */
.Memo {
	border-style: solid;
	border-width: thin;
	padding: 2px;
}

/* MemoRow is the style for the row in the memo               */
.MemoRow {
	background-color: #f8f9fa;
	font-size: 1em;
	padding: 8px;
}

/* Logo is the style for the logo                             */
.Logo {
	vertical-align: top;
	border-style: solid;
	border-width: thin;
	border-spacing: 0px;
	border-color: grey;
}

.Logo img {
	height: 104px;
}

/* CompInfoTable is the style for the general competition     */
/* and group data found at the start of each page             */
.CompInfoTable {
	border-style: solid;
	border-width: thin;
	width: 440px;
}

/* style for the line in the competition info table           */
/* containing the competition name                            */
.CompInfoHeader {
	font-weight: bold;
	text-align: center;
	background-color: #e8e8e8;
}

/* style for the other competition info - caption             */
.CompInfoCaption {
	background-color: #f8f8f8;
}

/* style for the other competition info - value               */
.CompInfoValue {
	background-color: #f8f8f8;
}

/* style for the line in the competition info table           */
/* containing the group name                                  */
.GroupInfoHeader {
	font-weight: bold;
	text-align: center;
	color: #F5F5F5;
	background: linear-gradient(135deg, #8B1538 0%, #A91D3A 100%);
	padding: 12px;
	border-radius: 6px;
}

/* MainTable holds the style of the main table                */
.MainTable {
	border-style: none;
	vertical-align: top;
}

/* MenuTable is the style used for the "menu structure"       */
/* containing the links to the various pages                  */
.MenuTable {
	border-style: solid;
	border-width: thin;
	border-color: grey;
	width: 135px;
	vertical-align: top;
}

/* MenuRow is the style for a row in the menu table           */
.MenuRow {
	background-color: #f8f9fa;
	overflow: hidden;
	margin: 1px;
	padding: 6px;
	border-radius: 4px;
}

/* menu group name are additional attributes for the group    */
/* name in the menu                                           */
.MenuGroupName {
	font-weight: bold;
}

/* CountryFlag is the style for the Country flags             */
.CountryFlag {
	vertical-align: middle;
}

/* SmallPict is the style for a small player picture          */
.SmallPict {
	vertical-align: middle;
}

/* NormalPict is the style for a normal player picture        */
.NormalPict {
	vertical-align: middle;
}

/* LargePict is the style for a large player picture          */
/* This style is currently not used by Sevilla                */
.LargePict {
	vertical-align: middle;
}

/* playerdata is the style for the table with player data     */
.PlayerDataTable {
	border-style: solid;
	border-width: thin;
	width: 180px;
}

/* playerdatamainline is the style for the name line of the   */
/* player data table.                                         */
.PlayerDataHeader {
	font-weight: bold;
	text-align: center;
	color: #F5F5F5;
	background: linear-gradient(135deg, #8B1538 0%, #A91D3A 100%);
	padding: 10px;
	border-radius: 6px;
}

/* PlayerWebLink formats the cells where the player web links */
/* are shown                                                  */
.PlayerWebLink {
	text-align: center;
}

/* style for the other player info - fixed labels             */
.PlayerDataCaption {
	background-color: #f8f8f8;
}

/* style for the other player info - values                   */
.PlayerDataValue {
	background-color: #f8f8f8;
}

/* GameListTable is the style for a table with games          */
.GameListTable {
	border-style: solid;
	border-width: thin;
}

/* GameListHeader is the style for the header row of          */
/* a table with games                                         */
.GameListHeader {
	color: #F5F5F5;
	background: linear-gradient(135deg, #8B1538 0%, #A91D3A 100%);
	font-weight: bold;
	padding: 10px;
}

/* GameListOddLine is the style for rows in a game list with  */
/* oddindexes                                                 */
.GameListOddLine {
	background-color: #f8f8f8;
}

/* GameListEvenLine is the style for rows in a game list with */
/* even indexes                                               */
.GameListEvenLine {
	background-color: #fdf2f4;
}

/* Specific widths for the player names in the game list      */
.GM_White,
.GM_Black,
.AB_Player {
	min-width: 135px;
}

/* PlayerListTable is the style for a table with the          */
/* participating players                                      */
.PlayerListTable {
	border-style: solid;
	border-width: thin;
}

/* PlayerListTitle is the style for the title row of the table*/
/* with players                                               */
.PlayerListTitle {
	color: #F5F5F5;
	background: linear-gradient(135deg, #8B1538 0%, #A91D3A 100%);
	font-weight: bold;
	text-align: center;
	padding: 12px;
	border-radius: 6px;
}

/* PlayerListHeader is the style for the header row of        */
/* a table containing the list of players                     */
.PlayerListHeader {
	color: #F5F5F5;
	background: linear-gradient(135deg, #8B1538 0%, #A91D3A 100%);
	font-weight: bold;
	padding: 10px;
}

/* PlayerListOddLine is the style for rows in a player list   */
/* with odd indexes                                           */
.PlayerListOddLine {
	background-color: #f8f8f8;
}

/* PlayerListEvenLine is the style for rows in a player list  */
/* with even indexes                                          */
.PlayerListEvenLine {
	background-color: #fdf2f4;
}

/* RankColumns is the Rank columns container - outside the    */
/* ranking table itself                                       */
.RankColumns {
	border-spacing: 0px;
}

.RankColumn {
	padding: 0px 2px 0px 0px;
}

/* RankingTable is the style for a table a ranking            */
.RankingTable {
	border-style: solid;
	border-width: thin;
}

/* RankingTitle is the style for the title row in the ranking */
/* headers                                                    */
.RankingTitle {
	color: #F5F5F5;
	background: linear-gradient(135deg, #8B1538 0%, #A91D3A 100%);
	font-weight: bold;
	text-align: center;
	padding: 12px;
	border-radius: 6px;
}

/* RankingHeader is the style for the header row of           */
/* a table containing a ranking                               */
.RankingHeader {
	color: #F5F5F5;
	background: linear-gradient(135deg, #8B1538 0%, #A91D3A 100%);
	font-weight: bold;
	padding: 10px;
}

/* RankingOddLine is the style for rows in a ranking with odd */
/* indexes                                                    */
.RankingOddLine {
	background-color: #f8f8f8;
}

/* RankingEvenLine is the style for rows in a ranking with    */
/* even indexes                                               */
.RankingEvenLine {
	background-color: #fdf2f4;
}

/* XTable is the style for a table with an crosstable or      */
/* similar                                                    */
.XTable {
	border-style: solid;
	border-width: thin;
}

/* XTableHeader is the style for the header row of            */
/* a crosstable                                               */
.XTableHeader {
	color: #F5F5F5;
	background: linear-gradient(135deg, #8B1538 0%, #A91D3A 100%);
	font-weight: bold;
	vertical-align: bottom;
	padding: 10px;
}

/* XTableOddline is the style for rows in a crosstable with   */
/* odd indexes                                                */
.XTableOddLine {
	background-color: #f8f8f8;
}

/* XTableEvenline is the style for rows in a crosstable with  */
/* even indexes                                               */
.XTableEvenLine {
	background-color: #fdf2f4;
}

/* XTableCell is special styling for cells of a crosstable,   */
/* gamefile, progress chart or color chart table              */
/* you may use this class to get a fixed width of the columns */
/* maybe in conjunction with the table's id.                  */
.XTableCell {
	min-width: 12px;
}

/* XTableAxis is special styling for the cells that are not   */
/* applicable, because they refer to the same player. This is */
/* top left to bottom right diagonal.                         */
.XTableAxis {}

/* GameLink is the style for the small image, linking to the  */
/* game viewer. The default image is a small pawn, right to   */
/* the result                                                 */
.GameLink {
	float: right;
	cursor: pointer;
}

/* GameFrame is the style for the IFRAME element including    */
/* the game viewer                                            */
/* Ideally the attributes used should work with HTML5 but     */
/* practically this is different                              */
.GameFrame {
	/*	overflow:hidden; */
	/*	border-width:0px; */
}

/* ShowBoard is the style used for a board being shown        */
/* It is unlikely you need to change this                     */
.ShowBoard {
	display: block;
	position: fixed;
	top: 60px;
	left: 70px;
	width: 500px;
	height: 368px;
}

* html .ShowBoard {
	position: absolute;
	width: 508px;
	height: 376px;
	/*	top: expression(eval(document.body.scrollTop+70)); */
}

/* HideBboard is the style used for a board being hidden      */
/* It is unlikely you need to change this                     */
.HideBoard {
	display: none;
}

/* GameTable is the style used to set up the game display area*/
.GameTable {
	border-style: solid;
	border-width: thin;
	background-color: #f8f8f8;
}

/* NavigateArea is the id of the block of controls            */
#NavigateArea {
	justify-content: center;
}

/* Navigate and NavigateDisabled control the format of the    */
/* navigation buttons First, Previous, Next and Last          */
.Navigate,
.NavigateDisabled {
	font-weight: bold;
	text-align: center;
	padding-top: 2px;
	padding-bottom: 2px;
	padding-left: 2px;
	padding-right: 2px;
	margin: 2px;
	border-style: solid;
	border-color: black;
	border-width: thin;
}

.Navigate {
	cursor: pointer;
}

.NavigateDisabled {
	background-color: #808080;
	cursor: auto;
}

/* PGNLink is the format for the link to the PGN page         */
.PGNLink {
	vertical-align: middle;
	text-align: center;
	font-size: xx-small;
}

/* Game data is the overall format for the game data          */
/* include white, black and result                            */

.GameData {
	font-family: helvetica, arial, serif;
	font-weight: bold;
	/*	font-size: calc(1em+1pt); */
	font-size: 1em;
	text-align: center;
	color: #F5F5F5;
	background: linear-gradient(135deg, #8B1538 0%, #A91D3A 100%);
	padding: 10px;
	border-radius: 6px;
}

/* Board is the overall format for the board area             */
.Board {
	text-align: center;
	margin: 0 auto;
}

/* BoardSquare is specific styling for a square               */
.BoardSquare {}

/* PieceImage is styling for the piece image                  */
.PieceImage {
	display: block;
}

/* MoveListContainer describes the table that holds the moves */
.MoveListContainer {
	vertical-align: top;
	width: 180px;
	height: 280px;
	overflow: auto;
}

/* MoveListContainerRows describes the table that holds the   */
/* moves in rows layout style                                 */
.MoveListContainerRows {
	vertical-align: top;
	width: 450px;
	max-height: 280px;
	overflow: auto;
}

/* MoveList is the table that holds the moves (table style)   */
.MoveList {
	padding: 0;
	vertical-align: top;
	border-left-style: solid;
	border-top-style: solid;
	border-left-color: black;
	border-top-color: black;
	border-width: thin;
	line-height: 10.5pt;
}

/* MoveListText is the text container of moves (text style)   */
.MoveListText {
	vertical-align: top;
	width: 100%;
	height: 100%;
	vertical-align: top;
	border-style: solid;
	border-color: black;
	border-width: thin;
	line-height: 10.5pt;
}

.MoveListText td {
	vertical-align: top;
	width: 100%;
	height: 100%;
}

/* MoveListRows is the text container of moves (text style)   */
/* rows layout                                                */
.MoveListRows {
	padding: 0;
	vertical-align: top;
	border-style: solid;
	border-color: black;
	border-width: 0px;
	line-height: 10.5pt;
}

/* The Move is the format of the move (table style)           */
.Move,
.SelectedMove {
	font-family: "lucida console", courier, sans-serif;
	text-align: center;
	border-right-style: solid;
	border-bottom-style: solid;
	border-right-color: black;
	border-bottom-color: black;
	border-width: thin;
	padding-top: 2px;
	padding-bottom: 2px;
	padding-left: 8px;
	padding-right: 8px;
	cursor: pointer;
}

/* MoveText is the format of moves (text style)               */
.MoveText,
.SelectedMoveText {
	cursor: pointer;
}

/* MoveTextMainLine is the format of main line moves          */
/* (text style)                                               */
.MoveTextMainLine {
	font-weight: bold;
}

/* MoveTextVariation is the format of variation moves         */
/* (text style)                                               */
.MoveTextVariation {
	font-style: italic;
}

/* SelectedMove holds additional format for the move currently*/
/* on the board.                                              */
.SelectedMove,
.SelectedMoveText {
	background-color: #fdf2f4;
	border: 2px solid #8B1538;
}

/* MoveComment is the style used for displaying comments in   */
/* a text styled move list.                                   */
.MoveComment {
	font-style: italic;
}

/* Hovering modification.                                     */
.Move:hover,
.Navigate:hover,
.MoveText:hover {
	background-color: #fdf2f4;
	border-color: #8B1538;
}

/* below are constraints for 'ordinary' html tag rendering    */

body {
	background-color: #ffffff;
	font-size: 8pt;
}

ul {
	padding-left: 10px;
	margin-left: 10px;
}

table {
	border-color: grey;
}

tbody {
	vertical-align: inherit;
}

td,
th {
	font-family: helvetica, arial, serif;
	font-size: 1em;
}

a {
	color: #282828;
}


/* ESV Rode Lopers - Moderne verbeteringen */

/* Algemene body styling verbeteren */
body {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size: 14px;
	line-height: 1.6;
	color: #333;
	background-color: #fafafa;
	margin: 0;
	padding: 20px;
}

/* Container voor de hele pagina */
.sevilla-page {
	max-width: 1200px;
	margin: 0 auto;
	background: white;
	border-radius: 10px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	overflow: hidden;
}

/* Verbeterde tabel styling */
.RankingTable,
.PlayerListTable,
.GameListTable,
.XTable {
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	border: none;
	width: 100%;
	margin-bottom: 20px;
}

/* Verbeterde cel padding */
.RankingTable td,
.PlayerListTable td,
.GameListTable td,
.XTable td,
.RankingTable th,
.PlayerListTable th,
.GameListTable th,
.XTable th {
	padding: 12px 15px;
	border-bottom: 1px solid #e9ecef;
}

/* Hover effecten voor rijen */
.RankingOddLine:hover,
.RankingEvenLine:hover,
.PlayerListOddLine:hover,
.PlayerListEvenLine:hover,
.GameListOddLine:hover,
.GameListEvenLine:hover,
.XTableOddLine:hover,
.XTableEvenLine:hover {
	background-color: #e3f2fd !important;
	transition: background-color 0.2s ease;
}

/* Ranking nummers styling */
.RankingTable td:first-child {
	font-weight: 700;
	color: #8B1538;
	text-align: center;
	width: 50px;
}

/* Punten kolom styling */
.RankingTable td:nth-last-child(2) {
	font-weight: 700;
	color: #8B1538;
	text-align: center;
}

/* Navigatie knoppen verbeteren */
.Navigate {
	background: #8B1538;
	color: white;
	border: 2px solid #8B1538;
	border-radius: 6px;
	padding: 8px 16px;
	margin: 4px;
	transition: all 0.3s ease;
}

.Navigate:hover {
	background: #A91D3A;
	border-color: #A91D3A;
	transform: translateY(-1px);
}

.NavigateDisabled {
	background-color: #e9ecef;
	color: #6c757d;
	border: 2px solid #e9ecef;
	border-radius: 6px;
}

/* Logo styling verbeteren */
.Logo {
	border-radius: 8px;
	border: 2px solid #e9ecef;
	padding: 10px;
}

/* Menu styling verbeteren */
.MenuTable {
	border-radius: 8px;
	border: 1px solid #e9ecef;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.MenuRow:hover {
	background-color: #fdf2f4 !important;
	transition: background-color 0.2s ease;
}

/* Competitie info styling */
.CompInfoTable {
	border-radius: 8px;
	border: 1px solid #e9ecef;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	overflow: hidden;
}

.CompInfoHeader {
	background: linear-gradient(135deg, #8B1538 0%, #A91D3A 100%);
	color: #F5F5F5;
	padding: 12px;
}

/* Speler data styling */
.PlayerDataTable {
	border-radius: 8px;
	border: 1px solid #e9ecef;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	overflow: hidden;
}

/* Responsive design */
@media (max-width: 768px) {
	body {
		padding: 10px;
		font-size: 12px;
	}

	.sevilla-page {
		border-radius: 0;
		box-shadow: none;
	}

	.RankingTable,
	.PlayerListTable,
	.GameListTable,
	.XTable {
		font-size: 0.9rem;
	}

	.RankingTable td,
	.PlayerListTable td,
	.GameListTable td,
	.XTable td,
	.RankingTable th,
	.PlayerListTable th,
	.GameListTable th,
	.XTable th {
		padding: 8px 10px;
	}

	.MainTitle,
	.CompInfoTable {
		width: 100%;
		max-width: 100%;
	}

	.MenuTable {
		width: 100%;
	}
}

/* Print styling */
@media print {
	body {
		background: white;
		padding: 0;
		font-size: 10pt;
	}

	.sevilla-page {
		box-shadow: none;
		border-radius: 0;
	}

	.RankingHeader,
	.PlayerListHeader,
	.GameListHeader,
	.XTableHeader,
	.RankingTitle,
	.PlayerListTitle,
	.MainTitleRow,
	.GroupInfoHeader,
	.PlayerDataHeader,
	.GameData {
		background: #8B1538 !important;
		color: white !important;
		-webkit-print-color-adjust: exact;
		color-adjust: exact;
	}

	.Navigate,
	.NavigateDisabled {
		display: none;
	}
}

/* Speciale styling voor toernooi types */
.tournament-youth .MainTitleRow,
.tournament-youth .GroupInfoHeader,
.tournament-youth .RankingTitle,
.tournament-youth .RankingHeader {
	background: linear-gradient(135deg, #2E7D32 0%, #4CAF50 100%) !important;
}

.tournament-rapid .MainTitleRow,
.tournament-rapid .GroupInfoHeader,
.tournament-rapid .RankingTitle,
.tournament-rapid .RankingHeader {
	background: linear-gradient(135deg, #F57C00 0%, #FF9800 100%) !important;
}

.tournament-blitz .MainTitleRow,
.tournament-blitz .GroupInfoHeader,
.tournament-blitz .RankingTitle,
.tournament-blitz .RankingHeader {
	background: linear-gradient(135deg, #7B1FA2 0%, #9C27B0 100%) !important;
}