/* ---------- Website Wide Default ---------------- */
/* *                               { font-family: 'Karla', sans-serif; color: #333; } */
/* body                            { background-color: #f1f1f1; } */

body                            { background-color: #383838; 
                                  font-family: 'Inter', sans-serif; 
                                  color: #fff; 
                                  font-size: 0.9rem;
                                }

.ecolor                         { color: #8ec547; }     /* emphasis text color */

fieldset                        { border-radius: 5px; 
                                  border-width: 1px;
                                }
										
.alignment_table,
.alignment_table th,
.alignment_table td             { border-style: none;
				  border-collapse: collapse; 
                                  text-align: left;									  
				}
													
table				{ width: 100%; }
table, th, td 			{ border-style: none;
				  border-collapse: separate; 
                                  border-spacing: 2px;
				  text-align: center;
				}
.col_record_type		{ min-width: 200px;	width: 200px; }
.col_datetime			{ min-width: 200px;	width: 200px; }
.col_lon			{ min-width: 120px;	width: 120px; }
.col_lat			{ min-width: 120px;	width: 120px; }
.col_alt			{ min-width: 120px;	width: 120px; }
.col_note			{ min-width: 200px; }	
.cell_note			{ text-align: left; padding-left: 0.5rem; }

hr                  		{ border: none;
				  height: 1px;
				  background-color: #333; 
				}
                                
select                          { color: #fff;
                                  background-color: #383838; 
                                }
                                
input[type="number"]            { color: #fff;
                                  background-color: #383838;
                                  border: 1px solid #fff;
                                }
                                
input[type="text"]              { color: #fff;
                                  background-color: #383838;
                                  border: 1px solid #fff;
                                }

.menuButton                     { background-color: #383838;
                                  color: #fff;
                                  border: 1px solid #fff;
                                  border-radius: 3px;
                                  cursor: pointer; 
                                }
                                
.menuButton:hover               { background-color: #00cccc;
                                   
                                }

.menuRibbonContainer            { display: flex; 
                                  justify-content: center;
                                }
                                
.menuRibbon 			{ display: inline-flex; 				/* Enables flexbox for the container */
				  justify-content: center;
				  gap: 10px;    				/* Adds space between elements */
				  margin-bottom: 10px;
				  border-style: none;
				  box-shadow: inset 0 0 8px #ccc;
				  padding: 10px;
				  border-radius: 5px;
				}
													
.menuRibbon label 		{ margin-right: 5px; }

.banner				{ display: flex; 				/* Enables flexbox for the container */
				  justify-content: center;                      /* align-items: center;  */
				  gap: 10px;                                    /* Adds space between elements */
				  margin-bottom: 10px;
				  border-style: none;
				  box-shadow: inset 0 0 8px #ccc;
				  padding: 5px;
				  border-radius: 5px;
				  color: White;
				  background-color: #00cccc;
				  z-index: 2;
				}

input[type="submit"]		{ color: Green;
				  cursor: pointer; 
				  width: 75px;
				  margin-top: 7px;
                                  font-size: 1.1rem;
				}
													
#buttonReset			{ cursor: pointer; 
				  width: 75px;
				  margin-top: 7px;
                                  /* font-size: 1.1rem; */
				}

.mapAndInfo			{ display: flex; 				/* Enables flexbox for the container */
				  justify-content: center;
				  gap: 10px;    				/* Adds space between elements */
				  margin-bottom: 10px;
				  border-style: none;
				  box-shadow: inset 0 0 8px #ccc;
				  padding: 10px;
				  border-radius: 5px;
                                  height: 60vh;
                                  min-height: 400px;
                                  position: relative; /* Required for positioning the handle */
				}

.mapBox				{ width: 100%;
				  height: 100%;
				  border-radius: 5px;
				  border-style: none;
				  z-index: 1;
				}

.infoBox			{ width: 450px; 
				  border-radius: 5px;
				  border-style: none;
				  padding: 2px;
                                  overflow: auto;
                                  overflow-wrap: break-word;
				  z-index: 1;
				}

.infoBox p                      { text-align: left;
				  margin: 10px auto 10px auto;
				  padding-right: 5px;
				  width: inherit;
				}
													
.infoBox img			{ display: block; 
				  margin: 0 15px 5px 0;
				  max-width:100%;
				  max-height:150px;
                                  border-radius: 5px;
				}

.infoBox table,
.infoBox table td		{ text-align: left;
                                  vertical-align: top;
				  padding: 2px 5px 2px 5px;
				  border-style: none;                                  
				}
                                
/* Sortable Table */
table.sortable                  { background-color: #383838; 
                                  border-radius: 5px;}
table.sortable th,
table.sortable td               { padding: 2px 2px 2px 2px;
                                  border-radius: 3px;
                                }

table.sortable th               { background-color: #383838;
                                  text-transform: uppercase;
                                }

th.ascending, 
th.descending, 
table.sortable th:hover         { background-color: #fff; 
                                  cursor: pointer;
                                }


/* Arrows for table sorting */
th.ascending:after              { font-size: 60%;
                                  content: '\25B2';
                                  color: #8ec547;
                                  float: inherit;
	                          padding: 0px 0px 0 0;
                                }

th.descending:after             { font-size: 60%;
                                  content: '\25BC';
                                  float: inherit;
                                  color: #8ec547;
	                          padding: 0px 0px 0 0;
                                }                                

.recordTableArea                { display: block; 				/* Enables flexbox for the container */
				  justify-content: center;
                                  overflow-x: auto; 
				  gap: 10px;    				/* Adds space between elements */
                                  margin-top: 10px;
				  margin-bottom: 10px;
				  border-style: none;
				  box-shadow: inset 0 0 8px #ccc;
				  padding: 10px;
				  border-radius: 5px;
                                }

table.sortable tbody tr:hover   { background-color: #00cccc; /* Change to your desired highlight color */
                                  cursor: pointer; /* Optional: changes the cursor to a hand icon */
                                }

/* Map Button Styling */
.leaflet-bar button             { background-color: #fff;
                                  border: none;
                                  cursor: pointer;
                                  width: 30px;
                                  height: 30px;
                                  line-height: 30px;
                                  display: block;
                                  text-align: center;
                                  text-decoration: none;
                                  color: black;
                                  font-size: 1.2rem;
                                }

.leaflet-bar button:hover       { background-color: #00cccc; }

.leaflet-bar a                  { color: #000;              /* Color of the +/- symbols */
                                  background-color: #fff;   /* Background color of the buttons */
                                }

/* Change the hover and active state colors for better user experience */
.leaflet-bar a:hover,
.leaflet-bar a:active           { background-color: #00cccc; }

/* The handle at the bottom of the div */
 #handle                        { width: 100%;
                                  border: none;
				  height: 3px;
				  background-color: #777777; 
                                  cursor: ns-resize; /* North-South resize cursor */
                                }
                                
#handle:hover                   { background-color: #00cccc; }