@charset "utf-8";
/* CSS Document */

/* Reset and full viewport */
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    background-color: rgb(25, 25, 25); /* Dark gray background */
    overflow: hidden; /* Prevent scrolling */
}

/* Center content horizontally if needed */
body {
    display: flex;
    align-items: flex-start; /* Keep content at the top */
    justify-content: center; /* Center horizontally */
}

/*//////////////////////////////////////////////////////////////*/

/* Full-screen container */
#animation_container {
    position: fixed; /* Fixed ensures full-screen even on iOS */
    top: 0;
    left: 0;
    width: 100%;
    height: calc(var(--vh, 1vh) * 100); /* Real viewport height for iOS/Android */
    background-color: rgba(25, 25, 25, 1);
    z-index: 2;
    overflow: hidden;
}

/* Make canvas and overlay fill container */
#canvas,
#dom_overlay_container {
    width: 100%;
    height: 100%;
    display: block;
}



#overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;                /* Full width of the viewport */
    height: 100vh;               /* Full height of the viewport */
    background-color: rgba(25, 25, 25, 1);
    pointer-events: none;
    z-index: 1; /* or no z-index set */
}	

/*//////////////////////////////////////////////////////////////*/

#infowindow_BG {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;                /* Full width of the viewport */
    height: 100vh;               /* Full height of the viewport */
    background-color: rgba(0, 0, 0, .01);
    pointer-events: auto;
    z-index: 25; /* or no z-index set */
	visibility: hidden;
}	

/*//////////////////////////////////////////////////////////////*/

#lists_BG {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;                /* Full width of the viewport */
    height: 100vh;               /* Full height of the viewport */
    background-color: rgba(0, 0, 0, .9);
    pointer-events: auto;
    z-index: 11; /* or no z-index set */
	visibility: hidden;
}	

/*//////////////////////////////////////////////////////////////*/

#iMapGPSMap {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   margin: 0;
   padding: 0;
	z-index: 3;
	visibility: hidden;
	}
/*This removes the blue boarder effect when clicking on the google map (CaddieGPSMap)*/
.gm-style iframe + div { border:none!important; }


/*This removes the all effects when clicking on any marker (boarder) in the google map (CaddieGPSMap)*/
#iMapGPSMap *:focus {
    outline: none;
    border: none;
}

/*//////////////////////////////////////////////////////////////*/

#map_bg {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%; /* Full width */
    height: 0px; /* 100px in height */
    background-color: rgba(0, 0, 0, 0.5);  /*50% transparent black */
    z-index: 4; /* Adjust z-index as needed */
	visibility: hidden;	
}

/*//////////////////////////////////////////////////////////////*/

#topbar{
	position: absolute;
    top: 0px;
	width: 100%;
    height: 55px;
    background-color: rgba(0, 0, 0, 0.5); /* Black color with 60% transparency */
    z-index: 4;
	visibility: hidden;
}


/*//////////////////////////////////////////////////////////////*/

/*logo for CaddieGPS*/	
#iMapGPS_Logo { 
        position: absolute; 
        top: 10px; 
        left: 15px; 
		 /*background-color: rgba(0, 0, 0, .7); Semi-transparent background */
    	/*border-radius: 8px;  Rounded corners */
    	/*padding: 8px 4px 4px 8px;  Padding for better readability */
		z-index: 200;
		visibility: visible;
    }
    #iMapGPS_Logo img {
        height: 40px; 
        width: auto;
    }

/*//////////////////////////////////////////////////////////////*/

/*Rotate Device iFram*/	

#Rotate_Device {
    position: fixed;
    top: 0;
    left: 0;

    width: 100vw;
    height: 100vh;

    transform: none;     /* VERY important */
    z-index: 99;
}



/*//////////////////////////////////////////////////////////////*/

/*logo for CaddieGPS*/	
#Offline { 
        position: absolute; 
        top: 14px; 
        left: 110px; 
		 /*background-color: rgba(0, 0, 0, .7); Semi-transparent background */
    	/*border-radius: 8px;  Rounded corners */
    	/*padding: 8px 4px 4px 8px;  Padding for better readability */
		z-index: 100;
		/*visibility: hidden;*/
		display: block;
    }
    #Offline img {
        height: 30px; 
        width: auto;
    }


/*//////////////////////////////////////////////////////////////*/
	
#projectTitle {
    position: absolute;
    top: 13px; /* Adjust as needed */
    right: 10px; /* Set the left position to 50% */
    font-size: 23px;
    font-weight: normal;
    font-family: 'Roboto Condensed', 'sans-serif';
    text-shadow: 4px 4px 4px rgba(0, 0, 0, 0.9); /* Add text shadow */
    color: #FFFFFF; /* Yellow text for better contrast */
    z-index: 5; /* Ensure it's on top */
    visibility: hidden;
}


/*//////////////////////////////////////////////////////////////*/

#mapTitle {
  position: absolute;
  bottom: 165px;
  right: 10px;
  font-size: 30px;
  font-weight: normal;
  font-family: 'Roboto Condensed', Arial, Helvetica, sans-serif !important;
  text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.9);
  color: #FFFFFF;
  background-color: rgba(0, 0, 0, 0.6);
  border-radius: 8px;
  padding: 5px;
  z-index: 6;
  visibility: hidden;
}


/*//////////////////////////////////////////////////////////////*/
	
#distance {
    position: absolute;
    bottom: 75px; /* Adjust as needed */
    right: 10px; /* Set the left position to 50% */
    font-size: 30px;
    font-weight: normal;
    font-family: 'Roboto Condensed', sans-serif;
    text-shadow: 4px 4px 4px rgba(0, 0, 0, 0.9); /* Add text shadow */
    color: #FFFFFF; /* Yellow text for better contrast */
   background-color: rgba(0, 0, 0, .6); /* Semi-transparent background */
   border-radius: 8px;   /*Rounded corners */
    padding: 5px 5px 5px 5px;  /*Padding for better readability */
    z-index: 5; /* Ensure it's on top */
    visibility: hidden;
}

/*//////////////////////////////////////////////////////////////*/

#unit_measure {
	position: absolute;
    bottom: 122px; /* Adjust as needed */
    right: 10px; 
    font-size: 20px;
	font-weight: normal; 
	font-family: 'Roboto Condensed', sans-serif;
	text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.9); /* Add text shadow */
    color: #ff3300; /* Yellow text for better contrast */
    background-color: rgba(0, 0, 0, .6);  /*Semi-transparent background */
    border-radius: 8px;  /*Rounded corners */
	padding: 5px 5px 5px 5px;  /*Padding for better readability */
    z-index: 6; /* Ensure it's on top */
	visibility: hidden;
	}

/*//////////////////////////////////////////////////////////////*/

#area {
    position: absolute;
    bottom: 75px; /* Adjust as needed */
    right: 10px; /* Set the left position to 50% */
    font-size: 30px;
    font-weight: normal;
    font-family: 'Roboto Condensed', sans-serif;
    text-shadow: 4px 4px 4px rgba(0, 0, 0, 0.9); /* Add text shadow */
    color: #FFFFFF; /* Yellow text for better contrast */
    background-color: rgba(0, 0, 0, .6); /* Semi-transparent background */
    border-radius: 8px; /* Rounded corners */
    padding: 5px 5px 5px 5px; /* Padding for better readability */
    z-index: 5; /* Ensure it's on top */
    visibility: hidden;
	}

/*//////////////////////////////////////////////////////////////*/

#area_units {
	position: absolute;
    bottom: 122px; /* Adjust as needed */
    right: 10px; /* Set the left position to 50% */
    font-size: 20px;
	font-weight: normal; 
	font-family: 'Roboto Condensed', sans-serif;
	text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.9); /* Add text shadow */
    color: #ff3300; /* Yellow text for better contrast */
    background-color: rgba(0, 0, 0, .6);  /*Semi-transparent background */
    border-radius: 8px;  /*Rounded corners */
	padding: 5px 5px 5px 5px;  /*Padding for better readability */
    z-index: 6; /* Ensure it's on top */
	visibility: hidden;
	}

/*//////////////////////////////////////////////////////////////*/

