$theme-name: 'blue' !default;

$ui-transitions: true !default;

// Sync with JavaScript variable: UI_TRANSITION_DURATION.
$ui-transition-duration: .3s !default;

// Sprite path
$sprite-path: '../img/icon-sprite.svg?20211222';
$browser-sprite-path: '../img/browser-sprite.png?20211222';

@import "utils/mixins";

@import "base/reset";
@import "base/colors";
@import "base/typography";
@import "base/common";

@import "utils/indicator";
@import "utils/resizable";
@import "utils/scrollable";
@import "utils/sortable";

@import "layout/grid";
@import "layout/header";
@import "layout/footer";
@import "layout/sidebar";
@import "layout/form-grid";

@import "components/buttons";
@import "components/checkbox-list";
@import "components/color-picker";
@import "components/dashboard/dashboard";
@import "components/dashboard/widget-item";
@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/service/info";
@import "components/subfilter";
@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;
	color: $font-color;

	&:visited {
		@extend %link-action-style;
	}

	&:hover {
		@extend %link-action-style;
		color: $link-hover-color;
		border-bottom: 1px solid rgba($link-hover-color, .35);
	}

	&:active {
		@extend %link-action-style;
	}

	&:focus {
		outline: none;
		border-bottom: 2px solid rgba($link-hover-color, .35);
	}
}

%link-action-style {
	border-bottom: 1px dotted;
	text-decoration: none;
}

.link-alt {
	text-decoration: none;
	cursor: pointer;

	&:link {
		border-bottom: 1px solid rgba($link-alt-underline-color, .35);
	}

	&:visited {
		border-bottom: 1px solid rgba($link-alt-underline-color, .35);
	}

	&:hover {
		color: $link-hover-color;
		border-bottom: 1px solid rgba($link-hover-color, .5);
	}

	&:focus {
		color: $link-hover-color;
		outline: none;
		border-bottom: 2px solid rgba($link-hover-color, .35);
	}

	&:active {
		color: $link-active-color;
		border-bottom: 1px solid rgba($link-active-color, .5);
	}
}

.disabled {
	cursor: default !important;
	opacity: .35;
	background-color: transparent;

	.subfilter-enabled {
		color: darken($ui-bg-selected-color, 35%);
	}

	.subfilter-disable-btn {
		cursor: default;
		color: darken($ui-bg-selected-color, 25%);
		background-color: $ui-bg-selected-color;

		&:hover,
		&:focus,
		&:active {
			color: darken($ui-bg-selected-color, 25%);
		}
	}

	.disabled,
	[disabled] {
		opacity: 1 !important;
	}
}

.monospace-font {
	font-family: $font-stack-mono;
}

%space-pre-wrap {
	white-space: pre-wrap;
	word-break: break-word;
	overflow-wrap: break-word;
}

.arrow-up {
	@extend %arrow;
	border: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-bottom: 6px solid $font-color;
}

.arrow-down {
	@extend %arrow;
	border: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 6px solid $font-color;
}

.arrow-left {
	@extend %arrow;
	border-bottom: 4px solid transparent;
	border-top: 4px solid transparent;
	border-right: 6px solid $font-color;
}

.arrow-right {
	@extend %arrow;
	border-bottom: 4px solid transparent;
	border-top: 4px solid transparent;
	border-left: 6px solid $font-color;
}

%arrow {
	display: inline-block;
	height: 0;
	width: 0;
	font-size: 0;
	line-height: 0;
}

.zabbix-logo {
	width: 114px;
	height: 30px;
	background: url($sprite-path) no-repeat 0 -864px;
}

.zabbix-sidebar-logo {
	width: 91px;
	height: 24px;
	background: url($sprite-path) no-repeat -570px -400px;
}

.zabbix-sidebar-logo-compact {
	width: 24px;
	height: 24px;
	background: url($sprite-path) no-repeat -540px -400px;
}

.hor-list {
	> li {
		display: inline-block;
		margin: 0 6px 0 0;

		&:last-child {
			margin: 0;
		}
	}
}

.header-navigation {
	display: inline-block;
	position: relative;
	margin: 0 0 5px;
	z-index: 3;
	max-width: calc(100% - 200px);
	min-height: 24px;

	& > ul {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;

		& > li {
			margin-right: 5px;
			line-height: 24px;

			> ul {
				display: flex;
				align-items: baseline;
				flex-wrap: wrap;

				li {
					margin-right: 5px;
				}

				&.breadcrumbs > li {
					margin-right: 0;

					&:not(:last-child)::after {
						content: "/";
					}
				}
			}

			.status-container {
				margin-right: 5px;
			}
		}

		li > span {
			display: inline-block;
			padding: 2px 7px;
			line-height: 18px;
			white-space: nowrap;
			vertical-align: top;
			text-overflow: ellipsis;
			overflow: hidden;
			max-width: 250px;

			a {
				vertical-align: top;
				text-overflow: ellipsis;
				overflow: hidden;
				max-width: 200px;
				display: inline-block;
				margin-top: 2px;
				line-height: 14px;
			}

			&.selected {
				background-color: $ui-bg-color;
				border-radius: 2px;
				box-shadow: inset 0 0 0 1px $ui-border-color;
			}
		}
	}

	& + .filter-space {
		margin-top: -29px;
	}
}

form {
	&.is-loading {
		position: relative;
	}
}

// Tables.
.list-table {
	width: 100%;
	background-color: $ui-bg-color;
	border-collapse: separate;
	border: 1px solid $ui-border-color;

	.action-container {
		display: flex;
		width: 100%;
		height: 18px;
		line-height: 18px;

		.link-action {
			height: 16px;
			min-width: 1em;
			@extend %overflow-ellipsis;
		}

		[class*='icon-'] {
			flex-shrink: 0;
		}

		.rel-container {
			display: flex;
		}

		.separator {
			flex-shrink: 0;
			margin-right: 4px;
		}
	}

	td {
		.icon-maintenance {
			margin: 0 0 -3px 4px;
		}

		.icon-depend-up,
		.icon-depend-down,
		.icon-ackn {
			margin: 0 4px -3px 0;
		}
	}

	&.compact-view {
		tr {
			&[class*='flh-'] {
				@if $theme-name == 'blue' {
					&:not(.row-selected):not(:hover) {
						td {
							color: $font-color;

							sup,
							a,
							.problem-unack-fg,
							.problem-ack-fg,
							.ok-unack-fg,
							.ok-ack-fg {
								color: $font-color;
								border-bottom-color: rgba($font-color, .5);
							}

							.tag {
								background-color: rgba($font-color, .5);
							}

							.icon-wizard-action {
								background-position: -165px -624px;
							}

							button:focus {
								box-shadow: 0 0 0 2px rgba($font-color, .5);
							}
						}
					}
				}

				@if $theme-name == 'dark' {
					&:not(.row-selected):not(:hover) {
						td {
							color: #000000;

							sup,
							a,
							.problem-unack-fg,
							.problem-ack-fg,
							.ok-unack-fg,
							.ok-ack-fg {
								color: #000000;
								border-bottom-color: rgba(0, 0, 0, .5);
							}

							.icon-wizard-action {
								background-position: -165px -624px;
							}

							button:focus {
								box-shadow: 0 0 0 2px rgba(0, 0, 0, .5);
							}
						}
					}
				}

				@if $theme-name == 'blue' or $theme-name == 'dark' {
					&:not(.row-selected):not(:hover) {
						td {
							[class*='icon-'] {
								background-color: $ui-bg-color;
								border-radius: 2px;
							}

							[class*='icon-depend-'],
							.icon-description,
							.icon-wizard-action {
								background-color: transparent;
							}
						}
					}
				}
			}
		}

		.link-action {
			color: $font-color;

			&.red {
				color: $red;
			}

			&.orange {
				color: $orange;
			}

			&.yellow {
				color: $dark-yellow;
			}

			&.green {
				color: $green;
			}

			&:hover,
			&:focus {
				color: $link-hover-color;
			}
		}

		td {
			padding-top: 0;
			padding-bottom: 0;
			border-bottom: 0;
			box-shadow: inset 0 -1px 0 0 rgba($font-color, .1);
			color: $font-color;
			height: 22px;
			vertical-align: middle;
			white-space: nowrap;

			[class*='icon-'] {
				&::after {
					margin: 0;
					line-height: 14px;
					top: 0;
				}

				&:last-of-type {
					margin-right: 0;
				}
			}

			.rel-container {
				span {
					margin: 0;
				}
			}

			.tag {
				display: inline-block;
				line-height: 16px;
				margin-right: 3px;
				padding: 0 3px;
				max-width: 40px;

				@media screen and (min-width: 1200px) {
					max-width: 71px;
				}

				@media screen and (min-width: 1400px) {
					max-width: 102px;
				}

				@media screen and (min-width: 1600px) {
					max-width: 133px;
				}
			}

			.icon-maintenance {
				height: 12px;
				width: 12px;
				margin: 3px 1px 2px 4px;

				&::before {
					height: 12px;
					width: 12px;
					background-position: -49px -805px;
				}
			}

			.icon-depend-up,
			.icon-depend-down {
				width: 12px;
			}

			.icon-depend-up::before {
				background-position: -49px -731px;
			}

			.icon-depend-down::before {
				background-position: -49px -767px;
			}

			.icon-wizard-action {
				background: url($sprite-path) no-repeat -6px -624px;
				height: 12px;
				min-height: 12px;
				margin: 0;
				position: relative;
			}

			.icon-description {
				margin-left: 2px;
			}
		}
	}

	thead th {
		color: $font-alt-color;
		height: 100%;
		overflow: hidden;
		white-space: nowrap;
		padding: 6px 5px;
		vertical-align: bottom;
		border-bottom: 2px solid darken($table-border-color, 5%);
		text-align: left;

		&.column-tags-1 {
			width: 75px;
		}

		&.column-tags-2 {
			width: 124px;
		}

		&.column-tags-3 {
			width: 173px;
		}

		@media screen and (min-width: 1200px) {
			&.column-tags-1 {
				width: 106px;
			}

			&.column-tags-2 {
				width: 186px;
			}

			&.column-tags-3 {
				width: 266px;
			}
		}

		@media screen and (min-width: 1400px) {
			&.column-tags-1 {
				width: 137px;
			}

			&.column-tags-2 {
				width: 248px;
			}

			&.column-tags-3 {
				width: 359px;
			}
		}

		@media screen and (min-width: 1600px) {
			&.column-tags-1 {
				width: 168px;
			}

			&.column-tags-2 {
				width: 310px;
			}

			&.column-tags-3 {
				width: 452px;
			}
		}

		.arrow-up {
			margin: 0 0 0 3px;
			border-bottom-color: $font-alt-color;
		}

		.arrow-right {
			margin: 0 0 0 3px;
			border-left-color: $font-alt-color;
		}

		.arrow-down {
			margin: 0 0 0 3px;
			border-top-color: $font-alt-color;
		}

		.treeview {
			span {
				margin: 0;
			}
		}

		.vertical {
			writing-mode: vertical-lr;
			transform: rotate(180deg);
		}

		a {
			display: block;
			position: relative;
			margin: -1em;
			padding: 1em;
			border: 0;
			transition: background-color .2s ease-out;

			&:hover,
			&:focus,
			&:active {
				text-decoration: none;
				background-color: $ui-hover-color;
			}
		}
	}

	tbody tr {
		&:hover {
			background-color: $ui-hover-color;

			.timeline-axis {
				background-color: $ui-bg-color;
			}

			.timeline-date {
				background-color: $ui-bg-color;
			}

			.timeline-td {
				background-color: $ui-bg-color !important;
			}
		}

		&.row-selected {
			@extend %found-bg;

			.timeline-axis {
				background-color: $ui-bg-color;
			}

			.timeline-date {
				background-color: $ui-bg-color;
			}

			.timeline-td {
				background-color: $ui-bg-color;
			}
		}

		&.nothing-to-show {
			@extend %nothing-to-show;
		}

		&:last-child th,
		&:last-child td {
			border-bottom: 0;
		}

		&.hover-nobg {
			background-color: $ui-bg-color;
		}
	}

	tbody th,
	td {
		padding: 6px 5px;
		position: relative;
		border-bottom: 1px solid $table-border-color;
		line-height: 18px;
		vertical-align: top;

		&.table-info {
			color: $font-alt-color;
		}
	}

	tbody th {
		text-align: left;
	}

	.vertical_rotation_inner {
		transform: rotate(270deg);
		white-space: nowrap;
	}

	.list-table-footer {
		border-bottom: 0;
		color: $font-alt-color;
		text-align: right;
	}

	.latest-values,
	.opdata {
		max-width: 300px;
	}

	.list-table-actions {
		text-align: right;
		white-space: nowrap;
	}

	&.sticky-header {
		thead {
			position: sticky;
			top: 0;
			z-index: 1;
			background: $ui-bg-color;
		}
	}

	&.sticky-footer {
		tbody {
			tr:last-of-type {
				td, th {
					border-bottom: none;
				}
			}
		}

		tfoot {
			position: sticky;
			bottom: 0;
			z-index: 1;
			background: $ui-bg-color;

			tr:first-of-type {
				td, th {
					border-top: 2px solid darken($table-border-color, 5%);
					border-bottom: 0;
				}
			}
		}
	}
}

.table-paging {
	text-align: center;
	background-color: $ui-bg-color;
	margin-top: -1px;
	padding: 4px 5px;
	overflow: hidden;
	position: relative;
	border: 1px solid $ui-border-color;
	border-top-color: $table-border-color;

	a {
		@extend %paging-btn;
		&:focus {
			.arrow-right {
				border-left-color: $font-selected-color;
			}
			.arrow-left {
				border-right-color: $font-selected-color;
			}
		}
	}
}

.paging-btn-container {
	min-height: 24px;
	position: relative;
}

.table-stats {
	color: $font-alt-color;
	display: inline-block;
	padding: 4px 0;
	position: absolute;
	right: 5px;
}

.radio-switch {
	cursor: default;
	background-color: $form-bg-color;
	@extend %paging-btn;
}

