.MenuContainer {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: #796c53; }
  .MenuContainer > .HeaderContainer {
    height: 50px;
    display: grid;
    grid-template: 'title backButtonContainer'; }
    .MenuContainer > .HeaderContainer > .Title {
      grid-area: title; }
    .MenuContainer > .HeaderContainer > .BackButtonContainer {
      grid-area: backButtonContainer;
      height: 50px; }
      .MenuContainer > .HeaderContainer > .BackButtonContainer > .BackButton {
        height: 100%; }
  .MenuContainer > .MenuButton {
    min-height: 40px;
    height: fit-content;
    overflow: scroll;
    background: #8d7d5f;
    display: grid;
    grid-template: 'title image' 1fr 'description image' auto / 1fr 40px;
    padding: var(--innerPadding);
    border-radius: var(--innerBorderRadius); }
    .MenuContainer > .MenuButton .Title {
      font-size: var(--smallTextSize); }

.Tile {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
  -webkit-tap-highlight-color: transparent;
  height: fit-content;
  aspect-ratio: 1;
  overflow: hidden;
  display: grid;
  border-radius: var(--innerBorderRadius);
  background: #796c53;
  grid-template: 'checkbox image info' 1fr 'title title title' 30px / 20% 60% 20%;
  padding: calc(var(--innerPadding) / 2); }
  .Tile > .Checkbox {
    border-radius: 2px; }
  .Tile > .Radio {
    border-radius: 100%; }
  .Tile > .Checkbox, .Tile > .Radio {
    grid-area: checkbox;
    align-self: flex-start;
    border: solid 2px white;
    padding: unset;
    margin: unset;
    justify-self: flex-start;
    appearance: none;
    max-width: 100%;
    width: 15px;
    height: 15px;
    background: var(--globalFontColor); }
    .Tile > .Checkbox:checked, .Tile > .Radio:checked {
      background: #5b513e; }
  .Tile > .Title {
    text-align: center;
    font-size: 12px;
    line-height: 14px; }

.RangeSetting {
  height: fit-content;
  overflow: scroll;
  background: #8d7d5f;
  display: grid;
  grid-template: 'title' auto 'description' auto 'rangeContainer' 1fr;
  padding: var(--innerPadding);
  border-radius: var(--innerBorderRadius);
  flex-shrink: 0; }
  .RangeSetting > .Title {
    font-size: var(--smallTextSize); }
  .RangeSetting > .RangeContainer {
    grid-area: rangeContainer;
    display: grid;
    grid-template: 'minValue tooltipContainer maxValue' 20px 'minValue range maxValue' 1fr / 30px 1fr 30px;
    width: unset;
    min-width: unset; }
    .RangeSetting > .RangeContainer > .MinValue, .RangeSetting > .RangeContainer .MaxValue {
      font-size: var(--smallTextSize);
      align-self: end;
      justify-self: center; }
    .RangeSetting > .RangeContainer > .MinValue {
      grid-area: minValue; }
    .RangeSetting > .RangeContainer > .MaxValue {
      grid-area: maxValue; }
    .RangeSetting > .RangeContainer > .TooltipContainer {
      grid-area: tooltipContainer;
      position: relative; }
      .RangeSetting > .RangeContainer > .TooltipContainer > .Input {
        width: 40px;
        font-size: var(--smallTextSize);
        appearance: none;
        border: none;
        background: #5b513e;
        color: var(--globalFontColor);
        font-family: unset;
        border-radius: var(--innerBorderRadius);
        padding: unset;
        text-align: center;
        align-self: anchor-center;
        position: absolute; }
        .RangeSetting > .RangeContainer > .TooltipContainer > .Input::-webkit-inner-spin-button {
          -webkit-appearance: none; }
        .RangeSetting > .RangeContainer > .TooltipContainer > .Input:focus {
          outline: none; }
    .RangeSetting > .RangeContainer > .Range {
      grid-area: range;
      width: calc(100% - 16px);
      margin: 0;
      justify-self: center;
      height: 5px;
      appearance: none;
      border-radius: 5px;
      background: #5b513e;
      margin: 8px 0px; }
      .RangeSetting > .RangeContainer > .Range::-webkit-slider-thumb {
        appearance: none;
        background: white;
        width: 16px;
        aspect-ratio: 1;
        border-radius: 100%; }

.SelectSetting {
  height: fit-content;
  overflow: hidden;
  background: #8d7d5f;
  display: grid;
  grid-template: 'title' min-content 'description' max-content 'multiSelectionContainer' max-content 'selectContainer' 1fr;
  padding: var(--innerPadding);
  border-radius: var(--innerBorderRadius); }
  .SelectSetting > .Title {
    font-size: var(--smallTextSize); }
  .SelectSetting > .MultiSelectionContainer {
    grid-area: multiSelectionContainer;
    display: grid;
    grid-template-columns: 20px max-content 1fr;
    padding: 4px 0px; }
    .SelectSetting > .MultiSelectionContainer > .Checkbox {
      align-self: center;
      border: solid 2px white;
      padding: unset;
      margin: unset;
      justify-self: flex-start;
      appearance: none;
      max-width: 100%;
      width: 15px;
      height: 15px;
      background: var(--globalFontColor);
      border-radius: 4px; }
      .SelectSetting > .MultiSelectionContainer > .Checkbox:checked {
        background: #5b513e; }
    .SelectSetting > .MultiSelectionContainer > .Enter {
      justify-self: flex-end;
      background: #5b513e;
      border-radius: var(--innerPadding);
      padding: 0px 8px;
      font-size: var(--smallTextSize); }
    .SelectSetting > .MultiSelectionContainer > .Label {
      font-size: var(--smallTextSize); }
  .SelectSetting > .SelectContainer {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
    gap: var(--innerPadding);
    width: 100%; }
    .SelectSetting > .SelectContainer > .OptionTile {
      height: fit-content;
      aspect-ratio: 1;
      overflow: hidden;
      display: grid;
      border-radius: var(--innerBorderRadius);
      background: #796c53;
      grid-template: 'checkbox image info' 1fr 'title title title' 30px / 20% 60% 20%;
      padding: calc(var(--innerPadding) / 2); }
      .SelectSetting > .SelectContainer > .OptionTile > .Checkbox {
        border-radius: 2px; }
      .SelectSetting > .SelectContainer > .OptionTile > .Radio {
        border-radius: 100%; }
      .SelectSetting > .SelectContainer > .OptionTile > .Checkbox, .SelectSetting > .SelectContainer > .OptionTile > .Radio {
        grid-area: checkbox;
        align-self: flex-start;
        border: solid 2px white;
        padding: unset;
        margin: unset;
        justify-self: flex-start;
        appearance: none;
        max-width: 100%;
        width: 15px;
        aspect-ratio: 1;
        background: var(--globalFontColor); }
        .SelectSetting > .SelectContainer > .OptionTile > .Checkbox:checked, .SelectSetting > .SelectContainer > .OptionTile > .Radio:checked {
          background: #5b513e; }
      .SelectSetting > .SelectContainer > .OptionTile > .Title {
        text-align: center;
        font-size: 12px;
        line-height: 14px; }

.MenuButton .Title, .Tile .Title, .RangeSetting .Title, .SelectSetting .Title {
  grid-area: title;
  align-self: safe center;
  overflow: scroll;
  max-height: 100%;
  word-break: break-all;
  hyphens: auto;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  display: -webkit-box; }

.MenuButton .Image, .Tile .Image, .RangeSetting .Image, .SelectSetting .Image {
  grid-area: image;
  max-height: 100%;
  max-width: 100%;
  justify-self: center;
  align-self: center;
  border-radius: var(--innerBorderRadius); }

.MenuButton .Description, .Tile .Description, .RangeSetting .Description, .SelectSetting .Description {
  grid-area: description;
  font-size: 12px;
  text-align: start;
  align-self: safe center;
  overflow: scroll;
  max-height: 100%;
  word-break: break-word;
  hyphens: auto;
  color: var(--backgroundColor1); }

.ConfigurationModuleContainer {
  height: 100%;
  width: 100%;
  position: relative;
  display: flex;
  gap: 10px;
  flex-direction: column; }
  .ConfigurationModuleContainer .navigationContainer {
    height: 50px;
    background: var(--backgroundColor40Percent);
    border-radius: var(--outerBorderRadius);
    display: flex;
    align-items: center; }
    .ConfigurationModuleContainer .navigationContainer .ChangeDisplayModeContainer.Clickable {
      height: 40px;
      width: 40px;
      aspect-ratio: 1;
      overflow: hidden;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: var(--innerBorderRadius); }
    .ConfigurationModuleContainer .navigationContainer img.ChangeDisplayModeIcon {
      filter: invert(1); }
    .ConfigurationModuleContainer .navigationContainer .UndoContainer.Clickable {
      height: 40px;
      width: 40px;
      aspect-ratio: 1;
      overflow: hidden;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: var(--innerBorderRadius); }
    .ConfigurationModuleContainer .navigationContainer img.UndoIcon {
      filter: invert(1); }
    .ConfigurationModuleContainer .navigationContainer .DiscardChangesContainer.Clickable {
      height: 40px;
      width: 40px;
      aspect-ratio: 1;
      overflow: hidden;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: var(--innerBorderRadius); }
    .ConfigurationModuleContainer .navigationContainer img.DiscardChangesIcon {
      filter: invert(1); }
    .ConfigurationModuleContainer .navigationContainer .SaveContainer.Clickable {
      height: 40px;
      width: 40px;
      aspect-ratio: 1;
      overflow: hidden;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: var(--innerBorderRadius); }
    .ConfigurationModuleContainer .navigationContainer img.SaveIcon {
      filter: invert(1); }
  .ConfigurationModuleContainer .ConfigContainer {
    overflow: scroll;
    height: calc(100% - 50px); }
  .ConfigurationModuleContainer .DeviceTile {
    width: 100px;
    height: 100px;
    display: flex;
    position: relative;
    flex-direction: column;
    background: var(--backgroundColor40Percent);
    border-radius: var(--outerBorderRadius);
    align-items: center;
    padding: var(--innerPadding); }
  .ConfigurationModuleContainer input.SelectionCheckbox {
    position: absolute;
    top: 0px;
    right: 0px; }
  .ConfigurationModuleContainer .TilesContainer {
    display: flex;
    gap: 25px;
    flex-wrap: wrap;
    padding: var(--outerPadding);
    border-top: 2px solid var(--spGold); }
  .ConfigurationModuleContainer img.Icon {
    max-height: 50%;
    max-width: 60;
    aspect-ratio: 1;
    object-fit: contain; }
  .ConfigurationModuleContainer .Description {
    flex-grow: 1;
    text-align: center;
    display: flex;
    align-items: safe center;
    overflow: scroll; }
  .ConfigurationModuleContainer .FieldContainer {
    border-top: 1px solid var(--spGold);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    gap: 5px;
    position: relative;
    min-height: 30px; }
    .ConfigurationModuleContainer .FieldContainer > .infoButton {
      position: absolute;
      aspect-ratio: 1;
      height: 25px;
      top: 0px;
      right: 0px;
      background: #949494;
      filter: invert(1);
      border-radius: 100%;
      margin: 5px; }
    .ConfigurationModuleContainer .FieldContainer > img.FieldOpener {
      position: absolute;
      aspect-ratio: 1;
      height: 25px;
      top: 0px;
      right: 50px;
      background: #949494;
      filter: invert(1);
      border-radius: 100%;
      margin: 5px; }
    .ConfigurationModuleContainer .FieldContainer > .SubCategoriesContainer {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      width: calc(100% - 20px);
      margin-left: 20px;
      gap: 5px;
      position: relative;
      min-height: 30px; }
  .ConfigurationModuleContainer .SettingsContainer {
    padding: var(--outerPadding);
    display: flex;
    flex-direction: column;
    gap: 25px; }
  .ConfigurationModuleContainer .Label {
    font-family: 'ManropeSemiBold';
    font-size: var(--mediumTextSize); }
  .ConfigurationModuleContainer .InputContainer {
    display: flex;
    gap: 20px;
    flex-wrap: wrap; }
  .ConfigurationModuleContainer input.Range {
    width: 200px; }
  .ConfigurationModuleContainer .OptionContainer {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 140px;
    align-items: center; }
  .ConfigurationModuleContainer img.OptionIcon {
    height: 50px;
    object-fit: contain; }

.FloorplanContainer {
  height: calc(709px * 0.75);
  position: relative;
  overflow-x: scroll; }
  .FloorplanContainer .DevicesContainer {
    position: absolute;
    top: calc(-54px * 0.75);
    left: calc(-10px * 0.75);
    /*height: 709px;
        width: 1000px;*/
    scale: 0.75; }
  .FloorplanContainer .DeviceIcon {
    position: absolute;
    max-height: 55px;
    width: 56px;
    background: #bd913f66;
    aspect-ratio: 1;
    display: flex;
    justify-content: center;
    border-radius: var(--innerBorderRadius); }
    .FloorplanContainer .DeviceIcon > .moveAroundIcon {
      touch-action: none;
      position: absolute;
      bottom: 0px;
      right: 0px;
      width: 20px;
      aspect-ratio: 1; }
  .FloorplanContainer img.Floorplan {
    height: calc(709px * 0.75); }
  .FloorplanContainer img.Icon {
    width: 30px;
    max-height: 30px;
    position: absolute;
    left: 0px;
    top: 0px; }

div#SettingsModuleDeviceControlContainer {
  width: calc(100% - var(--outerPadding));
  height: calc(100% - 2* var(--outerPadding));
  padding: var(--outerPadding) var(--outerPadding) var(--outerPadding) 0;
  display: flex;
  flex-direction: column;
  border-radius: var(--outerBorderRadius);
  position: absolute;
  top: 0px;
  overflow: scroll; }
  @media only screen and (min-height: 100vw) {
    div#SettingsModuleDeviceControlContainer {
      width: calc(100% - 2 * var(--outerPadding));
      padding: var(--outerPadding); } }
  div#SettingsModuleDeviceControlContainer > .HeaderContainer {
    width: calc(100% - 2* var(--innerPadding));
    height: 35px;
    display: flex;
    gap: var(--innerPadding);
    padding: var(--innerPadding);
    background: var(--backgroundColor40Percent);
    border-radius: var(--outerBorderRadius);
    flex-shrink: 0;
    position: relative; }
    div#SettingsModuleDeviceControlContainer > .HeaderContainer > .BackButtonContainer {
      height: 100%;
      width: 35px;
      aspect-ratio: 1;
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: var(--innerBorderRadius);
      transition-duration: 0.5s; }
      div#SettingsModuleDeviceControlContainer > .HeaderContainer > .BackButtonContainer > .BackButton {
        filter: invert(1);
        width: 100%;
        height: 100%; }
    div#SettingsModuleDeviceControlContainer > .HeaderContainer > .HeaderTitle {
      height: 100%;
      align-content: center;
      font-size: var(--mediumTextSize); }
    div#SettingsModuleDeviceControlContainer > .HeaderContainer > .RequestAdminModus {
      position: absolute;
      right: var(--innerPadding);
      font-size: var(--mediumTextSize); }
  div#SettingsModuleDeviceControlContainer > .BodyContainer {
    width: 100%;
    height: auto;
    display: grid;
    grid-template: 1fr/repeat(auto-fill, minmax(100px, 1fr));
    gap: var(--outerPadding);
    grid-area: c;
    align-items: start;
    max-height: calc(100% - 51px);
    overflow: scroll;
    margin-top: var(--outerPadding); }
    @media only screen and (min-width: 1200px) {
      div#SettingsModuleDeviceControlContainer > .BodyContainer {
        grid-template: 1fr/repeat(auto-fill, minmax(130px, 1fr)); } }
    div#SettingsModuleDeviceControlContainer > .BodyContainer > .mainCategoriesTitle, div#SettingsModuleDeviceControlContainer > .BodyContainer .mainCategorieTitle, div#SettingsModuleDeviceControlContainer > .BodyContainer .MuteDescription, div#SettingsModuleDeviceControlContainer > .BodyContainer .SonosDescription {
      margin-top: var(--outerPadding);
      font-size: var(--mediumTextSize);
      height: 30px;
      align-content: center;
      border-top: 1px solid var(--spGold);
      width: 100%;
      grid-column: 1 / -1; }
    div#SettingsModuleDeviceControlContainer > .BodyContainer > .mainCategoriesTitle:first-child, div#SettingsModuleDeviceControlContainer > .BodyContainer .mainCategorieTitle:first-child, div#SettingsModuleDeviceControlContainer > .BodyContainer .ModuleTitle:first-child, div#SettingsModuleDeviceControlContainer > .BodyContainer .MuteDescription:first-child, div#SettingsModuleDeviceControlContainer > .BodyContainer .SonosDescription:first-child {
      margin-top: unset; }
    div#SettingsModuleDeviceControlContainer > .BodyContainer > .ModuleContainer, div#SettingsModuleDeviceControlContainer > .BodyContainer .SubCategorieContainer, div#SettingsModuleDeviceControlContainer > .BodyContainer .SpmTestContainer, div#SettingsModuleDeviceControlContainer > .BodyContainer .SpdTestContainer, div#SettingsModuleDeviceControlContainer > .BodyContainer .MicTestContainer, div#SettingsModuleDeviceControlContainer > .BodyContainer .SpeakerTestContainer, div#SettingsModuleDeviceControlContainer > .BodyContainer .LoadToEmmcContainer, div#SettingsModuleDeviceControlContainer > .BodyContainer .MuteButtonContainer, div#SettingsModuleDeviceControlContainer > .BodyContainer .SonosButtonContainer {
      position: relative;
      overflow: hidden;
      width: calc(100% - 2* var(--innerPadding));
      border-radius: var(--outerBorderRadius);
      align-items: center;
      aspect-ratio: 1;
      padding: var(--innerPadding);
      hyphens: auto;
      display: grid;
      grid-template-rows: 55% 1fr;
      grid-template-columns: 100%;
      justify-content: center;
      justify-items: center;
      height: calc(100% - 2* var(--innerPadding));
      background: var(--backgroundColor40Percent); }
      div#SettingsModuleDeviceControlContainer > .BodyContainer > .ModuleContainer::before, div#SettingsModuleDeviceControlContainer > .BodyContainer .SubCategorieContainer::before, div#SettingsModuleDeviceControlContainer > .BodyContainer .SpmTestContainer::before, div#SettingsModuleDeviceControlContainer > .BodyContainer .SpdTestContainer::before, div#SettingsModuleDeviceControlContainer > .BodyContainer .MicTestContainer::before, div#SettingsModuleDeviceControlContainer > .BodyContainer .SpeakerTestContainer::before, div#SettingsModuleDeviceControlContainer > .BodyContainer .LoadToEmmcContainer::before, div#SettingsModuleDeviceControlContainer > .BodyContainer .MuteButtonContainer::before, div#SettingsModuleDeviceControlContainer > .BodyContainer .SonosButtonContainer::before {
        width: 200px;
        height: 200px; }
      div#SettingsModuleDeviceControlContainer > .BodyContainer > .ModuleContainer > .ModuleImage, div#SettingsModuleDeviceControlContainer > .BodyContainer > .ModuleContainer .SubCategorieImage, div#SettingsModuleDeviceControlContainer > .BodyContainer > .ModuleContainer .Image, div#SettingsModuleDeviceControlContainer > .BodyContainer .SubCategorieContainer > .ModuleImage, div#SettingsModuleDeviceControlContainer > .BodyContainer .SubCategorieContainer .SubCategorieImage, div#SettingsModuleDeviceControlContainer > .BodyContainer .SubCategorieContainer .Image, div#SettingsModuleDeviceControlContainer > .BodyContainer .SpmTestContainer > .ModuleImage, div#SettingsModuleDeviceControlContainer > .BodyContainer .SpmTestContainer .SubCategorieImage, div#SettingsModuleDeviceControlContainer > .BodyContainer .SpmTestContainer .Image, div#SettingsModuleDeviceControlContainer > .BodyContainer .SpdTestContainer > .ModuleImage, div#SettingsModuleDeviceControlContainer > .BodyContainer .SpdTestContainer .SubCategorieImage, div#SettingsModuleDeviceControlContainer > .BodyContainer .SpdTestContainer .Image, div#SettingsModuleDeviceControlContainer > .BodyContainer .MicTestContainer > .ModuleImage, div#SettingsModuleDeviceControlContainer > .BodyContainer .MicTestContainer .SubCategorieImage, div#SettingsModuleDeviceControlContainer > .BodyContainer .MicTestContainer .Image, div#SettingsModuleDeviceControlContainer > .BodyContainer .SpeakerTestContainer > .ModuleImage, div#SettingsModuleDeviceControlContainer > .BodyContainer .SpeakerTestContainer .SubCategorieImage, div#SettingsModuleDeviceControlContainer > .BodyContainer .SpeakerTestContainer .Image, div#SettingsModuleDeviceControlContainer > .BodyContainer .LoadToEmmcContainer > .ModuleImage, div#SettingsModuleDeviceControlContainer > .BodyContainer .LoadToEmmcContainer .SubCategorieImage, div#SettingsModuleDeviceControlContainer > .BodyContainer .LoadToEmmcContainer .Image, div#SettingsModuleDeviceControlContainer > .BodyContainer .MuteButtonContainer > .ModuleImage, div#SettingsModuleDeviceControlContainer > .BodyContainer .MuteButtonContainer .SubCategorieImage, div#SettingsModuleDeviceControlContainer > .BodyContainer .MuteButtonContainer .Image, div#SettingsModuleDeviceControlContainer > .BodyContainer .SonosButtonContainer > .ModuleImage, div#SettingsModuleDeviceControlContainer > .BodyContainer .SonosButtonContainer .SubCategorieImage, div#SettingsModuleDeviceControlContainer > .BodyContainer .SonosButtonContainer .Image {
        filter: invert(1);
        max-width: 100%;
        max-height: 100%; }
      div#SettingsModuleDeviceControlContainer > .BodyContainer > .ModuleContainer > .Record, div#SettingsModuleDeviceControlContainer > .BodyContainer > .ModuleContainer .PlayAudio, div#SettingsModuleDeviceControlContainer > .BodyContainer > .ModuleContainer .ListIdsButton, div#SettingsModuleDeviceControlContainer > .BodyContainer > .ModuleContainer .Title, div#SettingsModuleDeviceControlContainer > .BodyContainer > .ModuleContainer .LoadToEmmc, div#SettingsModuleDeviceControlContainer > .BodyContainer > .ModuleContainer .Test, div#SettingsModuleDeviceControlContainer > .BodyContainer .SubCategorieContainer > .Record, div#SettingsModuleDeviceControlContainer > .BodyContainer .SubCategorieContainer .PlayAudio, div#SettingsModuleDeviceControlContainer > .BodyContainer .SubCategorieContainer .ListIdsButton, div#SettingsModuleDeviceControlContainer > .BodyContainer .SubCategorieContainer .Title, div#SettingsModuleDeviceControlContainer > .BodyContainer .SubCategorieContainer .LoadToEmmc, div#SettingsModuleDeviceControlContainer > .BodyContainer .SubCategorieContainer .Test, div#SettingsModuleDeviceControlContainer > .BodyContainer .SpmTestContainer > .Record, div#SettingsModuleDeviceControlContainer > .BodyContainer .SpmTestContainer .PlayAudio, div#SettingsModuleDeviceControlContainer > .BodyContainer .SpmTestContainer .ListIdsButton, div#SettingsModuleDeviceControlContainer > .BodyContainer .SpmTestContainer .Title, div#SettingsModuleDeviceControlContainer > .BodyContainer .SpmTestContainer .LoadToEmmc, div#SettingsModuleDeviceControlContainer > .BodyContainer .SpmTestContainer .Test, div#SettingsModuleDeviceControlContainer > .BodyContainer .SpdTestContainer > .Record, div#SettingsModuleDeviceControlContainer > .BodyContainer .SpdTestContainer .PlayAudio, div#SettingsModuleDeviceControlContainer > .BodyContainer .SpdTestContainer .ListIdsButton, div#SettingsModuleDeviceControlContainer > .BodyContainer .SpdTestContainer .Title, div#SettingsModuleDeviceControlContainer > .BodyContainer .SpdTestContainer .LoadToEmmc, div#SettingsModuleDeviceControlContainer > .BodyContainer .SpdTestContainer .Test, div#SettingsModuleDeviceControlContainer > .BodyContainer .MicTestContainer > .Record, div#SettingsModuleDeviceControlContainer > .BodyContainer .MicTestContainer .PlayAudio, div#SettingsModuleDeviceControlContainer > .BodyContainer .MicTestContainer .ListIdsButton, div#SettingsModuleDeviceControlContainer > .BodyContainer .MicTestContainer .Title, div#SettingsModuleDeviceControlContainer > .BodyContainer .MicTestContainer .LoadToEmmc, div#SettingsModuleDeviceControlContainer > .BodyContainer .MicTestContainer .Test, div#SettingsModuleDeviceControlContainer > .BodyContainer .SpeakerTestContainer > .Record, div#SettingsModuleDeviceControlContainer > .BodyContainer .SpeakerTestContainer .PlayAudio, div#SettingsModuleDeviceControlContainer > .BodyContainer .SpeakerTestContainer .ListIdsButton, div#SettingsModuleDeviceControlContainer > .BodyContainer .SpeakerTestContainer .Title, div#SettingsModuleDeviceControlContainer > .BodyContainer .SpeakerTestContainer .LoadToEmmc, div#SettingsModuleDeviceControlContainer > .BodyContainer .SpeakerTestContainer .Test, div#SettingsModuleDeviceControlContainer > .BodyContainer .LoadToEmmcContainer > .Record, div#SettingsModuleDeviceControlContainer > .BodyContainer .LoadToEmmcContainer .PlayAudio, div#SettingsModuleDeviceControlContainer > .BodyContainer .LoadToEmmcContainer .ListIdsButton, div#SettingsModuleDeviceControlContainer > .BodyContainer .LoadToEmmcContainer .Title, div#SettingsModuleDeviceControlContainer > .BodyContainer .LoadToEmmcContainer .LoadToEmmc, div#SettingsModuleDeviceControlContainer > .BodyContainer .LoadToEmmcContainer .Test, div#SettingsModuleDeviceControlContainer > .BodyContainer .MuteButtonContainer > .Record, div#SettingsModuleDeviceControlContainer > .BodyContainer .MuteButtonContainer .PlayAudio, div#SettingsModuleDeviceControlContainer > .BodyContainer .MuteButtonContainer .ListIdsButton, div#SettingsModuleDeviceControlContainer > .BodyContainer .MuteButtonContainer .Title, div#SettingsModuleDeviceControlContainer > .BodyContainer .MuteButtonContainer .LoadToEmmc, div#SettingsModuleDeviceControlContainer > .BodyContainer .MuteButtonContainer .Test, div#SettingsModuleDeviceControlContainer > .BodyContainer .SonosButtonContainer > .Record, div#SettingsModuleDeviceControlContainer > .BodyContainer .SonosButtonContainer .PlayAudio, div#SettingsModuleDeviceControlContainer > .BodyContainer .SonosButtonContainer .ListIdsButton, div#SettingsModuleDeviceControlContainer > .BodyContainer .SonosButtonContainer .Title, div#SettingsModuleDeviceControlContainer > .BodyContainer .SonosButtonContainer .LoadToEmmc, div#SettingsModuleDeviceControlContainer > .BodyContainer .SonosButtonContainer .Test {
        text-align: center;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        width: 100%;
        white-space: normal; }
      div#SettingsModuleDeviceControlContainer > .BodyContainer > .ModuleContainer > .StatusDot, div#SettingsModuleDeviceControlContainer > .BodyContainer .SubCategorieContainer > .StatusDot, div#SettingsModuleDeviceControlContainer > .BodyContainer .SpmTestContainer > .StatusDot, div#SettingsModuleDeviceControlContainer > .BodyContainer .SpdTestContainer > .StatusDot, div#SettingsModuleDeviceControlContainer > .BodyContainer .MicTestContainer > .StatusDot, div#SettingsModuleDeviceControlContainer > .BodyContainer .SpeakerTestContainer > .StatusDot, div#SettingsModuleDeviceControlContainer > .BodyContainer .LoadToEmmcContainer > .StatusDot, div#SettingsModuleDeviceControlContainer > .BodyContainer .MuteButtonContainer > .StatusDot, div#SettingsModuleDeviceControlContainer > .BodyContainer .SonosButtonContainer > .StatusDot {
        width: 15px;
        height: 15px;
        background: var(--backgroundColor1);
        border-radius: 100%;
        margin: 4px;
        position: absolute;
        right: 0px;
        top: 0px;
        background-size: 50% 100%;
        background-repeat: repeat-x; }
      div#SettingsModuleDeviceControlContainer > .BodyContainer > .ModuleContainer > .ProgressBar, div#SettingsModuleDeviceControlContainer > .BodyContainer .SubCategorieContainer > .ProgressBar, div#SettingsModuleDeviceControlContainer > .BodyContainer .SpmTestContainer > .ProgressBar, div#SettingsModuleDeviceControlContainer > .BodyContainer .SpdTestContainer > .ProgressBar, div#SettingsModuleDeviceControlContainer > .BodyContainer .MicTestContainer > .ProgressBar, div#SettingsModuleDeviceControlContainer > .BodyContainer .SpeakerTestContainer > .ProgressBar, div#SettingsModuleDeviceControlContainer > .BodyContainer .LoadToEmmcContainer > .ProgressBar, div#SettingsModuleDeviceControlContainer > .BodyContainer .MuteButtonContainer > .ProgressBar, div#SettingsModuleDeviceControlContainer > .BodyContainer .SonosButtonContainer > .ProgressBar {
        width: 100%;
        height: 15px;
        border-radius: var(--innerBorderRadius);
        background: linear-gradient(to right, var(--spGold) 0%, var(--spGold) 100%);
        background-size: 0% 100%;
        background-repeat: no-repeat;
        background-color: var(--backgroundColor2); }

