@charset "utf-8";

#app { float: left; width: 100%; padding: 21px 0; min-height: 200px; background-color: rgb(245 245 245); font-size: 18px;}
#app .titulo h1 { font-size: 1.5em;}

#app .principal .buscar .ico { margin: 0 0 0 5px; background-image: url('../imagens/app/buscar.png?v1'); background-position: 50%; background-repeat: no-repeat;}

#app .apartamento .nomesi h2 { font-size: 1.1em;}
#app .apartamento .nomesi h3 { font-size: 0.9em;}
#app .apartamento .instrucoes { padding: 15px 15px 0 15px;}

#app .predios .tab { padding: 15px 15px 15px 175px;}
#app .predios .tab .fachada { width: 150px; height: 150px; top: 15px; left: 15px; overflow: hidden;}
#app .predios .tab .detalhes { min-height: 150px;}
#app .predios .tab .detalhes h2 { font-size: 1.2em;}
#app .predios .tab .detalhes h3 { font-size: 1em;}

#app .equipamentos .tab .capa { width: 150px; height: 150px; top: 15px; left: 15px; overflow: hidden;}
#app .equipamentos .tab .detalhes h2 { font-size: 1.2em;}
#app .equipamentos .tab .detalhes h3 { font-size: 1em;}
#app .equipamentos .tab .detalhes h4 { font-size: 1em;}
#app .equipamentos .tab .detalhes h4 em { text-decoration: line-through; font-style: normal; font-size: 0.9em;}
#app .equipamentos .tab .detalhes h4 b { font-size: 1.2em;}
#app .equipamentos .tab.comcapa { padding: 15px 15px 15px 175px;}
#app .equipamentos .tab.semcapa { padding: 15px;}
#app .equipamentos .tab.comcapa .detalhes { min-height: 150px;}

#app .apartamento .imagens .tab { padding: 5px;}

#app .editou { font-size: 18px; line-height: 1.4;}
#app .editou h1 { text-transform: uppercase; font-weight: bold;}
#app .editou h2 { text-transform: uppercase; font-weight: bold;}
#app .editou h3 { text-transform: uppercase; font-weight: bold;}
#app .editou iframe { max-width: 100%;}
#app .editou img { max-width: 100%;}
#app .editou a { color: rgb(0 150 190);}
#app .editou a:hover { text-decoration: underline;}

@media only screen and (max-width: 700px){
  #app .predios .tab { padding: 10px 10px 10px 170px;}
  #app .predios .tab .fachada { top: 10px; left: 10px;}
  #app .equipamentos .tab .capa { top: 10px; left: 10px;}
  #app .equipamentos .tab.comcapa { padding: 10px 10px 10px 170px;}
  #app .equipamentos .tab.semcapa { padding: 10px;}
  #app .apartamento .imagens .tab { padding: 0; margin: 0 0 5px;}
}
@media only screen and (max-width: 500px){
  #app .predios .tab { padding: 10px 10px 10px 140px;}
  #app .predios .tab .fachada { width: 120px; height: 120px; top: 10px; left: 10px;}

  #app .equipamentos .tab .detalhes h2 { font-size: 1em; line-height: 1;}
  #app .equipamentos .tab .detalhes h3 { font-size: 0.95em;}
  #app .equipamentos .tab .detalhes h4 { font-size: 0.95em;}
  #app .equipamentos .tab .capa { width: 120px; height: 120px; top: 10px; left: 10px;}
  #app .equipamentos .tab.comcapa { padding: 10px 10px 10px 140px;}
  #app .equipamentos .tab.comcapa .detalhes { min-height: 120px;}
}

/* padrao */
#app input { outline-offset: -1px; background-color: transparent; font-family: 'Roboto Condensed', sans-serif; font-size: 1em; padding: 0; border: 0; outline: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; line-height: 1;}
#app select { outline-offset: -1px; background-color: transparent; font-family: 'Roboto Condensed', sans-serif; font-size: 1em; padding: 0; border: 0; outline: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; line-height: 1;}
#app textarea { outline-offset: -1px; background-color: transparent; font-family: 'Roboto Condensed', sans-serif; font-size: 1em; padding: 0; border: 0; outline: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
#app button { outline-offset: -1px; background-color: transparent; font-family: 'Roboto Condensed', sans-serif; font-size: 1em; padding: 0; border: 0; outline: 0; line-height: 0; cursor: pointer;}

body h1, h2, h3, h4, h5, h6 { line-height: 1.2;}

#app .auto700 { margin: 0 auto; width: 700px; max-width: 94%;}

#app .fixed { position: fixed;}
#app .absolute { position: absolute;}
#app .relative { position: relative;}
#app .flex { display: flex;}
#app .zindex1 { z-index: 1;}
#app .zindex2 { z-index: 2;}

