/* 纵向布局容器 */
.flexbox-v {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: stretch;
	
	box-sizing: border-box;
	margin: 0px;
	padding: 0px;
}

/* 水平布局容器 */
.flexbox-h {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: stretch;
	
	box-sizing: border-box;
	margin: 0px;
	padding: 0px;
}

/* 在手机上面，把水平布局转成纵向布局 */
@media (max-width: 599px) {
	.flexbox-h.mobile {
		display: block!important;
	}
	
	/* 如果要指定元素在纵向布局时的高度，请用min-height，避免影响水平布局的效果。*/
	.flexbox-h.mobile > div {
		width: 100%!important;
		margin-right: 0px;
		margin-bottom: 5px;
	}
}

/* 纵向布局，默认子元素既不放大也不缩小 */
.flexbox-v > * {
	flex: 0 0 auto;
}

/* 设置行间距，默认是10px */
.flexbox-v > * {
	margin-bottom: 10px;
}

/* 取消Quasar插入的两个隐藏DIV的边距 */
.flexbox-v > #q-loading-bar,
.flexbox-v > #q-notify {
	margin-bottom: 0px;
}

.flexbox-v.gutter0 > * {
	margin-bottom: 0px;
}

.flexbox-v.gutter3 > * {
	margin-bottom: 3px;
}

.flexbox-v.gutter5 > * {
	margin-bottom: 5px;
}

.flexbox-v.gutter8 > * {
	margin-bottom: 8px;
}

.flexbox-v.gutter12 > * {
	margin-bottom: 12px;
}

.flexbox-v.gutter16 > * {
	margin-bottom: 16px;
}

/* 设置列间距，默认是8px */
.flexbox-h > * {
	margin-right: 8px;
}

.flexbox-h.gutter0 > * {
	margin-right: 0px;
}

.flexbox-h.gutter3 > * {
	margin-right: 3px;
}

.flexbox-h.gutter5 > * {
	margin-right: 5px;
}

.flexbox-h.gutter8 > * {
	margin-right: 8px;
}

.flexbox-h.gutter12 > * {
	margin-right: 12px;
}

.flexbox-h.gutter16 > * {
	margin-right: 16px;
}

/* 表单头部（仅用于Quasar对话框） */
.form-header {
	display: flex;
	align-items: center;
	height: 29px;
	font-size: 12px;
	font-weight: 700;
	padding: 0px 0px 0px 12px;
	color: white;
	background-color: rgb(20,180,240);
}

/* 表单工具栏 */
.form-toolbox {
	width: 100%;
	height: 36px;
	margin: 0px;
	padding: 0px 5px 0px 0px;
	box-sizing: border-box;
	text-align: right;
}

/* 设置Quasar按钮的边距 */
.form-toolbox > .q-btn {
	margin-top: 3px;
	margin-right: 8px;
}

/* 设置EasyUI按钮的边距*/
.form-toolbox > .easyui-linkbutton {
	margin-top: 4px;
	margin-right: 4px;
}
	
/* 控件标签  */
.form-label {
	display: inline-block;
	box-sizing: border-box;
	overflow: hidden;
	word-wrap: break-word;
	text-align: right;
	vertical-align: middle;
	font-size: 13px;
	
	width: 120px;
	height: 28px;
	min-height: 28px;
	line-height: 28px;
	margin-right: 12px;
	flex: 0 0 auto!important;
}

/* 文本输入框/选择框 */
.input-text, .input-select {
	box-sizing: border-box;
	border: 1px solid #cbcbcb; 
	border-radius: 3px;
	font-size: 13px;
	padding: 2px 6px;
	
	height: 28px;
	min-height: 28px;
}

/* 多行文本框  */
.input-textarea {
	box-sizing: border-box;
	border: 1px solid #cbcbcb; 
	border-radius: 3px;
	font-size: 13px;
	padding: 3px 6px;
	
	height: 60px;
	min-height: 28px;
	line-height: 1.5;
}

