/* *** CSS fo all scoreboard ***/



html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
  

    background-color: #2D3D13; /* vert gazon */
    
    background-image: url('/static/game_assets/images/bckgnd_dino.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    
    
    color: #f6f2c7;

  }

/* Scoreboard table */

  table {
    background-color: #ffffff00;
    margin: 0 auto; /* Center the table horizontally */
    border-width: 1px;
  }

  table th,
  table td {
    vertical-align: middle;
    text-align: center;
    /*background-color: #ffffff00;*/
  }

  .scoreboard-container{
    max-height: calc(100dvh - 260px);
    overflow-x: auto;
    padding: 0;
  }
  .scoreboard-table {
    box-sizing: border-box;
    text-indent: initial;
    unicode-bidi: isolate;
    line-height: normal;
    font-weight: normal;
    font-size: medium;
    font-style: normal;
    color: -internal-quirk-inherit;
    text-align: start;
    border-spacing: 2px;
    white-space: normal;
    font-variant: normal;
  }

  .scoreboard-header {
    display: table-header-group;
    vertical-align: middle;
    unicode-bidi: isolate;
    border-color: inherit;
    position: sticky;
  } 

  .scoreboare-hole {
    background-color: transparent;
    min-width: 70px;
    max-width: 109px;
    max-height: 70px;
    font-stretch 100%;
  } 

  .scoreboard-score {
    background-color: transparent;
    min-width: 70px;
    max-width: 109px;
    max-height: 70px;
  } 

  .scoreboard-body {
    display: table-row-group;
    vertical-align: middle;
    unicode-bidi: isolate;
    border-color: inherit;
    overflow-y: auto;
  } 

/* FIRST FOOTER (Total score) : positionné au-dessus du menu fixe */

  #scoreTotalFooter {
    position: fixed;
    bottom: 60px; /* Hauteur du menu footer */
    width: 100%;
    z-index: 1030;
    background-color: #131312;
  }
  
  .bg-dark {
    background-color: #131312;
  }

/* SECOND FOOTER (Menu) */

  #menuFooter {
    position: fixed;
    bottom: 0;
    height: 60px;
    width: 100%;
    z-index: 1040;
    background-color: #000;
    z-index: 1050;
  }

/* OFF CANVAS */  
  .offcanvas.offcanvas-bottom {
    height: 80vh;
  }

/* HEADER LOGO */
  .logo {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 400px;
    max-height: 100px;
  }

/* SPACERS */

.spacer-90 {
  height: 90px;
}

/* */

  .btn-hole {
    padding: 4px;
    background-color: #f6f2c7;
    color: #131312;
    margin: 2px;
    width: 40px;
    font-size: medium;
    border-radius: 20px;
    min-width: 70px;
    max-width: 109px;
    max-height: 70px;
  }

  .btn-score {
    padding: 4px;
    background-color: #2d3d13ad;
    color: #f6f2c7;
    margin: 2px;
    font-size: medium;
    border-radius: 20px;
    border-style: solid;
    border-color: #f6f2c7;
    border-width: 2px;
    min-width: 60px;
    max-width: 109px;
    max-height: 70px;
  }

  .bottom-line {
    border: white;
    border-bottom: solid;
    border-width: 1px;
  }

  .truncate-5 {
    width: 5ch; /* Largeur équivalente à 5 caractères */
    overflow: hidden; /* Cache le texte qui dépasse */
    text-overflow: ellipsis;
    white-space: nowrap; /* Empêche le texte de passer à la ligne */
    display: inline-block; /* Nécessaire pour que width prenne effet sur les spans */
  }

  .btn-primary {
    padding: 4px;
    background-color: #2d3d13ad;
    color: #f6f2c7;
    margin: 2px;
    font-size: medium;
    border-radius: 20px;
    border-style: solid;
    border-color: #f6f2c7;
    border-width: 2px;
    min-width: 50px;
    max-width: 90px;
    max-height: 70px;
  }
  
    .btn-primary :hover{
        background-color: #2d3d13ad;
    }

  .btn-secondary {
    padding: 4px;
    background-color: #f6f2c7;
    color: #131312;
    margin: 2px;
    width: 40px;
    font-size: medium;
    border-radius: 20px;
    border-style: solid;
    border-color: #f6f2c7;
    border-width: 2px;
    min-width: 50px;
    max-width: 109px;
    max-height: 70px;
  }

  .btn-secondary :hover{
  padding: 4px;
  background-color: #2C1E1A;
  color: #F1D6A5;
  margin: 0px;
  width: 42px;
  font-size: medium;
  border-radius: 20px;
  min-width: 50px;
  max-width: 109px;
  max-height: 70px;
  }


  .offcanvas-bottom.hole-item{
    background-color: #2D3D13;

  }

  .offcanvas-bottom.hole-item.even{
    background-color: #2D3D13;
  }

  .offcanvas-body.hole-item {
    padding-top: 0px;
  }

  .hole-item  {
    color:#f6f2c7;
  }

  .tbody, td, tfoot, th, thead, tr {
    border-color: #ffffff;
    border-style: none;
  }