html, body 
{
    height: 100%;
    margin: 0;
    padding: 0;
}

#vwIndex
{
    width: 100%;
    height: 100vh;
    transition: height 1s;
}

#vwRodape
{
    background-color: #F5F5F5;
    color: white;    
    height: 1vh;
    border: 5px solid  #F5F5F5;
}

#obRetorno
{
    position: fixed;
    top: 10px; 
    left: 10px; 
    border: 0px solid black;
}

#obMenu
{
    position: fixed;
    top: 10px; 
    right: 10px; 
    border: 0px solid black;
}

#obLogo
{
    position: fixed;
    bottom: 20px; 
    right: 5px; 
    border: 1px solid #F5F5F5;
    background-color: rgba(255, 255, 255, 0.7); 
    border-radius: 10px;
}

#obMenu button 
{
    display: block;
    width: 50px;
    height: 50px;
    background-color: #fcfffc; 
    color: white;
    border: none;
    border-radius: 50%; 
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    font-size: 24px;
    
    justify-content: center;
    align-items: center;
    cursor: pointer;

    right: 0;
    top: 5px;
    margin-bottom: 10px;
}
  
#obMenu button + button 
{
    top: auto;  
    bottom: 0;  
}

.invisivel
{
    display: none;
}

.div_pesquisa
{
    width: 100%;
}

.esri-search 
{
    width: 100% !important; /* Forçar o widget a ocupar 100% da largura */
}
  
.esri-input 
{
    width: 100% !important; /* Fazer com que o campo de input também ocupe 100% */
}


.spinner 
{
      width: 50px;
      height: 50px;
      border: 5px solid rgba(0, 0, 0, 0.1);
      border-left-color: #333;
      border-radius: 50%;
      animation: spin 1s linear infinite;
      display: flex;
}

@keyframes spin 
{
    100% 
    {
        transform: rotate(360deg);
    }
}

.spinner-container 
{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.5);    
}

.cardItem
{
    background-color: transparent;
}

.bg_interditado
{
    --calcite-ui-notice-background: #fae6e6 !important; /* Aplica a cor ao background */
    background-color: #fae6e6 !important; /* Garante que o fundo seja aplicado corretamente */
}


.responsive-logo 
{
    width: 100%; /* A imagem ocupa 100% da largura do contêiner por padrão */
    height: auto; /* Mantém a proporção da imagem */
}

/* Tamanho para desktop */
@media (min-width: 768px) 
{
    .responsive-logo
    {
        width: 120px; /* Largura fixa para desktop */
    }
}

/* Tamanho para mobile */
@media (max-width: 767px) 
{
    .responsive-logo 
    {
        width: 64px; /* 80% da largura do contêiner no mobile (você pode ajustar este valor) */
    }
}