/*------------------------------------------------------------------ Line */
 .Horizontal_line {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    display: grid;
    grid-template-columns: auto;
    height: 100%;
    z-index: 10;
    pointer-events: none;
}

.Horizontal_line div {
    font-size: 1px;
    background-color: red;
    width: 100%;
    height: 1px;
    pointer-events: none;
}

.Horizontal_line_Center {
    position: absolute;
    z-index: 10;
    width: 2px;
    background-color: aqua;
    height: 100%;
    font-size: 10px;
    top: 50%;
    left: 50%;
    pointer-events: none;
    transform: translateX(-50%);
    transform: translateY(-50%);
}



.vartical_Line {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: auto;
    pointer-events: none;
    height: 100%;
    z-index: 10;
}

.vartical_Line div {
    font-size: 1px;
    background-color: red;
    width: 1px;
    height: 100%;
    pointer-events: none;
}
.vartical_Line_Center {
   position: absolute;
   pointer-events: none;
   width: 100%;
   background-color: aqua;
   height: 1px;
   font-size: 10px;
   top: 50%;
   left: 0;
   z-index: 10;
   transform: translateY(-50%);
}