.waypoint {
    position: relative;
    width: 100%;
    height: 55px;
    margin-bottom: 7px;
}

.waypointImg {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: solid 1px #ccc;
    display: inline-block;
    overflow: hidden;
    /*background-size: contain;*/
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 80% 80%;
    position: absolute;
    left: 3px;
    margin-top: 7px;
    cursor: pointer;

}

.waypointRange {
    width: 50%;
    margin-left: 29px;
    height: 22px;
    margin-top: -11px;
}

.waypointTitle {
    font-weight: 600;
    text-align: left;
    margin-left: 29px;
    color: #333;
    border-radius: 0!important;
    height: 22px !important;
    border: none !important;
    border-color: #333;
    border-bottom: 1px solid !important;;
    /*padding: 5px 10px !important;*/
    padding: 5px 2px !important;
    outline: none !important;
    width: 71%;
}

.waypointTitle:focus {
    border-color: #1890ff;
}

.deleteWaypoint {
    width: 20px;
    height: 20px;
    position: absolute;
    right: -3px;
    top: -3px;
    cursor: pointer;
}

/*
.waypoint::before,
.waypoint::after {
    position: absolute;

    content: "";
}
*/

.waypoint::after {
    right: 0;
    bottom: 0;
    width: 99.5%;
    height: 25px;
    border-right: 1px solid #555555;
    border-bottom: 1px solid #555;
}

.waypoint::before {
    left: 0;
    top: 0;
    /*width: 100%;*/
    width: 25px;
    height: 99.5%;
    border-left: 1px solid #555555;
    border-top: 1px solid #555;
}