/* provavelmente o div do body desse popup */
.car_base_div {
  position: relative;
  background-color: #5e5e5e;
  width: 100%;
  height: 100%;
  

  /* imagem de plano de fundo do album, relativo a a este css */
  background-image: url(../../img/fundo_escuro.jpg);
  
  overflow: hidden;
    
}


.car_div_btns {
  position: absolute;
  /*background-color: aqua;*/

  left: 99%;
  top: 5px;
  /*opacity: 0.7;*/

  transform: translate(-100%, 0%);
  z-index: 10;
}

.car_rel_overlay_div {
  position: relative;
  background-color: black;
  opacity: 0.25;
  width: 100%;
  height: 100%;
  z-index: 8;/* em cima da foto mas em baixo de outras informações*/
}

.btn_overlay {
  cursor: pointer;/* maozinha */
  background-color: red;
  border-radius: 100%;
}


.btn_overlay:hover {
  background-color: greenyellow;
  transition: 0.2s;
}

.car_abs_overlay_div {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}



/* classe da imagem de fundo */
.car_img_car {
  max-height:100%;
  display: block;
  position:absolute;
  margin-left: auto;
  margin-right: auto;

  left: 50%;
  top: 50%;
  
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  
  transform: translate(-50%, -50%);  
  
  z-index: 1;
}



/* setas para avançar e voltar o carrosel */
.car_seta_esq {
  position: absolute;
  top: 50%;
  left: 5px;
  /*width: 50px;*/
  /*height: 50px;*/
  /*border: 3px solid #73AD21;*/
  text-align:center;
  color: white;
  transform: translate(0%, -50%);  
  
  cursor: pointer;

  z-index: 10;

}

.car_seta_dir {
  position: absolute;
  top: 50%;
  right: 5px;
  /*width: 50px;*/
  /*height: 50px;*/
  /*border: 3px solid #73AD21;*/
  text-align:center;

  color: white;

  transform: translate(0%, -50%);  

  z-index: 10;

}


/* container da parte inferior do carrosel, legenda, botões, etc*/
.car_secao_baixo {
  position: absolute;
  bottom: 8%;
  left: 50%;
  width: auto;
  height: 40%;
  /*border: 1px solid #AA0000;*/
  transform: translate(-50%, 0%);    
  
  text-align:center;
  vertical-align:middle;
  
  z-index: 10;

}


.car_legenda_baixo {
  position: absolute;
  bottom: 25px;
  
  left: 50%;
  /*max-width: 100%;*/
  width: 90%;
  height: auto;

  /*border: 3px solid #73AD21;*/

  transform: translate(-50%, 0%);    
  
  line-height: 1.2em;
  font-size: 13px;

  margin-bottom: 5px;
  
  text-align:center;
  vertical-align:middle;
  
  color: white;
  
  z-index: 10;

  opacity: 0.9;
}

.car_legenda_baixo:hover {
  opacity: 1.0;
  transition: 0.25s;
}





/* a parte dos botões de bolinhas */
.car_botoes_baixo {
  display: flex;
  align-items: center;  
  
  position: absolute;
  bottom: 10px;/* margem com o fundo da pagina */
  left: 50%;
  width: fit-content;
  height: 20px;

  /*border: 2px solid #73AD21;*/

  transform: translate(-50%, 0%);/* div encaixa no fundo sozinho */
    
  text-align:center;
  vertical-align:middle;

  z-index: 10;

}


.car_bolinha {    
	width: 12px;
  height: 12px;
  border-radius: 100%;
  margin-left: 1px;
  margin-right: 1px;
  background-color: gray;
  border: 0.5px solid black;
  opacity: 0.5;

  transition: 0.25s;
}

.car_bolinha:hover {
  width: 12px;
  height: 12px;
  background-color: rgb(149, 149, 149);
  opacity: 1.0;
  transition: 0.25s;
}

/*
  clicado
*/
.car_bolinha:active {
  background-color: rgb(147, 252, 133);
  transition: 0.25s;
  opacity: 0.7;
}

/*
  ativo na lista
*/
.car_bolinha[active] {
  background-color: rgb(5, 249, 107);
  transition: 0.25s;
  opacity: 0.7;
}



.car_seta {
  opacity: 0.7;
	stroke: white;
  filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 0.1))    
}

.car_seta:hover {
  transition: 0.3s;
  opacity: 1.0;
  filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4))    
}

.car_seta:active {
  border-radius: 100%;
  background-color: gray;
}




/* Spinner de carregamento da imagem */

.album_spinner {
  color: #fff;
  font-size: 10px;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  position: relative;
  text-indent: -9999em;
  animation: mulShdSpin 1.3s infinite linear;
  transform: translateZ(0);
}

@keyframes mulShdSpin {
  0%,
  100% {
    box-shadow: 0 -3em 0 0.2em, 
    2em -2em 0 0em, 3em 0 0 -1em, 
    2em 2em 0 -1em, 0 3em 0 -1em, 
    -2em 2em 0 -1em, -3em 0 0 -1em, 
    -2em -2em 0 0;
  }
  12.5% {
    box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 
    3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, 
    -2em 2em 0 -1em, -3em 0 0 -1em, 
    -2em -2em 0 -1em;
  }
  25% {
    box-shadow: 0 -3em 0 -0.5em, 
    2em -2em 0 0, 3em 0 0 0.2em, 
    2em 2em 0 0, 0 3em 0 -1em, 
    -2em 2em 0 -1em, -3em 0 0 -1em, 
    -2em -2em 0 -1em;
  }
  37.5% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em,
     3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, 
     -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
  }
  50% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em,
     3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, 
     -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
  }
  62.5% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em,
     3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, 
     -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
  }
  75% {
    box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 
    3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, 
    -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
  }
  87.5% {
    box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 
    3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, 
    -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
  }
}