:root {
    --hauteur-menu: 90px;
    --largeur-menu: 410px;
    /*--bgcolor-menu: #a0c3ee;*/
    --bgcolor-menu: #468;
    --bgcolor-setup: hsl(70, 90%, 52%);
    --border-color: hsl(233, 33%, 57%);
}

* {
    font-size: 14px;
    font-family:Arial, Helvetica, sans-serif
}

.jaune {
    color:yellow;
}

body {
    overscroll-behavior-y: contain;
    background-color: var(--bgcolor-menu);
    border-color:var(--border-color);
    border-width: 2px;
}

caption {
    caption-side: top;
    text-align: center;
    font-weight: bold;
}

#menufixe {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    width: 100%;
    height: var(--hauteur-menu);
    background-color: var(--bgcolor-menu);
    max-width: var(--largeur-menu);
    border:1px solid var(--border-color);
}

#marge {
    height: var(--hauteur-menu);
    background-color: var(--bgcolor-menu);
}

#divaction {
    display:flex;
    justify-content: space-between;
}

table,
td,
th {
    border: 1px solid #234;
    border-collapse: collapse;
    padding: 5px;
    border-color:var(--border-color);
}

#grid,
#setup,
#div25 {
    width: 100%;
    max-width: var(--largeur-menu);
    background-color: #FFF;
    border-color:var(--border-color);    
}

#div25 td,
#div25 caption {
    border-width: 2px;
    background-color: var(--bgcolor-setup);    
}


#setup,#parametres {
    /*margin-top: var(--hauteur-menu);*/
    background-color: var(--bgcolor-setup);
    border-width: 2px;
    border-color:var(--border-color);
}

#div25 caption {
    color: white;
}


#div25 th {
    border-width: 2px;    
}


button {
    padding: 5px;
    background-color: #BBB;
    margin: 5px;
    font-size: 14px;
    color: rgb(21, 21, 134);
    font-weight: bold;
    border-radius: 5px;
}

.petit {
    padding: 3px;
    margin: 3px;
    font-size: 10px;
}

.fs-10 {
    font-size: 10px;
}

.moyen {
    padding: 3px;
    margin: 3px;
    font-size: 14px;
}

#board {
    color: #234;
    /*margin-top: var(--hauteur-menu);*/
}

#board th {
    background-color: #bcc7dd;
}


#divdes {
    white-space: nowrap;
}

#spanpseudo {
    display: inline-block;
    width: 200px;
}

.done {
    opacity: 1;
    color: #000;
    font-weight: bold;
}

.annonced {
    color: #a92828;
    font-weight: bold;
    font-style: italic;
}

.trans {
    opacity: 0.8;
}

.down {
    background-color: #ccedca;
}

.free {
    background-color: #a8e1f3;
}

.up {
    background-color: #ebeeb9;
}

.first {
    background-color: #d8b9d4;
}

.call {
    background-color: #f2d8b5;
}

.thgrid {
    min-width:30px;
    background-color: var(--bgcolor-menu);
}

.classMenu {    
    margin: 0px;
    white-space: nowrap;
    display: flex;
    justify-content: space-between;
    font-weight: bold;
}

.bestScores {
    width: 100%;
    max-width: var(--largeur-menu);    
}

.bestScores td {
    vertical-align: top;
}

.text-bg-rolls {
    color: rgb(58, 87, 116);
    background-color: #a8e1f3;    
}

.text-bg-cols {
    color: rgb(66, 80, 94);
    background-color: #b0c5cc;    
}

.text-bg-mixte {
    /*background-color:#fd7e14;*/
    background-color: var(--bgcolor-setup);
}

.bestScores button {
    width: 100%;
    padding: 5px;
    margin: 0px;
}

#logo {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    padding: 3px;
    background-color: #234;
    color: white;
}

.thcol1 {
    width: 100px;
    font-size: 20px;
    text-align: center;
}

#btSetup {
    border-width: 2px;
    padding: 5px;
    padding-left: 10px;
    padding-right: 10px;
}

#btJouer {
    /*width: 150px; */
    max-width:fit-content;
}

.btplusoff {
    color: #303fb3;
    border-style: outset;
}

.btpluson {
    color: #303fb3;
    border-style: inset;
}

.bt3D {
    background-color: black;
    color: white;
}

.btplat {
    border-style: inset;
    background-color: var(--bgcolor-setup);
}

hr {
    border-bottom: solid #cccccc 5px;
}

caption {
    border-width: 3px;
    color: #234;
}

.icon {
    font-size: 20px;
}


.combi {
    color: #7a0974;
    font-family: 'Courier New', Courier, monospace;
}

.trophee {
    color:#a92828;
}

/* ANIMATION SETUp */
#setup.hidden {
    display: none;
    opacity: 0;
    /*
    transform: translateY(0);
    animation: slideUp 0.5s ease-out forwards;*/
}

#setup.visible {
    display: block;
    opacity: 1;
    /*
    transform: translateY(0);
    animation: slideDown 0.5s ease-out forwards;    */

}

@keyframes slideDown {
    from {
        opacity: 0.5;
        transform: translateY(-100%);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideUp {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-100%);        
    }
}

@media screen and (max-width: 450px) {
    /* Insérez vos propriétés CSS ici, avec vos sélecteurs*/

    #btJouer {
        /*width: 100px;*/
        max-width:fit-content;
        font-size: 10px;
    }
}

/* Classe obligatoire pour les fleches */
.flecheDesc {
    width: 0;
    height: 0;
    float: right;
    margin: 10px;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid black;
}

.flecheAsc {
    width: 0;
    height: 0;
    float: right;
    margin: 10px;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid black;
}

/* Classe optionnelle pour le style */
.tableau {
    table-layout: fixed;
    border-collapse: collapse;
}

.tableau td {
    padding: .3rem;
    border: 1px solid #AAA;
    background-color: #234;
}

.zebre tbody tr:nth-child(odd) {
    background-color: #111;
    border-bottom: 1px solid #ccc;
    color: #FFF;
}

.zebre tbody tr:nth-child(even) {
    background-color: #333;
    border-bottom: 1px solid #ccc;
    color: #FFF;
}


  .zebre tbody tr:hover:nth-child(odd) {background-color: #999690;color:#ffffff;}
  .zebre tbody tr:hover:nth-child(even) {background-color: #999690;color:#ffffff;}


.avectri th {
    text-align: center;
    padding: 5px 0 0 5px;
    vertical-align: middle;
    background-color: #999690;
    color: #444;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}

.avectri th.selection {
    background-color: #55744f;
    color: #fff;
}

.avectri th.selection .flecheDesc {
    border-bottom-color: white;
}

.avectri th.selection .flecheAsc {
    border-top-color: white;
}