@charset "utf-8";
/**
 * AppUI
 * verision  : 1.1.0
 * createdAt : 20170529
 * updatedAt : 20180527
 */

/*************************************************************
 *  引用样式导入
 *************************************************************/

@import url(normalize.css);


/*************************************************************
 *  重置元素常用样式
 *************************************************************/

/* 链接去除下划线 */
a {
    text-decoration: none;
}

/* 表单字段字体继承 */
button,
input,
select,
textarea {
    font-family: inherit;
}

/* 按钮去除outline */
button, input {
    outline: none;
}

/*************************************************************
 *  常用函数式样式Class
 *************************************************************/

/* 左浮动 */
.pull-left {
    float: left;
}

.pull-left-priority {
    float: left !important;
}

/* 右浮动 */
.pull-right {
    float: right;
}

.pull-right-priority {
    float: right !important;
}

/* 清除浮动 */
.pull-clear {
    float: none;
    clear: both;
}

.pull-clear-priority {
    float: none !important;
    clear: both !important;
}

/* 隐藏元素 */
.hide {
    display: none;
}

.hide-priority {
    display: none !important;
}

/* 块级显示 */
.block {
    display: block;
}

.block-priority {
    display: block !important;
}

/* 行内显示 */
.inline {
    display: inline;
}

.inline-priority {
    display: inline !important;
}

/* 行内块级显示 */
.inline-block {
    display: inline-block;
}

.inline-block-priority {
    display: inline-block !important;
}

/* 弹性显示 */
.flex {
    display: flex;
}

.flex-priority {
    display: flex !important;
}

.inline-flex {
    display: inline-flex;
}

.inline-flex-priority {
    display: inline-flex !important;
}

/* 占位隐藏 */
.hidden {
    visibility: hidden;
}

.hidden-priority {
    visibility: hidden !important;
}

/* 元素可见 */
.visible {
    visibility: visible;
}

.visible-priority {
    visibility: visible !important;
}

/* 行内左对齐 */
.text-left {
    text-align: left;
}

.text-left-priority {
    text-align: left !important;
}

/* 行内居中对齐 */
.text-center {
    text-align: center;
}

.text-center-priority {
    text-align: center !important;
}

/* 行内右对齐 */
.text-right {
    text-align: right;
}

.text-right-priority {
    text-align: right !important;
}

/* 方向0边距 */
.margin-h0 {
    margin-left: 0;
    margin-right: 0;
}

