diff --git a/src/app/pages/gabinete-digital/expediente/expediente-detail/expediente-detail.page.ts b/src/app/pages/gabinete-digital/expediente/expediente-detail/expediente-detail.page.ts
index 0fbbb6da2..03ada44f6 100644
--- a/src/app/pages/gabinete-digital/expediente/expediente-detail/expediente-detail.page.ts
+++ b/src/app/pages/gabinete-digital/expediente/expediente-detail/expediente-detail.page.ts
@@ -108,7 +108,7 @@ export class ExpedienteDetailPage implements OnInit {
         taskAction: taskAction,
         task: task,
       },
-      cssClass: 'expedient-task-modal',
+      cssClass: 'expedient-task-modal modal-desktop',
       backdropDismiss: false
     });
     await modal.present();
@@ -128,7 +128,7 @@ export class ExpedienteDetailPage implements OnInit {
       componentProps: {
         task: task,
       },
-      cssClass: 'book-meeting-modal',
+      cssClass: 'book-meeting-modal modal-desktop',
       backdropDismiss: false
     });
     await modal.present();
@@ -144,7 +144,7 @@ export class ExpedienteDetailPage implements OnInit {
         eventId: eventId,
         profile: this.profile,
       },
-      cssClass: 'modal',
+      cssClass: 'modal modal-desktop',
       backdropDismiss: false
     });
     await modal.present();
diff --git a/src/style/main.scss b/src/style/main.scss
index 1c504c03a..566e8e627 100644
--- a/src/style/main.scss
+++ b/src/style/main.scss
@@ -134,6 +134,57 @@
     .align-md-content-space-between{ align-content: space-between !important;}
     .align-md-content-space-around{ align-content: space-around !important;}
     .align-md-content-stretch{ align-content: stretch !important;}
+
+    @for $i from 0 through 50 {
+        .font-md-#{$i} {
+            font-size: #{$i}px ;
+        }
+    }
+    @for $i from 0 through 10 {
+
+        $size: $i * 5;
+        
+        $properties:
+          "margin" "m",
+          "padding" "p";
+      
+        @each $property, $short in $properties {
+          // all directions
+          .#{$short}-md-a-#{$size} {
+            #{$property}-left: #{$size}px !important; 
+            #{$property}-right: #{$size}px !important;
+            #{$property}-top: #{$size}px !important; 
+            #{$property}-bottom: #{$size}px !important;
+          }
+          // top
+          .#{$short}-md-t-#{$size} {
+            #{$property}-top: #{$size}px !important
+          }
+          // bottom
+          .#{$short}-md-b-#{$size} {
+            #{$property}-bottom: #{$size}px !important
+          }
+          // left
+          .#{$short}-md-l-#{$size} {
+            #{$property}-left: #{$size}px!important
+          }
+          // right
+          .#{$short}-md-r-#{$size} {
+            #{$property}-right: #{$size}px!important
+          }
+          // left and right
+          .#{$short}-md-x-#{$size} {
+            #{$property}-left: #{$size}px!important;
+            #{$property}-right: #{$size}px!important;
+          }
+          // top and bottom
+          .#{$short}-md-y-#{$size} {
+            #{$property}-top: #{$size}px !important;
+            #{$property}-bottom: #{$size}px !important;
+          }
+      
+        }
+    }
 }
 
 @media only screen and (min-width: 1366px) {
@@ -205,6 +256,57 @@
     .align-lg-content-space-between{ align-content: space-between !important;}
     .align-lg-content-space-around{ align-content: space-around !important;}
     .align-lg-content-stretch{ align-content: stretch !important;}
+
+    @for $i from 0 through 50 {
+        .font-lg-#{$i} {
+            font-size: #{$i}px ;
+        }
+    }
+    @for $i from 0 through 10 {
+
+        $size: $i * 5;
+        
+        $properties:
+          "margin" "m",
+          "padding" "p";
+      
+        @each $property, $short in $properties {
+          // all directions
+          .#{$short}-lg-a-#{$size} {
+            #{$property}-left: #{$size}px !important; 
+            #{$property}-right: #{$size}px !important;
+            #{$property}-top: #{$size}px !important; 
+            #{$property}-bottom: #{$size}px !important;
+          }
+          // top
+          .#{$short}-lg-t-#{$size} {
+            #{$property}-top: #{$size}px !important
+          }
+          // bottom
+          .#{$short}-lg-b-#{$size} {
+            #{$property}-bottom: #{$size}px !important
+          }
+          // left
+          .#{$short}-lg-l-#{$size} {
+            #{$property}-left: #{$size}px!important
+          }
+          // right
+          .#{$short}-lg-r-#{$size} {
+            #{$property}-right: #{$size}px!important
+          }
+          // left and right
+          .#{$short}-lg-x-#{$size} {
+            #{$property}-left: #{$size}px!important;
+            #{$property}-right: #{$size}px!important;
+          }
+          // top and bottom
+          .#{$short}-lg-y-#{$size} {
+            #{$property}-top: #{$size}px !important;
+            #{$property}-bottom: #{$size}px !important;
+          }
+      
+        }
+    }
 }
 
 .m-l-auto {margin-left: auto;}
@@ -274,11 +376,8 @@
   }
 
 
-  @for $i from 0 through 50 {
+@for $i from 0 through 50 {
     .font-#{$i} {
         font-size: #{$i}px ;
     }
-  }
-
-
-.text-center{text-align: center;}
\ No newline at end of file
+}
\ No newline at end of file