h2.resultadodistancia {
  text-align: center;
}


input#totaldistancia{
  text-align: center;
}
#totaldistancia {
  
  width: 150px;
  height: 25px;
    margin-left: -75px;
    /* Metade da largura do elemento */
    position: absolute;
    left: 50%;

}

input#input-potencia {
  width: auto;
  border: none;
  outline: none;
  border-radius: 15px;
  padding: 1em;
  background-color: #ccc;
  -webkit-box-shadow: inset 2px 5px 10px rgba(0,0,0,0.3);
  box-shadow: inset 2px 5px 10px rgba(0,0,0,0.3);
-webkit-transition: 300ms ease-in-out;
  transition: 300ms ease-in-out;
}

input#input-potencia:focus {
  background-color: white;
  -webkit-transform: scale(1.05);
      -ms-transform: scale(1.05);
          transform: scale(1.05);
  -webkit-box-shadow:  13px 13px 100px #969696,
             -13px -13px 100px #ffffff;
          box-shadow:  13px 13px 100px #969696,
             -13px -13px 100px #ffffff;
}

input#input-distancia {
  width: auto;
  border: none;
  outline: none;
  border-radius: 15px;
  padding: 1em;
  background-color: #ccc;
  -webkit-box-shadow: inset 2px 5px 10px rgba(0,0,0,0.3);
  box-shadow: inset 2px 5px 10px rgba(0,0,0,0.3);
-webkit-transition: 300ms ease-in-out;
  transition: 300ms ease-in-out;
}

input#input-distancia:focus {
  background-color: white;
  -webkit-transform: scale(1.05);
      -ms-transform: scale(1.05);
          transform: scale(1.05);
  -webkit-box-shadow:  13px 13px 100px #969696,
             -13px -13px 100px #ffffff;
          box-shadow:  13px 13px 100px #969696,
             -13px -13px 100px #ffffff;
}

input#quant-fusao {
  width: auto;
  border: none;
  outline: none;
  border-radius: 15px;
  padding: 1em;
  background-color: rgb(245, 233, 166);
  -webkit-box-shadow: inset 2px 5px 10px rgba(0,0,0,0.3);
  box-shadow: inset 2px 5px 10px rgba(0,0,0,0.3);
-webkit-transition: 300ms ease-in-out;
  transition: 300ms ease-in-out;
}

input#quant-fusao:focus {
  background-color: rgb(250, 173, 101);
  -webkit-transform: scale(1.05);
      -ms-transform: scale(1.05);
          transform: scale(1.05);
  -webkit-box-shadow:  13px 13px 100px #969696,
             -13px -13px 100px #ffffff;
          box-shadow:  13px 13px 100px #969696,
             -13px -13px 100px #ffffff;
}

input#media-perda-f {
  width: auto;
  border: none;
  outline: none;
  border-radius: 15px;
  padding: 1em;
  background-color: rgb(245, 233, 166);
  -webkit-box-shadow: inset 2px 5px 10px rgba(0,0,0,0.3);
  box-shadow: inset 2px 5px 10px rgba(0,0,0,0.3);
-webkit-transition: 300ms ease-in-out;
  transition: 300ms ease-in-out;
}

input#media-perda-f:focus {
  background-color: rgb(250, 173, 101);
  -webkit-transform: scale(1.05);
      -ms-transform: scale(1.05);
          transform: scale(1.05);
  -webkit-box-shadow:  13px 13px 100px #969696,
             -13px -13px 100px #ffffff;
          box-shadow:  13px 13px 100px #969696,
             -13px -13px 100px #ffffff;
}



article.\31 grupo4 {
  display: flex;
  width: auto;
  justify-content: space-evenly;
  background-repeat: no-repeat;
  background-position: center;
  background-size:cover;

}



#theme-button{
 

  --width: 150px;
  padding: 10px 20px;
  font-size: 20px;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  --timing: 2s;


  text-transform: uppercase;
  border-radius: 8px;
  font-size: 17px;
  font-weight: 500;
  color: #ffffff;
  text-shadow: none;
  background: transparent;
  box-shadow: transparent;
  border: 1px solid #ffffff;
  transition: 0.5s ease;
  user-select: none;
}

