@use "../../../init" as *;

.C_main
{
	display: flex;
	flex-flow: column nowrap;
	width: 100%;
	height: 100%;
	background-color: $colorBackground3;
	color: $colorFont5;
}

.C_date_holder
{
	width: 40%;
	height: 5%;
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
}

.C_date_item
{
	width: 50%;
	height: 100%;
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-around;
	align-items: center;
	color: $colorFont;
}

.C_date
{
	width: 65%;
	height: 50%;
	cursor: pointer;
}

.C_chart_holder
{
	width: 100%;
	height: 100%;
}

.C_chart
{
	width: 99%;
	height: 100%;
}

.C_loading
{
	width: 100%;
	height: 100%;
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center;
}

.C_empty_loading
{
	display: none;
}

.C_loader {
	border: 16px solid #f3f3f3;
	border-top: 16px solid #fe7e33;
	border-radius: 50%;
	width: 120px;
	height: 120px;
	animation: spin 2s linear infinite;
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center;
  }
  
  @keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
  }

.C_loader_holder
{
	width: 100%;
	height: 100%;
	display: flex;
	flex-flow: column nowrap;
	justify-content: center;
	align-items: center;
}