body {
    /* FIXME: I'd suggest putting a 0.75em font-size */
    font: .85em/1.3em sans-serif;

    color: #F6F6F6;

    background-color: #121212;
    background-image: -webkit-linear-gradient(#2C2C2C, #1C1C1C);
    background-image:    -moz-linear-gradient(#2C2C2C, #1C1C1C);
    background-image:      -o-linear-gradient(#2C2C2C, #1C1C1C);
    background-image:         linear-gradient(#2C2C2C, #1C1C1C);
    background-attachment: fixed;

    margin: 0;
}

/* TODO: the following two might be omitted */

td {
    padding: 0;
}

a {
    outline: none;
}

abbr {
    text-decoration: none;
}

/******************************************************************************\
|                                                                              |
|                                   Page layout                                |
|                                   -----------                                |
\******************************************************************************/


#LogoPanel {
    position: absolute;
    top: 65px;
    left: 24px;
    width: 200px;
}

#LogoPanel img {
    width: 160px;
    margin-left: 10px;
}

#UpperPanel {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3em;
    border-width: 0 0 2px 2px;
    border-style: solid;
    border-color: #3A3A3C; /* Changed to a darker color */
    border-radius: 0 0 0 10px;
    background-color: #2A2A2C; /* Changed to a darker color */
    box-shadow: 0 0 2px 0 #111; /* Changed to a darker color */
    z-index: 100;
}

#SidePanel {
    position: absolute;
    left: 0;
    top: 208px;
    bottom: 30px;
    width: 220px;
    border-width: 2px 2px 2px 0;
    border-style: solid;
    border-color: #3A3A3C; /* Changed to a darker color */
    border-radius: 0 10px 10px 0;
    background-color: #2A2A2C; /* Changed to a darker color */
    box-shadow: 0 0 2px 0 #111; /* Changed to a darker color */
    z-index: 8;
    padding: 0;
}

#InnerFrame {
    position: absolute;
    top: 3em;
    left: 220px;
    right: 0;
    bottom: 0;
    margin: 2px 0 0 2px;
    padding: 0 3em;
    overflow-y: scroll;
    background-color: #1E1E1E; /* Added background color for dark mode */
    color: #EAEAEC; /* Changed text color to light */
}


/******************************************************************************\
|                                                                              |
|                                    Time View                                 |
|                                    ---------                                 |
\******************************************************************************/


#TimeView {
    position: absolute;
    top: 208px;
    left: 0;
    width: 220px;
    z-index: 10;
    text-align: center;
}

#TimeView_selector {
    display: inline-block;
    height: 28px;
    padding: 0;
    z-index: 10;
    margin: 4px;
    overflow: hidden;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
         -o-user-select: none;
            user-select: none;
}

#TimeView.pre_cont #TimeView_selector:hover,
#TimeView.cont #TimeView_selector:hover,
#TimeView_selector.open {
    margin: 2px;
    background-color: #2A2A2C; /* Changed to a darker color */
    border: 2px solid #3A3A3C; /* Changed to a darker color */
    border-radius: 4px;
    box-shadow: 0 0 2px 0 #111; /* Changed to a darker color */
}

#TimeView_selector.open {
    height: auto;
}

#TimeView_time {
    display: inline-block;
    vertical-align: top;
    text-align: center;
    line-height: 28px;
    font-size: 24px;
    margin: 0 2px 0 16px;
    color: #EAEAEC; /* Changed to a lighter color */
}

#TimeView_expand {
    display: inline-block;
    position: relative;
    width: 8px;
    height: 28px;
    vertical-align: top;
    cursor: pointer;
    margin: 0 4px 0 2px;
}

#TimeView_selector .caret {
    position: absolute;
    top: 12px;
    width: 0;
    height: 0;
    vertical-align: middle;
    border-top: 6px solid #AAAAAA;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
    border-bottom: 0;
}

#TimeView_selector:hover .caret {
    border-top-color: #FFFFFF; /* Changed to a lighter color */
}

#TimeView_selector.open .caret {
    top: 10px;
    border-top: 0;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
    border-bottom: 6px solid #FFFFFF; /* Changed to a lighter color */
}

#TimeView.post_cont #TimeView_time {
    margin-right: 16px;
}

