:root {
  /* Main palette colors */
  --color-palette-1: #e3002d; /* purple */
  --color-palette-1-light: #e3002d; /* light purple */
  --color-palette-2: #000000; /* dark purple */
  --color-palette-3: #000000; /* yellow */
  --color-palette-4: #000000; /* light green */
  --color-palette-5: #fff; /* white */

  --header-links-color: var(--color-palette-4) !important;
  --color-header-notification-icon: var(--color-palette-4) !important;
  --color-sidebar-trigger: var(--color-palette-4) !important;

  /* main brand color, used throughout the UI */
  --color-brand-base: var(--color-palette-1) !important;
  --color-brand-light: var(--color-palette-1-light) !important;

  /* left background color of the header */
  --header-background-start: var(--color-palette-5) !important;

  /* right background color of the header */
  --header-background-end: var(--color-palette-2) !important;

  /* used for highlights */
  --color-primary-bright: var(--color-palette-4) !important;

  /* color of links */
  --links-color: var(--color-palette-1-light) !important;

  /* color of links on hover */
  --links-color-hover: var(--color-palette-1) !important;

  /* color of the footer background */
  --footer-background: var(--color-palette-2) !important;

  /* color of the scroll-to-top button */
  --color-scroll-to-top: var(--color-palette-1) !important;

  /* color of selected/highlighted items, like category items, switches, etc */
  --color-item-selected: var(--color-palette-1-light) !important;

  /* color of the highlighted filters */
  --searchfilter-button-color-hover: var(--color-palette-1-light) !important;

  /* default color for labels on cards, usually matches the primary or secondary color */
  --label-default-background: var(--color-palette-3) !important;

  /* Main CTA buttons: buttons that initiate actions, like "Create Offer", "Manage my news", "Become Startup of the Week", etc */
  --button-brand-background: var(--color-palette-1-light) !important;
  --button-brand-color: var(--color-greyscale-xlight) !important;
  --button-brand-background-hover: var(--color-greyscale-xlight) !important;
  --button-brand-color-hover: var(--color-palette-1-light) !important;
  --button-brand-border: var(--color-palette-1-light) !important;
  --button-brand-border-hover: var(--color-palette-1-light) !important;

  /* Positive Buttons: buttons that have a positive meaning, like: Go forward, Submit, Save, etc */
  --button-positive-background: var(--color-palette-1) !important;
  --button-positive-color-hover: var(--color-palette-1) !important;
  --button-positive-border: var(--color-palette-1) !important;
  --button-positive-border-hover: var(--color-palette-1) !important;
}

/* do not remove */
html,
.App {
  display: block !important;
}

.Header .Header__search .Searchbox__input {
  border: 1px solid var(--color-palette-4) !important;
}
.Avatar_Avatar--dropdownAccount__1vRkw {
  border: 0;
}

/* for  IE 11 */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  /* change using colors from palette in HEX, but not variables */

  .Header__inner {
    background-image: linear-gradient(to right, #161a40, #272e71) !important;
  }

  /* don't touch, leave like this - added because IE11 was changing these item's color too */
  .UserSidebarLink {
    color: #212529 !important;
  }

  .HeaderDropDownLinks__submenuLink {
    color: #7e8c89 !important;
  }
}