%paging-btn {
	display: inline-block;
	margin-left: -1px;
	padding: 3px 11px;
	background-color: $btn-form-bg-color;
	border: 1px solid $form-border-color !important;
	text-decoration: none;
	color: $font-color;
	outline: 0;
	transition: background-color .2s ease-out;

	&:hover {
		color: $font-color;
		background-color: $btn-form-hover-color;
	}

	&:focus {
		@include btn-hover-active($btn-font-color, $btn-bg-color);
		z-index: 10;
		position: relative;
	}

	&:active {
		color: $font-color;
		background-color: $btn-form-hover-color;
		z-index: 10;
		position: relative;
	}

	&:first-of-type {
		border-radius: 2px 0 0 2px;
	}

	&:last-of-type {
		border-radius: 0 2px 2px 0;
	}

	&.paging-selected {
		color: $font-selected-color;
		background-color: $ui-bg-selected-color;
		position: relative;
		z-index: 1;

		&:hover {
			background-color: darken($ui-bg-selected-color, 4%);
		}

		&:focus {
			@include btn-hover-active($btn-font-color, $btn-bg-color);
			position: relative;
		}

		&:active {
			background-color: darken($ui-bg-selected-color, 4%);
			position: relative;
		}
	}
}

.treeview-plus {
	font: {
		size: $font-top-nav-size;
		weight: bold;
	}
	display: inline-block;
	background-color: $ui-bg-color;
	border: 1px solid $form-border-color;
	border-radius: 2px;
	cursor: pointer;
	width: 12px;
	height: 12px;
	line-height: 12px;
	text-align: center;

	&:link,
	&:visited,
	&:hover,
	&:focus,
	&:active {
		color: $font-color;
	}

	&:hover {
		background-color: $ui-hover-color;
		border-bottom-color: $form-border-color;
	}

	&:focus {
		background-color: $ui-hover-color;
		border-color: $form-border-focus-color;
	}

	&:active {
		background-color: $ui-hover-color;
		border-color: $form-border-color;
	}
}

.treeview {
	display: inline-block;
	width: 14px;
	height: 16px;
	min-height: auto;
	line-height: 16px;
	padding: 0;
	margin: 0 2px 0 0;
	cursor: auto;
	text-align: center;
	border: 0;
	background-color: $transparent;

	.arrow-right {
		border-left-color: $font-alt-color;
	}

	.arrow-down {
		margin: 0 0 2px;
		border-top-color: $font-alt-color;
	}

	&:hover,
	&:focus {
		background-color: $transparent;

		.arrow-right {
			border-left-color: $link-color;
		}

		.arrow-down {
			border-top-color: $link-color;
		}
	}
}

.table {
	display: table;
}

.row {
	display: table-row;
}

.cell {
	display: table-cell;
	vertical-align: top;

	&:last-child {
		.dashboard-widget {
			margin: 0 0 10px;
		}
	}
}

.adm-img {
	width: 75%;
	text-align: center;
	margin: 0 auto;
	table-layout: fixed;

	.cell {
		vertical-align: bottom;
		padding: 20px 10px;
		width: 20%;
		text-align: center;

		img {
			max-width: 100%;
		}
	}
}

.cell-width {
	width: 8px;
}

.nowrap {
	white-space: nowrap;
}

.wordwrap {
	white-space: normal;
	word-break: break-all;
}

.wordbreak {
	white-space: pre-wrap;
	word-break: break-word;
}

.overflow-table {
	overflow-x: auto;
	position: relative;
	@extend %webkit-hor-scrollbar;
}

// Timeline in table view.
.timeline-date {
	text-align: right;
	white-space: nowrap;
	border-bottom-color: $transparent !important;
}

.timeline-axis {
	@extend %timeline-td;
	padding: 6px .04em !important;
	border-right: 2px solid lighten(desaturate($btn-bg-color, 27%), 44%);

	&::before {
		content: '';
		position: absolute;
		bottom: -1px;
		right: -2px;
		height: 100%;
		width: 2px;
		background-color: lighten(desaturate($btn-bg-color, 27%), 44%);
	}
}

.timeline-dot {
	&::after {
		@extend %timeline-dot;
		background-color: $btn-bg-color;
		border: 2px solid $ui-bg-color;
		border-radius: 100%;
		top: 11px;
	}
}

.timeline-dot-big {
	&::after {
		@extend %timeline-dot;
		background-color: $ui-bg-color;
		border: 2px solid $btn-bg-color;
		border-radius: 100%;
		top: 10px;
	}
}

.timeline-td {
	@extend %timeline-td;
	padding: 6px .25em !important;
}

.timeline-th {
	padding: 6px .25em !important;
}

%timeline-dot {
	content: '';
	position: absolute;
	z-index: 1;
	display: block;
	width: 4px;
	height: 4px;
	right: -5px;
	border-radius: 100%;
}

%timeline-td {
	position: relative;
	border-bottom-color: $ui-bg-color !important;
}

// Filters.
.filter-btn-container {
	position: relative;
	text-align: right;
}

.filter-container {
	background-color: $ui-bg-color;
	border: 1px solid $ui-border-color;
	margin: 0 0 10px;
	padding: 10px 0;
	position: relative;

	.table {
		border-bottom: 1px solid $table-border-color;
	}

	.filter-forms {
		padding: 0 10px;

		.btn-grey {
			vertical-align: baseline;
		}
	}

	.list-table {
		margin-bottom: -10px;
		border: 0;

		thead {
			th {
				color: initial;
				padding: 8px 5px 5px;
				border-bottom-width: 1px;
			}
		}
	}
}

.filter-forms {
	margin: 0 auto;
	text-align: center;
	white-space: nowrap;
	background-color: $ui-bg-color;

	.cell {
		text-align: left;
		padding: 0 20px 5px;

		&:first-child {
			padding-left: 0;
		}

		&:last-child {
			padding-right: 0;
			border-right: 0;
		}

		button {
			margin: 0;
		}
	}

	button {
		margin: 10px 5px 0;
	}

	select {
		vertical-align: top;
	}

	.table-forms .table-forms-td-right {
		td {
			padding: 0 5px 5px 0;
			vertical-align: middle;
		}
	}
}

.multiselect-control {
	display: flex;
	position: relative;
	vertical-align: top;
	white-space: nowrap;
}

.multiselect {
	@extend %form-input-style;
	display: flex;
	flex-direction: column;
	position: relative;
	margin-right: 3px;
	min-height: 24px;
	white-space: normal;

	&.active {
		border-color: $form-border-focus-color;
	}

	&[aria-disabled] {
		@extend %form-disabled;
	}

	input[type="text"] {
		border: 0;
		background: none;
		box-sizing: border-box;
		width: 100%;
		padding-bottom: 2px;
		min-height: 20px;
	}

	&.search-disabled {
		input[type="text"] {
			position: absolute;
			top: 0;
			left: 0;
			width: 0;
			padding: 0;
			margin: 0;
		}
	}

	.multiselect-list {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		padding-left: 2px;
		padding-bottom: 2px;

		li {
			display: block; // Override ".table-forms li".
			padding-left: 0 !important;
			margin: 2px 2px 0 0;
			overflow: hidden;
			white-space: nowrap;
			cursor: default;

			.subfilter-enabled {
				display: flex;
				flex-direction: row;
				padding: 0 3px 0 4px;
				line-height: 18px;

				> span:first-child {
					overflow: hidden;
					text-overflow: ellipsis;
				}

				> .subfilter-disable-btn {
					position: relative;
					left: 3px;
					flex-shrink: 0;
				}
			}

			&.selected {
				.subfilter-enabled,
				.subfilter-disable-btn,
				.subfilter-disable-btn:active {
					background-color: $multiselect-selected-bg-color;
				}
			}
		}
	}

	.disabled {
		background-color: $multiselect-disabled-bg-color;
		opacity: 1;

		.subfilter-enabled,
		.subfilter-disable-btn {
			background-color: $multiselect-item-disabled-bg-color;
			color: $multiselect-item-disabled-color;
		}
	}

	div[aria-live] {
		overflow: hidden;
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		z-index: -1;
	}
}

.multiselect-button {
	vertical-align: top;
}

.multiselect-suggest {
	padding: 0 5px;
	white-space: normal;
	color: $font-alt-color;
	background-color: $form-bg-color;

	li {
		display: block;
		height: inherit;
		line-height: normal;
		color: $font-color;
		padding: .4em 5px;
		margin: 0 -5px;
		cursor: pointer;
		overflow: hidden;
		text-overflow: ellipsis;
		transition: background-color .2s ease-out;

		&.suggest-hover {
			background-color: $action-hover-color;
		}
	}
}

.multiselect-matches {
	padding: .4em 5px;
	color: $font-color;
	font-weight: bold;
	@extend .multiselect-suggest;
}

.multiselect-available {
	position: absolute;
	z-index: 20000;
	border: 1px solid $action-border-color;
	overflow-y: auto;
	@extend %webkit-scrollbar;
	box-shadow: 0 6px 10px 0 $action-shadow-color;
}

.suggest-found {
	font-weight: bold;
	color: $dark-yellow;
}

.suggest-new {
	border-top: 1px solid $form-border-color;

	span:first-child {
		font-weight: bold;
	}
}

// Forms.
.table-forms-container {
	margin: 0 0 10px;
	background-color: $ui-bg-color;
	border: 1px solid $ui-border-color;
	padding: 10px;
	text-align: left;

	> .ui-tabs-nav {
		margin: -10px -10px 10px;
	}
}

.form-btns {
	button {
		margin: 10px 6px 5px;
	}
}

.table-forms {
	display: table;
	width: 100%;
	color: $font-color;

	> li {
		display: table-row;

		&.display-none {
			@extend .display-none
		}
	}

	.multiselect-suggest {
		li {
			display: block;
		}
	}

	th {
		color: $font-alt-color;
		padding: 0 5px 0 0;
		text-align: left;

		&:last-child {
			padding: 0;
		}
	}

	tfoot,
	.tfoot-buttons {
		.table-forms-td-right {
			padding-top: 5px;
		}

		button {
			margin: 0 10px 0 0;
		}
	}

	td {
		position: relative;

		&.td-drag-icon {
			padding: 0 11px 0 0;
			vertical-align: middle;
		}

		.drag-icon {
			position: absolute;
			top: 5px;
			margin-right: 5px;
		}
	}

	.table-forms-td-left {
		display: table-cell;
		padding: 5px 0;
		text-align: right;
		vertical-align: top;
		width: 15%;
		white-space: nowrap;

		label {
			display: block;
			height: 24px;
			line-height: 24px;
		}
	}

	.table-forms-td-right {
		display: table-cell;
		padding: 5px 0 5px 10px;
		vertical-align: middle;
		width: 85%;
		position: relative;

		&.has-before {
			padding-top: 0;
		}

		td {
			padding: 5px 5px 5px 0;
			position: relative;

			&.td-drag-icon {
				padding-right: 11px;
			}

			&.center {
				text-align: center;
				vertical-align: middle;

				.btn-grey {
					margin: 3px 0;
				}
			}

			&.overflow-break {
				max-width: 150px;
				overflow-wrap: break-word;
				white-space: initial;
				word-wrap: break-word;
			}

			&:last-child {
				padding-right: 0;
			}
		}

		.wrap-multiple-controls {
			display: flex;
		}

		.table-forms-separator {
			.radio-segmented + .multiselect-wrapper {
				margin-top: 5px;
			}
		}
	}

	h4 {
		margin-bottom: -5px;
	}

	.hor-list {
		li {
			display: inline-block;
		}
	}

	.dynamic-row > td {
		padding-top: 0;
	}

	.dynamic-row-control > td {
		padding-top: 0;
		padding-bottom: 0;
	}
}

.table-forms-separator {
	border: 1px solid $table-border-color;
	box-sizing: border-box;
	display: inline-block;
	padding: 5px;
	position: relative;
}

.border-left {
	border-left: 1px solid $table-border-color;
}

.drag-drop-area {
	@extend %found-bg;
}

.margin-top {
	display: block;
	margin: 4px 0 0;
}

.form-new-group {
	border: 5px solid $lighter-green;
	border-radius: 2px;
	margin-left: -5px;
	padding: 4px 0;
}

.list-check-radio {
	li {
		display: block;
		padding: .3em 0;
	}

	&.hor-list li {
		margin-right: 15px;
		padding: .3em 0 0;

		&:last-child {
			margin-right: 0;
		}
	}

	label {
		padding: 0 0 0 18px;
		display: inline-block;
		text-indent: -18px;
		max-width: 600px;

		input[type="checkbox"] {
			left: -3px;
			margin: 0;
		}

		input[type="radio"] {
			left: -3px;
			margin: 0;
		}
	}
}

.list-numbered {
	counter-reset: line;

	.list-numbered-item {
		&::before {
			content: counter(line);
			counter-increment: line;
			user-select: none;
			text-align: right;
		}
	}
}

label {
	&.form-label-asterisk {
		&::before {
			color: $form-label-asterisk-color;
			display: inline-block;
			content: '*';
			margin-right: .3em;
		}
	}

	input[type="checkbox"] {
		margin-right: 3px;
	}

	input[type="radio"] {
		margin-right: 3px;
	}
}

input {
	font: {
		family: $font-stack;
		size: $font-form-size;
	}

	&[type="text"] {
		@extend %form-input-height-padding;
		@extend %form-input-style;
	}

	&[type="password"] {
		@extend %form-input-height-padding;
		@extend %form-input-style;
	}

	&[type="search"] {
		@extend %form-input-height-padding;
		@extend %form-input-style;
	}

	&[type="number"] {
		@extend %form-input-height-padding;
		@extend %form-input-style;
	}

	&[type="email"] {
		@extend %form-input-height-padding;
		@extend %form-input-style;
	}

	&[type="time"] {
		@extend %form-input-height-padding;
		@extend %form-input-style;
	}

	&[type="file"] {
		padding: 1px;
		@extend %form-input-style;
	}

	&[type="radio"] {
		@extend %form-check-radio-style;
	}

	&[disabled] {
		@extend %form-disabled;
	}

	&[readonly] {
		color: $font-color !important;
		@extend %form-disabled;
	}
}

textarea {
	font: {
		family: $font-stack;
		size: $font-form-size;
	}
	padding: 4px 5px;
	margin: 0;
	overflow: auto;
	@extend %form-input-style;
	@extend %webkit-scrollbar;

	&[disabled] {
		@extend %form-disabled;
	}

	&[readonly] {
		color: $font-color !important;
		@extend %form-disabled;

		&:focus {
			border-color: $form-border-focus-color;
		}
	}
}

