.helpLineHorizontal {
    background-color: #2BBBAD;
    height: 2px;
    display: inline-block;
    position: absolute;
    width:;
}

.helpLineVertical {
    background-color: #33b5e5;
    width: 2px;
    height:;
    display: inline-block;
    position: absolute;
}

.arrowLine {
    width:;
    border-width: 2px;
    border-bottom-style: dotted;
    height:;
    display: inline-block;
    position: absolute;
    border-color: darkslategrey;
}

.distanceLineVertical {
    width:;
    border-width: 2px;
    border-left-style: dotted;
    height:;
    display: inline-block;
    position: absolute;
    border-color: darkslategrey;
}

.distanceLineHorizontal {
    width:;
    border-width: 2px;
    border-bottom-style: dotted;
    height:;
    display: inline-block;
    position: absolute;
    border-color: darkslategrey;
}

.arrowLineVerical {
    width:;
    border-width: 2px;
    border-left-style: dotted;
    height:;
    display: inline-block;
    position: absolute;
    border-color: darkslategrey;
}


/*///////////////////////////////////////////////////////*/


.i-arrow{
    border: solid black;
    border-width: 0 2px 2px 0;
    display: inline-block;
    padding: 3px;
    position: absolute;
    border-color: darkslategrey;
    color: darkslategrey

}

.arrow-right {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}

.arrow-left {
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
}

.arrow-up {
    transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
}

.arrow-down {
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}

.distanceNumber {
    color: black;
    position: absolute;
    width: auto;
    height: auto;
    display: inline-block;
}

.distanceNumberVertical {
    color: black;
    position: absolute;
    width: auto;
    height: auto;
    display: inline-block;
    transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
}