/*A lot of messing with zorders compared wuth v016... analysis board, etc. will need to be retested*/

body {
    overflow-y: scroll;
}

.sm-gold {
    color: #FFD700;
}

.sm-silver {
    color: #C0C0C0;
}

.sm-bronze {
    color: #8c7853;
}

div .sm-scroll {
    height: 300px;
    background-color: silver;
    overflow: auto;
    border-style: inset;
    padding: 3px;
}

/* https://github.com/select2/select2/issues/4220 */
.select2-container {
    width: 100% !important;
}

/* Add colour to social icons */
i.fa-facebook-f {
    color: #3b5998;
}
i.fa-twitter {
    color: #55acee;
}
i.fa-linkedin {
    color: #0082ca;
}
i.fa-youtube {
    color: #ff0000;
}

/* Common board properties*/
/* https://medium.com/@tylerduprey_52451/a-perfect-square-with-css-964499440998 */
div.sm-board-sizer {
    width: calc(100vh - 250px);
    max-width: 100%;
    min-width: 20rem;
    margin: auto;
}

    div.sm-board-sizer.sm-board-small {
        width: min(500px, calc(100vh - 250px));
    }

div.sm-board-container {
    width: 100%;
    padding-top: 100%;
    position: relative;
}

@media (min-width: 768px) {
    div.sm-game-info-sizer {
        max-height: calc(100vh - 250px); /*don't limit size if mobile*/
    }
}

div.sm-game-info-sizer {
    min-height: 20rem;
}

    div.sm-game-info-sizer div.card {
        min-height: 0;
    }

        div.sm-game-info-sizer div.card div.card-body {
            overflow: auto;
        }

    /*slightly different when material tab is visible... can't scroll overflow*/
    div.sm-game-info-sizer.sm-material {
        min-height: 30rem;
    }

        div.sm-game-info-sizer.sm-material div.card div.card-body {
            overflow: unset;
        }

div.sm-square {
    height: 12.5%;
    width: 12.5%;
    background-size: cover;
    position: absolute;
}

div.sm-piece {
    height: 12.5%;
    width: 12.5%;
    background-size: cover;
    background-repeat: no-repeat;
    position: absolute !important; /*make important because JqueryUI messes with position*/
}

span.sm-move {
    cursor: pointer;
}

/*dark pieces*/
div.sm-board div.sm-rank-9 {
    visibility: hidden;
}

/*ranks*/
div.sm-board div.sm-rank-1 {
    top: 87.5%;
}

div.sm-board div.sm-rank-2 {
    top: 75%;
}

div.sm-board div.sm-rank-3 {
    top: 62.5%;
}

div.sm-board div.sm-rank-4 {
    top: 50%;
}

div.sm-board div.sm-rank-5 {
    top: 37.5%;
}

div.sm-board div.sm-rank-6 {
    top: 25%;
}

div.sm-board div.sm-rank-7 {
    top: 12.5%;
}

div.sm-board div.sm-rank-8 {
    top: 0;
}
/*files*/
div.sm-board div.sm-file-1 {
    left: 0;
}

div.sm-board div.sm-file-2 {
    left: 12.5%;
}

div.sm-board div.sm-file-3 {
    left: 25%;
}

div.sm-board div.sm-file-4 {
    left: 37.5%;
}

div.sm-board div.sm-file-5 {
    left: 50%;
}

div.sm-board div.sm-file-6 {
    left: 62.5%;
}

div.sm-board div.sm-file-7 {
    left: 75%;
}

div.sm-board div.sm-file-8 {
    left: 87.5%;
}

/*flipped*/
/*ranks*/
div.sm-board.sm-flipped div.sm-rank-1 {
    top: 0;
}

div.sm-board.sm-flipped div.sm-rank-2 {
    top: 12.5%;
}

div.sm-board.sm-flipped div.sm-rank-3 {
    top: 25%;
}

div.sm-board.sm-flipped div.sm-rank-4 {
    top: 37.5%;
}