#TimeView.post_cont #TimeView_expand {
    display: none;
}

#TimeView_selector_elapsed,
#TimeView_selector_remaining,
#TimeView_selector_current {
    padding: 2px 4px;
    font-size: 0.875em;
    line-height: 1.4em;
    color: #CCCCCC; /* Changed to a lighter color */
    cursor: pointer;
}

#TimeView.pre_cont #TimeView_selector_elapsed,
#TimeView.post_cont #TimeView_selector_elapsed,
#TimeView.post_cont #TimeView_selector_remaining {
    display: none;
}

#TimeView.elapsed #TimeView_selector_elapsed,
#TimeView.remaining #TimeView_selector_remaining,
#TimeView.current #TimeView_selector_current {
    background-color: #444444; /* Changed to a darker color */
    color: #EAEAEC; /* Changed to a lighter color */
}

#TimeView_selector_elapsed:hover,
#TimeView_selector_remaining:hover,
#TimeView_selector_current:hover {
    background-color: #555555 !important; /* Changed to a darker color */
    color: #EAEAEC !important; /* Changed to a lighter color */
}

#TimeView + #SidePanel {
    top: 256px;
}

#TimeView.pre_cont + #SidePanel,
#TimeView.cont + #SidePanel {
    top: 260px;
}


/******************************************************************************\
|                                                                              |
|                                   Right panel                                |
|                                   -----------                                |
\******************************************************************************/


#Overview {
    position: relative;
    height: 100%;
    width: 100%;
}


/******************************************************************************\
|                                                                              |
|                                   Team search                                |
|                                   -----------                                |
\******************************************************************************/


#TeamSearch_input {
    position: absolute;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    top: 0;
    left: 250px;
    height: 1.5em;
    margin: 0.5em;
    border: 0;
    padding: 0.25em;
    z-index: 401;
    border-radius: 0.5em;
    /* Needed to override WebKit's default font size for inputs */
    font: inherit;
    background-color: #333333; /* Changed to a darker color */
    color: #EAEAEC; /* Changed to a lighter color */
    outline: 0;
}

#TeamSearch_bg {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 400;
    background-color: rgba(0,0,0,0.7); /* Darkened the overlay */
    /* the following two lines are for IE */
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#B3000000, endColorstr=#B3000000)";
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#B3000000, endColorstr=#B3000000);
}

#TeamSearch_bg.open {
    display: block;
}

#TeamSearch {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 940px;
    margin: 64px auto 48px;
    border-radius: 12px;
    background-color: #2A2A2C; /* Changed to a darker color */
}

#TeamSearch_close {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 24px;
    height: 24px;
    cursor: pointer;
}

#TeamSearch_body {
    position: absolute;
    top: 14px; /* 20px - 0.5em at a 12px font-size */
    top: -webkit-calc(20px - 0.5em);
    top:    -moz-calc(20px - 0.5em);
    top:         calc(20px - 0.5em);
    left: 10px;
    right: 10px;
    bottom: 14px; /* 20px - 0.5em at a 12px font-size */
    bottom: -webkit-calc(20px - 0.5em);
    bottom:    -moz-calc(20px - 0.5em);
    bottom:         calc(20px - 0.5em);
    overflow-y: auto;
}

#TeamSearch_body div.item {
    float: left;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 25%;
    height: 3em;
    padding: 0;
    border: 0 solid #2A2A2C; /* Changed to a matching dark color */
    border-width: 0.5em 10px;
    background-color: #444444; /* Changed to a darker color */
    -webkit-user-select: none;
     -khtml-user-select: none;
       -moz-user-select: none;
         -o-user-select: none;
            user-select: none;
}

#TeamSearch_body div.item.hidden {
    display: none;
}

#TeamSearch_body div.item label {
    display: block;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding: 0.25em 5px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #EAEAEC; /* Changed to a lighter color */
}

#TeamSearch_body div.item input {
    margin: auto 1px auto 0;
    vertical-align: middle;
}

#TeamSearch_body div.item img {
    display: inline-block;
    max-height: 20px;
    vertical-align: top;
    margin-top: -1px; /* (1.5em - 20px) / 2 at a 12px font-size */
    margin-top: -webkit-calc(0.75em - 10px);
    margin-top:    -moz-calc(0.75em - 10px);
    margin-top:         calc(0.75em - 10px);
}


