<script setup>
	import DraggableButton from "@/pages/components/goHome.vue";
	/**
	 * name：
	 * user：sa0ChunLuyu
	 * date：2024年9月11日 19:24:50
	 */
	import {
		ref,
		nextTick
	} from "vue";
	import {
		$api,
		$response
	} from "@/api";
	import {
		onShow
	} from "@dcloudio/uni-app";
	import wx from 'weixin-js-sdk'
	import {
		useStore
	} from "@/store";
	const $store = useStore();
	const $props = defineProps({
		id: {
			type: String,
			default: "0",
		},
		test: {
			type: String,
			default: "0",
		},
	});
	let tips_popup = ref(null)
	let erweima_popup = ref(null)
	const fenzhen_list = ref(false);
	const check_tip_show = ref(false);
	const checkTipShow = (show, tj_number) => {
		if (!!show) {
			check_tip_show.value = true
			uni.showModal({
				title: '提示',
				content: '所有项目已完成，请进行检后签到',
				cancelText: '取消',
				confirmText: '确定',
				success: function(res) {
					if (!!res.confirm) {
						CheckedSignIn(tj_number)
					}
				}
			});
		}
	}
	const CheckedSignIn = async (tj_number) => {
		const response = await $api('CheckedSignIn', {
			tj_number
		})
		$response(response, () => {
			window.location.reload()
		})
	}
	const getFenzhenList = async (loading = true) => {
		if (!!loading) {
			//	uni.showLoading();
		}
		const response = await $api("FenzhenList", {
			id: $props.id,
		});
		//uni.hideLoading();
		$response(response, () => {
			fenzhen_list.value = response.data;
			timelineSet(fenzhen_list.value.list)
			if (!check_tip_show.value) {
				checkTipShow(response.data.check_tip, response.data.info.tj_number)
				if (!!check_tip_show.value) {
					return
				}
			}
			if (fenzhen_active.value !== -1) {
				getFenzhenInfo(fenzhen_active.value)
			}
			setTimeout(() => {
				if (!!window.location.href.includes('/pages/user/fenzhen/fenzhen')) {
					if (!window.location.href.includes('192.168.1.118:5173')) {
						if (erweimaText.value == '') {
							getFenzhenList(false)
						}
					} else {
						if (Number($props.test) === 1) {
							if (erweimaText.value == '') {
								getFenzhenList(false)
							}
						}
					}
				}
			}, 1000 * 10)
		});
	};
	const timeline_max = ref(0)
	const timeline_now = ref(0)
	const timeline_step = ref(0)
	const timelineSet = (list) => {
		let maxcount = 0
		let nowcount = 0
		for (let i in list) {
			if (!!list[i]['time']) {
				maxcount++
				if (Number(list[i]['status']) === 4) {
					nowcount++
				}
			}
		}
		timeline_max.value = maxcount
		timeline_now.value = nowcount
		if (!!maxcount && !!nowcount) {
			timeline_step.value = (nowcount / maxcount) * 100
		} else {
			timeline_step.value = 0
		}
		// timeline_step.value = 60
	}

	const mountedAction = () => {
		getFenzhenList();
	};

	const config_ref = ref(null);
	const configRef = (e) => {
		if (!config_ref.value) {
			config_ref.value = e;
			mountedAction();
		}
	};

	const timeShow = (time) => {
		let time_array = time.split(":");
		return `${time_array[0]}:${time_array[1]}`;
	};

	const tip_show = ref(false);
	const tip_content = ref('');
	const getTipContent = async () => {
		uni.showLoading();
		const response = await $api("GetReadme");
		uni.hideLoading();
		$response(response, () => {
			tip_content.value = response.data.content;
			tip_show.value = true;
			tips_popup.value.open()
		});
	};
	const tipShowClick = () => {

		getTipContent();

	};

	const toReport = () => {
		wx.miniProgram.navigateTo({
			url: '/pages/other/entry/index?path=/pages/outpatient/doctor-appointment/index&scene=1002&showArea=0&hospitalAreaId=6&departmentCode=A0030077&subDepartmentCode=4773794195699464904'
		})
	}

	const toRouter = (clinic) => {
		uni.navigateTo({
			url: "/pages/user/fenzhen/xindiantu?id=" + $props.id + '&clinic=' + clinic,
		});
	};
	const fenzhen_active = ref(-1)
	const fenzhen_info = ref(false)
	const infoShowClick = (clinic) => {
		if (clinic !== fenzhen_active.value) {
			fenzhen_info.value = false
			getFenzhenInfo(clinic)
		} else {
			fenzhen_active.value = -1
		}
	}
	const qijian = (item) => {
		uni.navigateTo({
			url: `/pages/user/fenzhen/qijian?id=${$props.id}&xmid=${item.id}&tj_number=${fenzhen_list.value.info.tj_number}`,
		});
	};

	const getFenzhenInfo = async (clinic) => {
		fenzhen_active.value = clinic
		uni.showLoading();
		const response = await $api("FenzhenInfo", {
			id: $props.id,
			clinic: clinic,
		});
		uni.hideLoading();
		$response(response, () => {
			fenzhen_info.value = false
			nextTick(() => {
				fenzhen_info.value = response.data;
			})
		});
	};

	const useTimeShow = (time) => {
		return Math.ceil(Number(time))
	}
	let erweimaText = ref('');
	const erweima_click = (text) => {
		erweimaText.value = text
		erweima_popup.value.open()
	}
	const MaskClickFunc = () => {
		erweimaText.value = ''
		console.log(erweimaText.value)
	}
	const tipsClose = () => {
		tips_popup.value.close();
		tip_show.value = false;
	}
	const processString = (str, substring) => {
		const index = str.indexOf(substring);
		if (index !== -1) {
			// 返回指定子串之后的所有内容
			return str.substring(index + substring.length).trim();
		}
		return ""; // 如果未找到指定子串，则返回空字符串或其他提示信息
	}
	onShow(() => {
		if (!!config_ref.value) {
			mountedAction();
		}
	});
