body,
 html {
     overflow: hidden;
 }

 html,
 body,
 #viewDiv {
     padding: 0;
     margin: 0;
     height: 100%;
     width: 100%;
     font-family: 'Roboto', sans-serif !important;
     font-weight: 300;
     font-size: 12px;
     color: #fff;
 }

 #speedspan{
	/* position: absolute;
    bottom: 31%;
    left: 26%; */
	margin-left: 26%;
    margin-bottom: -12%;

	 
	 
 }
  #txtgettime{
	/* position: absolute;
    bottom: 22%; */
    width: 20%;	
    margin-top: 3%;
    margin-left:49%;	
	 
 }
 
 
  #finalresult{
	

    font-weight: bold;
    left: 28%; 
	 
 }
 
 #btngetdestinationtime{
	 
	 /* position: absolute;
    bottom: 23%;
    left: 42%; */
    margin-left:40%;
    width: 56%;
    color: #fff;
    background-color: #5cace1;
    border-radius: 5px;
    cursor: pointer; 
	height:8%;
	 
 }
 
 #btngettime{
	/* position: absolute;
    bottom: 14%;
    left: 38%; */
    width: 60%;
    color: #fff;
    background-color: #5cace1;
    border-radius: 5px;
    cursor: pointer; 
	margin-bottom:20%;
 }
 
 
 
 .overlay {
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     position: absolute;
     position: fixed;
     /* Stay in place */
     z-index: 2000;
     /* Sit on top */
     overflow: auto;
     /* Enable scroll if needed */
     background-color: black;
     /* Fallback color */
     background-color: rgba(0, 0, 0, 0.4);
     /* Black w/ opacity */
     padding-top: 60px;
 }

#exportGraphic {
     background-color: #a50000;
     color: #fff;
 }
 #scalebar {
    position: absolute;
    z-index: 100;
    bottom: 40px;
    color: black;
    left: 90px !important;
    background: rgba(255,255,255,0.8);
    padding: 4px 16px;
    font-weight: 700;
    border-radius: 78px;
 }
 
 .esriScalebar {
     left: 90px !important;
     bottom: 66px !important;
     background: rgba(255, 255, 255, 0.8);
     width: auto !important;
     height: auto !important;
     padding: 6px 30px 5px 5px;
     border-radius: 5px;
 }

 .esriBasemapGallery {
     margin-left: 20px;
     overflow-x: auto;
 }

 .esriBasemapGalleryThumbnail {
     height: 30px !important;
     margin-left: 5px !important;
     /*width: 58px !important;*/
     width: 35px !important;
 }

 .esriBasemapGalleryNode {
     /*width: 42px!important;*/
     width: auto !important;
     float: left;
     /* margin: 10px 20px 10px 20px; */
     /* width: 100px; */
     margin: 5px 10px 0 10px !important;
     text-align: center !important;
 }

 .esriBasemapGalleryLabelContainer {
     height: auto !important;
     margin-bottom: 5px;
 }

 .esri-widget {
     margin-top: 60px;
 }

 #viewDiv_zoom_slider {
     top: 90px !important;
     left:6px !important;
 }

 #HomeButton {
     display: block;
     position: absolute;
     /*top: 25% !important;
            left: 1.35%;*/
     top: 158px !important;
     left: 5px;
     z-index: 50;
 }

 #LocateButton {
     position: absolute;
     top: 198px !important;
     left: 5px;
     z-index: 50;
 }

 /*IMD Integration starts*/
  #iframeDiv {
	display: none;
    position: absolute;
    z-index: 9999;
    width: 100%;
    height: 100%;
    background-color: #c1bfbf;
 }
 
#imdDiv {
    
    z-index: 999;
    position: absolute;
	margin: 20px;
	border: 1px solid gray;

 }
 
