/**
Manager CSS
**/

:root {
	--main: #2563EB;
	--main-light: #DBEAFE;
	--accent: #0EA5E9;
	--text: #1E293B;
	--text-muted: #64748B;
	--border: #E2E8F0;
	--bg: #F8FAFC;
	--white: #FFFFFF;
	--success: #10B981;
	--radius: 16px;
	--radius-sm: 8px;
}

html, body {
	box-sizing: border-box;
	height: 100%;
	margin: 0;
}

a {
	text-decoration: none;
}

.manager {

	header {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 40px;
		padding: 2px 10px;
		background-color: #fff;
		box-sizing: border-box;
		z-index: 10;
		h1 {
			position: absolute;
			left: 10px;
			top: 5px;
			display: inline-block;
			margin: 0;
			color: #2b6cb0;
			font-size: 150%;
			/*font-size: 16px;*/
			line-height: 100%;
			font-weight: normal;
		}
		h2 {
			position: absolute;
			left: 250px;
			top: 10px;
			display: inline-block;
			margin: 0;
			font-size: 18px;
			line-height: 100%;
			font-weight: normal;
		}
	}

	article {
		display: flex;
		height: calc(100% - 40px);
		.content {
			flex-grow: 1; /* 右側を残りの幅一杯に */
			/*padding-left: 10px;*/
			/*padding: 10px;*/
			padding-left: 270px;
			padding-top: 40px;

			h2 {
				margin: 0;
				font-size: 20px;
				font-weight: normal;
			}
		}
	}

	table.rich {
		border-collapse: collapse;
		th, td {
			padding: 0 5px;
			font-weight: normal;
			border: solid 1px #ccc;
		}
	}
}

.popup {
	header {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 30px;
		padding: 10px;
		box-sizing: border-box;
		background-color: #ccf;
		z-index: 10;
		h1 {
			margin: 0;
			font-size: 16px;
			line-height: 100%;
			font-weight: normal;
		}
	}

	section {
		padding: 30px 0 0;
	}
}

table.left_header th {
	width: 10px;
	text-align: left;
	white-space: nowrap;
	background-color: #eee;
}

table.left_header tr>* {
	border: solid 1px #ccc;
}

table.left_header {
	th {
		padding: 10px !important;
	}
	t {
		padding: 0 !important;
	}
	input {
		padding: 10px;
	}
	input[type="text"],
	textarea {
		width: 100%;
	}
	input[type="text"],
	input[type="date"],
	input[type="number"] {
		font-size: 100%;
	}
	select {
		font-size: 110%;
	}
}

table.fee {
	width: 100%;
	margin-right:-4.5em;
}

.fee td {
	position: relative;
	display: inline-block;
	padding: 0 !important;
}

.fee td::after {
	/*content: "円/1時間";*/
	/*content: var(--fee_unit, "円/1時間");*/
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	color: #555;
	pointer-events: none; /* クリックを邪魔しない */
}

.fee td.unit0::after {
	content: "円/1回";
}

.fee td.unit1::after {
	content: "円/1時間";
}

.fee td.unit2::after {
	content: "円/2時間";
}

.fee td.unit3::after {
	content: "円/3時間";
}

.fee td.unit4::after {
	content: "円/4時間";
}

.fee input {
	padding-right: 4.5em !important; /* "円/1時間" の分だけ余白 */
	text-align: right;
	height: 100%;
	margin-right: -4.5em;
}

td.fee {
	position: relative;
	display: inline-block;
	padding: 0 !important;
}

td.fee::after {
	content: "円";
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	color: #555;
	pointer-events: none; /* クリックを邪魔しない */
}

td.fee input {
	padding-right: 1.8em !important; /* "円" の分だけ余白 */
	text-align: right !important;
	height: 100%;
	margin-right: -1.8em;
}

td.person {
	position: relative;
	display: inline-block;
	padding: 0 !important;
}

td.person::after {
	content: "人";
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	color: #555;
	pointer-events: none; /* クリックを邪魔しない */
}

td.person input {
	padding-right: 1.8em !important; /* "人" の分だけ余白 */
	text-align: right !important;
	height: 100%;
	margin-right: -1.8em;
}

tfoot td {
	padding: 10px 0 0 !important;
}

button {
	width: 100px;
	border-radius: 5px;
	border: solid 1px #ccc;
	background-color: #eee;
	cursor: pointer;
}

