.ContentContainer > .DeviceControlContainer#SceneDeviceControlContainer {
  width: calc(100% - var(--outerPadding));
  padding: var(--outerPadding) var(--outerPadding) var(--outerPadding) 0px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--outerPadding);
  position: absolute;
  overflow: scroll;
  top: 0px; }
  @media only screen and (min-height: 100vw) {
    .ContentContainer > .DeviceControlContainer#SceneDeviceControlContainer {
      width: calc(100% - 2 * var(--outerPadding));
      padding: var(--outerPadding); } }
  .ContentContainer > .DeviceControlContainer#SceneDeviceControlContainer > .SceneContainer {
    background: #000000;
    color: var(--globalFontColor);
    width: calc(100% - 2*var(--innerPadding));
    overflow: hidden;
    display: grid;
    grid-template: "a b c" 1fr "a b e" 1fr "a d e" 1fr/minmax(auto, 1fr) 5fr minmax(0px, 1fr);
    border-radius: var(--outerBorderRadius);
    position: relative;
    transition-duration: 0.2s;
    align-items: center;
    padding: var(--innerPadding);
    gap: 0px var(--innerPadding);
    justify-items: center; }
    @media only screen and (max-width: 500px) {
      .ContentContainer > .DeviceControlContainer#SceneDeviceControlContainer > .SceneContainer {
        width: calc(100% - 2* var(--innerPadding)) !important;
        height: calc(100% - 2* var(--innerPadding)) !important;
        padding: var(--innerPadding);
        aspect-ratio: 1;
        grid-template: "a e c" auto "d d d" 20px "b b b" 1fr / 2fr 2fr 1fr;
        gap: unset; } }
    .ContentContainer > .DeviceControlContainer#SceneDeviceControlContainer > .SceneContainer::before {
      transform: translate(0%, 0%);
      transform-origin: 50% 50%;
      height: 800%; }
    .ContentContainer > .DeviceControlContainer#SceneDeviceControlContainer > .SceneContainer > .SceneImage {
      grid-area: a;
      border-radius: var(--innerBorderRadius);
      z-index: 1;
      background: black;
      justify-self: start;
      width: 66px;
      max-height: 66px; }
      @media only screen and (max-width: 500px) {
        .ContentContainer > .DeviceControlContainer#SceneDeviceControlContainer > .SceneContainer > .SceneImage {
          max-width: 100%;
          max-height: 100%; } }
    .ContentContainer > .DeviceControlContainer#SceneDeviceControlContainer > .SceneContainer > .SceneTitle {
      grid-area: b;
      display: flex;
      width: 100%;
      max-height: 100%;
      font-family: 'ManropeRegular';
      font-size: var(--normalTextSize);
      hyphens: auto;
      overflow: scroll;
      line-height: var(--lineHeight);
      max-height: 40px; }
      @media only screen and (max-width: 500px) {
        .ContentContainer > .DeviceControlContainer#SceneDeviceControlContainer > .SceneContainer > .SceneTitle {
          margin-left: unset;
          text-align: center;
          display: unset; } }
    .ContentContainer > .DeviceControlContainer#SceneDeviceControlContainer > .SceneContainer > .StatusDot {
      grid-area: c;
      min-width: 20px;
      max-height: 20px;
      aspect-ratio: 1;
      border-radius: 100%;
      justify-self: self-end;
      align-self: start; }
    .ContentContainer > .DeviceControlContainer#SceneDeviceControlContainer > .SceneContainer > .Timebar {
      grid-area: d;
      color: var(--globalTextboxColor);
      display: flex;
      width: 100%;
      max-height: 100%;
      justify-content: center;
      font-family: 'ManropeRegular'; }
    .ContentContainer > .DeviceControlContainer#SceneDeviceControlContainer > .SceneContainer > .TimerIcon {
      grid-area: e;
      max-height: 100%;
      min-width: 30px;
      max-width: 30px;
      filter: invert(1);
      opacity: 0;
      transition-duration: 0.5s;
      justify-self: end;
      align-self: end;
      transform: translateX(4px); }
      @media only screen and (max-width: 500px) {
        .ContentContainer > .DeviceControlContainer#SceneDeviceControlContainer > .SceneContainer > .TimerIcon {
          transform: translateY(-4px);
          justify-self: center;
          align-self: start; } }
.SteeringContainer > .DeviceControlSteeringContainer#SceneDeviceControlSteeringContainer {
  height: 100%;
  width: 100%;
  gap: 25px;
  flex-shrink: 0;
  display: grid; }
  .SteeringContainer > .DeviceControlSteeringContainer#SceneDeviceControlSteeringContainer > .GroupButtonsContainer {
    max-width: 100%;
    display: flex;
    gap: 20px;
    justify-self: center;
    overflow: scroll;
    scroll-behavior: smooth; }

@keyframes clickedAnimation {
  0% {
    transform: scale(1);
    border-radius: calc(5px* 1); }
  50% {
    transform: scale(0.95);
    border-radius: calc(5px* 1.05); }
  100% {
    transform: scale(1);
    border-radius: calc(5px* 1); } }

.PopUpWindow > .Container > .ConfirmContainer {
  width: max-content;
  height: max-content;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--innerPadding); }
  .PopUpWindow > .Container > .ConfirmContainer > .Header {
    height: 41px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    flex-shrink: 0;
    gap: var(--innerPadding); }
    .PopUpWindow > .Container > .ConfirmContainer > .Header > .CloseButtonContainer {
      width: 41px;
      height: 41px;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      align-self: start;
      border-radius: var(--innerBorderRadius); }
      .PopUpWindow > .Container > .ConfirmContainer > .Header > .CloseButtonContainer > .CloseButton {
        max-width: 100%;
        max-height: 100%;
        filter: invert(1); }
    .PopUpWindow > .Container > .ConfirmContainer > .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); }
  .PopUpWindow > .Container > .ConfirmContainer > .ButtonsContainer {
    width: 100%;
    height: auto;
    display: flex;
    overflow: scroll;
    gap: var(--innerPadding);
    flex-shrink: 0;
    flex-wrap: wrap;
    touch-action: pan-y;
    justify-content: center; }
    .PopUpWindow > .Container > .ConfirmContainer > .ButtonsContainer > .Button {
      width: calc(130px - 2 * var(--innerPadding));
      min-height: calc(1.5* var(--normalTextSize));
      border-radius: var(--innerBorderRadius);
      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; }
      .PopUpWindow > .Container > .ConfirmContainer > .ButtonsContainer > .Button::before {
        transform: translate(0%, 0%);
        transform-origin: 50% 50%;
        height: 350%; }