@CHARSET "UTF-8";

/*
 * scaling
 */
.game #game-play > .col-md-4 .collapse-scoresheet #scoresheet[role="tabpanel"] .btn-scoreheet-toggle {
    display: none;
}

.home #game-play > .col-md-4 .tab-pane#info-text .panel-body {
    height: 705px;
}


@media (min-width: 1200px) and (min-height: 851px) and (max-height: 960px) {
    .home #body-cover > .container,
    .game #body-cover > .container {
        width: 1170px;
    }
    .home #chessboard,
    .game #chessboard {
        height: auto;
    }
    .home #game-play > .col-md-8,
    .game #game-play > .col-md-8 {
        width: 80vh;
    }
    .home #game-play > .col-md-4,
    .game #game-play > .col-md-4 {
        width: calc(1170px - 80vh);
    }
    .home #game-play > .col-md-4,
    .game #game-play > .col-md-4,
    .home #game-play > .col-md-4 .tab-content {
        height: calc(80vh - 30px);
    }
    .home #game-play > .col-md-4 .tab-pane,
    .home #game-play > .col-md-4 .tab-pane#info-text .panel-body {
        height: calc(80vh - 75px);
    }
    .home #game-play > .col-md-4 .panel-body.heighted {
        height: calc(80vh - 204px);
    }
    .game #game-play > .col-md-4 .tab-content {
        height: calc(80vh - 415px);
    }

    .game #game-play > .col-md-4 .tab-pane {
        height: calc(80vh - 430px);
    }
}

@media (min-width: 992px) and (max-width: 1199px) and (min-height: 701px) and (max-height: 960px),
(min-width: 1200px) and (min-height: 701px) and (max-height: 850px) {
    .home #game-menu li a {
        font-size: 16px;
        font-size: 1.6rem;
        padding-left: 45px !important;
    }
    .game #game-menu li a {
        font-size: 16px;
        font-size: 1.6rem;
    }

    .home #body-cover > .container,
    .game #body-cover > .container {
        width: 970px;
    }
    .home #chessboard,
    .game #chessboard {
        height: auto;
    }
    .home #game-play > .col-md-8,
    .game #game-play > .col-md-8 {
        width: 70vh;
    }
    .home #game-play > .col-md-4,
    .game #game-play > .col-md-4 {
        width: calc(970px - 70vh);
    }
    .home #game-play > .col-md-4,
    .game #game-play > .col-md-4,
    .home #game-play > .col-md-4 .tab-content {
        height: calc(70vh - 30px);
    }
    .home #game-play > .col-md-4 .tab-pane,
    .home #game-play > .col-md-4 .tab-pane#info-text .panel-body {
        height: calc(70vh - 75px);
    }
    .home #game-play > .col-md-4 .panel-body.heighted {
        height: calc(70vh - 204px);
    }
    .game #game-play > .col-md-4 .tab-content {
        height: calc(70vh - 350px);
    }

    .game #game-play > .col-md-4 .tab-pane {
        height: calc(70vh - 365px);
    }
}

@media (min-width: 992px) and (max-width: 1199px) and (min-height: 701px) and (max-height: 960px),
(min-width: 1200px) and (min-height: 701px) and (max-height: 850px),
(min-width: 768px) and (max-height: 700px),
(min-width: 768px) and (max-width: 991px) and (min-height: 600px) {

    .game #game-play > .col-md-4 .player-summary h2 {
        font-size: 15px;
        font-size: 1.5rem;
    }
    .game #game-play > .col-md-4 .player-summary .game-time {
        font-size: 25px;
        font-size: 2.5rem;
        line-height: 40px;
    }

    .game #game-play > .col-md-4 .player-summary .knocked-figures {
        clear:both;
        padding: 10px 15px;
        height: 50px;
    }
    .game #game-play > .col-md-4 .player-summary .knocked-figures img {
        height: 25px;
    }
    .game #game-play > .col-md-4 .player-summary .knocked-figures .knocked-figure {
        margin-right: 5px;
    }
    .game #game-play > .col-md-4 .player-summary .knocked-figures .amount {
        width: 15px;
        height: 15px;
        line-height: 15px;
    }
}

@media (min-height: 741px) and (max-height: 780px) {
    .game #game-play > .col-md-4 [role="tabpanel"] .mCSB_dragger_bar {
        height: 8px;
    }
}

@media (max-height: 740px) {
    #modal-create-game .modal-content,
    #game-config .modal-content {
        margin-top: -100px;
        -webkit-transform: scale(0.8);
        -ms-transform: scale(0.8);
        transform: scale(0.8);
        -webkit-transform-origin: center bottom;
        -ms-transform-origin: center bottom;
        transform-origin: center bottom;
    }
}

@media (max-height: 740px),
(min-width: 768px) and (max-width: 991px) {

    .game #game-play > .col-md-4 {
        min-height: 500px;
    }
    .game #game-play > .col-md-4 .tab-content {
        min-height: 210px;
    }
    .game #game-play > .col-md-4 .tab-pane {
        min-height: 190px;
    }
    .game #game-play > .col-md-4 .collapse-scoresheet #scoresheet[role="tabpanel"] .btn-scoreheet-toggle {
        display: block;
    }

    .game #game-play > .col-md-4 .collapse-scoresheet #scoresheet[role="tabpanel"] {
        padding-bottom: 0;
    }
    .game #game-play > .col-md-4 .tab-content.collapse-scoresheet  {
        min-height: 65px;
        height: 65px;
    }
    .game #game-play > .col-md-4 .collapse-scoresheet .tab-pane {
        min-height: 50px;
        height: 50px;
    }

    .game #game-play > .col-md-4 .collapse-scoresheet #scoresheet[role="tabpanel"] > .block-header,
    .game #game-play > .col-md-4 .collapse-scoresheet #scoresheet[role="tabpanel"] > #scoresheet_moves {
        display: none;
    }

    .game #game-play > .col-md-4 [role="tablist"] {
        display: none;
    }

    .game #game-play > .col-md-4 [role="tablist"] {
        display: none;
    }
    .game #game-play > .col-md-4 #chat[role="tabpanel"],
    .game #game-play > .col-md-4 #gameinfo[role="tabpanel"] {
        display: none;
    }
    .game #game-play > .col-md-4 #scoresheet[role="tabpanel"] {
        border-radius: 4px;
        display: block;
    }

}

