.searchEngine { font-family: roboto, sans-serif; width: 100%; height: auto; position: relative;; border-radius: 6px; color: var(--base-color); background: var(--base-container); margin-top: 10px; } #searchEnginePadding { padding: 10px; height: auto; } #searchEngineHeader { height: 32px; width: 100%; display: flex; flex-direction: row; justify-content: left; } #searchEngineHeaderIcon { background: url('../assets/ui-icons/internet.svg'); background-size: cover; margin-right: 10px; width: 28px; height: 28px; } #searchEngineHeaderLabel { text-align: left; font-weight: bold; font-size: 14pt; margin-top: auto; margin-bottom: auto; } #searchEngineContainer { margin-top: 5px; } #searchEngineSelect { height: 32px; width: 100%; box-sizing: border-box; margin-top: 5px; border: none; text-align: center; border-radius: 6px; color: var(--base-color); background: var(--base-container); -webkit-appearance: none; -moz-appearance: none; appearance: none; } #searchEngineSelect:hover { outline: none !important; cursor: pointer; background: var(--base-hover-bg) !important; } #searchEngineSelect:focus { outline: none !important; background: var(--base-focus-bg) !important; } #searchEngineSelect:active { outline: none !important; background: var(--base-active-bg) !important; } #searchEngineSelect option { color: initial; border: none; } select::-ms-expand { display: none; } #searchEngineAsDefault { background: var(--base-container); color: var(--base-color); text-align: center; width: 100%; height: 32px; margin-top: 5px; border-radius: 6px; cursor: pointer; border: none; /*Center vertically*/ display: flex; justify-content: center; align-items: center; } #searchEngineAsDefault:hover { outline: none; background: var(--base-hover-bg); } #searchEngineAsDefault:active { outline: none; background: var(--base-active-bg); } #searchEngineAsDefault:focus { outline: none; background: var(--base-focus-bg); } @media screen and (max-width: 580px) { .searchEngine { width: 96vw; box-sizing: border-box; } }