diff --git a/src/app/pages/gabinete-digital/gabinete-digital.page.html b/src/app/pages/gabinete-digital/gabinete-digital.page.html
index c9e4f7907..e73c948d1 100644
--- a/src/app/pages/gabinete-digital/gabinete-digital.page.html
+++ b/src/app/pages/gabinete-digital/gabinete-digital.page.html
@@ -20,14 +20,14 @@
             <div class="d-flex justify-center">
               <ion-icon  src="assets/images/icons-agenda.svg"></ion-icon>
             </div>
-            <p class="text-center exp-card-title">Eventos para Aprovação</p>
+            <p class="text-center exp-card-title ">Eventos para Aprovação</p>
             <p class="text-center exp-card-content">{{count_ev_md+count_ev_pr}} <span class="title1">Documentos</span></p>
           </div>
           <div class="exp-card d-flex flex-column justify-center" (click)="openExpedientList()">
             <div class="d-flex justify-center">
               <ion-icon  src="assets/images/icons-correspondencia.svg"></ion-icon>
             </div>
-            <p class="text-center exp-card-title">Correspondencia</p>
+            <p class="text-center exp-card-title ">Correspondencia</p>
             <p class="text-center exp-card-content">{{count_exp_dailywork}} <span class="title1">Documentos</span></p>
           </div>
           <div class="exp-card d-flex flex-column justify-center" (click)="notImplemented()">
@@ -35,35 +35,35 @@
               <ion-icon  src="assets/images/icons-expediente-pendente.svg"></ion-icon>
             </div>
       
-            <p class="text-center exp-card-title">Pendentes</p>
+            <p class="text-center exp-card-title ">Pendentes</p>
             <p class="text-center exp-card-content"><span class="number">-</span> <span class="title1">Documentos</span></p>
           </div>
           <div class="exp-card d-flex flex-column justify-center" (click)="notImplemented()">
             <div class="d-flex justify-center">
               <ion-icon  src="assets/images/icons-expediente-parecer.svg"></ion-icon>
             </div>
-            <p class="text-center exp-card-title">Pedidos de Parecer</p>
+            <p class="text-center exp-card-title ">Pedidos de Parecer</p>
             <p class="text-center exp-card-content"><span class="number">-</span> <span class="title1">Documentos</span></p>
           </div>
           <div class="exp-card d-flex flex-column justify-center" (click)="notImplemented()">
             <div class="d-flex justify-center">
               <ion-icon  src="assets/images/icons-expediente-deferimento.svg"></ion-icon>
             </div>
-            <p class="text-center exp-card-title">Pedidos de Deferimento</p>
+            <p class="text-center exp-card-title ">Pedidos de Deferimento</p>
             <p class="text-center exp-card-content"><span class="number">-</span> <span class="title1">Documentos</span></p>
           </div>
           <div class="exp-card d-flex flex-column justify-center" (click)="notImplemented()">
             <div class="d-flex justify-center">
               <ion-icon  src="assets/images/icons-expediente-despacho.svg"></ion-icon>
             </div>
-            <p class="text-center exp-card-title">Despachos</p>
+            <p class="text-center exp-card-title ">Despachos</p>
             <p class="text-center exp-card-content"> <span class="number">-</span> <span class="title1">Documentos</span></p>
           </div>
           <div class="exp-card d-flex flex-column justify-center" (click)="notImplemented()">
             <div class="d-flex justify-center">
               <ion-icon  src="assets/images/icons-expediente-diploma.svg"></ion-icon>
             </div>
-            <p class="text-center exp-card-title">Diplomas por Validar</p>
+            <p class="text-center exp-card-title ">Diplomas por Validar</p>
             <p class="text-center exp-card-content"><span class="number">-</span> <span class="title1">Documentos</span> </p>
           </div>
         </div>
