:root {
    /* fix for bootswatch iframe transparency issue; set to none for consistent with iframe mobile app */
    color-scheme: none;
}

/*generate position class*/
.p00 {
    top: 0%;
    left: 0%;
}

.p01 {
    top: 0%;
    left: 11.111%;
}

.p02 {
    top: 0%;
    left: 22.222%;
}

.p03 {
    top: 0%;
    left: 33.333%;
}

.p04 {
    top: 0%;
    left: 44.444%;
}

.p05 {
    top: 0%;
    left: 55.556%;
}

.p06 {
    top: 0%;
    left: 66.667%;
}

.p07 {
    top: 0%;
    left: 77.778%;
}

.p08 {
    top: 0%;
    left: 88.889%;
}

.p10 {
    top: 10%;
    left: 0%;
}

.p11 {
    top: 10%;
    left: 11.111%;
}

.p12 {
    top: 10%;
    left: 22.222%;
}

.p13 {
    top: 10%;
    left: 33.333%;
}

.p14 {
    top: 10%;
    left: 44.444%;
}

.p15 {
    top: 10%;
    left: 55.556%;
}

.p16 {
    top: 10%;
    left: 66.667%;
}

.p17 {
    top: 10%;
    left: 77.778%;
}

.p18 {
    top: 10%;
    left: 88.889%;
}

.p20 {
    top: 20%;
    left: 0%;
}

.p21 {
    top: 20%;
    left: 11.111%;
}

.p22 {
    top: 20%;
    left: 22.222%;
}

.p23 {
    top: 20%;
    left: 33.333%;
}

.p24 {
    top: 20%;
    left: 44.444%;
}

.p25 {
    top: 20%;
    left: 55.556%;
}

.p26 {
    top: 20%;
    left: 66.667%;
}

.p27 {
    top: 20%;
    left: 77.778%;
}

.p28 {
    top: 20%;
    left: 88.889%;
}

.p30 {
    top: 30%;
    left: 0%;
}

.p31 {
    top: 30%;
    left: 11.111%;
}

.p32 {
    top: 30%;
    left: 22.222%;
}

.p33 {
    top: 30%;
    left: 33.333%;
}

.p34 {
    top: 30%;
    left: 44.444%;
}

.p35 {
    top: 30%;
    left: 55.556%;
}

.p36 {
    top: 30%;
    left: 66.667%;
}

.p37 {
    top: 30%;
    left: 77.778%;
}

.p38 {
    top: 30%;
    left: 88.889%;
}

.p40 {
    top: 40%;
    left: 0%;
}

.p41 {
    top: 40%;
    left: 11.111%;
}

.p42 {
    top: 40%;
    left: 22.222%;
}

.p43 {
    top: 40%;
    left: 33.333%;
}

.p44 {
    top: 40%;
    left: 44.444%;
}

.p45 {
    top: 40%;
    left: 55.556%;
}

.p46 {
    top: 40%;
    left: 66.667%;
}

.p47 {
    top: 40%;
    left: 77.778%;
}

.p48 {
    top: 40%;
    left: 88.889%;
}

.p50 {
    top: 50%;
    left: 0%;
}

.p51 {
    top: 50%;
    left: 11.111%;
}

.p52 {
    top: 50%;
    left: 22.222%;
}

.p53 {
    top: 50%;
    left: 33.333%;
}

.p54 {
    top: 50%;
    left: 44.444%;
}

.p55 {
    top: 50%;
    left: 55.556%;
}

.p56 {
    top: 50%;
    left: 66.667%;
}

.p57 {
    top: 50%;
    left: 77.778%;
}

.p58 {
    top: 50%;
    left: 88.889%;
}

.p60 {
    top: 60%;
    left: 0%;
}

.p61 {
    top: 60%;
    left: 11.111%;
}

.p62 {
    top: 60%;
    left: 22.222%;
}

.p63 {
    top: 60%;
    left: 33.333%;
}

.p64 {
    top: 60%;
    left: 44.444%;
}

.p65 {
    top: 60%;
    left: 55.556%;
}

.p66 {
    top: 60%;
    left: 66.667%;
}

.p67 {
    top: 60%;
    left: 77.778%;
}

