@import url("global.css");
@import url("map.css");

body.map-modal-active { overflow: hidden }

body.currently-data-view { height: 100%; overflow: hidden }
.single-map #map-generator, #map-generator #map 
{ 
	height: calc(100vh - 64px);
	overflow: hidden 
}

.currently-data-view #map-generator #map { height: calc(60vh - 64px); }
.currently-data-view #map_data_content { height: 32vh; overflow-y: scroll; background: #fff }
#optimal-route-map:before { content: ''; background: #000; width: 100%; height: 100%; position: fixed; left: 0; right: 0; top: 0; bottom: 0; opacity: 0.5 }
#optimal-route-map .optimal-rout-modal-data-content { position: fixed; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 100%; max-width: 480px; height: 440px; background: #fff; padding: 30px 50px; border-radius: 3px; text-align: center; z-index: 9; overflow: auto; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s }
#optimal-route-map label { float: left; width: 100%; text-align: left; margin: 0 auto 5px; position: relative; color: #000 }
#optimal-route-map input[type="text"] { float: left; width: 100%; text-align: left; background: #F1F3F4; border-color: #F1F3F4; margin: 0 auto 20px; padding: 12px 15px; border-radius: 3px; color: #000 }
#optimal-route-map #get-optimal-route { background: #1B5FC1; border: 1px solid #1B5FC1; color: #fff; font-weight: bold; padding: 12px 40px 15px; font-size: 20px; border-radius: 3px; display: inline-block; width: max-content; line-height: 1.5; text-decoration: none; margin: 15px auto 0 }
#optimal-route-map #get-optimal-route:hover { background: #28BD86; border-color: #28BD86 }
#optimal-route-map .close-rout-modal { display: block; position: absolute; right: 15px; top: 15px; border-radius: 50px; height: 32px; width: 32px; font-size: 20px; line-height: 1; color: #777; text-align: center; cursor: pointer; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s }
#optimal-route-map .optimal-route-error-msg:not(:empty) { color: #a94442; background: #f2dede; border: 1px solid #ebccd1; border-radius: 3px; padding: 3px 0; margin: -15px auto 15px; font-size: 13px; max-width: 90% }
#optimal-route-map .custom-radio label { width: 50%; cursor: pointer; margin: 0 auto 10px }
#optimal-route-map .custom-radio input { position: absolute; left: -20px; top: -20px; opacity: 0; pointer-events: none }
#optimal-route-map .custom-radio span { position: relative; width: 20px; height: 20px; display: inline-block; vertical-align: middle; background: #E8EBED; border-radius: 50%; margin: -4px 7px 0 0 }
#optimal-route-map .custom-radio span:before { content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; width: 10px; height: 10px; background: #282830; border-radius: 50%; opacity: 0; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s }
#optimal-route-map .custom-radio input:checked + span:before { opacity: 1 }
#ResetAndNegivateDiv .navigate-route .navigate { color: #fff; border: 1px solid #28bd86; background-color: #28bd86; border-radius: 3px; padding: 16px 24px; font-weight: 500; font-size: 14px; line-height: 1; display: block }
#ResetAndNegivateDiv .navigate-route .navigate:hover { background: #1b5fc1; border-color: #1b5fc1 }
.single-map .ui-widget#ui-id-1, .single-map .ui-widget#ui-id-2 { max-width: 380px; max-height: 320px; overflow-y: auto }
.single-map .ui-widget .ui-menu-item { border-style: solid; border-width: 1px; border-color: transparent transparent #c5c5c5 transparent; padding: 12px 15px 12px 35px }
.single-map .ui-widget .ui-menu-item a, .single-map .ui-widget .ui-menu-item div { display: block; position: relative; padding: 0; background: transparent; border: none }
.single-map .ui-widget .ui-menu-item a:before, .single-map .ui-widget .ui-menu-item div:before { content: '\f041'; font-family: fontawesome; position: absolute; left: -22px; font-size: 20px; color: #28bd86; top: -7px }
.single-map .ui-widget .ui-menu-item p, .single-map .ui-widget .ui-menu-item div { margin: 0; font-size: 13px; color: #333; line-height: 1.5 }
.single-map .ui-widget .ui-menu-item p:last-child { font-size: 11px; font-style: italic }
.single-map .ui-widget .ui-menu-item:hover { background: #FAFAFA; border: 1px solid #28bd86 }
.single-map .ui-widget .ui-menu-item:hover p, .single-map .ui-widget .ui-menu-item:hover div { color: #777 }
#setControlMainWrapTopLeft { left: 50px !important; top: 40px !important }
#setControlMainWrapTopLeft .text-only { text-transform: uppercase; font-size: 16px; font-weight: 100; margin: 0 auto 15px; display: none }
#setControlMainWrapTopLeft #DefaultViewContorlSide { background: #bbc5ca; padding: 10px 15px !important; border-top-left-radius: 3px; border-bottom-left-radius: 3px }
#setControlMainWrapTopLeft #heatViewContorlSide { padding: 0 !important }
#setControlMainWrapTopLeft #heatViewContorlSide > div { background: #bbc5ca; padding: 10px 15px }
#setControlMainWrapTopLeft #clusterViewContorlSide { background: #bbc5ca; padding: 10px 15px !important; border-top-right-radius: 3px; border-bottom-right-radius: 3px }
#setControlMainWrapTopLeft #DefaultViewContorlSide p, #setControlMainWrapTopLeft #heatViewContorlSide p, #setControlMainWrapTopLeft #clusterViewContorlSide p, div#radiusViewContorlSide p { color: #fff; font-size: 14px !important }
#setControlMainWrapTopLeft #DefaultViewContorlSide.active, #setControlMainWrapTopLeft #clusterViewContorlSide.active, #setControlMainWrapTopLeft #heatViewContorlSide.active > div, #setControlMainWrapTopLeft #DefaultViewContorlSide:hover, #setControlMainWrapTopLeft #heatViewContorlSide > div:hover, #setControlMainWrapTopLeft #clusterViewContorlSide:hover { background: #1B5FC0 }
#setControlMainWrapTopLeft #rulerControl { padding: 0 !important; margin-left:7px; border-radius: 3px }
#setControlMainWrapTopLeft #rulerControl p { margin: 0 auto; display: inline-block; padding: 10px 12px; font-size: 14px; background: #bbc5ca; color: #fff; font-weight: 600 }
#setControlMainWrapTopLeft #rulerControl p:first-child { border-top-left-radius: 3px; border-bottom-left-radius: 3px }
#setControlMainWrapTopLeft #rulerControl p:last-child { border-top-right-radius: 3px; border-bottom-right-radius: 3px; margin-left:0px }
#setControlMainWrapTopLeft #rulerControl p.active, #setControlMainWrapTopLeft #rulerControl p:hover { background: #1B5FC0 }
#setControlMainWrapTopRight { right: 40px !important; top: 40px !important }
#setControlMainWrapTopRight #editMapContorlSide, #setControlMainWrapTopRight #ExportOptionMapContorlSide, #setControlMainWrapTopRight #printControl { background: #1B5FC0; border-radius: 3px; padding: 10px 12px !important }
#setControlMainWrapTopRight #printControl { background: #28BD86; margin: 0 5px }
#setControlMainWrapTopRight #editMapContorlSide p, #setControlMainWrapTopRight #ExportOptionMapContorlSide p, #setControlMainWrapTopRight #printControl p, #dataviewMapContorlSide p, #RadiusViewMapContorlSide p {
    color: #fff !important;
    font-size: 14px !important;
}
.single-map #map-generator, #map-generator #map iframe + div {
    border: 0px !important;
}
#setControlMainWrapTopRight #editMapContorlSide p img { margin: -3px 7px 0 0; max-width: 13px }
.gmnoprint.gm-bundled-control { bottom: 150px !important; right: 90px !important; margin: 0 !important }
.gmnoprint.gm-bundled-control .gmnoprint > div {width: 40px !important; height: 99px !important; border-radius: 3px !important; background-color: transparent !important; position: relative; right: -5px; }.gmnoprint.gm-bundled-control button { width: 48px !important; height: 48px !important; background: #28BD86 !important; border-radius: 3px; border-bottom-left-radius: 0; border-bottom-right-radius: 0; color: #fff !important }
.gmnoprint.gm-bundled-control button + div + button { background: #28BD86 !important; top: 2px !important; border-radius: 3px; border-top-left-radius: 0; border-top-right-radius: 0 }
.gmnoprint.gm-bundled-control button img { -webkit-filter: invert(100%) grayscale(0) brightness(100%) sepia(0) hue-rotate(0deg) saturate(100%) contrast(10); -moz-filter: invert(100%) grayscale(0) brightness(100%) sepia(0) hue-rotate(0deg) saturate(100%) contrast(10); -ms-filter: invert(100%) grayscale(0) brightness(100%) sepia(0) hue-rotate(0deg) saturate(100%) contrast(10); -o-filter: invert(100%) grayscale(0) brightness(100%) sepia(0) hue-rotate(0deg) saturate(100%) contrast(10); filter: invert(100%) grayscale(0) brightness(100%) sepia(0) hue-rotate(0deg) saturate(100%) contrast(10) }
#setControlMainWrapBottomRight { right: 130px !important; bottom: 50px !important; padding: 20px !important; border-radius: 12px }
#setControlMainWrapBottomRight #resetMapControl { 
	background: #1B5FC0 !important; width: 48px; height: 48px; border: none !important; 
	box-shadow: none !important; padding-top: 12px; position: absolute; bottom: 95px; right: -88px; 
	text-align: center }
#setControlMainWrapBottomRight #OptimalRouteDiv { padding: 0 !important; position: relative; top: -4px; }
#setControlMainWrapBottomRight #rulerControl {
    padding: 0 !important;
    margin: 0;
    position: relative;
    top: -3px;
}
#setControlMainWrapBottomRight #rulerControl p { font-size: 26px; background: #28bd86; color: #fff; padding: 8px 15px; margin: 0; border-radius: 3px; box-shadow: 0 2px 4px 0 #BAC4C9 }
#dataviewMapContorlSide, #RadiusViewMapContorlSide {background: #1B5FC0; color: #fff; margin: 0; border-top-left-radius: 3px; border-top-right-radius: 3px; padding: 10px 15px 10px !important; position: relative; }
#dataviewMapContorlSide p, #RadiusViewMapContorlSide p { margin: 0 }
#dataviewMapContorlSide p img, #RadiusViewMapContorlSide p img {
    margin: -5px 10px 0 0;
    max-width: 13px;
}
#dataviewMapContorlSide p img.arrow-icon, #RadiusViewMapContorlSide p img {
    margin: -2px 5px 0 10px;
    max-width: 13px;
}
#ResetAndNegivateDiv { margin: 32px 0 0 50px }
#ResetAndNegivateDiv button, #ResetAndNegivateDiv a.navigate { padding: 12px !important; border-radius: 3px !important }
.gmnoprint.gm-bundled-control button + div, img[src="https://maps.gstatic.com/mapfiles/api-3/images/google_white5.png"] { display: none }
#OptimalRouteDiv .button-optimal-route {background: #1b5fc0; border-color: #1b5fc0;
    border-bottom-left-radius: 0; border-radius: 3px; border-top-left-radius: 0;}