/******************************************************************************\
|                                                                              |
|                                   Scoreboard                                 |
|                                   ----------                                 |
\******************************************************************************/


#Scoreboard {
    width: 100%;
    table-layout: fixed;
    margin: 20px 0;
}

#Scoreboard_cols col.sel {
    width: 2em;
}

#Scoreboard_cols col.rank {
    width: 48px;
}

#Scoreboard_cols col.user_id {
    width: 48px;
}

#Scoreboard_cols col.team {
    /* This is the minimum width needed to contain a flag */
    width: 42px;
    /* These rules set the horizontal padding to the same value as the
       vertical one (in presence of a flag with a 2:1 ratio) */
    width: -webkit-calc(2em + 20px);
    width:    -moz-calc(2em + 20px);
    width:         calc(2em + 20px);
}

#Scoreboard_head tr {
    height: 2.5em;
}

#Scoreboard_body tr {
    height: 2em;
}

#Scoreboard_head tr th {
    background-color: #333333; /* Changed to a darker color */
    border: 1px #444444 solid; /* Changed to a darker color */
    border-radius: 4px;
    box-shadow: 0 0 2px 0 #2A2A2C inset; /* Adjusted shadow color */
    height: 24px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #EAEAEC; /* Changed to a lighter color */
}

#Scoreboard_body tr td.team {
    vertical-align: middle;
}

#Scoreboard_body tr td.team img {
    display: block;
    max-width: 40px;
    max-height: 20px;
    margin: 0 auto;
}

#Scoreboard_head tr th,
#Scoreboard_body tr td {
    text-align: center;
    color: #EAEAEC; /* Changed to a lighter color */
}

#Scoreboard_body tr td.user_id,
#Scoreboard_body tr td.f_name,
#Scoreboard_body tr td.l_name {
    text-align: left;
    padding: 0 0.5em;
    cursor: pointer;
    color: #EAEAEC; /* Changed to a lighter color */
}

#Scoreboard_head tr th.sel {
    background-image: url('img/tick_white.png'); /* Use a white tick icon for dark background */
    background-repeat: no-repeat;
    background-position: center;
}

#Scoreboard_head tr th.score {
    cursor: pointer;
}

#Scoreboard_body tr:hover td.user_id,
#Scoreboard_body tr:hover td.f_name,
#Scoreboard_body tr:hover td.l_name,
#Scoreboard_body tr:hover td.team {
    background-color: rgba(100,100,100,0.35); /* Darkened hover background */
    border-radius: 5px;
}

#Scoreboard_body tr.selected td.user_id,
#Scoreboard_body tr.selected td.f_name,
#Scoreboard_body tr.selected td.l_name {
    font-weight: bold;
}

/* What follows is the CSS needed to manage the "checkboxes" in the Scoreboard,
   used to select users. We're simulating checkboxes using table cells, so we
   have to define their appearence in "normal" status as well as during user
   interaction. We did this so we can be more flexible on the style: we need
   to be able to set the background color of the checkbox and to make them a
   little bigger so that the color can be seen better.

   We use eight colors, taken from the Tango Palette:
   http://tango.freedesktop.org/Tango_Icon_Theme_Guidelines#Color_Palette
 */

#Scoreboard_body tr td.sel {
    background: url('img/tick_white.png') no-repeat center transparent;
    opacity: 0;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
         -o-user-select: none;
            user-select: none;
}

#Scoreboard_body tr td.sel:hover {
    opacity: 0.3;
}

#Scoreboard_body tr td.sel:active {
    opacity: 0.5;
}

#Scoreboard_body tr.selected td.sel {
    background: url('img/tick_white.png') no-repeat center transparent;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 4px;
    opacity: 1;
}

/* Color 1: Blue */

#Scoreboard_body tr.color1 td.sel {
    background-color: rgb(52,101,164);
}

#Scoreboard_body tr.color1 td.sel:hover {
    background-color: rgb(32,74,135);
}

#Scoreboard_body tr.color1 td.sel:active {
    background-color: rgb(26,59,108);
}

