/* ModLap Championship CSS */

body {
    background: black url('../images/site/fond_mlc.jpg') repeat-x top left;
    margin: 0;
    font-size: 14px;
    font-family: trebuchet MS, arial;
}

a {
    text-decoration: none;
    cursor: pointer;
    color: #f80;
}

a:hover {
    text-decoration: underline;
    color: #fff;
}

td {
    font-size: 0.9em;
    height: 20px;
    padding: 0 3px;
    color: #ddd;
    text-align: center;
    font-weight: normal;
}

td.hl {
    color: #ff0;
}

td.left {
    text-align: left;
}

th {
    height: 20px;
    text-align: center;
}

ul {
    list-style: none;
}

img {
    border: 0;
}

img.hl {
    cursor: pointer;
    margin-left: 5px;
    vertical-align: text-bottom;
}

.sep {
    height: 10px;
    display: block;
    clear: both;
}

.highlight {
    font-size: 1.1em;
    font-weight: bold;
    color: #f33;
    text-decoration: none;
}

.highlight2 {
    font-weight: bold;
    color: #0ff;
    text-decoration: none;
}

.soul {
    text-decoration: underline;
}

.cent {
    text-align: center;
}

.fs09 {
    font-size: 0.9em;
}

.fs08 {
    font-size: 0.8em;
}

.left {
    text-align: left;
}

.fl {
    float: left;
}

.cl {
    clear: left;
}

.cr {
    clear: right;
}

.fr {
    float: right;
}

.replay {
    color: #f80;
    font-size: 0.9em;
}

.infobulle {
    position: absolute;
    padding: 5px 0;
    visibility: hidden;
    width: 150px;
    height: auto;
    color: #222;
    text-align: center;
    background-color: #e0ffff;
    font-size: 0.8em;
    border: 2px outset #fd7;
}

.strike {
    text-decoration: line-through;
}

/* Utility classes - Display */
.d-grid { display: grid; }
.d-flex { display: flex; }

/* Utility classes - Flex alignment */
.justify-center { justify-content: center; }
.items-center { align-items: center; }

/* Utility classes - Cursor */
.cursor-pointer { cursor: pointer; }

/* Utility classes - Flex direction */
.flex-col { flex-direction: column; }
.flex-row { flex-direction: row; }

/* Utility classes - Flex grow/shrink */
.flex-1 { flex: 1; }

/* Utility classes - Flex wrap */
.flex-nowrap { flex-wrap: nowrap; }
.whitespace-nowrap { white-space: nowrap; }

/* Utility classes - Text alignment */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

/* Utility classes - Text decoration */
.no-underline { text-decoration: none; }
.underline { text-decoration: underline; }
.line-through { text-decoration: line-through; }

