/* App Global Variables */

html {
  height: 100% !important;
  box-sizing: border-box !important;
}

body {
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
}

#app {
  height: 100% !important;
}

.z-index-top {
  z-index: 99999 !important;
}

*,
*:before,
*:after {
  box-sizing: border-box !important;
}

a:focus,
a:active {
  outline: none !important;
}

a,
a:focus,
a:hover {
  cursor: pointer !important;
  color: inherit;
  text-decoration: none !important;
}

div:focus {
  outline: none !important;
}

// main-container global css
.app-container {
  padding: 10px;
  position: relative;
}

.w20p {
  width: 20% !important;
}

.w25p {
  width: 25% !important;
}

.w30p {
  width: 30% !important;
}

.w35p {
  width: 35% !important;
}

.w40p {
  width: 40% !important;
}

.w50p {
  width: 50% !important;
}

.w60p {
  width: 60% !important;
}

.w65p {
  width: 65% !important;
}

.w70p {
  width: 70% !important;
}

.w80p {
  width: 80% !important;
}

.w90p {
  width: 90% !important;
}

.w100p {
  width: 100% !important;
}

.w50 {
  width: 50px !important;
}

.w80 {
  width: 80px !important;
}

.w100 {
  width: 100px !important;
}

.w180 {
  width: 180px !important;
}

.w240 {
  width: 240px !important;
}

.w400 {
  width: 400px !important;
}

.w500 {
  width: 500px !important;
}

.w800 {
  width: 800px !important;
}

.w900 {
  width: 900px !important;
}

.h100p {
  height: 100% !important;
}

.h40 {
  height: 40px !important;
}

.h50 {
  height: 50px !important;
}

.h100 {
  height: 100px !important;
}

// margin
.mt5 {
  margin-top: 10px !important;
}

.ml5 {
  margin-left: 5px !important;
}

.mr5 {
  margin-right: 5px !important;
}

.mb5 {
  margin-bottom: 5px !important;
}

.mt10 {
  margin-top: 10px !important;
}

.mt20 {
  margin-top: 20px !important;
}

.mt25 {
  margin-top: 25px !important;
}

.mr10p {
  margin-right: 10% !important;
}

.mr10 {
  margin-right: 10px !important;
}

.mb10 {
  margin-bottom: 10px !important;
}

.mb20 {
  margin-bottom: 20px !important;
}

.mb30 {
  margin-bottom: 30px !important;
}

.ml30 {
  margin-left: 30px !important;
}

.ml20 {
  margin-left: 20px !important;
}

.ml10 {
  margin-left: 10px !important;
}


// padding
.pt5 {
  padding-top: 5px !important;
}

.pl5 {
  padding-left: 5px !important;
}

.pr5 {
  padding-right: 5px !important;
}

.pb5 {
  padding-bottom: 5px !important;
}

.pt10 {
  padding-top: 10px !important;
}

.pt20 {
  padding-top: 20px !important;
}

.pr10 {
  padding-right: 10px !important;
}

.pr30 {
  padding-right: 30px !important;
}

.pr40 {
  padding-right: 40px !important;
}

.pr50 {
  padding-right: 50px !important;
}

.pb10 {
  padding-bottom: 10px !important;
}

.pl10 {
  padding-left: 10px !important;
}

.pl20 {
  padding-left: 20px !important;
}

.pl30 {
  padding-left: 30px !important;
}

.pl40 {
  padding-left: 40px !important;
}

.pr40 {
  padding-left: 40px !important;
}

.p4 {
  padding: 4px !important;
}

.border-bottom {
  border-bottom: 1px solid #CCCCCC !important;
}

.border-left {
  border-left: 1px solid #CCCCCC !important;
}

.border-box {
  border: #ebeef5 1px solid !important;
  border-radius: 4px !important;
}

// 背景色
.bg-white {
  background-color: #fff !important;
}

// 行显示
.flex {
  display: flex !important;
}

// 大小占剩余全部
.flex1 {
  flex: 1 !important;
}

// 列显示
.flex-col {
  display: flex !important;
  flex-direction: column !important;
}

// 自动换行
.flex-warp {
  flex-wrap: wrap !important;
}

// 行显示行内块
.flex-inline {
  display: inline-flex !important;
}

// 垂直居中
.align-center {
  align-items: center !important;
}

// 水平居中
.justify-center {
  justify-content: center !important;
}

.justify-between {
  justify-content: space-between !important;
}

.justify-around {
  justify-content: space-around !important;
}

// 普通文本
.text {
  color: #303133 !important;
  font-size: 14px !important;
  line-height: 16px !important;
}

// 文本居中
.text-center {
  text-align: center !important;
}

// 文本左对齐
.text-left {
  text-align: left !important;
}

// 单行显示文本
.text-ellipsis {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

// 2行显示文本
.text-ellipsis-2 {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  word-wrap: break-word;
  white-space: normal !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

// 超出隐藏
.over-hidden {
  overflow: hidden !important;
}

// 超出滚动
.over-scroll {
  overflow: auto !important;
}

// 搜索表单容器
.query-container {
  overflow: hidden !important;
  height: auto !important;

  // 标签
  .el-form-item__label {
    width: auto !important;
  }

  // 表单输入框
  .el-form-item__content {
    margin-right: 10px !important;
  }

  // 选项-输入框
  .el-input__inner {
    width: 160px !important;
  }

  // 选项-日期选择
  .el-date-editor--daterange {


    .el-range-input {
      width: 80px !important;
    }

    .el-range-separator {
      width: 20px !important;
    }
  }

  // 选项-月份选择
  .el-range-editor {
    &.el-input__inner {
      width: 250px !important;
    }
  }

  // 选项-日期时间选择
  .el-date-editor--datetimerange {
    &.el-input__inner {
      width: 370px !important;
    }

    .el-range-input {
      width: 140px !important;
    }

    .el-range-separator {
      width: 20px !important;
    }
  }

  .el-date-editor--month {
    width: 160px !important;
  }

  .el-date-editor--year {
    width: 160px !important;
  }
}

.el-checkbox__inner {
 border: 1px solid #333333;
}