button#check_b {
    /* border: 1px solid #CFD6E6; */
    /* background-color: #F5F6F7; */
    font-variant: small-caps;
    /* padding: 8px; */
}
#aoa {
    font-family: sans-serif;
    font-weight: bold;
    display: block;
    color: black;
}
#checkmark {
    margin-top: -20%;
    margin-bottom: -20%;
    font-size: 180%;
    font-weight: bolder;
    font-family: serif;
    display: block;
    text-align: right;
    width: 100%;
    color: #729FCF;
}
/* TODO: make an SVG instead, like quill? */
/* .ql-check { */
/*   background: no-repeat scroll 50% 50% transparent !important; */
/*   background-image: url("attachment.svg") !important; */
/*   text-align: center; */
/* } */
/* .ql-check:hover { */
/*   background-image: url("attachment-hover.svg") !important */
/* } */

.ql-check::after {
    content: "✓";
    display: inline-block;
    width: 100%;
    border-bottom: 2px dotted blue;
    font-size: larger;
    margin-top: -1em;
}

button.loading-check::after {
    display: none;
}
.ql-snow button.loading-check,
button.loading-check {
    padding: 5px;
}


.error {
    cursor: pointer;
    position: relative;
}
.error::after {
    content: "";
    position: absolute;
    display: inline-block;
    width: 100%;
    left: 0%;
    top: 100%;
    border-bottom: 2px dotted blue;
}
.error-red::after { border-bottom: 2px dotted red; }
.error-green::after { border-bottom: 2px dotted green; }
.error-pink::after { border-bottom: 2px dotted #f7a; }

@supports (text-decoration-style: wavy) {
    .ql-check::after,
    .error {
        -webkit-text-decoration-color: blue;
        -webkit-text-decoration-line: underline;
        -webkit-text-decoration-style: wavy;
        text-decoration-color: blue;
        text-decoration-line: underline;
        text-decoration-style: wavy;
    }
    .ql-check::after,
    .error::after,
    .error-red::after,
    .error-green::after,
    .error-pink::after {
        border-bottom: none;
    }
    .error-red {
        -webkit-text-decoration-color: red;
        text-decoration-color: red;
    }
    .error-green {
        -webkit-text-decoration-color: green;
        text-decoration-color: green;
    }
    .error-pink {
        -webkit-text-decoration-color: #f7a;
        text-decoration-color: #f7a;
    }
}

#repmenu {
    font-size: 92%;
    position: absolute;
    /* js sets these: */
    /* left: 221.5px; */
    /* top: 330px; */
    z-index: 200000;
    outline: 0px none;
    /* presumably js class for this one: */
    display: block;
    /* js sets these? */
    width: 170px;
    min-height: 91px;           /* TODO set in js? other better solution? */
}
#repmenu_co {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    z-index: 1000;
    direction: ltr;
}
#repmenu_tbl {
    width: 100%;
    height: 100%;
    background-color: white;
    border: 1px solid #D4D0C8;
}
#repmenu_tbl td, .repmenu_nonfirst {
    vertical-align: middle;
    padding-left: 2%;
}

.repmenu_msg {
    background-color: #eee;
    padding: 2px;
    border-bottom: 1px solid #D4D0C8;
    font-weight: bold;
}
.repmenu_nonfirst:hover {
    background-color: #abc;
}
.repmenu_rep, .repmenu_rep td, .repmenu_rep a,
.repmenu_rep, .repmenu_rep td, .repmenu_rep a {
    cursor: pointer;
}

.repmenu_ign {
    border-top: 1px solid #D4D0C8;
    font-style: italic;
}

.repmenu_ign,
.repmenu_rep {
    text-align: left;
}

.hl-space {
    background-color: #EFEFEF;
}

#editor {
    min-height: 150px;
    max-height: 500px;
    overflow-y: hidden;
}
.ql-editor {
    overflow-y: scroll;
    max-height: 500px;          /* minus toolbar though? */
}

