[royale-asjs] branch develop updated: update all jewel themes

[carlosrovira]

This is an automated email from the ASF dual-hosted git repository.

carlosrovira pushed a commit to branch develop
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git


The following commit(s) were added to refs/heads/develop by this push:
     new 1979d5d  update all jewel themes
1979d5d is described below

commit 1979d5dd4ef39b424fd7462f5b1b59ccd8360ec2
Author: Carlos Rovira <carlosrov...@apache.org>
AuthorDate: Tue Jun 12 02:27:54 2018 +0200

    update all jewel themes
---
 .../src/main/resources/defaults.css                | 60 ++++++++++++----------
 .../src/main/resources/defaults.css                | 60 ++++++++++++----------
 .../src/main/resources/defaults.css                | 60 ++++++++++++----------
 .../src/main/resources/defaults.css                | 60 ++++++++++++----------
 .../src/main/resources/defaults.css                | 60 ++++++++++++----------
 .../src/main/resources/defaults.css                | 60 ++++++++++++----------
 .../src/main/resources/defaults.css                | 60 ++++++++++++----------
 .../src/main/resources/defaults.css                | 60 ++++++++++++----------
 .../src/main/resources/defaults.css                | 60 ++++++++++++----------
 .../src/main/resources/defaults.css                | 60 ++++++++++++----------
 .../src/main/resources/defaults.css                | 60 ++++++++++++----------
 .../src/main/resources/defaults.css                | 60 ++++++++++++----------
 .../src/main/resources/defaults.css                | 60 ++++++++++++----------
 .../src/main/resources/defaults.css                | 60 ++++++++++++----------
 .../src/main/resources/defaults.css                | 60 ++++++++++++----------
 .../src/main/resources/defaults.css                | 60 ++++++++++++----------
 .../src/main/resources/defaults.css                | 60 ++++++++++++----------
 .../src/main/resources/defaults.css                | 60 ++++++++++++----------
 .../src/main/resources/defaults.css                | 60 ++++++++++++----------
 .../src/main/resources/defaults.css                | 60 ++++++++++++----------
 .../src/main/resources/defaults.css                | 60 ++++++++++++----------
 .../src/main/resources/defaults.css                | 60 ++++++++++++----------
 .../src/main/resources/defaults.css                | 60 ++++++++++++----------
 .../src/main/resources/defaults.css                | 60 ++++++++++++----------
 24 files changed, 768 insertions(+), 672 deletions(-)

diff --git 
a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Amethyst-Theme/src/main/resources/defaults.css
 
