

.ruler {
    width: 210mm;
    height: 14px;
    left: -283px;
    top: -1246px;
    z-index: 10;
    position: absolute;
}

.ruler-ver {
    transform: rotate(90deg);
    width: 290mm;
    right: -555px;
    z-index: 1000;
    top: -707px;
}

    .ruler .cm,
    .ruler .mm {
        position: absolute;
        border-left: 1px solid #555;
        height: 14px;
        width: 10mm;
    }

        .ruler .cm:after {
            position: absolute;
            bottom: -15px;
            font: 11px/1 sans-serif;
        }

    .ruler .mm {
        height: 5px;
    }

        .ruler .mm:nth-of-type(5) {
            height: 10px;
        }

    .ruler .cm:nth-of-type(1) {
        left: 10mm;
    }

        .ruler .cm:nth-of-type(1):after {
            content: "1";
        }

    .ruler .cm:nth-of-type(2) {
        left: 20mm;
    }

        .ruler .cm:nth-of-type(2):after {
            content: "2";
        }

    .ruler .cm:nth-of-type(3) {
        left: 30mm;
    }

        .ruler .cm:nth-of-type(3):after {
            content: "3";
        }

    .ruler .cm:nth-of-type(4) {
        left: 40mm;
    }

        .ruler .cm:nth-of-type(4):after {
            content: "4";
        }

    .ruler .cm:nth-of-type(5) {
        left: 50mm;
    }

        .ruler .cm:nth-of-type(5):after {
            content: "5";
        }

    .ruler .cm:nth-of-type(6) {
        left: 60mm;
    }

        .ruler .cm:nth-of-type(6):after {
            content: "6";
        }

    .ruler .cm:nth-of-type(7) {
        left: 70mm;
    }

        .ruler .cm:nth-of-type(7):after {
            content: "7";
        }

    .ruler .cm:nth-of-type(8) {
        left: 80mm;
    }

        .ruler .cm:nth-of-type(8):after {
            content: "8";
        }

    .ruler .cm:nth-of-type(9) {
        left: 90mm;
    }

        .ruler .cm:nth-of-type(9):after {
            content: "9";
        }

    .ruler .cm:nth-of-type(10) {
        left: 100mm;
    }

        .ruler .cm:nth-of-type(10):after {
            content: "10";
        }

    .ruler .cm:nth-of-type(11) {
        left: 110mm;
    }

        .ruler .cm:nth-of-type(11):after {
            content: "11";
        }

    .ruler .cm:nth-of-type(12) {
        left: 120mm;
    }

        .ruler .cm:nth-of-type(12):after {
            content: "12";
        }

    .ruler .cm:nth-of-type(13) {
        left: 130mm;
    }

        .ruler .cm:nth-of-type(13):after {
            content: "13";
        }

    .ruler .cm:nth-of-type(14) {
        left: 140mm;
    }

        .ruler .cm:nth-of-type(14):after {
            content: "14";
        }

    .ruler .cm:nth-of-type(15) {
        left: 150mm;
    }

        .ruler .cm:nth-of-type(15):after {
            content: "15";
        }


    .ruler .cm:nth-of-type(16) {
        left: 160mm;
    }

        .ruler .cm:nth-of-type(16):after {
            content: "16";
        }

    .ruler .cm:nth-of-type(17) {
        left: 170mm;
    }

        .ruler .cm:nth-of-type(17):after {
            content: "17";
        }

    .ruler .cm:nth-of-type(18) {
        left: 180mm;
    }

        .ruler .cm:nth-of-type(18):after {
            content: "18";
        }

    .ruler .cm:nth-of-type(19) {
        left: 190mm;
    }

        .ruler .cm:nth-of-type(19):after {
            content: "19";
        }

    .ruler .cm:nth-of-type(20) {
        left: 200mm;
    }

        .ruler .cm:nth-of-type(20):after {
            content: "20";
        }

    .ruler .cm:nth-of-type(21) {
        left: 210mm;
    }

        .ruler .cm:nth-of-type(21):after {
            content: "21";
        }

    .ruler .cm:nth-of-type(22) {
        left: 220mm;
    }

        .ruler .cm:nth-of-type(22):after {
            content: "22";
        }

