/**
 * File chứa style của trang như bố cục, giao diện riêng (tùy chỉnh) cho một chức năng trong erp
 */

h1,h2,h3,h4,h5 {padding:0;margin:0;vertical-align:baseline;}
ol,ul { margin:0; padding:0; list-style:none; }
a { color:inherit; text-decoration:none; }

body {
	padding: 0;
	margin: 0;
	font: normal .9em arial;
	color:black;
	background:#ebebeb;
}
textarea, .ss-textbox, .lui-textbox {
	color:black;
	font: normal 1em arial;
}
textarea {
	font-size: 1.06em;
	height: 6em;
	min-height: 4em;
}


/** STYLE ĐƠN LẺ CÁ BIỆT **/
.icon {
	width:18px;
	text-align: center;
}

.hand {
	cursor: pointer;
}

.color-blur {
	color:#707070;
}
.color-link {
	color:#1488F4;
}
.color-cost, .color-risk {
	color:#d41313;
}
.color-revenue, .color-benefit {
	color:#1f9635;
}

.line-top {
	border-top:solid 1px #ebebeb;
}
.line-bottom {
	border-bottom:solid 1px #ebebeb;
}
.separate-top {
	border-top:solid .4em #ebebeb;
}
.separate-bottom {
	border-bottom:solid .4em #ebebeb;
}
.unit-sign {
	margin: 0 .3em;
}


/* Giao diện LeafTree */
.lui-tree .leaf .item[none-select] {
	color: #707070;
}


/* Nội dung chú ý */
.ss-notice {
	border-radius: .3em;
	border:solid 1px #1378f5;
	padding:.6em .8em;
	color:#1378f5;
}


/* Hành động */
.ss-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}
.ss-actions > .action-item {
	margin-right: .6em;
}
.ss-actions > .action-item:last-child {
	margin-right: 0;
}

/* Giao diện tải file bằng iframe */
.ss-downloader {
	display: none;
}

/* Giao diện thông tin thành viên */
.ss-member {
	display: inline-flex;
	align-items: flex-start;
}
.ss-member[dress="value"] {
	border-radius: .3em;
	border:solid 1px #b7b7b7;
	border-bottom: solid 3px #1488F4;
	padding:.4em;
	box-sizing: border-box;
}
.ss-member .photo {
	border-radius: 50%;
	width:2.6em;
	height:2.6em;
	margin-right: .6em;
}
.ss-member .info {
	flex:1;
}
.ss-member .name {
	font-weight: bold;
}
.ss-member .closer {
	display: none;
	align-items: center;
	justify-content: center;
	width:2em;
	height:2em;
	margin-left: 0.6em;
	border-radius: 50%;
	cursor: default;
}
.ss-member .closer .times {
	font-size: 1.2em;
	font-weight: bold;
}
.ss-member[removable] .closer {
	display: flex;
}


/* Giao diện chọn danh sách người dùng */
.ui-memberlist {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
}
.ui-memberlist > .head {
	border-radius: .3em;
	border:solid 1px #e0e0e0;
	margin-right: 1em;
}
.ui-memberlist > .head .text {
	padding:.6em 1em;
}
.ui-memberlist > .head .ss-member {
	margin-right: 0;
	border:0;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}
.ui-memberlist .ss-member {
	border-radius: .3em;
	border:solid 1px #e0e0e0;
	padding:.5em;
	margin-right: 1em;
	cursor: default;
}
.ui-memberlist .ss-member .photo {
	border:solid 3px white;
}
.ui-memberlist .ss-member:hover {
	background: #E6F6FF;
}
.ui-memberlist .ss-member[selected] {
	color:white;
	background:#1378f5;
}

/* Giao diện chọn danh sách nhân viên, cho phép hiển thị danh sách nhân viên, chọn bỏ chọn nhân viên trong danh sách, giao diện hiển thị liên tục theo hàng ngang */
.ui-member-addition {
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;
	padding-left:.6em;
}
.ui-member-addition .ss-member {
	margin-right: .6em;
	margin-bottom: .6em;
	padding:.4em;
	border-radius: .3em;
	border:solid 1px #ccc;
}
.ui-member-addition .ss-member .info .name {
	font-weight: normal;
}
.ui-member-addition .ss-member .info .position {
	color:#727272;
}
.ui-member-addition .ss-member .closer:hover {
	color:#f51313;
	background:#FFCDCD;
}
.ui-member-addition .ss-member .closer:active {
	background:#ffeded;
}
.ui-member-addition .ss-member:last-child {
	margin-right: 0;
}
.ui-member-addition .search-box {
	width:6em;
	margin-right: .6em;
	margin-bottom: .6em;
	position: relative;
}
.ui-member-addition .search-box .searcher {
	border-color: #ccc;
	border-bottom-width: 1px;
}
.ui-member-addition .search-box .ss-popup {
	width:auto;
	white-space: nowrap;
}

/* Giao diện hộp nổi chọn nhân viên */
.ui-member-picker {
	display: inline-flex;
	align-items: center;
	position: relative;
	border-radius: .3em;
	border:solid 1px #e0e0e0;
}
.ui-member-picker > .member {
	flex: 1;
}
.ui-member-picker > .member .label {
	padding:.6em .8em;
}
.ui-member-picker > .member .ss-member {
	padding: 0.4em;
    border: 0;
}
.ui-member-picker > .member .ss-member .info .name {
	font-weight: normal;
}
.ui-member-picker > .member .ss-member .info .position {
	color:#727272;
}
.ui-member-picker > .search-box {
	flex: 1;
	display: none;
	align-items: center;
	padding-left: .4em;
	margin-right: .4em;
}
.ui-member-picker > .search-box .sym {
	width:1.4em;
	margin-right: .4em;
}
.ui-member-picker > .search-box .searcher {
	border:0;
	box-sizing: border-box;
}
.ui-member-picker > .edit {
	width:2.4em;
	height:2.4em;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: .3em;
}
.ui-member-picker > .edit:hover {
	background:#E6F6FF;
}
.ui-member-picker > .edit:active {
	background:#C8ECFF;
}
.ui-member-picker > .edit[focus] {
	background: #C8ECFF;
}
.ui-member-picker > .edit .icon {
	width:1.4em;
}
.ui-member-picker > .ss-popup {
	display: none;
	width:auto;
	white-space: nowrap;
}


/* Profile người dùng */
.ss-member-profile {
	display: none;
	overflow: hidden;
	width:18em;
}
.ss-member-profile .photo-box {
	display: flex;
	align-items: center;
	justify-content: center;
}
.ss-member-profile .photo {
	border-radius: 50%;
	width:4.6em;
	height:4.6em;
	margin: 1em;
}
.ss-member-profile .info-box {
	text-align: center;
	padding-bottom: .3em;
}
.ss-member-profile .info {
	margin-bottom: .3em;
}
.ss-member-profile .major {
	font-weight: bold;
	margin-bottom: .3em;
}
.ss-member-profile .action-box {
	background:#fff000;
}
.ss-member-profile .action-item {
	display: block;
	padding:.6em 1em;
	cursor: pointer;
}
.ss-member-profile .action-item:hover {
	background: #FFF562;
}

/* Hình đại diện */
.ss-avatar {
	border-radius: 50%;
	width:2.6em;
	height:2.6em;
}
.ss-icon {
	width:1.2em;
}
.ss-textbox {
	padding:.4em .8em;
	border-radius: .3em;
	border:solid 1px #e1e1e1;
	background: white;
}

