.product-picker-container {
  display: flex;
  padding: 56px;
  background: #e7f5ea;
  border-radius: 32px;
  flex-direction: column;
  position: relative;
  z-index: 10001;
  margin: 64px auto;
  max-width: 1424px;
  width: 90%;
}

.product-picker-header {
  display: flex;
  flex-direction: row;
  margin-bottom: 8px;
}

.product-picker-question-container {
  display: flex;
  flex-direction: row;
  flex-flow: row wrap;
}

.product-picker-recommendations-container {
  display: flex;
  flex-direction: row;
  flex-flow: row wrap;
}

#product-picker-title {
  font-family: 'Google Sans';
  font-style: normal;
  font-weight: 500;
  font-size: 32px;
  line-height: 48px;
  margin: 0 24px 0 0;
  color: #1f302d;
}

#product-picker-subtitle {
  color: #1f302d;
  font-family: 'Google Sans';
  margin-bottom: 32px;
}

.product-picker-no-recommendations,
.product-picker-recommend-paragraph {
  font-family: 'Google Sans';
  font-style: normal;
  font-size: 16px;
  text-align: center;
  color: #3c4043;
  margin: 0 auto 64px;
  width: 55%;
  flex-direction: column;
}

.product-picker-no-recommendations-title {
  font-family: 'Google Sans';
  font-style: normal;
  font-weight: 700;
  font-size: 40px;
  line-height: 48px;
  text-align: center;
  letter-spacing: -0.5px;
  color: #202124;
  margin-bottom: 40px;
}

#product-picker-clear-button {
  font-family: 'Google Sans';
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  line-height: 48px;
  background: none;
  color: #202124;
  border: none;
  cursor: pointer;
  text-overflow: clip;
}

#product-picker-clear-button:focus,#product-picker-clear-button:hover{
  text-decoration-line: underline;
}

.product-picker-table-integration-section {
  flex-direction: column;
  padding: 56px 64px 54px;
  max-width: 1552px;
  margin: 0 auto;
}

.product-picker-question-label {
  font-family: 'Google Sans';
  font-style: normal;
  font-weight: 400;
  font-size: 24px;
  line-height: 48px;
  margin-bottom: 16px;
  min-width: 350px;
  width: 40%;
  color: #1f302d;
}

.product-picker-options-row {
  display: flex;
  flex-flow: row wrap;
  margin-bottom: 16px;
  gap: 24px;
  align-items: center;
}

.product-picker-option {
  cursor: pointer;
  background-color: #fafdfb;
  border: 2px solid #fafdfb;
  border-radius: 100px;
  font-family: 'Google Sans';
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  flex: none;
  flex-grow: 0;
  height: 48px;
  color: #1f302d;
  margin: 0;
}

.product-picker-option:hover,.product-picker-option:focus {
  background-color: #EBEBEB;
  border: 2px solid #EBEBEB;
}

.product-picker-option.product-picker-selected {
  background-color: white;
  border: 2px solid #3e766d;
}

.product-picker-option.product-picker-selected:focus {
  background-color: #EBEBEB;
}

.product-picker-body {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.product-picker-clear-large-button,
.product-picker-recommend-button,.product-picker-recommend-button[disabled] {
  cursor: pointer;
  font-family: 'Google Sans';
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  align-items: center;
  padding: 12px 24px;
  width: 233px;
  height: 48px;
  box-sizing: border-box;
  border-radius: 100px;
  flex: none;
  flex-grow: 0;
  margin-top: 32px;
  margin-bottom: 0;
  background: #9aa0a6;
  color: white;
  border: none;
}

.product-picker-clear-large-button:focus,.product-picker-clear-large-button:hover,
.product-picker-recommend-button:focus,.product-picker-recommend-button:hover{
  background: #81868B;
  color: white;
  border: none;
  font-weight: normal;
}

.product-picker-recommend-button.product-picker-enabled {
  opacity: 1;
  background: #3e766d;
  color: white;
}

.product-picker-recommend-button.product-picker-enabled:focus{
  background: #305B54;
}

.product-picker-clear-large-button{
  background: #5F6368;
  margin-left: 0;
  justify-content: center;
}

.product-picker-hidden {
  display: none;
}

.product-picker-disabled {
  opacity: 0.5;
}

.product-picker-overlay {
  display: none;
  opacity: 0;
  background: rgba(255, 255, 255, 0.5);
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  transition: opacity 0.3s;
}

.product-picker-overlay.product-picker-visible {
  display: block;
  opacity: 1;
  z-index: 10000;
}

.product-picker-section-title {
  font-weight: 700;
  font-size: 40px;
  line-height: 48px;
  text-align: center;
  letter-spacing: -0.5px;
  margin-bottom: 16px;
  font-family: 'Google Sans';
}

.product-picker-section-subtitle {
  font-family: 'Google Sans';
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  text-align: center;
  color: #5F6368;
}

.product-picker-table {
  display: flex;
  flex-flow: column;
  padding: 40px 0 32px 0;
  width: 100%;
  overflow-x: scroll;
  justify-content: center;
}

.product-picker-table-single-column {
  display: flex;
  flex-flow: column;
  padding: 0 16px;
}

.product-picker-table-header {
  display: flex;
  flex-flow: row;
  margin: 0 auto;
}

.product-picker-section-row {
  display: flex;
  flex-flow: row;
}

.product-picker-section-column-wrapper {
  flex: 1 1 200px;
  flex-direction: column;
}

.product-picker-table-column-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1 1 300px;
}

