body
{
   font-family: 'Helvetica', 'Arial', sans-serif;
   cursor: default;
}

.efeito:hover 
{
   color: #fff;
   background-color: #F5F5F5;
   border-radius: 20px;
   background: linear-gradient(180deg, #e6fff5, #f5fce6);
   animation: animate 3s linear infinite;    
   border-spacing: 10px 1rem;    
   transform: scale(1.1);  
   animation: treme 0.1s;
}

@keyframes treme 
{
   0% {margin-left: 0;}
   25% {margin-left: 2px;}
   50% {margin-left: 0;}
   75% {margin-left: -2px;}
   100% {margin-left: 0;}
}

.frame
{
   border: 0px solid #1DC88A;
   position: relative;
   top: 20;
   left: 0;
   right: 0;
   bottom: 2;
   max-height: 100%; !important;
   height: 100vh; 
}

.sidenav 
{
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0%;
    right: 0;
    background-color: #FDFAFA;
    border: 1px solid rgb(199, 199, 199);
    overflow-x: hidden;
    transition: 0.5s;;
}

.sidenav .closebtn 
{
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}


@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

.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 
{
    /* display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh; */

    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);    
}

table
{
   font-size: 12px;
   font-family: Arial, Verdana, sans-serif;
}

.bgheader
{
   background-color: #E0E0E0;
}

.borda_l
{
   border-left: 1px solid #C0C0C0;
}

.borda_r
{
   border-right: 1px solid #C0C0C0;
}

.borda_t
{
   border-top: 1px solid #C0C0C0;
}

.borda_b
{
   border-bottom: 1px solid #C0C0C0;
}

.imagecard
{
    width: 100%;
    max-width: 250px;
}

.bgobraatrasada
{
   background-color: #ffcec2;
}


.bgobraemdia
{
   background-color: #e0ffe0;
}

#obMapaBase 
{
   width: 240px;
   padding: 10px;
}


#dvSlider 
{
   width: 200px;
   padding: 10px;
}

.transparente
{
   opacity: 1;
   background-color: transparent;
}

.invisivel
{
   display: none;
}

.exportar
{
   cursor: hand;
}

.font_14
{
   font-size: 14px;
}

.font_12
{
   font-size: 12px;
}

.botao_comentario
{
   width: 100%;
}

.dv_50
{
   width: 50%;
   display: inline-block;
   margin-right: 0px; /* Adiciona margem entre as divs */   
}

.container 
{
   display: flex;
   width: 100%;
   margin: 0px;
}

.container_pesquisa
{
   min-width: 270px;
   width: 270px;
}

.cor_mouse
{
   background-color: greenyellow;;
}

#edcomentario 
{
   height: 300px; /* Ajuste aqui a altura desejada */
   border: 1px solid var(--calcite-ui-border-1);
   border-radius: var(--calcite-border-radius);
   font-family: var(--calcite-ui-font-family);
   padding: 0.5rem;
   overflow-y: auto; /* Para permitir rolagem caso o texto exceda a altura */
}






/*SPINNER*/

.loading-spinner 
{
   background: #e4e0e0;
   background: rgba(194, 215, 255, 0.8);
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   overflow: hidden;
   display: none;
}
 
.loading-spinner.active 
{
   display: block;
}

.loading-spinner-lvc
{
   background: #e4e0e0;
   background: rgba(194, 215, 255, 0.8);
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   overflow: hidden;
   display: none;
}
 
.loading-spinner-lvc.active 
{
   display: block;
}
 
 
#hourglass 
{ 
   position: absolute;
   top: 50%;
   left: 50%;
   margin: -32px 0 0 -32px;
}

 /*SPINNER*/


 .btn-danger 
 {
   --calcite-color-brand: #c21a00 !important;
   --calcite-color-brand-hover: #c21a00 !important;
   --calcite-color-brand-press: #c21a00 !important;
   --calcite-color-brand-active: #c21a00 !important;
   --calcite-color-brand-focus: #c21a00 !important;

   --calcite-button-background-color: #c21a00 !important;
   --calcite-button-background-color-hover: #c21a00 !important;
   --calcite-button-background-color-press: #c21a00 !important;
   --calcite-button-background-color-active: #c21a00 !important;
   --calcite-button-background-color-focus: #c21a00 !important;

   --calcite-button-text-color: white !important;
   --calcite-button-text-color-hover: white !important;
   --calcite-button-text-color-press: white !important;
   --calcite-button-text-color-active: white !important;
   --calcite-button-text-color-focus: white !important;
}

