@import "./mixin.scss";

.trailList {
	// overflow: scroll;
	// box-sizing: border-box;
	.item {
		padding: 3vw;
		margin: 3vw;
		border-radius: 1vw;
		@include font_color($font-color-theme);
		// box-shadow: inset 0px 0px 2.66667vw 0px #63acff !important;

		.warning_time {
			position: relative;
			@include font_size($font_medium_s);
			.timeicon {
				width: 2.93334vw;
				height: 2.93334vw;
				margin-right: 1vw;
				vertical-align: middle;
			}

			.ststus {
				position: absolute;
				top: 0;
				right: 0;
				font-size: 10px;
				border-radius: 3px;
				display: inline-block;
				padding: 1px 5px;
			}
			.red {
				border: 1px solid red !important;
				color: red !important;
			}

			.orange {
				border: 1px solid orange !important;
				color: orange !important;
			}

			.yellow {
				border: 1px solid #ffcc40 !important;
				color: #ffcc40 !important;
			}

			.dfk {
				border: 1px solid #63acff !important;
				color: #63acff !important;
			}

			.green {
				border: 1px solid green !important;
				color: green !important;
			}

			.blue {
				border: 1px solid blue !important;
				color: blue !important;
			}

		}

		.detail_info {
			display: flex;
			@include font_color($font-color-theme);
			
			>img {
				height: 22vw;
				width: 20vw;
			}

			.waring_detail {
				// margin-left: 2vw;
				width: 100%;
				// color: #e1e1e1;
				@include font_size($font_medium);
				&>div {
					margin: 2vw 0;
				}

				.disp {
					@include font_size($font_medium_s);
					display: flex;
					justify-content: space-between;
				}

				.titles {
					font-size: 3.96667vw;
					font-weight: 600;

				}
			}
		}
	}

	.empty {
		span-align: center;
		padding-top: 20vw;
		color: #999;
	}
}
