:root{


  --cor-branco: #fff;
  --roxo:#c811e0;
  --roxo-fraco:#fae8fc;
  --vermelho-fraco:#f7dce1;
  --vermelho-medio:#ff0000;
  --vermelho-forte:#c11717;
  
  --cinza-fraco:#efefef;
  --cinza-fraco-medio:#d3d1d1;
  --cinza-medio:#939393;
  --cinza-medio-forte:#9c9c9c;
  --cinza-forte:#595959;
  --cinza-forte666:#666666;
  
  
  --verde-fraco:#cff7cf;
  --verde-medio:#008000;
  --verde-forte:#0a540a;
  --verde-limao:#4381a3;
  
  --amarelo-fraco:#f6f7d4;
  --amarelo-medio:#ffff00;
  --amarelo-forte:#ffd700;
  
  --azul-fraco:#d9ecf7;
  --azul-fraco-medio:#a8cbdd;
  --azul-medio:#1f8cc6;
  --azul-forte:#44559F;
  --azul-marinho-forte:#488aad;
  --azul-marinho-fraco:#48a5ad;
  --azul-barraincial:#2196f3;
  --azul-barraincialforte:#1182d8;
  
  
  
  --laranja-fraco:#f9bf59;
  --laranja-fraco-medio:#ff8a29;
  --laranja-medio:#f99e00;
  --laranja-forte:#db6d13;
  
  --terra-fraco:#d3c7b1;
  --terra-medio:#9e8760;
  --terra-forte:#5b554a;
  
  --rosa-fraco:#fccff4;
  --rosa-medio:#fc67e1;
  --rosa-forte:#d602af;
  
  --roxo-fraco:#d6a5f7;
  --roxo-medio:#af46f4;
  --roxo-forte:#6e08b2;
  
  --marinho-fraco:#b5fcf5;
  --marinho-medio:#02f4dc;
  --marinho-forte:#10b7a6;
  
  
  
  
  }
  
  
html, body {font-family: 'Roboto', sans-serif;font-weight:400;}
body {background:#F6F8FA;}
.floatleft {float:left}
.floatright {float:right}
.alignleft {float:left;margin-right:15px;margin-bottom: 15px}
.alignright {float:right;margin-left:15px;margin-bottom: 15px}
.aligncenter {display:block;margin:0 auto 15px}
a:focus {outline:0px solid}
img {max-width:100%;height:auto}
.fix {overflow:hidden}
p {margin:0 0 15px;}
h1, h2, h3, h4, h5, h6 {
  margin: 0 0 10px;
  font-weight:700;
}
a {transition: all 0.3s ease 0s;text-decoration:none;}
a:hover {
  color: #00c292;
  text-decoration: none;
}
a:active, a:hover, a:focus {
  outline: 0 none;
  text-decoration: none;
}
ul{
list-style: outside none none;
margin: 0;
padding: 0
}
.clear{clear:both}
body {margin: 0;
  padding: 0}

/*------------DEMETRIUS------------------*/
/*------------DEMETRIUS------------------*/
/*------------DEMETRIUS------------------*/

/*------------DEMETRIUS------------------*/
/*------------DEMETRIUS------------------*/
/*------------DEMETRIUS------------------*/


/*----------------------------------------*/
/*  2.  Header Top CSS
/*----------------------------------------*/
header{display: flex;  justify-content: space-between;	background:#37517E; width: 100%; margin-bottom: 5px;}
header div.logo{padding:10px; width:25%;}
header div.logo img{width:80%;}


header div.menualto{width: 40%; color:#fff; margin: 0 auto; text-align: center; font-size: 0.9em; line-height:1; padding-top:20px ;}



header div.relogio{font-family: 'Orbitron', sans-serif; line-height: 1; width: 25%; color:#fff;font-size: 1.2em; margin-top: -5px;}
header div.relogio div.primeira{ width:95%; float:right ; text-align: right; padding-right:7px ; }
header div.relogio div small{font-size: 0.6em;}

div.main{width: 100%; min-height:400px;  align-items: center;}


 div.main div.div-circular {
      width: 100px;
      height: 100px;
      background-color: var(--azul-marinho-forte);
      color:var(--cor-branco);
      text-align: center;
      float:left;
      margin: 10px;
      border-radius: 50%;
      font-size: 0.9em;
    }

     div.main div.div-circular p{margin:15px; margin-top: 20px;}
      div.main div.div-circular p b{font-size: 1em;}

      div.main h2.titulo-indicadores{font-size: 0.8em; padding: 5px; color: var(--cinza-forte);}





div.main div.caixa-obri{margin:1px; width:7%; text-align: center; display: inline-block ; background-color: rgb(241, 237, 231); vertical-align: top; border-radius: 3px;}
div.main div.caixa-obri div.grafico{width:60% ; height: 60%; border-radius: 50%; min-height: 40px; line-height: 2; margin: 0 auto; margin-bottom: 5px;}
div.main div.caixa-obri div.grafico h3{margin:0 auto; width:80%; color: #fff; font-size: 0.9em; text-shadow: 1px 1px 2px black; padding-top: 10px;}
div.main div.caixa-obri div.texto{width:100%; height: 25px; color:#000; margin: 0 auto;  font-size:0.3em;}


div.graficosdeusuarios{ margin:6px; width: 9%; float: left;}
div.graficosdeusuarios div.eficiencia0{ width:100%;margin: 0 auto; text-align: center;box-sizing: border-box;}


div.graficosdeusuarios div.eficiencia0 p{ width: 100%; z-index: 999; font-size: 1.8em; 
  font-weight: 600; margin-top:40px; text-align: center;text-shadow: 1px 1px #363535; }
div.graficosdeusuarios div.eficiencia0 p.pessimo{color: var(--vermelho-forte);}
div.graficosdeusuarios div.eficiencia0 p.ruim{color: var(--laranja-forte);}
div.graficosdeusuarios div.eficiencia0 p.medio{color: var(--amarelo-forte);}
div.graficosdeusuarios div.eficiencia0 p.bom{color: var(--verde-medio);}
div.graficosdeusuarios div.eficiencia0 p.otimo{color: var(--azul-medio);}
div.graficosdeusuarios div.eficiencia0 img{width:90%; margin-top: -85px;}
div.graficosdeusuarios div.eficiencia0 div.texto{font-size: 0.8em; color:var(--azul-marinho-forte);}

div.caixa{
  width:13%; height: auto;float: left;}
div.caixa canvas.circulos100{
  width:100%;}
div.caixa p{
  width:100%; font-weight: 500; font-size: 0.8em; text-align: center;}

footer{display: flex;  justify-content: center;	background:#37517E; width: 100%;}

footer div p {
  
    margin: 0 auto;
    font-size: 12px;
    color: #fff;
    padding: 10px;
    text-align: center;
}