.logs-topbar { padding-bottom: 30px; @media (min-width: 600px) { display: flex; justify-content: space-between; } .pagination-container.position-top { padding-top: 0 !important; } } .logs-search { display: flex; position: relative; width: 52%; @media (max-width: 599px) { margin-bottom: 30px; width: 100%; } } .logs-search-input, .logs-search-btn, .logs-search-btn-cancel { height: 24px; background-color: #f5f6fa; border: 1px solid #f5f6fa; color: #333; border-radius: 2px; outline: none; font-family: Nunito, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 12px; font-weight: 600; } .logs-search-input { padding-left: 6px; display: inline-flex; flex-grow: 2; min-width: 160px; &::placeholder { color: #a3a9b5; } } .logs-search-btn { margin-left: 6px; color: #a3a9b5; transition: .1s ease-in; cursor: pointer; &:hover { background-color: $primary; color: #fff; border-color: $primary; } } .logs-search-btn-cancel { color: #a3a9b5; cursor: pointer; transition: .1s ease-in; position: absolute; top: 0; right: 59px; &:hover { color: #333; } }