/* jQuery Bracket | Copyright (c) Teijo Laine 2011-2018 | Licenced under the MIT licence */
div.jQBracket {
  font-family: Arial;
  font-size: 14px;
  position: relative
}

div.jQBracket .tools {
  position: absolute;
  top: 0;
  color: #fff
}

div.jQBracket .tools span {
  cursor: pointer;
  margin: 5px;
  display: block;
  text-align: center;
  width: 18px;
  height: 18px;
  background-color: #666
}

div.jQBracket .tools span:hover {
  background-color: #999
}

div.jQBracket .finals {
  float: right;
  right: 0;
  clear: right;
  position: relative
}

div.jQBracket .bracket {
  float: right;
  clear: left
}

div.jQBracket .loserBracket {
  float: right;
  clear: left;
  position: relative
}

div.jQBracket .round {
  position: relative;
  float: left
}

div.jQBracket .match {
  position: relative
}

div.jQBracket .editable {
  cursor: pointer
}

div.jQBracket .team {
  background-color: #ffffff;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  transition: all 0.2s ease;
  border-left: 4px solid #3b82f6;
  overflow: hidden;
}
div.jQBracket .team:hover {
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

div.jQBracket .team:first-child {
  border-bottom: 1px solid #e5e7eb;
}

div.jQBracket .team input {
  font-size: 14px;
  padding: 0;
  width: 100%;
  border: 0;
  margin: 0;
  outline: 0
}

div.jQBracket .team div.label {
  padding: 3px;
  position: absolute;
  height: 22px;
  white-space: nowrap;
  overflow: hidden;
  box-sizing: border-box;
  color: #473f3f;
}

div.jQBracket .team div.label[disabled] {
  cursor: default
}

div.jQBracket .team div.score {
  float: right;
  padding: 3px;
  background-color: rgba(255, 255, 255, .3);
  text-align: center;
  box-sizing: border-box
}

div.jQBracket .team div.score input {
  text-align: center
}

div.jQBracket .team div.score[disabled] {
  color: #999;
  cursor: default
}

div.jQBracket .team div.label input.error,
div.jQBracket .team div.score input.error {
  background-color: #fcc
}

div.jQBracket .team.np {
  background-color: #666;
  color: #eee
}

div.jQBracket .team.na {
  background-color: #f3f4f6;
  border-left: 4px solid #9ca3af;
  color: #6b7280;
}

div.jQBracket .team.win {
  background-color: #0ea5e9;
  border-left: 4px solid #0ea5e9;
}

div.jQBracket .team.win div.score {
  color: #0369a1;
  background-color: #e0f2fe;
}

div.jQBracket .team.lose {
  background-color: #f9fafb;
  border-left: 4px solid #9ca3af;
  color: #6b7280;
}

div.jQBracket .team.lose div.score {
  color: #6b7280;
  background-color: #f3f4f6;
}

div.jQBracket .team.tie div.score {
  color: #00f
}

div.jQBracket .team.highlightWinner {
  background-color: #da0;
  color: #000
}

div.jQBracket .team.highlightLoser {
  background-color: #ccc;
  color: #000
}

div.jQBracket .team.brackethighlight {
  background-color: #67f837;
  color: #000
}

div.jQBracket .team.bye {
  background-color: #999;
  color: #ccc
}

div.jQBracket .teamContainer {
  z-index: 1;
  position: relative;
  float: left
}

div.jQBracket .connector {
  border: 2px solid #666;
  border-left-style: none;
  position: absolute;
  z-index: 1
}

div.jQBracket .connector div.connector {
  border: 0;
  border-bottom: 2px solid #666;
  height: 0;
  position: absolute
}

div.jQBracket .connector.highlightWinner,
div.jQBracket .connector div.connector.highlightWinner {
  border-color: #da0
}

div.jQBracket .connector.highlightLoser,
div.jQBracket .connector div.connector.highlightLoser {
  border-color: #ccc
}

div.jQBracket .connector.brackethighlight,
div.jQBracket .connector div.connector.brackethighlight {
  border-color: #0c0
}

div.jQBracket .np .connector,
div.jQBracket .np .connector div.connector {
  border-color: #999
}

div.jQBracket .bubble {
  height: 22px;
  line-height: 22px;
  width: 30px;
  right: -35px;
  position: absolute;
  text-align: center;
  font-size: 11px
}

div.jQBracket .bubble:after {
  content: "";
  position: absolute;
  top: 6px;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid transparent
}

div.jQBracket .bubble:after {
  left: -5px;
  border-left: 0
}

div.jQBracket .win .bubble {
  background-color: #da0;
  color: #960
}

div.jQBracket .win .bubble:after {
  border-right-color: #da0
}

div.jQBracket .win .bubble.third {
  background-color: #963;
  color: #d95
}

div.jQBracket .win .bubble.third:after {
  border-right: 6px solid #963
}

div.jQBracket .lose .bubble {
  background-color: #ccc;
  color: #333
}

div.jQBracket .lose .bubble:after {
  border-right-color: #ccc
}

div.jQBracket .lose .bubble.fourth {
  background-color: #678;
  color: #ccd
}

div.jQBracket .lose .bubble.fourth:after {
  border-right: 6px solid #678
}

div.jQBracket.rl .finals {
  float: left;
  left: 0;
  clear: left
}

div.jQBracket.rl .bracket {
  float: left;
  clear: right
}

div.jQBracket.rl .loserBracket {
  float: left;
  clear: right
}

div.jQBracket.rl .round {
  margin-right: 0;
  float: right
}

div.jQBracket.rl .team {
  float: right
}

div.jQBracket.rl .team div.label {
  right: 0
}

div.jQBracket.rl .team div.score {
  float: left
}

div.jQBracket.rl .teamContainer {
  float: right
}

div.jQBracket.rl .connector {
  border-left-style: solid;
  border-right-style: none;
  border-width: 2px
}

div.jQBracket.rl .connector.highlightWinner,
div.jQBracket.rl .connector div.connector.highlightWinner {
  border-color: #da0
}

div.jQBracket.rl .connector.highlightLoser,
div.jQBracket.rl .connector div.connector.highlightLoser {
  border-color: #ccc
}

div.jQBracket.rl .connector.brackethighlight,
div.jQBracket.rl .connector div.connector.brackethighlight {
  border-color: #0c0
}

div.jQBracket.rl .bubble {
  left: -35px
}

div.jQBracket.rl .bubble.third {
  background-color: #963;
  color: #310
}

div.jQBracket.rl .bubble.fourth {
  background-color: #678;
  color: #ccd
}

div.jQBracket.rl .bubble:after {
  left: auto;
  right: -5px;
  border-left: 5px solid transparent;
  border-right: 0
}

div.jQBracket.rl .bubble.third:after {
  border-right: 0;
  border-left: 6px solid #963
}

div.jQBracket.rl .bubble.fourth:after {
  border-right: 0;
  border-left: 6px solid #678
}

div.jQBracket.rl .highlightWinner .bubble:after {
  border-left-color: #da0
}

div.jQBracket.rl .highlightLoser .bubble:after {
  border-left-color: #ccc
}