:root {
    --color-primary: #FFF;
    --color: #000;
   --color-font: #f8f9fa;
    --color-consultas-validas: #47A992;
    --color-consultas-invalidas: #F24C3D;
    --color-principal: #0c4b7b;
    --color-secundaria: #6c757d;
    --color-border: #f8f9fa;
    --color-border: #888c8f;
}

.main-consulta {
    position: relative;
    transition: 0.5s;
}

.active {
    display: block; 
    opacity: 2000ms ease-in-out
}

.desactive {
    display: none;
}

.main-consulta-primaria {
    position: absolute;
    z-index: 9999;
    top: 160px;
    left: 50%;
    width: 1750px;
    height: 700px;
    transform: translate(-50%, -50%);
    border-radius: 7px;
    background-color: var(--color-font);
    border: 1px solid var(--color-secundaria);
}

.main-consulta-table {
    width: 98%;
    margin: auto;
    border-radius: 5px;
}

.main-consulta-secundaria {
    display: flex;
    flex-direction: column;
}

.titulo-consultas{
    align-self: center;
}

.titulo-consultas h1{
    color: var(--color-principal);
    font-weight: 600;
    font-size: 30px;
    margin-top: -15px;
}

#consulta-todas_length {
    display: none;
}

.tabela-ativada {
    display: block;
}

.tabela-desativada {
    display: none;
}

.main-consulta-btn-close{
    align-self:self-end;
    margin: 3px;
}

.disabled-table {
    opacity: 0.5;
    pointer-events: none;
}

#btn-consulta-close {
    font-weight: bold;
}

.validas {
    color: var(--color-consultas-validas);
    font-weight: bold;
}

.invalidas {
    color: var(--color-consultas-invalidas);
    font-weight: bold;
}

#consulta-filtros {
    margin-top: 15px;
    margin-bottom: 20px;
}

.cabecalho {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex-wrap: wrap;
    margin-bottom: 0.03rem;
    background-color: var(--color-primary);
    margin-bottom: 10px;
    border-radius: 7px;
}

.paciente {
    font-size: 18px;
    font-weight: 900;
    color: var(--color-principal);
    width: 1700px;
    border-bottom: 2px solid var(--color-border);
    margin-left: 10px;
    margin-top: 10px;
}

.item-p {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    margin-left: 10px;
}

.cabecalho-dados {
    font-size: 12px;
}

.item-p span {
    font-size: 12px;
    font-weight: 800;
}

#consultas-validas {
    color: var(--color-font);
    background-color: var(--color-principal);
}

#consultas-invalidas {
    color: var(--color-font);
    background-color: var(--color-consultas-invalidas);
}

#todas-consultas {
    color: var(--color-font);
    background-color: var(--color-secundaria);
}

.btn-consultas{
    margin-left: 0px;
}

#consulta-todas_filter {
    display: none;
}

.chave {
    display: none;
}

/*Tabela*/

.main-table{
    padding: 10px;
    border-radius: 7px;
    background-color: #FFF !important;
}

/**/

@media screen and (min-width:360px) and (max-width: 376px){  

    .btn-relatorio-consultas{
        margin-left: 0px !important;
    }

    .titulo-consultas h1{
        font-size: 20px !important;
    }

    .cabecalho-item{
        width: 300px !important;
    }

    .paciente{
        font-size: 13px !important;
        width: 94% !important;
    }

    .item-p {
        gap: 0.4em;
    }

    .item-p .cabecalho-dados{
        font-size: 9px !important;
    }

    .item-p span{
        font-size: 9px !important;
    }

    #consultas-validas{
        font-size: 13px;
    }

    #consultas-invalidas{
        font-size: 13px;
    }

    #todas-consultas{
        font-size: 13px;
    }

    .main-consulta-primaria {
        width: 310px;
        height: 710px;
        top: 450px;
        left: 50%;
    }

    /* .paciente {
        width: 300px;
    } */
}

