diff --git a/src/app/domain/process/DispatchDomain.ts b/src/app/domain/process/DispatchDomain.ts
index 676e1c432..946a69524 100644
--- a/src/app/domain/process/DispatchDomain.ts
+++ b/src/app/domain/process/DispatchDomain.ts
@@ -23,7 +23,7 @@ export class DispatchDomain {
    * @activityInstanceName 'Concluir Despacho'
    * @param note 
    * @param documents 
-   * @param serialNumber 
+   * @param serialNumber  
    * @returns 
    */
   @prohibited({userRoleId:[], permission:[]})
diff --git a/src/app/home/home.page.html b/src/app/home/home.page.html
index c668783ba..34b79c980 100644
--- a/src/app/home/home.page.html
+++ b/src/app/home/home.page.html
@@ -5,41 +5,39 @@
   <ion-header class="ion-no-border ">
     <app-header ></app-header>
   </ion-header>
-  
-
-  <ion-tab-bar *ngIf="p.userPermissionCount([permissionList.Agenda.access, permissionList.Gabinete.access, permissionList.Actions.access, permissionList.Chat.access]) >= 2 || (p.userPermission([permissionList.Agenda.access]) &&  SessionStore.user.OwnerCalendars.length != 0) || p.userPermission([permissionList.Gabinete.access])" class="bottoms" slot="bottom">
 
+  <ion-tab-bar class="dnone" *ngIf="p.userPermissionCount([permissionList.Agenda.access, permissionList.Gabinete.access, permissionList.Actions.access, permissionList.Chat.access]) >= 2 || (p.userPermission([permissionList.Agenda.access]) &&  SessionStore.user.OwnerCalendars.length != 0) || p.userPermission([permissionList.Gabinete.access])" class="bottoms" slot="bottom">
       <ion-tab-button *ngIf="SessionStore.user.OwnerCalendars.length >= 1 || p.userPermission([permissionList.Gabinete.access])" (click)="goto('/home/events')" tab="events" [class.active]="ActiveTabService.pages.home">
         <!-- <ion-icon name="home"></ion-icon> -->
-        <ion-icon *ngIf="!ActiveTabService.pages.home" class="nav-icon" src="assets/images/icons-nav-home.svg"></ion-icon>
-        <ion-icon *ngIf="ActiveTabService.pages.home" class="nav-icon" src="assets/images/nav-hover/icons-nav-home-active.svg"></ion-icon>
-        <ion-label>Início</ion-label>
+        <ion-icon *ngIf="!ActiveTabService.pages.home" class="font-30-em" src="assets/images/icons-nav-home.svg"></ion-icon>
+        <ion-icon *ngIf="ActiveTabService.pages.home" class="font-30-em" src="assets/images/nav-hover/icons-nav-home-active.svg"></ion-icon>
+        <ion-label class="font-12-em">Início</ion-label>
       </ion-tab-button>
 
       <ion-tab-button *ngIf="p.userPermission([permissionList.Agenda.access])" (click)="goto('/home/agenda')" tab="agenda" [class.active]="ActiveTabService.pages.agenda">
         <!-- <ion-icon name="calendar"></ion-icon> -->
-        <ion-icon *ngIf="!ActiveTabService.pages.agenda" class="nav-icon" src="assets/images/icons-nav-calendar.svg"></ion-icon>
-        <ion-icon *ngIf="ActiveTabService.pages.agenda" class="nav-icon" src="assets/images/nav-hover/icons-nav-agenda-active.svg"></ion-icon>
-        <ion-label style="margin-bottom: 2px;" class="overflow-visible">Agenda</ion-label>
+        <ion-icon *ngIf="!ActiveTabService.pages.agenda" class="nav-icon font-30-em" src="assets/images/icons-nav-calendar.svg"></ion-icon>
+        <ion-icon *ngIf="ActiveTabService.pages.agenda" class="nav-icon font-30-em" src="assets/images/nav-hover/icons-nav-agenda-active.svg"></ion-icon>
+        <ion-label style="margin-bottom: 2px;" class="overflow-visible font-12-em">Agenda</ion-label>
       </ion-tab-button>
 
       <ion-tab-button *ngIf="p.userPermission([permissionList.Gabinete.access])" (click)="goto('/home/gabinete-digital')" [class.active]="ActiveTabService.pages.gabinete">
         <!-- <ion-icon name="file-tray-stacked"></ion-icon> -->
-        <ion-icon *ngIf="!ActiveTabService.pages.gabinete" class="nav-icon" src="assets/images/icons-nav-gabinete-inactive.svg"></ion-icon>
-        <ion-icon *ngIf="ActiveTabService.pages.gabinete" class="nav-icon" src="assets/images/nav-hover/icons-nav-gabinete-active.svg"></ion-icon>
-        <ion-label>Gabinete</ion-label>
+        <ion-icon *ngIf="!ActiveTabService.pages.gabinete" class="nav-icon font-30-em" src="assets/images/icons-nav-gabinete-inactive.svg"></ion-icon>
+        <ion-icon *ngIf="ActiveTabService.pages.gabinete" class="nav-icon font-30-em" src="assets/images/nav-hover/icons-nav-gabinete-active.svg"></ion-icon>
+        <ion-label class="font-12-em">Gabinete</ion-label>
       </ion-tab-button>
 
       <ion-tab-button *ngIf="p.userPermission([permissionList.Actions.access])" tab="publications" [class.active]="ActiveTabService.pages.publication">
-        <ion-icon *ngIf="!ActiveTabService.pages.publication" class="nav-icon" src="assets/images/icons-nav-actions.svg"></ion-icon>
-        <ion-icon *ngIf="ActiveTabService.pages.publication" class="nav-icon" src="assets/images/nav-hover/icons-nav-actions-active.svg"></ion-icon>
-        <ion-label style="margin-bottom: 2px;" class="overflow-visible">Acções</ion-label>
+        <ion-icon *ngIf="!ActiveTabService.pages.publication" class="nav-icon font-30-em" src="assets/images/icons-nav-actions.svg"></ion-icon>
+        <ion-icon *ngIf="ActiveTabService.pages.publication" class="nav-icon font-30-em" src="assets/images/nav-hover/icons-nav-actions-active.svg"></ion-icon>
+        <ion-label style="margin-bottom: 2px;" class="overflow-visible font-12-em">Acções</ion-label>
       </ion-tab-button>
 
       <ion-tab-button *ngIf="p.userPermission([permissionList.Chat.access])" tab="chat" [class.active]="ActiveTabService.pages.chat">
-        <ion-icon *ngIf="!ActiveTabService.pages.chat" class="nav-icon" src="assets/images/icons-nav-chat-inactive.svg"></ion-icon>
-        <ion-icon *ngIf="ActiveTabService.pages.chat" class="nav-icon" src="assets/images/nav-hover/icons-nav-chat-active.svg"></ion-icon>
-        <ion-label>Chat</ion-label>
+        <ion-icon *ngIf="!ActiveTabService.pages.chat" class="nav-icon font-30-em" src="assets/images/icons-nav-chat-inactive.svg"></ion-icon>
+        <ion-icon *ngIf="ActiveTabService.pages.chat" class="nav-icon font-30-em" src="assets/images/nav-hover/icons-nav-chat-active.svg"></ion-icon>
+        <ion-label class="font-12-em">Chat</ion-label>
       </ion-tab-button>
 
   </ion-tab-bar>
diff --git a/src/app/home/home.page.scss b/src/app/home/home.page.scss
index 2126a0282..e2b076c6e 100644
--- a/src/app/home/home.page.scss
+++ b/src/app/home/home.page.scss
@@ -52,3 +52,20 @@ ion-tab-button.active{
   color: #061b52;
   font-weight: 650;
 }
+
+
+
+@media only screen and (min-width: 100px) {
+
+  ion-tab-button{
+    font-size: 14px;
+  }
+}
+
+@media only screen and (min-width: 500px) {
+
+  ion-tab-button{
+    font-size: 16px;
+  }
+}
+
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 35049c06c..b3a81fcf2 100644
--- a/src/app/modals/profile/edit-profile/edit-profile.page.scss
+++ b/src/app/modals/profile/edit-profile/edit-profile.page.scss
@@ -1,3 +1,5 @@
+@import '~src/function.scss';
+
 .main-content{
   overflow: hidden !important;
 }
@@ -31,7 +33,7 @@
       width: 74.67%;
       margin: 0 auto;
       overflow: auto;
-      font-size: 8.5px;
+      font-size: rem(8.5);
       font-family: Bahnschrift;
 
       .logo-description-content{
@@ -84,7 +86,7 @@
   float: left;
 
   .profile-title{
-    font-size: 20px;
+    font-size: rem(20);
     font-weight: 300;
     margin-bottom: 20px;
   }
@@ -92,7 +94,7 @@
     margin-top: 20px;
     color: black;
     font-family: Roboto;
-    font-size: 13px;
+    font-size: rem(14);
 
     .user-role{
         background-color: white;
@@ -113,15 +115,15 @@
       }
       .ion-icon-class{
         color: #ebebeb;
-        width: 40px;
-        height: 40px;
+        width: rem(40);
+        height: rem(40);
         float: left;
         padding: 5px;
-        font-size: 25px;
+        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;
@@ -135,7 +137,7 @@
 }
 
 .icon{
-  font-size: 40px;
+  font-size: rem(40);
 }
 
 .profile-pic{
@@ -154,12 +156,12 @@
   margin-top: 15px;
   float: left;
   font-family: Roboto;
-  font-size: 13px;
+  font-size: rem(13);
   font-weight: 300;
 
 
   .preference{
-      font-size: 20px;
+      font-size: rem(20);
       margin-bottom: 0 !important;
   }
   .checkBox{
diff --git a/src/app/modals/profile/profile.page.scss b/src/app/modals/profile/profile.page.scss
index c1d0f8708..00469f587 100644
--- a/src/app/modals/profile/profile.page.scss
+++ b/src/app/modals/profile/profile.page.scss
@@ -1,3 +1,5 @@
+@import '~src/function.scss';
+
 .profile-header {
   margin: 0 em(20px);
   // background-color: #0782c9;
@@ -6,7 +8,7 @@
 
   .div-logo{
     background: transparent;
-    width: em(140px);
+    width: em(140);
     justify-content: center;
     display: flex;
     color: black;
@@ -27,7 +29,7 @@
       width: 74.67%;
       margin: 0 auto;
       overflow: auto;
-      font-size: 8.5px;
+      font-size: rem(8.5);
       font-family: Bahnschrift;
 
       .logo-description-content{
@@ -79,19 +81,19 @@
 }
 
 .icon {
-  font-size: 40px;
+  font-size: rem(40);
 }
 
 .profile-name {
   font-weight: 300;
-  font-size: 20px !important;
+  font-size: rem(20) !important;
   margin-bottom: 17px !important;
   color: var(--profile-text-color) !important;
 }
 
 .profile-title {
   font-weight: 300;
-  font-size: 20px !important;
+  font-size: rem(20) !important;
   margin-bottom: 40px !important;
   color: var(--profile-text-color) !important;
 }
@@ -143,7 +145,7 @@ ion-list {
       overflow: auto;
     }
     .notification-icon {
-      font-size: 35px !important;
+      font-size: rem(35) !important;
     }
     .approve-event-time {
       width: fit-content !important;
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/models/dailyworktask.model.ts b/src/app/models/dailyworktask.model.ts
index 0a975bf00..397ecde30 100644
--- a/src/app/models/dailyworktask.model.ts
+++ b/src/app/models/dailyworktask.model.ts
@@ -1,4 +1,3 @@
-import * as internal from "stream";
 
 export class DailyWorkTask {
     SerialNumber: string;
diff --git a/src/app/pages/agenda/agenda.page.html b/src/app/pages/agenda/agenda.page.html
index 37692946a..9b1dc6a9c 100644
--- a/src/app/pages/agenda/agenda.page.html
+++ b/src/app/pages/agenda/agenda.page.html
@@ -18,7 +18,7 @@
           <!--  Calendar is here -->
 
           <div class="calendar-segment-{{profile}}" [class.calendar-segment-pr-force]="SessionStore.user.Profile =='PR'">
-            <div class="calendar-container"  [style.height]="calendarHeight ">
+            <div class="calendar-container"  [class]="calendarHeight">
 
               <ion-row class="ion-justify-content-between calendar-tool-tip">
                 <ion-row class="ion-align-items-center first-row">
@@ -178,25 +178,25 @@
           <div class="calendar-title-container px-20 d-flex">
 
             <ion-row class="timeline-date align-center pr-10">
-              <button class="no-color"  *ngIf="showCalendar" (click)="calendarHeight='75px';showCalendar=false">
+              <button class="no-color"  *ngIf="showCalendar" (click)="calendarHeight=['height-75'];showCalendar=false">
                 <ion-icon *ngIf="ThemeService.currentTheme == 'default' " class="collaps  font-25" src="assets/images/icons-collaps-up.svg" ></ion-icon>
                 <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="collaps  font-25" src="assets/images/theme/gov/icons-collaps-up.svg" ></ion-icon>
                 <ion-icon *ngIf="ThemeService.currentTheme == 'doneIt' "  class="collaps  font-25"  src="assets/images/theme/{{ThemeService.currentTheme}}/icons-collaps-up.svg"></ion-icon>
               </button>
-              <button  class="no-color" *ngIf="!showCalendar" (click)="calendarHeight='356px';showCalendar=true">
+              <button  class="no-color" *ngIf="!showCalendar" (click)="calendarHeight=['height-356'];showCalendar=true">
                 <ion-icon *ngIf="ThemeService.currentTheme == 'default' " class="collaps  font-25" src="assets/images/icons-collaps-down.svg" ></ion-icon>
                 <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="collaps  font-25" src="assets/images/theme/gov/icons-collaps-down.svg" ></ion-icon>
                 <ion-icon *ngIf="ThemeService.currentTheme == 'doneIt' " class="collaps  font-25" src="assets/images/theme/{{ThemeService.currentTheme}}/icons-collaps-down.svg" ></ion-icon>
               </button >
             </ion-row>
 
-            <div style="padding-right: 50px" class=" text-black align-center cursor-pointer" (click)="changeSegment('Combinado')" [class.active]="segment == 'Combinado' ">
+            <div style="padding-right: 50px" class="font-16-em text-black align-center cursor-pointer" (click)="changeSegment('Combinado')" [class.active]="segment == 'Combinado' ">
               Todas
             </div>
-            <div style="padding-right: 50px" class=" text-black align-center cursor-pointer"  (click)="changeSegment('Pessoal')" [class.active]="segment == 'Pessoal' ">
+            <div style="padding-right: 50px" class="font-16-em text-black align-center cursor-pointer"  (click)="changeSegment('Pessoal')" [class.active]="segment == 'Pessoal' ">
               Pessoais
             </div>
-            <div class=" text-black align-center cursor-pointer" (click)="changeSegment('Oficial')" [class.active]="segment == 'Oficial' ">
+            <div class="font-16-em text-black align-center cursor-pointer" (click)="changeSegment('Oficial')" [class.active]="segment == 'Oficial' ">
               Oficiais
             </div>
           </div>
diff --git a/src/app/pages/agenda/agenda.page.scss b/src/app/pages/agenda/agenda.page.scss
index a7db55288..ae30cade3 100644
--- a/src/app/pages/agenda/agenda.page.scss
+++ b/src/app/pages/agenda/agenda.page.scss
@@ -1,3 +1,4 @@
+@import '~src/function.scss';
 
 .event-indicator {
   background: #333;
@@ -55,12 +56,12 @@
     float: left;
   }
   .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;
   }
@@ -145,7 +146,7 @@ input:checked + .slider:before {
   transform: translate(-50%,-50%);
   top: 50%;
   left: 50%;
-  font-size: 12px;
+  font-size: rem(12);
   font-family: Verdana, sans-serif;
 }
 
@@ -201,7 +202,7 @@ input[type="checkbox"]::before{
   position: absolute;
   content: "";
   left: 0;
-  width: 30px;
+  width: rem(30);
   height: 30px;
   background: #fff;
   border-radius: 50%;
@@ -224,7 +225,7 @@ label{
   position: absolute;
   color: #fff;
   font-weight: 600;
-  font-size: 12px;
+  font-size: rem(12);
   pointer-events: none;
 }
 .onbtn{
@@ -245,7 +246,7 @@ td.monthview-primary-with-event {
 }
 .header-title{
   font-family: Roboto;
-  font-size: 25px;
+  font-size: rem(25);
   margin: 0 5px 0 25px;
   padding: 0;
   /* color:#ffffff; */
@@ -260,7 +261,7 @@ td.monthview-primary-with-event {
   border: 0!important;
 
   .div-search{
-    font-size: 45px;
+    font-size: rem(45);
     float: left;
     margin: 0 0 0 10px
   }
@@ -274,7 +275,7 @@ td.monthview-primary-with-event {
     width: 100%;
   }
   .div-profile{
-    font-size: 45px;
+    font-size: rem(45);
     float: right;
     margin-right: 10px;
   }
@@ -295,7 +296,7 @@ td.monthview-primary-with-event {
 }
 
  div ion-raw > ul > li{
-  font-size: 11pt;
+  font-size: rem(15);
   font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
 }
 
@@ -311,10 +312,10 @@ td.monthview-primary-with-event {
 
 .calendar-tool-tip{
   ion-icon{
-    font-size: 30px;
+    font-size: rem(30);
   }
   .arrow-down{
-    font-size: 28px;
+    font-size: rem(28);
   }
 
 }
@@ -341,7 +342,7 @@ td.monthview-primary-with-event {
       padding: 0px;
       li{
         list-style: none;
-        height: 35px;
+        height: rem(35);
         display: flex;
         align-items: center;
       }
@@ -370,7 +371,7 @@ td.monthview-primary-with-event {
 
 
 .capitaliseText{
-  font-size: 20px;
+  font-size: rem(20);
 }
 
 
@@ -389,7 +390,7 @@ td.monthview-primary-with-event {
     justify-content: space-around;
     th {
       font-family: Roboto;
-      font-size: 15px;
+      font-size: rem(15);
       color: rgba(52, 72, 94, 0.54);
       font-weight: normal;
     }
@@ -402,20 +403,20 @@ td.monthview-primary-with-event {
   cursor: pointer;
   padding: 10px 20px;
   .collaps{
-    font-size: 20px;
+    font-size: rem(20);
     padding-right: 8px;
   }
   .filter{
-    font-size: 15px;
+    font-size: rem(15);
     font-weight: normal;
     ion-icon{
-      font-size: 35px;
+      font-size: rem(35);
       color: var(--title-text-color);
     }
     .filter-name{
       color: var(--title-text-color);
       font-family: Roboto;
-      font-size: 15px;
+      font-size: rem(15);
       margin-right: 25px;
       width: 55px;
     }
@@ -434,7 +435,7 @@ td.monthview-primary-with-event {
       z-index: 1000000;
       li{
         padding: 5px 10px;
-        font-size: 15px;
+        font-size: rem(15);
         font-weight: normal;
       }
       li.active{
@@ -450,7 +451,7 @@ td.monthview-primary-with-event {
 }
 
 .timeline-date{
-  font-size: 13px;
+  font-size: rem(13);
   font-weight: 500;
   color: gray;
 }
@@ -471,7 +472,7 @@ td.monthview-primary-with-event {
   .day {
     font-weight: 500;
     color: gray !important;
-    font-size: 13px;
+    font-size: rem(13);
   }
   .EventListBoxBorder{
     padding-bottom: 5px;
@@ -491,19 +492,19 @@ td.monthview-primary-with-event {
     .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;
@@ -516,12 +517,12 @@ td.monthview-primary-with-event {
       width: 100%;
       font-family: Roboto;
       color: black;
-      font-size: 14px;
+      font-size: rem(14);
 
     }
 
     .calendar-owner {
-      font-size: 14px;
+      font-size: rem(14);
     }
     
     .description{
@@ -535,13 +536,13 @@ td.monthview-primary-with-event {
       white-space: nowrap;
       overflow: hidden !important;
       text-overflow: ellipsis !important;
-      font-size: 17px;
+      font-size: rem(17);
     }
 
   }
   .color{
     width: 5px;
-    height: 40px;
+    height: rem(40);
     border-top-right-radius: 5px;
     border-bottom-right-radius: 5px;
     background-color: #f05d5e;
@@ -560,11 +561,11 @@ td.monthview-primary-with-event {
     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;
@@ -861,7 +862,7 @@ app-approve-event{
 
 
 $font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
-$font-size: 11pt;
+$font-size: rem(15);
 
 .changeText{
   font-family: $font-family;
@@ -888,9 +889,6 @@ $font-size: 11pt;
   border: 1.5px solid black;
   color: white;
   display:  none;
-  .text{
-
-  }
 }
 
 
@@ -1004,4 +1002,36 @@ $font-size: 11pt;
   ion-icon {
     color: unset !important;
   }
-}
\ No newline at end of file
+}
+
+
+
+
+@media only screen and (min-width: 100px) {
+
+  .calendar-title-container {
+    font-size: 14px;
+  }
+  .height-75 {
+    height: 75px;
+  }
+  
+  .height-356 {
+    height: 324px;
+  }
+}
+
+@media only screen and (min-width: 500px) {
+
+  .calendar-title-container {
+    font-size: 16px;
+  }
+  .height-75 {
+    height: 75px;
+  }
+  
+  .height-356 {
+    height: 356px;
+  }
+}
+
diff --git a/src/app/pages/agenda/agenda.page.ts b/src/app/pages/agenda/agenda.page.ts
index fdcc88b7b..ec85ae02a 100644
--- a/src/app/pages/agenda/agenda.page.ts
+++ b/src/app/pages/agenda/agenda.page.ts
@@ -67,7 +67,7 @@ export class AgendaPage implements OnInit {
 
   // calendar
   showCalendar: boolean;
-  calendarHeight: string;
+  calendarHeight = [];
 
   // for timeline
   events: CalendarEvent[] = [];
@@ -222,7 +222,7 @@ export class AgendaPage implements OnInit {
       
     }
 
-    this.calendarHeight = "356px";
+    this.calendarHeight = ["height-356"];
     this.showCalendar = true;
     this.timelineDate = momentG(new Date(), 'dd MMMM yyyy');
 
diff --git a/src/app/pages/agenda/edit-event/edit-event.page.html b/src/app/pages/agenda/edit-event/edit-event.page.html
index 952f4793a..021c8307a 100644
--- a/src/app/pages/agenda/edit-event/edit-event.page.html
+++ b/src/app/pages/agenda/edit-event/edit-event.page.html
@@ -8,7 +8,7 @@
         <ion-header>
           <div class="title-content">
             <div class="middle">
-              <ion-label id="vsdfajnl" class="title">Editar Evento</ion-label>
+              <ion-label id="vsdfajnl" class="title" style="font-size: 21.1px">Editar Evento</ion-label>
             </div>
           </div>
         </ion-header>
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.html b/src/app/pages/agenda/new-event/new-event.page.html
index b1f6167be..8b7c48bc9 100644
--- a/src/app/pages/agenda/new-event/new-event.page.html
+++ b/src/app/pages/agenda/new-event/new-event.page.html
@@ -3,7 +3,7 @@
     <div class="main-header">
       <div class="title-content width-100">
         <div class="middle">
-          <ion-label class="title">Novo Evento</ion-label> <br>
+          <ion-label class="title" style="font-size: 21.1px">Novo Evento</ion-label> <br>
           <i style="margin-top: -3px; font-size: 15px;" > Campos marcados com * são obrigatórios</i>
         </div>
       </div>
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 c0202be99..715fdc075 100644
--- a/src/app/pages/agenda/new-event/new-event.page.scss
+++ b/src/app/pages/agenda/new-event/new-event.page.scss
@@ -1,3 +1,5 @@
+@import '~src/function.scss';
+
 ion-content{
     --background:transparent;
 }
@@ -30,7 +32,7 @@ ion-content{
     }
 
     .title{
-      font-size: 25px;
+      font-size: rem(25);
     }
 
   }
@@ -66,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;
@@ -100,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;
@@ -120,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;
@@ -170,7 +172,7 @@ ion-content{
       /* Error Messages */
       .error{
         color:red;
-        font-size: 12px;
+        font-size: rem(12);
         font-weight: bold;
         padding-bottom: 20px;
       }
@@ -191,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 b5c64d9a0..b13445238 100644
--- a/src/app/pages/agenda/view-event/view-event.page.html
+++ b/src/app/pages/agenda/view-event/view-event.page.html
@@ -17,7 +17,7 @@
             </button>
           </div>
           <div class="middle">
-            <p class="title"><span>{{loadedEvent.Subject}}</span></p>
+            <p class="title" style="font-size: 21.1px"><span>{{loadedEvent.Subject}}</span></p>
           </div>
           <div class="menu-options d-flex">
             <button class="btn-no-color" (click)="editEvent()">
@@ -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.html b/src/app/pages/chat/chat.page.html
index 5adf41b91..03b3aad08 100644
--- a/src/app/pages/chat/chat.page.html
+++ b/src/app/pages/chat/chat.page.html
@@ -4,14 +4,14 @@
     <ion-refresher-content>
     </ion-refresher-content>
   </ion-refresher>
-  <div class="main-content d-flex height-100 border-t-radius">
+  <div class="main-content d-flex height-100 border-t-radius viewport-font-size">
       <!-- Aside left -->
       <div class="aside-wrapper d-flex flex-column flex-grow-1">
        <!--  <p class="text-center mt-0 aside-title px-20">Chat</p> -->
        <ion-progress-bar type="indeterminate" *ngIf="ChatSystemService.loadingWholeList"></ion-progress-bar>
           <div class="title-content">
             <div class="div-title">
-              <ion-label class="title">Chat</ion-label>
+              <ion-label class="title font-25-em">Chat</ion-label>
             </div>
             <div class="div-icon">
 
@@ -33,10 +33,10 @@
 
         <ion-toolbar [class.block-button]="showNewEvent || showNewGroup || showContacts">
           <ion-segment [(ngModel)]="segment" (ionChange)="onSegmentChange()">
-            <ion-segment-button value="Contactos">
+            <ion-segment-button value="Contactos" class="font-14-em">
               Conversas
             </ion-segment-button>
-            <ion-segment-button value="Grupos">
+            <ion-segment-button value="Grupos" class="font-14-em">
               Grupos
             </ion-segment-button>
           </ion-segment>
@@ -64,19 +64,19 @@
                         <ion-label >
                           <span >
                             <div >
-                              <div  [class.bold-message]="room.messageUnread == true">
+                              <div class="font-15-em"  [class.bold-message]="room.messageUnread == true">
                                 {{room.name}}
                               </div>
                             </div>
                         </span>
                         </ion-label>
                       </div>
-                      <div class="item-date" [class.item-date-active]="room.id == idSelected">{{room.duration}}</div>
+                      <div class="item-date font-13-em" [class.item-date-active]="room.id == idSelected">{{room.duration}}</div>
                     </div>
                     <div *ngIf="room.lastMessage" class="item-description" [class.item-description-active]="room.id == idSelected">
 
-                      <ion-label *ngIf="room.lastMessage && room.otherUserType == false">{{room.lastMessage.msg}}</ion-label>
-                      <ion-label *ngIf="room.otherUserType == true">está escrever...</ion-label>
+                      <p class="font-13-em" *ngIf="room.lastMessage && room.otherUserType == false">{{room.lastMessage.msg}}</p>
+                      <p class="font-13-em" *ngIf="room.otherUserType == true">está escrever...</p>
                       <!-- <ion-label *ngIf="room.lastMessage.file">
                         <fa-icon *ngIf="room.lastMessage.file.type != 'application/meeting'" icon="file-alt" class="file-icon" [class.set-active-item-font-to-white]="room.id == idSelected"></fa-icon>
                       </ion-label> -->
@@ -84,16 +84,16 @@
                       <div *ngIf="room.lastMessage.file">
                         <fa-icon *ngIf="room.lastMessage.file.type != 'application/meeting' && room.lastMessage.file.type != 'application/img' && room.lastMessage.file.type != 'application/audio'" icon="file-alt" class="file-icon" [class.set-active-item-font-to-white]="room.id == idSelected"></fa-icon>
                         <fa-icon *ngIf="room.lastMessage.file.type == 'application/audio'" icon="file-audio" class="file-icon" [class.set-active-item-font-to-white]="room.id == idSelected"></fa-icon>
-                        <span *ngIf="room.lastMessage.file.type == 'application/audio'"> audio </span>
+                        <span  class="font-13-em" *ngIf="room.lastMessage.file.type == 'application/audio'"> audio </span>
 
                         <fa-icon *ngIf="room.lastMessage.file.type == 'application/meeting'" icon="calendar-alt" class="file-icon" [class.set-active-item-font-to-white]="room.id == idSelected"></fa-icon>
-                        <span> {{room.lastMessage.file.name || room.lastMessage.file.subject}}</span>
+                        <span class="font-13-em"> {{room.lastMessage.file.name || room.lastMessage.file.subject}}</span>
                       </div>
 
                       <ion-label *ngIf="room.lastMessage.attachments">
                         <div *ngIf="room.lastMessage.attachments[0].image_url">
                           <fa-icon icon="image" class="file-icon" [class.set-active-item-font-to-white]="room.id == idSelected"></fa-icon>
-                          <span> Fotografia</span>
+                          <span class="font-13-em"> Fotografia</span>
                         </div>
                       </ion-label>
 
@@ -106,7 +106,7 @@
                   <div class="item-icon"><ion-icon class="icon" slot="start" src="assets/icon/icons-chat-grey.svg"></ion-icon></div>
                   <div class="item-content flex-grow-1 cursor-pointer">
                     <div class="item-title-time">
-                      <div class="item-title"><ion-skeleton-text animated style="width: 50%"></ion-skeleton-text></div>
+                      <div class="item-title font-15-em"><ion-skeleton-text animated style="width: 50%"></ion-skeleton-text></div>
                       <div class="item-date"><ion-skeleton-text animated></ion-skeleton-text></div>
                     </div>
                     <div class="item-description d-flex align-items-center">
@@ -134,26 +134,26 @@
                     <div (click)="openGroupMessagesPage(group.id)" class="item-content flex-grow-1 cursor-pointer">
                       <div class="item-title-time">
                         <div class="item-title" [class.item-title-active]="group.id ==idSelected">
-                          <ion-label [class.bold-message]="group.messageUnread == true">{{group.name.split('-').join(' ')}}</ion-label>
+                          <p class="font-15-em" [class.bold-message]="group.messageUnread == true">{{group.name.split('-').join(' ')}}</p>
                         </div>
-                        <div class="item-date" [class.item-date-active]="group.id ==idSelected" *ngIf="group.lastMessage && !group.customFields.countDownDate">{{group.duration}}</div>
-                        <div class="item-date" [class.item-date-active]="group.id ==idSelected" *ngIf="group.customFields.countDownDate">{{group.countDownTime}}</div>
+                        <div class="item-date font-13-em" [class.item-date-active]="group.id ==idSelected" *ngIf="group.lastMessage && !group.customFields.countDownDate">{{group.duration}}</div>
+                        <div class="item-date font-13-em" [class.item-date-active]="group.id ==idSelected" *ngIf="group.customFields.countDownDate">{{group.countDownTime}}</div>
                       </div>
                       <div *ngIf="group.lastMessage" class="item-description d-flex align-items-center" [class.item-description-active]="group.id ==idSelected">
-                        <div class="item-message" *ngIf="group.otherUserType == false">{{group.lastMessage.u.name}}: {{group.lastMessage.msg}} </div>
-                        <div *ngIf="group.otherUserType == true">{{group.userThatIsTyping}} está escrever ...</div>
+                        <div class="item-message font-13-em" *ngIf="group.otherUserType == false">{{group.lastMessage.u.name}}: {{group.lastMessage.msg}} </div>
+                        <div class="font-13-em" *ngIf="group.otherUserType == true">{{group.userThatIsTyping}} está escrever ...</div>
                         
                         <div class="item-files add-ellipsis" *ngIf="group.lastMessage.file">
                           <fa-icon *ngIf="group.lastMessage.file.type != 'application/meeting' && group.lastMessage.file.type != 'application/audio'" icon="file-alt" class="file-icon" [class.set-active-item-font-to-white]="group.id == idSelected"></fa-icon>
                           <fa-icon *ngIf="group.lastMessage.file.type == 'application/audio'" icon="file-audio" class="file-icon" [class.set-active-item-font-to-white]="group.id == idSelected"></fa-icon>
-                          <span *ngIf="group.lastMessage.file.type == 'application/audio'" class="item-files-title"> audio </span>
+                          <span *ngIf="group.lastMessage.file.type == 'application/audio'" class="item-files-title font-13-em"> audio </span>
                           <fa-icon *ngIf="group.lastMessage.file.type == 'application/meeting'" icon="calendar-alt" class="file-icon" [class.set-active-item-font-to-white]="group.id == idSelected"></fa-icon>
-                          <span *ngIf="group.lastMessage.file.type != 'application/audio' && group.lastMessage.attachments" class="item-files-title"> {{ group.lastMessage.attachments[0].title }}</span>
+                          <span *ngIf="group.lastMessage.file.type != 'application/audio' && group.lastMessage.attachments" class="item-files-title font-13-em"> {{ group.lastMessage.attachments[0].title }}</span>
                         </div>
                         <div  class="item-files" *ngIf="group.attachments">
                           <div *ngIf="group.value.lastMessage.attachments[0].image_url">
                             <fa-icon icon="image" class="file-icon" [class.set-active-item-font-to-white]="group.id == idSelected"></fa-icon>
-                            <span> Fotografia</span>
+                            <span class="font-13-em"> Fotografia</span>
                           </div>
                         </div>
                       </div>
diff --git a/src/app/pages/chat/chat.page.scss b/src/app/pages/chat/chat.page.scss
index d09c59662..984c90447 100644
--- a/src/app/pages/chat/chat.page.scss
+++ b/src/app/pages/chat/chat.page.scss
@@ -1,3 +1,5 @@
+@import '~src/function.scss';
+
 ion-content{
    --background: transparent;
  }
@@ -15,14 +17,11 @@ ion-content{
       padding: 0!important;
       float: left;
     }
-    .title{
-      font-size: 25px;
-    }
     .div-icon{
       display: flex;
       width: fit-content;
       float: right;
-      font-size: 35px;
+      font-size: em(35);
       overflow: auto;
       padding: 1px;
       justify-content: flex-end;
@@ -56,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;
@@ -77,12 +76,12 @@ ion-content{
   overflow: hidden;
 
   .item-icon{
-    width: 40px;
+    width: em(40);
     float: left;
 
     .icon{
       margin-top: 10px;
-      font-size: 40px;
+      font-size: em(40);
     }
   }
   .item-content{
@@ -98,7 +97,6 @@ ion-content{
   .item-title{
       width: calc(100% - 90px);
       float: left;
-      font-size: 15px;
       color: var(--title-text-color);
   }
   .item-title-active{
@@ -107,7 +105,6 @@ ion-content{
   .item-date{
     width: 90px;
     float: right;
-    font-size: 13px;
     color: #797979;
     text-align: right;
   }
@@ -116,7 +113,6 @@ ion-content{
   }
 
   .item-description{
-    font-size: 13px;
     color: #000;
     overflow: auto;
 
@@ -149,7 +145,7 @@ ion-content{
       width: 35%;
       border-right: 1px solid #d8d8d8;
       .aside-title{
-        font-size: 25px;
+        font-size: em(25);
       }
     }
     /* .aside{
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 428f62e08..2717a7a4e 100644
--- a/src/app/pages/chat/edit-group/edit-group.page.scss
+++ b/src/app/pages/chat/edit-group/edit-group.page.scss
@@ -1,3 +1,5 @@
+@import '~src/function.scss';
+
 ion-content{
     --background:transparent;
 }
@@ -14,7 +16,7 @@ ion-content{
     border: 0!important;
 
     .div-search{
-      font-size: 45px;
+      font-size: rem(45);
       float: left;
       margin: 0 0 0 10px
     }
@@ -28,7 +30,7 @@ ion-content{
       width: 100%;
     }
     .div-profile{
-      font-size: 45px;
+      font-size: rem(45);
       float: right;
       margin-right: 10px;
     }
@@ -56,7 +58,7 @@ ion-content{
       .left{
         width: 37px;
         float: left;
-        font-size: 35px;
+        font-size: rem(35);
         overflow: auto;
        }
        .middle{
@@ -68,19 +70,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;
     }
@@ -118,7 +120,7 @@ ion-content{
 
       .item-container-no-border ion-label{
           padding-left: 10px;
-          font-size: 12px;
+          font-size: rem(12);
           color: #000;
       }
   }
@@ -132,16 +134,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: 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 5275b7718..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
@@ -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;
   
@@ -136,12 +138,12 @@
          margin: 0 !important;
          width: 330px;
          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/pages/chat/group-messages/group-messages.page.scss b/src/app/pages/chat/group-messages/group-messages.page.scss
index 7ee672bb2..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;
           }
 
@@ -42,7 +42,7 @@
               width: 100%;
               padding: 0!important;
               margin: 0 0 0 10px;
-              font-size: 25px;
+              font-size: rem(25);
             }
           }
           .middle-container-options{
@@ -53,18 +53,18 @@
 
             .middle-container-options-icons{
               color: #0782c9;
-              font-size: 23px;
+              font-size: rem(23);
             }
           }
           .right{
             padding: 0!important;
             float: right;
-            font-size: 25px;
+            font-size: rem(25);
             color: #0782c9;
           }
           .header-top-btn{
             background: transparent;
-            font-size: 25px !important;
+            font-size: rem(25) !important;
             font-weight: 100 !important;
             /* color: #0782c9; */
             color: #42b9fe;
@@ -77,15 +77,15 @@
           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: calc(100% - 40px);
-            font-size: 15px;
+            font-size: rem(15);
             color: #797979;
             white-space: nowrap;
             overflow: hidden;
@@ -103,9 +103,9 @@
         }
 
         .div-icon{
-          width: 40px;
+          width: rem(40);
           float: right;
-          font-size: 35px;
+          font-size: rem(35);
           overflow: auto;
           padding: 1px;
         }
@@ -121,7 +121,7 @@
      width: em(422px);
      background: #ebebeb;
      text-align: center;
-     font-size: 13px;
+     font-size: rem(13);
      color: #797979;
      padding: 10px;
      margin: 0 auto;
@@ -135,7 +135,7 @@
      height: auto;
      background: var(--chat-alert-msg-color);
      text-align: center;
-     font-size: 13px;
+     font-size: rem(13);
      color: #262420;
      padding: 10px;
      margin: 10px auto;
@@ -152,16 +152,16 @@
     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;
     }
    }
    .messages{
-    font-size: 13px;
+    font-size: rem(13);
     font-family: Roboto;
     overflow: auto;
 
@@ -237,10 +237,10 @@
 
  .info-meeting{
   /* width: 322px; */
-  width: em(422px);
+  width: em(422);
   background: var(--chat-alert-msg-color);
   text-align: center;
-  font-size: 13px;
+  font-size: rem(13);
   color: #262420;
   padding: 10px;
   margin: 10px auto;
@@ -249,11 +249,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{
     color: #0782c9;
@@ -282,13 +282,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(40);
    margin: 0 auto;
    margin-top: 4px;
  }
@@ -351,7 +351,7 @@
   left: 0px;
   margin-left: 22px;
   display: flex;
-  font-size: 12px;
+  font-size: rem(12);
   align-items: center;
 }
 
@@ -385,7 +385,7 @@
 }
 
 .float-status-all {
-  font-size: 10pt !important;
+  font-size: rem(13)  !important;
 }
 
 .try {
@@ -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 157f8d7c9..a0296cec5 100644
--- a/src/app/pages/chat/messages/contacts/contacts.page.scss
+++ b/src/app/pages/chat/messages/contacts/contacts.page.scss
@@ -1,3 +1,4 @@
+@import '~src/function.scss';
 
 .header-toolbar{
     --background:transparent;
@@ -16,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;
      }
@@ -35,7 +36,7 @@
      .back-icon{
        width: 37px;
        float: left;
-       font-size: 35px;
+       font-size: rem(35);
        overflow: auto;
          
        }
@@ -46,7 +47,7 @@
          margin: 2.5px 0 0 5px;
      }
      .title{
-         font-size: 25px;
+         font-size: rem(25);
      }
    }
  }
@@ -89,7 +90,7 @@
  
      .item-divider{
        background: #ebebeb;
-       font-size: 15px;
+       font-size: rem(15);
        margin: 10px 0 10px 0;
        padding:5px 0 5px 20px;
   
@@ -106,13 +107,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/pages/chat/messages/messages.page.scss b/src/app/pages/chat/messages/messages.page.scss
index d4f77f639..db2f70427 100644
--- a/src/app/pages/chat/messages/messages.page.scss
+++ b/src/app/pages/chat/messages/messages.page.scss
@@ -1,4 +1,22 @@
 @import '~src/function.scss';
+
+
+
+@media only screen and (min-width: 100px) {
+
+  :host{
+    font-size: 14px;
+  }
+}
+
+@media only screen and (min-width: 500px) {
+
+  :host{
+    font-size: 16px;
+  }
+}
+
+
 .header-toolbar{
     --background:transparent;
     --opacity: 1;
@@ -24,12 +42,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;
@@ -58,13 +76,13 @@
 
             .middle-container-options-icons{
               color: #0782c9;
-              font-size: 23px;
+              font-size: rem(23);
             }
           }
           .right{
             padding: 0!important;
             float: right;
-            font-size: 25px;
+            font-size: rem(25 );
             color: #0782c9;
             margin: 5px 0 0 0;
           }
@@ -75,15 +93,15 @@
           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;
@@ -95,16 +113,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;
         }
@@ -118,19 +136,19 @@
  ion-content{
    .welcome-text{
     /* width: 322px; */
-     width: em(422px);
+     width: rem(422);
      background: #ebebeb;
      text-align: center;
-     font-size: 13px;
+     font-size: rem(13) ;
      color: #797979;
      padding: 10px;
      margin: 0 auto;
-     line-height: 1.2rem;
+     line-height: 1.2rrem;
      margin: 20px 39px 25px;
      border-radius: 8px;
    }
    .messages{
-    font-size: 13px;
+    font-size: rem(13) ;
     font-family: Roboto;
     overflow: auto;
 
@@ -145,10 +163,10 @@
     word-wrap: break-word;
     -webkit-overflow-scrolling: touch;
 
-    .messages-list-item-wrapper{
+    .messages-list-itrem-wrapper{
       overflow: hidden;
     }
-    .messages-list-item-wrapper-active{
+    .messages-list-itrem-wrapper-active{
       background: #e6f6ff75 !important;
     }
 
@@ -190,23 +208,23 @@
 
  .info-meeting{
   /* width: 322px; */
-  width: em(422px);
+  width: rem(422);
   background: var(--chat-alert-msg-color);
   text-align: center;
-  font-size: 13px;
+  font-size: rem(13) ;
   color: #262420;
   padding: 10px;
   margin: 10px auto;
-  line-height: 1.2rem;
+  line-height: 1.2rrem;
   /* margin: 15px 0px 15px 0px; */
   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{
     color: #0782c9;
@@ -225,18 +243,18 @@
  .container{
    justify-content: center;
    justify-content: space-evenly;
-   align-items: center;
+   align-itrems: center;
  }
 
  .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(40);
    margin: 0 auto;
    margin-top: 4px;
  }
@@ -246,7 +264,7 @@
    border: 1px solid #ebebeb;
    border-radius: 25px;
    padding-left: 15px;
-   align-items: center;
+   align-itrems: center;
    overflow: auto;
 
    ion-textarea{
@@ -259,7 +277,7 @@
 }
 
  .text-color-blue{
-    font-size: 15px;
+    font-size: rem(15);
     color: #0782c9;
     font-weight: 500;
     letter-spacing: normal;
@@ -309,8 +327,8 @@ display: block;
   left: 0px;
   margin-left: 22px;
   display: flex;
-  font-size: 12px;
-  align-items: center;
+  font-size: rem(12);
+  align-itrems: center;
 }
 
 
@@ -334,14 +352,14 @@ button::-moz-focus-inner {
   position: relative !important;
   float: right;
   display: flex;
-  align-items: self-end;
+  align-itrems: self-end;
 }
 
 .float-status-image{
   position: relative !important;
   float: right;
   display: flex;
-  align-items: self-end;
+  align-itrems: self-end;
   top: -15px;
 }
 
@@ -350,11 +368,11 @@ button::-moz-focus-inner {
   top: 0px !important;
   float: right;
   display: flex;
-  align-items: self-end;
+  align-itrems: self-end;
 }
 
 .float-status-all {
-  font-size: 10pt !important;
+  font-size: rem(13) !important;
 }
 
 .try {
@@ -363,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/messages/messages.page.ts b/src/app/pages/chat/messages/messages.page.ts
index 32f363959..f32b65a80 100644
--- a/src/app/pages/chat/messages/messages.page.ts
+++ b/src/app/pages/chat/messages/messages.page.ts
@@ -1,15 +1,12 @@
-import { AfterViewInit, ChangeDetectorRef, Component, ElementRef, OnDestroy, OnInit, ViewChild } from '@angular/core';
-import { ActivatedRoute, Route, Router } from '@angular/router'
+import { AfterViewInit, Component, ElementRef, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import { Router } from '@angular/router'
 import { GestureController, ModalController, NavParams, PopoverController, Platform, AlertController } from '@ionic/angular';
 import { ViewDocumentPage } from 'src/app/modals/view-document/view-document.page';
 import { EventPerson } from 'src/app/models/eventperson.model';
 import { ExpedientTaskModalPageNavParamsTask } from 'src/app/models/ExpedientTaskModalPage';
 import { ContactsPage } from 'src/app/pages/chat/messages/contacts/contacts.page';
 import { AlertService } from 'src/app/services/alert.service';
-import { AuthService } from 'src/app/services/auth.service';
-import { ChatService } from 'src/app/services/chat.service';
 import { FileService } from 'src/app/services/functions/file.service';
-import { ProcessesService } from 'src/app/services/processes.service';
 import { ToastService } from 'src/app/services/toast.service';
 import { ChatOptionsPopoverPage } from 'src/app/shared/popover/chat-options-popover/chat-options-popover.page';
 import { MessagesOptionsPage } from 'src/app/shared/popover/messages-options/messages-options.page';
@@ -20,22 +17,15 @@ import { ThemeService } from 'src/app/services/theme.service'
 
 import { VoiceRecorder, RecordingData, GenericResponse } from 'capacitor-voice-recorder';
 import { Haptics, ImpactStyle } from '@capacitor/haptics';
-import { SqliteService } from 'src/app/services/sqlite.service';
 import { ViewEventPage } from 'src/app/modals/view-event/view-event.page';
 import { ChatSystemService } from 'src/app/services/chat/chat-system.service'
 import { MessageService } from 'src/app/services/chat/message.service';
-import { AttachmentsService } from 'src/app/services/attachments.service';
-
-import { CameraService } from 'src/app/services/camera.service';
-import { element } from 'protractor';
 import { FileType } from 'src/app/models/fileType';
 import { SearchPage } from 'src/app/pages/search/search.page';
 import { Storage } from '@ionic/storage';
-import { FileToBase64Service } from 'src/app/services/file/file-to-base64.service';
 import { Camera, CameraResultType, CameraSource } from '@capacitor/camera';
 import { DomSanitizer } from '@angular/platform-browser';
 import { SessionStore } from 'src/app/store/session.service';
-import { HttpErrorResponse } from '@angular/common/http';
 import { ViewMediaPage } from 'src/app/modals/view-media/view-media.page';
 import { File } from '@awesome-cordova-plugins/file/ngx';
 import { FileOpener } from '@awesome-cordova-plugins/file-opener/ngx';
@@ -118,16 +108,13 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
     private gestureController: GestureController,
     public ThemeService: ThemeService,
     private platform: Platform,
-    private sqlservice: SqliteService,
     public ChatSystemService: ChatSystemService,
-    private CameraService: CameraService,
     private storage: Storage,
     //private fileOpener: FileOpener,
     private sanitiser: DomSanitizer,
     // private document: DocumentViewer
     private file: File,
     private fileOpener: FileOpener,
-    private notificationService: NotificationsService,
     private router: Router
   ) {
     this.loggedUser = SessionStore.user.ChatData['data'];
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 9f66c7eb7..a3d20fdd1 100644
--- a/src/app/pages/chat/new-group/contacts/contacts.page.scss
+++ b/src/app/pages/chat/new-group/contacts/contacts.page.scss
@@ -1,4 +1,6 @@
 
+@import '~src/function.scss';
+
 .header-toolbar{
    --background:transparent;
    --opacity: 1;
@@ -16,9 +18,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 +37,7 @@
     .back-icon{
       width: 37px;
       float: left;
-      font-size: 35px;
+      font-size: rem(35);
       overflow: auto;
         
       }
@@ -46,7 +48,7 @@
         margin: 2.5px 0 0 5px;
     }
     .title{
-        font-size: 25px;
+        font-size: rem(25);
     }
   }
 }
@@ -87,7 +89,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 +114,12 @@ ion-content{
         margin: 0 !important;
         width: 330px;
         padding-left: 10px;
-        font-size: 15px;
+        font-size: rem(15);
         color: var(--title-text-color);
         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/pages/chat/new-group/new-group.page.scss b/src/app/pages/chat/new-group/new-group.page.scss
index 3c0239197..bdaeba538 100644
--- a/src/app/pages/chat/new-group/new-group.page.scss
+++ b/src/app/pages/chat/new-group/new-group.page.scss
@@ -1,3 +1,5 @@
+@import '~src/function.scss';
+
 ion-content{
     --background:transparent;
 }
@@ -14,7 +16,7 @@ ion-content{
     border: 0!important;
 
     .div-search{
-      font-size: 45px;
+      font-size: rem(45);
       float: left;
       margin: 0 0 0 10px
     }
@@ -28,7 +30,7 @@ ion-content{
       width: 100%;
     }
     .div-profile{
-      font-size: 45px;
+      font-size: rem(45);
       float: right;
       margin-right: 10px;
     }
@@ -55,7 +57,7 @@ ion-content{
       .left{
         width: 37px;
         float: left;
-        font-size: 35px;
+        font-size: rem(35);
         overflow: auto;
        }
        .middle{
@@ -67,26 +69,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;
     }
@@ -122,7 +124,7 @@ ion-content{
 
       .item-container-no-border ion-label{
           padding-left: 10px;
-          font-size: 12px;
+          font-size: rem(12);
           color: #000;
       }
   }
@@ -136,16 +138,16 @@ ion-content{
         overflow: 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) !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.html b/src/app/pages/events/events.page.html
index db3b89d62..550d1b036 100644
--- a/src/app/pages/events/events.page.html
+++ b/src/app/pages/events/events.page.html
@@ -28,22 +28,22 @@
       <div class="box-container width-100 d-flex mx-20" style="padding: 0px;overflow: hidden;">
         <ion-progress-bar type="indeterminate" *ngIf="loadingAllTask || TaskService.showLoader"></ion-progress-bar>
         <div class="px-20 pb-20 container-filters">
-          <p class="time ion-text-left ">{{customDate}}</p>
+          <p class="time ion-text-left font-18-em">{{customDate}}</p>
           <div class="filters-box wrap d-flex float-left">
             
-            <div class="event-box pointer hideMobile" (click)="goToAllTaskFilter('ForToDay')">
+            <div class="event-box mr-20 pointer hideMobile font-14-em" (click)="goToAllTaskFilter('ForToDay')">
               <!-- <p>correspondencia com prazo para hoje</p> -->
               <p>Correspondências com prazo para hoje</p>
               <span>{{ TaskService.deadline }}</span>
             </div>
             
-            <div class="event-box pointer hideMobile" (click)="goToAllTaskFilter('OverdueTasks')">
+            <div class="event-box mr-20 pointer hideMobile font-14-em" (click)="goToAllTaskFilter('OverdueTasks')">
               <!-- <p>correspondencia em atraso</p> -->
               <p>Correspondências em atraso</p>
               <span>{{ TaskService.overdueTasks }}</span>
             </div>
         
-            <div class="event-box pointer hideMobile" (click)="goToAllTaskFilter('unread')">
+            <div class="event-box mr-20 pointer hideMobile font-14-em" (click)="goToAllTaskFilter('unread')">
               <!-- <p>correspondencia não lidas</p> -->
               <p>Correspondências não lidas</p>
               <span>{{ TaskService.unread }}</span>
@@ -52,17 +52,17 @@
 
             <!-- ««««««««««««««««««««««««««««««««««««««««««««« -->
 
-            <div class="event-box pointer d-none showMobile" (click)="goToAllTaskFilter('ForToDay')">
+            <div class="event-box pointer d-none showMobile font-14-em" (click)="goToAllTaskFilter('ForToDay')">
               <!-- <p>correspondencia com prazo para hoje</p> -->
               <p>Correspondências com prazo para hoje <b>{{ TaskService.deadline }}</b></p>
             </div>
             
-            <div class="event-box pointer d-none showMobile" (click)="goToAllTaskFilter('OverdueTasks')">
+            <div class="event-box pointer d-none showMobile font-14-em" (click)="goToAllTaskFilter('OverdueTasks')">
               <!-- <p>correspondencia em atraso</p> -->
               <p>Correspondências em atraso <b>{{ TaskService.overdueTasks }}</b></p>
             </div>
         
-            <div class="event-box pointer d-none showMobile" (click)="goToAllTaskFilter('unread')">
+            <div class="event-box pointer d-none showMobile font-14-em" (click)="goToAllTaskFilter('unread')">
               <!-- <p>correspondencia não lidas</p> -->
               <p>Correspondências não lidas <b>{{ TaskService.unread }}</b></p>
             </div>
@@ -83,21 +83,21 @@
                 <button title="Ir para a sua Agenda" class="btn-no-color" [routerLink]="['/home/agenda']">
                   <ion-icon
                   *ngIf="ThemeService.currentTheme == 'default' "
-                  class="icon-next"
+                  class="icon-next font-35-rem"
                   slot="end"
                   src="assets/images/icons-arrow-circle-arrow-right.svg"
                   ></ion-icon>
         
                   <ion-icon
                   *ngIf="ThemeService.currentTheme == 'gov' "
-                  class="icon-next"
+                  class="icon-next font-35-rem"
                   slot="end"
                   src="assets/images/theme/gov/icons-arrow-circle-arrow-right.svg"
                   ></ion-icon>
         
                   <ion-icon
                   *ngIf="ThemeService.currentTheme == 'doneIt' "
-                  class="icon-next"
+                  class="icon-next font-35-em"
                   slot="end"
                   src="assets/images/theme/doneIt/icons-arrow-circle-arrow-right.svg"
                   ></ion-icon>
@@ -202,26 +202,26 @@
         <div class="schedule-header">
           <div class="title">
             <ion-icon class="icon" slot="end" src="assets/images/icons-default-agenda.svg" ></ion-icon>
-            <div class="text">A sua agenda do dia</div>
+            <div class="font-size-20">A sua agenda do dia</div>
           </div>
-          <button title="Ir para a sua Agenda" class="btn-no-color" [routerLink]="['/home/agenda']">
+          <button class="transparent--background" title="Ir para a sua Agenda" [routerLink]="['/home/agenda']">
             <ion-icon
             *ngIf="ThemeService.currentTheme == 'default' "
-            class="icon-next"
+            class="icon-next-color font-35-em"
             slot="end"
             src="assets/images/icons-arrow-circle-arrow-right.svg"
             ></ion-icon>
   
             <ion-icon
             *ngIf="ThemeService.currentTheme == 'gov' "
-            class="icon-next"
+            class="icon-next-color font-35-em"
             slot="end"
             src="assets/images/theme/gov/icons-arrow-circle-arrow-right.svg"
             ></ion-icon>
   
             <ion-icon
             *ngIf="ThemeService.currentTheme == 'doneIt' "
-            class="icon-next"
+            class="icon-next-color font-35-em"
             slot="end"
             src="assets/images/theme/doneIt/icons-arrow-circle-arrow-right.svg"
             ></ion-icon>
diff --git a/src/app/pages/events/events.page.scss b/src/app/pages/events/events.page.scss
index d7c7cb401..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,18 +298,17 @@ 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);
   }
 }
 .time{
   font-family: Roboto;
-  font-size: 18pt;
   text-align: center;
   color: var(--header-tab-text-white);
   line-height: unset;
@@ -334,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);
   }
 }
@@ -374,22 +373,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;
+      font-size: rem(35);
+    }
+    .icon-next-color {
+      color: #e8e8e8;
     }
   }
   .content{
@@ -428,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;
@@ -450,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%;
@@ -459,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)
@@ -472,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;
@@ -489,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;
@@ -497,7 +496,7 @@ ion-toolbar{
     }
     .event-num, .first-event-time{
       font-family: Roboto;
-      font-size: 15px;
+      font-size: rem(15);
       display: block;
       color: black;
     }
@@ -606,6 +605,8 @@ ion-title{
     width: 150px;
     height: 90px;
     margin:5px;
+    margin-left: 0px;
+    margin-right: 0px;
     flex-direction: column;
     display: flex;
     justify-content: space-between;
@@ -616,12 +617,11 @@ ion-title{
     -o-border-radius: 10px;
     padding: 10px;
     p{
-      font-size: 14px;
       margin-bottom: 5px;
       line-height: 15px;
     }
     span {
-      font-size: 15px;
+      font-size: rem(15);
       font-weight: 600;
     }
   }
@@ -678,3 +678,21 @@ ion-title{
 .event-box-content {
   justify-content: flex-start !important;
 }
+
+
+
+@media only screen and (min-width: 100px) {
+
+  .container-filters, .filters-box, .schedule-header, .Goto-agenda{
+    font-size: 14px;
+  }
+
+}
+
+@media only screen and (min-width: 500px) {
+
+  .container-filters, .filters-box, .schedule-header, .Goto-agenda {
+    font-size: 16px;
+  }
+}
+
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 30bba2131..e10f7719a 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 mergedArray"
             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 b13eb43b8..af5049884 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
@@ -23,7 +23,7 @@ ion-content, .main-content{
 }
 .main-header{
     font-family: Roboto;
-    font-size: 25px;
+    font-size: rem(25);
     color:#000;
     overflow: auto;
     // padding: 30px 20px 0 20px !important;
@@ -48,13 +48,13 @@ ion-content, .main-content{
     border-bottom: 5px solid #42b9fe;
 
     .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{
@@ -97,12 +97,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;
   }
@@ -112,7 +112,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;
@@ -120,14 +120,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;
 }
 
@@ -151,7 +151,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;
@@ -164,17 +164,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(14);
     }
   }
 }
@@ -183,7 +183,7 @@ ion-item{
 
 }
 .exp-middle-detail{
-  font-size: 12pt;
+  font-size: rem(16);
   width: 100%;
   overflow: auto;
 
@@ -203,7 +203,7 @@ ion-item{
   .exp-date{
     width: auto;
     font-family: Roboto;
-    font-size: 10pt;
+    font-size: rem(14);
     font-weight: normal;
     font-stretch: normal;
     font-style: normal;
@@ -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;
@@ -236,7 +236,7 @@ ion-item{
   overflow: auto;
 }
 .div-search{
-  font-size: 45px;
+  font-size: rem(45);
   float: left;
   margin: 0 0 0 10px
 }
@@ -250,7 +250,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/despachos/despacho/despacho.page.html b/src/app/pages/gabinete-digital/despachos/despacho/despacho.page.html
index 45e0c1afa..7ff3cc199 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 mergedArray">
               <ion-label class="d-block" (click)="viewDocument(Document.DocId, Document,Document.content)">
                 <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 b106ba21b..9af2d194a 100644
--- a/src/app/pages/gabinete-digital/despachos/despachos.page.scss
+++ b/src/app/pages/gabinete-digital/despachos/despachos.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(11);
   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;
 }
@@ -244,14 +244,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/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 4da539873..afb5a5173 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 mergedArray"
             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 74c16bc27..4294ec5ca 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 mergedArray"
             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 93615529a..36d81587c 100644
--- a/src/app/pages/gabinete-digital/gabinete-digital.page.html
+++ b/src/app/pages/gabinete-digital/gabinete-digital.page.html
@@ -46,11 +46,11 @@
               
               <div class="d-flex" (click)="reorderList('old')" *ngIf="ordinance == 'recent' && !hideRefreshBtn ">
 
-                <ion-icon  class="ml-10"  src="assets/images/theme/gov/crescente.svg" ></ion-icon>
+                <ion-icon  class="ml-10 font-25-rem"  src="assets/images/theme/gov/crescente.svg" ></ion-icon>
               </div>
 
               <div class="d-flex" (click)="reorderList('recent')" *ngIf="ordinance != 'recent' && !hideRefreshBtn ">
-                <ion-icon  class="ml-10"  src="assets/images/theme/gov/decrescente.svg" ></ion-icon>
+                <ion-icon  class="ml-10 font-25-rem"  src="assets/images/theme/gov/decrescente.svg" ></ion-icon>
               </div>
             
             </div>
@@ -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 86da78e37..009ff04b9 100644
--- a/src/app/pages/gabinete-digital/gabinete-digital.page.scss
+++ b/src/app/pages/gabinete-digital/gabinete-digital.page.scss
@@ -1,3 +1,5 @@
+@import '~src/function.scss';
+
 ion-content{
   /*  --padding-top:15px; */
  /*   --padding-end:15px;
@@ -17,7 +19,7 @@ ion-content{
    --margin-bottom: 5px;
    --margin-top: 0px;
  
-   min-height: 25px;
+   min-height: rem(25);
    min-width: 25px;
  }
  :host{
@@ -34,7 +36,7 @@ ion-content{
  
      .title{
        width: fit-content;
-       font-size: 25px !important;
+       font-size: rem(25) !important;
        float: left;
      }
      .btn-no-color{
@@ -44,7 +46,7 @@ ion-content{
      .title-icon{
        float: right;
        margin-right: 20px;
-       font-size: 30px;
+       font-size: rem(30);
        color: #42b9fe;
      }
      .title-icons{
@@ -53,7 +55,7 @@ ion-content{
        align-self: baseline;
      }
      .title-icons fa-icon{
-       font-size: 25px !important;
+       font-size: rem(25) !important;
      }
    }
  
@@ -90,7 +92,7 @@ ion-content{
    border: 0!important;
  
    .div-search{
-     font-size: 45px;
+     font-size: rem(45);
      float: left;
      margin: 0 0 0 10px
    }
@@ -104,7 +106,7 @@ ion-content{
      width: 100%;
    }
    .div-profile{
-     font-size: 45px;
+     font-size: rem(45);
      float: right;
      margin-right: 10px;
    }
@@ -173,7 +175,7 @@ ion-content{
  
        .exp-card-icon{
          width: fit-content;
-         font-size: 48px;
+         font-size: rem(48);
          float: left !important;
        }
        .exp-card-text{
@@ -188,17 +190,17 @@ ion-content{
        margin: 0 auto;
      }
      .exp-card ion-icon{
-       font-size: 48px !important;
+       font-size: rem(48) !important;
      }
      .exp-card fa-icon{
-       font-size: 30px;
+       font-size: rem(30);
        padding: 0 1px 0 1px;
        margin: 6px;
        //border: 1px solid #ccc;
        color: #797979;
      }
      .exp-card-title{
-       font-size: 15px;
+       font-size: rem(15);
        color: var(--title-text-color);;
        font-family: Roboto;
        font-weight: bold;
@@ -212,7 +214,7 @@ ion-content{
  
      }
      .exp-card-content{
-       font-size: 13px;
+       font-size: rem(13);
        color: #797979;
        margin: 11px 0 0;
        font-family: Roboto;
@@ -238,11 +240,11 @@ ion-content{
    float: left;
  }
  .title{
-   font-size: 25px;
+   font-size: rem(25);
  }
  .div-icon{
    float: right;
-   font-size: 35px;
+   font-size: rem(35);
    overflow: auto;
  }
  
@@ -256,7 +258,7 @@ ion-content{
    border:1px solid #e9e9e9 !important;
    background-color: #fff !important;
    margin-bottom: 10px !important;
-   padding: 15px;
+   padding: rem(15);
  
    .item{
      background-color: var(--white);
@@ -267,7 +269,7 @@ ion-content{
        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;
@@ -285,22 +287,22 @@ 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);
          }
        }
      }
      .item-middle-detail{
-       font-size: 10pt;
+       font-size: rem(13);
        width: 100%;
        overflow: auto;
        padding-left: 3px;
@@ -310,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;
@@ -323,7 +325,7 @@ ion-content{
        }
      }
      .item-middle-detail-extra{
-       font-size: 10pt;
+       font-size: rem(13);
        padding-left: 3px;
        //border: 1px solid red;
  
@@ -337,7 +339,7 @@ ion-content{
        }
      }
      .item-bottom-detail{
-       font-size: 12pt;
+       font-size: rem(16);
        width: 100%;
        overflow: auto;
        margin-top: 10px;
@@ -352,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;
@@ -361,7 +363,7 @@ ion-content{
        .item-date{
          width: auto;
          font-family: Roboto;
-         font-size: 10pt;
+         font-size: rem(13);
          font-weight: normal;
          font-stretch: normal;
          font-style: normal;
@@ -401,7 +403,7 @@ ion-content{
      --background: transparent;
    }
    .title{
-     font-size: 15px !important;
+     font-size: rem(15) !important;
    }
  
    .main-content{
@@ -425,7 +427,7 @@ ion-content{
        }
        .aside-title{
          font-family: Roboto;
-         font-size: 16px !important;
+         font-size: rem(16) !important;
          text-align: left;
        }
        .exp-card{
@@ -523,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%;
@@ -534,7 +536,7 @@ ion-content{
    }
    .aside-title{
      font-family: Roboto;
-     font-size: 25px;
+     font-size: rem(25);
      text-align: left;
    }
  }
@@ -624,9 +626,9 @@ ion-content{
 
   .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;
@@ -634,9 +636,9 @@ ion-content{
   }
   .item-icon2{
     //margin-top: 23px;
-    width: 45px;
+    width: rem(45);
     float: left;
-    font-size: 40px;
+    font-size: rem(40);
   }
 
   .item-content{
@@ -653,26 +655,26 @@ ion-content{
 
     .item-content-date{
       color: #797979;
-      font-size: 13px;
+      font-size: rem(13);
       margin: 0 !important;
       padding: 0 !important;
     }
     .item-content-title{
       color: var(--title-text-color);
-      font-size: 15px;
+      font-size: rem(15);
       margin: 0 !important;
       padding: 0 !important;
     }
     .item-content-detail{
       color: #000000;
-      font-size: 13px;
+      font-size:rem(13);
       margin: 0 !important;
       padding: 0 !important;
     }
     .item-options{
       color: var(--box-hover-background-color);
       width: 25px;
-      font-size: 20px;
+      font-size: rem(20);
     }
     .item-content-date-active, .item-content-title-active, .item-content-detail-active{
       color: #fff;
@@ -692,7 +694,7 @@ ion-content{
 
 .new-task-count{
   color: red;
-  font-size: 13px;
+  font-size: rem(13);
 }
 
 
@@ -700,14 +702,14 @@ ion-content{
   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/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/publication-detail/publication-detail-routing.module.ts b/src/app/pages/publications/publication-detail/publication-detail-routing.module.ts
deleted file mode 100644
index d1ed32f55..000000000
--- a/src/app/pages/publications/publication-detail/publication-detail-routing.module.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { NgModule } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
-
-import { PublicationDetailPage } from './publication-detail.page';
-
-const routes: Routes = [
-  {
-    path: '',
-    component: PublicationDetailPage
-  }
-];
-
-@NgModule({
-  imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule],
-})
-export class PublicationDetailPageRoutingModule {}
diff --git a/src/app/pages/publications/publication-detail/publication-detail.module.ts b/src/app/pages/publications/publication-detail/publication-detail.module.ts
deleted file mode 100644
index 116453af2..000000000
--- a/src/app/pages/publications/publication-detail/publication-detail.module.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
-
-import { IonicModule } from '@ionic/angular';
-
-import { PublicationDetailPageRoutingModule } from './publication-detail-routing.module';
-
-import { PublicationDetailPage } from './publication-detail.page';
-
-@NgModule({
-  imports: [
-    CommonModule,
-    FormsModule,
-    IonicModule,
-    PublicationDetailPageRoutingModule
-  ],
-  declarations: [PublicationDetailPage]
-})
-export class PublicationDetailPageModule {}
diff --git a/src/app/pages/publications/publication-detail/publication-detail.page.html b/src/app/pages/publications/publication-detail/publication-detail.page.html
deleted file mode 100644
index 4739432c6..000000000
--- a/src/app/pages/publications/publication-detail/publication-detail.page.html
+++ /dev/null
@@ -1,75 +0,0 @@
-
-
-<ion-content>
-  <ion-refresher  name="refresher" slot="fixed" (ionRefresh)="doRefresh($event)">
-    <ion-progress-bar type="indeterminate" *ngIf="showLoader"></ion-progress-bar>
-    <ion-refresher-content>
-    </ion-refresher-content>
-  </ion-refresher>
-  
-  <div class="content-container">
-    <div *ngIf="publication.Title != ''">
-    <div class="title-content">
-      <div class="back-icon cursor-pointer">
-        <ion-icon *ngIf="ThemeService.currentTheme == 'default' " tappable (click)="close()" 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' "  tappable (click)="close()" slot="end" src='assets/images/theme/gov/icons-calendar-arrow-left.svg'></ion-icon>
-      </div>
-      <div class="div-title">
-        <ion-label class="title"> {{publication.Title}}</ion-label>
-        <p class="post-data">{{publication.DatePublication | date: 'dd-MM-yy | h:mm'}}</p>
-      </div>
-    </div>
-
-    <div class="post-item">
-      <div *ngIf="publication.FileBase64.length > 30" class="post-img">
-        <img src="{{publication.FileBase64}}" alt="image" tappable (click)="openPreview(publication.FileBase64)">
-      </div>
-      <div *ngIf="publication.FileBase64.length < 30" class="post-img">
-        <img src="/assets/icon/icon-no-image.svg" alt="image">
-      </div>
-      <div class="post-description">
-        <pre class="text">{{publication.Message}}</pre>
-      </div>
-    </div>
-  </div>
-    <div *ngIf="publication.Title == ''">
-      <div class="title-content">
-        <div class="back-icon cursor-pointer">
-          <ion-icon *ngIf="ThemeService.currentTheme == 'default' " (click)="close()" 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 == 'default' " (click)="close()" slot="end" src='assets/images/theme/gov/icons-calendar-arrow-left.svg'></ion-icon>
-        </div>
-        <div class="div-title">
-          <ion-label class="title"><ion-skeleton-text animated style="width: 60%;"></ion-skeleton-text></ion-label>
-          <p class="post-data"><ion-skeleton-text animated style="width: 20%;"></ion-skeleton-text></p>
-        </div>
-      </div>
-      <div class="post-item">
-        <div class="post-img">
-          <img src="/assets/icon/icon-no-image.svg" alt="image">
-        </div>
-        <div class="post-description">
-          <p><ion-skeleton-text animated></ion-skeleton-text></p>
-          <p><ion-skeleton-text animated></ion-skeleton-text></p>
-        </div>
-      </div>
-
-    </div>
-  </div>
-</ion-content>
-<ion-footer class="ion-no-border">
-  <ion-toolbar class="footer-toolbar">
-    <ion-buttons *ngIf="p.userPermission([p.permissionList.Actions.deletePost])" slot="start">
-      <button class="btn-delete" fill="clear" color="#ffe0e0" (click)="deletePost()">
-        <ion-label>Eliminar</ion-label>
-      </button>
-    </ion-buttons>
-    <ion-buttons *ngIf="p.userPermission([p.permissionList.Actions.editPost])" slot="end">
-      <button class="btn-ok" fill="clear" color="#fff" (click)="editPost('3')">
-        <ion-label>Editar</ion-label>
-      </button>
-    </ion-buttons>
-  </ion-toolbar>
-</ion-footer>
-
diff --git a/src/app/pages/publications/publication-detail/publication-detail.page.scss b/src/app/pages/publications/publication-detail/publication-detail.page.scss
deleted file mode 100644
index 3230c6d73..000000000
--- a/src/app/pages/publications/publication-detail/publication-detail.page.scss
+++ /dev/null
@@ -1,89 +0,0 @@
-
-  ion-content{
-    --background: transparent;
-    --border-radius: 30px;
-  }
-  ion-footer{
-      background: #fff;
-  }
-  ion-toolbar{
-    border-width: 0 !important;
-  }
-  .div-top-header{
-    margin: 0 auto;
-    background-color: #0782c9;
-    overflow: auto;
-    padding-top: 15px;
-    border: 0!important;
-  }
-  .div-search{
-    font-size: 45px;
-    float: left;
-    margin: 0 0 0 10px
-  }
-  .div-logo{
-    background: transparent;
-    width: 140px;
-    margin: 5px 0 0px 71px;
-    float: left;
-  }
-  .div-logo img{
-    width: 100%;
-  }
-  .div-profile{
-    font-size: 45px;
-    float: right;
-    margin-right: 10px;
-  }
-  .content-top{
-    background: #f3f2f2;
-    height: 20px;
-    margin: 0 auto;
-    border-top-left-radius: 25px;
-    border-top-right-radius: 25px;
-}
-  .content-container{
-    width: 100%;
-    margin:0 auto;
-    border-top-left-radius: 25px;
-    border-top-right-radius: 25px;
-    background: #ffffff;
-    height: 100%;
-    padding: 25px 0px 0 0px;
-    overflow: auto;
-  }
-  .title-content{
-    margin: 0px auto;
-    overflow: auto;
-    padding: 0 !important;
-  }
-  .back-icon{
-    width: auto;
-    float: left;
-    font-size: 35px;
-    overflow: auto;
-  }
-  .div-title{
-    /* padding: 0!important; */
-    float: left;
-    margin: 2.5px 0 0 5px;
-  }
-  .title{
-    font-size: 25px;
-  }
-  .post-img{
-    width: 100%;
-    height: 400px;
-    margin: 0 auto;
-    border-radius: 0px!important;
-    overflow: hidden;
-}
-.post-img img{
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-}
-.post-description{
-  margin: 0 auto;
-  margin-bottom: 35px;
-}
\ No newline at end of file
diff --git a/src/app/pages/publications/publication-detail/publication-detail.page.spec.ts b/src/app/pages/publications/publication-detail/publication-detail.page.spec.ts
deleted file mode 100644
index 8a3f20488..000000000
--- a/src/app/pages/publications/publication-detail/publication-detail.page.spec.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { IonicModule } from '@ionic/angular';
-
-import { PublicationDetailPage } from './publication-detail.page';
-
-describe('PublicationDetailPage', () => {
-  let component: PublicationDetailPage;
-  let fixture: ComponentFixture<PublicationDetailPage>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ PublicationDetailPage ],
-      imports: [IonicModule.forRoot()]
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(PublicationDetailPage);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  }));
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/src/app/pages/publications/publication-detail/publication-detail.page.ts b/src/app/pages/publications/publication-detail/publication-detail.page.ts
deleted file mode 100644
index 12f070c4f..000000000
--- a/src/app/pages/publications/publication-detail/publication-detail.page.ts
+++ /dev/null
@@ -1,146 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { AnimationController, ModalController, NavParams } from '@ionic/angular';
-import { Publication } from 'src/app/models/publication';
-import { PublicationsService } from 'src/app/services/publications.service';
-import { ToastService } from 'src/app/services/toast.service';
-import { ImageModalPage } from '../gallery/image-modal/image-modal.page';
-import { NewPublicationPage } from '../new-publication/new-publication.page';
-import { SqliteService } from 'src/app/services/sqlite.service';
-import { BackgroundService } from 'src/app/services/background.service';
-import { ThemeService } from 'src/app/services/theme.service'
-import { RouteService } from 'src/app/services/route.service';
-import { PermissionService } from 'src/app/services/permission.service';
-import { HttpErrorHandle } from 'src/app/services/http-error-handle.service';
-
-@Component({
-  selector: 'app-publication-detail',
-  templateUrl: './publication-detail.page.html',
-  styleUrls: ['./publication-detail.page.scss'],
-})
-export class PublicationDetailPage implements OnInit {
-  showLoader: boolean;
-  publicationId: string;
-  folderId: string;
-  publication: Publication;
-
-  constructor(
-    private modalController: ModalController,
-    private navParams:NavParams,
-    private publications:PublicationsService,
-    private toastService: ToastService,
-    private RouteService: RouteService,
-    public ThemeService: ThemeService,
-    public p:PermissionService,
-    private httpErrorHandle: HttpErrorHandle ) {
-
-      this.publicationId = this.navParams.get('publicationId');
-      /* this.folderId = this.navParams.get('folderIdId'); */
-      this.publication = {
-        DateIndex: null,
-        DocumentId: null,
-        ProcessId:'',
-        Title:'',
-        Message: '',
-        /* image: null, */
-        DatePublication: null,
-        FileBase64: '',
-        OriginalFileName: '',
-        FileExtension: '',
-      };
-    }
-
-  ngOnInit() {
-    this.getPublicationDetail();
-  }
-  doRefresh(event) {
-    this.getPublicationDetail();
-
-    setTimeout(() => {
-      try {
-  event?.target?.complete();
-} catch(error) {}
-    }, 2000);
-  }
-
-  getPublicationDetail() {
-    this.showLoader = true;
-    this.publications.GetPublicationById(this.publicationId).subscribe(res=>{
-      
-      /* this.publication = res; */
-      this.publication = {
-        DateIndex: res.DateIndex,
-        DocumentId: res.DocumentId,
-        ProcessId:res.ProcessId,
-        Title:res.Title,
-        Message: res.Message,
-        DatePublication: res.DatePublication,
-        FileBase64: "data:image/jpg;base64," + res.FileBase64,
-        OriginalFileName: res.OriginalFileName,
-        FileExtension: 'jpeg',
-      }
-      this.showLoader = false;
-    });
-  }
-
-  getFromDB() {
-
-  }
-
-  close() {
-    this.RouteService.goBack()
-
-  }
-
-  async deletePost() {
-
-    const loader = this.toastService.loading()
-
-    try {
-      await this.publications.DeletePublication(this.folderId, this.publicationId).toPromise();
-      this.httpErrorHandle.httpsSucessMessagge('Eliminar publicação')
-      if(window['app-view-publications-page-doRefresh']) {
-        window['app-view-publications-page-doRefresh']()
-      }
-      this.close();
-    } catch (error) {
-      this.httpErrorHandle.httpStatusHandle(error)
-    } finally {
-      loader.remove()
-    }
-
-  }
-
-  async editPost(publicationType:any) {
-
-    
-    const modal = await this.modalController.create({
-      component: NewPublicationPage,
-      componentProps:{
-        publicationType: publicationType,
-        publication: this.publication,
-      },
-      cssClass: 'new-publication modal modal-desktop',
-      backdropDismiss: false
-    });
-    await modal.present();
-    modal.onDidDismiss().then(()=>{
-      setTimeout(() => {
-        this.getPublicationDetail();
-    }, 5000);
-    });
-  }
-
-  openPreview(imageUrl:string){
-    this.modalController.create({
-      component: ImageModalPage,
-      componentProps: {
-        imageUrl:imageUrl,
-      }
-    }).then(modal => modal.present());
-  }
-
-
-
-
-
-}
diff --git a/src/app/pages/publications/publications.page.html b/src/app/pages/publications/publications.page.html
index 1c49e6754..ee1a34d2d 100644
--- a/src/app/pages/publications/publications.page.html
+++ b/src/app/pages/publications/publications.page.html
@@ -18,7 +18,7 @@
 
           <div class="title-content width-100 d-flex justify-space-between">
             <div class="div-title flex-grow-1">
-              <ion-label class="title ">Acções</ion-label>
+              <ion-label class="title font-25-em">Acções</ion-label>
             </div>
             
             <div class="div-icon">
@@ -45,17 +45,15 @@
             [class.item-active]="evento.ProcessId == idSelected"
             (click)="goToPublicationsList(evento.ProcessId)">
             <div class="item-icon2">
-              <ion-icon *ngIf="ThemeService.currentTheme == 'default' " slot="end" src='assets/images/icons-nav-actions.svg'></ion-icon>
-              <ion-icon *ngIf="ThemeService.currentTheme == 'gov' && evento.ProcessId != idSelected " slot="end" src='assets/images/theme/gov/icons-nav-actions.svg'></ion-icon>
-              <ion-icon *ngIf="ThemeService.currentTheme == 'gov' && evento.ProcessId == idSelected " slot="end" src='assets/images/theme/gov/icons-nav-actions-hover.svg'></ion-icon>
-              <ion-icon *ngIf="ThemeService.currentTheme == 'doneIt' && evento.ProcessId != idSelected " slot="end" src='assets/images/theme/{{ThemeService.currentTheme}}/icons-nav-actions.svg'></ion-icon>
-              <ion-icon *ngIf="ThemeService.currentTheme == 'doneIt' && evento.ProcessId == idSelected " slot="end" src='assets/images/theme/{{ThemeService.currentTheme}}/icons-nav-actions-hover.svg'></ion-icon>
+              <ion-icon class="font-40-em" *ngIf="ThemeService.currentTheme == 'default' " slot="end" src='assets/images/icons-nav-actions.svg'></ion-icon>
+              <ion-icon class="font-40-em" *ngIf="ThemeService.currentTheme == 'gov' && evento.ProcessId != idSelected " slot="end" src='assets/images/theme/gov/icons-nav-actions.svg'></ion-icon>
+              <ion-icon class="font-40-em" *ngIf="ThemeService.currentTheme == 'gov' && evento.ProcessId == idSelected " slot="end" src='assets/images/theme/gov/icons-nav-actions-hover.svg'></ion-icon>
+              <ion-icon class="font-40-em" *ngIf="ThemeService.currentTheme == 'doneIt' && evento.ProcessId != idSelected " slot="end" src='assets/images/theme/{{ThemeService.currentTheme}}/icons-nav-actions.svg'></ion-icon>
+              <ion-icon class="font-40-em" *ngIf="ThemeService.currentTheme == 'doneIt' && evento.ProcessId == idSelected " slot="end" src='assets/images/theme/{{ThemeService.currentTheme}}/icons-nav-actions-hover.svg'></ion-icon>
             </div>
             <div class="item-content flex-grow-1">
-              <ion-label>
-                <p class="item-content-date" [class.item-content-date-active]="evento.ProcessId == idSelected">{{getDate(evento.DateBegin)}}</p>
-                <p class="item-content-title" [class.item-content-title-active]="evento.ProcessId == idSelected">{{evento.Description}}</p>
-              </ion-label>
+              <p class="item-content-date font-13-em" [class.item-content-date-active]="evento.ProcessId == idSelected">{{getDate(evento.DateBegin)}}</p>
+              <p class="item-content-title font-15-em" [class.item-content-title-active]="evento.ProcessId == idSelected">{{evento.Description}}</p>
             </div>
           </ion-item>
           <ion-item-options class="members-options" side="end">
@@ -92,7 +90,7 @@
             <ion-item lines="none"
             class="item width-100 d-flex ion-no-border ion-no-margin ion-no-padding">
               <div class="item-icon cursor-pointer">
-                <ion-icon slot="end" src='assets/icon/icons-actions-grey.svg'></ion-icon>
+                <ion-icon class="font-40-rem" slot="end" src='assets/icon/icons-actions-grey.svg'></ion-icon>
               </div>
               <div class="item-content flex-grow-1 cursor-pointer">
                 <p class="item-content-date my-5"><ion-skeleton-text animated style="width: 90%"></ion-skeleton-text></p>
@@ -103,7 +101,7 @@
             <ion-item lines="none"
             class="item width-100 d-flex ion-no-border ion-no-margin ion-no-padding">
               <div class="item-icon cursor-pointer">
-                <ion-icon slot="end" src='assets/icon/icons-actions-grey.svg'></ion-icon>
+                <ion-icon class="font-40-rem" slot="end" src='assets/icon/icons-actions-grey.svg'></ion-icon>
               </div>
               <div class="item-content flex-grow-1 cursor-pointer">
                 <p class="item-content-date my-5"><ion-skeleton-text animated style="width: 90%"></ion-skeleton-text></p>
@@ -114,7 +112,7 @@
             <ion-item lines="none"
             class="item width-100 d-flex ion-no-border ion-no-margin ion-no-padding">
               <div class="item-icon cursor-pointer">
-                <ion-icon slot="end" src='assets/icon/icons-actions-grey.svg'></ion-icon>
+                <ion-icon class="font-40-rem" slot="end" src='assets/icon/icons-actions-grey.svg'></ion-icon>
               </div>
               <div class="item-content flex-grow-1 cursor-pointer">
                 <p class="item-content-date my-5"><ion-skeleton-text animated style="width: 90%"></ion-skeleton-text></p>
@@ -127,7 +125,7 @@
           <ion-item lines="none"
             class="item cursor-pointer width-100 d-flex ion-no-border ion-no-margin ion-no-padding">
             <div class="item-icon2">
-              <ion-icon slot="end" src='assets/icon/icons-actions-grey.svg'></ion-icon>
+              <ion-icon class="font-40-rem" slot="end" src='assets/icon/icons-actions-grey.svg'></ion-icon>
             </div>
             <div class="item-content flex-grow-1">
               <ion-label>
@@ -139,7 +137,7 @@
           <ion-item lines="none"
             class="item cursor-pointer width-100 d-flex ion-no-border ion-no-margin ion-no-padding">
             <div class="item-icon2">
-              <ion-icon slot="end" src='assets/icon/icons-actions-grey.svg'></ion-icon>
+              <ion-icon class="font-40-rem" slot="end" src='assets/icon/icons-actions-grey.svg'></ion-icon>
             </div>
             <div class="item-content flex-grow-1">
               <ion-label>
@@ -151,7 +149,7 @@
           <ion-item lines="none"
             class="item cursor-pointer width-100 d-flex ion-no-border ion-no-margin ion-no-padding">
             <div class="item-icon2">
-              <ion-icon slot="end" src='assets/icon/icons-actions-grey.svg'></ion-icon>
+              <ion-icon class="font-40-rem" slot="end" src='assets/icon/icons-actions-grey.svg'></ion-icon>
             </div>
             <div class="item-content flex-grow-1">
               <ion-label>
diff --git a/src/app/pages/publications/publications.page.scss b/src/app/pages/publications/publications.page.scss
index 931e4024f..c331c2da0 100644
--- a/src/app/pages/publications/publications.page.scss
+++ b/src/app/pages/publications/publications.page.scss
@@ -1,3 +1,17 @@
+@import '~src/function.scss';
+
+@media only screen and (min-width: 100px) {
+  :host{
+    font-size: 14px;
+  }
+}
+
+@media only screen and (min-width: 500px) {
+  :host{
+    font-size: rem(16);
+  }
+}
+
 :host{
   // background: #0782c9;
 }
@@ -20,7 +34,7 @@ ion-toolbar{
     border: 0!important;
 
     .div-search{
-      font-size: 45px;
+      font-size: rem(45);
       float: left;
       margin: 0 0 0 10px
     }
@@ -34,7 +48,7 @@ ion-toolbar{
       width: 100%;
     }
     .div-profile{
-      font-size: 45px;
+      font-size: rem(45);
       float: right;
       margin-right: 10px;
     }
@@ -61,14 +75,11 @@ ion-toolbar{
     .div-title{
       padding: 0!important;
     }
-    .title{
-      font-size: 25px;
-    }
     .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;
@@ -115,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;
@@ -125,9 +136,7 @@ ion-toolbar{
     }
     .item-icon2{
       //margin-top: 23px;
-      width: 45px;
       float: left;
-      font-size: 40px;
     }
 
     .item-content{
@@ -144,26 +153,24 @@ ion-toolbar{
 
       .item-content-date{
         color: #797979;
-        font-size: 13px;
         margin: 0 !important;
         padding: 0 !important;
       }
       .item-content-title{
         color: var(--title-text-color);
-        font-size: 15px;
         margin: 0 !important;
         padding: 0 !important;
       }
       .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;
@@ -215,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;
@@ -247,3 +254,20 @@ ion-toolbar{
 
   }
 }
+
+
+
+@media only screen and (min-width: 100px) {
+
+  .item-icon2, .title-content, .main-content, .item {
+    font-size: 14px;
+  }
+}
+
+@media only screen and (min-width: 500px) {
+
+  .item-icon2, .title-content, .main-content, .item {
+    font-size: 16px;
+  }
+}
+
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 efd173932..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
@@ -8,17 +8,17 @@
     </ion-refresher-content>
   </ion-refresher>
 
-  <div class="content-container">
+  <div class="content-container viewport-font-size">
     <div *ngIf="publication.Title != ''" class="d-flex flex-column height-100">
       <div class="title-content px-20 width-100 ">
         <div class="back-icon 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>
+          <ion-icon class="font-35-em" *ngIf="ThemeService.currentTheme == 'default' "  slot="end" src='assets/images/icons-arrow-arrow-left.svg'></ion-icon>
+          <ion-icon class="font-35-em" *ngIf="ThemeService.currentTheme == 'doneIt' " src="assets/images/theme/doneIt/icons-calendar-arrow-left.svg"></ion-icon>
+          <ion-icon class="font-35-em" *ngIf="ThemeService.currentTheme == 'gov' "  slot="end" src='assets/images/theme/gov/icons-calendar-arrow-left.svg'></ion-icon>
         </div>
         <div class="div-title">
-          <ion-label class="title"> {{publication.Title}} </ion-label>
-          <p class="post-data">{{publication.DatePublication | date: 'dd-MM-yy | h:mm'}}</p>
+          <p class="title font-25-em"> {{publication.Title}} </p>
+          <p class="post-data font-16-em">{{publication.DatePublication | date: 'dd-MM-yy | h:mm'}}</p>
         </div>
       </div>
 
@@ -30,7 +30,7 @@
           <img src="/assets/icon/icon-no-image.svg" alt="image">
         </div>
         <div class="post-description px-20">
-          <pre class="text">{{publication.Message}}</pre>
+          <pre class="text font-14-rem">{{publication.Message}}</pre>
         </div>
       </div>
     </div>
@@ -38,9 +38,9 @@
     <div *ngIf="publication.Title == ''" class="d-flex flex-column">
       <div class="title-content width-100">
         <div class="back-icon cursor-pointer">
-          <ion-icon *ngIf="ThemeService.currentTheme == 'default' " (click)="close()" 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' " (click)="close()" slot="end" src='assets/images/theme/gov/icons-calendar-arrow-left.svg'></ion-icon>
+          <ion-icon class="font-35-em" *ngIf="ThemeService.currentTheme == 'default' " (click)="close()" slot="end" src='assets/images/icons-arrow-arrow-left.svg'></ion-icon>
+          <ion-icon class="font-35-em" *ngIf="ThemeService.currentTheme == 'doneIt' " src="assets/images/theme/doneIt/icons-calendar-arrow-left.svg"></ion-icon>
+          <ion-icon class="font-35-em" *ngIf="ThemeService.currentTheme == 'gov' " (click)="close()" slot="end" src='assets/images/theme/gov/icons-calendar-arrow-left.svg'></ion-icon>
         </div>
         <div class="div-title">
           <ion-label class="title"><ion-skeleton-text animated style="width: 60%;"></ion-skeleton-text></ion-label>
@@ -61,16 +61,16 @@
   </div>
 </ion-content>
 
-<ion-footer>
+<ion-footer class="viewport-font-size">
   <ion-toolbar class="footer-toolbar">
     <ion-buttons *ngIf="p.userPermission([p.permissionList.Actions.deletePost])" slot="start">
       <button *ngIf="publication.ProcessId" class="btn-delete" fill="clear" color="#ffe0e0" (click)="deletePost()">
-        <ion-label>Eliminar</ion-label>
+        <ion-label class="font-16-em">Eliminar</ion-label>
       </button>
     </ion-buttons>
     <ion-buttons *ngIf="p.userPermission([p.permissionList.Actions.editPost])" slot="end">
       <button *ngIf="publication.ProcessId" class="btn-ok" fill="clear" color="#fff" (click)="editPost('3')">
-        <ion-label>Editar</ion-label>
+        <ion-label class="font-16-em">Editar</ion-label>
       </button>
     </ion-buttons>
   </ion-toolbar>
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 1802e0968..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
@@ -12,32 +12,7 @@
     /* --background:#0782c9; */
     border-width: 0 !important;
   }
-  .div-top-header{
-    margin: 0 auto;
-    background-color: #0782c9;
-    overflow: auto;
-    padding-top: 15px;
-    border: 0!important;
-  }
-  .div-search{
-    font-size: 45px;
-    float: left;
-    margin: 0 0 0 10px
-  }
-  .div-logo{
-    background: transparent;
-    width: 140px;
-    margin: 5px 0 0px 71px;
-    float: left;
-  }
-  .div-logo img{
-    width: 100%;
-  }
-  .div-profile{
-    font-size: 45px;
-    float: right;
-    margin-right: 10px;
-  }
+
   .content-top{
     background: #f3f2f2;
     height: 20px;
@@ -62,17 +37,13 @@
   .back-icon{
     width: auto;
     float: left;
-    font-size: 35px;
     overflow: auto;
   }
   .div-title{
     /* padding: 0!important; */
     float: left;
-    margin: 2.5px 0 0 5px;
-  }
-  .title{
-    font-size: 25px;
   }
+
   .post-img{
     width: 100%;
     height: 400px;
@@ -89,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 623bb0ea2..6e79976c9 100644
--- a/src/app/pages/publications/view-publications/view-publications.page.html
+++ b/src/app/pages/publications/view-publications/view-publications.page.html
@@ -1,18 +1,18 @@
 <ion-header class="ion-no-border">
   <!-- <ion-toolbar class="bg-blue"> -->
-  <div class="main-header">
+  <div class="main-header viewport-font-size">
     <div class="title-content d-flex width-100">
-      <div class="back-icon 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>
+      <div class="cursor-pointer viewport-font-size" (click)="goBack()">
+        <ion-icon class="font-35-em" *ngIf="ThemeService.currentTheme == 'default' "  slot="end" src='assets/images/icons-arrow-arrow-left.svg'></ion-icon>
+        <ion-icon class="font-35-em" *ngIf="ThemeService.currentTheme == 'doneIt' " src="assets/images/theme/doneIt/icons-calendar-arrow-left.svg"></ion-icon>
+        <ion-icon class="font-35-em" *ngIf="ThemeService.currentTheme == 'gov' "  slot="end" src='assets/images/theme/gov/icons-calendar-arrow-left.svg'></ion-icon>
       </div>
       <div *ngIf="publicationItem[folderId]?.DateBegin != null" class="div-title flex-grow-1">
-        <ion-label class="title">{{publicationItem[folderId].Description}}</ion-label>
-        <p class="item-content-detail">{{publicationItem[folderId].Detail}}</p>
-        <p class="item-content-date" >{{publicationItem[folderId].DateBegin | date: 'dd-MM-yy  HH:mm'}}</p>
+        <p class="title font-25-em mb-10-em">{{publicationItem[folderId].Description}}</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="actions-icon cursor-pointer" (click)="AddPublication('2',publicationItem[folderId].ProcessId)">
+      <div *ngIf="p.userPermission([p.permissionList.Actions.createPost]) && publicationItem[folderId]" class="cursor-pointer font-35-em" (click)="AddPublication('2',publicationItem[folderId].ProcessId)">
        <!--  <ion-icon (click)="AddPublication('1',item.ProcessId)" slot="end" src='assets/images/icons-add-photo.svg'></ion-icon> -->
         <ion-icon *ngIf="ThemeService.currentTheme == 'default' " slot="end" src='assets/images/icons-add.svg'></ion-icon>
         <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " slot="end" src='assets/images/theme/gov/icons-add.svg'></ion-icon>
@@ -28,7 +28,7 @@
     <ion-refresher-content>
     </ion-refresher-content>
   </ion-refresher> 
-   <div class="main-container background-white height-100 overflow-y-auto">
+   <div class="main-container background-white height-100 overflow-y-auto viewport-font-size">
    <ion-content  *ngIf="publicationItem[folderId]">
       <ion-card *ngFor="let publication of publicationList[folderId] let i = index"
       (click)="goToPublicationDetail(publication.DocumentId)"
@@ -39,13 +39,13 @@
         </div>
         <div class="post-content px-20">
           <div class="post-title-time">
-            <div class="post-title">
+            <div class="post-title font-15-em">
               <ion-label>{{publication.Title}}</ion-label>
             </div>
-            <div class="post-data">{{publication.DatePublication | date: 'dd-MM-yy  HH:mm'}}</div>
+            <div class="post-data font-13-em">{{publication.DatePublication | date: 'dd-MM-yy  HH:mm'}}</div>
           </div>
-          <div class="post-description">
-            <pre class="text">{{publication.Message}}</pre>
+          <div class="post-description ">
+            <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 2eed91594..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,7 +1,9 @@
+@import '~src/function.scss';
+
 :host{
-    background: transparent;
-    padding: 0!important;
-  }
+  background: transparent;
+  padding: 0!important;
+}  
   ion-content{
     --background: transparent;
     --border-radius: 30px;
@@ -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);
 
 
   }
@@ -97,7 +99,6 @@
     color: #000 !important;
   }
   .title{
-    font-size: 25px;
     color: #000 !important;
   }
 
@@ -106,16 +107,13 @@
   }
   .actions-icon ion-icon{
       margin-left: 10px;
-      font-size: 35px;
       float: right;
   }
   .item-content-date{
     color: #797979;
-    font-size: 13px;
   }
   .item-content-detail{
     color: #000000;
-    font-size: 13px;
   }
   .post-item{
     width: 100%;
@@ -148,18 +146,19 @@
   .post-title{
       width: 60%;
       float: left;
-      font-size: 15px;
       color: #0d89d1;
   }
 .post-data{
     width: 40%;
     float: left;
-    font-size: 13px;
     color: #797979;
     text-align: right;
 }
   .post-description{
-      font-size: 13px;
-      color: #000;
-
+    color: #000;
   }
+
+
+.font-13-em {
+  font-size: 0.8125em !important;
+}
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..600f18f3d 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;
     }
@@ -59,14 +59,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;
@@ -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/services/logging-interceptor.service.ts b/src/app/services/logging-interceptor.service.ts
index bcd311290..1f1818c2c 100644
--- a/src/app/services/logging-interceptor.service.ts
+++ b/src/app/services/logging-interceptor.service.ts
@@ -2,6 +2,7 @@ import { HttpHandler, HttpRequest, HttpResponse } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { finalize, tap } from 'rxjs/operators';
 import { BackgroundService } from './background.service';
+import { environment } from 'src/environments/environment';
 
 @Injectable({
   providedIn: 'root'
@@ -33,7 +34,10 @@ export class LoggingInterceptorService {
           },
           // Operation failed; error is an HttpErrorResponse
           error: (error) => {
-            if (error.status === 0 && error.error instanceof ProgressEvent && !req.url.includes('UserAuthentication/Login')) {
+            if (error.status === 0 && error.error instanceof ProgressEvent &&
+               !req.url.includes('UserAuthentication/Login') && 
+               req.url.includes(environment.apiURL)
+            ) {
               // A client-side or network error occurred. Handle it accordingly.
               this.backgroundservice.offline();
             }
diff --git a/src/app/services/theme.service.ts b/src/app/services/theme.service.ts
index a56642202..c881a4bb7 100644
--- a/src/app/services/theme.service.ts
+++ b/src/app/services/theme.service.ts
@@ -17,9 +17,7 @@ export class ThemeService {
   currentTheme: 'gov' | 'default' | 'doneIt' = this.defaultTheme
   keyName: string
 
-  constructor(
-    private storageservice: StorageService
-    ) { 
+  constructor() { 
 
     this.keyName = (SHA1("ThemeService")).toString()
     let restore = localstoreService.get(this.keyName, {
diff --git a/src/app/services/toast.service.ts b/src/app/services/toast.service.ts
index 87035fc2b..acd713a2e 100644
--- a/src/app/services/toast.service.ts
+++ b/src/app/services/toast.service.ts
@@ -2,6 +2,7 @@ import { Injectable } from '@angular/core';
 import { AnimationController, ModalController, ToastController } from '@ionic/angular';
 import { BadRequestPage } from '../shared/popover/bad-request/bad-request.page';
 import { SuccessMessagePage } from '../shared/popover/success-message/success-message.page';
+import { ThemeService } from 'src/app/services/theme.service';
 
 @Injectable({
   providedIn: 'root'
@@ -10,6 +11,7 @@ export class ToastService {
 
   constructor(
     public toastController: ToastController,
+    public ThemeService: ThemeService,
   ) { }
 
   ngOnInit() {}
@@ -188,6 +190,15 @@ export class ToastService {
 
   }
 
+  async ViewEventOption() {
+    // this.ThemeService.currentTheme == 'default'
+    // this.ThemeService.currentTheme == 'gov'
+    // this.ThemeService.currentTheme == 'doneIt'
+
+    if(this.ThemeService.currentTheme == 'default') {
+
+    } else if (this.ThemeService.currentTheme == 'gov') {}
+  }
 
   async notificationMessage(message?: any, callback?: any,data?: any) {
 
@@ -266,4 +277,4 @@ export class ToastService {
 }
 
 
-export const ToastsService = new ToastService(new ToastController())
+export const ToastsService = new ToastService(new ToastController(), new ThemeService())
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 9aecb93c1..ad38445ac 100644
--- a/src/app/shared/agenda/view-event/view-event.page.html
+++ b/src/app/shared/agenda/view-event/view-event.page.html
@@ -14,14 +14,26 @@
         </div>
 
         <div class="div-icon d-flex align-base">
-          <button class="btn-no-color" (click)="editEvent()">
+          <!-- <button class="btn-no-color" (click)="editEvent()">
             <ion-icon *ngIf="ThemeService.currentTheme == 'default' " class="edit" slot="end" src="assets/images/icons-edit.svg" ></ion-icon>
             <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="edit" slot="end" src="assets/images/theme/gov/icons-edit.svg" ></ion-icon>
             <ion-icon *ngIf="ThemeService.currentTheme == 'doneIt' " class="edit" slot="end" src="assets/images/theme/{{ThemeService.currentTheme}}/icons-edit.svg" ></ion-icon>
           </button>
           <button class="btn-no-color" (click)="deleteYesOrNo()">
             <ion-icon class="delete" name="trash-sharp"></ion-icon>
-          </button>
+          </button> -->
+
+          <div class="div-icon" (click)="openOptions()">
+            <ion-icon *ngIf="ThemeService.currentTheme == 'default' " src="assets/images/icons-menu.svg"></ion-icon>
+            <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " src="assets/images/theme/gov/icons-menu.svg"></ion-icon>
+            <ion-icon *ngIf="ThemeService.currentTheme == 'doneIt' " src="assets/images/theme/{{ThemeService.currentTheme}}/icons-menu.svg"></ion-icon>
+          </div>
+          <div *ngIf="loadedEvent.Subject">
+            <div (click)="editEvent()">Editar</div>
+            <div (click)="deleteYesOrNo()">Apagar</div>
+            <div id="desktop-create-chat-from-event" (click)="openNewGroupPage()">Criar Conversa</div>
+          </div>
+
         </div>
 
       </div>
@@ -70,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">
@@ -80,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>
@@ -89,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 7b62fbc6a..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
@@ -2,25 +2,25 @@
   <ion-progress-bar type="indeterminate" *ngIf="loading && loaderTop"></ion-progress-bar>
   <div class="px-20 pt-30 d-flex justify-space-between">
     <div class="d-flex align-center pointer">
-      <div class="font-35 d-flex" *ngIf="goBackButton" (click)="goBack.emit()">
+      <div class="font-35-rem d-flex" *ngIf="goBackButton" (click)="goBack.emit()">
         <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>
       </div>
-      <ion-label class="font-25"  >{{ headerName }}</ion-label>
+      <ion-label class="font-25-rem"  >{{ headerName }}</ion-label>
     </div>
     <div class="d-flex align-center ">
 
       <!-- <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">
@@ -43,11 +43,11 @@
       <div>
         <div class="d-flex" (click)="reorderList.emit('old')" *ngIf="ordinance == 'recent' ">
 
-          <ion-icon  class="mr-10 font-25"  src="assets/images/theme/gov/crescente.svg" ></ion-icon>
+          <ion-icon  class="mr-10 font-25-rem"  src="assets/images/theme/gov/crescente.svg" ></ion-icon>
         </div>
   
         <div class="d-flex" (click)="reorderList.emit('recent')" *ngIf="ordinance != 'recent' ">
-          <ion-icon  class="mr-10 font-25"  src="assets/images/theme/gov/decrescente.svg" ></ion-icon>
+          <ion-icon  class="mr-10 font-25-rem"  src="assets/images/theme/gov/decrescente.svg" ></ion-icon>
         </div>
       </div>
 
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 d588e30b3..0667e332d 100644
--- a/src/app/shared/header/header.page.html
+++ b/src/app/shared/header/header.page.html
@@ -3,11 +3,11 @@
 
     <div class="mobile pt-20 d-flex  div-top-header justify-space-between">
       
-      <div title="Pesquisa" *ngIf="!hideSearchBtn" class="div-search">
+      <div title="Pesquisa" *ngIf="!hideSearchBtn" class="div-search viewport-font-size">
         <div (click)="openSearch()">
-          <ion-icon *ngIf="ThemeService.currentTheme == 'doneIt' "  class="font-45" src="assets/images/theme/doneIt/icons-search.svg"></ion-icon>
-          <ion-icon *ngIf=" ThemeService.currentTheme == 'default' " class="font-45" src='assets/images/icons-search.svg'></ion-icon>
-          <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="font-45" src='assets/images/theme/gov/icons-search.svg'></ion-icon>
+          <ion-icon *ngIf="ThemeService.currentTheme == 'doneIt' "  class="font-45-em" src="assets/images/theme/doneIt/icons-search.svg"></ion-icon>
+          <ion-icon *ngIf=" ThemeService.currentTheme == 'default' " class="font-45-em" src='assets/images/icons-search.svg'></ion-icon>
+          <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="font-45-em" src='assets/images/theme/gov/icons-search.svg'></ion-icon>
         </div>
       </div>
 
@@ -34,11 +34,12 @@
         </div>
       </div>
 
-      <div title="Perfil" class="div-profile cursor-pointer" (click)="openProfile()">
+      <div title="Perfil" class="div-profile cursor-pointer viewport-font-size " (click)="openProfile()">
+
         <!-- <div *ngIf="this.notificationLength > 0" class="icon-badge">{{notificationLength}}</div> -->
-        <ion-icon *ngIf="ThemeService.currentTheme == 'doneIt' " class="icon" src='assets/images/theme/doneIt/icons-profile.svg'></ion-icon>
-        <ion-icon *ngIf="ThemeService.currentTheme == 'default' " class="icon" src='assets/images/icons-profile.svg'></ion-icon>
-        <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="icon" src='assets/images/theme/gov/icons-profile.svg'></ion-icon>
+        <ion-icon *ngIf="ThemeService.currentTheme == 'doneIt' " class="icon font-45-em" src='assets/images/theme/doneIt/icons-profile.svg'></ion-icon>
+        <ion-icon *ngIf="ThemeService.currentTheme == 'default' " class="icon font-45-em" src='assets/images/icons-profile.svg'></ion-icon>
+        <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="icon font-45-em" src='assets/images/theme/gov/icons-profile.svg'></ion-icon>
 
         <div class="profile-text">
           <div *ngIf="this.notificationLength > 0"  class="icon-badge"
@@ -82,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>
@@ -99,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>
@@ -122,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">
@@ -155,8 +156,7 @@
             </div>
           </div>
 
-          <div title="Perfil" class="div-profile d-flex cursor-pointer" (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 95d77069f..a0a5e2b76 100644
--- a/src/app/shared/header/header.page.scss
+++ b/src/app/shared/header/header.page.scss
@@ -9,7 +9,7 @@
 
 .div-logo{
   background: transparent;
-  width: em(140px);
+  width: em(140);
   justify-content: center;
   display: flex;
   color: black;
@@ -79,7 +79,6 @@
 
 .div-profile {
   height: fit-content;
-  font-size: 45px;
   justify-content: flex-end;
   display: flex;
   background-color: transparent;
@@ -94,7 +93,7 @@
 
   .icon-badge {
     background-color: red;
-    font-size: 12px;
+    font-size: rem(12);
     color: white;
     text-align: center;
     width:20px;
@@ -106,7 +105,7 @@
   }
 
   .profile-text{
-    font-size: 20px;
+    font-size: rem(20);
     font-weight: 300;
     width: fit-content;
     position: absolute;
@@ -155,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-options-popover/chat-options-popover.page.scss b/src/app/shared/popover/chat-options-popover/chat-options-popover.page.scss
index b3105a989..fccab70da 100644
--- a/src/app/shared/popover/chat-options-popover/chat-options-popover.page.scss
+++ b/src/app/shared/popover/chat-options-popover/chat-options-popover.page.scss
@@ -1,3 +1,6 @@
+@import '~src/function.scss';
+
+
 .container{
     --padding-top:20px !important;
    --padding-bottom:20px !important;
@@ -10,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/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/event-details-documents-options/event-details-documents-options.page.ts b/src/app/shared/popover/event-details-documents-options/event-details-documents-options.page.ts
index 6e02c4f45..28f4e3c3f 100644
--- a/src/app/shared/popover/event-details-documents-options/event-details-documents-options.page.ts
+++ b/src/app/shared/popover/event-details-documents-options/event-details-documents-options.page.ts
@@ -1,6 +1,5 @@
 import { Component, OnInit } from '@angular/core';
 import { ModalController, NavParams } from '@ionic/angular';
-import { error } from 'console';
 import { PermissionService } from 'src/app/services/permission.service';
 import { ProcessesService} from 'src/app/services/processes.service';
 import { HttpErrorHandle } from 'src/app/services/http-error-handle.service';
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/function.scss b/src/function.scss
index 818b0bb66..412a6618e 100644
--- a/src/function.scss
+++ b/src/function.scss
@@ -1,3 +1,4 @@
+@use 'sass:math';
 
 // =============== Custom function ==============================
 
@@ -34,14 +35,14 @@
   
   // convert px to rem
   @function rem($size) {
-    $remSize: to-number($size) / 16;
+    $remSize: math.div(to-number($size), 16);
     //Default font size on html is 16px;
     @return #{$remSize}rem;
   }
   
   // convert px to em
   @function em($size) {
-    $remSize: to-number($size) / 16px;
+    $remSize: math.div(to-number($size), 16);
     @return #{$remSize}em;
   }
   
diff --git a/src/global.scss b/src/global.scss
index 2fcec18f6..0ca8e62f4 100644
--- a/src/global.scss
+++ b/src/global.scss
@@ -27,7 +27,6 @@
 @import "./style/ios.scss";
 
 
-
 // calendar
 // ionic calendar2
 // calendar current day
@@ -108,7 +107,7 @@ td.monthview-secondary-with-event, td.monthview-secondary-with-event[_ngcontent-
 
 .cal-time{
     font-family: Roboto;
-    font-size: 13px;
+    font-size: rem(13);
     color: #797979;
 }
 
@@ -124,12 +123,12 @@ td.monthview-secondary-with-event, td.monthview-secondary-with-event[_ngcontent-
     color: black;
     .timeline-start-time, .timeline-location{
         font-family: Roboto;
-        font-size: 13px;
+        font-size: rem(13);
         margin-right: 10px;
     }
     .timeline-event-discription{
         font-family: Roboto;
-        font-size: 15px;
+        font-size: rem(15);
         font-weight: bold;
     }
 }
@@ -213,7 +212,7 @@ td.monthview-secondary-with-event, td.monthview-secondary-with-event[_ngcontent-
 
 
 .calendar-profile{
-    font-size: 36px
+    font-size: rem(36)
 }
 
 
@@ -595,27 +594,53 @@ td.monthview-secondary-with-event, td.monthview-secondary-with-event[_ngcontent-
 .calendar-component .monthview-container table.table {
 
     td {
-        width: 50px;
-        height: 40px;
-        div {
-            padding-left: 0px;
-        }
-        display: flex;
-        align-content: center;
-        justify-content: center;
+      div {
+        padding-left: 0px;
+      }
+      display: flex;
+      align-content: center;
+      justify-content: center;
+    }
 
-    }
-    td div:not(.day, .day-container, .number) {
-        width: 30px !important;
-        height: 30px;
-    }
     tr {
-        display: flex;
-        justify-content: space-around;
+      display: flex;
+      justify-content: space-around;
+    }
+    tbody {
+      tr {
+        td {
+          padding: em(8) !important;
+          div {
+            width: 30px !important;
+            height: 30px;
+          }
+          div.number {
+            font-size: em(18) !important;
+          }
+        }
+      }
     }
 }
 
 
+@media only screen and (min-width: 100px) {
+
+  .calendar-component .monthview-container table.table{
+    font-size: 12px;
+  }
+
+}
+
+@media only screen and (min-width: 500px) {
+
+  .calendar-component .monthview-container table.table {
+    font-size: 16px;
+  }
+}
+
+
+
+
 // agenda attendee component
 .attendee-search-bar input{
     border: 1px solid #cecece !important;
@@ -637,7 +662,7 @@ td.monthview-secondary-with-event, td.monthview-secondary-with-event[_ngcontent-
     -o-border-radius: 3px !important;
   }
   .title-icon {
-    font-size: 40px !important;
+    font-size: rem(40) !important;
     color: #42b9fe;
     overflow: auto;
   }
@@ -648,14 +673,18 @@ td.monthview-secondary-with-event, td.monthview-secondary-with-event[_ngcontent-
     background: transparent;
     margin: 0 !important;
     padding: 0 !important;
-    ion-icon {
-      font-size: 35px;
-    }
   }
   .btn-no-color:focus {
     outline: 0;
   }
 
+  
+  .btn-no-color {      
+    ion-icon {
+      font-size: rem(35);
+    }
+  }
+  
 
 // center
 app-diploma-assinar ion-content .main-content,
@@ -971,7 +1000,7 @@ background: rgb(92, 92, 92);
         align-items: center;
     }
     .message {
-        font-size: 12pt;
+        font-size: rem(16);
     }
 }
 
@@ -1010,7 +1039,7 @@ background: rgb(92, 92, 92);
         align-items: center;
     }
     .message {
-        font-size: 12pt;
+        font-size: rem(16);
     }
 }
 
@@ -1103,7 +1132,7 @@ background: rgb(92, 92, 92);
 .input-errror-message{
     margin-top: -16px;
     margin-bottom: 10px;
-    font-size: 11pt;
+    font-size: rem(15);
 }
 
 
@@ -1211,7 +1240,7 @@ ngx-mat-datetime-content{
 }
 
 .menuButton{
-  font-size: 14px;
+  font-size: rem(14);
   width: 100%;
   background: none;
   padding: 10px 5px 10px 5px;
@@ -1225,6 +1254,7 @@ ngx-mat-datetime-content{
 .add-attachment-bg-color{
   background-color: #42b9fe13 !important;
   --background: #42b9fe0a !important;
+  font-size: rem(14);
 }
 
 .message-attachments{
@@ -1284,10 +1314,10 @@ ngx-mat-datetime-content{
   color: #d24726;
 }
 .icon-size-45{
-  font-size: 45px !important;
+  font-size: rem(45) !important;
 }
 .icon-size-27{
-  font-size: 27px !important;
+  font-size: rem(27) !important;
   color: #797979;
 }
 .menu-icon{
@@ -1373,7 +1403,7 @@ ngx-mat-datetime-content{
 
 .add-people {
     align-items: center;
-    height: 45px;
+    height: rem(45);
 }
 
 
@@ -1434,7 +1464,7 @@ ngx-mat-datetime-content{
 
 
 $font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
-$font-size: 11pt;
+$font-size: rem(15);
 
  ion-row ul > li{
     font-family: $font-family;
@@ -1454,7 +1484,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;
 }
@@ -1466,14 +1496,14 @@ ion-textarea.heigh-200  textarea {
 }
 
 .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;
@@ -1485,7 +1515,7 @@ ion-textarea.heigh-200  textarea {
   padding-left: 10px;
   padding-right: 5px;
   border-radius: 1px;
-  font-size: 14px;
+  font-size: rem(14);
   width: 110px;
 
 
@@ -1515,14 +1545,14 @@ ion-textarea.heigh-200  textarea {
   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{
@@ -1537,6 +1567,57 @@ ion-textarea.heigh-200  textarea {
 .row-reverse { display: flex; flex-direction: row-reverse; }
 
 
+
 app-tiny-mce { 
   justify-content: flex-start !important;
-}
\ No newline at end of file
+}
+
+.transparent--background {
+  background-color: transparent;
+}
+
+
+
+@media only screen and (min-width: 100px) {
+
+  
+  html, body, .viewport-font-size {
+    font-size: 14px;
+  }
+  
+}
+
+@media only screen and (min-width: 500px) {
+
+  html, body, .viewport-font-size {
+    font-size: 16px;
+  }
+}
+
+.swiper-slide {
+  font-size: unset !important;
+}
+
+
+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 bb7430d66..9b887d0a6 100644
--- a/src/style/main.scss
+++ b/src/style/main.scss
@@ -1,3 +1,5 @@
+@import '~src/function.scss';
+
 // overflow
 .v-application .overflow-auto {
   overflow: auto !important;
@@ -178,6 +180,90 @@
   flex: 0;
 }
 
+
+
+
+@for $i from 0 through 10 {
+  $size: $i * 5;
+
+  $properties: "margin" "m", "padding" "p";
+
+  @each $property, $short in $properties {
+
+    // ============================= EM ========================================
+    // all directions
+    .#{$short}a-#{$size}-em {
+      #{$property}-left: em($size) !important; 
+      #{$property}-right: em($size) !important;
+      #{$property}-top: em($size) !important; 
+      #{$property}-bottom: em($size) !important;
+    }
+    // top
+    .#{$short}t-#{$size}-em {
+      #{$property}-top: em($size) !important
+    }
+    // bottom
+    .#{$short}b-#{$size}-em {
+      #{$property}-bottom: em($size) !important
+    }
+    // left
+    .#{$short}l-#{$size}-em {
+      #{$property}-left: em($size) !important
+    }
+    // right
+    .#{$short}r-#{$size}-em {
+      #{$property}-right: em($size) !important
+    }
+    // left and right
+    .#{$short}x-#{$size}-em {
+      #{$property}-left: em($size) !important;
+      #{$property}-right: em($size) !important;
+    }
+    // top and bottom
+    .#{$short}y-#{$size}-em {
+      #{$property}-top: em($size) !important;
+      #{$property}-bottom: em($size) !important;
+    }
+
+
+    // ============================= REM ========================================
+    // all directions
+    .#{$short}a-#{$size}-rem {
+      #{$property}-left: rem($size) !important; 
+      #{$property}-right: rem($size) !important;
+      #{$property}-top: rem($size) !important; 
+      #{$property}-bottom: rem($size) !important;
+    }
+    // top
+    .#{$short}t-#{$size}-rem {
+      #{$property}-top: rem($size) !important
+    }
+    // bottom
+    .#{$short}b-#{$size}-rem {
+      #{$property}-bottom: rem($size) !important
+    }
+    // left
+    .#{$short}l-#{$size}-rem {
+      #{$property}-left: rem($size) !important
+    }
+    // right
+    .#{$short}r-#{$size}-rem {
+      #{$property}-right: rem($size) !important
+    }
+    // left and right
+    .#{$short}x-#{$size}-rem {
+      #{$property}-left: rem($size) !important;
+      #{$property}-right: rem($size) !important;
+    }
+    // top and bottom
+    .#{$short}y-#{$size}-rem {
+      #{$property}-top: rem($size) !important;
+      #{$property}-bottom: rem($size) !important;
+    }
+
+  }
+}
+
 @media only screen and (min-width: 800px) {
   // overflow
   .v-application-md .overflow-md-auto {
@@ -366,53 +452,6 @@
     align-content: stretch !important;
   }
 
-  @for $i from 0 through 50 {
-    .font-md-#{$i} {
-      font-size: #{$i}px;
-    }
-  }
-  @for $i from 0 through 10 {
-    $size: $i * 5;
-
-    $properties: "margin" "m", "padding" "p";
-
-    @each $property, $short in $properties {
-      // all directions
-      .#{$short}a-md-#{$size} {
-        #{$property}-left: #{$size}px !important;
-        #{$property}-right: #{$size}px !important;
-        #{$property}-top: #{$size}px !important;
-        #{$property}-bottom: #{$size}px !important;
-      }
-      // top
-      .#{$short}t-md-#{$size} {
-        #{$property}-top: #{$size}px !important;
-      }
-      // bottom
-      .#{$short}b-md-#{$size} {
-        #{$property}-bottom: #{$size}px !important;
-      }
-      // left
-      .#{$short}l-md-#{$size} {
-        #{$property}-left: #{$size}px !important;
-      }
-      // right
-      .#{$short}r-md-#{$size} {
-        #{$property}-right: #{$size}px !important;
-      }
-      // left and right
-      .#{$short}x-md-#{$size} {
-        #{$property}-left: #{$size}px !important;
-        #{$property}-right: #{$size}px !important;
-      }
-      // top and bottom
-      .#{$short}y-md-#{$size} {
-        #{$property}-top: #{$size}px !important;
-        #{$property}-bottom: #{$size}px !important;
-      }
-    }
-  }
-
   .width-md-100 {
     width: 100%;
   }
@@ -681,52 +720,6 @@
     height: unset !important;
   }
 
-  @for $i from 0 through 50 {
-    .font-lg-#{$i} {
-      font-size: #{$i}px;
-    }
-  }
-  @for $i from 0 through 10 {
-    $size: $i * 5;
-
-    $properties: "margin" "m", "padding" "p";
-
-    @each $property, $short in $properties {
-      // all directions
-      .#{$short}a-lg-#{$size} {
-        #{$property}-left: #{$size}px !important;
-        #{$property}-right: #{$size}px !important;
-        #{$property}-top: #{$size}px !important;
-        #{$property}-bottom: #{$size}px !important;
-      }
-      // top
-      .#{$short}t-lg-#{$size} {
-        #{$property}-top: #{$size}px !important;
-      }
-      // bottom
-      .#{$short}b-lg-#{$size} {
-        #{$property}-bottom: #{$size}px !important;
-      }
-      // left
-      .#{$short}l-lg-#{$size} {
-        #{$property}-left: #{$size}px !important;
-      }
-      // right
-      .#{$short}r-lg-#{$size} {
-        #{$property}-right: #{$size}px !important;
-      }
-      // left and right
-      .#{$short}x-lg-#{$size} {
-        #{$property}-left: #{$size}px !important;
-        #{$property}-right: #{$size}px !important;
-      }
-      // top and bottom
-      .#{$short}y-lg-#{$size} {
-        #{$property}-top: #{$size}px !important;
-        #{$property}-bottom: #{$size}px !important;
-      }
-    }
-  }
 }
 
 .m-l-auto {
@@ -996,3 +989,8 @@
 .cursor-pointer {
   cursor: pointer;
 }
+
+
+.dnone { 
+  display: none;
+}
\ No newline at end of file
diff --git a/src/theme/variables.scss b/src/theme/variables.scss
index bc94c59f6..ae5d5b2ae 100644
--- a/src/theme/variables.scss
+++ b/src/theme/variables.scss
@@ -1,6 +1,7 @@
 // Custom Theming for Angular Material
 // For more information: https://material.angular.io/guide/theming
 @import "~@angular/material/theming";
+@import '~src/function.scss';
 // Plus imports for other components in your app.
 
 // Include the common styles for Angular Material. We include this here so that you only
@@ -488,7 +489,7 @@ $app-theme: mat-light-theme(
 }
 .approve-event-time p {
   font-family: Roboto;
-  font-size: 13px;
+  font-size: rem(13) ;
   font-weight: normal;
   font-stretch: normal;
   font-style: normal;
@@ -505,7 +506,7 @@ $app-theme: mat-light-theme(
 .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;
@@ -518,7 +519,7 @@ $app-theme: mat-light-theme(
 .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;
@@ -530,11 +531,11 @@ $app-theme: mat-light-theme(
 }
 
 .nav-icon {
-  font-size: 40px;
+  font-size: rem(40);
 }
 
 .btn-div {
-  width: 390px;
+  width: rem(390);
   margin: 10px;
   overflow: auto;
 }
@@ -551,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;
@@ -560,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;
@@ -576,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;
@@ -587,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);
@@ -604,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;
@@ -614,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;
@@ -624,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;
@@ -644,7 +645,7 @@ $app-theme: mat-light-theme(
   .label {
     border-radius: 20px;
     background: #ffb703;
-    font-size: 12px;
+    font-size: rem(12);
     float: right;
     padding: 2.5px 13.5px 2.5px 13.5px;
     color: #fff;
diff --git a/version/git-version.ts b/version/git-version.ts
index 9bd933ad9..58c7545c4 100644
--- a/version/git-version.ts
+++ b/version/git-version.ts
@@ -1,12 +1,12 @@
 export let versionData = {
-  "shortSHA": "3f65108fe",
-  "SHA": "3f65108fe44450cb4bc334cfdc028bc65e1a35d5",
+  "shortSHA": "69c900f5b",
+  "SHA": "69c900f5bb42a2ae429b0864d719901db33682b3",
   "branch": "merge-all",
   "lastCommitAuthor": "'Peter Maquiran'",
-  "lastCommitTime": "'Wed Jul 12 10:45:49 2023 +0100'",
+  "lastCommitTime": "'Wed Jul 12 10:53:32 2023 +0100'",
   "lastCommitMessage": "merge",
-  "lastCommitNumber": "5061",
+  "lastCommitNumber": "5063",
   "change": "",
-  "changeStatus": "On branch merge-all\nAll conflicts fixed but you are still merging.\n  (use \"git commit\" to conclude merge)\n\nChanges to be committed:\n\tmodified:   src/app/app.component.ts\n\tmodified:   src/app/app.module.ts\n\tmodified:   src/app/services/background.service.ts\n\tmodified:   src/app/services/chat/rochet-chat-connector.service.ts\n\tnew file:   src/app/services/logging-interceptor.service.spec.ts\n\tnew file:   src/app/services/logging-interceptor.service.ts\n\tmodified:   version/git-version.ts",
+  "changeStatus": "On branch merge-all\nAll conflicts fixed but you are still merging.\n  (use \"git commit\" to conclude merge)\n\nChanges to be committed:\n\tmodified:   src/app/domain/process/DispatchDomain.ts\n\tmodified:   src/app/home/home.page.html\n\tmodified:   src/app/home/home.page.scss\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/profile/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/models/dailyworktask.model.ts\n\tmodified:   src/app/pages/agenda/agenda.page.html\n\tmodified:   src/app/pages/agenda/agenda.page.scss\n\tmodified:   src/app/pages/agenda/agenda.page.ts\n\tmodified:   src/app/pages/agenda/edit-event/edit-event.page.html\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.html\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.html\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/messages/messages.page.ts\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.html\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\tdeleted:    src/app/pages/publications/publication-detail/publication-detail-routing.module.ts\n\tdeleted:    src/app/pages/publications/publication-detail/publication-detail.module.ts\n\tdeleted:    src/app/pages/publications/publication-detail/publication-detail.page.html\n\tdeleted:    src/app/pages/publications/publication-detail/publication-detail.page.scss\n\tdeleted:    src/app/pages/publications/publication-detail/publication-detail.page.spec.ts\n\tdeleted:    src/app/pages/publications/publication-detail/publication-detail.page.ts\n\tmodified:   src/app/pages/publications/publications.page.html\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/services/logging-interceptor.service.ts\n\tmodified:   src/app/services/theme.service.ts\n\tmodified:   src/app/services/toast.service.ts\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-options-popover/chat-options-popover.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/event-details-documents-options/event-details-documents-options.page.ts\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/function.scss\n\tmodified:   src/global.scss\n\tmodified:   src/style/main.scss\n\tmodified:   src/theme/variables.scss\n\tmodified:   version/git-version.ts\n\tnew file:   web.config",
   "changeAuthor": "peter.maquiran"
 }
\ No newline at end of file
diff --git a/web.config b/web.config
new file mode 100644
index 000000000..81cc77a85
--- /dev/null
+++ b/web.config
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<configuration>
+  <system.webServer>
+    <rewrite>
+      <rules>
+        <rule name="AngularRewrite" stopProcessing="true">
+          <match url=".*" />
+          <conditions logicalGrouping="MatchAll">
+            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
+            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
+          </conditions>
+          <action type="Rewrite" url="/" />
+        </rule>
+      </rules>
+    </rewrite>
+  </system.webServer>
+</configuration>
\ No newline at end of file