.wl_agm_map { margin: 0; padding: 0; max-width: none; } .wl_agm_map img { max-width: none !important; } .gm-style-iw { width: 350px !important; } .wl_agm_map img { width: 100%; height: 190px; } #iw-container { margin-bottom: 10px; } #iw-container .iw-title { font-family: 'Open Sans Condensed', sans-serif; font-size: 22px; font-weight: 400; padding: 10px; background-color: #4285f4; color: white; margin: 0; padding: 20px; display: flex; justify-content: space-between; border-radius: 2px 2px 0 0; } #iw-container .iw-content { font-size: 13px; line-height: 18px; font-weight: 400; margin-right: 1px; padding: 15px 5px 20px 15px; max-height: 140px; } .iw-content img { float: right; margin: 0 5px 5px 10px; } .iw-subTitle { font-size: 16px; font-weight: 700; padding: 5px 0; } .iw-bottom-gradient { position: absolute; width: 326px; height: 25px; bottom: 10px; right: 18px; background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%); background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%); background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%); background: -ms-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%); } span.marker-label { color: #fff; font-size: 15px; } #iw-container i { font-size: 18px; padding: 10px; color: #4285f4; border-bottom: 1px solid #cccccc70; } #iw-container .map-info { box-shadow: none; } .map-div .iw-title { font-family: 'Open Sans Condensed', sans-serif; font-size: 22px; font-weight: 400; padding: 10px; background-color: #4285f4; color: white; margin: 0; padding: 20px; display: flex; justify-content: space-between; border-radius: 2px 2px 0 0; } .map-div .marker-title { color: #fff; font: 400 15px/1.3 Roboto, Arial, Sans-serif; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; position: relative; } .map-div { width: 300px; } .map-div i { color: #4285f4; padding: 15px; font-size: 20px; padding-bottom: 6px; } .map-img img { width: 300px; } .map-info { padding: 30px 10px 10px 10px; background-color: #fff; box-shadow: 0 0 10px #ccc; } .map-info p { color: #222; font: 400 14px/1.5 Roboto, Arial, Sans-serif; display: inline-flex; width: 100%; border-bottom: 1px solid #cccccc8c; margin-bottom: 0px; } .map-info p a { color: #222; text-decoration: none; padding: 10px 0px; } .marker-title { color: #fff; font: 400 15px/1.3 Roboto, Arial, Sans-serif; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; position: relative; } .directions-icon { width: 48px; height: 48px; border-radius: 100%; background-color: #fff; position: absolute; bottom: -48px; right: 50%; transform: translate(50%, 0); display: flex; justify-content: center; align-items: center; box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.3); } .marker-directions { position: relative; max-width: 80px; text-align: center; } marker-label { padding-bottom: 8px; color: #fff; font: 400 13px/1.3 Roboto, Arial, Sans-serif; } directions-icon { width: 48px; height: 48px; border-radius: 100%; background-color: #fff; position: absolute; bottom: -48px; right: 50%; transform: translate(50%, 0); display: flex; justify-content: center; align-items: center; box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.3); } /*front-map*/ .marker-info { padding: 10px; } .triangle { position: absolute; margin: auto; margin-left: 133px; width: 17px; height: 17px; transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); border-right: 1px solid #4285f4; border-bottom: 1px solid #4285f4; } .marker-info p { border-bottom: 0; padding-top: 10px; } .add-header { padding: .75rem 1.25rem; margin-bottom: 0; background-color: rgb(79, 130, 214); border-bottom: 1px solid rgba(0, 0, 0, .125); color: #fff; font-weight: 600; background-color: #4f82d6; color: #fff; font-size: 16px; font-weight: bold; padding: 10px; } p.addess_ { padding: 0; } .detail_map { font-size: 15px; color: #000; font-family: "Open Sans", sans-serif; font-weight: 300; font-size: 13px; color: #212529; } .map-infos { padding: 0px; background-color: #fff; max-width: 330px; } .map-infos p.add-header { color: #fff; } .map-infos p.m_title { background-color: #4f82d6; color: #fff; font-size: 16px; font-weight: bold; padding: 10px; } .map-infos p { padding-left: 10px; margin-bottom: 0; padding: 10px; } .map-infos img { /*width: 120px !important; float: left; */ margin-right: 10px; /*height: 109px !important; */ } .map_addr { position: absolute; margin: auto; margin-left: 203px; width: 17px; height: 17px; transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); border-right: 1px solid #4285f4; border-bottom: 1px solid #4285f4; } @media (max-width: 768px) { .map-infos img { width: 100% } } /*front-map*/ /*route*/ #directions-panel { display: inline-block; width: 100%; padding: 10px; margin-top: 0px; box-shadow: 0 0 15px #ccc; max-height: 400px; overflow: overlay; } #directions-panel b { color: #8224e3; font-weight: bold; font-size: 16px; } table.adp-placemark { display: inline-block; } .adp-summary { color: #497e5a; font-weight: 800; } td.adp-substep { font-weight: 800; } .adp-placemark { box-shadow: 0 0 15px #ccc; } .adp-placemark .adp-step, .adp-placemark .adp-text { width: 92.72%; } img.adp-marker2 { padding-left: 8px; } #right-panel { padding: 0px 8px; box-shadow: 0px 1px 5px #d4d0d0; max-height: 700px; overflow: auto; } h4.route_info-title { background: #03A9F4; padding-top: 0px; margin-bottom: 0px; margin-top: 2%; color: #fff; font-size: 23px; padding: 8px; font-weight: 600; box-shadow: 2px 0px 5px #d4d0d0; } /*route*/