/*--------------------------------------------------
  Ajustes para celular e tablet pequeno (até 767px)
  Carregado por último no index.html. O !important é
  necessário porque boa parte dos tamanhos está como
  style="" direto nos templates de paginas/.
  Acima de 767px nada aqui se aplica.
----------------------------------------------------*/

/* Regras do componente collapse do Bootstrap 3.3.5, que faltam no
   bootstrap.min.css customizado do site. Sem elas o menu fica sempre aberto.
   Acima de 767px o próprio Bootstrap força o menu visível. */
.collapse {
    display: none;
}

.collapse.in {
    display: block;
}

.collapsing {
    position: relative;
    height: 0;
    overflow: hidden;
    transition: height .35s ease;
}

@media (max-width: 767px) {

    /* Geral
    ------------------------------------*/
    html, body {
        overflow-x: hidden;
    }

    /* espaço para o rodapé fixo não cobrir o conteúdo */
    .page-index {
        padding-bottom: 50px;
    }

    img {
        max-width: 100%;
        height: auto;
    }

    /* Menu
    ------------------------------------*/
    .navbar-brand img {
        max-height: 70px;
        width: auto;
    }

    .li-nav {
        padding-right: 0;
        border-top: 1px solid #eee;
    }

    .navbar-nav {
        margin: 0;
    }

    .navbar-nav > li > a {
        padding: 12px 20px;
        font-size: 16px;
    }

    /* Colunas: uma embaixo da outra
    ------------------------------------*/
    .column-left,
    .column-right {
        float: none !important;
        width: 100% !important;
        height: auto !important;
    }

    .space-xlg-hor {
        padding-left: 15px;
        padding-right: 15px;
    }

    .row.space-xlg-hor {
        margin-left: 0;
        margin-right: 0;
    }

    /* alturas fixas viram altura mínima */
    .page-sobre,
    .page-servicos,
    .page-clicond,
    .page-imoveis,
    .container1,
    .container2,
    .container3 {
        height: auto !important;
        min-height: 0;
    }

    .pag-princ {
        height: calc(100vh - 140px);
        min-height: 360px;
    }

    blockquote {
        margin: 0 0 15px;
        padding: 10px 12px;
    }

    /* Avisos LGPD e logout
    ------------------------------------*/
    .lgpd,
    .logout {
        left: 10px;
        right: 10px;
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }

    .lgpd {
        bottom: 50px;
        font-size: 14px;
    }

    .logout {
        top: 120px;
    }

    .lgpd button,
    .logout button {
        margin-top: 10px;
        width: 100%;
    }

    /* Serviços
    ------------------------------------*/
    .page-servicos .serv-dir {
        height: 260px !important;
        overflow: hidden;
        padding: 0;
    }

    .page-servicos .serv-dir img {
        width: 100%;
        height: 100% !important;
        object-fit: cover;
    }

    .page-servicos h2 {
        font-size: 22px;
    }

    /* Sobre
    ------------------------------------*/
    .page-sobre blockquote {
        font-size: 14px !important;
    }

    .page-sobre .sobre-dir .row {
        padding: 0;
        margin: 0;
    }

    .page-sobre .sobre-dir .row > div {
        height: auto !important;
        text-align: center;
        margin-bottom: 15px;
    }

    .page-sobre .sobre-dir img {
        width: auto !important;
        max-width: 100%;
        max-height: 260px;
    }

    .page-sobre .navbar-brand {
        float: none;
        height: auto;
        padding: 0;
    }

    /* Contato
    ------------------------------------*/
    .page-contato iframe {
        width: 100% !important;
    }

    .page-contato .map-container {
        min-height: 0;
    }

    .page-contato .column-left {
        margin-bottom: 15px;
    }

    .page-contato li a {
        font-size: 16px;
        line-height: 2;
    }

    /* Login
    ------------------------------------*/
    .page-login .form-block {
        padding-top: 15px;
    }

    .page-login .form-actions {
        width: 100%;
    }

    /* 2ª via de boleto
    ------------------------------------*/
    .page-segundavia .container1 {
        padding: 0 5px;
    }

    .page-segundavia h1 {
        font-size: 24px;
    }

    .page-segundavia .form-block-header + div,
    .page-segundavia .form-block-header + div > table {
        width: 100% !important;
    }

    /* tabelas largas rolam na horizontal */
    #tabela,
    #locacao,
    #empresa {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .page-segundavia button {
        height: auto;
        min-height: 34px;
    }

    /* Imóveis: cada linha da tabela vira um card
    ------------------------------------*/
    .page-imoveis .flex-container {
        flex-direction: column;
        align-items: center;
    }

    .page-imoveis .flex-child {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .page-imoveis form button {
        height: 40px;
        width: 100% !important;
        max-width: 300px;
    }

    #tabImoveis thead {
        display: none;
    }

    #tabImoveis,
    #tabImoveis tbody,
    #tabImoveis tr,
    #tabImoveis td {
        display: block;
        width: 100%;
    }

    #tabImoveis tr {
        height: auto !important;
        margin: 0 0 15px;
        background: #fff;
        border-radius: 6px;
        overflow: hidden;
        box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
    }

    #tabImoveis td {
        padding: 4px 12px;
        text-align: left;
        font-weight: normal;
    }

    #tabImoveis td:first-child {
        padding: 0;
    }

    #tabImoveis td:first-child > div {
        height: 200px !important;
        background-position: center;
        display: flex;
        align-items: flex-end;
        justify-content: flex-end;
        padding: 10px;
    }

    #tabImoveis td:first-child button {
        height: 36px;
        padding: 0 16px;
        font-size: 15px;
    }

    #tabImoveis td:nth-child(n+2)::before {
        font-weight: bold;
        margin-right: 6px;
    }

    #tabImoveis td:nth-child(2)::before  { content: "Imóvel:"; }
    #tabImoveis td:nth-child(3)::before  { content: "Tipo:"; }
    #tabImoveis td:nth-child(4)::before  { content: "Cidade:"; }
    #tabImoveis td:nth-child(5)::before  { content: "Bairro:"; }
    #tabImoveis td:nth-child(6)::before  { content: "Endereço:"; }
    #tabImoveis td:nth-child(7)::before  { content: "Área útil:"; }
    #tabImoveis td:nth-child(8)::before  { content: "Área total:"; }
    #tabImoveis td:nth-child(9)::before  { content: "Quartos:"; }
    #tabImoveis td:nth-child(10)::before { content: "Preço:"; }
    #tabImoveis td:nth-child(11)::before { content: "Aluguel:"; }

    #tabImoveis td:nth-child(10),
    #tabImoveis td:nth-child(11) {
        font-size: 18px;
        font-weight: bold;
        padding-bottom: 12px;
    }

    #tabImoveis td.ng-hide {
        display: none !important;
    }

    /* Detalhe do imóvel (slideShow)
    ------------------------------------*/
    .page-slideShow {
        height: auto;
    }

    .page-slideShow > div:first-child {
        overflow-x: auto;
    }

    .page-slideShow td[style*="min-width"] {
        min-width: 220px !important;
    }

    .page-slideShow > div:first-child > div[style*="float"] {
        float: none !important;
        width: 100% !important;
    }

    .page-slideShow iframe {
        height: 220px;
    }

    #navSlides {
        top: auto;
        bottom: 50px;
        right: 5px;
        margin-right: 0;
    }

    .page-slideShow img {
        width: 40px;
        height: 40px;
    }

    .page-slideShow > div[style*="margin-top"] {
        margin-top: 15px !important;
    }

    .page-slideShow section,
    .page-slideShow section > div {
        width: 100% !important;
        height: 70vw !important;
        background-size: cover !important;
        background-position: center;
    }

    /* Área do cliente - condomínio e locador
    ------------------------------------*/
    #interna {
        width: 100%;
        height: auto;
    }

    #interna div[style*="width"] {
        width: 100% !important;
    }

    /* as colunas em display:table viram blocos empilhados */
    #interna div[style*="table-row"],
    #interna div[style*="table-cell"] {
        display: block !important;
        height: auto !important;
    }

    /* esconde a linha de títulos lado a lado; cada árvore recebe o próprio título */
    #interna div[style*="table-row"]:first-child {
        display: none !important;
    }

    #interna div[style*="table-cell"] {
        margin-bottom: 10px;
    }

    /* treeView.css fixa 350px; no celular a árvore cresce conforme abre */
    #interna div[data-tree-model] {
        height: auto;
    }

    #interna div[style*="table-cell"] > div[data-tree-model] {
        min-height: 80px;
        padding-bottom: 10px;
    }

    #interna div[style*="table-row"]:not(:first-child) > div:nth-child(1)::before,
    #interna div[style*="table-row"]:not(:first-child) > div:nth-child(2)::before,
    #interna div[style*="table-row"]:not(:first-child) > div:nth-child(3)::before {
        display: block;
        padding: 4px;
        text-align: center;
        font: bold 15px Tahoma;
        background-color: rgb(9, 138, 97);
    }

    #interna div[style*="table-row"]:not(:first-child) > div:nth-child(1)::before { content: "Administrativos"; }
    #interna div[style*="table-row"]:not(:first-child) > div:nth-child(2)::before { content: "Financeiros"; }
    #interna div[style*="table-row"]:not(:first-child) > div:nth-child(3)::before { content: "Planejamento"; }

    #interna .intervalos {
        padding: 10px !important;
    }

    #interna .intervalos button {
        width: 100% !important;
        margin: 10px 0 !important;
        min-height: 40px;
    }

    #interna fieldset label {
        margin-right: 10px;
    }

    /* Fluxo de caixa (clicondAdm)
    ------------------------------------*/
    #grafic,
    .page-clicondAdm div[style*="1200px"] {
        width: 100% !important;
        height: auto;
    }

    #titEsq,
    #titDir,
    #divGraf,
    #divDet {
        position: static;
        width: 100% !important;
        height: auto;
        display: block !important;
    }

    #grafic div[style*="height: 16px"] {
        height: auto !important;
    }

    #grafic div[style*="table-row"] {
        display: block !important;
    }

    #divGraf {
        min-height: 300px;
    }

    #divDet {
        margin-top: 10px;
        overflow-x: auto;
    }
}