/* Color 2: Butter */

#Scoreboard_body tr.color2 td.sel {
    background-color: rgb(237,212,0);
}

#Scoreboard_body tr.color2 td.sel:hover {
    background-color: rgb(196,160,0);
}

#Scoreboard_body tr.color2 td.sel:active {
    background-color: rgb(157,128,0);
}

/* Color 3: Red */

#Scoreboard_body tr.color3 td.sel {
    background-color: rgb(204,0,0);
}

#Scoreboard_body tr.color3 td.sel:hover {
    background-color: rgb(164,0,0);
}

#Scoreboard_body tr.color3 td.sel:active {
    background-color: rgb(131,0,0);
}

/* Color 4: Chameleon */

#Scoreboard_body tr.color4 td.sel {
    background-color: rgb(115,210,22);
}

#Scoreboard_body tr.color4 td.sel:hover {
    background-color: rgb(78,154,6);
}

#Scoreboard_body tr.color4 td.sel:active {
    background-color: rgb(62,123,5);
}

/* Color 5: Orange */

#Scoreboard_body tr.color5 td.sel {
    background-color: rgb(245,121,0);
}

#Scoreboard_body tr.color5 td.sel:hover {
    background-color: rgb(206,92,0);
}

#Scoreboard_body tr.color5 td.sel:active {
    background-color: rgb(165,74,0);
}

/* Color 6: Plum */

#Scoreboard_body tr.color6 td.sel {
    background-color: rgb(117,80,123);
}

#Scoreboard_body tr.color6 td.sel:hover {
    background-color: rgb(92,53,102);
}

#Scoreboard_body tr.color6 td.sel:active {
    background-color: rgb(74,42,82);
}

/* Color 7: Aluminium */

#Scoreboard_body tr.color7 td.sel {
    background-color: rgb(136,138,133);
}

#Scoreboard_body tr.color7 td.sel:hover {
    background-color: rgb(85,87,83);
}

#Scoreboard_body tr.color7 td.sel:active {
    background-color: rgb(68,70,66);
}

/* Color 8: Chocolate */

#Scoreboard_body tr.color8 td.sel {
    background-color: rgb(193,125,17);
}

#Scoreboard_body tr.color8 td.sel:hover {
    background-color: rgb(143,89,2);
}

#Scoreboard_body tr.color8 td.sel:active {
    background-color: rgb(114,71,2);
}

/* This animation stuff is quite huge: every brosers implements it using its
   own prefix and we have to handle them all. In particular: for each animation
   we have to set three properties on a specific selector and we have to define
   a set of keyframes. We use the unprefixed rules and the following prefixes:
    -webkit-...  -moz-...  -o-...

   In addition, we have to cover some particular cases. A row that's being
   animated can seleted or unselected. Thus, we have the following cases:
    ("selected_")? "score_" ("up"|"down")

   Just to give some numbers: we have 16 sets of keyframes in total.
 */

#Scoreboard_body tr.score_up td.rank {
    border-radius: 5px;
    -webkit-animation-duration: 5s;
       -moz-animation-duration: 5s;
         -o-animation-duration: 5s;
            animation-duration: 5s;
    -webkit-animation-name: score_up;
       -moz-animation-name: score_up;
         -o-animation-name: score_up;
            animation-name: score_up;
    -webkit-animation-timing-function: ease-in;
       -moz-animation-timing-function: ease-in;
         -o-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
}

#Scoreboard_body tr.score_down td.rank {
    border-radius: 5px;
    -webkit-animation-duration: 5s;
       -moz-animation-duration: 5s;
         -o-animation-duration: 5s;
            animation-duration: 5s;
    -webkit-animation-name: score_down;
       -moz-animation-name: score_down;
         -o-animation-name: score_down;
            animation-name: score_down;
    -webkit-animation-timing-function: ease-in;
       -moz-animation-timing-function: ease-in;
         -o-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
}

@-webkit-keyframes score_up {
    from {background-color: rgba(138,226,52,0);}
    10% {background-color: rgba(138,226,52,0.8);} /* Increased opacity for better visibility */
    to {background-color: rgba(138,226,52,0);}
}

