@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;
  }
.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;
    }
.hy-login >.instructions >.title {
      grid-area: title;

      align-self: flex-end;

      font-size: var(--su60);
      font-weight: 700;
    }
.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;
  }
.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);
    }
.hy-login >.qrcode >.image-wrap >.image {
        --size: var(--su500);
        display: block;
        width: var(--size);
        height: var(--size);
        border-radius: var(--su15);

        background-size: contain;
      }
.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);
    }
.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;
      }
.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);
  }
.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);
    }
.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);
    }
.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);
  }
.hy-input-button.is-active >.icon, .hy-input-button.is-loading >.icon, .hy-input-button.is-mousedown >.icon {
      background-color: black;
    }
.hy-input-button.is-active >.text, .hy-input-button.is-loading >.text, .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);
  }
.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);
    }
.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;
      }
.hy-homey_section >.header >.icon >.image {
        height: var(--su42);
        width: var(--su42);

        background-size: contain;
        background-position: center center;
        background-repeat: no-repeat;
      }
.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;
  }
.hy-flow-small >.icon >object {
      position: absolute;
      top: 0;
      left: 0;
      visibility: hidden;
    }
.hy-flow-small >.icon[data-phase="start"]>object[data-phase="start"],
    .hy-flow-small >.icon[data-phase="loading"]>object[data-phase="loading"],
    .hy-flow-small >.icon[data-phase="success"]>object[data-phase="success"],
    .hy-flow-small >.icon[data-phase="error"]>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;
  }
.hy-device_controls-light >.toggle:hover {
      cursor: pointer;
    }
.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;
    }
.hy-device_controls-light >.toggle.is-on:before {
      background-color: white;
    }
.hy-device_controls-light >.toggle.is-on:after {
      background-color: #303031;
    }
.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);
  }
.hy-device_controls-light >.colors >.row {
      display: flex;
      gap: var(--su16);
    }
.hy-device_controls-light >.colors >.row >.preset {
        position: relative;
        width: var(--su48);
        height: var(--su48);
        border-radius: 100%;
      }
.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%;
        }
.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;
  }
.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;
  }
.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;
    }
.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);
  }
.hy-device_controls-speaker >.controls >.track {
      font-size: var(--su40);
      font-weight: 500;
      margin-bottom: calc(-1 * var(--su6));
    }
.hy-device_controls-speaker >.controls >.artist {
      font-size: var(--su32);
      font-weight: 500;
      color: rgba(255, 255, 255, 0.8);
      margin-bottom: var(--su16);
    }
.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%);
    }
.hy-device_controls-speaker >.controls >.buttons {
      display: flex;
      flex-direction: row;
      align-items: center;
    }
.hy-device_controls-speaker >.controls >.buttons.buttons-playback {
        gap: var(--su32);
      }
.hy-device_controls-speaker >.controls >.buttons.buttons-volume {
        margin-top: var(--su16);
        gap: var(--su16);
      }
.hy-device_controls-speaker >.controls >.buttons >.button-play-pause {
        order: 3;
        width: var(--su100);
        height: var(--su100);
      }
.hy-device_controls-speaker >.controls >.buttons >.button-next,
      .hy-device_controls-speaker >.controls >.buttons >.button-prev {
        width: var(--su80);
        height: var(--su80);
      }
.hy-device_controls-speaker >.controls >.buttons >.button-prev {
        order: 2;
      }
.hy-device_controls-speaker >.controls >.buttons >.button-next {
        order: 4;
      }
.hy-device_controls-speaker >.controls >.buttons >.button-shuffle,
      .hy-device_controls-speaker >.controls >.buttons >.button-repeat {
        width: var(--su60);
        height: var(--su60);
      }
.hy-device_controls-speaker >.controls >.buttons >.button-shuffle {
        order: 1;
      }
.hy-device_controls-speaker >.controls >.buttons >.button-repeat {
        order: 5;
      }
