diff --git a/src/app/modals/add-note/add-note.page.scss b/src/app/modals/add-note/add-note.page.scss
index 678a31590..d5a37d279 100644
--- a/src/app/modals/add-note/add-note.page.scss
+++ b/src/app/modals/add-note/add-note.page.scss
@@ -68,7 +68,7 @@ float: left;
   }
   .attach-document{
     font-size: 15px;
-    color: #0d89d1;
+    color: var(--title-text-color);
     margin: 5px 5px 5px 10px;
     padding: 5px;
     float: left;
diff --git a/src/app/modals/create-process/create-process.page.scss b/src/app/modals/create-process/create-process.page.scss
index 317b25399..35f7952e2 100644
--- a/src/app/modals/create-process/create-process.page.scss
+++ b/src/app/modals/create-process/create-process.page.scss
@@ -76,7 +76,7 @@
     }
     .attach-document{
       font-size: 15px;
-      color: #0d89d1;
+      color: var(--title-text-color);
     }
 
     .attach-title-item{
diff --git a/src/app/modals/dar-parecer/dar-parecer.page.scss b/src/app/modals/dar-parecer/dar-parecer.page.scss
index 9c486eb9a..dcff19e7a 100644
--- a/src/app/modals/dar-parecer/dar-parecer.page.scss
+++ b/src/app/modals/dar-parecer/dar-parecer.page.scss
@@ -80,7 +80,7 @@
     }
     .attach-document{
       font-size: 15px;
-      color: #0d89d1;
+      color: var(--title-text-color);
       margin: 5px 5px 5px 10px;
       padding: 5px;
       float: left;
diff --git a/src/app/modals/delegar/delegar.page.scss b/src/app/modals/delegar/delegar.page.scss
index c6fc0f6da..3a4a64875 100644
--- a/src/app/modals/delegar/delegar.page.scss
+++ b/src/app/modals/delegar/delegar.page.scss
@@ -77,7 +77,7 @@
     }
     .attach-document{
       font-size: 15px;
-      color: #0d89d1;
+      color: var(--title-text-color);
       margin: 5px 5px 5px 10px;
       padding: 5px;
       float: left;
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 637cd24d1..5b53e20e1 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
@@ -74,7 +74,7 @@
     }
     .attach-document{
       font-size: 15px;
-      color: #0d89d1;
+      color: var(--title-text-color);
       margin: 5px 5px 5px 10px;
       padding: 5px;
       float: left;
diff --git a/src/app/pages/agenda/agenda.page.html b/src/app/pages/agenda/agenda.page.html
index 53e4bfa2b..4389ac204 100644
--- a/src/app/pages/agenda/agenda.page.html
+++ b/src/app/pages/agenda/agenda.page.html
@@ -22,7 +22,7 @@
           <!--  Calendar is here -->
 
           <div class="calendar-segment-{{profile}}" [class.calendar-segment-pr-force]="loggeduser.Profile =='PR'">
-            <div class="calendar-container"  [style.height]="calendarHeight">
+            <div class="calendar-container"  [style.height]="calendarHeight ">
 
               <ion-row class="ion-justify-content-between calendar-tool-tip">
                 <ion-row class="ion-align-items-center">
diff --git a/src/app/pages/agenda/agenda.page.scss b/src/app/pages/agenda/agenda.page.scss
index 823d08aee..10698bcf7 100644
--- a/src/app/pages/agenda/agenda.page.scss
+++ b/src/app/pages/agenda/agenda.page.scss
@@ -284,8 +284,6 @@ td.monthview-primary-with-event {
   height: 100%;
   font-family: Roboto;
   margin: 0 auto;
-  border-top-left-radius: 25px;
-  border-top-right-radius: 25px;
   background-color: #fff;
   overflow:auto;
   /* padding: 25px 20px 0 20px; */
@@ -572,12 +570,6 @@ td.monthview-primary-with-event {
 
 }
 
-.calendar-timeline{
-
-  height: 100%;
-  background-color: white;
-  border-top-left-radius: 25px;
-}
 
 .calendar-border{
   background: #ebebeb;
@@ -602,7 +594,7 @@ td.monthview-primary-with-event {
   overflow: hidden;
 
   .calendar-timeline{
-    border-top-right-radius: 24px;
+    border-top-right-radius: 0px;
     width: calc(100%);
     overflow: hidden;
 
@@ -618,11 +610,6 @@ td.monthview-primary-with-event {
   }
 }
 
-.event-details{
-  width: 40%;
-  background: white;
-  border-top-right-radius: 25px;
-}
 
 
 .event-details{
@@ -636,6 +623,7 @@ td.monthview-primary-with-event {
 
     .calendar-timeline{
       border-top-right-radius: 0px;
+      border-top-left-radius: 25px;
       width: calc(100% - 40%);
       border-right: 1px solid #d8d8d8;
 
@@ -769,4 +757,35 @@ app-approve-event{
   height: 100%;
   width: 100%;
   z-index: 99;
+}
+
+@media only screen and (min-width: 1225px) {
+  .calendar-timeline{
+
+    height: 100%;
+    background-color: white;
+    border-top-left-radius: 25px;
+  }
+  .event-details{
+    width: 40%;
+    background: white;
+    border-top-right-radius: 0px;
+  }
+
+}
+
+@media only screen and (min-width: 321px) {
+
+  .calendar-timeline{
+
+    height: 100%;
+    background-color: white;
+    border-top-left-radius: 0px;
+  }
+  .event-details{
+    width: 40%;
+    background: white;
+    border-top-right-radius: 25px;
+  }
+
 }
\ No newline at end of file
diff --git a/src/app/pages/chat/chat.page.html b/src/app/pages/chat/chat.page.html
index 635cc9552..ea67a9683 100644
--- a/src/app/pages/chat/chat.page.html
+++ b/src/app/pages/chat/chat.page.html
@@ -8,7 +8,7 @@
     <ion-refresher-content>
     </ion-refresher-content>
   </ion-refresher>
-  <div class="main-content d-flex height-100">
+  <div class="main-content d-flex height-100 border-t-radius">
       <!-- 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> -->
diff --git a/src/app/pages/chat/chat.page.scss b/src/app/pages/chat/chat.page.scss
index 9c0e60de2..53d84654c 100644
--- a/src/app/pages/chat/chat.page.scss
+++ b/src/app/pages/chat/chat.page.scss
@@ -38,8 +38,6 @@ ion-content{
   font-family: Roboto;
   margin: 0 auto;
   background-color: #fff;
-  border-top-left-radius: 25px;
-  border-top-right-radius: 25px;
 
   overflow: auto;
 
diff --git a/src/app/pages/gabinete-digital/gabinete-digital.page.html b/src/app/pages/gabinete-digital/gabinete-digital.page.html
index f0759e726..f06b1437f 100644
--- a/src/app/pages/gabinete-digital/gabinete-digital.page.html
+++ b/src/app/pages/gabinete-digital/gabinete-digital.page.html
@@ -8,7 +8,7 @@
     </ion-refresher-content>
   </ion-refresher>
 
-  <div class="main-content d-flex height-100">
+  <div class="main-content d-flex height-100 border-t-radius">
 
       <!-- Aside left -->
       <div class="aside-wrapper d-flex flex-column width-md-40 flex-grow-1">
diff --git a/src/app/pages/gabinete-digital/gabinete-digital.page.scss b/src/app/pages/gabinete-digital/gabinete-digital.page.scss
index d796b3602..3d96f2e64 100644
--- a/src/app/pages/gabinete-digital/gabinete-digital.page.scss
+++ b/src/app/pages/gabinete-digital/gabinete-digital.page.scss
@@ -120,8 +120,6 @@ ion-segment-button{
   background:var(--gabinete-main-container);
   overflow:hidden;
   padding: 0 !important;
-  border-top-left-radius: 25px;
-  border-top-right-radius: 25px;
 
   .aside-wrapper{
     overflow: hidden;
diff --git a/src/style/main.scss b/src/style/main.scss
index 4ccbb4f2b..87e671c4b 100644
--- a/src/style/main.scss
+++ b/src/style/main.scss
@@ -1,483 +1,987 @@
 // 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;}
+.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;}
+.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;}
+.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;}
+.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;}
+.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-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-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;}
-
+.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;
+}
 
 @media only screen and (min-width: 800px) {
   // 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;}
+  .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;}
+  .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;}
+  .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;}
+  .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;}
+  .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-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; }
+  .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;}
+  .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;}
+  .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;
+  }
 
   @for $i from 0 through 50 {
-      .font-md-#{$i} {
-          font-size: #{$i}px ;
-      }
+    .font-md-#{$i} {
+      font-size: #{$i}px;
+    }
   }
   @for $i from 0 through 10 {
+    $size: $i * 5;
 
-      $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;
-        }
-    
+    $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%;
+  }
+  .width-md-90 {
+    width: 90%;
+  }
+  .width-md-80 {
+    width: 80%;
+  }
+  .width-md-70 {
+    width: 70%;
+  }
+  .width-md-60 {
+    width: 60%;
+  }
+  .width-md-50 {
+    width: 50%;
+  }
+  .width-md-40 {
+    width: 40%;
+  }
+  .width-md-30 {
+    width: 30%;
+  }
+  .width-md-20 {
+    width: 20%;
+  }
+  .width-md-10 {
+    width: 10%;
+  }
 
