.code {
  border-radius: 10px 10px 10px 10px;
}
.img_pr7seg {
  width: 700px;
  height: fit-content;
  margin-left: 20px;
  border-radius: 10px;
}
.tabs-botoes {
  display: flex; /* Coloca os botões lado a lado */
  border-bottom: 1px solid #ccc;
  border-bottom: 0;
  margin-left: 20px;
}

pre code.hljs {
  margin-top: -22px;
}

/* Estilo dos Botões */
.tab-btn {
  margin-right: 10px;
  padding-top: 0px;
  margin-bottom: 0;
  font-size: 12px;
  align-items: center;
  justify-content: center;
  display: flex;
  background-color: #f1f1f1;
  border: 1px;
  width: fit-content;
  height: 45px;
  outline-width: 1px;
  cursor: pointer;
  transition: 0.3s;
  font-size: 17px;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  margin-right: 2px;
}

.tab-btn:focus,
.tab-btn:active {
  border: 1px solid #ccc;
  outline: none !important;
}

.svg-logo {
  width: 30px;
  height: 30px;
  margin-right: 8px;
}

/* Estilo do Botão ao passar o mouse */
.tab-btn:hover {
  background-color: #ddd;
}

/* Estilo do Botão Ativo (selecionado) */
.tab-btn.active {
  background-color: #fff;
  border: 1px solid #ff9c00;
  border-bottom: 1px solid white; /* Cobre a linha de baixo para dar o efeito de aba */
}

/* Estilo do Conteúdo da Div */
.tab-conteudo {
  margin-top: 0;
  padding: 0px 20px 0px 20px;
  border: 0px solid #bbbbbb;
  border-top: none;
  border-radius: 0 8px 8px 8px;
  /* Por padrão, o display das divs de conteúdo não ativo é 'none' (escondido) */
  display: none;
}

/* Garante que o conteúdo ativo tenha o display correto */
.tab-conteudo h2 {
  color: #007bff;
  margin-top: 0;
}

p {
  font-size: 16px;
}

.img-trimpot {
  margin-top: 0;
  width: fit-content;
  height: 240px;
}

.code-box {
  align-items: center;
}

.hljs {
  color: #0000ff;
  background: #ffffff;
  height: 400px;
  width: calc(100%-350px);
  border: 1px solid #ff9c00 !important;
  box-shadow: #000000;
  padding-left: 0;
  border-top: 0px !important;
  font-size: 14px;
}

pre {
  width: calc(100%-350px);
}

.hljs-ln-code {
  padding-left: 5px !important;
}

.hljs-ln-numbers {
  text-align: center;
  font-size: 12px;
  color: #000000;
  margin: 0;
  border-right: 1px solid #000000;
}

/* Adicione este CSS em um arquivo ou na sua tag <style> */
.hljs-copy-container {
  margin-top: 20px;
  right: 8px !important;
}

.hljs-copy-button:hover {
  cursor: pointer;
}

.hljs-comment {
  color: #008000;
}
.hljs-tag {
  color: #444a;
}

.hljs-tag .hljs-name,
.hljs-tag .hljs-attr {
  color: #444;
}

.hljs-punctuation,
.hljs-function,
.hljs-keyword,
.hljs-attribute,
.hljs-selector-tag,
.hljs-doctag,
.hljs-name {
  color: #ff0000;
}

.hljs-type,
.hljs-params {
  color: #0000ff;
}

/* User color: hue: 0 */

.hljs-string,
.hljs-number,
.hljs-selector-id,
.hljs-selector-class,
.hljs-quote,
.hljs-template-tag,
.hljs-symbol,
.hljs-deletion {
  color: #000000;
}

.hljs-title,
.hljs-section {
  color: #0000ff;
}

.hljs-regexp,
.hljs-variable,
.hljs-template-variable,
.hljs-link,
.hljs-selector-attr,
.hljs-operator,
.hljs-selector-pseudo {
  color: #ab5656;
}

/* Language color: hue: 90; */

.hljs-literal {
  color: #ff0000;
}

