.matting-doc {
    position: relative;
    display: block;
    margin-top: 0px;
    color: #666;
    height: 100%;
    background-color: #F9FBFF;
    overflow: hidden;
    user-select: none;
}

    .matting-doc > div {
        width: 100%;
        position: relative;
    }

.matting-header {
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0px 22px;
    background-image: linear-gradient(to bottom,#FFF, #F3F5F8);
    border-bottom: 1px solid #EEEEEE;
}

.matting-body {
    position: relative;
    height: calc(100% - 128px);
    display: block;
    overflow-y: auto;
    padding: 18px 18px 5px 18px;
}

.matting-footer {
    border-top: 1px solid #DDD;
    height: 70px;
}


.matting-header:before {
    content: "";
    display: block;
    position: absolute;
    left: 0px;
    top: 0px;
    height: 58px;
    width: 18px;
    background-image: linear-gradient(to right,#E3E4E5 20%, rgba(220,220,220,0) 100%);
}

.m-h-btns {
    display: inline-flex;
    height: 100%;
}

    .m-h-btns > button {
        border: none;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100%;
        width: 60px;
        background-color: transparent;
        outline: none;
        color: #07F;
    }

        .m-h-btns > button:hover {
            background-image: linear-gradient(to bottom,rgba(0,0,0,0), rgba(100,200,255,0.1));
        }

        .m-h-btns > button.act {
            color: #F90;
        }

        .m-h-btns > button:disabled {
            color: #07F;
            background-image: none;
            opacity: 0.3;
        }


        .m-h-btns > button > i {
            font-size: 14px;
            line-height: 20px;
        }

        .m-h-btns > button > span {
            line-height: 14px;
            font-size: 12px;
        }


.m-h-rangeBox {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 180px;
    margin-left: 12px;
    margin-right: 12px;
    border-left: 1px dashed #EEE;
    border-right: 1px dashed #EEE;
}

    .m-h-rangeBox > span {
        width: 90%;
    }

        .m-h-rangeBox > span:nth-child(2n+1) {
            line-height: 15px;
            height: 15px;
            margin-top: 8px;
        }

        .m-h-rangeBox > span:nth-child(2n) {
            font-size: 12px;
            transform: scale(0.8,0.8);
            line-height: 12px;
            height: 12px;
            text-align: center;
            color: #6ab;
        }

.brush-size-num {
    font-style: normal;
    margin: 0px 3px;
}


.matting-content {
    height: calc(100% - 36px);
    width: calc(100% - 18px);
    margin: 18px 9px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

    .matting-content > div {
        display: inline-flex;
        height: 100%;
        position: relative;
    }

.m-c-box {
    width: calc(50% - 36px);
    background-color: #FFF;
    background: url(/images/bgNull.gif) #F3F3F3 center center repeat;
    background-size: 8px;
    border: solid 1px #07F;
    justify-content: center;
    align-items: center;
}
    .m-c-bar {
        flex-grow: 1;
        flex-shrink: 1;
        background-color: transparent;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
    }

    .m-c-bar > div {
        width: 80%;
    }

   
    .m-c-bar > div > dl > * {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .m-c-bar > div > dl > dt {
        height: 18px;
        color: #89A;
    }

    .m-c-bar .color-inp {
        display: inline-block;
    }

.m-c-bar-btns > dd {
    margin-bottom: 12px;
}

    .m-c-bar-btns > dd > button {
        font-size: 24px;
        width: 36px;
        height: 36px;
        display: flex;
        justify-content: center;
        align-items: center;
    }



        .m-c-box:before {
            background-color: #07F;
            color: #FFF;
            position: absolute;
            font-size: 14px;
            padding: 0px 5px;
            height: 22px;
            line-height: 22px;
            left: -1px;
            top: -22px;
            z-index: 1;
            border-top-left-radius: 3px;
            border-top-right-radius: 3px;
        }

.m-c-box.original:before {
    content: "原始图";
}

.m-c-box.result:before {
    content: "结果图";
}

.m-c-box > div {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

    .m-c-box > div > * {
        position: absolute;
    }

.m-c-box > .brush > canvas {
    cursor: none;
}

.m-c-box .ui-drag {
    cursor:move !important;
}

    .m-c-box > .brush > canvas.mousewheeled {
        cursor: default !important;
    }


.cursor {
    pointer-events: none;
    opacity: 0.8;
}

    .cursor > div > img {
        position: absolute;
    }


.original > .brush > canvas {
    opacity: 0.75;
}



.ico-circle-add:before {
    content: "\E96F";
}

.ico-circle-remove:before {
    content: "\E970";
}

.ico-circle-auto:before {
    content: "\E971";
}

.ico-move:before {
    content: "\E945";
}



.matting-footer {
    height: 60px;
    display: flex;
}

    .matting-footer > div {
        display: inline-flex;
        height: 100%;
        width: 50%;
    }

.matting-msg {
    position: absolute;
    left: 92px;
    top: 68px;
    width: calc(50% - 128px);
    height: 25px;
    line-height: 25px;
    font-size: 12px;
    color: #37F;
    z-index: 2;
    text-align: right;
}

.ico-edge:before {
    content: "\E925";
}

.ico-eraser:before {
    content: "\E904";
}

.ico-drag:before {
    content: "\E945";
}

.m-c-bar-btns button.act {
    color:#F70;
}

.dlg-guide {
    position:relative;
    width:100%;
    height:400px;
}