* {
  color: white;
  font-family: "Oxygen Mono", monospace;
}

html {
  background-color: #313031;
}

.grip {
  background-repeat: repeat;
  background-size: 5px 40px;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAIAAABrHEPqAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAABaSURBVChT7VExEoAwCAs40I+o//+ctF4rBgc9d0cTCOQ4psg6LwCsFDMTEb0xJVSF5KCyKVmiwR8gIvRaHvz+jc+9IInAMQaLYWRC3Gqrbd8zHZ577755dT8BSZgdqmTeWwoAAAAASUVORK5CYII=");
}

.button {
  background-color: #8e8e8e;
  padding: 1em;
  color: black;
  font-size: 0.8em;
  font-weight: 600;
  border: none;
  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 #000000;
  position: relative;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.button.icon {
  width: 36px;
}

.button.icon-big {
  width: 72px;
}

.button:hover {
  color: black;
  text-decoration: none;
  outline: 0;
  box-shadow:
    inset 8px 0px 4px -8px #000,
    inset -8px 0px 4px -8px #000,
    inset 0px 9px 2px -8px white,
    inset 0px 8px 4px -8px #000,
    inset 0px -8px 4px -8px #000,
    inset 0px -9px 2px -8px #432400,
    0px 0px 4px 0px #000000,
    inset 0px 0px 4px 2px #f9b44b;
  background-color: #e39827;
  filter: drop-shadow(0 0 2px #f9b44b);
}

.button:active,
.button.pushed {
  position: relative;
  padding-top: 1.25em;
  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 #000000;
  background-color: #f1be64;
  filter: none;
  outline: 0;
}

.button.disabled,
.button.disabled:hover,
.button.disabled:active {
  pointer-events: none;
  cursor: default;
  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 #000000;
  filter: none;
}

.button>* {
  color: black;
}

.button.disabled>* {
  color: white;
  opacity: 0.25;
}

.button-primary {
  background-color: #5eb663;
  padding: 1em;
  font-size: 100%;
  text-align: left;
  color: black;
  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 #000000;
  position: relative;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  height: 36px;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: center;
}

.button-primary:hover {
  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 #000000,
    inset 0px 0px 4px 2px #34be3c;
  background-color: #92e897;
  filter: drop-shadow(0 0 2px #34be3c);
}

.button-primary:active {
  position: relative;
  top: 1px;
  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 #000000;
  background-color: #cfdf93;
  filter: none;
  outline: 0;
}

.button-primary.disabled,
.button-primary.disabled:active {
  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 #000000;
  filter: none;
}

.card {
  background-color: #313031;
  border-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAMAAAAMs7fIAAABhWlDQ1BJQ0MgcHJvZmlsZQAAKJF9kT1Iw1AUhU9bpSIVETuICAasulgQFXHUKhShQqgVWnUweekfNGlIUlwcBdeCgz+LVQcXZ10dXAVB8AfE0clJ0UVKvC8ptIjxwuN9nHfP4b37AH+txFSzbRxQNctIxmNCOrMqBF/hwyB6MIohiZn6nCgm4Flf99RNdRflWd59f1aXkjUZ4BOIZ5luWMQbxNObls55nzjMCpJCfE48ZtAFiR+5Lrv8xjnvsJ9nho1Ucp44TCzkW1huYVYwVOIp4oiiapTvT7uscN7irJYqrHFP/sJQVltZ5jqtAcSxiCWIECCjgiJKsBClXSPFRJLOYx7+fscvkksmVxGMHAsoQ4Xk+MH/4PdszdzkhJsUigHtL7b9MQwEd4F61ba/j227fgIEnoErrekv14CZT9KrTS1yBHRvAxfXTU3eAy53gL4nXTIkRwrQ8udywPsZfVMG6L0FOtfcuTXOcfoApGhWiRvg4BAYyVP2use7O1rn9m9PY34/opByuh0Yaa8AAAAJcEhZcwAALiMAAC4jAXilP3YAAAAHdElNRQfmAgIQJSQU1l6SAAAAGXRFWHRDb21tZW50AENyZWF0ZWQgd2l0aCBHSU1QV4EOFwAAALpQTFRFZGJhY2BgYF1cXVpZXFpZXFpYW1hXWlVSV1JQT01MT0xLT0pJTUdETUZDSEJBPDk4PDg3PzYzPzYxOzc2OzYzNi8sMTAxMTAwMS8wMS8vMS4vMC4uMC0tMCwsMCwrMCsqLyooMSYhLCclLCYlLiUhLCUkKCEfJSIhJyEeJSEhJyAdJCEfJCAeJx0aIx0bIxwZIxsYIxoXIBoXHhYUFQ8NEw4NDw4NEQ0MEA0MDw0NDAkHBQQDAwICAAAAeCdZ2wAAAAFiS0dECfHZpewAAACCSURBVHhebY9LDsMwCAXh+RdUiCPl/lc1EXa8aNWRjR6zAWANTBtGM5RSS8kpyDOjR62LMB16N5HXiLRbkeulaqarXDXDx/CxiQY03H25GQhORL6JDPrlj4mFeTPXJkREMAOBgdVPN98hqvp5vxwAJ9HTemCnSmLEgbktcpwMfM8HHrGVLy5TM6g2AAAAAElFTkSuQmCC") 8 / 4px repeat;
  min-height: 36px;
  padding: 0.5em;
}

hr {
  height: 3px;
  border-top: 1px solid #1f1e1e;
  border-right: 1px solid #333232;
  border-bottom: 1px solid #575756;
  border-left: 1px solid #333232;
  background: #383738;
  box-shadow: 0px 0px 2px 0px rgba(61, 58, 57, 1);
  -webkit-box-shadow: 0px 0px 2px 0px rgba(61, 58, 57, 1);
  -moz-box-shadow: 0px 0px 2px 0px rgba(61, 58, 57, 1);
}

.card.inset {
  border-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACEAAAAhCAMAAABgOjJdAAABhWlDQ1BJQ0MgcHJvZmlsZQAAKJF9kTtIw1AUhv+miiIVBzuICEaoThbEF45ahSJUCLVCqw4mN31Bk4YkxcVRcC04+FisOrg46+rgKgiCDxBHJydFFynx3KTQIsYDl/vx3/P/3HsuINRKTLPaxgBNt81kPCamM6tixysCGEQIQ5iSmWXMSVICvvV1T91Ud1Ge5d/3Z3WrWYsBAZF4lhmmTbxBPL1pG5z3icOsIKvE58SjJl2Q+JHrisdvnPMuCzwzbKaS88RhYjHfwkoLs4KpEU8SR1RNp3wh7bHKeYuzVqqwxj35C0NZfWWZ67QGEMciliBBhIIKiijBRpR2nRQLSTqP+fj7Xb9ELoVcRTByLKAMDbLrB/+D37O1chPjXlIoBrS/OM7HMNCxC9SrjvN97Dj1EyD4DFzpTX+5Bsx8kl5tapEjoGcbuLhuasoecLkD9D0Zsim7UpCWkMsB72f0TRmg9xboWvPm1jjH6QOQolklboCDQ2AkT9nrPu/ubJ3bvz2N+f0As9tywbHNoQUAAAAJcEhZcwAALiMAAC4jAXilP3YAAAAHdElNRQfmAgMLNBNXffN5AAAAGXRFWHRDb21tZW50AENyZWF0ZWQgd2l0aCBHSU1QV4EOFwAAAQtQTFRFAAAAAAAAMTAAYQABMQABAAAA/9y6AAAAAAAA/7F+SjAAMRgAMQABGQABAAAA/9nH/9m0MQ8AIQ8AAAAAAAAA/8GqGQsAAAAAAAAAAAAAOxwAMRMAJwkAFAkAMQ8AKQ8AEQABAAAAAAAAAAAA/+/pBwYA//fq//HkAAAAJQsAAAAAIQoABQQA//nwIgkADwQAAAAA//XsAAAAAAAAAAAAHQsA//rzAAAAAAAAAAAACgIAAAAAAAAADAUABgIAAAAAAAAAAAAAGQcADwcAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAFAcAAAAACgMAAAAAAAAAAAAACgIAAAAAAAAAAwIAAAAAdNLDhQAAAFh0Uk5TAAIFBQUFBwgJCgoKCwsMDg4QEBASFRUVGBkaGhoaHx8gICEiIyQlJiYqLi8vMjQ0NDY2Nzo+P0BBTE5PUVNTVFpcXmNjZG9wcXJzdHh5fYCChIuMl5utu+r6V5gAAAABYktHRFmasvQYAAABUklEQVR4nLXUyU7DMBAG4PHEaewsbWihUg9IIPH+T4QEEodKhZa0Wew0jo2SLlD74BM+WZpP8nj5TcA3yGWCdkXfCsTIFq3WvwIRYGqLA8BoyAg4jx9t8dEIMZBBUJ7P5itbrHf7QqhRIE4XD0tmC7n53B60HgSF+er+jtpCfX+td6CAAPIoW2YpM1pp3RsAEiBSJLIqN2Ur9FVESnbKnAShIaOtLaiQUvdD84gBMsaVLUhTdY3uBhFiHKaxsYWu5EEK3QMEyNmUpWgLVddV0XVHgEkY5mmSUFscK1FUoh1WiXia83RiC1nX+7LqFQAN0myWJOw/hL8P/1785+E/U/+9+O/W/z7cKF0F0CzOg7UDnt9WfdGUahRJ9v7iCKpen8r6JKKFigNHGNI3dNuqMVEkUtwRxAjaGn1KZUJg4nYKRzD1n2Q79egcbeJULgPP38MP9ZBIMci5WIsAAAAASUVORK5CYII=") 16 / 8px repeat;
  border-image-outset: 4px;
  background-color: #242324;
  box-shadow: none;
  min-height: 36px;
  padding: 0.5em;
}

.card.mid {
  border-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACEAAAAhCAMAAABgOjJdAAABhWlDQ1BJQ0MgcHJvZmlsZQAAKJF9kTtIw1AUhv+miiIVBzuICEaoThbEF45ahSJUCLVCqw4mN31Bk4YkxcVRcC04+FisOrg46+rgKgiCDxBHJydFFynx3KTQIsYDl/vx3/P/3HsuINRKTLPaxgBNt81kPCamM6tixysCGEQIQ5iSmWXMSVICvvV1T91Ud1Ge5d/3Z3WrWYsBAZF4lhmmTbxBPL1pG5z3icOsIKvE58SjJl2Q+JHrisdvnPMuCzwzbKaS88RhYjHfwkoLs4KpEU8SR1RNp3wh7bHKeYuzVqqwxj35C0NZfWWZ67QGEMciliBBhIIKiijBRpR2nRQLSTqP+fj7Xb9ELoVcRTByLKAMDbLrB/+D37O1chPjXlIoBrS/OM7HMNCxC9SrjvN97Dj1EyD4DFzpTX+5Bsx8kl5tapEjoGcbuLhuasoecLkD9D0Zsim7UpCWkMsB72f0TRmg9xboWvPm1jjH6QOQolklboCDQ2AkT9nrPu/ubJ3bvz2N+f0As9tywbHNoQUAAAAJcEhZcwAALiMAAC4jAXilP3YAAAAHdElNRQfmAgMLNBNXffN5AAAAGXRFWHRDb21tZW50AENyZWF0ZWQgd2l0aCBHSU1QV4EOFwAAAQtQTFRFAAAAAAAAMTAAYQABMQABAAAA/9y6AAAAAAAA/7F+SjAAMRgAMQABGQABAAAA/9nH/9m0MQ8AIQ8AAAAAAAAA/8GqGQsAAAAAAAAAAAAAOxwAMRMAJwkAFAkAMQ8AKQ8AEQABAAAAAAAAAAAA/+/pBwYA//fq//HkAAAAJQsAAAAAIQoABQQA//nwIgkADwQAAAAA//XsAAAAAAAAAAAAHQsA//rzAAAAAAAAAAAACgIAAAAAAAAADAUABgIAAAAAAAAAAAAAGQcADwcAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAFAcAAAAACgMAAAAAAAAAAAAACgIAAAAAAAAAAwIAAAAAdNLDhQAAAFh0Uk5TAAIFBQUFBwgJCgoKCwsMDg4QEBASFRUVGBkaGhoaHx8gICEiIyQlJiYqLi8vMjQ0NDY2Nzo+P0BBTE5PUVNTVFpcXmNjZG9wcXJzdHh5fYCChIuMl5utu+r6V5gAAAABYktHRFmasvQYAAABUklEQVR4nLXUyU7DMBAG4PHEaewsbWihUg9IIPH+T4QEEodKhZa0Wew0jo2SLlD74BM+WZpP8nj5TcA3yGWCdkXfCsTIFq3WvwIRYGqLA8BoyAg4jx9t8dEIMZBBUJ7P5itbrHf7QqhRIE4XD0tmC7n53B60HgSF+er+jtpCfX+td6CAAPIoW2YpM1pp3RsAEiBSJLIqN2Ur9FVESnbKnAShIaOtLaiQUvdD84gBMsaVLUhTdY3uBhFiHKaxsYWu5EEK3QMEyNmUpWgLVddV0XVHgEkY5mmSUFscK1FUoh1WiXia83RiC1nX+7LqFQAN0myWJOw/hL8P/1785+E/U/+9+O/W/z7cKF0F0CzOg7UDnt9WfdGUahRJ9v7iCKpen8r6JKKFigNHGNI3dNuqMVEkUtwRxAjaGn1KZUJg4nYKRzD1n2Q79egcbeJULgPP38MP9ZBIMci5WIsAAAAASUVORK5CYII=") 16 / 8px repeat;
  border-image-outset: 4px;
  background-color: #414040;
  box-shadow: none;
  min-height: 36px;
  padding: 0.5em;
}

.progressbar-container {
  width: 100%;
  height: 100%;
  box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 1);
}

.progressbar-empty {
  width: 100%;
  height: 100%;
  background-color: #3e3d3e;
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.5) inset;
}

.progressbar-full {
  height: 100%;
  position: relative;
  top: -100%;
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 1) inset;
}

