.ContentContainer > .DeviceControlContainer#DashboardModuleDeviceControlContainer {
  height: calc(100% - 2* var(--outerPadding));
  width: calc(100% - var(--outerPadding));
  padding: var(--outerPadding) var(--outerPadding) var(--outerPadding) 0px;
  display: grid;
  overflow: scroll;
  grid-template: 'a' min-content 'c' 1fr / 1fr;
  border-radius: var(--outerBorderRadius);
  gap: var(--outerPadding);
  top: 0px;
  position: absolute; }
  @media only screen and (min-height: 100vw) {
    .ContentContainer > .DeviceControlContainer#DashboardModuleDeviceControlContainer {
      width: calc(100% - 2 * var(--outerPadding));
      padding: var(--outerPadding); } }
  .ContentContainer > .DeviceControlContainer#DashboardModuleDeviceControlContainer > .NotificationsContainer {
    grid-area: a;
    background: var(--backgroundColor2);
    border-radius: var(--outerBorderRadius);
    width: 100%;
    height: max-content; }
    .ContentContainer > .DeviceControlContainer#DashboardModuleDeviceControlContainer > .NotificationsContainer > .NotificationContent {
      width: calc(100% - 2* var(--innerPadding));
      background: var(--backgroundColor2);
      border-radius: var(--innerBorderRadius);
      min-height: calc(3* var(--normalTextSize));
      display: flex;
      padding: var(--innerPadding);
      overflow-wrap: anywhere;
      hyphens: auto;
      overflow: scroll; }
  .ContentContainer > .DeviceControlContainer#DashboardModuleDeviceControlContainer > .FavouriteButtonsContainer {
    width: 100%;
    height: auto;
    display: grid;
    grid-template: 1fr/repeat(auto-fill, minmax(100px, 1fr));
    gap: var(--outerPadding);
    grid-area: c;
    align-items: start;
    height: min-content; }
    @media only screen and (min-width: 1200px) {
      .ContentContainer > .DeviceControlContainer#DashboardModuleDeviceControlContainer > .FavouriteButtonsContainer {
        grid-template: 1fr/repeat(auto-fill, minmax(130px, 1fr)); } }
    .ContentContainer > .DeviceControlContainer#DashboardModuleDeviceControlContainer > .FavouriteButtonsContainer > .FavouriteButtonContainer {
      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)); }
      .ContentContainer > .DeviceControlContainer#DashboardModuleDeviceControlContainer > .FavouriteButtonsContainer > .FavouriteButtonContainer > .Image {
        filter: invert(1);
        max-width: 100%;
        max-height: 100%; }
      .ContentContainer > .DeviceControlContainer#DashboardModuleDeviceControlContainer > .FavouriteButtonsContainer > .FavouriteButtonContainer > .Title {
        font-size: var(--smallTextSize);
        overflow-wrap: anywhere;
        text-align: center;
        line-height: var(--lineHeight);
        overflow: scroll;
        max-height: 100%;
        text-transform: uppercase; }
    .ContentContainer > .DeviceControlContainer#DashboardModuleDeviceControlContainer > .FavouriteButtonsContainer > .CalendarWidgetContainer {
      grid-row: span 2;
      grid-column: span 2;
      grid-column-end: -1;
      grid-row-end: -1;
      aspect-ratio: 1;
      width: calc(100% - 2* var(--innerPadding));
      height: calc(100% - 2* var(--innerPadding));
      overflow: scroll;
      padding: var(--innerPadding);
      background: #131313;
      border-radius: var(--outerBorderRadius); }
      @media only screen and (max-width: 500px) {
        .ContentContainer > .DeviceControlContainer#DashboardModuleDeviceControlContainer > .FavouriteButtonsContainer > .CalendarWidgetContainer {
          display: none; } }
    .ContentContainer > .DeviceControlContainer#DashboardModuleDeviceControlContainer > .FavouriteButtonsContainer > .GroupContainer {
      grid-column: span 2;
      grid-column-end: -1;
      overflow: scroll;
      display: flex;
      flex-direction: column;
      width: calc(100% - 2* var(--innerPadding));
      height: 107px;
      background: #131313;
      padding: var(--innerPadding);
      border-radius: var(--outerBorderRadius); }
      @media only screen and (max-width: 500px) {
        .ContentContainer > .DeviceControlContainer#DashboardModuleDeviceControlContainer > .FavouriteButtonsContainer > .GroupContainer {
          display: none; } }
  .ContentContainer > .DeviceControlContainer#DashboardModuleDeviceControlContainer > .InformationsContainer {
    grid-area: b;
    overflow: scroll;
    height: 100%;
    gap: var(--innerPadding);
    display: flex;
    flex-direction: column; }
    @media only screen and (min-height: 100vw) {
      .ContentContainer > .DeviceControlContainer#DashboardModuleDeviceControlContainer > .InformationsContainer {
        display: none; } }
