@keyframes spin {
    0% {
        transform: rotateZ(0deg);
    }
    100% {
        transform: rotateZ(360deg);
    }
}

/* side buttons */

/*
#btn-analyze .icon {
    background-image: url('../img/icons/analyze.svg');
}
#btn-analyze.loading .icon {
    background-image: url('../img/icons/loading.svg');
    animation: spin 5s linear infinite;
}
*/

/*
#btn-new-game .icon {
    background-image: url('../img/icons/new-game.svg');
}
*/

/*
#btn-resign {
    background-image: url('../img/icons/resign.svg');
}
*/

#btn-settings {
    background-image: url('../img/icons/settings.svg');
}

/* main styles */

.buttons > button {
    background-color: #ffffff;
}

.board-area {
    display: flex;
    display: -webkit-flex;
    flex-direction: row;
    -webkit-flex-direction: row;
}

.chess-area {
    display: flex;
    display: -webkit-flex;
    justify-content: space-around;
    -webkit-justify-content: space-around;
    width: 100%;
    max-width: 810px;
    margin: 0 auto;
}

.chess-area .board-table {
    /*
    display: flex;
    display: -webkit-flex;
    */  
    width: 100%;
    max-width: 480px;

}
.chess-area .board-table .board {
    width: 98%;
    margin: 9px 9px 9px 9px;
}
.chess-area .board-table .board.locked {
    position: relative;
    z-index: -1;
}

.chess-area .board-table .controls {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin: 15px 0 0 0;
    font-family: Arial;
    font-size: 12px;
    text-align: center;
    color: #ffffff;
}

.chess-area .board-table .controls .buttons {
    display: flex;
}

.chess-area .board-table .controls .messages {
    width: 100%;
    text-align: right;
}

@media (max-width: 810px) {
    .chess-area {
        align-items: center;
        -webkit-align-items: center;
        flex-direction: column;
        -webkit-flex-direction: column;
        width: auto;
    }

    .chess-area .board-table {
        /* display: flex; */
        /* display: -webkit-flex; */
        flex-direction: column;
        -webkti-flex-direction: column;
        justify-content: center;
        -webkit-justify-content: center;
        align-items: center;
        -webkit-align-items: center;
    }

    .chess-area .board-table .controls .messages {
        width: 100%;
    }

    .chess-area .board-table .controls .status {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-grow: 1;
        font-size: 120%;
        font-weight: bold;
        color: #696868;
    }
}


@media (max-width: 768px) {
    .chess-area .board-table .controls .buttons {
        justify-content: space-between;
    }
    .chess-area .board-table .controls {
        flex-direction: column-reverse;
    }
    .chess-area .board-table .chess-menu {
        flex-direction: column-reverse;
    }
    .chess-area .board-table .controls .status {
        margin: 0 0 10px 0;
    }
}


.hidden {
    display: none !important;
}

.chess-log {
    width: 100%;
    max-width: 780px;
    margin: 30px auto 40px auto;
    font: normal 12px/18px Arial;
}

/*
#chesstop{
    height:30px;
    display:flex;
    justify-content:space-between;
    position:relative;
    z-index:100;
    max-width:1800px;
    margin:0 auto;
    -webkit-user-select:none;
    -moz-user-select:none;
    user-select:none;
    --dropdown-top: 20px
}


#chessnav section{
    position:relative;
    height:20px;
}
#chessnav section>a{
    color:#5e5e5e;
    text-shadow:0 1px 0 #fff;
    display:block;
    height:var(--nav-section);
    line-height:20px;
    padding:0 0.7rem;
    text-transform:uppercase;
    border-left:2px solid transparent
}

#chessnav div{
    visibility:hidden;
    max-height:inherit;
    position:absolute;
    left:0;
    background:#fff;
    min-width:10rem;
    box-shadow:2px 5px 6px rgba(0,0,0,0.3);
    border-radius:0 3px 3px 3px;
    border-left:2px solid #1b78d0
}

#chessnav div a.saveMenu {
    display:block;
    padding:0.6rem 0.7rem;
    color:#4d4d4d;
    text-align: left;
}

#chessnav div a.saveMenu:hover{
    background:#1b78d0;
    color:#fff
}


#chessnav div a.topLoadMenu{
    display:block;
    padding:0.6rem 0.7rem;
    background:#1b78d0;
    color:#fff
}

#chessnav div a.loadMenu{
    display:block;
    padding:0.6rem 0.7rem;
    color:#4d4d4d;
    text-align: left;
}

#chessnav div a.loadMenu:hover{
    background:#3b98f0;
    color:#fff
}
*/

/*
#topnav div a:hover::after{
    color:#fff
}
*/

/*
#chessnav div a:first-child{
    border-radius:0 3px 0 0
}
#chessnav div a:last-child{
    border-radius:0 0 3px 1px
}
#chessnav.blind div{
    display:block;
    margin-left:-9000px
}
#chessnav.hover section:hover>a,#chessnav section:active>a{
    height:var(--nav-section-hover);
    background:#fff;
    color:#4d4d4d;
    border-color:#1b78d0
}
#chessnav.hover section:hover div,#chessnav section:active div{
    visibility:visible;
    max-height:none
}

#chessnav {
    display:flex;
    flex-flow:row wrap;
    align-items:center
}
*/