.ol-print {
  position: absolute !important;
  right: 35px !important;
  top: 117px !important;
  left: auto !important;
  display: flex;
  gap: 1px;
  flex-direction: row-reverse;
  opacity: 1;
  transition: transform 0.32s ease, opacity 0.5s;
}

.ol-print-hide {
  transform: translateY(-114px);
  opacity: 0 !important;
}

.ol-legend {
  /* margin-left: 110%; */
  opacity: 1 !important;
}

/* ICON CHANGE */

.ol-print button {
  /* background-image: url("../img/vetores/barra_superior_direita/imprimir_dark.b9964383793e.png") !important; */
  background-image: url("../img/vetores/barra_superior_direita/imprimir_dark.b9964383793e.png") !important;
  background-size: 80% !important; /* Set background image size to 90% */
  /* background-size: contain !important; */
  background-repeat: no-repeat !important;
  background-position: center !important;
  width: 24px !important; /* Adjust as needed */
  height: 24px !important; /* Adjust as needed */
  border: none !important; /* Remove any default borders */
}

/* Hide the original icon if it's a pseudo-element */
.ol-print button::before {
  content: none !important;
}

.ol-print button::after {
  content: none !important;
}

/* ESTILO JANELA DE IMPRESSÃO */

form {
  /* border-radius: 30px !important; */
  overflow: hidden !important;

}

.ol-ext-print-dialog > form .ol-closebox {
  left: 345px !important;
}

.ol-print-param {
  /* div que engloba todos os parametros de impressao - lado esquerdo */
  background-color: #333333 !important;
  color: white;
  padding: 5px 0 !important;
}

.printTittle {
  color: #fff !important;
  margin: 4px 1px 0 48px !important;
}

.printTittle::before {
  content: url("../img/37-IMPRESSORA-C.7bc1697fb3b8.svg");
  position: absolute;
  left: 17px;
  top: 5px;
}

.paramBody{
  position: absolute;
  top: 42px;
  bottom: 36px;
  width: 100%;
  overflow-y: auto;
  padding: 0;
  border-top: solid 2px #AAA;
  border-bottom: solid 2px #AAA;
}

.ol-print-map {
  /* fundo da folha */
  background-color: #606060 !important ;
}

.ol-ext-buttons { /* div dos botões dos parametros de impressão */
  text-align: center !important;
  padding: 0 !important;
  border: none !important;
  position: absolute;
  bottom: 5px;
  width: 100%;
  margin: 0 !important;
}

.ol-ext-buttons button {
  color: #333333 !important;
  background-color: #bcbcbc !important;
  padding: 1px 10px !important;
  border-radius: 14px;
}

/* SEÇÃO ELEMENTOS BÁSICOS */

.elemBasicos {
  padding: 0 10px;
}

.elemBasicos label {
  width: 90px !important;
  font-size: 11px;
}

.elemBasicos label.ol-ext-toggle-switch {
  width: 120px !important;
}

.elemBasicos select {
  width: 70px;
}

.ol-size, .ol-print-north, .ol-scale, .gradeCoord {
  width: 50%;
  display: inline-block;
}

 /* SEÇÃO DE LAYOUT */

 .layout {
  border-top: solid 2px #AAA ;
  padding: 0 5px 6px;
 }



.ol-ext-buttons button:hover {
  background-color: #a1a1a1 !important;
}

.ol-print-param .ol-orientation input:checked + span {
  border: solid 2px #acacac !important;
  border-radius: 10px !important;
}

.ol-config {
  text-align: center;
}




/* Carousel prévia layout*/

.previaLayout {
  width: 100%;
  height: fit-content;
  text-align: center;
  padding: 5px;
  background-color: #606060;
  position: relative;
}

.carouselLayout {
  width: fit-content;
  position: relative;
  margin: auto;
  margin-top: 20px;
  
}

/* esconde os slides por padrão */
.layoutSlides {
  display: none;
  position: relative;
  height: 280px;
}

/* imagens dos slides - orientação retrato */
.slideRetrato0::after {
  height: 280px;
}

