/* =====================================================
   WC2026.css - World Cup 2026 Predictions Game
   Converted from Euro2024.css
   ScorePos classes extended to 40 players,
   colour banding preserved exactly from original
   ===================================================== */

/* =====================================================
   CSS CUSTOM PROPERTIES (variables)
   Edit colours here — ScorePos classes and
   HonourCategory pill caps all pick them up automatically.
   ===================================================== */
:root {
    /* Pos 1: Gold */
    --pos1-bg:   #FFFF00; --pos1-fg:   #000000;

    /* Pos 2-4: Orangered podium */
    --pos2-bg:   orangered; --pos2-fg:  #FFFF00;
    --pos3-bg:   orangered; --pos3-fg:  #FFFFFF;
    --pos4-bg:   orangered; --pos4-fg:  #FFFFFF;

    /* Pos 5-8: Dark red upper mid */
    --pos5-bg:   #8D230F; --pos5-fg:   #FFFF00;
    --pos6-bg:   #8D230F; --pos6-fg:   #FFFF00;
    --pos7-bg:   #8D230F; --pos7-fg:   #FFFFFF;
    --pos8-bg:   #8D230F; --pos8-fg:   #FFFFFF;

    /* Pos 9-12: White bg / dark red text */
    --pos9-bg:   #FFFFFF; --pos9-fg:   #8D230F;
    --pos10-bg:  #FFFFFF; --pos10-fg:  #8D230F;
    --pos11-bg:  #FFFFFF; --pos11-fg:  #8D230F;
    --pos12-bg:  #FFFFFF; --pos12-fg:  #8D230F;

    /* Pos 13-16: White bg / dark green text */
    --pos13-bg:  #FFFFFF; --pos13-fg:  #3F681C;
    --pos14-bg:  #FFFFFF; --pos14-fg:  #3F681C;
    --pos15-bg:  #FFFFFF; --pos15-fg:  #3F681C;
    --pos16-bg:  #FFFFFF; --pos16-fg:  #3F681C;

    /* Pos 17-20: Blue bg */
    --pos17-bg:  #0149CE; --pos17-fg:  #FFFF00;
    --pos18-bg:  #0149CE; --pos18-fg:  #FFFF00;
    --pos19-bg:  #0149CE; --pos19-fg:  #FFFFFF;
    --pos20-bg:  #0149CE; --pos20-fg:  #FFFFFF;

    /* Pos 21-40: Dark green bg */
    --pos21-bg:  #3F681C; --pos21-fg:  #FFFF00;
    --pos22-bg:  #3F681C; --pos22-fg:  #FFFF00;
    --pos23-bg:  #3F681C; --pos23-fg:  #FFFFFF;
    --pos24-bg:  #3F681C; --pos24-fg:  #FFFFFF;
    --pos25-bg:  #3F681C; --pos25-fg:  #FFFFFF;
    --pos26-bg:  #3F681C; --pos26-fg:  #FFFFFF;
    --pos27-bg:  #3F681C; --pos27-fg:  #FFFFFF;
    --pos28-bg:  #3F681C; --pos28-fg:  #FFFFFF;
    --pos29-bg:  #3F681C; --pos29-fg:  #FFFFFF;
    --pos30-bg:  #3F681C; --pos30-fg:  #FFFFFF;
    --pos31-bg:  #3F681C; --pos31-fg:  #FFFFFF;
    --pos32-bg:  #3F681C; --pos32-fg:  #FFFFFF;
    --pos33-bg:  #3F681C; --pos33-fg:  #FFFFFF;
    --pos34-bg:  #3F681C; --pos34-fg:  #FFFFFF;
    --pos35-bg:  #3F681C; --pos35-fg:  #FFFFFF;
    --pos36-bg:  #3F681C; --pos36-fg:  #FFFFFF;
    --pos37-bg:  #3F681C; --pos37-fg:  #FFFFFF;
    --pos38-bg:  #3F681C; --pos38-fg:  #FFFFFF;
    --pos39-bg:  #3F681C; --pos39-fg:  #FFFFFF;
    --pos40-bg:  #3F681C; --pos40-fg:  #FFFFFF;
}

body {
    margin: 0;
    background-image: url('WC26/spaceBackground.jpg');
}

/* =====================================================
   POSITION COLOUR CLASSES
   Banding logic (preserved from Euro2024):
   Pos 1        : Yellow bg  / Black text     (1st place)
   Pos 2-4      : Orangered  / Yellow+White   (Top podium)
   Pos 5-8      : #8D230F    / Yellow+White   (Upper mid)
   Pos 9-12     : White bg   / #8D230F text   (Mid)
   Pos 13-16    : White bg   / #3F681C text   (Lower mid)
   Pos 17-20    : #0149CE    / Yellow+White   (Lower)
   Pos 21-28    : #3F681C    / Yellow+White   (Bottom - extended for WC)
   Pos 29-40    : #3F681C    / White text     (Extended bottom)
   ===================================================== */

