:root {
  --default-font: "Roboto",  system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --heading-font: "Nunito",  sans-serif;
  --nav-font: "Poppins",  sans-serif;
  //--bs-body-font-family: "Roboto",  system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;

  
}
@font-face {
    font-family: "FontAwesome";
    src: url("/fontawesome/webfonts/fa-solid-900.woff2") format("woff2"),
         url("/fontawesome/webfonts/fa-solid-900.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}  
	
/* Make the scrollbar narrow */
::-webkit-scrollbar {
    width: 8px;
}

/* Hide the scrollbar track */
::-webkit-scrollbar-track {
    background: transparent;
}

/* Make the thumb very subtle */
::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);  /* Transparent black */
    border-radius: 10px;  /* Rounded thumb */
}

::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, 0.5);  /* Darker on hover */
}

	
			
			.btn-sm, .btn-outline-primary {
				border-radius:0.8rem !important;
			}

			#main-itinerary, #section-main{
				height:100vh;
			}
			#offcanvasMap {
				height:100vh;
			}
			#reservation-partner .card:hover {
				filter: brightness(0.9);
			}
			#reservation-partner .card {
				transition: all 0.3s ease;
				min-height:40px;
				
				
			}			
			.booking-logo{
				height:60px;
			}
			.pac-container {
				background-color: #FFF;
				z-index: 200004 !important;
				position: fixed;
				display: inline-block;
				float: left;
			}	
			.z-toast {
				z-index:200006 !important;
			}
			.toast .btn-close {
				filter: invert(1);
			}			
			.sticky-top{
				z-index: 1020;
			}
			.z-btnmap{
				z-index:200000;
			}
			.z-modal{
				z-index:200003 !important;
			}
			.z-offcanvas{
				z-index:200001 !important;
			}	
			.z-navbar{
				z-index:200002 !important;
			}	
			form.svelte-bz0zu3.svelte-bz0zu3, form.svelte-bz0zu3.svelte-bz0zu3:focus-within, form.svelte-bz0zu3.svelte-bz0zu3:hover {
			  width: 100%;
			  max-width: 100%;
			  height:30px;
			}	
			form.svelte-bz0zu3.svelte-bz0zu3 input {
			  height:35px;
			}				
			.active-arrow {

				-webkit-transform: rotate(90deg);    
				-moz-transform: rotate(90deg);        
				-o-transform: rotate(90deg);          
				-ms-transform: rotate(90deg);         
				transform: rotate(90deg);
				
			}

			.active-arrow.collapse:not(.show) {
				display: inline;
				-webkit-transform: rotate(0deg);     
				-moz-transform: rotate(0deg);        
				-o-transform: rotate(0deg);          
				-ms-transform: rotate(0deg);   
				transform: rotate(0deg);
			}	
			#tab_explore .position {
				display:none;
			}
			#offcanvasMap {
				width:100%;
				
			}
			.timedistance{
				font-size:0.7rem;
				color:grey;
			}
			.input-title {
				outline:0;
				width:80%;
				cursor:pointer;
			}

		
			.boxshadow-left {
			  bottom: 0;
			  box-shadow: inset 1.25rem 0 1rem -1rem rgba(0,0,0,.2);
			  left: 0;
			  pointer-events: none;
			  position: absolute;
			  right: 0;
			  top: 0;
			  z-index: 10;
			}	
			.shadow-box {
			  background-color: var(--surface-color);
			  padding: 50px 40px;
			  box-shadow: 0px 10px 50px rgba(0, 0, 0, 0.1);
			  border-radius: 10px;
			  transition: all 0.3s ease-out 0s;
			}	

			@media (max-width: 768px) { 
				#offcanvasMap, #map_canvas, #tab_content_map {
					height:100%;
					box-shadow: 0 .5rem 1rem rgba(0,0,0,.15) !important;
				}
				.map-height-30 {
					height:30vh !important;
				}
				.map-height-100 {
					height:100vh !important;
				}				
			}			
			@media (min-width: 768px) { 
				#offcanvasMap {
					width:35%;
					height:100vh;
				}
				#map_canvas, #tab_content_map {
					height:100vh;
				}
				#tab_content_map {
					margin-top:-50px;
					z-index:3;
				}
				#offcanvasMap.offcanvas-top {
					right:0;
					left:auto; 
				}
			}
			@media (min-width: 992px) {
				#offcanvasMap {
					width:40%;
					height:100vh;
				}	
			}			
			@media (min-width: 1200px) {
				#offcanvasMap {
					width:50%;
				}	
			}
			#bottomNavbar {
				
				padding:10px 0px;
				background-color:#333;
				font-size:1.5rem;
				color:#fff;
			}
			.label-number {
				height:30px;
				width:30px !important;
				text-align: center !important;
				font-weight: 600 !important;
				transform: translate(-50%,-50%) !important;
				left: 0 !important;
				top: 50% !important;
				position: absolute !important;
				box-shadow: 0 .125rem .25rem rgba(0,0,0,.075) !important;
				border-radius:50%;
				padding: 0 !important;
				line-height:1.7;
			}
			.label-starttime {
				text-align: center !important;
				font-size: 0.65rem !important;
				transform: translate(-50%,-50%) !important;
				left: 0 !important;
				top: 20% !important;
				position: absolute !important;
				box-shadow: 0 .125rem .25rem rgba(0,0,0,.075) !important;
				line-height:1.7;
				z-index:2;
			}
			.label-endtime {
				text-align: center !important;
				font-size: 0.65rem !important;
				transform: translate(-50%,-50%) !important;
				left: 0 !important;
				position: absolute !important;
				box-shadow: 0 .125rem .25rem rgba(0,0,0,.075) !important;
				line-height:1.7;
				z-index:2;
			}			
			#nav-date a:hover {
			
				cursor: pointer;
				/*font-weight:500 !important;*/
				
			}	
			
			.addsuggestion {
				cursor: pointer;
			}
			.handle{
				cursor: grab;
			}

			.place-card{
			  
			  background-color:#FFF;
		
			}
			.place-card-size{
				min-height:50px;
			}			
			.place-card-size2{
				min-height:110px;
			}
			.place-card i:hover{
			  color:#000000 !important;
			}			
			.place-card:hover, .place-card:focus {
				background-color:#ededed !important;
				
			}
            .place-card .btn:active {
				border-color:transparent !important;
			}

			.label-number {
				color:white;
			}
			.label-day {
			  position: relative;	
			}
			.label-day2 {
			  position: relative;	
			}					
			.label-day::before {
			  content: "";
			  position: absolute;
			  left: 7%;
			  bottom: 0px;
			  width: 150px;
			  height: 14px;
			  transform: skew(-15deg) translateX(-3%);
			  opacity: 0.2;
			  z-index: 0;
			}
			.label-day2::before {
			  content: "";
			  position: absolute;
			  left: 7%;
			  bottom: 0px;
			  width: 75px;
			  height: 14px;
			  transform: skew(-15deg) translateX(-3%);
			  opacity: 0.2;
			  z-index: 0;
			}		
			.chart-food {
				background-color: #FF6384;
			}

			.chart-accommodation, .chart-accomodation  {
				background-color: #36A2EB;
			}

			.chart-transportation, .chart-transport {
				background-color: #FFCE56;
			}

			.chart-drink {
				background-color: #4BC0C0;
			}

			.chart-activity {
				background-color: #9966FF;
			}

			.chart-shopping {
				background-color: #FF9F40;
			}

			.chart-health {
				background-color: #FFCD56;
			}

			.chart-other {
				background-color: #C9CBCF;
			}			
			
			#bottomNavbar a {
				text-decoration: none;
				letter-spacing:2px;
			}
			#bottomNavbar div {
				font-size:9px;
			}
			.btn-day, .btn-day:active {
				border:0 !important;
			}
			.description {
			  font-size:0.8rem;
			  white-space:break-spaces;
			}
			.cat-title {
				  content: "";
				  display: block;
				  color:#ffffff;
				 position-relative;
				  background-image: url(/media/bg-pinceau-bleu.png);
				  background-repeat: no-repeat;
				  background-size: cover;
				  background-position: center;
				  font-family: var(--heading-font) ! important;
				  top: -1%;
				  left: -6%;
				  right: -11%;
				  bottom: -23%;
				  width: auto;
				  z-index: -1;
		
			}
			.card-title {
				font-family: var(--heading-font) ! important;	
			}
			.cardbudget-form{
				text-decoration:none;
			}
			.bg-type {
				font-size:0.8rem;			
				background-color:#333;
				position:absolute;
				width:30px;
				height:32px;
				color:white;
				right:8px;
				font-size:1rem;
				font-family:FontAwesome;
			}
			[data-icon="place"]:before {
				font-family:FontAwesome;
				content: "\f3c5";
			}
			[data-icon="activity"]:before {
				content: "\f14e";
			}			
			[data-icon="accomodation"]:before {
				content: "\f236";
				font-size:0.75rem;	
			}			
			[data-icon="food"]:before {
				content: "\f2e7";
			}								
			.img-card {
				min-height:110px;
				max-height:150px;
			}
			

			.field i, .field2 i{
			  width: 50px;
			  font-size: 20px;
			  text-align: center;
			}
			.field.active i, .field2.active i{
			  color: #7d2ae8;
			}