.slideRetrato1:after {
  content: "";
  display: block;
  height: 280px !important;
  width: 198px !important;
  background-image: url("../img/previa_layouts/L01-R.9c8fa8adebd9.png");
  background-size: cover;
}

.slideRetrato2::after {
  content: "";
  display: block;
  height: 280px !important;
  width: 198px !important;
  background-image: url("../img/previa_layouts/L02-R.8d2df7ce2a8c.png");
  background-size: cover;
}

/* imagens dos slides - orientação paisagem */
.slidePaisagem0::after {
  height: 198px;
  width: 280px;
}

.slidePaisagem1:after {
  content: "";
  display: block;
  height: 198px !important;
  width: 280px !important;
  background-image: url("../img/previa_layouts/L01-P.2ba262b16ef7.png");
  background-size: cover;
}

.slidePaisagem2::after {
  content: "";
  display: block;
  height: 198px !important;
  width: 280px !important;
  background-image: url("../img/previa_layouts/L02-P.f31aca482f8a.png");
  background-size: cover;
}



/* Botoes Next e Previous */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 41%;
  /* margin-top: -22px; */
  padding: 10px;
  color: #c0c0c0;
  /* font-weight: bold; */
  font-size: 18x;
  transition: 0.6s ease;
  border-radius: 5px;
  user-select: none;
  text-decoration: none;
}

/* Posicionado o botao "next" a direita */
.prev {
  right: 6px;
}

.next {
  left: 6px;
}

/* on hover: adiciona fundo preto com transparência */
.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

/* marcadores */
#marcadores {
  margin-top: 10px;
}

.dot {
  cursor: pointer;
  height: 10px;
  width: 10px;
  margin: 0 1px;
  background-color: #989898;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.activeDot,
.dot:hover {
  background-color: #333333;
}

/* fading animation */
.fadeAppear {
  animation-name: fadeAppear;
  animation-duration: 1.5s;
}

@keyframes fadeAppear {
  from {
    opacity: 0.3;
  }
  to {
    opacity: 1;
  }
}

/* Fim caousel */

#aplicarBtn { /* botão para aplicar o layout */
  color: #333333;
  background-color: #bcbcbc !important;
  padding: 3px 10px;
  border-radius: 14px;
  cursor: pointer;
}


/* SEÇÃO DE TEXTO */

.SecaoTexto {
 border-top: solid 2px #AAA;
 padding: 0 5px;
}

.tituloSecParam {
  margin: 4px 0 2px;
  font-size: 12px;
  text-align: center;
}

.comentario-input-li{
  overflow: auto;
}

.titulo-input, .subtitulo-input, .comentario-input {
  float: right;
  width: 260px;
  border-radius: 4px;
  display: inline-block;
}

/*
.titulo, .subtitulo {
  height: 25px;
}


 
.subtitleInput {
  float: right;
  margin-bottom: 5px !important;
  width: 260px !important;
}
  

.obsInput {
  width: 260px;
  display: inline-block;
  position: relative;
  left: 16px;
}

.editTituloLegenda {
  clear: both;
}


.labelEditLegenda {
  width: 115px !important;
  height: fit-content;
}

.tituloLegendaTam, .textoLegendaTam {
  width: 40px;
  height: 19px;
}
*/

/* SEÇÃO DA LEGENDA */

.secaoLegenda{
  border-top: solid 2px #AAA;
  text-align: center;
  clear: both;
}

.secaoLegenda label {
  position: relative;
  right: 15px;
}

.confLegendaBt {
  width: 175px;
  margin: auto;
}

.confLegendaBt:hover {
  cursor: pointer !important;
}

.legenda-impressao {
  text-align: center !important;
}

/* SEÇÃO DE CONFIGURAÇÃO DA LEGENDA */

.headerSection {
  display: flex;
  border-bottom: solid 2px #aaa;
  align-items: center;
  height: 45px;
}


.headerSection i {
  font-size: 30px;
}

