.ForceMinWidth {
  min-width: 100% !important;
}

.PageBodyWrapper:has(.DashboardSection) {
  background: var(--slds-g-color-surface-2);

  .DashboardFooter {
    left: var(--slds-g-spacing-6);
    right: var(--slds-g-spacing-6);
    width: auto;

    .Welcome {
      top: var(--slds-g-spacing-0);
    }
  }

  .slick-dots li button:before {
    color: var(--slds-g-color-palette-neutral-80) !important;
  }
  .slick-dots li.slick-active button:before {
    color: var(--slds-g-color-accent-container-1) !important;
  }
}

.DashboardSection {
  .FlexContainer();
  font-size: 1em;
  width: 100%;
  height: 100%;
  position: absolute;

  .ButtonGridArea {
    width: auto;
    height: 100%;
    overflow: hidden;

    .ButtonGridContainer {
      width: 100%;
      height: 100%;
    }

    .DashboardCarousel {
      position: relative;
    }

    .ImageButton {
      min-width: 6em;
      min-height: 6em;
      max-width: 10em;
      max-height: 10em;
      border: none;
      background: transparent;
      vertical-align: unset;
      //Theming - color: @foreground;

      .RoundRect{
        display: table-cell;
        vertical-align: middle;
        text-align: center;
      }

      .Badge {
        position: absolute;
        top: 10px;
        right: 10px;
      }
      img {
        width: 48px;
        height: 48px;
      }
    }

    .ImageButton--lumina.ImageButton--secondary {
      display: inline-grid;
      grid-template-rows: 1fr auto;
      grid-template-columns: 1fr;
      justify-items: center;
      align-items: center;
      width: 8.25em;
      height: 10.25em;
      border: none;
      background: transparent;
      border-radius: 0;
      padding: var(--slds-g-spacing-2);
      gap: var(--slds-g-spacing-1);
      margin: 0.5em;
      vertical-align: unset;

      &::before {
        content: '';
        grid-row: 1;
        grid-column: 1;
        width: 70%;
        aspect-ratio: 1;
        border-radius: 50%;
        background: var(--slds-g-color-surface-container-1);
      }

      .ImageButton__icon {
        grid-row: 1;
        grid-column: 1;
        z-index: 1;
        width: var(--slds-g-sizing-10) !important;
        height: var(--slds-g-sizing-10) !important;
      }

      .ImageButton__label {
        grid-row: 2;
        grid-column: 1;
        font-size: var(--slds-g-font-scale-1);
        max-width: 100%;
        text-align: center;
        text-wrap: wrap;
      }

      &.ImageButton--pressed::before {
        background: var(--slds-g-color-surface-container-2);
      }

    }
  }

  .DashboardHeader {
    width: 100%;
    min-height: 6em;
    max-height: 20em;
    position: fixed;

    .Logos {
      .FlexContainerHorizontal();
      .DashboardHeaderContents {
        .ForceMinWidth();
        .alignCenter();
        .helper {
          display: inline-block;
          vertical-align: bottom;
        }

        .logo1 {
          margin-left: 2em;
        }
        .logo2 {
          margin-right: 2em;
        }
      }
    }
  }

  .DashboardFooter {
    .FlexContainerHorizontal();
    position: fixed;
    max-height: 10em;
    bottom: 0;
    width: 100%;

    .Welcome {
      position: relative;
      top: -1em;
      margin-left: 2%;
      width: 50%;

      .DefaultLogo {
        font-size: 3em;
      }

      .UserIcon {
        width: 3em;
        height: 3em;
        -webkit-border-radius: 3em;
        -moz-border-radius: 3em;
        border-radius: 3em;
        float: left;
      }

      .WelcomeMessage {
        margin: 0.5em 0 0 0.5em;
        float: left;
      }
    }

    .ReplicationInfoArea {
      width: 50%;
      margin: auto;
      font-size: 0.8em;
      right: 2%;
      position: relative;

      .ReplicationFlexArea {
        .FlexContainerHorizontal();
        float: right;
        .alignRight();

        .ReplicationInfoLabels {
          margin: auto 1em auto auto;
          font-weight: bold;
          .Icon {
            font-size: 115%;
          }
        }

        .ReplicationButton {
          //Theming - border: 2px solid #F8B92E;
          border: 2px solid;
          //Theming - color: #F8B92E;
          padding: .5em 1em .5em 1em;
          -webkit-border-radius: 4em;
          -moz-border-radius: 4em;
          border-radius: 4em;
          font-weight: lighter;
          text-transform: uppercase;

          .RefreshIcon {
            margin: 0 0.5em 0 0;
            font-weight: bold;
          }
        }
      }

      .ReplicationFlexAreaWindows {
        .FlexContainerHorizontal();
        float: right;
        margin: 1em auto auto auto;
        .alignRight();

        .ReplicationInfoLabelsWindows {
          margin: 0.5em 1em 0.5em auto;
          font-weight: bold;
          .Icon {
            font-size: 115%;
          }
          
        }

        .ReplicationButton {
          //Theming - border: 2px solid #F8B92E;
          border: 2px solid;
          //Theming - color: #F8B92E;
          padding: .5em 1em .5em 1em;
          -webkit-border-radius: 4em;
          -moz-border-radius: 4em;
          border-radius: 4em;
          font-weight: lighter;
          text-transform: uppercase;

          .RefreshIcon {
            margin: 0 0.5em 0 0;
            font-weight: bold;
          }
        }
      }
    }
    //new style for new Replication Area component

    .ReplicationAreaNew {
      display: flex;
      width: 50%;
      justify-content: flex-end;
      align-items: center;
      font-size: 0.8em;
      @media @phone {
        font-size: 0.5em;
      }
      
  
      .ReplicationInfoAreaWrapper{
          font-style: normal;
          font-variant-caps: normal;
          font-weight: normal;
          font-stretch: normal;
          font-weight: bold;
          @media @phone {
            font-size: 11px;
          }
          line-height: normal;
          font-family: "Medium";
         
          .UploadInfo,.DownLoadInfo{
              margin: 1px;
              .ReplicationTimestampVisualization{
                .InfoIcon{
                  display: inline-block;
                  i {
                  margin: 0px 2px;
                  }
                }
                .TimeStamp{
                  display: inline-block;
                }
              }
          }
      }
      .ReplicationButtonWrapper{
          button {
              padding: 1em;
          }
      }
      .SyncHealthIndicatorWrapper {
        display: none;
      }  
    }
  }
}

//React-Slick Overrides
.slick-dots li button:before {
  font-size: 10px !important;
}

.slick-list {
  overflow: visible !important;
}


.slick-dots li button {
  color: inherit !important;
}

.slick-dots li button:before {
  color: inherit !important;
}