/* 全局滚动条 */
::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-thumb {
  cursor: pointer;
  border-radius: 5px;
  background: rgba(0,0,0,.25);
  -webkit-transition: color .2s ease;
  transition: color .2s ease;
}
::-webkit-scrollbar-track {
  background: rgba(0,0,0,.1);
  border-radius: 0;
}

/* 页头下边框线 */
.layui-header{
  border-bottom:1px solid #ddd;
}
/* 页头搜索框样式 */
.component{
  position: absolute;
  width: 250px;
  left: 160px;
  top: 10px;
}
/* 页头logo图片样式 */
.logo {
  position: absolute;
  left: 20px;
  top: 16px;
  color:black;
}
.logo img {
  /*width: 85px;*/
  height: 30px;
}
/* 页头背景 */
.layui-nav{
  background-color:transparent;
}
.layui-header .layui-nav{
  /*position: absolute;*/
  right: 0;
  top: 0;
  padding: 0;
}
.layui-nav .layui-nav-item a{
  color:black;
}
.layui-nav .layui-nav-item a:hover{
  color:black;
}
.project-list{
  margin: 50px 0;
  font-size: 0;
  text-align: center;
  font-weight: 300;
}
/* 首页搜索 */
.mrdoc-search-input{
  width:300px;
  border-radius: 15px
}

.project-item{
  /*float: left;*/
  min-width: 0;
  width: 350px;
  height: 170px;
  /*margin-top: 20px;*/
  /*margin-left: 20px;*/
  margin:10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0,0,0,.055);
}
.project-item:hover{
  box-shadow:4px 4px 5px #ddd;
}

.project-desc{
  overflow:hidden;
  text-overflow:ellipsis; /* 加省略号 */
  white-space:nowrap; /* 强制不换行 */
}

.tooltip {
display: inline;
/*position: relative;*/
z-index: 999;
}

/* Gap filler */
.tooltip-item::after {
content: '';
position: absolute;
width: 360px;
height: 20px;
bottom: 100%;
left: 50%;
pointer-events: none;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}

.tooltip:hover .tooltip-item::after {
pointer-events: auto;
}

/* 文集简介提示工具 */
.tooltip-content {
position: absolute;
z-index: 9999;
/* width: 200px; */
left: 78%;
margin: 0 -60px 20px -150px;
padding:10px;
/* top: 100%; */
text-align: left;
box-shadow: -5px -5px 15px rgba(48,54,61,0.2);
background: #2a3035;
opacity: 0;
cursor: default;
pointer-events: none;
font-size: 0.68em;
line-height: 1.35;
display: block;
color: #fff;
-webkit-transform: translate3d(0,-10px,0);
transform: translate3d(0,-10px,0);
-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
transition: opacity 0.3s, transform 0.3s;
}

.tooltip:hover .tooltip-content {
pointer-events: auto;
opacity: 1;
-webkit-transform: translate3d(0,0,0) rotate3d(0,0,0,0);
transform: translate3d(0,0,0) rotate3d(0,0,0,0);
}

/* 箭头 */
.tooltip-content::after {
content: '';
bottom: 100%; /* 箭头在头部 */
left: 50%;
border: solid transparent;
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: transparent;
border-bottom-color: #2a3035;
border-width: 10px;
/*margin-left: 10px;8*/
}

.index-doc-link{
  color: #999;
}
.index-doc-link:hover{
  color: #333;
}

a.index-add-link{
  color: #999;
  float: right;
  position: absolute;
  right: 10px;
}
a.index-add-link:hover{
  color: #333;
}

.layui-card{
  box-shadow:0 0 0 0;
}
.create-doc-form{
  margin-top: 20px;
  /*margin-bottom: 20px;*/
}
.doc-form-label{
  /*margin-left: 10px;*/
  /*margin-right: 10px;*/
}
/* 文档浏览页 */
body, html {
  height: 100%;
}
.doc{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  box-sizing: border-box;
  min-width: 0;
}
.project-title{
font-size: 20px;
font-weight: 700;
margin:10px 20px 0px 20px;
text-align: center;
}
.doc-summary {
  color: #333;
  position: fixed;
  /*height: calc(100% - 20px);*/
  height: calc(100%);
  background-color: #fafafa;
  /* border-right: 1px solid #e6e6e6; */
  width:300px;
  overflow: auto;
}

