/************************************************* 
DEFINIÇÕES GERAIS
***************************************************
*/
:root {
	--cor-background-geral: #263238;
	--cor-background-geral: #111;
  --cor-background-geral-mobile: #e8edf3;
	--cor-fontes-geral: #111;
	--tamanho-fonte-geral: 24px;
  --tamanho-fonte-geral-phone-only: 12px;
  --cor-background-destaque-branco: #f5f7fa;
  
  --cor-red-text: #f44336;
	--cor-blue-text: #347cff;
	--cor-roxo-text: #392272;
	--cor-green-text:#00a63f;
	--cor-white-text:#fff;
	--cor-black-text:#000;
  --cor-grey-text:#666;
  

   /* fontes */
   --fonte-padrao-site: 'Inter';
   --fonte-titulos-cards: 'Inter Bold';


      /* CORES CARD DESTAQUE AZUL */
      --cor-fundo-destaque-azul:#fff;
      --cor-frente-destaque-azul:#051467;
      --cor-borda-destaque-azul:#e8ebee;

}

.mainContainerProjetos
{
  min-height:90vh;padding-top:60px; background-color:#263238
}



.blur{
  /* Add the blur effect */
  filter: blur(8px);
  -webkit-filter: blur(8px);
}


.separadorAzul 
{ 
  position:relative;margin-top:4vh !important;margin-bottom:4vh !important; width:50%;
  margin:0 auto; background-color: cyan; height: 1px; border: 0; 
}

.separadorVermelho 
{ 
  position:relative;margin-top:4vh !important;margin-bottom:4vh !important;width:50%;
  margin:0 auto; background-color: var(--cor-red-text); height: 1px; border: 0; 
}

.rotate9x16 {
  transform: rotate(90deg) translateY(-100%);
  transform-origin:top left;
  width: 100%;
  height:27.15em;
}

.rotate9x16 img {
  transform: rotate(90deg) translateY(-100%);
  transform-origin:top left;
  width: 100% !important;
  height:27.15em;
}

.skeleton {
  background-color: #e2e5e7;
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
  background-size: 40px 100%;
  background-repeat: no-repeat;
  background-position: left -40px top 0;
  -webkit-animation: shine 1s ease infinite;
          animation: shine 1s ease infinite;
}

@-webkit-keyframes shine {
  to {
    background-position: right -40px top 0;
  }
}

@keyframes shine {
  to {
    background-position: right -40px top 0;
  }
}

.bgBackgroundGeral
{
  background-color: #263238 !important;
}

.boxListagemVideosGerados {
  display: flex;
  flex-wrap: wrap;
/*  max-width:50vw;*/
}

.boxListagemVideosGerados>* {
  flex: 1 1 400px;
}



/* daterangepicker*/
.daterangepicker .drp-selected {
  font-size:18px !important;
  line-height:24px !important;
  font-weight:600;
  color:blue;
}

/* flatpickr */

.flatpickr-input[readonly] {
  font-size: 18px;
  font-weight: 900;
  color:blue;
}

#textoPeriodoSelecionado
{
  font-size:15px;
}

.event {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 150px;
  bottom: 3px;
  left: calc(50% - 1.5px);
  content: " ";
  display: block;
  background: #3d8eb9;
}

.event.busy {
  background: #f64747;
}


.tituloLogin
{
  font-size:28px;
}



.video-thumbnail {
  position: relative;
  display: inline-block;
  cursor: pointer;
  margin: 30px;

  &:before {
    position:absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    content: "\f01d";
    font-family: FontAwesome;
    font-size: 100px;
    color: #fff;
    opacity: .8;
    text-shadow: 0px 0px 30px rgba(0, 0, 0, 0.5);
  }
  &:hover:before {
    color: #eee;
  }
}




/* VIDEOJS */
.video-js .vjs-big-play-button {
  left: 0% !important;
  top: 0% !important;
  width:100% !important;
  height: 100% !important;
  border:none !important;
  font-size:30em !important;
  background-color:rgba(43, 51, 63, 0.2) !important;
  border-radius: 0% !important;

}

.vjs-paused.vjs-has-started .vjs-big-play-button {
  display: block;
}

#videoLiveStreamingCamera
{
  min-height:70vh; min-width:97vw;
}

/*@media only screen and (max-width:599px) {
	.video-js .vjs-big-play-button {left:25% !important;top:25% !important;width:50% !important;height:50% !important;}
}
@media only screen and (min-width:600px) and (max-width:768px) {
	.video-js .vjs-big-play-button {left:25% !important;top:25% !important;width:50% !important;height:50% !important;font-size:5em !important;}
}*/




/* CAMERA CARDS */

.containerGridCameras
{
  position:relative;top:3vh;left:0px;
}

.grid-wrapper{
  --auto-grid-min-size: 24rem;
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(var(--auto-grid-min-size), 1fr));
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.grid-wrapper ul{
  list-style-type: upper-roman;
}



.grid-wrapper li{
  list-style-type: none !important;
}


.cardCamerasDataHora
{
  font-size:1.2rem; padding:5px; position:relative; top:-60px; float:right; right:5px;
}

.main-container{
  margin: 0 auto;
  max-width: 95%;
  padding-top:5px;
 /* padding:2rem 1rem;*/
}

.cartaoCameras
{
  margin:0 auto; width:39vw;
}

.tituloProjetoCardListagemCameras
{
  font-size:16px;
}


.divResultadoBuscaImagens
{
  width:400px !important;
}

