/*margin for border size*/
.as-vruler {
    position: relative;
    width: 1.5em;
    border: solid 1px black;
    overflow: hidden;
    font-family: courier, "courier new", monospace;
    box-sizing: border-box;
}


.as-vruler-line {
    position: absolute;
    right: 0;
    width: 25%;
    border-top: solid 1px rgb(17, 48, 43);
    box-sizing: border-box;

}

.as-vruler-line.major {
    width: 50%;
    border-top: solid 1px rgb(5, 20, 18);
}

.as-vruler-major-number {
    position: absolute;
    text-align: center;
    width:  5em;
    pointer-events: none;
    font-size: 0.7em;
    right: calc(52% - 2em);
    height: 1em;
    transform-origin: center;
    
    -webkit-transform:rotate(90deg);
    -moz-transform:rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform:rotate(90deg);
    transform: rotate(-90deg);
}