/**
 * File chứa style của giao diện thành phần đơn lẻ, các thành phần này cấu thành nên giao diện trang web
 */


/* STYLE NGUYÊN TỐ, ĐỌC LẬP, NHỎ SỬ DỤNG NHIỀU LẦN */
.pad {
	padding: 10px;
}
.pad-left {
	padding-left: 10px;
}
.pad-top {
	padding-top: 10px;
}
.pad-right {
	padding-right: 10px;
}
.pad-bottom {
	padding-bottom: 10px;
}
.pad-hoz {
	padding-left: 10px;
	padding-right: 10px;
}
.pad-ver {
	padding-top: 10px;
	padding-bottom: 10px;
}
.marg {
	margin: 10px;
}
.marg-left {
	margin-left: 10px;
}
.marg-top {
	margin-top: 10px;
}
.marg-right {
	margin-right: 10px;
}
.marg-bottom {
	margin-bottom: 10px;
}
.marg-hoz {
	margin-left: 10px;
	margin-right: 10px;
}
.marg-ver {
	margin-top: 10px;
	margin-bottom: 10px;
}
.round {
	border-radius: .3em !important;
}
.round-left {
	border-top-left-radius: .3em !important;
	border-bottom-left-radius: .3em !important;
}
.round-right {
	border-top-right-radius: .3em !important;
	border-bottom-right-radius: .3em !important;
}
.round-up {
	border-top-left-radius: .3em !important;
	border-top-right-radius: .3em !important;
}
.round-down {
	border-bottom-left-radius: .3em !important;
	border-bottom-right-radius: .3em !important;
}

.trans-down {
	transform: rotate(90deg) !important;
}
.trans-up {
	transform: rotate(-90deg) !important;
}
.flip-ver {
	-webkit-transform: scaleY(-1);
	transform: scaleY(-1);
}
.flip-hoz {
	-webkit-transform: scaleX(-1);
	transform: scaleX(-1);
}
.arrow-up {
	display: inline-block;
	width: 0; 
	height: 0; 
	border-left: .4em solid transparent;
	border-right: .4em solid transparent;
	border-bottom: .4em solid black;
}
.arrow-down {
	display: inline-block;
	width: 0; 
	height: 0; 
	border-left: .4em solid transparent;
	border-right: .4em solid transparent;
	border-top: .4em solid black;
}
.arrow-right {
	display: inline-block;
	width: 0; 
	height: 0; 
	border-top: .4em solid transparent;
	border-bottom: .4em solid transparent;
	border-left: .4em solid black;
}
.arrow-left {
	display: inline-block;
	width: 0; 
	height: 0; 
	border-top: .4em solid transparent;
	border-bottom: .4em solid transparent; 
	border-right: .4em solid black;
}
.arrow-up[dress="blue"] {
	border-bottom-color: #1378f5;
}
.arrow-down[dress="blue"] {
	border-top-color: #1378f5;
}
.arrow-right[dress="blue"] {
	border-left-color: #1378f5;
}
.arrow-left[dress="blue"] {
	border-right-color: #1378f5;
}

