..F....... [ZBX-20320] updated to master; resolved conflicts in CWidgetHelper.php, screen.scss

12 files changed, 474 insertions, 304 deletions

diff --git a/sass/stylesheets/sass/components/_columns-wrapper.scss b/sass/stylesheets/sass/components/_columns-wrapper.scss
new file mode 100644
index 00000000000..3f10c77bf29
--- /dev/null
+++ b/sass/stylesheets/sass/components/_columns-wrapper.scss
@@ -0,0 +1,79 @@
+.columns-wrapper {
+	$column-count: (2, 3);
+	$column-size: (
+			5: 5%,
+			10: 10%,
+			15: 15%,
+			20: 20%,
+			33: 33.33333%,
+			35: 35%,
+			40: 40%,
+			50: 50%,
+			75: 75%,
+			90: 90%,
+			95: 95%
+	);
+
+	display: flex;
+	flex-wrap: wrap;
+	align-items: start;
+
+	&.columns-nowrap {
+		flex-wrap: nowrap;
+	}
+
+	// Dynamically generated classes for the columns count:
+	//  .columns-2
+	//  .columns-3
+	@each $count in $column-count {
+		&.columns-#{$count} > {
+			div,
+			li {
+				display: block;
+				flex: 0 0 (100% / $count);
+				max-width: (100% / $count);
+			}
+		}
+	}
+
+	// Dynamically generated classes for the column width:
+	//  .column-5
+	//  .column-10
+	//  .column-15
+	//  .column-20
+	//  .column-33
+	//  .column-35
+	//  .column-40
+	//  .column-50
+	//  .column-75
+	//  .column-90
+	//  .column-95
+	@each $class, $width in $column-size {
+		.column-#{$class} {
+			flex: 0 0 $width;
+			max-width: $width;
+		}
+	}
+
+	.column-center {
+		display: flex;
+		justify-content: center;
+		text-align: center;
+	}
+
+	.column-middle {
+		display: flex;
+		align-items: center;
+	}
+
+	& > {
+		div,
+		ul {
+			&:not(:last-child) {
+				section {
+					margin-right: 10px;
+				}
+			}
+		}
+	}
+}
diff --git a/sass/stylesheets/sass/components/_section.scss b/sass/stylesheets/sass/components/_section.scss
new file mode 100644
index 00000000000..e0c21a3aaf2
--- /dev/null
+++ b/sass/stylesheets/sass/components/_section.scss
@@ -0,0 +1,72 @@
+section {
+	background-color: $ui-bg-color;
+	border: 1px solid $ui-border-color;
+
+	.section-head {
+		display: flex;
+		height: 32px;
+		line-height: 32px;
+
+		h4 {
+			padding: 0 10px;
+			margin-right: auto;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			font-weight: bold;
+			line-height: inherit;
+			color: lighten($font-color, 15%);
+		}
+	}
+
+	.section-toggle {
+		@extend %btn-widget-defaults;
+
+		width: 24px;
+		height: 24px;
+		margin: 2px 2px 0 auto;
+		background: url($sprite-path) no-repeat -6px -654px;
+	}
+
+	.section-foot {
+		padding: 0 10px;
+		text-align: right;
+		line-height: 32px;
+		color: $font-alt-color;
+	}
+
+	&.section-collapsed {
+		.section-body,
+		.section-foot {
+			display: none;
+		}
+
+		.section-toggle {
+			background-position: -6px -689px;
+		}
+	}
+
+	&:not(:last-child) {
+		margin-bottom: 10px;
+	}
+
+	.list-table {
+		border: 0;
+
+		tbody tr:last-child {
+			td {
+				border-bottom: 1px solid $table-border-color;
+			}
+		}
+
+		td,
+		th {
+			&:first-child {
+				padding-left: 10px;
+			}
+
+			&:last-child {
+				padding-right: 10px;
+			}
+		}
+	}
+}
diff --git a/sass/stylesheets/sass/components/dashboard/_dashboard.scss b/sass/stylesheets/sass/components/dashboard/_dashboard.scss
index 726e26674ff..6855839e555 100644
--- a/sass/stylesheets/sass/components/dashboard/_dashboard.scss
+++ b/sass/stylesheets/sass/components/dashboard/_dashboard.scss
@@ -978,10 +978,6 @@
 	.msg-warning {
 		margin: 0 10px;
 	}