#theme-button:hover {
  background-image: -webkit-gradient(linear, left top, right top, from(rgb(250, 82, 82)), color-stop(16.65%, rgb(250, 82, 82)), color-stop(16.65%, rgb(190, 75, 219)), color-stop(33.3%, rgb(190, 75, 219)), color-stop(33.3%, rgb(76, 110, 245)), color-stop(49.95%, rgb(76, 110, 245)), color-stop(49.95%, rgb(64, 192, 87)), color-stop(66.6%, rgb(64, 192, 87)), color-stop(66.6%, rgb(250, 176, 5)), color-stop(83.25%, rgb(250, 176, 5)), color-stop(83.25%, rgb(253, 126, 20)), color-stop(100%, rgb(253, 126, 20)), to(rgb(250, 82, 82)));
  background-image: linear-gradient(to right, rgb(250, 82, 82), rgb(250, 82, 82) 16.65%, rgb(190, 75, 219) 16.65%, rgb(190, 75, 219) 33.3%, rgb(76, 110, 245) 33.3%, rgb(76, 110, 245) 49.95%, rgb(64, 192, 87) 49.95%, rgb(64, 192, 87) 66.6%, rgb(250, 176, 5) 66.6%, rgb(250, 176, 5) 83.25%, rgb(253, 126, 20) 83.25%, rgb(253, 126, 20) 100%, rgb(250, 82, 82) 100%);
  -webkit-animation: var(--timing) linear dance6123 infinite;
          animation: var(--timing) linear dance6123 infinite;
  -webkit-transform: scale(1.1) translateY(-1px);
      -ms-transform: scale(1.1) translateY(-1px);
          transform: scale(1.1) translateY(-1px);
}

@-webkit-keyframes dance6123 {
  to {
    background-position: var(--width);
  }
}

@keyframes dance6123 {
  to {
    background-position: var(--width);
  }
}


.pagina1{
  text-decoration: none;

  padding: 10px 20px;
  font-size: 20px;
  text-transform: uppercase;
  border-radius: 8px;
  font-size: 17px;
  font-weight: 500;
  color: #ffffff;
  text-shadow: none;
  background: transparent;
  box-shadow: transparent;
  border: 1px solid #ffffff;
  transition: 0.5s ease;
  user-select: none;
}

.pagina1:hover {
  color: #ffffff;
  background: #008cff;
  border: 1px solid #008cff;
  text-shadow: 0 0 5px #ffffff,
              0 0 10px #ffffff,
              0 0 20px #ffffff;
  box-shadow: 0 0 5px #008cff,
              0 0 20px #008cff,
              0 0 50px #008cff,
              0 0 100px #008cff;
}



.zerar {
  padding: 10px 20px;
  font-size: 20px;
  text-transform: uppercase;
  border-radius: 8px;
  font-size: 17px;
  font-weight: 500;
  color: #ffffff;
  text-shadow: none;
  background: transparent;
  box-shadow: transparent;
  border: 1px solid #ffffff;
  transition: 0.5s ease;
  user-select: none;
}

