From b1294596dbc9e3fe2a2148a949acd102eda26898 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Mon, 13 Nov 2023 11:50:43 +0530
Subject: [PATCH] style: Auto format .scss files with prettier

---
 frappe/public/css/fonts/inter/inter.scss      | 127 ++--
 frappe/public/css/octicons/octicons.scss      | 692 +++++++++++++-----
 .../css/octicons/sprockets-octicons.scss      | 688 ++++++++++++-----
 frappe/public/scss/common/alert.scss          |   2 +-
 frappe/public/scss/common/awesomeplete.scss   |  15 +-
 frappe/public/scss/common/buttons.scss        |  20 +-
 frappe/public/scss/common/color_picker.scss   |  18 +-
 frappe/public/scss/common/controls.scss       |  29 +-
 frappe/public/scss/common/css_variables.scss  |  12 +-
 frappe/public/scss/common/datepicker.scss     |  17 +-
 frappe/public/scss/common/flex.scss           |   7 +-
 frappe/public/scss/common/form.scss           |   2 +-
 frappe/public/scss/common/global.scss         |  10 +-
 frappe/public/scss/common/grid.scss           |  32 +-
 frappe/public/scss/common/icon_picker.scss    |  15 +-
 frappe/public/scss/common/icons.scss          |   2 +-
 frappe/public/scss/common/indicator.scss      |  14 +-
 frappe/public/scss/common/mixins.scss         |  11 +-
 frappe/public/scss/common/modal.scss          |  10 +-
 frappe/public/scss/common/phone_picker.scss   |  29 +-
 frappe/public/scss/common/quill.scss          |  46 +-
 frappe/public/scss/desk.bundle.scss           |   2 +-
 frappe/public/scss/desk/avatar.scss           |   1 -
 frappe/public/scss/desk/calendar.scss         |   9 +-
 frappe/public/scss/desk/css_variables.scss    |  17 +-
 frappe/public/scss/desk/dark.scss             |  20 +-
 frappe/public/scss/desk/dashboard_view.scss   |  53 +-
 frappe/public/scss/desk/desktop.scss          |  73 +-
 frappe/public/scss/desk/driver.scss           |   4 +-
 frappe/public/scss/desk/file_view.scss        |   7 +-
 frappe/public/scss/desk/filters.scss          |   2 -
 frappe/public/scss/desk/form.scss             |  12 +-
 frappe/public/scss/desk/frappe_datatable.scss |   7 +-
 frappe/public/scss/desk/global.scss           | 104 ++-
 frappe/public/scss/desk/global_search.scss    |   4 +-
 frappe/public/scss/desk/image_view.scss       |   9 +-
 frappe/public/scss/desk/kanban.scss           |   6 +-
 frappe/public/scss/desk/link_preview.scss     |   1 -
 frappe/public/scss/desk/list.scss             |  45 +-
 frappe/public/scss/desk/mobile.scss           |  27 +-
 frappe/public/scss/desk/module.scss           |  16 +-
 frappe/public/scss/desk/notification.scss     |  18 +-
 frappe/public/scss/desk/page.scss             |  23 +-
 frappe/public/scss/desk/plyr.scss             |   2 +-
 frappe/public/scss/desk/print_preview.scss    |   7 +-
 frappe/public/scss/desk/report.scss           |  26 +-
 frappe/public/scss/desk/role_editor.scss      |   9 +-
 frappe/public/scss/desk/sidebar.scss          |  17 +-
 frappe/public/scss/desk/tags.scss             |   2 +-
 frappe/public/scss/desk/theme_switcher.scss   |   2 +-
 frappe/public/scss/desk/timeline.scss         |  24 +-
 frappe/public/scss/desk/toast.scss            |   6 +-
 frappe/public/scss/desk/tree.scss             |   5 +-
 frappe/public/scss/desk/typography.scss       |   2 +-
 frappe/public/scss/desk/user_profile.scss     |   2 +-
 frappe/public/scss/desk/variables.scss        |  42 +-
 frappe/public/scss/desk/version.scss          |   5 +-
 frappe/public/scss/element/checkbox.scss      |  60 +-
 frappe/public/scss/element/radio.scss         |   4 +-
 frappe/public/scss/email.bundle.scss          |  41 +-
 frappe/public/scss/espresso/_borders.scss     |  18 +-
 frappe/public/scss/espresso/_colors.scss      | 326 +++++----
 frappe/public/scss/espresso/_shadows.scss     |  27 +-
 frappe/public/scss/espresso/_spacing.scss     |  14 +-
 frappe/public/scss/espresso/_typography.scss  |  16 +-
 frappe/public/scss/login.bundle.scss          |   2 +-
 frappe/public/scss/print.bundle.scss          |   2 +-
 frappe/public/scss/website.bundle.scss        |   2 +-
 frappe/public/scss/website/base.scss          |   5 +-
 frappe/public/scss/website/blog.scss          |   3 +-
 frappe/public/scss/website/css_variables.scss |   2 +-
 frappe/public/scss/website/doc.scss           |   2 +-
 frappe/public/scss/website/error-state.scss   |   4 +-
 frappe/public/scss/website/footer.scss        |   9 +-
 frappe/public/scss/website/index.scss         |  56 +-
 frappe/public/scss/website/markdown.scss      |  10 +-
 .../scss/website/multilevel_dropdown.scss     |   6 +-
 frappe/public/scss/website/my_account.scss    |   3 +-
 frappe/public/scss/website/navbar.scss        |  11 +-
 frappe/public/scss/website/page_builder.scss  |  42 +-
 frappe/public/scss/website/portal.scss        |   2 +-
 frappe/public/scss/website/search.scss        |   2 +-
 frappe/public/scss/website/variables.scss     |  11 +-
 frappe/public/scss/website/web_form.scss      |   7 +-
 .../public/scss/website/website_avatar.scss   |   4 +-
 frappe/public/scss/website/website_image.scss |   5 +-
 86 files changed, 1939 insertions(+), 1166 deletions(-)

diff --git a/frappe/public/css/fonts/inter/inter.scss b/frappe/public/css/fonts/inter/inter.scss
index d3565415a3..705fe2badd 100644
--- a/frappe/public/css/fonts/inter/inter.scss
+++ b/frappe/public/css/fonts/inter/inter.scss
@@ -1,164 +1,167 @@
 // TODO instead of making copy of inter.css find a way to import it.
 // workaround for css import as it fails for custom website_theme_template
 @font-face {
-	font-family: 'Inter V';
+	font-family: "Inter V";
 	font-weight: 100 900;
 	font-display: swap;
 	font-style: normal;
-	src: url('/assets/frappe/css/fonts/inter/Inter.var.woff2?v=3.19') format('woff2-variations'),
-	  url('/assets/frappe/css/fonts/inter/Inter.var.woff2?v=3.19') format('woff2');
-	src: url('/assets/frappe/css/fonts/inter/Inter.var.woff2?v=3.19') format('woff2') tech('variations');
-  }
-  @font-face {
-	font-family: 'Inter V';
+	src: url("/assets/frappe/css/fonts/inter/Inter.var.woff2?v=3.19") format("woff2-variations"),
+		url("/assets/frappe/css/fonts/inter/Inter.var.woff2?v=3.19") format("woff2");
+	src: url("/assets/frappe/css/fonts/inter/Inter.var.woff2?v=3.19") format("woff2")
+		tech("variations");
+}
+@font-face {
+	font-family: "Inter V";
 	font-weight: 100 900;
 	font-display: swap;
 	font-style: italic;
-	src: url('/assets/frappe/css/fonts/inter/Inter-Italic.var.woff2?v=3.19') format('woff2-variations'),
-	  url('/assets/frappe/css/fonts/inter/Inter-Italic.var.woff2?v=3.19') format('woff2');
-	src: url('/assets/frappe/css/fonts/inter/Inter-Italic.var.woff2?v=3.19') format('woff2') tech('variations');
-  }
+	src: url("/assets/frappe/css/fonts/inter/Inter-Italic.var.woff2?v=3.19")
+			format("woff2-variations"),
+		url("/assets/frappe/css/fonts/inter/Inter-Italic.var.woff2?v=3.19") format("woff2");
+	src: url("/assets/frappe/css/fonts/inter/Inter-Italic.var.woff2?v=3.19") format("woff2")
+		tech("variations");
+}
 @font-face {
-	font-family: 'Inter';
+	font-family: "Inter";
 	font-display: swap;
-	font-style:  italic;
+	font-style: italic;
 	font-weight: 100;
 	src: url("/assets/frappe/css/fonts/inter/inter_thinitalic.woff2") format("woff2"),
-			url("/assets/frappe/css/fonts/inter/inter_thinitalic.woff") format("woff");
+		url("/assets/frappe/css/fonts/inter/inter_thinitalic.woff") format("woff");
 }
 
 @font-face {
-	font-family: 'Inter';
+	font-family: "Inter";
 	font-display: swap;
-	font-style:  normal;
+	font-style: normal;
 	font-weight: 200;
 	src: url("/assets/frappe/css/fonts/inter/inter_extralight.woff2") format("woff2"),
-			url("/assets/frappe/css/fonts/inter/inter_extralight.woff") format("woff");
+		url("/assets/frappe/css/fonts/inter/inter_extralight.woff") format("woff");
 }
 @font-face {
-	font-family: 'Inter';
+	font-family: "Inter";
 	font-display: swap;
-	font-style:  italic;
+	font-style: italic;
 	font-weight: 200;
 	src: url("/assets/frappe/css/fonts/inter/inter_extralightitalic.woff2") format("woff2"),
-			url("/assets/frappe/css/fonts/inter/inter_extralightitalic.woff") format("woff");
+		url("/assets/frappe/css/fonts/inter/inter_extralightitalic.woff") format("woff");
 }
 
 @font-face {
-	font-family: 'Inter';
+	font-family: "Inter";
 	font-display: swap;
-	font-style:  normal;
+	font-style: normal;
 	font-weight: 300;
 	src: url("/assets/frappe/css/fonts/inter/inter_light.woff2") format("woff2"),
-			url("/assets/frappe/css/fonts/inter/inter_light.woff") format("woff");
+		url("/assets/frappe/css/fonts/inter/inter_light.woff") format("woff");
 }
 @font-face {
-	font-family: 'Inter';
+	font-family: "Inter";
 	font-display: swap;
-	font-style:  italic;
+	font-style: italic;
 	font-weight: 300;
 	src: url("/assets/frappe/css/fonts/inter/inter_lightitalic.woff2") format("woff2"),
-			url("/assets/frappe/css/fonts/inter/inter_lightitalic.woff") format("woff");
+		url("/assets/frappe/css/fonts/inter/inter_lightitalic.woff") format("woff");
 }
 
 @font-face {
-	font-family: 'Inter';
+	font-family: "Inter";
 	font-display: swap;
-	font-style:  normal;
+	font-style: normal;
 	font-weight: 400;
 	src: url("/assets/frappe/css/fonts/inter/inter_regular.woff2") format("woff2"),
-			url("/assets/frappe/css/fonts/inter/inter_regular.woff") format("woff");
+		url("/assets/frappe/css/fonts/inter/inter_regular.woff") format("woff");
 }
 @font-face {
-	font-family: 'Inter';
+	font-family: "Inter";
 	font-display: swap;
-	font-style:  italic;
+	font-style: italic;
 	font-weight: 400;
 	src: url("/assets/frappe/css/fonts/inter/inter_italic.woff2") format("woff2"),
-			url("/assets/frappe/css/fonts/inter/inter_italic.woff") format("woff");
+		url("/assets/frappe/css/fonts/inter/inter_italic.woff") format("woff");
 }
 
 @font-face {
-	font-family: 'Inter';
+	font-family: "Inter";
 	font-display: swap;
-	font-style:  normal;
+	font-style: normal;
 	font-weight: 500;
 	src: url("/assets/frappe/css/fonts/inter/inter_medium.woff2") format("woff2"),
-			url("/assets/frappe/css/fonts/inter/inter_medium.woff") format("woff");
+		url("/assets/frappe/css/fonts/inter/inter_medium.woff") format("woff");
 }
 @font-face {
-	font-family: 'Inter';
+	font-family: "Inter";
 	font-display: swap;
-	font-style:  italic;
+	font-style: italic;
 	font-weight: 500;
 	src: url("/assets/frappe/css/fonts/inter/inter_mediumitalic.woff2") format("woff2"),
-			url("/assets/frappe/css/fonts/inter/inter_mediumitalic.woff") format("woff");
+		url("/assets/frappe/css/fonts/inter/inter_mediumitalic.woff") format("woff");
 }
 
 @font-face {
-	font-family: 'Inter';
+	font-family: "Inter";
 	font-display: swap;
-	font-style:  normal;
+	font-style: normal;
 	font-weight: 600;
 	src: url("/assets/frappe/css/fonts/inter/inter_semibold.woff2") format("woff2"),
-			url("/assets/frappe/css/fonts/inter/inter_semibold.woff") format("woff");
+		url("/assets/frappe/css/fonts/inter/inter_semibold.woff") format("woff");
 }
 @font-face {
-	font-family: 'Inter';
+	font-family: "Inter";
 	font-display: swap;
-	font-style:  italic;
+	font-style: italic;
 	font-weight: 600;
 	src: url("/assets/frappe/css/fonts/inter/inter_semibolditalic.woff2") format("woff2"),
-			url("/assets/frappe/css/fonts/inter/inter_semibolditalic.woff") format("woff");
+		url("/assets/frappe/css/fonts/inter/inter_semibolditalic.woff") format("woff");
 }
 
 @font-face {
-	font-family: 'Inter';
+	font-family: "Inter";
 	font-display: swap;
-	font-style:  normal;
+	font-style: normal;
 	font-weight: 700;
 	src: url("/assets/frappe/css/fonts/inter/inter_bold.woff2") format("woff2"),
-			url("/assets/frappe/css/fonts/inter/inter_bold.woff") format("woff");
+		url("/assets/frappe/css/fonts/inter/inter_bold.woff") format("woff");
 }
 @font-face {
-	font-family: 'Inter';
+	font-family: "Inter";
 	font-display: swap;
-	font-style:  italic;
+	font-style: italic;
 	font-weight: 700;
 	src: url("/assets/frappe/css/fonts/inter/inter_bolditalic.woff2") format("woff2"),
-			url("/assets/frappe/css/fonts/inter/inter_bolditalic.woff") format("woff");
+		url("/assets/frappe/css/fonts/inter/inter_bolditalic.woff") format("woff");
 }
 
 @font-face {
-	font-family: 'Inter';
+	font-family: "Inter";
 	font-display: swap;
-	font-style:  normal;
+	font-style: normal;
 	font-weight: 800;
 	src: url("/assets/frappe/css/fonts/inter/inter_extrabold.woff2") format("woff2"),
-			url("/assets/frappe/css/fonts/inter/inter_extrabold.woff") format("woff");
+		url("/assets/frappe/css/fonts/inter/inter_extrabold.woff") format("woff");
 }
 @font-face {
-	font-family: 'Inter';
+	font-family: "Inter";
 	font-display: swap;
-	font-style:  italic;
+	font-style: italic;
 	font-weight: 800;
 	src: url("/assets/frappe/css/fonts/inter/inter_extrabolditalic.woff2") format("woff2"),
-			url("/assets/frappe/css/fonts/inter/inter_extrabolditalic.woff") format("woff");
+		url("/assets/frappe/css/fonts/inter/inter_extrabolditalic.woff") format("woff");
 }
 
 @font-face {
-	font-family: 'Inter';
+	font-family: "Inter";
 	font-display: swap;
-	font-style:  normal;
+	font-style: normal;
 	font-weight: 900;
 	src: url("/assets/frappe/css/fonts/inter/inter_black.woff2") format("woff2"),
-			url("/assets/frappe/css/fonts/inter/inter_black.woff") format("woff");
+		url("/assets/frappe/css/fonts/inter/inter_black.woff") format("woff");
 }
 @font-face {
-	font-family: 'Inter';
+	font-family: "Inter";
 	font-display: swap;
-	font-style:  italic;
+	font-style: italic;
 	font-weight: 900;
 	src: url("/assets/frappe/css/fonts/inter/inter_blackitalic.woff2") format("woff2"),
-			url("/assets/frappe/css/fonts/inter/inter_blackitalic.woff") format("woff");
+		url("/assets/frappe/css/fonts/inter/inter_blackitalic.woff") format("woff");
 }
diff --git a/frappe/public/css/octicons/octicons.scss b/frappe/public/css/octicons/octicons.scss
index 0902cedce8..81e7d52d78 100755
--- a/frappe/public/css/octicons/octicons.scss
+++ b/frappe/public/css/octicons/octicons.scss
@@ -1,220 +1,548 @@
 $octicons-font-path: "." !default;
-$octicons-version:   "396334ee3da78f4302d25c758ae3e3ce5dc3c97d";
+$octicons-version: "396334ee3da78f4302d25c758ae3e3ce5dc3c97d";
 
 @font-face {
-  font-family: 'octicons';
-  src: url('#{$octicons-font-path}/octicons.eot?#iefix&v=#{$octicons-version}') format('embedded-opentype'),
-       url('#{$octicons-font-path}/octicons.woff?v=#{$octicons-version}') format('woff'),
-       url('#{$octicons-font-path}/octicons.ttf?v=#{$octicons-version}') format('truetype'),
-       url('#{$octicons-font-path}/octicons.svg?v=#{$octicons-version}#octicons') format('svg');
-  font-weight: normal;
-  font-style: normal;
+	font-family: "octicons";
+	src: url("#{$octicons-font-path}/octicons.eot?#iefix&v=#{$octicons-version}")
+			format("embedded-opentype"),
+		url("#{$octicons-font-path}/octicons.woff?v=#{$octicons-version}") format("woff"),
+		url("#{$octicons-font-path}/octicons.ttf?v=#{$octicons-version}") format("truetype"),
+		url("#{$octicons-font-path}/octicons.svg?v=#{$octicons-version}#octicons") format("svg");
+	font-weight: normal;
+	font-style: normal;
 }
 
 // .octicon is optimized for 16px.
 // .mega-octicon is optimized for 32px but can be used larger.