select {
	font: {
		family: $font-stack;
		size: $font-form-size;
	}

	height: 24px;
	padding: 3px 3px 3px 0;
	background-color: $form-bg-color;
	@extend %form-input-style;
	@extend %webkit-scrollbar;

	option {
		color: $font-color;

		&[disabled] {
			@extend %form-disabled;
		}
	}

	&[multiple] {
		padding: 4px 5px;
		width: 300px;
		height: 150px;

		option {
			padding: 0;
		}
	}

	&[disabled] {
		@extend %form-disabled;
	}

	&[readonly] {
		color: $font-color !important;
		pointer-events: none;
		@extend %form-disabled;
	}
}

.form-fields-inline {
	label {
		margin: 0 8px 0 3px;
	}
}

.form-input-margin {
	display: inline-block;
	margin: 0 3px 0 0;
}

.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;

		&::after {
			border-color: $form-border-color !important;
		}
	}

	&[readonly] {
		&,
		& + label {
			pointer-events: none;

			span {
				transition: none;
				@extend %form-disabled;
			}
		}
	}

	&[type="checkbox"] {
		& + label span {
			border-radius: 2px;
		}

		&:checked + label span {
			&::after {
				content: '';
				position: absolute;
				display: block;
				width: 7px;
				height: 4px;
				top: 6px;
				left: 7px;
				border-left: 2px solid $btn-bg-color;
				border-bottom: 2px solid $btn-bg-color;
				transform: translate(-50%, -50%) rotate(-45deg);
			}
		}

		&:checked[disabled] + label span {
			&::after {
				border-color: $form-border-color !important;
			}
		}
	}

	&[type="radio"] {
		& + label span {
			border-radius: 50%;
		}

		&:checked + label span {
			&::after {
				content: '';
				position: absolute;
				display: block;
				width: 8px;
				height: 8px;
				top: 3px;
				left: 3px;
				background-color: $btn-bg-color;
				border-radius: 50%;
			}
		}

		&:checked[disabled] + label span {
			&::after {
				background-color: $form-border-color !important;
			}
		}
	}

	&:focus + label span {
		border-color: $form-border-focus-color;
	}

	&:checked:focus + label span {
		border-color: $form-border-focus-color;
	}

	&:checked[disabled] + label span {
		transition: none;

		&::after {
			border-color: $form-border-color !important;
		}
	}

	&[disabled] + label span {
		transition: none;
		@extend %form-disabled;
	}
}

%form-check-radio-style {
	margin: 0;
	padding: 0;
	border: 0;
	vertical-align: middle;
	position: relative;
	top: -1px;
	overflow: hidden;
	width: 13px;
	height: 13px;
	background: none;
}

%form-input-height-padding {
	margin: 0;
	padding: 0 5px;
	min-height: 24px;
}

%form-input-style {
	background-color: $form-bg-color;
	border: 1px solid $form-border-color;
	box-sizing: border-box;
	color: $font-color;
	outline: 0;
	transition: border-color .2s ease-out, box-shadow .2s ease-out;

	&:focus {
		border-color: $form-border-focus-color;
	}
}

button::-moz-focus-inner {
	padding: 0;
	border: 0;
	vertical-align: middle;
}

button {
	font: {
		family: $font-stack;
		size: $font-form-size;
	}
	background-color: $btn-bg-color;
	border: 1px solid $btn-bg-color;
	border-radius: 2px;
	color: $btn-font-color;
	margin: 0;
	padding: 0 11px;
	min-height: 24px;
	cursor: pointer;
	outline: 0;
	transition: border-color .2s ease-out, background-color .2s ease-out;

	&:hover {
		@include btn-hover-active($btn-font-color, $btn-bg-color);
	}

	&:focus {
		box-shadow: 0 0 0 2px rgba($blue, .35);
		@include btn-hover-active($btn-font-color, $btn-bg-color);
	}

	&:active {
		@include btn-hover-active($btn-font-color, $btn-bg-color);
	}
}

.btn-alt {
	color: $btn-alt-font-color;
	background-color: $btn-alt-bg-color;

	.plus-icon {
		background-color: $btn-alt-font-color;
		margin-right: 8px;

		&::after {
			background-color: $btn-alt-font-color;
		}
	}

	&:hover {
		@include btn-hover-active($btn-font-color, $btn-bg-color);

		.plus-icon {
			background-color: $btn-font-color;

			&::after {
				background-color: $btn-font-color;
			}
		}
	}

	&:focus {
		@include btn-hover-active($btn-font-color, $btn-bg-color);

		.plus-icon {
			background-color: $btn-font-color;

			&::after {
				background-color: $btn-font-color;
			}
		}
	}

	&:active {
		@include btn-hover-active($btn-font-color, $btn-bg-color);

		.plus-icon {
			background-color: $btn-font-color;

			&::after {
				background-color: $btn-font-color;
			}
		}
	}
}

.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;
	border-color: $btn-form-border-color;
	vertical-align: top;

	&:hover {
		color: $btn-form-font-color;
		background-color: $btn-form-hover-color;
		border-color: $btn-form-border-color;
	}

	&:focus {
		color: $btn-form-font-color;
		background-color: $btn-form-hover-color;
		border-color: $form-border-focus-color;
	}

	&:active {
		color: $btn-form-font-color;
		background-color: $btn-form-hover-color;
		border-color: $form-border-focus-color;
	}
}

.btn-link {
	position: relative;
	background-color: $transparent;
	border: 0;
	border-bottom: 1px dotted $link-color;
	border-radius: 0;
	color: $link-color;
	font-size: inherit;
	padding: 0;
	min-height: inherit;

	&:hover {
		@extend .btn-link;
	}

	&:focus {
		@extend .btn-link;
		outline: none;
		margin-bottom: -2px !important;
		border-bottom: 2px solid rgba($link-hover-color, .5);
		box-shadow: 0 0 0 0 !important;
	}

	&:active {
		@extend .btn-link;
	}

	&[disabled] {
		background-color: $transparent;

		&:hover {
			background-color: $transparent;
		}
	}
}

$icon-btn: (
	kiosk: $btn-bg-color url($sprite-path) no-repeat -79px -259px,
	min: $btn-bg-color url($sprite-path) no-repeat -7px -259px,
	add-fav: $btn-bg-color url($sprite-path) no-repeat -7px -295px,
	remove-fav: $btn-bg-color url($sprite-path) no-repeat -7px -329px,
	action: $btn-bg-color url($sprite-path) no-repeat -7px -367px,
	info: $btn-bg-color url($sprite-path) no-repeat -7px -403px,
	"dashboard-kioskmode-toggle-slideshow.slideshow-state-started": $btn-bg-color url($sprite-path) no-repeat -432px -582px,
	"dashboard-kioskmode-toggle-slideshow.slideshow-state-stopped": $btn-bg-color url($sprite-path) no-repeat -433px -546px,
	dashboard-kioskmode-previous-page: $btn-bg-color url($sprite-path) no-repeat -398px -657px,
	dashboard-kioskmode-next-page: $btn-bg-color url($sprite-path) no-repeat -396px -624px
);

// Dynamically generated classes:
//  .btn-kiosk
//  .btn-min
//  .btn-add-fav
//  .btn-remove-fav
//  .btn-action
//  .btn-info
//  .btn-dashboard-kioskmode-toggle-slideshow
//  .btn-dashboard-kioskmode-previous-page
//  .btn-dashboard-kioskmode-next-page
@each $icon-btn, $bgimage in $icon-btn {
	.btn-#{$icon-btn} {
		background: $bgimage;
		@extend %button-icon-size;
	}
}

$icon-widget-btn: (
	dashboard-page-properties: url($sprite-path) no-repeat -318px -618px,
	iterator-page-previous: url($sprite-path) no-repeat -85px -657px,
	iterator-page-next: url($sprite-path) no-repeat -83px -623px,
	widget-action: url($sprite-path) no-repeat -6px -618px,
	widget-collapse: url($sprite-path) no-repeat -6px -654px,
	widget-expand: url($sprite-path) no-repeat -6px -689px,
	widget-edit: url($sprite-path) no-repeat -42px -619px,
	alarm-on: url($sprite-path) no-repeat -6px -546px,
	alarm-off: url($sprite-path) no-repeat -6px -582px,
	sound-on: url($sprite-path) no-repeat -6px -474px,
	sound-off: url($sprite-path) no-repeat -6px -510px,
	info-clock: url($sprite-path) no-repeat -87px -762px
);

// Dynamically generated classes:
//  .btn-dashboard-page-properties
//  .btn-iterator-page-previous
//  .btn-iterator-page-next
//  .btn-widget-action
//  .btn-widget-collapse
//  .btn-widget-expand
//  .btn-widget-edit
//  .btn-alarm-on
//  .btn-alarm-off
//  .btn-sound-on
//  .btn-sound-off
//  .btn-info-clock
@each $icon-widget-btn, $bgimage in $icon-widget-btn {
	.btn-#{$icon-widget-btn} {
		background: $bgimage;
		@extend %btn-widget;
	}
}

// Time selection.
.ui-tabs-nav {
	height: 30px;
	line-height: 30px;
	border-bottom: 1px solid $table-border-color;

	li {
		display: inline-block;

		a {
			border: 0;
			padding: 8px 10px;
			transition: background-color .2s ease-out;

			&:hover,
			&:focus,
			&:active {
				background-color: $ui-hover-color;
			}
		}

		&.ui-tabs-active:first-child {
			border-left: 0;
		}

		&.ui-tabs-active {
			a {
				padding: 8px 10px 6px;
				background-color: $transparent;
				color: $font-color;
				text-decoration: none;
				cursor: default;
				border-bottom: 3px solid $ui-tab-bg-selected-color;
			}
		}

		&.ui-state-disabled {
			a {
				cursor: default;
				color: $btn-disabled-font-color;
				background-color: $transparent;
				border: 0;
			}
		}
	}

	.btn-info,
	.btn-time,
	.filter-trigger {
		border-radius: 2px;
		color: $btn-font-color;
		background-color: $btn-bg-color;
		border: 1px solid $btn-bg-color;
		position: relative;
		margin: 0 0 0 6px;
		min-height: 24px;
		vertical-align: bottom;

		&::after {
			content: '';
			position: absolute;
		}

		&:focus,
		&:hover {
			@include btn-hover-active($btn-font-color, $btn-bg-color);
			cursor: pointer;
		}
	}

	.btn-info,
	.btn-time {
		padding: 0 34px 0 10px;

		&::after {
			margin: 0 5px;
			right: 0;
			top: 0;
			height: 24px;
			width: 24px;
			background: url($sprite-path) no-repeat -87px -583px;
		}
	}

	.btn-info {
		width: initial;
		background-image: none;

		&::after {
			background: url($sprite-path) no-repeat -431px -621px;
		}
	}

	.filter-trigger {
		padding: 0 34px 0 10px;

		&::after {
			margin: 0 5px;
			right: 0;
			top: 0;
			height: 24px;
			width: 24px;
			background: url($sprite-path) no-repeat -87px -547px;
		}
	}

	.ui-state-focus {
		.btn-info,
		.btn-time,
		.filter-trigger {
			box-shadow: 0 0 0 2px rgba($blue, .35);
			@include btn-hover-active($btn-font-color, $btn-bg-color);
		}

		&.ui-tabs-active {
			.btn-info,
			.btn-time,
			.filter-trigger {
				box-shadow: 0 0 0 2px rgba($blue, .35);
			}
		}
	}

	.ui-tabs-active {
		.btn-info,
		.btn-time,
		.filter-trigger {
			color: $font-color;
			background-color: $ui-bg-color;
			border: 1px solid $ui-border-color;
			border-bottom: 0;
			border-radius: 2px 2px 0 0;
			margin: -1px 0 0 6px;
			padding: 1px 34px 7px 10px;
		}

		.btn-info {
			&::after {
				background-position: -279px -621px;
				top: 1px;
			}
		}

		.btn-time {
			&::after {
				background-position: -246px -583px;
				top: 1px;
			}
		}

		.filter-trigger {
			&::after {
				background-position: -246px -547px;
			}
		}
	}

	.ui-state-hover {
		&.ui-tabs-active {
			.btn-info,
			.btn-time,
			.filter-trigger {
				background-color: $action-hover-color;
			}
		}
	}
}

.filter-space {
	box-sizing: border-box;

	li a.ui-tabs-anchor {
		vertical-align: top;
	}

	ul.ui-tabs-nav li:focus {
		outline: none;
	}

	.filter-btn-container {
		height: 29px;
		z-index: 2;
	}

	.ui-tabs-nav {
		height: 29px;
		border-bottom: 0;

		a {
			display: inline-block;
			box-sizing: border-box;
			line-height: 22px;
			margin-bottom: 5px;
			text-align: center;
		}
	}
}

.btn-time-left,
.btn-time-right {
	background: url($sprite-path) no-repeat;
	content: '';
	border: 0;
	height: 24px;
	width: 24px;
	vertical-align: top;

	&:focus,
	&:hover {
		border: 1px solid $ui-border-color;
		@include btn-hover-active($btn-font-color, $btn-bg-color);
	}

	&:disabled {
		border: 0;
		opacity: .4;
	}
}

.btn-time-right {
	background-position: -83px -623px;

	&:focus,
	&:hover {
		background-position: -396px -624px;
	}

	&:disabled {
		background-position: -83px -623px;
	}
}

.btn-time-left {
	background-position: -85px -657px;

	&:focus,
	&:hover {
		background-position: -398px -658px;
	}

	&:disabled {
		background-position: -85px -657px;
	}
}

.btn-time-out {
	background: none;
	border: 1px solid transparent;
	color: $font-color;
	height: 24px;
	line-height: 22px;
	margin: 0 5px;
	vertical-align: top;

	&:disabled {
		background: transparent !important;
		border-color: transparent !important;
		opacity: .8;
	}
}


.time-quick {
	font-size: 12px;
	line-height: 20px;

	li {
		&:last-of-type {
			a {
				margin-bottom: 0;
			}
		}

		a {
			display: inline-block;
			padding: 2px 10px;
			margin-bottom: 2px;
			margin-left: -10px;
			border-bottom: 0;

			&:hover,
			&:focus,
			&.selected {
				border-radius: 2px;
				border-bottom: 0;
			}

			&:hover {
				background: $action-hover-color;
				transition: background-color .2s ease-out;
			}

			&:focus {
				box-shadow: 0 0 0 2px rgba($blue, .35);
			}

			&.selected {
				background: $ui-bg-selected-color;
				color: $white;
				transition: background-color .2s ease-out;
			}
		}
	}
}

