/*
 * Skin: Blue
 * ----------
 */

html,body{

  min-width: 1280px;
  font-family: 'PingFang SC', 'Helvetica Neue', "STHeitiSC-Light", "Microsoft YaHei", sans-serif;

  background-image: url(../../../images/page_bg.png);
  background-size:cover;
  background-repeat: no-repeat;
  background-position: center top;}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6{margin:0;}

.skin-blue .breadcrumb>li+li:before {
  position: relative;
  float:left;
  top: 0px;
  left:-1px;
  font-size: 12px;
  font-family: 'Glyphicons Halflings';
  padding: 0 5px;
  color: #333;
  content: "\e258";
}

.skin-blue .main-header .navbar .nav > li > a {
  color: #333;
}
.skin-blue .main-header .navbar .nav-tabs > li{
  position: relative;
}

.skin-blue .main-header .navbar .nav-tabs > li.active{
  background-color:#d3dee7;
}

.skin-blue .main-header .navbar .nav-tabs > li > a{
  line-height: 30px;
  border: 0;
  border-radius: 0;
  margin-right: 0;
  color: #333;
  cursor: pointer;
}
.skin-blue .main-header .navbar .nav-tabs > li > a.active{
  background-color:#d3dee7;
  color:#2d7ae4;
}


.skin-blue .main-header .navbar .nav-tabs > li > a>em.btn-tab-remove{
  display: inline-block;
  margin-left: 7px;
  float: right;

  top: 0px;
  font-size: 20px;
  line-height: 30px;
}
.skin-blue .main-header .navbar .nav-tabs > li:nth-child(1) > a>em.btn-tab-remove{
  display: none;
}

.skin-blue .main-header .navbar .nav > li > span {
  display: block;
  position:relative;
  padding:15px;
  padding-right:0;
  color: #333;
  line-height: 20px;
}
.skin-blue .main-header .navbar .nav > li > a:hover,
.skin-blue .main-header .navbar .nav > li > a:active,
.skin-blue .main-header .navbar .nav > li > a:focus,
.skin-blue .main-header .navbar .nav .open > a,
.skin-blue .main-header .navbar .nav .open > a:hover,
.skin-blue .main-header .navbar .nav .open > a:focus,
.skin-blue .main-header .navbar .nav > .active > a {
  /*background: rgba(0, 0, 0, 0.1);*/
  /*background-color:transparent;*/
  background-color: rgba(211, 222, 231, 0.85);
  color: #2d7ae4;
}
.skin-blue .sidebar-toggle,
.skin-blue .main-header .navbar .sidebar-toggle {
  color: #ffffff;
}
.skin-blue .main-sidebar .sidebar-toggle{
  /*height: 50px;*/
  height:35px;
  padding: 15px;
  padding-bottom:0;
  padding-left:26px;
  display: inline-block;
}
.skin-blue .sidebar-toggle:before,
.skin-blue .main-header .sidebar-toggle:before{
  display: block;
  position:relative;top:1px;
  width:18px;height:18px;
  background-image:url(../../../images/icon.png);
  background-position:-116px -131px;
  content:" ";

  -webkit-transition: transform .12s;
  -moz-transition: transform .12s;
  -ms-transition: transform .12s;
  -o-transition: transform .12s;
  transition: transform .12s;
}
.skin-blue.sidebar-collapse .sidebar-toggle:before,
.skin-blue.sidebar-collapse .main-header .sidebar-toggle:before{
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}
.skin-blue .sidebar-toggle:hover,
.skin-blue .main-header .navbar .sidebar-toggle:hover {
  background-color: transparent;
}