.zerar:hover {
  color: #ffffff;
  background: #008cff;
  border: 1px solid #008cff;
  text-shadow: 0 0 5px #ffffff,
              0 0 10px #ffffff,
              0 0 20px #ffffff;
  box-shadow: 0 0 5px #008cff,
              0 0 20px #008cff,
              0 0 50px #008cff,
              0 0 100px #008cff;
}


  
  h4  {
    
    color: rgb(14, 236, 188);
    font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
    margin-top: 10px;
    text-align: center;
    
    margin-bottom: 5px;
  }

  main.cto1 {
    width: 250px;
    height: 250px;

    background-image: linear-gradient(180deg,  #d1e270 0%, #00ff75 50%, #00eeff 100%);
    border-radius: 20px;
    -webkit-transition: all .3s;
    transition: all .3s;
    background-repeat: no-repeat;
    background-position: center;
    background-size:cover;

    

 }

 main.cto2 {
  width: 250px;
  height: 250px;
  margin-top: -260px;
  position: relative;
  border-radius: 20px;

 }

 main.cto2:hover {
  -webkit-box-shadow: 0px 0px 30px 10px rgba(87, 247, 14, 0.925);




 
 }



 main.cto1:hover {
  -webkit-box-shadow: 0px 0px 30px 10px rgba(0, 4, 255, 0.3);
         box-shadow: 0px 0px 30px 10px rgba(0, 17, 255, 0.3);
     
       
 }



 form.form-inputs{

  max-width: 400px;
  margin: auto;
 }

.calc {
  position: fixed;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px 20px;
  font-size: 20px;
  text-transform: uppercase;
  border-radius: 20px;
  font-size: 17px;
  font-weight: 500;
  color: #ffffff;
  text-shadow: none;
  background: #0000ff;
  box-shadow: transparent;
  border: 1px solid #ffffff;
  transition: 0.1s ease;
  user-select: none;
}

.calc:hover:active {
  color: #ffffff;
  background: #008cff;
  border: 1px solid #008cff;
  text-shadow: 0 0 5px #ffffff,
              0 0 10px #ffffff,
              0 0 20px #ffffff;
  box-shadow: 0 0 5px #008cff,
              0 0 20px #008cff,
              0 0 50px #008cff,
              0 0 100px #008cff;
}

/* LINHA AZUL */

hr.diag-azul {

  width: 11px;
  height: -8px;
  border: 1px solid #000000;
  margin-left: 10px;
  border-radius: 2px;
  padding: 6px;
  background-color: #2419f7;
}

.linha-azul {
  display: flex;
 justify-content: start;
  align-items: center;
  margin-left: 0%;
  margin-right: 20%;
}

.azul-positivo {
  margin-left: 5px;
}

/* LINHA VERDE */

hr.diag-verde {

  width: 11px;
  height: -8px;
  border: 1px solid #000000;
  margin-left: 10px;
  border-radius: 2px;
  padding: 6px;
  background-color: #2bf719;
}

.linha-verde {
  display: flex;
 justify-content: start;
  align-items: center;
  margin-left: 0%;
  margin-right: 20%;
}

.verde-negativo {
  margin-left: 5px;
}

/* LINHA LARANJA */

hr.diag-laranja {

  width: 11px;
  height: -8px;
  border: 1px solid #000000;
  margin-left: 10px;
  border-radius: 2px;
  padding: 6px;
  background-color: #f7b819;
}

.linha-laranja {
  display: flex;
 justify-content: start;
  align-items: center;
  margin-left: 0%;
  margin-right: 20%;
}

.laranja-negativo {
  margin-left: 5px;
}

/* LINHA VERMELHA */

hr.diag-vermelho {

  width: 11px;
  height: -8px;
  border: 1px solid #000000;
  margin-left: 10px;
  border-radius: 2px;
  padding: 6px;
  background-color: #f71919;
}

.linha-vermelha {
  display: flex;
 justify-content: start;
  align-items: center;
  margin-left: 0%;
  margin-right: 20%;
}

.vermelho-negativo {
  margin-left: 5px;
}








hr.pulsante1 {
  height: 8px;
  background-color: red;
  animation: pulse1 0.7s infinite;
  width: 8px;
  border-radius: 50%;
  border: solid 1px rgba(5, 59, 238, 1);
  border-color: rgb(215, 238, 5);
  position: absolute;
  display: flex;
  margin-left: 251px;
  margin-top: 115px;
   
  
 
}

@keyframes pulse1 {
  0% {
    transform: scale(0.1) translateX(-35px)
  }
  50% {
    transform: scale(1.4) translateX(0px)
  }
  100% {
    transform: scale(1) translateX(190px)
  }
}
/*.................


hr.ultimo-espaco {
  width: 15px;
  height: 53px;
 border-color: rgba(251, 248, 248, 0);
  margin-bottom: 0px;

  align-content: center;
}
*/


hr.pulsantebaixo1 {
  height: 8px;
  background-color: red;
  animation: pulsantebaixo1 0.7s infinite;
  width: 8px;
  border-radius: 50%;
  border: solid 1px rgba(5, 59, 238, 1);
  border-color: rgb(215, 238, 5);
  position: absolute;
 
  margin-left: 121.5px;
  margin-top: 250px;
    animation-direction: normal;
 
}


@keyframes pulsantebaixo1 {
  0% {
    transform: scale(0.1) translateY(-10px)
  }
  50% {
    transform: scale(1.4) translateY(0px)
  }
  100% {
    transform: scale(1) translateY(100px)
  }

}

hr.pulsantebaixo2 {
  height: 8px;
  background-color: rgb(250, 11, 11);
  animation: pulsantebaixo2 0.7s infinite;
  width: 8px;
  border-radius: 50%;
  border: solid 1px rgba(5, 59, 238, 1);
  border-color: rgb(215, 238, 5);
  position: absolute;
 
  margin-left: 118.5px;
  margin-top: 250px;
    animation-direction: normal;
 
}


@keyframes pulsantebaixo2 {
  0% {
    transform: scale(0.1) translateY(-10px)
  }
  50% {
    transform: scale(1.4) translateY(0px)
  }
  100% {
    transform: scale(1) translateY(100px)
  }

}

hr.pulsantebaixo3 {
  height: 8px;
  background-color: red;
  animation: pulsantebaixo3 0.7s infinite;
  width: 8px;
  border-radius: 50%;
  border: solid 1px rgba(5, 59, 238, 1);
  border-color: rgb(215, 238, 5);
  position: absolute;
 
  margin-left: 121.5px;
  margin-top: 250px;
    animation-direction: normal;
 
}


@keyframes pulsantebaixo3 {
  0% {
    transform: scale(0.1) translateY(-10px)
  }
  50% {
    transform: scale(1.4) translateY(0px)
  }
  100% {
    transform: scale(1) translateY(100px)
  }

}

hr.pulsante2 {
  position: absolute;
  height: 8px;
  width: 8px;
  background-color: rgb(255, 0, 0);
  border-radius: 50%;
  animation: pulse2 0.7s infinite;
  border-radius: 50%;
  border: solid 1px rgb(5, 40, 238);
  border-color: rgb(215, 238, 5);
  margin-left: 355px;
  margin-top: 116px;
 
}

@keyframes pulse2 {
  100% {
    transform: scale(1) translateX(-105px)
  }

  50% {
    transform: scale(1.4) translateX(0px)
  }
  0% {
    transform: scale(0.1) translateX(190px)
  }
 
}

hr.pulsante3 {
  position: absolute;
  height: 4px;
  width: 4px;
  background-color: rgb(255, 0, 0);
  border-radius: 50%;
  animation: pulse3 0.7s infinite;
  border-radius: 50%;
  border: solid 1px rgb(5, 40, 238);
  border-color: rgb(215, 238, 5);
  margin-left: 276px;
  margin-top: -129px;
 
}

@keyframes pulse3 {
  0% {
    transform: scale(0.1) translateY(-10px)
  }
  50% {
    transform: scale(1.4) translateY(0px)
  }
  100% {
    transform: scale(1) translateY(26px)
  }
}


hr.pulsante3 {
  height: 8px;
  background-color: red;
  animation: pulse3 0.7s infinite;
  width: 8px;
  border-radius: 50%;
  border: solid 1px rgba(5, 59, 238, 1);
  border-color: rgb(215, 238, 5);
  position: absolute;
  display: flex;
  margin-left: 251px;
  margin-top: 115px;
   
  
 
}

@keyframes pulse3 {
  0% {
    transform: scale(0.1) translateX(-10px)
  }
  50% {
    transform: scale(1.4) translateX(0px)
  }
  100% {
    transform: scale(1) translateX(190px)
  }
}


/*
hr.pulsantedivisa {
  height: 5px;
  background-color: red;
  animation: pulsedivisa 0.7s infinite;
  width: 5px;
  border-radius: 50%;
  border: solid 1px rgba(5, 59, 238, 1);
  border-color: rgb(215, 238, 5);
  position: absolute;
  margin-left: 68.5px;
  margin-top: -56px;
  animation-direction: normal;
 
}


@keyframes pulsedivisa {
  0% {
    transform: scale(0.1) translateY(-50px)
  }
  50% {
    transform: scale(1.2) translateY(0px)
  }
  100% {
    transform: scale(1) translateY(33px)
  }

}



*/

img.diag-nan {
  width: 80px;
}

.classe-do-nan {
  display: flex;
 justify-content: start;
  align-items: center;
  margin-left: 0%;
  margin-right: 20%;
}


.contato{
  display: inline-block;
 
  padding: 0.9rem 1.8rem;
  font-size: 16px;
  font-weight: 700;
  color: white;
  border: 3px solid rgb(252, 70, 100);
  cursor: pointer;
  position: relative;
  background-color: transparent;
  text-decoration: none;
  overflow: hidden;

  font-family: inherit;
  position: absolute;
left: 50%;
transform: translate(-50%, -50%);

}
.contato::before {
  content: "";
 position: absolute;
 left: 0;
 top: 0;
 width: 100%;
 height: 100%;
 background-color: rgb(252, 70, 100);
 -webkit-transform: translateX(-100%);
     -ms-transform: translateX(-100%);
         transform: translateX(-100%);
 -webkit-transition: all .3s;
 transition: all .3s;
 z-index: -1;
 }
 
 .contato:hover::before {
  -webkit-transform: translateX(0);
     -ms-transform: translateX(0);
         transform: translateX(0);
 }
  




input[type="text"]{
  font-size: 15px;
  font-weight: bold;
  border: 1px solid rgb(187, 187, 187);
  border-radius: 4px;
  width: 70px;
  background-color: #f5f5df;
}

option { 
  font-size: 15px;
  font-weight: bold;
  border: 1px solid rgb(187, 187, 187);
  border-radius: 4px;
  width: 70px;
  background-color: #f5f5df;
}





section.\31 box {
  display: flex;
  justify-content: space-evenly;
 
}


.\32 box {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 139px;
  
}

.\33 box {
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin-top: 20px;

  
}

.perdadodb {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: auto;

  
}

.potdarede {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  width: auto;

}

.sinaldocliente {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  width: auto;

}

.giratorio {
  width: 100px;
  height: 100px;
  background: linear-gradient(to bottom right, #9dff00, #00ff00, #0000ff);
  animation: rotate 3s linear infinite;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}


/* AQUI É O CARD */

.card {
  width: auto;
  height: 250px;

  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  place-content: center;
  place-items: center;
  overflow: hidden;
  border-radius: 20px;
}

.cont {
  z-index: 1;
  color: white;
  font-size: 1em;
}

.card::before {
  content: '';
  position: absolute;
  width: 90px;
  background-image: repeating-conic-gradient(red 8%, yellow 21%);
  opacity: 20%;
  height: 150%;
  -webkit-animation: rotBGimg 3s linear infinite;
  animation: rotBGimg 5s linear infinite;
  -webkit-transition: all 0.2s linear;
  transition: all 0.2s linear;

}

@-webkit-keyframes rotBGimg {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }

  to {
    -webkit-transform: rotate(50deg);
            transform: rotate(50deg);
  }
}

@keyframes rotBGimg {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }

  to {
    -webkit-transform: rotate(120deg);
            transform: rotate(360deg);
  }
}

