/************************************************************
   Global configuration of colors
 ************************************************************

 *-----------------------------------------------------------
   Background color and text
 *-----------------------------------------------------------
   --bg-color
   --bg-color-text

 * A variant of background color used for text-areas, input fields and dropdown-menus
   --bg-color-light
   --bg-color-light-text

 * Lighter text color used for games and move ordinal numbers
   --bg-color-text-light

 * Colors when hovering move or game elements for selection
   --bg-color-hover
   --bg-color-hover-text

 * Color of active (selected) game and move
   --bg-color-active

 *------------------------------------------------------------
   Main color (for buttons, background of player names and more)
 *------------------------------------------------------------
   --main-color-bg
   --main-color-text

 * Color when hovering main-color elements
   --main-color-hover

 *------------------------------------------------------------
   Chess board colors
 *------------------------------------------------------------
   --white-square
   --black-square
   --highlight-white-sq
   --highlight-black-sq
 */

/* Light theme example preset */
:root {
    --bg-color: #eee;
    --bg-color-text: #111;
    --bg-color-light: #ddd;
    --bg-color-light-text: #111;
    --bg-color-text-light: #888;
    --bg-color-hover: #27c;
    --bg-color-hover-text: #eee;
    --bg-color-active: #cde;
    --main-color-bg: #315c63;
    --main-color-text: #fff;
    --main-color-hover: #801111ff;
    --main-color-border: #5C1111;
    --white-square: #f0d9b5;
    --black-square: #b58863;
    --highlight-white-sq: #cdd26a;
    --highlight-black-sq: #aaa23a;

}

/* Dark theme example preset */
[data-theme="dark"] {
    --bg-color: #111;
    --bg-color-text: #eee;
    --bg-color-light: #333;
    --bg-color-light-text: #eee;
    --bg-color-text-light: #888;
    --bg-color-hover: #3692e7;
    --bg-color-hover-text: #eee;
    --bg-color-active: #293a49;
    --main-color-bg: #315c63;
    --main-color-text: #fff;
    --main-color-hover: #801111ff;
    --main-color-border: #5C1111;
    --white-square: #f0d9b5;
    --black-square: #b58863;
    --highlight-white-sq: #cdd26a;
    --highlight-black-sq: #aaa23a;
    --bg-active-clock: #3692e7;
}

/************************************************************
   General
 ************************************************************/
.h-65 {
    height: 65%;
}

body {
    background-color: var(--bg-color);
    color: var(--bg-color-text);
    font-family: Verdana, Arial, Helvetica, sans-serif;
    text-align: center;
}

.banner {
    border-radius: 0 0 .25rem .25rem;
}

.banner h3 {
    display: inline-block;
    vertical-align: middle;
    padding: 0 1rem;
}

.banner img {
    height: 100px;
    padding: .5rem;
}

.footer {
    background-color: var(--main-color-bg);
    border-radius: .25rem;
}

.footer .badge-custom, .footer .btn-custom {
    border-bottom: 0;
}

#FooterRow {
    margin-left: 2vw;
    margin-right: 2vw;
}

input::placeholder {
    color: var(--bg-color-light-text);
}

/* In order to remove flashing (transition) at startup time */
.btn, .custom-select {
    transition: none;
}

/* Normal colors */
.banner, .badge-custom, .badge-custom[href]:focus, .btn-custom,
.btn-custom:hover:focus /* mobile phone variant */ {
    background-color: var(--main-color-bg);
    color: var(--main-color-text);
}

/* Border for custom buttons */
.badge-custom, .btn-custom {
    border-bottom: 2.5px solid var(--main-color-border);
    width: 100%;
}

/* Hover colors */
.badge-custom[href]:hover, .btn-custom:hover {
    background-color: var(--main-color-hover);
    color: var(--main-color-text)
}

