#match-detail-page-header {
  height: 120px;
}

#match-detail-page-header .two.wide.column {
  text-align: center;
}

#match-detail-map-name {
  margin-bottom: 0.2em;
}

#match-detail-mode {
  margin: 0;
}

#match-detail-date {
  font-size: 10pt;
  color: #FFF;
  margin-top: 0.5em;
}

#match-detail-file {
  font-size: 9pt;
  color: #FFF;
  position: absolute;
  width: 400%;
  bottom: 0;
}

#match-detail-victor {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

#match-detail-body {
  height: calc(100% - 120px);
}

#match-detail-body .tab.segment {
  height: 95%;
}

#match-detail-page-content .secondary.pointing.menu {
  border-top: 0;
  border-right: 0;
  border-left: 0;
}

#match-detail-draft {
  margin: 10px auto;
}

#match-detail-draft.hidden {
  display: none;
}

#match-detail-draft .draft-display-expanded {
  margin-top: 20px;
}

#match-detail-draft .images {
  margin-left: 40px;
  margin-top: 0.5rem!important;
}

#match-detail-draft .images .image {
  margin-right: 10px;
}

#match-detail-draft .blue-team-draft .image {
  margin-right: 15px;
}

#match-detail-draft .red-team-draft .image {
  margin-left: 15px;
}

#match-detail-draft .draft-display-expanded .image[ban-slot="blue-2"] {
  margin-left: 20px;
}

#match-detail-draft .draft-display-expanded .image[ban-slot="red-2"] {
  margin-right: 20px;  
}

#match-detail-draft .blue-team-draft.first .image[pick-slot="blue-1"],
#match-detail-draft .blue-team-draft.first .image[pick-slot="blue-3"] {
  margin-right: 35px;
}

#match-detail-draft .blue-team-draft.second .image[pick-slot="blue-2"],
#match-detail-draft .blue-team-draft.second .image[pick-slot="blue-4"] {
  margin-right: 35px;
}

#match-detail-draft .red-team-draft.first .image[pick-slot="red-1"],
#match-detail-draft .red-team-draft.first .image[pick-slot="red-3"] {
  margin-left: 35px;
}

#match-detail-draft .red-team-draft.second .image[pick-slot="red-2"],
#match-detail-draft .red-team-draft.second .image[pick-slot="red-4"] {
  margin-left: 35px;
}

#match-detail-draft .blue.image img {
  border: 2px solid #2185d0;
}

#match-detail-draft .red.image img {
  border: 2px solid #db2828;
}

#match-detail-draft .draft-display-expanded .red.rounded.image {
  float: right
}

#match-detail-summary tr.blue,
#print-window tr.blue,
#print-window th.blue,
#match-detail-talents tr.blue,
#match-detail-details th.blue,
#match-detail-body .floatThead-wrapper th.blue {
  background-color: #125080;
  -webkit-print-color-adjust: exact;
}

#match-detail-summary tr.red,
#print-window tr.red,
#print-window th.red,
#match-detail-talents tr.red,
#match-detail-details th.red,
#match-detail-body .floatThead-wrapper th.red {
  background-color: #8e0e0e;
  -webkit-print-color-adjust: exact;
}

#print-window tr.blue h4,
#print-window tr.red h4,
#print-window th.blue h4,
#print-window th.red h4,
#print-window th.blue h4 .sub.header,
#print-window th.red h4 .sub.header,
#print-window tr.blue h4 .sub.header,
#print-window tr.red h4 .sub.header,
#print-window tr.blue .statistic .value,
#print-window tr.red .statistic .value {
  color: #FFFFFF!important;
}

#print-window #match-detail-victor {
  font-size: 16pt!important;
}

#print-window tr .statistic .value {
  font-size: 14pt!important;
}

#match-detail-summary td h3 {
  font-size: 1.5rem;
}

#match-detail-body .match-detail-wrapper {
  height: calc(100% - 40px);
  overflow-y: auto;
  overflow-x: hidden;
}

#match-detail-details th.corner,
#match-detail-body .floatThead-wrapper th.corner {
  border: 0;
  background: #5d5d5d;
  border-radius: 0;
  box-shadow: 0px 0px 0 0px #fff;
  -webkit-box-shadow: 0px 0px 0 0px #FFF;
}

#match-detail-details td {
  border-left: 1px solid #FFF;
  font-size: 12pt;
}

#match-detail-body .floatThead-wrapper,
#match-detail-body .full-height {
  height: 100%;
}

#match-detail-talents .tiny.image,
.talent-build table .tiny.image {
  width: 50px;
  border: 2px solid #000;
}

#match-detail-talents .tiny.image:hover,
.talent-build table .tiny.image:hover {
  cursor: pointer;
  border-color: #FFF;
}

#player-hero-detail-stats table {
  width: 5000px;
}

.match-detail-summary-row td .image {
  margin: 0 auto;
}

#match-detail-chat .content .summary {
  color: #FFF;
}

#match-detail-chat .content .date {
  color: #ababab;
}

#match-detail-chat {
  height: calc(100% - 25px);
  overflow-y: auto;
}