.skin-blue .main-footer{
  /*background-color:transparent;*/
  background-color:rgba(255,255,255,.5);
  border-top:0;
}
@media (min-width: 768px){
  .skin-blue .main-header .navbar {
    margin-left:200px;
   /* background-color: #e6eaeb;*/
    background-color: rgba(230, 234, 235, 0.75);
  }

  .skin-blue .main-header .logo {
    padding:0;
    width:200px;
    background-color: #535554;
    color: #ffffff;
    border-bottom: 0 solid transparent;

    overflow: visible;
  }

  .skin-blue  .main-header .logo .logo-lg {
    position: relative;
    display: block;
    padding-top:30px;
    height: 50px;
    background-color: #535554;

    margin: 0;
    width: 100%;
    background-image: url(../../../images/logo.png);
    background-repeat: no-repeat;
    background-position: left center;
    background-size: contain;
  }

  .sidebar-mini.sidebar-collapse .main-header .logo {
    padding:0;
    width: 70px;
  }
  .sidebar-mini.sidebar-collapse .main-header .logo > .logo-mini{
    display: block;
    margin:0;
    width: 100%;
    height: 100%;
    background-image:url(../../../images/logo.png);
    background-repeat: no-repeat;
    background-position:left center;
    background-size:contain;

  }
  .sidebar-mini.sidebar-collapse .main-header .navbar {
    margin-left: 70px;
  }
  .sidebar-mini.sidebar-collapse .content-wrapper, .sidebar-mini.sidebar-collapse .right-side, .sidebar-mini.sidebar-collapse .main-footer {
    margin-left: 70px !important;
    z-index: 840;


  }
  .sidebar-mini.sidebar-collapse .main-sidebar {
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0, 0);
    width: 70px !important;
    z-index: 1090;
  }
  /*todo:change it to position :fixed;

  .sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > .treeview-menu {
    left: 70px;
    top:48px;
    height:inherit;
  }*/
  .sidebar-mini.sidebar-collapse .sidebar-menu > li{
    position: relative;
     overflow: hidden;
     height: 44px;
  }
  .sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > .treeview-menu
/*  .sidebar-mini.sidebar-collapse .sidebar-menu > li > .treeview-menu.menu-open*/{
    position:fixed;
    left: 70px;
    width:200px;
    top:0;
    height:100%;
  }

  .sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > a > span:not(.pull-right){
    left:70px;
    padding-left:15px;
    margin-left: 0;
    background-color:#e7e9ea;
  }

  .skin-blue .content-wrapper{margin-left:200px;}
  .skin-blue .main-footer{
    margin-left:200px;
    text-align: center;
    font-size:13px;
    color:#333;
  }
}


@media (max-width: 767px) {
  /*todo*/
  .skin-blue  .main-header .logo{display: none;}
  .skin-blue .main-header .navbar .sidebar-toggle{
      display: none;
  }

  .skin-blue .main-header .navbar .dropdown-menu li.divider {
    background-color: rgba(255, 255, 255, 0.1);
  }
  .skin-blue .main-header .navbar .dropdown-menu li a {
    color: #fff;
  }
  .skin-blue .main-header .navbar .dropdown-menu li a:hover {
    background: #367fa9;
  }
}

.skin-blue .main-header .logo:hover {
  background-color: #535554;
}
.skin-blue .main-header li.user-header {
  background-color: #3c8dbc;
}
.skin-blue .content-header {
  background: transparent;
}

.skin-blue .wrapper,
.skin-blue .main-sidebar,
.skin-blue .left-side {
  /*background-color: #f3f4f8;*/
  background-color:transparent;
}

.skin-blue .content-wrapper,
.skin-blue .right-side{
  /*background-color:#f3f4f8;*/
  background-color:transparent;
}
.skin-blue .content-wrapper{background-color:rgba(255,255,255,.5)}
.skin-blue .main-sidebar,.skin-blue .left-side{
  z-index:1090;
  padding-top:50px;
  padding-bottom:50px;
  width:200px;

  /*background-image:url(../../../images/aside_bg.png);*/
 /* background: -webkit-linear-gradient(0deg, rgba(48, 55, 62, 0.06) 0,rgba(33, 33, 33, 0.1) 50%,rgba(48, 55, 62, 0.06) 100%);
  background: -o-linear-gradient(0deg,rgba(48, 55, 62, 0.06) 0,rgba(33, 33, 33, 0.1) 50%,rgba(48, 55, 62, 0.06) 100%);
  background: linear-gradient(0deg,rgba(48, 55, 62, 0.06) 0,rgba(33, 33, 33, 0.1) 50%,rgba(48, 55, 62, 0.06) 100%);*/
  /*-webkit-box-shadow: inset 0 3px 7px rgba(0,0,0,.2), inset 0 -3px 7px rgba(0,0,0,.2);*/
  /*background-color:rgba(33,33,33,0.042);*/
  background-color:transparent;
  background-position:left top;
  background-size:cover;

  /*-webkit-transition: padding-top .3s ease-in-out;
  -moz-transition: padding-top .3s ease-in-out;
  -ms-transition: padding-top .3s ease-in-out;
  -o-transition: padding-top .3s ease-in-out;
  transition: padding-top .3s ease-in-out;*/

  -webkit-transition:padding-top .3s , -webkit-transform 0.3s ease-in-out, width 0.3s ease-in-out;
  -moz-transition:padding-top .3s , -moz-transform 0.3s ease-in-out, width 0.3s ease-in-out;
  -o-transition:padding-top .3s , -o-transform 0.3s ease-in-out, width 0.3s ease-in-out;
  transition: padding-top .3s ,transform 0.3s ease-in-out, width 0.3s ease-in-out;
}

