improve scroll

src/app/pages/agenda/agenda.page.html

@@ -213,7 +213,7 @@
               </div>
             </div> -->
 
-            <div  class="ss-timeline timeline-mobile flex-grow-1  d-md-none text-black height-100 overflow-y-auto" >
+            <div  class="ss-timeline hide-scroll timeline-mobile flex-grow-1  d-md-none text-black height-100 overflow-y-auto" >
               <div *ngFor="let events of TimelineMDList | keyvalue;" >
                 
                 <div >
@@ -254,7 +254,7 @@
               </div>
             </div>
 
-            <div  class="fs-timeline flex-grow-1 d-none d-md-block  d-md-block text-black  pr-20 height-100 mr-md-20 overflow-y-auto" *ngIf="loggeduser.Profile == 'MDGPR'">
+            <div  class="fs-timeline hide-scroll flex-grow-1 d-none d-md-block  d-md-block text-black  pr-20 height-100 mr-md-20 overflow-y-auto" *ngIf="loggeduser.Profile == 'MDGPR'">
               <div *ngFor="let events of TimelineMDList | keyvalue;" >
                 
                 <div >
@@ -292,7 +292,7 @@
               </div>
             </div>
 
-            <div  class="sd-timeline flex-grow-1 d-none d-md-block timeline-md text-black pr-20 height-100 overflow-y-auto" >
+            <div  class="sd-timeline hide-scroll flex-grow-1 d-none d-md-block timeline-md text-black pr-20 height-100 overflow-y-auto" >
               <div *ngFor="let events of TimelinePRList | keyvalue;">
                 
                 <div >

src/app/pages/agenda/agenda.page.scss

@@ -698,7 +698,4 @@ app-approve-event{
   display: flex;
   align-items: center;
   height: 100%;
-}
-
-
-
+}

src/global.scss

@@ -747,4 +747,97 @@ ion-icon{
         height: fit-content;
         height: 300px;
     }  
-}
+}
+
+
+
+
+
+
+@media only screen and (min-width: 500px) { 
+
+    ::-webkit-scrollbar {
+      width: 5px;
+    }
+    
+    /* Track */
+    ::-webkit-scrollbar-track {
+      background: #f1f1f1;
+      border-radius: 5px;
+      -webkit-border-radius: 5px;
+      -moz-border-radius: 5px;
+      -ms-border-radius: 5px;
+      -o-border-radius: 5px;
+    }
+    
+    /* Handle */
+    ::-webkit-scrollbar-thumb {
+      background: #888;
+      border-radius: 5px;
+      -webkit-border-radius: 5px;
+      -moz-border-radius: 5px;
+      -ms-border-radius: 5px;
+      -o-border-radius: 5px;
+    }
+    
+    /* Handle on hover */
+    ::-webkit-scrollbar-thumb:hover {
+      background: rgb(92, 92, 92);
+    }
+}
+
+
+
+@media only screen and (min-width: 800px) { 
+
+    ::-webkit-scrollbar {
+      width: 10px;
+    }
+    
+    /* Track */
+    ::-webkit-scrollbar-track {
+      background: #f1f1f1;
+      border-radius: 5px;
+      -webkit-border-radius: 5px;
+      -moz-border-radius: 5px;
+      -ms-border-radius: 5px;
+      -o-border-radius: 5px;
+    }
+    
+    /* Handle */
+    ::-webkit-scrollbar-thumb {
+      background: #888;
+      border-radius: 5px;
+      -webkit-border-radius: 5px;
+      -moz-border-radius: 5px;
+      -ms-border-radius: 5px;
+      -o-border-radius: 5px;
+    }
+    
+    /* Handle on hover */
+    ::-webkit-scrollbar-thumb:hover {
+      background: rgb(92, 92, 92);
+    }
+}
+
+
+
+    
+.hide-scroll::-webkit-scrollbar {
+    display: none !important;
+}
+    
+    /* Track */
+.hide-scroll::-webkit-scrollbar-track {
+    display: none !important;
+}
+
+/* Handle */
+.hide-scroll::-webkit-scrollbar-thumb {
+    display: none !important;
+}
+
+/* Handle on hover */
+.hide-scroll::-webkit-scrollbar-thumb:hover {
+    display: none !important;
+}

src/style/main.scss

@@ -289,9 +289,9 @@
   .height-lg-unset{ height: unset !important;}
 
   @for $i from 0 through 50 {
-      .font-lg-#{$i} {
-          font-size: #{$i}px ;
-      }
+    .font-lg-#{$i} {
+        font-size: #{$i}px ;
+    }
   }
   @for $i from 0 through 10 {