/*
-----------------------------------------------------
BARRA FILTER
-----------------------------------------------------
*/
#btn-filter{
    position: fixed; top: 100px; left: 10px;
    width: 80px; height: 40px;
    background: var(--color-dark);
    cursor: pointer;
    border-radius: 4px;
    z-index: 100;
}
#btn-filter input{
    display: none;
}
#btn-filter span{
    text-align: center;
    color: white;
    display: block;
    margin-top: 7px;
    
}

#background-filter
{
    width: 100vw;
    height: 100vh;
    position: fixed;
    display: none;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 88;
}

#content-main{
    width: 300px;
    height: 90vh;
    position: fixed; top: 5vh; left: 20px;
    transform: translate(-320px, 0);
    padding-top: 30px;
    padding-bottom: 30px;
    box-shadow: 1px 1px 1px 1px rgb(0, 0, 0, 0.1);
    z-index: 100;
    background: var(--color-dark);
    border-radius: 8px;
    overflow-y: auto;
    transition-duration: 0.4s;
}
#content-main::-webkit-scrollbar {
    background: transparent;
}
#content-main::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.25);
    border-radius: 8px;
    width: 70%;
}
#content-main .title-menu
{
    padding-bottom: 15px;
}
#content-main .title-menu span
{
    padding-bottom: 15px;
    font-size: 1.3em;
    
}
#content-main .title-menu
{
    color: white;
}
.content-filters .item-mobile 
{
    background: var(--color-dark-2);
    border-radius: 8px;
    margin-bottom: 0.5em;
}
.content-filters .item-mobile .title-label
{
    width: 100%;
    cursor: pointer;
    border-radius: 8px;
    transition-duration: 0.4s;
    position: relative;
    background: var(--color-dark-2);
}
.content-filters .item-mobile .title-label:hover
{
    background-color: #004462;
}
.content-filters .item-mobile .title-label span
{
    padding: 0.5em 1em;
    display: block;
    font-size: 0.9em;
    color: #eee;
    
}
.content-filters .item-mobile .title-label .check
{    
    background: #25d366;
    height: 10px;
    width: 10px;
    border-radius: 100%;
    position: absolute;
    top: 50%;
    right: 1em;
    transform: translateY(-50%);
    display: none;
}
.content-filters .item-mobile .filters{
    display: none;
}
.content-filters .item-mobile .item-content
{
    display: none;
    padding: 1em;
    background: var(--color-dark-2);
}
#content-main .content
{
    color: white;
    font-size: 0.9em;
}
#content-main .content .option
{
    background: var(--color-dark-2);
    border-bottom: 1px solid rgba(100, 100, 100, 1);
    transition-duration: 0.4s;
}
#content-main .content .option:hover
{
    background: var(--color-dark);
}
#content-main .content .option:first-child
{
    border-radius: 8px 8px 0 0;
}
#content-main .content .option:last-child
{
    border-radius: 0 0 8px 8px;
    border-bottom: none;
}
#content-main .content .option label
{
    width: 100%;
    height: 100%;
    padding: 5px 10px;
    cursor: pointer;
}
#content-main .content .option .filter-selected,
#content-main .item-mobile .title-label .filter-selected
{
    height: 10px;
    width: 10px;
    background: #25d366;
    border-radius: 100px;
    display: inline-block;
    margin-right: 5px;
}
#content-main .content .option .filter-no-selected
{
    height: 10px;
    width: 10px;
    background: none;
    border-radius: 100px;
    display: inline-block;
    margin-right: 5px;
}
#content-main .content input
{
    display: none;
}
#content-main .content #mobile-price-min,
#content-main .content #mobile-price-max,
#content-main .content #mobile-surface-max,
#content-main .content #mobile-surface-min
{
    display: block;
    width: 100%;
}
#content-main .content .inputNumber
{
    display: block;
    width: 100%;
    margin-right: 5px;
    border: none;
    border-radius: 2px;
    padding: 2px 4px;
}

#content-main .content .option-currency label
{
    width: 100%;
    border-radius: 4px;
    transition-duration: 0.4s;
    margin-bottom: 1em;
}
#content-main .content .option-currency label:hover
{
    background: var(--color-dark);
    cursor: pointer;
}
#content-main .content .option-currency .center
{
    width: 100%;
    text-align: center;
    padding: 0.5em 0;
}
#content-main .content .option-currency input:checked + label {
    background: var(--color-dark);
}
#content-main .apply .btn-mobile-apply
{
    border: none;
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 0.9em;
    display: block;
    margin: 1em 0 1em auto;
}