html, body {
padding: 0;
margin: 0;
font-family: system-ui
}
a {
color: #00c;
text-decoration: underline
}
a:hover {
color: #009;
}
#help-link {
text-align: center;
padding: 4px;
background-color: #ccc;
font-weight: bold
}
#kroki-editor {
padding: 4px;
padding-bottom: 0;
padding-top: 0;
background: linear-gradient(0deg, transparent 0%, #ccc 40%, #ccc 100%)
}
#kroki-type-url {
display: flex;
flex-direction: row;
padding-bottom: 2px
}
#kroki-type,
#kroki-url,
#kroki-code {
padding: 2px 4px;
border: 1px solid #444;
outline: none
}
#kroki-type {
flex-basis: 0;
border-radius: 4px 0 0 4px
}
#kroki-url {
flex-basis: 100%;
border-radius: 0 4px 4px 0;
border-left: none;
text-overflow: ellipsis;
padding: 3px 4px
}
#kroki-code {
box-sizing: border-box;
width: 100%;
border-radius: 4px;
resize: vertical;
overflow-y: scroll
}
#kroki-res {
text-align: center;
border-radius: 4px
}
#kroki-res svg {
max-width: 90%;
padding: 10px;
background-color: #fff;
border: medium solid green;
}