html,
body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    font-family: "Segoe UI", Arial, Helvetica, sans-serif;
    font-size: 100%;
    user-select: none;
    -moz-user-select: none;
    background-color: black;
    color: #b1b4bd;
}

ul {
    list-style-type: disc;
    margin: .3em 0 0 1.6em;
    padding: 0;
}

li {
    margin-bottom: .1em;
}

#fen {
    display: none;
}

#logo svg .shp0 {
    fill: url(#grd1);
}

#logo svg .shp1 {
    fill: url(#grd2);
}

#logo svg .shp2 {
    fill: #ffffff;
}

#logo svg .shp3 {
    fill: #000000;
    stroke: #000000;
    stroke-linecap: round;
    stroke-width: 21.9;
}

#logo {
    height: 69px;
    margin-top: 12px;
    position: relative;
}

#logotextmain {
    position: absolute;
    line-height: 100%;
    left: 75px;
    font-size: 25px;
    color: white;
    font-weight: 300;
}

#logotextsub {
    position: absolute;
    left: 75px;
    font-size: 10px;
    color: white;
    font-weight: 400;
    width: 190px;
}

#container {
    position: relative;
    width: 830px;
    background-color: #000000;
    margin: 0 auto;
    padding: 0;
    height: 100vh;
}

#container:after {
    content: "";
    display: table;
    clear: both;
}

/* Windows */

#wMoves {
    height: 155px;
    min-height: 79px;
}

#wHistory {
    height: 115px;
}

#wGraph {
    height: 162px;
    background-color: #697686ff;
}

#wOpening {
    height: 115px;
    min-height: 79px;
}

#wStatic {
    height: 115px;
    min-height: 79px;
}

#wEdit {
    height: 122px;
    min-height: 122px;
    min-width: 298px;
}

/* Chessboard */

#boxBoard {
    width: 356px;
    height: 364px;
    text-align: center;
    border-width: 2px;
    border-style: solid;
    border-color: rgba(0, 0, 0, 0.3);
    background-color: #609fb1;
    transform-origin: left top 0px;
    transform: scale(1);
}

#boxBoardOuter {
    margin: 61px 73.5px 8px 73.5px;
    position: relative;
}

#boardWrapper {
    position: relative;
}

.cb {
    position: relative;
    font-size: 14px;
    color: #000000;
    font-weight: 600;
    text-align: center;
}

.cb>div {
    position: absolute;
    width: 40px;
    height: 40px;
    background-repeat: no-repeat;
    background-position: center;
    font-weight: bold;
    line-height: 40px;
}

#cbTable {
    font-size: 10px;
    padding: 0;
    margin: auto;
    color: rgba(0, 0, 0, 0.5);
    font-weight: 600;
    border-collapse: collapse;
}

#cbTable td {
    min-width: 16px;
    line-height: 18px;
    height: 20.5px;
    padding: 0;
    margin: 0;
}

#cbTable td.cbCell {
    padding: 0;
    vertical-align: top;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(0, 0, 0, 0.25);
    width: 320px;
    height: 320px;
}

.cb>div {
    background-position: center;
    font-size: 80%;
    color: rgba(0, 77, 114, 0.5);
    background-repeat: no-repeat;
}

.cb>.l {
    background-color: rgba(255, 255, 255, 0.6);
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.7));
}

.cb>.d {
    background-color: rgba(255, 255, 255, 0.2);
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.25));
}

.cb>.h2:before {
    content: "";
    background-color: transparent;
    display: block;
    width: 32px !important;
    height: 32px !important;
    border: 4px solid #bb0000;
    border-radius: 12px;
    background-repeat: no-repeat;
    background-position: center;
    box-shadow: inset 0px 0px 4px #bb0000;
}

.cb>.h0:before {
    content: "";
    background-color: transparent;
    display: block;
    width: 32px !important;
    height: 32px !important;
    border: 4px solid rgba(128, 0, 128, 1);
    border-radius: 12px;
    background-repeat: no-repeat;
    background-position: center;
    box-shadow: inset 0px 0px 4px rgba(128, 0, 128, 1);
}

.cb>.h1:before {
    position: absolute;
    content: "";
    background-color: transparent;
    display: block;
    width: 32px !important;
    height: 32px !important;
    border: 4px solid rgba(0, 77, 114, 0.5);
    border-radius: 12px;
    background-repeat: no-repeat;
    background-position: center;
    box-shadow: inset 0px 0px 4px rgba(0, 77, 114, 0.5);
}

.cb>.h3:before {
    content: "";
    background-color: transparent;
    display: block;
    width: 32px !important;
    height: 32px !important;
    border: 4px solid rgba(0, 0, 160, 1);
    border-radius: 12px;
    background-repeat: no-repeat;
    background-position: center;
    box-shadow: inset 0px 0px 4px rgba(32, 64, 160, 1);
}

.cb>.k:before {
    content: "";
    display: block;
    width: 40px;
    height: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 45 45'%3E%3Cg fill='none' fill-rule='evenodd' stroke='%23000' stroke-linejoin='round' stroke-linecap='round' stroke-width='1.5'%3E%3Cg stroke-linejoin='miter'%3E%3Cpath d='m22.5 11.63v-5.63' stroke='%23000'/%3E%3Cpath d='m22.5 25c0 0 4.5-7.5 3-10.5 0 0-1-2.5-3-2.5-2 0-3 2.5-3 2.5-1.5 3 3 10.5 3 10.5' fill='%23000' stroke-linecap='butt'/%3E%3C/g%3E%3Cg stroke='%23000'%3E%3Cpath d='m11.5 37c5.5 3.5 15.5 3.5 21 0v-7c0 0 9-4.5 6-10.5-4-6.5-13.5-3.5-16 4v3.5-3.5c-3.5-7.5-13-10.5-16-4-3 6 5 10 5 10v7.5z' fill='%23000'/%3E%3Cpath d='m20 8h5' stroke-linejoin='miter'/%3E%3C/g%3E%3Cg stroke='%23ececec'%3E%3Cpath d='m32 29.5c0 0 8.5-4 6.03-9.65-3.88-5.85-13.03-1.85-15.53 4.65l.01 2.1-.01-2.1c-2.5-6.5-12.594-10.5-15.503-4.65-2.497 5.65 4.853 9 4.853 9'/%3E%3Cpath d='m11.5 30c5.5-3 15.5-3 21 0m-21 3.5c5.5-3 15.5-3 21 0m-21 3.5c5.5-3 15.5-3 21 0'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.cb>.q:before {
    content: "";
    display: block;
    width: 40px;
    height: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 45 45'%3E%3Cg fill-rule='evenodd' stroke='%23000' stroke-linejoin='round' stroke-linecap='round' stroke-width='1.5'%3E%3Cg stroke='none'%3E%3Ccircle cx='6' cy='12' r='2.75'/%3E%3Ccircle cx='14' cy='9' r='2.75'/%3E%3Ccircle cx='22.5' cy='8' r='2.75'/%3E%3Ccircle cx='31' cy='9' r='2.75'/%3E%3Ccircle cx='39' cy='12' r='2.75'/%3E%3C/g%3E%3Cg stroke-linecap='butt'%3E%3Cpath d='m9 26c8.5-1.5 21-1.5 27 0l2.5-12.5-7.5 11.5-.3-14.1-5.2 13.6-3-14.5-3 14.5-5.2-13.6-.3 14.1-7.5-11.5 2.5 12.5z' stroke='%23000'/%3E%3Cpath d='m9 26c0 2 1.5 2 2.5 4 1 1.5 1 1 .5 3.5-1.5 1-1.5 2.5-1.5 2.5-1.5 1.5.5 2.5.5 2.5 6.5 1 16.5 1 23 0 0 0 1.5-1 0-2.5 0 0 .5-1.5-1-2.5-.5-2.5-.5-2 .5-3.5 1-2 2.5-2 2.5-4-8.5-1.5-18.5-1.5-27 0z'/%3E%3Cpath d='M11 38.5A35 35 1 0 0 34 38.5' fill='none' stroke='%23000'/%3E%3C/g%3E%3Cg fill='none' stroke='%23ececec'%3E%3Cpath d='M11 29A35 35 1 0 1 34 29'/%3E%3Cpath d='m12.5 31.5h20'/%3E%3Cpath d='M11.5 34.5A35 35 1 0 0 33.5 34.5'/%3E%3Cpath d='M10.5 37.5A35 35 1 0 0 34.5 37.5'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.cb>.r:before {
    content: "";
    display: block;
    width: 40px;
    height: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 45 45'%3E%3Cg fill-rule='evenodd' stroke='%23000' stroke-linejoin='round' stroke-linecap='round' stroke-width='1.5'%3E%3Cg stroke-linecap='butt'%3E%3Cpath d='m9 39h27v-3h-27v3z'/%3E%3Cpath d='m12.5 32l1.5-2.5h17l1.5 2.5h-20z'/%3E%3Cpath d='m12 36v-4h21v4h-21z'/%3E%3Cpath d='m14 29.5v-13h17v13h-17z' stroke-linejoin='miter'/%3E%3Cpath d='m14 16.5l-3-2.5h23l-3 2.5h-17z'/%3E%3Cpath d='m11 14v-5h4v2h5v-2h5v2h5v-2h4v5h-23z'/%3E%3C/g%3E%3Cg fill='none' stroke='%23ececec' stroke-linejoin='miter' stroke-width='1'%3E%3Cpath d='m12 35.5h21'/%3E%3Cpath d='m13 31.5h19'/%3E%3Cpath d='m14 29.5h17'/%3E%3Cpath d='m14 16.5h17'/%3E%3Cpath d='m11 14h23'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.cb>.b:before {
    content: "";
    display: block;
    width: 40px;
    height: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 45 45'%3E%3Cg fill='none' fill-rule='evenodd' stroke='%23000' stroke-linejoin='round' stroke-linecap='round' stroke-width='1.5'%3E%3Cg fill='%23000' stroke='%23000' stroke-linecap='butt'%3E%3Cpath d='m9 36c3.39-.97 10.11.43 13.5-2 3.39 2.43 10.11 1.03 13.5 2 0 0 1.65.54 3 2-.68.97-1.65.99-3 .5-3.39-.97-10.11.46-13.5-1-3.39 1.46-10.11.03-13.5 1-1.354.49-2.323.47-3-.5 1.354-1.94 3-2 3-2z'/%3E%3Cpath d='m15 32c2.5 2.5 12.5 2.5 15 0 .5-1.5 0-2 0-2 0-2.5-2.5-4-2.5-4 5.5-1.5 6-11.5-5-15.5-11 4-10.5 14-5 15.5 0 0-2.5 1.5-2.5 4 0 0-.5.5 0 2z'/%3E%3Cpath d='M25 8A2.5 2.5 0 1 1 20 8 2.5 2.5 0 1 1 25 8z'/%3E%3C/g%3E%3Cpath d='m17.5 26h10m-12.5 4h15m-7.5-14.5v5m-2.5-2.5h5' stroke='%23ececec' stroke-linejoin='miter'/%3E%3C/g%3E%3C/svg%3E");
}

