/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 12 de abr. de 2021, 14:17:41
    Author     : marangoni
*/

/********************** tamanho dos botões de comando *************************/
.button-command-mini {
    width: 32px;
    height: 32px; 
}
.button-command-small {
    width: 51%;
    height: 50%;  
}
.button-command-normal {
    width: 54%;
    height: 53%;  
}
.button-command-medium, .button-command-large {
    width: 54%;
    height: 53%;  
}


/******************* Cores dos botões circulo externo *************************/
.button-command-gray {
    background-image: -webkit-linear-gradient(top, #666, #d2d6de 100% );
    background-image: -moz-linear-gradient(top, #666, #d2d6de 100% );
    background-image: -ms-linear-gradient(top, #666, #d2d6de 100% );
    background-image: -o-linear-gradient(top, #666, #d2d6de 100% );
    background-image: linear-gradient(top, #666, #d2d6de 100% );
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
    border-radius: 100px;
    box-shadow: inset #1c1c1c 0px 5px 6px;
    margin: auto;
    position: absolute;
}

.button-command-red {
    background-image: -webkit-linear-gradient(top, #ff0000, #ff9999 100% );
    background-image: -moz-linear-gradient(top, #ff0000, #ff9999 100% );
    background-image: -ms-linear-gradient(top, #ff0000, #ff9999 100% );
    background-image: -o-linear-gradient(top, #ff0000, #ff9999 100% );
    background-image: linear-gradient(top, #ff0000, #ff9999 100% );
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
    border-radius: 100px;
    box-shadow: inset rgba(230, 0, 0,0.2) 0px 5px 6px ;
    margin: auto;
    position: absolute;
}
.button-command-green {
    background-image: -webkit-linear-gradient(top, #00ff00, #b3ffb3 100% );
    background-image: -moz-linear-gradient(top, #00ff00, #b3ffb3 100% );
    background-image: -ms-linear-gradient(top, #00ff00, #b3ffb3 100% );
    background-image: -o-linear-gradient(top, #00ff00, #b3ffb3 100% );
    background-image: linear-gradient(top, #00ff00, #b3ffb3 100% );
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
    border-radius: 100px;
    box-shadow: inset rgba(0, 255, 0,0.2) 0px 5px 6px ;
    margin: auto;
    position: absolute;
}
/******************* Cores dos botões circulo interno *************************/
.butt-gray {
    background-image: -webkit-linear-gradient(top, #d2d6de, #333 70%, #444 100% );
    background-image: -moz-linear-gradient(top, #d2d6de, #333 70%, #444 100% );
    background-image: -ms-linear-gradient(top, #d2d6de, #333 70%, #444 100% );
    background-image: -o-linear-gradient(top, #d2d6de, #333 70%, #444 100% );
    background-image: linear-gradient(top, #d2d6de, #333 70%, #444 100% );
    background-color: #ccc;
}
.butt-red {
    background-image: -webkit-linear-gradient(top, #ff9999, #ff0000 70%, #ff0000 100% );
    background-image: -moz-linear-gradient(top, #ff9999, #ff0000 70%, #ff0000 100% );
    background-image: -ms-linear-gradient(top, #ff9999, #ff0000 70%, #ff0000 100% );
    background-image: -o-linear-gradient(top, #ff9999, #ff0000 70%, #ff0000 100% );
    background-image: linear-gradient(top, #ff9999, #ff0000 70%, #ff0000 100% );
    background-color: #ff9999;
}
.butt-green {
    background-image: -webkit-linear-gradient(top, #b3ffb3, #00ff00 70%, #00ff00 100% );
    background-image: -moz-linear-gradient(top, #b3ffb3, #00ff00 70%, #00ff00 100% );
    background-image: -ms-linear-gradient(top, #b3ffb3, #00ff00 70%, #00ff00 100% );
    background-image: -o-linear-gradient(top, #b3ffb3, #00ff00 70%, #00ff00 100% );
    background-image: linear-gradient(top, #b3ffb3, #00ff00 70%, #00ff00 100% );
    background-color: #b3ffb3;
}


.butt {
  position: absolute;
  width: 81%;
  height: 81%;
  left: 9.8%;
  top: 10%;
  cursor: pointer;
  -moz-border-radius: 100px;  
  -webkit-border-radius: 100px;  
  border-radius: 100px;  
  background-repeat: no-repeat;
  -webkit-box-shadow: rgba(0,0,0,.4) 0 3px 6px;  
  -moz-box-shadow: rgba(0,0,0,.4) 0 3px 6px;  
  box-shadow: rgba(0,0,0,.4) 0 3px 6px;
  -webkit-transition: all .1s ease-in;
  -moz-transition: all .1s ease-in;
  -ms-transition: all .1s ease-in;
  -o-transition: all .1s ease-in;
  transition: all .1s ease-in;
}

/**************** Demais componente dos botões *******************************/

.butt-text-mini {
/*    font-weight: bold;*/
    font-size: 7px;
    color: #000000;
    /*text-shadow: 0px 1px 0px #fff;*/
    text-align: center;
    padding-top: 38%;
}

.butt-text-small {
/*    font-weight: bold;*/
    font-size: 10px;
    color: #000;
    text-align: center;
    padding-top: 38%;
}
.butt-text-normal {
    /*font-weight: bold;*/
    font-size: 18px;
    color: #888;
    text-shadow: 0px 1px 0px #fff;
    text-align: center;
    padding-top: 38%;
}
.butt-text-medium {
    /*font-weight: bold;*/
    font-size: 22px;
    color: #888;
    text-shadow: 0px 1px 0px #fff;
    text-align: center;
    padding-top: 37%;
}
.butt-text-large {
    /*font-weight: bold;*/
    font-size: 34px;
    color: #888;
    text-shadow: 0px 1px 0px #fff;
    text-align: center;
    padding-top: 38%;
}


.butt:hover, .butt-mini:hover {
  background-position: 0 0px;
  -webkit-box-shadow: rgba(0,0,0,.4) 0 3px 8px;  
  -moz-box-shadow: rgba(0,0,0,.4) 0 3px 8px;  
  box-shadow: rgba(0,0,0,.4) 0 3px 8px;
}

.butt:active, .butt-mini:active {
  width: 73%;
  height: 73%;
  margin: 2px 0 0 2px;   
  border-bottom: 2px;
  font-size: 50%;
  color: #777;
  -webkit-box-shadow: inset rgba(0,0,0,.5) 0px 3px 8px;
  -moz-box-shadow: inset rgba(0,0,0,.5) 0px 3px 8px;
  box-shadow: inset rgba(0,0,0,.5) 0px 3px 8px;
}

.butt:active, .butt-small:active {
  width: 76%;
  height: 77%;
  margin: 2px 0 0 2px;   
  border-bottom: 2px;
  font-size: 50%;
  color: #777;
  -webkit-box-shadow: inset rgba(0,0,0,.5) 0px 3px 8px;
  -moz-box-shadow: inset rgba(0,0,0,.5) 0px 3px 8px;
  box-shadow: inset rgba(0,0,0,.5) 0px 3px 8px;
}

.butt:active, .butt-normal:active, .butt-medium:active, .butt-large:active {
  width: 76%;
  height: 77%;
  margin: 2px 0 0 2px;   
  border-bottom: 2px;
  font-size: 50%;
  color: #777;
  -webkit-box-shadow: inset rgba(0,0,0,.5) 0px 3px 8px;
  -moz-box-shadow: inset rgba(0,0,0,.5) 0px 3px 8px;
  box-shadow: inset rgba(0,0,0,.5) 0px 3px 8px;
}

.center-command-button-mini {
  margin: auto;
  width: 44%;
  padding-top: 1px;
}

.center-command-button-small {
  margin: auto;
  width: 57%;
  padding-top: 5px;
}

.center-command-button-normal {
  margin: auto;
  width: 57%;
  padding-top: 5px;
}

.center-command-button-medium, .center-command-button-large {
  margin: auto;
  width: 57%;
  padding-top: 5px;
}