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: #11191f;
  color: #b1b4bd;
}

/* Custom scrollbars */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: #11191f;
}

::-webkit-scrollbar-thumb {
  background: #2a3542;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #3d4f60;
}

* {
  scrollbar-width: thin;
  scrollbar-color: #2a3542 #11191f;
}

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

li {
  margin-bottom: .1em;
}

#container {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  max-width: 1280px;
  width: 100%;
  background-color: #11191f;
  margin: 0 auto;
  padding: 0;
  min-height: 100vh;
  box-sizing: border-box;
}

/* Page header */
#pageHeader {
  display: flex;
  align-items: center;
  background-color: #161e27;
  border-bottom: 2px solid #0d1117;
  height: 56px;
  position: sticky;
  top: 0;
  z-index: 10;
  box-sizing: border-box;
}

#pageHeaderInner {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
  padding: 0 10px;
  box-sizing: border-box;
}

#logo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  width: 305px;
}

#logoLink {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

#logoText {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#logotextmain {
  font-size: 20px;
  color: #ffffff;
  font-weight: 600;
  letter-spacing: 0.3px;
  line-height: 1.2;
}

#logotextsub {
  font-size: 11px;
  color: #64c4db;
  font-weight: 400;
  letter-spacing: 0.5px;
  line-height: 1.2;
}

/* 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: #8ca2ad;
  transform-origin: left top 0px;
  transform: scale(1);
}

#boxBoardOuter {
  margin: 61px auto 8px auto;
  position: relative;
  width: fit-content;
}

#boardWrapper {
  position: relative;
}

.cb {
  position: relative;
  font-size: 14px;
  color: #11191f;
  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: #11191f
}

#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: #11191f;
}

#simpleSearch {
  display: block;
  position: relative;
  color: #b1b4bd;
  background-color: #11191f;
  border-left: 1px solid #11191f;
  border-right: 1px solid #11191f;
  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: 13px;
  -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 {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 28px;
  font-size: 0px;
  line-height: 0px;
  width: 305px;
  flex-shrink: 0;
}

#buttonMenu {
  position: static;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 2px;
  line-height: 0px;
}

#buttonGo {
  position: absolute;
  top: 2px;
  right: 1px;
  background-color: #11191f;
  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: #11191f;
}

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

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

/* Status bar */

#tooltip {
  background-color: #11191f;
  color: #b1b4bd;
  height: 17px;
  overflow: hidden;
  border-style: solid;
  border-color: #11191f;
  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: 20px;
  font-size: 13px;
  font-weight: 700;
  overflow-y: auto;
  overflow-x: hidden;
  top: 48px;
}

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

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

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

.line {
  height: 22px;
  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: 7px;
  height: 7px;
  position: absolute;
  top: 8px;
  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.be {
  background-color: #26c2a3;
}

.circle.ex {
  background-color: #00CC00;
}

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

.circle.in {
  background-color: yellow;
}

.circle.mi {
  background-color: orange;
}

.circle.bl {
  background-color: red;
}

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

#movesHeader {
  font-size: 13px;
  font-weight: 900;
  line-height: 24px;
  top: 23px;
  height: 24px;
  position: absolute;
  left: 0;
  right: 0;
  border-top: solid 1px #11191f;
  background-color: #11191f;
  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: 22px;
  font-size: 13px;
  font-weight: 700;
  user-select: text;
  -moz-user-select: text;
}

#history > table.historyTable {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

#history .histMoveNum {
  width: 36px;
  color: #4a9ab8;
  text-align: right;
  padding: 2px 6px 2px 4px;
  white-space: nowrap;
  font-weight: 400;
  font-size: 12px;
}

#history .histMove {
  width: calc(50% - 18px);
  padding: 1px 0;
}

#history .histMove .movelink {
  display: flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 4px;
  gap: 4px;
}

#history tr:nth-child(even) {
  background-color: rgba(0, 0, 0, 0.12);
}

#history .histVarCell {
  padding: 0 4px 2px 42px;
}

#history .movelink {
  cursor: pointer;
}

#history .movelink.selected,
#history .movelink.selected:hover {
  color: #ffffff;
  background-color: #2d4155;
}

#history .movelink:hover {
  background-color: #2a3745;
}

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

#history .moveQualityDot {
  display: inline-block;
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-left: 2px;
}

#history .varlink {
  color: #a0aab4;
  font-style: italic;
  cursor: pointer;
}

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


/* 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: #111920;
}

/* Opening */

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

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

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

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

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

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

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

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

