@charset "UTF-8";
* {
  box-sizing: border-box;
}

body {
  background-color: #fff;
  color: #000;
  font-family: Verdana, Arial, sans-serif;
  font-size: 16px;
  margin: 0;
  padding: 0;
}

h1,
h2 {
  margin: 0;
}

.accessible-hidden {
  position: absolute;
  opacity: 0;
}

.setup {
  background-color: #0070b0;
  color: #fff;
}

.results,
.setup {
  padding: 1em;
}

li {
  line-height: 1.5;
}

.tick-checkbox {
  border: 2px solid;
  border-radius: 5px;
  cursor: pointer;
  display: inline-block;
  height: 1.5em;
  margin-right: 0.5em;
  position: relative;
  vertical-align: middle;
  width: 1.5em;
}
.tick-checkbox .accessible-hidden {
  height: 1.5em;
  overflow: hidden;
  width: 1.5em;
}

input[type=checkbox]:checked + .tick-checkbox:after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='225' height='225' viewBox='0 0 225 225' fill='%230070b0'%3E%3Cpath d='m209.8 0.1c-11 0.8-16.6 2.1-23.2 5.3-4 1.9-9.2 5.1-13.9 8.6-3.4 2.5-4.8 3.8-5.4 5.1-0.8 1.7-2.4 3.8-6.9 9.1-13 15-37.7 46.8-57.9 74.5-9.9 13.5-13.4 18.7-17 24.5-2.3 3.8-2.9 4.8-4.8 7.2-1.6 2-5.3 7.4-9.6 13.8-6 9-8.7 12.6-11.7 16.2-2.2 2.5-1.9 2.5-3.1 0.8-1.2-1.8-1.9-3.2-3.4-6.6-3.8-8.6-9.4-20.1-11.2-22.7-2.7-3.9-5.3-5-11.5-4.8-4.8 0.2-8.7 1.2-14.1 3.8-7 3.4-12.8 8.1-14.8 12.2-2.2 4.5-1.3 10.1 5.5 31.7 6.4 20.6 9.6 28.7 13.6 35.4 2.1 3.4 4.7 7.4 5.1 7.7 1 0.8 4.2 1.7 9.3 2.5 6.6 1 12.8 1 19.3 0 5.5-0.9 9.1-2.3 10.9-4.1 2.7-2.8 7.2-8.8 17.1-22.9 6.2-8.9 9.4-13.2 10.8-14.9 1.4-1.7 1.9-2.4 4-5.8 3-5 7.1-10.9 17.5-25.1 21.1-29 47.6-63.7 53.4-70.1 1.9-2 2.3-2.5 6-7.6 4.2-5.7 6.2-8.4 8.1-10.3 2.7-2.8 6.2-7 13.5-16 5.9-7.3 11-13.4 13.8-16.4 5.8-6.4 13.5-17.1 15.3-21.4 1.3-3.2 1-5.5-0.8-7.3-0.8-0.8-2.5-1.6-4-1.8-1.4-0.3-6.9-0.4-9.6-0.2z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 100%;
  content: "";
  height: 1.5em;
  left: 0.4em;
  position: absolute;
  top: -0.25em;
  width: 1.5em;
}

input[type=checkbox]:focus + .tick-checkbox {
  box-shadow: 0 0 10px #0070b0, 0 0 5px #0070b0;
}

legend {
  font-size: 18px;
}

textarea:focus {
  box-shadow: 0 0 10px #0070b0, 0 0 5px #0070b0;
}

button {
  appearance: none;
  background-color: #fff;
  border: none;
  font-size: 1em;
  padding: 1em;
}
button:focus {
  box-shadow: 0 0 10px #fff, 0 0 5px #fff;
}

