#catalog-image-list {
    max-width: 900px;
    padding-top: 128px;
    padding-bottom: 100px;
}

#catalog-image-list .mdc-image-list__item {
  width: calc(100% / 4 - 8.25px);
  margin: 4px;
}

@media screen and (max-width: 599px) {
  #catalog-image-list .mdc-image-list__item {
    width: calc(100% / 3 - 8.3333333333px);
  }
}

.catalog-image-list-label {
    font-weight: 500;
    color: #212121;
}
.catalog-top-app-bar {
    background-color: #212121;
}

.demo-content--animating-open {
  transition: 200ms transform cubic-bezier(.4, 0, .2, 1) 50ms;
}

.demo-content--animating-close {
  transition: 125ms transform cubic-bezier(.4, 0, .2, 1);
}


/* dismissible drawer animation */

.demo-content {
  padding-left: 16px;
  padding-right: 16px;
  padding-bottom: 100px;
}

.mdc-drawer-app-content {
  /* @noflip */
  margin-left: 0;
  /* @noflip */
  margin-right: 0;
  position: relative;
}

[dir=rtl] .mdc-drawer-app-content, .mdc-drawer-app-content[dir=rtl] {
  /* @noflip */
  margin-left: 0;
  /* @noflip */
  margin-right: 0;
}

.mdc-drawer.mdc-drawer--open:not(.mdc-drawer--closing) + .mdc-drawer-app-content {
  /* @noflip */
  margin-left: 256px;
  /* @noflip */
  margin-right: 0;
}

[dir=rtl] .mdc-drawer.mdc-drawer--open:not(.mdc-drawer--closing) + .mdc-drawer-app-content, .mdc-drawer.mdc-drawer--open:not(.mdc-drawer--closing) + .mdc-drawer-app-content[dir=rtl] {
  /* @noflip */
  margin-left: 0;
  /* @noflip */
  margin-right: 256px;
}


/* Page change animation */

.loadComponent-enter {
  opacity: 0;
  transform: translateY(15px);
}

.loadComponent-enter.loadComponent-enter-active {
  opacity: 1;
  transform: translateY(0);
  transition: all 235ms linear 100ms;
}

// Fixed elements do not work well with transform so the snackbar needs to be hidden
// until the transition finishes.
.loadComponent-enter.loadComponent-enter-active.mdc-snackbar {
  display: none;
}



/* hero */

.component-catalog-panel__header-elements {
  max-width: 300px;
  padding-right: 40px;
  margin-top: revert; /* undo normalize */
  margin-bottom: revert; /* undo normalize */
}

.component-catalog-panel__header {
  flex-flow: column wrap;
  height: 550px;
}

.component-catalog-panel .hero,
.component-catalog-panel .hero-component {
  width: calc(100% - 340px);
  height: 550px;
  -ms-flex-order: 4;
  order: 4;
  -ms-flex: 1 1 100%;
  flex: 1 1 100%;
}

.component-catalog-panel .hero {
  padding: 24px;
}

.component-catalog-panel .hero-component {
  padding: 0;
  margin-top: 32px;
}

@media screen and (max-width: 820px) {
  .component-catalog-panel .hero-component {
    -ms-flex-order: 0;
    order: 0;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    height: auto;
  }
  .component-catalog-panel__header-elements {
    max-width: none;
  }
  .component-catalog-panel__header {
    -ms-flex-flow: column nowrap;
    flex-flow: column nowrap;
    height: auto;
  }
  .component-catalog-panel .hero-options {
    max-height: none;
  }
  .component-catalog-panel .hero-component {
    width: 100%;
  }
}

.hero-tab.mdc-tab--active .mdc-tab__text-label {
  color: #000;
}

.hero-tab .mdc-tab-indicator .mdc-tab-indicator__content--underline {
  border-color: #000;
}

.hero-tab .mdc-tab__ripple::after,
.hero-tab .mdc-tab__ripple::before {
    background-color: #000;
}


/* demo-content */

.demo-wrapper {
  width: 900px;
  margin: 0 auto;
  padding: 40px 16px 100px;
}

.catalog-top-app-bar__title {
  text-transform: uppercase;
  font-family: Roboto Mono, serif;
  font-weight: 400;
}

.catalog-top-app-bar__title--small-screen {
  display: none;
}