.flex-hoz {
	display: flex;
	align-items: center;
}
.flex-hoz-space {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.flex-hoz-start {
	display: flex;
	align-items: flex-start;
}
.flex-hoz-space-start {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
}
.flex-center {
	display: flex;
	align-items: center;
	justify-content: center;
}
.flex-wrap {
	flex-wrap: wrap;
}
.flex-fill {
	flex:1;
}
.box-fill {
	width:100%;
}

.abs-left {
	left:0 !important;
	right: unset !important;
}
.abs-right {
	left:unset !important;
	right:0 !important;
}
.abs-top {
	button:unset !important;
	top:0 !important;
}
.abs-bottom {
	top:unset !important;
	bottom:0 !important;
}

/* Hiệu ứng chú ý */
.flick {
	animation: ani-flick 1s;
	-webkit-animation: ani-flick 1s;
}
@-webkit-keyframes ani-flick {
	50% {background: #ff5f14;}
	100% {background: unset;}
}
@keyframes ani-flick {
	50% {background: #ff5f14;}
	100% {background: unset;}
}


/** GHI ĐÈ GIAO DIỆN LEAF CỦA NỀN TẢNG **/
.lui-check .check {
	width:1.4em;
	height:1.4em;
}
.lui-check .check[checked]::after {
	top:.2em;
	left:.2em;
	width:1em;
	height:1em;
	background:#1378f5;
}
.lui-check .check[checked][radio]::after {
	top: 0.2em;
	left: 0.2em;
	width:1em;
	height:1em;
	border-radius: 50%;
}
.lui-check .check[checked] {
	border-color:#1378f5;
}

.lui-form[grid] {
	display: flex;
	flex-wrap: wrap;
}
.lui-form[grid="4"] .form-field {
	width:24%;
	margin-right: 1%;
	margin-bottom: 1% !important;
	padding:0 .8em .8em .8em;
	border-radius: .3em;
	border:solid 1px #e0e0e0;
	box-sizing: border-box;
}
.lui-form[grid="6"] .form-field {
	width:15.666%;
	margin-right: 1%;
	margin-bottom: 1%;
}
.lui-form .form-field {
	margin:1.4em 1em 0 1em;
}
.lui-form .form-field:last-child {
	margin-bottom: 1.4em;
}
.lui-form .form-field .field-label {
	margin-bottom: .3em;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.lui-form .form-field .field-desc {
	margin-bottom: .3em;
	color:#777;
}
.lui-form .form-field .field-actions {
	display: flex;
	align-items: center;
}
.lui-form .form-field .field-actions .action {
	display: flex;
	align-items: center;
	justify-content: center;
	padding:.4em;
	margin-left: .6em;
	border-radius: .3em;
}
.lui-form .form-field .field-actions .action:hover {
	background: #E6F6FF;
}
.lui-form .form-field .field-actions .action:active {
	background: #C8ECFF;
}
.lui-form .form-field .lui-droplist, .lui-form .form-field .lui-droptree, .lui-form .form-field .lui-textbox {
	width: 100%;
}

.lui-dialog > .lui-entity .entity-head {
	border-bottom: solid 1px #ccc;
}
.lui-dialog > .lui-entity .entity-head .entity-title {
    padding: 0.8em;
}
.lui-dialog > .lui-entity > .entity-head .actions .close {
    color:white;
	background:#d41313;
}
.lui-dialog > .lui-entity > .entity-head .actions .close:hover {
	background:#EC2B2B;
}
.lui-dialog > .lui-entity > .entity-head .actions .close:active {
	background:#BE1111;
}
.lui-dialog > .lui-entity .entity-body::-webkit-scrollbar {
	width: .46em;
	height: .46em;
}
.lui-dialog > .lui-entity .entity-body::-webkit-scrollbar-track {
	background: #ebebeb;
	border-radius: .3em;
}
.lui-dialog > .lui-entity .entity-body::-webkit-scrollbar-thumb {
	background: #1378f5;
	border-radius: .3em;
}

/* Bảng Leaf */
.lui-table {
	width:100%;
}
.lui-table tr td {
	padding: .6em;
	border-bottom: solid 1px #e0e0e0;
}
.lui-table tr[selected] td {
	background:#E6F6FF;
}
.lui-table tr:first-child td {
	font-weight: bold;
	border-bottom: solid 2px #1378f5;
}
.lui-table tr:last-child td {
	border-bottom: 0;
}
.lui-table img {
	vertical-align: middle;
	margin-right: 1em;
}
.lui-table .row-hit, .lui-table .cell-hit {
	cursor: default;
}
.lui-table .row-hit:hover, .lui-table .cell-hit:hover {
	background:#C8ECFF;
}
.lui-table .row-hit:active, .lui-table .cell-hit:active {
	background:#E6F6FF;
}
.lui-table .selection-cell {
	width:2.2em;
}
/* Giao diện chọn khoảng ngày Leaf */
.lui-date .period-box .period {
	border:solid 1px #e0e0e0;
}
.lui-date .period-box .period:hover {
	background:#C8ECFF;
}
.lui-date .date-box {
	border:solid 1px #e0e0e0;
}
.lui-date .date-box .date:hover {
	background:#C8ECFF;
}
.lui-date .date-box .date[focus] {
	color:white;
	background:#1378f5 !important;
}
.lui-date .date-box .calendar:hover {
	background:#C8ECFF;
}
.lui-date .linear-list .item:hover {
	background:#C8ECFF;
}
.lui-date .linear-list .item[focus] {
	color:white;
	background:#1378f5;
}
.lui-date .periods .sepa {
	border-top:solid 1px #f1f1f1;
}
.lui-date .periods .year-box::-webkit-scrollbar-track {
	background: #ebebeb;
	border-radius: .3em;
}
.lui-date .periods .year-box::-webkit-scrollbar-thumb {
	background: #1378f5;
}
.lui-date .period-selection .item:hover {
	background: #C8ECFF;
}


.lui-textbox {
	background:white;
}
.lui-textbox, .lui-textarea, .lui-droplist .label-box, .lui-droptree .label-box, .form-field .label-box {
	width:100%;
	border-radius: .3em;
	border:solid 1px #b7b7b7;
	border-bottom:solid 3px #1488f4;
	background: white;
}

/* Giao diện hộp nhập số tiền và khối lượng */
.ui-money-label-box, .ui-weight-label-box {
	width: 100%;
    border-radius: 0.3em;
    border: solid 1px #b7b7b7;
    border-bottom: solid 3px #1488f4;
    background: white;
	box-sizing: border-box;
}
.ui-money-label-box .lui-textbox, .ui-weight-label-box .lui-textbox {
	border:0;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}
.ui-money-label-box .label, .ui-weight-label-box .label {
	padding:.3em .6em;
	border-top:solid 1px #ddd;
	background: #FAFAFA;
}
.ui-money-label-box .number-box {
	display:flex;
	align-items: center;
}
.ui-money-label-box .number-box .lui-textbox {
	flex:1;
}
.ui-money-label-box .number-box .multiply {
	padding:.3em .6em .3em 0;
	color:#828282;
}

/*.lui-droplist, .lui-droptree {
	width:16em;
}*/
.lui-droplist .label-box, .lui-droptree .label-box {
	box-sizing: border-box;
}
.lui-droplist .label-box > .label, .lui-droptree .label-box > .label {
	padding:.4em .6em;
}
.lui-list .item {
	padding: 0 0.8em;
	cursor:default;
}
.lui-list .item:hover {
	background: #E6F6FF;
}
.lui-list .item:active {
	background: #C8ECFF;
}
.lui-list .item[selected] {
	color:white;
	background:#1378f5;
}
/*.lui-droplist .label-box .arrow {
	margin-right: 0 !important;
}*/
.lui-tree .leaf .item {
	line-height: unset;
}
.lui-tree .leaf .item:hover {
	 background: #E6F6FF;
}
.lui-tree .leaf .item[selected] {
	 background: #D8F1FF;
}
.lui-tree .leaf .item .label {
	padding:.6em 0;
	display: block;
	flex: 1;
}
.lui-tree .leaf .item .notify-box {
	padding: 0 .4em;
	display: flex;
	align-items: center;
	justify-content: center;
}
.lui-tree .leaf .item .notify {
	width:1.8em;
	height:1.8em;
	font-size: .9em;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background:#fff000;
}
.lui-tree .leaf .item .appender {
	width:2em;
}
.lui-tree .picker {
	width:2.2em;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: .8em;
}
.lui-tree .picker .check {
	width:2em;
	height:2em;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
}
.lui-tree .picker .check .mark {
	display: inline-block;
	width:1.2em;
	height:1.2em;
	border-radius: .3em;
	border:solid 1px #1488F4;
	background: white;
	position: relative;
}
.lui-tree .leaf .item[selected] .picker .check .mark::after {
	content: "";
	position: absolute;
	top:0;
	right:0;
	bottom:0;
	left:0;
	margin: auto;
	width:.9em;
	height:.9em;
	border-radius: .3em;
	background:#1488F4;
}
.lui-tree .picker .check[radio] .mark {
	width:1.1em;
	height:1.1em;
	border-radius: 50%;
}
.lui-tree .leaf .item[selected] .picker .check[radio] .mark::after {
	width:.8em;
	height:.8em;
	border-radius: 50%;
}
.lui-tree .leaf .item .desc {
	color:#777;
	font-size: .9em;
}
.lui-tree .leaf .item[highlight] .label {
	color:#1378f5;
}
.lui-tree .leaf .item[highlight] .desc {
	color:#1378f5;
}
.lui-tree .leaf .item[none-select] .picker .check .mark, .lui-tree .leaf .item[none-select] .picker .check .mark::after {
	background: unset;
	border:unset;
}
.lui-tree .leaf .item[poor] .label {
	color:#A0A0A0;
}
.lui-tree .leaf .item[poor] .desc {
	color:#ccc;
}
.lui-droptree .label-box:hover {
	background: #E6F6FF;
}


.lui-fileupload .item {
	border-color: #b7b7b7;
	border-bottom: solid 3px #1378f5;
}
.lui-fileupload .item .title .head .ext {
	color:white;
	background: #1378f5;
}
.lui-fileupload .item .remove {
	background: unset;
	cursor: default;
}
.lui-fileupload .item .remove:hover {
	color:white;
	background:#EC2B2B;
}
.lui-fileupload .item .remove:active {
	color:white;
	background:#BE1111;
}
.lui-fileupload .add .addbox {
	background:
		linear-gradient(#444, #444),
		linear-gradient(#444, #444),
		white;
	background-position:center;
	background-size: 50% 5px, 5px 50%;
	background-repeat:no-repeat;
}
.lui-fileupload .add .addbox:hover {
	background:
		linear-gradient(white, white),
		linear-gradient(white, white),
		#1378f5;
	background-position:center;
	background-size: 50% 5px, 5px 50%;
	background-repeat:no-repeat;
}


.lui-sort .item .check .mark {
	border-color:solid 1px #b7b7b7;
}
.lui-sort .item[selected] {
	color:white;
	background: #1378f5;
}
.lui-sort .item[selected] .check .mark::after {
	background: #1378f5;
}
.lui-sort .jumpers .jumper {
	border:solid 1px #b7b7b7;
	background: white;
}
.lui-sort .jumpers .jumper:hover {
	border-color: #C8ECFF;
	background: #C8ECFF;
}
.lui-sort .jumpers .jumper:active {
	color:white;
	border-color: #1378f5;
	background: #1378f5;
}
.lui-sort .ss-actions .ss-icon:hover {
	background: #C8ECFF;
}
.lui-sort .ss-actions .ss-icon[disabled]:hover {
	background: inherit;
}


.lui-button[dress="silver"] {
	color:#444;
}
.lui-button[dress="silver"]:active {
	color:#444;
	background: #ddd;
}


/* Nút, kiểu mặc định màu xanh */
.ss-button {
	border-radius: .3em;
	display: inline-flex;
	align-items: center;
	color: #1378f5;
	background:#E6F6FF;
	cursor: default;
}
.ss-button:hover {
	background: #C8ECFF;
}
.ss-button:active {
	background: #E6F6FF;
}
.ss-button .text {
	padding:.4em 1em;
}
.ss-button[focus] {
	background: #A2DEFE;
}
.ss-button[dress="silver"] {
	color: #555555;
	background:#eeeeee;
}
.ss-button[dress="silver"]:hover {
	background:#E0E0E0;
}
.ss-button[dress="silver"]:active {
	background:#eeeeee;
}
.ss-button[disabled] {
	opacity: .5;
}
.ss-button[disabled]:hover {
	background:#E6F6FF;
}

/* Nút đôi, kiểu mặc định màu xanh */
.ss-double-button {
	border-radius: .3em;
	display: flex;
	align-items: stretch;
	color: #1378f5;
	background:#E6F6FF;
	overflow: hidden;
}
.ss-double-button .button {
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: default;
}
.ss-double-button .button:hover {
	background: #C8ECFF;
}
.ss-double-button .button:active {
	background: #E6F6FF;
}
.ss-double-button .button[focus] {
	background: #A2DEFE;
}
.ss-double-button .button .text {
	padding:.4em 1em;
}
.ss-double-button .button .icon {
	padding:.4em 1em;
}
.ss-double-button .button:first-child {
	border-right: solid 1px #c1d9ec;
}

/* Nút biểu tượng tròn, kiểu mặc định màu xanh */
.ss-symbol-button {
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background:#E6F6FF;
	width:2.2em;
	height:2.2em;
	cursor: default;
}
.ss-symbol-button .icon {
	width: 1.4em;
}
.ss-symbol-button:hover {
	background: #C8ECFF;
}
.ss-symbol-button:active {
	background: #E6F6FF;
}
.ss-symbol-button[small] {
	width:1.8em;
	height:1.8em;
}
.ss-symbol-button[focus] {
	background: #A2DEFE;
}
.ss-symbol-button[dress="plus"] .symbol {
	font-size: 1.4em;
	font-weight: bold;
	color:#1378f5;
}
.ss-symbol-button[dress="download"] .icon {
	width:1em;
}
.ss-symbol-button[dress="remove"] {
	background:#ffeded;
}
.ss-symbol-button[dress="remove"] .symbol {
	color:#f51313;
	font-size: 1.2em;
	font-weight: bold;
}
.ss-symbol-button[dress="remove"]:hover {
	background: #FFCDCD;
}
.ss-symbol-button[dress="remove"]:active {
	background: #ffeded;
}
.ss-symbol-button[dress="close"] {
	color:#777;
	background: #f1f1f1;
}
.ss-symbol-button[dress="close"] .symbol {
	font-size: 1.2em;
	font-weight: bold;
}
.ss-symbol-button[dress="close"][r45] .symbol, .ss-symbol-button[dress="remove"][r45] .symbol {
	transform: rotate(45deg);
}
.ss-symbol-button[dress="close"]:hover {
	background: #e0e0e0;
}
.ss-symbol-button[dress="close"]:active {
	background: #ccc;
}

/* Hộp nổi */
.ss-popup {
	position: absolute;
	top:100%;
	left:0;
	border-radius: .3em;
	background: white;
	-webkit-box-shadow: 0px 0px 6px rgba(0,0,0,.4);
    box-shadow: 0px 0px 6px rgba(0,0,0,.4);
	z-index: 10;
}
.ss-popup[popver="top"] {
	top:unset;
	bottom:100%;
}
.ss-popup[pophoz="right"] {
	left:inherit;
	right:0;
}


/** GIAO DIỆN THÀNH PHẦN TRONG ERP **/
/* Giao diện phân trang */
.ui-pager {
	display: inline-flex;
	align-items: stretch;
	border-radius: .3em;
	background:#E6F6FF;
	cursor: pointer;
}
.ui-pager .pager-action {
	display: flex;
	align-items: center;
	line-height: 1.6em;
	padding:0 .8em;
	color:#1378f5;
}
.ui-pager .pager-action:hover {
	background:#C8ECFF;
}
.ui-pager .pager-action:active {
	background:#E6F6FF;
}
.ui-pager .pager-prev, .ui-pager .pager-next {
	font-size: 1.24em;
}
.ui-pager .pager-prev {
	border-top-left-radius: .3em;
	border-bottom-left-radius: .3em;
}
.ui-pager .pager-next {
	border-top-right-radius: .3em;
	border-bottom-right-radius: .3em;
}
.ui-pager .pager-page {
	padding:0;
	width:6em;
}
.ui-pager .pager-page .lui-droplist {
	width:100%;
}
.ui-pager .pager-page .label-box {
	border-radius: 0;
	border:0;
	background:unset;
}
.ui-pager .pager-page .label-box .label {
	color:#1378f5;
	border:0;
	padding:0 .8em;
}
.ui-pager .pager-page .label-box .arrow {
	border-top-color: #1378f5;
}
.ui-pager .pager-page .bubble {
	left:unset;
	right:0;
	width:7em;
}
.ui-pager .pager-page .bubble .item {
	padding:.3em .6em;
}

/* Giao diện phân trang */
.ui-paging {
	display: flex;
	align-items: center;
	padding-left: .6em;
}
.ui-paging .nav {
	display: flex;
	align-items: center;
	justify-content: center;
	width:2.4em;
	height:2.4em;
	border-radius: 50%;
	margin-right: .6em;
	margin-bottom: .7em;
	white-space: normal;
}
.ui-paging .page-box {
	/*width:14.5em;
	max-width: 36em;*/
	height:3.2em;
	margin-right: .6em;
	overflow: auto;
}
.ui-paging .page-box::-webkit-scrollbar {
	width: .4em;
	height: .4em;
}
.ui-paging .page-box::-webkit-scrollbar-track {
	/*background: white;*/
}
.ui-paging .page-box::-webkit-scrollbar-thumb {
	background: #E6F6FF;
	border-radius: .4em;
	cursor: default;
}
.ui-paging .page-box::-webkit-scrollbar-thumb:hover {
	background: #C8ECFF;
}
.ui-paging .page-box::-webkit-scrollbar-thumb:active {
	background: #1378f5;
}
.ui-paging .pages {
	display: flex;
	align-items: center;
}
.ui-paging .pages .page {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 2.4em;
	height:2.4em;
	border-radius: 50%;
	margin-right: .6em;
}
.ui-paging .pages .page[focus] {
	color: white;
	border-color: #1378f5;
	background: #1378f5;
}
.ui-paging .nav, .ui-paging .pages .page {
	background: #E6F6FF;
}
.ui-paging .nav:hover, .ui-paging .pages .page:hover {
	background: #C8ECFF;
}
.ui-paging .nav:active, .ui-paging .pages .page:active {
	background: #E6F6FF;
}

/* Giao diện chọn ngày */
.ui-datechoosen {
	max-width:20em;
}
.ui-datechoosen .activities {
	display: flex;
	/*justify-content: space-between;*/
	align-items: center;
	margin-bottom: .6em;
}
.ui-datechoosen .period-box {
	position: relative;
	margin-right: .6em;
}
.ui-datechoosen .period-box .period-selection {
	position: absolute;
	top: 100%;
	left: 0;
	display: none;
	align-items: center;
	flex-wrap:nowrap;
	border-radius: .3em;
	overflow: hidden;
	white-space: nowrap;
	background:white;
	-webkit-box-shadow: 0px 0px 4px rgba(0,0,0,.4);
	-moz-box-shadow:0px 0px 4px rgba(0,0,0,.4);
    box-shadow: 0px 0px 4px rgba(0,0,0,.4);
	z-index:10;
}
.ui-datechoosen .period-box .period-selection .item {
	padding: .6em .8em;
	cursor: default;
}
.ui-datechoosen .period-box .period {
	color: inherit;
	background:unset;
	border:solid 1px #e0e0e0;
}
.ui-datechoosen .date-box {
	flex:1;
	display: flex;
	align-items: center;
	border-radius: .3em;
	border:solid 1px #e0e0e0;
	overflow: hidden;
}
.ui-datechoosen .date-box .date {
	flex:1;
	height:2em;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: default;
}
.ui-datechoosen .date-box .date[focus] {
	color:white;
	background:#1378f5 !important;
}
.ui-datechoosen .date-box .calendar {
	display: flex;
	align-items: center;
	justify-content: center;
	width:2em;
	height:2em;
}
.ui-datechoosen .date-box .calendar .icon {
	width:1.4em;
	height:1.4em;
}
.ui-datechoosen .ui-inline-list .item {
	width:14.28%;
	border-radius: .3em;
	padding: .6em .8em;
	margin-right: 0;
	justify-content: center;
	box-sizing: border-box;
	cursor: default;
}
.ui-datechoosen .periods {
	display:none;
}
.ui-datechoosen .periods .sepa {
	margin:.6em 1em;
	height:1px;
	border-top:solid 1px #f1f1f1;
}
.ui-datechoosen .periods .year-box {
	max-width:100%;
	overflow: auto;
}
.ui-datechoosen .periods .year-box .year-list {
	flex-wrap: nowrap;
	margin-bottom: .6em;
}
.ui-datechoosen .periods .year-box .year-list .item {
	width: auto;
}
.ui-datechoosen .periods .year-box::-webkit-scrollbar {
	width: .45em;
	height: .45em;
}
.ui-datechoosen .periods .year-box::-webkit-scrollbar-track {
	background: #f5f5f5;
}
.ui-datechoosen .periods .year-box::-webkit-scrollbar-thumb {
	background: #1378f5;
	border-radius: 1em;
	cursor: default;
}
.ui-datechoosen .period-selection .item:hover, .ui-datechoosen .date-box .calendar:hover, .ui-datechoosen .period-box .period:hover, .ui-datechoosen .date-box .date:hover, .ui-datechoosen .ui-inline-list .item:hover {
	background:#C8ECFF;
}
.ui-datechoosen .ui-inline-list .item[focus] {
	color:white;
	background:#1378f5;
}

/* Giao diện nổi chọn ngày */
.ui-dropdate {
	position: relative;
}
.ui-dropdate .textbox {
    border-radius: 0.3em;
    border: solid 1px #e0e0e0;
    border-bottom: solid 3px #1488f4;
    padding: 0.4em 0.6em;
    cursor: default;
}
.ui-dropdate .dropbox {
    display: none;
    top: 100%;
    width: 20em;
    padding: .6em;
}
.ui-dropdate .dropbox .actions {
	border-top: solid 1px #f1f1f1;
	padding-top: .6em;
	text-align: right;
}

/* Giao diện chọn danh sách liên tiếp */
.ui-linearlist {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}
.ui-linearlist .item {
	padding:.4em .8em;
	margin-right: 10px;
	margin-bottom: 10px;
	border-radius: .3em;
	cursor: default;
}
.ui-linearlist .item:last-child {
	margin-right: 0;
}
.ui-linearlist .item[selected] {
	color:white;
	background:blue;
}
/* Giao diện cho hộp thoại chọn ngày */
.ui-linearlist[dress='date-picker'] .item {
	padding:.4em .6em;
}

/* Giao diện danh sách thông tin hiển thị tên nội dung bên trái và thông tin về nội dung bên phải */
.ui-infolist {}
.ui-infolist .item {
	border-bottom: solid 1px #e0e0e0;
	padding:.6em 1em;
}
.ui-infolist .item .info {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
}
.ui-infolist .item .desc {
	color:#999999;
	margin-top: .3em;
}


/* Giao diện danh sách menu */
.ui-listmenu {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	padding:1em;
}
.ui-listmenu .item {
	padding:.6em 1em;
	border-radius: .3em;
	margin-right: 1em;
	display: flex;
	align-items: center;
	justify-content: center;
	color:silver;
	background:#ccc;
}
.ui-listmenu .item[focus] {
	color:inherit;
	background:#f5f5f5;
}


/* Giao diện danh sách chọm theme */
.ui-themelist {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	padding:1em;
}
.ui-themelist .item {
	width:9em;
	padding:1em 0;
	border-radius: .3em;
	text-align: center;
	cursor: default;
}
.ui-themelist .item .theme {
	display: inline-block;
	width: 2.2em;
	height: 2.2em;
	margin-bottom: 1em;
	border-radius: .3em;
}
.ui-themelist .item:hover {
	background:#f5f5f5;
}
.ui-themelist .item[focus] {
	background:#e0e0e0;
}
.ui-themelist .item[theme="cyan"] .theme {
	background: #1cbbb4;
}
.ui-themelist .item[theme="green-leaf"] .theme {
	background: #00a651;
}
.ui-themelist .item[theme="blue-ocean"] .theme {
	background: #005aa6;
}
.ui-themelist .item[theme="pink"] .theme {
	background: #ec008c;
}
.ui-themelist .item[theme="orange"] .theme {
	background: #EC8100;
}
.ui-themelist .item[theme="queen-red"] .theme {
	background: #a60000;
}
.ui-themelist .item[theme="royal-purple"] .theme {
	background: #5600a6;
}
.ui-themelist .item[theme="sunset-purple"] .theme {
	background: #a400a6;
}


/* Giao diện danh sách menu */
.ui-switchlist {
	width:14em;
	display: flex;
	align-items: stretch;
	border-radius: .3em;
	border:solid 1px #1378f5;
	overflow: hidden;
}
.ui-switchlist .item {
	flex: 1;
	padding: .6em 1em;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: default;
}
.ui-switchlist .item {
	color:#1378f5;
	border-right: solid 1px #1378f5;
}
.ui-switchlist .item:last-child {
	border-right: 0;
}
.ui-switchlist .item[focus] {
	color:white;
	background:#1378f5;
}

/* Chú thích */
.tooltip {
	display: none;
	position: absolute;
	border-radius: .3em;
	padding:.8em 1em;
	margin: 0 1em;
	width:32em;
	background: white;
	-webkit-box-shadow: 0px 0px 4px rgba(0,0,0,.65);
    box-shadow: 0px 0px 4px rgba(0,0,0,.65);
	z-index: 1000;
}
.tooltip[tip-style="blue"] {
	color:white;
	background: #1378f5;
}


/* Giao diện tab */
.tab {}
.tab-head {
	max-width:100%;
	display: flex;
	align-items: stretch;
	white-space: nowrap;
	background: #ebebeb;
	overflow: auto;
}
.tab-body .tab-content {
	display: none;
}
.taber {
	display: flex;
	align-items: center;
	cursor: pointer;
	border-radius: .4em .4em 0 0;
	background:#e0e0e0;
}
/*.tab-head .taber:first-child {
	border-top-left-radius: 0;
}*/
.tab-head .taber .text {
	color:#404040;
}
.tab-head .taber[focus] .text {
	color:inherit;
}
.taber .text {
	padding:.6em .8em;
}
.taber .actions {
	display: flex;
	align-items: center;
	justify-content: center;
	padding:.4em;
}
.taber .actions .close {
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	color:#707070;
	width:1.2em;
	height:1.2em;
	font-size: 1.4em;
}
.taber .actions .close:hover {
	color:white;
	background:rgba(255,38,41,1.00);
}
.taber:hover {
	background:#f1f1f1;
}
.taber[focus] {
	background:white;
}


/* Giao diện thuộc tính biểu mẫu */
.ss-formprop {
	padding:.6em;
	border-radius: .3em;
	border:solid 1px #e0e0e0;
	box-sizing: border-box;
}
.ss-formprop .head {
	/*margin-bottom: .4em;*/
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.ss-formprop .head, .ss-formprop .desc {
	margin-bottom: .6em;
}
.ss-formprop .head .text {
	/*padding:.3em 0;*/
}
.ss-formprop .desc {
	font-size: .9em;
	color:#828282;
}
.ss-formprop .prop-label {
	margin-top:.4em;
	font-weight: bold;
}
.ss-formprop .lui-droplist {
	width:auto;
}
.ss-formprop[dress="benefit"] {
	border-color:#1f9635;
}
.ss-formprop[dress="benefit"] .head .text {
	color:#1f9635;
}
.ss-formprop[dress="benefit"] .prop-label {
	color:#1f9635;
}
.ss-formprop[dress="risk"] {
	border-color:#d41313;
}
.ss-formprop[dress="risk"] .head .text {
	color:#d41313;
}
.ss-formprop[dress="risk"] .prop-label {
	color:#d41313;
}

/* Hợp tùy chỉnh giá trị */
.ss-adjustbox {
	width: 14em;
	display: inline-flex;
	align-items: stretch;
	border-radius: .3em;
	border:solid 1px #1378f5;
	overflow: hidden;
}
.ss-adjustbox .lui-textbox {
	flex:1;
	border:0;
}
.ss-adjustbox .action {
	padding:.6em 1.2em;
	display: flex;
	align-items: center;
	justify-content: center;
	border-left:solid 1px #1378f5;
	color:#1378f5;
	cursor: default;
}
.ss-adjustbox .action:hover {
	background:#E6F6FF;
}
.ss-adjustbox .action:active {
	background:#C8ECFF;
}
.ss-adjustbox .unit {
	color:black;
	width:2em;
	border-left:solid 0px #e0e0e0;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Nhập tiền tệ */
.ss-money {
	display: flex;
	align-items: center;
	height:2.2em;
}
.ss-money .unit {
	border-radius: .3em;
	border:solid 1px #e0e0e0;
	border-bottom: solid 3px #1488f4;
	display: flex;
	align-items: stretch;
	overflow: hidden;
	margin-left: .6em;
}
.ss-money .zero {
	width:3em;
	padding: .4em .6em;
}
.ss-money .up, .ss-money .down {
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: default;
	padding:0 .6em;
	color:#1378f5;
}
.ss-money .up:hover, .ss-money .down:hover {
	background: #E6F6FF;
}
.ss-money .up:active, .ss-money .down:active {
	background: #C8ECFF;
}


/* Nổi bậc đối tượng có tính tương tác */
.ss-hit {
	padding:.3em 1em;
	border-radius: .3em;
	color:#1378f5;
	background:#E6F6FF;
	cursor: pointer;
	margin-left: .6em;
}
.ss-hit-img {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-left: .6em;
}
.ss-hit-img .ss-img {
	width:5em;
	height:3em;
	padding:.3em;
	border-radius: .3em;
	box-sizing: content-box;
}
.ss-hit-img .img-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding:.3em .4em;
	border-radius: .3em;
	color:#1378f5;
	background:#E6F6FF;
	cursor: pointer;
	margin-left: .6em;
}
.ss-hit-img input {
	border: 0;
	background: none;
	width:5em;
	color:#1378f5;
	background:#E6F6FF;
}
.ss-hit-img .img-btn input[type="file"] {
	display: none;
}
.ss-hit-img img {
	width:1.4em;
	cursor: pointer;
}
.ss-hit:hover, .ss-hit-img .img-btn:hover, .ss-hit-img .ss-img:hover {
	background:#C8ECFF;
}
.ss-hit:active, .ss-hit-img .img-btn:active, .ss-hit-img .ss-img:hover {
	background: #E6F6FF;
}


/* Giao diện chọn khoảng ngày */
.ui-dateperiod {}
.ui-dateperiod .head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	/*padding:0 1em;*/
}
.ui-dateperiod .head .text {
	font-weight: bold;
}
.ui-dateperiod .head .options {
	display: flex;
	align-items: center;
	margin: 1em 0 1em 0;
	border-radius: .3em;
	border: solid 1px #1378f5;
	overflow: hidden;
}
.ui-dateperiod .head .options .option {
	padding:.4em .6em;
	cursor: default;
}
.ui-dateperiod .head .options .option:first-child {
	border-top-left-radius: .3em;
	border-bottom-left-radius: .3em;
}
.ui-dateperiod .head .options .option:last-child {
	border-top-right-radius: .3em;
	border-bottom-right-radius: .3em;
}
.ui-dateperiod .head .options .option[focus] {
	color:inherit;
	background:white;
}
.ui-dateperiod .periods {
	display: flex;
	align-items: center;
	border-radius: .3em;
	border:solid 1px #1378f5;
	box-sizing: border-box;
	overflow: hidden;
}
.ui-dateperiod .periods .period {
	padding:.4em;
	flex:1;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: default;
	color: #1378f5;
	background:#E6F6FF;
}
.ui-dateperiod .periods .period:hover {
	background: #C8ECFF;
}
.ui-dateperiod .periods .period[focus] {
	color:white;
	background:#1378f5;
}
.ui-dateperiod .zone .zone-period {
	display: none;
}
.ui-dateperiod .zone .zone-period .title {
	margin: .6em 0;
}
.ui-dateperiod .zone .zone-period .ui-linearlist .item {
	padding:.3em 0;
	width:2em;
	border-radius: .3em;
	text-align: center;
	margin: 0 .4em .4em 0;
}
.ui-dateperiod .zone .zone-period .year .item {
	padding:.3em .6em;
	width:unset;
	white-space: nowrap;
}
.ui-dateperiod .zone .zone-period .years .lui-droplist {
	width:5em;
	margin-bottom: .4em;
	margin-right: .4em;
}
.ui-dateperiod .zone .zone-period .years .lui-droplist .bubble {
	width:10em;
}

/* Giao diện chọn khoảng ngày */
.ui-dropcalendar  {
	position: relative;
}
.ui-dropcalendar .text-box {
	border-radius: .3em;
    border: solid 1px #e0e0e0;
    border-bottom: solid 3px #1488f4;
	padding:.4em .6em;
	cursor: default;
}
.ui-dropcalendar .dropbox {
	display: none;
	top:100%;
	width:32em;
	padding:1em;
}
.ui-dropcalendar .other-year .bubble {
	top:unset;
	bottom:100%;
	max-height: 14em;
}
.ui-dropcalendar .dropbox > .actions {
	border-top: solid 1px #e0e0e0;
	margin-top: .6em;
	padding-top: .6em;
	display: flex;
	justify-content: flex-end;
}
.ui-dropcalendar .actions .text {
	padding:.5em 1em;
}

/* Giao diên chọn ngày hỗ trợ nhập liệu đơn hàng cầm đồ, nhập xong sẽ gỡ bỏ */
.ui-pawndatepicker {
	position: relative;
}
.ui-pawndatepicker .text-box {
	width: 8em;
	border-radius: .3em;
    border: solid 1px #e0e0e0;
    border-bottom: solid 3px #1488f4;
	padding:.4em .6em;
	cursor: default;
}
.ui-pawndatepicker .date-label {
	font-size:0.9em;
	color:#888;
	margin-bottom: .4em;
}
.ui-pawndatepicker .dropbox {
	display: none;
	position: absolute;
	top:100%;
	min-width:34em;
	padding:.8em;
	border-radius: .3em;
	background: white;
	-webkit-box-shadow: 0px 0px 6px rgba(0,0,0,.4);
    box-shadow: 0px 0px 6px rgba(0,0,0,.4);
	z-index: 101;
}
.ui-pawndatepicker .ui-linearlist .item {
	padding:.3em .6em;
	margin-right: 6px;
    margin-bottom: 6px;
}
.ui-pawndatepicker .ui-linearlist .item[warn] {
	background-color: red;
	color:white;
}
.ui-pawndatepicker .dropbox > .actions {
	border-top: solid 1px #e0e0e0;
	margin-top: .6em;
	padding-top: .6em;
	display: flex;
	justify-content: flex-end;
}
.ui-pawndatepicker .actions .text {
	padding:.5em 1em;
}

/* Giao diện danh sách hành động, có thể nhúng vào trong các giao diện khác cần hành động, có thể tùy chỉnh các thành phần để phù hợp với giao diện nhúng vào */
.ss-actions {
	display: flex;
	align-items: center;
}
.ss-actions .action {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 1em 0 1em 1em;
	padding:.4em 1em;
	border-radius: .3em;
	cursor: default;
}
.ss-actions .action:first-child {
	margin-left: 0em;
}
.ss-actions .action[disabled], .ss-actions .action[disabled]:hover, .ss-actions .action[disabled]:active {
	color:#ccc;
	background:#f1f1f1;
}
.ss-actions .icon-action {
	padding:0;
	width:2.2em;
	height:2.2em;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
}
.ss-actions .icon-action .arrow-up {
	border-bottom-color: #1378f5;
}
.ss-actions .icon-action .arrow-down {
	border-top-color: #1378f5;
}
.ss-actions .icon-action .icon {
	width:1.2em;
}
.ss-actions .file-action input {
	display: none;
}
.ss-actions .check-action {
	display: inline-flex;
	align-items: center;
}
.ss-actions .check-action .check {
	display: block;
	width:.8em;
	height:.8em;
	border-radius: 50%;
	border:solid 3px white;
	background: white;
	margin-right: .6em;
}
.ss-actions .check-action[checked] {
	color:white;
	background: #1378f5;
}
.ss-actions .check-action[checked] .check {
	background: #1378f5;
}
/* Tùy chỉnh khi nằm bên trái, mặc dịnh là nằm bên phải */
.ss-actions[anchor='left'] .action {}


/**
 * Giao diện lịch điều khiển
 * Phiên bản 2.0
 */
.ui-control-calender {
	width:100%;
}
.ui-control-calender[bold] .head .monthyear, .ui-control-calender[bold] .grid .dayweek {
	font-weight: bold;
}
.ui-control-calender .head .monthyear {
	display: block;
	width:100%;
	text-align: center;
	padding:.6em 1em;
	box-sizing: border-box;
	border-radius: .3em;
	background:#E7FFFD;
}
.ui-control-calender .grid {
	display: flex;
	flex-wrap: wrap;
}
.ui-control-calender .grid .dayweek {
	border-radius: .3em;
	background:#E7FFFD;
}
.ui-control-calender .grid .dayweek, .ui-control-calender .grid .date {
	width:13.85%;
	margin-top: .5%;
	margin-right: .5%;
	padding:.5em;
	box-sizing: border-box;
}
.ui-control-calender .date {
	border-radius: .3em;
}
.ui-control-calender .date[dress='success'] {
	color:white;
	background:#029E19;
}
.ui-control-calender .date[dress='warn'] {
	color:white;
	background:#FFA615;
}
.ui-control-calender .date[dress='risk'] {
	color:white;
	background:#F42424;
}
.ui-control-calender .today {
	position: relative;
}
.ui-control-calender .today::after {
	content: "";
	position: absolute;
	top:8%;
	right: .5em;
	width:.4em;
	height:80%;
	border-radius: .3em;
	background: white;
}
.ui-control-calender .grid .dayweek:nth-child(7n+0), .ui-control-calender .grid .date:nth-child(7n+0) {
	margin-right: 0;
}
.ui-control-calender[selectable] .grid .date {
	display: flex;
	align-items: center;
}
.ui-control-calender[selectable] .grid .date .selection {
	display: block;
	width:1.4em;
	height:1.4em;
	margin-right: .5em;
	border-radius: 50%;
	border:solid 1px #b7b7b7;
	background: white;
	position: relative;
}
.ui-control-calender[selectable] .grid .date .selection:hover {
	border-color:#1488F4;
}
.ui-control-calender[selectable] .grid .date .selection[checked], .ui-control-calender[selectable][multi-select] .grid .date .selection[checked] {
	border-color: #1488F4;
}
.ui-control-calender[selectable] .grid .date .selection[checked]::after {
	content:"";
	width:1em;
	height:1em;
	position: absolute;
	top:.2em;
	left:.2em;
	border-radius: 50%;
	background: #1488F4;
}
.ui-control-calender[selectable][multi-select] .grid .date .selection {
	display: block;
	width:1.4em;
	height:1.4em;
	margin-right: .5em;
	border-radius: .3em;
	border:solid 1px #b7b7b7;
	position: relative;
}
.ui-control-calender[selectable][multi-select] .grid .date .selection[checked]::after {
	content:"";
	width:1em;
	height:1em;
	position: absolute;
	top:.2em;
	left:.2em;
	border-radius: .3em;
	background: #1488F4;
}

/* Giao diện nhập liệu công tắc hiển thị trạng thái kiểm có hay không */
.ui-switchcheck {
	display: inline-flex;
	align-items: center;
	border-radius: .3em;
    border: solid 1px #b7b7b7;
    border-bottom: solid 3px #1488f4;
	padding: .4em .6em;
	box-sizing: border-box;
}
.ui-switchcheck .check {
	display: inline-block;
	width:1.2em;
	height:1.2em;
	border-radius: .3em;
    border: solid 1px #b7b7b7;
	background: white;
	position: relative;
}
.ui-switchcheck .text {
	display: inline-block;
	margin: auto 0 auto .5em;
}
.ui-switchcheck[checked] .check {
    border-color: #1488f4;
	background: #1488f4;
}

/* Giao diện đơn vị tính toán */
.ss-unit {
	width: 8em;
	padding:.6em .8em;
	border-radius: .3em;
	box-sizing: border-box;
	background: #cbf9f7;
	cursor: default;
}
.ss-unit:hover {
	background: #E7FFFD;
}
.ss-unit:active {
	width: 8em;
	padding:.6em .8em;
	border-radius: .3em;
	box-sizing: border-box;
	background: #cbf9f7;
	cursor: default;
}
.ss-unit .info {
	font-size: .9em;
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: .3em;
}
.ss-unit .info .label {
	margin-left: 1em;
}
/* Trên giao diện chi phí */
.ss-unit[dress="cost"] {
	background:#d41313;
}
.ss-unit[dress="cost"] .info {
	color:#ffa5a5;
}
.ss-unit[dress="cost"] .text {
	color:white;
}
/* Trên giao diện doanh thu */
.ss-unit[dress="revenue"] {
	background:#1f9635;
}
.ss-unit[dress="revenue"] .info {
	color:#a5ffb6;
}
.ss-unit[dress="revenue"] .text {
	color:white;
}
.ss-unit[disabled] {
	background:unset;
	cursor: unset;
}
/* Cố định */
.ss-unit[disabled]:hover {
	background:unset;
}
.ss-unit[dress="cost"]:hover {
	background:#d41313;
}
.ss-unit[dress="revenue"]:hover {
	background:#1f9635;
}
.ss-unit[disabled]:hover {
	background:unset;
	cursor: unset;
}
.ss-unit[disabled]:active {
	background:unset;
}

/* Giao diện thanh đầu */
.ss-head .title {
	padding: .6em 0;
}

/* Giao diện item trình bài một danh sách các unit giá trị và một unit tổng bên phải */
.ss-fund .units {
	flex-wrap: wrap;
}
.ss-fund .units .ss-unit {
	margin-right: 1em;
	margin-bottom: 1em;
}

/* Giao diện hiển thị tổng giá trị mặt hàng trong một công đoạn */
.ss-billitemsum {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-weight: bold;
	padding:1em 0;
}
.ss-billitemsum .title {
	flex:1;
	display: inline-flex;
	justify-content: flex-end;
	margin-right: 1em;
}
.ss-billitemsum .text {
	width:8.2em;
}

/* Giao diện thông tin khách hàng trong hóa đơn cầm đồ */


/* Giao diện thông tin món đồ trong hóa đơn cầm đồ */
.ss-fieldpawnitem .field-content {
	display: none;
	border-radius: .3em;
	border:solid 1px #e0e0e0;
}
.ss-fieldpawnitem .field-content .ui-billitem {
	padding:0 1em 1em 1em;
}
.ss-fieldpawnitem .field-content .ui-billitem:last-child {
	border-bottom:solid 1px #ebebeb !important;
}
.ss-fieldpawnitem .field-content .estimate .entry-head {
	border-bottom: 0;
	font-weight: normal;
}
.ss-fieldpawnitem .field-content .estimate .entry-head .title {
	font-size: 1em;
	font-weight: bold;
}
.ss-fieldpawnitem .estimate .item {
	padding:0 1em;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-top:solid 1px #ebebeb;
}
.ss-fieldpawnitem .estimate .item .text {
	padding:.6em 0;
}
.ss-fieldpawnitem .estimate .item .price {
	text-align: right;
}

/* Giao diện cấu trúc: đầu, thân, chân */
.ui-entry {}
.ui-entry .entry-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding:0 1em;
}
.ui-entry .entry-head .title {
	font-size: 1.06em;
	font-weight: bold;
	padding: .8em 1em .8em 0;
}
.ui-entry .entry-body {}
.ui-entry .entry-foot {}