.home-sidecar .devsite-landing-row-item-icon-container,
.home-sidecar .devsite-landing-row-item-icon {
  height: 56px;
  width: 56px;
}

.home-carousel-links {
  color: #202124 !important;
}

.home-carousel-links:hover {
  color: #00639b !important;
  text-decoration: none;
}

.device-carousel-control-container{
  position: relative;
}

.device-carousel-control-left{
  position: absolute;
  top: 34px;
  left: 16px;
  margin-left: 36px;
}

.device-carousel-control-right{
  position: absolute;
  top:  34px;
  right: 16px;
  margin-right: 36px;
}
.device-carousel-control-right.supported-devices,
.device-carousel-control-left.supported-devices {
  top:  88px;
}

.device-carousel-container{
  display: flex;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 24px 130px;
  gap: 32px;
}

.device-carousel-icon{
  min-width: 40px
}

.device-carousel-control{
  display:flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  color: #5e5e5e;
  border-radius: 50%;
  cursor: pointer;
  background-color: white;
  padding: 0;
  box-shadow: 0 2px 3px rgba(60, 64, 67, 0.3), 0 6px 10px 4px rgba(60, 64, 67, 0.15);
}

.device-carousel-control:focus,
.device-carousel-control:active,
.device-carousel-control:hover{
  background: #f1f3f4;
  box-shadow: 0 2px 3px rgba(60, 64, 67, 0.3), 0 6px 10px 4px rgba(60, 64, 67, 0.15);
 }

.device-carousel-control.disabled {
  background-color: #f1f3f4;
}

.device-carousel-control.disabled > .device-carousel-control-icon{
  filter: invert(80%) sepia(1%) saturate(1368%) hue-rotate(169deg) brightness(80%) contrast(84%);
}



.device-carousel-card{
  height: 72px;
  border: none;
  border-radius: 16px;
  padding: 20px 32px;
  display: flex;
  flex-grow: 0;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  overflow: visible;
  min-width: auto;
  margin: 0;
}

.device-carousel-card-supported-devices{
  border-radius: 32px;
  padding: 24px 22px;
  flex-direction: column;
  justify-content: space-between;
  min-width: 184px;
  height: 176px;
  align-items: flex-start;
  background-color: white;
}

.device-carousel-card-supported-devices:active,
.device-carousel-card-supported-devices:focus,
.device-carousel-card-supported-devices:hover,
.device-carousel-card-supported-devices:visited {
  text-decoration: none;
}


.device-carousel-card-text{
  font-family: 'Google Sans';
  font-style: normal;
  font-weight: 500;
  font-size: 20px;
  line-height: 28px;
  margin-left: 16px;
  white-space: nowrap;
  color: #3c4043;
}

.device-carousel-card-supported-devices .device-carousel-card-text{
  color: #3c4043;
  word-break: break-word;
  max-width: 140px;
  overflow: hidden;
  white-space: normal;
  text-align: left;
  max-height: 150px;
  margin-left: 0;
  font-weight: 700;
  font-size: 22px;
}

.device-carousel-category-text:active{
  box-shadow: none;
}

.device-carousel-title{
  font-family: 'Google Sans';
  font-weight: 700;
  font-size: 45px;
  line-height: 52px;
  text-align: center;
  margin: 32px 0 56px;
}
.device-carousel-title-container{
  display:flex;
  justify-content: center;
}

/**Categories Color palette */
.device-carousel-card:focus,.device-carousel-card:hover{
  background-color: #f1f3f4;
  border: none;
  text-decoration: none;
}

.device-carousel-filter-button.selected{
  border: 2px solid #1d7db3;
  background-color: white;
}

.device-carousel-filter-button.selected:hover,.device-carousel-filter-button.selected:focus{
  border-color: #1d7db3;
  background-color: #f1f3f4;
}


.device-carousel-filter-button{
  border: 2px solid white;
}

.device-carousel-filter-button:focus{
  background-color: #f1f3f4;
  border: 2px solid #f1f3f4;
}

