html.gss,
body.gss,
.gss-container{
  height: 100%;
  overflow: hidden;
  position: relative;
  width: 100%;
}
.gss-container{
  background: transparent url(images/body-bg.png) no-repeat center center;
  background-size: 100% 100%;
}
.gss-container::before{
  border-top: 1px solid rgba(255,255,255,0.2);
  content: '';
  display: block;
  height: 1px;
  position: absolute;
  top: 149px;
  width: 100%;
  z-index: 1;
}

.gss-header,
.gss-footer,
.gss-content{
  left: 50%;
  margin-left: -630px;
  position: absolute;
  width: 1260px;
  z-index: 2;
}
.gss-header{
  top: 30px;
}
.gss-header .logo{
  background: transparent url(images/logo.png) no-repeat left center;
  height: 90px;
  width: 635px;
}
.gss-header .tools {
  float: right;
}
.gss-header .tools li{
  border: 1px solid rgba(255,255,255,0.5);
  border-radius: 10px;
  color: white;
  cursor: pointer;
  display: inline-block;
  line-height: 35px;
  margin-left: 5px;
  padding: 0 15px 0 45px;
  position: relative;
}
.gss-header .tools li::before{
  background: transparent url(images/icon-user.png) no-repeat center 35px;
  content: '';
  height: 35px;
  left: 5px;
  position: absolute;
  width: 35px;
}
.gss-header .tools li.info::before{
  background-position: center 0;
}
.gss-header .tools li.password::before{
  background-position: center -35px;
}
.gss-header .tools li.logout::before{
  background-position: center -70px;
}
.gss-header .tools li.change::before{
  background-position: center -105px;
}
.gss-header .tools li.restore::before{
  background-position: center -140px;
}
.gss-header .tools li:hover{
  background-color: rgba(0,0,0,0.2);
}
.gss-header .user{
  color: white;
  line-height: 24px;
  float: right;
  padding-top: 5px;
}
.gss-header .user .photo{
  background:#fff url(images/icon-member.png) no-repeat center center;
  background-size:30px;
  border-radius: 50%;
  display: block;
  float: left;
  height: 45px;
  overflow: hidden;
  width: 45px;
}
.gss-header .user .photo img{
  vertical-align: middle;
  width: 100%;
}
.gss-header .user .desc{
  float: left;
  padding-left: 15px;
  width: 200px;
}
.gss-header .user .desc p{
  overflow:hidden;
  text-overflow:ellipsis;
  width: 100%;
  white-space:nowrap;
}
.gss-header .message,
.gss-header .app{
  background: #33cfe9;
  border-radius: 50%;
  bottom: 12px;
  cursor: pointer;
  position: absolute;
  height: 30px;
  right: 255px;
  width: 30px;
}
.gss-header .app{
  color: rgba(0,0,0,0.5);
  font: bold 10px/30px Arial;
  text-align: center;
  right: 600px;
}
.gss-header .app img{
  width: 150px;
}
.gss-header .message::before{
  background: transparent url(../images/icon-message.png) no-repeat center center;
  background-size: 20px;
  content: '';
  display: block;
  height: 20px;
  margin: 5px auto;
  width: 20px;
}
.gss-header .message i{
  background-color: #f90;
  color: white;
  border-radius: 50%;
  font: normal 8px/14px Arial;
  top: 4px;
  position: absolute;
  right: 4px;
  padding: 4px;
}

.gss-content{
  top: calc(50% - 35px);
  margin-top: -120px;
}

.gss-footer{
  line-height: 30px;
  bottom: 20px;
}
.gss-footer,
.gss-footer a{
  color: white;
}
.gss-footer span{
  padding: 0 25px;
}