#folder { 
    position: absolute; 
    top: 60px; 
    left: 7px;
	background-color: rgba(0, 0, 0, .6);  /*Semi-transparent background */
    border-radius: 8px;  /*Rounded corners */
	padding: 7px 5px 1px 7px;  /*Padding for better readability */
	z-index: 7;
    visibility: hidden;
}
#folder img {
    width: 34px; 
    height: auto;
}

/*//////////////////////////////////////////////////////////////*/

#foldertoolbar{
	position: absolute;
    top: 113px;
	left: 7px;
	width: 45px;
    height: 416px;
    background-color: rgba(0, 0, 0, 0.6); /* Black color with 60% transparency */
    border-radius: 8px;  /*Rounded corners */
	z-index: 6;
	visibility: hidden;
	pointer-events: auto;
}

/*//////////////////////////////////////////////////////////////*/

#Open_Account { 
    position: absolute; 
    top: 125px; 
    left: 10px;
	z-index: 7;
	visibility: hidden;
}
#Open_Account img {
    width: 40px;  
    height: auto;
}

#OpenFile { 
    position: absolute; 
    top: 185px; 
    left: 15px;
	z-index: 7;
	visibility: hidden;
}
#OpenFile img {
    width: 32px;  
    height: auto;
}


#SaveFile { 
    position: absolute; 
    top: 235px; 
    left: 15px;
	z-index: 7;
	visibility: hidden;
}
#SaveFile img {
    width: 32px;  
    height: auto;
}

#ImportLayer { 
    position: absolute; 
    top: 285px; 
    left: 15px;
	z-index: 7;
	visibility: hidden;
}
#ImportLayer img {
    width: 32px;  
    height: auto;
}


#removeLayer { 
    position: absolute; 
    top: 335px; 
    left: 15px;
	z-index: 7;
	visibility: hidden;
}
#removeLayer img {
    width: 32px;  
    height: auto;
}

#searchbtn { 
    position: absolute; 
    top: 385px; 
    left: 15px;
	z-index: 7;
	visibility: hidden;
}
#searchbtn img {
    width: 32px;  
    height: auto;
}

/*Not Used*/
#DeleteCloudFile { 
    position: absolute; 
    top: 435px; 
    left: 15px;
	z-index: 7;
	visibility: hidden;
}
#DeleteCloudFile img {
    width: 32px;  
    height: auto;
}

#ShareMap { 
    position: absolute; 
    top: 435px; 
    left: 15px;
	z-index: 7;
	visibility: hidden;
}
#ShareMap img {
    width: 32px;  
    height: auto;
}


#infobtn { 
    position: absolute; 
    top: 485px; 
    left: 15px;
	z-index: 7;
    visibility: hidden;
}
#infobtn img {
    width: 30px; 
    height: auto;
}


/*//////////////////////////////////////////////////////////////*/


#fullscreen { 
    position: absolute; 
    bottom: 20px;
    right: 10px;
	background-color: rgba(0, 0, 0, .6);  /*Semi-transparent background */
    border-radius: 8px;  /*Rounded corners */
	padding: 7px 5px 3px 5px;  /*Padding for better readability */
	z-index: 7;
    visibility: hidden;
}
#fullscreen img {
    width: 36px; 
    height: auto;
}

#takeImage { 
    position: absolute; 
    top: 50%;
    Right: 7px;
	background-color: rgba(0, 0, 0, .6);  /*Semi-transparent background */
    border-radius: 8px;  /*Rounded corners */
	padding: 3px 1px 0px 2px;  /*Padding for better readability */
	z-index: 7;
    visibility: hidden;
}
#takeImage img {
    width: 42px; 
    height: auto;
}

#add_pin_spot { 
    position: absolute; 
    top: 60%;
    Right: 7px;
	background-color: rgba(0, 0, 0, .6);  /*Semi-transparent background */
    border-radius: 8px;  /*Rounded corners */
	padding: 3px 1px 0px 2px;  /*Padding for better readability */
	z-index: 7;
    visibility: hidden;
}
#add_pin_spot img {
    width: 42px; 
    height: auto;
}


#start_trek { 
    position: absolute; 
    bottom: 20px;
    Right: 63px;
	background-color: rgba(0, 0, 0, .6);  /*Semi-transparent background */
    border-radius: 8px;  /*Rounded corners */
	padding: 7px 5px 3px 5px;  /*Padding for better readability */
	z-index: 7;
    visibility: hidden;
}
#start_trek img {
    width: 36px; 
    height: auto;
}


/*//////////////////////////////////////////////////////////////*/

#end_trek { 
    position: absolute; 
    bottom: 20px;
    Right: 63px;
	background-color: rgba(0, 0, 0, .6);  /*Semi-transparent background */
    border-radius: 8px;  /*Rounded corners */
	padding: 7px 5px 3px 5px;  /*Padding for better readability */
	z-index: 7;
    visibility: hidden;
}
#end_trek img {
    width: 36px; 
    height: auto;
}






/*//////////////////////////////////////////////////////////////*/

#OpenTarget { 
    position: absolute; 
    bottom: 20px;
    left: calc(min(40vw, 25vh) + 53px);
	background-color: rgba(0, 0, 0, .6);  /*Semi-transparent background */
    border-radius: 8px;  /*Rounded corners */
	padding: 6px 4px 2px 4px;  /*Padding for better readability */
	z-index: 7;
    visibility: hidden;
}
#OpenTarget img {
    width: 38px; 
    height: auto;
}



/*//////////////////////////////////////////////////////////////*/

#back_to_home_btn { 
    position: absolute; 
    top: 60px; 
    right: 7px;
	background-color: rgba(0, 0, 0, .6);  /*Semi-transparent background */
    border-radius: 8px;  /*Rounded corners */
	padding: 7px 5px 1px 7px;  /*Padding for better readability */
	z-index: 7;
    visibility: hidden;
}
#back_to_home_btn img {
    width: 34px; 
    height: auto;
}

/*//////////////////////////////////////////////////////////////*/

#toolbar{
	position: absolute;
    top: 113px;
	right: 7px;
	width: 45px;
    height: 360px;
    background-color: rgba(0, 0, 0, 0.6); /* Black color with 60% transparency */
    border-radius: 8px;  /*Rounded corners */
	z-index: 4;
	visibility: hidden;
	pointer-events: auto;
}


/*//////////////////////////////////////////////////////////////*/

#create_path { 
    position: absolute; 
    top: 125px; 
    right: 15px;
	z-index: 7;
    visibility: hidden;
}
#create_path img {
    width: 30px; 
    height: auto;
}

/*//////////////////////////////////////////////////////////////*/

#create_polygon { 
    position: absolute; 
    top: 175px; 
    right: 15px;
	z-index: 7;
    visibility: hidden;
}
#create_polygon img {
    width: 30px; 
    height: auto;
}

/*//////////////////////////////////////////////////////////////*/

#add_pin { 
    position: absolute; 
    top: 225px; 
    right: 11px;
	z-index: 7;
    visibility: hidden;
}
#add_pin img {
    width: 36px; 
    height: auto;
}


/*//////////////////////////////////////////////////////////////*/

#MapTypes { 
    position: absolute; 
    top: 275px; 
    right: 15px;
	z-index: 7;
    visibility: hidden;
}
#MapTypes img {
    width: 30px;  
    height: auto;
}

/*//////////////////////////////////////////////////////////////*/

#MapUnits { 
    position: absolute; 
    top: 325px; 
    right: 15px;
	z-index: 7;
    visibility: hidden;
}
#MapUnits img {
    width: 30px;  
    height: auto;
}


/*//////////////////////////////////////////////////////////////*/

#MapAreas { 
    position: absolute; 
    top: 375px; 
    right: 15px;
	z-index: 7;
    visibility: hidden;
}
#MapAreas img {
    width: 30px;  
    height: auto;
}

/*//////////////////////////////////////////////////////////////*/


#clearAll { 
    position: absolute; 
    top: 425px;  
    right: 13px; 
	z-index: 10;
    visibility: hidden;
}
#clearAll img {
    width: 32px; 
    height: auto;
}


/*//////////////////////////////////////////////////////////////*/

#copy_paste { 
    position: absolute; 
    top: 60px;
    left: 50%; 
    transform: translateX(-50%);
	background-color: rgba(0, 0, 0, .6);  /*Semi-transparent background */
    border-radius: 8px;  /*Rounded corners */
	padding: 7px 5px 3px 5px;  /*Padding for better readability */
	z-index: 7;
	visibility: hidden;
}
#copy_paste img {
    width: 30px; 
    height: auto;
}