.cb>.n:before {
    content: "";
    display: block;
    width: 40px;
    height: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 45 45'%3E%3Cg fill='none' fill-rule='evenodd' stroke='%23000' stroke-linejoin='round' stroke-linecap='round' stroke-width='1.5'%3E%3Cg fill='%23000' stroke='%23000'%3E%3Cpath d='m22 10c10.5 1 16.5 8 16 29h-23c0-9 10-6.5 8-21'/%3E%3Cpath d='m24 18c.38 2.91-5.55 7.37-8 9-3 2-2.82 4.34-5 4-1.042-.94 1.41-3.04 0-3-1 0 .19 1.23-1 2-1 0-4 1-4-4 0-2 6-12 6-12 0 0 1.89-1.9 2-3.5-.73-.994-.5-2-.5-3 1-1 3 2.5 3 2.5h2c0 0 .78-1.992 2.5-3 1 0 1 3 1 3'/%3E%3C/g%3E%3Cg fill='%23ececec'%3E%3Cg stroke='%23ececec'%3E%3Cpath d='M9.5 25.5A.5 .5 0 1 1 8.5 25.5 .5 .5 0 1 1 9.5 25.5z'/%3E%3Cpath d='M15 15.5A.5 1.5 0 1 1 14 15.5 .5 1.5 0 1 1 15 15.5z' transform='matrix(.866.5-.5.866 9.693-5.173)'/%3E%3C/g%3E%3Cpath d='m24.55 10.4l-.45 1.45.5.15c3.15 1 5.65 2.49 7.9 6.75 2.25 4.26 3.25 10.31 2.75 20.25l-.05.5h2.25l.05-.5c.5-10.06-.88-16.85-3.25-21.34-2.37-4.49-5.79-6.64-9.19-7.16l-.51-.1' stroke='none'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.cb>.p:before {
    content: "";
    display: block;
    width: 40px;
    height: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 45 45'%3E%3Cpath d='m22 9c-2.21 0-4 1.79-4 4 0 .89.29 1.71.78 2.38-1.95 1.12-3.28 3.21-3.28 5.62 0 2.03.94 3.84 2.41 5.03-3 1.06-7.41 5.55-7.41 13.47h23c0-7.92-4.41-12.41-7.41-13.47 1.47-1.19 2.41-3 2.41-5.03 0-2.41-1.33-4.5-3.28-5.62.49-.67.78-1.49.78-2.38 0-2.21-1.79-4-4-4z' stroke='%23000' stroke-linecap='round' stroke-width='1.5'/%3E%3C/svg%3E");
}

.cb>.K:before {
    content: "";
    display: block;
    width: 40px;
    height: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 45 45'%3E%3Cg fill='none' fill-rule='evenodd' stroke='%23000' stroke-linejoin='round' stroke-linecap='round' stroke-width='1.5'%3E%3Cg stroke-linejoin='miter'%3E%3Cpath d='m22.5 11.63v-5.63'/%3E%3Cpath d='m20 8h5'/%3E%3Cpath d='m22.5 25c0 0 4.5-7.5 3-10.5 0 0-1-2.5-3-2.5-2 0-3 2.5-3 2.5-1.5 3 3 10.5 3 10.5' fill='%23fff' stroke-linecap='butt'/%3E%3C/g%3E%3Cpath d='m11.5 37c5.5 3.5 15.5 3.5 21 0v-7c0 0 9-4.5 6-10.5-4-6.5-13.5-3.5-16 4v3.5-3.5c-3.5-7.5-13-10.5-16-4-3 6 5 10 5 10v7.5z' fill='%23fff'/%3E%3Cpath d='m11.5 30c5.5-3 15.5-3 21 0'/%3E%3Cpath d='m11.5 33.5c5.5-3 15.5-3 21 0'/%3E%3Cpath d='m11.5 37c5.5-3 15.5-3 21 0'/%3E%3C/g%3E%3C/svg%3E");
}

.cb>.Q:before {
    content: "";
    display: block;
    width: 40px;
    height: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 45 45' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cdefs%3E%3Cpath id='0' d='M9 13A2 2 0 1 1 5 13 2 2 0 1 1 9 13z'/%3E%3C/defs%3E%3Cg fill='%23fff' fill-rule='evenodd' stroke='%23000' stroke-linejoin='round' stroke-linecap='round' stroke-width='1.5'%3E%3Cuse transform='translate(-1-1)' xlink:href='%230'/%3E%3Cuse transform='translate(15.5-5.5)' xlink:href='%230'/%3E%3Cuse transform='translate(32-1)' xlink:href='%230'/%3E%3Cuse transform='translate(7-4.5)' xlink:href='%230'/%3E%3Cuse transform='translate(24-4)' xlink:href='%230'/%3E%3Cg stroke-linecap='butt'%3E%3Cpath d='m9 26c8.5-1.5 21-1.5 27 0l2-12-7 11v-14l-5.5 13.5-3-15-3 15-5.5-14v14.5l-7-11 2 12z'/%3E%3Cpath d='m9 26c0 2 1.5 2 2.5 4 1 1.5 1 1 .5 3.5-1.5 1-1.5 2.5-1.5 2.5-1.5 1.5.5 2.5.5 2.5 6.5 1 16.5 1 23 0 0 0 1.5-1 0-2.5 0 0 .5-1.5-1-2.5-.5-2.5-.5-2 .5-3.5 1-2 2.5-2 2.5-4-8.5-1.5-18.5-1.5-27 0z'/%3E%3C/g%3E%3Cg fill='none'%3E%3Cpath d='m11.5 30c3.5-1 18.5-1 22 0'/%3E%3Cpath d='m12 33.5c6-1 15-1 21 0'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.cb>.R:before {
    content: "";
    display: block;
    width: 40px;
    height: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 45 45'%3E%3Cg fill='%23fff' fill-rule='evenodd' stroke='%23000' stroke-linejoin='round' stroke-linecap='round' stroke-width='1.5'%3E%3Cg stroke-linecap='butt'%3E%3Cpath d='m9 39h27v-3h-27v3z'/%3E%3Cpath d='m12 36v-4h21v4h-21z'/%3E%3Cpath d='m11 14v-5h4v2h5v-2h5v2h5v-2h4v5'/%3E%3C/g%3E%3Cpath d='m34 14l-3 3h-17l-3-3'/%3E%3Cpath d='m31 17v12.5h-17v-12.5' stroke-linejoin='miter' stroke-linecap='butt'/%3E%3Cpath d='m31 29.5l1.5 2.5h-20l1.5-2.5'/%3E%3Cpath d='m11 14h23' fill='none' stroke='%23000' stroke-linejoin='miter'/%3E%3C/g%3E%3C/svg%3E");
}

