﻿:root {
    --ag-header-background-color: #f7fbff;
    --headings-h2: 300 36px "Fira Sans", Helvetica;
    --headings-h4: 500 24px "Fira Sans", Helvetica;
    --button-md: 500 15px "Fira Sans", Helvetica;
    --subtitle1: 500 18px "Fira Sans", Helvetica;
    --subtitle2: 500 14px "Fira Sans", Helvetica;
    --overline2: 400 12px "Fira Sans", Helvetica;
    --overline3: 500 10px "Fira Sans", Helvetica;
    --body1: 400 16px "Fira Sans", Helvetica;
    --valorAgregFont: 400 20px "Fira Sans", Helvetica;
    --unidadeMedidaAgregFont: 400 16px "Fira Sans", Helvetica;
    --paddingHorizontal: 32px;
    --paddingVertical: 8px;
    --paddingPadrao: 8px 32px;
    --fontColorDestaque: #3A569C;
    --backgroundTooltip: #252526;
}

.menudefault {
    display: flex;
    flex-wrap: nowrap;
    list-style: none;
    margin: unset;
    padding-left: unset;
}

.footer-sig {
    margin-top: 0px;
}

#body {
    height: auto;
    background-color: var(--fundopadrao);
}

.footer-sig {
    margin-top: 0px;
    position: relative;
}

p {
    margin: 0px !important;
}

.row {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: 0px;
    margin-right: 0px;
}

@media (max-width: 978px) {
    html {
        overflow-x: clip;
    }

    p,
    label {
        font-size: 14px !important;
    }

    .filtros {
        position: fixed !important;
        width: 100%;
        z-index: 20;
    }
}

.titulo {
    color: var(--primarycolor);
    font-size: 28px;
    font-style: normal;
    line-height: normal;
    margin-top: 0px;
    margin-bottom: 0px;
}

.subtitulo {
    color: var(--on_container-grayscale-default, #252526);
    font-family: "Fira Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 115%;
    /* 16.1px */
}

.header {
    display: flex;
    justify-content: space-between;
    padding: 112px 40px 16px;
    align-items: center;
    align-self: stretch;
    border-bottom: 1px solid var(--border-neutral, #E5E5E6);
}

@media (max-width: 978px) {
    .header {
        padding: 15vh 40px 16px;
    }
}

.btn-row, .toggle-menu-filtrar {
    background-color: transparent;
    border: none;
    padding: 0;
}
    .btn-row:focus-visible, .toggle-menu-filtrar:focus-visible {
        border: 1px solid;
        border-radius: 8px;
        padding: 2px;
    }
#btnFerramenta svg path {
    stroke: var(--titlefundoclaro);
}
.btn-row:not(#btnFerramenta) svg path, .link-row svg path {
    fill: var(--titlefundoclaro);
}
    .btn-row span, .link-row span{
        color: var(--titlefundoclaro);
    }
    .toggle-menu-filtrar svg path{
        fill: var(--primarycolor) !important;
    }
    .toggle-menu-filtrar p{
        color: var(--primarycolor) !important;
    }
    .link-row:hover, .link-row:visited, .link-row:focus {
        text-decoration: none !important;
        outline: unset !important;
        color: unset !important;
    }
.link-row:focus-visible {
    border: 1px solid black;
    border-radius: 8px;
}

.filtros {
    position: relative;
    overflow-y: auto;
    background-color: var(--fundopadrao);
    border-top: 1px solid var(--border-neutral, #E5E5E6);
    border-right: 1px solid var(--border-neutral, #E5E5E6);
    padding: 8px 24px;
}

#agregacao-projetos {
    display: flex;
    flex-direction: column;
    height: fit-content;
    margin: var(--paddingPadrao);
    padding: 8px;
    border-radius: 8px;
    row-gap: 5px;
    background: var(--gradienteagregaproj);
}

#agregacao-projetos-mobile {
    display: none;
}

.conteudo-agregacao-collapsed {
    height: 60px !important;
}

.conteudo-agregacao-collapsed > grupo-agregado {
    display: none;
}
#agregacao-projetos grupo-agregado {
    color: var(--fonteagregacao);
}

@media (max-width: 453px) {
    .conteudo-agregacao-collapsed {
        flex: 1;
        max-height: 72px !important;
    }
}

