#modalExibirProjeto .modal-dialog .modal-content .modal-body {
    padding: 30px;
}

#modalExibirProjetoTitulo {
    margin-left: 8px;
}

button.fechar-modal {
    border: none;
    background-color: #fff;
    margin-right: 8px;

    i {
        font-size: 25px;

        &:hover {
            color: #000;
            text-decoration: none;
            opacity: .75;
        }
    }
}


#modalInformacoesContainer {
    display: grid;
    grid-template-areas:
        'imagem informacoes'
        'descricao meta'
        'objetivos macroAcoes'
        'ods ods';
    grid-template-columns: 1fr 1fr;
    justify-content: center;
    gap: 20px;

    #modalImagem {
        grid-area: imagem;
    }

    #modalInformacoes {
        grid-area: informacoes;
    }

    #modalDescricao {
        grid-area: descricao;
    }

    #modalMeta {
        grid-area: meta;
    }

    #modalMacroAcoes {
        grid-area: macroAcoes;

        display: flex;
        flex-direction: column;
        padding: 30px 50px;

        ul {
            margin: 0;
            list-style: none;
            display: grid;
            gap: 10px;

            strong {
                color: #464646;
                font-size: 0.875rem;
            }

            li {
                position: relative;
                color: #464646;
                font-size: 0.8rem;
                margin: 0;
                font-weight: bolder;

                &::before {
                    position: absolute;
                    left: -30px;
                    content: "•";
                    color: #192e09;
                    scale: 1.8;
                }
            }
        }
    }

    #modalObjetivos {
        grid-area: objetivos;

        display: flex;
        flex-direction: column;
        padding: 30px 50px;

        ul {
            margin: 0;
            list-style: none;
            display: grid;
            gap: 10px;

            li {
                position: relative;
                color: #464646;
                font-size: 0.8rem;
                margin: 0;
                font-weight: bolder;

                &::before {
                    position: absolute;
                    left: -16px;
                    top: 0px;
                    content: "•";
                    color: #192e09;
                    scale: 1.8;
                }
            }
        }
    }

    #modalOdsContainer {
        grid-area: ods;

        border-radius: 15px;
        border: 1px solid #C8C8C8;
        padding: 15px 20px 20px;

        h4 {
            text-align: center;
            font-size: 1.3rem;
            margin-bottom: 20px;
        }

        #modalListaImagensOds {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;

            margin: 0;
            padding: 0;
            list-style: none;
            gap: 20px;

            .name-ods {
                position: absolute;
                top: -36px;
                left: 50%;

                visibility: hidden;
                background-color: transparent;

                color: #fff;
                font-size: 0.8rem;
                text-align: center;
                text-wrap-mode: nowrap;

                padding: 5px 10px;
                border-radius: 5px;

                transform: translateX(-50%);
                transition: var(--delay-default) ease-in-out;
            }
        }
    }

}

#modalInformacoesContainer>img {
    width: 100%;
    height: 100%;

    object-fit: contain;
    border-radius: 10px;

    border: 1px solid #C8C8C8;
}

.modal-informacoes {
    display: grid;
    gap: 10px;
    grid-template-areas:
        'eixo eixo'
        'programa programa'
        'setor setor'
        'dataInicio dataFinal'
        'valor situacao'
        'progresso progresso';
    grid-template-columns: 1fr 1fr;

    #informacaoEixo {
        grid-area: eixo;
    }

    #informacaoPrograma {
        grid-area: programa;
    }

    #informacaoSituacao {
        grid-area: situacao;
    }

    #informacaoDataInicio {
        grid-area: dataInicio;
    }

    #informacaoDataFinal {
        grid-area: dataFinal;
    }

    #informacaoSetor {
        grid-area: setor;
    }

    #informacaoValor {
        grid-area: valor;
    }

    #informacaoProgresso {
        grid-area: progresso;
        width: 100%;


        #modalProgresso {
            display: flex;
            justify-content: start;
            align-items: center;
            gap: 5px;

            #modalBarraProgresso {
                position: relative;

                display: inline-block;
                width: 90%;
                height: 14px;

                background-color: #F1F1F1;
                border: 1px solid #e9e9e9;
                border-radius: 15px;
                overflow: hidden;
                
                &::before {
                    content: "";
                    width: var(--card-progresso, 0%);
                    /* Vindo do js*/

                    position: absolute;
                    left: 0px;
                    top: -1px;
                    height: 14px;

                    display: flex;
                    justify-content: center;
                    align-items: center;

                    border-radius: 0 10px 10px 0;
                    background-color: var(--card-progresso-cor, #f06767);
                    /* Vindo do js*/
                }
            }
        }
    }
}

