/* Step表示 */
.navigation{
	width: 350px;
	&& .navigation-item{
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 60px;
		height: 60px;
		margin: 0 13px;
		border: 1px dashed;
		border-radius: 100%;
		line-height: 1.4;
		text-align: center;
		font-weight: 600;
		font-size: 12px;
		color: var(--clinic-Theme-back-color);
		background-color: var(--clinic-Theme-color);
	}
	&&  .navigation-item:not(:first-of-type):after {
		content: '\e315';
		position: absolute;
		top: 50%;
		left: -26px;
		margin-top: -12px;
		font-family: 'Material Icons Round';
		font-size: 24px;
		font-weight: 100;
		line-height: 1.0;
		color: var(--clinic-Theme-back-color);
	}
	&& .navigation-item.current{
		border-style: solid;
		background-color: var(--clinic-Theme-back-color);
		color: var(--clinic-Theme-color);
	}
}

.service-list li{
	background-color:var(--treatment-backgroundcolor);
	border-color:black;
}

.caution-title{
	background-color:#AC2B2B;
}

/* 施術選択画面 */
body.treatment-select{
	/* 施術 */
	&& .caution-title{
		padding: 10px 0;
		color: #FFF;
		background-color:#AC2B2B;
		height: 35px;
	}
	&& .agree_checkbox_item:not(.checked){
		color: #AC2B2B;
	}
	&& .agree_checkbox_item.checked{
		background-color: #AC2B2B;
		color: #FFF;
	}
}

body.date-select{
	/* 日付切り替えボタン */
	&& .date-range .btn,
	&& .date-range .disable{
		width: 80px;
		height: 30px;
		min-height: 30px;
		padding: 0;
		font-weight: normal;
		font-size: 1rem;
	}

	/* カレンダー */
	&& .table *{
		color:#676662;
		font-weight: bold;
	}
	&& .date-select-table th,
	&& .date-select-table td{
		padding-left:  0;
		padding-right:  0;
		font-size: clamp(10px, 2vw, 18px);
		border: 2px solid silver;
	}

	/* 日付欄 */
	&& .date-select-table thead{
		position:sticky;
		top: 49px;
	}
	&& .date-select-table th.san,
	&& .date-select-table th.holi{
		color: #BB5555;
		background-color: #EEDDD9;
	}
	&& .date-select-table th.sat {
		color: #4466BB;
		background-color: #D9E3EC;
	}

	/* 空き枠 */
	&& .date-select-table td{
		font-size: 1rem;
	}
	&& .date-select-table td.badge-closed,
	&& .date-select-table td.badge-before,
	&& .date-select-table td.badge-after,
	&& .date-select-table td.badge-nospace{
		background-color: #dcdcdc;
	}
	&& .date-select-table a{
		text-decoration: none;
		color: #AC2B2B;
	}
}

/* 予約確認画面 */
body.reserve-check{
	&& .reserve-info .list-group-item .title,
	&& .reserve-info .list-group-item .item{
		padding: 7px 5px 0 10px;
		min-height: 30px;
	}
	&& .reserve-info .list-group-item .title{
		border-left: 5px solid var(--clinic-Theme-back-color);
	}
	&& .caution-title{
		padding: 10px 0;
		color: #FFF;
		background-color:#AC2B2B;
		height: 35px;
	}
	&& .agree_checkbox_item:not(.checked){
		color: #AC2B2B;
	}
	&& .agree_checkbox_item.checked{
		background-color: #AC2B2B;
		color: #FFF;
	}
	&& .reserve-check-info .reserve-memo-title{
		border-left: 5px solid var(--clinic-Theme-back-color);
	}
}

body.reserve-payment{
	&& .list-group-item{
		border-color: silver;
	}
	&& .loading-main{
		width: 100%;
		height: calc(100vh - 150px);
		position: relative;
	}
	&& .loading-container{   
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		-webkit-transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
	}
}

/* 予約完了画面 */
body.reserve-confirm{
	&& .reserve-info .list-group-item .title,
	&& .reserve-info .list-group-item .item:not(.large){
		padding: 7px 5px 0 10px;
		min-height: 30px;
	}
	&& .reserve-info .list-group-item .item.large{
		padding: 7px 5px 0 10px;
		min-height: 100px;
	}
	&& .reserve-info .list-group-item .title{
		border-left: 5px solid var(--clinic-Theme-back-color);
	}
}

body.telemedicine-terms{
	&& .scrollspy {
		position: relative;
		height: calc(100vh - 80px - 200px);
		overflow: auto;
	}
}