body {
    background: #b1b1b1;
}

img {
    max-width: 97%;
    max-height: 97%;
    width: auto;
    height: auto;
}

.container {
    margin-top: 20px;
    margin-left: 20px;
    max-width: 1060px;
    background: #829eae;
    display: block;
}

.header {
    height: 100px;
    border-top: 3px solid black;
    border-left: 3px solid black;
    border-right: 3px solid black;
    text-align: center;
    line-height: 13px;
}

.new-game {
    height: 100%;
    width: 450px;
    border-right: 3px solid black;
    float: left;
    display: normal;
}

.created-game {
    height: 100%;
    width: 450px;
    border-right: 3px solid black;
    display: normal;
    float: left;
    display: none;
}

.rules {
    display: normal;
    float: left;
    height: 100%;
    width: 601px;
}

.rules-fieldset {
    border: none;
    margin: 0;
    padding: 5px;
    flex-grow: 1;
}

.board {
    border: 3px solid black;
    height: 630px;
    width: 630px;
    background: #829eae;
    font-size: 14px;
    display: inline-block;
}

.chessboard {
    width: 100%;
    max-height: 600px;
    height: 95%;
}

.row-board-top {
    overflow: auto;
    height: 2.5%;
    width: 100%;
}

.row-board-bottom {
    overflow: auto;
    height: 2.5%;
    width: 100%;
}

.row-chessboard {
    overflow: auto;
    height: 12.5%;
    width: 100%;
}

.col {
    float: left;
    height: 100%;
}

.col-1 {
    width: 11.875%;
}

.col-board-edges-sides {
    text-align: center;
    width: 2.5%;
}

.col-board-edges {
    text-align: center;
    width: 11.875%;
}

.fieldset-label {
    font-size: medium;
}
.col-board-sides {
    text-align: center;
    width: 2.5%;
    line-height: 520%;
}

.black {
    background: black;
    color: white;
}

.white {
    background: white;
    color: black;
}

.new-game-fieldset {
    border: none;
    margin: 0;
    padding: 10px;
    line-height: 10px;
    flex-grow: 1;
}

.figure {
    display: none;
}

.fieldset-header {
    font-size: large;
    font-weight: 800;
}

.fieldset {
    border: none;
}

.side-menu {
    background: #829eae;
    height: 630px;
    width: 421px;
    position: absolute;
    top: 123px;
    border-top: 3px solid black;
    border-bottom: 3px solid black;
    border-right: 3px solid black;
    display: inline-block;
}

.legend-container {
    height: 188px;
    border-bottom: 3px solid black;
}

.legend {
    margin-top: 10px;
    margin-left: 80px;
    height: 168px;
    width: 255px;
    border: 3px solid white;
    background: black;
    text-align: center;
    color: white;
}

.legend-row-top {
    height: 16px;
    width: 100%;
    border-bottom: 1px solid white;
    background: #829eae;
    color: black;
}

.legend-row {
    height: 75px;
    width: 100%;
    border-bottom: 1px solid white;
}

.legend-col {
    height: 100%;
    width: 75px;
    border-right: 1px solid white;
    float: left;
}

.legend-col-right {
    height: 100%;
    width: 103px;
    float: left;
    background: #829eae;
    color: black;
}

.is-ai-player {
    border: none;
}

.moves-history-container {
    border-right: 3px solid black;
    height: 430px;
    width: 200px;
    float: left;
}

.moves-history {
    margin-top: 10px;
    margin-left: 10px;
    height: 404px;
    width: 174px;
    border: 3px solid black;
}

.moves-history-header {
    border-bottom: 3px solid black;
    height: 16px;
    text-align: center;
}

.moves-history-list {
    height: 365px;
    border: none;
    overflow-y: auto;
    text-align: center;
    white-space: pre-line;
}

.status-container {
    height: 430px;
    width: 218px;
    float: left;
    font-weight: 600;
    text-align: center;
}

.status {
    height: 75px;
}

.next-move {
    border-bottom: 3px solid black;
    height: 80px;
    display: none;
}

.empty-line {
    height: 8px;
}

.rules-details-col {
    float: left;
    width: auto;
    text-align: left;
    margin-left: 2px;
}

.game-progress-details {
    width: 208px;
    height: 258px;
    float: left;
    padding: 5px;
    display: none;
}

.game-progress-header {
    font-size: large;
    font-weight: 800;
    margin: 5px;
}

.game-finished {
    text-align: center;
}

.game-finished-header {
    font-size: x-large;
    font-weight: 900;
}

.always-hidden {
    display: none;
}