/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.3.6,
* Autoprefixer: v10.3.1
* Browsers: last 4 version
*/

:root {
  /* --color0: #000;
    --color1: #00d1ff;
    --color2: #fff;
    --color3: #ff005c; */
  --ancho_panel_unidad: 130px;
}

/* /// ////  */
.panel {
  /* border: 1px solid greenyellow; */
  position: absolute;
  /* top: 50%; */
  /* width: 100px; */
  /* transform: translateY(-50%); */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  z-index: 1000;
  width: var(--ancho_panel_unidad);
  font-family: main_font;
  /* opacity: 0; */
  bottom: 0rem;
  margin-bottom: 2rem;
}
/* #placa7.selected > .panel {
  transition: 0.6s 3s;
  opacity: 1;
} */

.panel.derecha {
  right: 0px;
  /* border: 1px solid red; */
  bottom: 0 !important;
  color: white;
}

.panel.izquierda {
  left: 0px;
}

.divBotonesAmbientes {
  width: 100%;
}

.tituloPanel {
  text-align: left;
  width: 100%;
  font-size: 1rem;
  /* font-weight: bold; */
  /* color: #000; */
  color: white;
}
.tituloPanel2 {
  text-align: left;
  width: 100%;
  font-size: 1.5rem;
  /* font-weight: bold; */
  /* color: #000; */
  color: white;
  margin-bottom: 2rem;
}
.tituloDerecha {
  /* color: #000; */
}
.tituloIzquierda {
  /* color: #000; */
  margin-top: 2rem;
}

.btnPanel {
  /* color: var(--color1); */
  /* border-radius: 10px; */
  /* border-radius: 50%; */
  border: 2px solid white;
  /* border: 1px solid red; */
  /* background-color: var(--color0); */
  background-color: transparent;
  /* font-weight: bold; */

  text-align: center;
  padding: 0px;

  /* margin: 7px 0; */
  margin-top: 0.5rem;
  cursor: pointer;
  /* opacity: 0.6; */
  /* width: 60px; */
  width: 100%;
  height: 2.5rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  /* transition: transform 0.1s, border-radius 0.6s; */
  -webkit-transition: 0.4s;
  -o-transition: 0.4s;
  transition: 0.4s;

  position: relative;
  /* transform: scale(0.85); */
}

.btnPanel img {
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  padding: 1px 1px !important;

  /* opacity: 0.75; */

  /* border-radius: 50%; */
  /* transition: transform 0.1s, border-radius 0.4s; */
}

/* .btnPanel:hover, */

.btnPanel:hover {
  /* opacity: 1; */
  /* transform: scale(1.15); */
  -webkit-box-shadow: 2px 2px 5px #55555533;
  box-shadow: 2px 2px 5px #55555533;
}

.btnPanelDerecha.btnPanel:hover
/* ,.btnPanelIzquierda.btnPanel:hover */ {
  border-color: white;
  background-color: var(--main_color);
  color: white;
  -webkit-box-shadow: none;
  box-shadow: none;
}
.btnPanelDerecha.btnPanel.selec {
  /* opacity: 1; */
  border-color: var(--main_color);
  color: var(--main_color);
  background-color: transparent;
  /* border-radius: 0; */
  /* transform: scale(1); */
  -webkit-box-shadow: none;
  box-shadow: none;
  cursor: auto;
  /* background-color: var(--color1); */
  /* border: 1px solid #000; */
}

.btnPanelIzquierda {
  /* border: 3px solid var(--color0); */
  /* border: 3px solid transparent; */
  border: 2px solid white;
  /* padding: 5px !important;  */

  /* border-radius: 50%; */

  /* opacity: 0.75; */
  width: var(--ancho_panel_unidad);

  height: 2.5rem;

  /* padding: 5px; */
}
.btnPanelIzquierda.btnPanel.selec {
  /* border: 3px solid var(--color3); */
  border-color: var(--main_color);

  opacity: 1;
  cursor: auto;
}

.btnPanelIzquierda:hover {
  opacity: 1;
}

.btnPanel.selec img {
  /* border-radius: 0; */
  /* opacity: 1; */
  /* padding: 2px; */
}

.btnPanel.texto {
  text-transform: uppercase;
  /* font-weight: bold; */
  /* color: white; */
  /* background-color: #cc0077; */
  font-size: 1.5rem;
}

@media only screen and (max-width: 500px) {
  /* .panel {
    transform: translateY(0);
    display: flex;
    width: 100%;
    justify-content: center;
    flex-direction: row;
  }
  .tituloPanel {
    display: none;
  }

  .panel.derecha {
    right: 0px;
    padding: 0px 20px;
    top: 0px;
  }
  .panel.izquierda {
    left: 0px;
    padding: 0px 20px;
    top: auto;
    bottom: 20px;
  }

  .btnPanel {
    margin: 20px 10px;
  }

  .btnPanel.texto {
    text-transform: uppercase;
    font-size: 18px;
  } */
}