@import "fonts.less";

// The mu unit is defined as 1/18 em
@mu: 1.0/18.0em;

.katex-display {
    display: block;
    margin: 1em 0;
    text-align: center;

    > .katex {
        display: inline-block;
        text-align: initial;
    }
}

.katex {
    font: normal 1.21em KaTeX_Main, Times New Roman, serif;
    line-height: 1.2;
    white-space: nowrap;

    // Protect elements inside .katex from inheriting text-indent.
    text-indent: 0;

    // Prevent a rendering bug that misplaces \vec in Chrome.
    text-rendering: auto;

    // Prevent background resetting on elements in Windows's high-contrast
    // mode, while still allowing background/foreground setting on root .katex
    * { -ms-high-contrast-adjust: none !important; }

    .katex-html {
        // Making .katex inline-block allows line breaks before and after,
        // which is undesireable ("to $x$,"). Instead, adjust the .katex-html
        // style and put nowrap on the inline .katex element.
        display: inline-block;
    }

    .katex-mathml {
        // Accessibility hack to only show to screen readers
        // Found at: http://a11yproject.com/posts/how-to-hide-content/
        position: absolute;
        clip: rect(1px, 1px, 1px, 1px);
        padding: 0;
        border: 0;
        height: 1px;
        width: 1px;
        overflow: hidden;
    }

    .base {
        display: inline-block;
    }

    .strut {
        display: inline-block;
    }

    .mathrm {
        font-style: normal;
    }

    .textit {
        font-style: italic;
    }

    .mathit {
        font-family: KaTeX_Math;
        font-style: italic;
    }

    .mathbf {
        font-family: KaTeX_Main;
        font-weight: bold;
    }

    .amsrm {
        font-family: KaTeX_AMS;
    }

    .mathbb {
        font-family: KaTeX_AMS;
    }

    .mathcal {
        font-family: KaTeX_Caligraphic;
    }

    .mathfrak {
        font-family: KaTeX_Fraktur;
    }

    .mathtt {
        font-family: KaTeX_Typewriter;
    }

    .mathscr {
        font-family: KaTeX_Script;
    }

    .mathsf {
        font-family: KaTeX_SansSerif;
    }

    .mainit {
        font-family: KaTeX_Main;
        font-style: italic;
    }

    // This value is also used in fontMetrics.js, if you change it make sure the
    // values match.
    @ptperem: 10.0;
    @nulldelimiterspace: 1.2em / @ptperem;

    @thinspace: 0.16667em;      // 3mu
    @mediumspace: 0.22222em;    // 4mu
    @thickspace: 0.27778em;     // 5mu

    // These spacings apply in textstyle and displaystyle.
    .mord {
        & + .mord {}
        & + .mop { margin-left: @thinspace; }
        & + .mbin { margin-left: @mediumspace; }
        & + .mrel { margin-left: @thickspace; }
        & + .mopen {}
        & + .mclose {}
        & + .mpunct {}
        & + .minner { margin-left: @thinspace; }
    }

    .mop {
        & + .mord { margin-left: @thinspace; }
        & + .mop { margin-left: @thinspace; }
        & + .mbin {}
        & + .mrel { margin-left: @thickspace; }
        & + .mopen {}
        & + .mclose {}
        & + .mpunct {}
        & + .minner { margin-left: @thinspace; }
    }

    .mbin {
        & + .mord { margin-left: @mediumspace; }
        & + .mop { margin-left: @mediumspace; }
        & + .mbin {}
        & + .mrel {}
        & + .mopen { margin-left: @mediumspace; }
        & + .mclose {}
        & + .mpunct {}
        & + .minner { margin-left: @mediumspace; }
    }

    .mrel {
        & + .mord { margin-left: @thickspace; }
        & + .mop { margin-left: @thickspace; }
        & + .mbin {}
        & + .mrel {}
        & + .mopen { margin-left: @thickspace; }
        & + .mclose {}
        & + .mpunct {}
        & + .minner { margin-left: @thickspace; }
    }

    .mopen {
        & + .mord {}
        & + .mop {}
        & + .mbin {}
        & + .mrel {}
        & + .mopen {}
        & + .mclose {}
        & + .mpunct {}
        & + .minner {}
    }

    .mclose {
        & + .mord {}
        & + .mop { margin-left: @thinspace; }
        & + .mbin { margin-left: @mediumspace; }
        & + .mrel { margin-left: @thickspace; }
        & + .mopen {}
        & + .mclose {}
        & + .mpunct {}
        & + .minner { margin-left: @thinspace; }
    }

    .mpunct {
        & + .mord { margin-left: @thinspace; }
        & + .mop { margin-left: @thinspace; }
        & + .mbin {}
        & + .mrel { margin-left: @thinspace; }
        & + .mopen { margin-left: @thinspace; }
        & + .mclose { margin-left: @thinspace; }
        & + .mpunct { margin-left: @thinspace; }
        & + .minner { margin-left: @thinspace; }
    }

    .minner {
        & + .mord { margin-left: @thinspace; }
        & + .mop { margin-left: @thinspace; }
        & + .mbin { margin-left: @mediumspace; }
        & + .mrel { margin-left: @thickspace; }
        & + .mopen { margin-left: @thinspace; }
        & + .mclose {}
        & + .mpunct { margin-left: @thinspace; }
        & + .minner { margin-left: @thinspace; }
    }

    // These tighter spacings apply in scriptstyle and scriptscriptstyle.
    .mord.mtight { margin-left: 0; }
    .mop.mtight { margin-left: 0; }
    .mbin.mtight { margin-left: 0; }
    .mrel.mtight { margin-left: 0; }
    .mopen.mtight { margin-left: 0; }
    .mclose.mtight { margin-left: 0; }
    .mpunct.mtight { margin-left: 0; }
    .minner.mtight { margin-left: 0; }

    .mord {
        & + .mop.mtight { margin-left: @thinspace; }
    }

    .mop {
        & + .mord.mtight { margin-left: @thinspace; }
        & + .mop.mtight { margin-left: @thinspace; }
    }

    .mclose {
        & + .mop.mtight { margin-left: @thinspace; }
    }

    .minner {
        & + .mop.mtight { margin-left: @thinspace; }
    }

    .vlist-t {
        display: inline-table;
        table-layout: fixed;
    }

    .vlist-r {
        display: table-row;
    }

    .vlist {
        display: table-cell;
        vertical-align: bottom;
        position: relative;

        > span {
            display: block;
            height: 0;
            position: relative;

            > span {
                display: inline-block;
            }

            > .pstrut {
                overflow: hidden;
                width: 0;
            }
        }
    }

    .vlist-t2 {
        margin-right: -2px;
    }

    .vlist-s {
        // This cell solves Safari rendering problems. It has text content, so
        // its baseline is used for the table. A very small font avoids line-box
        // issues; absolute units prevent user font-size overrides from breaking
        // rendering. Safari refuses to make the box zero-width, so we give it
        // a known width and compensate with negative right margin on the
        // inline-table.
        display: table-cell;
        vertical-align: bottom;
        font-size: 1px;
        width: 2px;
    }

    .msupsub {
        text-align: left;
    }

    .mfrac {
        > span > span {
            text-align: center;
        }

       .frac-line {
            display: inline-block;
            width: 100%;
            border-bottom-style: solid;
        }
    }

    .mspace {
        display: inline-block;

        &.negativethinspace {
            margin-left: -@thinspace;
        }

        &.thinspace {
            width: @thinspace;
        }

        &.negativemediumspace {
            margin-left: -@mediumspace;
        }

        &.mediumspace {
            width: @mediumspace;
        }

        &.thickspace {
            width: @thickspace;
        }

        &.sixmuspace {
            width: 0.333333em;
        }

        &.eightmuspace {
            width: 0.444444em;
        }

        &.enspace {
            width: 0.5em;
        }

        &.twelvemuspace {
            width: 0.666667em;
        }

        &.quad {
            width: 1em;
        }

        &.qquad {
            width: 2em;
        }
    }

    .llap,
    .rlap {
        width: 0;
        position: relative;

        > .inner {
            position: absolute;
        }

        > .fix {
            display: inline-block;
        }
    }

    .llap > .inner {
        right: 0;
    }

    .rlap > .inner {
        left: 0;
    }

    .katex-logo {
        .a {
            font-size: 0.75em;
            margin-left: -0.32em;
            position: relative;
            top: -0.2em;
        }
        .t {
            margin-left: -0.23em;
        }
        .e {
            margin-left: -0.1667em;
            position: relative;
            top: 0.2155em;
        }
        .x {
            margin-left: -0.125em;
        }
    }

    .rule {
        display: inline-block;
        border: solid 0;
        position: relative;
    }

    .overline .overline-line,
    .underline .underline-line {
        display: inline-block;
        width: 100%;
        border-bottom-style: solid;
    }

    .sqrt {
        > .sqrt-sign {
            position: relative;
        }

        .sqrt-line {
            display: inline-block;
            position: relative;
            width: 100%;
            border-bottom-style: solid;
        }

        > .root {
            // These values are taken from the definition of `\r@@t`,
            // `\mkern 5mu` and `\mkern -10mu`.
            margin-left: 5*@mu;
            margin-right: -10*@mu;
        }
    }

    .sizing, .fontsize-ensurer {
        display: inline-block;

        @size1: 0.5;
        @size2: 0.6;
        @size3: 0.7;
        @size4: 0.8;
        @size5: 0.9;
        @size6: 1.0;
        @size7: 1.2;
        @size8: 1.44;
        @size9: 1.728;
        @size10: 2.074;
        @size11: 2.488;

        .generate-size-change(@from, @to) {
            &.reset-size@{from}.size@{to} {
                @sizeFromVariable: ~"size@{from}";
                @sizeToVariable: ~"size@{to}";
                font-size: (@@sizeToVariable / @@sizeFromVariable) * 1em;
            }
        }

        .generate-to-size-change(@from, @currTo) when (@currTo =< 11) {
            .generate-size-change(@from, @currTo);

            .generate-to-size-change(@from, (@currTo + 1));
        }

        .generate-from-size-change(@currFrom) when (@currFrom =< 11) {
            .generate-to-size-change(@currFrom, 1);

            .generate-from-size-change((@currFrom + 1));
        }

        .generate-from-size-change(1);
    }

    .delimsizing {
        &.size1 { font-family: KaTeX_Size1; }
        &.size2 { font-family: KaTeX_Size2; }
        &.size3 { font-family: KaTeX_Size3; }
        &.size4 { font-family: KaTeX_Size4; }

        &.mult {
            .delim-size1 > span {
                font-family: KaTeX_Size1;
            }
            .delim-size4 > span {
                font-family: KaTeX_Size4;
            }
        }
    }

    .nulldelimiter {
        display: inline-block;
        width: @nulldelimiterspace;
    }

    .delimcenter {
        position: relative;
    }

    .op-symbol {
        position: relative;

        &.small-op {
            font-family: KaTeX_Size1;
        }
        &.large-op {
            font-family: KaTeX_Size2;
        }
    }

    .op-limits {
        > .vlist-t {
            text-align: center;
        }
    }

    .accent {
        > .vlist-t {
            text-align: center;
        }

        .accent-body > span {
            width: 0;
        }

        .accent-body.accent-vec > span {
            position: relative;
            // This value is half of the value that the MathJax's makeFF shifts
            // it left. We center it by shifting it half way right again.
            left: 0.326em;
        }
    }

    .mtable {
        .vertical-separator {
            display: inline-block;
            margin: 0 -0.025em;
            border-right: 0.05em solid black;
        }

        .arraycolsep {
            display: inline-block;
        }

        .col-align-c > .vlist-t {
            text-align: center;
        }

        .col-align-l > .vlist-t {
            text-align: left;
        }

        .col-align-r > .vlist-t {
            text-align: right;
        }
    }

    // Define CSS for background-image whose width will match its span width.
    .stretchy {
        width: 100%;
        display: block;
        background-repeat: no-repeat;
        background-position: right center;  //right, so that \widehat will shift right when it is shortened
        background-size: 100% 100%;

        &:before,
        &:after {
            content: "";
        }
    }

    // Lengthen the extensible arrows via padding.
    .x-arrow-pad {
        padding: 0 0.5em;
    }

    .x-arrow,
    .mover,
    .munder {
        text-align: center;
    }

    .boxpad {
        padding: 0 0.3em 0 0.3em;      // \fboxsep = 3pt
    }
    .fbox {
        box-sizing: border-box;
        border: 0.04em solid black;   // \fboxrule = 0.4pt
    }
    .cancel-pad {
        padding: 0 0.2em 0 0.2em;    // ref: cancel package  \advance\dimen@ 2\p@ %  "+2"
    }
    .mord + .cancel-lap,
    .mbin + .cancel-lap {
        margin-left: -0.2em;
    }
    .cancel-lap + .mord,
    .cancel-lap + .mbin,
    .cancel-lap + .msupsub {
        margin-left: -0.2em;
    }
    .sout {
        border-bottom-style: solid;
        border-bottom-width: 0.08em;
    }

    .widehat1 {
        height: 0.24em;
        background-image: url(images/widehat1.svg);
    }
    .widehat2 {
        height: 0.30em;
        background-image: url(images/widehat2.svg);
    }
    .widehat3 {
        height: 0.36em;
        background-image: url(images/widehat3.svg);
    }
    .widehat4 {
        height: 0.42em;
        background-image: url(images/widehat4.svg);
    }
    .tilde1 {
        height: 0.26em;
        background-image: url(images/tilde1.svg);
    }
    .tilde2 {
        height: 0.29em;
        background-image: url(images/tilde2.svg);
    }
    .tilde3 {
        height: 0.306em;
        background-image: url(images/tilde3.svg);
    }
    .tilde4 {
        height: 0.312em;
        background-image: url(images/tilde4.svg);
    }
    .rightarrow {
        height: 0.522em;
        min-width: 0.5em;
        background-image: url(images/rightarrow.svg);
    }
    .xrightarrow {
        height: 0.522em;
        min-width: 0.783em;
        background-image: url(images/rightarrow.svg);
    }
    .leftarrow {
        height: 0.522em;
        min-width: 0.5em;
        background-image: url(images/leftarrow.svg);
    }
    .xleftarrow {
        height: 0.522em;
        min-width: 0.783em;
        background-image: url(images/leftarrow.svg);
    }
    .overbrace {
        height: 0.548em;
        min-width: 1.6em;
        background-image: url(images/overbrace.svg);
    }
    .underbrace {
        height: 0.548em;
        min-width: 1.6em;
        background-image: url(images/underbrace.svg);
    }
    .leftrightarrow {
        height: 0.522em;
        min-width: 0.5em;
        background-image: url(images/leftrightarrow.svg);
    }
    .xleftrightarrow {
        height: 0.522em;
        min-width: 0.783em;
        background-image: url(images/leftrightarrow.svg);
    }
    .doublerightarrow {
        height: 0.56em;
        min-width: 0.783em;
        background-image: url(images/doublerightarrow.svg);
    }
    .doubleleftarrow {
        height: 0.56em;
        min-width: 0.783em;
        background-image: url(images/doubleleftarrow.svg);
    }
    .doubleleftrightarrow {
        height: 0.56em;
        min-width: 0.955em;
        background-image: url(images/doubleleftrightarrow.svg);
    }
    .leftharpoon {
        height: 0.522em;
        min-width: 0.5em;
        background-image: url(images/leftharpoon.svg);
    }
    .leftharpoon {
        height: 0.522em;
        min-width: 0.783em;
        background-image: url(images/leftharpoon.svg);
    }
    .rightharpoon {
        height: 0.522em;
        min-width: 0.5em;
        background-image: url(images/rightharpoon.svg);
    }
    .xrightharpoon {
        height: 0.522em;
        min-width: 0.783em;
        background-image: url(images/rightharpoon.svg);
    }
    .hookleftarrow {
        height: 0.522em;
        min-width: 0.87em;
        background-image: url(images/hookleftarrow.svg);
    }
    .hookrightarrow {
        min-width: 0.87em;
        height: 0.522em;
        background-image: url(images/hookrightarrow.svg);
    }
    .mapsto {
        height: 0.522em;
        min-width: 0.783em;
        background-image: url(images/mapsto.svg);
    }
    .leftharpoondown {
        height: 0.522em;
        min-width: 0.5em;
        background-image: url(images/leftharpoondown.svg);
    }
    .leftharpoondown {
        height: 0.522em;
        min-width: 0.783em;
        background-image: url(images/leftharpoondown.svg);
    }
    .rightharpoondown {
        height: 0.522em;
        min-width: 0.5em;
        background-image: url(images/rightharpoondown.svg);
    }
    .xrightharpoondown {
        height: 0.522em;
        min-width: 0.783em;
        background-image: url(images/rightharpoondown.svg);
    }
    .rightleftharpoons {
        height: 0.716em;
        min-width: 0.783em;
        background-image: url(images/rightleftharpoons.svg);
    }
    .leftrightharpoons {
        height: 0.716em;
        min-width: 0.783em;
        background-image: url(images/leftrightharpoons.svg);
    }
    .overgroup {
        height: 0.342em;
        min-width: 0.87em;
        background-image: url(images/overgroup.svg);
    }
    .undergroup {
        height: 0.342em;
        min-width: 0.87em;
        background-image: url(images/undergroup.svg);
    }
    .twoheadleftarrow {
        height: 0.334em;
        min-width: 0.86em;
        background-image: url(images/twoheadleftarrow.svg);
    }
    .twoheadrightarrow {
        height: 0.334em;
        min-width: 0.86em;
        background-image: url(images/twoheadrightarrow.svg);
    }
    .linesegment {
        height: 0.414em;
        min-width: 0.5em;
        background-image: url(images/linesegment.svg);
    }
    .longequal {
        height: 0.334em;
        min-width: 0.5em;
        background-image: url(images/longequal.svg);
    }
    .tofrom {
        height: 0.528em;
        min-width: 0.86em;
        background-image: url(images/tofrom.svg);
    }

    // \cancel, \bcancel, and \xcancel again.
    // Define the detailed background-image for the span.
    // Use a linear-gradient to draw a diagonal line that is 0.08 ems wide,
    // that is, 0.04 ems on each side of the line on the diagonal of the span.
    .cancel {
        background:
           linear-gradient(to top left,
               rgba(0,0,0,0) 0%,
               rgba(0,0,0,0) ~"calc(50% - 0.04em - 0.5px)",
               rgba(0,0,0,1) ~"calc(50% - 0.04em)",
               rgba(0,0,0,1) ~"calc(50% + 0.04em)",
               rgba(0,0,0,0) ~"calc(50% + 0.04em + 0.5px)",
               rgba(0,0,0,0) 100%);
    }

    .bcancel {
        background:
           linear-gradient(to top right,
               rgba(0,0,0,0) 0%,
               rgba(0,0,0,0) ~"calc(50% - 0.04em - 0.5px)",
               rgba(0,0,0,1) ~"calc(50% - 0.04em)",
               rgba(0,0,0,1) ~"calc(50% + 0.04em)",
               rgba(0,0,0,0) ~"calc(50% + 0.04em + 0.5px)",
               rgba(0,0,0,0) 100%);
    }

    .xcancel {
        background:
           linear-gradient(to top left,
               rgba(0,0,0,0) 0%,
               rgba(0,0,0,0) ~"calc(50% - 0.04em - 0.5px)",
               rgba(0,0,0,1) ~"calc(50% - 0.04em)",
               rgba(0,0,0,1) ~"calc(50% + 0.04em)",
               rgba(0,0,0,0) ~"calc(50% + 0.04em + 0.5px)",
               rgba(0,0,0,0) 100%),
           linear-gradient(to top right,
               rgba(0,0,0,0) 0%,
               rgba(0,0,0,0) ~"calc(50% - 0.04em - 0.5px)",
               rgba(0,0,0,1) ~"calc(50% - 0.04em)",
               rgba(0,0,0,1) ~"calc(50% + 0.04em)",
               rgba(0,0,0,0) ~"calc(50% + 0.04em + 0.5px)",
               rgba(0,0,0,0) 100%);
    }

    @media screen and (min-width:~"0\0") {
        // CSS hack for IE 9, 10, & 11.
        // IE doesn't recognize @supports. Hence the media screen hack.

        .mask {
            background-color: transparent !important;
        }

        // Instead of a linear gradient, use an SVG to draw the diagonal line for \cancel.
        // This line unfortunately has a width that varies with the size of the span.
        .bcancel,
        .bcancel-mask {
            background-color: transparent !important;    // Prevent a blob of color.
            background-image: url(images/bcancel.svg);
        }
        .cancel,
        .cancel-mask {
            background-color: transparent !important;
            background-image: url(images/cancel.svg);
        }
        .xcancel,
        .xcancel-mask {
            background-color: transparent !important;
            background-image: url(images/xcancel.svg);
        }
    }

    @supports ((mask-image:none) or (-webkit-mask:none)) {
        // This section is part of the KaTeX support for \color of stretchy elements.
        // In up-to-date browsers, over-ride the background-image set above.
        // This section won't be applied by some older browsers, so they will instead
        // render the black background-image defined above.

      .mask {
        background-image: none;
      }
    }

    @supports not ((mask-image:none) or (-webkit-mask:none)) {
        //  Fall back for older browswers that do not support CSS mask.

        .mask {
            background-color: transparent !important;
        }

        // For \cancel, use a background:linear-gradient, not a mask-image:linear-gradient.
        .cancel-mask {
            background-color: transparent !important;
            background:
               linear-gradient(to top left,
                   rgba(0,0,0,0) 0%,
                   rgba(0,0,0,0) ~"calc(50% - 0.04em - 0.5px)",
                   rgba(0,0,0,1) ~"calc(50% - 0.04em)",
                   rgba(0,0,0,1) ~"calc(50% + 0.04em)",
                   rgba(0,0,0,0) ~"calc(50% + 0.04em + 0.5px)",
                   rgba(0,0,0,0) 100%);
        }

        .bcancel-mask {
            background-color: transparent !important;
            background:
               linear-gradient(to top right,
                   rgba(0,0,0,0) 0%,
                   rgba(0,0,0,0) ~"calc(50% - 0.04em - 0.5px)",
                   rgba(0,0,0,1) ~"calc(50% - 0.04em)",
                   rgba(0,0,0,1) ~"calc(50% + 0.04em)",
                   rgba(0,0,0,0) ~"calc(50% + 0.04em + 0.5px)",
                   rgba(0,0,0,0) 100%);
        }

        .xcancel-mask {
            background-color: transparent !important;
            background:
               linear-gradient(to top left,
                   rgba(0,0,0,0) 0%,
                   rgba(0,0,0,0) ~"calc(50% - 0.04em - 0.5px)",
                   rgba(0,0,0,1) ~"calc(50% - 0.04em)",
                   rgba(0,0,0,1) ~"calc(50% + 0.04em)",
                   rgba(0,0,0,0) ~"calc(50% + 0.04em + 0.5px)",
                   rgba(0,0,0,0) 100%),
               linear-gradient(to top right,
                   rgba(0,0,0,0) 0%,
                   rgba(0,0,0,0) ~"calc(50% - 0.04em - 0.5px)",
                   rgba(0,0,0,1) ~"calc(50% - 0.04em)",
                   rgba(0,0,0,1) ~"calc(50% + 0.04em)",
                   rgba(0,0,0,0) ~"calc(50% + 0.04em + 0.5px)",
                   rgba(0,0,0,0) 100%);
        }
    }

    .cancel-mask {
        mask-image:
           linear-gradient(to top left,
               rgba(0,0,0,0) 0%,
               rgba(0,0,0,0) ~"calc(50% - 0.04em - 0.5px)",
               rgba(0,0,0,1) ~"calc(50% - 0.04em)",
               rgba(0,0,0,1) ~"calc(50% + 0.04em)",
               rgba(0,0,0,0) ~"calc(50% + 0.04em + 0.5px)",
               rgba(0,0,0,0) 100%);
        -webkit-mask-image:
           linear-gradient(to top left,
               rgba(0,0,0,0) 0%,
               rgba(0,0,0,0) ~"calc(50% - 0.04em - 0.5px)",
               rgba(0,0,0,1) ~"calc(50% - 0.04em)",
               rgba(0,0,0,1) ~"calc(50% + 0.04em)",
               rgba(0,0,0,0) ~"calc(50% + 0.04em + 0.5px)",
               rgba(0,0,0,0) 100%);
    }

    .bcancel-mask {
        mask-image:
           linear-gradient(to top right,
               rgba(0,0,0,0) 0%,
               rgba(0,0,0,0) ~"calc(50% - 0.04em - 0.5px)",
               rgba(0,0,0,1) ~"calc(50% - 0.04em)",
               rgba(0,0,0,1) ~"calc(50% + 0.04em)",
               rgba(0,0,0,0) ~"calc(50% + 0.04em + 0.5px)",
               rgba(0,0,0,0) 100%);
        -webkit-mask-image:
           linear-gradient(to top right,
               rgba(0,0,0,0) 0%,
               rgba(0,0,0,0) ~"calc(50% - 0.04em - 0.5px)",
               rgba(0,0,0,1) ~"calc(50% - 0.04em)",
               rgba(0,0,0,1) ~"calc(50% + 0.04em)",
               rgba(0,0,0,0) ~"calc(50% + 0.04em + 0.5px)",
               rgba(0,0,0,0) 100%);
    }

    .xcancel-mask {
        mask-image:
           linear-gradient(to top left,
               rgba(0,0,0,0) 0%,
               rgba(0,0,0,0) ~"calc(50% - 0.04em - 0.5px)",
               rgba(0,0,0,1) ~"calc(50% - 0.04em)",
               rgba(0,0,0,1) ~"calc(50% + 0.04em)",
               rgba(0,0,0,0) ~"calc(50% + 0.04em + 0.5px)",
               rgba(0,0,0,0) 100%),
           linear-gradient(to top right,
               rgba(0,0,0,0) 0%,
               rgba(0,0,0,0) ~"calc(50% - 0.04em - 0.5px)",
               rgba(0,0,0,1) ~"calc(50% - 0.04em)",
               rgba(0,0,0,1) ~"calc(50% + 0.04em)",
               rgba(0,0,0,0) ~"calc(50% + 0.04em + 0.5px)",
               rgba(0,0,0,0) 100%);
        -webkit-mask-image:
           linear-gradient(to top left,
               rgba(0,0,0,0) 0%,
               rgba(0,0,0,0) ~"calc(50% - 0.04em - 0.5px)",
               rgba(0,0,0,1) ~"calc(50% - 0.04em)",
               rgba(0,0,0,1) ~"calc(50% + 0.04em)",
               rgba(0,0,0,0) ~"calc(50% + 0.04em + 0.5px)",
               rgba(0,0,0,0) 100%),
           linear-gradient(to top right,
               rgba(0,0,0,0) 0%,
               rgba(0,0,0,0) ~"calc(50% - 0.04em - 0.5px)",
               rgba(0,0,0,1) ~"calc(50% - 0.04em)",
               rgba(0,0,0,1) ~"calc(50% + 0.04em)",
               rgba(0,0,0,0) ~"calc(50% + 0.04em + 0.5px)",
               rgba(0,0,0,0) 100%);
    }

    @supports (-ms-touch-action: none) {
        // CSS hack for Edge
        // TODO(ron): If/When Edge fixes its CSS calc() bug, delete the next few lines and use gradients for \cancel.
        .bcancel,
        .bcancel-mask {
            background-color: transparent !important;
            background-image: url(images/bcancel.svg);
        }
        .cancel,
        .cancel-mask {
            background-color: transparent !important;
            background-image: url(images/cancel.svg);
        }
        .xcancel,
        .xcancel-mask {
            background-color: transparent !important;
            background-image: url(images/xcancel.svg);
        }
    }

    // Next, define the CSS masks used for \color on stretchy wide elements.
    .widehat1-mask {
        -webkit-mask: url(images/widehat1.svg);
        mask: url(images/widehat1.svg) no-repeat;
    }
    .widehat2-mask {
        -webkit-mask: url(images/widehat2.svg);
        mask: url(images/widehat2.svg) no-repeat;
    }
    .widehat3-mask {
        -webkit-mask: url(images/widehat3.svg);
        mask: url(images/widehat3.svg) no-repeat;
    }
    .widehat4-mask {
        -webkit-mask: url(images/widehat4.svg);
        mask: url(images/widehat4.svg) no-repeat;
    }
    .tilde1-mask {
        -webkit-mask: url(images/tilde1.svg);
        mask: url(images/tilde1.svg) no-repeat;
    }
    .tilde2-mask {
        -webkit-mask: url(images/tilde2.svg);
        mask: url(images/tilde2.svg) no-repeat;
    }
    .tilde3-mask {
        -webkit-mask: url(images/tilde3.svg);
        mask: url(images/tilde3.svg) no-repeat;
    }
    .tilde4-mask {
        -webkit-mask: url(images/tilde4.svg);
        mask: url(images/tilde4.svg) no-repeat;
    }
    .rightarrow-mask {
        mask: url(images/rightarrow.svg);
        -webkit-mask: url(images/rightarrow.svg);
    }
    .xrightarrow-mask {
        mask: url(images/rightarrow.svg);
        -webkit-mask: url(images/rightarrow.svg);
    }
    .leftarrow-mask {
        mask: url(images/leftarrow.svg);
        -webkit-mask: url(images/leftarrow.svg);
    }
    .xleftarrow-mask {
        mask: url(images/leftarrow.svg);
        -webkit-mask: url(images/leftarrow.svg);
    }
    .overbrace-mask {
        min-width: 1.6em;
        mask: url(images/overbrace.svg);
        -webkit-mask: url(images/overbrace.svg);
    }
    .underbrace-mask {
        min-width: 1.6em;
        mask: url(images/underbrace.svg);
        -webkit-mask: url(images/underbrace.svg);
    }
    .leftrightarrow-mask {
        mask: url(images/leftrightarrow.svg);
        -webkit-mask: url(images/leftrightarrow.svg);
    }
    .xleftrightarrow-mask {
        mask: url(images/leftrightarrow.svg);
        -webkit-mask: url(images/leftrightarrow.svg);
    }
    .doublerightarrow-mask {
        mask: url(images/doublerightarrow.svg);
        -webkit-mask: url(images/doublerightarrow.svg);
    }
    .doubleleftarrow-mask {
        mask: url(images/doubleleftarrow.svg);
        -webkit-mask: url(images/doubleleftarrow.svg);
    }
    .doubleleftrightarrow-mask {
        mask: url(images/doubleleftrightarrow.svg);
        -webkit-mask: url(images/doubleleftrightarrow.svg);
    }
    .leftharpoon-mask {
        mask: url(images/leftharpoon.svg);
        -webkit-mask: url(images/leftharpoon.svg);
    }
    .xleftharpoon-mask {
        mask: url(images/leftharpoon.svg);
        -webkit-mask: url(images/leftharpoon.svg);
    }
    .rightharpoon-mask {
        mask: url(images/rightharpoon.svg);
        -webkit-mask: url(images/rightharpoon.svg);
    }
    .xrightharpoon-mask {
        mask: url(images/rightharpoon.svg);
        -webkit-mask: url(images/rightharpoon.svg);
    }
    .hookleftarrow-mask {
        mask: url(images/hookleftarrow.svg);
        -webkit-mask: url(images/hookleftarrow.svg);
    }
    .hookrightarrow-mask {
        mask: url(images/hookrightarrow.svg);
        -webkit-mask: url(images/hookrightarrow.svg);
    }
    .mapsto-mask {
        mask: url(images/mapsto.svg);
        -webkit-mask: url(images/mapsto.svg);
    }
    .leftharpoondown-mask {
        mask: url(images/leftharpoondown.svg);
        -webkit-mask: url(images/leftharpoondown.svg);
    }
    .xleftharpoondown-mask {
        mask: url(images/leftharpoondown.svg);
        -webkit-mask: url(images/leftharpoondown.svg);
    }
    .rightharpoondown-mask {
        mask: url(images/rightharpoondown.svg);
        -webkit-mask: url(images/rightharpoondown.svg);
    }
    .xrightharpoondown-mask {
        mask: url(images/rightharpoondown.svg);
        -webkit-mask: url(images/rightharpoondown.svg);
    }
    .rightleftharpoons-mask {
        mask: url(images/rightleftharpoons.svg);
        -webkit-mask: url(images/rightleftharpoons.svg);
    }
    .leftrightharpoons-mask {
        mask: url(images/leftrightharpoons.svg);
        -webkit-mask: url(images/leftrightharpoons.svg);
    }
    .overgroup-mask {
        mask: url(images/overgroup.svg);
        -webkit-mask: url(images/overgroup.svg);
    }
    .undergroup-mask {
        mask: url(images/undergroup.svg);
        -webkit-mask: url(images/undergroup.svg);
    }
    .twoheadleftarrow-mask {
        mask: url(images/twoheadleftarrow.svg);
        -webkit-mask: url(images/twoheadleftarrow.svg);
    }
    .twoheadrightarrow-mask {
        mask: url(images/twoheadrightarrow.svg);
        -webkit-mask: url(images/twoheadrightarrow.svg);
    }
    .linesegment-mask {
        mask: url(images/linesegment.svg);
        -webkit-mask: url(images/linesegment.svg);
    }
    .longequal-mask {
        mask: url(images/longequal.svg);
        -webkit-mask: url(images/longequal.svg);
    }
    .tofrom-mask {
        mask: url(images/tofrom.svg);
        -webkit-mask: url(images/tofrom.svg);
    }

}