@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700");
		
.bracket-wrapper {
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	padding: 10px 0;
}	
		
.bracket {
	font-family: "source sans pro", sans-serif;
	display: flex;
	justify-content: center;
	width: max-content;
	min-width: 100%;
}

.column {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

/* Bordures rondes */
.match .match-top {
  border-radius: 6px 6px 0 0;
}
.match .match-bottom {
  border-radius: 0 0 6px 6px;
}

/* Match */
.match {
  display: flex;
  position: relative;
  flex-direction: column;
  width: 200px;
  height: 60px;
  margin: 12px 24px 12px 0;
  filter: drop-shadow(0px 0px 6px #000);
}
.match .team {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  background: #1B263B;
  color: #E0E1DD;
  text-shadow: 0 0 0.5rem #000;
}
.match .team span:last-child {
  padding-right: 6px;
}
.match .team .seed {
  font-size: 12px;
  width: 24px;
  text-align: center;
}
.match .team .fi {
  width: 22px;  
  height: 22px;
  filter: drop-shadow(0px 0px 4px #000);
}
.match .team .name {
  padding-left: 6px;
  font-size: 16px;
  max-width: 134px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: normal;
}
.match .team .score {
  margin-left: auto;
  font-size: 14px;
}
.match .team .score.dead {
  color: #FF581A;
}
.match .placeholder span {
  margin-left: auto;
  margin-right: auto;
  font-style: italic;
}
.match .title {
  font-size: 14px;
  position: absolute;
  width: 100%;
  text-align: center;
  color: #778DA9;
  top: -16px;
  font-style: italic;
  text-shadow: 0 0 0.5rem #000;
  font-weight: bold;
}

/* Liaisons entre les matchs */
.match-lines {
  position: absolute;
  top: 50%;
}
.match-lines .line {
  position: absolute;
  background: #36404e;
}
.match-lines .line.horizontal {
  height: 1px;
  width: 212px;
}
.match-lines .line.vertical {
  width: 1px;
  left: 211px;
}
.match-lines .line.vertical.v1 { height: 42px; }
.match-lines .line.vertical.v2 { height: 84px; }
.match-lines .line.vertical.v3 { height: 168px; }
.match-lines .line.vertical.v4 { height: 256px; }
.match-lines.alt {
  left: -12px;
}

.match:nth-child(even) .match-lines .line.vertical {
  transform: translate(0, -100%);
}

.winner-top .match-bottom,
.winner-bottom .match-top,
.match .placeholder {
  background: #0D1B2A;
  /*color: #6b798c;*/
  font-size: 16px;
}

.winner-top .match-bottom span,
.winner-bottom .match-top span,
.match .placeholder span {
	opacity: 50%;
}