@media (max-width: 1080px) { 



  .divResultadoBuscaImagens
  {
    width:90vw !important;
  }
  
  .modal-fullscreen {
    top:100px;
  }

  .boxListagemVideosGerados {
    max-width:100vw;
  }

  .jconfirm .jconfirm-box div.jconfirm-content-pane {
    max-height:100% !important;
  }

  .jconfirm.jconfirm-white .jconfirm-box, .jconfirm.jconfirm-light .jconfirm-box {
    max-width: 95vw !important;
    /*height:70vh !important;*/
  }

  #textoPeriodoSelecionado
  {
    font-size:14px;
  }

  .tituloLogin
  {
    font-size:20px;
  }
  
  .cartaoCameras
  {
    margin:0 auto; width:98vw; 
  }
  
  .main-container{
    max-width: 100%;
    padding:0;
  }

.containerGridCameras
{
  position:relative;top:4vh !important;
  left:0px;
}

.tituloProjetoCardListagemCameras
{
  font-size:12px;
}

  .grid-wrapper{
    --auto-grid-min-size: none;
    width: 100%;
    display: block;
    margin-top:5px;
    
  }

  .grid-wrapper li{
    list-style-type: none;
  }
  

  #videoLiveStreamingCamera
  {
    min-height: auto;
    height:50vh !important; min-width:97vw;
  }
  



  }




  @media only screen and (-webkit-min-device-pixel-ratio: 2.75) {
    /* CSS XIAOMI */

    .containerGridCameras
    {
      position:relative;top:5vh !important;
      left:0px;
    }

    .main-container{
      max-width: 100%;
      padding:0;
    }
    
    .grid-wrapper{
      --auto-grid-min-size: none;
      /*background-color: rgb(47, 0, 255);*/
      width: 100%;
      display: block;
    }


  }

  @media (max-width: 375px) { 


    .containerGridCameras
    {
      position:relative;top:10vh !important;
      left:0px;
    }

    .grid-wrapper{
      --auto-grid-min-size: none;
      /*background-color: rgb(47, 0, 255);*/
      width: 100%;
      display: block;
    }
  

    .grid-wrapper li{
      list-style-type: upper-roman;
    }

    .cartaoCamera
    {
      background-color: rgb(0, 255, 21);
    }

  }


/* CAMERA CARDS */
























.bg-white-destaque { background-color: var(--cor-background-destaque-branco);}


                    /******************/
                    /* INTER SANS FONT */
                    /******************/

                    /*
                    @font-face {
                      font-family: 'Inter';
                      src: url('fonts/Inter-Regular.woff') format('woff');
                      font-weight: normal;
                      font-style: normal;
                  }*/
/*                  @font-face {
                      font-family: 'Inter Light';
                      src: url('fonts/Inter-Light.woff') format('woff');
                      font-weight: normal;
                      font-style: normal;
                  }
                  @font-face {
                      font-family: 'Inter Bold';
                      src: url('fonts/Inter-Medium.woff') format('woff');
                      font-weight: normal;
                      font-style: normal;
                  }
                  @font-face {
                      font-family: 'Inter SemiBold';
                      src: url('fonts/Inter-SemiBold.woff') format('woff');
                      font-weight: normal;
                      font-style: normal;
                  }
                  @font-face {
                      font-family: 'Inter ExtraBold';
                      src: url('fonts/Inter-ExtraBold.woff') format('woff');
                      font-weight: normal;
                      font-style: normal;
                  }


                  @font-face {
                      font-family: 'Inter Black';
                      src: url('fonts/Inter-Black.woff') format('woff');
                      font-weight: normal;
                      font-style: normal;
                  }*/


/* inter-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/inter-v12-latin-regular.eot'); /* IE9 Compat Modes */
  src: url('../fonts/inter-v12-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/inter-v12-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/inter-v12-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/inter-v12-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/inter-v12-latin-regular.svg#Inter') format('svg'); /* Legacy iOS */
}
/* inter-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/inter-v12-latin-600.eot'); /* IE9 Compat Modes */
  src: url('../fonts/inter-v12-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/inter-v12-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/inter-v12-latin-600.woff') format('woff'), /* Modern Browsers */
       url('../fonts/inter-v12-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/inter-v12-latin-600.svg#Inter') format('svg'); /* Legacy iOS */
}

/* inter-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter Bold';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/inter-v12-latin-600.eot'); /* IE9 Compat Modes */
  src: url('../fonts/inter-v12-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/inter-v12-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/inter-v12-latin-600.woff') format('woff'), /* Modern Browsers */
       url('../fonts/inter-v12-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/inter-v12-latin-600.svg#Inter') format('svg'); /* Legacy iOS */
}

/* inter-800 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  src: url('../fonts/inter-v12-latin-800.eot'); /* IE9 Compat Modes */
  src: url('../fonts/inter-v12-latin-800.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/inter-v12-latin-800.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/inter-v12-latin-800.woff') format('woff'), /* Modern Browsers */
       url('../fonts/inter-v12-latin-800.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/inter-v12-latin-800.svg#Inter') format('svg'); /* Legacy iOS */
}
/* inter-800 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter Extrabold';
  font-style: normal;
  font-weight: 800;
  src: url('../fonts/inter-v12-latin-800.eot'); /* IE9 Compat Modes */
  src: url('../fonts/inter-v12-latin-800.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/inter-v12-latin-800.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/inter-v12-latin-800.woff') format('woff'), /* Modern Browsers */
       url('../fonts/inter-v12-latin-800.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/inter-v12-latin-800.svg#Inter') format('svg'); /* Legacy iOS */
}


