Styled the perfil toggle button properly

src/app/pages/events/events.page.html

@@ -2,8 +2,8 @@
   <ion-toolbar>
   <!-- customized TOGGLE button -->
   <label class="switch"><input type="checkbox" id="togBtn">
-    <div class="slider round" (click)="showAlert()">
-    <!--ADDED HTML --><span class="mdgpr">MDGPR</span><span class="pr">PR</span><!--END-->
+    <div class="slider round">
+    <!--ADDED HTML --><span (click)="showAlert()" class="mdgpr">MDGPR</span><span class="pr">PR</span><!--END-->
   </div>
 </label>
 </ion-toolbar>

src/app/pages/events/events.page.scss

@@ -146,7 +146,7 @@
       color: #666666;
       font-size: 20px;
     }
-    
+
     .switch {
       position: relative;
       display: inline-block;
@@ -165,7 +165,9 @@
       left: 0;
       right: 0;
       bottom: 0;
-      background-color: #e16817;
+      background-color: #ffffff;
+      border: 1px solid #e16817;
+      color: #e16817;
       -webkit-transition: .4s;
       transition: .4s;
     }
@@ -173,18 +175,17 @@
     .slider:before {
       position: absolute;
       content: "";
-      height: 26px;
-      width: 26px;
+      height: 23.5px; /* 26px;  */
+      width: 24px;
       left: 4px;
       bottom: 4px;
       background-color: #ffffff;
       -webkit-transition: .4s;
       transition: .4s;
     }
-    
+
     input:checked + .slider {
       background-color: #e16817;
-      /* border: 1px solid #ffffff; */
     }
     
     input:focus + .slider {
@@ -203,26 +204,28 @@
       display: none;
       text-align: left !important;
       left: 25px !important; 
+      color: white;
     }
     .mdgpr
     {
 
-      left: 60px !important; 
+      left: 58px !important;
+      color: #e16817;
     }
     
     .pr, .mdgpr
     {
-      color: white;
       position: absolute;
       transform: translate(-50%,-50%);
       top: 50%;
       left: 50%;
-      font-size: 10px;
+      font-size: 12px;
       font-family: Verdana, sans-serif;
     }
     
     input:checked+ .slider .pr
     {display: block;
+      background:#e16817;
     }
     
     input:checked + .slider .mdgpr
@@ -239,4 +242,5 @@
     
     .slider.round:before {
       border-radius: 50%;
+      border: 1px solid #e16817;
     }