/*//////////////////////////////////////////////////////////////*/

#edit_path { 
    position: absolute; 
    top: 60px;
    left: 50%; 
    transform: translateX(calc(-50% - 50px));
	background-color: rgba(0, 0, 0, .6);  /*Semi-transparent background */
    border-radius: 8px;  /*Rounded corners */
	padding: 7px 5px 3px 5px;  /*Padding for better readability */
	z-index: 7;
	visibility: hidden;
}
#edit_path img {
    width: 30px; 
    height: auto;
}


/*//////////////////////////////////////////////////////////////*/

#edit_area { 
    position: absolute; 
    top: 60px;
    left: 50%; 
    transform: translateX(calc(-50% - 50px));
	background-color: rgba(0, 0, 0, .6);  /*Semi-transparent background */
    border-radius: 8px;  /*Rounded corners */
	padding: 7px 5px 3px 5px;  /*Padding for better readability */
	z-index: 7;
	visibility: hidden;
}
#edit_area img {
    width: 30px; 
    height: auto;
}

/*//////////////////////////////////////////////////////////////*/

#clear_path { 
    position: absolute; 
    top: 60px;
    left: 50%; 
    transform: translateX(calc(-50% + 50px));
	background-color: rgba(0, 0, 0, .6);  /*Semi-transparent background */
    border-radius: 8px;  /*Rounded corners */
	padding: 7px 5px 3px 5px;  /*Padding for better readability */
	z-index: 7;
	visibility: hidden;
}
#clear_path img {
    width: 30px; 
    height: auto;
}

/*//////////////////////////////////////////////////////////////*/

#removeWaypoint { 
   position: absolute; 
    top: 60px;
    left: 50%; 
    transform: translateX(calc(-50% + 50px));
	background-color: rgba(0, 0, 0, .6);  /*Semi-transparent background */
    border-radius: 8px;  /*Rounded corners */
	padding: 7px 5px 3px 5px;  /*Padding for better readability */
	z-index: 7;
    visibility: hidden;
}
#removeWaypoint img {
    width: 30px; 
    height: auto;
}




/*//////////////////////////////////////////////////////////////*/

#select_color_btn { 
   position: absolute; 
   top: 60px; 
   left: 50%; 
    transform: translateX(-50%);
	background-color: rgba(0, 0, 0, .6);  /*Semi-transparent background */
    border-radius: 8px;  /*Rounded corners */
	padding: 7px 5px 3px 5px;  /*Padding for better readability */
	z-index: 7;
    visibility: hidden;
}
#select_color_btn img {
    width: 30px; 
    height: auto;
}



#select_color_line_btn { 
   position: absolute; 
    top: 60px; 
    left: 50%; 
    transform: translateX(-50%);
	background-color: rgba(0, 0, 0, .6);  /*Semi-transparent background */
    border-radius: 8px;  /*Rounded corners */
	padding: 7px 5px 3px 5px;  /*Padding for better readability */
	z-index: 7;
    visibility: hidden;
}
#select_color_line_btn img {
    width: 30px; 
    height: auto;
}

.color-boxes {
    display: grid;
    grid-template-columns: repeat(5, 50px); /* 4 boxes per row */
    gap: 10px;
    margin-top: 20px;
    visibility: hidden; /* Initially hidden */
    z-index: 1000;  /* Set z-index to ensure it's above other elements */
    
    /* Centering the grid */
    position: absolute;  /* Absolute positioning */
    top: 50%;  /* Position from top to center */
    left: 50%;  /* Position from left to center */
    transform: translate(-50%, -50%);  /* Adjust for exact centering */
    
    /* Optional: max width of the grid to prevent overflow */
    max-width: 300px;
    max-height: 300px;
}

.color-box {
    width: 50px;
    height: 50px;
    cursor: pointer;
    border: 1px solid #ddd;
}

#hex {
    font-size: 20px;
    font-weight: bold;
}

/*//////////////////////////////////////////////////////////////*/

#save_path { 
    position: absolute; 
    top: 60px; 
    left: 50%; 
    transform: translateX(calc(-50% - 50px));
	background-color: rgba(0, 0, 0, .6);  /*Semi-transparent background */
    border-radius: 8px;  /*Rounded corners */
	padding: 7px 5px 3px 5px;  /*Padding for better readability */
	z-index: 7;
	visibility: hidden;
}
#save_path img {
    width: 30px; 
    height: auto;
}

/*//////////////////////////////////////////////////////////////*/

#save_poly { 
    position: absolute; 
    top: 60px; 
    left: 50%; 
    transform: translateX(calc(-50% - 50px));
	background-color: rgba(0, 0, 0, .6);  /*Semi-transparent background */
    border-radius: 8px;  /*Rounded corners */
	padding: 7px 5px 3px 5px;  /*Padding for better readability */
	z-index: 7;
	visibility: hidden;
}
#save_poly img {
    width: 30px; 
    height: auto;
}


/*//////////////////////////////////////////////////////////////*/

#remove_poly { 
    position: absolute; 
    top: 60px; 
    left: 50%; 
    transform: translateX(calc(-50% + 50px));
	background-color: rgba(0, 0, 0, .6);  /*Semi-transparent background */
    border-radius: 8px;  /*Rounded corners */
	padding: 7px 5px 3px 5px;  /*Padding for better readability */
	z-index: 7;
	visibility: hidden;
}
#remove_poly img {
    width: 30px; 
    height: auto;
}





/*//////////////////////////////////////////////////////////////*/

#remove_pin { 
    position: absolute; 
    top: 60px;
    left: 50%; 
    transform: translateX(calc(-50% + 50px));
	background-color: rgba(0, 0, 0, .6);  /*Semi-transparent background */
    border-radius: 8px;  /*Rounded corners */
	padding: 5px 3px 1px 3px;  /*Padding for better readability */
	z-index: 7;
    visibility: hidden;
}
#remove_pin img {
    width: 36px; 
    height: auto;
}


/*//////////////////////////////////////////////////////////////*/

#undo_btn { 
    position: absolute; 
    top: 60px;
    left: 50%; 
    transform: translateX(calc(-50% + 25px));
	background-color: rgba(0, 0, 0, .6);  /*Semi-transparent background */
    border-radius: 8px;  /*Rounded corners */
	padding: 7px 5px 3px 5px;  /*Padding for better readability */
	z-index: 7;
	visibility: hidden;
}
#undo_btn img {
    width: 30px; 
    height: auto;
}


/*//////////////////////////////////////////////////////////////*/

#redo_btn { 
   position: absolute; 
    top: 60px; 
    left: 50%; 
    transform: translateX(calc(-50% - 25px));
	background-color: rgba(0, 0, 0, .6);  /*Semi-transparent background */
    border-radius: 8px;  /*Rounded corners */
	padding: 7px 5px 3px 5px;  /*Padding for better readability */
	z-index: 7;
    visibility: hidden;
}
#redo_btn img {
    width: 30px; 
    height: auto;
}



/*//////////////////////////////////////////////////////////////*/


#select_pin_type { 
    position: absolute; 
    top: 60px; 
    left: 50%; 
    transform: translateX(calc(-50% - 50px));
	background-color: rgba(0, 0, 0, .6);  /*Semi-transparent background */
    border-radius: 8px;  /*Rounded corners */
	padding: 5px 3px 1px 3px;  /*Padding for better readability */
	z-index: 7;
    visibility: hidden;
}
#select_pin_type img {
    width: 36px; 
    height: auto;
}



/*//////////////////////////////////////////////////////////////*/

#openinfo { 
    position: absolute; 
    top: 55px; 
    left: 50%; 
    transform: translateX(-50%);
	z-index: 7;
    visibility: hidden;
}
#openinfo img {
    width: 45px; 
    height: auto;
}

/*//////////////////////////////////////////////////////////////*/


