/*
*基础样式
* */

  /* reset */
  input{ padding:0; outline:none;background: none;border: none; }
  textarea{ padding:0; outline:none; background:none; resize:none; }
  select{  /*复写Chrome和Firefox里面的边框*/
    /*清除默认样式*/
    appearance:none;
    -moz-appearance:none;
    -webkit-appearance:none;
    outline:none;
    /*在选择框的最右侧中间显示小箭头图片*/
    
    /*为下拉小箭头留出一点位置，避免被文字覆盖*/
    padding-right: 3.5rem;
  }
  /*清除ie的默认选择框样式清除，隐藏下拉箭头*/
  select::-ms-expand { display: none; }
  select option{ outline:none; }
  button { border:none; }

/* 宽度 */
  .w-100{ width: 100% !important; }
  .wm-100{ max-width:100%; }
  .width-100{ width: 5rem; }
  .width-140{ width: 7rem !important; }
  .width-15{ width:0.75rem; }
  .width-20 { width:1rem; }
  .width-30 { width:1.5rem; }

/* 高度 */
  .h-100 { height:100%; }
  .height-140{ height: 7rem !important; }
  .height-20 { height: 1rem; }
  .height-30 { height: 1.5rem; }

/* 对齐方式 */
  .align-c { text-align: center; }
  .align-c.flex-row { justify-content: center; }
  .align-c img {  margin: 0 auto; }
  .align-l { text-align: left !important; }
  .align-l.flex-row { justify-content: flex-start; }
  .align-r { text-align: right; }
  .align-r.flex-row { justify-content: flex-end; }

/* 布局 */
  .display-none{ display: none !important; }
  .display-block { display: block !important; }
  .display-inline { display: inline !important; }
  .display-inline-block { display: inline-block !important;}

  .flex-row { display: flex;flex-direction: row;align-items: center;}
  .flex-column{ display: flex;flex-direction: column;}
  .flex-content-between { justify-content: space-between !important; }
  .flex-content-around { justify-content: space-around !important; }
  .flex-content-start { justify-content: flex-start !important; }
  .flex-content-end { justify-content: flex-end !important; }
  .flex-content-center { justify-content: center !important; }
  .flex-align-stretch { align-items: stretch !important; }
  .flex-align-center { align-items: center !important; }
  .flex-align-baseline { align-items: baseline !important; }
  .flex-align-start { align-items: flex-start !important; }
  .flex-align-end { align-items: flex-end !important; }
  .flex-g0 { flex-grow: 0 !important; }
  .flex-g1, .flex-row input { flex-grow: 1 !important; }
  .flex-g2 { flex-grow: 2 !important; }
  .flex-g3 { flex-grow: 3 !important; }
  .flex-s0 { flex-shrink: 0; }
  .flex-s1 { flex-shrink: 1; }
  .flex-c1 { flex: 1; }
  .flex-c2 { flex: 2 !important; }
  .flex-c3 { flex: 3; }
  .flex-o1 { order: 1; }
  .flex-o2 { order: 2; }
  .flex-wrap { flex-wrap: wrap !important; }
  .flex-nowrap { flex-wrap: nowrap !important; }
  .align-self-s { align-self: flex-start; }
  .align-self-e { align-self: flex-end; }
  .align-self-st { align-self: stretch; }

/* 定位 */
  .pos-relative { position: relative; }
  .pos-fixed { position: fixed;z-index: 1; }
  .pos-absolute { position: absolute;z-index: 1; }
  .pos-t, .pos-b { left: 0; right: 0; }
  .pos-t { top: 0; }
  .pos-b { bottom: 0; }
  .pos-l { left: 0; }
  .pos-r { right: 0 !important; }
  .pos-b-30 { bottom:1.5rem; }
  .pos-rt { right: 0;top: 0; }
  .pos-rb { right: 0;bottom: 0; }
  .pos-lt { left: 0;top: 0;}
  .pos-lb { left: 0;bottom: 0; }
  .pos-rc, .pos-lc { top: 50%;transform: translateY(-50%);-webkit-transform: translateY(-50%); }
  .pos-rc { /*右边垂直居中*/right: 0; }
  .pos-lc { /*左边垂直水平居中*/left: 0; }
  .pos-m { /*垂直水平居中*/left: 50%;top: 50%;transform: translate(-50%, -50%);-webkit-transform: translate(-50%, -50%); }

