.chart {
	position: relative;
	width: auto;
	height: auto;
	height: 100%;

	&__top {
		padding-bottom: 10px;
		background-color: var(--main-bg-color);
		width: 100%;
		position: absolute;
		left: 0;
		top: 18px;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: 10px;
		z-index: 2;

		&_item {
			display: flex;
			align-items: center;
			gap: 2px;

			p {
				color: var(--footer-selected-link);
			}

			p,
			span {
				font-size: 11px;
				font-weight: 400;
				line-height: 100%;
				white-space: nowrap;
			}
		}

		@media screen and (max-width: 1280px) {
			padding-bottom: 0;
		}
	}

	&__body {
		width: 100%;
		height: 100%;

		div,
		canvas {
			width: 100% !important;
			height: 100% !important;
		}

		canvas {
			cursor: crosshair;
		}
	}

	&__lowVolume {
		font-size: 72px;
		color: var(--font-dimmed-color);
		white-space: nowrap;
		position: absolute;
		transform: translate(-50%, -50%);
		top: 50%;
		left: 50%;

		@media screen and (max-width: 600px) {
			font-size: 48px;
		}

		@media screen and (max-width: 400px) {
			font-size: 36px;
		}
	}
}
