@charset "UTF-8";
@import url("/assets/common/css/font.css");

* {
	font-family: Noto Sans KR;
    margin: 0px;
    padding: 0px;
    font-weight: 500;
}

#breadcrums {
	height: 100%;
	background-color: white;
}

.timeline_header {
	height: 34px;
	background: #113E46 0% 0% no-repeat padding-box;
	box-shadow: 0px -3px 6px #00000029;
	border-radius: 2px 2px 0px 0px;
}

.timeline_header_btn {
	position: absolute;
	right: 0px;
	width: 116px;
	height: 34px;
	background: url(/assets/image/breadcrums/bt_breadcrumb_spread_on_n.png);
	background-repeat: no-repeat;
	opacity: 1;
}

.timeline_body{
	padding:10px;
	width: 100%;
}

.rider-info {
	width: 355px;
	height:200px;
	float:left;
}

.desti-info {
	float:left;
	width: calc(100% - 355px);
	height:200px;
	overflow-y:hidden;
	overflow-x:auto;
	white-space:nowrap;
}

.timeline_content {
	height:160px;
	width:100%;
	overflow-y:auto;
	scrollbar-width: none;
}

.timeline_content .rider_timeline:nth-child(odd),
.timeline_content .desti_timeline:nth-child(odd) {
	background-color: rgba(244, 244, 244, 0.3);
}

/* 세로 스크롤 없애기 (width값이 가변이어서 보이는게 이상) */
.timeline_content::-webkit-scrollbar { 
    display: none; 
}

.desti-info .wrap {
	display: inline-block;
}

.desti-info .wrap .timeline_top .timeline_btn {
	position: absolute;
	right: 12px;
	z-index: 2;
}


.timeline_top .timeline_btn .zoomIn,
.timeline_top .timeline_btn .zoomOut {
	width: 16px;
	height: 16px;
	line-height: 16px;
	background: #B5C0C2 0% 0%;
	border: none;
	border-radius: 2px;
	color:#fff;
}

.timeline_title {
	display: flex;
	margin: 0px;
	height: 24px;
	background: #6A8086 0% 0% no-repeat padding-box;
}

.timeline_title .title,
.timeline_title .time {
	padding-left: 10px;
	font-size: 12px;
	height: 24px;
	line-height: 24px;
	color:#fff;
	background: #6A8086 0% 0% no-repeat padding-box;
}

.timeline_title .title {
	border-right: 1px solid #1D3244;
}

.desti-info .wrap .timeline_content
{
	display: inline-block;
	border-left:1px solid #D7DCDD;
}

.rider_timeline {
	display: flex;
	padding : 5px;
	height: 67px;
}

/* title finish */

.rider-info .rider_timeline > div,
.desti-info .rider_timeline > div {
	display:inline-block;
	position:relative;
	color:#666;
	height:52px;
}

/* rider start */
.driver_info > div {
	display:inline-block;
	position:relative;
}

.rider_timeline {
	display: flex;
	height: 67px;
}

.breadcrum_list_left_data:nth-child(odd) {
	background-color: #F4F4F4;
}

.breadcrum_list_photo{
	top:13px;
	left: 5px;
	width: 40px;
	height: 40px;
}

.breadcrum_driverInfo {
	top:13px;
	left:5px;
	width: 100px;
	height: 40px;
}

.breadcrum_driverList_circle {
	position: relative;
	top: 5px;
	left: 8px;
    width: 6px;
    height: 6px;
    border-radius: 3px;
    margin-right: 5px;
}

.breadcrum_driverList_circle.connected {
	background-color: #6DE621;
}

.breadcrum_driverList_circle.start_work {
	background-color: #00EEFF;
}

.breadcrum_driverList_circle.end_work {
	background-color: #C6CACE;
}

.breadcrum_driverList_circle.disconnected {
	background-color: #FF6077;
}

.breadcrum_driverName {
	position: relative;
	top: -6px;
	left: 20px;
	width: 100px;
	height: 18px;
	font-size: 12px;
}

.breadcrum_driverState{
	position: relative;
	top: -8px;
	left:10px;
	width: 90px;
	height: 18px;
	font-size: 12px;
}