.line .score {
  font-size: 12px;
  display: inline-block;
  width: 50px;
  text-align: left;
  position: absolute;
  left: 180px;
}

.line .popularity {
  font-size: 12px;
  display: inline-block;
  left: 220px;
  position: absolute;
  width: 50px;
  text-align: left;
}

.line .moves {
  font-size: 12px;
  display: inline-block;
  left: 308px;
  position: absolute;
}

/* Static */

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

#staticHeader {
  font-size: 13px;
  font-weight: 900;
  line-height: 24px;
  top: 23px;
  height: 24px;
  position: absolute;
  left: 0;
  right: 0;
  border-top: solid 1px #11191f;
  background-color: #11191f;
  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;
}

/* Arrow */

#arrowWrapper1,
#arrowWrapper2 {
  position: absolute;
  pointer-events: none;
  display: none;
  filter: drop-shadow(-1px -1px 1px white) drop-shadow(1px 1px 1px #11191f);
  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: #11191f;
  border: solid 1px #11191f;
  position: absolute;
  box-shadow: 0 0 4px hsla(0, 0%, 0%, .2);
  padding-top: 6px;
  padding-bottom: 6px;
  font-size: 14px;
  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: #11191f;
}

.menuItem {
  height: 14px;
  line-height: 14px;
  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: #8ca2ad;
}

#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: #769656;
}

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

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

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

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

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

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

#cbTable.c4 {
  color: #ffffff;
}

#cbTable.c4 td.cbCell {
  box-shadow: 0 0 20px #11191f;
  background-color: #6e3b0e;
}

#boxBoard.c4 {
  background: url('data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEBLAEsAAD/2wBDAAUDBAQEAwUEBAQFBQUGBwwIBwcHBw8LCwkMEQ8SEhEPERETFhwXExQaFRERGCEYGh0dHx8fExciJCIeJBweHx7/2wBDAQUFBQcGBw4ICA4eFBEUHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh7/wAARCAAoACgDASIAAhEBAxEB/8QAGQABAQEBAQEAAAAAAAAAAAAABAADAgEI/8QAMBAAAQMCAwQHCQAAAAAAAAAAAQACEQMEEiGxMUFRcRMUIkNhcsEyM1KBgpHR4fH/xAAZAQADAQEBAAAAAAAAAAAAAAAAAQQDBQb/xAAeEQACAgICAwAAAAAAAAAAAAAAAQIDETIhMSJBUf/aAAwDAQACEQMRAD8A+X7X3ThO5b2ziMQOYj9I9rOB3Jb0va+k6riz9nuEa25Ly3aADHNPqCTRB+M6otuMw7gUurMUo2idVNY/IaBXTjhIB7sKXly2WzGfR+ilvVjAmCtMmuPgdFvbS5/CGyuLcRQeSfBb2LA552iGxCJvscRVuOywTv8AVIrginSO0QjUS0YGcP6k1nRRb5fypZbDCVowEEd2NFLi9qFtwKeEwaJM8gpUVp4FkI0gW1QAQcRnNLsGltN1TcMh9ipSLNRx7NaIPXA0iA0GZ5Le7ytm+U6qUp3sg+h7gB0vO1tMgfMKUpb1vgGf/9k=');
}

#chessboard1.c4>.l {
  background: url('data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEBLAEsAAD/2wBDAAUDBAQEAwUEBAQFBQUGBwwIBwcHBw8LCwkMEQ8SEhEPERETFhwXExQaFRERGCEYGh0dHx8fExciJCIeJBweHx7/2wBDAQUFBQcGBw4ICA4eFBEUHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh7/wAARCAAoACgDASIAAhEBAxEB/8QAGQABAQEBAQEAAAAAAAAAAAAAAAMEAgEG/8QALBAAAQMCAwYFBQAAAAAAAAAAAQACEQMhEjFBEyJRYZGhBCOBscFCcYKSsv/EABcBAQEBAQAAAAAAAAAAAAAAAAABBgL/xAAVEQEBAAAAAAAAAAAAAAAAAAAAAf/aAAwDAQACEQMRAD8A+mpN8qALCYP4qzB50/aP2KlQIa0gZ39lUTttbx6byzzQHiRDahi2ELJQs8SPqkX5rVUdjYDE5nssoaRWFzEyOhVgVGw5mowknsi8MwAbEMOSIq4jDkcz8K+EbQnSbdVEkinlxWiJuNY/pRE82tA4XlQfG0J5COhVnRYWE6KJvVHNouPVIOKwLSZEnD8ou65DqkDTCO8ouh3UO6YuLq4eAABnPyURQQeSBI4SpNO+0m8jjzREgSJmYdI9kREV/9k=');
}

