..F....... [ZBX-20320] update to latest from master; resolved conflict in app/views/js/administration.userrole.edit.js.php

23 files changed, 811 insertions, 348 deletions

diff --git a/sass/img/icon-sprite.svg b/sass/img/icon-sprite.svg
index 5e74f109963..f5b0f9edcab 100644
--- a/sass/img/icon-sprite.svg
+++ b/sass/img/icon-sprite.svg
@@ -1870,17 +1870,6 @@
    style="fill:#FFFFFF;"
    d="M409.575,814.82c-2.236-0.246-3.784-2.376-3.248-4.568L409.575,814.82z M410,815.718  c-2.849,0-5.336-1.496-6.667-3.719c0.604-1.009,1.447-1.869,2.454-2.506l-0.765-1.076c-1.161,0.745-2.136,1.743-2.838,2.916  c-0.246,0.411-0.246,0.922,0,1.333c1.565,2.615,4.486,4.365,7.815,4.365c0.368,0,0.736-0.022,1.101-0.065l-0.889-1.251  C410.141,815.717,410.07,815.718,410,815.718z M417.815,812.666c-0.923,1.542-2.317,2.782-3.988,3.541l1.337,1.88  c0.106,0.148,0.069,0.353-0.082,0.457l-0.576,0.397c-0.151,0.104-0.359,0.068-0.464-0.081l-9.206-12.947  c-0.106-0.148-0.069-0.353,0.082-0.457l0.576-0.397c0.151-0.104,0.359-0.068,0.464,0.081l1.542,2.169  c0.795-0.222,1.633-0.34,2.5-0.34c3.329,0,6.25,1.75,7.815,4.365C418.061,811.745,418.061,812.255,417.815,812.666L417.815,812.666z   M416.666,812c-1.227-2.049-3.435-3.48-6.005-3.692c-0.272,0.276-0.44,0.652-0.44,1.067c0,0.846,0.696,1.531,1.556,1.531  c0.859,0,1.556-0.686,1.556-1.531l0-0.001c0.851,1.566,0.465,3.562-1.026,4.695l0.742,1.043  C414.573,814.476,415.842,813.377,416.666,812z"
    id="path2284" />
-<path
-   style="fill:#FFFFFF;"
-   d="M410,840.289c-4.418,0-8,3.796-8,5c0,1.317,3.582,5,8,5s8-3.583,8-5  C418,844.122,414.418,840.289,410,840.289z M409.999,841.844c1.337,0,2.42,1.084,2.42,2.42c0,1.337-1.084,2.42-2.42,2.42  s-2.42-1.084-2.42-2.42C407.579,842.927,408.663,841.844,409.999,841.844z M410,849.059c-3.544,0-6.417-2.778-6.417-3.771  c0-0.589,1.213-1.998,3.03-2.917c-0.315,0.562-0.51,1.202-0.51,1.892c0,2.152,1.744,3.896,3.896,3.896s3.896-1.744,3.896-3.896  c0-0.687-0.193-1.323-0.505-1.884c1.815,0.925,3.027,2.338,3.027,2.908C416.417,846.357,413.544,849.059,410,849.059z"
-   id="path2286" />
-<path
-   d="M257.561,840.289c-4.418,0-8,3.796-8,5c0,1.317,3.582,5,8,5s8-3.583,8-5C265.561,844.122,261.98,840.289,257.561,840.289z   M257.561,841.844c1.337,0,2.42,1.084,2.42,2.42c0,1.337-1.084,2.42-2.42,2.42s-2.42-1.084-2.42-2.42  C255.141,842.927,256.224,841.844,257.561,841.844z M257.561,849.059c-3.544,0-6.417-2.778-6.417-3.771  c0-0.589,1.213-1.998,3.03-2.917c-0.315,0.562-0.51,1.202-0.51,1.892c0,2.152,1.744,3.896,3.896,3.896s3.896-1.744,3.896-3.896  c0-0.687-0.193-1.323-0.505-1.884c1.815,0.925,3.027,2.338,3.027,2.908C263.978,846.357,261.105,849.059,257.561,849.059z"
-   id="path2288" />
-<path
-   style="fill:#768D99;"
-   d="M98,840.289c-4.418,0-8,3.796-8,5c0,1.317,3.582,5,8,5s8-3.583,8-5  C106,844.122,102.418,840.289,98,840.289z M97.999,841.844c1.337,0,2.42,1.084,2.42,2.42c0,1.337-1.084,2.42-2.42,2.42  s-2.42-1.084-2.42-2.42C95.579,842.927,96.663,841.844,97.999,841.844z M98,849.059c-3.544,0-6.417-2.778-6.417-3.771  c0-0.589,1.213-1.998,3.03-2.917c-0.315,0.562-0.51,1.202-0.51,1.892c0,2.152,1.744,3.896,3.896,3.896s3.896-1.744,3.896-3.896  c0-0.687-0.193-1.323-0.505-1.884c1.815,0.925,3.027,2.338,3.027,2.908C104.417,846.357,101.544,849.059,98,849.059z"
-   id="path2290" />
 <g
    id="g2296">
 	<path
@@ -3025,9 +3014,24 @@
      style="fill:#000000;fill-opacity:1;stroke-width:0.083142"
      d="m 553.67722,842.30532 c -0.75182,-0.2683 -1.22618,-0.91394 -1.22618,-1.66893 0,-0.84706 0.59183,-1.5271 1.48742,-1.70911 0.4376,-0.0889 0.52342,-0.15079 1.389,-1.00118 1.01718,-0.99933 1.22977,-1.09217 1.64705,-0.71932 0.41562,0.37136 0.37883,0.5263 -0.39613,1.66861 -0.69243,1.02065 -0.70616,1.05049 -0.62265,1.35296 0.23768,0.86079 -0.35755,1.85367 -1.26776,2.11472 -0.37266,0.10687 -0.63271,0.0972 -1.01075,-0.0378 z"
      id="path8143-3-0" /></g>
