/* Custom CSS*/

@media screen and (max-width: 1180px) {
    .table-responsive {
        width:100%;
        margin-bottom: 15px;
        overflow-y: hidden;
        overflow-x: auto;
        -ms-overflow-style: -ms-autohiding-scrollbar;
        border: 1px solid #dddddd;
        -webkit-overflow-scrolling: touch
    }

    .table-responsive>.table {
        margin-bottom: 0
    }

    .table-responsive>.table>thead>tr>th,.table-responsive>.table>tbody>tr>th,.table-responsive>.table>tfoot>tr>th,.table-responsive>.table>thead>tr>td,.table-responsive>.table>tbody>tr>td,.table-responsive>.table>tfoot>tr>td {
        white-space: nowrap
    }

    .table-responsive>.table-bordered {
        border: 0
    }

    .table-responsive>.table-bordered>thead>tr>th:first-child,.table-responsive>.table-bordered>tbody>tr>th:first-child,.table-responsive>.table-bordered>tfoot>tr>th:first-child,.table-responsive>.table-bordered>thead>tr>td:first-child,.table-responsive>.table-bordered>tbody>tr>td:first-child,.table-responsive>.table-bordered>tfoot>tr>td:first-child {
        border-left: 0
    }

    .table-responsive>.table-bordered>thead>tr>th:last-child,.table-responsive>.table-bordered>tbody>tr>th:last-child,.table-responsive>.table-bordered>tfoot>tr>th:last-child,.table-responsive>.table-bordered>thead>tr>td:last-child,.table-responsive>.table-bordered>tbody>tr>td:last-child,.table-responsive>.table-bordered>tfoot>tr>td:last-child {
        border-right: 0
    }

    .table-responsive>.table-bordered>tbody>tr:last-child>th,.table-responsive>.table-bordered>tfoot>tr:last-child>th,.table-responsive>.table-bordered>tbody>tr:last-child>td,.table-responsive>.table-bordered>tfoot>tr:last-child>td {
        border-bottom: 0
    }
}

.form-control { height:32px;}

.form-control,
.btn { padding:5px 12px;}

#product-search-dialog, #product-qrscan-dialog { position:fixed; width:600px; height:120px; left:50%; top:50%; margin-left:-300px; margin-top:-60px;display:none; z-index:10000}
#product-scanned-dialog { position:fixed; width:600px; height:200px; left:50%; top:50%; margin-left:-300px; margin-top:-100px; display:none; z-index:10000}
#notes-dialog, #remark-dialog  { position:fixed; width:600px; height:200px; left:50%; top:50%; margin-left:-300px; margin-top:-100px; display:none; z-index:10000}

#txtLotNumberEnter, #txtQuantityEnter, #txtPackingQuantityEnter, #txtQuantityInEnter, #txtPINoEnter{ position:absolute; padding:3px; display:none; text-align:center}

#upload-container {position:absolute; top:0px; left:0px; width:0px; height:0px; overflow:hidden}