b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Amethyst-Theme/src/main/resources/defaults.css
index 77a4092..9f2d0a1 100644
--- 
a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Amethyst-Theme/src/main/resources/defaults.css
+++ 
b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Amethyst-Theme/src/main/resources/defaults.css
@@ -221,23 +221,39 @@ j|Card {
   width: 22px;
   height: 22px;
   line-height: 22px;
+  opacity: 0;
+}
+.jewel.checkbox input + span::before {
+  content: " ";
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  width: 22px;
+  height: 22px;
   background: linear-gradient(#7f7f7f, #737373);
   border: 1px solid #333333;
   border-radius: 3px;
 }
-.jewel.checkbox input:checked, .jewel.checkbox input:checked:active {
-  background: url("data:image/svg+xml,<svg viewBox='0 0 16 13' version='1.1' 
xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g 
transform='translate(760, 285)'><polygon fill='%23C92CC6' points='3 13 9 18 19 
7 16 5 9 13 6 10'></polygon></g></g></svg>"), #787878;
-  background-repeat: no-repeat;
-  background-size: 90%;
-  background-position: center;
-  background-attachment: fixed;
+.jewel.checkbox input + span::after {
+  content: " ";
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  width: 22px;
+  height: 22px;
+  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' 
xmlns='http://www.w3.org/2000/svg'%3E%3Cg%3E%3Cg%3E%3Cg%3E%3Crect x='0' y='0' 
width='22' height='22' fill-opacity='0'/%3E%3Cpolygon fill='%23C92CC6' 
points='3.51452637 12.5264893 9 17.9205322 18.9342041 8.02331543 16.0217285 
4.96948242 9 12.0758057 6.47851562 
9.51098633'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+  border: 1px solid transparent;
+  opacity: 0;
+  transition: all 0.3s ease;
+  transform: scale(0);
+}
+.jewel.checkbox input:checked + span::after {
+  opacity: 1;
+  transform: scale(1);
 }
-.jewel.checkbox input:checked:checked:focus, .jewel.checkbox 
input:checked:checked:active:focus, .jewel.checkbox 
input:checked:active:checked:focus, .jewel.checkbox 
input:checked:active:checked:active:focus {
-  background: url("data:image/svg+xml,<svg viewBox='0 0 16 13' version='1.1' 
xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g 
transform='translate(760, 285)'><polygon fill='%23C92CC6' points='3 13 9 18 19 
7 16 5 9 13 6 10'></polygon></g></g></svg>"), #e68ee5;
-  background-repeat: no-repeat;
-  background-size: 90%;
-  background-position: center;
-  background-attachment: fixed;
+.jewel.checkbox input:checked:active + span::after {
+  opacity: 1;
+  transform: scale(1);
 }
 .jewel.checkbox input:focus {
   outline: none;
@@ -252,17 +268,14 @@ j|Card {
   cursor: unset;
   color: #737373;
 }
+.jewel.checkbox input[disabled] + span::after {
+  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' 
xmlns='http://www.w3.org/2000/svg'%3E%3Cg%3E%3Cg%3E%3Cg%3E%3Crect x='0' y='0' 
width='22' height='22' fill-opacity='0'/%3E%3Cpolygon fill='%23191919' 
points='3.51452637 12.5264893 9 17.9205322 18.9342041 8.02331543 16.0217285 
4.96948242 9 12.0758057 6.47851562 
9.51098633'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
 .jewel.checkbox input[disabled]:checked {
-  background: url("data:image/svg+xml,<svg viewBox='0 0 16 13' version='1.1' 
xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g 
transform='translate(760, 285)'><polygon fill='%23191919' points='3 13 9 18 19 
7 16 5 9 13 6 10'></polygon></g></g></svg>"), #404040;
-  background-size: 90%;
-  background-position: center;
-  background-repeat: no-repeat;
-  background-attachment: fixed;
   border: 1px solid #0d0d0d;
 }
 .jewel.checkbox span {
   cursor: pointer;
-  position: relative;
   margin: 0;
   padding-left: 6px;
   vertical-align: top;
@@ -404,8 +417,6 @@ j|Card {
   color: transparent;
 }
 .jewel.slider input::-ms-fill-lower {
-  position: relative;
-  flex: 0;
   padding: 0;
   background: linear-gradient(#d232cf, #bc29ba);
   border: 1px solid #8a1e88;
@@ -413,8 +424,6 @@ j|Card {
   border-radius: 3px;
 }
 .jewel.slider input::-ms-fill-upper {
-  position: relative;
-  flex: 0;
   padding: 0;
   background: linear-gradient(#7f7f7f, #666666);
   border: 1px solid #333333;
@@ -434,11 +443,6 @@ j|Card {
   border-radius: 50%;
 }
 .jewel.slider input::-ms-thumb {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  -o-appearance: none;
-  -ms-appearance: none;
-  appearance: none;
   width: 18px;
   height: 18px;
   background: linear-gradient(#d232cf, #bc29ba);
@@ -450,7 +454,7 @@ j|Card {
   transform: scale(1.4);
 }
 .jewel.slider input:active::-ms-thumb {
-  transform: scale(1.4);
+  transform: scale(0.8);
 }
 .jewel.slider input:focus {
   outline: none;
diff --git 
a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Blue-Theme/src/main/resources/defaults.css
 
b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Blue-Theme/src/main/resources/defaults.css
index 72c005f..db1641a 100644
--- 
a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Blue-Theme/src/main/resources/defaults.css
+++ 
b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Blue-Theme/src/main/resources/defaults.css
@@ -221,23 +221,39 @@ j|Card {
   width: 22px;
   height: 22px;
   line-height: 22px;
+  opacity: 0;
+}
+.jewel.checkbox input + span::before {
+  content: " ";
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  width: 22px;
+  height: 22px;
   background: linear-gradient(#7f7f7f, #737373);
   border: 1px solid #333333;
   border-radius: 3px;
 }
-.jewel.checkbox input:checked, .jewel.checkbox input:checked:active {
-  background: url("data:image/svg+xml,<svg viewBox='0 0 16 13' version='1.1' 
xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g 
transform='translate(760, 285)'><polygon fill='%233CADF1' points='3 13 9 18 19 
7 16 5 9 13 6 10'></polygon></g></g></svg>"), #787878;
-  background-repeat: no-repeat;
-  background-size: 90%;
-  background-position: center;
-  background-attachment: fixed;
+.jewel.checkbox input + span::after {
+  content: " ";
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  width: 22px;
+  height: 22px;
+  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' 
xmlns='http://www.w3.org/2000/svg'%3E%3Cg%3E%3Cg%3E%3Cg%3E%3Crect x='0' y='0' 
width='22' height='22' fill-opacity='0'/%3E%3Cpolygon fill='%233CADF1' 
points='3.51452637 12.5264893 9 17.9205322 18.9342041 8.02331543 16.0217285 
4.96948242 9 12.0758057 6.47851562 
9.51098633'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+  border: 1px solid transparent;
+  opacity: 0;
+  transition: all 0.3s ease;
+  transform: scale(0);
+}
+.jewel.checkbox input:checked + span::after {
+  opacity: 1;
+  transform: scale(1);
 }
-.jewel.checkbox input:checked:checked:focus, .jewel.checkbox 
input:checked:checked:active:focus, .jewel.checkbox 
input:checked:active:checked:focus, .jewel.checkbox 
input:checked:active:checked:active:focus {
-  background: url("data:image/svg+xml,<svg viewBox='0 0 16 13' version='1.1' 
xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g 
transform='translate(760, 285)'><polygon fill='%233CADF1' points='3 13 9 18 19 
7 16 5 9 13 6 10'></polygon></g></g></svg>"), #b3dffa;
-  background-repeat: no-repeat;
-  background-size: 90%;
-  background-position: center;
-  background-attachment: fixed;
+.jewel.checkbox input:checked:active + span::after {
+  opacity: 1;
+  transform: scale(1);
 }
 .jewel.checkbox input:focus {
   outline: none;
@@ -252,17 +268,14 @@ j|Card {
   cursor: unset;
   color: #737373;
 }
+.jewel.checkbox input[disabled] + span::after {
+  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' 
xmlns='http://www.w3.org/2000/svg'%3E%3Cg%3E%3Cg%3E%3Cg%3E%3Crect x='0' y='0' 
width='22' height='22' fill-opacity='0'/%3E%3Cpolygon fill='%23191919' 
points='3.51452637 12.5264893 9 17.9205322 18.9342041 8.02331543 16.0217285 
4.96948242 9 12.0758057 6.47851562 
9.51098633'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
 .jewel.checkbox input[disabled]:checked {
-  background: url("data:image/svg+xml,<svg viewBox='0 0 16 13' version='1.1' 
xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g 
transform='translate(760, 285)'><polygon fill='%23191919' points='3 13 9 18 19 
7 16 5 9 13 6 10'></polygon></g></g></svg>"), #404040;
-  background-size: 90%;
-  background-position: center;
-  background-repeat: no-repeat;
-  background-attachment: fixed;
   border: 1px solid #0d0d0d;
 }
 .jewel.checkbox span {
   cursor: pointer;
-  position: relative;
   margin: 0;
   padding-left: 6px;
   vertical-align: top;
@@ -404,8 +417,6 @@ j|Card {
   color: transparent;
 }
 .jewel.slider input::-ms-fill-lower {
-  position: relative;
-  flex: 0;
   padding: 0;
   background: linear-gradient(#4ab3f2, #2ea7f0);
   border: 1px solid #0f88d1;
@@ -413,8 +424,6 @@ j|Card {
   border-radius: 3px;
 }
 .jewel.slider input::-ms-fill-upper {
-  position: relative;
-  flex: 0;
   padding: 0;
   background: linear-gradient(#7f7f7f, #666666);
   border: 1px solid #333333;
@@ -434,11 +443,6 @@ j|Card {
   border-radius: 50%;
 }
 .jewel.slider input::-ms-thumb {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  -o-appearance: none;
-  -ms-appearance: none;
-  appearance: none;
   width: 18px;
   height: 18px;
   background: linear-gradient(#4ab3f2, #2ea7f0);
@@ -450,7 +454,7 @@ j|Card {
   transform: scale(1.4);
 }
 .jewel.slider input:active::-ms-thumb {
-  transform: scale(1.4);
+  transform: scale(0.8);
 }
 .jewel.slider input:focus {
   outline: none;
diff --git 
a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Emerald-Theme/src/main/resources/defaults.css
 
b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Emerald-Theme/src/main/resources/defaults.css
index 38e0934..1f2258d 100644
--- 
a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Emerald-Theme/src/main/resources/defaults.css
+++ 
b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Emerald-Theme/src/main/resources/defaults.css
@@ -221,23 +221,39 @@ j|Card {
   width: 22px;
   height: 22px;
   line-height: 22px;
+  opacity: 0;
+}
+.jewel.checkbox input + span::before {
+  content: " ";
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  width: 22px;
+  height: 22px;
   background: linear-gradient(#7f7f7f, #737373);
   border: 1px solid #333333;
   border-radius: 3px;
 }
-.jewel.checkbox input:checked, .jewel.checkbox input:checked:active {
-  background: url("data:image/svg+xml,<svg viewBox='0 0 16 13' version='1.1' 
xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g 
transform='translate(760, 285)'><polygon fill='%238CC63C' points='3 13 9 18 19 
7 16 5 9 13 6 10'></polygon></g></g></svg>"), #787878;
-  background-repeat: no-repeat;
-  background-size: 90%;
-  background-position: center;
-  background-attachment: fixed;
+.jewel.checkbox input + span::after {
+  content: " ";
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  width: 22px;
+  height: 22px;
+  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' 
xmlns='http://www.w3.org/2000/svg'%3E%3Cg%3E%3Cg%3E%3Cg%3E%3Crect x='0' y='0' 
width='22' height='22' fill-opacity='0'/%3E%3Cpolygon fill='%238CC63C' 
points='3.51452637 12.5264893 9 17.9205322 18.9342041 8.02331543 16.0217285 
4.96948242 9 12.0758057 6.47851562 
9.51098633'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+  border: 1px solid transparent;
+  opacity: 0;
+  transition: all 0.3s ease;
+  transform: scale(0);
+}
+.jewel.checkbox input:checked + span::after {
+  opacity: 1;
+  transform: scale(1);
 }
-.jewel.checkbox input:checked:checked:focus, .jewel.checkbox 
input:checked:checked:active:focus, .jewel.checkbox 
input:checked:active:checked:focus, .jewel.checkbox 
input:checked:active:checked:active:focus {
-  background: url("data:image/svg+xml,<svg viewBox='0 0 16 13' version='1.1' 
xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g 
transform='translate(760, 285)'><polygon fill='%238CC63C' points='3 13 9 18 19 
7 16 5 9 13 6 10'></polygon></g></g></svg>"), #c6e39f;
-  background-repeat: no-repeat;
-  background-size: 90%;
-  background-position: center;
-  background-attachment: fixed;
+.jewel.checkbox input:checked:active + span::after {
+  opacity: 1;
+  transform: scale(1);
 }
 .jewel.checkbox input:focus {
   outline: none;
@@ -252,17 +268,14 @@ j|Card {
   cursor: unset;
   color: #737373;
 }
+.jewel.checkbox input[disabled] + span::after {
+  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' 
xmlns='http://www.w3.org/2000/svg'%3E%3Cg%3E%3Cg%3E%3Cg%3E%3Crect x='0' y='0' 
width='22' height='22' fill-opacity='0'/%3E%3Cpolygon fill='%23191919' 
points='3.51452637 12.5264893 9 17.9205322 18.9342041 8.02331543 16.0217285 
4.96948242 9 12.0758057 6.47851562 
9.51098633'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
 .jewel.checkbox input[disabled]:checked {
-  background: url("data:image/svg+xml,<svg viewBox='0 0 16 13' version='1.1' 
xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g 
transform='translate(760, 285)'><polygon fill='%23191919' points='3 13 9 18 19 
7 16 5 9 13 6 10'></polygon></g></g></svg>"), #404040;
-  background-size: 90%;
-  background-position: center;
-  background-repeat: no-repeat;
-  background-attachment: fixed;
   border: 1px solid #0d0d0d;
 }
 .jewel.checkbox span {
   cursor: pointer;
-  position: relative;
   margin: 0;
   padding-left: 6px;
   vertical-align: top;
@@ -404,8 +417,6 @@ j|Card {
   color: transparent;
 }
 .jewel.slider input::-ms-fill-lower {
-  position: relative;
-  flex: 0;
   padding: 0;
   background: linear-gradient(#93c948, #84bc37);
   border: 1px solid #638c29;
@@ -413,8 +424,6 @@ j|Card {
   border-radius: 3px;
 }
 .jewel.slider input::-ms-fill-upper {
-  position: relative;
-  flex: 0;
   padding: 0;
   background: linear-gradient(#7f7f7f, #666666);
   border: 1px solid #333333;
@@ -434,11 +443,6 @@ j|Card {
   border-radius: 50%;
 }
 .jewel.slider input::-ms-thumb {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  -o-appearance: none;
-  -ms-appearance: none;
-  appearance: none;
   width: 18px;
   height: 18px;
   background: linear-gradient(#93c948, #84bc37);
@@ -450,7 +454,7 @@ j|Card {
   transform: scale(1.4);
 }
 .jewel.slider input:active::-ms-thumb {
-  transform: scale(1.4);
+  transform: scale(0.8);
 }
 .jewel.slider input:focus {
   outline: none;
diff --git 
a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Green-Theme/src/main/resources/defaults.css
 
b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Green-Theme/src/main/resources/defaults.css
index 3e25c97..3d267c8 100644
--- 
a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Green-Theme/src/main/resources/defaults.css
+++ 
b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Green-Theme/src/main/resources/defaults.css
@@ -221,23 +221,39 @@ j|Card {
   width: 22px;
   height: 22px;
   line-height: 22px;
+  opacity: 0;
+}
+.jewel.checkbox input + span::before {
+  content: " ";
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  width: 22px;
+  height: 22px;
   background: linear-gradient(#7f7f7f, #737373);
   border: 1px solid #333333;
   border-radius: 3px;
 }
-.jewel.checkbox input:checked, .jewel.checkbox input:checked:active {
-  background: url("data:image/svg+xml,<svg viewBox='0 0 16 13' version='1.1' 
xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g 
transform='translate(760, 285)'><polygon fill='%233AB549' points='3 13 9 18 19 
7 16 5 9 13 6 10'></polygon></g></g></svg>"), #787878;
-  background-repeat: no-repeat;
-  background-size: 90%;
-  background-position: center;
-  background-attachment: fixed;
+.jewel.checkbox input + span::after {
+  content: " ";
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  width: 22px;
+  height: 22px;
+  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' 
xmlns='http://www.w3.org/2000/svg'%3E%3Cg%3E%3Cg%3E%3Cg%3E%3Crect x='0' y='0' 
width='22' height='22' fill-opacity='0'/%3E%3Cpolygon fill='%233AB549' 
points='3.51452637 12.5264893 9 17.9205322 18.9342041 8.02331543 16.0217285 
4.96948242 9 12.0758057 6.47851562 
9.51098633'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+  border: 1px solid transparent;
+  opacity: 0;
+  transition: all 0.3s ease;
+  transform: scale(0);
+}
+.jewel.checkbox input:checked + span::after {
+  opacity: 1;
+  transform: scale(1);
 }
-.jewel.checkbox input:checked:checked:focus, .jewel.checkbox 
input:checked:checked:active:focus, .jewel.checkbox 
input:checked:active:checked:focus, .jewel.checkbox 
input:checked:active:checked:active:focus {
-  background: url("data:image/svg+xml,<svg viewBox='0 0 16 13' version='1.1' 
xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g 
transform='translate(760, 285)'><polygon fill='%233AB549' points='3 13 9 18 19 
7 16 5 9 13 6 10'></polygon></g></g></svg>"), #92dc9b;
-  background-repeat: no-repeat;
-  background-size: 90%;
-  background-position: center;
-  background-attachment: fixed;
+.jewel.checkbox input:checked:active + span::after {
+  opacity: 1;
+  transform: scale(1);
 }
 .jewel.checkbox input:focus {
   outline: none;
@@ -252,17 +268,14 @@ j|Card {
   cursor: unset;
   color: #737373;
 }
+.jewel.checkbox input[disabled] + span::after {
+  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' 
xmlns='http://www.w3.org/2000/svg'%3E%3Cg%3E%3Cg%3E%3Cg%3E%3Crect x='0' y='0' 
width='22' height='22' fill-opacity='0'/%3E%3Cpolygon fill='%23191919' 
points='3.51452637 12.5264893 9 17.9205322 18.9342041 8.02331543 16.0217285 
4.96948242 9 12.0758057 6.47851562 
9.51098633'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
 .jewel.checkbox input[disabled]:checked {
-  background: url("data:image/svg+xml,<svg viewBox='0 0 16 13' version='1.1' 
xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g 
transform='translate(760, 285)'><polygon fill='%23191919' points='3 13 9 18 19 
7 16 5 9 13 6 10'></polygon></g></g></svg>"), #404040;
-  background-size: 90%;
-  background-position: center;
-  background-repeat: no-repeat;
-  background-attachment: fixed;
   border: 1px solid #0d0d0d;
 }
 .jewel.checkbox span {
   cursor: pointer;
-  position: relative;
   margin: 0;
   padding-left: 6px;
   vertical-align: top;
@@ -404,8 +417,6 @@ j|Card {
   color: transparent;
 }
 .jewel.slider input::-ms-fill-lower {
-  position: relative;
-  flex: 0;
   padding: 0;
   background: linear-gradient(#3ec14e, #36a944);
   border: 1px solid #277b32;
@@ -413,8 +424,6 @@ j|Card {
   border-radius: 3px;
 }
 .jewel.slider input::-ms-fill-upper {
-  position: relative;
-  flex: 0;
   padding: 0;
   background: linear-gradient(#7f7f7f, #666666);
   border: 1px solid #333333;
@@ -434,11 +443,6 @@ j|Card {
   border-radius: 50%;
 }
 .jewel.slider input::-ms-thumb {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  -o-appearance: none;
-  -ms-appearance: none;
-  appearance: none;
   width: 18px;
   height: 18px;
   background: linear-gradient(#3ec14e, #36a944);
@@ -450,7 +454,7 @@ j|Card {
   transform: scale(1.4);
 }
 .jewel.slider input:active::-ms-thumb {
-  transform: scale(1.4);
+  transform: scale(0.8);
 }
 .jewel.slider input:focus {
   outline: none;
diff --git 
a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Orange-Theme/src/main/resources/defaults.css
 
b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Orange-Theme/src/main/resources/defaults.css
index 22f3a17..3aa552b 100644
--- 
a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Orange-Theme/src/main/resources/defaults.css
+++ 
b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Orange-Theme/src/main/resources/defaults.css
@@ -221,23 +221,39 @@ j|Card {
   width: 22px;
   height: 22px;
   line-height: 22px;
+  opacity: 0;
+}
+.jewel.checkbox input + span::before {
+  content: " ";
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  width: 22px;
+  height: 22px;
   background: linear-gradient(#7f7f7f, #737373);
   border: 1px solid #333333;
   border-radius: 3px;
 }
-.jewel.checkbox input:checked, .jewel.checkbox input:checked:active {
-  background: url("data:image/svg+xml,<svg viewBox='0 0 16 13' version='1.1' 
xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g 
transform='translate(760, 285)'><polygon fill='%23F7941D' points='3 13 9 18 19 
7 16 5 9 13 6 10'></polygon></g></g></svg>"), #787878;
-  background-repeat: no-repeat;
-  background-size: 90%;
-  background-position: center;
-  background-attachment: fixed;
+.jewel.checkbox input + span::after {
+  content: " ";
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  width: 22px;
+  height: 22px;
+  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' 
xmlns='http://www.w3.org/2000/svg'%3E%3Cg%3E%3Cg%3E%3Cg%3E%3Crect x='0' y='0' 
width='22' height='22' fill-opacity='0'/%3E%3Cpolygon fill='%23F7941D' 
points='3.51452637 12.5264893 9 17.9205322 18.9342041 8.02331543 16.0217285 
4.96948242 9 12.0758057 6.47851562 
9.51098633'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+  border: 1px solid transparent;
+  opacity: 0;
+  transition: all 0.3s ease;
+  transform: scale(0);
+}
+.jewel.checkbox input:checked + span::after {
+  opacity: 1;
+  transform: scale(1);
 }
-.jewel.checkbox input:checked:checked:focus, .jewel.checkbox 
input:checked:checked:active:focus, .jewel.checkbox 
input:checked:active:checked:focus, .jewel.checkbox 
input:checked:active:checked:active:focus {
-  background: url("data:image/svg+xml,<svg viewBox='0 0 16 13' version='1.1' 
xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g 
transform='translate(760, 285)'><polygon fill='%23F7941D' points='3 13 9 18 19 
7 16 5 9 13 6 10'></polygon></g></g></svg>"), #fbce98;
-  background-repeat: no-repeat;
-  background-size: 90%;
-  background-position: center;
-  background-attachment: fixed;
+.jewel.checkbox input:checked:active + span::after {
+  opacity: 1;
+  transform: scale(1);
 }
 .jewel.checkbox input:focus {
   outline: none;
@@ -252,17 +268,14 @@ j|Card {
   cursor: unset;
   color: #737373;
 }
+.jewel.checkbox input[disabled] + span::after {
+  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' 
xmlns='http://www.w3.org/2000/svg'%3E%3Cg%3E%3Cg%3E%3Cg%3E%3Crect x='0' y='0' 
width='22' height='22' fill-opacity='0'/%3E%3Cpolygon fill='%23191919' 
points='3.51452637 12.5264893 9 17.9205322 18.9342041 8.02331543 16.0217285 
4.96948242 9 12.0758057 6.47851562 
9.51098633'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
 .jewel.checkbox input[disabled]:checked {
-  background: url("data:image/svg+xml,<svg viewBox='0 0 16 13' version='1.1' 
xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g 
transform='translate(760, 285)'><polygon fill='%23191919' points='3 13 9 18 19 
7 16 5 9 13 6 10'></polygon></g></g></svg>"), #404040;
-  background-size: 90%;
-  background-position: center;
-  background-repeat: no-repeat;
-  background-attachment: fixed;
   border: 1px solid #0d0d0d;
 }
 .jewel.checkbox span {
   cursor: pointer;
-  position: relative;
   margin: 0;
   padding-left: 6px;
   vertical-align: top;
@@ -404,8 +417,6 @@ j|Card {
   color: transparent;
 }
 .jewel.slider input::-ms-fill-lower {
-  position: relative;
-  flex: 0;
   padding: 0;
   background: linear-gradient(#f89b2c, #f68d0e);
   border: 1px solid #c16c07;
@@ -413,8 +424,6 @@ j|Card {
   border-radius: 3px;
 }
 .jewel.slider input::-ms-fill-upper {
-  position: relative;
-  flex: 0;
   padding: 0;
   background: linear-gradient(#7f7f7f, #666666);
   border: 1px solid #333333;
@@ -434,11 +443,6 @@ j|Card {
   border-radius: 50%;
 }
 .jewel.slider input::-ms-thumb {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  -o-appearance: none;
-  -ms-appearance: none;
-  appearance: none;
   width: 18px;
   height: 18px;
   background: linear-gradient(#f89b2c, #f68d0e);
@@ -450,7 +454,7 @@ j|Card {
   transform: scale(1.4);
 }
 .jewel.slider input:active::-ms-thumb {
-  transform: scale(1.4);
+  transform: scale(0.8);
 }
 .jewel.slider input:focus {
   outline: none;
diff --git 
a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Red-Theme/src/main/resources/defaults.css
 
b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Red-Theme/src/main/resources/defaults.css
index 08b971b..c3d769a 100644
--- 
a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Red-Theme/src/main/resources/defaults.css
+++ 
b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Red-Theme/src/main/resources/defaults.css
@@ -221,23 +221,39 @@ j|Card {
   width: 22px;
   height: 22px;
   line-height: 22px;
+  opacity: 0;
+}
+.jewel.checkbox input + span::before {
+  content: " ";
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  width: 22px;
+  height: 22px;
   background: linear-gradient(#7f7f7f, #737373);
   border: 1px solid #333333;
   border-radius: 3px;
 }
-.jewel.checkbox input:checked, .jewel.checkbox input:checked:active {
-  background: url("data:image/svg+xml,<svg viewBox='0 0 16 13' version='1.1' 
xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g 
transform='translate(760, 285)'><polygon fill='%23EC1C24' points='3 13 9 18 19 
7 16 5 9 13 6 10'></polygon></g></g></svg>"), #787878;
-  background-repeat: no-repeat;
-  background-size: 90%;
-  background-position: center;
-  background-attachment: fixed;
+.jewel.checkbox input + span::after {
+  content: " ";
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  width: 22px;
+  height: 22px;
+  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' 
xmlns='http://www.w3.org/2000/svg'%3E%3Cg%3E%3Cg%3E%3Cg%3E%3Crect x='0' y='0' 
width='22' height='22' fill-opacity='0'/%3E%3Cpolygon fill='%23EC1C24' 
points='3.51452637 12.5264893 9 17.9205322 18.9342041 8.02331543 16.0217285 
4.96948242 9 12.0758057 6.47851562 
9.51098633'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+  border: 1px solid transparent;
+  opacity: 0;
+  transition: all 0.3s ease;
+  transform: scale(0);
+}
+.jewel.checkbox input:checked + span::after {
+  opacity: 1;
+  transform: scale(1);
 }
-.jewel.checkbox input:checked:checked:focus, .jewel.checkbox 
input:checked:checked:active:focus, .jewel.checkbox 
input:checked:active:checked:focus, .jewel.checkbox 
input:checked:active:checked:active:focus {
-  background: url("data:image/svg+xml,<svg viewBox='0 0 16 13' version='1.1' 
xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g 
transform='translate(760, 285)'><polygon fill='%23EC1C24' points='3 13 9 18 19 
7 16 5 9 13 6 10'></polygon></g></g></svg>"), #f69296;
-  background-repeat: no-repeat;
-  background-size: 90%;
-  background-position: center;
-  background-attachment: fixed;
+.jewel.checkbox input:checked:active + span::after {
+  opacity: 1;
+  transform: scale(1);
 }
 .jewel.checkbox input:focus {
   outline: none;
@@ -252,17 +268,14 @@ j|Card {
   cursor: unset;
   color: #737373;
 }
+.jewel.checkbox input[disabled] + span::after {
+  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' 
xmlns='http://www.w3.org/2000/svg'%3E%3Cg%3E%3Cg%3E%3Cg%3E%3Crect x='0' y='0' 
width='22' height='22' fill-opacity='0'/%3E%3Cpolygon fill='%23191919' 
points='3.51452637 12.5264893 9 17.9205322 18.9342041 8.02331543 16.0217285 
4.96948242 9 12.0758057 6.47851562 
9.51098633'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
 .jewel.checkbox input[disabled]:checked {
-  background: url("data:image/svg+xml,<svg viewBox='0 0 16 13' version='1.1' 
xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g 
transform='translate(760, 285)'><polygon fill='%23191919' points='3 13 9 18 19 
7 16 5 9 13 6 10'></polygon></g></g></svg>"), #404040;
-  background-size: 90%;
-  background-position: center;
-  background-repeat: no-repeat;
-  background-attachment: fixed;
   border: 1px solid #0d0d0d;
 }
 .jewel.checkbox span {
   cursor: pointer;
-  position: relative;
   margin: 0;
   padding-left: 6px;
   vertical-align: top;
@@ -404,8 +417,6 @@ j|Card {
   color: transparent;
 }
 .jewel.slider input::-ms-fill-lower {
-  position: relative;
-  flex: 0;
   padding: 0;
   background: linear-gradient(#ed2a32, #e5131b);
   border: 1px solid #ad0e15;
@@ -413,8 +424,6 @@ j|Card {
   border-radius: 3px;
 }
 .jewel.slider input::-ms-fill-upper {
-  position: relative;
-  flex: 0;
   padding: 0;
   background: linear-gradient(#7f7f7f, #666666);
   border: 1px solid #333333;
@@ -434,11 +443,6 @@ j|Card {
   border-radius: 50%;
 }
 .jewel.slider input::-ms-thumb {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  -o-appearance: none;
-  -ms-appearance: none;
-  appearance: none;
   width: 18px;
   height: 18px;
   background: linear-gradient(#ed2a32, #e5131b);
@@ -450,7 +454,7 @@ j|Card {
   transform: scale(1.4);
 }
 .jewel.slider input:active::-ms-thumb {
-  transform: scale(1.4);
+  transform: scale(0.8);
 }
 .jewel.slider input:focus {
   outline: none;
diff --git 
a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Sapphire-Theme/src/main/resources/defaults.css
 
b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Sapphire-Theme/src/main/resources/defaults.css
index 80a9a57..13cce98 100644
--- 
a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Sapphire-Theme/src/main/resources/defaults.css
+++ 
b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Sapphire-Theme/src/main/resources/defaults.css
@@ -221,23 +221,39 @@ j|Card {
   width: 22px;
   height: 22px;
   line-height: 22px;
+  opacity: 0;
+}
+.jewel.checkbox input + span::before {
+  content: " ";
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  width: 22px;
+  height: 22px;
   background: linear-gradient(#7f7f7f, #737373);
   border: 1px solid #333333;
   border-radius: 3px;
 }
-.jewel.checkbox input:checked, .jewel.checkbox input:checked:active {
-  background: url("data:image/svg+xml,<svg viewBox='0 0 16 13' version='1.1' 
xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g 
transform='translate(760, 285)'><polygon fill='%232C74BE' points='3 13 9 18 19 
7 16 5 9 13 6 10'></polygon></g></g></svg>"), #787878;
-  background-repeat: no-repeat;
-  background-size: 90%;
-  background-position: center;
-  background-attachment: fixed;
+.jewel.checkbox input + span::after {
+  content: " ";
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  width: 22px;
+  height: 22px;
+  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' 
xmlns='http://www.w3.org/2000/svg'%3E%3Cg%3E%3Cg%3E%3Cg%3E%3Crect x='0' y='0' 
width='22' height='22' fill-opacity='0'/%3E%3Cpolygon fill='%232C74BE' 
points='3.51452637 12.5264893 9 17.9205322 18.9342041 8.02331543 16.0217285 
4.96948242 9 12.0758057 6.47851562 
9.51098633'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+  border: 1px solid transparent;
+  opacity: 0;
+  transition: all 0.3s ease;
+  transform: scale(0);
+}
+.jewel.checkbox input:checked + span::after {
+  opacity: 1;
+  transform: scale(1);
 }
-.jewel.checkbox input:checked:checked:focus, .jewel.checkbox 
input:checked:checked:active:focus, .jewel.checkbox 
input:checked:active:checked:focus, .jewel.checkbox 
input:checked:active:checked:active:focus {
-  background: url("data:image/svg+xml,<svg viewBox='0 0 16 13' version='1.1' 
xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g 
transform='translate(760, 285)'><polygon fill='%232C74BE' points='3 13 9 18 19 
7 16 5 9 13 6 10'></polygon></g></g></svg>"), #86b4e3;
-  background-repeat: no-repeat;
-  background-size: 90%;
-  background-position: center;
-  background-attachment: fixed;
+.jewel.checkbox input:checked:active + span::after {
+  opacity: 1;
+  transform: scale(1);
 }
 .jewel.checkbox input:focus {
   outline: none;
@@ -252,17 +268,14 @@ j|Card {
   cursor: unset;
   color: #737373;
 }
+.jewel.checkbox input[disabled] + span::after {
+  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' 
xmlns='http://www.w3.org/2000/svg'%3E%3Cg%3E%3Cg%3E%3Cg%3E%3Crect x='0' y='0' 
width='22' height='22' fill-opacity='0'/%3E%3Cpolygon fill='%23191919' 
points='3.51452637 12.5264893 9 17.9205322 18.9342041 8.02331543 16.0217285 
4.96948242 9 12.0758057 6.47851562 
9.51098633'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
 .jewel.checkbox input[disabled]:checked {
-  background: url("data:image/svg+xml,<svg viewBox='0 0 16 13' version='1.1' 
xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g 
transform='translate(760, 285)'><polygon fill='%23191919' points='3 13 9 18 19 
7 16 5 9 13 6 10'></polygon></g></g></svg>"), #404040;
-  background-size: 90%;
-  background-position: center;
-  background-repeat: no-repeat;
-  background-attachment: fixed;
   border: 1px solid #0d0d0d;
 }
 .jewel.checkbox span {
   cursor: pointer;
-  position: relative;
   margin: 0;
   padding-left: 6px;
   vertical-align: top;
@@ -404,8 +417,6 @@ j|Card {
   color: transparent;
 }
 .jewel.slider input::-ms-fill-lower {
-  position: relative;
-  flex: 0;
   padding: 0;
   background: linear-gradient(#2f7cca, #296cb2);
   border: 1px solid #1e4e80;
@@ -413,8 +424,6 @@ j|Card {
   border-radius: 3px;
 }
 .jewel.slider input::-ms-fill-upper {
-  position: relative;
-  flex: 0;
   padding: 0;
   background: linear-gradient(#7f7f7f, #666666);
   border: 1px solid #333333;
@@ -434,11 +443,6 @@ j|Card {
   border-radius: 50%;
 }
 .jewel.slider input::-ms-thumb {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  -o-appearance: none;
-  -ms-appearance: none;
-  appearance: none;
   width: 18px;
   height: 18px;
   background: linear-gradient(#2f7cca, #296cb2);
@@ -450,7 +454,7 @@ j|Card {
   transform: scale(1.4);
 }
 .jewel.slider input:active::-ms-thumb {
-  transform: scale(1.4);
+  transform: scale(0.8);
 }
 .jewel.slider input:focus {
   outline: none;
diff --git 
a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Sunflower-Theme/src/main/resources/defaults.css
 
b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Sunflower-Theme/src/main/resources/defaults.css
index 1793a56..eb41176 100644
--- 
a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Sunflower-Theme/src/main/resources/defaults.css
+++ 
b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Sunflower-Theme/src/main/resources/defaults.css
@@ -221,23 +221,39 @@ j|Card {
   width: 22px;
   height: 22px;
   line-height: 22px;
+  opacity: 0;
+}
+.jewel.checkbox input + span::before {
+  content: " ";
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  width: 22px;
+  height: 22px;
   background: linear-gradient(#7f7f7f, #737373);
   border: 1px solid #333333;
   border-radius: 3px;
 }
-.jewel.checkbox input:checked, .jewel.checkbox input:checked:active {
-  background: url("data:image/svg+xml,<svg viewBox='0 0 16 13' version='1.1' 
xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g 
transform='translate(760, 285)'><polygon fill='%23F8B13F' points='3 13 9 18 19 
7 16 5 9 13 6 10'></polygon></g></g></svg>"), #787878;
-  background-repeat: no-repeat;
-  background-size: 90%;
-  background-position: center;
-  background-attachment: fixed;
+.jewel.checkbox input + span::after {
+  content: " ";
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  width: 22px;
+  height: 22px;
+  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' 
xmlns='http://www.w3.org/2000/svg'%3E%3Cg%3E%3Cg%3E%3Cg%3E%3Crect x='0' y='0' 
width='22' height='22' fill-opacity='0'/%3E%3Cpolygon fill='%23F8B13F' 
points='3.51452637 12.5264893 9 17.9205322 18.9342041 8.02331543 16.0217285 
4.96948242 9 12.0758057 6.47851562 
9.51098633'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+  border: 1px solid transparent;
+  opacity: 0;
+  transition: all 0.3s ease;
+  transform: scale(0);
+}
+.jewel.checkbox input:checked + span::after {
+  opacity: 1;
+  transform: scale(1);
 }
-.jewel.checkbox input:checked:checked:focus, .jewel.checkbox 
input:checked:checked:active:focus, .jewel.checkbox 
input:checked:active:checked:focus, .jewel.checkbox 
input:checked:active:checked:active:focus {
-  background: url("data:image/svg+xml,<svg viewBox='0 0 16 13' version='1.1' 
xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g 
transform='translate(760, 285)'><polygon fill='%23F8B13F' points='3 13 9 18 19 
7 16 5 9 13 6 10'></polygon></g></g></svg>"), #fce3ba;
-  background-repeat: no-repeat;
-  background-size: 90%;
-  background-position: center;
-  background-attachment: fixed;
+.jewel.checkbox input:checked:active + span::after {
+  opacity: 1;
+  transform: scale(1);
 }
 .jewel.checkbox input:focus {
   outline: none;
@@ -252,17 +268,14 @@ j|Card {
   cursor: unset;
   color: #737373;
 }
+.jewel.checkbox input[disabled] + span::after {
+  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' 
xmlns='http://www.w3.org/2000/svg'%3E%3Cg%3E%3Cg%3E%3Cg%3E%3Crect x='0' y='0' 
width='22' height='22' fill-opacity='0'/%3E%3Cpolygon fill='%23191919' 
points='3.51452637 12.5264893 9 17.9205322 18.9342041 8.02331543 16.0217285 
4.96948242 9 12.0758057 6.47851562 
9.51098633'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
 .jewel.checkbox input[disabled]:checked {
-  background: url("data:image/svg+xml,<svg viewBox='0 0 16 13' version='1.1' 
xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g 
transform='translate(760, 285)'><polygon fill='%23191919' points='3 13 9 18 19 
7 16 5 9 13 6 10'></polygon></g></g></svg>"), #404040;
-  background-size: 90%;
-  background-position: center;
-  background-repeat: no-repeat;
-  background-attachment: fixed;
   border: 1px solid #0d0d0d;
 }
 .jewel.checkbox span {
   cursor: pointer;
-  position: relative;
   margin: 0;
   padding-left: 6px;
   vertical-align: top;
@@ -404,8 +417,6 @@ j|Card {
   color: transparent;
 }
 .jewel.slider input::-ms-fill-lower {
-  position: relative;
-  flex: 0;
   padding: 0;
   background: linear-gradient(#f9b74e, #f7ab30);
   border: 1px solid #e28f08;
@@ -413,8 +424,6 @@ j|Card {
   border-radius: 3px;
 }
 .jewel.slider input::-ms-fill-upper {
-  position: relative;
-  flex: 0;
   padding: 0;
   background: linear-gradient(#7f7f7f, #666666);
   border: 1px solid #333333;
@@ -434,11 +443,6 @@ j|Card {
   border-radius: 50%;
 }
 .jewel.slider input::-ms-thumb {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  -o-appearance: none;
-  -ms-appearance: none;
-  appearance: none;
   width: 18px;
   height: 18px;
   background: linear-gradient(#f9b74e, #f7ab30);
@@ -450,7 +454,7 @@ j|Card {
   transform: scale(1.4);
 }
 .jewel.slider input:active::-ms-thumb {
-  transform: scale(1.4);
+  transform: scale(0.8);
 }
 .jewel.slider input:focus {
   outline: none;
diff --git 
a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Topaz-Theme/src/main/resources/defaults.css
 
b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Topaz-Theme/src/main/resources/defaults.css
index d7156ac..9c51edb 100644
--- 
a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Topaz-Theme/src/main/resources/defaults.css
+++ 
b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Topaz-Theme/src/main/resources/defaults.css
@@ -221,23 +221,39 @@ j|Card {
   width: 22px;
   height: 22px;
   line-height: 22px;
+  opacity: 0;
+}
+.jewel.checkbox input + span::before {
+  content: " ";
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  width: 22px;
+  height: 22px;
   background: linear-gradient(#7f7f7f, #737373);
   border: 1px solid #333333;
   border-radius: 3px;
 }
-.jewel.checkbox input:checked, .jewel.checkbox input:checked:active {
-  background: url("data:image/svg+xml,<svg viewBox='0 0 16 13' version='1.1' 
xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g 
transform='translate(760, 285)'><polygon fill='%23EF5A2A' points='3 13 9 18 19 
7 16 5 9 13 6 10'></polygon></g></g></svg>"), #787878;
-  background-repeat: no-repeat;
-  background-size: 90%;
-  background-position: center;
-  background-attachment: fixed;
+.jewel.checkbox input + span::after {
+  content: " ";
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  width: 22px;
+  height: 22px;
+  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' 
xmlns='http://www.w3.org/2000/svg'%3E%3Cg%3E%3Cg%3E%3Cg%3E%3Crect x='0' y='0' 
width='22' height='22' fill-opacity='0'/%3E%3Cpolygon fill='%23EF5A2A' 
points='3.51452637 12.5264893 9 17.9205322 18.9342041 8.02331543 16.0217285 
4.96948242 9 12.0758057 6.47851562 
9.51098633'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+  border: 1px solid transparent;
+  opacity: 0;
+  transition: all 0.3s ease;
+  transform: scale(0);
+}
+.jewel.checkbox input:checked + span::after {
+  opacity: 1;
+  transform: scale(1);
 }
-.jewel.checkbox input:checked:checked:focus, .jewel.checkbox 
input:checked:checked:active:focus, .jewel.checkbox 
input:checked:active:checked:focus, .jewel.checkbox 
input:checked:active:checked:active:focus {
-  background: url("data:image/svg+xml,<svg viewBox='0 0 16 13' version='1.1' 
xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g 
transform='translate(760, 285)'><polygon fill='%23EF5A2A' points='3 13 9 18 19 
7 16 5 9 13 6 10'></polygon></g></g></svg>"), #f8b6a1;
-  background-repeat: no-repeat;
-  background-size: 90%;
-  background-position: center;
-  background-attachment: fixed;
+.jewel.checkbox input:checked:active + span::after {
+  opacity: 1;
+  transform: scale(1);
 }
 .jewel.checkbox input:focus {
   outline: none;
@@ -252,17 +268,14 @@ j|Card {
   cursor: unset;
   color: #737373;
 }
+.jewel.checkbox input[disabled] + span::after {
+  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' 
xmlns='http://www.w3.org/2000/svg'%3E%3Cg%3E%3Cg%3E%3Cg%3E%3Crect x='0' y='0' 
width='22' height='22' fill-opacity='0'/%3E%3Cpolygon fill='%23191919' 
points='3.51452637 12.5264893 9 17.9205322 18.9342041 8.02331543 16.0217285 
4.96948242 9 12.0758057 6.47851562 
9.51098633'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
 .jewel.checkbox input[disabled]:checked {
-  background: url("data:image/svg+xml,<svg viewBox='0 0 16 13' version='1.1' 
xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g 
transform='translate(760, 285)'><polygon fill='%23191919' points='3 13 9 18 19 
7 16 5 9 13 6 10'></polygon></g></g></svg>"), #404040;
-  background-size: 90%;
-  background-position: center;
-  background-repeat: no-repeat;
-  background-attachment: fixed;
   border: 1px solid #0d0d0d;
 }
 .jewel.checkbox span {
   cursor: pointer;
-  position: relative;
   margin: 0;
   padding-left: 6px;
   vertical-align: top;
@@ -404,8 +417,6 @@ j|Card {
   color: transparent;
 }
 .jewel.slider input::-ms-fill-lower {
-  position: relative;
-  flex: 0;
   padding: 0;
   background: linear-gradient(#f06538, #ee4f1c);
   border: 1px solid #be390e;
@@ -413,8 +424,6 @@ j|Card {
   border-radius: 3px;
 }
 .jewel.slider input::-ms-fill-upper {
-  position: relative;
-  flex: 0;
   padding: 0;
   background: linear-gradient(#7f7f7f, #666666);
   border: 1px solid #333333;
@@ -434,11 +443,6 @@ j|Card {
   border-radius: 50%;
 }
 .jewel.slider input::-ms-thumb {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  -o-appearance: none;
-  -ms-appearance: none;
-  appearance: none;
   width: 18px;
   height: 18px;
   background: linear-gradient(#f06538, #ee4f1c);
@@ -450,7 +454,7 @@ j|Card {
   transform: scale(1.4);
 }
 .jewel.slider input:active::-ms-thumb {
-  transform: scale(1.4);
+  transform: scale(0.8);
 }
 .jewel.slider input:focus {
   outline: none;
diff --git 
a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Turquoise-Theme/src/main/resources/defaults.css
 
b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Turquoise-Theme/src/main/resources/defaults.css
index 45bc877..2f05a72 100644
--- 
a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Turquoise-Theme/src/main/resources/defaults.css
+++ 
b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Turquoise-Theme/src/main/resources/defaults.css
@@ -221,23 +221,39 @@ j|Card {
   width: 22px;
   height: 22px;
   line-height: 22px;
+  opacity: 0;
+}
+.jewel.checkbox input + span::before {
+  content: " ";
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  width: 22px;
+  height: 22px;
   background: linear-gradient(#7f7f7f, #737373);
   border: 1px solid #333333;
   border-radius: 3px;
 }
-.jewel.checkbox input:checked, .jewel.checkbox input:checked:active {
-  background: url("data:image/svg+xml,<svg viewBox='0 0 16 13' version='1.1' 
xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g 
transform='translate(760, 285)'><polygon fill='%2329A89F' points='3 13 9 18 19 
7 16 5 9 13 6 10'></polygon></g></g></svg>"), #787878;
-  background-repeat: no-repeat;
-  background-size: 90%;
-  background-position: center;
-  background-attachment: fixed;
+.jewel.checkbox input + span::after {
+  content: " ";
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  width: 22px;
+  height: 22px;
+  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' 
xmlns='http://www.w3.org/2000/svg'%3E%3Cg%3E%3Cg%3E%3Cg%3E%3Crect x='0' y='0' 
width='22' height='22' fill-opacity='0'/%3E%3Cpolygon fill='%2329A89F' 
points='3.51452637 12.5264893 9 17.9205322 18.9342041 8.02331543 16.0217285 
4.96948242 9 12.0758057 6.47851562 
9.51098633'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+  border: 1px solid transparent;
+  opacity: 0;
+  transition: all 0.3s ease;
+  transform: scale(0);
+}
+.jewel.checkbox input:checked + span::after {
+  opacity: 1;
+  transform: scale(1);
 }
-.jewel.checkbox input:checked:checked:focus, .jewel.checkbox 
input:checked:checked:active:focus, .jewel.checkbox 
input:checked:active:checked:focus, .jewel.checkbox 
input:checked:active:checked:active:focus {
-  background: url("data:image/svg+xml,<svg viewBox='0 0 16 13' version='1.1' 
xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g 
transform='translate(760, 285)'><polygon fill='%2329A89F' points='3 13 9 18 19 
7 16 5 9 13 6 10'></polygon></g></g></svg>"), #74ddd5;
-  background-repeat: no-repeat;
-  background-size: 90%;
-  background-position: center;
-  background-attachment: fixed;
+.jewel.checkbox input:checked:active + span::after {
+  opacity: 1;
+  transform: scale(1);
 }
 .jewel.checkbox input:focus {
   outline: none;
@@ -252,17 +268,14 @@ j|Card {
   cursor: unset;
   color: #737373;
 }
+.jewel.checkbox input[disabled] + span::after {
+  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' 
xmlns='http://www.w3.org/2000/svg'%3E%3Cg%3E%3Cg%3E%3Cg%3E%3Crect x='0' y='0' 
width='22' height='22' fill-opacity='0'/%3E%3Cpolygon fill='%23191919' 
points='3.51452637 12.5264893 9 17.9205322 18.9342041 8.02331543 16.0217285 
4.96948242 9 12.0758057 6.47851562 
9.51098633'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
 .jewel.checkbox input[disabled]:checked {
-  background: url("data:image/svg+xml,<svg viewBox='0 0 16 13' version='1.1' 
xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g 
transform='translate(760, 285)'><polygon fill='%23191919' points='3 13 9 18 19 
7 16 5 9 13 6 10'></polygon></g></g></svg>"), #404040;
-  background-size: 90%;
-  background-position: center;
-  background-repeat: no-repeat;
-  background-attachment: fixed;
   border: 1px solid #0d0d0d;
 }
 .jewel.checkbox span {
   cursor: pointer;
-  position: relative;
   margin: 0;
   padding-left: 6px;
   vertical-align: top;
@@ -404,8 +417,6 @@ j|Card {
   color: transparent;
 }
 .jewel.slider input::-ms-fill-lower {
-  position: relative;
-  flex: 0;
   padding: 0;
   background: linear-gradient(#2cb4ab, #269c93);
   border: 1px solid #1a6b65;
@@ -413,8 +424,6 @@ j|Card {
   border-radius: 3px;
 }
 .jewel.slider input::-ms-fill-upper {
-  position: relative;
-  flex: 0;
   padding: 0;
   background: linear-gradient(#7f7f7f, #666666);
   border: 1px solid #333333;
@@ -434,11 +443,6 @@ j|Card {
   border-radius: 50%;
 }
 .jewel.slider input::-ms-thumb {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  -o-appearance: none;
-  -ms-appearance: none;
-  appearance: none;
   width: 18px;
   height: 18px;
   background: linear-gradient(#2cb4ab, #269c93);
@@ -450,7 +454,7 @@ j|Card {
   transform: scale(1.4);
 }
 .jewel.slider input:active::-ms-thumb {
-  transform: scale(1.4);
+  transform: scale(0.8);
 }
 .jewel.slider input:focus {
   outline: none;
diff --git 
a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Violet-Theme/src/main/resources/defaults.css
 
b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Violet-Theme/src/main/resources/defaults.css
index 8903abb..4ef78a5 100644
--- 
a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Violet-Theme/src/main/resources/defaults.css
+++ 
b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Violet-Theme/src/main/resources/defaults.css
@@ -221,23 +221,39 @@ j|Card {
   width: 22px;
   height: 22px;
   line-height: 22px;
+  opacity: 0;
+}
+.jewel.checkbox input + span::before {
+  content: " ";
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  width: 22px;
+  height: 22px;
   background: linear-gradient(#7f7f7f, #737373);
   border: 1px solid #333333;
   border-radius: 3px;
 }
-.jewel.checkbox input:checked, .jewel.checkbox input:checked:active {
-  background: url("data:image/svg+xml,<svg viewBox='0 0 16 13' version='1.1' 
xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g 
transform='translate(760, 285)'><polygon fill='%23662C90' points='3 13 9 18 19 
7 16 5 9 13 6 10'></polygon></g></g></svg>"), #787878;
-  background-repeat: no-repeat;
-  background-size: 90%;
-  background-position: center;
-  background-attachment: fixed;
+.jewel.checkbox input + span::after {
+  content: " ";
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  width: 22px;
+  height: 22px;
+  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' 
xmlns='http://www.w3.org/2000/svg'%3E%3Cg%3E%3Cg%3E%3Cg%3E%3Crect x='0' y='0' 
width='22' height='22' fill-opacity='0'/%3E%3Cpolygon fill='%23662C90' 
points='3.51452637 12.5264893 9 17.9205322 18.9342041 8.02331543 16.0217285 
4.96948242 9 12.0758057 6.47851562 
9.51098633'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+  border: 1px solid transparent;
+  opacity: 0;
+  transition: all 0.3s ease;
+  transform: scale(0);
+}
+.jewel.checkbox input:checked + span::after {
+  opacity: 1;
+  transform: scale(1);
 }
-.jewel.checkbox input:checked:checked:focus, .jewel.checkbox 
input:checked:checked:active:focus, .jewel.checkbox 
input:checked:active:checked:focus, .jewel.checkbox 
input:checked:active:checked:active:focus {
-  background: url("data:image/svg+xml,<svg viewBox='0 0 16 13' version='1.1' 
xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g 
transform='translate(760, 285)'><polygon fill='%23662C90' points='3 13 9 18 19 
7 16 5 9 13 6 10'></polygon></g></g></svg>"), #a66ad1;
-  background-repeat: no-repeat;
-  background-size: 90%;
-  background-position: center;
-  background-attachment: fixed;
+.jewel.checkbox input:checked:active + span::after {
+  opacity: 1;
+  transform: scale(1);
 }
 .jewel.checkbox input:focus {
   outline: none;
@@ -252,17 +268,14 @@ j|Card {
   cursor: unset;
   color: #737373;
 }
+.jewel.checkbox input[disabled] + span::after {
+  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' 
xmlns='http://www.w3.org/2000/svg'%3E%3Cg%3E%3Cg%3E%3Cg%3E%3Crect x='0' y='0' 
width='22' height='22' fill-opacity='0'/%3E%3Cpolygon fill='%23191919' 
points='3.51452637 12.5264893 9 17.9205322 18.9342041 8.02331543 16.0217285 
4.96948242 9 12.0758057 6.47851562 
9.51098633'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
 .jewel.checkbox input[disabled]:checked {
-  background: url("data:image/svg+xml,<svg viewBox='0 0 16 13' version='1.1' 
xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g 
transform='translate(760, 285)'><polygon fill='%23191919' points='3 13 9 18 19 
7 16 5 9 13 6 10'></polygon></g></g></svg>"), #404040;
-  background-size: 90%;
-  background-position: center;
-  background-repeat: no-repeat;
-  background-attachment: fixed;
   border: 1px solid #0d0d0d;
 }
 .jewel.checkbox span {
   cursor: pointer;
-  position: relative;
   margin: 0;
   padding-left: 6px;
   vertical-align: top;
@@ -404,8 +417,6 @@ j|Card {
   color: transparent;
 }
 .jewel.slider input::-ms-fill-lower {
-  position: relative;
-  flex: 0;
   padding: 0;
   background: linear-gradient(#6e309c, #5e2884);
   border: 1px solid #3c1a55;
@@ -413,8 +424,6 @@ j|Card {
   border-radius: 3px;
 }
 .jewel.slider input::-ms-fill-upper {
-  position: relative;
-  flex: 0;
   padding: 0;
   background: linear-gradient(#7f7f7f, #666666);
   border: 1px solid #333333;
@@ -434,11 +443,6 @@ j|Card {
   border-radius: 50%;
 }
 .jewel.slider input::-ms-thumb {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  -o-appearance: none;
-  -ms-appearance: none;
-  appearance: none;
   width: 18px;
   height: 18px;
   background: linear-gradient(#6e309c, #5e2884);
@@ -450,7 +454,7 @@ j|Card {
   transform: scale(1.4);
 }
 .jewel.slider input:active::-ms-thumb {
-  transform: scale(1.4);
+  transform: scale(0.8);
 }
 .jewel.slider input:focus {
   outline: none;
diff --git 
a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Yellow-Theme/src/main/resources/defaults.css
 
b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Yellow-Theme/src/main/resources/defaults.css
index b6a8805..17ed17f 100644
--- 
a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Yellow-Theme/src/main/resources/defaults.css
+++ 
b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Yellow-Theme/src/main/resources/defaults.css
@@ -221,23 +221,39 @@ j|Card {
   width: 22px;
   height: 22px;
   line-height: 22px;
+  opacity: 0;
+}
+.jewel.checkbox input + span::before {
+  content: " ";
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  width: 22px;
+  height: 22px;
   background: linear-gradient(#7f7f7f, #737373);
   border: 1px solid #333333;
   border-radius: 3px;
 }
-.jewel.checkbox input:checked, .jewel.checkbox input:checked:active {
-  background: url("data:image/svg+xml,<svg viewBox='0 0 16 13' version='1.1' 
xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g 
transform='translate(760, 285)'><polygon fill='%23E2D70B' points='3 13 9 18 19 
7 16 5 9 13 6 10'></polygon></g></g></svg>"), #787878;
-  background-repeat: no-repeat;
-  background-size: 90%;
-  background-position: center;
-  background-attachment: fixed;
+.jewel.checkbox input + span::after {
+  content: " ";
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  width: 22px;
+  height: 22px;
+  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' 
xmlns='http://www.w3.org/2000/svg'%3E%3Cg%3E%3Cg%3E%3Cg%3E%3Crect x='0' y='0' 
width='22' height='22' fill-opacity='0'/%3E%3Cpolygon fill='%23E2D70B' 
points='3.51452637 12.5264893 9 17.9205322 18.9342041 8.02331543 16.0217285 
4.96948242 9 12.0758057 6.47851562 
9.51098633'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+  border: 1px solid transparent;
+  opacity: 0;
+  transition: all 0.3s ease;
+  transform: scale(0);
+}
+.jewel.checkbox input:checked + span::after {
+  opacity: 1;
+  transform: scale(1);
 }
-.jewel.checkbox input:checked:checked:focus, .jewel.checkbox 
input:checked:checked:active:focus, .jewel.checkbox 
input:checked:active:checked:focus, .jewel.checkbox 
input:checked:active:checked:active:focus {
-  background: url("data:image/svg+xml,<svg viewBox='0 0 16 13' version='1.1' 
xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g 
transform='translate(760, 285)'><polygon fill='%23E2D70B' points='3 13 9 18 19 
7 16 5 9 13 6 10'></polygon></g></g></svg>"), #f8f174;
-  background-repeat: no-repeat;
-  background-size: 90%;
-  background-position: center;
-  background-attachment: fixed;
+.jewel.checkbox input:checked:active + span::after {
+  opacity: 1;
+  transform: scale(1);
 }
 .jewel.checkbox input:focus {
   outline: none;
@@ -252,17 +268,14 @@ j|Card {
   cursor: unset;
   color: #737373;
 }
+.jewel.checkbox input[disabled] + span::after {
+  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' 
xmlns='http://www.w3.org/2000/svg'%3E%3Cg%3E%3Cg%3E%3Cg%3E%3Crect x='0' y='0' 
width='22' height='22' fill-opacity='0'/%3E%3Cpolygon fill='%23191919' 
points='3.51452637 12.5264893 9 17.9205322 18.9342041 8.02331543 16.0217285 
4.96948242 9 12.0758057 6.47851562 
9.51098633'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
 .jewel.checkbox input[disabled]:checked {
-  background: url("data:image/svg+xml,<svg viewBox='0 0 16 13' version='1.1' 
xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g 
transform='translate(760, 285)'><polygon fill='%23191919' points='3 13 9 18 19 
7 16 5 9 13 6 10'></polygon></g></g></svg>"), #404040;
-  background-size: 90%;
-  background-position: center;
-  background-repeat: no-repeat;
-  background-attachment: fixed;
   border: 1px solid #0d0d0d;
 }
 .jewel.checkbox span {
   cursor: pointer;
-  position: relative;
   margin: 0;
   padding-left: 6px;
   vertical-align: top;
@@ -404,8 +417,6 @@ j|Card {
   color: transparent;
 }
 .jewel.slider input::-ms-fill-lower {
-  position: relative;
-  flex: 0;
   padding: 0;
   background: linear-gradient(#f1e50c, #d3c90a);
   border: 1px solid #999207;
@@ -413,8 +424,6 @@ j|Card {
   border-radius: 3px;
 }
 .jewel.slider input::-ms-fill-upper {
-  position: relative;
-  flex: 0;
   padding: 0;
   background: linear-gradient(#7f7f7f, #666666);
   border: 1px solid #333333;
@@ -434,11 +443,6 @@ j|Card {
   border-radius: 50%;
 }
 .jewel.slider input::-ms-thumb {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  -o-appearance: none;
-  -ms-appearance: none;
-  appearance: none;
   width: 18px;
   height: 18px;
   background: linear-gradient(#f1e50c, #d3c90a);
@@ -450,7 +454,7 @@ j|Card {
   transform: scale(1.4);
 }
 .jewel.slider input:active::-ms-thumb {
-  transform: scale(1.4);
+  transform: scale(0.8);
 }
 .jewel.slider input:focus {
   outline: none;
diff --git 
a/frameworks/themes/Jewel-Light-NoFlat-Primary-Amethyst-Theme/src/main/resources/defaults.css
 
b/frameworks/themes/Jewel-Light-NoFlat-Primary-Amethyst-Theme/src/main/resources/defaults.css
index d3731d0..966dfb3 100644
--- 
a/frameworks/themes/Jewel-Light-NoFlat-Primary-Amethyst-Theme/src/main/resources/defaults.css
+++ 
b/frameworks/themes/Jewel-Light-NoFlat-Primary-Amethyst-Theme/src/main/resources/defaults.css
@@ -220,23 +220,39 @@ j|Card {
   width: 22px;
   height: 22px;
   line-height: 22px;
+  opacity: 0;
+}
+.jewel.checkbox input + span::before {
+  content: " ";
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  width: 22px;
+  height: 22px;
   background: linear-gradient(white, #f3f3f3);
   border: 1px solid #b3b3b3;
   border-radius: 3px;
 }
-.jewel.checkbox input:checked, .jewel.checkbox input:checked:active {
-  background: url("data:image/svg+xml,<svg viewBox='0 0 16 13' version='1.1' 
xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g 
transform='translate(760, 285)'><polygon fill='%23C92CC6' points='3 13 9 18 19 
7 16 5 9 13 6 10'></polygon></g></g></svg>"), #f8f8f8;
-  background-repeat: no-repeat;
-  background-size: 90%;
-  background-position: center;
-  background-attachment: fixed;
+.jewel.checkbox input + span::after {
+  content: " ";
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  width: 22px;
+  height: 22px;
+  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' 
xmlns='http://www.w3.org/2000/svg'%3E%3Cg%3E%3Cg%3E%3Cg%3E%3Crect x='0' y='0' 
width='22' height='22' fill-opacity='0'/%3E%3Cpolygon fill='%23C92CC6' 
points='3.51452637 12.5264893 9 17.9205322 18.9342041 8.02331543 16.0217285 
4.96948242 9 12.0758057 6.47851562 
9.51098633'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+  border: 1px solid transparent;
+  opacity: 0;
+  transition: all 0.3s ease;
+  transform: scale(0);
+}
+.jewel.checkbox input:checked + span::after {
+  opacity: 1;
+  transform: scale(1);
 }
-.jewel.checkbox input:checked:checked:focus, .jewel.checkbox 
input:checked:checked:active:focus, .jewel.checkbox 
input:checked:active:checked:focus, .jewel.checkbox 
input:checked:active:checked:active:focus {
-  background: url("data:image/svg+xml,<svg viewBox='0 0 16 13' version='1.1' 
xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g 
transform='translate(760, 285)'><polygon fill='%23C92CC6' points='3 13 9 18 19 
7 16 5 9 13 6 10'></polygon></g></g></svg>"), #e68ee5;
-  background-repeat: no-repeat;
-  background-size: 90%;
-  background-position: center;
-  background-attachment: fixed;
+.jewel.checkbox input:checked:active + span::after {
+  opacity: 1;
+  transform: scale(1);
 }
 .jewel.checkbox input:focus {
   outline: none;
@@ -251,17 +267,14 @@ j|Card {
   cursor: unset;
   color: silver;
 }
+.jewel.checkbox input[disabled] + span::after {
+  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' 
xmlns='http://www.w3.org/2000/svg'%3E%3Cg%3E%3Cg%3E%3Cg%3E%3Crect x='0' y='0' 
width='22' height='22' fill-opacity='0'/%3E%3Cpolygon fill='%23cccccc' 
points='3.51452637 12.5264893 9 17.9205322 18.9342041 8.02331543 16.0217285 
4.96948242 9 12.0758057 6.47851562 
9.51098633'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
 .jewel.checkbox input[disabled]:checked {
-  background: url("data:image/svg+xml,<svg viewBox='0 0 16 13' version='1.1' 
xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g 
transform='translate(760, 285)'><polygon fill='%23cccccc' points='3 13 9 18 19 
7 16 5 9 13 6 10'></polygon></g></g></svg>"), #f3f3f3;
-  background-size: 90%;
-  background-position: center;
-  background-repeat: no-repeat;
-  background-attachment: fixed;
   border: 1px solid #d9d9d9;
 }
 .jewel.checkbox span {
   cursor: pointer;
-  position: relative;
   margin: 0;
   padding-left: 6px;
   vertical-align: top;
@@ -403,8 +416,6 @@ j|Card {
   color: transparent;
 }
 .jewel.slider input::-ms-fill-lower {
-  position: relative;
-  flex: 0;
   padding: 0;
   background: linear-gradient(#d232cf, #bc29ba);
   border: 1px solid #8a1e88;
@@ -412,8 +423,6 @@ j|Card {
   border-radius: 3px;
 }
 .jewel.slider input::-ms-fill-upper {
-  position: relative;
-  flex: 0;
   padding: 0;
   background: linear-gradient(white, #e6e6e6);
   border: 1px solid #b3b3b3;
@@ -433,11 +442,6 @@ j|Card {
   border-radius: 50%;
 }
 .jewel.slider input::-ms-thumb {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  -o-appearance: none;
-  -ms-appearance: none;
-  appearance: none;
   width: 18px;
   height: 18px;
   background: linear-gradient(#d232cf, #bc29ba);
@@ -449,7 +453,7 @@ j|Card {
   transform: scale(1.4);
 }
 .jewel.slider input:active::-ms-thumb {
-  transform: scale(1.4);
+  transform: scale(0.8);
 }
 .jewel.slider input:focus {
   outline: none;
diff --git 
a/frameworks/themes/Jewel-Light-NoFlat-Primary-Blue-Theme/src/main/resources/defaults.css
 
b/frameworks/themes/Jewel-Light-NoFlat-Primary-Blue-Theme/src/main/resources/defaults.css
index fb0c116..e6277ae 100644
--- 
a/frameworks/themes/Jewel-Light-NoFlat-Primary-Blue-Theme/src/main/resources/defaults.css
+++ 
b/frameworks/themes/Jewel-Light-NoFlat-Primary-Blue-Theme/src/main/resources/defaults.css
@@ -220,23 +220,39 @@ j|Card {
   width: 22px;
   height: 22px;
   line-height: 22px;
+  opacity: 0;
+}
+.jewel.checkbox input + span::before {
+  content: " ";
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  width: 22px;
+  height: 22px;
   background: linear-gradient(white, #f3f3f3);
   border: 1px solid #b3b3b3;
   border-radius: 3px;
 }
-.jewel.checkbox input:checked, .jewel.checkbox input:checked:active {
-  background: url("data:image/svg+xml,<svg viewBox='0 0 16 13' version='1.1' 
xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g 
transform='translate(760, 285)'><polygon fill='%233CADF1' points='3 13 9 18 19 
7 16 5 9 13 6 10'></polygon></g></g></svg>"), #f8f8f8;
-  background-repeat: no-repeat;
-  background-size: 90%;
-  background-position: center;
-  background-attachment: fixed;
+.jewel.checkbox input + span::after {
+  content: " ";
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  width: 22px;
+  height: 22px;
+  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' 
xmlns='http://www.w3.org/2000/svg'%3E%3Cg%3E%3Cg%3E%3Cg%3E%3Crect x='0' y='0' 
width='22' height='22' fill-opacity='0'/%3E%3Cpolygon fill='%233CADF1' 
points='3.51452637 12.5264893 9 17.9205322 18.9342041 8.02331543 16.0217285 
4.96948242 9 12.0758057 6.47851562 
9.51098633'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+  border: 1px solid transparent;
+  opacity: 0;
+  transition: all 0.3s ease;
+  transform: scale(0);
+}
+.jewel.checkbox input:checked + span::after {
+  opacity: 1;
+  transform: scale(1);
 }
-.jewel.checkbox input:checked:checked:focus, .jewel.checkbox 
input:checked:checked:active:focus, .jewel.checkbox 
input:checked:active:checked:focus, .jewel.checkbox 
input:checked:active:checked:active:focus {
-  background: url("data:image/svg+xml,<svg viewBox='0 0 16 13' version='1.1' 
xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g 
transform='translate(760, 285)'><polygon fill='%233CADF1' points='3 13 9 18 19 
7 16 5 9 13 6 10'></polygon></g></g></svg>"), #b3dffa;
-  background-repeat: no-repeat;
-  background-size: 90%;
-  background-position: center;
-  background-attachment: fixed;
+.jewel.checkbox input:checked:active + span::after {
+  opacity: 1;
+  transform: scale(1);
 }
 .jewel.checkbox input:focus {
   outline: none;
@@ -251,17 +267,14 @@ j|Card {
   cursor: unset;
   color: silver;
 }
+.jewel.checkbox input[disabled] + span::after {
+  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' 
xmlns='http://www.w3.org/2000/svg'%3E%3Cg%3E%3Cg%3E%3Cg%3E%3Crect x='0' y='0' 
width='22' height='22' fill-opacity='0'/%3E%3Cpolygon fill='%23cccccc' 
points='3.51452637 12.5264893 9 17.9205322 18.9342041 8.02331543 16.0217285 
4.96948242 9 12.0758057 6.47851562 
9.51098633'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
 .jewel.checkbox input[disabled]:checked {
-  background: url("data:image/svg+xml,<svg viewBox='0 0 16 13' version='1.1' 
xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g 
transform='translate(760, 285)'><polygon fill='%23cccccc' points='3 13 9 18 19 
7 16 5 9 13 6 10'></polygon></g></g></svg>"), #f3f3f3;
-  background-size: 90%;
-  background-position: center;
-  background-repeat: no-repeat;
-  background-attachment: fixed;
   border: 1px solid #d9d9d9;
 }
 .jewel.checkbox span {
   cursor: pointer;
-  position: relative;
   margin: 0;
   padding-left: 6px;
   vertical-align: top;
@@ -403,8 +416,6 @@ j|Card {
   color: transparent;
 }
 .jewel.slider input::-ms-fill-lower {
-  position: relative;
-  flex: 0;
   padding: 0;
   background: linear-gradient(#4ab3f2, #2ea7f0);
   border: 1px solid #0f88d1;
@@ -412,8 +423,6 @@ j|Card {
   border-radius: 3px;
 }
 .jewel.slider input::-ms-fill-upper {
-  position: relative;
-  flex: 0;
   padding: 0;
   background: linear-gradient(white, #e6e6e6);
   border: 1px solid #b3b3b3;
@@ -433,11 +442,6 @@ j|Card {
   border-radius: 50%;
 }
 .jewel.slider input::-ms-thumb {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  -o-appearance: none;
-  -ms-appearance: none;
-  appearance: none;
   width: 18px;
   height: 18px;
   background: linear-gradient(#4ab3f2, #2ea7f0);
@@ -449,7 +453,7 @@ j|Card {
   transform: scale(1.4);
 }
 .jewel.slider input:active::-ms-thumb {
-  transform: scale(1.4);
+  transform: scale(0.8);
 }
 .jewel.slider input:focus {
   outline: none;
diff --git 
a/frameworks/themes/Jewel-Light-NoFlat-Primary-Emerald-Theme/src/main/resources/defaults.css
 
b/frameworks/themes/Jewel-Light-NoFlat-Primary-Emerald-Theme/src/main/resources/defaults.css
index e1ba9ff..b16c5d5 100644
--- 
a/frameworks/themes/Jewel-Light-NoFlat-Primary-Emerald-Theme/src/main/resources/defaults.css
+++ 
b/frameworks/themes/Jewel-Light-NoFlat-Primary-Emerald-Theme/src/main/resources/defaults.css
@@ -220,23 +220,39 @@ j|Card {
   width: 22px;
   height: 22px;
   line-height: 22px;
+  opacity: 0;
+}
+.jewel.checkbox input + span::before {
+  content: " ";
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  width: 22px;
+  height: 22px;
   background: linear-gradient(white, #f3f3f3);
   border: 1px solid #b3b3b3;
   border-radius: 3px;
 }
-.jewel.checkbox input:checked, .jewel.checkbox input:checked:active {
-  background: url("data:image/svg+xml,<svg viewBox='0 0 16 13' version='1.1' 
xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g 
transform='translate(760, 285)'><polygon fill='%238CC63C' points='3 13 9 18 19 
7 16 5 9 13 6 10'></polygon></g></g></svg>"), #f8f8f8;
-  background-repeat: no-repeat;
-  background-size: 90%;
-  background-position: center;
-  background-attachment: fixed;
+.jewel.checkbox input + span::after {
+  content: " ";
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  width: 22px;
+  height: 22px;
+  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' 
xmlns='http://www.w3.org/2000/svg'%3E%3Cg%3E%3Cg%3E%3Cg%3E%3Crect x='0' y='0' 
width='22' height='22' fill-opacity='0'/%3E%3Cpolygon fill='%238CC63C' 
points='3.51452637 12.5264893 9 17.9205322 18.9342041 8.02331543 16.0217285 
4.96948242 9 12.0758057 6.47851562 
9.51098633'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+  border: 1px solid transparent;
+  opacity: 0;
+  transition: all 0.3s ease;
+  transform: scale(0);
+}
+.jewel.checkbox input:checked + span::after {
+  opacity: 1;
+  transform: scale(1);
 }
-.jewel.checkbox input:checked:checked:focus, .jewel.checkbox 
input:checked:checked:active:focus, .jewel.checkbox 
input:checked:active:checked:focus, .jewel.checkbox 
input:checked:active:checked:active:focus {
-  background: url("data:image/svg+xml,<svg viewBox='0 0 16 13' version='1.1' 
xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g 
transform='translate(760, 285)'><polygon fill='%238CC63C' points='3 13 9 18 19 
7 16 5 9 13 6 10'></polygon></g></g></svg>"), #c6e39f;
-  background-repeat: no-repeat;
-  background-size: 90%;
-  background-position: center;
-  background-attachment: fixed;
+.jewel.checkbox input:checked:active + span::after {
+  opacity: 1;
+  transform: scale(1);
 }
 .jewel.checkbox input:focus {
   outline: none;
@@ -251,17 +267,14 @@ j|Card {
   cursor: unset;
   color: silver;
 }
+.jewel.checkbox input[disabled] + span::after {
+  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' 
xmlns='http://www.w3.org/2000/svg'%3E%3Cg%3E%3Cg%3E%3Cg%3E%3Crect x='0' y='0' 
width='22' height='22' fill-opacity='0'/%3E%3Cpolygon fill='%23cccccc' 
points='3.51452637 12.5264893 9 17.9205322 18.9342041 8.02331543 16.0217285 
4.96948242 9 12.0758057 6.47851562 
9.51098633'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
 .jewel.checkbox input[disabled]:checked {
-  background: url("data:image/svg+xml,<svg viewBox='0 0 16 13' version='1.1' 
xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g 
transform='translate(760, 285)'><polygon fill='%23cccccc' points='3 13 9 18 19 
7 16 5 9 13 6 10'></polygon></g></g></svg>"), #f3f3f3;
-  background-size: 90%;
-  background-position: center;
-  background-repeat: no-repeat;
-  background-attachment: fixed;
   border: 1px solid #d9d9d9;
 }
 .jewel.checkbox span {
   cursor: pointer;
-  position: relative;
   margin: 0;
   padding-left: 6px;
   vertical-align: top;
@@ -403,8 +416,6 @@ j|Card {
   color: transparent;
 }
 .jewel.slider input::-ms-fill-lower {
-  position: relative;
-  flex: 0;
   padding: 0;
   background: linear-gradient(#93c948, #84bc37);
   border: 1px solid #638c29;
@@ -412,8 +423,6 @@ j|Card {
   border-radius: 3px;
 }
 .jewel.slider input::-ms-fill-upper {
-  position: relative;
-  flex: 0;
   padding: 0;
   background: linear-gradient(white, #e6e6e6);
   border: 1px solid #b3b3b3;
@@ -433,11 +442,6 @@ j|Card {
   border-radius: 50%;
 }
 .jewel.slider input::-ms-thumb {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  -o-appearance: none;
-  -ms-appearance: none;
-  appearance: none;
   width: 18px;
   height: 18px;
   background: linear-gradient(#93c948, #84bc37);
@@ -449,7 +453,7 @@ j|Card {
   transform: scale(1.4);
 }
 .jewel.slider input:active::-ms-thumb {
-  transform: scale(1.4);
+  transform: scale(0.8);
 }
 .jewel.slider input:focus {
   outline: none;
diff --git 
a/frameworks/themes/Jewel-Light-NoFlat-Primary-Green-Theme/src/main/resources/defaults.css
 
b/frameworks/themes/Jewel-Light-NoFlat-Primary-Green-Theme/src/main/resources/defaults.css
index 1916cbc..a5ea084 100644
--- 
a/frameworks/themes/Jewel-Light-NoFlat-Primary-Green-Theme/src/main/resources/defaults.css
+++ 
b/frameworks/themes/Jewel-Light-NoFlat-Primary-Green-Theme/src/main/resources/defaults.css
@@ -220,23 +220,39 @@ j|Card {
   width: 22px;
   height: 22px;
   line-height: 22px;
+  opacity: 0;
+}
+.jewel.checkbox input + span::before {
+  content: " ";
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  width: 22px;
+  height: 22px;
   background: linear-gradient(white, #f3f3f3);
   border: 1px solid #b3b3b3;
   border-radius: 3px;
 }
-.jewel.checkbox input:checked, .jewel.checkbox input:checked:active {
-  background: url("data:image/svg+xml,<svg viewBox='0 0 16 13' version='1.1' 
xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g 
transform='translate(760, 285)'><polygon fill='%233AB549' points='3 13 9 18 19 
7 16 5 9 13 6 10'></polygon></g></g></svg>"), #f8f8f8;
-  background-repeat: no-repeat;
-  background-size: 90%;
-  background-position: center;
-  background-attachment: fixed;
+.jewel.checkbox input + span::after {
+  content: " ";
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  width: 22px;
+  height: 22px;
+  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' 
xmlns='http://www.w3.org/2000/svg'%3E%3Cg%3E%3Cg%3E%3Cg%3E%3Crect x='0' y='0' 
width='22' height='22' fill-opacity='0'/%3E%3Cpolygon fill='%233AB549' 
points='3.51452637 12.5264893 9 17.9205322 18.9342041 8.02331543 16.0217285 
4.96948242 9 12.0758057 6.47851562 
9.51098633'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+  border: 1px solid transparent;
+  opacity: 0;
+  transition: all 0.3s ease;
+  transform: scale(0);
+}
+.jewel.checkbox input:checked + span::after {
+  opacity: 1;
+  transform: scale(1);
 }
-.jewel.checkbox input:checked:checked:focus, .jewel.checkbox 
input:checked:checked:active:focus, .jewel.checkbox 
input:checked:active:checked:focus, .jewel.checkbox 
input:checked:active:checked:active:focus {
-  background: url("data:image/svg+xml,<svg viewBox='0 0 16 13' version='1.1' 
xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g 
transform='translate(760, 285)'><polygon fill='%233AB549' points='3 13 9 18 19 
7 16 5 9 13 6 10'></polygon></g></g></svg>"), #92dc9b;
-  background-repeat: no-repeat;
-  background-size: 90%;
-  background-position: center;
-  background-attachment: fixed;
+.jewel.checkbox input:checked:active + span::after {
+  opacity: 1;
+  transform: scale(1);
 }
 .jewel.checkbox input:focus {
   outline: none;
@@ -251,17 +267,14 @@ j|Card {
   cursor: unset;
   color: silver;
 }
+.jewel.checkbox input[disabled] + span::after {
+  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' 
xmlns='http://www.w3.org/2000/svg'%3E%3Cg%3E%3Cg%3E%3Cg%3E%3Crect x='0' y='0' 
width='22' height='22' fill-opacity='0'/%3E%3Cpolygon fill='%23cccccc' 
points='3.51452637 12.5264893 9 17.9205322 18.9342041 8.02331543 16.0217285 
4.96948242 9 12.0758057 6.47851562 
9.51098633'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
 .jewel.checkbox input[disabled]:checked {
-  background: url("data:image/svg+xml,<svg viewBox='0 0 16 13' version='1.1' 
xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g 
transform='translate(760, 285)'><polygon fill='%23cccccc' points='3 13 9 18 19 
7 16 5 9 13 6 10'></polygon></g></g></svg>"), #f3f3f3;
-  background-size: 90%;
-  background-position: center;
-  background-repeat: no-repeat;
-  background-attachment: fixed;
   border: 1px solid #d9d9d9;
 }
 .jewel.checkbox span {
   cursor: pointer;
-  position: relative;
   margin: 0;
   padding-left: 6px;
   vertical-align: top;
@@ -403,8 +416,6 @@ j|Card {
   color: transparent;
 }
 .jewel.slider input::-ms-fill-lower {
-  position: relative;
-  flex: 0;
   padding: 0;
   background: linear-gradient(#3ec14e, #36a944);
   border: 1px solid #277b32;
@@ -412,8 +423,6 @@ j|Card {
   border-radius: 3px;
 }
 .jewel.slider input::-ms-fill-upper {
-  position: relative;
-  flex: 0;
   padding: 0;
   background: linear-gradient(white, #e6e6e6);
   border: 1px solid #b3b3b3;
@@ -433,11 +442,6 @@ j|Card {
   border-radius: 50%;
 }
 .jewel.slider input::-ms-thumb {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  -o-appearance: none;
-  -ms-appearance: none;
-  appearance: none;
   width: 18px;
   height: 18px;
   background: linear-gradient(#3ec14e, #36a944);
@@ -449,7 +453,7 @@ j|Card {
   transform: scale(1.4);
 }
 .jewel.slider input:active::-ms-thumb {
-  transform: scale(1.4);
+  transform: scale(0.8);
 }
 .jewel.slider input:focus {
   outline: none;
diff --git 
a/frameworks/themes/Jewel-Light-NoFlat-Primary-Orange-Theme/src/main/resources/defaults.css
 
b/frameworks/themes/Jewel-Light-NoFlat-Primary-Orange-Theme/src/main/resources/defaults.css
index 908fbfb..80d8275 100644
--- 
a/frameworks/themes/Jewel-Light-NoFlat-Primary-Orange-Theme/src/main/resources/defaults.css
+++ 
b/frameworks/themes/Jewel-Light-NoFlat-Primary-Orange-Theme/src/main/resources/defaults.css
@@ -220,23 +220,39 @@ j|Card {
   width: 22px;
   height: 22px;
   line-height: 22px;
+  opacity: 0;
+}
+.jewel.checkbox input + span::before {
+  content: " ";
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  width: 22px;
+  height: 22px;
   background: linear-gradient(white, #f3f3f3);
   border: 1px solid #b3b3b3;
   border-radius: 3px;
 }
-.jewel.checkbox input:checked, .jewel.checkbox input:checked:active {
-  background: url("data:image/svg+xml,<svg viewBox='0 0 16 13' version='1.1' 
xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g 
transform='translate(760, 285)'><polygon fill='%23F7941D' points='3 13 9 18 19 
7 16 5 9 13 6 10'></polygon></g></g></svg>"), #f8f8f8;
-  background-repeat: no-repeat;
-  background-size: 90%;
-  background-position: center;
-  background-attachment: fixed;
+.jewel.checkbox input + span::after {
+  content: " ";
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  width: 22px;
+  height: 22px;
+  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' 
xmlns='http://www.w3.org/2000/svg'%3E%3Cg%3E%3Cg%3E%3Cg%3E%3Crect x='0' y='0' 
width='22' height='22' fill-opacity='0'/%3E%3Cpolygon fill='%23F7941D' 
points='3.51452637 12.5264893 9 17.9205322 18.9342041 8.02331543 16.0217285 
4.96948242 9 12.0758057 6.47851562 
9.51098633'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+  border: 1px solid transparent;
+  opacity: 0;
+  transition: all 0.3s ease;
+  transform: scale(0);
+}
+.jewel.checkbox input:checked + span::after {
+  opacity: 1;
+  transform: scale(1);
 }
-.jewel.checkbox input:checked:checked:focus, .jewel.checkbox 
input:checked:checked:active:focus, .jewel.checkbox 
input:checked:active:checked:focus, .jewel.checkbox 
input:checked:active:checked:active:focus {
-  background: url("data:image/svg+xml,<svg viewBox='0 0 16 13' version='1.1' 
xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g 
transform='translate(760, 285)'><polygon fill='%23F7941D' points='3 13 9 18 19 
7 16 5 9 13 6 10'></polygon></g></g></svg>"), #fbce98;
-  background-repeat: no-repeat;
-  background-size: 90%;
-  background-position: center;
-  background-attachment: fixed;
+.jewel.checkbox input:checked:active + span::after {
+  opacity: 1;
+  transform: scale(1);
 }
 .jewel.checkbox input:focus {
   outline: none;
@@ -251,17 +267,14 @@ j|Card {
   cursor: unset;
   color: silver;
 }
+.jewel.checkbox input[disabled] + span::after {
+  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' 
xmlns='http://www.w3.org/2000/svg'%3E%3Cg%3E%3Cg%3E%3Cg%3E%3Crect x='0' y='0' 
width='22' height='22' fill-opacity='0'/%3E%3Cpolygon fill='%23cccccc' 
points='3.51452637 12.5264893 9 17.9205322 18.9342041 8.02331543 16.0217285 
4.96948242 9 12.0758057 6.47851562 
9.51098633'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
 .jewel.checkbox input[disabled]:checked {
-  background: url("data:image/svg+xml,<svg viewBox='0 0 16 13' version='1.1' 
xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g 
transform='translate(760, 285)'><polygon fill='%23cccccc' points='3 13 9 18 19 
7 16 5 9 13 6 10'></polygon></g></g></svg>"), #f3f3f3;
-  background-size: 90%;
-  background-position: center;
-  background-repeat: no-repeat;
-  background-attachment: fixed;
   border: 1px solid #d9d9d9;
 }
 .jewel.checkbox span {
   cursor: pointer;
-  position: relative;
   margin: 0;
   padding-left: 6px;
   vertical-align: top;
@@ -403,8 +416,6 @@ j|Card {
   color: transparent;
 }
 .jewel.slider input::-ms-fill-lower {
-  position: relative;
-  flex: 0;
   padding: 0;
   background: linear-gradient(#f89b2c, #f68d0e);
   border: 1px solid #c16c07;
@@ -412,8 +423,6 @@ j|Card {
   border-radius: 3px;
 }
 .jewel.slider input::-ms-fill-upper {
-  position: relative;
-  flex: 0;
   padding: 0;
   background: linear-gradient(white, #e6e6e6);
   border: 1px solid #b3b3b3;
@@ -433,11 +442,6 @@ j|Card {
   border-radius: 50%;
 }
 .jewel.slider input::-ms-thumb {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  -o-appearance: none;
-  -ms-appearance: none;
-  appearance: none;
   width: 18px;
   height: 18px;
   background: linear-gradient(#f89b2c, #f68d0e);
@@ -449,7 +453,7 @@ j|Card {
   transform: scale(1.4);
 }
 .jewel.slider input:active::-ms-thumb {
-  transform: scale(1.4);
+  transform: scale(0.8);
 }
 .jewel.slider input:focus {
   outline: none;
diff --git 
a/frameworks/themes/Jewel-Light-NoFlat-Primary-Red-Theme/src/main/resources/defaults.css
 
b/frameworks/themes/Jewel-Light-NoFlat-Primary-Red-Theme/src/main/resources/defaults.css
index 683c390..0b4545d 100644
--- 
a/frameworks/themes/Jewel-Light-NoFlat-Primary-Red-Theme/src/main/resources/defaults.css
+++ 
b/frameworks/themes/Jewel-Light-NoFlat-Primary-Red-Theme/src/main/resources/defaults.css
@@ -220,23 +220,39 @@ j|Card {
   width: 22px;
   height: 22px;
   line-height: 22px;
+  opacity: 0;
+}
+.jewel.checkbox input + span::before {
+  content: " ";
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  width: 22px;
+  height: 22px;
   background: linear-gradient(white, #f3f3f3);
   border: 1px solid #b3b3b3;
   border-radius: 3px;
 }
-.jewel.checkbox input:checked, .jewel.checkbox input:checked:active {
-  background: url("data:image/svg+xml,<svg viewBox='0 0 16 13' version='1.1' 
xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g 
transform='translate(760, 285)'><polygon fill='%23EC1C24' points='3 13 9 18 19 
7 16 5 9 13 6 10'></polygon></g></g></svg>"), #f8f8f8;
-  background-repeat: no-repeat;
-  background-size: 90%;
-  background-position: center;
-  background-attachment: fixed;
+.jewel.checkbox input + span::after {
+  content: " ";
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  width: 22px;
+  height: 22px;
+  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' 
xmlns='http://www.w3.org/2000/svg'%3E%3Cg%3E%3Cg%3E%3Cg%3E%3Crect x='0' y='0' 
width='22' height='22' fill-opacity='0'/%3E%3Cpolygon fill='%23EC1C24' 
points='3.51452637 12.5264893 9 17.9205322 18.9342041 8.02331543 16.0217285 
4.96948242 9 12.0758057 6.47851562 
9.51098633'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+  border: 1px solid transparent;
+  opacity: 0;
+  transition: all 0.3s ease;
+  transform: scale(0);
+}
+.jewel.checkbox input:checked + span::after {
+  opacity: 1;
+  transform: scale(1);
 }
-.jewel.checkbox input:checked:checked:focus, .jewel.checkbox 
input:checked:checked:active:focus, .jewel.checkbox 
input:checked:active:checked:focus, .jewel.checkbox 
input:checked:active:checked:active:focus {
-  background: url("data:image/svg+xml,<svg viewBox='0 0 16 13' version='1.1' 
xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g 
transform='translate(760, 285)'><polygon fill='%23EC1C24' points='3 13 9 18 19 
7 16 5 9 13 6 10'></polygon></g></g></svg>"), #f69296;
-  background-repeat: no-repeat;
-  background-size: 90%;
-  background-position: center;
-  background-attachment: fixed;
+.jewel.checkbox input:checked:active + span::after {
+  opacity: 1;
+  transform: scale(1);
 }
 .jewel.checkbox input:focus {
   outline: none;
@@ -251,17 +267,14 @@ j|Card {
   cursor: unset;
   color: silver;
 }
+.jewel.checkbox input[disabled] + span::after {
+  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' 
xmlns='http://www.w3.org/2000/svg'%3E%3Cg%3E%3Cg%3E%3Cg%3E%3Crect x='0' y='0' 
width='22' height='22' fill-opacity='0'/%3E%3Cpolygon fill='%23cccccc' 
points='3.51452637 12.5264893 9 17.9205322 18.9342041 8.02331543 16.0217285 
4.96948242 9 12.0758057 6.47851562 
9.51098633'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
 .jewel.checkbox input[disabled]:checked {
-  background: url("data:image/svg+xml,<svg viewBox='0 0 16 13' version='1.1' 
xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g 
transform='translate(760, 285)'><polygon fill='%23cccccc' points='3 13 9 18 19 
7 16 5 9 13 6 10'></polygon></g></g></svg>"), #f3f3f3;
-  background-size: 90%;
-  background-position: center;
-  background-repeat: no-repeat;
-  background-attachment: fixed;
   border: 1px solid #d9d9d9;
 }
 .jewel.checkbox span {
   cursor: pointer;
-  position: relative;
   margin: 0;
   padding-left: 6px;
   vertical-align: top;
@@ -403,8 +416,6 @@ j|Card {
   color: transparent;
 }
 .jewel.slider input::-ms-fill-lower {
-  position: relative;
-  flex: 0;
   padding: 0;
   background: linear-gradient(#ed2a32, #e5131b);
   border: 1px solid #ad0e15;
@@ -412,8 +423,6 @@ j|Card {
   border-radius: 3px;
 }
 .jewel.slider input::-ms-fill-upper {
-  position: relative;
-  flex: 0;
   padding: 0;
   background: linear-gradient(white, #e6e6e6);
   border: 1px solid #b3b3b3;
@@ -433,11 +442,6 @@ j|Card {
   border-radius: 50%;
 }
 .jewel.slider input::-ms-thumb {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  -o-appearance: none;
-  -ms-appearance: none;
-  appearance: none;
   width: 18px;
   height: 18px;
   background: linear-gradient(#ed2a32, #e5131b);
@@ -449,7 +453,7 @@ j|Card {
   transform: scale(1.4);
 }
 .jewel.slider input:active::-ms-thumb {
-  transform: scale(1.4);
+  transform: scale(0.8);
 }
 .jewel.slider input:focus {
   outline: none;
diff --git 
a/frameworks/themes/Jewel-Light-NoFlat-Primary-Sapphire-Theme/src/main/resources/defaults.css
 
b/frameworks/themes/Jewel-Light-NoFlat-Primary-Sapphire-Theme/src/main/resources/defaults.css
index 21f72b3..ca45c21 100644
--- 
a/frameworks/themes/Jewel-Light-NoFlat-Primary-Sapphire-Theme/src/main/resources/defaults.css
+++ 
b/frameworks/themes/Jewel-Light-NoFlat-Primary-Sapphire-Theme/src/main/resources/defaults.css
@@ -220,23 +220,39 @@ j|Card {
   width: 22px;
   height: 22px;
   line-height: 22px;
+  opacity: 0;
+}
+.jewel.checkbox input + span::before {
+  content: " ";
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  width: 22px;
+  height: 22px;
   background: linear-gradient(white, #f3f3f3);
   border: 1px solid #b3b3b3;
   border-radius: 3px;
 }
-.jewel.checkbox input:checked, .jewel.checkbox input:checked:active {
-  background: url("data:image/svg+xml,<svg viewBox='0 0 16 13' version='1.1' 
xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g 
transform='translate(760, 285)'><polygon fill='%232C74BE' points='3 13 9 18 19 
7 16 5 9 13 6 10'></polygon></g></g></svg>"), #f8f8f8;
-  background-repeat: no-repeat;
-  background-size: 90%;
-  background-position: center;
-  background-attachment: fixed;
+.jewel.checkbox input + span::after {
+  content: " ";
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  width: 22px;
+  height: 22px;
+  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' 
xmlns='http://www.w3.org/2000/svg'%3E%3Cg%3E%3Cg%3E%3Cg%3E%3Crect x='0' y='0' 
width='22' height='22' fill-opacity='0'/%3E%3Cpolygon fill='%232C74BE' 
points='3.51452637 12.5264893 9 17.9205322 18.9342041 8.02331543 16.0217285 
4.96948242 9 12.0758057 6.47851562 
9.51098633'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+  border: 1px solid transparent;
+  opacity: 0;
+  transition: all 0.3s ease;
+  transform: scale(0);
+}
+.jewel.checkbox input:checked + span::after {
+  opacity: 1;
+  transform: scale(1);
 }
-.jewel.checkbox input:checked:checked:focus, .jewel.checkbox 
input:checked:checked:active:focus, .jewel.checkbox 
input:checked:active:checked:focus, .jewel.checkbox 
input:checked:active:checked:active:focus {
-  background: url("data:image/svg+xml,<svg viewBox='0 0 16 13' version='1.1' 
xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g 
transform='translate(760, 285)'><polygon fill='%232C74BE' points='3 13 9 18 19 
7 16 5 9 13 6 10'></polygon></g></g></svg>"), #86b4e3;
-  background-repeat: no-repeat;
-  background-size: 90%;
-  background-position: center;
-  background-attachment: fixed;
+.jewel.checkbox input:checked:active + span::after {
+  opacity: 1;
+  transform: scale(1);
 }
 .jewel.checkbox input:focus {
   outline: none;
@@ -251,17 +267,14 @@ j|Card {
   cursor: unset;
   color: silver;
 }
+.jewel.checkbox input[disabled] + span::after {
+  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' 
xmlns='http://www.w3.org/2000/svg'%3E%3Cg%3E%3Cg%3E%3Cg%3E%3Crect x='0' y='0' 
width='22' height='22' fill-opacity='0'/%3E%3Cpolygon fill='%23cccccc' 
points='3.51452637 12.5264893 9 17.9205322 18.9342041 8.02331543 16.0217285 
4.96948242 9 12.0758057 6.47851562 
9.51098633'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
 .jewel.checkbox input[disabled]:checked {
-  background: url("data:image/svg+xml,<svg viewBox='0 0 16 13' version='1.1' 
xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g 
transform='translate(760, 285)'><polygon fill='%23cccccc' points='3 13 9 18 19 
7 16 5 9 13 6 10'></polygon></g></g></svg>"), #f3f3f3;
-  background-size: 90%;
-  background-position: center;
-  background-repeat: no-repeat;
-  background-attachment: fixed;
   border: 1px solid #d9d9d9;
 }
 .jewel.checkbox span {
   cursor: pointer;
-  position: relative;
   margin: 0;
   padding-left: 6px;
   vertical-align: top;
@@ -403,8 +416,6 @@ j|Card {
   color: transparent;
 }
 .jewel.slider input::-ms-fill-lower {
-  position: relative;
-  flex: 0;
   padding: 0;
   background: linear-gradient(#2f7cca, #296cb2);
   border: 1px solid #1e4e80;
@@ -412,8 +423,6 @@ j|Card {
   border-radius: 3px;
 }
 .jewel.slider input::-ms-fill-upper {
-  position: relative;
-  flex: 0;
   padding: 0;
   background: linear-gradient(white, #e6e6e6);
   border: 1px solid #b3b3b3;
@@ -433,11 +442,6 @@ j|Card {
   border-radius: 50%;
 }
 .jewel.slider input::-ms-thumb {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  -o-appearance: none;
-  -ms-appearance: none;
-  appearance: none;
   width: 18px;
   height: 18px;
   background: linear-gradient(#2f7cca, #296cb2);
@@ -449,7 +453,7 @@ j|Card {
   transform: scale(1.4);
 }
 .jewel.slider input:active::-ms-thumb {
-  transform: scale(1.4);
+  transform: scale(0.8);
 }
 .jewel.slider input:focus {
   outline: none;
diff --git 
a/frameworks/themes/Jewel-Light-NoFlat-Primary-Sunflower-Theme/src/main/resources/defaults.css
 
b/frameworks/themes/Jewel-Light-NoFlat-Primary-Sunflower-Theme/src/main/resources/defaults.css
index cca8d04..14c3a7f 100644
--- 
a/frameworks/themes/Jewel-Light-NoFlat-Primary-Sunflower-Theme/src/main/resources/defaults.css
+++ 
b/frameworks/themes/Jewel-Light-NoFlat-Primary-Sunflower-Theme/src/main/resources/defaults.css
@@ -220,23 +220,39 @@ j|Card {
   width: 22px;
   height: 22px;
   line-height: 22px;
+  opacity: 0;
+}
+.jewel.checkbox input + span::before {
+  content: " ";
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  width: 22px;
+  height: 22px;
   background: linear-gradient(white, #f3f3f3);
   border: 1px solid #b3b3b3;
   border-radius: 3px;
 }
-.jewel.checkbox input:checked, .jewel.checkbox input:checked:active {
-  background: url("data:image/svg+xml,<svg viewBox='0 0 16 13' version='1.1' 
xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g 
transform='translate(760, 285)'><polygon fill='%23F8B13F' points='3 13 9 18 19 
7 16 5 9 13 6 10'></polygon></g></g></svg>"), #f8f8f8;
-  background-repeat: no-repeat;
-  background-size: 90%;
-  background-position: center;
-  background-attachment: fixed;
+.jewel.checkbox input + span::after {
+  content: " ";
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  width: 22px;
+  height: 22px;
+  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' 
xmlns='http://www.w3.org/2000/svg'%3E%3Cg%3E%3Cg%3E%3Cg%3E%3Crect x='0' y='0' 
width='22' height='22' fill-opacity='0'/%3E%3Cpolygon fill='%23F8B13F' 
points='3.51452637 12.5264893 9 17.9205322 18.9342041 8.02331543 16.0217285 
4.96948242 9 12.0758057 6.47851562 
9.51098633'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+  border: 1px solid transparent;
+  opacity: 0;
+  transition: all 0.3s ease;
+  transform: scale(0);
+}
+.jewel.checkbox input:checked + span::after {
+  opacity: 1;
+  transform: scale(1);
 }
-.jewel.checkbox input:checked:checked:focus, .jewel.checkbox 
input:checked:checked:active:focus, .jewel.checkbox 
input:checked:active:checked:focus, .jewel.checkbox 
input:checked:active:checked:active:focus {
-  background: url("data:image/svg+xml,<svg viewBox='0 0 16 13' version='1.1' 
xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g 
transform='translate(760, 285)'><polygon fill='%23F8B13F' points='3 13 9 18 19 
7 16 5 9 13 6 10'></polygon></g></g></svg>"), #fce3ba;
-  background-repeat: no-repeat;
-  background-size: 90%;
-  background-position: center;
-  background-attachment: fixed;
+.jewel.checkbox input:checked:active + span::after {
+  opacity: 1;
+  transform: scale(1);
 }
 .jewel.checkbox input:focus {
   outline: none;
@@ -251,17 +267,14 @@ j|Card {
   cursor: unset;
   color: silver;
 }
+.jewel.checkbox input[disabled] + span::after {
+  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' 
xmlns='http://www.w3.org/2000/svg'%3E%3Cg%3E%3Cg%3E%3Cg%3E%3Crect x='0' y='0' 
width='22' height='22' fill-opacity='0'/%3E%3Cpolygon fill='%23cccccc' 
points='3.51452637 12.5264893 9 17.9205322 18.9342041 8.02331543 16.0217285 
4.96948242 9 12.0758057 6.47851562 
9.51098633'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
 .jewel.checkbox input[disabled]:checked {
-  background: url("data:image/svg+xml,<svg viewBox='0 0 16 13' version='1.1' 
xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g 
transform='translate(760, 285)'><polygon fill='%23cccccc' points='3 13 9 18 19 
7 16 5 9 13 6 10'></polygon></g></g></svg>"), #f3f3f3;
-  background-size: 90%;
-  background-position: center;
-  background-repeat: no-repeat;
-  background-attachment: fixed;
   border: 1px solid #d9d9d9;
 }
 .jewel.checkbox span {
   cursor: pointer;
-  position: relative;
   margin: 0;
   padding-left: 6px;
   vertical-align: top;
@@ -403,8 +416,6 @@ j|Card {
   color: transparent;
 }
 .jewel.slider input::-ms-fill-lower {
-  position: relative;
-  flex: 0;
   padding: 0;
   background: linear-gradient(#f9b74e, #f7ab30);
   border: 1px solid #e28f08;
@@ -412,8 +423,6 @@ j|Card {
   border-radius: 3px;
 }
 .jewel.slider input::-ms-fill-upper {
-  position: relative;
-  flex: 0;
   padding: 0;
   background: linear-gradient(white, #e6e6e6);
   border: 1px solid #b3b3b3;
@@ -433,11 +442,6 @@ j|Card {
   border-radius: 50%;
 }
 .jewel.slider input::-ms-thumb {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  -o-appearance: none;
-  -ms-appearance: none;
-  appearance: none;
   width: 18px;
   height: 18px;
   background: linear-gradient(#f9b74e, #f7ab30);
@@ -449,7 +453,7 @@ j|Card {
   transform: scale(1.4);
 }
 .jewel.slider input:active::-ms-thumb {
-  transform: scale(1.4);
+  transform: scale(0.8);
 }
 .jewel.slider input:focus {
   outline: none;
diff --git 
a/frameworks/themes/Jewel-Light-NoFlat-Primary-Topaz-Theme/src/main/resources/defaults.css
 
b/frameworks/themes/Jewel-Light-NoFlat-Primary-Topaz-Theme/src/main/resources/defaults.css
index 31cdb96..bb27eb3 100644
--- 
a/frameworks/themes/Jewel-Light-NoFlat-Primary-Topaz-Theme/src/main/resources/defaults.css
+++ 
b/frameworks/themes/Jewel-Light-NoFlat-Primary-Topaz-Theme/src/main/resources/defaults.css
@@ -220,23 +220,39 @@ j|Card {
   width: 22px;
   height: 22px;
   line-height: 22px;
+  opacity: 0;
+}
+.jewel.checkbox input + span::before {
+  content: " ";
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  width: 22px;
+  height: 22px;
   background: linear-gradient(white, #f3f3f3);
   border: 1px solid #b3b3b3;
   border-radius: 3px;
 }
-.jewel.checkbox input:checked, .jewel.checkbox input:checked:active {
-  background: url("data:image/svg+xml,<svg viewBox='0 0 16 13' version='1.1' 
xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g 
transform='translate(760, 285)'><polygon fill='%23EF5A2A' points='3 13 9 18 19 
7 16 5 9 13 6 10'></polygon></g></g></svg>"), #f8f8f8;
-  background-repeat: no-repeat;
-  background-size: 90%;
-  background-position: center;
-  background-attachment: fixed;
+.jewel.checkbox input + span::after {
+  content: " ";
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  width: 22px;
+  height: 22px;
+  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' 
xmlns='http://www.w3.org/2000/svg'%3E%3Cg%3E%3Cg%3E%3Cg%3E%3Crect x='0' y='0' 
width='22' height='22' fill-opacity='0'/%3E%3Cpolygon fill='%23EF5A2A' 
points='3.51452637 12.5264893 9 17.9205322 18.9342041 8.02331543 16.0217285 
4.96948242 9 12.0758057 6.47851562 
9.51098633'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+  border: 1px solid transparent;
+  opacity: 0;
+  transition: all 0.3s ease;
+  transform: scale(0);
+}
+.jewel.checkbox input:checked + span::after {
+  opacity: 1;
+  transform: scale(1);
 }
-.jewel.checkbox input:checked:checked:focus, .jewel.checkbox 
input:checked:checked:active:focus, .jewel.checkbox 
input:checked:active:checked:focus, .jewel.checkbox 
input:checked:active:checked:active:focus {
-  background: url("data:image/svg+xml,<svg viewBox='0 0 16 13' version='1.1' 
xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g 
transform='translate(760, 285)'><polygon fill='%23EF5A2A' points='3 13 9 18 19 
7 16 5 9 13 6 10'></polygon></g></g></svg>"), #f8b6a1;
-  background-repeat: no-repeat;
-  background-size: 90%;
-  background-position: center;
-  background-attachment: fixed;
+.jewel.checkbox input:checked:active + span::after {
+  opacity: 1;
+  transform: scale(1);
 }
 .jewel.checkbox input:focus {
   outline: none;
@@ -251,17 +267,14 @@ j|Card {
   cursor: unset;
   color: silver;
 }
+.jewel.checkbox input[disabled] + span::after {
+  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' 
xmlns='http://www.w3.org/2000/svg'%3E%3Cg%3E%3Cg%3E%3Cg%3E%3Crect x='0' y='0' 
width='22' height='22' fill-opacity='0'/%3E%3Cpolygon fill='%23cccccc' 
points='3.51452637 12.5264893 9 17.9205322 18.9342041 8.02331543 16.0217285 
4.96948242 9 12.0758057 6.47851562 
9.51098633'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
 .jewel.checkbox input[disabled]:checked {
-  background: url("data:image/svg+xml,<svg viewBox='0 0 16 13' version='1.1' 
xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g 
transform='translate(760, 285)'><polygon fill='%23cccccc' points='3 13 9 18 19 
7 16 5 9 13 6 10'></polygon></g></g></svg>"), #f3f3f3;
-  background-size: 90%;
-  background-position: center;
-  background-repeat: no-repeat;
-  background-attachment: fixed;
   border: 1px solid #d9d9d9;
 }
 .jewel.checkbox span {
   cursor: pointer;
-  position: relative;
   margin: 0;
   padding-left: 6px;
   vertical-align: top;
@@ -403,8 +416,6 @@ j|Card {
   color: transparent;
 }
 .jewel.slider input::-ms-fill-lower {
-  position: relative;
-  flex: 0;
   padding: 0;
   background: linear-gradient(#f06538, #ee4f1c);
   border: 1px solid #be390e;
@@ -412,8 +423,6 @@ j|Card {
   border-radius: 3px;
 }
 .jewel.slider input::-ms-fill-upper {
-  position: relative;
-  flex: 0;
   padding: 0;
   background: linear-gradient(white, #e6e6e6);
   border: 1px solid #b3b3b3;
@@ -433,11 +442,6 @@ j|Card {
   border-radius: 50%;
 }
 .jewel.slider input::-ms-thumb {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  -o-appearance: none;
-  -ms-appearance: none;
-  appearance: none;
   width: 18px;
   height: 18px;
   background: linear-gradient(#f06538, #ee4f1c);
@@ -449,7 +453,7 @@ j|Card {
   transform: scale(1.4);
 }
 .jewel.slider input:active::-ms-thumb {
-  transform: scale(1.4);
+  transform: scale(0.8);
 }
 .jewel.slider input:focus {
   outline: none;
diff --git 
a/frameworks/themes/Jewel-Light-NoFlat-Primary-Turquoise-Theme/src/main/resources/defaults.css
 
b/frameworks/themes/Jewel-Light-NoFlat-Primary-Turquoise-Theme/src/main/resources/defaults.css
index 7e65c56..a2194aa 100644
--- 
a/frameworks/themes/Jewel-Light-NoFlat-Primary-Turquoise-Theme/src/main/resources/defaults.css
+++ 
b/frameworks/themes/Jewel-Light-NoFlat-Primary-Turquoise-Theme/src/main/resources/defaults.css
@@ -220,23 +220,39 @@ j|Card {
   width: 22px;
   height: 22px;
   line-height: 22px;
+  opacity: 0;
+}
+.jewel.checkbox input + span::before {
+  content: " ";
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  width: 22px;
+  height: 22px;
   background: linear-gradient(white, #f3f3f3);
   border: 1px solid #b3b3b3;
   border-radius: 3px;
 }
-.jewel.checkbox input:checked, .jewel.checkbox input:checked:active {
-  background: url("data:image/svg+xml,<svg viewBox='0 0 16 13' version='1.1' 
xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g 
transform='translate(760, 285)'><polygon fill='%2329A89F' points='3 13 9 18 19 
7 16 5 9 13 6 10'></polygon></g></g></svg>"), #f8f8f8;
-  background-repeat: no-repeat;
-  background-size: 90%;
-  background-position: center;
-  background-attachment: fixed;
+.jewel.checkbox input + span::after {
+  content: " ";
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  width: 22px;
+  height: 22px;
+  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' 
xmlns='http://www.w3.org/2000/svg'%3E%3Cg%3E%3Cg%3E%3Cg%3E%3Crect x='0' y='0' 
width='22' height='22' fill-opacity='0'/%3E%3Cpolygon fill='%2329A89F' 
points='3.51452637 12.5264893 9 17.9205322 18.9342041 8.02331543 16.0217285 
4.96948242 9 12.0758057 6.47851562 
9.51098633'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+  border: 1px solid transparent;
+  opacity: 0;
+  transition: all 0.3s ease;
+  transform: scale(0);
+}
+.jewel.checkbox input:checked + span::after {
+  opacity: 1;
+  transform: scale(1);
 }
-.jewel.checkbox input:checked:checked:focus, .jewel.checkbox 
input:checked:checked:active:focus, .jewel.checkbox 
input:checked:active:checked:focus, .jewel.checkbox 
input:checked:active:checked:active:focus {
-  background: url("data:image/svg+xml,<svg viewBox='0 0 16 13' version='1.1' 
xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g 
transform='translate(760, 285)'><polygon fill='%2329A89F' points='3 13 9 18 19 
7 16 5 9 13 6 10'></polygon></g></g></svg>"), #74ddd5;
-  background-repeat: no-repeat;
-  background-size: 90%;
-  background-position: center;
-  background-attachment: fixed;
+.jewel.checkbox input:checked:active + span::after {
+  opacity: 1;
+  transform: scale(1);
 }
 .jewel.checkbox input:focus {
   outline: none;
@@ -251,17 +267,14 @@ j|Card {
   cursor: unset;
   color: silver;
 }
+.jewel.checkbox input[disabled] + span::after {
+  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' 
xmlns='http://www.w3.org/2000/svg'%3E%3Cg%3E%3Cg%3E%3Cg%3E%3Crect x='0' y='0' 
width='22' height='22' fill-opacity='0'/%3E%3Cpolygon fill='%23cccccc' 
points='3.51452637 12.5264893 9 17.9205322 18.9342041 8.02331543 16.0217285 
4.96948242 9 12.0758057 6.47851562 
9.51098633'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
 .jewel.checkbox input[disabled]:checked {
-  background: url("data:image/svg+xml,<svg viewBox='0 0 16 13' version='1.1' 
xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g 
transform='translate(760, 285)'><polygon fill='%23cccccc' points='3 13 9 18 19 
7 16 5 9 13 6 10'></polygon></g></g></svg>"), #f3f3f3;
-  background-size: 90%;
-  background-position: center;
-  background-repeat: no-repeat;
-  background-attachment: fixed;
   border: 1px solid #d9d9d9;
 }
 .jewel.checkbox span {
   cursor: pointer;
-  position: relative;
   margin: 0;
   padding-left: 6px;
   vertical-align: top;
@@ -403,8 +416,6 @@ j|Card {
   color: transparent;
 }
 .jewel.slider input::-ms-fill-lower {
-  position: relative;
-  flex: 0;
   padding: 0;
   background: linear-gradient(#2cb4ab, #269c93);
   border: 1px solid #1a6b65;
@@ -412,8 +423,6 @@ j|Card {
   border-radius: 3px;
 }
 .jewel.slider input::-ms-fill-upper {
-  position: relative;
-  flex: 0;
   padding: 0;
   background: linear-gradient(white, #e6e6e6);
   border: 1px solid #b3b3b3;
@@ -433,11 +442,6 @@ j|Card {
   border-radius: 50%;
 }
 .jewel.slider input::-ms-thumb {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  -o-appearance: none;
-  -ms-appearance: none;
-  appearance: none;
   width: 18px;
   height: 18px;
   background: linear-gradient(#2cb4ab, #269c93);
@@ -449,7 +453,7 @@ j|Card {
   transform: scale(1.4);
 }
 .jewel.slider input:active::-ms-thumb {
-  transform: scale(1.4);
+  transform: scale(0.8);
 }
 .jewel.slider input:focus {
   outline: none;
diff --git 
a/frameworks/themes/Jewel-Light-NoFlat-Primary-Violet-Theme/src/main/resources/defaults.css
 
b/frameworks/themes/Jewel-Light-NoFlat-Primary-Violet-Theme/src/main/resources/defaults.css
index e678674..94f815d 100644
--- 
a/frameworks/themes/Jewel-Light-NoFlat-Primary-Violet-Theme/src/main/resources/defaults.css
+++ 
b/frameworks/themes/Jewel-Light-NoFlat-Primary-Violet-Theme/src/main/resources/defaults.css
@@ -220,23 +220,39 @@ j|Card {
   width: 22px;
   height: 22px;
   line-height: 22px;
+  opacity: 0;
+}
+.jewel.checkbox input + span::before {
+  content: " ";
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  width: 22px;
+  height: 22px;
   background: linear-gradient(white, #f3f3f3);
   border: 1px solid #b3b3b3;
   border-radius: 3px;
 }
-.jewel.checkbox input:checked, .jewel.checkbox input:checked:active {
-  background: url("data:image/svg+xml,<svg viewBox='0 0 16 13' version='1.1' 
xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g 
transform='translate(760, 285)'><polygon fill='%23662C90' points='3 13 9 18 19 
7 16 5 9 13 6 10'></polygon></g></g></svg>"), #f8f8f8;
-  background-repeat: no-repeat;
-  background-size: 90%;
-  background-position: center;
-  background-attachment: fixed;
+.jewel.checkbox input + span::after {
+  content: " ";
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  width: 22px;
+  height: 22px;
+  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' 
xmlns='http://www.w3.org/2000/svg'%3E%3Cg%3E%3Cg%3E%3Cg%3E%3Crect x='0' y='0' 
width='22' height='22' fill-opacity='0'/%3E%3Cpolygon fill='%23662C90' 
points='3.51452637 12.5264893 9 17.9205322 18.9342041 8.02331543 16.0217285 
4.96948242 9 12.0758057 6.47851562 
9.51098633'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+  border: 1px solid transparent;
+  opacity: 0;
+  transition: all 0.3s ease;
+  transform: scale(0);
+}
+.jewel.checkbox input:checked + span::after {
+  opacity: 1;
+  transform: scale(1);
 }
-.jewel.checkbox input:checked:checked:focus, .jewel.checkbox 
input:checked:checked:active:focus, .jewel.checkbox 
input:checked:active:checked:focus, .jewel.checkbox 
input:checked:active:checked:active:focus {
-  background: url("data:image/svg+xml,<svg viewBox='0 0 16 13' version='1.1' 
xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g 
transform='translate(760, 285)'><polygon fill='%23662C90' points='3 13 9 18 19 
7 16 5 9 13 6 10'></polygon></g></g></svg>"), #a66ad1;
-  background-repeat: no-repeat;
-  background-size: 90%;
-  background-position: center;
-  background-attachment: fixed;
+.jewel.checkbox input:checked:active + span::after {
+  opacity: 1;
+  transform: scale(1);
 }
 .jewel.checkbox input:focus {
   outline: none;
@@ -251,17 +267,14 @@ j|Card {
   cursor: unset;
   color: silver;
 }
+.jewel.checkbox input[disabled] + span::after {
+  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' 
xmlns='http://www.w3.org/2000/svg'%3E%3Cg%3E%3Cg%3E%3Cg%3E%3Crect x='0' y='0' 
width='22' height='22' fill-opacity='0'/%3E%3Cpolygon fill='%23cccccc' 
points='3.51452637 12.5264893 9 17.9205322 18.9342041 8.02331543 16.0217285 
4.96948242 9 12.0758057 6.47851562 
9.51098633'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
 .jewel.checkbox input[disabled]:checked {
-  background: url("data:image/svg+xml,<svg viewBox='0 0 16 13' version='1.1' 
xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g 
transform='translate(760, 285)'><polygon fill='%23cccccc' points='3 13 9 18 19 
7 16 5 9 13 6 10'></polygon></g></g></svg>"), #f3f3f3;
-  background-size: 90%;
-  background-position: center;
-  background-repeat: no-repeat;
-  background-attachment: fixed;
   border: 1px solid #d9d9d9;
 }
 .jewel.checkbox span {
   cursor: pointer;
-  position: relative;
   margin: 0;
   padding-left: 6px;
   vertical-align: top;
@@ -403,8 +416,6 @@ j|Card {
   color: transparent;
 }
 .jewel.slider input::-ms-fill-lower {
-  position: relative;
-  flex: 0;
   padding: 0;
   background: linear-gradient(#6e309c, #5e2884);
   border: 1px solid #3c1a55;
@@ -412,8 +423,6 @@ j|Card {
   border-radius: 3px;
 }
 .jewel.slider input::-ms-fill-upper {
-  position: relative;
-  flex: 0;
   padding: 0;
   background: linear-gradient(white, #e6e6e6);
   border: 1px solid #b3b3b3;
@@ -433,11 +442,6 @@ j|Card {
   border-radius: 50%;
 }
 .jewel.slider input::-ms-thumb {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  -o-appearance: none;
-  -ms-appearance: none;
-  appearance: none;
   width: 18px;
   height: 18px;
   background: linear-gradient(#6e309c, #5e2884);
@@ -449,7 +453,7 @@ j|Card {
   transform: scale(1.4);
 }
 .jewel.slider input:active::-ms-thumb {
-  transform: scale(1.4);
+  transform: scale(0.8);
 }
 .jewel.slider input:focus {
   outline: none;
diff --git 
a/frameworks/themes/Jewel-Light-NoFlat-Primary-Yellow-Theme/src/main/resources/defaults.css
 
b/frameworks/themes/Jewel-Light-NoFlat-Primary-Yellow-Theme/src/main/resources/defaults.css
index 3da6fb5..878aeb0 100644
--- 
a/frameworks/themes/Jewel-Light-NoFlat-Primary-Yellow-Theme/src/main/resources/defaults.css
+++ 
b/frameworks/themes/Jewel-Light-NoFlat-Primary-Yellow-Theme/src/main/resources/defaults.css
@@ -220,23 +220,39 @@ j|Card {
   width: 22px;
   height: 22px;
   line-height: 22px;
+  opacity: 0;
+}
+.jewel.checkbox input + span::before {
+  content: " ";
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  width: 22px;
+  height: 22px;
   background: linear-gradient(white, #f3f3f3);
   border: 1px solid #b3b3b3;
   border-radius: 3px;
 }
-.jewel.checkbox input:checked, .jewel.checkbox input:checked:active {
-  background: url("data:image/svg+xml,<svg viewBox='0 0 16 13' version='1.1' 
xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g 
transform='translate(760, 285)'><polygon fill='%23E2D70B' points='3 13 9 18 19 
7 16 5 9 13 6 10'></polygon></g></g></svg>"), #f8f8f8;
-  background-repeat: no-repeat;
-  background-size: 90%;
-  background-position: center;
-  background-attachment: fixed;
+.jewel.checkbox input + span::after {
+  content: " ";
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  width: 22px;
+  height: 22px;
+  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' 
xmlns='http://www.w3.org/2000/svg'%3E%3Cg%3E%3Cg%3E%3Cg%3E%3Crect x='0' y='0' 
width='22' height='22' fill-opacity='0'/%3E%3Cpolygon fill='%23E2D70B' 
points='3.51452637 12.5264893 9 17.9205322 18.9342041 8.02331543 16.0217285 
4.96948242 9 12.0758057 6.47851562 
9.51098633'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+  border: 1px solid transparent;
+  opacity: 0;
+  transition: all 0.3s ease;
+  transform: scale(0);
+}
+.jewel.checkbox input:checked + span::after {
+  opacity: 1;
+  transform: scale(1);
 }
-.jewel.checkbox input:checked:checked:focus, .jewel.checkbox 
input:checked:checked:active:focus, .jewel.checkbox 
input:checked:active:checked:focus, .jewel.checkbox 
input:checked:active:checked:active:focus {
-  background: url("data:image/svg+xml,<svg viewBox='0 0 16 13' version='1.1' 
xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g 
transform='translate(760, 285)'><polygon fill='%23E2D70B' points='3 13 9 18 19 
7 16 5 9 13 6 10'></polygon></g></g></svg>"), #f8f174;
-  background-repeat: no-repeat;
-  background-size: 90%;
-  background-position: center;
-  background-attachment: fixed;
+.jewel.checkbox input:checked:active + span::after {
+  opacity: 1;
+  transform: scale(1);
 }
 .jewel.checkbox input:focus {
   outline: none;
@@ -251,17 +267,14 @@ j|Card {
   cursor: unset;
   color: silver;
 }
+.jewel.checkbox input[disabled] + span::after {
+  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' 
xmlns='http://www.w3.org/2000/svg'%3E%3Cg%3E%3Cg%3E%3Cg%3E%3Crect x='0' y='0' 
width='22' height='22' fill-opacity='0'/%3E%3Cpolygon fill='%23cccccc' 
points='3.51452637 12.5264893 9 17.9205322 18.9342041 8.02331543 16.0217285 
4.96948242 9 12.0758057 6.47851562 
9.51098633'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
 .jewel.checkbox input[disabled]:checked {
-  background: url("data:image/svg+xml,<svg viewBox='0 0 16 13' version='1.1' 
xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g 
transform='translate(760, 285)'><polygon fill='%23cccccc' points='3 13 9 18 19 
7 16 5 9 13 6 10'></polygon></g></g></svg>"), #f3f3f3;
-  background-size: 90%;
-  background-position: center;
-  background-repeat: no-repeat;
-  background-attachment: fixed;
   border: 1px solid #d9d9d9;
 }
 .jewel.checkbox span {
   cursor: pointer;
-  position: relative;
   margin: 0;
   padding-left: 6px;
   vertical-align: top;
@@ -403,8 +416,6 @@ j|Card {
   color: transparent;
 }
 .jewel.slider input::-ms-fill-lower {
-  position: relative;
-  flex: 0;
   padding: 0;
   background: linear-gradient(#f1e50c, #d3c90a);
   border: 1px solid #999207;
@@ -412,8 +423,6 @@ j|Card {
   border-radius: 3px;
 }
 .jewel.slider input::-ms-fill-upper {
-  position: relative;
-  flex: 0;
   padding: 0;
   background: linear-gradient(white, #e6e6e6);
   border: 1px solid #b3b3b3;
@@ -433,11 +442,6 @@ j|Card {
   border-radius: 50%;
 }
 .jewel.slider input::-ms-thumb {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  -o-appearance: none;
-  -ms-appearance: none;
-  appearance: none;
   width: 18px;
   height: 18px;
   background: linear-gradient(#f1e50c, #d3c90a);
@@ -449,7 +453,7 @@ j|Card {
   transform: scale(1.4);
 }
 .jewel.slider input:active::-ms-thumb {
-  transform: scale(1.4);
+  transform: scale(0.8);
 }
 .jewel.slider input:focus {
   outline: none;

-- 
To stop receiving notification emails like this one, please contact
carlosrov...@apache.org.