::-webkit-scrollbar {
  display: none; }

@keyframes fade-in {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

.fade-in-1-5 {
  animation: fade-in 1.5s forwards; }

.fade-in-0-5 {
  animation: fade-in 0.5s forwards; }

@keyframes fade-out {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } }

.fade-out-1-5 {
  animation: fade-out 1.5s forwards; }

.fade-out-0-5 {
  animation: fade-out 0.5s forwards; }

:root {
  --lightBlue: #61a2a6;
  --blindGreen: #48a868;
  --climateYellow: #d6b950;
  --speakerRed: #d44a42;
  --alarmOrange: #d45642;
  --multimediaPurple: #30957D;
  --meteringPink: #e98ea0;
  --scenePurpur: #8661a6;
  --intercomOrange: #d17e3c;
  --surveillanceTurquoise: #E89182;
  --lightColor: #61a2a6;
  --blindColor: #48a868;
  --climateColor: #d6b950;
  --speakerColor: #d44a42;
  --alarmColor: #d45642;
  --multimediaColor: #30957D;
  --meteringColor: #e98ea0;
  --sceneColor: #8661a6;
  --intercomColor: #d17e3c;
  --surveillanceColor: #E89182;
  --spGold: #bd913f;
  --globalFontColor: #ffffff;
  --globalFontSizeMedium: 15px;
  --globalBackgroundColor: #131313;
  --globalTextboxColor: #323131;
  --buttonsWidth: 175px;
  --buttonsMinWidth: 110px;
  /*Final Variables*/
  --backgroundColor1: #333333ff;
  --backgroundColor2: #141414f2;
  --backgroundColor40Percent: #00000066;
  --backgroundColor80Percent: #000000cc;
  --backgroundColor100Percent: #000000ff;
  --largeTextSize: 20px;
  --mediumTextSize: 18px;
  --normalTextSize: 16px;
  --smallTextSize: 14px;
  --lineHeight: 120%;
  --outerPadding: 16px;
  --innerPadding: 8px;
  --outerBorderRadius: 8px;
  --innerBorderRadius: 4px;
  --inactiveTransparency: 20%; }
  :root .SteeringContainerDefaultButton, :root .FooterNavigationButton {
    border-radius: var(--outerBorderRadius);
    height: calc(57px - 2 * var(--innerPadding));
    width: calc(191px - 2 * var(--innerPadding));
    min-width: 110px;
    display: grid;
    grid-template-columns: calc(57px - 2 * var(--innerPadding)) 1fr;
    overflow: hidden;
    transition-duration: 0.5s;
    padding: var(--innerPadding);
    flex-shrink: 1;
    position: relative;
    align-items: center;
    gap: 8px;
    justify-items: center; }
    :root .SteeringContainerDefaultButton::before, :root .FooterNavigationButton::before {
      height: 350%; }
    :root .SteeringContainerDefaultButton > :first-child, :root .FooterNavigationButton > :first-child {
      max-height: 100%;
      max-width: 100%;
      border-radius: var(--innerBorderRadius); }
    :root .SteeringContainerDefaultButton > :nth-child(2), :root .FooterNavigationButton > :nth-child(2) {
      display: block;
      max-height: 100%;
      max-width: 100%;
      justify-self: center;
      align-self: center;
      overflow: hidden;
      overflow-wrap: anywhere;
      hyphens: auto;
      line-height: var(--lineHeight);
      font-size: var(--smallTextSize);
      text-overflow: ellipsis;
      white-space: nowrap; }

.ui-keyboard {
  margin-top: 45%; }