.gss-workbench{}
.gss-workbench > li{
  color: white;
  float: left;
  height: 200px;
  line-height: 30px;
  margin: 0 20px 20px 0;
 width: 300px;
}
.gss-workbench > li.analyse{
  width: 620px;
}
.btn-workbench-look > li{
  width: 233px;
}
.btn-workbench-look > li.analyse{
  width: 500px;
}
.gss-workbench > li.small{
  height: 95px;
  margin-top: 105px;
  width: calc(560px / 4);
}
.gss-workbench > li.frontier{
  margin-right: 0;
}
.gss-workbench > li > div{
  background-color: #00c8e1;
  border-radius: 20px;
  height: 100%;
  padding: 5px 30px 10px 30px;
  position: relative;
}
.gss-workbench > li.analyse > div{
  height: 305px;
}
.gss-workbench > li.analyse.config > div{
  height: 420px;
}
.gss-workbench.gss-workbench-handle > li.analyse > div{
  height: 420px;
}
.gss-workbench > li.small > div{
  padding: 5px 10px 10px 10px;
}
.gss-workbench > li > div:hover{
  -moz-box-shadow: 3px 3px 5px rgba(0,0,0,0.3);
  -webkit-box-shadow: 3px 3px 5px rgba(0,0,0,0.3);
  box-shadow: 3px 3px 5px rgba(0,0,0,0.3);
}

.gss-workbench > li > div.bg-cyan{
  background-color: #00c8e1;
}
.gss-workbench > li > div.bg-yellow{
  background-color: #f0d750;
}
.gss-workbench > li > div.bg-blue{
  background-color: #006ee1;
}
.gss-workbench > li > div.bg-red{
  background-color: #ff5a5a;
}
.gss-workbench > li > div.bg-green{
  background-color: #0fd75a;
}
.gss-workbench > li > div.bg-pink{
  background-color: #eb5feb;
}
.gss-workbench > li > div.bg-dark{
  background-color: rgba(0,0,0,0.2);
}
.gss-workbench > li > div.bg-orange{
  background-color: #ebaf50;
}
.gss-workbench > li > div.bg-brown{
  background-color: #c89637;
}
.gss-workbench > li > div i{
  font-weight: bold;
  font-style: normal;
  padding: 0 5px;
}

.gss-workbench > li > div::after{
  background: transparent url(images/icon-tools.png) no-repeat center 100px;
  background-size: 65px;
  bottom: 25px;
  content: '';
  display: block;
  height: 65px;
  position: absolute;
  right: 25px;
  width: 65px;
}
.gss-workbench > li > div.create::after{
  background-position-y: 0;
}
.gss-workbench > li > div.assign::after{
  background-position-y: -65px;
}
.gss-workbench > li > div.progress::after{
  background-position-y: -130px;
}
.gss-workbench > li > div.check::after{
  background-position-y: -195px;
}
.gss-workbench > li > div.report::after{
  background-position-y: -260px;
}
.gss-workbench > li > div.record::after{
  background-position-y: -325px;
}
.gss-workbench > li > div.analyse::after{
  background-position-y: -390px;
}
.gss-workbench > li > div.config::after{
  background-position-y: -455px;
}
.gss-workbench > li.small > div.delay::after{
  background-position-y: -520px;
}
.gss-workbench > li.small > div.coordinate::after{
  background-position-y: -585px;
}
.gss-workbench > li > div.bad::after{
  background-position-y: -650px;
}
.gss-workbench > li > div.map::after{
  background-position-y: -715px;
}

.gss-workbench > li.small > div::after{
  background: transparent url(images/icon-tools.png) no-repeat center 100px;
  background-size: 40px;
  bottom: 40px;
  content: '';
  display: block;
  height: 40px;
  position: absolute;
  right: calc(50% - 20px);
  width: 40px;
}
.gss-workbench > li > div:hover::after{
  background-image: url(images/icon-tools-hover.png);
}
.gss-workbench > li.small > div.create::after{
  background-position-y: 0;
}
.gss-workbench > li.small > div.assign::after{
  background-position-y: -40px;
}
.gss-workbench > li.small > div.progress::after{
  background-position-y: -80px;
}
.gss-workbench > li.small > div.check::after{
  background-position-y: -120px;
}
.gss-workbench > li.small > div.report::after{
  background-position-y: -160px;
}
.gss-workbench > li.small > div.record::after{
  background-position-y: -200px;
}
.gss-workbench > li.small > div.analyse::after{
  background-position-y: -240px;
}
.gss-workbench > li.small > div.config::after{
  background-position-y: -280px;
}
.gss-workbench > li.small > div.delay::after{
  background-position-y: -320px;
}
.gss-workbench > li.small > div.coordinate::after{
  background-position-y: -360px;
}
.gss-workbench > li.small > div.map::after{
  background-position-y: -440px;
}

