.canvas {
    z-index: -10;
    cursor: grab;
}

body {
  cursor: grab;
}
  
.info_leyer {
  position: absolute;  
  top: 0px;
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;   
  z-index: 10;       
}

#info { 
  width: 100%;
  height: 30px;  		
  z-index: 999; 
}

#info p {
  color: rgb(255, 255, 255);  
  text-align: center; 
  font-size: 12px;
  font-weight: 400;		
}

#info img {
  filter: invert();
  width: 26px;
}

#info-mouse { 
  display: flex;
  align-items: center;
  justify-content: center;
  align-content: center;
  width: 100%;
  height: 100%;  		
  z-index: 10;   
}

#info-mouse img {
  filter: invert();
  width: 20px;
}

#info-mouse ul {
  width: 70px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;  
}

#info-mouse ul li {
  width: 40px;
  list-style: none;
  font-size: 14px;
  text-align: center;
  
}

canvas:active {				
    cursor: grabbing;
}

#submenu {
  display: none;
}

.button-controls {
  width: 94%;
  position: absolute;
  display: flex;
  bottom: 30px;
  align-items: center;
  justify-content: right;
  z-index: 1;
}

#btn-audio button {
  background-color: rgba(255, 255, 255, 0);
  color: rgb(0, 0, 0);
  border: 1px solid black;
  width:70px;
  height: 20px;
  margin-right: 10px;;
  border-radius: 12px;
  font-size: 11px;    
}

#btn-audio-white button {
  background-color:  rgb(255, 255, 255);
  color: rgb(255, 255, 255);
  border: 1.4px solid rgb(255, 255, 255);  
  width:30px;
  height: 30px;
  margin-right: 0px;;
  border-radius: 14px;
  font-size: 11px;
  display: flex;   
  align-items: center; 
  justify-content: center;
}

#btn-audio-white button:hover {
  background-color:  rgb(162, 255, 0);
  cursor: pointer;
}

#btn-audio-white button img {
  filter: invert(0);
  width: 14px;   
  height: 14px;
}

.button-controls-aqvam-left {
  height: 220px;
  width: 100px;
  position: absolute; 
  display: flex;
  flex-direction: column;
  left: 30px;
  bottom: 20px;  
  align-items: center;
  justify-content: right;
  z-index: 1;
}

.button-controls-jump {  
  height: 220px;
  width: 100px;
  position: absolute; 
  display: flex;
  flex-direction: column;
  left: 120px;
  bottom: 20px;  
  align-items: center;
  justify-content: right;
  z-index: 1;
} 

#btn-jump-to-column button img {
  max-height: 10px;
}

#btn-previous-column button img {
  max-height: 10px;
}
  
.button-controls-aqvam {
  height: 220px;
  width: 100px;
  position: absolute; 
  display: flex;
  flex-direction: column;
  right: 30px;
  bottom: 20px;  
  align-items: center;
  justify-content: right;
  z-index: 1;
}

#btn-start button, #btn-play button, #btn-pause button, #btn-count button, #btn-quantity button,#btn-calendar button, #btn-back button ,  #btn-cameraC button, #btn-cameraH button, #btn-hide-boxes1 button, #btn-hide-boxes2 button, #btn-hide-boxes3 button, #btn-jump-to-column button, #btn-previous-column button {
  background-color: rgb(0, 0, 0);
  color: rgb(255, 255, 255);
  border: 0px solid rgb(255, 255, 255);
  width:70px;
  height: 20px;
  margin-right: 10px;;
  border-radius: 12px;
  text-align: center;
  font-size: 9px;
  font-weight: 100;    
}
  
#btn-start button:hover , #btn-play button:hover , #btn-pause button:hover, #btn-count button:hover , #btn-quantity  button:hover, #btn-calendar button:hover, #btn-back button:hover, #btn-cameraC button:hover, #btn-cameraH button:hover, #btn-hide-boxes1 button:hover, #btn-hide-boxes2 button:hover,#btn-hide-boxes3 button:hover, #btn-jump-to-column button:hover, #btn-previous-column button:hover, #btn-audio-white button:hover  {
  cursor: pointer;
  border: 1px solid rgb(162, 255, 0);
  color: rgb(162, 255, 0);
  transform: scale(0.8);
  transition: all 0.2s ease-in-out
}

#btn-start button:hover , #btn-play button:hover , #btn-pause button:hover, #btn-count button:hover , #btn-quantity button:hover, #btn-calendar button:hover, #btn-back button:hover, #btn-cameraC button:hover, #btn-cameraH button:hover, #btn-hide-boxes1 button:hover, #btn-hide-boxes2 button:hover,#btn-hide-boxes3 button:hover, #btn-jump-to-column button:hover, #btn-previous-column button:hover, #btn-audio-white button:hover {
  cursor: pointer;
  border: 1px solid rgb(162, 255, 0);
  color: rgb(162, 255, 0);
  transform: scale(0.8);
  transition: all 0.2s ease-in-out;
}

#btn-start button.active,
#btn-play button.active,
#btn-pause button.active,
#btn-count button.active,
#btn-quantity button.active,
#btn-calendar button.active,
#btn-back button.active,
#btn-hide-boxes1 button.active,
#btn-hide-boxes2 button.active,
#btn-hide-boxes3 button.active,
#btn-jump-to-column button.active,
#btn-previous-column button.active,
#btn-audio-white button.active {
  border: 1px solid rgb(162, 255, 0);
  color: rgb(162, 255, 0);
  transform: scale(0.8);
  transition: all 0.2s ease-in-out;
}

#btn-play img, #btn-pause img {
  max-width: 10px;
  filter: invert(1);
}

