.map_container {
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
    padding-bottom: 20px;
}

/*  scrollbar smaller */
.map_scroll::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

.map_scroll::-webkit-scrollbar:hover {
    width: 8px;
    height: 8px;
}

.map_scroll::-webkit-scrollbar-thumb {
    background: #888;
}

.map_scroll::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.map_scroll::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.map_scroll::-webkit-scrollbar-button {
    display: none;
}

.map_scroll::-webkit-scrollbar-corner {
    display: none;
}

.map_scroll::-webkit-resizer {
    display: none;
}


.map_scroll{
    width: 98%;
    height: 80vh;
    margin: 0 auto;
    overflow: auto;
    outline: 1px solid #0000;
    margin-top: 20px;
    outline: 1px solid #ccc;
    background-color: #f1f1f1;
}


.map_cell{
    display: table-cell;
    background-color: #ffffff;
}

.map_content{
    width: 40px;
    height: 40px;
    font-size: 8px;
    outline: 1px solid #ccc;
    cursor: pointer;
}

.map_line{
    display: table-row;
}

.map_controls{
    position: absolute;
    right: 10px;
    padding: 10px;
    background-color: transparent;
    z-index: 100;
}

.map_controls button{
    padding: 5px 5px;
    font-size: 1rem;
    width: 2rem;
    margin: 1px;
    border: none;
    background-color: #002e423d;
}

.map_controls button:hover{
    background-color: #002e42;
    color: white;
}

.map_absolute_center{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}


.map_path{
    background-color: #0a2c51;
    color: #fff;
}

.map_border{
    background-color: #000;
    color: #fff;
}

.map_object{
    background-color: #b2b2b2;
    color: #000;
}

.map_point{
    background-color: #274e05;
    color: #fff;
}

.end_col{
    width: 85px;
    background-color: transparent;
}

.map_path_selector{
    padding: 8px 8px;
    font-size: 1rem;
    width: 2rem;
    margin: 1px;
    border: none;
    background-color: #0a2c519e;
    color: #fff;
}

.map_path_selector:hover{
    background-color: #002e42;
    color: white;
}

.map_path_selector.active{
    outline: 2px solid #fff;
    background-color: #002e42;
}

.map_border_selector{
    padding: 8px 8px;
    font-size: 1rem;
    width: 2rem;
    margin: 1px;
    border: none;
    background-color: #0000009e;
    color: #fff;
}

.map_border_selector:hover{
    background-color: #000;
    color: white;
}

.map_border_selector.active{
    outline: 2px solid #000;
    background-color: #000;
}

.map_object_selector{
    padding: 8px 8px;
    font-size: 1rem;
    width: 2rem;
    margin: 1px;
    border: none;
    background-color: #b2b2b29e;
    color: #000;
}

.map_object_selector:hover{
    background-color: #b2b2b2;
    color: #000;
}

.map_object_selector.active{
    outline: 2px solid #000;
    background-color: #b2b2b2;
}

.map_point_selector{
    padding: 8px 8px;
    font-size: 1rem;
    width: 2rem;
    margin: 1px;
    border: none;
    background-color: #274e059e;
    color: #fff;
}

.map_point_selector:hover{
    background-color: #274e05;
    color: #fff;
}

.map_point_selector.active{
    outline: 2px solid #000;
    background-color: #274e05;
}

.map_controls span{
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
    font-size: 11px;
    border-radius: 5px;
}

button.active{
    background-color: #002e42;
    color: white;
}