/*
###############################################################################################################################################################
© 2017 Franck Durand
All Rights Reserved
THIS WORK CONTAINS TRADE SECRET AND PROPRIETARY INFORMATION WHICH ARE THE PROPERTY OF FRANCK DURAND OR ITS LICENSORS AND IS SUBJECT TO LICENSE TERMS.
###############################################################################################################################################################

CSS Selectors
	* HTML element selector: element name. Ex: p {text-align: center; color: red;}
	* HTML id selector: "#" + id. Ex: #map
	* HTML class selector: "." + class name. Ex: .Sidebar
CSS naming rules
	* Base rules:
		- class name: lowercase_names_with_underscore
		- variable name: UPPERCASE_NAMES. "-" is unsupported!
	* BEM rules: block__element--modifier (https://openclassrooms.com/fr/courses/6106181-simplifiez-vous-le-css-avec-sass/6595809-creez-des-selecteurs-html-avec-la-methodologie-bem)
With Eclipse CTRL+SPACE to get the syntax auto suggestion (Preference>Web>CSS>editor>contentAssist)

*/		  

/* Make visible the focus (for debugging)
/* input:focus {background-color: yellow;}  */

/* Hyperlinks */
a:link {
  color: var(--COLOR_ACTION_50);
  background-color: transparent;
  text-decoration: none; /*underline*/
}

a:visited {
  color: var(--COLOR_ACTION_50);/*before blue*/
  background-color: transparent;
  text-decoration: none;
}

a:hover {
  color: var(--COLOR_ACTION_50);/*red*/
  background-color: transparent;
  text-decoration: underline;
  
}

a:active {
  color: white;
  background-color:var(--COLOR_SURFACE_30);/* A VERIFIER URGENT*/
  text-decoration: underline;
}

/* */
.w3-deep-orange, .w3-hover-deep-orange:hover{
	color:#fff!important;
	background-color:var(--COLOR_ACTION_50)!important;
	/* background-image: linear-gradient(to right, var(--COLOR_ACTION_40), var(--COLOR_ACTION_60)); */
}
.w3-orange,.w3-hover-orange:hover{
	color:#fff!important;
	background-color:var(--COLOR_ACTION_60)!important;
}
.w3-dark-grey,.w3-hover-dark-grey:hover{
	color:#fff!important;
	background-color:var(--COLOR_SURFACE_10)!important;
}
.w3-grey,.w3-hover-grey:hover{
	color:#fff!important; /* color:#000!important; */
	background-color:var(--COLOR_SURFACE_40)!important;
	background-image: initial;
}
.w3-light-grey,.w3-hover-light-grey:hover{
	color:#000!important;
	background-color:var(--COLOR_SURFACE_60)!important
}
.w3-white,.w3-hover-white:hover{
	color:#000!important;
	background-color:var(--WHITE)!important
}

.w3-btn, .w3-btn-block{
	border-radius: var(--BUTTON_BORDER_RADIUS);
	cursor:pointer;
}

.w3-btn:hover,.w3-btn-block:hover,.w3-btn-floating:hover,.w3-btn-floating-large:hover{
	box-shadow: var(--FORM_SHADOW_WHITE);
	/* box-shadow:0 1px 20px 0 hsl(var(--SHADE_SURFACE),var(--SAT_SURFACE),70%); */
	/*0 6px 20px 0 rgba(255,255,0,0.9);*/
}

 .poi_list_table .w3-btn {
	height: 22px;
    padding: 5px 10px;
	} 

/* style for a symbol*/
.x-symbol {
 	color:var(--WHITE);
	/*font-size:.88rem;*/
	/*top:-0.15rem; in this case, padding--botton doesn't function*/
	padding-left: 0.20rem;
	height:100%;
	position: relative;
  	top:-2px;
	/* position:absolute;*/  	                 
}
input{
	/* color: var(--COLOR_ACTION_50); */
	background-color: transparent;
	border: none;
	font-size: 0.75rem;
    font-weight: bold;
}

/*style for a checkbox in the POIS list*/
input[type=checkbox] {
  	position: relative;
	border: 0.12rem solid var(--COLOR_ACTION_50);
	border-radius: 0.12rem;
	background: var(--COLOR_SURFACE_10);
	cursor: pointer;
	line-height: 0;
	/*margin: 0 .6em 0 0;*/
	outline: 0;
	padding: 0 !important;
	/* vertical-align: text-top; */
	height: 0.80rem;
	width: 0.80rem;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
  	opacity: 1;
}