/* Inverted colors */
.badge-custom:not(:disabled):not(.disabled):active,
.btn-custom:not(:disabled):not(.disabled):active,
.show>.btn-custom.dropdown-toggle {
    background-color: var(--main-color-text);
    color: var(--main-color-bg);
    border-color: transparent;
}

.btn-custom:not(:disabled):not(.disabled):active:focus,
.show>.btn-custom.dropdown-toggle:focus {
    box-shadow: none;
    border-color: transparent;
}

.btn-custom:focus {
    box-shadow: none;
}

a {
    color: inherit;
}

.dropdown-menu {
    background-color: var(--bg-color-light);
    color: var(--bg-color-light-text);
}

.dropdown-menu > .dropdown-item:hover {
    background-color: var(--bg-color);
    color: var(--bg-color-light-text);
}

.dropdown-item:active {
    background-color: var(--bg-color-light);;
}

.dropdown-item {
    color: var(--bg-color-light-text);
    height: 30px;
    padding: 0.25rem 0.75rem;
}

.dropdown-item > i {
    font-size: 22px;
    vertical-align: middle;
}

.dropdownItemBtn {
    height: 100%;
    width: 30px;
    padding: 0;
    font-size: 12px;
}

#AutoplayDelaySpan, #BoardSizeSpan {
    width: 2em;
}

textarea, input {
    background-color: var(--bg-color-light);
    color: var(--bg-color-light-text);
    font-family: monospace;
    font-size: 13px;
    border: 0;
    border-radius: .25rem;
}

textarea:focus, input:focus {
    outline: none;
    border: 0;
}

textarea::-webkit-resizer {
    border-width: 8px;
    border-style: solid;
    border-color: var(--bg-color-light) var(--main-color-bg) var(--main-color-bg) var(--bg-color-light);
}

.h-40p {
    height: 40px;
}

.beta {
    font-size: 85%;
    color: gray;
}

.fa-caret-down, .fa-search {
    color: var(--bg-color-text);
}

::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 12px rgba(200,200,200,1);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: var(--main-color-bg);
}

.close, .close:not(:disabled):not(.disabled):focus {
    color: var(--bg-color-text);
    border-radius: .25rem;
}

.close:hover, .close:not(:disabled):not(.disabled):hover {
    background-color: var(--main-color-hover);
    color: var(--bg-color-text);
}

.close:focus {
    outline: none;
}

.modal-content {
    background-color: var(--bg-color);
    color: var(--bg-color-text);
}

/* PGN text styles */
.highlightMove {
    background-color: var(--bg-color-active);
}

#GameText, #EngineVariationDiv {
    overflow-y: auto;
    font-family: "pgn4web ChessSansPiratf";
    font-size: 18px;
}

#GameSelectionDiv {
    text-align: left;
    overflow-y: auto;
}

/* Results on the right side of the game selection div */
#GameSelectionDiv > div > h6 ~ span {
    color: var(--bg-color-text);
    font-size: 0.9em;
    font-weight: 500;
}

#GameSelectionDiv > div, #GameText > span {
    background-color: var(--bg-color);
    color: var(--bg-color-text);
}

#GameSelectionDiv > div > span, span.move.notranslate {
    color: var(--bg-color-text-light);
}

#GameSideToMove, #GameResult {
    display: none;
}

a.move {
    text-align: left;
    display: inline-block;
    width: 35%;
    padding: 2px 5px;
    margin-left: 3px;
}

a.move:hover {
    background-color: var(--bg-color-hover);
    color: var(--bg-color-hover-text);
}

span.move {
    text-align: center;
    display: inline-block;
    width: 20%;
    padding: 2px 0px;
}

.variation:nth-of-type(3n) {
    display: block;
}

#EngineEvalDiv {
    height: 48px;
    background-color: var(--main-color-bg);
    color: var(--main-color-text);
    border-radius: .25rem .25rem 0 0;
}