.ContentContainer > .Dashboard {
  display: none;
  opacity: 0;
  transition-duration: 1s;
  flex-direction: column;
  align-items: center;
  overflow: scroll;
  width: 95%;
  touch-action: pan-y; }
  .ContentContainer > .Dashboard > .MessagesContainer {
    width: calc(100% - 20px);
    background: var(--backgroundColor40Percent);
    height: min-content;
    padding: 10px;
    display: flex;
    justify-content: center;
    gap: 5px;
    border-radius: 10px;
    align-content: flex-start;
    flex-direction: column; }
    .ContentContainer > .Dashboard > .MessagesContainer > .MessagesTitle {
      width: 100%;
      color: var(--globalFontColor);
      font-size: 1.2rem;
      font-weight: bold; }
    .ContentContainer > .Dashboard > .MessagesContainer > .MessageContainer {
      width: 100%;
      height: min-content;
      display: flex;
      flex-direction: column;
      height: 70px;
      background: var(--backgroundColor100Percent);
      border-radius: 5px;
      flex-wrap: wrap;
      color: var(--globalFontColor); }
      .ContentContainer > .Dashboard > .MessagesContainer > .MessageContainer > .MessageImage {
        max-height: 100%;
        aspect-ratio: 1; }
      .ContentContainer > .Dashboard > .MessagesContainer > .MessageContainer > .MessageContent {
        height: calc(75% - 10px);
        width: calc(100% - 90px);
        margin: 5px 10px;
        overflow: scroll; }
      .ContentContainer > .Dashboard > .MessagesContainer > .MessageContainer > .MessageDate {
        height: 25%;
        font-size: 0.8rem;
        text-indent: 10px;
        display: flex;
        align-items: center;
        color: #aaaaaa; }
  .ContentContainer > .Dashboard .Favourites {
    width: 100%; }
    .ContentContainer > .Dashboard .Favourites > .Title {
      margin: 10px 0px 20px 0px;
      background: var(--spGold);
      width: calc(100% - 10px);
      border-radius: 5px;
      height: 65px;
      line-height: 65px;
      color: var(--globalFontColor);
      font-family: 'ManropeLight';
      font-size: 1.2rem;
      padding-left: 10px;
      overflow: hidden;
      text-overflow: ellipsis;
      position: relative; }

.CalendarWidgetContainer {
  font-family: 'ManropeLight';
  display: flex;
  flex-direction: column;
  width: calc(100% - 6* var(--innerPadding));
  color: var(--globalFontColor);
  background: var(--backgroundColor40Percent);
  border-radius: var(--outerBorderRadius);
  padding: calc(var(--innerPadding)*3); }
  .CalendarWidgetContainer > .CalendarHeader {
    width: 100%;
    display: flex;
    justify-content: space-evenly; }
  .CalendarWidgetContainer > .CalendarWeekdayHeader {
    width: 100%;
    display: flex;
    justify-content: space-evenly; }
    .CalendarWidgetContainer > .CalendarWeekdayHeader > .CalendarWeekday {
      width: calc(100% / 7);
      display: flex;
      justify-content: center;
      align-items: center;
      aspect-ratio: 1; }
  .CalendarWidgetContainer > .CalendarDaysContainer {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    flex-grow: 1; }
    .CalendarWidgetContainer > .CalendarDaysContainer > .CalendarEntry {
      width: calc((100% - 30px) / 7);
      display: flex;
      justify-content: center;
      align-items: center;
      aspect-ratio: 1;
      border-radius: var(--innerBorderRadius); }

@media only screen and (min-height: 100vw) {
  .Favourites {
    width: calc(100% - 0px) !important; } }

.SteeringContainer > .DeviceControlSteeringContainer#DashboardModuleDeviceControlSteeringContainer {
  height: 100%;
  width: 100%;
  gap: var(--outerPadding);
  flex-shrink: 0;
  display: flex;
  flex-direction: row-reverse; }
  .SteeringContainer > .DeviceControlSteeringContainer#DashboardModuleDeviceControlSteeringContainer > .SettingsButtonContainer {
    height: 100%;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: var(--outerBorderRadius);
    position: relative;
    background: var(--backgroundColor100Percent);
    display: flex;
    justify-content: center;
    align-items: center; }
    .SteeringContainer > .DeviceControlSteeringContainer#DashboardModuleDeviceControlSteeringContainer > .SettingsButtonContainer > .SettingsImage {
      filter: invert(1);
      width: 100%;
      height: 100%; }
  .SteeringContainer > .DeviceControlSteeringContainer#DashboardModuleDeviceControlSteeringContainer > .InfoboardButtonContainer {
    height: 100%;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: var(--outerBorderRadius);
    position: relative;
    background: var(--backgroundColor100Percent);
    display: flex;
    justify-content: center;
    align-items: center; }
    .SteeringContainer > .DeviceControlSteeringContainer#DashboardModuleDeviceControlSteeringContainer > .InfoboardButtonContainer > .InfoboardImage {
      filter: invert(1);
      width: 100%;
      height: 100%; }

