/* Initially, everything hidden except the Save button and message */

    .docTitle * {
        display: block
    }
    #auto-save,
    #auto-save + span
    {
        display: inline;
    }

    #postsave-username
    {
        display: none;
    }

/* After saving ... */
    #worksheet.saved .transient
    {
        display: none;
    }

     #worksheet.saved #postsave-username
    {
        display: inline;
    }


/* Steps */

    /* By default, invisible */
    .step, .final {
        display: none;
    }
    /* Show complete & active steps, when worksheet is saved */
    #worksheet.saved .step.complete,
    #worksheet.saved .step.active,
    #worksheet.saved .step.complete + .final
    {
        display: block;
    }
    /* When step is complete hide the completion label */
    .step.complete label.done {
        display: none;
    }

/* Hints */
    /* Hide hints by default */
    .hint, .content
    {
        display: none;
        margin-left: 20px;
    }

    /* First hint of active step will be shown */
    #worksheet.saved .step.active :nth-child(1 of .hint)
    {
        display: block;
    }

    /* When a hint is taken...*/
    /* Display the contents */
    .hint.taken,
    .hint.taken + .content
    {
        display: block;
    }
    /* ...and display the NEXT Hint */
    .hint.taken + .content + .hint
    {
        display: block;
    }

    .hint::before {
        content: "Available:";
        padding-right: 0.5em;
        color: orange;
    }
    
    .hint.taken::before {
        content: "Taken:";
        padding-right: 0.5em;
        color: rgb(32, 191, 32);
    }

/*Styling only */
.hint {
    font-size: 10pt;
    font-weight: bold;
    margin-top: 10pt;
    margin-bottom: 4pt;
    color: rgb(15, 71, 97);
}

.done {
    color: rgb(15, 71, 97);
    font-weight: bold;
    margin-right: 0.5em;
}

.timestamp {
    margin-left: 5px;
    font-size: 8pt;
}

.license, .license img {
    font-size: 8pt;
    margin-top: 1em;
}

.license img {
    display: block;
}

textarea {
    width: 100%;
    field-sizing: content;
    font-family: monospace;
    font-weight: bold;
    color: blue
}

input[type="text"]
{
    border: 1px;
    border-style: solid;
}
input.step-complete {
    margin-top: 10px;
}
code, el-code, el-code-block {
    user-select: none;
}

el-fr {
    display: none; /* Because the instruction numbers start from 1 for each snippet, which is misleading */
}

/* Code diffs */
.diff {
    white-space: pre; 
    border: solid 1px #04b304;
    overflow:hidden;
    padding-left: 1.2em;
}

.diff, .diff * {
    font-family: monospace;
    font-size: 10px;
}

.diff ins {
    color: green;
    background-color: #eaf2c2;
    display: block;
    white-space: pre;
    text-decoration: none;
    margin-left: 0;
}

.diff del {
    color: red;
    background-color: #fadad7;
    display: block;
    white-space: pre;
    text-decoration: none;
    margin-left: 0;
}

.diff del::before {
    content: "- ";
    margin-left: -1em;
}

.diff ins::before {
    content: "+ ";
    margin-left: -1em;
}
.snapshot {
    margin-top: 10px;
}
.snapshot.collapsed .diff {
    display: none;
}

.snapshot.collapsed::before {
    content: "code \25b3";
    color: green;
}