.time-selection-container {
	display: flex;
	justify-content: flex-end;

	.time-input {
		border-right: 1px solid $ui-border-color;
		padding: 0 30px 0 10px;
		text-align: right;
		white-space: nowrap;

		.time-input-error {
			margin: -8px 29px 0 0;
		}

		ul {
			padding: 0 0 10px;
		}

		li {
			display: inline-block;
			vertical-align: baseline;
			padding: 0 0 0 10px;

			.icon-cal {
				position: relative;
				vertical-align: middle;
				margin-left: 2px;
			}
		}
	}

	.time-quick-range {
		text-align: right;
		white-space: nowrap;
		margin: 0 0 0 20px;

		.cell {
			display: inline-flex;
			vertical-align: top;
			text-align: left;
			margin: 0 10px;
		}

		.time-quick-selected {
			display: inline-block;
			padding: 2px 10px;
			margin-left: -10px;
			color: $font-selected-color;
			background-color: $ui-bg-selected-color;
			border-bottom: 0;
		}
	}
}

.header-kioskmode-controls {
	position: fixed;
	top: 5px;
	right: 45px;
	z-index: 1010;
	display: flex;
	transition: opacity 1s ease-out;

	&.hidden {
		opacity: 0;
	}

	& > li > ul {
		margin-right: 10px;
	}

	ul {
		display: flex;

		li {
			margin-right: 10px;
		}
	}
}

.btn-dashboard-conf {
	background: url($sprite-path) no-repeat -42px -619px;
	@extend %btn-dashboard;
}

.btn-dashboard-normal {
	box-shadow: 1px 1px 2px $action-shadow-color;
}

%btn-widget {
	width: 24px;
	height: 24px;
	margin: 2px 2px 0 0;
	@extend %btn-widget-defaults;
}

%btn-dashboard {
	width: 24px;
	height: 24px;
	@extend %btn-widget-defaults;
}

%btn-widget-defaults {
	border: 0;
	min-height: 0;
	padding: 0;
	opacity: .5;
	transition: opacity .2s ease-out;

	&:hover,
	&:focus,
	&:active {
		@extend %btn-widget-hover-active;
	}

	&[disabled],
	&[disabled]:hover,
	&[disabled]:focus,
	&[disabled]:active {
		background-color: transparent;
		opacity: .25;
	}
}

%button-icon-size {
	width: 24px;
	height: auto;
	padding: 0;
}

%btn-disabled {
	color: $btn-disabled-font-color !important;
	background-color: $btn-disabled-bg-color;
	border-color: $btn-disabled-border-color;
	cursor: default;

	&.icon-cal {
		opacity: .3;
		background-color: transparent;
	}
}

%form-disabled {
	color: $form-disabled-font-color;
	background-color: $form-disabled-bg-color !important;
	border-color: $form-disabled-border-color;
}

.inaccessible {
	.subfilter-enabled {
		color: darken($font-selected-color, 25%);
	}
}

%btn-widget-hover-active {
	background-color: $transparent;
	opacity: 1;
}

button[disabled] {
	@extend %btn-disabled;

	&:hover {
		@extend %btn-disabled;
	}

	&:active {
		@extend %btn-disabled;
	}
}

.action-buttons {
	margin: 10px 0 0;
	color: $font-alt-color;

	button {
		margin: 0 10px 10px 0;
	}
}

.selected-item-count {
	display: inline-block;
	margin: 0 14px 0 0;
}

$var-icons: (
	maintenance: url($sprite-path) no-repeat -47px -803px,
	depend-up: url($sprite-path) no-repeat -47px -731px,
	depend-down: url($sprite-path) no-repeat -47px -767px,
	ackn: url($sprite-path) no-repeat -47px -694px
);

// Dynamically generated classes:
//  .icon-maintenance
//  .icon-depend-up
//  .icon-depend-down
//  .icon-ackn
@each $var-icons, $bgimage in $var-icons {
	.icon-#{$var-icons} {
		position: relative;
		display: inline-block;
		width: 16px;
		height: 16px;
		border-radius: 2px;

		&::before {
			@extend %var-icons;
			background: $bgimage;
			width: 14px;
			height: 14px;
			left: 1px;
			top: 1px;
		}

		&:link,
		&:hover,
		&:focus {
			border-bottom: none;
		}

		&:focus {
			box-shadow: 0 0 0 2px $btn-border-focus-color;
		}
	}
}

$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
);

%trigger-expression-tree-icons-common {
	margin: 0 12px 0 0;

	&::before {
		background: url($sprite-path) no-repeat;
		display: inline-block;
		width: 12px;
		height: 12px;
		position: absolute;
		content: '';
	}
}

// Dynamically generated classes:
//  .icon-tree-top-bottom
//  .icon-tree-top-bottom-right
//  .icon-tree-top-right
//  .icon-tree-empty
@each $class, $bg-position in $trigger-expression-tree-icons {
	.icon-tree-#{$class} {
		@extend %trigger-expression-tree-icons-common;

		&::before {
			background-position: $bg-position;
		}
	}
}

$form-icon-btn: (
	cal: url($sprite-path) no-repeat -42px -834px,
	wizard-action: url($sprite-path) no-repeat -6px -617px
);

// Dynamically generated classes:
//  .icon-cal
//  .icon-wizard-action
@each $form-icon-btn, $bgimage in $form-icon-btn {
	.icon-#{$form-icon-btn} {
		background: $transparent $bgimage;
		@extend %form-icon-btn;
	}
}

%form-icon-btn {
	border: 0;
	margin: -4px 0;
	vertical-align: middle;
	cursor: pointer;
	opacity: .75;
	transition: opacity .2s ease-out;
	@extend %button-icon-size;

	&:hover,
	&:focus,
	&:active {
		opacity: 1;
		background-color: $transparent;
	}
}

%var-icons {
	display: inline-block;
	width: 18px;
	height: 18px;
	position: absolute;
	content: '';
}

.drag-icon {
	margin-left: -9px;
	height: 24px;
	background: url($sprite-path) no-repeat -6px -762px;
	@extend %button-icon-size;
}

.drag-icon,
.ui-draggable .dashboard-widget-head {
	@extend %cursor-drag;
}

.ui-draggable {
	.drag-icon,
	.dashboard-widget-head {
		@extend %cursor-dragging;
	}
}

.icon-info {
	position: relative;
	width: 8px;
	height: 11px;
	cursor: pointer;
	margin: -12px 0 -4px;

	&:link,
	&:hover,
	&:focus {
		border-bottom: 1px solid;
	}

	&:focus {
		box-shadow: 0 0 0 2px $btn-border-focus-color;
	}

	&::before {
		content: '';
		display: inline-block;
		position: absolute;
		top: 0;
		left: 0;
		width: 14px;
		height: 14px;
		background: url($sprite-path) no-repeat -47px -659px;
	}

	&.status-red {
		&:link,
		&:hover,
		&:focus {
			border-color: darken(desaturate($alt-red, 10%), 9%);
		}
	}

	&.status-yellow {
		&:link,
		&:hover,
		&:focus {
			border-color: darken(desaturate($alt-yellow, 9%), 20%);
		}
	}
}

// Installation.
.setup-container {
	background-color: $ui-bg-color;
	width: 766px;
	height: 420px;
	margin: 0 auto;
	margin-top: 5%;
	padding: 42px;
	vertical-align: top;
	position: relative;
	border: 1px solid $ui-border-color;

	h1 {
		border: 0;
		margin: 3px 0 11px;
		padding: 0;
	}

	.setup-logo {
		display: flex;
		margin-bottom: 40px;
		justify-content: flex-start;
	}

	#tls_encryption_hint {
		font-style: italic;
		color: $font-alt-color;
	}
}

.setup-left {
	float: left;
	width: 200px;
	padding-right: 10px;

	ul {
		margin: -4px 0 0 -42px;

		li {
			padding: 4px 0 4px 42px;

			&.setup-left-current {
				border-left: 3px solid $ui-tab-bg-selected-color;
				color: $font-alt-color;
				padding-left: 39px;
			}
		}
	}
}

.setup-right {
	width: auto;
	margin-left: 200px;
}

.setup-right-body {
	padding-right: 5px;
	max-height: 345px;
	overflow-y: auto;

	.list-table {
		border: 0;
	}

	h1 {
		margin: 25% 0 .4em;
	}

	@extend %webkit-scrollbar;
}

.setup-title {
	margin: 109px 0 16px 0;
	color: $font-alt-color;
	font-size: $font-setup-title;
	line-height: $setup-title-line-height;

	span {
		display: block;
		font-size: $font-setup-sup-title;
	}
}

.setup-footer {
	position: absolute;
	bottom: 32px;
	width: 766px;
	text-align: right;

	div {
		float: right;
	}

	button {
		margin: 0 0 0 10px;

		&.float-left {
			margin: 0;
			float: left;
		}
	}
}

.signin-container {
	background-color: $ui-bg-color;
	width: 280px;
	margin: 0 auto;
	margin-top: 5%;
	padding: 42px 42px 39px;
	border: 1px solid $ui-border-color;

	h1 {
		border: 0;
		margin: 0 0 17px;
		padding: 0;
	}

	ul li {
		padding: 16px 0 0;
		font-size: $font-top-nav-size;

		&.sign-in-txt {
			text-align: center;
		}
	}

	label {
		display: inline-block;
		margin: 0 0 2px;
	}

	input {
		&[type="text"] {
			@extend %signin-input;
		}

		&[type="password"] {
			@extend %signin-input;
		}
	}

	button {
		font-size: $font-form-size;
		margin: 7px 0;
		min-height: 35px;
		line-height: 35px;
		width: 100%;
	}
}

.signin-logo {
	display: flex;
	margin-bottom: 21px;
	justify-content: center;
}

.signin-links {
	width: 100%;
	text-align: center;
	color: $font-alt-color;
	margin: 11px 0 0;
}

%signin-input {
	padding: 9px 5px;
	width: 100%;
}

%nothing-to-show {
	color: $font-alt-color;
	text-align: center;
	transition: 0s;

	td:hover {
		background-color: $ui-bg-color;
	}
}

// Action Menus, Pop-up Menus.
.menu-popup-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1001;
}

.menu-popup {
	position: absolute;
	z-index: 1001;
	padding: 5px 15px 5px 25px;
	min-width: 166px;
	max-width: 250px;
	background-color: $ui-bg-color;
	border: 1px solid $overlay-border-color;
	border-bottom-color: darken($overlay-border-color, 1%);
	box-shadow: 0 4px 20px 0 $action-shadow-color;

	&:focus {
		outline: none;
	}

	li {
		display: block;

		div {
			border-top: 1px solid $table-border-color;
			margin: 5px -15px 5px -25px;
		}
	}

	.menu-popup-item {
		display: block;
		height: 24px;
		line-height: 24px;
		cursor: pointer;
		color: $font-color;
		text-decoration: none;
		border: 0;
		outline: 0;
		padding: 0 15px 0 25px;
		margin: 0 -15px 0 -25px;
		position: relative;
		@extend %overflow-ellipsis;
		transition: background-color .2s ease-out;

		&:hover,
		&:focus,
		&:active,
		&.highlighted {
			background-color: $action-hover-color;
		}

		&.selected {
			&::before {
				display: block;
				width: 24px;
				height: 24px;
				position: absolute;
				left: 0;
				content: '';
				background: url($sprite-path) no-repeat -5px -835px;
			}
		}

		.arrow-right {
			position: absolute;
			right: 10px;
			top: 8px;
			height: auto;
			line-height: auto;
			padding: 0;
			margin: 0;
			border-left-color: $font-alt-color;
		}

		&[class*='icon-'] {
			&::before {
				position: absolute;
				top: 0;
				left: 0;
				display: block;
				width: 22px;
				height: 22px;
				content: "";
			}
		}

		&.disabled {
			background-color: transparent;
			color: $font-alt-color;
			opacity: 1;
		}
	}

	h3 {
		height: 24px;
		line-height: 24px;
		@extend %overflow-ellipsis;
	}

	&.page-title-submenu::before {
		content: '';
		position: absolute;
		top: -7px;
		left: 10px;
		width: 12px;
		height: 12px;
		background-color: $ui-bg-color;
		border-top: 1px solid $overlay-border-color;
		border-left: 1px solid $overlay-border-color;
		transform: rotate(45deg);
	}
}

.overlay-dialogue {
	display: table;
	position: absolute;
	z-index: 1000;
	padding: 15px 10px 10px;
	background-color: $ui-bg-color;
	border: 1px solid $overlay-border-color;
	border-bottom-color: darken($overlay-border-color, 1%);
	box-shadow: 0 4px 20px 0 $action-shadow-color;

	&.modal {
		position: fixed;
		overflow: hidden;
		margin: 0 10px;

		.overlay-dialogue-body {
			overflow: auto;
			overflow-x: hidden;
			width: 100%;
			max-height: calc(100vh - 220px);
			max-width: inherit;
			margin: 0 -10px 10px;
			padding: 0 10px;
			position: relative;
			@extend %webkit-scrollbar;

			.table-forms {
				.table-forms-td-right {
					padding-right: 8px;
				}

				.table-forms-row-with-second-field {
					position: relative;

					.table-forms-second-column {
						position: absolute;
						top: 5px;
						right: 8px;
					}
				}
			}

			.columns-wrapper {
				.column-50:last-of-type {
					margin-left: 10px;
				}
			}
		}

		.overlay-dialogue-controls {
			text-align: right;
			padding: 0 0 10px;

			z-select {
				text-align: left;
				padding: inherit;

				li {
					display: block;
					padding-left: 5px;
				}
			}

			.inline-filter {
				li {
					padding-left: 0;
				}
			}
		}

		> .overlay-close-btn {
			position: relative;
			float: right;
			top: -13px;
			right: -8px;
		}
	}

	&.modal-popup {
		top: 50px;
		max-width: 1024px;

		&.modal-popup-small {
			max-width: 450px;
			width: 100%;
		}

		&.modal-popup-medium {
			min-width: 450px;
		}

		&.modal-popup-large {
			width: 100%;
		}

		&.modal-popup-generic {
			min-width: 650px;
		}

		&.modal-popup-static {
			max-width: 700px;
			width: 100%;
		}

		&.modal-popup-preprocessing {
			max-width: 900px;
			width: 100%;
		}

		&.modal-popup-fullscreen {
			width: calc(100vw - 40px);
			max-width: calc(100vw - 40px);
		}
	}

	.hintbox-wrap {
		overflow: auto;
		max-height: 240px;
		max-width: 800px;
		overflow-wrap: break-word;
		@extend %webkit-scrollbar;
	}

	.msg-bad,
	.msg-good,
	.msg-warning {
		position: -webkit-sticky;
		position: sticky;
		top: 0;
		z-index: 4;
		margin: 0 0 10px;
	}

	.form-grid {
		// 100px label column width for use in popup forms.
		grid-template-columns: minmax(100px, max-content) auto;

		&.form-grid-1-1 {
			grid-template-columns: repeat(2, minmax(100px, max-content) auto);
		}

		&.form-grid-3-1 {
			grid-template-columns: minmax(100px, max-content) 3fr max-content auto;
		}
	}

	.list-table {
		white-space: normal;
		border: 0;

		th {
			@extend %dashboard-widget-td;
		}

		td {
			@extend %dashboard-widget-td;
		}
	}

	.table-paging {
		border: 0;
		border-top: 1px solid $table-border-color;
	}

	.table-forms-td-right {
		td {
			vertical-align: middle;

			label {
				display: block;
			}
		}
	}

	.dashboard-widget-head {
		margin: -10px -10px 6px;
	}

	.maps-container {
		max-height: 128px;
		overflow-y: auto;
		margin-left: -10px;
		@extend %webkit-scrollbar;
	}

	.table-forms-second-column {
		float: right;
		line-height: 24px;
	}
}