#DashboardFunctionsContainer {
  width: 700px;
  height: 500px;
  max-width: calc(100% - 0*var(--outerPadding));
  max-height: calc(100% - 2*var(--outerPadding));
  display: grid;
  grid-template-rows: 32px 1fr;
  gap: var(--innerPadding); }
  @media only screen and (max-width: 500px) {
    #DashboardFunctionsContainer {
      grid-template-rows: 32px 0px 1fr; } }
  #DashboardFunctionsContainer > .Header {
    width: 100%;
    height: 100%;
    display: flex;
    gap: var(--innerPadding); }
    #DashboardFunctionsContainer > .Header > .CloseButtonContainer {
      height: 100%;
      aspect-ratio: 1;
      border-radius: var(--innerBorderRadius);
      overflow: hidden;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center; }
      #DashboardFunctionsContainer > .Header > .CloseButtonContainer > img.closeButton {
        max-height: 100%;
        max-width: 100%;
        filter: invert(1); }
    #DashboardFunctionsContainer > .Header > .Title {
      height: 100%;
      display: flex;
      align-items: center; }
  #DashboardFunctionsContainer > .NavigationButtonsContainer {
    width: 100%;
    height: 100%;
    display: none; }
    @media only screen and (max-width: 500px) {
      #DashboardFunctionsContainer > .NavigationButtonsContainer {
        display: flex; } }
    #DashboardFunctionsContainer > .NavigationButtonsContainer > .BackButtonContainer.Clickable {
      height: 100%;
      position: relative;
      overflow: hidden;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: var(--innerBorderRadius);
      background: var(--backgroundColor2); }
      #DashboardFunctionsContainer > .NavigationButtonsContainer > .BackButtonContainer.Clickable::before {
        transform: translate(0%, 0%);
        transform-origin: 50% 50%;
        height: 350%; }
      #DashboardFunctionsContainer > .NavigationButtonsContainer > .BackButtonContainer.Clickable > img {
        width: 100%;
        height: 100%;
        filter: invert(1); }
  #DashboardFunctionsContainer > .Body {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: var(--innerPadding);
    width: 100%;
    height: 100%; }
    @media only screen and (max-width: 500px) {
      #DashboardFunctionsContainer > .Body {
        grid-template-columns: 1fr; } }
    #DashboardFunctionsContainer > .Body > .MenuButtonsContainer {
      display: flex;
      flex-direction: column;
      gap: var(--innerPadding);
      height: calc(100% - 2* var(--innerPadding));
      width: calc(100% - 2* var(--innerPadding));
      padding: var(--innerPadding);
      border-right: 1px solid var(--spGold); }
      @media only screen and (max-width: 500px) {
        #DashboardFunctionsContainer > .Body > .MenuButtonsContainer {
          border-right: none; } }
      #DashboardFunctionsContainer > .Body > .MenuButtonsContainer > .GoToSettingsButtonContainer, #DashboardFunctionsContainer > .Body > .MenuButtonsContainer .SoundSettingsButtonContainer {
        position: relative;
        display: flex;
        width: calc(100% - 2* var(--innerPadding));
        overflow: hidden;
        border-radius: var(--innerBorderRadius);
        align-items: center;
        height: calc(35px - 2* var(--innerPadding));
        padding: var(--innerPadding); }
        #DashboardFunctionsContainer > .Body > .MenuButtonsContainer > .GoToSettingsButtonContainer::before, #DashboardFunctionsContainer > .Body > .MenuButtonsContainer .SoundSettingsButtonContainer::before {
          height: 500%; }
    #DashboardFunctionsContainer > .Body > .MenuContainer {
      width: calc(100% - 2* var(--innerPadding));
      height: min-content;
      max-height: calc(100% - 2* var(--innerPadding));
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: var(--innerPadding);
      background: var(--backgroundColor2);
      border-radius: var(--outerBorderRadius);
      padding: var(--innerPadding);
      overflow: scroll; }
      #DashboardFunctionsContainer > .Body > .MenuContainer > .ButtonContainer {
        width: calc(100% - 2* var(--innerPadding));
        height: calc(50px - 2* var(--innerPadding));
        display: grid;
        grid-template-columns: 1fr 20px;
        background: var(--backgroundColor100Percent);
        border-radius: var(--innerBorderRadius);
        padding: var(--innerPadding);
        gap: var(--innerPadding);
        position: relative;
        overflow: hidden;
        align-items: center;
        justify-items: center; }
        #DashboardFunctionsContainer > .Body > .MenuContainer > .ButtonContainer::before {
          transform: translate(0%, 0%);
          transform-origin: 50% 50%;
          height: 800%; }
        #DashboardFunctionsContainer > .Body > .MenuContainer > .ButtonContainer > .Description {
          display: flex; }
        #DashboardFunctionsContainer > .Body > .MenuContainer > .ButtonContainer > .StatusDot {
          align-self: start;
          width: 15px;
          height: 15px;
          border-radius: 100%;
          background: var(--backgroundColor2);
          justify-self: end;
          transition-duration: 0.5s; }
      #DashboardFunctionsContainer > .Body > .MenuContainer > .Description {
        display: flex;
        width: 100%;
        height: 30px;
        flex-shrink: 0;
        overflow-wrap: anywhere;
        hyphens: auto;
        overflow: scroll;
        justify-content: center; }
      #DashboardFunctionsContainer > .Body > .MenuContainer > .InputContainer {
        width: 100%;
        height: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: var(--innerPadding);
        flex-shrink: 0; }
        #DashboardFunctionsContainer > .Body > .MenuContainer > .InputContainer > .InputField {
          height: 100%;
          aspect-ratio: 1;
          border-radius: 100%;
          background: var(--backgroundColor40Percent);
          transition-duration: 0.2s; }
      #DashboardFunctionsContainer > .Body > .MenuContainer .DigitsContainer {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: var(--innerPadding);
        width: min-content;
        flex-shrink: 0; }
        #DashboardFunctionsContainer > .Body > .MenuContainer .DigitsContainer > .DigitContainer {
          width: 70px;
          aspect-ratio: 1;
          background: var(--backgroundColor100Percent);
          border-radius: var(--innerBorderRadius);
          overflow: hidden;
          display: flex;
          align-items: center;
          justify-content: center;
          position: relative; }
          #DashboardFunctionsContainer > .Body > .MenuContainer .DigitsContainer > .DigitContainer::before {
            transform: translate(0%, 0%);
            transform-origin: 50% 50%;
            height: 200%; }