#Units_List,
#Maps_List,
#Areas_List,
#Opens_List,
#Saves_List
{
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 10px;
  background-color: rgba(0, 0, 0, 0.6);
  border: 0px solid #FFFFFF;
  border-radius: 8px;
  max-width: 75vw;  /* Set width to 75% of the screen width */
  width: calc(min(60vw, 40vh));
  max-height: 50vh; /* Set height to 75% of the screen height */
  overflow-y: auto; /* Enables scroll when content is taller */
  font-family: Arial, sans-serif;
  font-size: 3.2vh;
  display: none;
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.8);
  z-index: 12;
  -webkit-overflow-scrolling: touch; /* Smooth scroll on iOS */
}

/* Button styles remain unchanged */
#Units_List button, 
#Maps_List button,
#Areas_List button,
#Opens_List button,
#Saves_List button
{
  display: block;
  width: 100%;
  padding: 12px 12px;
  margin: 8px 0;
  border: 1px solid #aaa;
  border-radius: 8px;
  background-color: rgba(0, 0, 0, 0.4); 
  color: #FFFFFF;
  font-size: 3.2vh;
  text-align: center;
  cursor: pointer;
  transition: background 0.3s ease-in-out;
}

#Units_List button:hover,
#Maps_List button:hover,
#Areas_List button:hover,
#Opens_List button:hover,
#Saves_List button:hover
{
  	color: #ff3300;
	border-color: #ff3300;
}

@media (max-width: 360px) {
  	#Units_List button,
	#Maps_List button,
	#Areas_List button,
	#Opens_List buttonr,
	#Saves_List button
	{
    font-size: 3vh;
    padding: 14px;
  }
}

/*/////////////////////////////////////////////////////////////////*/


#PinTypes_List
{
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 10px;
  background-color: rgba(0, 0, 0, 0.6);
  border: 0px solid #FFFFFF;
  border-radius: 8px;
  max-width: 20vw;  /* Set width to 10% of the screen width */
  width: 20vw;      /* Set width to 10% of the screen width */
  max-height: 60vh; /* Set height to 75% of the screen height */
  overflow-y: auto; /* Enables scroll when content is taller */
  font-family: Arial, sans-serif;
  font-size: 3.2vh;
  display: none;
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.8);
  z-index: 12;
  -webkit-overflow-scrolling: touch; /* Smooth scroll on iOS */
}

/* Adjust button styles */
#PinTypes_List button
{
  display: block;
  width: calc(100% - 10px); /* Make buttons fill most of the container but leave space on both sides */
  padding: 8px 0px; /* Reduce padding on the sides to center them */
  margin: 8px auto; /* Center buttons by adjusting the margin */
  border: 1px solid #aaa;
  border-radius: 8px;
  background-color: rgba(0, 0, 0, 0.4);
  color: #FFFFFF;
  font-size: 3.2vh;
  text-align: center;
  cursor: pointer;
  transition: background 0.3s ease-in-out;
}

/* Hover effect */
#PinTypes_List button:hover
{
  	color: #ff3300;
	border-color: #ff3300;
}

@media (max-width: 360px) {
  	
	#PinTypes_List button
	{
    font-size: 3vh;
    padding: 14px;
  }
}

/*/////////////////////////////////////////////////////////////////*/

#FilesListTitle {
  position: absolute;
	font-size: 3vh;   /* match button text size */
  color: #ffffff;
  text-align: center;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px;
  background-color: rgba(0, 0, 0, 0);
  border: 0px solid #FFFFFF;
  border-radius: 8px;
  width: calc(min(60vw, 40vh));
  font-family: Arial, sans-serif;
  visibility: hidden;
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.8);
  z-index: 12;
  -webkit-overflow-scrolling: touch; /* Smooth scroll on iOS */
}

#SaveAs {
  font-family: Arial, sans-serif;
  font-weight: normal;
  text-align: center;
  position: absolute;
  width: calc(min(60vw, 40vh));
  left: 50%;
  transform: translateX(-50%);
  top: 124px; 
  z-index: 12;
  color: #FFFFFF;
  border: none;
  visibility: hidden;
}

#saveas {
  margin-left: 0;
  padding: 10px 0px; 
  font-size: 2.4vh; 
  border: 1px solid #FFFFFF; 
  border-radius: 8px;        
  width: 100%; 
  background-color: rgba(0, 0, 0, 0);
  text-align: center;
  color: #FF3300; 
  font-weight: bolder;
  
  /* Optional: Remove default outline on focus for a cleaner look */
  outline: none;
}

#saveas:focus {
  background-color: #000000;
  outline: none;
}


#SaveButton {
  position: absolute;  
  top: 181px;  
  left: 50%;
  width: calc(min(60vw, 40vh));
  height: auto;
  transform: translateX(-50%);
  /* margin: 0px auto;          center horizontally */
  padding: 10px 0px;            /* vertical spacing inside */
  background-color: #FF3300;
  color: #ffffff;
  font-size: 2.4vh;
  font-weight: bolder;
  text-align: center;
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.8); /* Added text-shadow */
  border-radius: 8px;
  cursor: pointer;
  font-family: Arial, sans-serif;
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.8);
  visibility: hidden;
  z-index: 12;
}

#SaveButton:hover {
  background-color: #ff7f00;   /* slightly darker on hover */
}

#DeleteButton {
  position: absolute;  
  top: 181px;  
  left: 50%;
  width: calc(min(60vw, 40vh));
  height: auto;
  transform: translateX(-50%);
  /* margin: 0px auto;          center horizontally */
  padding: 10px 0px;            /* vertical spacing inside */
  background-color: #FF3300;
  color: #ffffff;
  font-size: 2.4vh;
  font-weight: bolder;
  text-align: center;
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.8); /* Added text-shadow */
  border-radius: 8px;
  cursor: pointer;
  font-family: Arial, sans-serif;
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.8);
  visibility: hidden;
  z-index: 12;
}

#DeleteButton:hover {
  background-color: #ff7f00;   /* slightly darker on hover */
}

#RemoveButton {
  position: absolute;  
  top: 181px;  
  left: 50%;
  width: calc(min(60vw, 40vh));
  height: auto;
  transform: translateX(-50%);
  /* margin: 0px auto;          center horizontally */
  padding: 10px 0px;            /* vertical spacing inside */
  background-color: #FF3300;
  color: #ffffff;
  font-size: 2.4vh;
  font-weight: bolder;
  text-align: center;
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.8); /* Added text-shadow */
  border-radius: 8px;
  cursor: pointer;
  font-family: Arial, sans-serif;
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.8);
  visibility: hidden;
  z-index: 12;
}

#RemoveButton:hover {
  background-color: #ff7f00;   /* slightly darker on hover */
}


/*//////////////////////////////////////////////////////////////*/


#list_searchbtn { 
    position: absolute; 
    left: 50%;
	transform: translateX(calc(-50% + min(37vw, 23vh))); /* Shift left */
	background-color: rgba(0, 0, 0, .001);  /*Semi-transparent background */
    border-radius: 8px;  /*Rounded corners */
	padding: 5px 3px 1px 3px;  /*Padding for better readability */
	z-index: 51;
    visibility: hidden;
}
#list_searchbtn img {
    width: calc(min(10vw, 5vh));
    height: auto;
}


/*//////////////////////////////////////////////////////////////*/


#list_exitbtn { 
    position: absolute; 
    left: 50%;
	transform: translateX(calc(-50% - min(37vw, 23vh))); /* Shift right */
	background-color: rgba(0, 0, 0, .001);  /*Semi-transparent background */
    border-radius: 8px;  /*Rounded corners */
	padding: 5px 3px 1px 3px;  /*Padding for better readability */
	z-index: 51;
    visibility: hidden;
}
#list_exitbtn img {
    width: calc(min(10vw, 5vh));
    height: auto;
}


#SearchButton {
  position: absolute;  
  top: 181px;  
  left: 50%;
  width: calc(min(60vw, 40vh));
  height: auto;
  transform: translateX(-50%);
  /* margin: 0px auto;          center horizontally */
  padding: 10px 0px;            /* vertical spacing inside */
  background-color: #FF3300;
  color: #ffffff;
  font-size: 2.7vh;
  font-weight: normal;
  text-align: center;
  border-radius: 8px;
  cursor: pointer;
  font-family: Arial, sans-serif;
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.8);
  visibility: hidden;
  z-index: 12;
}

#SearchButton:hover {
  background-color: #ff7f00;   /* slightly darker on hover */
}