.icons a{
  display: inline-flex;
  align-items: center;
  border-radius: 50%;
  justify-content: center;
  transition: all 0.3s ease-in-out;
} 
			
.content .icons a{
  height: 50px;
  width: 50px;
  text-decoration: none;
  border: 1px solid transparent;
  margin-right:10px;
}
.icons a i{
  transition: transform 0.3s ease-in-out;
}
.icons a:nth-child(1){
  color: #1877F2;
  border-color: #b7d4fb;
}
.icons a:nth-child(1):hover{
  background: #1877F2;
}
.icons a:nth-child(2){
  color: #000;
  border-color: #333;
}
.icons a:nth-child(2):hover{
  background: #000;
}
.icons a:nth-child(4){
  color: #e1306c;
  border-color: #f5bccf;
}
.icons a:nth-child(4):hover{
  background: #e1306c;
}
.icons a:nth-child(3){
  color: #25D366;
  border-color: #bef4d2;
}
.icons a:nth-child(3):hover{
  background: #25D366;
}
.icons a:nth-child(5){
  color: #0088cc;
  border-color: #b3e6ff;
}
.icons a:nth-child(5):hover{
  background: #0088cc;
}
.icons a:hover{
  color: #fff;
  border-color: transparent;
}
.icons a:hover i{
  transform: scale(1.2);
}
.scroll-margin {
   scroll-margin-top:60px;
}
.scroll-margintop {
   height:55px;
}
.url-link{
	margin-top:8px;
	margin-bottom:8px;
	font-size:0.8rem;
}
.svg-loader {
  margin-top: 100px;
  width: 100px;
  height: 100px;
  margin: 20px;
  display:inline-block;

}
.planner-hidden {
	display:none;
}
#print-logo{
	display:none;
}
.leaflet-top{
	top: 50% !important; /* Position the buttons vertically in the center */
	transform: translateY(-50%) !important; /* Adjust to center the buttons perfectly */
}
.leaflet-right .leaflet-control-zoom {
    position: absolute;
    right: 10px; /* You can adjust this value based on your map container's width */

}
.leaflet-routing-container  {
    display:none;
}

