/*.DeviceControlContainer#StatusDeviceControlContainer{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--innerPadding);*/
.GroupContainer {
  width: calc(100% - 2*var(--innerPadding));
  display: flex;
  flex-direction: column;
  background: var(--backgroundColor40Percent);
  border-radius: var(--outerBorderRadius);
  padding: var(--innerPadding);
  max-height: 125px; }
  .GroupContainer > .Header {
    line-height: var(--lineHeight);
    height: 25px;
    width: 100%;
    font-size: var(--normalTextSize); }
  .GroupContainer > .LinesContainer {
    width: 100%;
    overflow: hidden;
    display: grid;
    grid-template-rows: 1fr 1fr 1fr 1fr;
    font-size: var(--smallTextSize);
    height: calc(100% - 25px);
    flex-shrink: 0; }
    .GroupContainer > .LinesContainer > .LineContainer {
      display: flex;
      overflow-x: scroll;
      overflow-y: hidden;
      max-width: 100%;
      width: max-content;
      height: 100%;
      flex-direction: row;
      justify-content: flex-start; }
      .GroupContainer > .LinesContainer > .LineContainer > .StatusContainer {
        display: flex;
        gap: var(--innerPadding);
        white-space: nowrap;
        height: 100%; }
        .GroupContainer > .LinesContainer > .LineContainer > .StatusContainer:not(:first-child)::before {
          content: "|";
          margin: 0px var(--innerPadding);
          display: flex;
          align-items: center; }
        .GroupContainer > .LinesContainer > .LineContainer > .StatusContainer > .Key {
          display: flex;
          align-items: center; }
        .GroupContainer > .LinesContainer > .LineContainer > .StatusContainer > .Value {
          display: flex;
          align-items: center;
          max-height: 100%;
          max-width: 100%;
          width: auto; }

/*}*/
.ContentContainer > .DeviceControlContainer#StatusDeviceControlContainer {
  height: calc(100% - 2* var(--outerPadding));
  width: calc(100% - var(--outerPadding));
  padding: var(--outerPadding) var(--outerPadding) var(--outerPadding) 0px;
  display: flex;
  flex-direction: column;
  overflow: scroll;
  gap: var(--outerBorderRadius);
  top: 0px;
  position: absolute; }
  @media only screen and (min-height: 100vw) {
    .ContentContainer > .DeviceControlContainer#StatusDeviceControlContainer {
      width: calc(100% - 2 * var(--outerPadding));
      padding: var(--outerPadding); } }
.IFrameContainer {
  position: absolute;
  height: calc(100% - 2* var(--outerPadding));
  width: calc(100% - var(--outerPadding));
  top: var(--outerPadding);
  background: var(--backgroundColor2);
  display: grid;
  grid-template: "a b" calc(30px + 2* var(--innerPadding)) "c c" 1fr/calc(30px + 1* var(--innerPadding)) 1fr;
  gap: 0 var(--innerPadding);
  border-radius: var(--outerBorderRadius);
  overflow: hidden;
  left: 0px; }
  @media only screen and (min-height: 100vw) {
    .IFrameContainer {
      width: calc(100% - 2 * var(--outerPadding));
      left: var(--outerPadding); } }
  .IFrameContainer > .IFrameCloseContainer {
    position: relative;
    display: flex;
    overflow: hidden;
    border-radius: var(--innerBorderRadius);
    align-items: center;
    justify-content: center;
    margin: var(--innerPadding) 0 var(--innerPadding) var(--innerPadding); }
    .IFrameContainer > .IFrameCloseContainer::before {
      transform: translate(0%, 0%);
      transform-origin: 50% 50%; }
    .IFrameContainer > .IFrameCloseContainer > .IFrameCloseImage {
      max-height: 100%;
      max-width: 100%;
      filter: invert(1); }
  .IFrameContainer > .IframeTitle {
    display: flex;
    align-items: center;
    margin: var(--innerPadding) var(--innerPadding) var(--innerPadding) 0; }
  .IFrameContainer > .IFrameBody {
    width: 100%;
    height: 100%;
    grid-area: c;
    padding: unset;
    margin: unset;
    border: unset; }

.WindowContainer {
  position: absolute;
  width: calc(100% - var(--outerPadding));
  height: calc(100% - 2* var(--outerPadding));
  top: var(--outerPadding);
  left: 0px;
  background: var(--backgroundColor2);
  display: grid;
  grid-template: "a b" calc(30px + 2* var(--innerPadding)) "c c" 1fr/calc(30px + 1* var(--innerPadding)) 1fr;
  gap: 0 var(--innerPadding);
  border-radius: var(--outerBorderRadius);
  overflow: hidden; }
  @media only screen and (min-height: 100vw) {
    .WindowContainer {
      width: calc(100% - 2 * var(--outerPadding));
      left: var(--outerPadding); } }
  .WindowContainer > .WindowCloseContainer {
    position: relative;
    display: flex;
    overflow: hidden;
    border-radius: var(--innerBorderRadius);
    align-items: center;
    justify-content: center;
    margin: var(--innerPadding) 0 var(--innerPadding) var(--innerPadding); }
    .WindowContainer > .WindowCloseContainer::before {
      transform: translate(0%, 0%);
      transform-origin: 50% 50%; }
    .WindowContainer > .WindowCloseContainer > .WindowCloseImage {
      max-height: 100%;
      max-width: 100%;
      filter: invert(1); }
  .WindowContainer > .WindowTitle {
    display: flex;
    align-items: center;
    margin: var(--innerPadding) var(--innerPadding) var(--innerPadding) 0; }
  .WindowContainer > .WindowBody {
    width: 100%;
    height: 100%;
    grid-area: c;
    padding: unset;
    margin: unset;
    border: unset; }