#EngineVariationDiv {
    background-color: var(--bg-color-light);
    color: var(--bg-color-light-text);
    line-height: 1.5em;
    height: 3em;
    overflow: hidden;
    display: none;
}

/* Game board styles */
#GameBoard {
    user-select: none;
}

.whiteSquare {
    background-color: var(--white-square);
}

.blackSquare {
    background-color: var(--black-square);
}

.highlightWhiteSquare {
    background-color: var(--highlight-white-sq);
}

.highlightBlackSquare {
    background-color: var(--highlight-black-sq);
}

.playerName, .result, .rating {
    font-size: calc(12px + 2 * ((100vw - 320px) / 800));
}

.playerName, .result {
    font-weight: 700;
}

.result {
    border-right: 1px solid var(--main-color-text);
}

.clock {
    font-size: calc(13px + 2 * ((100vw - 320px) / 700));
}

.clockActive {
    background-color: var(--bg-active-clock);
}

#ClockPlace1 {
    border-radius: 0 .25rem 0 0;
}

#ClockPlace2 {
    border-radius: 0 0 .25rem 0;
}

.topPlayerItem, .botPlayerItem {
    background-color: var(--main-color-bg);
    color: var(--main-color-text);
    border-radius: .25rem;
    align-items: center;
}

.topPlayerItem {
    border-radius: .25rem .25rem 0 0;
}

.botPlayerItem {
    border-radius: 0 0 .25rem .25rem;
}

#GameWhite, #GameBlack, #GameWhiteClock, #GameBlackClock {
    white-space: nowrap;
}

.h-30p, #GameSelectMenu, #PgnFileSelect {
    height: 30px;
    padding-top: 0px;
    padding-bottom: 0px;
}

/* Game selection styles*/
#GameSelSelect {
    width: 100% !important;
}

.custom-select {
    background-color:  var(--main-color-bg);
    background-image: none;
    color: var(--main-color-text);
    border: 0px;
}

.custom-select:focus {
    border-color:  var(--main-color-bg);
    color: var(--main-color-text);
}

#GameSelectionDiv span {
    text-align: center;
    font-weight: 700;
    padding: 8px;
}

#GameSelectionDiv h6 {
    display: inline;
}

#GameSelectionDiv > div {
    display: flex;
    align-items: center;
}

#GameSelectionDiv > div:hover:not(.active) {
    background-color: var(--bg-color-hover);
    color: var(--bg-color-hover-text);
}

#GameSelectionDiv > div.active {
    background-color: var(--bg-color-active);
}

#SettingsBtn > i, #DownloadModalBtn > i, .fa-list-ul, #MultipleBoardsSettingsBtn > i {
    font-size: 22px;
    vertical-align: middle;
}

#SettingsDiv {
    display: inline-block;
}

#DownloadModalBtn {
    width: 100%;
}

/* Snackbar styles */
#Snackbar {
    visibility: hidden;
    min-width: 250px;
    background-color: var(--main-color-text);
    color: var(--main-color-bg);
    text-align: center;
    border-radius: .25rem;
    padding: 16px;
    position: fixed;
    z-index: 2000;
    left: 50%;
    transform: translateX(-50%);
    bottom: 60px;
}

#Snackbar.show {
    visibility: visible;
}

/* Miniboard styles */
iframe {
    border: 0;
}

#Miniboard {
    background-color: var(--main-color-bg);
    color: var(--main-color-text);
    border-radius: .25rem;
}

.resultTile {
    border-right: 1px solid var(--main-color-text);
}

.playerNameTile {
    font-weight: 600;
    padding: 0px 0px 0px 6px;
    overflow: hidden;
}

.clockTile {
    padding: 0px 2px 0px 0px;
    overflow: hidden;
}

#BlackInfo, #WhiteInfo {
    padding: 4px 0px;
}

#GamesSelectionContainer{
    max-height: 450px;
    overflow-y: scroll;
}

#ControlPanel {
    border-top: 0;
}