body {
  margin: unset;
  overflow: hidden;
  /*-webkit-user-select: none;*/
  /*-webkit-touch-callout: none;*/
  /*-moz-user-select: none;*/
  /*-ms-user-select: none;*/
  /*-webkit-tap-highlight-color: transparent;*/
  /*user-select: none;*/
  background: var(--globalBackgroundColor);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  font-family: ManropeLight;
  white-space: pre-wrap;
  color: white; }
  body > .ImageCache {
    position: relative;
    overflow: hidden;
    width: 0px;
    height: 0px; }
  body > .Container {
    display: grid;
    grid-template-columns: 17% 83%;
    grid-template-rows: 4rem 1fr 90px;
    height: 100%;
    width: 100%;
    background: var(--backgroundColor1);
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    touch-action: pan-y; }
    body > .Container > .Header {
      grid-column: span 3;
      display: grid;
      grid-template-columns: 17% 43% 10% 30%;
      grid-template-rows: calc(100% - 1px) 1.5px;
      position: relative;
      align-items: center;
      justify-items: center; }
      body > .Container > .Header > .Logo {
        width: 80%; }
      body > .Container > .Header > .Title {
        font-family: 'ManropeLight';
        font-size: 26px;
        color: var(--globalFontColor);
        justify-self: left;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
        height: 40px; }
        body > .Container > .Header > .Title::first-letter {
          color: var(--spGold);
          font-weight: bold;
          font-size: 30px; }
      body > .Container > .Header > .Notificationbar {
        font-family: 'ManropeLight';
        font-size: 2rem;
        color: var(--globalFontColor);
        justify-self: left;
        text-indent: 10%;
        text-overflow: ellipsis;
        height: 90%;
        overflow: scroll;
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
        gap: 5px; }
        body > .Container > .Header > .Notificationbar > .Notification {
          width: 50px;
          max-height: 100%;
          aspect-ratio: 1;
          display: flex;
          flex-direction: column;
          align-items: center;
          flex-shrink: 0; }
          body > .Container > .Header > .Notificationbar > .Notification .Image {
            filter: invert(1);
            max-width: 100%;
            max-height: 100%; }
      body > .Container > .Header > .Date {
        font-family: 'ManropeLight';
        color: var(--globalFontColor);
        font-size: 1.05rem;
        text-align: center;
        justify-self: end;
        padding-right: var(--outerPadding); }
      body > .Container > .Header > .Burger {
        display: none;
        height: 60%;
        filter: invert(1); }
      body > .Container > .Header > .BorderLeft {
        background: linear-gradient(90deg, var(--spGold), #ffffff);
        height: 100%;
        border-radius: 1px;
        margin-left: var(--outerPadding);
        margin-right: var(--outerPadding);
        width: calc(100% - 2*var(--outerPadding)); }
      body > .Container > .Header > .BorderMid {
        display: none; }
      body > .Container > .Header > .BorderRight {
        background: linear-gradient(90deg, #ffffff, var(--spGold));
        height: 100%;
        border-radius: 1px;
        width: calc(100% - var(--outerPadding));
        margin-right: var(--outerPadding);
        grid-column: span 3; }
    body > .Container .MenuBar {
      display: flex;
      flex-direction: row;
      padding-top: var(--outerPadding);
      padding-left: var(--innerPadding);
      width: calc(100% - var(--outerPadding) - var(--innerPadding));
      overflow-Y: scroll; }
      body > .Container .MenuBar > .SliderContainer {
        width: 5px;
        height: 100%; }
        body > .Container .MenuBar > .SliderContainer > .Slider {
          width: 50%;
          height: 35px;
          background: var(--spGold);
          transition-duration: 0.5s;
          border-radius: 1.5px;
          transition-timing-function: ease-in-out;
          margin-top: calc(0px - 0.65rem);
          justify-self: center; }
      body > .Container .MenuBar > .ItemsContainer {
        width: calc(100% - 5px);
        height: 100%; }
        body > .Container .MenuBar > .ItemsContainer > .Title {
          color: var(--globalFontColor);
          font-family: 'ManropeLight';
          font-size: var(--largeTextSize);
          line-height: var(--lineHeight);
          padding-left: 10px;
          height: 48px;
          overflow: hidden;
          text-overflow: ellipsis;
          position: relative;
          transition-duration: 0.2s;
          transition-timing-function: ease-in-out;
          align-items: center;
          display: block;
          line-height: 48px; }
          body > .Container .MenuBar > .ItemsContainer > .Title:active {
            text-indent: 10px; }
          @media (any-hover: hover) and (any-pointer: fine) {
            body > .Container .MenuBar > .ItemsContainer > .Title:hover {
              text-indent: 10px; } }
          @media (aspect-ratio: 4/3) and (display-mode: fullscreen) {
            body > .Container .MenuBar > .ItemsContainer > .Title:hover {
              text-indent: 0px; }
            body > .Container .MenuBar > .ItemsContainer > .Title:active {
              text-indent: 0px; } }
    body > .Container > .ContentContainer {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding-top: var(--outerPadding);
      position: relative;
      width: 100%;
      justify-self: center;
      overflow: scroll; }
    body > .Container > .Sidebar {
      display: none;
      flex-direction: column;
      padding-top: 20px;
      align-items: center;
      width: 95%;
      justify-self: center;
      gap: 10px;
      overflow: scroll; }
    body > .Container > .Footer {
      grid-column: span 3;
      background: var(--backgroundColor2);
      display: grid;
      grid-template-columns: 58px calc(100% - 25px - 58px);
      width: calc(100% - 2* var(--innerPadding) - 2* var(--outerPadding));
      padding: var(--innerPadding);
      margin: 0px var(--outerPadding) var(--outerPadding) var(--outerPadding);
      border-radius: 7px;
      gap: 25px;
      overflow-x: scroll;
      overflow-y: hidden; }
      body > .Container > .Footer > .Home {
        width: 100%;
        height: 100%;
        border-radius: 7px;
        background: url("https://assets-global.website-files.com/60ade6a757ca36321a84087a/633a87f0c6e89f15d5afd9d0_sp_haus_icon.svg");
        background-color: #000000;
        position: relative;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
        touch-action: manipulation; }
      body > .Container > .Footer > .SteeringContainer {
        display: flex;
        align-items: center;
        height: 57px;
        width: 100%; }
        body > .Container > .Footer > .SteeringContainer > .DashboardSteeringContainer {
          display: none;
          width: 100%;
          height: 100%;
          justify-content: flex-end; }
          body > .Container > .Footer > .SteeringContainer > .DashboardSteeringContainer > .SettingsButtonContainer {
            height: 100%; }
            body > .Container > .Footer > .SteeringContainer > .DashboardSteeringContainer > .SettingsButtonContainer > .SettingsButtonIcon {
              height: 100%;
              border-radius: 7px; }
  body > .MenubarMobile {
    position: absolute;
    bottom: 0px;
    width: calc(100% - 2* var(--outerPadding));
    transition-duration: 0.5s;
    transition-timing-function: ease-in-out;
    height: 0%;
    background: var(--backgroundColor2);
    overflow: scroll;
    padding: 0 var(--outerPadding);
    display: flex;
    flex-direction: column;
    gap: var(--innerPadding);
    bottom: 80px;
    z-index: 1; }
    body > .MenubarMobile > .Title {
      color: var(--globalFontColor);
      font-family: 'ManropeLight';
      font-size: var(--largeTextSize);
      line-height: var(--lineHeight);
      overflow: hidden;
      text-overflow: ellipsis;
      position: relative;
      flex-shrink: 0;
      min-height: 45px;
      display: flex;
      align-items: center;
      background: var(--backgroundColor80Percent);
      border-radius: var(--outerBorderRadius);
      width: calc(100% - 2* var(--innerPadding));
      padding: var(--innerPadding);
      justify-content: center; }
      body > .MenubarMobile > .Title:first-child {
        margin-top: 16px; }
      body > .MenubarMobile > .Title:last-child {
        margin-bottom: 16px; }
      body > .MenubarMobile > .Title::before {
        height: 800%; }
  body > .ScreensaverContainer {
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 2; }
    body > .ScreensaverContainer > .ScreensaverIFrame {
      width: 100%;
      height: 100%;
      border: none; }
  body .PopUpWindow {
    position: absolute;
    width: calc(100% - var(--outerPadding));
    padding: var(--outerPadding) var(--outerPadding) var(--outerPadding) 0px;
    height: calc(100% - 2* var(--outerPadding));
    background: #3b3b3bc4;
    top: 0px;
    left: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    touch-action: pan-y;
    z-index: 1; }
    @media only screen and (min-height: 100vw) {
      body .PopUpWindow {
        width: calc(100% - 2*var(--outerPadding));
        padding: var(--outerPadding); } }
    body .PopUpWindow > .Container {
      border-radius: var(--outerBorderRadius);
      padding: var(--outerPadding);
      overflow: hidden;
      background-color: var(--backgroundColor2);
      max-width: 700px;
      max-height: 500px; }
      body .PopUpWindow > .Container > .ContentContainerContainer {
        max-width: 100%;
        max-height: 500px;
        display: flex;
        flex-direction: column;
        gap: var(--innerPadding); }
        body .PopUpWindow > .Container > .ContentContainerContainer > .Header {
          height: 32px;
          overflow: hidden;
          display: flex;
          align-items: center;
          justify-content: flex-start;
          width: 100%;
          flex-shrink: 0;
          gap: var(--innerPadding); }
          body .PopUpWindow > .Container > .ContentContainerContainer > .Header > .CloseButtonContainer.Clickable {
            width: 32px;
            height: 32px;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            align-self: start;
            border-radius: var(--innerBorderRadius); }
            body .PopUpWindow > .Container > .ContentContainerContainer > .Header > .CloseButtonContainer.Clickable > .CloseButton {
              max-width: 100%;
              max-height: 100%;
              filter: invert(1); }
          body .PopUpWindow > .Container > .ContentContainerContainer > .Header > .Title {
            width: calc(100% - 24px - var(--innerPadding));
            display: flex;
            color: var(--globalFontColor);
            align-items: center;
            font-family: 'ManropeRegular';
            font-size: var(--normalTextSize);
            line-height: var(--lineHeight); }
        body .PopUpWindow > .Container > .ContentContainerContainer > .PLayerContainer {
          width: 100% !important; }
  body > .ConfirmInterfaceContainer {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: #3b3b3bc4;
    gap: 50px 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    padding-top: 20vh;
    align-content: flex-start;
    transition-duration: 0.5s;
    opacity: 0; }
    body > .ConfirmInterfaceContainer > .Message {
      display: flex;
      align-items: center;
      justify-content: center;
      width: calc(80% - 60px);
      height: 10rem;
      margin: 0% 10% 0% 10%;
      padding: 10px 30px;
      border-radius: 20px;
      color: var(--globalFontColor);
      background: #3b3b3bc4;
      text-align: center;
      box-shadow: 0px 0px 50px var(--spGold); }
    body > .ConfirmInterfaceContainer > .Cancel, body > .ConfirmInterfaceContainer > .Okay {
      width: 100px;
      height: 50px;
      background: black;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'ManropeRegular';
      font-size: 1.2rem;
      border-radius: 10px;
      color: var(--globalFontColor); }
  body > .PinInterfaceContainer {
    position: absolute;
    width: 300px;
    height: 556px;
    left: calc(50% - 160px);
    top: 60px;
    overflow: hidden;
    background: black;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 10px;
    justify-content: flex-end;
    padding: 10px;
    border-radius: var(--outerBorderRadius); }
    body > .PinInterfaceContainer > .CloseButtonContainer {
      height: 40px;
      aspect-ratio: 1;
      width: min-content;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden;
      border-radius: var(--innerBorderRadius); }
      body > .PinInterfaceContainer > .CloseButtonContainer > .image {
        filter: invert(1); }
    body > .PinInterfaceContainer > .Text {
      height: 30px;
      color: var(--globalFontColor);
      font-weight: bold;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center; }
    body > .PinInterfaceContainer > input.Display {
      height: 50px;
      width: 70%;
      align-self: center;
      font-size: 3rem;
      -webkit-text-security: disc;
      margin: 0 auto;
      text-align: center;
      border-radius: 10px; }
    body > .PinInterfaceContainer > .Digit {
      width: calc(100% / 3 - 27px);
      aspect-ratio: 1;
      padding: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--globalFontColor);
      font-size: 3rem;
      background: var(--globalBackgroundColor);
      border-radius: 10px;
      position: relative;
      overflow: hidden; }
      body > .PinInterfaceContainer > .Digit::before {
        transform: translate(0%, 0%);
        transform-origin: 50% 50%;
        height: 200%; }

@media only screen and (min-height: 100vw) {
  body > .Container {
    grid-template-rows: 4rem 1fr 80px; }
    body > .Container > .Header {
      grid-template-columns: 20% 40% 25% 15% !important; }
      body > .Container > .Header > .Logo {
        display: none; }
      body > .Container > .Header > .Title {
        padding-left: var(--outerPadding);
        grid-column: span 2; }
      body > .Container > .Header > .Notificationbar {
        width: 25vw !important; }
      body > .Container > .Header > .Date {
        display: none; }
      body > .Container > .Header > .Burger {
        display: unset !important; }
      body > .Container > .Header > .BorderLeft {
        display: none; }
      body > .Container > .Header > .BorderRight {
        grid-column: span 4;
        margin-left: var(--outerPadding);
        width: calc(100% - 2*var(--outerPadding)); }
    body > .Container > .Menubar {
      display: none !important; }
    body > .Container > .ContentContainer {
      grid-column: span 3 !important; }
    body > .Container > .Sidebar {
      display: none !important; }
    body > .Container > .Footer {
      width: calc(100% - calc(2 * (var(--outerPadding) / 2 + var(--innerPadding) / 2)));
      margin: unset;
      border-radius: unset;
      padding: calc(var(--outerPadding) / 2 + var(--innerPadding) / 2); } }

.Clickable::before {
  display: none;
  opacity: 0;
  content: "";
  background: linear-gradient(0deg, transparent 25%, #ffffff 150%);
  border-radius: 100%;
  width: 200%;
  height: 200%;
  transform: translate(0%, 0%);
  transform-origin: 50% 50%;
  position: absolute;
  transition-duration: 0.5s; }

.Hovering:before {
  display: unset;
  opacity: 1; }

.Clicked:before {
  display: unset;
  opacity: 0;
  animation-name: clickAnimation;
  animation-duration: 0.5s;
  animation-iteration-count: 1; }

@keyframes clickAnimation {
  0% {
    opacity: 1; }
  75% {
    transform: rotate(180deg);
    opacity: 1; }
  100% {
    transform: rotate(180deg);
    opacity: 0; } }

@font-face {
  font-family: ManropeSemiBold;
  src: url(fonts/Manrope-SemiBold.ttf); }

@font-face {
  font-family: ManropeLight;
  src: url(fonts/Manrope-Light.ttf); }

@font-face {
  font-family: ManropeMedium;
  src: url(fonts/Manrope-Medium.ttf); }

@font-face {
  font-family: ManropeRegular;
  src: url(fonts/Manrope-Regular.ttf); }