body {
    margin: 0;
    padding: 0;
}

main {
    max-width: 1200px;
    margin: 10px auto;
    padding: 0 20px;
}

    main.il-formatted {
        font-size: 1.4em;
    }

.buttons {
    display: flex;
    flex: 0 1 50%;
    column-gap: 40px;
}

    .buttons .il-button {
        min-width: 200px;
        margin: 0;
    }

main.il-formatted .il-button {
    font-size: 1.4em;
    line-height: 1.6em;
}

main.il-formatted h1:first-child {
    margin-top: 24px;
}

.il-button.hidden, .hidden {
    display: none;
}

button[disabled].il-button, .il-formatted button[disabled].il-button:focus, .il-formatted button[disabled].il-button:hover {
    background: var(--il-gray-1);
    color: var(--il-gray-2);
    border-color: var(--il-gray-2);
}

.il-formatted textarea {
    height: 240px;
}

.instruction {
    padding: 5px !important;
    margin-bottom: 15px !important;
    border: thin solid black;
}

#countdown {
    font-weight: 700;
    z-index: 20;
    padding: 20px;
    margin: 30px 10px;
    font-size: 24px;
    border: 2px solid var(--il-blue);
    background-color: #ffffed;
    text-align: center;
    position: fixed;
    top: 100px;
    left: calc(100% - 140px);
    width: 100px;
}

    #countdown.background {
        background-color: #ffaaaa;
    }

.interactive {
    width: 80%;
}

    .interactive span.question {
        margin-right: 2px;
        background: var(--il-cloud-1);
    }

    .interactive span.nowrap {
        white-space: nowrap;
    }

    .interactive span.faded {
        background: var(--il-cloud-1);
        display: block;
    }

    .interactive input {
        width: 20px;
        text-align: center;
        border: none;
        border-bottom: thin solid black;
        margin: 0 2px;
        background: var(--il-cloud-1);
        outline: none;
        font-size: 1em;
    }

        .interactive input:hover, .interactive input:focus, .interactive input.selected {
            border: none;
            border-bottom: thin solid black;
            background: white;
            border-top: thin solid black;
        }

    .interactive select {
        font-size: 1em;
    }

.letters {
    width: 80%;
    margin: 40px 0 10px 0;
    border: thin solid black;
    padding: 20px;
    position: fixed;
    left: 0;
    bottom: 10px;
    z-index: 99;
    background: white;
    display: block;
}

    .letters.popup {
        display: none;
    }

    .letters .button-area {
        padding: 20px 0;
        display: flex;
        column-gap: 10px;
        row-gap: 3px;
        flex-direction: column;
    }

    .letters .button-row {
        display: flex;
        column-gap: 5px;
        width: 500px;
    }

    .letters span.button-blank {
        display: inline-block;
        height: 2rem;
        width: 2rem;
        background: #ccc;
    }

        .letters span.button-blank.long {
            width: 2.5rem;
        }

        .letters span.button-blank.long2 {
            width: 3.4rem;
        }

        .letters span.button-blank.long3 {
            width: 4.5rem;
        }

    .letters button {
        height: 2rem;
        width: 2rem;
        font-size: 1.2rem;
        border: none;
    }

        .letters button:hover, .letters button:focus {
            color: white;
            background: black;
        }

.basic-questions {
    margin: 30px;
}

    .basic-questions label {
        display: block;
    }

.answer-bank {
    padding: 10px;
    background: var(--il-cloud-1);
    z-index: 10;
    position: fixed;
    bottom: 0;
    max-width: 960px;
    margin: 10px auto;
}

    .answer-bank span {
        padding: 5px 10px;
        border: thin solid var(--il-orange);
        margin: 5px 10px;
        display: inline-block;
        background: white;
    }

.answer-bank-space {
    height: 400px;
}

.il-formatted .ils-input-entry-radio {
    column-gap: 10px;
    row-gap: 5px;
    align-items: start;
}

.ratings label {
    font-weight: 700;
}

    .ratings label span {
        display: block;
        font-weight: 400;
    }

.il-formatted .ils-input-disclaimer {
    padding: 20px;
    margin: 20px auto;
    border: thin solid var(--il-orange);
    display: flex;
    align-items: center;
}

    .il-formatted .ils-input-disclaimer label {
        width: initial;
        margin: 0 15px 0 0;
        text-align: left;
    }

    .il-formatted .ils-input-disclaimer input {
        width: 50px;
        flex: 0 0 50px;
    }

.il-formatted a.answered {
    font-style: italic;
}

    .il-formatted a.answered::after {
        content: '*';
    }

.il-formatted a.flagged {
    font-style: italic;
    font-weight: bold;
}

    .il-formatted a.flagged::after {
        content: '****';
    }

section.other-ratings {
    margin: 20px 0;
    padding: 20px 0;
    border-top: thin solid var(--il-orange);
    border-bottom: thin solid var(--il-orange);
}

.otheranswer-table caption {
    text-indent: -9999em;
    outline: 0;
    height: 0;
}

.il-formatted .otheranswer-table th, .il-formatted .otheranswer-table td {
    padding: 0 1rem;
}