-.width-md-100{width: 100%;}
-.width-md-90{width: 90%;}
-.width-md-80{width: 80%;}
-.width-md-70{width: 70%;}
-.width-md-60{width: 60%;}
-.width-md-50{width: 50%;}
-.width-md-40{width: 40%;}
-.width-md-30{width: 30%;}
-.width-md-20{width: 20%;}
-.width-md-10{width: 10%;}
-
-.width-md-unset{ width: unset;}
-.height-md-unset{ height: unset !important;}
-
-.max-width-md-100{max-width: 100%;}
-.max-width-md-90{max-width: 90%;}
-.max-width-md-80{max-width: 80%;}
-.max-width-md-70{max-width: 70%;}
-.max-width-md-60{max-width: 60%;}
-.max-width-md-50{max-width: 50%;}
-.max-width-md-40{max-width: 40%;}
-.max-width-md-35{max-width: 35%;}
-.max-width-md-30{max-width: 30%;}
-.max-width-md-20{max-width: 20%;}
-.max-width-md-10{max-width: 10%;}
+  .width-md-unset {
+    width: unset;
+  }
+  .height-md-unset {
+    height: unset !important;
+  }
 
+  .max-width-md-100 {
+    max-width: 100%;
+  }
+  .max-width-md-90 {
+    max-width: 90%;
+  }
+  .max-width-md-80 {
+    max-width: 80%;
+  }
+  .max-width-md-70 {
+    max-width: 70%;
+  }
+  .max-width-md-60 {
+    max-width: 60%;
+  }
+  .max-width-md-50 {
+    max-width: 50%;
+  }
+  .max-width-md-40 {
+    max-width: 40%;
+  }
+  .max-width-md-35 {
+    max-width: 35%;
+  }
+  .max-width-md-30 {
+    max-width: 30%;
+  }
+  .max-width-md-20 {
+    max-width: 20%;
+  }
+  .max-width-md-10 {
+    max-width: 10%;
+  }
 }
 
 @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;}