/* Người gửi tài liệu */
.ss-doc-sender {
	position: relative;
	display: flex;
	align-items: center;
	padding-right: 1.8em;
	border-radius: 4em;
	background: #E6F6FF;
	cursor: default;
}
.ss-doc-sender .text {
	color: #1378f5;
	padding:.4em .8em;
}
.ss-doc-sender .ss-avatar {
	position: absolute;
	top:0;
	right:0;
	width:1.9em;
	height:1.9em;
}
.ss-doc-sender:hover {
	background: #C8ECFF;
}
.ss-doc-sender:hover > .ss-popup {
	display: block;
}
.ss-warn {
	padding:.8em 1em;
	border-radius: .3em;
	/*margin-bottom: 1em;*/
	background:#f5f5f5;
}
.ss-warn[dress="info"] {
	color: #1378f5;
    background: #E6F6FF;
}
.ss-warn[dress="benefit"] {
	color:#047415;
	background:#E4FFE8;
}
.ss-warn[dress="risk"] {
	color:#f51313;
	background:#ffeded;
}

.ss-text[dress="info"] {
	color: #1378f5;
}
.ss-text[dress="benefit"] {
	color: #047415;
}
.ss-text[dress="risk"] {
	color: #f51313;
}

.ss-text-border {
	border-radius: .3em;
	border:solid 1px #ccc;
	padding:2em .4em;
}
.ss-text-border[dress="info"] {
	border-color:#1378f5;
	color: #1378f5;
}
.ss-text-border[dress="benefit"] {
	border-color:#047415;
	color: #047415;
}
.ss-text-border[dress="risk"] {
	border-color:#f51313;
	color: #f51313;
}

.ss-text-fill {
	border-radius: .3em;
	background-color: #A6A6A6;
	padding:.2em .4em;
}
.ss-text-fill[dress="info"] {
	background-color:#1378f5;
	color: white;
}
.ss-text-fill[dress="benefit"] {
	background-color:#047415;
	color: white;
}
.ss-text-fill[dress="risk"] {
	background-color:#f51313;
	color: white;
}


/* Giao diện thông báo trang */
.ss-status {
	position: fixed;
	display: none;
	align-items: flex-end;
	justify-content: flex-end;
	top: 0;
	left: 0;
	width:100%;
	height:100%;
	z-index: 100;
}
.ss-status > .box {
	margin: 1em;
	border-radius: .3em;
	overflow: hidden;
	background: white;
	-webkit-box-shadow: 0px 0px 4px rgba(0,0,0,.4);
    box-shadow: 0px 0px 4px rgba(0,0,0,.4);
}
.ss-status > .box .waiting {
	width:12em;
	padding:1em;
	display: none;
	align-items: center;
	justify-content: center;
}
.ss-status > .box .waiting .loader {
	display: inline-block;
	width:2.2em;
	height:2.2em;
	border-radius: 50%;
	border-style: solid;
	border-width: 5px;
	border-color: #e0e0e0;
	border-left-color: #1488F4;
	box-sizing: border-box;
	animation: rotate-ani 1.6s linear infinite;
	-webkit-animation: rotate-ani 1.6s linear infinite;
}
@-webkit-keyframes rotate-ani {
	100% { transform:rotate(360deg); }
}
@keyframes rotate-ani {
	100% { transform:rotate(360deg); }
}
.ss-status > .box .warn {
	display: none;
}
.ss-status > .box .warn .message {
	padding: 1em;
}
.ss-status > .box .message[dress="info"] {
	color: #1378f5;
}
.ss-status > .box .message[dress="benefit"] {
	color: #047415;
}
.ss-status > .box .message[dress="risk"] {
	color: #f51313;
}
.ss-status > .box .ss-actions {
	padding:.8em;
	background:#f7f7f7;
	justify-content: flex-end;
}
.ss-status > .box .close {
	color:white;
	background:#333;
}
.ss-status > .box .close .text {
	padding:.2em .7em;
	font-size: 1.2em;
	font-weight: bold;
}

/* Giao diện hiển thị hình ảnh đơn giản */
.ss-imageshower {
	position: fixed;
	display: none;
	align-items: center;
	justify-content: center;
	top:0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 10;
	background: white;
}
.ss-imageshower .img {
	max-width: 100%;
	max-height: 100%;
}
.ss-imageshower .img[direction="hoz"] {
	max-width: 100%;
}
.ss-imageshower .img[direction="ver"] {
	max-height: 100%;
}
.ss-imageshower .close {
	position: fixed;
	top: 1em;
	right: 1em;
	width:1.8em;
	height: 1.8em;
	font-size: 1.2em;
	font-weight: bold;
	border-radius: 50%;
	border:solid 1px black;
	color: black;
	background-color: white;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 11;
	cursor: default;
}
.ss-imageshower .rotate {
	position: fixed;
	top: 1em;
	right: 3.8em;
	width:1.8em;
	height: 1.8em;
	font-size: 1.2em;
	font-weight: bold;
	border-radius: 50%;
	border:solid 1px black;
	color: black;
	background-color: white;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 11;
	cursor: default;
}
.ss-imageshower .rotate img {
	width:1.2em;
	height:1.2em;
}


/* Giao diện giao dịch */
.ui-giaodich {
	/*margin: 0 1em;*/
}
/* Giao diện menu trang bán hàng */
.ui-homemenus {
	display: flex;
	flex-wrap: wrap;
	padding-top: 2%;
	padding-left: 2%;
}
.ui-homemenus .item {
	width:18%;
	margin-right: 2%;
	margin-bottom: 2%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding:1.4em 1em;
	font-size: 1.1em;
	box-sizing: border-box;
	border-radius: .3em;
	border:solid 1px #b7b7b7;
}
.ui-homemenus .item:hover {
	color:#1378f5;
	border-color: #1378f5;
}
.ui-homemenus .item:active {
	color:white;
	background:#1378f5;
	border-color:#1378f5;
}

/* Giao diện thông tin hóa đơn */
.ui-billinfo {}
.ui-billinfo .info {
	margin-bottom: 1em;
	display: flex;
	align-items: center;
}


/* Giao diện tính tiền khách hàng */
.ui-tradecash .entry-head {
	padding:.5em 1em;
	border-bottom: solid 1px #ddd;
}
.ui-tradecash .entry-body {
	border-bottom: solid 6px #ebebeb;
}
.ui-tradecash .entry-body .cash-group {
	padding:0 1em 0 1em;
	border-bottom: solid 1px #ebebeb;
}
.ui-tradecash .entry-body .cash-group:last-child {
	border-bottom: 0;
}
.ui-tradecash .entry-body .cash-group .unit-bills .ss-unit{
	margin-right: 1em;
	margin-bottom: 1em;
}

/* Giao diện tính tiền khách hàng */
/*.ui-tradecustomer .entry-body {
	display: none;
}*/

/* Giao diện tính tiền khách hàng */
.ui-tradeemployee .entry-body {
	display: none;
}

/* Giao diện công đoạn hóa đơn */
.ui-billphases {
	padding:1em;
}
.ui-billphases .ui-billphase:last-child {
	margin-bottom: 0;
}
.ui-billphase {
	margin: 1em auto;
	max-width: 720px;
	border-radius: .3em;
	border:solid 1px #ddd;
}
.ui-billphase .entry-head {
	border-bottom: solid 1px #ebebeb;
}
.ui-billphase .entry-head .title {
	padding: 1em 1em 1em 0;
}
.ui-billphase .entry-head .ss-actions .action {
	padding: .4em 2em;
}
.ui-billphase .entry-body .ui-billitem:last-child {
	border-bottom: 0;
}
.ui-billphase .entry-foot {
	border-top: solid 1px #ebebeb;
}
/* Giao diện công đoạn cầm đồ */
.pawn-receipt .entry-body, .pawn-money .entry-body, .pawn-profit .entry-body {
	padding:1em;
}
.pawn-receipt .ui-billitem {
	padding:0 0 1em 0;
}
.pawn-receipt .lui-textarea {
	min-width: 100%;
	max-width: 100%;
	min-height: 6em;
}
.pawn-money .ss-unit, .pawn-profit .ss-unit {
	width:9em;
}