div.sm-board.sm-flipped div.sm-rank-5 {
    top: 50%;
}

div.sm-board.sm-flipped div.sm-rank-6 {
    top: 62.5%;
}

div.sm-board.sm-flipped div.sm-rank-7 {
    top: 75%;
}

div.sm-board.sm-flipped div.sm-rank-8 {
    top: 87.5%;
}
/*files*/
div.sm-board.sm-flipped div.sm-file-1 {
    left: 87.5%;
}

div.sm-board.sm-flipped div.sm-file-2 {
    left: 75%;
}

div.sm-board.sm-flipped div.sm-file-3 {
    left: 62.5%;
}

div.sm-board.sm-flipped div.sm-file-4 {
    left: 50%;
}

div.sm-board.sm-flipped div.sm-file-5 {
    left: 37.5%;
}

div.sm-board.sm-flipped div.sm-file-6 {
    left: 25%;
}

div.sm-board.sm-flipped div.sm-file-7 {
    left: 12.5%;
}

div.sm-board.sm-flipped div.sm-file-8 {
    left: 0;
}
/*arrange persepective (for overlapping pieces)*/
div.sm-board div.sm-rank-1.sm-piece {
    z-index: 8;
}

div.sm-board div.sm-rank-2.sm-piece {
    z-index: 7;
}

div.sm-board div.sm-rank-3.sm-piece {
    z-index: 6;
}

div.sm-board div.sm-rank-4.sm-piece {
    z-index: 5;
}

div.sm-board div.sm-rank-5.sm-piece {
    z-index: 4;
}

div.sm-board div.sm-rank-6.sm-piece {
    z-index: 3;
}

div.sm-board div.sm-rank-7.sm-piece {
    z-index: 2;
}

div.sm-board div.sm-rank-8.sm-piece {
    z-index: 1;
}
/*flipped */
div.sm-board.sm-flipped div.sm-rank-1.sm-piece {
    z-index: 1;
}

div.sm-board.sm-flipped div.sm-rank-2.sm-piece {
    z-index: 2;
}

div.sm-board.sm-flipped div.sm-rank-3.sm-piece {
    z-index: 3;
}

div.sm-board.sm-flipped div.sm-rank-4.sm-piece {
    z-index: 4;
}

div.sm-board.sm-flipped div.sm-rank-5.sm-piece {
    z-index: 5;
}

div.sm-board.sm-flipped div.sm-rank-6.sm-piece {
    z-index: 6;
}

div.sm-board.sm-flipped div.sm-rank-7.sm-piece {
    z-index: 7;
}

div.sm-board.sm-flipped div.sm-rank-8.sm-piece {
    z-index: 8;
}
/*Coordinates */
div.sm-board.sm-coords:not(.sm-flipped) div.sm-square.sm-rank-1.sm-file-1:before {
    content: "1";
}

div.sm-board.sm-coords:not(.sm-flipped) div.sm-square.sm-rank-2.sm-file-1:before {
    content: "2";
}

div.sm-board.sm-coords:not(.sm-flipped) div.sm-square.sm-rank-3.sm-file-1:before {
    content: "3";
}

div.sm-board.sm-coords:not(.sm-flipped) div.sm-square.sm-rank-4.sm-file-1:before {
    content: "4";
}

div.sm-board.sm-coords:not(.sm-flipped) div.sm-square.sm-rank-5.sm-file-1:before {
    content: "5";
}

div.sm-board.sm-coords:not(.sm-flipped) div.sm-square.sm-rank-6.sm-file-1:before {
    content: "6";
}

div.sm-board.sm-coords:not(.sm-flipped) div.sm-square.sm-rank-7.sm-file-1:before {
    content: "7";
}

div.sm-board.sm-coords:not(.sm-flipped) div.sm-square.sm-rank-8.sm-file-1:before {
    content: "8";
}

div.sm-board.sm-coords:not(.sm-flipped) div.sm-square.sm-rank-1.sm-file-1:after {
    content: "a";
}

