/** 
 * COMMON 
 */
.clear{ clear:both; }
.info-box{ width: 100%; display: inline-block; text-align: center; padding: 3px; color: #fff; font-size: 0.6em; }
.legend-box{ padding: 3px 9px; color: #666; }

.bg-yellow { background-color: #ffd800 !important; }
.bg-green { background-color: #45a33a !important; }
.bg-red { background-color: #d50005 !important; }
.bg-light-orange { background-color: #ffe4c8 !important; }
.bg-light-red { background-color: #ffbbab !important; }
.bg-light-green { background-color: #d3ffbf !important; }
.bg-light-yellow { background-color: #fcffb3 !important; }
.bg-light-gray { background-color: #efefef !important; }
.bg-light-skyblue { background-color: #87ceeb !important; }
.color-white { color:#fff !important;}
.margin-left-2pct { margin-left: 2% !important;}
/*** for MOBILE */
@media screen and (max-width: 46.25em) {
	.margin-left-2pct { margin-left: 0 !important;}
}

/** 
 * HEADER 
 */
.nmr-header{
	width: 100%;
	background-color: #fff;
	border-bottom: 1px solid #f3f3f3;
	display: table;
}

	/** LEFT: INSTRUMENTS (buttons) */
	ul#horizontal-list {
		list-style: none;
		margin: 0;
		padding: 0;
		float: left;
	}
		ul#horizontal-list li {
			display: inline;
		}
			ul#horizontal-list li .button{
				background-color: #fff;
				color: #666;
				padding: 8px 13px;
			}
/*** for MOBILE */
@media screen and (max-width: 46.25em) {
			ul#horizontal-list li .button{
				background-color: #fff;
				color: #666;
				padding: 8px !important;
			}
}

			ul#horizontal-list li .circle {
				border-radius: 50%;
				width: 17px;
				height: 17px;
				display: inline-block;
			}

	/** RIGHT: LOGIN (buttons) */
	.nmr-header .login-area {
		float: right;
		margin-top: 10px;
		margin-right: 20px;
		margin-bottom: 10px;
	}
		.nmr-header .login-area .button {
			background-color: #ddd;
			color: #666;
			font-size: 0.7em;
			font-weight: 500;
		}

		.nmr-header select#target_instrument {
			font-family: "Noto Sans", sans-serif;
			font-size: 0.7em;
			margin: 10px;
			padding: 5px;
			float: left;
		}

/** FRONT-GLOBAL-NOTICES */
.nmr-global-notices{
	margin: 20px;
	padding: 20px 30px;
	border-radius: 10px;
	background-color: #f3f3f3;
	box-shadow: 3px 3px 3px #dadada;
	color: #666;
}
	.nmr-global-notices h2.title{
		font-family: "Noto Sans", sans-serif;
		font-weight: 700;
	}

	.nmr-global-notices ul.notice-list{
		margin:0;
		padding: 15px;
		list-style-position: inside;
		list-style-type: square;
	}

		.nmr-global-notices ul.notice-list li,
		.nmr-global-notices ul.notice-list li a{
			font-family: "Noto Sans", sans-serif;
			font-size: 0.9em;
			color:#666;
		}

	.nmr-global-notices .more,
	.nmr-global-notices .more a {
		float:right;
		font-family: "Noto Sans", sans-serif;
		font-size: 0.9em;
		color:#999;
	}
	.nmr-instrument-notices-container{
		margin: 20px;
		/*-moz-column-count: 2;
		-webkit-column-count: 2;
		column-count: 2;*/
	}
	.nmr-instrument-notices-container .instrument-notices{
		width:49%;
		float:left;
		margin: 0;
		margin-bottom: 2%;
		padding: 2% 3%;
		/*border: 1px solid #f3f3f3;*/
		border-radius: 7px;
		background-color: #f3f3f3;
		box-shadow: 3px 3px 3px #dadada;
		-webkit-column-break-inside: avoid;
		page-break-inside: avoid;
		break-inside: avoid;
		font-family: "Noto Sans", sans-serif;
	}


/** FRONT-INSTRUMENT-NOTICES */
/*** for MOBILE */
@media screen and (max-width: 46.25em) {
	.nmr-instrument-notices-container{
		margin: 20px;
		/*-moz-column-count: 1;
		-webkit-column-count: 1;
		column-count: 1;*/
	}
	.nmr-instrument-notices-container .instrument-notices{
		width:100% !important;
		margin-bottom: 4%;
		padding: 2% 3%;
		border-radius: 7px;
		background-color: #f3f3f3;
		box-shadow: 3px 3px 3px #dadada;
		-webkit-column-break-inside: avoid;
		page-break-inside: avoid;
		break-inside: avoid;
	}
}
	.nmr-instrument-notices-container .instrument-notices li{
		list-style-position: inside;
		list-style-type: square;
	}


	.nmr-instrument-notices-container .instrument-notices h2.title,
	.nmr-instrument-notices-container .instrument-notices h2.title a{
		font-family: "Noto Sans", sans-serif;
		font-weight: 700;
		float: left;
		color: #666;
	}

	.nmr-instrument-notices-container .instrument-notices .reserve-button{
		background-color: #69c773;
		color: #fff;
		font-size: 0.6em;
		font-weight: 500;
		float: right;
	}

	.nmr-instrument-notices-container .instrument-notices .title-and-reserve{
		padding-bottom: 10px;
		border-bottom: 1px solid #dadada;
	}

	.nmr-instrument-notices-container .instrument-notices .latest-instrument-notice{
		margin-top: 15px;
		padding: 0 15px;
	}
		.nmr-instrument-notices-container .instrument-notices .latest-instrument-notice .title{
			font-size: 0.9em;
			color: #777;
		}

		.nmr-instrument-notices-container .instrument-notices .latest-instrument-notice h4.post-title a{
			padding: 0 10px;
			font-size: 0.9em;
			color: #999;
			font-family: "Noto Sans", sans-serif;
		}

		.nmr-instrument-notices-container .instrument-notices .latest-instrument-notice p{
			padding: 0 10px 10px 10px;
			margin: 0;
			font-size: 0.8em;
			color: #aaa;
			font-family: "Noto Sans", sans-serif;
		}

		.nmr-instrument-notices-container .instrument-notices .latest-instrument-notice .more,
		.nmr-instrument-notices-container .instrument-notices .latest-instrument-notice .more a {
			float: right;
			font-family: "Noto Sans", sans-serif;
			font-size: 0.9em;
			color: #999;
		}


/** NMR BODY */
.nmr-body{
	font-family: "Noto Sans", sans-serif;
	font-size: 0.9em;
	padding: 20px;
}
@media screen and (max-width: 46.25em) {
	.nmr-body{
		padding: 0;
	}
}

	.nmr-body .reservation-area{
	}

		.nmr-body .reservation-area .reservation-header{
			margin-bottom: 10px;
		}
			.nmr-body .reservation-area .reservation-header .title{
				font-size: 1.2em;
				font-weight: 600;
				margin-left: 10px;
			}
			.nmr-body .reservation-area .reservation-header .current_time {
				margin-left: 5%;
				font-style:italic;
				font-size: 0.7em;
			}

		.nmr-body .reservation-info{
			border-radius: 10px;
			background-color: #fafafa;
			box-shadow: 3px 3px 3px #dadada;
			padding: 15px;
			margin-bottom: 20px;
			color: #666;
			font-size: 0.65em;
		}
@media screen and (max-width: 46.25em) {
		.nmr-body .reservation-info{
			border-radius: 0;
			box-shadow: none;
			background-color: #eee;
			padding: 15px;
		}
}
			input, select
			{
				font-size: 1em;
				font-family: "Noto Sans", sans-serif;
				padding: 0px;
			}
			.nmr-body .reservation-info input[type=text]{
				width: 300px;
				padding: 1px;
			}

			.nmr-body .reservation-info label{ 
				width: 60px;
				display: inline-block;
				font-weight: 600;
				color: #888;
			}
					
			.nmr-body .button {
				background-color: #ddd;
				color: #666;
				font-size: 0.7em;
				font-weight: 500;
				padding: 3px 10px;
			}

		/** instrument-desc */
		.nmr-body .instrument-desc {
			display: none;
			padding: 20px;
			margin-bottom: 20px;
			border-radius: 10px;
			background-color: #fafafa;
			box-shadow: 3px 3px 3px #dadada; 
		}
			.nmr-body .instrument-desc .instrument-image{ float: left; margin-right: 15px; }
				.nmr-body .instrument-desc .instrument-image img{ border:3px solid #ddd; border-radius: 10px;}
			.nmr-body .instrument-desc .instrument-content{ float: left; }

		.nmr-body .reservation-info ul{
			list-style-position: inside;
			list-style-type: square;
			margin:0;
		}
			.nmr-body .reservation-info ul li{
				margin-bottom: 3px;
			}

			.nmr-body .reservation-info ul li.no-square{
				list-style-type: none;
				margin-left: 10px;
			}



		.nmr-body .reservation-area .reservation-body{
			border-radius: 10px;
			background-color: #fafafa;
			box-shadow: 3px 3px 3px #dadada;
			padding: 5px 15px;
		}
@media screen and (max-width: 46.25em) {
		.nmr-body .reservation-area .reservation-body{
			border-radius: 0;
			background-color: #fafafa;
			box-shadow: none;
			padding: 0;
		}
}
			.nmr-body .reservation-area table#reservation-data{
				border:none;
			}
			.nmr-body .reservation-area table#reservation-data th,
			.nmr-body .reservation-area table#reservation-data td{
				border-top:none;
				border-left:none;
				border-right:none;
				/*border-bottom:1px solid #e0e0e0;*/
				padding: 5px 0 0 5px;
				font-size: 0.65em;
				text-align: center;
			}

		.nmr-body .reservation-data-legend{
			float: right;
			margin-bottom: 5px;
			font-size: 0.9em;
		}

	img.make-reservation, 
	img.cancel-reservation {
		cursor: pointer;
	}

	td { position: relative; }
	td .data-loading { display:none; position: absolute; left:5px; top:0; }


/** NOTICE */

.target-instrument{
	padding:0 10%;
	margin-bottom: 5%;
}
	.target-instrument .list_status_box{
		padding: 10px;
	}

		.target-instrument .list_status_box a{
			color: #fff;
			font-family: "Noto Sans", sans-serif;
		}