/* inter-900 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: normal;
  font-weight: 900;
  src: url('../fonts/inter-v12-latin-900.eot'); /* IE9 Compat Modes */
  src: url('../fonts/inter-v12-latin-900.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/inter-v12-latin-900.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/inter-v12-latin-900.woff') format('woff'), /* Modern Browsers */
       url('../fonts/inter-v12-latin-900.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/inter-v12-latin-900.svg#Inter') format('svg'); /* Legacy iOS */
}

/* inter-900 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter Black';
  font-style: normal;
  font-weight: 900;
  src: url('../fonts/inter-v12-latin-900.eot'); /* IE9 Compat Modes */
  src: url('../fonts/inter-v12-latin-900.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/inter-v12-latin-900.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/inter-v12-latin-900.woff') format('woff'), /* Modern Browsers */
       url('../fonts/inter-v12-latin-900.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/inter-v12-latin-900.svg#Inter') format('svg'); /* Legacy iOS */
}









                



.azul-destaque-text { color:var(--cor-frente-destaque-azul) !important; }
.blue-text {   color: var(--cor-blue-text) !important;   }
.red-text {   color: var(--cor-red-text) !important;   }
.black-text {   color: var(--cor-black-text) !important;   }
.grey-text {   color: var(--cor-grey-text) !important;   }
.white-text {   color: var(--cor-white-text) !important;   }
.roxo-text {   color: var(--cor-roxo-text) !important;   }
.green-text {   color: var(--cor-green-text) !important;   }

/* LARGURAS PADRONIZADAS */

.w-10px { width:10px !important;}
.w-20px { width:20px !important;}
.w-30px { width:30px !important;}
.w-35px { width:35px !important;}
.w-40px { width:40px !important;}
.w-45px { width:45px !important;}
.w-50px { width:50px !important;}
.w-55px { width:55px !important;}
.w-60px { width:60px !important;}
.w-65px { width:65px !important;}
.w-70px { width:70px !important;}
.w-75px { width:75px !important;}
.w-80px { width:80px !important;}
.w-85px { width:85px !important;}
.w-90px { width:90px !important;}
.w-100px { width:100px !important;}
.w-150px { width:150px !important;}
.w-160px { width:160px !important;}
.w-170px { width:170px !important;}
.w-175px { width:175px !important;}
.w-180px { width:180px !important;}
.w-200px { width:200px !important;}
.w-250px { width:250px !important;}
.w-300px { width:300px !important;}
.w-400px { width:400px !important;}
.w-500px { width:500px !important;}

.w-99 {    width: 99% !important;}
.w-98 {    width: 98% !important;}
.w-97 {    width: 97% !important;}
.w-96 {    width: 96% !important;}
.w-95 {    width: 95% !important;}
.w-90 {    width: 90% !important;}
.w-88 {    width: 88% !important;}
.w-85 {    width: 85% !important;}
.w-80 {    width: 80% !important;}
.w-75 {    width: 75% !important;}
.w-70 {    width: 70% !important;}


.w-80mobile100 {    width: 80% !important;}
@media (max-width: 1080px) {
  .w-80mobile100 {    width: 100% !important;}
}


.w-70mobile100 {    width: 70% !important;}
@media (max-width: 1080px) {
  .w-70mobile100 {    width: 100% !important;}
}



.w-60mobile100 {    width: 60% !important;}
@media (max-width: 1080px) {
  .w-60mobile100 {    width: 100% !important;}
}

.w-50mobile100 {    width: 50% !important;}
@media (max-width: 1080px) {
  .w-50mobile100 {    width: 100% !important;}
}


.w-40mobile100 {    width: 40% !important;}
@media (max-width: 1080px) {
  .w-40mobile100 {    width: 100% !important;}
}


.w-60 {    width: 60% !important;}
.w-45 {    width: 45% !important;}
.w-40 {    width: 40% !important;}
.w-33 {    width: 33% !important;}
.w-30 {    width: 30% !important;}
.w-25 {    width: 25% !important;}
.w-20 {    width: 20% !important;}
.w-10 {    width: 10% !important;}



hr.hrazul {
  border-top: 1px dotted rgb(17, 0, 255);
}


/* ALTURAS PADRONIZADAS */

.h-10vh{ height:10vh !important};
.h-20vh{ height:20vh !important};
.h-30vh{ height:30vh !important};
.h-40vh{ height:40vh !important};
.h-50vh{ height:50vh !important};


.h-50px{ height:50px !important};
.h-60px{ height:60px !important};
.h-70px{ height:70px !important};
.h-80px{ height:80px !important};
.h-90px{ height:90px !important};
.h-100px{ height:100px !important};
.h-120px{ height:120px !important};
.h-150px{ height:150px !important};
.h-200px{ height:200px !important};
.h-250px{ height:250px !important};
.h-300px{ height:300px !important};
.h-400px{ height:400px !important};
.h-500px{ height:500px !important};


.font-size-pp {    font-size: 9px !important;}
.font-size-p {    font-size: 11px !important;}
.font-size-m {    font-size: 13px !important;}
.font-size-g {    font-size: 17px !important;}

