Replace checkboxes with sliders to conform the style on all platforms

public/styles/deferred-styles.css

@@ -268,6 +268,56 @@ x-peer[drop] x-icon {
     transform: scale(1.1);
 }
 
+/* Checkboxes as slider */
+
+.switch {
+    display: inline-block;
+    height: 20px;
+    position: relative;
+    width: 30px;
+}
+
+.switch input {
+    display:none;
+}
+
+.slider {
+    background-color: rgba(128, 128, 128, 0.5);
+    cursor: pointer;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    left: 0;
+    position: absolute;
+    transition: .4s;
+}
+
+.slider:before {
+    background-color: #fff;
+    content: "";
+    position: absolute;
+    top: 2px;
+    left: 2px;
+    width: 16px;
+    height: 16px;
+    transition: .4s;
+}
+
+input:checked + .slider {
+    background-color: var(--primary-color);
+}
+
+input:checked + .slider:before {
+    transform: translateX(10px);
+}
+
+.slider.round {
+    border-radius: 20px;
+}
+
+.slider.round:before {
+    border-radius: 50%;
+}
 
 /* Dialog */
 
@@ -466,26 +516,14 @@ x-dialog hr {
     border-bottom: solid 2px rgba(128, 128, 128, 0.5);
     opacity: 1;
 }
-.paired-device span {
-    width: 100%;
-}
 
 .paired-device > .button-wrapper {
     display: flex;
     height: 36px;
-    justify-content: space-between;
-    flex-direction: row;
-    align-items: center;
     width: 100%;
 }
 
-.paired-device > .button-wrapper > label,
-.paired-device > .button-wrapper > button {
-    display: flex;
-    align-items: center;
-    text-align: center;
-    white-space: nowrap;
-    justify-content: center;
+.paired-device > .button-wrapper > * {
     width: 50%;
     padding-left: 6px;
     padding-right: 6px;

public/styles/styles-main.css

@@ -31,9 +31,26 @@ html {
 }
 
 .p1 {
+    padding: 5px;
+}
+
+.p2 {
     padding: 10px;
 }
 
+.pb0 {
+    padding-bottom: 0;
+}
+
+.mx1 {
+    margin-left: 5px;
+    margin-right: 5px;
+}
+
+.m1 {
+    margin: 10px;
+}
+
 .cursive {
     font-style: italic;
 }
@@ -43,6 +60,18 @@ html {
     flex-direction: row-reverse;
 }
 
+.flex {
+    display: flex;
+}
+
+.align-center {
+    align-items: center;
+}
+
+.space-evenly {
+    justify-content: space-evenly;
+}
+
 .space-between {
     justify-content: space-between;
 }