/**
 * Giao diện mềm-Soft UI được thiết kế để thích ứng với mọi loại kích thước màn hình. Ngoài ra bộ giao diện còn tích hợp các giao diện chỉnh sửa dữ liệu thân thiện hơn với người dùng
 * Tạo ngày 24-4-2021
 * Phiên bản 1.2
 */


/* Nút nhấn */
.sui-button {
	min-width: 4.6em;
	display:inline-block;
	position:relative;
	background: white;
}
.sui-button > .body {
	width: 100%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding:.4em .8em;
	border-radius: .3em;
	position: relative;
	box-sizing: border-box;
	border:solid 1px #b7b7b7;
	cursor: pointer;
}
.sui-button > .body:hover {
	color: #1378f5;
	border-color: #1378f5;
	/*border-color: #C8ECFF; 
	background: #C8ECFF;*/
}
.sui-button > .body:active {
	color:white;
	border-color: #1378f5;
	background: #1378f5;
}
.sui-button[dress="blue"] > .body {
	color:#1488F4;
	border-color: #7DC0FF;
}
.sui-button[dress="blue"] > .body:hover {
	border-color: #1488F4;
	/*background: #C8ECFF;*/
}
.sui-button[dress="blue"] > .body:active {
	color:white;
	background-color: #1488F4;
}
.sui-button[disabled] {
	opacity: .35;
}
.sui-button[disabled] > .body:hover, .sui-button[disabled] > .body:active {
	color:inherit;
	border-color: #b7b7b7; 
	background: white;
}
.sui-button > .body .icon {
	width:20px;
	margin-right: .6em;
}
.sui-button > .body .icon[nospace] {
	margin-right: 0;
}
.sui-button > .body .text {
	
}
.sui-button > .body .appender {
	display: inline-block;
	width: 0; 
	height: 0; 
	margin-left: .6em;
	border-left: .36em solid transparent;
	border-right: .36em solid transparent;
	border-top: .34em solid;
}
.sui-button > .sui-button-menu {
	display: none;
	position:absolute;
	top:100%;
	left:0;
}
.sui-button[droppos="bottom-right"] > .sui-button-menu {
	left:unset;
	right:0;
}
.sui-button[droppos="top"] > .sui-button-menu {
	top:unset;
	bottom:100%;
}
.sui-button[droppos="top-right"] > .sui-button-menu {
	top:unset;
	bottom:100%;
	left:unset;
	right:0;
}

/* Giao diện nhiều nút nhấn */
.sui-buttons {
	display: flex;
	align-items: center;
}
.sui-buttons .sui-button {
	margin-right: .6em;
}
/*.sui-buttons .sui-button:last-child {
	margin-right: 0;
}*/
 
/* Cây menu bên trong nút nhấn. Thành phần trong bộ giao diện mềm Soft UI */
.sui-button-menu {
	width:16em;
	max-height:26em;
	border-radius: 0.3em;
	background: white;
	-webkit-box-shadow: 0px 0px 6px rgba(0,0,0,.4);
    box-shadow: 0px 0px 6px rgba(0,0,0,.4);
	overflow:auto;
	z-index: 10;
}
.sui-button-menu .menu {
	position: relative;
}
.sui-button-menu .menu .body {
	height: 2.2em;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 .6em;
	cursor:default;
}
.sui-button-menu .menu a {
	cursor:pointer !important;
}
.sui-button-menu .menu .body:hover {
	background: #C8ECFF;
}
.sui-button-menu .menu .body:active {
	background: #E6F6FF;
}
.sui-button-menu .menu .body .title {
	display: flex;
	align-items: center;
}
.sui-button-menu .menu .body .title .icon {
	width:1.2em;
	margin-right: .6em;
}
.sui-button-menu .menu .body .title .text {
	
}
.sui-button-menu .menu .body .appender {
	display: inline-block;
	width: 0; 
	height: 0;
	margin-left: .6em;
	border-left: .36em solid transparent;
	border-right: .36em solid transparent;
	border-top: .34em solid;
}
.sui-button-menu .menu .sui-button-menu {
	max-height:unset;
	display: none;
	box-sizing: border-box;
	-webkit-box-shadow: 0px 0px 0 rgba(0,0,0,.4);
    box-shadow: 0px 0px 0 rgba(0,0,0,.4);
	border-radius: 0;
}
.sui-button-menu .menu[open] > .sui-button-menu {
	width: 100%;
	display: block;
}
.sui-button-menu .menu[open] > .body .appender {
	border-top: unset;
	border-bottom: .34em solid;
}

/* Giao diện tìm kiếm. Thành phần trong giao diện mềm Soft UI */
.sui-search {
	display: flex;
	align-items: stretch;
	width:16em;
	border-radius: .3em;
	border:solid 1px #b7b7b7;
	background: white;
	box-sizing: border-box;
	overflow: hidden;
}
.sui-search > .lui-textbox {
	flex:1;
	border: 0;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}