#Files_List,
#Photos_List,
#Layers_List,
#Items_List
{
  position: fixed;
  top: 242px;
  left: 50%;
  transform: translateX(-50%);
  padding: 0px;
  background-color: rgba(0, 0, 0, 0);
  border: 0px solid #FFFFFF;
  border-radius: 8px;
  max-width: 80vw;
  width: calc(min(60vw, 40vh));
  max-height: 40vh;
  overflow-y: auto;
  font-family: Arial, sans-serif;
  font-size: 2.0vh;
  display: none;
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0);
  z-index: 12;
  -webkit-overflow-scrolling: touch;
}

/* Button styles */
#Files_List button,
#Photos_List button,
#Layers_List button,
#Items_List button

{
  display: block;
  width: 100%;
  padding: 10px 10px;
  margin: 3px 0;
  border: 1px solid #aaa;
  border-radius: 8px;
  background-color: rgba(0, 0, 0, 0.3);
  color: #FFFFFF;
  font-size: 2.0vh;
  text-align: center;
  overflow-x: hidden;
  cursor: pointer;
  transition: background 0.3s ease-in-out;
}

#Files_List button:hover,
#Photos_List button:hover,
#Layers_List button:hover,
#Items_List button:hover
{
  color: #ff3300;
  border-color: #ff3300;
}

@media (max-width: 360px) {
#Files_List button,
#Photos_List button,	
#Layers_List button,
#Items_List button
	{
    font-size: 2.5vh;
    padding: 10px;
  }
}

/*/////////////////////////////////////////////////////////////*/
	
#big_compass_degrees {
    position: absolute;
    bottom: 25px; /* Adjust as needed */
    left: 15px; /* Set the left position to 50% */
    font-size: 25px;
    font-weight: bolder;
    font-family: 'Roboto Condensed', sans-serif;
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5); /* Add text shadow */
    color: #ff3300; /* Yellow text for better contrast */
    /*background-color: rgba(0, 0, 0, .7);  Semi-transparent background */
    /*border-radius: 8px;  Rounded corners */
    /*padding: 5px 10px 5px 10px;  Padding for better readability */
    z-index: 5; /* Ensure it's on top */
    visibility: hidden;
}



/*//////////////////////////////////////////////////////////////*/

#zoom_Level {
    position: absolute;
    bottom: -0px; /* Adjust as needed - hide for now*/
    left: 8px; /* Set the left position to 50% */
    font-size: calc(min(4.3vw, 4.3vh));
    font-weight: bolder;
    font-family: 'Roboto Condensed', sans-serif;
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.7); /* Add text shadow */
    color: #ff3300; /* Yellow text for better contrast */
    /*background-color: rgba(0, 0, 0, .7);  Semi-transparent background */
    /*border-radius: 8px;  Rounded corners */
    /*padding: 5px 10px 5px 10px;  Padding for better readability */
    z-index: 5; /* Ensure it's on top */
    visibility: hidden;
}

/*//////////////////////////////////////////////////////////////*/

/*//////////////////////////////////////////////////////////////*/

/*//////////////////////////////////////////////////////////////*/


#Small_Compass
{
	position: absolute;
	bottom: 12px;
	left: 2px;
	width: calc(min(45vw, 30vh)); 
	aspect-ratio: 1 / 1;   /* IMPORTANT – see #2 */
	z-index: 4; 
	visibility: hidden;
}

/*//////////////////////////////////////////////////////////////*/

#start_nav { 
    position: absolute; 
    top: 50%;
    left: 34%;
	transform: translate(-50%, -50%);
	z-index: 7;
    visibility: hidden;
}
#start_nav img {
    width: 32px; 
    
}

#end_nav { 
    position: absolute; 
    top: 50%;
    left: 34%;
    transform: translate(-50%, -50%);
	z-index: 7;
    visibility: hidden;
}
#end_nav img {
    width: 32px; 
    
}

#small_compass_degrees {
    position: absolute;
    bottom: calc(min(17.9vw, 9.5vh));
    top: 50%;
	left: 67%;
	transform: translate(-50%, -42%);
	font-size: calc(min(3vw, 3vh));
    font-weight: bolder;
    font-family: 'Roboto Condensed', sans-serif;
    text-shadow: 4px 4px 4px rgba(0, 0, 0, 0.9); 
    color: #ffffff;
    z-index: 7; 
    visibility: hidden;
}

#needle { 
   position: absolute;
    top: 0px;
    left: 0px;
	background: transparent;
	z-index: 6;
    transform-origin: center center; 
    width: 100%;   
    height: auto;
	visibility: hidden;
}
#needle img {
    width: 100%; 
    
}

#compass {
    position: absolute;
    bottom: 0px;
    left: 0px;
   	z-index: 5;
    transform-origin: center center;  
    width: 100%;  
    
	visibility: hidden;
}

#compass img {
    width: 100%;  
     
}




#bigcompass,
#bigcompass_onwhite
{
    position: absolute;
    top: 50%;
    left: 50%;
	transform-origin: center center; /*  Ensure it's centered */
	transform: translate(-50%, -50%);
	z-index: 3;
    width: calc(min(100vw, 100vh));  /* Set the width to the smaller of 60% of viewport width or height */
	height: auto;  /* Maintain the aspect ratio of the container */
	background: transparent;   /*Ensure the background is transparent */
    pointer-events: none; /* Disable click events for this div */
	visibility: hidden;
}

#bigcompass img,
#bigcompass_onwhite img
{
    width: 100%;  /* Make the image take up 100% of the width of the compass container */
    height: auto;  /* Maintain the aspect ratio of the image */
	pointer-events: none;   /*Disable being able to click through this div for below buttons */
}

#bigcompass_pointer {
    position: absolute;
    top: 50%;
    left: 50%;
	transform-origin: center center;  /* Ensure it's centered */
	transform: translate(-50%, -50%);
	z-index: 3;
    width: calc(min(100vw, 100vh));  /* Set the width to the smaller of 60% of viewport width or height */
	height: auto;  /* Maintain the aspect ratio of the container */
	background: transparent;   /*Ensure the background is transparent */
    pointer-events: none;  /* Disable being able to click through this div for below buttons */
	visibility: hidden;
}

#bigcompass_pointer img {
    width: 100%;  /* Make the image take up 100% of the width of the compass container */
    height: auto;  /* Maintain the aspect ratio of the image */
	/*pointer-events: none;   Disable click events for this div */
}





#refresh_btn { 
    position: absolute; 
    top: 145px; 
    right: 5px; /* Set the left position to 50% */
    background-color: rgba(0, 0, 0, .7);  /*Semi-transparent background*/ 
    border-radius: 8px;  /*Rounded corners*/ 
    padding: 7px 7px 5px 7px;  /*Padding for better readability*/ 
	z-index: 7;
    visibility: hidden;
}
#refresh_btn img {
    width: 43px; 
    height: auto;
}

#addWaypoint { 
    position: absolute; 
    top:35vh; 
    left: 10px; /* Set the left position to 50% */
    /*background-color: rgba(0, 0, 0, .7);  Semi-transparent background*/ 
    /*border-radius: 8px;  Rounded corners*/ 
    /*padding: 7px 7px 5px 7px;  Padding for better readability*/ 
	z-index: 7;
    visibility: hidden;
}
#addWaypoint img {
    width: 55px; 
    height: auto;
}




#SearchID {
  font-family: Arial, sans-serif;
  font-weight: bold;
  text-align: center;
  background-color: #000000;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 32%; /* Position 50% down the viewport height */
  z-index: 4;
  padding: .6vh; /* Padding relative to viewport height */
  border-radius: 8px;
  color: #ff3300;
  width: 18vh; /* Width relative to viewport height */
  visibility: visible;
}

#searchid {
  margin-left: 0;
  padding: .7vh; /* Padding relative to viewport height */
  font-size: 3vh; /* Input text size relative to viewport height */
  border: none;
  border-radius: 0;
  width: 80%; /* Width is 80% of the SearchID container */
  background-color: #000000;
  text-align: center;
  color: #ff3300;
  font-weight: bold;
}

#searchid:focus {
  border-color: transparent;
  outline: none;
}


