/* Header Styles */
header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color: #222222;
    z-index: 1;
    padding: 10px;
}

/* Map Container Styles */

/* Body and HTML Reset Styles */
body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
    background-color: #225222;
}

/* Leaflet Map Styles */
.leaflet-container {
    background: #222222;
    outline: 0;
}

/* Leaflet Control Layers Styles */
.leaflet-control-layers {
    position: absolute;
    bottom: 10px;
    left: 10px;
    z-index: 1000;
    background-color: white;
    padding: 10px;
    border-radius: 4px;
    border: 1px solid #ccc;
}

/* Custom Map Control Image Styles */
.leaflet-control-image {
    background-image: url("../img/switchmap-edd97354.png");
    background-size: contain;
    background-repeat: no-repeat;
    width: 70px;
    height: 70px;
    cursor: pointer;
    position: absolute;
    bottom: 10px;
    left: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
    border: 2px solid #fff;
    border-radius: 50%;
    overflow: hidden;
    transition: all 0.3s ease;
}

.leaflet-control-image:hover {
    border-color: #ccc;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
}



/* Leaflet.Draw Control Styles */
.leaflet-draw-toolbar {
    background-color: #fff;
    border: .8px solid #ccc;
    border-radius: 4px;
    padding: 5px;
}

.leaflet-draw-toolbar a {
    color: #333;
    background-color: #f5f5f5;
    border: .8px solid #ccc;
    padding: 5px 10px;
    margin: 5px;
    text-decoration: none;
    border-radius: 3px;
}

.leaflet-draw-toolbar a:hover {
    background-color: #ddd;
}

/* Styles for Drawn Shapes */
.leaflet-draw-shape {
    stroke: #3388ff;
    fill-opacity: 0.2;
    fill: #3388ff;
}

.leaflet-draw-shape:hover .leaflet-draw-handle {
    background-color: #3388ff;
}

/* Styles for Delete and Save Buttons */
.leaflet-draw-edit-remove {
    background-color: #ff6666;
    color: #fff;
    border: .8px solid #cc0000;
    border-radius: 3px;
    padding: 3px 6px;
    text-align: center;
    cursor: pointer;
}

.leaflet-draw-edit-remove:hover {
    background-color: #cc0000;
}

.leaflet-draw-edit-save {
    background-color: #66cc66;
    color: #fff;
    border: .8px solid #339933;
    border-radius: 3px;
    padding: 3px 6px;
    text-align: center;
    cursor: pointer;
}

.leaflet-draw-edit-save:hover {
    background-color: #339933;
}

/* Autocomplete Styles */
.ui-autocomplete {
    max-height: 200px;
    overflow-y: auto;
    position: absolute;
    background-color: #fff;
    border: .8px solid #ccc;
}

.ui-helper-hidden-accessible {
    display: none !important;
}

.ui-autocomplete li {
    list-style: none;
    padding: 5px;
    cursor: pointer;
}

.ui-autocomplete li.ui-state-focus {
    background-color: #007bff;
    color: #fff;
}

/* Custom Tooltip Styles */
.custom-tooltip {
    min-width: 100px;
    min-height: 10px;
    padding: .8px;
    background-color: white;
    border: .8px solid #ccc;
    border-radius: 5px;
    font-size: 10px;
}

/* Marker Icons for PVP and PVE */
.marker-icon-red {
    width: 13px;
    height: 13px;
    background-color: red;
    border-radius: 50%;
}

.marker-icon-green {
    width: 13px;
    height: 13px;
    background-color: green;
    border-radius: 50%;
}

/* Styles for screens with a maximum width of 768px (typical for mobile devices) */
@media (min-width: 769px) {
	.selectDropdown {
		display: none;
	}

	
	#container {
		padding-top: 0px; 
		display: grid;
		grid-template-columns: 1fr auto 1fr; /* Adjust column widths as needed */
		gap: 10px; /* Adjust the gap between panels as needed */
		justify-items: center;
		
	}

	#center-panel {
		padding-top: 20px; /* Add padding to the panels as needed */
		border: 1px solid #ccc; /* Add borders or styling as needed */
		width:100%;
	}
	#left-panel,#right-panel {
		padding: 0px; /* Add padding to the panels as needed */
		border: 1px solid #ccc; /* Add borders or styling as needed */
		width:100%;
	}

	#left-panel {
		grid-column: 1 / 2; /* Span the first column */
	}

	#center-panel {
		grid-column: 2 / 3; /* Span the second column */
		display: flex;
		justify-content: center;
		align-items: center;
	}

	#right-panel {
		grid-column: 3 / 4; /* Span the third column */
	}
}

/* Default styling for gamer tags */
#GamerTagList {
	list-style-type: none;
	padding: 0;
}

#GamerTagList li {
	margin: 0;
	padding: 8px;
	background-color: #007bff;
	color: #fff;
	border-radius: 5px;
	margin-bottom: 10px;
	display: inline-block; /* Make each li inline-block */
	margin-right: 10px; /* Add some spacing between li elements */
}

/* Media query for mobile devices */
@media (max-width: 768px) {
/* Hide the list items by default */
	#GamerTagList {
		display: none;
	}
	#center-panel{
		padding-top: 10px; 
	}
}
/* Custom Div Icon Styles */
.english{
     display: flex; /* Use flexbox to center content vertically */
    flex-direction: column; /* Stack items vertically */
    align-items: center; /* Center items horizontally */
    justify-content: center; /* Center items vertically */
    margin: 0px;
    color: black;
    text-align: center;
    white-space: nowrap; 
    text-shadow: -.8px -.8px 0 white, .8px -.8px 0 white, -.8px .8px 0 white, .8px .8px 0 white;
    font-weight: bold;
    font-size: 10px;
 
}
/* Custom Div Icon Styles */
.russian {
     display: flex; /* Use flexbox to center content vertically */
    flex-direction: column; /* Stack items vertically */
    align-items: center; /* Center items horizontally */
    justify-content: center; /* Center items vertically */
    margin: 0px;
    color: black;
    text-align: center;
    white-space: nowrap; 
    text-shadow: -.8px -.8px 0 white, .8px -.8px 0 white, -.8px .8px 0 white, .8px .8px 0 white;
    font-weight: bold;
    font-size: 12px;
}