html,
body {
  position: fixed !important;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0;
  padding: 0;
  width: 100% !important;
  height: 100% !important;
  font-family: Verdana, monospace, sans-serif, Arial;
  font-size: 14px;
  background-color: #1b1919;
  color: #ddd;
}

.Tabs {
  /* relatif à l'élément parent */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: auto;
  display: flex;
  flex-direction: row;
  /* justify-content: space-around; */
  padding: 0;
  margin: 0;
  /* padding: 4px 4px; */
}

.Tabs .TabHeader {
  color: #aaa;
  background-color: #312e2e;
  text-decoration: none;
  padding: 4px 6px;
  margin: 6px 0 0 2px;
  border-left: 1px solid #583301;
  border-right: 1px solid #583301;
  border-top: 1px solid #583301;
  border-radius: 8px 8px 0 0;
  font-weight: normal;
}

.Tabs .TabHeader.Selected {
  font-weight: 600;
  color: rgb(80, 66, 23);
  background-color: #da6;

}
.Tabs .TabHeader.Disabled {
  pointer-events: none;
  cursor: not-allowed;
  opacity: 0.4;
}

.WorkLoad {
  /* relatif à l'élément parent */
  position: absolute;
  top: 28px;
  bottom: 4px;
  left: 4px;
  right: 4px;
  z-index: auto;
  display: flex;
  flex-direction: column;
}

.TabMainContent {
  position: relative;
  margin: 4px 2px 4px 2px;
  padding: 10px;
  display: inline-block;
  overflow: auto;
  padding: 4px 2px;
  box-sizing: border-box;
  border: 2px solid #332e29;
  border-radius: 0 8px 8px 8px;
}

.Hidden {
  display: none;
}


/*******************************************************************
***********             Inscription CSS           ******************
********************************************************************/

.ContestInfo {
  display: inline-block;
  margin: 4px 0px;
  /* background-color:rgb(61, 54, 45); */
  padding: 6px 0;
  display: flex;
  flex-direction: row;
  justify-content: unset;
  flex-wrap: wrap;
}

.CenteredAligned {
  text-align: center;
}

.RightAligned {
  text-align: right;
}

label {
  padding: 4px 8px;
  color: #aaa;
}

label#tirageRondes {
  padding: 4px 0 0 4px;
}

fieldset {
  border-radius: 4px;
  border: 1px solid #332e29;
}

input[type="checkbox"] {
  margin: 8px 0 0 20px;
  accent-color: #da6;
}

input[type="text"] {
  padding: 0px 2px;
  margin: 0px 8px;
  box-sizing: border-box;
}

input:disabled {
  background-color: #1f1c1c;
  color: #4d9b4d;
  font-size: 16px;
  box-sizing: unset;
  border: none;
}

button {
  padding: 2px 8px;
  margin: 0px 8px;
  box-sizing: border-box;
}

select {
  padding: 2px 2px;
  box-sizing: border-box;
}

#nbPlayers {
  width: 12px;
  padding: 4px 4px;
  color: #82c482;
}

.PlayersTable {
  /* width: 100%; */

  border: 1px solid #aaa;
  border-collapse: collapse;
  margin: 0px 10px;
  margin-top: 6px;
  min-width: 290px;
}

.PlayersTable th,
.PlayersTable td {
  padding: 6px 8px;
  border: 1px solid #aaa;
}

.PlayersTable th {
  background-color: #36332f;
}

.deleteBtn {
  cursor: pointer;
}

#nombreInscrits {
  width: 18pt;
}

/*******************************************************************
***********             GamesMgr CSS              ******************
********************************************************************/

.GamesList {
  /* display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-auto-flow: row;
  grid-auto-rows: 1fr;
  justify-items: stretch; */
  display: inline-flex;
  flex-direction: column;
}

.GameContainer {
  /* align-self: stretch;
  place-self: center stretch; */
  display: inline-block;
  /* display: flex;
  flex-direction: column;
  flex-grow: 14; */
  /* width: 100%; */
  margin: 2px 0 2px 0;
  padding: 4px 0;
}

.GameTitle {
  display: flex;
  flex-direction: row;
  flex-grow: 14;
  background-color: #282420;
  border-radius: 4px 4px 0 0;
  font-weight: bold;
  padding: 3px 4px;
}

.GameTitleLabel {
  display: flex;
  flex-direction: row;
  flex-grow: 4;
  background-color: #282420;
  border-radius: 4px 4px 0 0;
  font-weight: bold;
  padding: 2px;
}

.GameTitleReset {
  display: flex;
  flex-direction: row;
  background-color: #282420;
  border-radius: 4px 4px 0 0;
  font-weight: bold;
  padding: 2px;
}

.GameContent {
  display: flex;
  flex-direction: column;
  flex-grow: 4;
  /* width: 100%; */
  background-color: #575452;

}

.Game {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  border-radius: 4px;
  border: 1px solid #282420;
  margin: 2px 2px;
  background-color: #313030;
}

.Team {
  /* position: relative; */
  display: flex;
  flex-direction: row;
  border-radius: 4px;
  padding: 4px 2px;
  margin: 2px;
  background-color: #1a1715;
  /* align-items: center; */
  justify-content: center;
  width: 50%;
}

.TeamPlayers {
  display: flex;
  flex-direction: column;
  flex-grow: 4;
  padding: 2px 2px 2px 10px;
  margin: 0;
  justify-content: center;
  align-items: left;
}

