/*
The darken/lighten is not giving accurate results for the toasters so specific vars for them below.

- Red background: #c23848 you can get this colour roughly from using the red variable and with HSL lower lightness by 20.
- Blue background: #377ebd you can get this colour roughly from using the blue variable and with HSL lower lightness by 20.
- Orange background: #ff9933
- The text colour on all of these, could they please be #E2E2E2, except from warning which remains with black text.

*/
/*is not being used anywhere; the same as @redAlert*/
:host {
  display: flex;
  flex-direction: column;
  width: 310px;
  color: #E2E2E2;
  max-height: 28px;
  transition: all 0.3s; }
  :host.no-animation {
    transition: none; }
  :host.expand-proxy-search {
    width: 470px;
    max-height: 555px; }
    :host.expand-proxy-search .proxy-selector {
      display: none; }
    :host.expand-proxy-search .proxy-search {
      padding: 5px; }
  :host .expand-btn {
    margin-left: 5px;
    border: none;
    box-shadow: none;
    background: transparent; }

.proxy-selector {
  flex: 1;
  flex-basis: auto;
  margin-bottom: 4px;
  display: flex; }
  .proxy-selector select.search-type {
    margin-right: 2px;
    font-weight: bold;
    color: #FFFFFF; }
  .proxy-selector .user-selector-input {
    width: 100%; }

.proxy-search {
  flex: 1;
  flex-basis: auto;
  min-width: 460px;
  overflow: hidden; }

.expand-bar {
  flex: 1;
  flex-basis: auto;
  text-align: center;
  color: #606060;
  cursor: pointer; }