.hljs-built_in,
.hljs-bullet,
.hljs-code,
.hljs-addition {
  color: #0000ff;
}

/* Meta color: hue: 200 */

.hljs-meta {
  color: #963200;
}

.hljs-meta .hljs-string {
  color: #963200;
}

.hljs-meta .hljs-keyword {
  color: #963200;
}

/* Misc effects */

.hljs-emphasis {
  font-style: italic;
}

.hljs-strong {
  font-weight: bold;
}

.img_termometro_01 {
  border-radius: 10px 10px 10px 10px;
  text-align: center;
  width: fit-content;
  height: 240px;
}

.img_circuito_termometro {
  border-radius: 10px 10px 10px 10px;
  text-align: center;
  width: fit-content;
  height: 240px;
}

.img_termometro_frontal {
  border-radius: 10px 10px 10px 10px;
  text-align: center;
  width: fit-content;
  height: 240px;
}

.df_proj02_cont_01_pai {
  display: flex;
  margin: 0px;
  padding: 0px;
  align-items: center;
}
.df_proj02_cont_01_filho1 {
  margin-right: 0px;
  margin-left: 0px;
  margin-top: 8px;
}
.df_proj02_cont_01_filho2 {
  align-items: center;
  height: 100%;
  margin-top: 10px;
  padding-top: 5px;
  padding-left: 10px;
  padding-right: 15px;
}
/*--------------------------------*/
.df_proj02_cont_02_pai {
  display: flex;
  align-items: center;
  margin: 0px;
  padding: 0px;
  margin-top: -35px;
}
.df_proj02_cont_02_filho1 {
  height: 350px;
  width: calc(100% - 250px);
  border-radius: 0px 10px 10px 0px;
  margin-top: 10px;
  border: 1px solid #ff9c00;
  border-left: 0px;
  padding-top: 5px;
  padding-left: 10px;
}
.df_proj02_cont_02_filho2 {
  margin-right: 10px;
  margin-left: 10px;
  margin-top: 8px;
}
/*--------------------------------*/
.df_proj02_cont_03_pai {
  display: flex;
  align-items: center;
  margin: 0px;
  padding: 0px;
  margin-top: -25px;
}
.df_proj02_cont_03_filho1 {
  margin-right: 10px;
  margin-left: 10px;
  margin-top: 8px;
}
.df_proj02_cont_03_filho2 {
  width: calc(100% - 250px);
  height: 240px;
  border-radius: 10px 0px 0px 10px;
  margin-top: 5px;
  border: 1px solid #ff9c00;
  border-right: 0px;
  padding-top: 5px;
  padding-left: 10px;
}
/*--------------------------------*/
/*--------------------------------*/
.df_proj02_cont_04_pai {
  display: flex;
  margin: 0px;
  padding: 0px;
  margin-top: -35px;
}
.df_proj02_cont_04_filho1 {
  width: calc(100% - 350px);
  border-radius: 0px 10px 10px 0px;
  margin-top: 10px;
  border: 1px solid #ff9c00;
  border-left: 0px;
  padding-top: 5px;
  padding-left: 10px;
}
.df_proj02_cont_04_filho2 {
  margin-right: 10px;
  margin-left: 10px;
  margin-top: 8px;
}
/*--------------------------------*/
.df_proj02_cont_05_pai {
  display: flex;
  margin: 0px;
  padding: 0px;
  margin-top: -35px;
}
.df_proj02_cont_05_filho1 {
  margin-right: 10px;
  margin-left: 10px;
  margin-top: 8px;
}
.df_proj02_cont_05_filho2 {
  width: calc(100% - 500px);
  border-radius: 10px 0px 0px 10px;
  margin-top: 10px;
  border: 1px solid #ff9c00;
  border-right: 0px;
  padding-top: 5px;
  padding-left: 10px;
}

/*==================================================================*/
/*=========================== RESPONSIVO ===========================*/
/*==================================================================*/