.doc-body {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  margin-left: 300px;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  flex: 1 1 auto;
  display: flex;
  padding: 0;
  max-width: 100%;
  min-width: 0;
  background: #fff;
  flex-direction: column;
  /*padding-bottom: 64px;*/
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  left:300px;
}
#doc-search-input {
  padding: 6px;
  background: 0 0;
  transition: top .5s ease;
  background: #fff;
  border-bottom: 1px solid rgba(0,0,0,.07);
  border-top: 1px solid rgba(0,0,0,.07);
  margin-bottom: 10px;
  margin-top: -1px;
}
.doc-search-input{
padding: 6px;
  background: 0 0;
  transition: top .5s ease;
  background: #fff;
  border-bottom: 1px solid rgba(0,0,0,.07);
  border-top: 1px solid rgba(0,0,0,.07);
  border-radius:9px;
  margin-top: -1px;
}
.doc-summary ul.summary {
  list-style: none;
  margin: 0;
  padding: 0;
  -webkit-transition: top .5s ease;
  -moz-transition: top .5s ease;
  -o-transition: top .5s ease;
  transition: top .5s ease;
}
.doc-summary ul.summary li a, .doc-summary ul.summary li span {
  display: block;
  padding: 10px 15px;
  border-bottom: none;
  /*color: #364149;*/
  background: 0 0;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  position: relative;
}
.doc-summary ul.summary li ul {
  padding-left: 20px;
}
.doc-summary ul.summary li a:hover,.bq a:hover{
  text-decoration: underline;
}
/* 文档目前当前链接 */
li.active > a,li.active > div > a{
color: #5FB878;
font-weight:700;
}

.bq a {
  padding: 15px;
  border-bottom: none;
  color: #909090;
  display: block;
  border-top: 1px solid #dcdcdc;
  margin-top: 10px;
  font-size: 12px;
}
.doc-header {
  font-family: helvetica neue,Helvetica,Arial,sans-serif;
  overflow: visible;
  height: 50px;
  padding: 0 8px 0 8px;
  z-index: 2;
  font-size: .85em;
  color: #7e888b;
  background: 0 0;
  /* 固定在顶部 */
  /* width: 100%; */
  /* position: fixed; */
  /* background-color: #ffffff; */
}
.doc-header .btn {
  display: block;
  height: 50px;
  padding: 0 15px;
  border-bottom: none;
  color: #ccc;
  text-transform: uppercase;
  line-height: 50px;
  -webkit-box-shadow: none!important;
  box-shadow: none!important;
  position: relative;
  font-size: 14px;
}
.doc-header .btn:hover{
  color:black;
}
.pull-right {
  float: right!important;
  margin-right: 10px;
}
.pull-left {
  float: left!important;
}

.big-page .doc-summary{left: -300px;}
.big-page .doc-body{margin-left: 0;}
/* 文集、文档作者、发布时间栏等样式 */
.project-doc-content-head{
  color:#c2c2c2;
  font-size:12px;
}
.project-doc-content-head:hover{
  color:#333;
}

.doc-body-content{
  position: relative;
  outline: 0;
  /* top:50px; */
}
.doc-body-content-div{
  position: relative;
  max-width: 960px;
  margin: 0 auto;
  padding: 15px 15px 15px 5px;
}
.doc-content{
  outline: 0;
  max-width: 900px;
  flex: 1 1 auto;
  display: block;
  padding: 0;
  min-width: 0;
}
.doc-info{
  text-align: center;
}
.doc-info h1{
font-size: 28px;
font-weight: 700;
}

/* 文档右侧悬浮工具 */
.fixed-tool-bar{
  position: fixed;
  right: 35px;
  bottom: 45px;
  z-index: 999;
  font-size: 12px;
  display: flex;
  display: -webkit-flex;
  flex-direction: column-reverse;
}

/* 返回顶部 */
.toTop,.tocMenu,.shareDoc,.editDoc{
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #f6f6f6;
  text-align: center;
  line-height: 40px;
  /*返回顶部标签固定定位*/
  /* position: fixed;
  right: 35px;
  bottom: 45px;
  z-index: 999;
  font-size: 12px; */
}

.toTop:hover,.tocMenu:hover,.shareDoc:hover,.editDoc:hover {
  background: #eeeeee;
  font-size: 14px;
  cursor: pointer;
  color: red;
}
.doc-toc-hide{
  display: none;
}


/*切换字号*/
.switch-font{
  font-family: Serif;
}

/* 广告样式 */
.ad-code{
  margin:10px;
}

/* 左边侧栏目录样式 */
/* .toc-open{
  display:block;
} */
.toc-close{
  display:none;
}

/* 文档字体颜色 */
.markdown-body{
  color:#333;
}

/* 文档行内代码样式 */
.markdown-body p code,.markdown-body li code,.markdown-body h1 code,.markdown-body h2 code,.markdown-body h3 code,.markdown-body h4 code,.markdown-body h5 code,.markdown-body h6 code{
  border:none !important;
  color:#e91e63 !important;
  /* font-family: sans-serif; */
}

