.ContentContainer > .DeviceControlContainer#SurveillanceDeviceControlContainer, .DeviceControlContainer#RecordingsDeviceControlContainer {
  height: calc(100% - 2* var(--outerPadding));
  width: calc(100% - var(--outerPadding));
  padding: var(--outerPadding) var(--outerPadding) var(--outerPadding) 0px; }
  @media only screen and (min-height: 100vw) {
    .ContentContainer > .DeviceControlContainer#SurveillanceDeviceControlContainer, .DeviceControlContainer#RecordingsDeviceControlContainer {
      width: calc(100% - 2 * var(--outerPadding));
      padding: var(--outerPadding); } }
  .ContentContainer > .DeviceControlContainer#SurveillanceDeviceControlContainer > .HeaderContainer, .DeviceControlContainer#RecordingsDeviceControlContainer > .HeaderContainer {
    width: calc(100% - 20px);
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    margin: 0px 10px;
    border-radius: 10px; }
    .ContentContainer > .DeviceControlContainer#SurveillanceDeviceControlContainer > .HeaderContainer > .DayBack, .DeviceControlContainer#RecordingsDeviceControlContainer > .HeaderContainer > .DayBack {
      width: 40px;
      aspect-ratio: 1;
      background: var(--surveillanceColor);
      border-radius: 10px;
      position: relative;
      overflow: hidden;
      display: flex;
      justify-content: center;
      align-items: center; }
      .ContentContainer > .DeviceControlContainer#SurveillanceDeviceControlContainer > .HeaderContainer > .DayBack > .DayBackIcon, .DeviceControlContainer#RecordingsDeviceControlContainer > .HeaderContainer > .DayBack > .DayBackIcon {
        color: white;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 200%; }
    .ContentContainer > .DeviceControlContainer#SurveillanceDeviceControlContainer > .HeaderContainer > .DayForward, .DeviceControlContainer#RecordingsDeviceControlContainer > .HeaderContainer > .DayForward {
      width: 40px;
      aspect-ratio: 1;
      background: var(--surveillanceColor);
      border-radius: 10px;
      position: relative;
      overflow: hidden;
      display: flex;
      justify-content: center;
      align-items: center; }
      .ContentContainer > .DeviceControlContainer#SurveillanceDeviceControlContainer > .HeaderContainer > .DayForward > .DayForwardIcon, .DeviceControlContainer#RecordingsDeviceControlContainer > .HeaderContainer > .DayForward > .DayForwardIcon {
        color: white;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 200%; }
    .ContentContainer > .DeviceControlContainer#SurveillanceDeviceControlContainer > .HeaderContainer > input[type="date"], .DeviceControlContainer#RecordingsDeviceControlContainer > .HeaderContainer > input[type="date"] {
      background: #ffffff11;
      color: var(--globalFontColor);
      border: none;
      outline: none;
      display: flex;
      text-align: center;
      height: 40px;
      width: 150px;
      border-radius: 10px;
      padding: 0;
      justify-content: center;
      align-items: center;
      font-size: 1rem;
      background: #3b3b3bc4;
      font-family: 'ManropeRegular'; }
      .ContentContainer > .DeviceControlContainer#SurveillanceDeviceControlContainer > .HeaderContainer > input[type="date"]::-webkit-calendar-picker-indicator, .ContentContainer > .DeviceControlContainer#SurveillanceDeviceControlContainer > .HeaderContainer > input[type="date"]::-webkit-inner-spin-button, .ContentContainer > .DeviceControlContainer#SurveillanceDeviceControlContainer > .HeaderContainer > input[type="date"]::-webkit-clear-button, .DeviceControlContainer#RecordingsDeviceControlContainer > .HeaderContainer > input[type="date"]::-webkit-calendar-picker-indicator, .DeviceControlContainer#RecordingsDeviceControlContainer > .HeaderContainer > input[type="date"]::-webkit-inner-spin-button, .DeviceControlContainer#RecordingsDeviceControlContainer > .HeaderContainer > input[type="date"]::-webkit-clear-button {
        filter: invert(1); }
      .ContentContainer > .DeviceControlContainer#SurveillanceDeviceControlContainer > .HeaderContainer > input[type="date"]::-webkit-datetime-edit-year-field, .ContentContainer > .DeviceControlContainer#SurveillanceDeviceControlContainer > .HeaderContainer > input[type="date"]::-webkit-datetime-edit-month-field, .ContentContainer > .DeviceControlContainer#SurveillanceDeviceControlContainer > .HeaderContainer > input[type="date"]::-webkit-datetime-edit-day-field, .DeviceControlContainer#RecordingsDeviceControlContainer > .HeaderContainer > input[type="date"]::-webkit-datetime-edit-year-field, .DeviceControlContainer#RecordingsDeviceControlContainer > .HeaderContainer > input[type="date"]::-webkit-datetime-edit-month-field, .DeviceControlContainer#RecordingsDeviceControlContainer > .HeaderContainer > input[type="date"]::-webkit-datetime-edit-day-field {
        background: none; }
      .ContentContainer > .DeviceControlContainer#SurveillanceDeviceControlContainer > .HeaderContainer > input[type="date"]:focus-visible, .DeviceControlContainer#RecordingsDeviceControlContainer > .HeaderContainer > input[type="date"]:focus-visible {
        outline: none; }
  .ContentContainer > .DeviceControlContainer#SurveillanceDeviceControlContainer > .VideosContainer, .DeviceControlContainer#RecordingsDeviceControlContainer > .VideosContainer {
    background: #ffffff11;
    width: calc(100% - 2 * var(--innerPadding));
    height: calc(100% - (100px - var(--outerPadding)) - 2 * var(--innerPadding));
    border-radius: var(--outerBorderRadius);
    background: #3b3b3bc4;
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    padding: var(--innerPadding);
    overflow: scroll; }
    .ContentContainer > .DeviceControlContainer#SurveillanceDeviceControlContainer > .VideosContainer svg, .DeviceControlContainer#RecordingsDeviceControlContainer > .VideosContainer svg {
      width: 100%;
      height: 100%; }
    .ContentContainer > .DeviceControlContainer#SurveillanceDeviceControlContainer > .VideosContainer > .VideoContainer, .DeviceControlContainer#RecordingsDeviceControlContainer > .VideosContainer > .VideoContainer {
      background: var(--backgroundColor2);
      max-width: 100%;
      width: calc((100% - 20px) / 2);
      min-width: 250px;
      height: min-content;
      flex-grow: 0;
      display: grid;
      grid-template-rows: 1fr 63px;
      border-radius: 5px;
      overflow: hidden;
      position: relative; }
      @media only screen and (min-height: 100vw) {
        .ContentContainer > .DeviceControlContainer#SurveillanceDeviceControlContainer > .VideosContainer > .VideoContainer, .DeviceControlContainer#RecordingsDeviceControlContainer > .VideosContainer > .VideoContainer {
          flex-grow: 1; } }
      .ContentContainer > .DeviceControlContainer#SurveillanceDeviceControlContainer > .VideosContainer > .VideoContainer > .video, .DeviceControlContainer#RecordingsDeviceControlContainer > .VideosContainer > .VideoContainer > .video {
        width: 100%; }
      .ContentContainer > .DeviceControlContainer#SurveillanceDeviceControlContainer > .VideosContainer > .VideoContainer > .InfoContainer, .DeviceControlContainer#RecordingsDeviceControlContainer > .VideosContainer > .VideoContainer > .InfoContainer {
        display: grid;
        grid-template: 'a a' 1fr 'b c' 1fr / 1fr 1fr;
        width: calc(100% - 2 * var(--innerPadding));
        overflow: scroll;
        color: var(--globalFontColor);
        padding: var(--innerPadding);
        gap: var(--innerPadding); }
        .ContentContainer > .DeviceControlContainer#SurveillanceDeviceControlContainer > .VideosContainer > .VideoContainer > .InfoContainer > .Title, .DeviceControlContainer#RecordingsDeviceControlContainer > .VideosContainer > .VideoContainer > .InfoContainer > .Title {
          grid-area: a;
          line-height: var(--lineHeight); }
        .ContentContainer > .DeviceControlContainer#SurveillanceDeviceControlContainer > .VideosContainer > .VideoContainer > .InfoContainer > .Time, .DeviceControlContainer#RecordingsDeviceControlContainer > .VideosContainer > .VideoContainer > .InfoContainer > .Time {
          grid-area: b;
          line-height: var(--lineHeight); }
        .ContentContainer > .DeviceControlContainer#SurveillanceDeviceControlContainer > .VideosContainer > .VideoContainer > .InfoContainer > .Duration, .DeviceControlContainer#RecordingsDeviceControlContainer > .VideosContainer > .VideoContainer > .InfoContainer > .Duration {
          grid-area: c;
          text-align: end;
          line-height: var(--lineHeight); }
      .ContentContainer > .DeviceControlContainer#SurveillanceDeviceControlContainer > .VideosContainer > .VideoContainer > .MaximizeIcon, .DeviceControlContainer#RecordingsDeviceControlContainer > .VideosContainer > .VideoContainer > .MaximizeIcon {
        position: absolute;
        height: 25px;
        width: 25px;
        background: var(--backgroundColor40Percent);
        right: 10px;
        top: 10px;
        border-radius: var(--innerBorderRadius);
        filter: invert(1); }