/* Giao diện món đồ trong công đoạn tính toán hóa đơn */
.ui-billitem {
	padding:0 1em 1em 1em;
	border-bottom: solid 1px #eee;
}
.ui-billitem .lui-droplist {
	width:10em;
	margin-right: 1em;
}
.ui-billitem .status .state[refund] {
	display: inline-block;
	margin-top: 1em;
	padding:.4em 1em;
	border-radius: .3em;
	background: #eee;
}

/* Giao diện trường thông tin căn cước công dân */
.ui-billfield-cccd .field-content {
	padding:1em;
	border-radius: .3em;
	border:solid 1px #b7b7b7;
	border-bottom: solid 3px #1488f4;
}
.ui-billfield-cccd .photo-content {
	display: inline-flex;
	flex-wrap: wrap;
}
.ui-billfield-cccd .photo-content .block {
	margin-top: .4em;
	margin-right: 2em;
}
.ui-billfield-cccd .sub-title {
	margin-bottom: .3em;
	font-size: .9em;
	display: flex;
	align-items: flex-end;
}
.ui-billfield-cccd .photo-content .block .img {
	display: inline-block;
	padding:.4em;
	border-radius:.3em;
	width: 10em;
	height:7em;
	cursor: pointer;
}
.ui-billfield-cccd .photo-content .block .img:hover, .ui-billfield-cccd .photo-content .block .img-btn:hover {
	background: #C8ECFF;
}
/*.ui-billfield-cccd .layout .block .img .img {
	border:solid 1px #b7b7b7;
}*/
.ui-billfield-cccd .photo-content .block .img-btn {
	display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .5em;
    border-radius: .3em;
    color: #1378f5;
    background: #E6F6FF;
    cursor: pointer;
    margin-left: .6em;
}
.ui-billfield-cccd .photo-content .block .img-btn .img-icon {
	width: 1.4em;
	/*height:1.4em;*/
    cursor: pointer;
}
.ui-billfield-cccd .photo-content .block input[type="file"]{
	display: none;
}
.ui-billfield-cccd .fields-container {
	display: none;
}

/* Giao diện đóng mở nội dung bên trong */
.ui-doorentry {
	margin:1em;
	border-radius: .3em;
	border:solid 1px #e0e0e0;
}
.ui-doorentry .entry-head {
	border-bottom: solid 1px #e0e0e0;
}
.ui-doorentry .entry-head .title {
	padding: 1em 1em 1em 0;
}
.ui-doorentry .ui-doorentry {
	margin: unset;
	max-width: unset;
	-webkit-box-shadow: unset;
    box-shadow: unset;
}

.ui-doorentry .ui-panel-temvang-row {
	margin-bottom: 1em;
}
.ui-doorentry .ui-panel-temvang-row:last-child {
	margin-bottom: 0;
}

.ui-panel-temvang-content {
	border-top:solid 1px #e0e0e0;
}
.ui-panel-temvang-content .ss-head .title {
	font-weight: bold;
}

/* Giao diện một thuộc tính in tem, là đối tượng cơ bản */
.ui-temvang-prop {
	margin-bottom: 1em;
}
.ui-temvang-prop .text {
	margin-bottom: .4em;
}
.ui-temvang-prop .desc {
	color:#828282;
	font-size: .9em;
}
.ui-temvang-prop .ss-adjustbox .lui-textbox {
	width:5em;
	color:#1378f5;
	background: #E6F6FF;
}
.ui-temvang-prop .ss-adjustbox .unit {
	color:#1378f5;
	padding:.6em;
}
.ui-temvang-prop .lui-droplist .label-box {
	color:#1378f5;
	border-color:#1378f5;
}
.ui-temvang-prop .lui-droplist .label-box .arrow {
	border-top-color:#1378f5;
}

.ss-temvang-unit {
	background:#E6F6FF;
	padding:.6em;
	border-radius: .3em;
}
.ss-temvang-unit .title, .ss-temvang-unit .desc {
	margin-bottom:.4em;
}
.ss-temvang-unit .desc {
	font-size: .9em;
	color:#828282;
}
.ss-temvang-unit .lui-textbox {
	width:100%;
	border:0;
}

/* Giao diện hộp nổi tùy biến nội dung bên trong */
.ui-drop-selection {
	position: relative;
	display: inline-block;
}
.ui-drop-selection > .info {
	display: flex;
	align-items: center;
	border-radius: .3em;
}
.ui-drop-selection > .info .ss-icon {
	padding-left:.6em;
}
.ui-drop-selection > .info .text {
	padding:.6em;
	cursor: default;
}
.ui-drop-selection > .info .lui-textbox {
    padding: 0.3em 0.8em;
    margin-left: 0.6em;
    border: 0;
    border-radius: 0.3em;
	background: #f3db90;
}
.ui-drop-selection > .ss-popup {
	display: none;
	width:22em;
}
.ui-drop-selection > .ss-popup .foot {
	text-align: right;
	padding:.8em;
	background:#f5f5f5;
}
.ui-drop-selection[dress="department"] .info {
	background: #a9e9f4;
}
.ui-drop-selection[dress="list"] .info {
	background: #bbf4a9;
}
.ui-drop-selection[dress="person"] .info {
	background: #f4e2a9;
}

/* Danh sách liên tục hàng ngang */
.ui-inline-list {
	display: flex;
	flex-wrap: wrap;
}
.ui-inline-list > .item {
	margin-right: 1em;
	display: inline-flex;
	align-items: center;
}
.ui-inline-list > .item:last-child {
	margin-right: 0;
}
.ui-inline-list > .item .text {
	padding:.4em .6em;
}


/* Giao diện danh sách cộng thêm */
.ui-pluslist {}
.ui-pluslist > .item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding:.6em 1em;
	border-bottom: solid 1px #e1e1e1;
}
.ui-pluslist > .item:last-child {
	border-bottom: 0;
}
.ui-pluslist > .item .title-box {
	display: flex;
	align-items: flex-start;
}
.ui-pluslist > .item .title-box .ss-avatar {
	margin-right: .6em;
}
.ui-pluslist > .item .name {
	margin-bottom: .3em;
}
.ui-pluslist > .item .desc {
	color:#727272;
}
.ui-pluslist > .item .actions {
	display: flex;
	align-items: center;
}

.photo-tree .leaf .item .icon {
	width:unset;
	padding:0;
	margin-right: .6em;
	align-items: center;
}
.photo-tree .leaf .item .icon img {
	width:2.2em;
	height:2.2em;
	border-radius: 50%;
}
.photo-tree .leaf .item .icon .alt-shape {
	width:2.2em;
	height:2.2em;
	border-radius: 50%;
	background:#f5f5f5;
}


.form-field .lui-tree .item {
	padding:unset;
}

/* Giao diện thanh tìm kiếm */
.ui-searchbar {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	padding:.6em .6em 0 .6em;
	border-bottom: solid 1px #ebebeb;
}
.ui-searchbar .conditions {
	flex:1;
	display: flex;
	flex-wrap: wrap
}
.ui-searchbar .conditions .cond {
	margin: 0 .6em .6em 0;
	width:12em;
}
.ui-searchbar .conditions .cond > .head .text {
	padding:0;
	margin-bottom: .3em;
}
.ui-searchbar .conditions .cond .value-ui {
	max-width: 100%;
	background: white;
}