/* 文档底部按钮样式 */
.doc-bottom-btn{
  border: none;
  background-color: #fff;
  line-height: 14px;
  /* height: 14px; */
  color: rgba(0,0,0,.65);
}

/* 自定义按钮样式 */
.mrdoc-btn-default:hover{
  border-color:#1E9FFF;
  color:#1E9FFF;
}

/* 编辑器文档标题输入框文字样式 */
input#doc-name,input#doctemp-name{
  font-size: 16px;
  font-weight: bold;
}

/* 覆盖layUI样式 */
/* .layui-btn{
  border-radius: 4px;
} */
button.layui-btn-normal,.doctemp-list a.layui-btn-normal{
  background-color: #2176ff !important;
}
.layui-btn-primary:hover{
    color: #2176ff !important;
    border-color: #2176ff !important;
}
/* 弹出层按钮 */
.layui-layer-btn .layui-layer-btn0{
  border-color: #2176ff !important;
  background-color: #2176ff !important;
}
  /* layui分页组件样式 */
  .layui-laypage .layui-laypage-curr .layui-laypage-em{
      background-color: #2176ff !important;
  }
  .layui-form-select dl dd.layui-this{
      background-color: #2176ff !important;
  }
  /* layui单选样式 */
  .layui-form-radio>i:hover, .layui-form-radioed>i{
      color: #2176ff;
  }
  .layui-form-radio:hover *, .layui-form-radioed, .layui-form-radioed>i{
      color: #2176ff;
  }
    /* 开关样式 */
.layui-form-onswitch{
  border-color: #2176ff;
  background-color: #2176ff;
}