#conteudo-principal-agregacao {
    max-height: fit-content;
    gap: 8px;
}

    #conteudo-principal-agregacao > .info-agregada > .info-item-agreg > .info-agregada-label {
        color: var(--fontColorDestaque);
        font: var(--overline3);
    }

    #conteudo-principal-agregacao > .info-agregada > .info-item-agreg > .info-agregada-conteudo {
        font: var(--valorAgregFont);
        color: var(--textofundoclaro);
    }

        #conteudo-principal-agregacao > .info-agregada > .info-item-agreg > .info-agregada-conteudo > .info-agregada-unidade {
            font: var(--unidadeMedidaAgregFont);
            color: var(--textofundoclaro);
        }
    #conteudo-principal-agregacao > .info-agregada > .info-item-agreg svg path {
        fill: var(--fontColorDestaque);
    }
    .conteudo-agregacao {
        display: flex;
        align-items: center;
        max-height: 32px;
        flex: 1;
    }

/* "Titulo" */
#projetos-aviso {
    display: flex;
    flex: 1.2;
    font: var(--subtitle2);
    color: var(--fontColorDestaque);
}
.alerta-dep-alt path {
    stroke: var(--coloriconaviso);
}
.transporte-nome {
    display: flex;
    align-items: center;
    font: var(--subtitle2);
    flex: 1.2;
    gap: 5px;
}

/* Conteudo */
.info-agregada {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr 0.8fr 1.2fr;
    flex: 5;
    gap: 8px;
}

.info-item-agreg {
    display: flex;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
}

.info-agregada-conteudo {
    font: var(--unidadeMedidaAgregFont);
    color: var(--textofundoclaro);
}

#seta-expandir-agregacao {
    display: flex;
    justify-content: center;
    align-items: center;
    width: clamp(30px, 3vw, 50px);
    height: clamp(30px, 3vw, 50px);
    cursor: pointer;
}

    #seta-expandir-agregacao:focus-visible {
        border: 1px solid var(--fontColorDestaque);
    }
    #seta-expandir-agregacao svg path {
        fill: var(--fontColorDestaque);
    }
    .separador {
        display: flex;
        justify-content: center;
        align-items: center;
        width: clamp(30px, 3vw, 50px);
        height: clamp(30px, 3vw, 50px);
    }

#comparar-projetos {
    width: 212px;
}

#abas {
    display: flex;
    height: 48px;
    gap: 10px;
    padding: 0 var(--paddingHorizontal);
    background-color: var(--ag-header-background-color);
}

#visualizacao-ativa {
    font-weight: 500 !important;
    font: var(--button-md);
    margin: auto;
}

.bt-alternar-visualizacao {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    cursor: pointer;
}
    .bt-alternar-visualizacao:focus-visible {
        border: 1px solid var(--primarycolor);
        border-radius: 8px;
        padding: 3px;
    }

    .bt-alternar-visualizacao > span {
        font: var(--overline2);
    }

.circulo {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 30px;
    width: 30px;
    background-color: var(--fundopadrao);
    border: 1px solid #E5E5E6;
    border-radius: 100%;
    padding: 4px;
}

    .circulo:hover {
        background-color: #F0F0F1 !important;
        border-color: #D2D2D4 !important;
    }

    .circulo:active {
        background-color: #D2D2D4 !important;
    }

#navegacao {
    display: flex;
    justify-content: space-between;
    flex: 1;
}

    #navegacao svg path {
        fill: var(--fontcolorspan);
    }

    #seletor-visualizacao {
        display: none;
        flex: 1;
        flex-direction: column;
        align-items: end;
    }

.tabela {
    display: flex;
    flex-direction: column;
    max-width: 100vw;
    border-top: 1px solid var(--border-neutral, #E5E5E6);
    border-left: 1px solid var(--border-neutral, #E5E5E6);
}

.filtros-aplicados {
    display: none;
    justify-content: space-between;
    align-items: center;
    padding: 8px 24px;
    min-height: 56px;
    height: auto;
}

#alerta-cadeias {
    display: flex;
    align-items: center;
    margin: 24px 16px;
    padding: 0 24px;
    gap: 12px;
}

#alerta-cadeias > span {
    font-family: 'Fira Sans', sans-serif;
    font-weight: 500;
    font-size: 12px;
    flex: 1;
}

#cadeias-produtivas {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.container-conjunto-dados {
    margin: 24px 16px;
    padding: 16px 24px;
    border-radius: 8px;
    border: 1px solid var(--border-neutral, #E5E5E6);
}

.container-conjunto-dados h4 {
    font: var(--headings-h4) !important;
    margin-bottom: 24px;
}

