body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #222222;
}

.label{
  color: #FFF;
  font-family: sans-serif;
  padding: 2px;
  background: #222222;
}
.viewcube {
  background-color: transparent;
  height: 145px;
  overflow: hidden;
  position: absolute;
  right: 60px;
  top: 100px;
  width: 150px;
  z-index: 5;
}
.viewcube > canvas{
  margin: 0!important;
}
#viewport {
  bottom: 0;
  left: 0;
  overflow: hidden;
  position: absolute;
  right: 0;
  top: 0;
}

/**/
#menu_slide{
  background: transparent;
  height:500px;
  margin-top:-430px;
  color:#ffffff;
  position:relative;
  z-index: 1000;
}
#menu_btn{
  cursor:pointer;
  background:#C3C3C3;
  padding:10px 20px;
  position:absolute;
  bottom:-40px;
  left:50%;
  transform: translate(-50%, 0);
  width: 100vw;
  height: 20px;
  z-index: 100;
}
#menu_btn p{
    position: absolute;
    color: #7F7F7F;
    top: -5px;
    left: 55%;
    transform: translate( -55%);
}
.btn_container{
  position: absolute;
  left:50%;
  transform: translate(-50%);
}

.div_menu_button {
width: 35px;
height: 5px;
background-color: #7F7F7F;
margin: 2px 0;
}

/**/

.dataContent {
  padding: 30px;
  width: calc(100% - 60px);
  height: calc(100% - 60px);
  overflow-y: scroll;
}

#customers {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

#customers td,
#customers th {
  border: 1px solid #ddd;
  height: 19px;
  padding: 8px;
}

#customers tr:nth-child(even) {
  background-color: rgba(221, 221, 221, 0.5);
}
#customers tr:nth-child(odd) {
  background-color: rgba(221, 221, 221, 1);
}

#customers tr:hover {
  background-color: #c3b4b4;
}

#customers th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #4CAF50;
  color: white;
}

.header {
  height: 70px;
  color: white;
  font-size: 13px;
  z-index: 2000;
  width: 100vw;
  padding: 0;
  margin: 0;
  position: fixed;
top: 0;
background: #222222;
}
.header .width-10 {
  width: 10%;
}
.header .width-15 {
  width: 15%;
}
.header .width-20 {
  width: 20%;
}
.header .width-30 {
  width: 30%;
}
.header .width-50 {
  width: 50%;
}
.header .seperated {
  float: left;
  height: 100%;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
.header .navbar {
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}
.header .navbar > li {
  cursor: pointer;
  float: left;
  text-align: center;
  white-space: nowrap;
  overflow: hidden !important;
  text-overflow: ellipsis;
  transition: all 500ms cubic-bezier(0.215, 0.61, 0.355, 1);
}
.header .navbar > li:hover {
  background: #f7f7f7;
  color: #111;
}
.header .left {
  width: 47%;
  border-right: 1px solid white;
}
.header .left .navbar {
  line-height: 70px;
}
.header .right {
  width: 53%;
}
.header .right .labour {
  width: 30%;
  border-right: 1px solid white;
}
.header .right .procurement {
  width: 70%;
}
.header .right .first, .header .right .second {
  height: 50%;
  line-height: 35px;
}
.header .right .first {
  border-bottom: 1px solid white;
}
.header .right .first p {
  margin: 0;
  text-align: center;
}
#header{
  position: fixed;
  border-collapse: collapse;
  width: calc(100% - 77px);
  left:30px;
  top:65px;
  z-index:25
}
#header td{
  padding: 6px;
  padding-top: 12px;
  padding-bottom: 12px;
  border: 1px solid #ddd;
  text-align: center;
  color: white;
}
.green{
  background-color: #4CAF4f;
}
.blue{
  background-color: #00a2e8;
}
.big{
  width: 22%;
}
.small{
  width: 10%
}