/* 予約前確認事項 */
body.before-check-reservation{
	&& .before-check-list .list-group-item:not(:last-of-type){
		margin-bottom: 20px;
	}
}

/* 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);
	}
}

/* 施術選択画面 */
body.treatment-select{
	/* メニュー一覧の帯 */
	&& .menu-title-bar{
		height: 30px;
		color: var(--clinic-Theme-color);
		background-color: var(--clinic-Theme-back-color);
		padding: 8px 0;
	}

	/* メニュー一覧全体 */
	&& .select_service_list_item{
		background-color: #FFF;
		margin: 10px 5px 5px 5px;
		position: relative;
	}
	&& .select_service_list_item:last-of-type{
		margin-bottom: 10px;
	}

	/* フォルダー */
	&& .select_service_list_item.open{
		background-color: var(--treatment-open-backgroundcolor);
		border: 1px solid var(--clinic-Theme-back-color) !important;
	}
	&& .select_service_group:not(.open)::before{
		content: '';
		width: 8px;
		height: 8px;
		border: 0;
		border-bottom: solid 1px #676662;
		border-right: solid 1px #676662;
		transform: rotate(45deg);
		position: absolute;
		top: 19px;
		left: 4px;
		margin: auto;
	}
	&& .select_service_group.open::before{
		content: '';
		width: 8px;
		height: 8px;
		border: 0;
		border-top: solid 1px #FFF;
		border-left: solid 1px #FFF;
		transform: rotate(45deg);
		position: absolute;
		top: 23px;
		left: 4px;
		margin: auto;
	}
	&& .select_service_group.open{
		background-color: var(--clinic-Theme-back-color);
		color: var(--clinic-Theme-color);
	}

	/* 施術 */
	&& .select_service_list_item.item{
		border-radius: 10px;
	}
	&& .service_check_area .treatment-image{
		width: 100px;
		max-height: 100%;
	}
	&& .service-setumei{
		color: var(--treatment-setsumei-font-color);
	}

	/* 下部ボタン */
	&& .fixed-bottom{
		height: 50px;
		padding: 5px;
		background-color: rgba(128, 128, 128, 0.8);
		z-index:1000;
	}
	&& .fixed-bottom-margin{
		margin-top: 55px;
	}
}

body.date-select-month{
	/* 日付切り替えボタン */
	&& .date-range .btn,
	&& .date-range .disable{
		width: 80px;
		height: 30px;
		min-height: 30px;
		padding: 0;
		font-weight: normal;
		font-size: 1rem;
	}
	&& .date-select-table td.day.available{
		color: #4466BB;
	}
	&& .date-select-table th.san,
	&& .date-select-table th.holi,
	&& .date-select-table td.day:not(.other-month):first-of-type:not(.selected){
		color: #BB5555;
		background-color: #EEDDD9;
	}
	&& .date-select-table td.day.other-month {
		background-color: #b7b5b5;
	}
	&& .date-select-table th.sat,
	&& .date-select-table td.day:not(.other-month):last-of-type:not(.selected){
		color: #4466BB;
		background-color: #D9E3EC;
	}
	&& .date-select-table td.day.selected {
		background-color: var(--clinic-Theme-back-color);
		color: var(--clinic-Theme-color);
	}

	&& .time-select-table th{
		background-color: var(--clinic-Theme-back-color);
		color: var(--clinic-Theme-color);
	}
	&& .time-select-table td.status.unavailable{
		background-color: #b7b5b5;
	}
	&& .ui-datepicker { 
		z-index: 10000 !important;
	}
}
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;
	}
}

/* login_type=3のログイン＋新規登録画面 */
body.login-signup{
	&& .exist-user-area,
	&& .new-user-area{
		max-width: 500px;
	}
	&& .form-label{
		width: 150px;
	}
	&& .error{
		margin-top: 5px;
	}
}

/* 予約確認画面 */
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;
	}
}