.margin-h0-priority {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.margin-v0 {
    margin-top: 0;
    margin-bottom: 0;
}

.margin-v0-priority {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* 方向0填充 */
.padding-h0 {
    padding-left: 0;
    padding-right: 0;
}

.padding-h0-priority {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.padding-v0 {
    padding-top: 0;
    padding-bottom: 0;
}

.padding-v0-priority {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* 定位 */
.relative {
    position: relative;
}

.relative-priority {
    position: relative !important;
}

.absolute {
    position: absolute;
}

.absolute {
    position: absolute !important;
}

.fixed {
    position: fixed;
}

.fixed {
    position: fixed !important;
}

/* 垂直对齐 */
.vertical-middle {
    vertical-align: middle;
}

.vertical-top {
    vertical-align: top;
}

.vertical-bottom {
    vertical-align: bottom;
}

/* 溢出隐藏 */
.overflow-hidden {
    overflow: hidden;
}

.overflow-hidden-priority {
    overflow: hidden !important;
}

/* 溢出自动 */
.overflow-auto {
    overflow: auto;
}

.overflow-hidden-priority {
    overflow: auto !important;
}

/* 字体粗细 */
.weight-bold {
    font-weight: bold;
}

.weight-bold-priority {
    font-weight: bold !important;
}

.weight-normal {
    font-weight: normal;
}

.weight-normal-priority {
    font-weight: normal !important;
}

/* 背景 */
.bg-none {
    background-color: transparent;
}

.bg-none-priority {
    background-color: transparent !important;
}

.bg-white {
    background-color: white;
}

.bg-white-priority {
    background-color: white !important;
}

/* 列表项符号 */
.list-style-none {
    list-style: none;
}

.list-style-none-priority {
    list-style: none !important;
}

/* 光标形状 */
.cursor-pointer {
    cursor: pointer;
}

.cursor-pointer-priority {
    cursor: pointer !important;
}

.cursor-default {
    cursor: default;
}

.cursor-default-priority {
    cursor: default !important;
}

/* 边框 */
.border-0 {
    border: 0;
}

.border-0-priority {
    border: 0 !important;
}

.border-none {
    border: none;
}

.border-none-priority {
    border: none !important;
}

.outline-none {
    outline: none;
}

.outline-none-priority {
    outline: none !important;
}

/* 圆角 */
.border-radius-0 {
     border-radius: 0;
 }

.border-radius-0-priority {
    border-radius: 0 !important;
}

.border-radius-unset {
    border-radius: unset;
}

.border-radius-unset-priority {
    border-radius: unset !important;
}

/* 盒子模型 */
.border-box {
    box-sizing: border-box;
}

.border-box-priority {
    box-sizing: border-box;
}

.content-box {
    box-sizing: content-box;
}

.content-box-priority {
    box-sizing: content-box;
}

/* 文本省略 */
.ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 清除浮动 */
.clearfix:after {
    content: "";
    display: table;
    clear: both;
}

/* 字间距恢复默认 */
.letter-spacing-normal {
    letter-spacing: normal !important;
}

.full-width {
    width: 100%;
}

.full-height {
    height: 100%;
}

/*************************************************************
 *  初始化样式
 *************************************************************/

html {
    font-size: 5vw;
}


/*************************************************************
 *  表单样式Class
 *************************************************************/


/* 字段 */
.field {
    margin-top: 1rem;
}

.field.flex {
    justify-content: space-between;

}


/* 按钮 */
.button {
    width: 100%;
    height: 2.5rem;
    line-height: 2.5rem;
    font-size: 0.9rem;
    text-decoration: none;
    text-align: center;
    border-radius: 0.2rem;
    padding: 0 1rem;
    overflow: hidden;
    box-sizing: border-box;
    letter-spacing: 0.3rem;
    background-color: transparent;
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: inherit;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}


.button + .button {
    margin-top: 1.2rem;
}

.button.inline-block {
    width: auto;
}

.button.inline-block + .button.inline-block {
    margin-top: 0;
}

.button.auto {
    font-size: inherit;
    letter-spacing: normal;
    width: auto;
    display: inline-block;
    height: inherit;
    line-height: 150%;
    padding: revert;
}

.flex > .button.inline-block {
    margin-right: 0.3rem;
    align-self: center;
}

.flex > .button.inline-block:last-child {
    margin-right: 0;
}

.button.black {
    background-color: #383636;
    color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.2);
}

.button.white {
    background-color: #fdfdfd;
    color: #333;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.button.gray {
    background-color: #f5f5f5;
    color: #333;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.button.green {
    background-color: #65ce21;
    color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.2);
}

.button.red {
    background-color: #ff2525;
    color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.2);
}

.button.blue {
    background-color: #2593ff;
    color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.2);
}