@media (min-width: 768px) and (max-width: 991px),
(min-width: 768px) and (max-height: 700px) {
    .home #game-menu li {
        float: left;
        width: 25%;
        padding-left: 5px;
        padding-right: 5px;
    }
    .home #game-menu li.btn-playnow a {
        padding-top: 5px !important;
        padding-bottom: 5px !important;
    }
    .home #game-menu li a {
        white-space: nowrap;
        display: block;
        text-overflow: ellipsis;
        overflow: hidden;
        font-size: 13px;
        font-size: 1.3rem;
        padding-left: 35px !important;
        background-position: 10px 8px !important;
        background-size: 17px;
        padding-top: 5px;
        padding-bottom: 5px;
    }

    .game #game-menu li {
        float: left;
        width: 16.6667%;
        padding-left: 5px;
        padding-right: 5px;
    }

    .home #game-menu li.btn-playnow a,.game #game-menu li a {
        white-space: nowrap;
        display: block;
        text-overflow: ellipsis;
        overflow: hidden;
        font-size: 13px;
        font-size: 1.3rem;
        padding-top: 5px;
        padding-bottom: 5px;
    }

    .home #chessboard,
    .game #chessboard {
        height: auto;
    }
    .home #body-cover > .container,
    .game #body-cover > .container {
        width: 750px;
    }

    .home #game-play > .col-md-8,
    .game #game-play > .col-md-8 {
        float: left;
        width: 65vh;
    }
    .home #game-play > .col-md-4,
    .game #game-play > .col-md-4 {
        float: left;
        width: calc(750px - 65vh);
    }
    .home #game-play > .col-md-4,
    .game #game-play > .col-md-4,
    .home #game-play > .col-md-4 .tab-content {
        height: calc(65vh - 30px);
    }
    .home #game-play > .col-md-4 .tab-pane,
    .home #game-play > .col-md-4 .tab-pane#info-text .panel-body {
        height: calc(65vh - 75px);
    }
    .home #game-play > .col-md-4 .panel-body.heighted {
        height: calc(65vh - 204px);
    }
    .game #game-play > .col-md-4 .tab-content {
        height: calc(65vh - 350px);
    }

    .game #game-play > .col-md-4 .tab-pane {
        height: calc(65vh - 365px);
    }
}

@media (min-width: 768px) and (max-width: 991px) and (min-height: 600px) {
    .home #game-menu li {
        float: left;
        width: 25%;
        padding-left: 5px;
        padding-right: 5px;
    }
    .home #game-menu li a {
        white-space: nowrap;
        display: block;
        text-overflow: ellipsis;
        overflow: hidden;
        font-size: 13px;
        font-size: 1.3rem;
        padding-left: 35px;
        background-position: 10px 12px;
        background-size: 17px;
    }

    .home #chessboard,
    .game #chessboard {
        height: auto;
    }
    .home #body-cover > .container,
    .game #body-cover > .container {
        width: 750px;
    }

    .home #game-play > .col-md-8,
    .game #game-play > .col-md-8 {
        float: left;
        width: 422px; /* 65% of 650 */
    }
    .home #game-play > .col-md-4,
    .game #game-play > .col-md-4 {
        float: left;
        width: calc(750px - 422px);
    }
    .home #game-play > .col-md-4,
    .game #game-play > .col-md-4,
    .home #game-play > .col-md-4 .tab-content {
        height: calc(422px - 30px);
    }
    .home #game-play > .col-md-4 .tab-pane,
    .home #game-play > .col-md-4 .tab-pane#info-text .panel-body {
        height: calc(422px - 75px);
    }
    .home #game-play > .col-md-4 .panel-body.heighted {
        height: calc(422px - 204px);
    }
    .game #game-play > .col-md-4 .tab-content {
        height: calc(422px - 350px);
    }

    .game #game-play > .col-md-4 .tab-pane {
        height: calc(422px - 365px);
    }
}

@media (max-width: 767px) and (max-height: 700px) {
    .messages .alert,
    .alert {
        font-size: 13px;
        font-size: 1.3rem;
    }
    .messages .alert p,
    .alert p {
        margin: 0 15px 0 0;
    }
    .messages .alert .btn,
    .alert .btn {
        font-size: 12px;
        font-size: 1.2rem;
    }

    .game #game-menu-phone button {
        padding: 5px;
        white-space: nowrap;
        display: block;
        text-overflow: ellipsis;
        overflow: hidden;
        font-size: 13px;
        font-size: 1.3rem;
    }
}

@media (max-width: 767px) {
    .game #chessboard {
        height: auto;
    }
    .game #game-play > .col-md-8 {
        margin: 0 auto;
        width: 60vh;
        max-width: calc(100vw - 32px);
    }
}

@media (max-width: 400px) {
    #game-over .modal-dialog {width: calc(100% - 15px); min-width: 302px;}

    #game-over .modal-body {padding: 15px 0;}
}