html,
body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.apps-main-container {
  display: grid;
  grid-template-columns: max-content auto;
  grid-template-rows: auto;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

.apps-main-container > .apps-container {
  overflow: hidden;
}

.apps-main-container > .apps-container > .app-container:empty {
  display: none;
}

.apps-main-container > .apps-navigator {
  overflow: hidden;
}

.app-loading:before {
  animation: app-dots 1s infinite;
  content: ".";
  color: var(--bs-gray-500);
}

@keyframes app-dots {
  0% {
    content: ".";
  }

  33% {
    content: "..";
  }

  67% {
    content: "...";
  }
}

@media (max-width: 575px) {
  .apps-main-container {
    grid-template-columns: auto;
    grid-template-rows: max-content auto;
  }
}