factorio-clockmaster/src/App.css

#root {
  max-width: 1280px;
  margin: 0 auto;
  padding: 2rem;
  text-align: center;
}
.panel-button {
  border: none;
  cursor: pointer;
  position: relative;
  background-color: #313031;
  height: 24px;
  aspect-ratio: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    inset 8px 0px 4px -8px #000,
    inset -8px 0px 4px -8px #000,
    inset 0px 8px 4px -8px #000,
    inset 0px -8px 4px -8px #000,
    inset 0px 8px 4px -8px #fff,
    inset 0px -8px 2px -8px #432400,
    0px 0px 4px 0px #000;
}
.panel-button:active,
.panel-button.active {
  box-shadow:
    inset 0px 9px 2px -8px #000,
    inset 8px 0px 4px -8px #563a10,
    inset 8px 0px 4px -8px #563a10,
    inset -8px 0px 4px -8px #563a10,
    inset -8px 0px 4px -8px #563a10,
    inset 0px -9px 2px -8px #fff,
    0px 0px 4px 0px #000;
  background-color: #f1be64;
  filter: none;
  outline: 0;
}

.panel-button.hover,
.panel-button:focus,
.panel-button:hover {
  color: #000;
  text-decoration: none;
  outline: 0;
  box-shadow:
    inset 8px 0px 4px -8px #000,
    inset -8px 0px 4px -8px #000,
    inset 0px 9px 2px -8px #fff,
    inset 0px -8px 4px -8px hsl(36, 94%, 20%),
    0px 0px 4px 0px #000,
    inset 0px 0px 4px 2px #f9b44b;
  background-color: #e39827;
  filter: drop-shadow(0 0 2px #f9b44b);
}
input:focus {
  border: none;
  filter: drop-shadow(0 0 2px #f9b44b);
}
.button {
  background-color: #8e8e8e;
  padding: 10px 12px 10px 12px;
  font-size: 100%;
  text-align: left;
  color: #000;
  font-weight: 600;
  display: inline-block;
  vertical-align: baseline;
  min-width: 128px;
  border: none;
  line-height: inherit;
  white-space: nowrap;
  box-shadow:
    inset 8px 0px 4px -8px #000,
    inset -8px 0px 4px -8px #000,
    inset 0px 10px 2px -8px #e3e3e3,
    inset 0px 10px 2px -8px #282828,
    inset 0px -9px 2px -8px #000,
    0px 0px 4px 0px #000;
  position: relative;
  margin-right: 14px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  height: 36px;
  text-align: left;
}
.button.icon {
  height: fit-content;
  min-width: auto;
  padding: 0;
  margin: 0;
}
.flex-column .button {
  margin-right: 0;
}
.button i {
  margin-right: 0px;
}
.button:hover,
.button.hover {
  color: #000;
  text-decoration: none;
  outline: 0;
  box-shadow:
    inset 8px 0px 4px -8px #000,
    inset -8px 0px 4px -8px #000,
    inset 0px 9px 2px -8px #fff,
    inset 0px 8px 4px -8px #000,
    inset 0px -8px 4px -8px #000,
    inset 0px -9px 2px -8px #432400,
    0px 0px 4px 0px #000,
    inset 0px 0px 4px 2px #f9b44b;
  background-color: #e39827;
  filter: drop-shadow(0 0 2px #f9b44b);
}
.button:active,
.button.active {
  position: relative;
  padding-top: 12px;
  padding-bottom: 8px;
  vertical-align: -2px;
  box-shadow:
    inset 0px 10px 2px -8px #000,
    inset 0px 9px 2px -8px #000,
    inset 8px 0px 4px -8px #563a10,
    inset 8px 0px 4px -8px #563a10,
    inset -8px 0px 4px -8px #563a10,
    inset -8px 0px 4px -8px #563a10,
    inset 0px 9px 2px -8px #563a10,
    inset 0px -9px 2px -8px #563a10,
    inset 0px -8.5px 0px -8px #563a10,
    0px 0px 4px 0px #000;
  background-color: #f1be64;
  filter: none;
  outline: 0;
}
.button.disabled,
.button.disabled:hover,
.button.disabled:active {
  padding-top: 10px;
  padding-bottom: 10px;
  cursor: default;
  vertical-align: 0;
  background-color: #3d3d3d;
  color: #818181;
  box-shadow:
    inset 8px 0px 4px -8px #000,
    inset -8px 0px 4px -8px #000,
    inset 0px 8px 4px -8px #000,
    inset 0px -6px 4px -8px #818181,
    inset 0px -8px 4px -8px #000,
    0px 0px 4px 0px #000;
  filter: none;
}
.button-green {
  background-color: #5eb663;
  padding: 10px 12px 10px 12px;
  font-size: 100%;
  text-align: left;
  color: #000;
  font-weight: 600;
  display: inline-block;
  vertical-align: baseline;
  min-width: 128px;
  border: none;
  line-height: inherit;
  white-space: nowrap;
  box-shadow:
    inset 8px 0px 4px -8px #000,
    inset -8px 0px 4px -8px #000,
    inset 0px 10px 2px -8px #95df99,
    inset 0px 10px 2px -8px #163218,
    inset 0px -9px 2px -8px #000,
    0px 0px 4px 0px #000;
  position: relative;
  margin-right: 14px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  height: 36px;
  text-align: left;
}
.flex-column .button-green {
  margin-right: 0;
}
.button-green i {
  margin-right: 0px;
}
.button-green:hover,
.button-green:focus,
.button-green.hover {
  color: #000;
  text-decoration: none;
  outline: 0;
  box-shadow:
    inset 8px 0px 4px -8px #000,
    inset -8px 0px 4px -8px #000,
    inset 0px 9px 2px -8px #cdf1cf,
    inset 0px 8px 4px -8px #000,
    inset 0px -8px 4px -8px #000,
    inset 0px -9px 2px -8px #432400,
    0px 0px 4px 0px #000,
    inset 0px 0px 4px 2px #34be3c;
  background-color: #92e897;
  filter: drop-shadow(0 0 2px #34be3c);
}
.button-green:active,
.button-green.active {
  position: relative;
  padding-top: 12px;
  padding-bottom: 8px;
  vertical-align: -2px;
  box-shadow:
    inset 0px 10px 2px -8px #000,
    inset 0px 9px 2px -8px #000,
    inset 8px 0px 4px -8px #3f5024,
    inset 8px 0px 4px -8px #3f5024,
    inset -8px 0px 4px -8px #3f5024,
    inset -8px 0px 4px -8px #3f5024,
    inset 0px 9px 2px -8px #3f5024,
    inset 0px -9px 2px -8px #3f5024,
    inset 0px -8.5px 0px -8px #3f5024,
    0px 0px 4px 0px #000;
  background-color: #cfdf93;
  filter: none;
  outline: 0;
}
.button-green.disabled,
.button-green.disabled:hover,
.button-green.disabled:active {
  padding-top: 10px;
  padding-bottom: 10px;
  cursor: default;
  vertical-align: 0;
  background-color: #002b02;
  color: #376d3b;
  box-shadow:
    inset 8px 0px 4px -8px #000,
    inset -8px 0px 4px -8px #000,
    inset 0px 8px 4px -8px #000,
    inset 0px -6px 4px -8px #376d3b,
    inset 0px -8px 4px -8px #000,
    0px 0px 4px 0px #000;
  filter: none;
}
.button-green-right {
  background-color: #5eb663;
  padding: 10px 12px 10px 12px;
  font-size: 100%;
  text-align: left;
  color: #000;
  font-weight: 600;
  display: inline-block;
  vertical-align: baseline;
  min-width: 128px;
  border: none;
  line-height: inherit;
  white-space: nowrap;
  box-shadow:
    inset 8px 0px 4px -8px #000,
    inset 0px 10px 2px -8px #95df99,
    inset 0px 10px 2px -8px #163218,
    inset 0px -9px 2px -8px #000,
    0px 0px 4px 0px #000;
  position: relative;
  margin-right: 14px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  height: 36px;
  text-align: right;
}
.button-green-right::after {
  content: "";
  position: absolute;
  height: 100%;
  width: 24px;
  right: -10px;
  top: 0;
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAABACAMAAADCiszgAAABDlBMVEUAAAASMBURLxJJgUkAKxNKiU1Ih01msGpMjVFNjlFLik9ToFdLik9Lik9Lik5Yq1wIHgoOKhGAyoVNjVFipmY3cDpQkVVrsHB2vHlXmFyK1Y5/yoRvuHNcs2E7eT8bQB1doGFAe0IJIQxNjFJDgkhjrGgGHgxetmNcs2FasF9RllVVpllXqlxRnlVQm1RYrV0cQh5SoVcUNRdQk1VLllA8e0AXOhpQkFM0bDcqXC4jTiVRmFVFiUkIHgpTpFhNmVJEh0hNj1EtYTCI1I16w35utnJXn1tNk1FJkk1HjUs/fkI3czsyajYpWSsZPhxrsW9ZnV1XmVo6dz41bzgmUygkUCYiTSUTMRUPKxEOKRFdNbmJAAAAJ3RSTlMAVisODG41Bvb75Zfc1dGXlwb98/7y8fDS0JeXl5eXl25sVjU1MSucyRWzAAABMElEQVQ4y23M51LCUBiE4QWRKFFB7L37EUJTithI6FXs7f5vxDgok3Oy+/OdZxbGdrOZ3DyDOmMn2WptHM5odbfdflzdOtGq2ek8Pa/Pqtg0nVK3eLUUVWrcvsil08UVFaeszG/WsKQsT+tYJJW3s7caFpl8FOf8WKZ40YeFYqFYKBaKhWLx44V/LBQLxaLg+T8sFAvFouFYdFIZFoqFYqFYArjuYQngeuwUEsB19wii4lqu2x+s6dXO9QavDa1atuMOG2+Bh1658VFQq5XJutX3cQjaQal8XbgMQ6N31ZtKKAJKQSkoBaWgFJSCUlAKSkEpKAWloBSUglJQCkpBKSgFpdiz8rUARTxec9yRRmGYTv/lQaMw9ocjL6oUywfjyufXdxhqTdx7O46QmjhX4w9Fq5Q/daB+bwAAAABJRU5ErkJggg==");
  background-repeat: no-repeat;
  background-position: 100% 0%;
  background-size: contain;
}
.button-green-right i {
  margin-right: 0px;
}
.button-green-right:hover,
.button-green-right:focus,
.button-green-right.hover {
  color: #000;
  text-decoration: none;
  outline: 0;
  filter: brightness(1.3) drop-shadow(0 0 2px #34be3c);
}
.button-green-right:active,
.button-green-right.active {
  position: relative;
  padding-top: 12px;
  padding-bottom: 8px;
  vertical-align: -2px;
  box-shadow:
    inset 0px 10px 2px -8px #000,
    inset 0px 9px 2px -8px #000,
    inset 8px 0px 4px -8px #3f5024,
    inset 8px 0px 4px -8px #3f5024,
    inset 0px 9px 2px -8px #3f5024,
    inset 0px -9px 2px -8px #3f5024,
    inset 0px -8.5px 0px -8px #3f5024,
    0px 0px 4px 0px #000;
  background-color: #cfdf93;
  filter: none;
  outline: 0;
}
.button-green-right:active::after,
.button-green-right.active::after {
  content: "";
  position: absolute;
  height: 100%;
  width: 24px;
  right: -10px;
  top: 0;
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAABACAMAAADCiszgAAACBFBMVEUAAACWq1clPgwnPRChwmOhv18iOQ4iOhEdLwwhNBAkOA8jOQ4iNBAkPBSJolSUs1t1ij4kNA4MHwAhLwwhMw0hMQ+Fn0+Jp16Xt14aLA0kOxQlPBR5jkAnOBMqOhYVJQYOIgMcLgsLHQIoPRgZKQoiOBEkOxF4jj6SsFkLGwMlORdOYCRleS4/UB9ohU8xRR3P35PD5ovO3pHM3ZDK243A1IXG2Iq4zX7N4JLM4ZHL4pDJ4o+ev2nH44/F5I6guGoxRxitw3WBmlNxiUZOZS294YW12H0+VCKqzXOcvGWSqmBedjmevmSRqV9geDoQIQIJGgLJ346v0nquxHUmMSMEEQTF4Y3B44mtzom+3IegwoSVt3+etWlwj2KKpld+llJ/mVFuhUQ6TiLH2oq704nA24e21Ya73oW73oOz1X210n2oy3Klxm6lvW6Lq22YuWWaumSUs2KYt2CQpl6Rr1yLqFuNplqBnFF0jEN2kEJeci9MYi1LYCtBVCU9UyItQBguQxccKBLK3Y3C2onD1YfC2IWrzYS22YC6z32bvny1ynu10HigwnaoyHOpx22brmmjv2WWtWGMq2GPr196lV2AnFprh1iSrlZ4k1ZuilaLp1F4kEpyikhmfUF1jEBdcD5acjdUZzdtgjZacDNNYi5HWy0zQyg4TCYoNx4pOxsmMRogMA46/ea2AAAAMHRSTlMADhT7YTLolBhR/O2XTTk1Ev779vKcbWxlVk5MPv76+Ovpp6CclpRzZ15aVU5JRxpOaUmtAAAB4klEQVQ4y23Q5VuTcRTG8VtRBKQEAxS7++BgM6YOwYBJbOo6AQnp7rK7u5v6J3keHsbO2fW7X36vz4tzHVRryzmIhNVoy9mVArkb2mp25ENuZm5qqnr7ngT849e/6dn5namyvugJf/trS0tfKWqxpa0/OjqZnCFq0d3HgbB9PGmfwCeKiksqS8tsyVt4JZPZcv6C/XLSGo5JiUmJKY4zWFViUmJSYlrCFRpeu5lXA1cxTEpMAu9dwiRxarzGcezPtIyvVXwts603MAk8npaeYlSGS0cmDUwcR+y16zbomDiujI5O5ObrleNA+KeBieOSnujIRO4hrTJcZwlEqsa27j6uV3HGlz+1246CeK572NY/NDx2WNbb9568/Px9+Iio5Lh56/mHod8Fop7UamtocH+2qKcc3mbrwGABwOlpl9fZFdmYDXB6xtX4rG8gEwCnZ90PrCGdgtNzbmdXSKfgtLCptffACr1yWtjc0ZsFfZxebHmVt0jB6SVrt0HB6ZXOVQaFoOWrYYzT8hgFp1djFEoKJYWSQkmhpFBSKCmUFCaTw+VuaukUFGbzHW+js6NbUNTXNzQ4rW/yBIXH47n/9HVfFsR8Pt+j9nebJIXf729/+zETcsFg8P2nRIrr2v4fg9wCPnjQTyTwM1IAAAAASUVORK5CYII=");
  background-repeat: no-repeat;
  background-position: 100% 0%;
  background-size: contain;
}
.button-green-right.disabled,
.button-green-right.disabled:hover,
.button-green-right.disabled:active {
  padding-top: 10px;
  padding-bottom: 10px;
  cursor: default;
  vertical-align: 0;
  background-color: #002b02;
  color: #376d3b;
  box-shadow:
    inset 8px 0px 4px -8px #000,
    inset -8px 0px 4px -8px #000,
    inset 0px 8px 4px -8px #000,
    inset 0px -6px 4px -8px #376d3b,
    inset 0px -8px 4px -8px #000,
    0px 0px 4px 0px #000;
  filter: none;
}
.button-red {
  background-color: #fe5a5a;
  padding: 10px 12px 10px 12px;
  font-size: 100%;
  text-align: left;
  color: #000;
  font-weight: 600;
  display: inline-block;
  vertical-align: baseline;
  min-width: 128px;
  border: none;
  line-height: inherit;
  white-space: nowrap;
  box-shadow:
    inset 8px 0px 4px -8px #000,
    inset -8px 0px 4px -8px #000,
    inset 0px 10px 2px -8px #fda1a1,
    inset 0px 10px 2px -8px #8b0101,
    inset 0px -9px 2px -8px #000,
    0px 0px 4px 0px #000;
  position: relative;
  margin-right: 14px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  height: 36px;
  text-align: left;
}
.flex-column .button-red {
  margin-right: 0;
}
.button-red i {
  margin-right: 0px;
}
.button-red:hover,
.button-red:focus,
.button-red.hover {
  color: #000;
  text-decoration: none;
  outline: 0;
  box-shadow:
    inset 8px 0px 4px -8px #000,
    inset -8px 0px 4px -8px #000,
    inset 0px 9px 2px -8px #f8eaea,
    inset 0px 8px 4px -8px #000,
    inset 0px -8px 4px -8px #000,
    inset 0px -9px 2px -8px #432400,
    0px 0px 4px 0px #000,
    inset 0px 0px 4px 2px #c35353;
  background-color: #ff9b9b;
  filter: drop-shadow(0 0 2px #c35353);
}
.button-red:active,
.button-red.active {
  position: relative;
  padding-top: 12px;
  padding-bottom: 8px;
  vertical-align: -2px;
  box-shadow:
    inset 0px 10px 2px -8px #000,
    inset 0px 9px 2px -8px #000,
    inset 8px 0px 4px -8px #642323,
    inset 8px 0px 4px -8px #642323,
    inset -8px 0px 4px -8px #642323,
    inset -8px 0px 4px -8px #642323,
    inset 0px 9px 2px -8px #642323,
    inset 0px -9px 2px -8px #642323,
    inset 0px -8.5px 0px -8px #642323,
    0px 0px 4px 0px #000;
  background-color: #fca8a8;
  filter: none;
  outline: 0;
}
.button-red.disabled,
.button-red.disabled:hover,
.button-red.disabled:active {
  padding-top: 10px;
  padding-bottom: 10px;
  cursor: default;
  vertical-align: 0;
  background-color: #571f1f;
  color: #8c4e4e;
  box-shadow:
    inset 8px 0px 4px -8px #000,
    inset -8px 0px 4px -8px #000,
    inset 0px 8px 4px -8px #000,
    inset 0px -6px 4px -8px #8c4e4e,
    inset 0px -8px 4px -8px #000,
    0px 0px 4px 0px #000;
  filter: none;
}
input[type="text"],
input[type="password"],
input[type="email"],
input[type="url"],
input[type="search"],
textarea {
  vertical-align: baseline;
  font-family: inherit;
  line-height: 1.2;
  font-size: 105%;
  height: 36px;
  max-width: 100%;
  background: #8e8e8e;
  border-radius: 4px;
  padding: 6px;
  border: none;
  box-shadow:
    inset 0px 4px 1px -2px #000,
    inset 0px -4px 1px -2px #c5c5c5,
    inset 2px 0px 1px 0px #5f5f5f,
    inset -2px 0px 1px 0px #5f5f5f,
    inset 0px -2px 2px 0px #5f5f5f,
    0px 0px 4px 1px #2e2521;
}
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
textarea:focus {
  outline: none;
  background: #f0dab4;
  box-shadow:
    inset 0px 4px 2px -2px #000,
    inset 0px -1px 1px 0px #74624b,
    inset 0px -4px 2px -2px #e0e0e0,
    inset 2px 0px 2px 0px #a6885c,
    inset -2px 0px 2px 0px #a6885c,
    0px 0px 4px 1px #2e2521;
}
textarea {
  width: 100%;
  height: 8.1em;
}

.checkbox-label {
  margin-top: 8px;
  margin-bottom: 8px;
  display: flex;
  align-content: center;
  position: relative;
  cursor: pointer;
  line-height: 1.2;
  break-inside: avoid;
}
.checkbox-label > div {
  width: 100%;
  padding-left: 8px;
}
.checkbox-label input {
  position: relative;
  top: -1px;
  left: 0px;
  width: 16px;
  height: 15px;
  padding: 6px;
  position: absolute;
  opacity: 0;
  cursor: pointer;
}
.checkbox-label .checkbox {
  margin: auto;
  position: relative;
  top: -1px;
  left: 0px;
  width: 16px;
  height: 15px;
  padding: 6px;
  background: #8e8e8e;
  box-shadow:
    inset 0px 4px 2.5px -2.5px #111,
    inset 2px 0px 2px 0px #323232,
    inset -2px 0px 2px 0px #323232,
    inset 0px -1px 1px 0px #fff,
    inset 0px -4px 2px -2px #8e8e8e,
    0px 0px 4px 1px #2e2521;
}
.checkbox-label .checkbox:hover,
.checkbox-label .checkbox.hover,
.checkbox-label .checkbox:active,
.checkbox-label .checkbox.active,
.checkbox-label input:focus ~ .checkbox {
  background: #e39827;
  box-shadow:
    inset 0px 4px 2px -2px #412a07,
    inset 2px 0px 2px 0px #5a3c10,
    inset -2px 0px 2px 0px #5a3c10,
    inset 0px -2px 2px 0px #d0ae79,
    inset 0px -2px 4px 0px #c78627,
    0px 0px 4px 1px #786b4f;
}
.checkbox-label .checkbox:active,
.checkbox-label .checkbox.active {
  background: #f3c98e;
  box-shadow:
    inset 0px 4px 2px -2px #412a07,
    inset 2px 0px 2px 0px #5a3c10,
    inset -2px 0px 2px 0px #5a3c10,
    inset 0px -2px 2px 0px #d0ae79,
    inset 0px -2px 4px 0px #c78627,
    inset 0px 1px 2.5px 4.5px #e39827,
    0px 0px 4px 1px #786b4f;
}
.checkbox-label .checkbox:disabled,
.checkbox-label .checkbox.disabled {
  background: #313031;
  box-shadow:
    inset 0px 4px 2.5px -2.5px #111,
    inset 2px 0px 2px 0px #323232,
    inset -2px 0px 2px 0px #323232,
    inset 0px -1px 1px 0px #666,
    inset 0px -4px 2px -2px #8e8e8e,
    0px 0px 4px 1px #2e2521;
}
.checkbox-label input:checked ~ .checkbox {
  background: #e39827;
}
.checkbox-label input:checked ~ .checkbox:active,
.checkbox-label input:checked ~ .checkbox.active {
  background: #f3c98e;
}
.checkbox-label .checkbox::after {
  position: absolute;
  content: "";
}
.checkbox-label input:checked ~ .checkbox::after {
  -webkit-transform: rotate(45deg) scale(1);
  -ms-transform: rotate(45deg) scale(1);
  transform: rotate(45deg) scale(1);
  opacity: 1;
  left: 6px;
  top: 3px;
  width: 2px;
  height: 6px;
  border: solid #282728;
  border-width: 0 2.5px 2.5px 0;
  background-color: transparent;
  border-radius: 0;
}
.disable-checkbox-label input[type="checkbox"] {
  position: relative;
  opacity: 1;
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
  margin-top: 2px;
  width: 1.2em;
  height: 1.2em;
  cursor: pointer;
  background-color: transparent;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48IS0tISBGb250IEF3ZXNvbWUgRnJlZSA2LjQuMCBieSBAZm9udGF3ZXNvbWUgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbSBMaWNlbnNlIC0gaHR0cHM6Ly9mb250YXdlc29tZS5jb20vbGljZW5zZSAoQ29tbWVyY2lhbCBMaWNlbnNlKSBDb3B5cmlnaHQgMjAyMyBGb250aWNvbnMsIEluYy4gLS0+PHN0eWxlPnN2Z3tmaWxsOiNhNmE2YTZ9PC9zdHlsZT48cGF0aCBkPSJNMzY3LjIgNDEyLjVMOTkuNSAxNDQuOEM3Ny4xIDE3Ni4xIDY0IDIxNC41IDY0IDI1NmMwIDEwNiA4NiAxOTIgMTkyIDE5MmM0MS41IDAgNzkuOS0xMy4xIDExMS4yLTM1LjV6bTQ1LjMtNDUuM0M0MzQuOSAzMzUuOSA0NDggMjk3LjUgNDQ4IDI1NmMwLTEwNi04Ni0xOTItMTkyLTE5MmMtNDEuNSAwLTc5LjkgMTMuMS0xMTEuMiAzNS41TDQxMi41IDM2Ny4yek0wIDI1NmEyNTYgMjU2IDAgMSAxIDUxMiAwQTI1NiAyNTYgMCAxIDEgMCAyNTZ6Ii8+PC9zdmc+");
}
.disable-checkbox-label input[type="checkbox"]:hover {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48IS0tISBGb250IEF3ZXNvbWUgRnJlZSA2LjQuMCBieSBAZm9udGF3ZXNvbWUgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbSBMaWNlbnNlIC0gaHR0cHM6Ly9mb250YXdlc29tZS5jb20vbGljZW5zZSAoQ29tbWVyY2lhbCBMaWNlbnNlKSBDb3B5cmlnaHQgMjAyMyBGb250aWNvbnMsIEluYy4gLS0+PHN0eWxlPnN2Z3tmaWxsOiNmZmI1MzN9PC9zdHlsZT48cGF0aCBkPSJNMzY3LjIgNDEyLjVMOTkuNSAxNDQuOEM3Ny4xIDE3Ni4xIDY0IDIxNC41IDY0IDI1NmMwIDEwNiA4NiAxOTIgMTkyIDE5MmM0MS41IDAgNzkuOS0xMy4xIDExMS4yLTM1LjV6bTQ1LjMtNDUuM0M0MzQuOSAzMzUuOSA0NDggMjk3LjUgNDQ4IDI1NmMwLTEwNi04Ni0xOTItMTkyLTE5MmMtNDEuNSAwLTc5LjkgMTMuMS0xMTEuMiAzNS41TDQxMi41IDM2Ny4yek0wIDI1NmEyNTYgMjU2IDAgMSAxIDUxMiAwQTI1NiAyNTYgMCAxIDEgMCAyNTZ6Ii8+PC9zdmc+");
}
.disable-checkbox-label input[type="checkbox"]:checked {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48IS0tISBGb250IEF3ZXNvbWUgRnJlZSA2LjQuMCBieSBAZm9udGF3ZXNvbWUgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbSBMaWNlbnNlIC0gaHR0cHM6Ly9mb250YXdlc29tZS5jb20vbGljZW5zZSAoQ29tbWVyY2lhbCBMaWNlbnNlKSBDb3B5cmlnaHQgMjAyMyBGb250aWNvbnMsIEluYy4gLS0+PHN0eWxlPnN2Z3tmaWxsOiNmZmEyMDB9PC9zdHlsZT48cGF0aCBkPSJNMzY3LjIgNDEyLjVMOTkuNSAxNDQuOEM3Ny4xIDE3Ni4xIDY0IDIxNC41IDY0IDI1NmMwIDEwNiA4NiAxOTIgMTkyIDE5MmM0MS41IDAgNzkuOS0xMy4xIDExMS4yLTM1LjV6bTQ1LjMtNDUuM0M0MzQuOSAzMzUuOSA0NDggMjk3LjUgNDQ4IDI1NmMwLTEwNi04Ni0xOTItMTkyLTE5MmMtNDEuNSAwLTc5LjkgMTMuMS0xMTEuMiAzNS41TDQxMi41IDM2Ny4yek0wIDI1NmEyNTYgMjU2IDAgMSAxIDUxMiAwQTI1NiAyNTYgMCAxIDEgMCAyNTZ6Ii8+PC9zdmc+");
}