@media (max-width: 599px) {
  .catalog-top-app-bar__title--small-screen {
    display: inline-block;
  }

  .catalog-top-app-bar__title--large-screen {
    display: none;
  }
}


/**
 * Tabbed hero.
 */
.tab-content,
.tab-container {
  display: flex;
  /* This is an IE11 workaround where flex doesn't center elements properly unless height is explicitly
     set to a value (100% doesn't work). By setting the height to a value lower than min-height, min-height
    will be used but the flex system will work properly.
    See https://github.com/philipwalton/flexbugs/issues/231
 */
  height: 0;
  min-height: 100%;
  width: 100%;
  max-width: 100%;
  padding: 24px 0;
  flex: 1 1 auto;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: center;
}

.tab-container {
  min-height: 360px;
  position: relative;
};



/**
 * Textfields demo.
 */
.demo-text-field-outlined-shaped .mdc-notched-outline .mdc-notched-outline__leading {
  /* @noflip */
  border-radius: 28px 0 0 28px;
  width: 28px;
}

.demo-text-field-outlined-shaped .mdc-notched-outline .mdc-notched-outline__notch {
  max-width: calc(100% - 28px * 2);
}

.demo-text-field-outlined-shaped .mdc-notched-outline .mdc-notched-outline__trailing {
  /* @noflip */
  border-radius: 0 28px 28px 0;
}

.hero-options .catalog-tf-list-item {
  min-height: 65px;
  overflow: visible;
  padding-bottom: 24px;
}

.hero-options .mdc-chip-set {
    padding: 16px 0;
}

.hero-options .mdc-chip-set .mdc-chip {
    margin: 0 4px 0 0;
}

.hero-component__filter-chip-set-option .mdc-chip {
  border-radius: 4px;
  background-color: #fff;
  padding-right: 11px;
  padding-left: 11px;
  border: 1px solid rgba(25,25,25,.32);
}

.hero-component__filter-chip-set-option .mdc-chip .mdc-chip__ripple {
  border-radius: 4px;
}


/**
 * Selects demo.
 */
.demo-select-outline-shaped .mdc-notched-outline .mdc-notched-outline__leading {
  /* @noflip */
  border-radius: 28px 0 0 28px;
  width: 28px;
}

.demo-select-outline-shaped .mdc-notched-outline .mdc-notched-outline__notch {
  max-width: calc(100% - 28px * 2);
}
.demo-select-outline-shaped .mdc-notched-outline .mdc-notched-outline__trailing {
  /* @noflip */
  border-radius: 0 28px 28px 0;
}


/**
 * Ripple demo.
 */

