body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  box-sizing: border-box;
  text-decoration: none;
  list-style: none;
  overflow-x: hidden;
  font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
  font-family: "Source Sans Pro", sans-serif;
  font-family: "Work Sans", sans-serif;
  overflow-x: hidden;
  font-family: "Open Sans", sans-serif;
  font-family: "Ubuntu", sans-serif;
  font-family: "Poppins", sans-serif;
  font-family: "Lato", sans-serif;
  font-family: "Nunito", sans-serif;
  font-family: "Raleway", sans-serif;
  font-family: "Montserrat", sans-serif;
}

.trash-icon {
  margin: 15px 0 0 5px;
  color: rgb(23, 23, 23);
}

.trash-icon:hover {
  color: red;
}
/*======================conatiner======================*/
.container {
  margin: 0 auto;
  min-height: 100vh;
  width: 100vw;
  display: flex;
}
/*======================left-card=====================*/

.left-card {
  flex: 1;
  min-width: 350px;
  margin: 0 auto;
  position: relative; /* Altere para 'relative' */
  height: 100vh;
  /* Deixe o conteúdo fixo com um sticky */
  position: sticky;
  overflow-y: auto;
  top: 0;
  /* border-right: 10px solid rgb(90, 123, 126); */
  background-color: #f6f6f6;
  background-color: white;
}

.left-card h3 {
  letter-spacing: 5px;
  margin: 1rem 0 0.5rem 0;
  font-weight: 100;
}
/* Estilização para o .edit */
.edit {
  position: sticky; /* Fica fixo ao rolar, mas dentro dos limites do .left-card */
  top: 0; /* Fixa no topo da tela ao rolar */
  z-index: 999; /* Alta prioridade visual para que elementos passem por baixo */
  display: flex;
  justify-content: space-between; /* Espaçar logo e controles */
  align-items: center;
  background-color: rgb(254, 254, 255);
  background-color: rgba(4, 56, 62, 0.604);
  background-color: rgb(90, 123, 126);
  padding: 10px 20px;
  width: 100%; /* Faz com que a .edit ocupe toda a largura da .left-card */
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
  box-sizing: border-box; /* Inclui padding na largura total */
  border-radius: 0 0 0px 0;
  transition: color 0.3s ease, transform 0.3s ease;
}

/* Estilização para a logo da empresa */
.company-logo {
  flex-shrink: 0; /* Impede que a logo encolha */
  flex: 1;
}

.company-logo img.logo {
  max-width: 5rem;
  height: 1.5rem;
  display: block;
}
.controls {
  display: flex; /* Usar flexbox para os ícones e o seletor de idiomas */
  align-items: center; /* Centralizar verticalmente */
  gap: 15px; /* Espaço entre os itens */
}

/* Controles de zoom */
.zoom-controls {
  display: flex;
  align-items: center; /* Centralizar verticalmente */
  gap: 10px; /* Espaçamento entre os ícones de zoom */
}

.zoom-controls i {
  font-size: 20px;
  cursor: pointer;
  padding: 5px;
  color: #333;
  transition: transform 0.2s ease;
}

.zoom-controls i:hover {
  transform: scale(1.1);
  color: #555;
}
/* Ícones de zoom e download */
.edit i {
  font-size: 20px;
  cursor: pointer;
  padding: 5px;
  transition: transform 0.2s ease;
}

.edit i:hover {
  color: orange;
}
.edit i:active {
  transform: scale(1.1);
}
/* Paleta de cores */

/* Ícone de Cores */
#color-icon {
  cursor: pointer;
  display: inline-block;
}

/* Card de Cores */
#color-card {
  display: none;
  /* Inicialmente escondido */
  background-color: rgb(255, 255, 255);
  border: 1px solid #dcdcdc8a;
  padding: 10px;
  border-radius: 8px;
  transition: all 0.3s ease;
  position: absolute;
  top: 52px;
  /* Ajuste conforme necessário */
  left: 50%;
  /* Move o card para a metade da largura da tela */
  transform: translateX(-50%);
  /* Move o card para a esquerda pela metade da sua largura */
  min-width: 200px;
  /* Ajuste conforme necessário */
}