.button.orange {
    background-color: #f3aa54;
    color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.button.disabled,
.button[disabled],
.button:disabled{
    -webkit-filter: brightness(.76);
    filter: brightness(.76);
}


/* 文本框 */
input.text {
    height: 2.5rem;
    line-height: 2.5rem;
    font-size: 0.9rem;
    border-radius: 0.2rem;
    padding: 0 0.5rem;
    overflow: hidden;
    box-sizing: border-box;
    border: 1px solid rgba(0, 0, 0, 0.2);
    margin: 0;
}

input.text[readonly] {
    background-color: #f7f7f7;
}

input.text.disabled,
input.text:disabled,
input.text[disabled] {
    color: #ccc;
    background-color: #f0f0f0;
    text-shadow: 1px 0 0 #fff;
}

.field.flex > input.text {
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
    border-right: none;
    align-self: center;
}


/* 标签 */
.field.flex > .label {
    align-self: center;
    height: 2.5rem;
    line-height: 2.5rem;
    font-size: 0.9rem;
    color: #7d7d7d;
    border-radius: 0.2rem;
    text-align: center;
    display: inline-block;
    overflow: hidden;
    box-sizing: border-box;
    background-color: #ececec;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
    width: 20%;
}


.field.flex > .label + input.text {
    border-radius: 0.2rem;
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    border-left: none;
    border-right: 1px solid rgba(0, 0, 0, 0.2);
    width: 80%;
}

/* file */
.field.flex > .label + .file {
    height: 2.5rem;
    line-height: 2.5rem;
    font-size: 0.7rem;
    overflow: hidden;
    box-sizing: border-box;
    border: 1px solid rgba(0, 0, 0, 0.2);
    margin: 0;
    border-top-right-radius: 0.2rem;
    border-bottom-right-radius: 0.2rem;
    border-left: none;
    color: #8a8a8a;
    width: 80%;
}

.field.flex > .label + .file::-webkit-file-upload-button {
    opacity: 0;
    width: 0;
    height: 0;
    border: none;
}

/* radio */
.field.flex > .radio {
    height: 2.5rem;
    line-height: 2.5rem;
    font-size: 0.9rem;
    border-radius: 0.2rem;
    padding: 0 0.5rem;
    overflow: hidden;
    box-sizing: border-box;
    border: 1px solid rgba(0, 0, 0, 0.2);
    margin: 0;
    align-self: center;
    width: 80%;
}

.field.flex > .radio > label {
    margin-right: 0.5rem;
}

.field.flex > .label + .radio {
    border-radius: 0.2rem;
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    border-left: none;
    border-right: 1px solid rgba(0, 0, 0, 0.2);
}

/* select */
.field.flex > .select {
    height: 2.5rem;
    line-height: 2.5rem;
    border-radius: 0.2rem;
    padding: 0 0.5rem;
    overflow: hidden;
    box-sizing: border-box;
    border: 1px solid rgba(0, 0, 0, 0.2);
    margin: 0;
    align-self: center;
    width: 80%;
}

.field.flex > .label + .select {
    border-radius: 0.2rem;
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    border-left: none;
    border-right: 1px solid rgba(0, 0, 0, 0.2);
}

.field.flex > .select select {
    outline: none;
    border: none;
    background-color: transparent;
}

/* joint */
.field.flex > .joint {
    position: absolute;
    box-sizing: border-box;
    padding: 0;
    text-align: center;
    width: 2.5rem;
    height: 2.5rem;
    line-height: 2.5rem;
    font-size: inherit;
    right: 0;
    top: 0;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 0 0.2rem 0.2rem 0;
    color: #666;
    background-color: #f1f1f1;
}

.field.flex > input.text + .joint.disabled,
.field.flex > input.text + .joint[disabled] {
    color: #ccc;
    background-color: #f0f0f0;
    text-shadow: 1px 0 0 #fff;
}

/* form */
.form-field-label-max .field.flex > .label {
    width: 26%;
}

.form-field-label-max .field.flex > input.text,
.form-field-label-max .field.flex > .file,
.form-field-label-max .field.flex > .radio,
.form-field-label-max .field.flex > .select {
    width: 74%;
}

.form-field-label-min .field.flex > .label {
    width: 15%;
}

.form-field-label-min .field.flex > input.text,
.form-field-label-max .field.flex > .file,
.form-field-label-min .field.flex > .radio,
.form-field-label-min .field.flex > .select {
    width: 85%;
}


/*************************************************************
 *  Tips
 *************************************************************/
.tips {
    text-align: left;
    border-radius: .1rem;
    font-size: .7rem;
    padding: .3rem .3rem .3rem 1.3rem;
    border: 1px solid rgba(0, 0, 0, .2);
    position: relative;
}

.tips:before {
    position: absolute;
    font-family: "iconfont" !important;
    font-size: inherit;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    left: .3rem;
}

.tips.success {
    color: #62bc00;
    border-color: #cffb88;
    background-color: #f3fde3;
}

.tips.success:before {
    content: "\e6b3";
    -webkit-text-stroke-width: .5px;
}

.tips.error {
    color: #d05839;
    border-color: #f7a995;
    background-color: #f9d6ca;
}

.tips.error:before {
    content: "\e621";
    -webkit-text-stroke-width: .6px;
}

.tips.warning {
    color: #eaa326;
    border-color: #fbe0ae;
    background-color: #fdf2d9;
}

.tips.warning:before {
    content: "\e6a8";
    -webkit-text-stroke-width: .5px;
}

.tips.confirm {
    color: #84a5d0;
    border-color: #d3e5fd;
    background-color: #f3f8ff;
}

.tips.confirm:before {
    content: "\e63a";
    -webkit-text-stroke-width: .5px;
}

.tips.info {
    color: #84a5d0;
    border-color: #d3e5fd;
    background-color: #f3f8ff;
}

.tips.info:before {
    content: "\e6a8";
    -webkit-text-stroke-width: .5px;
}

.tips.alert {
    color: #d05839;
    border-color: #f7a995;
    background-color: #f9d6ca;
}

.tips.alert:before {
    content: "\e68a";
    -webkit-text-stroke-width: .5px;
}