/* Utility classes - Colors */
.text-primary { color: #0ff; }
.text-secondary { color: #f80; }
.text-danger { color: #f55; }
.text-success { color: #0a0; }
.text-warning { color: #ff0; }
.text-muted { color: #888; }
.text-white { color: #fff; }
.text-light { color: #eee; }
.text-bold { font-weight: bold; }

/* Alias for selected/active state */
.sel {
    color: #0ff;
    text-decoration: none;
}

/* Utility classes - Gap (Tailwind scale: rem) */
.gap-0 { gap: 0; }
.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.gap-5 { gap: 1.25rem; }
.gap-6 { gap: 1.5rem; }
.gap-8 { gap: 2rem; }
.gap-10 { gap: 2.5rem; }

.gap-x-2 { column-gap: 0.5rem; }
.gap-x-4 { column-gap: 1rem; }
.gap-x-6 { column-gap: 1.5rem; }
.gap-y-2 { row-gap: 0.5rem; }
.gap-y-3 { row-gap: 0.75rem; }
.gap-y-4 { row-gap: 1rem; }

/* Utility classes - Grid */
.grid-cols-2 { grid-template-columns: auto 1fr; }
.max-w-500 { max-width: 500px; }

/* Utility classes - Padding (Tailwind scale: rem) */
.p-0 { padding: 0; }
.p-1 { padding: 0.25rem; }
.p-2 { padding: 0.5rem; }
.p-3 { padding: 0.75rem; }
.p-4 { padding: 1rem; }
.p-5 { padding: 1.25rem; }
.p-6 { padding: 1.5rem; }
.p-8 { padding: 2rem; }
.p-10 { padding: 2.5rem; }

.px-0 { padding-left: 0; padding-right: 0; }
.px-1 { padding-left: 0.25rem; padding-right: 0.25rem; }
.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }

.py-0 { padding-top: 0; padding-bottom: 0; }
.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.py-5 { padding-top: 1.25rem; padding-bottom: 1.25rem; }

/* Utility classes - Margins (Tailwind scale: rem) */
.m-0 { margin: 0; }
.m-1 { margin: 0.25rem; }
.m-2 { margin: 0.5rem; }
.m-3 { margin: 0.75rem; }
.m-4 { margin: 1rem; }
.m-5 { margin: 1.25rem; }

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 0.75rem; }
.mt-4 { margin-top: 1rem; }
.mt-5 { margin-top: 1.25rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-8 { margin-top: 2rem; }
.mt-10 { margin-top: 2.5rem; }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-5 { margin-bottom: 1.25rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.mb-10 { margin-bottom: 2.5rem; }

.ml-0 { margin-left: 0; }
.ml-1 { margin-left: 0.25rem; }
.ml-2 { margin-left: 0.5rem; }
.ml-3 { margin-left: 0.75rem; }
.ml-4 { margin-left: 1rem; }
.ml-5 { margin-left: 1.25rem; }
.ml-6 { margin-left: 1.5rem; }
.ml-8 { margin-left: 2rem; }
.ml-10 { margin-left: 2.5rem; }

.mr-0 { margin-right: 0; }
.mr-1 { margin-right: 0.25rem; }
.mr-2 { margin-right: 0.5rem; }
.mr-3 { margin-right: 0.75rem; }
.mr-4 { margin-right: 1rem; }
.mr-5 { margin-right: 1.25rem; }
.mr-6 { margin-right: 1.5rem; }
.mr-8 { margin-right: 2rem; }
.mr-10 { margin-right: 2.5rem; }

/* Utility classes - Width */
.w-full { width: 100%; }
.w-auto { width: auto; }
.w-760 { width: 760px; }
.mx-auto { margin-left: auto; margin-right: auto; }

/* Utility classes - Height */
.h-full { height: 100%; }
.h-auto { height: auto; }
.min-h-0 { min-height: 0; }
.min-h-380 { min-height: 380px; }
.max-h-full { max-height: 100%; }
.max-h-380 { max-height: 380px; }

/* Utility classes - Overflow */
.overflow-auto { overflow: auto; }
.overflow-hidden { overflow: hidden; }
.overflow-scroll { overflow: scroll; }
.overflow-x-auto { overflow-x: auto; }
.overflow-y-auto { overflow-y: auto; }

/* Form components */
.form-fields {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.5rem 1rem;
    align-items: center;
    border: 1px solid #444;
    background: #555;
    padding: 1rem;
    text-align: left;
}

.form-group {
    display: contents;
}

.form-group label {
    color: #eee;
    text-align: right;
}

.form-group .form-input-wrapper {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.form-input,
.form-fields select {
    width: 200px;
    padding: 0.25rem 0.5rem;
    color: #333;
    background: #ddd;
    border: 1px solid #999;
    box-sizing: border-box;
}

.form-input:read-only {
    background: #aaa;
    color: #555;
}

.form-icon {
    display: inline-flex;
    align-items: center;
}

.form-note {
    grid-column: 1 / -1;
    text-align: left;
}

.form-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    border: 1px solid #444;
    background: #555;
    padding: 1rem;
    flex: 1;
}

.btn {
    padding: 0.5rem 1rem;
    cursor: pointer;
    background: #666;
    color: #fff;
    border: 1px solid #888;
}

.btn:hover {
    background: #777;
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-primary {
    background: #f80;
    border-color: #fa0;
}

.btn-primary:hover {
    background: #fa0;
}

.btn-danger {
    background: #c00;
    border-color: #d00;
    color: #fff;
}

.btn-danger:hover {
    background: #d00;
}

.btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
}

/* Alerts */
.alert {
    padding: 0.75rem 1rem;
    border-radius: 4px;
    border: 1px solid transparent;
}

.alert-success {
    background: #143214;
    border-color: #0a0;
    color: #0f0;
}

.alert-danger {
    background: #321414;
    border-color: #c00;
    color: #f66;
}

/* Form Grid */
.form-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

/* Text utilities */
.text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 150px;
}

/* Data Grid */
.data-grid {
    display: grid;
    gap: 1px;
    background: #444;
    border: 1px solid #444;
}

.data-grid-2 {
    grid-template-columns: auto 1fr;
}

.data-grid-3 {
    grid-template-columns: auto 1fr auto;
}

.data-grid-4 {
    grid-template-columns: auto 1fr auto auto;
}

.data-grid-5 {
    grid-template-columns: auto 1fr 1fr auto auto;
}

.data-grid-6 {
    grid-template-columns: 1fr auto auto 1fr auto auto;
}

.data-grid-7 {
    grid-template-columns: auto 1fr 1fr auto auto 1fr auto;
}

.data-grid-header {
    background: #555;
    color: #ff0;
    font-weight: bold;
    padding: 0.5rem 1rem;
    white-space: nowrap;
}

.data-grid-cell {
    background: #666;
    color: #eee;
    padding: 0.25rem 1rem;
}

.data-grid-separator {
    grid-column: 1 / -1;
    height: 0.5rem;
    background: #444;
}

.data-grid-row {
    display: contents;
}

/* Qualification status colors */
.qual-qf > .data-grid-cell { background-color: #0a0; }
.qual-qdf > .data-grid-cell { background-color: #d80; }
.qual-nq > .data-grid-cell { background-color: #c00; }
.qual-f > .data-grid-cell { background-color: #333; text-decoration: line-through; }
.qual-df > .data-grid-cell { background-color: #666; text-decoration: line-through; }

/* Qualification badges */
.qual-badge {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    font-weight: bold;
    color: #fff;
    border-radius: 3px;
    cursor: help;
}
.qual-badge.qual-qf { background-color: #0a0; }
.qual-badge.qual-qdf { background-color: #d80; }
.qual-badge.qual-nq { background-color: #c00; }
.qual-badge.qual-f { background-color: #333; text-decoration: line-through; }

/* Radio Group */
.radio-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.radio-option {
    display: flex;
    align-items: center;
    width: 400px;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: #555;
    border: 1px solid #666;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}

.radio-option:hover {
    background: #5a5a5a;
    border-color: #888;
}

.radio-option.selected {
    background: #4a4a4a;
    border-color: #f80;
}

.radio-option input[type="radio"] {
    margin: 0;
    accent-color: #f80;
}

.radio-label {
    color: #fff;
    font-weight: bold;
}

.radio-option.selected .radio-label {
    color: #f80;
}

.radio-desc {
    color: #aaa;
    font-size: 0.9em;
    margin-left: auto;
}

/* Server List */
.server-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.server-section {
    text-align: center;
}

.server-section-title {
    color: #ff0;
    font-size: 1.1em;
    margin: 0 0 0.75rem 0;
}

.server-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 1.5rem;
}

.server-link {
    display: inline-block;
    padding: 0.5rem 1rem;
    background: #555;
    border: 1px solid #666;
    border-radius: 4px;
    color: #fff;
    font-weight: bold;
    text-decoration: none;
    transition: all 0.2s;
}

.server-link:hover {
    background: #5a5a5a;
    border-color: #f80;
    color: #f80;
}

/* Detail Box */
.detail-box {
    background: #555;
    border: 1px solid #666;
    border-radius: 4px;
}

/* Status Box */
.detail-status {
    text-align: center;
}

.status-box {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1.5rem;
    border-radius: 4px;
    font-weight: bold;
}

.status-warning {
    background: rgba(255, 136, 0, 0.2);
    border: 1px solid #f80;
    color: #f80;
}

.status-success {
    background: rgba(0, 255, 136, 0.2);
    border: 1px solid #0f8;
    color: #0f8;
}

.status-error {
    background: rgba(255, 51, 51, 0.2);
    border: 1px solid #f33;
    color: #f33;
}

.status-text {
    color: inherit;
}

.status-dispo {
    font-weight: bold;
}

.text-strikethrough {
    text-decoration: line-through;
    opacity: 0.6;
}

/* HEADER */
#header {
    width: 100%;
    height: 156px;
    background: url('../images/site/banniere.jpg') top center no-repeat;
    padding: 9px 0;
}

/* Menu vertical */
.menuv {
    width: 120px;
    height: 100%;
    margin: 0 0 0 15px;
}

.menuv > .panel-content {
    height: 100%;
    padding: 0;
}

.menuv ul {
    padding: 0;
    margin: 0;
    height: 100%;
    display: grid;
    grid-template-rows: repeat(auto-fit, 1fr);
    align-items: center;
}

.menuv li {
    text-align: left;
    padding-left: 10px;
    color: #f80;
    font-weight: bold;
}

.menuv li > a:hover {
    color: #fff;
    text-decoration: none;
}

#header > form {
    float: right;
    width: 277px;
    height: 87px;
    margin: 63px 30px 0 0;
    background: none;
    font-size: 1em;
    color: #f80;
}

#header > form > #flag {
    float: left;
    width: 30px;
    padding: 0px 10px 0 0;
    height: 87px;
    margin: 0;
}

#header > form > #flag > a > img {
    padding: 5px 0;
    border: 0;
}

#header > form > #flag > input.btnfr {
    width: 20px;
    margin: 7px 0 0 0;
    padding: 0;
    border: 0;
    background: url('../images/site/flag_fr.png') no-repeat;
    cursor: pointer;
}

#header > form > #flag > input.btnen {
    width: 20px;
    margin: 10px 0 0 0;
    padding: 0;
    border: 0;
    background: url('../images/site/flag_en.png') no-repeat;
    cursor: pointer;
}

#header > form > #flag > input.btnes {
    width: 20px;
    margin: 10px 0 0 0;
    padding: 0;
    border: 0;
    background: url('../images/site/flag_es.png') no-repeat;
    cursor: pointer;
}

/* Login panel */
#con {
    height: 100%;
}

#con .panel-content {
    height: 100%;
}

#con p {
    margin: 5px 0 0;
    text-align: center;
    font-size: 1.2em;
    font-weight: bold;
    height: 55%
}

#con input.log {
    float: left;
    width: 150px;
    background: #777;
    color: #ddd;
    border: 1px inset #777;
    text-align: left;
    margin: 1px 0 1px 10px;
    padding: 0px 3px;
    height: 16px;
}

#con input.btncon {
    float: right;
    width: 20px;
    margin: 0 0 0 10px;
    padding: 0;
    border: 0;
    background: url('../images/site/conn.png') no-repeat;
    cursor: pointer;
}

#con input.btndecon {
    float: right;
    width: 20px;
    height: 20px;
    margin: 0 0 0 10px;
    padding: 0;
    border: 0;
    background: url('../images/site/deconn.png') no-repeat;
    cursor: pointer;
}

/* MENUS HORIZONTAUX */
#menuh1 {
    float: left;
    height: 38px;
    margin: 0 0 0 22px;
    padding: 0;
}

#menuh1 > li {
    display: block;
    width: auto;
    height: 28px;
    color: #f80;
    font-weight: bold;
    text-align: center;
    float: left;
    padding: 10px 5px 0 5px;
    background: url('../images/site/menuh.png') repeat-x;
}

#menuh1 > li.deb {
    width: 10px;
    height: 28px;
    background: url('../images/site/menuhg.png') left no-repeat;
}