input[type=checkbox]:hover {
  opacity: 1;
}

input[type=checkbox]:checked {
  background-color:var(--COLOR_ACTION_50);
  opacity: 1;
}

input[type=checkbox]:before {
  content: '';
  position: absolute;
  right: 50%;
  top: 50%;
  width: 0.16rem/*4px*/;
  height: 0.46rem/*10px*/;
  border: solid var(--COLOR_SURFACE_10);
  border-width: 0 2px 2px 0;
  /* margin: -0.5px -0.5px 0 -0.5px; */
  transform: rotate(45deg) translate(-50%, -50%);
  z-index: 2;
}

/* Sélectionne tous les éléments input de type radio */
input[type=radio] {
  /* Supprime les styles par défaut */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  /* Ajoute la taille et la bordure */
  width: 0.7rem;
  height: 0.7rem;
  border: 0.12rem solid var(--COLOR_ACTION_50);
  /* Ajoute le style de la case */
  border-radius: 50%;
  margin-left: 12px;
}

/* Sélectionne les boutons radio cochés */
input[type=radio]:checked {
  /* Change la couleur du point intérieur de la case cochée */
  background-color: var(--COLOR_ACTION_50);
}

.radio-list {
    font-weight: normal !important;
}

 html, body {
    overscroll-behavior-y: contain; /* Disable the pull-to-refresh everywhere on Android+Chrome */
    touch-action: pan-y pan-x; /* Disable the pull-to-refresh everywhere on iOS+Safari */
    overflow: hidden; /* Disable the pull-to-refresh everywhere on iOS+Safari */
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: var(--FONT-FAMILY);
    font-size: 100%;
    background-color: var(--COLOR_SURFACE_10);
    color: var(--COLOR_FONT);
}

/* styles in px Poppins sans serif instead of Segoe UI*/
h1 {
	font-family: var(--FONT-FAMILY);
	font-size:1.06rem;/* 17, 20px / ancienne version : soit 30px ou 1.875 rem (=30px/16px) */
}
h2 {
	/* 3 next lines for truncating a too long text.Ref: https://codepen.io/DesignerAshishOrg/pen/JoYZOB */
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
	font-family: var(--FONT-FAMILY);
	font-size:0.95rem;/* 13,15px / ancienne version :  soit 26px ou 1.63 rem (=26px/16px) */
	/* font-weight: bold; */
	margin: 0rem;
}
h3 {
	font-family: var(--FONT-FAMILY);
	font-size:0.75rem/* 12, 14px / ancienne version :  soit 24px ou 1.5 rem (=24px/16px) */
}
h4 {
	font-family: var(--FONT-FAMILY);
	font-size:0.69rem/* 11, 12px / ancienne version :  soit 20px ou 1.25 rem (=20px/16px) */
}
h5 {
	font-family: var(--FONT-FAMILY);
	font-size:0.63rem/* 10,11px / ancienne version :  soit 18px ou 1.13 rem (=18px/16px) */
}
h6 {
	font-family: var(--FONT-FAMILY);
	font-size:0.56rem/* 9, 10px / ancienne version :  soit 16px ou 1 rem (=11px/16px) */
}

/*
###############################################################################################################################################################
LEGAL INFORMATION
###############################################################################################################################################################
*/

/* title {
	display: block!important;
    margin: 0 auto;
    text-align: center;
    color: white;
    font-size: 1.5rem;
    padding-top: 1rem;
    font-weight: bold;
} */
.editorial h1 {
	/* display: block!important; */
    margin-top: 9rem;
    text-align: center;
    color: white;
    font-size: 1.125rem;
    padding-top: 0.5rem;
    font-weight: bold;
}
.editorial h1:nth-of-type(2) {
	margin-top: 0.5rem !important;
	color: hsl(var(--SHADE_ACTION),var(--SAT_ACTION),50%);
}

.editorial h2 {
	font-size: 1rem !important;/* 17, 20px / old version : or 30px ou 1.875 rem (=30px/16px) */
	/* text-indent: 20px; */
	padding-left: 40px;
    padding-right: 4px;
    /* text-wrap: wrap; */
}

.editorial h3 {
		font-size:0.8125rem !important;/* 13,15px / old version :  or 26px ou 1.63 rem (=26px/16px) */
		/* text-indent: 45px; */
		padding-left: 45px;
    	padding-right: 4px;
	}
