* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-user-select:none;
  user-select:none;
}
html,
body {
  padding: 0px;
  margin: 0px;
  background-color: #efeff5;
  box-sizing: border-box;
  font-size: 14px;
  line-height: 14px;
  font-family: "Microsoft YaHei";
  color: #222222;
  width: 100%;
  height: 100%;
}
.default {
  --text-color: #c2c4cd;
  --barbg: #21242c;
  --barcolor: #d7d8dc;
  --scrolltrack-color: #15171e;
  --strollthumb-color: #4e515d;
  --boxborder: #000;
  --border: #1e2129;
  --div-border: #000;
  --divbg: #15171e;
  --inputbg: #2e333d;
  --input-color: #fff;
  --input-placeholder-color: #fff;
  --input-border-color: transparent;
  --table-border-color: #1e2129;
}
.white {
  --text-color: #222;
  --barbg: #f5f6f8;
  --barcolor: #d7d8dc;
  --scrolltrack-color: #fff;
  --strollthumb-color: #aaa;
  --boxborder: #d9dbe2;
  --border: #f4f6fa;
  --div-border: rgb(217,219,226);
  --divbg: #fff;
  --inputbg: #fff;
  --input-color: #222222;
  --input-placeholder-color: #222;
  --input-border-color: #D9DBE2;
  --table-border-color: #ccc;
}
#app {
  width: 100%;
  height: 100%;
  position: fixed;
  overflow: auto;
}
.white {
  color: #222;
  background-color: #efeff5;
}
.default {
	color: #e8ebf2;
  background-color: #0f0f12;
}
.icon-close{
  font-style: normal;
  cursor: pointer;
}
.icon-close:before {
  content: "\2715";
}
.left{
	width: 490px;
  border: 1px solid var(--div-border);
  background-color: var(--divbg);
	position: absolute;
	left: 0px;
	top: 0px;
}
.right{
	position: absolute;
	left: 500px;
	top: 0px;
  width: calc(100% - 500px);
	min-width: 500px;
  background-color: var(--divbg);
}
input {
  outline: none;
  border: 1px solid var(--input-border-color);
  background-color: var(--inputbg);
  color: var(--input-color);
}
input::-webkit-input-placeholder {
  color: var(--input-placeholder-color);
}
input:focus{
  border: 1px solid #42A7FF!important;
  border-radius: 2px;
}

select {
  outline: none;
  appearance:none;
  -webkit-appearance:none;
  background:  url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAfUlEQVQoU2NkIAAYpy3YkMj4j4ENm7r/TAy/GEES0xds2M3AwOCCpmhPZkKAK1jBtLkb1RmZ/59nYGDghCr6/v8vo2FWsv9NsAKwKfM3JjEw/p8L5vxnTM5M9J8HYsIVgBUt3AhWkBnvnwzTiKKgb9UqsBVFYWHfsSrA5hMATrkiUEWgrpYAAAAASUVORK5CYII=') no-repeat 84px center transparent;
  padding: 4px 8px;
  border: 1px solid var(--input-border-color);
  background-color: var(--inputbg);
  color: var(--input-color);
}
select:focus {
  border: 1px solid #42A7FF;
  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAIBAMAAAA2IaO4AAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAIVBMVEUAAACOqqqXobGXn7GWnbGXoLCXoLCWoLCXnrCXoLD///9drvDTAAAACXRSTlMACZ1iJ/a7YWcR3zykAAAAAWJLR0QKaND0VgAAAAd0SU1FB+UGFwIXEaRkyh0AAAAnSURBVAjXY2AAA0YBIMGkACQsJzMwsEROdWBgmzkzgaGio6MdrAAATtQF2ZPNYIMAAAAldEVYdGRhdGU6Y3JlYXRlADIwMjEtMDYtMjJUMTg6MjM6MTcrMDg6MDBtGpqjAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDIxLTA2LTIyVDE4OjIzOjE3KzA4OjAwHEciHwAAAABJRU5ErkJggg==') no-repeat 84px center transparent;
  border-radius: 2px;
}
option {
  background-color: var(--inputbg);
}
input[type="date"] {
  position: relative;
}
input[type="date"]::-webkit-calendar-picker-indicator {
  display: inline-block;
  width: 20px;
  height: 100%;
  position: absolute;
  right: 0px;
  background: transparent;
  opacity: 0;
  z-index: 10;
}
input[type="date"]::after {
  display: inline-block;
  top: 0px;
  padding: 0;
  width: 15px;
  height: 100%;
  position: absolute;
  right: 5px;
  background: #fff;
  content: '';
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAABAklEQVQoU42QPU7DQBCF38wiJFpOQEXBIfhpQUI2BWW0IATy5gJ0cQ6BnaSxg5QWGyTSQs5CTY2E7B20S4JshEym2X0z881oHmEZk+nDbiV0aHQ4WeXcm2blrRXM+pfBm9OUZoW2wI4TTNhj4ucmYMWeQJBEF+Gr66U0L19EKGEWF+eu2ARAMMJyRzURiAYegMhQlBKqa2o2K6WkQgVgA772A7RGdgu/QTHH173TRVdrcv90QNbG3zewjU3vbOH+kQ6OvDvTcvbx/nm1tb05d7lR/rgvkGEL6NrwJ5DmpUQ68IcneTE2OrxZ5X4BHJt/bmgBzta1jPK2ZoUG4XgtQDD/AoM3lW3XbHlDAAAAAElFTkSuQmCC") center center no-repeat;
}

input[type=date]::-webkit-inner-spin-button { 
  visibility: hidden;
}
input[type="date"]::-webkit-clear-button{
  display:none;
} 
/* 滚动条 */
::-webkit-scrollbar {
  position: fixed;
  z-index: 99999999;
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-corner {
  display: none;
}
::-webkit-scrollbar-track {
  background-color: var(--scrolltrack-color);
}
::-webkit-scrollbar-thumb {
  background-color: var(--strollthumb-color);
  border-radius: 4px;
}
::-webkit-scrollbar-button:vertical:single-button:start {
  border: 4px solid;
  border-color: var(--scrolltrack-color) var(--scrolltrack-color)
    var(--strollthumb-color) var(--scrolltrack-color);
}
::-webkit-scrollbar-button:vertical:single-button:end {
  border: 4px solid;
  border-color: var(--strollthumb-color) var(--scrolltrack-color)
    var(--scrolltrack-color) var(--scrolltrack-color);
}
::-webkit-scrollbar-button:horizontal:single-button:start {
  border: 4px solid;
  border-color: var(--scrolltrack-color) var(--strollthumb-color)
    var(--scrolltrack-color) var(--scrolltrack-color);
}
::-webkit-scrollbar-button:horizontal:single-button:end {
  border: 4px solid;
  border-color: var(--scrolltrack-color) var(--scrolltrack-color)
    var(--scrolltrack-color) var(--strollthumb-color);
}