.progressbar-full.good {
  background-color: #29d825;
}

.progressbar-full.bad {
  background-color: #cba50f;
}

.titlebar {
  width: 100%;
  height: 36px;
  display: flex;
  flex-direction: row;
  gap: 2px;
  align-items: center;
  padding-bottom: 0.5em;
}

.slot {
  width: calc(36px * 2.5);
  height: calc(36px * 2.5);
  background-color: #313031;
  border-top: 1px solid #1d1d1d;
  border-left: 1px solid #272727;
  border-right: 1px solid #272727;
  border-bottom: 1px solid #403f40;
  box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.5) inset;
}

.slot2 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 38px;
  position: relative;
  z-index: 0;
  width: 38px;
  height: 38px;
  margin: 1px;
  display: flex;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  text-decoration: none !important
}

.slot-empty {
  position: relative;
  width: 100%;
  margin: 8px;
  background-color: #242324;
  box-shadow: 0px 0px 2px #131112;
}

.slot-empty::before {
  position: relative;
  content: '';
  z-index: -1;
  display: block;
  width: 100%;
  height: 0px;
  box-shadow: 0px -0.5px 1.5px 1px #555250
}

.slot-empty::after {
  position: relative;
  content: '';
  z-index: -1;
  display: block;
  width: 100%;
  height: 0px;
  margin-top: 100%;
  box-shadow: 0px 0.5px 1.5px 1px #161414
}