@-moz-keyframes score_up {
    from {background-color: rgba(138,226,52,0);}
    10% {background-color: rgba(138,226,52,0.8);}
    to {background-color: rgba(138,226,52,0);}
}

@-o-keyframes score_up {
    from {background-color: rgba(138,226,52,0);}
    10% {background-color: rgba(138,226,52,0.8);}
    to {background-color: rgba(138,226,52,0);}
}

@keyframes score_up {
    from {background-color: rgba(138,226,52,0);}
    10% {background-color: rgba(138,226,52,0.8);}
    to {background-color: rgba(138,226,52,0);}
}

@-webkit-keyframes score_down {
    from {background-color: rgba(239,41,41,0);}
    10% {background-color: rgba(239,41,41,0.8);} /* Increased opacity for better visibility */
    to {background-color: rgba(239,41,41,0);}
}

@-moz-keyframes score_down {
    from {background-color: rgba(239,41,41,0);}
    10% {background-color: rgba(239,41,41,0.8);}
    to {background-color: rgba(239,41,41,0);}
}

@-o-keyframes score_down {
    from {background-color: rgba(239,41,41,0);}
    10% {background-color: rgba(239,41,41,0.8);}
    to {background-color: rgba(239,41,41,0);}
}

@keyframes score_down {
    from {background-color: rgba(239,41,41,0);}
    10% {background-color: rgba(239,41,41,0.8);}
    to {background-color: rgba(239,41,41,0);}
}

#Scoreboard_body tr.selected.score_up td.rank {
    border-radius: 5px;
    -webkit-animation-duration: 10s;
       -moz-animation-duration: 10s;
         -o-animation-duration: 10s;
            animation-duration: 10s;
    -webkit-animation-name: selected_score_up;
       -moz-animation-name: selected_score_up;
         -o-animation-name: selected_score_up;
            animation-name: selected_score_up;
    -webkit-animation-timing-function: ease-in;
       -moz-animation-timing-function: ease-in;
         -o-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
}

#Scoreboard_body tr.selected.score_down td.rank {
    border-radius: 5px;
    -webkit-animation-duration: 10s;
       -moz-animation-duration: 10s;
         -o-animation-duration: 10s;
            animation-duration: 10s;
    -webkit-animation-name: selected_score_down;
       -moz-animation-name: selected_score_down;
         -o-animation-name: selected_score_down;
            animation-name: selected_score_down;
    -webkit-animation-timing-function: ease-in;
       -moz-animation-timing-function: ease-in;
         -o-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
}

@-webkit-keyframes selected_score_up {
    from {background-color: rgba(138,226,52,0);}
    5% {background-color: rgba(138,226,52,0.9);} /* Slightly reduced opacity for better contrast */
    to {background-color: rgba(138,226,52,0);}
}

@-moz-keyframes selected_score_up {
    from {background-color: rgba(138,226,52,0);}
    5% {background-color: rgba(138,226,52,0.9);}
    to {background-color: rgba(138,226,52,0);}
}

@-o-keyframes selected_score_up {
    from {background-color: rgba(138,226,52,0);}
    5% {background-color: rgba(138,226,52,0.9);}
    to {background-color: rgba(138,226,52,0);}
}

@keyframes selected_score_up {
    from {background-color: rgba(138,226,52,0);}
    5% {background-color: rgba(138,226,52,0.9);}
    to {background-color: rgba(138,226,52,0);}
}

@-webkit-keyframes selected_score_down {
    from {background-color: rgba(239,41,41,0);}
    5% {background-color: rgba(239,41,41,0.9);} /* Slightly reduced opacity for better contrast */
    to {background-color: rgba(239,41,41,0);}
}

@-moz-keyframes selected_score_down {
    from {background-color: rgba(239,41,41,0);}
    5% {background-color: rgba(239,41,41,0.9);}
    to {background-color: rgba(239,41,41,0);}
}

@-o-keyframes selected_score_down {
    from {background-color: rgba(239,41,41,0);}
    5% {background-color: rgba(239,41,41,0.9);}
    to {background-color: rgba(239,41,41,0);}
}

@keyframes selected_score_down {
    from {background-color: rgba(239,41,41,0);}
    5% {background-color: rgba(239,41,41,0.9);}
    to {background-color: rgba(239,41,41,0);}
}

