@import url('assets.css');
/*Plates*/
.widget-container {
	display: inline-flex;
	width: 100%;
	justify-content: space-between;
	margin-bottom: 1.5em;
	padding-left: 2em;
	padding-right: 2em;
}

	.widget-container > .widget-plate {
		display: inline-flex;
		width: 300px;
		height: auto;
		border: 1px solid;
		padding: 20px;
	}

		.widget-container > .widget-plate > .widget-content {
			margin-left: 1em;
			color: var(--black-01);
			font-family: 'MuseoSans';
			height: max-content;
		}

			.widget-container > .widget-plate > .widget-content > p {
				margin: 0;
			}

			.widget-container > .widget-plate > .widget-content > .widget-value {
				font-size: 23px;
				font-weight: 700;
			}

			.widget-container > .widget-plate > .widget-content > .widget-comment {
				font-size: 16px;
				font-weight: 700;
				padding-bottom: 1px;
				line-height: 1.3;
			}

.widget-plate.widget-red {
	border-color: var(--strawberry);
}

.widget-plate.widget-green {
	border-color: var(--green-widget);
}

.widget-plate.widget-blue {
	border-color: var(--blue-widget);
}

.widget-logo.widget-icon-warning {
	content: url("../images/vector-icons/widget_warning.svg");
	height: 100%;
}

.widget-logo.widget-icon-ok {
	content: url("../images/vector-icons/widget_ok.svg");
	height: 100%;
}

.widget-logo.widget-icon-shield {
	content: url("../images/vector-icons/widget_shield.svg");
	height: 100%;
}

.widget-container .widget-logo {
	width: 48px;
	height: 48px;
}

/*filters*/
.widget-filters {
	margin-bottom: 1em;
}

	.widget-filters .widget-filter-header > h4 {
		margin-bottom: 0;
	}

.widget-filter-body > p {
	font-size: 12px;
	margin-left: 32px;
	margin-bottom: 15px;
}

.widget-filter-container {
	display: inline-flex;
	flex-direction: row;
	width: 100%;
	justify-content: space-between;
	font-size: 14px;
	font-weight: 500;
	font-family: 'MuseoSans';
	padding-left: 2em;
	padding-right: 2em;
}

	.widget-filter-container widget {
		display: inline-flex;
		flex-direction: column;
		justify-content: space-between;
		flex-grow: 1;
		flex-basis: min-content;
		max-width: 30%;
	}

		.widget-filter-container widget > p.widget-title {
			padding-left: 7px;
			font-weight: 500;
			margin-bottom: 9px;
			padding-right: 2em;
			margin-top: auto;
			/*white-space: nowrap;
			overflow: hidden; 
			text-overflow: ellipsis;*/ 
		}

	.widget-filter-container .widget-filters {
		display: inline-flex;
		flex-direction: column;
		margin-right: auto;
		width: 100%;
	}

		.widget-filter-container .widget-filters > row {
			display: inline-flex;
			align-items: flex-start;
			flex-direction: row;
			height: 42px;
			min-width: 245px;
			cursor: pointer;
			border-radius: 2px;
			/*margin-top: 2px;
			margin-bottom: 2px;*/
		}

			.widget-filter-container .widget-filters > row.selected,
			.widget-filter-container .widget-filters > row.selected:hover {
				background-color: var(--dark-sky-blue);
				color: var(--white);
			}

			.widget-filter-container .widget-filters > row:hover {
				background-color: var(--light-blue-02);
			}

			.widget-filter-container .widget-filters > row > * {

				margin-left: 0.5em;
				margin-right: 0.5em;
				height: 100%;
				display: flex;
				flex-direction: column;
				justify-content: center;
			}

			.widget-filter-container .widget-filters > row > status {
				width: fit-content;
				margin-right: auto;
				align-self: start;
				text-decoration-line: underline;
				color: var(--blue-widget);
			}

			.widget-filter-container .widget-filters > row.selected > status {
				color: var(--white);
			}

			.widget-filter-container .widget-filters > row > bar {
				width: 60px;
				min-width: 60px;
				align-self: end;
			}

			.widget-filter-container .widget-filters > row > value {
				width: 35px;
				min-width: 35px;
				align-self: end;
			}

			.widget-filter-container .widget-filters > row > cancel {
				width: 20px;
				min-width: 20px;
				align-self: end;
				text-align: center;
			}

				.widget-filter-container .widget-filters > row > cancel > a {
					display: none;
				}

			.widget-filter-container .widget-filters > row.selected > cancel > a {
				display: block;
				color: var(--white);
				font-weight: 700;
			}

			.widget-filter-container .widget-filters > row > bar > .bar {
				height: 7px;
			}

				.widget-filter-container .widget-filters > row > bar > .bar.gray {
					background-color: var(--gray-01) !important;
					width: 1px !important;
				}

			.widget-filter-container .widget-filters > row.status-critical > bar > .bar {
				background-color: var(--red-widget);
			}

			.widget-filter-container .widget-filters > row.status-warning > bar > .bar {
				background-color: var(--orange-widget);
			}

			.widget-filter-container .widget-filters > row.status-ok > bar > .bar {
				background-color: var(--green-widget);
			}

@media screen and (max-width: 1100px) {
	.widget-container > .widget-plate {
		width: 100%;
		height: auto;
		border-width: 1px;
		margin: 1px;
	}

		.widget-container > .widget-plate > .widget-content > .widget-value {
			font-size: 18px;
			font-weight: 700;
		}

		.widget-container > .widget-plate > .widget-content > .widget-comment {
			font-size: 12px;
			font-weight: 700;
		}

	.widget-filter-container .widget-filters > row {
		height: auto;
		min-height: 30px;
	}
}

@media screen and (max-width: 768px) {

	.widget-container {
		padding-left: 0;
		padding-right: 0;
		display: none;
	}

	.widget-container > .widget-plate {
		width: 100px;
		height: 36px;
		padding: 5px;
		transform: none;
	}

	.widget-container .widget-logo {
		width: 24px;
		height: 24px;
	}

	.widget-container > .widget-plate > .widget-content > .widget-value {
		font-size: 16px;
		font-weight: 700;
	}

	.widget-container > .widget-plate > .widget-content > .widget-comment {
		display: none;
	}

	.widget-filter-container {
		flex-direction: column;
		padding-left: 0;
		padding-right: 0;
	}

	.widget-filter-container widget {
		max-width: 350px;
	}

	.widget-filter-container .widget-filters{
		width: 100%;
	}
		.widget-filter-container .widget-filters > row > status {
			max-width: 170px;
		}

	.widget-filter-container .widget-filters > row > * {
		height: 29px;
	}
}