@charset "utf-8";

*{
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}
html{
  height: 100%;
  -webkit-tap-highlight-color: transparent;
}
body{
  height: 100%;
  overflow: hidden;
  background: #f1f1f1;
  --theme-color: #19a97b;
  --form-item-border: 1px dashed #ddd;
}
::-ms-clear,::-ms-reveal,::-webkit-clear-button,::-webkit-search-cancel-button{ display:none; }
ul,ol,li{ list-style:none; }
label{
  font-size:16px;
  display:inline-block;
  margin-top:5px;
  margin-bottom:5px;
  height:20px;
  line-height:18px;
  cursor:pointer;
}
textarea{
  font-size:16px;
  padding:8px;
  border:1px solid #ccc;
  overflow-y:scroll;
  -webkit-overflow-scrolling:touch;
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
}
textarea:focus{ box-shadow:0.5px 1px 2px #ccc inset; }
input[type="file"]{ display:none; }
input[type="search"],
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button{ -webkit-appearance:none; -moz-appearance:none; appearance:none; }
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"]{ line-height:30px; white-space:nowrap; padding:0 5px; }
input[type="text"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="email"],
input[type="tel"]{ -webkit-appearance:none; -moz-appearance:none; appearance:none; padding:0 5px; height:30px; }
select,input:not([type="file"]),.selector{
  font-size:16px;
  width:120px;
  color:#333;
  border:1px solid #ccc;
  border-radius:2px;
}
.selector{
  display:inline-flex;
  align-items:center;
  padding-left:5px;
  padding-right:5px;
  min-height:30px;
}
textarea::placeholder,input::placeholder,.placeholder{ font-size:0.9em; color:#888; }
input.c{
  border-radius:0!important;
  border-width:0 0 1px!important;
  box-shadow:none!important;
  background-color:transparent;
}
input[readonly],.selector.disabled{ background-color:#f1f1f1!important; }

input[type="radio"]{
  margin-top:2px;
  margin-bottom:2px;
  width:16px;
  height:16px;
  border-radius:50%;
  border:1px solid var(--theme-color);
  cursor:pointer;
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
}
input[type="radio"]:checked{ background:radial-gradient(var(--theme-color) 40%,#fff 50%); }

input[type="checkbox"]{
  width:20px;
  height:20px;
  background:#fff;
  border-radius:0;
  border:1px solid #ddd;
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  cursor:pointer;
}
input[type="checkbox"]:hover{ border-color:#ccc; }
input[type="checkbox"]:indeterminate::after{
  content:'';
  display:block;
  width:64%;
  height:64%;
  margin:18%;
  background-color:var(--theme-color);
}
input[type="checkbox"]:checked{
  background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyBAMAAADsEZWCAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAkUExURUxpcYiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiEE8YQYAAAALdFJOUwDvDtUmRHS0i8RgeGwPhAAAAPlJREFUOMvVlKEOwkAMhi9jjAGGkGCYOTSGYGcWEJBgQBIMHoPHzGPwOBLUDMsgwPpyXG8Lye3aB9iJivuy9m//3oSo27lzwMsZ4J5eDNnAkwYdgB5NDgATujwAXEiSKHKkQBM4smJJgIRS0EIAfVqyOsQMXA3gbZMGS4pk3zWXbG9czjC0NRgYwP9g3CHIImMmYfpvc2q6qJN7urysSlJ9j61PtnijCp2xiqwCAOlYI1uGmsQ+xsg0WGt6dIlZLpDkidV+KS4NtIyq+0GhgjBzrkEqbeJcGS/LBYjJDVSjy+h1Vt4wT0CETDIhRhn3Bt0h+25vtfnD/AB74JHhA6bUugAAAABJRU5ErkJggg') no-repeat center / 100%;
}
input[type="checkbox"]:indeterminate,
input[type="checkbox"]:checked{ border-color:#999; }

label>input[type="checkbox"],
label>input[type="radio"]{ float:left; margin-left:4px; margin-right:2px; }


a{ background-color:transparent; cursor:pointer; color:var(--theme-color); }
a:link{ text-decoration:none; }
a:visited{ text-decoration:none; }
a:hover{ text-decoration:none; outline:0; }
a:active{ text-decoration:none; outline:0; }


#appEnv,#app{
  height: 100%;
  overflow: auto;
  position: relative;
}


.absoluteMask {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}
.isLoading{ position:relative; }
.isLoading>.loadingMask{
  z-index: 6;
  background-color: rgba(255, 255, 255, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}
.isLoading>.loadingMask>.hasText>.loadingText::after{
  content: '';
  animation: flickering-dots 2s linear infinite;
}
.isLoading>.loadingMask>.hasText>.loadingText.inLine::after{
  position: absolute;
  left: 100%;
}

.isLoading>.loadingMask>.loadingBall{
  --ring-size: 1.5em;
  --border-size: 0.05em;
  --ball-size: 0.3em;
  --duration: 1s;
  position: relative;
  width: var(--ring-size);
  height: var(--ring-size);
}
.isLoading>.loadingMask>.loadingBall>.loadingRing{
  border-radius: 50%;
  border: var(--border-size) solid #ddd;
  animation: rotate var(--duration) linear infinite;
}
.isLoading>.loadingMask>.loadingBall>.loadingRing::before{
  content: '';
  position: absolute;
  top: calc(0px - var(--border-size));
  left: calc(0px - var(--border-size));
  right: calc(0px - var(--border-size));
  bottom: calc(0px - var(--border-size));
  border-radius: 50%;
  border-style: solid;
  border-width: var(--border-size);
  border-color:var(--theme-color) transparent var(--theme-color) var(--theme-color);
}
.isLoading>.loadingMask>.loadingBall>.loadingRing::after{
  content: '';
  position: absolute;
  width: var(--ball-size);
  height: var(--ball-size);
  border-radius: 50%;
  background-color: var(--theme-color);
  top: calc(14.644660941% - calc(var(--ball-size) / 2));
  right: calc(14.644660941% - calc(var(--ball-size) / 2));
}
.isLoading>.loadingMask>.loadingBall.hasText{
  --ring-size: 9em;
  --border-size: 0.1em;
  --ball-size: 0.5em;
  --duration: 1.5s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.isLoading>.loadingMask>.loadingBall.hasText>.loadingRing{ background: #fff; box-shadow: 0 0 10px #888; }
.isLoading>.loadingMask>.loadingBall.hasText>.loadingText{ z-index: 1; max-width: 70%; }
.isLoading>.loadingMask>.loadingBall.hasText>.loadingText.inLine{ position: relative; margin-right: 0.5em; }
body.isLoading>.loadingMask{ font-size:20px; }

.isLoading>.loadingMask>.progressBar{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.isLoading>.loadingMask>.progressBar>.processRing{
  width:9em;
  height:9em;
  border-radius: 50%;
  box-shadow: 0 0 10px #888;
  --degree: 0deg;
  background: conic-gradient(var(--theme-color) calc(var(--degree) * 0.5),#ddd var(--degree));
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}
.isLoading>.loadingMask>.progressBar>.processRing::after{
  position: absolute;
  content: '';
  top: 0.1em;
  bottom: 0.1em;
  left: 0.1em;
  right: 0.1em;
  background: #fff;
  border-radius: 50%;
}
.isLoading>.loadingMask>.progressBar>.processRing>.processRing-pointer{
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 50%;
  left: 50%;
  transform: rotate(var(--degree));
  transform-origin: bottom center;
}
.isLoading>.loadingMask>.progressBar>.processRing>.processRing-pointer::before{
  content: '';
  position: absolute;
  top: -0.15em;
  left: -0.2em;
  width: 0.4em;
  height: 0.4em;
  background: var(--theme-color);
  border-radius: 50%;
}
.isLoading>.loadingMask>.progressBar>.processRing>.processRing-process{
  z-index: 2;
  color:#333;
}
.isLoading>.loadingMask>.progressBar>.processRing>.processRing-process.percent{
  font-size: 2em;
  text-align: center;
}
.isLoading>.loadingMask>.progressBar>.processRing>.processRing-process.ratio{
  font-size: 1.5em;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.isLoading>.loadingMask>.progressBar>.processRing>.processRing-process.ratio .total{
  padding: 0 0.2em;
  border-top: 0.1em solid #333;
}
.isLoading>.loadingMask>.progressBar>.processRing>.processRing-process.ratio .total small{
  display: inline-block;
  transform: scale(0.7);
  transform-origin: right center;
}
.isLoading>.loadingMask>.progressBar.finished>.processRing{
  background: var(--theme-color);
}
.isLoading>.loadingMask>.progressBar.active>.processRing>.processRing-pointer{
  transition: transform 0.5s ease;
}
.isLoading>.loadingMask>.progressBar.active.hasText{
  position: relative;
}
.isLoading>.loadingMask>.progressBar.active.hasText>.loadingText{
  position: absolute;
  top: calc(100% + 1em);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}



.toasts{
  position: fixed;
  z-index: 9;
  left: 50%;
  top: 50%;
  max-width: 80%;
  transform: translate(-50%,-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.toasts li{
  color: #fff;
  font-size: 16px;
  overflow: hidden;
  border-radius: 5px;
  background: rgba(10,10,10,0.7);
  transition: opacity 0.2s linear, height 0.2s linear;
}
.toasts li:not(:last-child){ margin-bottom:5px; }
.toasts li div{ padding:10px; }



/* tag 必须放在颜色前面，以便覆盖样式 */
.tag{
  font-size:12px;
  padding:2px 3px;
  text-align:center;
  display:inline-block;
  border-style:solid;
  border-width:1px;
  color:var(--theme-color);
}
.tag.deletable{ position:relative; }
.tag.deletable::after{
  position:absolute;
  content:'×';
  right:0;
  top:0;
  transform:
  translate(50%,-50%) scale(1.2);
  font-weight:bold;
}

.theme-color{ color:var(--theme-color); }
.gray{ color:#aaa; }
.white{ color:#fff; }
.green{ color:#25b385; }
.orange{ color:#f80; }
.blue{ color:#428bca; }
.red{ color:#f14c4c; }
.black{ color:#444; }
.purple{ color:#c0f; }
.azure{ color:#0cf; }
.pink{ color:#f69; }
.cyan{ color:#0e7; }
.yellow{ color:#fc0; }

.bgc-gray{ background-color:#ddd; border-color:#ccc; color:#888; }
.bgc-green{ background-color:#25b385; border-color:#1ba97b; }
.bgc-orange{ background-color:#f80; border-color:#e60; }
.bgc-blue{ background-color:#428bca; border-color:#3071a9; }
.bgc-red{ background-color:#f14c4c; border-color:#d9534f; }
.bgc-black{ background-color:#444; border-color:#333; }
.bgc-purple{ background-color:#c0f; border-color:#a0d; }
.bgc-azure{ background-color:#0cf; border-color:#0ad; }
.bgc-pink{ background-color:#f69; border-color:#e58; }
.bgc-cyan{ background-color:#67c23a; border-color:#529b2e; }
.bgc-yellow{ background-color:#fc0; border-color:#eb0; }


.b{ font-weight:bold!important; }
.i{ font-style:italic; }
.c{ text-align:center!important; text-indent:0!important; }
.l{ text-align:left!important; }
.u{ text-decoration:underline; }
.LT{ text-decoration:line-through; }
.f18{ font-size:18px; }
.f12{ font-size:12px; }
.flex{ display:flex; align-items:center; }
.flex1{ flex:1 1 0!important; }
.flex2{ flex:2 2 0!important; }
.hidden{ display:none!important; }
/* 戳记 */
.stamp{
  --color:#e10;
  --rotate:30deg;
  position:absolute;
  z-index:1;
  padding:0.2em;
  line-height:1;
  border-radius:0.3em;
  border:0.1em dashed var(--color);
  color:var(--color);
  transform:rotate(var(--rotate));
}
.wrap{ white-space:pre-wrap; } /* 允许\n换行 */
.f-r{ float:right!important; }
.scanner{
  --size:50px;
  width:var(--size);
  height:var(--size);
  background:rgba(120,120,120,0.2) url("/src/img/icons/scanner.png") no-repeat center/92%;
  border-radius:16%;
  box-sizing:border-box;
}
.shadow{ box-shadow:1px 1px 3px #999; }
.hideLongText{ overflow:hidden; white-space:nowrap; text-overflow:ellipsis; word-wrap:normal; }
.hideLongParagraph{
  --max-lines:2;
  word-break:break-all;
  text-overflow:ellipsis;
  overflow:hidden;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:var(--max-lines);
  line-clamp:var(--max-lines);
}
.noThing{ text-align:center; padding:20px 2%; color:#888; }
/* 隐藏百度地图水印，主要是echarts中的 */
.anchorBL{ display:none; }
/* 图标背景色必须为透明 */
.icon{ background:transparent; text-align:center; }
/* 默认的vue动画为0.4秒的transform */
.v-enter-active,.v-leave-active{ transition:transform 0.4s ease; }
/* 遮罩 */
.fixed{ position:fixed; }
.block{ display:block; }
.mask{ top:0; right:0; bottom:0; left:0; display:flex; }
.mask:not(.fixed){ position:absolute; }


a.button{ line-height:27px; }
.button{
  height:30px;
  font-size:14px;
  padding:0 6px;
  border-width:1px;
  border-style:solid;
  text-align:center;
  position:relative;
}
.button.block{ width:90%; margin:5px 5%; font-size:16px; border-radius:5px; }
.button.medium{ height:40px; font-size:18px; padding:0 15px; }
.button::after{
  content:'';
  position:absolute;
  pointer-events:none;
  left:0;
  top:0;
  right:0;
  bottom:0;
  background:linear-gradient(
    to bottom,
    rgba(255,255,255,0),
    rgba(250,250,250,0.2) 50%,
    rgba(255,255,255,0)
  );
}
.button:hover::after{
  background:linear-gradient(
    to bottom,
    rgba(0,0,0,0.1),
    rgba(200,200,200,0.1) 50%,
    rgba(0,0,0,0.1)
  );
}
.button:not(.theme-color):not(:disabled){ color:#fff; }
.button.theme-color:not(:disabled){ border-color:#B8BACC; background-color:#fff; }
.button .icon{ margin-right:3px; }
button:disabled{ background-color:#eee; border-color:#ddd; color:#888; }


.form-group{ padding:8px 10px 5px; }
.form-group:not(:last-child){ border-bottom:1px solid #ddd; }
.form-group h5{ color:#666; }
.form-item{ display:flex; flex-wrap:wrap; }
.form-item:not(:last-child){ border-bottom:var(--form-item-border); }
.form-item>*{ margin-right:5px; }
.form-item label[for]{ width:var(--label-width); margin-left:5px; text-align:right; font-weight:bold; }
.form-item label[for].required{ position:relative; }
.form-item label[for].required::before{ position:absolute; content:'*'; font-size:12px; left:0; top:-5px; color:#e10; }
.form-item input[type="text"],
.form-item input[type="number"],
.form-item input[type="password"],
.form-item input[type="search"],
.form-item input[type="email"],
.form-item input[type="tel"],
.form-item input[type="datetime-local"],
.form-item input[type="date"],
.form-item input[type="time"],
.form-item input[type="month"],
.form-item input[type="range"],
.form-item select,
.form-item .searchable-selector,
.form-item .selector{ background:transparent; flex:1 1 0; }
.form-item input.c{ width:0; }
.form-item>.icon{ font-size:20px; }
.form-item>small,.form-item>.switch{ align-self:center; }
.form-item .scanner{ --size:30px; }
.form-item .switch{ font-size:12.5px; }
.form-item .captchaImg{ cursor:pointer; width:72px; height:30px; box-shadow:1px 1px 3px #999; }


/* 模态框 */
.mask .modal{ border-radius:8px; }
.mask.hide .modal{ transform:scale(0.7); opacity:0; }
.mask.show .modal{ transform:scale(1); opacity:1; }
.mask.active .modal{ transition:transform 0.2s ease,opacity 0.2s ease; }
.mask dialog.modal{ flex-direction:column; }
.mask dialog.modal>.body{
  max-height:75vh;
  overflow-y:scroll;
  border-bottom:1px solid #eee;
  padding:30px 15px 25px;
  font-size:16px;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.mask dialog.modal>.body::-webkit-scrollbar{ display:none; }
.mask dialog.modal>.body .title{
  font-size:18px;
  font-weight:bold;
  max-width:80vw;
  word-break:break-word;
  text-align:center;
  padding-bottom:5px;
}
.mask dialog.modal>.body .content{
  color:#666;
  padding:0 10px 10px;
  white-space:pre-line;
  word-break:break-all;
}
.mask dialog.modal>.btns{ display:flex; }
.mask dialog.modal>.btns .c{ width:50%; min-width:100px; }
.mask dialog.modal>.btns .c:first-child{ border-right:1px solid #eee; }
.mask dialog.modal>.btns button{ font-size:16px; white-space:nowrap; margin:8px auto; }
.mask dialog.modal>.c:last-child{ padding:10px 0; }
.mask dialog.modal.YorN>.body b{ font-size:20px; color:#e10; }
.mask dialog.modal.prompt textarea{ width:100%; margin:5px 0 0; background: #fdf5e6; }
.mask dialog.modal.prompt .number-input{ --size:32px; }
.mask dialog.modal.prompt input.c{ min-width:120px; }
.mask dialog.modal.prompt>.body>.checkbox label{ margin-left:5px; }








table{
  --border-color:#ccc;
  --vertical-border-color:var(--border-color);
  --horizontal-border-color:var(--border-color);
  --body-odd-background:#f8f8f8;
  --body-even-background:transparent;
  background-color:transparent;
  border-width:1px 1px 1px 0;
  border-style:solid;
  border-color:var(--horizontal-border-color) var(--vertical-border-color);
  border-spacing:0;
  border-collapse:collapse;
  word-wrap:break-word;
  word-break:break-all;
}
table tr:not(:first-child){ border-top:1px solid var(--horizontal-border-color); }
table th{ padding-top:5px; padding-bottom:5px; text-align:center; color:#222; }
table td{ padding-top:3px; padding-bottom:3px; }
table th,table td{ border-left:1px solid var(--vertical-border-color); }
table td>img{ display:block; margin:auto; }
table thead{ border-bottom:1px solid var(--horizontal-border-color); }
table tbody{ position:relative; }
table tbody tr{ background:var(--body-row-background); }
table tbody tr:nth-child(odd){ --body-row-background:var(--body-odd-background); }
table tbody tr:nth-child(even){ --body-row-background:var(--body-even-background); }
table tbody tr:hover{ --body-row-background:#eee; }
table tbody tr.v-enter-from:nth-child(odd){ transform:translateX(100%) scaleY(0); opacity:0; }
table tbody tr.v-enter-from:nth-child(even){ transform:translateX(-100%) scaleY(0); opacity:0; }
table tbody tr.v-enter-to{ transform:translateX(0) scaleY(1); opacity:1; }
table tbody tr.v-enter-active,table tbody tr.v-move{ transition:transform 0.6s ease,opacity 0.6s ease; }
table tbody tr.v-leave-active{ display:none; }
table textarea{
  display:block;
  width:100%;
  margin:5px 0;
  padding:0 5px;
  border:none;
  background-color:transparent;
  box-shadow:none;
}
table textarea:focus{ box-shadow:none; }

table.scrollable{ display:flex; flex-direction:column; }
table.scrollable tbody{ flex:1; overflow-y:scroll; }
table.scrollable thead tr,
table.scrollable tbody tr{ display:table; table-layout:fixed; width:100%; }