/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this file,
 * You can obtain one at http://mozilla.org/MPL/2.0/.
 *
 * This Source Code Form is "Incompatible With Secondary Licenses", as
 * defined by the Mozilla Public License, v. 2.0. */

#top-help {
  margin: 16px 0;
  text-align: center;
}

#choose_product {
  margin: 16px 0;
  border: 1px solid var(--primary-region-border-color);
  border-radius: var(--primary-region-border-radius);
  padding: 16px;
  background-color: var(--primary-region-background-color);
  box-shadow: var(--primary-region-box-shadow);
}

#choose_product h2,
#choose_product p,
#guided {
  text-align: center;
}

#choose_product td h2,
#choose_product td p {
  text-align: left;
}

#frequent-components ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 8px 16px;
  padding: 0;
  list-style-type: none;
  font-size: var(--font-size-large);
  white-space: nowrap;
}

#frequent-components li {
  flex: none;
  margin: 8px 16px;
  padding: 0;
}

#product-list {
  margin: 32px 0 0;
}

#product-list .tiles {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

#product-list .tiles .product {
  overflow: hidden;
  box-sizing: border-box;
  margin: 16px 0;
  padding: 0 16px 0 96px;
}

#product-list .tiles .product h3 {
  margin: 0;
}

#product-list .tiles .product img {
  float: left;
  margin: 0 0 0 -80px;
}

#product-list .tiles .product p {
  margin: 4px 0 0;
  font-size: var(--font-size-large);
  line-height: var(--line-height-comfortable);
  text-align: left;
}

#product-list th,
#product-list td {
  padding: 4px;
  line-height: var(--line-height-comfortable);
}

#guided img {
  vertical-align: text-bottom;
}

@media screen and (min-width: 1024px) {
  #product-list .tiles .product {
    width: 400px;
  }
}

@media screen and (max-width: 1023px) {
  #product-list .tiles .product {
    width: 100%;
  }
}