/*!**************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[12].use[3]!./src/components/gásEfumaça/GasEfumaca.css ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************/
.alert-popup {
  position: fixed;
  width: 50%;
  height: auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.8);
  padding: 20px;
  border-radius: 10px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.imgAlertaGasEfumaca {
  width: 100%;
  height: 100%;
}
/*!************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[12].use[3]!./src/components/luz/Luz.css ***!
  \************************************************************************************************************************************************************************************************************************************************************************/
.luz {
  border: none;
  background-color: transparent;
  margin: 0;
}

.btnLuz {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 15vmin;
  height: 15vmin;
  box-shadow: 0px .5vmin 2vmin #818181;
  border-radius: 2vmin;
  margin: 10px;
}

.btnLuz-indisponivel:hover {
  filter: grayscale(100%);
  transition: .5s;
}

.btnLuz-display {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

.btnLuz-nome {
  width: 100%;
  height: 33.3%;
  font-size: 1.6vmin;
  font-weight: 600;
  padding: 10% 10% 0 10%;
  text-align: left;
  word-wrap: break-word;
}

.btnLuz-ambiente {
  width: 100%;
  height: 33.3%;
  font-size: 1.6vmin;
  font-weight: 600;
  padding: 10% 10% 0 10%;
  text-align: left;
  word-wrap: break-word;
  display: none;
}


.btnLuz-icone {
  width: 30%;
  height: auto;
  margin: 10% 0 0 10%;
  padding: 5% 6%;
  border-radius: 100%;
}

.btnDeslizante {
  display: flex;
  height: 33.3%;
  align-items: center;
  justify-content: flex-end;
}

.retangulo {
  display: flex;
  align-items: center;
  width: 30%;
  height: 62%;
  margin: 0 10% 10% 0;
  border-radius: calc(50vw * 0.05);
  position: relative;
  transition: 1s all;
}

.circulo {
  width: 1.8vmin;
  height: 1.8vmin;
  border-radius:calc(50vw * 0.05);
  position: absolute;
  transition: .5s all;
}

.btnLuz-on {
  background: linear-gradient(0.4turn, #33394D, #484B65);
  color: #ffffff;
  transition: all 1s;
}

.btnLuz-on .btnLuz-icone {
  background-color: #2E2E2E;
}

.btnLuz-on .retangulo {
  border: #FF8A00 solid 1px;
  justify-content: right;
}

.btnLuz-on .retangulo .circulo{
  background-color: #FF8A00;
  left: calc(100% - 2vmin);
}

.btnLuz-off {
  background: #E4E3E3;
  color: #000000;
  transition: all 1s;
}

.btnLuz-off .btnLuz-icone {
  background-color: #DADADA;
}

.btnLuz-off .retangulo {
  background-color: #000000;
  border: #000000 solid 1px;
  justify-content: left;
}

.btnLuz-off .retangulo .circulo{
  background-color: #ffffff;
  left: 2px;
}

.btnLuz-on .iconeIndisponivel, .btnLuz-off .iconeIndisponivel {
  display: none;
}

.btnLuz-indisponivel .btnDeslizante {
  display: none;
}

.btnLuz-indisponivel {
  background: linear-gradient(0.4turn, #ffffff, #ff0000);
  color: #ffffff;
}

.btnLuz-indisponivel .iconeIndisponivel {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.btnLuz-indisponivel .btnLuz-icone {
  background-color: #fa9e9e;
}

.iconeIndisponivel .btnLuz-icone{
  background-color: #ff0000;
  width: 15%;
  height: auto;
  margin: 0 10% 10% 0;
  padding: 1%;
}
/*!****************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[12].use[3]!./src/components/temperatura/Temperatura.css ***!
  \****************************************************************************************************************************************************************************************************************************************************************************************/
.temperatura {
  display: flex;
  flex-direction: column;
  width: 30vmin;
  height: 15vmin;
  box-shadow: 0px .5vmin 2vmin #818181;
  border-radius: 2vmin;
  background: linear-gradient(0.4turn, #00ffee, #33ff00);
}

.temperatura-nome {
  width: 100%;
  height: 25%;
  color: #fff;
  font-size: 2.5vmin;
  font-weight: 600;
  padding: 2.5% 0 2.5% 8%;
  text-align: left;
}

.temperatura-display {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  height: 75%;
  color: #fff;
  font-size: 5vmin;
  font-weight: 400;
  justify-content: space-around;
}

.temperatura-icone {
  display: inline-block;
  width: 25%;
  margin-left: 5%;
  height: auto;
}

.temperatura-dados {
  display: flex;
  width: 75%;
  align-items: center;
  justify-content: center;
  font-size: .8em;
}

.temperatura-unidadeDeMedida {
  margin-left: 5%;
  padding-top: 2%;
  font-size: .8em;
  font-weight: 600;
}

.temperatura-dados-carregando {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  justify-content: center;
  font-size: .5em;
  padding: 0 3% 0 0;
}
/*!********************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[12].use[3]!./src/components/umidade/Umidade.css ***!
  \********************************************************************************************************************************************************************************************************************************************************************************/
.umidade {
  display: flex;
  flex-direction: column;
  width: 30vmin;
  height: 15vmin;
  box-shadow: 0px .5vmin 2vmin #818181;
  border-radius: 2vmin;
  background: linear-gradient(0.4turn, #00FFF0, #0029FF);
}

.umidade-nome {
  width: 100%;
  height: 25%;
  color: #fff;
  font-size: 2.5vmin;
  font-weight: 600;
  padding: 2.5% 0 2.5% 8%;
  text-align: left;
}

.umidade-display {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: auto;
  height: 75%;
  color: #fff;
  font-size: 5vmin;
  font-weight: 400;
  justify-content: space-around;
  padding: 2.5% 0 5% 0;
}

.umidade-icone {
  width: 25%;
  height: auto;
  margin-left: 5%;
}

.umidade-dados {
  display: flex;
  width: 75%;
  align-items: center;
  justify-content: center;
  font-size: .8em;
}

.umidade-unidadeDeMedida {
  margin-left: 5%;
  padding-top: 2%;
  font-size: .8em;
  font-weight: 600;
}

.umidade-dados-carregando {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  justify-content: center;
  font-size: .5em;
  padding: 0 3% 0 0;
}