/* Paleta de Cores */
.color-palette {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 5px;
}

/* Caixas de Cores */
.color-box {
  width: 23px;
  /* Ajuste conforme necessário */
  height: 23px;
  /* Ajuste conforme necessário */
  border-radius: 50%;
  /* Para círculos */
  transition: transform 0.2s ease;
}

.color-box:hover {
  transform: scale(1.2);
  /* Efeito de aumento ao passar o mouse */
}

/* Estilo para o seletor de idioma */
.language-selector select {
  width: 3.3rem;
  padding: 5px;
  font-size: 16px;
  background-color: #dcdcdc;
  background-color: #dcdcdc7a;
  color: rgb(0, 0, 0);
  color: white;
  border: none;
  border-radius: 0px;
  cursor: pointer;
}

.language-selector select:focus {
  outline: none;
}
/* Estilos para ícones */
.zoom-icon,
.download-icon,
.view-icon,
.ion-paintbucket,
.paintbucket {
  /* Adiciona a classe color-icon aqui */
  font-size: 20px; /* Tamanho padrão */
  transition: transform 0.5s ease; /* Transição suave */
  cursor: pointer; /* Mudar o cursor para indicar que é clicável */
  color: white; /* Cor padrão do ícone */
}

/* Efeito de clique (active) */
.zoom-icon:active,
.download-icon:active,
.view-icon:active,
.color-icon:active {
  /* Adiciona a classe color-icon aqui */
  transform: scale(1.5); /* Aumenta o tamanho do ícone ao clicar */
}

/* Efeito de hover */
.zoom-icon:hover,
.download-icon:hover,
.view-icon:hover,
.color-icon:hover {
  /* Adiciona a classe color-icon aqui */
  color: rgba(0, 0, 0, 0.846); /* Cor ao passar o mouse (pode ser ajustada) */
  color: orange; /* Cor final ao passar o mouse */
}

/*==================left-inner-card ======================*/

.left-inner-card {
  width: 100%;
  border-radius: 5px;
  margin: 0.5rem auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* background: hwb(0 100% 0%);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.148);
  box-shadow: 0 4px 8px -2px #60606026, 0 0 1px 0 #6060604f;
  border: 1px solid #e8e8e8;*/
  margin-bottom: 16px;
  margin-top: 1rem; /* Espaçamento para que o conteúdo abaixo não colida com o .edit */
  position: relative;
  z-index: 1; /* Garante que passe por baixo do .edit */
}
.left-inner-card img {
  width: 7rem; /* Largura da imagem */
  height: 7rem; /* Altura da imagem */
  border-radius: 50%; /* Torna a imagem redonda */
  border: rgba(26, 144, 240, 0.137) 4px solid;
  background-color: #181818df;

  object-fit: cover;
  box-shadow: 0 4px 8px -2px #60606026, 0 0 1px 0 #6060604f;

  margin: 2rem auto;
}
hr {
  width: 25%;
  height: 6px;
  border-radius: 5px;
  background-color: rgba(4, 56, 62, 0.604);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 3rem auto;
  border: none;
}
.hr-medio {
  width: 65%;
  height: 5px;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
}
.hr-medio4 {
  width: 65%;
  height: 5px;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
}

.hr-medio5 {
  width: 95%;
  height: 1px;
  background-color: #211f1f;
  display: flex;
  margin: 0.4rem;
  border: none;
}

.input-car form {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Divide em duas colunas com largura igual */
  grid-column-gap: 12px; /* Espaçamento horizontal */
  grid-row-gap: 5px; /* Espaçamento vertical 
  margin-bottom: 1rem;*/
}

