fix: modify css code to check the deployment env

css/style.css

@@ -189,18 +189,24 @@ input[type="range"] {
   
   /* Styles for the slider thumb for Firefox */
   input[type="range"]::-moz-range-thumb {
-    width: 20px; /* Width of the thumb */
-    height: 28px; /* Height of the thumb */
-    border-radius: 5px; /* Rounded corners of the thumb */
-    background: #4CAF50; /* Background color of the thumb */
+    appearance: none;
+    height: 24px; /* Height of the thumb */
+    width: 24px; /* Width of the thumb */
+    border-radius: 50%; /* Rounded corners of the thumb */
+    background: #f3b968; /* Background color of the thumb */
+    margin-top: -6px; /* Ensures the thumb aligns with the track */
+    box-shadow: 0px -2px 5px #eb6584 inset, 0px 2px 5px #b7456e;
   }
   
   /* Styles for the slider thumb for IE */
   input[type="range"]::-ms-thumb {
-    width: 20px; /* Width of the thumb */
-    height: 28px; /* Height of the thumb */
-    border-radius: 5px; /* Rounded corners of the thumb */
-    background: #4CAF50; /* Background color of the thumb */
+    appearance: none;
+    height: 24px; /* Height of the thumb */
+    width: 24px; /* Width of the thumb */
+    border-radius: 50%; /* Rounded corners of the thumb */
+    background: #f3b968; /* Background color of the thumb */
+    margin-top: -6px; /* Ensures the thumb aligns with the track */
+    box-shadow: 0px -2px 5px #eb6584 inset, 0px 2px 5px #b7456e;
   }
   
   /* Styles for the track (progress) for Webkit browsers */
@@ -215,17 +221,18 @@ input[type="range"] {
   /* Styles for the track for Firefox */
   input[type="range"]::-moz-range-track {
     width: 100%;
-    height: 30px; /* Height of the track */
+    height: 10px; /* Height of the track */
     background: #eee;
+    box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.75) inset;
     border-radius: 10px; /* Rounded corners of the track */
   }
   
   /* Styles for the track for IE */
   input[type="range"]::-ms-track {
     width: 100%;
-    height: 30px; /* Height of the track */
+    height: 10px; /* Height of the track */
     background: #eee;
+    box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.75) inset;
     border-radius: 10px; /* Rounded corners of the track */
-    border: none; /* IE may require removing the border */
   }