html{
  overflow: hidden;
  font-family: 'M PLUS Code Latin', sans-serif;
  background-color: rgb(255, 255, 255);
}


.nivel1a {
  font-size: 2vh;
  color: rgb(0, 0, 0);
  position: absolute;
  top: -55%;
  right: 5%;
  }
  .nivel1b {
    font-size: 1.5vh;
    color: rgb(0, 0, 0);
    position: absolute;
    top: 30%;
    right: 5%;
    }
    .nivel1c {
      font-size: 1.5vh;
      color: rgb(0, 0, 0);
      position: absolute;
      top: 105%;
      right: 5%;
      }


.neco {
font-size: 3vh;
color: rgb(0, 0, 0);
position: relative;
top: 30%;
left: 10%;
}
.inp{
  top: 5%;
  position: relative;
  left: 22%;
  font-size: 2.5vh;
  width: 4.5vw;
  height: 4vh;
  background-color: rgb(255, 255, 255);
  color: rgb(0, 0, 0);
  text-align: center;
}
.porce{
  position: relative;
  font-size: 2vh;

  color: rgb(0, 0, 0);
  text-align: center;
}
.need{
  position: relative;
  font-size: 2vh;
  
  color: rgb(0, 0, 0);
  text-align: center;
}
.falta{
  position: relative;
  font-size: 3vh;

  color: rgb(0, 0, 0);
  text-align: center;
}
.nivel {
  position: relative;
  font-size: 3vh;
  top: 2vh;
  color: azure;
  text-align: center;
}
.nomecab1{

  font-size: 1.8vh;
  color: blanchedalmond;
  position: relative;
  top: -25%;
  left: 37%;
}
.container {  display: grid;
  
    width: 100vw;
    height: 100vh;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    gap: 1px 1px;
    grid-auto-flow: row;
    grid-template-areas:
      ". . . . . . . . . . ."
      ". . . nclientes1 saude1 mrhmrn1 ap1 vr1 rc1 financeiros1 ."
      ". . . nclientes2 saude2 mrhmrn2 ap2 vr2 rc2 financeiros2 ."
      ". . . . . . . . . . ."
      ". . . topocabecalho saude3 mrhmrn3 ap3 vr3 rc3 financeiros3 ."
      ". . . nivel1 saude4 mrhmrn4 ap4 vr4 rc4 financeiros4 ."
      ". . . nivel2 saude5 mrhmrn5 ap5 vr5 rc5 finaceiros5 ."
      ". . . nivel3 saude6 mrhmrn6 ap6 vr6 rc6 finaceiros6 ."
      ". . . nivel4 saude7 mrhmrn7 ap7 vr7 rc7 financeiros7 ."
      ". . . nivel5 saude8 mrhmrn8 ap8 vr8 rc8 financeiros8 ."
      ". . . . . . . . . . ."
      ". . . . . . . drimtec drimtec by ."
      ". . . . . . . . . by ."
      ". . . . . . . . . . .";
  }
  
  .nclientes1 { 
    border-radius: 0.5vh;
    border-style: groove;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
      grid-area: nclientes1;
      background-color: rgb(24, 119, 136);
    }
  
  .nclientes2 { 
      grid-area: nclientes2;
      background-color: rgb(255, 231, 231);
      border-radius: 1vh;
     }
  
  .saude1 { 
    border-radius: 1vh;
    grid-area: saude1;
    border-style: groove;
    background-color: rgb(24, 119, 136);
}
  
  .saude2 { 
    grid-area: saude2;
    background-color: rgb(240, 61, 61);
    border-radius: 1vh;
}
  
  .mrhmrn2 {
     grid-area: mrhmrn2; 
    background-color: rgb(202, 76, 76);
    border-radius: 1vh;
}
  
  .mrhmrn1 {
    border-radius: 0.5vh;
     grid-area: mrhmrn1;
    border-style: groove;
    background-color: rgb(24, 119, 136);
 }
  
  .ap1 { 
    border-radius: 1vh;
    grid-area: ap1;
    border-style: groove;
    background-color: rgb(24, 119, 136); }
  
  .ap2 { 
    grid-area: ap2;
    background-color: rgb(243, 41, 41);
    border-radius: 1vh; }
  
  .vr1 {
    border-radius: 0.5vh;
     grid-area: vr1; 
    border-style: groove;
    background-color: rgb(24, 119, 136);}
  
  .vr2 { 
    grid-area: vr2;
    background-color: black;
    border-radius: 1vh; }
  
  .rc1 { 
    border-radius: 1vh;
    grid-area: rc1;
    border-style: groove;
    background-color: rgb(24, 119, 136); }
  
  .rc2 {
     grid-area: rc2;
    background-color: black;
    border-radius: 1vh; }
  
  .financeiros1 { 
    border-radius: 0.5vh;
    grid-area: financeiros1; 
    border-style: groove;
    background-color: rgb(24, 119, 136);}
  
  .financeiros2 { 
    grid-area: financeiros2; 
    background-color: black;
    border-radius: 1vh;}
  
  .saude3 { 
    border-radius: 0.5vh;
    border-style: groove;
    grid-area: saude3; 
    background-color: rgb(24, 119, 136);}
  
  .saude4 { 
    grid-area: saude4;
    background-color: rgb(240, 215, 215);
    border-style: solid;
    border-radius: 1vh;
  }
  
  .saude5 { 
    grid-area: saude5; 
    background-color: rgb(240, 215, 215);
    border-style: solid;
    border-radius: 1vh;
  
  }
  
  .saude6 { 
    grid-area: saude6;
    background-color: rgb(240, 215, 215);
    border-style: solid;
    border-radius: 1vh; }
  
  .saude7 {
     grid-area: saude7;
    background-color: rgb(240, 215, 215);
    border-style: solid;
    border-radius: 1vh; }
  
  .saude8 { 
    grid-area: saude8;
    background-color: rgb(240, 215, 215);
    border-style: solid ;
    border-radius: 1vh; }
  
  .mrhmrn3 {
    border-radius: 1vh;
    border-style: groove;
    grid-area: mrhmrn3; 
    background-color: rgb(24, 119, 136);}
  
  .mrhmrn4 {
     grid-area: mrhmrn4; 
    background-color: rgb(240, 215, 215);
    border-style: solid;
    border-radius: 1vh;}
  
  .mrhmrn5 { 
    grid-area: mrhmrn5;
    background-color: rgb(240, 215, 215);
    border-style: solid;
    border-radius: 1vh; }
  
  .mrhmrn6 { 
    grid-area: mrhmrn6;
    background-color: rgb(240, 215, 215);
    border-style: solid;
    border-radius: 1vh; }
  
  .mrhmrn7 { 
    grid-area: mrhmrn7;
    background-color: rgb(240, 215, 215);
    border-style: solid;
    border-radius: 1vh;}
  
  .mrhmrn8 {
     grid-area: mrhmrn8;
    background-color: rgb(240, 215, 215);
    border-style: solid;
    border-radius: 1vh; }
  
  .ap3 { 
    border-radius: 0.5vh;
    border-style: groove;
    grid-area: ap3;
    background-color: rgb(24, 119, 136); }
  
  .ap4 { 
    grid-area: ap4;
    background-color: rgb(240, 215, 215);
    border-style: solid;
    border-radius: 1vh; }
  
  .ap5 { grid-area: ap5;
    background-color: rgb(240, 215, 215);
    border-style: solid;
    border-radius: 1vh; }
  
  .ap6 { grid-area: ap6; 
    background-color: rgb(240, 215, 215);
    border-style: solid;
    border-radius: 1vh;}
  
  .ap7 { grid-area: ap7; 
    background-color: rgb(240, 215, 215);
    border-style: solid;
    border-radius: 1vh;}
  
  .ap8 { grid-area: ap8;
    background-color: rgb(240, 215, 215);
    border-style: solid;
    border-radius: 1vh; }
  
  .vr3 { 
    border-radius: 1vh;
    border-style: groove;
    grid-area: vr3;
    background-color: rgb(24, 119, 136); }
  
  .vr4 { grid-area: vr4; 
    background-color: rgb(240, 215, 215);
    border-style: solid;
    border-radius: 1vh;}
  
  .vr5 { grid-area: vr5; 
    background-color: rgb(240, 215, 215);
    border-style: solid;
    border-radius: 1vh;}
  
  .vr6 { grid-area: vr6;
    background-color: rgb(240, 215, 215);
    border-style: solid;
    border-radius: 1vh; }
  
  .vr7 { grid-area: vr7; 
    background-color: rgb(240, 215, 215);
    border-style: solid;
    border-radius: 1vh;}
  
  .vr8 { grid-area: vr8; 
    background-color: rgb(240, 215, 215);
    border-style: solid;
    border-radius: 1vh;}
  
  .rc3 { 
    border-radius: 0.5vh;
    border-style: groove;
    grid-area: rc3; 
    background-color: rgb(24, 119, 136);}
  
  .rc4 { grid-area: rc4;
    background-color: rgb(240, 215, 215);
    border-style: solid;
    border-radius: 1vh; }
  
  .rc5 { grid-area: rc5;
    background-color: rgb(240, 215, 215);
    border-style: solid;
    border-radius: 1vh; }
  
  .rc6 { grid-area: rc6;
    background-color: rgb(240, 215, 215);
    border-style: solid;
    border-radius: 1vh; }
  
  .rc7 { grid-area: rc7;
    background-color: rgb(240, 215, 215);
    border-style: solid;
    border-radius: 1vh;}
  
  .rc8 { grid-area: rc8;
    background-color: rgb(240, 215, 215);
    border-style: solid;
    border-radius: 1vh; }
  
  .financeiros3 { 
    border-radius: 1vh;
    border-style: groove;
    grid-area: financeiros3; 
    background-color: rgb(24, 119, 136);}
  
  .financeiros4 { grid-area: financeiros4;
    background-color: rgb(240, 215, 215);
    border-style: solid;
    border-radius: 1vh; }
  
  .finaceiros5 { grid-area: finaceiros5;
    background-color: rgb(240, 215, 215);
    border-style: solid;
    border-radius: 1vh; }
  
  .finaceiros6 { grid-area: finaceiros6; 
    background-color: rgb(240, 215, 215);
    border-style: solid;
    border-radius: 1vh;}
  
  .financeiros7 { grid-area: financeiros7; 
    background-color: rgb(240, 215, 215);
    border-style: solid;
    border-radius: 1vh;}
  
  .financeiros8 { grid-area: financeiros8;
    background-color: rgb(240, 215, 215);
    border-style: solid;
    border-radius: 1vh; }
  
  .nivel1 { 
    grid-area: nivel1;
    background-color: rgb(243, 158, 158);
    border-style: solid;
    border-radius: 1vh;}
  
  .nivel2 { grid-area: nivel2;
    background-color: rgb(238, 129, 129);
    border-style: solid;
    border-radius: 1vh;}
  
  .nivel3 { grid-area: nivel3;
    background-color: rgb(241, 80, 80);
    border-style: solid;
    border-radius: 1vh;}
  
  .nivel4 { grid-area: nivel4;
    background-color: rgb(235, 53, 53);
    border-style: solid;
    border-radius: 1vh;}
  
  .nivel5 { grid-area: nivel5; 
    background-color: rgb(240, 0, 0);
    border-style: solid;
    border-radius: 1vh;}
  
  .topocabecalho {
    border-radius: 1vh;
    border-style: groove;
    grid-area: topocabecalho; 
    background-color: rgb(24, 119, 136);}
  
  .by { 
    grid-area: by; 
    background-color: rgb(255, 255, 255);
    width: 100%;
    height: 100%;
  }
  
  .drimtec { grid-area: drimtec; 
    background-color: rgb(255, 255, 255);}