.skin-blue.sidebar-collapse .main-sidebar,.skin-blue.sidebar-collapse .left-side{
  padding-top:50px;
}

.skin-blue .user-panel > .info,
.skin-blue .user-panel > .info > a {
  color: #fff;
}
.skin-blue .sidebar-menu > li.header {
  color: #4b646f;
  background: #1a2226;
}
.skin-blue .sidebar-menu > li > a {
  height:48px;
  padding-left:20px;
  line-height: 24px;
  border-left: 3px solid transparent;
}
.skin-blue .sidebar-menu > li:hover > a,
.skin-blue .sidebar-menu > li.active > a {
  color: #2d7ae4;
  background-color:rgba(255,255,255,.36);
  border-left-color: #2d7ae4;
}
.skin-blue .sidebar-menu > li > .treeview-menu {
  position:fixed;
  top:0;
  left:200px;
  width:200px;
  height:100%;
  margin:0;padding-left:0;
  background: rgba(225, 230, 233, 0.91);
}
.skin-blue.sidebar-collapse .sidebar-menu > li > .treeview-menu{
  left:70px;
}
.skin-blue .sidebar-menu .treeview-menu > li{

}

.skin-blue .sidebar a {
  color: #333;
}
.skin-blue .sidebar a:hover {
  text-decoration: none;
}
.skin-blue .treeview-menu > li:nth-child(1)>h5{
  font-size:18px;
  height:50px;
  line-height: 40px;
  padding:5px 5px 5px 20px;
  color: #333;
}
.skin-blue .treeview-menu > li > a {
  height:49px;
  line-height: 39px;
  padding:5px 5px 5px 20px;
  color: #333;
  cursor: pointer;
}
.skin-blue .treeview-menu > li.active > a,
.skin-blue .treeview-menu > li > a:hover {
  background-color: #2d7ae4;
  color:#fff;
}
.skin-blue .sidebar-form {
  border-radius: 3px;
  border: 1px solid #374850;
  margin: 10px 10px;
}
.skin-blue .sidebar-form input[type="text"],
.skin-blue .sidebar-form .btn {
  box-shadow: none;
  background-color: #374850;
  border: 1px solid transparent;
  height: 35px;
}
.skin-blue .sidebar-form input[type="text"] {
  color: #666;
  border-top-left-radius: 2px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 2px;
}
.skin-blue .sidebar-form input[type="text"]:focus,
.skin-blue .sidebar-form input[type="text"]:focus + .input-group-btn .btn {
  background-color: #fff;
  color: #666;
}
.skin-blue .sidebar-form input[type="text"]:focus + .input-group-btn .btn {
  border-left-color: #fff;
}
.skin-blue .sidebar-form .btn {
  color: #999;
  border-top-left-radius: 0;
  border-top-right-radius: 2px;
  border-bottom-right-radius: 2px;
  border-bottom-left-radius: 0;
}
.skin-blue.layout-top-nav .main-header > .logo {
  background-color: #3c8dbc;
  color: #ffffff;
  border-bottom: 0 solid transparent;
}
.skin-blue.layout-top-nav .main-header > .logo:hover {
  background-color: #3b8ab8;
}


