.cm-style1 {
  color: blue !important;
}

body {
    margin:40px auto;
    max-width:950px;
    line-height:1.6;
    color:#444;
    padding:0 10px;
    font-family: "Lucida Console", Monaco, monospace;
}

.page {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}

.page-header h2,
.page-header h3,
.panel h3 {
    margin: 0;
}

.page-subtitle {
    margin: 0.35rem 0 0;
}

.panel {
    border: 1px solid #bbb;
    background: #fbfbfb;
    padding: 1rem;
}

.section-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.8rem;
}

.symbol-panel {
    background: #f7f3ea;
}

.symbol-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.symbol-button {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    border: 1px solid #2f3a4a;
    background: #fffdf8;
    color: #222;
    padding: 0.45rem 0.8rem;
    cursor: pointer;
    font: inherit;
}

.symbol-button:hover,
.symbol-button:focus {
    background: #e6f1ff;
}

.symbol-glyph {
    font-size: 1.25rem;
    line-height: 1;
}

.symbol-label {
    font-size: 0.85rem;
}

.symbol-help {
    margin: 0.75rem 0 0;
    font-size: 0.95rem;
}

.symbol-help code {
    background: #fff;
    padding: 0.05rem 0.25rem;
}

.workspace {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.reference-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.panel ul {
    margin: 0.75rem 0 0;
    padding-left: 1.25rem;
}

.panel li + li {
    margin-top: 0.35rem;
}

#codediv {
    border-style: solid;
}

#run {
    border: 1px solid #2f3a4a;
    background: #fffdf8;
    color: #222;
    padding: 0.45rem 1rem;
    cursor: pointer;
    font: inherit;
}

#run:hover,
#run:focus {
    background: #e6f1ff;
}

#output {
    border-style: dotted;
    min-height: 10px;
    padding: 10px 10px;
}

#error {
    min-height: 1.2rem;
    margin-bottom: 0.75rem;
    color: red;
}

#report {
    margin: 0;
    text-align: right;
}

#report a:link {
    color: red;
}
#report a:visited {
    color: red;
}
#report a:active {
    color: red;
}


.footer {
  left: 0;
  bottom: 0;
  width: 100%;
  text-align: center;
  padding-top: 0.25rem;
}


/* https://stackoverflow.com/questions/15382608/punctuation-loading-animation-javascript */
@keyframes dots-1 { from { opacity: 0; } 25% { opacity: 1; } }
@keyframes dots-2 { from { opacity: 0; } 50% { opacity: 1; } }
@keyframes dots-3 { from { opacity: 0; } 75% { opacity: 1; } }
@-webkit-keyframes dots-1 { from { opacity: 0; } 25% { opacity: 1; } }
@-webkit-keyframes dots-2 { from { opacity: 0; } 50% { opacity: 1; } }
@-webkit-keyframes dots-3 { from { opacity: 0; } 75% { opacity: 1; } }

.dots span {
    animation: dots-1 .3s infinite steps(1);
    -webkit-animation: dots-1 .3s infinite steps(1);
}

.dots span:first-child + span {
    animation-name: dots-2;
    -webkit-animation-name: dots-2;
}

.dots span:first-child + span + span {
    animation-name: dots-3;
    -webkit-animation-name: dots-3;
}

@media (max-width: 700px) {
    body {
        margin: 20px auto;
    }

    .page-header {
        flex-direction: column;
    }

    .symbol-button {
        width: calc(50% - 0.4rem);
        justify-content: center;
    }

    .section-heading {
        flex-direction: column;
        align-items: flex-start;
    }

    .reference-grid {
        grid-template-columns: 1fr;
    }
}