.slot:hover {
  background-color: #ffae00;
  border-top: 1px solid #4d3210;
  border-left: 1px solid #6c4911;
  border-right: 1px solid #6d490f;
  border-bottom: 1px solid #c8913a;
  box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.5) inset;
}

.slot:active {
  background-color: #db7a00;
  border-top: 1px solid #4d3210;
  border-left: 1px solid #6c4911;
  border-right: 1px solid #6d490f;
  border-bottom: 1px solid #c8913a;
  box-shadow: 0px 0px 8px 0px rgba(1, 1, 1, 0.5) inset;
}

.slider-filled {
  appearance: none;
  height: 15px;
  outline: none;
  background-color: #fca000;
  border-top: 1px solid #a66b03;
  border-left: 1px solid #c17a00;
  border-right: 1px solid #d68800;
  border-bottom: 1px solid #a49780;
  box-shadow: 0px 0px 8px 0px rgba(1, 1, 1, 0.5) inset;
}

.slider-empty {
  appearance: none;
  height: 5px;
  outline: none;
  background-color: #2D2D2D;
  border-top: 1px solid #111111;
  border-bottom: 1px solid #878686;
  box-shadow: 0px 0px 4px 0px rgba(1, 1, 1, 0.5) inset;
}

.thumb {
  -webkit-appearance: none;
  appearance: none;

  border-radius: 0;
  width: 25px;
  height: 15px;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAPCAIAAACeBPOyAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAF0SURBVDhPvZNNjsIwDIVJC7QBgRBdseg5ehPOwRk4BgfhRixAAgT9oR3+5pu4E6KqqjSbeYvIL7ZfHMdR2+12Pp8HQaCU6nXi9XoNBoOaGDyfT9b3+11V1fl8VpvNJoqiMAw9z5OIVpAA+v1+zQ1QZ2X/drudTie1Xq+n0ylabl348jxHfbFY+L5/MWA/jmNLiZ/NZqxolWV5vV79JEkIejwe9/v96xfH43G/32dZRjShh8Nht9ulaUo3XEpnyEKoPtvU0Ws0i75MJpPRaCRB7EDH43GDSpbN9bC4i6wW9IVbc6zUixc6HA6ldtJwQbkvwR8FkWwAB6iJgaXcEbhea3e93V/xX1oUz3XEaKWsLtq1aCrd5TXpPTPNDr13qfTexH7QrkUaT85MFEXBlFEOtkvF2yhNrVYrDmEIXAc2pfFFmG8yKUprTVEiBEUIr/1DUq9aLpdYdtdI/QA5lwKoPc/1YstIKv4Q0yxa3XC1GkBLa/0N1SL+b5jDZSEAAAAASUVORK5CYII=");
}