/*
.esri-popup__main-container 
{
   width: 150px !important; 
   min-width: 150px !important;
   max-width: 200px !important;
}

.esri-popup__header-container 
{
   font-size: 12px !important;
   padding: 4px !important;
}

.esri-popup__content 
{
   font-size: 12px !important;
   padding: 4px !important;
}

.esri-popup__button.esri-popup__button--dock 
{
   display: none !important;
}
*/


.popup_fxd .esri-popup__main-container 
{
  width: 400px !important;
  min-width: 400px !important;
  max-width: 400px !important;
  /*height: 700px !important;*/
}

.popup_fxd .esri-popup__header-container 
{
   font-size: 10px !important;
   padding: 1px !important;
}

.popup_fxd .esri-popup__content 
{
   font-size: 10px !important;
   padding: 1px !important;
}


.popup_km .esri-popup__main-container 
{
   width: 400px !important;
   height: 500px !important;
   min-width: 400px !important;
   max-width: 400px !important;
}

.popup_km .esri-popup__header-container 
{
   font-size: 12px !important;
   padding: 4px !important;
}

.popup_km .esri-popup__content 
{
   font-size: 12px !important;
   padding: 4px !important;
}

.popup_km .esri-popup__button.esri-popup__button--dock 
{
   display: none !important;
}

.popup_lvc .esri-popup__main-container 
{
   width: 850px !important;
   min-width: 850px !important;
   max-width: 900px !important;
}

.popup_lvc .esri-popup__header-container 
{
   font-size: 12px !important;
   padding: 4px !important;
}

.popup_lvc .esri-popup__content 
{
   font-size: 12px !important;
   padding: 4px !important;
}

.popup_lvc .esri-popup__button.esri-popup__button--dock 
{
   display: none !important;
}



.popup_trav_urb .esri-popup__main-container 
{
   width: 600px !important;
   min-width: 650px !important;
   max-width: 600px !important;
}

.popup_trav_urb .esri-popup__header-container 
{
   font-size: 12px !important;
   padding: 4px !important;
}

.popup_trav_urb .esri-popup__content 
{
   font-size: 12px !important;
   padding: 4px !important;
}

.popup_trav_urb .esri-popup__button.esri-popup__button--dock 
{
   display: none !important;
}

.popup_pc .esri-popup__main-container 
{
   width: 850px !important;
   min-width: 850px !important;
   max-width: 900px !important;
}

.popup_pc .esri-popup__header-container 
{
   font-size: 12px !important;
   padding: 4px !important;
}

.popup_pc .esri-popup__content 
{
   font-size: 12px !important;
   padding: 4px !important;
}

.popup_pc .esri-popup__button.esri-popup__button--dock 
{
   display: none !important;
}



.popup_malha .esri-popup__main-container 
{
   width: 550px !important;
   min-width: 550px !important;
   max-width: 600px !important;
}

.popup_malha .esri-popup__header-container 
{
   font-size: 12px !important;
   padding: 4px !important;
}

.popup_malha .esri-popup__content 
{
   font-size: 12px !important;
   padding: 4px !important;
}

.popup_malha .esri-popup__button.esri-popup__button--dock 
{
   display: none !important;
}


.popup_acidente .esri-popup__main-container 
{
   width: 600px !important;
   min-width: 600px !important;
   max-width: 600px !important;
   text-align: justify;
}

.popup_acidente .esri-popup__header-container 
{
   font-size: 12px !important;
   padding: 4px !important;
   text-align: center;
}

.popup_acidente .esri-popup__content 
{
   font-size: 12px !important;
   padding: 4px !important;
}

.popup_acidente .esri-popup__button.esri-popup__button--dock 
{
   display: none !important;
}

.popup_acidente text-container text-container--visible::after 
{
   content: "Selecionar boletim"; /* Novo texto */
}







.popup_obra .esri-popup__main-container 
{
   width: 50% !important;
   min-width: 50% !important;
   max-width: 50% !important;
   text-align: justify;
}

.popup_obra .esri-popup__header-container 
{
   font-size: 12px !important;
   padding: 4px !important;
   text-align: center;
}