// Multiline input control.
.multilineinput-control {
	display: flex;
	width: 100%;

	input[type=text] {
		overflow: hidden;
		cursor: pointer;
		white-space: nowrap;
		text-overflow: ellipsis;
		border-right: 0;
		width: 100%;

		&[readonly] {
			background: $form-bg-color !important;
			border-color: $form-border-color;
			color: $form-font-color;
		}

		&.monospace-font {
			padding-top: 1px;
		}
	}

	&.editable {
		background-color: $form-bg-color !important;
		border-color: $form-disabled-font-color;
	}

	button {
		position: relative;
		border-top-left-radius: 0;
		border-bottom-left-radius: 0;

		&::after {
			background: url($sprite-path) no-repeat -47px -478px;
			content: '';
			position: absolute;
			left: 3px;
			top: 4px;
			height: 14px;
			width: 15px;
		}

		&:not([disabled]):not([readonly]) {
			background-color: $form-bg-color;
			border-color: $form-border-color;

			&:hover {
				background-color: $btn-form-hover-color;
			}
		}
	}

	&.multilineinput-readonly {
		input[type=text][readonly] {
			background-color: $form-disabled-bg-color !important;
		}
	}

	&.multilineinput-disabled {
		input[type=text] {
			cursor: default;
		}

		button::after {
			opacity: .5;
		}
	}
}

.multilineinput-modal {
	$line-height: 18px;

	min-width: 960px;

	.multilineinput-container {
		padding: 1px;
		position: relative;
		display: flex;
		overflow: hidden;
	}

	.multilineinput-line-numbers {
		counter-reset: line;
		overflow: hidden;
		padding: 1px 5px 1px 0;
		position: absolute;
		left: 0;
		top: 0;
		bottom: 0;

		li {
			color: $font-alt-color;
			line-height: $line-height;
			text-align: right;
			min-width: 24px;

			&::before {
				counter-increment: line;
				content: counter(line);
				user-select: none;
			}
		}
	}

	.multilineinput-label {
		color: $font-alt-color;
		line-height: 24px;
	}

	.multilineinput-textarea {
		flex: 1;
		line-height: $line-height;
		resize: none;
		white-space: pre;
		padding: 0 5px;
		z-index: 20;

		&::-webkit-scrollbar {
			height: 9px;
		}
	}

	.multilineinput-char-count {
		color: $font-alt-color;
		float: left;
		line-height: 24px;
	}
}

// Flexible textarea.
.textarea-flexible-container {
	td {
		line-height: 22px;

		&.textarea-flexible-parent {
			vertical-align: top;
		}

		button {
			line-height: normal;
		}
	}
}

.textarea-flexible {
	display: block;
	min-height: 24px;
	overflow: hidden;
	resize: none;
	word-break: break-all;
	height: 24px;
	line-height: 14px;
	white-space: break-spaces;
}

// Map widget back to parent button.
.btn-back-map-container {
	text-align: left;
	position: absolute;
	left: -1px;
	max-width: 100%;

	a {
		&:focus,
		&:hover {
			outline: none;

			.btn-back-map {
				background-color: $btn-back-background-hover;
				border: $btn-border-color solid 1px;

				.btn-back-map-content {
					display: inline-block;
					line-height: 24px;
					padding: 0 6px 0 0;
					flex: auto;
					@extend %overflow-ellipsis;
				}
			}
		}
	}

	.btn-back-map {
		border: $ui-border-color solid 1px;
		border-radius: 0 2px 2px 0;
		background-color: $btn-back-map-background-color;
		color: $btn-back-text-color;
		margin-top: 10px;
		padding: 0;
		display: flex;
		height: 24px;
		line-height: 24px;
		vertical-align: middle;
		text-decoration: none;

		.btn-back-map-content {
			display: none;
		}

		.btn-back-map-icon {
			margin-left: 5px;
			display: inline-block;
			flex: 1 0 auto;
			width: 28px;
			height: 24px;
			vertical-align: middle;
			background: url($sprite-path) no-repeat -85px -691px;
		}
	}
}

.overlay-dialogue-body {
	margin: 0 0 25px;
	white-space: nowrap;

	.debug-output {
		margin: 10px 0 0;
	}
}

.overlay-dialogue-footer {
	text-align: right;

	button {
		margin: 0 0 0 10px;
	}
}

.overlay-bg {
	background-color: $overlay-bg-color;
	width: 100%;
	height: 100%;
	position: fixed;
	z-index: 1000;
	top: 0;
	left: 0;
	opacity: .35;
}

.calendar {
	width: 200px;

	.calendar-year,
	.calendar-month {
		&.highlighted {
			background-color: $action-hover-color;
		}

		&:focus {
			outline: none;
		}
	}

	table {
		width: 100%;
		margin: 5px 0;

		thead {
			text-transform: $font-transform;
			color: $font-alt-color;
		}

		tbody {
			text-align: center;

			td {
				transition: background-color .2s ease-out;

				&.selected {
					background-color: $ui-bg-selected-color;
					color: $white;

					&:hover {
						background-color: darken($ui-bg-selected-color, 4%);
					}
				}

				&:hover {
					background-color: $action-hover-color;
					cursor: pointer;
				}

				&.highlighted {
					@include btn-hover-active($btn-font-color, $btn-bg-color);
					cursor: pointer;
				}

				&:focus {
					outline: none;
				}

				span {
					z-index: -1;
					padding: 4px;
					display: block;
				}
			}
		}
	}
}

.calendar-header {
	text-align: center;

	.btn-grey {
		border: 0;
		background-color: $transparent;
	}
}

.calendar-year {
	height: 24px;
	line-height: 26px;
	display: table;
	width: 100%;

	button:first-child {
		float: left;
	}

	button:last-child {
		float: right;
	}

	button:hover {
		background-color: $action-hover-color;
		cursor: pointer;
	}
}

.calendar-month {
	@extend .calendar-year;
}

.calendar-time {
	text-align: center;

	input[type="text"] {
		width: 32px;
	}
}

.calendar-footer {
	margin: 26px 0 0;
	text-align: right;

	.btn-grey {
		float: left;
		margin-top: 0;
	}
}

.calendar-control {
	input {
		vertical-align: middle;
	}
}

// Problem notification overlay.
.notif {
	width: 250px;

	.dashboard-widget-head {
		margin: -11px 0 7px -9px;
		padding: 0;

		ul {
			position: relative;
			display: inline-block;

			li {
				float: none;
				display: inline-block;
			}
		}
	}
}

.notif-body {
	max-height: 600px;
	padding: 0 5px 0 0;
	overflow-y: auto;
	@extend %webkit-scrollbar;

	h4 {
		display: block;
		max-width: 250px;
		padding-bottom: .083em;
		@extend %overflow-ellipsis;
	}

	p {
		margin: .25em 0 0;
	}

	li {
		padding: 0 0 10px 19px;

		&:last-child {
			padding-bottom: 0;
		}
	}
}

.notif-indic {
	width: 14px;
	height: 14px;
	float: left;
	margin: 2px 0 0 -19px;
	border-radius: 2px;

	.notif-indic-snooze {
		width: 14px;
		height: 14px;
		float: left;
		margin-top: 20px;
		background: url($sprite-path) no-repeat -11px -587px;
	}
}

.dashed-border {
	td {
		border: 1px dashed $table-border-color;
	}
}

.top {
	vertical-align: top !important;
}

.right {
	text-align: right !important;
}

.bottom {
	vertical-align: bottom;
}

.left {
	text-align: left;
}

.center {
	text-align: center;
}

.middle {
	vertical-align: middle;
}

.no-padding {
	padding: 0 !important;
}

.graph-selection {
	position: absolute;
	z-index: 98;
	overflow: hidden;
	background-color: rgba($yellow, .35);
	border: 1px solid rgba($dark-yellow, .6);
	border-top: 0;
	border-bottom: 0;
}
.svg-graph-selection {
	fill: rgba($yellow, .35);
	stroke: rgba($dark-yellow, .6);
	stroke-width: 1px;
}
.svg-graph-selection-text {
	fill: $font-color;
}
.svg-helper {
	stroke-opacity: .35;
	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;
	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 {
	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;
	white-space: nowrap;
	min-width: 145px;

	.table-paging {
		min-height: 18px;
		padding: 0 0 2px;
		border: 0;
		top: 2px;

		.paging-btn-container {
			min-height: inherit;
		}
	}

	.list-table tbody tr:last-child td {
		border-bottom-style: none;
		box-shadow: none;
	}

	li {
		padding-left: 23px;

		.svg-graph-hintbox-item-color {
			margin: 3px 10px 3px -20px;
			width: 10px;
			height: 10px;
			float: left;
			display: block;
		}
	}

	.header {
		margin: 0 0 10px 3px;
	}
}

.ui-selectable-helper {
	position: absolute;
	z-index: 100;
	background-color: rgba($yellow, .35);
	border: 1px solid rgba($dark-yellow, .6);
}

#map-area {
	.map-element-area-bg {
		background-color: rgba($action-hover-color, .35);
	}
}

.map-element-selected {
	border: 3px dashed $dark-yellow;
	margin: -3px;
}

// Debug, Overlay Description.
.debug-output {
	display: none;
	max-height: 600px;
	overflow-y: auto;
	padding: 10px;
	margin: 10px;
	background-color: $lighter-yellow;
	border: 1px solid $ui-border-color;
	@extend %webkit-scrollbar;
}

// ZBX_STYLE_BTN_DEBUG
.btn-debug {
	position: fixed;
	bottom: 10px;
	right: 35px;
	z-index: 15000;
	color: $btn-form-font-color;
	background-color: $btn-form-bg-color;
	border-color: $btn-form-border-color;
	opacity: 0;
	transition: opacity .2s ease-out;

	&.visible {
		opacity: 0.75;
	}

	&:hover {
		color: $btn-form-font-color;
		background-color: $btn-form-hover-color;
		border-color: $btn-form-border-color;
	}

	&:focus {
		color: $btn-form-font-color;
		background-color: $btn-form-hover-color;
		border-color: $form-border-focus-color;
	}

	&:active {
		color: $btn-form-font-color;
		background-color: $btn-form-hover-color;
		border-color: $form-border-focus-color;
	}
}

.overlay-descr {
	max-height: 150px;
	overflow-y: auto;
	padding: 0;
	margin: 5px 0;
	background-color: $ui-bg-color;
	@extend %webkit-scrollbar;
	@extend %scroll-vert-shadow;
}

.overlay-descr-url {
	padding: 3px 0 7px;
	@extend %overflow-ellipsis;
}

%scroll-vert-shadow {
	background:
		// Shadow covers.
		linear-gradient($ui-bg-color 30%, rgba($ui-bg-color, 0)),
		linear-gradient(rgba($ui-bg-color, 0), $ui-bg-color 70%) 0 100%,
		// Shadows.
		radial-gradient(50% 0, farthest-side, rgba($action-shadow-color, .4), rgba($action-shadow-color, 0)),
		radial-gradient(50% 100%, farthest-side, rgba($action-shadow-color, .4), rgba($action-shadow-color, 0)) 0 100%;
	background:
		// Shadow covers.
		linear-gradient($ui-bg-color 30%, rgba($ui-bg-color, 0)),
		linear-gradient(rgba($ui-bg-color, 0), $ui-bg-color 70%) 0 100%,
		// Shadows.
		radial-gradient(farthest-side at 50% 0, rgba($action-shadow-color, .4), rgba($action-shadow-color, 0)),
		radial-gradient(farthest-side at 50% 100%, rgba($action-shadow-color, .4), rgba($action-shadow-color, 0)) 0 100%;
	background-repeat: no-repeat;
	background-color: $ui-bg-color;
	background-size: 100% 40px, 100% 40px, 100% 4px, 100% 4px;
	background-attachment: local, local, scroll, scroll;
}

// Alerts.
.green {
	color: $green;
}

a.green {
	@extend .green;

	&:hover,
	&:focus {
		color: $link-hover-color;
	}
}

.red {
	color: $red;
}

a.red {
	@extend .red;

	&:hover,
	&:focus {
		color: $link-hover-color;
	}
}

.orange {
	color: $orange;
}

a.orange {
	@extend .orange;

	&:hover,
	&:focus {
		color: $link-hover-color;
	}
}

.yellow {
	color: $dark-yellow;
}

a.yellow {
	@extend .yellow;

	&:hover,
	&:focus {
		color: $link-hover-color;
	}
}

.grey {
	color: $font-alt-color;
}

a.grey {
	@extend .grey;

	&:hover,
	&:focus {
		color: $link-hover-color;
	}
}