.p68 {
    top: 60%;
    left: 88.889%;
}

.p70 {
    top: 70%;
    left: 0%;
}

.p71 {
    top: 70%;
    left: 11.111%;
}

.p72 {
    top: 70%;
    left: 22.222%;
}

.p73 {
    top: 70%;
    left: 33.333%;
}

.p74 {
    top: 70%;
    left: 44.444%;
}

.p75 {
    top: 70%;
    left: 55.556%;
}

.p76 {
    top: 70%;
    left: 66.667%;
}

.p77 {
    top: 70%;
    left: 77.778%;
}

.p78 {
    top: 70%;
    left: 88.889%;
}

.p80 {
    top: 80%;
    left: 0%;
}

.p81 {
    top: 80%;
    left: 11.111%;
}

.p82 {
    top: 80%;
    left: 22.222%;
}

.p83 {
    top: 80%;
    left: 33.333%;
}

.p84 {
    top: 80%;
    left: 44.444%;
}

.p85 {
    top: 80%;
    left: 55.556%;
}

.p86 {
    top: 80%;
    left: 66.667%;
}

.p87 {
    top: 80%;
    left: 77.778%;
}

.p88 {
    top: 80%;
    left: 88.889%;
}

.p90 {
    top: 90%;
    left: 0%;
}

.p91 {
    top: 90%;
    left: 11.111%;
}

.p92 {
    top: 90%;
    left: 22.222%;
}

.p93 {
    top: 90%;
    left: 33.333%;
}

.p94 {
    top: 90%;
    left: 44.444%;
}

.p95 {
    top: 90%;
    left: 55.556%;
}

.p96 {
    top: 90%;
    left: 66.667%;
}

.p97 {
    top: 90%;
    left: 77.778%;
}

.p98 {
    top: 90%;
    left: 88.889%;
}

/*generate board css*/
.xq-board-wrap {
    width: 100%;
    min-width: 250px;
    display: inline-block;
    position: relative;
    margin: 12px 0;
}

.xq-board-wrap:after {
    padding-top: 111.11%;
    /*keeping board always in 414:460 ratio (cell size = 46)*/
    display: block;
    content: '';
}

.xq-board {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    /*fill parent*/
    background: url(../images/default/board.jpg?v=20260523);
    background-image: image-set(
        url(../images/default/board.webp?v=20260523) type("image/webp"),
        url(../images/default/board.png?v=20260523) type("image/png")
    );
    background-size: cover;
}

.xq-board.red .xq-piece.red {
    cursor: pointer;
}

.xq-board.black .xq-piece.black {
    cursor: pointer;
}

.xq-board-wrap.match {
    min-width: 0;
    margin: 0;
}

.xq-board-wrap.match .xq-board .xq-piece {
    position: absolute;
    width: 11.11%;
    height: 10%;
}

.xq-board-wrap.match .xq-board .xq-piece.last-move:after {
    display: block;
    content: '';
    width: 100%;
    height: 100%;
    background-image: url(../images/default/selected.png?v=20260523);
    background-image: image-set(
        url(../images/default/selected.webp?v=20260523) type("image/webp"),
        url(../images/default/selected.png?v=20260523) type("image/png")
    );
    background-size: cover;
}

.xq-board-wrap.match .xq-board .xq-piece.check {
    border-radius: 50%;
    box-shadow: inset 0 0 15px rgba(223, 14, 14, 0.6);
}

.xq-dead-pieces .xq-piece {
    height: 40px;
    width: 40px;
    float: left;
    position: static;
}

.xq-player {
    min-height: 20px;
    margin-top: -5px
    /*workaround for bottom element*/;
}

.xq-player .name {
    float: left;
    font-weight: bold;
}

.xq-player .name .state {
    display: inline-block;
    height: 10px;
    width: 10px;
    border-radius: 5px;
    box-shadow: 0 0 1px #000000;
}

.xq-player .name .state.online {
    background-color: #3DCA87;
}

.xq-player .name .state.offline {
    background-color: gray;
}

.xq-player .name a {
    text-decoration: none;
}

.xq-player .time {
    float: right;
    color: #e9ab58;
}

.xq-player .time > .turn {
    margin-left: 5px;
}

