code {
    letter-spacing: 0.02em;
    padding: 2px 4px;
    /*font-weight: 700;
    color: #008ED4;
    font-size: 14px;
    vertical-align: baseline;
    font-family: 'Droid Sans Mono',sans-serif;*/
}

p code, span code, li code {
    background-color: rgba(135, 215, 255, 0.2);
}

.paddingBetweenCols {
    th {
        text-align: left;
        padding: 15px 15px 15px 15px;
    }
    td {
        padding: 15px 15px 15px 15px;
        /*        border: 1 px solid black;*/
    }
}

.highlight pre, .redhighlight pre {
    font-size: 13px;
    line-height: 20px;
    padding: 0 10px 20px 10px;
}

.highlighttable {
    margin-left: 10px;
    margin-bottom: 20px;
    margin-right: 10px;
    border-collapse: separate !important;
    .highlight pre, .redhighlight pre {
        padding: 0;
    }
    code {
        padding-right: 10px;
        margin: 0;
        padding-left: 2px;
        font-size: 12px;
        display: block;
        line-height: 20px;
        white-space: pre;
        color: hsl(210, 100%, 8%);
    }
}

.highlight pre code, .redhighlight pre code, .highlighttable {
    overflow-x: scroll;
    display: block;
    padding: 0;
    font-size: 13px;
    border: 1px solid rgb(220, 220, 220);
    padding: 5px 10px;
    box-sizing: border-box;
    border-radius: 3;
}

.highlight pre code, .highlighttable {
    background-color: rgba(90, 140, 140, 0.1);
}

.redhighlight pre code {
    background-color: rgba(180, 80, 80, 0.1);
}

.showcasetable code {
    padding: 10px 10px 30px 30px;
    margin: 10;
}

.highlight pre code, .redhighlight pre code {
    width: 100%;
    white-space: pre;
}

.lineno {
    color: rgb(214, 139, 0);
    &::after {
        content: ';';
        font-size: 0;
    }
}

.highlight + .highlight + .highlight, .highlighttable + .highlight + .highlight, .redhighlight + .redhighlight + .redhighlight .highlighttable + .redhighlight + .redhighlight {
    margin-top: -20px;
}

/**
 * Syntax highlighting styles
 */
/* not official Xcode colors, but looks better on the web */

.highlight {
    background: #fff;
    .c {
        color: #008d14;
        font-style: italic;
    }
    .err {
        color: #a61717;
        background-color: #e3d2d2;
    }
    .k {
        color: #103ffb;
    }
    .cm {
        color: #008d14;
        font-style: italic;
    }
    .cp {
        color: #b72748;
    }
    .c1 {
        color: #008d14;
        font-style: italic;
    }
    .cs {
        color: #008d14;
        font-weight: bold;
        font-style: italic;
    }
    .gd {
        color: #000;
        background-color: #fdd;
        .x {
            color: #000;
            background-color: #faa;
        }
    }
    .ge {
        font-style: italic;
    }
    .gr {
        color: #a00;
    }
    .gh {
        color: #999;
    }
    .gi {
        color: #000;
        background-color: #dfd;
        .x {
            color: #000;
            background-color: #afa;
        }
    }
    .go {
        color: #888;
    }
    .gp {
        color: #555;
    }
    .gs {
        font-weight: bold;
    }
    .gu {
        color: #aaa;
    }
    .gt {
        color: #a00;
    }
    .kc, .kd {
        color: orange;
    }
    .kp, .kr {
        color: #008d14;
    }
    .kt {
        color: #103ffb;
    }
    .m {
        color: orange;
    }
    .s {
        color: #b72748;
    }
    .na {
        color: orange;
    }
    .nb {
        color: #103ffb;
    }
    .nc {
        color: #3a95ba;
    }
    .no, .ni, .ne, .nn, .nt {
        color: orange;
    }
    .w {
        color: #bbb;
    }
    .mh, .mi, .mo, .il {
        color: black;
    }
    .sb, .sc, .sd, .s2, .se, .sh, .si, .sx {
        color: #d14;
    }
    .sr {
        color: orange;
    }
    .s1, .ss {
        color: #b72748;
    }
    .bp, .vc {
        color: #3a95ba;
    }
    .vg {
        color: black;
    }
    .vi {
        color: orange;
    }
    .nl {
        color: #3a95ba;
    }
}