/*skin-blue patch by cheng*/
.skin-blue .main-header ol.breadcrumb{
  float: left;
  margin-bottom: 0;
  padding: 8px 15px;
  list-style: none;
  background-color:transparent;
  border-radius:0;

  line-height:34px;

}
.skin-blue .main-header ol.breadcrumb a{color:#333;text-decoration: none;}
.skin-blue .main-header ol.breadcrumb a:hover{color:#2d7ae4;}
.skin-blue .main-header .breadcrumb>.active{color:#757575;}



.skin-blue .backdrop{display: none;}
.skin-blue .ys-loading{display: block;}

.skin-blue .ys-sys-toggle{
  position: absolute;
  bottom:0;left:0;
  width:100%;
  height:50px;
  padding:15px 12px;
  background-color:#2d7ae4;
  color:#fff;
}
.skin-blue .ys-sys-toggle a{display:inline-block;height:20px;line-height:20px;text-decoration: none; color:#fff;font-size:14px;}
.skin-blue .ys-sys-toggle a>em.glyphicon{display: inline-block;margin-left:12px;margin-right:12px;}
.skin-blue.sidebar-collapse .ys-sys-toggle a>em.glyphicon{display:none;}

/*ys-figure-wrapper*/
.skin-blue .ys-figure-wrapper{
  position: relative;
  padding-left:45px;
  padding-right:6px;
  height:50px;
  line-height: 50px;
  /*width:100%;*/
  overflow: hidden;
}
.skin-blue .ys-figure-wrapper:hover{cursor: pointer;}

.skin-blue .ys-figure-wrapper em.ys-user-figure{
  display: block;
  position:absolute;
  top:50%;
  left:5px;
  margin-top:-17px;
  width:34px;height:34px;
  border-radius: 34px;
  background-color:#fff;
  background-repeat: no-repeat;
  background-size:cover;
  background-position: center center;
}
.skin-blue .ys-figure-wrapper:hover>h5{color:#2d7ae4;}
.skin-blue .ys-figure-wrapper >h5,.skin-blue .ys-figure-wrapper >span{
  display: inline-block;
  margin:0;
  height:50px;
  line-height: 50px;

  text-align: center;
  font-size:14px;
  color:#333;
  font-weight:normal;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.skin-blue .ys-figure-wrapper >h5{
  font-weight:700;
}

.skin-blue .ys-figure-wrapper >span{
  font-weight:normal;
}

.skin-blue .sidebar-menu li > a > .fa-angle-left,
.skin-blue .sidebar-menu li > a > .pull-right-container > .fa-angle-left{
  -webkit-transition: transform .18s;
  -moz-transition: transform .18s;
  -ms-transition: transform .18s;
  -o-transition: transform .18s;
  transition: transform .18s;
}

.skin-blue .sidebar-menu li.active > a > .fa-angle-left,
.skin-blue .sidebar-menu li.active > a > .pull-right-container > .fa-angle-left {
  -webkit-transform: rotate(-180deg);
  -moz-transform: rotate(-180deg);
  -ms-transform: rotate(-180deg);
  -o-transform: rotate(-180deg);
  transform: rotate(-180deg);
}

/*content*/
/*content-header*/
.skin-blue .content-header {
  position: relative;
  padding: 0 15px;
  height: 30px;
  color: black;
  margin-top:6px;
}
.skin-blue .content-header > h1 {
  margin: 0;
  font-size: 24px;
}
.skin-blue .content-header > h1 > small {
  font-size: 15px;
  display: inline-block;
  padding-left: 4px;
  font-weight: 300;
}
.skin-blue .content-header > .breadcrumb {
  float: left;
  background: transparent;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 14px;
  padding: 7px 5px;
  line-height: 36px;
  position: absolute;
  top: 0;
  left: 10px;
  border-radius: 0;
}

/*update by guoyuan 2017-08-30*/

.skin-blue .ys-figure-wrapper>span:after {
  content: "";
  display: block;
  border-right: 1px solid #333;
  width: 1px;
  height: 16px;
  background: #333;
  position: absolute;
  right: 0;
  top: 17px;
}

.skin-blue .main-header .navbar {
  background-color: rgba(230, 234, 235, 1);
}

/* update by zhanghongen 2017-8-31 */
@media (min-width: 768px) {
  .skin-blue .main-header .navbar {
    background-color: rgba(230, 234, 235, 1);
  }
}