diff --git a/.stylelintrc.yml b/.stylelintrc.yml
index ac7064647..596b32751 100644
--- a/.stylelintrc.yml
+++ b/.stylelintrc.yml
@@ -51,6 +51,7 @@ rules:
       name: include
       hasBlock: true
     - rules
+  order/properties-alphabetical-order: true
   scss/at-else-closing-brace-space-after: always-intermediate
   scss/at-else-empty-line-before: never
   scss/at-extend-no-missing-placeholder: true
diff --git a/app/assets/stylesheets/admin.scss b/app/assets/stylesheets/admin.scss
index fd61560b3..00df63dec 100644
--- a/app/assets/stylesheets/admin.scss
+++ b/app/assets/stylesheets/admin.scss
@@ -273,8 +273,8 @@ $table-header:   #ecf1f6;
 }
 
 .sortable thead th:hover {
-  text-decoration: underline;
   cursor: pointer;
+  text-decoration: underline;
 }
 
 .no-margin-bottom {
@@ -302,8 +302,8 @@ $table-header:   #ecf1f6;
   }
 
   &::before {
-    content: "\f0d8";
     bottom: 0;
+    content: "\f0d8";
   }
 
   &::after {
@@ -331,8 +331,8 @@ code {
 }
 
 .content-type {
-  white-space: nowrap;
   padding-right: $line-height;
+  white-space: nowrap;
 
   label {
     margin-left: 0 !important;
@@ -402,8 +402,8 @@ code {
 
 .moderation-description {
   max-height: rem-calc(65);
-  overflow: hidden;
   max-width: rem-calc(700);
+  overflow: hidden;
 
   &:hover {
     max-height: rem-calc(1000);
@@ -581,8 +581,8 @@ table {
 }
 
 .markdown-editor .markdown-preview {
-  overflow-y: auto;
   height: 15em;
+  overflow-y: auto;
 }
 
 .markdown-editor textarea {
@@ -590,12 +590,12 @@ table {
 }
 
 .markdown-editor.fullscreen {
-  z-index: 9999;
-  width: 100%;
   height: 100%;
+  left: 0;
   position: fixed;
   top: 0;
-  left: 0;
+  width: 100%;
+  z-index: 9999;
 }
 
 .markdown-editor.fullscreen .markdown-preview {
@@ -698,17 +698,17 @@ table {
   }
 
   a {
-    line-height: 3rem;
     color: $delete;
+    line-height: 3rem;
 
     span {
       text-decoration: underline;
     }
 
     .icon-x {
-      vertical-align: sub;
-      text-decoration: none;
       line-height: 0;
+      text-decoration: none;
+      vertical-align: sub;
     }
 
     &:active,
@@ -746,8 +746,8 @@ table {
     }
 
     .markdown-editor-header {
-      vertical-align: top;
       display: inline-block;
+      vertical-align: top;
 
       @include breakpoint(medium) {
         line-height: 3rem;
@@ -756,10 +756,10 @@ table {
 
     .truncate {
       @include breakpoint(medium) {
-        width: 40vw;
-        white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
+        white-space: nowrap;
+        width: 40vw;
       }
     }
 
@@ -775,10 +775,10 @@ table {
 
     input {
       font-size: $small-font-size;
-      padding: 0.5em 1em;
-      margin-left: 0;
       margin-bottom: 0;
+      margin-left: 0;
       margin-top: 1rem;
+      padding: 0.5em 1em;
 
       @include breakpoint(medium) {
         margin: 0.5rem;
@@ -804,21 +804,21 @@ table {
     margin-bottom: 1rem;
 
     small {
+      color: $text-medium;
       display: block;
       margin-top: -1rem;
-      color: $text-medium;
 
       @include breakpoint(medium) {
-        margin-left: 0.25rem;
         display: inline-block;
+        margin-left: 0.25rem;
         margin-top: 0;
       }
     }
   }
 
   .fullscreen-container {
-    text-align: center;
     background: #ccdbe6;
+    text-align: center;
 
     .markdown-editor-header,
     .markdown-editor-buttons {
@@ -826,21 +826,21 @@ table {
     }
 
     span {
-      text-decoration: none;
       font-size: $small-font-size;
+      text-decoration: none;
     }
 
     .icon-expand {
-      margin-left: 0.25rem;
-      vertical-align: sub;
-      text-decoration: none;
       line-height: 0;
+      margin-left: 0.25rem;
+      text-decoration: none;
+      vertical-align: sub;
     }
   }
 
   .markdown-preview {
-    font-family: $font-family-serif;
     border: 1px solid #cacaca;
+    font-family: $font-family-serif;
     margin-bottom: 2rem;
 
     h1,
@@ -873,10 +873,10 @@ table {
     }
 
     .fullscreen-container {
-      text-align: left;
       background: $admin-color;
-      padding: 0.5rem 1rem;
       margin-bottom: 0;
+      padding: 0.5rem 1rem;
+      text-align: left;
     }
 
     .legislation-draft-version-body {
@@ -893,8 +893,8 @@ table {
     }
 
     .markdown-preview {
-      padding: 1rem;
       border: 0;
+      padding: 1rem;
 
       @include breakpoint(medium) {
         padding: 1rem 2rem;
@@ -907,38 +907,38 @@ table {
 // --------------
 
 .map {
-  width: 100%;
   height: 350px;
+  width: 100%;
 
   .map-marker {
-    visibility: visible;
-    position: absolute;
     left: 50%;
-    top: 50%;
     margin-top: -5px;
+    position: absolute;
+    top: 50%;
+    visibility: visible;
 
     .map-icon {
-      width: 30px;
-      height: 30px;
-      border-radius: 50% 50% 50% 0;
       background: #00cae9;
+      border-radius: 50% 50% 50% 0;
+      height: 30px;
       transform: rotate(-45deg);
+      width: 30px;
     }
 
     .map-icon::after {
+      background: #fff;
+      border-radius: 50%;
       content: "";
-      width: 14px;
       height: 14px;
       margin: 8px 0 0 8px;
-      background: #fff;
       position: absolute;
-      border-radius: 50%;
+      width: 14px;
     }
   }
 
   .map-attributtion {
-    visibility: visible;
     height: auto;
+    visibility: visible;
   }
 }
 
@@ -947,8 +947,8 @@ table {
 }
 
 .map-attributtion {
-  visibility: hidden;
   height: 0;
+  visibility: hidden;
 }
 
 // 10. Budgets
@@ -965,8 +965,8 @@ table {
 .advanced-filters-content {
   background: $highlight;
   clear: both;
-  padding: calc(#{$line-height} / 2);
   margin: $line-height 0;
+  padding: calc(#{$line-height} / 2);
 
   .filter {
     display: inline-block;
@@ -1004,9 +1004,9 @@ table {
 
 .columns-selector-wrapper {
   background: $light-gray;
-  padding: 2rem;
   border-radius: 10px;
   margin-bottom: 1rem;
+  padding: 2rem;
 
   .column-selector-item {
     display: inline-block;
diff --git a/app/assets/stylesheets/admin/budgets/heading_mode.scss b/app/assets/stylesheets/admin/budgets/heading_mode.scss
index 7ce8885b5..cddd75e1d 100644
--- a/app/assets/stylesheets/admin/budgets/heading_mode.scss
+++ b/app/assets/stylesheets/admin/budgets/heading_mode.scss
@@ -54,9 +54,9 @@
   }
 
   p {
+    flex-grow: 1;
     font-size: $small-font-size;
     font-style: italic;
-    flex-grow: 1;
   }
 
   a {
diff --git a/app/assets/stylesheets/admin/dashboard/index.scss b/app/assets/stylesheets/admin/dashboard/index.scss
index 772392b94..ffc6df094 100644
--- a/app/assets/stylesheets/admin/dashboard/index.scss
+++ b/app/assets/stylesheets/admin/dashboard/index.scss
@@ -1,7 +1,7 @@
 .admin-dashboard-index {
   > header h2 {
-    text-transform: uppercase;
     border-bottom: 1px solid $border;
+    text-transform: uppercase;
   }
 
   address {
diff --git a/app/assets/stylesheets/admin/menu.scss b/app/assets/stylesheets/admin/menu.scss
index 1993ff53a..4228ea197 100644
--- a/app/assets/stylesheets/admin/menu.scss
+++ b/app/assets/stylesheets/admin/menu.scss
@@ -6,8 +6,8 @@
   ul {
     list-style-type: none;
     margin-bottom: 0;
-    margin-#{$global-left}: 0;
     padding: 0;
+    margin-#{$global-left}: 0;
   }
 
   > ul > li > :first-child {
@@ -113,8 +113,8 @@
 
   li {
     ul {
-      margin-left: calc(#{$line-height * 2} / 3);
       border-left: 1px solid $sidebar-hover;
+      margin-left: calc(#{$line-height * 2} / 3);
       padding-left: calc(#{$line-height} / 2);
     }
 
diff --git a/app/assets/stylesheets/admin/search.scss b/app/assets/stylesheets/admin/search.scss
index 82a27fca2..019eee072 100644
--- a/app/assets/stylesheets/admin/search.scss
+++ b/app/assets/stylesheets/admin/search.scss
@@ -25,8 +25,8 @@
 
     input:not([type="button"], [type="checkbox"], [type="file"], [type="radio"], [type="submit"]) {
       border-bottom-right-radius: 0;
-      border-top-right-radius: 0;
       border-right: 0;
+      border-top-right-radius: 0;
     }
   }
 
diff --git a/app/assets/stylesheets/annotator_overrides.scss b/app/assets/stylesheets/annotator_overrides.scss
index 59c8a54f9..bea860fd8 100644
--- a/app/assets/stylesheets/annotator_overrides.scss
+++ b/app/assets/stylesheets/annotator_overrides.scss
@@ -7,8 +7,8 @@
 }
 
 .annotator-hl {
-  cursor: pointer;
   background: rgba(255, 249, 218, 0.75);
+  cursor: pointer;
 
   &.weight-1 {
     background: hsla(50, 100%, 93%, 0.5);
diff --git a/app/assets/stylesheets/autocomplete_overrides.scss b/app/assets/stylesheets/autocomplete_overrides.scss
index 7021c2dab..5e0c8d63d 100644
--- a/app/assets/stylesheets/autocomplete_overrides.scss
+++ b/app/assets/stylesheets/autocomplete_overrides.scss
@@ -4,19 +4,19 @@
 /* Autocomplete
 ----------------------------------*/
 .ui-autocomplete {
-  position: absolute;
   cursor: default;
+  position: absolute;
 }
 
 /* Menu
 ----------------------------------*/
 .ui-menu {
-  list-style: none;
-  padding: calc(#{$line-height} / 4) calc(#{$line-height} / 3);
-  display: block;
   background: $body-background;
   border: 1px solid $border;
+  display: block;
   font-size: $small-font-size;
+  list-style: none;
+  padding: calc(#{$line-height} / 4) calc(#{$line-height} / 3);
 
   .ui-menu-item {
 
diff --git a/app/assets/stylesheets/budgets/investments-list.scss b/app/assets/stylesheets/budgets/investments-list.scss
index 9bd83084b..8fc24d75b 100644
--- a/app/assets/stylesheets/budgets/investments-list.scss
+++ b/app/assets/stylesheets/budgets/investments-list.scss
@@ -14,8 +14,8 @@
     border-radius: rem-calc(6);
     display: flex;
     flex-direction: column;
-    padding: 0;
     margin-bottom: calc(#{$line-height} / 2);
+    padding: 0;
     position: relative;
     width: 100%;
 
@@ -39,8 +39,8 @@
       display: flex;
       flex: 1;
       flex-direction: column;
-      padding: 0 rem-calc(12) rem-calc(6);
       min-height: $line-height * 8;
+      padding: 0 rem-calc(12) rem-calc(6);
 
       .investment-project-info {
         flex: 1;
diff --git a/app/assets/stylesheets/community.scss b/app/assets/stylesheets/community.scss
index 41e40994d..0986902a2 100644
--- a/app/assets/stylesheets/community.scss
+++ b/app/assets/stylesheets/community.scss
@@ -5,8 +5,8 @@
   }
 
   .panel {
-    min-height: auto;
     margin: 0.375rem 0;
+    min-height: auto;
 
     .button {
       margin-top: $line-height;
@@ -19,8 +19,8 @@
   .comment-body {
     display: inline-block;
     float: left;
-    margin-right: $line-height;
     margin-bottom: $line-height;
+    margin-right: $line-height;
   }
 }
 
@@ -34,8 +34,8 @@
   .comments {
 
     .first-comment {
-      margin-top: $line-height;
       margin-bottom: $line-height;
+      margin-top: $line-height;
     }
   }
 }
diff --git a/app/assets/stylesheets/dashboard.scss b/app/assets/stylesheets/dashboard.scss
index d4d6afdfb..a9755e38e 100644
--- a/app/assets/stylesheets/dashboard.scss
+++ b/app/assets/stylesheets/dashboard.scss
@@ -202,9 +202,9 @@
   }
 
   .label {
+    left: 0;
     position: absolute;
     top: 20px;
-    left: 0;
   }
 
   h4 {
@@ -531,16 +531,16 @@
 
     .overflow-image {
       background-position: center;
-      background-size: cover;
       background-repeat: no-repeat;
+      background-size: cover;
       overflow: hidden;
       position: relative;
     }
   }
 
   .poster-content {
-    max-width: 90%;
     margin: 0 auto;
+    max-width: 90%;
 
     h2 {
       color: $text-medium;
diff --git a/app/assets/stylesheets/datepicker_overrides.scss b/app/assets/stylesheets/datepicker_overrides.scss
index 95a02db91..87ce9c46a 100644
--- a/app/assets/stylesheets/datepicker_overrides.scss
+++ b/app/assets/stylesheets/datepicker_overrides.scss
@@ -73,8 +73,8 @@
   }
 
   td {
-    padding: 0;
     border-right: 1px solid $border;
+    padding: 0;
 
     &:last-child {
       border-right: 0;
@@ -82,9 +82,9 @@
 
     span,
     a {
-      text-align: center;
-      line-height: $line-height;
       color: inherit;
+      line-height: $line-height;
+      text-align: center;
     }
   }
 }
diff --git a/app/assets/stylesheets/icons.scss b/app/assets/stylesheets/icons.scss
index 5ffbf919d..f2438da49 100644
--- a/app/assets/stylesheets/icons.scss
+++ b/app/assets/stylesheets/icons.scss
@@ -2,13 +2,13 @@
 
 @font-face {
   font-family: "icons";
+  font-style: normal;
+  font-weight: normal;
   src: font-url("icons.eot");
   src: font-url("icons.eot?#iefix") format("embedded-opentype"),
     font-url("icons.woff") format("woff"),
     font-url("icons.ttf") format("truetype"),
     font-url("icons.svg#icons") format("svg");
-  font-weight: normal;
-  font-style: normal;
 }
 
 [data-icon]::before,
@@ -284,31 +284,31 @@
 }
 
 .icon-quote-before::before {
-  content: "";
-  background-size: cover;
-  display: block;
-  width: 60px;
-  height: 60px;
   background-image: url("quote_before_blue.png");
   background-repeat: no-repeat;
+  background-size: cover;
+  content: "";
+  display: block;
+  height: 60px;
+  width: 60px;
 }
 
 .icon-quote-after::before {
-  content: "";
-  background-size: cover;
-  display: block;
-  width: 60px;
-  height: 60px;
   background-image: url("quote_after_blue.png");
   background-repeat: no-repeat;
+  background-size: cover;
+  content: "";
+  display: block;
+  height: 60px;
+  width: 60px;
 }
 
 .icon-finger::before {
-  content: "";
-  background-size: cover;
-  display: inline-block;
-  width: 50px;
-  height: 50px;
   background-image: url("finger.png");
   background-repeat: no-repeat;
+  background-size: cover;
+  content: "";
+  display: inline-block;
+  height: 50px;
+  width: 50px;
 }
diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss
index ea8387908..e217246ce 100644
--- a/app/assets/stylesheets/layout.scss
+++ b/app/assets/stylesheets/layout.scss
@@ -432,8 +432,8 @@ button,
 
     > nav {
       flex: 20%;
-      min-width: $side-menu-min-width;
       max-width: max-content;
+      min-width: $side-menu-min-width;
 
       + * {
         flex: 80%;
@@ -1092,8 +1092,8 @@ form {
   color: rgba(0, 0, 0, 0.4);
   display: inline-block;
   font-size: rem-calc(32);
-  line-height: rem-calc(32);
   height: rem-calc(32);
+  line-height: rem-calc(32);
   vertical-align: top;
 }
 
@@ -1173,8 +1173,8 @@ form {
   }
 
   .time {
-    font-size: $small-font-size;
     color: $text-medium;
+    font-size: $small-font-size;
   }
 }
 
@@ -1448,8 +1448,8 @@ table {
   padding-bottom: $line-height * 4;
 
   h2 {
-    margin: 0;
     font-weight: bold;
+    margin: 0;
 
     span {
       font-size: rem-calc(18);
@@ -1556,8 +1556,8 @@ table {
 
   .comment-user {
     margin-top: calc(#{$line-height} / 4);
-    padding: calc(#{$line-height} / 4) 0;
     overflow: hidden;
+    padding: calc(#{$line-height} / 4) 0;
 
     &.level-1,
     &.level-2,
@@ -1839,9 +1839,9 @@ table {
     }
 
     h4 {
-      margin-top: 0;
-      margin-bottom: $line-height;
       font-size: rem-calc(18);
+      margin-bottom: $line-height;
+      margin-top: 0;
       min-height: 0;
     }
 
@@ -1874,9 +1874,9 @@ table {
     .proposals-inner,
     .budget-investments-inner {
       border: 1px solid $border;
-      padding: $line-height;
       margin-right: $line-height;
       max-height: rem-calc(500);
+      padding: $line-height;
 
       @include breakpoint(small) {
         max-height: rem-calc(600);
@@ -2076,9 +2076,9 @@ table {
   }
 
   .background-header {
+    background: $highlight;
     clip-path: ellipse(60% 80% at 50% 0%);
     height: $line-height * 2;
-    background: $highlight;
     margin-top: rem-calc(-48);
 
     @include breakpoint($global-width) {
@@ -2201,9 +2201,9 @@ table {
     color: #fff;
     font-size: rem-calc(24);
     line-height: rem-calc(24);
-    text-transform: uppercase;
     padding: calc(#{$line-height} / 4) calc(#{$line-height} / 2);
     position: absolute;
+    text-transform: uppercase;
     width: 100%;
     z-index: 3;
 
@@ -2241,8 +2241,8 @@ table {
   .date-of-birth {
     select {
       float: left;
-      width: 30%;
       margin-right: calc(#{$line-height} / 4);
+      width: 30%;
     }
   }
 }
diff --git a/app/assets/stylesheets/layout/admin_header.scss b/app/assets/stylesheets/layout/admin_header.scss
index 8c6753985..68291008d 100644
--- a/app/assets/stylesheets/layout/admin_header.scss
+++ b/app/assets/stylesheets/layout/admin_header.scss
@@ -19,8 +19,8 @@
 
       .account-menu {
         border-bottom: 0;
-        padding-bottom: 0;
         margin-bottom: 0;
+        padding-bottom: 0;
 
         a {
           font-weight: normal;
diff --git a/app/assets/stylesheets/layout/remote_translations_button.scss b/app/assets/stylesheets/layout/remote_translations_button.scss
index 5e796f274..62889cd69 100644
--- a/app/assets/stylesheets/layout/remote_translations_button.scss
+++ b/app/assets/stylesheets/layout/remote_translations_button.scss
@@ -1,8 +1,8 @@
 .remote-translations-button {
   @include info-colors;
   font-size: $small-font-size;
-  text-align: center;
   padding: rem-calc(6);
+  text-align: center;
 
   [type="submit"] {
     @include link;
diff --git a/app/assets/stylesheets/legislation.scss b/app/assets/stylesheets/legislation.scss
index ca79067a0..9a83db4db 100644
--- a/app/assets/stylesheets/legislation.scss
+++ b/app/assets/stylesheets/legislation.scss
@@ -1,9 +1,9 @@
 .legislation {
-  margin: 0 0 $line-height;
   border: 1px solid;
   border-color: #e5e6e9 #dfe0e4 #d0d1d5;
   border-radius: 0;
   box-shadow: 0 1px 3px 0 #dee0e3;
+  margin: 0 0 $line-height;
   min-height: 12rem;
   padding: 2rem 0 0;
 }
@@ -23,8 +23,8 @@
 }
 
 .legislation-calendar-info p {
-  font-size: $small-font-size;
   color: $text-medium;
+  font-size: $small-font-size;
   margin-bottom: 0;
 }
 
@@ -33,10 +33,10 @@
   padding-top: 1rem;
 
   h4 {
-    font-size: rem-calc(16);
-    margin-left: 0.25rem;
-    margin-bottom: 0;
     color: #61686e;
+    font-size: rem-calc(16);
+    margin-bottom: 0;
+    margin-left: 0.25rem;
 
     @include breakpoint(medium) {
       margin-left: 0;
@@ -44,8 +44,8 @@
   }
 
   p {
-    margin-left: 0.25rem;
     font-size: $small-font-size;
+    margin-left: 0.25rem;
 
     @include breakpoint(medium) {
       margin-left: 0;
diff --git a/app/assets/stylesheets/legislation_process.scss b/app/assets/stylesheets/legislation_process.scss
index e0578ce1b..1c0c6743a 100644
--- a/app/assets/stylesheets/legislation_process.scss
+++ b/app/assets/stylesheets/legislation_process.scss
@@ -65,10 +65,10 @@
 
     @include breakpoint(large) {
       background: #fafafa;
-      display: inline-block;
       border-bottom: 0;
       border-top-left-radius: rem-calc(6);
       border-top-right-radius: rem-calc(6);
+      display: inline-block;
       margin-bottom: 0;
       margin-right: calc(#{$line-height} / 4);
       margin-top: 0;
@@ -135,9 +135,9 @@
 
     .debate-type {
       @include brand-color;
-      text-transform: uppercase;
-      font-weight: 700;
       font-size: $small-font-size;
+      font-weight: 700;
+      text-transform: uppercase;
 
       .icon-debates {
         margin-left: rem-calc(3);
@@ -151,13 +151,13 @@
 
   .debate-meta,
   .debate-meta a {
-    font-size: $small-font-size;
     color: #6d6d6d;
+    font-size: $small-font-size;
   }
 
   .debate-info {
-    padding: rem-calc(16);
     background: #f4f4f4;
+    padding: rem-calc(16);
   }
 }
 
@@ -235,8 +235,8 @@
   }
 
   .debate-questions {
-    position: relative;
     list-style: none;
+    position: relative;
 
     .control {
       background: #fff;
@@ -257,8 +257,8 @@
     }
 
     .control input {
-      position: absolute;
       opacity: 0;
+      position: absolute;
       z-index: -1;
     }
 
@@ -272,18 +272,18 @@
     }
 
     .control-indicator {
-      position: absolute;
-      top: 15px;
-      left: 15px;
-      display: block;
-      width: rem-calc(16);
-      height: rem-calc(16);
-      line-height: rem-calc(16);
-      font-size: 65%;
-      text-align: center;
       border: 2px solid #9c9c9c;
+      display: block;
+      font-size: 65%;
+      height: rem-calc(16);
+      left: 15px;
+      line-height: rem-calc(16);
       pointer-events: none;
+      position: absolute;
+      text-align: center;
+      top: 15px;
       user-select: none;
+      width: rem-calc(16);
     }
   }
 }
@@ -292,25 +292,25 @@
 // ---------------------------
 
 .draft-panels {
-  position: relative;
   padding: rem-calc(32) 0;
+  position: relative;
 
   .draft-chooser {
 
     h3 {
-      vertical-align: top;
       display: inline-block;
       font-weight: 400;
       margin-right: rem-calc(8);
+      vertical-align: top;
     }
 
     span {
-      margin-left: rem-calc(4);
-      font-style: italic;
-      font-size: $small-font-size;
       color: $text-medium;
-      vertical-align: top;
+      font-size: $small-font-size;
+      font-style: italic;
       line-height: rem-calc(37);
+      margin-left: rem-calc(4);
+      vertical-align: top;
     }
 
     .select-box {
@@ -321,13 +321,13 @@
       }
 
       select {
-        margin-bottom: 0;
         display: block;
+        margin-bottom: 0;
       }
 
       span {
-        vertical-align: inherit;
         font-style: normal;
+        vertical-align: inherit;
       }
 
       .see-changes {
@@ -394,20 +394,20 @@
     }
 
     .draft-panel {
-      text-transform: uppercase;
+      background: #f2f2f2;
+      color: #696969;
+      font-size: $small-font-size;
       font-weight: 700;
       padding: rem-calc(8) rem-calc(16);
-      color: #696969;
-      background: #f2f2f2;
-      font-size: $small-font-size;
+      text-transform: uppercase;
 
       .icon-comments {
         margin-right: rem-calc(4);
       }
 
       .icon-banner {
-        line-height: 0;
         color: $text-medium;
+        line-height: 0;
         vertical-align: sub;
       }
     }
@@ -415,9 +415,9 @@
     .draft-index {
       ul:first-child {
         font-size: rem-calc(16);
-        text-decoration: underline;
         margin-left: rem-calc(36);
         margin-top: $line-height;
+        text-decoration: underline;
       }
 
       ul {
@@ -428,30 +428,30 @@
         }
 
         .open::before {
-          cursor: pointer;
-          position: absolute;
-          margin-left: rem-calc(-20);
-          font-family: "icons";
           content: "\58";
+          cursor: pointer;
+          font-family: "icons";
           -webkit-font-smoothing: antialiased;
           -moz-osx-font-smoothing: grayscale;
+          margin-left: rem-calc(-20);
+          position: absolute;
         }
 
         .closed::before {
-          cursor: pointer;
-          position: absolute;
-          margin-left: rem-calc(-20);
-          font-family: "icons";
           content: "\5a";
+          cursor: pointer;
+          font-family: "icons";
           -webkit-font-smoothing: antialiased;
           -moz-osx-font-smoothing: grayscale;
+          margin-left: rem-calc(-20);
+          position: absolute;
         }
       }
     }
 
     .draft-text {
-      position: relative;
       padding: rem-calc(16);
+      position: relative;
 
       @include breakpoint(medium) {
         margin: 0 auto;
@@ -475,11 +475,11 @@
       }
 
       .anchor::before {
-        display: none;
-        content: "#";
         color: $text-medium;
-        position: absolute;
+        content: "#";
+        display: none;
         left: 0;
+        position: absolute;
 
         @include breakpoint(medium) {
           left: 24px;
@@ -530,14 +530,14 @@
         width: rem-calc(50);
 
         .draft-panel {
-          line-height: 1;
+          color: #696969;
           display: block;
           font-size: $small-font-size;
-          text-transform: uppercase;
           font-weight: 700;
-          color: #696969;
+          line-height: 1;
           padding: 0;
           text-align: center;
+          text-transform: uppercase;
 
           .icon-banner::before,
           .icon-comments::before {
@@ -547,8 +547,8 @@
 
           .panel-title {
             display: block;
-            transform: rotate(-90deg);
             filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
+            transform: rotate(-90deg);
           }
         }
       }
@@ -558,11 +558,11 @@
       border-right: 0;
 
       .show-comments {
-        width: 105%;
         background: #fafafa;
-        padding: rem-calc(4) rem-calc(40) rem-calc(4) rem-calc(4);
         border: 1px solid $border;
         margin-bottom: rem-calc(16);
+        padding: rem-calc(4) rem-calc(40) rem-calc(4) rem-calc(4);
+        width: 105%;
 
         p {
           margin-bottom: 0;
@@ -590,11 +590,11 @@
       }
 
       .comment-box {
-        padding: rem-calc(4);
         background: #f9f9f9;
         border: 1px solid $border;
         display: block;
         margin-bottom: rem-calc(32);
+        padding: rem-calc(4);
 
         .button {
           font-size: $small-font-size;
@@ -606,14 +606,14 @@
         }
 
         .comment-header {
-          padding-bottom: rem-calc(8);
-          margin-bottom: rem-calc(16);
           border-bottom: 1px solid $border;
+          margin-bottom: rem-calc(16);
+          padding-bottom: rem-calc(8);
 
           a .icon-expand {
             color: #838383;
-            font-size: $small-font-size;
             float: right;
+            font-size: $small-font-size;
           }
         }
 
@@ -622,20 +622,20 @@
         }
 
         .comment-input {
-          padding-bottom: rem-calc(64);
+          border-bottom: 1px solid $border;
           margin-bottom: rem-calc(16);
           margin-top: rem-calc(16);
-          border-bottom: 1px solid $border;
+          padding-bottom: rem-calc(64);
 
           .comment-advice {
-            border-top: 1px solid #d0d0d0;
-            border-right: 1px solid #d0d0d0;
+            background: #dfdfdf;
             border-left: 1px solid #d0d0d0;
-            width: 100%;
-            padding: rem-calc(8);
+            border-right: 1px solid #d0d0d0;
+            border-top: 1px solid #d0d0d0;
             display: inline-block;
             font-size: $small-font-size;
-            background: #dfdfdf;
+            padding: rem-calc(8);
+            width: 100%;
 
             .icon-proposals {
               color: #838383;
@@ -648,38 +648,38 @@
           }
 
           textarea {
-            border-radius: 0;
-            box-shadow: none;
             border-bottom: 1px solid #d0d0d0;
-            border-right: 1px solid #d0d0d0;
             border-left: 1px solid #d0d0d0;
-            width: 100%;
+            border-radius: 0;
+            border-right: 1px solid #d0d0d0;
+            box-shadow: none;
             height: rem-calc(200);
             margin-bottom: rem-calc(8);
+            width: 100%;
           }
 
           .comment-actions {
             .cancel-comment {
               color: #87a3b9;
-              text-decoration: underline;
-              font-size: $small-font-size;
               display: inline-block;
+              font-size: $small-font-size;
+              text-decoration: underline;
             }
           }
         }
 
         .comment {
           border-bottom: 1px solid $border;
-          padding-bottom: calc(#{$line-height} / 2);
-          margin-bottom: rem-calc(16);
           font-size: $small-font-size;
+          margin-bottom: rem-calc(16);
+          padding-bottom: calc(#{$line-height} / 2);
 
           .comment-text {
             margin-bottom: rem-calc(8);
 
             p {
-              line-height: 1.5;
               font-size: $small-font-size;
+              line-height: 1.5;
 
               &:last-child {
                 margin-bottom: rem-calc(8);
@@ -696,8 +696,8 @@
                 display: inline-block;
 
                 &::after {
-                  content: "|";
                   color: #838383;
+                  content: "|";
                 }
               }
 
@@ -708,16 +708,16 @@
 
             .comment-votes {
               color: #838383;
-              float: right;
               display: inline-block;
+              float: right;
 
               .comment-votes-number {
-                margin-right: rem-calc(4);
                 display: inline-block;
+                margin-right: rem-calc(4);
 
                 &::after {
-                  margin-left: rem-calc(4);
                   content: "|";
+                  margin-left: rem-calc(4);
                 }
               }
             }
@@ -741,16 +741,16 @@
       margin-bottom: rem-calc(16);
 
       &::before {
-        margin-right: rem-calc(4);
         content: "—";
+        margin-right: rem-calc(4);
       }
     }
   }
 
   .changes-link {
     display: block;
-    margin-left: rem-calc(16);
     font-size: $small-font-size;
+    margin-left: rem-calc(16);
 
     @include breakpoint(medium) {
       display: inline-block;
@@ -763,11 +763,11 @@
       }
 
       .icon-external {
-        text-decoration: none;
         color: #999;
         line-height: 0;
-        vertical-align: sub;
         margin-left: rem-calc(8);
+        text-decoration: none;
+        vertical-align: sub;
       }
 
       &:active,
@@ -786,10 +786,10 @@
 
   .comment-section {
     background: #fafafa;
-    padding: rem-calc(16);
     border: 1px solid #dee0e3;
-    margin-top: rem-calc(4);
     margin-bottom: rem-calc(16);
+    margin-top: rem-calc(4);
+    padding: rem-calc(16);
   }
 
   .comment {
@@ -801,9 +801,9 @@
       }
 
       .icon-expand {
-        text-decoration: none;
         color: #999;
         line-height: 0;
+        text-decoration: none;
       }
 
       .icon-expand {
@@ -830,10 +830,10 @@
 
   .comment-section {
     background: #fafafa;
-    padding: rem-calc(16);
     border: 1px solid #dee0e3;
-    margin-top: rem-calc(4);
     margin-bottom: rem-calc(16);
+    margin-top: rem-calc(4);
+    padding: rem-calc(16);
   }
 
   .comment {
@@ -845,9 +845,9 @@
 
       .icon-expand,
       .icon-comments {
-        text-decoration: none;
         color: #999;
         line-height: 0;
+        text-decoration: none;
       }
 
       .icon-expand {
diff --git a/app/assets/stylesheets/mixins/buttons.scss b/app/assets/stylesheets/mixins/buttons.scss
index 1674e8705..ee09362ac 100644
--- a/app/assets/stylesheets/mixins/buttons.scss
+++ b/app/assets/stylesheets/mixins/buttons.scss
@@ -95,8 +95,8 @@
     display: block;
     height: 1.75em;
     position: absolute;
-    transform: translateY(-50%);
     top: 50%;
+    transform: translateY(-50%);
     width: 1.75em;
   }
 
diff --git a/app/assets/stylesheets/mixins/forms.scss b/app/assets/stylesheets/mixins/forms.scss
index 66c898cd7..0476efe8d 100644
--- a/app/assets/stylesheets/mixins/forms.scss
+++ b/app/assets/stylesheets/mixins/forms.scss
@@ -47,20 +47,20 @@
 
       &::after {
         background: $body-background;
-        content: "";
         clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% calc(100% + 1px), 0 50%);
+        content: "";
         display: block;
+        height: 100%;
         position: absolute;
         right: calc(#{$icon-size-with-padding} - #{$rounding-error});
         top: 0;
-        height: 100%;
         width: $polygon-size;
       }
     }
 
     &::before {
-      top: -$border-width;
       height: calc(100% + #{$border-width * 2});
+      top: -$border-width;
     }
 
     h1 {
diff --git a/app/assets/stylesheets/mixins/layouts.scss b/app/assets/stylesheets/mixins/layouts.scss
index 65bba3a88..d33fc6e3d 100644
--- a/app/assets/stylesheets/mixins/layouts.scss
+++ b/app/assets/stylesheets/mixins/layouts.scss
@@ -100,8 +100,8 @@
     content: "";
     height: 100%;
     position: absolute;
-    top: 0;
     right: 100%;
+    top: 0;
     width: 100vw;
   }
 }
diff --git a/app/assets/stylesheets/mixins/orbit_bullets.scss b/app/assets/stylesheets/mixins/orbit_bullets.scss
index 0fd68f1d1..b16d03ddc 100644
--- a/app/assets/stylesheets/mixins/orbit_bullets.scss
+++ b/app/assets/stylesheets/mixins/orbit_bullets.scss
@@ -1,17 +1,17 @@
 @mixin orbit-bullets {
   @include disable-mouse-outline;
-  position: relative;
-  margin-top: $orbit-bullet-margin-top;
   margin-bottom: $orbit-bullet-margin-bottom;
+  margin-top: $orbit-bullet-margin-top;
+  position: relative;
   text-align: center;
 
   button {
-    width: $orbit-bullet-diameter;
-    height: $orbit-bullet-diameter;
-    margin: $orbit-bullet-margin;
+    background-color: $orbit-bullet-background;
 
     border-radius: 50%;
-    background-color: $orbit-bullet-background;
+    height: $orbit-bullet-diameter;
+    margin: $orbit-bullet-margin;
+    width: $orbit-bullet-diameter;
 
     &:hover {
       background-color: $orbit-bullet-background-active;
diff --git a/app/assets/stylesheets/mixins/uploads.scss b/app/assets/stylesheets/mixins/uploads.scss
index 7374f1266..b6f814214 100644
--- a/app/assets/stylesheets/mixins/uploads.scss
+++ b/app/assets/stylesheets/mixins/uploads.scss
@@ -1,8 +1,8 @@
 @mixin direct-uploads {
 
   .cached-image {
-    max-width: rem-calc(150);
     max-height: rem-calc(150);
+    max-width: rem-calc(150);
   }
 
   .progress-bar-placeholder {
@@ -39,13 +39,13 @@
   }
 
   .progress-bar {
-    width: 100%;
     background-color: $light-gray;
+    width: 100%;
   }
 
   .file-name {
-    padding-left: 0;
     margin-top: 0;
+    padding-left: 0;
 
     &:empty {
       display: none;
@@ -59,8 +59,8 @@
 
   .loading-bar {
     height: 5px;
-    width: 0;
     transition: width 500ms ease-out;
+    width: 0;
 
     &.uploading {
       background-color: $dark-gray;
diff --git a/app/assets/stylesheets/notification_item.scss b/app/assets/stylesheets/notification_item.scss
index c0a5b44e2..74ea4cc1d 100644
--- a/app/assets/stylesheets/notification_item.scss
+++ b/app/assets/stylesheets/notification_item.scss
@@ -18,8 +18,8 @@
 
       color: #ecf00b;
       font-size: $circle-icon-size;
-      position: absolute;
       left: $notification-icon-size - rem-calc(5);
+      position: absolute;
       top: calc(#{$menu-link-top-padding} - #{$circle-icon-size} / 2);
 
       @include breakpoint(medium) {
diff --git a/app/assets/stylesheets/participation.scss b/app/assets/stylesheets/participation.scss
index a93f32562..2952d7ca2 100644
--- a/app/assets/stylesheets/participation.scss
+++ b/app/assets/stylesheets/participation.scss
@@ -268,10 +268,10 @@
   blockquote {
     clear: both;
     color: #4c4c4c;
-    margin-top: rem-calc(12);
-    padding-top: 0;
     font-size: rem-calc(15);
     line-height: rem-calc(30);
+    margin-top: rem-calc(12);
+    padding-top: 0;
   }
 
   .video-link {
@@ -612,8 +612,8 @@
     }
 
     .total-votes {
-      font-weight: bold;
       float: right;
+      font-weight: bold;
       line-height: $line-height * 2;
 
       @include breakpoint(medium) {
@@ -691,8 +691,8 @@
 .budget-investment-show {
 
   figure {
-    margin: rem-calc(10) 0 0;
     display: inline-block;
+    margin: rem-calc(10) 0 0;
 
     figcaption {
       font-size: $small-font-size;
@@ -752,8 +752,8 @@
   @include full-width-background;
   @include full-width-border(bottom, 1px solid #eee);
   background: #fafafa;
-  margin-top: -$line-height;
   margin-bottom: $line-height;
+  margin-top: -$line-height;
   padding-bottom: calc(#{$line-height} / 2);
   padding-top: $line-height;
 
@@ -959,10 +959,10 @@
     .supported {
       background: none;
       border: 0;
+      font-size: $small-font-size;
       margin-bottom: 0;
       margin-top: 0;
       padding: 0;
-      font-size: $small-font-size;
     }
   }
 
@@ -1010,9 +1010,9 @@
     &::after {
       border-bottom: 2px solid #fff;
       content: "";
+      display: block;
       margin: 0 auto;
       padding-top: calc(#{$line-height} / 2);
-      display: block;
       width: 20%;
     }
   }
@@ -1300,8 +1300,8 @@
 
     img {
       height: $line-height * 9;
-      min-width: 100%;
       max-width: none;
+      min-width: 100%;
       transition-duration: 0.3s;
       transition-property: transform;
     }
@@ -1349,9 +1349,9 @@
 .successful .panel {
 
   .icon-successful {
+    border-bottom: 60px solid transparent;
     border-right: 60px solid #ffd200;
     border-top: 0;
-    border-bottom: 60px solid transparent;
     height: 0;
     position: absolute;
     right: 0;
@@ -1490,18 +1490,18 @@
 .zoom-link {
   @extend %body-colors;
   border-radius: rem-calc(48);
+  cursor: pointer;
   font-size: rem-calc(24);
   font-weight: bold;
   height: rem-calc(48);
   line-height: rem-calc(48);
-  right: 12px;
   padding-top: rem-calc(4);
   position: absolute;
+  right: 12px;
   text-align: center;
   top: 24px;
   width: rem-calc(48);
   z-index: 9;
-  cursor: pointer;
 
   &:hover {
     @include brand-secondary-background;
@@ -1564,8 +1564,8 @@
       &::after {
         background: #92ba48;
         border-radius: rem-calc(20);
-        content: "\6c";
         color: #fff;
+        content: "\6c";
         font-family: "icons" !important;
         font-size: rem-calc(12);
         padding: calc(#{$line-height} / 4);
diff --git a/app/assets/stylesheets/polls/poll.scss b/app/assets/stylesheets/polls/poll.scss
index 2770eb703..4b77b5490 100644
--- a/app/assets/stylesheets/polls/poll.scss
+++ b/app/assets/stylesheets/polls/poll.scss
@@ -13,8 +13,8 @@
   }
 
   .icon-poll-answer {
-    border-top: 0;
     border-bottom: 60px solid transparent;
+    border-top: 0;
     height: 0;
     position: absolute;
     right: 0;
diff --git a/app/assets/stylesheets/sdg/goals/show.scss b/app/assets/stylesheets/sdg/goals/show.scss
index 157842e22..86022f0ff 100644
--- a/app/assets/stylesheets/sdg/goals/show.scss
+++ b/app/assets/stylesheets/sdg/goals/show.scss
@@ -7,8 +7,8 @@
       color: $sdg-text;
       display: flex;
       margin: calc(#{$line-height} / 2) 0;
-      text-shadow: 0 0 1px $black;
       min-width: fit-content;
+      text-shadow: 0 0 1px $black;
 
       &::after {
         align-self: stretch;
diff --git a/app/assets/stylesheets/sdg/related_list_selector.scss b/app/assets/stylesheets/sdg/related_list_selector.scss
index 6cd2ecb98..fb95e36aa 100644
--- a/app/assets/stylesheets/sdg/related_list_selector.scss
+++ b/app/assets/stylesheets/sdg/related_list_selector.scss
@@ -22,8 +22,8 @@
     }
 
     legend {
-      font-weight: normal;
       font-style: italic;
+      font-weight: normal;
     }
   }
 
@@ -44,9 +44,9 @@
   }
 
   .help-text {
-    font-weight: normal;
-    font-style: italic;
     font-size: $base-font-size;
+    font-style: italic;
+    font-weight: normal;
   }
 
   .input-section {
diff --git a/app/assets/stylesheets/shared/advanced_search.scss b/app/assets/stylesheets/shared/advanced_search.scss
index 9412080ff..5c2ec2c05 100644
--- a/app/assets/stylesheets/shared/advanced_search.scss
+++ b/app/assets/stylesheets/shared/advanced_search.scss
@@ -30,8 +30,8 @@
   > [aria-expanded] {
     @include xy-gutters;
     @include link;
-    margin-top: $line-height;
     margin-bottom: $line-height;
+    margin-top: $line-height;
     max-width: max-content;
 
     @include breakpoint(medium) {
diff --git a/app/assets/stylesheets/stats.scss b/app/assets/stylesheets/stats.scss
index 7da97608a..9dff64225 100644
--- a/app/assets/stylesheets/stats.scss
+++ b/app/assets/stylesheets/stats.scss
@@ -23,8 +23,8 @@
   }
 
   .section-title {
-    font-size: rem-calc(24);
     border-bottom: 1px solid $border;
+    font-size: rem-calc(24);
   }
 
   .stats-group {
@@ -134,8 +134,8 @@
     }
 
     th {
-      font-weight: bold;
       font-size: rem-calc(21);
+      font-weight: bold;
 
       &.gender {
         opacity: 0;
@@ -157,8 +157,8 @@
     td {
 
       &.gender {
-        font-weight: bold;
         font-size: rem-calc(21);
+        font-weight: bold;
         text-align: left;
       }
 
diff --git a/app/assets/stylesheets/widgets/feeds/participation.scss b/app/assets/stylesheets/widgets/feeds/participation.scss
index eb9fa75e7..beae40784 100644
--- a/app/assets/stylesheets/widgets/feeds/participation.scss
+++ b/app/assets/stylesheets/widgets/feeds/participation.scss
@@ -15,8 +15,8 @@
   .feed-proposals,
   .feed-debates {
     display: flex;
-    margin-top: $line-height;
     flex-direction: column;
+    margin-top: $line-height;
 
     .feed-content {
       flex-grow: 1;