#app .float-left { float: left;}
#app .float-right { float: right;}

#app .wp100 { float: left; width: 100%;}
#app .wp50 { float: left; width: 50%;}
#app .wh50 { float: left; width: 50px; height: 50px;}

#app .h50 { height: 50px;}

#app .pad5 { padding: 5px;}
#app .pad10 { padding: 10px;}
#app .pad15 { padding: 15px;}
body .pad510 { padding: 5px 10px;}

#app .mar5y { margin-top: 5px !important; margin-bottom: 5px !important;}
#app .mar11y { margin-top: 11px !important; margin-bottom: 11px !important;}
body .mar5yy { margin-top: 5px !important;}
#app .mar11yy { margin-top: 11px !important;}
#app .maryyy5 { margin-left: 5px !important;}
body .maryy5 { margin-bottom: 5px !important;}

#app .contorno1_20 { outline: 1px solid rgb(90 90 90 / 20%); outline-offset: -1px;}
#app .contorno1_40 { outline: 1px solid rgb(90 90 90 / 40%); outline-offset: -1px;}

#app .bordinha { -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;}
body .borda { -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;}
#app .circular { -webkit-border-radius: 1000px; -moz-border-radius: 1000px; border-radius: 1000px;}
#app .sombrinha { -webkit-box-shadow: 0 0 5px 0 rgb(0 0 0 / 10%); -moz-box-shadow: 0 0 5px 0 rgb(0 0 0 / 10%); box-shadow: 0 0 5px 0 rgb(0 0 0 / 10%);}
#app .border-box { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}

#app .text-uppercase { text-transform: uppercase;}
#app .text-center { text-align: center;}
#app .text-left { text-align: left;}

body .font-15em { font-size: 1.5em;}

#app .linkh { color: rgb(0 147 232) !important;}
#app .linkh:hover { text-decoration: underline;}

#app .pointer { cursor: pointer;}
#app .opcy7 { opacity: 0.7;}
#app .none { display: none;}

#app .object { position: absolute; width: 100%; height: 100%; top: 0; left: 0;}
#app .object.cover { object-fit: cover;}

#app .campo { outline: 1px solid rgb(90 90 90 / 50%);}
#app .campo:focus { outline: 1px solid rgb(55 171 200 / 50%) !important; -webkit-box-shadow: 0 0 10px 0 rgb(0 0 0 / 20%); -moz-box-shadow: 0 0 10px 0 rgb(0 0 0 / 20%); box-shadow: 0 0 10px 0 rgb(0 0 0 / 20%);}

#app .domo { background-color: rgb(255 255 255);}

#app .botao.verde { background-color: rgb(0 170 100); color: rgb(250 250 250) !important;}
#app .botao.verde:hover { background-color: rgb(0 150 130);}
#app .botao.vermelho { background-color: rgb(218 47 47); color: rgb(250 250 250) !important;}
#app .botao.vermelho:hover { background-color: rgb(184 40 40);}

#app .bg.verde { background-color: rgb(0 170 100); color: rgb(250 250 250) !important;}
#app .bg.cinza { background-color: rgb(200 200 200);}
#app .bg.azul { background-color: rgb(48 148 211); color: rgb(250 250 250) !important;}

#app .table { overflow: auto;}
#app .table table { width: 100%; border-collapse: collapse;}
#app .table table th { padding: 5px; position: relative;}
#app .table table td { padding: 5px; position: relative;}
#app .table table .t80 { min-width: 80px;}
#app .table table .t150 { min-width: 150px;}

#app .atencao { position: fixed; bottom: 10px; right: 15px; z-index: 300; overflow: hidden; color: rgb(20 20 20);}
#app .atencao .msg { float: left;}
#app .atencao .msg h2 { float: left; width: 200px; padding: 10px; background-color: rgb(165, 255, 192); font-size: 1em; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;}
#app .atencao .msg h3 { float: left; width: 400px; padding: 10px; background-color: rgb(255, 192, 181); font-size: 1em; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;}
#app .atencao .msg b { float: left; width: 100%; font-weight: bold; font-size: 1.5em; line-height: 1;}
#app .atencao .msg em { float: left; width: 100%; margin: 2px 0 0; font-style: normal; font-size: 1.1em;}
#app .atencao .fechar { position: absolute; top: 15px; right: 10px; font-weight: bold; font-style: normal; line-height: 0; cursor: pointer;}

@media only screen and (max-width: 700px){
  #app .wp15 { width: 100%;}
  #app .wp50 { width: 100%;}
}
@media only screen and (max-width: 500px){
  #app .atencao { width: 100%; left: 0; bottom: 0;}
  #app .atencao .msg { width: 100%;}
  #app .atencao .msg h2 { width: 100%; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0;}
  #app .atencao .msg h3 { width: 100%; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0;}
}