fix: modify css code to check the deployment env

css/style.css

@@ -171,8 +171,8 @@ input[type="range"] {
 
   }
   
-  /* Styles for the slider thumb for Webkit browsers like Chrome and Safari */
-::-webkit-slider-thumb {
+/* Styles for the slider thumb for Webkit browsers like Chrome and Safari */
+input[type="range"]::-webkit-slider-thumb {
     -webkit-appearance: none !important; /* Overrides default webkit styles */
     appearance: none !important;
     height: 24px !important; /* Height of the thumb */
@@ -183,52 +183,52 @@ input[type="range"] {
     box-shadow: 0px -2px 5px #eb6584 inset, 0px 2px 5px #b7456e !important;
   }
   
-  /* Styles for the slider thumb for Firefox */
-::-moz-range-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 Firefox */
+input[type="range"]::-moz-range-thumb {
+    appearance: none !important;
+    height: 24px !important; /* Height of the thumb */
+    width: 24px !important; /* Width of the thumb */
+    border-radius: 50% !important; /* Rounded corners of the thumb */
+    background: #f3b968 !important; /* Background color of the thumb */
+    margin-top: -6px !important; /* Ensures the thumb aligns with the track */
+    box-shadow: 0px -2px 5px #eb6584 inset, 0px 2px 5px #b7456e !important;
   }
   
-  /* Styles for the slider thumb for IE */
-::-ms-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 {
+    appearance: none !important;
+    height: 24px !important; /* Height of the thumb */
+    width: 24px !important; /* Width of the thumb */
+    border-radius: 50% !important; /* Rounded corners of the thumb */
+    background: #f3b968 !important; /* Background color of the thumb */
+    margin-top: -6px !important; /* Ensures the thumb aligns with the track */
+    box-shadow: 0px -2px 5px #eb6584 inset, 0px 2px 5px #b7456e !important;
   }
   
-  /* Styles for the track (progress) for Webkit browsers */
-::-webkit-slider-runnable-track {
-    width: 100%;
-    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 (progress) for Webkit browsers */
+input[type="range"]::-webkit-slider-runnable-track {
+    width: 100% !important;
+    height: 10px !important; /* Height of the track */
+    background: #eee !important;
+    box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.75) inset !important;
+    border-radius: 10px !important; /* Rounded corners of the track */
   }
   
-  /* Styles for the track for Firefox */
-::-moz-range-track {
-    width: 100%;
-    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 Firefox */
+input[type="range"]::-moz-range-track {
+    width: 100% !important;
+    height: 10px !important; /* Height of the track */
+    background: #eee !important;
+    box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.75) inset !important;
+    border-radius: 10px !important; /* Rounded corners of the track */
   }
   
-  /* Styles for the track for IE */
-::-ms-track {
-    width: 100%;
-    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% !important;
+    height: 10px !important; /* Height of the track */
+    background: #eee !important;
+    box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.75) inset !important;
+    border-radius: 10px !important; /* Rounded corners of the track */
   }