/* ruler */
.ruler {
position:absolute;
display:flex;
align-items:center;
/*background:pink;*/
}

/* close btn */
.ruler .close{
    position:absolute;
    top:0px;
    left:4px;
    color:black;
    background:white;
    border:1px solid black;
}

/**-- coordinate ruler START --**/
.ruler .h_scale {
    position : absolute;
    box-sizing : border-box;
    bottom : -8px;
    left : 0;
    width : 100%;
    height : 10px;
    border-left : 2px solid rgb(172, 252, 3);
    border-right : 2px solid rgb(172, 252, 3);
    border-top : 2px solid rgb(172, 252, 3);
    text-align : center;
}
.ruler .h_text {
    font-size:1.2rem;
    font-weight:bold;
    display:table;
    margin: 0 auto;
    white-space:nowrap;
    color: rgb(0, 0, 0);   
    background-color:rgba(172, 252, 3, 0.7);
}
.ruler .v_scale {
    position : absolute;
    box-sizing : border-box;
    top : 0;
    left : -8px;
    width : 10px;
    height : 100%;
    border-right : 2px solid rgb(172, 252, 3);
    border-top : 2px solid rgb(172, 252, 3);
    border-bottom : 2px solid rgb(172, 252, 3);
    align-items : center;
    display : flex;
}
.ruler .v_text {
    font-size:1.2rem;
    font-weight:bold;
    display:inline-block;
    white-space:nowrap;
    background-color : rgba(172, 252, 3, 0.7);
    color : rgb(0, 0, 0);
}
/**-- coordinate ruler END --**/





/**-- straight ruler START --**/
.ruler .box {
    height:100%;
    width:100%;
    position:absolute;
    display:flex;
    align-items:center;
}
.ruler .box .text {
    font-size:1.2rem;
    font-weight:bold;
    z-index:1;
    display:inline-block;
    margin:0 auto;
    white-space:nowrap;
    background-color : rgba(172, 252, 3, 0.9);
    color : rgb(0, 0, 0);
}
/*horizontal*/
.ruler .scale {
  /*transform-origin:0 100%;*/
  position:absolute;
  top:0;
  background:rgb(172, 252, 3);
  height:2px;
}

.ruler .scale.h .l {
    position:absolute;
    left:0;
    top:-4px;
    width:2px;
    height:10px;
    box-sizing:border-box;
    background:rgb(172, 252, 3);
}
.ruler .scale.h .r {
    position:absolute;
    right:0;
    top:-4px;
    width:2px;
    height:10px;
    box-sizing:border-box;
    background:rgb(172, 252, 3);
}
/*vertical*/
.ruler .scale.v {
  width:2px;
  height:100%;
}
/*tick*/
.ruler .scale.v .l{
    position:absolute;
    top:0;
    left:-4px;
    height:2px;
    width:10px;
    background:rgb(172, 252, 3);
}
/*tick*/
.ruler .scale.v .r{
    position:absolute;
    bottom:0;
    left:-4px;
    height:2px;
    width:10px;
    background:rgb(172, 252, 3);
}

.ruler .circle {
  box-sizing:border-box;
  position:absolute;
  border-radius:50%;
  border:2px rgb(172, 252, 3) dotted;
}

/**-- straight ruler END --**/