.card::after {
  content: '';
  position: absolute;
  background: #07182E;
  ;
  inset: 5px;
  border-radius: 15px;
}  
/* .card:hover:before {
  background-image: linear-gradient(180deg, rgb(81, 255, 0), purple);
  animation: rotBGimg 3.5s linear infinite;
} */

.espaco{
  padding-left: 15px;
}



article {
  margin-bottom: 60px;
}

.regua1{
  max-width: 250px;
  width: 190px;
  max-width: 250px;
  height: 6px;
  background: #ececf0;
  position: absolute;
  display: flex;
  margin-left: 250px;
  margin-top: 117px;
 
}

.regua2{
  width: 6px;
  height: 90px;
  background: #ececf0;
  position: absolute;
  margin-top: 250px;
  right: 120px;
}
 

.regua3{
  width: 6px;
  height: 90px;
  background: #ececf0;
  position: absolute;
  margin-top: 250px;
  left: 120px;
}
 
.seta1{
  width: 3px;
  height: 34px;
  display: flex;
  position: absolute;
  background: #fefeff;
  left: 50px;
  top: 80px;

}

.seta2{
  width: 3px;
  height: 28px;
  display: flex;
  position: absolute;
  background: #fefeff;
  left: 50px;
  top: 156px;
}

.seta3{
  width: 54px;
  height: 3px;
  display: flex;
  position: absolute;
  background: #fefeff;
  left: 99px;
  top: 68px;
}