@media (max-width: 1000px) {
  /*----------------------------------------------*/
  /*--------- FONT SIZE (TXT2_MONT_PCI) ----------*/
  /*----------------------------------------------*/
  .titulo_principal {
    font-size: 30px;
    text-underline-offset: 8px;
  }
  /*.titulo_principal2
	{
		font-size: 30px;
		text-underline-offset: 8px;				
	}
	.quebra_linha1
	{
		display: none;
	}*/
}

/*---------------------- DIMINUI FONTE ----------------------------*/
@media (max-width: 940px) {
  .df_proj02_cont_01_filho2 {
    font-size: 15px;
  }
  .df_proj02_cont_02_filho1 {
    font-size: 15px;
  }
  .df_proj02_cont_03_filho2 {
    font-size: 15px;
  }
  .df_proj02_cont_04_filho1 {
    font-size: 15px;
  }
  .df_proj02_cont_05_filho2 {
    font-size: 15px;
  }
}

/*---------------------- DIMINUI IMAGENS ----------------------------*/
@media (max-width: 900px) {
  /*---------- CONTEUDO 1 ----------*/
  .além {
    width: 300px;
    height: 249px;
    object-fit: cover;
    /*object-position: 0px 0px; */
  }
  .df_proj02_cont_01_filho2 {
    width: calc(100% - 300px);
    align-items: center;
  }
  /*---------- CONTEUDO 2 ----------*/
  .img_circuito_termometro {
    width: 380px;
    height: 280px;
    object-fit: cover;
    margin: 0;
    /*object-position: 0px 0px; */
  }
  .df_proj02_cont_02_filho1 {
    width: calc(100% - 230px);
  }
  /*---------- CONTEUDO 3 ----------*/
  .img_termometro_frontal {
    width: 370px;
    height: 290px;
    object-fit: cover;
    /*object-position: 0px 0px; */
  }
  .df_proj02_cont_03_filho2 {
    width: calc(100% - 290px);
  }
  /*---------- CONTEUDO 4 ----------*/
  .df_proj02_cont_04_filho1 {
    width: calc(100% - 280px);
  }
  /*---------- CONTEUDO 5 ----------*/
  .df_proj02_cont_05_filho2 {
    width: calc(100% - 400px);
  }
}
/*---------------------- QUEDA DOS FLEX BOX----------------------------*/
@media (max-width: 800px) {
  /*---------- CONTEUDO 1 ----------*/
  .df_proj02_cont_01_pai {
    flex-flow: column wrap;
  }
  .df_proj02_cont_01_filho1 {
    width: 70%;
    margin-left: 0;
    text-align: center;
  }
  .df_proj02_cont_01_filho2 {
    width: 100%;
    border-right: 1px solid orange;
    border-radius: 10px 10px 10px 10px;
  }
  .img_secador_cafe_01 {
    /*width: 400px;*/
    height: auto;
  }
  /*---------- CONTEUDO 2 ----------*/
  .df_proj02_cont_02_pai {
    flex-flow: column wrap;
    flex-direction: column-reverse;
    align-items: center;
  }
  .df_proj02_cont_02_filho1 {
    width: 100%;
    margin-left: 0;
    border-left: 1px solid orange;
    border-radius: 10px 10px 10px 10px;
  }
  .df_proj02_cont_02_filho2 {
    text-align: center;
  }
  /*---------- CONTEUDO 3 ----------*/
  .df_proj02_cont_03_pai {
    flex-flow: column wrap;
  }
  .df_proj02_cont_03_filho1 {
    margin-left: 0;
    text-align: center;
  }
  .df_proj02_cont_03_filho2 {
    width: 100%;
    border-right: 1px solid orange;
    border-radius: 10px 10px 10px 10px;
  }

  .df_proj02_cont_01_filho2 {
    height: fit-content;
  }

  @media (max-width: 780px) {
    .titulo_principal {
      font-size: 25px;
      text-underline-offset: 6px;
      text-decoration-thickness: 0px;
    }
    /*.titulo_principal2
	{
		font-size: 10px;
		text-underline-offset: 6px;	
		text-decoration-thickness: 0px;	
	}*/
  }
}