.octagon {
	width: 27px;
	aspect-ratio: 1;
	--o:calc(50%*tan(-22.5deg));
	clip-path: polygon(
	var(--o) 50%,
	50% var(--o),
	calc(100% - var(--o)) 50%,
	50% calc(100% - var(--o))
	);
	//background: #3B8686;
}
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
.hexagon { 
	stroke: #333; stroke-width: 1; fill-opacity: 0.6; 
}
	/* Fit body to viewport height and width */
html, body {
	font-size: 14px;
	color: #fff;
height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;	//display: flex;
	justify-content: center; /* Center content horizontally */
	align-items: center; /* Center content vertically */
	font-family: Museo Sans Cyrl, sans-serif;
}
/* Example content styling */
.content {
	text-align: center;
}
.fade-in {
	animation: fade-in 2s linear infinite;
}
@keyframes fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}
#map {
	//position: fixed;
	
	font-size: 14px;
	//top: 9%;
 //top: 0;
  left: 0;
  width: 100vw;
  //height: 100vh;	
  background:#a3bbff;
	z-index:1;
	height: calc(var(--vh, 1vh) * 100);
	//overflow:hidden;
}
.label-container {
	cursor: pointer;
	font-weight: bold;
	display: flex;
	align-items: center;
	user-select: none;
	margin: 10px 0;
}
.arrow {
	margin-right: 5px;
	transition: transform 0.3s ease;
}
.arrow.down {
	transform: rotate(90deg);
}
.nested-checkbox {
	margin-left: 20px;
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.5s ease;
}
.show {
	max-height: 200px; /* Adjust based on the content height */
}


.right{
	flex: 4;
	border: 1px solid black;
}
	.left{
	flex: 1;
	border: 1px solid black;
	padding:5px;
	background-color: aliceblue;
	}
.legend i {
	height: 25px;
	width: 25px;
	border-radius: 50%;
	display: inline-block;
}
.legend2 {
		position: absolute; 

	background-color: white;
	padding: 10px;
	line-height: 18px;
	color: #555;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
	z-index: 1000; /* Higher z-index to ensure it's above the map */
	margin-bottom: 230px;
}
.legend2 i {
	width: 18px;    /* Define width for color box */
	height: 18px;   /* Define height for color box */
	display: inline-block;
	margin-right: 8px;
	opacity: 0.9;
	border-radius: 3px;
}
.legend7 { 
	position: absolute; 
	bottom: 30px; left: 10px; 
	background: white; 
	padding: 10px; 
	z-index: 1000;  
	color: #555; 
}
.my-div-icon  {
	margin: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	font-size: 10px;
}
.jellyfish-container {
	position: fixed;
	width: 100px; /* Adjust width as needed */
	height: 100px; /* Adjust height as needed */
	padding-left:168px;
	bottom: 0px;
}
.jellyfish {
	position: absolute;
	animation: floatUp 10s linear infinite;
}
@keyframes floatUp {
	0% {
		bottom: 0;
	}
	100% {
		bottom: 100vh;
	}
}
#year-slider { width: 80%; 
	//margin: 20px auto; 
	margin: 49px auto;
	display:none;
}

.wrapper {
  max-width: 90%;
  margin: 3% auto;
  padding: 1%;
  display: flex;
  flex-direction: column;
  gap: 20px; /* Space between the containers */
  position:absolute;
  z-index:1001;
    /*background: rgba(0, 0, 0, 0.6);
	background-color: #ffffff;*/
color: #111111;
  border-radius: 10px;
  

}
/* .container1{ */
	/* font-size:20px; */
	/* max-width: 90%; */
	/* margin: 3% auto; */
	/* padding: 1%; */
	/* position:absolute; */
	/* background: rgba(0, 0, 0, 0.6); /* Black transparent background */ */
	/* border-radius: 10px; /* Curved borders */ */
	/* color: #fff; */
	/* z-index:1000; */
/* } */
.container1 {
  font-size: 20px;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 10px;
  color: #fff;
  padding: 15px;
  	position:absolute;

  z-index: 1000;
  width: 100%;
  box-sizing: border-box;
}


