/*
	Author:			Niklas Menke <niklas-menke.de>
		
	Project:		Power analyser
	Description:	This project represent electrical parameters from a multifunction power analyser on a website.
					The electrical parameters are recorded by a Janitza UMG96S multifunction power analyser.
					An Arduino queries the data via MODBUS RTU and sends it to a database.
					The website loads the parameters from the database and updates itself automatically via AJAX.
	
	File:			charts.css
	Description:	Styling related to the charts
	Date:			2020/11/07
	
	Version:		WORK
	Date:			-
*/

canvas:hover {
	cursor: pointer;
}

#charts {
	display: none;
	align-self: center;
	position: fixed;
	top: 5%;
	width: 100%;
	height: auto;
	color: #333;
	background-color: #EEE;
	border: 3px solid #1E73BE;
	border-radius: 10px;
	padding: 10px;
	text-align: center;
	z-index: 1002;
}

#charts #closeDialog {
	float: right;
	height: 100%;
	color: #DD3333;
	cursor: pointer;
	padding-left: 5px;
	border: none;
	border-left: 3px solid #1E73BE;
}

#charts hr {
	border: 2px dashed #1E73BE;
	margin-top: 5px;
	margin-bottom: 20px;
}

#charts[open="open"] {
	display: block;
}

#backdrop {
	z-index: 1001;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.5);
}

#charts label {
	display: block;
	margin: .5em;
}

#charts input, #charts select, #charts #loadData {
	padding: 5px;
	border: 1px solid #333;
	border-radius: 6px;
}

#charts #loadData {
	margin-top: 1em;
	background-color: #1E73BE;
	color: #EEE;
	font-weight: bold;
	font-size: 1em;
}

#charts #loadData:hover {
	cursor: pointer;
}


@media all and (min-width: 50em) {
	#charts {
		width: 65%;
	}
	
	#charts label {
		display: inline;
		margin: 1em;
	}
}