#device-carousel-filterbar-error-message-background,
#device-carousel-filterbar-background{
  background-color: #e8eaed;
  display: flex;
  flex-direction: row;
  padding: 16px 32px;
  width: 100%;
  gap: 16px;
  overflow-x: auto;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.device-carousel-filter-button{
  color: #202124;
  margin: 0;
  min-width: fit-content;
}

#device-carousel-filter-title{
  font-weight: 500;
  color: #1f302d;
  margin-right: 40px;
}

.device-carousel-card-supported-devices.device-carousel-lighting-color:hover,
.device-carousel-card.device-carousel-lighting-color{
  background-color: #ffedbd;
}

.device-carousel-card-supported-devices.device-carousel-climate-color:hover,
.device-carousel-card.device-carousel-climate-color{
  background-color: #cae8ef;
}

.device-carousel-card-supported-devices.device-carousel-outdoor-color:hover,
.device-carousel-card.device-carousel-outdoor-color{
  background-color: #e2f1ea;
}

.device-carousel-card-supported-devices.device-carousel-bed-bad-color:hover,
.device-carousel-card.device-carousel-bed-bad-color{
  background-color: #e4c9e0;
}

.device-carousel-card-supported-devices.device-carousel-kitchen-color:hover,
.device-carousel-card.device-carousel-kitchen-color{
  background-color: #ffcbaa;
}

.device-carousel-card-supported-devices.device-carousel-media-color:hover,
.device-carousel-card.device-carousel-media-color{
  background-color: #fffaf0;
}

.device-carousel-card-supported-devices.device-carousel-security-color:hover,
.device-carousel-card.device-carousel-security-color{
  background-color: #cfebda;
}

.device-carousel-card-supported-devices.device-carousel-household-color:hover,
.device-carousel-card.device-carousel-household-color {
  background-color: #ffcbaa;
}

.device-carousel-card-supported-devices.device-carousel-apis-color:hover,
.device-carousel-card.device-carousel-apis-color{
  background-color: #ffffff;
}

/*Hover on Category card*/
.device-carousel-filter-button:hover,
.device-carousel-card.device-carousel-lighting-color-hover.device-carousel-unselected:hover,
.device-carousel-card.device-carousel-climate-color-hover.device-carousel-unselected:hover,
.device-carousel-card.device-carousel-outdoor-color-hover.device-carousel-unselected:hover,
.device-carousel-card.device-carousel-bed-bad-color-hover.device-carousel-unselected:hover,
.device-carousel-card.device-carousel-kitchen-color-hover.device-carousel-unselected:hover,
.device-carousel-card.device-carousel-media-color-hover.device-carousel-unselected:hover,
.device-carousel-card.device-carousel-security-color-hover.device-carousel-unselected:hover,
.device-carousel-card.device-carousel-household-color-hover.device-carousel-unselected:hover,
.device-carousel-card.device-carousel-apis-color-hover.device-carousel-unselected:hover,{
  background-color: #f1f3f4;
  border: none;
}


.device-carousel-card-supported-devices.device-carousel-lighting-color-hover > .device-carousel-icon,
.device-carousel-card.device-carousel-lighting-color .device-carousel-icon,
.device-carousel-card.device-carousel-lighting-color-hover.device-carousel-unselected:hover > .device-carousel-icon {
  filter: invert(85%) sepia(55%) saturate(4675%) hue-rotate(323deg) brightness(93%) contrast(92%);
}

.device-carousel-card-supported-devices.device-carousel-climate-color-hover > .device-carousel-icon,
.device-carousel-card.device-carousel-climate-color .device-carousel-icon,
.device-carousel-card.device-carousel-climate-color-hover.device-carousel-unselected:hover > .device-carousel-icon {
  filter: invert(39%) sepia(50%) saturate(1131%) hue-rotate(163deg) brightness(93%) contrast(85%);
}

.device-carousel-card-supported-devices.device-carousel-outdoor-color-hover> .device-carousel-icon,
.device-carousel-card.device-carousel-outdoor-color .device-carousel-icon,
.device-carousel-card.device-carousel-outdoor-color-hover.device-carousel-unselected:hover > .device-carousel-icon{
  filter: invert(40%) sepia(42%) saturate(416%) hue-rotate(121deg) brightness(92%) contrast(87%);
}

