@font-face {
  font-family: 'DejaVu Sans Bold';
  src: url('../webfonts/DejaVuSans-Bold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}

body {
  font-family: 'DejaVu Sans Bold', Arial, sans-serif;
	color: rgb(88, 88, 88);
	font-size:14px !important;
	margin : 5px;
}
main {
margin: auto;
    width: fit-content;
}
main.finish {
margin-top : 100px;
}
input {
width : 80px;
text-align : center;
background-color:rgba(255,255,255,0);
border : none;
/*border-bottom: 1px solid rgba(0,0,0,0.22);
    border-right: 1px solid rgba(0,0,0,0.22);*/
	margin : 1px;
	    font-size: 24px !important;
}
input.nomjoueur {
 font-size: 18px !important;
}
table .separation td.colonne,table .separation td, table tbody tr.separation {
	height: 10px;
    border-right: 1px solid rgba(0,0,0,0);
    position: relative;
    background-color: #ffffff;
}

table tr:nth-child(odd){
  background-color:#e2e6ff50;
}

table .colonne:nth-child(odd){
  background-color:#e2e6ff50;
}

table .colonnepaire{
  background-color:#e2e6ff50;
}
table {
  margin-top : 5px;
}
table tbody tr{
  height : 38px;
}
table td{
  height : 34px;
  border-right: 1px solid rgba(0,0,0,0.8);
  position : relative;
}

table tbody tr.tours td, table tbody tr.tours {

font-size: 11px;
    height: 15px;
}
table thead#theader tr {
    background-color: #ffffff;
}

table th {
    border-right: 1px solid rgba(0,0,0,0.8);
    position: relative;
}

.lock-icon {
cursor: pointer;
    margin: 0px;
    font-size: 18px;
    color: #666;
    user-select: none;
    position: absolute;
    right: 0px;
	Display:none;
}
.lock-icon.view {
	Display:block;
}

.nomjoueur {
vertical-align: middle;
text-align : center;
height : 25px;
}

.nomjoueur input {
font-size:20px !important;
}
.gametitle {
	margin-left: 3px;
    margin-right: 5px;
    display: inline-block;
    padding-top: 10px;
    float: left;
}
.gametitlebas {
margin-left: 3px;
    margin-right: 5px;
    display: inline-block;
    padding-top: 3px;
    display: block;
}
.gameinfobas {
	display: block;
    margin-left: 6px;
    font-size: 10px !important;
    font-style: italic;
    margin-top: 2px;
}
.dice {
    background-color: transparent;
    background-image: url(../images/des2.png);
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-size: 182px 30px;
    width: 29px;
    height: 29px;
    display: inline-block;
	float: right;
    margin-right: 5px;
    margin-top: 2px;
    transform: rotate(-5deg);
    transform: rotate(5deg);

}
.dice.dice-one {
	background-position: -1px -1px;
}
.dice.dice-two {
	background-position: -31px -1px;
}
.dice.dice-three {
	background-position: -61px -1px;
}
.dice.dice-four {
	background-position: -92px -1px;
}
.dice.dice-five {
	background-position: -122px -1px;
}
.dice.dice-six {
	background-position: -152px -1px;
}
.colonne {
vertical-align: middle;
text-align : center;
}

tr.total, tr.totalhaut {
font-weight : bold;
  background-color:#e2e6ff50;
}
tr.total input {
font-weight : bold;
	font-size:24px !important;
}
tr.totalhaut input {
font-weight : bold;
	font-size:24px !important;
}
table .colonne.green {
  background-color:#00ff1c30;
}
table .colonne.greentop {
  background-color:#00eaff52;
} 



table .colonne.red {
  background-color:#ff000030;
}
.infoscore {
position : absolute;
right : 5px;
bottom : 5px;
color: #e1000000;
}

.infoscore.retard {
color: #e10000;
}
.infoscore.avance {
color: #00e100;
}

 .nosee {
	 display:none;
 }
 .bas.info,  .colonne input.haut {
  position : absolute;
  right : 0px;
  bottom : 0px;
font-size: 10px !important;
    text-align: right;
	display:none;
 }

/* Une ligne diagonale fine, couleur actuelle du texte */
.barre{
  /* optionnel : pour une meilleure netteté */
  background-repeat: no-repeat;
  background-size: 100% 100%;
  /* ligne au centre, 2px d'épaisseur */
  background-image:
    linear-gradient(
      -45deg,
      transparent calc(50% - 2px),
      currentColor calc(50% - 2px),
      currentColor calc(50% + 2px),
      transparent calc(50% + 2px)
    );
}

input[type="checkbox"] {
  appearance: none;         /* retire le style natif */
  -webkit-appearance: none; /* Safari/Chrome */
  -moz-appearance: none;    /* Firefox */
  
  /* Supprime tout aspect visuel */
  border: none;
  outline: none;
  background: none;
  box-shadow: none;
  margin: 0;
  padding: 0;
  width: 32px;   /* garde une taille cliquable */
  height: 32px;
  cursor: pointer;
}

input[type="checkbox"]:focus {
  outline: none;
  box-shadow: none;
}

/* état 1 */
input[type="checkbox"][data-etat="1"][data-valeur="1"] { background-image: url('../images/1.png'); background-size: cover; }
input[type="checkbox"][data-etat="1"][data-valeur="2"] { background-image: url('../images/2.png'); background-size: cover; }
input[type="checkbox"][data-etat="1"][data-valeur="3"] { background-image: url('../images/3.png'); background-size: cover; }
input[type="checkbox"][data-etat="1"][data-valeur="4"] { background-image: url('../images/4.png'); background-size: cover; }
input[type="checkbox"][data-etat="1"][data-valeur="5"] { background-image: url('../images/5.png'); background-size: cover; }
input[type="checkbox"][data-etat="1"][data-valeur="6"] { background-image: url('../images/6.png'); background-size: cover; }

/* état 2 */
input[type="checkbox"][data-etat="2"][data-valeur="1"] { background-image: url('../images/2.png'); background-size: cover; }
input[type="checkbox"][data-etat="2"][data-valeur="2"] { background-image: url('../images/4.png'); background-size: cover; }
input[type="checkbox"][data-etat="2"][data-valeur="3"] { background-image: url('../images/6.png'); background-size: cover; }
input[type="checkbox"][data-etat="2"][data-valeur="4"] { background-image: url('../images/8.png'); background-size: cover; }
input[type="checkbox"][data-etat="2"][data-valeur="5"] { background-image: url('../images/10.png'); background-size: cover; }
input[type="checkbox"][data-etat="2"][data-valeur="6"] { background-image: url('../images/12.png'); background-size: cover; }

/* état 3 */
input[type="checkbox"][data-etat="3"][data-valeur="1"] { background-image: url('../images/3.png'); background-size: cover; }
input[type="checkbox"][data-etat="3"][data-valeur="2"] { background-image: url('../images/6.png'); background-size: cover; }
input[type="checkbox"][data-etat="3"][data-valeur="3"] { background-image: url('../images/9.png'); background-size: cover; }
input[type="checkbox"][data-etat="3"][data-valeur="4"] { background-image: url('../images/12.png'); background-size: cover; }
input[type="checkbox"][data-etat="3"][data-valeur="5"] { background-image: url('../images/15.png'); background-size: cover; }
input[type="checkbox"][data-etat="3"][data-valeur="6"] { background-image: url('../images/18.png'); background-size: cover; }

/* état 4 */
input[type="checkbox"][data-etat="4"][data-valeur="1"] { background-image: url('../images/4.png'); background-size: cover; }
input[type="checkbox"][data-etat="4"][data-valeur="2"] { background-image: url('../images/8.png'); background-size: cover; }
input[type="checkbox"][data-etat="4"][data-valeur="3"] { background-image: url('../images/12.png'); background-size: cover; }
input[type="checkbox"][data-etat="4"][data-valeur="4"] { background-image: url('../images/16.png'); background-size: cover; }
input[type="checkbox"][data-etat="4"][data-valeur="5"] { background-image: url('../images/20.png'); background-size: cover; }
input[type="checkbox"][data-etat="4"][data-valeur="6"] { background-image: url('../images/24.png'); background-size: cover; }

/* état 5 */
input[type="checkbox"][data-etat="5"][data-valeur="1"] { background-image: url('../images/5.png'); background-size: cover; }
input[type="checkbox"][data-etat="5"][data-valeur="2"] { background-image: url('../images/10.png'); background-size: cover; }
input[type="checkbox"][data-etat="5"][data-valeur="3"] { background-image: url('../images/15.png'); background-size: cover; }
input[type="checkbox"][data-etat="5"][data-valeur="4"] { background-image: url('../images/20.png'); background-size: cover; }
input[type="checkbox"][data-etat="5"][data-valeur="5"] { background-image: url('../images/25.png'); background-size: cover; }
input[type="checkbox"][data-etat="5"][data-valeur="6"] { background-image: url('../images/30.png'); background-size: cover; }



input[type="checkbox"][data-etat="1"][data-valeur="10"] {
  background-image: url('../images/10.png'); /* chemin vers ton image */
  background-size: cover;          /* pour occuper toute la case */
}
input[type="checkbox"][data-etat="1"][data-valeur="20"] {
  background-image: url('../images/20.png'); /* chemin vers ton image */
  background-size: cover;          /* pour occuper toute la case */
}
input[type="checkbox"][data-etat="1"][data-valeur="25"] {
  background-image: url('../images/25.png'); /* chemin vers ton image */
  background-size: cover;          /* pour occuper toute la case */
}
input[type="checkbox"][data-etat="1"][data-valeur="30"] {
  background-image: url('../images/30.png'); /* chemin vers ton image */
  background-size: cover;          /* pour occuper toute la case */
}
input[type="checkbox"][data-etat="1"][data-valeur="40"] {
  background-image: url('../images/40.png'); /* chemin vers ton image */
  background-size: cover;          /* pour occuper toute la case */
}
input[type="checkbox"][data-etat="1"][data-valeur="50"] {
  background-image: url('../images/50.png'); /* chemin vers ton image */
  background-size: cover;          /* pour occuper toute la case */
}
/*
.flex-items:nth-child(1) {
  display: block;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  align-self: auto;
  order: 0;
}

.flex-items:nth-child(2) {
  display: block;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  align-self: auto;
  order: 0;
}

.flex-items:nth-child(3) {
  display: block;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  align-self: auto;
  order: 0;
}

.flex-items:nth-child(4) {
  display: block;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  align-self: auto;
  order: 0;
}

.flex-items:nth-child(5) {
  display: block;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  align-self: auto;
  order: 0;
}

.flex-items:nth-child(6) {
  display: block;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  align-self: auto;
  order: 0;
}

.flex-items:nth-child(7) {
  display: block;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  align-self: auto;
  order: 0;
}

.flex-items:nth-child(8) {
  display: block;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  align-self: auto;
  order: 0;
}

.flex-items:nth-child(9) {
  display: block;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  align-self: auto;
  order: 0;
}*/