/* common.css  */

/*
 * This file contains some comments on how to modify the css file. The comments are not 
 * comprehensive. There is a wealth of information and tutorials on the internet for 
 * CSS files.
 */

/* ============================================
   Password change form (.pwform) — desktop default.
   The per-cell <label class="pwform-celllabel"> elements live
   inside each TBLROW data cell alongside the input. On desktop
   they are hidden because the shared 3-column header row above
   the data row already serves as the field labels (Gammalt /
   Lösenord / En gång till). On mobile the header row is hidden
   (mobile.css:9249) and the per-cell labels become the field
   titles at the outer top-left of each input box (mobile.css:
   9254). Daniel 2026-07-12. */
.pwform-celllabel {
  display: none;
}

/* ============================================
   GRILLEGRILL DESIGN TOKENS
   These CSS custom properties define the
   retro visual identity. Non-negotiable.
   ============================================ */
:root {
  /* Brand colors */
  --gg-green: #339933;
  --gg-green-dark: #2a7a2a;
  --gg-red: #cc0000;
  --gg-gold: #D4A200;
  --gg-silver: #c0c0c0;
  --gg-bronze: #cd7f32;
  --gg-bg: #e1e1e1;
  --gg-white: #ffffff;
  --gg-black: #000000;
  --gg-text: #000000;
  --gg-text-muted: #7d7d7d;
  
  /* Table row colors */
  --gg-row-odd: #eeeeed;
  --gg-row-even: #fffffd;
  
  /* Status colors */
  --gg-up: #44CC44;
  --gg-down: #BB8888;
  --gg-error: #ee4444;
  --gg-warning: #ffff66;
  --gg-info: #66cc66;
  
  /* Typography */
  --gg-font: Tahoma, Verdana, Arial, sans-serif;
  --gg-font-size-xs: 12px;
  --gg-font-size-sm: 14px;
  --gg-font-size-base: 16px;
  --gg-font-size-lg: 18px;
  
  /* Spacing */
  --gg-space-xs: 4px;
  --gg-space-sm: 8px;
  --gg-space-md: 12px;
  --gg-space-lg: 16px;
  --gg-space-xl: 24px;
  
  /* Layout */
  --gg-max-width: 800px;
  --gg-left-col: 162px;
  --gg-center-col: 520px;
  --gg-right-col: 152px;
}

/* Touch target minimum (WCAG 2.1 AA) */
--gg-touch-min: 44px;

/*
 * The following 3 entries are for the regular links used within the league.
 * A:link is the standard link style
 * A:visited is for links that the user has clicked.
 * A:hover is the style for when the user has the mouse over the link
 */

#onseltab{
  width: 36px;
}

A:link { 
  font-family: tahoma, verdana, arial;  /* The font family Helvetica, courier etc... */
  font-size: 10pt;                      /* The size of the text */
  font-style: normal;                   /* inherit, italic, normal, oblique */                   
  line-height: normal;                  /* the line height inherit or normal */
  font-weight: normal;                  /* bold, bolder inherit, lighter, normal or a value like 100 */ 
  font-variant: normal;									/* inherit, normal, smallcaps */
  color: #000000; 													/* Text colour, e.g. #cb3d14, blue, #339933 gammal grön #339933 or code #FFFFFF */
  text-decoration: none;                /* blink, inherit, line-through, underline, overline, none */
}
A:visited { 
  font-family: tahoma, verdana, arial; 
  font-size: 10pt; 
  font-style: normal; 
  line-height: normal; 
  font-weight: normal; 
  font-variant: normal; 
  color: #000000; 
  text-decoration: none;
}
A:hover { 
  font-family: tahoma, verdana, arial; 
  font-size: 10pt; 
  font-style: normal; 
  line-height: normal; 
  font-weight: normal; 
  font-variant: normal; 
  color: orange; 
  text-decoration: none;
}

/* The following three entries are for the version link (Powered by..) */
A.VERSION:visited {
  font-family: tahoma, verdana, arial; 
  font-size: 8pt; 
  font-style: normal; 
  line-height: normal; 
  font-weight: normal; 
  font-variant: normal; 
  color: #000000; 
  text-decoration: none;
}
A.VERSION:link { 
  font-family: tahoma, verdana, arial; 
  font-size: 8pt; 
  font-style: normal; 
  line-height: normal; 
  font-weight: normal; 
  font-variant: normal; 
  color: #000000; 
  text-decoration: none;
}
A.VERSION:hover { 
  font-family: tahoma, verdana, arial; 
  font-size: 8pt; 
  font-style: normal; 
  line-height: normal; 
  font-weight: normal; 
  font-variant: normal; 
  color: orange; 
  text-decoration: none;
}