-.octicon, .mega-octicon {
-  font: normal normal normal 16px/1 octicons;
-  display: inline-block;
-  text-decoration: none;
-  text-rendering: auto;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
+.octicon,
+.mega-octicon {
+	font: normal normal normal 16px/1 octicons;
+	display: inline-block;
+	text-decoration: none;
+	text-rendering: auto;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+.mega-octicon {
+	font-size: 32px;
 }
-.mega-octicon { font-size: 32px; }
 
-.octicon-alert:before { content: '\f02d'} /*  */
-.octicon-arrow-down:before { content: '\f03f'} /*  */
-.octicon-arrow-left:before { content: '\f040'} /*  */
-.octicon-arrow-right:before { content: '\f03e'} /*  */
-.octicon-arrow-small-down:before { content: '\f0a0'} /*  */
-.octicon-arrow-small-left:before { content: '\f0a1'} /*  */
-.octicon-arrow-small-right:before { content: '\f071'} /*  */
-.octicon-arrow-small-up:before { content: '\f09f'} /*  */
-.octicon-arrow-up:before { content: '\f03d'} /*  */
+.octicon-alert:before {
+	content: "\f02d";
+} /*  */
+.octicon-arrow-down:before {
+	content: "\f03f";
+} /*  */
+.octicon-arrow-left:before {
+	content: "\f040";
+} /*  */
+.octicon-arrow-right:before {
+	content: "\f03e";
+} /*  */
+.octicon-arrow-small-down:before {
+	content: "\f0a0";
+} /*  */
+.octicon-arrow-small-left:before {
+	content: "\f0a1";
+} /*  */
+.octicon-arrow-small-right:before {
+	content: "\f071";
+} /*  */
+.octicon-arrow-small-up:before {
+	content: "\f09f";
+} /*  */
+.octicon-arrow-up:before {
+	content: "\f03d";
+} /*  */
 .octicon-microscope:before,
-.octicon-beaker:before { content: '\f0dd'} /*  */
-.octicon-bell:before { content: '\f0de'} /*  */
-.octicon-book:before { content: '\f007'} /*  */
-.octicon-bookmark:before { content: '\f07b'} /*  */
-.octicon-briefcase:before { content: '\f0d3'} /*  */
-.octicon-broadcast:before { content: '\f048'} /*  */
-.octicon-browser:before { content: '\f0c5'} /*  */
-.octicon-bug:before { content: '\f091'} /*  */
-.octicon-calendar:before { content: '\f068'} /*  */
-.octicon-check:before { content: '\f03a'} /*  */
-.octicon-checklist:before { content: '\f076'} /*  */
-.octicon-chevron-down:before { content: '\f0a3'} /*  */
-.octicon-chevron-left:before { content: '\f0a4'} /*  */
-.octicon-chevron-right:before { content: '\f078'} /*  */
-.octicon-chevron-up:before { content: '\f0a2'} /*  */
-.octicon-circle-slash:before { content: '\f084'} /*  */
-.octicon-circuit-board:before { content: '\f0d6'} /*  */
-.octicon-clippy:before { content: '\f035'} /*  */
-.octicon-clock:before { content: '\f046'} /*  */
-.octicon-cloud-download:before { content: '\f00b'} /*  */
-.octicon-cloud-upload:before { content: '\f00c'} /*  */
-.octicon-code:before { content: '\f05f'} /*  */
-.octicon-color-mode:before { content: '\f065'} /*  */
+.octicon-beaker:before {
+	content: "\f0dd";
+} /*  */
+.octicon-bell:before {
+	content: "\f0de";
+} /*  */
+.octicon-book:before {
+	content: "\f007";
+} /*  */
+.octicon-bookmark:before {
+	content: "\f07b";
+} /*  */
+.octicon-briefcase:before {
+	content: "\f0d3";
+} /*  */
+.octicon-broadcast:before {
+	content: "\f048";
+} /*  */
+.octicon-browser:before {
+	content: "\f0c5";
+} /*  */
+.octicon-bug:before {
+	content: "\f091";
+} /*  */
+.octicon-calendar:before {
+	content: "\f068";
+} /*  */
+.octicon-check:before {
+	content: "\f03a";
+} /*  */
+.octicon-checklist:before {
+	content: "\f076";
+} /*  */
+.octicon-chevron-down:before {
+	content: "\f0a3";
+} /*  */
+.octicon-chevron-left:before {
+	content: "\f0a4";
+} /*  */
+.octicon-chevron-right:before {
+	content: "\f078";
+} /*  */
+.octicon-chevron-up:before {
+	content: "\f0a2";
+} /*  */
+.octicon-circle-slash:before {
+	content: "\f084";
+} /*  */
+.octicon-circuit-board:before {
+	content: "\f0d6";
+} /*  */
+.octicon-clippy:before {
+	content: "\f035";
+} /*  */
+.octicon-clock:before {
+	content: "\f046";
+} /*  */
+.octicon-cloud-download:before {
+	content: "\f00b";
+} /*  */
+.octicon-cloud-upload:before {
+	content: "\f00c";
+} /*  */
+.octicon-code:before {
+	content: "\f05f";
+} /*  */
+.octicon-color-mode:before {
+	content: "\f065";
+} /*  */
 .octicon-comment-add:before,
-.octicon-comment:before { content: '\f02b'} /*  */
-.octicon-comment-discussion:before { content: '\f04f'} /*  */
-.octicon-credit-card:before { content: '\f045'} /*  */
-.octicon-dash:before { content: '\f0ca'} /*  */
-.octicon-dashboard:before { content: '\f07d'} /*  */
-.octicon-database:before { content: '\f096'} /*  */
+.octicon-comment:before {
+	content: "\f02b";
+} /*  */
+.octicon-comment-discussion:before {
+	content: "\f04f";
+} /*  */
+.octicon-credit-card:before {
+	content: "\f045";
+} /*  */
+.octicon-dash:before {
+	content: "\f0ca";
+} /*  */
+.octicon-dashboard:before {
+	content: "\f07d";
+} /*  */
+.octicon-database:before {
+	content: "\f096";
+} /*  */
 .octicon-clone:before,
-.octicon-desktop-download:before { content: '\f0dc'} /*  */
-.octicon-device-camera:before { content: '\f056'} /*  */
-.octicon-device-camera-video:before { content: '\f057'} /*  */
-.octicon-device-desktop:before { content: '\f27c'} /*  */
-.octicon-device-mobile:before { content: '\f038'} /*  */
-.octicon-diff:before { content: '\f04d'} /*  */
-.octicon-diff-added:before { content: '\f06b'} /*  */
-.octicon-diff-ignored:before { content: '\f099'} /*  */
-.octicon-diff-modified:before { content: '\f06d'} /*  */
-.octicon-diff-removed:before { content: '\f06c'} /*  */
-.octicon-diff-renamed:before { content: '\f06e'} /*  */
-.octicon-ellipsis:before { content: '\f09a'} /*  */
+.octicon-desktop-download:before {
+	content: "\f0dc";
+} /*  */
+.octicon-device-camera:before {
+	content: "\f056";
+} /*  */
+.octicon-device-camera-video:before {
+	content: "\f057";
+} /*  */
+.octicon-device-desktop:before {
+	content: "\f27c";
+} /*  */
+.octicon-device-mobile:before {
+	content: "\f038";
+} /*  */
+.octicon-diff:before {
+	content: "\f04d";
+} /*  */
+.octicon-diff-added:before {
+	content: "\f06b";
+} /*  */
+.octicon-diff-ignored:before {
+	content: "\f099";
+} /*  */
+.octicon-diff-modified:before {
+	content: "\f06d";
+} /*  */
+.octicon-diff-removed:before {
+	content: "\f06c";
+} /*  */
+.octicon-diff-renamed:before {
+	content: "\f06e";
+} /*  */
+.octicon-ellipsis:before {
+	content: "\f09a";
+} /*  */
 .octicon-eye-unwatch:before,
 .octicon-eye-watch:before,
-.octicon-eye:before { content: '\f04e'} /*  */
-.octicon-file-binary:before { content: '\f094'} /*  */
-.octicon-file-code:before { content: '\f010'} /*  */
-.octicon-file-directory:before { content: '\f016'} /*  */
-.octicon-file-media:before { content: '\f012'} /*  */
-.octicon-file-pdf:before { content: '\f014'} /*  */
-.octicon-file-submodule:before { content: '\f017'} /*  */
-.octicon-file-symlink-directory:before { content: '\f0b1'} /*  */
-.octicon-file-symlink-file:before { content: '\f0b0'} /*  */
-.octicon-file-text:before { content: '\f011'} /*  */
-.octicon-file-zip:before { content: '\f013'} /*  */
-.octicon-flame:before { content: '\f0d2'} /*  */
-.octicon-fold:before { content: '\f0cc'} /*  */
-.octicon-gear:before { content: '\f02f'} /*  */
-.octicon-gift:before { content: '\f042'} /*  */
-.octicon-gist:before { content: '\f00e'} /*  */
-.octicon-gist-secret:before { content: '\f08c'} /*  */
+.octicon-eye:before {
+	content: "\f04e";
+} /*  */
+.octicon-file-binary:before {
+	content: "\f094";
+} /*  */
+.octicon-file-code:before {
+	content: "\f010";
+} /*  */
+.octicon-file-directory:before {
+	content: "\f016";
+} /*  */
+.octicon-file-media:before {
+	content: "\f012";
+} /*  */
+.octicon-file-pdf:before {
+	content: "\f014";
+} /*  */
+.octicon-file-submodule:before {
+	content: "\f017";
+} /*  */
+.octicon-file-symlink-directory:before {
+	content: "\f0b1";
+} /*  */
+.octicon-file-symlink-file:before {
+	content: "\f0b0";
+} /*  */
+.octicon-file-text:before {
+	content: "\f011";
+} /*  */
+.octicon-file-zip:before {
+	content: "\f013";
+} /*  */
+.octicon-flame:before {
+	content: "\f0d2";
+} /*  */
+.octicon-fold:before {
+	content: "\f0cc";
+} /*  */
+.octicon-gear:before {
+	content: "\f02f";
+} /*  */
+.octicon-gift:before {
+	content: "\f042";
+} /*  */
+.octicon-gist:before {
+	content: "\f00e";
+} /*  */
+.octicon-gist-secret:before {
+	content: "\f08c";
+} /*  */
 .octicon-git-branch-create:before,
 .octicon-git-branch-delete:before,
-.octicon-git-branch:before { content: '\f020'} /*  */
-.octicon-git-commit:before { content: '\f01f'} /*  */
-.octicon-git-compare:before { content: '\f0ac'} /*  */
-.octicon-git-merge:before { content: '\f023'} /*  */
+.octicon-git-branch:before {
+	content: "\f020";
+} /*  */
+.octicon-git-commit:before {
+	content: "\f01f";
+} /*  */
+.octicon-git-compare:before {
+	content: "\f0ac";
+} /*  */
+.octicon-git-merge:before {
+	content: "\f023";
+} /*  */
 .octicon-git-pull-request-abandoned:before,
-.octicon-git-pull-request:before { content: '\f009'} /*  */
-.octicon-globe:before { content: '\f0b6'} /*  */
-.octicon-graph:before { content: '\f043'} /*  */
-.octicon-heart:before { content: '\2665'} /* ♥ */
-.octicon-history:before { content: '\f07e'} /*  */
-.octicon-home:before { content: '\f08d'} /*  */
-.octicon-horizontal-rule:before { content: '\f070'} /*  */
-.octicon-hubot:before { content: '\f09d'} /*  */
-.octicon-inbox:before { content: '\f0cf'} /*  */
-.octicon-info:before { content: '\f059'} /*  */
-.octicon-issue-closed:before { content: '\f028'} /*  */
-.octicon-issue-opened:before { content: '\f026'} /*  */
-.octicon-issue-reopened:before { content: '\f027'} /*  */
-.octicon-jersey:before { content: '\f019'} /*  */
-.octicon-key:before { content: '\f049'} /*  */
-.octicon-keyboard:before { content: '\f00d'} /*  */
-.octicon-law:before { content: '\f0d8'} /*  */
-.octicon-light-bulb:before { content: '\f000'} /*  */
-.octicon-link:before { content: '\f05c'} /*  */
-.octicon-link-external:before { content: '\f07f'} /*  */
-.octicon-list-ordered:before { content: '\f062'} /*  */
-.octicon-list-unordered:before { content: '\f061'} /*  */
-.octicon-location:before { content: '\f060'} /*  */
+.octicon-git-pull-request:before {
+	content: "\f009";
+} /*  */
+.octicon-globe:before {
+	content: "\f0b6";
+} /*  */
+.octicon-graph:before {
+	content: "\f043";
+} /*  */
+.octicon-heart:before {
+	content: "\2665";
+} /* ♥ */
+.octicon-history:before {
+	content: "\f07e";
+} /*  */
+.octicon-home:before {
+	content: "\f08d";
+} /*  */
+.octicon-horizontal-rule:before {
+	content: "\f070";
+} /*  */
+.octicon-hubot:before {
+	content: "\f09d";
+} /*  */
+.octicon-inbox:before {
+	content: "\f0cf";
+} /*  */
+.octicon-info:before {
+	content: "\f059";
+} /*  */
+.octicon-issue-closed:before {
+	content: "\f028";
+} /*  */
+.octicon-issue-opened:before {
+	content: "\f026";
+} /*  */
+.octicon-issue-reopened:before {
+	content: "\f027";
+} /*  */
+.octicon-jersey:before {
+	content: "\f019";
+} /*  */
+.octicon-key:before {
+	content: "\f049";
+} /*  */
+.octicon-keyboard:before {
+	content: "\f00d";
+} /*  */
+.octicon-law:before {
+	content: "\f0d8";
+} /*  */
+.octicon-light-bulb:before {
+	content: "\f000";
+} /*  */
+.octicon-link:before {
+	content: "\f05c";
+} /*  */
+.octicon-link-external:before {
+	content: "\f07f";
+} /*  */
+.octicon-list-ordered:before {
+	content: "\f062";
+} /*  */
+.octicon-list-unordered:before {
+	content: "\f061";
+} /*  */
+.octicon-location:before {
+	content: "\f060";
+} /*  */
 .octicon-gist-private:before,
 .octicon-mirror-private:before,
 .octicon-git-fork-private:before,
-.octicon-lock:before { content: '\f06a'} /*  */
-.octicon-logo-github:before { content: '\f092'} /*  */
-.octicon-mail:before { content: '\f03b'} /*  */
-.octicon-mail-read:before { content: '\f03c'} /*  */
-.octicon-mail-reply:before { content: '\f051'} /*  */
-.octicon-mark-github:before { content: '\f00a'} /*  */
-.octicon-markdown:before { content: '\f0c9'} /*  */
-.octicon-megaphone:before { content: '\f077'} /*  */
-.octicon-mention:before { content: '\f0be'} /*  */
-.octicon-milestone:before { content: '\f075'} /*  */
+.octicon-lock:before {
+	content: "\f06a";
+} /*  */
+.octicon-logo-github:before {
+	content: "\f092";
+} /*  */
+.octicon-mail:before {
+	content: "\f03b";
+} /*  */
+.octicon-mail-read:before {
+	content: "\f03c";
+} /*  */
+.octicon-mail-reply:before {
+	content: "\f051";
+} /*  */
+.octicon-mark-github:before {
+	content: "\f00a";
+} /*  */
+.octicon-markdown:before {
+	content: "\f0c9";
+} /*  */
+.octicon-megaphone:before {
+	content: "\f077";
+} /*  */
+.octicon-mention:before {
+	content: "\f0be";
+} /*  */
+.octicon-milestone:before {
+	content: "\f075";
+} /*  */
 .octicon-mirror-public:before,
-.octicon-mirror:before { content: '\f024'} /*  */
-.octicon-mortar-board:before { content: '\f0d7'} /*  */
-.octicon-mute:before { content: '\f080'} /*  */
-.octicon-no-newline:before { content: '\f09c'} /*  */
-.octicon-octoface:before { content: '\f008'} /*  */
-.octicon-organization:before { content: '\f037'} /*  */
-.octicon-package:before { content: '\f0c4'} /*  */
-.octicon-paintcan:before { content: '\f0d1'} /*  */
-.octicon-pencil:before { content: '\f058'} /*  */
+.octicon-mirror:before {
+	content: "\f024";
+} /*  */
+.octicon-mortar-board:before {
+	content: "\f0d7";
+} /*  */
+.octicon-mute:before {
+	content: "\f080";
+} /*  */
+.octicon-no-newline:before {
+	content: "\f09c";
+} /*  */
+.octicon-octoface:before {
+	content: "\f008";
+} /*  */
+.octicon-organization:before {
+	content: "\f037";
+} /*  */
+.octicon-package:before {
+	content: "\f0c4";
+} /*  */
+.octicon-paintcan:before {
+	content: "\f0d1";
+} /*  */
+.octicon-pencil:before {
+	content: "\f058";
+} /*  */
 .octicon-person-add:before,
 .octicon-person-follow:before,
-.octicon-person:before { content: '\f018'} /*  */
-.octicon-pin:before { content: '\f041'} /*  */
-.octicon-plug:before { content: '\f0d4'} /*  */
+.octicon-person:before {
+	content: "\f018";
+} /*  */
+.octicon-pin:before {
+	content: "\f041";
+} /*  */
+.octicon-plug:before {
+	content: "\f0d4";
+} /*  */
 .octicon-repo-create:before,
 .octicon-gist-new:before,
 .octicon-file-directory-create:before,
 .octicon-file-add:before,
-.octicon-plus:before { content: '\f05d'} /*  */
-.octicon-primitive-dot:before { content: '\f052'} /*  */
-.octicon-primitive-square:before { content: '\f053'} /*  */
-.octicon-pulse:before { content: '\f085'} /*  */
-.octicon-question:before { content: '\f02c'} /*  */
-.octicon-quote:before { content: '\f063'} /*  */
-.octicon-radio-tower:before { content: '\f030'} /*  */
+.octicon-plus:before {
+	content: "\f05d";
+} /*  */
+.octicon-primitive-dot:before {
+	content: "\f052";
+} /*  */
+.octicon-primitive-square:before {
+	content: "\f053";
+} /*  */
+.octicon-pulse:before {
+	content: "\f085";
+} /*  */
+.octicon-question:before {
+	content: "\f02c";
+} /*  */
+.octicon-quote:before {
+	content: "\f063";
+} /*  */
+.octicon-radio-tower:before {
+	content: "\f030";
+} /*  */
 .octicon-repo-delete:before,
-.octicon-repo:before { content: '\f001'} /*  */
-.octicon-repo-clone:before { content: '\f04c'} /*  */
-.octicon-repo-force-push:before { content: '\f04a'} /*  */
+.octicon-repo:before {
+	content: "\f001";
+} /*  */
+.octicon-repo-clone:before {
+	content: "\f04c";
+} /*  */
+.octicon-repo-force-push:before {
+	content: "\f04a";
+} /*  */
 .octicon-gist-fork:before,
-.octicon-repo-forked:before { content: '\f002'} /*  */
-.octicon-repo-pull:before { content: '\f006'} /*  */
-.octicon-repo-push:before { content: '\f005'} /*  */
-.octicon-rocket:before { content: '\f033'} /*  */
-.octicon-rss:before { content: '\f034'} /*  */
-.octicon-ruby:before { content: '\f047'} /*  */
-.octicon-screen-full:before { content: '\f066'} /*  */
-.octicon-screen-normal:before { content: '\f067'} /*  */
+.octicon-repo-forked:before {
+	content: "\f002";
+} /*  */
+.octicon-repo-pull:before {
+	content: "\f006";
+} /*  */
+.octicon-repo-push:before {
+	content: "\f005";
+} /*  */
+.octicon-rocket:before {
+	content: "\f033";
+} /*  */
+.octicon-rss:before {
+	content: "\f034";
+} /*  */
+.octicon-ruby:before {
+	content: "\f047";
+} /*  */
+.octicon-screen-full:before {
+	content: "\f066";
+} /*  */
+.octicon-screen-normal:before {
+	content: "\f067";
+} /*  */
 .octicon-search-save:before,
-.octicon-search:before { content: '\f02e'} /*  */
-.octicon-server:before { content: '\f097'} /*  */
-.octicon-settings:before { content: '\f07c'} /*  */
-.octicon-shield:before { content: '\f0e1'} /*  */
+.octicon-search:before {
+	content: "\f02e";
+} /*  */
+.octicon-server:before {
+	content: "\f097";
+} /*  */
+.octicon-settings:before {
+	content: "\f07c";
+} /*  */
+.octicon-shield:before {
+	content: "\f0e1";
+} /*  */
 .octicon-log-in:before,
-.octicon-sign-in:before { content: '\f036'} /*  */
+.octicon-sign-in:before {
+	content: "\f036";
+} /*  */
 .octicon-log-out:before,
-.octicon-sign-out:before { content: '\f032'} /*  */
-.octicon-squirrel:before { content: '\f0b2'} /*  */
+.octicon-sign-out:before {
+	content: "\f032";
+} /*  */
+.octicon-squirrel:before {
+	content: "\f0b2";
+} /*  */
 .octicon-star-add:before,
 .octicon-star-delete:before,
-.octicon-star:before { content: '\f02a'} /*  */
-.octicon-stop:before { content: '\f08f'} /*  */
+.octicon-star:before {
+	content: "\f02a";
+} /*  */
+.octicon-stop:before {
+	content: "\f08f";
+} /*  */
 .octicon-repo-sync:before,
-.octicon-sync:before { content: '\f087'} /*  */
+.octicon-sync:before {
+	content: "\f087";
+} /*  */
 .octicon-tag-remove:before,
 .octicon-tag-add:before,
-.octicon-tag:before { content: '\f015'} /*  */
-.octicon-telescope:before { content: '\f088'} /*  */
-.octicon-terminal:before { content: '\f0c8'} /*  */
-.octicon-three-bars:before { content: '\f05e'} /*  */
-.octicon-thumbsdown:before { content: '\f0db'} /*  */
-.octicon-thumbsup:before { content: '\f0da'} /*  */
-.octicon-tools:before { content: '\f031'} /*  */
-.octicon-trashcan:before { content: '\f0d0'} /*  */
-.octicon-triangle-down:before { content: '\f05b'} /*  */
-.octicon-triangle-left:before { content: '\f044'} /*  */
-.octicon-triangle-right:before { content: '\f05a'} /*  */
-.octicon-triangle-up:before { content: '\f0aa'} /*  */
-.octicon-unfold:before { content: '\f039'} /*  */
-.octicon-unmute:before { content: '\f0ba'} /*  */
-.octicon-versions:before { content: '\f064'} /*  */
-.octicon-watch:before { content: '\f0e0'} /*  */
+.octicon-tag:before {
+	content: "\f015";
+} /*  */
+.octicon-telescope:before {
+	content: "\f088";
+} /*  */
+.octicon-terminal:before {
+	content: "\f0c8";
+} /*  */
+.octicon-three-bars:before {
+	content: "\f05e";
+} /*  */
+.octicon-thumbsdown:before {
+	content: "\f0db";
+} /*  */
+.octicon-thumbsup:before {
+	content: "\f0da";
+} /*  */
+.octicon-tools:before {
+	content: "\f031";
+} /*  */
+.octicon-trashcan:before {
+	content: "\f0d0";
+} /*  */
+.octicon-triangle-down:before {
+	content: "\f05b";
+} /*  */
+.octicon-triangle-left:before {
+	content: "\f044";
+} /*  */
+.octicon-triangle-right:before {
+	content: "\f05a";
+} /*  */
+.octicon-triangle-up:before {
+	content: "\f0aa";
+} /*  */
+.octicon-unfold:before {
+	content: "\f039";
+} /*  */
+.octicon-unmute:before {
+	content: "\f0ba";
+} /*  */
+.octicon-versions:before {
+	content: "\f064";
+} /*  */
+.octicon-watch:before {
+	content: "\f0e0";
+} /*  */
 .octicon-remove-close:before,
-.octicon-x:before { content: '\f081'} /*  */
-.octicon-zap:before { content: '\26A1'} /* ⚡ */
+.octicon-x:before {
+	content: "\f081";
+} /*  */
+.octicon-zap:before {
+	content: "\26A1";
+} /* ⚡ */
diff --git a/frappe/public/css/octicons/sprockets-octicons.scss b/frappe/public/css/octicons/sprockets-octicons.scss
index cef21ae62e..84cd64d260 100755
--- a/frappe/public/css/octicons/sprockets-octicons.scss
+++ b/frappe/public/css/octicons/sprockets-octicons.scss
@@ -1,217 +1,543 @@
 @font-face {
-  font-family: 'octicons';
-  src: font-url('octicons.eot?#iefix') format('embedded-opentype'),
-       font-url('octicons.woff') format('woff'),
-       font-url('octicons.ttf') format('truetype'),
-       font-url('octicons.svg#octicons') format('svg');
-  font-weight: normal;
-  font-style: normal;
+	font-family: "octicons";
+	src: font-url("octicons.eot?#iefix") format("embedded-opentype"),
+		font-url("octicons.woff") format("woff"), font-url("octicons.ttf") format("truetype"),
+		font-url("octicons.svg#octicons") format("svg");
+	font-weight: normal;
+	font-style: normal;
 }
 
 // .octicon is optimized for 16px.
 // .mega-octicon is optimized for 32px but can be used larger.
-.octicon, .mega-octicon {
-  font: normal normal normal 16px/1 octicons;
-  display: inline-block;
-  text-decoration: none;
-  text-rendering: auto;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
+.octicon,
+.mega-octicon {
+	font: normal normal normal 16px/1 octicons;
+	display: inline-block;
+	text-decoration: none;
+	text-rendering: auto;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+.mega-octicon {
+	font-size: 32px;
 }
-.mega-octicon { font-size: 32px; }
 
-.octicon-alert:before { content: '\f02d'} /*  */
-.octicon-arrow-down:before { content: '\f03f'} /*  */
-.octicon-arrow-left:before { content: '\f040'} /*  */
-.octicon-arrow-right:before { content: '\f03e'} /*  */
-.octicon-arrow-small-down:before { content: '\f0a0'} /*  */
-.octicon-arrow-small-left:before { content: '\f0a1'} /*  */
-.octicon-arrow-small-right:before { content: '\f071'} /*  */
-.octicon-arrow-small-up:before { content: '\f09f'} /*  */
-.octicon-arrow-up:before { content: '\f03d'} /*  */
+.octicon-alert:before {
+	content: "\f02d";
+} /*  */
+.octicon-arrow-down:before {
+	content: "\f03f";
+} /*  */
+.octicon-arrow-left:before {
+	content: "\f040";
+} /*  */
+.octicon-arrow-right:before {
+	content: "\f03e";
+} /*  */
+.octicon-arrow-small-down:before {
+	content: "\f0a0";
+} /*  */
+.octicon-arrow-small-left:before {
+	content: "\f0a1";
+} /*  */
+.octicon-arrow-small-right:before {
+	content: "\f071";
+} /*  */
+.octicon-arrow-small-up:before {
+	content: "\f09f";
+} /*  */
+.octicon-arrow-up:before {
+	content: "\f03d";
+} /*  */
 .octicon-microscope:before,
-.octicon-beaker:before { content: '\f0dd'} /*  */
-.octicon-bell:before { content: '\f0de'} /*  */
-.octicon-book:before { content: '\f007'} /*  */
-.octicon-bookmark:before { content: '\f07b'} /*  */
-.octicon-briefcase:before { content: '\f0d3'} /*  */
-.octicon-broadcast:before { content: '\f048'} /*  */
-.octicon-browser:before { content: '\f0c5'} /*  */
-.octicon-bug:before { content: '\f091'} /*  */
-.octicon-calendar:before { content: '\f068'} /*  */
-.octicon-check:before { content: '\f03a'} /*  */
-.octicon-checklist:before { content: '\f076'} /*  */
-.octicon-chevron-down:before { content: '\f0a3'} /*  */
-.octicon-chevron-left:before { content: '\f0a4'} /*  */
-.octicon-chevron-right:before { content: '\f078'} /*  */
-.octicon-chevron-up:before { content: '\f0a2'} /*  */
-.octicon-circle-slash:before { content: '\f084'} /*  */
-.octicon-circuit-board:before { content: '\f0d6'} /*  */
-.octicon-clippy:before { content: '\f035'} /*  */
-.octicon-clock:before { content: '\f046'} /*  */
-.octicon-cloud-download:before { content: '\f00b'} /*  */
-.octicon-cloud-upload:before { content: '\f00c'} /*  */
-.octicon-code:before { content: '\f05f'} /*  */
-.octicon-color-mode:before { content: '\f065'} /*  */
+.octicon-beaker:before {
+	content: "\f0dd";
+} /*  */
+.octicon-bell:before {
+	content: "\f0de";
+} /*  */
+.octicon-book:before {
+	content: "\f007";
+} /*  */
+.octicon-bookmark:before {
+	content: "\f07b";
+} /*  */
+.octicon-briefcase:before {
+	content: "\f0d3";
+} /*  */
+.octicon-broadcast:before {
+	content: "\f048";
+} /*  */
+.octicon-browser:before {
+	content: "\f0c5";
+} /*  */
+.octicon-bug:before {
+	content: "\f091";
+} /*  */
+.octicon-calendar:before {
+	content: "\f068";
+} /*  */
+.octicon-check:before {
+	content: "\f03a";
+} /*  */
+.octicon-checklist:before {
+	content: "\f076";
+} /*  */
+.octicon-chevron-down:before {
+	content: "\f0a3";
+} /*  */
+.octicon-chevron-left:before {
+	content: "\f0a4";
+} /*  */
+.octicon-chevron-right:before {
+	content: "\f078";
+} /*  */
+.octicon-chevron-up:before {
+	content: "\f0a2";
+} /*  */
+.octicon-circle-slash:before {
+	content: "\f084";
+} /*  */
+.octicon-circuit-board:before {
+	content: "\f0d6";
+} /*  */
+.octicon-clippy:before {
+	content: "\f035";
+} /*  */
+.octicon-clock:before {
+	content: "\f046";
+} /*  */
+.octicon-cloud-download:before {
+	content: "\f00b";
+} /*  */
+.octicon-cloud-upload:before {
+	content: "\f00c";
+} /*  */
+.octicon-code:before {
+	content: "\f05f";
+} /*  */
+.octicon-color-mode:before {
+	content: "\f065";
+} /*  */
 .octicon-comment-add:before,
-.octicon-comment:before { content: '\f02b'} /*  */
-.octicon-comment-discussion:before { content: '\f04f'} /*  */
-.octicon-credit-card:before { content: '\f045'} /*  */
-.octicon-dash:before { content: '\f0ca'} /*  */
-.octicon-dashboard:before { content: '\f07d'} /*  */
-.octicon-database:before { content: '\f096'} /*  */
+.octicon-comment:before {
+	content: "\f02b";
+} /*  */
+.octicon-comment-discussion:before {
+	content: "\f04f";
+} /*  */
+.octicon-credit-card:before {
+	content: "\f045";
+} /*  */
+.octicon-dash:before {
+	content: "\f0ca";
+} /*  */
+.octicon-dashboard:before {
+	content: "\f07d";
+} /*  */
+.octicon-database:before {
+	content: "\f096";
+} /*  */
 .octicon-clone:before,
-.octicon-desktop-download:before { content: '\f0dc'} /*  */
-.octicon-device-camera:before { content: '\f056'} /*  */
-.octicon-device-camera-video:before { content: '\f057'} /*  */
-.octicon-device-desktop:before { content: '\f27c'} /*  */
-.octicon-device-mobile:before { content: '\f038'} /*  */
-.octicon-diff:before { content: '\f04d'} /*  */
-.octicon-diff-added:before { content: '\f06b'} /*  */
-.octicon-diff-ignored:before { content: '\f099'} /*  */
-.octicon-diff-modified:before { content: '\f06d'} /*  */
-.octicon-diff-removed:before { content: '\f06c'} /*  */
-.octicon-diff-renamed:before { content: '\f06e'} /*  */
-.octicon-ellipsis:before { content: '\f09a'} /*  */
+.octicon-desktop-download:before {
+	content: "\f0dc";
+} /*  */
+.octicon-device-camera:before {
+	content: "\f056";
+} /*  */
+.octicon-device-camera-video:before {
+	content: "\f057";
+} /*  */
+.octicon-device-desktop:before {
+	content: "\f27c";
+} /*  */
+.octicon-device-mobile:before {
+	content: "\f038";
+} /*  */
+.octicon-diff:before {
+	content: "\f04d";
+} /*  */
+.octicon-diff-added:before {
+	content: "\f06b";
+} /*  */
+.octicon-diff-ignored:before {
+	content: "\f099";
+} /*  */
+.octicon-diff-modified:before {
+	content: "\f06d";
+} /*  */
+.octicon-diff-removed:before {
+	content: "\f06c";
+} /*  */
+.octicon-diff-renamed:before {
+	content: "\f06e";
+} /*  */
+.octicon-ellipsis:before {
+	content: "\f09a";
+} /*  */
 .octicon-eye-unwatch:before,
 .octicon-eye-watch:before,
-.octicon-eye:before { content: '\f04e'} /*  */
-.octicon-file-binary:before { content: '\f094'} /*  */
-.octicon-file-code:before { content: '\f010'} /*  */
-.octicon-file-directory:before { content: '\f016'} /*  */
-.octicon-file-media:before { content: '\f012'} /*  */
-.octicon-file-pdf:before { content: '\f014'} /*  */
-.octicon-file-submodule:before { content: '\f017'} /*  */
-.octicon-file-symlink-directory:before { content: '\f0b1'} /*  */
-.octicon-file-symlink-file:before { content: '\f0b0'} /*  */
-.octicon-file-text:before { content: '\f011'} /*  */
-.octicon-file-zip:before { content: '\f013'} /*  */
-.octicon-flame:before { content: '\f0d2'} /*  */
-.octicon-fold:before { content: '\f0cc'} /*  */
-.octicon-gear:before { content: '\f02f'} /*  */
-.octicon-gift:before { content: '\f042'} /*  */
-.octicon-gist:before { content: '\f00e'} /*  */
-.octicon-gist-secret:before { content: '\f08c'} /*  */
+.octicon-eye:before {
+	content: "\f04e";
+} /*  */
+.octicon-file-binary:before {
+	content: "\f094";
+} /*  */
+.octicon-file-code:before {
+	content: "\f010";
+} /*  */
+.octicon-file-directory:before {
+	content: "\f016";
+} /*  */
+.octicon-file-media:before {
+	content: "\f012";
+} /*  */
+.octicon-file-pdf:before {
+	content: "\f014";
+} /*  */
+.octicon-file-submodule:before {
+	content: "\f017";
+} /*  */
+.octicon-file-symlink-directory:before {
+	content: "\f0b1";
+} /*  */
+.octicon-file-symlink-file:before {
+	content: "\f0b0";
+} /*  */
+.octicon-file-text:before {
+	content: "\f011";
+} /*  */
+.octicon-file-zip:before {
+	content: "\f013";
+} /*  */
+.octicon-flame:before {
+	content: "\f0d2";
+} /*  */
+.octicon-fold:before {
+	content: "\f0cc";
+} /*  */
+.octicon-gear:before {
+	content: "\f02f";
+} /*  */
+.octicon-gift:before {
+	content: "\f042";
+} /*  */
+.octicon-gist:before {
+	content: "\f00e";
+} /*  */
+.octicon-gist-secret:before {
+	content: "\f08c";
+} /*  */
 .octicon-git-branch-create:before,
 .octicon-git-branch-delete:before,
-.octicon-git-branch:before { content: '\f020'} /*  */
-.octicon-git-commit:before { content: '\f01f'} /*  */
-.octicon-git-compare:before { content: '\f0ac'} /*  */
-.octicon-git-merge:before { content: '\f023'} /*  */
+.octicon-git-branch:before {
+	content: "\f020";
+} /*  */
+.octicon-git-commit:before {
+	content: "\f01f";
+} /*  */
+.octicon-git-compare:before {
+	content: "\f0ac";
+} /*  */
+.octicon-git-merge:before {
+	content: "\f023";
+} /*  */
 .octicon-git-pull-request-abandoned:before,
-.octicon-git-pull-request:before { content: '\f009'} /*  */
-.octicon-globe:before { content: '\f0b6'} /*  */
-.octicon-graph:before { content: '\f043'} /*  */
-.octicon-heart:before { content: '\2665'} /* ♥ */
-.octicon-history:before { content: '\f07e'} /*  */
-.octicon-home:before { content: '\f08d'} /*  */
-.octicon-horizontal-rule:before { content: '\f070'} /*  */
-.octicon-hubot:before { content: '\f09d'} /*  */
-.octicon-inbox:before { content: '\f0cf'} /*  */
-.octicon-info:before { content: '\f059'} /*  */
-.octicon-issue-closed:before { content: '\f028'} /*  */
-.octicon-issue-opened:before { content: '\f026'} /*  */
-.octicon-issue-reopened:before { content: '\f027'} /*  */
-.octicon-jersey:before { content: '\f019'} /*  */
-.octicon-key:before { content: '\f049'} /*  */
-.octicon-keyboard:before { content: '\f00d'} /*  */
-.octicon-law:before { content: '\f0d8'} /*  */
-.octicon-light-bulb:before { content: '\f000'} /*  */
-.octicon-link:before { content: '\f05c'} /*  */
-.octicon-link-external:before { content: '\f07f'} /*  */
-.octicon-list-ordered:before { content: '\f062'} /*  */
-.octicon-list-unordered:before { content: '\f061'} /*  */
-.octicon-location:before { content: '\f060'} /*  */
+.octicon-git-pull-request:before {
+	content: "\f009";
+} /*  */
+.octicon-globe:before {
+	content: "\f0b6";
+} /*  */
+.octicon-graph:before {
+	content: "\f043";
+} /*  */
+.octicon-heart:before {
+	content: "\2665";
+} /* ♥ */
+.octicon-history:before {
+	content: "\f07e";
+} /*  */
+.octicon-home:before {
+	content: "\f08d";
+} /*  */
+.octicon-horizontal-rule:before {
+	content: "\f070";
+} /*  */
+.octicon-hubot:before {
+	content: "\f09d";
+} /*  */
+.octicon-inbox:before {
+	content: "\f0cf";
+} /*  */
+.octicon-info:before {
+	content: "\f059";
+} /*  */
+.octicon-issue-closed:before {
+	content: "\f028";
+} /*  */
+.octicon-issue-opened:before {
+	content: "\f026";
+} /*  */
+.octicon-issue-reopened:before {
+	content: "\f027";
+} /*  */
+.octicon-jersey:before {
+	content: "\f019";
+} /*  */
+.octicon-key:before {
+	content: "\f049";
+} /*  */
+.octicon-keyboard:before {
+	content: "\f00d";
+} /*  */
+.octicon-law:before {
+	content: "\f0d8";
+} /*  */
+.octicon-light-bulb:before {
+	content: "\f000";
+} /*  */
+.octicon-link:before {
+	content: "\f05c";
+} /*  */
+.octicon-link-external:before {
+	content: "\f07f";
+} /*  */
+.octicon-list-ordered:before {
+	content: "\f062";
+} /*  */
+.octicon-list-unordered:before {
+	content: "\f061";
+} /*  */
+.octicon-location:before {
+	content: "\f060";
+} /*  */
 .octicon-gist-private:before,
 .octicon-mirror-private:before,
 .octicon-git-fork-private:before,
-.octicon-lock:before { content: '\f06a'} /*  */
-.octicon-logo-github:before { content: '\f092'} /*  */
-.octicon-mail:before { content: '\f03b'} /*  */
-.octicon-mail-read:before { content: '\f03c'} /*  */
-.octicon-mail-reply:before { content: '\f051'} /*  */
-.octicon-mark-github:before { content: '\f00a'} /*  */
-.octicon-markdown:before { content: '\f0c9'} /*  */
-.octicon-megaphone:before { content: '\f077'} /*  */
-.octicon-mention:before { content: '\f0be'} /*  */
-.octicon-milestone:before { content: '\f075'} /*  */
+.octicon-lock:before {
+	content: "\f06a";
+} /*  */
+.octicon-logo-github:before {
+	content: "\f092";
+} /*  */
+.octicon-mail:before {
+	content: "\f03b";
+} /*  */
+.octicon-mail-read:before {
+	content: "\f03c";
+} /*  */
+.octicon-mail-reply:before {
+	content: "\f051";
+} /*  */
+.octicon-mark-github:before {
+	content: "\f00a";
+} /*  */
+.octicon-markdown:before {
+	content: "\f0c9";
+} /*  */
+.octicon-megaphone:before {
+	content: "\f077";
+} /*  */
+.octicon-mention:before {
+	content: "\f0be";
+} /*  */
+.octicon-milestone:before {
+	content: "\f075";
+} /*  */
 .octicon-mirror-public:before,
-.octicon-mirror:before { content: '\f024'} /*  */
-.octicon-mortar-board:before { content: '\f0d7'} /*  */
-.octicon-mute:before { content: '\f080'} /*  */
-.octicon-no-newline:before { content: '\f09c'} /*  */
-.octicon-octoface:before { content: '\f008'} /*  */
-.octicon-organization:before { content: '\f037'} /*  */
-.octicon-package:before { content: '\f0c4'} /*  */
-.octicon-paintcan:before { content: '\f0d1'} /*  */
-.octicon-pencil:before { content: '\f058'} /*  */
+.octicon-mirror:before {
+	content: "\f024";
+} /*  */
+.octicon-mortar-board:before {
+	content: "\f0d7";
+} /*  */
+.octicon-mute:before {
+	content: "\f080";
+} /*  */
+.octicon-no-newline:before {
+	content: "\f09c";
+} /*  */
+.octicon-octoface:before {
+	content: "\f008";
+} /*  */
+.octicon-organization:before {
+	content: "\f037";
+} /*  */
+.octicon-package:before {
+	content: "\f0c4";
+} /*  */
+.octicon-paintcan:before {
+	content: "\f0d1";
+} /*  */
+.octicon-pencil:before {
+	content: "\f058";
+} /*  */
 .octicon-person-add:before,
 .octicon-person-follow:before,
-.octicon-person:before { content: '\f018'} /*  */
-.octicon-pin:before { content: '\f041'} /*  */
-.octicon-plug:before { content: '\f0d4'} /*  */
+.octicon-person:before {
+	content: "\f018";
+} /*  */
+.octicon-pin:before {
+	content: "\f041";
+} /*  */
+.octicon-plug:before {
+	content: "\f0d4";
+} /*  */
 .octicon-repo-create:before,
 .octicon-gist-new:before,
 .octicon-file-directory-create:before,
 .octicon-file-add:before,
-.octicon-plus:before { content: '\f05d'} /*  */
-.octicon-primitive-dot:before { content: '\f052'} /*  */
-.octicon-primitive-square:before { content: '\f053'} /*  */
-.octicon-pulse:before { content: '\f085'} /*  */
-.octicon-question:before { content: '\f02c'} /*  */
-.octicon-quote:before { content: '\f063'} /*  */
-.octicon-radio-tower:before { content: '\f030'} /*  */
+.octicon-plus:before {
+	content: "\f05d";
+} /*  */
+.octicon-primitive-dot:before {
+	content: "\f052";
+} /*  */
+.octicon-primitive-square:before {
+	content: "\f053";
+} /*  */
+.octicon-pulse:before {
+	content: "\f085";
+} /*  */
+.octicon-question:before {
+	content: "\f02c";
+} /*  */
+.octicon-quote:before {
+	content: "\f063";
+} /*  */
+.octicon-radio-tower:before {
+	content: "\f030";
+} /*  */
 .octicon-repo-delete:before,
-.octicon-repo:before { content: '\f001'} /*  */
-.octicon-repo-clone:before { content: '\f04c'} /*  */
-.octicon-repo-force-push:before { content: '\f04a'} /*  */
+.octicon-repo:before {
+	content: "\f001";
+} /*  */
+.octicon-repo-clone:before {
+	content: "\f04c";
+} /*  */
+.octicon-repo-force-push:before {
+	content: "\f04a";
+} /*  */
 .octicon-gist-fork:before,
-.octicon-repo-forked:before { content: '\f002'} /*  */
-.octicon-repo-pull:before { content: '\f006'} /*  */
-.octicon-repo-push:before { content: '\f005'} /*  */
-.octicon-rocket:before { content: '\f033'} /*  */
-.octicon-rss:before { content: '\f034'} /*  */
-.octicon-ruby:before { content: '\f047'} /*  */
-.octicon-screen-full:before { content: '\f066'} /*  */
-.octicon-screen-normal:before { content: '\f067'} /*  */
+.octicon-repo-forked:before {
+	content: "\f002";
+} /*  */
+.octicon-repo-pull:before {
+	content: "\f006";
+} /*  */
+.octicon-repo-push:before {
+	content: "\f005";
+} /*  */
+.octicon-rocket:before {
+	content: "\f033";
+} /*  */
+.octicon-rss:before {
+	content: "\f034";
+} /*  */
+.octicon-ruby:before {
+	content: "\f047";
+} /*  */
+.octicon-screen-full:before {
+	content: "\f066";
+} /*  */
+.octicon-screen-normal:before {
+	content: "\f067";
+} /*  */
 .octicon-search-save:before,
-.octicon-search:before { content: '\f02e'} /*  */
-.octicon-server:before { content: '\f097'} /*  */
-.octicon-settings:before { content: '\f07c'} /*  */
-.octicon-shield:before { content: '\f0e1'} /*  */
+.octicon-search:before {
+	content: "\f02e";
+} /*  */
+.octicon-server:before {
+	content: "\f097";
+} /*  */
+.octicon-settings:before {
+	content: "\f07c";
+} /*  */
+.octicon-shield:before {
+	content: "\f0e1";
+} /*  */
 .octicon-log-in:before,
-.octicon-sign-in:before { content: '\f036'} /*  */
+.octicon-sign-in:before {
+	content: "\f036";
+} /*  */
 .octicon-log-out:before,
-.octicon-sign-out:before { content: '\f032'} /*  */
-.octicon-squirrel:before { content: '\f0b2'} /*  */
+.octicon-sign-out:before {
+	content: "\f032";
+} /*  */
+.octicon-squirrel:before {
+	content: "\f0b2";
+} /*  */
 .octicon-star-add:before,
 .octicon-star-delete:before,
-.octicon-star:before { content: '\f02a'} /*  */
-.octicon-stop:before { content: '\f08f'} /*  */
+.octicon-star:before {
+	content: "\f02a";
+} /*  */
+.octicon-stop:before {
+	content: "\f08f";
+} /*  */
 .octicon-repo-sync:before,
-.octicon-sync:before { content: '\f087'} /*  */
+.octicon-sync:before {
+	content: "\f087";
+} /*  */
 .octicon-tag-remove:before,
 .octicon-tag-add:before,
-.octicon-tag:before { content: '\f015'} /*  */
-.octicon-telescope:before { content: '\f088'} /*  */
-.octicon-terminal:before { content: '\f0c8'} /*  */
-.octicon-three-bars:before { content: '\f05e'} /*  */
-.octicon-thumbsdown:before { content: '\f0db'} /*  */
-.octicon-thumbsup:before { content: '\f0da'} /*  */
-.octicon-tools:before { content: '\f031'} /*  */
-.octicon-trashcan:before { content: '\f0d0'} /*  */
-.octicon-triangle-down:before { content: '\f05b'} /*  */
-.octicon-triangle-left:before { content: '\f044'} /*  */
-.octicon-triangle-right:before { content: '\f05a'} /*  */
-.octicon-triangle-up:before { content: '\f0aa'} /*  */
-.octicon-unfold:before { content: '\f039'} /*  */
-.octicon-unmute:before { content: '\f0ba'} /*  */
-.octicon-versions:before { content: '\f064'} /*  */
-.octicon-watch:before { content: '\f0e0'} /*  */
+.octicon-tag:before {
+	content: "\f015";
+} /*  */
+.octicon-telescope:before {
+	content: "\f088";
+} /*  */
+.octicon-terminal:before {
+	content: "\f0c8";
+} /*  */
+.octicon-three-bars:before {
+	content: "\f05e";
+} /*  */
+.octicon-thumbsdown:before {
+	content: "\f0db";
+} /*  */
+.octicon-thumbsup:before {
+	content: "\f0da";
+} /*  */
+.octicon-tools:before {
+	content: "\f031";
+} /*  */
+.octicon-trashcan:before {
+	content: "\f0d0";
+} /*  */
+.octicon-triangle-down:before {
+	content: "\f05b";
+} /*  */
+.octicon-triangle-left:before {
+	content: "\f044";
+} /*  */
+.octicon-triangle-right:before {
+	content: "\f05a";
+} /*  */
+.octicon-triangle-up:before {
+	content: "\f0aa";
+} /*  */
+.octicon-unfold:before {
+	content: "\f039";
+} /*  */
+.octicon-unmute:before {
+	content: "\f0ba";
+} /*  */
+.octicon-versions:before {
+	content: "\f064";
+} /*  */
+.octicon-watch:before {
+	content: "\f0e0";
+} /*  */
 .octicon-remove-close:before,
-.octicon-x:before { content: '\f081'} /*  */
-.octicon-zap:before { content: '\26A1'} /* ⚡ */
+.octicon-x:before {
+	content: "\f081";
+} /*  */
+.octicon-zap:before {
+	content: "\26A1";
+} /* ⚡ */
diff --git a/frappe/public/scss/common/alert.scss b/frappe/public/scss/common/alert.scss
index ba026fa48a..1d2cbf59af 100644
--- a/frappe/public/scss/common/alert.scss
+++ b/frappe/public/scss/common/alert.scss
@@ -9,4 +9,4 @@ $alert-types: info, success, warning, danger;
 			border: none;
 		}
 	}
-}
\ No newline at end of file
+}
diff --git a/frappe/public/scss/common/awesomeplete.scss b/frappe/public/scss/common/awesomeplete.scss
index d424961376..2ec7c62253 100644
--- a/frappe/public/scss/common/awesomeplete.scss
+++ b/frappe/public/scss/common/awesomeplete.scss
@@ -8,15 +8,15 @@
 		clip: rect(0, 0, 0, 0);
 	}
 