-
-	&.dashboard-widget-fluid {
-		margin-right: 0;
-	}
 }
 
 %dashboard-widget-td {
diff --git a/sass/stylesheets/sass/components/dashboard/_widget-clock.scss b/sass/stylesheets/sass/components/dashboard/_widget-clock.scss
index 41497454cf9..638de52aaed 100644
--- a/sass/stylesheets/sass/components/dashboard/_widget-clock.scss
+++ b/sass/stylesheets/sass/components/dashboard/_widget-clock.scss
@@ -1,39 +1,40 @@
 // Widget configuration.
 
 form.dashboard-widget-clock {
-	.fields-group-date,
-	.fields-group-time,
-	.fields-group-tzone {
-		display: grid;
-		grid-template-columns: 60px 120px repeat(2, minmax(60px, max-content) auto);
-		align-items: center;
-		column-gap: 10px;
-		row-gap: 5px;
-
-		label {
-			text-align: right;
-		}
+	.fields-group {
+		&.fields-group-date,
+		&.fields-group-time,
+		&.fields-group-tzone {
+			display: grid;
+			grid-template-columns: 60px 120px repeat(2, minmax(60px, max-content) auto);
+			align-items: center;
+			column-gap: 10px;
+			row-gap: 5px;
 
-		.field-size {
-			input {
-				margin-right: 5px;
+			label {
+				text-align: right;
 			}
-		}
-	}
 
-	.fields-group-time {
-		.field-format {
-			grid-column: 4 / -1;
+			.field-size {
+				input {
+					margin-right: 5px;
+				}
+			}
 		}
-	}
 
-	.fields-group-tzone {
-		.field-format {
-			grid-column: 2 / -1;
+		&.fields-group-time {
+			.field-format {
+				grid-column: 4 / -1;
+			}
 		}
 
-		.field-timezone {
-			grid-column: 2 / -1;
+		&.fields-group-tzone {
+			.form-field {
+				&.field-tzone-timezone,
+				&.field-tzone-format {
+					grid-column: 2 / -1;
+				}
+			}
 		}
 	}
 }
@@ -41,7 +42,7 @@ form.dashboard-widget-clock {
 // Widget view.
 
 div.dashboard-widget-clock {
-	&.clock-digital {
+	.clock-digital {
 		$line-height: 1.14;
 
 		box-sizing: border-box;
diff --git a/sass/stylesheets/sass/components/dashboard/_widget-inaccessible.scss b/sass/stylesheets/sass/components/dashboard/_widget-inaccessible.scss
new file mode 100644
index 00000000000..8349b4eb3c2
--- /dev/null
+++ b/sass/stylesheets/sass/components/dashboard/_widget-inaccessible.scss
@@ -0,0 +1,8 @@
+.dashboard-widget-inaccessible {
+	display: grid;
+	align-items: center;
+	padding-right: 10px;
+	padding-left: 10px;
+	text-align: center;
+	color: $font-alt-color;
+}
diff --git a/sass/stylesheets/sass/components/dashboard/_widget-item.scss b/sass/stylesheets/sass/components/dashboard/_widget-item.scss
index f3a36d2d73a..3c1c86646d9 100644
--- a/sass/stylesheets/sass/components/dashboard/_widget-item.scss
+++ b/sass/stylesheets/sass/components/dashboard/_widget-item.scss
@@ -1,71 +1,73 @@
 // Widget configuration.
 
 form.dashboard-widget-item {
-	.fields-group-description,
-	.fields-group-value,
-	.fields-group-time,
-	.fields-group-change-indicator {
-		display: grid;
-		grid-template-columns: minmax(100px, max-content) 3fr max-content auto;
-		align-items: center;
-		column-gap: 10px;
-		row-gap: 5px;
-
-		label {
-			text-align: right;
-		}
+	.fields-group {
+		&.fields-group-description,
+		&.fields-group-value,
+		&.fields-group-time,
+		&.fields-group-change-indicator {
+			display: grid;
+			grid-template-columns: minmax(100px, max-content) 3fr max-content auto;
+			align-items: center;
+			column-gap: 10px;
+			row-gap: 5px;
+
+			label {
+				text-align: right;
+			}
 
-		hr {
-			grid-column: 1 / -1;
-			margin: 0;
-			width: 100%;
-			border: solid $table-border-color;
-			border-width: 1px 0 0 0;
-		}
+			hr {
+				grid-column: 1 / -1;
+				margin: 0;
+				width: 100%;
+				border: solid $table-border-color;
+				border-width: 1px 0 0 0;
+			}
 
-		.field-fluid {
-			grid-column: 2 / -1;
-		}
+			.field-fluid {
+				grid-column: 2 / -1;
+			}
 
-		.offset-3 {
-			grid-column-start: 3;
-		}
+			.offset-3 {
+				grid-column-start: 3;
+			}
 
-		.field-size {
-			input {
-				margin-right: 5px;
+			.field-size {
+				input {
+					margin-right: 5px;
+				}
 			}
-		}
 
-		.form-field {
-			line-height: 24px;
+			.form-field {
+				line-height: 24px;
+			}
 		}
-	}
 
-	.fields-group-description {
-		.form-field:nth-child(1) {
-			grid-column: 1 / -1;
+		&.fields-group-description {
+			.form-field:nth-child(1) {
+				grid-column: 1 / -1;
+			}
 		}
-	}
 
-	.fields-group-value {
-		grid-template-columns: minmax(100px, max-content) 3fr max-content auto;
+		&.fields-group-value {
+			grid-template-columns: minmax(100px, max-content) 3fr max-content auto;
 
-		.units-show {
-			display: flex;
+			.units-show {
+				display: flex;
 
-			label[for='units'] {
-				width: 100%;
+				label[for='units'] {
+					width: 100%;
+				}
 			}
 		}
-	}
 
-	.fields-group-change-indicator {
-		grid-template-columns: repeat(3, max-content 96px);
-	}
+		&.fields-group-change-indicator {
+			grid-template-columns: repeat(3, max-content 96px);
 
-	.fields-group-change-indicator .input-color-picker {
-		display: block;
+			.input-color-picker {
+				display: block;
+			}
+		}
 	}
 }
 
@@ -74,12 +76,14 @@ form.dashboard-widget-item {
 div.dashboard-widget-item {
 	$line-height: 1.14;
 
-	box-sizing: border-box;
-	height: 100%;
-	padding: 10px;
-	overflow-x: hidden;
+	> div {
+		box-sizing: border-box;
+		height: 100%;
+		padding: 10px;
+		overflow-x: hidden;
 
-	@extend %webkit-scrollbar;
+		@extend %webkit-scrollbar;
+	}
 
 	a {
 		box-sizing: border-box;
diff --git a/sass/stylesheets/sass/components/dashboard/_widget-svggraph.scss b/sass/stylesheets/sass/components/dashboard/_widget-svggraph.scss
index e32ad97b80a..671d18331ff 100644
--- a/sass/stylesheets/sass/components/dashboard/_widget-svggraph.scss
+++ b/sass/stylesheets/sass/components/dashboard/_widget-svggraph.scss
@@ -1,12 +1,30 @@
 // Widget configuration.
 
 form.dashboard-widget-svggraph {
+	.svg-graph-preview,
 	.graph-widget-config-tabs {
-		padding: 10px 0;
+		grid-column: 1 / -1;
+	}
+
+	.svg-graph-preview {
+		position: relative;
+		min-width: 1110px;
+		height: 300px;
+
+		> div {
+			position: absolute;
+			top: 0;
+			right: 0;
+			left: 0;
+			margin: 0 -10px;
+			height: 300px;
+			background: $ui-bg-color;
+			z-index: 3;
+		}
+	}
 
+	.graph-widget-config-tabs {
 		> .tabs-nav {
-			margin-right: 0;
-			margin-left: 0;
 			border-top: 1px solid $ui-border-color;
 		}
 
@@ -19,6 +37,7 @@ form.dashboard-widget-svggraph {
 	}
 
 	.table-forms-container {
+		margin: -10px 0 0 0;
 		border: 1px solid $ui-border-color;
 		border-top: none;
 	}
@@ -27,32 +46,30 @@ form.dashboard-widget-svggraph {
 		padding: 0;
 	}
 
-	.dataset-head {
-		display: grid;
-		grid-template-columns: 24px 24px 1fr 1fr 24px;
-		grid-gap: 10px;
-		align-items: start;
+	.dataset-head,
+	.dataset-body.list-accordion-item-body {
+		display: contents;
 	}
 
-	.dataset-body.list-accordion-item-body {
-		display: grid;
-		grid-template-columns: 24px 1fr 1fr 24px;
-		grid-gap: 10px;
-		align-items: start;
-		position: relative;
-		margin-top: 10px;
+	.dataset-head {
+		.multiselect {
+			width: 100%;
+		}
+	}
 
+	.dataset-body {
 		.form-grid {
 			padding-top: 0;
 
 			&:first-child {
-				grid-column-start: 2;
+				grid-column-start: 3;
 			}
 		}
 	}
 
 	.drag-icon {
 		position: absolute;
+		top: 5px;
 		left: -14px;
 	}
 
@@ -88,17 +105,15 @@ form.dashboard-widget-svggraph {
 			margin-top: -5px;
 			margin-bottom: -5px;
 		}
-
-		.list-accordion-item-head {
-			padding: 0;
-		}
 	}
 
 	.list-accordion-item {
 		position: relative;
-		width: 100%;
+		display: grid;
+		grid-template-columns: 24px 24px 1fr 1fr 24px;
+		grid-gap: 10px;
+		align-items: start;
 		padding: 5px 0;
-		list-style-type: none;
 
 		&.list-accordion-item-opened {
 			&::before {
@@ -119,10 +134,6 @@ form.dashboard-widget-svggraph {
 				overflow: hidden;
 			}
 
-			.dataset-body {
-				display: none;
-			}
-
 			.dataset-head {
 				.table-forms-separator {
 					border: none;
@@ -138,6 +149,10 @@ form.dashboard-widget-svggraph {
 				}
 			}
 
+			.dataset-body {
+				display: none;
+			}
+
 			.items-list {
 				padding-left: 0;
 			}
@@ -167,9 +182,129 @@ form.dashboard-widget-svggraph {
 		}
 	}
 
+	.overrides-list {
+		position: relative;
+		margin: -5px 0 -5px 15px;
+	}
+
+	.overrides-list-item {
+		position: relative;
+		display: grid;
+		grid-template-columns: 1fr 1fr 24px;
+		grid-gap: 5px 10px;
+		align-items: start;
+		padding: 5px 0;
+
+		&.sortable {
+			overflow: visible;
+			margin-top: -5px;
+			margin-bottom: -5px;
+		}
+
+		.multiselect {
+			width: 100%;
+		}
+
+		.btn-remove {
+			right: 0;
+			top: 0;
+			vertical-align: baseline;
+		}
+	}
+
+	.overrides-foot {
+		padding: 5px 0;
+	}
+
+	.overrides-options-list {
+		grid-column: 1 / -1;
+		padding: 0 24px 8px 0;
+		border-bottom: 1px solid $table-border-color;
+		white-space: normal;
+
+		> li {
+			display: inline-block;
+			margin-right: 5px;
+			margin-bottom: 2px;
+			line-height: 22px;
+			white-space: nowrap;
+
+			.color-picker {
+				line-height: 22px;
+			}
+
+			> div {
+				position: relative;
+				padding: 1px 18px 1px 1px;
+				background-color: $ui-bg-selected-color;
+				border-radius: 2px;
+
+				> span {
+					color: lighten($ui-bg-selected-color, 100%);
+					padding-left: 8px;
+					line-height: 22px;
+				}
+
+				> input[type=text] {
+					border-style: none;
+					line-height: 22px;
+					min-height: 22px;
+					width: 85px;
+				}
+
+				> .subfilter-disable-btn {
+					position: absolute;
+					right: 0;
+					top: 0;
+					min-height: 24px;
+				}
+			}
+		}
+
+		.btn-alt {
+			.plus-icon {
+				margin-right: 0;
+			}
+		}
+
+		.color-picker {
+			.color-picker-preview {
+				margin: 1px;
+				width: 20px;
+				min-height: 20px;
+				background-position: -323px -411px;
+			}
+		}
+	}
+
 	.no-items-message {
 		display: none;
 		line-height: 24px;
 		color: $font-alt-color;
 	}
 }
+
+[theme="hc-dark"] form.dashboard-widget-svggraph {
+	.overrides-options-list {
+		> li > div {
+			border: 1px solid $ui-tab-bg-selected-color;
+			background-color: transparent !important;
+
+			> .subfilter-disable-btn {
+				border: none !important;
+				top: 0;
+			}
+		}
+	}
+}
+
+[theme="hc-light"] form.dashboard-widget-svggraph {
+	.overrides-options-list {
+		> li > div {
+			> .subfilter-disable-btn {
+				border: none !important;
+				top: 0;
+			}
+		}
+	}
+}
diff --git a/sass/stylesheets/sass/hc-dark.scss b/sass/stylesheets/sass/hc-dark.scss
index 9c09a085b52..0b7410f1e30 100644
--- a/sass/stylesheets/sass/hc-dark.scss
+++ b/sass/stylesheets/sass/hc-dark.scss
@@ -1206,6 +1206,7 @@ td.inactive-bg {
 }
 
 // Multiline input control.
+
 .multilineinput-control {
 	button {
 		&::after {
@@ -1231,6 +1232,7 @@ td.inactive-bg {
 }
 
 // Time selection.
+
 .ui-tabs-nav {
 	.btn-info {
 		&::after {
@@ -1480,19 +1482,6 @@ td.inactive-bg {
 	}
 }
 
-// Overrides.
-.overrides-options-list {
-	> li > div {
-		border: 1px solid $ui-tab-bg-selected-color;
-		background-color: transparent !important;
-
-		> .subfilter-disable-btn {
-			border: none !important;
-			top: 0;
-		}
-	}
-}
-
 .totals-list {
 	> div {
 		border-top: 1px solid $ui-border-color;
@@ -1511,6 +1500,7 @@ td.inactive-bg {
 }
 
 // Widget "Host availability".
+
 .host-avail-widget {
 	td:not(:first-child) {
 		border-left: 1px solid $ui-border-color;
@@ -1524,7 +1514,8 @@ td.inactive-bg {
 	}
 }
 
-// Widget "Navigation tree"
+// Widget "Navigation tree".
+
 .navtree {
 	.tree .tree-item > .tree-row {
 		min-width: 410px;
@@ -1532,6 +1523,7 @@ td.inactive-bg {
 }
 
 // Widget "Problems by severity".
+
 .by-severity-widget {
 	> div {
 		min-width: 65px;
@@ -1544,13 +1536,13 @@ td.inactive-bg {
 	}
 }
 
-// InputSecret and ButtonDropdown
+// InputSecret and ButtonDropdown.
 
 .btn-undo.is-focused {
 	box-shadow: 0 1px 0px $blue, 0 -1px 0px $blue;
 }
 
-// Tabfilter
+// Tabfilter.
 
 .filter-container.tabfilter-container {
 	.icon-filter::before {
@@ -1574,7 +1566,7 @@ td.inactive-bg {
 	}
 }
 
-// HOST INTERFACES
+// Host interfaces.
 
 .interfaces {
 	.interface-row {
@@ -1591,3 +1583,17 @@ td.inactive-bg {
 		}
 	}
 }
+
+// Section (components/_section.scss).
+
+section {
+	.section-toggle {
+		background-position: -318px -654px;
+	}
+
+	&.section-collapsed {
+		.section-toggle {
+			background-position: -318px -690px;
+		}
+	}
+}
diff --git a/sass/stylesheets/sass/hc-light.scss b/sass/stylesheets/sass/hc-light.scss
index 6f7675dc024..681db702d8c 100644
--- a/sass/stylesheets/sass/hc-light.scss
+++ b/sass/stylesheets/sass/hc-light.scss
@@ -1314,18 +1314,6 @@ td.inactive-bg {
 	}
 }
 
-// Overrides.
-.overrides-options-list {
-	> li > div {
-		background-color: $ui-bg-selected-color !important;
-
-		> .subfilter-disable-btn {
-			border: none !important;
-			top: 0;
-		}
-	}
-}
-
 .totals-list {
 	> div {
 		border-top: 1px solid $ui-border-color;
@@ -1344,6 +1332,7 @@ td.inactive-bg {
 }
 
 // Widget "Host availability".
+
 .host-avail-widget {
 	td:not(:first-child) {
 		border-left: 1px solid $ui-border-color;
@@ -1357,7 +1346,8 @@ td.inactive-bg {
 	}
 }
 
-// Widget "Navigation tree"
+// Widget "Navigation tree".
+
 .navtree {
 	.tree .tree-item > .tree-row {
 		min-width: 410px;
@@ -1365,6 +1355,7 @@ td.inactive-bg {
 }
 
 // Widget "Problems by severity".
+
 .by-severity-widget {
 	> div {
 		min-width: 65px;
@@ -1377,7 +1368,7 @@ td.inactive-bg {
 	}
 }
 
-// InputSecret and ButtonDropdown
+// InputSecret and ButtonDropdown.
 
 .btn-undo.is-focused {
 	box-shadow: 0 1px 0px $blue, 0 -1px 0px $blue;
@@ -1403,7 +1394,7 @@ td.inactive-bg {
 	}
 }
 
-// HOST INTERFACES
+// Host interfaces.
 
 .interfaces {
 	.interface-row {
@@ -1420,3 +1411,17 @@ td.inactive-bg {
 		}
 	}
 }
+
+// Section (components/_section.scss).
+
+section {
+	.section-toggle {
+		background-position: -165px -654px;
+	}
+
+	&.section-collapsed {
+		.section-toggle {
+			background-position: -165px -690px;
+		}
+	}
+}
diff --git a/sass/stylesheets/sass/layout/_form-grid.scss b/sass/stylesheets/sass/layout/_form-grid.scss
index dedda435665..ebd643498df 100644
--- a/sass/stylesheets/sass/layout/_form-grid.scss
+++ b/sass/stylesheets/sass/layout/_form-grid.scss
@@ -1,6 +1,5 @@
 .form-grid {
 	display: grid;
-	padding: 5px;
 	row-gap: 10px;
 	column-gap: 10px;
 
@@ -26,6 +25,11 @@
 		&.fields-group-label {
 			padding-top: 5px;
 		}
+
+		.icon-help-hint,
+		.icon-info {
+			margin-left: 5px;
+		}
 	}
 
 	> .form-field,
diff --git a/sass/stylesheets/sass/screen.scss b/sass/stylesheets/sass/screen.scss
index b8e6ae1802a..f5e6e5cfff4 100644
--- a/sass/stylesheets/sass/screen.scss
+++ b/sass/stylesheets/sass/screen.scss
@@ -31,8 +31,10 @@ $browser-sprite-path: '../img/browser-sprite.png?20220722';
 @import "components/buttons";
 @import "components/checkbox-list";
 @import "components/color-picker";
+@import "components/columns-wrapper";
 @import "components/dashboard/dashboard";
 @import "components/dashboard/widget-clock";
+@import "components/dashboard/widget-inaccessible";
 @import "components/dashboard/widget-item";
 @import "components/dashboard/widget-slareport";
 @import "components/dashboard/widget-svggraph";
@@ -46,6 +48,7 @@ $browser-sprite-path: '../img/browser-sprite.png?20220722';
 @import "components/message-box";
 @import "components/radio-list-control";
 @import "components/range-control";
+@import "components/section";
 @import "components/service/info";
 @import "components/subfilter";
 @import "components/svg-graph";
@@ -2617,10 +2620,10 @@ $var-icons: (
 }
 
 $trigger-expression-tree-icons: (
-	top-bottom: url($sprite-path) no-repeat -84px -300px,
-	top-bottom-right: url($sprite-path) no-repeat -84px -334px,
-	top-right: url($sprite-path) no-repeat -84px -372px,
-	empty: url($sprite-path) no-repeat -84px -350px
+	top-bottom: -84px -300px,
+	top-bottom-right: -84px -334px,
+	top-right: -84px -372px,
+	empty: -84px -350px
 );
 
 %trigger-expression-tree-icons-common {
@@ -3083,7 +3086,7 @@ $form-icon-btn: (
 		margin: 0 10px;
 
 		.dashboard-widget-head {
-			margin-bottom: 14px;
+			margin-bottom: 12px;
 
 			.icon-doc-link {
 				margin-right: -26px;
@@ -3102,11 +3105,15 @@ $form-icon-btn: (
 			width: 100%;
 			max-height: calc(100vh - 220px);
 			max-width: inherit;
-			margin: 0 -10px 10px;
+			margin: 0 -10px 8px;
 			padding: 0 10px;
 			position: relative;
 			@extend %webkit-scrollbar;
 
+			> form {
+				padding: 2px 0;
+			}
+
 			.table-forms {
 				.table-forms-td-right {
 					padding-right: 8px;
@@ -3741,23 +3748,6 @@ $form-icon-btn: (
 	stroke-width: 2px;
 }
 
-.svg-graph-preview {
-	margin-top: 10px;
-	min-width: 1120px;
-	height: 300px;
-	position: relative;
-
-	> div {
-		background: $ui-bg-color;
-		height: 300px;
-		position: absolute;
-		left: 0;
-		right: 0;
-		top: 0;
-		z-index: 3; // More than z-index of form controls, less than z-index of .msg-*.
-	}
-}
-
 .svg-graph-hintbox {
 	font-size: 12px;
 	line-height: 18px;
@@ -4728,73 +4718,6 @@ svg {
 	word-break: break-word;
 }
 
-.overrides-list {
-	display: table;
-	width: 90%;
-	max-width: 738px;
-	padding-left: 15px;
-
-	.overrides-list-item {
-		display: table-row;
-
-		.btn-remove {
-			position: relative;
-			right: -73px;
-			top: 3px;
-		}
-	}
-}
-
-.overrides-options-list {
-	white-space: normal;
-	padding: 5px 0 8px;
-	margin-bottom: 10px;
-	border-bottom: 1px solid $table-border-color;
-
-	> li {
-		display: inline-block;
-		margin: 2px 7px 2px 0;
-		white-space: nowrap;
-		vertical-align: middle;
-
-		> div {
-			position: relative;
-			padding: 1px 18px 1px 1px;
-			background-color: $ui-bg-selected-color;
-			border-radius: 2px;
-
-			> span {
-				color: lighten($ui-bg-selected-color, 100%);
-				padding-left: 8px;
-				line-height: 22px;
-			}
-
-			> input[type=text] {
-				border-style: none;
-				line-height: 22px;
-				min-height: 22px;
-				width: 85px;
-			}
-
-			> .subfilter-disable-btn {
-				position: absolute;
-				right: 0;
-				top: 0;
-				min-height: 24px;
-			}
-		}
-	}
-
-	.color-picker {
-		.color-picker-preview {
-			margin: 1px;
-			width: 20px;
-			min-height: 20px;
-			background-position: -323px -411px;
-		}
-	}
-}
-
 .list-accordion-foot {
 	> div {
 		display: table-cell;
@@ -4864,75 +4787,6 @@ svg {
 	visibility: hidden;
 }
 
-.columns-wrapper {
-	$column-count: (2, 3);
-	$column-size: (
-		5: 5%,
-		10: 10%,
-		15: 15%,
-		20: 20%,
-		33: 33.33333%,
-		35: 35%,
-		40: 40%,
-		50: 50%,
-		75: 75%,
-		90: 90%,
-		95: 95%
-	);
-
-	display: flex;
-	flex-wrap: wrap;
-	align-items: start;
-
-	&.columns-nowrap {
-		flex-wrap: nowrap;
-	}
-
-	// Dynamically generated classes for the columns count:
-	//  .columns-2
-	//  .columns-3
-	@each $count in $column-count {
-		&.columns-#{$count} > {
-			div,
-			li {
-				display: block;
-				flex: 0 0 (100% / $count);
-				max-width: (100% / $count);
-			}
-		}
-	}
-
-	// Dynamically generated classes for the column width:
-	//  .column-5
-	//  .column-10
-	//  .column-15
-	//  .column-20
-	//  .column-33
-	//  .column-35
-	//  .column-40
-	//  .column-50
-	//  .column-75
-	//  .column-90
-	//  .column-95
-	@each $class, $width in $column-size {
-		.column-#{$class} {
-			flex: 0 0 $width;
-			max-width: $width;
-		}
-	}
-
-	.column-center {
-		display: flex;
-		justify-content: center;
-		text-align: center;
-	}
-
-	.column-middle {
-		display: flex;
-		align-items: center;
-	}
-}
-
 .preprocessing-list {
 	$name-width: 295px;
 	$on-fail-width: 100px;
diff --git a/sass/stylesheets/sass/utils/_sortable.scss b/sass/stylesheets/sass/utils/_sortable.scss
index 34bce40cd69..f5c8c857f4f 100644
--- a/sass/stylesheets/sass/utils/_sortable.scss
+++ b/sass/stylesheets/sass/utils/_sortable.scss
@@ -9,8 +9,14 @@
 
 		@if $ui-transitions {
 			transition: left .2s, top .2s;
+		}
+	}
 
-			.sortable-item:not(.sortable-dragging) {
+	.sortable-item {
+		box-sizing: border-box;
+
+		@if $ui-transitions {
+			&:not(.sortable-dragging) {
 				transition: left .2s, top .2s;
 			}
 		}