.ripple-demo-box--primary {
  color: #6200ee;
  /* @alternate */
  color: var(--mdc-theme-primary, #6200ee);
}
.ripple-demo-box--primary::before, .ripple-demo-box--primary::after {
  background-color: #6200ee;
}
@supports not (-ms-ime-align: auto) {
  .ripple-demo-box--primary::before, .ripple-demo-box--primary::after {
    /* @alternate */
    background-color: var(--mdc-theme-primary, #6200ee);
  }
}
.ripple-demo-box--primary:hover::before {
  opacity: 0.04;
}
.ripple-demo-box--primary:not(.mdc-ripple-upgraded):focus::before, .ripple-demo-box--primary.mdc-ripple-upgraded--background-focused::before {
  -webkit-transition-duration: 75ms;
       -o-transition-duration: 75ms;
          transition-duration: 75ms;
  opacity: 0.12;
}
.ripple-demo-box--primary:not(.mdc-ripple-upgraded)::after {
  -webkit-transition: opacity 150ms linear;
  -o-transition: opacity 150ms linear;
  transition: opacity 150ms linear;
}
.ripple-demo-box--primary:not(.mdc-ripple-upgraded):active::after {
  -webkit-transition-duration: 75ms;
       -o-transition-duration: 75ms;
          transition-duration: 75ms;
  opacity: 0.12;
}
.ripple-demo-box--primary.mdc-ripple-upgraded {
  --mdc-ripple-fg-opacity: 0.12;
}

.ripple-demo-box--secondary {
  color: #018786;
  /* @alternate */
  color: var(--mdc-theme-secondary, #018786);
}
.ripple-demo-box--secondary::before, .ripple-demo-box--secondary::after {
  background-color: #018786;
}
@supports not (-ms-ime-align: auto) {
  .ripple-demo-box--secondary::before, .ripple-demo-box--secondary::after {
    /* @alternate */
    background-color: var(--mdc-theme-secondary, #018786);
  }
}
.ripple-demo-box--secondary:hover::before {
  opacity: 0.04;
}
.ripple-demo-box--secondary:not(.mdc-ripple-upgraded):focus::before, .ripple-demo-box--secondary.mdc-ripple-upgraded--background-focused::before {
  -webkit-transition-duration: 75ms;
       -o-transition-duration: 75ms;
          transition-duration: 75ms;
  opacity: 0.12;
}
.ripple-demo-box--secondary:not(.mdc-ripple-upgraded)::after {
  -webkit-transition: opacity 150ms linear;
  -o-transition: opacity 150ms linear;
  transition: opacity 150ms linear;
}
.ripple-demo-box--secondary:not(.mdc-ripple-upgraded):active::after {
  -webkit-transition-duration: 75ms;
       -o-transition-duration: 75ms;
          transition-duration: 75ms;
  opacity: 0.12;
}
.ripple-demo-box--secondary.mdc-ripple-upgraded {
  --mdc-ripple-fg-opacity: 0.12;
}


/**
 * Layout grid demo.
 */
.demo-grid--cell-alignment > .mdc-layout-grid__inner {
  min-height: 200px;
}


/**
 * Theme demo. This is stuff you really want to do with SCSS instead of getting the CSS right.
 */
.theme-demo .mdc-theme--primary {
  color: #fcb8ab !important;
}

.theme-demo .mdc-theme--secondary {
  color: #feeae6 !important;
}

.theme-demo .mdc-theme--on-secondary {
  color: #442c2e !important;
}

.theme-demo .mdc-theme--text-primary-on-background {
  color: rgba(0,0,0,.87) !important;
}

.theme-demo .mdc-theme--on-primary {
  color: #442b2d !important;
}

.theme-demo .mdc-theme--primary-bg {
  background-color: #fcb8ab !important;
}

.theme-demo .mdc-theme--secondary-bg {
  background-color: #feeae6 !important;
}

.theme-demo .mdc-theme--text-primary-on-background {
  color: rgba(0,0,0,.87) !important;
}

.theme-demo .mdc-button {
  font-family: Rubik,sans-serif;
  font-size: .875rem;
  font-weight: 500;
  letter-spacing: .0892857143em;
  text-decoration: none;
  text-transform: uppercase;
  padding: 0 8px;
  display: -ms-inline-flexbox;
  display: inline-flex;
  position: relative;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 64px;
  height: 36px;
  outline: none;
  line-height: inherit;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-appearance: none;
  overflow: hidden;
  vertical-align: middle;
  border-radius: 4px;
  margin: 32px;
}

.theme-demo .mdc-button:not(:disabled) {
  color: #fcb8ab;
}

.theme-demo .mdc-button:not(:disabled) {
  background-color: transparent;
}

.theme-demo .mdc-button--raised:not(:disabled),
.theme-demo .mdc-button--unelevated:not(:disabled) {
  background-color: #fcb8ab;
}

.theme-demo .mdc-button--raised:not(:disabled),
.theme-demo .mdc-button--unelevated:not(:disabled) {
  color: #442b2d;
}

.theme-demo .mdc-button--outlined:not(:disabled) {
  border-color: #fcb8ab;
}

.theme-demo .demo-theme-color-section__row {
  display: flex;
  flex-wrap: wrap;
}


.theme-demo .demo-theme-color-group {
  padding: 16px 0;
}

.theme-demo .demo-fieldset--color {
  margin-right: 36px;
}

.theme-demo fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

.theme-demo .demo-theme-color-swatches {
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-direction: column;
  flex-direction: column;
  margin-right: 16px;
}

.theme-demo .demo-theme-color-swatch {
  -webkit-box-shadow: 0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12);
  box-shadow: 0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12);
  display: inline-block;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 150px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  margin-bottom: 8px;
  border-radius: 4px;
}


/**
 * Chips
 */
.demo-chip-shaped,
.demo-chip-shaped .mdc-chip__ripple {
  border-radius: 4px;
}