.pricing .pricing-tem {
  background-color: var(--surface-color);
  box-shadow: 0px 0 30px rgba(0, 0, 0, 0.1);
  padding: 40px 20px;
  text-align: center;
  border-radius: 4px;
  position: relative;
  overflow: hidden;
  transition: 0.3s;
  height: 100%;
}
.pricing .price {
  font-size: 36px;
  color: var(--heading-color);
  font-weight: 600;
  /*font-family: var(--heading-font);*/
}
.pricing .featured {
  width: 200px;
  position: absolute;
  top: 18px;
  right: -68px;
  transform: rotate(45deg);
  z-index: 1;
  font-size: 14px;
  padding: 1px 0 3px 0;
  background: #4154f1;
  color: #fff;
}
.pricing ul {
  padding: 0;
  list-style: none;
  color: var(--default-color);
  text-align: center;
  line-height: 26px;
  font-size: 16px;
  margin-bottom: 25px;
}
.pricing .price span {
  color: color-mix(in srgb, #000, transparent 50%);
  font-size: 16px;
  font-weight: 300;
}
.blur {
  box-shadow: inset 0 0 2px #fefefed1;
  -webkit-backdrop-filter: saturate(200%) blur(30px);
  backdrop-filter: saturate(200%) blur(20px);
  background-color: hsla(0,0%,100%,.8) !important;
}
.shadow-blur {
  box-shadow: inset 0 0 1px 1px hsla(0,0%,100%,.9),0 20px 27px 0 rgba(0,0,0,.05) !important;
}
.mt-n6 {
  margin-top: -2.5rem !important;
}
.bg-gray-100 {
  background-color: #f8f9fa !important;
}

.compact-1 .photo-section {
	display:none !important;
}

.compact-1 .place-card-size2 {
	min-height:20px;
}

.select-icon {
	display: flex;
	align-items: center;
}
.select-icon i {
	margin-right: 10px;
}
.color-palette {
	width:280px;
	display: grid;
	grid-template-columns: repeat(7, 1fr); /* 10 colors per row */
	gap: 10px; /* Space between squares */
}
.color-box {
	width: 30px;  /* Width of each color box */
	height: 30px; /* Height of each color box */
	display: flex;
	align-items: center;
	justify-content: center;
	color: white; /* Text color */
	font-weight: bold;
	border-radius: 1px; /* Rounded corners */
	position: relative;
}
.color-box:hover::after {
	content: attr(data-hex);
	position: absolute;
	bottom: 5px;
	left: 50%;
	transform: translateX(-50%);
	background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent background */
	color: white; /* Text color */
	padding: 2px 5px; /* Padding for the tooltip */
	border-radius: 3px; /* Rounded corners */
	font-size: 12px; /* Font size */
}

.color-box i {
	color: white; /* Icon color */
	display: none; /* Initially hide the icon */
}
.color-box.selected i {
	display: block; /* Show icon when selected */
}
.gap-distancetime {
	font-size:0.7rem;
	color:grey;
}

.filter-button-container {
    background: rgba(255, 255, 255, 0.8);
    padding: 10px;
    border-radius: 50%;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

#filterButton {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}


			@media print {
			  /* All your print styles go here */
			  #header,#footer,#left-navbar,#nav-date,.action-bar,.nav,#boxshadow-left,#nav,#bottomNavbar,#rightside-nav,.gm-control-active,.modal-backdrop,#shareModal,#btnReorderDays, .no-print {
				display: none !important;
			  } 
				#main-itinerary, #section-main,#offcanvasMap {
					height:auto !important;
					margin-left:auto !important;
					margin-right:auto !important;
				}
				#section-main {
					width:100% !important;
				}
				#offcanvas,#offcanvasMap,#offcanvas-end{
				   position: relative !important;
				   display:block !important;
				   height:auto !important;
				   page-break-before:always !important;
				   width:100% !important;
				   
				}
				#tab_map {
					page-break-before:always !important;
					box-shadow:none !important;
				}
				picture img {
				    visibility: hidden !important;
					height:300px !important;
				}
				#print-logo{
					display:block !important;
				}
				#offcanvasMap {
						display:none !important;
				}
				.no-break {
					page-break-inside: avoid;
					break-inside: avoid; /* For newer browsers */
				}				
				
			 }