﻿
:root {
    --white: #FFFFFF;
    --azul-primary: #0A2C5B;
    --azul-secundary: #126CFB;
    --azul-complementary: #5CC4FF;
    --azul-complementary_: rgba(19, 108, 251, 0.2);
    --azul-info: #0D45F6;
    /* Identidade visual 
    --success: #00FFC4;
    --azul-info: #0D45F6;
    --warning: #FFC94D;
    --danger: #F43831;
    --danger-background: #e7a3a0;
    /* Tons de cinza */
    --gray-1: #e1e1e6;
    --gray-5: #e9eaed;
    --gray-3: rgba(130, 130, 130, 0.5);
    --gray-grafic: #C4C4C4;
    --gray-info: #515251;
    --gray-2: #F4F4F4;
    --gray-4: #DCDCE0;
    --gray-text: #A6A6A6;
    --gray-background: #E5E5E5;
    --box-shadow: rgba(0, 0, 0, 0.05) 0px 5px 15px;
}

.loader_filter {
    position: absolute;
    background-color: white;
    font-size: 1.2rem;
    top: 0px;
    height: 100%;
    width: 100%;
}

.container_buttons_modal {
    display: flex;
    flex-direction: column;
    grid-gap: 0.2rem;
    width: 100%;
    align-items: flex-end;
    justify-content: flex-end;
}



.atv_header_padrao {
    /*background:black;*/
    padding: 0rem 0rem 0rem 1rem;
    width: 100%;
}

.atv-container-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
}

.atv-container-button {
    width: 15%;
    /*background:black;*/
}

.atv-btn-priorizadas {
    border: none;
    /*background-color: var(--azul-lupeon);*/
    padding: 0.5rem 1rem;
    border-radius: 24px;
    color: white;
    font-weight: 600;
    transition: 0.3s all;
    position: relative;
}

    .atv-btn-priorizadas:hover {
        opacity: 0.8;
    }

    .atv-btn-priorizadas:focus {
        outline: none;
    }

.atv-contagem-btnpriorizadas {
    position: absolute;
    top: -10px;
    right: -5px;
    padding: 0.1rem 0.3rem;
    border-radius: 50%;
    color: var(--azul-lupeon);
    background-color: white;
    border: 2px solid var(--azul-lupeon);
    font-weight: bold;
}

/*------------------------ Content Atividade --------------------*/

.atv-container-content {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    padding: 1rem 0rem;
}

.atv-card-content_ {
    background-color: white;
    margin: 0.5rem 0.8rem;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    padding: 1.5rem;
    border-radius: 6px;
    width: 13rem;
    display: flex;
    align-content: center;
    justify-content: center;
    flex-direction: column;
    transition: 0.2s ease-in-out;
}

    .atv-card-content_:hover {
        transform: scale(1.05);
    }

.atv-card-header {
    border-bottom: 1px solid #ccc;
    padding: 0rem 1rem;
    width: 100%;
    text-align: center;
    font-weight: 600;
    margin-bottom: 0.6rem;
}

.atv-card-content, atv-card-footer {
    width: 100%;
    display: flex;
    align-content: center;
    justify-content: center;
    text-align: center;
}

.atv-card-btn-analisar {
    padding: 0.4rem 0.4rem;
    border-radius: 24px;
    color: var(--azul-lupeon);
    background-color: white;
    width: 100%;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    font-weight: bold;
    border: none;
    font-size: 0.85rem;
    transition: 0.3s ease-in-out;
}

    .atv-card-btn-analisar:focus {
        outline: none;
    }

    .atv-card-btn-analisar:hover {
        /*opacity:0.8;*/
        background-color: var(--azul-lupeon);
        color: white;
    }

.atv-modal-preview {
    display: flex;
    height: 100vh;
    width: 100%;
    background: transparent;
    display: none;
    z-index: 1;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    align-content: center;
    align-items: center;
    justify-content: flex-end;
    position: absolute;
    overflow-x: hidden;
}

.atv-modal-preview-content {
    background-color: white;
    height: 80vh;
    /*padding: 1rem;*/
    display: none;
    width: 30%;
    z-index: 1000;
    right: 0px;
    transition: 0.3s ease-in-out;
    animation: modal-preview 0.5s;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    position: fixed;
    /*overflow-x: hidden;*/
}

.atv-modal-btnsoma {
    background-color: var(--azul-lupeon);
    border-radius: 4px;
    padding: 0.1rem;
    width: 1.8rem;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    border: 1px solid #91C9FF;
    text-decoration: none;
}

    .atv-modal-btnsoma:hover {
        opacity: 0.8;
    }

    .atv-modal-btnsoma:focus {
        outline: none;
    }


    .atv-modal-btnsoma img {
        width: 23px;
    }

.close_modal_preview {
    position: absolute;
    top: 5px;
    right: 0.8rem;
}

@keyframes modal-preview {
    0% {
        right: -500px;
    }

    100% {
        right: 0px;
    }
}

.atv-modal-preview-infos {
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 1rem;
    overflow-y: auto;
    height: 70vh;
    /*position:relative*/
}

    .atv-modal-preview-infos::-webkit-scrollbar {
        width: 0.4rem; /* width of the entire scrollbar */
    }

