.chess-row{
    display:flex;
    flex-direction: row;
    height:12.5%;
    width:100%;
    align-content:center;
    align-items:center;
}

.chess-square {
    width: 12.5%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: white;
}

.chess-square-luxury-green {
    background-color: #003f36;
}

.chess-square-light-blue {
    background-color: var(--light-blue);
}

.chess-square-light-brown {
    background-color: var(--light-brown);
}

.chess-square-subtle-green {
    background-color: var(--subtle-green);
}

.chess-square-brown-border{
    border-color: var(--light-brown) !important;
}

.dark-brown-background{
    background: var(--dark-brown) !important;
}

.dark-green-background{
    background: var(--dark-green) !important;
}

.dark-brown-border{
    border-color: var(--dark-brown) !important;
}

.purple-background {
    background: var(--purple) !important;
}

.chess-square-light-blue-left {
    border-left: 2px solid var(--light-blue);
}

.chess-square-light-blue-right {
    border-right: 2px solid var(--light-blue);
}

.chess-square-light-blue-top {
    border-top: 2px solid var(--light-blue);
}

.chess-square-light-blue-bottom {
    border-bottom: 2px solid var(--light-blue);
}

.chess-square-white-left {
    border-left: 2px solid white;
}

.chess-square-white-right {
    border-right: 2px solid white;
}

.chess-square-white-top {
    border-top: 2px solid white;
}

.chess-square-white-bottom {
    border-bottom: 2px solid white;
}

.chess-board {
    position: relative;
    overflow:hidden;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
    min-width:auto;
    height: 75vh;
    aspect-ratio: 1 / 1;
    border-width: 2px;
    border-color: #009FF5;
    background-color: white;
    border-radius: 5px;
    box-shadow: 0px 0px 2px 0px rgb(0 0 0 / 15%);
}

@media screen and (max-height: 650px) {
    .chess-board {
        min-width: auto !important;
    }
}

.creator-board{
    height:55vh;
}

.brilliant {
    position: absolute;
    z-index: 1000;
}

.chess-board-min {
    min-width: 800px;
    min-height: 800px;
}

.analysis-button {
    background: rgba(255,255,255,0.8);
    box-shadow: 0px 0px 10px 0px rgb(255 255 255 / 55%) !important;
    color: black !important;
    transition:0.2s;
}

.analysis-container-override {
    height: fit-content !important;
    min-height: fit-content !important;
    margin-bottom: 0px !important;
    max-width: 80vh !important;
    width: 100% !important;
}

.analysis-cross {
}


.close-analysis-container {
    width: fit-content;
    margin-left: auto;
    margin-right: -5px;
    cursor: pointer;
}

.daily-header {
    background-color: var(--dark-green);
    width: 100%;
    text-align: center;
    padding: 20px;
    border-top-left-radius: 5px;
    color:white;
    
    min-height:70px;
    border-top-right-radius: 5px;
    display:flex;
    flex-direction:column;
    gap:10px;
    justify-content:center;
    align-items:center;
}

.daily-slanted{
    font-size:1.2rem;
    color:white !important;
    margin-bottom:10px;
}

