diff --git a/src/assets/css/checkbox.css b/src/assets/css/checkbox.css
new file mode 100644
index 0000000..33eb2ce
--- /dev/null
+++ b/src/assets/css/checkbox.css
@@ -0,0 +1,132 @@
+.b-contain *,
+.b-contain *::before,
+.b-contain *::after {
+ box-sizing: content-box !important;
+}
+
+.b-contain input {
+ position: absolute;
+ z-index: -1;
+ opacity: 0;
+}
+
+.b-contain span {
+ line-height: 1.5;
+ font-size: 1rem;
+ font-family: inherit;
+}
+
+.b-contain {
+ display: inline-table;
+ position: relative;
+ padding-left: 2rem;
+ cursor: pointer;
+ margin-bottom: 0.4rem;
+}
+
+.b-contain input[type="checkbox"] ~ .b-input {
+ position: absolute;
+ top: 0;
+ left: 0;
+ height: 1.25rem;
+ width: 1.25rem;
+ background: #ffe4c4;
+ transition: background 250ms;
+ border: 1px solid #222222;
+ border-radius: 0.5rem;
+}
+
+.b-contain input[type="radio"] ~ .b-input {
+ position: absolute;
+ top: 0;
+ left: 0;
+ height: 1.25rem;
+ width: 1.25rem;
+ background: #ffe4c4;
+ transition: background 250ms;
+ border: 1px solid #222222;
+ border-radius: 3rem;
+}
+
+.b-contain input[type="checkbox"] ~ .b-input::after {
+ content: "";
+ position: absolute;
+ display: none;
+ left: 7px;
+ top: 3px;
+ width: 0.3rem;
+ height: 0.6rem;
+ border: solid #ffffff;
+ border-width: 0 2px 2px 0;
+ transition: background 250ms;
+ transform: rotate(45deg);
+}
+
+.b-contain input[type="radio"] ~ .b-input::after {
+ content: "";
+ position: absolute;
+ display: none;
+ left: 4px;
+ top: 4px;
+ width: 0.75rem;
+ height: 0.75rem;
+ border-radius: 3rem;
+ background: #ffffff;
+ transition: background 250ms;
+}
+
+.b-contain input[type="checkbox"]:disabled ~ .b-input::after {
+ border-color: #ffffff;
+}
+
+.b-contain input:checked ~ .b-input::after {
+ display: block;
+}
+
+.b-contain:hover input[type="checkbox"]:not([disabled]) ~ .b-input,
+.b-contain input[type="checkbox"]:focus ~ .b-input {
+ background: #ddc2a2;
+ border-color: #222222;
+}
+
+.b-contain:hover input[type="radio"]:not([disabled]) ~ .b-input,
+.b-contain input[type="radio"]:focus ~ .b-input {
+ background: #e2e8f0;
+ border-color: #64748b;
+}
+
+.b-contain input:focus ~ .b-input {
+ box-shadow: 0 0 0 2px #60a5fa;
+}
+
+.b-contain input[type="checkbox"]:checked ~ .b-input {
+ background: #ddc2a2;
+ border-color: #222222;
+}
+
+.b-contain input[type="radio"]:checked ~ .b-input {
+ background: #3b82f6;
+ border-color: #1d4ed8;
+}
+
+.b-contain input[type="checkbox"]:disabled ~ .b-input,
+.b-contain input[type="radio"]:disabled ~ .b-input {
+ opacity: 0.5;
+ cursor: not-allowed;
+}
+
+.b-contain input[type="radio"]:disabled ~ .b-input::after {
+ background: #ffffff;
+}
+
+.b-contain:hover input[type="checkbox"]:not([disabled]):checked ~ .b-input,
+.b-contain input[type="checkbox"]:checked:focus ~ .b-input {
+ background: #ccb191;
+ border-color: #222222;
+}
+
+.b-contain:hover input[type="radio"]:not([disabled]):checked ~ .b-input,
+.b-contain input[type="radio"]:checked:focus ~ .b-input {
+ background: #2563eb;
+ border-color: #1e40af;
+}
\ No newline at end of file
diff --git a/src/assets/css/main.css b/src/assets/css/main.css
index ab00629..004bf55 100644
--- a/src/assets/css/main.css
+++ b/src/assets/css/main.css
@@ -210,21 +210,7 @@ select {
}
input[type=checkbox] {
- width: 25px;
- height: 25px;
- background-color: #ffe4c4;
- border-radius: 50%;
vertical-align: middle;
- border: 2px solid #222222;
- appearance: none;
- -webkit-appearance: none;
- -moz-appearance: none;
- outline: none;
- margin: 10px;
-}
-
-input[type=checkbox]:checked {
- background-color: #222222;
}
.pumps {
diff --git a/src/order/index.html b/src/order/index.html
index b9a6730..e0b9bf1 100644
--- a/src/order/index.html
+++ b/src/order/index.html
@@ -5,6 +5,7 @@
Order - Beacon Blend
+