.math-outer {
    position: relative;
}

    

.math-content {
    border-radius: 0 !important;
    color: #858585;
    background-color: #fff;
    border: 1px solid #d5d5d5;
    padding: 5px 4px 6px;
    font-size: 14px;
    font-family: inherit;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    -webkit-transition-duration: .1s;
    transition-duration: .1s;
    cursor: text;
}

.math-box {
    position: absolute;
    right: 0px;
    top: 0px;
    height: 33px;
    width: 20px;
    background-color: #b1b1b1;
    text-align: center;
    cursor: pointer;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}



    .math-box > i {
        color: white;
        padding-top: 9px;
        -moz-user-select: none;
        -khtml-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

.math-outer:hover .math-content,
.math-outer.open-math-box .math-content {
    border-color: #712d94;
}

.math-outer:hover .math-box,
.math-outer.open-math-box .math-box {
    background-color: #712d94;
}




[contentEditable=true]:empty:before {
    content: attr(data-ph);
    color: #cccbcb;
}