.input-car.experiencia form {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Duas colunas com largura igual */
  margin-bottom: 1rem;
}

.input-car.experiencia form div:nth-child(5) {
  grid-column: span 2; /* Faz o textarea de responsabilidades ocupar duas colunas */
}

.input-car {
  width: 85%;
  min-height: 65vh;
  padding: 0rem 1rem;
  /* border: 1px solid beige;
  border: 1px solid rgb(90, 123, 126);
  border: 1px solid #e8e8e8;*/

  border-radius: 20px;
  border-radius: 15px;
  background-color: #fffefc;
  background-color: rgb(254, 254, 255);
  grid-gap: 1rem;

  /*box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);*/
}
.input-car label {
  margin: 10px 0 10px 0;
  color: #393939;
  font-weight: 500;
  letter-spacing: 1px;
}
input {
  box-sizing: border-box;
  padding: 5px;
  width: 100%;
  border-radius: 20px;
  border-radius: 0;
  /* border: 1px solid #ccc;
  border: 1px solid rgba(4, 56, 62, 0.604);*/
  align-items: center;
  display: flex;
  outline: none;

  /*  font-size: 20px;
 box-shadow: 0 4px 8px -2px #60606026, 0 0 1px 0 #6060604f;*/
  height: 2.5rem;
  background-color: gainsboro;
  background-color: #eee;
  border: none;
}
.bs-experiencia,
.bs-idiomas,
.bs-competencias,
.bs-formacao {
  display: flex;
  flex-direction: column;
  align-items: start;
  width: 85%;
}
.checkbox {
  height: 15px;
  width: 1.5rem;
  margin: 0px;
}

.checkbx {
  margin: 20px 0 5px 0;
}

button {
  width: 2rem;
  height: 28px;
  margin-top: 30px;
  margin-bottom: 0px;
  background: rgba(4, 56, 62, 0.604);

  border: none;
  color: white;
  border-radius: 5px;
  font-size: 20px;
}
button:hover {
  scale: 1.05;
}
button:active {
  background-color: white;
  color: #007bff;
  border: 1px solid #007bff;
}

.respon {
  min-height: 150px;
  width: 100%;
  font-size: 0.8rem;

  min-width: 5rem;
  border-radius: 12px;
  /* border: 1px solid #ccc;
  border: 1px solid #007bff2e;*/
  border: none;
  outline: none;
}
.perfil-resp {
  min-height: 110px;

  width: 100%;
  font-size: 0.8rem;
  min-width: 5rem;
  /*border-radius: 12px;
  
  border: 1px solid #ccc;
  border: 1px solid rgba(4, 56, 62, 0.604);*/
  outline: none;
  background-color: gainsboro;
  background-color: #eee;
  border-radius: 0;
}

input:focus,
textarea:focus,
select:focus {
  background-color: rgb(180, 197, 220);
  color: white;
}
.left-card::-webkit-scrollbar {
  width: 10px; /* Largura da barra de rolagem */
}

.left-card::-webkit-scrollbar-track {
  background-color: #f1f1f1; /* Cor do fundo da barra de rolagem */
}

.left-card::-webkit-scrollbar-thumb {
  background-color: #888; /* Cor do botão de rolagem */
  border-radius: 5px; /* Borda arredondada do botão de rolagem */
}

.left-card::-webkit-scrollbar-thumb:hover {
  background-color: #555; /* Cor do botão de rolagem ao passar o mouse */
}
/* Estilizando o contêiner */

/* Estilizando os rótulos */
label {
  display: block; /* Faz com que os rótulos ocupem a largura total do contêiner */
  margin-bottom: 5px; /* Adiciona espaço entre os rótulos e os dropdowns */
}