@media only screen and (min-width: 377px) and (max-width: 399px){

    .btn-relatorio-consultas{
        margin-left: 0px !important;
    }

    .titulo-consultas h1{
        font-size: 20px !important;
    }

    .cabecalho-item{
        width: 300px !important;
    }

    .paciente{
        font-size: 13px !important;
        width: 94% !important;
    }

    .item-p {
        gap: 0.3em;
    }

    .item-p .cabecalho-dados{
        font-size: 9px !important;
    }

    .item-p span{
        font-size: 9px !important;
    }

    #consultas-validas{
        font-size: 13px;
    }

    #consultas-invalidas{
        font-size: 13px;
    }

    #todas-consultas{
        font-size: 13px;
    }

    .main-consulta-primaria {
        width: 310px;
        height: 710px;
        top: 450px;
        left: 50%;
    }

    /* .paciente {
        width: 300px;
    } */
}

@media only screen and (min-width: 400px) and (max-width: 450px) { 

    .btn-relatorio-consultas{
        margin-left: 0px !important;
    }

    .titulo-consultas h1{
        font-size: 20px !important;
    }

    .cabecalho-item{
        width: 300px;
    }

    .paciente{
        font-size: 13px !important;
        width: 94%;
    }

    .item-p {
        gap: 0.4em;
    }

    .cabecalho-dados{
        font-size: 9px !important;
    }

    .item-p span{
        font-size: 9px !important;
    }

    .titulo-consultas h1{
        font-size: 20px !important;
    }

    #consultas-validas{
        font-size: 13px;
    }

    #consultas-invalidas{
        font-size: 13px;
    }

    #todas-consultas{
        font-size: 13px;
    }

    .main-consulta-primaria {
        width: 310px;
        height: 710px;
        top: 450px;
        left: 50%;
    }
}

@media only screen and (min-width: 455px) and (max-width: 600px) {

    
    .btn-relatorio-consultas{
        margin-left: 0px !important;
    }

    .titulo-consultas h1{
        font-size: 20px !important;
    }

    .paciente{
        font-size: 14px !important;
        width: 350px;
    }

    .item-p {
        gap: 0.3em;
    }

    .item-p .cabecalho-dados{
        font-size: 11px !important;
    }

    .item-p span{
        font-size: 12px !important;
    }

    .main-consulta-primaria {
        width: 380px;
        height: 680px;
        top: 380px;
        left: 50%;
    }
}

@media only screen and (min-width: 601px) and (max-width: 766px) {
    .main-consulta-primaria {
        width: 450px;
        height: 680px;
        top: 400px;
        left: 50%;
    }

    .paciente {
        width: 400px;
    }
}

@media only screen and (min-width: 767px) and (max-width: 912px) {
    .main-consulta-primaria {
        width: 680px !important;
        height: 680px !important;
        top: 400px !important;
        left: 50.3% !important;
    }

    .paciente {
        width: 630px;
    }
}

@media only screen and (min-width: 913px) and (max-width: 1050px) {
    .main-consulta-primaria {
        width: 800px !important;
        height: 680px !important;
        top: 400px !important;
        left: 49% !important;
    }

    .paciente {
        width: 770px;
    }
}

@media screen and (min-width: 1200px) and (max-width: 1339px) {
    .main-consulta-primaria {
        width: 900px !important;
        height: 680px !important;
        top: 190px !important;
        left: 50% !important;
    }

    .paciente {
        width: 860px;
    }
}

@media screen and (min-width: 1340px) and (max-width: 1370px) {
    .main-consulta-primaria {
        width: 1200px !important;
        height: 680px !important;
        top: 190px !important;
        left: 50% !important;
    }

    .paciente {
        width: 1155px;
    }
}

@media screen and (min-width: 1400px) and (max-width: 1440px) {
    .main-consulta-primaria {
        width: 1300px !important;
        height: 680px !important;
        top: 160px !important;
        left: 50% !important;
    }

    .paciente {
        width: 1250px;
    }

    @media (min-width: 1439px) and (max-width: 1440px) {
        .main-consulta-primaria {
            left: 50% !important;
        }
    }
}

@media screen and (min-width: 1559px) and (max-width: 1680px) {
    .main-consulta-primaria {
        width: 1420px !important;
        height: 680px !important;
        top: 170px !important;
        left: 50% !important;
    }

    .paciente {
        width: 1350px;
    }
}

@media screen and (min-width: 1681px) and (max-width: 1768px) {
    .main-consulta-primaria {
        width: 1440px !important;
        height: 680px !important;
        top: 300px !important;
        left: 95% !important;
    }

    .paciente {
        width: 1380px;
    }
}