.editorial h4 {
		font-size:0.8125rem !important;
		/* text-indent: 125px; */
		padding-left: 60px;
    	padding-right: 4px;
	}

.editorial .info h4 {
		text-indent: 0px !important;
	}

.editorial .info h4 span {
		color:var(--COLOR_SURFACE_70);
	}
	
.info i{
	font-size: 30px;
	padding-top: 30px;
	margin-right: 30px;
	color: hsl(var(--SHADE_SURFACE), var(--SAT_SURFACE), 50%);
	text-align: center;
	width: 20px;
	line-height: 1.5rem;
}

.editorial p {
	/* text-indent: 50px; */
	font-size:0.75rem !important;
	padding: 0 100px;
	text-align: justify;
}
@media screen and (max-width: 896px) {
	.editorial p {
		padding: 0 10%;
	}
}
.editorial ul{
		font-size:0.75rem !important;
		list-style-type:disc !important;
		margin-left: 20px !important;
		padding-left: 150px;
		padding-right: 350px;
	}
@media screen and (max-width: 896px) {
		.editorial ul{
			padding-left: 15%;
			padding-right: 13%;
		}
	}
.editorial li{
		padding-bottom: 10px;
	}

/*Put the word "Display" in the passeword form
.password-container{
	display: flex;
	align-items: center;
}
.toggle-password{
	padding-left: 10px;
}*/

/* How to format a password */
	.password-strength li{
		text-indent: 25px;
		padding-bottom: 0px !important;
		font-size: 0.75rem !important;
	}

	.form h1{ /* title h1 for the New Customer? */
		margin-top: 0rem !important;
		padding-top: 0rem !important;
	}
	.form h4{ /* title h4 for Inscrivez-vous */
		text-indent: 0rem;
		text-align: center;
	}

	form ul{
		color: red;
		padding-left: 0px !important;
		margin-bottom: 0px !important;
		/*margin-left: 0px !important;
		padding-left: 0px !important;
		padding-right: 0px !important; */
	}
	form li{
		list-style-type:none !important;
	}

	/*
###############################################################################################################################################################
	*/

	/* the line*/
	.line-with-text {
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 20px 0;
	}
	.line-with-text::before,
	.line-with-text::after {
		content: '';
		flex: 1;
		border-bottom: 1px solid hsl(var(--SHADE_SURFACE),var(--SAT_SURFACE),30%);
	}
	.line-with-text::before {
		margin-right:1rem;
	}
	.line-with-text::after {
		margin-left: 1rem;
	}
	/* The 2 ways to connect Facebook or Google*/
	.fcb-login {
		display: flex;
		align-items: center;
		/* border: 1px solid #ddd; */
		border-radius: var(--BUTTON_BORDER_RADIUS);
		background-color: hsl(var(--SHADE_SURFACE),var(--SAT_SURFACE),40%)!important;
		margin-bottom: 0.625rem;
  		padding: 0.625rem;
  		text-align: center;
  		text-decoration: none;
  		/* color: #333; */
  		font-weight: bold;
		/*margin: 10px 0;  Ajoute un espace au-dessus et en dessous */
		/* Style supplémentaire si nécessaire */
	}
	.social-icon {
		width: 24px; 
		height: auto;
		margin-right: 0.625rem; 
		margin-left: 6.25rem;
	  }

/*
###############################################################################################################################################################
VARIOUS FORMS
###############################################################################################################################################################
*/

.form-container{
	display: flex;
    justify-content: center;
    align-items: center;
}
.form{
	width: 478px !important;
}

.editorial label{
	width: auto;
	margin-top: 1.5rem;
	margin-bottom: 0rem !important;
}

.form-outline{
	margin-bottom: opx !important;
	margin-top: 1.5rem;
}

.form-control{
	border-radius: var(--BUTTON_BORDER_RADIUS) !important;
	display: block;
    width: 100%;
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #333;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.form-check-label{
	display: flex;
	justify-content: center;
	font-size: 0.8rem;
}

.form-container input[type=checkbox] {
	vertical-align: text-top !important; 
}

.form-check-input:checked[type=checkbox]{
	background-image: none;
}

.form-check-label, .form-check-input {
	display: inline-block;
}

