/* Logical Content Flow */
:root {
  --spacing: 16px;
  --error:  #ff4e42;
  --pass: #0cce6b;
  --warn: #ffa400;
  --none: #e7e6e8;
}
html {
  scroll-behavior: smooth;
}
div[class^="ps-h"] {
  border-width: 2px;
  border-style: solid;
  border-color: var(--pass);
  padding: 8px;
  margin: 4px;
  border-radius: 2px;
}
div[class^="ps-h1"] {
  margin-left: 0;
}

div[class^="ps-h"].ps-h1 {
  border-color: var(--error);
}
div[class^="ps-h"].ps-h1 > .ps-tags > * {
  background: var(--error);
}

div[class^="ps-h"].ps-container-h1-1 {
  border-color: var(--pass);
}
div[class^="ps-h"].ps-container-h1-1 > .ps-tags > * {
  background: var(--pass);
}

div[class^="ps-h"].ps-container-hidden-true {
  border-color: var(--warn);
}
div[class^="ps-h"].ps-container-hidden-true > .ps-tags > * {
  background: var(--warn);
}

div[class^="ps-h"].ps-container-size-true {
  border-color: var(--warn);
}
div[class^="ps-h"].ps-container-size-true > .ps-tags > * {
  background: var(--warn);
}

div[class^="ps-h"].ps-container-length-true {
  border-color: var(--warn);
}
div[class^="ps-h"].ps-container-length-true > .ps-tags > * {
  background: var(--warn);
}

.ps-missing-true,
.ps-container-empty-true {
  border-color: var(--error) !important;
}

.ps-missing-true > .ps-tags > *,
.ps-container-empty-true > .ps-tags > * {
  background: var(--error) !important;
}

div[class^="ps-h"].ps-container-hidden-true,
div[class^="ps-h"].ps-container-hidden-,
.ps-missing-true,
.ps-container-no-headings {
  border-style: dashed !important;
}

.ps-missing-true,
.ps-container-empty-true {
  color: var(--error);
}
.ps-tag-missing-false {
  display: none;
}
div.ps-h1 {
  /* margin-right: calc(var(--spacing) * 10); */
}
div.ps-h2 {
  margin-left: calc(var(--spacing) * 2);
  /* margin-right: calc(var(--spacing) * 8); */
}
div.ps-h3 {
  margin-left: calc(var(--spacing) * 4);
  /* margin-right: calc(var(--spacing) * 6); */
}
div.ps-h4 {
  margin-left: calc(var(--spacing) * 6);
  /* margin-right: calc(var(--spacing) * 4); */
}
div.ps-h5 {
  margin-left: calc(var(--spacing) * 8);
  /* margin-right: calc(var(--spacing) * 2); */
}
div.ps-h6 {
  margin-left: calc(var(--spacing) * 10);
}
div[class^="ps-h"]:empty {
  border: 2px solid var(--error);
}
div[class^="ps-h"]:empty:before {
  content: "Empty tag";
}

div[class^="ps-tag-ht"] {
  display: none;
}
.ps-tag-length-false,
.ps-tag-size-false{
  display:none;
}

.ps-tag-hidden-true,
.ps-tag-missing,
.ps-tag-heading,
.ps-tag-empty-true,
.ps-tag-missing-true,
.ps-tag-size-true,
.ps-tag-length-true,
div[class^="ps-tag-ht1-"] {
  color: white;
  background: var(--pass);
  display: inline-block;
  padding: calc(var(--spacing) / 4) calc(var(--spacing) / 2);
  border-radius: calc(var(--spacing) / 8);
  font-size: 0.7rem;
  margin-right: calc(var(--spacing) / 4);
  text-transform: uppercase;
}
div[class="ps-tag-ht1-1"] {
  display: none;
}

.ps-tag-hidden-false {
  display: none;
}
#lcf-report--container p {
  margin: 0;
}

