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

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

/* After saving ... */
    #worksheet.saved #auto-save,
    #worksheet.saved #auto-save + span
    {
        display: none;
    }


/* Steps */
    /* step0 (preliminaries) only */
    #worksheet.saved #step0.complete * {
        display: none;
    }
    #worksheet.saved #step0.complete #username{
        display: block;
    }

    /* By default, invisible */
    .step {
        display: none;
    }
    /* Show complete & active steps, when worksheet is saved */
    #worksheet.saved .step.complete,
    #worksheet.saved .step.active {
        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 .hint:first-of-type
    {
        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;
}

.step textarea {
    width: 100%;
    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 */
}