form input[type="submit"]{
	font-size:1rem;
	color:#fff!important;
	background-image: linear-gradient(to right, var(--COLOR_ACTION_40), var(--COLOR_ACTION_60));
	border-radius: var(--BUTTON_BORDER_RADIUS);
	cursor:pointer;
	width: 100%;
	height: 34px;
	margin-top: 1.5rem !important;
	margin-bottom: 0.5rem !important;
	}

.btn-primary{
	font-size:1rem;
	color:#fff!important;
	background-image: linear-gradient(to right, var(--COLOR_ACTION_40), var(--COLOR_ACTION_60));
	border-radius: var(--BUTTON_BORDER_RADIUS);
	cursor:pointer;
	width: 100%;
	height: 34px;
	margin-top: 1.5rem !important;
	margin-bottom: 0.5rem !important;
}

@media screen and (max-width: 896px) and (orientation: portrait){
	.form-container {
		height: auto; /* Height adjustment for small screens */
		width:100%;
		padding: 20px;  
	}

	.editorial label {
		font-size: 1rem;
		/* background-color: #7b54e8; */
		width: 96%; /* Allows label to adapt to container width */
		margin-left: 0; /* Removes the specific offset */
	}

	.form-control {
        width: 100%; /* Allows form fields to extend to full width */
        margin-left: 0; /* Removes the specific offset */
    }

	.form-consent > div:nth-child(1){
		display: flex;
		flex-direction: row-reverse;
	}

    form input[type="submit"] {
        width: 100%; /* Adaptation de la largeur du bouton au conteneur */
        height: auto; /* Ajuste la hauteur pour un meilleur toucher sur les petits écrans */
        padding: 10px 20px; /* Augmente le padding pour un meilleur aspect */
    }
}

/* Tooltips */
.tooltip {
  position: relative;
  display: inline-block;
  /*border-bottom: 0.06rem dotted black;*/
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 7.5rem;/*120px*/
  background-color: darkorange;
  color: #fff;
  text-align: center;
  border-radius: 0.38rem;/*6px*/
  padding: 0.19rem 0rem;/*3px*/
  
  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  top: 100%;
  left: 50%;
  margin-left: 0rem;	/* Originally at -60px centering the tooltip on the text, 0px allowing the see the tooltip even on the extreme left of our Robot table */
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

/*
###############################################################################################################################################################
TABLES
###############################################################################################################################################################
*/

/*table {*/
/* 	   border-collapse: separate;	Collapse for 100% width */
/*     white-space: normal; */
/*     line-height: normal; */
/*     font-weight: normal; */
/*     font-size: small; */
/*     font-style: normal; */
/*     color: -internal-quirk-inherit; */
/*     text-align: start; */
/*     border-spacing: 0.06rem; */
/*     background-color: #f1f1f1; */
/*}*/

/*
###############################################################################################################################################################
IMAGES
###############################################################################################################################################################
*/

/* Images of the POI list */
img.list {
    position: absolute;
    z-index: 1;	/* Put the image in the background compared to the Poi table */
	object-fit: cover;	/* Fit the image in the container associated with the 2 next code lines */
	width: 100%;
    height: 100%;
    /*aspect-ratio: 4/3;  Impose the ratio on all images even in portrait. Not good enough. Ideally 3/2 */
    top: 50%;	/* Center the image in the container */
  	left: 50%;	/* Center the image in the container */
	transform: translate(-50%, -50%);	/* Center the image in the container */
}

/* Container of images for positionning and cropping them */
div.img_container {
	z-index: 0;
	height: 100%;/*calc(100% - 18.5px);	Previously height: 100%; covering the entire table */
	overflow: hidden;	/* Crop (Hide) the part of the image outside of the container */
	position: absolute;
	bottom: 0rem;
    border-top-right-radius: 10px;  /* round top-right corner */
    border-bottom-right-radius: 10px;  /* round bottom-right corner */
	right: 0px;
}
@supports (aspect-ratio: 3/2) {	/* If aspect-ratio is supported (browser < mid 2021, Chrome < v103) */
	div.img_container {
		aspect-ratio: 3/2;	/* Ensure the right ratio and whatever the sidebar size. Ideally 3/2 */
		width: auto;
	}
}
@supports not (aspect-ratio: 3/2) { /* If aspect-ratio is NOT supported (browser < mid 2021, Chrome < v103) */
	div.img_container {
		width: 103px;	/* All attemps to use other technics failed */
	}
}

/*
###############################################################################################################################################################
MAPBOX MAP
###############################################################################################################################################################
*/

/* Always set the map height explicitly to define the size of the div element that contains the map. */
#map {
 	position: absolute;
	margin: 0;
	padding: 0;	
	height: 100%;
	width: 100%;
    border-radius: 25px 0 0 0;
}