@keyframes progressbarAnimation {
  from {
    background-size: 0% 100%; }
  to {
    background-size: 100% 100%; } }

@keyframes recordingAnimation {
  from {
    background-color: var(--backgroundColor1); }
  to {
    background-color: red; } }

@keyframes playingAnimation {
  from {
    background-position: 0 0; }
  to {
    background-position: 100% 0; } }
    div#SettingsModuleDeviceControlContainer > .BodyContainer > .ResultsContainer {
      width: calc(100% - 2* var(--innerPadding));
      display: flex;
      flex-wrap: wrap;
      gap: var(--innerPadding);
      grid-column: 1 / -1;
      background: var(--backgroundColor40Percent);
      padding: var(--innerPadding);
      border-radius: var(--outerBorderRadius); }
      div#SettingsModuleDeviceControlContainer > .BodyContainer > .ResultsContainer:empty {
        padding: unset; }
      div#SettingsModuleDeviceControlContainer > .BodyContainer > .ResultsContainer > .Header {
        width: 100%; }
      div#SettingsModuleDeviceControlContainer > .BodyContainer > .ResultsContainer > .SensorId {
        background: var(--backgroundColor40Percent);
        height: 40px;
        width: 40px;
        border-radius: 100%;
        display: flex;
        justify-content: center;
        align-items: center; }

