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





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 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: 48px;
  height: 48px;
  border : solid black 1px;
}

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

canvas {
  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,
body.dark  button {
    filter:invert(100%);
  }