.rainbow-text {
  background: linear-gradient(to right,
      #c266ff,
      #0099ff,
      #00ff00,
      #ff3399,
      #6666ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: rainbow_animation 3s ease-in-out infinite;
  background-size: 200% 100%;
}

@keyframes rainbow_animation {

  0%,
  100% {
    background-position: 0 0;
  }

  50% {
    background-position: 100% 0;
  }
}

.text-white-outline {
  text-shadow:
    0px 0px 1px rgba(255, 255, 255, 0.5),
    -1px -1px 1px rgba(255, 255, 255, 0.5),
    1px -1px 1px rgba(255, 255, 255, 0.5),
    0px -1px 1px rgba(255, 255, 255, 0.5),
    0px 1px 1px rgba(255, 255, 255, 0.5),
    1px 1px 1px rgba(255, 255, 255, 0.5);
}

.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: 0px;
  left: 0px;
  width: 16px;
  height: 16px;
  padding: 6px;
  position: absolute;
  opacity: 0;
  cursor: pointer
}

.checkbox-label .checkbox {
  margin: auto;
  position: relative;
  top: 0px;
  left: 0px;
  width: 16px;
  height: 16px;
  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 {
  transform: rotate(45deg) scale(1);
  opacity: 1;
  left: 5px;
  top: 3px;
  width: 6px;
  height: 8px;
  border: solid #282728;
  border-width: 0 2.5px 2.5px 0;
  background-color: transparent;
  border-radius: 0;
}