* {
  box-sizing: border-box;
}
body { font: normal .80em 'trebuchet ms', arial, sans-serif;}
h1, h2, h3, h4, h5, h6 { font: normal 150% 'Yanone Kaffeesatz', arial, sans-serif;
  color: #444;  margin: 0 0 15px 0;  padding: 5px 0 5px 0;}
h2 { font: normal 170% 'Yanone Kaffeesatz', arial, sans-serif;
  color: #F14E23; margin: 0; padding: 0 0 8px 0;}
.subscript{font-size:xx-small; vertical-align:bottom; color:red;}
table { font-size: 12px; margin: 0 0px 0 5px; padding: 0px 0px 0 0px;}
table td.row_headers { background:#DEEAFA; text-align:center;}
table td.eliminated { padding: 1px 2px 1px 2px; background:#ffccbf;}
tr:nth-child(odd){ background-color:#eee; }
tr:nth-child(even){ background-color:#fff; }
/* grid container */
.holy-grail-grid {
    display:grid;
    grid-template-areas:
        'header'
        'main-content'
        'left-sidebar'
        'right-sidebar'
        'footer';
}

/* general column padding */
.holy-grail-grid > * {
    padding:1rem;
}

/* assign columns to grid areas */
.holy-grail-grid > .header {
    grid-area:header;
    background:#f97171;
}
.holy-grail-grid > .main-content {
    grid-area:main-content;
    background:#fff;
}
.holy-grail-grid > .left-sidebar {
    grid-area:left-sidebar;
    background:#fff;
}
.holy-grail-grid > .right-sidebar {
    grid-area:right-sidebar;
    background:#fff;
}
.holy-grail-grid > .footer {
    grid-area:footer;
    background:#72c2f1;
}

/* tablet breakpoint */
@media (min-width:768px) {
    .holy-grail-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            'header header'
            'main-content main-content'
            'left-sidebar right-sidebar'
            'footer footer';
    }
}

/* desktop breakpoint */
@media (min-width:1024px) {
    .holy-grail-grid {
        grid-template-columns: repeat(3, 1fr);
        grid-template-areas:
            'header header header'
            'left-sidebar main-content right-sidebar'
            'footer footer footer';
    }
}

html {
  height: 100%;
  width: 100%;
}

.tournament-container {}

.tournament-headers {
  flex-grow: 1;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  border-bottom: 1px solid #ccc;
  
  h6 {
    width: 25%;
    text-align:center;
    font-weight: 400;
    border-right: 1px dashed #ccc;
    margin: 0;
    padding:1rem;
  }
}

.tournament-brackets {
  display: flex;
  flex-direction: row; 
  list-style-type: none;
  background: #fdfdfd;
  margin-bottom: 5px;
}

.bracket {
  padding-left: 0;
  display: flex;
  margin: 0;
  padding: 5px 0;
  flex-grow: 1;
  flex-direction: column;
  justify-content: space-around;
  list-style-type: none;
  border-right: 1px dashed #ccc;
  flex: 1;
}

.team-item {
  background-color: #f4f4f4;
  display: block;
  position: relative;
  vertical-align: middle;
  line-height: 2;
  text-align: center;
}

.team-item:after {
  content:'';
  border-color: #4f7a38;
  border-width: 2px;
  position: absolute;
  display: block;
  width: 10px;
  right: -11px;
}

.team-item:nth-of-type(odd):after {
  border-right-style: solid;
  border-top-style: solid;
  height: 100%;
  top: 50%;
}

.team-item:nth-of-type(even):after {
  border-right-style: solid;
  border-bottom-style: solid;
  height: 100%;
  top: -50%;
}

.team-item:before {
  content:'';
  border-top: 2px solid #4f7a38;
  position: absolute;
  height: 2px;
  width: 10px;
  left: -10px;
  top: 50%;
}

.bracket-2 {
  .team-item:nth-of-type(odd):after {
    height: 200%;
    top: 50%;
  }
  .team-item:nth-of-type(even):after {
    height: 200%;
    top: -150%;
  }
}

.bracket-3 {
  .team-item:nth-of-type(odd):after {
    height: 250%;
    top: 50%;
  }
  .team-item:nth-of-type(even):after {
    height: 250%;
    top: -200%;
  }
}

.bracket-4 {
  .team-item:nth-of-type(odd):after {
    height: 500%;
    top: 50%;
  }
  .team-item:nth-of-type(even):after {
    height: 500%;
    top: -450%;
  }
}

.bracket:first-of-type {
  .team-item:before {
    display: none;
  }
}

.bracket-4 {
  .team-item:after {
    display: none;
  }
}

.bracket:last-of-type {
  .team-item:before,
  .team-item:after {
    display: none;
  }
}

.team-item time {
  display: inline-block;
  background-color: #dbdbdb;
  font-size: .5rem;
}