.secConfigLeg {
  background-color: #333333;
  color: white;
  position: absolute;
  right: 0;
  width: 250px;
  height: 100%;
  padding: 10px;
  display: none;
  z-index: 5;
  padding: 0;
}

.secTamanhoLeg {
  text-align: center;
  display: none;
  border-bottom: solid 2px #aaa;
}

/* Personalização da barra de tamanho */

.range-container {
  position: relative;
  width: 90%;
  margin: auto;
  margin-bottom: 10px;
}

#barraTamanho {
  -webkit-appearance: none; /* Remove estilo padrão do navegador */
  appearance: none;
  width: 100%;
  height: 8px;
  background: linear-gradient(to right, #aaa 50%, transparent 50%);
  border-radius: 25px; /* Borda abaulada */
  border: 2px solid #aaa;
  outline: none;
  transition: background 0.3s;
}

/* Estilo para navegadores Webkit (Chrome, Safari, Edge) */
#barraTamanho::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 14px;
  background-color: #aaa;
  border: 2px solid #aaa;
  cursor: pointer;
  border-radius: 4px;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
}

/* Estilo para navegadores Mozilla Firefox */
#barraTamanho::-moz-range-thumb {
  width: 25px;
  height: 14px;
  background-color: #aaa;
  border: 2px solid #aaa;
  cursor: pointer;
  border-radius: 4px;
}

/* Estilo dinâmico para alterar o fundo conforme o thumb desliza */
#barraTamanho::-webkit-slider-runnable-track {
  background: linear-gradient(to right, #aaa 0%, transparent 0%);
}

#barraTamanho:focus::-webkit-slider-runnable-track {
  background: linear-gradient(to right, #aaa 0%, transparent 0%);
}

#barraTamanho::-moz-range-track {
  background: linear-gradient(to right, #aaa 0%, transparent 0%);
}

/* Atualiza o background dinamicamente conforme o valor do range */
#barraTamanho::-moz-range-progress {
  background-color: #aaa;
}

/* Estilo do valor exibido dentro do thumb */
.range-value {
  position: absolute;
  top: 4px; /* Ajuste conforme a altura do thumb */
  left: 86px;
  background-color: #aaa;
  color: white;
  padding: 0 1px;
  width: 28px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: bolder;
  pointer-events: none; /* Impede que o valor interfira no clique */
  white-space: nowrap; /* Previne quebra de linha no valor */
}

/* -- Fim das edições da barra de tamanho -- */




.secTamanhoLeg p {
  margin: 5px 0 10px;
  font-size:11px;
  margin-bottom: 5px;
}

.secSelecLeg {
  padding: 5px;
}

.ulLegenda{
  list-style-type: none;
  padding: 5px 3px;
  height: fit-content;
}

.liLegenda {
  display: flex;
  margin-top: 5px;
  min-height: 30px;
}

.liLegenda i {
  font-size: 20px;
}

.liLegenda p {
  margin: 7px 0 4px;
  padding-bottom: 5px;
  cursor: grab;
  white-space: normal;
  overflow-wrap: break-word;
  word-wrap: break-word;
  width: -webkit-fill-available;
}

.arrastarLegImpres{
  display: flex;
  width: 100%;
  /* background-color: #aaa; */
  padding: 0;
  border-radius: 7px 7px 0 7px;
  /* align-items: center; */
}

.arrastarLegImpres .drag{
  background-color: #aaa;
  border-radius: 7px 0 0 7px;
  height: 46px;
  cursor: grab;
  width: 24px;
}

.arrastarLegImpres .drag::before{
  content: url("../img/drag-dots.fb80603b9118.svg");
  font-size: 24px;
  position: relative;
  top: 8px;
  left: -2px;
  pointer-events: none;
}

.arrastarLegImpres .drag:active{
  cursor: grabbing;
}

.fundoCinzaLegImpres {
  background-color: #aaa;
  border-radius: 0 7px 7px 0;
  padding: 0;
  margin: 0;
  width: 100%;
  position: relative;
}

.toggleVisibilityDiv {
  align-items: center;
}

