[ng-reflect-router-link] {
  cursor: pointer;
}

a[article-link]:not([stc-button]),
a[rfc-link]:not([stc-button]) {
  color: inherit;
  text-decoration: inherit;
}

[hidden] {
  display: none !important;
}

scienta-app {
  position: relative;
  width: 100%;
  display: flex;
}
scienta-app .app-container {
  width: 100%;
  height: 100%;
}

scienta-app .page-grid,
.grid-layout {
  display: grid;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  grid-template-areas: "header header header" "asideLeft main main" "asideLeft footer footer";
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto 1fr auto;
}
scienta-app .page-grid:has(.grid-aside-right),
.grid-layout:has(.grid-aside-right) {
  grid-template-areas: "header header header" "asideLeft main asideRight" "asideLeft footer footer";
}
scienta-app .page-grid > [class^=grid-],
.grid-layout > [class^=grid-] {
  box-sizing: border-box;
  position: relative;
}
scienta-app .page-grid .grid-header,
.grid-layout .grid-header {
  grid-area: header;
}
scienta-app .page-grid .grid-aside-left,
.grid-layout .grid-aside-left {
  grid-area: asideLeft;
}
scienta-app .page-grid .grid-aside-right,
.grid-layout .grid-aside-right {
  grid-area: asideRight;
}
scienta-app .page-grid .grid-main,
.grid-layout .grid-main {
  grid-area: main;
}
scienta-app .page-grid .grid-footer,
.grid-layout .grid-footer {
  grid-area: footer;
}

.page-listing .grid-header {
  border-bottom: 0;
}
.page-listing .grid-aside-left {
  margin: 0 0 1rem 1rem;
}
.page-listing .grid-aside-right {
  border-top: 0;
  border-right: 0;
}
.page-listing .grid-main {
  margin: 0 1rem 1rem 1rem;
  width: calc(100% - 2 * 1rem);
  height: calc(100% - 1 * 1rem);
  padding-top: 0;
}
.page-listing .grid-footer {
  margin: 0 1rem 1rem 1rem;
  width: calc(100% - 2 * 1rem);
}

.default-form-layout {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: var(--form-item-gap, 1rem);
}

.non-angular-loader {
  width: 100px;
  height: 100px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.non-angular-loader svg {
  position: relative;
  height: 100%;
  width: 100%;
  animation: circular-rotate 2s linear infinite;
}

.non-angular-loader svg .path {
  stroke-dasharray: 67%, 200%;
  stroke-dashoffset: 0;
  animation: circular-dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
  stroke-linecap: round;
  stroke: #9e9e9e;
}

@keyframes circular-rotate {
  100% {
    transform: rotate(360deg);
  }
}
@keyframes circular-dash {
  0% {
    stroke-dasharray: 1%, 200%;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 89%, 200%;
    stroke-dashoffset: -35%;
  }
  100% {
    stroke-dasharray: 89%, 200%;
    stroke-dashoffset: -124%;
  }
}
@keyframes color {
  0%, 100% {
    stroke: #f5f5f5;
  }
  40% {
    stroke: #9e9e9e;
  }
  66%, 90% {
    stroke: #9e9e9e;
  }
}