:root {
  --demo-max-width: 1400px;
}

body[data-md-page-path="demo/"] .md-grid,
body[data-md-page-path="demo/"] .md-main__inner,
body[data-md-page-path="demo/"] .md-content__inner {
  max-width: 100%;
}

body[data-md-page-path="demo/"] .md-sidebar--secondary {
  display: none;
}

body[data-md-page-path="demo/"] .md-content {
  width: 100%;
}

.demo-frame {
  width: 100%;
  height: calc(100vh - 11rem);
  min-height: 720px;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 12px;
  background: var(--md-default-bg-color);
}

@media (max-width: 900px) {
  .demo-frame {
    height: calc(100vh - 12rem);
    min-height: 520px;
  }
}

@media (max-width: 600px) {
  .demo-frame {
    min-height: 480px;
  }
}

.md-source-file-link {
  float: right;
  opacity: 0.5;
  transition: opacity 0.2s;
  line-height: 1;
}

.md-source-file-link:hover {
  opacity: 1;
}

.md-source-file-link svg {
  fill: currentColor;
  vertical-align: middle;
}