.visibilityLayerIcon {
  font-size: 14px !important;
  margin: 5px 2px 0 0;
  color: black;
}

.LegNomeItem {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 5px;
  align-items: center;
  background-color: #ffffff;
  border: 1px solid #9b9b9b;
  border-radius: 7px;
  width: 100%;
  height: fit-content;
}

.LegNomeItem p {
  max-width: 265px;
  font-family: 'Myriad Variable Concept', sans-serif;
  font-size: 12px;
  color: #606060;
  cursor: grab;
}

.LegNomeItem p:active {
  cursor: grabbing;
}

/* .LegNomeLegenda {
  max-width: 185px; 
  overflow-wrap: break-word;
  white-space: normal; 
} */

/* .LegNomeItem {
  background-color:#f2f0f0; 
  width:100%; 
  color:#333;
  border-radius: 8px;
  position: relative;
  height: 100%;
}


.LegNomeItem::after{
  
}

.LegNomeItem p{
  margin: 0;
  padding: 2px 4px;
} */

/* #olhoLeg {
  position: absolute;
  right: 3px;
  top: 0;
  cursor: pointer;
  z-index: 5;
} */

/* .visibility-icon {
  position: absolute;
  right: 3px;
  top: 0;
  cursor: pointer;
  z-index: 5;
}

.bi-eye-slash-fill {
  opacity: 0.6;
} */

/* .drag {
  background-color: #aaa;
  color: #606060;
  border-radius: 4px 0 0 4px;
  cursor: grab;
  height: 35px;
  width: 24px;
  position: relative;
}

.drag i::before {
  content: url("../img/drag-dots.fb80603b9118.svg");
  position: relative;
  top: 2px;
  left: -3px;
  pointer-events: none;
}

.drag i::after {
  content: "OOO";
  color: red;
  position: absolute;
  left: 24px;
  top: 20px;
  background-color: #aaa;
  z-index: 0;
  font-size: 10px;
}

.drag:active {
  cursor: grabbing;
} */



/* SESSÃO EDIÇÃO */

.edit {
  background-color: #333333;
  color: white;
  position: absolute;
  right: 0;
  width: 220px;
  height: 100%;
  padding: 10px;
  display: none;
  z-index: 5;
}

.editTitle {
  font-size: 13px;
  font-weight: bold;
  height: 40px;
  width: 100%;
  margin: 18px 0 0 4px;
}

.divIconesItem {
  position: absolute;
  right: 1px;
  top: 0;
  z-index: 5;
}

.bi-lock-fill {
  font-size: 12px !important;
  position: relative;
  bottom: 2px;
  cursor: pointer;
}

#fecharItemEdicao {
  cursor: pointer;
  color: red;
}

.finishEditBtn, .CancelEditBtn {
  color: #333333;
  background-color: #bcbcbc !important;
  margin-bottom: 10px;
  padding: 3px 10px;
  border-radius: 14px;
  cursor: pointer;
}

.finishEditBtn {
  font-weight: bold;
}

.divEditBtn {
  text-align: center;
  position: absolute;
  bottom: 5px;
  left: 0;
  width: 100%;
}

/* Botões de edição */

.editBtnsParent {
  position: absolute;
  top: 0;
  width: 100%;
  display: none;
  justify-content: center;
}

.editBtns {
  /* width: 330px; */
  width: 380px;
  background-color: #f2f0f0;
  display: flex;
  justify-content: space-between;
  border-radius: 0  0 20px 20px;
  align-items: center;
}

.editBtns span {
  border:none;
  padding: 0 4px;
  font-size: 22px;
  margin: 1px 10px;
  border-radius: 8px;
}

.editBtns span:hover{
  background-color: #cecece;
  cursor: pointer;
}

/* esconde  checkbox dos parametros da impressao */

.ol-print-title span, .titulo span, .subtitulo span, .observacoes span{
  display: none;
}

/* Esconde o campo de título original. OBS: se o elemento for comentado no cód JS, ocorrem erros */
.ol-print-title{
  display: none;
}