.container-conjunto-dados > section {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    row-gap: 24px;
}

.container-conjunto-dados > section > .bloco-info {
    display: grid;
    grid-template-columns: 1fr 2fr;
    align-items: center;
    gap: 12px;
}

.container-conjunto-dados > section > .bloco-info {
    & > img {
        justify-self: end;
        width:62px;
        height:62px;
    }

    & > .dados-container {
        display: flex;
        flex-direction: column;
    }

    & > .dados-container {
        & > .valor-dado {
            font: var(--headings-h2) !important;
            margin: unset;
        }

        & > .label-dado {
            font: var(--subtitle1) !important;
        }
    }
}

/* Estilo barra de filtros transporte e região */
@media (max-width: 930px) {
    #divHeader {
        position: absolute !important;
        top: unset !important;
        width: 40% !important;
    }

    #head-idioma {
        -ms-flex-direction: column;
        -webkit-flex-direction: column;
        flex-direction: column;
    }

    .header .subtitulo {
        display: none !important;
    }

    .box-dropdown-filtros {
        width: 90% !important;
    }

    .barra-filtros {
        grid-template-columns: 1fr !important;
    }

    .barra-buscas {
        padding: 4px 24px !important;
    }

    .toggle-menu-filtrar {
        display: none !important;
    }

    #filtrar-projetos {
        all: unset;
        display: flex !important;
        padding: 8px 12px;
        align-items: center;
        gap: 5px;
        cursor: pointer;
    }

    #filtrar-projetos > span {
        color: var(--tokens-container-primary-default);
        font-weight: 600 !important;
        font-size: 15px;
    }

    .filtro-busca {
        min-width: 100% !important;
    }

    .conteudo {
        height: auto;
        grid-template-columns: 1fr !important;
    }

    #comparar-projetos {
        width: 220px;
    }

    .botoes-menu-mobile {
        display: flex !important;
        gap: 10px;
        position: sticky;
        bottom: 0;
        background-color: var(--fundopadrao);
        padding: 10px 0px;
        justify-content: end;
    }
}

.conteudo {
    display: grid;
    grid-template-columns: 20% 80%;
}

.botoes-menu-mobile {
    display: none;
}

.barra-filtros {
    display: grid;
    grid-template-columns: 20% 80%;
}

.barra-buscas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 15px;
    padding: 4px 40px 4px 24px;
    min-height: 56px;
}

.toggle-menu-filtrar {
    display: flex;
    margin: 0px 24px 0px 40px;
    align-items: center;
    gap: 4px;
    height: 56px;
    cursor: pointer;
}

#ocultar-lista-filtros {
    border-radius: 8px !important;
}

.busca-filtros {
    display: flex;
    align-items: center;
}

    .busca-filtros > .campo-busca {
        display: flex;
        flex: 1;
        max-height: 36px;
        padding: 8px 12px;
        align-items: center;
        gap: 8px;
        border-radius: 64px;
        border: 1px solid #E5E5E6;
    }

        .busca-filtros > .campo-busca input {
            font-size: 16px;
            border: none;
            background: none;
            flex: 1;
        }

.campo-busca {
    background-color: var(--fundopadrao);
}

    .campo-busca > select {
        font-size: 16px;
        border: none;
        background: none;
        flex: 1;
        color: #474748;
        background-color: var(--fundopadrao);
        font-weight: 400;
    }

.filtro-busca {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    min-width: 290px;
}

.busca-regioes {
    border-radius: 64px;
    border: 1px solid rgba(229, 229, 230, 1);
    background-color: #fff;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #474748;
    font-weight: 400;
    width: 100%;
    padding: 8px 12px;
    flex-flow: wrap;
    overflow: auto;
}
    .busca-regioes:focus-visible, .campo-busca:has(input:focus-visible) {
        outline: 1px solid var(--primarycolor);
        outline-offset: 2px;
        background-color: #F7F7F8;
    }

.campo-busca {
    display: flex;
    flex: 1;
    width: 100%;
    height: 100%;
    padding: 8px 12px;
    align-items: center;
    gap: 8px;
    border-radius: 64px;
    border: 1px solid #E5E5E6;
}

    .campo-busca input {
        font-size: 16px;
        border: none;
        background: none;
        flex: 1;
    }

.user-avatar {
    aspect-ratio: 1;
    object-position: center;
    width: 24px;
}

