.my-tooltip {
    background:#fff;
    color: #BE063A;
    font-weight:800;
    font-size:0.85rem;
    border: none;
    box-shadow: none;
}

/* General toggle styling */
.toggle-switch {
    display: none; /* Would be inline-block, but hidden for SM. */
    position: relative; 
}

/* Hide the default checkbox */
.toggle-switch input[type="checkbox"] {
    display: none;
}

/* Style the pill background */
.toggle-pill {
    display: block;
    height: 28px;  /* Adjust as needed */
    width: 50px;   /* Adjust as needed */
    background-color: #ccc; /* Gray when off */
    border-radius: 20px; 
    cursor: pointer;
    transition: background-color 0.3s; 
}

/* Style the circle inside the pill */
.toggle-pill::after {  
    content: "";
    position: absolute;
    top: 3px;      /* Adjust for centering */
    left: 3px;     /* Adjust for centering */
    width: 22px;   /* Adjust as needed */
    height: 22px;  /* Adjust as needed */
    background-color: white;
    border-radius: 50%;
    transition: transform 0.3s;  
}

/* When checked, change pill color and move the circle */
.toggle-switch input[type="checkbox"]:checked + .toggle-pill {
    background-color: #BE063A; /* Color when on */
}

.toggle-switch input[type="checkbox"]:checked + .toggle-pill::after {
    transform: translateX(22px); /* Move circle right */
}

/* Style the text label */
.toggle-label {
    margin-left: 10px;
    font-family: Arial, sans-serif;     
    color: #002856; 
    font-weight:600;
    font-size:1.5rem;
    vertical-align:top;
    display:none; /* Hidden for SM. */
}

/* Just doing this to bring the toggle vertically centred relative to the dropdown on the left. Anal innit. */
#toggle-control {
    padding-top:10px;
    display:none;  /* Hidden for SM. */
}

/* Assuming your polygons have a class like 'region-polygon' */
.region-polygon {
    transition: opacity 0.5s ease-in-out; /* Adjust duration as needed */
    opacity: 1; /* Default to fully visible */
  }
  
  /* Class to apply when the region is hidden */
  .region-polygon-hidden {
    opacity: 0;
}

#filter-control select {
    width: 250px;  
    padding: 12px;  
    border: 1px solid #ccc; 
    border-radius: 4px;  
    background-color: #fff; 
    font-family: Arial, sans-serif;     
    color: #002856;
    font-weight:600;
    font-size: 1.5rem;
    margin-bottom:20px;
    appearance: none;  /* Reset default appearance for custom styling */ 
}

#filter-control select {
    /* ... other styles */ 
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E"); /* Example arrow - replace with your own SVG */
    background-repeat: no-repeat;
    background-size: 12px;         /* Adjust icon size */
    background-position: right 8px center; /* Position it on the right */
  }

  #filter-control select:hover {
    background-color: #f0f0f0; /* Subtle hover effect */  
  }
  
  #filter-control select:focus {
    outline: none;       /* Remove default outline  */  
    box-shadow: 0 0 3px rgba(0, 0, 255, 0.5); /* Example focus effect */ 
  }
  
  /* Styling the dropdown options (very browser-specific, limited) */
  #filter-control option { 
     color: #002856;
     padding-top:5px;
     padding-bottom:5px;
     font-weight:600;
  }


 @media print, screen and (max-width: 900px) {
#filter-control select {
    width: 160px;
	margin-top:20px;
    padding: 12px;  
    border: 1px solid #ccc; 
    border-radius: 4px;  
    background-color: #fff; 
    font-family: Arial, sans-serif;     
    color: #002856;
    font-weight:600;
    font-size: 1.05rem;
    margin-bottom:20px;
    appearance: none;  /* Reset default appearance for custom styling */ 
}   
	 
	 #toggle-control {
	padding-top:30px;
    display:none;  /* Hidden for SM. */	 
	 } 
	 
	.toggle-label {
    margin-left: 10px;
    font-family: Arial, sans-serif;     
    color: #002856; 
    font-weight:600;
    font-size:1rem;
    display:none;  /* Hidden for SM. */
}
 }