#chessboard1.c4>.d {
  background: url('data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBwkJBgkJCgkHCAYICBYJCAcHCA8ICQcWFB0iFiARHxMYHSggGCYlGx8TITEhJSkrLi4uFx8zODMsNygtLisBCgoKDQoNFQ8PFSsZExkrNysrKysrLSsrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrK//AABEIACgAKAMBIgACEQEDEQH/xAAYAAEBAQEBAAAAAAAAAAAAAAAAAQMCBv/EACgQAAIABAUDBAMAAAAAAAAAAAABAgMRMSEiQWFxMlHRQpHBwhMjM//EABcBAQEBAQAAAAAAAAAAAAAAAAEAAgX/xAAXEQEAAwAAAAAAAAAAAAAAAAAAARFB/9oADAMBAAIRAxEAPwDxkn136hXMtiSXjFyR6bM4zr40g9XeiOaZFyJeuupF0LmjBM9e+LKRvF8lNh1J6orB2Vr6ISf6RceA3a7wqZLqW8zvVqopbdoSlnWmFArLZoEzazPvoCxP9nsDSpZVPyR3svgsa6d14ABLBhGtiv7AAmceExXpQADCl//Z');
}

#chessboard1.c4>div {
  color: rgba(0, 0, 0, 0.8);
}

#chessboard1.c4>.h1:before {
  border: 4px solid rgba(0, 0, 0, 0.8);
  box-shadow: inset 0px 0px 4px rgba(0, 0, 0, 0.8);
}

#chessboard1.c4>.h0:before {
  border: 4px solid rgba(0, 0, 128, 1);
  box-shadow: inset 0px 0px 4px rgba(0, 0, 128, 1);
}

#chessboard1.c4>.h3:before {
  border: 4px solid rgba(255, 220, 40, 0.85);
  box-shadow: inset 0px 0px 4px rgba(255, 255, 0, 0.8);
}

#boxBoard.c4 #arrowWrapper3 svg line {
  stroke: rgba(255, 220, 40, 0.85);
}

#boxBoard.c4 #arrowWrapper3 svg defs marker {
  fill: rgba(255, 220, 40, 0.85);
}

#icolor.c4 {
  background-color: #561102;
}

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

#icolor.c4>div>div.d {
  background-color: #6e3b0e;
}

#cbTable.c5 {
  color: #ffffff;
}

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

#boxBoard.c5 {
  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAMAAAC7IEhfAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAMNQTFRFEBAYHhgrEBAZCQkOPDBWDw8WDw8XDg4VDg4WCAgNEBAUEREaEBAgEBAdDQ0UEBAQCQkPCQkLDw8aCAgMCgoPDw8VEhIbOi5UDw8dDw8UEBAXEBAeEREcGxUoEBAaEREiEBARDw8PIRsuDw8YMCRKCAgOExMcCAgIDQ0SDw8hCQkSEBAcCQkMIx0wFxEkBwcREREXCAgPDg4SEBAbRjpgBwcLDAwTEQ4dIhwvCQkJNipQJB4xQDRaCQkTGhQnDAwWDQ0Vm7fB2wAAAcNJREFUeJy1lGl7qjAQhYcEAlyQVRYVRdy3LmqrtXb7/7+qJ7nc9mO5z1POBwjMG5KcmYGolmFYlkWEi2HgkXMhxHZblmW/zzmnb/0IInJ/z6W63a7v53lOZNv287Oa3ul04ljX9VZAKAiyLNOlLMs0Tc4x0rQ0TT8+YolpmsZYc3C1WnGO4WSCTYzHvu8/PGhShjz9fD4XAt8ajVoAD4dDGKpd/JHyPI+oqirPOx6Pmw0CUcQYc5zmoBKI19cwDDmHhSphphkEARGTvsCJJGkHHI+LomBM/1Kv19vtcDdNzNvt9vu9qqiGINJOtFwu5WlpOMQxb28Xi4VyIo5ns5lKoeu2ACJTdbmg9h3ner1K85lh4Au2PZRTgaRpcxAmKSsHA4T7fYyenqbTqefh6Hd3WLWOtwCiAIkcxxFCFWAURdut6muUZ1litNn8J+i6rupU+a9QKEkb4ANMYAwpfHnB+q2AkK6jrycTRKrqfD6b5uVyyTIVZrJDkiT5W2bNwPV6TaT6E5t4fFRhLH1zo94BHI3gBFL4++C/xGmaI5v3dDoJgb56e9NqMYbNv783ByHVi3n+/UPAqCjQwvUjwMHg98FP2jNQSKAcUbIAAAAASUVORK5CYII=');
}