-<path d="M 291 624 C 287.15 624 284 627.15 284 631 C 284 634.85 287.15 638 291 638 C 294.85 638 298 634.85 298 631 C 298 627.15 294.85 624 291 624 z M 291 625.40039 C 294.08 625.40039 296.59961 627.92 296.59961 631 C 296.59961 634.08 294.08 636.59961 291 636.59961 C 287.92 636.59961 285.40039 634.08 285.40039 631 C 285.40039 627.92 287.92 625.40039 291 625.40039 z M 290.24023 627.20312 L 290.24023 628.72266 L 291.75977 628.72266 L 291.75977 627.20312 L 290.24023 627.20312 z M 290.24023 630.24023 L 290.24023 634.79492 L 291.75977 634.79492 L 291.75977 630.24023 L 290.24023 630.24023 z " id="path614-6" />
-<path inkscape:connector-curvature="0"
-	d="m 443,624 c -3.85,0 -7,3.15 -7,7 0,3.85 3.15,7 7,7 3.85,0 7,-3.15 7,-7 0,-3.85 -3.15,-7 -7,-7 z m 0,1.40039 c 3.08,0 5.59961,2.51961 5.59961,5.59961 0,3.08 -2.51961,5.59961 -5.59961,5.59961 -3.08,0 -5.59961,-2.51961 -5.59961,-5.59961 0,-3.08 2.51961,-5.59961 5.59961,-5.59961 z m -0.75977,1.80273 v 1.51954 h 1.51954 v -1.51954 z m 0,3.03711 v 4.55469 h 1.51954 v -4.55469 z"
-	id="path614-6-5"
-	style="fill:#ffffff" />
-</svg>
+<path
+   d="M 291 624 C 287.15 624 284 627.15 284 631 C 284 634.85 287.15 638 291 638 C 294.85 638 298 634.85 298 631 C 298 627.15 294.85 624 291 624 z M 291 625.40039 C 294.08 625.40039 296.59961 627.92 296.59961 631 C 296.59961 634.08 294.08 636.59961 291 636.59961 C 287.92 636.59961 285.40039 634.08 285.40039 631 C 285.40039 627.92 287.92 625.40039 291 625.40039 z M 290.24023 627.20312 L 290.24023 628.72266 L 291.75977 628.72266 L 291.75977 627.20312 L 290.24023 627.20312 z M 290.24023 630.24023 L 290.24023 634.79492 L 291.75977 634.79492 L 291.75977 630.24023 L 290.24023 630.24023 z "
+   id="path614-6" />
+<path
+   inkscape:connector-curvature="0"
+   d="m 443,624 c -3.85,0 -7,3.15 -7,7 0,3.85 3.15,7 7,7 3.85,0 7,-3.15 7,-7 0,-3.85 -3.15,-7 -7,-7 z m 0,1.40039 c 3.08,0 5.59961,2.51961 5.59961,5.59961 0,3.08 -2.51961,5.59961 -5.59961,5.59961 -3.08,0 -5.59961,-2.51961 -5.59961,-5.59961 0,-3.08 2.51961,-5.59961 5.59961,-5.59961 z m -0.75977,1.80273 v 1.51954 h 1.51954 v -1.51954 z m 0,3.03711 v 4.55469 h 1.51954 v -4.55469 z"
+   id="path614-6-5"
+   style="fill:#ffffff" />
+<path
+   id="path2290-5"
+   fill="#000000"
+   d="m 98.0126,840.289 c -4.42205,0 -8.0126,3.77952 -8.0126,4.98897 0,1.32284 3.59055,4.98898 8.0126,4.98898 4.38425,0 7.9748,-3.59055 7.9748,-4.98898 0,-1.17165 -3.59055,-4.98897 -7.9748,-4.98897 z m 3.28819,1.96535 c 0,0.15118 0.0378,0.26457 0.0378,0.37795 0,0.86929 -0.68031,1.54961 -1.54961,1.54961 -0.86929,0 -1.5496,-0.75591 -1.5496,-1.39843 0,-0.64252 0.11338,-0.90708 0.41575,-1.20945 1.09606,0.0756 2.07874,0.41575 2.64567,0.68032 z m -3.28819,6.80315 c -3.55276,0 -6.4252,-2.79685 -6.4252,-3.77953 0,-0.60472 1.20945,-2.00315 3.02362,-2.91023 -0.30236,0.56692 -0.52913,1.17165 -0.52913,1.88976 0,2.15433 1.77637,3.89291 3.93071,3.89291 2.11653,0 3.89291,-1.73858 3.89291,-3.89291 0,-0.68032 -0.22677,-1.32284 -0.52913,-1.88976 1.81417,0.90708 3.02362,2.3433 3.02362,2.91023 0,1.05827 -2.87244,3.77953 -6.3874,3.77953 z"
+   style="fill:#768d99;fill-opacity:1;stroke-width:0.0377953" /><path
+   id="path2290-5-3"
+   fill="#000000"
+   d="m 257.5736,840.289 c -4.42205,0 -8.0126,3.77952 -8.0126,4.98897 0,1.32284 3.59055,4.98898 8.0126,4.98898 4.38425,0 7.9748,-3.59055 7.9748,-4.98898 0,-1.17165 -3.59055,-4.98897 -7.9748,-4.98897 z m 3.28819,1.96535 c 0,0.15118 0.0378,0.26457 0.0378,0.37795 0,0.86929 -0.68031,1.54961 -1.54961,1.54961 -0.86929,0 -1.5496,-0.75591 -1.5496,-1.39843 0,-0.64251 0.11338,-0.90707 0.41575,-1.20944 1.09606,0.0756 2.07874,0.41575 2.64567,0.68032 z m -3.28819,6.80315 c -3.55276,0 -6.4252,-2.79685 -6.4252,-3.77953 0,-0.60472 1.20945,-2.00315 3.02362,-2.91023 -0.30236,0.56692 -0.52913,1.17165 -0.52913,1.88976 0,2.15433 1.77637,3.89291 3.93071,3.89291 2.11653,0 3.89291,-1.73858 3.89291,-3.89291 0,-0.68032 -0.22677,-1.32284 -0.52913,-1.88976 1.81417,0.90708 3.02362,2.3433 3.02362,2.91023 0,1.05827 -2.87244,3.77953 -6.3874,3.77953 z"
+   style="fill:#000000;fill-opacity:1;stroke-width:0.0377953" /><path
+   id="path2290-5-3-4"
+   fill="#000000"
+   d="m 410.0126,840.289 c -4.42205,0 -8.0126,3.77952 -8.0126,4.98897 0,1.32284 3.59055,4.98898 8.0126,4.98898 4.38425,0 7.9748,-3.59055 7.9748,-4.98898 0,-1.17165 -3.59055,-4.98897 -7.9748,-4.98897 z m 3.28819,1.96535 c 0,0.15118 0.0378,0.26457 0.0378,0.37795 0,0.86929 -0.68031,1.54961 -1.54961,1.54961 -0.86929,0 -1.5496,-0.75591 -1.5496,-1.39843 0,-0.64251 0.11338,-0.90707 0.41575,-1.20944 1.09606,0.0756 2.07874,0.41575 2.64567,0.68032 z m -3.28819,6.80315 c -3.55276,0 -6.4252,-2.79685 -6.4252,-3.77953 0,-0.60472 1.20945,-2.00315 3.02362,-2.91023 -0.30236,0.56692 -0.52913,1.17165 -0.52913,1.88976 0,2.15433 1.77637,3.89291 3.93071,3.89291 2.11653,0 3.89291,-1.73858 3.89291,-3.89291 0,-0.68032 -0.22677,-1.32284 -0.52913,-1.88976 1.81417,0.90708 3.02362,2.3433 3.02362,2.91023 0,1.05827 -2.87244,3.77953 -6.3874,3.77953 z"
+   style="fill:#ffffff;fill-opacity:1;stroke-width:0.0377953" /></svg>
diff --git a/sass/stylesheets/sass/base/_colors.scss b/sass/stylesheets/sass/base/_colors.scss
index c45d4c92677..26e915be155 100644
--- a/sass/stylesheets/sass/base/_colors.scss
+++ b/sass/stylesheets/sass/base/_colors.scss
@@ -120,6 +120,7 @@ $action-shadow-color: rgba(#768d99, .5) !default;
 $table-border-color: #ebeef0 !default;
 
 $ui-tab-bg-selected-color: #0275b8 !default;
+$ui-tabfilter-item-border-color: #768d99 !default;
 
 // Forms
 $form-font-color: #1f2c33 !default;
diff --git a/sass/stylesheets/sass/base/_reset.scss b/sass/stylesheets/sass/base/_reset.scss
index 44dcdd4e9cb..dd4f3644020 100644
--- a/sass/stylesheets/sass/base/_reset.scss
+++ b/sass/stylesheets/sass/base/_reset.scss
@@ -1,6 +1,6 @@
 html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var,
 b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,
-time, mark, audio, video {
+time, mark, audio, video, textarea {
 	margin: 0;
 	padding: 0;
 	border: 0;
diff --git a/sass/stylesheets/sass/components/_buttons.scss b/sass/stylesheets/sass/components/_buttons.scss
index d4788751ac8..17a2e31e1c5 100644
--- a/sass/stylesheets/sass/components/_buttons.scss
+++ b/sass/stylesheets/sass/components/_buttons.scss
@@ -25,14 +25,15 @@
 }
 
 %btn-remove-icon {
-	font-size: $font-h2-size;
-	font-weight: bold;
+	font-size: 20px;
 	color: $font-alt-color;
 	text-align: center;
 	cursor: pointer;
 
 	&::before {
-		content: '\00d7';
+		display: block;
+		content: '+';
+		transform: rotate(45deg);
 	}
 
 	&:hover,
diff --git a/sass/stylesheets/sass/components/_expandable-subfilter.scss b/sass/stylesheets/sass/components/_expandable-subfilter.scss
new file mode 100644
index 00000000000..30f69c2d748
--- /dev/null
+++ b/sass/stylesheets/sass/components/_expandable-subfilter.scss
@@ -0,0 +1,29 @@
+.expandable-subfilter {
+	$line-height: 18px;
+
+	position: relative;
+	word-break: break-word;
+	max-height: $line-height;
+	line-height: $line-height;
+	overflow: hidden;
+
+	&.ten-lines {
+		max-height: calc(#{$line-height} * 10);
+	}
+
+	> div {
+		display: inline;
+	}
+
+	.hidden {
+		display: none;
+	}
+
+	&.expanded {
+		max-height: none;
+
+		.hidden {
+			display: unset;
+		}
+	}
+}
diff --git a/sass/stylesheets/sass/components/_menu-main.scss b/sass/stylesheets/sass/components/_menu-main.scss
index 45023dabca1..2f485319278 100644
--- a/sass/stylesheets/sass/components/_menu-main.scss
+++ b/sass/stylesheets/sass/components/_menu-main.scss
@@ -121,8 +121,7 @@ $menu-main-icons: (
 				}
 
 				@if $ui-transitions {
-					transition: transform $ui-transition-duration,
-					opacity $ui-transition-duration;
+					transition: transform $ui-transition-duration, opacity $ui-transition-duration;
 				}
 			}
 
diff --git a/sass/stylesheets/sass/components/_message-box.scss b/sass/stylesheets/sass/components/_message-box.scss
index b566351ad7e..61be6501b3b 100644
--- a/sass/stylesheets/sass/components/_message-box.scss
+++ b/sass/stylesheets/sass/components/_message-box.scss
@@ -14,7 +14,6 @@
 
 	.overlay-close-btn {
 		color: $font-alt-color;
-		font-size: $font-top-nav-size;
 	}
 
 	.link-action {
@@ -184,6 +183,8 @@
 
 	.list-dashed {
 		li {
+			white-space: pre-line;
+
 			&:only-child {
 				margin-left: 0;
 			}
diff --git a/sass/stylesheets/sass/components/_radio-list-control.scss b/sass/stylesheets/sass/components/_radio-list-control.scss
index 001233ac171..0e4835d1e8e 100644
--- a/sass/stylesheets/sass/components/_radio-list-control.scss
+++ b/sass/stylesheets/sass/components/_radio-list-control.scss
@@ -36,7 +36,7 @@
 	label {
 		display: inline-block;
 		border: 1px solid $form-border-color;
-		line-height: 1.2em;
+		line-height: 14px;
 		padding: 4px 11px;
 		transition: background-color .2s ease-out;
 		cursor: pointer;
@@ -92,6 +92,7 @@
 
 		&[disabled] + label {
 			transition: none;
+			cursor: default;
 			@extend %form-disabled;
 		}
 	}
diff --git a/sass/stylesheets/sass/components/_range-control.scss b/sass/stylesheets/sass/components/_range-control.scss
new file mode 100644
index 00000000000..c630e5dde77
--- /dev/null
+++ b/sass/stylesheets/sass/components/_range-control.scss
@@ -0,0 +1,128 @@
+// Range control.
+$range-track-color: #c0c0c0;
+$range-progress-color: $link-color;
+$range-thumb-color: $link-color;
+$range-thumb-color-focus: $link-active-color;
+$range-progress-color-focus: $link-active-color;
+$range-thumb-size: 10px;
+$range-track-height: 2px;
+$range-input-width: 31px;
+
+.range-control {
+	position: relative;
+	display: inline-block;
+	vertical-align: middle;
+
+	input[type=range] {
+		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;
+		}
+
+		/* 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;
+			opacity: 0;
+		}
+
+		&::-webkit-slider-runnable-track {
+			height: $range-thumb-size;
+			opacity: 0;
+		}
+	}
+
+	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;
+	}
+
+	.range-control-track,
+	.range-control-progress {
+		position: absolute;
+		top: 50%;
+		margin-top: -$range-track-height / 2;
+		left: 0;
+		height: $range-track-height;
+		cursor: pointer;
+	}
+
+	.range-control-track {
+		width: 100%;
+		background: $range-track-color;
+	}
+
+	.range-control-progress {
+		background: $range-progress-color;
+	}
+
+	.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%;
+		background: $range-thumb-color;
+	}
+
+	&.range-control-focus {
+		.range-control-thumb {
+			margin-top: -$range-thumb-size / 1.5;
+			margin-left: -$range-thumb-size / 1.5;
+			background: $range-thumb-color-focus;
+			border: 2px solid lighten($btn-bg-color, 10%);
+		}
+
+		.range-control-progress {
+			background: $range-progress-color-focus;
+		}
+	}
+
+	&.disabled {
+		opacity: 1;
+
+		input[type=range] {
+			cursor: default;
+		}
+		.range-control-progress,
+		.range-control-thumb {
+			background: #c0c0c0;
+		}
+	}
+
+	datalist {
+		position: absolute;
+		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;
+			border-left: 1px solid $body-bg-color;
+		}
+	}
+}
diff --git a/sass/stylesheets/sass/components/_svg-graph.scss b/sass/stylesheets/sass/components/_svg-graph.scss
new file mode 100644
index 00000000000..d6d2e84bb21
--- /dev/null
+++ b/sass/stylesheets/sass/components/_svg-graph.scss
@@ -0,0 +1,71 @@
+.svg-graph {
+	display: block;
+}
+
+.svg-point-highlight {
+	fill: $font-color;
+	fill-opacity: .5;
+}
+
+.svg-graph-percentile,
+.svg-graph-simple-trigger {
+	text {
+		filter: drop-shadow(1px 1px 0px rgba(128, 128, 128, 0.1));
+	}
+}
+
+.svg-graph-legend {
+	$svg-legend-line-height: 18px;
+
+	position: relative;
+	top: 4px;
+	box-sizing: border-box;
+	display: grid;
+	grid-template-columns: repeat(var(--columns, 4), auto);
+	grid-gap: 0 10px;
+	justify-content: start;
+	max-height: calc(var(--lines) * #{$svg-legend-line-height});
+	margin: 0 10px;
+	overflow: hidden;
+	line-height: $svg-legend-line-height;
+
+	.svg-graph-legend-header {
+		color: $font-alt-color;
+
+		&:first-of-type {
+			grid-column: 2;
+		}
+	}
+
+	.svg-graph-legend-item {
+		min-width: 100%;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+
+		&::before {
+			position: relative;
+			top: -3px;
+			content: ' ';
+			display: inline-block;
+			width: 10px;
+			height: 4px;
+			margin-right: 4px;
+			background: var(--color);
+		}
+	}
+
+	.svg-graph-legend-no-data {
+		grid-column: 2 / -1;
+		color: $font-alt-color;
+	}
+
+	&.svg-graph-legend-statistic {
+		grid-template-columns: auto repeat(3, max-content);
+		justify-content: stretch;
+
+		.svg-graph-legend-item {
+			grid-column: 1;
+		}
+	}
+}
diff --git a/sass/stylesheets/sass/components/_tabfilter.scss b/sass/stylesheets/sass/components/_tabfilter.scss
index 7736a75ff4c..22dd80c75f6 100644
--- a/sass/stylesheets/sass/components/_tabfilter.scss
+++ b/sass/stylesheets/sass/components/_tabfilter.scss
@@ -33,6 +33,8 @@ $tab-label-counter-bg-color: $form-disabled-bg-color;
 		margin-bottom: 6px;
 
 		&.tabfilter-collapsed {
+			padding: 0 0 10px 0;
+
 			.tabfilter-tabs-container,
 			.form-buttons {
 				display: none;
@@ -102,17 +104,12 @@ $tab-label-counter-bg-color: $form-disabled-bg-color;
 
 	// Tab filter label li element.
 	.tabfilter-item-label {
-		&:hover {
-			color: $tab-label-hover-color;
-			background-color: darken($tab-label-hover-bg-color, 5%);
-		}
-
 		display: inline-block;
-		background-color: $tab-label-bg-color;
 		border-radius: 2px;
 		border: 1px solid transparent;
 		color: $tab-label-color;
-		margin-right: 3px;
+		margin-right: 2px;
+		margin-left: 2px;
 
 		&.unsaved .tabfilter-item-link {
 			font-style: italic;
@@ -131,8 +128,7 @@ $tab-label-counter-bg-color: $form-disabled-bg-color;
 			background-color: $tab-label-expanded-bg-color;
 			border: 1px solid $tab-label-expanded-border-color;
 			border-bottom: 0;
-			padding-bottom: 8px;
-			margin-top: -1px;
+			padding-bottom: 7px;
 			vertical-align: baseline;
 
 			.tabfilter-item-link {
@@ -142,18 +138,10 @@ $tab-label-counter-bg-color: $form-disabled-bg-color;
 			&:hover {
 				background: $tab-label-focus-bg-color;
 			}
-
-			.icon-edit {
-				background: url($sprite-path) no-repeat -42px -621px;
-			}
 		}
 
 		&.selected {
-			background-color: darken($tab-label-selected-bg-color, 5%);
-
-			.tabfilter-item-link {
-				color: $tab-label-selected-color;
-			}
+			background-color: $tab-label-expanded-bg-color;
 
 			.tabfilter-item-link[data-counter]::after {
 				display: none;
@@ -172,26 +160,52 @@ $tab-label-counter-bg-color: $form-disabled-bg-color;
 		.icon-filter.tabfilter-item-link[data-counter]::after {
 			display: none;
 		}
+
+		&.ui-sortable-helper {
+			background-color: $tab-label-expanded-bg-color;
+		}
 	}
 
 	// Tab filter label li clickable a element.
 	.tabfilter-item-link {
+		position: relative;
 		display: inline-block;
-		color: $tab-label-color;
+		color: $tab-label-expanded-color;
 		border: 1px transparent;
 		line-height: 22px;
 		vertical-align: middle;
-		padding: 0 8px;
+		padding: 0 8px 7px 8px;
+		margin-bottom: -7px;
+	}
+
+	.ui-sortable-container {
+		// Tab sortable handle left border is visible when handle is not selected, do not have selected sibling before and is not dragged.
+		.tabfilter-item-label.ui-sortable-helper,
+		.tabfilter-item-label:not(.selected) {
+			& + .tabfilter-item-label.ui-sortable-handle:not(.selected,.ui-sortable-helper) {
+				.tabfilter-item-link::before {
+					content: ' ';
+					position: absolute;
+					top: 1px;
+					left: -3px;
+					display: inline-block;
+					height: 20px;
+					border-left: 1px solid $ui-tabfilter-item-border-color;
+				}
+			}
+		}
 	}
 
 	.icon-edit {
 		@extend %btn-widget-defaults;
 		width: 24px;
 		height: 22px;
-		background: url($sprite-path) no-repeat -354px -621px;
+		background: url($sprite-path) no-repeat -42px -621px;
 
 		cursor: pointer;
 		margin: 0;
+		padding-bottom: 7px !important;
+		margin-bottom: -7px;
 		vertical-align: middle;
 		display: inline-block;
 		opacity: 0;
@@ -209,9 +223,9 @@ $tab-label-counter-bg-color: $form-disabled-bg-color;
 	margin-left: .4em;
 	padding: 0.1em 0.4em;
 	font-size: $font-h3-size;
-	background-color: $tab-label-counter-bg-color;
+	background-color: $ui-bg-selected-color;
 	border-radius: 2px;
-	color: $tab-label-counter-color;
+	color: $white;
 	content: attr(data-counter);
 }
 
@@ -234,15 +248,11 @@ $tab-label-counter-bg-color: $form-disabled-bg-color;
 }
 
 .icon-filter::before {
-	display: block;
+	vertical-align: middle;
+	display: inline-block;
 	width: 24px;
 	height: 24px;
 	content: '';
-	// white icon
-	background: url($sprite-path) no-repeat -87px -547px;
-}
-
-.selected.expanded .icon-filter::before {
 	// grey icon
-	background-position: -246px -547px;
+	background: url($sprite-path) no-repeat -246px -547px;
 }
diff --git a/sass/stylesheets/sass/components/_z-select.scss b/sass/stylesheets/sass/components/_z-select.scss
index 9989a55e908..db94f2dc46f 100644
--- a/sass/stylesheets/sass/components/_z-select.scss
+++ b/sass/stylesheets/sass/components/_z-select.scss
@@ -6,6 +6,10 @@ z-select,
 		outline: none;
 	}
 
+	ul > li.default-option {
+		font-style: italic;
+	}
+
 	button.focusable {
 		position: relative;
 		width: 100%;
diff --git a/sass/stylesheets/sass/components/dashboard/_dashboard.scss b/sass/stylesheets/sass/components/dashboard/_dashboard.scss
index 08299597691..4906bf7bbbf 100644
--- a/sass/stylesheets/sass/components/dashboard/_dashboard.scss
+++ b/sass/stylesheets/sass/components/dashboard/_dashboard.scss
@@ -420,6 +420,14 @@
 	.msg-warning {
 		margin: 0 10px;
 	}
+
+	&.no-padding {
+		.msg-bad,
+		.msg-good,
+		.msg-warning {
+			margin: 8px 10px;
+		}
+	}
 }
 
 .dashboard-grid-widget-mask {
@@ -818,6 +826,11 @@
 				border-color: darken($ui-border-color, 6%);
 			}
 		}
+
+		&:not(.dashboard-grid-widget-focus) {
+			transition-property: width, height, left, top;
+			transition-duration: 0.15s;
+		}
 	}
 
 	.dashboard-grid-iterator {
@@ -938,6 +951,10 @@
 	background-color: $ui-bg-color;
 	border: 1px solid $ui-border-color;
 
+	.dashboard-widget-head {
+		margin: 8px 10px;
+	}
+
 	.list-table {
 		border: 0;
 
@@ -978,38 +995,17 @@
 }
 
 .dashboard-widget-head {
-	position: relative;
-	padding: 8px 60px 8px 10px;
+	display: flex;
+	margin-bottom: 8px;
 
 	h4 {
 		color: widget-head-font-color($font-color);
 		font-weight: bold;
+		margin-right: auto;
 	}
 
-	ul {
-		position: absolute;
-		top: 0;
-		right: 0;
-
-		li {
-			display: block;
-			float: left;
-			padding: 0;
-
-			select {
-				margin: 4px 0;
-			}
-		}
-	}
-
-	z-select {
-		.list {
-			li {
-				float: none;
-				line-height: normal;
-				padding: 5px;
-			}
-		}
+	& > ul {
+		margin: -8px -10px -10px 10px;
 	}
 }
 
@@ -1058,6 +1054,13 @@
 	}
 }
 
+.overlay-dialogue {
+	&.modal-popup.modal-widget-configuration {
+		max-width: 1120px;
+		min-width: 650px;
+	}
+}
+
 .wrapper.layout-kioskmode {
 
 	.dashboard-navigation {
diff --git a/sass/stylesheets/sass/components/dashboard/_widget-clock.scss b/sass/stylesheets/sass/components/dashboard/_widget-clock.scss
new file mode 100644
index 00000000000..0e1596c2d2e
--- /dev/null
+++ b/sass/stylesheets/sass/components/dashboard/_widget-clock.scss
@@ -0,0 +1,77 @@
+// Widget configuration.
+
+form.dashboard-grid-widget-clock {
+	.field-group-date,
+	.field-group-time,
+	.field-group-tzone {
+		display: grid;
+		grid-template-columns: repeat(3, minmax(60px, max-content) auto);
+		align-items: center;
+		column-gap: 10px;
+		row-gap: 5px;
+
+		label {
+			text-align: right;
+		}
+
+		.field-size {
+			input {
+				margin-right: 5px;
+			}
+		}
+	}
+
+	.field-group-time {
+		.field-format {
+			grid-column: 4 / -1;
+		}
+	}
+
+	.field-group-tzone {
+		.field-format {
+			grid-column: 2 / -1;
+		}
+
+		.field-timezone {
+			grid-column: 2 / -1;
+		}
+	}
+}
+
+// Widget view.
+
+div.dashboard-grid-widget-clock {
+	&.clock-digital {
+		$line-height: 1.14;
+
+		box-sizing: border-box;
+		min-height: 100%;
+		padding: 10px;
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+
+		.clock-date,
+		.clock-time,
+		.clock-time-zone {
+			max-width: 100%;
+			white-space: nowrap;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			font-size: calc(var(--content-height) * var(--widget-clock-font) / #{$line-height});
+			line-height: $line-height;
+			flex-shrink: 0;
+		}
+
+		.bold {
+			font-weight: bold;
+		}
+
+		.clock-disabled {
+			font-size: calc(var(--content-height) * 0.6 / #{$line-height});
+			color: $font-alt-color;
+			font-weight: bold;
+		}
+	}
+}
diff --git a/sass/stylesheets/sass/components/dashboard/_widget-svggraph.scss b/sass/stylesheets/sass/components/dashboard/_widget-svggraph.scss
index 8f570c1a4f8..ef68556ca29 100644
--- a/sass/stylesheets/sass/components/dashboard/_widget-svggraph.scss
+++ b/sass/stylesheets/sass/components/dashboard/_widget-svggraph.scss
@@ -1,10 +1,167 @@
 // Widget configuration.
 
-.overlay-dialogue.modal-popup {
-	.dashboard-grid-widget-svggraph {
-		.table-forms-container {
-			border: 1px solid $ui-border-color;
+form.dashboard-grid-widget-svggraph {
+	.graph-widget-config-tabs {
+		padding: 10px 0;
+
+		> .tabs-nav {
+			margin-right: 0;
+			margin-left: 0;
+			border-top: 1px solid $ui-border-color;
+		}
+
+		.ui-tabs-nav {
+			position: sticky;
+			top: 0;
+			background: $header-bg-color;
+			z-index: 3;
 		}
 	}
-}
 
+	.table-forms-container {
+		border: 1px solid $ui-border-color;
+		border-top: none;
+	}
+
+	.table-forms-separator {
+		padding: 0;
+	}
+
+	.dataset-head {
+		display: grid;
+		grid-template-columns: 24px 24px 1fr 1fr 24px;
+		grid-gap: 10px;
+		align-items: start;
+	}
+
+	.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;
+
+		.form-grid {
+			padding-top: 0;
+
+			&:first-child {
+				grid-column-start: 2;
+			}
+		}
+	}
+
+	.drag-icon {
+		position: absolute;
+		left: -14px;
+	}
+
+	.td-drag-icon {
+		.drag-icon {
+			top: 0;
+			left: 9px;
+			margin-right: 5px;
+		}
+	}
+
+	.dataset-actions {
+		text-align: right;
+
+		.btn-remove {
+			top: 0;
+			right: 0;
+			vertical-align: baseline;
+		}
+	}
+
+	.items-list {
+		grid-column: 2 / span 3;
+	}
+
+	.list-vertical-accordion {
+		position: relative;
+		margin-left: 15px;
+		padding-left: 0;
+
+		.list-accordion-item-head {
+			padding: 0;
+		}
+	}
+
+	.list-accordion-item {
+		position: relative;
+		margin-bottom: 10px;
+
+		&.list-accordion-item-opened {
+			&::before {
+				content: ' ';
+				position: absolute;
+				top: 24px;
+				bottom: 0;
+				left: 11px;
+				width: 2px;
+				background: $ui-border-color;
+			}
+
+		}
+
+		&.list-accordion-item-closed {
+			.multiselect {
+				height: 24px;
+				overflow: hidden;
+			}
+
+			.dataset-body {
+				display: none;
+			}
+
+			.dataset-head {
+				.table-forms-separator {
+					border: none;
+				}
+
+				.single-item-table {
+					thead,
+					tfoot,
+					.table-col-handle,
+					.table-col-action {
+						display: none;
+					}
+				}
+			}
+
+			.items-list {
+				padding-left: 0;
+			}
+		}
+	}
+
+	.single-item-table {
+		.table-col-handle { width: 26px; }
+		.table-col-no { width: 20px; }
+		.table-col-color { width: 24px; }
+		.table-col-action { width: 55px; }
+
+		th {
+			padding: 5px 5px 5px 0;
+		}
+
+		.single-item-table-row td {
+			padding: 0 5px 5px 0;
+		}
+
+		.single-item-table-row:last-child td {
+			padding-bottom: 0;
+		}
+
+		tfoot td {
+			padding: 5px 5px 5px 10px;
+		}
+	}
+
+	.no-items-message {
+		display: none;
+		line-height: 24px;
+		color: $font-alt-color;
+	}
+}
diff --git a/sass/stylesheets/sass/dark-theme.scss b/sass/stylesheets/sass/dark-theme.scss
index f8170f785ba..5fed2af4807 100644
--- a/sass/stylesheets/sass/dark-theme.scss
+++ b/sass/stylesheets/sass/dark-theme.scss
@@ -443,7 +443,6 @@ $toc-title-bg-color: #4f4f4f;
 	}
 }
 
-.selected.expanded .icon-filter::before {
-	// grey icon
-	background-position: -87px -547px;
+.icon-filter::before {
+	background: url($sprite-path) no-repeat -87px -547px;
 }
diff --git a/sass/stylesheets/sass/hc-dark.scss b/sass/stylesheets/sass/hc-dark.scss
index d34784bfc0f..eb0bbba197b 100644
--- a/sass/stylesheets/sass/hc-dark.scss
+++ b/sass/stylesheets/sass/hc-dark.scss
@@ -471,18 +471,18 @@ $var-icons: (
 
 $form-icon-btn: (
 	cal: url($sprite-path) no-repeat -354px -834px,
-	wzrd-action: url($sprite-path) no-repeat -317px -617px
+	wizard-action: url($sprite-path) no-repeat -317px -617px
 );
 
 // Dynamically generated classes:
 //  .icon-cal
-//  .icon-wzrd-action
+//  .icon-wizard-action
 @each $form-icon-btn, $bgimage in $form-icon-btn {
 	.icon-#{$form-icon-btn} {
 		background: $transparent $bgimage;
 		@extend %form-icon-btn;
 
-		@if $form-icon-btn == 'wzrd-action' {
+		@if $form-icon-btn == 'wizard-action' {
 			margin-top: -16px;
 		}
 	}
@@ -826,6 +826,11 @@ a.link-action {
 	}
 }
 
+.icon-count,
+a.icon-count {
+	color: $ui-bg-color;
+}
+
 .disabled {
 	opacity: .6;
 }
@@ -940,7 +945,7 @@ a.link-action {
 				background-position: -361px -767px
 			}
 
-			.icon-wzrd-action {
+			.icon-wizard-action {
 				background: transparent url($sprite-path) no-repeat -318px -624px;
 			}
 		}
@@ -1359,6 +1364,14 @@ td.inactive-bg {
 	background-position: -173px -325px;
 }
 
+.icon-action-suppress::before {
+	background-position: -401px -803px;
+}
+
+.icon-action-unsuppress::before {
+	background-position: -401px -836px;
+}
+
 .icon-invisible::before {
 	background-position: -401px -803px;
 }
@@ -1522,15 +1535,8 @@ td.inactive-bg {
 // Tabfilter
 
 .filter-container.tabfilter-container {
-
-	.selected.expanded .icon-filter::before {
-		// white icon
-		background: url($sprite-path) no-repeat -87px -547px;
-	}
-
 	.icon-filter::before {
-		// black icon
-		background: url($sprite-path) no-repeat -246px -547px;
+		background: url($sprite-path) no-repeat -87px -547px;
 	}
 
 	.tabfilter-item-label {
diff --git a/sass/stylesheets/sass/hc-light.scss b/sass/stylesheets/sass/hc-light.scss
index a429ede5843..510ba6ef4df 100644
--- a/sass/stylesheets/sass/hc-light.scss
+++ b/sass/stylesheets/sass/hc-light.scss
@@ -395,18 +395,18 @@ $var-icons: (
 
 $form-icon-btn: (
 	cal: url($sprite-path) no-repeat -201px -834px,
-	wzrd-action: url($sprite-path) no-repeat -168px -617px
+	wizard-action: url($sprite-path) no-repeat -168px -617px
 );
 
 // Dynamically generated classes:
 //  .icon-cal
-//  .icon-wzrd-action
+//  .icon-wizard-action
 @each $form-icon-btn, $bgimage in $form-icon-btn {
 	.icon-#{$form-icon-btn} {
 		background: $transparent $bgimage;
 		@extend %form-icon-btn;
 
-		@if $form-icon-btn == 'wzrd-action' {
+		@if $form-icon-btn == 'wizard-action' {
 			margin-top: -16px;
 		}
 	}
@@ -825,11 +825,11 @@ a.link-action {
 				background-position: -208px -767px;
 			}
 
-			.icon-wzrd-action {
+			.icon-wizard-action {
 				background: transparent url($sprite-path) no-repeat -318px -624px;
 			}
 
-			.icon-wzrd-action {
+			.icon-wizard-action {
 				background: transparent url($sprite-path) no-repeat -165px -624px;
 			}
 		}
@@ -1198,6 +1198,14 @@ td.inactive-bg {
 	background-position: -173px -285px;
 }
 
+.icon-action-suppress::before {
+	background-position: -249px -803px;
+}
+
+.icon-action-unsuppress::before {
+	background-position: -249px -836px;
+}
+
 .icon-invisible::before {
 	background-position: -249px -803px;
 }
diff --git a/sass/stylesheets/sass/layout/_form-grid.scss b/sass/stylesheets/sass/layout/_form-grid.scss
index 748db43766a..c01fda6a0d5 100644
--- a/sass/stylesheets/sass/layout/_form-grid.scss
+++ b/sass/stylesheets/sass/layout/_form-grid.scss
@@ -53,6 +53,19 @@
 
 		table {
 			width: 100%;
+
+			&.table-initial-width {
+				width: auto;
+			}
+		}
+
+		th {
+			padding: 0 5px 0 0;
+			color: $font-alt-color;
+
+			&:last-child {
+				padding: 0;
+			}
 		}
 
 		td {
diff --git a/sass/stylesheets/sass/layout/_grid-columns.scss b/sass/stylesheets/sass/layout/_grid-columns.scss
new file mode 100755
index 00000000000..c68b2a25f4d
--- /dev/null
+++ b/sass/stylesheets/sass/layout/_grid-columns.scss
@@ -0,0 +1,12 @@
+.grid-columns {
+	display: grid;
+	align-items: start;
+
+	&.columns-2 {
+		grid-template-columns: repeat(2, 1fr);
+	}
+
+	&.columns-3 {
+		grid-template-columns: repeat(3, 1fr);
+	}
+}
diff --git a/sass/stylesheets/sass/layout/_header.scss b/sass/stylesheets/sass/layout/_header.scss
index 247c355c149..ea31028e3fb 100644
--- a/sass/stylesheets/sass/layout/_header.scss
+++ b/sass/stylesheets/sass/layout/_header.scss
@@ -19,6 +19,16 @@ header {
 		white-space: nowrap;
 	}
 
+	.header-doc-link {
+		flex-shrink: 0;
+		margin: 0 -2px 0 auto;
+		padding: 2px;
+
+		& + .header-controls {
+			margin-left: 0;
+		}
+	}
+
 	.header-controls {
 		flex-shrink: 0;
 		margin: 0 -2px 0 auto;
diff --git a/sass/stylesheets/sass/layout/_grid.scss b/sass/stylesheets/sass/layout/_layout.scss
index 49d3d1105b8..49d3d1105b8 100644
--- a/sass/stylesheets/sass/layout/_grid.scss
+++ b/sass/stylesheets/sass/layout/_layout.scss
diff --git a/sass/stylesheets/sass/screen.scss b/sass/stylesheets/sass/screen.scss
index eca8dc1248c..14261436bc2 100644
--- a/sass/stylesheets/sass/screen.scss
+++ b/sass/stylesheets/sass/screen.scss
@@ -6,8 +6,8 @@ $ui-transitions: true !default;
 $ui-transition-duration: .3s !default;
 
 // Sprite path
-$sprite-path: '../img/icon-sprite.svg?20211222';
-$browser-sprite-path: '../img/browser-sprite.png?20211222';
+$sprite-path: '../img/icon-sprite.svg?20220519';
+$browser-sprite-path: '../img/browser-sprite.png?20220519';
 
 @import "utils/mixins";
 
@@ -21,34 +21,38 @@ $browser-sprite-path: '../img/browser-sprite.png?20211222';
 @import "utils/scrollable";
 @import "utils/sortable";
 
-@import "layout/grid";
+@import "layout/layout";
 @import "layout/header";
 @import "layout/footer";
 @import "layout/sidebar";
+@import "layout/grid-columns";
 @import "layout/form-grid";
 
 @import "components/buttons";
 @import "components/color-picker";
 @import "components/dashboard/dashboard";
+@import "components/dashboard/widget-clock";
 @import "components/dashboard/widget-item";
+@import "components/dashboard/widget-slareport";
+@import "components/dashboard/widget-svggraph";
 @import "components/dashboard/widget-tophosts";
 @import "components/diff";
+@import "components/expandable-subfilter";
 @import "components/form-search";
 @import "components/inline-filter";
 @import "components/menu-main";
 @import "components/menu-user";
 @import "components/message-box";
 @import "components/radio-list-control";
+@import "components/range-control";
 @import "components/service/info";
 @import "components/subfilter";
+@import "components/svg-graph";
 @import "components/tabfilter";
 @import "components/toc";
 @import "components/z-bar-gauge";
 @import "components/z-select";
 
-@import "components/dashboard/widget-slareport";
-@import "components/dashboard/widget-svggraph";
-
 .link-action {
 	border-bottom: 1px dotted;
 	cursor: pointer;
@@ -358,7 +362,7 @@ form {
 								background-color: rgba($font-color, .5);
 							}
 
-							.icon-wzrd-action {
+							.icon-wizard-action {
 								background-position: -165px -624px;
 							}
 
@@ -384,7 +388,7 @@ form {
 								border-bottom-color: rgba(0, 0, 0, .5);
 							}
 
-							.icon-wzrd-action {
+							.icon-wizard-action {
 								background-position: -165px -624px;
 							}
 
@@ -405,7 +409,7 @@ form {
 
 							[class*='icon-depend-'],
 							.icon-description,
-							.icon-wzrd-action {
+							.icon-wizard-action {
 								background-color: transparent;
 							}
 						}
@@ -515,7 +519,7 @@ form {
 				background-position: -49px -767px;
 			}
 
-			.icon-wzrd-action {
+			.icon-wizard-action {
 				background: url($sprite-path) no-repeat -6px -624px;
 				height: 12px;
 				min-height: 12px;
@@ -1401,10 +1405,6 @@ form {
 		width: 85%;
 		position: relative;
 
-		&.has-before {
-			padding-top: 0;
-		}
-
 		td {
 			padding: 5px 5px 5px 0;
 			position: relative;
@@ -1691,7 +1691,7 @@ select {
 
 .form-input-margin {
 	display: inline-block;
-	margin: 0 3px 0 0;
+	margin: 0 4px 0 0;
 }
 
 .checkbox-radio {
@@ -1935,6 +1935,22 @@ button {
 	}
 }
 
+.btn-tag {
+	@extend .tag;
+
+	min-height: unset;
+	outline: none;
+	border: none;
+
+	&:hover {
+		text-decoration: underline;
+		background-color: $ui-bg-selected-color;
+	}
+	&:focus {
+		background-color: $ui-bg-selected-color;
+	}
+}
+
 .btn-grey {
 	color: $btn-form-font-color;
 	background-color: $btn-form-bg-color;
@@ -2628,12 +2644,12 @@ $trigger-expression-tree-icons: (
 
 $form-icon-btn: (
 	cal: url($sprite-path) no-repeat -42px -834px,
-	wzrd-action: url($sprite-path) no-repeat -6px -617px
+	wizard-action: url($sprite-path) no-repeat -6px -617px
 );
 
 // Dynamically generated classes:
 //  .icon-cal
-//  .icon-wzrd-action
+//  .icon-wizard-action
 @each $form-icon-btn, $bgimage in $form-icon-btn {
 	.icon-#{$form-icon-btn} {
 		background: $transparent $bgimage;
@@ -3030,17 +3046,47 @@ $form-icon-btn: (
 	display: table;
 	position: absolute;
 	z-index: 1000;
-	padding: 15px 10px 10px;
+	padding: 13px 10px 10px;
 	background-color: $ui-bg-color;
 	border: 1px solid $action-border-color;
 	border-bottom-color: darken($action-border-color, 1%);
 	box-shadow: 0 4px 20px 0 $action-shadow-color;
 
+	.dashboard-widget-head {
+		margin: -8px -10px 6px -10px;
+		padding: 8px 10px;
+
+		.icon-doc-link {
+			width: 18px;
+			height: 18px;
+			margin: -9px -6px 0 30px;
+			line-height: 18px;
+
+			&::after {
+				font-size: 14px;
+			}
+		}
+	}
+
 	&.modal {
 		position: fixed;
 		overflow: hidden;
 		margin: 0 10px;
 
+		.dashboard-widget-head {
+			margin-bottom: 14px;
+
+			.icon-doc-link {
+				margin-right: -26px;
+			}
+
+			.overlay-close-btn {
+				position: static;
+				margin: -9px -6px 0 30px;
+				font-size: 25px;
+			}
+		}
+
 		.overlay-dialogue-body {
 			overflow: auto;
 			overflow-x: hidden;
@@ -3095,13 +3141,6 @@ $form-icon-btn: (
 				}
 			}
 		}
-
-		> .overlay-close-btn {
-			position: relative;
-			float: right;
-			top: -13px;
-			right: -8px;
-		}
 	}
 
 	&.modal-popup {
@@ -3200,10 +3239,6 @@ $form-icon-btn: (
 		}
 	}
 
-	.dashboard-widget-head {
-		margin: -10px -10px 6px;
-	}
-
 	.maps-container {
 		max-height: 128px;
 		overflow-y: auto;
@@ -3357,6 +3392,15 @@ $form-icon-btn: (
 			vertical-align: top;
 		}
 
+		&.macro-textarea-parent {
+			textarea {
+				float: left;
+			}
+			span {
+				margin-left: 10px;
+			}
+		}
+
 		button {
 			line-height: normal;
 		}
@@ -3571,26 +3615,18 @@ $form-icon-btn: (
 	}
 }
 
-.calendar-control {
-	input {
-		vertical-align: middle;
-	}
-}
-
 // Problem notification overlay.
 .notif {
 	width: 250px;
 
 	.dashboard-widget-head {
-		margin: -11px 0 7px -9px;
+		margin: -13px -10px 7px;
 		padding: 0;
 
 		ul {
-			position: relative;
-			display: inline-block;
+			margin: 4px 0 0 1px;
 
 			li {
-				float: none;
 				display: inline-block;
 			}
 		}
@@ -3695,14 +3731,12 @@ $form-icon-btn: (
 	stroke: $red;
 	stroke-width: 2px;
 }
-.svg-point-highlight {
-	fill: $font-color !important;
-	fill-opacity: .5 !important;
-}
 
 .svg-graph-preview {
 	margin-top: 10px;
-	min-width: 960px;
+	// min-width: 960px;
+	// max-width: 1080px;
+	width: 1080px;
 	height: 300px;
 	position: relative;
 
@@ -3717,55 +3751,6 @@ $form-icon-btn: (
 	}
 }
 
-.svg-graph {
-	display: block;
-}
-
-.svg-single-item-graph-legend,
-.svg-single-two-items-graph-legend,
-.svg-graph-legend {
-	// Legend single line height is 18. Value should be synchronized with $legend_height in 'CSvgGraphHelper.php'.
-	$svg-legend-line-height: 18px;
-	$svg-legend-handle-height: 4px;
-
-	overflow-y: hidden;
-	white-space: normal;
-	margin: 0 10px;
-	line-height: $svg-legend-line-height;
-
-	div {
-		display: inline-block;
-		margin: 0 4px;
-		font-size: 12px;
-		line-height: 1.1;
-		vertical-align: bottom;
-		min-width: 120px;
-		overflow: hidden;
-		white-space: nowrap;
-		text-overflow: ellipsis;
-		border: 0 none transparent;
-	}
-
-	div::before {
-		content: ' ';
-		display: inline-block;
-		margin-right: 4px;
-		width: 10px;
-		height: 0;
-		vertical-align: middle;
-		margin-top: -$svg-legend-handle-height;
-		border-top-width: $svg-legend-handle-height;
-		border-top-style: solid;
-		border-top-color: inherit;
-	}
-}
-.svg-graph-legend div {
-	max-width: 30%;
-}
-.svg-single-two-items-graph-legend div {
-	max-width: 50%;
-}
-
 .svg-graph-hintbox {
 	font-size: 12px;
 	line-height: 18px;
@@ -3791,13 +3776,18 @@ $form-icon-btn: (
 	li {
 		padding-left: 23px;
 
-		.svg-graph-hintbox-item-color {
+		.svg-graph-hintbox-item-color,
+		.svg-graph-hintbox-trigger-color {
 			margin: 3px 10px 3px -20px;
 			width: 10px;
 			height: 10px;
 			float: left;
 			display: block;
 		}
+
+		.svg-graph-hintbox-trigger-color {
+			border-radius: 50%;
+		}
 	}
 
 	.header {
@@ -4816,13 +4806,10 @@ svg {
 }
 
 .list-vertical-accordion {
-	display: table;
 	padding-left: 15px;
 	width: calc(100% - 15px);
 
 	.list-accordion-item {
-		display: table-row;
-
 		.btn-remove {
 			position: relative;
 			right: -10px;
@@ -4835,19 +4822,30 @@ svg {
 		padding-bottom: 2px;
 	}
 
-	.list-accordion-item-closed {
-		.multiselect {
-			height: 24px;
-			overflow: hidden;
+	.list-accordion-item-opened {
+		.list-accordion-item-body {
+			display: block;
 		}
 
-		.list-accordion-item-head {
-			margin-bottom: 5px;
+		.list-accordion-item-toggle {
+			@extend .btn-widget-collapse;
+			margin: 0;
 		}
+	}
 
+	.list-accordion-item-closed {
 		.list-accordion-item-body {
 			display: none;
 		}
+
+		.list-accordion-item-toggle {
+			@extend .btn-widget-expand;
+			margin: 0;
+		}
+	}
+
+	.list-accordion-item-toggle {
+		text-indent: -9999px;
 	}
 }
 
@@ -4898,6 +4896,7 @@ svg {
 
 	display: flex;
 	flex-wrap: wrap;
+	align-items: start;
 
 	&.columns-nowrap {
 		flex-wrap: nowrap;
@@ -5279,6 +5278,28 @@ svg {
 	}
 }
 
+.icon-count {
+	font-size: 12px;
+	padding: 3px 5px 2px;
+	color: $font-selected-color;
+	background-color: $ui-bg-selected-color;
+	border-radius: 3px;
+
+	&:link,
+	&:hover,
+	&:focus {
+		border-bottom: none;
+	}
+
+	&:focus {
+		box-shadow: 0 0 0 2px rgba($blue, .35);
+	}
+}
+
+a.icon-count {
+	color: $font-selected-color;
+}
+
 .problem-icon-link,
 .problem-icon-list {
 	display: inline-flex;
@@ -5339,6 +5360,8 @@ svg {
 .icon-action-message,
 .icon-action-ack,
 .icon-action-unack,
+.icon-action-suppress,
+.icon-action-unsuppress,
 .icon-invisible,
 .icon-problem-generated,
 .icon-problem-recovery,
@@ -5370,6 +5393,8 @@ svg {
 	}
 }
 
+.icon-action-suppress,
+.icon-action-unsuppress,
 .icon-invisible {
 	&:link,
 	&:hover,
@@ -5393,6 +5418,8 @@ button {
 	&.icon-action-severity-changed,
 	&.icon-action-message,
 	&.icon-action-ack,
+	&.icon-action-suppress,
+	&.icon-action-unsuppress,
 	&.icon-problem-generated,
 	&.icon-problem-recovery,
 	&.icon-actions-number-gray,
@@ -5459,6 +5486,14 @@ button {
 	background-position: -173px -245px;
 }
 
+.icon-action-suppress::before {
+	background-position: -89px -803px;
+}
+
+.icon-action-unsuppress::before {
+	background-position: -89px -836px;
+}
+
 .icon-invisible::before {
 	background-position: -89px -803px;
 }
@@ -5591,136 +5626,45 @@ button {
 	}
 }
 
-#expressions_list .ui-sortable-helper {
-	display: table;
-}
-
-// Range control.
-$range-track-color: #c0c0c0;
-$range-progress-color: $link-color;
-$range-thumb-color: $link-color;
-$range-thumb-color-focus: $link-active-color;
-$range-progress-color-focus: $link-active-color;
-$range-thumb-size: 10px;
-$range-track-height: 2px;
-$range-input-width: 31px;
-
-.range-control {
-	position: relative;
+.icon-doc-link {
 	display: inline-block;
-	vertical-align: middle;
-
-	input[type=range] {
-		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;
-		}
-
-		/* Special styling for WebKit/Blink */
-		&::-webkit-slider-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;
-			opacity: 0;
-		}
-
-		&::-webkit-slider-runnable-track {
-			height: $range-thumb-size;
-			opacity: 0;
-		}
-	}
-
-	input[type=text] {
-		width: $range-input-width;
-		float: right;
-	}
+	width: 24px;
+	height: 24px;
+	text-align: center;
+	line-height: 24px;
+	border-radius: 2px;
 
-	> div {
+	&::after {
+		content: '?';
 		position: relative;
-		width: calc(100% - 10px - #{$range-input-width});
-		margin: 2px $range-thumb-size 0 0;
-		float: left;
-	}
-
-	.range-control-track,
-	.range-control-progress {
-		position: absolute;
-		top: 50%;
-		margin-top: -$range-track-height / 2;
-		left: 0;
-		height: $range-track-height;
-		cursor: pointer;
-	}
-
-	.range-control-track {
-		width: 100%;
-		background: $range-track-color;
-	}
-
-	.range-control-progress {
-		background: $range-progress-color;
+		font-size: 18px;
+		font-weight: bold;
+		color: $font-alt-color;
+		opacity: 0.5;
+		transition: opacity .2s ease-out;
 	}
 
-	.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%;
-		background: $range-thumb-color;
+	&:active,
+	&:hover,
+	&:link,
+	&:visited {
+		border-bottom: 0;
 	}
 
-	&.range-control-focus {
-		.range-control-thumb {
-			margin-top: -$range-thumb-size / 1.5;
-			margin-left: -$range-thumb-size / 1.5;
-			background: $range-thumb-color-focus;
-			border: 2px solid lighten($btn-bg-color, 10%);
-		}
-
-		.range-control-progress {
-			background: $range-progress-color-focus;
+	&:hover,
+	&:focus {
+		&::after {
+			opacity: 1;
 		}
 	}
 
-	&.disabled {
-		opacity: 1;
-
-		input[type=range] {
-			cursor: default;
-		}
-		.range-control-progress,
-		.range-control-thumb {
-			background: #c0c0c0;
-		}
+	&:focus {
+		box-shadow: 0 0 0 2px $btn-border-focus-color;
 	}
+}
 
-	datalist {
-		position: absolute;
-		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;
-			border-left: 1px solid $body-bg-color;
-		}
-	}
+#expressions_list .ui-sortable-helper {
+	display: table;
 }
 
 .graph-legend {
@@ -5730,23 +5674,6 @@ $range-input-width: 31px;
 	overflow: hidden;
 }
 
-.graph-widget-config-tabs {
-	padding: 10px 0;
-
-	> .tabs-nav {
-		padding-left: calc(15% + 10px);
-		margin-right: 0;
-		margin-left: 0;
-	}
-
-	.ui-tabs-nav {
-		position: sticky;
-		top: 0;
-		background: $header-bg-color;
-		z-index: 3;
-	}
-}
-
 // Screen reader.
 .inline-sr-only {
 	font-size: 0;
@@ -6044,6 +5971,7 @@ $range-input-width: 31px;
 
 .btn-toggle-chevron {
 	position: relative;
+	text-indent: -9999px;
 
 	&[aria-expanded="true"] {
 		@include btn-hover-active($btn-font-color, $btn-bg-color);
@@ -6243,10 +6171,6 @@ $range-input-width: 31px;
 		.interface-btn-toggle {
 			@extend .btn-widget-expand;
 		}
-
-		.list-accordion-item-body {
-			display: none;
-		}
 	}
 
 	&.list-accordion-item-opened {
@@ -6574,6 +6498,11 @@ z-select,
 	height: 30px;
 	width: 30px;
 }
+.leaflet-marker-icon:focus {
+	box-shadow: 0 0 0 2px $btn-border-focus-color;
+	border-radius: 2px;
+	outline: none;
+}
 .marker-cluster span {
 	line-height: 30px;
 }