/* Root */
:root {
	---cmt-primary-color: #F01D39;
	---cmt-secondary-color: #7F8C8D;
	---cmt-tertiary-color: #FFFFFF;
	---cmt-background-color: #FFFFFF;
	---cmt-background-inner-color: #ECF0F1;
	---cmt-surface-color: #FFFFFF;
	---cmt-outline-color: #E0E4E5;

	---cmt-Dprimary-color: #ca0d26;
	---cmt-Dsecondary-color: #657171;
	---cmt-Dtertiary-color: #cccccc;
	---cmt-Dbackground-color: #cccccc;
	---cmt-Dbackground-inner-color: #cccccc;
	---cmt-Dsurface-color: #cccccc;
	---cmt-Doutline-color: #C6CECE;

	---cmt-green-color: #2ecc71;
	---cmt-red-color: #f01d39;
	---cmt-yellow-color: #FFBC1F;
	---cmt-orange-color: #FD6D0D;
	---cmt-blue-color: #118AB2;
	---cmt-lightblue-color: #339af0;
	---cmt-darkblue-color: #073B4C;
	---cmt-purple-color: #845ef7;
	---cmt-lightsilver-color: #f0f0f0;
	---cmt-gray-color: #7F8C8D;
	---cmt-white-color: #FFFFFF;
	---cmt-black-color: #515A5A;
	---cmt-gold-color: #F1C40F;
	---cmt-silver-color: #BDC3C7;

	---cmt-Dgreen-color: #25a35a;
	---cmt-Dred-color: #ca0d26;
	---cmt-Dyellow-color: #E5A000;
	---cmt-Dorange-color: #d35502;
	---cmt-Dblue-color: #0e6e8e;
	---cmt-Dlightblue-color: #107dd9;
	---cmt-Ddarkblue-color: #062f3d;
	---cmt-Dpurple-color: #521df4;
	---cmt-Dlightsilver-color: #c0c0c0;
	---cmt-Dgray-color: #657171;
	---cmt-Dwhite-color: #cccccc;
	---cmt-Dblack-color: #4C4148;
	---cmt-Dgold-color: #F1C40F;
	---cmt-Dsilver-color: #BDC3C7;

	---cmt-Lgreen-color: #2ecc71;
	---cmt-Lred-color: #f01d39;
	---cmt-Lyellow-color: #FFBC1F;
	---cmt-Lorange-color: #FD6D0D;
	---cmt-Lblue-color: #118AB2;
	---cmt-Llightblue-color: #339af0;
	---cmt-Ldarkblue-color: #073B4C;
	---cmt-Lpurple-color: #845ef7;
	---cmt-Llightsilver-color: #f0f0f0;
	---cmt-Lgray-color: #A2ACAD;
	---cmt-Lwhite-color: #FFFFFF;
	---cmt-Lblack-color: #515A5A;
	---cmt-Lgold-color: #F1C40F;
	---cmt-Lsilver-color: #BDC3C7;
}
/* Root */



/* Monitoring / Мониторинг */
.monitoring__outline {
	border: 1px solid transparent;
	border-color: var(---cmt-outline-color);

	transition: border-color 0.3s ease;
}
.monitoring__outline:hover {
	border-color: var(---cmt-Doutline-color);
}
.monitoring_shadow {
	box-shadow: 0px 5px 10px 2px rgb(34 60 80 / 20%);

	transition: box-shadow 0.3s ease;
}
.monitoring_shadow:hover {
	box-shadow: 0px 0px 10px var(---cmt-white-color);
}

.monitoring__grid {
    display: grid;
    gap: 8px;
    grid-row: 1/span 1;
    grid-auto-rows: 80px;
    grid-template-columns: 1fr;
}
.monitoring {
	display: flex;
	flex-direction: column;
	/*justify-content: center;
	align-items: center;*/
	width: 100%;
	height: 100%;

	border-radius: 16px;

	background-color: var(---cmt-background-color);

	color: var(---cmt-black-color);

	transition: box-shadow 0.3s ease, border-color 0.3s ease, background-color 0.3s ease, color 0.3s ease, width 0.3s ease, filter 0.3s ease, opacity 0.3s ease;
}
.monitoring__wrapper {
	overflow: hidden;
}
.monitoring__content {
	display: flex;
	margin-top: auto;
	padding: 8px;
}
.monitoring__icon {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 40px;
	height: 40px;

	border-radius: 50%;

	background-color: var(---cmt-outline-color);
}
.monitoring__info h3{
	font-size: 19px;
}
.monitoring__info h5{
	font-size: 13px;
}
.monitoring__info {
	margin-left: 4px;
}
.monitoring__description {
	font-weight: 500;
	text-transform: uppercase;
	color: var(---cmt-Lgray-color);
}
.monitoring__title {
	font-weight: 600;
	color: var(---cmt-gray-color);
}
.monitoring__amount {
	margin-left: auto;

	text-align: end;
}
.monitoring__i {
	font-weight: 700;
	color: var(---cmt-gray-color);
}
.monitoring__j {
	font-weight: 500;
	color: var(---cmt-gray-color);
}
/*.monitoring__bottom {
	width: 100%;
	margin-top: auto;
	padding: 8px;

	border-top: 1px solid transparent;
	border-color: var(---cmt-outline-color);

	background-color: var(---cmt-red-color);

	font-size: 16px;
	font-weight: 500;
	color: var(---cmt-white-color);
	text-align: center;
	cursor: pointer;

	transition: box-shadow 0.3s ease, border-color 0.3s ease, background-color 0.3s ease, color 0.3s ease, width 0.3s ease, filter 0.3s ease, opacity 0.3s ease;
}
.monitoring__bottom:hover {
	background-color: var(---cmt-Dred-color);
}
.monitoring__outline:hover > .monitoring__bottom {
	border-color: var(---cmt-Doutline-color);
}*/
.monitoring__line {
	width: 100%;
}
.monitoring__progress {
	width: 100%;
	height: 21px;

	background-image: url(../images/progress_bar/background.png);
	background-repeat: no-repeat;
}
.monitoring__progress--active {
	width: 100%;
	height: 21px;

	background-image: url(../images/progress_bar/line_active.png);
	background-repeat: no-repeat;
	/*filter: hue-rotate(351deg);*/
	filter: hue-rotate(1deg);

	animation: gradient_line 4s infinite alternate;
	transition: box-shadow 0.3s ease, border-color 0.3s ease, background-color 0.3s ease, color 0.3s ease, width 4s ease, filter 0.3s ease, opacity 0.3s ease, filter 4s ease;
}
/* Monitoring / Мониторинг */



/* Animation / Анимация */
/*animation: blinking 0.8s infinite alternate;*/
@keyframes gradient_line {
	0% {filter: hue-rotate(1deg);}
	12.5% {filter: hue-rotate(45deg);}
	25% {filter: hue-rotate(90deg);}
	37.5% {filter: hue-rotate(135deg);}
	50% {filter: hue-rotate(180deg);}
	62.5% {filter: hue-rotate(225deg);}
	75% {filter: hue-rotate(270deg);}
	87.5% {filter: hue-rotate(315deg);}
	100% {filter: hue-rotate(351deg);}
}
/* Animation / Анимация */