#nav_filter
{
    display: var(--display_nav_filter, none);
}
#input_nav_search:checked + header ul li #label_nav_filter::after
{
    transform: rotate(90deg);
}

#input_nav_search:checked ~ #nav_search
{
    transform: scaleX(1);
}

#nav_search
{
    position: var(--position_search_bar, absolute);
    clear: var(--nav_search-clear, none);
    top: var(--top_search_bar, 11rem);
    margin: var(--margin_nav_search, 0 1rem);
    width: var(--width_nav_search, calc(100% - 2rem));
    z-index: 120;
    transition: .3s;
    transform: var(--transform_nav_search, none);
    transform-origin: 100% 50%;
    display: var(--nav_search-display, block);
}

.search_bar
{
    padding: 0;
    margin: 0 auto;
    background-color: #2e4f4f;
    border-radius: 5px;
    color: #e9f4fd;
    z-index: 3;
    text-align: var(--search_bar-text-align, center);
    font-size: 0;
}

#filter_opts li
{
    width: var(--width_search_bar_li, 10%);
    font-size: var(--font-size);
}

#filter_opts li:first-child
{
    width: var(--width_search_bar_li__first, calc(40% - 5rem));
    margin-left: var(--margin-left_li__first, 3rem);
}
#filter_opts li:nth-child(2)
{
    width: var(--width_search_bar_li__second, 35%);
}

#filter_opts li:last-child
{
    text-align: right;
}

.search_bar label
{
    display: inline-block;
    width: var(--search_bar-width, auto);
}

.search_bar input
, .search_bar select
, .search_bar textarea
{
    border: none;
    width: auto;
}



#filter_
{
    display: none;
}

#filter_opts
{
    transform: var(--transform_filter_opts);
    transform-origin: 100% 100%;
    transition: .3s;
    padding: 1rem;
    font-size: 0;
}

#filter_opts label
{
    margin: var(--margin_filter_opts_label, 0 .5rem 0 0);
}



#filter_opts li label
, .label
{
    font-size: var(--font-size);
}

.search_bar ~ label[for="country"]
{
    width: var(--serarch_bar_country-width, auto);
}

.search_bar ~ label[for="region"]
{
    display: inline-block;
    width: var(--serarch_bar_region-width, auto) !important;
}

.search_bar label[for="price"]
{
    display: inline-block;
    width: var(--serarch_bar_price-width, auto);
}

#filter_opts label[for^="property_type_"]
{
    margin-left: var(--property_label-margin-right, 1rem);
}

#filter_opts select
{
    margin-top: var(--filter_opts_select-margin-top, .5rem);
}

#filter_opts li + li
, label[for="region"]
{
    margin-left: var(--filter_opts-margin-left, 2rem);
}

label[for="region"]::before
{
    content: " ";
    display: block;
}

#filter_:checked ~ #filter_opts
{
    transform: scalex(1);
}

.search_bar input
{
    margin: 0;
}