/* Estilo dos botões principais e de template */

.btn-toggle, .btn-t1, .btn-t2, .btn-t3, .btn-t4, .btn-colors, .btn-save-version, .btn-show-versions, .btn-publish-production, .btn-show-production, .btn-save-template, .btn-save-settings, .btn-sair, .btn-user, .btn-paletas {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  width: 110px;
  height: 35px;
  position: fixed;
  right: 2.5rem;
  padding: 0.75rem;
  border-radius: 0.5rem;
  color: white;
  cursor: pointer;
  transition: transform 0.3s, opacity 0.3s;
  z-index: 51;
}

.btn-t1:hover, .btn-t2:hover, .btn-t3:hover, .btn-t4:hover, .btn-toggle:hover, .btn-colors:hover, .btn-paletas:hover, .btn-user:hover {
  background-color: #0056b3;
  /* Cor azul ao passar o mouse */
}

.btn-save-version:hover, .btn-show-versions:hover, .btn-publish-production:hover, .btn-show-production:hover .btn-sair:hover {
  background-color: #84888d;
  /* Cor azul ao passar o mouse */
}

/* Estilo quando os botões são expandidos */

.expanded .btn-t1,
.expanded .btn-t2,
.expanded .btn-t3,
.expanded .btn-t4,
.expanded .btn-colors,
.expanded .btn-paletas,
.expanded .btn-save-version,
.expanded .btn-show-versions,
.expanded .btn-save-template,
.expanded .btn-save-settings,
.expanded .btn-publish-production,
.expanded .btn-show-production,
.expanded .btn-sair, 
.expanded .btn-user {
  opacity: 1;
  transform: translateX(0);
}

/* BOTOES */

.btn-show-versions {
  top: 2.5rem;
  background-color: #535d60;
  /* Cor amarela */
  opacity: 0;
  /* Começa invisível */
  transform: translateX(100%);
  /* Fora da tela para a direita */
}

.btn-save-version {
  top: 5.0rem;
  background-color: #3f4749;
  /* Cor amarela */
  opacity: 0;
  /* Começa invisível */
  transform: translateX(100%);
  /* Fora da tela para a direita */
}

.btn-publish-production {
  top: 7.5rem;
  width: 130px;
  height:45px;
  font-size: 0.8rem;
  font-weight: bold;
  background-color: #e31111;
  /* Cor amarela */
  opacity: 0;
  /* Começa invisível */
  transform: translateX(100%);
  /* Fora da tela para a direita */
}

.btn-show-production {
  top: 10.8rem;
  width: 130px;
  height:45px;
  font-size: 0.8rem;
  font-weight: bold;
  background-color: #11e346;
  /* Cor amarela */
  opacity: 0;
  /* Começa invisível */
  transform: translateX(100%);
  /* Fora da tela para a direita */
}

.btn-save-settings {
  position: fixed;
  bottom: 17.5rem;
  /* Ajuste a posição conforme necessário */
  background-color: #848686;
  /* Cor verde */
  color: white;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.3s, opacity 0.3s;
  opacity: 0;
  transform: translateX(100%);
}

.btn-save-template {
  position: fixed;
  bottom: 15.0rem;
  /* Ajuste a posição conforme necessário */
  background-color: #089d75;
  /* Cor verde */
  color: white;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.3s, opacity 0.3s;
  opacity: 0;
  transform: translateX(100%);
}

.btn-t4 {
  bottom: 12.5rem;
  background-color: #44b698;
  /* Cor rosa */
  opacity: 0;
  /* Começa invisível */
  transform: translateX(100%);
  /* Fora da tela para a direita */
}

.btn-t3 {
  bottom: 10rem;
  background-color: #55b89e;
  /* Cor rosa */
  opacity: 0;
  /* Começa invisível */
  transform: translateX(100%);
  /* Fora da tela para a direita */
}

.btn-t2 {
  bottom: 7.5rem;
  background-color: #5fb9a1;
  /* Cor roxa */
  opacity: 0;
  /* Começa invisível */
  transform: translateX(100%);
  /* Fora da tela para a direita */
}

.btn-t1 {
  bottom: 5rem;
  background-color: #70b3a1;
  /* Cor laranja */
  opacity: 0;
  /* Começa invisível */
  transform: translateX(100%);
  /* Fora da tela para a direita */
}

.btn-colors {
  bottom: 1.5rem;
  right: 6.5rem;
  background-color: #e900fe;
  opacity: 0;
  transform: translateX(100%);
  width: 40px;
  height:40px;
  border-radius: 100%;
}

.btn-paletas {
  bottom: 1.5rem;
  right: 8.5rem;
  background-color: #ff7f0f;
  opacity: 0;
  transform: translateX(100%);
  width: 40px;
  height:40px;
  border-radius: 100%;
}

.btn-toggle {
  bottom: 1.5rem;
  right: 1.5rem;
  background-color: #007BFF;
  z-index: 10;
  width: 50px;
  height: 50px;
  border-radius: 100%;
  
}

.btn-sair {
  top: 0.5rem;
  right: 0.5rem;
  background-color: #040404;
  z-index: 60;
  width: 30px;
  height: 30px;
  border-radius: 100%;
  opacity: 0;
}

.btn-user {
  top: 0.5rem;
  right: 2.5rem;
  background-color: #007BFF;
  z-index: 10;
  width: auto;
  height: auto;
  border-radius: 0.5rem;
  padding: 0.5rem;
  opacity: 0;
}