/* Custom CSS*/

:root,[data-bs-theme=light] {
    --bs-yellow: #EFB73E;
}

body {
    padding-top: 70px;
}

h3 {
	margin-bottom:15px;
}

ul.theme-list { list-style:none; padding:0px; margin:0px;}
ul.theme-list > li { float:left; margin-right:10px;}


@media (min-width: 768px) {
	.form-horizontal .col-form-label {
		text-align: right;
	}
}


.uat-version { position:fixed; bottom:0; right:0; background-color:#F0F; color:white; padding:0 5px;}

.deleted { text-decoration:line-through; color:red;}

.icon-print,
.icon-preview,
.icon-pencil,
.icon-remove,
.icon-delete,
.icon-trash,
.icon-preview,
.icon-pointer,
.icon-upload-picture {cursor:pointer}

table th.sortheader { background-image: url('images/tablelist/bg.gif'); background-repeat: no-repeat; background-position: center right; cursor:pointer; }
table th.sortheader:hover {}
table th.sortheader.headerSortUp { background-image: url('images/tablelist/asc.gif'); }
table th.sortheader.headerSortDown { background-image: url('images/tablelist/desc.gif'); }

.job-status {
    border: 1px solid darkgray;
    border-radius: 3px;
    padding: 2px 4px 2px 2px;
    margin-right: 3px;
    font-size: 20px;
	cursor:pointer;
    background-color: white;
}

.job-status .icon-key-sent {color:#EEEEEE}
.job-status .icon-key-returned {color:#555555}
.job-status .icon-key-received {color:#555555}
.job-status .icon-key-return {}
.job-status .icon-job-completed {color:yellowgreen}
.job-status .fa-exclamation-triangle { color:#EE6500}

.age-day { font-size:11px;}

.job-status .fa-comment-o, 
.job-status .fa-comment { position:relative; top:-2px; color:var(--bs-secondary); }

/*
.job-status.status-blue .fa-user,
.job-status.status-blue .fa-comment-o { color:var(--bs-blue) }
.job-status.status-yellow .fa-user,
.job-status.status-yellow .fa-comment-o { color:var(--bs-yellow) }
.job-status.status-red .fa-user,
.job-status.status-red .fa-comment-o { color:var(--bs-red) }
.job-status.status-green .fa-user,
.job-status.status-green .fa-comment-o { color:var(--bs-green) }
.job-status.status-gray .fa-user,
.job-status.status-gray .fa-comment-o { color:var(--bs-secondary) }
*/

.job-icon { width: 26px;
    height: 26px;
    padding: 0px;
    border-radius: 50%;
    overflow: hidden;
    background-color: white;
    /* border: 1px solid black; */
    margin: -5px 0px 0px 0px;
    left: 5px;
    top: 0px;
}



.TaskInfo .dropdown-menu {
	padding:0px;
}

.job-status-details-header {
	display: flex!important;
    align-items: center;
}

/*
.job-status-details.status-blue { color:var(--bs-blue) }
.job-status-details.status-yellow { color:var(--bs-yellow) }
.job-status-details.status-red { color:var(--bs-red) }
.job-status-details.status-green { color:var(--bs-green) }
.job-status-details.status-gray { color:var(--bs-secondary) }
*/

.job-status-details-header > div:nth-child(1) { padding-right:0px; }
.job-status-details-header > div { padding-right:5px; }

.job-status-details-body {
	min-height: 20px;
    max-height: 250px;
    overflow-y: auto;
}

.job-status-details .job-icon {
	position:inherit;
}

.icon-jobtype {
	width: 20px;
    height: 20px;
    position: relative;
    top: -2px;
}
	
.VehiclePlateNo { font-weight:bold; padding:2px 5px; ; }

.input-loading { background-image:url(images/ajax-loading.gif); background-repeat:no-repeat; background-position:right 5px center}
.command-button { min-width:120px;}

.task .form-check-label { cursor:pointer}

.task-list-header > tr > td:nth-child(1) {width:120px; text-align:center}
.task-list-header > tr > td:nth-child(2) {}
.task-list-header > tr > td:nth-child(3) {}
.task-list-header > tr > td:nth-child(4) {width:250px; text-align:center}
.task-list-header > tr > td:nth-child(5) {width:50px; text-align:center}
.task-list-header > tr > td:nth-child(6) {width:50px; text-align:center}

.task-list > tr > td:nth-child(1) {text-align:center}
.task-list > tr > td:nth-child(2) {}
.task-list > tr > td:nth-child(3) {}
.task-list > tr > td:nth-child(4) {text-align:center}
.task-list > tr > td:nth-child(5) {text-align:center}
.task-list > tr > td:nth-child(6) {text-align:center}

.icon-remove-task { cursor:pointer; }

.alert p {margin-botom:0px;}

.age-day { font-size:11px;}
#record-list > tr.record-row > td span.age-day {
	padding: 3px 5px;
	margin-right: 4px;
	text-align: center;
	border-radius: 5px;
	box-shadow: 1px 1px 1px grey;
	user-select: none;
}

#record-list > tr.record-row.aging-1 > td span.age-day{ background-color:var(--bs-green); color:white;}
#record-list > tr.record-row.aging-2 > td span.age-day{ background-color:var(--bs-yellow); color:white;}
#record-list > tr.record-row.aging-3 > td span.age-day{ background-color:var(--bs-red); color:white;}
.age-day { display:none !important;}
#record-list > tr.record-row.selected { border-bottom:2px solid var(--bs-orange)}
#record-list > tr.record-row.rejected .StatusName { color:red !important; }

.icon-isurgent { cursor:pointer}
.icon-isurgent.fa-flag { color:red}

.vendor-name {text-align:center}
.vendor-task {text-align:center}
.alert-dismissible > p { margin-bottom:0;}

/*Process Tasks*/

/*.row-task-details[IsCompleted="1"][IsRedo="0"][IsRejected="0"] td { color:var(--bs-green) }*/
.row-task-details[IsRejected="-1"] td { color:var(--bs-red)}
.row-task-details[IsRedo="-1"] td { color:var(--bs-red) }


.row-task-details .task-icon { width:18px; height:18px; color:#CCC; border:1px solid #CCC;; cursor:pointer}
.row-task-details .task-icon:hover { border:1px solid #999;}

.row-task-details[IsCompleted="1"] .task-icon.fa.fa-check{ color:var(--bs-green)}
.row-task-details[IsCompleted="-1"][IsRejected="-1"] .task-icon.fa.fa-check{ color:var(--bs-red)}
.row-task-details[IsRedo="-1"] .task-icon.fa.fa-check{ color:var(--bs-green)}

.task-icon.fa.fa-remove{ color:var(--bs-red)}
.task-icon.fa.fa-clock-o{ color:var(--bs-gray)}

.row-task-details .task-icon.fa-refresh { border:1px solid white;}

.row-jobsheet-picture,
.row-jobsheet-remarks,
.row-jobsheet-remark-update-button { display:none;}

.jobsheet-picture-list { float: left; width: 100%; display: block;}
.jobsheet-picture-list > div { float:left; display:inline-block; margin-right:5px; margin-bottom:5px;}
.jobsheet-picture-list > div > a > img { height:80px; }

.jobsheet-picture { position:relative; }

.jobsheet-picture .fa { position:absolute; bottom:5px; padding:1px; border-radius:2px; background-color:white; color:black; cursor:pointer; display:none}
.jobsheet-picture:hover .fa { display:block; }
.jobsheet-picture .fa.fa-pencil { left:5px; }
.jobsheet-picture .fa.fa-remove { right:5px;}
.jobsheet-picture .fa-spinner { display:block }

.message-list {}
.message-row { display:flex; margin-top:15px; }
.message-row .message-user-photo > img { width:25px; height:25px; border-radius:50%; overflow:hidden }
.message-row > div.message-user-photo { width:11%; }
.message-row > div.message-body { position:relative; width:78%; background-color:#EEEEEE; padding:10px; border-radius:10px 10px 10px 10px; position:relative; padding-bottom:20px; }
.message-row > div.message-empty { width:11%; }
.message-row > div.message-body > div.message-datetime { position:absolute; bottom:5px; right:10px; font-size:0.75em; }
.message-row > div.message-body > div.message-user {font-size:0.75em; font-weight:bold }
.message-row > div.message-body:after {
	content: '';
    position: absolute;
    border-style: solid;
    border-color: transparent #EEEEEE;
    display: block;
    width: 0;
    z-index: 1;
    top:0px;
}

.message-row.message-continue > div.message-body:after {display:none;}
.message-row.message-left > div.message-body:after {border-width: 0px 10px 10px 0;; left:-10px;}
.message-row.message-right > div.message-body:after {border-width: 0px 0px 10px 10px; right:-10px;}
.message-row.message-left > div.message-body {border-radius:0px 10px 10px 10px;}
.message-row.message-right > div.message-body {border-radius:10px 0px 10px 10px;}
.message-row.message-continue > div.message-body {border-radius:10px 10px 10px 10px !important;}
.message-row.message-continue { margin-top:2px; }

.job-icon.message-job-icon { position:inherit; }

.message-body img { width:100%; }

.tasks.redo { color: var(--bs-red) !important;}

.jobsheet-message.jobsheet-new-message { position:relative;}
.jobsheet-message.jobsheet-new-message:after {
	content: "\f12a";
    position: absolute;
    font-size: 13px;
    display: block;
    z-index: 1;
    top: -4px;
    right: -8px;
    color: white;
    border-radius: 50%;
    background-color: red;
    padding: 1px 6px;
    font-weight: bold;
    text-align: center;
}


.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover {
    border: 1px solid #003eff;
    background: var(--bs-primary);
    font-weight: normal;
    color: var(--bs-white);
}


#select-add-task option:disabled {color:#EEEEEE}


.jobsheet-tracks-container { padding:10px 20px;}

table.jobsheet-tracks-jobsheet-list-table {}
table.jobsheet-tracks-jobsheet-list-table > tbody > tr {}
table.jobsheet-tracks-jobsheet-list-table > tbody > tr > td { padding:3px; font-size:13px; }

table.jobsheet-tracks-jobsheet-list-table .job-icon {width:26px; height:26px;}

.jobsheets-countup.level-0 { color:var(--bs-blue);}
.jobsheets-countup.level-1 { color:var(--bs-yellow);}
.jobsheets-countup.level-2 { color:var(--bs-red);}

.jobsheets-countup.completed.level-0 { color:var(--bs-green);}
/*
.jobsheets-countup.in-progress { color:var(--bs-blue);}
.jobsheets-countup.completed.over-slatimer { color:var(--bs-red);}
.jobsheets-countup.in-progress.over-slatimer { color:var(--bs-red);}
*/
.jobsheet-tracks-plate-no {font-weight: bold; font-size:18px;}

ul.jobsheet-tracks { padding:0; margin:0; list-style:none; width:100%}
ul.jobsheet-tracks > li { padding:3px; width:100% }


ul.jobsheet-tracks-horizontal {padding:20px; margin:0; list-style:none; position:relative; font-size:10px; width:100%; height:200px; 
	display:flex; overflow-x: auto; flex-wrap: nowrap; /* [1] */
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	-ms-overflow-style: -ms-autohiding-scrollbar;
}

ul.jobsheet-tracks-horizontal::-webkit-scrollbar {
	display: none; 
}

ul.jobsheet-tracks-horizontal:before {
	content: ' ';
	position:absolute;
	top:100px;
	display:inline-block;
	border-bottom:2px solid #4376C7;
	width:100%;
}

ul.jobsheet-tracks-horizontal> li { padding:3px; width:60px; flex: 0 0 auto; position:relative  }

ul.jobsheet-tracks-horizontal> li.sent:before,
ul.jobsheet-tracks-horizontal> li.collected:before,
ul.jobsheet-tracks-horizontal> li.received:before,
ul.jobsheet-tracks-horizontal> li.completed:before,
ul.jobsheet-tracks-horizontal> li.returned:before {
	content: ' ';
	position:absolute;
	left:50%;
	width:4px;
	height:25px;
	display:inline-block;
}
ul.jobsheet-tracks-horizontal> li.sent:before {
	top:55px;
	background-color:#4376C7;
}
ul.jobsheet-tracks-horizontal> li.collected:before {
	top:55px;
	background-color:#4376C7;
}
ul.jobsheet-tracks-horizontal> li.received:before {
	top:80px;
	background-color:#4376C7;
}
ul.jobsheet-tracks-horizontal> li.completed:before {
	top:80px;
	background-color:var(--bs-green);
}
ul.jobsheet-tracks-horizontal> li.returned:before {
	top:55px;
	background-color:#4376C7;
}


ul.jobsheet-tracks-horizontal> li .delivery-date { position:absolute; left:0px; width:60px; text-align:center; white-space:nowrap}
ul.jobsheet-tracks-horizontal> li .delivery-time { position:absolute; left:0px; width:60px; text-align:center; white-space:nowrap}
ul.jobsheet-tracks-horizontal> li .delivery-by { position:absolute; left:0px; top:0px; width:60px; text-align:center; white-space:nowrap;}
ul.jobsheet-tracks-horizontal> li .vendor-name { position:absolute; left:0px; bottom:0px; width:60px; text-align:center; white-space:nowrap; overflow:hidden;}


ul.jobsheet-tracks-horizontal> li .vendor-name,
ul.jobsheet-tracks-horizontal> li .delivery-by {
	height: 16px;
    display: -webkit-box;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}


ul.jobsheet-tracks-horizontal> li.sent .delivery-date,
ul.jobsheet-tracks-horizontal> li.collected .delivery-date,
ul.jobsheet-tracks-horizontal> li.returned .delivery-date {
	top:13px;
}

ul.jobsheet-tracks-horizontal> li.sent .delivery-time,
ul.jobsheet-tracks-horizontal> li.collected .delivery-time,
ul.jobsheet-tracks-horizontal> li.returned .delivery-time {
	top:26px;
}


ul.jobsheet-tracks-horizontal> li.received .delivery-date,
ul.jobsheet-tracks-horizontal> li.completed .delivery-date{
	bottom:26px;
}

ul.jobsheet-tracks-horizontal> li.received .delivery-time,
ul.jobsheet-tracks-horizontal> li.completed .delivery-time{
	bottom:13px;
}

/* --------------------------------------------------------------------
  vertical
  --------------------------------------------------------------------*/

ul.jobsheet-tracks-vertical {padding:0px 0px 0px 10px; margin-left:100px; list-style:none; position:relative; font-size:11px; width:100%; 
	display:flex; flex-wrap: nowrap; flex-direction: column;
	-webkit-overflow-scrolling: touch;
	-ms-overflow-style: -ms-autohiding-scrollbar;
}

ul.jobsheet-tracks-vertical::-webkit-scrollbar {
	display: none; 
}

ul.jobsheet-tracks-vertical:before {
	content: ' ';
	position:absolute;
	left:-5px;
	top:0px;
	display:inline-block;
	border-left:2px solid #4376C7;
	height:100%;
}

ul.jobsheet-tracks-vertical> li { padding:3px; width:100%; height:30px; position:relative  }

ul.jobsheet-tracks-vertical> li.sent:before,
ul.jobsheet-tracks-vertical> li.collected:before,
ul.jobsheet-tracks-vertical> li.received:before,
ul.jobsheet-tracks-vertical> li.completed:before,
ul.jobsheet-tracks-vertical> li.returned:before {
	content: ' ';
    position: absolute;
    width: 20px;
    height: 8px;
    display: inline-block;
    top: 7px;
    left: -24px;
    border-radius: 20px;
	
}
ul.jobsheet-tracks-vertical> li.sent:before {
	background-color:#4376C7;
}
ul.jobsheet-tracks-vertical> li.collected:before {
	background-color:#4376C7;
}
ul.jobsheet-tracks-vertical> li.received:before {
	background-color:#4376C7;
}
ul.jobsheet-tracks-vertical> li.completed:before {
	background-color:var(--bs-green);
}
ul.jobsheet-tracks-vertical> li.returned:before {
	background-color:#4376C7;
}


ul.jobsheet-tracks-vertical> li .delivery-info-div { position:absolute; left:-100px; top:0px; width:70px; height:25px; text-align:center; white-space:nowrap; border: 1px solid gray; background-color:white; padding:1px;}
ul.jobsheet-tracks-vertical> li .delivery-date { position:absolute; left:0px; top:-2px; display:inline-block; width:100%; text-align:center; white-space:nowrap; padding:0px; margin:0px}
ul.jobsheet-tracks-vertical> li .delivery-time { position:absolute; left:0px; top:9px; display:inline-block; width:100%; text-align:center; white-space:nowrap; padding:0px; margin:0px}
ul.jobsheet-tracks-vertical> li .delivery-by { text-align:center; white-space:nowrap;}
ul.jobsheet-tracks-vertical> li .vendor-name { text-align:center; white-space:nowrap; overflow:hidden;}


ul.jobsheet-tracks-vertical> li .vendor-name,
ul.jobsheet-tracks-vertical> li .delivery-by {
}


ul.jobsheet-tracks-vertical> li.sent .delivery-date,
ul.jobsheet-tracks-vertical> li.collected .delivery-date,
ul.jobsheet-tracks-vertical> li.returned .delivery-date {

}

ul.jobsheet-tracks-vertical> li.sent .delivery-time,
ul.jobsheet-tracks-vertical> li.collected .delivery-time,
ul.jobsheet-tracks-vertical> li.returned .delivery-time {

}


ul.jobsheet-tracks-vertical> li.received .delivery-date,
ul.jobsheet-tracks-vertical> li.completed .delivery-date{

}

ul.jobsheet-tracks-vertical> li.received .delivery-time,
ul.jobsheet-tracks-vertical> li.completed .delivery-time{

}


.scanner-loader.fa-check {color:var(--bs-green)}
.scanner-loader.fa-remove {color:var(--bs-red)}
.scanner-loader.fa-exclamation-triangle {color:var(--bs-yellow)}

.scanner-info { text-align:center; padding:20px; }
.vehicle-master-jobsheet-no { }
.vehicle-plate-no {
	display: inline-block;
    font-size: 38px;
    padding: 5px 30px;
    background-color: #EEEEEE;
    border: 5px dashed #CCC;
    border-radius: 10px;
}
.vehicle-icon {font-size:25px; padding:3px;}
.vehicle-brand-name {font-size:25px; padding:3px;}
.vehicle-model-name {font-size:25px; padding:3px;}

.insight-list { display:flex; }
.insight-list > div.insight-item { display:flex; flex-direction: column; width:250px; height:120px; margin-right:5px; border:10px solid #09F; padding:10px; text-align:center; border-radius:5px; }

.insight-list > div.insight-item > div.title { font-weight:bold; font-size:14px;text-align:left}
.insight-list > div.insight-item > div.value { font-size:30px; height:100px; vertical-align:middle; text-align:center}
.insight-list > div.insight-item > div.percentage { font-size:12px; text-align:left}

.action-link {display:inline-block; width:25px; height:25px; text-align:center; vertical-align:middle}
.icon-whatapps {display:inline-block; width:100%; height:100%;}