.ScorePos1 {
    width: 60px; min-width: 44px;
    background-color: var(--pos1-bg); color: var(--pos1-fg);
    border-style: solid; border-color: #000000; border-spacing: 0px;
    font-family: Courier New; font-size: 14pt; font-weight: bold;
    text-align: center; padding: 0px; margin: 0px; letter-spacing: 0;
}

/* Positions 2-4: Orangered podium */
.ScorePos2 {
    width: 60px; min-width: 44px;
    background-color: var(--pos2-bg); color: var(--pos2-fg);
    border-style: solid; border-color: #000000; border-spacing: 0px;
    font-family: Courier New; font-size: 14pt; font-weight: bold;
    text-align: center; padding: 0px; margin: 0px; letter-spacing: 0;
}
.ScorePos3 {
    width: 60px; min-width: 44px;
    background-color: var(--pos3-bg); color: var(--pos3-fg);
    border-style: solid; border-color: #000000; border-spacing: 0px;
    font-family: Courier New; font-size: 14pt; font-weight: bold;
    text-align: center; padding: 0px; margin: 0px; letter-spacing: 0;
}
.ScorePos4 {
    width: 60px; min-width: 44px;
    background-color: var(--pos4-bg); color: var(--pos4-fg);
    border-style: solid; border-color: #000000; border-spacing: 0px;
    font-family: Courier New; font-size: 14pt; font-weight: bold;
    text-align: center; padding: 0px; margin: 0px; letter-spacing: 0;
}

/* Positions 5-8: Dark red upper mid */
.ScorePos5 {
    width: 60px; min-width: 44px;
    background-color: var(--pos5-bg); color: var(--pos5-fg);
    border-style: solid; border-color: #000000; border-spacing: 0px;
    font-family: Courier New; font-size: 14pt; font-weight: bold;
    text-align: center; padding: 0px; margin: 0px; letter-spacing: 0;
}
.ScorePos6 {
    width: 60px; min-width: 44px;
    background-color: var(--pos6-bg); color: var(--pos6-fg);
    border-style: solid; border-color: #000000; border-spacing: 0px;
    font-family: Courier New; font-size: 14pt; font-weight: bold;
    text-align: center; padding: 0px; margin: 0px; letter-spacing: 0;
}
.ScorePos7 {
    width: 60px; min-width: 44px;
    background-color: var(--pos7-bg); color: var(--pos7-fg);
    border-style: solid; border-color: #000000; border-spacing: 0px;
    font-family: Courier New; font-size: 14pt; font-weight: bold;
    text-align: center; padding: 0px; margin: 0px; letter-spacing: 0;
}
.ScorePos8 {
    width: 60px; min-width: 44px;
    background-color: var(--pos8-bg); color: var(--pos8-fg);
    border-style: solid; border-color: #000000; border-spacing: 0px;
    font-family: Courier New; font-size: 14pt; font-weight: bold;
    text-align: center; padding: 0px; margin: 0px; letter-spacing: 0;
}

/* Positions 9-12: White bg / dark red text - mid */
.ScorePos9 {
    width: 60px; min-width: 44px;
    background-color: var(--pos9-bg); color: var(--pos9-fg);
    border-style: solid; border-color: #000000; border-spacing: 0px;
    font-family: Courier New; font-size: 14pt; font-weight: bold;
    text-align: center; padding: 0px; margin: 0px; letter-spacing: 0;
}
.ScorePos10 {
    width: 60px; min-width: 44px;
    background-color: var(--pos10-bg); color: var(--pos10-fg);
    border-style: solid; border-color: #000000; border-spacing: 0px;
    font-family: Courier New; font-size: 14pt; font-weight: bold;
    text-align: center; padding: 0px; margin: 0px; letter-spacing: 0;
}
.ScorePos11 {
    width: 60px; min-width: 44px;
    background-color: var(--pos11-bg); color: var(--pos11-fg);
    border-style: solid; border-color: #000000; border-spacing: 0px;
    font-family: Courier New; font-size: 14pt; font-weight: bold;
    text-align: center; padding: 0px; margin: 0px; letter-spacing: 0;
}
.ScorePos12 {
    width: 60px; min-width: 44px;
    background-color: var(--pos12-bg); color: var(--pos12-fg);
    border-style: solid; border-color: #000000; border-spacing: 0px;
    font-family: Courier New; font-size: 14pt; font-weight: bold;
    text-align: center; padding: 0px; margin: 0px; letter-spacing: 0;
}

