:root {
	--burger-color:#FFF;
}
html, body { font-family:roboto; }
body { background-color:var(--grey); padding-top:61px; }
a { color:inherit; }
::-webkit-scrollbar { height: 10px; width:7px; }
::-webkit-scrollbar-track { background: #DDD; }
::-webkit-scrollbar-thumb { background: var(--grey-dark); }
::-webkit-scrollbar-thumb:hover { background: var(--grey-dark); }

.nowrap { white-space:nowrap; }
.uppercase { text-transform:uppercase; }

.selection { -moz-appearance:none; /* Firefox */ -webkit-appearance:none; /* Safari and Chrome */ appearance:none;  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24'><path d='M12 17.414 3.293 8.707l1.414-1.414L12 14.586l7.293-7.293 1.414 1.414L12 17.414z'/></svg>"); background-repeat: no-repeat; background-position-x: 98%; background-position-y: center; background-size:auto 40%; padding-right: 10px!important; }
.selection.disabled { background-color: transparent !important;}
.button { height:auto!important; }

.icomoon-icon:before { font-family: 'icomoon' !important; speak: never; font-style: normal; font-weight: normal; font-variant: normal; font-size:1em; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

input[type='text'], input[type='password'], .button, .selection { padding:5px 10px;  height:40px; line-height:1.4em; }
.textbox, .textarea { border:0; border-bottom:1px solid #DDD; }
.selection { padding:0 10px; }
.textarea { resize:none; }

.tooltip { cursor:pointer; }

.text-green { color:#63D375; }
.text-red { color:var(--red); }

.number_spinner { white-space:nowrap; }

.button { min-width:80px; border-radius:0; border:0!important; background-color:#FFF; color:#000!important; box-shadow:0 0 3px #999; transition:all .1s; height:30px; }
.button.blue { background-color:var(--blue); color:#FFF!important; }
.button.grey { background-color:#DDD; color:#000!important; }
.button:hover { background-color:var(--blue-neon); color:#FFF!important; }

.custom-selection { display:inline-block; width:auto; position:relative; padding:5px; cursor:pointer; }
.custom-selection .custom-selection-display:after { content:"\e913"; font-family: 'icomoon' !important; speak: never; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; display:inline-block; vertical-align:middle; margin-left:5px; }
.custom-selection .custom-selection-display.hide-arrow:after { display:none; }
.custom-selection .custom-selection-item-list { display:none; position:absolute; top:100%; left:0; width:100%; white-space:nowrap; background-color:#FFF; color:#000; box-shadow:0 0 5px #333; }
.custom-selection .custom-selection-item-list .custom-selection-item { padding:5px 5px 0; box-sizing:border-box; }
.custom-selection .custom-selection-item-list .custom-selection-item:last-child { padding-bottom:5px; }
.custom-selection:hover .custom-selection-item-list, .custom-selection:active .custom-selection-item-list { display:block; }
.custom-selection .custom-selection-item-list .custom-selection-item.selected { background-color:#DDD; }
.custom-selection .custom-selection-item-list .custom-selection-item:hover { background-color:#DDD; }

form .required-icon { display: inline-block; color: #F00; margin-left: -10px; }
form.disabled .button { pointer-events:auto; }

.min-avatar { display:inline-block; vertical-align:middle; margin-right:5px; width:20px; height:20px; cursor:pointer; }
.min-avatar div { line-height:20px; fotn-size:1.2em; position:absolute; top:0; left:0; width:100%; height:100%; background-color:var(--green-dark); color:#FFF; text-align:center;  }
.min-avatar.grey div { background-color:#999!important; }

.progress-bar-container { line-height:40px; }
.progress-bar { display:inline-block; vertical-align:middle; width:100%; height:20px; background-color:var(--grey); position:relative; }
.progress-bar .progress-bar-percent { position:absolute; top:0; left:0; height:100%; background-color:var(--green-light); max-width:100%; }
.progress-bar span { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); }

.multi-selection .selection-content {position:fixed; top:0; left:0; width:100%; height:100%; z-index:99999; text-align:center; display:none;}
.multi-selection .selection-content.active {display:block;}
.multi-selection .selection-content .selection-bg {position:absolute; top:0; left:0; width:100%; height:100%; background-color:#000; opacity:.75;}
.multi-selection .selection-content .selected-items { display:block; width:100%; }
.multi-selection .selection-content .selection-body { display:inline-block; width:96%; max-width:300px; height:auto; margin:0; position:absolute; top:50%; left: 50%; transform:translate(-50%, -50%); background-color:#FFF; padding:10px; border-radius:5px; }
.multi-selection .selection-content .selection-body strong {margin-bottom:10px; display:inline-block;}
.multi-selection .selection-content .selection-body .lbjs {width:100%;box-sizing:border-box; text-align:left; }
.multi-selection .selection-content .selection-body .button {margin-top:10px;}

.multi-selection .selected-items { max-width:80%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; display: block; vertical-align: middle; margin-top: 5px; color:#999; }

.multi-selection .selected-items .textbox.amount {width:50px;}

.modal .manager-content { padding:0!important; margin:0!important; width:100%; font-size:.9em; }
.modal .manager-content .manager-main-title { padding:0 0 0 10px; margin:0 0 10px; }
.modal .manager-content .table .col { display:block!important; width:100%!important; text-align:left; padding:0; line-height:1.3em; }
.modal .manager-content .table .col label { margin:0!important; }
.modal .manager-content .table .col .button { display:none; }
.manager-content .table-list .table-list-filter form { display:inline-block; margin-right:10px; }

form label { display: inline-block; margin-bottom: -20px; font-size: .7em; color: #999; z-index: 1; position: relative; }
form label span { color:#F00; }
form .selection { border:0; border-bottom:1px solid #DDD; }
form .textarea { min-height:unset; }
form .button { margin: 10px 5px 0; }

.container .boundary { max-width:unset; }

.top-menu { display:block; background-color:var(--blue); color:#FFF; padding:5px 10px; box-sizing:border-box; text-align:left; height:61px; line-height:51px; z-index:99999; position:fixed; top:0; left:0; width:100%; }
.top-menu .top-menu-burger { display:inline-block; line-height:51px; vertical-align:top; font-size:1.3em; color:inherit; }
.top-menu .top-menu-burger i { font-size:0; transition:all .2s; }
.top-menu .top-menu-burger i.icon-menu { font-size:1.3em; }
.top-menu .top-menu-burger.active i { font-size:1.3em; }
.top-menu .top-menu-burger.active i.icon-menu { font-size:0; }
.top-menu .hamburger { float:right; margin-left:10px; }

.top-menu .support { display:none; float:right; width:auto; margin-right:20px; font-weight: bold; }
/* .top-menu .top-menu-burger i { display:none; }
.top-menu .top-menu-burger i.icon-menu { display:inline-block; }
.top-menu .top-menu-burger.active i { display:inline-block; }
.top-menu .top-menu-burger.active i.icon-menu { display:none; } */

.top-menu .top-menu-company-name { display:inline-block; vertical-align:middle; margin-left:15px; line-height:1.3em; max-width:calc(100% - 120px); font-weight:bold; }
.top-menu .top-menu-company-name a { width:100%; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.top-menu .top-menu-company-name .top-menu-company-department { font-weight:normal; font-size:.8em; }
.top-menu .top-menu-company-name .top-menu-company-department i { display:inline-block; width:20px; height:20px; line-height:20px; text-align:center; vertical-align:middle; border-radius:100%; background-color:var(--orange); color:#FFF; }
.top-menu .top-menu-company-name .top-menu-company-department .custom-selection { padding-left:0; }

.top-menu #officer_notification_amount { position:relative; }
.top-menu #officer_notification_amount span { position: absolute; background-color: #F00; color: #FFF; display: inline-block; width: 20px; height: 20px; line-height: 18px; border-radius: 100%; font-size: .8rem; left: -5px; top: -5px; text-align: center; }
.top-menu .icon-notifications_none { margin-top:8px; float:right; font-size:2em; transition:all 0.3s; }
.top-menu .icon-notifications_none.active {transform:scale(1.1); color:#DDD; }
.top-menu .top-menu-notification { width:300px; display:none; width:200px; list-style-type:none; padding:0; margin:0; position:absolute; top:100%; right:0; background-color:#FFF; box-shadow:0 0 3px #666; transition:all 0.3s; max-height:80vh; overflow-y:auto; }
.top-menu .top-menu-notification.active { display:block; }
.top-menu .top-menu-notification li { box-sizing:border-box; font-size:0.8em; padding:5px; border-bottom:1px solid #DDD; color:#999; line-height:1.3em; }
.top-menu .top-menu-notification li.new { color:var(--blue); }
.top-menu .top-menu-notification li .officer-min-avatar { display:inline-block; vertical-align:middle; margin-right:5px; width:20px; height:20px; }
.top-menu .top-menu-notification li .officer-min-avatar div { line-height:20px; fotn-size:1.2em; position:absolute; top:0; left:0; width:100%; height:100%; background-color:var(--green-dark); color:#FFF; text-align:center;  }
.top-menu .top-menu-notification li a { display:inline; white-space:break-spaces; padding:0; text-decoration:none; color:inherit; background:unset; }
.top-menu .top-menu-notification li:hover {background-color:#FAFAFA;}

.top-menu  .officer-menu-content { display:none; width:200px; list-style-type:none; padding:0; margin:0; position:absolute; top:100%; right:10px; background-color:#FFF; box-shadow:0 0 3px #666; transition:all 0.3s; max-height:80vh; overflow-y:auto; }
.top-menu  .officer-menu-content.active { display:block; }
.top-menu  .officer-menu-content li { line-height:1.5em; }
.top-menu  .officer-menu-content li a { white-space:nowrap; padding:10px 20px; display:block; color:#000; }
.top-menu  .officer-menu-content li:hover a { background-color:var(--grey); color:var(--blue-light); }

.top-menu  .officer-menu-content .officer-profile { padding:10px; }
.top-menu  .officer-menu-content .officer-profile i { font-size:1.5em; color:#000; }
.top-menu  .officer-menu-content .officer-profile .officer-profile-detail { width:calc(100% - 40px); font-size:0.8em; line-height:1.5em; color:#000; display: inline-block; vertical-align: middle; margin-left: 10px;  }
.top-menu  .officer-menu-content .officer-profile .officer-profile-detail div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight:bold; }

.page-container { position:relative; width:100%; height:calc(100vh - 61px); }

.page-container .page-menu { width:85%; max-width:280px; height:calc(100vh - 61px); position:fixed; top:61px; left:-86%; background-color:#FFF; box-shadow:0 0 5px #DDD; z-index:9999; transition:all .3s; text-align:left; }
.page-container .page-menu.active { left:0; }

.page-container .page-menu .page-menu-member { background-color:var(--blue-light); color:#FFF; padding:10px; box-sizing:border-box; }
.page-container .page-menu .page-menu-member span { color:#ddd; font-size:.8em; }
.page-container .page-menu .page-menu-member i { display:inline-block; width:20px; font-size:1.5em; vertical-align:middle; margin-left:3px; }
.page-container .page-menu .page-menu-member .page-menu-member-info { display:inline-block; vertical-align:middle; width:calc(100% - 45px); margin-left:20px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.page-container .page-menu .page-menu-member a.icon-caret-down { display:none; vertical-align:middle; margin-left:20px; }
.page-container .page-menu .page-menu-items { height:calc(100% - 59px); overflow-y:auto; }
.page-container .page-menu ul { list-style-type:none; padding:10px 0; margin:0; box-sizing:border-box;  }
.page-container .page-menu ul li { line-height:1.5em; padding:10px; }
.page-container .page-menu ul li:hover, .page-container .page-menu ul li.active { background-color:#DDD; border-bottom:1px solid #999; }
.page-container .page-menu ul li:hover li, .page-container .page-menu ul li.active li { border:0; }
.page-container .page-menu ul li i { color:#444; margin-right:10px; font-size:1.2em; }
.page-container .page-menu ul li i.icon-map-marker { margin-left:3px; font-size:1.5em; }

.page-container .page-menu.active ul li ul li a.active, .page-container .page-menu.active ul li ul li a:hover, .page-container .page-menu.active ul li ul li a.active i, .page-container .page-menu ul li ul li a:hover i, .page-container .page-menu ul li ul li a.active i { color:var(--red); }
	
.page-container .page-menu ul li.sub-menu { position:relative; }
.page-container .page-menu ul li.sub-menu:after { content:"+"; display:inline-block; position:absolute; top:10px; right:10px; font-size:1.5em; transition:all .3s; }
.page-container .page-menu ul li.sub-menu.active:after { content:"-"; font-size:2em; }
.page-container .page-menu ul li ul { margin:0; padding:0 0 0 20px; display:none; }
.page-container .page-menu ul li.sub-menu.active ul { display:block; }
.page-container .page-menu ul li ul li:first-child { padding-top:20px; }
.page-container .page-menu ul li ul li:last-child { padding-bottom:0; }
.page-container .page-menu ul li a { position:relative; }
.page-container .page-menu ul li a div { position:absolute; top:-5px; width:17px; height:17px; line-height:17px; font-size:.6em; left:100%; background-color:#F00; color:#FFF; display:inline-block; text-align:center; border-radius:100%; }

.page-container .page-content { position:relative; width:100%; height:auto; min-height:100%; padding:10px 10px 20px; box-sizing:border-box; overflow:hidden; }

.page-container .page-content .page-content-container { width:100%; height:100%; background-color:#FFF; box-shadow:0 0 5px #bbb; }

.page-container .page-content .page-content-container .page-content-header { border-bottom:1px solid #DDD; }
.page-container .page-content .page-content-container .page-content-header , .page-container .page-content .page-content-container .page-content-body { text-align:left; padding:10px; box-sizing:border-box; }
.page-container .page-content .page-content-container .page-content-header { background-color:#f5f5f5; }
.page-container .page-content .page-content-container .page-content-header .page-content-header-title { font-weight:bold; }
.page-container .page-content .page-content-container .page-content-header-controller { display:block; margin-top:10px; white-space:nowrap; }
.page-container .page-content .page-content-container .page-content-header-controller .button { vertical-align:middle; font-size:.6em; }
.page-container .page-content .page-content-container .page-content-header-controller .button i { display: inline-block; vertical-align: top; margin-top: 2px; }
.page-container .page-content .page-content-container .page-content-header-controller .function-box { position:relative; display:block; margin:10px 0 0 8px; display:inline-block; }
.page-container .page-content .page-content-container .page-content-header-controller .function-box .button { text-align:center; }
.page-container .page-content .page-content-container .page-content-header-controller .function-box ul { position:absolute; background-color:#FFF; box-shadow:0 0 3px #666; top: 0; right: 0; margin: 0; padding: 0; list-style-type: none; text-align: left; min-width: 150px; display:none; z-index:1000; }
.page-container .page-content .page-content-container .page-content-header-controller .function-box ul.active { display:inline-block; }
.page-container .page-content .page-content-container .page-content-header-controller .function-box ul li a { display:block; padding:5px 10px; transition:all .5s; white-space:nowrap; }
.page-container .page-content .page-content-container .page-content-header-controller .function-box ul li:first-child a { padding-top:10px; }
.page-container .page-content .page-content-container .page-content-header-controller .function-box ul li:last-child a { padding-bottom:10px; }
.page-container .page-content .page-content-container .page-content-header-controller .function-box ul li a:hover { background-color:rgba(0, 0, 0, .075); }
.page-container .page-content .page-content-container .page-content-header-controller .function-box ul li.disabled a { pointer-events:none; color:#DDD; }
.page-container .page-content .page-content-container .page-content-body { max-height:calc(100% - 90px); overflow-y:auto; padding-bottom:0; }

.page-container .page-content .page-content-container .page-content-body .page-content-box-title { font-size:1em; color:#666; cursor:pointer; }
.page-container .page-content .page-content-container .page-content-body .page-content-box-title:after { content:"+"; display:inline-block; vertical-align:top; margin-left:10px; }
.page-container .page-content .page-content-container .page-content-body .page-content-box-title.active:after { content:"_"; font-size:1.2em; margin-top:-10px; }
.page-container .page-content .page-content-container .page-content-body .page-content-box { display:none; border-top:1px solid #DDD; padding:20px 0 20px 20px; box-sizing:border-box; }
.page-container .page-content .page-content-container .page-content-body .page-content-box.active { display:block; }
.page-container .page-content .page-content-container .page-content-body .page-content-box .table .col { text-align:left; }

.page-container .page-content .page-content-container .page-content-body .page-content-search { display:block; margin-bottom:20px; width:100%; max-width:700px; position:relative; }
.page-container .page-content .page-content-container .page-content-body .page-content-search button { background:unset; border:unset; position:absolute; top:10px; right:5px; font-size:1.2em; color:#6666; cursor:pointer; }

#image_popup { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background-color:rgb(0,0,0,.7); z-index:99999; }
#image_popup .icon-x { position:absolute; top:5px; right:5px; font-size:2em; color:#FFF; }
#image_popup img { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); max-width:96%; max-height:96%; }
#image_popup.active { display:block; }

.table-list { max-width:100%; overflow-x:auto; }
.table-list.no-max-width { max-width:unset; }
.table-list table { font-size:.8em; width:100%; border-collapse:collapse; }
.table-list table thead { background-color:#f5f5f5; color:#666; position:sticky; top:-11px; }
.table-list table thead tr th { font-weight:normal; white-space:nowrap; }
.table-list table thead tr th a i { display:none; }
.table-list table thead tr th a.active { font-weight:bold; }
.table-list table thead tr th a.active i { display:inline-block; }
.table-list table thead tr th a i.desc { transform: rotate(180deg); }
.table-list table tbody tr:hover { background-color:#FAFAFA;	 }
.table-list table tr th, .table-list table tr td { padding:5px; }
.table-list table tr td { border-bottom:1px solid #DDD; }
.table-list table tr td .checkbox, .table-list table tr th .checkbox { width:15px; height:15px; }
.table-list table tr td .product-image { display:inline-block; width:20px; margin-left:5px; }
.table-list table .tag { display:inline-block; background-color:#FAFAFA; font-size:.8em; padding:3px; box-shadow:0 0 1px #666; margin:0 3px; }

.table-list .mobile-display { display:none; }
.table-list .mobile-show { display:none; }
.table-list.mobile .mobile-show { display:none; }

.table-list.mobile { max-width:unset; }
.table-list.mobile table tr td:nth-child(1n+3), .table-list.mobile table tr th:nth-child(1n+3) { display:none; }
.table-list.mobile table.without-checkbox tr td:nth-child(1n+2), .table-list.mobile table.without-checkbox tr th:nth-child(1n+2) { display:none; }
.table-list.mobile .mobile-hide { display:none; }
.table-list.mobile .mobile-display { display:block; line-height:1.5em; }
.table-list.mobile tr.mobile-show { display:table-row; }
.table-list.mobile .mobile-display.margin-top { margin-top:10px; }
	
.table-list.mobile .table-footer { background-color:#F1F1F1; border-top:3px solid #666; }

.company-notification { font-size:0.8em; background-color:#FFF984; color:#000; padding:5px; box-sizing:border-box; text-align:center;}

.page-content.locked .page-content-container, .page-content.locked .page-content-container a, .main-body-right.locked { pointer-events:none; filter:grayscale(1); }


.footer { text-align:right; font-size:.7em; padding-top:5px; }

@media (min-width:768px){
	.page-container .page-content { position:relative; width:100%; height:calc(100vh - 71px); padding:10px 10px 0; }
	.page-container .page-content .page-content-container .page-content-body { max-height:calc(100% - 70px); }
	.page-container .page-content .page-content-container .page-content-header { height:50px; }
	.page-container .page-content .page-content-container .page-content-header .page-content-header-title { display:inline-block; vertical-align:middle; line-height:30px; }
	.page-container .page-content .page-content-container .page-content-header-controller { display:inline-block; float:right; text-align:right; margin-top:0; width:auto; }
	.page-container .page-content .page-content-container .page-content-header-controller .button { font-size:.8em; }
	.page-container .page-content .page-content-container .page-content-header-controller .function-box { margin:0 0 0 10px; }
	
	.multi-selection .selected-items { display:inline-block; max-width:60%; margin:0 0 5px 10px; }
	
	.table-list { max-width:unset; }
	
	.table-list.mobile table tr td:nth-child(1n+3), .table-list.mobile table tr th:nth-child(1n+3), .table-list.mobile table.without-checkbox tr td:nth-child(1n+2), .table-list.mobile table.without-checkbox tr th:nth-child(1n+2) { display:table-cell; }
	
	.table-list.mobile .mobile-display, .table-list.mobile .mobile-show { display:none!important; }
	.table-list.mobile .mobile-hide { display:inline-block; }
	.table-list.mobile tr.mobile-hide { display:table-row; }
	
	.top-menu .support { display:inline-block; font-size:.8em; }
}

@media (min-width:996px){
	.top-menu .table .col .company-name { max-width:480px; }
	
	.page-container .page-menu { left:0!important; width:50px; transition:all .1s; }
	.page-container .page-menu ul li i { margin:0 5px; }
	.page-container .page-menu ul li span, .page-container .page-menu .page-menu-member .page-menu-member-info, .page-container .page-menu ul li.sub-menu:after { display:none; }
	.page-container .page-menu ul li ul { padding:0; }
	.page-container .page-menu ul li ul li { padding:10px 5px 0; }
	.page-container .page-menu.active ul li ul li { padding:10px 5px 0 20px; }
	.page-container .page-menu ul li ul li i { color:#666; margin:0; }
	
	.page-container .page-menu.active { width:280px; }
	.page-container .page-menu.active ul li ul li i { color:#444; }
	.page-container .page-menu.active ul li i { margin-right:10px; }
	.page-container .page-menu ul li ul li i.icon-user { margin-left:3px; }
	.page-container .page-menu.active ul li span, .page-container .page-menu.active .page-menu-member .page-menu-member-info, .page-container .page-menu.active ul li.sub-menu:after { display:inline-block; }
	
	.page-container .page-content { width:calc(100vw - 50px); margin-left:50px; transition:all .3s; }
	.page-container .page-content.active { width:calc(100vw - 280px); margin-left:280px; }
}

@media (min-width:1200px){
	.multi-selection { max-width:55%; margin-left:10px; }
	.multi-selection a {margin-top:0;}
	
}

@media (min-width:1490px){
	
}