/* 内外边距 */
  .pa-0 { padding: 0px !important; }
  .pt-0, .ptb-0 { padding-top: 0px !important; }
  .pb-0, .ptb-0 { padding-bottom: 0px !important; }
  .pl-0, .plr-0 { padding-left: 0px !important; }
  .pr-0, .plr-0 { padding-right: 0px !important; }
  .pa-5 { padding: 0.25rem !important; }
  .pt-5, .ptb-5 { padding-top: 0.25rem !important; }
  .pb-5, .ptb-5 { padding-bottom: 0.25rem !important; }
  .pl-5, .plr-5 { padding-left: 0.25rem !important; }
  .pr-5, .plr-5 { padding-right: 0.25rem !important; }
  .pa-10{ padding: 0.5rem !important; }
  .pt-10, .ptb-10 { padding-top: 0.5rem !important; }
  .pb-10, .ptb-10 { padding-bottom: 0.5rem !important; }
  .pl-10, .plr-10 { padding-left: 0.5rem !important; }
  .pr-10, .plr-10 { padding-right: 0.5rem !important; }
  .pa-15 { padding: 0.75rem !important; }
  .pt-15, .ptb-15 { padding-top: 0.75rem !important; }
  .pb-15, .ptb-15 { padding-bottom: 0.75rem !important; }
  .pl-15, .plr-15 { padding-left: 0.75rem !important; }
  .pr-15, .plr-15 { padding-right: 0.75rem !important; }
  .pa-30 { padding: 1.5rem !important; }
  .pt-30, .ptb-30 { padding-top: 1.5rem !important; }
  .pb-30, .ptb-30 { padding-bottom: 1.5rem !important; }
  .pl-30, .plr-30 { padding-left: 1.5rem !important; }
  .pr-30, .plr-30 { padding-right: 1.5rem !important; }
  .pa-50 { padding: 2.5rem !important;}
  .pt-50, .ptb-50 { padding-top: 2.5rem !important; }
  .pb-50, .ptb-50 { padding-bottom: 2.5rem !important; }
  .pl-50, .plr-50 { padding-left: 2.5rem !important; }
  .pr-50, .plr-50 { padding-right: 2.5rem !important; }
  .pa-60 { padding: 3rem !important;}
  .pt-60, .ptb-60 { padding-top: 3rem !important; }
  .pb-60, .ptb-60 { padding-bottom: 3rem !important; }
  .pl-60, .plr-60 { padding-left: 3rem !important; }
  .pr-60, .plr-60 { padding-right: 3rem !important; }
  .pa-100{ padding: 5rem !important;}
  .pt-100, .ptb-100 { padding-top: 5rem !important; }
  .pb-100, .ptb-100 { padding-bottom: 5rem !important; }
  .pl-100, .plr-100 { padding-left: 5rem !important; }
  .pr-100, .plr-100 { padding-right: 5rem !important; }
  
  .mlr-auto{ margin: 0 auto; }
  .ma-0 { margin: 0px !important; }
  .mt-0, .mtb-0 { margin-top: 0px !important; }
  .mb-0, .mtb-0 { margin-bottom: 0px !important; }
  .ml-0, .mlr-0 { margin-left: 0px !important; }
  .mr-0, .mlr-0 { margin-right: 0px !important; }
  .ma-5{ margin: 0.25rem !important; }
  .mt-5, .mtb-5 { margin-top: 0.25rem !important; }
  .mb-5, .mtb-5 { margin-bottom: 0.25rem !important; }
  .ml-5, .mlr-5 { margin-left: 0.25rem !important; }
  .mr-5, .mlr-5 { margin-right: 0.25rem !important; }
  .ma-10{ margin: 0.5rem !important; }
  .mt-10, .mtb-10 { margin-top: 0.5rem !important; }
  .mb-10, .mtb-10 { margin-bottom: 0.5rem !important; }
  .ml-10, .mlr-10 { margin-left: 0.5rem !important ;}
  .mr-10, .mlr-10 { margin-right: 0.5rem !important; }
  .ma-15 { margin: 0.75rem !important; }
  .mt-15, .mtb-15 { margin-top: 0.75rem !important; }
  .mb-15, .mtb-15 { margin-bottom: 0.75rem !important; }
  .ml-15, .mlr-15 { margin-left: 0.75rem !important; }
  .mr-15, .mlr-15 { margin-right: 0.75rem !important; }
  .ma-30 { margin: 1.5rem !important; }
  .mt-30, .mtb-30 { margin-top: 1.5rem !important; }
  .ml-30, .mlr-30 { margin-left: 1.5rem !important; }
  .mr-30, .mlr-30 { margin-right: 1.5rem !important; }
  .mb-30, .mtb-30 { margin-bottom: 1.5rem !important; }
  .ma-50{ margin: 2.5rem !important; }
  .mt-50, .mtb-50 { margin-top: 2.5rem !important; }
  .mb-50, .mtb-50 { margin-bottom: 2.5rem !important; }
  .ml-50, .mlr-50 { margin-left: 2.5rem !important; }
  .mr-50, .mlr-50 { margin-right: 2.5rem !important; }
  .ma-60{ margin: 3rem !important; }
  .mt-60, .mtb-60 { margin-top: 3rem !important; }
  .mb-60, .mtb-60 { margin-bottom: 3rem !important; }
  .ml-60, .mlr-60 { margin-left: 3rem !important; }
  .mr-60, .mlr-60 { margin-right: 3rem !important; }
  .ma-100 { margin: 5rem !important; }
  .mt-100, .mtb-100 { margin-top: 5rem !important; }
  .mb-100, .mtb-100 { margin-bottom: 5rem !important; }
  .ml-100, .mlr-100 { margin-left: 5rem !important; }
  .mr-100, .mlr-100 { margin-right: 5rem !important; }
  .mt-200{ margin-top: 10rem !important; }
  .mb-200{ margin-bottom: 10rem !important; }