.font-size-7 {    font-size: 7px !important;}
.font-size-8 {    font-size: 8px !important;}
.font-size-9 {    font-size: 9px !important;}
.font-size-10 {    
  --minFontSize: 8px;
  --maxFontSize: 10px;
  --scaler: 5vw;
  font-size: clamp( var(--minFontSize), var(--scaler), var(--maxFontSize) );
}
.font-size-11 {    font-size: 11px !important;}
.font-size-12 {    
  --minFontSize: 10px;
  --maxFontSize: 12px;
  --scaler: 5vw;
  font-size: clamp( var(--minFontSize), var(--scaler), var(--maxFontSize) );
}
.font-size-13 {    font-size: 13px !important;}
.font-size-14 {    
  --minFontSize: 12px;
  --maxFontSize: 14px;
  --scaler: 5vw;
  font-size: clamp( var(--minFontSize), var(--scaler), var(--maxFontSize) );
}
.font-size-15 {    font-size: 15px !important;}
.font-size-16 {    
  --minFontSize: 12px;
  --maxFontSize: 16px;
  --scaler: 5vw;
  font-size: clamp( var(--minFontSize), var(--scaler), var(--maxFontSize) );
}
.font-size-17 {    font-size: 17px !important;}
.font-size-18 {    
  --minFontSize: 14px;
  --maxFontSize: 18px;
  --scaler: 5vw;
  font-size: clamp( var(--minFontSize), var(--scaler), var(--maxFontSize) );
}
.font-size-20 {    
  --minFontSize: 16px;
  --maxFontSize: 20px;
  --scaler: 5vw;
  font-size: clamp( var(--minFontSize), var(--scaler), var(--maxFontSize) );
}
.font-size-22 {    font-size: 22px !important;}
.font-size-24 {    
  --minFontSize: 20px;
  --maxFontSize: 24px;
  --scaler: 5vw;
  font-size: clamp( var(--minFontSize), var(--scaler), var(--maxFontSize) );
}
.font-size-26 {    
  --minFontSize: 22px;
  --maxFontSize: 26px;
  --scaler: 5vw;
  font-size: clamp( var(--minFontSize), var(--scaler), var(--maxFontSize) );
}

.font-size-28 {    
  --minFontSize: 24px;
  --maxFontSize: 28px;
  --scaler: 5vw;
  font-size: clamp( var(--minFontSize), var(--scaler), var(--maxFontSize) );
}

.font-size-30 {    
  --minFontSize: 26px;
  --maxFontSize: 30px;
  --scaler: 5vw;
  font-size: clamp( var(--minFontSize), var(--scaler), var(--maxFontSize) );
}

.font-size-32 {    font-size: 32px !important; }
.font-size-36 {    
  --minFontSize: 32px;
  --maxFontSize: 36px;
  --scaler: 5vw;
  font-size: clamp( var(--minFontSize), var(--scaler), var(--maxFontSize) );
}
.font-size-40 {    
  --minFontSize: 36px;
  --maxFontSize: 40px;
  --scaler: 5vw;
  font-size: clamp( var(--minFontSize), var(--scaler), var(--maxFontSize) );
}

/* font size responsive */
.font-size-45 {    
  --minFontSize: 32px;
  --maxFontSize: 45px;
  --scaler: 5vw;
  font-size: clamp( var(--minFontSize), var(--scaler), var(--maxFontSize) );
}


.font-size-48 {    
  --minFontSize: 44px;
  --maxFontSize: 48px;
  --scaler: 5vw;
  font-size: clamp( var(--minFontSize), var(--scaler), var(--maxFontSize) );
}
.font-size-50 {    font-size: 55px !important; }
.font-size-60 {    
  --minFontSize: 40px;
  --maxFontSize: 60px;
  --scaler: 5vw;
  font-size: clamp( var(--minFontSize), var(--scaler), var(--maxFontSize) );
}


.font-size-100 {    
  --minFontSize: 80px;
  --maxFontSize: 100px;
  --scaler: 5vw;
  font-size: clamp( var(--minFontSize), var(--scaler), var(--maxFontSize) );
}


.font-size-150 {    
  --minFontSize: 130px;
  --maxFontSize: 150px;
  --scaler: 10vw;
  font-size: clamp( var(--minFontSize), var(--scaler), var(--maxFontSize) );
}



.font-size-200 {    
  --minFontSize: 150px;
  --maxFontSize: 200px;
  --scaler: 10vw;
  font-size: clamp( var(--minFontSize), var(--scaler), var(--maxFontSize) );
}

.font-size-gg {    font-size: 24px !important;}
.font-size-xgg {    font-size: 36x !important;}


.fonte-thin {    font-weight: 100 !important;}
.fonte-light {    font-weight: 100 !important;}
.fonte-normal {    font-weight: 400 !important;}
.fonte-bold {   font-weight: 500 !important;}
.fonte-bolder {    font-weight: 600 !important;}
.fonte-extrabold { font-weight: 700 !important;}
.fonte-black { font-weight: 800 !important;}


strong {    font-weight: 800 !important;}
.strong {    font-weight: 800 !important;}


stronger {    font-weight: 900 !important;}
.stronger {    font-weight: 900 !important;}

extrabold {    font-weight: 800 !important;}
.extrabold {    font-family:'Inter Black' !important;}




.cardDestaqueAzul
{
  background-color: var(--cor-fundo-destaque-azul);
  color:var(--cor-frente-destaque-azul);
  border:1px solid var(--cor-borda-destaque-azul);
}




.visivel {    display: block }
.invisivel {    display: none;}

.grow {    transition: all .2s ease-in-out;}
.grow:hover {    transform: scale(1.03); top:-2px;}



.growP {    transition: all .2s ease-in-out;}
.growP:hover {    transform: scale(1.01);}