div.sm-board.sm-coords:not(.sm-flipped) div.sm-square.sm-rank-1.sm-file-2:after {
    content: "b";
}

div.sm-board.sm-coords:not(.sm-flipped) div.sm-square.sm-rank-1.sm-file-3:after {
    content: "c";
}

div.sm-board.sm-coords:not(.sm-flipped) div.sm-square.sm-rank-1.sm-file-4:after {
    content: "d";
}

div.sm-board.sm-coords:not(.sm-flipped) div.sm-square.sm-rank-1.sm-file-5:after {
    content: "e";
}

div.sm-board.sm-coords:not(.sm-flipped) div.sm-square.sm-rank-1.sm-file-6:after {
    content: "f";
}

div.sm-board.sm-coords:not(.sm-flipped) div.sm-square.sm-rank-1.sm-file-7:after {
    content: "g";
}

div.sm-board.sm-coords:not(.sm-flipped) div.sm-square.sm-rank-1.sm-file-8:after {
    content: "h";
}

/*Flipped coordinates*/
div.sm-board.sm-coords.sm-flipped div.sm-square.sm-rank-1.sm-file-8:before {
    content: "1";
}

div.sm-board.sm-coords.sm-flipped div.sm-square.sm-rank-2.sm-file-8:before {
    content: "2";
}

div.sm-board.sm-coords.sm-flipped div.sm-square.sm-rank-3.sm-file-8:before {
    content: "3";
}

div.sm-board.sm-coords.sm-flipped div.sm-square.sm-rank-4.sm-file-8:before {
    content: "4";
}

div.sm-board.sm-coords.sm-flipped div.sm-square.sm-rank-5.sm-file-8:before {
    content: "5";
}

div.sm-board.sm-coords.sm-flipped div.sm-square.sm-rank-6.sm-file-8:before {
    content: "6";
}

div.sm-board.sm-coords.sm-flipped div.sm-square.sm-rank-7.sm-file-8:before {
    content: "7";
}

div.sm-board.sm-coords.sm-flipped div.sm-square.sm-rank-8.sm-file-8:before {
    content: "8";
}

div.sm-board.sm-coords.sm-flipped div.sm-square.sm-rank-8.sm-file-1:after {
    content: "a";
}

div.sm-board.sm-coords.sm-flipped div.sm-square.sm-rank-8.sm-file-2:after {
    content: "b";
}

div.sm-board.sm-coords.sm-flipped div.sm-square.sm-rank-8.sm-file-3:after {
    content: "c";
}

div.sm-board.sm-coords.sm-flipped div.sm-square.sm-rank-8.sm-file-4:after {
    content: "d";
}

div.sm-board.sm-coords.sm-flipped div.sm-square.sm-rank-8.sm-file-5:after {
    content: "e";
}

div.sm-board.sm-coords.sm-flipped div.sm-square.sm-rank-8.sm-file-6:after {
    content: "f";
}

div.sm-board.sm-coords.sm-flipped div.sm-square.sm-rank-8.sm-file-7:after {
    content: "g";
}

div.sm-board.sm-coords.sm-flipped div.sm-square.sm-rank-8.sm-file-8:after {
    content: "h";
}