-	&> input {
+	& > input {
 		display: block;
 	}
 
-	&> ul:empty {
+	& > ul:empty {
 		display: none;
 	}
 
-	&> ul {
+	& > ul {
 		position: absolute;
 		width: 100%;
 		list-style: none;
@@ -33,7 +33,7 @@
 		z-index: 4;
 		min-width: 250px;
 
-		&> li {
+		& > li {
 			cursor: pointer;
 			@include get_textstyle("sm", "regular");
 			padding: var(--padding-sm);
@@ -54,12 +54,13 @@
 			}
 		}
 
-		&> li .link-option {
+		& > li .link-option {
 			font-weight: normal;
 			color: var(--text-color);
 		}
 
-		&> li:hover, &> li[aria-selected=true] {
+		& > li:hover,
+		& > li[aria-selected="true"] {
 			background-color: var(--awesomplete-hover-bg);
 			color: var(--text-color);
 		}
@@ -68,4 +69,4 @@
 			text-decoration: none;
 		}
 	}
-}
\ No newline at end of file
+}
diff --git a/frappe/public/scss/common/buttons.scss b/frappe/public/scss/common/buttons.scss
index ddc6c9fdbb..672498ada3 100644
--- a/frappe/public/scss/common/buttons.scss
+++ b/frappe/public/scss/common/buttons.scss
@@ -24,7 +24,8 @@
 		height: var(--btn-height);
 		padding: 0px;
 		@extend .center-content;
-		&.btn-default, &.btn-secondary {
+		&.btn-default,
+		&.btn-secondary {
 			min-width: 28px;
 		}
 	}
@@ -41,7 +42,9 @@
 	);
 
 	color: $white;
-	&:hover, &:active, &:focus {
+	&:hover,
+	&:active,
+	&:focus {
 		color: $white;
 	}
 	.icon {
@@ -61,7 +64,8 @@
 	);
 
 	color: var(--primary);
-	&:hover, &:active {
+	&:hover,
+	&:active {
 		color: var(--primary);
 	}
 
@@ -73,7 +77,8 @@
 .btn.btn-secondary {
 	background-color: var(--control-bg);
 	color: var(--text-color);
-	&:hover, &:active {
+	&:hover,
+	&:active {
 		background-color: var(--btn-default-hover-bg);
 		color: var(--text-color);
 	}
@@ -82,7 +87,8 @@
 .btn.btn-default {
 	background-color: var(--control-bg);
 	color: var(--text-color);
-	&:hover, &:active {
+	&:hover,
+	&:active {
 		background: var(--btn-default-hover-bg);
 		color: var(--text-color);
 	}
@@ -120,7 +126,7 @@
 		box-shadow: none;
 	}
 	.btn-primary:active {
-			color: var(--gray-900) !important;
-			background-color: var(--invert-neutral) !important;
+		color: var(--gray-900) !important;
+		background-color: var(--invert-neutral) !important;
 	}
 }
diff --git a/frappe/public/scss/common/color_picker.scss b/frappe/public/scss/common/color_picker.scss
index 2e53150a41..f80057f5b3 100644
--- a/frappe/public/scss/common/color_picker.scss
+++ b/frappe/public/scss/common/color_picker.scss
@@ -19,7 +19,8 @@
 		cursor: pointer;
 	}
 
-	.color-selector, .hue-selector {
+	.color-selector,
+	.hue-selector {
 		width: 12px;
 		height: 12px;
 		background: transparent;
@@ -27,11 +28,12 @@
 		border-radius: 50%;
 		/* box-shadow: 0 0 0 1px gray, 0 0 0 3px white, 0 0 0 4px gray; */
 		border: 1px solid rgba(0, 0, 0, 0.2);
-		&::before, &::after {
+		&::before,
+		&::after {
 			position: absolute;
 			background-color: transparent;
 			border: 1px solid rgba(0, 0, 0, 0.2);
-			content: ' ';
+			content: " ";
 			border-radius: 50%;
 		}
 
@@ -74,8 +76,8 @@
 		position: relative;
 		background: linear-gradient(
 			90deg,
-			hsl(0,   100%, 50%),
-			hsl(60,  100%, 50%),
+			hsl(0, 100%, 50%),
+			hsl(60, 100%, 50%),
 			hsl(120, 100%, 50%),
 			hsl(180, 100%, 50%),
 			hsl(240, 100%, 50%),
@@ -92,7 +94,7 @@
 	}
 }
 
-.frappe-control[data-fieldtype='Color'] {
+.frappe-control[data-fieldtype="Color"] {
 	input {
 		padding-left: 38px;
 	}
@@ -108,9 +110,9 @@
 		position: absolute;
 		top: 5px;
 		left: 8px;
-		content: ' ';
+		content: " ";
 		&.no-value {
-			background: url('/assets/frappe/images/color-circle.png');
+			background: url("/assets/frappe/images/color-circle.png");
 			background-size: contain;
 		}
 	}
diff --git a/frappe/public/scss/common/controls.scss b/frappe/public/scss/common/controls.scss
index c77c1319cd..fd75433a36 100644
--- a/frappe/public/scss/common/controls.scss
+++ b/frappe/public/scss/common/controls.scss
@@ -125,7 +125,8 @@ select.form-control {
 		}
 	}
 
-	.selectable-item:hover, .selectable-item.highlighted {
+	.selectable-item:hover,
+	.selectable-item.highlighted {
 		background-color: var(--fg-hover-color);
 	}
 
@@ -142,7 +143,7 @@ select.form-control {
 .frappe-control {
 	@include get_textstyle("base", "regular");
 	.control-label.reqd:after {
-		content: ' *';
+		content: " *";
 		color: var(--red-400);
 	}
 	.help:empty {
@@ -193,7 +194,7 @@ select.form-control {
 	}
 }
 
-.frappe-control:not([data-fieldtype='MultiSelectPills']):not([data-fieldtype='Table MultiSelect']) {
+.frappe-control:not([data-fieldtype="MultiSelectPills"]):not([data-fieldtype="Table MultiSelect"]) {
 	&.has-error {
 		input {
 			border: 1px solid var(--error-border);
@@ -205,8 +206,8 @@ select.form-control {
 	}
 }
 
-.frappe-control[data-fieldtype='MultiSelectPills'],
-.frappe-control[data-fieldtype='Table MultiSelect'] {
+.frappe-control[data-fieldtype="MultiSelectPills"],
+.frappe-control[data-fieldtype="Table MultiSelect"] {
 	&.has-error {
 		.control-input {
 			border: 1px solid var(--error-border);
@@ -257,7 +258,8 @@ select.form-control {
 }
 
 /* progress bar */
-.progress, .progress-bar {
+.progress,
+.progress-bar {
 	box-shadow: none;
 }
 
@@ -361,7 +363,8 @@ textarea.form-control {
 	overflow-wrap: break-word;
 }
 
-.frappe-control[data-fieldtype="Data"] .control-input, .control-value {
+.frappe-control[data-fieldtype="Data"] .control-input,
+.control-value {
 	position: relative;
 }
 
@@ -372,26 +375,30 @@ textarea.form-control {
 	padding: 3px;
 }
 
-.markdown-preview, .html-preview {
+.markdown-preview,
+.html-preview {
 	padding: var(--padding-md);
 	min-height: 300px;
 	max-height: 600px;
 	overflow: auto;
 }
 
-.markdown-toggle, .html-toggle {
+.markdown-toggle,
+.html-toggle {
 	margin-bottom: var(--margin-xs);
 }
 
 .barcode-scanner {
 	position: relative;
 
-	& > canvas, & > video {
+	& > canvas,
+	& > video {
 		max-width: 100%;
 		width: 100%;
 	}
 
-	canvas.drawing, canvas.drawingBuffer {
+	canvas.drawing,
+	canvas.drawingBuffer {
 		position: absolute;
 		left: 0;
 		top: 0;
diff --git a/frappe/public/scss/common/css_variables.scss b/frappe/public/scss/common/css_variables.scss
index 2e0e4db11c..1881aebea1 100644
--- a/frappe/public/scss/common/css_variables.scss
+++ b/frappe/public/scss/common/css_variables.scss
@@ -19,12 +19,10 @@ $disabled-input-height: 22px;
 	--margin-xl: 30px;
 	--margin-2xl: 40px;
 
-
 	--modal-shadow: var(--shadow-md);
 	--card-shadow: var(--shadow-sm);
 	--btn-shadow: var(--shadow-xs);
 
-
 	// navbar
 	--navbar-height: 48px;
 
@@ -50,8 +48,6 @@ $disabled-input-height: 22px;
 	--bg-pink: var(--pink-50);
 	--bg-cyan: var(--cyan-50);
 
-
-
 	--text-on-blue: var(--blue-700);
 	--text-on-light-blue: var(--blue-600);
 	--text-on-dark-blue: var(--blue-800);
@@ -128,7 +124,6 @@ $disabled-input-height: 22px;
 	--code-block-bg: var(--gray-900);
 	--code-block-text: var(--gray-400);
 
-
 	--primary-color: var(--gray-900);
 	--btn-height: 28px;
 
@@ -143,8 +138,11 @@ $disabled-input-height: 22px;
 
 	--checkbox-focus-shadow: 0 0 0 2px var(--gray-300);
 	--checkbox-gradient: linear-gradient(180deg, var(--primary) -124.51%, var(--primary) 100%);
-	--checkbox-disabled-gradient: linear-gradient(180deg, var(--disabled-control-bg) -124.51%, var(--disabled-control-bg) 100%);
-
+	--checkbox-disabled-gradient: linear-gradient(
+		180deg,
+		var(--disabled-control-bg) -124.51%,
+		var(--disabled-control-bg) 100%
+	);
 
 	// switch
 	--switch-bg: var(--gray-300);
diff --git a/frappe/public/scss/common/datepicker.scss b/frappe/public/scss/common/datepicker.scss
index f60f1c25f5..77ed7d622b 100644
--- a/frappe/public/scss/common/datepicker.scss
+++ b/frappe/public/scss/common/datepicker.scss
@@ -20,11 +20,14 @@
 	&--nav {
 		border-bottom: 1px solid var(--border-color);
 	}
-	&--nav-title:hover, &--nav-action:hover {
+	&--nav-title:hover,
+	&--nav-action:hover {
 		background-color: var(--fg-hover-color);
 	}
 
-	&--time-current-hours, &--time-current-minutes, &--time-current-seconds {
+	&--time-current-hours,
+	&--time-current-minutes,
+	&--time-current-seconds {
 		font-family: inherit;
 		&:after {
 			color: var(--text-color);
@@ -48,12 +51,14 @@
 			}
 		}
 
-		&.-range-from-, &.-range-to- {
+		&.-range-from-,
+		&.-range-to- {
 			border: 1px solid var(--border-color);
 			background: var(--date-range-bg);
 		}
 
-		&.-selected-, &.-current-.-selected- {
+		&.-selected-,
+		&.-current-.-selected- {
 			color: var(--date-active-text);
 			background: var(--date-active-bg);
 			border-radius: var(--border-radius-tiny);
@@ -79,7 +84,8 @@
 		}
 	}
 
-	&--time, &--buttons {
+	&--time,
+	&--buttons {
 		border-top: 1px solid var(--border-color);
 	}
 
@@ -109,4 +115,3 @@
 		}
 	}
 }
-
diff --git a/frappe/public/scss/common/flex.scss b/frappe/public/scss/common/flex.scss
index 97d01f4f63..1d1917d17c 100644
--- a/frappe/public/scss/common/flex.scss
+++ b/frappe/public/scss/common/flex.scss
@@ -24,7 +24,7 @@
 }
 
 .justify-between {
-	justify-content: space-between
+	justify-content: space-between;
 }
 
 .justify-flex-end {
@@ -51,7 +51,8 @@
 	align-items: center;
 }
 
-.level-left, .level-right {
+.level-left,
+.level-right {
 	display: flex;
 	flex-basis: auto;
 	flex-grow: 0;
@@ -84,5 +85,5 @@
 }
 
 .fill-width {
-	flex: 1
+	flex: 1;
 }
diff --git a/frappe/public/scss/common/form.scss b/frappe/public/scss/common/form.scss
index 37bd915857..028d2770f8 100644
--- a/frappe/public/scss/common/form.scss
+++ b/frappe/public/scss/common/form.scss
@@ -27,4 +27,4 @@
 	font-size: var(--text-xl);
 	font-weight: 700;
 	color: var(--heading-color);
-}
\ No newline at end of file
+}
diff --git a/frappe/public/scss/common/global.scss b/frappe/public/scss/common/global.scss
index 881dc8a19e..41d145e52e 100644
--- a/frappe/public/scss/common/global.scss
+++ b/frappe/public/scss/common/global.scss
@@ -1,7 +1,8 @@
 @import "../element/checkbox";
 @import "../element/radio";
 
-html, body {
+html,
+body {
 	height: 100%;
 	font-family: var(--font-stack);
 	font-variation-settings: "opsz" 24;
@@ -21,7 +22,8 @@ html, body {
 		color: var(--text-color);
 	}
 
-	.input-area, .disp-area {
+	.input-area,
+	.disp-area {
 		display: flex;
 	}
 }
@@ -57,7 +59,6 @@ html, body {
 		-moz-appearance: none;
 		/* for Chrome */
 		-webkit-appearance: none;
-
 	}
 
 	.select-icon {
@@ -134,7 +135,8 @@ html, body {
 .btn-link {
 	box-shadow: none !important;
 	outline: none;
-	.icon, &:hover {
+	.icon,
+	&:hover {
 		text-decoration: none !important;
 	}
 }
diff --git a/frappe/public/scss/common/grid.scss b/frappe/public/scss/common/grid.scss
index 5ac43a177e..a51c727b24 100644
--- a/frappe/public/scss/common/grid.scss
+++ b/frappe/public/scss/common/grid.scss
@@ -31,15 +31,17 @@
 		}
 	}
 
-	.grid-static-col, .row-check, .row-index {
+	.grid-static-col,
+	.row-check,
+	.row-index {
 		height: 32px;
 		padding: 6px 8px !important;
 	}
 	.grid-static-col {
 		padding: 6px 8px !important;
-		.static-area{
+		.static-area {
 			&.reqd:after {
-				content: ' *';
+				content: " *";
 				color: var(--red-400);
 			}
 		}
@@ -69,7 +71,8 @@
 }
 
 // hide row index in 6/4 column child tables
-.form-column.col-sm-6, .form-column.col-sm-4 {
+.form-column.col-sm-6,
+.form-column.col-sm-4 {
 	.form-grid {
 		.row-index {
 			display: none;
@@ -98,7 +101,7 @@
 
 .grid-body .data-row {
 	@include get_textstyle("sm", "regular");
-	color: var(--text-muted)
+	color: var(--text-muted);
 }
 
 .grid-empty,
@@ -219,7 +222,7 @@
 			padding: 0px !important;
 		}
 
-		.frappe-control[data-fieldtype=Select].form-group .select-icon {
+		.frappe-control[data-fieldtype="Select"].form-group .select-icon {
 			top: 9px;
 		}
 
@@ -287,7 +290,8 @@
 		margin-left: 1rem;
 	}
 
-	.grid-static-col[data-fieldtype="Code"], .grid-static-col[data-fieldtype="HTML Editor"] {
+	.grid-static-col[data-fieldtype="Code"],
+	.grid-static-col[data-fieldtype="HTML Editor"] {
 		overflow: hidden;
 
 		.static-area {
@@ -450,7 +454,8 @@
 	}
 }
 
-.grid-buttons, .grid-bulk-actions {
+.grid-buttons,
+.grid-bulk-actions {
 	display: inline-flex;
 }
 
@@ -460,7 +465,8 @@
 .grid-footer {
 	margin-top: var(--margin-sm);
 }
-.grid-footer, .grid-custom-buttons {
+.grid-footer,
+.grid-custom-buttons {
 	padding: var(--padding-sm) 0px;
 	background-color: var(--fg-color);
 	.btn {
@@ -517,8 +523,7 @@
 }
 
 .grid-footer-toolbar {
-	padding: var(--padding-md) var(--padding-sm) var(--padding-xs)
-		var(--padding-sm);
+	padding: var(--padding-md) var(--padding-sm) var(--padding-xs) var(--padding-sm);
 	// border-top: 1px solid var(--border-color);
 	span {
 		margin-right: var(--margin-xs);
@@ -565,10 +570,10 @@
 
 @media (min-width: map-get($grid-breakpoints, "md")) {
 	.form-grid-container {
-		overflow-x: unset!important;
+		overflow-x: unset !important;
 
 		.form-grid {
-			position: unset!important;
+			position: unset !important;
 		}
 	}
 }
@@ -579,4 +584,3 @@
 		padding-right: 0 !important;
 	}
 }
-
diff --git a/frappe/public/scss/common/icon_picker.scss b/frappe/public/scss/common/icon_picker.scss
index eae078cfe9..4c7cd1ebef 100644
--- a/frappe/public/scss/common/icon_picker.scss
+++ b/frappe/public/scss/common/icon_picker.scss
@@ -12,8 +12,8 @@
 		cursor: pointer;
 
 		/* Hide scrollbar for IE, Edge and Firefox */
-		-ms-overflow-style: none;  /* IE and Edge */
-		scrollbar-width: none;  /* Firefox */
+		-ms-overflow-style: none; /* IE and Edge */
+		scrollbar-width: none; /* Firefox */
 
 		/* Hide scrollbar for Chrome, Safari and Opera */
 		&::-webkit-scrollbar {
@@ -32,7 +32,7 @@
 	.search-icons {
 		position: relative;
 
-		input[type='search'] {
+		input[type="search"] {
 			height: inherit;
 			padding-left: 30px;
 		}
@@ -50,7 +50,7 @@
 	}
 }
 
-.frappe-control[data-fieldtype='Icon'] {
+.frappe-control[data-fieldtype="Icon"] {
 	input {
 		padding-left: 40px;
 	}
@@ -62,7 +62,7 @@
 		position: absolute;
 		top: calc(50% + 2px);
 		left: 8px;
-		content: ' ';
+		content: " ";
 	}
 	.like-disabled-input {
 		.icon-value {
@@ -88,8 +88,9 @@
 	}
 }
 
-.dt-cell__edit, .filter-field {
+.dt-cell__edit,
+.filter-field {
 	.selected-icon {
 		top: 5px !important;
 	}
-}
\ No newline at end of file
+}
diff --git a/frappe/public/scss/common/icons.scss b/frappe/public/scss/common/icons.scss
index 21054f3a68..a8c17e9f83 100644
--- a/frappe/public/scss/common/icons.scss
+++ b/frappe/public/scss/common/icons.scss
@@ -76,4 +76,4 @@ use.like-icon {
 
 .no-stroke {
 	stroke: none;
-}
\ No newline at end of file
+}
diff --git a/frappe/public/scss/common/indicator.scss b/frappe/public/scss/common/indicator.scss
index c178dbaf70..da9e26dba0 100644
--- a/frappe/public/scss/common/indicator.scss
+++ b/frappe/public/scss/common/indicator.scss
@@ -7,7 +7,7 @@
 }
 
 .indicator::before {
-	content: '';
+	content: "";
 	height: 8px;
 	width: 8px;
 	border-radius: var(--border-radius);
@@ -17,7 +17,7 @@
 .indicator-pill-right {
 	@include get_textstyle("sm", "regular");
 	padding: 4.5px 8px;
-	border-radius: var( --border-radius-full);
+	border-radius: var(--border-radius-full);
 	height: 20px;
 }
 
@@ -31,7 +31,7 @@
 
 .indicator-pill:not(.no-indicator-dot)::before,
 .indicator-pill-right::after {
-	content:'';
+	content: "";
 	display: inline-table;
 	height: 6px;
 	width: 6px;
@@ -48,7 +48,8 @@
 	margin: 0 0 0 4px;
 }
 
-$indicator-colors: green, cyan, blue, orange, yellow, gray, grey, red, pink, darkgrey, purple, light-blue;
+$indicator-colors: green, cyan, blue, orange, yellow, gray, grey, red, pink, darkgrey, purple,
+	light-blue;
 @each $color in $indicator-colors {
 	.indicator.#{"" + $color} {
 		&::before,
@@ -72,11 +73,12 @@ $indicator-colors: green, cyan, blue, orange, yellow, gray, grey, red, pink, dar
 	}
 }
 
-
 .indicator.blink {
 	animation: blink 1s linear infinite;
 }
 
 @keyframes blink {
-	50% { opacity: 0.5; }
+	50% {
+		opacity: 0.5;
+	}
 }
diff --git a/frappe/public/scss/common/mixins.scss b/frappe/public/scss/common/mixins.scss
index 55b54d9de3..d4f2102382 100644
--- a/frappe/public/scss/common/mixins.scss
+++ b/frappe/public/scss/common/mixins.scss
@@ -1,9 +1,4 @@
-@mixin flex(
-	$dis: flex,
-	$x: center,
-	$y: center,
-	$dir: row
-) {
+@mixin flex($dis: flex, $x: center, $y: center, $dir: row) {
 	display: $dis;
 	justify-content: $x;
 	align-items: $y;
@@ -43,7 +38,7 @@
 	$top: 0,
 	$left: 0,
 	$background-color: var(--bg-color),
-	$border-radius: var(--border-radius),
+	$border-radius: var(--border-radius)
 ) {
 	// Deprecated: Does not work as expected anymore. Also, this never worked in Safari.
-}
\ No newline at end of file
+}
diff --git a/frappe/public/scss/common/modal.scss b/frappe/public/scss/common/modal.scss
index 3d5624237a..b2e888a41d 100644
--- a/frappe/public/scss/common/modal.scss
+++ b/frappe/public/scss/common/modal.scss
@@ -21,7 +21,7 @@ body.modal-open[style^="padding-right"] {
 	}
 
 	// Hide scrollbar on touch devices
-	@media(max-width: 991px) {
+	@media (max-width: 991px) {
 		scrollbar-width: none;
 		&::-webkit-scrollbar {
 			width: 0;
@@ -147,7 +147,6 @@ body.modal-open[style^="padding-right"] {
 	.hasDatepicker {
 		z-index: 1140;
 	}
-
 }
 
 .modal-backdrop.show {
@@ -203,7 +202,8 @@ body.modal-open[style^="padding-right"] {
 		}
 	}
 
-	.modal-body, .modal-footer {
+	.modal-body,
+	.modal-footer {
 		display: none;
 	}
 }
@@ -244,7 +244,7 @@ body.modal-open[style^="padding-right"] {
 			margin-bottom: -24px;
 			button {
 				// same as form-control input
-				height: calc(1.5em + .7rem);
+				height: calc(1.5em + 0.7rem);
 			}
 		}
 	}
@@ -285,7 +285,7 @@ body.modal-open[style^="padding-right"] {
 	@extend .row;
 	.btn-group {
 		opacity: 0;
-		transition: opacity .3s ease-in-out;
+		transition: opacity 0.3s ease-in-out;
 
 		button {
 			display: inline-flex;
diff --git a/frappe/public/scss/common/phone_picker.scss b/frappe/public/scss/common/phone_picker.scss
index f2131e8b84..2d865559d5 100644
--- a/frappe/public/scss/common/phone_picker.scss
+++ b/frappe/public/scss/common/phone_picker.scss
@@ -12,8 +12,8 @@
 		cursor: pointer;
 
 		/* Hide scrollbar for IE, Edge and Firefox */
-		-ms-overflow-style: none;  /* IE and Edge */
-		scrollbar-width: none;  /* Firefox */
+		-ms-overflow-style: none; /* IE and Edge */
+		scrollbar-width: none; /* Firefox */
 
 		/* Hide scrollbar for Chrome, Safari and Opera */
 		&::-webkit-scrollbar {
@@ -44,7 +44,7 @@
 	.search-phones {
 		position: relative;
 
-		input[type='search'] {
+		input[type="search"] {
 			height: inherit;
 			padding-left: 30px;
 		}
@@ -59,7 +59,7 @@
 
 .phone-picker-popover {
 	max-width: 325px;
-    left: 29px !important;
+	left: 29px !important;
 	.picker-arrow {
 		left: 15px !important;
 	}
@@ -69,9 +69,7 @@
 	}
 }
 
-
-.frappe-control[data-fieldtype='Phone']
-{
+.frappe-control[data-fieldtype="Phone"] {
 	input {
 		padding-left: 30px;
 	}
@@ -83,7 +81,7 @@
 		position: absolute;
 		top: calc(50% + 2px);
 		left: 8px;
-		content: ' ';
+		content: " ";
 		align-items: center;
 		z-index: 1;
 
@@ -97,7 +95,6 @@
 		img {
 			height: 15px;
 		}
-
 	}
 	.like-disabled-input {
 		.phone-value {
@@ -111,12 +108,11 @@
 }
 
 .modal-body {
-	.frappe-control[data-fieldtype='Phone']
-		{
-			.selected-phone {
-				top: calc(50% - 0.5px);
-			}
+	.frappe-control[data-fieldtype="Phone"] {
+		.selected-phone {
+			top: calc(50% - 0.5px);
 		}
+	}
 }
 
 .data-row.row {
@@ -128,7 +124,7 @@
 
 .bg-gray-100 {
 	--tw-bg-opacity: 1;
-	background-color: rgba(244,245,246,var(--tw-bg-opacity));
+	background-color: rgba(244, 245, 246, var(--tw-bg-opacity));
 }
 
 .dt-cell__content {
@@ -137,7 +133,8 @@
 	}
 }
 
-.dt-cell__edit, .filter-field {
+.dt-cell__edit,
+.filter-field {
 	.selected-phone {
 		top: 5.5px !important;
 	}
diff --git a/frappe/public/scss/common/quill.scss b/frappe/public/scss/common/quill.scss
index b805c15a17..135fe0dcf8 100644
--- a/frappe/public/scss/common/quill.scss
+++ b/frappe/public/scss/common/quill.scss
@@ -1,5 +1,5 @@
-@import '~quill/dist/quill.snow';
-@import '~quill/dist/quill.bubble';
+@import "~quill/dist/quill.snow";
+@import "~quill/dist/quill.bubble";
 
 .ql-toolbar.ql-snow,
 .ql-container.ql-snow {
@@ -158,7 +158,6 @@
 		color: var(--text-color);
 		box-shadow: var(--shadow-base);
 	}
-
 }
 
 .print-format {
@@ -208,7 +207,7 @@
 	color: var(--code-block-text);
 	padding: var(--padding-xs) var(--padding-sm) !important;
 	margin-bottom: var(--margin-xs) !important;
-	margin-top: var(--margin-xs)!important;
+	margin-top: var(--margin-xs) !important;
 	border-radius: var(--border-radius-sm);
 }
 
@@ -262,33 +261,33 @@
 	width: 66px;
 
 	.ql-picker-label::before {
-		content: 'Table';
+		content: "Table";
 	}
 
 	.ql-picker-options {
-		[data-value='insert-table']::before {
-			content: 'Insert Table';
+		[data-value="insert-table"]::before {
+			content: "Insert Table";
 		}
-		[data-value='insert-row-above']::before {
-			content: 'Insert Row Above';
+		[data-value="insert-row-above"]::before {
+			content: "Insert Row Above";
 		}
-		[data-value='insert-row-below']::before {
-			content: 'Insert Row Below';
+		[data-value="insert-row-below"]::before {
+			content: "Insert Row Below";
 		}
-		[data-value='insert-column-right']::before {
-			content: 'Insert Column Right';
+		[data-value="insert-column-right"]::before {
+			content: "Insert Column Right";
 		}
-		[data-value='insert-column-left']::before {
-			content: 'Insert Column Left';
+		[data-value="insert-column-left"]::before {
+			content: "Insert Column Left";
 		}
-		[data-value='delete-row']::before {
-			content: 'Delete Row';
+		[data-value="delete-row"]::before {
+			content: "Delete Row";
 		}
-		[data-value='delete-column']::before {
-			content: 'Delete Column';
+		[data-value="delete-column"]::before {
+			content: "Delete Column";
 		}
-		[data-value='delete-table']::before {
-			content: 'Delete Table';
+		[data-value="delete-table"]::before {
+			content: "Delete Table";
 		}
 	}
 }
@@ -313,7 +312,6 @@
 	}
 }
 
-
 .ql-mention-list {
 	border-radius: var(--border-radius-sm);
 	list-style: none;
@@ -323,7 +321,7 @@
 	overflow: scroll;
 }
 
-.mention>span {
+.mention > span {
 	margin: 0 3px;
 }
 
@@ -338,4 +336,4 @@
 	left: 8px;
 	color: var(--text-muted);
 	font-style: normal;
-}
\ No newline at end of file
+}
diff --git a/frappe/public/scss/desk.bundle.scss b/frappe/public/scss/desk.bundle.scss
index 6b192bb3ff..82fb24319d 100644
--- a/frappe/public/scss/desk.bundle.scss
+++ b/frappe/public/scss/desk.bundle.scss
@@ -8,4 +8,4 @@
 @import "frappe/public/js/lib/leaflet/leaflet.css";
 @import "frappe/public/js/lib/leaflet_easy_button/easy-button.css";
 @import "frappe/public/js/lib/leaflet_control_locate/L.Control.Locate.css";
-@import "frappe/public/js/lib/leaflet_draw/leaflet.draw.css";
\ No newline at end of file
+@import "frappe/public/js/lib/leaflet_draw/leaflet.draw.css";
diff --git a/frappe/public/scss/desk/avatar.scss b/frappe/public/scss/desk/avatar.scss
index 1572ce8fe9..005cd62a0c 100644
--- a/frappe/public/scss/desk/avatar.scss
+++ b/frappe/public/scss/desk/avatar.scss
@@ -166,7 +166,6 @@
 		margin-right: var(--margin-xs);
 	}
 
-
 	.avatar-action {
 		@extend .avatar-small;
 		display: flex;
diff --git a/frappe/public/scss/desk/calendar.scss b/frappe/public/scss/desk/calendar.scss
index c506e63fbc..804006fe64 100644
--- a/frappe/public/scss/desk/calendar.scss
+++ b/frappe/public/scss/desk/calendar.scss
@@ -59,12 +59,12 @@ th.fc-widget-header {
 }
 
 // .fc-highlight {
-	// background-color: $light-yellow !important;
+// background-color: $light-yellow !important;
 // }
 
 .fc-event {
 	// border: 1px solid #E8DDFF; /* default BORDER color */
-	background-color: #E8DDFF;
+	background-color: #e8ddff;
 }
 
 .fc-time-grid-event {
@@ -137,7 +137,6 @@ th.fc-day-header {
 	// }
 }
 
-
 .fc-state-active {
 	box-shadow: none !important;
 	background: var(--gray-500) !important;
@@ -164,7 +163,8 @@ th.fc-day-header {
 }
 
 .fc-left {
-	.fc-prev-button, .fc-next-button {
+	.fc-prev-button,
+	.fc-next-button {
 		width: 28px;
 		display: flex;
 		justify-content: center;
@@ -205,4 +205,3 @@ th.fc-day-header {
 .fc-now-indicator-arrow {
 	display: none !important;
 }
-
diff --git a/frappe/public/scss/desk/css_variables.scss b/frappe/public/scss/desk/css_variables.scss
index 7e8adf7459..0694bec98d 100644
--- a/frappe/public/scss/desk/css_variables.scss
+++ b/frappe/public/scss/desk/css_variables.scss
@@ -1,17 +1,14 @@
-@import '../common/css_variables.scss';
+@import "../common/css_variables.scss";
 
 :root,
 [data-theme="light"] {
 	// breakpoints
-	--xxl-width: #{map-get($grid-breakpoints, '2xl')};
-	--xl-width: #{map-get($grid-breakpoints, 'xl')};
-	--lg-width: #{map-get($grid-breakpoints, 'lg')};
-	--md-width: #{map-get($grid-breakpoints, 'md')};
-	--sm-width: #{map-get($grid-breakpoints, 'sm')};
-	--xs-width: #{map-get($grid-breakpoints, 'xs')};
-
-
-
+	--xxl-width: #{map-get($grid-breakpoints, "2xl")};
+	--xl-width: #{map-get($grid-breakpoints, "xl")};
+	--lg-width: #{map-get($grid-breakpoints, "lg")};
+	--md-width: #{map-get($grid-breakpoints, "md")};
+	--sm-width: #{map-get($grid-breakpoints, "sm")};
+	--xs-width: #{map-get($grid-breakpoints, "xs")};
 
 	--appreciation-color: var(--green-600);
 	--appreciation-bg: var(--green-100);
diff --git a/frappe/public/scss/desk/dark.scss b/frappe/public/scss/desk/dark.scss
index 37c3c973d9..d168f4247a 100644
--- a/frappe/public/scss/desk/dark.scss
+++ b/frappe/public/scss/desk/dark.scss
@@ -48,7 +48,6 @@ $check-icon-dark: url("data:image/svg+xml, <svg viewBox='0 0 8 7' fill='none' xm
 	// Border Colors
 	--border-primary: var(--gray-200);
 
-
 	// Background Text Color Pairs
 	--bg-blue: var(--blue-600);
 	--bg-light-blue: var(--blue-600);
@@ -129,15 +128,24 @@ $check-icon-dark: url("data:image/svg+xml, <svg viewBox='0 0 8 7' fill='none' xm
 
 	// checkbox
 	--checkbox-color: var(--neutral-white);
-	--checkbox-gradient: linear-gradient(180deg, var(--neutral-white) -124.51%, var(--neutral-white) 100%);
-	--checkbox-disabled-gradient: linear-gradient(180deg, var(--gray-600) -124.51%, var(--gray-600) 100%);
+	--checkbox-gradient: linear-gradient(
+		180deg,
+		var(--neutral-white) -124.51%,
+		var(--neutral-white) 100%
+	);
+	--checkbox-disabled-gradient: linear-gradient(
+		180deg,
+		var(--gray-600) -124.51%,
+		var(--gray-600) 100%
+	);
 	--checkbox-focus-shadow: var(--focus-default);
 
 	input[type="checkbox"] {
 		&:checked {
 			background-image: $check-icon-dark, var(--checkbox-gradient);
 		}
-		&.disabled-selected, &:disabled:checked {
+		&.disabled-selected,
+		&:disabled:checked {
 			background-image: $check-icon-dark, var(--checkbox-disabled-gradient);
 		}
 		&.disabled-deselected {
@@ -154,7 +162,6 @@ $check-icon-dark: url("data:image/svg+xml, <svg viewBox='0 0 8 7' fill='none' xm
 	--date-active-bg: var(--gray-700);
 	--date-range-bg: var(--subtle-fg);
 
-
 	// grid
 	.grid-body .editable-row {
 		--control-bg: var(--gray-900);
@@ -247,7 +254,8 @@ $check-icon-dark: url("data:image/svg+xml, <svg viewBox='0 0 8 7' fill='none' xm
 		background: var(--gray-500);
 	}
 
-	$indicator-colors: green, cyan, blue, orange, yellow, gray, grey, red, pink, darkgrey, purple, light-blue;
+	$indicator-colors: green, cyan, blue, orange, yellow, gray, grey, red, pink, darkgrey, purple,
+		light-blue;
 	@each $color in $indicator-colors {
 		.indicator {
 			--indicator-dot-#{"" + $color}: var(--bg-#{$color});
diff --git a/frappe/public/scss/desk/dashboard_view.scss b/frappe/public/scss/desk/dashboard_view.scss
index 732b568ee3..959a6aa1ff 100644
--- a/frappe/public/scss/desk/dashboard_view.scss
+++ b/frappe/public/scss/desk/dashboard_view.scss
@@ -28,37 +28,36 @@
 	// .page-form {
 	// 	height: 50px;
 
-		// .dashboard-header {
-		// 	padding: 10px;
-		// 	display: flex;
-		// 	justify-content: space-between;
-		// 	width: 100%;
+	// .dashboard-header {
+	// 	padding: 10px;
+	// 	display: flex;
+	// 	justify-content: space-between;
+	// 	width: 100%;
 
-		// 	.header-title {
-		// 		line-height: 1.5em;
-		// 	}
+	// 	.header-title {
+	// 		line-height: 1.5em;
+	// 	}
 
-		// 	.restricted-button {
-		// 		cursor: default;
-		// 		position: relative;
-		// 		right: 5px;
-		// 		top: -3px;
-		// 	}
-		// }
+	// 	.restricted-button {
+	// 		cursor: default;
+	// 		position: relative;
+	// 		right: 5px;
+	// 		top: -3px;
+	// 	}
+	// }
 
-		// .customize-dashboard {
-		// 	font-size: 13px;
-		// 	cursor: pointer;
-		// }
+	// .customize-dashboard {
+	// 	font-size: 13px;
+	// 	cursor: pointer;
+	// }
 
-		// .customize-options {
-		// 	display: none;
-		// 	cursor: pointer;
+	// .customize-options {
+	// 	display: none;
+	// 	cursor: pointer;
 
-		// 	.customize-option:hover {
-		// 		text-decoration: underline;
-		// 	}
-		// }
+	// 	.customize-option:hover {
+	// 		text-decoration: underline;
+	// 	}
+	// }
 	// }
 }
-
diff --git a/frappe/public/scss/desk/desktop.scss b/frappe/public/scss/desk/desktop.scss
index 30456215da..8de66e43d5 100644
--- a/frappe/public/scss/desk/desktop.scss
+++ b/frappe/public/scss/desk/desktop.scss
@@ -569,7 +569,6 @@ body {
 	}
 
 	&.links-widget-box {
-
 		.widget-head .widget-label .widget-title svg {
 			margin: 2px;
 			margin-right: 12px !important;
@@ -588,7 +587,6 @@ body {
 			border-radius: var(--border-radius-md);
 			cursor: pointer;
 
-
 			&:first-child {
 				margin-top: 12px;
 			}
@@ -722,14 +720,17 @@ body {
 	}
 
 	&.quick-list-widget-box {
-		.list-loading-state, .list-no-data-state {
+		.list-loading-state,
+		.list-no-data-state {
 			display: flex;
 			justify-content: center;
 			align-items: center;
 			height: 202px;
 		}
 
-		.refresh-list, .filter-list, .add-new {
+		.refresh-list,
+		.filter-list,
+		.add-new {
 			background-color: var(--btn-default-bg);
 			cursor: pointer;
 
@@ -933,7 +934,8 @@ body {
 	@media (min-width: map-get($grid-breakpoints, "lg")) {
 		.layout-main {
 			height: calc(100vh - var(--navbar-height) - var(--page-head-height) - 5px);
-			.layout-side-section, .layout-main-section-wrapper {
+			.layout-side-section,
+			.layout-main-section-wrapper {
 				height: 100%;
 				overflow-y: auto;
 				scrollbar-color: var(--gray-200) transparent;
@@ -988,7 +990,7 @@ body {
 		padding: var(--padding-sm);
 	}
 
-	.block-menu-item-icon svg{
+	.block-menu-item-icon svg {
 		width: 18px;
 		height: 18px;
 		margin-right: 5px;
@@ -1011,7 +1013,8 @@ body {
 				display: none;
 			}
 
-			.setting-btn, .duplicate-page {
+			.setting-btn,
+			.duplicate-page {
 				display: none;
 			}
 
@@ -1063,7 +1066,6 @@ body {
 
 	.desk-sidebar {
 		&.show-hidden-workspaces {
-
 			.unhide-workspace-btn {
 				display: none;
 			}
@@ -1094,14 +1096,16 @@ body {
 
 		.standard-sidebar-section.show-control {
 			.desk-sidebar-item.standard-sidebar-item {
-
-				&:hover, &.selected {
+				&:hover,
+				&.selected {
 					.drag-handle {
 						display: inline-block;
 						background-color: var(--bg-color);
 					}
 
-					.setting-btn, .duplicate-page, .unhide-workspace-btn {
+					.setting-btn,
+					.duplicate-page,
+					.unhide-workspace-btn {
 						display: inline-block;
 						margin-right: 8px;
 					}
@@ -1113,19 +1117,17 @@ body {
 				}
 
 				.block-click {
-					pointer-events:none;
+					pointer-events: none;
 				}
 			}
 		}
 	}
 
-
 	// widgets
 	.widget.number-widget-box {
 		border: 1px solid var(--border-color);
 	}
 
-
 	.codex-editor__loader {
 		display: none !important;
 	}
@@ -1133,7 +1135,7 @@ body {
 	.codex-editor {
 		min-height: 630px;
 
-		.codex-editor__redactor{
+		.codex-editor__redactor {
 			display: flex;
 			flex-wrap: wrap;
 			flex-direction: row;
@@ -1168,20 +1170,24 @@ body {
 				}
 
 				.edit-mode {
-					.widget-control > *, .paragraph-control > * {
+					.widget-control > *,
+					.paragraph-control > * {
 						width: 0px;
 						visibility: hidden;
 						opacity: 0;
 						transition: visibility 0s, opacity 0.5s ease-in-out;
 					}
 
-					.link-item, .quick-list-item, .see-all {
+					.link-item,
+					.quick-list-item,
+					.see-all {
 						pointer-events: none;
 					}
 				}
 
 				&:hover {
-					.widget-control > *, .new-block-button {
+					.widget-control > *,
+					.new-block-button {
 						width: auto;
 						visibility: visible;
 						opacity: 1;
@@ -1201,7 +1207,8 @@ body {
 							opacity: 1;
 						}
 
-						&.shortcut, &.header {
+						&.shortcut,
+						&.header {
 							background-color: var(--fg-color) !important;
 						}
 
@@ -1237,7 +1244,7 @@ body {
 					height: 100%;
 					padding: 7px;
 
-					&> div {
+					& > div {
 						height: 100%;
 					}
 
@@ -1248,7 +1255,7 @@ body {
 					.resizer {
 						width: 10px;
 						height: 100%;
-						position:absolute;
+						position: absolute;
 						right: 0;
 						bottom: 0;
 						cursor: col-resize;
@@ -1383,7 +1390,6 @@ body {
 		}
 
 		.ce-toolbar {
-
 			&.ce-toolbar--opened {
 				display: none;
 			}
@@ -1403,7 +1409,8 @@ body {
 			.ce-settings {
 				width: fit-content;
 
-				.ce-settings__button, .cdx-settings-button {
+				.ce-settings__button,
+				.cdx-settings-button {
 					color: #707684;
 
 					.icon {
@@ -1415,19 +1422,20 @@ body {
 					color: #388ae5;
 				}
 
-				.cdx-settings-button.disabled{
+				.cdx-settings-button.disabled {
 					pointer-events: none;
-					opacity: .5
+					opacity: 0.5;
 				}
-				.cdx-settings-sidebar{
+				.cdx-settings-sidebar {
 					position: absolute;
 					right: 100%;
-					top:0;
+					top: 0;
 					background: #fff;
 					width: 108px;
 					height: 145px;
-					box-shadow: 0 3px 15px -3px rgba(13,20,33,.13);
-					border-radius: 0 4px 4px 0;z-index: 0;
+					box-shadow: 0 3px 15px -3px rgba(13, 20, 33, 0.13);
+					border-radius: 0 4px 4px 0;
+					z-index: 0;
 				}
 			}
 
@@ -1436,7 +1444,8 @@ body {
 			}
 		}
 
-		.ce-inline-tool, .ce-inline-toolbar__dropdown {
+		.ce-inline-tool,
+		.ce-inline-toolbar__dropdown {
 			.icon {
 				fill: currentColor;
 			}
@@ -1456,11 +1465,10 @@ body {
 				max-width: 760px;
 			}
 		}
-
 	}
 
 	.cdx-marker {
-		background: rgba(245,235,111,0.29);
+		background: rgba(245, 235, 111, 0.29);
 		padding: 3px 0;
 	}
 
@@ -1515,5 +1523,4 @@ body {
 	.dropdown-item-icon {
 		margin-right: 5px;
 	}
-
 }
diff --git a/frappe/public/scss/desk/driver.scss b/frappe/public/scss/desk/driver.scss
index 2f4e6e647d..9a2636e4a8 100644
--- a/frappe/public/scss/desk/driver.scss
+++ b/frappe/public/scss/desk/driver.scss
@@ -70,11 +70,11 @@ input.driver-highlighted-element {
 .driver-fix-stacking {
 	z-index: auto !important;
 	position: unset !important;
-	opacity: 1.0 !important;
+	opacity: 1 !important;
 	transform: none !important;
 	filter: none !important;
 	perspective: none !important;
 	transform-style: flat !important;
 	transform-box: border-box !important;
 	will-change: unset !important;
-}
\ No newline at end of file
+}
diff --git a/frappe/public/scss/desk/file_view.scss b/frappe/public/scss/desk/file_view.scss
index 29e49ab65e..6c38033331 100644
--- a/frappe/public/scss/desk/file_view.scss
+++ b/frappe/public/scss/desk/file_view.scss
@@ -1,5 +1,4 @@
 .file-view {
-
 	.no-result {
 		.breadcrumbs {
 			font-size: var(--text-md);
@@ -13,7 +12,6 @@
 	}
 
 	.file-grid-view {
-
 		.file-grid.folders {
 			margin-bottom: var(--margin-2xl);
 		}
@@ -59,7 +57,6 @@
 							display: block;
 						}
 					}
-
 				}
 
 				.file-footer {
@@ -101,7 +98,6 @@
 			}
 
 			.file-wrapper:hover {
-
 				.list-row-checkbox {
 					&:before {
 						display: block;
@@ -119,9 +115,8 @@
 			}
 
 			.file-wrapper.cut {
-				border: 2px dashed var(--dark-border-color)
+				border: 2px dashed var(--dark-border-color);
 			}
 		}
 	}
-
 }
diff --git a/frappe/public/scss/desk/filters.scss b/frappe/public/scss/desk/filters.scss
index 75d1a6e396..53e9dfea5a 100644
--- a/frappe/public/scss/desk/filters.scss
+++ b/frappe/public/scss/desk/filters.scss
@@ -40,7 +40,6 @@
 				}
 			}
 		}
-
 	}
 
 	.empty-filters {
@@ -104,4 +103,3 @@
 		}
 	}
 }
-
diff --git a/frappe/public/scss/desk/form.scss b/frappe/public/scss/desk/form.scss
index 298a244057..fc22da5dec 100644
--- a/frappe/public/scss/desk/form.scss
+++ b/frappe/public/scss/desk/form.scss
@@ -1,5 +1,5 @@
 @import "../common/form.scss";
-@import '~cropperjs/dist/cropper.min';
+@import "~cropperjs/dist/cropper.min";
 
 .tooltip-content {
 	position: absolute;
@@ -19,11 +19,10 @@
 
 .show-tooltip .frappe-control:hover .tooltip-content {
 	opacity: 1;
-	transform: translate3d(0,0,0);
+	transform: translate3d(0, 0, 0);
 	pointer-events: auto;
 }
 
-
 .std-form-layout > .form-layout > .form-page {
 	border-radius: var(--border-radius-md);
 	border: 1px solid var(--border-color);
@@ -31,7 +30,8 @@
 	background-color: var(--card-bg);
 }
 
-.form-section, .form-dashboard-section {
+.form-section,
+.form-dashboard-section {
 	margin: 0px;
 
 	.form-section-description {
@@ -132,7 +132,8 @@
 	text-align: right;
 }
 
-.form-control:disabled, .form-control[readonly] {
+.form-control:disabled,
+.form-control[readonly] {
 	color: var(--text-muted);
 	cursor: not-allowed;
 }
@@ -336,7 +337,6 @@
 	}
 }
 [data-theme="dark"] .form-message {
-
 	&.blue {
 		@include form-message-background("blue", "dark");
 	}
diff --git a/frappe/public/scss/desk/frappe_datatable.scss b/frappe/public/scss/desk/frappe_datatable.scss
index a515c51b41..138ca29c8a 100644
--- a/frappe/public/scss/desk/frappe_datatable.scss
+++ b/frappe/public/scss/desk/frappe_datatable.scss
@@ -26,7 +26,8 @@
 		background-color: var(--bg-color) !important;
 	}
 
-	.frappe-control, .form-control {
+	.frappe-control,
+	.form-control {
 		margin: 0;
 		border-radius: 0px;
 		border: none;
@@ -48,7 +49,6 @@
 	}
 
 	.dt-header {
-
 		.dt-row[data-is-filter] {
 			display: flex !important;
 		}
@@ -150,7 +150,8 @@
 		font-feature-settings: "tnum";
 	}
 
-	.dt-cell__content--header-0, .dt-cell__content--col-0 {
+	.dt-cell__content--header-0,
+	.dt-cell__content--col-0 {
 		padding: 0.5rem;
 	}
 
diff --git a/frappe/public/scss/desk/global.scss b/frappe/public/scss/desk/global.scss
index b2612b148e..a87c325c85 100644
--- a/frappe/public/scss/desk/global.scss
+++ b/frappe/public/scss/desk/global.scss
@@ -11,8 +11,8 @@ body {
 	background-color: var(--bg-color);
 
 	&.full-width {
-	@include media-breakpoint-up(md) {
-		.container {
+		@include media-breakpoint-up(md) {
+			.container {
 				width: 90%;
 				max-width: 100%;
 			}
@@ -96,22 +96,49 @@ pre {
 	white-space: pre-wrap;
 }
 
-.col-xs-1 { @extend .col-1; }
-.col-xs-2 { @extend .col-2; }
-.col-xs-3 { @extend .col-3; }
-.col-xs-4 { @extend .col-4; }
-.col-xs-5 { @extend .col-5; }
-.col-xs-6 { @extend .col-6; }
-.col-xs-7 { @extend .col-7; }
-.col-xs-8 { @extend .col-8; }
-.col-xs-9 { @extend .col-9; }
-.col-xs-10 { @extend .col-10; }
-.col-xs-11 { @extend .col-11; }
-.col-xs-12 { @extend .col-12; }
+.col-xs-1 {
+	@extend .col-1;
+}
+.col-xs-2 {
+	@extend .col-2;
+}
+.col-xs-3 {
+	@extend .col-3;
+}
+.col-xs-4 {
+	@extend .col-4;
+}
+.col-xs-5 {
+	@extend .col-5;
+}
+.col-xs-6 {
+	@extend .col-6;
+}
+.col-xs-7 {
+	@extend .col-7;
+}
+.col-xs-8 {
+	@extend .col-8;
+}
+.col-xs-9 {
+	@extend .col-9;
+}
+.col-xs-10 {
+	@extend .col-10;
+}
+.col-xs-11 {
+	@extend .col-11;
+}
+.col-xs-12 {
+	@extend .col-12;
+}
 
-.btn-default { @extend .btn-light; }
+.btn-default {
+	@extend .btn-light;
+}
 
-.hidden-xs, .hidden-sm {
+.hidden-xs,
+.hidden-sm {
 	@include media-breakpoint-between(xs, sm) {
 		display: none !important;
 	}
@@ -173,7 +200,6 @@ img {
 	}
 }
 
-
 .hide-control {
 	@extend .d-none;
 }
@@ -186,20 +212,36 @@ img {
 	text-decoration: none !important;
 }
 
-h1, h2, h3, h4 {
+h1,
+h2,
+h3,
+h4 {
 	color: var(--text-color);
-	margin-bottom: var(--margin-md)
+	margin-bottom: var(--margin-md);
 }
 // override default gray-900 from bootstrap to support dark mode.
-h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+.h1,
+.h2,
+.h3,
+.h4,
+.h5,
+.h6 {
 	color: var(--heading-color);
 }
-h1, h2, h3 {
+h1,
+h2,
+h3 {
 	font-weight: bold;
 }
 
 p {
-	margin-bottom: var(--margin-sm)
+	margin-bottom: var(--margin-sm);
 }
 
 .small {
@@ -234,7 +276,8 @@ h2 {
 	}
 }
 
-.btn-group-sm > .btn, .btn-sm {
+.btn-group-sm > .btn,
+.btn-sm {
 	padding: var(--padding-xs) var(--padding-sm);
 	@include get_textstyle("base", "regular");
 }
@@ -308,7 +351,7 @@ select.input-xs {
 
 .dropdown-item {
 	border-radius: 8px;
-	padding : var(--dropdown-padding) !important;
+	padding: var(--dropdown-padding) !important;
 }
 
 .dropdown-menu {
@@ -338,7 +381,8 @@ select.input-xs {
 		--icon-stroke: #{$component-active-color};
 	}
 
-	.divider, .dropdown-divider {
+	.divider,
+	.dropdown-divider {
 		margin: 4px;
 	}
 
@@ -346,7 +390,8 @@ select.input-xs {
 		&.dropdown-divider {
 			display: none;
 		}
-		.divider, .dropdown-divider {
+		.divider,
+		.dropdown-divider {
 			display: none;
 		}
 	}
@@ -392,7 +437,8 @@ kbd {
 
 .table {
 	color: var(--text-color);
-	th, td {
+	th,
+	td {
 		padding: 0.5rem;
 	}
 }
@@ -499,7 +545,8 @@ kbd {
 		right: auto !important;
 		left: 5px;
 	}
-	input, textarea {
+	input,
+	textarea {
 		direction: rtl !important;
 	}
 
@@ -518,7 +565,6 @@ img.no-image {
 	background-color: var(--bg-light-gray);
 }
 
-
 @media (min-width: 768px) {
 	.video-modal .modal-dialog {
 		width: 700px;
diff --git a/frappe/public/scss/desk/global_search.scss b/frappe/public/scss/desk/global_search.scss
index db92be3f9b..7799d4757e 100644
--- a/frappe/public/scss/desk/global_search.scss
+++ b/frappe/public/scss/desk/global_search.scss
@@ -100,7 +100,9 @@
 				}
 			}
 
-			.list-more, .section-more, .results-status {
+			.list-more,
+			.section-more,
+			.results-status {
 				padding: var(--padding-sm) 0;
 				color: var(--primary);
 				@include get_textstyle("sm", "regular");
diff --git a/frappe/public/scss/desk/image_view.scss b/frappe/public/scss/desk/image_view.scss
index 063af27923..26339953a2 100644
--- a/frappe/public/scss/desk/image_view.scss
+++ b/frappe/public/scss/desk/image_view.scss
@@ -1,6 +1,5 @@
 // Image view
 .image-view {
-
 	.frappe-list {
 		padding: var(--padding-xs);
 	}
@@ -24,7 +23,6 @@
 				margin-left: var(--margin-xs);
 			}
 		}
-
 	}
 
 	.image-view-container {
@@ -200,15 +198,13 @@
 			// 	opacity: 0.5
 			// }
 		}
-
 	}
 }
 
-
 .pswp--svg .pswp__button,
 .pswp--svg .pswp__button--arrow--left:before,
 .pswp--svg .pswp__button--arrow--right:before {
-	background-image: url('/assets/frappe/images/default-skin.svg') !important;
+	background-image: url("/assets/frappe/images/default-skin.svg") !important;
 }
 .pswp--svg .pswp__button--arrow--left,
 .pswp--svg .pswp__button--arrow--right {
@@ -234,8 +230,7 @@
 	cursor: pointer;
 	border: 1px solid var(--border-color);
 
-
 	img {
 		max-height: 100%;
 	}
-}
\ No newline at end of file
+}
diff --git a/frappe/public/scss/desk/kanban.scss b/frappe/public/scss/desk/kanban.scss
index af0e30e453..a711a6f820 100644
--- a/frappe/public/scss/desk/kanban.scss
+++ b/frappe/public/scss/desk/kanban.scss
@@ -160,10 +160,7 @@
 					@include flex(flex, space-between, null, column);
 					margin-top: var(--margin-sm);
 					min-height: 100px;
-					@include card(
-						$padding: 0,
-						$background-color: var(--kanban-card-bg)
-					);
+					@include card($padding: 0, $background-color: var(--kanban-card-bg));
 					box-shadow: none;
 					border: 1px solid var(--border-color);
 
@@ -207,7 +204,6 @@
 						}
 
 						.kanban-card-meta {
-
 							.list-comment-count {
 								width: 30px;
 							}
diff --git a/frappe/public/scss/desk/link_preview.scss b/frappe/public/scss/desk/link_preview.scss
index 4c5dbcad14..ca29c5ad37 100644
--- a/frappe/public/scss/desk/link_preview.scss
+++ b/frappe/public/scss/desk/link_preview.scss
@@ -40,7 +40,6 @@
 				overflow-wrap: break-word;
 
 				.preview-field {
-
 					.preview-label {
 						padding-bottom: 4px;
 					}
diff --git a/frappe/public/scss/desk/list.scss b/frappe/public/scss/desk/list.scss
index 8b4961fa46..8f6c5ea282 100644
--- a/frappe/public/scss/desk/list.scss
+++ b/frappe/public/scss/desk/list.scss
@@ -4,7 +4,9 @@
 // }
 
 .freeze-row {
-	.level-left, .level-right, .list-row-col {
+	.level-left,
+	.level-right,
+	.list-row-col {
 		height: 100%;
 		width: 100%;
 	}
@@ -41,7 +43,8 @@
 }
 
 .no-list-sidebar {
-	&[data-page-route^="List/"], [data-page-route^="List/"]{
+	&[data-page-route^="List/"],
+	[data-page-route^="List/"] {
 		@include media-breakpoint-up(md) {
 			.layout-side-section {
 				display: none;
@@ -67,7 +70,6 @@
 			background-color: var(--highlight-color);
 		}
 	}
-
 }
 
 .list-row {
@@ -117,7 +119,7 @@
 		justify-content: flex-end;
 		// min-width: 120px;
 
-		&> span {
+		& > span {
 			display: inline-block;
 		}
 
@@ -135,7 +137,8 @@
 			white-space: nowrap;
 		}
 
-		.list-assignments, .list-actions {
+		.list-assignments,
+		.list-actions {
 			margin-right: var(--margin-md);
 		}
 	}
@@ -146,7 +149,8 @@
 		}
 	}
 
-	.select-like, .file-select {
+	.select-like,
+	.file-select {
 		padding-left: 11px;
 	}
 }
@@ -155,10 +159,10 @@
 	@extend .list-row;
 	cursor: default;
 	background-color: var(--subtle-fg);
-    height: 30px;
+	height: 30px;
 	padding: 8px, 10px, 8px, 0px;
 	margin: 8px 5px;
-    border-radius: var(--border-radius-md);
+	border-radius: var(--border-radius-md);
 
 	.list-check-all {
 		margin-left: 11px;
@@ -201,7 +205,8 @@ $level-margin-right: 8px;
 	}
 }
 
-.list-paging-area, .footnote-area {
+.list-paging-area,
+.footnote-area {
 	border-top: 1px solid var(--border-color);
 
 	.btn-group {
@@ -214,7 +219,7 @@ $level-margin-right: 8px;
 			background-color: var(--bg-color);
 			color: var(--text-color);
 			font-weight: var(--weight-medium);
-	   }
+		}
 	}
 	.btn-paging {
 		background-color: var(--gray-50);
@@ -222,7 +227,8 @@ $level-margin-right: 8px;
 }
 
 .frappe-card {
-	.list-paging-area, .footnote-area {
+	.list-paging-area,
+	.footnote-area {
 		padding: var(--padding-md);
 	}
 }
@@ -239,7 +245,8 @@ $level-margin-right: 8px;
 	margin-bottom: 1px;
 }
 
-input.list-check-all, input.list-row-checkbox {
+input.list-check-all,
+input.list-row-checkbox {
 	margin-top: 0px;
 	margin-bottom: 0px;
 	--checkbox-right-margin: calc(var(--checkbox-size) / 2 + #{$level-margin-right});
@@ -315,12 +322,13 @@ input.list-check-all {
 		cursor: auto;
 	}
 
-	input[type=checkbox] {
+	input[type="checkbox"] {
 		margin: 0;
 		margin-right: 5px;
 	}
 
-	.liked-by, .liked-by-filter-button {
+	.liked-by,
+	.liked-by-filter-button {
 		display: inline-block;
 		width: 20px;
 		margin-right: 10px;
@@ -343,7 +351,8 @@ input.list-check-all {
 		margin-right: 5px;
 		min-width: 110px;
 
-		.list-row-modified, .avatar-small {
+		.list-row-modified,
+		.avatar-small {
 			margin-right: 10px;
 		}
 	}
@@ -425,7 +434,6 @@ input.list-check-all {
 			margin: var(--margin-xs) 0 var(--margin-xs) var(--margin-xs);
 		}
 	}
-
 }
 
 .restricted-button {
@@ -441,10 +449,7 @@ input.list-check-all {
 	}
 
 	&.btn {
-		@include button-variant(
-			$background: $light-yellow,
-			$border: darken($light-yellow, 5%),
-		);
+		@include button-variant($background: $light-yellow, $border: darken($light-yellow, 5%));
 		box-shadow: none;
 	}
 }
diff --git a/frappe/public/scss/desk/mobile.scss b/frappe/public/scss/desk/mobile.scss
index a44468e2f3..a965feca65 100644
--- a/frappe/public/scss/desk/mobile.scss
+++ b/frappe/public/scss/desk/mobile.scss
@@ -17,7 +17,7 @@ body {
 	}
 }
 
-@media(max-width: 991px) {
+@media (max-width: 991px) {
 	.intro-area,
 	.footnote-area {
 		padding: 15px;
@@ -45,7 +45,6 @@ body {
 			margin-right: var(--margin-xs);
 		}
 
-
 		.page-head .sub-heading {
 			font-size: var(--text-xs);
 		}
@@ -80,7 +79,7 @@ body {
 		white-space: nowrap;
 		text-overflow: ellipsis;
 
-		@media(max-width: 480px) {
+		@media (max-width: 480px) {
 			li > a {
 				width: 100px;
 			}
@@ -98,7 +97,7 @@ body {
 	}
 
 	// select all except last 2
-	#navbar-breadcrumbs li:not(:nth-last-child(-n+1)) {
+	#navbar-breadcrumbs li:not(:nth-last-child(-n + 1)) {
 		display: none;
 	}
 
@@ -161,9 +160,8 @@ body {
 	// }
 }
 
-@media(max-width: 767px) {
-
-	body[data-route^="Form"]{
+@media (max-width: 767px) {
+	body[data-route^="Form"] {
 		.page-title {
 			.title-text {
 				@include get_textstyle("lg", "regular");
@@ -256,14 +254,13 @@ body {
 				top: 4px;
 
 				// bigger indicators for list
-				.indicator::before, .indicator::after {
+				.indicator::before,
+				.indicator::after {
 					height: 12px;
 					width: 12px;
 					border-radius: 12px;
 				}
-
 			}
-
 		}
 
 		.list-row-right.no-right-column {
@@ -272,7 +269,6 @@ body {
 			right: 10px;
 			left: -10px;
 			width: 100%;
-
 		}
 	}
 
@@ -346,12 +342,13 @@ body {
 						margin-right: 0;
 					}
 				}
-				.comment-header{
+				.comment-header {
 					padding: 7px 10px;
 					.links-active {
 						padding-right: 10px;
 					}
-					.reply-link, .reply-link-all {
+					.reply-link,
+					.reply-link-all {
 						margin-left: 0;
 					}
 					.asset-details {
@@ -364,10 +361,10 @@ body {
 				.reply {
 					padding: 10px;
 				}
-				.commented-on-small{
+				.commented-on-small {
 					display: inline-block;
 				}
-				.commented-on-small{
+				.commented-on-small {
 					display: inline-block;
 				}
 			}
diff --git a/frappe/public/scss/desk/module.scss b/frappe/public/scss/desk/module.scss
index 1ff8b85874..f87485c789 100644
--- a/frappe/public/scss/desk/module.scss
+++ b/frappe/public/scss/desk/module.scss
@@ -30,7 +30,7 @@
 	padding: 30px;
 }
 
-@media(min-width: map-get($grid-breakpoints, "md")) {
+@media (min-width: map-get($grid-breakpoints, "md")) {
 	.module-section:nth-child(even) {
 		background-color: var(--bg-color);
 	}
@@ -40,21 +40,21 @@
 	}
 }
 
-@media(max-width: map-get($grid-breakpoints, "lg")) {
+@media (max-width: map-get($grid-breakpoints, "lg")) {
 	.module-body {
 		margin-top: 15px;
 		border-top: 1px solid $border-color;
 	}
 }
 
-@media(max-width: map-get($grid-breakpoints, "md")) {
+@media (max-width: map-get($grid-breakpoints, "md")) {
 	.module-body {
 		margin-top: 0;
 		border-top: 1px solid transparent;
 	}
 }
 
-@media(max-width: map-get($grid-breakpoints, "md")) {
+@media (max-width: map-get($grid-breakpoints, "md")) {
 	.module-section {
 		border: none;
 	}
@@ -72,7 +72,6 @@
 	}
 }
 
-
 .module-item {
 	margin: 0px;
 	padding: 7px;
@@ -96,7 +95,8 @@
 	margin-left: 3px;
 }
 
-.module-item:hover, .module-item:focus {
+.module-item:hover,
+.module-item:focus {
 	background-color: var(--bg-color);
 }
 
@@ -126,14 +126,12 @@
 	width: 0px;
 }
 
-@media(max-width: map-get($grid-breakpoints, "md")) {
-
+@media (max-width: map-get($grid-breakpoints, "md")) {
 	body[data-route^="Module"] {
 		.page-title {
 			width: 100%;
 		}
 
-
 		.page-actions {
 			display: none !important;
 		}
diff --git a/frappe/public/scss/desk/notification.scss b/frappe/public/scss/desk/notification.scss
index 11dd6217d2..4affdb5f87 100644
--- a/frappe/public/scss/desk/notification.scss
+++ b/frappe/public/scss/desk/notification.scss
@@ -64,7 +64,8 @@
 		max-height: 450px;
 		overflow-y: auto;
 
-		.panel-events, .panel-notifications {
+		.panel-events,
+		.panel-notifications {
 			@include size(100%, null);
 		}
 
@@ -134,14 +135,13 @@
 
 .recent-item.notification-item {
 	padding: 10px 10px 10px 0px;
-	margin:  10px 10px 10px 10px;
+	margin: 10px 10px 10px 10px;
 	justify-content: space-between;
 
 	&.unread {
-
 		&:hover {
 			.mark-as-read {
-				flex-shrink : 0;
+				flex-shrink: 0;
 				align-self: center;
 				justify-self: end;
 				width: 8px;
@@ -161,12 +161,12 @@
 		gap: 10px;
 
 		&::before {
-			content: '';
+			content: "";
 			display: inline-block;
 			@include size(6px, 6px);
 			min-width: 6px;
 			margin-top: 16px;
-    		margin-left: 2px;
+			margin-left: 2px;
 			border-radius: 10px;
 		}
 
@@ -177,7 +177,7 @@
 
 	b {
 		font-weight: 500;
-		color: var(--text-light)
+		color: var(--text-light);
 	}
 
 	.notification-timestamp {
@@ -293,7 +293,7 @@
 
 	&:hover {
 		text-decoration: none;
-		color: var(--text-color)
+		color: var(--text-color);
 	}
 }
 
@@ -315,4 +315,4 @@
 			margin-left: 5px;
 		}
 	}
-}
\ No newline at end of file
+}
diff --git a/frappe/public/scss/desk/page.scss b/frappe/public/scss/desk/page.scss
index 4f5b02bc32..223fc2ce8e 100644
--- a/frappe/public/scss/desk/page.scss
+++ b/frappe/public/scss/desk/page.scss
@@ -10,7 +10,8 @@
 			display: none;
 		}
 
-		.sidebar-toggle-icon, .sidebar-toggle-placeholder {
+		.sidebar-toggle-icon,
+		.sidebar-toggle-placeholder {
 			@include transition(all 0.5s ease-in-out);
 		}
 
@@ -42,7 +43,6 @@
 	}
 }
 
-
 .page-container {
 	background-color: var(--bg-color);
 
@@ -60,7 +60,8 @@
 		border-radius: var(--border-radius);
 		line-height: 1;
 		padding: 4px 8px;
-		&, & .hidden-xs {
+		&,
+		& .hidden-xs {
 			display: inline-flex;
 			align-items: center;
 			gap: 6px;
@@ -69,7 +70,8 @@
 	.btn:not(.icon-btn) {
 		padding: 4px 8px;
 	}
-	.btn-primary, .btn-secondary {
+	.btn-primary,
+	.btn-secondary {
 		min-width: 40px;
 	}
 	.custom-btn-group {
@@ -90,7 +92,7 @@
 	overflow: hidden;
 	@include card($padding: 0px);
 	box-shadow: none;
-	border: 1px solid var(--border-color)
+	border: 1px solid var(--border-color);
 }
 
 .page-head {
@@ -144,7 +146,9 @@
 	}
 }
 
-.menu-btn-group, .custom-btn-group, .page-icon-group {
+.menu-btn-group,
+.custom-btn-group,
+.page-icon-group {
 	display: flex;
 	.dropdown-menu {
 		width: max-content;
@@ -159,10 +163,13 @@
 	}
 }
 .layout-main-section {
-	.frappe-list, .report-wrapper {
+	.frappe-list,
+	.report-wrapper {
 		padding: 0 var(--padding-xs);
 
-		.result, .no-result, .freeze {
+		.result,
+		.no-result,
+		.freeze {
 			min-height: #{"calc(100vh - 284px)"};
 		}
 	}
diff --git a/frappe/public/scss/desk/plyr.scss b/frappe/public/scss/desk/plyr.scss
index acc8c851f9..04aef940ae 100644
--- a/frappe/public/scss/desk/plyr.scss
+++ b/frappe/public/scss/desk/plyr.scss
@@ -8,4 +8,4 @@
 	.plyr__poster {
 		filter: brightness(0.7);
 	}
-}
\ No newline at end of file
+}
diff --git a/frappe/public/scss/desk/print_preview.scss b/frappe/public/scss/desk/print_preview.scss
index ed85f8b933..5d7f88585b 100644
--- a/frappe/public/scss/desk/print_preview.scss
+++ b/frappe/public/scss/desk/print_preview.scss
@@ -45,7 +45,6 @@
 .layout-side-section.print-preview-sidebar {
 	padding-right: var(--padding-md);
 
-
 	.label-area {
 		white-space: nowrap;
 	}
@@ -73,7 +72,6 @@
 	}
 
 	.skeleton-body {
-
 		.skeleton-table {
 			width: 100%;
 
@@ -144,9 +142,8 @@
 		background-position: -100px;
 	}
 
-	50%, 100% {
+	50%,
+	100% {
 		background-position: 500px;
 	}
 }
-
-
diff --git a/frappe/public/scss/desk/report.scss b/frappe/public/scss/desk/report.scss
index 1f6ae9fae1..d465ec6044 100644
--- a/frappe/public/scss/desk/report.scss
+++ b/frappe/public/scss/desk/report.scss
@@ -29,7 +29,7 @@
 
 .grid-report .show-zero {
 	margin: 10px;
-	display: none
+	display: none;
 }
 
 // column picker
@@ -183,9 +183,15 @@
 		color: var(--text-color);
 		font-feature-settings: "tnum";
 
-		&.green { color: var(--green-500); }
-		&.red { color: var(--red-500); }
-		&.blue { color: var(--blue-500); }
+		&.green {
+			color: var(--green-500);
+		}
+		&.red {
+			color: var(--red-500);
+		}
+		&.blue {
+			color: var(--blue-500);
+		}
 
 		// SIZE & SPACING
 		padding-top: 12px;
@@ -214,9 +220,15 @@
 			border-radius: var(--border-radius-sm, 4px);
 			border: 1px solid var(--dark-border-color);
 
-			&.green { color: var(--green-500); }
-			&.red { color: var(--red-500); }
-			&.blue { color: var(--blue-500); }
+			&.green {
+				color: var(--green-500);
+			}
+			&.red {
+				color: var(--red-500);
+			}
+			&.blue {
+				color: var(--blue-500);
+			}
 
 			// SIZE & SPACING
 			min-width: 24px;
diff --git a/frappe/public/scss/desk/role_editor.scss b/frappe/public/scss/desk/role_editor.scss
index c4b8c3a270..aba9d9aba8 100644
--- a/frappe/public/scss/desk/role_editor.scss
+++ b/frappe/public/scss/desk/role_editor.scss
@@ -4,7 +4,8 @@ table.user-perm {
 	overflow-x: scroll;
 	-webkit-overflow-scrolling: touch;
 	-ms-overflow-style: -ms-autohiding-scrollbar;
-	tr td, tr th {
+	tr td,
+	tr th {
 		padding: 5px;
 		border-bottom: 1px solid var(--border-color);
 		min-width: 30px;
@@ -12,7 +13,7 @@ table.user-perm {
 			text-align: center;
 		}
 	}
-	--icon-stroke: var(--text-muted)
+	--icon-stroke: var(--text-muted);
 }
 
 .frappe-control {
@@ -28,7 +29,7 @@ table.user-perm {
 		label {
 			position: relative;
 		}
-		input[type=checkbox] {
+		input[type="checkbox"] {
 			margin-left: 0;
 		}
 	}
@@ -46,4 +47,4 @@ table.user-perm {
 .module-block-list .checkbox {
 	margin-bottom: var(--margin-xs);
 	font-size: var(--text-md);
-}
\ No newline at end of file
+}
diff --git a/frappe/public/scss/desk/sidebar.scss b/frappe/public/scss/desk/sidebar.scss
index 018c61d669..8a0f56e645 100644
--- a/frappe/public/scss/desk/sidebar.scss
+++ b/frappe/public/scss/desk/sidebar.scss
@@ -44,7 +44,6 @@ body[data-route^="Module"] .main-menu {
 		.es-icon {
 			margin: 0px 6px;
 		}
-
 	}
 	&.user-actions {
 		margin-bottom: 15px;
@@ -84,7 +83,6 @@ body[data-route^="Module"] .main-menu {
 	}
 
 	.form-tags {
-
 		.form-tag-row:not(:last-child) {
 			margin-bottom: var(--margin-sm);
 		}
@@ -256,7 +254,6 @@ body[data-route^="Module"] .main-menu {
 				background-color: var(--border-color);
 				opacity: 0.7;
 			}
-
 		}
 
 		@media (max-width: 767px) {
@@ -383,7 +380,7 @@ body[data-route^="Module"] .main-menu {
 			display: none;
 		}
 
-		input:not([data-fieldtype='Check']) {
+		input:not([data-fieldtype="Check"]) {
 			background: var(--control-bg-on-gray);
 		}
 
@@ -403,7 +400,8 @@ body[data-route^="Module"] .main-menu {
 	margin-bottom: 10px;
 }
 
-.attachment-row, .form-tag-row {
+.attachment-row,
+.form-tag-row {
 	margin-bottom: 3px;
 	max-width: 100%;
 	.data-pill {
@@ -446,13 +444,14 @@ body[data-route^="Module"] .main-menu {
 	margin-left: var(--margin-md);
 	margin-bottom: var(--margin-sm);
 	color: var(--text-light);
-
 }
 .form-assignments {
 	margin-top: 12px;
 }
-.form-assignments, .form-shared {
-	.assignments, .shares {
+.form-assignments,
+.form-shared {
+	.assignments,
+	.shares {
 		margin: var(--margin-xs) 0px;
 	}
 }
@@ -568,4 +567,4 @@ body[data-route^="Module"] .main-menu {
 
 .shared-user {
 	margin-bottom: 10px;
-}
\ No newline at end of file
+}
diff --git a/frappe/public/scss/desk/tags.scss b/frappe/public/scss/desk/tags.scss
index ba29ddd624..895206f140 100644
--- a/frappe/public/scss/desk/tags.scss
+++ b/frappe/public/scss/desk/tags.scss
@@ -13,4 +13,4 @@
 	.tag-pill {
 		background-color: var(--gray-900);
 	}
-}
\ No newline at end of file
+}
diff --git a/frappe/public/scss/desk/theme_switcher.scss b/frappe/public/scss/desk/theme_switcher.scss
index 0b14f0a9cd..ae95b9354c 100644
--- a/frappe/public/scss/desk/theme_switcher.scss
+++ b/frappe/public/scss/desk/theme_switcher.scss
@@ -112,4 +112,4 @@
 		background: var(--gray-900);
 		position: absolute;
 	}
-}
\ No newline at end of file
+}
diff --git a/frappe/public/scss/desk/timeline.scss b/frappe/public/scss/desk/timeline.scss
index 2cbfcb2234..1191cbfb08 100644
--- a/frappe/public/scss/desk/timeline.scss
+++ b/frappe/public/scss/desk/timeline.scss
@@ -9,7 +9,9 @@ $threshold: 34;
 	// doing this will prevent cssnano from converting 0px to 0
 	// clamp requires value unit to be valid
 	--zero-px: 0px;
-	top: unquote("clamp(var(--zero-px), 50% - #{$badge-size}/2, max(var(--zero-px), (#{$threshold}px - (50% - #{$badge-size}/2)) * #{$threshold}))");
+	top: unquote(
+		"clamp(var(--zero-px), 50% - #{$badge-size}/2, max(var(--zero-px), (#{$threshold}px - (50% - #{$badge-size}/2)) * #{$threshold}))"
+	);
 	left: calc(-1 * (#{$badge-size} / 2));
 	background-color: var(--timeline-badge-bg);
 	@extend .center-content;
@@ -24,7 +26,7 @@ $threshold: 34;
 		padding-left: calc(var(--padding-sm) + var(--timeline-item-icon-size) / 2);
 	}
 	&:before {
-		content: ' ';
+		content: " ";
 		top: 90px; // TODO: get top and bottom programmatically
 		left: calc(var(--timeline-item-icon-size) / 2);
 		position: absolute;
@@ -36,18 +38,20 @@ $threshold: 34;
 		left: calc(-1.25 * var(--timeline-item-left-margin) / 2);
 		background: var(--bg-color);
 		&:before {
-			content: ' ';
+			content: " ";
 			background: var(--timeline-badge-color);
 			border-radius: 50%;
 			height: 4px;
 			width: 4px;
 		}
 	}
-	.activity-title, .timeline-actions {
+	.activity-title,
+	.timeline-actions {
 		margin-bottom: 0 !important;
 		display: flex;
 		align-items: center;
-		.show-all-activity, .timeline-item {
+		.show-all-activity,
+		.timeline-item {
 			margin-bottom: 0;
 		}
 		min-height: 60px;
@@ -106,9 +110,9 @@ $threshold: 34;
 					margin: 0 var(--margin-sm);
 				}
 
-				.content{
+				.content {
 					padding-left: 42px;
-					.mention{
+					.mention {
 						background-color: transparent;
 						border: none;
 						font-weight: var(--weight-semibold);
@@ -120,7 +124,6 @@ $threshold: 34;
 		.timeline-badge {
 			@include timeline-badge(var(--timeline-item-icon-size));
 			left: calc(-1 * var(--timeline-item-left-margin));
-
 		}
 		.timeline-load-more {
 			margin-left: calc(var(--timeline-item-left-margin) + var(--padding-sm));
@@ -133,7 +136,7 @@ $threshold: 34;
 				overflow: auto;
 				max-height: 500px;
 				&::before {
-					content: '';
+					content: "";
 					display: block;
 					height: 1px;
 					margin-top: -10px;
@@ -157,7 +160,8 @@ $threshold: 34;
 				background-color: transparent;
 				--icon-stroke: var(--text-muted);
 			}
-			.action-btn, .custom-actions {
+			.action-btn,
+			.custom-actions {
 				@include get_textstyle("sm", "regular");
 			}
 
diff --git a/frappe/public/scss/desk/toast.scss b/frappe/public/scss/desk/toast.scss
index a70f6d3948..695c7118b7 100644
--- a/frappe/public/scss/desk/toast.scss
+++ b/frappe/public/scss/desk/toast.scss
@@ -97,7 +97,7 @@
 			color: var(--text-light);
 
 			&:hover {
-				color: var(--text-color)
+				color: var(--text-color);
 			}
 
 			&:last-child {
@@ -138,7 +138,9 @@
 }
 
 @keyframes backOutRight {
-	0% { opacity: 1; }
+	0% {
+		opacity: 1;
+	}
 
 	100% {
 		-webkit-transform: translateX(2000px);
diff --git a/frappe/public/scss/desk/tree.scss b/frappe/public/scss/desk/tree.scss
index a0cffaa203..5e9a2fe3c1 100644
--- a/frappe/public/scss/desk/tree.scss
+++ b/frappe/public/scss/desk/tree.scss
@@ -107,7 +107,8 @@
 
 // decoration
 // .tree, .tree-node {
-.tree.with-skeleton, .tree.with-skeleton .tree-node {
+.tree.with-skeleton,
+.tree.with-skeleton .tree-node {
 	position: relative;
 
 	// &.opened::before, &:last-child::after {
@@ -158,4 +159,4 @@
 .tree-node.hover-active {
 	background-color: var(--fg-hover-color);
 	border-radius: var(--border-radius-sm);
-}
\ No newline at end of file
+}
diff --git a/frappe/public/scss/desk/typography.scss b/frappe/public/scss/desk/typography.scss
index 833523a67e..a642cc852a 100644
--- a/frappe/public/scss/desk/typography.scss
+++ b/frappe/public/scss/desk/typography.scss
@@ -25,4 +25,4 @@ $h2-font-size: 1.5rem;
 $h3-font-size: 1.25rem;
 $h4-font-size: 1.125rem;
 $h5-font-size: 0.875rem;
-$h6-font-size: 0.6875rem;
\ No newline at end of file
+$h6-font-size: 0.6875rem;
diff --git a/frappe/public/scss/desk/user_profile.scss b/frappe/public/scss/desk/user_profile.scss
index 0a15a077f0..2fbb3e14a8 100644
--- a/frappe/public/scss/desk/user_profile.scss
+++ b/frappe/public/scss/desk/user_profile.scss
@@ -97,4 +97,4 @@
 			}
 		}
 	}
-}
\ No newline at end of file
+}
diff --git a/frappe/public/scss/desk/variables.scss b/frappe/public/scss/desk/variables.scss
index 552161787f..fdd5a4dbb7 100644
--- a/frappe/public/scss/desk/variables.scss
+++ b/frappe/public/scss/desk/variables.scss
@@ -4,11 +4,11 @@
 @import "../espresso/shadows";
 @import "../espresso/borders";
 
-html, body {
+html,
+body {
 	font-size: 16px;
 }
 
-
 $border-color: var(--border-color);
 $code-color: var(--purple-600);
 
@@ -19,15 +19,15 @@ $border-radius-lg: var(--border-radius-lg);
 $nav-divider-margin-y: 4px;
 
 $container-max-widths: (
-  sm: 540px,
-  md: 840px,
-  lg: 1090px,
-  xl: 1290px
+	sm: 540px,
+	md: 840px,
+	lg: 1090px,
+	xl: 1290px,
 );
 
 $theme-colors: (
-  "primary": $primary,
-  "danger": $danger
+	"primary": $primary,
+	"danger": $danger,
 );
 
 $navbar-height: 48px;
@@ -77,7 +77,7 @@ $btn-font-weight: 400 !default;
 $btn-active-box-shadow: var(--shadow-inset);
 
 // mark
-$mark-bg: #FDF9AF;
+$mark-bg: #fdf9af;
 $mark-padding: 0;
 
 // transitions
@@ -88,7 +88,7 @@ $input-transition: none;
 $enable-shadows: true;
 $popover-border-radius: 12px;
 $popover-bg: var(--popover-bg);
-$popover-box-shadow: 	var(--shadow-2xl);
+$popover-box-shadow: var(--shadow-2xl);
 $popover-body-padding-x: var(--padding-md);
 $popover-body-padding-y: var(--padding-md);
 $popover-border-color: transparent;
@@ -119,17 +119,17 @@ $dropdown-item-padding-x: var(--padding-sm);
 
 $spacer: 14px;
 $grid-breakpoints: (
-  xs: 0,
-  sm: 576px,
-  md: 768px,
-  lg: 992px,
-  xl: 1200px,
-  2xl: 1440px
+	xs: 0,
+	sm: 576px,
+	md: 768px,
+	lg: 992px,
+	xl: 1200px,
+	2xl: 1440px,
 ) !default;
 
-@import 'typography';
-@import '~bootstrap/scss/functions';
-@import '~bootstrap/scss/variables';
+@import "typography";
+@import "~bootstrap/scss/functions";
+@import "~bootstrap/scss/variables";
 @import "~bootstrap/scss/mixins";
-@import 'css_variables';
-@import 'dark';
+@import "css_variables";
+@import "dark";
diff --git a/frappe/public/scss/desk/version.scss b/frappe/public/scss/desk/version.scss
index ddcf1f07a5..e0ddb3d4c2 100644
--- a/frappe/public/scss/desk/version.scss
+++ b/frappe/public/scss/desk/version.scss
@@ -22,7 +22,8 @@
 
 [data-theme="dark"] {
 	.version-info {
-		.danger, .success {
+		.danger,
+		.success {
 			color: var(--gray-900);
 
 			td {
@@ -30,4 +31,4 @@
 			}
 		}
 	}
-}
\ No newline at end of file
+}
diff --git a/frappe/public/scss/element/checkbox.scss b/frappe/public/scss/element/checkbox.scss
index 864d64e25f..628667f902 100644
--- a/frappe/public/scss/element/checkbox.scss
+++ b/frappe/public/scss/element/checkbox.scss
@@ -37,14 +37,16 @@ input[type="checkbox"] {
 		box-shadow: var(--checkbox-focus-shadow);
 	}
 
-	&.disabled-deselected, &:disabled {
+	&.disabled-deselected,
+	&:disabled {
 		background-color: var(--disabled-control-bg);
 		box-shadow: inset 0px 1px 7px rgba(0, 0, 0, 0.1);
 		border: 0.5px solid var(--dark-border-color);
 		pointer-events: none;
 	}
 
-	&.disabled-selected, &:disabled:checked {
+	&.disabled-selected,
+	&:disabled:checked {
 		background-color: var(--gray-600);
 		background-image: $check-icon;
 		background-size: 57%;
@@ -60,17 +62,17 @@ input[type="checkbox"] {
 	display: inline-block;
 	width: 26px;
 	height: 16px;
-  }
+}
 
-  /* Hide default HTML checkbox */
-  .switch input {
+/* Hide default HTML checkbox */
+.switch input {
 	opacity: 0;
 	width: 0;
 	height: 0;
-  }
+}
 
-  /* The slider */
-  .slider {
+/* The slider */
+.slider {
 	position: absolute;
 	cursor: pointer;
 	top: 0;
@@ -78,11 +80,11 @@ input[type="checkbox"] {
 	right: 0;
 	bottom: 0;
 	background-color: var(--switch-bg);
-	-webkit-transition: .4s;
-	transition: .4s;
-  }
+	-webkit-transition: 0.4s;
+	transition: 0.4s;
+}
 
-  .slider:before {
+.slider:before {
 	position: absolute;
 	content: "";
 	height: 12px;
@@ -90,33 +92,33 @@ input[type="checkbox"] {
 	left: 2px;
 	bottom: 2px;
 	background-color: var(--neutral);
-	-webkit-transition: .4s;
-	transition: .4s;
-  }
+	-webkit-transition: 0.4s;
+	transition: 0.4s;
+}
 
-  input:checked + .slider {
+input:checked + .slider {
 	background-color: var(--invert-neutral);
-  }
+}
 
-  input:focus + .slider {
-	box-shadow: var(--focus-default)
-  }
+input:focus + .slider {
+	box-shadow: var(--focus-default);
+}
 
-  input:checked + .slider:before {
+input:checked + .slider:before {
 	-webkit-transform: translateX(10px);
 	-ms-transform: translateX(10px);
 	transform: translateX(10px);
-  }
+}
 
-  /* Rounded sliders */
-  .slider.round {
+/* Rounded sliders */
+.slider.round {
 	border-radius: 34px;
-  }
+}
 
-  label.switch {
+label.switch {
 	margin-bottom: 0;
-  }
+}
 
-  .slider.round:before {
+.slider.round:before {
 	border-radius: 50%;
-  }
\ No newline at end of file
+}
diff --git a/frappe/public/scss/element/radio.scss b/frappe/public/scss/element/radio.scss
index b471832a9b..43fa98c550 100644
--- a/frappe/public/scss/element/radio.scss
+++ b/frappe/public/scss/element/radio.scss
@@ -24,7 +24,7 @@ input[type="radio"] {
 		width: var(--checkbox-size);
 		height: var(--checkbox-size);
 		position: absolute;
-		content: ' ';
+		content: " ";
 		border: 1px solid var(--gray-400);
 		border-radius: 16px;
 	}
@@ -34,4 +34,4 @@ input[type="radio"] {
 		border-radius: 16px;
 		box-shadow: inset 0 0 0 2px white;
 	}
-}
\ No newline at end of file
+}
diff --git a/frappe/public/scss/email.bundle.scss b/frappe/public/scss/email.bundle.scss
index 9b58c130a2..ef274f023f 100644
--- a/frappe/public/scss/email.bundle.scss
+++ b/frappe/public/scss/email.bundle.scss
@@ -1,30 +1,31 @@
 $white: #fff;
-$gray-900: #1F272E;
-$gray-800: #333C44;
-$gray-700: #505A62;
+$gray-900: #1f272e;
+$gray-800: #333c44;
+$gray-700: #505a62;
 $gray-600: #687178;
-$gray-500: #98A1A9;
-$gray-400: #C0C6CC;
-$gray-300: #DCE0E3;
-$gray-200: #EBEEF0;
-$gray-100: #F4F5F6;
-$gray-50: #F9FAFA;
-$primary: #2490EF;
+$gray-500: #98a1a9;
+$gray-400: #c0c6cc;
+$gray-300: #dce0e3;
+$gray-200: #ebeef0;
+$gray-100: #f4f5f6;
+$gray-50: #f9fafa;
+$primary: #2490ef;
 
-$blue-500: #2D95F0;
+$blue-500: #2d95f0;
 
 $text-color: $gray-900;
 $border-color: $gray-100;
 $dark-border-color: $gray-200;
-$font-stack: "-apple-system", "BlinkMacSystemFont","Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell","Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+$font-stack: "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto", "Oxygen", "Ubuntu",
+	"Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
 $text-muted: $gray-600;
 $text-extra-muted: $gray-400;
 $border-radius: 6px;
 $border-radius-sm: 4px;
 $border-radius-lg: 8px;
 
-$orange-bg: #FFEAE1;
-$orange-color: #CB5A2A;
+$orange-bg: #ffeae1;
+$orange-color: #cb5a2a;
 
 body {
 	line-height: 1.5;
@@ -86,7 +87,9 @@ hr {
 	}
 }
 
-.email-header, .email-body, .email-footer {
+.email-header,
+.email-body,
+.email-footer {
 	width: 100% !important;
 	min-width: 100% !important;
 }
@@ -195,7 +198,8 @@ hr {
 	width: 100%;
 	border-collapse: collapse;
 
-	td, th {
+	td,
+	th {
 		padding: 8px;
 		line-height: 1.42857143;
 		vertical-align: top;
@@ -219,7 +223,8 @@ hr {
 	&.table-bordered {
 		border: 1px solid $border-color;
 
-		td, th {
+		td,
+		th {
 			border: 1px solid $border-color;
 		}
 	}
@@ -340,4 +345,4 @@ blockquote {
 	p {
 		margin: 5px 0;
 	}
-}
\ No newline at end of file
+}
diff --git a/frappe/public/scss/espresso/_borders.scss b/frappe/public/scss/espresso/_borders.scss
index 98390f9a08..24ce61186e 100644
--- a/frappe/public/scss/espresso/_borders.scss
+++ b/frappe/public/scss/espresso/_borders.scss
@@ -1,10 +1,10 @@
 :root {
-    --border-radius-tiny: 4px;
-    --border-radius-sm: 8px;
-    --border-radius: 8px;
-    --border-radius-md: 10px;
-    --border-radius-lg: 12px;
-    --border-radius-xl: 16px;
-    --border-radius-2xl: 20px;
-    --border-radius-full: 999px;
-}
\ No newline at end of file
+	--border-radius-tiny: 4px;
+	--border-radius-sm: 8px;
+	--border-radius: 8px;
+	--border-radius-md: 10px;
+	--border-radius-lg: 12px;
+	--border-radius-xl: 16px;
+	--border-radius-2xl: 20px;
+	--border-radius-full: 999px;
+}
diff --git a/frappe/public/scss/espresso/_colors.scss b/frappe/public/scss/espresso/_colors.scss
index 23c706fa77..564b7b33db 100644
--- a/frappe/public/scss/espresso/_colors.scss
+++ b/frappe/public/scss/espresso/_colors.scss
@@ -1,5 +1,6 @@
 // colors
-$color_list: gray, blue, green, red, orange, amber, yellow, cyan, teal, violet, pink, purple, white-overlay, black-overlay;
+$color_list: gray, blue, green, red, orange, amber, yellow, cyan, teal, violet, pink, purple,
+	white-overlay, black-overlay;
 
 $gray-50: #f8f8f8;
 $gray-100: #f3f3f3;
@@ -16,176 +17,189 @@ $primary: $gray-900;
 $primary-light: lighten($primary, 80%) !default;
 
 $danger: #e03636;
-$light-yellow: #FEF4E2;
+$light-yellow: #fef4e2;
 
 :root {
-    --neutral-white: #ffffff;
-    --neutral-black: #000000;
-    --neutral: var(--neutral-white);
-    --invert-neutral: var(--neutral-black);
+	--neutral-white: #ffffff;
+	--neutral-black: #000000;
+	--neutral: var(--neutral-white);
+	--invert-neutral: var(--neutral-black);
 
-    --gray-50: #f8f8f8;
-    --gray-100: #f3f3f3;
-    --gray-200: #ededed;
-    --gray-300: #e2e2e2;
-    --gray-400: #c7c7c7;
-    --gray-500: #999999;
-    --gray-600: #7c7c7c;
-    --gray-700: #525252;
-    --gray-800: #383838;
-    --gray-900: #171717;
+	--gray-50: #f8f8f8;
+	--gray-100: #f3f3f3;
+	--gray-200: #ededed;
+	--gray-300: #e2e2e2;
+	--gray-400: #c7c7c7;
+	--gray-500: #999999;
+	--gray-600: #7c7c7c;
+	--gray-700: #525252;
+	--gray-800: #383838;
+	--gray-900: #171717;
 
-    --blue-50: #f7fbfd;
-    --blue-100: #edf6fd;
-    --blue-200: #e3f1fd;
-    --blue-300: #c9e7fc;
-    --blue-400: #70b6f0;
-    --blue-500: #0289f7;
-    --blue-600: #007be0;
-    --blue-700: #0070cc;
-    --blue-800: #005ca3;
-    --blue-900: #004880;
+	--blue-50: #f7fbfd;
+	--blue-100: #edf6fd;
+	--blue-200: #e3f1fd;
+	--blue-300: #c9e7fc;
+	--blue-400: #70b6f0;
+	--blue-500: #0289f7;
+	--blue-600: #007be0;
+	--blue-700: #0070cc;
+	--blue-800: #005ca3;
+	--blue-900: #004880;
 
-    --green-50: #f3fcf5;
-    --green-100: #e4f5e9;
-    --green-200: #daf0e1;
-    --green-300: #cae5d4;
-    --green-400: #b6dec5;
-    --green-500: #59ba8b;
-    --green-600: #30a66d;
-    --green-700: #278f5e;
-    --green-800: #16794c;
-    --green-900: #173b2c;
+	--green-50: #f3fcf5;
+	--green-100: #e4f5e9;
+	--green-200: #daf0e1;
+	--green-300: #cae5d4;
+	--green-400: #b6dec5;
+	--green-500: #59ba8b;
+	--green-600: #30a66d;
+	--green-700: #278f5e;
+	--green-800: #16794c;
+	--green-900: #173b2c;
 
-    --red-50: #fff7f7;
-    --red-100: #fff0f0;
-    --red-200: #fcd7d7;
-    --red-300: #f9c6c6;
-    --red-400: #eb9091;
-    --red-500: #e03636;
-    --red-600: #cc2929;
-    --red-700: #b52a2a;
-    --red-800: #941f1f;
-    --red-900: #6b1515;
+	--red-50: #fff7f7;
+	--red-100: #fff0f0;
+	--red-200: #fcd7d7;
+	--red-300: #f9c6c6;
+	--red-400: #eb9091;
+	--red-500: #e03636;
+	--red-600: #cc2929;
+	--red-700: #b52a2a;
+	--red-800: #941f1f;
+	--red-900: #6b1515;
 
-    --orange-50: #fff9f5;
-    --orange-100: #fff1e7;
-    --orange-200: #fce6d5;
-    --orange-300: #f7d6bd;
-    --orange-400: #f0b58b;
-    --orange-500: #e86c13;
-    --orange-600: #d45a08;
-    --orange-700: #bd3e0c;
-    --orange-800: #9e3513;
-    --orange-900: #6b2711;
+	--orange-50: #fff9f5;
+	--orange-100: #fff1e7;
+	--orange-200: #fce6d5;
+	--orange-300: #f7d6bd;
+	--orange-400: #f0b58b;
+	--orange-500: #e86c13;
+	--orange-600: #d45a08;
+	--orange-700: #bd3e0c;
+	--orange-800: #9e3513;
+	--orange-900: #6b2711;
 
-    --amber-50: #fdfaed;
-    --amber-100: #fcf3cf;
-    --amber-200: #f7e28d;
-    --amber-300: #f5d261;
-    --amber-400: #f2be3a;
-    --amber-500: #e79913;
-    --amber-600: #db7706;
-    --amber-700: #b35309;
-    --amber-800: #91400d;
-    --amber-900: #763813;
+	--amber-50: #fdfaed;
+	--amber-100: #fcf3cf;
+	--amber-200: #f7e28d;
+	--amber-300: #f5d261;
+	--amber-400: #f2be3a;
+	--amber-500: #e79913;
+	--amber-600: #db7706;
+	--amber-700: #b35309;
+	--amber-800: #91400d;
+	--amber-900: #763813;
 
-    --yellow-50: #fffcef;
-    --yellow-100: #fff7d3;
-    --yellow-200: #f7e9a8;
-    --yellow-300: #f5e171;
-    --yellow-400: #f2d14b;
-    --yellow-500: #edba13;
-    --yellow-600: #d1930d;
-    --yellow-700: #ab6e05;
-    --yellow-800: #8c5600;
-    --yellow-900: #733f12;
+	--yellow-50: #fffcef;
+	--yellow-100: #fff7d3;
+	--yellow-200: #f7e9a8;
+	--yellow-300: #f5e171;
+	--yellow-400: #f2d14b;
+	--yellow-500: #edba13;
+	--yellow-600: #d1930d;
+	--yellow-700: #ab6e05;
+	--yellow-800: #8c5600;
+	--yellow-900: #733f12;
 
-    --cyan-50: #f5fbfc;
-    --cyan-100: #e0f8ff;
-    --cyan-200: #b3ecfc;
-    --cyan-300: #94e6ff;
-    --cyan-400: #6bd3f2;
-    --cyan-500: #34bae3;
-    --cyan-600: #32a4c7;
-    --cyan-700: #267a94;
-    --cyan-800: #125c73;
-    --cyan-900: #164759;
+	--cyan-50: #f5fbfc;
+	--cyan-100: #e0f8ff;
+	--cyan-200: #b3ecfc;
+	--cyan-300: #94e6ff;
+	--cyan-400: #6bd3f2;
+	--cyan-500: #34bae3;
+	--cyan-600: #32a4c7;
+	--cyan-700: #267a94;
+	--cyan-800: #125c73;
+	--cyan-900: #164759;
 
-    --teal-50: #f0fdfa;
-    --teal-100: #e6f7f4;
-    --teal-200: #bae8e1;
-    --teal-300: #97ded4;
-    --teal-400: #73d1c4;
-    --teal-500: #36baad;
-    --teal-600: #0b9e92;
-    --teal-700: #0f736b;
-    --teal-800: #115c57;
-    --teal-900: #114541;
+	--teal-50: #f0fdfa;
+	--teal-100: #e6f7f4;
+	--teal-200: #bae8e1;
+	--teal-300: #97ded4;
+	--teal-400: #73d1c4;
+	--teal-500: #36baad;
+	--teal-600: #0b9e92;
+	--teal-700: #0f736b;
+	--teal-800: #115c57;
+	--teal-900: #114541;
 
-    --violet-50: #fbfaff;
-    --violet-100: #f5f2ff;
-    --violet-200: #e5e1fa;
-    --violet-300: #dad2f7;
-    --violet-400: #bdb1f0;
-    --violet-500: #6846e3;
-    --violet-600: #5f46c7;
-    --violet-700: #4f3da1;
-    --violet-800: #392980;
-    --violet-900: #251959;
+	--violet-50: #fbfaff;
+	--violet-100: #f5f2ff;
+	--violet-200: #e5e1fa;
+	--violet-300: #dad2f7;
+	--violet-400: #bdb1f0;
+	--violet-500: #6846e3;
+	--violet-600: #5f46c7;
+	--violet-700: #4f3da1;
+	--violet-800: #392980;
+	--violet-900: #251959;
 
-    --pink-50: #fff7fc;
-    --pink-100: #feeef8;
-    --pink-200: #f8e2f0;
-    --pink-300: #f2d4e6;
-    --pink-400: #e9c4da;
-    --pink-500: #e34aa6;
-    --pink-600: #cf3a96;
-    --pink-700: #9c2671;
-    --pink-800: #801458;
-    --pink-900: #570f3e;
+	--pink-50: #fff7fc;
+	--pink-100: #feeef8;
+	--pink-200: #f8e2f0;
+	--pink-300: #f2d4e6;
+	--pink-400: #e9c4da;
+	--pink-500: #e34aa6;
+	--pink-600: #cf3a96;
+	--pink-700: #9c2671;
+	--pink-800: #801458;
+	--pink-900: #570f3e;
 
-    --purple-50: #fdfaff;
-    --purple-100: #f9f0ff;
-    --purple-200: #f1e5fa;
-    --purple-300: #e9d6f5;
-    --purple-400: #d6c1e6;
-    --purple-500: #9c45e3;
-    --purple-600: #8642c2;
-    --purple-700: #6e399d;
-    --purple-800: #5c2f83;
-    --purple-900: #401863;
+	--purple-50: #fdfaff;
+	--purple-100: #f9f0ff;
+	--purple-200: #f1e5fa;
+	--purple-300: #e9d6f5;
+	--purple-400: #d6c1e6;
+	--purple-500: #9c45e3;
+	--purple-600: #8642c2;
+	--purple-700: #6e399d;
+	--purple-800: #5c2f83;
+	--purple-900: #401863;
 
-    // overlays
-    --white-overlay-50: rgba(255,255,255,0.090);
-    --white-overlay-100: rgba(255,255,255,0.180);
-    --white-overlay-200: rgba(255,255,255,0.270);
-    --white-overlay-300: rgba(255,255,255,0.360);
-    --white-overlay-400: rgba(255,255,255,0.450);
-    --white-overlay-500: rgba(255,255,255,0.540);
-    --white-overlay-600: rgba(255,255,255,0.630);
-    --white-overlay-700: rgba(255,255,255,0.720);
-    --white-overlay-800: rgba(255,255,255,0.810);
-    --white-overlay-900: rgba(255,255,255,0.900);
+	// overlays
+	--white-overlay-50: rgba(255, 255, 255, 0.09);
+	--white-overlay-100: rgba(255, 255, 255, 0.18);
+	--white-overlay-200: rgba(255, 255, 255, 0.27);
+	--white-overlay-300: rgba(255, 255, 255, 0.36);
+	--white-overlay-400: rgba(255, 255, 255, 0.45);
+	--white-overlay-500: rgba(255, 255, 255, 0.54);
+	--white-overlay-600: rgba(255, 255, 255, 0.63);
+	--white-overlay-700: rgba(255, 255, 255, 0.72);
+	--white-overlay-800: rgba(255, 255, 255, 0.81);
+	--white-overlay-900: rgba(255, 255, 255, 0.9);
 
-    --black-overlay-50: rgba(0,0,0,0.090);
-    --black-overlay-100: rgba(0,0,0,0.180);
-    --black-overlay-200: rgba(0,0,0,0.270);
-    --black-overlay-300: rgba(0,0,0,0.360);
-    --black-overlay-400: rgba(0,0,0,0.450);
-    --black-overlay-500: rgba(0,0,0,0.540);
-    --black-overlay-600: rgba(0,0,0,0.630);
-    --black-overlay-700: rgba(0,0,0,0.720);
-    --black-overlay-800: rgba(0,0,0,0.810);
-    --black-overlay-900: rgba(0,0,0,0.900);
-
-    // gradients
-    --linear-black: linear-gradient(to bottom, rgba(46,46,46,0.180) 0%,rgba(36,36,36,0.140) 100%);
-    --linear-blue: linear-gradient(to bottom, rgba(17,142,245,0.067) 0%,rgba(7,127,247,0.029) 100%);
-    --angular-white: conic-gradient(rgba(255,255,255,1) 72.38%,rgba(255,255,255,1) 99.87%);
-    --angular-black: conic-gradient(rgba(56,56,56,0.220) 72.38%,rgba(56,56,56,0.220) 99.87%);
-    --angular-green: conic-gradient(rgba(23,117,75,0.092) 72.38%,rgba(23,117,75,0.092) 99.87%);
-    --angular-red: conic-gradient(rgba(205,41,41,0.804) 72.38%,rgba(205,41,41,0.804) 99.87%);
-    --angular-blue: conic-gradient(rgba(0,110,219,0.000) 72.38%,rgba(0,110,219,0.000) 99.87%);
+	--black-overlay-50: rgba(0, 0, 0, 0.09);
+	--black-overlay-100: rgba(0, 0, 0, 0.18);
+	--black-overlay-200: rgba(0, 0, 0, 0.27);
+	--black-overlay-300: rgba(0, 0, 0, 0.36);
+	--black-overlay-400: rgba(0, 0, 0, 0.45);
+	--black-overlay-500: rgba(0, 0, 0, 0.54);
+	--black-overlay-600: rgba(0, 0, 0, 0.63);
+	--black-overlay-700: rgba(0, 0, 0, 0.72);
+	--black-overlay-800: rgba(0, 0, 0, 0.81);
+	--black-overlay-900: rgba(0, 0, 0, 0.9);
 
+	// gradients
+	--linear-black: linear-gradient(
+		to bottom,
+		rgba(46, 46, 46, 0.18) 0%,
+		rgba(36, 36, 36, 0.14) 100%
+	);
+	--linear-blue: linear-gradient(
+		to bottom,
+		rgba(17, 142, 245, 0.067) 0%,
+		rgba(7, 127, 247, 0.029) 100%
+	);
+	--angular-white: conic-gradient(rgba(255, 255, 255, 1) 72.38%, rgba(255, 255, 255, 1) 99.87%);
+	--angular-black: conic-gradient(rgba(56, 56, 56, 0.22) 72.38%, rgba(56, 56, 56, 0.22) 99.87%);
+	--angular-green: conic-gradient(
+		rgba(23, 117, 75, 0.092) 72.38%,
+		rgba(23, 117, 75, 0.092) 99.87%
+	);
+	--angular-red: conic-gradient(
+		rgba(205, 41, 41, 0.804) 72.38%,
+		rgba(205, 41, 41, 0.804) 99.87%
+	);
+	--angular-blue: conic-gradient(rgba(0, 110, 219, 0) 72.38%, rgba(0, 110, 219, 0) 99.87%);
 }
diff --git a/frappe/public/scss/espresso/_shadows.scss b/frappe/public/scss/espresso/_shadows.scss
index 93fcef1769..e53ee56916 100644
--- a/frappe/public/scss/espresso/_shadows.scss
+++ b/frappe/public/scss/espresso/_shadows.scss
@@ -1,12 +1,16 @@
-:root{
+:root {
 	// Drop Shadows
-	--shadow-xs:  rgba(0, 0, 0, 0.05) 0px 0.5px 0px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px, rgba(0, 0, 0, 0.05) 0px 2px 4px 0px;
-	--shadow-sm: 0px 1px 2px rgba(0,0,0,0.100);
-	--shadow-base: 0px 0px 1px rgba(0,0,0,0.450), 0px 1px 2px rgba(0,0,0,0.100);
-	--shadow-md: 0px 0px 1px rgba(0,0,0,0.120), 0px 0.5px 2px rgba(0,0,0,0.150), 0px 2px 3px rgba(0,0,0,0.160);
-	--shadow-lg: 0px 0px 1px rgba(0,0,0,0.350), 0px 6px 8px -4px rgba(0,0,0,0.100);
-	--shadow-xl: 0px 0px 1px rgba(0,0,0,0.190), 0px 1px 2px rgba(0,0,0,0.070), 0px 6px 15px -5px rgba(0,0,0,0.110);
-	--shadow-2xl: 0px 0px 1px rgba(0,0,0,0.200), 0px 1px 3px rgba(0,0,0,0.050), 0px 10px 24px -3px rgba(0,0,0,0.100);
+	--shadow-xs: rgba(0, 0, 0, 0.05) 0px 0.5px 0px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px,
+		rgba(0, 0, 0, 0.05) 0px 2px 4px 0px;
+	--shadow-sm: 0px 1px 2px rgba(0, 0, 0, 0.1);
+	--shadow-base: 0px 0px 1px rgba(0, 0, 0, 0.45), 0px 1px 2px rgba(0, 0, 0, 0.1);
+	--shadow-md: 0px 0px 1px rgba(0, 0, 0, 0.12), 0px 0.5px 2px rgba(0, 0, 0, 0.15),
+		0px 2px 3px rgba(0, 0, 0, 0.16);
+	--shadow-lg: 0px 0px 1px rgba(0, 0, 0, 0.35), 0px 6px 8px -4px rgba(0, 0, 0, 0.1);
+	--shadow-xl: 0px 0px 1px rgba(0, 0, 0, 0.19), 0px 1px 2px rgba(0, 0, 0, 0.07),
+		0px 6px 15px -5px rgba(0, 0, 0, 0.11);
+	--shadow-2xl: 0px 0px 1px rgba(0, 0, 0, 0.2), 0px 1px 3px rgba(0, 0, 0, 0.05),
+		0px 10px 24px -3px rgba(0, 0, 0, 0.1);
 
 	// Input Focus Rings
 	--focus-default: 0px 0px 0px 2px #c9c9c9;
@@ -17,8 +21,9 @@
 
 	// Custom Shadows
 	--custom-status: 0px 0px 0px 1.5px #ffffff;
-	--custom-shadow-sm: 0px 1px 4px rgba(0,0,0,0.100);
+	--custom-shadow-sm: 0px 1px 4px rgba(0, 0, 0, 0.1);
 
 	// Revisit and remove if unused
-	--drop-shadow: 0px 0.5px 0px rgba(0, 0, 0, 0.05), 0px 0px 0px rgba(0, 0, 0, 0), 0px 2px 4px rgba(0, 0, 0, 0.05);
-}
\ No newline at end of file
+	--drop-shadow: 0px 0.5px 0px rgba(0, 0, 0, 0.05), 0px 0px 0px rgba(0, 0, 0, 0),
+		0px 2px 4px rgba(0, 0, 0, 0.05);
+}
diff --git a/frappe/public/scss/espresso/_spacing.scss b/frappe/public/scss/espresso/_spacing.scss
index 66d5af34fa..c4281f7279 100644
--- a/frappe/public/scss/espresso/_spacing.scss
+++ b/frappe/public/scss/espresso/_spacing.scss
@@ -1,8 +1,8 @@
 :root {
-    // Input Padding
-    --input-padding: 6px 8px;
-    --dropdown-padding: 4px 8px;
-    --grid-padding: 10px 8px;
-    --disabled-input-padding: 3px 8px;
-    --number-card-padding: 8px 8px 8px 12px;
-}
\ No newline at end of file
+	// Input Padding
+	--input-padding: 6px 8px;
+	--dropdown-padding: 4px 8px;
+	--grid-padding: 10px 8px;
+	--disabled-input-padding: 3px 8px;
+	--number-card-padding: 8px 8px 8px 12px;
+}
diff --git a/frappe/public/scss/espresso/_typography.scss b/frappe/public/scss/espresso/_typography.scss
index 20d83c5c84..979dfb4c1c 100644
--- a/frappe/public/scss/espresso/_typography.scss
+++ b/frappe/public/scss/espresso/_typography.scss
@@ -1,5 +1,6 @@
 :root {
-	--font-stack: "Inter V", "Inter", "-apple-system", "BlinkMacSystemFont","Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell","Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	--font-stack: "Inter V", "Inter", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto",
+		"Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
 	// font size
 	--text-tiny: 11px;
 	--text-2xs: 12px;
@@ -41,7 +42,6 @@
 	--para-line-height-2xl: 148%;
 	--para-line-height-3xl: 140%;
 
-
 	// font color
 	--heading-color: var(--gray-900);
 	--text-neutral: var(--gray-900);
@@ -85,15 +85,15 @@ $letter-space-heavy: (
 	$heavy: map-get($letter-space-heavy, $name);
 	@if ((index($weight-list, $heavy) or length($weight-list)) <= index($weight-list, $weight)) {
 		@return map-get($letter-space, #{$name}-heavy);
-	};
+	}
 	@return map-get($letter-space, $name);
-};
+}
 
-@mixin get_textstyle($name, $weight){
+@mixin get_textstyle($name, $weight) {
 	font-size: var(--text-#{$name});
 	font-weight: var(--weight-#{$weight});
 	letter-spacing: get_letterspacing($name, $weight);
-	@if $name == 'tiny' {
+	@if $name == "tiny" {
 		text-transform: "uppercase";
-	};
-}
\ No newline at end of file
+	}
+}
diff --git a/frappe/public/scss/login.bundle.scss b/frappe/public/scss/login.bundle.scss
index 64c8efbc08..66834017f4 100644
--- a/frappe/public/scss/login.bundle.scss
+++ b/frappe/public/scss/login.bundle.scss
@@ -214,4 +214,4 @@ body {
 		letter-spacing: 0.01em;
 		color: var(--text-color);
 	}
-}
\ No newline at end of file
+}
diff --git a/frappe/public/scss/print.bundle.scss b/frappe/public/scss/print.bundle.scss
index 208f475f07..a69bcbe4b4 100644
--- a/frappe/public/scss/print.bundle.scss
+++ b/frappe/public/scss/print.bundle.scss
@@ -45,4 +45,4 @@
 	* {
 		overflow-wrap: anywhere;
 	}
-}
\ No newline at end of file
+}
diff --git a/frappe/public/scss/website.bundle.scss b/frappe/public/scss/website.bundle.scss
index bcbb6f3c6a..d014926fc1 100644
--- a/frappe/public/scss/website.bundle.scss
+++ b/frappe/public/scss/website.bundle.scss
@@ -1 +1 @@
-@import './website/index';
\ No newline at end of file
+@import "./website/index";
diff --git a/frappe/public/scss/website/base.scss b/frappe/public/scss/website/base.scss
index 62a7ea87e9..29740f5f17 100644
--- a/frappe/public/scss/website/base.scss
+++ b/frappe/public/scss/website/base.scss
@@ -25,7 +25,10 @@ img {
 	height: auto;
 }
 
-h1, h2, h3, h4 {
+h1,
+h2,
+h3,
+h4 {
 	font-weight: 600;
 }
 
diff --git a/frappe/public/scss/website/blog.scss b/frappe/public/scss/website/blog.scss
index 611390f7ca..15cabf9192 100644
--- a/frappe/public/scss/website/blog.scss
+++ b/frappe/public/scss/website/blog.scss
@@ -24,7 +24,7 @@
 	width: 100%;
 
 	.card {
-		border: 1px solid var(--border-color)
+		border: 1px solid var(--border-color);
 	}
 
 	.card-body {
@@ -114,7 +114,6 @@
 		margin-bottom: 5rem;
 	}
 
-
 	.feedback-item svg {
 		vertical-align: sub;
 	}
diff --git a/frappe/public/scss/website/css_variables.scss b/frappe/public/scss/website/css_variables.scss
index 2b9be4eb8b..59f090a22f 100644
--- a/frappe/public/scss/website/css_variables.scss
+++ b/frappe/public/scss/website/css_variables.scss
@@ -1,4 +1,4 @@
-@import '../common/css_variables.scss';
+@import "../common/css_variables.scss";
 
 // Deprecated but remove after all use is removed as well.
 :root {
diff --git a/frappe/public/scss/website/doc.scss b/frappe/public/scss/website/doc.scss
index 8cc12e7e55..cc58087465 100644
--- a/frappe/public/scss/website/doc.scss
+++ b/frappe/public/scss/website/doc.scss
@@ -178,7 +178,7 @@ $navbar-height-lg: 4.5rem;
 		&::before {
 			height: 6rem;
 			margin-top: -6rem;
-			content: '';
+			content: "";
 			display: block;
 			visibility: hidden;
 		}
diff --git a/frappe/public/scss/website/error-state.scss b/frappe/public/scss/website/error-state.scss
index 98a97c2f71..ce4a6a0d8c 100644
--- a/frappe/public/scss/website/error-state.scss
+++ b/frappe/public/scss/website/error-state.scss
@@ -7,7 +7,7 @@
 		margin: var(--margin-2xl) auto;
 
 		@include media-breakpoint-down(sm) {
-			width: 80%
+			width: 80%;
 		}
 	}
 
@@ -15,5 +15,3 @@
 		@include get_textstyle("base", "regular");
 	}
 }
-
-
diff --git a/frappe/public/scss/website/footer.scss b/frappe/public/scss/website/footer.scss
index a40a9bfc2e..e112b1cbea 100644
--- a/frappe/public/scss/website/footer.scss
+++ b/frappe/public/scss/website/footer.scss
@@ -17,7 +17,8 @@
 	margin-top: 0.5rem;
 }
 
-.footer-link, .footer-child-item a {
+.footer-link,
+.footer-child-item a {
 	font-size: $font-size-sm;
 	font-weight: 500;
 	color: $gray-700;
@@ -34,7 +35,8 @@
 	}
 }
 
-.footer-col-left, .footer-col-right {
+.footer-col-left,
+.footer-col-right {
 	padding-top: 0.8rem;
 	padding-bottom: 1rem;
 	line-height: 2;
@@ -91,7 +93,8 @@
 .footer-logo-extension {
 	.input-group {
 		justify-content: flex-end;
-		#footer-subscribe-email, #footer-subscribe-button {
+		#footer-subscribe-email,
+		#footer-subscribe-button {
 			max-width: 300px;
 			border: 1px solid var(--dark-border-color);
 			box-shadow: none;
diff --git a/frappe/public/scss/website/index.scss b/frappe/public/scss/website/index.scss
index 1614ece989..65093c8ed2 100644
--- a/frappe/public/scss/website/index.scss
+++ b/frappe/public/scss/website/index.scss
@@ -1,8 +1,8 @@
-@import 'variables';
+@import "variables";
 @import "../../css/fonts/inter/inter.scss";
-@import '../common/quill';
-@import '~bootstrap/scss/bootstrap';
-@import '~cropperjs/dist/cropper.min';
+@import "../common/quill";
+@import "~bootstrap/scss/bootstrap";
+@import "~cropperjs/dist/cropper.min";
 @import "../common/mixins";
 @import "../common/global";
 @import "../common/icons";
@@ -15,23 +15,22 @@
 @import "../common/indicator";
 @import "../common/controls";
 @import "../common/awesomeplete";
-@import 'base';
-@import 'multilevel_dropdown';
-@import 'website_image';
-@import 'website_avatar';
-@import 'web_form';
-@import 'page_builder';
-@import 'blog';
-@import 'markdown';
-@import 'sidebar';
-@import 'portal';
-@import 'search';
-@import 'doc';
-@import 'navbar';
-@import 'footer';
-@import 'error-state';
-@import 'my_account';
-
+@import "base";
+@import "multilevel_dropdown";
+@import "website_image";
+@import "website_avatar";
+@import "web_form";
+@import "page_builder";
+@import "blog";
+@import "markdown";
+@import "sidebar";
+@import "portal";
+@import "search";
+@import "doc";
+@import "navbar";
+@import "footer";
+@import "error-state";
+@import "my_account";
 
 .ql-editor.read-mode {
 	padding: 0;
@@ -88,7 +87,7 @@
 
 .dropdown-item {
 	border-radius: $dropdown-border-radius;
-	padding : var(--dropdown-padding) !important;
+	padding: var(--dropdown-padding) !important;
 }
 
 .dropdown-item:active {
@@ -134,7 +133,7 @@
 
 .breadcrumb-container {
 	margin-top: 1rem;
-	padding-top:  0.25rem;
+	padding-top: 0.25rem;
 }
 
 .breadcrumb {
@@ -144,8 +143,7 @@
 }
 
 .breadcrumb-item {
-	+ .breadcrumb-item
-	 {
+	+ .breadcrumb-item {
 		font-size: $font-size-sm;
 		&::before {
 			content: #{"/*!rtl:var(--left-arrow-svg);*/"}var(--right-arrow-svg);
@@ -153,7 +151,7 @@
 		}
 	}
 	a {
-		color: var(--text-color)
+		color: var(--text-color);
 	}
 
 	li.disabled {
@@ -168,7 +166,8 @@ a.card {
 	text-decoration: none;
 }
 
-a.card-link, a.card-link:hover {
+a.card-link,
+a.card-link:hover {
 	text-decoration: underline;
 }
 
@@ -197,7 +196,7 @@ a.card-link, a.card-link:hover {
 }
 
 .indicator-pill {
-	font-size: var(--font-size-xs)
+	font-size: var(--font-size-xs);
 }
 
 h4.modal-title {
@@ -252,7 +251,6 @@ h5.modal-title {
 
 .btn-xs {
 	@extend .btn-sm;
-
 }
 
 .hidden-xs {
diff --git a/frappe/public/scss/website/markdown.scss b/frappe/public/scss/website/markdown.scss
index 451b281833..0b88664e89 100644
--- a/frappe/public/scss/website/markdown.scss
+++ b/frappe/public/scss/website/markdown.scss
@@ -1,4 +1,3 @@
-
 .section-markdown > .from-markdown {
 	max-width: 50rem;
 	margin: auto;
@@ -31,7 +30,8 @@
 		list-style: decimal;
 	}
 
-	p, li {
+	p,
+	li {
 		line-height: 1.7;
 
 		@include media-breakpoint-up(sm) {
@@ -48,7 +48,8 @@
 		padding-bottom: 1px;
 	}
 
-	li > ul, li > ol {
+	li > ul,
+	li > ol {
 		padding-left: 1.5rem;
 	}
 
@@ -78,7 +79,8 @@
 		margin-bottom: 0;
 	}
 
-	b, strong {
+	b,
+	strong {
 		color: $gray-800;
 		font-weight: 600;
 	}
diff --git a/frappe/public/scss/website/multilevel_dropdown.scss b/frappe/public/scss/website/multilevel_dropdown.scss
index 928718a109..adaeb6a68a 100644
--- a/frappe/public/scss/website/multilevel_dropdown.scss
+++ b/frappe/public/scss/website/multilevel_dropdown.scss
@@ -6,12 +6,12 @@
 	transform: rotate(-90deg);
 	position: absolute;
 	right: 6px;
-	top: .8em;
+	top: 0.8em;
 }
 
 .dropdown-submenu .dropdown-menu {
 	top: 0;
 	left: 100%;
-	margin-left: .1rem;
-	margin-right: .1rem;
+	margin-left: 0.1rem;
+	margin-right: 0.1rem;
 }
diff --git a/frappe/public/scss/website/my_account.scss b/frappe/public/scss/website/my_account.scss
index 0bff99d9dc..91ebb54e18 100644
--- a/frappe/public/scss/website/my_account.scss
+++ b/frappe/public/scss/website/my_account.scss
@@ -50,7 +50,6 @@
 	}
 
 	.my-account-avatar {
-
 		.avatar {
 			height: 60px;
 			width: 60px;
@@ -70,8 +69,8 @@
 
 			.edit-profile-icon {
 				stroke: var(--blue-500);
+			}
 		}
-	}
 
 		.right-icon {
 			@include media-breakpoint-up(sm) {
diff --git a/frappe/public/scss/website/navbar.scss b/frappe/public/scss/website/navbar.scss
index 4fdb3df137..f7f8ffc64f 100644
--- a/frappe/public/scss/website/navbar.scss
+++ b/frappe/public/scss/website/navbar.scss
@@ -71,14 +71,13 @@
 	}
 
 	.navbar-toggler {
-		border-color: rgba(255,255,255, 0.1);
+		border-color: rgba(255, 255, 255, 0.1);
 
 		.icon {
 			stroke: none;
 		}
 	}
 
-
 	svg use {
 		--icon-stroke: white;
 	}
@@ -98,7 +97,6 @@
 	}
 }
 
-
 .navbar.bg-dark {
 	.dropdown-menu {
 		font-size: 0.75rem;
@@ -135,7 +133,8 @@
 	font-weight: 500;
 
 	&:hover,
-	&:focus, &.active {
+	&:focus,
+	&.active {
 		color: $primary;
 	}
 }
@@ -147,8 +146,8 @@
 
 .logged-in {
 	display: flex;
-    justify-content: center;
-    align-items: center;
+	justify-content: center;
+	align-items: center;
 	.nav-link {
 		max-width: 200px;
 		@extend .ellipsis;
diff --git a/frappe/public/scss/website/page_builder.scss b/frappe/public/scss/website/page_builder.scss
index f747807ea9..e761032940 100644
--- a/frappe/public/scss/website/page_builder.scss
+++ b/frappe/public/scss/website/page_builder.scss
@@ -40,18 +40,23 @@
 	}
 }
 
-.hero-title, .hero-subtitle {
+.hero-title,
+.hero-subtitle {
 	max-width: 42rem;
 	margin-top: 0rem;
 	margin-bottom: 0.5rem;
 }
 
 .hero.align-center {
-	h1, .hero-title, .hero-subtitle, .hero-buttons {
+	h1,
+	.hero-title,
+	.hero-subtitle,
+	.hero-buttons {
 		text-align: center;
 	}
 
-	.hero-title, .hero-subtitle {
+	.hero-title,
+	.hero-subtitle {
 		margin-left: auto;
 		margin-right: auto;
 	}
@@ -71,7 +76,8 @@
 .section-with-image.align-center {
 	text-align: center;
 
-	.section-description, .section-image {
+	.section-description,
+	.section-image {
 		margin-left: auto;
 		margin-right: auto;
 	}
@@ -386,7 +392,7 @@
 	margin-top: 2rem;
 
 	&:before {
-		content: '—'
+		content: "—";
 	}
 
 	@include media-breakpoint-up(lg) {
@@ -467,7 +473,6 @@
 	}
 }
 
-
 /* Section with Collapsible Content */
 
 .collapsible-items {
@@ -524,10 +529,12 @@
 }
 
 .section-with-collapsible-content.align-center {
-	.section-title, .section-description {
+	.section-title,
+	.section-description {
 		text-align: center;
 	}
-	.section-description, .collapsible-items {
+	.section-description,
+	.collapsible-items {
 		margin-left: auto;
 		margin-right: auto;
 		margin-top: 3rem;
@@ -670,7 +677,8 @@
 	margin-bottom: 0.5rem;
 }
 
-.section-title + .section-features, .section-description + .section-features {
+.section-title + .section-features,
+.section-description + .section-features {
 	&[data-columns="2"] {
 		margin-top: 3rem;
 	}
@@ -699,7 +707,8 @@
 	line-height: 1.7;
 }
 
-.feature-title, .feature-content {
+.feature-title,
+.feature-content {
 	margin-bottom: 0;
 }
 
@@ -708,7 +717,6 @@
 	margin-top: auto;
 }
 
-
 /* Section with Embed */
 
 .section-with-embed .embed-container {
@@ -720,13 +728,13 @@
 }
 
 .section-video {
-    aspect-ratio: 16 / 9;
-    width: 100%;
-    cursor: pointer;
+	aspect-ratio: 16 / 9;
+	width: 100%;
+	cursor: pointer;
 }
 
 .video-thumbnail {
-    aspect-ratio: 16 / 9;
-    width: 100%;
-    object-fit: cover;
+	aspect-ratio: 16 / 9;
+	width: 100%;
+	object-fit: cover;
 }
diff --git a/frappe/public/scss/website/portal.scss b/frappe/public/scss/website/portal.scss
index 1b724c6816..396191f051 100644
--- a/frappe/public/scss/website/portal.scss
+++ b/frappe/public/scss/website/portal.scss
@@ -4,4 +4,4 @@
 	a {
 		color: $body-color;
 	}
-}
\ No newline at end of file
+}
diff --git a/frappe/public/scss/website/search.scss b/frappe/public/scss/website/search.scss
index aee2457f31..d8e63cca05 100644
--- a/frappe/public/scss/website/search.scss
+++ b/frappe/public/scss/website/search.scss
@@ -37,4 +37,4 @@
 			padding: 0 0.125rem;
 		}
 	}
-}
\ No newline at end of file
+}
diff --git a/frappe/public/scss/website/variables.scss b/frappe/public/scss/website/variables.scss
index 33720e6daa..c62266d10f 100644
--- a/frappe/public/scss/website/variables.scss
+++ b/frappe/public/scss/website/variables.scss
@@ -4,7 +4,6 @@
 @import "../espresso/spacing";
 @import "../espresso/borders";
 
-
 $body-color: $gray-700 !default;
 $text-muted: $gray-600 !default;
 $border-color: $gray-300 !default;
@@ -17,7 +16,7 @@ $container-max-widths: (
 	sm: 540px,
 	md: 840px,
 	lg: 1090px,
-	xl: 1290px
+	xl: 1290px,
 );
 
 $font-sizes: (
@@ -30,7 +29,7 @@ $font-sizes: (
 	"3xl": 1.875rem,
 	"4xl": 2.25rem,
 	"5xl": 3rem,
-	"6xl": 4rem
+	"6xl": 4rem,
 );
 
 @each $size, $value in $font-sizes {
@@ -89,7 +88,7 @@ $grid-breakpoints: (
 	md: 768px,
 	lg: 992px,
 	xl: 1200px,
-	2xl: 1440px
+	2xl: 1440px,
 ) !default;
 
 $spacers: (
@@ -117,12 +116,12 @@ $spacers: (
 	48: 12rem,
 	52: 13rem,
 	56: 14rem,
-	64: 16rem
+	64: 16rem,
 );
 
 @import "~bootstrap/scss/functions";
 @import "~bootstrap/scss/variables";
 @import "~bootstrap/scss/mixins";
-@import 'css_variables';
+@import "css_variables";
 
 $code-color: $purple;
diff --git a/frappe/public/scss/website/web_form.scss b/frappe/public/scss/website/web_form.scss
index a4facf5310..c831807856 100644
--- a/frappe/public/scss/website/web_form.scss
+++ b/frappe/public/scss/website/web_form.scss
@@ -255,7 +255,7 @@
 								flex: 1;
 
 								@include media-breakpoint-down(sm) {
-									order: 1
+									order: 1;
 								}
 							}
 
@@ -345,7 +345,7 @@
 								flex: 1;
 
 								@include media-breakpoint-down(sm) {
-									order: 2
+									order: 2;
 								}
 							}
 						}
@@ -495,7 +495,8 @@
 									border-top: 1px solid var(--border-color);
 									max-width: 160px;
 
-									.ql-editor, p {
+									.ql-editor,
+									p {
 										width: max-content;
 										max-width: 150px;
 										margin-bottom: 0;
diff --git a/frappe/public/scss/website/website_avatar.scss b/frappe/public/scss/website/website_avatar.scss
index a378623925..e58701eee9 100644
--- a/frappe/public/scss/website/website_avatar.scss
+++ b/frappe/public/scss/website/website_avatar.scss
@@ -1,8 +1,8 @@
-@import '../desk/avatar';
+@import "../desk/avatar";
 
 :root,
 [data-theme="dark"] {
 	--avatar-frame-color: var(--gray-500);
 	--avatar-frame-bg: var(--gray-100);
 	--avatar-frame-border: var(--gray-100);
-}
\ No newline at end of file
+}
diff --git a/frappe/public/scss/website/website_image.scss b/frappe/public/scss/website/website_image.scss
index e237fc0a54..a1d45d8add 100644
--- a/frappe/public/scss/website/website_image.scss
+++ b/frappe/public/scss/website/website_image.scss
@@ -4,10 +4,7 @@ img {
 	position: relative;
 }
 
-@include broken-img(
-	$height: 175px,
-	$border-radius: 0,
-);
+@include broken-img($height: 175px, $border-radius: 0);
 
 .website-image-placeholder {
 	display: flex;