.site-header {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5px 0;
}

.header-elements {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    white-space: normal !important;
    font-size: small;
}

/* SWITCH TEXTO/WORD */
.flipswitch {
  position: relative;
  width: 100px;
  margin-top: 8px;
}
.flipswitch input[type=checkbox] {
  display: none;
}

.flipswitch-label {
  display: block;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid #999999;
  border-radius: 8px;
}

.flipswitch-inner {
  width: 200%;
  margin-left: -100%;
  transition: margin 0.3s ease-in 0s;
}

.flipswitch-inner:before, .flipswitch-inner:after {
  float: left;
  width: 50%;
  height: 24px;
  padding: 0;
  line-height: 24px;
  font-size: 18px;
  color: white;
  font-family: Trebuchet, Arial, sans-serif;
  font-weight: bold;
  box-sizing: border-box;
}

.flipswitch-inner:before {
  content: "TEXTO";
  padding-left: 7px;
  background-color: #EBEBEB;
  color: #888888;
}

.flipswitch-inner:after {
  content: "WORD";
  background-color: #256799;
  color: #FFFFFF;
  text-align: right;
  padding-right: 6px;
}

.flipswitch-switch {
  width: 31px;
  margin: -3.5px;
  background: #FFFFFF;
  border: 1px solid #999999;
  border-radius: 8px;
  position: absolute;
  top: 0;
  bottom: 0;
  transition: all 0.3s ease-in 0s;
  height: 32px;
}

.flipswitch-cb:checked + .flipswitch-label .flipswitch-inner {
  margin-left: 0;
}

.flipswitch-cb:checked + .flipswitch-label .flipswitch-switch {
  right: 0;
}


/* CAIXAS N */
.caixas_t_w {
width: 200px;
user-select: none;
position: relative;
transform-origin: top center;
margin-left: 20px;
margin-bottom: 5px;
}


/* Estiliza o placeholder */
.caixas_t_w input[type="number"]::placeholder {
  font-size: 60%; /* Tamanho da fonte do placeholder */
  opacity: 0.5; /* Ajuste o valor para o nível de desvanecimento desejado */
}


/* Centraliza o texto digitado */
.caixas_t_w input[type="number"] {
  text-align: center !important; /* !important garante que essa propriedade será aplicada */
}

/* Remove a barra de rotação dos campos de número */
.caixas_t_w input[type="number"]::-webkit-inner-spin-button,
.caixas_t_w input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.caixas_t_w .caixaTexto {
  width: 20px; /* Mantendo o tamanho original */
  border: 1px solid #ccc; /* Adicionando uma borda sólida */
  border-radius: 3px; /* Adicionando bordas arredondadas */
  text-align: center; /* Centralizando o texto */
  padding: 1px; /* Adicionando preenchimento interno */
  height: 20px;
  padding-top: 0;
  margin-left: 3px;
  padding-bottom: 3px;
}

.caixaTexto:focus {
  outline: none; /* Remover a borda de foco */
  border: 1px solid #ccc; /* Adicionar uma borda cinza */
}

#openCaixas:focus {
  outline: none; /* Remover a borda de foco */
}

#openCaixas {
  border: none;
  cursor: pointer;
  width: 57px;
  border: none;
  background: none;
  display: none;
}


#openCaixas img {
  width: 100%;
  height: auto;
  transition: transform 0.2s ease; /* Adicionando transição para suavizar o efeito de hover */
}

#openCaixas img:hover {

  transform: scale(1.1); /* Aumentando ligeiramente o tamanho do ícone quando em hover */
}

/* animação surgindo do botão*/
@keyframes expandFromButton {
  from {
      opacity: 0;
      transform: scale(0);
  }
  to {
      opacity: 1;
      transform: scale(1);
  }
}

@keyframes contractToButton {
  from {
      opacity: 1;
      transform: scale(1);
  }
  to {
      opacity: 0;
      transform: scale(0);
  }
}


/* CAIXAS DE SUBSTITUICAO DE TEXTO */
#substituicao {
  border: none;
  background-color: transparent;
  cursor: pointer;
outline: none !important; /* Remove a borda preta ao clicar */
}

#substituicao img {
  height: auto;
  transition: transform 0.2s ease; /* Adicionando transição para suavizar o efeito de hover */
}
#substituicao img:hover {
  filter: brightness(65%); /* Reduzindo o brilho do ícone em hover para alterar a cor */
  transform: scale(1.3); /* Aumentando ligeiramente o tamanho do ícone quando em hover */
}




.tox.tox-silver-sink.tox-tinymce-aux > div:first-child:not([class]) {
  left: auto !important;
top: auto!important;
right: 0 !important;
}

.tox.tox-silver-sink.tox-tinymce-aux{
  position: fixed !important;
  top: 5px !important;
  right: 180px !important;
}


.tox-menu{
width: 290px !important;
}

/* ANIMAÇÃO BUSCA A SUBSTITUIÇÃO*/
/* Adiciona animação para todas as janelas de diálogo do TinyMCE */
@keyframes slideDown {
  from {
      transform: translateY(-100%);
      opacity: 0;
  }
  to {
      transform: translateY(0);
      opacity: 1;
  }
}

/* Aplica a animação para todas as janelas do TinyMCE */
.tox-dialog {
  animation: slideDown 0.5s ease-in-out;
}

/*RESOLVER BUG DE SETAS NO FIREFOX NAS CAIXAS N*/
/* Para todos os navegadores */
input[type=number] {
  -moz-appearance: textfield;
}

/* Para remover as setas no Chrome, Safari, Edge, Opera */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* WINDOW OPEN */
#openWindowBtn {
  border: none;
  background-color: transparent;
  cursor: pointer;
  position: relative;
  outline: none; /* Remover a borda de foco */
}

#openWindowBtn img{
height: 49px;
padding-top: 3px;
}


#openWindowBtn img:hover {
  filter: brightness(85%); /* Reduzindo o brilho do ícone em hover para alterar a cor */
  transform: scale(1.1); /* Aumentando ligeiramente o tamanho do ícone quando em hover */
}


/* Estrela */
.img-button {
  border: none;
  background-color: transparent;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  outline: none !important;
}



.img-button img:hover {
  filter: brightness(85%);
  transform: scale(1.1);
}

.img-button.animate img {
  transform: scale(1.2) rotate(360deg);
  transition: transform 0.5s ease, opacity 0.5s ease, filter 0.5s ease;
}





/* Documentacao */
.icone_modal {
  border: none;


  font-size: 2.4em; /* Ajuste o tamanho conforme necessário */
}

.icone_modal:focus {
  outline: none; /* Remover a borda de foco */
}

.icone_modal:hover {
  transform: scale(1.1); /* Aumentando ligeiramente o tamanho do ícone quando em hover */
}

.icone_modal i {
  font-size: 1em; /* Ajuste o tamanho conforme necessário */
}



.icone_modal {

  z-index: 0;
}