.breadcrum_licensePlate {
	position: relative;
	top: 50%;
	transform: translateY(-50%);
	font-size: 12px;
}

.breadcrum_gauge1{
	position: relative;
	top:20px;
	left: 10px;
	width: 80px;
	height: 23px;
	border: 1px solid;
	border-radius: 3px;
	overflow: hidden;
}

.breadcrum_gauge1.delivery {
	background-color:#D0DFED;
	border-color: #439DF7;
}

.breadcrum_gauge1.comply {
	background-color:#D5E3CC;
	border-color: #50D000;
}

.breadcrum_gauge1_1{
	position: relative;
	top:0px;
	left: 0px;
	height: 23px;
	border: 1px solid;
	border-radius: 2px;
}

.breadcrum_gauge1.delivery .breadcrum_gauge1_1 {
	background-color:#439DF7;
	border-color: #439DF7;
}

.breadcrum_gauge1.comply .breadcrum_gauge1_1 {
	background-color:#50D000;
	border-color: #50D000;
}

.breadcrum_gauge_num{
	position: absolute;
	top:0;
	left: 0;
	width:80px;
	height: 23px;
	line-height: 23px;
	text-align: center;
	color: #fff;
	font-weight: 300;
	font-size: 11px;
}
/* left finish */

/* right start */
.desti-info .rider_timeline .desti_item {
	position: relative;
	margin-top:14px;
}

.desti-info .rider_timeline .desti_item .time,
.desti-info .rider_timeline .desti_item .icon  {
	display:inline-block;
}

.desti-info .rider_timeline .desti_item .timeline {
	position: relative;
	top:10px;
	height:10px;
	line-height: 10px;
	right:17px;
	background:#439DF7;
	z-index: 0;
	text-align:center;
	font-weight:normal;
	font-size: 9px;
	color: white;
	overflow: hidden;
}

.desti-info .rider_timeline .desti_item .icon {
	width: 36px;
}

.desti-info .rider_timeline .desti_item .icon img {
	position: absolute;
	top:0;
	right:0;
    width : 34px;
	height: 34px;
	z-index: 2;
}

.desti-info .rider_timeline .desti_item .icon img.plusIcon {
	right: 5px;
	width: 10px;
	height:10px;
	z-index: 3;
}
.desti-info .rider_timeline .desti_item .icon .tooltip {
	width : 34px;
	height: 34px;
	position: absolute;
    top: 0;
    right: 0;
}

.desti-info .rider_timeline .desti_item .icon span {
	width: 34px;
	line-height: 26px;		/* 수직 정렬처럼 보이기 위한 꼼수 (icon height와 동일해야 하지만 안맞아서 약간 줄임) */
	position: absolute;
	text-align:center;
	font-size: 12px;
	font-weight:normal;
	z-index: 3;
}

.desti-info .rider_timeline .desti_item .icon p {
	width: 34px;
	position: absolute;
	bottom:0;
	right: 0;
	text-align:center;
	font-size: 9px;
	font-weight:normal;
	z-index: 3;
	/* transform: translate( -50%, -50% ); */
}


.desti-info .rider_timeline .desti_item.ing .timeline {
	background:linear-gradient( to right, #C4C4C4 50%, #FF5A86 50%);
}

.desti-info .rider_timeline .desti_item.pass .timeline {
	background:#C4C4C4;
}

.desti-info .rider_timeline .desti_item.fix .timeline {
	background:#FF5A86;
}

/* 1번째 목적지는 파란색  */
.desti-info .rider_timeline .desti_item:nth-child(2) .timeline {
	background:#2D6DD6;
}
.desti-info .rider_timeline .desti_item.pass:nth-child(2) .timeline {
	background:#C4C4C4;
}

.desti-info .rider_timeline .desti_item.ing:nth-child(2) .timeline {
	background:linear-gradient(to right, #C4C4C4 50%, #2D6DD6 50%);
}

*.unselectable {
   -moz-user-select: -moz-none;
   -khtml-user-select: none;
   -webkit-user-select: none;

   /*
     Introduced in IE 10.
     See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
   */
   -ms-user-select: none;
   user-select: none;
}