/* checkbox/radiobox组，或作为一个行容器 */
.input-groupbox {
	display: inline-block;
	box-sizing: border-box;
	vertical-align: middle;
	font-size: 13px;
	margin: 0px;
	padding: 0px;
	
	height: 28px;
	min-height: 28px;
	line-height: 28px;
}

.input-text:focus, .input-select:focus, .input-textarea:focus {
	border: 1px solid #6b9cde;
	box-shadow: 0 0 3px 0 #95B8E7;
}

/* EasyUI的文本框/选择框，设置高度  */
span.textbox, input.validatebox-text, select.validatebox-text {
	height: 28px;
	min-height: 28px;
}

/* EasyUI的多行文本框，设置高度  */
textarea.validatebox-text {
	height: 60px;
	min-height: 28px;
	line-height: 1.5;
}

/* 为了解决easyui-combobox下面的input框不能自动调整宽度的问题。 */
.flexbox-h input.textbox-text, .flexbox-v input.textbox-text, 
.flexbox-h textarea.textbox-text, .flexbox-v textarea.textbox-text {
	box-sizing: border-box!important;
	margin-left: 0px!important;
	margin-right: 0px!important;
	width: 100%!important;
}

/* 水平布局下，输入控件设置为flex1，占用所有剩余空间  */
.flexbox-h > .input-text,
.flexbox-h > .input-select,
.flexbox-h > .input-textarea,
.flexbox-h > .input-groupbox,
.flexbox-h > .q-field,
.flexbox-h > .textbox,
.flexbox-h > .easyui-validatebox {
	/* 解决EasyUI控件不能随窗体变化，自动缩小的问题 */
	width: 60px!important;
	flex: 1 1 auto;
}

/* 纵向布局下，form-label的宽度设置为100%  */
.flexbox-v > .form-label {
	width: 100%!important;
	text-align: left;
	padding-top: 3px;
	margin-bottom: 0px;
}

/* 纵向布局下，输入控件的宽度必须是100% */
.flexbox-v > .input-text,
.flexbox-v > .input-select,
.flexbox-v > .input-textarea,
.flexbox-v > .input-groupbox,
.flexbox-v > .q-field,
.flexbox-v > .textbox,
.flexbox-v > .easyui-validatebox {
	width: 100%!important;
	margin-bottom: 0px;
}

.padding0 {
	padding: 0px;
}

.padding3 {
	padding: 3px;
}

.padding5 {
	padding: 5px;
}

.padding8 {
	padding: 8px;
}

.padding12 {
	padding: 12px;
}

.padding16 {
	padding: 16px;
}

.padding20 {
	padding: 20px;
}

.flex0 {
	flex-grow: 0;
}

.flex-s0 {
	flex-shrink: 0;
}

.flex1 {
	flex-grow: 1;
}

.flex-s1 {
	flex-shrink: 1;
}

.flex2 {
	flex-grow: 2;
}

.flex-s2 {
	flex-shrink: 2;
}

.flex3 {
	flex-grow: 3;
}

.flex-s3 {
	flex-shrink: 3;
}

.flex4 {
	flex-grow: 4;
}

.flex-s4 {
	flex-shrink: 4;
}


/* 其他需要特殊处理的样式      */

html, body {
	font-size: 13px;
	font-family: Tahoma, Verdana, Arial, sans-serif, SimSun, SimHei;
	box-sizing: border-box;
	margin: 0px;
	padding: 0px;
}

/* 设置容器高度为100% */
.height100 {
	height: 100%;
}

/* 解决checkbox、radiobox水平对齐的问题 */
.checkbox-align {
	vertical-align: middle;
	margin: 1px 2px 3px 4px;
}

/* 设置输入控件的默认字体 */
input, textarea {
	font-family: Tahoma, Verdana, Arial, sans-serif, SimSun, SimHei;
}

/* 去掉输入控件的黑边框 */
input:focus, textarea:focus {
	outline: none;
}

/* 解决上传控件居中的问题 */
input[type="file"] {
	padding-top:2px;
}