.xq-player .time > .game {
    display: none;
    font-size: 11px;
    color: antiquewhite;
}

.xq-node {
    position: absolute;
    width: 11.11%;
    height: 10%;
}

.xq-node.move-dest {
    background: radial-gradient(rgba(20, 85, 30, 0.5) 22%, #208530 0, rgba(0, 0, 0, 0.3) 0, rgba(0, 0, 0, 0) 0);
    cursor: pointer;
}

.xq-node.move-dest.occupied > .xq-piece {
    border-radius: 50%;
    box-shadow: inset 0 0 15px rgba(216, 85, 0, 0.9);
}

.xq-node.move-dest.occupied.last-move:before {
    display: none;
}

.xq-node.move-dest.last-move:before {
    display: block;
    content: '';
    width: 100%;
    height: 100%;
    background: radial-gradient(rgba(20, 85, 30, 0.5) 22%, #208530 0, rgba(0, 0, 0, 0.3) 0, rgba(0, 0, 0, 0) 0);
}

.xq-node.check > .xq-piece {
    border-radius: 50%;
    box-shadow: inset 0 0 15px rgba(223, 14, 14, 0.6);
}

.xq-node.selected > .xq-piece:after {
    display: block;
    content: '';
    width: 100%;
    height: 100%;
    background-image: url(../images/default/selected.png?v=20260523);
    background-image: image-set(
        url(../images/default/selected.webp?v=20260523) type("image/webp"),
        url(../images/default/selected.png?v=20260523) type("image/png")
    );
    background-size: cover;
}

.xq-node.last-move {
    background-image: url(../images/default/old-pos.png?v=20260523);
    background-image: image-set(
        url(../images/default/old-pos.webp?v=20260523) type("image/webp"),
        url(../images/default/old-pos.png?v=20260523) type("image/png")
    );
    background-size: cover;
}

.xq-node.last-move.occupied > .xq-piece:after {
    display: block;
    content: '';
    width: 100%;
    height: 100%;
    background-image: url(../images/default/selected.png?v=20260523);
    background-image: image-set(
        url(../images/default/selected.webp?v=20260523) type("image/webp"),
        url(../images/default/selected.png?v=20260523) type("image/png")
    );
    background-size: cover;
}

.xq-node[data-coord-top]:after {
    top: -11px;
    content: attr(data-coord-top);
    left: 45%;
    color: #bbb;
    font-weight: bold;
    position: absolute;
    font-size: 9px;
    line-height: 9px;
}

.xq-node[data-coord-bottom]:after {
    bottom: -11px;
    content: attr(data-coord-bottom);
    left: 45%;
    color: #bbb;
    font-weight: bold;
    position: absolute;
    font-size: 9px;
    line-height: 9px;
}

.xq-piece {
    position: absolute;
    width: 100%;
    height: 100%;
    background: url(../images/default/default.png?v=20260523);
    background-image: image-set(
        url(../images/default/default.webp?v=20260523) type("image/webp"),
        url(../images/default/default.png?v=20260523) type("image/png")
    );
    background-size: cover;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.xq-piece.red.chariot {
    background-image: url(../images/default/rR.png?v=20260523);
    background-image: image-set(url(../images/default/rR.webp?v=20260523) type("image/webp"), url(../images/default/rR.png?v=20260523) type("image/png"));
}

.xq-piece.red.horse {
    background-image: url(../images/default/rH.png?v=20260523);
    background-image: image-set(url(../images/default/rH.webp?v=20260523) type("image/webp"), url(../images/default/rH.png?v=20260523) type("image/png"));
}

.xq-piece.red.elephant {
    background-image: url(../images/default/rE.png?v=20260523);
    background-image: image-set(url(../images/default/rE.webp?v=20260523) type("image/webp"), url(../images/default/rE.png?v=20260523) type("image/png"));
}

.xq-piece.red.adviser {
    background-image: url(../images/default/rA.png?v=20260523);
    background-image: image-set(url(../images/default/rA.webp?v=20260523) type("image/webp"), url(../images/default/rA.png?v=20260523) type("image/png"));
}

.xq-piece.red.king {
    background-image: url(../images/default/rK.png?v=20260523);
    background-image: image-set(url(../images/default/rK.webp?v=20260523) type("image/webp"), url(../images/default/rK.png?v=20260523) type("image/png"));
}

.xq-piece.red.cannon {
    background-image: url(../images/default/rC.png?v=20260523);
    background-image: image-set(url(../images/default/rC.webp?v=20260523) type("image/webp"), url(../images/default/rC.png?v=20260523) type("image/png"));
}

.xq-piece.red.pawn {
    background-image: url(../images/default/rP.png?v=20260523);
    background-image: image-set(url(../images/default/rP.webp?v=20260523) type("image/webp"), url(../images/default/rP.png?v=20260523) type("image/png"));
}

.xq-piece.black.chariot {
    background-image: url(../images/default/bR.png?v=20260523);
    background-image: image-set(url(../images/default/bR.webp?v=20260523) type("image/webp"), url(../images/default/bR.png?v=20260523) type("image/png"));
}

.xq-piece.black.horse {
    background-image: url(../images/default/bH.png?v=20260523);
    background-image: image-set(url(../images/default/bH.webp?v=20260523) type("image/webp"), url(../images/default/bH.png?v=20260523) type("image/png"));
}

.xq-piece.black.elephant {
    background-image: url(../images/default/bE.png?v=20260523);
    background-image: image-set(url(../images/default/bE.webp?v=20260523) type("image/webp"), url(../images/default/bE.png?v=20260523) type("image/png"));
}

.xq-piece.black.adviser {
    background-image: url(../images/default/bA.png?v=20260523);
    background-image: image-set(url(../images/default/bA.webp?v=20260523) type("image/webp"), url(../images/default/bA.png?v=20260523) type("image/png"));
}

.xq-piece.black.king {
    background-image: url(../images/default/bK.png?v=20260523);
    background-image: image-set(url(../images/default/bK.webp?v=20260523) type("image/webp"), url(../images/default/bK.png?v=20260523) type("image/png"));
}

.xq-piece.black.cannon {
    background-image: url(../images/default/bC.png?v=20260523);
    background-image: image-set(url(../images/default/bC.webp?v=20260523) type("image/webp"), url(../images/default/bC.png?v=20260523) type("image/png"));
}

.xq-piece.black.pawn {
    background-image: url(../images/default/bP.png?v=20260523);
    background-image: image-set(url(../images/default/bP.webp?v=20260523) type("image/webp"), url(../images/default/bP.png?v=20260523) type("image/png"));
}

/*.newTheme(~"test");*/

html {
    position: relative;
    min-height: 100%;
}

/* custom nav style */
nav.navbar {
    border-width: 0 0 1px !important;
}

.navbar-brand {
    border-width: 0;
}

.navbar .nav-link {
    border-width: 0;
}

.navbar .nav-link:focus, .navbar .nav-link:hover {
    border-width: 0;
}

.offcanvas.show hr {
    display: block !important;
}

a {
    text-decoration: none;
}

h1, h2, h3, h4 {
    font-size: 1.5rem;
}

.logo {
    width: 136px;
    height: 40px;
    background: url(../images/logo.png) top left no-repeat;
    display: block;
}

input.limit,
select.limit {
    max-width: 302px
    /*to the same with recaptcha*/;
}

.g-recaptcha {
    height: 78px;
}

.form-signin {
    text-align: center;
}

.form-signin h2 {
    font-size: 20px;
}

.login-group {
    max-width: 300px;
    margin: 0 auto;
}

.login-group h1 {
    font-size: 24px;
    margin: 15px 0;
}

a.n {
    text-decoration: none;
}

.play-controls {
    position: relative;
}

.play-controls .fb-like-btn {
    display: inline-block;
    margin-left: 5px;
    width: 100px;
    height: 30px;
    padding-top: 5px;
    vertical-align: middle;
}

.play-controls .fb-like-btn .fb-like {
    float: left;
}

.play-controls .play-btn {
    font-size: 18px;
    width: 100%;
    max-width: 260px;
}

.play-controls .play-sm {
    font-size: 14px;
}

.play-controls .bottom {
    position: absolute;
    bottom: 7px;
    font-size: 12px;
}

.play-controls .bottom.left {
    left: 8px;
}

.play-controls .bottom.right {
    right: 8px;
}

.matches a {
    text-decoration: none;
}

.matches a.match-board {
    display: block;
    margin-left: -5px;
    margin-bottom: -5px;
}

.turns .controls > span {
    cursor: pointer;
    margin: 0 10px 10px 0;
    padding: 10px 20px;
    border: 1px solid;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}

.turns ul {
    max-width: 240px;
}

.turns ul li .index {
    font-size: 11px;
    display: inline-flex;
    width: 15px;
    overflow: hidden;
    text-align: right;
    vertical-align: middle;
    margin-bottom: 3px;
}

.turns ul li .t {
    padding-left: 4px;
    cursor: pointer;
    width: 90px;
    display: inline-block;
}

@media (min-width: 768px) and (max-width: 992px) {
    .turns ul li .t {
        width: 70px;
    }
}

ul.game-feeds li {
    margin-top: 5px;
}

ul.game-feeds li a {
    text-decoration: none;
}

ul.game-feeds li a:last-child {
    margin-left: 10px;
}

.chat {
    display: flex;
    flex-wrap: wrap;
}

.chat .messages {
    order: 1;
    height: 150px;
    padding: 5px;
    border: 1px solid #424242;
    overflow: auto;
    width: 100%;
}

.chat .actions {
    order: 2;
    margin: 2px 0;
}

.chat .actions .lock {
    display: inline-block;
    width: 38px;
}

.chat .input-group {
    margin-top: 10px;
    order: 0;
}

@media (min-width: 768px) {
    .chat .messages {
        order: 0;
        height: 200px;
        margin-top: 10px;
    }

    .chat .actions {
        order: 1;
    }

    .chat .input-group {
        order: 2;
        margin-top: 0;
    }
}

.dead-pieces .xq-dead-pieces {
    margin-top: 10px;
}

.field-validation-error {
    display: block;
    margin-top: 3px;
}

.puzzle-title-guide {
    font-size: 12px;
}

.puzzle-box {
    padding: 5px;
}

.puzzle-box a {
    text-decoration: none;
}

.puzzle-box h6 {
    margin: 0 0 5px 0;
}

.top-box {
    margin-top: 10px;
    padding: 10px;
}

.top-box ul {
    margin-bottom: 0;
}

.top-box ul li {
    padding-top: 2px;
    padding-bottom: 2px;
    clear: both;
}

.top-box ul li .idx {
    width: 18px;
    display: inline-block;
    text-align: right;
    margin-right: 10px;
    font-size: 12px;
}

.top-box ul li.highlight {
    background-color: #603f71;
    margin-left: -10px;
    margin-right: -10px;
    padding-left: 10px;
    padding-right: 10px;
}

.ads-home {
    display: inline-block;
    margin-left: -10px;
    margin-right: -10px;
    width: 336px;
    margin-bottom: 10px;
}

.embed-responsive.embed-responsive-21by9 {
    padding-top: 42.857143%;
}

.news .news-menu a {
    color: #888888;
    padding-top: 5px;
    padding-bottom: 5px;
    text-decoration: none;
    display: inline-block;
}

.news .news-menu a.active,
.news .news-menu a:hover,
.news .news-menu a:focus {
    color: #ffffff;
}

.news .post-content {
    padding-top: 10px;
}

.news .post-content img {
    max-width: 100% !important;
}

.news .post-title {
    font-size: 26px;
    margin-top: 10px;
}

.news .post-title a {
    text-decoration: none;
}

.news .media h4 {
    font-size: 18px;
}

.news .media a {
    text-decoration: none;
}

.news .media .media-left {
    width: 150px;
}

.btn-social {
    text-shadow: none;
    border: none;
}

.btn-social :first-child {
    width: 24px;
    font-size: 24px;
    height: auto;
}

.btn-social:active, .btn-social:hover, .btn-social:focus {
    opacity: 0.7;
}

.btn-facebook {
    background-color: #3b5998 !important;
}

.btn-google {
    background-color: #FFFFFF !important;
}

.d-android, .d-ios {
    display: none;
}

#comments{
    background: #aaa;
}
.g_id_signin{
    overflow: hidden;
    height: 44px;
}