.ps-tag-hidden- {
  display: none;
}
.ps-tag-empty-false {
  display: none;
}
.ps-tags {
  margin-top: -2px;
}
div[class^="ps-h"].ps-container-hidden-true .ps-tag-heading {
  background-color: var(--warn);
}
span[id^="lcf-total-"] {
  background: var(--pass);
  color: #e7e6e8;
  display: inline-block;
  padding: calc(var(--spacing) / 4) calc(var(--spacing) / 2);
  border-radius: calc(var(--spacing) / 8);
  font-size: 0.7rem;
  margin-right: calc(var(--spacing) / 2);
  text-transform: uppercase;
  width: 53px;
  text-align: center;
}
span[id^="lcf-total--details"] {
  background: #e7e6e8;
  color: #212121;
}
span[class~="lcf-report--none"] {
  background: var(--none);
  color:#212121;
}
span[class~="lcf-report--warn"] {
  background: var(--warn);
}
span[class~="lcf-report--fail"] {
  background: var(--error);
}
.search--hide > * {
  display: none !important;
}
.search--hide::before {
  content: "Your logical flow report will appear here.";
    border: 2px dashed #212121;
    display: block;
    width: 100%;
    min-height: 100px;
    position: relative;
    margin: var(--spacing) 0;
    display: grid;
    place-content: center;
    /* text-transform: uppercase; */
    font-weight: 400;
    color: #212121;
    font-size: 1.2rem;
    font-style: italic;
    padding: 16px;
    box-sizing: border-box;
}

#lcf-report--breakdown {
  background: #fafafa;
  margin: -calc(var(--spacing) * 2);
  margin-top: calc(var(--spacing) * 2);
  padding: var(--spacing) calc(var(--spacing) * 2) calc(var(--spacing) * 2) calc(var(--spacing) * 2);
  padding-right: 0;
  border-right:calc(var(--spacing) * 2) solid #fafafa;
  max-width: 1070px;
  width: calc(100vw - 196px);
  overflow-x: auto;
  position: relative;
}
#lcf-report--container p {
  font-size: 0.9em;
}
#lcf-total--breakdown p,
#lcf-report--results p {
  border-bottom: 2px solid #e7e6e8;
  padding-bottom: 8px;
  padding-top: 4px;
}

#lcf-report--breakdown-full {
    min-width: 600px;
}
#lcf-report--breakdown-full > * {
  position: relative;
  background: #fafafa;
  outline: 4px #fafafa solid;
}

#lcf-report--breakdown-full > *:before {
  --columns: 0;
  content: "";
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%'><rect width='2px' height='100%' style='fill:%23E7E6E8' /></svg>");
  background-size: calc(var(--spacing) * 2);
  height: calc(100% + 8px);
  position: absolute;
  width: calc(calc(var(--spacing) * 2) * var(--columns));
  top: 0;
  left: calc(calc(-32px * var(--columns)) - 2px);
}

#lcf-report--breakdown-full > .ps-h3:before {
  --columns: 2;
}
#lcf-report--breakdown-full > .ps-h4:before {
  --columns: 3;
}
#lcf-report--breakdown-full > .ps-h5:before {
  --columns: 4;
}
#lcf-report--breakdown-full > .ps-h6:before {
  --columns: 5;
}
#lcf-report--breakdown-full > .ps-h2:before {
  --columns: 1;
}
#results{
  padding-bottom:32px;
  overflow-wrap: anywhere;
}

#save-report{
      border-style: solid;
    border-width: 2px;
    border-color: var(--colour-text);
    padding: 16px;
    padding-top: 8px;
    padding-bottom: 8px;
    text-transform: uppercase;
    margin-top: 16px;
    display: inline-block;
    background: transparent;
    outline: none;
    font-weight: bold;
    font-family: 'Open Sans', sans-serif;
    font-size: .9rem;
    height: 44px;
    color: var(--colour-text);
    cursor: pointer;
}

#lcf-report--controls{
  display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
    flex-wrap: wrap;
}

#breakdown-question {
    font-family: 'Open Sans';
    font-size: 12px;
    background: var(--colour-text);
    color: var(--colour-background);
    width: 20px;
    height: 20px;
    display: inline-block;
    text-align: center;
    border-radius: 50%;
    font-weight: 400;
    text-decoration: none;
    margin-left: 10px;
    top: -1px;
    position: relative;
}
#breakdown-heading{
  display:inline-block;
}