.PlayerName {
  display: inline-block;
  text-align: left;
  font-size: 16px;
  padding: 0;
  margin: 0;
}

.BlocPointsScore {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding-left: 4px;
  vertical-align: middle;
}

.BlocScore,
.BlocPoints {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 4px;
  vertical-align: middle;
}

.LabelPoints,
.LabelScore {
  width: 40px;
  height: 14px;
  text-align: center;
  font-size: 12px;
  padding: 0 0 4px 0;
}

.Points,
.Score {
  width: 32px;
  height: 16px;
  /* font-size: 15px; */
  text-align: center;
  vertical-align: middle;
  padding: 0;
}

.Points {
  background-color: #4e4646;
}

.AlignRight {
  position: relative;
  float: right;
}

p,
h4 {
  margin: 4px 8px;
}

@media screen and (max-width: 500px) {
  .BlocPointsScore {
    display: flex;
    flex-direction: column;
    align-items: column;
    justify-content: center;
    padding-left: 4px;
  }

  .LabelPoints,
  .LabelScore {
    width: 40px;
    height: 14px;
    text-align: center;
    font-size: 12px;
    padding: 0;
  }
}

/*************************************************************
***********           ClassementMgr CSS         **************
**************************************************************/
.ResultsBlock {
  display: inline-block;
}

Table.ResultTable {
  border-collapse: collapse;
  /* border-collapse: separate; */
  display: table;
  box-sizing: border-box;
  text-indent: initial;
  border-spacing: 2px;
  border-color: gray;
  font-size: 13px;
}

.TableFixedHeader {
  /* Bug Firefox: le sticky avec Boder collapse empêche le bordures sur le header */
  /* make the table heads sticky */
  position: sticky;
  /* table head will be placed from the top of the table and sticks to it */
  top: 0px;
}

table.ResultTable thead,
table.ResultTable tbody {
  /* border: 1px solid #000;
  border-image: initial; */
  padding: 3px 6px;
}

TABLE.ResultTable thead tr {
  background-color: #444;
}

TABLE.ResultTable tbody tr:nth-child(even) {
  background-color: #414141;
}

TABLE.ResultTable tbody tr:nth-child(odd) {
  background-color: #2e2d2d;
}

TABLE.ResultTable td {
  border: 1px solid black;
  padding: 6px 8px;
  vertical-align: middle;
  /* For Firefox issue */
  /* background-clip: padding-box; */
}

tbody td.Nom {
  text-align: left;
  min-width: 100px;
}

tbody td.Total {
  color: #da6;
  min-width: 30px;
}

tbody td.Moyenne {
  color: rgb(155, 150, 144);
  min-width: 36px;
}

/*****************************************************************
***********                 BOUTONS                 **************
******************************************************************/

.InlineButtons {
  display: flex;
  flex-direction: row;
}

.ActionLinkContainer {
  margin: 12px 4px;
  padding: 0;
}

.ButtonSmall,
.ActionLink,
.ClickableLink {
  color: #eeeaea;
  background-color: #666;
  text-decoration: none;
  cursor: pointer;
}

.ButtonSmall:hover,
.ActionLink:hover,
.ClickableLink:hover {
  color: #cc944b;
  background-color: #474242;
  border-color: #cc944b;
}

.ButtonSmall.Disabled,
.ActionLink.Disabled,
.ClickableLink:Disabled {
  color: #5f5a5a;
  cursor: not-allowed;
}

.ButtonSmall {
  margin: 0;
  padding: 2px 8px;
  font-size: 12px;
  border-radius: 4px;
}

.ActionLink {
  border-radius: 4px;
  padding: 4px 6px;
  margin: 10px 4px;
}

.ClickableLink {
  border-radius: 100%;
  padding: 0 6px 0 6px;
  font: 16pt monospace, Consolas, sans-serif, Arial, Verdana;
  font-weight: bold;
}

.Clickable {
  cursor: pointer;
}


/*****************************************************************
***********           PRINTING RESULTS              **************
******************************************************************/

@page {
  size: A4
}

@media print {

  html,
  body {
    width: 100% !important;
    height: 100% !important;
    padding: 0;
    margin: 0;
    color: #000
  }

  .WorkLoad {
    /* relatif à l'élément parent */
    position: absolute;
    top: 40px;
    left: 40px;
    z-index: auto;
    /* display: flex;
    flex-direction: column; */
  }

  .Tabs.TabHeader,
  .tabContentClassement,
  p,
  .InlineButtons,
  .ActionLinkContainer,
  .TabHeader {
    display: none
  }


  .TabMainContent {
    border: none
  }

  Table.ResultTable {
    /* border-collapse: collapse; */
    border-collapse: unset;
    border-collapse: collapse;
    display: table;
    box-sizing: border-box;
    text-indent: initial;
    border-spacing: 2px;
    border-color: gray;
    font-size: 16px;
  }

  table.ResultTable thead,
  table.ResultTable tbody,
  tABLE.ResultTable thead tr td,
  TABLE.ResultTable tbody tr td {
    border: 1px solid BLACK;
    border-image: initial;
    padding: 3px 6px;
    background-clip: unset;
  }

  table.ResultTable thead {
    /* Il faut supprimer le sticky pour l'impression */
    position: inherit;
  }

}