#TopFilter .box { background-color:var(--color3); }
#TopFilter .filter-content { display:flex; flex-wrap:nowrap; }

#TopFilter .radio-button-list input[type="radio"] {
    display: none;
}

#TopFilter .radio-button-list label {
    margin:0;
    padding:0;
    display: inline-block;
    cursor: pointer;
    border: 1px solid var(--color5);
    border-radius: 0;
    font-size: 16px;
    background: var(--color10);
    transition: all 0.2s ease-in-out;
    user-select: none;
}

#TopFilter .radio-button-list label:hover {
    border-color: var(--color1);
}

#TopFilter .radio-button-list input[type="radio"]:checked + label {
    
    border-color: var(--color2);
    /*box-shadow: 0 0 8px rgba(0,0,0,0.2);*/
}

#TopFilter ul,#TopFilter ul li{ background:none; margin:0; padding:0; }

#TopFilter .item.typeofcommission .radio-button-list label{ width:180px; height:48px; box-sizing:border-box; line-height:48px; text-align:center; text-transform:uppercase; font-weight:500; }
#TopFilter .item.typeofcommission li:first-child{ margin-bottom:24px; }

#TopFilter .item.typeofrealestate { flex:1; justify-items:center; }
#TopFilter .item.typeofrealestate .radio-button-list label{ width:120px; height:120px; box-sizing:border-box; line-height:48px; text-align:center; text-transform:uppercase; font-weight:500;
                                                            display:flex; flex-direction:column; justify-content: space-between; align-items:center;
}
#TopFilter .item.typeofrealestate ul.radio-button-list { display:flex; flex-wrap:nowrap; justify-content:center; }
#TopFilter .item.typeofrealestate ul.radio-button-list li{ margin-right:15px; }
#TopFilter .item.typeofrealestate ul.radio-button-list li:last-child{ margin-right:0; }
#TopFilter .item.typeofrealestate ul.radio-button-list input + label::before {
    content: "";
    display: inline-block;
    width: 80px;
    height: 60px;
    margin-top:10px;
    
}
#TopFilter .item.typeofrealestate ul.radio-button-list input[value="1"] + label::before {
    
    background: url('/images/filter-apartment.png') no-repeat center/contain;
}
#TopFilter .item.typeofrealestate ul.radio-button-list input[value="2"] + label::before {
    
    background: url('/images/filter-house.png') no-repeat center/contain;
}
#TopFilter .item.typeofrealestate ul.radio-button-list input[value="4"] + label::before {
    
    background: url('/images/filter-commercial.png') no-repeat center/contain;
}
#TopFilter .item.typeofrealestate ul.radio-button-list input[value="5"] + label::before {
    
    background: url('/images/filter-land.png') no-repeat center/contain;
}
#TopFilter .item.typeofrealestate ul.radio-button-list input[value="6"] + label::before {
    
    background: url('/images/filter-other.png') no-repeat center/contain;
}

#TopFilter .item.priceandlocation { width:24%; margin-right:4%; min-width:280px; }
#TopFilter .item.priceandlocation .subitem.price{ margin-bottom:24px; }
#TopFilter .item.priceandlocation .subitem.price .subitem{ width:calc(50% - 14px); }
#TopFilter .item.priceandlocation .subitem.price .subitem.priceto{ margin-left:28px; }
#TopFilter .item.search { width:120px; /*padding-left:15px;*/ }
#TopFilter .item.search .button{ width:100%; height:120px;
                                 display: flex;
                                flex-direction: column;
                                justify-content: space-between;
                                align-items: center;
}
#TopFilter .item.search .button::before { content: "";
    display: inline-block;
    width: 80px;
    height: 50px;
    margin-top:20px; 
    background: url('/images/lupaseznam.png') no-repeat center/contain;
}

@media all and (max-width: 1556px) {

    #TopFilter .item.priceandlocation { margin:0; margin-right:15px;  }    
}