#Username,
#Password,
#Organization,
#UserFirstName,
#UserLastName,
#UserPhone,
#UserExtention,
#Security
{
  font-family: Arial, sans-serif;
  font-weight: normal;
  text-align: center;
  border-radius: 8px;
  background-color: #252525;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 27%;  /*Position 50% down the viewport height */
  z-index: 4;
  color: #FFFFFF;
  width: calc(min(60vw, 35vh));
  border: 1px solid #252525;
  visibility: hidden;
}

#Password {top: 36%;}


#username,
#password,
#organization,
#userfirstname,
#userlastname,
#userphone,
#userextention,
#security
{
  margin-left: 0;
  padding: 1vh 0vh;  /*Padding relative to viewport height */
  font-size: 2.7vh; /* Input text size relative to viewport height */
  border: 1px solid #FFFFFF; /* White border, 2px width, solid style */
  border-radius: 8px;        /* Optional: rounded corners */
  width: 100%; /* Width is 80% of the SearchID container */
  background-color: #252525; /* Background color of the input field */
  text-align: center;
  color: #FFFFFF; /* Text color */
  font-weight: normal;
  
  /* Optional: Remove default outline on focus for a cleaner look */
  outline: none;
}

#username:focus,
#password:focus,
#organization:focus,
#userfirstname:focus,
#userlastname:focus,
#userphone:focus,
#userextention:focus,
#security:focus
{
  background-color: #000000;
  outline: none;
}

 
/* Override Google Maps .gm-svpc to remove outline and shadow */
.gm-svpc {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
    background: transparent !important;
    pointer-events: none; /* Disable interactions if needed */
}

/* Optional: Hide the element entirely */
.gm-svpc img {
    display: none !important;
}



/* For file Openning//////////////////////////////////////////////////////////////*/

#OPEN_FILE
{
	box-shadow: 5px 5px 15px 4px rgba(0, 0, 0, 0.5);
	border-radius: 10px;
	border-color: #FF3300;
	background-color: #252525;
	}





/* Info Window //////////////////////////////////////////////////////////////////*/

#InfoWindow_Container {
	position: absolute;
    top: 0;
    left: 0;
    width: 100vw;                /* Full width of the viewport */
    height: 100vh;               /* Full height of the viewport */
    border-radius: 20px;
	background-color: rgba(0, 0, 0, .9);
    pointer-events: auto;
    z-index: 25; /* or no z-index set */
	display: hidden;
	
}

#edit_window { 
    position: absolute; 
    top: 5%;
    right: 5%;
	width: 100%;  /* 80% of the viewport width */
    height: auto;  /* 40% of the viewport height */
	/*background-color: rgba(0, 0, 0, 0);  Semi-transparent background */
    /*border-radius: 8px;  Rounded corners */
	 /*padding: 7px 5px 3px 5px; Padding for better readability */
	z-index: 52;
	visibility: hidden;
}

#edit_window img {
    width: 100%; 
    height: auto;
}

#infobtn_window { 
    position: absolute; 
    top: -10%;
    right: 5%;
	width: 100%;  /* 80% of the viewport width */
    height: auto;  /* 40% of the viewport height */
	background-color: rgba(0, 0, 0, .6);  /*Semi-transparent background */
    border-radius: 8px;  /*Rounded corners */
	padding: 5px 5px 5px 5px;  /*Padding for better readability */
	z-index: 53;
	visibility: hidden;
}

#infobtn_window img {
    width: 100%; 
    height: auto;
}


#ItemTitle {
    position: absolute;
    left: 50%; /* Center horizontally within parent container */
                 /* Set the width of the InfoBox */
	transform: translateX(-50%); /* Adjust for proper centering */
    font-size: 2.3vh;
    font-weight: normal;
    font-family: 'Roboto Condensed', sans-serif;
    text-shadow: 4px 4px 4px rgba(0, 0, 0, 0.9);
    color: #FFF;
    text-align: center;
    z-index: 52;
    visibility: hidden;
	
}

/* Input field inside InfoBox */
#itemtitle {
    width: 100%;				 /* Make the input take up full width of the parent */
    font-size: 2.8vh;          /* Adjust text size */
    padding: 1vh;              /* Padding for input */
    border: 0px solid #FFF; /* Border color */
    background-color: rgba(0, 0, 0, 0);  /* Black color with 0 transparency */
    color: #fff;               /* White text */
    text-align: center;          /* Left-align text inside the input */
    font-weight: normal;       /* Normal text */
    border-radius: 8px;        /* Optional: rounded corners */
    outline: none;             /* Remove outline */
    box-sizing: border-box;    /* Ensures padding doesn't affect width calculation */
	
}

#itemtitle:focus {
    background-color: rgba(0, 0, 0, 0.5);    /* Darker background on focus */
    outline: none;              /* Optional: Remove focus outline */
}

#itemtitle::placeholder {
    text-align: center;         /* Center the placeholder text */
	color: #FFF;
}



/* InfoBox container */
#ImageURL {
    position: absolute;        /* Position relative to the document */
    top: 42%;               /* 10% from the bottom of the viewport */
    left: 50%;                 /* Center horizontally */
    width: 70vw;                /* Set the width of the InfoBox */
   transform: translateX(-50%);   /*Center horizontally */
	z-index: 51;               /* Adjust z-index to layer correctly */
	visibility: hidden;
}

/* Input field inside InfoBox */
#imageurl {
   width: 100%;				 /* Make the input take up full width of the parent */
    height: auto;              /* Set the height to 50% of the viewport height */
    font-size: 2.3vh;          /* Adjust text size */
    padding: 1vh;              /* Padding for input */
    border: 0px solid #FFF; /* Border color */
    background-color: rgba(0, 0, 0, 0);  /* Black color with 0 transparency */
    color: #fff;               /* White text */
    text-align: center;          /* Left-align text inside the input */
    font-weight: normal;       /* Normal text */
    border-radius: 8px;        /* Optional: rounded corners */
    outline: none;             /* Remove outline */
    box-sizing: border-box;    /* Ensures padding doesn't affect width calculation oesn't affect width*/ 
	
}

#imageurl:focus {
    background-color: rgba(0, 0, 0, 0.5);     /* Darker background on focus */
    outline: none;              /* Optional: Remove focus outline */
}

#imageurl::placeholder {
    text-align: center;         /* Center the placeholder text */
	color: #FFFFFF;
}



#Add_Pic
{ 
    position: absolute; 
    top: 18%;
	left: 50%;  /* Center horizontally */
    transform: translateX(-50%);  /* Adjust for proper centering */
    /*background-color: rgba(0, 0, 0, .7);  Semi-transparent background*/ 
    border-radius: 8px;  /*Rounded corners*/ 
    /*padding: 7px 7px 5px 7px;  Padding for better readability*/ 
	width: 100%;  /* 80% of the viewport width */
    height: auto;  /* 40% of the viewport height */
	z-index: 51;
    display: none; /* Hide the entire container and its children */
}

#addPic
{ 
    position: absolute; 
    top: 0%;
	left: 50%;  /* Center horizontally */
    transform: translateX(-50%);  /* Adjust for proper centering */
    width: 70%;  /* 80% of the viewport width */
    height: auto;  /* 40% of the viewport height */
	z-index: 52;
    visibility: visible;
}
#addPic img
{
    width: 100%;
    height: auto;
}

#takeApic
{ 
    position: absolute; 
    top: 25%;
	left: 5%;  /* Center horizontally */
    /*transform: translateX(-50%);   Adjust for proper centering */
    /*background-color: rgba(0, 0, 0, .7);  Semi-transparent background*/ 
    border-radius: 8px;  /*Rounded corners*/ 
    /*padding: 7px 7px 5px 7px;  Padding for better readability*/ 
	width: 40%;  /* 80% of the viewport width */
    height: auto;  /* 40% of the viewport height */
	z-index: 52;
    visibility: visible;
}
#takeApic img
{
    width: 100%;
    height: auto;
}

#openPic
{
    position: absolute; 
    top: 25%;
	right: 5%;  /* Center horizontally */
    /*transform: translateX(-50%);   Adjust for proper centering */
    /*background-color: rgba(0, 0, 0, .7);  Semi-transparent background*/ 
    /*border-radius: 8px;  Rounded corners*/ 
    /*padding: 7px 7px 5px 7px;  Padding for better readability*/ 
	width: 40%;  /* 80% of the viewport width */
    height: auto;  /* 40% of the viewport height */
	z-index: 52;
    visibility: visible;
}
#openPic img
{
    width: 100%;
    height: auto;
}



