.demo-role-page {
  width: min(100%, 61.25rem);
  margin-right: auto;
  margin-left: auto;
}

.demo-role-card {
  display: flex;
  height: 100%;
  flex-direction: column;
  padding: 1.25rem;
}

.demo-role-card p {
  flex-grow: 1;
}

.demo-start-loading {
  z-index: 1080;
  background: rgba(255, 255, 255, 0.86);
}

.demo-start-loading__card {
  width: min(100%, 26.25rem);
  padding: 2.5rem 1.5rem;
  text-align: center;
}

.demo-template-page {
  width: min(100%, 65.625rem);
  margin-right: auto;
  margin-left: auto;
}

.demo-template-actions,
.demo-template-preview-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
}

.demo-template-actions form,
.demo-template-preview-actions form {
  margin: 0;
}

@media (max-width: 575.98px) {
  .demo-template-actions,
  .demo-template-actions .quag-action,
  .demo-template-actions form,
  .demo-template-preview-actions,
  .demo-template-preview-actions .quag-action,
  .demo-template-preview-actions form {
    width: 100%;
  }
}