#closeIframe {
	position: absolute;
    right: 0px;    
    height: 25px;
    z-index: 99999;
    width: 25px;
    top: 0px;
	display:none;
	cursor: pointer;
 } 
 /*IMD Integration ends*/
 
 
 #BasemapToggle {
     display: block;
     position: absolute;
     /*top:70% !important;
            left: 1%;*/
     z-index: 50;
     bottom: 18px;
     left: 5px;
 }

  #mapgallerycontainer {
     -webkit-transition: right 2s;
     transition: right 0.3s ease-in-out;
     width: 253px;
     position: absolute;
     bottom: 40px;
     right: -246px;
     /*height: 40px;*/
     height: auto;
     background-color: rgba(0, 0, 0, 0.6);
     border-bottom-left-radius: 0px;
     border-top-left-radius: 0px;
 }

 #hide {
     margin-left: 0px;
     position: absolute;
     /*left: -39px;
    height: 40px;*/
     left: -34px;
     height: 75px;
     background-color: rgba(0, 0, 0, 0.6);
     border: none;
     color: #ffffff;
     cursor: pointer;
     border-top-left-radius: 15px;
     border-bottom-left-radius: 15px;
     border-right: none;
 }

 button:focus {
     outline: 0;
 }

 div:focus {
     outline: 0;
 }

 .opened {
     position: absolute !important;
     right: 0px !important;
     -webkit-transition: right 2s;
     /* Safari */
     transition: right 0.3s ease-in-out;
 }

 .activelink {
     background-color: rgba(22, 22, 22, 0.59);
 }

 #search {
     position: absolute;
     /*top: 5px;
            left: 240px;*/
     top: 90px;
     left: 45px;
 }

 #contentarea {
     padding: 0px;
     overflow: auto;
     position: relative;
 }

 #contentcontainer {
     position: relative;
     overflow: auto;
     max-height: calc(100% - 40px);
 }

 input[type=text] {
     font-family: 'Roboto', sans-serif;
     font-weight: 300;
 }

 input[type=text]:focus {
     outline: 0;
 }

 input[type=checkbox] {
     width: 20px;
     height: 20px;
 }

 .maptype {
     height: 46px;
     /*float: left;
     margin-left: 5px;*/
     width: 46px;
     border-radius: 50%;
     /*outline-style:none !important;*/
     -webkit-transition: border 500ms ease-out;
     -moz-transition: border 500ms ease-out;
     -ms-transition: border 500ms ease-out;
     -o-transition: border 500ms ease-out;
     transition: border 500ms ease-out;
     cursor: pointer;
 }

 /* #loaderback {
            background-color:rgba(0,0,0,0.5);
            background: linear-gradient(122deg, rgba(5, 19, 59, 0.5) 0%, rgba(0, 0, 0, 0.7) 100%);
            width: 100%;
            height: 100%;
            z-index: 10;
            position: absolute;
            top: 0;
            text-align: center;
            background:none;
        }*/

 #loader {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     height: auto;
     width: 40%;
     margin: 0 auto;
 }

 .msg {
     background-color: rgba(255, 255, 255, 1);
     -webkit-box-shadow: 0px 1px 4px 0px rgba(50, 50, 50, 0.49);
     -moz-box-shadow: 0px 1px 4px 0px rgba(50, 50, 50, 0.49);
     box-shadow: 0px 1px 4px 0px rgba(50, 50, 50, 0.49);
     padding: 15px 50px;
     color: #000;
     border-radius: 2px;
     font-family: 'Roboto', sans-serif;
     margin-top: 20px;
     min-height: 300px;
     border: 1px solid #d4d4d4;
     text-align: center;
     overflow-y: hidden;
 }

 .btn {
     background-color: #0065b3;
     padding: 10px 20px;
     border-radius: 20px;
     color: #fff;
     border: none;
     margin-top: 10px;
     text-align: center;
 }

 .grey {
     background-color: #d4d4d4;
     color: #000;
 }

 .pagebtn {
     color: black;
     background-color: #f7f7f7;
     padding: 3px 7px;
     border-radius: 2px;
     text-decoration: none;
     outline-style: none;
 }

 .active {
     background-color: #0065b3;
     color: #fff;
 }

 .dropshadow {
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), 0 -1px 0px rgba(0, 0, 0, 0.02);
 }

 ul {
     list-style: none;
 }

 li {
     margin-top: 10px;
 }

 .tooldiv {
     position: absolute;
     top: 64px;
     right: 64px;
     background-color: rgba(255, 255, 255, 1);
     -webkit-box-shadow: 0px 1px 4px 0px rgba(50, 50, 50, 0.49);
     -moz-box-shadow: 0px 1px 4px 0px rgba(50, 50, 50, 0.49);
     box-shadow: 0px 1px 4px 0px rgba(50, 50, 50, 0.49);
     padding: 2px;
     color: #000 !important;
     border-radius: 2px;
     font-family: 'Roboto', sans-serif;
     margin-top: 20px;
     height: auto;
     border: 1px solid #d4d4d4;
     text-align: left;
     overflow-y: hidden;
     width: 260px;
     padding-bottom: 30px;
     overflow-x: hidden;
     z-index:1000;
 }

 .activeicon {
     background-color: #43bd5f !important;
     color: #fff !important;
 }

 .mainactiveicon {
     background-color: #43bd5f !important;
     color: #fff !important;
 }

 h4 {
     font-size: 14px;
     font-weight: 300;
     text-transform: uppercase;
     float: left;
     margin: 0 0 0 2px !important;
 }

 .top {
     background-color: #a50000;
     color: #fff;
     padding: 5px 2px;
     border-radius: 2px;
     cursor: move;
     height: 16px;
 }

 .closeicon {
     float: right;
     margin-right: 5px;
     cursor: pointer;
     font-size: 16px !important;
 }

 .questionicon {
     float: right;
     margin-right: 5px;
     cursor: pointer;
     font-size: 16px !important;
 }

 .closeicon:hover {
     color: #f82e2e;
 }

 .questionicon:hover {
     color: #f82e2e;
 }



 .front {
     z-index: 100;
 }

 .help {
     width: 90%;
     background-color: #f7f7f7;
     min-height: 30px;
     margin: auto;
     border-bottom-left-radius: 5px;
     border-bottom-right-radius: 5px;
     padding: 5px;
     display: none;
     text-align: center;
     margin-bottom: 20px;
 }

 .help p {
     margin: 0;
     text-align: justify;
     font-weight: 700;
 }

 .help ol {
     text-align: justify;
     margin: 0 !important;
     padding: 0 10px;
 }

 .helpclosebutton {
     width: 20px;
     height: 20px;
     line-height: 20px !important;
     background: #4a4a4a;
     border-radius: 50%;
     color: #fff;
     margin-top: 5px;
     cursor: pointer;
 }

 .helpclosebutton:hover {
     background-color: #f82e2e;
 }

 .helpheading {
     display: block;
     float: none;
     text-transform: uppercase;
     /*background: #d0d0d0;*/
     background: #44bd60;
     padding: 5px;
     border-radius: 30px;
     color: #fff;
     margin-bottom: 8px !important;
     font-size: 12px;
     font-weight: 700;
 }

 .ui-resizable {
     position: absolute !important;
 }

 .ui-resizable-e {
     width: 0px !important;
 }

 /*label {
    display: inline-block;
    width: 5em;
    z-index:1000;
  }*/

 #layerlistcontainer label {
     display: inline;
     text-align: justify;
     padding: 0px !important;
 }

 #layerlistcontainer {
     height: 50%;
 }

 #downloadLayerContainer label {
     display: inline;
     text-align: justify;
     padding: 0px !important;
 }

 #downloadLayerContainer {
     height: 50%;
 }

 #directioncontainer {
     height: 50%;
 }

 #nearbycontainer {
     height: 50%;
 }

 #drawcontainer {
     height: 50%;
 }

 #aboutcontainer {
     height: 50%;
 }

 #measurecontainer {
     height: 50%;
 }

 #importcontainer {
     height: 50%;
 }

 .esriLayerList .esriTitleContainer {
     margin: 0 !important;
     border-top: 1px solid #d7d7d7 !important;
 }

 .esriLayerList .esriTitle {
     font-size: 12px !important;
     line-height: 36px !important;
     text-transform: capitalize;
     color: #000 !important;
 }

 .esriLayerList .esriContainer {
     background-color: #ffffff !important;
     color: #000000 !important;
     border-top: none !important;
     border-bottom: none !important;
 }

 /*Draw Text Annotation Class*/

 .annotation_class {
     display: none;
 }

 .drawtoolsicon {
     border: none;
     width: 30px;
     height: 30px;
     background-color: transparent;
     margin: 5px;
     cursor: pointer;
 }

 .map .esriMapContainer {
     position: absolute !important;
 }

 .multiselect {
     width: 200px;
 }

 .selectBox {
     position: relative;
 }

 .selectBox select {
     width: 100%;
     font-weight: bold;
 }

 .overSelect {
     position: absolute;
     left: 0;
     right: 0;
     top: 0;
     bottom: 0;
 }

 #checkboxes {
     display: none;
     border: 1px #dadada solid;
 }

 #checkboxes label {
     display: flex;
 }

 #checkboxes label:hover {
     background-color: #1e90ff;
 }

 .slidecontainer {
     width: 90%;
     margin: auto;
 }

 .slider {
     -webkit-appearance: none;
     appearance: none;
     width: 100%;
     height: 6px;
     background: #d3d3d3;
     outline: none;
     opacity: 0.7;
     -webkit-transition: .2s;
     transition: opacity .2s;
     border-radius: 5px;
 }

 .slider:hover {
     opacity: 1;
 }

 .slider::-webkit-slider-thumb {
     -webkit-appearance: none;
     appearance: none;
     width: 6px;
     height: 10px;
     background: #4CAF50;
     cursor: pointer;
 }

 .slider::-moz-range-thumb {
     width: 6px;
     height: 12px;
     background: #4CAF50;
     cursor: pointer;
 }

 #drawing_Tools {
     margin: 10px;
 }

 .jscolor {
     padding: 4px;
     text-align: center;
     width: 100px;
     border-radius: 5px;
     border: none;
     outline-style: none;
 }

 .arcgisSearch .searchMenu {
     font-size: 12px !important;
 }

 #viewDiv_graphics_layer {
     animation-name: pulse_animation;
     /*animation-duration: 5000ms;*/
     animation-duration: 3s;
     /*transform-origin:70% 70%;*/
     animation-iteration-count: infinite;
     animation-timing-function: linear;
 }

 .maplist {
     padding: 0;
     margin: 5px 0;
 }

 .maplist li {
     display: inline-block;
     margin: 0 10px;
 }

 .maplist div {
     text-align: center;
 }

 .maplist span {
     font-size: 11px;
 }

 #nearbycontainer .ms-options {
     height: 50%;
 }

 #data {
     padding: 0;
     margin-top: 40px;
 }

 #data li {
     padding: 5px;
     background: #f7f7f7;
     margin: 2px;
     border-radius: 4px;
     cursor: pointer;
     -webkit-transition: background 500ms ease-out;
     -moz-transition: background 500ms ease-out;
     -ms-transition: background 500ms ease-out;
     -o-transition: background 500ms ease-out;
     transition: background 500ms ease-out;
 }

 #data li:hover {
     background: #a50000;
     color: #fff !important;
     font-weight: bold !important;
 }

 #okbutton {
     margin-left: 87%;
     margin-top: 24%;
     -webkit-transition-duration: 0.4s;
     transition-duration: 0.4s;
     background-color: #1c6cd0;
     color: white;
 }

 #okbutton:hover {
     color: white;
     box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
 }

 .simpleDirections .esriPrintFooter {
     display: none
 }

 .HighlightList {
     color: red;
 }

 .ms-options-wrap>.ms-options {
     left: 5px !important;
     width: 96% !important;
     border: 1px solid #0079c1 !important;
 }

 #layers {
     text-align: center;
 }

 .layerimage {
     width: 30px;
     height: 30px;
     border: 4px solid rgb(255, 255, 255);
     border-radius: 50%;
     -webkit-transition: border 100ms ease-out;
     -moz-transition: border 100ms ease-out;
     -ms-transition: border 100ms ease-out;
     -o-transition: border 100ms ease-out;
     transition: border 100ms ease-out;
     cursor: pointer;
     margin: 10px;
 }

 #clearBuffer {
     position: absolute;
     right: 0;
     margin: 14px;
 }

 #distanceMeter {
     background: #eaeaea;
     border-radius: 30px;
     padding: 5px;
     text-align: center;
     margin-bottom: 10px;
 }

 .loader {
     border: 16px solid #f3f3f3;
     /* Light grey */
     border-top: 16px solid #3498db;
     /* Blue */
     border-radius: 50%;
     width: 120px;
     height: 120px;
     animation: spin 2s linear infinite;
     position: absolute;
     right: 600px;
     height: 100px;
     top: 290px;
     z-index: 100;
 }

 @keyframes spin {
     0% {
         transform: rotate(0deg);
     }
     100% {
         transform: rotate(360deg);
     }
 }

 .loading-overlay {
     display: none;
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-color: #fff;
     opacity: 0.9;
     z-index: 100;
 }

 .spin-loader {
     height: 225px;
     background: url("../images/load.gif") no-repeat center center transparent;
     position: relative;
     top: 25%;
 }
 .logosmall{
     display:none;
 }
 .logo{
     display:inline-block;
	 width: 280px;
 }
  @media screen and (max-width:768px) {
     .tooldiv {
         position: absolute;
         top: 50%;
         width: 100%;
         height: 50%;
         bottom: 5px;
         right: 0px;
     }

     #layerlistcontainer {
     height: 45%;
 }



 #downloadLayerContainer {
     height: 45%;
 }

 #directioncontainer {
     height: 45%;
 }

 #nearbycontainer {
     height: 45%;
 }

 #drawcontainer {
     height: 45%;
 }

 #aboutcontainer {
     height: 45%;
 }

 #measurecontainer {
     height: 45%;
 }

 #importcontainer {
     height: 45%;
 }
 .arcgisSearch .searchGroup .searchInput{
     padding: 6px 0px 6px 5px !important;
     width: 140px !important;
 }
 .arcgisSearch .searchBtn{
     padding: 6px 2px !important;
 }
 




 }
   .arcgisSearch .searchGroup .searchInput{
     padding: 6px 0px 6px 5px !important;
     width: 210px !important;
 }
 .arcgisSearch .searchBtn{
     padding: 6px 2px !important;
 }
    #goto{
     position: absolute;
     z-index: 1000;
     color: black;
     background: rgba(255,255,255,0.8);
     bottom: 120px;
     left: 90px !important;
     border-radius: 30px;
     width: 143px;
 }


 @media screen and (max-width:480px) and (min-width:420px) {
.logo{
     width:230px;
 }
}





@media screen and (max-width:420px) {
.logo{
     display:none;
 }
 .logosmall{
     display:inline-block;
 }

}

@media screen and (max-width:460px) {
	#BasemapToggle{
		bottom: 32px;
	}

#mapgallerycontainer {
     width: 85px;
     position: absolute;
     bottom: 40px;
     right: -85px;
     -webkit-transition: width 500ms ease-out;
     -moz-transition: width 500ms ease-out;
     -ms-transition: width 500ms ease-out;
     -o-transition: width 500ms ease-out;
     transition: width 500ms ease-out;
     -webkit-transition: right 2s;
     transition: right 0.3s ease-in-out;
     z-index:950;
     /*background-color:#000;*/
 }
#basemapGallery{
    height:auto !important;
    z-index:950;
    /*background-color:#000;*/
}
#hide{
    height:148px;
     -webkit-transition: height 500ms ease-out;
     -moz-transition: height 500ms ease-out;
     -ms-transition: height 500ms ease-out;
     -o-transition: height 500ms ease-out;
     transition: height 500ms ease-out;
     z-index:950;
     /*background-color:#000;*/
}
#info{
   bottom:35px !important;
}
.esriScalebar{
    bottom:65px !important;
    padding: 6px 20px 5px 5px !important;
}
}