html,body,.wrapper{
    height: 95.4%;
    padding: 0%;
    margin: 0%;
    font-family: Arial, Helvetica, sans-serif;
}
.row{
    margin-left: 0%;
    margin-right: 0%;
}
.map-text-container{
    height: 100%;
    display: flex;
}
.map {
    height: 100%;
    width: 80%;
}
.text-area{
    height: 100%;
    width: 10%;
}
.text-a{
    resize: none;
    height: 5%;
    width: 100%
}
.map-a{
    height: 100%;
    width: 100%
}
body {
    background-color: #222;
}
.note {
    height:5%;
    color: #FFF
}
.note-2 {
    height:5%;
    color: #FFF
}
.marker-pin {
    width: 30px;
    height: 30px;
    border-radius: 50% 50% 50% 0;
    background: #c30b82;
    position: absolute;
    transform: rotate(-45deg);
    left: 50%;
    top: 50%;
    margin: -15px 0 0 -15px;
}
.marker-pin::after {
    content: '50000';
    transform: rotate(45deg);
    width: 24px;
    height: 24px;
    margin: 3px 0 0 3px;
    background: #fff;
    position: absolute;
    border-radius: 50%;
}
.custom-div-icon i {
    position: absolute;
    width: 22px;
    font-size: 22px;
    left: 0;
    right: 0;
    margin: 10px auto;
    text-align: center;
}
.custom-div-icon i.awesome {
    margin: 12px auto;
    font-size: 17px;
}
.table-points {
    overflow-y: auto;
    height: 100%;
}
.table-points thead th {
    position: sticky;
    top: 0;
}
table {
    border-collapse: collapse;
    width: 100%;
}
th,
td {
    padding: 8px 16px;
    border: 1px solid #ccc;
    background: #eee;
}
th {
    background: #eee;
}