#menuh1 > li.fin {
    width: 10px;
    height: 28px;
    background: url('../images/site/menuhd.png') right no-repeat;
}

#menuh1 > li > a {
    color: #f80;
    font-weight: bold;
}

#menuh1 > li > a:hover {
    color: #fff;
    text-decoration: none;
}

#menuh2 {
    float: right;
    height: 38px;
    margin: 0 22px 0 0;
    padding: 0;
    list-style: none;
}

#menuh2 > li {
    display: block;
    width: auto;
    height: 28px;
    color: #f80;
    font-weight: bold;
    text-align: center;
    float: left;
    padding: 10px 5px 0 5px;
    background: url('../images/site/menuh.png') repeat-x;
}

#menuh2 > li.deb {
    width: 10px;
    height: 28px;
    background: url('../images/site/menuhg.png') left no-repeat;
}

#menuh2 > li.fin {
    width: 10px;
    height: 28px;
    background: url('../images/site/menuhd.png') right no-repeat;
}

#menuh2 > li > a {
    color: #f80;
    font-weight: bold;
}

#menuh2 > li > a:hover {
    color: #fff;
    text-decoration: none;
}

#menuh3 {
    margin: 0;
    padding: 0;
    height: 38px;
    width: 100%;
    background: url('../images/site/pied.png') top center no-repeat;
    list-style: none;
}