/* 图标选择器 */
.layui-iconpicker {max-width: 280px;}
.layui-iconpicker{position:absolute;left:0;top:42px;padding:5px 0;z-index:899;min-width:100%;border:1px solid #d2d2d2;max-height:200px;overflow-y:auto;background-color:#fff;border-radius:2px;box-shadow:0 2px 4px rgba(0,0,0,.12);box-sizing:border-box;}
.layui-iconpicker-item{border:1px solid #e6e6e6;width:90px;height:38px;border-radius:4px;cursor:pointer;position:relative;}
.layui-iconpicker-icon{border-right:1px solid #e6e6e6;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;display:block;width:60px;height:100%;float:left;text-align:center;background:#fff;transition:all .3s;}
.layui-iconpicker-icon i{line-height:38px;font-size:18px;}
.layui-iconpicker-item > .layui-edge{left:70px;}
.layui-iconpicker-item:hover{border-color:#D2D2D2!important;}
.layui-iconpicker-item:hover .layui-iconpicker-icon{border-color:#D2D2D2!important;}
.layui-iconpicker.layui-form-selected .layui-anim{display:block;}
.layui-iconpicker-body{padding:6px;}
.layui-iconpicker .layui-iconpicker-list{background-color:#fff;border:1px solid #ccc;border-radius:4px;}
.layui-iconpicker .layui-iconpicker-icon-item{display:inline-block;width:21.1%;line-height:36px;text-align:center;cursor:pointer;vertical-align:top;height:36px;margin:4px;border:1px solid #ddd;border-radius:2px;transition:300ms;}
.layui-iconpicker .layui-iconpicker-icon-item i.layui-icon{font-size:17px;}
.layui-iconpicker .layui-iconpicker-icon-item:hover{background-color:#eee;border-color:#ccc;-webkit-box-shadow:0 0 2px #aaa,0 0 2px #fff inset;-moz-box-shadow:0 0 2px #aaa,0 0 2px #fff inset;box-shadow:0 0 2px #aaa,0 0 2px #fff inset;text-shadow:0 0 1px #fff;}

.icon {
  width: 1em; height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
.hide-project-icon-list,.hide-doc-import-list{
  display: none;
}

.doc-summary .layui-nav{
  padding: 0;
}
.mrdoc-import-doc-list{
  margin-bottom: 10px;
}
.mrdoc-import-doc-item{
  line-height: 30px !important;
  background-color:#fff;
  border-radius:2px;
  /* box-shadow:0 2px 4px rgba(0,0,0,.12); */
  box-sizing:border-box;
  margin-right: 2px;
  margin-bottom: 2px;
  margin-top: 10px;
  padding-right: 5px;
}
.mrdoc-import-doc-item a{
  /* padding: 0 12px !important; */
}
.mrdoc-import-doc-item .layui-nav-more{
  border-top-color:#333;
}

.layui-nav .layui-nav-mored{
  /* border-left:6px solid transparent !important;
border-right: 6px solid transparent !important;
  border-top-color:#333 !important; */
  border-color: transparent transparent #333;

}
.mrdoc-import-doc-child{
  top: 32px !important;
}
.mrdoc-import-doc-child a{
  background-color: #fff !important;
  color: #333 !important;
}
.mrdoc-import-doc-child a:hover{
  background-color: #f2f2f2 !important;
  color: #333 !important;
}
.mrdoc-import-doc-child .layui-form-checkbox[lay-skin=primary]{
  margin-left: 10px;
  padding-left: 20px;

}
.mrdoc-import-doc-child .layui-form-checkbox[lay-skin=primary] i{
  width: 14px;
  height: 14px;
  line-height: 14px;
}
.layui-form-checked[lay-skin=primary] i {
  border-color:  #2176ff!important;
  background-color:  #2176ff;
  color: #fff;
}
.layui-nav-bar{
  height: 0px !important;
}

/* 文字悬浮提示样式 */
  /* tooltip样式 */
  [tooltip] {
      position: relative;
  }

  [tooltip]::after {
      display: none;
      content: attr(tooltip);
      position: absolute;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      padding: 8px 8px;
      max-width: 200px;
      border-radius: 4px;
      box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.4);
      z-index: 100;
  }

  [tooltip]::before {
      display: none;
      content: '';
      position: absolute;
      border: 5px solid transparent;
      border-bottom-width: 0;
      z-index: 100;
  }

  [tooltip]:hover::after {
      display: block;
  }

  [tooltip]:hover::before {
      display: block;
  }

  [tooltip][placement^="top"]::after, [tooltip][placement^="top"]::before {
      animation: anime-top 300ms ease-out forwards;
  }

  [tooltip][placement^="right"]::after, [tooltip][placement^="right"]::before {
      animation: anime-right 300ms ease-out forwards;
  }

  [tooltip][placement^="bottom"]::after, [tooltip][placement^="bottom"]::before {
      animation: anime-bottom 300ms ease-out forwards;
  }

  [tooltip][placement^="left"]::after, [tooltip][placement^="left"]::before {
      animation: anime-left 300ms ease-out forwards;
  }

  /* 气泡主题 */
  .tooltip-theme-dark, [tooltip]::after {
      color: #fff;
      background-color: #313131;
  }

  .tooltip-theme-light, [tooltip][effect="light"]::after {
      color: #313131;
      background-color: #fff;
      border: 1px solid #313131;
  }

  /* 气泡位置 */
  /*----上----*/
  .tooltip-placement-top, [tooltip]:not([placement])::after, [tooltip][placement=""]::after, [tooltip][placement="top"]::after {
      bottom: calc(100% + 10px);
      left: 50%;
      transform: translate(-50%, 0);
  }

  .tooltip-placement-top-right, [tooltip][placement="top-right"]::after {
      bottom: calc(100% + 10px);
      left: 100%;
      transform: translate(-100%, 0);
  }

  .tooltip-placement-top-left, [tooltip][placement="top-left"]::after {
      bottom: calc(100% + 10px);
      left: 0;
      transform: translate(0, 0);
  }

  /*----右----*/
  .tooltip-placement-right, [tooltip][placement="right"]::after {
      left: calc(100% + 10px);
      top: 50%;
      transform: translate(0, -50%);
  }

  .tooltip-placement-right-top, [tooltip][placement="right-top"]::after {
      left: calc(100% + 10px);
      top: 0;
      transform: translate(0, 0);
  }

  .tooltip-placement-right-bottom, [tooltip][placement="right-bottom"]::after {
      left: calc(100% + 10px);
      top: 100%;
      transform: translate(0, -100%);
  }

  /*----下----*/
  .tooltip-placement-bottom, [tooltip][placement="bottom"]::after {
      top: calc(100% + 10px);
      left: 50%;
      transform: translate(-50%, 0);
  }

  .tooltip-placement-bottom-right, [tooltip][placement="bottom-right"]::after {
      top: calc(100% + 10px);
      left: 100%;
      transform: translate(-100%, 0);
  }

  .tooltip-placement-bottom-left, [tooltip][placement="bottom-left"]::after {
      top: calc(100% + 10px);
      left: 0;
      transform: translate(0, 0);
  }

  /*----左----*/
  .tooltip-placement-left, [tooltip][placement="left"]::after {
      right: calc(100% + 10px);
      top: 50%;
      transform: translate(0, -50%);
  }

  .tooltip-placement-left-top, [tooltip][placement="left-top"]::after {
      right: calc(100% + 10px);
      top: 0;
      transform: translate(0, 0);
  }

  .tooltip-placement-left-bottom, [tooltip][placement="left-bottom"]::after {
      right: calc(100% + 10px);
      top: 100%;
      transform: translate(0, -100%);
  }

  /* 三角形主题 */
  .triangle-theme-dark, [tooltip]::before {
      border-top-color: #313131;
  }

  .triangle-theme-light, [tooltip][effect="light"]::before {
      border-top-color: #313131;
  }

  /* 三角形位置 */
  /*----上----*/
  .triangle-placement-top, [tooltip]:not([placement])::before, [tooltip][placement=""]::before, [tooltip][placement="top"]::before {
      bottom: calc(100% + 5px);
      left: 50%;
      transform: translate(-50%, 0);
  }

  .triangle-placement-top-left, [tooltip][placement="top-left"]::before {
      bottom: calc(100% + 5px);
      left: 10px;
  }

  .triangle-placement-top-right, [tooltip][placement="top-right"]::before {
      bottom: calc(100% + 5px);
      right: 10px;
  }

  /*----右----*/
  .triangle-placement-right, [tooltip][placement="right"]::before, .triangle-placement-right-top, [tooltip][placement="right-top"]::before, .triangle-placement-right-bottom, [tooltip][placement="right-bottom"]::before {
      left: calc(100% + 3px);
      top: 50%;
      transform: translate(0, -50%) rotateZ(90deg);
  }

  .triangle-placement-right-top, [tooltip][placement="right-top"]::before {
      top: 10px;
  }

  .triangle-placement-right-bottom, [tooltip][placement="right-bottom"]::before {
      bottom: 10px;
      top: auto;
      transform: translate(0, 0) rotateZ(90deg);
  }

  /*----下----*/
  .triangle-placement-bottom, [tooltip][placement="bottom"]::before, .triangle-placement-bottom-left, [tooltip][placement="bottom-left"]::before, .triangle-placement-bottom-right, [tooltip][placement="bottom-right"]::before {
      top: calc(100% + 5px);
      left: 50%;
      transform: translate(-50%, 0) rotateZ(180deg);
  }

  .triangle-placement-bottom-left, [tooltip][placement="bottom-left"]::before {
      transform: translate(0, 0) rotateZ(180deg);
      left: 10px;
  }

  .triangle-placement-bottom-right, [tooltip][placement="bottom-right"]::before {
      right: 10px;
      left: auto;
  }

  /*----左----*/
  .triangle-placement-left, [tooltip][placement="left"]::before, .triangle-placement-left-top, [tooltip][placement="left-top"]::before, .triangle-placement-left-bottom, [tooltip][placement="left-bottom"]::before {
      right: calc(100% + 3px);
      top: 50%;
      transform: translate(0, -50%) rotateZ(270deg);
  }

  .triangle-placement-left-top, [tooltip][placement="left-top"]::before {
      top: 10px;
  }

  .triangle-placement-left-bottom, [tooltip][placement="left-bottom"]::before {
      bottom: 10px;
      top: auto;
      transform: translate(0, 0) rotateZ(270deg);
  }

  @keyframes anime-top {
  from {
      opacity: .5;
      bottom: 150%;
  }
  }

  @keyframes anime-bottom {
  from {
      opacity: .5;
      top: 150%;
  }
  }

  @keyframes anime-left {
  from {
      opacity: .5;
      right: 150%;
  }
  }

  @keyframes anime-right {
  from {
      opacity: .5;
      left: 150%;
  }
  }

/* 移动端小屏幕样式 */
@media screen and (max-width:768px){
  /* 首页 */
  .project-item{
      min-width: 0;
      width: 100%;
      height: 170px;
      margin:10px;
      border: 1px solid #ddd;
      border-radius: 4px;
      box-shadow: 0 1px 3px rgba(0,0,0,.055);
  }
  .layui-container{
      padding:0 5px;
  }
  .layui-fluid{
      padding: 0 25px;
  }
  /* 文档浏览页 顶部控制按钮 */
  .doc-header .btn{
      padding:0 10px;
  }
  /* 代码超长出现横向滚动条 */
  .editormd-preview-container pre.prettyprint, .editormd-html-preview pre.prettyprint , pre{
      white-space: pre;
      word-wrap: break-word;
  }
  /* 文档阅读页 */
  .doc-body{
      margin-left: 0;
      left: 0px;
  }
  div.doc-summary{
      z-index: 9999;
  }
  .markdown-body{
      width: 100%;
  }
  .markdown-body iframe{
      width: 100% !important;
  }
}