body {
  margin: 0;
  padding: 20px;
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #eff7f3 !important;
 padding-top: 0px;
}

.site-container {
  display: flex;
  flex: 1;
  flex-direction: row;
}

.site-left {
  background-color: #f4f4f4;
  padding: 1rem;
  box-sizing: border-box;
  border-radius: 10px;
  padding-left: 0;
  border-right: 1px solid #e0e0e0; /* Mudança na borda para algo mais discreto */
  width:356px;
  margin-top: 40px;
}


.site-content {
  flex: 1;
  padding: 1rem;
  padding-top: 0;
  box-sizing: border-box;
}

/* Tiny */
.tox-promotion {
  display: none;
}

.tox .tox-edit-area::before {
  border: none !important;
}



/* Defina a animação */
@keyframes slideInFromLeft {
  0% {
      transform: translateX(-100%);
      opacity: 0;
  }
  100% {
      transform: translateX(0);
      opacity: 1;
  }
}

/* Aplique a animação aos elementos */
.animate-slide-in {
  animation: slideInFromLeft 0.5s ease-out;
}

/* RASCUNHO */
.textareaRascunho{
  right: 20px;
  bottom: 0 !important;
}

#myRascunho {
  font-size: 11px; /* Defina o tamanho da fonte desejado aqui */
  width: 100%;
}

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

.resizerRascunho {
  position: absolute;
  top: 0;
  right: 0;
  width: 20px;
  height: 20px;
  background-color: transparent;
  cursor: ns-resize; /* Cursor de redimensionamento vertical */
  display: none;
  border: 2px solid #ffffff; /* Borda para dar destaque */
  border-radius: 5px; /* Bordas arredondadas */
  background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2040%2040%22%3E%3Cpath%20d%3D%22M10%2020L20%2010L30%2020%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%224%22%20fill%3D%22none%22%2F%3E%3C%2Fsvg%3E'); /* Adiciona uma seta para indicar a direção */
  background-size: 16px;
  background-position: center;
  background-repeat: no-repeat;
  transition: background-color 0.3s ease, transform 0.2s ease;
  background-color: #44766b
}

.resizerRascunho:hover {
  background-color: #44766b;
  transform: scale(1.2); /* Aumenta o tamanho levemente para indicar interatividade */
}



.toggle-button {
  width: 100%;
  background-color: #e0a606;
  color: white;
  border: none;
  cursor: pointer;
  text-align: center;
  user-select: none;
  padding: 0;
}

.toggle-button:focus {
  outline: none; /* Remover a borda de foco */
}

.copy-button {
  width: 20px;
  height: 20px;
  background-color: transparent;
  color: white;
  border: none;
  cursor: pointer;
  font-size: 12px;
  display: none;
  margin-right: 5px;
  border-radius: 50%;
  float: right;
margin-left: 5px;
}

.copy-message {
  color: green;
  background-color: white;
  padding: 2px 5px;
  border-radius: 3px;
  display: none;
  font-size: 14px; /* Tamanho da fonte */
  position: absolute;
  bottom: 20px;
}

.textareaRascunho {
  position: fixed;
  bottom: 3px;
  background-color: #f9f9f9;
  border: 1px solid #ccc;
  border-radius: 5px;
  overflow: hidden;
  display: flex;
  left: 39px;
  flex-direction: column;
  align-items: flex-end;
}

textarea {
  width: 250px;
  padding: 5px 30px 5px 5px; /* Padding direito maior para acomodar o botão de copiar */
  border: none;
  resize: none !important;
}

.clearRascunho {
  cursor: pointer;
  position: relative;
  margin-left: 2px;
  font-size: 8px;
  width: fit-content;
margin-top: 5px;
}






.tox{
  z-index: 1;
}



/* ADICIONAR DO WORD */
.custom-file-upload {
  display: inline-block;
  padding: 2px 3px;
  cursor: pointer;
  background-color: #e0e0e0;
  color: #333;
  border: 1px solid #bbb;
  border-radius: 4px;
  font-size: 12px;
  text-align: center;
  position: relative;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
  margin-top: 5px;
  margin-left: 10px;
}

.custom-file-upload:hover {
  background-color: #d0d0d0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.beta-tag {
  font-size: 10px;
  color: #ff5555;
  position: absolute;
  top: 17px; /* Posiciona logo abaixo do botão */
  left: auto; /* Permite que a posição seja definida pela borda direita */
  right: 0; /* Ajusta a posição da tag beta para ficar alinhada à direita */
  border-radius: 4px;
  padding: 1px 2px;
  margin-top: 2px; /* Espaçamento entre o botão e a tag beta */
  background-color: #ecd9a3;
}


.tox-collection-13{
  width: 60px !important;
}


.tox .tox-menu {
  width: auto !important;
}


.tox-tbtn__select-label {
  cursor: pointer !important;
}

/* ANIMAÇÃO BOTÃO ATUALIZAR VARIAVEIS*/
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.spin-animation {
  animation: spin 2s linear;
}


/* BOTÃO DE ESCOLHA DO EDITOR*/
.button-container {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  height: auto;
}


.button-container button {
  background-color: #d3d3d3; /* Light gray background */
  border: none; /* Remove borders */
  color: white; /* White text */
  padding: 2px 5px; /* Some padding */
  text-align: center; /* Center the text */
  text-decoration: none; /* Remove underline */
  display: inline-block; /* Get the elements on one line */
  font-size: 12px; /* Font size */
  margin: 4px 2px; /* Some margin */
  transition-duration: 0.4s; /* Make it smooth */
  cursor: pointer; /* Pointer/hand icon */
  border-radius: 8px; /* Rounded corners */
  outline: none; /* Remove the default focus outline */
}

