label {
  font-weight: normal;
}
em {
  font-style: normal;
  background-color: #fcf8e3;
  color: #8a6d3b;
}

.pagination {
  margin-top: 0;
  margin-bottom: 0;
}
.pagination-label {
  display: inline-block;
  vertical-align: top;
  padding-top: 7px;
  margin-left: 15px;
}

/* bootstrap 4 外边距 */
.m-0 { margin: 0 !important; }
.mt-0, .my-0 { margin-top: 0 !important; }
.mr-0, .mx-0 { margin-right: 0 !important; }
.mb-0, .my-0 { margin-bottom: 0 !important; }
.ml-0, .mx-0 { margin-left: 0 !important; }

.m-1 { margin: 5px !important; }
.mt-1, .my-1 { margin-top: 5px !important; }
.mr-1, .mx-1 { margin-right: 5px !important; }
.mb-1, .my-1 { margin-bottom: 5px !important; }
.ml-1, .mx-1 { margin-left: 5px !important; }

.m-2 { margin: 10px !important; }
.mt-2, .my-2 { margin-top: 10px !important; }
.mr-2, .mx-2 { margin-right: 10px !important; }
.mb-2, .my-2 { margin-bottom: 10px !important; }
.ml-2, .mx-2 { margin-left: 10px !important; }

.m-3, .m-a { margin: 15px !important; }
.mt-3, .my-3, .m-t { margin-top: 15px !important; }
.mr-3, .mx-3, .m-r { margin-right: 15px !important; }
.mb-3, .my-3, .m-b { margin-bottom: 15px !important; }
.ml-3, .mx-3, .m-l { margin-left: 15px !important; }
.mx-auto { margin-right: auto !important; margin-left: auto !important; }

/* bootstrap 4 内边距 */
.p-0 { padding: 0 !important; }
.pt-0, .py-0 { padding-top: 0 !important; }
.pr-0, .px-0 { padding-right: 0 !important; }
.pb-0, .py-0 { padding-bottom: 0 !important; }
.pl-0, .px-0 { padding-left: 0 !important; }

.p-1 { padding: 5px !important; }
.pt-1, .py-1 { padding-top: 5px !important; }
.pr-1, .px-1 { padding-right: 5px !important; }
.pb-1, .py-1 { padding-bottom: 5px !important; }
.pl-1, .px-1 { padding-left: 5px !important; }

.p-2 { padding: 10px !important; }
.pt-2, .py-2 { padding-top: 10px !important; }
.pr-2, .px-2 { padding-right: 10px !important; }
.pb-2, .py-2 { padding-bottom: 10px !important; }
.pl-2, .px-2 { padding-left: 10px !important; }

.p-3, .p-a { padding: 15px !important; }
.pt-3, .py-3, .p-t { padding-top: 15px !important; }
.pr-3, .px-3, .p-r { padding-right: 15px !important; }
.pb-3, .py-3, .p-b { padding-bottom: 15px !important; }
.pl-3, .px-3, .p-l { padding-left: 15px !important; }

/* 标准宽度 */
.w-25 { width: 25%; }
.w-33 { width: 33.333%; }
.w-35 { width: 35%; }
.w-50 { width: 50%; }
.w-65 { width: 65%; }
.w-66 { width: 66.666%; }
.w-75 { width: 75%; }
.w-100, .w-full { width: 100%; }
.h-100, .h-full { height: 100%; }

.text-xs { font-size: 12px; }
.text-sm { font-size: 14px; }
.text-md { font-size: 16px; }
.text-lg { font-size: 20px; }