.locations-wrapper {
    display: flex;
    gap: 8px;
    flex: 1;
    overflow: auto;
}

.location-tag {
    white-space: nowrap;
    justify-content: center;
    border-radius: 64px;
    border: 1px solid rgba(229, 229, 230, 1);
    background-color: #fff;
    display: flex;
    gap: 4px;
    padding: 4px 8px;
}

.location-name {
    font-family: "Fira Sans", sans-serif;
    justify-content: center;
}

.rm-icone-remover {
    aspect-ratio: 1;
    object-position: center;
    width: 16px;
    cursor: pointer;
}
    .rm-icone-remover:focus-visible {
        border: 1px solid black;
    }

.more-locations {
    justify-content: center;
    border-radius: 64px;
    border: 1px solid rgba(229, 229, 230, 1);
    background-color: #fff;
    display: flex;
    flex-direction: column;
    white-space: nowrap;
    padding: 4px 8px;
}

.more-count {
    font-family: "Fira Sans", sans-serif;
    justify-content: center;
}

.chevron-icon {
    aspect-ratio: 1;
    object-position: center;
    width: 20px;
    margin: auto 0;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.dropdown-filtros {
    padding-left: 0px;
    margin: 0;
}

.box-dropdown-filtros {
    display: none;
    margin-top: 50px;
    position: absolute;
    z-index: 10;
    width: 43vw;
    background: var(--fundopadrao);
    border-radius: 10px;
    border: 1px #ddd solid;
    max-height: 450px;
    min-height: 250px;
    padding-bottom: 50px;
    height: 55vh;
}

.box-dropdown-filtros>div {
    position: static;
    width: 100%;
    max-height: 400px;
    min-height: 250px;
    height: auto;
    display: grid;
    padding: 10px;
    overflow-y: auto;
}

.botao-verde {
    z-index: 10;
    background-color: #fff;
    color: #008943;
    position: absolute;
    justify-self: flex-end;
    bottom: 10px;
    right: 10px;
    padding: 4px 12px;
    border: solid 1px #008943;
    border-radius: 4px;
    font-size: 15px;
    font-style: normal;
    font-weight: 600;
}

.botao-verde:hover {
    background-color: #008943;
    color: #fff;
}
    .botao-verde:focus-visible {
        background-color: #C0E5CB;
    }

.botao-filled {
    z-index: 5;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    align-items: center;
    min-width: 120px;
    width: fit-content;
    background-color: #008943;
    padding: 8px 12px;
    gap: 5px;
    color: #fff;
    border: 1px solid rgba(0, 138, 67, 1);
    border-radius: 4px;
    font-size: 15px;
    font-style: normal;
    font-weight: 600;
}

.botao-filled:hover {
    background-color: #005A24;
}

    .botao-filled:focus {
        background-color: #002E16
    }

.botao-outlined {
    all: unset;
    border: 1px solid rgba(0, 138, 67, 1);
    border-radius: 4px;
    padding: 8px 12px;
    gap: 5px;
    position: relative;
    width: fit-content;
    display: flex;
    align-items: center;
    color: var(--tokens-container-primary-default);
    white-space: nowrap;
    cursor: pointer;
    font-size: 15px;
    font-style: normal;
    font-weight: 600;
}

    .botao-outlined:hover {
        background-color: #c0e5cb;
    }

    .botao-outlined:focus {
        color: var(--on_container-primary-default, #008A43);
        background: var(--container-selected-pressed, #98D4AA);
    }

.botao-texto {
    all: unset;
    display: flex;
    align-items: center;
    gap: 5px;
    height: 100%;
    width: fit-content;
    color: var(--tokens-container-primary-default);
    font-size: 15px;
    font-style: normal;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

    .botao-texto:focus {
        color: var(--on_container-primary-default, #008A43);
        background: var(--container-selected-pressed, #98D4AA);
    }

    .botao-texto.disabled {
        color: #A4A4A5;
    }

    .botao-texto.disabled > svg > path {
        fill: #A4A4A5;
    }
    .botao-texto > svg > path {
        fill: var(--tokens-container-primary-default);
    }
.botoes-footer-popup {
    display: flex;
    gap: 10px;
}
/* Estilo tabela */
@media (max-width: 768px) {
    #myGrid {
        width: 100vw;
    }

    .ag-theme-quartz {
        --ag-grid-size: 3px;
        /* very compact */
        --ag-header-height: calc(var(--ag-font-size) + var(--ag-grid-size) * 1);
        --ag-row-height: calc(var(--ag-font-size) + var(--ag-grid-size) * 1);
    }
}

.ag-theme-quartz {
    --ag-cell-horizontal-padding: 9px;
    --ag-border-width: 0px;
    --ag-wrapper-border-radius: 0px;
    --ag-header-background-color: #f7fbff;
    --ag-active-color: #008a43;
    --ag-accent-color: #008a43 !important;
    --ag-data-color: #666667;
    --ag-row-hover-color: #edf8f0;
    --ag-selected-row-background-color: #edf8f0;
    --ag-checkbox-indeterminate-color: var(--ag-checkbox-checked-color);
    --ag-font-family: "Fira Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

:where(.ag-theme-params-1) {
    --ag-row-height: calc(max( var(--ag-icon-size), var(--ag-data-font-size) ) + var(--ag-spacing) * 1.25 * var(--ag-row-vertical-padding-scale)) !important;
}

.ag-header {
    border-bottom: #f7f7f8;
}

div:not(.primeira-coluna-header) > div > div > .ag-header-cell-label {
    -webkit-justify-content: center;
    justify-content: center;
    text-align: center;
}

.ag-theme-quartz .ag-header-row {
    color: var(--ag-data-color);
    font-size: 12px;
    font-weight: 400;
}

.ag-row {
    border-bottom: solid 1px #f7f7f8;
}

.ag-row-hover {
    border-bottom: solid 1px #c0e5cb;
}

.ag-row-selected {
    color: #666667 !important;
    border-bottom: solid 1px #c0e5cb;
    font-weight: 500;
}

.ag-column-first {
    width: 60px !important;
    padding: 0 8px 0 var(--paddingHorizontal) !important;
}

.primeira-coluna-header {
    border-right: 1px solid #E5E5E6;
}

.primeira-coluna {
    border-right: 1px solid #f7f7f8;
    color: #252526;
}

.celulaPrimeiraColuna {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .celulaPrimeiraColuna span:focus-visible {
        text-decoration: underline;
    } 

.botaoPrimeiraColuna {
    display: flex;
    justify-content: center;
    align-items: center;
    background: white;
    border: 1px solid #E5E5E6;
    border-radius: 4px;
    min-width: 24px;
    width: 24px;
    min-height: 24px;
    height: 24px;
}

    .botaoPrimeiraColuna:focus-visible {
        border: 2px solid black;
    }

    .botaoPrimeiraColuna > .icone-alternativo > path {
        fill: #A4A4A5;
    }

    .botaoPrimeiraColuna > .icone-dependente > path {
        stroke: #A4A4A5;
    }

.botaoPrimeiraColuna:hover {
    background: #F0F0F1;
    border-color: #D2D2D4;
}

.ag-row-hover > .primeira-coluna,
.ag-row-selected > .primeira-coluna {
    border-right: 1px solid #6cc489 !important;
    color: #005A24 !important;
    font-weight: 600 !important;
}

.ag-row-selected > .primeira-coluna > div > span > span > .celulaPrimeiraColuna > .botaoPrimeiraColuna > .icone-dependente > path,
.ag-row-selected > .primeira-coluna > div > span > span > .celulaPrimeiraColuna > .botaoPrimeiraColuna > .icone-alternativo > path {
    stroke: #005A24 !important;
}

:root {
    --color-red: #A80000;
    --background-red: #ffeceb;
    --border-red: #eebbbb;
    --border-red-light: #fdccca;
}

/* Projeto com conflito */
.ag-theme-quartz .ag-row:has(.conflito) {
    --ag-row-hover-color: var(--background-red) !important;
    --ag-row-background-color: var(--background-red) !important;
    --ag-selected-row-background-color: var(--background-red) !important;
    --ag-checkbox-checked-background-color: var(--color-red) !important;
    --ag-checkbox-checked-border-color: var(--color-red) !important;
}

.ag-row:has(.conflito) {
    border-bottom: solid 1px var(--border-red-light);
}

.ag-row-hover:has(.conflito) > .primeira-coluna,
.ag-row:has(.conflito) > .primeira-coluna {
    border-right: 1px solid var(--border-red) !important;
    color: var(--color-red) !important;
    font-weight: 600 !important;
}

.ag-row-hover > .primeira-coluna > div > span > span > .conflito,
.ag-row > .primeira-coluna > div > span > span > .conflito {
    color: var(--color-red) !important;
    font-weight: 600 !important;
}

.ag-row > .primeira-coluna > div > span > span > .conflito > .botaoPrimeiraColuna > .icone-dependente > path,
.ag-row > .primeira-coluna > div > span > span > .conflito > .botaoPrimeiraColuna > .icone-alternativo > path {
    stroke: var(--color-red) !important;
}

.ag-row:has(.conflito) {
    color: var(--color-red) !important;
    font-weight: 600 !important;
}

.ag-row-hover:has(.conflito) > div > span > .tag-solucao,
.ag-row-selected:has(.conflito) > div > span > .tag-solucao {
    background: var(--border-red) !important;
    color: var(--color-red) !important;
}

.tag-solucao {
    display: flex;
    align-items: center;
    padding: 4px;
    gap: 4px;
    font-weight: 400;
    border-radius: 4px;
    background: #E5E5E6;
    color: var(--titlefundoclaro);
}

.ag-row-hover > div > span > .tag-solucao,
.ag-row-selected > div > span > .tag-solucao {
    background: #C0E5CB;
    color: #005A24;
}

.ag-cell {
    display: flex;
    align-items: center;
    padding-top: 10px;
    padding-bottom: 10px;
}

.ag-paging-panel {
    display: grid;
    grid-template-columns: 1fr 3fr 1fr;
    min-height: 80px;
}

.ag-paging-page-size {
    grid-column: 3/4;
    grid-row: 1/2
}

.ag-paging-row-summary-panel {
    grid-column: 1/2;
    grid-row: 1/2
}

.ag-paging-page-summary-panel {
    justify-content: center;
    grid-column: 2/3;
    grid-row: 1/2
}

/* Lista Lateral de Filtros */
.lista-filtros {
    background-color: var(--fundopadrao);
}

.subtitulo-filtro {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0px;
}
    .subtitulo-filtro:focus-visible > svg {
        border: 1px solid black;
    }

.campo-label {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 4px;
    color: var(--fontecolorblack);
    font-family: "Fira Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}
    .campo-label svg path, .subtitulo-filtro svg path{
        fill: var(--fontecolorblack);
    }
    .campos {
        display: flex;
        align-items: center;
        gap: 8px;
    }

.divisoria {
    height: 1px;
    width: 20px;
    background-color: #E5E5E6;
}

.input-com-sufixo {
    display: flex;
    flex: 1;
    align-items: center;
    border: 1px solid #E5E5E6;
    padding: 6px;
    gap: 4px;
    background: white;
    border-radius: 4px;
}
    .input-com-sufixo:has(input:focus-visible) {
        border: 1px solid #008A43;
    }

    .input-com-sufixo > input {
        width: 100%;
        border: none;
        background: none;
    }

/* Filtro checkbox */
.checkbox-container-reg,
.lista-rm-item {
    padding: 4px;
    list-style-type: none;
}
    .lista-rm-item:focus-visible, .lista-rm-item:has(input:focus-visible), .lista-rm-item:has(button:focus-visible) {
        border: 1px solid #008A43;
    }
.checkbox-container-reg>ul {
    padding-left: 15px;
}

    .checkbox-container-reg:focus-visible {
        border: 1px solid #008A43;
        border-radius: 8px;
    }

    .cbItem {
        display: none;
        opacity: 0;
        z-index: 1;
        width: 23px;
        height: 23px;
        cursor: pointer;
    }

.cbItem:checked~.checkmark,
.cbItem:indeterminate~.checkmark {
    background-color: #4caf50;
    border: 2px solid #4caf50;
}

#filtrarConflitos:has(.cbItem:checked) {
    background-color: var(--background-red);
}

#filtrarConflitos .cbItem~.checkmark {
    border: 2px solid var(--color-red) !important;
}

#filtrarConflitos .cbItem:checked~.checkmark {
    background-color: var(--color-red);
}

#filtrarConflitos label {
    color: var(--color-red);
}

.checkmark:after {
    left: 9px;
    top: 4px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.cbItem:checked~.checkmark::after,
.cbItem:indeterminate~.checkmark::after {
    display: block;
}

.cbItem:indeterminate~.checkmark:after {
    position: absolute;
    left: 4px;
    top: 10px;
    width: 13px;
    height: 2px;
    background-color: #fff;
    border: unset;
    transform: unset;
}

.checkmark {
    position: relative;
    /* Mudança para position relative */
    display: inline-block;
    width: 25px;
    height: 25px;
    background-color: #fff;
    border: 2px solid #E5E5E6;
    border-radius: 4px;
    vertical-align: middle;
    /* Alinha verticalmente ao meio */
}

.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

.checkbox-container input:checked~.checkmark,
.checkbox-container input:indeterminate~.checkmark {
    background-color: #008a43;
    border: 2px solid #008a43 !important;
}

.checkbox-container input:checked~.checkmark:after,
.checkbox-container input:indeterminate~.checkmark:after {
    /* Ícone para checked e indeterminate */
    display: block;
}

.checkbox-container .checkmark:after,
.div-segmentos .checkmark:after {
    left: 9px;
    top: 4px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.checkbox-container input:indeterminate~.checkmark:after {
    position: absolute;
    left: 4px;
    top: 10px;
    width: 13px;
    height: 2px;
    background-color: #fff;
    border: unset;
    transform: unset;
}

.lista-rm-item {
    display: flex;
    gap: 10px;
    cursor: pointer;
    vertical-align: middle;
    align-items: center;
    margin: 5px 0px;
    padding: 4px;
    border-radius: var(--spacing-spacing_xs, 8px);
    background: var(--fundopadrao);
}
    .lista-rm-item span {
        color: var(--fontcolorspan);
    }

    .lista-rm-item > label {
        max-width: 80%;
        cursor: pointer;
        margin-bottom: 0 !important;
        color: var(--fontcolorspan);
    }

.checkbox-li:has(input[type="checkbox"]:checked),
.lista-rm-item:has(input[type="checkbox"]:checked) {
    background: var(--container-selected-default, #E5F5EA);
}

.dropDownArrow {
    position: sticky;
    left: 100%;
    vertical-align: sub;
    cursor: pointer;
    transform: rotate(0deg);
}
    .dropDownArrow:focus-visible {
        border: 1px solid black;
    }

.dropDownArrowClosed {
    transform: rotate(180deg);
}


/* Filtro Slider */
#slider {
    display: none;
    height: 10px;
    margin-bottom: 10px;
}

#slider .noUi-connect {
    background: #008a43;
}

#slider .noUi-handle {
    height: 18px;
    width: 18px;
    top: -5px;
    right: -9px;
    border-radius: 9px;
    border: 4px solid #008a43;
}

.noUi-handle:before {
    display: none;
}

.noUi-handle:after {
    display: none;
}

/* Chips de filtros */
.texto-simples {
    color: var(--titlefundoclaro);
    text-align: center;
    font-size: 12px;
    font-style: normal;
    line-height: normal;
}

.texto-destacado {
    color: var(--titlefundoclaro);
    font-size: 12px;
    font-style: normal;
    font-weight: 600 !important;
    line-height: normal;
}

.chip {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 64px;
    border: 1px solid #E5E5E6;
    background-color: #fff;
    font-size: 12px;
    color: #474748;
    font-weight: 400;
}

/* Menu Exportar */
#modalCompartilhar {
    display: none;
    width: max-content;
    padding: var(--spacing-spacing_xs, 8px) var(--spacing-spacing_minimum, 4px);
    flex-direction: column;
    gap: var(--spacing-spacing_none, 0px);
    position: absolute;
    border-radius: var(--spacing-spacing_xs, 8px);
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0px 6px 12px 0px #E6E6E6;
    margin-top: 200px;
    right: 0px;
    z-index: 10;
}

#modalCompartilhar>button {
    display: flex;
    z-index: 10;
    padding: 5px;
    border: unset;
    align-items: center;
    background-color: unset;
    gap: 4px;
}

#modalCompartilhar>button:focus {
    border: 1px solid var(--border-neutral, #E5E5E6);
    background: var(--container-selected-pressed, #98D4AA);
}

#modalCompartilhar>button>div {
    text-align: left;
    display: flex;
    flex-direction: column;
}

.tooltip-info {
    cursor: pointer;
    position: relative;
}

.tooltip-info:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}

.tooltip-info .tooltiptext {
    visibility: hidden;
    width: 320px;
    background-color: var(--backgroundTooltip);
    color: #fff;
    border-radius: 6px;
    padding: 8px;
    position: absolute;
    z-index: 99999;
    top: -300%;
    opacity: 0;
    transition: opacity 0.3s;
    font-size: 14px;
}
    .tooltip-info svg path {
        fill: var(--fontColorDestaque);
    }

.tooltip-tag .tooltiptext {
    visibility: hidden;
    width: 320px;
    background-color: var(--backgroundTooltip);
    color: #fff;
    border-radius: 6px;
    padding: 8px;
    position: absolute;
    z-index: 99999;
    left: 100%;
    opacity: 0;
    transition: opacity 0.3s;
}

.tooltip-tag .tooltiptext::after {
    content: "";
    position: absolute;
    top: 44%;
    left: -5px;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: var(--backgroundTooltip) transparent transparent transparent;
    rotate: 90deg;
}

.tooltip-tag:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}