/* Estilizando os dropdowns */
select {
  width: 12.2rem; /* Define a largura dos dropdowns */
  width: 9.2rem; /* Define a largura dos dropdowns 
  border: 1px solid #ccc; 
  border: 1px solid rgba(4, 56, 62, 0.604);
  border-radius: 20px; */

  color: #333; /* Define a cor do texto */
  /*box-shadow: 0 4px 8px -2px #60606026, 0 0 1px 0 #6060604f;*/
  background-color: gainsboro;
  background-color: #eee;
  border: none;
  height: 1.6rem;
  color: #595959;
}

/* Estilizando as opções dos dropdowns */
select option {
  padding: 5px; /* Adiciona espaço interno nas opções */
}

/* Estilizando as opções selecionadas dos dropdowns */
select option:checked {
  background-color: #007bff; /* Cor de fundo quando a opção está selecionada */
  color: #fff; /* Cor do texto quando a opção está selecionada */
}

/* =============.navigation-links ============*/

.navigation-links {
  display: flex;
  justify-content: end;
  gap: 2rem;
  width: 85%; /* Faz a div ocupar todo o espaço do card */
  padding: 10px 0 0 0;
}

.nav-link {
  text-decoration: none; /* Remove o sublinhado */

  color: #ffffff;
  padding: 5px 25px;
  border-radius: 20px;
  background-color: #17a2b8; /* Cor de fundo padrão */
  transition: background 0.3s ease;
  font-size: 100;
}

.next-btn {
  background-color: #ff514e;
}

.nav-link:hover {
  background-color: #138496; /* Cor de fundo ao passar o mouse */
}

#prev5 {
  background-color: #ffc107; /* Cor específica para "Anterior" */
}

#finishBtn {
  background-color: #28a745; /* Cor específica para "Finalizar" */
}

#finishBtn:hover,
#prev5:hover {
  background-color: #218838; /* Alteração ao passar o mouse */
}

/*======================moldal==================== */

@media print {
  .page {
    display: block;
    page-break-before: always;
  }
}

/* Estilos para o Modal */
.modal {
  display: none; /* Oculto por padrão */
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7); /* Fundo semitransparente */
}

.modal-content {
  position: relative;
  background-color: #fff;
  margin: 15% auto;
  padding: 10px;
  border-radius: 8px;
  width: 45%;
  display: flex;
}

.modal-left {
  width: 30%;
  padding-right: 10px;
}

.modal-right {
  width: 70%;
  padding-left: 10px;
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.avatar {
  width: 100%;
  border-radius: 0px;
  height: 100%;
  object-fit: contain;
}

h2 {
  margin-top: 0;
}

.modal-buttons {
  margin-top: 20px;
  display: flex;
  gap: 10px;
}

.btn-modal {
  width: 50%;
  height: 2rem;
  border: none;
  cursor: pointer;
  border-radius: 3px;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 2px;
  box-shadow: 0 4px 8px -2px #60606026, 0 0 1px 0 #6060604f;
}

.btn-modal.upgrade {
  background-color: #4caf50;
  background-color: #ebebeb;
  color: white;
  color: black;
}

.btn-modal.download {
  background-color: #007bff;
  background-color: rgb(90, 123, 126);
  color: white;
}

.modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 10px;
  cursor: pointer;
}

/* tostify, spiner */
.modal-right h3 {
  margin: 5px 0 0 0;
  letter-spacing: 2px;
  font-size: 16px;
  font-weight: 700;
  background-color: light dark(rgba(239, 239, 239, 0.3), rgba(59, 59, 59, 0.3));
}

.modal-right p {
  margin: 20px 0 15px 0;
  text-align: justify;
  font-size: 13px;
}

.idiomas form {
  display: grid;
  grid-template-columns: 1fr !important;
}

/*===================================== modal icon ====================*/
.free.gota-de-agua {
  display: flex;
  flex-direction: column; /* Organiza o texto em coluna */
  align-items: start; /* Alinha o conteúdo no centro */
  cursor: pointer;
  color: #4caf50; /* Cor do texto */
  font-size: 16px;
  font-weight: bold; /* Deixa o texto mais destacado */
  transition: all 0.3s ease;
}

