body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f4f4f4;
    margin: 0;
    padding: 0;
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

header {
    background-color: #ff7f00;
    color: white;
    padding: 10px;
    text-align: center;
}

h1, h2, h3 {
    margin: 0;
}

section {
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.usos {
    background-color: var(--cor-usos);
}

.perigos {
    background-color: var(--cor-perigos);
}

.prevencao {
    background-color: var(--cor-prevencao);
}

.primeiros-socorros, .combate-incendios, .manuseio-armazenamento, .controle-exposicao, .eliminacao-residuos, .transporte {
    background-color: var(--cor-primeiros-socorros);
}

.primeiros-socorros-icons, .combate-incendios-icons {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

footer {
    background-color: #dcdcdc;
    color: #333;
    text-align: center;
    padding: 10px;
    font-size: 0.8em;
}

/* Adicione isso ao seu arquivo CSS existente */
section a {
    text-decoration: none;
    color: inherit;
    display: block;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

section:hover {
    background-color: #f0f0f0;
    cursor: pointer;
}

section a:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

section a::after {
    content: "Clique para mais detalhes";
    position: absolute;
    bottom: -30px;
    left: 0;
    width: 100%;
    text-align: center;
    background-color: rgba(0,0,0,0.7);
    color: white;
    padding: 5px 0;
    transition: all 0.3s ease;
}

section a:hover::after {
    bottom: 0;
}

.qr-code {
    text-align: right;
    margin-top: 10px;
}

.qr-code img {
    width: 50px;
    height: 50px;
}

.perigo-grid {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    margin-top: 20px;
}

.perigo-item {
    text-align: center;
    width: 22%; /* Ajuste conforme necessário */
    margin-bottom: 15px;
    transition: all 0.3s ease;
}

.perigo-item:hover {
    transform: scale(1.1);
}

.perigo-item img {
    width: 50px;
    height: 50px;
    margin-bottom: 5px;
}

.perigo-item p {
    font-size: 0.8em;
    margin: 0;
}

#printButton {
    display: block;
    margin: 20px auto;
    padding: 10px 20px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

#printButton:hover {
    background-color: #45a049;
}
#qr-code-print {
    display: none;
}
/* Estilos para impressão */
@media print {
    body {
        font-size: 8pt; /* Reduzido de 12pt para 8pt */
        line-height: 1.2; /* Reduz o espaçamento entre linhas */
    }

    .container {
        width: 100%;
        max-width: none;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        padding: 0; /* Remove o padding para maximizar o espaço */
    }

    section {
        width: 48%; /* Ajustado para 48% para dar um pequeno espaço entre as colunas */
        page-break-inside: avoid;
        margin-bottom: 10px; /* Reduzido de 20px para 10px */
        padding: 5px; /* Reduz o padding interno */
        box-sizing: border-box; /* Garante que padding não aumente a largura */
    }

    header, footer {
        width: 100%;
        margin-bottom: 5px; /* Reduz a margem */
    }

    h1, h2, h3 {
        margin: 0 0 5px 0; /* Reduz as margens dos títulos */
    }

    p {
        margin: 0 0 3px 0; /* Reduz as margens dos parágrafos */
    }

    #printButton, .voltar-container, .qr-code {
        display: none;
    }

    a {
        text-decoration: none;
        color: black;
    }

    /* Garante que as cores de fundo sejam impressas */
    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    /* Reduz o tamanho dos ícones */
    .perigo-item img {
        width: 20px;
        height: 20px;
    }

    /* Ajusta o grid de perigos */
    .perigo-grid {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .perigo-item {
        width: 48%;
        margin-bottom: 3px;
    }

    /* Reduz o espaço entre os itens de lista */
    ul, ol {
        padding-left: 15px;
        margin: 0 0 5px 0;
    }

    li {
        margin-bottom: 2px;
    }

    #qr-code-print {
        display: block !important;
        position: fixed !important;
        bottom: 20px !important;
        right: 20px !important;
        text-align: center !important;
    }

    #qr-code-print img {
        width: 80px !important;
        height: 80px !important;
    }

    #qr-code-print .qr-info,
    #qr-code-print .qr-url {
        margin: 5px 0 !important;
        font-size: 10pt !important;
    }

    #printButton {
        display: none !important;
    }
}

/* Cores base */
:root {
    --cor-usos: #e6f3ff;
    --cor-perigos: #ffe6e6;
    --cor-prevencao: #e6ffe6;
    --cor-primeiros-socorros: #fff0e6;
    --cor-combate-incendios: #ffcccc;
    --cor-manuseio-armazenamento: #e6e6ff;
    --cor-controle-exposicao: #ffffe6;
    --cor-eliminacao-residuos: #e6fff0;
    --cor-transporte: #f0e6ff;
}

/* Estilos para as seções */
.usos {
    background-color: var(--cor-usos);
}

.perigos {
    background-color: var(--cor-perigos);
}

.prevencao {
    background-color: var(--cor-prevencao);
}

.primeiros-socorros {
    background-color: var(--cor-primeiros-socorros);
}

.combate-incendios {
    background-color: var(--cor-combate-incendios);
}

.manuseio-armazenamento {
    background-color: var(--cor-manuseio-armazenamento);
}

.controle-exposicao {
    background-color: var(--cor-controle-exposicao);
}

.eliminacao-residuos {
    background-color: var(--cor-eliminacao-residuos);
}

.transporte {
    background-color: var(--cor-transporte);
}

/* Estilos gerais para as seções */
section {
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

section h3 {
    color: #333;
    margin-bottom: 10px;
}

.epi-icons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px; /* Espaço entre os ícones */
    margin-top: 15px;
}

.epi-icon2 {
    width: 80px; /* Largura fixa para todos os ícones */
    height: 80px; /* Altura fixa para todos os ícones */
    object-fit: contain; /* Mantém a proporção da imagem */
}



/* Header */
.header_usos {
    background-color: #ff7f00;
    color: white;
    padding: 20px 0;
    text-align: center;
}

.header_usos h1 {
    margin: 0;
}

/* Introdução */
.intro_usos {
    margin: 30px 0;
    font-style: italic;
}

/* Seções */
.usos-identificados,
.restricoes_usos,
.tendencias_usos {
    margin-bottom: 40px;
}