#chessboard1.c5>.l {
  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoBAMAAAB+0KVeAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAABtQTFRF1cmLxrV4o5Jk1b+DnIlduKdxtqZzrJZmjH9bBwHGNAAAAMZJREFUeJyVkU0KgzAQRidIu3aQeoDgAQxDL1ACPUH2uvEKXqHH7vxoLG0K5ltI5g3ExxcAh5wWgOQjuSQoQ2hoIQqywo6QxkrobKRl4v1+ZwFGjt8yyPDwvgJm+cSnnj1ohDLE/ZRIoroVUCLKkHg9wZEfuNmpbPY8Dy3XGaVYytUVoIph26hiv/B8q4HbTfubcO5/oB9Y7KhfRSugxbXcUj8j0kd5X5ACy2mf7BHMoQKat747uC7/pwBFbo3xuVr1L5M/C98qm2gohek/sgAAAABJRU5ErkJggg==');
}

#chessboard1.c5>.d {
  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoBAMAAAB+0KVeAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAABVQTFRFnYJIupZfcVsyso5XZlArel86SDgeWOvzxQAAAL1JREFUeJyVksERg0AIRVEbWMYGDEnuGjrIkA6SFtJ/CVlYiAc5rBwceM7gm4+AoIU4c31YlTqmEOcHMa/2bmLg7SQsbWTSxbEzgSLyJK+btOkEDPmi3Vg9eMMc1u6qXQHWAq9eiLsyjJeWUw7dzmT/nv2wbaFlQNSvR3QJdLHZFEdC2KsH+qa4CdsNU0gqtsdv3QnouQx1KS0AHNEdIXuKRT3W+KG6YfM2iGXiuFECq9v9I/J6i0X/bfK98Afgx1nzwOT8HAAAAABJRU5ErkJggg==');
}

#chessboard1.c5>div {
  color: rgba(0, 0, 0, 0.8);
}

#chessboard1.c5>.h1:before {
  border: 4px solid rgba(0, 0, 0, 0.8);
  box-shadow: inset 0px 0px 4px rgba(0, 0, 0, 0.8);
}

#icolor.c5 {
  background-color: #13121d;
}

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

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

#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.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;
  flex-shrink: 0;
}

.col.left {
  width: 305px;
}

.col.center {
  flex: 1;
  min-width: 380px;
}

.col.right {
  width: 305px;
}

/* Robot feedback panel */

#wRobot {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background-color: #1a2530;
  border: 1px solid #11191f;
  border-radius: 3px;
  margin: 0 5px 8px 5px;
  box-sizing: border-box;
  min-height: 72px;
}

#robotBubble {
  flex: 1;
  background-color: #1e2832;
  border: 1px solid #3d4f60;
  border-radius: 8px;
  padding: 9px 13px;
  position: relative;
  transition: border-color 0.3s;
}

#robotBubble::before {
  content: '';
  position: absolute;
  left: -9px;
  top: 50%;
  transform: translateY(-50%);
  border: 5px solid transparent;
  border-right-color: #3d4f60;
}

#robotBubble::after {
  content: '';
  position: absolute;
  left: -7px;
  top: 50%;
  transform: translateY(-50%);
  border: 4px solid transparent;
  border-right-color: #1e2832;
}

#robotText {
  font-size: 13px;
  font-weight: 700;
  color: #64c4db;
  line-height: 1.4;
  transition: color 0.3s;
}

/* Navigation bar between History and Opening */
#navBar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px 10px;
  background-color: #1e2832;
  border-radius: 3px;
  margin: 0 5px 8px 5px;
}

#navBar #buttonFirst,
#navBar #buttonBack,
#navBar #buttonForward,
#navBar #buttonLast {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  height: 36px;
  border-radius: 4px;
  cursor: pointer;
  background-color: #2a3542;
}

#navBar #buttonFirst svg,
#navBar #buttonBack svg,
#navBar #buttonForward svg,
#navBar #buttonLast svg {
  position: static;
  fill: #ffffff;
}

#navBar #buttonFirst.on svg,
#navBar #buttonBack.on svg,
#navBar #buttonForward.on svg,
#navBar #buttonLast.on svg {
  opacity: 0.8;
}

#navBar #buttonFirst.off svg,
#navBar #buttonBack.off svg,
#navBar #buttonForward.off svg,
#navBar #buttonLast.off svg {
  opacity: 0.2;
}