/* Positions 13-16: White bg / dark green text - lower mid */
.ScorePos13 {
    width: 60px; min-width: 44px;
    background-color: var(--pos13-bg); color: var(--pos13-fg);
    border-style: solid; border-color: #000000; border-spacing: 0px;
    font-family: Courier New; font-size: 14pt; font-weight: bold;
    text-align: center; padding: 0px; margin: 0px; letter-spacing: 0;
}
.ScorePos14 {
    width: 60px; min-width: 44px;
    background-color: var(--pos14-bg); color: var(--pos14-fg);
    border-style: solid; border-color: #000000; border-spacing: 0px;
    font-family: Courier New; font-size: 14pt; font-weight: bold;
    text-align: center; padding: 0px; margin: 0px; letter-spacing: 0;
}
.ScorePos15 {
    width: 60px; min-width: 44px;
    background-color: var(--pos15-bg); color: var(--pos15-fg);
    border-style: solid; border-color: #000000; border-spacing: 0px;
    font-family: Courier New; font-size: 14pt; font-weight: bold;
    text-align: center; padding: 0px; margin: 0px; letter-spacing: 0;
}
.ScorePos16 {
    width: 60px; min-width: 44px;
    background-color: var(--pos16-bg); color: var(--pos16-fg);
    border-style: solid; border-color: #000000; border-spacing: 0px;
    font-family: Courier New; font-size: 14pt; font-weight: bold;
    text-align: center; padding: 0px; margin: 0px; letter-spacing: 0;
}

/* Positions 17-20: Blue bg - lower */
.ScorePos17 {
    width: 60px; min-width: 44px;
    background-color: var(--pos17-bg); color: var(--pos17-fg);
    border-style: solid; border-color: #000000; border-spacing: 0px;
    font-family: Courier New; font-size: 14pt; font-weight: bold;
    text-align: center; padding: 0px; margin: 0px; letter-spacing: 0;
}
.ScorePos18 {
    width: 60px; min-width: 44px;
    background-color: var(--pos18-bg); color: var(--pos18-fg);
    border-style: solid; border-color: #000000; border-spacing: 0px;
    font-family: Courier New; font-size: 14pt; font-weight: bold;
    text-align: center; padding: 0px; margin: 0px; letter-spacing: 0;
}
.ScorePos19 {
    width: 60px; min-width: 44px;
    background-color: var(--pos19-bg); color: var(--pos19-fg);
    border-style: solid; border-color: #000000; border-spacing: 0px;
    font-family: Courier New; font-size: 14pt; font-weight: bold;
    text-align: center; padding: 0px; margin: 0px; letter-spacing: 0;
}
.ScorePos20 {
    width: 60px; min-width: 44px;
    background-color: var(--pos20-bg); color: var(--pos20-fg);
    border-style: solid; border-color: #000000; border-spacing: 0px;
    font-family: Courier New; font-size: 14pt; font-weight: bold;
    text-align: center; padding: 0px; margin: 0px; letter-spacing: 0;
}

/* Positions 21-28: Dark green bg - bottom (extended from original 21-25 for WC player count) */
.ScorePos21 {
    width: 60px; min-width: 44px;
    background-color: var(--pos21-bg); color: var(--pos21-fg);
    border-style: solid; border-color: #000000; border-spacing: 0px;
    font-family: Courier New; font-size: 14pt; font-weight: bold;
    text-align: center; padding: 0px; margin: 0px; letter-spacing: 0;
}
.ScorePos22 {
    width: 60px; min-width: 44px;
    background-color: var(--pos22-bg); color: var(--pos22-fg);
    border-style: solid; border-color: #000000; border-spacing: 0px;
    font-family: Courier New; font-size: 14pt; font-weight: bold;
    text-align: center; padding: 0px; margin: 0px; letter-spacing: 0;
}
.ScorePos23 {
    width: 60px; min-width: 44px;
    background-color: var(--pos23-bg); color: var(--pos23-fg);
    border-style: solid; border-color: #000000; border-spacing: 0px;
    font-family: Courier New; font-size: 14pt; font-weight: bold;
    text-align: center; padding: 0px; margin: 0px; letter-spacing: 0;
}
.ScorePos24 {
    width: 60px; min-width: 44px;
    background-color: var(--pos24-bg); color: var(--pos24-fg);
    border-style: solid; border-color: #000000; border-spacing: 0px;
    font-family: Courier New; font-size: 14pt; font-weight: bold;
    text-align: center; padding: 0px; margin: 0px; letter-spacing: 0;
}
.ScorePos25 {
    width: 60px; min-width: 44px;
    background-color: var(--pos25-bg); color: var(--pos25-fg);
    border-style: solid; border-color: #000000; border-spacing: 0px;
    font-family: Courier New; font-size: 14pt; font-weight: bold;
    text-align: center; padding: 0px; margin: 0px; letter-spacing: 0;
}
.ScorePos26 {
    width: 60px; min-width: 44px;
    background-color: var(--pos26-bg); color: var(--pos26-fg);
    border-style: solid; border-color: #000000; border-spacing: 0px;
    font-family: Courier New; font-size: 14pt; font-weight: bold;
    text-align: center; padding: 0px; margin: 0px; letter-spacing: 0;
}
.ScorePos27 {
    width: 60px; min-width: 44px;
    background-color: var(--pos27-bg); color: var(--pos27-fg);
    border-style: solid; border-color: #000000; border-spacing: 0px;
    font-family: Courier New; font-size: 14pt; font-weight: bold;
    text-align: center; padding: 0px; margin: 0px; letter-spacing: 0;
}
.ScorePos28 {
    width: 60px; min-width: 44px;
    background-color: var(--pos28-bg); color: var(--pos28-fg);
    border-style: solid; border-color: #000000; border-spacing: 0px;
    font-family: Courier New; font-size: 14pt; font-weight: bold;
    text-align: center; padding: 0px; margin: 0px; letter-spacing: 0;
}