.sui-search > .panel {
	display: flex;
	align-items: stretch;
}
.sui-search > .panel .action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width:2.2em;
	background: white;
	cursor: default;
}
.sui-search > .panel {
	border-right: solid 1px #b7b7b7;
}
.sui-search > .panel .action:hover {
	background: #E6F6FF;
}
.sui-search > .panel .action:active {
	background: #C8ECFF;
}
.sui-search > .panel .action .icon {
	width:16px;
}
.sui-search > .panel .label .text {
	margin-left: .3em;
}
.sui-search > .panel .pin {
	display: none;
}
.sui-search > .panel .pin .icon {
	width:18px;
	height:18px;
	background: url("../image/icon-pin.png");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 18px 18px;
}
.sui-search > .panel .pin[focus] {
	background: #1378f5;
}
.sui-search > .panel .pin[focus] .icon {
	background: url("../image/icon-pin-white.png");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 18px 18px;
}
.sui-search > .panel .transform .icon {
	width:18px;
	height:18px;
	background: url("../image/icon-search-upsize.png");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 18px 18px;
}

/* Giao diện hoạt động, có thể tích hợp nhiều nút nhất và hợp tìm kiếm. Thành phần trong giao diện mềm Soft UI */
.sui-activision {
	background: white;
}
.sui-activision .activision {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	margin: 0 0 .6em .6em;
}
.sui-activision .activision[nospace] {
	margin: 0;
}
.sui-activision .activision .sui-buttons {
	flex-wrap: wrap;
}
.sui-activision .activision .sui-buttons .sui-button {
	margin: .6em .6em 0 0;
}
.sui-activision .activision .search-region .sui-search {
	margin: .6em .6em 0 0;
}
.sui-activision .search-condition-region {
	display: none;
	padding:0 0 0 1%;
	flex-wrap: wrap;
	align-items: flex-start;
}
/* Tùy chỉnh giao diện trường thông tin*/
.sui-activision .search-condition-region .ui-content-field {
	flex-basis:15.666%; /* 6 cột */
	margin: 0 1% 1% 0;
}
.sui-activision .search-condition-region .ui-content-field .head .text {
	padding:.6em 0;
}
.sui-activision .search-condition-region .ui-content-field .desc {
	margin-bottom: .6em;
}
.sui-activision .search-condition-region .ui-content-field .content {
	margin-top: 0;
}
.sui-activision .search-condition-region .ui-content-field .value-ui {
	width: 100%;
}
.sui-activision[open-search] .sui-search > .panel .pin {
	display: flex;
}
.sui-activision[open-search] .activision .sui-search > .panel .transform .icon {
	background: url("../image/icon-search-downsize.png");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 18px 18px;
}
.sui-activision[open-search] .search-condition-region {
	display: flex;
}


/* Giao diện bước cho phép tạo mẫu theo theo từng bước. Thành phần trong bộ giao diện mềm Soft UI */
.sui-steps {
	
}
.sui-steps > .step {
	display: none;
}
.sui-steps > .step[display] {
	display: block;
}

/* Khung cửa sổ, giao diện gồm thanh tiêu đề và thân, cho phép tùy biến giao diện bên trong thân để tạo ra các giao diện cụ thể riêng biệt */
.sui-window {
	border-radius: .3em;
	background: white;
}
.sui-window > .head {
	border-radius: .3em .3em 0 0;
	/*background: linear-gradient(#f8f8f8, white);*/
	border-bottom: solid 1px #ebebeb;
	background: white;
}
/* Style khi dính cạnh trên màn hình */
.sui-window .is_stuck {
	z-index: 101;
	border-bottom: solid 1px #ebebeb;
}
.sui-window > .head .header {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.sui-window > .head .header .head-title {
	display: flex;
	align-items: center;
}
.sui-window > .head .header .head-title .back {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding:.8em;
	border-radius: .3em 0 0 0;
}
.sui-window > .head .header .head-title .back img {
	width:1.4em;
}
.sui-window > .head .header .head-title .back:hover {
	background: #C8ECFF;
}
.sui-window > .head .header .head-title .icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0 0 0 .8em;
}
.sui-window > .head .header .head-title .head-title .icon img {
	width:1.6em;
}
.sui-window > .head .header .head-title .title {
	flex: 1;
	display: block;
	padding: .8em;
	font-size: 1.1em;
	font-weight: bold;
}
.sui-window > .head .header .head-help {
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	border:solid 1px #777;
	width:1.6em;
	height:1.6em;
	cursor: default;
}
.sui-window > .head .header .head-help:hover {
	color:white;
	background: #1378f5;
	border-color:#1378f5;
}
.sui-window > .body {
	border-radius: 0 0 .3em .3em;
}