/* #map canvas {
	cursor: crosshair;	defined now in the JavaScript code
} */

#features {	/* Window to display the features properties */
    position: absolute;
    top: 40%;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: auto;
    background: rgba(255, 255, 255, 0.8);
    font-size: 11;
}

/* For phones and small screens */
@media screen and (max-width: 896px) {
    #map {
        border-radius: 0;
    }
}

/* Map markers */
.marker_container {
	margin: 0rem;
	visibility: visible;
	opacity: 80%;
}

/* .marker_animation {
	transform-origin: bottom;
} */

.marker_label {	
	font-size: 0rem;
	text-align: center;
	color: black;
	width: 12.5rem;
	position: absolute;
	left: 100%;
	transform: translate(-50%, -50%);
}


/*
###############################################################################################################################################################
DEBUG WINDOW
###############################################################################################################################################################
*/

.debug-window {
	position: fixed;
	bottom: 30px;
	right: 5%;
	width: auto;
	height: auto;
	background-color: var(--COLOR_SURFACE_20);
	border-radius: var(--BUTTON_BORDER_RADIUS);
	z-index: 11 ;
}

.debug-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: var(--COLOR_SURFACE_30);
	padding: 10px;
	cursor: grab;
	border-radius: var(--BUTTON_BORDER_RADIUS);
}

.debug-header:active { cursor:grabbing; }

#debug-title {
	font-size: 1.07rem;
	font-weight: bold;
}


.debug-body {
	padding: 10px;
}

.debug-body p {
	font-size: 0.6rem;
	margin: 0px;
	color:var(--WHITE);
}


/* Small preview swatch */
.debug-colorctl .swatch{width:100%;height:20px;margin-top:6px;border:1px solid #0001;border-radius:6px}
.debug-colorctl label{display:flex;gap:6px;align-items:center;justify-content:space-between;margin:4px 0}


/* Button to get a full screen mode on Android */
/* #fullscreen-btn {
	z-index:5;
	Width: 100%;
	border-radius: var(--BUTTON_BORDER_RADIUS);
} */

.debug-window input[type="range"] {
    height: 10px;
}

.debug-window input[type="range"]::-webkit-slider-thumb {
    width: 20px;
    height: 20px;
}


/*
###############################################################################################################################################################
PLAN MODE
###############################################################################################################################################################
*/

.plan-mode-button svg {
    fill: var(--COLOR_SURFACE_50);  /* = COLOR_PLAN_MODE in JS */
    cursor:pointer;
    width: 16px;
    height: 16px;
}

.plan_mode_button_lock svg, .plan_mode_button_add svg {
	margin-bottom: 7px;
}

.plan_mode_button_delete svg {
	margin-top: 7px;
}

.plan-mode-button:hover svg {
    fill: var(--COLOR_ACTION_50);
    transform: scale(1.5);
}

.tran-mode-button {
	display: flex;
    align-items: flex-end;
    justify-content: flex-end;
	flex-direction: row-reverse;
	color: var(--COLOR_ACTION_50);
    cursor:pointer;
}

/*
###############################################################################################################################################################
SPECIFIC BUTTONS
###############################################################################################################################################################
*/

.info-button {
    border: none;
    font-size: 0.57rem;
    background-color: transparent;
}

.circle-temp {
	position: absolute;
	bottom: 2px;
	right: 2px;
	width: 12px;
	height: 12px;
    border-radius: 50%;
	background-color: white;
  }

/*
###############################################################################################################################################################
UNICODE SYMBOLS
###############################################################################################################################################################
*/

  .black-symbol {
    color: black; /* set text color to black */
    filter: grayscale(100%); /* apply grayscale filter */
  }
  .grey-symbol {
    filter: grayscale(100%) contrast(300%) brightness(400%);
  }
  .white-symbol {
    color: white; /* set text color to white */
    filter: brightness(10000%); /* set brightness to 10000% to make element white */
	padding: 0;
    /* font-size: 15px; */
  }
  
/*
###############################################################################################################################################################
SVG SYMBOLS
###############################################################################################################################################################
*/

#settings-symbol {
	position: relative;
    top: 2px;
    width: 20px;
    height: 20px;
    fill: white;
}