.hy-device_controls-speaker >.controls >.buttons >.button-volume-down,
      .hy-device_controls-speaker >.controls >.buttons >.button-volume-up,
      .hy-device_controls-speaker >.controls >.buttons >.button-volume-mute {
        width: var(--su94);
        height: var(--su62);
      }
.hy-device_controls-speaker >.controls >.buttons >.button-volume-down {}
.hy-device_controls-speaker >.controls >.buttons >.button-volume-up {}
.hy-device_controls-speaker >.controls >.buttons >.button-volume-mute {}
.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);

  --color-heating: #FF8400;
  --color-cooling: #3880F2;
  --color-off: #757682;
}
.hy-device_controls-thermostat >.main {
    position: relative;
    width: var(--su520);
    height: var(--su520);
  }
.hy-device_controls-thermostat >.main >.arc {
      position: absolute;
      z-index: 10;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
    }
.hy-device_controls-thermostat >.main >.arc >.arc-target {
        cursor: grab;
      }
.hy-device_controls-thermostat >.main >.arc >.arc-target:active {
          cursor: grabbing;
        }
.hy-device_controls-thermostat >.main >.button {
      position: absolute;
      z-index: 20;
      top: var(--su400);

      width: var(--su96);
      height: var(--su96);
    }
.hy-device_controls-thermostat >.main >.button-down {
      left: var(--su146);
    }
.hy-device_controls-thermostat >.main >.button-up {
      right: var(--su146);
    }
.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);
    }
.hy-device_controls-thermostat >.main >.status >.icon {
        width: var(--su40);
        height: var(--su40);

        background-size: contain;
        background-repeat: no-repeat;
        background-position: center center;
      }
.hy-device_controls-thermostat >.main >.status >.text {
        font-size: var(--su40);
        font-weight: 500;
      }
.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);
    }
.hy-device_controls-thermostat >.main >.target >.text {
        position: relative;
        font-size: var(--su120);
        font-weight: 600;
        text-align: center;
      }
.hy-device_controls-thermostat >.main >.target >.text:after {
          content: '°';
          display: block;
          position: absolute;
          right: calc(-1 * var(--su42));
          top: 0;

          font-size: var(--su100);
        }
.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);
  }
.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;
    }
.hy-device_controls-thermostat >.mode >.title {
      grid-area: title;

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

      font-size: var(--su28);
      font-weight: 500;
      color: white;
    }
.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[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);
  }
.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;
    }
.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;
      }
.hy-device_controls-thermostat_mode-selector >.modes >.mode >.text {
        font-size: var(--su28);
        font-weight: 500;
      }
.hy-device_controls-thermostat_mode-selector >.modes >.mode[data-mode-id="auto"]>.icon {
        mask-image: url(/assets/mode-auto-dJ8K47kn.svg);
        -webkit-mask-image: url(/assets/mode-auto-dJ8K47kn.svg);
      }
.hy-device_controls-thermostat_mode-selector >.modes >.mode[data-mode-id="heat"]>.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_mode-selector >.modes >.mode[data-mode-id="cool"]>.icon {
        mask-image: url(/assets/mode-cool-D5wgcZln.svg);
        -webkit-mask-image: url(/assets/mode-cool-D5wgcZln.svg);
      }
.hy-device_controls-thermostat_mode-selector >.modes >.mode[data-mode-id="off"]>.icon {
        mask-image: url(/assets/mode-off-DJWywG8m.svg);
        -webkit-mask-image: url(/assets/mode-off-DJWywG8m.svg);
      }
.hy-device_controls-thermostat_mode-selector >.modes >.mode.is-active {
        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;
      }
.hy-device_controls-thermostat_mode-selector >.modes >.mode.is-active >.icon {
          background-color: black;
        }
.hy-device_controls-thermostat_mode-selector >.modes >.mode.is-active >.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;
    }
.hy-device_controls-toggle[data-getable="true"] >.toggle:hover {
        cursor: pointer;
      }
.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;
      }
.hy-device_controls-toggle[data-getable="true"] >.toggle.is-on:before {
        background-color: white;
      }