/* Positions 29-40: Extended for WC player count - dark green bg / white text */
.ScorePos29 {
    width: 60px; min-width: 44px;
    background-color: var(--pos29-bg); color: var(--pos29-fg);
    border-style: solid; border-color: #000000; border-spacing: 0px;
    font-family: Courier New; font-size: 14pt; font-weight: bold;
    text-align: center; padding: 0px; margin: 0px; letter-spacing: 0;
}
.ScorePos30 {
    width: 60px; min-width: 44px;
    background-color: var(--pos30-bg); color: var(--pos30-fg);
    border-style: solid; border-color: #000000; border-spacing: 0px;
    font-family: Courier New; font-size: 14pt; font-weight: bold;
    text-align: center; padding: 0px; margin: 0px; letter-spacing: 0;
}
.ScorePos31 {
    width: 60px; min-width: 44px;
    background-color: var(--pos31-bg); color: var(--pos31-fg);
    border-style: solid; border-color: #000000; border-spacing: 0px;
    font-family: Courier New; font-size: 14pt; font-weight: bold;
    text-align: center; padding: 0px; margin: 0px; letter-spacing: 0;
}
.ScorePos32 {
    width: 60px; min-width: 44px;
    background-color: var(--pos32-bg); color: var(--pos32-fg);
    border-style: solid; border-color: #000000; border-spacing: 0px;
    font-family: Courier New; font-size: 14pt; font-weight: bold;
    text-align: center; padding: 0px; margin: 0px; letter-spacing: 0;
}
.ScorePos33 {
    width: 60px; min-width: 44px;
    background-color: var(--pos33-bg); color: var(--pos33-fg);
    border-style: solid; border-color: #000000; border-spacing: 0px;
    font-family: Courier New; font-size: 14pt; font-weight: bold;
    text-align: center; padding: 0px; margin: 0px; letter-spacing: 0;
}
.ScorePos34 {
    width: 60px; min-width: 44px;
    background-color: var(--pos34-bg); color: var(--pos34-fg);
    border-style: solid; border-color: #000000; border-spacing: 0px;
    font-family: Courier New; font-size: 14pt; font-weight: bold;
    text-align: center; padding: 0px; margin: 0px; letter-spacing: 0;
}
.ScorePos35 {
    width: 60px; min-width: 44px;
    background-color: var(--pos35-bg); color: var(--pos35-fg);
    border-style: solid; border-color: #000000; border-spacing: 0px;
    font-family: Courier New; font-size: 14pt; font-weight: bold;
    text-align: center; padding: 0px; margin: 0px; letter-spacing: 0;
}
.ScorePos36 {
    width: 60px; min-width: 44px;
    background-color: var(--pos36-bg); color: var(--pos36-fg);
    border-style: solid; border-color: #000000; border-spacing: 0px;
    font-family: Courier New; font-size: 14pt; font-weight: bold;
    text-align: center; padding: 0px; margin: 0px; letter-spacing: 0;
}
.ScorePos37 {
    width: 60px; min-width: 44px;
    background-color: var(--pos37-bg); color: var(--pos37-fg);
    border-style: solid; border-color: #000000; border-spacing: 0px;
    font-family: Courier New; font-size: 14pt; font-weight: bold;
    text-align: center; padding: 0px; margin: 0px; letter-spacing: 0;
}
.ScorePos38 {
    width: 60px; min-width: 44px;
    background-color: var(--pos38-bg); color: var(--pos38-fg);
    border-style: solid; border-color: #000000; border-spacing: 0px;
    font-family: Courier New; font-size: 14pt; font-weight: bold;
    text-align: center; padding: 0px; margin: 0px; letter-spacing: 0;
}
.ScorePos39 {
    width: 60px; min-width: 44px;
    background-color: var(--pos39-bg); color: var(--pos39-fg);
    border-style: solid; border-color: #000000; border-spacing: 0px;
    font-family: Courier New; font-size: 14pt; font-weight: bold;
    text-align: center; padding: 0px; margin: 0px; letter-spacing: 0;
}
.ScorePos40 {
    width: 60px; min-width: 44px;
    background-color: var(--pos40-bg); color: var(--pos40-fg);
    border-style: solid; border-color: #000000; border-spacing: 0px;
    font-family: Courier New; font-size: 14pt; font-weight: bold;
    text-align: center; padding: 0px; margin: 0px; letter-spacing: 0;
}

