/* ------------------------------------------------------------ */
/* position: */

.canvas,
.graph_table {
	
	position: absolute;
	
}

/* ------------------------------------------------------------ */
/* <fieldset>, <legend> */

fieldset {
	
	position: relative;
	
	height: 260px;
	
	margin: 0 auto 15px;
	
	border: 1px solid #999999;
	
}

legend {
	
	margin-left: 15px;
	
	padding: 5px;
	
	color: #444444;
	
}

/* ------------------------------------------------------------ */
/* <table>, <td> */

.graph_table {
	
	bottom: 0;
	
	z-index: 4;
	
}

td {
	
	text-align: center;
	
	white-space: nowrap;
	
}

.date_tr td {
	
	padding-top: 1px;
	padding-bottom: 1px;
	
	border-top: 1px solid #999999;
	border-left: 1px solid #999999;
	
	color: #666666;
	
	line-height: 100%;
	
}

.td0 {
	
	border-left: none !important;
	
}

/* ------------------------------------------------------------ */
/* <canvas> */

.canvas {
	
	top: -12px;
	
	z-index: 3;
	
}

/* ------------------------------------------------------------ */
/* for daily graph */

td.sun {
	
	background-color: #ffeeee !important;
	
}

td.sun a:link,
td.sun a:visited {
	
	color: #ff0000;
	
}

td.sat {
	
	background-color: #eeffff !important;
	
}

td.sat a:link,
td.sat a:visited {
	
	color: #4169e1;
	
}

/* ------------------------------------------------------------ */
/* for shortcut action */

#jump {
	
	margin-bottom: -11px;
	
}

#jump td {
	
	border-bottom: 1px solid #cccccc;
	
	word-spacing: 1px;
	
}

/* ------------------------------------------------------------ */
/* for today param (index only) */

#table_wrapper {
	
	display: flex;
	
	flex-wrap: wrap;
	
	align-items: flex-start;
	
}

.param_table {
	
	width: 327px;
	
	margin: 10px 0;
	
}

.right_table {
	
	margin-left: 21px;
	
}

.param_table td {
	
	padding: 1px 0;
	
	border-bottom: 1px solid #cccccc;
	
	text-align: left;
	
}

.tr0 td {
	
	border-bottom: 1px solid #999999 !important;
	
}

#count {
	
	width: 40px;
	
}

.value {
	
	padding-left: 5px !important;
	
}

.count {
	
	padding-right: 2px !important;
	
	text-align: right !important;
	
}

/* ------------------------------------------------------------ */

/* for Tablet & Smat Phone */
@media screen and (max-width: 959px) {
	
	/* ------------------------------------------------------------ */
	/* for graph */
	
	fieldset {
		
		margin: 0 0.5em 0.6em;
		
	}
	
	legend {
		
		font-size: 0.9em;
		
	}
	
	.date_tr td {
		
		font-size: 0.5em;
		
	}
	
	.canvas {
		
		top: -4px;
		
	}
	
	/* ------------------------------------------------------------ */
	/* for today param (index only) */
	
	#table_wrapper {
		
		display: block;
		
	}
	
	.left_table,
	.right_table {
		
		width: 100%;
		
		margin: 1.2em auto;
		
	}
	
	.title {
		
		padding: 0 0 0.2em 0.5em !important;
		
	}
	
	.value {
		
		padding: 0.4em 0 0.4em 0.8em !important;
		
	}
	
	.count {
		
		padding: 0.4em 0.8em 0.4em 0 !important;
		
	}
	
	/* ------------------------------------------------------------ */
	
	/* for Tablet */
	@media screen and (min-width: 768px) {
		
		legend {
			
			font-size: 1.6rem;
			
		}
		
		.date_tr td {
			
			font-size: 1.2rem;
			
		}
		
		.canvas {
			
			top: -12px;
			
		}
		
	}
	
}