* {
  box-sizing: border-box;
  outline: none;
}
html,
body {
  -webkit-tap-highlight-color: transparent;
  margin: 0;
  padding: 0;
  font-size: var(--font-size);
}
html,
body,
#app {
  height: 100%;
}
#app {
  font-family: Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: var(--text-color-dark);
}
.clearfix {
  display: inline-block;
}
.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}
a {
  text-decoration: none;
  color: inherit;
}
svg,
svg + * {
  vertical-align: middle;
}
.fa-icon {
  width: auto;
  height: 1em;
  max-width: 100%;
  max-height: 100%;
}
.el-submenu__title > i {
  color: #ddd;
  width: 14px !important;
  height: 14px;
  font-size: 14px !important;
}
.el-submenu__title > svg {
  color: #ddd;
  margin-right: 5px;
  width: 14px !important;
  height: 14px;
  font-size: 14px !important;
}
.sp-left-side .title-icon {
  width: 14px;
  height: 14px;
  margin-right: 5px;
}
.sp-check-tree .el-tree-node__content>.el-tree-node__expand-icon {
  display: none;
}
.el-menu {
  border-right: none;
}
.el-submenu.is-opened > .el-submenu__title {
  background-color: var(--bg-color-dark) !important;
}
.el-menu-item {
  background-color: var(--bg-color-dark) !important;
  border-left: 4px solid transparent;
  box-sizing: border-box;
}
.el-menu-item.is-active {
  border-left-color: var(--bg-color-light);
}
.el-submenu__title:hover {
  background-color: var(--bg-color-dark) !important;
}
input:disabled,
select:disabled,
textarea:disabled,
select:disabled,
button:disabled:not(.btn-prev):not(.btn-next),
.el-button.is-disabled {
  color: var(--text-color) !important;
  background: var(--bg-color-light) !important;
  border-color: #e4e7ed !important;
}
.el-checkbox__input.is-disabled + span.el-checkbox__label {
  color: var(--text-color) !important;
}
.el-dropdown-menu {
  max-height: 30rem;
  overflow-y: auto;
}
.sp-header {
  background: var(--bg-color);
  color: var(--text-color-light);
  height: var(--header-height);
  line-height: var(--header-height);
}
.sp-header-col {
  float: right;
  vertical-align: top;
}
.sp-header-col:hover {
  background: var(--bg-color-dark);
}
.sp-header-col .el-dropdown > * {
  color: var(--text-color-light);
  padding: 0 var(--card-spacing);
}
.sp-header .el-select input {
  background: transparent;
  color: var(--text-color-light);
  border: none;
}
.sp-left-side,
.sp-right-side {
  background: var(--bg-color);
  color: var(--text-color-light);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.sp-logo {
  background-position: center;
  background-repeat: no-repeat;
  background-size: auto calc(var(--header-height) / 2);
  height: var(--logo-height);
}
.sp-cursor-pointer {
  cursor: pointer;
  user-select: none;
}
.sp-breadcrumb-container {
  margin-bottom: var(--card-spacing);
  text-align: left;
}
.sp-breadcrumb-container > * {
  display: inline-block;
  margin-right: 5px;
  height: var(--breadcrumb-height);
  line-height: var(--breadcrumb-height);
  vertical-align: middle;
}
.sp-right-side article {
  background: var(--bg-color-light);
  color: var(--text-color-dark);
  padding: var(--card-spacing);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  height: 100%;
}
.sp-card {
  background: var(--bg-card);
  border-radius: var(--card-border-radius);
  overflow: hidden;
  padding: var(--card-spacing);
  margin-bottom: var(--card-spacing);
}
.sp-card:empty {
  display: none;
}
.sp-card h1 {
  margin: 0.5rem 0 2rem;
  font-size: 20px;
  font-weight: 400;
}
.sp-card .el-tabs__header {
  margin-bottom: 0;
}
.el-dialog .sp-card {
  padding: 0;
}
.sp-tag {
  display: inline-block;
  padding: 0 0.5rem;
  height: 23px;
  line-height: 23px;
  border-radius: var(--tag-border-radius);
  font-size: var(--tag-font-size);
  color: var(--text-color-light);
  vertical-align: middle;
}
.sp-bg-primary {
  background-color: var(--color-primary);
}
.sp-bg-success {
  background-color: var(--color-success);
}
.sp-bg-warning {
  background-color: var(--color-warning);
}
.sp-bg-danger {
  background-color: var(--color-danger);
}
.sp-bg-info {
  background-color: var(--color-info);
}
.sp-bg-disabled {
  background-color: var(--color-disabled);
}
.sp-color-primary {
  color: var(--color-primary);
}
.sp-color-success {
  color: var(--color-success);
}
.sp-color-warning {
  color: var(--color-warning);
}
.sp-color-danger {
  color: var(--color-danger);
}
.sp-color-info {
  color: var(--color-info);
}
.sp-color-disabled {
  color: var(--color-disabled);
}
.sp-hooks button {
  margin-bottom: var(--card-spacing);
}
.sp-column-edit-button {
  position: absolute;
  top: 1px;
  right: -40px;
  padding: 0;
  width: 40px;
  height: 28px;
  line-height: 28px;
  text-align: center;
  border-top: none;
  border-right: none;
  border-radius: 0;
  border-bottom-left-radius: 5px;
  opacity: 0;
  transform: translateX(0);
  transition: opacity 0.3s, transform, 0.3s;
  z-index: 5;
}
.el-table:hover + .sp-column-edit-button,
.sp-column-edit-button:hover {
  opacity: 1;
  transform: translateX(-40px);
}
.sp-check-tree .el-tree-node__content {
  padding-left: 0.5em !important;
  padding-right: 0.5em;
}
.sp-nested-view h1,
.sp-parallel-view h1 {
  margin: 1rem 0;
  font-size: 20px;
  font-weight: 400;
}
.sp-card .el-form {
  margin-bottom: calc(1px - var(--card-spacing) - 1px);
}
.sp-card .el-form + .el-pagination {
  margin-top: calc(2 * var(--card-spacing));
}