/* =====================================================
   ALL REMAINING CLASSES - unchanged from Euro2024.css
   ===================================================== */

.resultsloser {
    text-align: center;
    color: #FFFFFF;
}

.resultsWidth {
    width: 40px;
}

.resultsWidth2 {
    width: 70px;
}

.resultsscore {
    text-align: center;
    background-color: #FFFF00;
    color: #000000;
    font-family: Courier New;
    font-size: 14pt;
    font-weight: bold;
}

.resultsresult {
    text-align: center;
    background-color: orangered;
    color: #FFFFFF;
    font-family: Courier New;
    font-size: 14pt;
    font-weight: bold;
}

.predWidthPre2 {
    width: 110px;
    font-size: 15pt;
    font-weight: bold;
}

.predWidthPre3 {
    width: 140px;
    font-size: 15pt;
    font-weight: bold;
}

.predWidth {
    width: 70px;
    font-size: 14pt;
    font-weight: bold;
}

.preddraw {
    text-align: center;
    background-color: #6DBBFC;
    color: #000000;
}

.questionMark {
    background-color: #C0C0C0;
}

.predLD {
    text-align: center;
    background-color: #FDBB30;
    color: #000000;
}

.coins {
    background-color: #FFFFFF;
    width: 45px;
    min-width: 60px;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance: textfield;
}

.UpDown {
    background-color: #FFFFFF;
    width: 30px;
}

.leagueDivision {
    width: 1200px;
    font-family: Courier New;
    font-size: 16pt;
    font-weight: bold;
    height: 30px;
    padding: 3px;
}

.avatar {
    text-align: left;
    background-color: #FFFFFF;
    color: #000000;
    min-width: 16px;
}

.avatarMine {
    text-align: left;
    background-color: #98d5fe;
    color: #000000;
    min-width: 16px;
}

.name {
    text-align: left;
    background-color: #FFFFFF;
    color: #000000;
    min-width: 100px;
}

.cupMatch {
    width: 460px;
    text-align: center;
}

.cupVersus {
    text-align: center;
    width: 30px;
    font-family: 'MS UI Gothic';
    font-size: 16pt;
    font-weight: bold;
}

.cupScore {
    width: 50px;
    text-align: center;
    font-family: 'Malgun Gothic';
    font-size: 12pt;
    font-weight: bold;
    border-style: solid;
    border-color: #000000;
    border-spacing: 0px;
    background-color: #f3f56e;
}

.cupPlayer {
    background-color: #FFFFFF;
    color: #000000;
    width: 150px;
    font-family: 'Malgun Gothic';
    font-size: 15pt;
    font-weight: bold;
}

.cupPlayerMine {
    background-color: #98d5fe;
    color: #000000;
    width: 100px;
    font-family: 'Malgun Gothic';
    font-size: 12pt;
    font-weight: bold;
}

.nameMine {
    background-color: #98d5fe;
    color: #000000;
}

.group1a {
    text-align: center;
    background-color: #ffffff;
    color: #000000;
    line-height: 24px;
    height: 24px;
}

.group1b {
    text-align: center;
    background-color: #ffffff;
    color: #000000;
    line-height: 24px;
    height: 24px;
}

.group2a {
    text-align: center;
    background-color: #ffffff;
    color: #000000;
    line-height: 24px;
    height: 24px;
}

.group2b {
    text-align: center;
    background-color: #ffffff;
    color: #000000;
    line-height: 24px;
    height: 24px;
}

.group3a {
    text-align: center;
    background-color: #ffffff;
    color: #000000;
    line-height: 24px;
    height: 24px;
}

.group3b {
    text-align: center;
    background-color: #ffffff;
    color: #000000;
    line-height: 24px;
    height: 24px;
}

.group0a {
    text-align: center;
    background-color: #FFCC33;
    color: #04f5ff;
    line-height: 24px;
    height: 24px;
}

.group0b {
    text-align: center;
    background-color: #CBA135;
    line-height: 24px;
    height: 24px;
}

