diff --git a/src/app/modals/add-note/add-note.page.scss b/src/app/modals/add-note/add-note.page.scss
index e16313d48..243d46be6 100644
--- a/src/app/modals/add-note/add-note.page.scss
+++ b/src/app/modals/add-note/add-note.page.scss
@@ -1,3 +1,5 @@
+@import '~src/function.scss';
+
 .header-content{
   width: 100% !important;
   padding: 30px 20px 0 20px !important;
@@ -7,7 +9,7 @@
 
 .header-title{
 font-family: Roboto;
-font-size: 25px;
+font-size: rem(25);
 padding: 0;
 color:#000;
 float: left;
@@ -30,11 +32,11 @@ float: left;
     margin: 0px auto;
   }
   .ion-icon-class{
-    width: 45px;
-    height: 45px;
+    width: rem(45);
+    height: rem(45);
     float: left;
     padding: 10px;
-    font-size: 25px;
+    font-size: rem(25);
   }
   ion-select{
     padding-left: 5px;
@@ -42,7 +44,7 @@ float: left;
   }
   .ion-input-class{
     width: calc(100% - 45px);
-    height: 45px;
+    height: rem(45);
     border: 1px solid #ebebeb;
     border-radius: 5px;
     padding-left: 5px;
@@ -56,17 +58,17 @@ float: left;
 
   }
   .add-people{
-    width: 45px;
+    width: rem(45);
     float: right;
     overflow: auto;
-    font-size: 25px;
+    font-size: rem(25);
   }
   .list-people-title{
-    /* font-size: 13px; */
+    /* font-size: rem(13); */
     color: #797979;
   }
   .attach-document{
-    font-size: 15px;
+    font-size: rem(15);
     color: var(--title-text-color);
     margin: 5px 5px 5px 10px;
     padding: 5px;
@@ -74,23 +76,23 @@ float: left;
   }
   .attach-icon{
     width: 37px;
-    font-size: 35px;
+    font-size: rem(35);
     float: left;
   }
   .attach-title-item{
     width: 100%;
-    font-size: 15px;
+    font-size: rem(15);
     color:#0d89d1;
   }
   /* SPAN */
   .span-left{
     float: left;
-    font-size: 15x;
+    font-size: rem(15);
   }
   .span-right{
   text-align: right;
   float: right;
-  font-size: 13px;
+  font-size: rem(13);
   }
 
 .container-footer{
@@ -98,16 +100,16 @@ float: left;
     overflow: auto;
 }
 .button-cancel {
-    width: 170px;
-    height: 44px;
+    width: rem(170);
+    height: rem(44);
     border-radius: 22.5px;
     --background: #e0e9ee;
     --color: #061b52;
     margin:10px;
   }
   .button-save {
-    width: 170px;
-    height: 44px;
+    width: rem(170);
+    height: rem(44);
     border-radius: 22.5px;
     --background: #42b9fe;
     --color:#ffffff;
@@ -125,7 +127,7 @@ float: left;
 /* Error Messages */
 .error{
   color:red;
-  font-size: 12px;
+  font-size: rem(12);
   font-weight: bold;
   padding-bottom: 20px;
 }
diff --git a/src/app/modals/chat-options-features/chat-options-features.page.scss b/src/app/modals/chat-options-features/chat-options-features.page.scss
index 50f7690d2..52589ea7c 100644
--- a/src/app/modals/chat-options-features/chat-options-features.page.scss
+++ b/src/app/modals/chat-options-features/chat-options-features.page.scss
@@ -1,3 +1,5 @@
+@import '~src/function.scss';
+
 .container{
   --padding-top:20px !important;
  --padding-bottom:20px !important;
@@ -10,7 +12,7 @@
   .arrow-right-icon{
       width: 37px;
       float: right;
-      font-size: 35px;
+      font-size: rem(35);
       overflow: hidden;
   }
 }
diff --git a/src/app/modals/create-process/create-process.page.scss b/src/app/modals/create-process/create-process.page.scss
index 9b2d13eb1..a1ec48398 100644
--- a/src/app/modals/create-process/create-process.page.scss
+++ b/src/app/modals/create-process/create-process.page.scss
@@ -1,3 +1,5 @@
+@import '~src/function.scss';
+
 .content{
     padding: 30px 20px 0 20px !important;
     margin: 0;
@@ -5,7 +7,7 @@
 
     .title{
       font-family: Roboto;
-      font-size: 25px;
+      font-size: rem(25);
       font-weight: normal;
       font-stretch: normal;
       font-style: normal;
@@ -15,11 +17,11 @@
       //margin: 8px 0 8px 0px;
     }
     .container-div{
-      margin-bottom: 15px;
+      margin-bottom: rem(15);
     }
     .ion-item-container{
       //width: 360px;
-      margin: 15px auto;
+      margin: rem(15) auto;
       border: 1px solid #ebebeb;
       border-radius: 5px;
       padding-left: 5px;
@@ -33,11 +35,11 @@
       margin: 0px auto;
     }
     .ion-icon-class{
-      width: 45px;
-      height: 45px;
+      width: rem(45);
+      height: rem(45);
       float: left;
       padding: 10px;
-      font-size: 25px;
+      font-size: rem(25);
     }
     ion-select{
       padding-left: 5px;
@@ -63,52 +65,52 @@
 
     }
     .add-people{
-      width: 45px;
+      width: rem(45);
       float: right;
       overflow: auto;
-      font-size: 25px;
-      height: 45px;
+      font-size: rem(25);
+      height: rem(45);
       display: flex;
     }
     .list-people-title{
-      /* font-size: 13px; */
+      /* font-size: rem(13); */
       color: #a3a3a3;
     }
     .attach-document{
-      font-size: 15px;
+      font-size: rem(15);
       color: var(--title-text-color);
     }
 
     .attach-title-item{
       width: 100%;
-      font-size: 15px;
+      font-size: rem(15);
       color:#0d89d1;
     }
     /* SPAN */
     .span-left{
       float: left;
-      font-size: 15x;
+      font-size: rem(15);
     }
     .span-right{
     text-align: right;
     float: right;
-    font-size: 13px;
+    font-size: rem(13);
     }
   }
   .container-footer{
         margin:0 auto;
         overflow: auto;
     .button-cancel {
-        width: 170px;
-        height: 44px;
+        width: rem(170);
+        height: rem(44);
         border-radius: 22.5px;
         --background: #e0e9ee;
         --color: #061b52;
         margin:10px;
       }
     .button-save {
-      width: 170px;
-      height: 44px;
+      width: rem(170);
+      height: rem(44);
       border-radius: 22.5px;
       --background: #42b9fe;
       --color:#ffffff;
@@ -157,7 +159,7 @@
   align-items: center;
   padding: 0px 5px;
   color: white;
-  font-size: 9pt;
+  font-size: rem(12);
   font-weight: 500;
   height: 19px;
   -webkit-border-radius: 18px;
@@ -169,24 +171,25 @@
 
 
 .attach-icon{
+
   width: 37px;
-  font-size: 35px;
+  font-size: rem(35);
   float: left;
 }
 .attach-title-item{
   width: 100%;
-  font-size: 15px;
+  font-size: rem(15);
   color:#0d89d1;
 }
 /* SPAN */
 .span-left{
   float: left;
-  font-size: 15x;
+  font-size: rem(15);
 }
 .span-right{
 text-align: right;
 float: right;
-font-size: 13px;
+font-size: rem(13);
 }
 .icon-time{
   color: #797979b0;
diff --git a/src/app/modals/dar-parecer/dar-parecer.page.scss b/src/app/modals/dar-parecer/dar-parecer.page.scss
index c7b38786d..b3a137267 100644
--- a/src/app/modals/dar-parecer/dar-parecer.page.scss
+++ b/src/app/modals/dar-parecer/dar-parecer.page.scss
@@ -1,3 +1,5 @@
+@import '~src/function.scss';
+
 .content-100{
     padding: 0px 20px 0 20px !important;
     margin: 0;
@@ -11,14 +13,14 @@
 
     .header-title{
       font-family: Roboto;
-      font-size: 25px;
+      font-size: rem(25);
       padding: 0;
       color:#000;
       float: left;
     }
 
     .ion-item-container{
-      margin: 15px auto;
+      margin: rem(15) auto;
       border: 1px solid #ebebeb;
       border-radius: 5px;
       padding-left: 10px;
@@ -38,11 +40,11 @@
       margin: 0px auto;
     }
     .ion-icon-class{
-      width: 45px;
-      height: 45px;
+      width: rem(45);
+      height: rem(45);
       float: left;
       padding: 10px;
-      font-size: 25px;
+      font-size: rem(25);
     }
     ion-select{
       padding-left: 5px;
@@ -50,7 +52,7 @@
     }
     .ion-input-class{
       width: calc(100% - 45px);
-      height: 45px;
+      height: rem(45);
       border: 1px solid #ebebeb;
       border-radius: 5px;
       padding-left: 5px;
@@ -68,19 +70,19 @@
 
     }
     .add-people{
-      width: 45px;
+      width: rem(45);
       float: right;
       overflow: auto;
-      font-size: 25px;
-      height: 45px;
+      font-size: rem(25);
+      height: rem(45);
       display: flex;
     }
     .list-people-title{
-      /* font-size: 13px; */
+      /* font-size: rem(13); */
       color: #797979;
     }
     .attach-document{
-      font-size: 15px;
+      font-size: rem(15);
       color: var(--title-text-color);
       margin: 5px 5px 5px 10px;
       padding: 5px;
@@ -88,23 +90,23 @@
     }
     .attach-icon{
       width: 37px;
-      font-size: 35px;
+      font-size: rem(35);
       float: left;
     }
     .attach-title-item{
       width: 100%;
-      font-size: 15px;
+      font-size: rem(15);
       color:#0d89d1;
     }
     /* SPAN */
     .span-left{
       float: left;
-      font-size: 15x;
+      font-size: rem(15);
     }
     .span-right{
     text-align: right;
     float: right;
-    font-size: 13px;
+    font-size: rem(13);
     }
 
   .container-footer{
@@ -112,16 +114,16 @@
       overflow: auto;
   }
   .button-cancel {
-      width: 170px;
-      height: 44px;
+      width: rem(170);
+      height: rem(44);
       border-radius: 22.5px;
       --background: #e0e9ee;
       --color: #061b52;
       margin:10px;
     }
     .button-save {
-      width: 170px;
-      height: 44px;
+      width: rem(170);
+      height: rem(44);
       border-radius: 22.5px;
       --background: #42b9fe;
       --color:#ffffff;
@@ -139,7 +141,7 @@
   /* Error Messages */
   .error{
     color:red;
-    font-size: 12px;
+    font-size: rem(12);
     font-weight: bold;
     padding-bottom: 20px;
   }
diff --git a/src/app/modals/delegar/delegar.page.scss b/src/app/modals/delegar/delegar.page.scss
index 50e91d6aa..80ffc60a8 100644
--- a/src/app/modals/delegar/delegar.page.scss
+++ b/src/app/modals/delegar/delegar.page.scss
@@ -1,3 +1,5 @@
+@import '~src/function.scss';
+
 .content{
     padding: 30px 20px 0 20px !important;
     margin: 0;
@@ -9,14 +11,14 @@
     
     .header-title{
       font-family: Roboto;
-      font-size: 25px;
+      font-size: rem(25);
       padding: 0;
       color:#000;
       float: left;
     }
   
     .ion-item-container{
-      margin: 15px auto;
+      margin: rem(15) auto;
       border: 1px solid #ebebeb;
       border-radius: 5px;
       padding-left: 10px;
@@ -35,11 +37,11 @@
       margin: 0px auto;
     }
     .ion-icon-class{
-      width: 45px;
-      height: 45px;
+      width: rem(45);
+      height: rem(45);
       float: left;
       padding: 10px;
-      font-size: 25px;
+      font-size: rem(25);
     }
     ion-select{
       padding-left: 5px;
@@ -47,7 +49,7 @@
     }
     .ion-input-class{
       width: calc(100% - 45px);
-      height: 45px;
+      height: rem(45);
       border: 1px solid #ebebeb;
       border-radius: 5px;
       padding-left: 5px;
@@ -65,19 +67,19 @@
   
     }
     .add-people{
-      width: 45px;
+      width: rem(45);
       float: right;
       overflow: auto;
-      font-size: 25px;
-      height: 45px;
+      font-size: rem(25);
+      height: rem(45);
       display: flex;
     }
     .list-people-title{
-      /* font-size: 13px; */
+      /* font-size: rem(13); */
       color: #797979;
     }
     .attach-document{
-      font-size: 15px;
+      font-size: rem(15);
       color: var(--title-text-color);
       margin: 5px 5px 5px 10px;
       padding: 5px;
@@ -85,23 +87,23 @@
     }
     .attach-icon{
       width: 37px;
-      font-size: 35px;
+      font-size: rem(35);
       float: left;
     }
     .attach-title-item{
       width: 100%;
-      font-size: 15px;
+      font-size: rem(15);
       color:#0d89d1;
     }
     /* SPAN */
     .span-left{
       float: left;
-      font-size: 15x;
+      font-size: rem(15);
     }
     .span-right{
     text-align: right;
     float: right;
-    font-size: 13px;
+    font-size: rem(13);
     }
   }
   .container-footer{
@@ -109,16 +111,16 @@
       overflow: auto;
   }
   .button-cancel {
-      width: 170px;
-      height: 44px;
+      width: rem(170);
+      height: rem(44);
       border-radius: 22.5px;
       --background: #e0e9ee;
       --color: #061b52;
       margin:10px;
     }
     .button-save {
-      width: 170px;
-      height: 44px;
+      width: rem(170);
+      height: rem(44);
       border-radius: 22.5px;
       --background: #42b9fe;
       --color:#ffffff;
@@ -136,7 +138,7 @@
   /* Error Messages */
   .error{
     color:red;
-    font-size: 12px;
+    font-size: rem(12);
     font-weight: bold;
     padding-bottom: 20px;
   }
diff --git a/src/app/modals/document-detail/document-detail.page.html b/src/app/modals/document-detail/document-detail.page.html
index bcbe56f9d..533cd81da 100644
--- a/src/app/modals/document-detail/document-detail.page.html
+++ b/src/app/modals/document-detail/document-detail.page.html
@@ -42,7 +42,7 @@
       </div>
       <div class="bottom-content width-100" *ngIf="LoadedDocument">
         <ion-list>
-          <h5>Documentos Anexados</h5>
+          <h5 class="font-17-rem">Documentos Anexados</h5>
           <ion-item class="ion-no-margin ion-no-padding">
 
           <ion-label
diff --git a/src/app/modals/document-detail/document-detail.page.scss b/src/app/modals/document-detail/document-detail.page.scss
index cd32fafc7..6372feb82 100644
--- a/src/app/modals/document-detail/document-detail.page.scss
+++ b/src/app/modals/document-detail/document-detail.page.scss
@@ -9,7 +9,7 @@
   color:#d30a0a !important;
 }
 .btn-size{
-  font-size: 18px !important;
+  font-size: rem(18) !important;
 }
 .main-header{
   font-family: Roboto;
@@ -37,7 +37,7 @@
         .right{
           padding: 0!important;
           float: right;
-          font-size: 25px;
+          font-size: rem(25);
           color: #0782c9;
           margin: 5px 0 0 0;
         }
@@ -48,14 +48,14 @@
         margin: 0 auto;
 
         .header-bottom-icon{
-          width: 30px;
-          font-size: 25px;
+          width: rem(30);
+          font-size: rem(25);
           float: left;
           padding: 2px;
         }
         .header-bottom-contacts{
           width: 275px;
-          font-size: 15px;
+          font-size: rem(15);
           color: #797979;
           white-space: nowrap;
           overflow: hidden;
@@ -67,16 +67,16 @@
       }
 
         .title{
-          font-size: 25px;
+          font-size: rem(25);
           overflow: auto;
           float: left;
           padding-top: 4px;
           padding-left: 5px;
         }
         .div-icon{
-          width: 40px;
+          width: rem(40);
           float: right;
-          font-size: 35px;
+          font-size: rem(35);
           overflow: auto;
           padding: 1px;
         }
@@ -95,7 +95,7 @@ ion-button{
   font-family: Roboto;
   margin-left: 41px;
   overflow: auto;
-  font-size: 18px;
+  font-size: rem(18);
 
   .label{
       border-radius: 20px;
@@ -103,13 +103,14 @@ ion-button{
       float: right;
       padding: 5px 13.5px 5px 13.5px;
       color: #fff;
+      font-size: rem(14);
   }
 
   .button-calendar-type ion-button{
-    height: 25px;
+    height: rem(25);
   }
   .content-details{
-    font-size: 17px;
+    font-size: rem(17);
     .date{
       color: #797979;
     }
@@ -117,7 +118,7 @@ ion-button{
 }
 .middle-conten{
  .middle-content p{
-    font-size: 16px;
+    font-size: rem(16);
   }
 }
 .bottom-content{
@@ -125,11 +126,11 @@ ion-button{
   margin: 0 auto;
 
   .bottom-content h3{
-    font-size: 16px;
+    font-size: rem(16);
     margin: 0 0 0 10px;
   }
   .attach-document{
-    font-size: 15px;
+    font-size: rem(15);
     color: var(--title-text-color);
     margin: 5px 5px 5px 10px;
     padding: 5px;
@@ -137,11 +138,11 @@ ion-button{
   }
   .attach-icon{
     width: 37px;
-    font-size: 35px;
+    font-size: rem(35);
     float: left;
   }
   .attach-title-item{
-    font-size: 18px;
+    font-size: rem(18);
     width: 100%;
     color:#0d89d1;
     padding-bottom: 5px;
@@ -149,13 +150,13 @@ ion-button{
   /* SPAN */
   .span-left{
     float: left;
-    font-size: 14px;
+    font-size: rem(14);
     color: rgb(102, 102, 102) !important;
   }
   .span-right{
     text-align: right;
     float: right;
-    font-size: 14px;
+    font-size: rem(14);
     color: rgb(102, 102, 102) !important;
   }
 }
@@ -170,7 +171,7 @@ ion-button{
     .arrow-right-icon{
         width: 37px;
         float: right;
-        font-size: 35px;
+        font-size: rem(35);
         overflow: hidden;
     }
   }
@@ -181,7 +182,7 @@ ion-button{
 
     .btn-ok, .btn-cancel, .btn-delete{
       height: auto !important;
-      font-size: 16px !important;
+      font-size: rem(16) !important;
       width: 100% !important;
       margin-bottom: 10px !important;
       padding: 15px !important;
diff --git a/src/app/modals/document-set-up-meeting/document-set-up-meeting.page.scss b/src/app/modals/document-set-up-meeting/document-set-up-meeting.page.scss
index 0b163bcef..f63c86c4a 100644
--- a/src/app/modals/document-set-up-meeting/document-set-up-meeting.page.scss
+++ b/src/app/modals/document-set-up-meeting/document-set-up-meeting.page.scss
@@ -1,3 +1,5 @@
+@import '~src/function.scss';
+
 .content{
     margin: 0;
     float: left;
@@ -6,14 +8,14 @@
     }
     .header-title{
       font-family: Roboto;
-      font-size: 25px;
+      font-size: rem(25);
       padding: 0;
       color:#000;
       float: left;
     }
   
     .ion-item-container{
-      margin: 15px auto;
+      margin: rem(15) auto;
       border: 1px solid #ebebeb;
       border-radius: 5px;
       padding-left: 10px;
@@ -32,11 +34,11 @@
       margin: 0px auto;
     }
     .ion-icon-class{
-      width: 45px;
-      height: 45px;
+      width: rem(45);
+      height: rem(45);
       float: left;
       padding: 10px;
-      font-size: 25px;
+      font-size: rem(25);
     }
     ion-select{
       padding-left: 5px;
@@ -44,7 +46,7 @@
     }
     .ion-input-class{
       width: calc(100% - 45px);
-      height: 45px;
+      height: rem(45);
       border: 1px solid #ebebeb;
       border-radius: 5px;
       padding-left: 5px;
@@ -62,19 +64,19 @@
   
     }
     .add-people{
-      width: 45px;
+      width: rem(45);
       float: right;
       overflow: auto;
-      font-size: 25px;
-      height: 45px;
+      font-size: rem(25);
+      height: rem(45);
       display: flex;
     }
     .list-people-title{
-      /* font-size: 13px; */
+      /* font-size: rem(13); */
       color: #a3a3a3;
     }
     .attach-document{
-      font-size: 15px;
+      font-size: rem(15);
       color: var(--title-text-color);
       margin: 5px 5px 5px 10px;
       padding: 5px;
@@ -82,23 +84,23 @@
     }
     .attach-icon{
       width: 37px;
-      font-size: 35px;
+      font-size: rem(35);
       float: left;
     }
     .attach-title-item{
       width: 100%;
-      font-size: 15px;
+      font-size: rem(15);
       color:#0d89d1;
     }
     /* SPAN */
     .span-left{
       float: left;
-      font-size: 15x;
+      font-size: rem(15);
     }
     .span-right{
     text-align: right;
     float: right;
-    font-size: 13px;
+    font-size: rem(13);
     }
   }
   .container-footer{
@@ -106,16 +108,16 @@
       overflow: auto;
   }
   .button-cancel {
-      width: 170px;
-      height: 44px;
+      width: rem(170);
+      height: rem(44);
       border-radius: 22.5px;
       --background: #e0e9ee;
       --color: #061b52;
       margin:10px;
     }
     .button-save {
-      width: 170px;
-      height: 44px;
+      width: rem(170);
+      height: rem(44);
       border-radius: 22.5px;
       --background: #42b9fe;
       --color:#ffffff;
@@ -133,7 +135,7 @@
   /* Error Messages */
   .error{
     color:red;
-    font-size: 12px;
+    font-size: rem(12);
     font-weight: bold;
     padding-bottom: 20px;
   }
@@ -150,23 +152,23 @@
   
    .attach-icon{
         width: 37px;
-        font-size: 35px;
+        font-size: rem(35);
         float: left;
       }
       .attach-title-item{
         width: 100%;
-        font-size: 15px;
+        font-size: rem(15);
         color:#0d89d1;
       }
       /* SPAN */
       .span-left{
         float: left;
-        font-size: 15x;
+        font-size: rem(15);
       }
       .span-right{
       text-align: right;
       float: right;
-      font-size: 13px;
+      font-size: rem(13);
       }
   
   
@@ -182,7 +184,7 @@
       align-items: center;
       padding: 0px 5px;
       color: white;
-      font-size: 9pt;
+      font-size: rem(12);
       font-weight: 500;
       height: 19px;
       -webkit-border-radius: 18px;
diff --git a/src/app/modals/document-viewer/document-viewer.page.html b/src/app/modals/document-viewer/document-viewer.page.html
index 4336485ee..ca8a03b91 100644
--- a/src/app/modals/document-viewer/document-viewer.page.html
+++ b/src/app/modals/document-viewer/document-viewer.page.html
@@ -3,9 +3,9 @@
 
     <div class="d-flex px-20 pt-20">
       <div class="cursor-pointer" (click)="close()">
-        <ion-icon *ngIf="ThemeService.currentTheme == 'default' " class="font-35" src="assets/images/icons-arrow-arrow-left.svg"></ion-icon>
-        <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="font-35" src="assets/images/theme/gov/icons-calendar-arrow-left.svg"></ion-icon>
-        <ion-icon *ngIf="ThemeService.currentTheme == 'doneIt' " class="font-35" src="assets/images/theme/{{ThemeService.currentTheme}}/icons-calendar-arrow-left.svg"></ion-icon>
+        <ion-icon *ngIf="ThemeService.currentTheme == 'default' " class="font-35-rem" src="assets/images/icons-arrow-arrow-left.svg"></ion-icon>
+        <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="font-35-rem" src="assets/images/theme/gov/icons-calendar-arrow-left.svg"></ion-icon>
+        <ion-icon *ngIf="ThemeService.currentTheme == 'doneIt' " class="font-35-rem" src="assets/images/theme/{{ThemeService.currentTheme}}/icons-calendar-arrow-left.svg"></ion-icon>
       </div>
 
       <div class="font-25">{{ fileName }}</div>
diff --git a/src/app/modals/eliminate-event/eliminate-event.page.scss b/src/app/modals/eliminate-event/eliminate-event.page.scss
index 0c8c7cac0..f6961f979 100644
--- a/src/app/modals/eliminate-event/eliminate-event.page.scss
+++ b/src/app/modals/eliminate-event/eliminate-event.page.scss
@@ -1,3 +1,5 @@
+@import '~src/function.scss';
+
 ion-content{
     --padding-top:15px;
     --padding-start: 15px;
@@ -11,7 +13,7 @@ ion-content{
     }
     .header-title{
       font-family: Roboto;
-      font-size: 20px;
+      font-size: rem(20);
       color:#000;
       margin: 0 5px 0 5px;
     }
diff --git a/src/app/modals/forward/forward.page.scss b/src/app/modals/forward/forward.page.scss
index 50e91d6aa..80ffc60a8 100644
--- a/src/app/modals/forward/forward.page.scss
+++ b/src/app/modals/forward/forward.page.scss
@@ -1,3 +1,5 @@
+@import '~src/function.scss';
+
 .content{
     padding: 30px 20px 0 20px !important;
     margin: 0;
@@ -9,14 +11,14 @@
     
     .header-title{
       font-family: Roboto;
-      font-size: 25px;
+      font-size: rem(25);
       padding: 0;
       color:#000;
       float: left;
     }
   
     .ion-item-container{
-      margin: 15px auto;
+      margin: rem(15) auto;
       border: 1px solid #ebebeb;
       border-radius: 5px;
       padding-left: 10px;
@@ -35,11 +37,11 @@
       margin: 0px auto;
     }
     .ion-icon-class{
-      width: 45px;
-      height: 45px;
+      width: rem(45);
+      height: rem(45);
       float: left;
       padding: 10px;
-      font-size: 25px;
+      font-size: rem(25);
     }
     ion-select{
       padding-left: 5px;
@@ -47,7 +49,7 @@
     }
     .ion-input-class{
       width: calc(100% - 45px);
-      height: 45px;
+      height: rem(45);
       border: 1px solid #ebebeb;
       border-radius: 5px;
       padding-left: 5px;
@@ -65,19 +67,19 @@
   
     }
     .add-people{
-      width: 45px;
+      width: rem(45);
       float: right;
       overflow: auto;
-      font-size: 25px;
-      height: 45px;
+      font-size: rem(25);
+      height: rem(45);
       display: flex;
     }
     .list-people-title{
-      /* font-size: 13px; */
+      /* font-size: rem(13); */
       color: #797979;
     }
     .attach-document{
-      font-size: 15px;
+      font-size: rem(15);
       color: var(--title-text-color);
       margin: 5px 5px 5px 10px;
       padding: 5px;
@@ -85,23 +87,23 @@
     }
     .attach-icon{
       width: 37px;
-      font-size: 35px;
+      font-size: rem(35);
       float: left;
     }
     .attach-title-item{
       width: 100%;
-      font-size: 15px;
+      font-size: rem(15);
       color:#0d89d1;
     }
     /* SPAN */
     .span-left{
       float: left;
-      font-size: 15x;
+      font-size: rem(15);
     }
     .span-right{
     text-align: right;
     float: right;
-    font-size: 13px;
+    font-size: rem(13);
     }
   }
   .container-footer{
@@ -109,16 +111,16 @@
       overflow: auto;
   }
   .button-cancel {
-      width: 170px;
-      height: 44px;
+      width: rem(170);
+      height: rem(44);
       border-radius: 22.5px;
       --background: #e0e9ee;
       --color: #061b52;
       margin:10px;
     }
     .button-save {
-      width: 170px;
-      height: 44px;
+      width: rem(170);
+      height: rem(44);
       border-radius: 22.5px;
       --background: #42b9fe;
       --color:#ffffff;
@@ -136,7 +138,7 @@
   /* Error Messages */
   .error{
     color:red;
-    font-size: 12px;
+    font-size: rem(12);
     font-weight: bold;
     padding-bottom: 20px;
   }
diff --git a/src/app/modals/information/information.page.scss b/src/app/modals/information/information.page.scss
index 0c8c7cac0..f6961f979 100644
--- a/src/app/modals/information/information.page.scss
+++ b/src/app/modals/information/information.page.scss
@@ -1,3 +1,5 @@
+@import '~src/function.scss';
+
 ion-content{
     --padding-top:15px;
     --padding-start: 15px;
@@ -11,7 +13,7 @@ ion-content{
     }
     .header-title{
       font-family: Roboto;
-      font-size: 20px;
+      font-size: rem(20);
       color:#000;
       margin: 0 5px 0 5px;
     }
diff --git a/src/app/modals/preview-camera/preview-camera.page.html b/src/app/modals/preview-camera/preview-camera.page.html
index b8106bc61..15bfd8a57 100644
--- a/src/app/modals/preview-camera/preview-camera.page.html
+++ b/src/app/modals/preview-camera/preview-camera.page.html
@@ -4,8 +4,8 @@
     <ion-header translucent>
       <ion-toolbar>
         <div class="title-content width-100 d-flex justify-space-between align-center">
-        <div class= "btn-dismiss font-30 cursor-pointer" (click)="close()">
-          <ion-icon style="margin-bottom:-8px" *ngIf="ThemeService.currentTheme == 'doneIt' " class="font-35" src="assets/images/theme/doneIt/icons-arrow-arrow-left.svg"></ion-icon>
+        <div class= "btn-dismiss font-30-rem cursor-pointer" (click)="close()">
+          <ion-icon style="margin-bottom:-8px" *ngIf="ThemeService.currentTheme == 'doneIt' " class="font-35-rem" src="assets/images/theme/doneIt/icons-arrow-arrow-left.svg"></ion-icon>
           <ion-icon style="margin-bottom:-8px" slot="end" *ngIf="ThemeService.currentTheme != 'doneIt' " src="assets/images/icons-arrow-arrow-left.svg" class="iconsarrowarrow-left"></ion-icon> 
         </div>
         <div class="middle d-flex align-center flex-grow-1">
diff --git a/src/app/modals/preview-camera/preview-camera.page.scss b/src/app/modals/preview-camera/preview-camera.page.scss
index 617ad8cd0..c258e0066 100644
--- a/src/app/modals/preview-camera/preview-camera.page.scss
+++ b/src/app/modals/preview-camera/preview-camera.page.scss
@@ -1,3 +1,5 @@
+@import '~src/function.scss';
+
 ion-footer {
     margin-bottom: 10px;
 }
@@ -10,7 +12,7 @@ ion-slides {
     color: rgb(250, 250, 4);
     background-color: rgb(255, 238, 0);
     border-radius: 120px;
-    width: 30px;
+    width: rem(30);
     height: 30px;
 }
 .blacking{
@@ -62,7 +64,7 @@ float: right;
     height: 29px;
     margin: 3px 3px 3px 0;
     font-family: Roboto;
-    font-size: 20px;
+    font-size: rem(20);
     font-weight: normal;
     font-stretch: normal;
     font-style: normal;
@@ -73,13 +75,12 @@ float: right;
   }
  .iconsarrowarrow-left {
     width: 36px;
-    height: 35px;
+    height: rem(35);
     padding: 9px 14px 8px 13px;
     object-fit: contain;
   }
 
   
-CSS
 .Rectangle-Copy-5 {
   width: 400px;
   height: 60px;
@@ -87,7 +88,6 @@ CSS
   background-color: #f9f9f9;
 }
 
-CSS
 .Bitmap {
   width: 358px;
   height: 506px;
@@ -99,7 +99,7 @@ CSS
 }
 .place{
 float : left;
-font-size: 14px;
+font-size: rem(14);
 
 }
 .footer{
diff --git a/src/app/modals/profile/edit-profile/edit-profile.page.scss b/src/app/modals/profile/edit-profile/edit-profile.page.scss
index f4d30d350..b3a81fcf2 100644
--- a/src/app/modals/profile/edit-profile/edit-profile.page.scss
+++ b/src/app/modals/profile/edit-profile/edit-profile.page.scss
@@ -94,7 +94,7 @@
     margin-top: 20px;
     color: black;
     font-family: Roboto;
-    font-size: rem(13);
+    font-size: rem(14);
 
     .user-role{
         background-color: white;
@@ -115,15 +115,15 @@
       }
       .ion-icon-class{
         color: #ebebeb;
-        width: 40px;
-        height: 40px;
+        width: rem(40);
+        height: rem(40);
         float: left;
         padding: 5px;
         font-size: rem(25);
       }
       .ion-input-class{
         width: calc(100% - 40px);
-        height: 40px;
+        height: rem(40);
         border: 1px solid #ebebeb;
         border-radius: 5px;
         padding-left: 5px;
diff --git a/src/app/modals/set-room-owner/set-room-owner.page.scss b/src/app/modals/set-room-owner/set-room-owner.page.scss
index 3bae06fd3..ca5e8fbcd 100644
--- a/src/app/modals/set-room-owner/set-room-owner.page.scss
+++ b/src/app/modals/set-room-owner/set-room-owner.page.scss
@@ -1,3 +1,5 @@
+@import '~src/function.scss';
+
 .header-toolbar{
     --background:transparent;
     --opacity: 1;
@@ -15,9 +17,9 @@
      transform: translate3d(0, 1px, 0);
 
      .div-icon{
-       width: 40px;
+       width: rem(40);
        float: right;
-       font-size: 35px;
+       font-size: rem(35);
        overflow: auto;
        padding: 1px;
      }
@@ -34,7 +36,7 @@
      .back-icon{
        width: 37px;
        float: left;
-       font-size: 35px;
+       font-size: rem(35);
        overflow: auto;
 
        }
@@ -45,7 +47,7 @@
          margin: 2.5px 0 0 5px;
      }
      .title{
-         font-size: 25px;
+         font-size: rem(25);
      }
    }
  }
@@ -86,7 +88,7 @@
 
     .members-label{
       margin: 10px 20px 10px 20px !important;
-      /* font-size: 15px; */
+      /* font-size: rem(15); */
       font-weight: bold;
     }
 
@@ -105,7 +107,7 @@
 
     .item-divider{
       background: #ebebeb;
-      font-size: 15px;
+      font-size: rem(15);
       margin: 10px 0 10px 0;
       padding:5px 0 5px 20px;
 
@@ -135,12 +137,12 @@
          display: block;
          margin: 0 !important;
          padding-left: 10px;
-         font-size: 15px;
+         font-size: rem(15);
          color: var(--title-text-color);
          float: left;
      }
      .item-checkbox ion-icon, .members-checkbox ion-icon{
-       font-size: 10px;
+       font-size: rem(10);
        float: left;
        color:#99e47b;
        margin-left: 10px;
diff --git a/src/app/modals/view-event/view-event.page.html b/src/app/modals/view-event/view-event.page.html
index e53b7f520..5c570a082 100644
--- a/src/app/modals/view-event/view-event.page.html
+++ b/src/app/modals/view-event/view-event.page.html
@@ -74,7 +74,7 @@
         <div class="line"></div>
         <div class="middle-content">
           <div *ngIf="loadedEvent.Attendees">
-            <h5>Intervenientes</h5>
+            <h5 class="font-17-rem">Intervenientes</h5>
             <ion-item class="ion-no-margin ion-no-padding">
               <ion-label>
                 <div *ngFor="let attendee of loadedEvent.Attendees">
@@ -84,7 +84,7 @@
             </ion-item>
           </div>
           <div *ngIf="loadedEvent.Body.Text">
-            <h5>Detalhes</h5>
+            <h5 class="font-17-rem">Detalhes</h5>
             <ion-item lines="none" class="ion-no-margin ion-no-padding">
               <pre class="width-100 text">{{ loadedEvent.Body.Text }} </pre>
             </ion-item>
@@ -93,7 +93,7 @@
         </div>
 
         <div *ngIf="loadedEvent.Attachments" class="bottom-content width-100">
-          <h5>Documentos Anexados</h5>
+          <h5 class="font-17-rem">Documentos Anexados</h5>
           <ion-list class="width-100">
             <ion-item *ngFor="let attach of loadedEvent.Attachments; let i = index" class="width-100" class="ion-no-margin ion-no-padding">
               <ion-label class="width-100 d-flex "  (click)="docIndex(i);LoadDocumentDetails()">
diff --git a/src/app/modals/view-event/view-event.page.scss b/src/app/modals/view-event/view-event.page.scss
index c23d2ca98..495418689 100644
--- a/src/app/modals/view-event/view-event.page.scss
+++ b/src/app/modals/view-event/view-event.page.scss
@@ -4,7 +4,7 @@ ion-content{
     /* --padding-top:0px;
     --padding-start: 20px;
     --padding-end: 20px;
-    font-size: 18px; */
+    font-size: rem(18); */
     overflow: auto;
 }
 ion-menu{
@@ -31,7 +31,7 @@ ion-menu{
       .left{
         width: 37px;
         float: left;
-        font-size: 35px;
+        font-size: rem(35);
       }
       .middle{
         width: calc(100% - 138.5px) !important;
@@ -45,8 +45,8 @@ ion-menu{
         }
       }
       .header-icon-right{
-        width: 45px;
-        font-size: 45px;
+        width: rem(45);
+        font-size: rem(45);
         float: right;
       }
       .menu-options{
@@ -59,12 +59,12 @@ ion-menu{
         margin-left: 15px;
       }
       .menu-options .edit{
-        font-size: 35px;
+        font-size: rem(35);
         float: left;
       }
       .menu-options .delete{
         padding: 7px;
-        font-size: 21px;
+        font-size: rem(21);
         color:#fff;
         background: #d30606;
         border-radius: 20px;
@@ -73,7 +73,7 @@ ion-menu{
     }
 
     .title{
-      font-size: 25px;
+      font-size: rem(25);
     }
 
   }
@@ -94,7 +94,7 @@ ion-menu{
     .upper-content{
       width: calc(100%-50px);
       margin-left: 50px;
-      font-size: 18px;
+      font-size: rem(18);
 
         .content-location{
           width: 100%;
@@ -113,7 +113,7 @@ ion-menu{
         .location-detail{
           width: 210px;
           font-weight: 700;
-          font-size: 18px;
+          font-size: rem(18);
           float: left;
           margin: 5px 5px 5px 0px;
         }
@@ -149,7 +149,7 @@ ion-menu{
 
 
         .button-calendar-type ion-button{
-          height: 25px;
+          height: rem(25);
         }
         .button-edit-event {
             width: 140px;
@@ -159,7 +159,7 @@ ion-menu{
             --color:#061b52;
         }
         .content-details p{
-            font-size: 16px;
+            font-size: rem(16);
         }
       }
       .line{
@@ -172,7 +172,7 @@ ion-menu{
         overflow: auto;
 
         .middle-content h3, .middle-content p{
-          font-size: 16px;
+          font-size: rem(16);
         }
       }
 
@@ -180,11 +180,11 @@ ion-menu{
         margin: 0 auto;
 
         .bottom-content h3{
-          font-size: 16px;
+          font-size: rem(16);
           margin: 0 0 0 10px;
         }
         .attach-document{
-          font-size: 15px;
+          font-size: rem(15);
           color: var(--title-text-color);
           margin: 5px 5px 5px 10px;
           padding: 5px;
@@ -192,23 +192,23 @@ ion-menu{
         }
         .attach-icon{
           width: 37px;
-          font-size: 35px;
+          font-size: rem(35);
           float: left;
         }
         .attach-title-item{
           width: 100%;
-          font-size: 15px;
+          font-size: rem(15);
           color: var(--title-text-color);
         }
         /* SPAN */
         .span-left{
           float: left;
-          font-size: 15x;
+          font-size: rem(15);
         }
         .span-right{
         text-align: right;
         float: right;
-        font-size: 13px;
+        font-size: rem(13);
         }
     }
   }
@@ -223,7 +223,7 @@ ion-menu{
       .arrow-right-icon{
           width: 37px;
           float: right;
-          font-size: 35px;
+          font-size: rem(35);
       }
     }
     .buttons{
@@ -233,7 +233,7 @@ ion-menu{
 
       .btn-ok, .btn-cancel, .btn-delete{
         height: auto !important;
-        font-size: 16px !important;
+        font-size: rem(16) !important;
         width: 100% !important;
         margin-bottom: 10px !important;
         padding: 15px !important;
diff --git a/src/app/modals/view-media/view-media.page.html b/src/app/modals/view-media/view-media.page.html
index d34bc1d4d..00ff922f9 100644
--- a/src/app/modals/view-media/view-media.page.html
+++ b/src/app/modals/view-media/view-media.page.html
@@ -2,7 +2,7 @@
   <div class="main-header d-flex align-items-center">
     <div class= "left cursor-pointer" (click)="close()">
       <button class="btn-no-color" (click)="close()">
-        <fa-icon icon="chevron-left" class="header-top-btn font-awesome-1 font-35"></fa-icon>
+        <fa-icon icon="chevron-left" class="header-top-btn font-awesome-1 font-35-rem"></fa-icon>
       </button>
     </div>
     <div  class="middle-container">
diff --git a/src/app/modals/view-media/view-media.page.scss b/src/app/modals/view-media/view-media.page.scss
index 4185866b7..0ee31a634 100644
--- a/src/app/modals/view-media/view-media.page.scss
+++ b/src/app/modals/view-media/view-media.page.scss
@@ -1,3 +1,5 @@
+@import '~src/function.scss';
+
 .main-header{
   width: 100%; /* 400px */
   height: 100%;
@@ -13,12 +15,12 @@
   .left{
     width: fit-content;
     float: left;
-    //font-size: 35px;
+    //font-size: rem(35);
     overflow: hidden;
 
     .header-top-btn{
       background: transparent;
-      font-size: 25px !important;
+      font-size: rem(25) !important;
       font-weight: 100 !important;
       /* color: #0782c9; */
       color: #42b9fe;
@@ -39,7 +41,7 @@
       align-items: center;
 
       .title{
-        font-size: 25px;
+        font-size: rem(25);
         white-space: nowrap;
         overflow: hidden !important;
         text-overflow: ellipsis !important;
diff --git a/src/app/pages/agenda/agenda.page.scss b/src/app/pages/agenda/agenda.page.scss
index 91e64cf04..ae30cade3 100644
--- a/src/app/pages/agenda/agenda.page.scss
+++ b/src/app/pages/agenda/agenda.page.scss
@@ -59,7 +59,7 @@
     font-size: rem(25);
   }
   .div-icon{
-    width: 40px;
+    width: rem(40);
     float: right;
     font-size: rem(35);
     overflow: auto;
@@ -202,7 +202,7 @@ input[type="checkbox"]::before{
   position: absolute;
   content: "";
   left: 0;
-  width: 30px;
+  width: rem(30);
   height: 30px;
   background: #fff;
   border-radius: 50%;
@@ -342,7 +342,7 @@ td.monthview-primary-with-event {
       padding: 0px;
       li{
         list-style: none;
-        height: 35px;
+        height: rem(35);
         display: flex;
         align-items: center;
       }
@@ -542,7 +542,7 @@ td.monthview-primary-with-event {
   }
   .color{
     width: 5px;
-    height: 40px;
+    height: rem(40);
     border-top-right-radius: 5px;
     border-bottom-right-radius: 5px;
     background-color: #f05d5e;
@@ -565,7 +565,7 @@ td.monthview-primary-with-event {
     /* border: 1px solid red; */
   }
   .div-content-Oficial p, .div-content-Pessoal p{
-    font-size: 12pt;
+    font-size: rem(16);
     color: rgb(94, 92, 92);
     padding: 0 !important;
     margin: 0 !important;
@@ -840,7 +840,7 @@ app-approve-event{
   .resize{
     font-size: 27px !important;
     ion-icon{
-      font-size: rem(27) !important;
+      font-size: 27px !important;
     }
   }
 }
diff --git a/src/app/pages/agenda/edit-event/edit-event.page.scss b/src/app/pages/agenda/edit-event/edit-event.page.scss
index 872268000..fdab03263 100644
--- a/src/app/pages/agenda/edit-event/edit-event.page.scss
+++ b/src/app/pages/agenda/edit-event/edit-event.page.scss
@@ -1,4 +1,5 @@
 
+@import '~src/function.scss';
 
 .title-content::after, .header-md::after{
   display: none;
@@ -27,12 +28,12 @@
     }
 
     .title{
-      font-size: 25px;
+      font-size: rem(25);
     }
 
   }
     .ion-item-container{
-        margin: 15px auto;
+        margin: rem(15) auto;
         border: 1px solid #ebebeb;
         border-radius: 5px;
         padding-left: 10px;
@@ -50,11 +51,11 @@
         margin: 0px auto;
       }
       .ion-icon-class{
-        width: 45px;
-        height: 45px;
+        width: rem(45);
+        height: rem(45);
         float: left;
         padding: 10px;
-        font-size: 25px;
+        font-size: rem(25);
       }
       ion-select{
         padding-left: 5px;
@@ -62,7 +63,7 @@
       }
       .ion-input-class{
         width: calc(100% - 45px);
-        height: 45px;
+        height: rem(45);
         border: 1px solid #ebebeb;
         border-radius: 5px;
         padding-left: 5px;
@@ -79,19 +80,19 @@
       
       }
       .add-people{
-        width: 45px;
+        width: rem(45);
         float: right;
         overflow: auto;
-        font-size: 25px;
-        height: 45px;
+        font-size: rem(25);
+        height: rem(45);
         display: flex;
       }
       .list-people-title{
-        /* font-size: 13px; */
+        /* font-size: rem(13); */
         color: #a3a3a3;
       }
       .attach-document{
-        font-size: 15px;
+        font-size: rem(15);
         color: var(--title-text-color);;
         margin: 5px 5px 5px 10px;
         padding: 5px;
@@ -99,40 +100,40 @@
       }
       .attach-icon{
         width: 37px;
-        font-size: 35px;
+        font-size: rem(35);
         float: left;
       }
       .attach-title-item{
         width: 100%;
-        font-size: 15px;
+        font-size: rem(15);
         color:var(--title-text-color);
         
       }
       /* SPAN */
       .span-left{
         float: left;
-        font-size: 15x;
+        font-size: rem(15);
       }
       .span-right{
       text-align: right;
       float: right;
-      font-size: 13px;
+      font-size: rem(13);
       }
       .container-footer{
           margin:0 auto;
           overflow: auto;
       }
       .button-cancel {
-          width: 170px;
-          height: 44px;
+          width: rem(170);
+          height: rem(44);
           border-radius: 22.5px;
           --background: #e0e9ee;
           --color: #061b52;
           margin:10px;
         }
         .button-save {
-          width: 170px;
-          height: 44px;
+          width: rem(170);
+          height: rem(44);
           border-radius: 22.5px;
           --background: #42b9fe;
           --color:#ffffff;
@@ -150,7 +151,7 @@
       /* Error Messages */
       .error{
         color:red;
-        font-size: 12px;
+        font-size: rem(12);
         font-weight: bold;
         padding-bottom: 20px;
       }
@@ -176,7 +177,7 @@
     align-items: center;
     padding: 0px 5px;
     color: white;
-    font-size: 9pt;
+    font-size: rem(12);
     font-weight: 500;
     height: 19px;
     -webkit-border-radius: 18px;
diff --git a/src/app/pages/agenda/emend-message-modal/emend-message-modal.page.scss b/src/app/pages/agenda/emend-message-modal/emend-message-modal.page.scss
index 8b39f5213..6b40a423d 100644
--- a/src/app/pages/agenda/emend-message-modal/emend-message-modal.page.scss
+++ b/src/app/pages/agenda/emend-message-modal/emend-message-modal.page.scss
@@ -1,3 +1,5 @@
+@import '~src/function.scss';
+
 .header-content{
     //width: 360px;
     overflow: auto;
@@ -5,7 +7,7 @@
   }
   .header-icon-left{
     width: 36px;
-    font-size: 33px;
+    font-size: rem(33);
     color: #42b9fe;
     float: left;
   }
@@ -13,7 +15,7 @@
   .header-title{
     width: 264px;
     font-family: Roboto;
-    font-size: 25px;
+    font-size: rem(25);
     margin: 0 5px 10px 20px;
     padding: 0;
     color:#000;
diff --git a/src/app/pages/agenda/event-actions-popover/event-actions-popover.page.scss b/src/app/pages/agenda/event-actions-popover/event-actions-popover.page.scss
index 6a310f377..3d5dfd2e1 100644
--- a/src/app/pages/agenda/event-actions-popover/event-actions-popover.page.scss
+++ b/src/app/pages/agenda/event-actions-popover/event-actions-popover.page.scss
@@ -1,3 +1,5 @@
+@import '~src/function.scss';
+
 .wrapper{
     --padding-top:20px !important;
    --padding-bottom:20px !important;
@@ -10,7 +12,7 @@
     .arrow-right-icon{
         width: 37px;
         float: right;
-        font-size: 35px;
+        font-size: rem(35);
         overflow: hidden;
     }
 }
diff --git a/src/app/pages/agenda/new-event/new-event.page.scss b/src/app/pages/agenda/new-event/new-event.page.scss
index 2ed84b876..715fdc075 100644
--- a/src/app/pages/agenda/new-event/new-event.page.scss
+++ b/src/app/pages/agenda/new-event/new-event.page.scss
@@ -32,7 +32,7 @@ ion-content{
     }
 
     .title{
-      font-size: 25px;
+      font-size: rem(25);
     }
 
   }
@@ -68,18 +68,18 @@ ion-content{
         margin: 0px auto;
       }
       .ion-icon-class{
-        width: 45px;
-        height: 45px;
+        width: rem(45);
+        height: rem(45);
         float: left;
         padding: 10px;
-        font-size: 25px;
+        font-size: rem(25);
       }
       ion-select{
         padding-left: 5px;
         margin-left: 0;
       }
       .ion-input-class{
-        height: 45px;
+        height: rem(45);
         border: 1px solid #ebebeb;
         border-radius: 5px;
         padding-left: 5px;
@@ -102,19 +102,19 @@ ion-content{
 
       }
       .add-people{
-        width: 45px;
+        width: rem(45);
         float: right;
         overflow: auto;
-        font-size: 25px;
-        height: 45px;
+        font-size: rem(25);
+        height: rem(45);
         display: flex;
       }
       .list-people-title{
-        /* font-size: 13px; */
+        /* font-size: rem(13); */
         color: #a3a3a3;
       }
       .attach-document{
-        font-size: 15px;
+        font-size: rem(15);
         color: var(--title-text-color);
         margin: 5px 5px 5px 10px;
         padding: 5px;
@@ -122,39 +122,39 @@ ion-content{
       }
       .attach-icon{
         width: 37px;
-        font-size: 35px;
+        font-size: rem(35);
         float: left;
       }
       .attach-title-item{
         width: 100%;
-        font-size: 15px;
+        font-size: rem(15);
         color:var(--title-text-color);
       }
       /* SPAN */
       .span-left{
         float: left;
-        font-size: 15x;
+        font-size: rem(15);
       }
       .span-right{
       text-align: right;
       float: right;
-      font-size: 13px;
+      font-size: rem(13);
       }
       .container-footer{
           margin:0 auto;
           overflow: auto;
       }
       .button-cancel {
-          width: 170px;
-          height: 44px;
+          width: rem(170);
+          height: rem(44);
           border-radius: 22.5px;
           --background: #e0e9ee;
           --color: #061b52;
           margin:10px;
         }
         .button-save {
-          width: 170px;
-          height: 44px;
+          width: rem(170);
+          height: rem(44);
           border-radius: 22.5px;
           --background: #42b9fe;
           --color:#ffffff;
@@ -172,7 +172,7 @@ ion-content{
       /* Error Messages */
       .error{
         color:red;
-        font-size: 12px;
+        font-size: rem(12);
         font-weight: bold;
         padding-bottom: 20px;
       }
@@ -193,7 +193,7 @@ ion-content{
     align-items: center;
     padding: 0px 5px;
     color: white;
-    font-size: 9pt;
+    font-size: rem(12);
     font-weight: 500;
     height: 19px;
     -webkit-border-radius: 18px;
diff --git a/src/app/pages/agenda/view-event/view-event.page.html b/src/app/pages/agenda/view-event/view-event.page.html
index 1cd6ad4f0..b13445238 100644
--- a/src/app/pages/agenda/view-event/view-event.page.html
+++ b/src/app/pages/agenda/view-event/view-event.page.html
@@ -36,7 +36,7 @@
 
           <div class="content-location">
             <span class="date">{{loadedEvent.Location}}</span>
-            <div *ngIf="loadedEvent.Organizer">
+            <div *ngIf="loadedEvent.Organizer" class="font-15-rem">
 
               <div *ngIf="eventsService.isMyEvent(loadedEvent) == false || sesseionStora.user.Profile =='PR'">
                 <span class="label" *ngIf="loadedEvent.CalendarName == 'Oficial' " style="background-color: #99e47b;">{{loadedEvent.CalendarName}}</span>
@@ -69,7 +69,7 @@
         <div class="line"></div>
         <div class="middle-content">
           <div *ngIf="loadedEvent.Attendees">
-            <h5>Intervenientes</h5>
+            <h5 class="font-17-rem">Intervenientes</h5>
             <ion-item class="ion-no-margin ion-no-padding">
               <ion-label>
                 <div *ngFor="let attendee of loadedEvent.Attendees">
@@ -79,7 +79,7 @@
             </ion-item>
           </div>
           <div *ngIf="loadedEvent.Body.Text">
-            <h5>Detalhes</h5>
+            <h5 class="font-17-rem">Detalhes</h5>
             <ion-item lines="none" class="ion-no-margin ion-no-padding">
               <pre class="width-100 text">{{ loadedEvent.Body.Text }} </pre>
             </ion-item>
@@ -88,7 +88,7 @@
         </div>
 
         <div *ngIf="loadedEvent.Attachments" class="bottom-content width-100">
-          <h5>Documentos Anexados</h5>
+          <h5 class="font-17-rem">Documentos Anexados</h5>
           <ion-list class="width-100">
             <ion-item *ngFor="let attach of loadedEvent.Attachments; let i = index" class="width-100" class="ion-no-margin ion-no-padding">
               <ion-label class="width-100 d-flex "  (click)="docIndex(i);LoadDocumentDetails()">
diff --git a/src/app/pages/agenda/view-event/view-event.page.scss b/src/app/pages/agenda/view-event/view-event.page.scss
index 2de044c61..84d69b8a3 100644
--- a/src/app/pages/agenda/view-event/view-event.page.scss
+++ b/src/app/pages/agenda/view-event/view-event.page.scss
@@ -4,7 +4,7 @@ ion-content{
     /* --padding-top:0px;
     --padding-start: 20px;
     --padding-end: 20px;
-    font-size: 18px; */
+    font-size: rem(18); */
     overflow: auto;
 }
 ion-menu{
@@ -31,7 +31,7 @@ ion-menu{
       .left{
         width: 37px;
         float: left;
-        font-size: 35px;
+        font-size: rem(35);
       }
       .middle{
         width: calc(100% - 138.5px) !important;
@@ -45,8 +45,8 @@ ion-menu{
         }
       }
       .header-icon-right{
-        width: 45px;
-        font-size: 45px;
+        width: rem(45);
+        font-size: rem(45);
         float: right;
       }
       .menu-options{
@@ -59,12 +59,12 @@ ion-menu{
         margin-left: 15px;
       }
       .menu-options .edit{
-        font-size: 35px;
+        font-size: rem(35);
         float: left;
       }
       .menu-options .delete{
         padding: 7px;
-        font-size: 21px;
+        font-size: rem(21);
         color:#fff;
         background: #d30606;
         border-radius: 20px;
@@ -73,7 +73,7 @@ ion-menu{
     }
 
     .title{
-      font-size: 25px;
+      font-size: rem(25);
     }
 
   }
@@ -94,7 +94,7 @@ ion-menu{
     .upper-content{
       width: calc(100%-50px);
       margin-left: 50px;
-      font-size: 18px;
+      font-size: rem(18);
 
         .content-location{
           width: 100%;
@@ -113,7 +113,7 @@ ion-menu{
         .location-detail{
           width: 210px;
           font-weight: 700;
-          font-size: 18px;
+          font-size: rem(18);
           float: left;
           margin: 5px 5px 5px 0px;
         }
@@ -149,7 +149,7 @@ ion-menu{
 
 
         .button-calendar-type ion-button{
-          height: 25px;
+          height: rem(25);
         }
         .button-edit-event {
             width: 140px;
@@ -159,7 +159,7 @@ ion-menu{
             --color:#061b52;
         }
         .content-details p{
-            font-size: 16px;
+            font-size: rem(16);
         }
       }
       .line{
@@ -172,7 +172,7 @@ ion-menu{
         overflow: auto;
 
         .middle-content h3, .middle-content p{
-          font-size: 16px;
+          font-size: rem(16);
         }
       }
 
@@ -180,11 +180,11 @@ ion-menu{
         margin: 0 auto;
 
         .bottom-content h3{
-          font-size: 16px;
+          font-size: rem(16);
           margin: 0 0 0 10px;
         }
         .attach-document{
-          font-size: 15px;
+          font-size: rem(15);
           color: var(--title-text-color);
           margin: 5px 5px 5px 10px;
           padding: 5px;
@@ -192,24 +192,24 @@ ion-menu{
         }
         .attach-icon{
           width: 37px;
-          font-size: 35px;
+          font-size: rem(35);
           float: left;
         }
         .attach-title-item{
           width: 100%;
-          font-size: 15px;
+          font-size: rem(15);
           color:#0d89d1;
           /* color: var(--title-text-color); */
         }
         /* SPAN */
         .span-left{
           float: left;
-          font-size: 15x;
+          font-size: rem(15);
         }
         .span-right{
         text-align: right;
         float: right;
-        font-size: 13px;
+        font-size: rem(13);
         }
     }
   }
@@ -224,7 +224,7 @@ ion-menu{
       .arrow-right-icon{
           width: 37px;
           float: right;
-          font-size: 35px;
+          font-size: rem(35);
       }
     }
     .buttons{
@@ -234,7 +234,7 @@ ion-menu{
 
       .btn-ok, .btn-cancel, .btn-delete{
         height: auto !important;
-        font-size: 16px !important;
+        font-size: rem(16) !important;
         width: 100% !important;
         margin-bottom: 10px !important;
         padding: 15px !important;
diff --git a/src/app/pages/chat/chat.page.scss b/src/app/pages/chat/chat.page.scss
index caaa9778f..984c90447 100644
--- a/src/app/pages/chat/chat.page.scss
+++ b/src/app/pages/chat/chat.page.scss
@@ -55,13 +55,13 @@ ion-content{
   }
 
   .iconschatnew-group{
-    width: 30px;
+    width: rem(30);
     height: 30px;
     object-fit: contain;
     margin: 0 5px 0 5px;
   }
   .iconschatnew-conversation{
-    width: 30px;
+    width: rem(30);
     height: 30px;
     object-fit: contain;
     margin: 0 5px 0 5px;
diff --git a/src/app/pages/chat/edit-group/edit-group.page.scss b/src/app/pages/chat/edit-group/edit-group.page.scss
index 67b8a01df..2717a7a4e 100644
--- a/src/app/pages/chat/edit-group/edit-group.page.scss
+++ b/src/app/pages/chat/edit-group/edit-group.page.scss
@@ -80,7 +80,7 @@ ion-content{
       font-size: rem(25);
     }
     .div-icon{
-      width: 40px;
+      width: rem(40);
       float: right;
       font-size: rem(35);
       overflow: auto;
@@ -134,8 +134,8 @@ ion-content{
         margin: 0px auto;
 
         .ion-icon-class{
-            width: 45px;
-            height: 45px;
+            width: rem(45);
+            height: rem(45);
             float: left;
             padding: 10px;
             font-size: rem(25);
@@ -143,7 +143,7 @@ ion-content{
       }
       .ion-input-class{
         width: 315px;
-        height: 45px;
+        height: rem(45);
         border: 1px solid #ebebeb;
         border-radius: 5px;
         padding-left: 5px;
diff --git a/src/app/pages/chat/group-messages/group-contacts/group-contacts.page.scss b/src/app/pages/chat/group-messages/group-contacts/group-contacts.page.scss
index b81343f39..c0a1068d7 100644
--- a/src/app/pages/chat/group-messages/group-contacts/group-contacts.page.scss
+++ b/src/app/pages/chat/group-messages/group-contacts/group-contacts.page.scss
@@ -17,7 +17,7 @@
      transform: translate3d(0, 1px, 0);
  
      .div-icon{
-       width: 40px;
+       width: rem(40);
        float: right;
        font-size: rem(35);
        overflow: auto;
@@ -88,7 +88,7 @@
 
     .members-label{
       margin: 10px 20px 10px 20px !important;
-      /* font-size: 15px; */
+      /* font-size: rem(15); */
       font-weight: bold;
     }
 
diff --git a/src/app/pages/chat/group-messages/group-messages.page.scss b/src/app/pages/chat/group-messages/group-messages.page.scss
index 4362ba579..d1f31a8cd 100644
--- a/src/app/pages/chat/group-messages/group-messages.page.scss
+++ b/src/app/pages/chat/group-messages/group-messages.page.scss
@@ -23,7 +23,7 @@
           .left{
             width: fit-content;
             float: left;
-            //font-size: 35px;
+            //font-size: rem(35);
             overflow: hidden;
           }
 
@@ -77,7 +77,7 @@
           margin: 0 auto;
 
           .header-bottom-icon{
-            width: 30px;
+            width: rem(30);
             font-size: rem(25);
             float: left;
             padding: 2px;
@@ -103,7 +103,7 @@
         }
 
         .div-icon{
-          width: 40px;
+          width: rem(40);
           float: right;
           font-size: rem(35);
           overflow: auto;
@@ -288,7 +288,7 @@
  }
 
  .chat-icon-send{
-   font-size: rem(45);
+   font-size: rem(40);
    margin: 0 auto;
    margin-top: 4px;
  }
@@ -394,4 +394,10 @@
     padding: 6px;
     border-radius: 10px;
     cursor: pointer;
+}
+
+
+
+.font-40-rem {
+  font-size: 2.5rem !important;
 }
\ No newline at end of file
diff --git a/src/app/pages/chat/messages/contacts/contacts.page.scss b/src/app/pages/chat/messages/contacts/contacts.page.scss
index 38a948def..a0296cec5 100644
--- a/src/app/pages/chat/messages/contacts/contacts.page.scss
+++ b/src/app/pages/chat/messages/contacts/contacts.page.scss
@@ -17,7 +17,7 @@
      transform: translate3d(0, 1px, 0);
  
      .div-icon{
-       width: 40px;
+       width: rem(40);
        float: right;
        font-size: rem(35);
        overflow: auto;
diff --git a/src/app/pages/chat/messages/messages.page.scss b/src/app/pages/chat/messages/messages.page.scss
index 86bb36f0b..db2f70427 100644
--- a/src/app/pages/chat/messages/messages.page.scss
+++ b/src/app/pages/chat/messages/messages.page.scss
@@ -42,7 +42,7 @@
           .left{
             width: fit-content;
             float: left;
-            //font-size: 35px;
+            //font-size: rem(35);
             overflow: hidden;
 
             .header-top-btn{
@@ -93,7 +93,7 @@
           margin: 0 auto;
 
           .header-bottom-icon{
-            width: 30px;
+            width: rem(30);
             font-size: rem(25);
             float: left;
             padding: 2px;
@@ -120,7 +120,7 @@
           float: left;
         }
         .div-icon{
-          width: 40px;
+          width: rem(40);
           float: right;
           font-size: rem(35);
           overflow: auto;
@@ -254,7 +254,7 @@
  }
 
  .chat-icon-send{
-   font-size: rem(45);
+   font-size: rem(40);
    margin: 0 auto;
    margin-top: 4px;
  }
@@ -381,4 +381,8 @@ button::-moz-focus-inner {
     padding: 6px;
     border-radius: 10px;
     cursor: pointer;
+}
+
+.font-40-rem {
+  font-size: 2.5rem !important;
 }
\ No newline at end of file
diff --git a/src/app/pages/chat/new-group/contacts/contacts.page.scss b/src/app/pages/chat/new-group/contacts/contacts.page.scss
index 5ccd3c53a..a3d20fdd1 100644
--- a/src/app/pages/chat/new-group/contacts/contacts.page.scss
+++ b/src/app/pages/chat/new-group/contacts/contacts.page.scss
@@ -18,7 +18,7 @@
     transform: translate3d(0, 1px, 0);
 
     .div-icon{
-      width: 40px;
+      width: rem(40);
       float: right;
       font-size: rem(35);
       overflow: auto;
diff --git a/src/app/pages/chat/new-group/new-group.page.scss b/src/app/pages/chat/new-group/new-group.page.scss
index c8ccc712d..bdaeba538 100644
--- a/src/app/pages/chat/new-group/new-group.page.scss
+++ b/src/app/pages/chat/new-group/new-group.page.scss
@@ -76,7 +76,7 @@ ion-content{
       .right{
         padding: 0!important;
         float: right;
-        font-size: 15px;
+        font-size: rem(15);
         color: #0782c9;
         margin: 8px 0 0 5px;
       }
@@ -86,7 +86,7 @@ ion-content{
       font-size: rem(25);
     }
     .div-icon{
-      width: 40px;
+      width: rem(40);
       float: right;
       font-size: rem(35);
       overflow: auto;
@@ -138,8 +138,8 @@ ion-content{
         overflow: auto;
 
         .ion-icon-class{
-            width: 45px;
-            height: 45px;
+            width: rem(45);
+            height: rem(45);
             float: left;
             padding: 10px;
             font-size: rem(25);
@@ -147,7 +147,7 @@ ion-content{
       }
       .ion-input-class{
         width: calc(100% - 45px) !important;
-        height: 45px;
+        height: rem(45);
         border: 1px solid #ebebeb;
         border-radius: 5px;
         padding-left: 5px;
diff --git a/src/app/pages/events/attachments/attachments.page.scss b/src/app/pages/events/attachments/attachments.page.scss
index a37695678..cc3b7a404 100644
--- a/src/app/pages/events/attachments/attachments.page.scss
+++ b/src/app/pages/events/attachments/attachments.page.scss
@@ -1,3 +1,5 @@
+@import '~src/function.scss';
+
 ion-back-button {
   display: block;
 }
@@ -14,7 +16,7 @@ ion-list, ion-item-sliding{
 
 }
 .item-list-small{
-    font-size: 14px;
+    font-size: rem(14);
     overflow: auto;
   }
   .ion-item-class{
@@ -39,7 +41,7 @@ ion-list, ion-item-sliding{
     padding: 10px;
   }
   .div-content-attachment h3{
-    font-size: 18px;
+    font-size: rem(18);
     font-weight: 700;
     padding-bottom: 5px;
   }
diff --git a/src/app/pages/events/attendees/attendees.page.html b/src/app/pages/events/attendees/attendees.page.html
index 090a3af8a..886782945 100644
--- a/src/app/pages/events/attendees/attendees.page.html
+++ b/src/app/pages/events/attendees/attendees.page.html
@@ -15,9 +15,9 @@
           <ion-item (click)="selectContact(attendee)" class="cursor-pointer" lines="none"  *ngIf="filterSearchList(attendee)" >
             <div class="pr-10">
 
-              <ion-icon *ngIf="ThemeService.currentTheme == 'default' " class="font-35" src="assets/images/icons-default-profile.svg"></ion-icon>
-              <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="font-35" src="assets/images/theme/gov/icons-profile.svg"></ion-icon>
-              <ion-icon *ngIf="ThemeService.currentTheme == 'doneIt' " class="font-35" src="assets/images/theme/{{ThemeService.currentTheme}}/icons-profile.svg"></ion-icon>
+              <ion-icon *ngIf="ThemeService.currentTheme == 'default' " class="font-35-rem" src="assets/images/icons-default-profile.svg"></ion-icon>
+              <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="font-35-rem" src="assets/images/theme/gov/icons-profile.svg"></ion-icon>
+              <ion-icon *ngIf="ThemeService.currentTheme == 'doneIt' " class="font-35-rem" src="assets/images/theme/{{ThemeService.currentTheme}}/icons-profile.svg"></ion-icon>
 
             </div>
             <ion-label>
@@ -25,9 +25,9 @@
               <p>{{ attendee.EmailAddress }}</p>
             </ion-label>
             <div>
-              <ion-icon *ngIf="ThemeService.currentTheme == 'default' "   class="font-35" src="assets/images/icons-add-25.svg" ></ion-icon>
-              <ion-icon *ngIf="ThemeService.currentTheme == 'gov' "    class="font-35" src="assets/images/theme/gov/icons-add-25.svg" ></ion-icon>
-              <ion-icon *ngIf="ThemeService.currentTheme == 'doneIt' "    class="font-35" src="assets/images/theme/{{ThemeService.currentTheme}}/icons-add-25.svg" ></ion-icon>
+              <ion-icon *ngIf="ThemeService.currentTheme == 'default' "   class="font-35-rem" src="assets/images/icons-add-25.svg" ></ion-icon>
+              <ion-icon *ngIf="ThemeService.currentTheme == 'gov' "    class="font-35-rem" src="assets/images/theme/gov/icons-add-25.svg" ></ion-icon>
+              <ion-icon *ngIf="ThemeService.currentTheme == 'doneIt' "    class="font-35-rem" src="assets/images/theme/{{ThemeService.currentTheme}}/icons-add-25.svg" ></ion-icon>
             </div>
           </ion-item>
         </div>
@@ -41,16 +41,16 @@
       <ion-item-sliding class="px-20">
         <ion-item lines="none" *ngFor="let attendee of taskParticipants;" class="d-flex">
           <div class="pr-10">
-            <ion-icon *ngIf="ThemeService.currentTheme == 'default' " class="font-35" src="assets/images/icons-default-profile.svg"></ion-icon>
-            <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="font-35" src="assets/images/theme/gov/icons-profile.svg"></ion-icon>
-            <ion-icon *ngIf="ThemeService.currentTheme == 'doneIt' " class="font-35" src="assets/images/theme/{{ThemeService.currentTheme}}/icons-profile.svg"></ion-icon>
+            <ion-icon *ngIf="ThemeService.currentTheme == 'default' " class="font-35-rem" src="assets/images/icons-default-profile.svg"></ion-icon>
+            <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="font-35-rem" src="assets/images/theme/gov/icons-profile.svg"></ion-icon>
+            <ion-icon *ngIf="ThemeService.currentTheme == 'doneIt' " class="font-35-rem" src="assets/images/theme/{{ThemeService.currentTheme}}/icons-profile.svg"></ion-icon>
           </div>
           <ion-label>
             <h3>{{ attendee.Name }}</h3>
             <p>{{ attendee.EmailAddress }}</p>
           </ion-label>
           <div class="cursor-pointer" (click)="remove(attendee)">
-            <ion-icon class="font-35" src="assets/images/icons-delete-25.svg"></ion-icon>
+            <ion-icon class="font-35-rem" src="assets/images/icons-delete-25.svg"></ion-icon>
           </div>
         </ion-item>
       </ion-item-sliding>
@@ -62,9 +62,9 @@
         <ion-item lines="none" *ngFor="let attendee of taskParticipantsCc;" class="d-flex">
           <div class="pr-10">
 
-            <ion-icon *ngIf="ThemeService.currentTheme == 'default' " class="font-35" src="assets/images/icons-default-profile.svg"></ion-icon>
-            <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="font-35" src="assets/images/theme/gov/icons-profile.svg"></ion-icon>
-            <ion-icon *ngIf="ThemeService.currentTheme == 'doneIt' " class="font-35" src="assets/images/theme/{{ThemeService.currentTheme}}/icons-profile.svg"></ion-icon>
+            <ion-icon *ngIf="ThemeService.currentTheme == 'default' " class="font-35-rem" src="assets/images/icons-default-profile.svg"></ion-icon>
+            <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="font-35-rem" src="assets/images/theme/gov/icons-profile.svg"></ion-icon>
+            <ion-icon *ngIf="ThemeService.currentTheme == 'doneIt' " class="font-35-rem" src="assets/images/theme/{{ThemeService.currentTheme}}/icons-profile.svg"></ion-icon>
 
           </div>
           <ion-label>
@@ -72,7 +72,7 @@
             <p>{{ attendee.EmailAddress }}</p>
           </ion-label>
           <div class="cursor-pointer" (click)="remove(attendee)">
-            <ion-icon class="font-35" src="assets/images/icons-delete-25.svg"></ion-icon>
+            <ion-icon class="font-35-rem" src="assets/images/icons-delete-25.svg"></ion-icon>
           </div>
         </ion-item>
       </ion-item-sliding>
diff --git a/src/app/pages/events/edit-event/edit-event.page.scss b/src/app/pages/events/edit-event/edit-event.page.scss
index 4fa564390..e1eb08a3b 100644
--- a/src/app/pages/events/edit-event/edit-event.page.scss
+++ b/src/app/pages/events/edit-event/edit-event.page.scss
@@ -1,3 +1,4 @@
+@import '~src/function.scss';
 
 .content{
     padding: 30px 20px 0 20px !important;
@@ -24,12 +25,12 @@
       }
   
       .title{
-        font-size: 25px;
+        font-size: rem(25);
       }
   
     }
       .ion-item-container{
-          margin: 15px auto;
+          margin: rem(15) auto;
           border: 1px solid #ebebeb;
           border-radius: 5px;
           padding-left: 10px;
@@ -49,11 +50,11 @@
           margin: 0px auto;
         }
         .ion-icon-class{
-          width: 45px;
-          height: 45px;
+          width: rem(45);
+          height: rem(45);
           float: left;
           padding: 10px;
-          font-size: 25px;
+          font-size: rem(25);
         }
         ion-select{
           padding-left: 5px;
@@ -61,7 +62,7 @@
         }
         .ion-input-class{
           width: calc(100% - 45px);
-          height: 45px;
+          height: rem(45);
           border: 1px solid #ebebeb;
           border-radius: 5px;
           padding-left: 5px;
@@ -79,19 +80,19 @@
         
         }
         .add-people{
-          width: 45px;
+          width: rem(45);
           float: right;
           overflow: auto;
-          font-size: 25px;
-          height: 45px;
+          font-size: rem(25);
+          height: rem(45);
           display: flex;
         }
         .list-people-title{
-          /* font-size: 13px; */
+          /* font-size: rem(13); */
           color: #797979;
         }
         .attach-document{
-          font-size: 15px;
+          font-size: rem(15);
           color: var(--title-text-color);
           margin: 5px 5px 5px 10px;
           padding: 5px;
@@ -99,39 +100,39 @@
         }
         .attach-icon{
           width: 37px;
-          font-size: 35px;
+          font-size: rem(35);
           float: left;
         }
         .attach-title-item{
           width: 100%;
-          font-size: 15px;
+          font-size: rem(15);
           color:var(--title-text-color);
         }
         /* SPAN */
         .span-left{
           float: left;
-          font-size: 15x;
+          font-size: rem(15);
         }
         .span-right{
         text-align: right;
         float: right;
-        font-size: 13px;
+        font-size: rem(13);
         }
         .container-footer{
             margin:0 auto;
             overflow: auto;
         }
         .button-cancel {
-            width: 170px;
-            height: 44px;
+            width: rem(170);
+            height: rem(44);
             border-radius: 22.5px;
             --background: #e0e9ee;
             --color: #061b52;
             margin:10px;
           }
           .button-save {
-            width: 170px;
-            height: 44px;
+            width: rem(170);
+            height: rem(44);
             border-radius: 22.5px;
             --background: #42b9fe;
             --color:#ffffff;
@@ -149,7 +150,7 @@
         /* Error Messages */
         .error{
           color:red;
-          font-size: 12px;
+          font-size: rem(12);
           font-weight: bold;
           padding-bottom: 20px;
         }
diff --git a/src/app/pages/events/event-detail-modal/event-detail-modal.page.scss b/src/app/pages/events/event-detail-modal/event-detail-modal.page.scss
index b94403c90..0d2783cd0 100644
--- a/src/app/pages/events/event-detail-modal/event-detail-modal.page.scss
+++ b/src/app/pages/events/event-detail-modal/event-detail-modal.page.scss
@@ -1,3 +1,5 @@
+@import '~src/function.scss';
+
 ion-item-group{
   margin: 15px;
 }
@@ -14,12 +16,12 @@ ion-item-group{
 .div-up h3{
   margin: 0;
   padding: 0;
-  font-size: 17px;
+  font-size: rem(17);
   width: 100%;
 }
 .div-icon{
   width: 10%;
-  font-size: 22px;
+  font-size: rem(22);
   float: left;
   color: #808080;
 }
@@ -35,7 +37,7 @@ ion-item-group{
 }
 .ion-icon-attach{
   color: #666666;
-  font-size: 20px;
+  font-size: rem(20);
 }
 
 .btn-attach{
@@ -70,14 +72,14 @@ ion-card{
   margin-bottom: 25px;
 }
 .ion-icon-delete{
-  font-size: 22px;
+  font-size: rem(22);
   color: red;
   background-color: white;
   padding-right: 5px;
 }
 .error{
   color:red;
-  font-size: 12px;
+  font-size: rem(12);
   font-weight: bold;
   padding-bottom: 20px;
 }
@@ -86,10 +88,10 @@ ion-card{
   margin-top: 10px;
 } */
 .attendees-icon{
-  font-size: 14px;
+  font-size: rem(14);
 }
 .see-more-button{
   text-transform: initial;
-  font-size: 16px;
+  font-size: rem(16);
 }
 
diff --git a/src/app/pages/events/event-detail/event-detail.page.scss b/src/app/pages/events/event-detail/event-detail.page.scss
index 8c8bf1543..415f853d6 100644
--- a/src/app/pages/events/event-detail/event-detail.page.scss
+++ b/src/app/pages/events/event-detail/event-detail.page.scss
@@ -14,12 +14,12 @@ ion-item-group{
 .div-up h3{
   margin: 0;
   padding: 0;
-  font-size: 17px;
+  font-size: rem(17);
   width: 100%;
 }
 .div-icon{
   width: 10%;
-  font-size: 22px;
+  font-size: rem(22);
   float: left;
   color: #808080;
 }
@@ -35,7 +35,7 @@ ion-item-group{
 }
 .ion-icon-attach{
   color: #666666;
-  font-size: 20px;
+  font-size: rem(20);
 }
 
 .btn-attach{
@@ -70,14 +70,14 @@ ion-card{
   margin-bottom: 25px;
 }
 .ion-icon-delete{
-  font-size: 22px;
+  font-size: rem(22);
   color: red;
   background-color: white;
   padding-right: 5px;
 }
 .error{
   color:red;
-  font-size: 12px;
+  font-size: rem(12);
   font-weight: bold;
   padding-bottom: 20px;
 }
@@ -86,11 +86,11 @@ ion-card{
   margin-top: 10px;
 } */
 .attendees-icon{
-  font-size: 14px;
+  font-size: rem(14);
 }
 .see-more-button{
   text-transform: initial;
-  font-size: 16px;
+  font-size: rem(16);
 }
 
 .header-content{
@@ -100,7 +100,7 @@ ion-card{
 }
 .header-icon-left{
   width: 36px;
-  font-size: 33px;
+  font-size: rem(33);
   color: #42b9fe;
   float: left;
   border: 1px solid red;
@@ -108,7 +108,7 @@ ion-card{
 .header-title{
   width: 300px;
   font-family: Roboto;
-  font-size: 25px;
+  font-size: rem(25);
   margin: 0 5px 0 5px;
   padding: 0;
   color:#000;
diff --git a/src/app/pages/events/events.page.scss b/src/app/pages/events/events.page.scss
index cd75dcd6c..7ffe5eb09 100644
--- a/src/app/pages/events/events.page.scss
+++ b/src/app/pages/events/events.page.scss
@@ -46,7 +46,7 @@ ion-toolbar{
     border: 0!important;
 
     .div-search{
-      font-size: 45px;
+      font-size: rem(45);
       float: left;
       margin: 0 0 0 10px
     }
@@ -60,7 +60,7 @@ ion-toolbar{
       width: 100%;
     }
     .div-profile{
-      font-size: 45px;
+      font-size: rem(45);
       float: right;
       margin-right: 10px;
     }
@@ -75,14 +75,14 @@ ion-toolbar{
   }
   .header-large{
     font-family: Arial, Helvetica, sans-serif;
-    font-size: 12.5pt;
+    font-size: rem(17);
     /* font-weight: 600; */
     background: transparent;
     color: #ffffff;
   }
   .header-xsmall{
     font-family: Arial, Helvetica, sans-serif;
-    font-size: 9.7pt;
+    font-size: rem(13);
     font-weight: bold;
     padding-bottom: 3.5px;
     margin-bottom: 3.5px;
@@ -90,16 +90,16 @@ ion-toolbar{
     background: transparent;
   }
   .header-medium{
-    font-size: 12pt;
+    font-size: rem(16);
     text-align: left;
     font-family: roboto;
     background: transparent;
     margin-right: 5px;
-    line-height: 25px;
+    line-height: rem(25);
   }
 
   .p-small{
-    font-size: 13pt;
+    font-size: rem(17);
     margin-top: 13px;
     color: var(--header-tab-text-white);
     margin-right: 25px !important;
@@ -109,7 +109,7 @@ ion-toolbar{
 
   /* CONTENT */
   .item-list-small{
-      font-size: 14px;
+      font-size: rem(14);
       overflow: auto;
     }
     .ion-item-class{
@@ -150,12 +150,12 @@ ion-toolbar{
     .div-up h3{
       margin: 0;
       padding: 0;
-      font-size: 17px;
+      font-size: rem(17);
       width: 100%;
     }
     .div-icon{
       width: 10%;
-      font-size: 22px;
+      font-size: rem(22);
       float: left;
       color: #808080;
     }
@@ -177,11 +177,11 @@ ion-toolbar{
       padding: 0 0 0 12px;
     }
     .div-content-Oficial h3, .div-content-Pessoal h3{
-      font-size: 14pt;
+      font-size: rem(19);
       /* border: 1px solid red; */
     }
     .div-content-Oficial p, .div-content-Pessoal p{
-      font-size: 12pt;
+      font-size: rem(16);
       color: rgb(94, 92, 92);
       padding: 0 !important;
       margin: 0 !important;
@@ -199,7 +199,7 @@ ion-toolbar{
       text-align: center;
       display: block;
       color: var(--subtitle-text-color);
-      font-size: 16px;
+      font-size: rem(16);
       margin: 0 auto;
       min-height: 19px;
     }
@@ -220,7 +220,7 @@ ion-toolbar{
     }
     .ion-icon-attach{
       color: #666666;
-      font-size: 20px;
+      font-size: rem(20);
     }
     /* NEW CSS FOR TOGGLE BUTTON */
     .toggleBox{
@@ -247,7 +247,7 @@ ion-toolbar{
       position: absolute;
       content: "";
       left: 0;
-      width: 30px;
+      width: rem(30);
       height: 30px;
       background: #fff;
       border-radius: 50%;
@@ -270,7 +270,7 @@ ion-toolbar{
       position: absolute;
       color: #fff;
       font-weight: 600;
-      font-size: 12px;
+      font-size: rem(12);
       pointer-events: none;
     }
     .onbtn{
@@ -298,11 +298,11 @@ ion-toolbar{
 .event-number{
   color: var(--header-tab-text-white);
   font-family: Roboto;
-  font-size: 15px;
+  font-size: rem(15);
 
   bold{
     font-family: Roboto;
-    font-size: 25px;
+    font-size: rem(25);
     text-align: right;
     color: var(--white);
   }
@@ -333,7 +333,7 @@ ion-toolbar{
   .meeting-description {
     margin-top: 2px;
     font-family: Roboto;
-    font-size: 15px;
+    font-size: rem(15);
     color: var(--header-tab-text-white);
   }
 }
@@ -373,19 +373,19 @@ ion-toolbar{
 
       .icon{
         color: #e8e8e8;
-        height: 35px;
-        width: 35px;
+        height: rem(35);
+        width: rem(35);
         margin-right: 10px;
       }
       .text{
         font-family: Roboto;
-        font-size: 20px;
+        font-size: rem(20);
         color: black;
       }
     }
     .icon-next {
       color: #e8e8e8;
-      font-size: 35px;
+      font-size: rem(35);
     }
     .icon-next-color {
       color: #e8e8e8;
@@ -427,18 +427,18 @@ ion-toolbar{
           .time-start{
             color: #797979 !important;
             font-family: Roboto;
-            font-size: 13px;
+            font-size: rem(13);
           }
           .time-end{
             color: #797979 !important;
             font-family: Roboto;
-            font-size: 13px;
+            font-size: rem(13);
           }
         }
         .schedule-date{
           margin-right: 10px;
           color: #797979 !important;
-          font-size: 13px;
+          font-size: rem(13);
         }
         .schedule-details{
           display: flex;
@@ -449,7 +449,7 @@ ion-toolbar{
           align-items: baseline;
           .location{
             font-family: Roboto;
-            font-size: 15px;
+            font-size: rem(15);
             color: black;
             min-height: 19px;
             width: 100%;
@@ -458,7 +458,7 @@ ion-toolbar{
           .description{
             width: 100%;
             font-family: Roboto;
-            font-size: 13px;
+            font-size: rem(13);
             font-weight: bold;
             //color: #0d89d1;
             color: var(--title-text-color)
@@ -471,7 +471,7 @@ ion-toolbar{
         }
         .color{
           width: 5px;
-          height: 40px;
+          height: rem(40);
           border-top-right-radius: 5px;
           border-bottom-right-radius: 5px;
           background-color: #f05d5e;
@@ -488,7 +488,7 @@ ion-toolbar{
   .resume{
     .title{
       font-family: Roboto;
-      font-size: 15px;
+      font-size: rem(15);
       font-weight: 500;
       color: #797979;
       margin-bottom: 5px;
@@ -496,7 +496,7 @@ ion-toolbar{
     }
     .event-num, .first-event-time{
       font-family: Roboto;
-      font-size: 15px;
+      font-size: rem(15);
       display: block;
       color: black;
     }
@@ -621,7 +621,7 @@ ion-title{
       line-height: 15px;
     }
     span {
-      font-size: 15px;
+      font-size: rem(15);
       font-weight: 600;
     }
   }
diff --git a/src/app/pages/gabinete-digital/despachos-pr/despacho-pr/despacho-pr.page.html b/src/app/pages/gabinete-digital/despachos-pr/despacho-pr/despacho-pr.page.html
index 17cbfd6f8..b2eba1692 100644
--- a/src/app/pages/gabinete-digital/despachos-pr/despacho-pr/despacho-pr.page.html
+++ b/src/app/pages/gabinete-digital/despachos-pr/despacho-pr/despacho-pr.page.html
@@ -3,7 +3,7 @@
     <div class="content d-flex flex-column" *ngIf="task">
       <div class="main-header" >
         <div class="title-content width-100 d-flex justify-space-between align-center">
-          <div class="font-30 cursor-pointer align-center d-flex" (click)="goBack()" defaultHref="#">
+          <div class="font-30-rem cursor-pointer align-center d-flex" (click)="goBack()" defaultHref="#">
             <ion-icon *ngIf="ThemeService.currentTheme == 'default' " slot="end" src='assets/images/icons-arrow-arrow-left.svg'></ion-icon>
             <ion-icon *ngIf="ThemeService.currentTheme == 'doneIt' " src="assets/images/theme/doneIt/icons-calendar-arrow-left.svg"></ion-icon>
             <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " slot="end" src='assets/images/theme/gov/icons-calendar-arrow-left.svg'></ion-icon>
@@ -57,7 +57,7 @@
             </ion-item>
           </div>
           <div *ngIf="fulltask.workflowInstanceDataFields.TaskMessage">
-            <h5>Detalhes</h5>
+            <h5 class="font-17-rem">Detalhes</h5>
             <ion-item class="ion-no-margin ion-no-padding">
                 <pre class="width-100 text">{{ fulltask.workflowInstanceDataFields.TaskMessage }} </pre>
             </ion-item>
@@ -65,7 +65,7 @@
         </div>
         <div class="bottom-content width-100">
           <ion-list *ngIf="fulltask.Documents">
-            <h5>Documentos Anexados</h5>
+            <h5 class="font-17-rem">Documentos Anexados</h5>
             <ion-item *ngFor="let attachment of fulltask.Documents"
             class="ion-no-margin ion-no-padding cursor-pointer">
             <ion-label
diff --git a/src/app/pages/gabinete-digital/despachos-pr/despacho-pr/despacho-pr.page.scss b/src/app/pages/gabinete-digital/despachos-pr/despacho-pr/despacho-pr.page.scss
index 005a549ec..0f0cdfefd 100644
--- a/src/app/pages/gabinete-digital/despachos-pr/despacho-pr/despacho-pr.page.scss
+++ b/src/app/pages/gabinete-digital/despachos-pr/despacho-pr/despacho-pr.page.scss
@@ -14,7 +14,7 @@
   color:#d30a0a !important;
 }
 .btn-size{
-  font-size: 18px !important;
+  font-size: rem(18) !important;
 }
 .main-header{
   font-family: Roboto;
@@ -40,7 +40,7 @@
         .right{
           padding: 0!important;
           float: right;
-          font-size: 25px;
+          font-size: rem(25);
           color: #0782c9;
           margin: 5px 0 0 0;
         }
@@ -51,14 +51,14 @@
         margin: 0 auto;
 
         .header-bottom-icon{
-          width: 30px;
-          font-size: 25px;
+          width: rem(30);
+          font-size: rem(25);
           float: left;
           padding: 2px;
         }
         .header-bottom-contacts{
           width: 275px;
-          font-size: 15px;
+          font-size: rem(15);
           color: #797979;
           white-space: nowrap;
           overflow: hidden;
@@ -70,16 +70,16 @@
       }
 
         .title{
-          font-size: 25px;
+          font-size: rem(25);
           overflow: auto;
           float: left;
           padding-top: 4px;
           padding-left: 5px;
         }
         .div-icon{
-          width: 40px;
+          width: rem(40);
           float: right;
-          font-size: 35px;
+          font-size: rem(35);
           overflow: auto;
           padding: 1px;
         }
@@ -97,7 +97,7 @@ ion-button{
 .upper-content{
   font-family: Roboto;
   margin-left: 36px;
-  font-size: 18px;
+  font-size: rem(18);
 
   .label{
       border-radius: 20px;
@@ -105,13 +105,14 @@ ion-button{
       float: right;
       padding: 5px 13.5px 5px 13.5px;
       color: #fff;
+      font-size: rem(14);
   }
 
   .button-calendar-type ion-button{
-    height: 25px;
+    height: rem(25);
   }
   .content-details{
-    font-size: 17px;
+    font-size: rem(17);
     .date{
       color: #797979;
     }
@@ -119,7 +120,7 @@ ion-button{
 }
 .middle-conten{
  .middle-content p{
-    font-size: 16px;
+    font-size: rem(16);
   }
 }
 .bottom-content{
@@ -127,11 +128,11 @@ ion-button{
   margin: 0 auto;
 
   .bottom-content h3{
-    font-size: 16px;
+    font-size: rem(16);
     margin: 0 0 0 10px;
   }
   .attach-document{
-    font-size: 15px;
+    font-size: rem(15);
     color: var(--title-text-color);
     margin: 5px 5px 5px 10px;
     padding: 5px;
@@ -139,11 +140,11 @@ ion-button{
   }
   .attach-icon{
     width: 37px;
-    font-size: 35px;
+    font-size: rem(35);
     float: left;
   }
   .attach-title-item{
-    font-size: 18px;
+    font-size: rem(18);
     width: 100%;
     color:#0d89d1;
     padding-bottom: 5px;
@@ -151,12 +152,12 @@ ion-button{
   /* SPAN */
   .span-left{
     float: left;
-    font-size: 15x;
+    font-size: rem(15);
   }
   .span-right{
   text-align: right;
   float: right;
-  font-size: 13px;
+  font-size: rem(13);
   }
 }
 .aside-right{
@@ -170,7 +171,7 @@ ion-button{
     .arrow-right-icon{
         width: 37px;
         float: right;
-        font-size: 35px;
+        font-size: rem(35);
         overflow: hidden;
     }
   }
@@ -181,7 +182,7 @@ ion-button{
 
     .btn-ok, .btn-cancel, .btn-delete{
       height: auto !important;
-      font-size: 16px !important;
+      font-size: rem(16) !important;
       width: 100% !important;
       margin-bottom: 10px !important;
       padding: 15px !important;
@@ -243,7 +244,7 @@ ion-button{
   width: 100%;
   justify-content: space-between;
   align-items: center;
-  font-size: 11pt;
+  font-size: rem(15);
   .option-desc-line {
     height: 1px;
     flex-grow: 1;
diff --git a/src/app/pages/gabinete-digital/despachos-pr/despachos-pr.page.scss b/src/app/pages/gabinete-digital/despachos-pr/despachos-pr.page.scss
index 10e405559..e22e625d9 100644
--- a/src/app/pages/gabinete-digital/despachos-pr/despachos-pr.page.scss
+++ b/src/app/pages/gabinete-digital/despachos-pr/despachos-pr.page.scss
@@ -164,7 +164,7 @@ ion-item{
   .exp-icon{
     width: fit-content;
     float: right;
-   /* font-size: 13px; */
+   /* font-size: rem(13); */
     margin: 0 !important;
     padding: 0 !important;
 
@@ -214,7 +214,7 @@ ion-item{
   }
 }
 .exp-bottom-detail{
-  font-size: 8pt;
+  font-size: rem(10);
   width: 100%;
   overflow: auto;
   padding-left: 3px;
@@ -222,7 +222,7 @@ ion-item{
   .exp-remetente{
     //width: 200px;
     font-family: Roboto;
-   /*  font-size: 13px; */
+   /*  font-size: rem(13); */
     font-weight: normal;
     color: #000000;
     float: left;
diff --git a/src/app/pages/gabinete-digital/despachos/despacho/despacho.page.html b/src/app/pages/gabinete-digital/despachos/despacho/despacho.page.html
index f15cd40ac..23bc35351 100644
--- a/src/app/pages/gabinete-digital/despachos/despacho/despacho.page.html
+++ b/src/app/pages/gabinete-digital/despachos/despacho/despacho.page.html
@@ -3,7 +3,7 @@
     <div class="content d-flex flex-column" *ngIf="task">
       <div class="main-header">
         <div class="title-content width-100 d-flex justify-space-between align-center">
-          <div class=" btn-dismiss font-30 cursor-pointer" (click)="goBack()" defaultHref="#">
+          <div class=" btn-dismiss font-30-rem cursor-pointer" (click)="goBack()" defaultHref="#">
             <ion-icon  *ngIf="ThemeService.currentTheme == 'default' " slot="end" src='assets/images/icons-arrow-arrow-left.svg'></ion-icon>
             <ion-icon *ngIf="ThemeService.currentTheme == 'doneIt' " src="assets/images/theme/doneIt/icons-calendar-arrow-left.svg"></ion-icon>
             <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " slot="end" src='assets/images/theme/gov/icons-calendar-arrow-left.svg'></ion-icon>
@@ -44,7 +44,7 @@
             </ion-label>
           </ion-item>
           <div *ngIf="cc.length > 0">
-            <h5>Com conhecimento</h5>
+            <h5 class="font-17-rem">Com conhecimento</h5>
             <ion-item class="ion-no-margin ion-no-padding">
               <ion-label>
                 <div *ngFor="let c of cc">
@@ -54,7 +54,7 @@
             </ion-item>
           </div>
           <div *ngIf="fulltask.workflowInstanceDataFields.TaskMessage">
-            <h5>Detalhes</h5>
+            <h5 class="font-17-rem">Detalhes</h5>
             <ion-item class="ion-no-margin ion-no-padding">
                 <pre class="width-100 text">{{ fulltask.workflowInstanceDataFields.TaskMessage }} </pre>
             </ion-item>
@@ -62,7 +62,7 @@
         </div>
         <div class="bottom-content width-100">
           <ion-list>
-            <h5>Documentos Anexados</h5>
+            <h5 class="font-17-rem">Documentos Anexados</h5>
             <ion-item class="ion-no-margin ion-no-padding cursor-pointer" *ngFor="let Document of fulltask.Documents">
               <ion-label class="d-block" (click)="viewDocument(Document.DocId, Document)">
                 <p class="attach-title-item">{{ Document.Assunto || "Sem assunto" }}<span class="span-right color-red btn-size"><ion-icon hidden name="close"></ion-icon></span></p>
diff --git a/src/app/pages/gabinete-digital/despachos/despacho/despacho.page.scss b/src/app/pages/gabinete-digital/despachos/despacho/despacho.page.scss
index ff9d8918c..c065d9c07 100644
--- a/src/app/pages/gabinete-digital/despachos/despacho/despacho.page.scss
+++ b/src/app/pages/gabinete-digital/despachos/despacho/despacho.page.scss
@@ -14,7 +14,7 @@
   color:#d30a0a !important;
 }
 .btn-size{
-  font-size: 18px !important;
+  font-size: rem(18) !important;
 }
 .main-header{
   display: flex;
@@ -31,14 +31,14 @@
     .title{
       width: fit-content;
       height: auto;
-      font-size: 25px;
+      font-size: rem(25);
       overflow: auto;
       float: left;
       padding-left: 5px;
     }
     .div-icon{
-      width: 40px !important;
-      font-size: 35px !important;
+      width: rem(40) !important;
+      font-size: rem(35) !important;
       text-align: start !important;
       padding: 1px;
     }
@@ -56,7 +56,7 @@ ion-button{
   font-family: Roboto;
   margin-top: 15px;
   margin-left: 36px;
-  font-size: 18px;
+  font-size: rem(18);
 
   .label{
       border-radius: 20px;
@@ -64,13 +64,14 @@ ion-button{
       float: right;
       padding: 5px 13.5px 5px 13.5px;
       color: #fff;
+      font-size: rem(14);
   }
 
   .button-calendar-type ion-button{
-    height: 25px;
+    height: rem(25);
   }
   .content-details{
-    font-size: 17px;
+    font-size: rem(17);
     .date{
       color: #797979;
     }
@@ -78,7 +79,7 @@ ion-button{
 }
 .middle-conten{
  .middle-content p{
-    font-size: 16px;
+    font-size: rem(16);
   }
 }
 .bottom-content{
@@ -86,11 +87,11 @@ ion-button{
   margin: 0 auto;
 
   .bottom-content h3{
-    font-size: 16px;
+    font-size: rem(16);
     margin: 0 0 0 10px;
   }
   .attach-document{
-    font-size: 15px;
+    font-size: rem(15);
     color: var(--title-text-color);
     margin: 5px 5px 5px 10px;
     padding: 5px;
@@ -98,11 +99,11 @@ ion-button{
   }
   .attach-icon{
     width: 37px;
-    font-size: 35px;
+    font-size: rem(35);
     float: left;
   }
   .attach-title-item{
-    font-size: 18px;
+    font-size: rem(18);
     width: 100%;
     color:#0d89d1;
     padding-bottom: 5px;
@@ -110,12 +111,12 @@ ion-button{
   /* SPAN */
   .span-left{
     float: left;
-    font-size: 15x;
+    font-size: rem(15);
   }
   .span-right{
   text-align: right;
   float: right;
-  font-size: 13px;
+  font-size: rem(13);
   }
 }
 .aside-right{
@@ -129,7 +130,7 @@ ion-button{
     .arrow-right-icon{
         width: 37px;
         float: right;
-        font-size: 35px;
+        font-size: rem(35);
         overflow: hidden;
     }
   }
@@ -140,7 +141,7 @@ ion-button{
 
     .btn-ok, .btn-cancel, .btn-delete{
       height: auto !important;
-      font-size: 16px !important;
+      font-size: rem(16) !important;
       width: 100% !important;
       margin-bottom: 10px !important;
       padding: 15px !important;
@@ -202,7 +203,7 @@ ion-button{
   width: 100%;
   justify-content: space-between;
   align-items: center;
-  font-size: 11pt;
+  font-size: rem(15);
   .option-desc-line {
     height: 1px;
     flex-grow: 1;
diff --git a/src/app/pages/gabinete-digital/despachos/despachos.page.scss b/src/app/pages/gabinete-digital/despachos/despachos.page.scss
index 330b8449f..9af2d194a 100644
--- a/src/app/pages/gabinete-digital/despachos/despachos.page.scss
+++ b/src/app/pages/gabinete-digital/despachos/despachos.page.scss
@@ -144,7 +144,7 @@ ion-item{
   .exp-icon{
     width: fit-content;
     float: right;
-   /* font-size: 13px; */
+   /* font-size: rem(13); */
     margin: 0 !important;
     padding: 0 !important;
 
@@ -202,7 +202,7 @@ ion-item{
   .exp-remetente{
     //width: 200px;
     font-family: Roboto;
-   /*  font-size: 13px; */
+   /*  font-size: rem(13); */
     font-weight: normal;
     color: #000000;
     float: left;
diff --git a/src/app/pages/gabinete-digital/diplomas-assinar/diploma-assinar/diploma-assinar.page.html b/src/app/pages/gabinete-digital/diplomas-assinar/diploma-assinar/diploma-assinar.page.html
index 69e9c050c..27f4dcf66 100644
--- a/src/app/pages/gabinete-digital/diplomas-assinar/diploma-assinar/diploma-assinar.page.html
+++ b/src/app/pages/gabinete-digital/diplomas-assinar/diploma-assinar/diploma-assinar.page.html
@@ -7,7 +7,7 @@
     <div class="content d-flex flex-column" *ngIf="task">
       <div class="main-header">
         <div class="title-content width-100 d-flex justify-space-between">
-          <div class="font-30 cursor-pointer" (click)="goBack()" defaultHref="#">
+          <div class="font-30-rem cursor-pointer" (click)="goBack()" defaultHref="#">
             <ion-icon  *ngIf="ThemeService.currentTheme == 'default' " slot="end" src='assets/images/icons-arrow-arrow-left.svg'></ion-icon>
             <ion-icon *ngIf="ThemeService.currentTheme == 'doneIt' " src="assets/images/theme/doneIt/icons-calendar-arrow-left.svg"></ion-icon>
             <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " slot="end" src='assets/images/theme/gov/icons-calendar-arrow-left.svg'></ion-icon>
@@ -47,7 +47,7 @@
           </ion-label>
         </ion-item>
         <div *ngIf="cc.length > 0">
-          <h5>Com conhecimento</h5>
+          <h5 class="font-17-rem">Com conhecimento</h5>
           <ion-item class="ion-no-margin ion-no-padding">
             <ion-label>
               <div *ngFor="let c of cc">
@@ -57,7 +57,7 @@
           </ion-item>
         </div>
         <div *ngIf="fulltask.workflowInstanceDataFields.TaskMessage">
-          <h5>Detalhes</h5>
+          <h5 class="font-17-rem">Detalhes</h5>
           <ion-item class="ion-no-margin ion-no-padding">
             <pre class="width-100 text">{{ fulltask.workflowInstanceDataFields.TaskMessage }} </pre>
           </ion-item>
@@ -65,7 +65,7 @@
       </div>
       <div class="bottom-content width-100">
         <ion-list>
-          <h5>Documentos Anexados</h5>
+          <h5 class="font-17-rem">Documentos Anexados</h5>
           <ion-item *ngFor="let attachment of attachments"
             class="ion-no-margin ion-no-padding cursor-pointer"
           >
diff --git a/src/app/pages/gabinete-digital/diplomas-assinar/diploma-assinar/diploma-assinar.page.scss b/src/app/pages/gabinete-digital/diplomas-assinar/diploma-assinar/diploma-assinar.page.scss
index 2199028ff..674600da3 100644
--- a/src/app/pages/gabinete-digital/diplomas-assinar/diploma-assinar/diploma-assinar.page.scss
+++ b/src/app/pages/gabinete-digital/diplomas-assinar/diploma-assinar/diploma-assinar.page.scss
@@ -32,7 +32,7 @@ ion-content, .header-2, .main-content{
   color:#d30a0a !important;
 }
 .btn-size{
-  font-size: 18px !important;
+  font-size: rem(18) !important;
 }
 .main-header{
   font-family: Roboto;
@@ -59,7 +59,7 @@ ion-content, .header-2, .main-content{
         .right{
           padding: 0!important;
           float: right;
-          font-size: 25px;
+          font-size: rem(25);
           color: #0782c9;
           margin: 5px 0 0 0;
         }
@@ -70,14 +70,14 @@ ion-content, .header-2, .main-content{
         margin: 0 auto;
 
         .header-bottom-icon{
-          width: 30px;
-          font-size: 25px;
+          width: rem(30);
+          font-size: rem(25);
           float: left;
           padding: 2px;
         }
         .header-bottom-contacts{
           width: 275px;
-          font-size: 15px;
+          font-size: rem(15);
           color: #797979;
           white-space: nowrap;
           overflow: hidden;
@@ -89,16 +89,16 @@ ion-content, .header-2, .main-content{
       }
 
         .title{
-          font-size: 25px;
+          font-size: rem(25);
           overflow: auto;
           float: left;
           padding-top: 4px;
           padding-left: 5px;
         }
         .div-icon{
-          width: 40px;
+          width: rem(40);
           float: right;
-          font-size: 35px;
+          font-size: rem(35);
           overflow: auto;
           padding: 1px;
         }
@@ -116,7 +116,7 @@ ion-button{
 .upper-content{
   font-family: Roboto;
   margin-left: 36px;
-  font-size: 18px;
+  font-size: rem(18);
 
   .label{
       border-radius: 20px;
@@ -124,13 +124,14 @@ ion-button{
       float: right;
       padding: 5px 13.5px 5px 13.5px;
       color: #fff;
+      font-size: rem(14);
   }
 
   .button-calendar-type ion-button{
-    height: 25px;
+    height: rem(25);
   }
   .content-details{
-    font-size: 17px;
+    font-size: rem(17);
     .date{
       color: #797979;
     }
@@ -138,7 +139,7 @@ ion-button{
 }
 .middle-conten{
  .middle-content p{
-    font-size: 16px;
+    font-size: rem(16);
   }
 }
 .bottom-content{
@@ -146,11 +147,11 @@ ion-button{
   margin: 0 auto;
 
   .bottom-content h3{
-    font-size: 16px;
+    font-size: rem(16);
     margin: 0 0 0 10px;
   }
   .attach-document{
-    font-size: 15px;
+    font-size: rem(15);
     color: var(--title-text-color);
     margin: 5px 5px 5px 10px;
     padding: 5px;
@@ -158,11 +159,11 @@ ion-button{
   }
   .attach-icon{
     width: 37px;
-    font-size: 35px;
+    font-size: rem(35);
     float: left;
   }
   .attach-title-item{
-    font-size: 18px;
+    font-size: rem(18);
     width: 100%;
     color:#0d89d1;
     padding-bottom: 5px;
@@ -170,12 +171,12 @@ ion-button{
   /* SPAN */
   .span-left{
     float: left;
-    font-size: 15x;
+    font-size: rem(15);
   }
   .span-right{
   text-align: right;
   float: right;
-  font-size: 13px;
+  font-size: rem(13);
   }
 }
 .aside-right{
@@ -189,7 +190,7 @@ ion-button{
     .arrow-right-icon{
         width: 37px;
         float: right;
-        font-size: 35px;
+        font-size: rem(35);
         overflow: hidden;
     }
   }
@@ -200,7 +201,7 @@ ion-button{
 
     .btn-ok, .btn-cancel, .btn-delete{
       height: auto !important;
-      font-size: 16px !important;
+      font-size: rem(16) !important;
       width: 100% !important;
       margin-bottom: 10px !important;
       padding: 15px !important;
diff --git a/src/app/pages/gabinete-digital/diplomas-assinar/diplomas-assinar.page.scss b/src/app/pages/gabinete-digital/diplomas-assinar/diplomas-assinar.page.scss
index eb3ab6974..34a08d461 100644
--- a/src/app/pages/gabinete-digital/diplomas-assinar/diplomas-assinar.page.scss
+++ b/src/app/pages/gabinete-digital/diplomas-assinar/diplomas-assinar.page.scss
@@ -20,7 +20,7 @@
   
 .title{
     font-family: Roboto;
-    font-size: 25px;
+    font-size: rem(25);
     color:#000;
     overflow: auto;
 
@@ -40,13 +40,13 @@
     justify-content: center;
 
     .bottom-text{
-      font-size: 15px !important;
+      font-size: rem(15) !important;
       font-family: Roboto !important;
       color: #0d89d1 !important;
     }
   }
 .item-list-small{
-    font-size: 11px;
+    font-size:  rem(11);
     overflow: hidden;
   }
   .ion-item-class{
@@ -85,12 +85,12 @@ ion-item{
   .div-content-expediente h3, .div-content-pendentes h3{
     margin: 0;
     padding: 0;
-    font-size: 14pt;
+    font-size: rem(19);
     width: 100%;
   }
   .div-icon{
     width: 10%;
-    font-size: 20px;
+    font-size: rem(20);
     float: left;
     color: #808080;
   }
@@ -100,20 +100,20 @@ ion-item{
   
   }
   .div-content-expediente p, .div-content-pendentes p{
-    font-size: 14pt;
+    font-size: rem(19);
     color: rgb(94, 92, 92);
     padding: 0;
     margin: 0;
   }
   .span-left{
       float: left;
-      font-size: 12px;
+      font-size: rem(12);
       padding-left: 18px;
   }
   .span-right{
     text-align: right;
     float: right;
-    font-size: 12px;
+    font-size: rem(12);
     padding-right: 18px;
 }
 
@@ -137,7 +137,7 @@ ion-item{
   width: 100%;
   float: left;
   font-family: Roboto;
-  font-size: 12pt;
+  font-size: rem(16);
   font-weight: 700;
   color: var(--title-text-color);
   padding-left: 3px;
@@ -150,17 +150,17 @@ ion-item{
   .exp-icon{
     width: fit-content;
     float: right;
-   /* font-size: 13px; */
+   /* font-size: rem(13); */
     margin: 0 !important;
     padding: 0 !important;
 
     ion-icon{
-      font-size: 12pt;
+      font-size: rem(16);
       color: #42b9fe;
       float: left;
     }
     label{
-      font-size: 10pt;
+      font-size: rem(13);
     }
   }
 }
@@ -169,7 +169,7 @@ ion-item{
 
 }
 .exp-middle-detail{
-  font-size: 12pt;
+  font-size: rem(16);
   width: 100%;
   overflow: auto;
 
@@ -180,7 +180,7 @@ ion-item{
     .label{
       border-radius: 15px;
       background: var(--label-bg-color);
-      /* font-size: 12px; */
+      /* font-size: rem(12); */
       float: right;
       padding: 2.5px 13.5px 2.5px 13.5px;
       color: #fff;
@@ -189,7 +189,7 @@ ion-item{
   .exp-date{
     width: auto;
     font-family: Roboto;
-    font-size: 10pt;
+    font-size: rem(13);
     font-weight: normal;
     font-stretch: normal;
     font-style: normal;
@@ -200,7 +200,7 @@ ion-item{
   }
 }
 .exp-bottom-detail{
-  font-size: 8pt;
+  font-size: rem(10);
   width: 100%;
   overflow: auto;
   padding-left: 3px;
@@ -208,7 +208,7 @@ ion-item{
   .exp-remetente{
     //width: 200px;
     font-family: Roboto;
-   /*  font-size: 13px; */
+   /*  font-size: rem(13); */
     font-weight: normal;
     color: #000000;
     float: left;
@@ -222,7 +222,7 @@ ion-item{
   overflow: auto;
 }
 .div-search{
-  font-size: 45px;
+  font-size: rem(45);
   float: left;
   margin: 0 0 0 10px
 }
@@ -236,7 +236,7 @@ ion-item{
   width: 100%;
 }
 .div-profile{
-  font-size: 45px;
+  font-size: rem(45);
   float: right;
   margin-right: 10px;
 }
\ No newline at end of file
diff --git a/src/app/pages/gabinete-digital/diplomas-gerar/diplomas-gerar.page.scss b/src/app/pages/gabinete-digital/diplomas-gerar/diplomas-gerar.page.scss
index 0de25249d..c98ea15cc 100644
--- a/src/app/pages/gabinete-digital/diplomas-gerar/diplomas-gerar.page.scss
+++ b/src/app/pages/gabinete-digital/diplomas-gerar/diplomas-gerar.page.scss
@@ -20,7 +20,7 @@ ion-content, .header-2, .main-content{
 
 .title{
     font-family: Roboto;
-    font-size: 25px;
+    font-size: rem(25);
     color:#000;
     overflow: auto;
 
@@ -34,7 +34,7 @@ ion-content, .header-2, .main-content{
     }
   }
 .item-list-small{
-    font-size: 11px;
+    font-size:  rem(11);
     overflow: hidden;
   }
   .ion-item-class{
@@ -77,12 +77,12 @@ ion-item{
   .div-content-expediente h3, .div-content-pendentes h3{
     margin: 0;
     padding: 0;
-    font-size: 14pt;
+    font-size: rem(19);
     width: 100%;
   }
   .div-icon{
     width: 10%;
-    font-size: 20px;
+    font-size: rem(20);
     float: left;
     color: #808080;
   }
@@ -92,7 +92,7 @@ ion-item{
   
   }
   .div-content-expediente p, .div-content-pendentes p{
-    font-size: 14pt;
+    font-size: rem(19);
     color: rgb(94, 92, 92);
     padding: 0;
     margin: 0;
@@ -100,14 +100,14 @@ ion-item{
   .span-left{
       /* border: 1px solid red; */
       float: left;
-      font-size: 12px;
+      font-size: rem(12);
       padding-left: 18px;
   }
   .span-right{
     /* border: 1px solid blue; */
     text-align: right;
     float: right;
-    font-size: 12px;
+    font-size: rem(12);
     padding-right: 18px;
 }
 
@@ -131,7 +131,7 @@ ion-item{
   width: 100%;
   float: left;
   font-family: Roboto;
-  font-size: 12pt;
+  font-size: rem(16);
   font-weight: 700;
   color: var(--title-text-color);
   padding-left: 3px;
@@ -144,17 +144,17 @@ ion-item{
   .exp-icon{
     width: fit-content;
     float: right;
-   /* font-size: 13px; */
+   /* font-size: rem(13); */
     margin: 0 !important;
     padding: 0 !important;
 
     ion-icon{
-      font-size: 12pt;
+      font-size: rem(16);
       color: #42b9fe;
       float: left;
     }
     label{
-      font-size: 10pt;
+      font-size: rem(13);
     }
   }
 }
@@ -163,7 +163,7 @@ ion-item{
 
 }
 .exp-middle-detail{
-  font-size: 12pt;
+  font-size: rem(16);
   width: 100%;
   overflow: auto;
 
@@ -183,7 +183,7 @@ ion-item{
   .exp-date{
     width: auto;
     font-family: Roboto;
-    font-size: 10pt;
+    font-size: rem(13);
     font-weight: normal;
     font-stretch: normal;
     font-style: normal;
@@ -194,7 +194,7 @@ ion-item{
   }
 }
 .exp-bottom-detail{
-  font-size: 8pt;
+  font-size: rem(10);
   width: 100%;
   overflow: auto;
   padding-left: 3px;
@@ -202,7 +202,7 @@ ion-item{
   .exp-remetente{
     //width: 200px;
     font-family: Roboto;
-   /*  font-size: 13px; */
+   /*  font-size: rem(13); */
     font-weight: normal;
     color: #000000;
     float: left;
@@ -216,7 +216,7 @@ ion-item{
   overflow: auto;
 }
 .div-search{
-  font-size: 45px;
+  font-size: rem(45);
   float: left;
   margin: 0 0 0 10px
 }
@@ -230,7 +230,7 @@ ion-item{
   width: 100%;
 }
 .div-profile{
-  font-size: 45px;
+  font-size: rem(45);
   float: right;
   margin-right: 10px;
 }
\ No newline at end of file
diff --git a/src/app/pages/gabinete-digital/diplomas-gerar/diplomas-gerar/diplomas-gerar.page.html b/src/app/pages/gabinete-digital/diplomas-gerar/diplomas-gerar/diplomas-gerar.page.html
index 4a74644b6..682f78928 100644
--- a/src/app/pages/gabinete-digital/diplomas-gerar/diplomas-gerar/diplomas-gerar.page.html
+++ b/src/app/pages/gabinete-digital/diplomas-gerar/diplomas-gerar/diplomas-gerar.page.html
@@ -9,7 +9,7 @@
     <div class="content d-flex flex-column" *ngIf="task">
       <div class="main-header">
         <div class="title-content width-100 d-flex justify-space-between">
-          <div class="font-30 cursor-pointer" (click)="goBack()" >
+          <div class="font-30-rem cursor-pointer" (click)="goBack()" >
             <ion-icon  *ngIf="ThemeService.currentTheme == 'default' " slot="end" src='assets/images/icons-arrow-arrow-left.svg'></ion-icon>
             <ion-icon *ngIf="ThemeService.currentTheme == 'doneIt' " src="assets/images/theme/doneIt/icons-calendar-arrow-left.svg"></ion-icon>
             <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " slot="end" src='assets/images/theme/gov/icons-calendar-arrow-left.svg'></ion-icon>
@@ -46,7 +46,7 @@
           </ion-label>
         </ion-item>
         <div *ngIf="cc.length > 0">
-          <h5>Com conhecimento</h5>
+          <h5 class="font-17-rem">Com conhecimento</h5>
           <ion-item class="ion-no-margin ion-no-padding">
             <ion-label>
               <div *ngFor="let c of cc">
@@ -56,7 +56,7 @@
           </ion-item>
         </div>
         <div *ngIf="fulltask.workflowInstanceDataFields.TaskMessage">
-          <h5>Detalhes</h5>
+          <h5 class="font-17-rem">Detalhes</h5>
           <ion-item class="ion-no-margin ion-no-padding">
             <pre class="width-100 text">{{ fulltask.workflowInstanceDataFields.TaskMessage }} </pre>
           </ion-item>
@@ -64,7 +64,7 @@
       </div>
       <div class="bottom-content width-100">
         <ion-list>
-          <h5>Documentos Anexados</h5>
+          <h5 class="font-17-rem">Documentos Anexados</h5>
           <ion-item *ngFor="let attachment of attachments"
             class="ion-no-margin ion-no-padding cursor-pointer"
           >
diff --git a/src/app/pages/gabinete-digital/diplomas-gerar/diplomas-gerar/diplomas-gerar.page.scss b/src/app/pages/gabinete-digital/diplomas-gerar/diplomas-gerar/diplomas-gerar.page.scss
index 2199028ff..674600da3 100644
--- a/src/app/pages/gabinete-digital/diplomas-gerar/diplomas-gerar/diplomas-gerar.page.scss
+++ b/src/app/pages/gabinete-digital/diplomas-gerar/diplomas-gerar/diplomas-gerar.page.scss
@@ -32,7 +32,7 @@ ion-content, .header-2, .main-content{
   color:#d30a0a !important;
 }
 .btn-size{
-  font-size: 18px !important;
+  font-size: rem(18) !important;
 }
 .main-header{
   font-family: Roboto;
@@ -59,7 +59,7 @@ ion-content, .header-2, .main-content{
         .right{
           padding: 0!important;
           float: right;
-          font-size: 25px;
+          font-size: rem(25);
           color: #0782c9;
           margin: 5px 0 0 0;
         }
@@ -70,14 +70,14 @@ ion-content, .header-2, .main-content{
         margin: 0 auto;
 
         .header-bottom-icon{
-          width: 30px;
-          font-size: 25px;
+          width: rem(30);
+          font-size: rem(25);
           float: left;
           padding: 2px;
         }
         .header-bottom-contacts{
           width: 275px;
-          font-size: 15px;
+          font-size: rem(15);
           color: #797979;
           white-space: nowrap;
           overflow: hidden;
@@ -89,16 +89,16 @@ ion-content, .header-2, .main-content{
       }
 
         .title{
-          font-size: 25px;
+          font-size: rem(25);
           overflow: auto;
           float: left;
           padding-top: 4px;
           padding-left: 5px;
         }
         .div-icon{
-          width: 40px;
+          width: rem(40);
           float: right;
-          font-size: 35px;
+          font-size: rem(35);
           overflow: auto;
           padding: 1px;
         }
@@ -116,7 +116,7 @@ ion-button{
 .upper-content{
   font-family: Roboto;
   margin-left: 36px;
-  font-size: 18px;
+  font-size: rem(18);
 
   .label{
       border-radius: 20px;
@@ -124,13 +124,14 @@ ion-button{
       float: right;
       padding: 5px 13.5px 5px 13.5px;
       color: #fff;
+      font-size: rem(14);
   }
 
   .button-calendar-type ion-button{
-    height: 25px;
+    height: rem(25);
   }
   .content-details{
-    font-size: 17px;
+    font-size: rem(17);
     .date{
       color: #797979;
     }
@@ -138,7 +139,7 @@ ion-button{
 }
 .middle-conten{
  .middle-content p{
-    font-size: 16px;
+    font-size: rem(16);
   }
 }
 .bottom-content{
@@ -146,11 +147,11 @@ ion-button{
   margin: 0 auto;
 
   .bottom-content h3{
-    font-size: 16px;
+    font-size: rem(16);
     margin: 0 0 0 10px;
   }
   .attach-document{
-    font-size: 15px;
+    font-size: rem(15);
     color: var(--title-text-color);
     margin: 5px 5px 5px 10px;
     padding: 5px;
@@ -158,11 +159,11 @@ ion-button{
   }
   .attach-icon{
     width: 37px;
-    font-size: 35px;
+    font-size: rem(35);
     float: left;
   }
   .attach-title-item{
-    font-size: 18px;
+    font-size: rem(18);
     width: 100%;
     color:#0d89d1;
     padding-bottom: 5px;
@@ -170,12 +171,12 @@ ion-button{
   /* SPAN */
   .span-left{
     float: left;
-    font-size: 15x;
+    font-size: rem(15);
   }
   .span-right{
   text-align: right;
   float: right;
-  font-size: 13px;
+  font-size: rem(13);
   }
 }
 .aside-right{
@@ -189,7 +190,7 @@ ion-button{
     .arrow-right-icon{
         width: 37px;
         float: right;
-        font-size: 35px;
+        font-size: rem(35);
         overflow: hidden;
     }
   }
@@ -200,7 +201,7 @@ ion-button{
 
     .btn-ok, .btn-cancel, .btn-delete{
       height: auto !important;
-      font-size: 16px !important;
+      font-size: rem(16) !important;
       width: 100% !important;
       margin-bottom: 10px !important;
       padding: 15px !important;
diff --git a/src/app/pages/gabinete-digital/diplomas/diploma/diploma.page.html b/src/app/pages/gabinete-digital/diplomas/diploma/diploma.page.html
index e8e1f6027..cfaade4ec 100644
--- a/src/app/pages/gabinete-digital/diplomas/diploma/diploma.page.html
+++ b/src/app/pages/gabinete-digital/diplomas/diploma/diploma.page.html
@@ -3,7 +3,7 @@
     <div class="content d-flex flex-column" *ngIf="task">
       <div class="main-header">
         <div class="title-content width-100 d-flex align-center justify-space-between">
-          <div class="font-30 cursor-pointer d-flex align-center" (click)="goBack()" defaultHref="#">
+          <div class="font-30-rem cursor-pointer d-flex align-center" (click)="goBack()" defaultHref="#">
             <ion-icon  *ngIf="ThemeService.currentTheme == 'default' " slot="end" src='assets/images/icons-arrow-arrow-left.svg'></ion-icon>
             <ion-icon *ngIf="ThemeService.currentTheme == 'doneIt' " src="assets/images/theme/doneIt/icons-calendar-arrow-left.svg"></ion-icon>
             <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " slot="end" src='assets/images/theme/gov/icons-calendar-arrow-left.svg'></ion-icon>
@@ -45,7 +45,7 @@
           </ion-label>
         </ion-item>
         <div *ngIf="cc.length > 0">
-          <h5>Com conhecimento</h5>
+          <h5 class="font-17-rem">Com conhecimento</h5>
           <ion-item class="ion-no-margin ion-no-padding">
             <ion-label>
               <div *ngFor="let c of cc">
@@ -55,7 +55,7 @@
           </ion-item>
         </div>
         <div *ngIf="fulltask.workflowInstanceDataFields.TaskMessage">
-          <h5>Detalhes</h5>
+          <h5 class="font-17-rem">Detalhes</h5>
           <ion-item class="ion-no-margin ion-no-padding">
               <pre class="width-100 text">{{ fulltask.workflowInstanceDataFields.TaskMessage }} </pre>
           </ion-item>
@@ -63,7 +63,7 @@
       </div>
       <div class="bottom-content width-100">
         <ion-list>
-          <h5>Documentos Anexados</h5>
+          <h5 class="font-17-rem">Documentos Anexados</h5>
           <ion-item *ngFor="let attachment of attachments"
             class="ion-no-margin ion-no-padding cursor-pointer"
           >
diff --git a/src/app/pages/gabinete-digital/diplomas/diploma/diploma.page.scss b/src/app/pages/gabinete-digital/diplomas/diploma/diploma.page.scss
index 59b101ac1..9dba04802 100644
--- a/src/app/pages/gabinete-digital/diplomas/diploma/diploma.page.scss
+++ b/src/app/pages/gabinete-digital/diplomas/diploma/diploma.page.scss
@@ -14,7 +14,7 @@
   color:#d30a0a !important;
 }
 .btn-size{
-  font-size: 18px !important;
+  font-size: rem(18) !important;
 }
 .main-header{
   font-family: Roboto;
@@ -41,7 +41,7 @@
         .right{
           padding: 0!important;
           float: right;
-          font-size: 25px;
+          font-size: rem(25);
           color: #0782c9;
           margin: 5px 0 0 0;
         }
@@ -52,14 +52,14 @@
         margin: 0 auto;
 
         .header-bottom-icon{
-          width: 30px;
-          font-size: 25px;
+          width: rem(30);
+          font-size: rem(25);
           float: left;
           padding: 2px;
         }
         .header-bottom-contacts{
           width: 275px;
-          font-size: 15px;
+          font-size: rem(15);
           color: #797979;
           white-space: nowrap;
           overflow: hidden;
@@ -71,16 +71,16 @@
       }
 
         .title{
-          font-size: 25px;
+          font-size: rem(25);
           overflow: auto;
           float: left;
           padding-top: 4px;
           padding-left: 5px;
         }
         .div-icon{
-          width: 40px;
+          width: rem(40);
           float: right;
-          font-size: 35px;
+          font-size: rem(35);
           overflow: auto;
           padding: 1px;
         }
@@ -98,7 +98,7 @@ ion-button{
 .upper-content{
   font-family: Roboto;
   margin-left: 36px;
-  font-size: 18px;
+  font-size: rem(18);
 
   .label{
       border-radius: 20px;
@@ -106,13 +106,14 @@ ion-button{
       float: right;
       padding: 5px 13.5px 5px 13.5px;
       color: #fff;
+      font-size: rem(14);
   }
 
   .button-calendar-type ion-button{
-    height: 25px;
+    height: rem(25);
   }
   .content-details{
-    font-size: 17px;
+    font-size: rem(17);
     .date{
       color: #797979;
     }
@@ -120,7 +121,7 @@ ion-button{
 }
 .middle-conten{
  .middle-content p{
-    font-size: 16px;
+    font-size: rem(16);
   }
 }
 .bottom-content{
@@ -128,11 +129,11 @@ ion-button{
   margin: 0 auto;
 
   .bottom-content h3{
-    font-size: 16px;
+    font-size: rem(16);
     margin: 0 0 0 10px;
   }
   .attach-document{
-    font-size: 15px;
+    font-size: rem(15);
     color: var(--title-text-color);
     margin: 5px 5px 5px 10px;
     padding: 5px;
@@ -140,11 +141,11 @@ ion-button{
   }
   .attach-icon{
     width: 37px;
-    font-size: 35px;
+    font-size: rem(35);
     float: left;
   }
   .attach-title-item{
-    font-size: 18px;
+    font-size: rem(18);
     width: 100%;
     color:#0d89d1;
     padding-bottom: 5px;
@@ -152,12 +153,12 @@ ion-button{
   /* SPAN */
   .span-left{
     float: left;
-    font-size: 15x;
+    font-size: rem(15);
   }
   .span-right{
   text-align: right;
   float: right;
-  font-size: 13px;
+  font-size: rem(13);
   }
 }
 .aside-right{
@@ -171,7 +172,7 @@ ion-button{
     .arrow-right-icon{
         width: 37px;
         float: right;
-        font-size: 35px;
+        font-size: rem(35);
         overflow: hidden;
     }
   }
@@ -182,7 +183,7 @@ ion-button{
 
     .btn-ok, .btn-cancel, .btn-delete{
       height: auto !important;
-      font-size: 16px !important;
+      font-size: rem(16) !important;
       width: 100% !important;
       margin-bottom: 10px !important;
       padding: 15px !important;
diff --git a/src/app/pages/gabinete-digital/diplomas/diplomas.page.scss b/src/app/pages/gabinete-digital/diplomas/diplomas.page.scss
index 53a8202b1..40317712a 100644
--- a/src/app/pages/gabinete-digital/diplomas/diplomas.page.scss
+++ b/src/app/pages/gabinete-digital/diplomas/diplomas.page.scss
@@ -20,7 +20,7 @@
   
 .title{
     font-family: Roboto;
-    font-size: 25px;
+    font-size: rem(25);
     color:#000;
     overflow: auto;
 
@@ -34,7 +34,7 @@
     }
   }
 .item-list-small{
-    font-size: 11px;
+    font-size:  rem(11);
     overflow: hidden;
   }
   .ion-item-class{
@@ -77,12 +77,12 @@ ion-item{
   .div-content-expediente h3, .div-content-pendentes h3{
     margin: 0;
     padding: 0;
-    font-size: 14pt;
+    font-size: rem(19);
     width: 100%;
   }
   .div-icon{
     width: 10%;
-    font-size: 20px;
+    font-size: rem(20);
     float: left;
     color: #808080;
   }
@@ -92,7 +92,7 @@ ion-item{
   
   }
   .div-content-expediente p, .div-content-pendentes p{
-    font-size: 14pt;
+    font-size: rem(19);
     color: rgb(94, 92, 92);
     padding: 0;
     margin: 0;
@@ -100,14 +100,14 @@ ion-item{
   .span-left{
       /* border: 1px solid red; */
       float: left;
-      font-size: 12px;
+      font-size: rem(12);
       padding-left: 18px;
   }
   .span-right{
     /* border: 1px solid blue; */
     text-align: right;
     float: right;
-    font-size: 12px;
+    font-size: rem(12);
     padding-right: 18px;
 }
 
@@ -131,7 +131,7 @@ ion-item{
   width: 100%;
   float: left;
   font-family: Roboto;
-  font-size: 12pt;
+  font-size: rem(16);
   font-weight: 700;
   color: var(--title-text-color);
   padding-left: 3px;
@@ -144,17 +144,17 @@ ion-item{
   .exp-icon{
     width: fit-content;
     float: right;
-   /* font-size: 13px; */
+   /* font-size: rem(13); */
     margin: 0 !important;
     padding: 0 !important;
 
     ion-icon{
-      font-size: 12pt;
+      font-size: rem(16);
       color: #42b9fe;
       float: left;
     }
     label{
-      font-size: 10pt;
+      font-size: rem(13);
     }
   }
 }
@@ -163,7 +163,7 @@ ion-item{
 
 }
 .exp-middle-detail{
-  font-size: 12pt;
+  font-size: rem(16);
   width: 100%;
   overflow: auto;
 
@@ -183,7 +183,7 @@ ion-item{
   .exp-date{
     width: auto;
     font-family: Roboto;
-    font-size: 10pt;
+    font-size: rem(13);
     font-weight: normal;
     font-stretch: normal;
     font-style: normal;
@@ -194,7 +194,7 @@ ion-item{
   }
 }
 .exp-bottom-detail{
-  font-size: 8pt;
+  font-size: rem(10);
   width: 100%;
   overflow: auto;
   padding-left: 3px;
@@ -202,7 +202,7 @@ ion-item{
   .exp-remetente{
     //width: 200px;
     font-family: Roboto;
-   /*  font-size: 13px; */
+   /*  font-size: rem(13); */
     font-weight: normal;
     color: #000000;
     float: left;
@@ -216,7 +216,7 @@ ion-item{
   overflow: auto;
 }
 .div-search{
-  font-size: 45px;
+  font-size: rem(45);
   float: left;
   margin: 0 0 0 10px
 }
@@ -230,7 +230,7 @@ ion-item{
   width: 100%;
 }
 .div-profile{
-  font-size: 45px;
+  font-size: rem(45);
   float: right;
   margin-right: 10px;
 }
\ No newline at end of file
diff --git a/src/app/pages/gabinete-digital/discart-expedient-modal/discart-expedient-modal.page.scss b/src/app/pages/gabinete-digital/discart-expedient-modal/discart-expedient-modal.page.scss
index 005553fac..c769d6eb9 100644
--- a/src/app/pages/gabinete-digital/discart-expedient-modal/discart-expedient-modal.page.scss
+++ b/src/app/pages/gabinete-digital/discart-expedient-modal/discart-expedient-modal.page.scss
@@ -1,3 +1,4 @@
+@import '~src/function.scss';
 ion-content{
   --padding-top:15px;
   --padding-start: 15px;
@@ -11,7 +12,7 @@ ion-content{
   }
   .header-title{
     font-family: Roboto;
-    font-size: 20px;
+    font-size: rem(20);
     color:#000;
     margin: 0 5px 0 5px;
   }
diff --git a/src/app/pages/gabinete-digital/event-list/approve-event-modal/approve-event-modal.page.html b/src/app/pages/gabinete-digital/event-list/approve-event-modal/approve-event-modal.page.html
index 31f2befd4..66de3de5b 100644
--- a/src/app/pages/gabinete-digital/event-list/approve-event-modal/approve-event-modal.page.html
+++ b/src/app/pages/gabinete-digital/event-list/approve-event-modal/approve-event-modal.page.html
@@ -74,14 +74,14 @@
   </div>
   <div *ngIf="loadedEvent.workflowInstanceDataFields.Participants" class="middle-content">
     <div *ngIf="loadedEvent.workflowInstanceDataFields.Participants">
-      <h5>Intervenientes</h5>
+      <h5 class="font-17-rem">Intervenientes</h5>
       <div *ngFor="let att of loadedEvent.workflowInstanceDataFields.ParticipantsList">
         <ion-label>{{att.Name}}</ion-label>
       </div>
     </div>
     </div>
     <div *ngIf="loadedEvent.workflowInstanceDataFields.Body">
-    <h5>Detalhes</h5>
+    <h5 class="font-17-rem">Detalhes</h5>
     <ion-item lines="none" class="ion-no-padding ion-no-margin">
       <pre class="width-100 text">{{ loadedEvent.workflowInstanceDataFields.Body }} </pre>
     </ion-item>
@@ -90,7 +90,7 @@
 
   <div class="d-flex container-div width-100"  >
     <ion-list class="width-100 " >
-      <h5>Documentos Anexados</h5>
+      <h5 class="font-17-rem">Documentos Anexados</h5>
       <ion-item class="width-100"   *ngFor="let document of loadedAttachments">
         <ion-label
           (click)="viewDocument(document.SourceId, document.ApplicationId)"
diff --git a/src/app/pages/gabinete-digital/event-list/approve-event-modal/approve-event-modal.page.scss b/src/app/pages/gabinete-digital/event-list/approve-event-modal/approve-event-modal.page.scss
index a161e866b..927611f21 100644
--- a/src/app/pages/gabinete-digital/event-list/approve-event-modal/approve-event-modal.page.scss
+++ b/src/app/pages/gabinete-digital/event-list/approve-event-modal/approve-event-modal.page.scss
@@ -1,8 +1,9 @@
+@import '~src/function.scss';
 ion-content{
   --padding-top:0px;
   --padding-start: 20px;
   --padding-end: 20px;
-  font-size: 18px;
+  font-size: rem(18);
 }
 ion-menu{
   --height: 225px;
@@ -13,26 +14,26 @@ ion-menu{
 }
 .header-icon-left{
   width: 36px;
-  font-size: 33px;
+  font-size: rem(33);
   color: #42b9fe;
   float: left;
 }
 .header-title{
   font-family: Roboto;
-  font-size: 25px;
+  font-size: rem(25);
   margin: 0 5px 0 5px;
   padding: 0;
   color:#000;
   float: left;
 }
 .header-icon-right{
-  width: 45px;
-  font-size: 45px;
+  width: rem(45);
+  font-size: rem(45);
   float: left;
 }
 .upper-content{
   padding-left: 50px;
-  font-size: 18px;
+  font-size: rem(18);
 
   .content-location{
     margin: 0 auto;
@@ -42,7 +43,7 @@ ion-menu{
 
   .location-detail{
     font-weight: 700;
-    font-size: 18px;
+    font-size: rem(18);
     float: left;
     margin: 5px 5px 5px 0px;
   }
@@ -54,7 +55,7 @@ ion-menu{
       float: left;
   }
   .button-calendar-type ion-button{
-    height: 25px;
+    height: rem(25);
   }
   .button-edit-event {
       width: 140px;
@@ -64,12 +65,12 @@ ion-menu{
       --color:#061b52;
   }
   .content-details p{
-      font-size: 16px;
+      font-size: rem(16);
   }
 }
 .middle-conten{
   .middle-content h3, .middle-content p{
-    font-size: 16px;
+    font-size: rem(16);
   }
 }
 
@@ -77,11 +78,11 @@ ion-menu{
   margin: 0 auto;
   
   .bottom-content h3{
-    font-size: 16px;
+    font-size: rem(16);
     margin: 0 0 0 10px;
   }
   .attach-document{
-    font-size: 15px;
+    font-size: rem(15);
     color: var(--title-text-color);
     margin: 5px 5px 5px 10px;
     padding: 5px;
@@ -89,23 +90,23 @@ ion-menu{
   }
   .attach-icon{
     width: 37px;
-    font-size: 35px;
+    font-size: rem(35);
     float: left;
   }
   .attach-title-item{
     width: 100%;
-    font-size: 15px;
+    font-size: rem(15);
     color:var(--title-text-color);
   }
   /* SPAN */
   .span-left{
     float: left;
-    font-size: 15x;
+    font-size: rem(15);
   }
   .span-right{
   text-align: right;
   float: right;
-  font-size: 13px;
+  font-size: rem(13);
   }
 }
 
@@ -151,7 +152,7 @@ ion-menu{
   align-items: center;
   padding: 0px 5px;
   color: white;
-  font-size: 9pt;
+  font-size: rem(12);
   font-weight: 500;
   height: 19px;
   -webkit-border-radius: 18px;
@@ -181,16 +182,16 @@ height: 20px;
 
 .attach-title-item{
   width: 100%;
-  font-size: 15px;
+  font-size: rem(15);
   color:var(--title-text-color);
 }
 /* SPAN */
 .span-left{
   float: left;
-  font-size: 15x;
+  font-size: rem(15);
 }
 .span-right{
 text-align: right;
 float: right;
-font-size: 13px;
+font-size: rem(13);
 }
\ No newline at end of file
diff --git a/src/app/pages/gabinete-digital/event-list/approve-event/approve-event.page.html b/src/app/pages/gabinete-digital/event-list/approve-event/approve-event.page.html
index 4ec6be7d2..2ed233311 100644
--- a/src/app/pages/gabinete-digital/event-list/approve-event/approve-event.page.html
+++ b/src/app/pages/gabinete-digital/event-list/approve-event/approve-event.page.html
@@ -73,14 +73,14 @@
         <div class="overflow-y-auto">
           <div class="middle-content">
             <div *ngIf="loadedEvent.workflowInstanceDataFields.ParticipantsList">
-              <h5>Intervenientes</h5>
+              <h5 class="font-17-rem">Intervenientes</h5>
               <div *ngFor="let att of loadedEvent.workflowInstanceDataFields.ParticipantsList">
                 <ion-label>{{att.Name}}</ion-label>
               </div>
               <div class="line"></div>
             </div>
             <div *ngIf="loadedEvent.workflowInstanceDataFields.Body">
-              <h5>Detalhes</h5>
+              <h5 class="font-17-rem">Detalhes</h5>
               <ion-item lines="none" class="ion-no-margin ion-no-padding">
                 <pre class="width-100 text">{{loadedEvent.workflowInstanceDataFields.Body }} </pre>
               </ion-item>
@@ -89,7 +89,7 @@
           </div>
           <div *ngIf="loadedEvent.Documents" class="bottom-content width-100">
             <ion-list>
-              <h5>Documentos Anexados</h5>
+              <h5 class="font-17-rem">Documentos Anexados</h5>
               <ion-item class="ion-no-margin ion-no-padding cursor-pointer"
               *ngFor="let attachment of loadedEvent.Documents"
               (click)="viewDocument(attachment.DocId, attachment)">
diff --git a/src/app/pages/gabinete-digital/event-list/approve-event/approve-event.page.scss b/src/app/pages/gabinete-digital/event-list/approve-event/approve-event.page.scss
index 1b20eb1ce..f6196d326 100644
--- a/src/app/pages/gabinete-digital/event-list/approve-event/approve-event.page.scss
+++ b/src/app/pages/gabinete-digital/event-list/approve-event/approve-event.page.scss
@@ -16,21 +16,21 @@ ion-menu{
 }
 .header-icon-left{
   width: 36px;
-  font-size: 33px;
+  font-size: rem(33);
   color: #42b9fe;
   float: left;
 }
 .header-title{
   font-family: Roboto;
-  font-size: 25px;
+  font-size: rem(25);
   margin: 0 5px 0 5px;
   padding: 0;
   color:#000;
   float: left;
 }
 .header-icon-right{
-  width: 45px;
-  font-size: 45px;
+  width: rem(45);
+  font-size: rem(45);
   float: left;
 }
 
@@ -44,7 +44,7 @@ ion-menu{
 
   .upper-content{
     margin-left: 40px;
-    font-size: 18px;
+    font-size: rem(18);
 
     .content-location{
       margin-top: 0px !important;
@@ -79,12 +79,12 @@ ion-menu{
         --color:#061b52;
     }
     .content-details p{
-        font-size: 16px;
+        font-size: rem(16);
     }
   }
   .middle-conten{
     .middle-content h3, .middle-content p{
-      font-size: 16px;
+      font-size: rem(16);
     }
   }
 
@@ -92,11 +92,11 @@ ion-menu{
     margin: 0 auto;
 
     .bottom-content h3{
-      font-size: 16px;
+      font-size: rem(16);
       margin: 0 0 0 10px;
     }
     .attach-document{
-      font-size: 15px;
+      font-size: rem(15);
       color: var(--title-text-color);
       margin: 5px 5px 5px 10px;
       padding: 5px;
@@ -104,23 +104,23 @@ ion-menu{
     }
     .attach-icon{
       width: 37px;
-      font-size: 35px;
+      font-size: rem(35);
       float: left;
     }
     .attach-title-item{
       width: 100%;
-      font-size: 15px;
+      font-size: rem(15);
       color:var(--title-text-color);
     }
     /* SPAN */
     .span-left{
       float: left;
-      font-size: 15x;
+      font-size: rem(15);
     }
     .span-right{
     text-align: right;
     float: right;
-    font-size: 13px;
+    font-size: rem(13);
     }
   }
 }
@@ -141,7 +141,7 @@ ion-menu{
 
     .btn-ok, .btn-cancel, .btn-delete{
       height: auto !important;
-      font-size: 16px !important;
+      font-size: rem(16) !important;
       width: 100% !important;
       margin-bottom: 10px !important;
       padding: 15px !important;
diff --git a/src/app/pages/gabinete-digital/event-list/event-list.page.html b/src/app/pages/gabinete-digital/event-list/event-list.page.html
index 853a63317..6d37d63ca 100644
--- a/src/app/pages/gabinete-digital/event-list/event-list.page.html
+++ b/src/app/pages/gabinete-digital/event-list/event-list.page.html
@@ -106,7 +106,7 @@
                     <p *ngIf="event.workflowInstanceDataFields.StartDate == event.workflowInstanceDataFields.EndDate">{{event.workflowInstanceDataFields.StartDate | date: 'd/M/yy' }}  |  {{event.workflowInstanceDataFields.Location}}</p>
                     <h3>{{event.workflowInstanceDataFields.Subject}}</h3>
                     <div *ngIf="event.activityInstanceName">
-                      <div class="label-event-type"> {{ event.activityInstanceName }} </div>
+                      <div class="label-event-type font-13-rem"> {{ event.activityInstanceName }} </div>
                     </div>
                   </div>
                 </div>
diff --git a/src/app/pages/gabinete-digital/event-list/event-list.page.scss b/src/app/pages/gabinete-digital/event-list/event-list.page.scss
index 2d8b9c936..85fa3515b 100644
--- a/src/app/pages/gabinete-digital/event-list/event-list.page.scss
+++ b/src/app/pages/gabinete-digital/event-list/event-list.page.scss
@@ -30,7 +30,7 @@
 .header-title{
   //width: 300px;
   font-family: Roboto;
-  font-size: 25px;
+  font-size: rem(25);
   //margin: 0 5px 0 5px;
   padding: 0;
   color:#000;
@@ -81,7 +81,7 @@ ion-item-sliding{
 .approve-event-time p{
   width: 33px;
   font-family: Roboto;
-  font-size: 13px;
+  font-size: rem(13);
   font-weight: normal;
   font-stretch: normal;
   font-style: normal;
@@ -97,7 +97,7 @@ ion-item-sliding{
 .approve-event-detail p{
   //width: 250px;
   font-family: Roboto;
-  font-size: 13px;
+  font-size: rem(13);
   font-weight: normal;
   font-stretch: normal;
   font-style: normal;
@@ -110,7 +110,7 @@ ion-item-sliding{
 .approve-event-detail h3{
   //width: 250px;
   font-family: Roboto;
-  font-size: 15px;
+  font-size: rem(15);
   font-weight: bold;
   font-stretch: normal;
   font-style: normal;
@@ -132,7 +132,7 @@ ion-item-sliding{
   background: #f05d5e;
   border-radius: 17px;
   color: white;
-  font-size: 10pt;
+  font-size: rem(13);
 }
 
 
diff --git a/src/app/pages/gabinete-digital/expediente/book-meeting-modal/book-meeting-modal.page.scss b/src/app/pages/gabinete-digital/expediente/book-meeting-modal/book-meeting-modal.page.scss
index a27d6e083..5895b8e73 100644
--- a/src/app/pages/gabinete-digital/expediente/book-meeting-modal/book-meeting-modal.page.scss
+++ b/src/app/pages/gabinete-digital/expediente/book-meeting-modal/book-meeting-modal.page.scss
@@ -1,3 +1,5 @@
+@import '~src/function.scss';
+
 .content{
   margin: 0;
   float: left;
@@ -6,14 +8,14 @@
   }
   .header-title{
     font-family: Roboto;
-    font-size: 25px;
+    font-size: rem(25);
     padding: 0;
     color:#000;
     float: left;
   }
 
   .ion-item-container{
-    margin: 15px auto;
+    margin: rem(15) auto;
     border: 1px solid #ebebeb;
     border-radius: 5px;
     padding-left: 10px;
@@ -32,11 +34,11 @@
     margin: 0px auto;
   }
   .ion-icon-class{
-    width: 45px;
-    height: 45px;
+    width: rem(45);
+    height: rem(45);
     float: left;
     padding: 10px;
-    font-size: 25px;
+    font-size: rem(25);
   }
   ion-select{
     padding-left: 5px;
@@ -44,7 +46,7 @@
   }
   .ion-input-class{
     width: calc(100% - 45px);
-    height: 45px;
+    height: rem(45);
     border: 1px solid #ebebeb;
     border-radius: 5px;
     padding-left: 5px;
@@ -62,18 +64,18 @@
 
   }
   .add-people{
-    width: 45px;
+    width: rem(45);
     float: right;
     overflow: auto;
-    font-size: 25px;
+    font-size: rem(25);
     display: flex;
   }
   .list-people-title{
-    /* font-size: 13px; */
+    /* font-size: rem(13); */
     color: #a3a3a3;
   }
   .attach-document{
-    font-size: 15px;
+    font-size: rem(15);
     color: var(--title-text-color);
     margin: 5px 5px 5px 10px;
     padding: 5px;
@@ -81,23 +83,23 @@
   }
   .attach-icon{
     width: 37px;
-    font-size: 35px;
+    font-size: rem(35);
     float: left;
   }
   .attach-title-item{
     width: 100%;
-    font-size: 15px;
+    font-size: rem(15);
     color:#0d89d1;
   }
   /* SPAN */
   .span-left{
     float: left;
-    font-size: 15x;
+    font-size: rem(15);
   }
   .span-right{
   text-align: right;
   float: right;
-  font-size: 13px;
+  font-size: rem(13);
   }
 }
 .container-footer{
@@ -105,16 +107,16 @@
     overflow: auto;
 }
 .button-cancel {
-    width: 170px;
-    height: 44px;
+    width: rem(170);
+    height: rem(44);
     border-radius: 22.5px;
     --background: #e0e9ee;
     --color: #061b52;
     margin:10px;
   }
   .button-save {
-    width: 170px;
-    height: 44px;
+    width: rem(170);
+    height: rem(44);
     border-radius: 22.5px;
     --background: #42b9fe;
     --color:#ffffff;
@@ -132,7 +134,7 @@
 /* Error Messages */
 .error{
   color:red;
-  font-size: 12px;
+  font-size: rem(12);
   font-weight: bold;
   padding-bottom: 20px;
 }
@@ -149,23 +151,23 @@
 
  .attach-icon{
       width: 37px;
-      font-size: 35px;
+      font-size: rem(35);
       float: left;
     }
     .attach-title-item{
       width: 100%;
-      font-size: 15px;
+      font-size: rem(15);
       color:#0d89d1;
     }
     /* SPAN */
     .span-left{
       float: left;
-      font-size: 15x;
+      font-size: rem(15);
     }
     .span-right{
     text-align: right;
     float: right;
-    font-size: 13px;
+    font-size: rem(13);
     }
 
 
@@ -181,7 +183,7 @@
     align-items: center;
     padding: 0px 5px;
     color: white;
-    font-size: 9pt;
+    font-size: rem(12);
     font-weight: 500;
     height: 19px;
     -webkit-border-radius: 18px;
diff --git a/src/app/pages/gabinete-digital/expediente/expedient-task-modal/expedient-task-modal.page.scss b/src/app/pages/gabinete-digital/expediente/expedient-task-modal/expedient-task-modal.page.scss
index c555c4613..7752ad2ff 100644
--- a/src/app/pages/gabinete-digital/expediente/expedient-task-modal/expedient-task-modal.page.scss
+++ b/src/app/pages/gabinete-digital/expediente/expedient-task-modal/expedient-task-modal.page.scss
@@ -1,3 +1,5 @@
+@import '~src/function.scss';
+
 .content{
   padding: 30px 20px 0 20px !important;
   margin: 0;
@@ -5,7 +7,7 @@
 
   .title{
     font-family: Roboto;
-    font-size: 25px;
+    font-size: rem(25);
     font-weight: normal;
     font-stretch: normal;
     font-style: normal;
@@ -15,11 +17,11 @@
     //margin: 8px 0 8px 0px;
   }
   .container-div{
-    margin-bottom: 15px;
+    margin-bottom: rem(15);
   }
   .ion-item-container{
     //width: 360px;
-    margin: 15px auto;
+    margin: rem(15) auto;
     border: 1px solid #ebebeb;
     border-radius: 5px;
     padding-left: 5px;
@@ -33,11 +35,11 @@
     margin: 0px auto;
   }
   .ion-icon-class{
-    width: 45px;
-    height: 45px;
+    width: rem(45);
+    height: rem(45);
     float: left;
     padding: 10px;
-    font-size: 25px;
+    font-size: rem(25);
   }
   ion-select{
     //padding-left: 5px;
@@ -65,51 +67,51 @@
 
   }
   .add-people{
-    width: 45px;
+    width: rem(45);
     float: right;
     overflow: auto;
-    font-size: 25px;
+    font-size: rem(25);
     display: flex;
   }
   .list-people-title{
-    /* font-size: 13px; */
+    /* font-size: rem(13); */
     color: #a3a3a3;
   }
   .attach-document{
-    font-size: 15px;
+    font-size: rem(15);
     color: var(--title-text-color);
   }
 
   .attach-title-item{
     width: 100%;
-    font-size: 15px;
+    font-size: rem(15);
     color:#0d89d1;
   }
   /* SPAN */
   .span-left{
     float: left;
-    font-size: 15x;
+    font-size: rem(15);
   }
   .span-right{
   text-align: right;
   float: right;
-  font-size: 13px;
+  font-size: rem(13);
   }
 }
 .container-footer{
       margin:0 auto;
       overflow: auto;
   .button-cancel {
-      width: 170px;
-      height: 44px;
+      width: rem(170);
+      height: rem(44);
       border-radius: 22.5px;
       --background: #e0e9ee;
       --color: #061b52;
       margin:10px;
     }
   .button-save {
-    width: 170px;
-    height: 44px;
+    width: rem(170);
+    height: rem(44);
     border-radius: 22.5px;
     --background: #42b9fe;
     --color:#ffffff;
@@ -130,23 +132,23 @@
 
 .attach-icon{
   width: 37px;
-  font-size: 35px;
+  font-size: rem(35);
   float: left;
 }
 .attach-title-item{
   width: 100%;
-  font-size: 15px;
+  font-size: rem(15);
   color:#0d89d1;
 }
 /* SPAN */
 .span-left{
   float: left;
-  font-size: 15x;
+  font-size: rem(15);
 }
 .span-right{
 text-align: right;
 float: right;
-font-size: 13px;
+font-size: rem(13);
 }
 
 
@@ -160,7 +162,7 @@ font-size: 13px;
   align-items: center;
   padding: 0px 5px;
   color: white;
-  font-size: 9pt;
+  font-size: rem(12);
   font-weight: 500;
   height: 19px;
   -webkit-border-radius: 18px;
@@ -196,7 +198,7 @@ font-size: 13px;
   align-items: center;
   padding: 0px 5px;
   color: white;
-  font-size: 9pt;
+  font-size: rem(12);
   font-weight: 500;
   height: 19px;
   -webkit-border-radius: 18px;
diff --git a/src/app/pages/gabinete-digital/expediente/expediente-detail/expediente-detail.page.html b/src/app/pages/gabinete-digital/expediente/expediente-detail/expediente-detail.page.html
index 73c142d63..25a696f88 100644
--- a/src/app/pages/gabinete-digital/expediente/expediente-detail/expediente-detail.page.html
+++ b/src/app/pages/gabinete-digital/expediente/expediente-detail/expediente-detail.page.html
@@ -7,7 +7,7 @@
     <div class="content d-flex flex-column" *ngIf="task">
       <div class="main-header" style="overflow: unset !important;">
         <div class="title-content width-100 d-flex justify-between">
-          <div class="font-30 cursor-pointer" (click)="goBack()" defaultHref="#">
+          <div class="font-30-rem cursor-pointer" (click)="goBack()" defaultHref="#">
             <ion-icon  *ngIf="ThemeService.currentTheme == 'default' " slot="end" src='assets/images/icons-arrow-arrow-left.svg'></ion-icon>
             <ion-icon *ngIf="ThemeService.currentTheme == 'doneIt' " src="assets/images/theme/doneIt/icons-calendar-arrow-left.svg"></ion-icon>
             <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " slot="end" src='assets/images/theme/gov/icons-calendar-arrow-left.svg'></ion-icon>
@@ -40,7 +40,7 @@
       <div class="overflow-y-auto">
         <div class="middle-content">
           <div *ngIf="cc.length > 0">
-            <h5>Com conhecimento</h5>
+            <h5 class="font-17-rem">Com conhecimento</h5>
             <ion-item class="ion-no-margin ion-no-padding">
               <ion-label>
                 <div *ngFor="let c of cc">
@@ -49,14 +49,14 @@
               </ion-label>
             </ion-item>
           </div>
-          <h5>Detalhes</h5>
+          <h5 class="font-17-rem">Detalhes</h5>
           <ion-item class="ion-no-margin ion-no-padding">
               <pre class="width-100 text">{{ task.Note }} </pre>
           </ion-item>
         </div>
         <div class="bottom-content width-100">
           <ion-list>
-            <h5>Documentos Anexados</h5>
+            <h5 class="font-17-rem">Documentos Anexados</h5>
             <ion-item class="ion-no-margin ion-no-padding cursor-pointer" *ngFor="let Document of fulltask.Documents">
               <ion-label class="d-block" (click)="viewDocument(Document.DocId, Document)">
                 <p class="attach-title-item">{{ Document.Assunto || "Sem assunto" }}<span class="span-right color-red btn-size"><ion-icon hidden name="close"></ion-icon></span></p>
diff --git a/src/app/pages/gabinete-digital/expediente/expediente-detail/expediente-detail.page.scss b/src/app/pages/gabinete-digital/expediente/expediente-detail/expediente-detail.page.scss
index 7e579fcf7..60a885165 100644
--- a/src/app/pages/gabinete-digital/expediente/expediente-detail/expediente-detail.page.scss
+++ b/src/app/pages/gabinete-digital/expediente/expediente-detail/expediente-detail.page.scss
@@ -14,7 +14,7 @@
   color:#d30a0a !important;
 }
 .btn-size{
-  font-size: 18px !important;
+  font-size: rem(18) !important;
 }
 .main-header{
   font-family: Roboto;
@@ -42,7 +42,7 @@
         .right{
           padding: 0!important;
           float: right;
-          font-size: 25px;
+          font-size: rem(25);
           color: #0782c9;
           margin: 5px 0 0 0;
         }
@@ -53,14 +53,14 @@
         margin: 0 auto;
 
         .header-bottom-icon{
-          width: 30px;
-          font-size: 25px;
+          width: rem(30);
+          font-size: rem(25);
           float: left;
           padding: 2px;
         }
         .header-bottom-contacts{
           width: 275px;
-          font-size: 15px;
+          font-size: rem(15);
           color: #797979;
           white-space: nowrap;
           overflow: hidden;
@@ -72,14 +72,12 @@
       }
 
         .title{
-          font-size: 25px;
+          font-size: rem(25);
           overflow: auto;
           float: left;
-          padding-top: 4px;
-          padding-left: 5px;
         }
         .btn-no-color icon{
-          font-size: 15px;
+          font-size: rem(15);
           border: 1px solid red;
         }
 }
@@ -96,7 +94,7 @@ ion-button{
 .upper-content{
   font-family: Roboto;
   margin-left: 36px;
-  font-size: 18px;
+  font-size: rem(18);
 
   .label{
       border-radius: 20px;
@@ -105,13 +103,14 @@ ion-button{
       float: right;
       padding: 5px 13.5px 5px 13.5px;
       color: #fff;
+      font-size: rem(14);
   }
 
   .button-calendar-type ion-button{
-    height: 25px;
+    height: rem(25);
   }
   .content-details{
-    font-size: 17px;
+    font-size: rem(17);
     .date{
       color: #797979;
     }
@@ -119,7 +118,7 @@ ion-button{
 }
 .middle-conten{
  .middle-content p{
-    font-size: 16px;
+    font-size: rem(16);
   }
 }
 .bottom-content{
@@ -127,11 +126,11 @@ ion-button{
   margin: 0 auto;
 
   .bottom-content h3{
-    font-size: 16px;
+    font-size: rem(16);
     margin: 0 0 0 10px;
   }
   .attach-document{
-    font-size: 15px;
+    font-size: rem(15);
     color: var(--title-text-color);
     margin: 5px 5px 5px 10px;
     padding: 5px;
@@ -139,11 +138,11 @@ ion-button{
   }
   .attach-icon{
     width: 37px;
-    font-size: 35px;
+    font-size: rem(35);
     float: left;
   }
   .attach-title-item{
-    font-size: 18px;
+    font-size: rem(18);
     width: 100%;
     color:#0d89d1;
     padding-bottom: 5px;
@@ -151,12 +150,12 @@ ion-button{
   /* SPAN */
   .span-left{
     float: left;
-    font-size: 15x;
+    font-size: rem(15);
   }
   .span-right{
   text-align: right;
   float: right;
-  font-size: 13px;
+  font-size: rem(13);
   }
 }
 .aside-right {
@@ -171,7 +170,7 @@ ion-button{
     .arrow-right-icon{
         width: 37px;
         float: right;
-        font-size: 35px;
+        font-size: rem(35);
         overflow: hidden;
     }
   }
@@ -182,7 +181,7 @@ ion-button{
 
     .btn-ok, .btn-cancel, .btn-delete{
       height: auto !important;
-      font-size: 16px !important;
+      font-size: rem(16) !important;
       width: 100% !important;
       margin-bottom: 10px !important;
       padding: 15px !important;
@@ -225,19 +224,19 @@ ion-button{
         .time-start{
           color: #797979 !important;
           font-family: Roboto;
-          font-size: 13px;
+          font-size: rem(13);
         }
         .time-end{
           color: #797979 !important;
           font-family: Roboto;
-          font-size: 13px;
+          font-size: rem(13);
         }
       }
       .schedule-date{
         margin-right: 10px;
         width: 22%;
         color: #797979 !important;
-        font-size: 13px;
+        font-size: rem(13);
       }
       .schedule-details{
         display: flex;
@@ -246,21 +245,21 @@ ion-button{
         width: 100%;
         .location{
           font-family: Roboto;
-          font-size: 13px;
+          font-size: rem(13);
           color: black;
           width: 100%;
 
         }
         .description{
           font-family: Roboto;
-          font-size: 15px;
+          font-size: rem(15);
           font-weight: bold;
           color: #0d89d1;
         }
       }
       .color{
         width: 5px;
-        height: 40px;
+        height: rem(40);
         border-top-right-radius: 5px;
         border-bottom-right-radius: 5px;
         background-color: #f05d5e;
@@ -323,7 +322,7 @@ ion-button{
   width: 100%;
   justify-content: space-between;
   align-items: center;
-  font-size: 11pt;
+  font-size: rem(15);
   .option-desc-line {
     height: 1px;
     flex-grow: 1;
diff --git a/src/app/pages/gabinete-digital/expediente/expediente.page.scss b/src/app/pages/gabinete-digital/expediente/expediente.page.scss
index 93384bd41..65eb18af1 100644
--- a/src/app/pages/gabinete-digital/expediente/expediente.page.scss
+++ b/src/app/pages/gabinete-digital/expediente/expediente.page.scss
@@ -22,14 +22,14 @@ ion-content, .header-2{
 
   .header-icon-left{
     width: 36px;
-    font-size: 33px;
+    font-size: rem(33);
     color: #42b9fe;
     float: left;
   }
   .header-title{
     padding-top: 2.5px;
     font-family: Roboto;
-    font-size: 25px;
+    font-size: rem(25);
     color:#000;
     float: left;
   }
@@ -72,12 +72,12 @@ ion-item{
   .div-content-expediente h3, .div-content-pendentes h3{
     margin: 0;
     padding: 0;
-    font-size: 14pt;
+    font-size: rem(19);
     width: 100%;
   }
   .div-icon{
     width: 10%;
-    font-size: 20px;
+    font-size: rem(20);
     float: left;
     color: #808080;
   }
@@ -87,7 +87,7 @@ ion-item{
   
   }
   .div-content-expediente p, .div-content-pendentes p{
-    font-size: 14pt;
+    font-size: rem(19);
     color: rgb(94, 92, 92);
     padding: 0;
     margin: 0;
@@ -95,14 +95,14 @@ ion-item{
   .span-left{
       /* border: 1px solid red; */
       float: left;
-      font-size: 12px;
+      font-size: rem(12);
       padding-left: 18px;
   }
   .span-right{
     /* border: 1px solid blue; */
     text-align: right;
     float: right;
-    font-size: 12px;
+    font-size: rem(12);
     padding-right: 18px;
 }
 
@@ -127,7 +127,7 @@ ion-item{
   width: 100%;
   float: left;
   font-family: Roboto;
-  font-size: 12pt;
+  font-size: rem(16);
   font-weight: 700;
   color: var(--title-text-color);
   padding-left: 3px;
@@ -140,17 +140,17 @@ ion-item{
   .exp-icon{
     width: fit-content;
     float: right;
-   /* font-size: 13px; */
+   /* font-size: rem(13); */
     margin: 0 !important;
     padding: 0 !important;
 
     ion-icon{
-      font-size: 12pt;
+      font-size: rem(16);
       color: #42b9fe;
       float: left;
     }
     label{
-      font-size: 10pt;
+      font-size: rem(13);
     }
   }
 }
@@ -159,7 +159,7 @@ ion-item{
 
 }
 .exp-middle-detail{
-  font-size: 12pt;
+  font-size: rem(16);
   width: 100%;
   overflow: auto;
 
@@ -170,7 +170,7 @@ ion-item{
     .label {
       border-radius: 15px;
       background: var(--label-bg-color);
-      /*font-size: 12px;
+      /*font-size: rem(12);
       */float: right;
       padding: 2.5px 13.5px 2.5px 13.5px;
       color: #fff;
@@ -183,7 +183,7 @@ ion-item{
   .exp-date{
     width: auto;
     font-family: Roboto;
-    font-size: 10pt;
+    font-size: rem(13);
     font-weight: normal;
     font-stretch: normal;
     font-style: normal;
@@ -194,7 +194,7 @@ ion-item{
   }
 }
 .exp-bottom-detail{
-  font-size: 8pt;
+  font-size: rem(10);
   width: 100%;
   overflow: auto;
   padding-left: 3px;
@@ -202,7 +202,7 @@ ion-item{
   .exp-remetente{
     //width: 200px;
     font-family: Roboto;
-   /*  font-size: 13px; */
+   /*  font-size: rem(13); */
     font-weight: normal;
     color: #000000;
     float: left;
@@ -216,7 +216,7 @@ ion-item{
   overflow: auto;
 }
 .div-search{
-  font-size: 45px;
+  font-size: rem(45);
   float: left;
   margin: 0 0 0 10px
 }
@@ -230,20 +230,20 @@ ion-item{
   width: 100%;
 }
 .div-profile{
-  font-size: 45px;
+  font-size: rem(45);
   float: right;
   margin-right: 10px;
 }
 
 .dead-line {
-  font-size: 12px;
+  font-size: rem(12);
   color: red;
 }
 
 .new-task {
   border-radius: 20px;
   background: #efefef;
-  font-size: 12px;
+  font-size: rem(12);
   float: right;
   padding: 2.5px 13.5px 2.5px 13.5px;
   color: #46465b;
diff --git a/src/app/pages/gabinete-digital/expedientes-pr/expediente-pr/expediente-pr.page.html b/src/app/pages/gabinete-digital/expedientes-pr/expediente-pr/expediente-pr.page.html
index be32a4c61..ae36ef658 100644
--- a/src/app/pages/gabinete-digital/expedientes-pr/expediente-pr/expediente-pr.page.html
+++ b/src/app/pages/gabinete-digital/expedientes-pr/expediente-pr/expediente-pr.page.html
@@ -11,7 +11,7 @@
     <div class="content d-flex flex-column" *ngIf="task">
       <div class="main-header" style="overflow: unset !important;">
         <div class="title-content width-100 d-flex justify-between">
-          <div class="font-30 cursor-pointer" (click)="goBack()" defaultHref="#">
+          <div class="font-30-rem cursor-pointer" (click)="goBack()" defaultHref="#">
             <ion-icon  *ngIf="ThemeService.currentTheme == 'default' " slot="end" src='assets/images/icons-arrow-arrow-left.svg'></ion-icon>
             <ion-icon *ngIf="ThemeService.currentTheme == 'doneIt' " src="assets/images/theme/doneIt/icons-calendar-arrow-left.svg"></ion-icon>
             <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " slot="end" src='assets/images/theme/gov/icons-calendar-arrow-left.svg'></ion-icon>
@@ -53,7 +53,7 @@
             </ion-label>
           </ion-item> -->
           <div *ngIf="cc.length > 0">
-            <h5>Com conhecimento</h5>
+            <h5 class="font-17-rem">Com conhecimento</h5>
             <ion-item class="ion-no-margin ion-no-padding">
               <ion-label>
                 <div *ngFor="let c of cc">
@@ -63,7 +63,7 @@
             </ion-item>
           </div>
           <div *ngIf="fulltask.workflowInstanceDataFields.TaskMessage">
-            <h5>Detalhes</h5>
+            <h5 class="font-17-rem">Detalhes</h5>
             <ion-item class="ion-no-margin ion-no-padding">
               <pre class="width-100 text">{{ fulltask.workflowInstanceDataFields.TaskMessage }} </pre>
             </ion-item>
@@ -72,7 +72,7 @@
 
         <div class="bottom-content width-100">
           <ion-list>
-            <h5>Documentos Anexados</h5>
+            <h5 class="font-17-rem">Documentos Anexados</h5>
             <ion-item class="ion-no-margin ion-no-padding cursor-pointer" *ngFor="let Document of fulltask.Documents">
               <ion-label class="d-block" (click)="viewDocument(Document.DocId, Document)">
                 <p class="attach-title-item">{{ Document.Assunto || "Sem assunto" }}<span class="span-right color-red btn-size"><ion-icon hidden name="close"></ion-icon></span></p>
diff --git a/src/app/pages/gabinete-digital/expedientes-pr/expediente-pr/expediente-pr.page.scss b/src/app/pages/gabinete-digital/expedientes-pr/expediente-pr/expediente-pr.page.scss
index b603df196..c112620d8 100644
--- a/src/app/pages/gabinete-digital/expedientes-pr/expediente-pr/expediente-pr.page.scss
+++ b/src/app/pages/gabinete-digital/expedientes-pr/expediente-pr/expediente-pr.page.scss
@@ -14,7 +14,7 @@
   color:#d30a0a !important;
 }
 .btn-size{
-  font-size: 18px !important;
+  font-size: rem(18) !important;
 }
 .main-header{
   font-family: Roboto;
@@ -42,7 +42,7 @@
         .right{
           padding: 0!important;
           float: right;
-          font-size: 25px;
+          font-size: rem(25);
           color: #0782c9;
           margin: 5px 0 0 0;
         }
@@ -53,14 +53,14 @@
         margin: 0 auto;
 
         .header-bottom-icon{
-          width: 30px;
-          font-size: 25px;
+          width: rem(30);
+          font-size: rem(25);
           float: left;
           padding: 2px;
         }
         .header-bottom-contacts{
           width: 275px;
-          font-size: 15px;
+          font-size: rem(15);
           color: #797979;
           white-space: nowrap;
           overflow: hidden;
@@ -72,14 +72,12 @@
       }
 
         .title{
-          font-size: 25px;
+          font-size: rem(25);
           overflow: auto;
           float: left;
-          padding-top: 4px;
-          padding-left: 5px;
         }
         .btn-no-color icon{
-          font-size: 15px;
+          font-size: rem(15);
           border: 1px solid red;
         }
 }
@@ -96,7 +94,7 @@ ion-button{
 .upper-content{
   font-family: Roboto;
   margin-left: 36px;
-  font-size: 18px;
+  font-size: rem(18);
 
   .label{
       border-radius: 20px;
@@ -104,13 +102,14 @@ ion-button{
       float: right;
       padding: 5px 13.5px 5px 13.5px;
       color: #fff;
+      font-size: rem(14);
   }
 
   .button-calendar-type ion-button{
-    height: 25px;
+    height: rem(25);
   }
   .content-details{
-    font-size: 17px;
+    font-size: rem(17);
     .date{
       color: #797979;
     }
@@ -118,7 +117,7 @@ ion-button{
 }
 .middle-conten{
  .middle-content p{
-    font-size: 16px;
+    font-size: rem(16);
   }
 }
 .bottom-content{
@@ -126,11 +125,11 @@ ion-button{
   margin: 0 auto;
 
   .bottom-content h3{
-    font-size: 16px;
+    font-size: rem(16);
     margin: 0 0 0 10px;
   }
   .attach-document{
-    font-size: 15px;
+    font-size: rem(15);
     color: var(--title-text-color);
     margin: 5px 5px 5px 10px;
     padding: 5px;
@@ -138,11 +137,11 @@ ion-button{
   }
   .attach-icon{
     width: 37px;
-    font-size: 35px;
+    font-size: rem(35);
     float: left;
   }
   .attach-title-item{
-    font-size: 18px;
+    font-size: rem(18);
     width: 100%;
     color:#0d89d1;
     padding-bottom: 5px;
@@ -150,12 +149,12 @@ ion-button{
   /* SPAN */
   .span-left{
     float: left;
-    font-size: 15x;
+    font-size: rem(15);
   }
   .span-right{
   text-align: right;
   float: right;
-  font-size: 13px;
+  font-size: rem(13);
   }
 }
 .aside-right{
@@ -169,7 +168,7 @@ ion-button{
     .arrow-right-icon{
         width: 37px;
         float: right;
-        font-size: 35px;
+        font-size: rem(35);
         overflow: hidden;
     }
   }
@@ -180,7 +179,7 @@ ion-button{
 
     .btn-ok, .btn-cancel, .btn-delete{
       height: auto !important;
-      font-size: 16px !important;
+      font-size: rem(16) !important;
       width: 100% !important;
       margin-bottom: 10px !important;
       padding: 15px !important;
diff --git a/src/app/pages/gabinete-digital/expedientes-pr/expedientes-pr.page.scss b/src/app/pages/gabinete-digital/expedientes-pr/expedientes-pr.page.scss
index 6f529aa36..400a3d7be 100644
--- a/src/app/pages/gabinete-digital/expedientes-pr/expedientes-pr.page.scss
+++ b/src/app/pages/gabinete-digital/expedientes-pr/expedientes-pr.page.scss
@@ -20,7 +20,7 @@ ion-content, .main-content{
   
 .title{
     font-family: Roboto;
-    font-size: 25px;
+    font-size: rem(25);
     color:#000;
     overflow: auto;
 
@@ -34,7 +34,7 @@ ion-content, .main-content{
     }
   }
 .item-list-small{
-    font-size: 11px;
+    font-size:  rem(11);
     overflow: auto;
   }
   .ion-item-class{
@@ -77,12 +77,12 @@ ion-item{
   .div-content-expediente h3, .div-content-pendentes h3{
     margin: 0;
     padding: 0;
-    font-size: 14pt;
+    font-size: rem(19);
     width: 100%;
   }
   .div-icon{
     width: 10%;
-    font-size: 20px;
+    font-size: rem(20);
     float: left;
     color: #808080;
   }
@@ -92,7 +92,7 @@ ion-item{
   
   }
   .div-content-expediente p, .div-content-pendentes p{
-    font-size: 14pt;
+    font-size: rem(19);
     color: rgb(94, 92, 92);
     padding: 0;
     margin: 0;
@@ -100,14 +100,14 @@ ion-item{
   .span-left{
       /* border: 1px solid red; */
       float: left;
-      font-size: 12px;
+      font-size: rem(12);
       padding-left: 18px;
   }
   .span-right{
     /* border: 1px solid blue; */
     text-align: right;
     float: right;
-    font-size: 12px;
+    font-size: rem(12);
     padding-right: 18px;
 }
 /* New CSS */
@@ -130,7 +130,7 @@ ion-item{
   width: 100%;
   float: left;
   font-family: Roboto;
-  font-size: 12pt;
+  font-size: rem(16);
   font-weight: 700;
   color: var(--title-text-color);
   padding-left: 3px;
@@ -143,17 +143,17 @@ ion-item{
   .exp-icon{
     width: fit-content;
     float: right;
-   /* font-size: 13px; */
+   /* font-size: rem(13); */
     margin: 0 !important;
     padding: 0 !important;
 
     ion-icon{
-      font-size: 12pt;
+      font-size: rem(16);
       color: #42b9fe;
       float: left;
     }
     label{
-      font-size: 10pt;
+      font-size: rem(13);
     }
   }
 }
@@ -162,7 +162,7 @@ ion-item{
 
 }
 .exp-middle-detail{
-  font-size: 12pt;
+  font-size: rem(16);
   width: 100%;
   overflow: auto;
 
@@ -182,7 +182,7 @@ ion-item{
   .exp-date{
     width: auto;
     font-family: Roboto;
-    font-size: 10pt;
+    font-size: rem(13);
     font-weight: normal;
     font-stretch: normal;
     font-style: normal;
@@ -193,7 +193,7 @@ ion-item{
   }
 }
 .exp-bottom-detail{
-  font-size: 8pt;
+  font-size: rem(10);
   width: 100%;
   overflow: auto;
   padding-left: 3px;
@@ -201,7 +201,7 @@ ion-item{
   .exp-remetente{
     //width: 200px;
     font-family: Roboto;
-   /*  font-size: 13px; */
+   /*  font-size: rem(13); */
     font-weight: normal;
     color: #000000;
     float: left;
@@ -215,7 +215,7 @@ ion-item{
   overflow: auto;
 }
 .div-search{
-  font-size: 45px;
+  font-size: rem(45);
   float: left;
   margin: 0 0 0 10px
 }
@@ -229,7 +229,7 @@ ion-item{
   width: 100%;
 }
 .div-profile{
-  font-size: 45px;
+  font-size: rem(45);
   float: right;
   margin-right: 10px;
 }
\ No newline at end of file
diff --git a/src/app/pages/gabinete-digital/gabinete-digital.page.html b/src/app/pages/gabinete-digital/gabinete-digital.page.html
index 44a62f9d1..36d81587c 100644
--- a/src/app/pages/gabinete-digital/gabinete-digital.page.html
+++ b/src/app/pages/gabinete-digital/gabinete-digital.page.html
@@ -84,13 +84,13 @@
         <div *ngIf="segmentVista == 'listview' " class="d-flex px-20 justify-content-end width-100">
           <div title="Pesquisa"  class="d-flex align-center cursor-pointer width-100 justify-end">
             <!-- <div  (click)="openSearch();showSearch=true" *ngIf="!showSearch" class="d-flex">
-              <ion-icon title="Perfil" *ngIf="ThemeService.currentTheme == 'doneIt' " class="font-35" src="assets/images/theme/doneIt/icons-search.svg"></ion-icon>
-              <ion-icon title="Perfil" *ngIf="ThemeService.currentTheme == 'default' " class="font-35" src='assets/images/icons-search.svg'></ion-icon>
-              <ion-icon title="Perfil" *ngIf="ThemeService.currentTheme == 'gov' " class="font-35" src='assets/images/theme/gov/icons-search.svg'></ion-icon>
+              <ion-icon title="Perfil" *ngIf="ThemeService.currentTheme == 'doneIt' " class="font-35-rem" src="assets/images/theme/doneIt/icons-search.svg"></ion-icon>
+              <ion-icon title="Perfil" *ngIf="ThemeService.currentTheme == 'default' " class="font-35-rem" src='assets/images/icons-search.svg'></ion-icon>
+              <ion-icon title="Perfil" *ngIf="ThemeService.currentTheme == 'gov' " class="font-35-rem" src='assets/images/theme/gov/icons-search.svg'></ion-icon>
             </div>
             <button title="Fechar" class="btn-no-color d-flex" (click)="closeSearch();showSearch=false;searchSubject=''" *ngIf="showSearch">
-              <ion-icon *ngIf="ThemeService.currentTheme == 'default' || ThemeService.currentTheme == 'doneIt' " class="font-35" name="restaurant-outline" src="assets/images/icons-search-close.svg"></ion-icon>
-              <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="font-35" name="restaurant-outline" src="assets/images/theme/gov/icons-search-close.svg"></ion-icon>
+              <ion-icon *ngIf="ThemeService.currentTheme == 'default' || ThemeService.currentTheme == 'doneIt' " class="font-35-rem" name="restaurant-outline" src="assets/images/icons-search-close.svg"></ion-icon>
+              <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="font-35-rem" name="restaurant-outline" src="assets/images/theme/gov/icons-search-close.svg"></ion-icon>
             </button> -->
   
             <div *ngIf="showSearch" class="width-100">
diff --git a/src/app/pages/gabinete-digital/gabinete-digital.page.scss b/src/app/pages/gabinete-digital/gabinete-digital.page.scss
index c7450cd90..009ff04b9 100644
--- a/src/app/pages/gabinete-digital/gabinete-digital.page.scss
+++ b/src/app/pages/gabinete-digital/gabinete-digital.page.scss
@@ -19,7 +19,7 @@ ion-content{
    --margin-bottom: 5px;
    --margin-top: 0px;
  
-   min-height: 25px;
+   min-height: rem(25);
    min-width: 25px;
  }
  :host{
@@ -55,7 +55,7 @@ ion-content{
        align-self: baseline;
      }
      .title-icons fa-icon{
-       font-size: 25px !important;
+       font-size: rem(25) !important;
      }
    }
  
@@ -287,17 +287,17 @@ ion-content{
        .item-icon{
          width: fit-content;
          float: right;
-       /* font-size: 13px; */
+       /* font-size: rem(13); */
          margin: 0 !important;
          padding: 0 !important;
  
          ion-icon{
-           font-size: 12pt;
+           font-size: rem(16);
            color: #42b9fe;
            float: left;
          }
          label{
-           font-size: 10pt;
+           font-size: rem(13);
          }
        }
      }
@@ -312,7 +312,7 @@ ion-content{
        .item-remetente{
          //width: 200px;
          font-family: Roboto;
-        /*  font-size: 13px; */
+        /*  font-size: rem(13); */
          font-weight: normal;
          color: #000000;
          float: left;
@@ -354,7 +354,7 @@ ion-content{
          .label{
            border-radius: 15px;
            background: var(--label-bg-color);
-           /* font-size: 12px; */
+           font-size: rem(12);
            float: right;
            padding: 2.5px 13.5px 2.5px 13.5px;
            color: #fff;
@@ -403,7 +403,7 @@ ion-content{
      --background: transparent;
    }
    .title{
-     font-size: 15px !important;
+     font-size: rem(15) !important;
    }
  
    .main-content{
@@ -427,7 +427,7 @@ ion-content{
        }
        .aside-title{
          font-family: Roboto;
-         font-size: 16px !important;
+         font-size: rem(16) !important;
          text-align: left;
        }
        .exp-card{
@@ -525,7 +525,7 @@ ion-content{
  
  @media only screen and (min-width: 801px) {
    .title{
-     font-size: 25px !important;
+     font-size: rem(25) !important;
    }
    .content{
      width: 65%;
@@ -536,7 +536,7 @@ ion-content{
    }
    .aside-title{
      font-family: Roboto;
-     font-size: 25px;
+     font-size: rem(25);
      text-align: left;
    }
  }
@@ -626,7 +626,7 @@ ion-content{
 
   .item-icon{
     //margin-top: 28px;
-    width: 45px;
+    width: rem(45);
     float: left;
     font-size: rem(40);
 
@@ -636,7 +636,7 @@ ion-content{
   }
   .item-icon2{
     //margin-top: 23px;
-    width: 45px;
+    width: rem(45);
     float: left;
     font-size: rem(40);
   }
diff --git a/src/app/pages/gabinete-digital/pedidos/pedido/pedido.page.html b/src/app/pages/gabinete-digital/pedidos/pedido/pedido.page.html
index 57495dd70..9a5d316e5 100644
--- a/src/app/pages/gabinete-digital/pedidos/pedido/pedido.page.html
+++ b/src/app/pages/gabinete-digital/pedidos/pedido/pedido.page.html
@@ -3,7 +3,7 @@
     <div class="content d-flex flex-column" *ngIf="task">
       <div class="main-header ">
         <div class="title-content width-100 d-flex justify-space-between ">
-          <div class="font-30 cursor-pointer" (click)="goBack()" defaultHref="#">
+          <div class="font-30-rem cursor-pointer" (click)="goBack()" defaultHref="#">
             <ion-icon *ngIf="ThemeService.currentTheme == 'default' " slot="end" src='assets/images/icons-arrow-arrow-left.svg'></ion-icon>
             <ion-icon *ngIf="ThemeService.currentTheme == 'doneIt' " src="assets/images/theme/doneIt/icons-calendar-arrow-left.svg"></ion-icon>
             <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " slot="end" src='assets/images/theme/gov/icons-calendar-arrow-left.svg'></ion-icon>
@@ -14,8 +14,8 @@
           </div>
           <div class="div-icon">
             <div autoHide="false" class="d-flex" (click)="openOptions()">
-              <ion-icon *ngIf="ThemeService.currentTheme == 'default' " class="font-30 cursor-pointer" src="assets/images/icons-menu.svg"></ion-icon>
-              <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="font-30 cursor-pointer" src="assets/images/theme/gov/icons-menu.svg"></ion-icon>
+              <ion-icon *ngIf="ThemeService.currentTheme == 'default' " class="font-30-rem cursor-pointer" src="assets/images/icons-menu.svg"></ion-icon>
+              <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="font-30-rem cursor-pointer" src="assets/images/theme/gov/icons-menu.svg"></ion-icon>
             </div>
           </div>
         </div>
@@ -46,7 +46,7 @@
             </ion-label>
           </ion-item>
           <div *ngIf="cc.length > 0">
-            <h5>Com conhecimento</h5>
+            <h5 class="font-17-rem">Com conhecimento</h5>
             <ion-item class="ion-no-margin ion-no-padding">
               <ion-label>
                 <div *ngFor="let c of cc">
@@ -56,7 +56,7 @@
             </ion-item>
           </div>
           <div *ngIf="task.Note">
-            <h5>Detalhes</h5>
+            <h5 class="font-17-rem">Detalhes</h5>
             <ion-item class="ion-no-margin ion-no-padding">
                 <pre class="width-100 text">{{ task.Note }} </pre>
             </ion-item>
@@ -64,7 +64,7 @@
         </div>
         <div class="bottom-content width-100">
           <ion-list>
-            <h5>Documentos Anexados</h5>
+            <h5 class="font-17-rem">Documentos Anexados</h5>
             <ion-item *ngFor="let attachment of attachments"
               class="ion-no-margin ion-no-padding cursor-pointer"
             >
diff --git a/src/app/pages/gabinete-digital/pedidos/pedido/pedido.page.scss b/src/app/pages/gabinete-digital/pedidos/pedido/pedido.page.scss
index 38ea4af3b..d0b019bda 100644
--- a/src/app/pages/gabinete-digital/pedidos/pedido/pedido.page.scss
+++ b/src/app/pages/gabinete-digital/pedidos/pedido/pedido.page.scss
@@ -14,7 +14,7 @@
   color:#d30a0a !important;
 }
 .btn-size{
-  font-size: 18px !important;
+  font-size: rem(18) !important;
 }
 .main-header{
   display: flex;
@@ -36,14 +36,14 @@
         .title{
           width: fit-content;
           height: auto;
-          font-size: 25px;
+          font-size: rem(25);
           overflow: auto;
           float: left;
           padding-left: 5px;
         }
         .div-icon{
           width: 37px !important;
-          font-size: 35px !important;
+          font-size: rem(35) !important;
           padding: 1px;
           right: 0 !important;
         }
@@ -62,7 +62,7 @@ ion-button{
 .upper-content{
   font-family: Roboto;
   margin-left: 36px;
-  font-size: 18px;
+  font-size: rem(18);
 
   .label{
       border-radius: 20px;
@@ -70,13 +70,14 @@ ion-button{
       float: right;
       padding: 5px 13.5px 5px 13.5px;
       color: #fff;
+      font-size: rem(14);
   }
 
   .button-calendar-type ion-button{
-    height: 25px;
+    height: rem(25);
   }
   .content-details{
-    font-size: 17px;
+    font-size: rem(17);
     .date{
       color: #797979;
     }
@@ -84,7 +85,7 @@ ion-button{
 }
 .middle-conten{
  .middle-content p{
-    font-size: 16px;
+    font-size: rem(16);
   }
 }
 .bottom-content{
@@ -92,11 +93,11 @@ ion-button{
   margin: 0 auto;
 
   .bottom-content h3{
-    font-size: 16px;
+    font-size: rem(16);
     margin: 0 0 0 10px;
   }
   .attach-document{
-    font-size: 15px;
+    font-size: rem(15);
     color: var(--title-text-color);
     margin: 5px 5px 5px 10px;
     padding: 5px;
@@ -104,11 +105,11 @@ ion-button{
   }
   .attach-icon{
     width: 37px;
-    font-size: 35px;
+    font-size: rem(35);
     float: left;
   }
   .attach-title-item{
-    font-size: 18px;
+    font-size: rem(18);
     width: 100%;
     color:#0d89d1;
     padding-bottom: 5px;
@@ -116,12 +117,12 @@ ion-button{
   /* SPAN */
   .span-left{
     float: left;
-    font-size: 15x;
+    font-size: rem(15);
   }
   .span-right{
   text-align: right;
   float: right;
-  font-size: 13px;
+  font-size: rem(13);
   }
 }
 .aside-right{
@@ -135,7 +136,7 @@ ion-button{
     .arrow-right-icon{
         width: 37px;
         float: right;
-        font-size: 35px;
+        font-size: rem(35);
         overflow: hidden;
     }
   }
@@ -146,7 +147,7 @@ ion-button{
 
     .btn-ok, .btn-cancel, .btn-delete{
       height: auto !important;
-      font-size: 16px !important;
+      font-size: rem(16) !important;
       width: 100% !important;
       margin-bottom: 10px !important;
       padding: 15px !important;
diff --git a/src/app/pages/gabinete-digital/pedidos/pedidos.page.html b/src/app/pages/gabinete-digital/pedidos/pedidos.page.html
index d4d6a7b39..b8f2bb46a 100644
--- a/src/app/pages/gabinete-digital/pedidos/pedidos.page.html
+++ b/src/app/pages/gabinete-digital/pedidos/pedidos.page.html
@@ -6,7 +6,7 @@
   
   <div class="title d-flex justify-space-between">
     <div class="d-flex align-center" (click)="goBack()">
-      <div class="d-flex align-center font-35">
+      <div class="d-flex align-center font-35-rem">
         <ion-icon *ngIf="ThemeService.currentTheme == 'default' " slot="end" src='assets/images/icons-arrow-arrow-left.svg'></ion-icon>
         <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " slot="end" src='assets/images/theme/gov/icons-calendar-arrow-left.svg'></ion-icon>
         <ion-icon *ngIf="ThemeService.currentTheme == 'doneIt' " slot="end" src='assets/images/theme/{{ThemeService.currentTheme}}/icons-calendar-arrow-left.svg'></ion-icon>
diff --git a/src/app/pages/gabinete-digital/pedidos/pedidos.page.scss b/src/app/pages/gabinete-digital/pedidos/pedidos.page.scss
index 7bb7d89f7..efce40ae7 100644
--- a/src/app/pages/gabinete-digital/pedidos/pedidos.page.scss
+++ b/src/app/pages/gabinete-digital/pedidos/pedidos.page.scss
@@ -19,7 +19,7 @@ ion-content, .header-2, .main-content{
 
 .title{
     font-family: Roboto;
-    font-size: 25px;
+    font-size: rem(25);
     color:#000;
     overflow: auto;
 
@@ -33,7 +33,7 @@ ion-content, .header-2, .main-content{
     }
   }
 .item-list-small{
-    font-size: 11px;
+    font-size:  rem(11);
     overflow: hidden;
   }
   .ion-item-class{
@@ -75,12 +75,12 @@ ion-item{
   .div-content-expediente h3, .div-content-pendentes h3{
     margin: 0;
     padding: 0;
-    font-size: 14pt;
+    font-size: rem(19);
     width: 100%;
   }
   .div-icon{
     width: 10%;
-    font-size: 20px;
+    font-size: rem(20);
     float: left;
     color: #808080;
   }
@@ -90,21 +90,21 @@ ion-item{
 
   }
   .div-content-expediente p, .div-content-pendentes p{
-    font-size: 14pt;
+    font-size: rem(19);
     color: rgb(94, 92, 92);
     padding: 0;
     margin: 0;
   }
   .span-left{
       float: left;
-      font-size: 12px;
+      font-size: rem(12);
       padding-left: 18px;
   }
   .span-right{
     /* border: 1px solid blue; */
     text-align: right;
     float: right;
-    font-size: 12px;
+    font-size: rem(12);
     padding-right: 18px;
 }
 
@@ -128,7 +128,7 @@ ion-item{
   width: 100%;
   float: left;
   font-family: Roboto;
-  font-size: 12pt;
+  font-size: rem(16);
   font-weight: 700;
   color: var(--title-text-color);
   padding-left: 3px;
@@ -141,17 +141,17 @@ ion-item{
   .exp-icon{
     width: fit-content;
     float: right;
-   /* font-size: 13px; */
+   /* font-size: rem(13); */
     margin: 0 !important;
     padding: 0 !important;
 
     ion-icon{
-      font-size: 12pt;
+      font-size: rem(16);
       color: #42b9fe;
       float: left;
     }
     label{
-      font-size: 10pt;
+      font-size: rem(13);
     }
   }
 }
@@ -160,7 +160,7 @@ ion-item{
 
 }
 .exp-middle-detail{
-  font-size: 12pt;
+  font-size: rem(16);
   width: 100%;
   overflow: auto;
 
@@ -171,7 +171,7 @@ ion-item{
     .label{
       border-radius: 15px;
       background: var(--label-bg-color);
-      /* font-size: 12px; */
+      /* font-size: rem(12); */
       float: right;
       padding: 2.5px 13.5px 2.5px 13.5px;
       color: #fff;
@@ -180,7 +180,7 @@ ion-item{
   .exp-date{
     width: auto;
     font-family: Roboto;
-    font-size: 10pt;
+    font-size: rem(13);
     font-weight: normal;
     font-stretch: normal;
     font-style: normal;
@@ -191,7 +191,7 @@ ion-item{
   }
 }
 .exp-bottom-detail{
-  font-size: 8pt;
+  font-size: rem(10);
   width: 100%;
   overflow: auto;
   padding-left: 3px;
@@ -199,7 +199,7 @@ ion-item{
   .exp-remetente{
     //width: 200px;
     font-family: Roboto;
-   /*  font-size: 13px; */
+   /*  font-size: rem(13); */
     font-weight: normal;
     color: #000000;
     float: left;
@@ -213,7 +213,7 @@ ion-item{
   overflow: auto;
 }
 .div-search{
-  font-size: 45px;
+  font-size: rem(45);
   float: left;
   margin: 0 0 0 10px
 }
@@ -227,7 +227,7 @@ ion-item{
   width: 100%;
 }
 .div-profile{
-  font-size: 45px;
+  font-size: rem(45);
   float: right;
   margin-right: 10px;
 }
diff --git a/src/app/pages/gabinete-digital/pendentes/pendentes.page.scss b/src/app/pages/gabinete-digital/pendentes/pendentes.page.scss
index fcf3a61d5..0effba5f3 100644
--- a/src/app/pages/gabinete-digital/pendentes/pendentes.page.scss
+++ b/src/app/pages/gabinete-digital/pendentes/pendentes.page.scss
@@ -17,7 +17,7 @@
 
 .title{
     font-family: Roboto;
-    font-size: 25px;
+    font-size: rem(25);
     color:#000;
     overflow: auto;
 
@@ -31,7 +31,7 @@
     }
   }
 .item-list-small{
-    font-size: 11px;
+    font-size:  rem(11);
     overflow: hidden;
   }
   .ion-item-class{
@@ -73,12 +73,12 @@ ion-item{
   .div-content-expediente h3, .div-content-pendentes h3{
     margin: 0;
     padding: 0;
-    font-size: 14pt;
+    font-size: rem(19);
     width: 100%;
   }
   .div-icon{
     width: 10%;
-    font-size: 20px;
+    font-size: rem(20);
     float: left;
     color: #808080;
   }
@@ -88,7 +88,7 @@ ion-item{
   
   }
   .div-content-expediente p, .div-content-pendentes p{
-    font-size: 14pt;
+    font-size: rem(19);
     color: rgb(94, 92, 92);
     padding: 0;
     margin: 0;
@@ -102,7 +102,7 @@ ion-item{
     /* border: 1px solid blue; */
     text-align: right;
     float: right;
-    font-size: 12px;
+    font-size: rem(12);
     padding-right: 18px;
 }
 
@@ -126,7 +126,7 @@ ion-item{
   width: 100%;
   float: left;
   font-family: Roboto;
-  font-size: 12pt;
+  font-size: rem(16);
   font-weight: 700;
   color: var(--title-text-color);
   padding-left: 3px;
@@ -139,17 +139,17 @@ ion-item{
   .exp-icon{
     width: fit-content;
     float: right;
-   /* font-size: 13px; */
+   /* font-size: rem(13); */
     margin: 0 !important;
     padding: 0 !important;
 
     ion-icon{
-      font-size: 12pt;
+      font-size: rem(16);
       color: #42b9fe;
       float: left;
     }
     label{
-      font-size: 10pt;
+      font-size: rem(13);
     }
   }
 }
@@ -158,7 +158,7 @@ ion-item{
 
 }
 .exp-middle-detail{
-  font-size: 12pt;
+  font-size: rem(16);
   width: 100%;
   overflow: auto;
 
@@ -178,7 +178,7 @@ ion-item{
   .exp-date{
     width: auto;
     font-family: Roboto;
-    font-size: 10pt;
+    font-size: rem(13);
     font-weight: normal;
     font-stretch: normal;
     font-style: normal;
@@ -189,7 +189,7 @@ ion-item{
   }
 }
 .exp-bottom-detail{
-  font-size: 8pt;
+  font-size: rem(10);
   width: 100%;
   overflow: auto;
   padding-left: 3px;
@@ -197,7 +197,7 @@ ion-item{
   .exp-remetente{
     //width: 200px;
     font-family: Roboto;
-   /*  font-size: 13px; */
+   /*  font-size: rem(13); */
     font-weight: normal;
     color: #000000;
     float: left;
@@ -211,7 +211,7 @@ ion-item{
   overflow: auto;
 }
 .div-search{
-  font-size: 45px;
+  font-size: rem(45);
   float: left;
   margin: 0 0 0 10px
 }
@@ -225,7 +225,7 @@ ion-item{
   width: 100%;
 }
 .div-profile{
-  font-size: 45px;
+  font-size: rem(45);
   float: right;
   margin-right: 10px;
 }
\ No newline at end of file
diff --git a/src/app/pages/inactivity/inactivity.page.scss b/src/app/pages/inactivity/inactivity.page.scss
index bf2897b74..b1d218f0b 100644
--- a/src/app/pages/inactivity/inactivity.page.scss
+++ b/src/app/pages/inactivity/inactivity.page.scss
@@ -84,7 +84,7 @@ ion-content{
     width: 100%;
 }
 .wrapper ion-input{
-    font-size: 16px;
+    font-size: rem(16);
 }
 .wrapper ion-button{
     font-size: medium;
@@ -100,7 +100,7 @@ ion-item{
 }
 .form-label{
     margin: 15px 0 5px 0;
-    font-size: 15px;
+    font-size: rem(15);
 }
 .form-input{ 
     --background: #fff;
@@ -109,7 +109,7 @@ ion-item{
     margin: 10px 0 10px 0;
 }
 .btn-login{
-    font-size: 16px;
+    font-size: rem(16);
   }
 
 
@@ -140,7 +140,7 @@ ion-item{
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 19pt;
+  font-size: 1rem(12);
   background: var(--PinDots);;
   border-radius: 56px;    
   margin-bottom: 15px;
@@ -172,7 +172,7 @@ ion-item{
 
 .clear{
   color: var(--PinTextColor);
-  font-size: 12pt;
+  font-size: rem(16);
   z-index: 1000;
 }
 
@@ -181,8 +181,8 @@ ion-item{
 }
 
 .dot{
-  width: 25px;
-  height: 25px;
+  width: rem(25);
+  height: rem(25);
   margin: 0 10px 0 0;
   border: 3px solid var(--PinDots);
   box-sizing: border-box;
diff --git a/src/app/pages/login/login.page.scss b/src/app/pages/login/login.page.scss
index f24e5345f..fffc88abd 100644
--- a/src/app/pages/login/login.page.scss
+++ b/src/app/pages/login/login.page.scss
@@ -18,40 +18,40 @@ ion-content{
 
 }
 .wrapper{
-    width: 400px;
+    width: rem(400);
     height: auto;
     padding: 0 !important;
     margin: auto !important;
     overflow: auto;
 }
 .logo{
-    width: 400px;
-    height: 400px;
+    width: rem(400);
+    height: rem(400);
     background-image: url("/assets/background/auth.svg");
     background-position: center;
     background-repeat: no-repeat;
 }
 .bg-1{
-    width: 250px;
-    height: 250px;
+    width: rem(250);
+    height: rem(250);
     overflow: auto;
     border-radius: 50%;
     margin: auto;
     .bg-2{
-        width: 225px;
-        height: 225px;
+        width: rem(225);
+        height: rem(225);
         overflow: auto;
         border-radius: 50%;
         margin: auto;
         .bg-3{
-            width: 200px;
-            height: 200px;
+            width: rem(200);
+            height: rem(200);
             overflow: auto;
             border-radius: 50%;
             margin: auto;
             .bg-4{
-                width: 175px;
-                height: 175px;
+                width: rem(175);
+                height: rem(175);
                 overflow: hidden;
                 border-radius: 50%;
                 padding: 15px;
@@ -67,16 +67,16 @@ ion-content{
     }
 }
 .div-logo{
-    width: 200px !important;
+    width: rem(200) !important;
     margin:  0 auto;
-    padding: 15px !important;
+    padding: rem(15) !important;
 
 }
 .div-logo img{
     width: 100%;
 }
 .wrapper ion-input{
-    font-size: 16px;
+    font-size: rem(16);
 }
 .wrapper ion-button{
     font-size: medium;
@@ -86,24 +86,24 @@ ion-item{
     --background: transparent;
 }
 .form{
-    width: 300px;
+    width: rem(300);
     margin: auto;
     overflow: auto;
 }
 .form-label{
-    margin: 15px 0 5px 0;
-    font-size: 15px;
+    margin: rem(15) 0 rem(5) 0;
+    font-size: rem(15);
     color: var(--login-label-text);
 }
 .form-input{
     --background: #fff;
     --color:#000;
     border-radius: 22.5px;
-    margin: 10px 0 10px 0;
+    margin: rem(10) 0 rem(10) 0;
 }
 
 .btn-login{
-    font-size: 16px;
+    font-size: rem(16);
     background-color: #F2F2F2 !important;
     color: #000;
 }
@@ -119,7 +119,7 @@ ion-item{
 
 .div-logo {
   background: transparent;
-  width: em(140px);
+  width: rem(140);
   justify-content: center;
   display: flex;
 }
@@ -136,7 +136,7 @@ ion-item{
     display: flex;
     align-items: center;
     justify-content: center;
-    font-size: 19pt;
+    font-size: rem(25);
     background: #44b5ea;
     border-radius: 56px;
     margin-left: 30px;
@@ -159,15 +159,15 @@ ion-item{
 
 .clear{
     color: #44b5ea;
-    font-size: 12pt;
+    font-size: rem(16);
 }
 .dot-active{
     background: #44b5ea;
 }
 
 .dot{
-    width: 25px;
-    height: 25px;
+    width: rem(25);
+    height: rem(25);
     margin: 0 10px 0 0;
     border: 3px solid #44b5ea;
     box-sizing: border-box;
@@ -204,7 +204,7 @@ ion-item{
     justify-content: center;
 
     .msg-bottom-p {
-        width: 220px;
+        width: rem(220);
         position: absolute;
         bottom: 0 !important;
         text-align: center;
@@ -213,7 +213,7 @@ ion-item{
 
 @media only screen and (max-height: 746px) {
     .msg-bottom-p {
-        padding-top: 20px;
+        padding-top: rem(20);
         position: unset  !important;
     }
 }
diff --git a/src/app/pages/publications/edit-action/edit-action.page.scss b/src/app/pages/publications/edit-action/edit-action.page.scss
index 23f80b585..e2fafbf65 100644
--- a/src/app/pages/publications/edit-action/edit-action.page.scss
+++ b/src/app/pages/publications/edit-action/edit-action.page.scss
@@ -1,3 +1,5 @@
+@import '~src/function.scss';
+
 :host{
     background: #fff;
   }
@@ -20,7 +22,7 @@
     border: 0!important;
   }
   .div-search{
-    font-size: 45px;
+    font-size: rem(45);
     float: left;
     margin: 0 0 0 10px
   }
@@ -34,7 +36,7 @@
     width: 100%;
   }
   .div-profile{
-    font-size: 45px;
+    font-size: rem(45);
     float: right;
     margin-right: 10px;
   }
@@ -64,14 +66,14 @@
     margin: 2.5px 0 0 5px;
   }
   .title{
-      font-size: 25px;
+      font-size: rem(25);
     }
   .container-div{
-      margin-bottom: 15px;
+      margin-bottom: rem(15);
       overflow: auto;
     }
     .ion-item-container{
-      margin: 15px auto;
+      margin: rem(15) auto;
       border: 1px solid #ebebeb;
       border-radius: 5px;
       padding-left: 10px;
@@ -86,11 +88,11 @@
       margin: 0px auto;
     }
     .ion-icon-class{
-      width: 45px;
-      height: 45px;
+      width: rem(45);
+      height: rem(45);
       float: left;
       padding: 10px;
-      font-size: 25px;
+      font-size: rem(25);
     }
     .ion-input-class{
       height: auto;
diff --git a/src/app/pages/publications/gallery/gallery.page.scss b/src/app/pages/publications/gallery/gallery.page.scss
index 468d9e462..00e96883e 100644
--- a/src/app/pages/publications/gallery/gallery.page.scss
+++ b/src/app/pages/publications/gallery/gallery.page.scss
@@ -1,3 +1,5 @@
+@import '~src/function.scss';
+
 :host{
     background: #0782c9;
   }
@@ -22,7 +24,7 @@
     border: 0!important;
   }
   .div-search{
-    font-size: 45px;
+    font-size: rem(45);
     float: left;
     margin: 0 0 0 10px
   }
@@ -36,7 +38,7 @@
     width: 100%;
   }
   .div-profile{
-    font-size: 45px;
+    font-size: rem(45);
     float: right;
     margin-right: 10px;
   }
@@ -71,7 +73,7 @@
   margin: 2.5px 0 0 5px;
 }
 .title{
-  font-size: 25px;
+  font-size: rem(25);
 }
 .gallery-items{
     width: 360px;
diff --git a/src/app/pages/publications/new-action/new-action.page.scss b/src/app/pages/publications/new-action/new-action.page.scss
index 623b5dbee..8f3768a8d 100644
--- a/src/app/pages/publications/new-action/new-action.page.scss
+++ b/src/app/pages/publications/new-action/new-action.page.scss
@@ -1,3 +1,5 @@
+@import '~src/function.scss';
+
 :host{
   background: transparent;
 }
@@ -21,7 +23,7 @@ ion-toolbar{
   border: 0!important;
 }
 .div-search{
-  font-size: 45px;
+  font-size: rem(45);
   float: left;
   margin: 0 0 0 10px
 }
@@ -35,7 +37,7 @@ ion-toolbar{
   width: 100%;
 }
 .div-profile{
-  font-size: 45px;
+  font-size: rem(45);
   float: right;
   margin-right: 10px;
 }
@@ -69,14 +71,14 @@ float: left;
 margin: 2.5px 0 0 5px;
 }
 .title{
-font-size: 25px;
+font-size: rem(25);
 }
 .container-div{
-    margin-bottom: 15px;
+    margin-bottom: rem(15);
     overflow: auto;
   }
   .ion-item-container{
-    margin: 15px auto;
+    margin: rem(15) auto;
     border: 1px solid #ebebeb;
     border-radius: 5px;
     padding-left: 10px;
@@ -92,11 +94,11 @@ font-size: 25px;
     display: flex;
   }
   .ion-icon-class{
-    width: 45px;
-    height: 45px;
+    width: rem(45);
+    height: rem(45);
     float: left;
     padding: 10px;
-    font-size: 25px;
+    font-size: rem(25);
 
   }
   .ion-input-class{
diff --git a/src/app/pages/publications/new-publication/new-publication.page.scss b/src/app/pages/publications/new-publication/new-publication.page.scss
index 74966c5c9..45422d599 100644
--- a/src/app/pages/publications/new-publication/new-publication.page.scss
+++ b/src/app/pages/publications/new-publication/new-publication.page.scss
@@ -1,3 +1,5 @@
+@import '~src/function.scss';
+
 :host{
   background: #0782c9;
 }
@@ -20,7 +22,7 @@ ion-toolbar{
   border: 0!important;
 }
 .div-search{
-  font-size: 45px;
+  font-size: rem(45);
   float: left;
   margin: 0 0 0 10px
 }
@@ -34,7 +36,7 @@ ion-toolbar{
   width: 100%;
 }
 .div-profile{
-  font-size: 45px;
+  font-size: rem(45);
   float: right;
   margin-right: 10px;
 }
@@ -67,14 +69,14 @@ float: left;
 margin: 2.5px 0 0 5px;
 }
 .title{
-font-size: 25px;
+font-size: rem(25);
 }
   .container-div{
-    margin-bottom: 15px;
+    margin-bottom: rem(15);
     overflow: auto;
   }
   .ion-item-container{
-    margin: 15px auto;
+    margin: rem(15) auto;
     border: 1px solid #ebebeb;
     border-radius: 5px;
     padding-left: 10px;
@@ -90,11 +92,11 @@ font-size: 25px;
     display: flex;
   }
   .ion-icon-class{
-    width: 45px;
-    height: 45px;
+    width: rem(45);
+    height: rem(45);
     float: left;
     padding: 10px;
-    font-size: 25px;
+    font-size: rem(25);
   }
   .ion-textarea-class{
     width: 315px;
@@ -112,7 +114,7 @@ font-size: 25px;
   }
 
   .attach-document{
-    font-size: 15px;
+    font-size: rem(15);
     color: var(--title-text-color);
     margin: 5px 5px 20px 10px;
     padding: 5px;
@@ -120,12 +122,12 @@ font-size: 25px;
   }
   .attach-icon{
     width: 37px;
-    font-size: 35px;
+    font-size: rem(35);
     float: left;
   }
   .attached-title{
   font-family: Roboto;
-  font-size: 15px;
+  font-size: rem(15);
   font-weight: bold;
   font-stretch: normal;
   font-style: normal;
@@ -144,17 +146,17 @@ font-size: 25px;
     width: 60px;
   }
   .picture-file-name{
-    font-size: 15px;
+    font-size: rem(15);
     color: #0d89d1;
   }
   .size{
     color: #cecece;
-    font-size: 13px;
+    font-size: rem(13);
   }
 }
 
 .container-title{
-  font-size: 15px;
+  font-size: rem(15);
   font-weight: bold;
 }
 .hide-desktop{
diff --git a/src/app/pages/publications/publications.page.scss b/src/app/pages/publications/publications.page.scss
index 9defbfbb8..c331c2da0 100644
--- a/src/app/pages/publications/publications.page.scss
+++ b/src/app/pages/publications/publications.page.scss
@@ -1,3 +1,5 @@
+@import '~src/function.scss';
+
 @media only screen and (min-width: 100px) {
   :host{
     font-size: 14px;
@@ -6,7 +8,7 @@
 
 @media only screen and (min-width: 500px) {
   :host{
-    font-size: 16px;
+    font-size: rem(16);
   }
 }
 
@@ -32,7 +34,7 @@ ion-toolbar{
     border: 0!important;
 
     .div-search{
-      font-size: 45px;
+      font-size: rem(45);
       float: left;
       margin: 0 0 0 10px
     }
@@ -46,7 +48,7 @@ ion-toolbar{
       width: 100%;
     }
     .div-profile{
-      font-size: 45px;
+      font-size: rem(45);
       float: right;
       margin-right: 10px;
     }
@@ -75,9 +77,9 @@ ion-toolbar{
     }
     .div-icon{
       display: flex;
-      /* width: 45px;
+      /* width: rem(45);
       float: right; */
-      font-size: 35px;
+      font-size: rem(35);
       padding: 0 !important;
       align-items: center;
       justify-content: flex-end;
@@ -124,9 +126,9 @@ ion-toolbar{
 
     .item-icon{
       //margin-top: 28px;
-      width: 45px;
+      width: rem(45);
       float: left;
-      font-size: 40px;
+      font-size: rem(40);
 
       .item-icon ion-icon{
         color: #061b52;
@@ -161,14 +163,14 @@ ion-toolbar{
       }
       .item-content-detail{
         color: #000000;
-        font-size: 13px;
+        font-size: rem(15);
         margin: 0 !important;
         padding: 0 !important;
       }
       .item-options{
         color: var(--box-hover-background-color);
-        width: 25px;
-        font-size: 20px;
+        width: rem(25);
+        font-size: rem(20);
       }
       .item-content-date-active, .item-content-title-active, .item-content-detail-active{
         color: #fff;
@@ -220,14 +222,14 @@ ion-toolbar{
 
   .edit{
     padding: 6px;
-    font-size: 35px;
+    font-size: rem(35);
     color:#061b52;
     border-radius: 20px;
     margin: 7px;
   }
   .delete{
     padding: 7px;
-    font-size: 21px;
+    font-size: rem(21);
     color:#d30a0a;
     border-radius: 20px;
     margin: 12px;
diff --git a/src/app/pages/publications/view-publications/publication-detail/publication-detail.page.html b/src/app/pages/publications/view-publications/publication-detail/publication-detail.page.html
index 909bf2c98..906fd250c 100644
--- a/src/app/pages/publications/view-publications/publication-detail/publication-detail.page.html
+++ b/src/app/pages/publications/view-publications/publication-detail/publication-detail.page.html
@@ -30,7 +30,7 @@
           <img src="/assets/icon/icon-no-image.svg" alt="image">
         </div>
         <div class="post-description px-20">
-          <pre class="text font-13-em">{{publication.Message}}</pre>
+          <pre class="text font-14-rem">{{publication.Message}}</pre>
         </div>
       </div>
     </div>
diff --git a/src/app/pages/publications/view-publications/publication-detail/publication-detail.page.scss b/src/app/pages/publications/view-publications/publication-detail/publication-detail.page.scss
index 50295dfcf..609e1c80f 100644
--- a/src/app/pages/publications/view-publications/publication-detail/publication-detail.page.scss
+++ b/src/app/pages/publications/view-publications/publication-detail/publication-detail.page.scss
@@ -60,3 +60,7 @@
   margin: 0 auto;
   margin-bottom: 35px;
 }
+
+.font-14-rem {
+  font-size: rem(14) !important;
+}
\ No newline at end of file
diff --git a/src/app/pages/publications/view-publications/view-publications.page.html b/src/app/pages/publications/view-publications/view-publications.page.html
index a9d46bfe1..6e79976c9 100644
--- a/src/app/pages/publications/view-publications/view-publications.page.html
+++ b/src/app/pages/publications/view-publications/view-publications.page.html
@@ -9,7 +9,7 @@
       </div>
       <div *ngIf="publicationItem[folderId]?.DateBegin != null" class="div-title flex-grow-1">
         <p class="title font-25-em mb-10-em">{{publicationItem[folderId].Description}}</p>
-        <p class="item-content-detail font-13-em">{{publicationItem[folderId].Detail}}</p>
+        <p class="item-content-detail font-14-em">{{publicationItem[folderId].Detail}}</p>
         <p class="item-content-date font-13-em" >{{publicationItem[folderId].DateBegin | date: 'dd-MM-yy  HH:mm'}}</p>
       </div>
       <div *ngIf="p.userPermission([p.permissionList.Actions.createPost]) && publicationItem[folderId]" class="cursor-pointer font-35-em" (click)="AddPublication('2',publicationItem[folderId].ProcessId)">
@@ -45,7 +45,7 @@
             <div class="post-data font-13-em">{{publication.DatePublication | date: 'dd-MM-yy  HH:mm'}}</div>
           </div>
           <div class="post-description ">
-            <pre class="text font-13-em">{{publication.Message}}</pre>
+            <pre class="text font-14-em">{{publication.Message}}</pre>
           </div>
         </div>
       </ion-card-content>
diff --git a/src/app/pages/publications/view-publications/view-publications.page.scss b/src/app/pages/publications/view-publications/view-publications.page.scss
index 24cf05102..2607664aa 100644
--- a/src/app/pages/publications/view-publications/view-publications.page.scss
+++ b/src/app/pages/publications/view-publications/view-publications.page.scss
@@ -1,3 +1,5 @@
+@import '~src/function.scss';
+
 :host{
   background: transparent;
   padding: 0!important;
@@ -23,7 +25,7 @@
     border: 0!important;
   }
   .div-search{
-    font-size: 45px;
+    font-size: rem(45);
     float: left;
     margin: 0 0 0 10px
   }
@@ -37,7 +39,7 @@
     width: 100%;
   }
   .div-profile{
-    font-size: 45px;
+    font-size: rem(45);
     float: right;
     margin-right: 10px;
   }
@@ -86,7 +88,7 @@
   .back-icon{
 
     float: left;
-    font-size: 35px;
+    font-size: rem(35);
 
 
   }
diff --git a/src/app/pages/search/organic-entity/organic-entity.page.scss b/src/app/pages/search/organic-entity/organic-entity.page.scss
index 45c90a641..e540bd6a8 100644
--- a/src/app/pages/search/organic-entity/organic-entity.page.scss
+++ b/src/app/pages/search/organic-entity/organic-entity.page.scss
@@ -1,14 +1,16 @@
+@import '~src/function.scss';
+
 .main-header{
   display: flex;
   align-items: center;
 }
 .icon{
   color: #797979;
-  width: 45px;
-  height: 45px;
+  width: rem(45);
+  height: rem(45);
   display: flex;
   justify-content: center;
-  font-size: 25px;
+  font-size: rem(25);
   align-items: center;
 }
 
@@ -17,7 +19,7 @@
     .input-text {
       margin-top: 20px;
       width: 100%;
-      height: 45px;
+      height: rem(45);
       border-radius: 5px;
       border: 1px solid #ebebeb;
     }
@@ -33,7 +35,7 @@
         border-bottom: 1px solid #ebebeb;
         list-style:  none;
         font-family: Roboto;
-        font-size: 15px;
+        font-size: rem(15);
       }
     }
   }
\ No newline at end of file
diff --git a/src/app/pages/search/search.page.html b/src/app/pages/search/search.page.html
index 56a9b572b..5ad393b93 100644
--- a/src/app/pages/search/search.page.html
+++ b/src/app/pages/search/search.page.html
@@ -1,7 +1,7 @@
 
 <!-- HEADER-->
 <ion-header class="ion-no-border header-main  d-md-flex">
-  <div *ngIf="select" class="btn-close d-none d-lg-flex cursor-pointer font-35" (click)="close()">
+  <div *ngIf="select" class="btn-close d-none d-lg-flex cursor-pointer font-35-rem" (click)="close()">
     <ion-icon *ngIf="ThemeService.currentTheme == 'default' "class="icon" src="assets/images/icons-search-close.svg"></ion-icon>
     <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="icon" src="assets/images/theme/gov/icons-search-close.svg"></ion-icon>
   </div>
@@ -26,9 +26,13 @@
       </div>
 
       <div class="btn-modal-dismiss" *ngIf="showSearchInput">
-        <button class="btn-no-color" (click)="close()">
-          <ion-icon *ngIf="ThemeService.currentTheme == 'default' "class="icon" src="assets/images/icons-search-close.svg"></ion-icon>
-          <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="icon" src="assets/images/theme/gov/icons-search-close.svg"></ion-icon>
+        <button (click)="close()" style="
+          margin: 0px;
+          padding: 0px;
+          background: transparent;
+        ">
+          <ion-icon *ngIf="ThemeService.currentTheme == 'default' "class="icon font-40-rem" src="assets/images/icons-search-close.svg"></ion-icon>
+          <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="icon font-40-rem" src="assets/images/theme/gov/icons-search-close.svg"></ion-icon>
         </button>
       </div>
     </div>
diff --git a/src/app/pages/search/search.page.scss b/src/app/pages/search/search.page.scss
index 6a0ea05b6..8aab16109 100644
--- a/src/app/pages/search/search.page.scss
+++ b/src/app/pages/search/search.page.scss
@@ -1,3 +1,5 @@
+@import '~src/function.scss';
+
 .top-box{
   display: flex;
   align-content: center;
@@ -15,7 +17,7 @@
   .btn-modal-dismiss{
     display: flex;
     width: 50px !important;
-   height: fit-content;
+    height: fit-content;
     padding: 0 !important;
     margin: 0 !important;
     margin-left: 25px !important;
@@ -23,9 +25,6 @@
     align-content: center;
     align-items: center;
 
-    ion-icon{
-      font-size: 32pt !important;
-    }
   }
   .ion-align-content-center{
     align-content: center;
@@ -36,11 +35,11 @@
     border: solid 1px #ebebeb;
     .icon{
       color: #797979;
-      width: 45px;
-      height: 45px;
+      width: rem(45);
+      height: rem(45);
       display: flex;
       justify-content: center;
-      font-size: 25px;
+      font-size: rem(25);
       align-items: center;
     }
     .input-text{
@@ -54,11 +53,11 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    font-size: 45px;
+    font-size: rem(45);
   }
   .profile{
     display: none;
-    font-size: 45px;
+    font-size: rem(45);
   }
   
 }
@@ -70,16 +69,16 @@ ion-slide{
 // search result type
 .options{
   max-width: 900px;
-  margin-top: 10px;
+  margin-top: rem(10);
   .container{
     .d-flex{
       width: 100%;
       .button{
         min-width: 116px;
         border: solid 1px #e9e9e9;
-        margin: 0px 5px;
-        margin-bottom: 10px;
-        padding: 5px 20px;
+        margin: 0px rem(5);
+        margin-bottom: rem(10);
+        padding: rem(5) rem(20);
         box-sizing: border-box;
         display: flex;
         flex-wrap: wrap;
@@ -90,13 +89,13 @@ ion-slide{
           margin: 0px;
           font-family: Roboto;
           color: var(--title-text-color);;
-          font-size: 15px;
+          font-size: rem(15);
           text-align: center;
         }
         .label{
           width: 100%;
           font-family: Roboto;
-          font-size: 13px;
+          font-size: rem(13);
           font-weight: 300;
           color: #797979;
           text-align: center;
@@ -117,12 +116,12 @@ ion-slide{
     }
     .icon{
       display: none;
-      width: 45px;
-      height: 45px;
+      width: rem(45);
+      height: rem(45);
       justify-content: center;
       align-items: center;
       ion-icon{
-        width: 25px;
+        width: rem(25);
       }
     }
   }
@@ -148,19 +147,19 @@ ion-slide{
       width: 100%;
       .order{
         font-family: Roboto;
-        font-size: 13px;
+        font-size: rem(13);
         font-weight: 300;
         color:#797979
       }
       .order-labal{
         font-family: Roboto;
-        font-size: 15px;
+        font-size: rem(15);
         color: var(--title-text-color);
         margin-left: 20px;
       }
     }
     ion-icon{
-      font-size: 25px;
+      font-size: rem(25);
     }
   }
   ul{
@@ -173,7 +172,7 @@ ion-slide{
       display: flex;
       align-items: center;
       .icon{
-        font-size: 35px;
+        font-size: rem(35);
         align-items: center;
         display: flex;
       }
@@ -184,13 +183,13 @@ ion-slide{
           margin: 0px;
           width: 100%;
           font-family: Roboto;
-          font-size: 15px;
+          font-size: rem(15);
           color: var(--title-text-color);
           line-height: 1.67;
         }
         span{
           font-family: Roboto;
-          font-size: 13px;
+          font-size: rem(13);
           font-weight: 300;
           color: #797979;
         }
@@ -202,7 +201,7 @@ ion-slide{
           align-items: center;
           padding: 0px 5px;
           color: white;
-          font-size: 9pt;
+          font-size: rem(12);
           font-weight: 500;
           height: 19px;
           -webkit-border-radius: 18px;
@@ -228,7 +227,7 @@ ion-slide{
     width: 100%;
     height: 24px;
     font-family: Roboto;
-    font-size: 20px;
+    font-size: rem(20);
     text-align: center;
     color: black;
   }
@@ -254,11 +253,11 @@ ion-slide{
 
   .icon{
     color: #797979;
-    width: 45px;
-    height: 45px;
+    width: rem(45);
+    height: rem(45);
     display: flex;
     justify-content: center;
-    font-size: 25px;
+    font-size: rem(25);
     align-items: center;
   }
   .input-container{
diff --git a/src/app/pages/search/sender/sender.page.scss b/src/app/pages/search/sender/sender.page.scss
index 27b075310..b862544a3 100644
--- a/src/app/pages/search/sender/sender.page.scss
+++ b/src/app/pages/search/sender/sender.page.scss
@@ -1,3 +1,5 @@
+@import '~src/function.scss';
+
 .main-header{
   display: flex;
   align-items: center;
@@ -5,11 +7,11 @@
 
 .icon{
   color: #797979;
-  width: 45px;
-  height: 45px;
+  width: rem(45);
+  height: rem(45);
   display: flex;
   justify-content: center;
-  font-size: 25px;
+  font-size: rem(25);
   align-items: center;
 }
 
@@ -18,7 +20,7 @@
   .input-text {
     margin-top: 20px;
     width: 100%;
-    height: 45px;
+    height: rem(45);
     border-radius: 5px;
     border: 1px solid #ebebeb;
   }
@@ -34,7 +36,7 @@
       border-bottom: 1px solid #ebebeb;
       list-style:  none;
       font-family: Roboto;
-      font-size: 15px;
+      font-size: rem(15);
     }
   }
 }
\ No newline at end of file
diff --git a/src/app/services/events/attachments/attachments.page.scss b/src/app/services/events/attachments/attachments.page.scss
index a37695678..7285fe589 100644
--- a/src/app/services/events/attachments/attachments.page.scss
+++ b/src/app/services/events/attachments/attachments.page.scss
@@ -14,7 +14,7 @@ ion-list, ion-item-sliding{
 
 }
 .item-list-small{
-    font-size: 14px;
+    font-size: rem(14);
     overflow: auto;
   }
   .ion-item-class{
@@ -39,7 +39,7 @@ ion-list, ion-item-sliding{
     padding: 10px;
   }
   .div-content-attachment h3{
-    font-size: 18px;
+    font-size: rem(18);
     font-weight: 700;
     padding-bottom: 5px;
   }
diff --git a/src/app/services/events/attendees/attendees.page.html b/src/app/services/events/attendees/attendees.page.html
index a3ff11683..7f88b8bc5 100644
--- a/src/app/services/events/attendees/attendees.page.html
+++ b/src/app/services/events/attendees/attendees.page.html
@@ -14,16 +14,16 @@
         <div *ngFor="let attendee of contacts;">
           <ion-item (click)="selectContact(attendee)" class="cursor-pointer" lines="none"  *ngIf="filterSearchList(attendee)" >
             <div class="pr-10">
-              <ion-icon *ngIf="ThemeService.currentTheme == 'default' " class="font-35" src="assets/images/icons-default-profile.svg"></ion-icon>
-              <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="font-35" src="assets/images/theme/gov/icons-profile.svg"></ion-icon>
-              <ion-icon *ngIf="ThemeService.currentTheme == 'doneIt' " class="font-35" src="assets/images/theme/{{ThemeService.currentTheme}}/icons-profile.svg"></ion-icon>
+              <ion-icon *ngIf="ThemeService.currentTheme == 'default' " class="font-35-rem" src="assets/images/icons-default-profile.svg"></ion-icon>
+              <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="font-35-rem" src="assets/images/theme/gov/icons-profile.svg"></ion-icon>
+              <ion-icon *ngIf="ThemeService.currentTheme == 'doneIt' " class="font-35-rem" src="assets/images/theme/{{ThemeService.currentTheme}}/icons-profile.svg"></ion-icon>
             </div>
             <ion-label>
               <h3>{{ attendee.Name }}</h3>
               <p>{{ attendee.EmailAddress }}</p>
             </ion-label>
             <div>
-              <ion-icon class="font-35" src="assets/images/icons-add-25.svg"></ion-icon>
+              <ion-icon class="font-35-rem" src="assets/images/icons-add-25.svg"></ion-icon>
             </div>
           </ion-item>
         </div>
@@ -37,16 +37,16 @@
       <ion-item-sliding class="px-20">
         <ion-item lines="none" *ngFor="let attendee of taskParticipants;" class="d-flex">
           <div class="pr-10">
-            <ion-icon *ngIf="ThemeService.currentTheme == 'default' " class="font-35" src="assets/images/icons-default-profile.svg"></ion-icon>
-            <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="font-35" src="assets/images/theme/gov/icons-profile.svg"></ion-icon>
-            <ion-icon *ngIf="ThemeService.currentTheme == 'doneIt' " class="font-35" src="assets/images/theme/{{ThemeService.currentTheme}}/icons-profile.svg"></ion-icon>
+            <ion-icon *ngIf="ThemeService.currentTheme == 'default' " class="font-35-rem" src="assets/images/icons-default-profile.svg"></ion-icon>
+            <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="font-35-rem" src="assets/images/theme/gov/icons-profile.svg"></ion-icon>
+            <ion-icon *ngIf="ThemeService.currentTheme == 'doneIt' " class="font-35-rem" src="assets/images/theme/{{ThemeService.currentTheme}}/icons-profile.svg"></ion-icon>
           </div>
           <ion-label>
             <h3>{{ attendee.Name }}</h3>
             <p>{{ attendee.EmailAddress }}</p>
           </ion-label>
           <div class="cursor-pointer" (click)="remove(attendee)">
-            <ion-icon class="font-35" src="assets/images/icons-delete-25.svg"></ion-icon>
+            <ion-icon class="font-35-rem" src="assets/images/icons-delete-25.svg"></ion-icon>
           </div>
         </ion-item>
       </ion-item-sliding>
@@ -57,16 +57,16 @@
       <ion-item-sliding  class="px-20">
         <ion-item lines="none" *ngFor="let attendee of taskParticipantsCc;" class="d-flex">
           <div class="pr-10">
-            <ion-icon *ngIf="ThemeService.currentTheme == 'default' " class="font-35" src="assets/images/icons-default-profile.svg"></ion-icon>
-            <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="font-35" src="assets/images/theme/gov/icons-profile.svg"></ion-icon>
-            <ion-icon *ngIf="ThemeService.currentTheme == 'doneIt' " class="font-35" src="assets/images/theme/{{ThemeService.currentTheme}}/icons-profile.svg"></ion-icon>
+            <ion-icon *ngIf="ThemeService.currentTheme == 'default' " class="font-35-rem" src="assets/images/icons-default-profile.svg"></ion-icon>
+            <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="font-35-rem" src="assets/images/theme/gov/icons-profile.svg"></ion-icon>
+            <ion-icon *ngIf="ThemeService.currentTheme == 'doneIt' " class="font-35-rem" src="assets/images/theme/{{ThemeService.currentTheme}}/icons-profile.svg"></ion-icon>
           </div>
           <ion-label>
             <h3>{{ attendee.Name }}</h3>
             <p>{{ attendee.EmailAddress }}</p>
           </ion-label>
           <div class="cursor-pointer" (click)="remove(attendee)">
-            <ion-icon class="font-35" src="assets/images/icons-delete-25.svg"></ion-icon>
+            <ion-icon class="font-35-rem" src="assets/images/icons-delete-25.svg"></ion-icon>
           </div>
         </ion-item>
       </ion-item-sliding>
diff --git a/src/app/services/events/edit-event/edit-event.page.scss b/src/app/services/events/edit-event/edit-event.page.scss
index 4fa564390..caaf95436 100644
--- a/src/app/services/events/edit-event/edit-event.page.scss
+++ b/src/app/services/events/edit-event/edit-event.page.scss
@@ -1,4 +1,4 @@
-
+@import '~src/function.scss';
 .content{
     padding: 30px 20px 0 20px !important;
     margin: 0;
@@ -24,12 +24,12 @@
       }
   
       .title{
-        font-size: 25px;
+        font-size: rem(25);
       }
   
     }
       .ion-item-container{
-          margin: 15px auto;
+          margin: rem(15) auto;
           border: 1px solid #ebebeb;
           border-radius: 5px;
           padding-left: 10px;
@@ -49,11 +49,11 @@
           margin: 0px auto;
         }
         .ion-icon-class{
-          width: 45px;
-          height: 45px;
+          width: rem(45);
+          height: rem(45);
           float: left;
           padding: 10px;
-          font-size: 25px;
+          font-size: rem(25);
         }
         ion-select{
           padding-left: 5px;
@@ -61,7 +61,7 @@
         }
         .ion-input-class{
           width: calc(100% - 45px);
-          height: 45px;
+          height: rem(45);
           border: 1px solid #ebebeb;
           border-radius: 5px;
           padding-left: 5px;
@@ -79,19 +79,19 @@
         
         }
         .add-people{
-          width: 45px;
+          width: rem(45);
           float: right;
           overflow: auto;
-          font-size: 25px;
-          height: 45px;
+          font-size: rem(25);
+          height: rem(45);
           display: flex;
         }
         .list-people-title{
-          /* font-size: 13px; */
+          /* font-size: rem(13); */
           color: #797979;
         }
         .attach-document{
-          font-size: 15px;
+          font-size: rem(15);
           color: var(--title-text-color);
           margin: 5px 5px 5px 10px;
           padding: 5px;
@@ -99,39 +99,39 @@
         }
         .attach-icon{
           width: 37px;
-          font-size: 35px;
+          font-size: rem(35);
           float: left;
         }
         .attach-title-item{
           width: 100%;
-          font-size: 15px;
+          font-size: rem(15);
           color:var(--title-text-color);
         }
         /* SPAN */
         .span-left{
           float: left;
-          font-size: 15x;
+          font-size: rem(15);
         }
         .span-right{
         text-align: right;
         float: right;
-        font-size: 13px;
+        font-size: rem(13);
         }
         .container-footer{
             margin:0 auto;
             overflow: auto;
         }
         .button-cancel {
-            width: 170px;
-            height: 44px;
+            width: rem(170);
+            height: rem(44);
             border-radius: 22.5px;
             --background: #e0e9ee;
             --color: #061b52;
             margin:10px;
           }
           .button-save {
-            width: 170px;
-            height: 44px;
+            width: rem(170);
+            height: rem(44);
             border-radius: 22.5px;
             --background: #42b9fe;
             --color:#ffffff;
@@ -149,7 +149,7 @@
         /* Error Messages */
         .error{
           color:red;
-          font-size: 12px;
+          font-size: rem(12);
           font-weight: bold;
           padding-bottom: 20px;
         }
diff --git a/src/app/services/events/event-detail-modal/event-detail-modal.page.scss b/src/app/services/events/event-detail-modal/event-detail-modal.page.scss
index b94403c90..cbc68cc6b 100644
--- a/src/app/services/events/event-detail-modal/event-detail-modal.page.scss
+++ b/src/app/services/events/event-detail-modal/event-detail-modal.page.scss
@@ -14,12 +14,12 @@ ion-item-group{
 .div-up h3{
   margin: 0;
   padding: 0;
-  font-size: 17px;
+  font-size: rem(17);
   width: 100%;
 }
 .div-icon{
   width: 10%;
-  font-size: 22px;
+  font-size: rem(22);
   float: left;
   color: #808080;
 }
@@ -35,7 +35,7 @@ ion-item-group{
 }
 .ion-icon-attach{
   color: #666666;
-  font-size: 20px;
+  font-size: rem(20);
 }
 
 .btn-attach{
@@ -70,14 +70,14 @@ ion-card{
   margin-bottom: 25px;
 }
 .ion-icon-delete{
-  font-size: 22px;
+  font-size: rem(22);
   color: red;
   background-color: white;
   padding-right: 5px;
 }
 .error{
   color:red;
-  font-size: 12px;
+  font-size: rem(12);
   font-weight: bold;
   padding-bottom: 20px;
 }
@@ -86,10 +86,10 @@ ion-card{
   margin-top: 10px;
 } */
 .attendees-icon{
-  font-size: 14px;
+  font-size: rem(14);
 }
 .see-more-button{
   text-transform: initial;
-  font-size: 16px;
+  font-size: rem(16);
 }
 
diff --git a/src/app/services/events/event-detail/event-detail.page.scss b/src/app/services/events/event-detail/event-detail.page.scss
index 8c8bf1543..65ee76935 100644
--- a/src/app/services/events/event-detail/event-detail.page.scss
+++ b/src/app/services/events/event-detail/event-detail.page.scss
@@ -14,12 +14,12 @@ ion-item-group{
 .div-up h3{
   margin: 0;
   padding: 0;
-  font-size: 17px;
+  font-size: rem(17);
   width: 100%;
 }
 .div-icon{
   width: 10%;
-  font-size: 22px;
+  font-size: rem(22);
   float: left;
   color: #808080;
 }
@@ -35,7 +35,7 @@ ion-item-group{
 }
 .ion-icon-attach{
   color: #666666;
-  font-size: 20px;
+  font-size: rem(20);
 }
 
 .btn-attach{
@@ -70,14 +70,14 @@ ion-card{
   margin-bottom: 25px;
 }
 .ion-icon-delete{
-  font-size: 22px;
+  font-size: rem(22);
   color: red;
   background-color: white;
   padding-right: 5px;
 }
 .error{
   color:red;
-  font-size: 12px;
+  font-size: rem(12);
   font-weight: bold;
   padding-bottom: 20px;
 }
@@ -90,7 +90,7 @@ ion-card{
 }
 .see-more-button{
   text-transform: initial;
-  font-size: 16px;
+  font-size: rem(16);
 }
 
 .header-content{
@@ -100,7 +100,7 @@ ion-card{
 }
 .header-icon-left{
   width: 36px;
-  font-size: 33px;
+  font-size: rem(33);
   color: #42b9fe;
   float: left;
   border: 1px solid red;
@@ -108,7 +108,7 @@ ion-card{
 .header-title{
   width: 300px;
   font-family: Roboto;
-  font-size: 25px;
+  font-size: rem(25);
   margin: 0 5px 0 5px;
   padding: 0;
   color:#000;
diff --git a/src/app/services/events/events.page.scss b/src/app/services/events/events.page.scss
index 7e8af5266..ecdafb7aa 100644
--- a/src/app/services/events/events.page.scss
+++ b/src/app/services/events/events.page.scss
@@ -30,7 +30,7 @@ ion-toolbar{
     border: 0!important;
 
     .div-search{
-      font-size: 45px;
+      font-size: rem(45);
       float: left;
       margin: 0 0 0 10px
     }
@@ -44,7 +44,7 @@ ion-toolbar{
       width: 100%;
     }
     .div-profile{
-      font-size: 45px;
+      font-size: rem(45);
       float: right;
       margin-right: 10px;
     }
@@ -66,7 +66,7 @@ ion-toolbar{
   }
   .header-xsmall{
     font-family: Arial, Helvetica, sans-serif;
-    font-size: 9.7pt;
+    font-size: rem(13);
     font-weight: bold;
     padding-bottom: 3.5px;
     margin-bottom: 3.5px;
@@ -74,16 +74,16 @@ ion-toolbar{
     background: transparent;
   }
   .header-medium{
-    font-size: 12pt;
+    font-size: rem(16);
     text-align: left;
     font-family: roboto;
     background: transparent;
     margin-right: 5px;
-    line-height: 25px;
+    line-height: rem(25);
   }
 
   .p-small{
-    font-size: 13pt;
+    font-size: rem(17);
     margin-top: 13px;
     color:#000;
     margin-right: 25px !important;
@@ -93,7 +93,7 @@ ion-toolbar{
 
   /* CONTENT */
   .item-list-small{
-      font-size: 14px;
+      font-size: rem(14);
       overflow: auto;
     }
     .ion-item-class{
@@ -134,12 +134,12 @@ ion-toolbar{
     .div-up h3{
       margin: 0;
       padding: 0;
-      font-size: 17px;
+      font-size: rem(17);
       width: 100%;
     }
     .div-icon{
       width: 10%;
-      font-size: 22px;
+      font-size: rem(22);
       float: left;
       color: #808080;
     }
@@ -161,11 +161,11 @@ ion-toolbar{
       padding: 0 0 0 12px;
     }
     .div-content-Oficial h3, .div-content-Pessoal h3{
-      font-size: 14pt;
+      font-size: rem(19);
       /* border: 1px solid red; */
     }
     .div-content-Oficial p, .div-content-Pessoal p{
-      font-size: 12pt;
+      font-size: rem(16);
       color: rgb(94, 92, 92);
       padding: 0 !important;
       margin: 0 !important;
@@ -183,7 +183,7 @@ ion-toolbar{
       text-align: center;
       display: block;
       color: #000;
-      font-size: 16px;
+      font-size: rem(16);
       margin: 0 auto;
     }
     .div-botton-middle{
@@ -203,7 +203,7 @@ ion-toolbar{
     }
     .ion-icon-attach{
       color: #666666;
-      font-size: 20px;
+      font-size: rem(20);
     }
     /* NEW CSS FOR TOGGLE BUTTON */
     .toggleBox{
@@ -230,7 +230,7 @@ ion-toolbar{
       position: absolute;
       content: "";
       left: 0;
-      width: 30px;
+      width: rem(30);
       height: 30px;
       background: #fff;
       border-radius: 50%;
@@ -253,7 +253,7 @@ ion-toolbar{
       position: absolute;
       color: #fff;
       font-weight: 600;
-      font-size: 12px;
+      font-size: rem(12);
       pointer-events: none;
     }
     .onbtn{
@@ -280,19 +280,19 @@ ion-toolbar{
 .event-number{
   color: white;
   font-family: Roboto;
-  font-size: 15px;
+  font-size: rem(15);
   color: var(--white);
 
   bold{
     font-family: Roboto;
-    font-size: 25px;
+    font-size: rem(25);
     text-align: right;
     color: var(--white);
   }
 }
 .time{
   font-family: Roboto;
-  font-size: 30px;
+  font-size: rem(30);
   text-align: center;
   color: var(--white);
   line-height: unset;
@@ -316,7 +316,7 @@ ion-toolbar{
   .meeting-description {
     margin-top: 2px;
     font-family: Roboto;
-    font-size: 15px;
+    font-size: rem(15);
     color: var(--white);
   }
 }
@@ -353,22 +353,22 @@ ion-toolbar{
 
       .icon{
         color: #e8e8e8;
-        height: 35px;
-        width: 35px;
+        height: rem(35);
+        width: rem(35);
         margin-right: 10px;
       }
       .text{
         font-family: Roboto;
-        font-size: 20px;
+        font-size: rem(20);
         color: black;
       }
     }
     .icon-next {
       color: #e8e8e8;
-      height: 35px;
-      width: 35px;
-      font-size: 35px;
-      font-size: 35px;
+      height: rem(35);
+      width: rem(35);
+      font-size: rem(35);
+      font-size: rem(35);
     }
   }
   .content{
@@ -405,19 +405,19 @@ ion-toolbar{
           .time-start{
             color: #797979 !important;
             font-family: Roboto;
-            font-size: 13px;
+            font-size: rem(13);
           }
           .time-end{
             color: #797979 !important;
             font-family: Roboto;
-            font-size: 13px;
+            font-size: rem(13);
           }
         }
         .schedule-date{
           margin-right: 10px;
           width: 22%;
           color: #797979 !important;
-          font-size: 13px;
+          font-size: rem(13);
         }
         .schedule-details{
           display: flex;
@@ -426,7 +426,7 @@ ion-toolbar{
           width: 78%;
           .location{
             font-family: Roboto;
-            font-size: 13px;
+            font-size: rem(13);
             color: black;
             width: 100%;
 
@@ -434,7 +434,7 @@ ion-toolbar{
           .description{
             width: 100%;
             font-family: Roboto;
-            font-size: 15px;
+            font-size: rem(15);
             font-weight: bold;
             color: #0d89d1;
           }
@@ -446,7 +446,7 @@ ion-toolbar{
         }
         .color{
           width: 5px;
-          height: 40px;
+          height: rem(40);
           border-top-right-radius: 5px;
           border-bottom-right-radius: 5px;
           background-color: #f05d5e;
@@ -463,7 +463,7 @@ ion-toolbar{
   .resume{
     .title{
       font-family: Roboto;
-      font-size: 15px;
+      font-size: rem(15);
       font-weight: 500;
       color: #797979;
       margin-bottom: 5px;
@@ -471,7 +471,7 @@ ion-toolbar{
     }
     .event-num, .first-event-time{
       font-family: Roboto;
-      font-size: 15px;
+      font-size: rem(15);
       display: block;
       color: black;
     }
diff --git a/src/app/shared/agenda/approve-event/approve-event.page.html b/src/app/shared/agenda/approve-event/approve-event.page.html
index 7c151d418..47e54b1f9 100644
--- a/src/app/shared/agenda/approve-event/approve-event.page.html
+++ b/src/app/shared/agenda/approve-event/approve-event.page.html
@@ -83,14 +83,14 @@
         <div class="overflow-y-auto">
           <div class="middle-content">
             <div *ngIf="loadedEvent.workflowInstanceDataFields.ParticipantsList">
-              <h5>Intervenientes</h5>
+              <h5 class="font-17-rem">Intervenientes</h5>
               <div *ngFor="let att of loadedEvent.workflowInstanceDataFields.ParticipantsList">
                 <ion-label>{{att.Name}}</ion-label>
               </div>
               <div class="line"></div>
             </div>
             <div *ngIf="loadedEvent.workflowInstanceDataFields.Body">
-              <h5>Detalhes</h5>
+              <h5 class="font-17-rem">Detalhes</h5>
               <ion-item lines="none" class="ion-no-margin ion-no-padding">
                   <pre class="width-100 text">{{ loadedEvent.workflowInstanceDataFields.Body }} </pre>
               </ion-item>
@@ -100,7 +100,7 @@
   
           <div *ngIf="loadedEvent.Documents" class="bottom-content width-100">
             <ion-list>
-              <h5>Documentos Anexados </h5>
+              <h5 class="font-17-rem">Documentos Anexados </h5>
               <ion-item class="ion-no-margin ion-no-padding cursor-pointer"
               *ngFor="let attachment of loadedEvent.Documents"
               (click)="viewDocument(attachment.DocId, attachment)">
diff --git a/src/app/shared/agenda/approve-event/approve-event.page.scss b/src/app/shared/agenda/approve-event/approve-event.page.scss
index 5866fc140..10acb4177 100644
--- a/src/app/shared/agenda/approve-event/approve-event.page.scss
+++ b/src/app/shared/agenda/approve-event/approve-event.page.scss
@@ -7,13 +7,13 @@
 
   .header-icon-left{
     width: 36px;
-    font-size: 33px;
+    font-size: rem(33);
     color: #42b9fe;
     float: left;
   }
     .header-icon-right{
-    width: 45px;
-    font-size: 45px;
+    width: rem(45);
+    font-size: rem(45);
     float: left;
     margin-left: 5px;
   }
@@ -21,7 +21,7 @@
 
   .header-title{
     font-family: Roboto;
-    font-size: 25px;
+    font-size: rem(25);
     margin: 0 5px 0 5px;
     padding: 0;
     color:#000;
@@ -36,7 +36,7 @@
 
     .upper-content{
       margin-left: 40px;
-      font-size: 18px;
+      font-size: rem(18);
 
       .content-location{
         margin-top: 0px !important;
@@ -75,12 +75,12 @@
       }
 
       .content-details p{
-          font-size: 16px;
+          font-size: rem(16);
       }
     }
     .middle-conten{
       .middle-content h3, .middle-content p{
-        font-size: 16px;
+        font-size: rem(16);
       }
     }
 
@@ -88,11 +88,11 @@
       margin: 0 auto;
 
       .bottom-content h3{
-        font-size: 16px;
+        font-size: rem(16);
         margin: 0 0 0 10px;
       }
       .attach-document{
-        font-size: 15px;
+        font-size: rem(15);
         color: var(--title-text-color);
         margin: 5px 5px 5px 10px;
         padding: 5px;
@@ -100,23 +100,23 @@
       }
       .attach-icon{
         width: 37px;
-        font-size: 35px;
+        font-size: rem(35);
         float: left;
       }
       .attach-title-item{
         width: 100%;
-        font-size: 15px;
+        font-size: rem(15);
         color:#0d89d1;
       }
       /* SPAN */
       .span-left{
         float: left;
-        font-size: 15x;
+        font-size: rem(15);
       }
       .span-right{
       text-align: right;
       float: right;
-      font-size: 13px;
+      font-size: rem(13);
       }
     }
 }
@@ -132,7 +132,7 @@
       /* .arrow-right-icon{
           width: 37px;
           float: right;
-          font-size: 35px;
+          font-size: rem(35);
           overflow: hidden;
       } */
     }
@@ -144,7 +144,7 @@
 
       .btn-ok, .btn-cancel, .btn-delete{
         height: auto !important;
-        font-size: 16px !important;
+        font-size: rem(16) !important;
         width: 100% !important;
         margin-bottom: 10px !important;
         padding: 15px !important;
@@ -215,7 +215,7 @@
 
 .delete{
   padding: 7px;
-  font-size: 21px;
+  font-size: rem(21);
   color:#fff;
   background: #d30606;
   border-radius: 20px;
diff --git a/src/app/shared/agenda/edit-event-to-approve/edit-event-to-approve.page.scss b/src/app/shared/agenda/edit-event-to-approve/edit-event-to-approve.page.scss
index 1785b7fb2..0a669183a 100644
--- a/src/app/shared/agenda/edit-event-to-approve/edit-event-to-approve.page.scss
+++ b/src/app/shared/agenda/edit-event-to-approve/edit-event-to-approve.page.scss
@@ -1,5 +1,5 @@
 
-
+@import '~src/function.scss';
 .title-content::after, .header-md::after{
     display: none;
   }
@@ -27,12 +27,12 @@
       }
   
       .title{
-        font-size: 25px;
+        font-size: rem(25);
       }
   
     }
       .ion-item-container{
-          margin: 15px auto;
+          margin: rem(15) auto;
           border: 1px solid #ebebeb;
           border-radius: 5px;
           padding-left: 10px;
@@ -50,11 +50,11 @@
           margin: 0px auto;
         }
         .ion-icon-class{
-          width: 45px;
-          height: 45px;
+          width: rem(45);
+          height: rem(45);
           float: left;
           padding: 10px;
-          font-size: 25px;
+          font-size: rem(25);
         }
         ion-select{
           padding-left: 5px;
@@ -62,7 +62,7 @@
         }
         .ion-input-class{
           width: calc(100% - 45px);
-          height: 45px;
+          height: rem(45);
           border: 1px solid #ebebeb;
           border-radius: 5px;
           padding-left: 5px;
@@ -79,19 +79,19 @@
         
         }
         .add-people{
-          width: 45px;
+          width: rem(45);
           float: right;
           overflow: auto;
-          font-size: 25px;
-          height: 45px;
+          font-size: rem(25);
+          height: rem(45);
           display: flex;
         }
         .list-people-title{
-          /* font-size: 13px; */
+          /* font-size: rem(13); */
           color: #797979;
         }
         .attach-document{
-          font-size: 15px;
+          font-size: rem(15);
           color: var(--title-text-color);
           margin: 5px 5px 5px 10px;
           padding: 5px;
@@ -99,39 +99,39 @@
         }
         .attach-icon{
           width: 37px;
-          font-size: 35px;
+          font-size: rem(35);
           float: left;
         }
         .attach-title-item{
           width: 100%;
-          font-size: 15px;
+          font-size: rem(15);
           color:var(--title-text-color);
         }
         /* SPAN */
         .span-left{
           float: left;
-          font-size: 15x;
+          font-size: rem(15);
         }
         .span-right{
         text-align: right;
         float: right;
-        font-size: 13px;
+        font-size: rem(13);
         }
         .container-footer{
             margin:0 auto;
             overflow: auto;
         }
         .button-cancel {
-            width: 170px;
-            height: 44px;
+            width: rem(170);
+            height: rem(44);
             border-radius: 22.5px;
             --background: #e0e9ee;
             --color: #061b52;
             margin:10px;
           }
           .button-save {
-            width: 170px;
-            height: 44px;
+            width: rem(170);
+            height: rem(44);
             border-radius: 22.5px;
             --background: #42b9fe;
             --color:#ffffff;
@@ -149,7 +149,7 @@
         /* Error Messages */
         .error{
           color:red;
-          font-size: 12px;
+          font-size: rem(12);
           font-weight: bold;
           padding-bottom: 20px;
         }
@@ -175,7 +175,7 @@
       align-items: center;
       padding: 0px 5px;
       color: white;
-      font-size: 9pt;
+      font-size: rem(12);
       font-weight: 500;
       height: 19px;
       -webkit-border-radius: 18px;
diff --git a/src/app/shared/agenda/edit-event/edit-event.page.html b/src/app/shared/agenda/edit-event/edit-event.page.html
index a7b5321e1..96b91a285 100644
--- a/src/app/shared/agenda/edit-event/edit-event.page.html
+++ b/src/app/shared/agenda/edit-event/edit-event.page.html
@@ -233,8 +233,8 @@
           </div>
           <div class="add-people">
             <button class="btn-no-color cursor-pointer" (click)="addParticipants()">
-              <ion-icon *ngIf="ThemeService.currentTheme == 'default' " class="font-35" slot="start" src="assets/images/icons-arrow-forward.svg"></ion-icon>
-              <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="font-35" slot="start" src="assets/images/theme/gov/icons-arrow-forward.svg"></ion-icon>
+              <ion-icon *ngIf="ThemeService.currentTheme == 'default' " class="font-35-rem" slot="start" src="assets/images/icons-arrow-forward.svg"></ion-icon>
+              <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="font-35-rem" slot="start" src="assets/images/theme/gov/icons-arrow-forward.svg"></ion-icon>
             </button>
           </div>
         </div>
@@ -257,8 +257,8 @@
           </div>
           <div class="add-people">
             <button class="btn-no-color cursor-pointer" (click)="addParticipantsCc()">
-              <ion-icon *ngIf="ThemeService.currentTheme == 'default' "  class="font-35" slot="start" src="assets/images/icons-arrow-forward.svg"></ion-icon>
-              <ion-icon *ngIf="ThemeService.currentTheme == 'gov' "  class="font-35" slot="start" src="assets/images/theme/gov/icons-arrow-forward.svg"></ion-icon>
+              <ion-icon *ngIf="ThemeService.currentTheme == 'default' "  class="font-35-rem" slot="start" src="assets/images/icons-arrow-forward.svg"></ion-icon>
+              <ion-icon *ngIf="ThemeService.currentTheme == 'gov' "  class="font-35-rem" slot="start" src="assets/images/theme/gov/icons-arrow-forward.svg"></ion-icon>
             </button>
           </div>
         </div>
diff --git a/src/app/shared/agenda/edit-event/edit-event.page.scss b/src/app/shared/agenda/edit-event/edit-event.page.scss
index a9fe5b41b..652879fc7 100644
--- a/src/app/shared/agenda/edit-event/edit-event.page.scss
+++ b/src/app/shared/agenda/edit-event/edit-event.page.scss
@@ -1,3 +1,4 @@
+@import '~src/function.scss';
 ion-content{
     --background:transparent;
 }
@@ -29,7 +30,7 @@ ion-content{
     }
 
     .title{
-      font-size: 25px;
+      font-size: rem(25);
     }
 
   }
@@ -43,7 +44,7 @@ ion-content{
 
     .ion-item-container{
 
-        margin: 15px auto;
+        margin: rem(15) auto;
         border: 1px solid #ebebeb;
         border-radius: 5px;
         padding-left: 10px;
@@ -60,11 +61,11 @@ ion-content{
         margin: 0px auto;
       }
       .ion-icon-class{
-        width: 45px;
-        height: 45px;
+        width: rem(45);
+        height: rem(45);
         float: left;
         padding: 10px;
-        font-size: 25px;
+        font-size: rem(25);
       }
       ion-select{
         padding-left: 5px;
@@ -72,7 +73,7 @@ ion-content{
       }
       .ion-input-class{
 
-        height: 45px;
+        height: rem(45);
         border: 1px solid #ebebeb;
         border-radius: 5px;
         padding-left: 5px;
@@ -92,18 +93,18 @@ ion-content{
       
       }
       .add-people{
-        width: 45px;
+        width: rem(45);
         float: right;
-        font-size: 25px;
-        height: 45px;
+        font-size: rem(25);
+        height: rem(45);
         display: flex;
       }
       .list-people-title{
-        /* font-size: 13px; */
+        /* font-size: rem(13); */
         color: #a3a3a3;
       }
       .attach-document{
-        font-size: 15px;
+        font-size: rem(15);
         color: var(--title-text-color);
         margin: 5px 5px 5px 10px;
         padding: 5px;
@@ -111,30 +112,30 @@ ion-content{
       }
       .attach-icon{
         width: 37px;
-        font-size: 35px;
+        font-size: rem(35);
         float: left;
       }
       .attach-title-item{
         width: 100%;
-        font-size: 15px;
+        font-size: rem(15);
         color: var(--title-text-color);
       }
       /* SPAN */
       .span-left{
         float: left;
-        font-size: 15x;
+        font-size: rem(15);
       }
       .span-right{
       text-align: right;
       float: right;
-      font-size: 13px;
+      font-size: rem(13);
       }
       .container-footer{
           margin:0 auto;
       }
       .button-cancel {
           width: 170px;
-          height: 44px;
+          height: rem(44);
           border-radius: 22.5px;
           --background: #e0e9ee;
           --color: #061b52;
@@ -142,7 +143,7 @@ ion-content{
         }
         .button-save {
           width: 170px;
-          height: 44px;
+          height: rem(44);
           border-radius: 22.5px;
           --background: #42b9fe;
           --color:#ffffff;
@@ -160,7 +161,7 @@ ion-content{
       /* Error Messages */
       .error{
         color:red;
-        font-size: 12px;
+        font-size: rem(12);
         font-weight: bold;
         padding-bottom: 20px;
       }
@@ -179,7 +180,7 @@ ion-content{
   align-items: center;
   padding: 0px 5px;
   color: white;
-  font-size: 9pt;
+  font-size: rem(12);
   font-weight: 500;
   height: 19px;
   -webkit-border-radius: 18px;
diff --git a/src/app/shared/agenda/event-list/event-list.page.html b/src/app/shared/agenda/event-list/event-list.page.html
index 27da8ca44..7507f521c 100644
--- a/src/app/shared/agenda/event-list/event-list.page.html
+++ b/src/app/shared/agenda/event-list/event-list.page.html
@@ -55,7 +55,7 @@
                 <p *ngIf="toDateString(event.workflowInstanceDataFields.StartDate) == toDateString(event.workflowInstanceDataFields.EndDate)">{{event.workflowInstanceDataFields.StartDate | date: 'd/M/yy' }}  |  {{event.workflowInstanceDataFields.Location}}</p>
                 <h3>{{event.workflowInstanceDataFields.Subject}}</h3>
                 <div *ngIf="event.activityInstanceName">
-                  <div class="label-event-type"> {{ event.activityInstanceName }} </div>
+                  <div class="label-event-type font-13-rem"> {{ event.activityInstanceName }} </div>
                 </div>
               </div>
               </div>
diff --git a/src/app/shared/agenda/event-list/event-list.page.scss b/src/app/shared/agenda/event-list/event-list.page.scss
index dc8dd0c24..8b9e0c6de 100644
--- a/src/app/shared/agenda/event-list/event-list.page.scss
+++ b/src/app/shared/agenda/event-list/event-list.page.scss
@@ -7,13 +7,13 @@
   padding: 30px 20px 0 20px !important;
 }
 .header-icon-left{
-  font-size: 33px;
+  font-size: rem(33);
   color: #42b9fe;
   float: left;
 }
 .header-title{
   font-family: Roboto;
-  font-size: 25px;
+  font-size: rem(25);
   padding: 0;
   color:#000;
   float: left;
@@ -62,7 +62,7 @@
   .approve-event-time p{
     width: 33px;
     font-family: Roboto;
-    font-size: 13px;
+    font-size: rem(13);
     font-weight: normal;
     font-stretch: normal;
     font-style: normal;
@@ -79,7 +79,7 @@
   .approve-event-detail p{
     //width: 250px;
     font-family: Roboto;
-    font-size: 13px;
+    font-size: rem(13);
     font-weight: normal;
     font-stretch: normal;
     font-style: normal;
@@ -92,7 +92,7 @@
   .approve-event-detail h3{
     width: 250px;
     font-family: Roboto;
-    font-size: 15px;
+    font-size: rem(15);
     font-weight: bold;
     font-stretch: normal;
     font-style: normal;
@@ -112,5 +112,5 @@
   background: #f05d5e;
   border-radius: 17px;
   color: white;
-  font-size: 10pt;
+  font-size: rem(13);
 }
\ No newline at end of file
diff --git a/src/app/shared/agenda/new-event/new-event.page.scss b/src/app/shared/agenda/new-event/new-event.page.scss
index ec0ef471e..95cda3c58 100644
--- a/src/app/shared/agenda/new-event/new-event.page.scss
+++ b/src/app/shared/agenda/new-event/new-event.page.scss
@@ -1,4 +1,6 @@
-  ion-content{
+@import '~src/function.scss';
+
+ion-content{
     --background:transparent;
   }
 
@@ -33,7 +35,7 @@
     }
   
     .title{
-      font-size: 25px;
+      font-size: rem(25);
     }
   
   }
@@ -47,7 +49,7 @@
     padding: 15px 20px 0 20px;
   
     .ion-item-container{
-        margin: 15px auto;
+        margin: rem(15) auto;
         border: 1px solid #ebebeb;
         border-radius: 5px;
         padding-left: 10px;
@@ -65,18 +67,18 @@
         margin: 0px auto;
       }
       .ion-icon-class{
-        width: 45px;
-        height: 45px;
+        width: rem(45);
+        height: rem(45);
         float: left;
         padding: 10px;
-        font-size: 25px;
+        font-size: rem(25);
       }
       ion-select{
         padding-left: 5px;
         margin-left: 0;
       }
       .ion-input-class{
-        height: 45px;
+        height: rem(45);
         border: 1px solid #ebebeb;
         border-radius: 5px;
         padding-left: 5px;
@@ -94,19 +96,19 @@
       
       }
       .add-people{
-        width: 45px;
+        width: rem(45);
         float: right;
         overflow: auto;
-        font-size: 25px;
-        height: 45px;
+        font-size: rem(25);
+        height: rem(45);
         display: flex;
       }
       .list-people-title{
-        /* font-size: 13px; */
+        /* font-size: rem(13); */
         color: #a3a3a3;
       }
       .attach-document{
-        font-size: 15px;
+        font-size: rem(15);
         color: var(--title-text-color);
         margin: 5px 5px 5px 10px;
         padding: 5px;
@@ -114,39 +116,39 @@
       }
       .attach-icon{
         width: 37px;
-        font-size: 35px;
+        font-size: rem(35);
         float: left;
       }
       .attach-title-item{
         width: 100%;
-        font-size: 15px;
+        font-size: rem(15);
         color:#0d89d1;
       }
       /* SPAN */
       .span-left{
         float: left;
-        font-size: 15x;
+        font-size: rem(15);
       }
       .span-right{
       text-align: right;
       float: right;
-      font-size: 13px;
+      font-size: rem(13);
       }
       .container-footer{
           margin:0 auto;
           overflow: auto;
       }
       .button-cancel {
-          width: 170px;
-          height: 44px;
+          width: rem(170);
+          height: rem(44);
           border-radius: 22.5px;
           --background: #e0e9ee;
           --color: #061b52;
           margin:10px;
         }
         .button-save {
-          width: 170px;
-          height: 44px;
+          width: rem(170);
+          height: rem(44);
           border-radius: 22.5px;
           --background: #42b9fe;
           --color:#ffffff;
@@ -164,7 +166,7 @@
       /* Error Messages */
       .error{
         color:red;
-        font-size: 12px;
+        font-size: rem(12);
         font-weight: bold;
         padding-bottom: 20px;
       }
@@ -187,7 +189,7 @@
     align-items: center;
     padding: 0px 5px;
     color: white;
-    font-size: 9pt;
+    font-size: rem(12);
     font-weight: 500;
     height: 19px;
     -webkit-border-radius: 18px;
diff --git a/src/app/shared/agenda/view-event/view-event.page.html b/src/app/shared/agenda/view-event/view-event.page.html
index dafddc1e8..ad38445ac 100644
--- a/src/app/shared/agenda/view-event/view-event.page.html
+++ b/src/app/shared/agenda/view-event/view-event.page.html
@@ -82,7 +82,7 @@
     <div class="line"></div>
     <div class="middle-content">
       <div *ngIf="loadedEvent.Attendees">
-        <h5>Intervenientes</h5>
+        <h5 class="font-17-rem">Intervenientes</h5>
         <ion-item class="ion-no-margin ion-no-padding">
           <ion-label>
             <div *ngFor="let attendee of loadedEvent.Attendees">
@@ -92,7 +92,7 @@
         </ion-item>
       </div>
       <div *ngIf="loadedEvent.Body.Text">
-        <h5>Detalhes</h5>
+        <h5 class="font-17-rem">Detalhes</h5>
         <ion-item lines="none" class="ion-no-margin ion-no-padding">
           <pre class="text">{{ loadedEvent.Body.Text }} </pre>
         </ion-item>
@@ -101,7 +101,7 @@
     </div>
 
     <div *ngIf="loadedEvent.Attachments" class="bottom-content width-100">
-      <h5>Documentos Anexados</h5>
+      <h5 class="font-17-rem">Documentos Anexados</h5>
       <ion-list class="width-100">
         <li *ngFor="let attach of loadedEvent.Attachments; let i = index" class="width-100" lines="none" class="ion-no-margin ion-no-padding pa-0">
           <ion-label class="width-100 d-flex align-center">
diff --git a/src/app/shared/agenda/view-event/view-event.page.scss b/src/app/shared/agenda/view-event/view-event.page.scss
index b23520654..b9e78eb2b 100644
--- a/src/app/shared/agenda/view-event/view-event.page.scss
+++ b/src/app/shared/agenda/view-event/view-event.page.scss
@@ -3,7 +3,7 @@ ion-content{
     --padding-top:0px;
     --padding-start: 20px;
     --padding-end: 20px;
-    font-size: 18px;
+    font-size: rem(18);
     overflow: auto;
 }
 
@@ -33,7 +33,7 @@ ion-content{
       .left{
         width: 37px;
         float: left;
-        font-size: 35px;
+        font-size: rem(35);
 
       }
       .middle{
@@ -49,8 +49,8 @@ ion-content{
       }
 
       .header-icon-right{
-        width: 45px;
-        font-size: 45px;
+        width: rem(45);
+        font-size: rem(45);
         float: right;
 
       }
@@ -67,12 +67,12 @@ ion-content{
 
       }
       .div-icon .edit{
-        font-size: 35px;
+        font-size: rem(35);
         float: left;
       }
       .div-icon .delete{
         padding: 7px;
-        font-size: 21px;
+        font-size: rem(21);
         color:#fff;
         background: #d30606;
         border-radius: 20px;
@@ -81,7 +81,7 @@ ion-content{
     }
 
     .title{
-      font-size: 25px;
+      font-size: rem(25);
     }
 
   }
@@ -96,7 +96,7 @@ ion-content{
     .upper-content{
       width: calc(100%-50px);
       margin-left: 50px;
-      font-size: 18px;
+      font-size: rem(18);
       
         .content-location{
           width: 100%;
@@ -116,18 +116,19 @@ ion-content{
             float: right !important;
             padding: 5px 13.5px 5px 13.5px;
             color: #fff;
+            font-size: rem(14);
           }
         }
       
         .location-detail{
           font-weight: 700;
-          font-size: 18px;
+          font-size: rem(18);
           float: left;
           margin: 5px 5px 5px 0px;
         }
         
         .button-calendar-type ion-button{
-          height: 25px;
+          height: rem(25);
         }
         .button-edit-event {
             width: 140px;
@@ -137,7 +138,7 @@ ion-content{
             --color:#061b52;
         }
         .content-details p{
-            font-size: 16px;
+            font-size: rem(16);
         }
       }
       .line{
@@ -150,7 +151,7 @@ ion-content{
         overflow: auto;
 
         .middle-content h3, .middle-content p{
-          font-size: 16px;
+          font-size: rem(16);
         }
       }
       
@@ -158,11 +159,11 @@ ion-content{
         margin: 0 auto;
         
         .bottom-content h3{
-          font-size: 16px;
+          font-size: rem(16);
           margin: 0 0 0 10px;
         }
         .attach-document{
-          font-size: 15px;
+          font-size: rem(15);
           color: var(--title-text-color);
           margin: 5px 5px 5px 10px;
           padding: 5px;
@@ -170,24 +171,24 @@ ion-content{
         }
         .attach-icon{
           width: 37px;
-          font-size: 35px;
+          font-size: rem(35);
           float: left;
         }
         .attach-title-item{
           width: 100%;
-          font-size: 15px;
+          font-size: rem(15);
           color:#0d89d1;
           /* color:var(--title-text-color); */
         }
         /* SPAN */
         .span-left{
           float: left;
-          font-size: 15x;
+          font-size: rem(15);
         }
         .span-right{
         text-align: right;
         float: right;
-        font-size: 13px;
+        font-size: rem(13);
         }
     }
   }
@@ -205,7 +206,7 @@ ion-content{
   cursor: pointer;
   display: flex;
   justify-content: center;
-  width: 35px; 
+  width: rem(35); 
   height: 41px;
   align-items: center;
 }
diff --git a/src/app/shared/btn-modal-dismiss/btn-modal-dismiss.page.scss b/src/app/shared/btn-modal-dismiss/btn-modal-dismiss.page.scss
index e45de9fdb..f1f4eec2d 100644
--- a/src/app/shared/btn-modal-dismiss/btn-modal-dismiss.page.scss
+++ b/src/app/shared/btn-modal-dismiss/btn-modal-dismiss.page.scss
@@ -1,6 +1,6 @@
 .btn-modal-dismiss{
     width: 37px;
     float: left;
-    font-size: 35px;
+    font-size: rem(35);
     overflow: hidden;
 }
\ No newline at end of file
diff --git a/src/app/shared/btn-seguinte/btn-seguinte.page.scss b/src/app/shared/btn-seguinte/btn-seguinte.page.scss
index 617cd84ef..bcc8034ff 100644
--- a/src/app/shared/btn-seguinte/btn-seguinte.page.scss
+++ b/src/app/shared/btn-seguinte/btn-seguinte.page.scss
@@ -1,7 +1,7 @@
 .right{
   padding: 0!important;
   float: right;
-  font-size: 15px;
+  font-size: rem(15);
   color: var(--title-text-color);
   margin: 8px 0 0 5px;
 }
\ No newline at end of file
diff --git a/src/app/shared/chat/edit-group/edit-group.page.scss b/src/app/shared/chat/edit-group/edit-group.page.scss
index 9dd7ea684..3d235ae32 100644
--- a/src/app/shared/chat/edit-group/edit-group.page.scss
+++ b/src/app/shared/chat/edit-group/edit-group.page.scss
@@ -14,7 +14,7 @@ ion-content{
     border: 0!important;
 
     .div-search{
-      font-size: 45px;
+      font-size: rem(45);
       float: left;
       margin: 0 0 0 10px
     }
@@ -28,7 +28,7 @@ ion-content{
       width: 100%;
     }
     .div-profile{
-      font-size: 45px;
+      font-size: rem(45);
       float: right;
       margin-right: 10px;
     }
@@ -56,7 +56,7 @@ ion-content{
       .left{
         width: 37px;
         float: left;
-        font-size: 35px;
+        font-size: rem(35);
         overflow: auto;
        }
        .middle{
@@ -68,19 +68,19 @@ ion-content{
       .right{
         padding: 0!important;
         float: right;
-        font-size: 15px;
+        font-size: rem(15);
         color: #0782c9;
         margin: 8px 0 0 5px;
       }
     }
 
     .title{
-      font-size: 25px;
+      font-size: rem(25);
     }
     .div-icon{
-      width: 40px;
+      width: rem(40);
       float: right;
-      font-size: 35px;
+      font-size: rem(35);
       overflow: auto;
       padding: 1px;
     }
@@ -116,7 +116,7 @@ ion-content{
 
       .item-container-no-border ion-label{
           padding-left: 10px;
-          font-size: 12px;
+          font-size: rem(12);
           color: #000;
       }
   }
@@ -130,16 +130,16 @@ ion-content{
         margin: 0px auto;
 
         .ion-icon-class{
-            width: 45px;
-            height: 45px;
+            width: rem(45);
+            height: rem(45);
             float: left;
             padding: 10px;
-            font-size: 25px;
+            font-size: rem(25);
           }
       }
       .ion-input-class{
         width: calc(100% - 45px);
-        height: 45px;
+        height: rem(45);
         border: 1px solid #ebebeb;
         border-radius: 5px;
         padding-left: 5px;
diff --git a/src/app/shared/chat/group-messages/group-contacts/group-contacts.page.scss b/src/app/shared/chat/group-messages/group-contacts/group-contacts.page.scss
index 5c79cb69a..7180f00cf 100644
--- a/src/app/shared/chat/group-messages/group-contacts/group-contacts.page.scss
+++ b/src/app/shared/chat/group-messages/group-contacts/group-contacts.page.scss
@@ -12,9 +12,9 @@
      transform: translate3d(0, 1px, 0);
  
      .div-icon{
-       width: 40px;
+       width: rem(40);
        float: right;
-       font-size: 35px;
+       font-size: rem(35);
        overflow: auto;
        padding: 1px;
      }
@@ -31,7 +31,7 @@
      .back-icon{
        width: 37px;
        float: left;
-       font-size: 35px;
+       font-size: rem(35);
        overflow: auto;
          
        }
@@ -44,12 +44,12 @@
      .adicionar{
       padding: 0!important;
       float: right;
-      font-size: 15px;
+      font-size: rem(15);
       color: var(--font-awesome);
       margin: 8px 5px 0 5px;
     }
      .title{
-         font-size: 25px;
+         font-size: rem(25);
      }
    }
  }
@@ -99,7 +99,7 @@
 
     .members-label{
       //margin: 10px 20px 10px 20px !important;
-      /* font-size: 15px; */
+      /* font-size: rem(15); */
       font-weight: bold;
     }
 
@@ -111,12 +111,12 @@
 
       .detele-item-icon{
         display: none;
-        width: 30px;
+        width: rem(30);
         margin-left: 15px;
       }
   
       .detele-item-icon ion-icon{
-        font-size: 20px !important;
+        font-size: rem(20) !important;
       }
     }
 
@@ -129,7 +129,7 @@
     
     .item-divider{
       background: #ebebeb;
-      font-size: 15px;
+      font-size: rem(15);
       margin: 10px 0 10px 0;
       padding:5px 0 5px 20px;
   
@@ -149,13 +149,13 @@
  
      .item-checkbox ion-label, .members-checkbox p{
          padding-left: 10px;
-         font-size: 15px;
+         font-size: rem(15);
          color: var(--title-text-color);
          float: left;
          flex-grow: 1;
      }
      .icon, .members-checkbox ion-icon{
-       font-size: 10px;
+       font-size: rem(10);
      }
      .online{
       color:#99e47b !important;
diff --git a/src/app/shared/chat/group-messages/group-messages.page.scss b/src/app/shared/chat/group-messages/group-messages.page.scss
index c847864ad..0f4b97771 100644
--- a/src/app/shared/chat/group-messages/group-messages.page.scss
+++ b/src/app/shared/chat/group-messages/group-messages.page.scss
@@ -25,7 +25,7 @@
           .right{
             padding: 0!important;
             float: right;
-            font-size: 25px;
+            font-size: rem(25);
             color: #0782c9;
             margin: 5px 0 0 0;
           }
@@ -35,15 +35,15 @@
           overflow: auto;
 
           .header-bottom-icon{
-            width: 30px;
-            font-size: 25px;
+            width: rem(30);
+            font-size: rem(25);
             float: left;
             padding: 2px;
 
           }
           .header-bottom-contacts{
             width: calc(100% - 40px);
-            font-size: 15px;
+            font-size: rem(15);
             color: #797979;
             white-space: nowrap;
             overflow: hidden;
@@ -61,16 +61,16 @@
         }
 
         .title{
-          font-size: 25px;
+          font-size: rem(25);
           white-space: nowrap;
           overflow: hidden !important;
           text-overflow: ellipsis !important;
           float: left;
         }
         .div-icon{
-          width: 40px;
+          width: rem(40);
           float: right;
-          font-size: 35px;
+          font-size: rem(35);
           overflow: auto;
           padding: 1px;
         }
@@ -90,7 +90,7 @@
      //width: em(422px);
      background: #ebebeb;
      text-align: center;
-     font-size: 13px;
+     font-size: rem(13);
      color: #797979;
      padding: 10px;
      margin: 0 auto;
@@ -103,7 +103,7 @@
     width: em(422px);
     background: var(--chat-alert-msg-color);
     text-align: center;
-    font-size: 13px;
+    font-size: rem(13);
     color: #262420;
     padding: 10px;
     margin: 10px auto;
@@ -121,11 +121,11 @@
    border-radius: 8px;
    margin: 10px auto;
    color: #797979 !important;
-   font-size: 13px !important;
+   font-size: rem(13) !important;
    /* margin: 15px 0px 15px 0px; */
 
    .info-text-leave ion-label{
-     font-size: 13px !important;
+     font-size: rem(13) !important;
      line-height: 1.2rem;
    }
   }
@@ -135,7 +135,7 @@
     width: em(422px);
     background: var(--chat-alert-msg-color);
     text-align: center;
-    font-size: 13px;
+    font-size: rem(13);
     color: #262420;
     padding: 10px;
     margin: 10px auto;
@@ -144,11 +144,11 @@
     border-radius: 8px;
 
     .info-meeting-small{
-      font-size: 10px;
+      font-size: rem(10);
       font-style: italic;
     }
     .info-meeting-medium{
-      font-size: 12px;
+      font-size: rem(12);
     }
     .info-meeting-normal{
       font-weight: 700;
@@ -159,7 +159,7 @@
     }
    }
    .messages{
-    font-size: 13px;
+    font-size: rem(13);
     font-family: Roboto;
     overflow: auto;
 
@@ -244,13 +244,13 @@
 
      .chat-icon-options{
        display:block !important;
-       font-size: 35px;
+       font-size: rem(35);
        float: right !important;
        margin-top: 5px;
      }
 
      .chat-icon-send{
-       font-size: 45px;
+       font-size: rem(45);
        margin: 0 auto;
        margin-top: 4px;
      }
@@ -285,7 +285,7 @@
   left: 0px;
   margin-left: 22px;
   display: flex;
-  font-size: 12px;
+  font-size: rem(12);
   align-items: center;
 }
 
diff --git a/src/app/shared/chat/messages/contacts/contacts.page.scss b/src/app/shared/chat/messages/contacts/contacts.page.scss
index 55c867f4c..3841bfa5d 100644
--- a/src/app/shared/chat/messages/contacts/contacts.page.scss
+++ b/src/app/shared/chat/messages/contacts/contacts.page.scss
@@ -16,9 +16,9 @@
      transform: translate3d(0, 1px, 0);
  
      .div-icon{
-       width: 40px;
+       width: rem(40);
        float: right;
-       font-size: 35px;
+       font-size: rem(35);
        overflow: auto;
        padding: 1px;
      }
@@ -35,7 +35,7 @@
      .back-icon{
        width: 37px;
        float: left;
-       font-size: 35px;
+       font-size: rem(35);
        overflow: auto;
          
        }
@@ -46,7 +46,7 @@
          margin: 2.5px 0 0 5px;
      }
      .title{
-         font-size: 25px;
+         font-size: rem(25);
      }
    }
  }
@@ -89,7 +89,7 @@
  
      .item-divider{
        background: #ebebeb;
-       font-size: 15px;
+       font-size: rem(15);
        margin: 10px 0 10px 0;
        padding:5px 0 5px 20px;
   
@@ -106,13 +106,13 @@
         display: block;
         margin: 0 !important;
         width: 90%;
-        font-size: 15px;
+        font-size: rem(15);
         color: var(--title-text-color);
         float: left;
      }
      .item-user .icon{
         width: 10%;
-        font-size: 10px;
+        font-size: rem(10);
         display: block;
         text-align: right;
         overflow: auto;
diff --git a/src/app/shared/chat/messages/messages.page.scss b/src/app/shared/chat/messages/messages.page.scss
index a4b4e2997..a422d904b 100644
--- a/src/app/shared/chat/messages/messages.page.scss
+++ b/src/app/shared/chat/messages/messages.page.scss
@@ -35,7 +35,7 @@
       .right {
         padding: 0 !important;
         float: right;
-        font-size: 25px;
+        font-size: rem(25);
         color: #0782c9;
         margin: 5px 0 0 0;
       }
@@ -47,8 +47,8 @@
 
 
       .header-bottom-icon {
-        width: 30px;
-        font-size: 25px;
+        width: rem(30);
+        font-size: rem(25);
         float: left;
         padding: 2px;
 
@@ -56,7 +56,7 @@
 
       .header-bottom-contacts {
         width: 275px;
-        font-size: 15px;
+        font-size: rem(15);
         color: #797979;
         white-space: nowrap;
         overflow: hidden;
@@ -68,7 +68,7 @@
     }
 
     .title {
-      font-size: 25px;
+      font-size: rem(25);
       white-space: nowrap;
       overflow: hidden !important;
       text-overflow: ellipsis !important;
@@ -76,9 +76,9 @@
     }
 
     .div-icon {
-      width: 40px;
+      width: rem(40);
       float: right;
-      font-size: 35px;
+      font-size: rem(35);
       overflow: auto;
       padding: 1px;
     }
@@ -101,7 +101,7 @@ ion-content {
     width: 100%;
     background: #ebebeb;
     text-align: center;
-    font-size: 13px;
+    font-size: rem(13);
     color: #797979;
     padding: 10px;
     margin: 0 auto;
@@ -116,7 +116,7 @@ ion-content {
     width: em(422px);
     background: var(--chat-alert-msg-color);
     text-align: center;
-    font-size: 13px;
+    font-size: rem(13);
     color: #262420;
     padding: 10px;
     margin: 10px auto;
@@ -125,12 +125,12 @@ ion-content {
     border-radius: 8px;
 
     .info-meeting-small {
-      font-size: 10px;
+      font-size: rem(10);
       font-style: italic;
     }
 
     .info-meeting-medium {
-      font-size: 12px;
+      font-size: rem(12);
     }
 
     .info-meeting-normal {
@@ -144,7 +144,7 @@ ion-content {
   }
 
   .messages {
-    font-size: 13px;
+    font-size: rem(13);
     font-family: Roboto;
     overflow: auto;
 
@@ -235,13 +235,13 @@ ion-footer {
 
   .chat-icon-options {
     display: block !important;
-    font-size: 35px;
+    font-size: rem(35);
     float: right !important;
     margin-top: 5px;
   }
 
   .chat-icon-send {
-    font-size: 45px;
+    font-size: rem(45);
     margin: 0 auto;
     margin-top: 4px;
   }
@@ -271,7 +271,7 @@ ion-footer {
 }
 
 .text-color-blue {
-  font-size: 15px;
+  font-size: rem(15);
   color: #0782c9;
   font-weight: 500;
   letter-spacing: normal;
@@ -353,7 +353,7 @@ ion-footer {
   left: 0px;
   margin-left: 22px;
   display: flex;
-  font-size: 12px;
+  font-size: rem(12);
   align-items: center;
 }
 
@@ -408,5 +408,5 @@ ion-footer {
 
 
 .lido, .enviado {
-  font-size: 11px;
+  font-size: rem(11);
 }
\ No newline at end of file
diff --git a/src/app/shared/chat/new-group/contacts/contacts.page.scss b/src/app/shared/chat/new-group/contacts/contacts.page.scss
index 54523dbf8..86a134b2d 100644
--- a/src/app/shared/chat/new-group/contacts/contacts.page.scss
+++ b/src/app/shared/chat/new-group/contacts/contacts.page.scss
@@ -16,9 +16,9 @@
     transform: translate3d(0, 1px, 0);
 
     .div-icon{
-      width: 40px;
+      width: rem(40);
       float: right;
-      font-size: 35px;
+      font-size: rem(35);
       overflow: auto;
       padding: 1px;
     }
@@ -35,7 +35,7 @@
     .back-icon{
       width: 37px;
       float: left;
-      font-size: 35px;
+      font-size: rem(35);
       overflow: auto;
         
       }
@@ -46,7 +46,7 @@
         margin: 2.5px 0 0 5px;
     }
     .title{
-        font-size: 25px;
+        font-size: rem(25);
     }
   }
 }
@@ -87,7 +87,7 @@ ion-content{
 
     .item-divider{
       background: #ebebeb;
-      font-size: 15px;
+      font-size: rem(15);
       margin: 10px 0 10px 0;
       padding:5px 0 5px 20px;
  
@@ -112,12 +112,12 @@ ion-content{
         margin: 0 !important;
         width: 330px;
         padding-left: 10px;
-        font-size: 15px;
+        font-size: rem(15);
         color: #0d89d1;
         float: left;
     }
     .item-checkbox ion-icon{
-      font-size: 10px;
+      font-size: rem(10);
       float: left;
       color:#99e47b;
       margin-left: 10px;
diff --git a/src/app/shared/chat/new-group/new-group.page.scss b/src/app/shared/chat/new-group/new-group.page.scss
index fa33e3e9f..5bfd6c89d 100644
--- a/src/app/shared/chat/new-group/new-group.page.scss
+++ b/src/app/shared/chat/new-group/new-group.page.scss
@@ -14,7 +14,7 @@ ion-content{
     border: 0!important;
 
     .div-search{
-      font-size: 45px;
+      font-size: rem(45);
       float: left;
       margin: 0 0 0 10px
     }
@@ -28,7 +28,7 @@ ion-content{
       width: 100%;
     }
     .div-profile{
-      font-size: 45px;
+      font-size: rem(45);
       float: right;
       margin-right: 10px;
     }
@@ -56,7 +56,7 @@ ion-content{
       .left{
         width: 37px;
         float: left;
-        font-size: 35px;
+        font-size: rem(35);
         overflow: auto;
        }
        .middle{
@@ -68,26 +68,26 @@ ion-content{
       .btn-criar{
         padding: 0!important;
         float: right;
-        font-size: 15px;
+        font-size: rem(15);
         color: var(--font-awesome);
         margin: 8px 5px 0 5px;
       }
       .right{
         padding: 0!important;
         float: right;
-        font-size: 15px;
+        font-size: rem(15);
         color: #0782c9;
         margin: 8px 0 0 5px;
       }
     }
 
     .title{
-      font-size: 25px;
+      font-size: rem(25);
     }
     .div-icon{
-      width: 40px;
+      width: rem(40);
       float: right;
-      font-size: 35px;
+      font-size: rem(35);
       overflow: auto;
       padding: 1px;
     }
@@ -125,7 +125,7 @@ ion-content{
 
       .item-container-no-border ion-label{
           padding-left: 10px;
-          font-size: 12px;
+          font-size: rem(12);
           color: #000;
       }
   }
@@ -141,15 +141,15 @@ ion-content{
 
         .ion-icon-class{
             width: 5%;
-            height: 45px;
+            height: rem(45);
             float: left;
             padding: 10px;
-            font-size: 25px;
+            font-size: rem(25);
           }
       }
       .ion-input-class{
         width: 93%;
-        height: 45px;
+        height: rem(45);
         border: 1px solid #ebebeb;
         border-radius: 5px;
         padding-left: 5px;
diff --git a/src/app/shared/event/attendee-modal/attendee-modal.page.html b/src/app/shared/event/attendee-modal/attendee-modal.page.html
index b022d92fb..cdd776675 100644
--- a/src/app/shared/event/attendee-modal/attendee-modal.page.html
+++ b/src/app/shared/event/attendee-modal/attendee-modal.page.html
@@ -14,18 +14,18 @@
         <div *ngFor="let attendee of contacts;">
           <ion-item (click)="selectContact(attendee)" class="cursor-pointer" *ngIf="filterSearchList(attendee)" >
             <div class="pr-10">
-              <ion-icon *ngIf="ThemeService.currentTheme == 'default' " class="font-35" src="assets/images/icons-default-profile.svg"></ion-icon>
-              <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="font-35" src="assets/images/theme/gov/icons-profile.svg"></ion-icon>
-              <ion-icon *ngIf="ThemeService.currentTheme == 'doneIt' " class="font-35" src="assets/images/theme/{{ThemeService.currentTheme}}/icons-profile.svg"></ion-icon>
+              <ion-icon *ngIf="ThemeService.currentTheme == 'default' " class="font-35-rem" src="assets/images/icons-default-profile.svg"></ion-icon>
+              <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="font-35-rem" src="assets/images/theme/gov/icons-profile.svg"></ion-icon>
+              <ion-icon *ngIf="ThemeService.currentTheme == 'doneIt' " class="font-35-rem" src="assets/images/theme/{{ThemeService.currentTheme}}/icons-profile.svg"></ion-icon>
             </div>
             <ion-label>
               <h3>{{ attendee.Name }}</h3>
               <p>{{ attendee.EmailAddress }}</p>
             </ion-label>
             <div>
-              <ion-icon *ngIf="ThemeService.currentTheme == 'default' "   class="font-35" src="assets/images/icons-add-25.svg" ></ion-icon>
-              <ion-icon *ngIf="ThemeService.currentTheme == 'gov' "    class="font-35" src="assets/images/theme/gov/icons-add-25.svg" ></ion-icon>
-              <ion-icon *ngIf="ThemeService.currentTheme == 'doneIt' "    class="font-35" src="assets/images/theme/{{ThemeService.currentTheme}}/icons-add-25.svg" ></ion-icon>
+              <ion-icon *ngIf="ThemeService.currentTheme == 'default' "   class="font-35-rem" src="assets/images/icons-add-25.svg" ></ion-icon>
+              <ion-icon *ngIf="ThemeService.currentTheme == 'gov' "    class="font-35-rem" src="assets/images/theme/gov/icons-add-25.svg" ></ion-icon>
+              <ion-icon *ngIf="ThemeService.currentTheme == 'doneIt' "    class="font-35-rem" src="assets/images/theme/{{ThemeService.currentTheme}}/icons-add-25.svg" ></ion-icon>
             </div>
           </ion-item>
         </div>
@@ -39,16 +39,16 @@
       <ion-item-sliding class="px-20">
         <ion-item *ngFor="let attendee of LtaskParticipants;" class="d-flex">
           <div class="pr-10">
-            <ion-icon *ngIf="ThemeService.currentTheme == 'default' " class="font-35" src="assets/images/icons-default-profile.svg"></ion-icon>
-            <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="font-35" src="assets/images/theme/gov/icons-profile.svg"></ion-icon>
-            <ion-icon *ngIf="ThemeService.currentTheme == 'doneIt' " class="font-35" src="assets/images/theme/{{ThemeService.currentTheme}}/icons-profile.svg"></ion-icon>
+            <ion-icon *ngIf="ThemeService.currentTheme == 'default' " class="font-35-rem" src="assets/images/icons-default-profile.svg"></ion-icon>
+            <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="font-35-rem" src="assets/images/theme/gov/icons-profile.svg"></ion-icon>
+            <ion-icon *ngIf="ThemeService.currentTheme == 'doneIt' " class="font-35-rem" src="assets/images/theme/{{ThemeService.currentTheme}}/icons-profile.svg"></ion-icon>
           </div>
           <ion-label>
             <h3>{{ attendee.Name }}</h3>
             <p>{{ attendee.EmailAddress }}</p>
           </ion-label>
           <div class="cursor-pointer" (click)="remove(attendee)">
-            <ion-icon class="font-35" src="assets/images/icons-delete-25.svg"></ion-icon>
+            <ion-icon class="font-35-rem" src="assets/images/icons-delete-25.svg"></ion-icon>
           </div>
         </ion-item>
       </ion-item-sliding>
@@ -59,16 +59,16 @@
       <ion-item-sliding class="px-20">
         <ion-item *ngFor="let attendee of LtaskParticipantsCc;" class="d-flex">
           <div class="pr-10">
-            <ion-icon *ngIf="ThemeService.currentTheme == 'default' " class="font-35" src="assets/images/icons-default-profile.svg"></ion-icon>
-            <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="font-35" src="assets/images/theme/gov/icons-profile.svg"></ion-icon>
-            <ion-icon *ngIf="ThemeService.currentTheme == 'doneIt' " class="font-35" src="assets/images/theme/{{ThemeService.currentTheme}}/icons-profile.svg"></ion-icon>
+            <ion-icon *ngIf="ThemeService.currentTheme == 'default' " class="font-35-rem" src="assets/images/icons-default-profile.svg"></ion-icon>
+            <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="font-35-rem" src="assets/images/theme/gov/icons-profile.svg"></ion-icon>
+            <ion-icon *ngIf="ThemeService.currentTheme == 'doneIt' " class="font-35-rem" src="assets/images/theme/{{ThemeService.currentTheme}}/icons-profile.svg"></ion-icon>
           </div>
           <ion-label>
             <h3>{{ attendee.Name }}</h3>
             <p>{{ attendee.EmailAddress }}</p>
           </ion-label>
           <div class="cursor-pointer" (click)="remove(attendee)">
-            <ion-icon class="font-35" src="assets/images/icons-delete-25.svg"></ion-icon>
+            <ion-icon class="font-35-rem" src="assets/images/icons-delete-25.svg"></ion-icon>
           </div>
         </ion-item>
       </ion-item-sliding>
diff --git a/src/app/shared/fingerprint/fingerprint.page.scss b/src/app/shared/fingerprint/fingerprint.page.scss
index 86cf9fdc3..086604120 100644
--- a/src/app/shared/fingerprint/fingerprint.page.scss
+++ b/src/app/shared/fingerprint/fingerprint.page.scss
@@ -37,7 +37,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    font-size: 12pt;
+    font-size: rem(16);
     background: #44b5ea;
     border-radius: 56px;
     margin-left: 30px;
@@ -56,15 +56,15 @@
 
 .clear{
     color: #44b5ea;
-    font-size: 12pt;
+    font-size: rem(16);
 }
 .dot-active{
     background: #44b5ea;
 }
 
 .dot{
-    width: 25px;
-    height: 25px;
+    width: rem(25);
+    height: rem(25);
     margin: 0 10px 0 0;
     border: 3px solid #44b5ea;
     box-sizing: border-box;
diff --git a/src/app/shared/gabinete-digital/all-processes/all-processes.page.html b/src/app/shared/gabinete-digital/all-processes/all-processes.page.html
index 6b80aed03..6931298a6 100644
--- a/src/app/shared/gabinete-digital/all-processes/all-processes.page.html
+++ b/src/app/shared/gabinete-digital/all-processes/all-processes.page.html
@@ -7,13 +7,13 @@
       <div>
         <div title="Pesquisa" *ngIf="!hideSearchBtn" class="mr-20 d-flex align-center cursor-pointer">
           <div (click)="openSearch();showSearch=true" *ngIf="!showSearch" class="d-flex">
-            <ion-icon title="Perfil" *ngIf="ThemeService.currentTheme == 'doneIt' " class="font-35" src="assets/images/theme/doneIt/icons-search.svg"></ion-icon>
-            <ion-icon title="Perfil" *ngIf="ThemeService.currentTheme == 'default' " class="font-35" src='assets/images/icons-search.svg'></ion-icon>
-            <ion-icon title="Perfil" *ngIf="ThemeService.currentTheme == 'gov' " class="font-35" src='assets/images/theme/gov/icons-search.svg'></ion-icon>
+            <ion-icon title="Perfil" *ngIf="ThemeService.currentTheme == 'doneIt' " class="font-35-rem" src="assets/images/theme/doneIt/icons-search.svg"></ion-icon>
+            <ion-icon title="Perfil" *ngIf="ThemeService.currentTheme == 'default' " class="font-35-rem" src='assets/images/icons-search.svg'></ion-icon>
+            <ion-icon title="Perfil" *ngIf="ThemeService.currentTheme == 'gov' " class="font-35-rem" src='assets/images/theme/gov/icons-search.svg'></ion-icon>
           </div>
           <button title="Fechar" class="btn-no-color d-flex" (click)="closeSearch();showSearch=false;searchSubject=''" *ngIf="showSearch">
-            <ion-icon *ngIf="ThemeService.currentTheme == 'default' || ThemeService.currentTheme == 'doneIt' " class="font-35" name="restaurant-outline" src="assets/images/icons-search-close.svg"></ion-icon>
-            <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="font-35" name="restaurant-outline" src="assets/images/theme/gov/icons-search-close.svg"></ion-icon>
+            <ion-icon *ngIf="ThemeService.currentTheme == 'default' || ThemeService.currentTheme == 'doneIt' " class="font-35-rem" name="restaurant-outline" src="assets/images/icons-search-close.svg"></ion-icon>
+            <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="font-35-rem" name="restaurant-outline" src="assets/images/theme/gov/icons-search-close.svg"></ion-icon>
           </button>
 
           <div *ngIf="showSearch">
diff --git a/src/app/shared/gabinete-digital/all-processes/all-processes.page.scss b/src/app/shared/gabinete-digital/all-processes/all-processes.page.scss
index d97c358f9..f8f818d69 100644
--- a/src/app/shared/gabinete-digital/all-processes/all-processes.page.scss
+++ b/src/app/shared/gabinete-digital/all-processes/all-processes.page.scss
@@ -8,7 +8,7 @@
 .title{
   padding: 30px 20px 0 20px !important;
     font-family: Roboto;
-    font-size: 25px;
+    font-size: rem(25);
     color:#000;
     overflow: auto;
 
@@ -50,7 +50,7 @@ ion-list{
       width: 100%;
       float: left;
       font-family: Roboto;
-      font-size: 12pt;
+      font-size: rem(16);
       font-weight: 700;
       color:  var(--title-text-color);
       padding-left: 3px;
@@ -68,22 +68,22 @@ ion-list{
       .item-icon{
         width: fit-content;
         float: right;
-      /* font-size: 13px; */
+      /* font-size: rem(13); */
         margin: 0 !important;
         padding: 0 !important;
 
         ion-icon{
-          font-size: 12pt;
+          font-size: rem(16);
           color: #42b9fe;
           float: left;
         }
         label{
-          font-size: 10pt;
+          font-size: rem(13);
         }
       }
     }
     .item-middle-detail{
-      font-size: 10pt;
+      font-size: rem(13);
       width: 100%;
       overflow: auto;
       padding-left: 3px;
@@ -93,7 +93,7 @@ ion-list{
       .item-remetente{
         //width: 200px;
         font-family: Roboto;
-       /*  font-size: 13px; */
+       /*  font-size: rem(13); */
         font-weight: normal;
         color: #000000;
         float: left;
@@ -106,7 +106,7 @@ ion-list{
       }
     }
     .item-middle-detail-extra{
-      font-size: 10pt;
+      font-size: rem(13);
       padding-left: 3px;
       //border: 1px solid red;
 
@@ -120,7 +120,7 @@ ion-list{
       }
     }
     .item-bottom-detail{
-      font-size: 12pt;
+      font-size: rem(16);
       width: 100%;
       overflow: auto;
       margin-top: 10px;
@@ -135,9 +135,9 @@ ion-list{
         .label{
           border-radius: 15px;
           background: var(--label-bg-color);
-          /* font-size: 12px; */
+          /* font-size: rem(12); */
           float: right;
-          font-size: 12px;
+          font-size: rem(12);
           padding: 2.5px 13.5px 2.5px 13.5px;
           color: #fff;
       }
@@ -145,7 +145,7 @@ ion-list{
       .item-date{
         width: auto;
         font-family: Roboto;
-        font-size: 10pt;
+        font-size: rem(13);
         font-weight: normal;
         font-stretch: normal;
         font-style: normal;
@@ -178,14 +178,14 @@ ion-list{
   background-color: white;
   border-radius: 27.5px;
   border: solid 1px #ebebeb;
-  font-size: 14px;
+  font-size: rem(14);
   .icon{
     color: #797979;
     width: 41px;
     height: 41px;
     display: flex;
     justify-content: center;
-    font-size: 25px;
+    font-size: rem(25);
     align-items: center;
   }
   .input-text{
@@ -198,5 +198,5 @@ ion-list{
 
 
 .sender {
-  font-size: 10px;
+  font-size: rem(10);
 }
\ No newline at end of file
diff --git a/src/app/shared/gabinete-digital/despachos-pr/despachos-pr.page.scss b/src/app/shared/gabinete-digital/despachos-pr/despachos-pr.page.scss
index eb1c37aac..041b045ec 100644
--- a/src/app/shared/gabinete-digital/despachos-pr/despachos-pr.page.scss
+++ b/src/app/shared/gabinete-digital/despachos-pr/despachos-pr.page.scss
@@ -6,7 +6,7 @@
 }
 .main-header{
     font-family: Roboto;
-    font-size: 25px;
+    font-size: rem(25);
     color:#000;
     overflow: auto;
     padding: 30px 20px 0 20px !important;
@@ -31,13 +31,13 @@
     border-bottom: 5px solid #42b9fe;
 
     .bottom-text{
-      font-size: 15px !important;
+      font-size: rem(15) !important;
       font-family: Roboto !important;
       color: var(--title-text-color) !important;
     }
   }
 .item-list-small{
-    font-size: 11px;
+    font-size:  rem(11);
     overflow: hidden;
   }
   .ion-item-class{
@@ -80,12 +80,12 @@ ion-item{
   .div-content-expediente h3, .div-content-pendentes h3{
     margin: 0;
     padding: 0;
-    font-size: 14pt;
+    font-size: rem(19);
     width: 100%;
   }
   .div-icon{
     width: 10%;
-    font-size: 20px;
+    font-size: rem(20);
     float: left;
     color: #808080;
   }
@@ -95,7 +95,7 @@ ion-item{
   
   }
   .div-content-expediente p, .div-content-pendentes p{
-    font-size: 14pt;
+    font-size: rem(19);
     color: rgb(94, 92, 92);
     padding: 0;
     margin: 0;
@@ -103,14 +103,14 @@ ion-item{
   .span-left{
       /* border: 1px solid red; */
       float: left;
-      font-size: 12px;
+      font-size: rem(12);
       padding-left: 18px;
   }
   .span-right{
     /* border: 1px solid blue; */
     text-align: right;
     float: right;
-    font-size: 12px;
+    font-size: rem(12);
     padding-right: 18px;
 }
 
@@ -134,7 +134,7 @@ ion-item{
   width: 100%;
   float: left;
   font-family: Roboto;
-  font-size: 12pt;
+  font-size: rem(16);
   font-weight: 700;
   color: var(--title-text-color);
   padding-left: 3px;
@@ -147,17 +147,17 @@ ion-item{
   .exp-icon{
     width: fit-content;
     float: right;
-   /* font-size: 13px; */
+   /* font-size: rem(13); */
     margin: 0 !important;
     padding: 0 !important;
 
     ion-icon{
-      font-size: 12pt;
+      font-size: rem(16);
       color: #42b9fe;
       float: left;
     }
     label{
-      font-size: 10pt;
+      font-size: rem(13);
     }
   }
 }
@@ -166,7 +166,7 @@ ion-item{
 
 }
 .exp-middle-detail{
-  font-size: 12pt;
+  font-size: rem(16);
   width: 100%;
   overflow: auto;
 
@@ -177,7 +177,7 @@ ion-item{
     .label{
       border-radius: 15px;
       background: var(--label-bg-color);
-      /* font-size: 12px; */
+      /* font-size: rem(12); */
       float: right;
       padding: 2.5px 13.5px 2.5px 13.5px;
       color: #fff;
@@ -186,7 +186,7 @@ ion-item{
   .exp-date{
     width: auto;
     font-family: Roboto;
-    font-size: 10pt;
+    font-size: rem(13);
     font-weight: normal;
     font-stretch: normal;
     font-style: normal;
@@ -197,7 +197,7 @@ ion-item{
   }
 }
 .exp-bottom-detail{
-  font-size: 8pt;
+  font-size: rem(10);
   width: 100%;
   overflow: auto;
   padding-left: 3px;
@@ -205,7 +205,7 @@ ion-item{
   .exp-remetente{
     //width: 200px;
     font-family: Roboto;
-   /*  font-size: 13px; */
+   /*  font-size: rem(13); */
     font-weight: normal;
     color: #000000;
     float: left;
@@ -219,7 +219,7 @@ ion-item{
   overflow: auto;
 }
 .div-search{
-  font-size: 45px;
+  font-size: rem(45);
   float: left;
   margin: 0 0 0 10px
 }
@@ -233,7 +233,7 @@ ion-item{
   width: 100%;
 }
 .div-profile{
-  font-size: 45px;
+  font-size: rem(45);
   float: right;
   margin-right: 10px;
 }
@@ -245,14 +245,14 @@ ion-item{
   background-color: white;
   border-radius: 27.5px;
   border: solid 1px #ebebeb;
-  font-size: 14px;
+  font-size: rem(14);
   .icon{
     color: #797979;
     width: 41px;
     height: 41px;
     display: flex;
     justify-content: center;
-    font-size: 25px;
+    font-size: rem(25);
     align-items: center;
   }
   .input-text{
diff --git a/src/app/shared/gabinete-digital/despachos/despachos.page.html b/src/app/shared/gabinete-digital/despachos/despachos.page.html
index 052e53e4f..69b388684 100644
--- a/src/app/shared/gabinete-digital/despachos/despachos.page.html
+++ b/src/app/shared/gabinete-digital/despachos/despachos.page.html
@@ -10,13 +10,13 @@
       <!-- <div>
         <div title="Pesquisa" *ngIf="!hideSearchBtn" class="mr-20 d-flex align-center cursor-pointer">
           <div (click)="openSearch();showSearch=true" *ngIf="!showSearch" class="d-flex">
-            <ion-icon title="Perfil" *ngIf="ThemeService.currentTheme == 'doneIt' " class="font-35" src="assets/images/theme/doneIt/icons-search.svg"></ion-icon>
-            <ion-icon title="Perfil" *ngIf="ThemeService.currentTheme == 'default' " class="font-35" src='assets/images/icons-search.svg'></ion-icon>
-            <ion-icon title="Perfil" *ngIf="ThemeService.currentTheme == 'gov' " class="font-35" src='assets/images/theme/gov/icons-search.svg'></ion-icon>
+            <ion-icon title="Perfil" *ngIf="ThemeService.currentTheme == 'doneIt' " class="font-35-rem" src="assets/images/theme/doneIt/icons-search.svg"></ion-icon>
+            <ion-icon title="Perfil" *ngIf="ThemeService.currentTheme == 'default' " class="font-35-rem" src='assets/images/icons-search.svg'></ion-icon>
+            <ion-icon title="Perfil" *ngIf="ThemeService.currentTheme == 'gov' " class="font-35-rem" src='assets/images/theme/gov/icons-search.svg'></ion-icon>
           </div>
           <button title="Fechar" class="btn-no-color d-flex" (click)="closeSearch();showSearch=false;searchSubject=''" *ngIf="showSearch">
-            <ion-icon *ngIf="ThemeService.currentTheme == 'default' || ThemeService.currentTheme == 'doneIt' " class="font-35" name="restaurant-outline" src="assets/images/icons-search-close.svg"></ion-icon>
-            <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="font-35" name="restaurant-outline" src="assets/images/theme/gov/icons-search-close.svg"></ion-icon>
+            <ion-icon *ngIf="ThemeService.currentTheme == 'default' || ThemeService.currentTheme == 'doneIt' " class="font-35-rem" name="restaurant-outline" src="assets/images/icons-search-close.svg"></ion-icon>
+            <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="font-35-rem" name="restaurant-outline" src="assets/images/theme/gov/icons-search-close.svg"></ion-icon>
           </button>
 
           <div *ngIf="showSearch">
diff --git a/src/app/shared/gabinete-digital/despachos/despachos.page.scss b/src/app/shared/gabinete-digital/despachos/despachos.page.scss
index 911ef3a79..0a5b354a8 100644
--- a/src/app/shared/gabinete-digital/despachos/despachos.page.scss
+++ b/src/app/shared/gabinete-digital/despachos/despachos.page.scss
@@ -4,7 +4,7 @@
 .title{
   padding: 30px 20px 0 20px !important;
     font-family: Roboto;
-    font-size: 25px;
+    font-size: rem(25);
     color:#000;
     overflow: auto;
 
@@ -18,7 +18,7 @@
     }
   }
 .item-list-small{
-    font-size: 11px;
+    font-size:  rem(11);
     overflow: hidden;
   }
   .ion-item-class{
@@ -61,12 +61,12 @@ ion-item{
   .div-content-expediente h3, .div-content-pendentes h3{
     margin: 0;
     padding: 0;
-    font-size: 14pt;
+    font-size: rem(19);
     width: 100%;
   }
   .div-icon{
     width: 10%;
-    font-size: 20px;
+    font-size: rem(20);
     float: left;
     color: #808080;
   }
@@ -76,7 +76,7 @@ ion-item{
 
   }
   .div-content-expediente p, .div-content-pendentes p{
-    font-size: 14pt;
+    font-size: rem(19);
     color: rgb(94, 92, 92);
     padding: 0;
     margin: 0;
@@ -84,14 +84,14 @@ ion-item{
   .span-left{
       /* border: 1px solid red; */
       float: left;
-      font-size: 12px;
+      font-size: rem(12);
       padding-left: 18px;
   }
   .span-right{
     /* border: 1px solid blue; */
     text-align: right;
     float: right;
-    font-size: 12px;
+    font-size: rem(12);
     padding-right: 18px;
 }
 
@@ -115,7 +115,7 @@ ion-item{
   width: 100%;
   float: left;
   font-family: Roboto;
-  font-size: 12pt;
+  font-size: rem(16);
   font-weight: 700;
   color: var(--title-text-color);
   padding-left: 3px;
@@ -128,17 +128,17 @@ ion-item{
   .exp-icon{
     width: fit-content;
     float: right;
-   /* font-size: 13px; */
+   /* font-size: rem(13); */
     margin: 0 !important;
     padding: 0 !important;
 
     ion-icon{
-      font-size: 12pt;
+      font-size: rem(16);
       color: #42b9fe;
       float: left;
     }
     label{
-      font-size: 10pt;
+      font-size: rem(13);
     }
   }
 }
@@ -147,7 +147,7 @@ ion-item{
 
 }
 .exp-middle-detail{
-  font-size: 12pt;
+  font-size: rem(16);
   width: 100%;
   overflow: auto;
 
@@ -167,7 +167,7 @@ ion-item{
   .exp-date{
     width: auto;
     font-family: Roboto;
-    font-size: 10pt;
+    font-size: rem(13);
     font-weight: normal;
     font-stretch: normal;
     font-style: normal;
@@ -178,7 +178,7 @@ ion-item{
   }
 }
 .exp-bottom-detail{
-  font-size: 8pt;
+  font-size: rem(10);
   width: 100%;
   overflow: auto;
   padding-left: 3px;
@@ -186,7 +186,7 @@ ion-item{
   .exp-remetente{
     //width: 200px;
     font-family: Roboto;
-   /*  font-size: 13px; */
+   /*  font-size: rem(13); */
     font-weight: normal;
     color: #000000;
     float: left;
@@ -200,7 +200,7 @@ ion-item{
   overflow: auto;
 }
 .div-search{
-  font-size: 45px;
+  font-size: rem(45);
   float: left;
   margin: 0 0 0 10px
 }
@@ -214,7 +214,7 @@ ion-item{
   width: 100%;
 }
 .div-profile{
-  font-size: 45px;
+  font-size: rem(45);
   float: right;
   margin-right: 10px;
 }
@@ -225,14 +225,14 @@ ion-item{
   background-color: white;
   border-radius: 27.5px;
   border: solid 1px #ebebeb;
-  font-size: 14px;
+  font-size: rem(14);
   .icon{
     color: #797979;
     width: 41px;
     height: 41px;
     display: flex;
     justify-content: center;
-    font-size: 25px;
+    font-size: rem(25);
     align-items: center;
   }
   .input-text{
diff --git a/src/app/shared/gabinete-digital/diplomas-assinar/diplomas-assinar.page.html b/src/app/shared/gabinete-digital/diplomas-assinar/diplomas-assinar.page.html
index 4ffe2b678..ec266d2c3 100644
--- a/src/app/shared/gabinete-digital/diplomas-assinar/diplomas-assinar.page.html
+++ b/src/app/shared/gabinete-digital/diplomas-assinar/diplomas-assinar.page.html
@@ -6,13 +6,13 @@
       <!-- <div>
         <div title="Pesquisa" *ngIf="!hideSearchBtn" class="mr-20 d-flex align-center cursor-pointer">
           <div (click)="openSearch();showSearch=true" *ngIf="!showSearch" class="d-flex">
-            <ion-icon title="Perfil" *ngIf="ThemeService.currentTheme == 'doneIt' " class="font-35" src="assets/images/theme/doneIt/icons-search.svg"></ion-icon>
-            <ion-icon title="Perfil" *ngIf="ThemeService.currentTheme == 'default' " class="font-35" src='assets/images/icons-search.svg'></ion-icon>
-            <ion-icon title="Perfil" *ngIf="ThemeService.currentTheme == 'gov' " class="font-35" src='assets/images/theme/gov/icons-search.svg'></ion-icon>
+            <ion-icon title="Perfil" *ngIf="ThemeService.currentTheme == 'doneIt' " class="font-35-rem" src="assets/images/theme/doneIt/icons-search.svg"></ion-icon>
+            <ion-icon title="Perfil" *ngIf="ThemeService.currentTheme == 'default' " class="font-35-rem" src='assets/images/icons-search.svg'></ion-icon>
+            <ion-icon title="Perfil" *ngIf="ThemeService.currentTheme == 'gov' " class="font-35-rem" src='assets/images/theme/gov/icons-search.svg'></ion-icon>
           </div>
           <button title="Fechar" class="btn-no-color d-flex" (click)="closeSearch();showSearch=false;searchSubject=''" *ngIf="showSearch">
-            <ion-icon *ngIf="ThemeService.currentTheme == 'default' || ThemeService.currentTheme == 'doneIt' " class="font-35" name="restaurant-outline" src="assets/images/icons-search-close.svg"></ion-icon>
-            <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="font-35" name="restaurant-outline" src="assets/images/theme/gov/icons-search-close.svg"></ion-icon>
+            <ion-icon *ngIf="ThemeService.currentTheme == 'default' || ThemeService.currentTheme == 'doneIt' " class="font-35-rem" name="restaurant-outline" src="assets/images/icons-search-close.svg"></ion-icon>
+            <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="font-35-rem" name="restaurant-outline" src="assets/images/theme/gov/icons-search-close.svg"></ion-icon>
           </button>
 
           <div *ngIf="showSearch">
diff --git a/src/app/shared/gabinete-digital/diplomas-assinar/diplomas-assinar.page.scss b/src/app/shared/gabinete-digital/diplomas-assinar/diplomas-assinar.page.scss
index a536bfa80..a2c957e95 100644
--- a/src/app/shared/gabinete-digital/diplomas-assinar/diplomas-assinar.page.scss
+++ b/src/app/shared/gabinete-digital/diplomas-assinar/diplomas-assinar.page.scss
@@ -9,7 +9,7 @@
 .title{
   padding: 30px 20px 0 20px !important;
     font-family: Roboto;
-    font-size: 25px;
+    font-size: rem(25);
     color:#000;
     overflow: auto;
 
@@ -30,7 +30,7 @@
     border-bottom: 5px solid #42b9fe;
 
     .bottom-text{
-      font-size: 15px !important;
+      font-size: rem(15) !important;
       font-family: Roboto !important;
       color: #0d89d1 !important;
     }
@@ -41,7 +41,7 @@
     color:#000;
   }
 .item-list-small{
-    font-size: 11px;
+    font-size:  rem(11);
     overflow: hidden;
   }
   .ion-item-class{
@@ -80,12 +80,12 @@ ion-item{
   .div-content-expediente h3, .div-content-pendentes h3{
     margin: 0;
     padding: 0;
-    font-size: 14pt;
+    font-size: rem(19);
     width: 100%;
   }
   .div-icon{
     width: 10%;
-    font-size: 20px;
+    font-size: rem(20);
     float: left;
     color: #808080;
   }
@@ -95,20 +95,20 @@ ion-item{
 
   }
   .div-content-expediente p, .div-content-pendentes p{
-    font-size: 14pt;
+    font-size: rem(19);
     color: rgb(94, 92, 92);
     padding: 0;
     margin: 0;
   }
   .span-left{
       float: left;
-      font-size: 12px;
+      font-size: rem(12);
       padding-left: 18px;
   }
   .span-right{
     text-align: right;
     float: right;
-    font-size: 12px;
+    font-size: rem(12);
     padding-right: 18px;
 }
 
@@ -133,7 +133,7 @@ ion-item{
   width: 100%;
   float: left;
   font-family: Roboto;
-  font-size: 12pt;
+  font-size: rem(16);
   font-weight: 700;
   color: var(--title-text-color);
   padding-left: 3px;
@@ -146,17 +146,17 @@ ion-item{
   .exp-icon{
     width: fit-content;
     float: right;
-   /* font-size: 13px; */
+   /* font-size: rem(13); */
     margin: 0 !important;
     padding: 0 !important;
 
     ion-icon{
-      font-size: 12pt;
+      font-size: rem(16);
       color: #42b9fe;
       float: left;
     }
     label{
-      font-size: 10pt;
+      font-size: rem(13);
     }
   }
 }
@@ -165,7 +165,7 @@ ion-item{
 
 }
 .exp-middle-detail{
-  font-size: 12pt;
+  font-size: rem(16);
   width: 100%;
   overflow: auto;
 
@@ -176,7 +176,7 @@ ion-item{
     .label{
       border-radius: 15px;
       background: var(--label-bg-color);
-      /* font-size: 12px; */
+      /* font-size: rem(12); */
       float: right;
       padding: 2.5px 13.5px 2.5px 13.5px;
       color: #fff;
@@ -185,7 +185,7 @@ ion-item{
   .exp-date{
     width: auto;
     font-family: Roboto;
-    font-size: 10pt;
+    font-size: rem(13);
     font-weight: normal;
     font-stretch: normal;
     font-style: normal;
@@ -196,7 +196,7 @@ ion-item{
   }
 }
 .exp-bottom-detail{
-  font-size: 8pt;
+  font-size: rem(10);
   width: 100%;
   overflow: auto;
   padding-left: 3px;
@@ -204,7 +204,7 @@ ion-item{
   .exp-remetente{
     //width: 200px;
     font-family: Roboto;
-   /*  font-size: 13px; */
+   /*  font-size: rem(13); */
     font-weight: normal;
     color: #000000;
     float: left;
@@ -218,7 +218,7 @@ ion-item{
   overflow: auto;
 }
 .div-search{
-  font-size: 45px;
+  font-size: rem(45);
   float: left;
   margin: 0 0 0 10px
 }
@@ -232,7 +232,7 @@ ion-item{
   width: 100%;
 }
 .div-profile{
-  font-size: 45px;
+  font-size: rem(45);
   float: right;
   margin-right: 10px;
 }
diff --git a/src/app/shared/gabinete-digital/diplomas-gerar/diplomas-gerar.page.scss b/src/app/shared/gabinete-digital/diplomas-gerar/diplomas-gerar.page.scss
index 14a992c15..519f9804e 100644
--- a/src/app/shared/gabinete-digital/diplomas-gerar/diplomas-gerar.page.scss
+++ b/src/app/shared/gabinete-digital/diplomas-gerar/diplomas-gerar.page.scss
@@ -9,7 +9,7 @@
 .title{
   padding: 30px 20px 0 20px !important;
     font-family: Roboto;
-    font-size: 25px;
+    font-size: rem(25);
     color:#000;
     overflow: auto;
 
@@ -32,7 +32,7 @@
     border-bottom: 5px solid #42b9fe;
 
     .bottom-text{
-      font-size: 15px !important;
+      font-size: rem(15) !important;
       font-family: Roboto !important;
       color: #0d89d1 !important;
     }
@@ -43,7 +43,7 @@
     color:#000;
   }
 .item-list-small{
-    font-size: 11px;
+    font-size:  rem(11);
     overflow: hidden;
   }
   .ion-item-class{
@@ -82,12 +82,12 @@ ion-item{
   .div-content-expediente h3, .div-content-pendentes h3{
     margin: 0;
     padding: 0;
-    font-size: 14pt;
+    font-size: rem(19);
     width: 100%;
   }
   .div-icon{
     width: 10%;
-    font-size: 20px;
+    font-size: rem(20);
     float: left;
     color: #808080;
   }
@@ -97,20 +97,20 @@ ion-item{
 
   }
   .div-content-expediente p, .div-content-pendentes p{
-    font-size: 14pt;
+    font-size: rem(19);
     color: rgb(94, 92, 92);
     padding: 0;
     margin: 0;
   }
   .span-left{
       float: left;
-      font-size: 12px;
+      font-size: rem(12);
       padding-left: 18px;
   }
   .span-right{
     text-align: right;
     float: right;
-    font-size: 12px;
+    font-size: rem(12);
     padding-right: 18px;
 }
 
@@ -135,7 +135,7 @@ ion-item{
   width: 100%;
   float: left;
   font-family: Roboto;
-  font-size: 12pt;
+  font-size: rem(16);
   font-weight: 700;
   color: var(--title-text-color);
   padding-left: 3px;
@@ -148,17 +148,17 @@ ion-item{
   .exp-icon{
     width: fit-content;
     float: right;
-   /* font-size: 13px; */
+   /* font-size: rem(13); */
     margin: 0 !important;
     padding: 0 !important;
 
     ion-icon{
-      font-size: 12pt;
+      font-size: rem(16);
       color: #42b9fe;
       float: left;
     }
     label{
-      font-size: 10pt;
+      font-size: rem(13);
     }
   }
 }
@@ -167,7 +167,7 @@ ion-item{
 
 }
 .exp-middle-detail{
-  font-size: 12pt;
+  font-size: rem(16);
   width: 100%;
   overflow: auto;
 
@@ -178,7 +178,7 @@ ion-item{
     .label{
       border-radius: 15px;
       background: var(--label-bg-color);
-      /* font-size: 12px; */
+      /* font-size: rem(12); */
       float: right;
       padding: 2.5px 13.5px 2.5px 13.5px;
       color: #fff;
@@ -187,7 +187,7 @@ ion-item{
   .exp-date{
     width: auto;
     font-family: Roboto;
-    font-size: 10pt;
+    font-size: rem(13);
     font-weight: normal;
     font-stretch: normal;
     font-style: normal;
@@ -198,7 +198,7 @@ ion-item{
   }
 }
 .exp-bottom-detail{
-  font-size: 8pt;
+  font-size: rem(10);
   width: 100%;
   overflow: auto;
   padding-left: 3px;
@@ -206,7 +206,7 @@ ion-item{
   .exp-remetente{
     //width: 200px;
     font-family: Roboto;
-   /*  font-size: 13px; */
+   /*  font-size: rem(13); */
     font-weight: normal;
     color: #000000;
     float: left;
@@ -220,7 +220,7 @@ ion-item{
   overflow: auto;
 }
 .div-search{
-  font-size: 45px;
+  font-size: rem(45);
   float: left;
   margin: 0 0 0 10px
 }
@@ -234,7 +234,7 @@ ion-item{
   width: 100%;
 }
 .div-profile{
-  font-size: 45px;
+  font-size: rem(45);
   float: right;
   margin-right: 10px;
 }
diff --git a/src/app/shared/gabinete-digital/diplomas/diplomas.page.html b/src/app/shared/gabinete-digital/diplomas/diplomas.page.html
index 4ae88f85b..c0149f284 100644
--- a/src/app/shared/gabinete-digital/diplomas/diplomas.page.html
+++ b/src/app/shared/gabinete-digital/diplomas/diplomas.page.html
@@ -6,13 +6,13 @@
       <!-- <div>
         <div title="Pesquisa" *ngIf="!hideSearchBtn" class="mr-20 d-flex align-center cursor-pointer">
           <div (click)="openSearch();showSearch=true" *ngIf="!showSearch" class="d-flex">
-            <ion-icon title="Perfil" *ngIf="ThemeService.currentTheme == 'doneIt' " class="font-35" src="assets/images/theme/doneIt/icons-search.svg"></ion-icon>
-            <ion-icon title="Perfil" *ngIf="ThemeService.currentTheme == 'default' " class="font-35" src='assets/images/icons-search.svg'></ion-icon>
-            <ion-icon title="Perfil" *ngIf="ThemeService.currentTheme == 'gov' " class="font-35" src='assets/images/theme/gov/icons-search.svg'></ion-icon>
+            <ion-icon title="Perfil" *ngIf="ThemeService.currentTheme == 'doneIt' " class="font-35-rem" src="assets/images/theme/doneIt/icons-search.svg"></ion-icon>
+            <ion-icon title="Perfil" *ngIf="ThemeService.currentTheme == 'default' " class="font-35-rem" src='assets/images/icons-search.svg'></ion-icon>
+            <ion-icon title="Perfil" *ngIf="ThemeService.currentTheme == 'gov' " class="font-35-rem" src='assets/images/theme/gov/icons-search.svg'></ion-icon>
           </div>
           <button title="Fechar" class="btn-no-color d-flex" (click)="closeSearch();showSearch=false;searchSubject=''" *ngIf="showSearch">
-            <ion-icon *ngIf="ThemeService.currentTheme == 'default' || ThemeService.currentTheme == 'doneIt' " class="font-35" name="restaurant-outline" src="assets/images/icons-search-close.svg"></ion-icon>
-            <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="font-35" name="restaurant-outline" src="assets/images/theme/gov/icons-search-close.svg"></ion-icon>
+            <ion-icon *ngIf="ThemeService.currentTheme == 'default' || ThemeService.currentTheme == 'doneIt' " class="font-35-rem" name="restaurant-outline" src="assets/images/icons-search-close.svg"></ion-icon>
+            <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="font-35-rem" name="restaurant-outline" src="assets/images/theme/gov/icons-search-close.svg"></ion-icon>
           </button>
 
           <div *ngIf="showSearch">
diff --git a/src/app/shared/gabinete-digital/diplomas/diplomas.page.scss b/src/app/shared/gabinete-digital/diplomas/diplomas.page.scss
index b3fda1d0e..3f911c5ce 100644
--- a/src/app/shared/gabinete-digital/diplomas/diplomas.page.scss
+++ b/src/app/shared/gabinete-digital/diplomas/diplomas.page.scss
@@ -7,7 +7,7 @@
 .title{
   padding: 30px 20px 0 20px !important;
     font-family: Roboto;
-    font-size: 25px;
+    font-size: rem(25);
     color:#000;
     overflow: auto;
 
@@ -26,7 +26,7 @@
     color:#000;
 }
 .item-list-small{
-    font-size: 11px;
+    font-size:  rem(11);
     overflow: hidden;
   }
   .ion-item-class{
@@ -69,12 +69,12 @@ ion-item{
   .div-content-expediente h3, .div-content-pendentes h3{
     margin: 0;
     padding: 0;
-    font-size: 14pt;
+    font-size: rem(19);
     width: 100%;
   }
   .div-icon{
     width: 10%;
-    font-size: 20px;
+    font-size: rem(20);
     float: left;
     color: #808080;
   }
@@ -84,7 +84,7 @@ ion-item{
 
   }
   .div-content-expediente p, .div-content-pendentes p{
-    font-size: 14pt;
+    font-size: rem(19);
     color: rgb(94, 92, 92);
     padding: 0;
     margin: 0;
@@ -92,14 +92,14 @@ ion-item{
   .span-left{
       /* border: 1px solid red; */
       float: left;
-      font-size: 12px;
+      font-size: rem(12);
       padding-left: 18px;
   }
   .span-right{
     /* border: 1px solid blue; */
     text-align: right;
     float: right;
-    font-size: 12px;
+    font-size: rem(12);
     padding-right: 18px;
 }
 
@@ -124,7 +124,7 @@ ion-item{
   width: 100%;
   float: left;
   font-family: Roboto;
-  font-size: 12pt;
+  font-size: rem(16);
   font-weight: 700;
   color: var(--title-text-color);
   padding-left: 3px;
@@ -137,17 +137,17 @@ ion-item{
   .exp-icon{
     width: fit-content;
     float: right;
-   /* font-size: 13px; */
+   /* font-size: rem(13); */
     margin: 0 !important;
     padding: 0 !important;
 
     ion-icon{
-      font-size: 12pt;
+      font-size: rem(16);
       color: #42b9fe;
       float: left;
     }
     label{
-      font-size: 10pt;
+      font-size: rem(13);
     }
   }
 }
@@ -156,7 +156,7 @@ ion-item{
 
 }
 .exp-middle-detail{
-  font-size: 12pt;
+  font-size: rem(16);
   width: 100%;
   overflow: auto;
 
@@ -176,7 +176,7 @@ ion-item{
   .exp-date{
     width: auto;
     font-family: Roboto;
-    font-size: 10pt;
+    font-size: rem(13);
     font-weight: normal;
     font-stretch: normal;
     font-style: normal;
@@ -187,7 +187,7 @@ ion-item{
   }
 }
 .exp-bottom-detail{
-  font-size: 8pt;
+  font-size: rem(10);
   width: 100%;
   overflow: auto;
   padding-left: 3px;
@@ -195,7 +195,7 @@ ion-item{
   .exp-remetente{
     //width: 200px;
     font-family: Roboto;
-   /*  font-size: 13px; */
+   /*  font-size: rem(13); */
     font-weight: normal;
     color: #000000;
     float: left;
@@ -209,7 +209,7 @@ ion-item{
   overflow: auto;
 }
 .div-search{
-  font-size: 45px;
+  font-size: rem(45);
   float: left;
   margin: 0 0 0 10px
 }
@@ -223,7 +223,7 @@ ion-item{
   width: 100%;
 }
 .div-profile{
-  font-size: 45px;
+  font-size: rem(45);
   float: right;
   margin-right: 10px;
 }
diff --git a/src/app/shared/gabinete-digital/edit-event-to-approve/edit-event.page.scss b/src/app/shared/gabinete-digital/edit-event-to-approve/edit-event.page.scss
index 95a2a0199..74db31439 100644
--- a/src/app/shared/gabinete-digital/edit-event-to-approve/edit-event.page.scss
+++ b/src/app/shared/gabinete-digital/edit-event-to-approve/edit-event.page.scss
@@ -1,4 +1,4 @@
-
+@import '~src/function.scss';
 
 .title-content::after, .header-md::after{
   display: none;
@@ -28,12 +28,12 @@
     }
 
     .title{
-      font-size: 25px;
+      font-size: rem(25);
     }
 
   }
     .ion-item-container{
-        margin: 15px auto;
+        margin: rem(15) auto;
         border: 1px solid #ebebeb;
         border-radius: 5px;
         padding-left: 10px;
@@ -51,11 +51,11 @@
         margin: 0px auto;
       }
       .ion-icon-class{
-        width: 45px;
-        height: 45px;
+        width: rem(45);
+        height: rem(45);
         float: left;
         padding: 10px;
-        font-size: 25px;
+        font-size: rem(25);
       }
       ion-select{
         padding-left: 5px;
@@ -63,7 +63,7 @@
       }
       .ion-input-class{
         width: calc(100% - 45px);
-        height: 45px;
+        height: rem(45);
         border: 1px solid #ebebeb;
         border-radius: 5px;
         padding-left: 5px;
@@ -80,19 +80,19 @@
       
       }
       .add-people{
-        width: 45px;
+        width: rem(45);
         float: right;
         overflow: auto;
-        font-size: 25px;
-        height: 45px;
+        font-size: rem(25);
+        height: rem(45);
         display: flex;
       }
       .list-people-title{
-        /* font-size: 13px; */
+        /* font-size: rem(13); */
         color: #797979;
       }
       .attach-document{
-        font-size: 15px;
+        font-size: rem(15);
         color: var(--title-text-color);
         margin: 5px 5px 5px 10px;
         padding: 5px;
@@ -100,39 +100,39 @@
       }
       .attach-icon{
         width: 37px;
-        font-size: 35px;
+        font-size: rem(35);
         float: left;
       }
       .attach-title-item{
         width: 100%;
-        font-size: 15px;
+        font-size: rem(15);
         color:var(--title-text-color);
       }
       /* SPAN */
       .span-left{
         float: left;
-        font-size: 15x;
+        font-size: 15px;
       }
       .span-right{
       text-align: right;
       float: right;
-      font-size: 13px;
+      font-size: rem(13);
       }
       .container-footer{
           margin:0 auto;
           overflow: auto;
       }
       .button-cancel {
-          width: 170px;
-          height: 44px;
+          width: rem(170);
+          height: rem(44);
           border-radius: 22.5px;
           --background: #e0e9ee;
           --color: #061b52;
           margin:10px;
         }
         .button-save {
-          width: 170px;
-          height: 44px;
+          width: rem(170);
+          height: rem(44);
           border-radius: 22.5px;
           --background: #42b9fe;
           --color:#ffffff;
@@ -150,7 +150,7 @@
       /* Error Messages */
       .error{
         color:red;
-        font-size: 12px;
+        font-size: rem(12);
         font-weight: bold;
         padding-bottom: 20px;
       }
@@ -176,7 +176,7 @@
     align-items: center;
     padding: 0px 5px;
     color: white;
-    font-size: 9pt;
+    font-size: rem(12);
     font-weight: 500;
     height: 19px;
     -webkit-border-radius: 18px;
diff --git a/src/app/shared/gabinete-digital/events-to-approve/events-to-approve.page.html b/src/app/shared/gabinete-digital/events-to-approve/events-to-approve.page.html
index 190abf8b1..90b82bea2 100644
--- a/src/app/shared/gabinete-digital/events-to-approve/events-to-approve.page.html
+++ b/src/app/shared/gabinete-digital/events-to-approve/events-to-approve.page.html
@@ -9,13 +9,13 @@
         <!-- <div>
           <div title="Pesquisa" *ngIf="!hideSearchBtn" class="mr-20 d-flex align-center cursor-pointer">
             <div (click)="openSearch();showSearch=true" *ngIf="!showSearch" class="d-flex">
-              <ion-icon title="Perfil" *ngIf="ThemeService.currentTheme == 'doneIt' " class="font-35" src="assets/images/theme/doneIt/icons-search.svg"></ion-icon>
-              <ion-icon title="Perfil" *ngIf="ThemeService.currentTheme == 'default' " class="font-35" src='assets/images/icons-search.svg'></ion-icon>
-              <ion-icon title="Perfil" *ngIf="ThemeService.currentTheme == 'gov' " class="font-35" src='assets/images/theme/gov/icons-search.svg'></ion-icon>
+              <ion-icon title="Perfil" *ngIf="ThemeService.currentTheme == 'doneIt' " class="font-35-rem" src="assets/images/theme/doneIt/icons-search.svg"></ion-icon>
+              <ion-icon title="Perfil" *ngIf="ThemeService.currentTheme == 'default' " class="font-35-rem" src='assets/images/icons-search.svg'></ion-icon>
+              <ion-icon title="Perfil" *ngIf="ThemeService.currentTheme == 'gov' " class="font-35-rem" src='assets/images/theme/gov/icons-search.svg'></ion-icon>
             </div>
             <button title="Fechar" class="btn-no-color d-flex" (click)="closeSearch();showSearch=false;searchSubject=''" *ngIf="showSearch">
-              <ion-icon *ngIf="ThemeService.currentTheme == 'default' || ThemeService.currentTheme == 'doneIt' " class="font-35" name="restaurant-outline" src="assets/images/icons-search-close.svg"></ion-icon>
-              <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="font-35" name="restaurant-outline" src="assets/images/theme/gov/icons-search-close.svg"></ion-icon>
+              <ion-icon *ngIf="ThemeService.currentTheme == 'default' || ThemeService.currentTheme == 'doneIt' " class="font-35-rem" name="restaurant-outline" src="assets/images/icons-search-close.svg"></ion-icon>
+              <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="font-35-rem" name="restaurant-outline" src="assets/images/theme/gov/icons-search-close.svg"></ion-icon>
             </button>
   
             <div *ngIf="showSearch">
diff --git a/src/app/shared/gabinete-digital/events-to-approve/events-to-approve.page.scss b/src/app/shared/gabinete-digital/events-to-approve/events-to-approve.page.scss
index 1f6335094..9e8fa6246 100644
--- a/src/app/shared/gabinete-digital/events-to-approve/events-to-approve.page.scss
+++ b/src/app/shared/gabinete-digital/events-to-approve/events-to-approve.page.scss
@@ -6,14 +6,14 @@
   .title-icon{
     float: right;
     margin-right: 20px;
-    font-size: 30px;
+    font-size: rem(30);
     color: #42b9fe;
   }
 }
 .title{
   padding: 30px 20px 0 20px !important;
     font-family: Roboto;
-    font-size: 25px;
+    font-size: rem(25);
     color:#000;
     overflow: auto;
   }
@@ -56,7 +56,7 @@
     .approve-event-time p{
       width: 33px;
       font-family: Roboto;
-      font-size: 13px;
+      font-size: rem(13);
       font-weight: normal;
       font-stretch: normal;
       font-style: normal;
@@ -73,7 +73,7 @@
     .approve-event-detail .p{
       //width: 250px;
       font-family: Roboto;
-      font-size: 13px;
+      font-size: rem(13);
       font-weight: normal;
       font-stretch: normal;
       font-style: normal;
@@ -85,7 +85,7 @@
     }
     .approve-event-detail .h3{
       font-family: Roboto;
-      font-size: 15px;
+      font-size: rem(15);
       font-weight: bold;
       font-stretch: normal;
       font-style: normal;
@@ -118,7 +118,7 @@
   width: 100%;
   float: left;
   font-family: Roboto;
-  font-size: 12pt;
+  font-size: rem(16);
   font-weight: 700;
   color: var(--title-text-color);
   padding-left: 3px;
@@ -131,17 +131,17 @@
   .exp-icon{
     width: fit-content;
     float: right;
-   /* font-size: 13px; */
+   /* font-size: rem(13); */
     margin: 0 !important;
     padding: 0 !important;
 
     ion-icon{
-      font-size: 12pt;
+      font-size: rem(16);
       color: #42b9fe;
       float: left;
     }
     label{
-      font-size: 10pt;
+      font-size: rem(13);
     }
   }
 }
@@ -150,7 +150,7 @@
 
 }
 .exp-middle-detail{
-  font-size: 12pt;
+  font-size: rem(16);
   width: 100%;
   overflow: auto;
 
@@ -170,7 +170,7 @@
   .exp-date{
     width: auto;
     font-family: Roboto;
-    font-size: 10pt;
+    font-size: rem(13);
     font-weight: normal;
     font-stretch: normal;
     font-style: normal;
@@ -181,7 +181,7 @@
   }
 }
 .exp-bottom-detail{
-  font-size: 8pt;
+  font-size: rem(10);
   width: 100%;
   overflow: auto;
   padding-left: 3px;
@@ -189,7 +189,7 @@
   .exp-remetente{
     //width: 200px;
     font-family: Roboto;
-   /*  font-size: 13px; */
+   /*  font-size: rem(13); */
     font-weight: normal;
     color: #000000;
     float: left;
@@ -203,7 +203,7 @@
   overflow: auto;
 }
 .div-search{
-  font-size: 45px;
+  font-size: rem(45);
   float: left;
   margin: 0 0 0 10px
 }
@@ -217,7 +217,7 @@
   width: 100%;
 }
 .div-profile{
-  font-size: 45px;
+  font-size: rem(45);
   float: right;
   margin-right: 10px;
 }
@@ -239,14 +239,14 @@
   background-color: white;
   border-radius: 27.5px;
   border: solid 1px #ebebeb;
-  font-size: 14px;
+  font-size: rem(14);
   .icon{
     color: #797979;
     width: 41px;
     height: 41px;
     display: flex;
     justify-content: center;
-    font-size: 25px;
+    font-size: rem(25);
     align-items: center;
   }
   .input-text{
diff --git a/src/app/shared/gabinete-digital/expedientes-pr/expedientes-pr.page.html b/src/app/shared/gabinete-digital/expedientes-pr/expedientes-pr.page.html
index fef1aad23..3e207588e 100644
--- a/src/app/shared/gabinete-digital/expedientes-pr/expedientes-pr.page.html
+++ b/src/app/shared/gabinete-digital/expedientes-pr/expedientes-pr.page.html
@@ -8,13 +8,13 @@
       <!-- <div>
         <div title="Pesquisa" *ngIf="!hideSearchBtn" class="mr-20 d-flex align-center cursor-pointer">
           <div (click)="openSearch();showSearch=true" *ngIf="!showSearch" class="d-flex">
-            <ion-icon title="Perfil" *ngIf="ThemeService.currentTheme == 'doneIt' " class="font-35" src="assets/images/theme/doneIt/icons-search.svg"></ion-icon>
-            <ion-icon title="Perfil" *ngIf="ThemeService.currentTheme == 'default' " class="font-35" src='assets/images/icons-search.svg'></ion-icon>
-            <ion-icon title="Perfil" *ngIf="ThemeService.currentTheme == 'gov' " class="font-35" src='assets/images/theme/gov/icons-search.svg'></ion-icon>
+            <ion-icon title="Perfil" *ngIf="ThemeService.currentTheme == 'doneIt' " class="font-35-rem" src="assets/images/theme/doneIt/icons-search.svg"></ion-icon>
+            <ion-icon title="Perfil" *ngIf="ThemeService.currentTheme == 'default' " class="font-35-rem" src='assets/images/icons-search.svg'></ion-icon>
+            <ion-icon title="Perfil" *ngIf="ThemeService.currentTheme == 'gov' " class="font-35-rem" src='assets/images/theme/gov/icons-search.svg'></ion-icon>
           </div>
           <button title="Fechar" class="btn-no-color d-flex" (click)="closeSearch();showSearch=false;searchSubject=''" *ngIf="showSearch">
-            <ion-icon *ngIf="ThemeService.currentTheme == 'default' || ThemeService.currentTheme == 'doneIt' " class="font-35" name="restaurant-outline" src="assets/images/icons-search-close.svg"></ion-icon>
-            <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="font-35" name="restaurant-outline" src="assets/images/theme/gov/icons-search-close.svg"></ion-icon>
+            <ion-icon *ngIf="ThemeService.currentTheme == 'default' || ThemeService.currentTheme == 'doneIt' " class="font-35-rem" name="restaurant-outline" src="assets/images/icons-search-close.svg"></ion-icon>
+            <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="font-35-rem" name="restaurant-outline" src="assets/images/theme/gov/icons-search-close.svg"></ion-icon>
           </button>
 
           <div *ngIf="showSearch">
diff --git a/src/app/shared/gabinete-digital/expedientes-pr/expedientes-pr.page.scss b/src/app/shared/gabinete-digital/expedientes-pr/expedientes-pr.page.scss
index f7d121f38..dea40fd19 100644
--- a/src/app/shared/gabinete-digital/expedientes-pr/expedientes-pr.page.scss
+++ b/src/app/shared/gabinete-digital/expedientes-pr/expedientes-pr.page.scss
@@ -5,7 +5,7 @@
 }
 .title{
     font-family: Roboto;
-    font-size: 25px;
+    font-size: rem(25);
     color:#000;
     overflow: auto;
     padding: 30px 20px 0 20px !important;
@@ -56,7 +56,7 @@ ion-item{
   width: 100%;
   float: left;
   font-family: Roboto;
-  font-size: 12pt;
+  font-size: rem(16);
   font-weight: 700;
   color: var(--title-text-color);
   padding-left: 3px;
@@ -69,17 +69,17 @@ ion-item{
   .exp-icon{
     width: fit-content;
     float: right;
-    //font-size: 13px;
+    //font-size: rem(13);
     margin: 0 !important;
     padding: 0 !important;
 
     ion-icon{
-      font-size: 12pt;
+      font-size: rem(16);
       color: #42b9fe;
       float: left;
     }
     label{
-      font-size: 10pt;
+      font-size: rem(13);
     }
   }
 }
@@ -88,7 +88,7 @@ ion-item{
 
 }
 .exp-middle-detail{
-  font-size: 12pt;
+  font-size: rem(16);
   width: 100%;
   overflow: auto;
 
@@ -108,7 +108,7 @@ ion-item{
   .exp-date{
     width: auto;
     font-family: Roboto;
-    font-size: 10pt;
+    font-size: rem(13);
     font-weight: normal;
     font-stretch: normal;
     font-style: normal;
@@ -119,7 +119,7 @@ ion-item{
   }
 }
 .exp-bottom-detail{
-  font-size: 8pt;
+  font-size: rem(10);
   width: 100%;
   overflow: auto;
   padding-left: 3px;
@@ -127,7 +127,7 @@ ion-item{
   .exp-remetente{
     //width: 200px;
     font-family: Roboto;
-    //font-size: 13px;
+    //font-size: rem(13);
     font-weight: normal;
     color: #000000;
     float: left;
@@ -141,7 +141,7 @@ ion-item{
   overflow: auto;
 }
 .div-search{
-  font-size: 45px;
+  font-size: rem(45);
   float: left;
   margin: 0 0 0 10px
 }
@@ -155,7 +155,7 @@ ion-item{
   width: 100%;
 }
 .div-profile{
-  font-size: 45px;
+  font-size: rem(45);
   float: right;
   margin-right: 10px;
 }
@@ -168,14 +168,14 @@ ion-item{
   background-color: white;
   border-radius: 27.5px;
   border: solid 1px #ebebeb;
-  font-size: 14px;
+  font-size: rem(14);
   .icon{
     color: #797979;
     width: 41px;
     height: 41px;
     display: flex;
     justify-content: center;
-    font-size: 25px;
+    font-size: rem(25);
     align-items: center;
   }
   .input-text{
diff --git a/src/app/shared/gabinete-digital/expedients/expedients.page.html b/src/app/shared/gabinete-digital/expedients/expedients.page.html
index 2dbd25a70..794275a5f 100644
--- a/src/app/shared/gabinete-digital/expedients/expedients.page.html
+++ b/src/app/shared/gabinete-digital/expedients/expedients.page.html
@@ -7,13 +7,13 @@
       <div>
         <div title="Pesquisa" *ngIf="!hideSearchBtn" class="mr-20 d-flex align-center cursor-pointer">
           <div (click)="openSearch();showSearch=true" *ngIf="!showSearch" class="d-flex">
-            <ion-icon title="Perfil" *ngIf="ThemeService.currentTheme == 'doneIt' " class="font-35" src="assets/images/theme/doneIt/icons-search.svg"></ion-icon>
-            <ion-icon title="Perfil" *ngIf="ThemeService.currentTheme == 'default' " class="font-35" src='assets/images/icons-search.svg'></ion-icon>
-            <ion-icon title="Perfil" *ngIf="ThemeService.currentTheme == 'gov' " class="font-35" src='assets/images/theme/gov/icons-search.svg'></ion-icon>
+            <ion-icon title="Perfil" *ngIf="ThemeService.currentTheme == 'doneIt' " class="font-35-rem" src="assets/images/theme/doneIt/icons-search.svg"></ion-icon>
+            <ion-icon title="Perfil" *ngIf="ThemeService.currentTheme == 'default' " class="font-35-rem" src='assets/images/icons-search.svg'></ion-icon>
+            <ion-icon title="Perfil" *ngIf="ThemeService.currentTheme == 'gov' " class="font-35-rem" src='assets/images/theme/gov/icons-search.svg'></ion-icon>
           </div>
           <button title="Fechar" class="btn-no-color d-flex" (click)="closeSearch();showSearch=false;searchSubject=''" *ngIf="showSearch">
-            <ion-icon *ngIf="ThemeService.currentTheme == 'default' || ThemeService.currentTheme == 'doneIt' " class="font-35" name="restaurant-outline" src="assets/images/icons-search-close.svg"></ion-icon>
-            <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="font-35" name="restaurant-outline" src="assets/images/theme/gov/icons-search-close.svg"></ion-icon>
+            <ion-icon *ngIf="ThemeService.currentTheme == 'default' || ThemeService.currentTheme == 'doneIt' " class="font-35-rem" name="restaurant-outline" src="assets/images/icons-search-close.svg"></ion-icon>
+            <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="font-35-rem" name="restaurant-outline" src="assets/images/theme/gov/icons-search-close.svg"></ion-icon>
           </button>
 
           <div *ngIf="showSearch">
diff --git a/src/app/shared/gabinete-digital/expedients/expedients.page.scss b/src/app/shared/gabinete-digital/expedients/expedients.page.scss
index 1a528fd2b..3274bc526 100644
--- a/src/app/shared/gabinete-digital/expedients/expedients.page.scss
+++ b/src/app/shared/gabinete-digital/expedients/expedients.page.scss
@@ -5,7 +5,7 @@
 }
 .title{
     font-family: Roboto;
-    font-size: 25px;
+    font-size: rem(25);
     color:#000;
     overflow: auto;
     padding: 30px 20px 0 20px !important;
@@ -56,7 +56,7 @@ ion-item{
   width: 100%;
   float: left;
   font-family: Roboto;
-  font-size: 12pt;
+  font-size: rem(16);
   font-weight: 700;
   color: var(--title-text-color);
   padding-left: 3px;
@@ -69,17 +69,17 @@ ion-item{
   .exp-icon{
     width: fit-content;
     float: right;
-    //font-size: 13px;
+    //font-size: rem(13);
     margin: 0 !important;
     padding: 0 !important;
 
     ion-icon{
-      font-size: 12pt;
+      font-size: rem(16);
       color: #42b9fe;
       float: left;
     }
     label{
-      font-size: 10pt;
+      font-size: rem(13);
     }
   }
 }
@@ -88,7 +88,7 @@ ion-item{
 
 }
 .exp-middle-detail{
-  font-size: 12pt;
+  font-size: rem(16);
   width: 100%;
   overflow: auto;
 
@@ -108,7 +108,7 @@ ion-item{
   .exp-date{
     width: auto;
     font-family: Roboto;
-    font-size: 10pt;
+    font-size: rem(13);
     font-weight: normal;
     font-stretch: normal;
     font-style: normal;
@@ -119,7 +119,7 @@ ion-item{
   }
 }
 .exp-bottom-detail{
-  font-size: 8pt;
+  font-size: rem(10);
   width: 100%;
   overflow: auto;
   padding-left: 3px;
@@ -127,7 +127,7 @@ ion-item{
   .exp-remetente{
     //width: 200px;
     font-family: Roboto;
-    //font-size: 13px;
+    //font-size: rem(13);
     font-weight: normal;
     color: #000000;
     float: left;
@@ -141,7 +141,7 @@ ion-item{
   overflow: auto;
 }
 .div-search{
-  font-size: 45px;
+  font-size: rem(45);
   float: left;
   margin: 0 0 0 10px
 }
@@ -155,7 +155,7 @@ ion-item{
   width: 100%;
 }
 .div-profile{
-  font-size: 45px;
+  font-size: rem(45);
   float: right;
   margin-right: 10px;
 }
@@ -167,7 +167,7 @@ ion-item{
   background-color: white;
   border-radius: 27.5px;
   border: solid 1px #ebebeb;
-  font-size: 14px;
+  font-size: rem(14);
 
   input {
     padding: 0px !important;
@@ -175,11 +175,11 @@ ion-item{
   }
   .icon{
     color: #797979;
-    width: 35px;
-    height: 35px;
+    width: rem(35);
+    height: rem(35);
     display: flex;
     justify-content: center;
-    font-size: 25px;
+    font-size: rem(25);
     align-items: center;
   }
   .input-text{
diff --git a/src/app/shared/gabinete-digital/generic/task-details/task-details.page.html b/src/app/shared/gabinete-digital/generic/task-details/task-details.page.html
index 5a45db22d..577c06805 100644
--- a/src/app/shared/gabinete-digital/generic/task-details/task-details.page.html
+++ b/src/app/shared/gabinete-digital/generic/task-details/task-details.page.html
@@ -1,7 +1,7 @@
 <ion-header *ngIf="task" class="ion-no-border">
   <div class="main-header">
     <div class="title-content width-100 d-flex justify-space-between align-center">
-      <div class=" btn-dismiss font-30 cursor-pointer" (click)="goBack.emit()" defaultHref="#">
+      <div class=" btn-dismiss font-30-rem cursor-pointer" (click)="goBack.emit()" defaultHref="#">
         <ion-icon  *ngIf="ThemeService.currentTheme == 'default' " slot="end" src='assets/images/icons-arrow-arrow-left.svg'></ion-icon>
         <ion-icon  *ngIf="ThemeService.currentTheme == 'gov' " slot="end" src='assets/images/theme/gov/icons-calendar-arrow-left.svg'></ion-icon>
       </div>
@@ -33,7 +33,7 @@
 <ion-content>
   <div *ngIf="task" class="overflow-y-auto height-100">
     <div class="middle-content">
-      <h5 *ngIf="intervenientes">Intervenientes</h5>
+      <h5 class="font-17-rem" *ngIf="intervenientes">Intervenientes</h5>
       <ion-item class="ion-no-margin ion-no-padding">
         <ion-label>
           <div *ngFor="let interveniente of intervenientes">
@@ -42,7 +42,7 @@
         </ion-label>
       </ion-item>
       <div *ngIf="cc.length > 0">
-        <h5>Com conhecimento</h5>
+        <h5 class="font-17-rem">Com conhecimento</h5>
         <ion-item class="ion-no-margin ion-no-padding">
           <ion-label>
             <div *ngFor="let c of cc">
@@ -52,7 +52,7 @@
         </ion-item>
       </div>
       <div *ngIf="fulltask.workflowInstanceDataFields.TaskMessage">
-        <h5>Detalhes</h5>
+        <h5 class="font-17-rem">Detalhes</h5>
         <ion-item class="ion-no-margin ion-no-padding">
           <pre class="width-100 text">{{ fulltask.workflowInstanceDataFields.TaskMessage }} </pre>
         </ion-item>
@@ -60,7 +60,7 @@
     </div>
     <div class="bottom-content width-100">
       <ion-list>
-        <h5>Documentos Anexados</h5>
+        <h5 class="font-17-rem">Documentos Anexados</h5>
         <ion-item class="ion-no-margin ion-no-padding cursor-pointer" *ngFor="let Document of fulltask.Documents">
           <ion-label class="d-block" (click)="viewDocument.emit(Document.DocId)">
             <p class="attach-title-item">{{ Document.Assunto || "Sem assunto" }}<span class="span-right color-red btn-size"><ion-icon hidden name="close"></ion-icon></span></p>
diff --git a/src/app/shared/gabinete-digital/generic/task-details/task-details.page.scss b/src/app/shared/gabinete-digital/generic/task-details/task-details.page.scss
index 1a57e1a6b..57851f3b0 100644
--- a/src/app/shared/gabinete-digital/generic/task-details/task-details.page.scss
+++ b/src/app/shared/gabinete-digital/generic/task-details/task-details.page.scss
@@ -14,7 +14,7 @@
   color:#d30a0a !important;
 }
 .btn-size{
-  font-size: 18px !important;
+  font-size: rem(18) !important;
 }
 .main-header{
   display: flex;
@@ -31,14 +31,14 @@
     .title{
       width: fit-content;
       height: auto;
-      font-size: 25px;
+      font-size: rem(25);
       overflow: auto;
       float: left;
       padding-left: 5px;
     }
     .div-icon{
       width: 40px !important;
-      font-size: 35px !important;
+      font-size: rem(35) !important;
       text-align: start !important;
       padding: 1px;
     }
@@ -55,7 +55,7 @@ ion-button{
 .upper-content{
   font-family: Roboto;
   margin-left: 41px;
-  font-size: 18px;
+  font-size: rem(18);
 
   .label{
       border-radius: 20px;
@@ -63,13 +63,14 @@ ion-button{
       float: right;
       padding: 5px 13.5px 5px 13.5px;
       color: #fff;
+      font-size: rem(14);
   }
 
   .button-calendar-type ion-button{
-    height: 25px;
+    height: rem(25);
   }
   .content-details{
-    font-size: 17px;
+    font-size: rem(17);
     .date{
       color: #797979;
     }
@@ -77,7 +78,7 @@ ion-button{
 }
 .middle-conten{
  .middle-content p{
-    font-size: 16px;
+    font-size: rem(16);
   }
 }
 .bottom-content{
@@ -85,11 +86,11 @@ ion-button{
   margin: 0 auto;
 
   .bottom-content h3{
-    font-size: 16px;
+    font-size: rem(16);
     margin: 0 0 0 10px;
   }
   .attach-document{
-    font-size: 15px;
+    font-size: rem(15);
     color: var(--title-text-color);
     margin: 5px 5px 5px 10px;
     padding: 5px;
@@ -97,11 +98,11 @@ ion-button{
   }
   .attach-icon{
     width: 37px;
-    font-size: 35px;
+    font-size: rem(35);
     float: left;
   }
   .attach-title-item{
-    font-size: 18px;
+    font-size: rem(18);
     width: 100%;
     color:#0d89d1;
     padding-bottom: 5px;
@@ -109,12 +110,12 @@ ion-button{
   /* SPAN */
   .span-left{
     float: left;
-    font-size: 15x;
+    font-size: rem(15);
   }
   .span-right{
   text-align: right;
   float: right;
-  font-size: 13px;
+  font-size: rem(13);
   }
 }
 .aside-right{
@@ -128,7 +129,7 @@ ion-button{
     .arrow-right-icon{
         width: 37px;
         float: right;
-        font-size: 35px;
+        font-size: rem(35);
         overflow: hidden;
     }
   }
@@ -139,7 +140,7 @@ ion-button{
 
     .btn-ok, .btn-cancel, .btn-delete{
       height: auto !important;
-      font-size: 16px !important;
+      font-size: rem(16) !important;
       width: 100% !important;
       margin-bottom: 10px !important;
       padding: 15px !important;
diff --git a/src/app/shared/gabinete-digital/generic/task-list-header/task-list-header.page.html b/src/app/shared/gabinete-digital/generic/task-list-header/task-list-header.page.html
index 43712a0bb..77fc2fc27 100644
--- a/src/app/shared/gabinete-digital/generic/task-list-header/task-list-header.page.html
+++ b/src/app/shared/gabinete-digital/generic/task-list-header/task-list-header.page.html
@@ -14,13 +14,13 @@
       <!-- <div>
         <div title="Pesquisa" *ngIf="!hideSearchBtn" class="mr-20 d-flex align-center cursor-pointer">
           <div (click)="openSearch();showSearch=true" *ngIf="!showSearch" class="d-flex">
-            <ion-icon title="Perfil" *ngIf="ThemeService.currentTheme == 'doneIt' " class="font-35" src="assets/images/theme/doneIt/icons-search.svg"></ion-icon>
-            <ion-icon title="Perfil" *ngIf="ThemeService.currentTheme == 'default' " class="font-35" src='assets/images/icons-search.svg'></ion-icon>
-            <ion-icon title="Perfil" *ngIf="ThemeService.currentTheme == 'gov' " class="font-35" src='assets/images/theme/gov/icons-search.svg'></ion-icon>
+            <ion-icon title="Perfil" *ngIf="ThemeService.currentTheme == 'doneIt' " class="font-35-rem" src="assets/images/theme/doneIt/icons-search.svg"></ion-icon>
+            <ion-icon title="Perfil" *ngIf="ThemeService.currentTheme == 'default' " class="font-35-rem" src='assets/images/icons-search.svg'></ion-icon>
+            <ion-icon title="Perfil" *ngIf="ThemeService.currentTheme == 'gov' " class="font-35-rem" src='assets/images/theme/gov/icons-search.svg'></ion-icon>
           </div>
           <button title="Fechar" class="btn-no-color d-flex" (click)="closeSearch();showSearch=false;searchSubject=''" *ngIf="showSearch">
-            <ion-icon *ngIf="ThemeService.currentTheme == 'default' || ThemeService.currentTheme == 'doneIt' " class="font-35" name="restaurant-outline" src="assets/images/icons-search-close.svg"></ion-icon>
-            <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="font-35" name="restaurant-outline" src="assets/images/theme/gov/icons-search-close.svg"></ion-icon>
+            <ion-icon *ngIf="ThemeService.currentTheme == 'default' || ThemeService.currentTheme == 'doneIt' " class="font-35-rem" name="restaurant-outline" src="assets/images/icons-search-close.svg"></ion-icon>
+            <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="font-35-rem" name="restaurant-outline" src="assets/images/theme/gov/icons-search-close.svg"></ion-icon>
           </button>
 
           <div *ngIf="showSearch">
diff --git a/src/app/shared/gabinete-digital/generic/task-list-header/task-list-header.page.scss b/src/app/shared/gabinete-digital/generic/task-list-header/task-list-header.page.scss
index 98750f943..2d109f16c 100644
--- a/src/app/shared/gabinete-digital/generic/task-list-header/task-list-header.page.scss
+++ b/src/app/shared/gabinete-digital/generic/task-list-header/task-list-header.page.scss
@@ -1,17 +1,19 @@
-.main-header{
-    font-family: Roboto;
-    font-size: 25px;
-    color:#000;
-    overflow: auto;
-    padding: 30px 20px 0 20px !important;
-    margin: 0;
+@import '~src/function.scss';
 
-    .thetitle{
-      width: fit-content;
-      float: left;
-    }
-    .theicon{
-      width: fit-content;
-      float: right;
-    }
+.main-header {
+  font-family: Roboto;
+  font-size: rem(25);
+  color:#000;
+  overflow: auto;
+  padding: 30px 20px 0 20px !important;
+  margin: 0;
+
+  .thetitle{
+    width: fit-content;
+    float: left;
+  }
+  .theicon{
+    width: fit-content;
+    float: right;
+  }
 }
\ No newline at end of file
diff --git a/src/app/shared/gabinete-digital/generic/task-list/task-list.page.scss b/src/app/shared/gabinete-digital/generic/task-list/task-list.page.scss
index fcf4c7c13..ee3d4cb19 100644
--- a/src/app/shared/gabinete-digital/generic/task-list/task-list.page.scss
+++ b/src/app/shared/gabinete-digital/generic/task-list/task-list.page.scss
@@ -1,3 +1,4 @@
+@import '~src/function.scss';
 
 /* New CSS */
 .expediente{
@@ -19,7 +20,7 @@
     width: 100%;
     float: left;
     font-family: Roboto;
-    font-size: 12pt;
+    font-size: rem(16);
     font-weight: 700;
     color: var(--title-text-color);
     padding-left: 3px;
@@ -32,17 +33,17 @@
     .exp-icon{
       width: fit-content;
       float: right;
-     /* font-size: 13px; */
+     /* font-size: rem(13); */
       margin: 0 !important;
       padding: 0 !important;
   
       ion-icon{
-        font-size: 12pt;
+        font-size: rem(16);
         color: #42b9fe;
         float: left;
       }
       label{
-        font-size: 10pt;
+        font-size: rem(13);
       }
     }
   }
@@ -51,7 +52,7 @@
   
   }
   .exp-middle-detail{
-    font-size: 12pt;
+    font-size: rem(16);
     width: 100%;
     overflow: auto;
   
@@ -62,7 +63,7 @@
       .label{
         border-radius: 15px;
         background: var(--label-bg-color);
-        /* font-size: 12px; */
+        /* font-size: rem(12); */
         float: right;
         padding: 2.5px 13.5px 2.5px 13.5px;
         color: #fff;
@@ -71,7 +72,7 @@
     .exp-date{
       width: auto;
       font-family: Roboto;
-      font-size: 10pt;
+      font-size: rem(13);
       font-weight: normal;
       font-stretch: normal;
       font-style: normal;
@@ -82,7 +83,7 @@
     }
   }
   .exp-bottom-detail{
-    font-size: 8pt;
+    font-size: rem(10);
     width: 100%;
     overflow: auto;
     padding-left: 3px;
@@ -90,7 +91,7 @@
     .exp-remetente{
       //width: 200px;
       font-family: Roboto;
-     /*  font-size: 13px; */
+     /*  font-size: rem(13); */
       font-weight: normal;
       color: #000000;
       float: left;
@@ -104,7 +105,7 @@
     overflow: auto;
   }
   .div-search{
-    font-size: 45px;
+    font-size: rem(45);
     float: left;
     margin: 0 0 0 10px
   }
@@ -118,7 +119,7 @@
     width: 100%;
   }
   .div-profile{
-    font-size: 45px;
+    font-size: rem(45);
     float: right;
     margin-right: 10px;
   }
\ No newline at end of file
diff --git a/src/app/shared/gabinete-digital/pedidos/pedidos.page.html b/src/app/shared/gabinete-digital/pedidos/pedidos.page.html
index 14bd190d1..5e5564001 100644
--- a/src/app/shared/gabinete-digital/pedidos/pedidos.page.html
+++ b/src/app/shared/gabinete-digital/pedidos/pedidos.page.html
@@ -8,13 +8,13 @@
       <!-- <div>
         <div title="Pesquisa" *ngIf="!hideSearchBtn" class="mr-20 d-flex align-center cursor-pointer">
           <div (click)="openSearch();showSearch=true" *ngIf="!showSearch" class="d-flex">
-            <ion-icon title="Perfil" *ngIf="ThemeService.currentTheme == 'doneIt' " class="font-35" src="assets/images/theme/doneIt/icons-search.svg"></ion-icon>
-            <ion-icon title="Perfil" *ngIf="ThemeService.currentTheme == 'default' " class="font-35" src='assets/images/icons-search.svg'></ion-icon>
-            <ion-icon title="Perfil" *ngIf="ThemeService.currentTheme == 'gov' " class="font-35" src='assets/images/theme/gov/icons-search.svg'></ion-icon>
+            <ion-icon title="Perfil" *ngIf="ThemeService.currentTheme == 'doneIt' " class="font-35-rem" src="assets/images/theme/doneIt/icons-search.svg"></ion-icon>
+            <ion-icon title="Perfil" *ngIf="ThemeService.currentTheme == 'default' " class="font-35-rem" src='assets/images/icons-search.svg'></ion-icon>
+            <ion-icon title="Perfil" *ngIf="ThemeService.currentTheme == 'gov' " class="font-35-rem" src='assets/images/theme/gov/icons-search.svg'></ion-icon>
           </div>
           <button title="Fechar" class="btn-no-color d-flex" (click)="closeSearch();showSearch=false;searchSubject=''" *ngIf="showSearch">
-            <ion-icon *ngIf="ThemeService.currentTheme == 'default' || ThemeService.currentTheme == 'doneIt' " class="font-35" name="restaurant-outline" src="assets/images/icons-search-close.svg"></ion-icon>
-            <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="font-35" name="restaurant-outline" src="assets/images/theme/gov/icons-search-close.svg"></ion-icon>
+            <ion-icon *ngIf="ThemeService.currentTheme == 'default' || ThemeService.currentTheme == 'doneIt' " class="font-35-rem" name="restaurant-outline" src="assets/images/icons-search-close.svg"></ion-icon>
+            <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="font-35-rem" name="restaurant-outline" src="assets/images/theme/gov/icons-search-close.svg"></ion-icon>
           </button>
 
           <div *ngIf="showSearch">
diff --git a/src/app/shared/gabinete-digital/pedidos/pedidos.page.scss b/src/app/shared/gabinete-digital/pedidos/pedidos.page.scss
index 32512749d..f5dcb9f2b 100644
--- a/src/app/shared/gabinete-digital/pedidos/pedidos.page.scss
+++ b/src/app/shared/gabinete-digital/pedidos/pedidos.page.scss
@@ -7,7 +7,7 @@
 .title{
   padding: 30px 20px 0 20px !important;
     font-family: Roboto;
-    font-size: 25px;
+    font-size: rem(25);
     color:#000;
     overflow: auto;
 
@@ -27,7 +27,7 @@
     color:#000;
   }
 .item-list-small{
-    font-size: 11px;
+    font-size:  rem(11);
     overflow: hidden;
   }
   .ion-item-class{
@@ -70,12 +70,12 @@ ion-item{
   .div-content-expediente h3, .div-content-pendentes h3{
     margin: 0;
     padding: 0;
-    font-size: 14pt;
+    font-size: rem(19);
     width: 100%;
   }
   .div-icon{
     width: 10%;
-    font-size: 20px;
+    font-size: rem(20);
     float: left;
     color: #808080;
   }
@@ -85,7 +85,7 @@ ion-item{
 
   }
   .div-content-expediente p, .div-content-pendentes p{
-    font-size: 14pt;
+    font-size: rem(19);
     color: rgb(94, 92, 92);
     padding: 0;
     margin: 0;
@@ -93,14 +93,14 @@ ion-item{
   .span-left{
       /* border: 1px solid red; */
       float: left;
-      font-size: 12px;
+      font-size: rem(12);
       padding-left: 18px;
   }
   .span-right{
     /* border: 1px solid blue; */
     text-align: right;
     float: right;
-    font-size: 12px;
+    font-size: rem(12);
     padding-right: 18px;
 }
 /* New CSS */
@@ -123,7 +123,7 @@ ion-item{
   width: 100%;
   float: left;
   font-family: Roboto;
-  font-size: 12pt;
+  font-size: rem(16);
   font-weight: 700;
   color: var(--title-text-color);
   padding-left: 3px;
@@ -136,17 +136,17 @@ ion-item{
   .exp-icon{
     width: fit-content;
     float: right;
-   /* font-size: 13px; */
+   /* font-size: rem(13); */
     margin: 0 !important;
     padding: 0 !important;
 
     ion-icon{
-      font-size: 12pt;
+      font-size: rem(16);
       color: #42b9fe;
       float: left;
     }
     label{
-      font-size: 10pt;
+      font-size: rem(13);
     }
   }
 }
@@ -155,7 +155,7 @@ ion-item{
 
 }
 .exp-middle-detail{
-  font-size: 12pt;
+  font-size: rem(16);
   width: 100%;
   overflow: auto;
 
@@ -175,7 +175,7 @@ ion-item{
   .exp-date{
     width: auto;
     font-family: Roboto;
-    font-size: 10pt;
+    font-size: rem(13);
     font-weight: normal;
     font-stretch: normal;
     font-style: normal;
@@ -186,7 +186,7 @@ ion-item{
   }
 }
 .exp-bottom-detail{
-  font-size: 8pt;
+  font-size: rem(10);
   width: 100%;
   overflow: auto;
   padding-left: 3px;
@@ -194,7 +194,7 @@ ion-item{
   .exp-remetente{
     //width: 200px;
     font-family: Roboto;
-   /*  font-size: 13px; */
+   /*  font-size: rem(13); */
     font-weight: normal;
     color: #000000;
     float: left;
@@ -208,7 +208,7 @@ ion-item{
   overflow: auto;
 }
 .div-search{
-  font-size: 45px;
+  font-size: rem(45);
   float: left;
   margin: 0 0 0 10px
 }
@@ -222,7 +222,7 @@ ion-item{
   width: 100%;
 }
 .div-profile{
-  font-size: 45px;
+  font-size: rem(45);
   float: right;
   margin-right: 10px;
 }
@@ -242,14 +242,14 @@ ion-item{
   background-color: white;
   border-radius: 27.5px;
   border: solid 1px #ebebeb;
-  font-size: 14px;
+  font-size: rem(14);
   .icon{
     color: #797979;
     width: 41px;
     height: 41px;
     display: flex;
     justify-content: center;
-    font-size: 25px;
+    font-size: rem(25);
     align-items: center;
   }
   .input-text{
diff --git a/src/app/shared/gabinete-digital/pendentes/pendentes.page.html b/src/app/shared/gabinete-digital/pendentes/pendentes.page.html
index b124f2e04..c9ac728e8 100644
--- a/src/app/shared/gabinete-digital/pendentes/pendentes.page.html
+++ b/src/app/shared/gabinete-digital/pendentes/pendentes.page.html
@@ -8,13 +8,13 @@
       <!-- <div>
         <div title="Pesquisa" *ngIf="!hideSearchBtn" class="mr-20 d-flex align-center cursor-pointer">
           <div (click)="openSearch();showSearch=true" *ngIf="!showSearch" class="d-flex">
-            <ion-icon title="Perfil" *ngIf="ThemeService.currentTheme == 'doneIt' " class="font-35" src="assets/images/theme/doneIt/icons-search.svg"></ion-icon>
-            <ion-icon title="Perfil" *ngIf="ThemeService.currentTheme == 'default' " class="font-35" src='assets/images/icons-search.svg'></ion-icon>
-            <ion-icon title="Perfil" *ngIf="ThemeService.currentTheme == 'gov' " class="font-35" src='assets/images/theme/gov/icons-search.svg'></ion-icon>
+            <ion-icon title="Perfil" *ngIf="ThemeService.currentTheme == 'doneIt' " class="font-35-rem" src="assets/images/theme/doneIt/icons-search.svg"></ion-icon>
+            <ion-icon title="Perfil" *ngIf="ThemeService.currentTheme == 'default' " class="font-35-rem" src='assets/images/icons-search.svg'></ion-icon>
+            <ion-icon title="Perfil" *ngIf="ThemeService.currentTheme == 'gov' " class="font-35-rem" src='assets/images/theme/gov/icons-search.svg'></ion-icon>
           </div>
           <button title="Fechar" class="btn-no-color d-flex" (click)="closeSearch();showSearch=false;searchSubject=''" *ngIf="showSearch">
-            <ion-icon *ngIf="ThemeService.currentTheme == 'default' || ThemeService.currentTheme == 'doneIt' " class="font-35" name="restaurant-outline" src="assets/images/icons-search-close.svg"></ion-icon>
-            <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="font-35" name="restaurant-outline" src="assets/images/theme/gov/icons-search-close.svg"></ion-icon>
+            <ion-icon *ngIf="ThemeService.currentTheme == 'default' || ThemeService.currentTheme == 'doneIt' " class="font-35-rem" name="restaurant-outline" src="assets/images/icons-search-close.svg"></ion-icon>
+            <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="font-35-rem" name="restaurant-outline" src="assets/images/theme/gov/icons-search-close.svg"></ion-icon>
           </button>
 
           <div *ngIf="showSearch">
diff --git a/src/app/shared/gabinete-digital/pendentes/pendentes.page.scss b/src/app/shared/gabinete-digital/pendentes/pendentes.page.scss
index ee13c9244..1d652537a 100644
--- a/src/app/shared/gabinete-digital/pendentes/pendentes.page.scss
+++ b/src/app/shared/gabinete-digital/pendentes/pendentes.page.scss
@@ -7,7 +7,7 @@
 .title{
   padding: 30px 20px 0 20px !important;
     font-family: Roboto;
-    font-size: 25px;
+    font-size: rem(25);
     color:#000;
     overflow: auto;
 
@@ -21,7 +21,7 @@
     }
   }
 .item-list-small{
-    font-size: 11px;
+    font-size:  rem(11);
     overflow: hidden;
   }
   .ion-item-class{
@@ -64,12 +64,12 @@ ion-item{
   .div-content-expediente h3, .div-content-pendentes h3{
     margin: 0;
     padding: 0;
-    font-size: 14pt;
+    font-size: rem(19);
     width: 100%;
   }
   .div-icon{
     width: 10%;
-    font-size: 20px;
+    font-size: rem(20);
     float: left;
     color: #808080;
   }
@@ -79,7 +79,7 @@ ion-item{
 
   }
   .div-content-expediente p, .div-content-pendentes p{
-    font-size: 14pt;
+    font-size: rem(19);
     color: rgb(94, 92, 92);
     padding: 0;
     margin: 0;
@@ -87,14 +87,14 @@ ion-item{
   .span-left{
       /* border: 1px solid red; */
       float: left;
-      font-size: 12px;
+      font-size: rem(12);
       padding-left: 18px;
   }
   .span-right{
     /* border: 1px solid blue; */
     text-align: right;
     float: right;
-    font-size: 12px;
+    font-size: rem(12);
     padding-right: 18px;
 }
 
@@ -118,7 +118,7 @@ ion-item{
   width: 100%;
   float: left;
   font-family: Roboto;
-  font-size: 12pt;
+  font-size: rem(16);
   font-weight: 700;
   color: var(--title-text-color);
   padding-left: 3px;
@@ -131,17 +131,17 @@ ion-item{
   .exp-icon{
     width: fit-content;
     float: right;
-   /* font-size: 13px; */
+   /* font-size: rem(13); */
     margin: 0 !important;
     padding: 0 !important;
 
     ion-icon{
-      font-size: 12pt;
+      font-size: rem(16);
       color: #42b9fe;
       float: left;
     }
     label{
-      font-size: 10pt;
+      font-size: rem(13);
     }
   }
 }
@@ -150,7 +150,7 @@ ion-item{
 }
 
 .exp-middle-detail{
-  font-size: 12pt;
+  font-size: rem(16);
   width: 100%;
   overflow: auto;
 
@@ -170,7 +170,7 @@ ion-item{
   .exp-date{
     width: auto;
     font-family: Roboto;
-    font-size: 10pt;
+    font-size: rem(13);
     font-weight: normal;
     font-stretch: normal;
     font-style: normal;
@@ -181,7 +181,7 @@ ion-item{
   }
 }
 .exp-bottom-detail{
-  font-size: 8pt;
+  font-size: rem(10);
   width: 100%;
   overflow: auto;
   padding-left: 3px;
@@ -189,7 +189,7 @@ ion-item{
   .exp-remetente{
     //width: 200px;
     font-family: Roboto;
-   /*  font-size: 13px; */
+   /*  font-size: rem(13); */
     font-weight: normal;
     color: #000000;
     float: left;
@@ -203,7 +203,7 @@ ion-item{
   overflow: auto;
 }
 .div-search{
-  font-size: 45px;
+  font-size: rem(45);
   float: left;
   margin: 0 0 0 10px
 }
@@ -217,7 +217,7 @@ ion-item{
   width: 100%;
 }
 .div-profile{
-  font-size: 45px;
+  font-size: rem(45);
   float: right;
   margin-right: 10px;
 }
@@ -229,14 +229,14 @@ ion-item{
   background-color: white;
   border-radius: 27.5px;
   border: solid 1px #ebebeb;
-  font-size: 14px;
+  font-size: rem(14);
   .icon{
     color: #797979;
     width: 41px;
     height: 41px;
     display: flex;
     justify-content: center;
-    font-size: 25px;
+    font-size: rem(25);
     align-items: center;
   }
   .input-text{
diff --git a/src/app/shared/header-pr/header-pr.page.html b/src/app/shared/header-pr/header-pr.page.html
index 7327d7daf..1ffed3b0c 100644
--- a/src/app/shared/header-pr/header-pr.page.html
+++ b/src/app/shared/header-pr/header-pr.page.html
@@ -9,8 +9,8 @@
     <div class="div-profile">
       <ion-icon src='assets/images/icons-profile-pr.svg'></ion-icon>
     
-      <ion-icon class="font-45" *ngIf="loggeduser.Profile == 'MDGPR'" src='assets/images/icons-profile.svg'></ion-icon>
-      <ion-icon class="font-45" *ngIf="loggeduser.Profile == 'PR' " src='assets/images/icons-profile-pr-header.svg'></ion-icon>
+      <ion-icon class="font-45-rem" *ngIf="loggeduser.Profile == 'MDGPR'" src='assets/images/icons-profile.svg'></ion-icon>
+      <ion-icon class="font-45-rem" *ngIf="loggeduser.Profile == 'PR' " src='assets/images/icons-profile-pr-header.svg'></ion-icon>
 
     </div>
   </div>
diff --git a/src/app/shared/header-pr/header-pr.page.scss b/src/app/shared/header-pr/header-pr.page.scss
index e44e036b1..630c41ad6 100644
--- a/src/app/shared/header-pr/header-pr.page.scss
+++ b/src/app/shared/header-pr/header-pr.page.scss
@@ -18,7 +18,7 @@
   margin: 0px auto;
 }
 .div-profile{
-  font-size: 45px;
+  font-size: rem(45);
   justify-content: flex-end;
   display: flex;
 }
diff --git a/src/app/shared/header/header.page.html b/src/app/shared/header/header.page.html
index 568961037..0667e332d 100644
--- a/src/app/shared/header/header.page.html
+++ b/src/app/shared/header/header.page.html
@@ -83,16 +83,16 @@
           <div *ngIf="p.userPermission([permissionList.Agenda.access]) || p.userPermission([permissionList.Gabinete.access])" class="tab mr-20 d-flex align-center cursor-pointer" (click)="changeRoute('/home/events')"
             [class.active]="ActiveTabService.pages.home">
 
-            <ion-icon *ngIf="ThemeService.currentTheme == 'default' || ThemeService.currentTheme == 'doneIt' " class="font-40" src='assets/images/icons-nav-home-active-black.svg'></ion-icon>
-            <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="font-40" src='assets/images/theme/gov/icons-nav-home-active-black.svg'></ion-icon>
+            <ion-icon *ngIf="ThemeService.currentTheme == 'default' || ThemeService.currentTheme == 'doneIt' " class="font-40-rem" src='assets/images/icons-nav-home-active-black.svg'></ion-icon>
+            <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="font-40-rem" src='assets/images/theme/gov/icons-nav-home-active-black.svg'></ion-icon>
 
             <span>Início</span>
           </div>
 
           <div *ngIf="p.userPermission([permissionList.Agenda.access])" class="tab mr-20 d-flex align-center cursor-pointer" (click)="changeRoute('/home/agenda')"
             [class.active]="ActiveTabService.pages.agenda">
-            <ion-icon *ngIf="ThemeService.currentTheme == 'default' || ThemeService.currentTheme == 'doneIt' " class="font-40" src='assets/images/icons-nav-agenda-inactive.svg'></ion-icon>
-            <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="font-40" src='assets/images/theme/gov/icons-nav-agenda-inactive.svg'></ion-icon>
+            <ion-icon *ngIf="ThemeService.currentTheme == 'default' || ThemeService.currentTheme == 'doneIt' " class="font-40-rem" src='assets/images/icons-nav-agenda-inactive.svg'></ion-icon>
+            <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="font-40-rem" src='assets/images/theme/gov/icons-nav-agenda-inactive.svg'></ion-icon>
 
             <span>Agenda</span>
           </div>
@@ -100,22 +100,22 @@
           <div *ngIf="p.userPermission([permissionList.Gabinete.access])" class="tab mr-20  d-flex align-center cursor-pointer" (click)="changeRoute('/home/gabinete-digital')"
             [class.active]="ActiveTabService.pages.gabinete">
 
-            <ion-icon *ngIf="ThemeService.currentTheme == 'default' || ThemeService.currentTheme == 'doneIt' " class="font-40" src='assets/images/icons-nav-home-dk.svg'></ion-icon>
-            <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="font-40" src='assets/images/theme/gov/icons-nav-home-dk.svg'></ion-icon>
+            <ion-icon *ngIf="ThemeService.currentTheme == 'default' || ThemeService.currentTheme == 'doneIt' " class="font-40-rem" src='assets/images/icons-nav-home-dk.svg'></ion-icon>
+            <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="font-40-rem" src='assets/images/theme/gov/icons-nav-home-dk.svg'></ion-icon>
             <span>Gabinete</span>
           </div>
 
           <div *ngIf="p.userPermission([permissionList.Actions.access])" class="tab mr-20  d-flex align-center cursor-pointer" (click)="changeRoute('/home/publications')"
             [class.active]="ActiveTabService.pages.publication">
-            <ion-icon *ngIf="ThemeService.currentTheme == 'default' || ThemeService.currentTheme == 'doneIt' " class="font-40" src='assets/images/icons-nav-a-es-inactive.svg'></ion-icon>
-            <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="font-40" src='assets/images/theme/gov/icons-nav-a-es-inactive.svg'></ion-icon>
+            <ion-icon *ngIf="ThemeService.currentTheme == 'default' || ThemeService.currentTheme == 'doneIt' " class="font-40-rem" src='assets/images/icons-nav-a-es-inactive.svg'></ion-icon>
+            <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="font-40-rem" src='assets/images/theme/gov/icons-nav-a-es-inactive.svg'></ion-icon>
             <span>Acções</span>
           </div>
 
           <div *ngIf="p.userPermission([permissionList.Chat.access])" class="tab mr-20  d-flex align-center cursor-pointer" (click)="changeRoute('/home/chat')"
             [class.active]="ActiveTabService.pages.chat">
-            <ion-icon *ngIf="ThemeService.currentTheme == 'default' || ThemeService.currentTheme == 'doneIt' " class="font-40" src='assets/images/icons-nav-grupos-inactive-dk-white.svg'></ion-icon>
-            <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="font-40" src='assets/images/theme/gov/icons-nav-grupos-inactive-dk-white.svg'></ion-icon>
+            <ion-icon *ngIf="ThemeService.currentTheme == 'default' || ThemeService.currentTheme == 'doneIt' " class="font-40-rem" src='assets/images/icons-nav-grupos-inactive-dk-white.svg'></ion-icon>
+            <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="font-40-rem" src='assets/images/theme/gov/icons-nav-grupos-inactive-dk-white.svg'></ion-icon>
             <span>Chat</span>
           </div>
         </div>
@@ -123,13 +123,13 @@
         <div class="header-btns d-flex">
           <div title="Pesquisa" *ngIf="!hideSearchBtn" class="mr-20 d-flex align-center cursor-pointer">
             <div style="padding-top: 5px;" (click)="openSearch();showSearch=true" *ngIf="!showSearch">
-              <ion-icon title="Perfil" *ngIf="ThemeService.currentTheme == 'doneIt' " class="font-45" src="assets/images/theme/doneIt/icons-search.svg"></ion-icon>
-              <ion-icon title="Perfil" *ngIf="ThemeService.currentTheme == 'default' " class="font-45" src='assets/images/icons-search.svg'></ion-icon>
-              <ion-icon title="Perfil" *ngIf="ThemeService.currentTheme == 'gov' " class="font-45" src='assets/images/theme/gov/icons-search.svg'></ion-icon>
+              <ion-icon title="Perfil" *ngIf="ThemeService.currentTheme == 'doneIt' " class="font-45-rem" src="assets/images/theme/doneIt/icons-search.svg"></ion-icon>
+              <ion-icon title="Perfil" *ngIf="ThemeService.currentTheme == 'default' " class="font-45-rem" src='assets/images/icons-search.svg'></ion-icon>
+              <ion-icon title="Perfil" *ngIf="ThemeService.currentTheme == 'gov' " class="font-45-rem" src='assets/images/theme/gov/icons-search.svg'></ion-icon>
             </div>
             <button title="Fechar" class="btn-no-color" (click)="closeSearch();showSearch=false;searchSubject=''" *ngIf="showSearch">
-              <ion-icon *ngIf="ThemeService.currentTheme == 'default' || ThemeService.currentTheme == 'doneIt' " class="font-40" name="restaurant-outline" src="assets/images/icons-search-close.svg"></ion-icon>
-              <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="font-40" name="restaurant-outline" src="assets/images/theme/gov/icons-search-close.svg"></ion-icon>
+              <ion-icon *ngIf="ThemeService.currentTheme == 'default' || ThemeService.currentTheme == 'doneIt' " class="font-40-rem" name="restaurant-outline" src="assets/images/icons-search-close.svg"></ion-icon>
+              <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="font-40-rem" name="restaurant-outline" src="assets/images/theme/gov/icons-search-close.svg"></ion-icon>
             </button>
 
             <div *ngIf="showSearch">
@@ -156,7 +156,7 @@
             </div>
           </div>
 
-          <div title="Perfil" class="div-profile d-flex cursor-pointer font-45" (click)="openProfile()">
+          <div title="Perfil" class="div-profile d-flex cursor-pointer font-45-rem" (click)="openProfile()">
             <ion-icon *ngIf="ThemeService.currentTheme == 'default'  " class="icon" src='assets/images/icons-profile.svg'></ion-icon>
             <ion-icon *ngIf="ThemeService.currentTheme == 'doneIt'  " class="icon" src='assets/images/theme/doneIt/icons-profile.svg'></ion-icon>
             <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="icon" src='assets/images/theme/gov/icons-profile.svg'></ion-icon>
diff --git a/src/app/shared/header/header.page.scss b/src/app/shared/header/header.page.scss
index 1954ddecb..a0a5e2b76 100644
--- a/src/app/shared/header/header.page.scss
+++ b/src/app/shared/header/header.page.scss
@@ -93,7 +93,7 @@
 
   .icon-badge {
     background-color: red;
-    font-size: 12px;
+    font-size: rem(12);
     color: white;
     text-align: center;
     width:20px;
@@ -105,7 +105,7 @@
   }
 
   .profile-text{
-    font-size: 20px;
+    font-size: rem(20);
     font-weight: 300;
     width: fit-content;
     position: absolute;
@@ -154,11 +154,11 @@
   border: solid 1px #ebebeb;
   .icon{
     color: #797979;
-    width: 45px;
-    height: 45px;
+    width: rem(45);
+    height: rem(45);
     display: flex;
     justify-content: center;
-    font-size: 25px;
+    font-size: rem(25);
     align-items: center;
   }
   .input-text{
diff --git a/src/app/shared/pin/pin.page.scss b/src/app/shared/pin/pin.page.scss
index d453381dc..cd5ee154a 100644
--- a/src/app/shared/pin/pin.page.scss
+++ b/src/app/shared/pin/pin.page.scss
@@ -37,7 +37,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    font-size: 19pt;
+    font-size: 1rem(12);
     background: #44b5ea;
     border-radius: 56px;
     margin-left: 30px;
@@ -55,15 +55,15 @@
 
 .clear{
     color: #44b5ea;
-    font-size: 12pt;
+    font-size: rem(16);
 }
 .dot-active{
     background: #44b5ea;
 }
 
 .dot{
-    width: 25px;
-    height: 25px;
+    width: rem(25);
+    height: rem(25);
     margin: 0 10px 0 0;
     border: 3px solid #44b5ea;
     box-sizing: border-box;
diff --git a/src/app/shared/popover/actions-options/actions-options.page.scss b/src/app/shared/popover/actions-options/actions-options.page.scss
index d03fc9ca3..693174a68 100644
--- a/src/app/shared/popover/actions-options/actions-options.page.scss
+++ b/src/app/shared/popover/actions-options/actions-options.page.scss
@@ -10,7 +10,7 @@
     .arrow-right-icon {
         width: 37px;
         float: right;
-        font-size: 35px;
+        font-size: rem(35);
         overflow: hidden;
     }
 }
diff --git a/src/app/shared/popover/bad-request/bad-request.page.scss b/src/app/shared/popover/bad-request/bad-request.page.scss
index 04d640390..23f9bf5d5 100644
--- a/src/app/shared/popover/bad-request/bad-request.page.scss
+++ b/src/app/shared/popover/bad-request/bad-request.page.scss
@@ -11,5 +11,5 @@
 }
 
 .message {
-    font-size: 12pt;
+    font-size: rem(16);
 }
\ No newline at end of file
diff --git a/src/app/shared/popover/chat-popover/chat-popover.page.scss b/src/app/shared/popover/chat-popover/chat-popover.page.scss
index 2f6033257..736f0bfa3 100644
--- a/src/app/shared/popover/chat-popover/chat-popover.page.scss
+++ b/src/app/shared/popover/chat-popover/chat-popover.page.scss
@@ -10,7 +10,7 @@
   .arrow-right-icon{
       width: 37px;
       float: right;
-      font-size: 35px;
+      font-size: rem(35);
       overflow: hidden;
   }
 }
diff --git a/src/app/shared/popover/deploma-options/deploma-options.page.scss b/src/app/shared/popover/deploma-options/deploma-options.page.scss
index 3f1718b98..6b6ce0444 100644
--- a/src/app/shared/popover/deploma-options/deploma-options.page.scss
+++ b/src/app/shared/popover/deploma-options/deploma-options.page.scss
@@ -10,7 +10,7 @@
     .arrow-right-icon {
         width: 37px;
         float: right;
-        font-size: 35px;
+        font-size: rem(35);
         overflow: hidden;
     }
 }
diff --git a/src/app/shared/popover/despachos-options/despachos-options.page.scss b/src/app/shared/popover/despachos-options/despachos-options.page.scss
index 5ea5fa2c7..65edddd0e 100644
--- a/src/app/shared/popover/despachos-options/despachos-options.page.scss
+++ b/src/app/shared/popover/despachos-options/despachos-options.page.scss
@@ -1,4 +1,4 @@
-.options-container{
+.options-container {
     --padding-top:20px !important;
    --padding-bottom:20px !important;
    --padding-start:20px !important;
@@ -11,7 +11,7 @@
     .arrow-right-icon {
         width: 37px;
         float: right;
-        font-size: 35px;
+        font-size: rem(35);
         overflow: hidden;
     }
 }
diff --git a/src/app/shared/popover/despachos-pr-options/despachos-pr-options.page.scss b/src/app/shared/popover/despachos-pr-options/despachos-pr-options.page.scss
index 91b87ddc7..ec6f806cd 100644
--- a/src/app/shared/popover/despachos-pr-options/despachos-pr-options.page.scss
+++ b/src/app/shared/popover/despachos-pr-options/despachos-pr-options.page.scss
@@ -11,7 +11,7 @@
     .arrow-right-icon{
         width: 37px;
         float: right;
-        font-size: 35px;
+        font-size: rem(35);
         overflow: hidden;
     }
 }
diff --git a/src/app/shared/popover/diplomas-gerar-options/diplomas-gerar-options.page.scss b/src/app/shared/popover/diplomas-gerar-options/diplomas-gerar-options.page.scss
index c308d718d..8a3c66977 100644
--- a/src/app/shared/popover/diplomas-gerar-options/diplomas-gerar-options.page.scss
+++ b/src/app/shared/popover/diplomas-gerar-options/diplomas-gerar-options.page.scss
@@ -9,7 +9,7 @@
       .arrow-right-icon{
           width: 37px;
           float: right;
-          font-size: 35px;
+          font-size: rem(35);
           overflow: hidden;
       }
   }
diff --git a/src/app/shared/popover/event-details-documents-options/event-details-documents-options.page.scss b/src/app/shared/popover/event-details-documents-options/event-details-documents-options.page.scss
index e69265ed8..0ca65079e 100644
--- a/src/app/shared/popover/event-details-documents-options/event-details-documents-options.page.scss
+++ b/src/app/shared/popover/event-details-documents-options/event-details-documents-options.page.scss
@@ -11,7 +11,7 @@
     .arrow-right-icon{
         width: 37px;
         float: right;
-        font-size: 35px;
+        font-size: rem(35);
         overflow: hidden;
     }
 }
diff --git a/src/app/shared/popover/messages-options/messages-options.page.scss b/src/app/shared/popover/messages-options/messages-options.page.scss
index b07cb0e9b..afb2b2a18 100644
--- a/src/app/shared/popover/messages-options/messages-options.page.scss
+++ b/src/app/shared/popover/messages-options/messages-options.page.scss
@@ -10,7 +10,7 @@
   .arrow-right-icon{
       width: 37px;
       float: right;
-      font-size: 35px;
+      font-size: rem(35);
       overflow: hidden;
   }
 }
diff --git a/src/app/shared/popover/opts-expediente-pr/opts-expediente-pr.page.scss b/src/app/shared/popover/opts-expediente-pr/opts-expediente-pr.page.scss
index 12efda85e..9b5da2205 100644
--- a/src/app/shared/popover/opts-expediente-pr/opts-expediente-pr.page.scss
+++ b/src/app/shared/popover/opts-expediente-pr/opts-expediente-pr.page.scss
@@ -10,7 +10,7 @@
     .arrow-right-icon{
         width: 37px;
         float: right;
-        font-size: 35px;
+        font-size: rem(35);
         overflow: hidden;
     }
 }
diff --git a/src/app/shared/popover/opts-expediente/opts-expediente.page.scss b/src/app/shared/popover/opts-expediente/opts-expediente.page.scss
index 3ca49f1b7..b6a695761 100644
--- a/src/app/shared/popover/opts-expediente/opts-expediente.page.scss
+++ b/src/app/shared/popover/opts-expediente/opts-expediente.page.scss
@@ -11,7 +11,7 @@
     .arrow-right-icon{
         width: 37px;
         float: right;
-        font-size: 35px;
+        font-size: rem(35);
         overflow: hidden;
     }
 }
diff --git a/src/app/shared/popover/request-options/request-options.page.scss b/src/app/shared/popover/request-options/request-options.page.scss
index 1dfc3209f..adcee90b4 100644
--- a/src/app/shared/popover/request-options/request-options.page.scss
+++ b/src/app/shared/popover/request-options/request-options.page.scss
@@ -1,3 +1,5 @@
+@import '~src/function.scss';
+
 .wrapper{
   width: 100% !important;
   padding-top:20px !important;
@@ -9,7 +11,7 @@
     .arrow-right-icon{
         width: 37px;
         float: right;
-        font-size: 35px;
+        font-size: rem(35);
         overflow: hidden;
     }
 }
diff --git a/src/app/shared/popover/searched-document-options/searched-document-options.page.scss b/src/app/shared/popover/searched-document-options/searched-document-options.page.scss
index 5beb99947..a8c14d1f8 100644
--- a/src/app/shared/popover/searched-document-options/searched-document-options.page.scss
+++ b/src/app/shared/popover/searched-document-options/searched-document-options.page.scss
@@ -1,3 +1,5 @@
+@import '~src/function.scss';
+
 .container{
     --padding-top:20px !important;
    --padding-bottom:20px !important;
@@ -11,7 +13,7 @@
     .arrow-right-icon{
         width: 37px;
         float: right;
-        font-size: 35px;
+        font-size: rem(35);
         overflow: hidden;
     }
 }
diff --git a/src/app/shared/popover/success-message/success-message.page.scss b/src/app/shared/popover/success-message/success-message.page.scss
index 04d640390..23f9bf5d5 100644
--- a/src/app/shared/popover/success-message/success-message.page.scss
+++ b/src/app/shared/popover/success-message/success-message.page.scss
@@ -11,5 +11,5 @@
 }
 
 .message {
-    font-size: 12pt;
+    font-size: rem(16);
 }
\ No newline at end of file
diff --git a/src/app/shared/publication/edit-action/edit-action.page.scss b/src/app/shared/publication/edit-action/edit-action.page.scss
index 260338602..37357c979 100644
--- a/src/app/shared/publication/edit-action/edit-action.page.scss
+++ b/src/app/shared/publication/edit-action/edit-action.page.scss
@@ -1,3 +1,5 @@
+@import '~src/function.scss';
+
 :host{
     background: #fff;
   }
@@ -21,7 +23,7 @@
     border: 0!important;
   }
   .div-search{
-    font-size: 45px;
+    font-size: rem(45);
     float: left;
     margin: 0 0 0 10px
   }
@@ -35,7 +37,7 @@
     width: 100%;
   }
   .div-profile{
-    font-size: 45px;
+    font-size: rem(45);
     float: right;
     margin-right: 10px;
   }
@@ -67,14 +69,14 @@
     margin: 2.5px 0 0 5px;
   }
   .title{
-      font-size: 25px;
+      font-size: rem(25);
     }
   .container-div{
-      margin-bottom: 15px;
+      margin-bottom: rem(15);
       overflow: auto;
     }
     .ion-item-container{
-      margin: 15px auto;
+      margin: rem(15) auto;
       border: 1px solid #ebebeb;
       border-radius: 5px;
       padding-left: 10px;
@@ -89,11 +91,11 @@
       margin: 0px auto;
     }
     .ion-icon-class{
-      width: 45px;
-      height: 45px;
+      width: rem(45);
+      height: rem(45);
       float: left;
       padding: 10px;
-      font-size: 25px;
+      font-size: rem(25);
     }
     .ion-input-class{
       height: auto;
diff --git a/src/app/shared/publication/new-action/new-action.page.scss b/src/app/shared/publication/new-action/new-action.page.scss
index 8422825b7..07a6b5d02 100644
--- a/src/app/shared/publication/new-action/new-action.page.scss
+++ b/src/app/shared/publication/new-action/new-action.page.scss
@@ -1,3 +1,5 @@
+@import '~src/function.scss';
+
 :host{
   background: #fff;
 }
@@ -21,7 +23,7 @@ ion-toolbar{
   border: 0!important;
 }
 .div-search{
-  font-size: 45px;
+  font-size: rem(45);
   float: left;
   margin: 0 0 0 10px
 }
@@ -35,7 +37,7 @@ ion-toolbar{
   width: 100%;
 }
 .div-profile{
-  font-size: 45px;
+  font-size: rem(45);
   float: right;
   margin-right: 10px;
 }
@@ -68,14 +70,14 @@ float: left;
 margin: 2.5px 0 0 5px;
 }
 .title{
-font-size: 25px;
+font-size: rem(25);
 }
 .container-div{
-    margin-bottom: 15px;
+    margin-bottom: rem(15);
     overflow: auto;
   }
   .ion-item-container{
-    margin: 15px auto;
+    margin: rem(15) auto;
     border: 1px solid #ebebeb;
     border-radius: 5px;
     padding-left: 10px;
@@ -91,11 +93,11 @@ font-size: 25px;
     overflow: hidden;
   }
   .ion-icon-class{
-    width: 45px;
-    height: 45px;
+    width: rem(45);
+    height: rem(45);
     float: left;
     padding: 10px;
-    font-size: 25px;
+    font-size: rem(25);
   }
   .ion-input-class{
     height: auto;
diff --git a/src/app/shared/publication/new-publication/new-publication.page.html b/src/app/shared/publication/new-publication/new-publication.page.html
index 029306cc8..673dc8885 100644
--- a/src/app/shared/publication/new-publication/new-publication.page.html
+++ b/src/app/shared/publication/new-publication/new-publication.page.html
@@ -1,7 +1,7 @@
 <ion-header class="ion-no-border background-white px-20 pt-25">
   <div class="title-content d-flex">
 <!--     <div class="back-icon">
-      <ion-icon class="font-35" (click)="goBack()" slot="end" src='assets/images/icons-arrow-arrow-left.svg'></ion-icon>
+      <ion-icon class="font-35-rem" (click)="goBack()" slot="end" src='assets/images/icons-arrow-arrow-left.svg'></ion-icon>
     </div> -->
     <div class="div-title">
       <ion-label class="title">{{ publicationTitle }}</ion-label> <br>
diff --git a/src/app/shared/publication/new-publication/new-publication.page.scss b/src/app/shared/publication/new-publication/new-publication.page.scss
index 592e1c223..1fd5d6f94 100644
--- a/src/app/shared/publication/new-publication/new-publication.page.scss
+++ b/src/app/shared/publication/new-publication/new-publication.page.scss
@@ -1,4 +1,4 @@
-
+@import '~src/function.scss';
 ion-content{
   --background: transparent;
   transform: translate3d(0, 5px, 0);
@@ -20,7 +20,7 @@ ion-toolbar{
   border: 0!important;
 }
 .div-search{
-  font-size: 45px;
+  font-size: rem(45);
   float: left;
   margin: 0 0 0 10px
 }
@@ -34,7 +34,7 @@ ion-toolbar{
   width: 100%;
 }
 .div-profile{
-  font-size: 45px;
+  font-size: rem(45);
   float: right;
   margin-right: 10px;
 }
@@ -68,15 +68,15 @@ float: left;
 margin: 2.5px 0 0 5px;
 }
 .title{
-font-size: 25px;
+font-size: rem(25);
 }
   .container-div{
-    margin-bottom: 15px;
+    margin-bottom: rem(15);
     overflow: auto;
     border-bottom: 1px solid #ebebeb;
   }
   .ion-item-container{
-    margin: 15px auto;
+    margin: rem(15) auto;
     border: 1px solid #ebebeb;
     border-radius: 5px;
     padding-left: 10px;
@@ -91,11 +91,11 @@ font-size: 25px;
     margin: 0px auto;
   }
   .ion-icon-class{
-    width: 45px;
-    height: 45px;
+    width: rem(45);
+    height: rem(45);
     float: left;
     padding: 10px;
-    font-size: 25px;
+    font-size: rem(25);
   }
   .ion-textarea-class{
     height: auto;
@@ -112,7 +112,7 @@ font-size: 25px;
   }
 
   .attach-document{
-    font-size: 15px;
+    font-size: rem(15);
     color: var(--title-text-color);
     margin: 5px 5px 20px 10px;
     padding: 5px;
@@ -120,12 +120,12 @@ font-size: 25px;
   }
   .attach-icon{
     width: 37px;
-    font-size: 35px;
+    font-size: rem(35);
     float: left;
   }
   .attached-title{
   font-family: Roboto;
-  font-size: 15px;
+  font-size: rem(15);
   font-weight: bold;
   font-stretch: normal;
   font-style: normal;
@@ -140,17 +140,17 @@ font-size: 25px;
     width: 60px;
   }
   .picture-file-name{
-    font-size: 15px;
+    font-size: rem(15);
     color: #0d89d1;
   }
   .size{
     color: #cecece;
-    font-size: 13px;
+    font-size: rem(13);
   }
 }
 
 .container-title{
-  font-size: 15px;
+  font-size: rem(15);
   font-weight: bold;
 }
 .hide-desktop{
diff --git a/src/app/shared/publication/view-publications/publication-detail/publication-detail.page.scss b/src/app/shared/publication/view-publications/publication-detail/publication-detail.page.scss
index 4aa8b4cf0..1e8ccfd36 100644
--- a/src/app/shared/publication/view-publications/publication-detail/publication-detail.page.scss
+++ b/src/app/shared/publication/view-publications/publication-detail/publication-detail.page.scss
@@ -1,3 +1,4 @@
+@import '~src/function.scss';
 
   ion-content{
     --background: transparent;
@@ -19,7 +20,7 @@
     border: 1px solid blue;
   } */
   .div-search{
-    font-size: 45px;
+    font-size: rem(45);
     float: left;
     margin: 0 0 0 10px
   }
@@ -33,7 +34,7 @@
     width: 100%;
   }
   .div-profile{
-    font-size: 45px;
+    font-size: rem(45);
     float: right;
     margin-right: 10px;
   }
@@ -66,7 +67,7 @@
   .back-icon{
     width: auto;
     float: left;
-    font-size: 35px;
+    font-size: rem(35);
     overflow: auto;
   }
   .div-title{
@@ -76,7 +77,7 @@
     margin: 2.5px 0 0 5px;
   }
   .title{
-    font-size: 25px;
+    font-size: rem(25);
   }
   .post-img{
     width: 100%;
diff --git a/src/app/shared/publication/view-publications/view-publications.page.scss b/src/app/shared/publication/view-publications/view-publications.page.scss
index 67e2f016e..85453dea0 100644
--- a/src/app/shared/publication/view-publications/view-publications.page.scss
+++ b/src/app/shared/publication/view-publications/view-publications.page.scss
@@ -1,3 +1,4 @@
+@import '~src/function.scss';
 
 :host{
 
@@ -33,7 +34,7 @@
     border: 0!important;
   }
   .div-search{
-    font-size: 45px;
+    font-size: rem(45);
     float: left;
     margin: 0 0 0 10px
   }
@@ -47,7 +48,7 @@
     width: 100%;
   }
   .div-profile{
-    font-size: 45px;
+    font-size: rem(45);
     float: right;
     margin-right: 10px;
   }
@@ -84,7 +85,7 @@
 
   .back-icon{
     float: left;
-    font-size: 35px;
+    font-size: rem(35);
 
   }
   .div-title{
@@ -98,7 +99,7 @@
   }
   .title{
     width: fit-content;
-    font-size: 25px;
+    font-size: rem(25);
     float: left;
   }
 
@@ -112,19 +113,19 @@
   }
   .actions-icon ion-icon{
       margin-left: 5px;
-      font-size: 35px;
+      font-size: rem(35);
       padding: 0 !important;
   }
   /* .title-icon{
-    font-size: 40px !important;
+    font-size: rem(40) !important;
   } */
   .item-content-date{
     color: #797979;
-    font-size: 13px;
+    font-size: rem(13);
   }
   .item-content-detail{
     color: #000000;
-    font-size: 13px;
+    font-size: rem(14);
   }
   .post-item{
     width: 100%;
@@ -154,18 +155,18 @@
   .post-title{
       width: 60%;
       float: left;
-      font-size: 15px;
+      font-size: rem(15);
       color: var(--title-text-color);
   }
 .post-data{
     width: 40%;
     float: left;
-    font-size: 13px;
+    font-size: rem(13);
     color: #797979;
     text-align: right;
 }
 .post-description{
-  font-size: 13px;
+  font-size: rem(13);
   color: #000;
 }
 ion-fab{
diff --git a/src/assets/images/Gabinete Digital_files/event-list-event-list-module.js.download b/src/assets/images/Gabinete Digital_files/event-list-event-list-module.js.download
index 3c8624c49..16a71ca09 100644
--- a/src/assets/images/Gabinete Digital_files/event-list-event-list-module.js.download	
+++ b/src/assets/images/Gabinete Digital_files/event-list-event-list-module.js.download	
@@ -101,7 +101,7 @@ EventListPageModule = Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__decorate"])([
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
-/* harmony default export */ __webpack_exports__["default"] = (".Rectangle {\n  width: 360px;\n  border-radius: 15px;\n  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.07);\n  border: solid 1px #e9e9e9;\n  background-color: var(--white);\n  margin: 0 auto;\n  padding: 10px;\n  margin-bottom: 10px;\n  overflow: auto;\n}\n\n.rectangle-content {\n  width: 340px;\n  border-radius: 5px;\n  border-right: 5px solid yellowgreen;\n  overflow: auto;\n}\n\n.approve-event-time {\n  float: left;\n}\n\n.approve-event-time p {\n  width: 33px;\n  font-family: Roboto;\n  font-size: 13px;\n  font-weight: normal;\n  font-stretch: normal;\n  font-style: normal;\n  line-height: normal;\n  letter-spacing: normal;\n  color: var(--Antartic-grey);\n  margin: 0;\n  padding: 0;\n}\n\n.approve-event-detail {\n  float: left;\n  margin-left: 10px;\n}\n\n.approve-event-detail p {\n  width: 250px;\n  font-family: Roboto;\n  font-size: 13px;\n  font-weight: normal;\n  font-stretch: normal;\n  font-style: normal;\n  line-height: normal;\n  letter-spacing: normal;\n  color: var(--black);\n  margin: 0;\n  padding: 0;\n}\n\n.approve-event-detail h3 {\n  width: 250px;\n  font-family: Roboto;\n  font-size: 15px;\n  font-weight: bold;\n  font-stretch: normal;\n  font-style: normal;\n  line-height: normal;\n  letter-spacing: normal;\n  color: #0d89d1;\n  margin: 0;\n  padding: 0;\n}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNyYy9hcHAvcGFnZXMvZ2FiaW5ldGUtZGlnaXRhbC9ldmVudC1saXN0L0M6XFxVc2Vyc1xcdGlhZ28ua2F5YXlhXFxkZXZlbG9wbWVudFxcZ2FiaW5ldGUtZGlnaXRhbC9zcmNcXGFwcFxccGFnZXNcXGdhYmluZXRlLWRpZ2l0YWxcXGV2ZW50LWxpc3RcXGV2ZW50LWxpc3QucGFnZS5zY3NzIiwic3JjL2FwcC9wYWdlcy9nYWJpbmV0ZS1kaWdpdGFsL2V2ZW50LWxpc3QvZXZlbnQtbGlzdC5wYWdlLnNjc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7RUFDRSxZQUFBO0VBQ0EsbUJBQUE7RUFDQSwwQ0FBQTtFQUNBLHlCQUFBO0VBQ0EsOEJBQUE7RUFDQSxjQUFBO0VBQ0EsYUFBQTtFQUNBLG1CQUFBO0VBQ0EsY0FBQTtBQ0NGOztBRENBO0VBQ0UsWUFBQTtFQUNBLGtCQUFBO0VBQ0EsbUNBQUE7RUFDQSxjQUFBO0FDRUY7O0FEQ0E7RUFDRSxXQUFBO0FDRUY7O0FEQUE7RUFDRSxXQUFBO0VBQ0EsbUJBQUE7RUFDQSxlQUFBO0VBQ0EsbUJBQUE7RUFDQSxvQkFBQTtFQUNBLGtCQUFBO0VBQ0EsbUJBQUE7RUFDQSxzQkFBQTtFQUNBLDJCQUFBO0VBQ0EsU0FBQTtFQUNBLFVBQUE7QUNHRjs7QUREQTtFQUNFLFdBQUE7RUFDQSxpQkFBQTtBQ0lGOztBREZBO0VBQ0UsWUFBQTtFQUNBLG1CQUFBO0VBQ0EsZUFBQTtFQUNBLG1CQUFBO0VBQ0Esb0JBQUE7RUFDQSxrQkFBQTtFQUNBLG1CQUFBO0VBQ0Esc0JBQUE7RUFDQSxtQkFBQTtFQUNBLFNBQUE7RUFDQSxVQUFBO0FDS0Y7O0FESEE7RUFDRSxZQUFBO0VBQ0EsbUJBQUE7RUFDQSxlQUFBO0VBQ0EsaUJBQUE7RUFDQSxvQkFBQTtFQUNBLGtCQUFBO0VBQ0EsbUJBQUE7RUFDQSxzQkFBQTtFQUNBLGNBQUE7RUFDQSxTQUFBO0VBQ0EsVUFBQTtBQ01GIiwiZmlsZSI6InNyYy9hcHAvcGFnZXMvZ2FiaW5ldGUtZGlnaXRhbC9ldmVudC1saXN0L2V2ZW50LWxpc3QucGFnZS5zY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLlJlY3RhbmdsZSB7XHJcbiAgd2lkdGg6IDM2MHB4O1xyXG4gIGJvcmRlci1yYWRpdXM6IDE1cHg7XHJcbiAgYm94LXNoYWRvdzogMCAwIDEwcHggMCByZ2JhKDAsIDAsIDAsIDAuMDcpO1xyXG4gIGJvcmRlcjogc29saWQgMXB4ICNlOWU5ZTk7XHJcbiAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0td2hpdGUpO1xyXG4gIG1hcmdpbjogMCBhdXRvO1xyXG4gIHBhZGRpbmc6IDEwcHg7XHJcbiAgbWFyZ2luLWJvdHRvbTogMTBweDtcclxuICBvdmVyZmxvdzogYXV0bztcclxufVxyXG4ucmVjdGFuZ2xlLWNvbnRlbnR7XHJcbiAgd2lkdGg6IDM0MHB4O1xyXG4gIGJvcmRlci1yYWRpdXM6IDVweDtcclxuICBib3JkZXItcmlnaHQ6IDVweCBzb2xpZCB5ZWxsb3dncmVlbjtcclxuICBvdmVyZmxvdzogYXV0bztcclxufVxyXG5cclxuLmFwcHJvdmUtZXZlbnQtdGltZXtcclxuICBmbG9hdDogbGVmdDtcclxufVxyXG4uYXBwcm92ZS1ldmVudC10aW1lIHB7XHJcbiAgd2lkdGg6IDMzcHg7XHJcbiAgZm9udC1mYW1pbHk6IFJvYm90bztcclxuICBmb250LXNpemU6IDEzcHg7XHJcbiAgZm9udC13ZWlnaHQ6IG5vcm1hbDtcclxuICBmb250LXN0cmV0Y2g6IG5vcm1hbDtcclxuICBmb250LXN0eWxlOiBub3JtYWw7XHJcbiAgbGluZS1oZWlnaHQ6IG5vcm1hbDtcclxuICBsZXR0ZXItc3BhY2luZzogbm9ybWFsO1xyXG4gIGNvbG9yOiB2YXIoLS1BbnRhcnRpYy1ncmV5KTtcclxuICBtYXJnaW46IDA7XHJcbiAgcGFkZGluZzogMDtcclxufVxyXG4uYXBwcm92ZS1ldmVudC1kZXRhaWx7XHJcbiAgZmxvYXQ6IGxlZnQ7XHJcbiAgbWFyZ2luLWxlZnQ6IDEwcHg7XHJcbn1cclxuLmFwcHJvdmUtZXZlbnQtZGV0YWlsIHB7XHJcbiAgd2lkdGg6IDI1MHB4O1xyXG4gIGZvbnQtZmFtaWx5OiBSb2JvdG87XHJcbiAgZm9udC1zaXplOiAxM3B4O1xyXG4gIGZvbnQtd2VpZ2h0OiBub3JtYWw7XHJcbiAgZm9udC1zdHJldGNoOiBub3JtYWw7XHJcbiAgZm9udC1zdHlsZTogbm9ybWFsO1xyXG4gIGxpbmUtaGVpZ2h0OiBub3JtYWw7XHJcbiAgbGV0dGVyLXNwYWNpbmc6IG5vcm1hbDtcclxuICBjb2xvcjogdmFyKC0tYmxhY2spO1xyXG4gIG1hcmdpbjogMDtcclxuICBwYWRkaW5nOiAwO1xyXG59XHJcbi5hcHByb3ZlLWV2ZW50LWRldGFpbCBoM3tcclxuICB3aWR0aDogMjUwcHg7XHJcbiAgZm9udC1mYW1pbHk6IFJvYm90bztcclxuICBmb250LXNpemU6IDE1cHg7XHJcbiAgZm9udC13ZWlnaHQ6IGJvbGQ7XHJcbiAgZm9udC1zdHJldGNoOiBub3JtYWw7XHJcbiAgZm9udC1zdHlsZTogbm9ybWFsO1xyXG4gIGxpbmUtaGVpZ2h0OiBub3JtYWw7XHJcbiAgbGV0dGVyLXNwYWNpbmc6IG5vcm1hbDtcclxuICBjb2xvcjogIzBkODlkMTtcclxuICBtYXJnaW46IDA7XHJcbiAgcGFkZGluZzogMDtcclxufVxyXG4iLCIuUmVjdGFuZ2xlIHtcbiAgd2lkdGg6IDM2MHB4O1xuICBib3JkZXItcmFkaXVzOiAxNXB4O1xuICBib3gtc2hhZG93OiAwIDAgMTBweCAwIHJnYmEoMCwgMCwgMCwgMC4wNyk7XG4gIGJvcmRlcjogc29saWQgMXB4ICNlOWU5ZTk7XG4gIGJhY2tncm91bmQtY29sb3I6IHZhcigtLXdoaXRlKTtcbiAgbWFyZ2luOiAwIGF1dG87XG4gIHBhZGRpbmc6IDEwcHg7XG4gIG1hcmdpbi1ib3R0b206IDEwcHg7XG4gIG92ZXJmbG93OiBhdXRvO1xufVxuXG4ucmVjdGFuZ2xlLWNvbnRlbnQge1xuICB3aWR0aDogMzQwcHg7XG4gIGJvcmRlci1yYWRpdXM6IDVweDtcbiAgYm9yZGVyLXJpZ2h0OiA1cHggc29saWQgeWVsbG93Z3JlZW47XG4gIG92ZXJmbG93OiBhdXRvO1xufVxuXG4uYXBwcm92ZS1ldmVudC10aW1lIHtcbiAgZmxvYXQ6IGxlZnQ7XG59XG5cbi5hcHByb3ZlLWV2ZW50LXRpbWUgcCB7XG4gIHdpZHRoOiAzM3B4O1xuICBmb250LWZhbWlseTogUm9ib3RvO1xuICBmb250LXNpemU6IDEzcHg7XG4gIGZvbnQtd2VpZ2h0OiBub3JtYWw7XG4gIGZvbnQtc3RyZXRjaDogbm9ybWFsO1xuICBmb250LXN0eWxlOiBub3JtYWw7XG4gIGxpbmUtaGVpZ2h0OiBub3JtYWw7XG4gIGxldHRlci1zcGFjaW5nOiBub3JtYWw7XG4gIGNvbG9yOiB2YXIoLS1BbnRhcnRpYy1ncmV5KTtcbiAgbWFyZ2luOiAwO1xuICBwYWRkaW5nOiAwO1xufVxuXG4uYXBwcm92ZS1ldmVudC1kZXRhaWwge1xuICBmbG9hdDogbGVmdDtcbiAgbWFyZ2luLWxlZnQ6IDEwcHg7XG59XG5cbi5hcHByb3ZlLWV2ZW50LWRldGFpbCBwIHtcbiAgd2lkdGg6IDI1MHB4O1xuICBmb250LWZhbWlseTogUm9ib3RvO1xuICBmb250LXNpemU6IDEzcHg7XG4gIGZvbnQtd2VpZ2h0OiBub3JtYWw7XG4gIGZvbnQtc3RyZXRjaDogbm9ybWFsO1xuICBmb250LXN0eWxlOiBub3JtYWw7XG4gIGxpbmUtaGVpZ2h0OiBub3JtYWw7XG4gIGxldHRlci1zcGFjaW5nOiBub3JtYWw7XG4gIGNvbG9yOiB2YXIoLS1ibGFjayk7XG4gIG1hcmdpbjogMDtcbiAgcGFkZGluZzogMDtcbn1cblxuLmFwcHJvdmUtZXZlbnQtZGV0YWlsIGgzIHtcbiAgd2lkdGg6IDI1MHB4O1xuICBmb250LWZhbWlseTogUm9ib3RvO1xuICBmb250LXNpemU6IDE1cHg7XG4gIGZvbnQtd2VpZ2h0OiBib2xkO1xuICBmb250LXN0cmV0Y2g6IG5vcm1hbDtcbiAgZm9udC1zdHlsZTogbm9ybWFsO1xuICBsaW5lLWhlaWdodDogbm9ybWFsO1xuICBsZXR0ZXItc3BhY2luZzogbm9ybWFsO1xuICBjb2xvcjogIzBkODlkMTtcbiAgbWFyZ2luOiAwO1xuICBwYWRkaW5nOiAwO1xufSJdfQ== */");
+/* harmony default export */ __webpack_exports__["default"] = (".Rectangle {\n  width: 360px;\n  border-radius: 15px;\n  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.07);\n  border: solid 1px #e9e9e9;\n  background-color: var(--white);\n  margin: 0 auto;\n  padding: 10px;\n  margin-bottom: 10px;\n  overflow: auto;\n}\n\n.rectangle-content {\n  width: 340px;\n  border-radius: 5px;\n  border-right: 5px solid yellowgreen;\n  overflow: auto;\n}\n\n.approve-event-time {\n  float: left;\n}\n\n.approve-event-time p {\n  width: 33px;\n  font-family: Roboto;\n  font-size: rem(13);\n  font-weight: normal;\n  font-stretch: normal;\n  font-style: normal;\n  line-height: normal;\n  letter-spacing: normal;\n  color: var(--Antartic-grey);\n  margin: 0;\n  padding: 0;\n}\n\n.approve-event-detail {\n  float: left;\n  margin-left: 10px;\n}\n\n.approve-event-detail p {\n  width: 250px;\n  font-family: Roboto;\n  font-size: rem(13);\n  font-weight: normal;\n  font-stretch: normal;\n  font-style: normal;\n  line-height: normal;\n  letter-spacing: normal;\n  color: var(--black);\n  margin: 0;\n  padding: 0;\n}\n\n.approve-event-detail h3 {\n  width: 250px;\n  font-family: Roboto;\n  font-size: 15px;\n  font-weight: bold;\n  font-stretch: normal;\n  font-style: normal;\n  line-height: normal;\n  letter-spacing: normal;\n  color: #0d89d1;\n  margin: 0;\n  padding: 0;\n}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNyYy9hcHAvcGFnZXMvZ2FiaW5ldGUtZGlnaXRhbC9ldmVudC1saXN0L0M6XFxVc2Vyc1xcdGlhZ28ua2F5YXlhXFxkZXZlbG9wbWVudFxcZ2FiaW5ldGUtZGlnaXRhbC9zcmNcXGFwcFxccGFnZXNcXGdhYmluZXRlLWRpZ2l0YWxcXGV2ZW50LWxpc3RcXGV2ZW50LWxpc3QucGFnZS5zY3NzIiwic3JjL2FwcC9wYWdlcy9nYWJpbmV0ZS1kaWdpdGFsL2V2ZW50LWxpc3QvZXZlbnQtbGlzdC5wYWdlLnNjc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7RUFDRSxZQUFBO0VBQ0EsbUJBQUE7RUFDQSwwQ0FBQTtFQUNBLHlCQUFBO0VBQ0EsOEJBQUE7RUFDQSxjQUFBO0VBQ0EsYUFBQTtFQUNBLG1CQUFBO0VBQ0EsY0FBQTtBQ0NGOztBRENBO0VBQ0UsWUFBQTtFQUNBLGtCQUFBO0VBQ0EsbUNBQUE7RUFDQSxjQUFBO0FDRUY7O0FEQ0E7RUFDRSxXQUFBO0FDRUY7O0FEQUE7RUFDRSxXQUFBO0VBQ0EsbUJBQUE7RUFDQSxlQUFBO0VBQ0EsbUJBQUE7RUFDQSxvQkFBQTtFQUNBLGtCQUFBO0VBQ0EsbUJBQUE7RUFDQSxzQkFBQTtFQUNBLDJCQUFBO0VBQ0EsU0FBQTtFQUNBLFVBQUE7QUNHRjs7QUREQTtFQUNFLFdBQUE7RUFDQSxpQkFBQTtBQ0lGOztBREZBO0VBQ0UsWUFBQTtFQUNBLG1CQUFBO0VBQ0EsZUFBQTtFQUNBLG1CQUFBO0VBQ0Esb0JBQUE7RUFDQSxrQkFBQTtFQUNBLG1CQUFBO0VBQ0Esc0JBQUE7RUFDQSxtQkFBQTtFQUNBLFNBQUE7RUFDQSxVQUFBO0FDS0Y7O0FESEE7RUFDRSxZQUFBO0VBQ0EsbUJBQUE7RUFDQSxlQUFBO0VBQ0EsaUJBQUE7RUFDQSxvQkFBQTtFQUNBLGtCQUFBO0VBQ0EsbUJBQUE7RUFDQSxzQkFBQTtFQUNBLGNBQUE7RUFDQSxTQUFBO0VBQ0EsVUFBQTtBQ01GIiwiZmlsZSI6InNyYy9hcHAvcGFnZXMvZ2FiaW5ldGUtZGlnaXRhbC9ldmVudC1saXN0L2V2ZW50LWxpc3QucGFnZS5zY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLlJlY3RhbmdsZSB7XHJcbiAgd2lkdGg6IDM2MHB4O1xyXG4gIGJvcmRlci1yYWRpdXM6IDE1cHg7XHJcbiAgYm94LXNoYWRvdzogMCAwIDEwcHggMCByZ2JhKDAsIDAsIDAsIDAuMDcpO1xyXG4gIGJvcmRlcjogc29saWQgMXB4ICNlOWU5ZTk7XHJcbiAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0td2hpdGUpO1xyXG4gIG1hcmdpbjogMCBhdXRvO1xyXG4gIHBhZGRpbmc6IDEwcHg7XHJcbiAgbWFyZ2luLWJvdHRvbTogMTBweDtcclxuICBvdmVyZmxvdzogYXV0bztcclxufVxyXG4ucmVjdGFuZ2xlLWNvbnRlbnR7XHJcbiAgd2lkdGg6IDM0MHB4O1xyXG4gIGJvcmRlci1yYWRpdXM6IDVweDtcclxuICBib3JkZXItcmlnaHQ6IDVweCBzb2xpZCB5ZWxsb3dncmVlbjtcclxuICBvdmVyZmxvdzogYXV0bztcclxufVxyXG5cclxuLmFwcHJvdmUtZXZlbnQtdGltZXtcclxuICBmbG9hdDogbGVmdDtcclxufVxyXG4uYXBwcm92ZS1ldmVudC10aW1lIHB7XHJcbiAgd2lkdGg6IDMzcHg7XHJcbiAgZm9udC1mYW1pbHk6IFJvYm90bztcclxuICBmb250LXNpemU6IDEzcHg7XHJcbiAgZm9udC13ZWlnaHQ6IG5vcm1hbDtcclxuICBmb250LXN0cmV0Y2g6IG5vcm1hbDtcclxuICBmb250LXN0eWxlOiBub3JtYWw7XHJcbiAgbGluZS1oZWlnaHQ6IG5vcm1hbDtcclxuICBsZXR0ZXItc3BhY2luZzogbm9ybWFsO1xyXG4gIGNvbG9yOiB2YXIoLS1BbnRhcnRpYy1ncmV5KTtcclxuICBtYXJnaW46IDA7XHJcbiAgcGFkZGluZzogMDtcclxufVxyXG4uYXBwcm92ZS1ldmVudC1kZXRhaWx7XHJcbiAgZmxvYXQ6IGxlZnQ7XHJcbiAgbWFyZ2luLWxlZnQ6IDEwcHg7XHJcbn1cclxuLmFwcHJvdmUtZXZlbnQtZGV0YWlsIHB7XHJcbiAgd2lkdGg6IDI1MHB4O1xyXG4gIGZvbnQtZmFtaWx5OiBSb2JvdG87XHJcbiAgZm9udC1zaXplOiAxM3B4O1xyXG4gIGZvbnQtd2VpZ2h0OiBub3JtYWw7XHJcbiAgZm9udC1zdHJldGNoOiBub3JtYWw7XHJcbiAgZm9udC1zdHlsZTogbm9ybWFsO1xyXG4gIGxpbmUtaGVpZ2h0OiBub3JtYWw7XHJcbiAgbGV0dGVyLXNwYWNpbmc6IG5vcm1hbDtcclxuICBjb2xvcjogdmFyKC0tYmxhY2spO1xyXG4gIG1hcmdpbjogMDtcclxuICBwYWRkaW5nOiAwO1xyXG59XHJcbi5hcHByb3ZlLWV2ZW50LWRldGFpbCBoM3tcclxuICB3aWR0aDogMjUwcHg7XHJcbiAgZm9udC1mYW1pbHk6IFJvYm90bztcclxuICBmb250LXNpemU6IDE1cHg7XHJcbiAgZm9udC13ZWlnaHQ6IGJvbGQ7XHJcbiAgZm9udC1zdHJldGNoOiBub3JtYWw7XHJcbiAgZm9udC1zdHlsZTogbm9ybWFsO1xyXG4gIGxpbmUtaGVpZ2h0OiBub3JtYWw7XHJcbiAgbGV0dGVyLXNwYWNpbmc6IG5vcm1hbDtcclxuICBjb2xvcjogIzBkODlkMTtcclxuICBtYXJnaW46IDA7XHJcbiAgcGFkZGluZzogMDtcclxufVxyXG4iLCIuUmVjdGFuZ2xlIHtcbiAgd2lkdGg6IDM2MHB4O1xuICBib3JkZXItcmFkaXVzOiAxNXB4O1xuICBib3gtc2hhZG93OiAwIDAgMTBweCAwIHJnYmEoMCwgMCwgMCwgMC4wNyk7XG4gIGJvcmRlcjogc29saWQgMXB4ICNlOWU5ZTk7XG4gIGJhY2tncm91bmQtY29sb3I6IHZhcigtLXdoaXRlKTtcbiAgbWFyZ2luOiAwIGF1dG87XG4gIHBhZGRpbmc6IDEwcHg7XG4gIG1hcmdpbi1ib3R0b206IDEwcHg7XG4gIG92ZXJmbG93OiBhdXRvO1xufVxuXG4ucmVjdGFuZ2xlLWNvbnRlbnQge1xuICB3aWR0aDogMzQwcHg7XG4gIGJvcmRlci1yYWRpdXM6IDVweDtcbiAgYm9yZGVyLXJpZ2h0OiA1cHggc29saWQgeWVsbG93Z3JlZW47XG4gIG92ZXJmbG93OiBhdXRvO1xufVxuXG4uYXBwcm92ZS1ldmVudC10aW1lIHtcbiAgZmxvYXQ6IGxlZnQ7XG59XG5cbi5hcHByb3ZlLWV2ZW50LXRpbWUgcCB7XG4gIHdpZHRoOiAzM3B4O1xuICBmb250LWZhbWlseTogUm9ib3RvO1xuICBmb250LXNpemU6IDEzcHg7XG4gIGZvbnQtd2VpZ2h0OiBub3JtYWw7XG4gIGZvbnQtc3RyZXRjaDogbm9ybWFsO1xuICBmb250LXN0eWxlOiBub3JtYWw7XG4gIGxpbmUtaGVpZ2h0OiBub3JtYWw7XG4gIGxldHRlci1zcGFjaW5nOiBub3JtYWw7XG4gIGNvbG9yOiB2YXIoLS1BbnRhcnRpYy1ncmV5KTtcbiAgbWFyZ2luOiAwO1xuICBwYWRkaW5nOiAwO1xufVxuXG4uYXBwcm92ZS1ldmVudC1kZXRhaWwge1xuICBmbG9hdDogbGVmdDtcbiAgbWFyZ2luLWxlZnQ6IDEwcHg7XG59XG5cbi5hcHByb3ZlLWV2ZW50LWRldGFpbCBwIHtcbiAgd2lkdGg6IDI1MHB4O1xuICBmb250LWZhbWlseTogUm9ib3RvO1xuICBmb250LXNpemU6IDEzcHg7XG4gIGZvbnQtd2VpZ2h0OiBub3JtYWw7XG4gIGZvbnQtc3RyZXRjaDogbm9ybWFsO1xuICBmb250LXN0eWxlOiBub3JtYWw7XG4gIGxpbmUtaGVpZ2h0OiBub3JtYWw7XG4gIGxldHRlci1zcGFjaW5nOiBub3JtYWw7XG4gIGNvbG9yOiB2YXIoLS1ibGFjayk7XG4gIG1hcmdpbjogMDtcbiAgcGFkZGluZzogMDtcbn1cblxuLmFwcHJvdmUtZXZlbnQtZGV0YWlsIGgzIHtcbiAgd2lkdGg6IDI1MHB4O1xuICBmb250LWZhbWlseTogUm9ib3RvO1xuICBmb250LXNpemU6IDE1cHg7XG4gIGZvbnQtd2VpZ2h0OiBib2xkO1xuICBmb250LXN0cmV0Y2g6IG5vcm1hbDtcbiAgZm9udC1zdHlsZTogbm9ybWFsO1xuICBsaW5lLWhlaWdodDogbm9ybWFsO1xuICBsZXR0ZXItc3BhY2luZzogbm9ybWFsO1xuICBjb2xvcjogIzBkODlkMTtcbiAgbWFyZ2luOiAwO1xuICBwYWRkaW5nOiAwO1xufSJdfQ== */");
 
 /***/ }),
 
diff --git a/src/global.scss b/src/global.scss
index 53f53e95f..94a272df5 100644
--- a/src/global.scss
+++ b/src/global.scss
@@ -1259,6 +1259,7 @@ ngx-mat-datetime-content{
 .add-attachment-bg-color{
   background-color: #42b9fe13 !important;
   --background: #42b9fe0a !important;
+  font-size: rem(14);
 }
 
 .message-attachments{
@@ -1407,7 +1408,7 @@ ngx-mat-datetime-content{
 
 .add-people {
     align-items: center;
-    height: 45px;
+    height: rem(45);
 }
 
 
@@ -1488,7 +1489,7 @@ ngx-mat-datetime-content button.mat-stroked-button {
 
 pre {
     font-family: 'Roboto' !important;
-    font-size: 12pt !important;
+    font-size: rem(16) !important;
     white-space: break-spaces;
     word-break: break-word;
 }
@@ -1595,4 +1596,28 @@ ion-textarea.heigh-200  textarea {
 
 .swiper-slide {
   font-size: unset !important;
-}
\ No newline at end of file
+}
+
+
+input {
+  padding: rem(10) rem(8) !important;
+}
+
+ion-segment-button {
+  font-size: rem(14);
+}
+
+h5, .buttons{
+  font-size: rem(17);
+}
+
+
+@for $i from 0 through 50 {
+  .font-#{$i}-rem {
+    font-size: rem($i);
+  }
+
+  .font-#{$i}-em {
+    font-size: em($i);
+  }
+}
diff --git a/src/style/main.scss b/src/style/main.scss
index 7e4645888..9b887d0a6 100644
--- a/src/style/main.scss
+++ b/src/style/main.scss
@@ -181,15 +181,6 @@
 }
 
 
-@for $i from 0 through 50 {
-  .font-#{$i}-rem {
-    font-size: rem($i);
-  }
-
-  .font-#{$i}-em {
-    font-size: em($i);
-  }
-}
 
 
 @for $i from 0 through 10 {
diff --git a/src/theme/variables.scss b/src/theme/variables.scss
index 14bf1878d..ae5d5b2ae 100644
--- a/src/theme/variables.scss
+++ b/src/theme/variables.scss
@@ -535,7 +535,7 @@ $app-theme: mat-light-theme(
 }
 
 .btn-div {
-  width: 390px;
+  width: rem(390);
   margin: 10px;
   overflow: auto;
 }
@@ -552,7 +552,7 @@ $app-theme: mat-light-theme(
 }
 
 .btn-ok-no-width {
-  height: 45px !important;
+  height: rem(45) !important;
   margin: 0 auto;
   padding: 0 !important;
   border-radius: 22.5px;
@@ -561,8 +561,8 @@ $app-theme: mat-light-theme(
 }
 
 .btn-ok {
-  width: 170px !important;
-  height: 45px !important;
+  width: rem(170) !important;
+  height: rem(45) !important;
   margin: 0 auto !important;
   padding: 0 !important;
   border-radius: 22.5px;
@@ -577,8 +577,8 @@ $app-theme: mat-light-theme(
 
 .btn-delete {
   display: block;
-  width: 170px !important;
-  height: 45px !important;
+  width: rem(170) !important;
+  height: rem(45) !important;
   margin: 0 auto !important;
   padding: 0 !important;
   border-radius: 22.5px;
@@ -588,8 +588,8 @@ $app-theme: mat-light-theme(
 
 .btn-cancel {
   display: block;
-  width: 170px !important;
-  height: 45px !important;
+  width: rem(170) !important;
+  height: rem(45) !important;
   padding: 0 !important;
   border-radius: 22.5px;
   background-color: var(--button-color);
@@ -605,8 +605,8 @@ $app-theme: mat-light-theme(
 }
 
 .btn-ok-medium {
-  width: 130px !important;
-  height: 45px !important;
+  width: rem(130) !important;
+  height: rem(45) !important;
   margin: 0 auto !important;
   padding: 0 !important;
   border-radius: 22.5px;
@@ -615,8 +615,8 @@ $app-theme: mat-light-theme(
 }
 .btn-delete-medium {
   display: block;
-  width: 130px !important;
-  height: 45px !important;
+  width: rem(130) !important;
+  height: rem(45) !important;
   margin: 0 auto !important;
   padding: 0 !important;
   border-radius: 22.5px;
@@ -625,8 +625,8 @@ $app-theme: mat-light-theme(
 }
 .btn-cancel-medium {
   display: block;
-  width: 130px !important;
-  height: 45px !important;
+  width: rem(130) !important;
+  height: rem(45) !important;
   padding: 0 !important;
   border-radius: 22.5px;
   background-color: #e0e9ee;
diff --git a/version/git-version.ts b/version/git-version.ts
index 49ab11d53..c321d364f 100644
--- a/version/git-version.ts
+++ b/version/git-version.ts
@@ -1,12 +1,12 @@
 export let versionData = {
-  "shortSHA": "3df11142f",
-  "SHA": "3df11142f601b506e5a542797d92274cc0051fe8",
+  "shortSHA": "2d03162a3",
+  "SHA": "2d03162a3b023f1c864a2e5ee7542e88e602f666",
   "branch": "feature/mobile-viewport",
   "lastCommitAuthor": "'Peter Maquiran'",
-  "lastCommitTime": "'Thu Jul 6 12:18:15 2023 +0100'",
-  "lastCommitMessage": "responsive",
-  "lastCommitNumber": "5036",
+  "lastCommitTime": "'Thu Jul 6 13:32:06 2023 +0100'",
+  "lastCommitMessage": "despacho",
+  "lastCommitNumber": "5037",
   "change": "",
-  "changeStatus": "On branch feature/mobile-viewport\nChanges to be committed:\n  (use \"git restore --staged <file>...\" to unstage)\n\tmodified:   src/app/pages/gabinete-digital/despachos-pr/despachos-pr.page.scss\n\tmodified:   src/app/shared/gabinete-digital/generic/task-list-header/task-list-header.page.html",
+  "changeStatus": "On branch feature/mobile-viewport\nChanges to be committed:\n  (use \"git restore --staged <file>...\" to unstage)\n\tmodified:   src/app/modals/add-note/add-note.page.scss\n\tmodified:   src/app/modals/chat-options-features/chat-options-features.page.scss\n\tmodified:   src/app/modals/create-process/create-process.page.scss\n\tmodified:   src/app/modals/dar-parecer/dar-parecer.page.scss\n\tmodified:   src/app/modals/delegar/delegar.page.scss\n\tmodified:   src/app/modals/document-detail/document-detail.page.html\n\tmodified:   src/app/modals/document-detail/document-detail.page.scss\n\tmodified:   src/app/modals/document-set-up-meeting/document-set-up-meeting.page.scss\n\tmodified:   src/app/modals/document-viewer/document-viewer.page.html\n\tmodified:   src/app/modals/eliminate-event/eliminate-event.page.scss\n\tmodified:   src/app/modals/forward/forward.page.scss\n\tmodified:   src/app/modals/information/information.page.scss\n\tmodified:   src/app/modals/preview-camera/preview-camera.page.html\n\tmodified:   src/app/modals/preview-camera/preview-camera.page.scss\n\tmodified:   src/app/modals/profile/edit-profile/edit-profile.page.scss\n\tmodified:   src/app/modals/set-room-owner/set-room-owner.page.scss\n\tmodified:   src/app/modals/view-event/view-event.page.html\n\tmodified:   src/app/modals/view-event/view-event.page.scss\n\tmodified:   src/app/modals/view-media/view-media.page.html\n\tmodified:   src/app/modals/view-media/view-media.page.scss\n\tmodified:   src/app/pages/agenda/agenda.page.scss\n\tmodified:   src/app/pages/agenda/edit-event/edit-event.page.scss\n\tmodified:   src/app/pages/agenda/emend-message-modal/emend-message-modal.page.scss\n\tmodified:   src/app/pages/agenda/event-actions-popover/event-actions-popover.page.scss\n\tmodified:   src/app/pages/agenda/new-event/new-event.page.scss\n\tmodified:   src/app/pages/agenda/view-event/view-event.page.html\n\tmodified:   src/app/pages/agenda/view-event/view-event.page.scss\n\tmodified:   src/app/pages/chat/chat.page.scss\n\tmodified:   src/app/pages/chat/edit-group/edit-group.page.scss\n\tmodified:   src/app/pages/chat/group-messages/group-contacts/group-contacts.page.scss\n\tmodified:   src/app/pages/chat/group-messages/group-messages.page.scss\n\tmodified:   src/app/pages/chat/messages/contacts/contacts.page.scss\n\tmodified:   src/app/pages/chat/messages/messages.page.scss\n\tmodified:   src/app/pages/chat/new-group/contacts/contacts.page.scss\n\tmodified:   src/app/pages/chat/new-group/new-group.page.scss\n\tmodified:   src/app/pages/events/attachments/attachments.page.scss\n\tmodified:   src/app/pages/events/attendees/attendees.page.html\n\tmodified:   src/app/pages/events/edit-event/edit-event.page.scss\n\tmodified:   src/app/pages/events/event-detail-modal/event-detail-modal.page.scss\n\tmodified:   src/app/pages/events/event-detail/event-detail.page.scss\n\tmodified:   src/app/pages/events/events.page.scss\n\tmodified:   src/app/pages/gabinete-digital/despachos-pr/despacho-pr/despacho-pr.page.html\n\tmodified:   src/app/pages/gabinete-digital/despachos-pr/despacho-pr/despacho-pr.page.scss\n\tmodified:   src/app/pages/gabinete-digital/despachos-pr/despachos-pr.page.scss\n\tmodified:   src/app/pages/gabinete-digital/despachos/despacho/despacho.page.html\n\tmodified:   src/app/pages/gabinete-digital/despachos/despacho/despacho.page.scss\n\tmodified:   src/app/pages/gabinete-digital/despachos/despachos.page.scss\n\tmodified:   src/app/pages/gabinete-digital/diplomas-assinar/diploma-assinar/diploma-assinar.page.html\n\tmodified:   src/app/pages/gabinete-digital/diplomas-assinar/diploma-assinar/diploma-assinar.page.scss\n\tmodified:   src/app/pages/gabinete-digital/diplomas-assinar/diplomas-assinar.page.scss\n\tmodified:   src/app/pages/gabinete-digital/diplomas-gerar/diplomas-gerar.page.scss\n\tmodified:   src/app/pages/gabinete-digital/diplomas-gerar/diplomas-gerar/diplomas-gerar.page.html\n\tmodified:   src/app/pages/gabinete-digital/diplomas-gerar/diplomas-gerar/diplomas-gerar.page.scss\n\tmodified:   src/app/pages/gabinete-digital/diplomas/diploma/diploma.page.html\n\tmodified:   src/app/pages/gabinete-digital/diplomas/diploma/diploma.page.scss\n\tmodified:   src/app/pages/gabinete-digital/diplomas/diplomas.page.scss\n\tmodified:   src/app/pages/gabinete-digital/discart-expedient-modal/discart-expedient-modal.page.scss\n\tmodified:   src/app/pages/gabinete-digital/event-list/approve-event-modal/approve-event-modal.page.html\n\tmodified:   src/app/pages/gabinete-digital/event-list/approve-event-modal/approve-event-modal.page.scss\n\tmodified:   src/app/pages/gabinete-digital/event-list/approve-event/approve-event.page.html\n\tmodified:   src/app/pages/gabinete-digital/event-list/approve-event/approve-event.page.scss\n\tmodified:   src/app/pages/gabinete-digital/event-list/event-list.page.html\n\tmodified:   src/app/pages/gabinete-digital/event-list/event-list.page.scss\n\tmodified:   src/app/pages/gabinete-digital/expediente/book-meeting-modal/book-meeting-modal.page.scss\n\tmodified:   src/app/pages/gabinete-digital/expediente/expedient-task-modal/expedient-task-modal.page.scss\n\tmodified:   src/app/pages/gabinete-digital/expediente/expediente-detail/expediente-detail.page.html\n\tmodified:   src/app/pages/gabinete-digital/expediente/expediente-detail/expediente-detail.page.scss\n\tmodified:   src/app/pages/gabinete-digital/expediente/expediente.page.scss\n\tmodified:   src/app/pages/gabinete-digital/expedientes-pr/expediente-pr/expediente-pr.page.html\n\tmodified:   src/app/pages/gabinete-digital/expedientes-pr/expediente-pr/expediente-pr.page.scss\n\tmodified:   src/app/pages/gabinete-digital/expedientes-pr/expedientes-pr.page.scss\n\tmodified:   src/app/pages/gabinete-digital/gabinete-digital.page.html\n\tmodified:   src/app/pages/gabinete-digital/gabinete-digital.page.scss\n\tmodified:   src/app/pages/gabinete-digital/pedidos/pedido/pedido.page.html\n\tmodified:   src/app/pages/gabinete-digital/pedidos/pedido/pedido.page.scss\n\tmodified:   src/app/pages/gabinete-digital/pedidos/pedidos.page.html\n\tmodified:   src/app/pages/gabinete-digital/pedidos/pedidos.page.scss\n\tmodified:   src/app/pages/gabinete-digital/pendentes/pendentes.page.scss\n\tmodified:   src/app/pages/inactivity/inactivity.page.scss\n\tmodified:   src/app/pages/login/login.page.scss\n\tmodified:   src/app/pages/publications/edit-action/edit-action.page.scss\n\tmodified:   src/app/pages/publications/gallery/gallery.page.scss\n\tmodified:   src/app/pages/publications/new-action/new-action.page.scss\n\tmodified:   src/app/pages/publications/new-publication/new-publication.page.scss\n\tmodified:   src/app/pages/publications/publications.page.scss\n\tmodified:   src/app/pages/publications/view-publications/publication-detail/publication-detail.page.html\n\tmodified:   src/app/pages/publications/view-publications/publication-detail/publication-detail.page.scss\n\tmodified:   src/app/pages/publications/view-publications/view-publications.page.html\n\tmodified:   src/app/pages/publications/view-publications/view-publications.page.scss\n\tmodified:   src/app/pages/search/organic-entity/organic-entity.page.scss\n\tmodified:   src/app/pages/search/search.page.html\n\tmodified:   src/app/pages/search/search.page.scss\n\tmodified:   src/app/pages/search/sender/sender.page.scss\n\tmodified:   src/app/services/events/attachments/attachments.page.scss\n\tmodified:   src/app/services/events/attendees/attendees.page.html\n\tmodified:   src/app/services/events/edit-event/edit-event.page.scss\n\tmodified:   src/app/services/events/event-detail-modal/event-detail-modal.page.scss\n\tmodified:   src/app/services/events/event-detail/event-detail.page.scss\n\tmodified:   src/app/services/events/events.page.scss\n\tmodified:   src/app/shared/agenda/approve-event/approve-event.page.html\n\tmodified:   src/app/shared/agenda/approve-event/approve-event.page.scss\n\tmodified:   src/app/shared/agenda/edit-event-to-approve/edit-event-to-approve.page.scss\n\tmodified:   src/app/shared/agenda/edit-event/edit-event.page.html\n\tmodified:   src/app/shared/agenda/edit-event/edit-event.page.scss\n\tmodified:   src/app/shared/agenda/event-list/event-list.page.html\n\tmodified:   src/app/shared/agenda/event-list/event-list.page.scss\n\tmodified:   src/app/shared/agenda/new-event/new-event.page.scss\n\tmodified:   src/app/shared/agenda/view-event/view-event.page.html\n\tmodified:   src/app/shared/agenda/view-event/view-event.page.scss\n\tmodified:   src/app/shared/btn-modal-dismiss/btn-modal-dismiss.page.scss\n\tmodified:   src/app/shared/btn-seguinte/btn-seguinte.page.scss\n\tmodified:   src/app/shared/chat/edit-group/edit-group.page.scss\n\tmodified:   src/app/shared/chat/group-messages/group-contacts/group-contacts.page.scss\n\tmodified:   src/app/shared/chat/group-messages/group-messages.page.scss\n\tmodified:   src/app/shared/chat/messages/contacts/contacts.page.scss\n\tmodified:   src/app/shared/chat/messages/messages.page.scss\n\tmodified:   src/app/shared/chat/new-group/contacts/contacts.page.scss\n\tmodified:   src/app/shared/chat/new-group/new-group.page.scss\n\tmodified:   src/app/shared/event/attendee-modal/attendee-modal.page.html\n\tmodified:   src/app/shared/fingerprint/fingerprint.page.scss\n\tmodified:   src/app/shared/gabinete-digital/all-processes/all-processes.page.html\n\tmodified:   src/app/shared/gabinete-digital/all-processes/all-processes.page.scss\n\tmodified:   src/app/shared/gabinete-digital/despachos-pr/despachos-pr.page.scss\n\tmodified:   src/app/shared/gabinete-digital/despachos/despachos.page.html\n\tmodified:   src/app/shared/gabinete-digital/despachos/despachos.page.scss\n\tmodified:   src/app/shared/gabinete-digital/diplomas-assinar/diplomas-assinar.page.html\n\tmodified:   src/app/shared/gabinete-digital/diplomas-assinar/diplomas-assinar.page.scss\n\tmodified:   src/app/shared/gabinete-digital/diplomas-gerar/diplomas-gerar.page.scss\n\tmodified:   src/app/shared/gabinete-digital/diplomas/diplomas.page.html\n\tmodified:   src/app/shared/gabinete-digital/diplomas/diplomas.page.scss\n\tmodified:   src/app/shared/gabinete-digital/edit-event-to-approve/edit-event.page.scss\n\tmodified:   src/app/shared/gabinete-digital/events-to-approve/events-to-approve.page.html\n\tmodified:   src/app/shared/gabinete-digital/events-to-approve/events-to-approve.page.scss\n\tmodified:   src/app/shared/gabinete-digital/expedientes-pr/expedientes-pr.page.html\n\tmodified:   src/app/shared/gabinete-digital/expedientes-pr/expedientes-pr.page.scss\n\tmodified:   src/app/shared/gabinete-digital/expedients/expedients.page.html\n\tmodified:   src/app/shared/gabinete-digital/expedients/expedients.page.scss\n\tmodified:   src/app/shared/gabinete-digital/generic/task-details/task-details.page.html\n\tmodified:   src/app/shared/gabinete-digital/generic/task-details/task-details.page.scss\n\tmodified:   src/app/shared/gabinete-digital/generic/task-list-header/task-list-header.page.html\n\tmodified:   src/app/shared/gabinete-digital/generic/task-list-header/task-list-header.page.scss\n\tmodified:   src/app/shared/gabinete-digital/generic/task-list/task-list.page.scss\n\tmodified:   src/app/shared/gabinete-digital/pedidos/pedidos.page.html\n\tmodified:   src/app/shared/gabinete-digital/pedidos/pedidos.page.scss\n\tmodified:   src/app/shared/gabinete-digital/pendentes/pendentes.page.html\n\tmodified:   src/app/shared/gabinete-digital/pendentes/pendentes.page.scss\n\tmodified:   src/app/shared/header-pr/header-pr.page.html\n\tmodified:   src/app/shared/header-pr/header-pr.page.scss\n\tmodified:   src/app/shared/header/header.page.html\n\tmodified:   src/app/shared/header/header.page.scss\n\tmodified:   src/app/shared/pin/pin.page.scss\n\tmodified:   src/app/shared/popover/actions-options/actions-options.page.scss\n\tmodified:   src/app/shared/popover/bad-request/bad-request.page.scss\n\tmodified:   src/app/shared/popover/chat-popover/chat-popover.page.scss\n\tmodified:   src/app/shared/popover/deploma-options/deploma-options.page.scss\n\tmodified:   src/app/shared/popover/despachos-options/despachos-options.page.scss\n\tmodified:   src/app/shared/popover/despachos-pr-options/despachos-pr-options.page.scss\n\tmodified:   src/app/shared/popover/diplomas-gerar-options/diplomas-gerar-options.page.scss\n\tmodified:   src/app/shared/popover/event-details-documents-options/event-details-documents-options.page.scss\n\tmodified:   src/app/shared/popover/messages-options/messages-options.page.scss\n\tmodified:   src/app/shared/popover/opts-expediente-pr/opts-expediente-pr.page.scss\n\tmodified:   src/app/shared/popover/opts-expediente/opts-expediente.page.scss\n\tmodified:   src/app/shared/popover/request-options/request-options.page.scss\n\tmodified:   src/app/shared/popover/searched-document-options/searched-document-options.page.scss\n\tmodified:   src/app/shared/popover/success-message/success-message.page.scss\n\tmodified:   src/app/shared/publication/edit-action/edit-action.page.scss\n\tmodified:   src/app/shared/publication/new-action/new-action.page.scss\n\tmodified:   src/app/shared/publication/new-publication/new-publication.page.html\n\tmodified:   src/app/shared/publication/new-publication/new-publication.page.scss\n\tmodified:   src/app/shared/publication/view-publications/publication-detail/publication-detail.page.scss\n\tmodified:   src/app/shared/publication/view-publications/view-publications.page.scss\n\tmodified:   src/assets/images/Gabinete Digital_files/event-list-event-list-module.js.download\n\tmodified:   src/global.scss\n\tmodified:   src/style/main.scss\n\tmodified:   src/theme/variables.scss",
   "changeAuthor": "peter.maquiran"
 }
\ No newline at end of file