
.match-view {
    overflow: hidden;
}
.match-view .opponents {
}
.match-view p {
    margin:0;
    text-align: center;
}
.match-view .player {
    width: 40%;
}
.match-view .divider {
    width: 20%;
}
.match-view .score {
    font-size: 3rem;
    line-height: 1.00;
    font-family: monospace;
}
.match-view .vs {
    font-size: 1.5rem;
}
.match-view .special-notes {
    font-size: 0.8rem;
}
.match-view .win-rates .p1 {
    font-size: 2rem;
}
.match-view .tournament {
}
.match-view .name {
    line-height: 1.3;
}
.match-view .name .inline-flag {
    opacity:0.85;
}
.match-view.highlight-1 .player-1 .name a,
.match-view.highlight-2 .player-2 .name a {
    color: #505050 !important;
}
.match-view .footer {
    background: #f0f5fa;
}
.match-view .game-change {
    display: inline;
    border-radius: 0.2rem;
    padding: 0.08rem 0.15rem;
    margin: 0 0.1rem 0.1rem 0.1rem;
    border: 1px solid #d5d5d5;
}
.match-view.detailed .match-change {
    font-weight: bold;
}
.match-view .game-change {
}
.match-view .game-changes {
    padding: 0 0.15rem;
}
.match-view .game-changes-brace {
    border:1px solid #c0c0c0;
    border-bottom: 0;
    border-radius: 0.5rem 0.5rem 0 0;
    height: 0.3rem;
}
.match-view .brace > div {
    height: 0.6rem;
}
.match-view .brace > div:nth-of-type(1) {
    border-right:1px solid #c0c0c0;
}
.match-view .brace > div:nth-of-type(2) {
    border-left:2px solid #c0c0c0;
}
.match-view:not(:hover) .brace,
.match-view:not(:hover) .game-changes,
.match-view:not(:hover) .game-changes-brace {
    opacity: 0.8;
}

.match-view .footer p {
    font-size: 0.85rem;
}
.match-view.player-1-won .score-1,
.match-view.player-2-won .score-2 {
    color:#28a745 !important;
}
.match-view.player-1-won .score-2,
.match-view.player-2-won .score-1 {
    color:#dc3545 !important;
}
.match-view.nobody-won .score-2,
.match-view.nobody-won .score-1 {
    color: #2b43dc !important;
}

.match-view:not(.detailed) .detail {
    display: none !important;
}
.match-view.detailed .no-detail {
    display: none !important;
}
.match-view:not(:hover) .show-details {
    opacity:0.7;
}

/* Decrease font sizes on mobile */
@media (max-width: 576px) {

    .match-view .score {
        font-size: 1.6rem;
    }
    .match-view .vs {
        font-size: 1.5rem;
    }
    .match-view .win-rates .p1 {
        font-size: 2rem;
    }
    .match-view .name {
        font-size: 1.1rem;
    }
    .match-view .inline-flag {
    }
}