.blue {
	color: $blue;
}

a.blue {
	@extend .blue;

	&:hover,
	&:focus {
		color: $link-hover-color;
	}
}

.teal {
	color: $teal;
}

a.teal {
	@extend .teal;

	&:hover,
	&:focus {
		color: $link-hover-color;
	}
}

a.link-action {
	color: $font-color;

	&.red {
		color: $red;
	}

	&.orange {
		color: $orange;
	}

	&.yellow {
		color: $dark-yellow;
	}

	&.green {
		color: $green;
	}

	&.grey {
		color: $font-alt-color;
	}

	&:hover {
		color: $link-hover-color;
		border-bottom: 1px solid rgba($link-hover-color, .5);
	}

	&:focus {
		color: $link-hover-color;
	}
}

%status {
	padding: 2px 3px 1px;
	font-size: $font-h3-size;
	text-align: center;
	min-width: .7em;
	line-height: 1em;
	display: inline-block;
	border-radius: 2px;

	&:not(:last-of-type) {
		border-right: 0;
	}
}

.status-container {
	display: inline-block;
	white-space: nowrap;
	margin: 1px 3px 1px 0;

	&:last-child {
		margin: 0;
	}

	span {
		border-radius: 0;

		&:first-of-type {
			border-top-left-radius: 2px;
			border-bottom-left-radius: 2px;
		}

		&:last-of-type {
			border-top-right-radius: 2px;
			border-bottom-right-radius: 2px;
		}
	}

	.status-na-bg,
	.status-info-bg,
	.status-warning-bg,
	.status-average-bg,
	.status-high-bg,
	.status-disaster-bg {
		@extend %status;
		border: 1px solid rgba($font-color, .2);
		border-radius: 0;
	}
}

.status-green {
	color: $white;
	border: 1px solid darken(desaturate($alt-green, 10%), 20%);
	background-color: darken(desaturate($alt-green, 10%), 16%);
	@extend %status;
}

.status-red {
	color: $white;
	border: 1px solid darken(desaturate($alt-red, 10%), 9%);
	background-color: darken(desaturate($alt-red, 10%), 5%);
	@extend %status;
}

.status-grey {
	color: $form-disabled-font-color;
	background-color: $form-disabled-bg-color;
	border: 1px solid $form-disabled-border-color;
	@extend %status;
}

.status-dark-grey {
	border: 1px solid darken(desaturate($alt-blue-grey, 10%), 12%);
	background-color: darken(desaturate($alt-blue-grey, 10%), 8%);
	@extend %status;
}

.status-yellow {
	color: $white;
	border: 1px solid darken(desaturate($alt-yellow, 9%), 20%);
	background-color: darken(desaturate($alt-yellow, 9%), 18%);
	@extend %status;
}

.status-disabled-bg {
	color: $form-disabled-font-color;
	background-color: $form-disabled-bg-color;
	border: 1px solid rgba($font-color, .2);
	@extend %status;
}

.tag {
	display: inline-block;
	color: $font-selected-color;
	background-color: $ui-bg-selected-color;
	margin: 1px 3px 1px 0;
	padding: 2px 3px;
	line-height: 1em;
	max-width: 133px;
	vertical-align: middle;
	@extend %overflow-ellipsis;
	border-radius: 2px;

	a.link-action {
		color: inherit !important;
		border-bottom: none;

		&:hover {
			text-decoration: underline;
			border-bottom: none;
		}
	}

	&:last-child {
		margin: 0;
	}

	&.green-bg {
		color: darken($alt-green, 45%);
	}

	&.yellow-bg {
		color: darken($alt-yellow, 45%);
	}
}

.green-bg {
	background-color: $alt-green;
}

.red-bg {
	background-color: $alt-red;
}

.yellow-bg {
	background-color: $alt-yellow;
}

// Severity statuses.
@if $theme-name == 'blue' or $theme-name == 'dark' {
	td[class] {
		+ {
			td.na-bg,
			td.normal-bg,
			td.info-bg,
			td.average-bg,
			td.warning-bg,
			td.high-bg,
			td.disaster-bg {
				border-left: 1px dotted $table-border-color;
			}
		}
	}
}

@each $severity-type, $color in (
	na-bg: $alt-blue-grey,
	normal-bg: $alt-green,
	info-bg: $alt-dark-blue,
	average-bg: $alt-orange,
	warning-bg: $alt-yellow,
	high-bg: $alt-dark-orange,
	disaster-bg: $alt-red,
) {
	// Dynamically generated classes:
	//  .na-bg
	//  .normal-bg
	//  .info-bg
	//  .average-bg
	//  .warning-bg
	//  .high-bg
	//  .disaster-bg
	.#{$severity-type} {
		color: darken($color, 45%);
		position: relative;

		@if $severity-type == normal-bg {
			background-color: $color;

			a.link-action {
				color: darken($color, 45%);
			}
		}
		@else {
			a.link-action,
			input[type="radio"]:enabled:checked + label {
				color: darken($color, 45%);
			}
		}
	}

	// Dynamically generated classes:
	//  .log-na-bg
	//  .log-normal-bg
	//  .log-info-bg
	//  .log-average-bg
	//  .log-warning-bg
	//  .log-high-bg
	//  .log-disaster-bg
	.log-#{$severity-type} {
		color: darken($color, 45%);
		background-color: $color;
	}
}

.normal-bg input[type="radio"]:checked + label {
	background-color: darken($alt-green, 25%);
}

.na-bg,
.normal-bg,
.info-bg,
.average-bg,
.warning-bg,
.high-bg,
.disaster-bg {
	a {
		transition: none;
	}

	&.blink-hidden {
		background-color: transparent;

		a {
			color: $font-color;
		}
	}
}

.inactive-bg {
	color: darken($alt-red, 45%);
	background-color: $alt-red;
}

td.inactive-bg {
	@extend .inactive-bg;
}

// Filter checkboxes.
.table-forms-second-column {
	display: inline-block;
	width: 50%;
	min-width: 200px;
	text-align: right;

	.second-column-label {
		padding: 0 10px;
	}
}

// Event status colors.
.problem-unack-fg {
	color: $problem-unack-fg-color;
}

.problem-ack-fg {
	color: $problem-ack-fg-color;
}

.ok-unack-fg {
	color: $ok-unack-fg-color;
}

.ok-ack-fg {
	color: $ok-ack-fg-color;
}

%found-bg {
	background-color: $lighter-yellow;
}

// Plus/Add icon.
.plus-icon {
	display: inline-block;
	@extend %plus-icon;
}

%plus-icon {
	width: 2px;
	height: 8px;
	position: relative;

	&::after {
		content: '';
		width: 8px;
		height: 2px;
		top: 3px;
		left: -3px;
		position: absolute;
	}
}

// Preloader.
@keyframes is-loading-kf {
	to {
		transform: rotate(360deg);
	}
}

.is-loading {
	pointer-events: none;

	&::before {
		background-color: rgba($ui-bg-color, .8);
		content: 'loading'; // For screen-reader
		text-indent: 200%;  // For screen-reader, for IE 200% instead of 100%
		overflow: hidden;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 5; // More than z-index of .msg-*.
	}

	&::after {
		background-color: rgba($ui-bg-color, .8);
		border: 2px solid $preloader-color;
		border-bottom-color: $preloader-accent-color;
		border-radius: 50%;
		box-shadow: 0 0 0 7px rgba($ui-bg-color, .8);
		width: 20px;
		height: 20px;
		position: absolute;
		margin: auto;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		animation: is-loading-kf .6s infinite linear;
		z-index: 5; // More than z-index of .msg-*.
		content: '';
	}

	&.is-loading-fadein {
		&::before {
			opacity: 0;
			animation: fadein 2s ease-in .5s normal forwards;
		}

		&::after {
			opacity: 0;
			animation: fadein 2s ease-in .5s normal forwards, is-loading-kf .6s infinite linear;
		}

		&.delayed-15s {
			&::before,
			&::after {
				animation-delay: 15s;
			}
		}
	}
}

button {
	&.is-loading {
		position: relative;

		&::before {
			background: none;
		}

		&::after {
			box-shadow: none;
			background: none;
			border: 1px solid $preloader-disabled-color;
			border-bottom-color: $preloader-accent-color;
			width: 12px;
			height: 12px;
		}
	}
}

.link-action {
	&.is-loading {
		position: relative;
		color: transparent !important;
		border-bottom-color: transparent;

		&::after {
			box-shadow: none;
			background: none;
			border: 1px solid $preloader-disabled-color;
			border-bottom-color: $preloader-accent-color;
			width: 12px;
			height: 12px;
		}
	}
}

span {
	&.is-loading {
		position: relative;
		display: inline-block;
		min-width: 40px;
		min-height: 40px;
	}
}

.overlay-dialogue.modal .overlay-dialogue-body {
	&.is-loading {
		overflow: hidden;
	}
}

.menu-popup-preloader,
.hintbox-preloader {
	background: $preloader-bg-color;
	border: 1px solid $overlay-border-color;
	box-shadow: 0 4px 20px 0 $action-shadow-color;
	height: 128px;
	width: 128px;
	position: fixed;
	right: auto;
	bottom: auto;
	z-index: 1010;

	&::before {
		background: $preloader-bg-color;
	}
}

.hintbox-preloader {
	position: absolute;
}

$browser-logos: (
	chrome: 0 0,
	ff: -66px 0,
	ed: 0 -66px,
	opera: -66px -66px,
	safari: 0 -132px
);

%browser-logo-style {
	background: url($browser-sprite-path) no-repeat;
	width: 66px;
	height: 66px;
	margin: 0 auto;
	margin-bottom: 5px;
}

// Dynamically generated classes for the browser logo:
//  .browser-logo-chrome
//  .browser-logo-ff
//  .browser-logo-ed
//  .browser-logo-opera
//  .browser-logo-safari
@each $class, $bg-position in $browser-logos {
	.browser-logo-#{$class} {
		@extend %browser-logo-style;
		background-position: $bg-position;
	}
}

.browser-warning-container {
	margin-top: 5%;
	margin-left: auto;
	margin-right: auto;
	width: 766px;
	text-align: center;
	padding: 28px 28px 10px;
	@extend .table-forms-container;

	h2 {
		text-align: left;
	}

	p {
		margin: .7em 0;
		text-align: left;
	}

	li {
		display: inline-block;
		margin: 25px 20px;
	}
}

.browser-warning-footer {
	border-top: 1px solid $table-border-color;
	margin: 25px 0 0;
	padding: 10px 0 0;
	text-align: center;
}

// TODO: Legacy
%webkit-scrollbar {
	scrollbar-width: thin;

	&::-webkit-scrollbar {
		width: 9px;
	}

	&::-webkit-scrollbar-track {
		background-color: $scrollbar-track-color;
	}

	&::-webkit-scrollbar-thumb {
		background-color: $scrollbar-thumb-color;
		border: 1px solid darken($scrollbar-thumb-color, $scrollbar-thumb-color-darken);
	}
}

// TODO: Legacy
%webkit-hor-scrollbar {
	&::-webkit-scrollbar {
		height: 9px;
	}

	@extend %webkit-scrollbar;
}

%cursor-drag {
	cursor: move; // fallback if grab cursor is unsupported
	cursor: grab;
}

%cursor-dragging {
	cursor: move; // fallback if grabbing cursor is unsupported
	cursor: grabbing;
}

.cursor-dragging {
	@extend %cursor-dragging;
}

.cursor-move {
	cursor: move;
}

tr.cursor-move {
	td * {
		cursor: move;
	}
}

.cursor-pointer {
	cursor: pointer;
}

.overflow-ellipsis {
	table-layout: fixed;
	@extend %overflow-ellipsis;

	td {
		@extend %overflow-ellipsis;
	}

	th {
		@extend %overflow-ellipsis;

		a {
			@extend %overflow-ellipsis;
		}
	}
}

.rel-container {
	position: relative;
	display: inline-block;
	min-width: 16px;
	white-space: nowrap;

	.icon-info {
		margin-right: 5px;

		&:only-of-type {
			margin-right: 0;
		}

		&:last-child {
			margin-right: 0;
		}
		&.status-green {
			border-right: 1px solid darken(desaturate($alt-green, 10%), 20%);
		}
	}
}

main {
	.server-name {
		float: right;
		margin: 10px;
		color: $font-alt-color;
	}
}

.uppercase {
	text-transform: $font-transform;
}

.flickerfreescreen {
	position: relative;
	overflow: hidden;

	&.is-loading {
		min-height: 64px;
	}
}

.graph-wrapper {
	display: inline;
}

// Dashboard widget - URL.
.widget-url {
	display: block;
}

// Analog Clock.
.clock {
	display: flex;
	justify-content: center;
	padding: 0 10px;
	height: 100%;
}

.clock-svg {
	flex-grow: 1;
}

.time-zone {
	margin: 0 0 .5em;
	white-space: nowrap;
}

.local-clock {
	margin: .5em 0 0;
	white-space: nowrap;
}

.clock-face {
	fill: $clock-face-color;
}

.clock-hand {
	fill: $clock-hand-color;
}

.clock-hand-sec {
	fill: $clock-hand-sec-color;
}

.clock-lines {
	fill: $clock-lines-color;
}

svg {
	overflow: hidden;
}

.sysmap {
	height: 100%;
	width: auto;
	padding: 0 10px;
	text-align: center;
}

.sysmap-scroll-container {
	overflow-x: auto;
	overflow-y: hidden;
	position: relative;
	width: calc(100% - 20px);
	border: 10px solid $ui-bg-color;
	background: $ui-bg-color;
	display: block;
	margin-top: 4px;

	.map-container {
		display: table;
	}

	.flickerfreescreen {
		display: inline-block;
	}

	.table-forms-container {
		display: table;
		margin: 0;
		padding: 0;
		border: 0;
	}
}

.sysmap-widget-container {
	overflow: hidden;
	height: 100%;
	display: flex;

	svg {
		flex-grow: 1;
	}
}

.lld-overrides-operations-table,
.confirmation-msg {
	white-space: normal;
	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;
		padding-top: 10px;
	}
}

.color-preview-box {
	height: 24px;
	width: 24px;
	float: left;
	margin-right: 10px;
	cursor: pointer;
	border: 0;
	border-radius: 0;
}