/* 字体颜色 */
  .color-white { color: #fff !important; }
  .color-grey { /*淡灰色*/ color: #afafaf !important; }
  .color-light {/*浅灰色*/color: #9a9a9a !important; }
  .color-semi {/*深灰色*/color: #6a6a6a !important; }
  .color-black { color: #3a3a3a !important; }
  .color-red { color: #e64340 !important; }
  .color-red-dark {/*暗红色*/color: #f46e67 !important; }
  .color-blue { color: #009fff !important; }
  .color-green { color: #1aad19 !important; }
  .color-green-dark { color: #0cbaa0 !important; }
  .color-orange { color: #ff873e !important; }

/* 背景色 */
  .bgcolor-white { background: #fff !important; }
  .bgcolor-light { background: #f2f2f2 !important; }
  .bgcolor-grey { background: #9d9d9d !important; }
  .bgcolor-grey-light{ background: #e5e5e5 !important; }
  .bgcolor-grey-dark{ background: #f8f8f8 !important; }
  .bgcolor-black { background: #333 !important; }
  .bgcolor-semi { background: #666 !important; }
  .bgcolor-red { background: #ea4d4d !important; }
  .bgcolor-blue { background: #009fff !important; }
  .bgcolor-green { background: #62c46f !important; }
  .bgcolor-green-dark { background: #0cbaa0 !important; }
  .bgcolor-orange { background: #f5973c !important; }
  .bgcolor-yellow { background: #fff8d9 !important; }

/* 字体大小 */
  .size-12 { font-size: 0.6rem; }
  .size-13 { font-size: 0.65rem;}
  .size-14 { font-size: 0.7rem; }
  .size-15 { font-size: 0.75rem;}
  .size-16 { font-size: 0.8rem; }
  .size-17 { font-size: 0.85rem;}
  .size-18 { font-size: 0.9rem; }
  .size-19 { font-size: 0.95rem;}
  .size-20 { font-size: 1rem; }
  .size-22 { font-size: 1.1rem; }
  .size-24 { font-size: 1.2rem; }
  .size-26 { font-size: 1.3rem; }
  .size-28 { font-size: 1.4rem; }
  .size-30 { font-size: 1.5rem; }
  .size-32 { font-size: 1.7rem; }
  .size-36 { font-size: 1.8rem; }
  .size-40 { font-size: 2rem; }
  .size-50 { font-size: 2.5rem; }
  .size-60 { font-size: 3rem; }
  .size-70 { font-size: 3.5rem; }
/* 边框 */
  .border-a { border: 1px solid #eee; }
  .border-l { border-left: 1px solid #eee; }
  .border-r { border-right: 1px solid #eee; }
  .border-t { border-top: 1px solid #eee; }
  .border-b { border-bottom: 1px solid #eee; }
  .border-l-r { border-left: 1px solid #eee;border-right: 1px solid #eee; }
  .border-t-b { border-top: 1px solid #eee;border-bottom: 1px solid #eee; }

  .border-none { border: none !important; }
  .border-none-t { border-top: none !important; }
  .border-none-r { border-right: none !important; }
  .border-none-b { border-bottom: none !important; }
  .border-none-l { border-left: none !important; }

  .borcolor-blue { border-color: #009fff !important; }
  .borcolor-green { border-color: #1aad19 !important; }
  .borcolor-green-dark { border-color: #0cbaa0 !important; }
  .borcolor-orange { border-color: #ff873e !important; }
/* 圆角 */
  .radius-a { border-radius: 0.4rem; }
  .radius-n { border-radius: 0px !important; }
  .radius-l { border-radius: 0.4rem 0 0 0.4rem; }
  .radius-r { border-radius: 0 0.4rem 0.4rem 0; }
  .radius-t { border-radius: 0.4rem 0.4rem 0 0; }
  .radius-b { border-radius: 0 0 0.4rem 0.4rem; }
  .radius-lt { border-radius: 0.4rem 0 0 0; }
  .radius-rt { border-radius: 0 0.4rem 0 0; }
  .radius-lb { border-radius: 0 0 0 0.4rem; }
  .radius-rb { border-radius: 0 0 0.4rem 0; }

  .radius-round { border-radius: 50%; }
  .radius-ellipse { border-radius: 5rem; }
  .box-shadow { box-shadow: 0 0.25rem 0.5rem #e2e2e2; }

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

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


/* 
* 按钮
* button-model button
* */
.button_disabled{
  background: #9d9d9d;
  color: #fff;
  text-align: center;
  border-radius: 0.4rem;
  padding: 0.25rem 0.5rem;
}
.button_normal{
  background: #fff;
  color: #000;
  text-align: center;
  border-radius: 0.4rem;
  padding: 0.25rem 0.5rem;
  
}
.button_primary{
  background: #0cbaa0;
  color: #fff;
  text-align: center;
  border-radius: 0.4rem;
  padding: 0.25rem 0.5rem;
}


/*
* 卡片式数据列表 
* @ card-title 
* @ card-model,__flat
* */
.card-item, .item-icon-round, .item-info-title, .item-info-desc,
.card-item .__button, .card-item .__button div, .card-title {
  display: flex;
  align-items: center;
}

.card-title, .card-item, .card-model,.card-item_define {
  background: #fff;
  padding: 0.5rem;
}

.card-title .card-name {
  flex-grow: 1;
}

.card-status {
  font-size: 0.6rem;
  color: #6a6a6a;
  position: relative;
  padding-left: 0.87rem;
}

.card-status::after, .card-status::before {
  content: ' ';
  width: 0.5rem;
  height: 0.5rem;
  border: 1px solid #0cbaa0;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}

.__close .card-status::after, .__close .card-status::before {
  border-top: 0;
  border-left: 0;
}

.__close .card-status::after {
  margin-top: -0.1rem;
}

.__open .card-status::after, .__open .card-status::before {
  border-bottom: 0;
  border-right: 0;
}

.__open .card-status::after {
  margin-top: 0.1rem;
}

.card-model {
  background: transparent;
  flex-direction: column;
  height: auto;
  opacity: 1;
  overflow: hidden;
}

.card-model.__close {
  height: 0;
  opacity: 0;
  overflow: hidden;
  padding: 0.37rem;
}

.card-model.__close .card-item {
  transform: translateY(-100%);
}

.card-model.__open .card-item {
  transform: translateY(0);
}

.card-item {
  flex-direction: row;
  box-shadow: 0 0.125rem 0.25rem #e2e2e2;
  border-radius: 0.2rem;
  margin-bottom: 0.75rem;
  transition: all 0.3s;
}
.card-item_define {
  box-shadow: 0 0.125rem 0.25rem #e2e2e2;
  border-radius: 0.2rem;
  margin-bottom: 0.75rem;
  transition: all 0.3s;
}
.card-item:last-child {
  margin-bottom: 0;
}

.item-icon-round, .item-icon-round img {
  width: 2.5rem;
  height: 2.5rem;
  background: #e6e6e6;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  font-size: 0.6rem;
  color: #fff;
}

.item-icon-round img {
  background: transparent;
}

.item-icon-round {
  align-items: center;
  justify-content: center;
  margin-right: 0.625rem;
}

.item-icon-round img.img-icon {
  width: 50%;
  height: 50%;
  border-radius: 0;
}

.item-icon-round.__green {
  background: #62c46f;
}

.item-icon-round.__grey {
  background: #9d9d9d;
}

.item-icon-round.__red {
  background: #ea4d4d;
}

.item-icon-round.__green-dark {
  background: #0cbaa0;
}

.item-icon-round.__orange {
  background: #f5973c;
}

.item-info {
  flex: 1;
  width: 100%;
}

.item-info.border_b {
  position: relative;
}

.card-item .__button, .card-item .__button div {
  justify-content: center;
}

.card-item .__button {
  margin-top: 0.75rem;
}

.card-item .__button div {
  border: 1px dashed #e6e6e6;
  padding: 0.25rem 0.75rem;
  border-radius: 0.2rem;
}

.card-item .img {
  width: 1rem;
  height: 1rem;
  margin-right: 0.325rem;
}

.card-item .__mini {
  justify-content: flex-end;
}

.card-item .__mini  div {
  border-radius: 0;
  padding: 0 0 0 0.75rem;
  border: none;
  border-left: 1px solid #eee;
  font-size: 0.7rem;
  margin-left: 0.75rem;
  color: #c4c4c4;
}

.card-item .__mini  div:first-child {
  border-left: none;
}

.card-item .__mini div img {
  width: 1rem;
  height: 0.75rem;
  margin-right: 0.25rem;
}

.item-info .item-info-desc {
  color: #9a9a9a;
}

.item-info .__text div {
  display: inline;
}

.item-arrow {
  padding-right: 1.5rem;
}

.item-arrow, .item-point {
  position: relative;
}

.item-point::before, .item-arrow::after {
  content: " ";
  display: inline-block;
  height: 0.45rem;
  width: 0.45rem;
  position: absolute;
  right: 0.75rem;
}

.item-arrow::after {
  border-width: 2px 2px 0 0;
  border-color: #888;
  border-style: solid;
  transform: translateY(-50%) matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
  top: 50%;
}

.item-point::before {
  background: #ff4122;
  border-radius: 50%;
  top: 0.375rem;
  right: 0.375rem;
}

.card-model.__flat .card-title {
  padding: 0.375rem 0.375rem;
  background: none;
  color: #9a9a9a;
}

.card-model.__flat {
  padding: 0;
}

.card-model.__flat .card-item {
  box-shadow: none;
  border-radius: 0;
  margin-bottom: 0;
  position: relative;
}

.card-model.__flat .card-item::after {
  display: inline-block;
  content: ' ';
  position: absolute;
  left: 0.75rem;
  right: 0;
  bottom: 0;
  height: 1px;
  background: #eee;
}

.card-model.__flat .card-item:last-child::after {
  display: none;
}


/* 
* bubble
* */
.bubble-item { text-align: center;padding-top: 0.75rem; }
.bubble-item .item-title { display: inline-block;margin: 0 auto;background: #cecece;line-height: 100%;font-size: 0.7rem;color: #fff;border-radius: 0.4rem;padding: 0.2rem; }
.bubble-item .item-desc { display: flex;justify-content: flex-end;padding: 0.75rem; }
.bubble-item .item-info { background: #0cbaa0;color: #fff;border-radius: 0.4rem;text-align: left;padding: 0.75rem;margin-right: 1rem;margin-left: 3.5rem;position: relative; }
.bubble-item .item-info::after { content: ' ';display: inline-block;position: absolute;width: 0;height: 0;border: 0.4rem solid #0cbaa0;
                        border-top-color: transparent;border-bottom-color: transparent;border-right-width: 0;right: -0.3rem;top: 0.75rem; }
.bubble-item .item-pic { background: #cdd1d6; }
.bubble-item .item-pic, .bubble-item .item-pic img { width: 2rem;height: 2rem;border-radius: 50%; }
.bubble-item.__left .item-pic { order: 1;}
.bubble-item.__left .item-info { order: 2;margin-right: 3.5rem;margin-left: 1rem; }
.bubble-item.__left .item-info::after { right: auto;left: -0.3rem;border-top-color: transparent;border-bottom-color: transparent;border-right-width: 0.4rem;border-left: 0; }


/* 
* 搜索框
*/
.search-model{
  height: 2rem;
  line-height: 2rem;
}


/* 
* 数据加载相关
* */
/* 下拉、上拉提示信息 */
  .top-tip{
      position: absolute;  
      top: -2rem;  
      left: 0;
      z-index: 1;  
      width: 100%;  
      height:2rem;  
      line-height:2rem;  
      text-align:center;
      color: #555;
  } 
  .bottom-tip{
      width: 100%;
      height: 2rem;
      line-height: 2rem;
      text-align: center;
      color: #777;
      background: #f2f2f2;
  }

/* 全局提示信息 */
  .alert{
      display: none;
      position: fixed;
      top: 2rem;
      left: 0;
      z-index: 1000;
      width: 100%;
      height: 2rem;
      line-height: 2rem;
      text-align: center;
      color: #fff;
      font-size: 0.6rem;
      background: rgba(7, 17, 27, 0.7);
  }

/* 无数据时的显示 */
  .nodata{ display: none; }

/* 数据加载中 */
  .loadingdata{ display: none; }

/* 
* 自定义全局样式
*/
.page-item {
  width: 100%;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  size:0.7rem;
}

/*  提示部分  */
.footer-tips {
font-size: 0.7rem;
color: #9a9a9a;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
padding: 0.75rem;
}

.footer-tips::before, .footer-tips::after {
content: " ";
height: 1px;
border-top: 1px solid #e2e2e2;
color: #eee;
width: 10%;
flex-grow: 0;
flex-shrink: 0;
opacity: 0.9;
}

.color-red.footer-tips {
color: #ff8f8f !important;
}

.color-red.footer-tips::before, .color-red.footer-tips::after {
border-color: #fcc;
}

.footer-tips::before {
margin-right: 0.5rem;
}

.footer-tips::after {
margin-left: 0.5rem;
}