.content-selection {
  margin: 1em 0;
  max-width: 1000px;
}
.content-selection .content-selection-list {
  display: flex;
  flex-wrap: wrap;
  margin: 0 0 1em 0;
  padding: 0;
}
.content-selection .content-selection-item {
  color: #fff;
  flex: 0 0 100%;
  list-style: none;
  margin: 0.5em 0.25em 0 auto;
  min-width: 11em;
}
@media (min-width: 460px) {
  .content-selection .content-selection-item {
    flex: 0 0 47%;
  }
}
@media (min-width: 600px) {
  .content-selection .content-selection-item {
    flex: 1 0 30%;
  }
}
@media (min-width: 800px) {
  .content-selection .content-selection-item {
    flex: 1 0 20%;
  }
}
.content-selection label {
  transition: all 0.25s ease-in;
  align-items: center;
  border: 2px solid #eee;
  cursor: pointer;
  display: flex;
  padding: 0.25em 0.5em;
}
@media (prefers-reduced-motion) {
  .content-selection label {
    transition: none;
  }
}
.content-selection label:hover {
  background-image: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(0, 0, 0, 0.2) 10px, rgba(0, 0, 0, 0.2) 20px);
}
.content-selection input[type=checkbox]:checked ~ label {
  background-color: #eee;
  color: #0070b0;
}
.content-selection input[type=checkbox]:checked ~ label:hover {
  background-image: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(0, 0, 0, 0.15) 10px, rgba(0, 0, 0, 0.15) 20px);
  color: #000;
}
.content-selection input[type=checkbox]:checked ~ label:hover svg {
  stroke: #000;
}
.content-selection input[type=checkbox]:checked ~ label:hover .filled {
  fill: #000;
}
.content-selection input[type=checkbox]:checked ~ label svg {
  stroke: #0070b0;
}
.content-selection input[type=checkbox]:checked ~ label .filled {
  fill: #0070b0;
}
.content-selection input[type=checkbox]:focus ~ label {
  box-shadow: 0 0 10px #fff, 0 0 5px #fff, inset 0 0 10px #fff;
}
.content-selection svg {
  height: 2.5em;
  stroke: #fff;
  stroke-width: 10;
  width: auto;
}
.content-selection svg .filled {
  fill: #fff;
  stroke-width: 0;
}
.content-selection .content-selection-label {
  font-size: 18px;
  max-width: 100%;
  text-align: center;
  width: 100%;
}

.compliance-level {
  display: inline-block;
  margin: 1em 0;
  max-width: 1000px;
}
.compliance-level .compliance-level-list {
  display: flex;
  margin: 0 0 1em 0;
}
.compliance-level label {
  transition: all 0.25s ease-in;
  align-items: center;
  border: 2px solid #eee;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  height: 3em;
  justify-content: center;
  margin-right: 0.5em;
  width: 3em;
}
@media (prefers-reduced-motion) {
  .compliance-level label {
    transition: none;
  }
}
.compliance-level label:hover {
  background-image: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(0, 0, 0, 0.2) 10px, rgba(0, 0, 0, 0.2) 20px);
}
.compliance-level input[type=radio]:checked + label {
  background-color: #eee;
  color: #0070b0;
}
.compliance-level input[type=radio]:checked + label:hover {
  background-image: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(0, 0, 0, 0.15) 10px, rgba(0, 0, 0, 0.15) 20px);
  color: #000;
}
.compliance-level input[type=radio]:focus ~ label {
  box-shadow: 0 0 10px #fff, 0 0 5px #fff, inset 0 0 10px #fff;
}

nav.steps {
  max-width: 1000px;
  position: relative;
  transition: all 0.5s ease;
  z-index: 1;
}
nav.steps.step-3 ul {
  margin: 1em auto;
  width: 40%;
}
nav.steps.step-3 .step {
  font-size: 60%;
}
nav.steps ul {
  display: flex;
  list-style: none;
  margin: 2em auto 3em;
  padding: 0;
  justify-content: space-between;
  position: relative;
  width: 90%;
}
@media (min-width: 600px) {
  nav.steps ul {
    width: 70%;
  }
}
@media (min-width: 800px) {
  nav.steps ul {
    width: 50%;
  }
}
nav.steps ul:before {
  content: "";
  position: absolute;
  border-top: 2px solid #fff;
  width: 100%;
  top: 50%;
  z-index: -1;
}
nav.steps .step {
  align-items: center;
  background-color: #0070b0;
  border: 2px solid #fff;
  border-radius: 50%;
  color: #fff;
  display: flex;
  font-size: 1em;
  justify-content: center;
  height: 3em;
  text-decoration: none;
  width: 3em;
}
nav.steps a.step:hover,
nav.steps .step[aria-current=step] {
  background-color: #fff;
  color: #0070b0;
  font-weight: bold;
}