.list-vertical-accordion {
	display: table;
	padding-left: 15px;
	width: calc(100% - 15px);

	.list-accordion-item {
		display: table-row;

		.btn-remove {
			position: relative;
			right: -10px;
			top: 3px;
		}
	}

	.list-accordion-item-head,
	.list-accordion-item-body {
		padding-bottom: 2px;
	}

	.list-accordion-item-closed {
		.multiselect {
			height: 24px;
			overflow: hidden;
		}

		.list-accordion-item-head {
			margin-bottom: 5px;
		}

		.list-accordion-item-body {
			display: none;
		}
	}
}

.display-none {
	display: none;
}

.visibility-hidden {
	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;
	$action-width: 120px;

	display: block;
	max-width: 930px;
	min-width: 800px;
	position: relative;

	> li {
		display: block;
		position: relative;
	}

	.drag-icon {
		position: absolute;
		left: 0;
		top: 5px;
	}

	.list-numbered-item::before {
		content: counter(line) ':';
		flex: 0 0 15px;
		max-width: 15px;
		line-height: 24px;
		padding-right: 5px;
	}

	input[type=text],
	select {
		width: 100%;
		min-width: 0; // https://stackoverflow.com/a/43361500
	}

	.btn-link {
		&:not(:last-of-type) {
			margin-right: 10px;
		}
	}

	.preprocessing-list-head,
	.preprocessing-list-foot,
	.preprocessing-step,
	.on-fail-options,
	.step-name,
	.step-parameters,
	.step-on-fail,
	.step-action {
		display: flex;
		align-items: center;
		box-sizing: border-box;
	}

	.step-name,
	.step-parameters,
	.step-on-fail,
	.step-action,
	.on-fail-options > label,
	.on-fail-options > .radio-segmented {
		padding: 5px 5px 5px 0;
	}

	.step-name {
		flex: 0 0 $name-width;
		max-width: $name-width;
	}

	.step-parameters {
		flex: 1;

		z-select {
			flex: 0 0 auto;
		}

		> input[type=text],
		z-select {
			&:not(:last-child) {
				margin-right: 5px;
			}
		}
	}

	.step-on-fail {
		flex: 0 0 $on-fail-width;
		max-width: $on-fail-width;
		justify-content: center;
		text-align: center;
	}

	.step-action {
		flex: 0 0 $action-width;
		max-width: $action-width;
		padding-right: 0;
	}

	.on-fail-options {
		padding-right: $on-fail-width + $action-width + 5px;
		margin-bottom: 5px;

		> label {
			padding-left: 30px;
		}

		input[type=text] {
			flex: 1;
		}
	}

	.preprocessing-list-head {
		color: $font-alt-color;
		line-height: 14px;

		.step-name {
			padding-left: 30px;
		}
	}

	.preprocessing-list-item {
		.step-name {
			padding-left: 10px;
		}
	}

	.preprocessing-list-foot {
		justify-content: space-between;

		.step-action {
			height: 24px;

			+ .step-action:last-child {
				margin-left: auto;
				justify-self: flex-end;
			}
		}
	}
}

.navtree {
	$max_depth: 10;

	@keyframes fadein {
		from {
			opacity: 0;
		}
		to {
			opacity: 1;
		}
	}

	.tree {
		width: 100%;
		height: 100%;

		.tree-list {
			list-style: none;

			&.root > .tree-item > .tree-row > .content > .margin-lvl {
				flex: 0 0 15px;
			}

			> .tree-item.ui-sortable-helper .content {
				padding-left: 5px;
			}

			@for $i from 0 through $max_depth {
				&[data-depth="#{$i}"] > .tree-item {
					> .tree-row > .content > .margin-lvl {
						flex: 0 0 ($i * 15px + 10px);
					}
					&.ui-sortable-helper {
						margin-left: ($i * 15px + 10px);

						> .tree-row > .content > .margin-lvl {
							display: none;
						}
					}
				}
			}

			&[data-depth] .ui-sortable-helper {
				> .tree-row > .content > .margin-lvl {
					flex: 0 0 15px;
				}

				@for $i from 1 through $max_depth - 1 {
					$class_tree_list: '.tree-list';
					@for $j from 1 through $i {
						@if $j != 1 {
							$class_tree_list: $class_tree_list + ' .tree-list';
						}
					}
					#{$class_tree_list} > li > .tree-row > .content > .margin-lvl {
						flex: 0 0 ($i * 15px + 15px);
					}
				}
			}
		}

		.tree-item {
			> .tree-row {
				width: 100%;
				min-width: 320px;
				border-bottom: 1px solid $table-border-color;
				padding: 8px 0;

				&:hover {
					background-color: $ui-hover-color;
				}

				> .problem-icon-list {
					float: right;
					padding-left: 10px;
					margin-right: 10px;
				}

				> .tools {
					float: right;
					position: relative;
					padding-left: 10px;
					margin-right: 10px;
					display: flex;
					width: 85px;

					.btn-add,
					.btn-edit,
					.btn-import,
					.btn-remove {
						&:focus {
							box-shadow: none;
						}
					}
				}

				> .content {
					display: flex;
					height: 20px;
					align-items: center;

					> .arrow {
						flex: 0 0 15px;
						text-align: center;
						margin: 2px 2px 0 -5px;

						> .treeview {
							display: none;
						}
					}

					> .drag-icon {
						min-width: 24px;
					}

					> .item-name {
						flex: 0 1 auto;
						white-space: nowrap;
						overflow: hidden;
						margin-right: 5px;
						text-overflow: ellipsis;
						line-height: 1.5;
					}
				}
			}

			&.is-parent {
				> .tree-row {
					> .content {
						> .arrow {
							> .treeview {
								display: block;
							}
						}
					}
				}
			}

			&.selected {
				> .tree-row {
					@extend %found-bg;

					&:hover {
						@extend %found-bg;
					}
				}
			}

			&.no-map,
			&.inaccessible {
				> .tree-row {
					> .content {
						> .item-name {
							color: $form-border-color;
						}
					}
				}
			}

			&.ui-sortable-helper {
				background: $ui-sortable-helper-background-color;
				border-color: $ui-sortable-helper-border-color;
				border-width: 1px;
				border-style: solid;

				.tools {
					display: none;
				}
			}

			&.opened > ul {
				display: block;
			}

			&.closed > ul {
				display: none;
			}

			.sortable-error {
				border-color: transparent;
				background: rgba($red, .2);
			}
		}

		.highlighted-parent > .tree-row {
			background: $ui-highlighted-parent-background-color;
		}

		.placeholder {
			background-color: $ui-placeholder-background-color;
			animation: fadein .5s;
		}
	}
}

.problem-icon-link,
.problem-icon-list {
	display: inline-flex;
	margin: 1px 0;

	.problem-icon-list-item {
		color: $btn-font-color;
		font-size: 12px;
		line-height: 1;
		padding: 3px 5px 2px;
	}
}

.problem-icon-link {
	overflow: hidden;
	border-radius: 3px;

	&:link,
	&:hover,
	&:focus {
		border-bottom: none;
	}

	&:focus {
		box-shadow: 0 0 0 2px rgba($blue, .35);
	}
}

.problem-icon-list {
	.problem-icon-list-item {
		border-radius: 3px;

		&:not(:last-of-type) {
			margin-right: 5px;
		}
	}
}

:-ms-input-placeholder {
	color: $input-placeholder-color !important;
}

::-ms-input-placeholder {
	color: $input-placeholder-color;
}

::placeholder {
	color: $input-placeholder-color;
}

.icon-action-command,
.icon-action-close,
.icon-action-msg,
.icon-action-msgs,
.icon-action-severity-up,
.icon-action-severity-down,
.icon-action-severity-changed,
.icon-action-message,
.icon-action-ack,
.icon-action-unack,
.icon-invisible,
.icon-problem-generated,
.icon-problem-recovery,
.icon-actions-number-gray,
.icon-actions-number-yellow,
.icon-actions-number-red,
.icon-description,
.icon-user,
.icon-user-group {
	display: inline-block;
	position: relative;
	height: 18px;
	width: 18px;
	margin: 0 5px 0 0;
	top: 0;
	bottom: 0;
	vertical-align: bottom;

	&::before {
		content: '';
		display: inline-block;
		position: absolute;
		top: 0;
		left: 0;
		width: 18px;
		height: 18px;
		background-image: url($sprite-path);
		background-repeat: no-repeat;
	}
}

.icon-invisible {
	&:link,
	&:hover,
	&:focus {
		border-bottom: none;
	}

	&:focus {
		box-shadow: 0 0 0 2px $btn-border-focus-color;
		border-radius: 2px;
	}
}

button {
	&.icon-action-command,
	&.icon-action-close,
	&.icon-action-msg,
	&.icon-action-msgs,
	&.icon-action-severity-up,
	&.icon-action-severity-down,
	&.icon-action-severity-changed,
	&.icon-action-message,
	&.icon-action-ack,
	&.icon-problem-generated,
	&.icon-problem-recovery,
	&.icon-actions-number-gray,
	&.icon-actions-number-yellow,
	&.icon-actions-number-red {
		background: none;
		border: none;
		padding: 0px;
		margin: 0px;
		margin-right: 5px;
		min-height: 0px;
		&::after {
			left: 0px;
			top: 4px;
		}
	}
}

[data-count][class*='icon-']::after,
.icon-description::after {
	position: absolute;
	top: -2px;
	content: attr(data-count);
	text-align: center;
	font-size: 9px;
	letter-spacing: -.25px;
	line-height: 18px;
	width: 18px;
}

.icon-action-command::before {
	background-position: -249px -245px;
}

.icon-action-close::before {
	background-position: -224px -245px;
}

.icon-action-msg::before {
	background-position: -299px -245px;
}

.icon-action-severity-up::before {
	background-position: -349px -245px;
}

.icon-action-severity-down::before {
	background-position: -374px -245px;
}

.icon-action-severity-changed::before {
	background-position: -399px -245px;
}

.icon-action-message::before {
	background-position: -199px -245px;
}

.icon-action-ack::before {
	background-position: -323px -245px;
}

.icon-action-unack::before {
	background-position: -173px -245px;
}

.icon-invisible::before {
	background-position: -89px -803px;
}

.icon-problem-generated::before {
	background-position: -449px -245px;
}

.icon-problem-recovery::before {
	background-position: -424px -245px;
}

.icon-action-msgs {
	&[data-count]::after {
		color: $ui-bg-color;
	}

	&::before {
		background-position: -474px -245px;
	}
}

.icon-actions-number-gray {
	&[data-count]::after {
		color: $font-color;
	}

	&::before {
		background-position: -499px -245px;
	}
}

.icon-actions-number-yellow {
	&[data-count]::after {
		color: $font-color;
	}

	&::before {
		background-position: -549px -245px;
	}
}

.icon-actions-number-red {
	&[data-count]::after {
		color: $font-color;
	}

	&::before {
		background-position: -524px -245px;
	}
}

.icon-description {
	margin: 0 0 -5px 5px;
	vertical-align: baseline;
	border-radius: 2px;

	&:link,
	&:hover,
	&:focus {
		border-bottom: none;
	}

	&:focus {
		box-shadow: 0 0 0 2px $btn-border-focus-color;
	}

	&::after {
		content: '?';
		color: $ui-bg-color;
	}

	&::before {
		background-position: -474px -245px;
	}
}

.icon-user,
.icon-user-group {
	height: 16px;
	width: 16px;
	vertical-align: top;

	&::before {
		height: inherit;
		width: inherit;
	}
}

.icon-user {
	&::before {
		background-position: -339px -46px;
	}
}

.icon-user-group {
	&::before {
		background-position: -339px -8px;
	}
}

.icon-help-hint {
	display: inline-block;
	height: 14px;
	width: 14px;
	margin: 0 0 0 5px;
	border-radius: 50%;
	background-color: $ui-bg-selected-color;
	position: relative;
	line-height: 1.4;

	&::after {
		content: '?';
		position: relative;
		top: -2px;
		left: -4px;
		font-size: 10px;
		font-weight: bold;
		color: $btn-font-color;
	}

	&:link,
	&:hover,
	&:focus {
		border-bottom: none;
	}

	&:focus {
		box-shadow: 0 0 0 2px $btn-border-focus-color;
	}
}

#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;
	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 */

		&:focus {
			outline: none;
		}

		/* Special styling for WebKit/Blink */
		&::-webkit-slider-thumb,
		&::-moz-range-thumb {
			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;
		}

		&::-webkit-slider-runnable-track {
			height: $range-thumb-size;
			opacity: 0;
		}
	}

	input[type=text] {
		width: $range-input-width;
	}

	> div {
		position: relative;
		width: calc(100% - 10px - #{$range-input-width});
		margin-right: $range-thumb-size;
	}

	.range-control-track,
	.range-control-progress {
		position: absolute;
		top: 50%;
		left: 0;
		height: $range-track-height;
		margin-top: -$range-track-height / 2;
		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%;
		width: $range-thumb-size;
		height: $range-thumb-size;
		margin-top: -$range-thumb-size / 2;
		margin-left: -$range-thumb-size / 2;
		background: $range-thumb-color;
		border-radius: 50%;
	}

	&.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;
		top: 50%;
		display: flex;
		width: 100%;
		margin-top: -$range-track-height / 2;

		option {
			flex: 1 0 0;
			height: $range-track-height;
			padding: 0;
			font-size: 0;
			border-left: 1px solid $body-bg-color;
		}
	}
}

.graph-legend {
	text-align: left;
	white-space: nowrap;
	text-overflow: ellipsis;
	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;
}

.preprocessing-test-results {
	td {
		vertical-align: top !important;
	}

	.rel-container {
		top: 4px;
		margin-left: 3px;
	}
}

#preprocessing-test-form {
	.table-forms-separator {
		margin-top: -2px;
	}
}

.totals-list {
	&:not(.list-table) {
		display: flex;
		height: 100%;
	}

	> div {
		flex: 1;
		align-items: center;
		display: flex;
		line-height: 18px;
		overflow: hidden;
		padding: 0 10px;
		position: relative;
	}

	.count {
		font-size: 16px;
	}

	&.totals-list-horizontal {
		> div {
			flex-direction: column;
			justify-content: center;
			min-width: 55px;
			text-align: center;
		}
	}

	&.totals-list-vertical {
		flex-direction: column;

		> div {
			min-height: 21px;
			padding-top: 3px;
		}

		.count {
			margin-right: 5px;
		}
	}
}