.popup_obra .esri-popup__content 
{
   font-size: 12px !important;
   padding: 4px !important;
}

.popup_obra .esri-popup__button.esri-popup__button--dock 
{
   display: none !important;
}

.popup_obra text-container text-container--visible::after 
{
   content: "Selecionar boletim"; /* Novo texto */
}










.oculto 
{
   visibility: hidden;
   width: 0;
   overflow: hidden;
   transition: width 0.3s ease-in-out, visibility 0s 0.3s;
}

#shlMapa 
{
   width: 0; /* Começa oculto */
   transition: width 0.3s ease-in-out; /* Animação suave */
}

#shlMapa:not([collapsed]) 
{
   width: 60vw; /* Ajustado para 60% da tela */
   display: flex;
   visibility: visible;
   transition: width 0.3s ease-in-out;
}

#shlMapa::before 
{
  content: "";
  position: absolute;
  left: -6px;
  top: 0;
  width: 12px;
  height: 100%;
  cursor: col-resize;
  z-index: 10;
}

#map 
{
   flex: 1; 
   width: 100%;
   height: 100%;
   display: none;
}

#dvKM
{
   border: 0px solid green;
   padding: 5px;
   font-family: 'Courier New', Courier, monospace;
   font-size: 12px;
   /*background-color: black;
   color: #FFFFFF;*/
}

/* #dvKM 
{
   font-family: 'Courier New', Courier, monospace;
   font-size: 12px;
   background-color: black;
   font-weight: bold;
   color: #FFFFFF;
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 50px; /* Ajuste conforme necessário
   display: flex;
   align-items: center; /* Centraliza verticalmente 
   justify-content: center; /* Centraliza horizontalmente 
   z-index: 10; /* Garante que fique acima dos outros elementos 
 }
  */
  
#panGoogle 
{
   border: 1px solid #000000;
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   width: 100%;
   max-height: 100%; !important;
   height: 100vh;    
}


.cursor-hand 
{
   cursor: crosshair;
}


#dvInfoRodovia
{
   position: fixed; /* Fixa o elemento na tela */
   top: 10px; /* Distância do topo */
   right: 10px; /* Distância do lado direito */
   background: white;
   padding: 8px;
   border-radius: 5px;
   box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
   font-size: 14px;
   white-space: nowrap;
   z-index: 10; /* Garante que o balão fique acima de outros elementos */
   display: none;
   font-family: Verdana, Geneva, Tahoma, sans-serif;
   font-size: 10px;
   text-align: justify;
}

calcite-table 
{
   width: 100%;
}

calcite-list-item[hidden] 
{
   display: none;
}


.container 
{
   display: flex;
   width: 100%;
   margin: 0px;
}

.container_pesquisa
{
   min-width: 270px;
   width: 350px;
   margin: 8px; 
   padding: 6px;   
}


/*LEGENDA*/
.esri-legend 
{
   font-size: 10px; /* Fonte menor */
   line-height: 1.1;
   padding: 4px;
   max-width: 200px; /* ou ajuste como preferir */
}
 
.esri-legend__service 
{
   padding: 2px 0;
   margin-bottom: 2px;
}
 
.esri-legend__layer-caption 
{
   font-weight: bold;
   margin-bottom: 2px;
}
 
.esri-legend__layer-table 
{
   margin-top: 2px;
}
 
.esri-legend__layer-row 
{
   margin-bottom: 2px;
}
 

.esri-legend__symbol 
{
   width: 14px;
   height: 14px;
}
 
.esri-legend__layer-cell--info 
{
   padding-left: 6px;
   text-align: left !important;
   padding-left: 20px;  /* Distância entre o texto e a linha de cor */
}
 
.esri-widget,
.esri-widget--panel 
{
   box-shadow: none;
   border: none;
   background-color: #FFFFFF;
}

.esri-legend__layer-cell--info .esri-legend__item-symbol 
{
   margin-right: 20px;  /* Distância entre o símbolo (linha de cor) e o texto */
}

/*LEGENDA*/

.esri-legend__item-label 
{
   text-align: left !important;
}

#split-container 
{
  display: flex;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

#resizer 
{
  width: 5px;
  background-color: #ccc;
  cursor: col-resize;
}

#resize-panel
{
  height: 100%;
  overflow: hidden;
}