.cb>.B:before {
    content: "";
    display: block;
    width: 40px;
    height: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 45 45'%3E%3Cg fill='none' fill-rule='evenodd' stroke='%23000' stroke-linejoin='round' stroke-linecap='round' stroke-width='1.5'%3E%3Cg fill='%23fff' stroke-linecap='butt'%3E%3Cpath d='m9 36c3.39-.97 10.11.43 13.5-2 3.39 2.43 10.11 1.03 13.5 2 0 0 1.65.54 3 2-.68.97-1.65.99-3 .5-3.39-.97-10.11.46-13.5-1-3.39 1.46-10.11.03-13.5 1-1.354.49-2.323.47-3-.5 1.354-1.94 3-2 3-2z'/%3E%3Cpath d='m15 32c2.5 2.5 12.5 2.5 15 0 .5-1.5 0-2 0-2 0-2.5-2.5-4-2.5-4 5.5-1.5 6-11.5-5-15.5-11 4-10.5 14-5 15.5 0 0-2.5 1.5-2.5 4 0 0-.5.5 0 2z'/%3E%3Cpath d='M25 8A2.5 2.5 0 1 1 20 8 2.5 2.5 0 1 1 25 8z'/%3E%3C/g%3E%3Cpath d='m17.5 26h10m-12.5 4h15m-7.5-14.5v5m-2.5-2.5h5' stroke-linejoin='miter'/%3E%3C/g%3E%3C/svg%3E");
}

.cb>.N:before {
    content: "";
    display: block;
    width: 40px;
    height: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 45 45'%3E%3Cg fill='none' fill-rule='evenodd' stroke='%23000' stroke-linejoin='round' stroke-linecap='round' stroke-width='1.5'%3E%3Cg fill='%23fff'%3E%3Cpath d='m22 10c10.5 1 16.5 8 16 29h-23c0-9 10-6.5 8-21'/%3E%3Cpath d='m24 18c.38 2.91-5.55 7.37-8 9-3 2-2.82 4.34-5 4-1.042-.94 1.41-3.04 0-3-1 0 .19 1.23-1 2-1 0-4 1-4-4 0-2 6-12 6-12 0 0 1.89-1.9 2-3.5-.73-.994-.5-2-.5-3 1-1 3 2.5 3 2.5h2c0 0 .78-1.992 2.5-3 1 0 1 3 1 3'/%3E%3C/g%3E%3Cg fill='%23000'%3E%3Cpath d='M9.5 25.5A.5 .5 0 1 1 8.5 25.5 .5 .5 0 1 1 9.5 25.5z'/%3E%3Cpath d='M15 15.5A.5 1.5 0 1 1 14 15.5 .5 1.5 0 1 1 15 15.5z' transform='matrix(.866.5-.5.866 9.693-5.173)'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.cb>.P:before {
    content: "";
    display: block;
    width: 40px;
    height: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 45 45'%3E%3Cpath d='m22 9c-2.21 0-4 1.79-4 4 0 .89.29 1.71.78 2.38-1.95 1.12-3.28 3.21-3.28 5.62 0 2.03.94 3.84 2.41 5.03-3 1.06-7.41 5.55-7.41 13.47h23c0-7.92-4.41-12.41-7.41-13.47 1.47-1.19 2.41-3 2.41-5.03 0-2.41-1.33-4.5-3.28-5.62.49-.67.78-1.49.78-2.38 0-2.21-1.79-4-4-4z' fill='%23fff' stroke='%23000' stroke-linecap='round' stroke-width='1.5'/%3E%3C/svg%3E");
}

.cb>.S:before {
    content: "";
    display: block;
    width: 40px;
    height: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-3 -3 48 48'%3E%3Cpath d='M32.91,22.97l-19.18,-15.9c-0.14,-0.11 -0.34,-0.14 -0.5,-0.06c-0.16,0.08 -0.27,0.24 -0.27,0.43v25.22c0,0.19 0.11,0.35 0.28,0.43c0.17,0.07 0.37,0.04 0.51,-0.08l6.08,-5.63l4.41,9.25c0.64,1.33 2.24,1.89 3.57,1.26c1.33,-0.64 1.89,-2.24 1.26,-3.57l-4.44,-9.31l8.07,-1.21c0.18,-0.03 0.32,-0.17 0.37,-0.34c0.05,-0.18 -0.01,-0.36 -0.15,-0.48z' fill='%23fff' stroke='%23000' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* Sidebars */

#materialWrapper {
    position: absolute;
    top: 0px;
    bottom: 0px;
    right: -26px;
    width: 24px;
    color: white;
    opacity: 0.25;
    font-size: 10px;
    font-weight: 600;
    overflow: hidden;
}

#materialWrapper>div {
    position: absolute;
    right: 0px;
    bottom: 0px;
    height: 16px;
    width: 24px;
    background-repeat: no-repeat;
    background-position: center;
    background-color: #000000
}

#materialWrapper>.k {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 45 45'%3E%3Cg fill='%23fff' fill-rule='evenodd' stroke-linejoin='round' stroke-linecap='round' stroke-width='1.5'%3E%3Cg stroke='%23fff' stroke-linejoin='miter'%3E%3Cpath d='m22.5 11.63v-5.63' stroke='%23fff'/%3E%3Cpath d='m22.5 25c0 0 4.5-7.5 3-10.5 0 0-1-2.5-3-2.5-2 0-3 2.5-3 2.5-1.5 3 3 10.5 3 10.5' fill='%23fff' stroke-linecap='butt'/%3E%3C/g%3E%3Cg stroke='%23fff'%3E%3Cpath d='m11.5 37c5.5 3.5 15.5 3.5 21 0v-7c0 0 9-4.5 6-10.5-4-6.5-13.5-3.5-16 4v3.5-3.5c-3.5-7.5-13-10.5-16-4-3 6 5 10 5 10v7.5z' fill='%23fff'/%3E%3Cpath d='m20 8h5' stroke-linejoin='miter'/%3E%3C/g%3E%3Cg stroke='%23fff'%3E%3Cpath d='m32 29.5c0 0 8.5-4 6.03-9.65-3.88-5.85-13.03-1.85-15.53 4.65l.01 2.1-.01-2.1c-2.5-6.5-12.594-10.5-15.503-4.65-2.497 5.65 4.853 9 4.853 9'/%3E%3Cpath d='m11.5 30c5.5-3 15.5-3 21 0m-21 3.5c5.5-3 15.5-3 21 0m-21 3.5c5.5-3 15.5-3 21 0'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

#materialWrapper>.q {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 45 45'%3E%3Cg fill='%23fff' fill-rule='evenodd' stroke-linejoin='round' stroke-linecap='round' stroke-width='1.5'%3E%3Cg stroke='%23fff'%3E%3Ccircle cx='6' cy='12' r='2.75'/%3E%3Ccircle cx='14' cy='9' r='2.75'/%3E%3Ccircle cx='22.5' cy='8' r='2.75'/%3E%3Ccircle cx='31' cy='9' r='2.75'/%3E%3Ccircle cx='39' cy='12' r='2.75'/%3E%3C/g%3E%3Cg stroke-linecap='butt'%3E%3Cpath d='m9 26c8.5-1.5 21-1.5 27 0l2.5-12.5-7.5 11.5-.3-14.1-5.2 13.6-3-14.5-3 14.5-5.2-13.6-.3 14.1-7.5-11.5 2.5 12.5z' stroke='%23fff'/%3E%3Cpath d='m9 26c0 2 1.5 2 2.5 4 1 1.5 1 1 .5 3.5-1.5 1-1.5 2.5-1.5 2.5-1.5 1.5.5 2.5.5 2.5 6.5 1 16.5 1 23 0 0 0 1.5-1 0-2.5 0 0 .5-1.5-1-2.5-.5-2.5-.5-2 .5-3.5 1-2 2.5-2 2.5-4-8.5-1.5-18.5-1.5-27 0z'/%3E%3Cpath d='M11 38.5A35 35 1 0 0 34 38.5' fill='none' stroke='%23fff'/%3E%3C/g%3E%3Cg fill='none' stroke='%23fff'%3E%3Cpath d='M11 29A35 35 1 0 1 34 29'/%3E%3Cpath d='m12.5 31.5h20'/%3E%3Cpath d='M11.5 34.5A35 35 1 0 0 33.5 34.5'/%3E%3Cpath d='M10.5 37.5A35 35 1 0 0 34.5 37.5'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

#materialWrapper>.r {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 45 45'%3E%3Cg fill='%23fff' fill-rule='evenodd' stroke-linejoin='round' stroke-linecap='round' stroke-width='1.5'%3E%3Cg stroke='%23fff' stroke-linecap='butt'%3E%3Cpath d='m9 39h27v-3h-27v3z'/%3E%3Cpath d='m12.5 32l1.5-2.5h17l1.5 2.5h-20z'/%3E%3Cpath d='m12 36v-4h21v4h-21z'/%3E%3Cpath d='m14 29.5v-13h17v13h-17z' stroke-linejoin='miter'/%3E%3Cpath d='m14 16.5l-3-2.5h23l-3 2.5h-17z'/%3E%3Cpath d='m11 14v-5h4v2h5v-2h5v2h5v-2h4v5h-23z'/%3E%3C/g%3E%3Cg fill='none' stroke='%23fff' stroke-linejoin='miter' stroke-width='1'%3E%3Cpath d='m12 35.5h21'/%3E%3Cpath d='m13 31.5h19'/%3E%3Cpath d='m14 29.5h17'/%3E%3Cpath d='m14 16.5h17'/%3E%3Cpath d='m11 14h23'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