.atv-modal-btnfinalizar {
    background-color: var(--azul-lupeon);
    width: 100%;
    border: none;
    padding: 1rem 0rem;
    color: white;
    font-weight: bold;
    position: absolute;
    bottom: 0px;
}


.atv_modal_sucess {
    position: fixed;
    background: transparent;
    height: 100vh;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    width: 100%;
    z-index: 1000;
}

.atv_modal-sucess-content {
    background-color: white;
    border-radius: 4px;
    padding: 0.5rem;
    position: fixed;
    width: 25%;
    top: 3rem;
    right: 1.3rem;
    animation: modal-preview 0.5s;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}

.close_modal_sucess {
    position: absolute;
    top: 5px;
    right: 5px;
}



/*////////////////////////////////////////// MODAL DE FILTRO*/

.modal_ {
    /*display:none;*/
    background: #fff;
    width: 25%;
    position: fixed;
    right: 0px;
    padding: 24px;
    top: 0px;
    height: 100vh;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 10px;
    z-index: 10001;
    transition: 0.2s all;
    max-height: 100vh;
    overflow-y: auto
    /*@media screen and (max-width: 768px) {
        width: 100%;
    }*/
}

.overlay_modal {
    background: var(--gray-1);
    height: 100vh;
    left: 0;
    opacity: 0.65;
    position: fixed;
    top: 0;
    width: 100vw;
    z-index: 10000;
}

.container_pesquisa_header_figma {
    width: 5%;
    gap: 0.2rem;
    display: flex;
    position: fixed;
    bottom: 1rem;
    align-items: center;
    right: 1rem;
    z-index: 1;
}

.corpo_pesquisa_header_figma {
    background-color: #0c6bff;
    width: 2.8rem;
    margin-left: 0.4rem;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s;
    cursor: pointer;
    box-shadow: rgba(0, 0, 0, 0.3) -2px -2px 15px;
    padding: 6% 0% 4% 0%;
    transition: background-color 0.25s ease-out;
}

    .corpo_pesquisa_header_figma img {
        cursor: pointer;
        width: 20px;
    }

.btn_lupa_header_figma {
    background: transparent;
    border: none;
    cursor: pointer;
}

.container_dropdowns {
    width: 100%;
    padding: 1rem 0rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    /* background: whitesmoke; */
    border-radius: 3px;
    margin-top: 0.4rem;
}

.dropdown {
    display: flex;
    flex-direction: column;
    /*gap: 0.2rem;*/
    position: relative;
    font-size: 0.875rem;
    width: 100%;
}

.h5 {
    margin-top: 0rem;
    font-weight: bold;
    color: #0a2c5b;
    width: 90%;
    text-align: center;
}

.dropdown select {
    padding: 4px;
    width: 100%;
}

.container_grafic_linha1 {
    height: 100%;
    display: flex;
}

.desc-chart1 {
    width: 30%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.porcentagem_grafic {
    gap: 0.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 0.675rem;
    padding: 0.1rem 0.65rem;
}



.select_padrao {
    border: 1px solid #E3E4E8;
    border-radius: 8px;
    font-size: 0.75rem;
}

    .select_padrao option {
        border-radius: 8px;
    }

.header_modal {
    display: flex;
    /*justify-content:space-around;*/
}

.container_btn {
    width: 10%;
}

.header_modal h5 {
    width: 60%;
    text-align: left;
}

.dropdown label {
    font-size: 0.7rem;
    font-weight: 600;
}

.btn_fechar_modal {
    border: none;
    border-radius: 50%;
    cursor: pointer;
    background-color: transparent;
}

    .btn_fechar_modal:hover {
        opacity: 0.8;
    }

    .btn_fechar_modal:focus {
        outline: none;
    }

.corpo_btn_exportar {
    color: var(--white);
    margin-top: 0.4rem;
    width: 100%;
    padding: 0.4rem;
    border: none;
    background-color: #0c6bff;
    transition: 0.2s all;
    font-size: 0.8rem;
    border-radius: 3px;
    font-weight: 600;
}

    .corpo_btn_exportar:hover {
        opacity: 0.8;
    }


    .corpo_btn_exportar:focus {
        opacity: 1;
    }

.container_btn_resetarfilter {
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
}

.btn_reset_filter {
    width: 25;
    border: none;
    background-color: #0c6bff;
    color: #FFFFFF;
    border-radius: 3px;
    font-weight: 600;
    font-size: 0.75rem;
    padding: 0.2rem 0.6rem;
    transition: filter 0.2s;
    margin-top: 0.35rem;
}

    .btn_reset_filter:hover {
        filter: brightness(0.9);
    }



/*/////////////////////////////////////////////////////////////*/


.container_transportadoras_filter {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    gap: 0.5rem;
    padding: 0.25rem 0rem 0.5rem 0rem;
}

.card_transportadoras_filter {
    position: relative;
    padding: 0.2rem 1.1rem;
    border-radius: 12px;
    font-size: 0.75rem;
    background-color: var(--azul-complementary);
    color: var(--white);
    transition: filter 0.2s ease;
    cursor: default;
}

.img_fechar_transp_filter {
    position: absolute;
    top: 0.215rem;
    right: 0.15rem;
    width: 0.5rem;
    transition: filter 0.2s ease;
    cursor: pointer;
}