fieldset {
	border-radius: 5px;
	border: solid 1px #ccc;

	th {
		font-weight: normal;
		text-align: left;
	}
	td {
		text-align: right;
	}

	dl {
		display: flex;
		flex-wrap: wrap;
		width: 100% !important;
		dt {
			/*display: inline-block;*/
			width: 40px !important;
		}
		dd {
			/*display: inline-block;*/
			width: clac(100% - 40px) !important;
		}
	}
}

/**************************************/
/* テーブルの行の背景を交互に変更する */
/**************************************/

table.stripe tr:not(thead tr) {
	background: #f8f8f8;
	cursor: pointer;
}

table.stripe tr:not(thead tr):nth-child(odd) {
	background: #fff;
}

/********/
/* 予約 */
/********/

dl.reservation {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	max-width: 1000px;

	dt {
		width: 200px;
		padding-top: 20px;
	}
	dd {
		width: calc(100% - 240px);
	}
}

/**************/
/* カレンダー */
/**************/
table.calendar {
	width: 100%;
	/*width: calc(100% - 40px);*/
	border-collapse: collapse;
}

table.calendar th,
table.calendar td {
	font-weight: normal;
	text-align: center;
	padding: 0;
	border: solid 1px #ccc;	
}

table.calendar th {
	width: 14%;
	color: #fff;
}

table.calendar td {
	color: lightgray;
	background-color: #fff;
}

table.calendar thead th.w0 {
	background-color: red;
}

table.calendar th.w1,
table.calendar th.w2,
table.calendar th.w3,
table.calendar th.w4,
table.calendar th.w5 {
	background-color: gray;
}

table.calendar th.w6 {
	background-color: blue;
}

table.calendar td.w0 {
	color: red;
}

table.calendar td.w1,
table.calendar td.w2,
table.calendar td.w3,
table.calendar td.w4,
table.calendar td.w5 {
	color: #333;
}

table.calendar td.w6 {
	color: blue;
}

table.calendar td.holiday {
	color: red;
}

table.calendar td.reserved {
	background-color: #fee;
}

table.calendar td.canceled {
	background-color: #eee;
}

table.calendar td.disable {
	background-color: #eee;
}

table.calendar #target a {
	display: inline-block;
	border: solid 1px red;
	border-radius: 50%;
}

/****************/
/* タイムライン */
/****************/
table.timeline {
	margin: 20px 20px;
	width: calc(100% - 40px);
}

table.timeline th,
table.timeline td {
	padding: 0;
}

table.timeline th {
	width: 80px;
	font-weight: normal;
	text-align: right;
	padding-right: 10px;
}

table.timeline td {
	text-align: center;
	border-bottom: solid 1px #ccc;
}

table.timeline td.quarter div {
	width: 100%;
	height: 0.75em;
}

table.timeline td.quarter div:first-child {
	border-bottom: solid 1px #e8e8e8;
}

table.timeline td.quarter div.reserved {
	background-color: #feeeee;
	cursor: default;
}

table.timeline td.quarter div.myreserved {
	background-color: #eeeefe;
}

table.timeline td.quarter div.out_of_range {
	background-color: #f8f8f8;
	cursor: default;
}

table.timeline td.none {
	border: none;
}

/******************/
/* 送迎バス時刻表 */
/******************/

table.timetable {
	/*font-size: 80%;*/
	width: 100%;
	/*
	margin: 0 auto 20px;
	width: calc(100% - 40px);
	max-width: 1000px;
	*/
	border-collapse: collapse;
}

table.timetable a {
	color: blue;
}

table.timetable thead th {
	text-align: center;
	vertical-align: top;
	background-color: cornsilk;
}

table.timetable thead span {
	display: inline-block;
	white-space: pre;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	/*text-orientation: upright;*/
}

table.timetable thead span span.latin {
	text-orientation: upright;
	letter-spacing: -0.4em; /* マイナスで詰める */
	padding-bottom: 4px;
}

table.timetable tr>* {
	padding: 10px 5px;
	border: solid 1px #ccc;
}

table.timetable tbody tr>* {
	text-align: center;
}

/*table.timetable.low tbody tr td {*/
table.timetable.low tbody tr>* {
	background-color: rgb(201, 187, 64);
}

table.timetable.low tr.out_of_service td {
	text-decoration: line-through;
}

table.timetable.low tbody tr.reservation>* {
/*table.timetable tr.reservation td {*/
	background-color: #fff !important;
}