// Widget "Host availability".
.host-avail-widget {
	td:not(:first-child) {
		border-left: 1px dotted $table-border-color;

	}

	.host-avail-true {
		background: $host-avail-true-bg-color;
	}

	.host-avail-false {
		background: $host-avail-false-bg-color;
	}

	.host-avail-unknown {
		background: $host-avail-unknown-bg-color;
	}

	.host-avail-total {
		background: $host-avail-total-bg-color;
	}
}

// Input group

.macro-input-group {
	position: relative;
	display: flex;
	align-items: stretch;
	width: 100%;

	* {
		box-sizing: border-box;
	}

	input,
	textarea {
		flex: 1;
		border-right: 0;

		&:focus,
		&:active {
			+ .btn-undo {
				border-top-color: $form-border-focus-color;
				border-bottom-color: $form-border-focus-color;
			}
		}
	}

	button {
		position: relative;

		&.btn-change {
			border-radius: 0;

			&:disabled {
				display: none;
			}
		}

		&.btn-undo {
			display: none;
			width: 24px;
			border-left: 0;
			border-right: 0;
			border-top: 1px solid $form-border-color;
			border-bottom: 1px solid $form-border-color;
			border-radius: 0;
			background-color: $form-bg-color;
			transition: border-color .2s ease-out, box-shadow .2s ease-out;

			&::before {
				position: absolute;
				top: 0;
				left: 0;
				display: block;
				width: 22px;
				height: 22px;
				content: '';
				background: url($sprite-path) no-repeat -119px -474px;
			}

			&.is-focused {
				border-top: 1px solid $form-border-focus-color;
				border-bottom: 1px solid $form-border-focus-color;
			}

			&:hover,
			&:focus,
			&:active {
				border-top: 1px solid $form-border-focus-color;
				border-bottom: 1px solid $form-border-focus-color;
				@include btn-hover-active($btn-font-color, $btn-bg-color);

				&::before {
					background-position: -431px -474px;
				}
			}
		}

		&.btn-dropdown-toggle {
			border-color: $form-border-focus-color;
			border-top-left-radius: 0;
			border-bottom-left-radius: 0;

			&:disabled {
				@extend %form-disabled;
			}
		}
	}
}

.input-secret {
	position: relative;
	display: flex;
	flex: 1;

	input {
		flex: 1;
	}

	button {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		opacity: 0;

		&:enabled {
			&:hover,
			&:focus,
			&:active {
				opacity: 1;
				animation: fadein .2s;
			}
		}
	}
}

// Dropdown

.btn-dropdown-container {
	display: flex;
}

.icon-text {
	&::before {
		background: url($sprite-path) no-repeat -87px -474px;
	}

	&:not(.highlighted):enabled {
		&:hover,
		&:focus,
		&:active,
		&[aria-expanded="true"] {
			&::before {
				background-position: -399px -474px;
			}
		}
	}
}

.icon-secret {
	&::before {
		background: url($sprite-path) no-repeat -87px -510px;
	}

	&:not(.highlighted):enabled {
		&:hover,
		&:focus,
		&:active,
		&[aria-expanded="true"] {
			&::before {
				background-position: -399px -510px;
			}
		}
	}
}

.icon-invisible.menu-popup-item,
.icon-invisible.btn-dropdown-toggle {
	width: 100%;

	&::before {
		background: url($sprite-path) no-repeat -87px -800px;
	}

	&:not(.highlighted):enabled {
		&:hover,
		&:focus,
		&:active,
		&[aria-expanded="true"] {
			&::before {
				background-position: -399px -800px;
			}
		}
	}
}
.icon-invisible.btn-dropdown-toggle {
	margin: 0;
}

.btn-split {
	display: inline-block;
	position: relative;
	margin-right: 10px;

	li {
		display: inline-block;

		button {
			margin: 0 -1px 0 0;
			border-radius: 0;
		}

		&:first-child button {
			border-radius: 2px 0 0 2px;
		}

		&:last-child button {
			border-radius: 0 2px 2px 0;
		}

		&:only-child button {
			border-radius: 2px;
		}
	}
}

.btn-toggle-chevron {
	position: relative;

	&[aria-expanded="true"] {
		@include btn-hover-active($btn-font-color, $btn-bg-color);
	}

	&::after {
		content: '';
		position: absolute;
		right: 8px;
		top: calc(50% - 3px);
		width: 5px;
		height: 5px;
		border-top: 1px solid $btn-alt-font-color;
		border-right: 1px solid $btn-alt-font-color;
		transform: rotate(135deg) translate(-1px,1px);
		transition: transform .3s;
	}

	&[disabled] {
		&::after {
			border-top-color: $btn-disabled-font-color;
			border-right-color: $btn-disabled-font-color;
		}
	}

	&:enabled {
		&:active,
		&[aria-expanded="true"] {
			&::after {
				transform: rotate(315deg) translate(-1px,1px);
			}
		}

		&:hover,
		&:focus,
		&:active,
		&[aria-expanded="true"] {
			&::after {
				border-top-color:  $btn-font-color;
				border-right-color: $btn-font-color;
			}
		}
	}
}

.btn-dropdown-toggle {
	white-space: nowrap;
	overflow: hidden;

	&[class*='icon-'] {
		padding-left: 22px;

		&::before {
			position: absolute;
			top: 0;
			left: 0;
			display: block;
			width: 22px;
			height: 22px;
			content: '';
		}

		&::after {
			top: 6px;
			right: 2px;
		}
	}

	&:not(:empty) {
		padding-right: 22px;
	}

	&::after {
		position: absolute;
		top: 7px;
		right: 6px;
		width: 10px;
		height: 10px;
		content: '';
		background: url($sprite-path) no-repeat -547px -431px;
	}

	&:enabled {
		&:hover,
		&:focus,
		&:active {
			&::after {
				background-position: -604px -431px;
			}
		}
	}

	&[aria-expanded="true"] {
		@include btn-hover-active($btn-font-color, $btn-bg-color);

		&::after {
			background: url($sprite-path) no-repeat -604px -503px;
		}

		&:hover,
		&:focus,
		&:active {
			&::after {
				background: url($sprite-path) no-repeat -604px -503px;
			}
		}
	}
}

// Macros mass update tab.

.checkbox-block {
	margin: 10px 0;
}

#tbl_macros.massupdate-remove {
	th,
	td {
		display: none;
	}

	th:nth-child(1),
	td:nth-child(1),
	td.nowrap {
		display: table-cell;
	}
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
	/* for IE11 only. Fixed cell height if table has 100% height */
	.host-avail-widget {
		td {
			height: 100%;
		}
	}
}

// HOST INTERFACES

.table-forms-td-right {
	.interfaces {
		margin-top: 5px;
	}
}

.interfaces {
	display: grid;
	grid-template-columns: 26px repeat(7, max-content);
	margin-bottom: 5px;
	line-height: 24px;

	.interface-container {
		display: contents;

		&.interface-container-header {
			.interface-cell {
				padding: 0 5px 0 0;
				color: $font-alt-color;
			}

			.interface-cell-action {
				grid-column: span 2;
			}
		}

		&:not(.interface-container-header):not(:empty) ~ .interface-container:not(:empty) :first-child {
			.interface-cell:not(.interface-cell-details) {
				padding-top: 10px;
				margin-top: 5px;
				border-top: 1px solid $form-border-color;
			}
		}
	}

	.interface-row {
		display: contents;

		&[data-type="2"] {
			.interface-btn-toggle {
				@extend %btn-widget-defaults;

				display: inline-block;
				width: 24px;
				height: 24px;
				background: url($sprite-path) no-repeat -6px -690px;
			}

			.list-accordion-item-body {
				display: none;
				padding-top: 0;
			}

			&.list-accordion-item-opened {
				.interface-btn-toggle {
					background: url($sprite-path) no-repeat -6px -655px;
				}

				.list-accordion-item-body {
					display: block;
				}
			}
		}
	}

	.interface-cell {
		padding: 5px 5px 5px 0;

		&.interface-cell-details {
			display: none;
			grid-column: 1 / -1;
		}
	}

	.interface-btn-toggle {
		display: none;
		vertical-align: top;
	}

	.no-interface {
		grid-column: 1 / -1;
		color: $font-alt-color;
	}
}

// Popup with debug data of request processing to Zabbix server.
.debug-modal {
	&.overlay-dialogue.modal {
		.overlay-dialogue-body {
			overflow-x: auto;

			&::-webkit-scrollbar {
				height: 9px;
			}
		}
	}

	.logitems {
		pre {
			white-space: nowrap;
		}
	}

	.logtotalms {
		color: $font-alt-color;
		float: left;
		line-height: 24px;
	}
}

// Table column styles
#itemsTable {
	.table-col-handle { width: 10px; }
	.table-col-no { width: 20px; }
	.table-col-name-normal { width: 285px; }
	.table-col-name { width: 365px; }
	.table-col-type { width: 85px; }
	.table-col-function { width: 85px; }
	.table-col-draw-style { width: 85px; }
	.table-col-y-axis-side { width: 85px; }
	.table-col-colour { width: 55px; }
	.table-col-action { width: 55px; }
}

z-select,
.z-select {
	&.z-select-host-interface {
		.description:not(:empty) {
			display: block;
			margin-top: 5px;
			color: $input-placeholder-color;
		}

		&[disabled],
		li[disabled] {
			.description:not(:empty) {
				color: $form-disabled-font-color;
			}
		}
	}
}

.multiselect-description-container {
	display: flex;
	align-items: center;

	> .multiselect-control {
		margin-right: 5px;
	}
}

// Users permissions tab.
.rules-status-container {
	> span {
		text-transform: none;
		margin: 3px 3px 3px 0;

		&:last-of-type {
			margin-right: 0;
		}
	}

	> .status-green:not(:last-of-type) {
		border-right: 1px solid darken(desaturate($alt-green, 10%), 20%);
	}

	> .status-grey:not(:last-of-type) {
		border-right: 1px solid $form-disabled-border-color;
	}
}

// Used in form lists to separate input elements on sections.
.input-section-header {
	padding-top: 10px;
}

.modal-popup-preprocessing {
	.preprocessing-list .step-name {
		flex: 0 0 180px;
	}

	.preprocessing-list {
		min-width: unset;
		max-width: unset;
	}
}

.modal-popup-medium,
.modal-popup-large,
.modal-popup-static,
.modal-popup-preprocessing {
	.table-forms-container {
		border: none;
	}

	.ui-tabs-nav {
		position: sticky;
		top: 0;
		background: $header-bg-color;
		z-index: 3;
	}

	.textarea-flexible {
		max-height: 200px;
		overflow-y: auto;
	}
}

.global-macro-table,
.host-macros-table {
	.table-col-value,
	.table-col-template-value {
		width: 300px;
	}
}

.inherited-macros-table {
	.table-col-value,
	.table-col-parent-value,
	.table-col-template-value,
	.table-col-global-value {
		width: 300px;
	}
}

.active-readonly {
	&[readonly] {
		color: $font-color;
		background-color: $form-bg-color !important;
		border-color: $form-border-color;
	}
}

.valuemap-list-table {
	tbody {
		td {
			border-bottom: 1px solid $table-border-color;
		}

		tr:first-child td {
			border-top: 1px solid $table-border-color;
		}
	}
}

.mappings-table {
	display: grid;
	grid-template-columns: auto auto minmax(auto, 100%);

	& > div {
		text-align: left;
	}

	// For every 3th starting from 2nd child.
	& > div:nth-child(3n + 2) {
		text-align: center;
		padding: 0 10px;
	}
}

.valuemap-checkbox {
	margin-top: 10px;
}

.overlay-dialogue {
	.valuemap-list-table {
		td {
			vertical-align: top;
		}
	}
}

.subscriptions-table {

	th {
		color: $font-alt-color;
	}
}

.import-compare {
	display: flex;
	max-height: calc(100vh - 220px);

	.toc {
		flex: 20%;
		overflow-y: auto;
		overflow-x: hidden;
	}

	.diff {
		flex: 80%;
		margin-left: 5px;
		overflow: auto;
		border: 1px dashed $form-border-color;
	}

	.toc,
	.diff {
		@extend %webkit-scrollbar;
	}
}

.list-dashed {
	li {
		margin-left: 1em;

		&::before {
			content: '\2013';
			float: left;
			margin-left: -1em;
		}
	}
}

.overlay-dialogue #host-form {
	#tagsFormList,
	#macrosFormList,
	#valuemap-formlist {
		.table-forms-td-left {
			display: none;
		}

		.table-forms-td-right {
			width: 100%;
		}
	}
}

.linked-templates {
	> .table-forms {
		margin-bottom: 5px;
		line-height: 24px;

		td, th {
			padding: 0 5px 0 0;

			&:last-child {
				width: 0;
				padding-right: 0;
			}
		}
	}
}

// Report -> Audit details styles.

.audit-details-popup-wrapper {
	margin: 5px 10px;

	.audit-details-popup-textarea {
		width: 100%;
		height: 135px;
	}
}

.audit-details-wrapper {
	display: flex;
	justify-content: space-between;

	.audit-show-details-btn-wrapper {
		margin: 0 5px 0 5px;
	}
}

// Geomap widget.
.geomap-filter-button,
.navigate-home-button {
	background-image: url($sprite-path);
	background-repeat: no-repeat;
}
.geomap-filter-button {
	background-position: -243px -543px !important;
}
.navigate-home-button {
	background-position: -117px -506px !important;
}
.geomap-filter {
	border: 1px solid $overlay-border-color;
	background-color: $ui-bg-color;
	padding: 5px 20px 5px 10px;
	position: absolute;
	margin-right: -2px;
	margin-top: 5px;
	display: none;
	right: 0;
}
.geomap-filter.collapsed {
	display: block;
}
.geomap-filter li {
	width: calc(100% + 20px);
}
.geomap-filter label {
	white-space: nowrap;
}

.marker-cluster {
	background: none;
}
.marker-cluster div {
	text-align: center;
	border-radius: 50%;
	margin-left: 5px;
	margin-top: 5px;
	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;
}
.leaflet-control {
	&.disabled {
		background-color: #ffffff;
		opacity: 1;

		.geomap-filter-button {
			cursor: default;
			opacity: .4;
		}
	}
}
.leaflet-container {
	height: 100%;
	z-index: 1;
}