.button-container button.active {
background: linear-gradient(135deg, #44766b, #6a9c91);
  color: white; /* White text */
}

.button-container button:hover {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); /* Add shadow on hover */
}

.button-container button:focus {
  outline: none; /* Remove the focus outline */
}




.cke_notification_warning {
  display: none !important;
}





.tox .tox-menu.tox-collection.tox-collection--list {
  padding: 0 4px;
  width: auto !important;
}

.tox .tox-menu.tox-collection.tox-collection--toolbar {
  padding: 8px;
  width: auto !important;
}


.tox .tox-tbtn--bespoke {
  width: 90px !important;
}



.tox-tbtn svg {
  transform: scale(0.9) !important; /* Ajusta o tamanho dos ícones */
}


.tox .tox-tbtn {
margin-top: 0px !important;
margin-bottom: 0 !important;
}

.tox .tox-toolbar-overlord .tox-toolbar:not(.tox-toolbar--scrolling):first-child, .tox .tox-toolbar-overlord .tox-toolbar__primary {
  display: contents !important;
  margin-left: 0 !important;
}


/* ÍCONES ABAIXO DO EDITOR*/
#editorButtons {
  display: flex;
  gap: 10px;
  padding: 10px;
}

#editorButtons button {
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  outline: none; /* Remove a borda de foco */
  z-index: 3;
}

#editorButtons img {
  width: 20px; /* Define o tamanho menor dos ícones */
  height: 20px;
  z-index: 3;
}

#editorButtons button:hover img {
  opacity: 0.8;
}





/* hover botões rodape (jquere) */
#editorButtons {
  display: flex;
  gap: 10px;
}

.ui-tooltip {
  background: #383838 !important;
  color: #fff !important;
  border-radius: 10px !important;
  font-size: 12px !important;
  border: none !important;  /* Adicione esta linha para remover qualquer borda */
}


.tooltip-beta {
  color: red;
  font-weight: bold;
}

.video-container {
  width: 100%;
  height: 313px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: black; /* Fundo preto para quando o vídeo não preencher completamente */
}

.video-js {
  width: 100%;
  max-height: 100%; /* Garante que o vídeo não ultrapasse a altura do contêiner */
  border-radius: 0;
}

.video-js .vjs-big-play-button {
  top: 45% !important;
  left: 45% !important;
}


/* Animação de pular lenta */
@keyframes slowJumpEffect {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-15px); /* Sobe um pouco */
  }
  100% {
    transform: translateY(0); /* Volta à posição original */
  }
}








.tooltip-message {
  font-size: 13px;
  color: #333; /* Texto em tom escuro para melhor legibilidade */
  background: #edd4be;
  border: 1px solid #ddd; /* Borda discreta */
  padding: 8px 12px; /* Espaçamento interno confortável */
  border-radius: 6px; /* Cantos suavemente arredondados */
  position: absolute;
  margin-top: 4px; /* Distância mais generosa para melhor separação */
  white-space: nowrap;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Adiciona profundidade */
  z-index: 1000;
  font-family: Arial, sans-serif; /* Fonte simples e legível */
}



/* Estilos para a caixa suspensa */
/* Estilos para a caixa suspensa */
.caixa-suspensa {
  display: none; /* Inicialmente escondida */
  position: absolute; /* Absolute para posicionamento livre */
  z-index: 9999; /* Garantir que fique acima de outros elementos */
  background-color: rgba(0, 0, 0, 0.5);
  width: 300px;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.caixa-suspensa-conteudo {
  background-color: white;
  padding: 20px;
  border-radius: 8px;
}


.btn-primary {
  color: #fff;
  background-color: #4caf50 !important;
  border-color: #4caf50 !important;
}


.logo_site {
  vertical-align: middle;
  border-style: none;
  width: 150px;
  border-radius: 15%;
  position: relative;
}


.botao-estilo {
  padding: 6px 20px;
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
  border: none;
  background: linear-gradient(145deg, #4e8479, #3b6057);
  color: white;
  border-radius: 8px;
  transition: all 0.3s ease;
  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.1), -4px -4px 8px rgba(255, 255, 255, 0.1);
}

.botao-estilo:hover {
  background: linear-gradient(145deg, #3b6057, #4e8479);
  box-shadow: 6px 6px 12px rgba(0, 0, 0, 0.15), -6px -6px 12px rgba(255, 255, 255, 0.15);
}


.botao-estilo:focus {
  outline: none;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.4), 0 0 10px rgba(76, 86, 208, 0.7);
}

.botao-repeticoes {
  background: linear-gradient(145deg, #ff6f61, #d45d52); /* Cor diferente para quando alterna */
}

.botao-repeticoes:hover {
  background: linear-gradient(145deg, #d45d52, #ff6f61);
}


/* Estilo para o botão ativo */
.active {
  background-color: #4CAF50;
  color: white;
  font-weight: bold;
}



.plyr__control--overlaid{
  background: linear-gradient(135deg, #44766b, #6a9c91) !important;
}

.plyr--full-ui input[type=range] {
    color: #44766b !important;
    color: var(--plyr-range-fill-background,var(--plyr-color-main,var(--plyr-color-main,#44766b))) !important;
}


.plyr--video .plyr__control:focus-visible, .plyr--video .plyr__control:hover, .plyr--video .plyr__control[aria-expanded=true] {
    background: #508277 !important;

}