.hide .message {
    display: none;
}

.show {
    display: block;
}

#quiz-area {
    position: relative;
}

    #quiz-area .quiz-wrapper {
        margin: 15px auto 0 auto;
        width: 100%;
    }

    #quiz-area fieldset {
        /*DO NOT MERGE*/
        border: none;
    }

    #quiz-area fieldset {
        background-color: #fff;
        border-top: 1px solid #959595;
        font-family: Arial;
        left: 0;
        opacity: 0;
        padding: 39px 0 0 0;
        position: absolute;
        top: 0;
        transition: all 250ms ease-in;
        width: 100%;
    }

        #quiz-area fieldset.active {
            opacity: 1;
            z-index: 10;
        }

        #quiz-area fieldset button {
            margin-top: 10px;
        }

        #quiz-area fieldset [data-role="failure-message"] {
            background-image: url('data:image/gif;base64,R0lGODlhCAAIAIAAAOLi4vX19SH5BAAAAAAALAAAAAAIAAgAAAIMjB+Aptv4TmQr1WkKADs=');
            font-style: italic;
            margin-top: 10px;
            /*transition: all 500ms ease-in;*/
        }

        #quiz-area fieldset [data-role="failure-message"] {
            opacity: 0;
            overflow: hidden;
        }

            #quiz-area fieldset [data-role="failure-message"] strong {
                /*Un-italicize*/
                font-style: normal;
            }

            #quiz-area fieldset [data-role="failure-message"] p {
                line-height: 1.4;
                margin: 0;
                padding: 0;
            }

                #quiz-area fieldset [data-role="failure-message"] p + p {
                    margin-top: 16px;
                }

        #quiz-area fieldset.fail [data-role="failure-message"],
        #quiz-area fieldset.score-0 [data-role="failure-message"],
        #quiz-area fieldset.score-1 [data-role="failure-message"],
        #quiz-area fieldset.score-2 [data-role="failure-message"],
        #quiz-area fieldset.score-3 [data-role="failure-message"],
        #quiz-area fieldset.thanks [data-role="failure-message"] {
            height: auto;
            opacity: 1;
            padding: 24px;
        }

        #quiz-area fieldset.score-0 [data-role="failure-message"] {
            /*border: 1px solid red;*/
        }

        #quiz-area fieldset.score-1 [data-role="failure-message"] {
            /*border: 1px solid yellow;*/
        }

        #quiz-area fieldset.score-2 [data-role="failure-message"] {
            /*border: 1px solid green;*/
        }

        #quiz-area fieldset legend {
            background-color: #0146ad;
            color: #fff;
            font-weight: 700;
            padding: 10px 20px;
            position: absolute;
            top: 0;
        }

        #quiz-area fieldset input[type=number] {
            max-width: 64px;
        }

        #quiz-area fieldset .radio-button-collection span {
            display: block;
            margin-bottom: 5px;
        }

        #quiz-area fieldset .radio-button-collection span input[type=radio], input[type=checkbox] {
            -webkit-appearance: radio;
        }

        #quiz-area fieldset .radio-button-collection span input[type=checkbox] {
            -webkit-appearance: checkbox;
        }

        #quiz-area fieldset label {
            margin-left: 6px;
            vertical-align: top;
        }

        #quiz-area fieldset .question-text {
            font-weight: 700;
        }

            #quiz-area fieldset .question-text .sub-label {
                display: block;
                font-weight: 400;
            }

            #quiz-area fieldset .question-text .select-one {
                font-weight: 400;
            }

    #quiz-area [data-role="bottom-nav-and-progress"] {
        margin-top: 30px;
        text-align: center;
        width: 100%;
    }

    #quiz-area .prev-next {
        /*bottom: 40px;*/
        margin: 0 auto;
        /*position: absolute;*/
        text-align: center;
        width: 100%;
    }

        #quiz-area .prev-next button {
            background-color: #3889c7;
            border: none;
            border-radius: 5px;
            color: #fff;
            cursor: pointer;
            display: inline-block;
            font-size: 16px;
            margin: 0 5px;
            padding: 5px 10px;
            transition: all 100ms ease-in;
        }

    #quiz-area [data-role="thanks"] .all-results {
        margin-top: 75px;
    }

        #quiz-area [data-role="thanks"] .all-results .single-result .header {
            font-weight: 700;
            line-height: 1.6;
        }

        #quiz-area [data-role="thanks"] .all-results .single-result .answers {
            margin-bottom: 16px;
            margin-top: 16px;
        }

    #quiz-area [data-role="thanks"] strong.header {
        color: #018ccc;
        display: block;
        font-size: 36px;
        font-weight: 400;
        margin-bottom: 20px;
    }

    #quiz-area [data-role="thanks"] .print-button {
        color: #0046ad;
        cursor: pointer;
        text-decoration: underline;
    }

    #quiz-area [data-role="thanks"] .single-result + .single-result {
        margin-top: 32px;
    }

    /**
 * This holds a Unicode arrow so attempt to force it into a font that's known
 * to hold that glyph
 */
    #quiz-area .prev-next button span {
        font-family: 'Arial Unicode MS', 'Arial', sans-serif !important;
    }

    #quiz-area .prev-next button:hover {
        background-color: #0046ad;
        color: #fff;
    }

    #quiz-area fieldset:first-of-type button[data-direction=prev],
    #quiz-area fieldset:last-of-type button[data-direction=next],
    #quiz-area .prev-next button[disabled=disabled] {
        background-color: #ddd;
        color: #999;
        cursor: default;
    }

	#quiz-area .progress-bar-container {
		background-color: #d2d2d2;
		border-radius: 12px;
		height: 12px;
		margin: 16px auto 0 auto;
		max-width: 360px;
		width: 100%;
	}

    #quiz-area .progress-bar {
        background-color: #0146ad;
        border-radius: 12px;
        height: 100%;
        width: 0;
    }

    #quiz-area .question-x-of-y {
        color: #999;
        font-size: 80%;
        margin-top: 10px;
    }