@font-face {
    font-family: 'Roboto';
    src: url('/assets/Roboto-Bold-CvxifqIH.woff2') format('woff2'),
        url('/assets/Roboto-Bold-CUxfmbm9.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('/assets/Roboto-Medium-tny623xL.woff2') format('woff2'),
        url('/assets/Roboto-Medium-CGTyfEX3.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('/assets/Roboto-SemiBold-BFDTcK9r.woff2') format('woff2'),
        url('/assets/Roboto-SemiBold-BEk_vmfd.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('/assets/Roboto-Regular-CePfJvv3.woff2') format('woff2'),
        url('/assets/Roboto-Regular-VJiFcaDK.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
  font-family: 'Roboto Mono';
  src: url('/assets/RobotoMono-Medium-lfxuvx-S.woff2') format('woff2'),
    url('/assets/RobotoMono-Medium-BZcl_QVm.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

:root {
  --base-unit: var(--su12);
}

* {
  margin: 0;
  padding: 0;
  outline: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;

  font-family: "Roboto", "Helvetica", sans-serif !important;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}

html,
body {
  display: block;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body {
  background: black;
}

body  > .error {
    position: absolute;
    z-index: 10000;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    margin: 0;
    padding: 20px;

    display: flex;
    justify-content: center;
    align-items: center;

    background-color: black;
    color: red;

    font-family: monospace;
    font-size: 24px;
    font-weight: 600;
    white-space: pre;
  }

body .is-focusable {
    cursor: pointer;
  }

body .is-scrollable {
    scrollbar-color: rgba(255, 255, 255, 0.5) transparent;
    scrollbar-width: thin;
    overflow-x: hidden;
    overflow-y: auto;
  }.hy-app {
  display: flex;
  justify-content: center;
  align-items: center;

  width: 100%;
  height: 100%;

  background-color: black;
  background: linear-gradient(-45deg, #1A0033, #000000);
  color: white;
}
.hy-app.is-loading:before {
    --size: var(--su256);

    content: '';
    display: block;

    width: var(--size);
    height: var(--size);

    background: url(https://etc.athom.com/logo/transparent/512.png) no-repeat center center;
    background-size: contain;

    animation: spin 10s linear infinite;
  }.hy-login {
  width: 100%;
  height: 100%;
  box-sizing: border-box;

  padding: var(--su50) var(--su100);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: 1fr;
  gap: var(--su100);
}
.hy-login  > .instructions {
    margin: 0 var(--su100);

    display: grid;
    grid-template-areas: "logo title"
      "description description";
    grid-template-columns: auto 1fr;
    -moz-column-gap: var(--su24);
         column-gap: var(--su24);
    row-gap: var(--su60);

    color: #fff;
  }
:is(.hy-login > .instructions)  > .logo {
      grid-area: logo;

      --size: var(--su72);

      align-self: flex-end;

      width: var(--size);
      height: var(--size);
      background: url(https://etc.athom.com/logo/transparent/256.png) center center no-repeat;
      background-size: contain;

      animation: spin 20s linear infinite;
    }
:is(.hy-login > .instructions)  > .title {
      grid-area: title;

      align-self: flex-end;

      font-size: var(--su60);
      font-weight: 700;
    }
:is(.hy-login > .instructions)  > .description {
      grid-area: description;

      font-size: var(--su40);
      font-weight: 400;
    }
.hy-login  > .qrcode {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
  }
:is(.hy-login > .qrcode)  > .image-wrap {
      margin: 0 auto;
      padding: var(--su15);
      background-color: rgba(255, 255, 255, 0.1);
      box-shadow: inset 0 0 0 var(--su1) rgba(255, 255, 255, 0.1);
      border-radius: var(--su30);
    }
:is(:is(.hy-login > .qrcode) > .image-wrap)  > .image {
        --size: var(--su500);
        display: block;
        width: var(--size);
        height: var(--size);
        border-radius: var(--su15);

        background-size: contain;
      }
:is(.hy-login > .qrcode)  > .text {
      margin: var(--su40) auto;

      font-size: var(--su28);
      color: rgba(255, 255, 255, 0.6);
      text-align: center;
      line-height: var(--su38);
    }
:is(:is(.hy-login > .qrcode) > .text)  > .url {
        font-family: 'Roboto Mono', monospace !important;
        font-size: var(--su24);
        font-weight: 500;
        color: rgba(255, 255, 255, 1.0);

        white-space: nowrap;
      }
:is(:is(:is(.hy-login > .qrcode) > .text) > .url):hover {
          cursor: pointer;
          text-decoration: underline;
        }.hy-div {
  display: block;
}.hy-homey {
  display: block;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}.hy-homey_header {
  display: flex;
  flex-direction: row;
  align-items: center;

  box-sizing: border-box;
  padding: var(--su40);
  gap: var(--su20);

  background: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
}
.hy-homey_header  > .grow {
    flex-grow: 1;
  }.hy-homey_header_user {
  --size: var(--su80);
  display: block;
  flex-shrink: 0;

  width: var(--size);
  height: var(--size);
  border-radius: var(--size);

  background-color: #333;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.hy-homey_header_user:hover {
    cursor: pointer;
  }.hy-homey_overlay {
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  display: grid;

  padding: var(--su40);
  box-sizing: border-box;

  backdrop-filter: blur(60px);
}
.hy-homey_overlay  > .content {
    display: flex;
    flex-direction: column;
    align-items: center;

    margin: auto;
    gap: var(--su20);
  }
:is(.hy-homey_overlay > .content)  > .title {
      flex-shrink: 0;

      font-size: var(--su40);
      font-weight: 700;
      text-align: center;
      line-height: var(--su40);

      max-width: var(--su650);
    }
:is(.hy-homey_overlay > .content)  > .subtitle {
      flex-shrink: 0;

      font-size: var(--su28);
      font-weight: 400;
      line-height: var(--su40);
      text-align: center;
      color: rgba(255, 255, 255, 0.6);

      max-width: var(--su650);

      margin-bottom: var(--su40);
    }
:is(.hy-homey_overlay > .content)  > .button {
      flex-shrink: 0;
      width: var(--su500);
    }.hy-input-button {
  position: relative;
  box-sizing: border-box;

  display: flex;
  align-items: center;
  justify-content: center;

  border: var(--su1) solid rgba(255, 255, 255, 0.1);
  border-radius: 9999px;

  min-width: var(--su48);
  min-height: var(--su48);

  background-color: rgba(255, 255, 255, 0.1);
}
.hy-input-button:hover {
    cursor: pointer;
  }
.hy-input-button.is-loading {
    cursor: wait;
  }
.hy-input-button.is-active,.hy-input-button.is-loading,.hy-input-button.is-mousedown {
    background-color: rgba(255, 255, 255, 1.0);
    border-color: rgba(0, 0, 0, 0.9);
  }
:is(.hy-input-button.is-active,.hy-input-button.is-loading,.hy-input-button.is-mousedown)  > .icon {
      background-color: black;
    }
:is(.hy-input-button.is-active,.hy-input-button.is-loading,.hy-input-button.is-mousedown)  > .text {
      color: black;
    }
.hy-input-button  > .icon {
    display: block;
    width: 50%;
    height: 50%;

    -webkit-mask-size: contain;

            mask-size: contain;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center center;
            mask-position: center center;

    background-color: white;
  }
.hy-input-button:not(.has-icon) > .icon {
    display: none;
  }
.hy-input-button  > .text {
    padding: var(--su30);

    font-size: var(--su32);
    font-weight: 600;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
.hy-input-button[data-label]:after {
    content: attr(data-label);
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%, var(--su16));
    height: var(--su28);

    font-size: var(--su28);
    font-weight: 500;
    color: rgba(255, 255, 255, 0.8);
    text-align: center;
    white-space: nowrap;
  }.hy-homey_header_navigation {
  position: relative;

  display: block;
  flex-shrink: 0;

  padding: var(--base-unit);
  background-color: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0px 0px 0px var(--su1) rgba(255, 255, 255, 0.1);
  border-radius: 9999px;
  backdrop-filter: blur(10px);
}
.hy-homey_header_navigation  > .pages {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: var(--su5);

    box-sizing: border-box;
  }.hy-homey_header_navigation_page {
  padding: var(--su10) var(--su20);
  box-sizing: border-box;
  height: var(--su66);
  border-radius: 9999px;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--su10);
}
.hy-homey_header_navigation_page  > .icon {
    --size: var(--su32);

    width: var(--size);
    height: var(--size);

    mask-position: center center;
    -webkit-mask-position: center center;

    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;

    mask-size: contain;
    -webkit-mask-size: contain;

    background-color: white;
  }
.hy-homey_header_navigation_page[data-page-id="favorites"] > .icon {
    mask-image: url(/assets/favorites-CiQFhNSn.svg);
    -webkit-mask-image: url(/assets/favorites-CiQFhNSn.svg);
  }
.hy-homey_header_navigation_page[data-page-id="devices"] > .icon {
    mask-image: url(/assets/devices-BKcZdAxY.svg);
    -webkit-mask-image: url(/assets/devices-BKcZdAxY.svg);
  }
.hy-homey_header_navigation_page[data-page-id="flows"] > .icon {
    mask-image: url(/assets/flows-NSxGUbh9.svg);
    -webkit-mask-image: url(/assets/flows-NSxGUbh9.svg);
  }
.hy-homey_header_navigation_page[data-page-id="insights"] > .icon {
    mask-image: url(/assets/insights-NFDOd8uv.svg);
    -webkit-mask-image: url(/assets/insights-NFDOd8uv.svg);
  }
.hy-homey_header_navigation_page  > .name {
    font-size: var(--su32);
    font-weight: 500;
    color: white;
  }
.hy-homey_header_navigation_page.is-active {
    background-color: rgba(255, 255, 255, 0.15);
  }
.hy-homey_header_navigation_page:hover {
    cursor: pointer;
  }
.hy-homey_header_navigation_page.is-focused {
    cursor: pointer;
    background-color: white;
  }
.hy-homey_header_navigation_page.is-focused  > .icon {
      background-color: black
    }
.hy-homey_header_navigation_page.is-focused  > .name {
      color: black;
    }.hy-homey_header_info {
  display: grid;
  flex-shrink: 0;

  text-align: right;
  border-radius: 9999px;
  padding-left: var(--su20);

  grid-template-areas: "homey logo"
    "weather logo";
}
.hy-homey_header_info:hover {
    cursor: pointer;
  }
.hy-homey_header_info  > .logo {
    grid-area: logo;

    --size: var(--su72);
    width: var(--size);
    height: var(--size);
    background: url(https://etc.athom.com/logo/transparent/256.png) no-repeat center center;
    background-size: contain;

    margin-left: var(--su20);

    animation: spin 20s infinite linear;
  }
.hy-homey_header_info  > .homey {
    grid-area: homey;

    font-size: var(--su28);
    font-weight: 500;
    height: var(--su28);
  }
.hy-homey_header_info  > .weather {
    grid-area: weather;

    font-size: var(--su24);
    font-weight: 400;
    color: white;
    opacity: 0.5;
  }
  .hy-homey_page-favorites  > .sections {
    display: flex;
    flex-direction: column;

    gap: var(--su60);
  }.hy-homey_page {
  display: block;

  box-sizing: border-box;

  padding: var(--su40);

  min-height: var(--su800);
}
  .hy-homey_page-favorites_section  > .empty {
    font-size: var(--su32);
    color: rgba(255, 255, 255, 0.6);
  }
.hy-homey_page-favorites_section:not([data-count="0"]) > .empty {
    display: none;
  }.hy-homey_section {
  display: flex;
  flex-direction: column;
  gap: var(--su20);
}
.hy-homey_section  > .header {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--su26);
  }
:is(.hy-homey_section > .header)  > .icon {
      position: relative;
      z-index: 1;

      box-sizing: border-box;
      padding: var(--su11);
      height: var(--su64);
      width: var(--su64);
      border-radius: var(--su12);

      background-color: rgba(255, 255, 255, 0.1);
    }
:is(:is(.hy-homey_section > .header) > .icon)  > .glyph {
        height: var(--su42);
        width: var(--su42);

        background-color: white;
        -webkit-mask-size: contain;
        mask-size: contain;
        -webkit-mask-position: center center;
        mask-position: center center;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
      }
:is(:is(.hy-homey_section > .header) > .icon)  > .image {
        height: var(--su42);
        width: var(--su42);

        background-size: contain;
        background-position: center center;
        background-repeat: no-repeat;
      }
:is(.hy-homey_section > .header)  > .title {
      font-size: var(--su40);
      font-weight: 700;
    }
.hy-homey_section  > .items {
    display: flex;
    flex-wrap: wrap;
    gap: var(--su30);
  }.hy-flow-small {
  flex-shrink: 0;
  flex-grow: 0;

  display: grid;
  grid-template-areas: "icon name"
    "icon description";
  grid-template-columns: auto 1fr;

  overflow: hidden;

  box-sizing: border-box;
  width: var(--su420);
  height: var(--su100);
  padding: var(--su16);
  border-radius: 9999px;

  background-color: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0px 0px 0px var(--su1) rgba(255, 255, 255, 0.1);
}
.hy-flow-small:hover {
    cursor: pointer;
  }
.hy-flow-small  > .icon {
    grid-area: icon;

    --size: var(--su68);

    pointer-events: none;
    position: relative;
    width: var(--size);
    height: var(--size);

    margin-right: var(--su20);

    background-image: url(/assets/flow-play-start-CR-MBS8z.svg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
  }
:is(.hy-flow-small > .icon)  > object {
      position: absolute;
      top: 0;
      left: 0;
      visibility: hidden;
    }
[data-phase="start"]:is(.hy-flow-small > .icon) > object[data-phase="start"],[data-phase="loading"]:is(.hy-flow-small > .icon) > object[data-phase="loading"],[data-phase="success"]:is(.hy-flow-small > .icon) > object[data-phase="success"],[data-phase="error"]:is(.hy-flow-small > .icon) > object[data-phase="error"] {
      visibility: visible;
    }
.hy-flow-small  > .name {
    grid-area: name;

    font-size: var(--su28);
    font-weight: 500;
    margin-bottom: var(--su3);

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    padding-bottom: var(--su6);
  }
.hy-flow-small  > .description {
    grid-area: description;

    font-size: var(--su24);
    font-weight: 500;
    color: rgba(255, 255, 255, 0.6);

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
.hy-flow-small:not(.is-triggerable) {
    opacity: 0.5;
    filter: grayscale(100%);
    cursor: not-allowed;
  }.hy-device_controls-button {
  box-sizing: border-box;
  padding: var(--su48);
  height: 100%;

  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--su128), max-content));
  justify-content: center;
  align-items: center;
  gap: var(--su128);
}
.hy-device_controls-button  > .button {
    --size: var(--su128);

    width: var(--size);
    height: var(--size);
  }.hy-device_controls-garagedoor {
  width: 100%;
  height: 100%;

  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--su132);
}
.hy-device_controls-garagedoor  > .button {
    --size: var(--su200);
    width: var(--su200);
    height: var(--su200);
  }
.hy-device_controls-garagedoor  > .button-open.is-active > .icon {
    background-color: #D81C1D;
  }
.hy-device_controls-garagedoor  > .button-close.is-active > .icon {
    background-color: #3FC700;
  }.hy-device_controls-light {
  height: 100%;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--su48);
}
.hy-device_controls-light  > .toggle {
    position: relative;

    width: var(--su262);
    height: var(--su262);
    box-sizing: border-box;

    border: var(--su1) solid rgba(255, 255, 255, 0.1);
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 9999px;

    transition: background-color 0.1s;

    display: flex;
    align-items: center;
    justify-content: center;
  }
:is(.hy-device_controls-light > .toggle):hover {
      cursor: pointer;
    }
:is(.hy-device_controls-light > .toggle):before {
      content: '';
      display: block;

      position: absolute;
      z-index: 1;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);

      width: var(--su242);
      height: var(--su242);
      border-radius: 9999px;
    }
.is-on:is(.hy-device_controls-light > .toggle):before {
      background-color: white;
    }
.is-on:is(.hy-device_controls-light > .toggle):after {
      background-color: #303031;
    }
:is(.hy-device_controls-light > .toggle):after {
      content: '';
      display: block;

      position: absolute;
      z-index: 2;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);

      width: var(--su80);
      height: var(--su80);

      background-color: white;
      transition: background-color 0.1s;

      mask-image: url(/assets/onoff-DxpM89To.svg);
      -webkit-mask-image: url(/assets/onoff-DxpM89To.svg);

      mask-position: center center;
      -webkit-mask-position: center center;

      mask-repeat: no-repeat;
      -webkit-mask-repeat: no-repeat;

      mask-size: contain;
      -webkit-mask-size: contain;
    }
.hy-device_controls-light  > .colors {
    background-color: rgba(255, 255, 255, 0.05);
    border: var(--su1) solid rgba(255, 255, 255, 0.1);
    border-radius: var(--su16);

    padding: var(--su16);
    width: var(--su512);
    box-sizing: border-box;

    display: flex;
    flex-direction: column;
    gap: var(--su16);
  }
:is(.hy-device_controls-light > .colors)  > .row {
      display: flex;
      gap: var(--su16);
    }
:is(:is(.hy-device_controls-light > .colors) > .row)  > .preset {
        position: relative;
        width: var(--su48);
        height: var(--su48);
        border-radius: 100%;
      }
:is(:is(:is(.hy-device_controls-light > .colors) > .row) > .preset)  > .inner {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);

          width: var(--su34);
          height: var(--su34);
          border-radius: 100%;
        }
:is(:is(:is(.hy-device_controls-light > .colors) > .row) > .preset)  > .outer {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);

          width: var(--su48);
          height: var(--su48);
          border-radius: 100%;

          opacity: 0.2;
        }.hy-input-slider {
  --height: var(--su96);
  width: var(--su512);
  height: var(--su96);
  box-sizing: border-box;
  padding: var(--su8);

  background-color: rgba(255, 255, 255, 0.05);
  border: var(--su1) solid rgba(255, 255, 255, 0.1);
  border-radius: var(--su48);
}
.hy-input-slider  > .track {
    width: 100%;
    height: var(--su80);
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 9999px;
  }
:is(.hy-input-slider > .track)  > .thumb {
      width: 50%;
      min-width: var(--su80);
      height: var(--su80);
      border-radius: 9999px;

      background-color: rgba(255, 255, 255, 1.0);
      background-size: var(--su28) var(--su28);
      background-position: center right var(--su25);
      background-repeat: no-repeat;

      touch-action: none;
    }.hy-device_controls-lock {
  width: 100%;
  height: 100%;

  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--su132);
}
.hy-device_controls-lock  > .button {
    --size: var(--su200);
    width: var(--su200);
    height: var(--su200);
  }
.hy-device_controls-lock  > .button-lock.is-active > .icon {
    background-color: #3FC700;
  }
.hy-device_controls-lock  > .button-unlock.is-active > .icon {
    background-color: #D81C1D;
  }
  .hy-device_controls-message-locked  > .icon {
    background-image: url(/assets/premium-4YnzUXuk.svg);
  }.hy-device_controls-message {
  width: 100%;
  height: 100%;
  margin: 0 auto;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  text-align: center;
}
.hy-device_controls-message  > .icon {
    --size: var(--su75);

    width: var(--size);
    height: var(--size);

    margin-bottom: var(--su40);

    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
  }
.hy-device_controls-message  > .title {
    width: var(--su800);

    font-size: var(--su40);
    font-weight: 600;
    color: white;

    margin-bottom: var(--su18);
  }
.hy-device_controls-message  > .subtitle {
    width: var(--su800);

    font-size: var(--su28);
    font-weight: 400;
    color: rgba(255, 255, 255, 0.6);
  }
  .hy-device_controls-message-ok  > .icon {
    background-image: url(/assets/check-BwuU0myt.svg);
  }
  .hy-device_controls-message-unavailable  > .icon {
    background-image: url(/assets/unavailable-iTM5cLZh.svg);
  }.hy-device_controls-sensor {
  padding: var(--su48);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--su320), max-content));
  justify-content: center;
  gap: var(--su32);
}.hy-device_controls-sensor_capability {
  position: relative;
  overflow: hidden;

  display: grid;
  grid-template-areas:
    "title icon"
    "value value"
    "timeago timeago";
  grid-template-columns: 1fr auto;
  justify-content: space-between;
  row-gap: var(--su16);

  box-sizing: border-box;
  width: var(--su320);
  height: var(--su180);
  padding: var(--su16);

  background-color: rgba(255, 255, 255, 0.05);
  border: var(--su1) solid rgba(255, 255, 255, 0.1);
  border-radius: var(--su16);

  cursor: default !important;

}
.hy-device_controls-sensor_capability  > .icon {
    grid-area: icon;

    margin-top: calc(-1 * var(--su6));
    margin-right: calc(-1 * var(--su6));
    width: var(--su38);
    height: var(--su38);

    background-color: white;

    -webkit-mask-image: url(/assets/default-DpfUyelJ.svg);

            mask-image: url(/assets/default-DpfUyelJ.svg);
    -webkit-mask-size: contain;
            mask-size: contain;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
  }