</script>
<template>
	<DraggableButton />
	<view>
		<uni-popup ref="erweima_popup" type="center" :animation="false" @maskClick="MaskClickFunc()">
			<view style="background-color: #fff;padding: 20rpx;border-radius: 10rpx;">
				<view></view>
				<w-qrcode :options="{
				  level: 4,
				  size: 470,
				  code: erweimaText,
				}"></w-qrcode>
			</view>
		</uni-popup>
		<view v-if="!!$store.config">
			<view :ref="configRef"></view>
		</view>
		<uni-popup style="z-index: 999;" ref="tips_popup" type="center" :animation="false" @maskClick="MaskClickFunc()">
			<view class="tip_dialog_wrapper" v-if="!!tip_show">
				<view class="tip_dialog_box_wrapper">
					<view @click="tipsClose()" class="tip_dialog_close_wrapper">
						<image src="@/static/assets/contrast/close@2x.png"></image>
					</view>
					<view class="tip_dialog_text_wrapper" v-html="tip_content"></view>
				</view>
			</view>
		</uni-popup>

		<view v-if="!!fenzhen_list">
			<view class="order_info_wrapper relative">
				<w-qrcode v-if="fenzhen_list.info.kahao" @click="erweima_click(fenzhen_list.info.kahao)"
					class="absolute top-20rpx right-15rpx b-1 b-dashed b-#000 p-8rpx" :options="{
						level: 4,
            size: 130,
            code: fenzhen_list.info.kahao,
          }"></w-qrcode>
				<view class="person_name_wrapper">
					<view class="person_name_text_wrapper">{{
            fenzhen_list.info.name
          }}</view>
					<view class="person_sex_wrapper">{{
            fenzhen_list.info.sex === 1 ? "男士" : "女士"
          }}</view>
				</view>
				<view class="info_box_wrapper">
					<view class="info_wrapper" v-if="!fenzhen_list.info.combo_name.includes('单位团检')">
						<view class="info_title_wrapper">体检套餐：</view>
						<view class="info_text_wrapper">{{ fenzhen_list.info.combo_name }}</view>
					</view>
					<view class="info_wrapper" v-else>
						<view class="info_title_wrapper">体检单位：</view>
						<view class="info_text_wrapper">{{ processString(fenzhen_list.info.combo_name, "单位团检") }}</view>
					</view>
					<view class="info_wrapper info2_wrapper">
						<view class="info_title_wrapper">体检日期：</view>
						<view class="info_text_wrapper">{{
              fenzhen_list.info.check_date
            }}</view>
					</view>
					<view class="info_wrapper info2_wrapper">
						<view class="info_title_wrapper">排队号：</view>
						<view class="info_text_wrapper">{{
              fenzhen_list.info.plan_number
            }}</view>
					</view>
				</view>
				<view class="button_wrapper">
					<view @click="tipShowClick()" class="desc_wrapper">体检注意事项</view>
				</view>
			</view>
			<view class="tip_wrapper">
				<view class="tip_time_wrapper">
					<view class="tip_time_text_wrapper">开始时间</view>
					<view class="tip_time_value_wrapper">{{
            timeShow(fenzhen_list.info.start_time)
          }}</view>
				</view>
				<view class="tip_time_wrapper tip_endtime_wrapper">
					<view class="tip_time_text_wrapper">预计结束</view>
					<view class="tip_time_value_wrapper">{{
				    timeShow(fenzhen_list.info.yuji_end_time)
				  }}</view>
					<view class="tip_time_text_wrapper">— 预计用时</view>
					<view class="tip_time_value_wrapper">{{
						useTimeShow(fenzhen_list.info.yuji_use_time)
					}}</view>
					<view class="tip_time_text_wrapper">分钟</view>
				</view>
				<view class="tip_time_wrapper tip_endtime_wrapper">
					<view class="tip_time_text_wrapper">结束时间</view>
					<view class="tip_time_value_wrapper">{{
				    timeShow(fenzhen_list.info.end_time)
				  }}</view>
					<view class="tip_time_text_wrapper">— 实际用时</view>
					<view class="tip_time_value_wrapper">{{
						useTimeShow(fenzhen_list.info.use_time)
					}}</view>
					<view class="tip_time_text_wrapper">分钟</view>
				</view>
				<view class="timeline_wrapper">
					<view class="timeline_dot" :style="{
						left : `${timeline_step}%`,
						background : `${timeline_step>=100?'#239EA3':'#FF9900'}`,
					}"></view>
					<view class="timeline_in" :style="{
						width : `${timeline_step}%`,
						background : `${timeline_step>=100?'#239EA3':'#FF9900'}`,
					}"></view>
				</view>
				<view class="tip_box_wrapper">
					<view class="tip_icon_wrapper">
						<image src="@/static/assets/fenzhen/tip@2x.png"></image>
					</view>
					<view class="tip_text_wrapper">尊敬的客户，为了使您的体检流程更加顺畅，请按以下步骤提
						示顺序逐项完成体检。</view>
				</view>
			</view>
			<view class="time_line_wrapper">
				<view class="time_line_title_wrapper">自助导检</view>
				<view class="time_line_box_wrapper">
					<view v-for="(i, k) in fenzhen_list.list" :key="k">
						<view class="time_line_item_wrapper" :class="[`time_line_item-${i.status}_wrapper`]">
							<view class="time_line_item_time_wrapper" v-if="i.name!='体检结束'">
								<view v-if="!!i.time" class="time_line_item_time_value_wrapper">{{
						      i.time
						    }}</view>
								<view class="time_line_item_time_dot_wrapper">
									<view class="time_line_item_time_dot_in_wrapper"></view>
								</view>
								<view v-if="!!i.time" class="time_line_item_time_line_wrapper"></view>
								<view v-if="!i.time" class="time_line_item_time_cover_wrapper"></view>
							</view>
							<view class="time_line_item_content_wrapper" v-if="i.name!='体检结束'">
								<view class="time_line_item_triangle_wrapper"></view>
								<view class="time_line_item_flex_wrapper" v-if="i.name!='体检结束'">
									<view class="time_line_item_title_wrapper">{{ k + 1 }}.{{ i.name }}</view>
									<view class="time_line_item_box_wrapper">{{ i.desc }}</view>
								</view>
								<view v-if="!!i.time && !!i.tip" class="time_line_item_line_wrapper"></view>
								<view v-if="!!i.time && !!i.tip" class="time_line_item_flex_wrapper">
									<view class="time_line_item_text_wrapper">{{ i.tip }}</view>
									<view v-if="i.more !== 0" class="time_line_item_more_wrapper" @click="infoShowClick(i.more)">查看详情>>
									</view>
								</view>

								<view class="more_wrapper mt-20rpx" v-if="i.more === fenzhen_active && !!fenzhen_info">
									<template v-for="(item, index) in fenzhen_info.list" :key="index">
										<view class="between min-h-90rpx py-10rpx b-0 b-b-1 b-solid b-#EAEAEA"
											v-if="item.status == 1 || item.status == 2">
											<view class="flex-1 text-#000000 text-30rpx break-all">{{ item.name }}</view>
											<view class="center shrink-0">
												<text @click="qijian(item)"
													class="rounded-full text-28rpx center w-105rpx h-48rpx text-#E95515 bg-#FAECE6">弃检</text>
											</view>
										</view>
										<view class="between min-h-90rpx py-10rpx b-0 b-b-1 b-solid b-#EAEAEA" v-if="item.status == 4">
											<view class="flex-1 text-#000000 text-30rpx break-all">
												<view>{{ item.name }}</view>
												<view class="text-#141414 text-28rpx">{{ item.time }}</view>
											</view>
											<view class="center shrink-0">
												<text
													class="rounded-full text-28rpx center w-105rpx h-48rpx mr-30rpx text-#239EA3 bg-#E5F3F2">完成</text>
											</view>
										</view>
										<view class="between min-h-90rpx py-10rpx b-0 b-b-1 b-solid b-#EAEAEA" v-if="item.status == 5">
											<view class="flex-1 text-#000000 text-30rpx break-all">
												<view>{{ item.name }}</view>
												<view class="text-#141414 text-28rpx">{{ item.time }}</view>
											</view>
											<view class="center shrink-0">
												<text class="rounded-full text-28rpx center w-105rpx h-48rpx text-#6d89a3 bg-#E5F3F2">已弃检</text>
											</view>
										</view>
										<view class="item_desc_wrapper b-0 b-b-1 b-solid b-#EAEAEA pb-5rpx">{{ item.desc }}</view>
									</template>
								</view>
							</view>
						</view>
					</view>
					<view class="report_wrapper">
						<view v-if="fenzhen_list.report != -1" @click="toReport()" class="report_button_wrapper">
							预约解读
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<style scoped>
	.timeline_dot {
		position: absolute;
		top: 50%;
		width: 40rpx;
		height: 40rpx;
		border-radius: 20rpx;
		transform: translate(-50%, -50%);
	}

	.timeline_in {
		height: 20rpx;
		border-radius: 8rpx 5rpx 5rpx 8rpx;
	}

	.timeline_wrapper {
		width: 100%;
		height: 20rpx;
		background: #cccccc;
		margin: 25rpx auto 0;
		border-radius: 8rpx;
		position: relative;
	}

	.item_desc_wrapper {
		font-size: 22rpx;
		color: red;
		margin-top: 10rpx;
	}

	.more_wrapper {
		padding: 20rpx;
	}

	.report_tip_wrapper {
		font-weight: 500;
		font-size: 28rpx;
		color: #239EA3;
		line-height: 90rpx;
		margin-right: 29rpx;
	}

	.report_wrapper {
		display: flex;
		justify-content: end;
	}

	.report_button_wrapper {
		width: 200rpx;
		height: 60rpx;
		background: #239ea3;
		border-radius: 30rpx;
		font-size: 24rpx;
		color: #ffffff;
		line-height: 60rpx;
		text-align: center;
		margin-right: 29rpx;
		margin-top: 50rpx;
	}

	.tip_dialog_text_wrapper {
		max-height: calc(100vh - 600rpx);
		overflow-y: auto;
	}

	.tip_dialog_wrapper {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		width: 750rpx;
		background: #00000060;
		margin: 0 auto;
		z-index: 9999;
	}

	.tip_dialog_close_wrapper {
		position: absolute;
		top: 30rpx;
		right: 40rpx;
		width: 26rpx;
		height: 26rpx;
	}

	.tip_dialog_close_wrapper image {
		width: 26rpx;
		height: 26rpx;
		display: block;
		object-fit: contain;
	}

	.tip_dialog_box_wrapper {
		position: absolute;
		width: 610rpx;
		background: #ffffff;
		border-radius: 15rpx;
		padding-left: 50rpx;
		padding-right: 50rpx;
		padding-bottom: 60rpx;
		padding-top: 80rpx;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		font-size: 28rpx;
		line-height: 56rpx;
		color: #666;
	}

	.time_line_item_more_wrapper {
		font-size: 22rpx;
		color: #239ea3;
		line-height: 1;
		text-decoration-line: underline;
		margin-right: 19rpx;
		flex-shrink: 0;
	}

	.time_line_item_text_wrapper {
		font-weight: 500;
		font-size: 24rpx;
		color: #6e6e6e;
		line-height: 1;
		margin-left: 42rpx;
		/* width: calc(100% - 210rpx); */
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.time_line_item_line_wrapper {
		width: 550rpx;
		height: 1rpx;
		background: #e8e8e8;
		border-radius: 1rpx;
		margin: 13rpx auto 5rpx;
	}

	.time_line_item_box_wrapper {
		width: 400rpx;
		overflow: hidden;
		margin-left: 20rpx;
		height: 40rpx;
		background: #5a75ca30;
		border-radius: 5rpx;
		font-weight: 500;
		font-size: 24rpx;
		color: #5a75ca;
		line-height: 40rpx;
		text-align: center;
		margin-right: 17rpx;
	}

	.time_line_item_title_wrapper {
		width: 170rpx;
		font-weight: bold;
		font-size: 28rpx;
		color: #0d0d0d;
		line-height: 40rpx;
		height: 40rpx;
		margin-left: 22rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		flex-shrink: 0;
	}

	.time_line_item_flex_wrapper {
		margin-top: 15rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.time_line_item_time_cover_wrapper {
		position: absolute;
		width: 2rpx;
		top: -36rpx;
		height: 100rpx;
		left: 50%;
		background: #ffffff;
		transform: translateX(-50%);
		z-index: 99;
	}

	.time_line_item_time_line_wrapper {
		position: absolute;
		width: 2rpx;
		top: 0;
		bottom: 0;
		left: 50%;
		background: #dedede;
		transform: translateX(-50%);
	}

	.time_line_item_time_dot_wrapper {
		position: absolute;
		width: 16rpx;
		height: 16rpx;
		background: #cfcece60;
		border-radius: 50%;
		left: 50%;
		top: 50%;
		transform: translate(-50%, calc(-50% + 26rpx));
		z-index: 998;
	}

	.time_line_item_time_dot_in_wrapper {
		width: 8rpx;
		height: 8rpx;
		background: #cfcece;
		border-radius: 50%;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	}

	.time_line_box_wrapper {
		margin-top: 28rpx;
	}

	.time_line_item_triangle_wrapper {
		width: 16rpx;
		height: 16rpx;
		border-left: 1rpx #e8e8e8 solid;
		border-bottom: 1rpx #e8e8e8 solid;
		background: #f8f8f8;
		position: absolute;
		top: 50%;
		left: -10rpx;
		transform: rotate(45deg);
	}

	.time_line_item_content_wrapper {
		width: 590rpx;
		background: #f8f8f8;
		border-radius: 5rpx;
		margin-left: 12rpx;
		position: relative;
		border: 1rpx #e8e8e8 solid;
		margin-top: 36rpx;
		padding-bottom: 15rpx;
	}

	.time_line_item_time_value_wrapper {
		width: 90rpx;
		height: 55rpx;
		background: #e4e4e4;
		border-radius: 28rpx;
		font-weight: 500;
		font-size: 28rpx;
		color: #212121;
		line-height: 55rpx;
		text-align: center;
		position: relative;
		z-index: 20;
	}

	.time_line_item_time_wrapper {
		width: 90rpx;
		position: absolute;
		left: 6rpx;
		right: 0;
		top: 0;
		bottom: 0;
	}

	.time_line_item_wrapper {
		width: calc(90rpx + 12rpx + 590rpx);
		display: flex;
		justify-content: end;
		margin: 0 auto;
		position: relative;
	}

	.time_line_title_wrapper {
		width: 180rpx;
		height: 60rpx;
		background: linear-gradient(90deg, #edf6f5 0%, #bbdfe1 99%);
		border-radius: 0rpx 30rpx 30rpx 0rpx;
		font-weight: bold;
		font-size: 25rpx;
		color: #123531;
		text-align: center;
		line-height: 60rpx;
		margin-top: 26rpx;
		overflow: hidden;
	}

	.time_line_wrapper {
		width: 710rpx;
		background: #ffffff;
		box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0, 0, 0, 0.04);
		border-radius: 15rpx;
		margin: 53rpx auto 0;
		overflow: hidden;
		position: relative;
		padding-bottom: 30rpx;
	}

	.tip_text_wrapper {
		font-weight: 400;
		font-size: 22rpx;
		color: #e95515;
		line-height: 36rpx;
		margin-left: 10rpx;
	}

	.tip_icon_wrapper {
		width: 24rpx;
		height: 24rpx;
		margin-top: 5rpx;
	}

	.tip_icon_wrapper image {
		width: 24rpx;
		height: 24rpx;
		display: block;
		object-fit: contain;
	}

	.tip_box_wrapper {
		display: flex;
		margin-top: 20rpx;
	}

	.tip_time_value_wrapper {
		font-size: 36rpx;
		color: #239ea3;
		margin: 0 10rpx;
	}

	.tip_time_text_wrapper {
		font-size: 22rpx;
		color: #161616;
	}

	.tip_time_wrapper {
		display: flex;
		align-items: end;
		line-height: 1;
	}

	.tip_endtime_wrapper {
		margin-top: 20rpx;
	}

	.tip_wrapper {
		width: calc(100% - 50px);
		margin: 32rpx auto 0;
	}

	.info2_wrapper {
		margin-top: 30rpx;
	}

	.info_box_wrapper {
		margin-top: 30rpx;
		margin-left: 29rpx;
	}

	.button_wrapper {
		display: flex;
		justify-content: end;
	}

	.desc_wrapper {
		width: 160rpx;
		height: 48rpx;
		background: #239ea3;
		border-radius: 5rpx;
		font-size: 20rpx;
		color: #ffffff;
		line-height: 48rpx;
		text-align: center;
		margin-right: 29rpx;
		margin-top: 0rpx;
	}

	.info_wrapper {
		display: flex;
		align-items: center;
	}

	.info_text_wrapper {
		font-size: 24rpx;
		color: #0f0f0f;
		line-height: 1;
	}

	.info_title_wrapper {
		font-size: 24rpx;
		color: #8b8b8b;
		line-height: 1;
	}

	.order_info_wrapper {
		width: 710rpx;
		height: 360rpx;
		background: #ffffff;
		box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0, 0, 0, 0.04);
		border-radius: 15rpx;
		margin: 20rpx auto 0;
		overflow: hidden;
	}

	.person_name_wrapper {
		display: flex;
		align-items: end;
		margin-top: 72rpx;
		margin-left: 29rpx;
	}

	.person_name_text_wrapper {
		font-weight: bold;
		font-size: 34rpx;
		color: #171717;
	}

	.person_sex_wrapper {
		font-size: 24rpx;
		color: #7e7e7e;
		margin-left: 15rpx;
	}

	.time_line_item-2_wrapper .time_line_item_time_value_wrapper,
	.time_line_item-1_wrapper .time_line_item_time_value_wrapper {
		background: #239ea3;
		color: #f8f8f8;
	}

	.time_line_item-2_wrapper .time_line_item_time_dot_wrapper,
	.time_line_item-1_wrapper .time_line_item_time_dot_wrapper {
		background: #239ea360;
	}

	.time_line_item-2_wrapper .time_line_item_time_dot_in_wrapper,
	.time_line_item-1_wrapper .time_line_item_time_dot_in_wrapper {
		background: #239ea3;
	}

	.time_line_item-2_wrapper .time_line_item_box_wrapper,
	.time_line_item-1_wrapper .time_line_item_box_wrapper {
		background: #6cafb230;
		color: #239ea3;
	}

	.time_line_item--1_wrapper .time_line_item_time_value_wrapper {
		background: #239ea3;
		color: #f8f8f8;
	}

	.time_line_item--1_wrapper .time_line_item_time_dot_wrapper {
		background: #239ea360;
	}

	.time_line_item--1_wrapper .time_line_item_time_dot_in_wrapper {
		background: #239ea3;
	}

	.time_line_item--1_wrapper .time_line_item_box_wrapper {
		background: #e1af6830;
		color: #cc913e;
	}
</style>