#materialWrapper>.b {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 45 45'%3E%3Cg fill='%23fff' fill-rule='evenodd' stroke-linejoin='round' stroke-linecap='round' stroke-width='1.5'%3E%3Cg stroke='%23fff' stroke-linecap='butt'%3E%3Cpath d='m9 36c3.39-.97 10.11.43 13.5-2 3.39 2.43 10.11 1.03 13.5 2 0 0 1.65.54 3 2-.68.97-1.65.99-3 .5-3.39-.97-10.11.46-13.5-1-3.39 1.46-10.11.03-13.5 1-1.354.49-2.323.47-3-.5 1.354-1.94 3-2 3-2z'/%3E%3Cpath d='m15 32c2.5 2.5 12.5 2.5 15 0 .5-1.5 0-2 0-2 0-2.5-2.5-4-2.5-4 5.5-1.5 6-11.5-5-15.5-11 4-10.5 14-5 15.5 0 0-2.5 1.5-2.5 4 0 0-.5.5 0 2z'/%3E%3Cpath d='M25 8A2.5 2.5 0 1 1 20 8 2.5 2.5 0 1 1 25 8z'/%3E%3C/g%3E%3Cpath d='m17.5 26h10m-12.5 4h15m-7.5-14.5v5m-2.5-2.5h5' stroke='%23fff' stroke-linejoin='miter'/%3E%3C/g%3E%3C/svg%3E");
}

#materialWrapper>.n {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 45 45'%3E%3Cg fill='%23fff' fill-rule='evenodd' stroke-linejoin='round' stroke-linecap='round' stroke-width='1.5'%3E%3Cg stroke='%23fff'%3E%3Cpath d='m22 10c10.5 1 16.5 8 16 29h-23c0-9 10-6.5 8-21'/%3E%3Cpath d='m24 18c.38 2.91-5.55 7.37-8 9-3 2-2.82 4.34-5 4-1.042-.94 1.41-3.04 0-3-1 0 .19 1.23-1 2-1 0-4 1-4-4 0-2 6-12 6-12 0 0 1.89-1.9 2-3.5-.73-.994-.5-2-.5-3 1-1 3 2.5 3 2.5h2c0 0 .78-1.992 2.5-3 1 0 1 3 1 3'/%3E%3C/g%3E%3Cg fill='%23fff'%3E%3Cg stroke='%23fff'%3E%3Cpath d='M9.5 25.5A.5 .5 0 1 1 8.5 25.5 .5 .5 0 1 1 9.5 25.5z'/%3E%3Cpath d='M15 15.5A.5 1.5 0 1 1 14 15.5 .5 1.5 0 1 1 15 15.5z' transform='matrix(.866.5-.5.866 9.693-5.173)'/%3E%3C/g%3E%3Cpath d='m24.55 10.4l-.45 1.45.5.15c3.15 1 5.65 2.49 7.9 6.75 2.25 4.26 3.25 10.31 2.75 20.25l-.05.5h2.25l.05-.5c.5-10.06-.88-16.85-3.25-21.34-2.37-4.49-5.79-6.64-9.19-7.16l-.51-.1' stroke='none'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

#materialWrapper>.p {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 45 45'%3E%3Cpath d='m22 9c-2.21 0-4 1.79-4 4 0 .89.29 1.71.78 2.38-1.95 1.12-3.28 3.21-3.28 5.62 0 2.03.94 3.84 2.41 5.03-3 1.06-7.41 5.55-7.41 13.47h23c0-7.92-4.41-12.41-7.41-13.47 1.47-1.19 2.41-3 2.41-5.03 0-2.41-1.33-4.5-3.28-5.62.49-.67.78-1.49.78-2.38 0-2.21-1.79-4-4-4z' fill='%23fff' stroke='%23fff' stroke-linecap='round' stroke-width='1.5'/%3E%3C/svg%3E");
}

#namesWrapperTop {
    position: absolute;
    bottom: 0px;
    left: -2px;
    width: 360px;
    height: 20px;
    line-height: 20px;
    padding: 2px;
    color: white;
    opacity: 0.25;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    transform: rotate(-90deg);
    transform-origin: left bottom 0px;
    text-align: right;
}

#namesWrapperBottom {
    position: absolute;
    bottom: 0px;
    left: -2px;
    width: 360px;
    height: 20px;
    line-height: 20px;
    padding: 2px;
    color: white;
    opacity: 0.25;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    transform: rotate(-90deg);
    transform-origin: left bottom 0px;
    text-align: left;
}

/* Input box */

#searchWrapper {
    position: absolute;
    height: 28px;
    top: 24px;
}

#simpleSearch input:hover,
#simpleSearch input:focus {
    background-color: #1d1e22;
}

#simpleSearch {
    display: block;
    position: relative;
    color: #b1b4bd;
    background-color: #1d1e22;
    border-left: 1px solid #1d1e22;
    border-right: 1px solid #1d1e22;
    border-radius: 2px;
}

#simpleSearch input {
    margin: 0;
    padding: 0;
    border: 0;
    background-color: transparent;
    color: #b1b4bd;
}

#simpleSearch #searchInput {
    font-family: "Segoe UI", Arial, Helvetica, sans-serif;
    width: 100%;
    padding: 7px 4px 6px 4px;
    font-size: 11px;
    -webkit-appearance: textfield;
}

#simpleSearch #searchInput:focus {
    outline: none;
}

#simpleSearch #searchInput.placeholder {
    color: #999999;
}

#simpleSearch #searchInput:-ms-input-placeholder {
    color: #999999;
}

#simpleSearch #searchInput:-moz-placeholder {
    color: #999999;
}

#simpleSearch #searchInput::-webkit-search-decoration,
#simpleSearch #searchInput::-webkit-search-cancel-button,
#simpleSearch #searchInput::-webkit-search-results-button,
#simpleSearch #searchInput::-webkit-search-results-decoration {
    -webkit-appearance: textfield;
}

/* Buttons and toolbar */

.toolbar {
    position: absolute;
    top: 62px;
    left: 24px;
    margin-top: 14px;
    margin-bottom: 14px;
    overflow: hidden;
    height: 28px;
    font-size: 0px;
    line-height: 0px;
    transform: scale(1.5);
}

#buttonBack,
#buttonForward,
#buttonRevert,
#buttonMenu {
    position: static;
    display: inline-block;
    text-align: left;

    margin: 2px;
    line-height: 0px;
}

#buttonGo {
    position: absolute;
    top: 2px;
    right: 1px;
    background-color: #1d1e22;
    width: 16px;
    height: 16px;
    padding: 2px 4px 6px 4px;
    cursor: pointer;
    border-radius: 2px;
}

#buttonGo:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

#buttonGo {
    fill: #ffffff;
}

.down {
    background-color: rgba(255, 255, 255, 0.1);
}

.on,
.off {
    position: absolute;
    background-position: center;
    background-repeat: no-repeat;
    width: 16px;
    height: 16px;
    padding: 0px;
    border-radius: 2px;
    padding: 4px;
}

.on:hover {
    background-color: rgba(255, 255, 255, 0.1);
    cursor: pointer;
}

.off svg {
    position: absolute;
    fill: #ffffff;
    opacity: 0.25;
}

.on svg {
    position: absolute;
    fill: #ffffff;
    opacity: 0.6;
}

#buttonFlip {
    line-height: 18px;
    height: 16px;
    padding-top: 2.5px;
    padding-bottom: 2px;
    cursor: pointer;
    border-radius: 2px;
}

#buttonFlip:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

#buttonStm {
    width: 9px;
    height: 9px;
    padding: 5.75px 4px;
    cursor: pointer;
    border-radius: 2px;
}

#buttonStm div {
    width: 9px;
    height: 9px;
    border-radius: 4.5px;
}

#buttonStm:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

#buttonStm.white div,
#buttonStm.white:hover div {
    background-color: #ffffff;
}

#buttonStm.black div,
#buttonStm.black:hover div {
    background-color: #000000;
}

#buttonStaticSortByValue,
#buttonStaticSortByChange,
#buttonMovesPv {
    cursor: pointer;
}

#buttonStaticSortByValue:hover,
#buttonStaticSortByChange:hover,
#buttonMovesPv:hover {
    color: white;
}

/* Status bar */

#tooltip {
    background-color: #1d1e22;
    color: #b1b4bd;
    height: 17px;
    overflow: hidden;
    border-style: solid;
    border-color: #000000;
    border-width: 1px;
    border-radius: 3px;
    font-size: 11px;
    line-height: 17px;
    font-weight: 700;
    display: inline-block;
    padding: 0 4px 0 4px;
    pointer-events: none;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 7;
    white-space: nowrap;
}

/* Move list */

#moves {
    line-height: 17px;
    font-size: 11px;
    font-weight: 700;
    overflow-y: auto;
    overflow-x: hidden;
    top: 48px;
}

#moves .positionStatus {
    color: white;
    display: inline-block;
    padding: 4px 8px;
    border: 1px solid black;
    box-shadow: inset 0 0 8px black;
}

#moves .line {
    width: 100%;
    min-width: 281px;
}

.line:nth-child(odd) {
    background-color: rgba(0, 0, 0, 0.2);
}

.line {
    height: 18px;
    cursor: pointer;
    position: relative;
    overflow-x: hidden;
}

.line .san {
    display: inline-block;
    width: 52px;
    padding-left: 16px;
    position: absolute;
    left: 0;
}