.maiusculas {
    text-transform: uppercase !important;
}

.minusculas {
    text-transform: lowercase !important;
}

.text-shadow
{
  text-shadow: 2px 2px 4px #000000;
}


body
{
    background-color:var(--cor-background-geral);
    font:var(--tamanho-fonte-geral) !important;
    font-family: var(--fonte-padrao-site) !important;
    overflow-x: hidden;
}

.mobile-only { display:none; visibility: hidden; }
.desktop-only {	display:block; visibility: visible;}

.centered {
	position: fixed;
	top: 50%;
	left: 50%;
	/* bring your own prefixes */
	transform: translate(-50%, -50%);
  }




.NEGRITO {font-weight:600;}
.VERMELHO {color:red;}

/* PDOCRUD */

.form-control {
  font-size: 17px !important;
}


.col-form-label {
  font-size: 17px;
}

.checkbox label, .radio label {
  font-size: 17px;
}

table td {
    font-size: 15px;
    font-weight: 300;
}

table th {
    font-size: 15px;
    font-weight: 600;
}

p {
    font-size: 17px;
}

a {
  text-decoration: none !important;
}

.pdocrud-table-container a {
  padding: 12px;
  font-size: 17px;
}


.div-imagem-principal
{
  width:100% !important;
  margin:0 auto !important; 
  height:auto;
  position: relative;
  top:50px;
  left:0px;
  padding:0px;
}

#imagemPrincipal
{
  width:100% !important;
  margin:0 auto !important; 
  height:auto;
}

#imagemPrincipal img
{
  object-fit: fill;
}





/*/////////////////////////////////////////////////////////////////////////////////////////*/
/* novo imagem principal */
/*/////////////////////////////////////////////////////////////////////////////////////////*/



/************************************************************************************************/

.textoHoraMiniaturaImagem
{ font-size:14px;}

.dadosProjeto
{
  width:100vw; margin:0 auto; height:auto !important;position:relative;top:9vh !important;
}

.dadosProjetoTituloProjeto{ font-size:20px; font-weight:800 }
.dadosProjetoDescricaoProjeto{ font-size:14px; }

.botao-barra-ver-camera
{
  min-height:50px;
  width:100%;
  margin-bottom:15px;
  font-size:10px !important;
  
}


.container-listagem-cameras
{
  position:relative;margin:0 auto; top:10vh;
  width:50%;
  /*margin-bottom:100px;*/
}


.coluna-dados-listagem-cameras
{
    font-size:12px;
}

.imagem-full-camera
{
    width:100% !important;
}


.datepicker
{margin: 0 auto !important;}

.datepicker--time-current-hours, .datepicker--time-current-minutes {
  font-size:2em;
  font-weight:700;
  color:blue;
}


.datepicker--time-row input[type=range] {
  background-color: bisque;
}


#scroll {
  position: fixed;
  right: 20px;
  color:white !important;
  bottom: 20px;
  cursor: pointer;
  width: 50px;
  height: 50px;
  background-color: #3498db;
  text-indent: -9999px;
  -webkit-border-radius: 60px;
  -moz-border-radius: 60px;
  border-radius: 60px;
  z-index: 999999;
  box-shadow: 0 10px 20px rgb(0 0 0 / 19%), 0 6px 6px rgb(0 0 0 / 23%);
}




::-webkit-scrollbar {
    width: 8px;
  }
  
  /* Track */
  ::-webkit-scrollbar-track {
    background: #f1f1f1;
  }
  
  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: #888;
  }
  
  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: #555;
  }





@-webkit-keyframes blinker {
    from {opacity: 1.0;}
    to {opacity: 0.0;}
  }
  
  .blink{
      text-decoration: blink;
      -webkit-animation-name: blinker;
      -webkit-animation-duration: 2s;
      -webkit-animation-iteration-count:infinite;
      -webkit-animation-timing-function:ease-in-out;
      -webkit-animation-direction: alternate;
  }



.blink-fast{
    text-decoration: blink;
    -webkit-animation-name: blinker;
    -webkit-animation-duration: 0.7s;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-timing-function:ease-in-out;
    -webkit-animation-direction: alternate;
}






.imageHolder
{
    height:80vh !important;
    width:90vw !important;
}



  .zoomInOn, .zoomOutOn
  {
      right: 20px !important;
  }


  .imagem-thumbnail
  {
    width: 100%;
    height:auto;
  }


  .imagem-thumbnail-lateral
  {
    width: 7vw;
    height:auto;
  }

/*.data-imagem-thumbnail {font-size:18px;}
.data-imagem-thumbnail-lateral {font-size:14px;}*/

.imagem-thumbnail-rodape
{
  width: 6vw;
  height:auto;
}

.imagem-thumbnail-buscar-imagens
{
  width:8vw;
  height:auto;
}

.data-imagem-thumbnail-rodape {font-size:14px;}

.background-amarelo
{
  background-color: #FFFFAA;
}

.background-vermelho
{
  background-color: #c58f8f;
}


#barra-ferramentas
{
  width:10vw;position:fixed; top:84vh; right:18vw;z-index:999999999999;
}

#barra-ferramentas-mobile
{
  position:fixed !important;bottom: 1vh !important; z-index:9;
}

#barra-topo-ver-camera
{
  position:fixed;top:1.2vh;z-index:9999999999999999 !important; left:10vw; z-index:11; 
}

#barra-informacoes-imagem
{
  background-color:#f1f1f1 !important; width:20vw;position:fixed; bottom:10px;  right:0; z-index:10;
}