.seta4{
  width: 54px;
  height: 3px;
  display: flex;
  position: absolute;
  background: #fefeff;
  left: 99px;
  top: 212px;
}


.entrectolabel{
 min-width: 50px;
  max-width: 60px;
  border: none;
  outline: none;
  border-radius: 15px;
  padding: 10px;
  background-color: rgb(245, 233, 166);
  box-shadow: rgba(0, 0, 0, 0.3) 2px 5px 10px inset;
  transition: all 300ms ease-in-out 0s;
  
}

.entrectolabel:focus {
  background-color: rgb(250, 173, 101);
  -webkit-transform: scale(1.05);
      -ms-transform: scale(1.05);
          transform: scale(1.05);
  -webkit-box-shadow:  13px 13px 100px #969696,
             -13px -13px 100px #ffffff;
          box-shadow:  13px 13px 100px #969696,
             -13px -13px 100px #ffffff;
}

.entrecto {
 position: absolute;
 left: 265px;
 top: 40px;
 display: flex;
    flex-direction: column;
    align-items: center;


}

.entrecto4 {
  position: absolute;
  left: 140px;
  top: 255px;
  display: flex;
     flex-direction: column;
     align-items: center;
 
 
 }

 .entrect8 {
  position: absolute;
  left: 25px;
  top: 250px;
  display: flex;
     flex-direction: column;
     align-items: center;
}

.entrecto7 {
  position: absolute;
  margin-left: -95px;
  margin-top: 41px;
  display: flex;
     flex-direction: column;
     align-items: center;
}

.entrecto6 {
  position: absolute;
  margin-left: -95px;
  margin-top: 41px;
  display: flex;
     flex-direction: column;
     align-items: center;
}

.entrecto5 {
  position: absolute;
  margin-left: -95px;
  margin-top: 41px;
  display: flex;
     flex-direction: column;
     align-items: center;
}