#InfoWindowOffline
{ 
    position: absolute; 
    top: 18%;
	left: 50%;  /* Center horizontally */
    transform: translateX(-50%);  /* Adjust for proper centering */
    /*background-color: rgba(0, 0, 0, .7);  Semi-transparent background*/ 
    border-radius: 8px;  /*Rounded corners*/ 
    /*padding: 7px 7px 5px 7px;  Padding for better readability*/ 
	width: 30vw;  /* 80% of the viewport width */
    height: auto;  /* 40% of the viewport height */
	z-index: 51;
    visibility: hidden;
}

#InfoWindowOffline img
{
    width: 100%;
    height: auto;
}


#no_image { 
    position: absolute; 
    top: 18%;
	left: 50%;  /* Center horizontally */
    transform: translateX(-50%);  /* Adjust for proper centering */
    /*background-color: rgba(0, 0, 0, .7);  Semi-transparent background*/ 
    border-radius: 8px;  /*Rounded corners*/ 
    /*padding: 7px 7px 5px 7px;  Padding for better readability*/ 
	width: 30vw;  /* 80% of the viewport width */
    height: auto;  /* 40% of the viewport height */
	z-index: 51;
    visibility: hidden;
}
#no_image img {
    width: 100%;
    height: auto;
}

#fullimage { 
    position: absolute; 
    top: 0%;  /* Move the container up to 12% from the top of the screen */
    left: 50%;  /* Center horizontally */
    transform: translateX(-50%);  /* Adjust for proper centering */
	z-index: 53;
    visibility: hidden;
}
#fullimage img {
    width: 36px; 
    height: auto;
}

#imageContainer {
    position: absolute;
    top: 14%;  /* Move the container up to 12% from the top of the screen */
    left: 50%;  /* Center horizontally */
    transform: translateX(-50%);  /* Adjust for proper centering */
    width: 100vw;  /* 80% of the viewport width */
    height: 30vh;  /* 40% of the viewport height */
    border-radius: 15px;  /* Add rounded corners to the container */
    background-color: transparent;   /* Remove the white background */
    display: none;
    justify-content: center;  /* Center image horizontally */
    align-items: center;  /* Center image vertically */
    overflow: hidden;  /* Hide any overflow from the image */
    z-index: 51;
}

#mainimage {
    /*max-width: 80%;   Ensure it doesn't exceed the container's width */
    /*max-height: 80%;  Ensure it doesn't exceed the container's height */
    z-index: 52;
    object-fit: contain;  /* Ensures the image fits within the container while maintaining aspect ratio */
    /*width: 100%;   This ensures that the image is resized to fit the container */
    /* height: 100%; This ensures that the image is resized to fit the container */
    border-radius: 10px;  /* Add rounded corners to the image */
    position: absolute;  /* Set the position to relative to allow the shadow effect */
    /*box-shadow: 4 3px 5px rgba(0, 0, 0, 0.9);   Adds a dark shadow around the image */
}






/* Image container */
#PinContainer {
  position: absolute;
  top: 5px;  /* Adjust for 5% from the top of the viewport */
  right: 7px; /* Adjust for 6% from the right */
  width: 5vh;
  height: 5vh;
  display: none; /* Start with the container hidden */
  
}

#PinContainer img {
 
	width: auto;  /* Image should fill the container */
  height: 80%;  /* Image should scale with the container's height */
	left: 50%;  /* Center horizontally */
     transform: translate(+36%, +20%);  /* Adjust for proper centering */ 
  display: block;
  
}

#IframePinEdit { 
    position: absolute; 
    z-index: 51;
    visibility: hidden;
}
#IframePinEdit img {
    width: 100%;  /* Image should fill the container */
  	height: auto;  /* Image should scale with the container's height */
	left: 50%;   
    transform: translateX(0%);  
}


#PhotoCredits {
    position: absolute;
    top: 30px; /* Adjust as needed */
    left: 50%; /* Set the left position to 50% */
    transform: translateX(-50%);  /*Center horizontally */
	text-align: center;  /* Align text to the l*/
	
    font-weight: normal;
    font-family: 'Roboto Condensed', 'sans-serif';
    text-shadow: 4px 4px 4px rgba(0, 0, 0, 0.9); /* Add text shadow */
    color: #8C8C8C; /*Yellow text for better contrast */
    z-index: 51; /* Ensure it's on top */
    visibility: hidden;
}




#link_image { 
    position: absolute; 
    top: 18vh; 
    left: 50%; /* Set the left position to 50% */
    transform: translateX(-50%);  /*Center horizontally */
	z-index: 51;
    visibility: hidden;
}
#link_image img {
    width: auto; 
    height: 6vh;
}

#DeleteImage { 
     position: absolute; 
    width: 20vw;  /* 30% of the viewport width */
    height: 10vh;  /* 40% of the viewport height */
    left: 50%; /* Center horizontally */
    transform: translateX(-50%); /* Center horizontally */
    z-index: 51;
    visibility: hidden;
}
#DeleteImage img {
    width: 100%;  /* Make the image fill the container's width */
    height: auto; /* Make the image fill the container's height */
}

#IframeSave { 
    position: absolute; 
    width: 20vw;  /* 30% of the viewport width */
    height: 10vh;  /* 40% of the viewport height */
    left: 50%; /* Center horizontally */
    transform: translateX(-50%); /* Center horizontally */
    z-index: 51;
    visibility: hidden;
}

#IframeSave img {
    width: 100%;  /* Make the image fill the container's width */
    height: auto; /* Make the image fill the container's height */
}


#IframeEdit { 
    position: absolute; 
    bottom: 20px; 
    left: 50%; /* Set the left position to 50% */
    transform: translateX(-50%);  /*Center horizontally */
    z-index: 51;
    visibility: hidden;
}
#IframeEdit img {
    width: auto; 
    height: 3.4vh;
}

#IframeClose { 
    position: absolute; 
    width: 20vw;  /* 30% of the viewport width */
    height: 10vh;  /* 40% of the viewport height */
    left: 50%; /* Center horizontally */
    transform: translateX(-50%); /* Center horizontally */
    z-index: 60;
    visibility: hidden;
}
#IframeClose img {
     width: 100%;  /* Make the image fill the container's width */
    height: auto; /* Make the image fill the container's height */
}




#IframeExit { 
    position: absolute; 
    width: 20vw;  /* 30% of the viewport width */
    height: 10vh;  /* 40% of the viewport height */
    left: 50%; /* Center horizontally */
    transform: translateX(-50%); /* Center horizontally */
    z-index: 51;
    visibility: hidden;
}
#IframeExit img {
     width: 100%;  /* Make the image fill the container's width */
    height: auto; /* Make the image fill the container's height */
}


#Latitude,
#Longitude,
#InfoBox
{
    position: absolute;
    left: 50%; /* Center horizontally within parent container */
    transform: translateX(-50%); /* Adjust for proper centering */
    font-size: 2.3vh;
    font-weight: normal;
    font-family: 'Roboto Condensed', sans-serif;
    text-shadow: 4px 4px 4px rgba(0, 0, 0, 0.9);
    color: #FFFFFF;
    text-align: center;
    z-index: 52;
    visibility: hidden;
}

#Pinlatitude
{
    position: absolute;
    bottom: 122px; /* Adjust as needed */
    right: 10px; /* Set the left position to 50% */
    font-size: 24px;
    font-weight: normal;
    font-family: 'Roboto Condensed', sans-serif;
    text-shadow: 4px 4px 4px rgba(0, 0, 0, 0.9); /* Add text shadow */
    color: #FFFFFF; /* Yellow text for better contrast */
    background-color: rgba(0, 0, 0, .6); /* Semi-transparent background */
    border-radius: 8px; /* Rounded corners */
    padding: 5px 5px 5px 5px; /* Padding for better readability */
    z-index: 5; /* Ensure it's on top */
    visibility: hidden;
}