.free.gota-de-agua:hover {
  color: #388e3c; /* Cor do texto ao passar o mouse */
}

.free span {
  font-size: 18px; /* Ajuste do tamanho do texto */
  text-align: start;
}
.watermark-overlay {
  background-image: url("../polarcv.png");
  background-size: 150px 500px;
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
  top: 0;

  width: 100%;
  height: 100%;
  z-index: 10;
  pointer-events: none;
  display: none; /* Mantém invisível até o download */
}
#cv-container {
  position: relative;
}
/*=========================== QUILL EDITORE==================*/
.ql-snow.ql-toolbar button,
.ql-snow .ql-toolbar button {
  margin-top: 0px;
}

/*==============centraliza cv quando abro===============*/
@media (min-width: 1024px) {
  .centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 90%;
    max-height: 98%;
  }
}

/* ------------icone /card do cv---------------*/
.custom-card {
  width: 200px;
  padding: 5px;
  background-color: #f7f7f7;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  display: grid; /* Usando grid para organizar os ícones */
  grid-template-columns: repeat(3, 1fr); /* 3 colunas com tamanho flexível */
  gap: 10px; /* Espaçamento entre os ícones */
  align-items: center; /* Centraliza os itens verticalmente dentro de cada célula */
  justify-items: center; /* Centraliza os itens horizontalmente */
  position: relative;
  margin: 1rem auto;
}

.custom-download-icon,
.custom-back-icon {
  font-size: 24px;
  cursor: pointer;
  color: #007bff;
}

.custom-back-icon {
  position: absolute;
  top: 8px;
  right: 8px;
  color: #ff0000; /* Cor para o ícone de voltar */
}

.custom-zoom-controls {
  display: flex;
  gap: 8px;
}

.custom-zoom-icon {
  font-size: 20px;
  cursor: pointer;
  color: #333;
}

.ql-toolbar.ql-snow {
  border-radius: 0.5rem 0.5rem 0 0;
  align-items: center;
  display: flex;
  justify-content: center;
}

#detalhes_servico {
  border-radius: 0 0 0.5rem 0.5rem;
}
.trash-icon-habilidade {
  color: rgba(0, 0, 0, 0.548) !important;
  align-items: end;
  margin-left: 1rem;
}

@media (max-width: 768px) {
  .modal-content {
    position: relative;
    background-color: #fff;
    margin: 25% auto;
    width: 70%;
  }
  .modal-right {
    width: 100%;
  }
  .modal-left {
    display: none;
  }
}

@media (max-width: 480px) {
  .modal-content {
    position: relative;
    background-color: #fff;
    margin: 35% auto;
    width: 70%;
  }
  .modal-right {
    width: 100%;
  }
  .modal-left {
    display: none;
  }
}
/* =====================Estilos padrão para responsividade===================== */
.rigth-card {
  display: none; /* Inicialmente oculto */
}
/* Exibição padrão para telas maiores */
@media (min-width: 1025px) {
  .rigth-card {
    display: block !important;
  }
}
/* Exibir o botão de versão grátis para telas menores que 1025px */
#freeVersionMobile {
  display: none;
}

/* Exibir o botão de versão grátis para telas maiores ou iguais a 1025px */
#freeVersionDesktop {
  display: block;
}

/* Para telas menores que 1025px, esconder o botão 'Baixe aqui, versão grátis' */
@media (max-width: 1024px) {
  #freeVersionDesktop {
    display: none;
  }

  #freeVersionMobile {
    display: block;
  }
}
.logo-link {
  display: inline-block; /* Faz o link se comportar como um contêiner ajustado ao conteúdo */
}
.company-logo {
  max-width: 50px; /* Defina um tamanho máximo para o contêiner da logo */
}