button:hover,
li label{
    cursor: pointer;
}
.forms_wrapper {
    width: calc(100% - 80px);
}
.select_from,
.select_to {
    display: flex;
    padding: .5rem .5rem 0 .5rem;
    border: solid 1px #CCC;
    background-color: #FFF;
    border-radius: .3rem;
}
.select_from {
    margin-bottom: .7rem;
}
.select_to {
    margin-bottom: .7rem;
}
.place_wrapper {
    display: flex;
    align-items: center;
}
.location_wrapper {
    display: flex;
    align-items: center;
}
.latlon_wrapper {
    display: flex;
    align-items: center;
}
.select_from .name_wrapper,
.select_to .name_wrapper {
    width: 80px;
}
.forms_wrapper .title {
    width: 120px;
}
.forms_wrapper > div {
    padding-bottom: .5rem;
}
#from_drp select,
#to_drp select {
    max-width: 160px;
}
.latlontxt {
    width: 150px !important;
}
.fa-map-marker.from {
    color: #D22;
    font-size: 1.2rem;
    padding-right: .1rem;
}
.fa-map-marker.to {
    color: #29F;
    font-size: 1.2rem;
    padding-right: .1rem;
}
.from_latlon,
.to_latlon {
    width: calc(100% - 120px);
}

@media (max-width: 767px) {
    .from_latlon.form-inline {
        display: block !important;
    }
    .to_latlon.form-inline {
        display: block !important;
    }
}
@media (max-width: 575px) {
    .forms_wrapper .title {
        width: 100px;
    }
    .forms_wrapper {
        width: 100%;
    }
    .from_latlon,
    .to_latlon {
        width: calc(100% - 100px);
    }
    .select_from,
    .select_to {
        display: block;
    }
    .latlontxt {
        display: inline-block;
        width: 130px !important;
    }
    .address_text {
        display: inline-block;
        width: 160px !important;
    }
}

/* result */
.result_wrapper {
    display: flex;
    justify-content: space-around;
    padding: .5rem;
    border: solid 3px #E77;
    background-color: #FFF;
    border-radius: .3rem;
    margin-bottom: 1rem;
}
.result_wrapper p {
    margin: 0;
    padding-bottom: .5rem;
    font-size: 1.1rem;
}
.result_wrapper ul {
    margin: 0;
}
.result_wrapper ul li {
    list-style: none;
    line-height: 2rem;
}

@media (max-width: 575px) {
    .result_wrapper {
        display: block;
    }
    .result_wrapper p {
        padding-bottom: 0;
    }
    .result_wrapper ul {
        display: flex;
        padding: 0;
        margin-left: 1.5rem;
    }
    .result_wrapper ul li {
        width: 45%;
    }
    .result_a ul {
        margin-bottom: .7rem;
    }
}

/* address search */
.address_searching_wrapper {
    margin: 0 0 1rem;
}
.address_search_loading {
    display: none;
    text-align: center;
    width: 100%;
    margin-top: .5rem;
}
.address_search_loading.nowloading {
    display: block;
}

.address_search_result_wrapper {
    width: 100%;
    max-height: 200px;
    overflow: auto;
    margin-top: .5rem;
    display: none;
}
.adrs_list_items_wrapper {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
}
.adrs_list_item {
    width: 33.3%;
    display: flex;
    align-items: center;
    border: solid 1px #DDD;
    padding: .4rem;
    font-size: .9rem;
    justify-content: space-between;
    background-color: #FFF;
    transition: background-color .2s ease-in-out;
}
.adrs_list_item:hover {
    background-color: #F0F0F0;
}
.item_name {
    width: calc(100% - 77px);
}
.item_name a {
    display: block;
}
.item_name a:visited,
.item_name a:link,
.item_name a:hover,
.item_name a:active {
    color: inherit;
}
.set_btn_wrapper {
    display: flex;
    width: 77px;
}
.set_a_btn:hover,
.set_b_btn:hover {
    cursor: pointer;
}
.set_b_btn {
    padding-left: .3rem;
}

@media (max-width: 991px) {
    .adrs_list_item {
        width: 50%;
    }
}
@media (max-width: 575px) {
    .adrs_list_item {
        width: 100%;
    }
}

/* map */
#map {
    width: 100%;
    height: 500px;
    border: solid 1px #CCC;
}
@media (max-width: 575px) {
    #map {
        height: 300px;
    }
}
.marker_color_red {
    filter: saturate(1.5) hue-rotate(150deg) contrast(1.2) opacity(1);
}
.popup_content {
    font-size: .8rem;
    line-height: 1.4rem;
    letter-spacing: .05rem;
}
.popup_content .place {
    font-size: .9rem;
    margin-bottom: 0.2rem;
    display: inline-block;
}

/* setting radios */
.setting_wrapper {
    margin-top: 1rem;
    padding: .5rem .5rem 0 .5rem;
    border: solid 1px #CCC;
    background-color: #FFF;
    border-radius: .3rem;
}
.setting_wrapper p {
    margin: 0 0 .3rem 0;
}
.layer_radio_wrapper ul {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    margin: 0 0 .5rem 0;
}
.layer_radio_wrapper ul li {
    list-style: none;
    width: 25%;
    font-size: .9rem;
}
.angle_radio_wrapper ul {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    margin: 0;
}
.angle_radio_wrapper ul li {
    list-style: none;
    width: 20%;
    font-size: .9rem;
}

@media (max-width: 991px) {
    .layer_radio_wrapper ul li {
        width: 50%;
    }
    .angle_radio_wrapper ul li {
        width: 33.3%;
    }
}

/* description */
.description_list {
    padding-left: 1.5rem;
}
.description_list li {
    line-height: 1.8rem;
    padding-bottom: 1rem;
}