.deprecated { color: #777; text-decoration: line-through; }
.static { padding-top: 7px; }
.form-invalid { padding-top: 7px; color: #a94442; }
.row-wrapper { padding-left: 15px; padding-right: 15px; }

/* -------------------------------- 常用容器 -------------------------------- */
.body {
  background-color: #efeff4;
}
.wrapper {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  z-index: 10;
  box-sizing: border-box;
}
/* 子页面，使用 fixed 可让超出页面的部分不显示 */
.page {
  position: fixed;
  z-index: 200;
  left: 100%;
  top: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  overflow: auto;
  background-color: #f7f7f7;
  -webkit-transition: left 0.2s ease-out, top 0.2s ease-out;
          transition: left 0.2s ease-out, top 0.2s ease-out;
}
.page.in {
  left: 0;
}
.page-shadow {
  border-left: 1px solid #ccc;
  box-shadow: -3px 0 9px 0 rgba(0, 0, 0, .3);
}
.content {
  box-sizing: border-box;
}
.wrapper > .content {
  min-height: 100%;
}

/* 弹性布局容器 */
.flex-hbox, .hbox {
  display: flex;
}
.flex-vbox, .vbox {
  display: flex;
  flex-direction: column;
}
.flex-grow {
  flex-grow: 1;
}
.flex-shrink {
  flex-shrink: 0;
}

/* 网页头部 */
.header {
  width: 100%;
  height: 50px;
  line-height: 50px;
}
.header .right {
  float: right;
}
.header a:hover, .header a:focus {
  text-decoration: none;
}
.header .close {
  color: #97a0b3;
  padding: 2px 7px;
  margin-top: 13px;
  opacity: 0.8;
  border-radius: 4px;
}
.header .close:hover {
  color: #606c84;
  background-color: #eee;
}
.header-logo {
  height: 50px;
  float: left;
  text-align: center;
  font-size: 20px;
  font-weight: bold;
}
.header-logo img {
  max-height: 48px;
}
.header-nav {
  padding-left: 15px;
}

/* 子页面的标题栏 */
.header-underline {
  font-size: 16px;
  padding-left: 15px;
  padding-right: 15px;
  border-bottom: 1px solid #efeff4;
}
.page-footer {
  border-top: 1px solid #efeff4;
  padding-top: 15px;
  padding-bottom: 15px;
}

/* 单行内容 */
.field {
  display: block;
  position: relative;
  padding: 10px 15px;
  clear: both;
}
.field label, .field .label {
  color: #777;
}
.field .right {
  float: right;
}
.field .left {
  float: left;
}

/* 绝对定位 */
.d-fixed {
  position: fixed;
}
.d-base {
  position: relative;
}
.d-layer {
  position: absolute;
  z-index: 1;
  width: 100%;
}

/* 内联控件 */
.d-inline {
  width: auto;
  display: inline;
}
.d-inline-block {
  display: inline-block;
}
.d-block {
  display: block;
}
.d-inline-group .form-control {
  width: auto;
  display: inline-block;
}
/* 单元格居中 */
.d-table {
  display: table;
  width: 100%;
  height: 100%;
}
.d-cell {
  display: table-cell;
  vertical-align: middle;
}
.d-none {
  display: none;
}

/* 等比例容器 */
.scale-box {
  position: relative;
  display: block;
  height: 0;
  padding: 0;
  overflow: hidden;
}
.scale-box .scale-item {
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.scale-2by1 { padding-bottom: 50%; }
.scale-16by9 { padding-bottom: 56.25%; }
.scale-8by5 { padding-bottom: 62.5%; }
.scale-3by2 { padding-bottom: 66.666%; }
.scale-4by3 { padding-bottom: 75%; }
.scale-5by4 { padding-bottom: 80%; }
.scale-1by1 { padding-bottom: 100%; }
.scale-5by8 { padding-bottom: 160%; }

/* 行列布局 */
.jp-row {
  list-style-type: none;
  padding-left: 0;
}
.jp-row:after {
  display: table;
  content: " ";
}
.jp-row:after {
  clear: both;
}
.jp-column {
  float: left;
}
.jp-columns-1 .jp-column { width: 100%; }
.jp-columns-2 .jp-column { width: 50%; }
.jp-columns-3 .jp-column { width: 33.333%; }
.jp-columns-4 .jp-column { width: 25%; }
.jp-columns-5 .jp-column { width: 20%; }
.jp-columns-6 .jp-column { width: 16.666%; }
.jp-columns-7 .jp-column { width: 14.285%; }
.jp-columns-8 .jp-column { width: 12.5%; }
.jp-columns-9 .jp-column { width: 11.111%; }
.jp-columns-10 .jp-column { width: 10%; }
.jp-columns-12 .jp-column { width: 8.333%; }
.jp-columns-15 .jp-column { width: 6.666%; }
.jp-columns-16 .jp-column { width: 6.25%; }
.jp-columns-20 .jp-column { width: 5%; }

.jp-row-x, .jp-row-xy {
  margin-left: -7px;
  margin-right: -7px;
}
.jp-row-x .jp-column, .jp-row-xy .jp-column {
  padding-left: 7px;
  padding-right: 7px;
}
.jp-row-y .jp-column, .jp-row-xy .jp-column {
  padding-bottom: 15px;
}
.jp-row-group {
  background-color: #f5f5f5;
  padding: 15px 15px 0 15px;
}

/* 方块布局，和 jp-row 嵌套使用 */
.jp-tile {
  list-style-type: none;
  padding-left: 0;
}
.jp-tile:after {
  display: table;
  content: " ";
}
.jp-tile:after {
  clear: both;
}
.jp-tile li {
  float: left;
}

/* 列表布局 */
.jp-list {
  list-style-type: none;
  padding-left: 0;
}
.jp-list li {
  padding: 7px 15px;
}

/* 工具栏 */
.toolbar {
  position: relative;
}
.file-group {
  display: inline-block;
}

/* ---------------------------- jpart自定义样式 ---------------------------- */
.data-options {
  display: none !important;
}
/* toggle 操作组件 */
.toggle-group .toggle-success, .toggle-group .toggle-alert {
  display: none;
}
.border {
  border: 1px solid #ccc;
}
.border-top {
  border-top: 1px solid #ccc;
}
.border-inset {
  border: 2px inset #ddd;
}
.drag-outline {
  position: absolute;
  z-index: 1199;
  border: 1px dotted #0000ff;
  cursor: move;
}

/* 显示垂直滚动条，以防 el-table 滚动条影响页面宽度 */
.scroll-y {
  overflow-x: hidden;
  overflow-y: scroll;
}
.scroll-hidden {
  overflow: hidden;
}
/* 溢出字符 */
.ellipsis-one {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.ellipsis-two {
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* 圆角边框 */
.round {
  border-radius: 4px;
}
.round-top {
  border-radius: 4px 4px 0 0;
}
.round-bottom {
  border-radius: 0 0 4px 4px;
}

/* ---------------------------------- PC组件 ---------------------------------- */
/* 无信息提示框 */
.no-data-info {
  font-size: 18px;
  text-align: center;
  padding-top: 50px;
  padding-bottom: 50px;
  vertical-align: middle;
}
.pagination-label {
  display: inline-block;
  vertical-align: top;
  padding-top: 7px;
  margin-left: 15px;
}

.toggle.open .toggle-rotate-90 {
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}
.toggle.open .toggle-rotate-n90 {
  -webkit-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);
}

/* 显示对话框 */
.modal.in {
  display: block;
}

/* 面板容器 */
.panel-wrapper{
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 15px;
  -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.05);
  box-shadow: 0 1px 1px rgba(0,0,0,0.05);
}
/* 简单的面板 */
.panel-flat {
  border: 1px solid #ddd;
}
.panel-flat > .panel-heading {
  color: #333;
  border-color: #ddd;
}
/* 无标题面板 */
.panel-well {
  border-color: #ddd;
  padding: 15px;
}
.panel-heading .btn-tool {
  color: #97a0b3;
  background-color: transparent;
  padding: 1px 7px;
}
.panel-heading .btn-tool:hover {
  color: #606c84;
  background-color: #eee;
}
/* 面板标题栏侧面显示色调 */
.panel-emphasis {
  border: 1px solid #ddd;
}
.panel-emphasis > .panel-heading {
  color: #333;
  border-color: #ddd;
  padding-left: 0;
}
.panel-emphasis .panel-title {
  border-left: 3px solid #3c8dbc;
  padding-left: 12px;
}
/* 弹出的面板，跟 dropdown-menu 的 z-index 一样 */
.panel-popup {
  position: absolute;
  z-index: 1055;
  display: none;
}

/* 导航栏顶部添加active状态边框 */
.nav-emphasis.nav-tabs a {
  border-top: 3px solid transparent;
}
.nav-emphasis.nav-tabs > li.active > a {
  border-top: 3px solid #3c8dbc;
}
/*.nav-tabs.nav-emphasis > li.active:first-child > a {
  border-left-width: 0;
}*/
/* 导航栏底部添加active下划线 */
.nav-underline.nav-tabs > li > a {
  border-width: 0 0 3px 0 !important;
  border-bottom-style: solid;
  border-bottom-color: transparent;
}
.nav-underline.nav-tabs > li.active > a {
  border-bottom-color: #3c8dbc;
}
.nav-underline.nav-tabs > li.active > a,
.nav-underline.nav-tabs > li.active > a:hover,
.nav-underline.nav-tabs > li.active > a:focus {
  background-color: transparent;
}
/* 导航栏工具按钮 */
.nav-tabs .pull-right {
  margin-top: 7px;
}
.nav-tabs .close {
  color: #97a0b3;
  padding: 2px 7px;
  opacity: 0.8;
  border-radius: 4px;
}
.nav-tabs .close:hover {
  color: #606c84;
  background-color: #e7e7e7;
}
.nav-header > li > a {
  line-height: 30px;
  font-size: 16px; 
}
.nav-header .right {
  float: right;
  margin-top: 13px;
  margin-right: 15px;
}

/* tab 圆角边框和阴影 */
.tab-outline {
  border: 1px solid #ddd;
  border-radius: 4px;
  -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.05);
  box-shadow: 0 1px 1px rgba(0,0,0,0.05);
}
/* tab 属性页页头 */
.tab-header {
  border-bottom: 1px solid #ddd;
  border-radius: 4px 4px 0 0;
}
.tab-header .nav-tabs {
  border-bottom-width: 0;
}
/* 表头与属性页分开 */
.tab-separator {
  padding-top: 5px;
  padding-left: 15px;
  background-color: #f7f7f9;
}
/* 卡片式标签页 */
.tab-card {
  background-color: #f7f7f9;
}
.tab-card .nav-tabs > li > a, .tab-card .nav-tabs > li.active > a {
  border-top-color: transparent;
}
.tab-card .nav-tabs > li.active:first-child > a {
  border-left-color: transparent;
}

/* ---------------------------------- 图标组件 ---------------------------------- */
/* 常用文件图标 */
.jp-icon {
  line-height: 64px;
  padding: 24px 32px;
  background-image: url("../img/file64.png");
}
.jp-icon-dat { background-position: 0 0; }
.jp-icon-jpg { background-position: -64px 0; }
.jp-icon-png { background-position: -128px 0; }
.jp-icon-zip { background-position: -192px 0; }
.jp-icon-rar { background-position: -256px 0; }
.jp-icon-dir { background-position: -320px 0; }
.jp-icon-doc { background-position: 0 -64px; }
.jp-icon-xls { background-position: -64px -64px; }
.jp-icon-txt { background-position: -128px -64px; }
.jp-icon-pdf { background-position: -192px -64px; }
.jp-icon-mov { background-position: -256px -64px; }
.jp-icon-xml { background-position: -320px -64px; }

.jp-icon-xs .jp-icon {
  line-height: 32px;
  padding: 8px 16px;
  background-image: url("../img/file.png");
}
.jp-icon-xs .jp-icon-jpg { background-position: -32px 0; }
.jp-icon-xs .jp-icon-png { background-position: -64px 0; }
.jp-icon-xs .jp-icon-zip { background-position: -96px 0; }
.jp-icon-xs .jp-icon-rar { background-position: -128px 0; }
.jp-icon-xs .jp-icon-dir { background-position: -160px 0; }
.jp-icon-xs .jp-icon-doc { background-position: 0 -32px; }
.jp-icon-xs .jp-icon-xls { background-position: -32px -32px; }
.jp-icon-xs .jp-icon-txt { background-position: -64px -32px; }
.jp-icon-xs .jp-icon-pdf { background-position: -96px -32px; }
.jp-icon-xs .jp-icon-mov { background-position: -128px -32px; }
.jp-icon-xs .jp-icon-xml { background-position: -160px -32px; }

/* ---------------------------------- 图片组件 ---------------------------------- */
/* 封面图，用 background-image 样式设置图片，用容器来调节图片大小 */
.figure {
  display: block;
  overflow: hidden;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
.figure-grey {
  background-color: #ddd;
}
/* 图片预览 */
.figure-info {
  display: none;
}
.figure-no-preview .figure {
  display: none;
}
.figure-no-preview .figure-info {
  display: block;
}

/* 图片大小 */
.figure-xs { width: 24px; height: 24px; }
.figure-sm { width: 50px; height: 50px; }
.figure-md { width: 80px; height: 80px; }
.figure-lg { width: 100px; height: 100px; }

/* 图片工具框，适用于复杂图片编辑 */
.figure-box {
  position: relative;
  display: block;
  height: 0;
  padding-bottom: 100%;
  overflow: hidden;
}
.figure-box .figure-item {
  position: absolute;
  z-index: 10;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
/* 删除按钮 */
.figure-box .jp-remove {
  display: none;
  position: absolute;
  z-index: 11;
  left: 0;
  top: 0;
  width: 100%;
  text-align: right;
  padding: 5px 15px 5px 0;
  background-color: #333;
  color: white;
  opacity: 0.75; filter: alpha(opacity=75);
}
.figure-box:hover .jp-remove {
  display: block;
}
.figure-box .jp-remove:hover {
  color: #d9534f;
  opacity: 0.9; filter: alpha(opacity=90);
}
/* 选择框按钮 */
.figure-box .jp-checkbox {
  display: none;
  position: absolute;
  z-index: 12;
  right: 0;
  bottom: 0;
  width: 24px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  color: white;
  background-color: #ccc;
  border-radius: 2px;
}
.figure-box:hover .jp-checkbox {
  display: block;
}
.figure-box .active .jp-checkbox, .figure-box.active .jp-checkbox, .figure-box .active.jp-checkbox {
  display: block;
  background-color: #0074d9;
}
/* 图片消息 */
.figure-box .d-cell {
  text-align: center;
  padding-left: 5px;
  padding-right: 5px;
}
/* 图片状态 */
.figure-box .progress {
  margin-top: 5px;
  margin-bottom: 0;
}
.figure-box .progress-bar {
  min-width: 20px;
}
.figure-box p {
  margin-top: 5px;
  margin-bottom: 0;
}
/* 上传图标 */
.figure-upload {
  border: 1px dashed #ddd;
}
.figure-upload a {
  color: #ddd;
}
.figure-upload a:hover {
  color: #aaa;
  text-decoration: none;
}

/* 图注 */
.jp-legend {
  font-size: 14px;
  font-weight: normal;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.jp-legend-small .jp-legend {
  font-size: 13px;
}
.figure-nolegend .jp-legend {
  display: none;
}

/* 缩略图居中显示，内部放置 img 标签，需要设置容器的width, height */
.jp-thumb {
  text-align: center;
}
.jp-thumb b {
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
.jp-thumb img {
  max-height: 100%;
  max-width: 100%;
  height: auto;
}

/* 方块图形，figure-box 和 figure 的简化版 */
.img-square {
  display: block;
  height: 0;
  padding-bottom: 100%;
  overflow: hidden;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

/* 圆环进度条 */
.progress-circle {
  position: relative;
}
.progress-stroke {
  transform-origin: center;
  transform: rotate(-90deg);
  transition: stroke-dasharray 0.3s ease-in;
}
.progress-inner {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  transform: translate(0, -50%);
  text-align: center;
}

/* 目录树 */
.tree {
  list-style: none;
  margin-left: 0;
  padding-left: 0;
  overflow-x: auto;
}
.tree a:hover, .tree a:focus {
  text-decoration: none;
}
.tree-item {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.tree-item > a, .tree-header {
  display: block;
  padding-left: 15px;
  padding-right: 15px;
  line-height: 40px;
}
.tree-icon {
  display: inline-block;
  width: 20px;
}
.tree-menu {
  list-style: none;
  padding-left: 20px;
  display: none;
}
.tree-menu a {
  line-height: 30px;
}
.toggle.open > .tree-menu {
  display: block;
}

/* 侧边栏列表 */
.side-list {
  list-style-type: none;
  padding-left: 0;
}
.side-list li, .side-header {
  padding: 10px 15px;
}
.side-header {
  margin-top: 10px;
  color: #4b646f;
}

/* 树编辑器 jpart.Tree(ename) */
.jp-tree {
  list-style: none;
  margin-left: 0;
  padding-left: 0;
  overflow-x: auto;
  line-height: 24px;
}
.jp-tree ul {
  list-style: none;
  margin-left: 16px;
  padding-left: 0;
}
.jp-tree li {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.jp-tree i {
  padding-right: 16px;
}
.jp-tree b {
  padding-right: 16px;
  background: url("../img/tree_page.gif") no-repeat;
}
.jp-tree .jp-tree-node > i {
  cursor: default;
  background: url("../img/tree_open.gif") no-repeat;
}
.jp-tree .jp-tree-node > b {
  background: url("../img/folder_open.gif") no-repeat;
}
.jp-tree .jp-tree-node.jp-close > i {
  background: url("../img/tree_close.gif") no-repeat;
}
.jp-tree .jp-tree-node.jp-close > b {
  background: url("../img/folder.gif") no-repeat;
}
.jp-tree span {
  margin-left: 2px;
  cursor: pointer;
}
.jp-tree .active {
  color: white;
  background-color: #428bca;
}
.jp-tree .jp-close ul {
  display: none;
}
.jp-tree .jp-drop {
  background: url("../img/arrow.gif") no-repeat;
  padding-left: 16px;
  color: white;
  background-color: #d9534f;
}

/* 排序方式 */
.jp-sort {
  display: inline-block;
  color: #555;
}
.jp-sort.active, .jp-sort:hover {
  color: #3074af;
}
.jp-sort b {
  width: 7px;
  height: 10px;
  margin-left: 5px;
  display: inline-block;
  background: url("../img/sort.png") no-repeat;
}
.jp-sort.up b { background-position: 0px 0px; }
.jp-sort.up.active b { background-position: -7px 0px; }
.jp-sort.down b { background-position: 0px -13px; }
.jp-sort.down.active b { background-position: -7px -13px; }
.jp-sort.both b { background-position: 0px -26px; }
.jp-sort.both.active b { background-position: -7px -26px; }
.jp-sort.both.active.both-down b { background-position: -14px -26px; }

/* 视频播放器 */
.jp-player-xs { width: 100%; height: 200px; }
.jp-player-sm { width: 100%; height: 350px; }
.jp-player-md { width: 100%; height: 500px; }
.jp-player-lg { width: 100%; height: 650px; }
@media (max-width: 767px) {
  .jp-player-xs { height: 100px; }
  .jp-player-sm { height: 150px; }
  .jp-player-md { height: 250px; }
  .jp-player-lg { height: 300px; }
}

/* 带图标的输入组件 */
.input-icon { position: relative; }
.input-icon i { position: absolute; width: 16px; top: 10px; left: 10px; z-index: 10; text-align: center; color: #ccc; }
.input-icon .form-control { padding-left: 33px; }
.has-success .input-icon i { color: #3c763d; }

/* 圆形图标 */
.icon-circle {
  display: block;
  text-align: center;
  vertical-align: middle;
  border-style: solid;
  border-radius: 50%;
}
.icon-circle b {
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}


/* 等待指示器, bootstrap 没有 */
.indicator {
  -webkit-transition: opacity .2s linear;
          transition: opacity .2s linear;
}
.indicator-wrapper {
  top: 50%;
  left: 50%;
  position: fixed;
  z-index: 1000;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  box-sizing: border-box;
  text-align: center;
  padding: 20px;
}
.indicator-spin {
  display: inline-block;
  text-align: center;
}
.spinner-snake {
  height: 32px;
  width: 32px;
  -webkit-animation: spinner-rotate 0.8s infinite linear;
          animation: spinner-rotate 0.8s infinite linear;
  border: 4px solid transparent;
  border-radius: 50%;
}
@-webkit-keyframes spinner-rotate {
0% {
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
}
100% {
  -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
}
}
@keyframes spinner-rotate {
0% {
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
}
100% {
  -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
}
}
.indicator-text {
  display: block;
  color: #fff;
  text-align: center;
  margin-top: 10px;
  font-size: 16px;
}
.indicator-mask {
  position: fixed;
  z-index: 900;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  background: transparent;
}

/* 侧边栏 sidebar 组件 */
.vbox .content-main {
  display: flex;
  flex-grow: 1;
}
.vbox .sidebar {
  flex-shrink: 0;
}
.vbox .side-main {
  flex-grow: 1;
  padding: 10px 15px;
}
.user-panel {
  margin: 15px 15px;
  clear: both;
}
.user-panel .img-circle {
  max-width: 45px;
  margin-right: 15px;
}
.user-panel h4 {
  font-size: 14px;
}
.sidebar-form {
  margin: 10px 15px;
}

/* 简单布局风格 */
.header-logo {
  width: 190px;
  color: white;
  background-color: #2c3b41;
}
.header-nav {
  margin-left: 190px;
  background-color: white;
}
.header-nav a {
  margin-right: 15px;
}
.header-nav a.active {
  color: black;
  font-weight: bold;
}
.sidebar {
  width: 190px;
  color: #ccc;
  background-color: #222d32;
}

/* 深色目录树颜色主题，兼容 AdminLTE 颜色 */
.tree-dark .tree-header {
  color: #4b646f;
  background: #1a2226;
}
.tree-dark .tree-item > a {
  color: #8aa4af;
  background-color: #222d32;
}
.tree-dark .tree-item.open > a, .tree-dark .tree-item > a:hover {
  color: white;
}
.tree-dark .tree-item.open {
  background: #1e282c;
  border-left-color: #3c8dbc;
}
.tree-dark .tree-menu {
  background-color: #2c3b41;
}
.tree-dark .tree-menu .active a, .tree-dark .tree-item.active a {
  color: white;
}

/* 列表主题颜色 */
.list-dark li {
  border-left: 3px solid transparent;
}
.list-dark li.active {
  background: #1e282c;
  border-left-color: #3c8dbc;
}
.list-dark li.active a {
  color: white;
}


/* AdminLTE 布局风格 */
.admin-lite .header {
  color: #ccc;
  background-color: #3c8dbc;
}
.admin-lite .header a {
  color: white;
}
.admin-lite .header-logo {
  width: 230px;
  background-color: #367fa9;
}
.admin-lite .header-nav {
  margin-left: 230px;
}
.admin-lite .sidebar {
  width: 230px;
}

/* AdminLTE 目录树菜单 */
.toggle.open > .treeview-menu {
  display: block;
}
.treeview-menu > li {
  margin-left: 23px;
}
.treeview-menu > li.treeview {
  margin-left: 0;
}