html,
body {
  height: 100%;
}

app-root {
  display: block;
  height: 100%;
}

tui-root {
  height: 100%;
}

router-outlet + * {
  height: 100%;
  max-width: min(35rem, 100vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  padding: 2rem;
  margin: 0 auto;

  [tuiCardLarge] {
    width: 100%;
    background: var(--tui-base-02);
    margin: auto;
  }
}

button:disabled {
  opacity: var(--tui-disabled-opacity);
  pointer-events: none;
}

header {
  position: relative;
  display: flex;
  flex-direction: column;
  text-align: center;
  font: var(--tui-font-heading-4);

  p {
    font: var(--tui-font-text-m);
    color: var(--tui-text-02);
  }
}

h2 {
  margin: 0;
  font: var(--tui-font-heading-6);
}

.g-success {
  color: var(--tui-success-fill);
}

.g-warning {
  color: var(--tui-warning-fill);
}

.g-error {
  color: var(--tui-error-fill);
}

.g-info {
  color: var(--tui-info-fill);
}