@media all and (max-width: 1444px) {
    #TopFilter .filter-content { flex-wrap:wrap; }
    #TopFilter .item.priceandlocation { width:80.8%; margin-top:15px; }
    #TopFilter .item.search { margin-top:15px; justify-content:flex-end; }
    #TopFilter .box .filter-content { max-width:930px; margin-left:auto; margin-right:auto; }
}



@media all and (max-width: 61em) {
    #TopFilter .item.typeofcommission { order:1;  }
    #TopFilter .item.typeofcommission li:first-child { margin-bottom:15px; }
    #TopFilter .item.typeofrealestate { order:3; }
    #TopFilter .item.priceandlocation { order:2; width:calc(100% - 195px); margin-right:0; margin-top:0; margin-left:15px; }
    #TopFilter .item.priceandlocation .subitem.price .subitem { width: calc(50% - 8px); }
    #TopFilter .item.priceandlocation .subitem.price .subitem.priceto { margin-left:15px; }
    #TopFilter .item.priceandlocation .subitem.price { margin-bottom:15px; }
    #TopFilter .item.search { order:4; }
    #TopFilter .item.typeofrealestate { justify-items:left; margin-top:15px; }
}

@media all and (max-width: 893px) {

    #TopFilter .item.typeofrealestate ul.radio-button-list { flex-wrap:wrap; justify-content:center; width:100%; }
    #TopFilter .item.typeofrealestate ul.radio-button-list li {  }
    #TopFilter .item.search { width:100%;  }
        #TopFilter .item.search .button { flex-direction:row; justify-content:center; width:300px; height:48px; margin:auto; }
        #TopFilter .item.search .button::before { width:30px; height:30px; margin-top:0; margin-right:10px; }
}

@media all and (max-width: 48em) {

    #TopFilter .item.typeofrealestate{ margin-top:0;}
        #TopFilter .item.typeofrealestate ul.radio-button-list li { margin-top:15px; }
}

@media all and (max-width: 36em) {

    #TopFilter .item.typeofcommission { order:1; }
    #TopFilter .item.typeofrealestate { order:2; }
    #TopFilter .item.priceandlocation { order:3; }
    #TopFilter .item.search { order:4; }

    #TopFilter .item.typeofcommission { width:100%; }
        #TopFilter .item.typeofcommission li:first-child { margin-bottom:0; }
        #TopFilter .item.typeofcommission .radio-button-list { display:flex; }
        #TopFilter .item.typeofcommission .radio-button-list li { width:calc(50% - 16px); margin-left:8px; margin-right:8px; }
        
        #TopFilter .item.typeofcommission .radio-button-list label { width:100%; }
    #TopFilter .item.typeofrealestate { width:100%; }
    #TopFilter .item.typeofrealestate { flex:auto; }
    #TopFilter .item.typeofrealestate ul.radio-button-list li { width:auto; margin-left:8px; margin-right:8px; }
    #TopFilter .item.typeofrealestate ul.radio-button-list li:last-child { margin-right:8px; }
    #TopFilter .item.priceandlocation { margin-top:15px; width:100%; margin-left:0; }
    #TopFilter .item.typeofcommission .radio-button-list li label { margin:0; }
    #TopFilter .item.typeofcommission .radio-button-list li:last-child label { margin:0; }

    #TopFilter .item.priceandlocation .subitem.price .subitem.priceto { margin-left:8px; margin-right:8px; }
    #TopFilter .item.priceandlocation .subitem.price .subitem { margin-left:8px; margin-right:8px; width:calc(50% - 16px) }
    #TopFilter .item .location { padding-left:8px; padding-right:8px; box-sizing:border-box; width:100%; }
    #TopFilter .item.search { padding-left:8px; padding-right:8px; }
    #TopFilter .item.search .button { width:100%; }
    #TopFilter .box { padding:10px 0;}
    
}