#SettingsModuleDeviceControlContainer {
  display: flex;
  flex-direction: row;
  height: calc(100% - 2* var(--outerPadding));
  width: calc(100% - var(--outerPadding));
  padding: var(--outerPadding) var(--outerPadding) var(--outerPadding) 0px;
  border-radius: var(--outerBorderRadius) var(--outerBorderRadius) var(--outerBorderRadius);
  top: 0px;
  position: absolute; }
  @media only screen and (min-height: 100vw) {
    #SettingsModuleDeviceControlContainer {
      width: calc(100% - 2 * var(--outerPadding));
      padding: var(--outerPadding); } }
  #SettingsModuleDeviceControlContainer > .NavigationButtonsContainer {
    display: flex;
    width: calc((100% - var(--outerPadding))* 0.2 - 2* var(--innerPadding) - 2px);
    height: calc(100% - 2* var(--innerPadding));
    border-right: 2px solid var(--spGold);
    padding: var(--innerPadding);
    flex-shrink: 0;
    flex-grow: 0;
    background: var(--backgroundColor80Percent);
    border-radius: var(--outerBorderRadius) 0 0 var(--outerBorderRadius);
    gap: var(--innerPadding);
    flex-direction: column; }
    @media only screen and (max-width: 500px) {
      #SettingsModuleDeviceControlContainer > .NavigationButtonsContainer {
        display: none; } }
    #SettingsModuleDeviceControlContainer > .NavigationButtonsContainer .NavigationButtonContainer {
      height: 40px;
      display: flex;
      align-items: center; }
  #SettingsModuleDeviceControlContainer > .SettingsContentContainer {
    background: var(--backgroundColor80Percent);
    width: calc((100% - var(--outerPadding))* 0.8);
    height: calc(100% - 2* var(--innerPadding));
    padding: var(--innerPadding);
    flex-grow: 0;
    flex-shrink: 0;
    border-radius: 0 var(--outerBorderRadius) var(--outerBorderRadius) 0;
    display: flex;
    justify-content: center;
    position: relative; }
    @media only screen and (max-width: 500px) {
      #SettingsModuleDeviceControlContainer > .SettingsContentContainer {
        width: calc((100% - var(--outerPadding)));
        border-radius: var(--outerBorderRadius); } }
    #SettingsModuleDeviceControlContainer > .SettingsContentContainer > .Container {
      width: calc(100% - 2* var(--innerPadding));
      height: calc(100% - 2* var(--innerPadding));
      padding: var(--innerPadding);
      background: var(--backgroundColor2);
      border-radius: var(--outerBorderRadius);
      display: flex;
      flex-direction: column;
      gap: var(--innerPadding);
      overflow: scroll; }
      #SettingsModuleDeviceControlContainer > .SettingsContentContainer > .Container > .ToggleSwitchContainer {
        width: calc(100% - 2* var(--innerPadding));
        background: var(--backgroundColor40Percent);
        padding: var(--innerPadding);
        border-radius: var(--outerBorderRadius); }
        #SettingsModuleDeviceControlContainer > .SettingsContentContainer > .Container > .ToggleSwitchContainer > .Description {
          width: calc(100% - 2* var(--innerPadding));
          padding: var(--innerPadding); }
        #SettingsModuleDeviceControlContainer > .SettingsContentContainer > .Container > .ToggleSwitchContainer > .ButtonContainer {
          width: calc(100% - 2* var(--innerPadding));
          max-width: 200px;
          height: 35px;
          position: relative;
          justify-items: center;
          background: var(--backgroundColor80Percent);
          display: flex;
          overflow: hidden;
          hyphens: auto;
          overflow-wrap: anywhere;
          color: var(--globalFontColor);
          line-height: var(--lineHeight);
          font-size: var(--normalTextSize);
          padding: var(--innerPadding);
          text-align: center;
          align-items: center;
          justify-content: center;
          border-radius: var(--innerBorderRadius); }
          #SettingsModuleDeviceControlContainer > .SettingsContentContainer > .Container > .ToggleSwitchContainer > .ButtonContainer::before {
            transform: translate(0%, 0%);
            transform-origin: 50% 50%;
            height: 800%; }
          #SettingsModuleDeviceControlContainer > .SettingsContentContainer > .Container > .ToggleSwitchContainer > .ButtonContainer > .Label {
            width: 100%;
            display: flex; }
          #SettingsModuleDeviceControlContainer > .SettingsContentContainer > .Container > .ToggleSwitchContainer > .ButtonContainer > .StatusDot {
            position: absolute;
            width: 15px;
            height: 15px;
            background: var(--backgroundColor1);
            top: 0px;
            right: 0px;
            border-radius: 100%;
            margin: 5px 5px 0px 0px;
            transition-duration: 0.5s; }