#match-detail-red-xpb,
#match-detail-blue-xpb,
#match-detail-xp-soak,
#match-detail-time-per-tier {
  margin-top: 24px;
  /* width: 100%;
  height: 400px; */
}

.team-xp-graph-segment {
  height: 400px;
}

.has-team-xp-menu .team-xp-graph-segment {
  height: 390px;
}

#match-detail-summary canvas {
  margin-top: 24px;
}

#match-detail-team-members-container {
  height: 580px;
}

.match-detail-sub-graph-container {
  height: 250px;
}

#match-detail-timeline-wrapper {
  height: calc(100% - 60px);
  margin-top: 10px;
}

/* Timeline Styles */
#match-detail-timeline-wrapper .vis-timeline .vis-nested-group,
#match-detail-timeline-wrapper .vis-timeline {
  background-color: #1b1c1d;
}

#match-detail-timeline-wrapper .vis-text,
#match-detail-timeline-wrapper .vis-label {
  color: #FFF;
}

#match-detail-timeline-wrapper .vis-item {
  font-family: Lato,'Helvetica Neue',Arial,Helvetica,sans-serif;
}

#match-detail-timeline-wrapper .timeline-popup {
  cursor: pointer;
}

#match-detail-timeline-wrapper .vis-item-content {
  padding: 8px;
}

#match-detail-timeline-wrapper .vis-item.blue {
  background-color: #2185d0;
  border-color: #2185d0;
  color: #FFF;
}

#match-detail-timeline-wrapper .vis-item.red {
  background-color: #db2828;
  border-color: #db2828;
  color: #FFF;
}

#match-detail-timeline-wrapper .vis-selected {
  border-color: #FFC200!important;
  border: 2px solid;
}

#match-detail-timeline-wrapper .vis-item.vis-background {
  cursor: default;
  color: #FFF;
}

#match-detail-timeline-wrapper .vis-item.vis-background.blue.plus1 {
  background-color: rgba(33, 133, 208, 0.33);
}

#match-detail-timeline-wrapper .vis-item.vis-background.blue.plus2 {
  background-color: rgba(33, 133, 208, 0.66);
}

#match-detail-timeline-wrapper .vis-item.vis-background.red.plus1 {
  background-color: rgba(219, 40, 40, 0.33);
}

#match-detail-timeline-wrapper .vis-item.vis-background.red.plus2 {
  background-color: rgba(219, 40, 40, 0.66);
}

#match-detail-timeline-wrapper .vis-time-axis .vis-grid.vis-minor {
  border-color: rgba(229, 229, 229, 0.25);
}

#match-detail-timeline-wrapper .vis-item.vis-background.blue.hero-0,
#match-detail-timeline-wrapper .vis-item.vis-background.red.hero-0
{
  background-color: rgba(0, 0, 0, 0);
}

#match-detail-timeline-wrapper .vis-item.vis-background.blue.hero-1 {
  background-color: rgba(33, 133, 208, 0.2);
}

#match-detail-timeline-wrapper .vis-item.vis-background.blue.hero-2 {
  background-color: rgba(33, 133, 208, 0.4);
}

#match-detail-timeline-wrapper .vis-item.vis-background.blue.hero-3 {
  background-color: rgba(33, 133, 208, 0.6);
}

#match-detail-timeline-wrapper .vis-item.vis-background.blue.hero-4 {
  background-color: rgba(33, 133, 208, 0.8);
}

#match-detail-timeline-wrapper .vis-item.vis-background.blue.hero-5 {
  background-color: rgba(33, 133, 208, 1);
}

#match-detail-timeline-wrapper .vis-item.vis-background.red.hero-1 {
  background-color: rgba(219, 40, 40, 0.2);
}

#match-detail-timeline-wrapper .vis-item.vis-background.red.hero-2 {
  background-color: rgba(219, 40, 40, 0.4);
}

#match-detail-timeline-wrapper .vis-item.vis-background.red.hero-3 {
  background-color: rgba(219, 40, 40, 0.6);
}

#match-detail-timeline-wrapper .vis-item.vis-background.red.hero-4 {
  background-color: rgba(219, 40, 40, 0.8);
}

#match-detail-timeline-wrapper .vis-item.vis-background.red.hero-5 {
  background-color: rgba(219, 40, 40, 1);
}

#match-detail-timeline-wrapper .vis-item.merc-unit,
#match-detail-timeline-wrapper .vis-item.temple-shot {
  font-size: 9pt;
}

#match-detail-timeline-wrapper .vis-item.temple-shot .vis-item-content,
#match-detail-timeline-wrapper .vis-item.merc-unit .vis-item-content {
  padding: 2px;
}

.ui.header.second {
  margin-top: 0;
}

#print-window .label {
  -webkit-print-color-adjust: exact;
}

#print-window #match-detail-draft .images {
  margin-left: 0;
}

#print-window .match-detail-talents-row img.centered.tiny.rounded.image {
  width: 50px!important;
  height: auto;
}

#print-window .page {
  break-inside: avoid;
}

.match-detail-team-names .blue-team,
.match-detail-team-names .red-team {
  text-align: center;
}

.match-detail-team-names .vs {
  text-align: center;
  font-size: 25px;
  color: #FFF;
}