body {
    margin: 0;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    background: #282828;
    min-width: 320px;
    color: #b2b2b2;
    height: 100vh;
}
body > .piece-417db{
    display: none !important;
}
.main-wrapper {
    max-width: 1170px;
    margin: auto;
    position: relative;
}

.black-3c85d.highlightSqrDark {
  -webkit-box-shadow: inset 0 0 2px 2px rgba(0,0,0,0.4);
  -moz-box-shadow: inset 0 0 2px 2px rgba(0,0,0,0.4);
  box-shadow: inset 0 0 2px 2px rgba(0,0,0,0.4);
  background: #837f75;
}
.white-1e1d7.highlightSqrDark {
  -webkit-box-shadow: inset 0 0 2px 2px rgba(0,0,0,0.4);
  -moz-box-shadow: inset 0 0 2px 2px rgba(0,0,0,0.4);
  box-shadow: inset 0 0 2px 2px rgba(0,0,0,0.4);
  background: #a2b0a6;
}
.highlightSqr {
  -webkit-box-shadow: inset 0 0 4px 4px rgba(0,0,0,0.4);
  -moz-box-shadow: inset 0 0 4px 4px rgba(0,0,0,0.4);
  box-shadow: inset 0 0 4px 4px rgba(0,0,0,0.4);
}
.black-3c85d.highlightSqrGreen {
  -webkit-box-shadow: inset 0 0 2px 2px rgba(0,0,0,0.4);
  -moz-box-shadow: inset 0 0 2px 2px rgba(0,0,0,0.4);
  box-shadow: inset 0 0 2px 2px rgba(0,0,0,0.4);
  background: #56b070;
}
.white-1e1d7.highlightSqrGreen {
  -webkit-box-shadow: inset 0 0 2px 2px rgba(0,0,0,0.4);
  -moz-box-shadow: inset 0 0 2px 2px rgba(0,0,0,0.4);
  box-shadow: inset 0 0 2px 2px rgba(0,0,0,0.4);
  background: #56b070;
}

.no-padding
{
    padding: 0;
}

.tab-content
{
    overflow: hidden;
}

.chess-wrapper {
    padding: 0 15px;
    position: relative;
    height: 100vh;
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: center;
}
.chess-wrapper2 {
    padding: 0 15px;
    position: relative;
}

.scores {
    width: 25%;
    float: right;
    padding-left: 10px;
    padding-bottom: 15px;
}
    .grayout {
        opacity: 0.1;
    }
    .score1
    {
        height: 44px;
        line-height: 44px;
        text-align: center;
        font-size: 20px;
        color: #fff;
        background: #282828;
        margin-top: 17px;
        margin-left: 10px;
    }

    .scorewhite {
        color: #282828; !important;
        background: #ffffff; !important;
        border: 1px solid #d9d9de; !important;
    }

    .score2
    {
        display: none;
        color: #282828;
        background: #ffffff;
        border: 1px solid #d9d9de;
    }
.score-progress
{
    display: block;
    margin-top: 5px;
    border: 1px solid #e0e0e0;
    border-radius: 2px;
    background: #fff;
    height: 4px;
    clear: both;
    position: relative;
}
    .progress
    {
        margin-top: -1px;
        border: 1px solid white;
        height: 4px;
        border-radius: 2px;
        background: #282828;
        min-width: 4px;
        min-height: 4px;
    }
    .progress:after
    {
        content: '';
        position: absolute;
        border-right: 1px solid #e65757;
        width: 50%;
        height: 8px;
        margin-top: -3px;
    }

.controls a:link,
.controls2 a:link,
.pieces a:link {
    text-decoration: none;
}