#barra-miniaturas-imagens
{
  width:auto;position:fixed; bottom:42px;margin:0 auto; opacity:0.9; left:0px;z-index:1;
}



.barra-analytics-camera
{
  position:fixed; width:500px; left:5px; top:6vh;z-index:99999 !important;
}






/* START TOOLTIP STYLES */
[tooltip] {
  position: relative; /* opinion 1 */
}

/* Applies to all tooltips */
[tooltip]::before,
[tooltip]::after {
  text-transform: none; /* opinion 2 */
  font-size: 0.8em; /* opinion 3 */
  font-weight:700;
  line-height: 1;
  user-select: none;
  pointer-events: none;
  position: absolute;
  display: none;
  opacity: 0;
}
[tooltip]::before {
  content: '';
  border: 5px solid transparent; /* opinion 4 */
  z-index: 1001; /* absurdity 1 */
}
[tooltip]::after {
  content: attr(tooltip); /* magic! */
  
  /* most of the rest of this is opinion */
  font-family: Helvetica, sans-serif;
  text-align: center;
  
  /* 
    Let the content set the size of the tooltips 
    but this will also keep them from being obnoxious
    */
  min-width: 3em;
  max-width: 21em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 1ch 1.5ch;
  border-radius: .3ch;
  box-shadow: 0 1em 2em -.5em rgba(0, 0, 0, 0.35);
  background: #333;
  color: #fff;
  z-index: 1000; /* absurdity 2 */
}

/* Make the tooltips respond to hover */
[tooltip]:hover::before,
[tooltip]:hover::after {
  display: block;
}

/* don't show empty tooltips */
[tooltip='']::before,
[tooltip='']::after {
  display: none !important;
}

/* FLOW: UP */
[tooltip]:not([flow])::before,
[tooltip][flow^="up"]::before {
  bottom: 100%;
  border-bottom-width: 0;
  border-top-color: #333;
}
[tooltip]:not([flow])::after,
[tooltip][flow^="up"]::after {
  bottom: calc(100% + 5px);
}
[tooltip]:not([flow])::before,
[tooltip]:not([flow])::after,
[tooltip][flow^="up"]::before,
[tooltip][flow^="up"]::after {
  left: 50%;
  transform: translate(-50%, -.5em);
}

/* FLOW: DOWN */
[tooltip][flow^="down"]::before {
  top: 100%;
  border-top-width: 0;
  border-bottom-color: #333;
}
[tooltip][flow^="down"]::after {
  top: calc(100% + 5px);
}
[tooltip][flow^="down"]::before,
[tooltip][flow^="down"]::after {
  left: 50%;
  transform: translate(-50%, .5em);
}

/* FLOW: LEFT */
[tooltip][flow^="left"]::before {
  top: 50%;
  border-right-width: 0;
  border-left-color: #333;
  left: calc(0em - 5px);
  transform: translate(-.5em, -50%);
}
[tooltip][flow^="left"]::after {
  top: 50%;
  right: calc(100% + 5px);
  transform: translate(-.5em, -50%);
}

/* FLOW: RIGHT */
[tooltip][flow^="right"]::before {
  top: 50%;
  border-left-width: 0;
  border-right-color: #333;
  right: calc(0em - 5px);
  transform: translate(.5em, -50%);
}
[tooltip][flow^="right"]::after {
  top: 50%;
  left: calc(100% + 5px);
  transform: translate(.5em, -50%);
}

/* KEYFRAMES */
@keyframes tooltips-vert {
  to {
    opacity: .9;
    transform: translate(-50%, 0);
  }
}

@keyframes tooltips-horz {
  to {
    opacity: .9;
    transform: translate(0, -50%);
  }
}

/* FX All The Things */ 
[tooltip]:not([flow]):hover::before,
[tooltip]:not([flow]):hover::after,
[tooltip][flow^="up"]:hover::before,
[tooltip][flow^="up"]:hover::after,
[tooltip][flow^="down"]:hover::before,
[tooltip][flow^="down"]:hover::after {
  animation: tooltips-vert 300ms ease-out forwards;
}

[tooltip][flow^="left"]:hover::before,
[tooltip][flow^="left"]:hover::after,
[tooltip][flow^="right"]:hover::before,
[tooltip][flow^="right"]:hover::after {
  animation: tooltips-horz 300ms ease-out forwards;
}





.sliderMiniaturasImagens-arrow {
  position: absolute;
  top: 40%;
  margin-top: -15px;
  cursor: pointer;
  font-size: 24px;
  color: #005192;
}

.sliderMiniaturasImagens-arrow:hover {
  font-size: 26px;
}

.prev-arrow-sliderMiniaturasImagens {
  left: -25px;
  width: 0;
  height: 0;
  z-index: 999;
}

.next-arrow-sliderMiniaturasImagens {
  z-index: 999;
  right: 20px;
  width: 0;
  height: 0;
}