.product-picker-col-index {
  margin-left: -300px;
}

.product-picker-columns-wrapper {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-end;
  gap: 32px;
  max-width: 1424px;
  margin: 0 auto;
  padding: 16px 0 0 0;
}

.product-picker-columns-wrapper-left {
  display: flex;
  flex-flow: row wrap;
  gap: 48px;
  margin: 0 auto;
  max-width: 1424px;
}

.product-picker-main-table-columns-wrapper {
  display: flex;
  flex-flow: row wrap;
  margin: 0 auto;
  max-width: 1424px;
}

.product-picker-table-two-column-wrapper {
  display: flex;
  padding-top: 37px;
  flex-flow: row wrap;
  justify-content: flex-end;
}

.product-picker-cell-title {
  font-family: 'Google Sans';
  font-style: normal;
  font-weight: 700;
  font-size: 24px;
  line-height: 40px;
  letter-spacing: -0.25px;
  color: #202124;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 9px;
  white-space: nowrap;
}

.product-picker-cell-subtitle {
  font-family: 'Google Sans';
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #5f6368;
  padding: 0 8px 8px;
}

.product-picker-cell {
  font-size: 16px;
  color: #3c4043;
  margin: 0 24px;
  padding: 24px 8px;
  border-bottom: 1px solid #d9d9d9;
  flex-direction: column;
}

.product-picker-cell-tall {
  height: 150px;
}

.product-picker-cell-section-tall {
  height: 150px;
}

.product-picker-cell-medium-size {
  height: 100px;
}

.product-picker-section-cell {
  font-size: 16px;
  color: #202124;
  padding: 8px 8px;
}

.product-picker-cell a {
  color: #00639b;
}

.product-picker-cell.product-picker-muted a {
  color: #00639b;
}
.product-picker-cell-index {
  font-family: 'Google Sans';
  font-weight: 500;
  font-size: 16px;
  color: black;
  margin: 0 24px;
  padding: 24px 8px;
  display: flex;
  justify-content: flex-end;
  align-items: end;
}
.product-picker-section-index {
  line-height: 24px;
}
.product-picker-col-section-index {
  margin-left: -300px;
}

.product-picker-attribute {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: #202124;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.product-picker-no-border {
  border: 0 !important;
}

.product-picker-attribute.product-picker-muted > .product-picker-icon {
  color: #e8f5fc;
}

.product-picker-attribute.product-picker-muted {
  color: #c9cacf;
}

.product-picker-table-button {
  height: 48px;
  font-family: 'Google Sans';
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.5px;
  border: 2px solid #1d7db3;
  color: #1d7db3;
  box-sizing: border-box;
  border-radius: 100px;
  display: flex;
  align-items: center;
  width: 221px;
  justify-content: center;
  margin: 8px 0 0;
}

.product-picker-table-button:hover {
  background-color: #cae8ef;
  color: #00639b;
  border: none;
}

.product-picker-icon {
  margin-right: 26px;
  color: #86c9ef;
}

.product-picker-icon-big {
  color: #1d7db3;
  background-color: #cae8ef;
}

