body {
  padding-left: 8px;
}

button {
  background-color: #F0E8E0;
  box-shadow: 1px 1px 1px rgba(0,0,0,0.5);
  border: none;
  border-radius: 6px;
  color: black;
  padding: 5px 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
/*  font-size: 16px;*/
}


button:active {
  background-color: #E0D8D0;
  box-shadow: none;
  box-shadow: inset 1px 1px 1px rgba(0,0,0,0.5);
  transform: translate(2px,2px);
}

.toggle-switch {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 16px;
/*  margin: 10px;*/
}

.toggle-switch .toggle-input {
  display: none;
}

.toggle-switch .toggle-label {
  position: absolute;
  top: 0;
  left: 0;
  width: 36px;
  height: 16px;
  background-color: #B0B0B0; /*#2196F3;*/
  border-radius: 34px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.toggle-switch .toggle-label::before {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  top: 2px;
  left: 2px;
  background-color: #fff;
  box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s;
}

.toggle-switch .toggle-input:checked + .toggle-label {
  background-color: #2196F3; /*#4CAF50;*/
}

.toggle-switch .toggle-input:checked + .toggle-label::before {
  transform: translateX(20px);
}

.toggle-switch.light .toggle-label {
  background-color: #BEBEBE;
}

.toggle-switch.light .toggle-input:checked + .toggle-label {
  background-color: #9B9B9B;
}

.toggle-switch.light .toggle-input:checked + .toggle-label::before {
  transform: translateX(6px);
}

.toggle-switch.dark .toggle-label {
  background-color: #4B4B4B;
}

.toggle-switch.dark .toggle-input:checked + .toggle-label {
  background-color: #717171;
}

.toggle-switch.dark .toggle-input:checked + .toggle-label::before {
  transform: translateX(20px);
}


.toggle-switch .toggle-label-2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 36px;
  height: 16px;
  background-color: #2196F3; /*#2196F3;*/
  border-radius: 34px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.toggle-switch .toggle-label-2::before {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  top: 2px;
  left: 2px;
  background-color: #fff;
  box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s;
}

.toggle-switch .toggle-input:checked + .toggle-label-2 {
  background-color: #2196F3; /*#4CAF50;*/
}

.toggle-switch .toggle-input:checked + .toggle-label-2::before {
  transform: translateX(20px);
}

.toggle-switch.light .toggle-label-2 {
  background-color: #2196F3; /*#BEBEBE;*/
}

.toggle-switch.light .toggle-input:checked + .toggle-label-2 {
  background-color: #9B9B9B;
}

.toggle-switch.light .toggle-input:checked + .toggle-label-2::before {
  transform: translateX(6px);
}

.toggle-switch.dark .toggle-label-2 {
  background-color: #717171; /*#4B4B4B*/
}

.toggle-switch.dark .toggle-input:checked + .toggle-label-2 {
  background-color: #717171;
}

.toggle-switch.dark .toggle-input:checked + .toggle-labe-2l::before {
  transform: translateX(20px);
}



table.colpick {
  display: inline-table;
}
table.colpick td {
  padding: 0;
  border: solid white 4px;
}
table.colpick td.sel {
  border: solid red 4px;
}
table.colpick td.edit {
  border: solid blue 4px;
}
table.colpick td div {
  width: 32px;
  height: 32px;
  border : solid black 1px;
}
table.colpick td.inv {
  filter: invert(1);
}

table.toolpal {
  display: inline-table;
}
table.toolpal td {
  padding: 0;
  text-align: center;
  border : solid white 4px;
}
table.toolpal td.sel {
  border : solid red 4px;
}
table.toolpal td div {
  width: 42px;
  height: 42px;
  border : solid black 1px;
}

table.toolpal.bis td div {
  width: 42px;
  height: 42px;
}

table.toolpal td.disabled {
  pointer-events: none;
  background-color: #808080;
  opacity: 0.5;
}

table.palpal {
  display: inline-table;
  border-spacing:0;
  border: solid white 2px;
}
table.palpal td {
  padding: 0;
  text-align: center;
  border : none;
  margin: 0;
}
table.palpal td div {
  width: 24px;
  height: 24px;
  margin: 0;
  padding: 0;
}
table.palpal:hover {
  border-color: black;
}


div.shapeCollec {
  display: inline-flex;
  vertical-align: middle;
}
/*  text-align: center;
  */
div.shapeCollec canvas {
  width: 44px;
  height: 44px;
  border : solid black 1px;
  padding : 2px;
  margin-left: 2px; margin-right: 2px;
}

div.tileset {
  display: flex;
  flex-flow: column wrap;
  justify-content: space-around;
}

div.tileset > * {
  margin: 2px;
} 

table.vcen td {
  vertical-align: middle;
}

div.shapeSelector {
  display: inline-grid;
  grid-template-rows: repeat(5,1fr);
  grid-auto-flow: column;
}

div.shapeSelector canvas {
  border : solid black 1px;
  padding: 2px;
}

div.shapeSelector div {
  width: 50px;
  height: 50px;
  border : solid white 4px;
}

div.shapeSelector div.sel {
  border : solid red 4px;
}

canvas.board {
  background: #F8F8FF;
}

.credits { font-size: 80%; }

body.dark table.colpick td {
    border-color: #101820;
  }
body.dark table.colpick td.sel {
    border-color: red;
  }
body.dark  table.colpick td div {
    border-color: white;
  }

body.dark  table.toolpal td {
    border-color: #101820;
  }
body.dark  table.toolpal td.sel {
    border-color: red;
  }
body.dark  table.toolpal td div {
    border-color: white;
  }
  
body.dark {
    background: #101820;
    color: white;
}
  
body.dark  canvas {
    background: #203040;
}
  
body.dark  a:link { color: lightskyblue; }
body.dark  a:visited { color: #8060A0; }
body.dark  a:hover { color: #ffffff; }
body.dark  a:active { color: #ff4040; text-decoration:none; font-weight:normal; }
  
body.dark  input {
  background-color: #202830;
  border: solid gray 1px;
  box-shadow: none;
  color: white;
}

body.dark  button {
  background-color: #202830;
  border: solid gray 1px;
  box-shadow: none;
  border-radius: 6px;
  color: white;
}
body.dark  button:active {
  background-color: #101820;
  box-shadow: none;
}
  
unfolder {
  background: #F0F0F0;
}

unfolder.dark {
  background: #304050;
}