/*only screen and (-webkit-min-device-pixel-ratio: 2.75)*/
@media (max-width: 1080px) 
{
  
  .boxListagemVideosGerados {
    max-width:100vw;
  }


  body
  {
      background-color:var(--cor-background-geral-mobile);
  }

    html{ font-size:var(--tamanho-fonte-geral-phone-only); }

    .mobile-only {display: block;visibility: visible;}
    .desktop-only {	display:none; visibility: hidden;}
    .modalLogin { width:70vw !important; margin:0 auto;}
    

  .barra-analytics-camera
  {
    width:100%;
    position:relative;
    top:28vh !important;
  }

  #linha-informacoes-camera-mobile
  {
    position:fixed; top:16vh; background-color:white; padding:10px; color:black; font-size:24px !important;
  }

    #barra-informacoes-imagem-mobile
    {
      width:100vw !important;top:60vh !important;position: fixed;
    }
    
    .textoBotaoBarraInformacoesImagemMobile
    { position:relative !important;top:-10px !important }

    .div-imagem-principal
    {
      width:100% !important;
      margin:0 auto !important; 
      height:auto;
      position: relative;
      top:30vh;
      /*border-top:2px solid white;
      border-bottom:2px solid white;*/
      left:0px;
      padding:0px;
    }


    
    #barra-miniaturas-imagens
    {
    display: none !important;visibility: hidden !important; width:100vw;position:fixed; top:63vh;margin:0 auto; left:0px;z-index:1;left:-13px
    }
    

    .container-listagem-cameras
    {
      top:6vh !important;
      width:97% !important;
    }

    .dadosProjeto
    {
      top:15vh !important;
      width:100% !important;

    }

    .dadosProjetoTituloProjeto
    {
      font-size:16px;
    }

    .dadosProjetoDescricaoProjeto
    {
      font-size:12px;
    }

    .dadosProjetoColunaTituloProjeto
    {
      padding-top:5px;
    }

    .dadosProjetoLogotipoProjeto
    {
      width:40vw !important;
      padding-top:5px;
      padding-bottom:10px;
    }

    /*.botao-barra-ver-camera { width:40% }*/

    .imagem-thumbnail { width: 95%; }   

    .imagem-thumbnail-rodape {width:27vw !important;}

    #barra-miniatura-imagens
    {
      top:70vh !important;
    }

    #logoCabecalho
    {
      height:5vh !important;
    }

    .textoHoraMiniaturaImagem
    { font-size:10px;}


}



@media (max-width: 1080px) and (orientation:landscape) { 

  .video-js .vjs-tech {
    max-height:70vh !important;
  }

  .jconfirm.jconfirm-white .jconfirm-box, .jconfirm.jconfirm-light .jconfirm-box {
    max-width: 97vw !important;
    height:55vh !important;
  }

#linha-informacoes-camera-mobile
{
  position:fixed; top:9vh; height:40px; padding:10px; color:black; font-size:18px !important;
}


  .div-imagem-principal
  {
    top:9vh !important;
  }

  #barra-ferramentas-mobile
  {
     bottom: 2vh !important; z-index:9;
  }

  #barra-informacoes-imagem-mobile
  {
    top:10vh !important;width:30vw !important;right:5px !important; float:right !important; position:fixed;
  }

  .textoBotaoBarraInformacoesImagemMobile
  { display:none !important }


  #informacoesCameraBarraImagemMobile
  {
    display: none !important;
  }

  #logoCabecalho
  {
    height:8vh !important;
  }

  #barra-informacoes-projeto-mobile
  {
    display: none;
    bottom:0px;
    
  }

/*  #barra-informacoes-imagem-mobile
  {
    top:21vh !important;
    width:28vw !important;
    left: 526px !important;
  }*/
  
}

/* RANGE SLIDER */


.btn-floating {
  position: fixed;
  right: 25px;
  overflow: hidden;
  width: 50px;
  height: 40px;
  border-radius: 100px;
  border: 0;
  z-index: 9999;
  color: white;
  transition: .2s;
}

.btn-floating:hover {
  width: auto;
  padding: 0 20px;
  padding-top:5px;
  cursor: pointer;
}

.btn-floating span {
  font-size: 22px;
  margin-left: 5px;
  transition: .2s;
  line-height: 0px;
  display: none;
}

.btn-floating:hover span {
  display: inline-block;
}


.btn-floating.salvarAlteracoes {
  background-color: #34af23;
  bottom: 25px;
}

.btn-floating.salvarAlteracoes:hover {
  background-color: #1f7a12
}


.informacoesPeriodoCaptacaoCamera
{
  color: #999; position:relative; font-size:12px;
}

@media (max-width: 480px) { 

  .informacoesPeriodoCaptacaoCamera
  {
    color: #999 !important; font-size:9px !important;
  }
  
}


.verticalCenter
{
  vertical-align: middle;
}


.badgeNomeCamera {
            color: white;
            padding: 3px 10px;
            border-radius: 6px;
            font-weight: 600;
            font-size: 0.85rem;
            letter-spacing: 0.5px;
            z-index: 10;
        }






 .botaoPadrao {
            background: white;
            border: 1px solid #e9ecef;
            border-radius: 8px;
            padding: 0.5rem;
            text-align: center;
            transition: all 0.2s ease;
            cursor: pointer;
            text-decoration: none;
            color: #495057;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.5rem;
            height: 100%;
        }

        .botaoPadraoPequeno {
            background-color: white;
            border: 1px solid #e9ecef;
            border-radius: 8px;
            padding: 0.5rem;
            padding-left:1rem;
            padding-right:1rem;
            text-align: center;
            transition: all 0.2s ease;
            cursor: pointer;
            text-decoration: none;
            color: #495057;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.5rem;
            height: 100%;
        }


        .botaoPadrao:hover {
            border-color: #0d6efd;
            background: #f8f9ff;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(13, 110, 253, 0.15);
            color: #0d6efd;
        }