/* Giao diện cổng xem */
.ui-viewport {
	display: flex;
	flex-wrap: wrap;
}
/* Mặc định là 3 cột */
.ui-viewport .viewport {
	flex: 0 0 33.33%;
	/* Cho phép các element con overflow. Nếu không gán thì cho dùng element có style overflow thì nó cũng không co hiệu lực */
	/*overflow-x: auto;*/
}
.ui-viewport .viewport[ui-span="2"] {
	flex-basis:66.66%;
}
.ui-viewport .viewport[ui-span="3"] {
	flex-basis:100%;
}
.ui-viewport .viewport[ui-span="50%"] {
	flex-basis:50%;
}
/* 4 cột */
.ui-viewport[ui-column="4"] .viewport {
	flex-basis:25%;
}
.ui-viewport[ui-column="4"] .viewport[ui-span="2"], .ui-viewport[ui-column="4"] .viewport[ui-span="50%"] {
	flex-basis:50%;
}
.ui-viewport[ui-column="4"] .viewport[ui-span="3"] {
	flex-basis:75%;
}
.ui-viewport[ui-column="4"] .viewport[ui-span="4"] {
	flex-basis:100%;
}
.ui-viewport .viewport .sui-window {
	margin-top: .6em;
	margin-right: .6em;
}

/* Giao diện xem */
.ui-view {
	border-radius: .3em;
	background: white;
	margin-top: .6em;
	margin-right: .6em;
}
.ui-view > .head[stuck] {
	-webkit-box-shadow: 0px 4px 4px -3px rgba(0,0,0,.3);
	-moz-box-shadow:0px 4px 4px -3px rgba(0,0,0,.3);
    box-shadow: 0px 4px 4px -3px rgba(0,0,0,.3);
}
.ui-view > .head {
	/*border-bottom: solid 2px #fff000;*/
}
.ui-view > .head .head-body {
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-top-left-radius: .3em;
	border-top-right-radius: .3em;
	background: white;
}
.ui-view > .head .head-body .title {
	display: flex;
	align-items: center;
}
.ui-view > .head .head-body .title .text {
	padding:.8em;
	font-size:1.06em;
	font-weight: bold;
}
.ui-view > .head .head-body .title .back {
	display: flex;
	align-items:center;
	justify-content: center;
	width:3em;
	height:3em;
	border-top-left-radius: .3em;
}
.ui-view > .head .head-body .title .back:hover {
	background: #E6F6FF;
}
.ui-view > .head .head-body .title .back:active {
	background: #C8ECFF;
}
.ui-view > .head .head-body .title .back .ss-icon {
	width:1.4em;
}
.ui-view > .head .head-body .title .close {
	display: flex;
	align-items:center;
	justify-content: center;
	width:2.4em;
}
.ui-view > .head .head-body .ss-actions {
	margin-right: .6em;
}
.ui-view > .head .sui-activision {
	border-bottom: solid 1px #ebebeb;
}
/* Mặc trang phục nội dung, nó có thể nằm trong một ui-view */
.ui-view[dress="content"] {
	border:solid 1px #ccc;
	margin:0;
}
.ui-view[dress="content"] > .body {
	padding:1em;
}
/* Mặc trang phục nội dung, nó có thể nằm trong một ui-view */
.ui-view-content > .body {
	padding:1em;
}

/* Giao diện tủ đồ, có khả năng hiển thị các không gian giao diện khác nhau */
.ui-cabinet {
	width:100%;
	position: relative;
}
.ui-cabinet .cabinet {
	display: none;
	position: absolute;
	top:0;
	left:0;
	width:100%;
	border-radius: .3em;
	background:white;
	-webkit-box-shadow: 0px 0px 4px rgba(0,0,0,.4);
    box-shadow: 0px 0px 4px rgba(0,0,0,.4);
	z-index: 10;
}