#OptimalRouteDiv .button-optimal-route[disabled="disabled"] {
    background: #bbc5ca;
    border-color: #bbc5ca;
}
#OptimalRouteDiv .button-optimal-route:focus, #setControlMainWrapBottomRight #rulerControl p.active, #setControlMainWrapBottomRight #rulerControl p:focus { background: #1B5FC0; border-color: #1B5FC0 }
body.isPrint, body.isPrint #map_data_content, body.isPrint #map-generator { overflow-y: auto !important; height: auto !important; }
body.isPrint #map-generator #map { height: 100vh !important }
body.isPrint  #map_data_content { padding: 0 }
.printer-dialog .styler-radio label, .printer-dialog .styler-radio label { display: inline-block; margin: 7.5px 20px 33px 0; cursor: pointer; color: #000; font-size: 15px }
.printer-dialog .styler-radio input[type="radio"], .printer-dialog .styler-radio input[type="radio"] { opacity: 0; position: absolute; left: -999px }
.printer-dialog .styler-radio label[for="private_pswd"] { width: 100%; display: block }
.printer-dialog .styler-radio input[type="text"] { margin-bottom: 0 !important }
.printer-dialog .styler-radio .input-placeholder, .printer-dialog .styler-radio .input-placeholder { width: 22px; height: 22px; display: inline-block; vertical-align: middle; background: #fff; border: 1px solid #1B5FC1; box-shadow: 0 0 1px 0 #ddd inset; -webkit-transition: all 0.3s ease-in-out 0s; -moz-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; margin: -2px 5px 2px 0; position: relative; border-radius: 50px; display: none }
.printer-dialog .styler-radio label:hover .input-placeholder, .printer-dialog .styler-radio label:hover .input-placeholder { box-shadow: 0 0 1px 0 #1B5FC1 inset; border-color: #ddd }
.printer-dialog .styler-radio input:checked ~ .input-placeholder, .printer-dialog .styler-radio input:checked ~ .input-placeholder { border-color: #1B5FC1; box-shadow: none }
.printer-dialog .styler-radio input:checked ~ .input-placeholder:after, .printer-dialog .styler-radio input:checked ~ .input-placeholder:after { content: ''; width: 14px; height: 14px; position: absolute; top: 0; left: 0; background: #1B5FC1; border-radius: 50px; right: 0; bottom: 0; margin: auto }
.printer-dialog { position: absolute; top: -88px; right: 25px; z-index: 999999; width: 100%; height: 100%; bottom: 0; opacity: 0; transition: all 0.3s; visibility: hidden; margin: auto }
.printer-dialog .printer-overlay { width: 100%; height: 100%; opacity: 0.3 }
.printer-dialog .printer-content { border-radius: 3px; background: #fff; box-shadow: 0 0 3px 0 #888; position: absolute; right: 0; padding: 15px 10px; top: 85px; margin: 0; height: 85px; width: 150px; text-align: left; cursor: default }
.printer-dialog h3, .printer-dialog .printer-close { display: none }
.printer-dialog .styler-radio label { margin: 0; padding: 5px 10px; transition: all 0.3s; display: block }
.printer-dialog .styler-radio label:hover { background: #28BD86; color: #fff }
#setControlMainWrapTopRight #printControl:hover .printer-dialog, #setControlMainWrapTopRight #printControl .printer-dialog:hover { opacity: 1; visibility: visible }

@media screen and ( max-width: 767px ) {
	.maps-table h2 { margin: 0 auto 30px; font-size: 26px }
	.maps-table .maps-table-header th { padding: 15px 20px }
	.maps-table tr td { padding: 10px 20px }
	.maps-table tr.row-1 td { padding-top: 25px }
	.modal-data-content { height: 300px; width: 90%; border-radius: 30px; padding: 30px }
	.modal-data-content ul li img { height: 48px; width: auto }
	.modal-data-content ul li h3 { font-size: 14px; margin: 10px auto 15px }
	.export-btn-holder .export-btn { padding: 8px 35px 12px; font-size: 18px; border-radius: 6px }
	#map_data_content { padding: 0 0 25px 0 }
	#setControlMainWrapTopRight { right: 25px !important; top: 25px !important }
	#setControlMainWrapTopLeft { left: 25px !important; top: 75px !important }
	#setControlMainWrapTopLeft #rulerControl { margin-left: 10px; margin-top: 10px }
	.gmnoprint.gm-bundled-control { right: 70px !important }
	#setControlMainWrapBottomRight { right: 90px !important; padding: 12px !important }
	#setControlMainWrapBottomRight #resetMapControl { right: -68px }
}

/* Latest Updates #19-Aug-2021 */
#map-generator .map-marker-info .cardTitle { font-size: 18px !important }
#setControlMainWrapTopLeft { left: 10px !important; top: 10px !important }
#setControlMainWrapTopRight { right: 10px !important; top: 10px !important }
.gmnoprint.gm-bundled-control { bottom: 80px !important; right: 55px !important; margin: 0 !important }
#setControlMainWrapBottomRight { right: 60px !important; bottom: 10px !important; padding: 0px !important }
#setControlMainWrapBottomRight #resetMapControl { right: -50px; bottom: 50px }
#setControlMainWrapTopLeft #heatViewContorlSide > div, #setControlMainWrapTopLeft #clusterViewContorlSide, #radiusViewContorlSide, #setControlMainWrapTopLeft #rulerControl p, #setControlMainWrapTopRight #editMapContorlSide, #setControlMainWrapTopRight #ExportOptionMapContorlSide, #setControlMainWrapTopRight #printControl, #setControlMainWrapTopLeft #DefaultViewContorlSide { padding: 5px 10px !important }
#setControlMainWrapBottomRight #resetMapControl, .gmnoprint.gm-bundled-control button { width: 40px !important; height: 32px !important }
#setControlMainWrapBottomRight #resetMapControl { padding-top: 7px }
#setControlMainWrapBottomRight #resetMapControl img, .gmnoprint.gm-bundled-control button img { width: 13px !important; height: auto !important }
#OptimalRouteDiv button { padding: 10px }
#setControlMainWrapBottomRight #rulerControl p {
    padding: 10px 10px;
    font-size: 13px;
    border-top-right-radius: 0;
}
.grecaptcha-badge { display: none !important; opacity: 0 !important; visibility: hidden !important }

.map-bottom {
    padding: 20px;
}
.map-bottom p {
    font-weight: 600;
    margin: 0;
}
.map-bottom img {
    max-height: 18px;
    margin-left: 5px;
    margin-top: -3px;
}
#travel_mode {
    width: 100%;
    background: #F1F3F4;
    border-color: #F1F3F4;
}
#travel_mode:hover, #travel_mode:focus{
	outline: none;
}

@media only screen and (max-width:767px)
{
.map-bottom {
    text-align: center;
}

}
@media only screen and (max-width:580px){
#setControlMainWrapTopRight #editMapContorlSide p, 
#setControlMainWrapTopRight #ExportOptionMapContorlSide p, 
#setControlMainWrapTopRight #printControl p, 
#dataviewMapContorlSide p, 
#RadiusViewMapContorlSide p {
    font-size: 0 !important;
}
#setControlMainWrapTopRight #editMapContorlSide p img, 
#setControlMainWrapTopRight #ExportOptionMapContorlSide p img, 
#setControlMainWrapTopRight #printControl p img, 
#dataviewMapContorlSide p img, 
#RadiusViewMapContorlSide p img {
    margin:0 !important;
}
#setControlMainWrapTopLeft #rulerControl {
    width: 100%;
    margin: 10px 0 0;
}
#radiusViewMainDiv p img.arrow-icon {
    display: none;
}
#radiusViewMainDiv {
    left: 60px!important;
    z-index: 9999999 !important;
    bottom: 13px !important;
}
div#dataViewMainDiv {
    bottom: 14px !important;
}
#radiusViewMainDiv div#RadiusViewMapContorlSide {
    padding: 12px 13px !important;
}
div#dataviewMapContorlSide p img.arrow-icon {
    display: none;
}
#setControlMainWrapTopRight #printControl, #setControlMainWrapTopRight div#ExportOptionMapContorlSide {
    padding: 7px 10px !important;
}
}
@media only screen and (max-width:380px){
#setControlMainWrapTopRight {
    top: 45px !important;
}
#radiusViewContorlSide.active {
    background-color: #1B5FC0;
    float: right;
    margin-right: 10px !important;
}
}