.gss-workbench > li > div > h2{
  font-size: 28px;
  line-height: 60px;
}
.gss-workbench > li > div > h2 div{
  background-color: rgba(0,0,0,0.5);
  border-radius: 5px;
  cursor: pointer;
  display: block;
  float: right;
  font-size: 14px;
  line-height: 30px;
  margin-top: 18px;
  padding: 0 8px;
}
.gss-workbench > li.small > div > h2{
  font-size: 16px;
  line-height: 30px;
  padding-top: 50px;
  text-align: center;
}
.gss-workbench > li > div > u{
  color: rgba(255,255,255,0.5);
  display: block;
  font-size: 18px;
  line-height: 70px;
  text-decoration: none;
}
.gss-workbench > li > div > u > i{
  color: white;
  font-size: 48px;
}


.gss-workbench > li > div > ul.items li{
  padding-left: 15px;
  position: relative;
}
.gss-workbench > li > div > ul.items li::before{
  background-color: rgba(0,0,0,0.2);
  border-radius: 50%;
  content: '';
  display: block;
  height: 8px;
  left: 0;
  margin-top: -4px;
  top: 50%;
  position: absolute;
  width: 8px;
}

.gss-workbench .gss_chart{
  height: 220px;
}
.gss-workbench.gss-workbench-handle .gss_chart{
  height: 330px;
}

.gss-item-function{
  font-size: 16px;
  line-height: 50px;
}
.gss-item-function > li{
  border-bottom: 1px solid rgba(255,255,255,0.1);
  color: white;
  cursor: pointer;
  padding-left: 65px;
  position: relative;
}
.gss-item-function > li:hover{
  background-color: rgba(0,125,180,0.2);
}
.gss-item-function > li.active{
  background-color: #007db4;
}
.gss-item-function > li:hover::before,
.gss-item-function > li.active::before{
  background-color: #f0d750;
  content: '';
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 5px;
}
.gss-item-function > li::after{
  background: transparent url(images/icon-function.png?v-2) no-repeat 0 20px;
  background-size: 80px;
  content: '';
  display: block;
  height: 20px;
  left: 25px;
  position: absolute;
  top: 16px;
  width: 20px;
}
.gss-item-function > li:hover,
.gss-item-function > li.active{
  color: #f0d750;
  font-weight: bold;
}
.gss-item-function > li:hover::after,
.gss-item-function > li.active::after{
  background-image: url(images/icon-function-hover.png?v-2);
}
.gss-item-function > li.all::after{
  background-position-y: 0;
}
.gss-item-function > li.normal::after{
  background-position-y: -20px;
}
.gss-item-function > li.check::after{
  background-position-y: -40px;
}
.gss-item-function > li.warning::after{
  background-position-y: -60px;
}
.gss-item-function > li.overdue::after{
  background-position-y: -80px;
}
.gss-item-function > li.delay::after{
  background-position-y: -100px;
}
.gss-item-function > li.sign::after{
  background-position-y: -120px;
}
.gss-item-function > li.handle-warning::after{
  background-position-y: -140px;
}
.gss-item-function > li.handle-overdue::after{
  background-position-y: -160px;
}
.gss-item-function > li.stop::after{
  background-position-y: -180px;
}
.gss-item-function > li.config::after{
  background-position: -20px 0;
}
.gss-item-function > li.unit::after{
  background-position: -20px -20px;
}
.gss-item-function > li.person::after{
  background-position: -20px -40px;
}
.gss-item-function > li.dictionary::after{
  background-position: -20px -60px;
}
.gss-item-function > li.task::after{
  background-position: -20px -80px;
}
.gss-item-function > li.sms::after{
  background-position: -20px -100px;
}
.gss-item-function > li.logs::after{
  background-position: -20px -120px;
}
.gss-item-function > li.delay-reg::after{
  background-position: -40px -0px;
}
.gss-item-function > li.delay-audit::after{
  background-position: -40px -20px;
}
.gss-item-function > li.delay-agree::after{
  background-position: -40px -40px;
}
.gss-item-function > li.delay-disagree::after{
  background-position: -40px -60px;
}
.gss-item-function > li.land::after{
  background-position: -60px 0;
}
.gss-item-function > li.house::after{
  background-position: -60px -20px;
}
.gss-item-function > li.currency::after{
  background-position: -60px -40px;
}
.gss-item-function > li.professional::after{
  background-position: -60px -60px;
}
.gss-item-function > li.traffic::after{
  background-position: -60px -80px;
}
.gss-item-function > li.electric::after{
  background-position: -60px -100px;
}
.gss-item-function > li.communication::after{
  background-position: -60px -120px;
}
.gss-item-function > li.instrument::after{
  background-position: -60px -140px;
}
.gss-item-function > li.literature::after{
  background-position: -60px -160px;
}
.gss-item-function > li.books::after{
  background-position: -60px -180px;
}
.gss-item-function > li.other::after{
  background-position: -60px -200px;
}
.gss-item-function > li.invest::after{
  background-position: -60px -60px;
}
.gss-item-function > li.trademark::after{
  background-position: -60px -220px;
}
.gss-item-function > li.bad::after{
  background-position: -60px -240px;
}
.gss-item-function > li > ul{
  display: block;
  padding-bottom: 10px;
}
.gss-item-function > li > ul > li{
  border-bottom: 1px solid rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.5);
  font-size: 14px;
  font-weight: normal;
  line-height: 35px;
  position: relative;
}
.gss-item-function > li > ul > li:last-child{
  border: 0;
}
.gss-item-function > li > ul > li:hover::before{
  background-color: rgba(0,125,80,0.5);
  content: '';
  height: 100%;
  left: -65px;
  position: absolute;
  top: 0;
  width: 5px;
}
.gss-item-function > li > ul > li::after{
  background-color: rgba(255,255,255,0.2);
  border-radius: 50%;
  content: '';
  height: 9px;
  margin: -5px 0 0 -20px;
  position: absolute;
  top: 50%;
  width: 9px;
}
.gss-item-function > li > ul > li:hover,
.gss-item-function > li > ul > li.active{
  color: white;
}
.gss-item-function > li > ul > li:hover::after,
.gss-item-function > li > ul > li.active::after{
  background-color: rgba(255,255,255,0.8);
}