diff --git a/src/style/main.scss b/src/style/main.scss
index f9b9a422e..1c504c03a 100644
--- a/src/style/main.scss
+++ b/src/style/main.scss
@@ -1,275 +1,232 @@
-.v-application .overflow-auto {
-    overflow: auto !important;
-}
-.overflow-hidden {
-    overflow: hidden !important;
-}
-.overflow-visible {
-    overflow: visible !important;
-}
-.overflow-x-auto {
-    overflow-x: auto !important;
-}
-.overflow-x-hidden {
-    overflow-x: hidden !important;
-}
-.overflow-y-auto {
-    overflow-y: auto !important;
-}
-.overflow-y-hidden {
-    overflow-y: hidden !important;
-}
-.d-none {
-    display: none !important;
-}
-.d-inline {
-    display: inline !important;
-}
-.d-inline-block {
-    display: inline-block !important;
-}
-.d-block {
-    display: block !important;
-}
-.d-table {
-    display: table !important;
-}
-.d-table-row {
-    display: table-row !important;
-}
-.d-table-cell {
-    display: table-cell !important;
-}
-.d-flex {
-    display: flex !important;
-}
-.d-inline-flex {
-    display: inline-flex !important;
-}
-.float-none {
-    float: none !important;
-}
-.float-left {
-    float: left !important;
-}
-.float-right {
-    float: right !important;
-}
-.flex-fill {
-    flex: 1 1 auto !important;
-}
-.flex-row {
-    flex-direction: row !important;
-}
-.flex-column {
-    flex-direction: column !important;
-}
-.flex-row-reverse {
-    flex-direction: row-reverse !important;
-}
-.flex-column-reverse {
-    flex-direction: column-reverse !important;
-}
-.flex-grow-0 {
-    flex-grow: 0 !important;
-}
-.flex-grow-1 {
-    flex-grow: 1 !important;
-}
-.flex-shrink-0 {
-    flex-shrink: 0 !important;
-}
-.flex-shrink-1 {
-    flex-shrink: 1 !important;
-}
-.flex-wrap {
-    flex-wrap: wrap !important;
-}
-.flex-nowrap {
-    flex-wrap: nowrap !important;
-}
-.flex-wrap-reverse {
-    flex-wrap: wrap-reverse !important;
-}
-.justify-start {
-    justify-content: flex-start !important;
-}
-.justify-end {
-    justify-content: flex-end !important;
-}
-.justify-center {
-    justify-content: center !important;
-}
-.justify-space-between {
-    justify-content: space-between !important;
-}
-.justify-space-around {
-    justify-content: space-around !important;
-}
-.align-start {
-    align-items: flex-start !important;
-}
-.align-end {
-    align-items: flex-end !important;
-}
-.align-center {
-    align-items: center !important;
-}
-.align-baseline {
-    align-items: baseline !important;
-}
-.align-stretch {
-    align-items: stretch !important;
-}
-.align-content-start {
-    align-content: flex-start !important;
-}
-.align-content-end {
-    align-content: flex-end !important;
-}
-.align-content-center {
-    align-content: center !important;
-}
-.align-content-space-between {
-    align-content: space-between !important;
-}
-.align-content-space-around {
-    align-content: space-around !important;
-}
-.align-content-stretch {
-    align-content: stretch !important;
-}
-.align-self-auto {
-    align-self: auto !important;
-}
-.align-self-start {
-    align-self: flex-start !important;
-}
-.align-self-end {
-    align-self: flex-end !important;
-}
-.align-self-center {
-    align-self: center !important;
-}
-.align-self-baseline {
-    align-self: baseline !important;
-}
-.align-self-stretch {
-    align-self: stretch !important;
-}
+// overflow
+.v-application .overflow-auto {overflow: auto !important;}
+.overflow-hidden {overflow: hidden !important;}
+.overflow-visible {overflow: visible !important;}
+.overflow-x-auto {overflow-x: auto !important;}
+.overflow-x-hidden {overflow-x: hidden !important;}
+.overflow-y-auto {overflow-y: auto !important;}
+.overflow-y-hidden {overflow-y: hidden !important;}
+// display
+.d-none {display: none !important;}
+.d-inline {display: inline !important;}
+.d-inline-block {display: inline-block !important;}
+.d-block {display: block !important;}
+.d-table {display: table !important;}
+.d-table-row {display: table-row !important;}
+.d-table-cell {display: table-cell !important;}
+.d-flex {display: flex !important;}
+.d-inline-flex {display: inline-flex !important;}
+//float
+.float-none {float: none !important;}
+.float-left {float: left !important;}
+.float-right {float: right !important;}
+//flex
+.flex-fill {flex: 1 1 auto !important;}
+.flex-row {flex-direction: row !important;}
+.flex-column {flex-direction: column !important;}
+.flex-row-reverse {flex-direction: row-reverse !important;}
+.flex-column-reverse {flex-direction: column-reverse !important;}
+.flex-grow-0 {flex-grow: 0 !important;}
+.flex-grow-1 {flex-grow: 1 !important;}
+.flex-md-1{ flex: 1;}
+.flex-md-0{ flex: 0;}
+.flex-shrink-0 {flex-shrink: 0 !important;}
+.flex-shrink-1 {flex-shrink: 1 !important;}
+.flex-wrap {flex-wrap: wrap !important;}
+.flex-nowrap {flex-wrap: nowrap !important;}
+.flex-wrap-reverse {flex-wrap: wrap-reverse !important;}
+//justify
+.justify-start {justify-content: flex-start !important;}
+.justify-end {justify-content: flex-end !important;}
+.justify-center {justify-content: center !important;}
+.justify-space-between {justify-content: space-between !important;}
+.justify-space-around {justify-content: space-around !important;}
+//align
+.align-start {align-items: flex-start !important;}
+.align-end {align-items: flex-end !important;}
+.align-center {align-items: center !important;}
+.align-baseline {align-items: baseline !important;}
+.align-stretch {align-items: stretch !important;}
+//align-content
+.align-content-start {align-content: flex-start !important;}
+.align-content-end {align-content: flex-end !important;}
+.align-content-center {align-content: center !important;}
+.align-content-space-between {align-content: space-between !important;}
+.align-content-space-around {align-content: space-around !important;}
+.align-content-stretch {align-content: stretch !important;}
+// .align-self
+.align-self-auto {align-self: auto !important;}
+.align-self-start {align-self: flex-start !important;}
+.align-self-end {align-self: flex-end !important;}
+.align-self-center {align-self: center !important;}
+.align-self-baseline {align-self: baseline !important;}
+.align-self-stretch {align-self: stretch !important;}
+.flex-1{ flex: 1;}
+.flex-0{ flex: 0;}
 
 
-
-
-
-.m-t-20 {
-    margin-top: 20px;
+@media only screen and (min-width: 1024px) {
+    // overflow
+    .v-application-md .overflow-md-auto {overflow: auto !important;}
+    .overflow-md-hidden {overflow: hidden !important;}
+    .overflow-md-visible {overflow: visible !important;}
+    .overflow-md-x-auto {overflow-x: auto !important;}
+    .overflow-md-x-hidden {overflow-x: hidden !important;}
+    .overflow-md-y-auto {overflow-y: auto !important;}
+    .overflow-md-y-hidden {overflow-y: hidden !important;}
+    //display
+    .d-md-flex {display: flex !important;}
+    .d-md-inline-flex {display: inline-flex !important;}
+    .d-md-none {display: none !important;}
+    .d-md-inline {display: inline !important;}
+    .d-md-inline-block {display: inline-block !important;}
+    .d-md-block {display: block !important;}
+    .d-md-table {display: table !important;}
+    .d-md-table-row {display: table-row !important;}
+    .d-md-table-cell {display: table-cell !important;}
+    .d-md-flex {display: flex !important;}
+    .d-md-inline-flex {display: inline-flex !important;}
+    //float
+    .float-md-none {float: none !important;}
+    .float-md-left {float: left !important;}
+    .float-md-right {float: right !important;}
+    //flex
+    .flex-md-fill {flex: 1 1 auto !important;}
+    .flex-md-row {flex-direction: row !important;}
+    .flex-md-column {flex-direction: column !important;}
+    .flex-md-row-reverse {flex-direction: row-reverse !important;}
+    .flex-md-column-reverse {flex-direction: column-reverse !important;}
+    .flex-md-grow-0 {flex-grow: 0 !important;}
+    .flex-md-grow-1 {flex-grow: 1 !important;}
+    .flex-md-1{ flex: 1;}
+    .flex-md-0{ flex: 0;}
+    .flex-md-shrink-0 {flex-shrink: 0 !important;}
+    .flex-md-shrink-1 {flex-shrink: 1 !important;}
+    .flex-md-wrap {flex-wrap: wrap !important;}
+    .flex-md-nowrap {flex-wrap: nowrap !important;}
+    .flex-md-wrap-reverse {flex-wrap: wrap-reverse !important;}
+    // justify
+    .justify-md-end{  justify-content: flex-end !important;}
+    .justify-md-center{ justify-content: flex-start !important;}
+    .justify-md-space-between{ justify-content: space-between !important;}
+    .justify-md-space-around{ justify-content: space-around !important;}
+    // align
+    .align-md-start{ align-items: flex-start !important;}
+    .align-md-end{align-items: flex-end !important;}
+    .align-md-center{ align-items: center !important;}
+    .align-md-baseline{ align-items: baseline !important;}
+    .align-md-stretch{align-items: stretch !important;}
+    // .align-self
+    .align-self-md-start{ align-self: flex-start !important;}
+    .align-self-md-end{ align-self: flex-end !important;}
+    .align-self-md-center{ align-self: center !important;}
+    .align-self-md-baseline{ align-self: baseline !important;}
+    .align-self-md-auto{ align-self: auto !important;}
+    .align-self-md-stretch{ align-self: stretch !important; }
+    // flex wrap
+    .flex-md-nowrap{   flex-wrap: nowrap !important;}
+    .flex-md-wrap{  flex-wrap: wrap !important;}
+    .flex-md-wrap-reverse{ flex-wrap: wrap-reverse !important;}
+    // align content
+    .align-md-content-start{  align-content: flex-start !important;}
+    .align-md-content-end{  align-content: flex-end !important;}
+    .align-md-content-center{ align-content: center !important;}
+    .align-md-content-space-between{ align-content: space-between !important;}
+    .align-md-content-space-around{ align-content: space-around !important;}
+    .align-md-content-stretch{ align-content: stretch !important;}
 }
 
-.m-b-20 {
-    margin-bottom: 20px;
+@media only screen and (min-width: 1366px) {
+    // overflow
+    .v-application-lg .overflow-md-auto {overflow: auto !important;}
+    .overflow-lg-hidden {overflow: hidden !important;}
+    .overflow-lg-visible {overflow: visible !important;}
+    .overflow-lg-x-auto {overflow-x: auto !important;}
+    .overflow-lg-x-hidden {overflow-x: hidden !important;}
+    .overflow-lg-y-auto {overflow-y: auto !important;}
+    .overflow-lg-y-hidden {overflow-y: hidden !important;}
+    //display
+    .d-lg-flex {display: flex !important;}
+    .d-lg-inline-flex {display: inline-flex !important;}
+    .d-lg-none {display: none !important;}
+    .d-lg-inline {display: inline !important;}
+    .d-lg-inline-block {display: inline-block !important;}
+    .d-lg-block {display: block !important;}
+    .d-lg-table {display: table !important;}
+    .d-lg-table-row {display: table-row !important;}
+    .d-lg-table-cell {display: table-cell !important;}
+    .d-lg-flex {display: flex !important;}
+    .d-lg-inline-flex {display: inline-flex !important;}
+    //float
+    .float-lg-none {float: none !important;}
+    .float-lg-left {float: left !important;}
+    .float-lg-right {float: right !important;}
+    //flex
+    .flex-lg-fill {flex: 1 1 auto !important;}
+    .flex-lg-row {flex-direction: row !important;}
+    .flex-lg-column {flex-direction: column !important;}
+    .flex-lg-row-reverse {flex-direction: row-reverse !important;}
+    .flex-lg-column-reverse {flex-direction: column-reverse !important;}
+    .flex-lg-grow-0 {flex-grow: 0 !important;}
+    .flex-lg-grow-1 {flex-grow: 1 !important;}
+    .flex-lg-1{ flex: 1;}
+    .flex-lg-0{ flex: 0;}
+    .flex-lg-shrink-0 {flex-shrink: 0 !important;}
+    .flex-lg-shrink-1 {flex-shrink: 1 !important;}
+    .flex-lg-wrap {flex-wrap: wrap !important;}
+    .flex-lg-nowrap {flex-wrap: nowrap !important;}
+    .flex-lg-wrap-reverse {flex-wrap: wrap-reverse !important;}
+    // justify
+    .justify-lg-end{  justify-content: flex-end !important;}
+    .justify-lg-center{ justify-content: flex-start !important;}
+    .justify-lg-space-between{ justify-content: space-between !important;}
+    .justify-lg-space-around{ justify-content: space-around !important;}
+    // align
+    .align-lg-start{ align-items: flex-start !important;}
+    .align-lg-end{align-items: flex-end !important;}
+    .align-lg-center{ align-items: center !important;}
+    .align-lg-baseline{ align-items: baseline !important;}
+    .align-lg-stretch{align-items: stretch !important;}
+    // .align-self
+    .align-self-lg-start{ align-self: flex-start !important;}
+    .align-self-lg-end{ align-self: flex-end !important;}
+    .align-self-lg-center{ align-self: center !important;}
+    .align-self-lg-baseline{ align-self: baseline !important;}
+    .align-self-lg-auto{ align-self: auto !important;}
+    .align-self-lg-stretch{ align-self: stretch !important; }
+    // flex wrap
+    .flex-lg-nowrap{   flex-wrap: nowrap !important;}
+    .flex-lg-wrap{  flex-wrap: wrap !important;}
+    .flex-lg-wrap-reverse{ flex-wrap: wrap-reverse !important;}
+    // align content
+    .align-lg-content-start{  align-content: flex-start !important;}
+    .align-lg-content-end{  align-content: flex-end !important;}
+    .align-lg-content-center{ align-content: center !important;}
+    .align-lg-content-space-between{ align-content: space-between !important;}
+    .align-lg-content-space-around{ align-content: space-around !important;}
+    .align-lg-content-stretch{ align-content: stretch !important;}
 }
 
-.m-l-20 {
-    margin-left: 20px;
-}
+.m-l-auto {margin-left: auto;}
+.m-auto {margin: 0 auto;}
 
-.m-l-auto {
-    margin-left: auto;
-}
+.text-bold {font-weight: 700;}
+.text-blue {color: #0d89d1;}
+.text-red {color: #d30a0a;}
+.text-dark-blue {color: #061b52;}
+.text-grey {color: #797979;}
+.text-white {color: white;}
+.text-black {color: black;}
+.text-center {text-align: center;}
 
-.m-r-20 {
-    margin-right: 20px;
-}
-
-.m-auto {
-    margin: 0 auto;
-}
-
-.pd-10 {
-    padding: 10px;
-    box-sizing: border-box;
-}
-
-.pd-t-20 {
-    padding-top: 20px;
-}
-
-.pd-b-20 {
-    padding-bottom: 20px;
-}
-
-.pd-r-20 {
-    padding-right: 20px;
-}
-
-.pd-l-20 {
-    padding-left: 20px;
-}
-
-.text-bold {
-    font-weight: 700;
-}
-
-.text-blue {
-    color: #0d89d1;
-}
-
-.text-red {
-    color: #d30a0a;
-}
-
-.text-dark-blue {
-    color: #061b52;
-}
-
-.text-grey {
-    color: #797979;
-}
-
-.text-white {
-    color: white;
-}
-
-.text-black {
-    color: black;
-}
-
-.text-center {
-    text-align: center;
-}
-
-.width-100{
-    width: 100%;
-}
-
-.height-100{
-    height: 100%;
-}
-.height-fit-content{
-    height: fit-content;
-}
-
-.width-50{
-    width: 50%;
-}
-
-
-.flex-1{
-    flex: 1;
-}
-
-
-.flex-0{
-    flex: 0;
-}
+.width-100{width: 100%;}
+.height-100{height: 100%;}
+.height-fit-content{height: fit-content;}
+.width-50{width: 50%;}
 
 // system spacing
 
 
-
-
-
 @for $i from 0 through 10 {
 
     $size: $i * 5;
@@ -324,6 +281,4 @@
   }
 
 
-.text-center{
-    text-align: center;
-}
\ No newline at end of file
+.text-center{text-align: center;}
\ No newline at end of file