.ContentContainer > .DeviceControlContainer#SurveillanceDeviceControlContainer, .DeviceControlContainer#RecordingsDeviceControlContainer {
  position: absolute;
  overflow: scroll;
  display: flex;
  gap: 20px;
  height: calc(100% - 2* var(--outerPadding));
  width: calc(100% - var(--outerPadding));
  padding: var(--outerPadding) var(--outerPadding) var(--outerPadding) 0px;
  flex-wrap: wrap;
  align-self: center;
  justify-content: center;
  border-radius: var(--outerBorderRadius);
  top: 0px; }
  @media only screen and (min-height: 100vw) {
    .ContentContainer > .DeviceControlContainer#SurveillanceDeviceControlContainer, .DeviceControlContainer#RecordingsDeviceControlContainer {
      width: calc(100% - 2 * var(--outerPadding));
      padding: var(--outerPadding); } }
  .ContentContainer > .DeviceControlContainer#SurveillanceDeviceControlContainer > .SurveillanceCam, .DeviceControlContainer#RecordingsDeviceControlContainer > .SurveillanceCam {
    width: calc(50% - 10px);
    flex-grow: 1;
    min-width: 250px;
    max-width: 600px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-self: center;
    border-radius: var(--innerBorderRadius); }
  .ContentContainer > .DeviceControlContainer#SurveillanceDeviceControlContainer .Titlebar, .DeviceControlContainer#RecordingsDeviceControlContainer .Titlebar {
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: space-evenly; }
    .ContentContainer > .DeviceControlContainer#SurveillanceDeviceControlContainer .Titlebar .Prev, .ContentContainer > .DeviceControlContainer#SurveillanceDeviceControlContainer .Titlebar .Next, .DeviceControlContainer#RecordingsDeviceControlContainer .Titlebar .Prev, .DeviceControlContainer#RecordingsDeviceControlContainer .Titlebar .Next {
      height: 100%;
      background: var(--surveillanceTurquoise);
      border-radius: 5px; }
    .ContentContainer > .DeviceControlContainer#SurveillanceDeviceControlContainer .Titlebar .DatePicker, .DeviceControlContainer#RecordingsDeviceControlContainer .Titlebar .DatePicker {
      width: auto;
      background: var(--surveillanceTurquoise);
      border: none;
      border-radius: 5px;
      color: white;
      font-size: 1.2rem;
      font-family: 'ManropeLight';
      padding-inline: unset;
      align-self: center; }
      .ContentContainer > .DeviceControlContainer#SurveillanceDeviceControlContainer .Titlebar .DatePicker::-webkit-calendar-picker-indicator, .ContentContainer > .DeviceControlContainer#SurveillanceDeviceControlContainer .Titlebar .DatePicker::-webkit-inner-spin-button, .ContentContainer > .DeviceControlContainer#SurveillanceDeviceControlContainer .Titlebar .DatePicker::-webkit-clear-button, .DeviceControlContainer#RecordingsDeviceControlContainer .Titlebar .DatePicker::-webkit-calendar-picker-indicator, .DeviceControlContainer#RecordingsDeviceControlContainer .Titlebar .DatePicker::-webkit-inner-spin-button, .DeviceControlContainer#RecordingsDeviceControlContainer .Titlebar .DatePicker::-webkit-clear-button {
        filter: invert(1); }
      .ContentContainer > .DeviceControlContainer#SurveillanceDeviceControlContainer .Titlebar .DatePicker::-webkit-datetime-edit-year-field, .ContentContainer > .DeviceControlContainer#SurveillanceDeviceControlContainer .Titlebar .DatePicker::-webkit-datetime-edit-month-field, .ContentContainer > .DeviceControlContainer#SurveillanceDeviceControlContainer .Titlebar .DatePicker::-webkit-datetime-edit-day-field, .DeviceControlContainer#RecordingsDeviceControlContainer .Titlebar .DatePicker::-webkit-datetime-edit-year-field, .DeviceControlContainer#RecordingsDeviceControlContainer .Titlebar .DatePicker::-webkit-datetime-edit-month-field, .DeviceControlContainer#RecordingsDeviceControlContainer .Titlebar .DatePicker::-webkit-datetime-edit-day-field {
        background: none; }
      .ContentContainer > .DeviceControlContainer#SurveillanceDeviceControlContainer .Titlebar .DatePicker:focus-visible, .DeviceControlContainer#RecordingsDeviceControlContainer .Titlebar .DatePicker:focus-visible {
        outline: none; }
  .ContentContainer > .DeviceControlContainer#SurveillanceDeviceControlContainer > .RecordingsContainer, .DeviceControlContainer#RecordingsDeviceControlContainer > .RecordingsContainer {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    height: calc(100% - 60px);
    overflow: scroll; }
    .ContentContainer > .DeviceControlContainer#SurveillanceDeviceControlContainer > .RecordingsContainer .RecordingItemHourlyContainer, .DeviceControlContainer#RecordingsDeviceControlContainer > .RecordingsContainer .RecordingItemHourlyContainer {
      display: flex;
      flex-direction: column;
      width: 100%;
      height: 100%; }
      .ContentContainer > .DeviceControlContainer#SurveillanceDeviceControlContainer > .RecordingsContainer .RecordingItemHourlyContainer > .Title, .DeviceControlContainer#RecordingsDeviceControlContainer > .RecordingsContainer .RecordingItemHourlyContainer > .Title {
        height: 2rem;
        border-top: 2px solid var(--surveillanceTurquoise);
        display: flex;
        align-items: center;
        text-indent: 5px;
        color: white;
        font-weight: bold;
        border-radius: 5px; }
      .ContentContainer > .DeviceControlContainer#SurveillanceDeviceControlContainer > .RecordingsContainer .RecordingItemHourlyContainer .RecordingsContainer, .DeviceControlContainer#RecordingsDeviceControlContainer > .RecordingsContainer .RecordingItemHourlyContainer .RecordingsContainer {
        display: flex;
        overflow: scroll;
        gap: 10px; }
        .ContentContainer > .DeviceControlContainer#SurveillanceDeviceControlContainer > .RecordingsContainer .RecordingItemHourlyContainer .RecordingsContainer .RecordingItem, .DeviceControlContainer#RecordingsDeviceControlContainer > .RecordingsContainer .RecordingItemHourlyContainer .RecordingsContainer .RecordingItem {
          display: flex;
          color: white;
          flex-direction: column;
          flex-wrap: wrap;
          justify-content: center;
          width: calc(50% - 20px);
          min-width: 300px;
          max-width: 600px;
          flex-grow: 1;
          overflow: hidden;
          background: black;
          border-radius: 10px;
          padding: 5px;
          font-size: 0.8rem;
          align-items: center; }
          .ContentContainer > .DeviceControlContainer#SurveillanceDeviceControlContainer > .RecordingsContainer .RecordingItemHourlyContainer .RecordingsContainer .RecordingItem .Thumbnail, .DeviceControlContainer#RecordingsDeviceControlContainer > .RecordingsContainer .RecordingItemHourlyContainer .RecordingsContainer .RecordingItem .Thumbnail {
            max-width: 100%;
            max-height: calc(100% - 3.5rem);
            background-size: contain;
            background-position: center;
            background-repeat: no-repeat; }
          .ContentContainer > .DeviceControlContainer#SurveillanceDeviceControlContainer > .RecordingsContainer .RecordingItemHourlyContainer .RecordingsContainer .RecordingItem .Title, .DeviceControlContainer#RecordingsDeviceControlContainer > .RecordingsContainer .RecordingItemHourlyContainer .RecordingsContainer .RecordingItem .Title {
            height: 1rem;
            align-self: flex-start;
            align-content: center;
            font-family: 'ManropeRegular';
            text-align: start;
            text-indent: 10px;
            color: var(--surveillanceTurquoise); }
          .ContentContainer > .DeviceControlContainer#SurveillanceDeviceControlContainer > .RecordingsContainer .RecordingItemHourlyContainer .RecordingsContainer .RecordingItem .Duration, .DeviceControlContainer#RecordingsDeviceControlContainer > .RecordingsContainer .RecordingItemHourlyContainer .RecordingsContainer .RecordingItem .Duration {
            height: 1rem;
            align-self: flex-end;
            align-content: center;
            text-align: end; }
          .ContentContainer > .DeviceControlContainer#SurveillanceDeviceControlContainer > .RecordingsContainer .RecordingItemHourlyContainer .RecordingsContainer .RecordingItem .Date, .DeviceControlContainer#RecordingsDeviceControlContainer > .RecordingsContainer .RecordingItemHourlyContainer .RecordingsContainer .RecordingItem .Date {
            height: 1rem;
            align-self: flex-start;
            align-content: center;
            text-align: start;
            font-weight: bold;
            background: var(--surveillanceTurquoise);
            border-radius: 5px;
            margin-left: 10px;
            height: 1.5rem;
            padding: 0px 5px; }