#menuh3 > li {
    display: block;
    width: 350px;
    margin: 0 auto;
    height: 28px;
    color: #f80;
    font-weight: bold;
    text-align: center;
    padding: 10px 5px 0 5px;
}

#menuh3 > li.deb {
    display: block;
    width: auto;
    height: 28px;
    color: #f80;
    font-weight: bold;
    text-align: left;
    float: left;
    padding: 10px 5px 0 40px;
    letter-spacing: 1px;
}

/*background:url('../images/site/menuh.png') repeat-x;
#document>#menuh3>li.deb {width:10px;height:28px;background:url('../images/site/menuhg.png') left no-repeat;}
#document>#menuh3>li.fin {width:10px;height:28px;background:url('../images/site/menuhd.png') right no-repeat;}
*/
/* CONTENT */
#content {
    width: 984px;
    padding: 0;
    margin: 0 auto;
}

/*height:480px;*/

/* PARTIE ACCUEIL */

/* Accueil Grid Layout */
.accueil-grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 1rem;
}

.date {
    color: #f80;
    font-weight: bold;
}

.flash-info {
    width: 100%;
    margin-bottom: 10px;
}

.flash-info-table {
    width: 100%;
    border-collapse: collapse;
}

.flash-info-table td {
    padding: 5px;
    border-color: #555;
}