.line .eval {
    display: inline-block;
    width: 115px;
    text-align: center;
    position: absolute;
    left: 68px;
}

.line .eval .numleft {
    display: inline-block;
    min-width: 35px;
    text-align: right;
}

.line .eval .numright {
    display: inline-block;
    min-width: 40px;
    text-align: left;
}

.line .depth {
    display: inline-block;
    right: 0;
    position: absolute;
    width: 37px;
    text-align: center;
}

.circle {
    width: 5px;
    height: 5px;
    position: absolute;
    top: 7px;
    left: 7px;
    background-color: transparent;
    border-radius: 4px;
}

.line .pv {
    display: inline-block;
    left: 183px;
    right: 37px;
    position: absolute;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.circle.ok {
    background-color: #008800;
}

.circle.mi {
    background-color: #bb8800;
}

.circle.bl {
    background-color: #bb0000;
}

.line:hover {
    background-color: #333a42;
}

#movesHeader {
    font-size: 11px;
    font-weight: 900;
    line-height: 24px;
    top: 23px;
    height: 24px;
    position: absolute;
    left: 0;
    right: 0;
    border-top: solid 1px black;
    background-color: #000000;
    white-space: nowrap;
    overflow: hidden;
    min-width: 281px;
}

#movesHeader .san {
    display: inline-block;
    width: 52px;
    padding-left: 16px;
}

#movesHeader .eval {
    display: inline-block;
    text-align: center;
    width: 115px;
}

#movesHeader .pv {
    display: inline-block;
    width: 58px;
}

#movesHeader .depth {
    display: inline-block;
    width: 37px;
    text-align: center;
    position: absolute;
    right: 8px;
}

/* History */

#history.boxMid {
    line-height: 17px;
    font-size: 11px;
    font-weight: 700;
    user-select: text;
    -moz-user-select: text;
}

#history>div {
    padding: 8px;

}

#history .movelink {
    border-bottom-style: dotted;
    border-bottom-width: 2px;
    border-bottom-color: transparent;
    cursor: pointer;
}

#history .movelink.selected,
#history .movelink.selected:hover {
    color: #e1e2e6;
    background-color: #333a42;
}

#history .movelink:hover {
    background-color: #333a42;
}

#history .movelink.selected:hover {
    cursor: default;
}


/* Edit */

#editWrapperOuter {
    display: block;
    font-weight: 600;
    color: #ffffff;
    background-color: #697686;
    border: 0px none;
    bottom: 0;
}

#editWrapper {
    background-color: transparent;
    margin: 3px;
    padding: 3px;
    border: 2px solid transparent;
    width: 282px;
    height: 82px;

}

#editWrapper>.cb {
    border-width: 1px;
    border-style: solid;
    border-color: rgba(0, 0, 0, 0.25);
    width: 280px;
    height: 80px;
}

#editWrapper>.cb>.l {
    background-color: rgba(255, 255, 255, 0.6);
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.7));
}

#editWrapper>.cb>.d {
    background-color: rgba(255, 255, 255, 0.2);
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.25));
}


/* Graph */

#graphWrapper {
    display: block;
    line-height: 22px;
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
    overflow: hidden;
}

#graph {
    display: block;
    background-color: #697686;
}

/* Opening */

#openingHeader {
    font-size: 11px;
    font-weight: 900;
    line-height: 24px;
    top: 23px;
    height: 24px;
    position: absolute;
    left: 0;
    right: 0;
    border-top: solid 1px black;
    background-color: #000000;
    white-space: nowrap;
    overflow: hidden;
}

#openingHeader .name {
    display: inline-block;
    width: 180px;
    padding-left: 8px;
}

#openingHeader .score {
    display: inline-block;
    text-align: center;
    width: 50px;
}

#openingHeader .popularity {
    display: inline-block;
    text-align: left;
    width: 60px;
}

#openingHeader .moves {
    display: inline-block;
    padding-left: 16px;
}

#opening {
    line-height: 17px;
    font-size: 11px;
    font-weight: 700;
    overflow-y: auto;
    top: 48px;
}

#opening .line {
    overflow: hidden;
    white-space: nowrap;
    height: 18px;
}

.line .name {
    display: block;
    width: 180px;
    padding-left: 8px;
    position: absolute;
    left: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    height: 17px;
}

.line .score {
    display: inline-block;
    width: 50px;
    text-align: center;
    position: absolute;
    left: 188px;
}

.line .popularity {
    display: inline-block;
    left: 238px;
    position: absolute;
    width: 45px;
    text-align: left;
}

.line .moves {
    display: inline-block;
    left: 314px;
    position: absolute;
}

/* Static */

#static {
    line-height: 17px;
    font-size: 11px;
    font-weight: 700;
    overflow-y: auto;
    top: 48px;
}

#staticHeader {
    font-size: 11px;
    font-weight: 900;
    line-height: 24px;
    top: 23px;
    height: 24px;
    position: absolute;
    left: 0;
    right: 0;
    border-top: solid 1px black;
    background-color: #000000;
    white-space: nowrap;
    overflow: hidden;
}

#staticHeader .group {
    display: inline-block;
    width: 80px;
    padding-left: 16px;
}

#staticHeader .name {
    display: inline-block;
    width: 123px;
}

#staticHeader .eval {
    display: inline-block;
    text-align: center;
    width: 75px;
}

#staticHeader .rel {
    display: inline-block;
    text-align: center;
    width: 75px;
}

#static .line .group {
    display: inline-block;
    left: 0px;
    padding-left: 16px;
    position: absolute;
    width: 80px;
}

#static .line .name {
    width: 130px;
    left: 96px;
    padding-left: 0;
}

#static .line .eval {
    left: 219px;
    width: 75px;
}

#static .line .eval.rel {
    left: 294px;
    width: 75px;
}

/* Lczero */

#lczeroHeader {
    font-size: 11px;
    font-weight: 900;
    line-height: 24px;
    top: 23px;
    height: 24px;
    position: absolute;
    left: 0;
    right: 0;
    border-top: solid 1px black;
    background-color: #000000;
    white-space: nowrap;
    overflow: hidden;
}

#lczeroHeader .san {
    display: inline-block;
    width: 52px;
    padding-left: 16px;
}

#lczeroHeader .policy {
    display: inline-block;
    text-align: center;
    width: 80px;
}

#lczeroHeader .eval {
    display: inline-block;
    text-align: center;
    width: 115px;
}

#lczero {
    line-height: 17px;
    font-size: 11px;
    font-weight: 700;
    overflow-y: auto;
    overflow-x: hidden;
    top: 48px;
}

#lczero .line {
    overflow: hidden;
    white-space: nowrap;
    height: 18px;
}

#lczero .line .policy {
    display: inline-block;
    width: 80px;
    text-align: center;
    position: absolute;
    left: 68px;
}

#lczero .line .eval {
    display: inline-block;
    left: 148px;
    position: absolute;
    width: 115px;
    text-align: center;
}

#lczero .loadButton {
    background-color: #1d1e22;
    cursor: pointer;
    margin: 12px 16px;
    color: rgba(255, 255, 255, 0.5);
    display: inline-block;
    padding: 4px 8px;
    border: 1px solid black;
    box-shadow: inset 0 0 8px black;
    white-space: nowrap;
}

#lczero .wait {
    margin: 12px 16px;
    color: rgba(255, 255, 255, 0.5);
    display: inline-block;
    padding: 4px 8px;
    border: 1px solid transparent;
    white-space: nowrap;
}

#lczero .loadButton:hover {
    background-color: #333a42;
}


/* Arrow */

#arrowWrapper1,
#arrowWrapper2 {
    position: absolute;
    pointer-events: none;
    display: none;
    filter: drop-shadow(-1px -1px 1px white) drop-shadow(1px 1px 1px black);
    opacity: 0.5;
    z-index: 4;
}

#arrowWrapper1 svg,
#arrowWrapper2 svg {
    opacity: 0.66;
}

#arrowWrapper3 {
    position: absolute;
    pointer-events: none;
    display: none;
    z-index: 4;
}

#arrowWrapper3 svg line {
    stroke: #0000a0;
}

#arrowWrapper3 svg defs marker {
    fill: #0000a0;
}

/* Menu */
#menu {
    background-color: #1d1e22;
    border: solid 1px black;
    position: absolute;
    box-shadow: 0 0 4px hsla(0, 0%, 0%, .2);
    padding-top: 6px;
    padding-bottom: 6px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    z-index: 15;
    top: 0;
    left: 0;
}

.menuLine {
    height: 1px;
    margin-top: 6px;
    margin-bottom: 6px;
    background-color: black;
}

.menuItem {
    height: 12px;
    line-height: 12px;
    padding-left: 36px;
    padding-right: 14px;
    padding-top: 6px;
    padding-bottom: 6px;
    cursor: pointer;
    background-repeat: no-repeat;
    background-position: 12px 4px;
}

.menuItem>span {}

.menuItem:hover {
    background-color: #333a42;
}

.menuItem.disabled {
    color: rgba(255, 255, 255, 0.25);
    cursor: default;
}

.menuItem.disabled:hover {
    background-color: transparent;
}