+  .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;}
+  .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;}
+  .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;}
+  .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;}
+  .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-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; }
+  .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;}
+  .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;}
+  .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;
+  }
 
-  .width-lg-unset{ width: unset;}
-  .height-lg-unset{ height: unset !important;}
+  .width-lg-unset {
+    width: unset;
+  }
+  .height-lg-unset {
+    height: unset !important;
+  }
 
   @for $i from 0 through 50 {
     .font-lg-#{$i} {
-        font-size: #{$i}px ;
+      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 {margin-left: auto;}
-.m-auto {margin: 0 auto;}
-.ml-auto, .mx-auto {margin-left: auto!important;}
-.mr-auto, .mx-auto {margin-right: auto!important;}
-
-.text-bold {font-weight: 700;}
-.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;}
-
-.background-blue {background-color: #0d89d1;}
-.background-red {background: #d30a0a;}
-.background-dark-blue {background: #061b52;}
-.background-grey {background: #797979;}
-.background-white {background: white;}
-.background-black {background: black;}
-
-.text-center {text-align: center;}
-.tex-left{ text-align: left;}
-.text-right{text-align: right;}
-
-.width-100{width: 100%;}
-.width-90{width: 90%;}
-.width-80{width: 80%;}
-.width-70{width: 70%;}
-.width-60{width: 60%;}
-.width-50{width: 50%;}
-.width-45{width: 45%;}
-.width-40{width: 40%;}
-.width-30{width: 30%;}
-.width-20{width: 20%;}
-.width-10{width: 10%;}
-
-
-.max-width-100{max-width: 100%;}
-.max-width-90{max-width: 90%;}
-.max-width-80{max-width: 80%;}
-.max-width-70{max-width: 70%;}
-.max-width-60{max-width: 60%;}
-.max-width-65{max-width: 65%;}
-.max-width-50{max-width: 50%;}
-.max-width-45{max-width: 45%;}
-.max-width-40{max-width: 40%;}
-.max-width-35{max-width: 35%;}
-.max-width-30{max-width: 30%;}
-.max-width-20{max-width: 20%;}
-.max-width-10{max-width: 10%;}
-
-
-.height-100{height: 100%;}
-.height-90{height: 90%;}
-.height-80{height: 80%;}
-.height-70{width: 70%;}
-.height-60{height: 60%;}
-.height-50{height: 50%;}
-.height-40{height: 40%;}
-.height-30{height: 30%;}
-.height-20{height: 20%;}
-.height-10{height: 10%;}
-
-.height-unset{ height: unset;}
-.width-unset{ width: unset;}
-
-.height-fit-content{height: fit-content;}
-
-
-.border-t-radius{
-    border-top-left-radius: 25px;
-    border-top-right-radius: 25px;
-}
-.border-b-radius{
-    border-bottom-left-radius: 25px;
-    border-bottom-right-radius: 25px;
-}
-
-
-
-// system spacing
-
-
-@for $i from 0 through 10 {
-
     $size: $i * 5;
-    
-    $properties:
-      "margin" "m",
-      "padding" "p";
-  
+
+    $properties: "margin" "m", "padding" "p";
+
     @each $property, $short in $properties {
       // all directions
-      .#{$short}a-#{$size} {
-        #{$property}-left: #{$size}px !important; 
+      .#{$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-#{$size} {
-        #{$property}-top: #{$size}px !important
-      }
-      // bottom
-      .#{$short}b-#{$size} {
-        #{$property}-bottom: #{$size}px !important
-      }
-      // left
-      .#{$short}l-#{$size} {
-        #{$property}-left: #{$size}px!important
-      }
-      // right
-      .#{$short}r-#{$size} {
-        #{$property}-right: #{$size}px!important
-      }
-      // left and right
-      .#{$short}x-#{$size} {
-        #{$property}-left: #{$size}px!important;
-        #{$property}-right: #{$size}px!important;
-      }
-      // top and bottom
-      .#{$short}y-#{$size} {
         #{$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 {
+  margin-left: auto;
+}
+.m-auto {
+  margin: 0 auto;
+}
+.ml-auto,
+.mx-auto {
+  margin-left: auto !important;
+}
+.mr-auto,
+.mx-auto {
+  margin-right: auto !important;
+}
+
+.text-bold {
+  font-weight: 700;
+}
+.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;
+}
+
+.background-blue {
+  background-color: #0d89d1;
+}
+.background-red {
+  background: #d30a0a;
+}
+.background-dark-blue {
+  background: #061b52;
+}
+.background-grey {
+  background: #797979;
+}
+.background-white {
+  background: white;
+}
+.background-black {
+  background: black;
+}
+
+.text-center {
+  text-align: center;
+}
+.tex-left {
+  text-align: left;
+}
+.text-right {
+  text-align: right;
+}
+
+.width-100 {
+  width: 100%;
+}
+.width-90 {
+  width: 90%;
+}
+.width-80 {
+  width: 80%;
+}
+.width-70 {
+  width: 70%;
+}
+.width-60 {
+  width: 60%;
+}
+.width-50 {
+  width: 50%;
+}
+.width-45 {
+  width: 45%;
+}
+.width-40 {
+  width: 40%;
+}
+.width-30 {
+  width: 30%;
+}
+.width-20 {
+  width: 20%;
+}
+.width-10 {
+  width: 10%;
+}
+
+.max-width-100 {
+  max-width: 100%;
+}
+.max-width-90 {
+  max-width: 90%;
+}
+.max-width-80 {
+  max-width: 80%;
+}
+.max-width-70 {
+  max-width: 70%;
+}
+.max-width-60 {
+  max-width: 60%;
+}
+.max-width-65 {
+  max-width: 65%;
+}
+.max-width-50 {
+  max-width: 50%;
+}
+.max-width-45 {
+  max-width: 45%;
+}
+.max-width-40 {
+  max-width: 40%;
+}
+.max-width-35 {
+  max-width: 35%;
+}
+.max-width-30 {
+  max-width: 30%;
+}
+.max-width-20 {
+  max-width: 20%;
+}
+.max-width-10 {
+  max-width: 10%;
+}
+
+.height-100 {
+  height: 100%;
+}
+.height-90 {
+  height: 90%;
+}
+.height-80 {
+  height: 80%;
+}
+.height-70 {
+  width: 70%;
+}
+.height-60 {
+  height: 60%;
+}
+.height-50 {
+  height: 50%;
+}
+.height-40 {
+  height: 40%;
+}
+.height-30 {
+  height: 30%;
+}
+.height-20 {
+  height: 20%;
+}
+.height-10 {
+  height: 10%;
+}
+
+.height-unset {
+  height: unset;
+}
+.width-unset {
+  width: unset;
+}
+
+.height-fit-content {
+  height: fit-content;
+}
+
+@media only screen and (min-width: 1224px) {
+  .border-t-radius {
+    border-top-left-radius: 25px;
+    border-top-right-radius: 25px;
+  }
+}
+
+@media only screen and (min-width: 321px) {
+  .border-t-radius {
+
+  }
+}
+.border-b-radius {
+  border-bottom-left-radius: 25px;
+  border-bottom-right-radius: 25px;
+}
+
+// system spacing
+
+@for $i from 0 through 10 {
+  $size: $i * 5;
+
+  $properties: "margin" "m", "padding" "p";
+
+  @each $property, $short in $properties {
+    // all directions
+    .#{$short}a-#{$size} {
+      #{$property}-left: #{$size}px !important;
+      #{$property}-right: #{$size}px !important;
+      #{$property}-top: #{$size}px !important;
+      #{$property}-bottom: #{$size}px !important;
+    }
+    // top
+    .#{$short}t-#{$size} {
+      #{$property}-top: #{$size}px !important;
+    }
+    // bottom
+    .#{$short}b-#{$size} {
+      #{$property}-bottom: #{$size}px !important;
+    }
+    // left
+    .#{$short}l-#{$size} {
+      #{$property}-left: #{$size}px !important;
+    }
+    // right
+    .#{$short}r-#{$size} {
+      #{$property}-right: #{$size}px !important;
+    }
+    // left and right
+    .#{$short}x-#{$size} {
+      #{$property}-left: #{$size}px !important;
+      #{$property}-right: #{$size}px !important;
+    }
+    // top and bottom
+    .#{$short}y-#{$size} {
+      #{$property}-top: #{$size}px !important;
+      #{$property}-bottom: #{$size}px !important;
+    }
+  }
+}
 
 @for $i from 0 through 50 {
-    .font-#{$i} {
-        font-size: #{$i}px ;
-    }
+  .font-#{$i} {
+    font-size: #{$i}px;
+  }
 }
 
 .cursor-pointer {
   cursor: pointer;
-} 
\ No newline at end of file
+}