html,
body { height:100%; font-size:14px; font-weight:400; font-family:'Roboto', sans-serif; background:var(--light); color:var(--dark); }

h1 { font-size: 24px;    font-weight: 400;    letter-spacing: 0.1em;    text-transform: uppercase;    color: #333; }
h2 { font-size: 18px;    font-weight: 400;    letter-spacing: 0.05em;    color: #333; }

table#mainDataGrid,
table.kv-table-float { table-layout:fixed; }
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > tbody > tr > td,
.table-bordered > tfoot > tr > td { border:1px solid #ddd !important; }
#mainDataGrid > thead > tr > th,
.kv-table-float > thead > tr > th { white-space:nowrap; -ms-text-overflow:ellipsis; -o-text-overflow:ellipsis; text-overflow:ellipsis; overflow:hidden; }
#mainDataGrid > tbody > tr > td { -ms-text-overflow:ellipsis; -o-text-overflow:ellipsis; text-overflow:ellipsis; overflow:hidden; /* white-space:nowrap;*/ word-break:break-all; word-wrap:break-word !important; }
form div.required label.control-label:after { content:" *"; color:red; }
.text-red { color:#d50000; }
.text-green { color:#1b5e20; }
.background-yellow { background:#FFFF00; padding:0px 5px 0px 2px; color:#333; }
.popup-img { max-width:100px; max-height:120px; margin-bottom:10px; }
.grid-img { max-width:60px; max-height:80px; display:block; margin-left:auto; margin-right:auto; cursor:pointer; /*width:50%;*/ }
.grid-img-hover { max-width:120px; max-height:150px; display:block; margin-left:auto; margin-right:auto; /*width:50%;*/ }
.wrap { min-height:100%; height:auto; margin:0 auto -60px; padding:0 0 60px; }
.wrap > .container { padding:70px 15px 20px; }
.footer { height:60px; background-color:#f5f5f5; border-top:1px solid #ddd; padding-top:20px; }
.jumbotron { text-align:center; background-color:transparent; }
.jumbotron .btn { font-size:21px; padding:14px 24px; }
.not-set { color:#c55; font-style:italic; }

/* bootstrap overwrite */
.btn.btn-primary { background:var(--primary); border-color:var(--primary); }
.btn.btn-outline-primary { color:var(--primary); border-color:var(--primary); }
.btn-outline-primary:not(:disabled):not(.disabled):active,
.btn-outline-primary:not(:disabled):not(.disabled).active,
.show > .btn-outline-primary.dropdown-toggle,
.btn.btn-outline-primary:hover { background:var(--primary); color:var(--light); border-color:var(--primary2); }

.fade.in { opacity:1 !important; }
.modal-backdrop.fade.in { opacity:0.6!important; }
.modal.fade .modal-dialog { transform:none; }

/* add sorting icons to gridview sort links */
a.asc:after,
a.desc:after { position:relative; top:1px; display:inline-block; font-family:'Glyphicons Halflings'; font-style:normal; font-weight:normal; line-height:1; padding-left:5px; }
a.asc:after { content:"\e151"; }
a.desc:after { content:"\e152"; }
.sort-numerical a.asc:after { content:"\e153"; }
.sort-numerical a.desc:after { content:"\e154"; }
.sort-ordinal a.asc:after { content:"\e155"; }
.sort-ordinal a.desc:after { content:"\e156"; }
.grid-view td { white-space:nowrap; }
.grid-view .filters input,
.grid-view .filters select { min-width:20px; padding:4px 4px; }
.hint-block { display:block; margin-top:5px; color:#999; }
.error-summary { color:#a94442; background:#fdf7f7; border-left:3px solid #eed3d7; padding:10px 20px; margin:0 0 15px 0; }
/* align the logout "link" (button in form) of the navbar */
.nav li > form > button.logout { padding:15px; border:none; }
@media(max-width:767px) {
	.nav li > form > button.logout { display:block; text-align:left; width:100%; padding:10px 15px; }
}
.nav > li > form > button.logout:focus,
.nav > li > form > button.logout:hover { text-decoration:none; }
.nav > li > form > button.logout:focus { outline:none; }
.tag-grid-col { padding:5px 10px; }
.tag-grid-col-items { padding:2px 4px; margin-right:4px; background-color:#EFEFC0; color:#333; display:inline-block; margin-bottom:5px; font-size:14px; }
.resizeDragLine { border-top:5px solid #aaa; margin-top:-20px; position:inherit !important; }
.ui-widget-content { border:1px solid #dddddd; / color:#333; }
.ui-resizable { position:relative; }
.ui-resizable-s { cursor:s-resize; height:7px; width:100%; /* bottom:-5px;*/ bottom:0px; left:0; }
.resizeColDragLine { z-index:851; left:0px; float:left; position:absolute; top:0; height:100%; width:2px; background-color:#aeaeae; }
.ui-resizable-e { cursor:e-resize; width:10px; right:-5px; top:0; height:100%; }
.ui-resizable-handle { position:absolute; font-size:0.1px; display:block; -ms-touch-action:none; touch-action:none; }
.small-box { overflow:auto; }
.small-box h3 { font-size:22px !important; }
.morelink { font-size:14px; color:#3c8dbc !important; margin-left:4px; }
.morecontent span { display:none; }
.morelink:after { content:''; display:inline-block; width:5px; height:5px; margin-top:6px; margin-left:5px; border:1px solid #ececec; border-top:none; border-right:none; background:transparent; transform:rotate(-45deg); transform-origin:bottom; }
.morelink.less:after { margin-left:2px; transform:rotate(135deg); }
div.input-group.date { display:flex !important; }
div.input-group.date span.input-group-addon { padding:3px 3px !important; min-width:min-content; }
.grid-view .filters div.input-group.date input { min-width:10px; }
.fbaQuantityHeaderActions { padding-right:5px; float:right; }
.fbaQuantityHeaderActions a.copyAll,
.fbaQuantityHeaderActions a.copySuggQty,
.fbaQuantityHeaderActions a.pocopySuggQty { margin-right:5px; font-size:1em; color:#00ADEE; }
.fbaQuantityHeaderActions a.clearAll,
.fbaQuantityHeaderActions a.removeSuggQty { font-size:1em; color:#EA5551; }
.expanded-child-grid { margin-left:10%; margin-right:10%; }
/*=============== Start:New design Style ================*/
:root {
	--primary:#ed5123;
	--primary2:#f6b26b;
	--dark:#212529;
	--light:#fff;
}
body { min-height:100vh; }

a { color:var(--primary); transition:all 0.5s; }
a:hover { text-decoration:none; }

.btn-primary { background:var(--primary); border-color:var(--primary) !important; color:var(--light) !important; }
.btn-primary:focus,
.btn-primary.focus,
.btn-primary:hover,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle { background-color:var(--primary2); }
.text-primary { color:#ee3223!important; }
.bg-primary { background:var(--primary) !important; }
.bg-primary2 { background:var(--primary2) !important; }
.btn .caret { display:none; }

.card { margin:0 0 15px; }

#login { padding:60px 0; min-height:70vh; display:flex; align-items:center; }
#login .holder { border:1px solid var(--dark); display:flex; align-items:stretch; }
#login .holder .logo { border-right:1px solid var(--dark); width:50%; display:flex; align-items:center; justify-content:center; padding:50px; }
#login .holder .logo img { width:100%; }
#login .holder .form { width:50%; padding:30px 50px; }
#login .holder .form .forgot { display:table; margin:20px auto 0; color:var(--primary); }

aside#sidebar { position:fixed; left:0; top:0; background:var(--dark); min-height:100vh; padding:10px 0; z-index:1001; }
aside#sidebar a { display:block; color:var(--light); display:flex; align-items:center; }
aside#sidebar a:hover { color:var(--primary); }
aside#sidebar a i.las { display:block; width:50px; height:50px; line-height:50px; font-size:30px; text-align:center; }
aside#sidebar a span { width:0; opacity:0; padding:0; transition:all 0.5s; height:0; overflow:hidden; }
aside#sidebar.open a span { width:auto; opacity:1; padding:5px 20px 5px 5px; height:auto; overflow:visible; }

header#top { padding:10px 20px 10px 70px; background:var(--light); border-bottom:1px solid var(--dark); display:flex; justify-content:space-between; align-items:center; position:sticky; z-index:1000; top:0; }
header#top .logo img { height:50px; width:auto; }
header#top .user { color:var(--dark); }
header#top .user:hover { color:var(--primary); }
header#top .user i { font-size:24px; }

main { padding:20px 20px 20px 70px; }
main .top { display:flex; justify-content:flex-start; align-items:flex-start; flex-wrap:wrap; margin-bottom:10px; }
main .top .card { margin:0 10px 10px 0; }
main .top .card .card-header { text-align:center; padding:5px 8px; }
main .top .card .card-body { font-size:30px; text-align:center; padding:5px 8px; }
main table.table { margin:0 0 30px; }
main table.table thead th { text-align:center; vertical-align:middle; }
main table.table thead tr:first-child th { background:#ddd; }
main table.table tbody tr td a { text-decoration:underline; color:var(--primary); transition:all 0.3s; }
main table.table tbody tr td a:hover { color:var(--primary2); }

main#inspection .card { margin:0 0 30px; }
main#inspection .card .card-header { font-weight:700; }

/* ----- datatabl design -------- */
.panel-primary { border:none; margin-bottom:0px; }
.panel-primary > .panel-heading { color:#212529; background:#ddd; border:none; }
.panel-primary .panel-heading .panel-title { text-align:center; font-weight:bold; line-height:0.9; }
.glyphicon { display:none; }
.summary { display:none; }
.panel-primary .kv-panel-before { /* display:none;*/ }
.refresh_list { background:#ddd; }
.panel-primary th.kv-align-top { background:#fff !important; border:none !important; }
.panel-primary td.kv-align-top { border-top:1px solid #dee2e6 !important; border-left:0px solid #fff !important; border-right:0px solid #fff !important; border-bottom:0px solid #fff !important; }
.panel-primary .kv-align-top a { color:#212529; }
.rdd { background:#ddd; }
.panel-primary td.kv-align-top a { color:var(--primary); }
.panel-primary .kv-panel-after { border:none; }
.panel-primary .panel-footer { /* display:none;*/ }
.ui-widget-content { border:none; }
.mdg { border:1px solid #fff; }
.modal { opacity:1 !important; }
/*=============== End:New design Style ================*/

.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus { background-color:#ddd; border-color:var(--primary); color:var(--primary); }
.pagination > li > a,
.pagination > li > span { color:var(--dark); }

.kv-grid-wrapper::-webkit-scrollbar { width:8px; height:8px; }
.kv-grid-wrapper::-webkit-scrollbar-track { background:#f7f7f7; }
.kv-grid-wrapper::-webkit-scrollbar-thumb { background:#ddd; transition:all 0.3s; }
.kv-grid-wrapper::-webkit-scrollbar-thumb:hover { background:var(--primary); }

main .top .card .card-header { color:#212529; background:#ddd; border:none; }
main .top .card .card-header a { color:#212529; }

.na-check { position:absolute; right:2px; top:0; padding:1px 5px 1px 22px; transition:all 0.3s; }
.na-check:hover { background:#eee; }
.na-check .form-check-label { font-size:11px; font-weight:700; color:var(--primary); }

.required-image-main { padding:0 15px; }
.required-image-main .required-image { box-shadow:0 0 0 1px #ddd; }
.required-image-main .required-image .required_image_container { display:flex; align-items:center; }
.required-image-main .required-image .required_image_container a:first-child { width:100px; height:100px; display:flex; align-items:center; justify-content:flex-start; color:var(--dark); }
.required-image-main .required-image .required_image_container a img { width:100%; height:100%; object-fit:contain; object-position:50% 50%; margin:0 10px 0 -5px; }
.required-image-main .required-image .required_image_container a:nth-child(2),
.required-image-main .required-image .required_image_container p:nth-child(2) { flex-grow:1; }

.required_delete { border:1px solid red; color:red; padding:1px 4px 0; border-radius:2px; }


#mask { position:fixed; left:0; top:0; width:100%; height:100%; z-index:9000; background-color:#000; display:none; }

.popup-style { position:fixed; left:0; top:0; width:640px; height:auto !important; display:none; z-index:9999; background:#fff; border-radius:2px; }
.popup-style .popup-header { display:flex; justify-content:space-between; align-items:center; background:#eee; padding:5px 15px; box-shadow:0 2px 4px rgba(0,0,0,0.15); }
.popup-style .popup-header h4 { font-size:16px; font-weight:700; margin:0; color:var(--dark); }
.popup-style .popup-header .close_btn_container a { color:red; font-size:20px; }
.popup-style .popup-body { padding:18px 15px 15px; }
.popup-style .popup-body img { max-width:100%; }
.popup-style .popup-body img#img_popup_img { width:100%; display:block; max-width:600px; max-height:600px; margin:0 auto; }
.popup-style .popup-body .upload-image-icon { width:100%; height:100px; background:#eee; border-radius:3px; display:flex; align-items:center; justify-content:center; color:var(--primary); font-size:50px; }

.car-tabs .nav-item a.nav-link { color:var(--dark); position:relative; }
.car-tabs .nav-item a.nav-link.done { color:green; }
.car-tabs .nav-item a.nav-link.done .las.la-check-circle { position:absolute; right:2px; top:2px; font-size:14px; color:green; }
.car-tabs .nav-item a.nav-link.not-done .las.la-check-circle { display:none; }

.horizontal-gallery { width:auto; height:100px; display:flex; overflow-x:auto; overflow-y:hidden; padding:5px; border:1px solid #ddd; }
.horizontal-gallery::-webkit-scrollbar { width:8px; height:8px; }
.horizontal-gallery::-webkit-scrollbar-track { background:#f7f7f7; border-radius:4px; }
.horizontal-gallery::-webkit-scrollbar-thumb { background:#ddd; transition:all 0.3s; border-radius:4px; }
.horizontal-gallery::-webkit-scrollbar-thumb:hover { background:var(--primary); }
.horizontal-gallery img { width:auto; height:100%; margin-right:5px; }
.horizontal-gallery img:last-child { margin-right:0; }

.horizontal-gallery-with-close { width:calc(100% - 10px); height:100px; display:flex; overflow-x:auto; overflow-y:hidden; padding:5px; border:1px solid #ddd; }
.horizontal-gallery-with-close::-webkit-scrollbar { width:8px; height:8px; }
.horizontal-gallery-with-close::-webkit-scrollbar-track { background:#f7f7f7; }
.horizontal-gallery-with-close::-webkit-scrollbar-thumb { background:#ddd; transition:all 0.3s; }
.horizontal-gallery-with-close::-webkit-scrollbar-thumb:hover { background:var(--primary); }
.horizontal-gallery-with-close .gallery-item { display:block; width:auto; height:100%; margin-right:5px; position:relative; }
.horizontal-gallery-with-close .gallery-item:last-child { margin-right:0; }
.horizontal-gallery-with-close .gallery-item a:first-child { display:block; width:auto; height:100%; }
.horizontal-gallery-with-close .gallery-item a:first-child img { display:block; width:100px; height:100%; object-fit:cover; object-position:50% 0; }
.horizontal-gallery-with-close .gallery-item a:last-child { position:absolute; right:-4px; top:-4px; width:20px; height:20px; border-radius:50%; background:var(--primary); color:var(--light); display:flex; align-items:center; justify-content:center; font-size:13px; }
/*
.hierarchy-1 { background:#e5e5e5; padding:5px; margin:10px 10px 0; }
.hierarchy-1 .form-group.form-inline { margin:0; }
.hierarchy-2 { background:#ccc; padding:0 10px 0 15px; position:relative; margin-left:25px; width:calc(100% - 35px); }
.hierarchy-2:before { content:""; position:absolute; left:5px; top:0; height:calc(100% - 5px); width:5px; background:#e5e5e5; }
.hierarchy-2 h5 { line-height:1; }
.hierarchy-3 { background:#b2b2b2; padding:0 0 0 15px; position:relative; margin-left:50px; width:calc(100% - 60px); }
.hierarchy-3:before { content:""; position:absolute; left:5px; top:0; height:calc(100% - 5px); width:5px; background:#ccc; }
*/
.hierarchy-1 { background:#ccc; padding:5px; margin:10px 10px 0; }
.hierarchy-1 .form-group.form-inline { margin:0; }
.hierarchy-2 { background:#ddd; padding:0 10px 0 15px; position:relative; margin-left:25px; width:calc(100% - 35px); }
.hierarchy-2:before { content:""; position:absolute; left:5px; top:0; height:100%; width:5px; background:#ccc; }
.hierarchy-2 h5 { line-height:1; }
.hierarchy-3 { background:#eee; padding:0 0 0 15px; position:relative; margin-left:50px; width:calc(100% - 60px); }
.hierarchy-3:before { content:""; position:absolute; left:5px; top:0; height:100%; width:5px; background:#ddd; }

.report-label-hierarchy-2 { padding-right:35px !important; }
.report-label-hierarchy-3 { padding-right:55px !important; }

.damage-section { background: #dddeee; }

a.cke_button__about { display:none !important; }

.report-image { text-align:center; border:1px solid #eee; padding:5px; }
.report-image a { display:block; }
/*.report-image img { width:100%; height:150px; object-fit:cover; object-position:0% 50%; margin:0 0 10px; }*/
.report-image img { width:100%; height:180px; object-fit:contain; margin:0 0 10px; }

.report-cover-image { text-align:center; padding:5px; }
.report-cover-image img { width:65%; margin:0 0 10px; }

.log-section { max-height:300px; overflow-y:auto; }
.log-section::-webkit-scrollbar { width:8px; height:8px; }
.log-section::-webkit-scrollbar-track { background:#eee; }
.log-section::-webkit-scrollbar-thumb { background:var(--primary2); border-radius:4px; transition:all 0.3s; }
.log-section::-webkit-scrollbar-thumb:hover { background:var(--primary); }
.log-section table.table { position:relative; }
.log-section table.table thead { position:sticky; top:0; box-shadow:0 -2px 0 #fff; z-index:1; }

.btn-toolbar button:not(.btn-secondary):not(.btn-primary),
.btn-toolbar select { background:#ddd; }

#inspections_list-grid-modal { padding:50px 0; }
#inspections_list-grid-modal .modal-header { flex-direction: row-reverse; }