.menuItem span.key {
    float: right;
    text-align: right;
    color: rgba(255, 255, 255, 0.25);
    width: 47px;
}

.menuItem.menuEngine,
.menuItem.menuColor {
    padding-bottom: 0px;
    padding-top: 0px;
    height: 24px;
    padding-right: 9px;
}

.menuItem.menuEngine>span,
.menuItem.menuColor>span {
    display: inline-block;
    padding-top: 6px;
    padding-bottom: 6px;
    vertical-align: top;
}

.menuItem.menuEngine:hover,
.menuItem.menuColor:hover {
    background-color: transparent;
    cursor: default;
}

#buttonEngineMinus,
#buttonEnginePlus,
#buttonEngineValue,
#buttonColorPrev,
#buttonColorNext {
    float: right;
    cursor: pointer;
    margin-left: 5px;
}

#buttonEngineMinus:hover,
#buttonEnginePlus:hover,
#buttonEngineValue:hover,
#buttonColorPrev:hover,
#buttonColorNext:hover {
    background-color: #333a42;
}

#buttonEngineMinus,
#buttonEnginePlus,
#buttonColorPrev,
#buttonColorNext {
    width: 24px;
    height: 24px;
    padding: 0px 1px;
    background-repeat: no-repeat;
    background-position: center;
}

#buttonEngineValue {
    width: 24px;
    height: 12px;
    padding: 5px 0px;
    background-color: transparent;
    border: solid transparent 1px;

    text-align: center;
}

#buttonEngineValue:hover {
    background-color: #333a42;
}

#icolor {
    display: inline-block;
    width: 12px;
    padding: 1px;
    margin: 5px 5px 5px 10px;
    height: 12px;
    vertical-align: top;
    float: right;
    cursor: pointer;
}

#icolor:hover {
    box-shadow: 0 0 4px rgba(255, 255, 255, 1);
}

#icolor>div {
    width: 10px;
    height: 10px;
    border: solid 1px rgba(0, 0, 0, 0.25);
    position: relative;
}

#icolor>div>div {
    width: 5px;
    height: 5px;
    position: absolute;
}

#icolor>div>div.l {
    background-color: rgba(255, 255, 255, 0.6);
}

#icolor>div>div.d {
    background-color: rgba(255, 255, 255, 0.2);
}

#icolor {
    background-color: #609fb1;
}

#cbTable.c1 {
    color: white;
}

#cbTable.c1 td.cbCell {
    background-color: #7086b8;
}

#boxBoard.c1 {
    background-color: #384359;
}

#chessboard1.c1>.l {
    background-color: #f0f0f0;
    background: linear-gradient(to bottom right, rgba(225, 225, 217, 1), rgba(255, 255, 255, 1));
}

#chessboard1.c1>.d {
    background-color: #7086b8;
    background: linear-gradient(to bottom right, rgba(105, 127, 176, 1), rgba(119, 140, 197, 1));
}

#icolor.c1 {
    background-color: #384359;
}

#icolor.c1>div>div.l {
    background-color: #f0f0f0;
}

#icolor.c1>div>div.d {
    background-color: #7086b8;
}

#cbTable.c2 {
    color: #929292;
}

#cbTable.c2 td.cbCell {
    background-color: #b58863;
}

#boxBoard.c2 {
    background-color: #1a1a1a;
}

#chessboard1.c2>.l {
    background-color: #f0d9b5;
    background: #f0d9b5;
}

#chessboard1.c2>.d {
    background-color: #b58863;
    background: #b58863;
}

#icolor.c2 {
    background-color: #1a1a1a;
}

#icolor.c2>div>div.l {
    background-color: #f0d9b5;
}

#icolor.c2>div>div.d {
    background-color: #b58863;
}

#cbTable.c3 {
    color: #989795;
}

#cbTable.c3 td.cbCell {
    background-color: #7b9b5e;
}

#boxBoard.c3 {
    background-color: #312e2b;
}

#chessboard1.c3>.l {
    background-color: #eeeed2;
    background: #eeeed2;
}

#chessboard1.c3>.d {
    background-color: #7b9b5e;
    background: #7b9b5e;
}

#icolor.c3 {
    background-color: #312e2b;
}

#icolor.c3>div>div.l {
    background-color: #eeeed2;
}

#icolor.c3>div>div.d {
    background-color: #7b9b5e;
}

#cbTable.c4 {
    color: #989795;
}

#cbTable.c4 td.cbCell {
    background-color: #985b68;
}

#boxBoard.c4 {
    background-color: #312e2b;
}

#chessboard1.c4>.l {
    background-color: #bdcdd6;
    background: #bdcdd6;
}

#chessboard1.c4>.d {
    background-color: #985b68;
    background: #985b68;
}

#icolor.c4 {
    background-color: #312e2b;
}

#icolor.c4>div>div.l {
    background-color: #bdcdd6;
}

#icolor.c4>div>div.d {
    background-color: #985b68;
}

#cbTable.c5 {
    color: #989795;
}

#cbTable.c5 td.cbCell {
    background-color: #708090;
}

#boxBoard.c5 {
    background-color: #312e2b;
}

#chessboard1.c5>.l {
    background-color: #bdcdd6;
    background: #bdcdd6;
}

#chessboard1.c5>.d {
    background-color: #708090;
    background: #708090;
}

#icolor.c5 {
    background-color: #312e2b;
}

#icolor.c5>div>div.l {
    background-color: #bdcdd6;
}

#icolor.c5>div>div.d {
    background-color: #708090;
}

#buttonColorPrev {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='%238e8f91'%3E%3Cpath d='M15 7H3.414l4.293-4.293a1 1 0 0 0-1.414-1.414l-6 6a1 1 0 0 0 0 1.414l6 6a1 1 0 0 0 1.414-1.414L3.414 9H15a1 1 0 0 0 0-2z'%3E%3C/path%3E%3C/svg%3E");
}

#buttonColorNext {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='%238e8f91'%3E%3Cpath d='M15.707 7.293l-6-6a1 1 0 0 0-1.414 1.414L12.586 7H1a1 1 0 0 0 0 2h11.586l-4.293 4.293a1 1 0 1 0 1.414 1.414l6-6a1 1 0 0 0 0-1.414z'%3E%3C/path%3E%3C/svg%3E");
}

#buttonEngineMinus {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%238e8f91' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-minus'%3E%3Cline x1='6' y1='12' x2='18' y2='12'%3E%3C/line%3E%3C/svg%3E");
}

#buttonEnginePlus {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%238e8f91' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-plus'%3E%3Cline x1='12' y1='6' x2='12' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='12' x2='18' y2='12'%3E%3C/line%3E%3C/svg%3E");
}

.menuItem.menuPlay {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238e8f91' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-play-circle'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolygon points='10 8 16 12 10 16 10 8'%3E%3C/polygon%3E%3C/svg%3E");
}

.menuItem.menuEngineToggle {
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238e8f91' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='4' width='16' height='16' rx='2'/><path d='M9 9h6v6H9zm0-8v3m6-3v3M9 20v3m6-3v3m5-14h3m-3 5h3M1 9h3m-3 5h3'/></svg>");
}

.menuItem.menuFlip {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 443 443' width='16' height='16' fill='%238e8f91'%3E%3Cpath d='M254.56,118.55v205.9l68.77,-27.17c2.31,-0.9 4.93,-0.16 6.43,1.81c0.73,0.99 1.11,2.16 1.11,3.32c0,1.17 -0.38,2.36 -1.14,3.36l-103.85,135.08c-1.05,1.35 -2.66,2.15 -4.37,2.15c-1.71,0 -3.33,-0.8 -4.38,-2.15l-103.84,-135.08c-1.53,-1.97 -1.53,-4.69 -0.04,-6.69c1.49,-1.96 4.11,-2.7 6.42,-1.8l68.77,27.16v-205.89l-68.76,27.16c-2.31,0.9 -4.93,0.16 -6.43,-1.8c-0.74,-0.99 -1.11,-2.17 -1.11,-3.32c0,-1.17 0.38,-2.36 1.14,-3.36l103.85,-135.08c1.05,-1.35 2.66,-2.15 4.37,-2.15c1.71,0 3.33,0.8 4.38,2.15l103.83,135.08c1.52,1.97 1.54,4.69 0.04,6.68c-1.48,1.97 -4.11,2.7 -6.42,1.8z' /%3E%3C/svg%3E");
}

.menuItem.menuStm {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238e8f91' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-play-circle'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpath d='M12,2 a1,1 0 0,0 0,20' fill='%238e8f91' stroke='none' /%3E%3C/svg%3E%0A");
}

.menuItem.menuKeep {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238e8f91' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-save'%3E%3Cpath d='M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z'%3E%3C/path%3E%3Cpolyline points='17 21 17 13 7 13 7 21'%3E%3C/polyline%3E%3Cpolyline points='7 3 7 8 15 8'%3E%3C/polyline%3E%3C/svg%3E%0A");
}

.menuItem.menuKeep.disabled {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23505659' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-save'%3E%3Cpath d='M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z'%3E%3C/path%3E%3Cpolyline points='17 21 17 13 7 13 7 21'%3E%3C/polyline%3E%3Cpolyline points='7 3 7 8 15 8'%3E%3C/polyline%3E%3C/svg%3E%0A");
}