/*
   The animation stuff ends here.
 */

#Scoreboard_body tr td.score {
    opacity: 0.75;
    border-radius: 5px;
}

#Scoreboard_body tr td.score.sort_key {
    border: 1px solid #999999;
    box-shadow: 0 0 1px #cccccc inset;
}

#Scoreboard_body tr:hover td.score,
#Scoreboard_body tr.selected td.score,
#Scoreboard_body tr td.score.sort_key {
    opacity: 1;
}

.score_0 {
    color: #aaa; /* Light grey for zero score */
}

.score_0_10 {
    background-color: hsl(270, 30%, 20%);
}

.score_10_20 {
    background-color: hsl(270, 30%, 23%);
}

.score_20_30 {
    background-color: hsl(270, 30%, 26%);
}

.score_30_40 {
    background-color: hsl(270, 30%, 29%);
}

.score_40_50 {
    background-color: hsl(270, 30%, 32%);
}

.score_50_60 {
    background-color: hsl(270, 30%, 35%);
}

.score_60_70 {
    background-color: hsl(270, 30%, 38%);
}

.score_70_80 {
    background-color: hsl(270, 30%, 41%);
}

.score_80_90 {
    background-color: hsl(270, 30%, 44%);
}

.score_90_100 {
    background-color: hsl(270, 30%, 47%);
}

.score_100 {
    background-color: hsl(270, 30%, 50%);
}


/******************************************************************************\
|                                                                              |
|                                   User panel                                 |
|                                   ----------                                 |
\******************************************************************************/


#UserDetail_bg {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 500;
    background-color: rgba(255, 255, 255, 0.2); /* Lighten the background */
    backdrop-filter: blur(5px);
    overflow-y: scroll;
}

#UserDetail_bg.open {
    display: block;
}

#UserDetail {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 920px;
    margin: 48px auto;
    padding: 20px;
    border-radius: 12px;
    background-color: #333; /* Darken the background */
    color: #fff; /* Lighten the text */
}

#UserDetail_close {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 24px;
    height: 24px;
    cursor: pointer;
}

#UserDetail_header {
    position: relative;
    min-height: 242px;
}

#UserDetail_f_name,
#UserDetail_l_name,
#UserDetail_team,
#UserDetail_flag {
    position: absolute;
    right: 470px;
    font-size: 2em;
    line-height: 1.5em;
}

#UserDetail_f_name {
    top: 0;
}

#UserDetail_l_name {
    top: 1.5em;
}

#UserDetail_team {
    bottom: 100px;
}

#UserDetail_flag {
    bottom: 0;
}

#UserDetail_face {
    position: absolute;
    top: 0;
    left: 0;
    max-width: 160px;
    max-height: 240px;
}

#UserDetail_flag {
    margin: -1px;
}

#UserDetail_flag.hidden,
#UserDetail_face.hidden {
    display: none;
}

#UserDetail_navigator {
    width: 450px;
    margin-left: 470px;
}

#UserDetail_navigator table {
    width: 100%;
    table-layout: fixed;
    border-spacing: 2px;
}

#UserDetail_navigator tr {
    height: 22px;
}

#UserDetail_navigator col.name {
    width: 60%;
}

#UserDetail_navigator col.score,
#UserDetail_navigator col.rank {
    width: 12%;
}

#UserDetail_navigator col.show {
    width: 14%;
}

#UserDetail_navigator tr td.score,
#UserDetail_navigator tr td.rank {
    padding-left: 4px;
}

#UserDetail_navigator tbody tr td.btn {
    text-align: center;
    border: 1px solid #777777; /* Darken the border color */
    box-shadow: 0 0 2px #777; /* Adjust box shadow color */
    background-color: #444; /* Darken the background color */
    border-radius: 3px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
    color: #fff; /* Lighten the text color */
}

#UserDetail_navigator tbody tr td.btn:hover {
    background-color: #666; /* Darken the hover background color */
}

#UserDetail_navigator tbody tr td.btn:active {
    background-color: #555; /* Darken the active background color */
}

#UserDetail_navigator tbody tr.active td.btn {
    background-color: #666; /* Darken the active background color */
    opacity: 0.8; /* Adjust opacity for better contrast */
    cursor: default;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    filter: alpha(opacity=80);
}