/*
#item-list > tr.item-data:nth-child(1) > td > .icon-move:nth-child(1) { display:none}
#item-list > tr.item-data:last-child > td > .icon-move:last-child { display:none}
*/
.quantity-check .fa { display:none}
.quantity-check .fa-check { color:#6F0; }
.quantity-check .fa-exclamation-triangle { color:#FC0; }

.quantity-check.match .fa-check { display:inline-block}
.quantity-check.error .fa-exclamation-triangle { display:inline-block}

.table-quantity > tbody > tr > td { padding:0px; text-align:center; vertical-align:top}
.item-lotnumber { width:100px; cursor:pointer}
.item-quantity, .item-quantity-in { width:60px; cursor:pointer}
.item-pino { width:100px; cursor:pointer}
.item-notes { width:25px; cursor:pointer}
.item-notes-prefix { width:25px; cursor:pointer}
.item-packing-quantity { min-width:50px; padding:0px; width:100%;}
.item-remark { width:100px; cursor:pointer}
.item-remark > input { width:100%; height:20px; line-height:20px; margin-bottom:2px}
.item-remark-prefix, .item-remark-button { width:25px;}
.icon-notes { display:run-in; height:100%}
#overlay{
	display:none;
	position:fixed;
	z-index:8001;
	top:0;
	left:0;
	width:100%;
	height:100%;    
	background-color:#333;
	color:#FFF;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; // first!
	filter: alpha(opacity=60);
	opacity: 0.6;   /*supported by current Mozilla, Safari, and Opera*/ 
	-moz-opacity: 0.6;  /*older Mozilla*/ 
	-khtml-opacity: 0.6;   /*older Safari*/ 
}

#overlay-loading { position:fixed; width:28px; height:28px; left:50%; top:50%; margin-left:-14px; margin-top:-14px; border-radius:15px; background-color:white; opacity:0.8; z-index:8002; color:black}

.command-button { min-width:120px;}

.icon-pencil, .icon-trash, .icon-print, .icon-folder-opened, .icon-folder-closed, .icon-setting, .icon-detail, .icon-pointer { cursor:pointer; }
.dropdown-filter { min-width:300px; padding: 15px; padding-bottom: 15px;}

.splitrow { margin-bottom:5px; }

.splitrow input, .splitrow select{ margin-bottom:2px; }

ul.nopadding { list-style:none; padding:0px; margin:0px }

ul.photo-thumbs { list-style:none; padding:0px; margin:0px; float:left; width:100%; margin-bottom:10px; }
ul.photo-thumbs li { float:left; margin:5px; padding:3px; position:relative; min-width:100px; min-height:100px; }
ul.photo-thumbs li span.icon-remove { position:absolute; right:-5px; top:-5px;}
ul.photo-thumbs li img { height:80px;}
ul.photo-thumbs.small li { min-width:40px; min-height:30px; margin:3px; padding:0px;}
ul.photo-thumbs.small li img { height:30px; border:1px solid #CCC; box-shadow:#000 0px 0px 5px; }


ul.photo-thumbs li a.icon-primary { font-size:10px; display:none }
ul.photo-thumbs li:hover a.icon-primary { display:block}

ul.attachment-thumbs { list-style:none; padding:0px; margin:0px }
ul.attachment-thumbs li { float:left; margin:5px; padding:3px; position:relative; }
ul.attachment-thumbs li span.icon-remove { position:absolute; right:-5px; top:-5px;}
ul.attachment-thumbs li img { height:80px;}
ul.attachment-thumbs.small li { float:none; margin:0px; padding:0px; }
ul.attachment-thumbs.small li img { height:30px;}
ul.attachment-thumbs.small li span.icon-remove { position:absolute; right:5px; top:0px;}

img.project-photo { min-width:100%; max-width:100%;  border:2px solid white; box-shadow:#000 0px 0px 10px; }
img.announcement-photo { min-width:100%; max-width:100%; border:2px solid white; box-shadow:#000 0px 0px 10px; margin-bottom:10px; }

.announcements { min-height:450px;}
.smallfont { font-size:10px;}
.mediumfont { font-size:12px;}

.darkred { color:#FF118C;}
.red { color:red;}
.green { color:green;}
.yellow { color:yellow;}

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'); }

.datepicker{z-index:10000 !important;}

ul.sales-lead-list { padding:0px; margin:0px; list-style:none; }

ul.sales-lead-list li { float:left; position:relative; width:80px; padding:10px 2px; font-size:10px; }
ul.sales-lead-list li i { display:block; font-size:10px; }
ul.sales-lead-list li:nth-child(5) { width:10px;}

div.success { border:#6F0 1px solid; background-color:#FFC; color:#030; padding:10px; border-radius:5px}
div.error { border:#C00 1px solid; background-color:#FCC; color:#F30; padding:10px; border-radius:5px}

.info input.icon-update { color:black !important}

#upline-info {
	padding-right:20px;
	position:relative;
}

#upline-name {
	font-size:20px;
}

#upline-position {
	font-style:italic;
}

#upline-info-close {
	position:absolute;
	right:10px;
	top:10px;
	cursor:pointer;
}

.glyphicon-refresh-animate {
    -animation: spin .7s infinite linear;
    -webkit-animation: spin2 .7s infinite linear;
}

@-webkit-keyframes spin2 {
    from { -webkit-transform: rotate(0deg);}
    to { -webkit-transform: rotate(360deg);}
}

@keyframes spin {
    from { transform: scale(1) rotate(0deg);}
    to { transform: scale(1) rotate(360deg);}
}

.archive-list { margin:0px; padding:0px 0px 0px 0px; list-style:none; }
.archive-list li { float:left; width:100%; box-sizing:border-box; padding:10px 10px; border:1px solid #EEEEEE; border-radius:10px; margin:2px; position:relative; }
.archive-list li a.fa { position:absolute; right:15px;}

.non-active { text-decoration:line-through; color:#999 !important }
.deleted { text-decoration:line-through; color:red }

.search-box { border:1px solid #EEEEEE; border-radius:10px;}
.search-box > span { margin:1px; border:1px solid #333; background-color:#EEEEEE; display:inline-block; padding:5px 5px 5px 5px; border-radius:5px; white-space:nowrap}
.pointer { cursor:pointer}


.label0 { background-color:#FFFFFF}
.label1 { background-color:#FFFFFF}
.label2 { background-color:#FC9684}
.label3 { background-color:#849EE4}
.label4 { background-color:#A4DE64}
.label5 { background-color:#E4E6D4}
.label6 { background-color:#FCB674}
.label7 { background-color:#84EEF4}
.label8 { background-color:#D4CE84}
.label9 { background-color:#C4A6F4}
.label10 { background-color:#A4CEC4}
.label11 { background-color:#FCE674}

.overline { text-decoration:line-through;}

@media (min-width: 1200px) .container { width:100% !important; }
@media (min-width: 992px) .container { width:100% !important; }
@media (min-width: 768px) .container { width:100% !important; }


.selection-list {
	list-style:none; margin:0px; border:2px solid #DCE4EC; border-radius:3px; padding:10px; background-color:white; min-height:42px;
}

#item-list .numbers { position:relative }
#item-list tr .icon-add-title, #item-list tr .icon-add-lotnumber { display:none; position:absolute; cursor:pointer}
#item-list tr:hover .icon-add-title, #item-list tr:hover .icon-add-lotnumber { display:inline}
#item-list tr .icon-add-title, #item-list tr .icon-add-lotnumber {top:0px; left:0px;}

#item-list tr .panel-edit-title { display:none }
#item-list tr:hover .panel-edit-title { display:inline }

.typehead-container { position:relative}
.typehead-container > .fa-remove { position:absolute; right:10px; top:0.8em; cursor:pointer}
.non-stock { color:#666 !important}

.top-link-new-window { position:absolute; right:0px; top:0px; padding:3px 10px 3px 10px !important;}
.dropdown-menu > li { position:relative; padding-right:20px}

.product-browser-item { cursor:pointer}
.product-browser-item:hover { background-color:#EEEEEE}
.product-browser-item label {     font-weight: normal;
    cursor: pointer;
    width: 100%;
    height: 29px;
    line-height: 29px;
    margin: 0px;
    display: inline-block;
    padding: 0px;}
.product-browser-item td { line-height:1em; padding:0px;}

#product-browser-status { font-size:0.80em}

.ajax-loading { background-image:url('images/ajax-loading.gif'); background-repeat:no-repeat; background-position:right}
.record-detail { background-color:azure;}
.record-detail:hover { background-color:azure;}
/*
.record-detail { background-color:#EEEEEE; border-top:3px solid black; border-bottom:3px solid black}
.record-detail:hover { background-color:#EEEEEE; }
*/

.expiry-date {font-size:8px; border-radius:5px; padding:3px 5px}
.expiry-date.30days {background-color:green; }
.expiry-date.14days {background-color:orange; }
.expiry-date.7days { background-color:yellow; }
.expiry-date.expired { background-color:red; }

.icon-scan { position:absolute; top:32px; right:30px;}

.dropdown-popup { position:absolute; display:none; padding:0px; border-radius:3px; z-index:8000; box-shadow:grey 3px 3px 8px 2px}
.dropdown-popup:after {
    content: " ";
    position: absolute;
    right: 10px;
    top: -5px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid black;
}
.dropdown-popup > ul {list-style:none; padding:3px 10px; background-color:black; margin:0px;  }
.dropdown-popup > ul > li { display:block; width:100%; padding:3px 5px;}
.dropdown-popup > ul > li > a { display:block; width:100%; padding:0px 0px; color:white; }


.opt-claim-notes {font-size:8pt;}

.task-details-level1 { cursor:pointer}
.task-details-level2 { padding-left:20px; font-size:0.9em; display:none}
.task-details-level3 { padding-left:20px; display:}
.task-details-level1.open .task-details-level2 { display:block;}

.row-task-details { }

.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.task-completed .task-icon.fa.fa-check{ color:green}
.row-task-details.task-verified .task-icon.fa.fa-check{ color:green}
.row-task-details.task-rejected .task-icon.fa.fa-remove{ color:red}

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

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

.row-task-details.task-rejected .row-jobsheet-picture,
.row-task-details.task-rejected .row-jobsheet-remarks,
.row-task-details.task-rejected .row-jobsheet-remark-update-button { display:block;}


.task-description { padding:5px 10px;}

.help-block { color:red !important; font-size:0.9em;}

#jobsheet-picture-list { display:flex; overflow-x:auto; }
#jobsheet-picture-list > div { height:150px; padding-right:5px;}
#jobsheet-picture-list > div > img { height:150px; }

.record-row.selected { border-bottom:2px solid orange}
.record-row.rejected .StatusName { color:red !important; }

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

#record-list > tr.record-row.unread > td {font-weight:bold;}
#record-list > tr.record-row.rejected { position:relative; }

#record-list > tr.record-row.rejected > td.No:before {
    content: " ";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 0;
    height: 0;
    border-left: 60px  solid transparent;
    border-bottom: 15px solid red;
}

#record-list > tr.record-row.rejected > td.No:after {
    content: "reject";
    position: absolute;
    right: 1px;
    bottom: 0;
    color: white;
    font-weight: bold;
    font-size: 10px;
    line-height: 10px;
}

#record-list > tr.record-row.aging-1 > td { /*background-color:#EDFFE8 */}
#record-list > tr.record-row.aging-2 > td { /*background-color:#FCFEE2 */}
#record-list > tr.record-row.aging-3 > td { /*background-color:#FFE8E9 */}


#record-list > tr.record-row > td span.age-day {
	float:right;
	font-size::1.2em;
	padding: 0px 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:#004000; color:white;*/}
#record-list > tr.record-row.aging-2 > td span.age-day{ /*background-color:#808000; color:white;*/}
#record-list > tr.record-row.aging-3 > td span.age-day{ /*background-color:#400000; color:white;*/}

h3.page-title { margin:0px; display:inline-block; margin-right:10px;}


h3.status-vendor-name { margin-top:0px; }
.counter-status { cursor:pointer;}
.counter-new-request b {color:#565CC5}
.counter-verified b {color:#43B267}
.counter-in-progress b {color:#ECB500}


#counter-location-list { position:absolute; top:37px; display:none; list-style:none; margin:0; padding:0; border-left:1px solid #DDDDDD; border-right:1px solid #DDDDDD; border-top:1px solid #DDDDDD; width:150px; background-color:#FFFFFF; z-index:1000 }
#counter-location-list > li { margin:0; padding:5px 12px; border-bottom:1px solid #DDDDDD; cursor:pointer }
#counter-location-list > li.hover,
#counter-location-list > li:hover { font-weight:bold; background-color:#F9F9F9 }

.counter-location-selector { cursor:pointer}
.counter-row { display:none}
.counter-row.counter-selected { display:table-row}


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

.text-red { color:#F36; }
.text-green { color:#690; }
.text-yellow { color:#F90; }


.task-label.is-redo {color:red}

.task-details-level1 .is-redo {color:red}

.not-working-day-nouse .location-select { display:none}
.not-working-day-nouse .isallowovertime-checkbox { display:none}
.not-working-day-nouse .overtime-select { display:none}
.not-working-day-nouse .salaryrate-input { display:none}
.not-working-day-nouse .otrate-input { display:none}

.not-working-day-nouse .IsAllowOvertime { display:none}
.not-working-day-nouse .Overtime { display:none}


thead.sticky-header,
tr.sticky-header {
	position: -webkit-sticky;
    position: sticky;
    top: 0;
    background-color: white;
}

thead.sticky-header:after,
tr.sticky-header:after {
	content: '';
	position:absolute;
	bottom:0px;
	left:0px;
	width:100%;
	height:1px;
	background-color:#dddddd;
}

tr.sticky-footer {
	position: -webkit-sticky;
    position: sticky;
    bottom: 0;
    background-color: white;
}
tr.sticky-footer > td {
	padding:20px 10px 20px 10px !important;
}


.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}