.device-carousel-card-supported-devices.device-carousel-bed-bad-color-hover > .device-carousel-icon,
.device-carousel-card.device-carousel-bed-bad-color .device-carousel-icon,
.device-carousel-card.device-carousel-bed-bad-color-hover.device-carousel-unselected:hover > .device-carousel-icon {
  filter: invert(58%) sepia(10%) saturate(1429%) hue-rotate(240deg) brightness(85%) contrast(87%);
}

.device-carousel-card-supported-devices.device-carousel-kitchen-color-hover > .device-carousel-icon,
.device-carousel-card.device-carousel-kitchen-color .device-carousel-icon,
.device-carousel-card.device-carousel-kitchen-color-hover.device-carousel-unselected:hover > .device-carousel-icon {
  filter: invert(56%) sepia(51%) saturate(511%) hue-rotate(323deg) brightness(100%) contrast(101%);
}

.device-carousel-card-supported-devices.device-carousel-media-color-hover > .device-carousel-icon,
.device-carousel-card.device-carousel-media-color .device-carousel-icon,
.device-carousel-card.device-carousel-media-color-hover.device-carousel-unselected:hover > .device-carousel-icon {
  filter: invert(60%) sepia(96%) saturate(334%) hue-rotate(344deg) brightness(94%) contrast(90%);
}

.device-carousel-card-supported-devices.device-carousel-security-color-hover > .device-carousel-icon,
.device-carousel-card.device-carousel-security-color .device-carousel-icon,
.device-carousel-card.device-carousel-security-color-hover.device-carousel-unselected:hover > .device-carousel-icon {
  filter: invert(40%) sepia(47%) saturate(352%) hue-rotate(121deg) brightness(93%) contrast(91%);
}

.device-carousel-card-supported-devices.device-carousel-household-color-hover > .device-carousel-icon,
.device-carousel-card.device-carousel-household-color .device-carousel-icon,
.device-carousel-card.device-carousel-household-color-hover.device-carousel-unselected:hover > .device-carousel-icon {
  filter: invert(53%) sepia(41%) saturate(619%) hue-rotate(341deg) brightness(92%) contrast(95%);
}

.device-carousel-card-supported-devices.device-carousel-apis-color-hover > .device-carousel-icon,
.device-carousel-card.device-carousel-apis-color .device-carousel-icon,
.device-carousel-card.device-carousel-apis-color-hover.device-carousel-unselected:hover > .device-carousel-icon {
  filter: invert(85%) sepia(55%) saturate(4675%) hue-rotate(323deg) brightness(93%) contrast(92%);
}


/*Hover on Category Text*/
.device-carousel-category-text.device-carousel-lighting-color:focus,
.device-carousel-category-text.device-carousel-lighting-color:hover{
  border-bottom: 3px solid #ffedbd;
}
.device-carousel-category-text.device-carousel-lighting-color.selected{
  border-bottom: 3px solid #e59849;
}

.device-carousel-category-text.device-carousel-climate-color:focus,
.device-carousel-category-text.device-carousel-climate-color:hover{
  border-bottom: 3px solid #cae8ef;
}
.device-carousel-category-text.device-carousel-climate-color.selected{
  border-bottom: 3px solid #1d7db3;
}

.device-carousel-category-text.device-carousel-outdoor-color:focus,
.device-carousel-category-text.device-carousel-outdoor-color:hover{
  border-bottom: 3px solid #e2f1ea;
}
.device-carousel-category-text.device-carousel-outdoor-color.selected{
  border-bottom: 3px solid #3e766d;
}

.device-carousel-category-text.device-carousel-bed-bad-color:focus,
.device-carousel-category-text.device-carousel-bed-bad-color:hover{
  border-bottom: 3px solid #e4c9e0;
}
.device-carousel-category-text.device-carousel-bed-bad-color.selected{
  border-bottom: 3px solid #9d75ab;
}