/* The following three entries are for Veckans vinnare Right Meny */
A.VINNARE:visited {
  font-family: tahoma, verdana, arial; 
  font-size: 10pt; 
  font-style: normal; 
  line-height: normal; 
  font-weight: bold; 
  font-variant: normal; 
  color: #ffffff; 
  text-decoration: none;
}
A.VINNARE:link { 
  font-family: tahoma, verdana, arial; 
  font-size: 10pt; 
  font-style: normal; 
  line-height: normal; 
  font-weight: bold; 
  font-variant: normal; 
  color: #ffffff; 
  text-decoration: none;
}
A.VINNARE:hover { 
  font-family: tahoma, verdana, arial; 
  font-size: 10pt; 
  font-style: normal; 
  line-height: normal; 
  font-weight: bold; 
  font-variant: normal; 
  color: orange; 
  text-decoration: none;
}


/* These are for the match statistics links */
A.PRED:visited {
  font-family: tahoma, verdana, arial; 
  font-size: 10pt; 
  font-style: normal; 
  line-height: normal; 
  font-weight: normal; 
  font-variant: normal; 
  color: white; 
  text-decoration: none;
}
A.PRED:link { 
  font-family: tahoma, verdana, arial; 
  font-size: 10pt; 
  font-style: normal; 
  line-height: normal; 
  font-weight: normal; 
  font-variant: normal; 
  color: white; 
  text-decoration: none;
}
A.PRED:hover { 
  font-family: tahoma, verdana, arial; 
  font-size: 10pt; 
  font-style: normal; 
  line-height: normal; 
  font-weight: normal; 
  font-variant: normal; 
  color: orange; 
  text-decoration: none;
}


/* 
 * This is the style of body of the page. The body tag is the top most tag of the document.
 * Using this entry you can add a background image, background colours and set overall alingment. 
 */
body.MAIN {
  background-color: #e1e1e1;
  margin:1; 
  padding:1; 
  text-align: center;
	background-image: none;
	background-repeat: no-repeat;
}

/* This entry is for */
font.LANG {
  font-size: 8pt; 
  color: white; 
  font-family: tahoma, verdana, arial; 
  font-weight: bold; 
  text-decoration: none;
}
font.TBLHEAD {
  font-size: 10pt; 
  color: white; 
  font-family: tahoma, verdana, arial; 
  font-weight: bold; 
  text-decoration: none;
}