.gss-item-photo{
  border: 1px solid #f2f2f2;
  background-color: white;
  border-radius: 10px;
  margin: 0 0 20px 0;
  overflow: hidden;
  position: relative;
}
.gss-item-photo img{
  border: 1px solid #f2f2f2;
  padding: 15px;
  width: 100%;
}
.gss-item-photo.gss-item-photo-manage li{
  height: 160px;
  position: relative;
}
.gss-item-photo.gss-item-photo-manage li img{
  height: 100%;
}
.gss-item-photo.gss-item-photo-manage li i{
  background-color: rgba(0,0,0,0.5);
  border-radius: 5px;
  color: white;
  cursor: pointer;
  position: absolute;
  padding: 5px;
  right: 5px;
  top: 5px;
}
.gss-item-photo.gss-item-photo-manage li:hover i{
  background-color: #007db4;
}
.gss-item-photo.gss-item-photo-manage li.upload{
  cursor: pointer;
}
.gss-item-photo.gss-item-photo-manage li.upload::after{
  background: transparent url(images/icon-upload.png) no-repeat center top;
  background-size: 100px;
  content: '';
  height: 100px;
  left: 50%;
  margin: -50px 0 0 -50px;
  position: absolute;
  top: 50%;
  width: 100px;
}
.gss-item-photo.gss-item-photo-manage li.upload:hover::after{
  background-position: center bottom;
}

.fams-analyse{
  background-color: #ededed;
  overflow: hidden;
  padding: 40px;
  margin-left: -30px;
}
.fams-analyse > div{
  float: left;
  width: 50%;
}
.fams-analyse > div.small{
  margin-top: 30px;
  width: 25%;
}
.fams-analyse > div > div.chart-body{
  background-color: white;
  height: 320px;
  margin-left: 30px;
}
.fams-analyse > div > div.chart-body h2{
  border-bottom: 1px solid #ededed;
  font-size: 20px;
  line-height: 50px;
  position: relative;
  padding-left: 15px;
}
.fams-analyse > div > div.chart-body > div.item{
  height: calc(100% - 50px);
}