.h1-content {
    font-family: "Fira Sans";
    font-size: 18px;
    font-style: normal;
    font-weight: 600 !important;
    line-height: normal;
}

/* PopUp */
.popup {
    display: none;
    min-height: 280px;
    max-height: fit-content;
    flex-direction: column;
    justify-content: space-between;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50%;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0px 6px 12px 0px #E6E6E6;
    z-index: 9999;
}

.h1-alerta {
    font-size: 24px;
    font-weight: 500 !important;
    color: #E50000;
}
.edita-imagem-tutorial {
    background-color: #98d4aa;
    padding: 0 40px;
    border-radius: 8px;
}
.popup-tutorial {
    display: none;
    height: 580px;
    flex-direction: column;
    justify-content: space-between;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50%;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0px 6px 12px 0px #E6E6E6;
    z-index: 9999;
}

    .popup-tutorial > p {
        font-size: 16px;
        color: var(--titlefundoclaro);
    }

    .popup-tutorial > .tutorial-header > .h1-content {
        font-size: 24px;
        color: var(--titlefundoclaro);
    }

.tutorial-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
}

.popup > .tutorial-header {
    padding: 16px 24px;
}

.popup > .tutorial-header > div > .h1-content {
    font-size: 24px;
    font-weight: 500 !important;
}