.SteeringContainer > .DeviceControlSteeringContainer#SurveillanceDeviceControlSteeringContainer, .DeviceControlSteeringContainer#RecordingsDeviceControlSteeringContainer {
  height: 100%;
  width: 100%;
  gap: 25px;
  flex-shrink: 0;
  display: grid;
  grid-template-columns: 1fr calc(58px); }
  .SteeringContainer > .DeviceControlSteeringContainer#SurveillanceDeviceControlSteeringContainer > .PageButtonsContainer, .DeviceControlSteeringContainer#RecordingsDeviceControlSteeringContainer > .PageButtonsContainer {
    max-width: 100%;
    display: flex;
    gap: 20px;
    justify-self: center;
    overflow: scroll;
    scroll-behavior: smooth; }
    .SteeringContainer > .DeviceControlSteeringContainer#SurveillanceDeviceControlSteeringContainer > .PageButtonsContainer > .FooterNavigationButton:first-child:last-child, .DeviceControlSteeringContainer#RecordingsDeviceControlSteeringContainer > .PageButtonsContainer > .FooterNavigationButton:first-child:last-child {
      display: none; }
    .SteeringContainer > .DeviceControlSteeringContainer#SurveillanceDeviceControlSteeringContainer > .PageButtonsContainer > .FooterNavigationButton > .Icon, .DeviceControlSteeringContainer#RecordingsDeviceControlSteeringContainer > .PageButtonsContainer > .FooterNavigationButton > .Icon {
      filter: invert(1); }
  .SteeringContainer > .DeviceControlSteeringContainer#SurveillanceDeviceControlSteeringContainer > .HourButtonsContainer, .DeviceControlSteeringContainer#RecordingsDeviceControlSteeringContainer > .HourButtonsContainer {
    max-width: 100%;
    height: 100%;
    display: flex;
    gap: 25px;
    overflow: scroll;
    align-items: center;
    justify-self: center; }
    .SteeringContainer > .DeviceControlSteeringContainer#SurveillanceDeviceControlSteeringContainer > .HourButtonsContainer > .HoureButton, .DeviceControlSteeringContainer#RecordingsDeviceControlSteeringContainer > .HourButtonsContainer > .HoureButton {
      background: var(--surveillanceColor);
      height: 47px;
      width: 47px;
      padding: 5px;
      border-radius: 10px;
      display: flex;
      overflow: hidden;
      position: relative;
      justify-content: center;
      align-items: center;
      color: white;
      font-family: 'ManropeSemiBold';
      flex-shrink: 0; }
      .SteeringContainer > .DeviceControlSteeringContainer#SurveillanceDeviceControlSteeringContainer > .HourButtonsContainer > .HoureButton::before, .DeviceControlSteeringContainer#RecordingsDeviceControlSteeringContainer > .HourButtonsContainer > .HoureButton::before {
        transform: translate(0%, 0%);
        transform-origin: 50% 50%; }
  .SteeringContainer > .DeviceControlSteeringContainer#SurveillanceDeviceControlSteeringContainer > .SwitchToRecordingsButtonContainer, .DeviceControlSteeringContainer#RecordingsDeviceControlSteeringContainer > .SwitchToRecordingsButtonContainer {
    background: var(--surveillanceColor);
    height: 47px;
    width: 47px;
    padding: 5px;
    border-radius: 10px;
    display: flex;
    overflow: hidden;
    position: relative;
    justify-content: center;
    align-items: center; }
    .SteeringContainer > .DeviceControlSteeringContainer#SurveillanceDeviceControlSteeringContainer > .SwitchToRecordingsButtonContainer > .SwitchToRecordingsButton, .DeviceControlSteeringContainer#RecordingsDeviceControlSteeringContainer > .SwitchToRecordingsButtonContainer > .SwitchToRecordingsButton {
      max-height: 100%;
      max-width: 100%;
      filter: invert(1); }
    .SteeringContainer > .DeviceControlSteeringContainer#SurveillanceDeviceControlSteeringContainer > .SwitchToRecordingsButtonContainer::before, .DeviceControlSteeringContainer#RecordingsDeviceControlSteeringContainer > .SwitchToRecordingsButtonContainer::before {
      transform: translate(0%, 0%);
      transform-origin: 50% 50%; }
  .SteeringContainer > .DeviceControlSteeringContainer#SurveillanceDeviceControlSteeringContainer > .SwitchToSurveillanceButtonContainer, .DeviceControlSteeringContainer#RecordingsDeviceControlSteeringContainer > .SwitchToSurveillanceButtonContainer {
    background: var(--surveillanceColor);
    height: 47px;
    width: 47px;
    padding: 5px;
    border-radius: 10px;
    display: flex;
    overflow: hidden;
    position: relative;
    justify-content: center;
    align-items: center; }
    .SteeringContainer > .DeviceControlSteeringContainer#SurveillanceDeviceControlSteeringContainer > .SwitchToSurveillanceButtonContainer > .SwitchToSurveillanceButton, .DeviceControlSteeringContainer#RecordingsDeviceControlSteeringContainer > .SwitchToSurveillanceButtonContainer > .SwitchToSurveillanceButton {
      max-height: 100%;
      max-width: 100%;
      filter: invert(1); }
    .SteeringContainer > .DeviceControlSteeringContainer#SurveillanceDeviceControlSteeringContainer > .SwitchToSurveillanceButtonContainer::before, .DeviceControlSteeringContainer#RecordingsDeviceControlSteeringContainer > .SwitchToSurveillanceButtonContainer::before {
      transform: translate(0%, 0%);
      transform-origin: 50% 50%; }

