.application-body.application-family-tree {
  --app-colour: var(--app-colour-family-tree, #6E1F22);
}
.application-body.application-family-tree {
  overflow: none;
}
.application-body.application-family-tree .document-content {
  box-sizing: border-box;
  overflow: none;
  background-color: var(--colour-base);
}
.application-body.application-family-tree .document-content .quaive-family-tree {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border: none;
  background-color: var(--colour-base);
}
.application-body.application-family-tree .document-content .quaive-family-tree .family-chart {
  height: 100%;
  width: 100%;
}
.application-body.application-family-tree .document-content .search-form {
  max-width: 1000px;
  margin: 80px auto;
}
.application-body.application-family-tree .document-content .search-form .search-field {
  position: relative;
}
.application-body.application-family-tree .document-content .search-results .quick-links {
  text-align: center;
  margin: 40px auto;
}
.application-body.application-family-tree .document-content #family-tree-toolbar {
  z-index: 3;
}
@container screen style(--screen-small: true) {
.application-body.application-family-tree .document-content #family-tree-toolbar {
  bbottom: var(--small-screen-padding);
  left: 0;
  right: 0;
  width: 100%;
  position: stickky;
  box-sizing: border-box;
  overflow: hidden;
  padding-left: var(--small-screen-padding);
  padding-right: var(--small-screen-padding);
}
}
@container screen style(--screen-small: true) {
.application-body.application-family-tree .document-content #family-tree-toolbar .pat-button-cluster:has(.zoom-in) {
  display: none;
}
}
@include screen-size(medium-large) {

                position: fixed;
                bottom: 1%;
                left: 50%;
                transform: translateX(-50%);
                width: calc(100% - calc(var(--quaive-document-padding-left) - var(--quaive-document-padding-right)));
                max-width: 480px;
            }
.application-body.application-family-tree .document-content #family-tree-toolbar > * {
  grid-template-columns: auto 0 auto;
}
.application-body.application-family-tree .document-content .search-results {
  padding-bottom: 200px;
  max-width: 800px;
  margin: 0 auto;
  display: block;
}