
.tournois-contenu {
    position: relative;
    background-color: #222222;
    
}
.ootb-tabcordion.has-tabs .ootb-tabcordion--entry.is-active .ootb-tabcordion--entry-content.tournois-contenu{
    display: flex;
    max-width: 100%;
    width: 100%;
    min-height: 550px;
    padding: 10px;
    background: #222;
    align-items: center;
} 

.tournois-contenu  .close-table {
  background: none;
  border: none;
  color: white;
  font-size: 16px;
  font-weight: bold;
  position: absolute;
  right: 10px;
  top: 10px;
  cursor: pointer;
  z-index: 9;
}
.tournois-contenu  .close-table:hover {
  background: none;
  border: none;
  color: #d2bc67;
  font-size: 16px;
  font-weight: bold;
  position: absolute;
  right: 10px;
  top: 10px;
  cursor: pointer;
}

.bracket-wrapper {
    max-width: 100%;
    width: 100%;
    overflow: auto;
}

@media screen and (max-width:767px) {
  .tournois-contenu {
    position: relative;
    padding: 10px;
  }
  .bracket-wrapper{
      background-color: #222;
      /* padding: 10px; */
  }
}

.bracket {
    display: inline-block;
    white-space: nowrap;
    font-size: 0;
    width: 100%;
  }
  
  .round {
    display: inline-block;
    vertical-align: middle;
  }
  
  .winners > div {
    display: inline-block;
    vertical-align: middle;
    margin-top: 10px;
  }

  
  .winners > div.matchups .matchup:last-child {
    margin-bottom: 0 !important;
  }
  
  .winners > div.matchups .matchup .participants {
    border-radius: 0.25rem;
    overflow: hidden;
    width: 100%;
    padding: 5px 0;
    background: var(--color-2);
    border-radius: 8px;
  }
  
  .winners > div.matchups .matchup .participants .participant {
    box-sizing: border-box;
    color: #333; 
    width: 100%;
    display: grid;
  }
  
  
  .winners > div.matchups .matchup .participants .participant:not(:last-child) {
    /* border-bottom: thin solid #000000; */
  }
  
  .winners > div.matchups .matchup .participants .participant span {
    margin: 1px 10px;
    font-size: 13px;
    /* font-family: "Poppins"; */
    font-weight: 600;
    color: #494747;
  }
  
  /* Connecteurs */
  .connector.filled .line,
  .connector.filled.bottom .merger:after,
  .connector.filled.top .merger:before {
    border-color: #4CAF50; /* $color-release */
  }
  
  .connector .line,
  .connector .merger {
    box-sizing: border-box;
    width: 1rem;
    display: inline-block;
    vertical-align: top;
  }
  
  .connector .line {
    border-bottom: thin solid #ccc; /* $color-border */
    /* height: 4rem; */
    height: 4.6rem;
  }
  
  .connector .merger {
    position: relative;
    /* height: 8rem; */
    height: 8.6rem;
  }
  
  .connector .merger:before,
  .connector .merger:after {
    content: "";
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 50%;
    border: 0 solid #ccc;
  }
  
  .connector .merger:before {
    border-right-width: thin;
    border-top-width: thin;
  }
  
  .connector .merger:after {
    border-right-width: thin;
    border-bottom-width: thin;
  }
  
  /* Espacement selon les rounds */
  .round.quarterfinals .winners:not(:last-child) {
    margin-bottom: 2rem;
  }
  
  .round.quarterfinals .matchups .matchup:not(:last-child) {
    margin-bottom: 2rem;
  }
  
  .round.semifinals .matchups .matchup:not(:last-child) {
    /* margin-bottom: 10rem; */
    margin-bottom: 10.5rem;
  }
  
  .round.semifinals .connector .merger {
    height: 16rem;
  }
  
  .round.semifinals .connector .line {
    height: 8rem;
  }
  
  .round.finals .connector .merger {
    height: 3rem;
  }
  
  .round.finals .connector .line {
    height: 1.5rem;
  }


/* Position the right bracket on the right */
.bracket.right {
    max-width: 40%;
    width: 100%;
  }
  
  
  /* Reverse order of rounds */
  .bracket.right .round {
    display: inline-block;
    vertical-align: middle;
    direction: rtl;
  }
  
  /* Flip connector lines */
  .bracket.right .connector .line {
    transform: scaleX(-1);
  }
  
  .bracket.right .connector .merger:before {
    border-left-width: thin;
    border-right-width: 0;
    border-top-width: thin;
  }
  
  .bracket.right .connector .merger:after {
    border-left-width: thin;
    border-right-width: 0;
    border-bottom-width: thin;
  }
  

  .winners > div.matchups .matchup .participants .participant:not(:last-child) > span:last-child {
    border-bottom: 1px solid gray;
    padding-bottom: 3px;
}

