Update main.scss

css/main.scss

@@ -70,11 +70,11 @@
   --head-nav-text-color: #d56f2a;
   --menu-color: #d56f2a;
   --license-color: #666666;
-  --footer-bg-color: #E9E9E9;
+  --footer-bg-color: #e9e9e9;
   --filter-color: none;
-  --nav-bg-color: #E9E9E9;
+  --nav-bg-color: #e9e9e9;
   --nav-bg-hover-color: #d56f2a;
-  --nav-text-color: #0F0F0F;
+  --nav-text-color: #0f0f0f;
 }
 
 body {
@@ -177,6 +177,79 @@ img.noColorChange {
   filter: none;
 }
 
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 56px;
+  height: 30px;
+}
+
+.switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #42464d;
+  -webkit-transition: 0.4s;
+  transition: 0.4s;
+}
+
+.slider:before {
+  position: absolute;
+  content: "";
+  height: 22px;
+  width: 22px;
+  left: 4px;
+  bottom: 4px;
+  background-color: white;
+  -webkit-transition: 0.4s;
+  transition: 0.4s;
+}
+
+input:checked + .slider {
+  background-color: #d56f2a;
+}
+
+input:focus + .slider {
+  box-shadow: 0 0 1px #d56f2a;
+}
+
+input:checked + .slider:before {
+  -webkit-transform: translateX(26px);
+  -ms-transform: translateX(26px);
+  transform: translateX(26px);
+}
+
+/* Rounded sliders */
+.slider.round {
+  border-radius: 34px;
+}
+
+.slider.round:before {
+  border-radius: 50%;
+}
+
+table {
+  margin-top: 34px;
+}
+
+td {
+  height: 50px;
+  vertical-align: middle;
+}
+
+a.color-grey {
+  color: var(--license-color);
+}
+
 #header .action-container {
   &--left {
     left: 25px;