/*Captures*/
div.sm-captures {
    position: relative;
    width: 100%;
    padding-top: 32%;
}

    div.sm-captures div.sm-piece.sm-capture-placeholder {
        opacity: 0.05;
    }

    div.sm-captures div.sm-piece {
        height: 50%;
        width: 16%;
    }

    div.sm-captures div.sm-wp, div.sm-captures div.sm-wn, div.sm-captures div.sm-wb, div.sm-captures div.sm-wr, div.sm-captures div.sm-wq, div.sm-captures div.sm-wk {
        top: 0;
    }

    div.sm-captures div.sm-bp, div.sm-captures div.sm-bn, div.sm-captures div.sm-bb, div.sm-captures div.sm-br, div.sm-captures div.sm-bq, div.sm-captures div.sm-bk {
        top: 50%;
    }

    div.sm-captures div.sm-wp, div.sm-captures div.sm-bp {
        left: 0;
    }

    div.sm-captures div.sm-wn, div.sm-captures div.sm-bn {
        left: 16%;
    }

    div.sm-captures div.sm-wb, div.sm-captures div.sm-bb {
        left: 32%;
    }

    div.sm-captures div.sm-wr, div.sm-captures div.sm-br {
        left: 48%;
    }

    div.sm-captures div.sm-wq, div.sm-captures div.sm-bq {
        left: 64%;
    }

    div.sm-captures div.sm-wk, div.sm-captures div.sm-bk {
        left: 80%;
    }

    div.sm-captures div.sm-duck {
        visibility: hidden;
    }

    div.sm-captures div.badge[data-captures="0"], div.sm-captures div.badge[data-captures="1"] {
        display: none;
    }

    div.sm-captures div.sm-piece-count-wp, div.sm-captures div.sm-piece-count-wn, div.sm-captures div.sm-piece-count-wb, div.sm-captures div.sm-piece-count-wr, div.sm-captures div.sm-piece-count-wq, div.sm-captures div.sm-piece-count-wk {
        position: absolute;
        bottom: 53%;
        z-index: 5;
    }

    div.sm-captures div.sm-piece-count-bp, div.sm-captures div.sm-piece-count-bn, div.sm-captures div.sm-piece-count-bb, div.sm-captures div.sm-piece-count-br, div.sm-captures div.sm-piece-count-bq, div.sm-captures div.sm-piece-count-bk {
        position: absolute;
        bottom: 3%;
        z-index: 5;
    }

    div.sm-captures div.sm-piece-count-wp, div.sm-captures div.sm-piece-count-bp {
        right: 84%;
    }

    div.sm-captures div.sm-piece-count-wn, div.sm-captures div.sm-piece-count-bn {
        right: 68%;
    }

    div.sm-captures div.sm-piece-count-wb, div.sm-captures div.sm-piece-count-bb {
        right: 52%;
    }

    div.sm-captures div.sm-piece-count-wr, div.sm-captures div.sm-piece-count-br {
        right: 36%;
    }

    div.sm-captures div.sm-piece-count-wq, div.sm-captures div.sm-piece-count-bq {
        right: 20%;
    }

    div.sm-captures div.sm-piece-count-wk, div.sm-captures div.sm-piece-count-bk {
        right: 4%;
    }

/*Promote*/
.sm-promote {
    position: relative;
    width: 100%;
    padding-top: 16%;
}

    .sm-promote div.sm-piece {
        position: relative;
        height: 100%;
        width: 16%;
        top: 0;
    }

    .sm-promote div.sm-wq, .sm-promote div.sm-bq {
        left: 0%;
    }

    .sm-promote div.sm-wr, .sm-promote div.sm-br {
        left: 16%;
    }

    .sm-promote div.sm-wb, .sm-promote div.sm-bb {
        left: 32%;
    }

    .sm-promote div.sm-wn, .sm-promote div.sm-bn {
        left: 48%;
    }

    .sm-promote div.sm-wk, .sm-promote div.sm-bk {
        left: 64%;
    }

    .sm-promote div.sm-wp, .sm-promote div.sm-bp {
        left: 64%; /*don't have king and pawn together, so can take the same space*/
    }

    .sm-promote a.disabled div.sm-piece {
        opacity: 0.1;
        cursor: default;
    }

/*Hide piece images on blindfold board*/
.sm-blindfold .sm-piece {
    background-image: unset !important;
}

/*Analysis Board*/
div.sm-analysis-board {
    z-index: 10;
    display: none;
}

/*Tournament crosstable*/
table.sm-crosstable {
    table-layout: fixed;
}

    table.sm-crosstable td, table.sm-crosstable th {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

/*CK Editor dark mode - https://devcodef1.com/news/1052299/ckeditor-5-with-bootstrap-5-3-dark-theme*/
[data-bs-theme="dark"] .ck-editor__editable {
    background-color: #212529 !important;
}