.SurveillanceSteeringContainer {
  height: 100%;
  width: 100%;
  display: none;
  grid-template-columns: 1fr 57px;
  gap: 25px;
  flex-shrink: 0; }
  .SurveillanceSteeringContainer > .FolderContainer {
    max-width: 100%;
    display: flex;
    gap: 20px;
    justify-self: center;
    overflow: scroll;
    scroll-behavior: smooth; }
    .SurveillanceSteeringContainer > .FolderContainer > .PageButton {
      width: 57px;
      height: 57px;
      border-radius: 8px;
      background: var(--surveillanceTurquoise);
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: scroll;
      font-family: 'ManropeRegular';
      position: relative; }
      .SurveillanceSteeringContainer > .FolderContainer > .PageButton::before {
        transform: translate(0%, 0%);
        transform-origin: 50% 50%; }
  .SurveillanceSteeringContainer > .ModeButtonContainer {
    width: 57px;
    height: 57px;
    background: var(--lightBlue);
    border-radius: 8px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center; }
    .SurveillanceSteeringContainer > .ModeButtonContainer::before {
      transform: translate(0%, 0%);
      transform-origin: 50% 50%; }
    .SurveillanceSteeringContainer > .ModeButtonContainer > .Icon {
      max-width: 90%;
      max-height: 90%; }