html, body {
    font-family: 'Roboto', sans-serif;
}

.logo-container {
    margin-right: 20px;
}

.title-container {
    margin-top: 38px;
    margin-left: 20px;
}

.output-label {
    font-size: 18px;
    font-weight: bold;
}

.source-label {
    margin-bottom: 5px;
}

@media (max-width: 767px) {
    #source-dropdown {
        display: inline-block;
        width: auto;
        vertical-align: middle;
    }
}

.editor {
    border: 1px solid #DDD;
}

.view-options-container {
    margin-top: -30px;
    margin-bottom: 20px;
}

    .view-options-container .btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle) {
        border-top-left-radius: 0;
    }

    .view-options-container .btn-group > .btn:last-child:not(:first-child), .btn-group > .dropdown-toggle:not(:first-child) {
        border-top-right-radius: 0;
    }

    /*.view-options-container .btn {
    background: #eee;
}*/

    .view-options-container .btn.active, .view-options-container .btn:active {
        background-color: #567894;
        border-color: #3D709D;
        color: white;
    }

#loading {
    text-align: center;
    font-size: 25px;
}

    #loading > div {
        display: inline-block;
        text-align: center;
    }

    #loading .loading-text {
        float: left;
    }

/* match cool's comment color */
.javascript-theme .cm-comment {
    font-style: italic;
    color: #3F7F5F;
}

div.CodeMirror span.CodeMirror-matchingbracket {
    color: #000;
    background: rgb(169, 210, 188);
}

div.CodeMirror span.CodeMirror-nonmatchingbracket {
    color: #FFFFFF;
    background: rgb(197, 80, 80);
}

.squiggly-underline {
    position: absolute;
    background-repeat: repeat-x;
    margin-top: -3px;
    margin-left: -2px;
    padding-left: 4px;
    z-index: 2;
    pointer-events: none;
}

    .squiggly-underline.red-squiggly-underline {
        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3wQWDAwcHuBA/gAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAAOklEQVQI1zXIMRGAMBAAsDzHwoiLiqmN14EIxhqrg8p4hh5bLlG9P2CMF0cUO1oD5w9zgqi1blwyEz6qnwvN7E3FeQAAAABJRU5ErkJggg==');
    }

    .squiggly-underline.green-squiggly-underline {
        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3wQbAjEcjPz9lwAAAEdJREFUCNdjtFjpXs/AwMCwxGvGZGZGZiZG6UClegYGBgY+XWEGBgYGBhYY49PltwwMDAwMjDc/3RHkYeHmDN6ckMrAwMAAAKcLDNMVhRLUAAAAAElFTkSuQmCC');
    }

/* console styles */
div.console {
    font-size: 14px;
    border: 1px solid #DDD;
}

    div.console div.jquery-console-inner {
        background: #FAFAFA;
        padding: 0.5em;
        overflow: auto;
    }

    div.console div.jquery-console-prompt-box {
        color: black;
        font-family: monospace;
    }

    div.console div.jquery-console-focus span.jquery-console-cursor {
        background: #667;
        color: white;
        font-weight: bold;
        -moz-animation: blink 1.2s steps(2, start) infinite;
        -o-animation: blink 1.2s steps(2, start) infinite;
        -webkit-animation: blink 1.2s steps(2, start) infinite;
        animation: blink 1.2s steps(2, start) infinite;
    }

    div.console div.jquery-console-output {
        color: #00c;
        font-family: monospace;
        padding: 0.1em;
        white-space: pre;
        -ms-word-wrap: break-word;
        word-wrap: break-word;
    }

    div.console div.jquery-console-info {
        color: #696971;
        font-family: monospace;
        padding: 0.1em;
        font-style: italic;
    }

    div.console div.jquery-console-error {
        color: #ef0505;
        font-family: monospace;
        padding: 0.1em;
        white-space: pre;
        -ms-word-wrap: break-word;
        word-wrap: break-word;
    }

    div.console div.jquery-console-success {
        color: #488026;
        font-family: monospace;
        padding: 0.1em;
    }

    div.console span.jquery-console-prompt-label {
        color: black;
    }

@keyframes blink {
    to {
        visibility: hidden;
    }
}

@-webkit-keyframes blink {
    to {
        visibility: hidden;
    }
}

@-moz-keyframes blink {
    to {
        visibility: hidden;
    }
}

.glyphicon-spin {
    -webkit-animation: spin 1200ms infinite linear;
    -moz-animation: spin 1200ms infinite linear;
    -o-animation: spin 1200ms infinite linear;
    animation: spin 1200ms infinite linear;
}

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(359deg);
        -moz-transform: rotate(359deg);
        -ms-transform: rotate(359deg);
        -o-transform: rotate(359deg);
        transform: rotate(359deg);
    }
}

@keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(359deg);
        -moz-transform: rotate(359deg);
        -ms-transform: rotate(359deg);
        -o-transform: rotate(359deg);
        transform: rotate(359deg);
    }
}