/* Giao diện trường nội dung */
.ui-content-field > .head {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.ui-content-field > .head > .text {
	padding:.4em 0;
}
.ui-content-field > .desc {
	color:#7C7C7C;
	margin-bottom: .4em;
}

/**
 * Giao diện công cụ tùy biến từ sui-buttons
 * Phiên bản 2.0
 */
.ui-button-tools {
	flex-wrap: wrap;
}
.ui-button-tools .sui-button {
	min-width: unset;
}


/* Giao diện file đính kèm */
.ui-file-attach {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}
.ui-file-attach .files {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}
.ui-file-attach > .files .item {
	display: flex;
	align-items: center;
	padding: 0 .8em;
	border-radius: .3em;
	border:solid 1px #1378f5;
	color:#1378f5;
	margin: 0 .8em .8em 0;
}
.ui-file-attach > .files .item .text {
	padding: .8em .8em .8em 0;
}
.ui-file-attach > .add {
	padding:.5em .3em;
	margin: 0 .8em .8em 0;
	position: relative;
	overflow: hidden;
}
.ui-file-attach > .add .loading {
	position: absolute;
	bottom:0;
	left: 0;
	border-radius: .3em;
	width:0;
	height:.4em;
	background:#fff000;
}
.ui-file-attach > .add .file {
	display: none;
}

/* Giao diện bàn luận */
.ui-doc-discuss {
	display: flex;
	align-items: flex-start;
}
.ui-doc-discuss > .photo-box {
	width:3em;
	position: relative;
}
.ui-doc-discuss > .photo-box .ss-avatar {
	width:2em;
	height:2em;
}
.ui-doc-discuss > .photo-box .ss-popup {
	top:unset;
	bottom: 0;
	left:100%;
}
.ui-doc-discuss >.photo-box:hover > .ss-popup {
	display: block;
}
.ui-doc-discuss > .content-box {
	flex:1;
}
.ui-doc-discuss > .content-box .title {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.ui-doc-discuss > .content-box .name {
	font-weight: bold;
	padding:.5em .5em .5em 0;
}
.ui-doc-discuss > .content-box .content {
	margin-bottom: .6em;
}
.ui-doc-discuss > .content-box .content .ss-textbox {
	width:100%;
	height:6em;
	margin-top: .6em;
	border-color: white;
	background:#E6F6FF;
	box-sizing: border-box;
}
/*.ui-doc-discuss > .content-box .attach {
	display: flex;
	align-items: flex-start;
}
.ui-doc-discuss > .content-box .attach .add {
	padding:.5em .3em;
}
.ui-doc-discuss > .content-box .attach .add .file {
	display: none;
}
.ui-doc-discuss[dress="add"] {
	border-radius: .3em;
	border: solid 1px #1378f5;
	padding:.6em;
}*/

/* Tùy chỉnh giao diện thanh hoạt động sản phẩm */
.product-head .lui-droplist, .product-head .lui-textbox {
	width:10em;
}

/* Người xem nội dung nhập vào textbox để kích hoạt tìm nội dung trong khi người dùng vẫn đang gõ */
.ui-textbox-watcher {
	position: absolute;
	display: none;
	width:14em;
	background:white;
	-webkit-box-shadow: 0px 0px 4px rgba(0,0,0,.85);
    box-shadow: 0px 0px 4px rgba(0,0,0,.85);
	z-index: 10;
}

/* Giao diện quét mã qr */
.qr-scan-canvas {
	display: none;
	justify-content: center;
	align-items: center;
	position: fixed;
	top:0;
	left:0;
	width:100%;
	height: 100%;
	background: black;
	z-index: 100;
}
.qr-scan-canvas .canvas {
	width:100%;
	height: 100%;
}
.qr-scan-canvas .capture {
	display: none;
	position: absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	margin: auto;
	width:160px;
	height: 160px;
	border:dashed 3px white;
}
.qr-scan-canvas .close {
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	top:1em;
	right:1em;
	width:1.6em;
	height:1.6em;
	border-radius: 50%;
	border:solid 1px white;
	font-size: 1.4em;
	font-weight: bold;
	color:white;
	cursor: pointer;
}

/** GIAO DIỆN TRANG IN ẤN **/
.ui-printer-pager {
	padding:1em;
	text-align: center;
	background:#f5f5f5;
}

/** Layout các kích thước giấy in **/
.print-paper-a5-frame {
	width: 760px;
	height:535px; /*Tỉnh lệ cạnh là 1.414*/
	border:none;
	padding:0;
	margin: 0;
	overflow: visible;
}
.print-paper-a5 {
	font-family: "Tahoma";
	font-size: 1em;
	width: 760px;
	overflow: auto;
	background:white;
	box-sizing: border-box;
}
.print-paper-a6-frame {
	width: 400px;
	border:none;
	padding:0;
	margin: 0;
	overflow: visible;
}
.print-paper-a6 {
	font-family: "Tahoma";
	font-size: 1em;
	width: 400px;
	background:white;
	box-sizing: border-box;
}
.print-paper-atm-frame {
	width: 300px;
	height:200px;
	border:none;
	padding:0;
	margin: 0;
	overflow: visible;
}
.print-paper-atm {
	font-family: "Tahoma";
	font-size: 1em;
	width: 300px;
	height:200px;
	background:white;
	box-sizing: border-box;
}

/** Giao diện nội dung in hóa đơn **/
.print-trade-bill {
	font-family: "Tahoma";
	font-size: 1em;
	width: 400px;
	padding: 1em;
	background:white;
	box-sizing: border-box;
}
.print-trade-bill .text-center {
	text-align: center;
}
.print-trade-bill .main-title {
	font-size: 1.6em;
	font-weight: bold;
	text-transform: uppercase;
	text-align: center;
}
.print-trade-bill .bill-title {
	text-transform: uppercase;
	font-size: 1.1em;
	font-weight: bold;
	text-align: center;
	margin: 1em 0;
}
.print-trade-bill .sub-title {
	/*font-style: italic;
	font-size: .9em;*/
	font-weight: bold;
	margin-top: 2em;
}
.print-trade-bill .jawelry {
	display: inline-block;
	white-space: nowrap;
	text-align: center;
}
.print-trade-bill .jawelry .title {
	font-size: .8em;
	text-transform: uppercase;
}
.print-trade-bill .jawelry img {
	width:4.2em;
	margin-top: .4em;
}
.print-trade-bill .address {
	margin: .6em 0;
	text-align: center;
}
.print-trade-bill .intro {
	font-size: 1.06em;
	border-radius: .5em;
	border:solid 2px;
	padding:.4em;
	margin: .6em 0;
	text-align: center;
}
.print-trade-bill .bill-info {
	margin-bottom: 1em;
}
.print-trade-bill .table {
	margin-top: .5em;
	width:100%;
}
.print-trade-bill .bill {
	margin-top: 1em;
}
.print-trade-bill .table tr:first-child td, .print-trade-bill .table tr:last-child td {
	border-top:solid 1px;
	border-bottom:solid 1px;
}
.print-trade-bill .table tr td:last-child {
	text-align: right;
	border-right:solid 1px;
}
.print-trade-bill .table tr td:first-child {
	text-align: left;
	border-left:solid 1px;
}
.print-trade-bill .table tr td {
	padding: .4em;
	/* Chiều rộng chia đều cho 4 cột */
	width:25%;
	/*border-bottom:solid 1px;*/
}
.print-trade-bill .table .product-start td {
	padding-bottom: 0;
	border-bottom: 0;
}
.print-trade-bill .table .product-end td {
	padding-top: 0;
}
.print-trade-bill .table .phase-start {
	font-style: italic;
}
.print-trade-bill .table .phase-start td {
	text-align: center !important;
}
.print-trade-bill .table .phase-end td {
	border-top:dashed 1px;
	border-bottom:dashed 1px;
}
.print-trade-bill .table .phase-final td {
	border-top:dashed 1px;
}
.print-trade-bill .table .sum td {
	font-weight: bold;
}
.print-trade-bill .text-small td {
	font-size: .9em;
}
.print-trade-bill .info {
	display: flex;
	align-items: center;
}
.print-trade-bill .info li:last-child {
	width:25%;
	text-align: right;
}
.print-trade-bill .info li:first-child {
	flex: 1;
	text-align: left;
}
.print-trade-bill .marg-bot {
	margin-bottom: .5em;
}
.print-trade-bill .dash-line td {
	border-top: dashed 1px;
}
.print-trade-bill .solid-line td {
	border-top: solid 1px;
}
.print-trade-bill .signature {
	margin-bottom: 6em;
	margin-top: 2em;
}
.print-trade-bill .bill-item {
	margin-top: .6em;
}
.print-trade-bill .bill-item .item-content {
	font-size: .9em;
	margin-right: .6em;
}
.print-trade-bill .pawn-content {
	margin: 1.6em 0;
}
.print-trade-bill .qr-box {
	width:86px;
	height:86px;
}
.print-trade-bill .unit-info {
	margin-top: .3em;
}
.print-trade-bill .guide {
	margin-top: 2em;
	font-size: .9em;
}
.print-trade-bill .footer {
	margin: 2em 0 1.2em 0;
	text-align: center;
	font-size: .9em;
}

/* Nội dung hóa đơn cầm đồ khổ giấy A5*/
.print-pawn-bill {
	height:535px;
	padding:1em;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
}
.print-pawn-bill .bill-head {
	display: flex;
	padding-bottom: 1em;
	border-bottom: dashed 1px;
}
.print-pawn-bill .bill-head .company-info {
	width:36%;
	font-size: 0.9em;
}
.print-pawn-bill .bill-head .title {
	width:30%;
	font-size: 1.1em;
	text-align: center;
	margin-top: 1em;
}
.print-pawn-bill .bill-head .bill-info {
	font-size: 0.9em;
	padding-left: 7em;
}
.print-pawn-bill .bill-customer {
	font-size: .9em;
	margin-top: 1em;
}
.print-pawn-bill .bill-customer .content {
	font-size: 1.1em;
	padding-bottom: .5em;
}
.print-pawn-bill .bill-customer .text-info {
	margin-left: 1em;
}
.print-pawn-bill .bill-content {
	flex:1;
	display: flex;
	margin-top: 1em;
	overflow: hidden;
}
.print-pawn-bill .bill-content .items {
	width:36%;
}
.print-pawn-bill .bill-content .title {
	font-weight: bold;
	padding-bottom:.4em;
}
.print-pawn-bill .bill-content .item {
	margin-bottom: .3em;
}
.print-pawn-bill .bill-content .item-separate {
	height:1px;
	padding-top:1px;
	border-top: dashed 1px;
	margin:.5em 1em .5em 0;
}
.print-pawn-bill .bill-content .item .subtext {
	font-size: .8em;
}
.print-pawn-bill .bill-content .money {
	width:36%;
	margin-right: 1em;
}
.print-pawn-bill .bill-content .profit {
	width:36%;
}
.print-pawn-bill .table-content tr td {
	padding: 0 0 .3em 2em;
}
.print-pawn-bill .table-content td:first-child {
	padding-left: 0;
}
.print-pawn-bill .table-content tr td:last-child {
	text-align: right;
}
.print-pawn-bill .table-content tr .separate {
	border-top: dashed 1px;
}
.print-pawn-bill .bill-foot {
	border-top:dashed 1px;
	padding-top: 1em;
	display: flex;
	flex-direction: row;
}
.print-pawn-bill .bill-foot .sign {
	flex:1;
	display: flex;
	justify-content: space-around;
}
.print-pawn-bill .bill-foot .content {
	text-align: center;
}

/* Nội dung in thẻ cầm đồ */
.print-pawn-card {
	padding-top: 1em;
}
.print-pawn-card .company {
	text-align: center;
	font-weight: bold;
}
.print-pawn-card .card-content {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.print-pawn-card .card-content .info {
	flex:1;
	text-align: center;
}
.print-pawn-card .card-content .info .name {
	/*font-size: 1.1em;*/
	font-weight: bold;
}
.print-pawn-card .card-content .info .code {
	margin-top: .4em;
	padding:.3em 1em;
	display: inline-block;
	border-radius: .3em;
	border:solid 1px black;
}
.print-pawn-card .card-content .qr-box {
	width:120px;
	text-align: center;
}
.print-pawn-card .card-content .qr-box .qr-img {
	margin:auto;
	width:100px;
	height:100px;
}
.print-pawn-card .card-contact {
	font-size: .9em;
	padding:1em;
	box-sizing: border-box;
}
.print-pawn-card .card-contact .contact {
	display: flex;
	justify-content: space-between;
}
.print-pawn-card .card-contact .contact .info {
	display: flex;
	align-items: center;
}
.print-pawn-card .card-contact .contact .info .icon {
	width:1.2em;
	margin-right: .4em;
}
.print-pawn-card .card-contact .address {
	margin-top: .6em;
}

/* Nội dung in mã số hộp cầm đồ */
.print-pawn-box {
	text-align: center;
	padding-bottom: 1em;
}
.print-pawn-box .qr-box {
	width:80px;
}
.print-pawn-box .qr-box .qr-img {
	margin:auto;
	width:60px;
	height:60px;
}
.print-pawn-box .code {
	font-size: .8em;
	padding:.3em 1em;
	display: inline-block;
	border-radius: .3em;
	border:solid 1px black;
}


/* Bố cục lưới */
.flex-layout {
	display: flex;
	flex-wrap: wrap;
	padding-top:1%;
	padding-left:1%;
}
.flex-layout .cell {
	width:49%;
	margin-right: 1%;
	margin-bottom:1%;
}
.flex-layout[grid="4"] .cell, .cell[grid="4"] {
	width:24%;
}
.flex-layout[grid="6"] .cell, .cell[grid="6"] {
	width:15.66%;
}

/* Giao diện tem vàng */
.ui-temvang {
	width:360px;
	height:48px;
	display: flex;
	align-items: center;
}
.ui-temvang .face {
	width:96px;
	height: 100%;
	border-radius: .4em;
	background: white;
}
.ui-temvang .face .box {
	width:100%;
	max-width: 100%;
	max-height: 100%;
	overflow: hidden;
	box-sizing: border-box;
}
.ui-temvang .hook {
	flex:1;
	height:10px;
	background: white;
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
}
.ui-temvang .row {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

/* Cấu hình item */
/* Hộp xem trước */
.ui-temvang-preview {
	padding:2em;
	display: flex;
	align-items: center;
	justify-content: center;
	background:#141414;
}


/* Dialog custom style */
.dialog .field-info {
	color:#707070;
}
.dialog-date .dialog-body, .dialog-date-period .dialog-body {
	overflow: inherit;
}
.dialog-date .dialog-body .dropdown, .dialog-date-period .dialog-body .dropdown {
	max-height: 16em;
	overflow: auto;
}
.dialog-date .list-item:hover {
	background:#eee;
	cursor: pointer;
}
.dialog-intem .leafy-entry {
	width:auto;
}
.dialog-intem .leafy-entry .entry-body {
	max-height: unset;
	overflow: inherit;
}
.dialog-intem .leafy-entry .print-intem-content {
	max-height: 26em;
	overflow: auto;
}

/* Hộp thoại chọn ngày */
.dialog-date .leafy-entry {
	width:32em;
}
.dialog-date .entry-body {
	/*max-height: 24em;*/
	padding:1em;
}
.dialog-date .ui-dateperiod .zone .zone-period .years .lui-droplist .bubble {
	top:unset;
	bottom:100%;
}


.camdo-box {
	padding: 1em;
}
.table-box {
	max-width: 100%;
	overflow: auto;
}
.table-price-edit .lui-textbox {
	width:7em;
}
/* Bảng báo cáo */
.report-table tr td {
	border-right: solid 1px #e0e0e0;
}
.report-table tr:first-child td {
	color:#1378f5;
	border-top: solid 1px #1378f5;
	border-right-color:#1378f5;
}
.report-table tr td:last-child {
	border-right: 0;
}
/* Bảng tính tiền lời */
.profit-table {
	width: 100%;
}
.profit-table tr:first-child td {
	font-weight: bold;
}
.profit-table .profit td {
	font-weight: bold;
	background:#f5f5f5;
}
.profit-table .profit-cal td {
	border-bottom:solid 1px #e0e0e0;
}
.profit-table .profit-cal td:first-child {
	border-bottom:solid 0px #f5f5f5;
}
.camdo-table tr:first-child td {
	border-top: solid 1px #d0d0d0;
}
.camdo-table tr td:first-child {
	border-left: solid 1px #d0d0d0;
}
.camdo-table td {
	border-right: solid 1px #d0d0d0;
	border-bottom: solid 1px #d0d0d0;
	text-align: center;
	vertical-align: middle;
	padding:.4em .6em;
}


/** BỐ CỤC **/
.lu-header {
	min-height: 4em;
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: white;
}
.lu-body {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	min-height: 32em;
}
.lu-menu {
	width:22em;
}
.lu-content {
	flex: 1;
	margin-bottom: .6em;
}
.lu-login {
	position: fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: white;
}
.lu-login[dress="change-pass"] {
	top:4em;
}
.lu-login[dress="change-pass"] .ui-login {
	margin-top:-4em;
}
/* Thanh đầu trang web */
.ui-header {
	padding:0 1em;
	border-bottom: solid 4px #fff000;
}
.ui-header .branch {
	display: flex;
	align-items: center;
}
.ui-header .trademark {
	font-size: 1.4em;
	font-weight: bold;
}
.ui-header .member-box {
	position: relative;
	display: flex;
	align-items: center;
}
.ui-header .member-box .ss-avatar {
	width:2.8em;
	height:2.8em;
	border:solid 2px #fff000;
}
.ui-header .member-box:hover > .ss-member-profile {
	display: block;
}

/* Menu chính */
/* Giao diện mở menu chính, chỉ hoạt động trong màn hình kích thước nhỏ */
.ui-menu-starter {
	display: none;
	justify-content: center;
	width: 100%;
	height: 2em;
	background: white;
	-webkit-box-shadow: 0px 0px 4px rgba(0,0,0,.4);
    box-shadow: 0px 0px 4px rgba(0,0,0,.4);
	z-index: 101;
}
.ui-menu-starter .content {
	width: 3.6em;
	position: relative;
}
.ui-menu-starter .content .center-button {
	position: absolute;
	top: -76%;
	left: 0;
	right: 0;
	margin: auto;
	width: 3.6em;
	height: 3.6em;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: white;
	-webkit-box-shadow: 0px -2px 2px rgba(0,0,0,.4);
    box-shadow: 0px -2px 2px rgba(0,0,0,.4);
}
.ui-menu-starter .content .center-button img {
	max-width: 50%
}
.lp-menu-box {
	margin: .6em;
	border-radius: .3em;
	background: white;
	overflow: hidden;
}
.ui-main-menu {
	margin: 1em 0;
}
.ui-main-menu  > .item {
	padding:0 1em;
	font-size: 1.1em;
}
.ui-main-menu > .item:hover {
	background: #E6F6FF;
}
.ui-main-menu > .item .icon {
	padding:0;
}
.ui-main-menu > .item .icon img {
	height:auto;
}
.ui-main-menu > .item .content .text {
	padding:.8em 0;
}

/* Menu hiện tại của url */
.ui-recent-menu-panel {
	display: flex;
	align-items: stretch;
	border-bottom: solid 1px #f5f5f5;
}
.ui-home-menu {
	width:3.6em;
	border-right: solid 1px #f5f5f5;
	display: flex;
	align-items: center;
	justify-content: center;
}
.ui-home-menu .icon {
	width:1.4em;
}
.ui-recent-menu {
	flex:1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-left: 1em;
}
.ui-home-menu:hover, .ui-recent-menu:hover {
	background: #E6F6FF;
}
.ui-recent-menu > .head {
	display: flex;
	align-items: center;
}
.ui-recent-menu > .head .text {
	font-size: 1.1em;
	font-weight: bold;
	display: block;
	padding:.8em 1em;
}
.ui-recent-menu > .notify {
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	width: 1.8em;
	height: 1.8em;
	margin: .4em;
	background:#fff000;
}

/* Giao diện menu con */
.ui-sub-menu .leaf .item a {
	flex:1;
}

/* Giao diện chỉnh sửa nội dung */
.ui-data-editor-entry .lui-form {
	padding-bottom: 1em;
}
.ui-data-editor-entry .form-field:last-child {
	margin-bottom: 0;
}

/* Cổng xem tài liệu */
.ui-doc-view > .body .doc-info {
	padding:0 1em;
}
.ui-doc-view > .body .doc-content {
	padding:2em 1em;
	margin-top:1em;
	border-top:solid 1px #ebebeb;
	border-bottom:solid 1px #ebebeb;
}
.ui-doc-view > .body .doc-content img {
	max-width: 100%;
}
.ui-doc-view > .body .doc-discussion {
	padding:1em;
	margin-top:1em;
}
.ui-doc-view > .body .doc-discussion > .head .text {
	font-weight: bold;
}
.ui-doc-view > .body .doc-discussion .create-discuss {
	border-radius: .3em;
	border:solid 1px #1378f5;
	padding:1em;
}
.ui-doc-view > .body .doc-discussion .create-discuss .lui-textarea {
	margin-top: .6em;
	min-height: 4em;
}
.ui-doc-view > .body .doc-discussion .ui-doc-discuss {
	margin-bottom:1em;
}

/* Danh sách tin tài liệu */
.ui-doc-list > .item {
	display: block;
	border-bottom: solid 1px #e0e0e0;
	padding:.6em;
}
.ui-doc-list > .item:hover {
	background: #E6F6FF;
}
.ui-doc-list > .item[readed] .text {
	color:#777;
}
.ui-doc-list > .item:last-child {
	border-bottom: 0;
}

/* Danh sách người nhận tài liệu */
.ui-doc-receiver-list > .item {
	border-radius: .3em;
	margin: 0 .6em .6em 0;
}
.ui-doc-receiver-list > .item .ss-avatar {
	width:1.6em;
	height:1.6em;
	margin-left: .6em;
}
.ui-doc-receiver-list > .item .ss-icon {
	width:1em;
	height:1em;
	margin-left: .6em;
}
.ui-doc-receiver-list > .item .remove {
	font-size: 1.2em;
	font-weight: bold;
	padding:.3em .6em;
	cursor: default;
}
.ui-doc-receiver-list > .item .remove:hover {
	color:#f51313;
	background:#ffeded;
	border-top-right-radius: .3em;
	border-bottom-right-radius: .3em;
}
.ui-doc-receiver-list > .item .remove:active {
	background:#FFCDCD;
}
.ui-doc-receiver-list > .item[dress="department"] {
	background:#a9e9f4;
}
.ui-doc-receiver-list > .item[dress="list"] {
	background:#bbf4a9;
}
.ui-doc-receiver-list > .item[dress="person"] {
	background:#f4e2a9;
}
/* Tìm nhân viên */
.ui-doc-receiver-list .person .text {
	width:6em;
	padding:.3em .8em;
	margin-left: .6em;
	border:0;
	border-radius: .3em;
	background: #f3db90;
}
/* Item nổi, chứa popup bên trong */
.ui-doc-receiver-list .popup-item {
	position:relative;
}
.ui-doc-receiver-list .popup-item .ss-popup {
	width:20em;
}

/* Mục bàn luận tài liệu */
.ui-doc-discussion .ui-doc-discuss {
	margin-bottom: 1em;
}

/* Giao diện đăng nhập */
.ui-login {
	width:20em;
	border-radius: .3em;
	background: white;
	-webkit-box-shadow: 0px 0px 4px rgba(0,0,0,.4);
    box-shadow: 0px 0px 4px rgba(0,0,0,.4);
	margin: 0;
}
.ui-login[dress="change-password"] {
	-webkit-box-shadow: unset;
    box-shadow: unset;
	margin: auto;
	padding: 2em 0;
}
.ui-login > .head .title .text {
	display: inline-block;
	font-size: 1.4em;
	font-weight: bold;
	padding:.8em;
}
.ui-login .body {
	padding: 0 1em;
}
.ui-login .ui-content-field {
	margin-bottom: 1em;
}
.ui-login .ui-content-field .text {
	font-weight: normal;
}
.ui-login .ss-textbox {
	width:100%;
	box-sizing: border-box;
}
.ui-login .footer {
	padding:0 1em 1em 1em;
	text-align: right;
}
.ui-login .footer .ss-button {
	border:0;
	padding:.6em 1em;
	font-weight: bold;
}
.ui-login .warn {
	padding:.8em 1em;
	border-radius: .3em;
	color:#f51313;
	background:#ffeded;
	margin-bottom: 1em;
}
.ui-login .warn[dress="benefit"] {
	color:#047415;
	background:#E4FFE8;
}

/* Giao diện tùy chỉnh cho chức năng cấp quyền sử dụng chức năng erp */
.ui-erp-functions-editor {
	
}
.ui-erp-functions-editor .department {
	width:auto;
	margin-right: .4em;
}
.ui-erp-functions-editor .department .lui-popup {
	width:20em;
}
.ui-erp-functions-editor .lui-dialog .lui-entity {
	width:32em;
}

/* Giao diện hộp thoại chỉnh sửa nội dung */
.editor-dialog .lui-entity {
	width:32em;
}
.editor-dialog .entity-body {
	max-height: 26em;
}

/* Giao diện thoại chỉnh sửa nội dung */
.add-employee-dialog .lui-entity {
	width:32em;
}
.add-employee-dialog .entity-body {
	padding:0 1em 1em 1em;
}
.add-employee-dialog .field {
	margin-top:2em;
}
.add-employee-dialog .field:last-child {
	margin-bottom:2em;
}
.add-employee-dialog .field > .text {
	margin-bottom:1em;
}
.add-employee-dialog .search-bar {
	display: flex;
	align-items: center;
}
.add-employee-dialog .search-bar .lui-textbox {
	flex:1;
}
.add-employee-dialog .search-bar .ss-button {
	margin: 0 .6em;
}

/* Giao diện sửa giá vàng */
.gold-price-update .price-label {
	font-weight: bold;
}
.gold-price-update tr td {
	padding:1em;
}

/* Giao diện chỉnh sửa nội dung one */
.ui-editor-one .cabinet {
	padding:1em;
	box-sizing: border-box;
}
.ui-editor-one .cabinet .ui-content-field > .head > .text {
	font-weight: normal;
	padding:.4em 0;
}

/* Giao diện soạn tài liệu */
.ui-hmo-create-document > .body {
	padding:1em;
}
.ui-hmo-create-document > .body .ui-content-field {
	margin-bottom:1em;
}
.ui-hmo-create-document > .body .ss-popup {
	z-index: 20;
}
.ui-hmo-create-document > .body .lui-tree {
	max-height: 20em;
	overflow: auto;
}
.ui-hmo-create-document > .body .text-hint {
	color: #AC8408;
}
.ui-hmo-create-document > .body .ui-drop-selection .lui-textbox {
	width: 8em;
}
.ui-hmo-create-document > .body .trumbowyg-box, .trumbowyg-editor {
	border-radius: .3em;
	border-bottom: solid 3px #1488f4;
}
.ui-hmo-create-document > .body .ui-doc-receiver-selection {
	padding:.6em;
	margin-bottom: 1em;
	border-radius: .3em;
	background:#E6F6FF;
}
.ui-hmo-create-document > .body .ui-doc-receiver-list {
	min-height: 1em;
}

/* Giao diện nội dung công văn */
.ui-group-hmo-view .body {
	padding:1em;
}
.ui-group-hmo-view .body .leafy-group-input {
	border:solid 1px #e0e0e0;
	border-bottom:solid 3px #1488f4;
	background: white;
}
.ui-group-hmo-view .body .ui-view {
	border-radius: .3em;
	border:solid 1px #ccc;
	margin:1em 0 0 0;
}
.ui-group-hmo-view .body .ui-content-field {
	margin-right: 1em;
}
.ui-group-hmo-view .body .bubble {
	width:26em;
}

/* Giao diện ngày chấm công */
.ui-daily-work .item {
	width:2.4em;
	height:2.4em;
	justify-content: center;
	border-radius: 50%;
	border:solid 1px #ccc;
	margin-bottom: 1em;
	box-sizing: border-box;
}
.ui-daily-work .item[dress='work'] {
	color:white;
	border-color: #12D1F5;
	background:#12D1F5;
}
.ui-daily-work .item[dress='cease'] {
	color:white;
	border-color: #029E19;
	background:#029E19;
}
.ui-daily-work .item[dress='unwork'] {
	color:white;
	border-color: #f51313;
	background:#f51313;
}
.ui-daily-work[interact] .item:hover {
	border-color: #C8ECFF;
	background: #C8ECFF;
}
.ui-daily-work[interact] .item[selected] {
	border:solid 3px #1378f5;
}
.ui-daily-work[interact] .item[selected]:hover {
	border:solid 3px #1378f5;
}

/* Giao diện kiểm toán các ngày trong tháng */
.ui-audit-month .item {
	width:2.4em;
	height:2.4em;
	justify-content: center;
	border-radius: 50%;
	border:solid 1px #ccc;
	margin-bottom: 1em;
	box-sizing: border-box;
}
.ui-audit-month .item[dress='success'] {
	color:white;
	border-color: #029E19;
	background:#029E19;
}
.ui-audit-month .item[dress='warn'] {
	color:white;
	border-color: #FFA615;
	background:#FFA615;
}
.ui-audit-month .item[dress='risk'] {
	color:white;
	border-color: #f51313;
	background:#f51313;
}
.ui-audit-month .item[today] {
	border-color: #12D1F5;
	border-width: 3px;
}

/* Giao diện phiếu giám định */
.ui-ticket-assessment .ui-content-field {
	border-radius: .3em;
	border:solid 1px #ccc;
	padding:0 .6em .6em .6em;
	margin-right: 1em;
	margin-bottom: 1em;
}
.ui-ticket-assessment .table-field {
	padding:.6em .6em .6em;
	margin-right: 0;
}
.ui-ticket-assessment .table-field {
	padding:0;
	margin-right: 0;
}
.ui-ticket-assessment .table-field .head {
	padding:.6em .6em 0 .6em;
}
.ui-ticket-assessment .info-field .content-view {
	border-radius: .3em;
	padding:.4em .6em;
	background: #E6F6FF;
}
.dialog-assessment-item .lui-entity {
	width: 48em;
}
.dialog-assessment-item .ui-content-field {
	margin-right: 1em;
	margin-bottom: 1em;
}

/* Giao diện tùy chỉnh cổng xem công văn */
.ocd-viewport .ui-content-field .content .lui-droplist, .ocd-viewport .ui-content-field .content .lui-droptree, .ocd-viewport .ui-content-field .content .lui-textbox, .ocd-viewport .ui-content-field .content .lui-textarea {
	width:100%;
}

/* Giao diện bảng giá vàng lớn cho khách hàng xem */
.ui-gold-price-board {
	position: fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	display: flex;
	flex-direction: column;
	background: #fff000;
	overflow: auto;
}
.ui-gold-price-board .trademark {
	display: flex;
	align-items: center;
	border-bottom: solid 2px white;
}
.ui-gold-price-board .trademark .logo {
	height: 70%;
	margin-left: 2em;
}
.ui-gold-price-board .trademark .text {
	font-size: 4em;
	font-weight: bold;
	padding:.4em;
}
.ui-gold-price-board .today {
	font-size: 1.4em;
	padding:.4em;
	border-top:solid 2px #eee;
}
.ui-gold-price-board .gold-board {
	width:100%;
	flex: 1;
	font-size: 4em;
	font-weight: bold;
	border-top:solid 2px white;
	background: #fff000;
}
.ui-gold-price-board .gold-board tr:first-child td {
	color:white;
	font-size: .7em;
	background:red;
}
.ui-gold-price-board .gold-board tr td {
	padding-left:.3em;
	font-size: 1.2em;
	border-right:solid 2px white;
	border-bottom:solid 2px white;
}
.ui-gold-price-board .gold-board tr td:last-child {
	border-right:0;
}


/* GROUP STYLE */
.ss-hit, .ss-actions .action, .ss-actions .icon-action, .ui-linearlist .item, .ui-dateperiod .head .options .option {
	color:#1378f5;
	background:#E6F6FF;
}
.ss-hit:hover, .ss-actions .action:hover, .ss-actions .icon-action:hover, .ui-linearlist .item:hover, .ui-dateperiod .head .options .option:hover {
	background:#C8ECFF;
}
.ss-hit:active, .ss-actions .action:active, .ss-actions .icon-action:active {
	background: #E6F6FF;
}
.ui-linearlist .item[selected], .ui-dateperiod .head .options .option[focus], .ss-actions > .action[switch='1'] {
	color:white;
	background:#1378f5;
}


/* RESPONSIVE STYLE */
@media screen and (max-width: 1000px) {
	.ui-homemenus .item {
		width:23%;
	}
}
@media screen and (max-width: 768px) {
	/* Thích ứng giao diện menu và nội dung toàn trang */
	.lu-body {
		display: block;
	}
	.lu-menu .lp-menu-box {
		width:100%;
		max-height: 86%;
		position: fixed;
		bottom:0;
		left: 0;
		margin: 0;
		border-radius: 0;
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		overflow: visible;
		z-index: 102;
	}
	.lu-menu .lp-menu-box .ui-menu {
		width: 100%;
		max-height: 80%;
		overflow: auto;
		display: none;
		background: white;
		border-top: solid 1px #e0e0e0;
	}
	.lu-content {
		width:100%;
		padding-left: .6em;
		box-sizing: border-box;
	}
	
	.ui-viewport {
		display: block;
	}
	.ss-doc-sender .text {
		width:1px;
		height:1.8em;
		padding: 0;
		overflow: hidden;
	}
	.tooltip {
		width:unset;
	}
	.ui-billphase, .ui-doorentry {
		margin: 1em;
	}
	.dialog-date .entry-body, .dialog-intem .leafy-entry .print-intem-content {
		max-height: 18em;
	}
	
	.table-box .lui-table {
		white-space: nowrap;
	}
}
@media screen and (max-width: 480px) {
	.dialog-date .entry-body, .dialog-intem .leafy-entry .print-intem-content {
		max-height: 14em;
	}
	.ui-homemenus .item {
		width:48%;
	}
}
@media screen and (max-height: 460px) {
	.editor-dialog .entity-body {
		max-height: 18em;
	}
}
@media screen and (max-height: 360px) {
	.dialog-date .entry-body {
		max-height: 10em;
	}
	.dialog-intem .leafy-entry .print-intem-content {
		max-height: 6em;
	}
}