.tutorial-header > button {
    cursor: pointer;
    border: none;
    background-color: transparent;
}

    .tutorial-header > button:focus-visible {
        border: 1px solid black;
        border-radius: 8px;
    }

.tutorial-body {
    display: flex;
    flex-direction: column;
    padding: 24px;
    gap: 32px;
    flex: 1;
}

.popup > .tutorial-body {
    padding: 16px 24px;
    & > p {
        font-size: 14px;
    }
}

.tutorial-body ul {
    list-style: disc;
    padding-left: 40px;
}

.tutorial-body li {
    font-size: 14px;
    font-family: "Fira Sans", "Inter" !important;
    font-weight: 400 !important;
    color: #474748;
}

.tutorial-body figure {
    width: 100%;
}

.tutorial-body figure img {
    width: 100%;
}

.tutorial-footer {
    display: flex;
    padding: 16px;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.tutorial-footer > label {
    font-size: 14px;
    color: #666667;
    margin: 0px;
}

.tutorial-body span {
    vertical-align: bottom;
}

@media (max-width: 978px) {
    :root {
        --paddingHorizontal: 24px;
        --paddingVertical: 8px;
        --paddingPadrao: var(--paddingVertical) var(--paddingHorizontal);
    }
    .botoes-footer-popup {
        flex-direction: column;
    }

@media (max-width: 680px) {
    #agregacao-projetos {
        display: none;
    }
    
    #agregacao-projetos-mobile {
        display: block;
    }
    
    .tabela {
        width: 100vw;
    }
    
    .conteudo-agregacao {
        max-height: 50px;
        flex-wrap: wrap;
        gap: 0px;
    }
    
    #projetos-aviso {
        display: none;
    }
    
    .separador {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 20px;
        height: 20px;
    }
    
    #navegacao {
        display: none;
    }
    
    #seletor-visualizacao {
        display: flex;
        margin: 8px 4px;
        min-width: 200px;
    }
}

@media (max-width: 480px) {
    :root {
        --paddingHorizontal: 16px;
        --paddingVertical: 8px;
        --paddingPadrao: var(--paddingVertical) var(--paddingHorizontal);
    }

    .popup-tutorial {
        padding: 12px 16px !important;
        width: 80% !important;
    }

    .campo-busca input {
        font-size: 14px !important;
    }

    #comparar-projetos {
        width: fit-content;
        border: 0px !important;
    }

    #seletor-visualizacao {
        min-width: 0 !important;
    }

    #seletor-visualizacao > .campo-busca {
        width: fit-content;
        min-width: 0 !important;
        padding: 4px 8px;
    }

    .ag-column-first {
        width: 50px !important;
    }
}

