.filtroContent {

    z-index: 9999;
    position: absolute;
    width: 100vw;
    height: 100vh;
    display: flex;
    transition: 0.4s;
    height: 100dvh;
    height: 100svh;
    height: calc((var(--vh, 1vh) * 100));

}

.filtroContent.atv .filtroFundo {
    opacity: 0.5;
    transition-delay: 0.4s;

}

.filtroFundo {

    width: 100%;
    height: 100%;
    background: black;
    opacity: 0;
    position: absolute;
    transition: 0.4s;

}

.filtroContent.atv .filtroCorpo {
    transform: scaleY(1);
    transition-delay: 0s;

}

.filtroCorpo {

    background: white;
    width: 80%;
    height: 80%;
    margin: auto;
    max-width: 700px;
    min-width: 320px;
    filter: drop-shadow(0px 0px 5px black);
    border-radius: 10px;
    position: relative;
    display: grid;
    grid-template-rows: auto auto auto;
    transition-delay: 0.4s;
    transition: 0.4s;
    transform-origin: top;
    transform: scaleY(0);

}

.filtroHeader {

    /*background: red;*/
    padding: 10px;
    width: calc(100% - 20px);
    height: auto;
    text-align: center;

}

.filtroSection {

    overflow: auto;
    /*background: #8080801a;*/
    /*scroll-snap-type: y mandatory;*/

}

.filtroFooter {
    place-items: center;
    place-content: center;
}

.filtroFooter>.pointer.btn_2 {

    flex: auto;
    place-content: center;
    place-items: center;
    gap: 5px;

}

.filtroFooter>.pointer.btn_2>svg {

    width: 13px;
    height: 13px;
    display: block;
    margin-right: 5px;

}
.filtroSection .card,
.filtroSection>div {
    border-top: 1px solid #80808042;
    padding: var(--padding);
    color: grey;
    margin: 1px;
    transition: 0.4s;
    text-align: center;
    place-items: center;
    /*scroll-snap-align: center;*/
    flex: auto;
}

