<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>

    main{
      display:flex;
      flex-direction:row;
      padding: 1%;
    }
    
    .round{
      display:flex;
      flex-direction:column;
      justify-content:center;
      min-width: 400px;
      list-style:none;
      padding:0;
      border-right: 1px dashed #ccc;

    }
        
        .round[scope='last'] {
          border-right: 0px;
        }
        
      .round .spacer{ flex-grow:1;
          font-size:24px;
          text-align: center;
          color: #000000;
          font-style:italic;
    }
      .round .spacer:first-child,
      .round .spacer:last-child{ flex-grow:.5; }

      .round .game-spacer{
        flex-grow:1;
      }

    /*
     *  General Styles
    */
    body{
      font-family:sans-serif;
      font-size:32px;
      padding:10px;
      line-height:32px;
    }

    li.game{
      padding-left:20px;
    }

      li.game.winner{
        font-weight:bold;
      }
      li.game span{
        float:right;
        margin-right:5px;
      }
        
      li.game-top{
          border-bottom:2px solid #4f7a38;
      }

        li.game-spacer{
          border-right:2px solid #4f7a38;
          min-height:{{minHeight}}px;
          text-align: right;
          display : flex;
          justify-content: center;
          align-items : center;
        }
        
      .multiline {
        white-space: pre-wrap;
      }
      li.game-bottom{
        border-top:2px solid #4f7a38;
      }
        
    .player {
        font-size:26px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
        .hiddenPlayer {
            font-size:26px;
            white-space: pre;
            overflow: hidden;
            text-overflow: ellipsis;
        }
</style>
</head>
<body>

<h3>{{tournamentTitle}} - {{tournamentStartDate}}</h3>
<main id="tournament">
    {{brackets}}
</main>
</body>
</html>