.controlPanelBtn {
    width: 20%;
    border: 0;
    border-radius: 0;
}

.controlPanelBtn:focus {
    outline: none;
}

/* Embedded video styles */
#VideoDivLeft iframe, #VideoDivRight iframe {
    width: 100%;
    height: 100%;
    border-radius: .25rem;
}
#ImageDivLeft img, #ImageDivRight img {
    max-width: 100%;
    max-height: inherit;
    border-radius: .25rem;
}

#engineToggleIcon {
    font-size: 30px;
    vertical-align: middle;
}

/************************************************************
   CSS Grid - Single board view
 ************************************************************/
.gamesItem {
    grid-area: games;
}

.boardItem {
    grid-area: board;
    /* First part of the hack to maintain 1:1 aspect ratio for the board element */
    position: relative;
    padding-top: 100%;
}

#SingleBoardView #boardTable {
    /* Second part of the hack to maintain 1:1 aspect ratio for the board element */
    position: absolute;

    /* Center the board horizontally */
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    /* Adjust the width and height at pgn4web.js startup time (when opening PGN from URL params) */
    width: 100%;
    height: 100%;
}

.pgnItem {
    grid-area: pgn;
}

.controlsItem {
    grid-area: controls;
}

.controlsItem .btn {
    padding: 0;
}

.topPlayerItem {
    grid-area: topname;
}

.botPlayerItem {
    grid-area: botname;
}

.settingsItem {
    grid-area: settings;
}

#SingleBoardView {
    display: grid;
    --main-margin: 1vw;
    --player-names: 30px;
    grid-template-columns: var(--main-margin) minmax(350px, 45vw) minmax(min(60vw, 60vh), min(80vw, 80vh)) minmax(350px, 45vw) var(--main-margin);
    grid-template-rows: var(--player-names) min-content var(--player-names);
    grid-template-areas:
        ". .topname . ."
        ". games board pgn ."
        ". settings botname controls .";
    column-gap: 1rem;
    justify-content: center;
}

@media (min-width: 800px) and (max-width: 1259px) {
    #SingleBoardView {
        grid-template-columns: var(--main-margin) minmax(min(60vw, 60vh), min(80vw, 80vh)) minmax(25vw, 45vw) var(--main-margin);
        grid-template-areas:
            ". topname . ."
            ". board pgn ."
            ". botname controls ."
            ". . settings ."
            ". games games .";
    }

    .gamesItem {
        margin-top: 16px;
        margin-bottom: 16px;
    }

    .settingsItem {
        margin-top: 16px;
    }

    .controlsItem button, #SettingsBtn, #DownloadModalBtn {
        height: 40px;
        padding: 6px;
    }
}

@media (max-width: 799px) {
    #SingleBoardView {
        grid-template-columns: minmax(min(60vw, 60vh), min(100vw, 80vh));
        grid-template-areas:
            "topname"
            "board"
            "botname"
            "controls"
            "settings"
            "pgn"
            "games";
    }

    .controlsItem, .gamesItem {
        margin-top: 16px;
        margin-bottom: 16px;
    }

    .settingsItem {
        margin-bottom: 16px;
    }

    .controlsItem button, #SettingsBtn, #DownloadModalBtn {
        height: 50px;
        padding: 9px;
    }
}

/************************************************************
   CSS Grid - Multiple boards views
 ************************************************************/
.iframesItem {
    grid-area: iframes;
}

.multiboardSettingsItem {
    grid-area: mbSettings;
}

#MultiBoardView {
    display: grid;
    --main-margin: 1vw;
    grid-template-columns: var(--main-margin) auto var(--main-margin);
    grid-template-rows: auto;
    grid-template-areas:
        ". iframes ."
        ". mbSettings .";
    row-gap: 1rem;
    justify-content: center;
}

@media (max-width: 799px) {
    .multiboardSettingsItem button, .multiboardSettingsItem select {
        height: 50px;
        padding: 9px;
    }
}