body.pg-loading {
  overflow: hidden;
}

/* page layer in design */
.pg-loading-screen {
  position: fixed;
  inset: 0;
  z-index: 1000000;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1 0 0;
  align-self: stretch;
}

.pg-loading-screen .main-layout {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex: 1 0 0;
  align-self: stretch;
  scrollbar-gutter: stable;
  overflow: hidden;
}

.pg-loading-screen .content-layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1 0 0;
  align-self: stretch;
}

.pg-loading-screen .main-layout.prima {
  background: var(--layout-color-bg-content, #e8f3ff);
}

.pg-loading-screen .main-layout.secunda {
  background: var(--layout-color-bg-content-prima, #f8f9f9);
}

.pg-loading-screen .margin-wrapper {
  display: flex;
  padding: 0 var(--layout-space-margin-lr, 8px);
  flex-direction: column;
  align-items: flex-start;
  flex: 1 0 0;
  align-self: stretch;
}

.pg-loading-screen .content-body {
  display: flex;
  padding: var(--layout-space-body-padding-t, 20px) var(--layout-space-content-padding-lr, 32px) 0
    var(--layout-space-content-padding-lr, 32px);
  flex-direction: column;
  align-items: center;
  flex-grow: 1;
  align-self: stretch;
}

.pg-loading-screen .container-max {
  display: flex;
  width: 100%;
  max-width: var(--layout-size-content-width-max, 1280px);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  margin: 0 auto;
}

.pg-loading-screen .loading-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--general-notice-space-header-gap-stack, 32px);
}

.pg-loading-screen .prima .pg-loading-logo {
  height: var(--logo-size-md, 64px);
}

.pg-loading-screen .secunda .pg-loading-logo {
  height: var(--logo-size-lg, 80px);
}

.pg-loading-screen .vo .pg-loading-logo {
  height: var(--logo-size-md, 64px);
}

.pg-loading-screen .spinner {
  width: var(--icon-size-xl, 64px);
  height: var(--icon-size-xl, 64px);
}

.pg-loading-screen .prima .spinner .path {
  fill: var(--modal-content-color-icon-loading, #005dc2);
}

.pg-loading-screen .secunda .spinner .path {
  fill: var(--modal-content-color-icon-loading, #027390);
}

@media (min-width: 320px) and (max-width: 640px) {
  .pg-loading-screen .pg-loading-logo {
    height: var(--logo-size-lg, 80px);
  }

  .pg-loading-screen .content-body {
    padding: var(--layout-space-body-padding-t, 20px) var(--layout-space-content-padding-lr, 12px) 0
      var(--layout-space-content-padding-lr, 12px);
  }

  .pg-loading-screen .margin-wrapper {
    padding: 0 var(--layout-space-margin-lr, 4px);
  }

  .pg-loading-screen .prima .pg-loading-logo {
    height: var(--logo-size-md, 48px);
  }

  .pg-loading-screen .secunda .pg-loading-logo {
    height: var(--logo-size-lg, 80px);
  }

  .pg-loading-screen .vo .pg-loading-logo {
    height: var(--logo-size-md, 48px);
  }
}

@media (min-width: 641px) and (max-width: 1120px) {
  .pg-loading-screen .content-body {
    padding: var(--layout-space-body-padding-t, 24px) var(--layout-space-content-padding-lr, 16px) 0
      var(--layout-space-content-padding-lr, 16px);
  }
}

/* The styles below are necessary to trigger the removal of the loading screen after the page has loaded. */
.pg-loading-screen.pg-loading .pg-loading-html:not(.pg-loaded) {
  -webkit-animation: pgAnimLoading 1s cubic-bezier(0.7, 0, 0.3, 1) both;
  animation: pgAnimLoading 1s cubic-bezier(0.7, 0, 0.3, 1) both;
}

.pg-loading-screen.pg-loaded {
  opacity: 0;
  -webkit-animation: pgAnimLoaded 0.5s cubic-bezier(0.7, 0, 0.3, 1) both;
  animation: pgAnimLoaded 0.5s cubic-bezier(0.7, 0, 0.3, 1) both;
}


@-webkit-keyframes pgAnimLoading {
  from {
    opacity: 0;
  }
}

@keyframes pgAnimLoading {
  from {
    opacity: 0;
  }
}

@-webkit-keyframes pgAnimLoaded {
  from {
    opacity: 1;
  }
}

@keyframes pgAnimLoaded {
  from {
    opacity: 1;
  }
}