.flash-date {
    width: 80px;
    color: #f80;
    font-weight: bold;
}

.flash-text {
    color: #0ff;
}


/* PARTIES COMMUNES REGLEMENT LIENS COMPTE CHAMPIONNAT ACCUEIL */

/* Panel header with navigation list */
.panel-header ul > li.text {
    width: 100%;
    text-align: center;
}

/* Panel content with fixed height */
#acc_aff > .panel-content {
    min-height: 380px;
    max-height: 380px;
    overflow: auto;
}

/* Panel content text styles */
.panel-content ul {
    margin: 0;
    padding: 0 0 0 10px;
    color: #ddd;
    font-size: 1em;
    text-align: justify;
}

.panel-content ul > li {
    margin: 0;
    padding: 0;
}

.panel-content ul > li > a {
    font-weight: bold;
}

/* Panel content form styles */
.panel-content form {
    margin: 0;
    padding: 0 5px;
    overflow: auto;
    clear: left;
}

.panel-content form > ul {
    text-align: justify;
    color: #ff0;
    font-size: 0.9em;
    margin: 10px;
    padding: 10px;
}

.panel-content form > p.cent {
    text-align: center;
}

.panel-content form > p.highlight {
    font-size: 1.1em;
    font-weight: bold;
    color: #f33;
    text-decoration: none;
}

.panel-content form > p.info {
    color: #fff;
    font-weight: bold;
    font-size: 0.9em;
    padding: 0;
    width: 310px;
}

.panel-content form > p.map {
    color: #fff;
    font-weight: bold;
    font-size: 0.9em;
    padding: 0;
    width: 210px;
}

.panel-content form > p.erreur {
    color: #f33;
    font-size: 1.1em;
}

.panel-content form > p.info span {
    text-decoration: underline;
}

.panel-content form > p.info span.highlight {
    text-decoration: none;
}


/* ACCUEIL */

/* PARTIE CHAMPIONNAT */

/* Ranking table styles */
.panel-content > table {
    margin: 0px auto;
    width: 100%;
    border-color: #777;
    font-weight: bold;
}

td.rank {
    width: 35px;
    font-weight: bold;
}

td.pseudo {
    width: 175px;
    text-align: left;
    font-weight: bold;
}

td.point {
    width: 45px;
    font-weight: bold;
}

td.team {
    width: 40px;
    font-weight: bold;
}


/* PARTIE MANCHE */

/* Panel base styles - shared between .server and .ranking */
.panel {
    opacity: 0.97;
    border-radius: 8px;
    border: 1px solid #1a1a1a;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    box-sizing: border-box;
    overflow: hidden;
}