/* Division header styles - 5 segments for WC2026 */
/* Segment 1 & 2 (group stage) reuse 1a gold style */
.groupHead1a {
    text-align: center;
    background: linear-gradient(#774D3F, #faf971, #774D3F);
    line-height: 24px;
    height: 24px;
    border-top: 2px solid gray;
    border-bottom: 2px solid gray;
}

/* Segment 3 (group stage final) reuses 1b silver style */
.groupHead1b {
    text-align: center;
    background: linear-gradient(grey, ivory, pink);
    line-height: 24px;
    height: 24px;
    border-top: 2px solid gray;
    border-bottom: 2px solid gray;
}

/* Segment 4 & 5 (knockouts) reuse 1c bronze style */
.groupHead1c {
    text-align: center;
    background: linear-gradient(#664228, #97867c, #a88624);
    line-height: 24px;
    height: 24px;
    border-top: 2px solid gray;
    border-bottom: 2px solid gray;
}

.groupHead2 {
    text-align: center;
    background-color: #169B62;
    color: #FFFFFF;
    line-height: 24px;
    height: 24px;
    border-top: 2px solid gray;
    border-bottom: 2px solid gray;
}

.groupHead3 {
    text-align: center;
    background-color: #3D195B;
    color: #FFFFFF;
    line-height: 24px;
    height: 24px;
    border-top: 2px solid gray;
    border-bottom: 2px solid gray;
    width: 1000px;
}

.groupHead4 {
    text-align: center;
    background-color: #49BCE3;
    color: #000000;
    line-height: 22px;
    height: 22px;
    border-top: 2px solid gray;
    border-bottom: 2px solid gray;
}

.cupHead1 {
    text-align: center;
    background-color: #fc9fce;
    color: #3D195B;
    line-height: 24px;
    height: 24px;
    border-top: 5px solid black;
    border-bottom: 5px solid black;
    width: 1000px;
}

.JokerChooseRow {
    text-align: center;
    background-color: #e8ee55;
    color: #3D195B;
    line-height: 24px;
    height: 24px;
    width: 1000px;
}

.teamwhite {
    font-family: 'Malgun Gothic';
    font-size: 12pt;
    font-weight: bold;
    font-style: normal;
    font-variant: normal;
    text-transform: none;
    text-align: center;
    color: #FFFFFF;
}

.teamwhiteSmall {
    font-family: 'Malgun Gothic';
    font-size: 9pt;
    font-weight: bold;
    font-style: normal;
    font-variant: normal;
    text-transform: none;
    text-align: center;
    color: #FFFFFF;
}

.dateHeader {
    font-family: Courier New;
    font-size: 12pt;
    font-weight: bold;
    font-style: normal;
    font-variant: normal;
    text-transform: none;
    text-align: left;
    color: #FFFFFF;
    background-color: blue;
    padding: 0px;
    margin: 0px;
    border-spacing: 0px;
    vertical-align: middle;
}

.teamblack {
    font-family: 'Malgun Gothic';
    font-size: 12pt;
    font-weight: normal;
    font-style: normal;
    font-variant: normal;
    text-transform: none;
    text-align: left;
    color: #FFFFFF;
    vertical-align: middle;
}

.teamblackSmall {
    font-family: 'Malgun Gothic';
    font-size: 10pt;
    font-weight: normal;
    font-style: normal;
    font-variant: normal;
    text-transform: none;
    text-align: left;
    color: #FFFFFF;
    vertical-align: middle;
}

.minWidthPos {
    min-width: 90px;
}

.goingDown {
    background-image: url("/images/down.png");
}

.goingUp {
    background-image: url("/images/up.png");
}

.leftBig {
    min-width: 60px;
}

.logoBit {
    min-width: 116px;
}

.SimpleTable {
    padding: 0px;
    margin: 0px;
    border-spacing: 0px;
    vertical-align: middle;
    letter-spacing: 0;
    height: 100%;
}

.SimplerTable {
    padding: 0px;
    margin: 0px;
    border-spacing: 0px;
    vertical-align: middle;
    letter-spacing: 0;
}

/* ---- Match header score cells ---- */
.finalScore {
    text-align: center;
    background-color: #000080;
    color: #ffffff;
    font-family: 'Courier New', monospace;
    font-size: 14pt;
    font-weight: bold;
    padding: 1px 3px;
    white-space: nowrap;
}

/* Change 5: Live match — dark green background, white writing */
.finalScoreAIS {
    text-align: center;
    background-color: #1a6e1a;
    color: #ffffff;
    font-family: 'Courier New', monospace;
    font-size: 14pt;
    font-weight: bold;
    padding: 1px 3px;
    white-space: nowrap;
}

/* Change 7: Prediction score background colours */
/* Home win predicted */
.predHome {
    text-align: center;
    background-color: #4C763B;
    color: #FFFFFF;
    font-family: 'Courier New', monospace;
    font-size: 14pt;
    font-weight: bold;
}

/* Away win predicted */
.predAway {
    text-align: center;
    background-color: #78C841;
    color: #000000;
    font-family: 'Courier New', monospace;
    font-size: 14pt;
    font-weight: bold;
}

/* Draw predicted */
.predDraw {
    text-align: center;
    background-color: #B4E50D;
    color: #000000;
    font-family: 'Courier New', monospace;
    font-size: 14pt;
    font-weight: bold;
}

/* Change 7a: Match finished, result was wrong — white bg, black font */
.predResultWrong {
    text-align: center;
    background-color: #ffffff;
    color: #000000;
    font-family: 'Courier New', monospace;
    font-size: 14pt;
    font-weight: bold;
}

/* No prediction entered — white and blank */
.predNone {
    background-color: #ffffff;
    color: #ffffff;
}

/* Change 6: Points cell backgrounds */
/* Correct result (not exact score) — red */
.resultsptsResult {
    background-color: #cc0000;
    color: #ffffff;
    font-family: 'Courier New', monospace;
    min-width: 22px;
    padding: 1px 3px;
}

/* Exact score — yellow */
.resultsptsExact {
    background-color: #FFD700;
    color: #000000;
    font-family: 'Courier New', monospace;
    min-width: 22px;
    padding: 1px 3px;
}

.JokerBox {
    width: 30px;
}

.DateTimewhite {
    font-family: Courier New;
    font-size: 10pt;
    font-weight: bold;
    font-style: normal;
    font-variant: normal;
    text-transform: none;
    color: #FFFFFF;
}

.DateTimeblack {
    font-family: Courier New;
    font-size: 10pt;
    font-weight: bold;
    font-style: normal;
    font-variant: normal;
    text-transform: none;
    color: #000000;
}

.jokerPoints {
    background-color: #14805E;
    border-style: none;
    border-color: #FFFFFF;
    font-family: BankFuturistic;
    padding: 0px;
    margin: 0px;
    letter-spacing: 0;
    border-spacing: 0px;
    color: white;
    font-size: 16pt;
}

.Scorebox {
    width: 2.1em;
}

.jokerwording {
    font-size: 14pt;
}

.dropbtn {
    background-color: #3498DB;
    color: white;
    padding: 0px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropbtn:hover, .dropbtn:focus {
    background-color: #2980B9;
}

.dropdown {
    position: relative;
    display: inline-block;
    width: 96px;
}

.matchType {
    height: 24px;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 140px;
    overflow: auto;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown a:hover {
    background-color: #ddd;
}

.show {
    display: block;
}

.box {
    display: flex;
    flex-flow: column;
    height: 100%;
}

.FormPanel {
    flex: 1 1 auto;
}

.MatchCol {
    width: 140px;
    min-width: 140px;
    padding: 0px;
    margin: 0px;
    letter-spacing: 0;
    border-spacing: 0px;
}

.PredCol {
    width: 140px;
    min-width: 140px;
    border-top: 1px solid lightgray;
    border-left: 1px solid lightgray;
    padding: 0px;
    margin: 0px;
    letter-spacing: 0;
    border-spacing: 0px;
}

.match {
    border-style: dashed solid dashed solid;
    border-color: #C0C0C0 #808080 #C0C0C0 #808080;
    padding: 0px;
    margin: 0px;
    letter-spacing: 0;
    border-spacing: 0px;
    width: 100%;
}

.matchPointFive {
    border-style: dashed solid dashed solid;
    border-color: #C0C0C0 #808080 #C0C0C0 #808080;
    padding: 0px;
    margin: 0px;
    letter-spacing: 0;
    border-spacing: 0px;
    background-color: #C0C0C0;
    width: 100%;
    color: #000000;
}

.matchDouble {
    border-style: dashed solid dashed solid;
    border-color: #C0C0C0 #808080 #C0C0C0 #808080;
    padding: 0px;
    margin: 0px;
    letter-spacing: 0;
    border-spacing: 0px;
    background-color: gold;
    width: 100%;
    color: #000000;
}

.matchEngland {
    border-style: dashed solid dashed solid;
    border-color: #C0C0C0 #808080 #C0C0C0 #808080;
    padding: 0px;
    margin: 0px;
    letter-spacing: 0;
    border-spacing: 0px;
    background-color: #CE1124;
    color: #FFFFFF;
    font-weight: bolder;
    width: 100%;
}

.matchBonus {
    border-style: dashed solid dashed solid;
    border-color: #C0C0C0 #808080 #C0C0C0 #808080;
    padding: 0px;
    margin: 0px;
    letter-spacing: 0;
    border-spacing: 0px;
    width: 85px;
}

.weekHead {
    background-color: #FB6542;
    border-style: solid;
    border-color: #000000;
    color: #FFFFFF;
    padding: 0px;
    margin: 0px;
    letter-spacing: 0;
    border-spacing: 0px;
    font-family: Arial;
    font-size: 14pt;
    font-weight: bold;
    text-align: center;
}

.weekHead2 {
    background-color: #FFFFFF;
    border-style: none;
    border-color: #FFFFFF;
    font-family: BankFuturistic;
    padding: 0px;
    margin: 0px;
    letter-spacing: 0;
    border-spacing: 0px;
    color: #000000;
    font-size: 13pt;
}

.weekWin {
    background-color: #FB6542;
    border-style: solid;
    border-color: #000000;
    color: #FFFFFF;
    padding: 0px;
    margin: 0px;
    letter-spacing: 0;
    border-spacing: 0px;
    font-family: Arial;
    font-size: 14pt;
    font-weight: bold;
    text-align: center;
}

.weekSilver {
    background-color: #2bcae5;
    border-style: solid;
    border-color: #000000;
    color: #FFFFFF;
    padding: 0px;
    margin: 0px;
    letter-spacing: 0;
    border-spacing: 0px;
    font-family: Arial;
    font-size: 14pt;
    font-weight: bold;
    text-align: center;
}

.weekBronze {
    background-color: #8D230F;
    border-style: solid;
    border-color: #000000;
    color: #FFFFFF;
    padding: 0px;
    margin: 0px;
    letter-spacing: 0;
    border-spacing: 0px;
    font-family: Arial;
    font-size: 14pt;
    font-weight: bold;
    text-align: center;
}

.weekBottom {
    background-color: #3F681C;
    border-style: solid;
    border-color: #000000;
    color: #FFFFFF;
    padding: 0px;
    margin: 0px;
    letter-spacing: 0;
    border-spacing: 0px;
    font-family: Arial;
    font-size: 14pt;
    font-weight: bold;
    text-align: center;
}

.Borders {
    border-style: solid;
    border-color: #000000;
}

.weekNormal {
    background-color: #FFFFFF;
    border-style: solid;
    border-color: #000000;
    color: #000000;
    padding: 0px;
    margin: 0px;
    letter-spacing: 0;
    border-spacing: 0px;
    font-family: Courier New;
    font-size: 14pt;
    font-weight: bold;
    text-align: center;
    width: 40px;
}

.glassNormal {
    background-color: #FFFFFF;
    border-style: solid;
    border-color: #FFFFFF;
    color: #000000;
    padding: 0px;
    margin: 0px;
    letter-spacing: 0;
    border-spacing: 0px;
    font-family: Courier New;
    font-size: 14pt;
    font-weight: bold;
    text-align: center;
}

.bonusButton2 {
    background-color: #FFFFFF;
    overflow-wrap: normal;
    border-radius: 12px;
}

.submitbutton {
    background-color: gold;
    overflow-wrap: normal;
    border-radius: 12px;
    width: 100%;
    font-size: 20px;
    align-content: center;
}

.bonusButton1 {
    background-color: yellow;
    overflow-wrap: normal;
    border-radius: 12px;
}

.bonusButton0 {
    background-color: #000000;
    color: #FFFFFF;
    overflow-wrap: normal;
    border-radius: 12px;
}

.BonusWord {
    font-family: Trebuchet MS Bold;
    font-size: 13pt;
}

.extraBit {
    min-width: 44px;
}

body {
    text-align: center;
    width: 100%;
    margin: 0 auto;
    padding: 0px;
    font-family: helvetica;
    background-color: black;
}

#wrapper {
    text-align: center;
    margin: 0 auto;
    padding: 0px;
    width: 995px;
    max-width: 100%;
}

#checkbox_div {
    width: 375px;
    margin-left: 309px;
}

#checkbox_div p {
    margin: 5px;
    color: white;
    font-weight: bold;
    font-size: 17px;
}

#checkbox_div li {
    color: white;
    display: inline-block;
    margin: 5px;
    font-size: 17px;
    font-weight: bold;
}

#checkbox_div input[type="checkbox"] {
    width: 20px;
    height: 20px;
}

#employee_table {
    color: #FE642E;
    background-color: white;
    text-align: center;
}

#employee_table th {
    border: 1px dashed #FE642E;
}

#employee_table td {
    min-width: 70px;
    border: 1px dashed #FE642E;
}

td.name {
    text-align: left;
    padding-left: 1px;
    min-width: 90px;
}

td.nameMine {
    text-align: left;
    padding-left: 1px;
    min-width: 90px;
}