body {
  /*background-color: darkgrey !important;*/
  background-color: transparent !important;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  background-image: url(/assets/battles/clash.jpeg);
  background-repeat: no-repeat;
  background-size: 100%;

}
.flex-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  align-content: stretch;
  width: 100%;
}

.flex-items:nth-child(1) {
  display: block;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: 8.9%;
  align-self: auto;
  order: 0;
}

.flex-items:nth-child(2) {
  display: block;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: 8.9%;
  align-self: auto;
  order: 1;
}

.flex-items:nth-child(3) {
  display: block;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: 8.9%;
  align-self: auto;
  order: 2;
}

.flex-items:nth-child(4) {
  display: block;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: 8.9%;
  align-self: auto;
  order: 3;
}

.flex-items:nth-child(5) {
  display: block;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: 8.9%;
  align-self: auto;
  order: 4;
}

.flex-items:nth-child(6) {
  display: block;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: 10%;
  align-self: auto;
  order: 5;
}

.flex-items:nth-child(7) {
  display: block;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: 8.9%;
  align-self: auto;
  order: 6;
}

.flex-items:nth-child(8) {
  display: block;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: 8.9%;
  align-self: auto;
  order: 7;
}

.flex-items:nth-child(9) {
  display: block;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: 8.9%;
  align-self: auto;
  order: 8;
}

.flex-items:nth-child(10) {
  display: block;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: 8.9%;
  align-self: auto;
  order: 9;
}

.flex-items:nth-child(11) {
  display: block;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: 8.9%;
  align-self: auto;
  order: 10;
}
.col-details {
  font-weight: bold;
  color: #ff237e !important;
  font-variant: small-caps;
  text-align: center;
}

.col-details-span {
  font-weight: bold;
  color: teal;
  font-variant: small-caps;
}

.list-group-item {
  padding: 0 !important;
  padding-left: 2px !important;
  border: none !important;  
  font-size: 14px !important;
}

.list-group {
  padding: 5px;
}

.top64 {
  padding-top: 7px;
  padding-bottom: 7px;
  font-variant: normal;
  font-weight: normal;
  text-align: left;
}

.top32 {
  padding-top: 40px;
  padding-bottom: 30px;
  font-variant: normal;
  font-weight: normal;
  text-align: left;
}

.top16 {
  padding-top: 95px;
  padding-bottom: 90px;
  font-variant: normal;
  font-weight: normal;
  text-align: left;
}

.top8 {
  padding-top: 220px;
  padding-bottom: 210px;
  font-variant: normal;
  font-weight: normal;
  text-align: left;
}

.top4 {
  padding-top: 460px;
  font-variant: normal;
  font-weight: normal;
  text-align: left;
}
.finales {
  padding-top: 445px;
  font-variant: normal;
  font-weight: normal;
  text-align: center;
}

.finales-B {
  padding-top: 50px;
  font-variant: normal;
  font-weight: normal;
  text-align: center;
}

.li-dark {
  background-color: grey !important;
}

.li-bright {
  background-color: lightgrey !important;
}