html {
--bg-1:#fff;
--bg-2:#e0e6eb;
--bg-3:#c2cdd6;
--fg-1:#212121;
--fg-2:#4d4d4d;
--link:#1c7ed4;
--link-hover:#3492e5;
--link-active:#176bb5
}
html.dark {
--bg-1:#2e2e2e;
--bg-2:#4d4d4d;
--bg-3:#666;
--fg-1:#e6e6e6;
--fg-2:#b3b3b3;
--fg-3:#999;
--link:#73c1fc;
--link-hover:#91cefd;
--link-active:#4baffb
}
body {
--border-radius:4px;
--font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
--font-mono:ui-monospace,"Cascadia Code","Source Code Pro",Menlo,Consolas,"DejaVu Sans Mono",monospace;
background:var(--bg-1);
color:var(--fg-1);
font-family:var(--font);
height:calc(100vh - 2rem);
margin:1rem;
line-height:1.5
}
h1,h2,h3,h4,h5,h6 {
font-variant-numeric:tabular-nums;
font-weight:400;
line-height:1.5;
color: #2d3748
}
:-webkit-any(h1,h2,h3,h4,h5,h6,p) {
margin:1rem .1rem
}
:is(h1,h2,h3,h4,h5,h6,p) {
margin:1rem .1rem
}
label {
margin:.5rem .1rem
}
:-webkit-any(h1,h2,h3,h4,h5,h6,p,label):first-child {
margin-top:0
}
:is(h1,h2,h3,h4,h5,h6,p,label):first-child {
margin-top:0
}
:-webkit-any(h1,h2,h3,h4,h5,h6,p,label):last-child {
margin-bottom:0
}
:is(h1,h2,h3,h4,h5,h6,p,label):last-child {
margin-bottom:0
}
a {
color:var(--link)
}
a:hover {
color:var(--link-hover)
}
a:active {
color:var(--link-active)
}
label {
align-items:center;
gap:.5rem;
display:flex
}
label input {
margin:0
}
button,input,select {
font-family:inherit;
font-size:inherit
}
button {
background:var(--link);
color:var(--bg-1);
border-radius:var(--border-radius);
border:none;
padding:.5rem 1rem
}
button:hover {
background:var(--link-hover)
}
button:active {
background:var(--link-active)
}
:-webkit-any(button,button:hover,button:active):disabled {
background:var(--link);
filter:grayscale();
opacity:.4
}
:is(button,button:hover,button:active):disabled {
background:var(--link);
filter:grayscale();
opacity:.4
}
input,textarea,select {
border:1px solid var(--bg-2);
border-radius:var(--border-radius);
box-sizing:border-box;
padding:.5rem
}
input,textarea {
background:var(--bg-1);
color:inherit
}
select:not([multiple]) {
background:var(--bg-2)
}
textarea {
font-family:var(--font-mono);
font-size:.9rem
}
form {
flex-direction:column;
align-items:baseline;
gap:1rem;
display:flex
}
ul:has(li):has(form) {
padding:0;
list-style:none
}
li form {
flex-direction:row;
gap:.5rem;
margin:.5rem 0
}
nav {
background:var(--bg-2);
z-index:2;
border-radius:var(--border-radius);
gap:1em;
margin:0 0 1em;
padding:1em;
display:flex;
position:relative
}
nav a {
text-decoration:none
}
nav a[aria-current=true] {
border-bottom:2px solid
}
ul:has(form) {
padding:0;
list-style:none
}
progress {
margin:.5rem 0
}
progress:first-child {
margin-top:0
}
progress:last-child {
margin-bottom:0
}
.error {
color:red
}
code {
background:var(--bg-2);
font-family:var(--font-mono);
border-radius:var(--border-radius);
padding:.15rem .3rem;
font-size:.9em
}
ul.todos {
padding:0
}
ul.todos li form {
-webkit-user-select:none;
user-select:none;
background:var(--bg-1);
filter:drop-shadow(2px 3px 6px #0000001a);
border-radius:5px;
align-items:center;
gap:.5em;
margin:0 0 .5em;
padding:.5em .5em .5em 1em;
transition:filter .2s,opacity .2s;
display:flex;
position:relative
}
ul.todos li:not(:has(>form)) {
-webkit-user-select:none;
user-select:none;
background:var(--bg-1);
filter:drop-shadow(2px 3px 6px #0000001a);
border-radius:5px;
align-items:center;
gap:.5em;
margin:0 0 .5em;
padding:.5em .5em .5em 1em;
transition:filter .2s,opacity .2s;
display:flex;
position:relative
}
ul.todos .done {
filter:none;
opacity:.4
}
ul.todos button {
cursor:pointer;
aspect-ratio:1;
opacity:.5;
background-color:#0000;
background-position:50%;
background-repeat:no-repeat;
background-size:1rem 1rem;
border:none;
width:3em;
height:3em;
margin:-.5em -.5em -.5em 0;
transition:opacity .2s
}
ul.todos button:hover {
opacity:1
}

/* my own, overwrite above */

main {
max-width: 1200px;
margin: 0 auto;
padding: 2rem;
}

h1 {
text-align: center;
margin-bottom: 3rem;
font-weight: 600;
color: #2d3748;
}

.pipeline {
display: flex;
flex-direction: column;
gap: 1rem;
max-width: 1200px;
margin: 0 auto;
padding: 2rem;
}

.step {
display: flex;
flex-direction: column;
gap: 1rem;
padding: 1rem 0;
border-bottom: 1px solid #e2e8f0;
}

.step-header {
display: flex;
flex-direction: row;
align-items: center;
gap: 1rem;
}

.icon {
background: #fff;
border: 2px solid #4299e1;
border-radius: 50%;
width: 3rem;
height: 3rem;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
margin-right: 0.5rem;
}

.label {
font-size: 1.25rem;
font-weight: 800;
color: #4299e1;
min-width: 180px;
}

.description {
--font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
--font-mono:ui-monospace,"Cascadia Code","Source Code Pro",Menlo,Consolas,"DejaVu Sans Mono",monospace;
font-size: 0.95rem; /* font-size: 0.875rem; */
color: #718096;
width: 100%;
margin-left: 3.5rem; /* Aligns with the content after icon */
}

.control {
min-width: 180px;
display: flex;
align-items: center;
justify-content: flex-start;
}

li.more-margin {
margin-bottom: 1em;
padding-left: 0.5em;
}

li.more-margin2 {
margin-bottom: 0.5em;
padding-left: 0.5em;
}

li.more-margin3 {
margin-bottom: 0.5em;
}

li.more-margin4 {
margin-bottom: 1em;
}

.table_questionnaire {
text-align: left;
border: 1px solid #ccc !important;
}
.table_questionnaire tr {
border: 1px solid #ccc;
}
.table_questionnaire tr:nth-of-type(1) {background: lightgrey;}
.table_questionnaire tr:nth-of-type(3) {background: lightgrey;}
.table_questionnaire tr:nth-of-type(5) {background: lightgrey;}
.table_questionnaire tr:nth-of-type(7) {background: lightgrey;}
.table_questionnaire tr:nth-of-type(9) {background: lightgrey;}
.table_questionnaire tr:nth-of-type(11) {background: lightgrey;}
.table_questionnaire tr:nth-of-type(13) {background: lightgrey;}
.table_questionnaire th {
font-weight: normal;
background: white;
}
.table_questionnaire td {
padding-bottom: 1.0rem;
}
.vertical-th {
writing-mode: sideways-lr;
padding: 0.5rem 0rem;
}

@media (max-width: 768px) {
.step-header {
flex-direction: column;
align-items: flex-start;
gap: 0.5rem;
}
.label {
min-width: unset;
}
.description {
margin-left: 0;
}
}

.DemoButton {
  position: fixed;
  bottom: 30px;
  left: 10px;
}