html,body {height: 100%;background: #333333}

div {box-sizing: border-box; }
pre {font-size:1em;overflow: auto; white-space: pre-wrap;   white-space: -moz-pre-wrap;  white-space: -pre-wrap; white-space: -o-pre-wrap; word-wrap: break-word; font-family:"FZLanTingHeiEL-SC","FZLanTingHeiS-R-GB", "Microsoft YaHei","Helvetica Neue", "STHeiti", "Verdana";}
.textarea {box-sizing: border-box;}


.video-container {
  position:relative;
  padding-bottom:56.25%;
  padding-top:30px;
  height:0;
  overflow:hidden;
}

.video-container iframe, .video-container object, .video-container embed {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}


.list-inline-slim-border > li > a { padding: 0.3em 0.8em;border:2px solid #f6f6f6;margin:0;}
.list-inline-slim-border > li.active > a {border:2px solid #222;background-color: #fff; }

.bold {font-family: "Helvetica Neue","helvetica";}
.en {font-family: "Helvetica Neue","helvetica";}



.bg-light {background-color: #F6F6F4!important;}
.bg-llight {background-color: #FAFAF8!important;}

.b-box {display:block;text-align:center;min-height:150px;min-width:100px;border:1px solid #eee;} 
.b-lazy {width: 50px;height:50px; margin-top:50px;}


.floatCenterMiddle {position:absolute;color:#ccc; font-size:1em; left:0;top:45%;padding:2px; line-height: 100%;color:#fff;}
.floatLeftTop {position:absolute;color:#ccc; font-size:1em; left:0;top:0;padding:2px; line-height: 100%;color:#fff;}
.floatRightTop {position:absolute;right:-0.5em;top:-0.5em;}
.floatLeftBottom {position:absolute;color:#ccc; font-size:1em; left:0;bottom:0;padding:2px; line-height: 100%;color:#fff;}



.title {border-left:8px solid #888; line-height: 1;  padding-left:0.6em; margin-bottom: 0.4em;}
.btext {background-color:#d6f3fc;padding:3px 5px;margin:0 2px}
.utext {background-color:#f9f9f9;border-bottom:2px dotted #77c0d8;color:#77c0d8;margin:0 3px}
.utext:hover {border-bottom:2px dotted #222;color:#222;}
.ctext {background-color:#D6FCDA;padding:3px 5px;margin:0 2px}
.dtext {background-color:#E8FCD6;padding:3px 5px;margin:0 2px}

.c-tree{color:#87b5b8;}
.cf-tree{color:#87b5b8!important;}
.bd-tree{border-color:#87b5b8 !important;}
.btn-tree{background-color:#87b5b8 !important;}
.bg-tree{background-color:#87b5b8 !important;}
.bg-breeze {background-color:#f2fafd}
.bg-mark1 {background-color: #fcfcf0}
.bg-mark2 {background-color: #f1fdf7}
.bg-mark3 {background-color: #FDF1FC}


.flex-left-topbar {min-width: 14em; }

@media (min-width:42em) {
  .flex-left-topbar {min-width: 30em;  }
}


@media (min-width:72em) {
  .flex-left-topbar {min-width: 40em;  }
}


 

.list-topmenu {margin:0!important; padding:0!important;}
.list-topmenu > li {margin:0!important; padding:0!important;}
.list-topmenu > li > a {
  font-size: 0.9em;
  background-color: #ffffff!important;
  color:#666; 
  border-bottom:2px solid #fff; 
  margin-left:15px;
  margin-right:0;
  margin-bottom:2px;
  padding:4px 2px;
 
}
.list-topmenu > li > a:hover,
.list-topmenu > li.active > a,
.list-topmenu > li.active > a:hover,
.list-topmenu > li.active > a:focus {
  color:#222;
  background-color: #fff!important;
  border-bottom:2px solid #222;
}




 
.breadcrumb > li + li:before {
  padding: 0 5px;
  color: #ccc;
  content: "/\00a0";
}
.breadcrumb > li {color:#333;font-size:1.2em;}
.breadcrumb > li a {color:#333;}
.breadcrumb > li.active {color:#87b5b8;}
 



.circle-20px {
  width:20px;
  height:20px;
  line-height:20px;
  font-size:16px;
}


.uavatar {
  -moz-border-radius:50%;
  -webkit-border-radius:50%;
  border-radius:50%;
  display:inline-block;
  border:2px solid #ffffff;
}
 

.uavatar2 {
  -moz-border-radius:50%;
  -webkit-border-radius:50%;
  border-radius:50%;
  display:inline-block;
  border:1px solid #e6e6e6;
}

.fancybox-nav {width:200px;}
.fancybox-overlay {
    background: rgba(0, 0, 0, .1);
}
.fancybox-wrap {z-index: 1118020!important;}
.fancybox-skin {}
.fancybox-outer {}
.fancybox-inner {}

 
.fancybox-title-over-wrap {
    width: 100%;
    padding: 0;
    text-align: center;
    background: rgba(0, 0, 0, .2);
}

.fancybox-title-over-wrap > div {
    padding: 10px;
}


.fancybox-nav span {visibility: visible;background:none;}
.fancybox-prev {margin-left:-100px;}
.fancybox-next {margin-right:-100px;}
  
 
.line-dotted {border-top:1px dotted #ddd;height:1px;margin:1em 0;}
.line-solid {border-top:1px solid #ddd;height:1px;margin:1em 0;}
  
 .inline-tab-container {color:#222;border-left:1px solid #a6aaaa;border-right:1px solid #a6aaaa;border-bottom:1px solid #a6aaaa;}



 .list-inline-mobile-tabs {padding-bottom:1em;text-align: center;}
 .list-inline-mobile-tabs > li {padding-top:1em;font-size:0.9em;}
 .list-inline-mobile-tabs > li > a {background-color:#ffffff;border:1px solid #ffffff;padding:0.3em 0.6em ;}
 .list-inline-mobile-tabs > li.active > a,
 .list-inline-mobile-tabs > li.active > a:hover,
 .list-inline-mobile-tabs > li > a:hover {background-color:#ffffff;color:#62aec7;border:1px solid #62aec7;border-left:5px solid #62aec7;}


 

.alert-upload {
  padding:5px;
  text-shadow: none;
  color: #222;
  border: 1px dotted #999;
  font-size:0.8em;
  font-weight: normal;
  text-align:left;
  background-color: #fdfdf2;
}
 
.alert-upload span {
  text-align:left;
}
.alert-upload .progress-bar {
  margin-top:5px;margin-bottom:0;height:4px;background: #222
}

 

.table-gray-line {border:1px solid #eee;}
.table-gray-line thead {background-color: #f9f9f9;}
.table-gray-line tr th {padding:1em 1em;border:1px solid #eee;}
.table-gray-line tr td {padding:1em 1em;border:1px solid #eee;}

  
 


.oProgressBar {margin-left:10px;}

.oProgressBar li {
 display: inline-block;
 position: relative;
 float: none;
 color:#ccc;
 margin: 0.4em 0 0 0;
  width: 150px;  
  text-align: left; 


 /* 40px => width: calc(100% + 40px); */
}

.oProgressBar li::after {
 /* this is the separator between items */
 display: inline-block;
 position: absolute;
 content: '';
 height: 2px;
 background: #ccc;
 /* reset style */
 margin: 0;
 /* this is the line connecting 2 adjacent items */
 left: 0; 
 /* 40px is the <li> right margin value */
 width:  100% ;
}

.oProgressBar li.visited::after {
  background-color: #222;
}

.oProgressBar li:last-of-type::after {
 /* hide separator after the last item */
 /*display: none;*/
 background-color: #e6e6e6;
 width: 60px;
}
 
.oProgressBar li > * {
 /* single step */
 display: inline-block;
 font-size: 1em;
}
 
.oProgressBar li > span {font-size:0.8em;margin-left:-6px;}

.oProgressBar li.visited > *, 
.oProgressBar li.current > * {
  color:#222;
}
 


.oProgressBar li > *::before {
  /* this is the spot indicator */
  content: '';
  position: absolute;
  z-index: 1;
  left: 0;
  right: auto;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
  height: 10px;
  width: 10px;
  border-radius: 50%;
  background-color: #ccc;
  top: -1px;
}

.oProgressBar li.visited > *::before{
  background-color: #222;
}

.oProgressBar li.current > *::before {
  background-color: #fff;
  border:2px solid #222;
  height: 10px;
  width: 10px;
  top: -3px;
}

.oProgressBar li::after {
  /* this is the line connecting 2 adjacent items */
  top: 3px;
}
.oProgressBar li > * {
  padding-top: 15px;
}







.pagination {
    border-radius: 2px;
    display: inline-block;
    *display: inline;
    *zoom: 1;
    margin: 20px 0;
    padding-left: 0;
}

.pagination>li {
    display: inline;
}

.pagination>li>a,
.pagination>li>span {
    background-color: #fff;
    margin-left: .1em;
    margin-right: .1em;
    border: 1px solid #222;
    color: #222;
    float: left;
    line-height: 1.42857143;
    padding: 6px 12px;
    position: relative;
    text-decoration: none;
    margin-bottom:0.2em;
}

.pagination>li>a:hover,
.pagination>li>span:hover,
.pagination>li>a:focus,
.pagination>li>span:focus {
    background-color: #dddddd;
    border-color: #222;
    color: #222;
}

.pagination>.active>a,
.pagination>.active>span,
.pagination>.active>a:hover,
.pagination>.active>span:hover,
.pagination>.active>a:focus,
.pagination>.active>span:focus {
    background-color: #222;
    border-color: #222;
    color: #fff;
    cursor: default;
    z-index: 2;
}

 


.numBadge {width:26px;height:26px;line-height:26px;font-size:18px;background-color:#92D8EF;font-weight: bold}

.collagePlus img{
    vertical-align:bottom;
}

.tooltip-bottom {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  position: relative;
  width:100%;
  border:1px solid #ddd;
  background:#fff;
}
.tooltip-bottom:after, .tooltip-bottom:before {
  position: absolute;
  top: 100%;
  left: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  pointer-events: none;
}

.tooltip-bottom:after {
  border-color: none;
  border-top-color: #fff;
  border-width: 10px;
  margin-left: -10px;
}
.tooltip-bottom:before {
  border-color: none;
  border-top-color: #ddd;
  border-width: 12px;
  margin-left: -12px;
}





.probar {
      height: 14px;  /* Can be anything */
      position: relative;
      background: #f9f9f9;
      border:1px solid #ddd;
      -moz-border-radius: 10px;
      -webkit-border-radius: 10px;
      border-radius: 10px;
      padding: 2px 5px;
}

.probar > span {
  display: block;
  position: relative;
  overflow: hidden;
  height: 8px;
  padding:0;margin:0;
     -webkit-border-top-right-radius: 8px;
  -webkit-border-bottom-right-radius: 8px;
         -moz-border-radius-topright: 8px;
      -moz-border-radius-bottomright: 8px;
             border-top-right-radius: 8px;
          border-bottom-right-radius: 8px;
      -webkit-border-top-left-radius: 20px;
   -webkit-border-bottom-left-radius: 20px;
          -moz-border-radius-topleft: 20px;
       -moz-border-radius-bottomleft: 20px;
              border-top-left-radius: 20px;
           border-bottom-left-radius: 20px;
  background-color: rgb(43,194,83);
  
}
.probar > span:after  {
  content: "";
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  background-image:
     -webkit-gradient(linear, 0 0, 100% 100%,
        color-stop(.25, rgba(255, 255, 255, .2)),
        color-stop(.25, transparent), color-stop(.5, transparent),
        color-stop(.5, rgba(255, 255, 255, .2)),
        color-stop(.75, rgba(255, 255, 255, .2)),
        color-stop(.75, transparent), to(transparent)
     );
  background-image:
    -moz-linear-gradient(
      -45deg,
        rgba(255, 255, 255, .2) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, .2) 50%,
        rgba(255, 255, 255, .2) 75%,
        transparent 75%,
        transparent
     );
  z-index: 1;
  -webkit-background-size: 50px 50px;
  -moz-background-size: 50px 50px;
  background-size: 50px 50px;
  -webkit-animation: probarAnimateMove 2s linear infinite;
  -moz-animation: probarAnimateMove 2s linear infinite;
     -webkit-border-top-right-radius: 8px;
  -webkit-border-bottom-right-radius: 8px;
         -moz-border-radius-topright: 8px;
      -moz-border-radius-bottomright: 8px;
             border-top-right-radius: 8px;
          border-bottom-right-radius: 8px;
      -webkit-border-top-left-radius: 20px;
   -webkit-border-bottom-left-radius: 20px;
          -moz-border-radius-topleft: 20px;
       -moz-border-radius-bottomleft: 20px;
              border-top-left-radius: 20px;
           border-bottom-left-radius: 20px;
  overflow: hidden;
}

 
@-webkit-keyframes probarAnimateMove {
    0% {
       background-position: 0 0;
    }
    100% {
       background-position: 50px 50px;
    }
}

@-moz-keyframes probarAnimateMove {
    0% {
       background-position: 0 0;
    }
    100% {
       background-position: 50px 50px;
    }
}


.probar-orange > span {
  background-color: #f1a165;
  background-image: -moz-linear-gradient(top, #f1a165, #f36d0a);
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #f1a165),color-stop(1, #f36d0a));
  background-image: -webkit-linear-gradient(#f1a165, #f36d0a);
}

.probar-red > span {
  background-color: #f0a3a3;
  background-image: -moz-linear-gradient(top, #f0a3a3, #f42323);
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #f0a3a3),color-stop(1, #f42323));
  background-image: -webkit-linear-gradient(#f0a3a3, #f42323);
}

.probar-nostripes > span > span, .probar-nostripes > span:after {
  -webkit-animation: none;
  -moz-animation: none;
  background-image: none;
}