.product-picker-icon-big-container {
  margin-right: 35px;
  border-radius: 50%;
  width: 40px;
  min-width: 40px;
  height: 40px;
  min-height: 40px;
  background-color: #cae8ef;
  align-items: center;
  display: flex;
  justify-content: center;
}

.product-picker-action-container {
  padding: 24px 0;
  width: 376px;
  min-width: 376px;
  margin: 0 16px;
}

.product-picker-table-experience-section {
  padding: 56px 64px 82px;
  flex-flow: column;
  background-color: #f8f9fa;
}

.product-picker-home-apis-section {
  flex-flow: column;
  padding: 56px 64px 56px;
  background-color: #f8f9fa;
}

.product-picker-table-stream-media-section {
  margin-top: 16px;
  flex-flow: column;
  padding: 56px 64px 64px;
  background-color: #f8f9fa;
}

.product-picker-control-nest-devices-section {
  margin-top: 16px;
  flex-flow: column;
  padding: 56px 64px 56px;
}

.product-picker-table-single-column-wrapper {
  display: flex;
  padding-top: 16px;
  max-width: 1280px;
  margin: 0 auto;
  overflow-x: auto;
}

.product-picker-control-devices-content {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-evenly;
  max-width: 1488px;
  margin: 0 auto;
  gap: 64px;
  padding-top: 32px;
}

.product-picker-eyebrow-text {
  width: 66%;
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #5f6368;
  margin: 0 auto 16px;
  text-align: center;
  text-transform: uppercase;
}

.product-picker-special-border-custom{
  border-bottom: 1px solid lightgrey;  
}

.product-picker-accessible-hidden-text{
  color: white;
  font-size: 1px;
  margin-top: -24px;
}

@media (min-width: 801px) and (max-width: 1100px) {
  .product-picker-section-column-wrapper {
    max-width: 350px;
  }
  .product-picker-col-index {
    display: none !important;
  }
  .product-picker-col-section-index {
    display: none !important;
  }
  .product-picker-cell-section-tall {
    height: auto;
  }
}

/* Tablet Mode*/
@media screen and (min-width: 381px) and (max-width: 800px) {
  .product-picker-columns-wrapper {
    flex-flow: column;
    gap: 0;
    margin: 0 auto;
    width: 350px;
  }
  .product-picker-container {
    padding: 32px;
  }
  .product-picker-options-row {
    margin: 0;
  }
  .product-picker-recommendations-container {
    width: min-content;
  }
  .product-picker-col-index {
    display: none !important;
  }
  .product-picker-col-section-index {
    display: none !important;
  }
  .product-picker-cell-section-tall {
    height: auto;
  }
  .product-picker-table-two-column-wrapper {
    flex-flow: row wrap;
    overflow-x: visible;
    justify-content: center;
  }
  .product-picker-table-single-column-wrapper {
    flex-flow: row wrap;
    overflow-x: visible;
    justify-content: center;
  }
  .product-picker-section-column-wrapper {
    max-width: 350px;
  }

  .product-picker-table-integration-section {
    padding: 54px 8px 16px;
  }

  .product-picker-columns-wrapper-left {
    margin: 0 auto;
    width: 350px;
    flex-flow: column;
  }
}

/* Mobile view*/
@media screen and (max-width: 380px) {
  .product-picker-options-row {
    gap: 8px;
    margin: 0;
  }
  .product-picker-container {
    margin: 64px 0 64px;
    padding: 24px;
  }
  .product-picker-recommendations-container {
    width: min-content;
  }
  .product-picker-col-index {
    display: none !important;
  }
  .product-picker-col-section-index {
    display: none !important;
  }

  .product-picker-cell-section-tall {
    height: auto;
  }
  .product-picker-table-single-column-wrapper {
    flex-flow: row wrap;
    overflow-x: visible;
    justify-content: center;
  }
  .product-picker-table-stream-media-section {
    padding: 56px 0 32px;
  }
  .product-picker-table-experience-section {
    padding: 56px 0 32px;
  }
  .product-picker-columns-wrapper-left {
    margin: 0 auto;
    width: 350px;
    flex-flow: column;
  }
  .product-picker-table-integration-section {
    padding: 54px 8px 16px;
  }
  .product-picker-cell {
    padding: 16px 8px;
  }
}

@media (forced-colors: active) {
  /* All high contrast styling rules */
  #product-picker-clear-button{
    border: 1px solid white;
  }
}