.......... [DEV-2200] updated to latest master; resolved conflicts in:

#	ui/include/classes/widgets/views/widget.clock.form.view.php
#	ui/include/classes/widgets/views/widget.item.form.view.php
#	ui/include/classes/widgets/views/widget.slareport.form.view.php
#	ui/include/classes/widgets/views/widget.tophosts.form.view.php

10 files changed, 196 insertions, 145 deletions

diff --git a/sass/stylesheets/sass/base/_colors.scss b/sass/stylesheets/sass/base/_colors.scss
index ad6bbe72b51..3be2b6d1203 100644
--- a/sass/stylesheets/sass/base/_colors.scss
+++ b/sass/stylesheets/sass/base/_colors.scss
@@ -51,6 +51,7 @@ $font-selected-color: #ffffff !default;
 $font-alt-color: #768d99 !default;
 $body-bg-color: #ebeef0 !default;
 $overlay-bg-color: #ffffff !default;
+$overlay-border-color: #ccd5d9 !default;
 
 // Main menu
 $menu-main-color: #ebeef0 !default;
diff --git a/sass/stylesheets/sass/components/_expandable-subfilter.scss b/sass/stylesheets/sass/components/_expandable-subfilter.scss
index 30f69c2d748..6a8b2e0fc16 100644
--- a/sass/stylesheets/sass/components/_expandable-subfilter.scss
+++ b/sass/stylesheets/sass/components/_expandable-subfilter.scss
@@ -8,7 +8,7 @@
 	overflow: hidden;
 
 	&.ten-lines {
-		max-height: calc(#{$line-height} * 10);
+		max-height: calc(#{$line-height + 2} * 10);
 	}
 
 	> div {
diff --git a/sass/stylesheets/sass/components/_range-control.scss b/sass/stylesheets/sass/components/_range-control.scss
index c630e5dde77..b76075ad0af 100644
--- a/sass/stylesheets/sass/components/_range-control.scss
+++ b/sass/stylesheets/sass/components/_range-control.scss
@@ -10,19 +10,18 @@ $range-input-width: 31px;
 
 .range-control {
 	position: relative;
-	display: inline-block;
-	vertical-align: middle;
+	display: inline-flex;
 
 	input[type=range] {
+		width: calc(100% + 10px);
+		height: 20px;
+		margin: 2px -5px;
+		padding: 0;
+		vertical-align: top;
+		opacity: 0;
 		cursor: pointer;
 		-webkit-appearance: none; /* Hides the slider so that custom slider can be made */
 		-moz-appearance: none; /* Hides the slider so that custom slider can be made */
-		width: calc(100% + 10px);
-		opacity: 0;
-		vertical-align: middle;
-		margin: 0 -5px;
-		padding: 0;
-		height: 20px;
 
 		&:focus {
 			outline: none;
@@ -31,9 +30,9 @@ $range-input-width: 31px;
 		/* Special styling for WebKit/Blink */
 		&::-webkit-slider-thumb,
 		&::-moz-range-thumb {
-			margin-top: 1px; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
 			height: $range-thumb-size;
 			width: $range-thumb-size;
+			margin-top: 1px; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
 			opacity: 0;
 		}
 
@@ -45,23 +44,21 @@ $range-input-width: 31px;
 
 	input[type=text] {
 		width: $range-input-width;
-		float: right;
 	}
 
 	> div {
 		position: relative;
 		width: calc(100% - 10px - #{$range-input-width});
-		margin: 2px $range-thumb-size 0 0;
-		float: left;
+		margin-right: $range-thumb-size;
 	}
 
 	.range-control-track,
 	.range-control-progress {
 		position: absolute;
 		top: 50%;
-		margin-top: -$range-track-height / 2;
 		left: 0;
 		height: $range-track-height;
+		margin-top: -$range-track-height / 2;
 		cursor: pointer;
 	}
 
@@ -77,12 +74,12 @@ $range-input-width: 31px;
 	.range-control-thumb {
 		position: absolute;
 		top: 50%;
-		margin-top: -$range-thumb-size / 2;
-		margin-left: -$range-thumb-size / 2;
 		width: $range-thumb-size;
 		height: $range-thumb-size;
-		border-radius: 50%;
+		margin-top: -$range-thumb-size / 2;
+		margin-left: -$range-thumb-size / 2;
 		background: $range-thumb-color;
+		border-radius: 50%;
 	}
 
 	&.range-control-focus {
@@ -112,16 +109,16 @@ $range-input-width: 31px;
 
 	datalist {
 		position: absolute;
+		top: 50%;
 		display: flex;
 		width: 100%;
-		top: 50%;
 		margin-top: -$range-track-height / 2;
 
 		option {
-			padding: 0;
-			font-size: 0;
 			flex: 1 0 0;
 			height: $range-track-height;
+			padding: 0;
+			font-size: 0;
 			border-left: 1px solid $body-bg-color;
 		}
 	}
diff --git a/sass/stylesheets/sass/components/_subfilter.scss b/sass/stylesheets/sass/components/_subfilter.scss
index 52ffa81361f..5f378799258 100644
--- a/sass/stylesheets/sass/components/_subfilter.scss
+++ b/sass/stylesheets/sass/components/_subfilter.scss
@@ -18,6 +18,9 @@
 .subfilter {
 	margin-right: 10px;
 	white-space: nowrap;
+	line-height: 14px;
+	height: 16px;
+	margin-bottom: 2px;
 }
 
 .subfilter-enabled {
diff --git a/sass/stylesheets/sass/components/_toc.scss b/sass/stylesheets/sass/components/_toc.scss
index b0c9f3fd36b..16fb0ffe0c2 100644
--- a/sass/stylesheets/sass/components/_toc.scss
+++ b/sass/stylesheets/sass/components/_toc.scss
@@ -5,7 +5,7 @@
 		text-overflow: ellipsis;
 		white-space: nowrap;
 		line-height: 14px;
-		color: $toc-title-color;
+		color: $link-color;
 		border-bottom: 1px solid $table-border-color;
 		background: $toc-title-bg-color;
 	}
diff --git a/sass/stylesheets/sass/components/_z-select.scss b/sass/stylesheets/sass/components/_z-select.scss
index db94f2dc46f..8c3b5bd2b46 100644
--- a/sass/stylesheets/sass/components/_z-select.scss
+++ b/sass/stylesheets/sass/components/_z-select.scss
@@ -71,8 +71,9 @@ z-select,
 			color: $font-color;
 			text-overflow: ellipsis;
 			word-break: break-word;
-			white-space: pre-wrap;
 			user-select: none;
+			white-space: nowrap;
+			overflow: hidden;
 
 			&.hover {
 				background-color: $action-hover-color;
diff --git a/sass/stylesheets/sass/dark-theme.scss b/sass/stylesheets/sass/dark-theme.scss
index 6432aa7626f..43a390de380 100644
--- a/sass/stylesheets/sass/dark-theme.scss
+++ b/sass/stylesheets/sass/dark-theme.scss
@@ -39,6 +39,7 @@ $font-selected-color: #f2f2f2;
 $font-alt-color: #737373;
 $body-bg-color: #0e1012;
 $overlay-bg-color: #000000;
+$overlay-border-color: #383838;
 
 // Main menu
 $menu-main-color: #f2f2f2;
diff --git a/sass/stylesheets/sass/hc-dark.scss b/sass/stylesheets/sass/hc-dark.scss
index 71dafa5343a..f59fd46e7e5 100644
--- a/sass/stylesheets/sass/hc-dark.scss
+++ b/sass/stylesheets/sass/hc-dark.scss
@@ -42,6 +42,7 @@ $font-selected-color: #ffffff;
 $font-alt-color: #cacaca;
 $body-bg-color: #111111;
 $overlay-bg-color: #222222;
+$overlay-border-color: #666666;
 
 // Main menu
 
@@ -953,6 +954,18 @@ a.icon-count {
 	}
 }
 
+.overlay-dialogue {
+	.list-table {
+		th:first-child {
+			padding-left: 0px;
+		}
+
+		td:first-child {
+			padding-left: 42px;
+		}
+	}
+}
+
 // Filter checkboxes.
 .filter-highlight-row-cb {
 	display: none;
@@ -1556,3 +1569,21 @@ td.inactive-bg {
 		content: "";
 	}
 }
+
+// HOST INTERFACES
+
+.interfaces {
+	.interface-row {
+		&[data-type="2"] {
+			.interface-btn-toggle {
+				background-position: -318px -690px;
+			}
+
+			&.list-accordion-item-opened {
+				.interface-btn-toggle {
+					background-position: -318px -655px;
+				}
+			}
+		}
+	}
+}
diff --git a/sass/stylesheets/sass/hc-light.scss b/sass/stylesheets/sass/hc-light.scss
index 091dd9ab79f..1705ed25df6 100644
--- a/sass/stylesheets/sass/hc-light.scss
+++ b/sass/stylesheets/sass/hc-light.scss
@@ -40,6 +40,7 @@ $font-selected-color: #ffffff;
 $font-alt-color: #333333;
 $body-bg-color: #ffffff;
 $overlay-bg-color: #000000;
+$overlay-border-color: #383838;
 
 // Main menu
 $menu-main-color: #ffffff;
@@ -837,6 +838,18 @@ a.link-action {
 	}
 }
 
+.overlay-dialogue {
+	.list-table {
+		th:first-child {
+			padding-left: 0px;
+		}
+
+		td:first-child {
+			padding-left: 42px;
+		}
+	}
+}
+
 // Checkbox disabling.
 .filter-highlight-row-cb {
 	display: none;
@@ -1385,3 +1398,21 @@ td.inactive-bg {
 		content: "";
 	}
 }
+
+// HOST INTERFACES
+
+.interfaces {
+	.interface-row {
+		&[data-type="2"] {
+			.interface-btn-toggle {
+				background-position: -165px -690px;
+			}
+
+			&.list-accordion-item-opened {
+				.interface-btn-toggle {
+					background-position: -165px -655px;
+				}
+			}
+		}
+	}
+}
diff --git a/sass/stylesheets/sass/screen.scss b/sass/stylesheets/sass/screen.scss
index a813491df38..719c4405646 100644
--- a/sass/stylesheets/sass/screen.scss
+++ b/sass/stylesheets/sass/screen.scss
@@ -450,7 +450,6 @@ form {
 			box-shadow: inset 0 -1px 0 0 rgba($font-color, .1);
 			color: $font-color;
 			height: 22px;
-			line-height: 1;
 			vertical-align: middle;
 			white-space: nowrap;
 
@@ -757,12 +756,6 @@ form {
 			}
 		}
 	}
-
-	td {
-		.checkbox-radio + label span {
-			top: -2px;
-		}
-	}
 }
 
 .table-paging {
@@ -1449,16 +1442,6 @@ form {
 				margin-top: 5px;
 			}
 		}
-
-		.checkbox-radio + label span {
-			top: -1px;
-		}
-
-		.checkbox-list {
-			.checkbox-radio + label span {
-				top: -3px;
-			}
-		}
 	}
 
 	h4 {
@@ -1615,10 +1598,6 @@ input {
 		@extend %form-input-style;
 	}
 
-	&[type="checkbox"] {
-		@extend %form-check-radio-style;
-	}
-
 	&[type="radio"] {
 		@extend %form-check-radio-style;
 	}
@@ -1715,6 +1694,35 @@ select {
 }
 
 .checkbox-radio {
+	position: absolute !important;
+	top: auto !important;
+	z-index: 1;
+	width: 16px !important;
+	height: 16px !important;
+	opacity: 0;
+
+	& + label {
+		span {
+			position: relative;
+			display: inline-block;
+			width: 14px;
+			height: 14px;
+			margin-right: 4px;
+			vertical-align: text-bottom;
+			background-color: $form-bg-color;
+			border: 1px solid $form-border-color;
+
+			&:active {
+				border-color: $form-border-color;
+			}
+		}
+
+		&.label-pos-left span {
+			margin-left: 4px;
+			margin-right: 0;
+		}
+	}
+
 	&:checked[readonly] + label span {
 		transition: none;
 
@@ -1725,7 +1733,7 @@ select {
 
 	&[readonly] {
 		&,
-		+ label {
+		& + label {
 			pointer-events: none;
 
 			span {
@@ -1736,7 +1744,7 @@ select {
 	}
 
 	&[type="checkbox"] {
-		+ label span {
+		& + label span {
 			border-radius: 2px;
 		}
 
@@ -1763,7 +1771,7 @@ select {
 	}
 
 	&[type="radio"] {
-		+ label span {
+		& + label span {
 			border-radius: 50%;
 		}
 
@@ -1788,36 +1796,6 @@ select {
 		}
 	}
 
-	position: absolute !important;
-	top: auto !important;
-	width: 16px !important;
-	height: 16px !important;
-	opacity: 0;
-	z-index: 1;
-
-	+ label {
-		span {
-			position: relative;
-			display: inline-block;
-			width: 14px;
-			height: 14px;
-			margin-right: 4px;
-			top: -2px;
-			vertical-align: middle;
-			border: 1px solid $form-border-color;
-			background-color: $form-bg-color;
-
-			&:active {
-				border-color: $form-border-color;
-			}
-		}
-	}
-
-	+ label.label-pos-left span {
-		margin-left: 6px;
-		margin-right: 1px;
-	}
-
 	&:focus + label span {
 		border-color: $form-border-focus-color;
 	}
@@ -2971,8 +2949,8 @@ $form-icon-btn: (
 	min-width: 166px;
 	max-width: 250px;
 	background-color: $ui-bg-color;
-	border: 1px solid $action-border-color;
-	border-bottom-color: darken($action-border-color, 1%);
+	border: 1px solid $overlay-border-color;
+	border-bottom-color: darken($overlay-border-color, 1%);
 	box-shadow: 0 4px 20px 0 $action-shadow-color;
 
 	&:focus {
@@ -3066,8 +3044,8 @@ $form-icon-btn: (
 		width: 12px;
 		height: 12px;
 		background-color: $ui-bg-color;
-		border-top: 1px solid $action-border-color;
-		border-left: 1px solid $action-border-color;
+		border-top: 1px solid $overlay-border-color;
+		border-left: 1px solid $overlay-border-color;
 		transform: rotate(45deg);
 	}
 }
@@ -3078,8 +3056,8 @@ $form-icon-btn: (
 	z-index: 1000;
 	padding: 13px 10px 10px;
 	background-color: $ui-bg-color;
-	border: 1px solid $action-border-color;
-	border-bottom-color: darken($action-border-color, 1%);
+	border: 1px solid $overlay-border-color;
+	border-bottom-color: darken($overlay-border-color, 1%);
 	box-shadow: 0 4px 20px 0 $action-shadow-color;
 
 	.dashboard-widget-head {
@@ -4456,7 +4434,7 @@ span {
 .menu-popup-preloader,
 .hintbox-preloader {
 	background: $preloader-bg-color;
-	border: 1px solid $action-border-color;
+	border: 1px solid $overlay-border-color;
 	box-shadow: 0 4px 20px 0 $action-shadow-color;
 	height: 128px;
 	width: 128px;
@@ -4889,12 +4867,7 @@ svg {
 	li {
 		overflow: hidden;
 		text-overflow: ellipsis;
-		line-height: 20px;
-
-		label {
-			line-height: 16px;
-			vertical-align: bottom;
-		}
+		line-height: 24px;
 	}
 }
 
@@ -4975,6 +4948,7 @@ svg {
 	display: block;
 	max-width: 930px;
 	min-width: 800px;
+	position: relative;
 
 	> li {
 		display: block;
@@ -6131,81 +6105,88 @@ button {
 
 // HOST INTERFACES
 
-.interface-container {
-	width: fit-content;
-	width: -moz-fit-content;
-	padding-left: 0;
-
-	&:not(.interface-container-header):not(:empty) {
-		margin-bottom: 5px;
-
-		& ~ .interface-container:not(:empty) {
-			border-top: 1px solid $form-border-color;
-			padding-top: 10px;
-		}
+.table-forms-td-right {
+	.interfaces {
+		margin-top: 5px;
 	}
+}
 
-	&:empty {
-		display: none;
-	}
+.interfaces {
+	display: grid;
+	grid-template-columns: 26px repeat(7, max-content);
+	margin-bottom: 5px;
+	line-height: 24px;
 
-	.interface-row {
-		display: grid;
-		grid-template-columns: 26px 36px 225px 175px 85px 100px 20px 1fr;
-		grid-template-rows: 24px 1fr;
-		gap: 5px;
+	.interface-container {
+		display: contents;
 
-		&:not(:first-of-type) {
-			margin-top: 5px;
+		&.interface-container-header {
+			.interface-cell {
+				padding: 0 5px 0 0;
+				color: $font-alt-color;
+			}
+
+			.interface-cell-action {
+				grid-column: span 2;
+			}
 		}
 
-		&[data-type] .interface-cell-details {
-			display: none;
-			grid-column: 1/-1;
+		&:not(.interface-container-header):not(:empty) ~ .interface-container:not(:empty) {
+			.interface-cell:not(.interface-cell-details) {
+				padding-top: 10px;
+				margin-top: 5px;
+				border-top: 1px solid $form-border-color;
+			}
 		}
+	}
 
-		.interface-cell {
-			align-self: center;
+	.interface-row {
+		display: contents;
 
+		&[data-type="2"] {
 			.interface-btn-toggle {
-				display: none;
-				@extend .btn-link;
-			}
+				@extend %btn-widget-defaults;
 
-			&.interface-cell-header {
-				color: $font-alt-color;
-				text-align: left;
+				display: inline-block;
+				width: 24px;
+				height: 24px;
+				background: url($sprite-path) no-repeat -6px -690px;
 			}
 
-			.table-forms-td-left,
-			.table-forms-td-right {
-				padding-bottom: 0;
+			.list-accordion-item-body {
+				display: none;
+				padding-top: 0;
 			}
-		}
-	}
-}
 
-// Host interface accordion for SNMP specific styles.
-.interface-row.list-accordion-item[data-type="2"] {
-	&.list-accordion-item-closed {
-		.interface-btn-toggle {
-			@extend .btn-widget-expand;
+			&.list-accordion-item-opened {
+				.interface-btn-toggle {
+					background: url($sprite-path) no-repeat -6px -655px;
+				}
+
+				.list-accordion-item-body {
+					display: block;
+				}
+			}
 		}
 	}
 
-	&.list-accordion-item-opened {
-		.interface-btn-toggle {
-			@extend .btn-widget-collapse;
-		}
+	.interface-cell {
+		padding: 5px 5px 5px 0;
 
-		.list-accordion-item-body {
-			display: block;
+		&.interface-cell-details {
+			display: none;
+			grid-column: 1 / -1;
 		}
 	}
 
 	.interface-btn-toggle {
-		display: inline-block;
-		@extend %btn-widget;
+		display: none;
+		vertical-align: top;
+	}
+
+	.no-interface {
+		grid-column: 1 / -1;
+		color: $font-alt-color;
 	}
 }
 
@@ -6397,7 +6378,7 @@ z-select,
 
 .import-compare {
 	display: flex;
-	max-height: calc(100vh - 190px);
+	max-height: calc(100vh - 220px);
 
 	.toc {
 		flex: 20%;
@@ -6411,6 +6392,11 @@ z-select,
 		overflow: auto;
 		border: 1px dashed $form-border-color;
 	}
+
+	.toc,
+	.diff {
+		@extend %webkit-scrollbar;
+	}
 }
 
 .list-dashed {
@@ -6488,9 +6474,9 @@ z-select,
 	background-position: -117px -506px !important;
 }
 .geomap-filter {
-	border: 2px solid rgba($ui-border-color, .4);
+	border: 1px solid $overlay-border-color;
 	background-color: $ui-bg-color;
-	padding: 10px 30px 5px 10px;
+	padding: 5px 20px 5px 10px;
 	position: absolute;
 	margin-right: -2px;
 	margin-top: 5px;
@@ -6498,7 +6484,7 @@ z-select,
 	right: 0;
 }
 .geomap-filter.collapsed {
-	display: table;
+	display: block;
 }
 .geomap-filter li {
 	width: calc(100% + 20px);