html,body { background-color: #333; margin: 0; padding: 0; }

.container {
	display: flex;
	margin: 0;
	padding: 0;
	width: 100vw; height: 100vh; max-width: 100%;
}

main {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	flex-shrink: 1;
}

main .negative { color: #d60a22; }

main section.name_logo {
	align-items: flex-start;
	color: #eee;
	display: flex;
	justify-content: space-between;
}

main section.name_logo h1 {
	font-size: 1.75rem;
	font-weight: bold;
	line-height: 1;
	margin: 0 0 0.5rem 0;
	padding: 0;
}

main section.name_logo h1 small {
	font-size: 1.25rem;
	font-weight: normal;
}
main section.name_logo div.logo img {
	background: #eee;
	max-width: 240px; max-height: 60px;
}
main section.name_logo div.price {
	align-items: center;
	display: flex;
	font-size: 1.75em;
	gap: 0.5rem;
	line-height: 1;
}
main section.name_logo div.price span.price {
	display: inline-block;
}
main section.name_logo div.price span.price_change {
	font-size: 0.7em;
	display: inline-block;
}
main section.name_logo div.price span.percent_change {
	font-size: 0.7em;
	display: inline-block;
}


main section.chart div.chart {
	background-color: #eaeaea;
	width: 100%;
}

main section.chart.chart-price {
	flex-grow: 1;
}
main section.chart.chart-price div.chart {
	height: 100%;
}

main section.chart.chart-volume {
	height: 20vh;
}
main section.chart.chart-volume div.chart {
	height: 100%;
}

main section.summary {
	height: 200px;
}

main section.summary .table {
	margin-bottom: 0;
}

aside {
	background-color: #f5f8fa;
	border-left: 2px solid #dde0e4;
	flex-grow: 0; flex-shrink: 0;
	height: 100vh;
	overflow: hidden;
	width: 360px;
}

aside ul.news {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

aside ul.news > li {
	border-bottom: 2px solid #dde0e4;
	padding: 1rem 1rem;
}

aside ul.news > li > ul.meta {
	display: flex;
	justify-content: flex-start;
	list-style-type: none;
	margin: 0 0 0 0.5rem;
	padding: 0;
}

aside ul.news > li > ul.meta > li {
	font-size: 0.825em;
}
aside ul.news > li > ul.meta > li::before {
	content: "•";
	display: inline-block;
	padding-left: 0.5rem;
	padding-right: 0.5rem;
}
aside ul.news > li > ul.meta > li:first-child::before {
	content: "";
	display: none;
}

aside ul.news > li div.title {
	min-width: 0;
	max-height: 50px;
	overflow: hidden;
	text-overflow: ellipsis;

	display: -webkit-box;
	-webkit-line-clamp: 2; /* Number of lines */
	-webkit-box-orient: vertical;

	margin-bottom: 0.125rem;

	transition: font-size 0.3s ease;
}
aside ul.news > li div.title a {
	color: inherit;
	text-decoration: none;
}

aside ul.news > li.active div.title {
	color: #AA0000;
}


@media (min-width: 901px) {

	main {
		height: 100vh;
		overflow-y: hidden;
	}

	aside ul.news > li.active div.title {
		line-height: 1.25;
		max-height: 75px;

		display: -webkit-box;
		-webkit-line-clamp: 3; /* Number of lines */
		-webkit-box-orient: vertical;

		font-size: 1.25em;
		margin-bottom: 0.25rem;

		color: #AA0000;
	}

}

@media (max-width: 900px) {

	.container { display: block; overflow: hidden; }

	main section.name_logo h1 {
		font-size: 1.5rem;
		margin: 0 0 0.25rem 0;
	}

	main section.name_logo div.logo img {
		max-width: 200px; max-height: 60px;
	}

	main section.name_logo div.price {
		font-size: 1.5em;
		padding-bottom: 0.25rem;
	}

	main section.summary {
		height: auto;
	}

	section.summary .table > :not(caption) > * > * {
		padding: .25rem .5rem;
	}

	section.summary table.table small {
		font-size: .75em;
	}

	section.summary .table th,
	section.summary .table td {
		line-height: 1;
	}

	aside {
		border: none;
		overflow: visible;
		width: 100%;
		height: auto;
	}

	aside {
		background-color: transparent;
	}

	aside ul.news {
	}

	aside ul.news > li {
		color: #eee;
		display: block;
		padding: 0.25rem 0.5rem 0.5rem 0.5rem;
	}
	aside ul.news > li div.title {
		line-height: 1.1;
	}

	aside ul.news > li.active {
		background-color: #dd6646;
	}

	aside ul.news > li.active div.title {
		color: #FFF;
		font-weight: bold;
	}

	aside ul.news > li > ul.meta {
		display: flex;
		justify-content: flex-end;
		line-height: 1.0;
	}

	aside ul.news > li > ul.meta > li::before {
		content: "";
		display: none;
	}

	aside ul.news > li > ul.meta > li.age {
		padding-left: 0.75rem;
	}

	aside ul.news > li > ul.meta .source {
		white-space: nowrap;
	}

	aside ul.news > li > ul.meta date {
		white-space: nowrap;
	}

	aside ul.news > li > ul.meta small {
		display: none;
	}

}