/*
###############################################################################################################################################################
2 gears animated symbol
	- origin: https://www.w3schools.com/howto/howto_js_responsive_navbar_dropdown.asp
	- previously:
		- origin: spinner from https://codepen.io/vineethtrv/pen/NWxZqMM in SCSS
		- & replaced by .spinner
		- animation converted by ChatGPT
###############################################################################################################################################################
*/

#spinner {
	position: absolute;
	display: none;
	width: 200px;
	top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
	fill: #FFFFFF;
}

.small {
  -webkit-animation: counter-rotation var(--TIME1) infinite linear;
	   -moz-animation: counter-rotation var(--TIME1) infinite linear;
	     -o-animation: counter-rotation var(--TIME1) infinite linear;
	        animation: counter-rotation var(--TIME1) infinite linear;
  -webkit-transform-origin: 100.136px 225.345px;
      -ms-transform-origin: 100.136px 225.345px;
          transform-origin: 100.136px 225.345px; }


.medium {
  -webkit-animation: rotation var(--TIME2) infinite linear;
	   -moz-animation: rotation var(--TIME2)  infinite linear;
	     -o-animation: rotation var(--TIME2)  infinite linear;
	        animation: rotation var(--TIME2)  infinite linear;
  -webkit-transform-origin: 254.675px 379.447px;
      -ms-transform-origin: 254.675px 379.447px;
          transform-origin: 254.675px 379.447px; }


@-webkit-keyframes rotation {
    from {-webkit-transform: rotate(0deg);}
    to   {-webkit-transform: rotate(359deg);}
}
@-moz-keyframes rotation {
    from {-moz-transform: rotate(0deg);}
    to   {-moz-transform: rotate(359deg);}
}
@-o-keyframes rotation {
    from {-o-transform: rotate(0deg);}
    to   {-o-transform: rotate(359deg);}
}
@keyframes rotation {
    from {transform: rotate(0deg);}
    to   {transform: rotate(359deg);}
}

@-webkit-keyframes counter-rotation {
    from {-webkit-transform: rotate(359deg);}
    to   {-webkit-transform: rotate(0deg);}
}
@-moz-keyframes counter-rotation {
    from {-moz-transform: rotate(359deg);}
    to   {-moz-transform: rotate(0deg);}
}
@-o-keyframes counter-rotation {
    from {-o-transform: rotate(359deg);}
    to   {-o-transform: rotate(0deg);}
}
@keyframes counter-rotation {
    from {transform: rotate(359deg);}
    to   {transform: rotate(0deg);}
}


/*
###############################################################################################################################################################
TOUR NUMBERS
###############################################################################################################################################################
*/

.custom-marker {
	position: relative;
	width: 100px; /* Adjust the width as per your requirement */
	height: 100px; /* Adjust the height as per your requirement */
}

.marker-background {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
	border-radius: 50%; /* Make the background round */
}

.marker-label {
	position: relative;
	width: 200px; /* Adjust the width as per your requirement */
	height: 100px; /* Adjust the height as per your requirement */
	top: 50%;
	left: 50%;
	transform: translate(-50%, -15%);
	color: rgba(255, 255, 255, 0.3);
	font-size: 70px; /* Adjust the font size as per your requirement */
	font-weight: bold;
	text-align: center;
}


/*
###############################################################################################################################################################
NAVIGATION
###############################################################################################################################################################
*/

.nav-marker {
	width: 36px;
	height: 25px;
	border-radius: 50%;
	cursor: pointer;
	background-color: rgb(0, 174, 255);
    border: 3px solid white; /* white border around the marker */
    box-shadow: 0 0 0 10px rgba(0, 174, 255, 0.3); /* visible halo */
}


/*
###############################################################################################################################################################
CLOSE BUTTON
###############################################################################################################################################################
*/

.close-btn {
    position: absolute;
    right: 10px;
    top: 10px;
	padding: 0;
	font-size: 1.75rem;
	font-weight: bold;
    background-color:rgba(0, 0, 0, 0.5);
    border: none;
    color: var(--WHITE);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.close-btn:hover {
    background: var(--COLOR_ACTION_50);
    transform: rotate(90deg);
}

.close-btn svg {
    transform: rotate(45deg) scale(0.7);
    fill: white;
    width: 27px;
    height: 27px;
}