.menuItem.menuRevert {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024' fill='%238e8f91' width='16' height='16'%3E%3Cpath d='M431.85,79.13l-433.36,433.37l433.37,431.64v-273.34c463.64,-39.79 591.66,197.22 591.66,197.22c0,0 0,-431.63 -591.66,-512.94z' /%3E%3C/svg%3E%0A");
}

.menuItem.menuRevert.disabled {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024' fill='%23505659' width='16' height='16'%3E%3Cpath d='M431.85,79.13l-433.36,433.37l433.37,431.64v-273.34c463.64,-39.79 591.66,197.22 591.66,197.22c0,0 0,-431.63 -591.66,-512.94z' /%3E%3C/svg%3E%0A");
}

.menuItem.menuEngine {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238e8f91' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-layers'%3E%3Cpolygon points='12 2 2 7 12 12 22 7 12 2'%3E%3C/polygon%3E%3Cpolyline points='2 17 12 22 22 17'%3E%3C/polyline%3E%3Cpolyline points='2 12 12 17 22 12'%3E%3C/polyline%3E%3C/svg%3E%0A");
}

.menuItem.menuPromote {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 320 512' fill='%238e8f91' stroke='%238e8f91' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M240 144A80 80 0 1 0 80 144a80 80 0 1 0 160 0zm16 112H235.4L254 352H221.4l-18.6-96H160 117.2L98.6 352H66l18.6-96H64c-8.8 0-16-7.2-16-16s7.2-16 16-16H81.6C60.9 203.7 48 175.3 48 144C48 82.1 98.1 32 160 32s112 50.1 112 112c0 31.3-12.9 59.7-33.6 80H256c8.8 0 16 7.2 16 16s-7.2 16-16 16zM65.8 416L33.1 468.7c-.7 1.2-1.1 2.5-1.1 3.9c0 4.1 3.3 7.4 7.4 7.4H280.6c4.1 0 7.4-3.3 7.4-7.4c0-1.4-.4-2.7-1.1-3.9L254.2 416 65.8 416zm188.4-32c11.1 0 21.4 5.7 27.2 15.1l32.7 52.7c3.9 6.2 5.9 13.4 5.9 20.8c0 21.8-17.7 39.4-39.4 39.4H39.4C17.7 512 0 494.3 0 472.6c0-7.3 2.1-14.5 5.9-20.8l32.7-52.7c5.8-9.4 16.1-15.1 27.2-15.1H254.2z'/%3E%3C/svg%3E");
}

.menuItem.menuReset {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238e8f91' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-home'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'%3E%3C/path%3E%3Cpolyline points='9 22 9 12 15 12 15 22'%3E%3C/polyline%3E%3C/svg%3E%0A");
}

.menuItem.menuStart {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238e8f91' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-arrow-left-circle'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 8 8 12 12 16'%3E%3C/polyline%3E%3Cline x1='16' y1='12' x2='8' y2='12'%3E%3C/line%3E%3C/svg%3E%0A");
}

.menuItem.menuStart.disabled {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23505659' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-arrow-left-circle'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 8 8 12 12 16'%3E%3C/polyline%3E%3Cline x1='16' y1='12' x2='8' y2='12'%3E%3C/line%3E%3C/svg%3E%0A");
}

.menuItem.menuEnd {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238e8f91' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-arrow-right-circle'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 16 16 12 12 8'%3E%3C/polyline%3E%3Cline x1='8' y1='12' x2='16' y2='12'%3E%3C/line%3E%3C/svg%3E%0A");
}

.menuItem.menuEnd.disabled {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23505659' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-arrow-right-circle'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 16 16 12 12 8'%3E%3C/polyline%3E%3Cline x1='8' y1='12' x2='16' y2='12'%3E%3C/line%3E%3C/svg%3E%0A");
}

.menuItem.menuColor {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='16 16 68 68' fill='none' %3E%3Cpath d='M125,0 l950,0 c75,0,125,25,125,125 l0,950 c0,75,-50,125,-125,125 l-950,0 c-100,0,-125,-50,-125,-125 l0,-950 c0,-100,25,-125,125,-125 Z M100,598 l0,-498 l502,0 l0,498 Z M125,102 c-14,0,-25,11,-25,25 l0,948 c0,14,11,25,25,25 l950,0 c14,0,25,-11,25,-25 l0,-948 c0,-14,-11,-25,-25,-25 Z M602,1100 l0,-502 l498,0 l0,502 Z M602,1100 ' fill='%238e8f91' stroke='none' stroke-dasharray='none' stroke-linecap='inherit' stroke-linejoin='inherit' stroke-width='1' transform='matrix(0.05,0.0,0.0,-0.05,20.0,80.0)'%3E%3C/path%3E%3C/svg%3E");
}

.menuItem.menuWindow {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 1024 1024' fill='%238e8f91'%3E%3Cpath d='M86.13 895.2L86.13 554.13L682.07 554.13L682.07 895.2L86.13 895.2ZM767.33 554.13L767.33 384.53L341.93 384.53L341.93 214L937.87 214L937.87 554.13L767.33 554.13ZM1023.13 43.46L256.67 43.46L256.67 384.53L0.87 384.53L0.87 980.46L767.33 980.46L767.33 639.39L1023.13 639.39L1023.13 43.46Z' /%3E%3C/svg%3E");
}

.menuItem.menuPlayEngine {
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238e8f91' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='4' width='16' height='16' rx='2'/><path d='M9 9h6v6H9zm0-8v3m6-3v3M9 20v3m6-3v3m5-14h3m-3 5h3M1 9h3m-3 5h3'/></svg>");
}

.menuItem.menuTwoPlayerMode {
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238e8f91' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-users'><path d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'></path><circle cx='9' cy='7' r='4'></circle><path d='M23 21v-2a4 4 0 0 0-3-3.87'></path><path d='M16 3.13a4 4 0 0 1 0 7.75'></path></svg>");
}

.menuItem.menuAnalysisMode {
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238e8f91' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-search'><circle cx='11' cy='11' r='8'></circle><line x1='21' y1='21' x2='16.65' y2='16.65'></line></svg>");
}

.col {
    margin-left: 5px;
    margin-right: 5px;
    float: left;
}

.col.left {
    width: 510px;
}

.col.right {
    width: 300px;
}

.box {
    border: solid black 1px;
    border-radius: 3px;
    position: relative;
    resize: both;
    overflow: hidden;
    background-color: #1D1E22;
    z-index: 4;
    min-width: 108px;
    min-height: 64px;
}

.boxIn {}

.boxTop {
    text-align: center;
    font-size: 11px;
    background-color: #3d444c;
    padding: 4px 22px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 15px;
    border-bottom: solid 1px black;
    overflow: hidden;
    text-overflow: ellipsis;

}

.boxMid {
    background-color: #1d1e22;
    border-bottom: solid 1px black;
    position: absolute;
    overflow-y: auto;
    top: 24px;
    bottom: 12px;
    left: 0;
    right: 0;
}

.footer {
    position: absolute;
    bottom: 0;
    left: 4px;
    height: 12px;
    line-height: 10px;
    font-size: 8px;
    color: rgba(255, 255, 255, 0.25);
    font-weight: 700;
    white-space: nowrap;
}

.footer a {
    cursor: pointer;
    color: rgba(255, 255, 255, 0.42);
    text-decoration: none;
}

.footer a:hover {
    color: rgba(255, 255, 255, 0.6);
}

.boxGraph {
    background-color: #697686;
    position: absolute;
    top: 28px;
    bottom: 0;
    left: 0;
    right: 8px;
}

.box>.closeIcon {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' opacity='0.6' class='feather feather-x'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
    cursor: pointer;
    border-radius: 2px;
}

.box>.closeIcon:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.box>.boxIcon {
    position: absolute;
    top: 5px;
    left: 5px;
    width: 13px;
    height: 13px;
    pointer-events: none;
    opacity: 0.6;
}

.iconMoves {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-activity'%3E%3Cpolyline points='22 12 18 12 15 21 9 3 6 12 2 12'%3E%3C/polyline%3E%3C/svg%3E");
}

.iconGraph {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-bar-chart-2'%3E%3Cline x1='18' y1='20' x2='18' y2='10'%3E%3C/line%3E%3Cline x1='12' y1='20' x2='12' y2='4'%3E%3C/line%3E%3Cline x1='6' y1='20' x2='6' y2='14'%3E%3C/line%3E%3C/svg%3E");
}

.iconHistory {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-clock'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
}

.iconEdit {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-edit-2'%3E%3Cpolygon points='16 3 21 8 8 21 3 21 3 16 16 3'%3E%3C/polygon%3E%3C/svg%3E");
}

.iconChessboard {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='16 16 68 68' fill='%23000000' %3E%3Cpath d='M125,0 l950,0 c75,0,125,25,125,125 l0,950 c0,75,-50,125,-125,125 l-950,0 c-100,0,-125,-50,-125,-125 l0,-950 c0,-100,25,-125,125,-125 Z M100,598 l0,-498 l502,0 l0,498 Z M125,102 c-14,0,-25,11,-25,25 l0,948 c0,14,11,25,25,25 l950,0 c14,0,25,-11,25,-25 l0,-948 c0,-14,-11,-25,-25,-25 Z M602,1100 l0,-502 l498,0 l0,502 Z M602,1100 ' fill='white' stroke='none' stroke-dasharray='none' stroke-linecap='inherit' stroke-linejoin='inherit' stroke-width='1' transform='matrix(0.05,0.0,0.0,-0.05,20.0,80.0)'%3E%3C/path%3E%3C/svg%3E");
}