.filtroSection .card:hover,
.filtroSection>div:hover {
    border-top: 5px solid #80808042;
    color: black;
    background-image: linear-gradient(180deg, #8080801c, transparent);
}
/*
.filtroSection .card,
.filtroSection>div {
    border: 1px solid #80808042;
    border-left: none;
    border-right: none;
    padding: var(--padding);
    color: grey;
    margin: 1px;
    transition: 0.4s;
    text-align: center;
    place-items: center;
}

.filtroSection .card:hover,
.filtroSection>div:hover {
    border: 5px solid #80808042;
    border-left: none;
    border-right: none;
    color: black;
    margin: 5px 0;
}
*/

/*
.filtroCorpo>form{

    height: auto;
    align-items: center;
    display: grid;
    grid-template-rows: auto auto;
    background: #00800069;
}
*/


/*####################################*/

.filtroContent.modelo1 .filtroSection {
    display: grid;
    grid-template-columns: var(--modelo1);
}

.filtroContent.bloco .filtroSection>p {
    border: 2px solid #80808024;
}

.filtroContent.bloco .filtroSection>p:hover {
    margin: 1px;
}

/*####################################*/
.filtroContent.modelo2 .filtroSection {
    display: flex;
    flex-wrap: wrap;
}

.filtroContent.modelo2 .filtroSection>p {
    flex: 1 auto;
    border: 2px solid #80808024;
    padding: 25px 35px;
}

.filtroContent.modelo2 .filtroSection>p:hover {
    margin: 1px;
}

/*####################################*/

.filtroContent.modelo3 .filtroSection {
    display: grid;
    grid-template-columns: 50% 50%;
}

.filtroContent.modelo3 .filtroSection>p {
    border: 2px solid #80808024;
    padding: 25px 35px;
}

.filtroContent.modelo3 .filtroSection>p:hover {
    margin: 1px;
}

/*####################################*/
/*####################################*/

.filtroRegua {
    width: auto;
    min-width: 50%;
    margin: 5px;
    display: grid;
    align-items: center;
}

.filtroRegua>span {
    border-top: 1px solid grey;
    border-bottom: 1px solid grey;
    height: 8px;
    border-color: #80808000;
    transition: 0.4s;
    background: linear-gradient(181deg, rgb(0 0 0 / 21%) 0%, #bdbdbd 100%);
    filter: drop-shadow(0px 2px 4px #7d879063);
}

.filtroRegua>span.atv {
    border-color: #9696961f;
    transition: 0.4s;
    background: linear-gradient(181deg, var(--corTxtAtv) -20%, var(--corAtv) 100%);
    filter: drop-shadow(0px 2px 4px var(--corAtv));
}

.filtroRegua>label {
    z-index: 1;
    position: inherit;
    padding: 3px;
    border: 2px solid transparent;
    background: #797676;
    transition: 0.4s;
    color: white;
    transition-delay: 0.4s;
    border-radius: 3px;
    place-content: center;
    place-items: center;
    display: flex;
    font-size: 0.7rem;
}

.filtroRegua>label:has(input:checked),
.filtroRegua>label.atv {
    border: 2px solid var(--corTxtAtv);
    background: linear-gradient(181deg, rgb(0 0 0 / 21%) 0%, var(--corAtv) 100%);
    background: var(--corAtv);
    font-size: 0.8rem;
    color: var(--corTxtAtv);
    font-weight: bold;
    border-radius: 50%;
    padding: 5px;
    filter: drop-shadow(0px 2px 4px var(--corAtv)) drop-shadow(0px 2px 4px #000000e0);
    width: 15px;
    height: 15px;

}

.filtroRegua>label:has(input:checked):after {
    content: var(--content);
    position: absolute;
    margin-top: 45px;
}

.filtroRegua>label:has(input:checked) {
    filter: drop-shadow(0px 2px 4px var(--corAtv)) drop-shadow(0px 2px 4px #000000e0) !important;
}


/*####################################*/
/*####################################*/

.filtro.labels {
    display: flex;
    flex-wrap: wrap;
    height: auto;
    position: relative;
    width: auto;
    padding: 0 5px;
    flex: 1 auto;
    margin: 5px auto;
    max-width: fit-content;
    cursor: pointer;
    transition: 0.4s;
}

.filtro.labels label.atv,
.btnFiltro.filtro.atv,
.filtro.labels label:hover,
.btnFiltro.filtro:hover {
    background: var(--corAtv);
    color: var(--corTxtAtv);
}

.btnFiltro.filtro {
    width: fit-content !important;
    flex: inherit !important;
}

.btnFiltro.filtro:hover {

    border-color: #808080ab;
    transition: 0.4s;
    background: linear-gradient(181deg, rgb(0 0 0 / 21%) 0%, var(--corAtv) 100%);
    filter: drop-shadow(0px 2px 4px var(--corAtv));

}

.filtro.labels label:hover {

    border-color: #808080ab;
    transition: 0.4s;
    transform: scale(0.95);
    background: linear-gradient(181deg, rgb(0 0 0 / 21%) 0%, var(--corAtv) 100%);
    filter: drop-shadow(0px 2px 4px var(--corAtv));
}

.filtro.labels label:first-child {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

.filtro.labels label:last-child {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

/*####################################*/
/*####################################*/

.btnLabel {
    width: fit-content !important;
    padding: var(--paddingItens);
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    border-radius: 5px;
    margin: 0;
    border: 2px solid;
    display: -webkit-inline-box;
    font-weight: bold;
    display: -ms-inline-flexbox;
    display: inline-flex;
    opacity: 1;
    -webkit-transition: 0.4s;
    -o-transition: 0.4s;
    transition: 0.4s;
    /*
    border-color: var(--corAtv);
    color: var(--corAtv);
    */
    background: #e3e3e35e;
    border-color: grey;
    color: grey;
    fill: grey;
    gap:5px;
}

.btnLabel>input {
    display: none;
}

/*
.btnLabel:hover {
    border-color: #808080ab;
    transition: 0.4s;
    background: linear-gradient(181deg, rgb(0 0 0 / 21%) 0%, var(--corAtv) 100%) !important;
    filter: drop-shadow(0px 2px 4px var(--corAtv));
    color: var(--corTxtAtv);
    fill: var(--corTxtAtv);
    border-color: var(--corTxtAtv);
}
*/

.btnLabel:has(input:checked) {
    background: var(--corAtv);
    /* font-weight:bold; */
    color: var(--corTxtAtv);
    fill: var(--corTxtAtv);
    border-color: var(--corTxtAtv);
    filter: drop-shadow(0px 2px 4px grey);
}
.btnLabel svg,
.btnLabel img {
    
    max-width: 15px;  
    max-height: 15px;
    margin-bottom: 0.5rem;
    margin-top: 0.5rem;

}
.btnLabel img {

    filter:grayscale(0.5);
    margin: 0.5rem;
    transition: 0.4s;

}


/*####################################*/
/*####################################*/

.multiplos{
}
.multiplos>.btnLabel{
    border-radius:0;
    border-left:0;
    border-right:0;
}
.multiplos>.btnLabel:nth-child(1){
    border-top-left-radius:5px;
    border-bottom-left-radius:5px;
    border-left:2px solid !important;
}
.multiplos>.btnLabel + .btnLabel{
    border-left:1px solid grey;
}
.multiplos>.btnLabel:last-child{
    border-top-right-radius:5px;
    border-bottom-right-radius:5px;
    border-right:2px solid !important;
}

/*####################################*/
/*####################################*/


.btnFiltro {

    width: fit-content;
    display: flex;
    place-content: center;
    place-items: center;
    padding: 3px 5px;
    border: 2px solid transparent;
    border-radius: 5px;
    gap: 3px;
    font-size: 11px;

}

.btnFiltro.back>* {

    color: black;
    fill: black;
    transform: rotate(270deg);

}

.btnFiltro>* {

    width: 20px;
    height: 20px;
    font-size: 11px;
    font-weight: bold;

}

.tituloCard {
    transition: 0.4s;
}

.card:hover .tituloCard {
    margin-left: 10px;
    font-weight: bold;
}
.linhaGeneroSelect{
    display:inline-block;
}

/*------------------------------*/
/* FIREFOX - :has() */

.btnLabel.atv {
    background: var(--corAtv);
    color: var(--corTxtAtv);
    fill: var(--corTxtAtv);
    border-color: var(--corTxtAtv);
    filter: drop-shadow(0px 2px 4px grey);
}

.filtroRegua>label.atv {
    border: 2px solid var(--corTxtAtv);
    background: linear-gradient(181deg, rgb(0 0 0 / 21%) 0%, var(--corAtv) 100%);
    background: var(--corAtv);
    font-size: 0.8rem;
    color: var(--corTxtAtv);
    font-weight: bold;
    border-radius: 50%;
    padding: 5px;
    filter: drop-shadow(0px 2px 4px var(--corAtv)) drop-shadow(0px 2px 4px #000000e0);
    width: 15px;
    height: 15px;

}
.filtroRegua>label.atv:after {
    content: var(--content);
    position: absolute;
    margin-top: 45px;
}

.filtroRegua>label.atv {
    filter: drop-shadow(0px 2px 4px var(--corAtv)) drop-shadow(0px 2px 4px #000000e0) !important;
}

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

    .validPreview.prev{
        display:none;
    }

    .validPreview.prev:has(img){
        display:block;
    }
}

/*------------------------------*/
/*safari test*/

@media only screen and (max-height: 600px) and (max-width: 600px) {
    .filtroContent #filtroCorpo:has(input:focus),
    .filtroContent #filtroCorpo{
        bottom: 0;
        position: absolute;
    }
    .filtroContent{
        position:fixed;
        bottom: 0;
    }
}
/*------------------------------*/
.card input[type='text'] {
    border-radius: 4px;
    padding: var(--paddingItens);
    transition-delay: 0.7s !important;
    transition: 0.7s;
    max-width: max-content;
    min-width: max-content;
    width: max-content;
    height:20px;
    border: 2px solid var(--corTxtAtv);
}