#btn-count button, #btn-quantity button, #btn-calendar button{
  background-color: rgb(162, 255, 0);  
  border: 0px solid rgb(255, 255, 255); 
  color: rgb(0, 0, 0); 
  width:70px;
  height: 20px;
  margin-right: 10px;;
  border-radius: 12px;
  text-align: center;
  font-size: 9px;
  font-weight: 100;  
}

#btn-count button:hover,
#btn-quantity button:hover,
#btn-calendar button:hover
 {
  background-color: rgb(0, 0, 0);
  border: 1px solid rgb(162, 255, 0);
  color: rgb(255, 255, 255);
  transform: scale(0.8);
  transition: all 0.2s ease-in-out;
}

#btn-count button.active,
#btn-quantity button.active,
#btn-calendar button.active
 {
  background-color: rgb(9, 9, 9);
  border: 1px solid rgb(162, 255, 0);
  color: rgb(255, 255, 255);
  transform: scale(0.8);
  transition: all 0.2s ease-in-out;
}

#btn-hide-boxes1 button {
  background-color: rgb(45, 130, 28); 
  border: 0px solid  rgba(0, 0, 0, 0.5); 
  color: rgb(0, 0, 0); 
  width:70px;
  height: 20px;
  margin-right: 10px;;
  border-radius: 12px;
  text-align: center;
  font-size: 9px;
  font-weight: 100;  
}

#btn-hide-boxes1 button.active {  
  background-color: rgb(130, 245, 88);
  border: 1px solid rgb(162, 255, 0); 
  color: rgb(60, 60, 60);
  transform: scale(0.8);
  transition: all 0.2s ease-in-out;
}

#btn-hide-boxes2 button {
  background-color:  rgb(47, 90, 111);   
  border: 1px solid rgba(0, 0, 0, 0.5);
  color: rgba(0, 0, 0, 0.5); 
  width:70px;
  height: 20px;
  margin-right: 10px;;
  border-radius: 12px;
  text-align: center;
  font-size: 9px;
  font-weight: 100;  
}

#btn-hide-boxes2 button.active {  
  background-color:  rgb(0, 138, 209);  
  color: rgb(60, 60, 60);
  transform: scale(0.8);
  transition: all 0.2s ease-in-out;
}
#btn-hide-boxes3 button {
  background-color: rgb(145, 141, 141);   
  border: 1px solid rgb(0, 0, 0); 
  color: rgb(0, 0, 0); 
  width:70px;
  height: 20px;
  margin-right: 10px;;
  border-radius: 12px;
  text-align: center;
  font-size: 9px;
  font-weight: 100;  
}

#btn-hide-boxes3 button.active {  
  background-color:  rgb(255, 255, 255);  
  color: rgb(60, 60, 60);
  transform: scale(0.8);
  transition: all 0.2s ease-in-out;
}

.counts {
  width: 100%;
  height: 50px;
  position: absolute;
  display: flex;
  align-items: top;
  justify-content: center;
  bottom: 30px;
  z-index: 10;  
  
}

.counts ul {  
  width: 20%;
  display: flex;
  list-style-type:none;
  flex-direction: row;
  justify-content: space-between;
}

.counts ul li {
  font-size: 14px;
  font-weight: 500;
  font-family:'Gill Sans', 'Gill Sans MT', 'Trebuchet MS', sans-serif;
}

.counts ul li.u {
  display: flex;
  align-items: center;
  justify-content: center;  
 width: 36px;
  height: 36px;
  border: 1px solid #0066ff;
  border-radius: 50px;
  color: #0066ff;
}

.counts ul li.d {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid #00ff95;
  border-radius: 50px;
  color: #00ff95;
}

.counts ul li.c {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid #09ff00;
  border-radius: 50px;
  color: #09ff00;
}

.counts ul li.m {
   display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid #f7fa5e;
  border-radius: 50px;
  color: #f7fa5e;
}

.counts ul li.dm {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid #ff8400;
  border-radius: 50px;
  color: #ff8400;
}

.counts ul li.cm {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid #ff0000;
  border-radius: 50px;
  color: #ff0000;
}

@media (max-width: 900px) {
  .counts {   
    width: 100%; 
  }

  .counts ul {  
    width: 56%;  
    justify-content: space-around;
  }
}


@media (max-width: 724px) {
  .counts {  
    width: 100%;
    height: 50px;
    position: absolute;
    display: flex;
    align-items: top;
    justify-content: center;
    top: 70px
  }

  .counts ul {  
    width: 86%; 
    justify-content: space-around;
  }

  .counts ul li {
    font-size: 10px;
  }

  .counts ul li.u,
.counts ul li.d,
.counts ul li.c,
.counts ul li.m,
.counts ul li.dm,
.counts ul li.cm {
  width: 30px;
  height: 30px;
}


}

@media (max-width: 724px) {  
  /* da sostare in data */

  .button-controls-aqvam { 
    bottom: -62px;
  }

  .button-controls-jump {     
    bottom: -62px; 
  }  

  .button-controls-aqvam-left { 
    bottom: -62px;     
  }

  #btn-start button , #btn-play button , #btn-pause button , #btn-count button , #btn-quantity button, #btn-calendar button button, #btn-back button , #btn-camera button , #btn-audio button, #btn-cameraC button, #btn-cameraH button, #btn-hide-boxes1 button, #btn-hide-boxes2 button, #btn-hide-boxes3 button, #btn-jump-to-column button, #btn-previous-column button  {
    width:66px;
    height: 16px;
    border-radius: 12px;
    font-size: 7px;
    font-weight: 100;    
  }

}