#UserDetail_navigator tr.global {
    background-color: #555; /* Darken the global background color */
}

#UserDetail_navigator tr.contest {
    background-color: #444; /* Darken the contest background color */
}

#UserDetail_navigator tr.task {
    background-color: #333; /* Darken the task background color */
}

#UserDetail_navigator tr.global td.name {
    padding-left: 5px;
}

#UserDetail_navigator tr.contest td.name {
    padding-left: 25px;
}

#UserDetail_navigator tr.task td.name {
    padding-left: 45px;
}

#UserDetail_title {
    margin-top: 24px;
    font-size: 2em;
    line-height: 1.5em;
    text-align: center;
}

#UserDetail_charts {
    margin-top: 24px;
    width: 100%;
}

#UserDetail_submissions {
    margin-top: 24px;
    width: 100%;
}

#UserDetail_submissions:empty {
    margin-top: 0;
}

#UserDetail_submissions table {
    width: 100%;
    table-layout: fixed;
}

#UserDetail_submissions td {
    height: 22px;
    padding-left: 4px;
}

#UserDetail_submissions thead {
    background-color: #444; /* Darken the header background color */
    color: #fff; /* Lighten the text color */
}

#UserDetail_submissions tbody tr:nth-child(even) {
    background-color: #555; /* Darken the even row background color */
}

#UserDetail_submissions tbody tr:nth-child(odd) {
    background-color: #666; /* Darken the odd row background color */
}

#UserDetail_submissions tbody td[colspan] {
    text-align: center;
    font-style: italic;
}


/* Style for the network status indicator */

#ConnectionStatus_box {
    display: inline-block;
    position: relative;
    float: right;
    margin: 0.5em;
    text-align: right;
    z-index: 2;
}

#ConnectionStatus_label {
    display: inline-block;
    position: relative;
    height: 1.3em;
    padding: 0.25em 20px;
    z-index: 2;
    border-width: 1px;
    border-style: solid;
    border-radius: 4px;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
         -o-user-select: none;
            user-select: none;
}

#ConnectionStatus_box:hover #ConnectionStatus_label {
    border-bottom-width: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

#ConnectionStatus_text {
    display: none;
    position: absolute;
    top: 2em;
    right: 0;
    width: 240px;
    padding: 0.5em;
    margin-top: -1px;
    z-index: 1;
    border-width: 1px;
    border-style: solid;
    border-radius: 4px 0 4px 4px;
}

#ConnectionStatus_box:hover #ConnectionStatus_text,
#ConnectionStatus_text:hover {
    display: block;
    color: #fff; /* Lighten the text color */
}

#ConnectionStatus_box[data-status="connected"] #ConnectionStatus_label,
#ConnectionStatus_box[data-status="connected"] #ConnectionStatus_text {
    background-color: #007acc; /* Adjusted the background color for connected status */
    color: #fff; /* Lighten the text color */
    border-color: #005580; /* Adjusted the border color */
}

#ConnectionStatus_box[data-status="reconnecting"] #ConnectionStatus_label,
#ConnectionStatus_box[data-status="reconnecting"] #ConnectionStatus_text {
    background-color: #e6b800; /* Adjusted the background color for reconnecting status */
    color: #000; /* Darken the text color */
    border-color: #b38600; /* Adjusted the border color */
}

#ConnectionStatus_box[data-status="disconnected"] #ConnectionStatus_label,
#ConnectionStatus_box[data-status="disconnected"] #ConnectionStatus_text,
#ConnectionStatus_box[data-status="outdated"] #ConnectionStatus_label,
#ConnectionStatus_box[data-status="outdated"] #ConnectionStatus_text,
#ConnectionStatus_box[data-status="init_error"] #ConnectionStatus_label,
#ConnectionStatus_box[data-status="init_error"] #ConnectionStatus_text {
    background-color: #cc0000; /* Adjusted the background color for disconnected status */
    color: #fff; /* Lighten the text color */
    border-color: #660000; /* Adjusted the border color */
}

#ConnectionStatus_box a {
    cursor: pointer;
    text-decoration: underline;
}