.ruler .cm:nth-of-type(23) {
    left: 230mm;
}

    .ruler .cm:nth-of-type(23):after {
        content: "23";
    }

.ruler .cm:nth-of-type(24) {
    left: 240mm;
}

    .ruler .cm:nth-of-type(24):after {
        content: "24";
    }

.ruler .cm:nth-of-type(25) {
    left: 250mm;
}

    .ruler .cm:nth-of-type(25):after {
        content: "25";
    }


.ruler .cm:nth-of-type(26) {
    left: 260mm;
}

    .ruler .cm:nth-of-type(26):after {
        content: "26";
    }

.ruler .cm:nth-of-type(27) {
    left: 270mm;
}

    .ruler .cm:nth-of-type(27):after {
        content: "27";
    }

.ruler .cm:nth-of-type(28) {
    left: 280mm;
}

    .ruler .cm:nth-of-type(28):after {
        content: "28";
    }
.ruler .cm:nth-of-type(29) {
    left: 290mm;
}

    .ruler .cm:nth-of-type(29):after {
        content: "29";
    }
.ruler .cm:nth-of-type(30) {
    left: 300mm;
}

    .ruler .cm:nth-of-type(30):after {
        content: "30";
    }

.ruler .cm:nth-of-type(31) {
    left: 310mm;
}

.ruler .cm:nth-of-type(31):after {
    content: "31";
}


    .ruler .mm:nth-of-type(1) {
        left: 10%;
    }

    .ruler .mm:nth-of-type(2) {
        left: 20%;
    }

    .ruler .mm:nth-of-type(3) {
        left: 30%;
    }

    .ruler .mm:nth-of-type(4) {
        left: 40%;
    }

    .ruler .mm:nth-of-type(5) {
        left: 50%;
    }

    .ruler .mm:nth-of-type(6) {
        left: 60%;
    }

    .ruler .mm:nth-of-type(7) {
        left: 70%;
    }

    .ruler .mm:nth-of-type(8) {
        left: 80%;
    }

    .ruler .mm:nth-of-type(9) {
        left: 90%;
    }

    .ruler .mm:nth-of-type(10) {
        left: 100%;
    }

.rul_corner, .rul_line, .rul_ruler {
    pointer-events: all;
    position: absolute
}

.rul_wrapper {
    position: absolute;
    width: 100%;
    height: 97%;
    top: -20px;
    right: 0;
}

.rul_tracker {
    height: 1px;
    width: 1px;
    background: #000;
    position: absolute;
    pointer-events: none;
    top: 0;
}


.rul_corner {
    background-color: #fff;
    z-index: 1010;
    cursor: pointer
}

.rul_corner:hover {
    background-color: #d3d3d3
}

.rul_cornerTL {
    top: 0;
    left: 0
}

.rul_cornerTR {
    top: 0;
    right: 0;
}


.rul_cornerBL {
    left: 1px
}

.rul_ruler_Vertical {
    cursor: ew-resize;
    border-left: none;
    
}

.rul_ruler_Horizontal {
    cursor: ns-resize;
    border-top: none
}


.rul_line {
    color: transparent;
    background-color: transparent;
    border-bottom: 1px solid #3BB7C7;
    border-left: 1px solid #3BB7C7;
    z-index: 10000;
}

.rul_line_dragged {
    border: 1px dotted #6B7587
}

.rul_line:hover {
    border-bottom: 1px solid #236E77;
    border-left: 1px solid #236E77
}

.rul_lineVer {
    top: 0;
    bottom: 0;

}

.rul_lineVer:hover {
    cursor: ew-resize
}

.rul_lineHor {
    right: 0;
    left: 0
}

.rul_lineHor:hover {
    cursor: ns-resize
}

