.flowium-title {
    margin: 1rem;
}

.clickable-element {
    cursor: pointer;
}

.comment-avatar {
    margin-right: 1rem;
}

.flowium-comment, .flowium-input {
    margin-bottom: 0.5rem;
}

.flowium-step {
    margin-bottom: 0.5rem;
}

.comment-icon {
    margin-right: 1rem;
}

.cancel-icon {
    margin-right: 1rem;
    cursor: pointer;
}

#graph-main .node {
    cursor: pointer;
}

.active-state {
    background-color: #00FF00;
}

.active-font {
    color: #00FF00;
}

.blocked-state {
    background-color: #FF0000;
}

.blocked-font {
    color: #FF0000;
}

.done-state {
    background-color: #C0C0C0;
}

.done-font {
    color: #C0C0C0;
}

.flowium-card-header {
    cursor: pointer;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.step-title {
    margin: 0rem;
}

button {
    margin-right: 0.5rem;
}

/* Code blocks should be visually distinguishable from the surrounding text. */
pre {
    border-style: solid;
    border-radius: 0.25rem;
    border-width: 1px;
    border-color: #CED4DA;
    background-color: #F8F8F8;
    padding: 1rem;
}

.flowium-avatar {
    height: 2rem;
    width: 2rem;
}