body {
  overflow: hidden;
  border: 0px;
  background-color: #ffffff;
  
}
.site{

  width: 100%;
  height: 100vh;
}
.myContent{
  background-color: #ffffff;
  float:left;
  width: calc(100% - 565px);
  height: 100vh;
 
}
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: auto;
  background-color: rgba(60, 116, 96, 0.8);
  color: #fff;
  text-align: center;
  border-radius: 10px;
  padding: 5px;
  margin-top: -20px;
	font-family: 'Open Sans';

  /* Position the tooltip */
  position: absolute;
  z-index: 1;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}
#info_models{

  font-size: 12px;
}
#modellist{

  display: none;
  font-size: 16px;
}
#fabrics{

  display: none;
}
#feets{

  display: none;
}
#stealth{

  display: none;
}
#disquo{

  display: none;
}

#table{

  display: none;
}
#cup {
  display: none;

}
#cdown {
  display: none;

}
#sup {
  display: none;

}
#sdown {
  display: none;

}
.main-app {
  /*position: absolute;
  width: 100%;
  height: 100%;
  border: 1px #000000;
  top: 0px;
  left: 0px;
  z-index: 1;
  overflow: hidden;
  */
background-color: #FFFFFF;
border: 0px #ff0000;
  width: 100%;
  height: 100%;
}

.infotip{  
	font-family: 'Open Sans';
  font-weight: bold;
  font-size: 12px;
 }

.ControlPanel {
  position: absolute;
  width: auto;
  height: auto;
  left: calc(50% - 265px);
  bottom: 5px;
  border-radius: 10px;
  z-index: 5;
  background: white;
    border: 0px solid;
    background-color:rgba(60, 116, 96, 0.8);
    color: #ffffff;
    padding:6px;
}
.action-controll-panel {
  display: block;
  position: static;
  width: 40px;
  height: auto;
  border: 0px solid #999999;
  border-radius: 10px;
  margin-bottom: 5px;
  float: left;
  padding: 1px;
  margin: 1px;
  font-family: 'Open Sans';
  font-weight: bold;
  font-size: 10px;
  text-align: center;

  
}
.control-button {
    width: 32px;
    height: 32px;
    position: static;
    display: block;
    overflow: hidden;
    border-radius: 0%;
    border-style: none;
    border: 0px solid black;
/*    float: center; */
    cursor: pointer;
    background-size: contain;
    padding: 1px;
    border: 0px solid;
}



.configurator-panel-mat {
/*  position: absolute;
  width: 300px;
  height: 100%;
  right: 0px;
  top: 0px;
  z-index: 2;
  background: white;
  overflow-y: auto;
  overflow-x: hidden;
  border: 0px solid;
 */ 
 float:left;
 width: 300px;
 height: 100vh;
 top: 0px;
 background: white;
 overflow-y: auto;
 overflow-x: hidden;
}
.configurator-panel-mod {

  float: left;
  width: 265px;
  height: 100vh ;
  top: 0px;
  background: white;
  overflow-y: auto;
  overflow-x: hidden;

  /*position: absolute;
  float: left;
  width: 265px;
  height: 100% ;
  left: 0px;
  top: 0px;
  z-index: 2;
  background: white;
  overflow-y: auto;
  overflow-x: hidden;
  */
}
.disclaimer_logo {
  position: absolute;
  width: auto;
  height: auto ;

  background:transparent;
  color: #000000;
  border: 0px solid #000000;
  padding: 5px;

  right: 300px;
  top: 30px;
  z-index: 2;
  overflow-y: hidden;
  overflow-x: hidden;
  font-weight: bold;
  font-size: 16px;
  text-align: center;

  
}


.buttons-panel {
  width: 100%;
  height: 100%;
  padding: 5px;
}

.type-controll-panel {
  display: block;
  position: static;
  width: 250px;
  height: auto;
  border-bottom: 1px solid #999999;
  border-radius: 0px;
  margin-bottom: 5px;
  float: left;
  padding-bottom: 10px;
  
}
.type-controll-panel-mat {
  display: block;
  position: static;
  width: 270px;
  height: auto;
  border-bottom: 1px solid #999999;
  border-radius: 0px;
  margin-bottom: 5px;
  float: left;
  padding-bottom: 10px;
  
}
.mat-type-button {
  width: 70px;
  height: 70px;
  position: static;
  display: block;
  overflow: hidden;
  border-radius: 50%;
  border-style: none;
  border: 0px solid black;
  float: left;
  cursor: pointer;
  background-size: contain;
  padding: 1px;
}
.type-buttons-div-mat {
    width: auto;
    height: auto;
    position: static;
    display: block;
    min-height: 40px;
    max-height: 160px;
    padding-left: 2px;
    margin-right: 2px;
    min-width: 210px;
    max-width: 710px;
}

.mat-controll-panel {
  display: block;
  position: static;
  width: 70px;
  height: 100px;
  border: 0px solid #999999;
  border-radius: 10px;
  margin-bottom: 5px;
  float: left;
  padding: 1px;
  margin: 1px;
  font-family: 'Open Sans';
  font-weight: normal;
  font-size: 10px;
  text-align: center;
  margin: 0 auto;
  padding: 8px;  
}
.mod-controll-panel {
  display: block;
  position: static;
  width: 75px;
  height: 100px;
  border: 0px solid #999999;
  border-radius: 10px;
  margin-bottom: 5px;
  float: left;
  padding: 1px;
  margin: 1px;
  font-family: 'Open Sans';
  font-weight: normal;
  font-size: 10px;
  text-align: center;
	text-transform:uppercase;
	color:#000;
}




.controll-panel-header {
    height: auto;
    padding-left: 15px;
    margin-top: 5px;
    font-family: 'Open Sans';
    text-transform:uppercase;
}

.type-head-div {
    width: 100%;
    height: 20px;
    position: static;
    display: block;
}
.mod-type-button {
  width: 75px;
  height: 75px;
  position: static;
  display: block;
  overflow: hidden;
  border-radius: 5px;
  border-style: none;
  border: 0px solid black;
  float: left;
  cursor: pointer;
  background-size: contain;
  padding: 1px;
}

.mod-type-button:hover {
  transform: scale(2.0); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
  background-color:#ffffff;
 
}

.type-buttons-div-mod {
  width: auto;
  height: auto;
  position: static;
  display: block;
  min-height: 40px;
  max-height: 160px;
  padding-left: 2px;
  margin-right: 2px;
  min-width: 150px;
  max-width: 710px;
}


@media only screen and (max-width : 1080px) {

  .myContent{
    width: calc(100% - 320px);

  }
  .type-controll-panel {
    width: 140px;
  }
  .configurator-panel-mod {

   width: 160px;
   
  } 

  .mod-controll-panel {
    width: 60px;
  }

  .mod-type-button {
    width: 60px;

  }


  .tooltip:hover .tooltiptext {
    visibility: hidden;
  }
  
  .configurator-panel-mat {
   width:160px 
  }
  
  .type-controll-panel-mat {
    width: 152px;
  
  }

  .mat-type-button {
    width: 60px;
    height: 60px;
  }

  .type-buttons-div-mat {
  }
  
  .mat-controll-panel {

    width: 60px;
  }

  
  
  


  .type-buttons-div-mod {
  }

  .ControlPanel {
    left:calc(50% - 138px)
  }
  .action-controll-panel {
  
    width: auto;
  }
  .control-button {
    width: 16px;
    height: 16px;
  }
  
  .controll-panel-header{
  padding-left: 5px;
  margin-top: 5px;
  }

  .mod-type-button:hover {
    transform: none;
  }

}