.panel-header {
    background: linear-gradient(to bottom, #5a5a5a 0%, #4a4a4a 50%, #3a3a3a 100%);
    border-bottom: 1px solid #222;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.panel-title {
    display: block;
    color: #f80;
    font-weight: bold;
    font-size: 1.1em;
    margin-bottom: 5px;
}

.panel-phase {
    display: block;
    color: #0ff;
    font-size: 0.9em;
}

/* Page header bar (title only, uses Panel) */
.page-header {
    margin-bottom: 10px;
}

.page-header > .panel-header {
    padding: 8px 20px;
}

.panel-content {
    background: linear-gradient(to bottom, #3a3a3a 0%, #2a2a2a 100%);
}

.panel-footer {
    background: linear-gradient(to bottom, #2a2a2a 0%, #1a1a1a 100%);
    border-top: 1px solid #444;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* Servers grid container */
.servers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 10px;
    margin-bottom: 10px;
}

/* Server panel - specific */
.servers-grid > .server {
    min-width: 0;
}

.servers-grid > .server > .panel-content {
    height: 100px;
    overflow: auto;
}

/* Server panel - header elements */
.server > .panel-header a {
    color: #fff;
    text-decoration: none;
}

.server > .panel-header a:hover {
    color: #f80;
}

.panel-header-sep {
    color: #555;
    margin: 0 5px;
}

.panel-header-map {
    color: #ccc;
    font-weight: normal;
    font-size: 0.9em;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    vertical-align: middle;
}

.panel-header-count {
    color: #0ff;
}

.panel-refresh {
    cursor: pointer;
    float: right;
    opacity: 0.7;
}

.panel-refresh:hover {
    opacity: 1;
}

/* Server panel - footer elements */
.panel-join {
    color: #f80;
    text-decoration: none;
    font-size: 0.85em;
}

.panel-join:hover {
    color: #fff;
}

/* Server panel - content elements */
.server > .panel-content {
    overflow: auto;
    font-size: 0.8em;
    color: #ccc;
}

.server > .panel-content .j1 {
    clear: left;
    width: 47%;
    text-align: left;
    float: left;
    overflow: hidden;
    margin-right: 3%;
    white-space: nowrap;
}

.server > .panel-content .j2 {
    width: 47%;
    text-align: left;
    float: left;
    overflow: hidden;
    margin-left: 3%;
    white-space: nowrap;
}

/* Server states */
.server-empty,
.server-offline,
.server-error {
    text-align: center;
    padding: 10px;
    font-style: italic;
    color: #888;
}

.server-error {
    color: #f55;
}

div.n_map {
    width: 118px;
    overflow: hidden;
    font-size: 1em;
    white-space: nowrap;
}

/* Rankings grid container */
.rankings-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.rankings-grid > .ranking {
    min-width: 0;
}

/* Panel tabs style */
.panel-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
}

.panel-tabs span {
    color: #666;
}

.panel-tabs form {
    display: inline;
    margin: 0;
    padding: 0;
}

/* Ranking content */
.ranking > .panel-content {
    overflow: auto;
    height: 280px;
    text-align: center;
    color: #eee;
    font-size: 0.9em;
}

.loading {
    color: #888;
    padding: 20px;
    text-align: center;
}

.ranking table {
    margin: 0px auto;
    width: 95%;
    border-color: #777;
}

.ranking th.titre {
    color: #ff0;
    font-weight: bold;
}

/* Qualification status colors */
tr.qf, td.qf {
    background-color: #0a0;
    text-decoration: none;
}

tr.qdf, td.qdf {
    background-color: #d80;
    text-decoration: none;
}

tr.f, td.f {
    background-color: #333;
    text-decoration: line-through;
}

tr.df, td.df {
    background-color: #666;
    text-decoration: line-through;
}

tr.nq, td.nq {
    background-color: #c00;
    text-decoration: none;
}

tr.f td.pseudo a,
tr.df td.pseudo a {
    text-decoration: line-through;
}

td.pseudo1 {
    width: 175px;
    text-align: center;
    font-weight: bold;
}

td.maps {
    width: 40px;
    font-weight: bold;
}

td.lol {
    width: 120px;
    text-align: left;
    font-size: 0.8em;
}

td.tmaps {
    width: 80px;
    font-weight: bold;
}

td.time {
    width: 80px;
    text-align: center;
    font-weight: bold;
}

td.hl {
    color: #ff0;
}

td.infos {
    color: #fff;
    text-align: left;
    padding: 0 5px;
}

p.info {
    text-align: justify;
    padding: 5px 10px;
}

p.liste {
    text-align: left;
    padding: 0px 10px;
}

/* Site footer */
.site-footer {
    width: 100%;
    height: 26px;
    background: url('../images/site/pied.png') top center no-repeat;
    padding-top: 12px;
    color: #f80;
    font-weight: bold;
    text-align: center;
}