
.playoff-table *{
    box-sizing: border-box;
  }
  .playoff-table {
    font-family: sans-serif;
    font-size: 14px;
    line-height: 1.42857143;
    font-weight: 400;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background-color: #f5f5f5;
  }
  .playoff-table .playoff-table-content {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: -ms-flex;
    display: flex;
    padding: 20px;
    /* justify-content: center; */
  }
  .playoff-table .playoff-table-tour {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: -ms-flex;
    display: flex;
    -webkit-align-items: center;
    -ms-align-items: center;
    align-items: center;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content: space-around;
    -ms-justify-content: space-around;
    justify-content: space-around;
    position: relative;
  }
  .playoff-table .playoff-table-tour h1 {
    font-size:14pt;
    margin-bottom:20px;
    width: 245px;
    display: grid;
    text-align: center;
    background-color: #9ab7f7;
    color: #fff;
    padding: 4px;
  }
  .playoff-table .playoff-table-pair {
    position: relative;
  }
  .playoff-table .playoff-table-pair:before {
    content: '';
    position: absolute;
    top: 38px;
    right: -12px;
    width: 12px;
    height: 1px;
    background-color: #cccccc;
    z-index:99;
  }
  .playoff-table .playoff-table-pair:after {
    content: '';
    position: absolute;
    width: 3px;
    height: 1000px;
    background-color: #f5f5f5;
    right: -12px;
    z-index: 1;
  }
  .playoff-table .playoff-table-pair:nth-child(even):after {
    top: 39px;
  }
  .playoff-table .playoff-table-pair:nth-child(odd):after {
    bottom: 41px;
  }
  .playoff-table .playoff-table-pair-style {
    border: 1px solid #cccccc;
    background-color: white;
    width: 245px;
    margin-bottom: 20px;
  }

  .playoff-table .playoff-table-pair-style.none {
    border: 0px solid #cccccc;
  }
  .playoff-table .playoff-table-pair-style.none:before,
  .playoff-table .playoff-table-pair-style.none:after
   {
    display: none;
  }
  .playoff-table .playoff-table-group {
    padding-right: 11px;
    padding-left: 10px;
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
    height: 100%;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: -ms-flex;
    display: flex;
    -webkit-align-items: center;
    -ms-align-items: center;
    align-items: center;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content: space-around;
    -ms-justify-content: space-around;
    justify-content: space-around;
  }
  .playoff-table .playoff-table-group .playoff-table-pair-style:last-child {
    margin-bottom: 0px;
  }
  .playoff-table .playoff-table-group:after {
    content: '';
    position: absolute;
    top: 28px;
    bottom: 29px;
    right: 0px;
    width: 1px;
    background-color: #cccccc;
  }
  .playoff-table .playoff-table-group.none:after {
    display: none;
  }
  .playoff-table .playoff-table-group:last-child {
    margin-bottom: 0;
  }
  .playoff-table .playoff-table-left-player,
  .playoff-table .playoff-table-right-player {
    display: flex;
    min-height: 26px;
    padding: 3px 5px;
    font-size: 14pt;
    justify-content: center;
  }
  .playoff-table .playoff-table-left-player {
    border-bottom: 1px solid #cccccc;
  }
  .playoff-table .playoff-table-left-player:before {
    content: '';
    position: absolute;
    bottom: 36px;
    left: -13px;
    top: 39px;
    width: 12px;
    height: 1px;
    background-color: #cccccc;
  }
  .playoff-table .playoff-table-right-player {
    margin-top: -1px;
    border-top: 1px solid #cccccc;
  }
  .playoff-table .playoff-table-left-player.none:before {
    display: none;
  }
  
  .playoff-table .playoff-table-tour:first-child .playoff-table-group {
    padding-left: 0;
  }
  .playoff-table .playoff-table-tour:first-child .playoff-table-left-player:before {
    display: none;
  }
  .playoff-table .playoff-table-tour:last-child .playoff-table-group:after {
    display: none;
  }
  
  .playoff-table .playoff-table-tour:nth-child(4) .playoff-table-group:after {
      display: none;
  }
  
  .playoff-table .playoff-table-tour:last-child .playoff-table-pair:after,
  .playoff-table .playoff-table-tour:last-child .playoff-table-pair:before {
    display: none;
  }
  
  .playoff-table .playoff-table-tour:nth-child(4) .playoff-table-group:after,
  .playoff-table .playoff-table-tour:nth-child(4) .playoff-table-group:before {
      display: none;
  }
  
  
  /*Add*/
  
  .playoff-table .playoff-table-left-player span,
  .playoff-table .playoff-table-right-player span {
      padding: 3px;
  }
  .playoff-table .playoff-table-left-player .name,
  .playoff-table .playoff-table-right-player .name {
      margin-left: 5px;
  }
  .playoff-table .playoff-table-left-player .score,
  .playoff-table .playoff-table-right-player .score {
      color: #4e73df;
      margin-left:8px;
      width: 24px;
      /* border: 1px solid #cccccc;
      background-color: #cccccc; */
      border-radius: 5px;
      font-size: 14pt;
      display: flex;
      justify-content: center;
      align-items: center;
  }
  
  
  .playoff-table .playoff-table-group.result {
    display: block;
  }
  .playoff-table .playoff-table-player {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 10px;
    min-height: 26px;
    padding: 3px 5px;
    font-size: 14pt;
    border-bottom: 1px solid #cccccc;
  }
  .playoff-table .playoff-table-player:last-child {
    margin-top: -1px;
    border-top: 0px solid #cccccc;
  }
  
  .playoff-table .playoff-table-tour:nth-child(4) .playoff-table-pair:after,
  .playoff-table .playoff-table-tour:nth-child(4) .playoff-table-pair:before {
    display: none;
  }
  
  
  .playoff-table-player span{
      padding: 3px;
  }
  .playoff-table-player .rank{
    color: #0044cc;
    text-align: center;
  }
  .playoff-table-player .name{
  }

  .winner8{
    background-color: #f4e0ad;
}
.winner4{
    background-color: #f4d994;
}
.winner3{
    background-color: #f2ce72;
}
.winner2{
    background-color: #f6c64c;
}
.winner1{
    background-color: #f6b91d;
}



.input-score{
    display:grid;
    gap:5px;
    grid-template-columns:1fr 2fr 0fr 2fr;
    margin-bottom: 5px;
}



.line {
    background-image: linear-gradient(to left bottom, transparent calc(50% - 1px), #d4a12c, transparent calc(50% + 1px));
    background-size: 120% 120%;
    background-position: center;
  }
  
  .score li{
      list-style: none;
      margin-left:-40px;
  }
  
  .th-width20{
      width: 200px;
      padding:0.6rem;
      text-align:center;
  }
  
  .th-withd15{
      width: 150px;
      /* padding:0.6rem; */
      text-align:center;
  }
  .th-withd10{
      width: 150px;
      padding:0.6rem;
      text-align:center;
  }
  .th-withd5{
      width: 100px;
      padding:0.6rem;
      text-align:center;
  }

.item8{
    display: grid;
    grid-template-rows: 2fr 2fr 2fr 2fr 2fr;
    gap: 68px;
}

.item8-mr40 {
    /* content: attr(data-round); */
    border: 1px solid blue;
    background-color: #011e68;
    color: #fff;
    border-radius: 25px;
    position: relative;
    left: 0px;
    top: 76px;
    justify-content: center;
    align-items: center;
    display:flex;
    width:30px;
    height:30px;
}