#navBar #buttonFirst.on:hover,
#navBar #buttonBack.on:hover,
#navBar #buttonForward.on:hover,
#navBar #buttonLast.on:hover {
  background-color: #3d4f60;
  cursor: pointer;
}

#navBar #buttonFirst.off,
#navBar #buttonBack.off,
#navBar #buttonForward.off,
#navBar #buttonLast.off {
  cursor: default;
}

#buttonEditBoard {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  font-size: 13px;
  font-weight: 700;
  color: #b1b4bd;
  cursor: pointer;
  padding: 0 10px;
  height: 36px;
  border-radius: 4px;
  background-color: #2a3542;
  border: 1px solid #3d4f60;
  white-space: nowrap;
}

#buttonEditBoard:hover {
  background-color: #3d4f60;
  color: #e1e2e6;
}

.box {
  border: solid #11191f 1px;
  border-radius: 3px;
  margin-bottom: 8px;
  margin-top: 8px;
  position: relative;
  resize: none;
  overflow: hidden;
  background-color: #11191f;
  z-index: 4;
  min-width: 108px;
  min-height: 64px;
}

.boxIn {}

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

}

.boxMid {
  background-color: #11191f;
  border-bottom: solid 1px #11191f;
  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: #111920;
  position: absolute;
  top: 28px;
  bottom: 0;
  left: 0;
  right: 0;
}

#wGraph {
  box-sizing: border-box;
}

#fenInputWrapper {
  position: absolute;
  top: 28px;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  padding: 10px;
  gap: 8px;
  box-sizing: border-box;
}

#fenInput {
  flex: 1;
  background-color: #1e2832;
  border: 1px solid #3d4f60;
  border-radius: 4px;
  color: #e1e2e6;
  font-family: "Segoe UI", Arial, Helvetica, sans-serif;
  font-size: 13px;
  padding: 8px;
  resize: none;
  outline: none;
  line-height: 1.5;
  box-sizing: border-box;
}

#fenInput:focus {
  border-color: #64c4db;
}

#fenButtonRow {
  display: flex;
  gap: 8px;
}

#buttonLoadFen {
  flex: 1;
  background-color: #2a3542;
  border: 1px solid #3d4f60;
  border-radius: 4px;
  color: #e1e2e6;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  padding: 8px;
  cursor: pointer;
}

#buttonLoadFen:hover {
  background-color: #3d4f60;
}

#buttonCopyFen {
  background-color: #2a3542;
  border: 1px solid #3d4f60;
  border-radius: 4px;
  color: #b1b4bd;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  padding: 8px 16px;
  cursor: pointer;
  white-space: nowrap;
}

#buttonCopyFen:hover {
  background-color: #3d4f60;
  color: #e1e2e6;
}

#buttonCopyFen.copied {
  color: #64c4db;
  border-color: #64c4db;
}

#openingEditStack {
  position: relative;
}

#wEdit {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 5;
}

.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");
}

.iconFen {
  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'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'%3E%3C/path%3E%3Cpolyline points='14 2 14 8 20 8'%3E%3C/polyline%3E%3Cline x1='16' y1='13' x2='8' y2='13'%3E%3C/line%3E%3Cline x1='16' y1='17' x2='8' y2='17'%3E%3C/line%3E%3C/svg%3E");
}

#wb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
  flex: 1;
  justify-content: center;
  min-width: 0;
}

.wbButton {
  width: 28px;
  height: 28px;
  opacity: 0.3;
  background-color: transparent;
  cursor: pointer;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  display: inline-block;
  border-radius: 3px;
}

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

.wbButton.selected {
  opacity: 0.6;
}

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

@media (max-width: 700px) {
  #pageHeader {
    height: 48px;
  }

  #pageHeaderInner {
    padding: 0 8px;
  }

  #logo {
    width: auto;
    flex-shrink: 1;
  }

  #logotextmain {
    font-size: 14px;
  }

  #logotextsub {
    display: none;
  }

  #wb {
    gap: 10px;
    flex: 1;
    justify-content: center;
  }

  .wbButton {
    width: 22px;
    height: 22px;
  }

  .col {
    margin: 0;
    width: 100% !important;
  }

  #colCenter { order: 1; }
  #colLeft   { order: 2; }
  #colRight  { order: 3; }

  .box {
    border-radius: 0;
    margin-bottom: 4px;
    margin-top: 4px;
  }

  #navBar {
    margin: 0 0 4px 0;
    border-radius: 0;
  }

  #openingEditStack {
    margin: 0;
  }
}