run_attempt.css

body {
    margin: 0;
}
#scorm-player {
    border: none;
}
body.ended #scorm-player {
    display: none;
}

#status-display {
    position: absolute;
    bottom: 0;
    right: 0;
    padding: 0.4em 1em;
    border-radius: 4px 0 0 0;
    background: hsl(0,90%,50%);
    color: white;
    font-family: sans-serif;
    transition: background-color 0.5s;
}
#status-display a {
    color: white;
}
#status-display.ok:not(.ended):not(.confirmation):not(.deadline-changed):not(.unavailable-at) {
    display: none;
}
#status-display .status-message {
    display: none;
}
#status-display:not(.localstorage-used) .text-localstorage-used {
    display: none;
}
body.terminated #status-display .symbol, #status-display .symbol {
    display: none;
}
#status-display.disconnected .text-disconnected,
#status-display.ended .text-ended,
#status-display.ok .text-ok,
#status-display.confirmation .text-confirmation,
#status-display.unavailable-at .text-unavailable-at,
#status-display.terminated:not(.ok):not(.failed-final-ajax):not(.ended) .text-terminated,
#status-display.failed-final-ajax .text-failed-final-ajax,
#status-display.loading-error .text-loading-error
{
    display: block;
}


#receipt-code {
    white-space: normal;
    line-break: anywhere;
    font-size: 0.8em;
    padding: 0 2rem;
}
body.terminated #status-display.confirmation {
    background: hsl(120, 90%, 25%);
    padding: 0.5em;
    border-radius: 0;
    font-size: 1rem;
}
#status-display p {
    margin-top: 0;
    margin-bottom: 0.5em;
}

body.terminated #status-display {
    left: 0;
    font-size: 1.5rem;
    padding-bottom: 2em;
    position: static;
}
body.terminated .text-localstorage-used {
    display: none;
}

body:not(.terminated) #status-display.unavailable-at {
    background: hsl(240, 50%, 25%);
    position: static;
    padding: 0.5em;
    border-radius: 0;
}


body:not(.terminated) #status-display.disconnected {
    background: hsl(0,90%,50%);
}

#deadline-change-display {
    position: absolute;
    top: 0;
    right: 0;
    padding: 0.4em 1em;
    border-radius: 0 0 0 4px;
    background: hsl(0,0%,0%);
    color: white;
    font-family: sans-serif;
    display: none;
}
#deadline-change-display.show {
    display: block;
}

#try-final-ajax-again {
    font-size: 1em;
    border: 0.1em solid hsl(0,0%,50%);
    background: hsl(120,0%,95%);
    border-radius: 0.1em;
    padding: 0.2em 0.5em;
}
#try-final-ajax-again:hover,
#try-final-ajax-again:focus {
    background: hsl(120,95%,90%);
}

#try-final-ajax-again:disabled {
    background: hsl(120,0%,70%);
}