.controls {
    width: 75%;
    float: left;
    margin-top: 17px;
    height: 44px;
    line-height: 44px;
    background: #e0e0e0;
    border: 1px solid #d9d9de;
    top: calc(50% - -10px) !important;
}
    .controls .ctrl-btn {
        float: left;
        padding: 10px 0px 0 0px;
        font-size: 10px;
        text-align: center;
    }
    .controls .ctrl-btn.current,
    .controls .ctrl-btn:hover:not(.inactive) {
        background-color: #cdcdcd;
    }
    .controls a:link,
    .controls a:visited {
        color: #282828;
        text-decoration: none;
    }
    .controls .icon-reset {
        width: 30%;
        background: url(../img/icon-reset.png) no-repeat center 8px;
    }
    .controls .icon-king {
        width: 35%;
        background: url(../img/icon-king.png) no-repeat center 6px;
    }
    .controls .icon-rotate {
        width: 35%;
        background: url(../img/icon-rotate.png) no-repeat center 6px;
    }
.controls2 {
    background: #e0e0e0;
    border: 1px solid #d9d9de;
    height: 42px;
    line-height: 42px;
    font-size: 12px;
    text-align: center;
    padding: 0 15px;
}
    .controls2 .ctrl-btn {
        color: #38363e;
        float: left;
        display: block;
        width: 42px;
        height: 42px;
        overflow: hidden;
    }
    .controls2 .ctrl-btn.current,
    .controls2 .ctrl-btn:hover:not(.inactive) {
        background: #cdcdcd;
    }
        .controls2 .ctrl-btn i {
            font-size: 42px;
            line-height: 42px;
            display: block !important;
            top: 0;
        }
        .controls2 .ctrl-btn i.icon {
            width: 42px;
            height: 42px;
            display: inline-block;
            background: url(../img/controls2.png) no-repeat;
        }
    .controls2 .ctrl-btn.inactive {
        color: #cdcdcd;
    }

    .controls2 .ctrl-btn i.icon-play {
        background-position: center -0px;
    }
    .controls2 .ctrl-btn i.icon-stop {
        background-position: center -42px;
    }

    .controls2 .ctrl-btn i.icon-black {
        background-position: center -84px;
    }
    .controls2 .ctrl-btn.inactive i.icon-black {
        background-position: center -168px;
    }
    .controls2 .ctrl-btn i.icon-white {
        background-position: center -126px;
    }
    .controls2 .ctrl-btn.inactive i.icon-white {
        background-position: center -168px;
    }
    .controls2 .ctrl-btn i.icon-less {
        background-position: center -210px;
    }
    .controls2 .ctrl-btn.inactive i.icon-less {
        background-position: center -252px;
    }
    .controls2 .ctrl-btn i.icon-more {
        background-position: center -294px;
    }
    .controls2 .ctrl-btn.inactive i.icon-more {
        background-position: center -336px;
    }
    .controls2 .ctrl-btn.icon6 i {
        font-size: 35px;
    }
    .controls2 .ctrl-btn.icon8 i {
        font-size: 30px;
    }

.rating-block
{
    font-weight: 300;
    background: #e0e0e0;
    border: 1px solid #d9d9de;
    margin: 10px 15px;
    padding: 18px;
}
    .rating-block table {
        width: 100%;
        line-height: 24px;
    }
    .rating-block table td:last-child {
        text-align: right;
        font-weight: 400;
    }
.pieces {
    background: #e0e0e0;
    border: 1px solid #d9d9de;
    height: 42px;
    line-height: 42px;
    margin-top: 7px;

    text-align: right;
    padding-right: 12px;
    font-size: 10px;
}
    .pieces
    {

    }

.info {
    margin-top: 10px;
    background: #e0e0e0;
    height: 32px;
    line-height: 34px;
    text-align: center;
    top: calc(50% - 230px) !important;
}
    .info i {
        font-size: 24px;
        vertical-align: top;
        line-height: 30px;
    }

#board {
    margin: 8px auto 0 auto;
}
    #board .board-b72b1 {
        margin: auto;
    }
#board2 {
    margin: 4px auto 0 auto;
    clear: both;
}