.fams-analyse-catalog{
  color: #555;
  font-size: 20px;
  font-weight: bold;
  line-height: 60px;
}
.fams-analyse-catalog li{
  cursor: pointer;
  display: inline-block;
  padding: 10px 15px;
}
.fams-analyse-catalog li.active{
  color: #007db4;
}

.tool-workbench-small li{
  cursor: pointer;
  position: relative;
}
.tool-workbench-small li div{
  padding-top: 20px;
  position: relative;
}
.tool-workbench-small li div::before{
  background: rgba(0,0,0,0.2);
  border-radius: 50%;
  content: '';
  display: block;
  height: 50px;
  margin: 0 auto;
  width: 50px;
}
.tool-workbench-small li::before{
  background: transparent url(images/icon-tools-small.png) no-repeat;
  background-size: 25px;
  content: '';
  height: 25px;
  left: calc(50% - 12px);
  position: absolute;
  top: 33px;
  width: 25px;
  z-index: 2;
}
.tool-workbench-small li:hover::before{
  background-image: url(images/icon-tools-small-hover.png);
}
.tool-workbench-small li.config::before{
  background-position: 0 0;
}
.tool-workbench-small li.catalog::before{
  background-position: 0 -25px;
}
.tool-workbench-small li.region::before{
  background-position: 0 -50px;
}
.tool-workbench-small li.dictionary::before{
  background-position: 0 -75px;
}
.tool-workbench-small li.unit::before{
  background-position: 0 -100px;
}
.tool-workbench-small li.person::before{
  background-position: 0 -125px;
}
.tool-workbench-small li.client::before{
  background-position: 0 -150px;
}
.tool-workbench-small li.logs::before{
  background-position: 0 -175px;
}
.tool-workbench-small li div::after{
  background-color: rgba(255,255,255,0.1);
  content: '';
  display: block;
  height: 50%;
  left: 0;
  position: absolute;
  top: 20px;
  width: 1px;
}
.tool-workbench-small li div.not-line::after{
  display: none;
}
.tool-workbench-small li div h2{
  font-size: 16px;
  font-weight: normal;
  line-height: 40px;
}
.tool-workbench-small li:hover div::before{
  background-color: #0a7ddc;
}
.tool-workbench-small li:hover div h2{
  color: #f0d750;
}
.control-body{
  background:rgba(0,0,0,0.05);
  border-bottom:1px solid #ccc;
}
.control-body li{
  border-left:1px solid #ccc;
  display:inline-block;
  height:100px;
  position:relative;
}
.control-body li.active{
  background:rgba(0,0,0,0.1)
}
.control-body li:last-child{
  border-right:1px solid #ccc;
}
.control-body li a{
  display:block;
  font-size:18px;
  font-weight:bold;
  line-height:40px;
  padding:0 25px;
}
.control-body li a.active{
  background: #ccc;
}
.control-body li a i.icon{
  background:transparent url(images/icon-warning-big.png) no-repeat top left;
  background-size:120px 40px;
  display:block;
  height:40px;
  margin:15px auto 0 auto;
  width:40px;
}
.control-body li a i.icon-warning{background-position:-40px 0}
.control-body li a i.icon-danger{background-position:-80px 0}
.icon-cadre-do{background:url(images/icon-warning.png) no-repeat center 999em;height: 20px;display: block;}
.icon-cadre-do-default{background-position:center -3px;}
.icon-cadre-do-warning{background-position:center -33px;}
.icon-cadre-do-danger{background-position:center -63px;}


.input-file{
  display: inline-block;
  position: relative;
  overflow: hidden;
  text-align: center;
  width: auto;
  background-color: #2c7;
  border: solid 1px #ddd;
  border-radius: 4px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: normal;
  line-height: 18px;
  color:#fff;
  text-decoration: none;
}
.input-file input[type="file"] {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 14px;
  background-color: #fff;
  transform: translate(-300px, 0px) scale(4);
  height: 40px;
  opacity: 0;
  filter: alpha(opacity=0);
}