.hy-device_controls-sensor_capability  > .title {
    grid-area: title;

    font-size: var(--su28);
    font-weight: 500;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
.hy-device_controls-sensor_capability  > .value {
    grid-area: value;

    display: grid;
    grid-template-areas: "text units";
    grid-template-columns: auto 1fr;

    align-items: baseline;
  }
:is(.hy-device_controls-sensor_capability > .value)  > .text {
      grid-area: text;

      font-size: var(--su40);
      font-weight: 600;
      color: white;

      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
:is(.hy-device_controls-sensor_capability > .value)  > .units {
      grid-area: units;

      font-size: var(--su28);
      font-weight: 600;
      color: white;
      margin-left: var(--su4);
    }
.hy-device_controls-sensor_capability  > .timeago {
    grid-area: timeago;

    font-size: var(--su24);
    font-weight: 500;
    color: rgba(255, 255, 255, 0.6);
  }
.hy-device_controls-sensor_capability[data-capability-id="alarm_aqi"] > .icon {
    -webkit-mask-image: url(/assets/alarm_aqi-BxVw3RKY.svg);
            mask-image: url(/assets/alarm_aqi-BxVw3RKY.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="alarm_battery"] > .icon {
    -webkit-mask-image: url(/assets/alarm_battery-CNtgEVEv.svg);
            mask-image: url(/assets/alarm_battery-CNtgEVEv.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="alarm_bin_full"] > .icon {
    -webkit-mask-image: url(/assets/alarm_bin_full-CkrTehCd.svg);
            mask-image: url(/assets/alarm_bin_full-CkrTehCd.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="alarm_bin_missing"] > .icon {
    -webkit-mask-image: url(/assets/alarm_bin_missing-BiPPe606.svg);
            mask-image: url(/assets/alarm_bin_missing-BiPPe606.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="alarm_cleaning_pad_missing"] > .icon {
    -webkit-mask-image: url(/assets/alarm_cleaning_pad_missing-82lwS4YB.svg);
            mask-image: url(/assets/alarm_cleaning_pad_missing-82lwS4YB.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="alarm_co"] > .icon {
    -webkit-mask-image: url(/assets/alarm_co-CCPRJ23f.svg);
            mask-image: url(/assets/alarm_co-CCPRJ23f.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="alarm_co2"] > .icon {
    -webkit-mask-image: url(/assets/alarm_co2-XaNQbcbA.svg);
            mask-image: url(/assets/alarm_co2-XaNQbcbA.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="alarm_cold"] > .icon {
    -webkit-mask-image: url(/assets/alarm_cold-Cgzu9Xk3.svg);
            mask-image: url(/assets/alarm_cold-Cgzu9Xk3.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="alarm_connectivity"] > .icon {
    -webkit-mask-image: url(/assets/alarm_connectivity-MEsVPm-r.svg);
            mask-image: url(/assets/alarm_connectivity-MEsVPm-r.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="alarm_contact"] > .icon {
    -webkit-mask-image: url(/assets/alarm_contact-BRF3YM7K.svg);
            mask-image: url(/assets/alarm_contact-BRF3YM7K.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="alarm_door_fault"] > .icon {
    -webkit-mask-image: url(/assets/alarm_door_fault-BIbSXYFV.svg);
            mask-image: url(/assets/alarm_door_fault-BIbSXYFV.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="alarm_fire"] > .icon {
    -webkit-mask-image: url(/assets/alarm_fire-BnGt92EV.svg);
            mask-image: url(/assets/alarm_fire-BnGt92EV.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="alarm_freeze_risk_inactive"] > .icon {
    -webkit-mask-image: url(/assets/alarm_freeze_risk_inactive-Dw8LfXhE.svg);
            mask-image: url(/assets/alarm_freeze_risk_inactive-Dw8LfXhE.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="alarm_freeze_risk"] > .icon {
    -webkit-mask-image: url(/assets/alarm_freeze_risk-CwW6Xd-Z.svg);
            mask-image: url(/assets/alarm_freeze_risk-CwW6Xd-Z.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="alarm_gas"] > .icon {
    -webkit-mask-image: url(/assets/alarm_gas-1i5V3bPa.svg);
            mask-image: url(/assets/alarm_gas-1i5V3bPa.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="alarm_generic"] > .icon {
    -webkit-mask-image: url(/assets/alarm_generic-32XcTueP.svg);
            mask-image: url(/assets/alarm_generic-32XcTueP.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="alarm_heat"] > .icon {
    -webkit-mask-image: url(/assets/alarm_heat-BMIit_WF.svg);
            mask-image: url(/assets/alarm_heat-BMIit_WF.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="alarm_light"] > .icon {
    -webkit-mask-image: url(/assets/alarm_light-BEGAye5u.svg);
            mask-image: url(/assets/alarm_light-BEGAye5u.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="alarm_lost"] > .icon {
    -webkit-mask-image: url(/assets/alarm_lost-B9EFeyqn.svg);
            mask-image: url(/assets/alarm_lost-B9EFeyqn.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="alarm_moisture"] > .icon {
    -webkit-mask-image: url(/assets/alarm_moisture-gxmcsoWE.svg);
            mask-image: url(/assets/alarm_moisture-gxmcsoWE.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="alarm_motion"] > .icon {
    -webkit-mask-image: url(/assets/alarm_motion-CQKILXWi.svg);
            mask-image: url(/assets/alarm_motion-CQKILXWi.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="alarm_night"] > .icon {
    -webkit-mask-image: url(/assets/alarm_night-m7Z272xr.svg);
            mask-image: url(/assets/alarm_night-m7Z272xr.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="alarm_noise"] > .icon {
    -webkit-mask-image: url(/assets/alarm_noise-CfQgKg_a.svg);
            mask-image: url(/assets/alarm_noise-CfQgKg_a.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="alarm_nox"] > .icon {
    -webkit-mask-image: url(/assets/alarm_nox-B6fRfB8u.svg);
            mask-image: url(/assets/alarm_nox-B6fRfB8u.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="alarm_o3"] > .icon {
    -webkit-mask-image: url(/assets/alarm_o3-DGl9odtK.svg);
            mask-image: url(/assets/alarm_o3-DGl9odtK.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="alarm_occupancy"] > .icon {
    -webkit-mask-image: url(/assets/alarm_occupancy-BA9ik2k6.svg);
            mask-image: url(/assets/alarm_occupancy-BA9ik2k6.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="alarm_open_inactive"] > .icon {
    -webkit-mask-image: url(/assets/alarm_open_inactive-CCQi21Fv.svg);
            mask-image: url(/assets/alarm_open_inactive-CCQi21Fv.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="alarm_open"] > .icon {
    -webkit-mask-image: url(/assets/alarm_open-ChE1i9us.svg);
            mask-image: url(/assets/alarm_open-ChE1i9us.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="alarm_pm1"] > .icon {
    -webkit-mask-image: url(/assets/alarm_pm1-Bdiu91hk.svg);
            mask-image: url(/assets/alarm_pm1-Bdiu91hk.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="alarm_pm01"] > .icon {
    -webkit-mask-image: url(/assets/alarm_pm01-DPbv_qSG.svg);
            mask-image: url(/assets/alarm_pm01-DPbv_qSG.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="alarm_pm10"] > .icon {
    -webkit-mask-image: url(/assets/alarm_pm10-Bqc_oUO_.svg);
            mask-image: url(/assets/alarm_pm10-Bqc_oUO_.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="alarm_pm25"] > .icon {
    -webkit-mask-image: url(/assets/alarm_pm25-BzUiAtZK.svg);
            mask-image: url(/assets/alarm_pm25-BzUiAtZK.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="alarm_power"] > .icon {
    -webkit-mask-image: url(/assets/alarm_power-CI4Zws18.svg);
            mask-image: url(/assets/alarm_power-CI4Zws18.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="alarm_presence"] > .icon {
    -webkit-mask-image: url(/assets/alarm_presence-BbH5U9yU.svg);
            mask-image: url(/assets/alarm_presence-BbH5U9yU.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="alarm_problem"] > .icon {
    -webkit-mask-image: url(/assets/alarm_problem-Fkz-Ia9a.svg);
            mask-image: url(/assets/alarm_problem-Fkz-Ia9a.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="alarm_pump_device"] > .icon {
    -webkit-mask-image: url(/assets/alarm_pump_device-B9UKGgi3.svg);
            mask-image: url(/assets/alarm_pump_device-B9UKGgi3.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="alarm_pump_supply"] > .icon {
    -webkit-mask-image: url(/assets/alarm_pump_supply-DnE7X8_a.svg);
            mask-image: url(/assets/alarm_pump_supply-DnE7X8_a.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="alarm_rain_inactive"] > .icon {
    -webkit-mask-image: url(/assets/alarm_rain_inactive-BqCi-Pt3.svg);
            mask-image: url(/assets/alarm_rain_inactive-BqCi-Pt3.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="alarm_rain"] > .icon {
    -webkit-mask-image: url(/assets/alarm_rain-CLD6Y5es.svg);
            mask-image: url(/assets/alarm_rain-CLD6Y5es.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="alarm_running"] > .icon {
    -webkit-mask-image: url(/assets/alarm_running-CdZQ6XmT.svg);
            mask-image: url(/assets/alarm_running-CdZQ6XmT.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="alarm_safety"] > .icon {
    -webkit-mask-image: url(/assets/alarm_safety-Pn5g6cC_.svg);
            mask-image: url(/assets/alarm_safety-Pn5g6cC_.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="alarm_smoke"] > .icon {
    -webkit-mask-image: url(/assets/alarm_smoke-ZA6zmFad.svg);
            mask-image: url(/assets/alarm_smoke-ZA6zmFad.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="alarm_so2"] > .icon {
    -webkit-mask-image: url(/assets/alarm_so2-BlrXxIb5.svg);
            mask-image: url(/assets/alarm_so2-BlrXxIb5.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="alarm_stuck"] > .icon {
    -webkit-mask-image: url(/assets/alarm_stuck-BY0_EYv8.svg);
            mask-image: url(/assets/alarm_stuck-BY0_EYv8.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="alarm_tamper"] > .icon {
    -webkit-mask-image: url(/assets/alarm_tamper-loycCBlz.svg);
            mask-image: url(/assets/alarm_tamper-loycCBlz.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="alarm_tank_empty"] > .icon {
    -webkit-mask-image: url(/assets/alarm_tank_empty-VsfGyEXE.svg);
            mask-image: url(/assets/alarm_tank_empty-VsfGyEXE.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="alarm_tank_missing"] > .icon {
    -webkit-mask-image: url(/assets/alarm_tank_missing-D3x-rBM8.svg);
            mask-image: url(/assets/alarm_tank_missing-D3x-rBM8.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="alarm_tank_open"] > .icon {
    -webkit-mask-image: url(/assets/alarm_tank_open-B5zdJPcE.svg);
            mask-image: url(/assets/alarm_tank_open-B5zdJPcE.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="alarm_tvoc"] > .icon {
    -webkit-mask-image: url(/assets/alarm_tvoc-dWngb1Ef.svg);
            mask-image: url(/assets/alarm_tvoc-dWngb1Ef.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="alarm_vibration"] > .icon {
    -webkit-mask-image: url(/assets/alarm_vibration-BLZPurhc.svg);
            mask-image: url(/assets/alarm_vibration-BLZPurhc.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="alarm_water"] > .icon {
    -webkit-mask-image: url(/assets/alarm_water-C73CSdHl.svg);
            mask-image: url(/assets/alarm_water-C73CSdHl.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="audio_output"] > .icon {
    -webkit-mask-image: url(/assets/audio_output-Dz_WX4HP.svg);
            mask-image: url(/assets/audio_output-Dz_WX4HP.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="battery_charging_state"] > .icon {
    -webkit-mask-image: url(/assets/battery_charging_state-CBpwRH6x.svg);
            mask-image: url(/assets/battery_charging_state-CBpwRH6x.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="button 2"] > .icon {
    -webkit-mask-image: url(/assets/button%202-allFvQjO.svg);
            mask-image: url(/assets/button%202-allFvQjO.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="button"] > .icon {
    -webkit-mask-image: url(/assets/button-MmAmYtVA.svg);
            mask-image: url(/assets/button-MmAmYtVA.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="channel_down"] > .icon {
    -webkit-mask-image: url(/assets/channel_down-CPqyPMEv.svg);
            mask-image: url(/assets/channel_down-CPqyPMEv.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="channel_up"] > .icon {
    -webkit-mask-image: url(/assets/channel_up-DSIIH9o0.svg);
            mask-image: url(/assets/channel_up-DSIIH9o0.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="cooking_time"] > .icon {
    -webkit-mask-image: url(/assets/cooking_time-SGV-UMat.svg);
            mask-image: url(/assets/cooking_time-SGV-UMat.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="dim"] > .icon {
    -webkit-mask-image: url(/assets/dim-1-dlYOnZ.svg);
            mask-image: url(/assets/dim-1-dlYOnZ.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="dishwasher_program"] > .icon {
    -webkit-mask-image: url(/assets/dishwasher_program-DtbReyKk.svg);
            mask-image: url(/assets/dishwasher_program-DtbReyKk.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="docked"] > .icon {
    -webkit-mask-image: url(/assets/docked-WDdhipS8.svg);
            mask-image: url(/assets/docked-WDdhipS8.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="ev_charging_state"] > .icon {
    -webkit-mask-image: url(/assets/ev_charging_state-BrLhNL9A.svg);
            mask-image: url(/assets/ev_charging_state-BrLhNL9A.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="evcharger_charging_state"] > .icon {
    -webkit-mask-image: url(/assets/evcharger_charging_state-BZkO2z_N.svg);
            mask-image: url(/assets/evcharger_charging_state-BZkO2z_N.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="evcharger_charging"] > .icon {
    -webkit-mask-image: url(/assets/evcharger_charging-eoB0Zu0q.svg);
            mask-image: url(/assets/evcharger_charging-eoB0Zu0q.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="fan_mode"] > .icon {
    -webkit-mask-image: url(/assets/fan_mode-DdrVy1CM.svg);
            mask-image: url(/assets/fan_mode-DdrVy1CM.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="fan_speed"] > .icon {
    -webkit-mask-image: url(/assets/fan_speed-CYOi0WFo.svg);
            mask-image: url(/assets/fan_speed-CYOi0WFo.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="fire_alarm"] > .icon {
    -webkit-mask-image: url(/assets/fire_alarm-B5wWquqj.svg);
            mask-image: url(/assets/fire_alarm-B5wWquqj.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="garagedoor_closed"] > .icon {
    -webkit-mask-image: url(/assets/garagedoor_closed-BTwsFoaV.svg);
            mask-image: url(/assets/garagedoor_closed-BTwsFoaV.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="garagedoor_open"] > .icon {
    -webkit-mask-image: url(/assets/garagedoor_open-CLH8K9Go.svg);
            mask-image: url(/assets/garagedoor_open-CLH8K9Go.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="heater_operation_mode"] > .icon {
    -webkit-mask-image: url(/assets/heater_operation_mode-iwTc6CuD.svg);
            mask-image: url(/assets/heater_operation_mode-iwTc6CuD.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="homealarm_state"] > .icon {
    -webkit-mask-image: url(/assets/homealarm_state-BXJkxcAR.svg);
            mask-image: url(/assets/homealarm_state-BXJkxcAR.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="hot_water_mode"] > .icon {
    -webkit-mask-image: url(/assets/hot_water_mode-CwwIa6gL.svg);
            mask-image: url(/assets/hot_water_mode-CwwIa6gL.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="laundry_dryer_dryness"] > .icon {
    -webkit-mask-image: url(/assets/laundry_dryer_dryness-CL3LxeDD.svg);
            mask-image: url(/assets/laundry_dryer_dryness-CL3LxeDD.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="laundry_washer_cycles"] > .icon {
    -webkit-mask-image: url(/assets/laundry_washer_cycles-CmHO5myg.svg);
            mask-image: url(/assets/laundry_washer_cycles-CmHO5myg.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="laundry_washer_program"] > .icon {
    -webkit-mask-image: url(/assets/laundry_washer_program-xnjHwZjS.svg);
            mask-image: url(/assets/laundry_washer_program-xnjHwZjS.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="laundry_washer_speed"] > .icon {
    -webkit-mask-image: url(/assets/laundry_washer_speed-DUH0ZHRH.svg);
            mask-image: url(/assets/laundry_washer_speed-DUH0ZHRH.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="level_aqi"] > .icon {
    -webkit-mask-image: url(/assets/level_aqi-CfRj8ysd.svg);
            mask-image: url(/assets/level_aqi-CfRj8ysd.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="level_carbon_filter"] > .icon {
    -webkit-mask-image: url(/assets/level_carbon_filter-D2L6Tsm2.svg);
            mask-image: url(/assets/level_carbon_filter-D2L6Tsm2.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="level_ch2o"] > .icon {
    -webkit-mask-image: url(/assets/level_ch2o-Dmubr2iT.svg);
            mask-image: url(/assets/level_ch2o-Dmubr2iT.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="level_co"] > .icon {
    -webkit-mask-image: url(/assets/level_co-CdV-1VDj.svg);
            mask-image: url(/assets/level_co-CdV-1VDj.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="level_co2"] > .icon {
    -webkit-mask-image: url(/assets/level_co2-BnhYqV9w.svg);
            mask-image: url(/assets/level_co2-BnhYqV9w.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="level_hepa_filter"] > .icon {
    -webkit-mask-image: url(/assets/level_hepa_filter-DbEkRWdQ.svg);
            mask-image: url(/assets/level_hepa_filter-DbEkRWdQ.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="level_nox"] > .icon {
    -webkit-mask-image: url(/assets/level_nox-C7Y8-Y5R.svg);
            mask-image: url(/assets/level_nox-C7Y8-Y5R.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="level_o3"] > .icon {
    -webkit-mask-image: url(/assets/level_o3-D0R6l6Gl.svg);
            mask-image: url(/assets/level_o3-D0R6l6Gl.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="level_pm1"] > .icon {
    -webkit-mask-image: url(/assets/level_pm1-B7_8suue.svg);
            mask-image: url(/assets/level_pm1-B7_8suue.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="level_pm01"] > .icon {
    -webkit-mask-image: url(/assets/level_pm01-URz4yLsM.svg);
            mask-image: url(/assets/level_pm01-URz4yLsM.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="level_pm10"] > .icon {
    -webkit-mask-image: url(/assets/level_pm10-Ctz_xI8t.svg);
            mask-image: url(/assets/level_pm10-Ctz_xI8t.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="level_pm25"] > .icon {
    -webkit-mask-image: url(/assets/level_pm25-hihtLKIJ.svg);
            mask-image: url(/assets/level_pm25-hihtLKIJ.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="level_radon"] > .icon {
    -webkit-mask-image: url(/assets/level_radon-CVkaoeCn.svg);
            mask-image: url(/assets/level_radon-CVkaoeCn.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="level_so2"] > .icon {
    -webkit-mask-image: url(/assets/level_so2-DFyBQ4b3.svg);
            mask-image: url(/assets/level_so2-DFyBQ4b3.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="level_tvoc"] > .icon {
    -webkit-mask-image: url(/assets/level_tvoc-CKad_sl4.svg);
            mask-image: url(/assets/level_tvoc-CKad_sl4.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="light_hue"] > .icon {
    -webkit-mask-image: url(/assets/light_hue-XvAWLIDX.svg);
            mask-image: url(/assets/light_hue-XvAWLIDX.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="light_mode"] > .icon {
    -webkit-mask-image: url(/assets/light_mode-DpfvO2pR.svg);
            mask-image: url(/assets/light_mode-DpfvO2pR.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="light_saturation"] > .icon {
    -webkit-mask-image: url(/assets/light_saturation-CKfNUt5B.svg);
            mask-image: url(/assets/light_saturation-CKfNUt5B.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="light_temperature"] > .icon {
    -webkit-mask-image: url(/assets/light_temperature-DM-OebUd.svg);
            mask-image: url(/assets/light_temperature-DM-OebUd.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="lock_mode"] > .icon {
    -webkit-mask-image: url(/assets/lock_mode-D_70oHJU.svg);
            mask-image: url(/assets/lock_mode-D_70oHJU.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="locked"] > .icon {
    -webkit-mask-image: url(/assets/locked-CTLUvZRV.svg);
            mask-image: url(/assets/locked-CTLUvZRV.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="measure_aqi"] > .icon {
    -webkit-mask-image: url(/assets/measure_aqi-BaRV6s6y.svg);
            mask-image: url(/assets/measure_aqi-BaRV6s6y.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="measure_battery"] > .icon {
    -webkit-mask-image: url(/assets/measure_battery-Ci5Buln9.svg);
            mask-image: url(/assets/measure_battery-Ci5Buln9.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="measure_carbon_filter"] > .icon {
    -webkit-mask-image: url(/assets/measure_carbon_filter-BUqLXB2Z.svg);
            mask-image: url(/assets/measure_carbon_filter-BUqLXB2Z.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="measure_ch2o"] > .icon {
    -webkit-mask-image: url(/assets/measure_ch2o-PNmoq6QM.svg);
            mask-image: url(/assets/measure_ch2o-PNmoq6QM.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="measure_co"] > .icon {
    -webkit-mask-image: url(/assets/measure_co-DE0gqNH1.svg);
            mask-image: url(/assets/measure_co-DE0gqNH1.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="measure_co2"] > .icon {
    -webkit-mask-image: url(/assets/measure_co2-1P3zqr0R.svg);
            mask-image: url(/assets/measure_co2-1P3zqr0R.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="measure_content_volume"] > .icon {
    -webkit-mask-image: url(/assets/measure_content_volume-sAAxwaPI.svg);
            mask-image: url(/assets/measure_content_volume-sAAxwaPI.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="measure_current"] > .icon {
    -webkit-mask-image: url(/assets/measure_current-BngErr2P.svg);
            mask-image: url(/assets/measure_current-BngErr2P.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="measure_data_rate"] > .icon {
    -webkit-mask-image: url(/assets/measure_data_rate-CJpWsp6S.svg);
            mask-image: url(/assets/measure_data_rate-CJpWsp6S.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="measure_data_size"] > .icon {
    -webkit-mask-image: url(/assets/measure_data_size-ldb7QweQ.svg);
            mask-image: url(/assets/measure_data_size-ldb7QweQ.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="measure_distance"] > .icon {
    -webkit-mask-image: url(/assets/measure_distance-BJeKyVDB.svg);
            mask-image: url(/assets/measure_distance-BJeKyVDB.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="measure_frequency"] > .icon {
    -webkit-mask-image: url(/assets/measure_frequency-ChLm06wG.svg);
            mask-image: url(/assets/measure_frequency-ChLm06wG.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="measure_gust_angle"] > .icon {
    -webkit-mask-image: url(/assets/measure_gust_angle-DBZX1CTt.svg);
            mask-image: url(/assets/measure_gust_angle-DBZX1CTt.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="measure_gust_strength"] > .icon {
    -webkit-mask-image: url(/assets/measure_gust_strength-CjpQaDsB.svg);
            mask-image: url(/assets/measure_gust_strength-CjpQaDsB.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="measure_hepa_filter"] > .icon {
    -webkit-mask-image: url(/assets/measure_hepa_filter-DfHIOAZZ.svg);
            mask-image: url(/assets/measure_hepa_filter-DfHIOAZZ.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="measure_humidity"] > .icon {
    -webkit-mask-image: url(/assets/measure_humidity-1F-rlR8t.svg);
            mask-image: url(/assets/measure_humidity-1F-rlR8t.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="measure_luminance"] > .icon {
    -webkit-mask-image: url(/assets/measure_luminance-DJQk2AV7.svg);
            mask-image: url(/assets/measure_luminance-DJQk2AV7.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="measure_moisture"] > .icon {
    -webkit-mask-image: url(/assets/measure_moisture-D2kvSEXE.svg);
            mask-image: url(/assets/measure_moisture-D2kvSEXE.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="measure_monetary"] > .icon {
    -webkit-mask-image: url(/assets/measure_monetary-BtVyEGT9.svg);
            mask-image: url(/assets/measure_monetary-BtVyEGT9.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="measure_noise"] > .icon {
    -webkit-mask-image: url(/assets/alarm_noise-CfQgKg_a.svg);
            mask-image: url(/assets/alarm_noise-CfQgKg_a.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="measure_nox"] > .icon {
    -webkit-mask-image: url(/assets/measure_nox-BzQoWbii.svg);
            mask-image: url(/assets/measure_nox-BzQoWbii.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="measure_o3"] > .icon {
    -webkit-mask-image: url(/assets/measure_o3--5CD2Y0B.svg);
            mask-image: url(/assets/measure_o3--5CD2Y0B.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="measure_odor"] > .icon {
    -webkit-mask-image: url(/assets/measure_odor-BOK6XZ3m.svg);
            mask-image: url(/assets/measure_odor-BOK6XZ3m.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="measure_ph"] > .icon {
    -webkit-mask-image: url(/assets/measure_ph-6czc4UZx.svg);
            mask-image: url(/assets/measure_ph-6czc4UZx.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="measure_pm1"] > .icon {
    -webkit-mask-image: url(/assets/measure_pm1-DH7XG1WN.svg);
            mask-image: url(/assets/measure_pm1-DH7XG1WN.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="measure_pm01"] > .icon {
    -webkit-mask-image: url(/assets/measure_pm01-CSSMq1E8.svg);
            mask-image: url(/assets/measure_pm01-CSSMq1E8.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="measure_pm10"] > .icon {
    -webkit-mask-image: url(/assets/measure_pm10-kNbMSCr9.svg);
            mask-image: url(/assets/measure_pm10-kNbMSCr9.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="measure_pm25"] > .icon {
    -webkit-mask-image: url(/assets/measure_pm25-Dpi0UR4T.svg);
            mask-image: url(/assets/measure_pm25-Dpi0UR4T.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="measure_power"] > .icon {
    -webkit-mask-image: url(/assets/measure_power-DYi8nxAY.svg);
            mask-image: url(/assets/measure_power-DYi8nxAY.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="measure_pressure"] > .icon {
    -webkit-mask-image: url(/assets/measure_pressure-C7pytCNn.svg);
            mask-image: url(/assets/measure_pressure-C7pytCNn.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="measure_radon"] > .icon {
    -webkit-mask-image: url(/assets/measure_radon-Dmj7-Ttj.svg);
            mask-image: url(/assets/measure_radon-Dmj7-Ttj.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="measure_rain_intensity"] > .icon {
    -webkit-mask-image: url(/assets/measure_rain_intensity-nQzm1Z1_.svg);
            mask-image: url(/assets/measure_rain_intensity-nQzm1Z1_.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="measure_rain"] > .icon {
    -webkit-mask-image: url(/assets/measure_rain-BDmOSPLR.svg);
            mask-image: url(/assets/measure_rain-BDmOSPLR.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="measure_rotation"] > .icon {
    -webkit-mask-image: url(/assets/measure_rotation-Bo3DhBlz.svg);
            mask-image: url(/assets/measure_rotation-Bo3DhBlz.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="measure_signal_strength 2"] > .icon {
    -webkit-mask-image: url(/assets/measure_signal_strength%202-CDoqJEFB.svg);
            mask-image: url(/assets/measure_signal_strength%202-CDoqJEFB.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="measure_signal_strength"] > .icon {
    -webkit-mask-image: url(/assets/measure_signal_strength-gK9rOGQ6.svg);
            mask-image: url(/assets/measure_signal_strength-gK9rOGQ6.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="measure_so2"] > .icon {
    -webkit-mask-image: url(/assets/measure_so2-ax4GnacE.svg);
            mask-image: url(/assets/measure_so2-ax4GnacE.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="measure_speed"] > .icon {
    -webkit-mask-image: url(/assets/measure_speed-BgCzsayz.svg);
            mask-image: url(/assets/measure_speed-BgCzsayz.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="measure_temperature"] > .icon {
    -webkit-mask-image: url(/assets/mode-unknown-BsvgiPzR.svg);
            mask-image: url(/assets/mode-unknown-BsvgiPzR.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="measure_tvoc_index"] > .icon {
    -webkit-mask-image: url(/assets/measure_tvoc_index-KF6WcmVm.svg);
            mask-image: url(/assets/measure_tvoc_index-KF6WcmVm.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="measure_tvoc"] > .icon {
    -webkit-mask-image: url(/assets/measure_tvoc-B-6jsNGJ.svg);
            mask-image: url(/assets/measure_tvoc-B-6jsNGJ.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="measure_ultraviolet"] > .icon {
    -webkit-mask-image: url(/assets/measure_ultraviolet-Bg-MUETu.svg);
            mask-image: url(/assets/measure_ultraviolet-Bg-MUETu.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="measure_voltage"] > .icon {
    -webkit-mask-image: url(/assets/measure_voltage-zhJg4K97.svg);
            mask-image: url(/assets/measure_voltage-zhJg4K97.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="measure_water"] > .icon {
    -webkit-mask-image: url(/assets/measure_water-DzXZk8Wd.svg);
            mask-image: url(/assets/measure_water-DzXZk8Wd.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="measure_weight"] > .icon {
    -webkit-mask-image: url(/assets/measure_weight-DkoxoFmH.svg);
            mask-image: url(/assets/measure_weight-DkoxoFmH.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="measure_wind_angle"] > .icon {
    -webkit-mask-image: url(/assets/measure_wind_angle-CMG4G4iT.svg);
            mask-image: url(/assets/measure_wind_angle-CMG4G4iT.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="measure_wind_strength"] > .icon {
    -webkit-mask-image: url(/assets/measure_wind_strength-CGe0pbAD.svg);
            mask-image: url(/assets/measure_wind_strength-CGe0pbAD.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="media_input"] > .icon {
    -webkit-mask-image: url(/assets/media_input-C1Td3sXn.svg);
            mask-image: url(/assets/media_input-C1Td3sXn.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="meter_gas"] > .icon {
    -webkit-mask-image: url(/assets/meter_gas-CZG0GFnK.svg);
            mask-image: url(/assets/meter_gas-CZG0GFnK.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="meter_power"] > .icon {
    -webkit-mask-image: url(/assets/meter_power-nRQksVsQ.svg);
            mask-image: url(/assets/meter_power-nRQksVsQ.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="meter_rain"] > .icon {
    -webkit-mask-image: url(/assets/meter_rain-Dh9LnJjQ.svg);
            mask-image: url(/assets/meter_rain-Dh9LnJjQ.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="meter_water"] > .icon {
    -webkit-mask-image: url(/assets/meter_water-Buwnluyp.svg);
            mask-image: url(/assets/meter_water-Buwnluyp.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="microwave_mode"] > .icon {
    -webkit-mask-image: url(/assets/microwave_mode-6wSgAjuc.svg);
            mask-image: url(/assets/microwave_mode-6wSgAjuc.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="mower_state"] > .icon {
    -webkit-mask-image: url(/assets/mower_state-DOeHRWO2.svg);
            mask-image: url(/assets/mower_state-DOeHRWO2.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="onoff"] > .icon {
    -webkit-mask-image: url(/assets/onoff-DKdM6WPX.svg);
            mask-image: url(/assets/onoff-DKdM6WPX.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="operational_state"] > .icon {
    -webkit-mask-image: url(/assets/operational_state-AJ7cDC4W.svg);
            mask-image: url(/assets/operational_state-AJ7cDC4W.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="oscillating"] > .icon {
    -webkit-mask-image: url(/assets/oscillating-B75-RgFZ.svg);
            mask-image: url(/assets/oscillating-B75-RgFZ.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="oven_mode"] > .icon {
    -webkit-mask-image: url(/assets/oven_mode-CK6hFnza.svg);
            mask-image: url(/assets/oven_mode-CK6hFnza.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="power_boost"] > .icon {
    -webkit-mask-image: url(/assets/power_boost-hc-TqV-N.svg);
            mask-image: url(/assets/power_boost-hc-TqV-N.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="power_level"] > .icon {
    -webkit-mask-image: url(/assets/power_level-C5TqKDXh.svg);
            mask-image: url(/assets/power_level-C5TqKDXh.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="progress"] > .icon {
    -webkit-mask-image: url(/assets/progress-DEswzJIf.svg);
            mask-image: url(/assets/progress-DEswzJIf.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="pump_mode"] > .icon {
    -webkit-mask-image: url(/assets/pump_mode-BrNNxMs5.svg);
            mask-image: url(/assets/pump_mode-BrNNxMs5.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="pump_setpoint"] > .icon {
    -webkit-mask-image: url(/assets/pump_setpoint-Cl8rViTF.svg);
            mask-image: url(/assets/pump_setpoint-Cl8rViTF.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="refrigerator_mode"] > .icon {
    -webkit-mask-image: url(/assets/refrigerator_mode-CJxX6QuF.svg);
            mask-image: url(/assets/refrigerator_mode-CJxX6QuF.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="speaker_album"] > .icon {
    -webkit-mask-image: url(/assets/speaker_album-BMzpeqee.svg);
            mask-image: url(/assets/speaker_album-BMzpeqee.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="speaker_artist"] > .icon {
    -webkit-mask-image: url(/assets/speaker_artist-DuhWND-S.svg);
            mask-image: url(/assets/speaker_artist-DuhWND-S.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="speaker_duration"] > .icon {
    -webkit-mask-image: url(/assets/speaker_duration-CKxgxziD.svg);
            mask-image: url(/assets/speaker_duration-CKxgxziD.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="speaker_next"] > .icon {
    -webkit-mask-image: url(/assets/speaker_next-DeYePnvv.svg);
            mask-image: url(/assets/speaker_next-DeYePnvv.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="speaker_play"] > .icon {
    -webkit-mask-image: url(/assets/speaker_play-D-I7axXf.svg);
            mask-image: url(/assets/speaker_play-D-I7axXf.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="speaker_playing"] > .icon {
    -webkit-mask-image: url(/assets/speaker_playing-DZhrKLJ7.svg);
            mask-image: url(/assets/speaker_playing-DZhrKLJ7.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="speaker_position"] > .icon {
    -webkit-mask-image: url(/assets/speaker_position-DeAx3EGt.svg);
            mask-image: url(/assets/speaker_position-DeAx3EGt.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="speaker_prev"] > .icon {
    -webkit-mask-image: url(/assets/speaker_prev-BC_Y_u9A.svg);
            mask-image: url(/assets/speaker_prev-BC_Y_u9A.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="speaker_repeat"] > .icon {
    -webkit-mask-image: url(/assets/speaker_repeat-NYJ8rp95.svg);
            mask-image: url(/assets/speaker_repeat-NYJ8rp95.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="speaker_shuffle"] > .icon {
    -webkit-mask-image: url(/assets/speaker_shuffle-CQjlgPe8.svg);
            mask-image: url(/assets/speaker_shuffle-CQjlgPe8.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="speaker_stop"] > .icon {
    -webkit-mask-image: url(/assets/speaker_stop-BC2jH1Th.svg);
            mask-image: url(/assets/speaker_stop-BC2jH1Th.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="speaker_track"] > .icon {
    -webkit-mask-image: url(/assets/speaker_track-BgYL9Qzo.svg);
            mask-image: url(/assets/speaker_track-BgYL9Qzo.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="swing_mode"] > .icon {
    -webkit-mask-image: url(/assets/swing_mode-R86pToqU.svg);
            mask-image: url(/assets/swing_mode-R86pToqU.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="target_humidity_max"] > .icon {
    -webkit-mask-image: url(/assets/target_humidity_max-Bt-LcSrZ.svg);
            mask-image: url(/assets/target_humidity_max-Bt-LcSrZ.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="target_humidity_min"] > .icon {
    -webkit-mask-image: url(/assets/target_humidity_min-g0L6L1mY.svg);
            mask-image: url(/assets/target_humidity_min-g0L6L1mY.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="target_humidity"] > .icon {
    -webkit-mask-image: url(/assets/target_humidity-DYwt4Mvi.svg);
            mask-image: url(/assets/target_humidity-DYwt4Mvi.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="target_power_mode"] > .icon {
    -webkit-mask-image: url(/assets/target_power_mode-7aD6P4Uj.svg);
            mask-image: url(/assets/target_power_mode-7aD6P4Uj.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="target_power"] > .icon {
    -webkit-mask-image: url(/assets/target_power-BBWAP1Hv.svg);
            mask-image: url(/assets/target_power-BBWAP1Hv.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="target_temperature_level"] > .icon {
    -webkit-mask-image: url(/assets/target_temperature_level-DamsxRfV.svg);
            mask-image: url(/assets/target_temperature_level-DamsxRfV.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="target_temperature_max"] > .icon {
    -webkit-mask-image: url(/assets/target_temperature_max-B2F_Wkfx.svg);
            mask-image: url(/assets/target_temperature_max-B2F_Wkfx.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="target_temperature_min"] > .icon {
    -webkit-mask-image: url(/assets/target_temperature_min-RofssPn-.svg);
            mask-image: url(/assets/target_temperature_min-RofssPn-.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="target_temperature"] > .icon {
    -webkit-mask-image: url(/assets/target_temperature-DeUmpSTs.svg);
            mask-image: url(/assets/target_temperature-DeUmpSTs.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="thermostat_mode"] > .icon {
    -webkit-mask-image: url(/assets/thermostat_mode-hBAgDLpw.svg);
            mask-image: url(/assets/thermostat_mode-hBAgDLpw.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="unlocked"] > .icon {
    -webkit-mask-image: url(/assets/unlocked-DVrF6Fo1.svg);
            mask-image: url(/assets/unlocked-DVrF6Fo1.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="vacuumcleaner_job_mode"] > .icon {
    -webkit-mask-image: url(/assets/vacuumcleaner_job_mode-C5OBillt.svg);
            mask-image: url(/assets/vacuumcleaner_job_mode-C5OBillt.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="vacuumcleaner_state"] > .icon {
    -webkit-mask-image: url(/assets/vacuumcleaner_state-BfM0PvIF.svg);
            mask-image: url(/assets/vacuumcleaner_state-BfM0PvIF.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="valve_position"] > .icon {
    -webkit-mask-image: url(/assets/valve_position-C7egpGiE.svg);
            mask-image: url(/assets/valve_position-C7egpGiE.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="volume_down"] > .icon {
    -webkit-mask-image: url(/assets/volume_down-CGFK8pcR.svg);
            mask-image: url(/assets/volume_down-CGFK8pcR.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="volume_mute"] > .icon {
    -webkit-mask-image: url(/assets/volume_mute-8mA8FPrk.svg);
            mask-image: url(/assets/volume_mute-8mA8FPrk.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="volume_set"] > .icon {
    -webkit-mask-image: url(/assets/volume_set-C3meLEju.svg);
            mask-image: url(/assets/volume_set-C3meLEju.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="volume_up"] > .icon {
    -webkit-mask-image: url(/assets/volume_up-BtbZihkk.svg);
            mask-image: url(/assets/volume_up-BtbZihkk.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="windowcoverings_closed"] > .icon {
    -webkit-mask-image: url(/assets/windowcoverings_closed-Bwlfw7ew.svg);
            mask-image: url(/assets/windowcoverings_closed-Bwlfw7ew.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="windowcoverings_set"] > .icon {
    -webkit-mask-image: url(/assets/windowcoverings_set-IMDAwxck.svg);
            mask-image: url(/assets/windowcoverings_set-IMDAwxck.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="windowcoverings_state"] > .icon {
    -webkit-mask-image: url(/assets/windowcoverings_state-DT9ccxPn.svg);
            mask-image: url(/assets/windowcoverings_state-DT9ccxPn.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="windowcoverings_tilt_down"] > .icon {
    -webkit-mask-image: url(/assets/windowcoverings_tilt_down-D0aq4cvK.svg);
            mask-image: url(/assets/windowcoverings_tilt_down-D0aq4cvK.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="windowcoverings_tilt_set"] > .icon {
    -webkit-mask-image: url(/assets/windowcoverings_tilt_set-CkipPN0z.svg);
            mask-image: url(/assets/windowcoverings_tilt_set-CkipPN0z.svg);
  }
.hy-device_controls-sensor_capability[data-capability-id="windowcoverings_tilt_up"] > .icon {
    -webkit-mask-image: url(/assets/windowcoverings_tilt_up-CYUfZCp9.svg);
            mask-image: url(/assets/windowcoverings_tilt_up-CYUfZCp9.svg);
  }
  .hy-device_controls-sensor_capability-boolean  > .blink {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    opacity: 0;
  }

.hy-device_controls-sensor_capability-boolean.is-alarm-on  > .blink {
      animation: blink-animation 2s infinite alternate-reverse;
    }

@keyframes blink-animation {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 0.1;
  }
}.hy-device_controls-speaker {
  width: 100%;
  height: 100%;

  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;

  gap: var(--su88);
  padding: var(--su32);
}
.hy-device_controls-speaker  > .artwork {
    --size: var(--su560);

    flex-shrink: 0;

    width: var(--size);
    height: var(--size);

    border-radius: var(--su32);

    background-image: url(/assets/artwork-BZk4MScq.svg);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;

    transition: all 0.3s ease;
  }
.hy-device_controls-speaker  > .controls {
    display: flex;
    flex-direction: column;
    gap: var(--su16);
  }
:is(.hy-device_controls-speaker > .controls)  > .track {
      font-size: var(--su40);
      font-weight: 500;
      margin-bottom: calc(-1 * var(--su6));
    }
:is(.hy-device_controls-speaker > .controls)  > .artist {
      font-size: var(--su32);
      font-weight: 500;
      color: rgba(255, 255, 255, 0.8);
      margin-bottom: var(--su16);
    }
:is(.hy-device_controls-speaker > .controls)  > .hr {
      width: 100%;
      height: var(--su2);
      margin: var(--su16) 0;

      background: linear-gradient(to right,
          rgba(255, 255, 255, 0) 0%,
          rgba(255, 255, 255, 0.1) 20%,
          rgba(255, 255, 255, 0.1) 80%,
          rgba(255, 255, 255, 0) 100%);
    }
:is(.hy-device_controls-speaker > .controls)  > .buttons {
      display: flex;
      flex-direction: row;
      align-items: center;
    }
.buttons-playback:is(:is(.hy-device_controls-speaker > .controls) > .buttons) {
        gap: var(--su32);
      }
.buttons-volume:is(:is(.hy-device_controls-speaker > .controls) > .buttons) {
        margin-top: var(--su16);
        gap: var(--su16);
      }
:is(:is(.hy-device_controls-speaker > .controls) > .buttons)  > .button-play-pause {
        order: 3;
        width: var(--su100);
        height: var(--su100);
      }
:is(:is(.hy-device_controls-speaker > .controls) > .buttons)  > .button-next,:is(:is(.hy-device_controls-speaker > .controls) > .buttons)  > .button-prev {
        width: var(--su80);
        height: var(--su80);
      }
:is(:is(.hy-device_controls-speaker > .controls) > .buttons)  > .button-prev {
        order: 2;
      }
:is(:is(.hy-device_controls-speaker > .controls) > .buttons)  > .button-next {
        order: 4;
      }
:is(:is(.hy-device_controls-speaker > .controls) > .buttons)  > .button-shuffle,:is(:is(.hy-device_controls-speaker > .controls) > .buttons)  > .button-repeat {
        width: var(--su60);
        height: var(--su60);
      }
:is(:is(.hy-device_controls-speaker > .controls) > .buttons)  > .button-shuffle {
        order: 1;
      }
:is(:is(.hy-device_controls-speaker > .controls) > .buttons)  > .button-repeat {
        order: 5;
      }
:is(:is(.hy-device_controls-speaker > .controls) > .buttons)  > .button-volume-down,:is(:is(.hy-device_controls-speaker > .controls) > .buttons)  > .button-volume-up,:is(:is(.hy-device_controls-speaker > .controls) > .buttons)  > .button-volume-mute {
        width: var(--su94);
        height: var(--su62);
      }
:is(:is(.hy-device_controls-speaker > .controls) > .buttons)  > .button-volume-down {}
:is(:is(.hy-device_controls-speaker > .controls) > .buttons)  > .button-volume-up {}
:is(:is(.hy-device_controls-speaker > .controls) > .buttons)  > .button-volume-mute {}
:is(:is(.hy-device_controls-speaker > .controls) > .buttons)  > .separator {
        flex-grow: 1;
      }.hy-device_controls-camera {
  position: relative;

  width: 100%;
  height: 100%;
  padding: var(--su32);
  box-sizing: border-box;

  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.hy-device_controls-camera  > .video {
    height: 100%;

    border-radius: var(--su16);
    overflow: hidden;
    -o-object-fit: cover;
       object-fit: cover;
  }

.hy-device_controls-camera  > .error {
    display: none;

    font-size: var(--su28);
    font-weight: 500;
    text-align: center;
    padding: var(--su16);
  }

.hy-device_controls-camera[data-state="error"]  > .video {
      display: none;
    }

.hy-device_controls-camera[data-state="error"]  > .error {
      display: block;
    }

/* Spinner */

.hy-device_controls-camera[data-state="connecting"]:after {
    --size: var(--su64);

    content: '';
    display: block;
    position: absolute;
    box-sizing: border-box;

    top: calc(50% - var(--size) / 2);
    left: calc(50% - var(--size) / 2);

    width: var(--size);
    height: var(--size);
    border: var(--su8) solid rgba(255, 255, 255, 0.2);
    border-bottom-color: transparent;
    border-radius: 50%;
    animation: spinner-rotation 1s linear infinite;
  }

@keyframes spinner-rotation {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}.hy-device_controls-thermostat {
  width: 100%;
  height: 100%;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--su32);
}
.hy-device_controls-thermostat  > .main {
    position: relative;
    width: var(--su520);
    height: var(--su520);
  }
:is(.hy-device_controls-thermostat > .main)  > .arc {
      position: absolute;
      z-index: 10;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
    }
:is(:is(.hy-device_controls-thermostat > .main) > .arc)  > .arc-target {
        cursor: grab;
      }
:is(:is(:is(.hy-device_controls-thermostat > .main) > .arc) > .arc-target):active {
          cursor: grabbing;
        }
:is(.hy-device_controls-thermostat > .main)  > .button {
      position: absolute;
      z-index: 20;
      top: var(--su400);

      width: var(--su96);
      height: var(--su96);
    }
:is(.hy-device_controls-thermostat > .main)  > .button-down {
      left: var(--su146);
    }
:is(.hy-device_controls-thermostat > .main)  > .button-up {
      right: var(--su146);
    }
:is(.hy-device_controls-thermostat > .main)  > .status {
      position: absolute;
      top: var(--su120);
      left: 0;
      right: 0;

      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      gap: var(--su12);
    }
:is(:is(.hy-device_controls-thermostat > .main) > .status)  > .icon {
        width: var(--su40);
        height: var(--su40);

        background-size: contain;
        background-repeat: no-repeat;
        background-position: center center;
      }
:is(:is(.hy-device_controls-thermostat > .main) > .status)  > .text {
        font-size: var(--su40);
        font-weight: 500;
      }
:is(.hy-device_controls-thermostat > .main)  > .target {
      position: absolute;
      top: var(--su172);
      left: 0;
      right: 0;

      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      gap: var(--su12);
    }
:is(:is(.hy-device_controls-thermostat > .main) > .target)  > .text {
        position: relative;
        font-size: var(--su120);
        font-weight: 600;
        text-align: center;
      }
:is(:is(:is(.hy-device_controls-thermostat > .main) > .target) > .text):after {
          content: '°';
          display: block;
          position: absolute;
          right: calc(-1 * var(--su42));
          top: 0;

          font-size: var(--su100);
        }
:is(.hy-device_controls-thermostat > .main)  > .measurement {
      position: absolute;
      top: var(--su310);
      left: 0;
      right: 0;

      font-size: var(--su28);
      font-weight: 500;
      text-align: center;
    }
.hy-device_controls-thermostat  > .mode {
    background-color: rgba(255, 255, 255, 0.1);
    border: var(--su1) solid rgba(255, 255, 255, 0.1);
    border-radius: 9999px;

    box-sizing: border-box;
    width: var(--su400);
    height: var(--su96);
    padding: var(--su16) var(--su24);

    display: grid;
    grid-template-areas: "icon title chevron"
      "icon value chevron";
    align-items: center;
    grid-template-columns: auto 1fr auto;
    -moz-column-gap: var(--su24);
         column-gap: var(--su24);
  }
:is(.hy-device_controls-thermostat > .mode)  > .icon {
      grid-area: icon;

      width: var(--su42);
      height: var(--su42);

      background-color: white;

      mask-image: url(/assets/mode-unknown-BsvgiPzR.svg);
      -webkit-mask-image: url(/assets/mode-unknown-BsvgiPzR.svg);
      mask-repeat: no-repeat;
      -webkit-mask-repeat: no-repeat;
      mask-size: contain;
      -webkit-mask-size: contain;
      mask-position: center center;
      -webkit-mask-position: center center;
    }
:is(.hy-device_controls-thermostat > .mode)  > .title {
      grid-area: title;

      font-size: var(--su24);
      font-weight: 400;
      color: rgba(255, 255, 255, 0.6);
    }
:is(.hy-device_controls-thermostat > .mode)  > .value {
      grid-area: value;

      font-size: var(--su28);
      font-weight: 500;
      color: white;
    }
:is(.hy-device_controls-thermostat > .mode)  > .chevron {
      grid-area: chevron;

      width: var(--su30);
      height: var(--su30);

      background: url(/assets/chevron-CHHapItm.svg) no-repeat center center;
      background-size: contain;

      opacity: 0.4;
    }
.hy-device_controls-thermostat {

  --color-heating: #FF8400;
  --color-cooling: #3880F2;
  --color-off: #757682;
}
.hy-device_controls-thermostat[data-state="active-heating"] > .main > .status > .icon {
    background-image: url(/assets/active-heating-BBATJv0y.svg);
  }
.hy-device_controls-thermostat[data-state="active-cooling"] > .main > .status > .icon {
    background-image: url(/assets/active-cooling-B2VdxDM0.svg);
  }
.hy-device_controls-thermostat[data-state="passive-heating"] > .main > .status > .icon {
    background-image: url(/assets/passive-heating-CTQ4fUqN.svg);
  }
.hy-device_controls-thermostat[data-state="passive-cooling"] > .main > .status > .icon {
    background-image: url(/assets/passive-cooling-BF6cstvR.svg);
  }
.hy-device_controls-thermostat[data-state="active-heating"] > .main > .status > .text,.hy-device_controls-thermostat[data-state="active-heating"] > .main > .target > .text {
    color: var(--color-heating);
  }
.hy-device_controls-thermostat[data-state="active-cooling"] > .main > .status > .text,.hy-device_controls-thermostat[data-state="active-cooling"] > .main > .target > .text {
    color: var(--color-cooling);
  }
.hy-device_controls-thermostat[data-state="off"] > .main > .status > .text,.hy-device_controls-thermostat[data-state="passive-heating"] > .main > .status > .text,.hy-device_controls-thermostat[data-state="passive-cooling"] > .main > .status > .text {
    color: rgba(255, 255, 255, 0.4);
  }
.hy-device_controls-thermostat[data-state="off"] > .main > .status > .icon {
    display: none;
  }
.hy-device_controls-thermostat[data-state="active-heating"] > .main > .arc > .arc-progress {
    stroke: #EF8B34;
  }
.hy-device_controls-thermostat[data-state="active-heating"] > .main > .arc > .arc-progress {
    stroke: var(--color-heating);
  }
.hy-device_controls-thermostat[data-state="active-heating"] > .main > .arc > .arc-target {
    fill: var(--color-heating);
  }
.hy-device_controls-thermostat[data-state="active-cooling"] > .main > .arc > .arc-progress {
    stroke: var(--color-cooling);
  }
.hy-device_controls-thermostat[data-state="active-cooling"] > .main > .arc > .arc-target {
    fill: var(--color-cooling);
  }
.hy-device_controls-thermostat[data-state="passive-heating"] > .main > .arc > .arc-progress,.hy-device_controls-thermostat[data-state="passive-cooling"] > .main > .arc > .arc-progress {
    stroke: var(--color-off);
  }
.hy-device_controls-thermostat[data-state="passive-heating"] > .main > .arc > .arc-target,.hy-device_controls-thermostat[data-state="passive-cooling"] > .main > .arc > .arc-target,.hy-device_controls-thermostat[data-state="off"] > .main > .arc > .arc-target {
    fill: var(--color-off);
  }
.hy-device_controls-thermostat[data-mode="auto"] > .mode > .icon {
    mask-image: url(/assets/mode-auto-dJ8K47kn.svg);
    -webkit-mask-image: url(/assets/mode-auto-dJ8K47kn.svg);
  }
.hy-device_controls-thermostat[data-mode="heat"] > .mode > .icon {
    mask-image: url(/assets/mode-heat-_Cye-3-U.svg);
    -webkit-mask-image: url(/assets/mode-heat-_Cye-3-U.svg);
  }
.hy-device_controls-thermostat[data-mode="cool"] > .mode > .icon {
    mask-image: url(/assets/mode-cool-D5wgcZln.svg);
    -webkit-mask-image: url(/assets/mode-cool-D5wgcZln.svg);
  }
.hy-device_controls-thermostat[data-mode="off"] > .mode > .icon {
    mask-image: url(/assets/mode-off-DJWywG8m.svg);
    -webkit-mask-image: url(/assets/mode-off-DJWywG8m.svg);
  }
  .hy-device_controls-thermostat_mode-selector  > .overlay {
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
  }
.hy-device_controls-thermostat_mode-selector  > .modes {
    position: fixed;
    z-index: 1001;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--su24);
  }
:is(.hy-device_controls-thermostat_mode-selector > .modes)  > .mode {
      box-sizing: border-box;
      width: var(--su600);
      height: var(--su96);
      padding: var(--su24);

      display: flex;
      flex-direction: row;
      align-items: center;
      gap: var(--su20);

      background-color: rgba(255, 255, 255, 0.1);
      border: var(--su1) solid rgba(255, 255, 255, 0.1);
      border-radius: 9999px;
    }
:is(:is(.hy-device_controls-thermostat_mode-selector > .modes) > .mode)  > .icon {
        width: var(--su42);
        height: var(--su42);

        background-color: white;

        mask-image: url(/assets/mode-unknown-BsvgiPzR.svg);
        -webkit-mask-image: url(/assets/mode-unknown-BsvgiPzR.svg);

        mask-repeat: no-repeat;
        -webkit-mask-repeat: no-repeat;

        mask-size: contain;
        -webkit-mask-size: contain;

        mask-position: center center;
        -webkit-mask-position: center center;
      }
:is(:is(.hy-device_controls-thermostat_mode-selector > .modes) > .mode)  > .text {
        font-size: var(--su28);
        font-weight: 500;
      }
[data-mode-id="auto"]:is(:is(.hy-device_controls-thermostat_mode-selector > .modes) > .mode) > .icon {
        mask-image: url(/assets/mode-auto-dJ8K47kn.svg);
        -webkit-mask-image: url(/assets/mode-auto-dJ8K47kn.svg);
      }
[data-mode-id="heat"]:is(:is(.hy-device_controls-thermostat_mode-selector > .modes) > .mode) > .icon {
        mask-image: url(/assets/mode-heat-_Cye-3-U.svg);
        -webkit-mask-image: url(/assets/mode-heat-_Cye-3-U.svg);
      }
[data-mode-id="cool"]:is(:is(.hy-device_controls-thermostat_mode-selector > .modes) > .mode) > .icon {
        mask-image: url(/assets/mode-cool-D5wgcZln.svg);
        -webkit-mask-image: url(/assets/mode-cool-D5wgcZln.svg);
      }
[data-mode-id="off"]:is(:is(.hy-device_controls-thermostat_mode-selector > .modes) > .mode) > .icon {
        mask-image: url(/assets/mode-off-DJWywG8m.svg);
        -webkit-mask-image: url(/assets/mode-off-DJWywG8m.svg);
      }
.is-active:is(:is(.hy-device_controls-thermostat_mode-selector > .modes) > .mode) {
        background-color: white;
        background-image: url(/assets/selected-CWx_SUdS.svg);
        background-size: var(--su36) var(--su36);
        background-repeat: no-repeat;
        background-position: right var(--su24) center;
      }
.is-active:is(:is(.hy-device_controls-thermostat_mode-selector > .modes) > .mode)  > .icon {
          background-color: black;
        }
.is-active:is(:is(.hy-device_controls-thermostat_mode-selector > .modes) > .mode)  > .text {
          color: black;
        }.hy-device_controls-toggle {
  width: 100%;
  height: 100%;

  display: flex;
  align-items: center;
  justify-content: center;
}
.hy-device_controls-toggle[data-getable="true"] {
    flex-direction: column;
  }
.hy-device_controls-toggle[data-getable="true"]  > .toggle {
      position: relative;

      width: var(--su262);
      height: var(--su262);
      box-sizing: border-box;

      border: var(--su1) solid rgba(255, 255, 255, 0.1);
      background-color: rgba(255, 255, 255, 0.05);
      border-radius: 9999px;

      transition: background-color 0.1s;

      display: flex;
      align-items: center;
      justify-content: center;
    }
:is(.hy-device_controls-toggle[data-getable="true"] > .toggle):hover {
        cursor: pointer;
      }
:is(.hy-device_controls-toggle[data-getable="true"] > .toggle):before {
        content: '';
        display: block;

        position: absolute;
        z-index: 1;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);

        width: var(--su242);
        height: var(--su242);
        border-radius: 9999px;
      }
.is-on:is(.hy-device_controls-toggle[data-getable="true"] > .toggle):before {
        background-color: white;
      }
.is-on:is(.hy-device_controls-toggle[data-getable="true"] > .toggle):after {
        background-color: #303031;
      }
:is(.hy-device_controls-toggle[data-getable="true"] > .toggle):after {
        content: '';
        display: block;

        position: absolute;
        z-index: 2;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);

        width: var(--su80);
        height: var(--su80);

        background-color: white;
        transition: background-color 0.1s;

        mask-image: url(/assets/onoff-BP2f31Os.svg);
        -webkit-mask-image: url(/assets/onoff-BP2f31Os.svg);

        mask-position: center center;
        -webkit-mask-position: center center;

        mask-repeat: no-repeat;
        -webkit-mask-repeat: no-repeat;

        mask-size: contain;
        -webkit-mask-size: contain;
      }
.hy-device_controls-toggle[data-getable="false"] {
    flex-direction: row;
    gap: var(--su128);
  }
.hy-device_controls-toggle[data-getable="false"]  > .toggle-on,.hy-device_controls-toggle[data-getable="false"]  > .toggle-off {
      --size: var(--su128);

      width: var(--size);
      height: var(--size);
    }
:is(.hy-device_controls-toggle[data-getable="false"] > .toggle-on,.hy-device_controls-toggle[data-getable="false"] > .toggle-off)  > .icon {
        --size: var(--su48);

        width: var(--size);
        height: var(--size);
      }.hy-device_controls-windowcoverings {
  width: 100%;
  height: 100%;
}
:is(.hy-device_controls-windowcoverings > .buttons)  > .button {
      width: var(--su134);
      height: var(--su134);
    }
:is(.hy-device_controls-windowcoverings > .buttons)  > .button-state-up {
      grid-area: button-state-up;
    }
:is(.hy-device_controls-windowcoverings > .buttons)  > .button-state-idle {
      grid-area: button-state-idle;
    }
:is(.hy-device_controls-windowcoverings > .buttons)  > .button-state-down {
      grid-area: button-state-down;
    }
:is(.hy-device_controls-windowcoverings > .buttons)  > .button-tilt-up {
      grid-area: button-tilt-up;
    }
:is(.hy-device_controls-windowcoverings > .buttons)  > .button-tilt-down {
      grid-area: button-tilt-down;
    }
.hy-device_controls-windowcoverings  > .hr {
    width: 100%;
    height: var(--su2);
    margin: var(--su16) 0;

    background: linear-gradient(to right,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.1) 20%,
        rgba(255, 255, 255, 0.1) 80%,
        rgba(255, 255, 255, 0) 100%);
  }
.hy-device_controls-windowcoverings[data-mode="ternary"] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
.hy-device_controls-windowcoverings[data-mode="ternary"]  > .buttons {
      display: grid;
      grid-template-areas:
        ". button-state-up ."
        "button-tilt-down button-state-idle button-tilt-up"
        ". button-state-down .";
      gap: var(--su24);
      justify-content: center;
      align-items: center;
    }
.hy-device_controls-windowcoverings[data-mode="slider"] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--su48);
  }
.hy-device_controls-windowcoverings[data-mode="slider"]  > .status {
      font-size: var(--su28);
      font-weight: 500;
      color: rgba(255, 255, 255, 0.8);
    }
.hy-device_controls-windowcoverings[data-mode="slider"]  > .slider {
      --height: var(--su96);
      width: var(--su512);
      height: var(--su96);
      box-sizing: border-box;
      padding: var(--su8);

      background-color: rgba(255, 255, 255, 0.05);
      border: var(--su1) solid rgba(255, 255, 255, 0.1);
      border-radius: var(--su48);
    }
:is(.hy-device_controls-windowcoverings[data-mode="slider"] > .slider)  > .track {
        width: 100%;
        height: var(--su80);
        background-color: rgba(255, 255, 255, 0.1);
        border-radius: 9999px;
      }
:is(:is(.hy-device_controls-windowcoverings[data-mode="slider"] > .slider) > .track)  > .thumb {
          width: 50%;
          min-width: var(--su80);
          height: var(--su80);
          border-radius: 9999px;

          background-color: rgba(255, 255, 255, 1.0);
          background-image: url(./images/windowcoverings-set.svg);
          background-size: var(--su28) var(--su28);
          background-position: center right var(--su25);
          background-repeat: no-repeat;
        }
.hy-device_controls-windowcoverings[data-mode="slider"]  > .buttons {
      display: flex;
      flex-direction: row;
      gap: var(--su136);
    }.hy-device_status-activity {
  --color: #3880F2;
}

.hy-device_status-activity  > .icon {
    position: relative;
    width: var(--su20);
  }

:is(.hy-device_status-activity > .icon)  > .inner,:is(.hy-device_status-activity > .icon)  > .outer {
      --size: var(--su12);
      position: absolute;
      left: calc(50% - var(--size) / 2);
      top: calc(50% - var(--size) / 2);

      box-sizing: border-box;
      width: var(--size);
      height: var(--size);

      border-radius: 100%;
    }

:is(.hy-device_status-activity > .icon)  > .outer {
      border: var(--su2) solid var(--color);
      animation: activity 2s ease-out infinite;
    }

:is(.hy-device_status-activity > .icon)  > .inner {
      background-color: var(--color);
    }

.hy-device_status-activity:not(.is-active) > .icon {
    display: none;
  }

.hy-device_status-activity.is-active > .text {
    color: var(--color);
  }

@keyframes activity {
  0% {
    transform: scale(1);
    opacity: 0.75;
  }

  100% {
    transform: scale(3);
    opacity: 0;
  }
}.hy-device_status {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--su10);

  width: 100%;
  height: var(--su30);
}
.hy-device_status  > .icon {
    width: var(--su30);
    height: var(--su30);
  }
.hy-device_status  > .text {
    font-size: var(--su24);
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }.hy-device_status-alarm {
  --color: #EF8A34;
}

.hy-device_status-alarm  > .icon {
    position: relative;
    width: var(--su20);
  }

:is(.hy-device_status-alarm > .icon)  > .inner,:is(.hy-device_status-alarm > .icon)  > .outer {
      --size: var(--su12);
      position: absolute;
      left: calc(50% - var(--size) / 2);
      top: calc(50% - var(--size) / 2);

      box-sizing: border-box;
      width: var(--size);
      height: var(--size);

      border-radius: 100%;
    }

:is(.hy-device_status-alarm > .icon)  > .outer {
      border: var(--su2) solid var(--color);
      animation: alarm 2s ease-out infinite;
    }

:is(.hy-device_status-alarm > .icon)  > .inner {
      background-color: var(--color);
    }

.hy-device_status-alarm:not(.is-active) > .icon {
    display: none;
  }

.hy-device_status-alarm.is-active > .text {
    color: var(--color);
  }

@keyframes alarm {
  0% {
    transform: scale(1);
    opacity: 0.75;
  }

  100% {
    transform: scale(3);
    opacity: 0;
  }
}
  .hy-device_status-battery  > .icon {
    width: var(--su30);
    height: var(--su30);

    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
  }
.hy-device_status-battery[data-state="100"] > .icon {
    background-image: url(/assets/battery-100-BBZ_6wbL.svg);
  }
.hy-device_status-battery[data-state="80"] > .icon {
    background-image: url(/assets/battery-80-DCliCxdI.svg);
  }
.hy-device_status-battery[data-state="40"] > .icon {
    background-image: url(/assets/battery-40-BAbqHIjN.svg);
  }
.hy-device_status-battery[data-state="20"] > .icon {
    background-image: url(/assets/battery-20-teIxK1Cw.svg);
  }
.hy-device_status-battery[data-state="20"] > .text {
    color: #ff0000;
  }
  .hy-device_status-light  > .icon {
    position: relative;
  }
:is(.hy-device_status-light > .icon)  > .outer {
      position: absolute;
      left: var(--su3);
      top: var(--su3);

      width: var(--su24);
      height: var(--su24);
      border-radius: 100%;

      opacity: 0.2;
    }
:is(.hy-device_status-light > .icon)  > .inner {
      position: absolute;
      left: var(--su7);
      top: var(--su7);

      width: var(--su16);
      height: var(--su16);
      border-radius: 100%;
    }
  .hy-device_status-lock  > .icon {
    width: var(--su20);
    -webkit-mask-image: none;
            mask-image: none;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
  }
.hy-device_status-lock:not(.is-locked) > .icon {
    background-image: url(/assets/unlocked-Bo4cS6Mt.svg);
  }
.hy-device_status-lock.is-locked > .icon {
    background-image: url(/assets/locked-BSJFD0r7.svg);
  }
  .hy-device_status-premium  > .icon {
    width: var(--su24);
    height: var(--su24);

    mask-image: none;
    -webkit-mask-image: none;

    background: url(/assets/premium-CBxaTkLl.svg) no-repeat center center;
    background-size: contain;
  }
.hy-device_status-premium  > .text {
    color: #E1457B;
  }
  .hy-device_status-socket  > .text > .power {
    color: #3F7EF4;
  }
.hy-device_status-socket.has-power.has-onoff > .text > .power:after {
    content: ' • ';
    color: rgba(255, 255, 255, 0.7);
  }
.hy-device_status-socket  > .icon {
    width: var(--su12);
    height: var(--su28);

    mask-image: url(/assets/electricity-D8lVOkmn.svg);
    -webkit-mask-image: url(/assets/electricity-D8lVOkmn.svg);
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center center;
    -webkit-mask-position: center center;

    background-color: #3F7EF4;
  }
.hy-device_status-socket.is-exporting > .icon {
    background-color: #6AC42E;
  }
.hy-device_status-socket.is-exporting > .text > .power {
    color: #6AC42E;
  }
.hy-device_status-socket:not(.has-onoff)  > .text > .state {
      display: none;
    }
.hy-device_status-socket:not(.has-power)  > .icon,.hy-device_status-socket:not(.has-power)  > .text > .power {
      display: none;
    }.hy-span {
  display: inline;
}.hy-device_status-speaker {
  --color: #A369F8;
  --speed: 0.6s;
}

.hy-device_status-speaker  > .icon {
    display: flex;
    align-items: center;
    gap: var(--su2);
    width: var(--su23);
    height: var(--su22);
  }

:is(.hy-device_status-speaker > .icon)  > .bar {
      width: var(--su3);
      height: var(--su22);
      border-radius: var(--su3);
      background-color: var(--color);

      transition: background-color 0.1s, height 0.1s;
      animation: hy-device-small-speaker-bar-pulse 1s ease-in-out infinite;
    }

:is(:is(.hy-device_status-speaker > .icon) > .bar):nth-child(1) {
        animation: bar1 var(--speed) ease-in-out infinite alternate;
        animation-delay: 0s;
      }

:is(:is(.hy-device_status-speaker > .icon) > .bar):nth-child(2) {
        animation: bar2 var(--speed) ease-in-out infinite alternate;
        animation-delay: 0.15s;
      }

:is(:is(.hy-device_status-speaker > .icon) > .bar):nth-child(3) {
        animation: bar3 var(--speed) ease-in-out infinite alternate;
        animation-delay: 0.3s;
      }

:is(:is(.hy-device_status-speaker > .icon) > .bar):nth-child(4) {
        animation: bar4 var(--speed) ease-in-out infinite alternate;
        animation-delay: 0.45s;
      }

:is(:is(.hy-device_status-speaker > .icon) > .bar):nth-child(5) {
        animation: bar5 var(--speed) ease-in-out infinite alternate;
        animation-delay: 0.6s;
      }

.hy-device_status-speaker:not(.is-playing) > .icon {
    display: none;
  }

.hy-device_status-speaker.is-playing > .text {
    color: var(--color);
  }

@keyframes bar1 {
  0% {
    height: var(--su6);
  }

  100% {
    height: var(--su18);
  }
}

@keyframes bar2 {
  0% {
    height: var(--su16);
  }

  100% {
    height: var(--su24);
  }
}

@keyframes bar3 {
  0% {
    height: var(--su6);
  }

  100% {
    height: var(--su22);
  }
}

@keyframes bar4 {
  0% {
    height: var(--su12);
  }

  100% {
    height: var(--su20);
  }
}

@keyframes bar5 {
  0% {
    height: var(--su8);
  }

  100% {
    height: var(--su16);
  }
}
  .hy-device_status-thermostat  > .icon {
    width: var(--su24);
    height: var(--su24);
    -webkit-mask-image: none;
            mask-image: none;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
  }
.hy-device_status-thermostat[data-state="active-heating"] > .icon {
    background-image: url(/assets/active-heating-BBATJv0y.svg);
  }
.hy-device_status-thermostat[data-state="active-cooling"] > .icon {
    background-image: url(/assets/active-cooling-B2VdxDM0.svg);
  }
.hy-device_status-thermostat[data-state="passive-heating"] > .icon {
    background-image: url(/assets/passive-heating-B4BG7gdc.svg);
  }
.hy-device_status-thermostat[data-state="passive-cooling"] > .icon {
    background-image: url(/assets/passive-cooling-YRzw8Akl.svg);
  }
.hy-device_status-thermostat[data-state="active-heating"] > .text > .target {
    color: #EF8B34;
  }
.hy-device_status-thermostat[data-state="active-cooling"] > .text > .target {
    color: #3880F2;
  }
.hy-device_status-thermostat[data-state="passive-heating"] > .text > .target,.hy-device_status-thermostat[data-state="passive-cooling"] > .text > .target {
    color: rgba(255, 255, 255, 0.4);
  }
.hy-device_status-thermostat  > .text > .target + .measure:not(:empty):before {
    content: '';
    display: inline-block;
    vertical-align: middle;

    margin: 0 var(--su10);
    width: var(--su2);
    height: var(--su20);
    background-color: rgba(255, 255, 255, 0.5);
  }
.hy-device_status-thermostat[data-state="off"] > .icon {
    display: none;
  }
  .hy-device_status-unavailable  > .icon {
    background-image: url(/assets/unavailable-DF1y3hU8.svg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
  }
.hy-device_status-unavailable  > .text {
    color: #ff0000;
  }.hy-device-small {
  position: relative;
  flex-shrink: 0;
  flex-grow: 0;

  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  overflow: hidden;

  width: var(--su228);
  height: var(--su228);
  padding: var(--su16);
  border-radius: var(--su24);

  background-color: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0px 0px 0px var(--su1) rgba(255, 255, 255, 0.1);
}
.hy-device-small:hover {
    cursor: pointer;
  }
.hy-device-small  > .icon {
    display: block;

    width: var(--su72);
    height: var(--su72);
  }
:is(.hy-device-small > .icon):not(.is-missing) {
      background-color: white;
      -webkit-mask-position: center center;
      mask-position: center center;
      -webkit-mask-size: contain;
      mask-size: contain;
      -webkit-mask-repeat: no-repeat;
      mask-repeat: no-repeat;
    }
.is-missing:is(.hy-device-small > .icon) {
      border: 3px dashed #999;
      border-radius: 20%;
    }
.hy-device-small  > .grow {
    flex-grow: 1;
  }
.hy-device-small  > .name {
    display: block;
    display: -webkit-box;

    overflow: hidden;
    text-overflow: ellipsis;

    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;

    font-size: var(--su28);
    font-weight: 500;
    line-height: var(--su32);
  }
.hy-device-small  > .status {
    margin-top: var(--su4);
  }
.hy-device-small.is-locked:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;

    pointer-events: none;
    background: url(/assets/premium-DRtS8scT.svg) no-repeat center center;
    background-size: contain;
  }.hy-device-large {
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.hy-device-large  > .backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(10px);
  }
.hy-device-large  > .popup {
    --width: calc(var(--su100) * 13);
    --height: var(--su920);

    position: absolute;
    left: calc(50% - var(--width) / 2);
    top: calc(50% - var(--height) / 2);

    width: var(--width);
    height: var(--height);
    box-sizing: border-box;

    box-shadow: inset 0px 0px 0px var(--su1) rgba(255, 255, 255, 0.1);
    border-radius: var(--su20);
    background-image: radial-gradient(circle, rgba(29, 18, 37, 1) 0%, rgba(17, 18, 24, 1) 100%);

    display: flex;
    flex-direction: column;

    overflow: hidden;
  }
:is(.hy-device-large > .popup)  > .inner {
      flex-grow: 1;
      min-height: 0;
      overflow: hidden;

      display: flex;
      flex-direction: column;

      background-repeat: no-repeat;
      background-size: cover;
      background-position: center center;

      transition: background-image 1s ease;
    }
:is(:is(.hy-device-large > .popup) > .inner)  > .header {
        flex-shrink: 0;
        flex-grow: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);

        padding: var(--su28) var(--su36);

        display: grid;
        grid-template-areas:
          "icon name close"
          "icon status close";
        grid-template-columns: auto 1fr auto;
        -moz-column-gap: var(--su24);
             column-gap: var(--su24);
        row-gap: var(--su6);
      }
:is(:is(:is(.hy-device-large > .popup) > .inner) > .header):not(.has-status) {
          grid-template-areas:
            "icon name close"
            "icon name close";
        }
:is(:is(:is(.hy-device-large > .popup) > .inner) > .header):not(.has-status)  > .status {
            display: none;
          }
:is(:is(:is(.hy-device-large > .popup) > .inner) > .header)  > .icon {
          grid-area: icon;
          align-self: center;

          mask-position: center center;
          -webkit-mask-position: center center;

          mask-repeat: no-repeat;
          -webkit-mask-repeat: no-repeat;

          mask-size: contain;
          -webkit-mask-size: contain;

          width: var(--su52);
          height: var(--su52);

          background-color: white;
        }
:is(:is(:is(.hy-device-large > .popup) > .inner) > .header)  > .name {
          align-self: center;
          grid-area: name;
          font-size: var(--su32);
          font-weight: 500;

          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
:is(:is(:is(.hy-device-large > .popup) > .inner) > .header)  > .status {
          grid-area: status;
          font-size: var(--su28);
          font-weight: 400;
          color: rgba(255, 255, 255, 0.8);
        }
:is(:is(:is(.hy-device-large > .popup) > .inner) > .header)  > .close {
          grid-area: close;
          align-self: center;

          width: var(--su56);
          height: var(--su56);
        }
:is(:is(.hy-device-large > .popup) > .inner)  > .controls {
        flex-grow: 1;
        min-height: 0;
      }.hy-mood-small {
  flex-shrink: 0;
  flex-grow: 0;

  display: grid;
  grid-template-areas: "icon name"
    "icon description";
  grid-template-columns: auto 1fr;
  align-items: center;

  overflow: hidden;

  box-sizing: border-box;
  width: var(--su420);
  height: var(--su100);
  padding: var(--su18);
  border-radius: var(--su24);

  background-color: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0px 0px 0px var(--su1) rgba(255, 255, 255, 0.1);
}

.hy-mood-small:hover {
    cursor: pointer;
  }

.hy-mood-small  > .icon {
    --size: var(--su60);
    grid-area: icon;

    position: relative;
    width: var(--size);
    height: var(--size);

    margin-right: var(--su20);
  }

:is(.hy-mood-small > .icon)  > .foreground,:is(.hy-mood-small > .icon)  > .background {
      position: absolute;
      width: 100%;
      height: 100%;
      border-radius: 100%;
    }

:is(.hy-mood-small > .icon)  > .foreground {
      z-index: 2;
    }

:is(.hy-mood-small > .icon)  > .background {
      z-index: 1;
    }

.hy-mood-small  > .name {
    grid-area: name;

    font-size: var(--su28);
    font-weight: 500;
    margin-bottom: var(--su3);

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    padding-bottom: var(--su6);
  }

.hy-mood-small  > .description {
    grid-area: description;

    font-size: var(--su24);
    font-weight: 500;
    color: rgba(255, 255, 255, 0.6);

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

.hy-mood-small.is-playing  > .icon > .background {
      animation: mood-scale 1s ease-out;
    }

@keyframes mood-scale {
  0% {
    transform: scale(1);
  }

  99.9% {
    transform: scale(15);
    opacity: 0;
  }

  100% {
    transform: scale(1);
  }
}
  .hy-homey_page-devices  > .zones {
    display: flex;
    flex-direction: column;
    gap: var(--su60);
  }
:is(.hy-homey_page-devices > .zones) .zone {
      display: flex;
      flex-direction: column;
    }
:is(:is(.hy-homey_page-devices > .zones) .zone):not(.is-not-empty) {
        display: none;
      }
:is(:is(.hy-homey_page-devices > .zones) .zone):not(.has-devices-or-moods) > .header {
        display: none;
      }
:is(:is(.hy-homey_page-devices > .zones) .zone)  > .items {
        display: flex;
        flex-direction: column;
      }
:is(:is(:is(.hy-homey_page-devices > .zones) .zone) > .items)  > .moods {
          display: flex;
          flex-wrap: wrap;
          gap: var(--su30);
        }
:is(:is(:is(.hy-homey_page-devices > .zones) .zone) > .items)  > .devices {
          display: flex;
          flex-wrap: wrap;
          gap: var(--su30);
        }
:is(:is(:is(.hy-homey_page-devices > .zones) .zone) > .items)  > .zones {
          display: flex;
          flex-direction: column;
          gap: var(--su30);
        }
.hy-homey_page-devices  > .empty {
    height: var(--su800);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    /* Icon */
  }
:is(.hy-homey_page-devices > .empty):before {
      display: block;
      content: '';
      width: var(--su75);
      height: var(--su75);

      background: url(/assets/devices-BKcZdAxY.svg) no-repeat center center;
      background-size: contain;

      margin-bottom: var(--su20);
    }
:is(.hy-homey_page-devices > .empty)  > .title {
      font-size: var(--su40);
      font-weight: 600;
      margin-bottom: var(--su10);
    }
:is(.hy-homey_page-devices > .empty)  > .subtitle {
      font-size: var(--su28);
      font-weight: 400;
      color: rgba(255, 255, 255, 0.6);
    }
.hy-homey_page-devices.is-empty > .empty {
    display: flex;
  }
.hy-homey_page-devices:not(.is-empty) > .empty {
    display: none;
  }
  .hy-homey_page-flows  > .folders {
    display: flex;
    flex-direction: column;
    gap: var(--su60);
  }
[data-count="0"]:is(:is(.hy-homey_page-flows > .folders) .folder) > .header {
        display: none;
      }
:is(:is(.hy-homey_page-flows > .folders) .folder)  > .items {
        display: flex;
        flex-direction: column;
      }
:is(:is(:is(.hy-homey_page-flows > .folders) .folder) > .items)  > .folders {
          display: flex;
          flex-direction: column;
          gap: var(--su30);
        }
:is(:is(:is(.hy-homey_page-flows > .folders) .folder) > .items)  > .flows {
          display: flex;
          flex-wrap: wrap;
          gap: var(--su30);
        }
[data-count="0"]:is(:is(:is(:is(.hy-homey_page-flows > .folders) .folder) > .items) > .flows) {
            display: none;
          }
.hy-homey_page-flows  > .empty {
    height: var(--su800);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    /* Icon */
  }
:is(.hy-homey_page-flows > .empty):before {
      display: block;
      content: '';
      width: var(--su75);
      height: var(--su75);

      background: url(/assets/flows-NSxGUbh9.svg) no-repeat center center;
      background-size: contain;

      margin-bottom: var(--su20);
    }
:is(.hy-homey_page-flows > .empty)  > .title {
      font-size: var(--su40);
      font-weight: 600;
      margin-bottom: var(--su10);
    }
:is(.hy-homey_page-flows > .empty)  > .subtitle {
      font-size: var(--su28);
      font-weight: 400;
      color: rgba(255, 255, 255, 0.6);
    }
.hy-homey_page-flows.is-empty > .empty {
    display: flex;
  }
.hy-homey_page-flows:not(.is-empty) > .empty {
    display: none;
  }.hy-focus {
  display: none;

  position: fixed;
  z-index: 10000;
  top: 0;
  left: 0;

  box-sizing: border-box;

  border: var(--su4) solid white;
  border-radius: 0;

  pointer-events: none;
}
.hy-focus.is-visible {
    display: block;
  }
.hy-focus:not(.is-enabled) {
    visibility: hidden;
  }.hy-error {
  display: block;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
.hy-error  > .error {
    height: var(--su800);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
:is(.hy-error > .error)  > .title {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      font-size: var(--su40);
      font-weight: 700;

      margin-bottom: var(--su10);
    }
:is(.hy-error > .error)  > .subtitle {
      font-size: var(--su28);
      color: rgba(255, 255, 255, 0.6);

      margin-bottom: var(--su70);
    }
:is(.hy-error > .error)  > .button {
      min-width: var(--su500);
    }