.layout-container {
    display: flex;
    justify-content: center;
    height: 50%;
}

.match-container {
    display: flex;
    align-items: center;
    flex-flow: column;
}

.round {display: flex; flex-flow: column; width: 20%;}
.round-label {text-align: center;}


.view-match{background-color: lightslategray; text-align: center; border-radius: 6px; width: 100%;}

.red-player {display: flex; background-color: #CF1F28; width: 100%; appearance: none; outline: none; border: none; font-size: small;}
.red-player-details {width: 75%; text-align: center; align-self: center; color: white;}
.red-player-score {width: 25%; text-align: center; align-self: center; color: white; font-size: small; font-weight: bold;}

.white-player {display: flex; background-color: #DDDFDF; width: 100%; appearance: none; outline: none; border: none; font-size: small;}
.white-player-details {width: 75%;text-align: center; align-self: center; color: black; }
.white-player-score {width: 25%;text-align: center; align-self: center; color: black; font-size: small; font-weight: bold;}

.matches {
    display: flex;
    flex-flow: column;
    justify-content: center;
    height: 100%;
    gap: 1rem;
}

.match-number {
    align-self: center;
    font-size: x-small;
    font-family: monospace, monospace;
}

.match-details {
    border-style: ridge;
    border-color: gray;
    background-color: lightgray;
    width: 10%;
    text-align: center;
    align-content: center;
}

.player-details {
    border-style: ridge;
    border-color: gray;
    width: 90%;
}

.match {
    width: 100%;
    display: flex;
}

.match:hover {
    color: blue;
}

.match-disabled {
    width: 100%;
    display: flex;    
}

.match-disabled .player-details {color:rgb(122, 122, 122); border-color: lightgrey;}
.match-disabled .match-details {color:rgb(122, 122, 122); border-color: lightgrey;}

.match-highlight {
    width: 100%;
    display: flex;    
}

.match-highlight .player-details {color:rgb(122, 122, 122); border-color: red; border-style: ridge; border-width: 0.5rem;}
.match-highlight .match-details {color:black; border-color: red; border-style: ridge; border-width: 0.5rem}

.match-ended {
    width: 100%;
    display: flex;    
}

.match-ended .player-details {color:#33658A; border-style: ridge; border-color: #33658A;}
.match-ended .match-details {color:#33658A; border-style: ridge; border-color: #33658A;}

.match-hack {
    width: 100%;
    text-decoration: none;
    color: unset;
}

.matach-hack:hover {
    border-style: dashed;
    border-width: 1px;
    border-color: #868eff;
}

.match-separator-container{background: linear-gradient(#CF1F28 50%, #DDDFDF 50%);}

.match-separator {
    border-style: dashed;
    border-width: 1px;
    width: 99%;
}