.blur {
    -webkit-filter : blur(1px) grayscale(100%);
    -moz-filter    : blur(1px) grayscale(100%);
    -o-filter      : blur(1px) grayscale(100%);
    -ms-filter     : blur(1px) grayscale(100%);
    filter         : blur(1px) grayscale(100%);
    opacity: 0.5;
}

.block-view {
    position: absolute;
    top: 10%;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
}

#loginform,
#serverfault {
    /* hide initially; js calls show() if there is a message: */
    display: none;
    background-color: white;
    border: 1px solid #D4D0C8;
    padding: 1em;
}
#serverfault {
    font-style: italic;
}
#serverfault div {
    margin: 1em;
    font-family: monospace;
}

#examples button {
    margin-bottom: 0.5em;
}

.loading {
    background-color: #f2f2f2;
}


.glyphicon.spinning {
    -webkit-animation: spinw 1s infinite linear;
    -moz-animation: spinm 1s infinite linear;
    -o-animation: spino 1s infinite linear;
    animation: spin 1s infinite linear;
}
@-webkit-keyframes spinw {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}
@-moz-keyframes spinm {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}
@-o-keyframes spino {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
    from { transform: scale(1) rotate(0deg); }
    to { transform: scale(1) rotate(360deg); }
}

/* Bootstrap overrides: */
@media screen and (min-width: 400px) {
    /* Our navbar is quite short :) */
    .navbar-header {
        float: left !important;
    }
    .navbar-right {
        float: right !important;
    }
}

.mode-selected a::before {
    content: "✓";
    display: inline;
    font-size: larger;
}


/* Margins snatched from tachyons: */
.ma0{margin:0}.ma1{margin:.25rem}.ma2{margin:.5rem}.ma3{margin:1rem}.ma4{margin:2rem}.ma5{margin:4rem}.ma6{margin:8rem}.ma7{margin:16rem}.ml0{margin-left:0}.ml1{margin-left:.25rem}.ml2{margin-left:.5rem}.ml3{margin-left:1rem}.ml4{margin-left:2rem}.ml5{margin-left:4rem}.ml6{margin-left:8rem}.ml7{margin-left:16rem}.mr0{margin-right:0}.mr1{margin-right:.25rem}.mr2{margin-right:.5rem}.mr3{margin-right:1rem}.mr4{margin-right:2rem}.mr5{margin-right:4rem}.mr6{margin-right:8rem}.mr7{margin-right:16rem}.mb0{margin-bottom:0}.mb1{margin-bottom:.25rem}.mb2{margin-bottom:.5rem}.mb3{margin-bottom:1rem}.mb4{margin-bottom:2rem}.mb5{margin-bottom:4rem}.mb6{margin-bottom:8rem}.mb7{margin-bottom:16rem}.mt0{margin-top:0}.mt1{margin-top:.25rem}.mt2{margin-top:.5rem}.mt3{margin-top:1rem}.mt4{margin-top:2rem}.mt5{margin-top:4rem}.mt6{margin-top:8rem}.mt7{margin-top:16rem}.mv0{margin-top:0;margin-bottom:0}.mv1{margin-top:.25rem;margin-bottom:.25rem}.mv2{margin-top:.5rem;margin-bottom:.5rem}.mv3{margin-top:1rem;margin-bottom:1rem}.mv4{margin-top:2rem;margin-bottom:2rem}.mv5{margin-top:4rem;margin-bottom:4rem}.mv6{margin-top:8rem;margin-bottom:8rem}.mv7{margin-top:16rem;margin-bottom:16rem}.mh0{margin-left:0;margin-right:0}.mh1{margin-left:.25rem;margin-right:.25rem}.mh2{margin-left:.5rem;margin-right:.5rem}.mh3{margin-left:1rem;margin-right:1rem}.mh4{margin-left:2rem;margin-right:2rem}.mh5{margin-left:4rem;margin-right:4rem}.mh6{margin-left:8rem;margin-right:8rem}.mh7{margin-left:16rem;margin-right:16rem}