.usos-identificados h2,
.restricoes_usos h2,
.tendencias_usos h2 {
    color: #ff7f00;
    border-bottom: 2px solid #ff7f00;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

/* Artigos */
.uso_item,
.restricao_item {
    margin-bottom: 30px;
    padding: 20px;
    background-color: #fff;
    border-radius: 5px;
    /* Removido o box-shadow para simplificar visualmente */
}

.uso_item h3,
.restricao_item h3 {
    color: #ff7f00;
    margin-top: 0;
}

/* Parágrafos */
.uso_item p,
.restricao_item p {
    margin-top: 10px;
}

/* Footer */
.footer_usos {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 20px 0;
}

.footer_usos a {
    color: #ff7f00;
    text-decoration: none;
}

.footer_usos a:hover {
    text-decoration: underline;
}

/* Responsividade */
@media (min-width: 768px) {
    .uso_item,
    .restricao_item {
        /* Ajuste no padding para melhor distribuição do conteúdo */
        padding: 30px;
    }
}

/* Estilos para a página de perigos */
.container_perigos {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    background-color: #f8f8f8;
}

.header_perigos {
    background-color: #ff7f00;
    color: white;
    padding: 20px;
    text-align: center;
    margin-bottom: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.intro_perigos {
    background-color: #fff;
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.perigos_saude, .perigos_ambientais, .simbolos_ghs {
    margin-bottom: 30px;
}

.perigos_saude h2, .perigos_ambientais h2, .simbolos_ghs h2 {
    color: #ff7f00;
    border-bottom: 2px solid #ff7f00;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.perigo_item {
    background-color: #fff;
    border-left: 5px solid #ff7f00;
    padding: 15px;
    margin-bottom: 15px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.perigo_item:hover {
    transform: translateY(-5px);
}

.perigo_item img {
    width: 60px;
    height: 60px;
    margin-right: 20px;
}

.perigo_info {
    flex: 1;
}

.perigo_item h3 {
    color: #ff7f00;
    margin-bottom: 10px;
}

.ghs_container {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.ghs_container img {
    width: 80px;
    height: 80px;
}

.footer_perigos {
    background-color: #ff7f00;
    color: white;
    padding: 15px;
    text-align: center;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}



/* Estilos para a página de prevenção */
.container_prevencao {
    max-width: 800px;
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f4f4f4;
    margin: 0;
    padding: 0;
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f4f4f4;
    margin: 0;
    padding: 0;
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

header {
    background-color: #ff7f00;
    color: white;
    padding: 10px;
    text-align: center;
}

h1, h2, h3 {
    margin: 0;
}

section {
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.usos {
    background-color: var(--cor-usos);
}

.perigos {
    background-color: var(--cor-perigos);
}

.prevencao {
    background-color: var(--cor-prevencao);
}

.primeiros-socorros, .combate-incendios, .manuseio-armazenamento, .controle-exposicao, .eliminacao-residuos, .transporte {
    background-color: var(--cor-primeiros-socorros);
}

.primeiros-socorros-icons, .combate-incendios-icons {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

footer {
    background-color: #dcdcdc;
    color: #333;
    text-align: center;
    padding: 10px;
    font-size: 0.8em;
}

/* Adicione isso ao seu arquivo CSS existente */
section a {
    text-decoration: none;
    color: inherit;
    display: block;
}

section:hover {
    background-color: #f0f0f0;
    cursor: pointer;
}

.qr-code {
    text-align: right;
    margin-top: 10px;
}

.qr-code img {
    width: 50px;
    height: 50px;
}

.perigo-grid {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    margin-top: 20px;
}

.perigo-item {
    text-align: center;
    width: 22%; /* Ajuste conforme necessário */
    margin-bottom: 15px;
}

.perigo-item img {
    width: 50px;
    height: 50px;
    margin-bottom: 5px;
}

.perigo-item p {
    font-size: 0.8em;
    margin: 0;
}

#printButton {
    display: block;
    margin: 20px auto;
    padding: 10px 20px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

#printButton:hover {
    background-color: #45a049;
}
#qr-code-print {
    display: none;
}
/* Estilos para impressão */
@media print {
    body {
        font-size: 8pt; /* Reduzido de 12pt para 8pt */
        line-height: 1.2; /* Reduz o espaçamento entre linhas */
    }

    .container {
        width: 100%;
        max-width: none;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        padding: 0; /* Remove o padding para maximizar o espaço */
    }

    section {
        width: 48%; /* Ajustado para 48% para dar um pequeno espaço entre as colunas */
        page-break-inside: avoid;
        margin-bottom: 10px; /* Reduzido de 20px para 10px */
        padding: 5px; /* Reduz o padding interno */
        box-sizing: border-box; /* Garante que padding não aumente a largura */
    }

    header, footer {
        width: 100%;
        margin-bottom: 5px; /* Reduz a margem */
    }

    h1, h2, h3 {
        margin: 0 0 5px 0; /* Reduz as margens dos títulos */
    }

    p {
        margin: 0 0 3px 0; /* Reduz as margens dos parágrafos */
    }

    #printButton, .voltar-container, .qr-code {
        display: none;
    }

    a {
        text-decoration: none;
        color: black;
    }

    /* Garante que as cores de fundo sejam impressas */
    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    /* Reduz o tamanho dos ícones */
    .perigo-item img {
        width: 20px;
        height: 20px;
    }

    /* Ajusta o grid de perigos */
    .perigo-grid {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .perigo-item {
        width: 48%;
        margin-bottom: 3px;
    }

    /* Reduz o espaço entre os itens de lista */
    ul, ol {
        padding-left: 15px;
        margin: 0 0 5px 0;
    }

    li {
        margin-bottom: 2px;
    }

    #qr-code-print {
        display: block !important;
        position: fixed !important;
        bottom: 20px !important;
        right: 20px !important;
        text-align: center !important;
    }

    #qr-code-print img {
        width: 80px !important;
        height: 80px !important;
    }

    #qr-code-print .qr-info,
    #qr-code-print .qr-url {
        margin: 5px 0 !important;
        font-size: 10pt !important;
    }

    #printButton {
        display: none !important;
    }
}

/* Cores base */
:root {
    --cor-usos: #e6f3ff;
    --cor-perigos: #ffe6e6;
    --cor-prevencao: #e6ffe6;
    --cor-primeiros-socorros: #fff0e6;
    --cor-combate-incendios: #ffcccc;
    --cor-manuseio-armazenamento: #e6e6ff;
    --cor-controle-exposicao: #ffffe6;
    --cor-eliminacao-residuos: #e6fff0;
    --cor-transporte: #f0e6ff;
}

/* Estilos para as seções */
.usos {
    background-color: var(--cor-usos);
}

.perigos {
    background-color: var(--cor-perigos);
}

.prevencao {
    background-color: var(--cor-prevencao);
}

.primeiros-socorros {
    background-color: var(--cor-primeiros-socorros);
}

.combate-incendios {
    background-color: var(--cor-combate-incendios);
}

.manuseio-armazenamento {
    background-color: var(--cor-manuseio-armazenamento);
}

.controle-exposicao {
    background-color: var(--cor-controle-exposicao);
}

.eliminacao-residuos {
    background-color: var(--cor-eliminacao-residuos);
}

.transporte {
    background-color: var(--cor-transporte);
}

/* Estilos gerais para as seções */
section {
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

section h3 {
    color: #333;
    margin-bottom: 10px;
}

.epi-icons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px; /* Espaço entre os ícones */
    margin-top: 15px;
}

.epi-icon2 {
    width: 80px; /* Largura fixa para todos os ícones */
    height: 80px; /* Altura fixa para todos os ícones */
    object-fit: contain; /* Mantém a proporção da imagem */
}



/* Header */
.header_usos {
    background-color: #ff7f00;
    color: white;
    padding: 20px 0;
    text-align: center;
}

.header_usos h1 {
    margin: 0;
}

/* Introdução */
.intro_usos {
    margin: 30px 0;
    font-style: italic;
}

/* Seções */
.usos-identificados,
.restricoes_usos,
.tendencias_usos {
    margin-bottom: 40px;
}

.usos-identificados h2,
.restricoes_usos h2,
.tendencias_usos h2 {
    color: #ff7f00;
    border-bottom: 2px solid #ff7f00;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

/* Artigos */
.uso_item,
.restricao_item {
    margin-bottom: 30px;
    padding: 20px;
    background-color: #fff;
    border-radius: 5px;
    /* Removido o box-shadow para simplificar visualmente */
}

.uso_item h3,
.restricao_item h3 {
    color: #ff7f00;
    margin-top: 0;
}

/* Parágrafos */
.uso_item p,
.restricao_item p {
    margin-top: 10px;
}

/* Footer */
.footer_usos {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 20px 0;
}

.footer_usos a {
    color: #ff7f00;
    text-decoration: none;
}

.footer_usos a:hover {
    text-decoration: underline;
}

/* Responsividade */
@media (min-width: 768px) {
    .uso_item,
    .restricao_item {
        /* Ajuste no padding para melhor distribuição do conteúdo */
        padding: 30px;
    }
}

/* Estilos para a página de perigos */
.container_perigos {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    background-color: #f8f8f8;
}

.header_perigos {
    background-color: #ff7f00;
    color: white;
    padding: 20px;
    text-align: center;
    margin-bottom: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.intro_perigos {
    background-color: #fff;
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.perigos_saude, .perigos_ambientais, .simbolos_ghs {
    margin-bottom: 30px;
}

.perigos_saude h2, .perigos_ambientais h2, .simbolos_ghs h2 {
    color: #ff7f00;
    border-bottom: 2px solid #ff7f00;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.perigo_item {
    background-color: #fff;
    border-left: 5px solid #ff7f00;
    padding: 15px;
    margin-bottom: 15px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.perigo_item:hover {
    transform: translateY(-5px);
}

.perigo_item img {
    width: 60px;
    height: 60px;
    margin-right: 20px;
}

.perigo_info {
    flex: 1;
}

.perigo_item h3 {
    color: #ff7f00;
    margin-bottom: 10px;
}

.ghs_container {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.ghs_container img {
    width: 80px;
    height: 80px;
}

.footer_perigos {
    background-color: #ff7f00;
    color: white;
    padding: 15px;
    text-align: center;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}



/* Estilos para a página de prevenção */
.container_prevencao {
    max-width: 800px;
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f4f4f4;
    margin: 0;
    padding: 0;
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

header {
    background-color: #ff7f00;
    color: white;
    padding: 10px;
    text-align: center;
}

h1, h2, h3 {
    margin: 0;
}

section {
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.usos {
    background-color: var(--cor-usos);
}

.perigos {
body {
body {
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f4f4f4;
    margin: 0;
    padding: 0;
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

header {
    background-color: #ff7f00;
    color: white;
    padding: 10px;
    text-align: center;
}

h1, h2, h3 {
    margin: 0;
}

section {
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.usos {
    background-color: var(--cor-usos);
}

.perigos {
    background-color: var(--cor-perigos);
}

.prevencao {
    background-color: var(--cor-prevencao);
}

.primeiros-socorros, .combate-incendios, .manuseio-armazenamento, .controle-exposicao, .eliminacao-residuos, .transporte {
    background-color: var(--cor-primeiros-socorros);
}

.primeiros-socorros-icons, .combate-incendios-icons {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

footer {
    background-color: #dcdcdc;
    color: #333;
    text-align: center;
    padding: 10px;
    font-size: 0.8em;
}

/* Adicione isso ao seu arquivo CSS existente */
section a {
    text-decoration: none;
    color: inherit;
    display: block;
}

section:hover {
    background-color: #f0f0f0;
    cursor: pointer;
}

.qr-code {
    text-align: right;
    margin-top: 10px;
}

.qr-code img {
    width: 50px;
    height: 50px;
}

.perigo-grid {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    margin-top: 20px;
}

.perigo-item {
    text-align: center;
    width: 22%; /* Ajuste conforme necessário */
    margin-bottom: 15px;
}

.perigo-item img {
    width: 50px;
    height: 50px;
    margin-bottom: 5px;
}

.perigo-item p {
    font-size: 0.8em;
    margin: 0;
}

#printButton {
    display: block;
    margin: 20px auto;
    padding: 10px 20px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

#printButton:hover {
    background-color: #45a049;
}


/* Cores base */
:root {
    --cor-usos: #e6f3ff;
    --cor-perigos: #ffe6e6;
    --cor-prevencao: #e6ffe6;
    --cor-primeiros-socorros: #fff0e6;
    --cor-combate-incendios: #ffcccc;
    --cor-manuseio-armazenamento: #e6e6ff;
    --cor-controle-exposicao: #ffffe6;
    --cor-eliminacao-residuos: #e6fff0;
    --cor-transporte: #f0e6ff;
}

/* Estilos para as seções */
.usos {
    background-color: var(--cor-usos);
}

.perigos {
    background-color: var(--cor-perigos);
}

.prevencao {
    background-color: var(--cor-prevencao);
}

.primeiros-socorros {
    background-color: var(--cor-primeiros-socorros);
}

.combate-incendios {
    background-color: var(--cor-combate-incendios);
}

.manuseio-armazenamento {
    background-color: var(--cor-manuseio-armazenamento);
}

.controle-exposicao {
    background-color: var(--cor-controle-exposicao);
}

.eliminacao-residuos {
    background-color: var(--cor-eliminacao-residuos);
}

.transporte {
    background-color: var(--cor-transporte);
}

/* Estilos gerais para as seções */
section {
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

section h3 {
    color: #333;
    margin-bottom: 10px;
}

.epi-icons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px; /* Espaço entre os ícones */
    margin-top: 15px;
}

.epi-icon2 {
    width: 80px; /* Largura fixa para todos os ícones */
    height: 80px; /* Altura fixa para todos os ícones */
    object-fit: contain; /* Mantém a proporção da imagem */
}



/* Header */
.header_usos {
    background-color: #ff7f00;
    color: white;
    padding: 20px 0;
    text-align: center;
}

.header_usos h1 {
    margin: 0;
}

/* Introdução */
.intro_usos {
    margin: 30px 0;
    font-style: italic;
}

/* Seções */
.usos-identificados,
.restricoes_usos,
.tendencias_usos {
    margin-bottom: 40px;
}

.usos-identificados h2,
.restricoes_usos h2,
.tendencias_usos h2 {
    color: #ff7f00;
    border-bottom: 2px solid #ff7f00;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

/* Artigos */
.uso_item,
.restricao_item {
    margin-bottom: 30px;
    padding: 20px;
    background-color: #fff;
    border-radius: 5px;
    /* Removido o box-shadow para simplificar visualmente */
}

.uso_item h3,
.restricao_item h3 {
    color: #ff7f00;
    margin-top: 0;
}

/* Parágrafos */
.uso_item p,
.restricao_item p {
    margin-top: 10px;
}

/* Footer */
.footer_usos {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 20px 0;
}

.footer_usos a {
    color: #ff7f00;
    text-decoration: none;
}

.footer_usos a:hover {
    text-decoration: underline;
}

/* Responsividade */
@media (min-width: 768px) {
    .uso_item,
    .restricao_item {
        /* Ajuste no padding para melhor distribuição do conteúdo */
        padding: 30px;
    }
}

/* Estilos para a página de perigos */
.container_perigos {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    background-color: #f8f8f8;
}

.header_perigos {
    background-color: #ff7f00;
    color: white;
    padding: 20px;
    text-align: center;
    margin-bottom: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.intro_perigos {
    background-color: #fff;
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.perigos_saude, .perigos_ambientais, .simbolos_ghs {
    margin-bottom: 30px;
}

.perigos_saude h2, .perigos_ambientais h2, .simbolos_ghs h2 {
    color: #ff7f00;
    border-bottom: 2px solid #ff7f00;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.perigo_item {
    background-color: #fff;
    border-left: 5px solid #ff7f00;
    padding: 15px;
    margin-bottom: 15px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.perigo_item:hover {
    transform: translateY(-5px);
}

.perigo_item img {
    width: 60px;
    height: 60px;
    margin-right: 20px;
}

.perigo_info {
    flex: 1;
}

.perigo_item h3 {
    color: #ff7f00;
    margin-bottom: 10px;
}

.ghs_container {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.ghs_container img {
    width: 80px;
    height: 80px;
}

.footer_perigos {
    background-color: #ff7f00;
    color: white;
    padding: 15px;
    text-align: center;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}



/* Estilos para a página de prevenção */
.container_prevencao {
    max-width: 800px;
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f4f4f4;
    margin: 0;
    padding: 0;
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

header {
    background-color: #ff7f00;
    color: white;
    padding: 10px;
    text-align: center;
}

h1, h2, h3 {
    margin: 0;
}

section {
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.usos {
    background-color: var(--cor-usos);
}

.perigos {
body {
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f4f4f4;
    margin: 0;
    padding: 0;
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

header {
    background-color: #ff7f00;
    color: white;
    padding: 10px;
    text-align: center;
}

h1, h2, h3 {
    margin: 0;
}

section {
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.usos {
    background-color: var(--cor-usos);
}

.perigos {
    background-color: var(--cor-perigos);
}

.prevencao {
    background-color: var(--cor-prevencao);
}

.primeiros-socorros, .combate-incendios, .manuseio-armazenamento, .controle-exposicao, .eliminacao-residuos, .transporte {
    background-color: var(--cor-primeiros-socorros);
}

.primeiros-socorros-icons, .combate-incendios-icons {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

footer {
    background-color: #dcdcdc;
    color: #333;
    text-align: center;
    padding: 10px;
    font-size: 0.8em;
}

/* Adicione isso ao seu arquivo CSS existente */
section a {
    text-decoration: none;
    color: inherit;
    display: block;
}

section:hover {
    background-color: #f0f0f0;
    cursor: pointer;
}

.qr-code {
    text-align: right;
    margin-top: 10px;
}

.qr-code img {
    width: 50px;
    height: 50px;
}

.perigo-grid {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    margin-top: 20px;
}

.perigo-item {
    text-align: center;
    width: 22%; /* Ajuste conforme necessário */
    margin-bottom: 15px;
}

.perigo-item img {
    width: 50px;
    height: 50px;
    margin-bottom: 5px;
}

.perigo-item p {
    font-size: 0.8em;
    margin: 0;
}

#printButton {
    display: block;
    margin: 20px auto;
    padding: 10px 20px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

#printButton:hover {
    background-color: #45a049;
}




/* Cores base */
:root {
    --cor-usos: #e6f3ff;
    --cor-perigos: #ffe6e6;
    --cor-prevencao: #e6ffe6;
    --cor-primeiros-socorros: #fff0e6;
    --cor-combate-incendios: #ffcccc;
    --cor-manuseio-armazenamento: #e6e6ff;
    --cor-controle-exposicao: #ffffe6;
    --cor-eliminacao-residuos: #e6fff0;
    --cor-transporte: #f0e6ff;
}

/* Estilos para as seções */
.usos {
    background-color: var(--cor-usos);
}

.perigos {
    background-color: var(--cor-perigos);
}

.prevencao {
    background-color: var(--cor-prevencao);
}

.primeiros-socorros {
    background-color: var(--cor-primeiros-socorros);
}

.combate-incendios {
    background-color: var(--cor-combate-incendios);
}

.manuseio-armazenamento {
    background-color: var(--cor-manuseio-armazenamento);
}

.controle-exposicao {
    background-color: var(--cor-controle-exposicao);
}

.eliminacao-residuos {
    background-color: var(--cor-eliminacao-residuos);
}

.transporte {
    background-color: var(--cor-transporte);
}

/* Estilos gerais para as seções */
section {
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

section h3 {
    color: #333;
    margin-bottom: 10px;
}

.epi-icons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px; /* Espaço entre os ícones */
    margin-top: 15px;
}

.epi-icon2 {
    width: 80px; /* Largura fixa para todos os ícones */
    height: 80px; /* Altura fixa para todos os ícones */
    object-fit: contain; /* Mantém a proporção da imagem */
}



/* Header */
.header_usos {
    background-color: #ff7f00;
    color: white;
    padding: 20px 0;
    text-align: center;
}

.header_usos h1 {
    margin: 0;
}

/* Introdução */
.intro_usos {
    margin: 30px 0;
    font-style: italic;
}

/* Seções */
.usos-identificados,
.restricoes_usos,
.tendencias_usos {
    margin-bottom: 40px;
}

.usos-identificados h2,
.restricoes_usos h2,
.tendencias_usos h2 {
    color: #ff7f00;
    border-bottom: 2px solid #ff7f00;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

/* Artigos */
.uso_item,
.restricao_item {
    margin-bottom: 30px;
    padding: 20px;
    background-color: #fff;
    border-radius: 5px;
    /* Removido o box-shadow para simplificar visualmente */
}

.uso_item h3,
.restricao_item h3 {
    color: #ff7f00;
    margin-top: 0;
}

/* Parágrafos */
.uso_item p,
.restricao_item p {
    margin-top: 10px;
}

/* Footer */
.footer_usos {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 20px 0;
}

.footer_usos a {
    color: #ff7f00;
    text-decoration: none;
}

.footer_usos a:hover {
    text-decoration: underline;
}

/* Responsividade */
@media (min-width: 768px) {
    .uso_item,
    .restricao_item {
        /* Ajuste no padding para melhor distribuição do conteúdo */
        padding: 30px;
    }
}

/* Estilos para a página de perigos */
.container_perigos {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    background-color: #f8f8f8;
}

.header_perigos {
    background-color: #ff7f00;
    color: white;
    padding: 20px;
    text-align: center;
    margin-bottom: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.intro_perigos {
    background-color: #fff;
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.perigos_saude, .perigos_ambientais, .simbolos_ghs {
    margin-bottom: 30px;
}

.perigos_saude h2, .perigos_ambientais h2, .simbolos_ghs h2 {
    color: #ff7f00;
    border-bottom: 2px solid #ff7f00;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.perigo_item {
    background-color: #fff;
    border-left: 5px solid #ff7f00;
    padding: 15px;
    margin-bottom: 15px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.perigo_item:hover {
    transform: translateY(-5px);
}

.perigo_item img {
    width: 60px;
    height: 60px;
    margin-right: 20px;
}

.perigo_info {
    flex: 1;
}

.perigo_item h3 {
    color: #ff7f00;
    margin-bottom: 10px;
}

.ghs_container {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.ghs_container img {
    width: 80px;
    height: 80px;
}

.footer_perigos {
    background-color: #ff7f00;
    color: white;
    padding: 15px;
    text-align: center;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}



/* Estilos para a página de prevenção */
.container_prevencao {
    max-width: 800px;
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f4f4f4;
    margin: 0;
    padding: 0;
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

header {
    background-color: #ff7f00;
    color: white;
    padding: 10px;
    text-align: center;
}

h1, h2, h3 {
    margin: 0;
}

section {
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.usos {
    background-color: var(--cor-usos);
}

.perigos {
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f4f4f4;
    margin: 0;
    padding: 0;
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

header {
    background-color: #ff7f00;
    color: white;
    padding: 10px;
    text-align: center;
}

h1, h2, h3 {
    margin: 0;
}

section {
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.usos {
    background-color: var(--cor-usos);
}

.perigos {
    background-color: var(--cor-perigos);
}

.prevencao {
    background-color: var(--cor-prevencao);
}

.primeiros-socorros, .combate-incendios, .manuseio-armazenamento, .controle-exposicao, .eliminacao-residuos, .transporte {
    background-color: var(--cor-primeiros-socorros);
}

.primeiros-socorros-icons, .combate-incendios-icons {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

footer {
    background-color: #dcdcdc;
    color: #333;
    text-align: center;
    padding: 10px;
    font-size: 0.8em;
}

/* Adicione isso ao seu arquivo CSS existente */
section a {
    text-decoration: none;
    color: inherit;
    display: block;
}

section:hover {
    background-color: #f0f0f0;
    cursor: pointer;
}

.qr-code {
    text-align: right;
    margin-top: 10px;
}

.qr-code img {
    width: 50px;
    height: 50px;
}

.perigo-grid {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    margin-top: 20px;
}

.perigo-item {
    text-align: center;
    width: 22%; /* Ajuste conforme necessário */
    margin-bottom: 15px;
}

.perigo-item img {
    width: 50px;
    height: 50px;
    margin-bottom: 5px;
}

.perigo-item p {
    font-size: 0.8em;
    margin: 0;
}

#printButton {
    display: block;
    margin: 20px auto;
    padding: 10px 20px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

#printButton:hover {
    background-color: #45a049;
}

#qr-code-print {
    display: none;
}
/* Cores base */
:root {
    --cor-usos: #e6f3ff;
    --cor-perigos: #ffe6e6;
    --cor-prevencao: #e6ffe6;
    --cor-primeiros-socorros: #fff0e6;
    --cor-combate-incendios: #ffcccc;
    --cor-manuseio-armazenamento: #e6e6ff;
    --cor-controle-exposicao: #ffffe6;
    --cor-eliminacao-residuos: #e6fff0;
    --cor-transporte: #f0e6ff;
}

/* Estilos para as seções */
.usos {
    background-color: var(--cor-usos);
}

.perigos {
    background-color: var(--cor-perigos);
}

.prevencao {
    background-color: var(--cor-prevencao);
}

.primeiros-socorros {
    background-color: var(--cor-primeiros-socorros);
}

.combate-incendios {
    background-color: var(--cor-combate-incendios);
}

.manuseio-armazenamento {
    background-color: var(--cor-manuseio-armazenamento);
}

.controle-exposicao {
    background-color: var(--cor-controle-exposicao);
}

.eliminacao-residuos {
    background-color: var(--cor-eliminacao-residuos);
}

.transporte {
    background-color: var(--cor-transporte);
}

/* Estilos gerais para as seções */
section {
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

section h3 {
    color: #333;
    margin-bottom: 10px;
}

.epi-icons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px; /* Espaço entre os ícones */
    margin-top: 15px;
}

.epi-icon2 {
    width: 80px; /* Largura fixa para todos os ícones */
    height: 80px; /* Altura fixa para todos os ícones */
    object-fit: contain; /* Mantém a proporção da imagem */
}



/* Header */
.header_usos {
    background-color: #ff7f00;
    color: white;
    padding: 20px 0;
    text-align: center;
}

.header_usos h1 {
    margin: 0;
}

/* Introdução */
.intro_usos {
    margin: 30px 0;
    font-style: italic;
}

/* Seções */
.usos-identificados,
.restricoes_usos,
.tendencias_usos {
    margin-bottom: 40px;
}

.usos-identificados h2,
.restricoes_usos h2,
.tendencias_usos h2 {
    color: #ff7f00;
    border-bottom: 2px solid #ff7f00;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

/* Artigos */
.uso_item,
.restricao_item {
    margin-bottom: 30px;
    padding: 20px;
    background-color: #fff;
    border-radius: 5px;
    /* Removido o box-shadow para simplificar visualmente */
}

.uso_item h3,
.restricao_item h3 {
    color: #ff7f00;
    margin-top: 0;
}

/* Parágrafos */
.uso_item p,
.restricao_item p {
    margin-top: 10px;
}

/* Footer */
.footer_usos {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 20px 0;
}

.footer_usos a {
    color: #ff7f00;
    text-decoration: none;
}

.footer_usos a:hover {
    text-decoration: underline;
}

/* Responsividade */
@media (min-width: 768px) {
    .uso_item,
    .restricao_item {
        /* Ajuste no padding para melhor distribuição do conteúdo */
        padding: 30px;
    }
}

/* Estilos para a página de perigos */
.container_perigos {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    background-color: #f8f8f8;
}

.header_perigos {
    background-color: #ff7f00;
    color: white;
    padding: 20px;
    text-align: center;
    margin-bottom: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.intro_perigos {
    background-color: #fff;
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.perigos_saude, .perigos_ambientais, .simbolos_ghs {
    margin-bottom: 30px;
}

.perigos_saude h2, .perigos_ambientais h2, .simbolos_ghs h2 {
    color: #ff7f00;
    border-bottom: 2px solid #ff7f00;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.perigo_item {
    background-color: #fff;
    border-left: 5px solid #ff7f00;
    padding: 15px;
    margin-bottom: 15px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.perigo_item:hover {
    transform: translateY(-5px);
}

.perigo_item img {
    width: 60px;
    height: 60px;
    margin-right: 20px;
}

.perigo_info {
    flex: 1;
}

.perigo_item h3 {
    color: #ff7f00;
    margin-bottom: 10px;
}

.ghs_container {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.ghs_container img {
    width: 80px;
    height: 80px;
}

.footer_perigos {
    background-color: #ff7f00;
    color: white;
    padding: 15px;
    text-align: center;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}



/* Estilos para a página de prevenção */
.container_prevencao {
    max-width: 800px;
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f4f4f4;
    margin: 0;
    padding: 0;
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

header {
    background-color: #ff7f00;
    color: white;
    padding: 10px;
    text-align: center;
}

h1, h2, h3 {
    margin: 0;
}

section {
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.usos {
    background-color: var(--cor-usos);
}

.perigos {
    background-color: var(--cor-perigos);
}

.prevencao {
    background-color: var(--cor-prevencao);
}

.primeiros-socorros, .combate-incendios, .manuseio-armazenamento, .controle-exposicao, .eliminacao-residuos, .transporte {
    background-color: var(--cor-primeiros-socorros);
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f4f4f4;
    margin: 0;
    padding: 0;
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

header {
    background-color: #ff7f00;
    color: white;
    padding: 10px;
    text-align: center;
}

h1, h2, h3 {
    margin: 0;
}

section {
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.usos {
    background-color: var(--cor-usos);
}

.perigos {
    background-color: var(--cor-perigos);
}

.prevencao {
    background-color: var(--cor-prevencao);
}

.primeiros-socorros, .combate-incendios, .manuseio-armazenamento, .controle-exposicao, .eliminacao-residuos, .transporte {
    background-color: var(--cor-primeiros-socorros);
}

.primeiros-socorros-icons, .combate-incendios-icons {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

footer {
    background-color: #dcdcdc;
    color: #333;
    text-align: center;
    padding: 10px;
    font-size: 0.8em;
}

/* Adicione isso ao seu arquivo CSS existente */
section a {
    text-decoration: none;
    color: inherit;
    display: block;
}

section:hover {
    background-color: #f0f0f0;
    cursor: pointer;
}

.qr-code {
    text-align: right;
    margin-top: 10px;
}

.qr-code img {
    width: 50px;
    height: 50px;
}

.perigo-grid {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    margin-top: 20px;
}

.perigo-item {
    text-align: center;
    width: 22%; /* Ajuste conforme necessário */
    margin-bottom: 15px;
}

.perigo-item img {
    width: 50px;
    height: 50px;
    margin-bottom: 5px;
}

.perigo-item p {
    font-size: 0.8em;
    margin: 0;
}

#printButton {
    display: block;
    margin: 20px auto;
    padding: 10px 20px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

#printButton:hover {
    background-color: #45a049;
}



/* Cores base */
:root {
    --cor-usos: #e6f3ff;
    --cor-perigos: #ffe6e6;
    --cor-prevencao: #e6ffe6;
    --cor-primeiros-socorros: #fff0e6;
    --cor-combate-incendios: #ffcccc;
    --cor-manuseio-armazenamento: #e6e6ff;
    --cor-controle-exposicao: #ffffe6;
    --cor-eliminacao-residuos: #e6fff0;
    --cor-transporte: #f0e6ff;
}

/* Estilos para as seções */
.usos {
    background-color: var(--cor-usos);
}

.perigos {
    background-color: var(--cor-perigos);
}

.prevencao {
    background-color: var(--cor-prevencao);
}

.primeiros-socorros {
    background-color: var(--cor-primeiros-socorros);
}

.combate-incendios {
    background-color: var(--cor-combate-incendios);
}

.manuseio-armazenamento {
    background-color: var(--cor-manuseio-armazenamento);
}

.controle-exposicao {
    background-color: var(--cor-controle-exposicao);
}

.eliminacao-residuos {
    background-color: var(--cor-eliminacao-residuos);
}

.transporte {
    background-color: var(--cor-transporte);
}

/* Estilos gerais para as seções */
section {
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

section h3 {
    color: #333;
    margin-bottom: 10px;
}

.epi-icons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px; /* Espaço entre os ícones */
    margin-top: 15px;
}

.epi-icon2 {
    width: 80px; /* Largura fixa para todos os ícones */
    height: 80px; /* Altura fixa para todos os ícones */
    object-fit: contain; /* Mantém a proporção da imagem */
}



/* Header */
.header_usos {
    background-color: #ff7f00;
    color: white;
    padding: 20px 0;
    text-align: center;
}

.header_usos h1 {
    margin: 0;
}

/* Introdução */
.intro_usos {
    margin: 30px 0;
    font-style: italic;
}

/* Seções */
.usos-identificados,
.restricoes_usos,
.tendencias_usos {
    margin-bottom: 40px;
}

.usos-identificados h2,
.restricoes_usos h2,
.tendencias_usos h2 {
    color: #ff7f00;
    border-bottom: 2px solid #ff7f00;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

/* Artigos */
.uso_item,
.restricao_item {
    margin-bottom: 30px;
    padding: 20px;
    background-color: #fff;
    border-radius: 5px;
    /* Removido o box-shadow para simplificar visualmente */
}

.uso_item h3,
.restricao_item h3 {
    color: #ff7f00;
    margin-top: 0;
}

/* Parágrafos */
.uso_item p,
.restricao_item p {
    margin-top: 10px;
}

/* Footer */
.footer_usos {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 20px 0;
}

.footer_usos a {
    color: #ff7f00;
    text-decoration: none;
}

.footer_usos a:hover {
    text-decoration: underline;
}

/* Responsividade */
@media (min-width: 768px) {
    .uso_item,
    .restricao_item {
        /* Ajuste no padding para melhor distribuição do conteúdo */
        padding: 30px;
    }
}

/* Estilos para a página de perigos */
.container_perigos {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    background-color: #f8f8f8;
}

.header_perigos {
    background-color: #ff7f00;
    color: white;
    padding: 20px;
    text-align: center;
    margin-bottom: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.intro_perigos {
    background-color: #fff;
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.perigos_saude, .perigos_ambientais, .simbolos_ghs {
    margin-bottom: 30px;
}

.perigos_saude h2, .perigos_ambientais h2, .simbolos_ghs h2 {
    color: #ff7f00;
    border-bottom: 2px solid #ff7f00;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.perigo_item {
    background-color: #fff;
    border-left: 5px solid #ff7f00;
    padding: 15px;
    margin-bottom: 15px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.perigo_item:hover {
    transform: translateY(-5px);
}

.perigo_item img {
    width: 60px;
    height: 60px;
    margin-right: 20px;
}

.perigo_info {
    flex: 1;
}

.perigo_item h3 {
    color: #ff7f00;
    margin-bottom: 10px;
}

.ghs_container {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.ghs_container img {
    width: 80px;
    height: 80px;
}

.footer_perigos {
    background-color: #ff7f00;
    color: white;
    padding: 15px;
    text-align: center;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}



/* Estilos para a página de prevenção */
.container_prevencao {
    max-width: 800px;
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f4f4f4;
    margin: 0;
    padding: 0;
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

header {
    background-color: #ff7f00;
    color: white;
    padding: 10px;
    text-align: center;
}

h1, h2, h3 {
    margin: 0;
}

section {
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.usos {
    background-color: var(--cor-usos);
}

.perigos {
    background-color: var(--cor-perigos);
}

.prevencao {
    background-color: var(--cor-prevencao);
}

.primeiros-socorros, .combate-incendios, .manuseio-armazenamento, .controle-exposicao, .eliminacao-residuos, .transporte {
    background-color: var(--cor-primeiros-socorros);
}

.primeiros-socorros-icons, .combate-incendios-icons {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

footer {
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f4f4f4;
    margin: 0;
    padding: 0;
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

header {
    background-color: #ff7f00;
    color: white;
    padding: 10px;
    text-align: center;
}

h1, h2, h3 {
    margin: 0;
}

section {
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.usos {
    background-color: var(--cor-usos);
}

.perigos {
    background-color: var(--cor-perigos);
}

.prevencao {
    background-color: var(--cor-prevencao);
}

.primeiros-socorros, .combate-incendios, .manuseio-armazenamento, .controle-exposicao, .eliminacao-residuos, .transporte {
    background-color: var(--cor-primeiros-socorros);
}

.primeiros-socorros-icons, .combate-incendios-icons {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

footer {
    background-color: #dcdcdc;
    color: #333;
    text-align: center;
    padding: 10px;
    font-size: 0.8em;
}

/* Adicione isso ao seu arquivo CSS existente */
section a {
    text-decoration: none;
    color: inherit;
    display: block;
}

section:hover {
    background-color: #f0f0f0;
    cursor: pointer;
}

.qr-code {
    text-align: right;
    margin-top: 10px;
}

.qr-code img {
    width: 50px;
    height: 50px;
}

.perigo-grid {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    margin-top: 20px;
}

.perigo-item {
    text-align: center;
    width: 22%; /* Ajuste conforme necessário */
    margin-bottom: 15px;
}

.perigo-item img {
    width: 50px;
    height: 50px;
    margin-bottom: 5px;
}

.perigo-item p {
    font-size: 0.8em;
    margin: 0;
}

#printButton {
    display: block;
    margin: 20px auto;
    padding: 10px 20px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

#printButton:hover {
    background-color: #45a049;
}


/* Cores base */
:root {
    --cor-usos: #e6f3ff;
    --cor-perigos: #ffe6e6;
    --cor-prevencao: #e6ffe6;
    --cor-primeiros-socorros: #fff0e6;
    --cor-combate-incendios: #ffcccc;
    --cor-manuseio-armazenamento: #e6e6ff;
    --cor-controle-exposicao: #ffffe6;
    --cor-eliminacao-residuos: #e6fff0;
    --cor-transporte: #f0e6ff;
}

/* Estilos para as seções */
.usos {
    background-color: var(--cor-usos);
}

.perigos {
    background-color: var(--cor-perigos);
}

.prevencao {
    background-color: var(--cor-prevencao);
}

.primeiros-socorros {
    background-color: var(--cor-primeiros-socorros);
}

.combate-incendios {
    background-color: var(--cor-combate-incendios);
}

.manuseio-armazenamento {
    background-color: var(--cor-manuseio-armazenamento);
}

.controle-exposicao {
    background-color: var(--cor-controle-exposicao);
}

.eliminacao-residuos {
    background-color: var(--cor-eliminacao-residuos);
}

.transporte {
    background-color: var(--cor-transporte);
}

/* Estilos gerais para as seções */
section {
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

section h3 {
    color: #333;
    margin-bottom: 10px;
}

.epi-icons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px; /* Espaço entre os ícones */
    margin-top: 15px;
}

.epi-icon2 {
    width: 80px; /* Largura fixa para todos os ícones */
    height: 80px; /* Altura fixa para todos os ícones */
    object-fit: contain; /* Mantém a proporção da imagem */
}



/* Header */
.header_usos {
    background-color: #ff7f00;
    color: white;
    padding: 20px 0;
    text-align: center;
}

.header_usos h1 {
    margin: 0;
}

/* Introdução */
.intro_usos {
    margin: 30px 0;
    font-style: italic;
}

/* Seções */
.usos-identificados,
.restricoes_usos,
.tendencias_usos {
    margin-bottom: 40px;
}

.usos-identificados h2,
.restricoes_usos h2,
.tendencias_usos h2 {
    color: #ff7f00;
    border-bottom: 2px solid #ff7f00;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

/* Artigos */
.uso_item,
.restricao_item {
    margin-bottom: 30px;
    padding: 20px;
    background-color: #fff;
    border-radius: 5px;
    /* Removido o box-shadow para simplificar visualmente */
}

.uso_item h3,
.restricao_item h3 {
    color: #ff7f00;
    margin-top: 0;
}

/* Parágrafos */
.uso_item p,
.restricao_item p {
    margin-top: 10px;
}

/* Footer */
.footer_usos {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 20px 0;
}

.footer_usos a {
    color: #ff7f00;
    text-decoration: none;
}

.footer_usos a:hover {
    text-decoration: underline;
}

/* Responsividade */
@media (min-width: 768px) {
    .uso_item,
    .restricao_item {
        /* Ajuste no padding para melhor distribuição do conteúdo */
        padding: 30px;
    }
}

/* Estilos para a página de perigos */
.container_perigos {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    background-color: #f8f8f8;
}

.header_perigos {
    background-color: #ff7f00;
    color: white;
    padding: 20px;
    text-align: center;
    margin-bottom: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.intro_perigos {
    background-color: #fff;
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.perigos_saude, .perigos_ambientais, .simbolos_ghs {
    margin-bottom: 30px;
}

.perigos_saude h2, .perigos_ambientais h2, .simbolos_ghs h2 {
    color: #ff7f00;
    border-bottom: 2px solid #ff7f00;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.perigo_item {
    background-color: #fff;
    border-left: 5px solid #ff7f00;
    padding: 15px;
    margin-bottom: 15px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.perigo_item:hover {
    transform: translateY(-5px);
}

.perigo_item img {
    width: 60px;
    height: 60px;
    margin-right: 20px;
}

.perigo_info {
    flex: 1;
}

.perigo_item h3 {
    color: #ff7f00;
    margin-bottom: 10px;
}

.ghs_container {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.ghs_container img {
    width: 80px;
    height: 80px;
}

.footer_perigos {
    background-color: #ff7f00;
    color: white;
    padding: 15px;
    text-align: center;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}



/* Estilos para a página de prevenção */
.container_prevencao {
    max-width: 800px;
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f4f4f4;
    margin: 0;
    padding: 0;
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

header {
    background-color: #ff7f00;
    color: white;
    padding: 10px;
    text-align: center;
}

h1, h2, h3 {
    margin: 0;
}

section {
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.usos {
    background-color: var(--cor-usos);
}

.perigos {
    background-color: var(--cor-perigos);
}

.prevencao {
    background-color: var(--cor-prevencao);
}

.primeiros-socorros, .combate-incendios, .manuseio-armazenamento, .controle-exposicao, .eliminacao-residuos, .transporte {
    background-color: var(--cor-primeiros-socorros);
}

.primeiros-socorros-icons, .combate-incendios-icons {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

footer {
    background-color: #dcdcdc;
    color: #333;
    text-align: center;
    padding: 10px;
    font-size: 0.8em;
}

section a {
    text-decoration: none;
    color: inherit;
    display: block;
}

section:hover {
    background-color: #f0f0f0;
    cursor: pointer;
}

.qr-code {
    text-align: right;
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f4f4f4;
    margin: 0;
    padding: 0;
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

header {
    background-color: #ff7f00;
    color: white;
    padding: 10px;
    text-align: center;
}

h1, h2, h3 {
    margin: 0;
}

section {
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.usos {
    background-color: var(--cor-usos);
}

.perigos {
    background-color: var(--cor-perigos);
}

.prevencao {
    background-color: var(--cor-prevencao);
}

.primeiros-socorros, .combate-incendios, .manuseio-armazenamento, .controle-exposicao, .eliminacao-residuos, .transporte {
    background-color: var(--cor-primeiros-socorros);
}

.primeiros-socorros-icons, .combate-incendios-icons {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

footer {
    background-color: #dcdcdc;
    color: #333;
    text-align: center;
    padding: 10px;
    font-size: 0.8em;
}

/* Adicione isso ao seu arquivo CSS existente */
section a {
    text-decoration: none;
    color: inherit;
    display: block;
}

section:hover {
    background-color: #f0f0f0;
    cursor: pointer;
}

.qr-code {
    text-align: right;
    margin-top: 10px;
}

.qr-code img {
    width: 50px;
    height: 50px;
}

.perigo-grid {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    margin-top: 20px;
}

.perigo-item {
    text-align: center;
    width: 22%; /* Ajuste conforme necessário */
    margin-bottom: 15px;
}

.perigo-item img {
    width: 50px;
    height: 50px;
    margin-bottom: 5px;
}

.perigo-item p {
    font-size: 0.8em;
    margin: 0;
}

#printButton {
    display: block;
    margin: 20px auto;
    padding: 10px 20px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

#printButton:hover {
    background-color: #45a049;
}



/* Cores base */
:root {
    --cor-usos: #e6f3ff;
    --cor-perigos: #ffe6e6;
    --cor-prevencao: #e6ffe6;
    --cor-primeiros-socorros: #fff0e6;
    --cor-combate-incendios: #ffcccc;
    --cor-manuseio-armazenamento: #e6e6ff;
    --cor-controle-exposicao: #ffffe6;
    --cor-eliminacao-residuos: #e6fff0;
    --cor-transporte: #f0e6ff;
}

/* Estilos para as seções */
.usos {
    background-color: var(--cor-usos);
}

.perigos {
    background-color: var(--cor-perigos);
}

.prevencao {
    background-color: var(--cor-prevencao);
}

.primeiros-socorros {
    background-color: var(--cor-primeiros-socorros);
}

.combate-incendios {
    background-color: var(--cor-combate-incendios);
}

.manuseio-armazenamento {
    background-color: var(--cor-manuseio-armazenamento);
}

.controle-exposicao {
    background-color: var(--cor-controle-exposicao);
}

.eliminacao-residuos {
    background-color: var(--cor-eliminacao-residuos);
}

.transporte {
    background-color: var(--cor-transporte);
}

/* Estilos gerais para as seções */
section {
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

section h3 {
    color: #333;
    margin-bottom: 10px;
}

.epi-icons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px; /* Espaço entre os ícones */
    margin-top: 15px;
}

.epi-icon2 {
    width: 80px; /* Largura fixa para todos os ícones */
    height: 80px; /* Altura fixa para todos os ícones */
    object-fit: contain; /* Mantém a proporção da imagem */
}



/* Header */
.header_usos {
    background-color: #ff7f00;
    color: white;
    padding: 20px 0;
    text-align: center;
}

.header_usos h1 {
    margin: 0;
}

/* Introdução */
.intro_usos {
    margin: 30px 0;
    font-style: italic;
}

/* Seções */
.usos-identificados,
.restricoes_usos,
.tendencias_usos {
    margin-bottom: 40px;
}

.usos-identificados h2,
.restricoes_usos h2,
.tendencias_usos h2 {
    color: #ff7f00;
    border-bottom: 2px solid #ff7f00;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

/* Artigos */
.uso_item,
.restricao_item {
    margin-bottom: 30px;
    padding: 20px;
    background-color: #fff;
    border-radius: 5px;
    /* Removido o box-shadow para simplificar visualmente */
}

.uso_item h3,
.restricao_item h3 {
    color: #ff7f00;
    margin-top: 0;
}

/* Parágrafos */
.uso_item p,
.restricao_item p {
    margin-top: 10px;
}

/* Footer */
.footer_usos {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 20px 0;
}

.footer_usos a {
    color: #ff7f00;
    text-decoration: none;
}

.footer_usos a:hover {
    text-decoration: underline;
}

/* Responsividade */
@media (min-width: 768px) {
    .uso_item,
    .restricao_item {
        /* Ajuste no padding para melhor distribuição do conteúdo */
        padding: 30px;
    }
}

/* Estilos para a página de perigos */
.container_perigos {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    background-color: #f8f8f8;
}

.header_perigos {
    background-color: #ff7f00;
    color: white;
    padding: 20px;
    text-align: center;
    margin-bottom: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.intro_perigos {
    background-color: #fff;
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.perigos_saude, .perigos_ambientais, .simbolos_ghs {
    margin-bottom: 30px;
}

.perigos_saude h2, .perigos_ambientais h2, .simbolos_ghs h2 {
    color: #ff7f00;
    border-bottom: 2px solid #ff7f00;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.perigo_item {
    background-color: #fff;
    border-left: 5px solid #ff7f00;
    padding: 15px;
    margin-bottom: 15px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.perigo_item:hover {
    transform: translateY(-5px);
}

.perigo_item img {
    width: 60px;
    height: 60px;
    margin-right: 20px;
}

.perigo_info {
    flex: 1;
}

.perigo_item h3 {
    color: #ff7f00;
    margin-bottom: 10px;
}

.ghs_container {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.ghs_container img {
    width: 80px;
    height: 80px;
}

.footer_perigos {
    background-color: #ff7f00;
    color: white;
    padding: 15px;
    text-align: center;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}



/* Estilos para a página de prevenção */
.container_prevencao {
    max-width: 800px;
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f4f4f4;
    margin: 0;
    padding: 0;
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

header {
    background-color: #ff7f00;
    color: white;
    padding: 10px;
    text-align: center;
}

h1, h2, h3 {
    margin: 0;
}

section {
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.usos {
    background-color: var(--cor-usos);
}

.perigos {
    background-color: var(--cor-perigos);
}

.prevencao {
    background-color: var(--cor-prevencao);
}

.primeiros-socorros, .combate-incendios, .manuseio-armazenamento, .controle-exposicao, .eliminacao-residuos, .transporte {
    background-color: var(--cor-primeiros-socorros);
}

.primeiros-socorros-icons, .combate-incendios-icons {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

footer {
    background-color: #dcdcdc;
    color: #333;
    text-align: center;
    padding: 10px;
    font-size: 0.8em;
}

/* Adicione isso ao seu arquivo CSS existente */
section a {
    text-decoration: none;
    color: inherit;
    display: block;
}

section:hover {
    background-color: #f0f0f0;
    cursor: pointer;
}

.qr-code {
    text-align: right;
    margin-top: 10px;
}

.qr-code img {
    width: 50px;
    height: 50px;
}

.perigo-grid {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    margin-top: 20px;
}

.perigo-item {
    text-align: center;
    width: 22%; /* Ajuste conforme necessário */
    margin-bottom: 15px;
}

.perigo-item img {
    width: 50px;
    height: 50px;
    margin-bottom: 5px;
}

.perigo-item p {
    font-size: 0.8em;
    margin: 0;
}

#printButton {
    display: block;
    margin: 20px auto;
    padding: 10px 20px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

#printButton:hover {
    background-color: #45a049;
}




/* Adicione isso ao seu arquivo CSS existente */
section a {
    text-decoration: none;
    color: inherit;
    display: block;
}

section:hover {
    background-color: #f0f0f0;
    cursor: pointer;
}

.qr-code {
    text-align: right;
    margin-top: 10px;
}

.qr-code img {
    width: 50px;
    height: 50px;
}

.perigo-grid {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    margin-top: 20px;
}

.perigo-item {
    text-align: center;
    width: 22%; /* Ajuste conforme necessário */
    margin-bottom: 15px;
}

.perigo-item img {
    width: 50px;
    height: 50px;
    margin-bottom: 5px;
}

.perigo-item p {
    font-size: 0.8em;
    margin: 0;
}

#printButton {
    display: block;
    margin: 20px auto;
    padding: 10px 20px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

#printButton:hover {
    background-color: #45a049;
}



/* Cores base */
:root {
    --cor-usos: #e6f3ff;
    --cor-perigos: #ffe6e6;
    --cor-prevencao: #e6ffe6;
    --cor-primeiros-socorros: #fff0e6;
    --cor-combate-incendios: #ffcccc;
    --cor-manuseio-armazenamento: #e6e6ff;
    --cor-controle-exposicao: #ffffe6;
    --cor-eliminacao-residuos: #e6fff0;
    --cor-transporte: #f0e6ff;
}

/* Estilos para as seções */
.usos {
    background-color: var(--cor-usos);
}

.perigos {
    background-color: var(--cor-perigos);
}

.prevencao {
    background-color: var(--cor-prevencao);
}

.primeiros-socorros {
    background-color: var(--cor-primeiros-socorros);
}

.combate-incendios {
    background-color: var(--cor-combate-incendios);
}

.manuseio-armazenamento {
    background-color: var(--cor-manuseio-armazenamento);
}

.controle-exposicao {
    background-color: var(--cor-controle-exposicao);
}

.eliminacao-residuos {
    background-color: var(--cor-eliminacao-residuos);
}

.transporte {
    background-color: var(--cor-transporte);
}

/* Estilos gerais para as seções */
section {
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

section h3 {
    color: #333;
    margin-bottom: 10px;
}

.epi-icons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px; /* Espaço entre os ícones */
    margin-top: 15px;
}

.epi-icon2 {
    width: 80px; /* Largura fixa para todos os ícones */
    height: 80px; /* Altura fixa para todos os ícones */
    object-fit: contain; /* Mantém a proporção da imagem */
}



/* Header */
.header_usos {
    background-color: #ff7f00;
    color: white;
    padding: 20px 0;
    text-align: center;
}

.header_usos h1 {
    margin: 0;
}

/* Introdução */
.intro_usos {
    margin: 30px 0;
    font-style: italic;
}

/* Seções */
.usos-identificados,
.restricoes_usos,
.tendencias_usos {
    margin-bottom: 40px;
}

.usos-identificados h2,
.restricoes_usos h2,
.tendencias_usos h2 {
    color: #ff7f00;
    border-bottom: 2px solid #ff7f00;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

/* Artigos */
.uso_item,
.restricao_item {
    margin-bottom: 30px;
    padding: 20px;
    background-color: #fff;
    border-radius: 5px;
    /* Removido o box-shadow para simplificar visualmente */
}

.uso_item h3,
.restricao_item h3 {
    color: #ff7f00;
    margin-top: 0;
}

/* Parágrafos */
.uso_item p,
.restricao_item p {
    margin-top: 10px;
}

/* Footer */
.footer_usos {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 20px 0;
}

.footer_usos a {
    color: #ff7f00;
    text-decoration: none;
}

.footer_usos a:hover {
    text-decoration: underline;
}

/* Responsividade */
@media (min-width: 768px) {
    .uso_item,
    .restricao_item {
        /* Ajuste no padding para melhor distribuição do conteúdo */
        padding: 30px;
    }
}

/* Estilos para a página de perigos */
.container_perigos {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    background-color: #f8f8f8;
}

.header_perigos {
    background-color: #ff7f00;
    color: white;
    padding: 20px;
    text-align: center;
    margin-bottom: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.intro_perigos {
    background-color: #fff;
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.perigos_saude, .perigos_ambientais, .simbolos_ghs {
    margin-bottom: 30px;
}

.perigos_saude h2, .perigos_ambientais h2, .simbolos_ghs h2 {
    color: #ff7f00;
    border-bottom: 2px solid #ff7f00;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.perigo_item {
    background-color: #fff;
    border-left: 5px solid #ff7f00;
    padding: 15px;
    margin-bottom: 15px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.perigo_item:hover {
    transform: translateY(-5px);
}

.perigo_item img {
    width: 60px;
    height: 60px;
    margin-right: 20px;
}

.perigo_info {
    flex: 1;
}

.perigo_item h3 {
    color: #ff7f00;
    margin-bottom: 10px;
}

.ghs_container {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.ghs_container img {
    width: 80px;
    height: 80px;
}

.footer_perigos {
    background-color: #ff7f00;
    color: white;
    padding: 15px;
    text-align: center;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}



/* Estilos para a página de prevenção */
.container_prevencao {
    max-width: 800px;
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f4f4f4;
    margin: 0;
    padding: 0;
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

header {
    background-color: #ff7f00;
    color: white;
    padding: 10px;
    text-align: center;
}

h1, h2, h3 {
    margin: 0;
}

section {
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.usos {
    background-color: var(--cor-usos);
}

.perigos {
    background-color: var(--cor-perigos);
}

.prevencao {
    background-color: var(--cor-prevencao);
}

.primeiros-socorros, .combate-incendios, .manuseio-armazenamento, .controle-exposicao, .eliminacao-residuos, .transporte {
    background-color: var(--cor-primeiros-socorros);
}

.primeiros-socorros-icons, .combate-incendios-icons {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

footer {
    background-color: #dcdcdc;
    color: #333;
    text-align: center;
    padding: 10px;
    font-size: 0.8em;
}

/* Adicione isso ao seu arquivo CSS existente */
section a {
    text-decoration: none;
    color: inherit;
    display: block;
}

section:hover {
    background-color: #f0f0f0;
    cursor: pointer;
}

.qr-code {
    text-align: right;
    margin-top: 10px;
}

.qr-code img {
    width: 50px;
    height: 50px;
}

.perigo-grid {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    margin-top: 20px;
}

.perigo-item {
    text-align: center;
    width: 22%; /* Ajuste conforme necessário */
    margin-bottom: 15px;
}

.perigo-item img {
    width: 50px;
    height: 50px;
    margin-bottom: 5px;
}

.perigo-item p {
    font-size: 0.8em;
    margin: 0;
}

#printButton {
    display: block;
    margin: 20px auto;
    padding: 10px 20px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

#printButton:hover {
    background-color: #45a049;
}



/* Cores base */
:root {
    --cor-usos: #e6f3ff;
    --cor-perigos: #ffe6e6;
    --cor-prevencao: #e6ffe6;
    --cor-primeiros-socorros: #fff0e6;
    --cor-combate-incendios: #ffcccc;
    --cor-manuseio-armazenamento: #e6e6ff;
    --cor-controle-exposicao: #ffffe6;
    --cor-eliminacao-residuos: #e6fff0;
    --cor-transporte: #f0e6ff;
}



/* Estilos para a página de perigos */
.container_perigos {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    background-color: #f8f8f8;
}

.header_perigos {
    background-color: #ff7f00;
    color: white;
    padding: 20px;
    text-align: center;
    margin-bottom: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.intro_perigos {
    background-color: #fff;
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.perigos_saude, .perigos_ambientais, .simbolos_ghs {
    margin-bottom: 30px;
}

.perigos_saude h2, .perigos_ambientais h2, .simbolos_ghs h2 {
    color: #ff7f00;
    border-bottom: 2px solid #ff7f00;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.perigo_item {
    background-color: #fff;
    border-left: 5px solid #ff7f00;
    padding: 15px;
    margin-bottom: 15px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.perigo_item:hover {
    transform: translateY(-5px);
}

.perigo_item img {
    width: 60px;
    height: 60px;
    margin-right: 20px;
}

.perigo_info {
    flex: 1;
}

.perigo_item h3 {
    color: #ff7f00;
    margin-bottom: 10px;
}

.ghs_container {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.ghs_container img {
    width: 80px;
    height: 80px;
}

.footer_perigos {
    background-color: #ff7f00;
    color: white;
    padding: 15px;
    text-align: center;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}


/* Estilos para a página de prevenção */
.container_prevencao {
    max-width: 800px;
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f4f4f4;
    margin: 0;
    padding: 0;
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

header {
    background-color: #ff7f00;
    color: white;
    padding: 10px;
    text-align: center;
}

h1, h2, h3 {
    margin: 0;
}

section {
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.usos {
    background-color: var(--cor-usos);
}

.perigos {
    background-color: var(--cor-perigos);
}

.prevencao {
    background-color: var(--cor-prevencao);
}

.primeiros-socorros, .combate-incendios, .manuseio-armazenamento, .controle-exposicao, .eliminacao-residuos, .transporte {
    background-color: var(--cor-primeiros-socorros);
}

.primeiros-socorros-icons, .combate-incendios-icons {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

footer {
    background-color: #dcdcdc;
    color: #333;
    text-align: center;
    padding: 10px;
    font-size: 0.8em;
}

/* Adicione isso ao seu arquivo CSS existente */
section a {
    text-decoration: none;
    color: inherit;
    display: block;
}

section:hover {
    background-color: #f0f0f0;
    cursor: pointer;
}

.qr-code {
    text-align: right;
    margin-top: 10px;
}

.qr-code img {
    width: 50px;
    height: 50px;
}

.perigo-grid {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    margin-top: 20px;
}

.perigo-item {
    text-align: center;
    width: 22%; /* Ajuste conforme necessário */
    margin-bottom: 15px;
}

.perigo-item img {
    width: 50px;
    height: 50px;
    margin-bottom: 5px;
}

.perigo-item p {
    font-size: 0.8em;
    margin: 0;
}

#printButton {
    display: block;
    margin: 20px auto;
    padding: 10px 20px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

#printButton:hover {
    background-color: #45a049;
}



/* Cores base */
:root {
    --cor-usos: #e6f3ff;
    --cor-perigos: #ffe6e6;
    --cor-prevencao: #e6ffe6;
    --cor-primeiros-socorros: #fff0e6;
    --cor-combate-incendios: #ffcccc;
    --cor-manuseio-armazenamento: #e6e6ff;
    --cor-controle-exposicao: #ffffe6;
    --cor-eliminacao-residuos: #e6fff0;
    --cor-transporte: #f0e6ff;
}



/* Estilos para a página de prevenção */
.container_prevencao {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    background-color: #f0f8ff; /* Azul claro para um tema de segurança */
}

.header_prevencao {
    background-color: #4682b4; /* Azul aço */
    color: white;
    padding: 20px;
    text-align: center;
    margin-bottom: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.intro_prevencao {
    background-color: #fff;
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.epi_section, .medidas_adicionais {
    margin-bottom: 30px;
}

.epi_section h2, .medidas_adicionais h2 {
    color: #4682b4;
    border-bottom: 2px solid #4682b4;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.epi_item {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.epi_icon {
    width: 20px;  /* Ajuste este valor conforme necessário */
    height: auto;
    margin-right: 20px;
}

.epi_info {
    flex: 1;
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

header {
    background-color: #ff7f00;
    color: white;
    padding: 10px;
    text-align: center;
}

h1, h2, h3 {
    margin: 0;
}

section {
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.usos {
    background-color: var(--cor-usos);
}

.perigos {
    background-color: var(--cor-perigos);
}

.prevencao {
    background-color: var(--cor-prevencao);
}

.primeiros-socorros, .combate-incendios, .manuseio-armazenamento, .controle-exposicao, .eliminacao-residuos, .transporte {
    background-color: var(--cor-primeiros-socorros);
}

.primeiros-socorros-icons, .combate-incendios-icons {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

footer {
    background-color: #dcdcdc;
    color: #333;
    text-align: center;
    padding: 10px;
    font-size: 0.8em;
}

/* Adicione isso ao seu arquivo CSS existente */
section a {
    text-decoration: none;
    color: inherit;
    display: block;
}

section:hover {
    background-color: #f0f0f0;
    cursor: pointer;
}

.qr-code {
    text-align: right;
    margin-top: 10px;
}

.qr-code img {
    width: 50px;
    height: 50px;
}

.perigo-grid {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    margin-top: 20px;
}

.perigo-item {
    text-align: center;
    width: 22%; /* Ajuste conforme necessário */
    margin-bottom: 15px;
}

.perigo-item img {
    width: 50px;
    height: 50px;
    margin-bottom: 5px;
}

.perigo-item p {
    font-size: 0.8em;
    margin: 0;
}

#printButton {
    display: block;
    margin: 20px auto;
    padding: 10px 20px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

#printButton:hover {
    background-color: #45a049;
}



/* Cores base */
:root {
    --cor-usos: #e6f3ff;
    --cor-perigos: #ffe6e6;
    --cor-prevencao: #e6ffe6;
    --cor-primeiros-socorros: #fff0e6;
    --cor-combate-incendios: #ffcccc;
    --cor-manuseio-armazenamento: #e6e6ff;
    --cor-controle-exposicao: #ffffe6;
    --cor-eliminacao-residuos: #e6fff0;
    --cor-transporte: #f0e6ff;
}





/* Estilos para a página de manuseio e armazenamento */
.container_manuseio {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    background-color: #f0f8ff; /* Azul claro para um tema de segurança */
}

.header_manuseio {
    background-color: #4169e1; /* Azul real */
    color: white;
    padding: 20px;
    text-align: center;
    margin-bottom: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.intro_manuseio {
    background-color: #fff;
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.precaucoes_manuseio, .armazenamento, .incompatibilidades {
    margin-bottom: 30px;
}

.precaucoes_manuseio h2, .armazenamento h2, .incompatibilidades h2 {
    color: #4169e1;
    border-bottom: 2px solid #4169e1;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.precaucao_item, .armazenamento_item, .incompatibilidade_item {
    background-color: #fff;
    border-left: 5px solid #4169e1;
    padding: 15px;
    margin-bottom: 15px;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.precaucao_item:hover, .armazenamento_item:hover, .incompatibilidade_item:hover {
    transform: translateY(-5px);
}

.precaucao_item h3, .armazenamento_item h3, .incompatibilidade_item h3 {
    color: #4169e1;
    margin-bottom: 10px;
}

.footer_manuseio {
    background-color: #4169e1;
    color: white;
    padding: 15px;
    text-align: center;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.voltar-container {
    text-align: center;
    margin: 20px 0;
}

.botao-voltar {
    display: inline-block;
    padding: 10px 20px;
    background-color: #4CAF50;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.botao-voltar:hover {
    background-color: #45a049;
}

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f4f4f4;
    margin: 0;
    padding: 20px;
}

h1, h2 {
    color: #2c3e50;
    text-align: center;
}

form {
    background-color: #fff;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    max-width: 500px;
    margin: 0 auto;
}

label {
    display: block;
    margin-top: 10px;
}

input, select {
    width: 100%;
    padding: 8px;
    margin-top: 5px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

button {
    background-color: #3498db;
    color: #fff;
    padding: 10px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 10px;
}

button:hover {
    background-color: #2980b9;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

th, td {
    padding: 10px;
    border: 1px solid #ddd;
    text-align: left;
}

th {
    background-color: #3498db;
    color: #fff;
}

a {
    display: inline-block;
    margin-top: 20px;
    color: #3498db;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}