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

.C_main
{
	display: flex;
	flex-flow: column nowrap;

	height:100%;

	@include mobile()
	{

	}
}
.C_sub
{
	height:100%;
	display:grid;
	grid-template-columns: 5fr 1fr;
}

.C_button, .C_button_back
{
	margin:5px;
	flex-grow: 0;
	margin-right:10px;
}


.C_button_back
{
	width:100px;
}

.C_chart_minute
{
}

.C_chart_hour
{

}

.C_chart_area_history
{
	display:grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr 1fr;
}

.C_char_area_totals
{
	display:grid;
	grid-template-columns: 1fr;
}

.C_chart_area
{
	display: flex;
	flex-flow: column nowrap;
	align-items: center;
	align-content: center;
}

.C_chart_area_dates
{
	display:grid;
	grid-template-columns: 1fr 2fr;
}

.C_chart_title, .C_chart_heading
{
	width:100%;
	font-size:1.5rem;
	text-align: center;
	padding:0.5rem;
}

.C_chart_heading
{
	font-size:2rem;
}

.C_chart_state
{

}

.C_chart_number
{
	width:100%;
	font-size:3rem;
	text-align: center;
	font-weight: bold;
	padding:0.5rem;
}

.C_chart_performance
{
	height:150px;
	width:150px;
}

.C_chart_runtime
{
	height:200px;
	width:200px;
}


.C_form_label
{
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	align-content: center;
	justify-content: flex-end;
	font-weight: bold;
}

.C_form_value
{
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	align-content: center;
	justify-content: flex-start;
	font-weight: bold;
	padding-left:1rem;
}

.C_buttons
{
	display: flex;
	flex-flow: row nowrap;
}

.C_frame_body
{
	position:fixed;
	left:10px;
	top:50vh;
	display:flex;
	flex-flow: column nowrap;
	background-color: #222222;
	width:45rem;
	height:30rem;
}

.C_frame_heading_holder
{
	display:flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	user-select: none;
	cursor:move;
}

.C_frame_heading
{
	padding:0.5rem;
	display: flex;
	flex-flow: column nowrap;
}


.C_frame_close
{
	display: flex;
	flex-flow: column nowrap;
	justify-content: center;
	align-items: center;
	align-content: center;
	padding-right:0.5rem;
	color: f37e10;
	cursor:pointer;
}