#Pinlongitude
{
    position: absolute;
    bottom: 79px; /* Adjust as needed */
    right: 10px; /* Set the left position to 50% */
    font-size: 24px;
    font-weight: normal;
    font-family: 'Roboto Condensed', sans-serif;
    text-shadow: 4px 4px 4px rgba(0, 0, 0, 0.9); /* Add text shadow */
    color: #FFFFFF; /* Yellow text for better contrast */
    background-color: rgba(0, 0, 0, .6); /* Semi-transparent background */
    border-radius: 8px; /* Rounded corners */
    padding: 5px 5px 5px 5px; /* Padding for better readability */
    z-index: 5; /* Ensure it's on top */
    visibility: hidden;
}


/* Input field inside InfoBox */
#infobox {
    width: 100%;               /* Full width of the parent container */
    /*height: 15vh;               40% of the viewport height */
    font-size: 2.3vh;        /*  Font size relative to the viewport height */
    padding: 1vh;              /* Padding for input */
    border: 0px solid #FFF0; /* White border */
    background-color: rgba(0, 0, 0, 0);  /* Black color with 0 transparency */
    color: #fff;               /* White text */
    text-align: left;          /* Left-align text inside the input */
    font-weight: normal;       /* Normal text */
    border-radius: 8px;        /* Rounded corners */
    outline: none;             /* Remove outline */
    box-sizing: border-box;    /* Include padding in width calculation */
    resize: vertical;          /* Allow vertical resizing */
    overflow: auto;            /* Make it scrollable when content overflows */
    white-space: pre-wrap;     /* Preserve newlines */
    font-family: Arial, sans-serif; /* Set the font to Arial */
	
}

/* Focus styling */
#infobox:focus {
    background-color: rgba(0, 0, 0, 0.5); 
    outline: none;
}

#infobox::placeholder {
    text-align: center;         /* Center the placeholder text */
	color: #FFF;  
	line-height: 15vh;          /* Vertically center placeholder */
}







/*//////////////////////////////////////////////////////////////*/

/* Camera Modal Styles */
#cameraModal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: none;  /* Initially hidden */
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.9); /* Semi-transparent background */
    z-index: 111; /* Ensure the modal has a high z-index */
}

/* Camera Container */
.camera-container {
    position: relative;
    width: 100%;
    height: 100%;
    max-width: 600px;
    max-height: 800px;
}

/* Camera Stream */
#cameraStream {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensure the video covers the full area without distortion */
}

/* General button styles for modal */
.modal-button {
    position: absolute;
    width: 150px; /* Adjust width as per preference */
    height: 50px; /* Adjust height as per preference */
    font-size: 18px;
    border-radius: 5px; /* Slight rounding to make them rectangular with soft edges */
    background-color: rgba(0, 0, 0, 0.9); /* Black background with 80% transparency */
    border: 1.5px solid #ff3300; /* Orange border with 1.5px thickness */
    color: #fff; /* White text color */
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Capture Button - Keep text inside */
#captureButton {
    bottom: 10px;
    right: 10px;
    z-index: 81;
    width: 150px; /* Button width */
    height: 40px; /* Button height */
    background-color: rgba(0, 0, 0, 0.0); /* Black background with 90% transparency */
    border-radius: 10px; /* Rounded corners */
    border: 3px solid #FF3300; /* Orange border with 2px thickness */
    color: white; /* Text color for the button */
    font-size: 18px; /* Text size */
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Dark shadow on the text */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.7); /* Shadow on the border */
}

/* Switch Camera Button */
#switchCameraButton {
    bottom: 10px;
    left: 10px;
    z-index: 81;
    background-image: url('images/switchCam.png'); /* Set image path for switch camera */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 35px; /* 40px square */
    height: 35px; /* 40px square */
    border-radius: 8px; /* Rounded corners */
    background-color: rgba(0, 0, 0, 0.0); /* Transparent black background with 90% opacity */
    border: none; /* No border */
}

/* Rotate Camera Button */
#rotateButton {
    bottom: 10px;
    left: 70px; /* 60px gap from switch camera button */
    z-index: 81;
    background-image: url('images/rotateCam.png'); /* Set image path for rotate button */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 35px; /* 40px square */
    height: 35px; /* 40px square */
    border-radius: 8px; /* Rounded corners */
    background-color: rgba(0, 0, 0, 0.0); /* Transparent black background with 90% opacity */
    border: none; /* No border */
}

/* Close Camera Button */
#closeButton {
    top: 7px;
    right: 10px;
    z-index: 81;
    background-image: url('images/closeCam.png'); /* Set image path for close button */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 35px; /* 40px square */
    height: 35px; /* 40px square */
    border-radius: 8px; /* Rounded corners */
    background-color: rgba(0, 0, 0, 0.0); /* Transparent black background with 90% opacity */
    border: none; /* No border */
}

/* Button hover effect */
.modal-button:hover {
    /*background-color: rgba(255, 102, 0, 0.8);  Orange background on hover */
}

/* Button focus effect (when clicked or tabbed into) */
.modal-button:focus {
    outline: none; /* Remove default focus outline */
    
}



/*/////////////////////////////////////////////////////////////*/


#Confirmation_bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;                /* Full width of the viewport */
    height: 100vh;               /* Full height of the viewport */
    background-color: rgba(0, 0, 0, .02);
    pointer-events: auto;
    z-index: 65; /* or no z-index set */
	visibility: hidden;
}

#DeleteItemConfirm_btn { 
   position: absolute; 
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);  
	
    z-index: 66;
    visibility: hidden;
}


#DeleteItemConfirm_btn img {
    width: calc(max(10vw, 20vh)); 
    height: auto;
}



#RemoveConfirm_btn { 
   position: absolute; 
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);  
	
    z-index: 66;
    visibility: hidden;
}


#RemoveConfirm_btn img {
     width: calc(max(10vw, 20vh)); 
    height: auto;
}

#DeleteConfirm_btn { 
    position: absolute; 
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);  
	
    z-index: 66;
    visibility: hidden;
}
#DeleteConfirm_btn img {
    width: calc(max(10vw, 20vh)); 
    height: auto;
}

#CopyConfirmed { 
    position: absolute; 
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);  
	
    z-index: 66;
    visibility: hidden;
}
#CopyConfirmed img {
    width: calc(max(10vw, 20vh)); 
    height: auto;
}

#FileSaveConfirm { 
    position: absolute; 
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);  
	
    z-index: 66;
    visibility: hidden;
}

#FileSaveConfirm img {
    width: calc(max(10vw, 20vh)); 
    height: auto;
}

#OverwriteConfirm_btn { 
    position: absolute; 
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);  
	
    z-index: 66;
    visibility: hidden;
}
#OverwriteConfirm_btn img {
    width: calc(max(10vw, 20vh)); 
    height: auto;
}

#ServerBusyConfirm_btn { 
    position: absolute; 
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);  
	
    z-index: 66;
    visibility: hidden;
}

#ServerBusyConfirm_btn img {
    width: calc(max(10vw, 20vh)); 
    height: auto;
}

#ServerBusyDeleteConfirm_btn { 
    position: absolute; 
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);  
	
    z-index: 66;
    visibility: hidden;
}

#ServerBusyDeleteConfirm_btn img {
    width: calc(max(10vw, 20vh)); 
    height: auto;
}

#FileDeleteConfirm { 
    position: absolute; 
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);  
	
    z-index: 66;
    visibility: hidden;
}

#FileDeleteConfirm img {
    width: calc(max(10vw, 20vh)); 
    height: auto;
}

#PasswordRequires { 
   position: absolute; 
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);  
	z-index: 66;
    visibility: hidden;
}

#PasswordRequires img {
    width: calc(max(15vw, 30vh)); 
    height: auto;
}

#Saving { 
    position: absolute; 
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);  
	
    z-index: 66;
    visibility: hidden;
}

#Saving img {
    width: calc(max(10vw, 20vh)); 
    height: auto;
}

#SavingMov { 
    position: absolute; 
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);  
	
    z-index: 67;
    visibility: hidden;
}

#SavingMov img {
    width: calc(max(10vw, 20vh)); 
    height: auto;
}
#Deleting { 
    position: absolute; 
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);  
	
    z-index: 66;
    visibility: hidden;
}

#Deleting img {
    width: calc(max(10vw, 20vh)); 
    height: auto;
}

#DeletingMov { 
    position: absolute; 
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);  
	
    z-index: 67;
    visibility: hidden;
}

#DeletingMov img {
    width: calc(max(10vw, 20vh)); 
    height: auto;
}