.scores
{
    float: none;
    width: auto;
    padding: 0;
}
.score1,
.score2 {
    position: absolute;
    margin: 0;
    width: 50px;
    height: 25px;
    line-height: 25px;
    font-size: 12px;
    text-align: center;
    left: 10px;
}
.score-progress
{
    position: absolute;
    left: 27px;
    top: 172px;
    width: 18px;
    height: 425px;
    border-radius: 8px;
    margin: 0;
}
    .progress
    {
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
        min-width: 18px;
        min-height: 18px;
        margin-top: 0;
        margin-left: -1px;
    }
        .progress:after
        {
            border-right: none;
            border-bottom: 1px solid #e65757;
            width: 34px;
            height: 50%;
            margin-top: 0;
            margin-left: -9px;
        }
.controls {
    position: absolute;
    margin: 0;
    bottom: 10px;
    width: auto;
}
    .controls .ctrl-btn {
        width: auto;
        padding: 0px 32px 0 48px;
        text-align: left;
        background-position: 25px 12px;
    }
.controls2 {
    position: absolute;
    right: 30px;
    top: calc(50% - 190px) !important;
    height: auto;
    line-height: 10px;
    padding: 0;

    border: none;
    background: none;
}
    .controls2 .ctrl-btn {
        float: none;
        width: 94px;
        height: 94px;
        border: 1px solid #d9d9de;
        border-bottom: none;
        margin: 0;
        background: #e0e0e0;
    }
    .controls2 .ctrl-btn.icon3,
    .controls2 .ctrl-btn:last-child {
        border-bottom: 1px solid #d9d9de;
    }
    .controls2 .ctrl-btn.icon3 {
        margin-bottom: 55px;
    }
    .controls2 .icon-black,
    .controls2 .icon-white,
    .controls2 .icon-more,
    .controls2 .icon-less,
    .controls2 .icon-play,
    .controls2 .icon-stop {
        width: auto !important;
        float: none !important;
        margin: 0;
    }
    .controls2 .ctrl-btn.margin {
        margin-left: 0;
    }
    .controls2 .ctrl-btn i {
        margin-top: 17px;
    }

.chess-wrapper {
    padding: 0 155px 75px 85px;
    clear: both;
}
.chess-wrapper2 {
    padding-right: 155px;
    padding-left: 20px;
    clear: both;
}

.pieces {
    display: none;
}
.spare-pieces-7492f {
    position: static;
    background: #e0e0e0;
    border: 1px solid #d9d9de;
    padding-left: 0 !important;
    text-align: center;
}
    .spare-pieces-7492f img {
        margin-left: 2%;
        margin-right: 2%;
    }
.spare-pieces-top-4028b {
    margin-bottom: 10px;
}
.spare-pieces-bottom-ae20f {
    margin-top: 10px;
}

.chess-wrapper {
    padding: 0 556px 25px 114px;
}
.chess-wrapper2 {
    padding: 0 556px 25px 114px;
}

.score1,
.score2 {
    left: 25px;
}

.score-progress {
    left: 42px;
}

.info {
    width: 360px;
    padding: 0;
    position: absolute;
    right: 166px;
    margin: 0;
}

.controls2 {
    right: 166px;
    border: 1px solid #d9d9de;
    background: #e0e0e0;
    width: 360px;
}
.controls2 .ctrl-btn {
    float: left;
    margin: 0 !important;
    border: none;
    width: 119px;
}
.controls2 .ctrl-btn.icon1,
.controls2 .ctrl-btn.icon2,
.controls2 .ctrl-btn.icon4,
.controls2 .ctrl-btn.icon6,
.controls2 .ctrl-btn.icon8,
.controls2 .ctrl-btn.icon7{
    border-right: 1px solid #d9d9de;
}
.controls2 .ctrl-btn.icon1,
.controls2 .ctrl-btn.icon2,
.controls2 .ctrl-btn.icon6,
.controls2 .ctrl-btn.icon8,
.controls2 .ctrl-btn.icon3 {
    border-bottom: 1px solid #d9d9de;
}
.controls2 .ctrl-btn.icon4,
.controls2 .ctrl-btn.icon5 {
    float: left;
    margin: 0 !important;
    width: 179px;
    border-bottom: none;
}
.controls2 .ctrl-btn.icon8 {
    border-bottom: none;
}
.controls {
    right: 166px;
    width: 360px;
}