/* #year-checkbox-container { */
	/* font-size:20px; */
	/* overflow-y: auto; */
	/* margin-top: 29%; */
	/* padding: 10px; */
	/* position: absolute; */
	/* height: 35%; */
    /* width: 100%;	 */
	/* background: rgba(0, 0, 0, 0.6); /* Black transparent background */ */
	/* color: #fff; */
	/* border-radius: 8px; */
	/* box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); */
	/* display:none; */
	/* z-index:1000; */
	/* column-count:4; /* Number of columns */ */

/* } */
#year-checkbox-container {
	display: none; /* Change to 'none' if hidden initially */
	z-index: 2000;
  font-size: 20px;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 8px;
  color: #fff;
  padding: 15px;
  height: 34vh;
  max-height: 78vh;
  overflow-y: scroll;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  width: 100%;
  box-sizing: border-box;
  //column-count:4; /* Number of columns */

}
/* Style for each checkbox item */
.checkbox-item {
	display: flex;
	align-items: center;
}
/* Style for checkbox color indicator */
.checkbox-color {
	width: 18px;
	height: 18px;
	margin-right: 5px;
	border-radius: 3px;
}
#year-checkbox-container::-webkit-scrollbar-track{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	border-radius: 10px;
	background-color: darkgrey;
}
#year-checkbox-container::-webkit-scrollbar{
	width: 12px;
	background-color: grey;
}
#year-checkbox-container::-webkit-scrollbar-thumb{
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
	background-color: grey;
}
#incois-logo{
	position: absolute;;
	z-index:1000;
}
.leaflet-top span{
	color:black;
}
#slideTag {
	position: fixed;
	top: 5%;
	right: -150px; /* Start off-screen */
	transform: translateY(-50%);
	padding: 10px 20px;
	background: rgba(0, 0, 0, 0.6); /* Black transparent background */
	color: white;
	font-weight: bold;
	font-size: 16px;
	border-radius: 8px 0 0 8px; /* Rounded left corner */
	cursor: pointer;
	transition: right 0.9s ease-in-out;
	white-space: nowrap; /* Prevent text wrapping */
	z-index:1000;
	font-size: 30px;
	font-family: serif;
}
.north-arrow {
	position: absolute;
	top: 13%; /* Adjust based on desired placement */
	right: 13%; /* Adjust based on desired placement */
	z-index: 2000;
	transform: translate(0, -50%); /* Optional: centers the element vertically */
}
@media (max-width: 768px) { /* For tablets and smaller */
	#map {
		top: 15%; /* Adjust for smaller screens */
		right: 10%;
	}
}
/* @media (max-width: 600px) { */
  /* .checkbox-container { */
		/* max-width: 90%; */
		/* padding: 15px; */
	/* } */
/* } */
/* @media (max-width: 480px) { /* For phones */ */
	/* .north-arrow { */
		/* top: 20%; */
		/* right: 15%; */
	/* } */
/* } */
/* @media (max-width: 600px) { */
	/* .container1 { */
		/* //width: 23%; */
		/* margin-left: 0; */
		/* padding: 10px; */
	/* } */
	/* .jellyfish-container { */
		/* bottom: 20px; */
		/* left: calc(50% - 50px); /* Center horizontally */ */
	/* } */
	/* #year-checkbox-container { */
		/* width: 100%; */
		/* left: 0; */
	/* } */
/* } */
/* /* Medium screen adjustments */ */
/* @media (max-width: 1024px) { */
	/* .container1 { */
		/* width: 23%; */
		/* padding: 15px; */
		/* margin:43px 0; */
		/* //margin-left: 6%; */
	/* } */
	/* #year-checkbox-container { */
		/* height: 400px; */
	/* } */
/* } */


.border1{
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border: 10px solid black;
	height:95%;
	width:78%;
	position: absolute;
	z-index: 1000;
}