.device-carousel-category-text.device-carousel-kitchen-color:focus,
.device-carousel-category-text.device-carousel-kitchen-color:hover{
  border-bottom: 3px solid #ffcbaa;
}
.device-carousel-category-text.device-carousel-kitchen-color.selected{
  border-bottom: 3px solid #ff8569;
}

.device-carousel-category-text.device-carousel-media-color:focus,
.device-carousel-category-text.device-carousel-media-color:hover{
  border-bottom: 3px solid #fffaf0;
}
.device-carousel-category-text.device-carousel-media-color.selected{
  border-bottom: 3px solid #e59849;
}

.device-carousel-category-text.device-carousel-security-color:focus,
.device-carousel-category-text.device-carousel-security-color:hover{
  border-bottom: 3px solid #cfebda;
}
.device-carousel-category-text.device-carousel-security-color.selected{
  border-bottom: 3px solid #3e766d;
}

.device-carousel-category-text.device-carousel-household-color:focus,
.device-carousel-category-text.device-carousel-household-color:hover{
  border-bottom: 3px solid #ffcbaa;
}
.device-carousel-category-text.device-carousel-household-color.selected{
  border-bottom: 3px solid #ca7b47;
}

.device-carousel-category-text.device-carousel-apis-color:focus,
.device-carousel-category-text.device-carousel-apis-color:hover{
  border-bottom: 3px solid #ffedbd;
}
.device-carousel-category-text.device-carousel-apis-color.selected{
  border-bottom: 3px solid #e59849;
}

.device-carousel-category-text{
  font-family: 'Google Sans';
  font-weight: 400;
  font-size: 14px;
  line-height: 32px;
  align-items: center;
  text-align: center;
  letter-spacing: 0.25px;
  white-space: nowrap;
  cursor: pointer;
  min-width: auto;
  background: none;
  border-radius: 0;
  color: black;
  border: none;
  overflow: visible;
  padding: 0
}

.device-carousel-category-text:focus, 
.device-carousel-category-text:hover{
  font-weight: normal;
  background: none;
  border: none;
}

.device-carousel-category-container{
  display: flex;
  flex-direction: row;
  padding:  34px 130px 0;
  width: 100%;
  gap: 56px;
  overflow-x: auto;
  justify-content: center;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none;  /* Internet Explorer 10+ */
}

#device-carousel-supported-devices-title{
  font-family: 'Google Sans';
  font-weight: 700;
  color: #202124;
  font-size: 40px;
  text-align: center;
  height: fit-content;
  padding: 75px 32px 24px;
  line-height:  48px;
}

/*Movile view*/
@media (max-width: 376px){
  .device-carousel-card-text{
    font-size: 16px;
    margin-left: 8px;
  }

  .device-carousel-card{
    border-radius: 16px;
    padding: 8px 17px;
    height: 44px;
    margin-right: 16px;
  }

  .device-carousel-icon{
    min-width: 22px;
    width: 22px;
  }
}
/*Tablet and mobile view*/
@media (max-width: 867px){
  .device-carousel-category-container{
    padding: 34px 32px 0;
  }

  .device-carousel-container{
    padding: 24px 32px;
    justify-content: flex-start !important;
  }
}

.device-carousel-category-container::-webkit-scrollbar,
.device-carousel-container::-webkit-scrollbar {
  width: 0;
  height: 0;
}


.device-carousel-unselected{
  background-color: white;
  box-shadow: none;
}

.device-carousel-icon-unselected{
  filter: invert(41%) sepia(9%) saturate(257%) hue-rotate(174deg) brightness(89%) contrast(91%);
}

@media(max-width: 1150px){
  .device-carousel-category-container{
    justify-content: flex-start;
  }

  #device-carousel-filter-title{
    min-width: 100%;
    text-align: center;
    margin: 0;
  }
}

@media(max-width: 1400px){
  .device-carousel-category-container{
    gap: 32px;
  }
}

.device-carousel-remove-top-padding{
  padding: 0 0 64px 0 !important;
}