/* You can add global styles to this file, and also import other style files */
[hidden] {
    display: none !important; }
  
  .igx-display-container {
    display: inherit;
    position: relative;
    width: 100%;
    overflow: hidden; }
  
  .igx-display-container--inactive {
    width: 100%; }
  
  .igx-vhelper--vertical, .igx-vhelper--horizontal {
    display: block;
    overflow: auto;
    z-index: 24; }
  
  .igx-vhelper--vertical {
    position: absolute;
    width: 18px;
    top: 0;
    right: 0; }
  
  .igx-vhelper--horizontal {
    width: 100%; }
  
  .igx-vhelper--vertical .igx-vhelper__placeholder-content {
    width: 1px; }
  
  .igx-vhelper--horizontal .igx-vhelper__placeholder-content {
    height: 1px; }
  
  .igx-toggle--hidden {
    display: none !important; }
  
  .igx-overlay {
    width: 0;
    height: 0; }
  
  html {
    box-sizing: border-box; }
  
  *,
  *::before,
  *::after {
    box-sizing: inherit; }
  
  button,
  input,
  optgroup,
  select,
  textarea {
    font: inherit;
    margin: 0; }
  
  textarea {
    overflow: auto; }
  
  button,
  html input[type='button'],
  input[type='reset'],
  input[type='submit'] {
    -webkit-appearance: button;
    cursor: pointer; }
  
  button[disabled],
  html input[disabled] {
    cursor: default; }
  
  input[type='number']::-webkit-outer-spin-button {
    height: auto; }
  
  input[type='search']::-webkit-search-cancel-button,
  input[type='search']::-webkit-search-decoration {
    -webkit-appearance: none; }
  
  html,
  body,
  div,
  span,
  applet,
  object,
  iframe,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  blockquote,
  pre,
  a,
  abbr,
  acronym,
  address,
  big,
  cite,
  code,
  del,
  dfn,
  em,
  img,
  ins,
  kbd,
  q,
  s,
  samp,
  small,
  strike,
  strong,
  sub,
  sup,
  tt,
  var,
  b,
  u,
  i,
  center,
  dl,
  dt,
  dd,
  ol,
  ul,
  li,
  fieldset,
  form,
  label,
  legend,
  table,
  caption,
  tbody,
  tfoot,
  thead,
  tr,
  th,
  td,
  article,
  aside,
  canvas,
  details,
  embed,
  figure,
  figcaption,
  footer,
  header,
  hgroup,
  menu,
  nav,
  output,
  ruby,
  section,
  summary,
  time,
  mark,
  audio,
  video {
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align: baseline; }
  
  article,
  aside,
  details,
  figcaption,
  figure,
  footer,
  header,
  hgroup,
  menu,
  nav,
  section {
    display: block; }
  
  ol,
  ul {
    list-style: none; }
  
  blockquote,
  q {
    quotes: none; }
  
  blockquote::before,
  blockquote::after,
  q::before,
  q::after {
    content: ''; }
  
  table {
    border-collapse: collapse;
    border-spacing: 0; }
  
  a {
    text-decoration: none;
    color: #e41c77; }
  
  html {
    font-size: 16px;
    line-height: 27px;
    font-size-adjust: 100%;
    font-family: "微軟正黑體";
    font-weight: 400;
    color: rgba(0, 0, 0, 0.74);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale; }
  
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-weight: 600; }
  
  ul,
  ol,
  pre,
  table,
  blockquote {
    margin-top: 0;
    margin-bottom: 1.6875rem; }
  
  ul ul,
  ol ol,
  ul ol,
  ol ul {
    margin-top: 0;
    margin-bottom: 0; }
  
  blockquote {
    font-size: 1.5rem;
    line-height: 2.1875rem;
    font-style: italic; }
    blockquote::before, blockquote::after {
      content: '\''; }
  
  /* Let's make sure all's aligned */
  hr {
    margin: -1px 0;
    border: 1px solid; }
  
  a,
  b,
  i,
  strong,
  em,
  small,
  code {
    line-height: 0; }
  
  sub,
  sup {
    line-height: 0;
    position: relative;
    vertical-align: baseline; }
  
  sup {
    top: -.5em; }
  
  sub {
    bottom: -.25em; }
  
  @media only screen and (min-width: 0) {
    h1 {
      font-size: 2rem;
      line-height: 2.5rem;
      margin-top: 1.6875rem;
      margin-bottom: 3.375rem; }
    h2 {
      font-size: 1.625rem;
      line-height: 1.875rem;
      margin-top: 1.6875rem;
      margin-bottom: 1.6875rem; }
    h3 {
      font-size: 1.375rem;
      line-height: 1.6875rem;
      margin-top: 1.6875rem;
      margin-bottom: 0; }
    h4 {
      font-size: 1.375rem;
      line-height: 1.6875rem;
      margin-top: 1.6875rem;
      margin-bottom: 0; }
    p {
      line-height: 1.375rem;
      margin-top: 0;
      margin-bottom: 1.6875rem; } }
  
  @media only screen and (min-width: 768px) {
    h1 {
      font-size: 2.5rem;
      line-height: 2.8125rem;
      margin-top: 1.6875rem;
      margin-bottom: 3.375rem; }
    h2 {
      font-size: 2rem;
      line-height: 2.5rem;
      margin-top: 1.6875rem;
      margin-bottom: 1.6875rem; }
    h3 {
      font-size: 1.5rem;
      line-height: 1.875rem;
      margin-top: 1.6875rem;
      margin-bottom: 0; }
    h4 {
      font-size: 1.125rem;
      line-height: 1.375rem;
      margin-top: 1.6875rem;
      margin-bottom: 0; }
    p {
      line-height: 1.6875rem;
      margin-top: 0;
      margin-bottom: 1.6875rem; } }
  
  @media only screen and (min-width: 1024px) {
    h1 {
      font-size: 3rem;
      line-height: 3.375rem;
      margin-top: 1.6875rem;
      margin-bottom: 3.375rem; }
    h2 {
      font-size: 2.25rem;
      line-height: 2.8125rem;
      margin-top: 1.6875rem;
      margin-bottom: 1.6875rem; }
    h3 {
      font-size: 1.75rem;
      line-height: 2.1875rem;
      margin-top: 1.6875rem;
      margin-bottom: 0; }
    h4 {
      font-size: 1.125rem;
      line-height: 1.375rem;
      margin-top: 1.6875rem;
      margin-bottom: 0; }
    p {
      margin-top: 0;
      margin-bottom: 1.6875rem; } }
  
  :root {
    --igx-ripple-color: rgba(0, 0, 0, 0.74);
    --igx-ripple-test: test; }
  
  .igx-ripple__inner {
    display: block;
    position: absolute;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.74);
    pointer-events: none;
    transform-origin: center;
    transform: translate3d(0, 0, 0) scale(0);
    will-change: opacity, transform;
    opacity: .5; }
  
  .igx-ripple {
    overflow: hidden; }
  
  :root {
    --igx-avatar-icon-background: rgba(0, 0, 0, 0.26);
    --igx-avatar-icon-color: rgba(0, 0, 0, 0.74);
    --igx-avatar-initials-background: rgba(0, 0, 0, 0.26);
    --igx-avatar-initials-color: rgba(0, 0, 0, 0.74);
    --igx-avatar-image-background: transparent; }
  
  .igx-avatar, .igx-avatar--rounded {
    position: relative;
    user-select: none; }
  
  .igx-avatar--rounded {
    border-radius: 50%; }
  
  .igx-avatar--small {
    width: 2.5rem;
    height: 2.5rem;
    min-width: 2.5rem; }
  
  .igx-avatar--medium {
    width: 4rem;
    height: 4rem;
    min-width: 4rem; }
  
  .igx-avatar--large {
    width: 5.5rem;
    height: 5.5rem;
    min-width: 5.5rem; }
  
  .igx-avatar__icon, .igx-avatar__image, .igx-avatar__initials {
    width: inherit;
    height: inherit;
    border-radius: inherit; }
  
  .igx-avatar__icon {
    display: flex;
    justify-content: center;
    align-items: center;
    color: rgba(0, 0, 0, 0.74);
    background: rgba(0, 0, 0, 0.26); }
  
  .igx-avatar__image {
    background-color: transparent;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center; }
  
  .igx-avatar__initials {
    display: flex;
    justify-content: center;
    align-items: center;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 0.74);
    background-color: rgba(0, 0, 0, 0.26); }
  
  .igx-avatar--small .igx-avatar__initials {
    font-size: 1.25rem;
    line-height: 2.5rem; }
  
  .igx-avatar--medium .igx-avatar__initials {
    font-size: 2rem;
    line-height: 4rem; }
  
  .igx-avatar--large .igx-avatar__initials {
    font-size: 2.75rem;
    line-height: 5.5rem; }
  
  :root {
    --igx-badge-icon-color: #fff;
    --igx-badge-text-color: #fff;
    --igx-badge-border-color: #fff;
    --igx-badge-background-color: #09f;
    --igx-badge-badge-shadow: none;
    --igx-badge-border-width: 0; }
  
  .igx-badge, .igx-badge__circle, .igx-badge__circle--info, .igx-badge__circle--success, .igx-badge__circle--warning, .igx-badge__circle--error {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 22px;
    height: 22px;
    font-size: 0.6875rem;
    font-weight: normal;
    color: #fff;
    line-height: 1; }
    .igx-badge igx-icon, .igx-badge__circle igx-icon, .igx-badge__circle--info igx-icon, .igx-badge__circle--success igx-icon, .igx-badge__circle--warning igx-icon, .igx-badge__circle--error igx-icon {
      display: inline-flex;
      justify-content: center;
      align-items: center;
      width: 20px;
      height: 20px;
      font-size: 0.75rem;
      font-weight: normal;
      color: #fff; }
  
  .igx-badge__circle-value {
    white-space: nowrap;
    padding: 0.25rem; }
  
  .igx-badge__circle {
    border-radius: 11px;
    box-shadow: none;
    border-width: 0;
    border-color: #fff;
    border-style: solid;
    overflow: hidden; }
  
  .igx-badge__circle--default {
    background-color: #09f; }
  
  .igx-badge__circle--success {
    background-color: #4eb862; }
  
  .igx-badge__circle--info {
    background-color: #1377d5; }
  
  .igx-badge__circle--warning {
    background-color: #fbb13c; }
  
  .igx-badge__circle--error {
    background-color: #ff134a; }
  
  .igx-badge--hidden {
    visibility: hidden; }
  
  :root {
    --igx-bottom-nav-background: #fff;
    --igx-bottom-nav-idle-item-color: rgba(0, 0, 0, 0.62);
    --igx-bottom-nav-active-item-color: #09f; }
  
  .igx-bottom-nav__panel, .igx-bottom-nav__panel--selected {
    display: none; }
  
  .igx-bottom-nav__panel--selected {
    display: block; }
  
  .igx-bottom-nav__menu, .igx-bottom-nav__menu--top, .igx-bottom-nav__menu--bottom {
    display: flex;
    position: fixed;
    justify-content: center;
    align-items: center;
    left: 0;
    right: 0;
    height: 56px;
    background: #fff;
    overflow: hidden;
    z-index: 8; }
  
  .igx-bottom-nav__menu--top {
    top: 0;
    bottom: inherit;
    box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.26), 0 8px 10px 1px rgba(0, 0, 0, 0.12), 0 3px 14px 2px rgba(0, 0, 0, 0.08); }
  
  .igx-bottom-nav__menu--bottom {
    top: inherit;
    bottom: 0;
    box-shadow: 0 -2px 4px -1px rgba(0, 0, 0, 0.26), 0 -4px 5px 0 rgba(0, 0, 0, 0.12), 0 -1px 10px 0 rgba(0, 0, 0, 0.08); }
  
  .igx-bottom-nav__menu-item, .igx-bottom-nav__menu-item--selected, .igx-bottom-nav__menu-item--disabled {
    display: flex;
    position: relative;
    flex-flow: column nowrap;
    flex: 1;
    align-items: center;
    justify-content: center;
    min-width: 80px;
    max-width: 168px;
    height: 100%;
    color: rgba(0, 0, 0, 0.62);
    cursor: pointer;
    user-select: none;
    overflow: hidden;
    padding: 0 0.75rem;
    -webkit-tap-highlight-color: transparent; }
  
  .igx-bottom-nav__menu-item--disabled {
    opacity: .5;
    cursor: default; }
  
  .igx-bottom-nav__menu-item--selected .tab-icon, .igx-bottom-nav__menu-item--selected .tab-label {
    color: #09f;
    transition: color 0.15s cubic-bezier(0.455, 0.03, 0.515, 0.955), opacity 0.25s cubic-bezier(0.455, 0.03, 0.515, 0.955); }
  
  .igx-bottom-nav__menu-item .tab-label, .igx-bottom-nav__menu-item--selected .tab-label {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    padding-top: 4px;
    font-size: 0.75rem;
    line-height: 0.75rem;
    max-width: 100%;
    text-align: center;
    transform: translateZ(0);
    transition: transform 0.15s cubic-bezier(0.455, 0.03, 0.515, 0.955);
    z-index: 1; }
  
  .igx-bottom-nav__menu-item .tab-icon, .igx-bottom-nav__menu-item--selected .tab-icon {
    display: flex;
    position: relative;
    justify-content: center;
    height: 24px;
    padding: 0 8px;
    transform: translateZ(0);
    transition: transform 0.15s cubic-bezier(0.455, 0.03, 0.515, 0.955);
    z-index: 1; }
    .igx-bottom-nav__menu-item .tab-icon igx-badge, .igx-bottom-nav__menu-item--selected .tab-icon igx-badge {
      position: absolute;
      top: -6px;
      right: -6px;
      padding: 1px; }
  
  .igx-bottom-nav__menu-item--selected .tab-icon {
    transform: translateY(-2px); }
  
  .igx-bottom-nav__menu-item--selected .tab-label {
    transform: translateY(-2px) scale(1.16667); }
  
  :root {
    --igx-button-button-roundness: 2px;
    --igx-button-flat-text-color: #e41c77;
    --igx-button-flat-background: transparent;
    --igx-button-flat-hover-background: rgba(228, 28, 119, 0.05);
    --igx-button-flat-hover-text-color: #e41c77;
    --igx-button-flat-focus-background: rgba(223, 54, 131, 0.12);
    --igx-button-flat-focus-text-color: #e41c77;
    --igx-button-raised-text-color: black;
    --igx-button-raised-background: #e41c77;
    --igx-button-raised-hover-background: #dc0a6a;
    --igx-button-raised-hover-text-color: black;
    --igx-button-raised-focus-background: #dc0a6a;
    --igx-button-raised-focus-text-color: black;
    --igx-button-fab-text-color: black;
    --igx-button-fab-background: #e41c77;
    --igx-button-fab-hover-text-color: black;
    --igx-button-fab-hover-background: #dc0a6a;
    --igx-button-fab-focus-background: #dc0a6a;
    --igx-button-fab-focus-text-color: black;
    --igx-button-icon-color: rgba(0, 0, 0, 0.74);
    --igx-button-icon-background: transparent;
    --igx-button-icon-hover-background: rgba(0, 0, 0, 0.04);
    --igx-button-icon-hover-color: rgba(0, 0, 0, 0.74);
    --igx-button-icon-focus-background: rgba(0, 0, 0, 0.26);
    --igx-button-icon-focus-color: rgba(0, 0, 0, 0.74);
    --igx-button-disabled-color: rgba(0, 0, 0, 0.26);
    --igx-button-disabled-background: rgba(0, 0, 0, 0.04); }
  
  .igx-button, .igx-button--flat, .igx-button--raised {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    min-width: 5.5rem;
    height: 2.25rem;
    padding: 0 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1;
    text-align: center;
    border: none;
    border-radius: 2px;
    text-transform: uppercase;
    cursor: pointer;
    user-select: none;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    overflow: hidden;
    transition: all 0.15s ease-out; }
  
  .igx-button--flat {
    background: transparent;
    color: #e41c77; }
    .igx-button--flat:hover {
      background: rgba(228, 28, 119, 0.05);
      color: #e41c77; }
    .igx-button--flat:focus, .igx-button--flat:active {
      background: rgba(223, 54, 131, 0.12);
      color: #e41c77; }
  
  .igx-button--raised {
    color: black;
    background: #e41c77;
    box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.26), 0 2px 2px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.08); }
    .igx-button--raised:focus, .igx-button--raised:hover {
      color: black;
      background: #dc0a6a;
      box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.26), 0 4px 5px 0 rgba(0, 0, 0, 0.12), 0 1px 10px 0 rgba(0, 0, 0, 0.08); }
    .igx-button--raised:active {
      color: black;
      background: #dc0a6a;
      box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.26), 0 8px 10px 1px rgba(0, 0, 0, 0.12), 0 3px 14px 2px rgba(0, 0, 0, 0.08); }
  
  .igx-button--fab, .igx-button--icon {
    display: inline-flex;
    position: relative;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    border: none;
    border-radius: 50%;
    outline: none;
    cursor: pointer;
    transition: all 0.15s ease-out;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    overflow: hidden;
    filter: blur(0); }
  
  .igx-button--fab {
    width: 3.5rem;
    height: 3.5rem;
    color: black;
    background: #e41c77;
    box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.26), 0 6px 10px 0 rgba(0, 0, 0, 0.12), 0 1px 18px 0 rgba(0, 0, 0, 0.08); }
    .igx-button--fab:hover {
      box-shadow: 0 7px 8px -4px rgba(0, 0, 0, 0.26), 0 12px 17px 2px rgba(0, 0, 0, 0.12), 0 5px 22px 4px rgba(0, 0, 0, 0.08);
      color: black;
      background: #dc0a6a; }
    .igx-button--fab:focus, .igx-button--fab:active {
      color: black;
      background: #dc0a6a; }
  
  .igx-button--icon {
    width: 2.25rem;
    height: 2.25rem;
    font-size: 1rem;
    padding: 0;
    color: rgba(0, 0, 0, 0.74);
    background: transparent; }
    .igx-button--icon:hover {
      transition: all 0.15s ease-out;
      color: rgba(0, 0, 0, 0.74);
      background: rgba(0, 0, 0, 0.04); }
    .igx-button--icon:focus, .igx-button--icon:active {
      color: rgba(0, 0, 0, 0.74);
      background: rgba(0, 0, 0, 0.26); }
  
  .igx-button--disabled {
    color: rgba(0, 0, 0, 0.26) !important;
    background: rgba(0, 0, 0, 0.04) !important;
    pointer-events: none;
    box-shadow: none; }
    .igx-button--flat.igx-button--disabled {
      background: transparent !important; }
  
  :root {
    --igx-button-group-item-text-color: rgba(0, 0, 0, 0.62);
    --igx-button-group-item-background: #fff;
    --igx-button-group-item-border-color: transparent;
    --igx-button-group-item-hover-text-color: rgba(0, 0, 0, 0.74);
    --igx-button-group-item-hover-background: rgba(0, 0, 0, 0.26);
    --igx-button-group-item-selected-text-color: rgba(0, 0, 0, 0.74);
    --igx-button-group-item-selected-background: rgba(0, 0, 0, 0.26);
    --igx-button-group-item-selected-border-color: rgba(0, 0, 0, 0.12);
    --igx-button-group-disabled-text-color: rgba(0, 0, 0, 0.26);
    --igx-button-group-disabled-background-color: rgba(0, 0, 0, 0.04); }
  
  .igx-button-group, .igx-button-group--vertical {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    border-radius: 2px;
    box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.26), 0 2px 2px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.08);
    transition: box-shadow .2s ease;
    overflow: hidden;
    background-color: #fff; }
    .igx-button-group .igx-button--disabled, .igx-button-group--vertical .igx-button--disabled {
      color: rgba(0, 0, 0, 0.26) !important;
      background-color: rgba(0, 0, 0, 0.04) !important; }
  
  .igx-button-group--vertical {
    flex-flow: column nowrap; }
  
  .igx-button-group__item, .igx-button-group__item--selected, .igx-button-group--vertical .igx-button-group__item, .igx-button-group--vertical .igx-button-group__item--selected {
    box-sizing: content-box;
    flex-grow: 1;
    flex-basis: 0;
    border: initial;
    border-radius: 0;
    border-left: 1px solid;
    border-right: 1px solid;
    border-color: transparent;
    color: rgba(0, 0, 0, 0.62);
    background-color: #fff;
    min-width: 24px;
    min-height: 36px;
    font-weight: 600; }
    .igx-button-group__item:first-child, .igx-button-group__item--selected:first-child {
      border-left-width: 0; }
    .igx-button-group__item:last-child, .igx-button-group__item--selected:last-child {
      border-right-width: 0; }
    .igx-button-group__item:hover, .igx-button-group__item--selected:hover, .igx-button-group__item:focus, .igx-button-group__item--selected:focus {
      color: rgba(0, 0, 0, 0.74);
      background-color: rgba(0, 0, 0, 0.26); }
  
  .igx-button-group--vertical .igx-button-group__item {
    border-left: 0;
    border-right: 0;
    border-bottom: 1px solid;
    border-color: transparent; }
    .igx-button-group--vertical .igx-button-group__item:first-child {
      border-top: 0; }
  
  .igx-button-group__item--selected, .igx-button-group--vertical .igx-button-group__item--selected {
    color: rgba(0, 0, 0, 0.74);
    background-color: rgba(0, 0, 0, 0.26);
    border-color: rgba(0, 0, 0, 0.12); }
    .igx-button-group__item--selected:hover, .igx-button-group__item--selected:focus {
      color: rgba(0, 0, 0, 0.74);
      background-color: rgba(0, 0, 0, 0.26);
      border-color: rgba(0, 0, 0, 0.12); }
  
  .igx-button-group__item-content {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    text-align: center; }
    .igx-button-group__item-content * ~ * {
      margin-left: 0.625rem; }
  
  :root {
    --igx-calendar-content-background: #fff;
    --igx-calendar-content-text-color: rgba(0, 0, 0, 0.87);
    --igx-calendar-header-background: #e41c77;
    --igx-calendar-header-text-color: black;
    --igx-calendar-picker-arrow-color: rgba(0, 0, 0, 0.74);
    --igx-calendar-picker-arrow-hover-color: #e41c77;
    --igx-calendar-picker-text-color: rgba(0, 0, 0, 0.74);
    --igx-calendar-picker-text-hover-color: #e41c77;
    --igx-calendar-inactive-text-color: rgba(0, 0, 0, 0.26);
    --igx-calendar-weekend-text-color: rgba(0, 0, 0, 0.26);
    --igx-calendar-year-current-text-color: #e41c77;
    --igx-calendar-month-current-text-color: #e41c77;
    --igx-calendar-year-hover-text-color: #e41c77;
    --igx-calendar-month-hover-text-color: #e41c77;
    --igx-calendar-date-selected-background: #e41c77;
    --igx-calendar-date-selected-text-color: black;
    --igx-calendar-date-current-text-color: #e41c77;
    --igx-calendar-date-hover-background: rgba(0, 0, 0, 0.08); }
  
  .igx-calendar, .igx-calendar--vertical {
    display: flex;
    flex-flow: column nowrap;
    width: 100%;
    background: #fff;
    overflow: hidden;
    outline: none; }
  
  .igx-calendar--vertical {
    flex-flow: row nowrap; }
    .igx-calendar--vertical .igx-calendar__header {
      min-width: 10.5em; }
  
  .igx-calendar__header {
    background-color: #e41c77;
    color: black;
    padding: 1em; }
  
  .igx-calendar__header-year {
    margin: 0;
    color: currentColor;
    font-size: 1.125em;
    opacity: .8; }
  
  .igx-calendar__header-date, .igx-calendar--vertical .igx-calendar__header-date {
    display: flex;
    margin: 0;
    font-size: 2.375em;
    line-height: 1.375em; }
    .igx-calendar__header-date .date-text {
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden; }
  
  .igx-calendar--vertical .igx-calendar__header-date {
    flex-flow: column nowrap; }
  
  .date__el:hover, .date__el:focus {
    color: #e41c77;
    cursor: pointer; }
  
  .igx-calendar__body-picker {
    display: flex;
    height: 3.5em;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 1em;
    padding-left: 1em;
    padding-right: 1em; }
  
  .prev, .next {
    display: inline-flex;
    color: rgba(0, 0, 0, 0.74);
    user-select: none;
    cursor: pointer; }
    .prev:hover, .next:hover {
      color: #e41c77; }
  
  .igx-calendar[dir='rtl'] .prev, .igx-calendar--vertical[dir='rtl'] .prev,
  .igx-calendar[dir='rtl'] .next,
  .igx-calendar--vertical[dir='rtl'] .next {
    transform: scaleX(-1); }
  
  .date {
    font-size: 1.125em;
    line-height: 1.375em;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.74);
    text-align: center; }
  
  .igx-calendar__body {
    flex: 1 1 auto;
    padding-top: 1em;
    padding-bottom: 1em;
    overflow: hidden; }
  
  .igx-calendar__body-row, .igx-calendar__body-row--wrap {
    display: flex;
    justify-content: space-between;
    padding: 0 1em; }
  
  .igx-calendar__body-row--wrap {
    flex-wrap: wrap; }
  
  .igx-calendar__body-column {
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
    align-items: center; }
  
  .igx-calendar__label, .igx-calendar__date, .igx-calendar__date--inactive, .igx-calendar__date--selected, .igx-calendar__date--current, .igx-calendar__date--weekend, .igx-calendar__year, .igx-calendar__year--current, .igx-calendar__month, .igx-calendar__month--current {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    width: 2.5em;
    height: 2.5em;
    min-width: 2ch;
    font-size: 1em;
    margin: 0.125em;
    line-height: 2.5em;
    text-align: center;
    border-radius: 1.25em;
    color: rgba(0, 0, 0, 0.87);
    cursor: pointer;
    outline: none;
    transition: background .15s ease-out; }
  
  .igx-calendar__label {
    color: rgba(0, 0, 0, 0.26);
    cursor: default;
    border-radius: 0; }
  
  .igx-calendar__date--weekend {
    color: rgba(0, 0, 0, 0.26); }
  
  .igx-calendar__year, .igx-calendar__year--current {
    display: flex;
    margin: 0;
    justify-content: center;
    align-items: center;
    font-size: 1.125em;
    min-width: 8ch;
    height: 2.75em; }
  
  .igx-calendar__year--current {
    font-size: 1.5em;
    color: #e41c77; }
  
  .igx-calendar__year:hover, .igx-calendar__year:focus {
    color: #e41c77; }
  
  .igx-calendar__month:hover, .igx-calendar__month:focus {
    color: #e41c77; }
  
  .igx-calendar__month, .igx-calendar__month--current {
    display: flex;
    margin: 0 0.75em;
    flex: 1 0 25%;
    justify-content: center;
    align-items: center;
    height: 5.6875em; }
  
  .igx-calendar__month--current {
    color: #e41c77; }
  
  .igx-calendar__date--inactive {
    cursor: pointer;
    color: rgba(0, 0, 0, 0.26); }
  
  .igx-calendar__date--selected {
    position: relative;
    color: black;
    background-color: #e41c77 !important;
    font-weight: 600; }
  
  .igx-calendar__date--current {
    color: #e41c77;
    font-weight: 600; }
  
  .igx-calendar__date:hover, .igx-calendar__date:focus, .igx-calendar__date--inactive:hover, .igx-calendar__date--inactive:focus, .igx-calendar__date--current:hover, .igx-calendar__date--current:focus, .igx-calendar__date--weekend:hover, .igx-calendar__date--weekend:focus {
    background-color: rgba(0, 0, 0, 0.08); }
  
  :root {
    --igx-card-background: #fff;
    --igx-card-header-text-color: rgba(0, 0, 0, 0.74);
    --igx-card-subtitle-text-color: rgba(0, 0, 0, 0.54);
    --igx-card-content-text-color: rgba(0, 0, 0, 0.54);
    --igx-card-actions-text-color: rgba(0, 0, 0, 0.54); }
  
  .igx-card {
    display: flex;
    flex-flow: row wrap;
    box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.26), 0 2px 2px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    border-radius: 2px;
    background: #fff;
    transition: box-shadow 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    backface-visibility: hidden; }
    .igx-card:hover {
      box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.26), 0 8px 10px 1px rgba(0, 0, 0, 0.12), 0 3px 14px 2px rgba(0, 0, 0, 0.08); }
  
  .igx-card igx-card-header {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    flex-basis: 100%;
    padding: 1.5em 1em 1em 1em;
    color: rgba(0, 0, 0, 0.74); }
  
  .igx-card-header--compact, .igx-card igx-card-header.compact {
    padding: 1em; }
  
  .igx-card-header__title, .igx-card-header__title--small {
    margin: 0;
    flex-basis: 100%;
    font-size: 1.5em;
    line-height: 1.5em; }
  
  .igx-card-header__title--small {
    font-size: 0.875em; }
  
  .igx-card-header__subtitle {
    margin: 0;
    color: rgba(0, 0, 0, 0.54);
    font-size: 0.875em;
    line-height: 1.5em; }
  
  .igx-card-header__tgroup {
    margin: 0 1em; }
  
  .igx-card igx-card-content {
    flex-basis: 100%;
    padding: 1em; }
  
  .igx-card-content__text {
    margin: 0;
    color: rgba(0, 0, 0, 0.54);
    font-size: 0.875em;
    line-height: 20px, 16px; }
  
  .igx-card__media {
    width: auto;
    margin-right: auto;
    order: -1; }
  
  .igx-card__media--right {
    width: auto;
    margin-left: auto;
    order: 9999; }
  
  .igx-card igx-card-actions {
    display: flex;
    flex-flow: row wrap;
    flex: 1 0 auto;
    align-items: center;
    padding: 0.5em;
    max-height: 56px; }
  
  .igx-card-actions__bgroup {
    display: flex;
    flex-flow: row nowrap; }
    .igx-card-actions__bgroup [igxButton] ~ [igxButton] {
      margin-left: 8px; }
  
  .igx-card-actions__igroup, .igx-card-actions__igroup--start, .igx-card-actions__igroup--end {
    display: flex;
    flex-flow: row nowrap; }
    .igx-card-actions__igroup .igx-button--icon, .igx-card-actions__igroup--start .igx-button--icon, .igx-card-actions__igroup--end .igx-button--icon {
      color: rgba(0, 0, 0, 0.54); }
  
  .igx-card-actions__igroup--start {
    margin-right: auto; }
  
  .igx-card-actions__igroup--end {
    margin-left: auto; }
  
  :root {
    --igx-carousel-button-background: #fff;
    --igx-carousel-button-hover-background: #fff;
    --igx-carousel-button-arrow-color: rgba(0, 0, 0, 0.62);
    --igx-carousel-button-hover-arrow-color: rgba(0, 0, 0, 0.87);
    --igx-carousel-button-shadow: none;
    --igx-carousel-indicator-dot-color: #fff;
    --igx-carousel-indicator-border-color: #fff;
    --igx-carousel-indicator-active-border-color: #fff;
    --igx-carousel-disable-button-shadow: true; }
  
  @keyframes scale-in-center {
    0% {
      transform: scale(0);
      opacity: 1; }
    100% {
      transform: scale(1);
      opacity: 1; } }
  
  @keyframes scale-out-center {
    0% {
      transform: scale(1);
      opacity: 1; }
    100% {
      transform: scale(0);
      opacity: 1; } }
  
  .igx-carousel {
    display: flex;
    position: relative;
    justify-content: center;
    width: 100%;
    height: 100%;
    align-items: center;
    flex-flow: column nowrap;
    transform-style: preserve-3d;
    outline: none; }
  
  .igx-carousel__inner {
    position: relative;
    width: 100%;
    height: inherit;
    overflow: hidden; }
    .igx-carousel__inner .active {
      display: block; }
  
  .igx-carousel__arrow, .igx-carousel__arrow--prev, .igx-carousel__arrow--next {
    display: flex;
    margin: 0 16px;
    position: absolute;
    justify-content: center;
    align-items: center;
    width: 46px;
    height: 46px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    border-radius: 50%;
    outline-style: none;
    transition: all .15s ease-in-out;
    color: rgba(0, 0, 0, 0.62);
    background-color: #fff;
    box-shadow: none; }
    .igx-carousel__arrow span, .igx-carousel__arrow--prev span, .igx-carousel__arrow--next span {
      display: flex;
      align-items: center; }
  
  .igx-carousel__arrow--prev:hover, .igx-carousel__arrow--next:hover {
    color: rgba(0, 0, 0, 0.87);
    background: #fff; }
  
  .igx-carousel__arrow--next {
    right: 0; }
  
  .igx-carousel__arrow--prev {
    left: 0; }
  
  .igx-carousel__indicators {
    display: flex;
    margin: 16px 0;
    justify-content: center;
    align-items: center;
    position: absolute;
    list-style: none;
    z-index: 10;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    padding: 0; }
    .igx-carousel__indicators li {
      margin: 0 5px;
      position: relative;
      width: 12px;
      height: 12px;
      text-indent: -9999px;
      cursor: pointer;
      border: 2px solid;
      border-color: #fff;
      border-radius: 50%;
      transition: all 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.26), 0 1px 1px 0 rgba(0, 0, 0, 0.12), 0 2px 1px -1px rgba(0, 0, 0, 0.08);
      opacity: .7; }
      .igx-carousel__indicators li::after {
        content: '';
        position: absolute;
        top: 1px;
        bottom: 1px;
        left: 1px;
        right: 1px;
        border-radius: inherit;
        background: #fff;
        animation: "scale-out-center" 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
        opacity: 0; }
      .igx-carousel__indicators li.active {
        border: 2px solid;
        border-color: #fff;
        opacity: 1; }
      .igx-carousel__indicators li.active::after {
        opacity: 1;
        animation: "scale-in-center" 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; }
      .igx-carousel__indicators li:hover {
        opacity: 1; }
  
  .igx-slide {
    display: none;
    width: 100%;
    height: 100%;
    position: relative;
    transition: .5s ease-in-out left;
    backface-visibility: hidden;
    perspective: 1000px; }
  
  .igx-slide img {
    width: inherit;
    height: inherit;
    transform: scale(1.01); }
  
  :root {
    --igx-checkbox-label-color: rgba(0, 0, 0, 0.87);
    --igx-checkbox-empty-color: rgba(0, 0, 0, 0.54);
    --igx-checkbox-fill-color: #e41c77;
    --igx-checkbox-tick-color: #fff;
    --igx-checkbox-disabled-color: rgba(0, 0, 0, 0.26);
    --igx-checkbox-variant: dark; }
  
  @keyframes scale-in-out {
    50% {
      transform: scale(0.9);
      transform-origin: 50% 50%; }
    100% {
      transform: scale(1);
      transform-origin: 50% 50%; } }
  
  .igx-checkbox {
    position: relative;
    display: inline-flex;
    flex-flow: row nowrap;
    align-items: center;
    font-size: 1rem; }
  
  .igx-checkbox--disabled {
    user-select: none;
    pointer-events: none;
    cursor: initial; }
  
  .igx-checkbox__input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    border: none;
    clip: rect(0, 0, 0, 0);
    outline: 0;
    pointer-events: none;
    overflow: hidden;
    appearance: none; }
  
  .igx-checkbox__composite {
    position: relative;
    display: inline-block;
    cursor: pointer;
    width: 1.25em;
    height: 1.25em;
    min-width: 1.25em;
    border-width: 2px;
    border-style: solid;
    border-color: rgba(0, 0, 0, 0.54);
    border-radius: 2px;
    -webkit-tap-highlight-color: transparent;
    transition: border-color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
    .igx-checkbox__composite::after {
      position: absolute;
      content: '';
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      transition: background 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
  
  .igx-checkbox--indeterminate .igx-checkbox__composite, .igx-checkbox--checked .igx-checkbox__composite {
    border-color: #e41c77; }
    .igx-checkbox--indeterminate .igx-checkbox__composite::after, .igx-checkbox--checked .igx-checkbox__composite::after {
      background: #e41c77; }
  
  .igx-checkbox--disabled .igx-checkbox__composite {
    border-color: rgba(0, 0, 0, 0.26); }
  
  .igx-checkbox--indeterminate.igx-checkbox--disabled .igx-checkbox__composite::after, .igx-checkbox--checked.igx-checkbox--disabled .igx-checkbox__composite::after {
    background: rgba(0, 0, 0, 0.26); }
  
  .igx-checkbox__composite-mark {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    stroke: #fff;
    stroke-linecap: square;
    stroke-width: 3;
    stroke-dasharray: 24;
    stroke-dashoffset: 24;
    fill: none;
    opacity: 0;
    z-index: 1;
    transition: opacity 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
  
  .igx-checkbox--checked .igx-checkbox__composite-mark {
    stroke-dashoffset: 0;
    opacity: 1;
    transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
  
  .igx-checkbox--indeterminate .igx-checkbox__composite-mark {
    stroke-dashoffset: 41;
    /* length of path - adjacent line length */
    opacity: 1;
    transform: rotate(45deg) translateX(-0.125em); }
  
  .igx-checkbox__label, .igx-checkbox__label--before {
    display: inline-block;
    color: rgba(0, 0, 0, 0.87);
    font-size: 1em;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    word-wrap: break-all; }
    .igx-checkbox__label:empty, .igx-checkbox__label--before:empty {
      margin: 0; }
  
  .igx-checkbox__label {
    margin-left: 0.5em; }
    [dir='rtl'] .igx-checkbox__label {
      margin-left: initial;
      margin-right: 0.5em; }
      [dir='rtl'] .igx-checkbox__label:empty {
        margin: 0; }
  
  .igx-checkbox__label--before {
    margin-right: 0.5em;
    order: -1; }
    [dir='rtl'] .igx-checkbox__label--before {
      margin-right: initial;
      margin-left: 0.5em; }
      [dir='rtl'] .igx-checkbox__label--before:empty {
        margin: 0; }
  
  .igx-checkbox--disabled .igx-checkbox__label, .igx-checkbox--disabled .igx-checkbox__label--before {
    color: rgba(0, 0, 0, 0.26); }
  
  .igx-checkbox__ripple {
    --igx-ripple-color: #e41c77;
    --igx-ripple-test: test;
    position: absolute;
    top: calc(50% - 1.5em);
    left: calc(50% - 1.5em);
    width: 3em;
    height: 3em;
    border-radius: 1.5em;
    overflow: hidden;
    pointer-events: none;
    filter: opacity(1); }
    .igx-checkbox__ripple .igx-ripple__inner {
      display: block;
      position: absolute;
      border-radius: 50%;
      background: #e41c77;
      pointer-events: none;
      transform-origin: center;
      transform: translate3d(0, 0, 0) scale(0);
      will-change: opacity, transform;
      opacity: .5; }
    .igx-checkbox__ripple .igx-ripple {
      overflow: hidden; }
  
  .igx-checkbox--focused .igx-checkbox__ripple {
    animation: "scale-in-out" 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
    background-color: #e41c77;
    transition: background-color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    opacity: .12; }
  
  .igx-checkbox:hover .igx-checkbox__ripple::after, .igx-checkbox:active .igx-checkbox__ripple::after, .igx-checkbox--indeterminate:hover .igx-checkbox__ripple::after, .igx-checkbox--indeterminate:active .igx-checkbox__ripple::after, .igx-checkbox--checked:hover .igx-checkbox__ripple::after, .igx-checkbox--checked:active .igx-checkbox__ripple::after {
    position: absolute;
    content: '';
    opacity: .06;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0; }
  
  .igx-checkbox:hover .igx-checkbox__ripple::after, .igx-checkbox:active .igx-checkbox__ripple::after {
    background-color: rgba(0, 0, 0, 0.54); }
  
  .igx-checkbox--indeterminate:hover .igx-checkbox__ripple::after, .igx-checkbox--indeterminate:active .igx-checkbox__ripple::after, .igx-checkbox--checked:hover .igx-checkbox__ripple::after, .igx-checkbox--checked:active .igx-checkbox__ripple::after {
    background-color: #e41c77; }
  
  .igx-checkbox:active .igx-checkbox__ripple::after, .igx-checkbox--indeterminate:active .igx-checkbox__ripple::after, .igx-checkbox--checked:active .igx-checkbox__ripple::after {
    opacity: .12; }
  
  :root {
    --igx-chip-chip-background: rgba(0, 0, 0, 0.04);
    --igx-chip-chip-hover-background: rgba(0, 0, 0, 0.08);
    --igx-chip-text-color: rgba(0, 0, 0, 0.74);
    --igx-chip-text-hover-color: rgba(0, 0, 0, 0.74);
    --igx-chip-order-icon-color: rgba(0, 0, 0, 0.54);
    --igx-chip-order-icon-hover-color: rgba(0, 0, 0, 0.54);
    --igx-chip-dir-icon-color: rgba(0, 0, 0, 0.12);
    --igx-chip-remove-icon-color: rgba(0, 0, 0, 0.74);
    --igx-chip-remove-icon-hover-color: rgba(0, 0, 0, 0.74);
    --igx-chip-chip-focus-border-color: #3ca9f2;
    --igx-chip-selected-chip-background: #e41c77;
    --igx-chip-selected-chip-text-color: black;
    --igx-chip-selected-chip-icon-color: black;
    --igx-chip-selected-chip-hover-background: #dc5391;
    --igx-chip-selected-chip-focus-background: #dc5391;
    --igx-chip-selected-chip-text-hover-color: black;
    --igx-chip-selected-chip-text-focus-color: black;
    --igx-chip-selected-chip-icon-hover-color: black;
    --igx-chip-selected-chip-icon-focus-color: black;
    --igx-chip-selected-remove-icon-color: black;
    --igx-chip-selected-remove-icon-hover-color: black;
    --igx-chip-selected-chip-focus-border-color: #a5044d;
    --igx-chip-selected-chip-hover-border-color: #a5044d; }
  
  .igx-chips-area {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    width: 100%; }
    .igx-chips-area:empty {
      display: none; }
  
  .igx-chip, .igx-chip--cosy, .igx-chip--compact,
  .igx-chip__item,
  .igx-chip__label,
  .igx-chip__connector {
    display: flex;
    align-items: center; }
  
  .igx-chip, .igx-chip--cosy, .igx-chip--compact {
    position: relative;
    transition-property: top, left;
    touch-action: none; }
    .igx-chip:focus, .igx-chip--cosy:focus, .igx-chip--compact:focus {
      outline: transparent; }
      .igx-chip:focus .igx-chip__item, .igx-chip--cosy:focus .igx-chip__item, .igx-chip--compact:focus .igx-chip__item {
        outline: transparent;
        border-color: #0b3c49; }
  
  
  .igx-chip__label {
    justify-content: space-between;
    max-width: 10.625rem; }
  
  
  .igx-chip__item {
    max-width: 10.625rem;
    min-width: 6rem;
    user-select: none;
    cursor: pointer;
    border-radius: 1rem;
    padding: 0 1rem;
    margin: 0.25rem;
    height: 2rem;
    transition: all 120ms cubic-bezier(0.645, 0.045, 0.355, 1);
    background: rgba(0, 0, 0, 0.04);
    border: 1px solid transparent;
    justify-content: space-between; }
    .igx-chip__item:hover, .igx-chip__item:focus {
      outline: transparent;
      background: rgba(0, 0, 0, 0.08);
      transition: all 120ms cubic-bezier(0.645, 0.045, 0.355, 1); }
      .igx-chip__item:hover .igx-chip__text, .igx-chip__item:focus .igx-chip__text {
        color: rgba(0, 0, 0, 0.74); }
      .igx-chip__item:hover .igx-chip__order-icon, .igx-chip__item:focus .igx-chip__order-icon {
        transition: all 120ms cubic-bezier(0.645, 0.045, 0.355, 1);
        color: rgba(0, 0, 0, 0.54); }
    .igx-chip__item:focus {
      border-color: #3ca9f2; }
    .igx-chip__item .igx-icon, .igx-chip__item .igx-icon--inactive,
    .igx-chip__item .igx-button--icon {
      width: 1rem;
      min-width: 1rem;
      height: 1rem;
      font-size: 1rem; }
    .igx-chip__item .igx-button--icon:focus {
      background: transparent; }
  
  .igx-chip--cosy .igx-chip__item {
    border-radius: 0.75rem;
    height: 1.5rem;
    padding: 0 0.5rem; }
  
  .igx-chip--compact .igx-chip__item {
    border-radius: 0.75rem;
    height: 1.5rem;
    padding: 0 0.375rem; }
  
  .igx-chip__text {
    color: rgba(0, 0, 0, 0.74);
    font-size: 0.75rem;
    margin-right: 1rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden; }
  
  .igx-chip__dir-icon.igx-icon, .igx-chip__dir-icon.igx-icon--inactive {
    width: 1rem;
    height: 1rem;
    font-size: 1rem;
    margin: 0 0.5rem;
    color: rgba(0, 0, 0, 0.12); }
  
  .igx-chip__order-icon.igx-icon, .igx-chip__order-icon.igx-icon--inactive {
    color: rgba(0, 0, 0, 0.54);
    margin-right: 0.25rem; }
  
  .igx-chip__remove-icon.igx-icon, .igx-chip__remove-icon.igx-icon--inactive {
    color: rgba(0, 0, 0, 0.74);
    opacity: .4;
    transition: all 120ms cubic-bezier(0.645, 0.045, 0.355, 1); }
    .igx-chip__remove-icon.igx-icon:hover, .igx-chip__remove-icon.igx-icon--inactive:hover, .igx-chip__remove-icon.igx-icon:focus, .igx-chip__remove-icon.igx-icon--inactive:focus {
      color: rgba(0, 0, 0, 0.74);
      opacity: 1; }
  
  
  .igx-chip__connector {
    user-select: none; }
  
  .igx-chip__item--selected {
    background: #e41c77; }
    .igx-chip__item--selected .igx-chip__text {
      color: black; }
    .igx-chip__item--selected:hover {
      background: #dc5391;
      border-color: #a5044d; }
      .igx-chip__item--selected:hover .igx-chip__text {
        color: black; }
      .igx-chip__item--selected:hover .igx-icon, .igx-chip__item--selected:hover .igx-icon--inactive,
      .igx-chip__item--selected:hover .igx-button--icon {
        color: black; }
    .igx-chip__item--selected:focus {
      background: #dc5391;
      border-color: #a5044d; }
      .igx-chip__item--selected:focus .igx-chip__text {
        color: black; }
      .igx-chip__item--selected:focus .igx-icon, .igx-chip__item--selected:focus .igx-icon--inactive,
      .igx-chip__item--selected:focus .igx-button--icon {
        color: black; }
    .igx-chip__item--selected .igx-icon, .igx-chip__item--selected .igx-icon--inactive,
    .igx-chip__item--selected .igx-button--icon {
      color: black; }
      .igx-chip__item--selected .igx-chip__remove-icon.igx-icon, .igx-chip__item--selected .igx-chip__remove-icon.igx-icon--inactive,
      .igx-chip__item--selected .igx-button--icon.igx-chip__remove-icon {
        color: black;
        transition: all 120ms cubic-bezier(0.645, 0.045, 0.355, 1); }
        .igx-chip__item--selected .igx-chip__remove-icon.igx-icon:hover, .igx-chip__item--selected .igx-chip__remove-icon.igx-icon--inactive:hover, .igx-chip__item--selected .igx-chip__remove-icon.igx-icon:focus, .igx-chip__item--selected .igx-chip__remove-icon.igx-icon--inactive:focus,
        .igx-chip__item--selected .igx-button--icon.igx-chip__remove-icon:hover,
        .igx-chip__item--selected .igx-button--icon.igx-chip__remove-icon:focus {
          color: black; }
  
  .igx-chip--disabled .igx-chip__item {
    cursor: default;
    pointer-events: none; }
  
  .igx-chip--disabled .igx-chip__label {
    opacity: .4; }
  
  .igx-chip__ghost {
    position: absolute;
    z-index: 10; }
  
  .igx-chip__ghost--cosy {
    border-radius: 0.75rem;
    height: 1.5rem;
    padding: 0 0.5rem; }
  
  .igx-chip__ghost--compact {
    border-radius: 0.75rem;
    height: 1.5rem;
    padding: 0 0.375rem; }
  
  :root {
    --igx-column-hiding-title-color: #09f;
    --igx-column-hiding-background-color: transparent; }
  
  .igx-column-hiding {
    display: flex;
    flex-flow: column nowrap;
    width: 100%;
    flex: 1 1 auto; }
  
  .igx-column-hiding__header-title {
    font-size: 0.875rem;
    color: #09f;
    margin: 0;
    padding: 1rem 1rem 0.5rem; }
  
  .igx-column-hiding__header-input {
    font-size: 1rem !important;
    margin: -16px 0 0 !important;
    padding: 0.5rem 1rem; }
  
  .igx-column-hiding__columns {
    display: flex;
    flex-flow: column nowrap;
    overflow-y: auto; }
  
  .igx-column-hiding__columns-item {
    padding: 1rem;
    font-weight: 600;
    min-height: 3.25rem; }
  
  .igx-column-hiding__buttons {
    display: flex;
    justify-content: flex-end;
    padding: 0.5rem 1rem; }
  
  :root {
    --igx-combo-search-separator-border-color: rgba(0, 0, 0, 0.12);
    --igx-combo-empty-list-placeholder-color: rgba(0, 0, 0, 0.26);
    --igx-combo-empty-list-background: #fff; }
  
  .igx-combo {
    position: relative; }
    .igx-combo .igx-button--icon {
      width: 1.5rem;
      height: 1.5rem; }
  
  .igx-combo__checkbox {
    margin-right: 0.5rem; }
  
  [dir='rtl'] .igx-combo__checkbox {
    margin-right: 0;
    margin-left: 0.5rem; }
  
  .igx-combo__drop-down {
    position: absolute;
    width: 100%; }
    .igx-combo__drop-down .igx-drop-down {
      width: 100%; }
  
  .igx-combo__search {
    padding: 0.5rem 1rem;
    margin: 0 !important;
    z-index: 26;
    border-bottom: 1px dashed rgba(0, 0, 0, 0.12); }
  
  .igx-combo__content {
    position: relative;
    overflow: hidden; }
    .igx-combo__content:focus {
      outline: transparent; }
  
  .igx-combo__add {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    padding: 1rem;
    background-color: #fff; }
  
  .igx-combo__empty {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    color: rgba(0, 0, 0, 0.26);
    padding: 0 1.5rem;
    font-size: 0.8125rem; }
  
  .igx-combo__add-item.igx-drop-down__item {
    width: auto !important;
    padding: 0 !important; }
    .igx-combo__add-item.igx-drop-down__item:hover {
      background: transparent !important; }
  
  .igx-combo__add-item.igx-drop-down__item--focused:focus {
    background: transparent !important; }
  
  .igx-date-picker .igx-dialog__window {
    width: 340px; }
  
  .igx-date-picker--vertical .igx-dialog__window {
    width: 540px; }
  
  :root {
    --igx-dialog-background: #fff;
    --igx-dialog-title-color: rgba(0, 0, 0, 0.74);
    --igx-dialog-message-color: rgba(0, 0, 0, 0.54); }
  
  .igx-dialog {
    outline-style: none; }
  
  .igx-dialog--hidden {
    display: none; }
  
  .igx-dialog__window {
    position: relative;
    min-width: 17.5rem;
    border-radius: 2px;
    background: #fff;
    box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.26), 0 24px 38px 3px rgba(0, 0, 0, 0.12), 0 9px 46px 8px rgba(0, 0, 0, 0.08);
    overflow: hidden; }
    .igx-dialog__window .igx-calendar {
      width: 20rem; }
    .igx-dialog__window .igx-calendar--vertical {
      width: 31rem; }
  
  .igx-dialog__window-title {
    color: rgba(0, 0, 0, 0.74);
    font-size: 1.25rem;
    line-height: 1rem;
    padding: 1.5rem 1.5rem 0.75rem 1.5rem;
    font-weight: 600; }
  
  .igx-dialog__window-content {
    color: rgba(0, 0, 0, 0.54);
    max-width: 40ch;
    font-size: 1rem;
    line-height: 1.125rem;
    padding: 0.75rem 1.5rem; }
  
  .igx-dialog__window-actions {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-end;
    padding: 0.5rem; }
    .igx-dialog__window-actions button ~ button {
      margin-left: 0.5rem; }
  
  :root {
    --igx-drop-down-background-color: #fff;
    --igx-drop-down-header-text-color: #e41c77;
    --igx-drop-down-item-text-color: rgba(0, 0, 0, 0.74);
    --igx-drop-down-hover-item-text-color: rgba(0, 0, 0, 0.74);
    --igx-drop-down-hover-item-background: rgba(0, 0, 0, 0.04);
    --igx-drop-down-focused-item-background: rgba(0, 0, 0, 0.04);
    --igx-drop-down-focused-item-text-color: rgba(0, 0, 0, 0.74);
    --igx-drop-down-selected-item-background: #e41c77;
    --igx-drop-down-selected-item-text-color: black;
    --igx-drop-down-selected-hover-item-background: #dc0a6a;
    --igx-drop-down-selected-hover-item-text-color: white;
    --igx-drop-down-selected-focus-item-background: #dc0a6a;
    --igx-drop-down-selected-focus-item-text-color: white;
    --igx-drop-down-disabled-item-background: transparent;
    --igx-drop-down-disabled-item-text-color: rgba(0, 0, 0, 0.38); }
  
  .igx-drop-down {
    max-height: 100%;
    position: absolute; }
  
  .igx-drop-down__list {
    overflow-y: auto;
    z-index: 1;
    box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.26), 0 3px 4px 0 rgba(0, 0, 0, 0.12), 0 3px 3px -2px rgba(0, 0, 0, 0.08);
    background: #fff; }
  
  .igx-drop-down__header,
  .igx-drop-down__item {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    height: 2rem;
    line-height: 2rem;
    min-height: 2rem;
    white-space: nowrap; }
    @media only screen and (max-width: 600px) {
      .igx-drop-down__header,
      .igx-drop-down__item {
        height: 3rem;
        line-height: 3rem;
        min-height: 3rem; } }
  
  
  .igx-drop-down__item {
    color: rgba(0, 0, 0, 0.74);
    cursor: pointer;
    padding: 0 1.5rem; }
    @media only screen and (max-width: 600px) {
      
      .igx-drop-down__item {
        padding: 0 1rem; } }
    .igx-drop-down__item:focus {
      outline: 0;
      outline-color: transparent;
      background: rgba(0, 0, 0, 0.04);
      color: rgba(0, 0, 0, 0.74); }
    .igx-drop-down__item:hover {
      background: rgba(0, 0, 0, 0.04);
      color: rgba(0, 0, 0, 0.74); }
  
  [dir='rtl'] .igx-drop-down__item {
    justify-content: flex-end;
    text-align: right; }
  
  .igx-drop-down__header {
    font-size: 0.8125rem;
    color: #e41c77;
    pointer-events: none;
    padding: 0 1rem; }
    @media only screen and (max-width: 600px) {
      .igx-drop-down__header {
        padding: 0 0.5rem; } }
  
  .igx-drop-down__item--focused {
    background: rgba(0, 0, 0, 0.04);
    color: rgba(0, 0, 0, 0.74); }
    .igx-drop-down__item--focused:hover {
      background: rgba(0, 0, 0, 0.04); }
  
  .igx-drop-down__item--selected {
    background: #e41c77;
    color: black; }
    .igx-drop-down__item--selected:hover {
      background: #dc0a6a;
      color: white; }
  
  .igx-drop-down__item--selected.igx-drop-down__item--focused {
    background: #dc0a6a;
    color: white; }
  
  .igx-drop-down__item--disabled {
    background: transparent;
    color: rgba(0, 0, 0, 0.38);
    cursor: default;
    pointer-events: none; }
    .igx-drop-down__item--disabled:hover {
      background: transparent; }
  
  :root {
    --igx-grid-header-background: #f4f4f4;
    --igx-grid-header-text-color: rgba(0, 0, 0, 0.54);
    --igx-grid-header-border-width: 1px;
    --igx-grid-header-border-style: dotted;
    --igx-grid-header-border-color: rgba(0, 0, 0, 0.26);
    --igx-grid-content-background: #fff;
    --igx-grid-content-text-color: rgba(0, 0, 0, 0.74);
    --igx-grid-ghost-header-text-color: rgba(0, 0, 0, 0.54);
    --igx-grid-ghost-header-icon-color: rgba(0, 0, 0, 0.38);
    --igx-grid-ghost-header-background: #fff;
    --igx-grid-row-odd-background: #fff;
    --igx-grid-row-even-background: #fff;
    --igx-grid-row-odd-text-color: inherit;
    --igx-grid-row-even-text-color: inherit;
    --igx-grid-row-selected-background: #424242;
    --igx-grid-row-selected-text-color: white;
    --igx-grid-row-hover-background: #eaeaea;
    --igx-grid-row-hover-text-color: black;
    --igx-grid-row-border-color: rgba(0, 0, 0, 0.12);
    --igx-grid-pinned-border-width: 2px;
    --igx-grid-pinned-border-style: solid;
    --igx-grid-pinned-border-color: rgba(0, 0, 0, 0.26);
    --igx-grid-cell-selected-background: #09f;
    --igx-grid-cell-selected-text-color: black;
    --igx-grid-cell-editing-background: #fff;
    --igx-grid-resize-line-color: #e41c77;
    --igx-grid-drop-indicator-color: #e41c77;
    --igx-grid-grouparea-background: #f4f4f4;
    --igx-grid-group-label-column-name-text: #09f;
    --igx-grid-group-label-icon: #09f;
    --igx-grid-group-label-text: rgba(0, 0, 0, 0.74);
    --igx-grid-expand-all-icon-color: rgba(0, 0, 0, 0.54);
    --igx-grid-expand-all-icon-hover-color: rgba(0, 0, 0, 0.74);
    --igx-grid-expand-icon-color: rgba(0, 0, 0, 0.54);
    --igx-grid-expand-icon-hover-color: #09f;
    --igx-grid-group-count-background: rgba(0, 0, 0, 0.08);
    --igx-grid-group-count-text-color: rgba(0, 0, 0, 0.54);
    --igx-grid-drop-area-text-color: rgba(0, 0, 0, 0.54);
    --igx-grid-drop-area-icon-color: rgba(0, 0, 0, 0.38);
    --igx-grid-drop-area-background: rgba(0, 0, 0, 0.04);
    --igx-grid-drop-area-on-drop-background: rgba(0, 0, 0, 0.08);
    --igx-grid-group-row-background: #f4f4f4;
    --igx-grid-row-content-focus-background: rgba(0, 0, 0, 0.04);
    --igx-grid-row-indentation-background: #f4f4f4;
    --igx-grid-grouping-indicator-hover-background: #f4f4f4;
    --igx-grid-grouping-indicator-focus-background: rgba(0, 0, 0, 0.04); }
  
  .igx-grid, .igx-grid--cosy, .igx-grid--compact {
    position: relative;
    display: grid;
    grid-template-rows: auto auto auto 1fr auto auto;
    grid-template-columns: 1fr;
    border-radius: 2px;
    box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.26), 0 2px 2px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.08);
    outline-style: none;
    overflow: hidden;
    z-index: 0; }
    .igx-grid .igx-checkbox, .igx-grid--cosy .igx-checkbox, .igx-grid--compact .igx-checkbox {
      min-width: 1.25rem; }
  
  .igx-grid__caption {
    display: flex;
    align-items: center;
    font-size: 1.25rem;
    line-height: 2rem;
    padding: 1rem 1.5rem;
    grid-row: 1; }
  
  .igx-grid__thead,
  .igx-grid__tfoot {
    position: relative;
    display: block;
    background: #f4f4f4;
    color: rgba(0, 0, 0, 0.54); }
    .igx-grid__thead .igx-grid__tr,
    .igx-grid__tfoot .igx-grid__tr {
      background: inherit;
      color: inherit; }
      .igx-grid__thead .igx-grid__tr:hover,
      .igx-grid__tfoot .igx-grid__tr:hover {
        background: inherit;
        color: inherit; }
  
  .igx-grid__thead {
    position: relative;
    grid-row: 3;
    border-bottom: 1px dotted rgba(0, 0, 0, 0.26);
    z-index: 2; }
  
  .igx-grid__thead-title {
    flex-basis: auto !important;
    align-items: center !important;
    border-bottom: 1px dotted rgba(0, 0, 0, 0.26);
    height: 3.125rem; }
  
  .igx-grid__thead-title--pinned-last {
    border-right: 2px solid rgba(0, 0, 0, 0.26) !important; }
  
  .igx-grid--cosy .igx-grid__thead-title {
    height: 2.5rem;
    padding: 0 1rem; }
  
  .igx-grid--compact .igx-grid__thead-title {
    height: 2rem;
    padding: 0 0.75rem; }
  
  .igx-grid__thead-group {
    display: flex;
    flex-flow: row nowrap; }
  
  
  .igx-grid__tfoot {
    grid-row: 5;
    border-top: 1px dotted rgba(0, 0, 0, 0.26); }
  
  .igx-grid__thead igx-display-container {
    width: 100%;
    overflow: visible; }
  
  .igx-grid__tr igx-display-container, .igx-grid__summaries igx-display-container {
    width: 100%;
    overflow: visible; }
  
  .igx-grid__tbody {
    position: relative;
    grid-row: 4;
    background: #fff;
    color: rgba(0, 0, 0, 0.74);
    overflow: hidden;
    z-index: 1; }
  
  .igx-grid__tbody-message {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    color: rgba(0, 0, 0, 0.74); }
  
  .igx-grid__scroll {
    grid-row: 6;
    display: flex;
    flex-flow: row nowrap;
    width: 100%;
    background: #f4f4f4; }
  
  .igx-grid__scroll-start {
    background: rgba(0, 0, 0, 0.08); }
  
  .igx-grid__scroll-main igx-display-container {
    height: 0; }
  
  .igx-grid__scroll-main igx-horizontal-virtual-helper {
    height: 100%; }
  
  .igx-grid__tr {
    display: flex;
    background-color: #fff;
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
    outline-style: none; }
    .igx-grid__tr:last-of-type {
      border-bottom: 0; }
    .igx-grid__tr:hover {
      background-color: #eaeaea;
      color: black; }
  
  .igx-grid__tr--odd {
    background: #fff;
    color: inherit; }
  
  .igx-grid__tr--even {
    background: #fff;
    color: inherit; }
  
  .igx-grid__tr--selected {
    color: white;
    background-color: #424242; }
    .igx-grid__tr--selected:hover {
      background-color: #424242;
      color: white; }
  
  .igx-grid__tr--group {
    position: relative;
    background: #f4f4f4 !important; }
  
  .igx-grid__thead-title, .igx-grid__th, .igx-grid__td {
    position: relative;
    display: flex;
    flex: 1 1 0%;
    align-items: center;
    outline-style: none;
    padding: 0 1.5rem;
    font-size: 0.8125rem;
    line-height: 1rem;
    color: inherit;
    text-align: left; }
  
  .igx-grid__td-text {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden; }
  
  .igx-grid--cosy .igx-grid__td {
    padding: 0 1rem; }
  
  .igx-grid--compact .igx-grid__td {
    padding: 0 0.75rem; }
  
  .igx-grid__th--fw, .igx-grid__td--fw {
    position: relative;
    flex-grow: 0;
    outline-style: none; }
  
  .igx-grid__td--selected {
    color: black;
    background-color: #09f !important;
    border-bottom: 0; }
  
  .igx-grid__td--editing {
    background-color: #fff !important;
    border: 2px solid #09f; }
    .igx-grid__td--editing igx-input-group {
      width: 100%;
      margin-top: -16px; }
  
  .igx-grid__th--pinned, .igx-grid__td--pinned, .igx-grid__td--pinned-last {
    position: relative;
    background-color: inherit;
    z-index: 9999; }
  
  .igx-grid__th--pinned-last, .igx-grid__td--pinned-last {
    border-right: 2px solid rgba(0, 0, 0, 0.26) !important; }
    .igx-grid__th--pinned-last.igx-grid__td--editing, .igx-grid__td--editing.igx-grid__td--pinned-last {
      border-right: 2px solid #09f !important; }
  
  .igx-grid__thead-title, .igx-grid__th {
    position: relative;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: flex-end;
    font-size: 0.75rem;
    font-weight: 600;
    min-width: 0;
    padding: 0 1.5rem;
    border-right: 1px dotted rgba(0, 0, 0, 0.26);
    outline-style: none; }
  
  .igx-grid--cosy .igx-grid__th {
    padding: 0 1rem;
    min-height: 2.5rem; }
  
  .igx-grid--compact .igx-grid__th {
    padding: 0 0.75rem;
    min-height: 2rem; }
  
  .igx-grid__th-title {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    min-width: 3ch;
    user-select: none;
    cursor: initial;
    flex-grow: 1;
    /* hey IE, the text should take most of the space */
    align-self: flex-end;
    line-height: 4.16667; }
  
  .igx-grid--cosy .igx-grid__th-title {
    line-height: 3.33333; }
  
  .igx-grid--compact .igx-grid__th-title {
    line-height: 2.66667; }
  
  .igx-grid__th-icons {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    user-select: none;
    min-width: 39px;
    /* sort-icon width + filtering toggle icon width */
    height: 3.125rem;
    align-self: flex-end; }
    .igx-grid__th-icons:empty {
      min-width: 0; }
    .igx-grid__th-icons .sort-icon {
      width: 0.9375rem;
      height: 0.9375rem;
      min-width: 0.9375rem;
      /* yeah IE, it really needs to be 15px wide... */
      font-size: 0.9375rem; }
  
  .igx-grid--cosy .igx-grid__th-icons {
    height: 2.5rem; }
  
  .igx-grid--compact .igx-grid__th-icons {
    height: 2rem; }
  
  .igx-grid__th--number, .igx-grid__td--number {
    text-align: right;
    justify-content: flex-end; }
    .igx-grid__th--number .igx-grid__th-icons, .igx-grid__td--number .igx-grid__th-icons {
      justify-content: flex-start;
      order: -1; }
      .igx-grid__th--number .igx-grid__th-icons .sort-icon, .igx-grid__td--number .igx-grid__th-icons .sort-icon {
        order: 1; }
  
  .igx-grid__cbx-selection {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 1.5rem;
    background: inherit;
    z-index: 1; }
  
  .igx-grid--cosy .igx-grid__cbx-selection {
    padding: 0 1rem; }
  
  .igx-grid--compact .igx-grid__cbx-selection {
    padding: 0 0.75rem; }
  
  .igx-grid__th-resize-handle {
    position: absolute;
    width: 4px;
    top: 0;
    right: -2px;
    height: 100%;
    z-index: 2; }
  
  .igx-grid__th-resize-line {
    position: absolute;
    cursor: col-resize;
    width: 4px;
    background-color: #e41c77;
    z-index: 2; }
    .igx-grid__th-resize-line::before, .igx-grid__th-resize-line::after {
      position: absolute;
      content: '';
      height: 100%;
      width: 96px; }
    .igx-grid__th-resize-line::before {
      right: 100%; }
    .igx-grid__th-resize-line::after {
      left: 100%; }
  
  .igx-grid__summaries {
    display: flex;
    background: inherit; }
  
  .igx-grid__th-drop-indicator-left,
  .igx-grid__th-drop-indicator-right {
    position: absolute;
    width: 1px;
    height: 100%;
    top: 0; }
  
  .igx-grid__th-drop-indicator-left {
    left: -1px; }
  
  
  .igx-grid__th-drop-indicator-right {
    right: -1px; }
  
  .igx-grid__th-drop-indicator-left.igx-grid__th-drop-indicator--active, .igx-grid__th-drop-indicator-right.igx-grid__th-drop-indicator--active {
    border-right: 1px dotted #e41c77; }
  
  .igx-grid__th-drop-indicator--active::after, .igx-grid__th-drop-indicator--active::before {
    position: absolute;
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    left: -3px; }
  
  .igx-grid__th-drop-indicator--active::before {
    bottom: 0;
    border-width: 0 4px 4px;
    border-color: transparent transparent #e41c77; }
  
  .igx-grid__th-drop-indicator--active::after {
    top: 0;
    border-width: 4px 4px 0;
    border-color: #e41c77 transparent transparent; }
  
  .igx-grid__scroll-on-drag-left,
  .igx-grid__scroll-on-drag-right {
    position: absolute;
    width: 15px;
    top: 0;
    height: 100%;
    z-index: 25; }
  
  .igx-grid__scroll-on-drag-left {
    left: 0; }
  
  
  .igx-grid__scroll-on-drag-right {
    right: 0; }
  
  .igx-grid__scroll-on-drag-pinned {
    position: absolute;
    width: 15px;
    height: 100%;
    top: 0;
    z-index: 25; }
  
  .igx-grid__drag-ghost-image {
    position: absolute;
    display: flex;
    align-items: center;
    background-color: #fff;
    color: rgba(0, 0, 0, 0.54);
    height: 3.125rem;
    min-height: 3.125rem;
    top: -99999px;
    left: -99999px;
    border: none;
    box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.26), 0 5px 8px 0 rgba(0, 0, 0, 0.12), 0 1px 14px 0 rgba(0, 0, 0, 0.08);
    overflow: hidden;
    z-index: 20; }
    .igx-grid__drag-ghost-image .igx-grid__th-title {
      min-width: calc(100% - 24px); }
    .igx-grid__drag-ghost-image .igx-grid__th-icons {
      display: none; }
    .igx-grid__drag-ghost-image .igx-grid__thead-title {
      border: none; }
  
  .igx-grid--cosy .igx-grid__drag-ghost-image {
    height: 2.5rem;
    min-height: 2.5rem; }
  
  .igx-grid--compact .igx-grid__drag-ghost-image {
    height: 2rem;
    min-height: 2rem; }
  
  .igx-grid__drag-ghost-image-icon {
    color: rgba(0, 0, 0, 0.38);
    margin-right: 0.75rem; }
  
  .igx-grid__drag-ghost-image-icon-group {
    color: rgba(0, 0, 0, 0.38);
    padding: 0 1.5rem;
    padding-right: 0;
    margin-right: 0.5rem; }
  
  .igx-grid__drag-col-header {
    background-color: #f4f4f4; }
    .igx-grid__drag-col-header .igx-grid__th-title,
    .igx-grid__drag-col-header .igx-grid__th-icons {
      opacity: .4; }
  
  .igx-grid__group-row {
    background-color: #f4f4f4;
    display: flex;
    outline-style: none;
    min-height: 3.125rem; }
  
  .igx-grid--cosy .igx-grid__group-row {
    min-height: 2.5rem; }
  
  .igx-grid--compact .igx-grid__group-row {
    min-height: 2rem; }
  
  .igx-group-label {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    line-height: 1rem; }
    .igx-group-label > * {
      margin-right: 0.25rem; }
      .igx-group-label > *:last-child {
        margin-right: 0; }
  
  .igx-group-label__icon {
    user-select: none; }
    .igx-group-label__icon.igx-icon, .igx-group-label__icon.igx-icon--inactive {
      color: #09f;
      width: 1rem;
      height: 1rem;
      font-size: 1rem; }
  
  .igx-group-label__column-name {
    color: #09f;
    font-weight: 600;
    font-size: 12px; }
  
  .igx-group-label__count-badge > div {
    background-color: rgba(0, 0, 0, 0.08);
    color: rgba(0, 0, 0, 0.54);
    font-size: 0.75rem; }
  
  .igx-group-label__text {
    font-size: 0.8125rem;
    color: rgba(0, 0, 0, 0.74); }
  
  [dir='rtl'] .igx-grid__group-content {
    padding-left: 1.5rem; }
  
  [dir='rtl'] .igx-grid--cosy .igx-grid__group-content, .igx-grid--cosy [dir='rtl'] .igx-grid__group-content {
    padding-left: 1rem; }
  
  [dir='rtl'] .igx-grid--compact .igx-grid__group-content, .igx-grid--compact [dir='rtl'] .igx-grid__group-content {
    padding-left: 0.75rem; }
  
  [dir='rtl'] .igx-group-label > * {
    margin-left: 0.25rem; }
    [dir='rtl'] .igx-group-label > *:last-child {
      margin-left: 0; }
  
  .igx-grid__group-content {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex: 1 1 auto;
    padding-left: 1.5rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
    min-height: 3.125rem; }
    .igx-grid__group-content:focus {
      outline: transparent;
      background: rgba(0, 0, 0, 0.04); }
  
  .igx-grid--cosy .igx-grid__group-content {
    padding-left: 1rem;
    min-height: 2.5rem; }
  
  .igx-grid--compact .igx-grid__group-content {
    padding-left: 0.75rem;
    min-height: 2rem; }
  
  .igx-grid__row-indentation {
    background: #f4f4f4;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    padding-left: 1.5rem;
    padding-right: 0.75rem; }
    .igx-grid__row-indentation::after {
      content: '';
      position: absolute;
      width: 100%;
      height: 0.0625rem;
      bottom: -1px;
      left: 0;
      background: #f4f4f4; }
    .igx-grid__row-indentation .igx-button--icon {
      width: 1.75rem;
      height: 1.75rem;
      color: rgba(0, 0, 0, 0.54); }
    .igx-grid__row-indentation:focus .igx-button--icon, .igx-grid__row-indentation:hover .igx-button--icon {
      color: rgba(0, 0, 0, 0.74); }
  
  .igx-grid--cosy .igx-grid__row-indentation {
    padding-left: 1rem; }
  
  .igx-grid--compact .igx-grid__row-indentation {
    padding-left: 0.75rem; }
  
  .igx-grid__grouparea {
    grid-row: 2;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    border-bottom: 1px dotted rgba(0, 0, 0, 0.26);
    background: #f4f4f4;
    min-height: 3.5625rem;
    padding: 0.5rem 1.5rem;
    z-index: 2;
    height: 100%; }
    .igx-grid__grouparea:focus {
      outline-style: none; }
  
  .igx-grid--cosy .igx-grid__grouparea {
    min-height: 3.0625rem;
    padding: 0.5rem 1rem; }
  
  .igx-grid--compact .igx-grid__grouparea {
    min-height: 2.5625rem;
    padding: 0.25rem 0.75rem; }
  
  .igx-drop-area, .igx-drop-area--compact, .igx-drop-area--cosy {
    min-width: 5rem;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 2rem;
    border-radius: 1rem;
    padding: 0 1rem;
    margin: 0.25rem;
    flex: 1 0 0%;
    background: rgba(0, 0, 0, 0.04); }
    .igx-drop-area .igx-drop-area__icon, .igx-drop-area--compact .igx-drop-area__icon, .igx-drop-area--cosy .igx-drop-area__icon {
      color: rgba(0, 0, 0, 0.38);
      width: 1rem;
      height: 1rem;
      font-size: 1rem;
      margin-right: 0.5rem; }
  
  .igx-drop-area--hover {
    background: rgba(0, 0, 0, 0.08); }
  
  .igx-drop-area--compact {
    height: 1.5rem;
    border-radius: 0.75rem;
    padding: 0 0.5rem; }
  
  .igx-drop-area--cosy {
    height: 1.5rem;
    border-radius: 0.75rem;
    padding: 0 0.375rem; }
  
  .igx-drop-area__text {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    color: rgba(0, 0, 0, 0.54);
    font-size: 0.8125rem; }
  
  .igx-grid__grouping-indicator {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    padding-left: 1.5rem;
    padding-right: 0.75rem;
    min-height: 3.125rem;
    background-color: #f4f4f4; }
    .igx-grid__grouping-indicator .igx-icon, .igx-grid__grouping-indicator .igx-icon--inactive {
      color: rgba(0, 0, 0, 0.54);
      width: 1.5rem; }
    .igx-grid__grouping-indicator:hover, .igx-grid__grouping-indicator:focus {
      outline-style: none; }
      .igx-grid__grouping-indicator:hover .igx-icon, .igx-grid__grouping-indicator:hover .igx-icon--inactive, .igx-grid__grouping-indicator:focus .igx-icon, .igx-grid__grouping-indicator:focus .igx-icon--inactive {
        color: #09f; }
    .igx-grid__grouping-indicator:hover {
      background: #f4f4f4; }
    .igx-grid__grouping-indicator:focus {
      background: rgba(0, 0, 0, 0.04); }
  
  .igx-grid--cosy .igx-grid__grouping-indicator {
    padding-left: 1rem;
    min-height: 2.5rem; }
  
  .igx-grid--compact .igx-grid__grouping-indicator {
    padding-left: 0.75rem;
    min-height: 2rem; }
  
  .igx-grid__header-indentation {
    position: relative;
    padding-right: 0.75rem;
    background: #f4f4f4;
    z-index: 1; }
  
  .igx-grid__group-expand-btn {
    position: absolute;
    top: calc(50% - 18px);
    left: calc(1.5rem - 6px); }
    .igx-button--icon.igx-grid__group-expand-btn {
      color: rgba(0, 0, 0, 0.54); }
      .igx-button--icon.igx-grid__group-expand-btn:hover {
        color: rgba(0, 0, 0, 0.74); }
  
  .igx-grid--cosy .igx-grid__group-expand-btn {
    left: calc(1rem - 6px); }
  
  .igx-grid--compact .igx-grid__group-expand-btn {
    left: calc(0.75rem - 6px); }
  
  .igx-grid__row-indentation--level-1 {
    padding-left: calc(1.5rem + 1.5rem); }
  
  .igx-grid__group-row--padding-level-1 {
    padding-left: 1.5rem; }
  
  .igx-grid--cosy .igx-grid__row-indentation--level-1 {
    padding-left: calc(1rem + 1.5rem); }
  
  .igx-grid--compact .igx-grid__row-indentation--level-1 {
    padding-left: calc(0.75rem + 1.5rem); }
  
  .igx-grid--compact .igx-grid__group-row--padding-level-1 {
    padding-left: 0.75rem; }
  
  .igx-grid__row-indentation--level-2 {
    padding-left: calc(3rem + 1.5rem); }
  
  .igx-grid__group-row--padding-level-2 {
    padding-left: 3rem; }
  
  .igx-grid--cosy .igx-grid__row-indentation--level-2 {
    padding-left: calc(2rem + 1.5rem); }
  
  .igx-grid--compact .igx-grid__row-indentation--level-2 {
    padding-left: calc(1.5rem + 1.5rem); }
  
  .igx-grid--compact .igx-grid__group-row--padding-level-2 {
    padding-left: 1.5rem; }
  
  .igx-grid__row-indentation--level-3 {
    padding-left: calc(4.5rem + 1.5rem); }
  
  .igx-grid__group-row--padding-level-3 {
    padding-left: 4.5rem; }
  
  .igx-grid--cosy .igx-grid__row-indentation--level-3 {
    padding-left: calc(3rem + 1.5rem); }
  
  .igx-grid--compact .igx-grid__row-indentation--level-3 {
    padding-left: calc(2.25rem + 1.5rem); }
  
  .igx-grid--compact .igx-grid__group-row--padding-level-3 {
    padding-left: 2.25rem; }
  
  .igx-grid__row-indentation--level-4 {
    padding-left: calc(6rem + 1.5rem); }
  
  .igx-grid__group-row--padding-level-4 {
    padding-left: 6rem; }
  
  .igx-grid--cosy .igx-grid__row-indentation--level-4 {
    padding-left: calc(4rem + 1.5rem); }
  
  .igx-grid--compact .igx-grid__row-indentation--level-4 {
    padding-left: calc(3rem + 1.5rem); }
  
  .igx-grid--compact .igx-grid__group-row--padding-level-4 {
    padding-left: 3rem; }
  
  .igx-grid__row-indentation--level-5 {
    padding-left: calc(7.5rem + 1.5rem); }
  
  .igx-grid__group-row--padding-level-5 {
    padding-left: 7.5rem; }
  
  .igx-grid--cosy .igx-grid__row-indentation--level-5 {
    padding-left: calc(5rem + 1.5rem); }
  
  .igx-grid--compact .igx-grid__row-indentation--level-5 {
    padding-left: calc(3.75rem + 1.5rem); }
  
  .igx-grid--compact .igx-grid__group-row--padding-level-5 {
    padding-left: 3.75rem; }
  
  .igx-grid__row-indentation--level-6 {
    padding-left: calc(9rem + 1.5rem); }
  
  .igx-grid__group-row--padding-level-6 {
    padding-left: 9rem; }
  
  .igx-grid--cosy .igx-grid__row-indentation--level-6 {
    padding-left: calc(6rem + 1.5rem); }
  
  .igx-grid--compact .igx-grid__row-indentation--level-6 {
    padding-left: calc(4.5rem + 1.5rem); }
  
  .igx-grid--compact .igx-grid__group-row--padding-level-6 {
    padding-left: 4.5rem; }
  
  .igx-grid__row-indentation--level-7 {
    padding-left: calc(10.5rem + 1.5rem); }
  
  .igx-grid__group-row--padding-level-7 {
    padding-left: 10.5rem; }
  
  .igx-grid--cosy .igx-grid__row-indentation--level-7 {
    padding-left: calc(7rem + 1.5rem); }
  
  .igx-grid--compact .igx-grid__row-indentation--level-7 {
    padding-left: calc(5.25rem + 1.5rem); }
  
  .igx-grid--compact .igx-grid__group-row--padding-level-7 {
    padding-left: 5.25rem; }
  
  .igx-grid__row-indentation--level-8 {
    padding-left: calc(12rem + 1.5rem); }
  
  .igx-grid__group-row--padding-level-8 {
    padding-left: 12rem; }
  
  .igx-grid--cosy .igx-grid__row-indentation--level-8 {
    padding-left: calc(8rem + 1.5rem); }
  
  .igx-grid--compact .igx-grid__row-indentation--level-8 {
    padding-left: calc(6rem + 1.5rem); }
  
  .igx-grid--compact .igx-grid__group-row--padding-level-8 {
    padding-left: 6rem; }
  
  .igx-grid__row-indentation--level-9 {
    padding-left: calc(13.5rem + 1.5rem); }
  
  .igx-grid__group-row--padding-level-9 {
    padding-left: 13.5rem; }
  
  .igx-grid--cosy .igx-grid__row-indentation--level-9 {
    padding-left: calc(9rem + 1.5rem); }
  
  .igx-grid--compact .igx-grid__row-indentation--level-9 {
    padding-left: calc(6.75rem + 1.5rem); }
  
  .igx-grid--compact .igx-grid__group-row--padding-level-9 {
    padding-left: 6.75rem; }
  
  .igx-grid__row-indentation--level-10 {
    padding-left: calc(15rem + 1.5rem); }
  
  .igx-grid__group-row--padding-level-10 {
    padding-left: 15rem; }
  
  .igx-grid--cosy .igx-grid__row-indentation--level-10 {
    padding-left: calc(10rem + 1.5rem); }
  
  .igx-grid--compact .igx-grid__row-indentation--level-10 {
    padding-left: calc(7.5rem + 1.5rem); }
  
  .igx-grid--compact .igx-grid__group-row--padding-level-10 {
    padding-left: 7.5rem; }
  
  :root {
    --igx-grid-filtering-toggle-background: transparent;
    --igx-grid-filtering-toggle-icon-color: inherit;
    --igx-grid-filtering-toggle-icon-hover-color: #fff;
    --igx-grid-filtering-toggle-icon-active-color: black;
    --igx-grid-filtering-toggle-icon-filtered-color: #e41c77;
    --igx-grid-filtering-toggle-hover-background: rgba(0, 0, 0, 0.12);
    --igx-grid-filtering-toggle-active-background: #e41c77;
    --igx-grid-filtering-toggle-filtered-background: transparent;
    --igx-grid-filtering-menu-background: #fff;
    --igx-grid-filtering-menu-text-color: rgba(0, 0, 0, 0.87);
    --igx-grid-filtering-menu-button-text-color: #e41c77;
    --igx-grid-filtering-menu-button-disabled-text-color: initial; }
  
  .igx-filtering {
    position: relative; }
  
  .igx-filtering__toggle, .igx-filtering__toggle--active, .igx-filtering__toggle--filtered {
    cursor: pointer;
    color: inherit; }
    .igx-filtering__toggle igx-icon, .igx-filtering__toggle--active igx-icon, .igx-filtering__toggle--filtered igx-icon {
      font-size: 0.9375rem !important;
      line-height: 0.9375rem;
      padding: 0.28125rem;
      font-weight: 400; }
  
  .igx-filtering__toggle--active {
    color: black; }
  
  .igx-filtering__toggle--filtered {
    color: #e41c77; }
  
  .igx-filtering__toggle, .igx-filtering__toggle--active, .igx-filtering__toggle--filtered {
    user-select: none;
    background: transparent;
    border-radius: 50%; }
  
  .igx-filtering__toggle:hover {
    background: rgba(0, 0, 0, 0.12); }
  
  .igx-filtering__toggle--active {
    background: #e41c77; }
  
  .igx-filtering__toggle--filtered {
    background: transparent; }
  
  .igx-filtering__options, .igx-filtering__options--to-left, .igx-filtering__options--to-right {
    display: block;
    position: absolute;
    font-size: initial;
    font-weight: initial;
    min-width: 240px;
    user-select: none;
    background: #fff;
    color: rgba(0, 0, 0, 0.87);
    margin-top: 24px;
    box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.26), 0 8px 10px 1px rgba(0, 0, 0, 0.12), 0 3px 14px 2px rgba(0, 0, 0, 0.08);
    border: 1px solid #fff;
    border-radius: 4px;
    padding: 0.5rem;
    z-index: 10; }
    .igx-filtering__options .igx-button-group, .igx-filtering__options--to-left .igx-button-group, .igx-filtering__options--to-right .igx-button-group {
      margin: 24px 0; }
  
  .igx-filtering__options--to-left {
    right: 16px; }
  
  .igx-filtering__options--to-right {
    right: initial; }
  
  .igx-filtering__options-bgroup {
    display: flex;
    justify-content: flex-end;
    margin-top: 12px; }
    .igx-filtering__options-bgroup [igxButton] {
      color: #e41c77; }
      .igx-filtering__options-bgroup [igxButton]:disabled {
        color: initial; }
    .igx-filtering__options-bgroup [igxbutton] + [igxbutton] {
      margin-left: 8px; }
    .igx-filtering__options-bgroup[dir='rtl'] [igxbutton] + [igxbutton] {
      margin-right: 8px; }
  
  .igx-filtering__expression igx-input-group {
    font-size: 14px; }
  
  .igx-filtering__expression select {
    width: 100%;
    color: rgba(0, 0, 0, 0.87);
    outline-style: none;
    border-radius: 4px; }
  
  .igx-filtering__expression select + igx-input-group {
    margin-top: 12px; }
  
  :root {
    --igx-grid-summary-background-color: inherit;
    --igx-grid-summary-label-color: #09f;
    --igx-grid-summary-label-hover-color: #007ed2;
    --igx-grid-summary-result-color: currentColor;
    --igx-grid-summary-border-color: rgba(0, 0, 0, 0.26);
    --igx-grid-summary-pinned-border-width: 2px;
    --igx-grid-summary-pinned-border-style: solid;
    --igx-grid-summary-pinned-border-color: rgba(0, 0, 0, 0.26);
    --igx-grid-summary-inactive-color: rgba(0, 0, 0, 0.26); }
  
  .igx-grid-summary, .igx-grid-summary--pinned, .igx-grid-summary--empty, .igx-grid-summary--cosy, .igx-grid-summary--compact {
    display: flex;
    flex-direction: column;
    flex: 1 1 0%;
    border-left: 1px dotted rgba(0, 0, 0, 0.26);
    padding: 0 1.5rem;
    background: inherit;
    overflow: hidden; }
    .igx-grid-summary:first-of-type, .igx-grid-summary--pinned:first-of-type, .igx-grid-summary--empty:first-of-type, .igx-grid-summary--cosy:first-of-type, .igx-grid-summary--compact:first-of-type {
      border-left: 0; }
  
  .igx-grid-summary--compact {
    padding: 0 0.75rem; }
  
  .igx-grid-summary--pinned, .igx-grid-summary--pinned-last {
    position: relative;
    z-index: 1; }
  
  .igx-grid-summary--fw {
    flex-grow: 0; }
  
  .igx-grid-summary--pinned-last {
    border-right: 2px solid rgba(0, 0, 0, 0.26); }
  
  .igx-grid-summary--empty {
    border-left: 1px dotted rgba(0, 0, 0, 0.26); }
  
  .igx-grid-summary__item, .igx-grid-summary__item--inactive {
    display: flex;
    align-items: center;
    padding: 0.375rem 0;
    font-size: 0.75rem;
    position: relative; }
  
  .igx-grid-summary--cosy .igx-grid-summary__item {
    padding: 0.125rem 0; }
  
  .igx-grid-summary--compact .igx-grid-summary__item {
    padding: 0; }
  
  .igx-grid-summary__label {
    color: #09f;
    min-width: 1.875rem;
    margin-right: 0.1875rem; }
    .igx-grid-summary__label:hover {
      color: #007ed2; }
  
  .igx-grid-summary__result {
    color: currentColor;
    font-weight: 600;
    flex: 1 1 auto;
    text-align: right; }
  
  .igx-grid-summary__item--inactive .igx-grid-summary__label {
    color: rgba(0, 0, 0, 0.26); }
  
  .igx-grid-summary__item--inactive .igx-grid-summary__result {
    display: none; }
  
  .igx-grid-summary__label, .igx-grid-summary__result {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden; }
  
  :root {
    ---background-color: rgba(0, 0, 0, 0.02);
    ---button-background: #f0f0f0;
    ---title-text-color: rgba(0, 0, 0, 0.54);
    ---button-text-color: rgba(0, 0, 0, 0.54);
    ---button-hover-background: rgba(0, 0, 0, 0.04);
    ---button-hover-text-color: rgba(0, 0, 0, 0.54);
    ---button-focus-background: rgba(0, 0, 0, 0.04);
    ---button-focus-text-color: rgba(0, 0, 0, 0.54);
    ---dropdown-background: #fff;
    ---item-text-color: rgba(0, 0, 0, 0.54);
    ---item-hover-background: rgba(0, 0, 0, 0.04);
    ---item-hover-text-color: rgba(0, 0, 0, 0.54);
    ---item-focus-background: rgba(0, 0, 0, 0.04);
    ---item-focus-text-color: rgba(0, 0, 0, 0.54); }
  
  .igx-grid-toolbar, .igx-grid-toolbar--cosy, .igx-grid-toolbar--compact {
    display: flex;
    align-items: center;
    justify-content: space-between;
    grid-row: 1;
    font-size: 1rem;
    padding: 0 1rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
    background: rgba(0, 0, 0, 0.02);
    min-height: 3.5rem; }
    .igx-grid-toolbar .igx-button--flat, .igx-grid-toolbar--cosy .igx-button--flat, .igx-grid-toolbar--compact .igx-button--flat {
      background: #f0f0f0;
      color: rgba(0, 0, 0, 0.54);
      margin-left: 0.5rem; }
      .igx-grid-toolbar .igx-button--flat:hover, .igx-grid-toolbar--cosy .igx-button--flat:hover, .igx-grid-toolbar--compact .igx-button--flat:hover {
        background: rgba(0, 0, 0, 0.04);
        color: rgba(0, 0, 0, 0.54); }
      .igx-grid-toolbar .igx-button--flat:focus, .igx-grid-toolbar--cosy .igx-button--flat:focus, .igx-grid-toolbar--compact .igx-button--flat:focus, .igx-grid-toolbar .igx-button--flat:active, .igx-grid-toolbar--cosy .igx-button--flat:active, .igx-grid-toolbar--compact .igx-button--flat:active {
        background: rgba(0, 0, 0, 0.04);
        color: rgba(0, 0, 0, 0.54); }
    .igx-grid-toolbar .igx-button--icon, .igx-grid-toolbar--cosy .igx-button--icon, .igx-grid-toolbar--compact .igx-button--icon {
      background: #f0f0f0;
      color: rgba(0, 0, 0, 0.54);
      margin-left: 0.5rem;
      border-radius: 0; }
      .igx-grid-toolbar .igx-button--icon:hover, .igx-grid-toolbar--cosy .igx-button--icon:hover, .igx-grid-toolbar--compact .igx-button--icon:hover {
        background: rgba(0, 0, 0, 0.04);
        color: rgba(0, 0, 0, 0.54); }
      .igx-grid-toolbar .igx-button--icon:focus, .igx-grid-toolbar--cosy .igx-button--icon:focus, .igx-grid-toolbar--compact .igx-button--icon:focus, .igx-grid-toolbar .igx-button--icon:active, .igx-grid-toolbar--cosy .igx-button--icon:active, .igx-grid-toolbar--compact .igx-button--icon:active {
        background: rgba(0, 0, 0, 0.04);
        color: rgba(0, 0, 0, 0.54); }
    .igx-grid-toolbar .igx-grid-toolbar__button-space, .igx-grid-toolbar--cosy .igx-grid-toolbar__button-space, .igx-grid-toolbar--compact .igx-grid-toolbar__button-space {
      display: flex;
      justify-content: space-between;
      align-items: center; }
      .igx-grid-toolbar .igx-grid-toolbar__button-space > *, .igx-grid-toolbar--cosy .igx-grid-toolbar__button-space > *, .igx-grid-toolbar--compact .igx-grid-toolbar__button-space > * {
        margin-left: 0.5rem; }
        .igx-grid-toolbar .igx-grid-toolbar__button-space > *:first-child, .igx-grid-toolbar--cosy .igx-grid-toolbar__button-space > *:first-child, .igx-grid-toolbar--compact .igx-grid-toolbar__button-space > *:first-child {
          margin-left: 0; }
    .igx-grid-toolbar[dir='rtl'], .igx-grid-toolbar--cosy[dir='rtl'], .igx-grid-toolbar--compact[dir='rtl'] {
      text-align: right; }
      .igx-grid-toolbar[dir='rtl'] .igx-button--flat, .igx-grid-toolbar--cosy[dir='rtl'] .igx-button--flat, .igx-grid-toolbar--compact[dir='rtl'] .igx-button--flat,
      .igx-grid-toolbar[dir='rtl'] .igx-button--icon,
      .igx-grid-toolbar--cosy[dir='rtl'] .igx-button--icon,
      .igx-grid-toolbar--compact[dir='rtl'] .igx-button--icon {
        margin-left: 0;
        margin-right: 0.5rem; }
      .igx-grid-toolbar[dir='rtl'] .igx-grid-toolbar__button-space, .igx-grid-toolbar--cosy[dir='rtl'] .igx-grid-toolbar__button-space, .igx-grid-toolbar--compact[dir='rtl'] .igx-grid-toolbar__button-space {
        text-align: right; }
        .igx-grid-toolbar[dir='rtl'] .igx-grid-toolbar__button-space > *, .igx-grid-toolbar--cosy[dir='rtl'] .igx-grid-toolbar__button-space > *, .igx-grid-toolbar--compact[dir='rtl'] .igx-grid-toolbar__button-space > * {
          margin-left: 0;
          margin-right: 0.5rem; }
        .igx-grid-toolbar[dir='rtl'] .igx-grid-toolbar__button-space > *:last-child, .igx-grid-toolbar--cosy[dir='rtl'] .igx-grid-toolbar__button-space > *:last-child, .igx-grid-toolbar--compact[dir='rtl'] .igx-grid-toolbar__button-space > *:last-child {
          margin-left: 0; }
  
  .igx-grid-toolbar--cosy {
    min-height: 3rem;
    padding: 0 1rem; }
  
  .igx-grid-toolbar--compact {
    min-height: 3rem;
    padding: 0 0.75rem; }
  
  [dir='rtl'] .igx-grid-toolbar, [dir='rtl'] .igx-grid-toolbar--cosy, [dir='rtl'] .igx-grid-toolbar--compact {
    text-align: right; }
    [dir='rtl'] .igx-grid-toolbar .igx-button--flat, [dir='rtl'] .igx-grid-toolbar--cosy .igx-button--flat, [dir='rtl'] .igx-grid-toolbar--compact .igx-button--flat,
    [dir='rtl'] .igx-grid-toolbar .igx-button--icon,
    [dir='rtl'] .igx-grid-toolbar--cosy .igx-button--icon,
    [dir='rtl'] .igx-grid-toolbar--compact .igx-button--icon {
      margin-left: 0;
      margin-right: 0.5rem; }
    [dir='rtl'] .igx-grid-toolbar .igx-grid-toolbar__button-space, [dir='rtl'] .igx-grid-toolbar--cosy .igx-grid-toolbar__button-space, [dir='rtl'] .igx-grid-toolbar--compact .igx-grid-toolbar__button-space {
      text-align: right; }
      [dir='rtl'] .igx-grid-toolbar .igx-grid-toolbar__button-space > *, [dir='rtl'] .igx-grid-toolbar--cosy .igx-grid-toolbar__button-space > *, [dir='rtl'] .igx-grid-toolbar--compact .igx-grid-toolbar__button-space > * {
        margin-left: 0;
        margin-right: 0.5rem; }
      [dir='rtl'] .igx-grid-toolbar .igx-grid-toolbar__button-space > *:last-child, [dir='rtl'] .igx-grid-toolbar--cosy .igx-grid-toolbar__button-space > *:last-child, [dir='rtl'] .igx-grid-toolbar--compact .igx-grid-toolbar__button-space > *:last-child {
        margin-left: 0; }
  
  .igx-grid__caption {
    display: flex;
    align-items: center; }
  
  .igx-grid-toolbar__title {
    color: rgba(0, 0, 0, 0.54);
    flex: 1 1 auto;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden; }
  
  .igx-grid-toolbar__actions {
    display: flex;
    align-items: center;
    justify-content: space-between; }
  
  .igx-grid-toolbar__dropdown {
    position: relative; }
    .igx-grid-toolbar__dropdown .igx-filtering__options, .igx-grid-toolbar__dropdown .igx-filtering__options--to-left, .igx-grid-toolbar__dropdown .igx-filtering__options--to-right {
      background: #fff;
      padding: 0rem;
      right: 0;
      margin: 0;
      min-width: auto; }
  
  .igx-grid-toolbar__dd-list {
    margin: 0; }
  
  .igx-grid-toolbar__dd-list-items {
    position: relative;
    padding: 0.5em 1em;
    color: rgba(0, 0, 0, 0.54);
    white-space: nowrap; }
    .igx-grid-toolbar__dd-list-items:hover {
      background: rgba(0, 0, 0, 0.04);
      color: rgba(0, 0, 0, 0.54); }
    .igx-grid-toolbar__dd-list-items:focus {
      background: rgba(0, 0, 0, 0.04);
      color: rgba(0, 0, 0, 0.54); }
  
  :root {
    --igx-icon-color: currentColor;
    --igx-icon-size: 1.5rem;
    --igx-icon-disabled-color: rgba(0, 0, 0, 0.38); }
  
  .igx-icon, .igx-icon--inactive {
    width: 1.5rem;
    height: 1.5rem;
    font-size: 1.5rem;
    color: currentColor; }
  
  .igx-icon--inactive {
    color: rgba(0, 0, 0, 0.38) !important; }
  
  :root {
    --igx-input-group-idle-text-color: rgba(0, 0, 0, 0.54);
    --igx-input-group-filled-text-color: rgba(0, 0, 0, 0.87);
    --igx-input-group-focused-text-color: rgba(0, 0, 0, 0.87);
    --igx-input-group-disabled-text-color: rgba(0, 0, 0, 0.38);
    --igx-input-group-idle-secondary-color: rgba(0, 0, 0, 0.54);
    --igx-input-group-filled-secondary-color: rgba(0, 0, 0, 0.54);
    --igx-input-group-focused-secondary-color: #09f;
    --igx-input-group-idle-bottom-line-color: rgba(0, 0, 0, 0.54);
    --igx-input-group-hover-bottom-line-color: rgba(0, 0, 0, 0.87);
    --igx-input-group-filled-bottom-line-color: rgba(0, 0, 0, 0.54);
    --igx-input-group-focused-bottom-line-color: #09f;
    --igx-input-group-interim-bottom-line-color: rgba(0, 153, 255, 0.12);
    --igx-input-group-disabled-bottom-line-color: rgba(0, 0, 0, 0.42);
    --igx-input-group-disabled-border-color: rgba(0, 0, 0, 0.06);
    --igx-input-group-box-background: rgba(0, 0, 0, 0.06);
    --igx-input-group-box-disabled-background: rgba(0, 0, 0, 0.03);
    --igx-input-group-border-background: transparent;
    --igx-input-group-border-disabled-background: rgba(0, 0, 0, 0.03);
    --igx-input-group-search-background: white;
    --igx-input-group-search-disabled-background: white;
    --igx-input-group-search-shadow-color: rgba(0, 0, 0, 0.54);
    --igx-input-group-search-disabled-shadow-color: rgba(0, 0, 0, 0.12);
    --igx-input-group-success-secondary-color: #4eb862;
    --igx-input-group-warning-secondary-color: #fbb13c;
    --igx-input-group-error-secondary-color: #ff134a;
    --igx-input-group-variant: dark; }
  
  .igx-input-group, .igx-input-group--focused {
    position: relative;
    display: block;
    font-size: 1em;
    /* 16px, when base is 16px(html) */
    color: rgba(0, 0, 0, 0.54); }
  
  .igx-input-group--box, .igx-input-group--border, .igx-input-group--search {
    margin-top: 0; }
  
  .igx-input-group--box .igx-input-group__wrapper {
    border-radius: 4px;
    overflow: hidden; }
  
  .igx-input-group:hover {
    cursor: pointer; }
  
  .igx-input-group--disabled {
    pointer-events: none;
    user-select: none;
    color: rgba(0, 0, 0, 0.38); }
  
  .igx-input-group__bundle {
    position: relative;
    display: flex;
    align-items: center;
    flex-flow: row nowrap;
    padding-top: 1.125em;
    /* 12px when base is 16px (self) */
    box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.54);
    transition: box-shadow 0.25s cubic-bezier(0.215, 0.61, 0.355, 1), color 0.25s cubic-bezier(0.215, 0.61, 0.355, 1); }
  
  .igx-input-group--box .igx-input-group__bundle {
    padding: 0 1em;
    background: rgba(0, 0, 0, 0.06);
    box-shadow: inset 0 -2px 0 0 rgba(0, 0, 0, 0.54); }
    .igx-input-group--box .igx-input-group__bundle .igx-input-group__label + .igx-input-group__input, .igx-input-group--box .igx-input-group__bundle .igx-input-group--border .igx-input-group__label + .igx-input-group__input, .igx-input-group--box .igx-input-group__bundle .igx-input-group--search .igx-input-group__label + .igx-input-group__input {
      transform: translateY(0); }
  
  .igx-input-group__bundle:hover {
    cursor: pointer;
    box-shadow: inset 0 -2px 0 0 rgba(0, 0, 0, 0.87); }
  
  .igx-input-group--focused .igx-input-group__bundle {
    caret-color: #09f;
    box-shadow: inset 0 -2px 0 0 rgba(0, 153, 255, 0.12); }
  
  .igx-input-group--valid .igx-input-group__bundle {
    caret-color: #4eb862;
    box-shadow: inset 0 -1px 0 0 #4eb862; }
  
  .igx-input-group--invalid .igx-input-group__bundle {
    caret-color: #ff134a;
    box-shadow: inset 0 -1px 0 0 #ff134a; }
  
  .igx-input-group--disabled .igx-input-group__bundle {
    box-shadow: none;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.42) 40%, transparent 10%);
    background-position: bottom;
    background-size: 4px 1px;
    background-repeat: repeat-x; }
  
  .igx-input-group--disabled.igx-input-group--box .igx-input-group__bundle {
    background: rgba(0, 0, 0, 0.03); }
  
  .igx-input-group--border .igx-input-group__bundle {
    padding: 0 1em;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.54);
    border-radius: 4px;
    background: transparent; }
    .igx-input-group--border .igx-input-group__bundle .igx-input-group--box .igx-input-group__label + .igx-input-group__input, .igx-input-group--border .igx-input-group__bundle .igx-input-group__label + .igx-input-group__input, .igx-input-group--border .igx-input-group__bundle .igx-input-group--search .igx-input-group__label + .igx-input-group__input {
      transform: translateY(0); }
  
  .igx-input-group--border .igx-input-group__bundle:hover {
    box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.54); }
  
  .igx-input-group--focused.igx-input-group--border .igx-input-group__bundle {
    box-shadow: inset 0 0 0 2px #09f; }
  
  .igx-input-group--invalid.igx-input-group--border .igx-input-group__bundle {
    box-shadow: inset 0 0 0 2px #ff134a; }
  
  .igx-input-group--valid.igx-input-group--border .igx-input-group__bundle {
    box-shadow: inset 0 0 0 2px #4eb862; }
  
  .igx-input-group--disabled.igx-input-group--border .igx-input-group__bundle {
    background: rgba(0, 0, 0, 0.03);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06); }
  
  .igx-input-group--search .igx-input-group__bundle {
    padding: 0 1em;
    border-radius: 4px;
    border-bottom: none;
    background: white;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.26), 0 1px 1px 0 rgba(0, 0, 0, 0.12), 0 2px 1px -1px rgba(0, 0, 0, 0.08); }
    .igx-input-group--search .igx-input-group__bundle .igx-input-group--box .igx-input-group__label + .igx-input-group__input, .igx-input-group--search .igx-input-group__bundle .igx-input-group--border .igx-input-group__label + .igx-input-group__input, .igx-input-group--search .igx-input-group__bundle .igx-input-group__label + .igx-input-group__input {
      transform: translateY(0); }
  
  .igx-input-group--search .igx-input-group__bundle:hover {
    box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.26), 0 2px 2px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.08); }
  
  .igx-input-group--focused.igx-input-group--search .igx-input-group__bundle {
    box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.26), 0 2px 2px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.08); }
  
  .igx-input-group--disabled.igx-input-group--search .igx-input-group__bundle {
    background: white;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.26), 0 1px 1px 0 rgba(0, 0, 0, 0.12), 0 2px 1px -1px rgba(0, 0, 0, 0.08); }
  
  .igx-input-group__bundle-main {
    position: relative;
    flex-grow: 1; }
  
  .igx-input-group--box .igx-input-group__bundle-main, .igx-input-group--border .igx-input-group__bundle-main, .igx-input-group--search .igx-input-group__bundle-main {
    padding-top: 1.125em; }
  
  .igx-input-group__label {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    position: absolute;
    width: 100%;
    transform: translateY(50%);
    /* 8px, base is 16px */
    font-size: 1em;
    /* 16px, base is 16px */
    line-height: 1;
    height: 1.125em;
    /* 18px, base is 16px(self) */
    backface-visibility: hidden;
    will-change: transform;
    transform-origin: top left;
    transition: transform 0.25s cubic-bezier(0.215, 0.61, 0.355, 1), color 0.25s cubic-bezier(0.215, 0.61, 0.355, 1); }
    [dir='rtl'] .igx-input-group__label {
      transform-origin: top right; }
  
  .igx-input-group--box .igx-input-group__label, .igx-input-group--border .igx-input-group__label, .igx-input-group--search .igx-input-group__label {
    transform: translateY(0); }
  
  .igx-input-group--focused .igx-input-group__label, .igx-input-group--placeholder .igx-input-group__label, .igx-input-group--filled .igx-input-group__label {
    transform: translateY(-50%) scale(0.75); }
  
  .igx-input-group--placeholder .igx-input-group__label, .igx-input-group--disabled .igx-input-group__label {
    transition: color 0.25s cubic-bezier(0.215, 0.61, 0.355, 1); }
  
  .igx-input-group--focused .igx-input-group__label {
    color: #09f; }
  
  .igx-input-group--valid .igx-input-group__label {
    color: #09f; }
  
  .igx-input-group--invalid .igx-input-group__label {
    color: #ff134a; }
  
  .igx-input-group--required .igx-input-group__label::after {
    content: "*";
    font-size: inherit;
    vertical-align: top;
    margin-left: 2px;
    /* 2px base is 16px */
    line-height: 1; }
  
  .igx-input-group__input, .igx-input-group__textarea {
    position: relative;
    display: block;
    border: none;
    font-size: 1em;
    line-height: 1em;
    height: 2em;
    /* 32px, base is 16px */
    padding: 0 0 0.5em;
    /* 8px, base is 16px */
    border-top: 0.5em solid rgba(0, 0, 0, 0);
    width: 100%;
    min-width: 0;
    overflow: visible;
    font-family: inherit;
    background: transparent;
    color: rgba(0, 0, 0, 0.87);
    outline-style: none;
    box-shadow: none; }
    .igx-input-group__input::-webkit-input-placeholder, .igx-input-group__textarea::-webkit-input-placeholder {
      padding: 4px 0; }
    .igx-input-group__input::placeholder, .igx-input-group__textarea::placeholder {
      color: rgba(0, 0, 0, 0.38);
      opacity: 1; }
  
  .igx-input-group__input:-webkit-autofill, .igx-input-group__input:-webkit-autofill:hover, .igx-input-group__input:-webkit-autofill:focus, .igx-input-group__input:-webkit-autofill:active {
    -webkit-transition-delay: 99999s; }
  
  .igx-input-group__input::-ms-clear {
    display: none; }
  
  .igx-input-group--box .igx-input-group__input, .igx-input-group--border .igx-input-group__input, .igx-input-group--search .igx-input-group__input {
    transform: translateY(-25%); }
  
  .igx-input-group__input:hover, .igx-input-group__textarea:hover {
    cursor: pointer; }
  
  .igx-input-group__input:focus, .igx-input-group__textarea:focus {
    cursor: text;
    color: rgba(0, 0, 0, 0.87); }
  
  .igx-input-group--disabled .igx-input-group__input {
    color: rgba(0, 0, 0, 0.38); }
    .igx-input-group--disabled .igx-input-group__input::placeholder {
      color: rgba(0, 0, 0, 0.26); }
  
  .igx-input-group__textarea {
    min-height: 5.125em;
    /* 3 lines * 22px + 8px bottom padding + 8px top padding */
    margin-right: -1em;
    /* this fixes resizing in chrome !?!? */
    height: auto;
    line-height: 1.375em;
    /* 22px, base is 16px */
    resize: vertical;
    overflow: hidden; }
    [dir='rtl'] .igx-input-group__textarea {
      margin-right: initial;
      margin-left: -1em; }
  
  .igx-input-group--box .igx-input-group__textarea, .igx-input-group--border .igx-input-group__textarea, .igx-input-group--search .igx-input-group__textarea {
    width: calc(100% + 2em);
    /* add the padding to the width */
    margin: 0 -1em;
    padding-left: 1em;
    padding-right: 1em; }
  
  .igx-input-group__bundle-prefix,
  .igx-input-group__bundle-suffix {
    position: relative;
    display: inline-flex;
    align-items: center;
    line-height: 1;
    height: 2em;
    /* 32px, base is 16px */
    transition: all 0.25s cubic-bezier(0.215, 0.61, 0.355, 1); }
  
  .igx-input-group__bundle-prefix {
    padding: .5em .5em .5em 0;
    /* 8px, base is 16px */ }
    [dir='rtl'] .igx-input-group__bundle-prefix {
      padding: .5em 0 .5em .5em;
      /* 8px, base is 16px */ }
  
  
  .igx-input-group__bundle-suffix {
    padding: .5em 0;
    /* 8px, base is 16px */ }
  
  .igx-input-group--box .igx-input-group__bundle-prefix, .igx-input-group--border .igx-input-group__bundle-prefix, .igx-input-group--search .igx-input-group__bundle-prefix,
  .igx-input-group--box .igx-input-group__bundle-suffix,
  .igx-input-group--border .igx-input-group__bundle-suffix,
  .igx-input-group--search .igx-input-group__bundle-suffix {
    height: 100%; }
  
  .igx-input-group--box .igx-input-group__bundle-prefix, .igx-input-group--border .igx-input-group__bundle-prefix, .igx-input-group--search .igx-input-group__bundle-prefix {
    padding: 0 .5em 0 0;
    /* 8px, base is 16px */ }
    [dir='rtl'] .igx-input-group--box .igx-input-group__bundle-prefix, .igx-input-group--box [dir='rtl'] .igx-input-group__bundle-prefix, [dir='rtl'] .igx-input-group--border .igx-input-group__bundle-prefix, .igx-input-group--border [dir='rtl'] .igx-input-group__bundle-prefix, [dir='rtl'] .igx-input-group--search .igx-input-group__bundle-prefix, .igx-input-group--search [dir='rtl'] .igx-input-group__bundle-prefix {
      padding: 0 0 0 .5em;
      /* 8px, base is 16px */ }
  
  
  .igx-input-group--box .igx-input-group__bundle-suffix,
  .igx-input-group--border .igx-input-group__bundle-suffix,
  .igx-input-group--search .igx-input-group__bundle-suffix {
    padding: 0; }
  
  .igx-input-group--invalid .igx-input-group__bundle-prefix,
  .igx-input-group--invalid .igx-input-group__bundle-suffix {
    color: #ff134a; }
  
  .igx-input-group__border {
    height: 2px;
    /* 2px, when base is 16px */
    margin-top: -2px;
    /* 2px, when base is 16px */
    transform: scaleX(0);
    transform-origin: center;
    background: #09f; }
  
  .igx-input-group--focused .igx-input-group__border {
    transform: scaleX(1);
    transition: transform 0.25s cubic-bezier(0.215, 0.61, 0.355, 1); }
  
  .igx-input-group--valid .igx-input-group__border {
    background: #4eb862; }
  
  .igx-input-group--invalid .igx-input-group__border {
    background: #ff134a; }
  
  .igx-input-group--border .igx-input-group__border, .igx-input-group--search .igx-input-group__border {
    display: none; }
  
  .igx-input-group__hint {
    position: relative;
    display: flex;
    justify-content: space-between;
    font-size: 0.75em;
    /* 12px */
    line-height: 1.16667em;
    /* 13.5px, base is 12px */
    padding-top: 0.66667em;
    /* 8px, base is 12px */ }
  
  .igx-input-group--box .igx-input-group__hint, .igx-input-group--border .igx-input-group__hint, .igx-input-group--search .igx-input-group__hint {
    margin-left: 1.33333em;
    /* 16px, base is 12px */
    margin-right: 1.33333em;
    /* 16px, base is 12px */ }
  
  .igx-input-group--valid .igx-input-group__hint {
    color: #4eb862; }
  
  .igx-input-group--invalid .igx-input-group__hint {
    color: #ff134a; }
  
  .igx-input-group__hint-item, .igx-input-group__hint-item--start, .igx-input-group__hint-item--end {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    position: relative;
    min-width: 0;
    max-width: 100%; }
  
  .igx-input-group__hint-item--start {
    order: 0; }
  
  .igx-input-group__hint-item--end {
    order: 1; }
  
  :root {
    --igx-list-background: #fff;
    --igx-list-header-background: #fff;
    --igx-list-header-text-color: #e41c77;
    --igx-list-item-background: #fff;
    --igx-list-item-text-color: rgba(0, 0, 0, 0.74);
    --igx-list-item-background-active: rgba(0, 0, 0, 0.04);
    --igx-list-item-text-color-active: rgba(0, 0, 0, 0.74); }
  
  .igx-list, .igx-list__empty {
    display: flex;
    flex-flow: column nowrap;
    background-color: #fff;
    height: 100%;
    overflow: hidden; }
  
  .igx-list__empty, .igx-list__empty--custom {
    justify-content: center;
    align-items: center; }
  
  .image {
    width: auto;
    max-height: 120px; }
  
  .message {
    text-align: center;
    color: rgba(0, 0, 0, 0.74);
    padding: 1em;
    z-index: 1; }
  
  .igx-list__header {
    display: flex;
    align-items: center;
    color: #e41c77;
    background-color: #fff;
    font-size: 0.8125em;
    font-weight: normal;
    height: 3em;
    line-height: 3em;
    padding: 0.5em 1em;
    user-select: none; }
  
  .igx-list__item, .igx-list__item:active {
    display: flex;
    position: relative;
    flex-flow: column wrap;
    justify-content: center;
    padding: 0.5em 1em;
    min-height: 3em;
    font-size: 1em;
    color: rgba(0, 0, 0, 0.74);
    background-color: #fff;
    z-index: 2; }
  
  .igx-list__item:active {
    color: rgba(0, 0, 0, 0.74);
    background-color: rgba(0, 0, 0, 0.04);
    z-index: 3; }
  
  .igx-list__item:not(:active) {
    transition: left 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
  
  :root {
    --igx-navbar-background: #09f;
    --igx-navbar-text-color: #fff;
    --igx-navbar-idle-icon-color: #fff;
    --igx-navbar-hover-icon-color: #fff;
    --igx-navbar-nav-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.26),
          0 4px 5px 0 rgba(0, 0, 0, 0.12),
          0 1px 10px 0 rgba(0, 0, 0, 0.08); }
  
  .igx-navbar {
    display: flex;
    position: relative;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 56px;
    padding: 0 1em;
    background: #09f;
    color: #fff;
    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.26), 0 4px 5px 0 rgba(0, 0, 0, 0.12), 0 1px 10px 0 rgba(0, 0, 0, 0.08);
    z-index: 4; }
  
  .igx-navbar__title {
    margin: 0;
    font-size: 1.125em;
    line-height: 1.125em; }
  
  .igx-navbar__left, .igx-navbar__right {
    display: flex;
    align-items: center;
    user-select: none; }
    .igx-navbar__left * + *, .igx-navbar__right * + * {
      margin-left: 16px; }
  
  .igx-navbar__left igx-icon, .igx-navbar__right igx-icon {
    cursor: pointer;
    color: #fff;
    transition: color 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
    .igx-navbar__left igx-icon:hover, .igx-navbar__right igx-icon:hover {
      color: #fff; }
  
  :root {
    --igx-navdrawer-background: #fff;
    --igx-navdrawer-border-color: rgba(0, 0, 0, 0.14);
    --igx-navdrawer-item-text-color: rgba(0, 0, 0, 0.62);
    --igx-navdrawer-item-active-text-color: #09f;
    --igx-navdrawer-item-active-background: rgba(0, 0, 0, 0.04);
    --igx-navdrawer-item-hover-background: rgba(0, 0, 0, 0.08);
    --igx-navdrawer-item-hover-text-color: rgba(0, 0, 0, 0.74);
    --igx-navdrawer-item-header-text-color: rgba(0, 0, 0, 0.54);
    --igx-navdrawer-item-icon-color: rgba(0, 0, 0, 0.62);
    --igx-navdrawer-item-active-icon-color: #09f;
    --igx-navdrawer-item-hover-icon-color: rgba(0, 0, 0, 0.74); }
  
  .igx-nav-drawer {
    transition: flex-basis;
    transition-duration: .3s;
    transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); }
  
  .igx-nav-drawer__aside {
    position: fixed;
    height: 100%;
    max-width: 90%;
    min-height: 100%;
    overflow-x: hidden;
    background-color: #fff;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 999;
    transition: width, transform;
    transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94), cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.26), 0 5px 8px 0 rgba(0, 0, 0, 0.12), 0 1px 14px 0 rgba(0, 0, 0, 0.08);
    border-right: 1px solid rgba(0, 0, 0, 0.14); }
  
  .igx-nav-drawer__aside.panning {
    overflow-x: hidden;
    transition: none; }
  
  .igx-nav-drawer__aside--pinned {
    position: relative;
    max-width: 100%;
    box-shadow: none;
    z-index: 0; }
  
  .igx-nav-drawer__aside--collapsed.igx-nav-drawer__aside--right {
    transform: translate3d(300px, 0, 0);
    box-shadow: none; }
  
  .igx-nav-drawer__aside--pinned.igx-nav-drawer__aside--collapsed {
    transform: none;
    width: 0;
    overflow: hidden;
    border: none; }
  
  .igx-nav-drawer__aside--collapsed {
    transform: translate3d(-300px, 0, 0);
    box-shadow: none; }
  
  .igx-nav-drawer__aside--right {
    left: auto;
    right: 0;
    border-right: none;
    border-left: 1px solid rgba(0, 0, 0, 0.14); }
  
  .igx-nav-drawer__aside--mini {
    width: 3.75rem;
    transition-duration: .2s, .2s; }
  
  .igx-nav-drawer__aside--normal {
    width: 15.125rem;
    transition-duration: .3s, .3s; }
  
  .igx-nav-drawer__overlay {
    opacity: 1;
    background-color:rgba(138, 135, 135, 0.472);
    transition: opacity, visibility;
    transition-duration: .25s, .25s;
    transition-timing-function: ease-in, step-start;
    transition-delay: 0s, 0s;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    visibility: visible;
    z-index: 999; }
  
  .igx-nav-drawer__overlay.panning {
    transform: translate3d(0, 0, 0);
    transition: none; }
  
  .igx-nav-drawer__overlay--hidden {
    transition-timing-function: ease-in-out, step-end;
    visibility: hidden;
    opacity: 0; }
  
  .igx-nav-drawer__overlay.panning.igx-nav-drawer__overlay--hidden {
    /* must be visible during pan.. */
    visibility: visible; }
  
  .igx-nav-drawer__item, .igx-nav-drawer__item--active {
    position: relative;
    display: flex;
    flex-flow: row nowrap;
    color: rgba(0, 0, 0, 0.62);
    max-height: 400px;
    padding: 12px 16px;
    cursor: pointer;
    font-size: 14px;
    align-items: center;
    font-weight: 600;
    user-select: none;
    outline: transparent;
    white-space: nowrap; }
    .igx-nav-drawer__item > igx-icon + span, .igx-nav-drawer__item--active > igx-icon + span {
      margin-left: 32px; }
    .igx-nav-drawer__item[dir='rtl'] > igx-icon + span, .igx-nav-drawer__item--active[dir='rtl'] > igx-icon + span {
      margin-right: 32px; }
    .igx-nav-drawer__item igx-icon, .igx-nav-drawer__item--active igx-icon {
      color: rgba(0, 0, 0, 0.62); }
    .igx-nav-drawer__item:hover, .igx-nav-drawer__item--active:hover, .igx-nav-drawer__item:focus, .igx-nav-drawer__item--active:focus {
      background-color: rgba(0, 0, 0, 0.08);
      color: rgba(0, 0, 0, 0.74); }
      .igx-nav-drawer__item:hover igx-icon, .igx-nav-drawer__item--active:hover igx-icon, .igx-nav-drawer__item:focus igx-icon, .igx-nav-drawer__item--active:focus igx-icon {
        color: rgba(0, 0, 0, 0.74); }
  
  .igx-nav-drawer__item--active {
    color: #09f;
    background-color: rgba(0, 0, 0, 0.04); }
    .igx-nav-drawer__item--active igx-icon {
      color: #09f; }
    .igx-nav-drawer__item--active:focus, .igx-nav-drawer__item--active:hover {
      color: #09f;
      background-color: rgba(0, 0, 0, 0.04); }
      .igx-nav-drawer__item--active:focus igx-icon, .igx-nav-drawer__item--active:hover igx-icon {
        color: #09f; }
  
  .igx-nav-drawer__item--header {
    display: block;
    padding: 12px 16px;
    white-space: nowrap;
    color: rgba(0, 0, 0, 0.54); }
  
  .igx-nav-drawer__style-dummy {
    height: 0;
    background: none;
    box-shadow: none;
    transition: none;
    visibility: hidden; }
  
  :root {
    --igx-overlay-background-color: rgba(0, 0, 0, 0.38); }
  
  .igx-overlay__wrapper, .igx-overlay__wrapper--modal {
    position: fixed;
    display: flex;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: transparent;
    transition: background-color 0.25s cubic-bezier(0.455, 0.03, 0.515, 0.955);
    pointer-events: none; }
  
  .igx-overlay__wrapper--modal {
    background-color: rgba(0, 0, 0, 0.38);
    pointer-events: initial; }
  
  .igx-overlay__content, .igx-overlay__content--modal {
    position: relative;
    pointer-events: all; }
  
  .igx-overlay__content--modal {
    pointer-events: initial; }
  
  :root {
    --igx-grid-paginator-text-color: currentColor;
    --igx-grid-paginator-background-color: #f4f4f4;
    --igx-grid-paginator-border-color: rgba(0, 0, 0, 0.26); }
  
  .igx-grid-paginator {
    display: flex;
    justify-content: center;
    align-items: center;
    color: currentColor;
    background: #f4f4f4;
    grid-row: 7;
    padding: 0.3125rem 0;
    font-size: 12px;
    border-top: 1px dotted rgba(0, 0, 0, 0.26); }
    .igx-grid-paginator:empty {
      padding: 0; }
    .igx-grid-paginator > * {
      margin: 0 0.3125rem; }
  
  :root {
    --igx-progress-circular-base-circle-color: rgba(0, 0, 0, 0.12);
    --igx-progress-circular-progress-circle-color: #09f;
    --igx-progress-circular-text-color: rgba(0, 0, 0, 0.62); }
  
  .progress-circular {
    width: 100%;
    height: 100%; }
  
  .progress-circular__innercircle {
    stroke-width: 4;
    fill: transparent;
    stroke: rgba(0, 0, 0, 0.12); }
  
  .progress-circular__circle {
    fill: transparent;
    stroke: #09f;
    stroke-width: 6;
    stroke-linecap: round;
    stroke-dashoffset: 289;
    stroke-dasharray: 289;
    transform-origin: 50% 50%;
    transform: rotate(-90deg); }
  
  .progress-circular__text, .progress-circular__text--hidden {
    font-size: 2rem;
    font-weight: 600;
    fill: rgba(0, 0, 0, 0.62); }
  
  .progress-circular__text--hidden {
    visibility: hidden; }
  
  :root {
    --igx-progress-linear-track-color: rgba(0, 0, 0, 0.12);
    --igx-progress-linear-fill-color-default: #09f;
    --igx-progress-linear-fill-color-danger: #ff134a;
    --igx-progress-linear-fill-color-warning: #fbb13c;
    --igx-progress-linear-fill-color-info: #1377d5;
    --igx-progress-linear-fill-color-success: #4eb862;
    --igx-progress-linear-stripes-color: rgba(255, 255, 255, 0.7);
    --igx-progress-linear-text-color: rgba(0, 0, 0, 0.62); }
  
  .progress-linear {
    position: relative;
    display: flex;
    align-items: center;
    flex-flow: column nowrap;
    width: 100%; }
  
  .progress-linear__bar {
    width: inherit;
    height: 4px;
    overflow: hidden; }
  
  .progress-linear__bar-base {
    position: absolute;
    width: inherit;
    height: inherit;
    background: rgba(0, 0, 0, 0.12);
    z-index: 0; }
  
  .progress-linear__bar-progress, .progress-linear__bar-progress--default, .progress-linear__bar-progress--danger, .progress-linear__bar-progress--warning, .progress-linear__bar-progress--info, .progress-linear__bar-progress--success, .progress-linear--striped .progress-linear__bar-progress, .progress-linear--striped .progress-linear__bar-progress--default, .progress-linear--striped .progress-linear__bar-progress--danger, .progress-linear--striped .progress-linear__bar-progress--warning, .progress-linear--striped .progress-linear__bar-progress--info, .progress-linear--striped .progress-linear__bar-progress--success {
    width: 100%;
    position: relative;
    height: inherit;
    backface-visibility: hidden; }
  
  .progress-linear--striped .progress-linear__bar-progress, .progress-linear--striped .progress-linear__bar-progress--default, .progress-linear--striped .progress-linear__bar-progress--danger, .progress-linear--striped .progress-linear__bar-progress--warning, .progress-linear--striped .progress-linear__bar-progress--info, .progress-linear--striped .progress-linear__bar-progress--success {
    background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.7) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.7) 50%, rgba(255, 255, 255, 0.7) 75%, transparent 75%, transparent);
    background-size: 40px 40px; }
  
  .progress-linear__bar-progress--default {
    background: #09f; }
  
  .progress-linear__bar-progress--danger {
    background-color: #ff134a; }
  
  .progress-linear__bar-progress--warning {
    background-color: #fbb13c; }
  
  .progress-linear__bar-progress--info {
    background-color: #1377d5; }
  
  .progress-linear__bar-progress--success {
    background-color: #4eb862; }
  
  .progress-linear__value, .progress-linear__value--start, .progress-linear__value--center, .progress-linear__value--end, .progress-linear__value--top, .progress-linear__value--hidden {
    margin: 0;
    color: rgba(0, 0, 0, 0.62);
    font-size: 0.875em;
    font-weight: 600; }
  
  .progress-linear__value, .progress-linear__value--start {
    align-self: flex-start; }
  
  .progress-linear__value--center {
    align-self: center; }
  
  .progress-linear__value--end {
    align-self: flex-end; }
  
  .progress-linear__value--top {
    order: -1; }
  
  .progress-linear__value--hidden {
    display: none; }
  
  :root {
    --igx-radio-label-color: rgba(0, 0, 0, 0.87);
    --igx-radio-empty-color: rgba(0, 0, 0, 0.54);
    --igx-radio-fill-color: #e41c77;
    --igx-radio-disabled-color: rgba(0, 0, 0, 0.26);
    --igx-radio-variant: dark; }
  
  .igx-radio {
    position: relative;
    display: inline-flex;
    flex-flow: row nowrap;
    align-items: center;
    font-size: 16px;
    color: rgba(0, 0, 0, 0.87); }
  
  .igx-radio__input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    border: none;
    clip: rect(0, 0, 0, 0);
    outline: 0;
    pointer-events: none;
    overflow: hidden;
    appearance: none; }
  
  .igx-radio--disabled {
    pointer-events: none;
    color: rgba(0, 0, 0, 0.26);
    user-select: none; }
  
  .igx-radio__composite {
    position: relative;
    display: inline-block;
    width: 1.25em;
    height: 1.25em;
    min-width: 1.25em;
    line-height: 1.25em;
    cursor: pointer;
    color: rgba(0, 0, 0, 0.87);
    user-select: none; }
    .igx-radio__composite::before, .igx-radio__composite::after {
      position: absolute;
      content: '';
      width: 1.25em;
      height: 1.25em;
      left: 0;
      top: 0;
      border-radius: 50% 50%; }
    .igx-radio__composite::before {
      backface-visibility: hidden;
      transform: scale3d(0, 0, 0);
      transition: all 0.2s ease-in; }
    .igx-radio__composite::after {
      border: 2px solid rgba(0, 0, 0, 0.54); }
  
  .igx-radio--checked .igx-radio__composite::before {
    border: 2px solid #e41c77;
    background-color: #e41c77;
    transform: scale3d(0.5, 0.5, 0.5); }
  
  .igx-radio--checked .igx-radio__composite::after {
    border: 2px solid #e41c77; }
  
  .igx-radio--disabled .igx-radio__composite::after {
    border: 2px solid rgba(0, 0, 0, 0.26); }
  
  .igx-radio--checked.igx-radio--disabled .igx-radio__composite::after {
    border: 2px solid rgba(0, 0, 0, 0.26); }
  
  .igx-radio--checked.igx-radio--disabled .igx-radio__composite::before {
    background-color: rgba(0, 0, 0, 0.26);
    border: 2px solid transparent; }
  
  .igx-radio__label, .igx-radio__label--before {
    color: currentColor;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    word-wrap: break-all; }
  
  .igx-radio__label {
    margin-left: 0.5em; }
    [dir='rtl'] .igx-radio__label {
      margin-left: initial;
      margin-right: 0.5em; }
      [dir='rtl'] .igx-radio__label:empty {
        margin: 0; }
  
  .igx-radio__label--before {
    order: -1;
    margin-right: 0.5em; }
    [dir='rtl'] .igx-radio__label--before {
      margin-right: initial;
      margin-left: 0.5em; }
      [dir='rtl'] .igx-radio__label--before:empty {
        margin: 0; }
  
  .igx-radio__ripple {
    --igx-ripple-color: #e41c77;
    --igx-ripple-test: test;
    position: absolute;
    top: calc(50% - 1.5em);
    left: calc(50% - 1.5em);
    width: 3em;
    height: 3em;
    border-radius: 1.5em;
    overflow: hidden;
    pointer-events: none;
    filter: opacity(1); }
    .igx-radio__ripple .igx-ripple__inner {
      display: block;
      position: absolute;
      border-radius: 50%;
      background: #e41c77;
      pointer-events: none;
      transform-origin: center;
      transform: translate3d(0, 0, 0) scale(0);
      will-change: opacity, transform;
      opacity: .5; }
    .igx-radio__ripple .igx-ripple {
      overflow: hidden; }
  
  .igx-radio--focused .igx-radio__ripple {
    animation: "scale-in-out" 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
    background-color: #e41c77;
    transition: background-color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    opacity: .12; }
  
  .igx-radio:hover .igx-radio__ripple::after, .igx-radio:active .igx-radio__ripple::after, .igx-radio--checked:hover .igx-radio__ripple::after, .igx-radio--checked:active .igx-radio__ripple::after {
    position: absolute;
    content: '';
    opacity: .06;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0; }
  
  .igx-radio:hover .igx-radio__ripple::after, .igx-radio:active .igx-radio__ripple::after {
    background-color: rgba(0, 0, 0, 0.54); }
  
  .igx-radio--checked:hover .igx-radio__ripple::after, .igx-radio--checked:active .igx-radio__ripple::after {
    background-color: #e41c77; }
  
  .igx-radio:active .igx-radio__ripple::after, .igx-radio--checked:active .igx-radio__ripple::after {
    opacity: .12; }
  
  :root {
    --igx-slider-track-color: #e41c77;
    --igx-slider-thumb-color: #e41c77;
    --igx-slider-disabled-thumb-color: #bcbcbc;
    --igx-slider-label-background-color: #e41c77;
    --igx-slider-label-text-color: black;
    --igx-slider-base-track-color: rgba(0, 0, 0, 0.38);
    --igx-slider-disabled-base-track-color: rgba(0, 0, 0, 0.26);
    --igx-slider-variant: dark; }
  
  .igx-slider, .igx-slider--disabled {
    display: flex;
    position: relative;
    height: 48px;
    align-items: center; }
  
  .igx-slider__thumbs {
    position: absolute;
    width: 100%;
    height: 0;
    cursor: default;
    z-index: 1; }
  
  .igx-slider__track, .igx-slider--disabled .igx-slider__track {
    position: absolute;
    width: 100%;
    height: 2px;
    background: rgba(0, 0, 0, 0.38);
    transition: background .2s ease; }
  
  .igx-slider--disabled .igx-slider__track {
    background: rgba(0, 0, 0, 0.26); }
  
  .igx-slider__track-ticks, .igx-slider--disabled .igx-slider__track-ticks {
    position: absolute;
    width: 100%;
    height: 2px;
    background-size: 100% 2px;
    opacity: .85;
    transition: opacity .2s ease;
    z-index: 1; }
  
  .igx-slider--disabled .igx-slider__track-ticks {
    visibility: hidden; }
  
  .igx-slider__track-fill, .igx-slider--disabled .igx-slider__track-fill {
    position: absolute;
    width: 100%;
    height: inherit;
    background: #e41c77;
    transform-origin: 0 0 0;
    transform: scaleX(0); }
  
  .igx-slider--disabled .igx-slider__track-fill {
    visibility: hidden; }
  
  .igx-slider__thumb-from, .igx-slider__thumb-to, .igx-slider--disabled .igx-slider__thumb-from, .igx-slider--disabled .igx-slider__thumb-to {
    display: flex;
    position: absolute;
    justify-content: center;
    flex-flow: row nowrap;
    width: 14px;
    height: 14px;
    margin-left: -7px;
    top: -7px;
    outline: none; }
  
  .igx-slider__thumb-from .label, .igx-slider__thumb-to .label, .igx-slider--disabled .igx-slider__thumb-from .label, .igx-slider--disabled .igx-slider__thumb-to .label {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 28px;
    height: 28px;
    padding: 0 2px;
    border-radius: 14px;
    top: -36px;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 0.6875rem;
    color: black;
    background: #e41c77;
    opacity: .5;
    transform: scale(0);
    border-color: #e41c77 transparent transparent;
    transform-origin: 50% 150% 0;
    transition: transform .2s ease-out;
    z-index: -1; }
    .igx-slider__thumb-from .label::after, .igx-slider__thumb-to .label::after, .igx-slider--disabled .igx-slider__thumb-from .label::after, .igx-slider--disabled .igx-slider__thumb-to .label::after {
      content: '';
      position: absolute;
      left: 50%;
      width: 0;
      height: 0;
      transform: translateX(-50%);
      border-left: 10px solid;
      border-right: 10px solid;
      border-top: 12px solid;
      border-color: inherit;
      top: 24px;
      z-index: -1; }
  
  .igx-slider__thumb-from .dot, .igx-slider__thumb-to .dot {
    position: absolute;
    left: 0;
    width: inherit;
    height: inherit;
    border-radius: 7px;
    background: #e41c77;
    transform: scale(1);
    transform-origin: 50% 50% 0;
    opacity: 1;
    transition: transform .2s ease-out; }
  
  .igx-slider--disabled .igx-slider__thumb-from .dot, .igx-slider--disabled .igx-slider__thumb-to .dot {
    background: #bcbcbc;
    transform: scale(0.9);
    border: 2px solid transparent; }
  
  .igx-slider__thumb-from--active .dot, .igx-slider__thumb-to--active .dot {
    opacity: 0;
    transform: scale(0); }
  
  .igx-slider__thumb-from--active .label, .igx-slider__thumb-to--active .label {
    opacity: .85;
    transform: scale(1.2); }
  
  .igx-slider__thumb-from--active, .igx-slider__thumb-to--active {
    z-index: 1; }
  
  :root {
    --igx-snackbar-background: #323232;
    --igx-snackbar-text-color: #fff;
    --igx-snackbar-button-color: #e41c77; }
  
  .igx-snackbar {
    position: relative;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: space-between;
    min-height: 3rem;
    padding: 0.4375rem 1.5rem;
    color: #fff;
    background: #323232;
    backface-visibility: hidden; }
  
  .igx-snackbar__message {
    font-size: 0.875rem; }
  
  .igx-snackbar__button {
    background: transparent;
    color: #e41c77;
    border: 0;
    line-height: 1rem;
    margin-left: 1.5rem;
    text-transform: uppercase;
    user-select: none;
    font-weight: 600;
    -webkit-tap-highlight-color: transparent;
    outline: none;
    transition: color .2s ease; }
    .igx-snackbar__button:hover {
      color: #e41c77; }
  
  :root {
    --igx-switch-thumb-on-color: #e41c77;
    --igx-switch-track-on-color: rgba(228, 28, 119, 0.5);
    --igx-switch-thumb-off-color: #fafafa;
    --igx-switch-track-off-color: rgba(0, 0, 0, 0.5);
    --igx-switch-label-color: rgba(0, 0, 0, 0.87);
    --igx-switch-label-disabled-color: rgba(0, 0, 0, 0.26);
    --igx-switch-track-disabled-color: rgba(0, 0, 0, 0.12);
    --igx-switch-thumb-disabled-color: #bcbcbc;
    --igx-switch-variant: dark; }
  
  .igx-switch {
    position: relative;
    display: inline-flex;
    flex-flow: row nowrap;
    align-items: center;
    font-size: 16px; }
  
  .igx-switch__input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    border: none;
    clip: rect(0, 0, 0, 0);
    outline: 0;
    pointer-events: none;
    overflow: hidden;
    appearance: none; }
  
  .igx-switch--disabled {
    user-select: none;
    pointer-events: none;
    cursor: initial; }
  
  .igx-switch__composite {
    display: flex;
    align-items: center;
    width: 36px;
    height: 14px;
    border-radius: 100px;
    background-color: rgba(0, 0, 0, 0.5);
    cursor: pointer;
    user-select: none;
    transition: all 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955); }
  
  .igx-switch--checked .igx-switch__composite {
    background-color: rgba(228, 28, 119, 0.5); }
  
  .igx-switch--disabled .igx-switch__composite {
    background: rgba(0, 0, 0, 0.12); }
  
  .igx-switch__composite-thumb {
    position: relative;
    display: block;
    width: 20px;
    height: 20px;
    min-width: 20px;
    border-radius: 50%;
    background: #fafafa;
    box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.26), 0 2px 2px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.08);
    transition: all 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955); }
    .igx-switch__composite-thumb:hover {
      box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.26), 0 3px 4px 0 rgba(0, 0, 0, 0.12), 0 3px 3px -2px rgba(0, 0, 0, 0.08); }
  
  .igx-switch--checked .igx-switch__composite-thumb {
    transform: translateX(16px);
    background: #e41c77; }
    [dir='rtl'] .igx-switch--checked .igx-switch__composite-thumb, .igx-switch--checked [dir='rtl'] .igx-switch__composite-thumb {
      transform: translateX(-16px); }
  
  .igx-switch--disabled .igx-switch__composite-thumb {
    background: #bcbcbc;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.26), 0 1px 1px 0 rgba(0, 0, 0, 0.12), 0 2px 1px -1px rgba(0, 0, 0, 0.08); }
  
  .igx-switch__ripple {
    --igx-ripple-color: #e41c77;
    --igx-ripple-test: test;
    position: absolute;
    top: calc(50% - 1.5em);
    left: calc(50% - 1.5em);
    width: 3em;
    height: 3em;
    border-radius: 1.5em;
    overflow: hidden;
    pointer-events: none;
    filter: opacity(1); }
    .igx-switch__ripple .igx-ripple__inner {
      display: block;
      position: absolute;
      border-radius: 50%;
      background: #e41c77;
      pointer-events: none;
      transform-origin: center;
      transform: translate3d(0, 0, 0) scale(0);
      will-change: opacity, transform;
      opacity: .5; }
    .igx-switch__ripple .igx-ripple {
      overflow: hidden; }
  
  .igx-switch--focused .igx-switch__ripple {
    animation: "scale-in-out" 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
    background-color: #e41c77;
    transition: background-color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    opacity: .12; }
  
  .igx-switch__label, .igx-switch__label--before {
    display: inline-block;
    color: rgba(0, 0, 0, 0.87);
    font-size: 1em;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    word-wrap: break-all; }
    .igx-switch__label:empty, .igx-switch__label--before:empty {
      margin: 0; }
  
  .igx-switch__label {
    margin-left: 0.5em; }
    [dir='rtl'] .igx-switch__label {
      margin-left: initial;
      margin-right: 0.5em; }
      [dir='rtl'] .igx-switch__label:empty {
        margin: 0; }
  
  .igx-switch__label--before {
    order: -1;
    margin-right: 0.5em; }
    [dir='rtl'] .igx-switch__label--before {
      margin-right: initial;
      margin-left: 0.5em; }
      [dir='rtl'] .igx-switch__label--before:empty {
        margin: 0; }
  
  .igx-switch--disabled .igx-switch__label, .igx-switch--disabled .igx-switch__label--before {
    color: rgba(0, 0, 0, 0.26); }
  
  .igx-switch:hover .igx-switch__ripple::after, .igx-switch:active .igx-switch__ripple::after, .igx-switch--checked:hover .igx-switch__ripple::after, .igx-switch--checked:active .igx-switch__ripple::after {
    position: absolute;
    content: '';
    opacity: .06;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0; }
  
  .igx-switch:hover .igx-switch__ripple::after, .igx-switch:active .igx-switch__ripple::after {
    background-color: rgba(0, 0, 0, 0.5); }
  
  .igx-switch--checked:hover .igx-switch__ripple::after, .igx-switch--checked:active .igx-switch__ripple::after {
    background-color: #e41c77; }
  
  .igx-switch:active .igx-switch__ripple::after, .igx-switch--checked:active .igx-switch__ripple::after {
    opacity: .12; }
  
  :root {
    --igx-tabs-item-text-color: rgba(0, 0, 0, 0.62);
    --igx-tabs-item-background: #fff;
    --igx-tabs-item-hover-color: rgba(0, 0, 0, 0.62);
    --igx-tabs-item-hover-background: rgba(0, 0, 0, 0.08);
    --igx-tabs-item-active-color: rgba(0, 0, 0, 0.74);
    --igx-tabs-item-active-icon-color: #09f;
    --igx-tabs-item-active-background: rgba(0, 0, 0, 0.08);
    --igx-tabs-indicator-color: #09f;
    --igx-tabs-button-color: rgba(0, 0, 0, 0.38);
    --igx-tabs-button-background: #fff;
    --igx-tabs-button-hover-background: rgba(0, 0, 0, 0.04);
    --igx-tabs-button-hover-color: rgba(0, 0, 0, 0.54);
    --igx-tabs-tab-ripple-color: rgba(0, 0, 0, 0.04);
    --igx-tabs-button-ripple-color: rgba(0, 0, 0, 0.04); }
  
  .igx-tabs {
    display: flex;
    flex-direction: column; }
  
  .igx-tabs__header {
    display: flex;
    align-items: center;
    overflow: hidden;
    background: #fff; }
  
  .igx-tabs__content-fixed {
    min-width: 264px; }
  
  .igx-tabs__content-fixed,
  .igx-tabs__header-wrapper-fixed {
    flex: 1 1 auto;
    overflow: hidden; }
  
  .igx-tabs__content-fluid,
  .igx-tabs__header-wrapper-fluid {
    position: relative;
    flex-wrap: nowrap;
    transition: transform 0.2s cubic-bezier(0.35, 0, 0.25, 1); }
  
  
  .igx-tabs__header-wrapper-fluid {
    display: inline-flex;
    align-items: center;
    min-width: 100%; }
  
  .igx-tabs__content-fluid {
    display: flex; }
  
  .igx-tabs__header-menu-item, .igx-tabs__header-menu-item--selected, .igx-tabs__header-menu-item--disabled {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-width: 160px;
    max-width: 264px;
    height: 3rem;
    flex-basis: auto;
    flex-shrink: 0;
    padding: 0 1.5rem;
    overflow: hidden;
    cursor: pointer;
    position: relative;
    transition: background 0.3s cubic-bezier(0.35, 0, 0.25, 1);
    user-select: none;
    background: #fff;
    color: rgba(0, 0, 0, 0.62);
    outline: 0;
    --igx-ripple-color: rgba(0, 0, 0, 0.04);
    --igx-ripple-test: test; }
    @media only screen and (max-width: 600px) {
      .igx-tabs__header-menu-item, .igx-tabs__header-menu-item--selected, .igx-tabs__header-menu-item--disabled {
        min-width: 74px; } }
    .igx-tabs__header-menu-item::-moz-focus-inner, .igx-tabs__header-menu-item--selected::-moz-focus-inner, .igx-tabs__header-menu-item--disabled::-moz-focus-inner {
      border: 0; }
    .igx-tabs__header-menu-item:focus, .igx-tabs__header-menu-item--selected:focus, .igx-tabs__header-menu-item--disabled:focus {
      background: rgba(0, 0, 0, 0.08); }
    .igx-tabs__header-menu-item:hover, .igx-tabs__header-menu-item--selected:hover, .igx-tabs__header-menu-item--disabled:hover {
      background: rgba(0, 0, 0, 0.08);
      color: rgba(0, 0, 0, 0.62); }
    .igx-tabs__header-menu-item .igx-ripple__inner, .igx-tabs__header-menu-item--selected .igx-ripple__inner, .igx-tabs__header-menu-item--disabled .igx-ripple__inner {
      display: block;
      position: absolute;
      border-radius: 50%;
      background: rgba(0, 0, 0, 0.04);
      pointer-events: none;
      transform-origin: center;
      transform: translate3d(0, 0, 0) scale(0);
      will-change: opacity, transform;
      opacity: .5; }
    .igx-tabs__header-menu-item .igx-ripple, .igx-tabs__header-menu-item--selected .igx-ripple, .igx-tabs__header-menu-item--disabled .igx-ripple {
      overflow: hidden; }
  
  .igx-tabs__header-menu-item--selected {
    outline: 0;
    color: rgba(0, 0, 0, 0.74); }
    .igx-tabs__header-menu-item--selected:focus {
      background: rgba(0, 0, 0, 0.08);
      color: rgba(0, 0, 0, 0.74); }
    .igx-tabs__header-menu-item--selected:hover {
      background: rgba(0, 0, 0, 0.08);
      color: rgba(0, 0, 0, 0.74); }
    .igx-tabs__header-menu-item--selected .igx-tabs__header-menu-item-icon {
      color: #09f; }
  
  .igx-tabs__header-menu-item--disabled {
    outline: 0;
    opacity: .5;
    cursor: default;
    pointer-events: none; }
  
  .igx-tabs__header-menu-item-icon {
    display: flex;
    justify-content: center;
    align-items: center; }
    .igx-tabs__header-menu-item-icon + .igx-tabs__item-label {
      padding-top: 0.625rem; }
  
  .igx-tabs__header-menu-item-indicator {
    position: absolute;
    bottom: 0;
    left: 0;
    transform: translateX(0);
    height: 2px;
    min-width: 160px;
    background: #09f;
    transition: transform 0.3s cubic-bezier(0.35, 0, 0.25, 1), width 0.2s cubic-bezier(0.35, 0, 0.25, 1); }
    @media only screen and (max-width: 600px) {
      .igx-tabs__header-menu-item-indicator {
        min-width: 74px; } }
  
  .igx-tabs__header-button, .igx-tabs__header-button--hidden, .igx-tabs__header-button--active {
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    padding: 0;
    min-width: 3rem;
    width: 3rem;
    min-height: 3rem;
    height: 3rem;
    cursor: pointer;
    position: relative;
    background: #fff;
    color: rgba(0, 0, 0, 0.38);
    outline: 0;
    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.26), 0 4px 5px 0 rgba(0, 0, 0, 0.12), 0 1px 10px 0 rgba(0, 0, 0, 0.08);
    --igx-ripple-color: rgba(0, 0, 0, 0.04);
    --igx-ripple-test: test; }
    .igx-tabs__header-button:hover, .igx-tabs__header-button--hidden:hover, .igx-tabs__header-button--active:hover {
      background: rgba(0, 0, 0, 0.04);
      color: rgba(0, 0, 0, 0.54); }
    .igx-tabs__header-button:focus, .igx-tabs__header-button--hidden:focus, .igx-tabs__header-button--active:focus {
      outline: 0;
      background: rgba(0, 0, 0, 0.04); }
    .igx-tabs__header-button::-moz-focus-inner, .igx-tabs__header-button--hidden::-moz-focus-inner, .igx-tabs__header-button--active::-moz-focus-inner {
      border: 0; }
    .igx-tabs__header-button .igx-ripple__inner, .igx-tabs__header-button--hidden .igx-ripple__inner, .igx-tabs__header-button--active .igx-ripple__inner {
      display: block;
      position: absolute;
      border-radius: 50%;
      background: rgba(0, 0, 0, 0.04);
      pointer-events: none;
      transform-origin: center;
      transform: translate3d(0, 0, 0) scale(0);
      will-change: opacity, transform;
      opacity: .5; }
    .igx-tabs__header-button .igx-ripple, .igx-tabs__header-button--hidden .igx-ripple, .igx-tabs__header-button--active .igx-ripple {
      overflow: hidden; }
  
  .igx-tabs__header-button--hidden {
    visibility: hidden; }
  
  .igx-tabs__header-button--none {
    display: none; }
  
  .igx-tabs__item-label {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    font-size: 0.875rem;
    line-height: 1rem;
    max-width: 100%;
    text-align: center; }
    .igx-tabs__item-label + .igx-tabs__header-menu-item-icon {
      padding-top: 0.625rem; }
  
  .igx-tabs__group {
    display: inline-block;
    min-width: 100%; }
  
  .igx-tabs--fixed .igx-tabs__header-menu-item, .igx-tabs--fixed .igx-tabs__header-menu-item--selected, .igx-tabs--fixed .igx-tabs__header-menu-item--disabled {
    flex: 1 1 auto;
    width: 100%; }
  
  .igx-tabs--icons .igx-tabs__header-button, .igx-tabs--icons .igx-tabs__header-button--hidden, .igx-tabs--icons .igx-tabs__header-button--active,
  .igx-tabs--icons .igx-tabs__header-menu-item,
  .igx-tabs--icons .igx-tabs__header-menu-item--selected,
  .igx-tabs--icons .igx-tabs__header-menu-item--disabled {
    min-height: 4.8125rem;
    height: 4.8125rem; }
  
  :root {
    --igx-toast-background: rgba(0, 0, 0, 0.54);
    --igx-toast-text-color: #fff; }
  
  .igx-toast, .igx-toast--top, .igx-toast--middle, .igx-toast--bottom {
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    left: 50%;
    transform: translate3d(-50%, 0, 0);
    margin: 2.625rem auto;
    padding: 1rem 1.5rem;
    min-width: 52px;
    font-size: 0.875rem;
    line-height: 1.5rem;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.54);
    border-radius: 26px;
    opacity: 0;
    z-index: 999999; }
  
  .igx-toast--top {
    top: 0; }
  
  .igx-toast--middle {
    top: 50%;
    transform: translate3d(-50%, -50%, 0); }
  
  .igx-toast--bottom {
    bottom: 0; }
  
  :root {
    --igx-time-picker-text-color: rgba(0, 0, 0, 0.38);
    --igx-time-picker-hover-text-color: #e41c77;
    --igx-time-picker-selected-text-color: #e41c77;
    --igx-time-picker-active-item-background: rgba(0, 0, 0, 0.04);
    --igx-time-picker-header-background: #e41c77;
    --igx-time-picker-header-hour-text-color: black;
    --igx-time-picker-header-time-period-color: rgba(0, 0, 0, 0.8);
    --igx-time-picker-background-color: white; }
  
  .igx-time-picker__body {
    display: flex;
    padding: 10px 0;
    justify-content: center;
    background: white; }
  
  .igx-time-picker--vertical .igx-time-picker__body {
    flex: 1 1 auto; }
  
  .igx-time-picker .igx-dialog__window {
    max-width: 340px;
    min-width: 320px;
    padding: 0; }
  
  .igx-time-picker--vertical .igx-dialog__window {
    width: 540px; }
  
  .igx-time-picker--vertical .igx-time-picker__wrapper {
    display: flex;
    flex-wrap: nowrap; }
  
  .igx-time-picker .igx-dialog__window,
  .igx-time-picker .igx-dialog__window-content {
    width: 100%;
    padding: 0;
    color: inherit;
    font-size: initial;
    line-height: initial; }
  
  .igx-time-picker .igx-dialog__window-title {
    display: none; }
  
  .igx-time-picker .igx-dialog__window-actions {
    margin: 0; }
  
  .igx-time-picker__hourList {
    text-align: right; }
  
  .igx-time-picker__minuteList {
    text-align: center; }
  
  .igx-time-picker__ampmList {
    display: flex;
    flex-direction: column;
    padding-top: 48px; }
  
  .igx-time-picker__column {
    max-width: 64px;
    height: 325px;
    font-size: 16px;
    padding: 0;
    cursor: pointer;
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
    align-items: center;
    color: rgba(0, 0, 0, 0.38);
    overflow: hidden; }
    .igx-time-picker__column:focus, .igx-time-picker__column:active {
      outline: none; }
  
  .igx-time-picker__item {
    width: 54px;
    padding: 5px 10px;
    border-radius: 15px;
    height: 48px;
    display: flex;
    justify-content: center;
    align-items: center; }
    .igx-time-picker__item:focus, .igx-time-picker__item:active {
      outline: none; }
    .igx-time-picker__item:hover {
      color: #e41c77; }
  
  .igx-time-picker__item--selected {
    font-size: 24px;
    color: #e41c77; }
  
  .igx-time-picker__item--active {
    background: rgba(0, 0, 0, 0.04); }
  
  .igx-time-picker__header {
    background: #e41c77;
    padding: 1.5rem 1rem; }
  
  .igx-time-picker__header-ampm {
    color: rgba(0, 0, 0, 0.8);
    font-size: 1rem; }
  
  .igx-time-picker--vertical .igx-time-picker__header {
    width: 10.5rem;
    position: relative; }
  
  .igx-time-picker--vertical .igx-time-picker__header::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 100%;
    background: #e41c77; }
  
  .igx-time-picker__header-hour {
    color: black;
    font-size: 2.5rem;
    display: flex; }
  
  .igx-time-picker__header-ampm, .igx-time-picker__header-hour {
    margin: 0; }
  
  html, body {
    height: 100%;
    overflow: hidden; }
  
  .sample-wrapper {
    width: inherit;
    position: relative;
    height: 100%;
    margin: 0 auto;
    background: transparent; }
  
  .sample-content {
    display: flex;
    flex-grow: 1;
    flex-flow: row wrap;
    justify-content: flex-start;
    padding: 0;
    -webkit-animation: fade-in 0.3s cubic-bezier(0.39, 0.575, 0.565, 1) both;
    -moz-animation: fade-in 0.3s cubic-bezier(0.39, 0.575, 0.565, 1) both;
    animation: fade-in 0.3s cubic-bezier(0.39, 0.575, 0.565, 1) both; }
  
  .sample-column {
    display: flex;
    flex-flow: column nowrap;
    flex: 1 0 25%;
    align-content: flex-start;
    margin: 16px;
    min-width: 280px; }
  
  .sample-title {
    color: #0375be;
    margin-bottom: 24px; }
  
  .sample-title .light {
    font-weight: 400; }
  
  .sample-description {
    font-size: 14px;
    font-weight: normal;
    color: #717171; }
  
  @-webkit-keyframes color-change-2x {
    0% {
      background: #fdf8f0; }
    100% {
      background: #f6e7ec; } }
  
  @keyframes color-change-2x {
    0% {
      background: #fdf8f0; }
    100% {
      background: #f6e7ec; } }
  
  @-webkit-keyframes fade-in {
    0% {
      opacity: 0; }
    100% {
      opacity: 1; } }
  
  @keyframes fade-in {
    0% {
      opacity: 0; }
    100% {
      opacity: 1; } }
  
  .error > div > div {
    background-color: red !important; }
  
  .headerAlignSyle {
    text-align: right !important; }