#match-page-table {
  height: calc(100% - 20px);
}

#matches-page-content .match-navigation {
  width: 100%;
  height: 70px;
  padding-top: 10px;
  background-color: #1b1c1d;
}

#matches-page-content .match-navigation .statistics {
  margin-left: 0;
  float: left;
}

#match-list-page-menu {
  float: right;
  margin-right: 10px;
}

#match-list {
  width: 100%;
}

#match-list .middle-align {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

#match-list .no-bottom-pad {
  padding-bottom: 0 !important;
}

#match-list .no-right-pad {
  padding-right: 0 !important;
}

#match-list .no-left-pad {
  padding-left: 0 !important;
}

#matches-page-header {
  height: 65px;
  display: block;
}

#match-list .statistics {
  float: left;
  margin-right: 0px;
}

#match-list .match-summary {
  cursor: pointer;
  height: 170px;
  width: 99%;
  margin: 0 auto;
}

#match-list .match-summary .match-basic-info {
  height: 50px;
  margin-bottom: 2px;
}

#match-list td {
  background-size: cover;
  position: relative;
}

.bg-dimmer {
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: 0;
  left: 0;
  top: 0;
  background: rgba(0, 0, 0, 0.8);
}

#match-list td:hover .bg-dimmer {
  background: rgba(32, 32, 32, 0.7);
}

#match-list td.Towers-of-Doom {
  background-image: url('../images/towers-of-doom-banner.png');
}

#match-list td.Battlefield-of-Eternity {
  background-image: url('../images/boe-banner.png');
}

#match-list td.Blackheart-s-Bay {
  background-image: url('../images/blackhearts-banner.png');
}

#match-list td.Cursed-Hollow {
  background-image: url('../images/cursed-banner.png');
}

#match-list td.Warhead-Junction {
  background-image: url('../images/warhead-banner.png');
}

#match-list td.Sky-Temple {
  background-image: url('../images/sky-temple-banner.png');
}

#match-list td.Tomb-of-the-Spider-Queen {
  background-image: url('../images/spider-banner.png');
}

#match-list td.Volskaya-Foundry {
  background-image: url('../images/volskaya-banner.png');
}

#match-list td.Dragon-Shire {
  background-image: url('../images/dragon-shire-banner.png');
}

#match-list td.Haunted-Mines {
  background-image: url('../images/haunted-mines-banner.png');
}

#match-list td.Garden-of-Terror {
  background-image: url('../images/garden-banner.png');
}

#match-list td.Braxis-Holdout {
  background-image: url('../images/braxis-banner.png');
}

#match-list td.Infernal-Shrines {
  background-image: url('../images/shrines-banner.png');
}

#match-list td.Hanamura,
#match-list td.Hanamura-Temple {
  background-image: url('../images/hanamura-banner.png');
}

#match-list td.Alterac-Pass {
  background-image: url('../images/alterac-banner.png');
}

#match-list .match-map-name {
  margin-bottom: 0.1em;
}

#match-list .match-mode {
  text-align: right;
}

#match-list .match-mode h3 {
  margin-bottom: 0.1em;
}

#matches-page-content .match-wrapper {
  height: calc(100% - 70px);
  overflow-y: auto;
  overflow-x: hidden;
}

#matches-page-content .match-table-wrapper {
  height: calc(100% - 20px);
}

#match-list .match-date {
  font-size: 9pt;
  text-align: right;
  margin-top: -8px;
}

#match-list .match-team-winner {
  height: 100%;
  display: flex;
  align-items: flex-end;
}

#match-list .match-team-winner h3 {
  margin: 0 auto;
}

#match-list .blue-bans .image,
#match-list .red-bans .image {
  filter: brightness(60%);
}

#match-list .match-summary .match-details {
  margin-top: 0;
}

#match-list .ui.match-details.grid > .column:not(.row) {
  padding: 0.5rem;
}

#match-list .match-details .image {
  max-width: 70px;
  max-height: 70px;
  width: 100%;
  height: auto;
}

#match-list .match-hero-icon {
  width: 18%;
  height: 70%;
  margin: 0 2px;
}

#match-list .match-summary .match-details .blue-hero.image {
  border: 3px solid #2185d0;
}

#match-list .swap.match-summary .match-details .blue-hero.image {
  border-color: #db2828;
}

#match-list .match-summary .match-details .red-hero.image {
  border: 3px solid #db2828;
  float: right;
}

#match-list .swap.match-summary .match-details .red-hero.image {
  border-color: #2185d0;
}

#match-list .red-team-nameplate {
  position: absolute;
  width: 400px;
  left: -415px;
  text-align: right;
  bottom: 0px;
  color: #db2828;
  font-size: 12pt;
}

#match-list .swap .red-team-nameplate {
  color: #2185d0;
}

#match-list .blue-team-nameplate {
  position: absolute;
  width: 400px;
  right: -415px;
  text-align: left;
  bottom: 0px;
  color: #2185d0;
  font-size: 12pt;
}

#match-list .swap .blue-team-nameplate {
  color: #db2828;
}

#match-list .match-summary .match-details .focus-player.image {
  border: 3px solid #ffd400 !important;
}

#match-list .match-center-stats .blue {
  color: #2185d0;
  text-align: left;
}

#match-list .swap .match-center-stats .blue {
  color: #db2828;
}

#match-list .match-center-stats .red {
  color: #db2828;
  text-align: right;
}

#match-list .swap .match-center-stats .red {
  color: #2185d0;
}

#match-list .divider .swapped {
  display: none;
}

#match-list .swap .divider .default {
  display: none;
}

#match-list .swap .divider .swapped {
  display: block;
}

#match-list .match-center-stats .match-game-length {
  font-size: 16pt;
  text-align: center;
}

#match-list .match-center-stats .match-takedown-score {
  font-size: 26pt;
}

#match-list .match-center-stats .match-levels {
  font-size: 12pt;
}

#match-search-segment {
  height: calc(100% - 20px);
  overflow-y: auto;
}

#match-search-team {
  width: calc(100% - 47px);
  display: inline-block;
  margin-right: 0;
}

#search-hero-on-team {
  float: right;
}

.ui.toggle.checkbox.inverted input:focus:checked ~ label,
.ui.toggle.checkbox.inverted input:checked ~ label,
.ui.toggle.checkbox.inverted label,
.ui.toggle.checkbox.inverted.checked label {
  color: #fff !important;
}

.match-filter-popup-wrapper {
  width: 35vw;
  height: 50vh;
  min-width: 500px;
  overflow-y: auto;
  padding: 5px;
  overflow-x: hidden;
  min-height: 300px;
}

.red-fp,
.blue-fp {
  margin-top: 5px;
}

.red-fp {
  float: right;
}

.blue-fp {
  float: left;
}