/* Style the main scale container */
.leaflet-control-scale {
	border-top: 2px solid black; /* Top border */
	border-left: 2px solid black; /* Left border */
	border-right: 2px solid black; /* Right border */
	border-bottom: none;          /* Remove bottom border */
	background: none;             /* Remove background */
	box-shadow: none;             /* Remove any default box shadow */
	padding: 0;                   /* Remove padding */
	margin-bottom: 10px;                    /* Remove margin */
}
/* Style the horizontal scale line */
.leaflet-control-scale-line {
	position: relative;
	top: -16px;          /* Move text closer to the top of the line */
	text-align: center;     /* Center-align the text */
	font-size: 12px;        /* Adjust text size */
	font-weight: bold;      /* Bold font for scale text */
	color: black;           /* Text color */
	background: none;       /* Remove background for the text */
}
/* Style the actual horizontal line */
.leaflet-control-scale-line-inner {
	background-color: black; /* Horizontal line color */
	height: 2px;             /* Horizontal line thickness */
}
/* Optional: Hide any additional box lines */
.leaflet-control-scale-line:not(.leaflet-control-scale-line-inner) {
	border: none;
}
.grid-label {
	font-size: 12px;
	font-weight: bold;
	color: black;
	background-color: white;
	padding: 2px 4px;
	border: 1px solid black;
	border-radius: 3px;
	white-space: nowrap;
}
.legend,.legend6 {
		position: absolute; 
	
	background-color:white;
	border-radius:5px;
	padding:10px;
	// margin-left: 529px;
	// margin-bottom: 119px;
	color:black;
	font-weight:600;
}
[id^="legend-checkbox"] {
	display:none;
}
.toggle-wrap {
	padding: 10px;
	position: relative;
	cursor: pointer;
	float: left;
	/*disable selection*/
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	z-index: 1000;
}
.toggle-bar,
.toggle-bar::before,
.toggle-bar::after,
.toggle-wrap.active .toggle-bar,
.toggle-wrap.active .toggle-bar::before,
.toggle-wrap.active .toggle-bar::after {
	-webkit-transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
}
.toggle-bar {
	width: 38px;
	margin: 10px 0;
	position: relative;
	border-top: 6px solid #303030;
	display: block;
}
.toggle-bar::before,
.toggle-bar::after {
	content: "";
	display: block;
	background: #303030;
	height: 6px;
	width: 38px;
	position: absolute;
	top: -16px;
	-ms-transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	transform: rotate(0deg);
	-ms-transform-origin: 13%;
	-webkit-transform-origin: 13%;
	transform-origin: 13%;
}
.toggle-bar::after {
	top: 4px;
}
.toggle-wrap.active .toggle-bar {
	border-top: 6px solid transparent;
}
.toggle-wrap.active .toggle-bar::before {
	-ms-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}
.toggle-wrap.active .toggle-bar::after {
	-ms-transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}
#loader {
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	z-index: 9999;
	text-align: center;
	display:none;
	vertical-align: middle;
	color: #fff;
	//background: url('images/jelly-fish.gif') 50% 50% no-repeat;
}
#loader img {
	width: 150px;  /* Adjust width as needed */
	height: auto;   /* Maintain aspect ratio */
}
.leaflet-popup-tip-container {
display: none;
}
.navbar {
  background-color: #333; 
}

.navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding:5px 16px;
  text-decoration: none;
}

.subnav {
  float: left;
  overflow: hidden;
}

.subnav .subnavbtn {
  font-size: 16px;  
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.navbar a:hover, .subnav:hover .subnavbtn {
  background-color: DeepSkyBlue;
}

.subnav-content {
  display: none;
  position: absolute;

  background-color: DeepSkyBlue;
  
  z-index: 1;
}

.subnav-content a {
	display:block;
  
  color: white;
  text-decoration: none;
}

.subnav-content a:hover {
background-color: #eee;
  color: black;
}

.subnav:hover .subnav-content {
  display: block;
}

#main{
margin: auto;
  width: 60%;

  padding: 10px;
}
card{
    border-radius: 4px;
    background: #fff;
    box-shadow: 0 6px 10px rgba(0,0,0,.08), 0 0 6px rgba(0,0,0,.05);
      transition: .3s transform cubic-bezier(.155,1.105,.295,1.12),.3s box-shadow,.3s -webkit-transform cubic-bezier(.155,1.105,.295,1.12);
  padding: 14px 80px 18px 36px;
  cursor: pointer;
}

.card:hover{
  transform: scale(1.05);
box-shadow: 0 10px 20px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.06);
}

/* #incois-header-content{ */
	/* margin:auto; */
	/* width:50% */
/* } */
/* #incois-header{ */
	/* height: 9%; */
	/* background-color:lightgrey; */
/* } */
.hr-on-dark{
  border: none;
  height: 1px;
  background: rgba(255,255,255,0.12); /* faint white glow on dark bg */
  margin: 1rem 0;
}