.iconOpening {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-book-open'%3E%3Cpath d='M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z'%3E%3C/path%3E%3Cpath d='M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z'%3E%3C/path%3E%3C/svg%3E");
}

.iconStatic {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-dollar-sign'%3E%3Cpath d='M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6'%3E%3C/path%3E%3C/svg%3E");
}

.iconLczero {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 355 355' fill='white' %3E%3Cpath d='M270.02,94.59c-1.73,1.42 -3.12,3.22 -3.08,4c0.03,0.78 1.97,3.42 4.31,5.88l4.25,4.47l58,0.09c8.52,-7.17 11.45,-10.09 12,-11.13c0.77,-1.44 0.53,-2.35 -1,-3.93c-1.94,-1.99 -3.01,-2.05 -36.67,-2.02l-34.67,0.03M22.65,103.5c-1.46,1.38 -2.88,3.51 -3.15,4.75c-0.28,1.24 -1.38,7.88 -2.45,14.75c-1.07,6.88 -2.65,17.9 -3.5,24.5c-0.86,6.6 -1.55,13.8 -1.53,16c0.02,3.01 0.7,4.67 2.75,6.71c2.51,2.49 2.94,2.6 5.23,1.34c1.38,-0.75 3.69,-2.65 5.14,-4.21c1.45,-1.56 2.9,-3.74 3.22,-4.84c0.32,-1.1 1.91,-11 3.53,-22c1.63,-11 3.22,-22.36 3.53,-25.25c0.56,-5.12 0.47,-5.36 -3.67,-9.72c-2.34,-2.46 -4.74,-4.49 -5.35,-4.5c-0.6,-0.01 -2.29,1.1 -3.75,2.47zM259.9,102.84c-1.32,1.01 -2.94,3.83 -3.61,6.25c-0.66,2.42 -2.8,16 -4.75,30.16c-1.95,14.16 -3.25,26.31 -2.9,27c0.36,0.69 1.59,2.27 2.75,3.53c1.16,1.25 2.66,2.26 3.35,2.25c0.69,-0.01 2.88,-1.26 4.87,-2.78c1.99,-1.51 3.98,-3.43 4.42,-4.25c0.44,-0.82 1.72,-6.9 2.85,-13.5c1.13,-6.6 2.74,-16.95 3.59,-23c0.84,-6.05 1.53,-12.91 1.53,-15.25c0,-3.62 -0.6,-4.84 -4.01,-8.25c-2.2,-2.2 -4.38,-4 -4.85,-4c-0.47,0 -1.93,0.83 -3.25,1.84zM345,105.33c-3.02,2.38 -6.03,4.97 -6.68,5.75c-0.65,0.78 -2.07,7.72 -3.16,15.42c-1.09,7.7 -2.77,19.63 -3.74,26.5l-1.75,12.5c4.52,5.88 6.4,7.57 7.08,7.55c0.69,-0.03 3.27,-1.96 5.75,-4.3l4.5,-4.25c3.05,-20.15 4.85,-33.43 5.96,-42.5c1.8,-14.69 1.85,-16.75 0.53,-18.75c-0.82,-1.24 -1.82,-2.25 -2.23,-2.25c-0.41,0 -3.23,1.95 -6.25,4.33zM145.08,170.98c-2.86,2.24 -5.18,4.84 -5.15,5.79c0.03,0.95 1.41,3.19 3.06,4.98l3.01,3.25c47.53,0 57.75,-0.37 59.25,-1.12c1.24,-0.62 3.72,-2.53 5.52,-4.25c1.8,-1.72 3.27,-3.58 3.26,-4.13c0,-0.55 -1.31,-2.57 -2.91,-4.5l-2.9,-3.5l-57.93,-0.59M131.7,182.47c-2.59,1.94 -4.91,4.31 -5.15,5.28c-0.25,0.96 -0.9,4.45 -1.46,7.75c-0.56,3.3 -2.15,14.78 -3.54,25.5c-1.39,10.72 -2.76,21.07 -3.04,23c-0.39,2.6 0,4.08 1.48,5.75l2,2.25c5.81,-4.49 8.74,-6.96 10.25,-8.39c1.51,-1.43 3.18,-4.29 3.71,-6.36c0.53,-2.06 2.33,-12.75 4,-23.75c1.68,-11 3.05,-21.8 3.06,-24c0.01,-3.21 -0.64,-4.64 -3.3,-7.28l-3.31,-3.28M12.08,183.75l-4.19,3.75c-5.21,36.43 -7.04,50.15 -7.41,54c-0.62,6.36 -0.49,7.16 1.42,8.75c2.03,1.69 2.24,1.65 5.85,-1.16c2.06,-1.6 5,-4.19 6.52,-5.75c2.33,-2.39 3.08,-4.6 4.69,-13.84c1.05,-6.05 2.84,-17.3 3.97,-25c1.13,-7.7 2.06,-15.01 2.06,-16.25c0,-1.24 -1.34,-3.6 -2.99,-5.25c-1.65,-1.65 -3.61,-3 -4.36,-3c-0.75,0 -3.25,1.69 -5.56,3.75zM248.54,184.25l-4.2,4.25c-5.7,41.07 -7.36,54.57 -7.38,56.5c-0.02,2.07 0.7,4.21 1.75,5.24c1.7,1.65 2.07,1.51 7.78,-3.04c3.97,-3.16 6.39,-5.95 7.15,-8.24c0.63,-1.9 2.54,-12.24 4.24,-22.96c1.7,-10.72 3.11,-21.97 3.13,-25c0.03,-4.53 -0.41,-5.99 -2.49,-8.25c-1.39,-1.51 -3.27,-2.75 -4.17,-2.75c-0.9,0 -3.52,1.91 -5.83,4.25zM330.67,184.25l-4.53,4.25c-4.79,37.2 -6.4,49.35 -6.67,51c-0.42,2.55 0.22,3.71 4.27,7.75l4.76,4.75c6.12,-5.2 6.65,-6.49 8.04,-14.5c0.86,-4.95 2.86,-18.22 4.45,-29.5l2.9,-20.5c-3.85,-5.91 -5.69,-7.5 -6.79,-7.5c-1.04,0 -3.94,1.91 -6.43,4.25zM143.51,243.66c-5.72,0.42 -6.26,0.7 -12,6.23l-6.01,5.8l3.5,5.31c70.87,0 71.01,-0.01 73.64,-2.25c2.05,-1.75 2.49,-2.81 1.98,-4.75c-0.36,-1.37 -2.11,-4.18 -3.89,-6.23l-3.23,-3.73c-37.2,-0.64 -50.7,-0.63 -53.99,-0.39zM264.35,243.86c-8,0.63 -8.25,0.73 -13.9,5.64c-3.16,2.75 -5.9,5.45 -6.08,6c-0.18,0.55 0.45,2.05 1.4,3.33l1.73,2.33l70.82,0.03c6.06,-5.94 6.12,-6.14 4.52,-8.37c-0.91,-1.27 -2.94,-3.75 -4.5,-5.51l-2.84,-3.2c-33.32,-0.69 -46.67,-0.6 -51.15,-0.25zM18.82,245.76c-1.47,0.96 -4.73,3.66 -7.25,5.99c-4.52,4.2 -4.56,4.28 -2.82,6.62c1.5,2.04 2.88,2.46 9.75,2.99c4.4,0.34 16.77,0.58 27.5,0.54c10.73,-0.04 23.42,-0.38 28.22,-0.74c6.74,-0.51 9.2,-1.12 10.83,-2.66c1.37,-1.29 1.91,-2.71 1.54,-4c-0.32,-1.1 -2.27,-3.89 -4.33,-6.2l-3.76,-4.2c-53.95,-0.07 -57.29,0.11 -59.68,1.66z' /%3E%3C/svg%3E");
}

#wb {
    display: flex;
    position: static;
    justify-content: center;
    top: 8px;
    right: 320px;
    font-size: 0;
    line-height: 0;
    margin-bottom: 10px;
    margin-top: 10px;
    transform: scale(2);
}

.wbButton {
    width: 16px;
    height: 16px;
    margin: 3px;
    opacity: 0.25;
    background-color: transparent;
    cursor: pointer;
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
}

.wbButton:hover,
.wbButton.selected:hover {
    opacity: 1;
}

.wbButton.selected {
    opacity: 0.6;
}

#dragPiece {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 6;
}

@media (min-width: 801px) {
    .col.right {
        margin-top: 85px;
    }

    #logo {
        margin-bottom: 46px;
    }

    #logotextmain {
        top: 16px;
    }

    #logotextsub {
        top: 45px;
    }
}

@media (max-width: 800px) {
    .col.right {
        margin-top: 0px;
    }

    #logo {
        margin-bottom: 10px;
    }
}