.daily-header p {
    font-family: HamlinBold;
    font-size: 1.8rem;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.daily-footer {
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    border-top-left-radius: 0px !important;
    border-top-right-radius: 0px !important;
}


.close-analysis-container:hover .analysis-cross {
    opacity: 1 !important;
    
    
}

.analysis-cross:before, .analysis-cross:after {
    width: 3px;
    background-color: white;
}

.total-analysis-container {
    overflow: hidden;
}

.analysis-out {
    margin-top: -400px;
    animation: analysisOut;
    animation-duration: 0.4s;
}

.analysis-in {
    margin-top: 0px;
    animation: analysisIn;
    animation-duration: 0.4s;
}

@-webkit-keyframes analysisIn {
    0% {
        margin-top: -400px;
    }


    100% {
        margin-top: 0px;
    }
}

@keyframes analysisIn {
    0% {
        margin-top: -400px;
    }


    100% {
        margin-top: 0px;
    }
}

@-webkit-keyframes analysisOut {
    0% {
        margin-top: 0px;
    }


    100% {
        margin-top: -400px;
    }
}

@keyframes analysisOut {
    0% {
        margin-top: 0px;
    }


    100% {
        margin-top: -400px;
    }
}

.analysis-text-title {
    font-size: 2rem;
    margin-bottom: 20px;
    margin-top:25px;
}

.analysis-button:hover {
    background: rgba(255,255,255,1);
    box-shadow: 0px 0px 10px 0px rgb(255 255 255 / 75%) !important;
}

.mini-board {
    height: 30vh;
}

.chess-board-container {
    max-width: 100%;
}

.side-info{
    animation-duration: 1s;
}

.info-section{
    width: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.center-container {
    margin-top: 10px;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.clue {
    background-color: var(--green-blue) !important;
}

.chess-board-green {
    border-color: var(--subtle-green) !important;
}

.chess-board-red {
    border-color: var(--subtle-red) !important;
}

.bottom-button {
    font-family: 'Hamlin';
    box-shadow: 0px 0px 20px 0px rgba(98,189,158,0.2);
    font-size: 20px;
    color: white;
    border: none;
    border-radius: 5px;
    padding: 8px 25px 8px 25px;
    margin-right: 15px;
    margin-left: 15px;
    width: 120px;
    margin-top: 40px;
    transition:0.2s;
}

    .bottom-button:hover {
        box-shadow: 0px 0px 20px 0px rgba(98,189,158,0.8);
    }

.purple-hover:hover {
    box-shadow: 0px 0px 20px 0px rgba(76, 70, 127,0.8);
}

.dark-brown-hover:hover {
    box-shadow: 0px 0px 20px 0px rgba(63, 38, 21,0.8);
}

.chess-image {
    width: 90%;
    margin: auto auto auto auto;
    cursor: pointer;
    z-index: 100;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}

.dot {
    height: 30%;
    width: 30%;
    background-color: #bbb;
    opacity: 0.5;
    border-radius: 50%;
    display: none;
    pointer-events: none;
}

.win-alert {
    padding: 15px;
    z-index: 999;
    pointer-events: all;
    border-top-left-radius: 0px !important;
    border-top-right-radius: 0px !important;
}

.chess-layout-text{
    font-family: Hamlin;
    font-size: 16px;
    position:absolute;
    margin-bottom:0 !important;
}

.chess-layout-text-bottom {
    bottom:0;
    right:5%;
}

.chess-layout-text-left {
    top: 0;
    left: 5%;
}

.colour-chess-square-light-blue {
    color: var(--light-blue);
}

.colour-chess-square-light-brown{
    color: var(--light-brown);
}

.colour- {
    color: white;
}

.solved-cross {
    position: absolute;
    top: 15px;
    right: 0px;
    z-index: 10000;
}

.super-mini-board {
    height: 60%;
    border-top-left-radius: 40px;
    border-bottom-right-radius: 40px;
}

.board-icon-container {
    width: 60%;
    margin-top: 10%;
    margin-bottom: 40px;
    margin-left: auto;
    margin-right: auto;
}

.three-five {
    width: 35%;
}

.four-three{
    width:45%;
}

.five-four{
    width:75%;
}

.dot-light-blue {
    background-color: white !important;
}

.possible-move {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box; /* Firefox, other Gecko */
    box-sizing: border-box;
    border: 3px solid var(--possible-move) !important;
    border-radius: 5px;
    outline: 1px solid white;
    box-shadow: var(--possible-move-shadow);
}

.possible-move-shatranj {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box; /* Firefox, other Gecko */
    box-sizing: border-box;
    border: 3px solid var(--purple) !important;
    border-radius: 5px;
    outline: 1px solid white;
    box-shadow: 0px 0px 20px 0px rgb(76 70 127 / 100%);
}

.puzzler-svg-button{
    width:40px;
    transition: 0.4s;
    cursor: pointer;
}

.puzzler-svg-button:hover {
    transform: scale(1.05);
}

.button-spacing{
    gap:10px 35px;
}

.refresh-box {
    padding: 7px;
    border-radius: 7px;
}

.next-svg-container {
    padding: 7px;
    border-radius: 7px;
}

.svg-button{
    height:38px;
}

.chess-font{
    font-size:30px;
}

.text-row{
    display: flex;
    gap:5px;
}

.rating-positive {
    color: #bdffd0;
}

.rating-negative {
    color: #ff8f8f;
}
.rollOut {
    -webkit-animation-name: rollOut;
    animation-name: rollOut;
    opacity: 0;
}

@keyframes rollOut {
    0% {
        opacity: 1;
        margin-top: 0%;
    }

    100% {
        opacity: 0;
        margin-top: -100%;
    }
}

.rollIn {
    -webkit-animation-name: rollIn;
    animation-name: rollIn;
}

.daily-embedded-leaderboard-container{
    animation-duration: 1s;
}

@keyframes rollIn {
    0% {
        opacity: 0;
        margin-top: -100%;
    }

    100% {
        opacity: 1;
        margin-top: 0%;
    }
}

.slide-section {
    overflow: hidden;
    height: fit-content;
    margin-bottom: 100px;
    transition: max-height 1s;
}

/* The switch - the box around the slider */
.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

    /* Hide default HTML checkbox */
    .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

/* The slider */
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

    .slider:before {
        position: absolute;
        content: "";
        height: 26px;
        width: 26px;
        left: 4px;
        bottom: 4px;
        background-color: white;
        -webkit-transition: .4s;
        transition: .4s;
    }

input:checked + .slider {
    background-color: var(--dark-green);
}

input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}

.chess-layout-opposite {
}

.flipped-container{
    width:100%;
    display:flex;
    flex-direction:column;
    justify-content:center;
    margin-top:50px;
    text-align:center;
}

.flip-select{
    border:none;
    width:100px;
    margin-left:auto;
    margin-right:auto;
}


.chess-layout-number-opposite {
    bottom: auto;
    right: auto;
    left: 5%;
    top: 0;
}

.chess-layout-letter-opposite{
    top:auto;
    right:5%;
    left:auto;
    bottom:0;
}

.flipped-promotion{
    transform:translateY(75%);
}
/* Rounded sliders */
.slider.round {
    border-radius: 34px;
}

    .slider.round:before {
        border-radius: 50%;
    }

.diamond-narrow {
    width: 0;
    height: 0;
    border-left: 70px solid transparent;
    border-right: 70px solid transparent;
    border-top: 100px solid red;
    border-radius: 50%;
}

.promotion-container {
    position: absolute;
    display: none;
    width: 100%;
    z-index: 10000;
    background: white;
    box-shadow: 0px 0px 20px 0px rgb(0 0 0 / 35%);
}

.restricted-board{
    max-width:300px !important;
    max-height:300px;
    margin: 0 !important;
    cursor: pointer;
    min-width:300px !important;
}

.promotion-container-white {
    top: 0;
}

.promotion-container-black{
    bottom:0;
}

.promotion-square {
    width: 100% !important;
    padding:5% 5% 5% 5%;
    box-shadow: 0px 0px 2px 0px rgb(0 0 0 / 15%);
}

.promotion-square img {
    width: 100%;
    margin:auto;
    transition: 0.25s;
}

.promotion-square img:hover{
    width:105%;
    transform: translateX(-2%);
}

.std-container{
    display:flex;
    flex-direction:row;
    gap:10%;
    justify-content:center;
}

.std-row{
    width:100%;
}

.daily-leaderboard-container{
    margin-top:200px;
    margin-bottom:100px;
    max-width: 1600px;
    margin-left:auto;
    margin-right:auto;
}

.daily-leaderboard-container h1{
    text-align:center;
}

.mate-in-text {
    margin-left: 50px;
}

.std-home {
    margin-right: 2.5%;
    max-width: 300px;
}

.std-again {
    margin-left: 2.5%;
    max-width: 300px;
}

.chess-board-container-std{
    width:100%;
    transition: 0.5s;
    cursor:pointer;
}

.question-box {
    font-family: 'Hamlin';
    color: var(--dark-blue);
    font-size: 30px;
    padding-top: 15px;
    margin-left: 5px;
    margin-right: 5px;
    padding: 0px 20px 0px 20px;
    border-radius: 2px;
    height: 48px;
    margin-top: auto;
    margin-bottom: auto;
    cursor: pointer;
}

    .question-box:hover {
        background: rgba(89,98,129, 0.2);
    }

.center-row{
    justify-content:center;
    align-items:center;
    flex-wrap: wrap;
}

.arrow-svg-right {
    margin-right: 0px !important;
    margin-left: -14%;
}

.arrow-svg-down {
    transform: rotate(135deg) !important;
}

.arrow-svg {
    width: 18%;
    margin-right: -14%;
    transform: rotate(315deg);
    filter: invert(64%) sepia(47%) saturate(6217%) hue-rotate(143deg) brightness(93%) contrast(98%);
}

.show-mobile {
    display: none;
}

.theme-button {
    color: white;
    font-size: 18px;
    padding: 3px 15px;
    border: none;
    border-radius: 10px;
    opacity: 0.5;
    transition: 0.2s;
    margin-top: 35px;
    margin-left: auto;
    display: block;
}

    .theme-button:after {
        content: '\25BC'; /* Down arrow Unicode character */
        margin-left: 13px;
        font-size: 15px;
    }

.theme-button-selected:after {
    content: '\25B2' !important; 
}

.theme-button:hover{
    opacity: 1;
}

@media screen and (max-height: 900px)and (min-aspect-ratio: 1/1) {
    .chess-board-min {
        min-width: auto;
        min-height: 60vh !important;
    }
}

@media screen and (max-height: 800px) and (min-aspect-ratio: 1/1) {
    .share-row-container {
        width: 50px;
    }

    .puzzler-svg-button {
        width: 40px;
    }

    .daily-header p {
        font-size: 1.7rem;
    }
}


@media screen and (max-width: 800px) {

    .chess-font {
        font-size: 25px !important;
    }

    .puzzler-svg-button{
        width:40px;
    }

    .svg-button{
        height:28px;
    }

    .rating{
        width:150px !important;
    }

    .difficulty{
        width:50px !important;
    }

    .show-desktop{
        display: none;
    }

    .show-mobile{
        display:block;
    }
}