:root {
    --panel-bg-color: #4944D2;
    --panel-selector-bg-color: #b7b7bd;
    --panel-text-color: #FFFFFF;

    --table-row-even-bg-color: #DDF4EC;
    --table-row-odd-bg-color: #c9f5e5;
    --table-row-header-bg-color: #F9D5FB;
    --main-text-color: #000000;

    --body-bg-color: #000000;
    --body-text-color: white; /* "Score submission failed! Invalid parameter." or tab/buttons */
    --body-text-link-color: white;
}

/* MAIN FRAME */
body 				                { background: var(--body-bg-color); margin:0; font-size:large; font-family:system-ui; color: var(--body-text-color); }
#main				                { display:grid; grid-template-columns:200px 1fr; grid-template-rows:30px 1fr; grid-gap: 0;}
.main#menu			                { display:flex; flex-flow:column; grid-row:span 2; background: var(--body-bg-color); padding:0.5em; margin:0; height:100vh; box-sizing:border-box; color: var(--body-text-color);}
.main#content 		                { padding: 0.5em 0.5em 2em 0.5em; overflow-x: auto; min-height: calc(100vh - 32px); background-image: url('img/blurry.png'); background-repeat: no-repeat; background-size: cover; background-position: left top; }

/* MENU */
.menu_section		                { font-weight:bold; border-bottom: solid #c8cbe0 thin; }
.menu_tool			                { background:var(--panel-selector-bg-color); padding:4px; }
span#mgs			                { color: var(--body-text-color); }
#menu a.user                        { color: var(--body-text-color);}

/* TABS */
.tab                                { background: var(--body-bg-color); color: var(--body-text-link-color); border-radius: 0 0 0 0; text-decoration: none; padding: 0 1em 0 0.2em;  margin: 0 0 0 0.2em;}
.tab.selected		                { background: var(--body-text-color); color: var(--body-bg-color); }
.tab:hover			                { background: var(--body-text-color); color: var(--body-bg-color); } /* just as selected */
.tab a 				                { text-decoration:inherit; color:inherit; }
div#tab_lang		                { color: var(--body-text-color);  }

/* CONTENT */
#content_board_select               { position: relative; z-index: 10; } /* Not in master. Must be present to make clicks work. Z must be higher than the overlapping, transparent logo/image (0) */
#panel_score_submit                 { position: relative; z-index: 10; } /* Not in master. Must be present to make clicks work. Z must be higher than the overlapping, transparent logo/image (0) */

/* PANEL */
.panel				                { flex:0 1 auto; background:var(--panel-bg-color); margin:0.2em; padding:0.2em 0.5em 0.2em 0.5em; border-radius:0.2em; }
.panel_title		                { font-variant:small-caps; color: var(--panel-text-color); font-size:120%; font-weight:bold; margin-bottom:0.2em; }

p.tips_title		                { font-weight:bold; color: inherit;  }
p.tips_text			                { color: inherit; }

/* LINK */
a.game				                { color:inherit; }


/* TABLE */
table				                { color: var(--main-text-color);  }
tr					                { background: var(--table-row-even-bg-color); }
tr.odd				                { background: var(--table-row-odd-bg-color); }
th					                { background:var(--table-row-header-bg-color); padding:0 0.3em 0 0.3em; }
td.int		                        { text-align: right; } /* make sure numbers are right-aligned */
tr.select a, tr.select a            { color:  white;}
tr.select a:hover                   { color: lightgray; }

/* EDIT */
.lang				                { background: var(--body-bg-color); color: var(--body-text-color); border:solid thin #A4A5CC; }

/* AGENDA */
/* LOGIN */
/* MAP */
/* MISC */

/* GAME BOARD SPECIAL CODE TO HOOK UP CUSTOM IMAGE FLOATING ON TOP */
#gf_end_score                       { position: relative; padding-top: 42px; }
img.achievements.icon-shadow        { box-shadow: 1px 1px 5px rgba(0,0,0,0.5); } /* Note; this line MUST be placed before the other agressive img-override */
div.panel_title#gf_end_score img    { content: url("img/logo.png"); width:700px !important; height:auto !important; image-rendering:auto !important; position: absolute; top: -158px; }
div#gf_end_score + table            { min-width: 694px; table-layout: auto; } /* Make sure the score table is at least the width of the image */
div.panel_title#gf_end_score span   { display:none; }; /* Hide title text. This one MUST Be placed AFTER the min-width thingy */