.modal-informacao-card {
    flex: 1;
    display: flex;
    gap: 12px;

    padding: 15px 25px;
    border-radius: 15px;
    border: 1px solid #C8C8C8;
}

.modal-informacao-card:first-child {
    flex: 100%;
}

.modal-informacao-card>.icone {
    min-width: 40px;
    text-align: center;
}

.modal-informacao-card>.icone>i {
    margin-top: 12px;
    color: #4D9416;
    font-size: 1.8rem;
}

.modal-informacao-card>.detalhes {
    width: 100%;
}

.modal-informacao-card>.detalhes>span {
    font-size: 1.2rem;
    text-wrap: nowrap;
}

.modal-informacao-card>.detalhes>p {
    color: #464646;
    font-size: 0.8rem;
    margin: 0;
    font-weight: bolder;

    &::first-letter {
        text-transform: uppercase;
    }

    &:not(:last-child) {
        text-wrap: nowrap;
    }
}






#modalListaImagensOds>li {
    cursor: pointer;
    position: relative;
    transition: 250ms ease-in-out;

    &::after {
        content: "";
        position: absolute;
        width: 15px;
        height: 15px;
        top: -7px;
        left: 50%;
        transform: translateX(-50%) rotate(180deg);
        clip-path: polygon(50% 50%, 0% 100%, 100% 100%);

        transition: var(--delay-default) ease-in-out;
    }

    &:hover {
        transform: translateY(-2px);

        .name-ods {
            visibility: visible !important;
            background-color: #333 !important;
        }
    }
}

#modalListaImagensOds>li>a>img {
    width: 45px;
    border-radius: 2px;
    object-fit: cover;
}

/* loading modal */
.modal-loading {
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: #737373b0;
    border-radius: 10px;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.modal-loading>i {
    font-size: 5rem;
    color: #4e8eb3;
    animation: loading 1100ms cubic-bezier(0.175, 0.885, 0.32, 1.275) infinite;
}

@keyframes loading {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}


@media (max-width:1199px) {
    #modalInformacoesContainer {
        grid-template-areas:
            'imagem'
            'informacoes'
            'descricao'
            'meta'
            'objetivos'
            'macroAcoes'
            'ods';
        grid-template-columns: 1fr;
        gap: 10px;

        h4 {
            font-size: 1.2rem;
            font-weight: 400;
        }

        #modalOdsContainer h4 {
            font-size: 1rem;
            font-weight: 400;
        }

        .modal-informacoes {
            display: grid;
            gap: 10px;
            grid-template-areas:
                'eixo '
                'programa'
                'setor'
                'dataInicio'
                'dataFinal'
                'valor'
                'situacao'
                'progresso';
            grid-template-columns: 1fr;
        }

        #modalMacroAcoes {
            padding: 20px 30px;
        }

        #modalObjetivos {
            padding: 20px 30px;
        }
    }

    #modalOdsContainer {
        order: 4;
    }

    .modal-informacao-card {
        order: 3;
    }
}

@media (max-width:992px) {

    #modalExibirProjetoTitulo {
        flex-grow: 1;
        text-align: center;
    }
}

@media (max-width:425px) {
    #modalListaImagensOds {
        justify-content: center;
        gap: 10px;
    }
}

@media (max-width:375px) {

    #modalExibirProjeto .modal-dialog .modal-content .modal-body {
        padding: 15px;
    }

}