.guideline-list {
  list-style: none;
  max-width: 1000px;
  padding: 0;
}
.guideline-list .guideline {
  border: 1px solid;
  display: flex;
  margin-bottom: 0.5em;
  padding: 0.5em;
}
.guideline-list .guideline-details {
  width: 100%;
}
.guideline-list .guideline-details .short-description {
  cursor: pointer;
  font-weight: bold;
}
.guideline-list .guideline-details .short-description:focus {
  box-shadow: 0 0 10px #0070b0, 0 0 5px #0070b0;
  outline: none;
}
.guideline-list .guideline-details .guideline-level {
  float: right;
}
.guideline-list .long-description {
  margin-top: 1em;
}
.guideline-list .long-description ul {
  list-style-type: disc;
}
.guideline-list .code-snippets {
  background-color: #eee;
  border: 1px solid #0070b0;
  padding: 0.5em;
}
.guideline-list .code-snippets .snippet-description {
  display: block;
}
.guideline-list .code-snippets .snippet-code {
  background-color: #fff;
  border: 1px solid #666;
  display: block;
  font-family: monospace;
  font-size: 16px;
  height: 6em;
  margin: 0.25em 0 0;
  overflow-wrap: break-all;
  padding: 0.25em;
  width: 100%;
  word-break: break-all;
  word-wrap: anywhere;
}
.guideline-list .code-snippets .copy-code {
  border: 1px solid;
  font-size: 16px;
  margin-bottom: 2em;
  margin-top: 0.25em;
  padding: 0.25em;
}
.guideline-list .code-snippets .copy-code:focus {
  box-shadow: 0 0 10px #0070b0, 0 0 5px #0070b0;
}

.percent-complete-arc-graph {
  align-items: center;
  display: grid;
  justify-items: center;
  margin: 1em auto;
  max-width: 1000px;
  min-height: 6em;
  position: relative;
}
.percent-complete-arc-graph svg {
  fill: none;
  grid-column-start: 1;
  grid-row-start: 1;
  max-height: 7em;
  position: absolute;
  stroke: #dddddd;
  stroke-width: 4;
  transform: rotate(-90deg);
}
.percent-complete-arc-graph svg .completed-arc {
  stroke: #0070b0;
  stroke-width: 6;
  transition: stroke-dasharray 0.5s;
}
.percent-complete-arc-graph .arc-percentage {
  grid-column-start: 1;
  grid-row-start: 1;
}

.notification {
  align-items: center;
  border: 1px solid;
  color: #000;
  display: flex;
  margin-top: 1em;
  padding: 1em;
}
.notification:before {
  display: inline;
  font-size: 150%;
  font-weight: bold;
  margin-right: 0.5em;
}
.notification.notification-error {
  background-color: #ffb5b5;
  border-color: #f00;
}
.notification.notification-error:before {
  content: "⚠";
}
.notification.notification-success {
  background-color: #cfc;
  border-color: #080;
}
.notification.notification-success:before {
  content: "✓";
}
.notification.notification-warn {
  background-color: #ffb;
  border-color: #000;
}
.notification.notification-warn:before {
  content: "ℹ";
}

.toolbar button {
  margin-right: 0.25em;
  padding: 0.25em;
}
.toolbar button svg {
  height: 1.5em;
  stroke-width: 8;
  width: 1.5em;
}

.modal-overlay {
  align-items: center;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  height: 100vh;
  justify-content: center;
  left: 0;
  overflow: hidden;
  position: fixed;
  top: 0;
  width: 100vw;
  z-index: 2;
}
.modal-overlay .modal-content {
  background-color: #fff;
  box-shadow: 0 0 5px #fff;
  max-width: 90%;
  padding: 1em;
  width: 400px;
}
.modal-overlay .modal-content p {
  margin-top: 0;
}
.modal-overlay .modal-content .confirmation-title {
  font-weight: bold;
}
.modal-overlay .modal-content button {
  border: 3px solid #000;
  margin-right: 0.5em;
  min-width: 6em;
}
.modal-overlay .modal-content button:hover {
  background-color: #0070b0;
  color: #fff;
}
.modal-overlay .modal-content button:focus {
  box-shadow: 0 0 10px #0070b0, 0 0 5px #0070b0;
}

/*# sourceMappingURL=app.css.map */