.PinCodeContainer {
  width: min-content;
  height: min-content;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--outerPadding);
  background: var(--backgroundColor2);
  border-radius: var(--outerBorderRadius);
  overflow: scroll; }
  .PinCodeContainer > .HeaderContainer {
    height: 32px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    flex-shrink: 0;
    gap: var(--innerPadding); }
    .PinCodeContainer > .HeaderContainer > .CloseButtonContainer.Clickable {
      width: 32px;
      height: 32px;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      border-radius: var(--innerBorderRadius); }
      .PinCodeContainer > .HeaderContainer > .CloseButtonContainer.Clickable > img.CloseButton {
        max-width: 100%;
        max-height: 100%;
        filter: invert(1); }
    .PinCodeContainer > .HeaderContainer > .Title {
      width: calc(100% - 24px - var(--innerPadding));
      display: flex;
      color: var(--globalFontColor);
      align-items: center;
      font-family: 'ManropeRegular';
      font-size: var(--mediumTextSize);
      line-height: var(--lineHeight); }
  .PinCodeContainer > .Description {
    display: flex;
    width: 100%;
    height: auto;
    flex-shrink: 0;
    overflow-wrap: anywhere;
    hyphens: auto;
    overflow: scroll;
    justify-content: center;
    text-align: center; }
  .PinCodeContainer > .InputContainer {
    width: 100%;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--innerPadding);
    flex-shrink: 0; }
    .PinCodeContainer > .InputContainer > .InputField {
      height: 100%;
      aspect-ratio: 1;
      border-radius: 100%;
      background: var(--backgroundColor40Percent);
      transition-duration: 0.2s; }
  .PinCodeContainer > .DigitsContainer {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--innerPadding);
    width: min-content;
    flex-shrink: 0; }
    .PinCodeContainer > .DigitsContainer > .DigitContainer {
      width: 80px;
      aspect-ratio: 1;
      background: var(--backgroundColor100Percent);
      border-radius: var(--innerBorderRadius);
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative; }