.hy-device_controls-toggle[data-getable="true"] >.toggle.is-on:after {
        background-color: #303031;
      }
.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);
    }
.hy-device_controls-toggle[data-getable="false"] >.toggle-on >.icon, .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%;
}
.hy-device_controls-windowcoverings >.buttons >.button {
      width: var(--su134);
      height: var(--su134);
    }
.hy-device_controls-windowcoverings >.buttons >.button-state-up {
      grid-area: button-state-up;
    }
.hy-device_controls-windowcoverings >.buttons >.button-state-idle {
      grid-area: button-state-idle;
    }
.hy-device_controls-windowcoverings >.buttons >.button-state-down {
      grid-area: button-state-down;
    }
.hy-device_controls-windowcoverings >.buttons >.button-tilt-up {
      grid-area: button-tilt-up;
    }
.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);
    }
.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;
      }
.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);
  }

.hy-device_status-activity >.icon >.inner,
    .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%;
    }

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

.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);
  }

.hy-device_status-alarm >.icon >.inner,
    .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%;
    }

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

.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;
  }
.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;
    }
.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);
  }

.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;
    }

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

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

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

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

.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);
  }
.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;
    }
.hy-device-small >.icon.is-missing {
      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;
  }
.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;
    }
.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);
      }
.hy-device-large >.popup >.inner >.header:not(.has-status) {
          grid-template-areas:
            "icon name close"
            "icon name close";
        }
.hy-device-large >.popup >.inner >.header:not(.has-status) >.status {
            display: none;
          }
.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;
        }
.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;
        }
.hy-device-large >.popup >.inner >.header >.status {
          grid-area: status;
          font-size: var(--su28);
          font-weight: 400;
          color: rgba(255, 255, 255, 0.8);
        }
.hy-device-large >.popup >.inner >.header >.close {
          grid-area: close;
          align-self: center;

          width: var(--su56);
          height: var(--su56);
        }
.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);
  }

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

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

.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);
  }
.hy-homey_page-devices >.zones .zone {
      display: flex;
      flex-direction: column;
    }
.hy-homey_page-devices >.zones .zone:not(.is-not-empty) {
        display: none;
      }
.hy-homey_page-devices >.zones .zone:not(.has-devices-or-moods)>.header {
        display: none;
      }
.hy-homey_page-devices >.zones .zone >.items {
        display: flex;
        flex-direction: column;
      }
.hy-homey_page-devices >.zones .zone >.items >.moods {
          display: flex;
          flex-wrap: wrap;
          gap: var(--su30);
        }
.hy-homey_page-devices >.zones .zone >.items >.devices {
          display: flex;
          flex-wrap: wrap;
          gap: var(--su30);
        }
.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 */
  }
.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);
    }
.hy-homey_page-devices >.empty >.title {
      font-size: var(--su40);
      font-weight: 600;
      margin-bottom: var(--su10);
    }
.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);
  }
.hy-homey_page-flows >.folders .folder[data-count="0"]>.header {
        display: none;
      }
.hy-homey_page-flows >.folders .folder >.items {
        display: flex;
        flex-direction: column;
      }
.hy-homey_page-flows >.folders .folder >.items >.folders {
          display: flex;
          flex-direction: column;
          gap: var(--su30);
        }
.hy-homey_page-flows >.folders .folder >.items >.flows {
          display: flex;
          flex-wrap: wrap;
          gap: var(--su30);
        }
.hy-homey_page-flows >.folders .folder >.items >.flows[data-count="0"] {
            display: none;
          }
.hy-homey_page-flows >.empty {
    height: var(--su800);

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

    /* Icon */
  }
.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);
    }
.hy-homey_page-flows >.empty >.title {
      font-size: var(--su40);
      font-weight: 600;
      margin-bottom: var(--su10);
    }
.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;
  }
.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);
    }
.hy-error >.error >.subtitle {
      font-size: var(--su28);
      color: rgba(255, 255, 255, 0.6);

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