.present_container .SearchBar { background: #546e7a; border-radius: 12px; padding: 3px 10px; margin-top: 12px; color: white; } .present_container .SearchBar input { font-size:18px; color: white; margin-left: 5px; padding-left: 2px; height: 35px; line-height: 40px; border-bottom: 1px solid #f8f8f8; box-shadow: none; width: 99%; } .present_container .SearchBar input:focus { border-bottom: 1px solid #fff; box-shadow: 0px 4px 3px -4px #f7f7f7; } .present_container{ background:#f8f8f8; } .present_container .row { margin-bottom: 0; } .filter_container{ border-right: 1px solid; border-color:#A9A9A9; } .filter_container .badge { display: none; position: absolute; top: 15%; right: -38px; font-size: 24px; background: #e0e0e0; padding: 0px 8px 2px 9px; border: 1px solid #b7b7b7; box-shadow: 0px 0px 4px 0px #ccc; cursor: pointer; } @media (max-width: 992px) { .filter_container { width:400px; position: fixed; left: -400px; top: 0px; z-index: 99999; background: white; box-shadow: 0px 0px 5px 5px #f8f8f8; transition: left 0.5s; transition-timing-function: ease-out; height: 100vh; } .filter_container.show { left:0px; } .filter_container .badge { display: block; } .filter_container .FilterModule { overflow-y: auto; height: 100vh; } } .filter_layout{ padding:15px; } .chips_container{ margin-left: 20px; } .chips_container .custom_chip { margin-right:5px; margin-left:5px; margin-top:3px; margin-bottom: 3px; } .chips_container .custom_chip { background:#e8e8e8; color:black; border-radius: 0px } .chips_container .chip_module{ margin-top: 15px; } .products_container{ margin-left: 20px; margin-top: 20px; } .prod_contaier{ margin-top:100px; } .orderBy { width: auto; display: flex; align-items: center; } .orderBy .tool{ cursor: pointer; padding: 10px; font-size: 20px; } .present_container .filters { display: flex; }