font.UADUP {
  font-size: 10pt; 
  color: white; 
  font-family: tahoma, verdana, arial; 
  text-decoration: none;
}
font.UADDOWN {
  font-size: 10pt; 
  color: white; 
  font-family: tahoma, verdana, arial; 
  text-decoration: none;
}
font.TBLROW {
  font-size: 10pt; 
  color: #cc0000; 
  font-family: tahoma, verdana, arial; 
  text-decoration: none;
}
font.TABELL {
  font-size: 10pt; 
  color: #000000; 
  font-family: tahoma, verdana, arial; 
  text-decoration: none;
}
font.NEDFLYTT {
  font-size: 10pt; 
/**  color: #cc0000; */
  color: #000000; 
  font-family: tahoma, verdana, arial; 
  text-decoration: none;
}
font.KVAL {
  font-size: 10pt; 
  color: #000000; 
  font-family: tahoma, verdana, arial; 
  text-decoration: none;
}
font.VERSION {
  font-size: 8pt; 
  color: #000000; 
  font-family: tahoma, verdana, arial; 
  text-decoration: none;
}
font.POS1 {
  font-size: 10pt; 
  color: #000000; 
  font-family: tahoma, verdana, arial; 
  text-decoration: none; 
  background-color: GOLD;
}
font.POS2 {
  font-size: 10pt; 
  color: #000000; 
  font-family: tahoma, verdana, arial; 
  text-decoration: none; 
  background-color: silver;
}
font.POS3 {
  font-size: 10pt; 
  color: #000000; 
  font-family: tahoma, verdana, arial; 
  text-decoration: none; 
  background-color: #D4A200;
}
font.POS45 {
  font-size: 10pt; 
  color: #000000; 
  font-family: tahoma, verdana, arial; 
  text-decoration: none; 
  border-collapse: collapse;
  background: repeating-linear-gradient( 45deg, #fff, #fff 5px, #D3F2DA 5px, #D3F2DA 10px );
  /*background-color: #D3F2DA;*/
}
font.POS610 {
  font-size: 10pt; 
  color: #000000; 
  font-family: tahoma, verdana, arial; 
  text-decoration: none; 
  border-collapse: collapse;
  background: repeating-linear-gradient( 45deg, #fff, #fff 5px, #DDF9F7 5px, #DDF9F7 10px );
  /*background-color: #DDF9F7;*/
}
font.POS10TH {
  font-size: 10pt; 
  color: #cc0000; 
  font-family: tahoma, verdana, arial; 
  text-decoration: none; 
  border-collapse: collapse;
  background: repeating-linear-gradient( 45deg, #fff, #fff 5px, #f0f0f0 5px, #f0f0f0 10px );
  /*background-color: #DDF9F7;*/
}
font.POS6 {
  font-size: 10pt; 
  color: #000000; 
  font-family: tahoma, verdana, arial; 
  text-decoration: none; 
  background-color: #7CFC00;
}
font.POS5 {
  font-size: 10pt; 
  color: #FFFFFF; 
  font-family: tahoma, verdana, arial; 
  text-decoration: none; 
  background-color: BLUE;
}
font.POS4 {
  font-size: 10pt; 
  color: #000000; 
  font-family: tahoma, verdana, arial; 
  text-decoration: none; 
  background-color: #ff66ff;
}
font.PRDROW {
  font-size: 10pt;
  color: #000000; 
  font-family: tahoma, verdana, arial; 
  font-weight: normal; 
  text-decoration: none; 
  background-color: #fffffd;
}
font.LOGINHD {
  font-size: 8pt; 
  color: white; 
  font-family: tahoma, verdana, arial; 
  font-weight: bold; 
  text-decoration: none; 
  background-color: #00000;
}
font.HOFAME {
  font-size: 12pt; 
  color: white; 
  font-family: tahoma, verdana, arial; 
  font-weight: bold; 
  text-decoration: none; 
  background-color: #00000;
}
font.LOGINRW {
  font-size: 8pt; 
  color: #00000; 
  font-family: tahoma, verdana, arial; 
  text-decoration: none; 
  background-color: #fffffd;
}

font.HELPTEXT {
  font-size: 10pt; 
  color: #00000; 
  font-family: tahoma, verdana, arial; 
  text-decoration: none; 
  background-color: WHITE;
}

font.HELPROW {
  font-size: 10pt; 
  color: #00000; 
  font-family: tahoma, verdana, arial; 
  text-decoration: none;
}
font.HELPHEAD {
  font-size: 10pt;
  color: WHITE;
  font-family: tahoma, verdana, arial;
  /* Daniel 2026-07-13 14:18: text-decoration: BOLD is not
   * valid CSS and gets silently ignored, so the heading
   * never rendered bold. font-weight: bold is the actual
   * property that makes text bold. */
  font-weight: bold;
}

/* Daniel 2026-07-13 15:13 + 15:30: 'Alla sektions titlar
 * under hjälp o regler (cmd=help) skall vara den gröna
 * bakgrunden med vit bold text centrerat mittmitt.' This
 * widens the HELPHEAD rule above on desktop: the inline
 * <b>...</b> section titles inside Txt_Logging_In_Txt
 * ('Dellos Grillegrill!', 'Kortversionen',
 * 'Swisha din insats', 'Introduktion',
 * 'Hur gör jag för att vara med?') also render as green
 * bars, matching the mobile rule above.
 *
 * Selector 'p > b:first-child' is deliberate: skip inline
 * variables and emphatic words inside sentences / <li>
 * items ('<b>måste</b>', '<b>'.$Txt_Mastartipset.'</b>',
 * '<b>'.$globalTournWinnerPoints.'</b>' etc. — those are
 * never first-child of their <p>). Earlier PR #145 used
 * the wider 'td.TBLROW b' selector and broke variables
 * into bar-style headings; Daniel 2026-07-13 15:23
 * 'Revert. Du har gjort alla variabler till sektionstitlar.'
 * This scoped variant keeps the visual language fix
 * without that side effect. */

/* Daniel 2026-07-13 15:35: 'Dessa ska OCKSÅ vara vit bold
 * text.' The four dedicated HELPHEAD section bars
 * ('Hjälp & Regler', 'Skapa en ny användare',
 * 'Poängfördelning', 'Meny-val') shipped with green
 * background + white bold on desktop since PR #144, but
 * the centering rule only lived in mobile.css. Bring the
 * same 'p > b:first-child' / '.HELPHEAD' centering into
 * common.css so the desktop view matches mobile: green bar,
 * white bold, centered both axes. */
table.HELPTB td.TBLHEAD:has(> font.HELPHEAD) {
  text-align: center;
  vertical-align: middle;
}

/* Daniel 2026-07-13 16:09: 'Det är font class=helprow som
 * ska fixas. De TD där den klassen finns.' Belt-and-braces
 * rule that does NOT depend on :has() (some Safari versions
 * ignored our :has() selector at the page DOM level).
 * Targets the HELPHEAD section bar directly via the font
 * class so the cascade always wins. Also covers any
 * HELPROW font's first <b> child as a section title, in
 * case the title text appears wrapped in HELPROW instead of
 * HELPHEAD on some routes. */
table.HELPTB td.TBLHEAD font.HELPHEAD {
  display: block;
  background-color: #339933;
  color: WHITE;
  font-weight: bold;
  font-size: 10pt;
  font-family: tahoma, verdana, arial;
  text-align: center;
  padding: 8px 12px;
  margin: 0;
}

/* Daniel 2026-07-13 15:13 + 15:30 was a wider experiment
 * that also styled inline-<b> tokens inside HELPROW as
 * bar headers. PR #147 + PR #149 both caught variables
 * inside <li> items (e.g. '<b>5</b>', '<b>'.$corrHomeScore
 * .'</b>') and rendered them as green bars — Daniel 16:33
 * 'Revert. Du har gjort varenda variabel till en rubrik.'
 * Fix: kill every selector that targets <b> tokens inside
 * td.TBLROW. The four section titles on ?cmd=help ('Hjälp &
 * Regler', 'Skapa en ny användare', 'Poängfördelning',
 * 'Meny-val') live ONLY in <td class='TBLHEAD'><font
 * class='HELPHEAD'>…</font></td> and the rule above styles
 * those cells. Nothing inside td.TBLROW gets promoted. */
font.PREDHEAD {
  font-size: 8pt;
  color: #cb3d14;
  font-family: tahoma, verdana, arial;
  /* Daniel 2026-07-13 14:18: same invalid-CSS fix as HELPHEAD
   * — font-weight is the property that makes text bold. */
  font-weight: bold;
}
    
table.LEFT {
  width: 162px; 
  background-color: #ffffff;
  cell-spacing: 0px;
  padding: 0px;
}
table.CENTER {
  border: groove black 0px;
  background-color: #ffffff;
  cell-spacing: 0px;
  padding: 0px;
  width: 520px;
}
table.RIGHT {
  border: groove black 0px;
  width: 162px; /*150*/
  background-color: #ffffff;
}
table.MAINTB {
  border: groove black 0px;
  background-color: transparent;
  cell-spacing: 0px;
  padding: 0px;
  width: 800px;
}
table.HELPTB {
  background-color: transparent;
  width: 520px; 
  cell-spacing: 0px;
  border: inset #cb3d14 0px;
  padding: 0px;
}
table.MSGTB {
  background-color: transparent;
  width: 520px; 
  cell-spacing: 0px;
  border: inset #cb3d14 0px;
  padding: 0px;
}
iframe.STANDTB {
  background-color: #cb3d14;
  width: 520px; 
  height: 400px; 
  cell-spacing: 0px;
  border: inset #cb3d14 0px;
  padding: 0px;
}
table.STANDTB {
  background-color: transparent;
  width: 520px; 
  cell-spacing: 0px;
  border: inset #cb3d14 0px;
  padding: 0px;
}
table.PREDTB {
  background-color: transparent;
  width: 162px; /*old 150*/ 
  cell-spacing: 0px;
  border: inset #cb3d14 0px;
  padding: 0px;
}
table.MENUTB {
  background-color: transparent;
  width: 162px; 
  cell-spacing: 0px;
  border: inset #cb3d14 0px;
  padding: 0px;
}
table.LANG {
  background-color: transparent;
  width: 150px; 
  cell-spacing: 0px;
  border: groove #cb3d14 0px;
  padding: 0px;
}
table.LOGINTB {
  background-color: transparent;
  width: 162px; 
  cell-spacing: 0px;
  border: groove #cb3d14 0px;
  padding: 0px;
}
table.SHOUT {

  background-color: transparent;
width: 150px;
  cell-spacing: 0px;
  padding: 0px;
}
td {
border-collapse:separate;
    border:solid white 0px;
    border-radius:3px;
    -moz-border-radius:3px;
    }
    
td.LANG {
  background-color: #339933;
  text-align: center;
}
td.BANNER {
  background-color: #e1e1e1;
  
}
td.TBLHEAD {
  background-color: #339933;
  
}
td.POS1 {
  background-color: GOLD;
}
td.POS2 {
  background-color: silver;
}
td.POS3 {
  background-color: #D4A200;
}
td.POS45 {
  border-collapse: collapse;
  background: repeating-linear-gradient( 45deg, #fff, #fff 5px, #D3F2DA 5px, #D3F2DA 10px );
  /*background-color: #D3F2DA;*/
}
td.POS610 {
  
  /*background-color: #DDF9F7;*/
  border-collapse: collapse;
  background: repeating-linear-gradient( 45deg, #fff, #fff 5px, #DDF9F7 5px, #DDF9F7 10px );
  
}
td.POS10TH {
  
  /*background-color: #DDF9F7;*/
  border-collapse: collapse;
  background: repeating-linear-gradient( 45deg, #fff, #fff 5px, #f0f0f0 5px, #f0f0f0 10px );
  
}
td.POS6 {
  background-color: #7CFC00;
}
td.POS5 {
  background-color: BLUE;
}
td.POS4 {
  background-color: #ff66ff;
}
td.UADUP {
  background-color: #44CC44;
}
td.UADDOWN {
  background-color: #BB8888;
}
td.TBLROW {
  background-color: #fffffd;
  overflow: hidden;
   text-overflow: ellipsis;
  
}
td.TBLROWODD {
  background-color: #eeeeed;
}
td.TBLROW_Y {
  background-color: GOLD;
}

/* ============================================
   WINNER-SUBHEAD (Mästartipset, Classic view)
   Daniel 2026-07-31 22:01: the per-country subhead row inside
   ShowTournamentWinnerUserPicks() (statsfunctions.php) now renders
   as a single <td colspan='3' align='LEFT'> with the inline flag
   + team name from _safeTeamNameAndFlagInline() — no nested <td>s,
   so the extra right-hand column that the broken HTML used to
   produce is gone. Subtle visual accent here so the subhead still
   reads as a section divider against the surrounding td.TBLROW
   player rows (which are #fffffd off-white).
   Mobile dispatches to MobileTournamentWinnerUserPicksView() and
   never reaches this markup, so the rule is inert on mobile.
   ============================================ */
tr.winner-subhead td.winner-subhead-cell {
  background-color: #e8f0e8;
  border-top: 1px solid #339933;
  border-bottom: 1px solid #339933;
  font-weight: bold;
  text-align: left;
  padding: 3px 6px;
}
/* Det här för Marquee-scrollen*/
td.INLINE {
	display: inline; 
  	background-color: #fffffd;
}

td.LOGINHD {
  background-color: #339933;
}
td.LOGINRW {
  background-color: #fffffd;
}

td.LEFTCOL {
  width: 162px; 
  background-color: transparent;
  vertical-align: top;
}
td.CENTERCOL {
  width: 520px; 
  vertical-align: top; 
  text-align: left;
}
td.RIGHTCOL {
  width: 152px; 
  vertical-align: top;
}
td.TBLPOS {
  background-color: #339933;
  width: 40px; 
  text-align: center;
}
td.TBLUSER {background-color: #339933; width: 180px; text-align: center;}
td.TBLPLAYED {background-color: #339933; width: 40px; text-align: center;}
td.TBLWON {background-color: #339933; width: 40px; text-align: center;}
td.TBLDRAWN {background-color: #339933; width: 40px; text-align: center;}
td.TBLLOST {background-color: #339933; width: 40px; text-align: center;}
td.TBLFOR {background-color: #339933; width: 40px; text-align: center;}
td.TBLAGAINST {background-color: #339933; width: 40px; text-align: center;}
td.TBLGD {background-color: #339933; width: 40px; text-align: center;}
td.TBLPTS {background-color: #339933; width: 40px; text-align: center;}
td.TBLPTS {background-color: #339933; width: 40px; text-align: center;}
td.TDCRAWL{background-color: #FFFFFF; width: 140px; text-align: center;}

font.ERROR {
  font-size: 8pt; 
  color: WHITE; 
  font-family: tahoma, verdana, arial; 
  text-decoration: none;
}
td.ERROR {
  background-color: #ee4444;
}
font.WARNING {
  font-size: 8pt; 
  color: WHITE; 
  font-family: tahoma, verdana, arial; 
  text-decoration: none;
}
td.WARNING {
  background-color: #ffff66;
}
font.INFO {
  font-size: 8pt; 
  color: WHITE; 
  font-family: tahoma, verdana, arial; 
  text-decoration: none;
}
td.INFO {
  background-color: #66cc66;
}
font.SHOUTROW {
  font-size: 8pt; 
  color: #00000; 
  font-family: tahoma, verdana, arial; 
  text-decoration: none;
}
td.SHOUTROW {
border-collapse:separate;
    border:solid white 0px;
    border-radius:3px;
    -moz-border-radius:3px;	
  background-color: #fffffd;
}
div.SHOUTROW {
  background : #fffffd; 
  color : #00000;
  padding : 1px; 
  width : 140px; 
  height : 400px; 
  overflow : auto;
}
img.SHOUTROW {
  height : 12px; 
}
table.MESSAGES {
  border: groove #cb3d14 1px;
  background-color: transparent;
  cell-spacing: 0px;
  padding: 0px;
  width: 800px;
}
font.SHOUTHEAD {
  font-size: 8pt; 
  color: #7d7d7d; 
  font-family: tahoma, verdana, arial; 
  text-decoration: none;
  font-weight: bold; 
}
font.SHOUTDATE {
  font-size: 6pt; 
  color: #7d7d7d; 
  font-family: tahoma, verdana, arial; 
  text-decoration: none;
}
font.SHOUTMSG {
  font-size: 8pt; 
  color: #7d7d7d; 
  font-family: tahoma, verdana, arial; 
  text-decoration: none;
}

img.FLAG {
  height : 14px; 
  border: 0px;
}

td.TEAM {
  display: table-cell;
  background-color: #ffffff;
  vertical-align: middle;
}
font.TEAM {
  font-size: 10pt; 
  color: #000000; 
  font-family: tahoma, verdana, arial;
  font-weight: normal; 
  text-decoration: none;
}
td.FLAG {
  background-color: #fffffd;
  text-align: CENTER;
}
font.FLAG {
  font-size: 10pt; 
  color: #00000; 
  font-family: tahoma, verdana, arial; 
  text-decoration: none;
}

font.LEADER { 
  font-size: 10pt; 
  color: #00000; 
  font-family: tahoma, verdana, arial; 
  text-decoration: none;
  
/*
   border: 0px solid; 
   border-color: #aaa; 
   color: #000000; 
   font-family: Tahoma, Verdana, Arial, Helvetica; 
   font-size: 10px; 
   font-weight: bold; 
   padding-left: 0px; 
   text-decoration: none; 

   */
} 

td.LEADER {
  background-color: yellow;
/*   border: 0px solid;
   border-color: #aaa;
   color: #000000;
   font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
   text-decoration: none;
   */
}
td.BRONZE {
  background-color: var(--gg-bronze);
/* matches the design-token value: #cd7f32 */
}
font.BRONZE {
  font-size: 10pt;
  color: #000000;
  font-family: tahoma, verdana, arial;
  text-decoration: none;
  background-color: var(--gg-bronze);
}
td.KVAL { 
  background-color: #D0D0D0 ;
/*   border: 0px solid; 
   border-color: #aaa; 
   color: #000000; 
   font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif; 
   text-decoration: none; 
   */
}

td.TABELL { 
  background-color: #FFFFFF ;
/*   border: 0px solid; 
   border-color: #aaa; 
   color: #000000; 
   font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif; 
   text-decoration: none; 
   */
}

td.NEDFLYTT { 
  background-color: #A0A0A0 ;
/*   border: 0px solid; 
   border-color: #aaa; 
   color: #000000; 
   font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif; 
   text-decoration: none; 
   */
}

/* Version 2.17 */
A.POS1:visited {
  font-family: tahoma, verdana, arial; 
  /*font-size: 8pt; */
  font-style: normal; 
  line-height: normal; 
  font-weight: normal; 
  font-variant: normal; 
  color: #000000; 
  text-decoration: none;
}
A.POS1:link { 
  font-family: tahoma, verdana, arial; 
  /*font-size: 8pt; */
  font-style: normal; 
  line-height: normal; 
  font-weight: normal; 
  font-variant: normal; 
  color: #000000; 
  text-decoration: none;
}
A.POS1:hover { 
  font-family: tahoma, verdana, arial; 
  /*font-size: 8pt; */
  font-style: normal; 
  line-height: normal; 
  font-weight: normal; 
  font-variant: normal; 
  color: orange; 
  text-decoration: none;
}
A.POS2:visited {
  font-family: tahoma, verdana, arial; 
  /*font-size: 8pt; */
  font-style: normal; 
  line-height: normal; 
  font-weight: normal; 
  font-variant: normal; 
  color: #000000; 
  text-decoration: none;
}
A.POS2:link { 
  font-family: tahoma, verdana, arial; 
  /*font-size: 8pt; */
  font-style: normal; 
  line-height: normal; 
  font-weight: normal; 
  font-variant: normal; 
  color: #000000; 
  text-decoration: none;
}
A.POS2:hover { 
  font-family: tahoma, verdana, arial; 
  /*font-size: 8pt; */
  font-style: normal; 
  line-height: normal; 
  font-weight: normal; 
  font-variant: normal; 
  color: orange; 
  text-decoration: none;
}
A.POS3:visited {
  font-family: tahoma, verdana, arial; 
  /*font-size: 8pt; */
  font-style: normal; 
  line-height: normal; 
  font-weight: normal; 
  font-variant: normal; 
  color: #000000; 
  text-decoration: none;
}
A.POS3:link { 
  font-family: tahoma, verdana, arial; 
  /*font-size: 8pt; */
  font-style: normal; 
  line-height: normal; 
  font-weight: normal; 
  font-variant: normal; 
  color: #000000; 
  text-decoration: none;
}
A.POS3:hover { 
  font-family: tahoma, verdana, arial; 
  /*font-size: 8pt; */
  font-style: normal; 
  line-height: normal; 
  font-weight: normal; 
  font-variant: normal; 
  color: orange; 
  text-decoration: none;
}
A.POS1:link { 
  font-family: tahoma, verdana, arial; 
  /*font-size: 8pt; */
  font-style: normal; 
  line-height: normal; 
  font-weight: normal; 
  font-variant: normal; 
  color: #000000; 
  text-decoration: none;
}
A.POS1:hover { 
  font-family: tahoma, verdana, arial; 
  /*font-size: 8pt; */
  font-style: normal; 
  line-height: normal; 
  font-weight: normal; 
  font-variant: normal; 
  color: orange; 
  text-decoration: none;
}
A.POS2:visited {
  font-family: tahoma, verdana, arial; 
  /*font-size: 8pt; */
  font-style: normal; 
  line-height: normal; 
  font-weight: normal; 
  font-variant: normal; 
  color: #000000; 
  text-decoration: none;
}
A.POS2:link { 
  font-family: tahoma, verdana, arial; 
  /*font-size: 8pt; */
  font-style: normal; 
  line-height: normal; 
  font-weight: normal; 
  font-variant: normal; 
  color: #000000; 
  text-decoration: none;
}
A.POS2:hover { 
  font-family: tahoma, verdana, arial; 
  /*font-size: 8pt; */
  font-style: normal; 
  line-height: normal; 
  font-weight: normal; 
  font-variant: normal; 
  color: orange; 
  text-decoration: none;
}
A.POS4:visited {
  font-family: tahoma, verdana, arial; 
  /*font-size: 8pt; */
  font-style: normal; 
  line-height: normal; 
  font-weight: normal; 
  font-variant: normal; 
  color: #000000; 
  text-decoration: none;
}
A.POS4:link { 
  font-family: tahoma, verdana, arial; 
  /*font-size: 8pt; */
  font-style: normal; 
  line-height: normal; 
  font-weight: normal; 
  font-variant: normal; 
  color: #000000; 
  text-decoration: none;
}
A.POS4:hover { 
  font-family: tahoma, verdana, arial; 
  /*font-size: 8pt; */
  font-style: normal; 
  line-height: normal; 
  font-weight: normal; 
  font-variant: normal; 
  color: orange; 
  text-decoration: none;
}
A.POS5:visited {
  font-family: tahoma, verdana, arial; 
  /*font-size: 8pt; */
  font-style: normal; 
  line-height: normal; 
  font-weight: normal; 
  font-variant: normal; 
  color: #FFFFFF; 
  text-decoration: none;
}
A.POS5:link { 
  font-family: tahoma, verdana, arial; 
  /*font-size: 8pt; */
  font-style: normal; 
  line-height: normal; 
  font-weight: normal; 
  font-variant: normal; 
  color: #FFFFFF; 
  text-decoration: none;
}
A.POS5:hover { 
  font-family: tahoma, verdana, arial; 
  /*font-size: 8pt; */
  font-style: normal; 
  line-height: normal; 
  font-weight: normal; 
  font-variant: normal; 
  color: orange; 
  text-decoration: none;
}
A.POS6:visited {
  font-family: tahoma, verdana, arial; 
  /*font-size: 8pt; */
  font-style: normal; 
  line-height: normal; 
  font-weight: normal; 
  font-variant: normal; 
  color: #000000; 
  text-decoration: none;
}
A.POS6:link { 
  font-family: tahoma, verdana, arial; 
  /*font-size: 8pt; */
  font-style: normal; 
  line-height: normal; 
  font-weight: normal; 
  font-variant: normal; 
  color: #000000; 
  text-decoration: none;
}
A.POS6:hover { 
  font-family: tahoma, verdana, arial; 
  /*font-size: 8pt; */
  font-style: normal; 
  line-height: normal; 
  font-weight: normal; 
  font-variant: normal; 
  color: orange; 
  text-decoration: none;
}
div.MAIN {
  text-align: CENTER;
}

/* This entry is for the messages that appear for the user to display errors or information that emails have been sent etc. */
font.MESSAGE {
  font-size: 10pt; 
  color: white; 
  font-family: tahoma, verdana, arial; 
  text-decoration: none; 
  background-color: #339933;
}

/* Version 2.19 */
/* This entry is for the style of the users icon in the table. It allows you to specify image sizes etc. */
img.TABICON {
  height : 16px; 
  border: 0px;
}

/* Version 2.20 */
/* This entry is for the messages that appear for the user to display errors or information that emails have been sent etc. */
td.MESSAGE {
  font-size: 10pt; 
  color: white; 
  font-family: tahoma, verdana, arial; 
  text-decoration: none; 
  background-color: #339933;
}

/* Version 2.21 */
.inputbox { 
font-family: Trebuchet MS, Verdana, Arial, Helvetica, sans-serif; 
font-size: 10px; 
font-weight: bold; 
color: #000066; 
background: White; 
border: 1px solid #000066; 
} 

.submit { 
font-family: Trebuchet MS, Verdana, Arial, Helvetica, sans-serif; 
font-style: normal; 
font-weight: bold; 
font-size: 10px; 
color: #cc0000; 
border-top-width: 1px; background: White; 
border: 1px solid #000000; 
text-indent : 1px; 
} 

/** EDITS **/

#MENU li a{
    text-decoration: none;
    color: #FFFFFF;
    display: block;
}
 
#MENU li a:hover {
    text-decoration: none;
    color: #000000;
    background-color: #33B5E5;
}
/* EDIT BLINK */
.blink {
    animation-duration: 1s;
    animation-name: blink;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;
}
@keyframes blink {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}
/* ============================================
   MOBILE-FIRST CHROME AT WIDE VIEWPORTS — Daniel 2026-07-31

   Previously this file hid mobile-header / .left-drawer /
   .right-drawer / .bottom-tab-bar / .drawer-overlay at >= 1024px
   with `display: none !important;` — a defensive guardrail so
   that mainview-mobile.php's mobile-first markup did not stack
   above the 3-col MAINTB table on the desktop rendering. The
   guardrail was the root cause of Picture 3 in the 2026-07-31
   thread (mobile chrome silently disappearing on desktop-sized
   viewports).

   After the viewport gate was removed from mobile.css's <link>
   tag (commit 4637ce0), mobile.css now styles these elements at
   every viewport, including >= 1024px. The guardrail is no longer
   needed — removing it lets the mobile chrome render on desktop
   viewports.

   mainview-desktop.php (Classic) does NOT include these elements
   in its DOM at all, so removing this rule is a no-op for the
   Classic rendering. The router in mainview.php picks which
   template to load; the chrome only exists in the mobile template.
   ============================================ */

/* ============================================
   LIVE CRAWLER (next games) — shared rules

   Daniel 2026-06-23 00:20: the .mobile-live-crawler markup introduced
   2026-06-21 lives in BOTH mainview-mobile.php and mainview-desktop.php
   (getNextGame() in sortfunctions.php is shared). On mobile, mobile.css
   styles it; on desktop, mobile.css is not loaded, so flag PNGs render
   at their natural (large) pixel size and break the page.

   The .team-flag size and a minimal fallback layout live here so the
   desktop crawler renders sanely. mobile.css extends the same classes
   with the responsive flex layout (cards wrapping, narrower padding).

   Both viewports get small flags. Desktop gets an inline horizontal
   list of matches. Mobile gets the full card grid.
   ============================================ */
.team-flag {
  width: 14px;
  height: 10px;
  object-fit: cover;
  vertical-align: middle;
  border-radius: 1px;
}

.mobile-live-crawler {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 6px 10px;
  background-color: var(--gg-white, #fff);
  border-bottom: 1px solid var(--gg-border, #ddd);
  overflow: hidden;
}

.mobile-live-crawler-header {
  font-size: var(--gg-font-size-sm, 12px);
  font-weight: 600;
  margin-bottom: 4px;
}

.mobile-live-crawler-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.mobile-live-crawler-card {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 6px;
  text-decoration: none;
  color: inherit;
  white-space: nowrap;
  font-size: var(--gg-font-size-sm, 12px);
}

.mobile-live-crawler-team {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-weight: 500;
}

.mobile-live-crawler-vs {
  color: var(--gg-text-muted, #666);
  font-size: 11px;
}

.mobile-live-crawler-date {
  font-size: 11px;
  color: var(--gg-text-muted, #666);
  margin-right: 4px;
}

/* ============================================
   RIGHT-DRAWER FONT WRAP — Daniel 2026-06-23 20:18

   Backup rule, lives in common.css (which is always loaded)
   so this works even when mobile.css is cache-stale on
   the user's device. The matching rule in mobile.css:3246
   is the primary; this one is the safety net.

   The .right-drawer is mobile-only (drawers don't exist on
   desktop), and the @media gate ensures the display:block
   on <font> only applies ≤1023px, so desktop layout — where
   <font> being inline is fine — is untouched.
   ============================================ */

@media (max-width: 1023px) {
  /* td > font (direct child) NOT td font (any descendant) — see
     the longer note in mobile.css. The broader selector
     regresses the Klara player list. */
  .right-drawer td > font {
    display: block;
    word-wrap: break-word;
    overflow-wrap: anywhere;
    max-width: 100%;
  }

  .right-drawer td[bgcolor="GOLD"] {
    word-wrap: break-word;
    overflow-wrap: anywhere;
    max-width: 100%;
  }

  .right-drawer td[bgcolor="GOLD"] > font {
    display: block;
  }

  .right-drawer td[bgcolor="GOLD"] > table,
  .right-drawer td[bgcolor="GOLD"] > table table {
    width: 100% !important;
    table-layout: fixed;
  }
}