/*        .btn-icon {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.25rem;
            transition: all 0.2s ease;
        }*/

        .iconeBotaoPadrao {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.25rem;
            transition: all 0.2s ease;
        }

        .iconeBotaoPadraoPequeno {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1rem;
            transition: all 0.2s ease;
        }


        .botaoPadrao:hover .btn-icon {
            transform: scale(1.1);
        }

        .botaoPadrao:hover .iconeBotaoPadrao {
            transform: scale(1.1);
        }

        .botaoPadraoPequeno:hover .iconeBotaoPadraoPequeno {
            transform: scale(1.1);
        }



/*        .icon-settings { background: #fff3cd; color: #856404; }
        .icon-video { background: #cfe2ff; color: #084298; }
        .icon-portal { background: #f8d7da; color: #842029; }
        .icon-daily { background: #d1e7dd; color: #0f5132; }
        .icon-partial { background: #e7d9f5; color: #6610f2; }
        .icon-general { background: #ffe5d9; color: #dc3545; }
*/
        .iconeBotaoPadraoAmarelo { background: #fff3cd; color: #856404; }
        .iconeBotaoPadraoAzul { background: #cfe2ff; color: #084298; }
        .iconeBotaoPadraoVinho { background: #f8d7da; color: #842029; }
        .iconeBotaoPadraoVerde { background: #d1e7dd; color: #0f5132; }
        .iconeBotaoPadraoLilas { background: #e7d9f5; color: #6610f2; }
        .iconeBotaoPadraoVermelho { background: #ffe5d9; color: #dc3545; }

        .botaoPadraoLabel {
            font-size: 0.75rem;
            font-weight: 500;
            line-height: 1.3;
            text-transform: uppercase;
            letter-spacing: 0.3px;
        }

        .botaoPadraoLabelPequeno {
            font-size: 0.60rem;
            font-weight: 600;
            line-height: 1;
            text-transform: uppercase;
            letter-spacing: 0.3px;
        }

       @media (max-width: 480px) { 

         .botaoPadraoLabelPequeno {
            font-size: 0.65rem;
            font-weight: 600;
            line-height: 1;
            text-transform: uppercase;
            letter-spacing: 0.3px;
        }
      }


      .yellow-text
      {
        color:yellow;
      }

      .botaoVerAoVivo
      {
        display: inline-flex;
        align-items: center;
        gap: 3px;
        padding: 3px 7px;
        border-radius: 20px;
        /*font-size: 0.85rem;
        font-weight: 500;*/
        background: #f8d7da;
        color: #721c24;
       }

      .botaoMudarPara4K
      {
        display: inline-flex;
        align-items: center;
        gap: 3px;
        padding: 3px 15px;
        border-radius: 20px;
        background: #fff3cd;
        color: #0602e2;
       }



      /* ESTILOS DO PRELOADER */
      /* --- CSS DO PRELOADER --- */
        #preloader {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(249, 249, 249, 0.9);
            z-index: 9999;
            display: flex;
            justify-content: center;
            align-items: center;
            transition: opacity 0.5s ease;
        }

        .preloadLogoContainer {
            width: 230px;
            height: 230px;
            background-color: #fff;
            padding: 15px;
            box-shadow: 0 10px 25px rgba(0,0,0,0.1);
            display: flex;
            flex-direction: column;
            opacity: 0;
            transform: scale(0.5);
            overflow: hidden; 
            /* Popup abre em 0.5s */
            animation: popupEnter 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
        }

        .preloadLogoTop {
            display: flex;
            height: 150px;
            width: 100%;
        }

        .blocoPreload {
            display: flex;
            justify-content: center;
            align-items: center;
            color: white;
            /* AQUI ESTÁ A DEFINIÇÃO DA FONTE PARA L e S */
            font-family: 'Inter', sans-serif;
            font-weight: 500; /* SemiBold */
            font-size: 100px;
            line-height: 1;
        }

        /* 1. Bloco L (Verde) */
        .blocoPreload-l {
            width: 50%;
            background-color: #84d02a;
            transform: translateX(-120%);
            /* Duração: 1s | Delay: 0.5s */
            animation: slideInLeft 0.2s ease-out 0.5s forwards;
        }

        /* 2. Bloco S (Cinza) */
        .blocoPreload-s {
            width: 50%;
            background-color: #999999;
            transform: translateX(120%);
            /* Duração: 1s | Delay: 1.5s */
            animation: slideInRight 0.2s ease-out 1.0s forwards;
        }

        /* 3. Bloco Timelapses (Laranja) */
        .preloadLogoBottom {
            height: 40px;
            background-color: #F87856;
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            /* AQUI ESTÁ A DEFINIÇÃO DA FONTE PARA O TEXTO */
            font-family: 'Inter', sans-serif;
            font-weight: 500; /* SemiBold */
            font-size: 18px;
            letter-spacing: 5px; /* Ajustei levemente para Montserrat */
            text-transform: uppercase;
            margin-top: auto;
            transform: translateY(150%);
            /* Duração: 1s | Delay: 2.5s */
            animation: slideInUp 0.2s ease-out 1.5s forwards;
        }

        /* --- KEYFRAMES --- */
        @keyframes popupEnter {
            to { opacity: 1; transform: scale(1); }
        }
        @keyframes slideInLeft {
            to { transform: translateX(0); }
        }
        @keyframes slideInRight {
            to { transform: translateX(0); }
        }
        @keyframes slideInUp {
            to { transform: translateY(0); }
        }

        .preloader-hidden {
            opacity: 0;
            pointer-events: none;
        }
        /*******************************************************************************************/