@import "font.css";
	/*body {
		font-family: Roboto-Regular;
		margin: 0;
		padding: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		background-image:url(../img/bg-contenu.png);
	}*/

	

	form.needs-validation h2 {
		font-family: Roboto-Medium;
		font-weight: 700;
		letter-spacing: .025em;
		text-transform: uppercase;
		color: #6889c5;
		margin: 25px 0;
		-ms-word-wrap: break-word;
		word-wrap: break-word;
		font-size:23px !important;
	}

	form.needs-validation h3 {
		font-size: 24px;
		text-align: left !important;
		width: 100%;
		float: left;
		margin: 20px auto;
		font-family: Roboto-Bold !important;
	}


	form.needs-validation {	
		padding: 20px;
		border-radius: 8px;
		width: 860px;
	}

	form.needs-validation .starCls{
		font-size: 10px;
		color:red;
		position: relative;
		top: -11px;
	}

	form.needs-validation label {
		display: block;
		margin-bottom: 8px;
		font-family: Roboto-Bold !important;
		width: 24%;
		float: left;
		font-size: 16px;
		padding-top: 11px;
	}

	form.needs-validation label[for="photo"]
	{
	  width: 100%;
	}
		
	form.needs-validation input[type="text"], input[type="email"] {
		width: 71%; 
		padding: 10px 20px !important;
		border: 1px solid #ccc;
		border-radius: 9px;
		box-shadow: 7px 4px 10px rgba(0, 0, 0, 0.1);
		background: #fff;
		height:auto !important;
		margin-bottom: 0;
		font-size: 16px;
        font-weight: normal;
	}

	form.needs-validation select {
	  width: 71%;
	  padding: 12px 20px !important;
	  /*margin-bottom: 16px;*/
	  border: 1px solid #ccc;
	  border-radius: 9px;
	  box-shadow: 7px 4px 10px rgba(0, 0, 0, 0.1);
	  background: #fff;
	}
	
	form.needs-validation input[type="checkbox"] {
		margin-right: 8px;
	}
	
	form.needs-validation input[type="submit"] {
		background-color: #6889c5;
		color: white;
		padding: 10px 35px;
		border: none;
		border-radius: 4px;
		cursor: pointer;
	}
	
	form.needs-validation input[type="submit"]:hover {
		background-color: #6889c5;
	}

	form.needs-validation #layJours {
		background: #b5b7ba24;
		margin-bottom: 15px;
		display: block;
		float: left;
		width: auto;
		margin-right: 2% !important;
		padding: 8px;
		border-radius: 10px;
		color: #090909;
	}
		
	form.needs-validation #layDG_ST_1 {
		background: #b5b7ba24;
		margin-bottom: 15px;
		display: block;
		float: left;
		width: 75%;
		margin-right: 2% !important;
		padding: 8px;
		border-radius: 10px;
		color: #000000;
	}
	
	#layDG_ST_1 label {
		display: block;
		margin-bottom: 2px;
		font-family: Roboto-Bold !important;
		width: 58% !important;
		/* float: left !important; */
		font-size: 16px;
		padding-top: 0px;
		margin-left: 6px;
	}
	
	form.needs-validation #layDG_ST_1 input[type="checkbox"] {
		margin-right: 8px;
		float: inline-start;
		margin-top: 5px;
	}
	
	
	form.needs-validation #layCD_ST_1 {
		background: #b5b7ba24;
		margin-bottom: 15px;
		display: block;
		float: left;
		width: 75%;
		margin-right: 2% !important;
		padding: 8px;
		border-radius: 10px;
		color: #000000;
	}
	
	form.needs-validation #layCD_ST_1 label {
		display: block;
		margin-bottom: 2px;
		font-family: Roboto-Bold !important;
		width: 58% !important;
		/* float: left !important; */
		font-size: 16px;
		padding-top: 0px;
		margin-left: 6px;
	}
	
	form.needs-validation #layCD_ST_1 input[type="checkbox"] {
		margin-right: 8px;
		float: inline-start;
		margin-top: 5px;
	}
	
	
		/********************************************************************/
	
	form.needs-validation .Vt-Cult-Day234 {
		background: #b5b7ba24;
		margin-bottom: 15px;
		display: block;
		float: left;
		width: 60%;
		margin-right: 2% !important;
		padding: 8px;
		border-radius: 10px;
		color: #0b0b0b;
	}
	
	form.needs-validation .Vt-Cult-Day234 label {
		display: block;
		margin-bottom: 2px;
		font-family: Roboto-Bold !important;
		width: 68% !important;
		/* float: left !important; */
		font-size: 16px;
		padding-top: 0px;
		margin-left: 6px;
	}
	
	form.needs-validation .Vt-Cult-Day234 input[type="checkbox"] {
		margin-right: 8px;
		float: inline-start;
		margin-top: 5px;
	}
	
	
	form.needs-validation .Circuit-Day234{
		background: #b5b7ba24;
		margin-bottom: 15px;
		display: block;
		float: left;
		width: 48%;
		margin-right: 2% !important;
		padding: 8px;
		border-radius: 10px;
		color: #0b0b0b;
	}
	
	/********************************************************************/
	
	
	
	form.needs-validation #layDG_ODP_1 {
		background: #b5b7ba24;
		margin-bottom: 15px;
		display: block;
		float: left;
		width: 48%;
		margin-right: 2% !important;
		padding: 8px;
		border-radius: 10px;
		color: #0b0b0b;
	}

	form.needs-validation #layDG_ODP_1 label
	{
		display: block;
		margin-bottom: 8px;
		font-family: Roboto-Bold !important;
		width: 93%;
		float: right;
		font-size: 16px;
		text-align: left;
		height: 18px;
		padding-top:0 !important;
	}
	
	form.needs-validation #layCD_ODP_1 {
		background: #b5b7ba24;
		margin-bottom: 15px;
		display: block;
		float: left;
		width: 66%;
		margin-right: 2% !important;
		padding: 8px;
		border-radius: 10px;
		color: #000000;
	}
	
	form.needs-validation #layCD_ODP_1 label {
		display: block;
		margin-bottom: 2px;
		font-family: Roboto-Bold !important;
		width: 58% !important;
		/* float: left !important; */
		font-size: 16px;
		padding-top: 0px;
		margin-left: 6px;
	}
	
	form.needs-validation #layCD_ODP_1 input[type="checkbox"] {
		margin-right: 8px;
		float: inline-start;
		margin-top: 5px;
	}
	
	form.needs-validation #layDG_AC_1 {
		background: #b5b7ba24;
		margin-bottom: 15px;
		display: block;
		float: left;
		width: 60%;
		margin-right: 2% !important;
		padding: 8px;
		border-radius: 10px;
		color: #0b0b0b;
	}
	
	form.needs-validation #layDG_AC_1 label {
		display: block;
		margin-bottom: 2px;
		font-family: Roboto-Bold !important;
		width: 68% !important;
		/* float: left !important; */
		font-size: 16px;
		padding-top: 0px;
		margin-left: 6px;
	}
	
	form.needs-validation #layDG_AC_1 input[type="checkbox"] {
		margin-right: 8px;
		float: inline-start;
		margin-top: 5px;
	}
	
	form.needs-validation #layCD_AC_1 {
		background: #b5b7ba24;
		margin-bottom: 15px;
		display: block;
		float: left;
		width: 60%;
		margin-right: 2% !important;
		padding: 8px;
		border-radius: 10px;
		color: #0b0b0b;
	}
	
	form.needs-validation #layCD_AC_1 label {
		display: block;
		margin-bottom: 2px;
		font-family: Roboto-Bold !important;
		width: 68% !important;
		/* float: left !important; */
		font-size: 16px;
		padding-top: 0px;
		margin-left: 6px;
	}
	
	form.needs-validation #layCD_AC_1 input[type="checkbox"] {
		margin-right: 8px;
		float: inline-start;
		margin-top: 5px;
	}
	
	form.needs-validation .certifyCss {
		display: flex;
		align-items: center;
		margin-bottom : 25px;
	}
	form.needs-validation .certifyCss label {
		font-size: 14px;
		color:red;
		/*color: #ffb300;*/
		margin-left: 8px; /* Adjust the spacing between the checkbox and the label as needed */
		width: 100%;
	}
	form.needs-validation .layPrice
	{
		color : #fff;
		background: #4caf50;
	}	
	form.needs-validation .category-group {
            font-weight: bold;
            background-color: #ccc;
    }	
    form.needs-validation .one-day-pass {
            background-color: #C0E0FF;
    }
	
/********************************** Days *********************************/
	form.needs-validation .container {
		display: flex;
		justify-content: space-between;
	}
	
	form.needs-validation .days {
		display: flex;
	}
	
	form.needs-validation .day {
		width: 30px;
		height: 25px;
		margin: 5px;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		font-size: 10px;
		position: relative;
		font-family: arial;
		border-radius: 5px;
	}
	form.needs-validation .day:hover {
		/*border: 1px solid black;*/
		box-shadow: 0 0 5px gray;
	}
	.day1 { background-color: #809AB5; }
	.day2 { background-color: #8BA6C2; }
	.day3 { background-color: #9CB9D6; }
	.day4 { background-color: #AECCEA; }
	.day5 { background-color: #B9D8F7; }
	.hidden {
		display: none;
	}
	
	form.needs-validation .day-cancel
	{
		background: #d5d7d7;
		width: 65px;
	}
	
	form.needs-validation .center {
		display: flex;
		/* justify-content: center; */
		align-items: center;
		margin-top: 20px;
		margin-left: 23%;
	}
	form.needs-validation .selected-day {
		width: 30px;
		height: 25px;
		margin: 0 20px;
		display: flex;
		align-items: center;
		justify-content: center;
		color: white;
		/*font-weight: bold;*/
		font-size: 10px;        
		font-family: arial;
		border-radius: 5px;
	}
	
	/********************************** PHOTO *********************************/
	form.needs-validation .form-group {
		/*! display: flex; */
		align-items: center;
		margin-bottom: 30px !important;
		width: 100%;
		float: left;
	}

	form.needs-validation .inline-container {
		/* margin-left: 10px; */ /* Adjust the margin as needed */ 
		text-align: -webkit-center;
	}

	form.needs-validation #myphoto {
		max-width: 100px; /* Adjust the width as needed */ 
		max-height: 100px; /* Adjust the height as needed */
	}
	
	/*******************************************************/
	form.needs-validation #floatingPrice 
	{
	   	position: fixed; /* Makes the div stay in place while scrolling */
	   	top: 80% !important; /* Positions the div at the top of the page */
	   	right: 20px; /* Positions the div on the right side */
	   	background-color: #6889c5 !important; /* Background color */
	   	padding: 10px 20px; /* Padding for better appearance */
	   	border-radius: 5px; /* Rounded corners */
	   	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Adds a shadow */
	   	font-size: 12px; /* Font size */
	   	z-index: 1000; /* Ensures it stays on top of other elements */
	   	text-align: center;
	   	width:250px;
	   	color: #efebeb;
	   }

	
	form.needs-validation #floatingPrice h3
	{
	  width: auto;
	  float: left;
	  display: inherit;
	}
	
	form.needs-validation #floatingPrice #price
	{
	  font-size: 21px;
	  text-align: left !important;
	  margin: 20px auto;
	  font-family: Roboto-Bold !important;
	  color: #fdf9f9;
	}

	form.needs-validation #floatingPrice #price span
		{
	  font-size: 14px;
	  text-align: left !important;
	  margin: 20px auto;
	  font-family: Roboto-regular !important;
	  width:100% !important;
	  float:left;
	  color: #fffcfc;
	  padding: 0px 10px 10px 10px;
	}

/************************** class ajouter **************************/

/************************ table ************************************/
form.needs-validation .tablevisite
{
	width:100%;
	margin-top:20px;
}

form.needs-validation .tablevisite td
{
	height:0px;
}

form.needs-validation .td-first
{
	width:50%;
	background-color: #dededefc;
	min-height:200px;
	padding:20px;
	color:#000;
	border-radius: 10px 0 0 10px !important;
	
}

form.needs-validation .td-last
{
	width:50%;
	background-color: #dededefc;
	min-height:200px;
	padding:20px;
	color:#000;
	border-radius: 0 10px 10px 0 !important;
}

/************************** Label  **************************/
form.needs-validation .submit
{
	float:left;width: 100%;text-align: center;
}

 
 form.needs-validation .compte
 {
  float: left;
  width: 100%;
  background-color: #6889c5;
  text-align: center;
  border-radius: 10px;
  padding: 11px 30px;
  margin: 20px 0 40px 0 !important;
}

form.needs-validation .compte .parte-membre
{
	width:80%;
	float:left;
}

form.needs-validation .compte .logout
{
	width:20%;
	float:left;
	color:#fff !important;
	text-align:right;
	padding: 15px 0 0 0
}

form.needs-validation .compte .logout a {
  color: #6889c5 !important;
  background: #fff;
  padding: 5px;
  border-radius: 5px;
}


form.needs-validation .compte .logout a::after
{
    content: url('../img/logaot2.png');
	display: inline-block;
  width: 35px;
  height: 15px;
  margin-right: 5px;
}

form.needs-validation .compte h3 {
  color: #fff !important;
  width: auto !important;
  margin: 0;
  padding: 10px;
}

form.needs-validation .compte h3:before {
    content: url('../img/member.png');
	display: inline-block;
  width: 35px;
  height: 15px;
  margin-right: 5px;
}

form.needs-validation .compte .logged
{ 
   color: #fff;
   float:left;
   padding: 20px 0 0 30px;
}

form.needs-validation .invalid-feedback {
  padding-left: 24% !important;
}

/*****************************************************/
	.myradio {
        position: absolute;
    }
	
	.checkmark {
        position: absolute;
        top: 0;
        left: 0;
        height: 25px;
        width: 25px;
        background-color: #eee;
        border-radius: 50%;
    }

    .myradio:hover input ~ .checkmark {
        background-color: #ccc;
    }

    .myradio input:checked ~ .checkmark {
        background-color: #007bff;
    }

    .checkmark:after {
        content: "";
        position: absolute;
        display: none;
    }

    .myradio input:checked ~ .checkmark:after {
        display: block;
    }

    .myradio .checkmark:after {
        top: 9px;
        left: 9px;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: white;
    }
	
/********************************************************/

.mycheckbox {
    position: relative;
    padding-left: 35px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default checkbox */
.mycheckbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Create a custom checkbox */
.checkbox-checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #eee;
    border-radius: 4px; /* Slightly rounded corners for checkboxes */
}

/* On mouse-over, add a grey background color */
.mycheckbox:hover input ~ .checkbox-checkmark {
    background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.mycheckbox input:checked ~ .checkbox-checkmark {
    background-color: #007bff;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkbox-checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.mycheckbox input:checked ~ .checkbox-checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.mycheckbox .checkbox-checkmark:after {
    left: 9px;
    top: 5px;
    width: 7px;
    height: 12px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

/**********************************************************/

.visit-controls {
    display: block;
    width: 100%;
}

.visit-options {
    margin-bottom: 15px;
    display: block;
}

.checkbox-label {
    display: inline-block;
    margin-right: 20px;
    cursor: pointer;
}

.tab-checkbox {
    margin-right: 5px;
}

.tabs-container {
    display: block;
    width: 100%;
    clear: both;
}

.tab-content {
    display: none;
    padding: 15px;
    /* border: 1px solid #ddd; */
    border-radius: 4px;
    margin-top: 10px;
    background: #b5b7ba24;
}

.radio-options {
    margin-top: 10px;
}

.radio-option {
    display: block;
    margin-bottom: 5px;
}

/* Show TECH content when its checkbox is checked */
#visiteckb_tech:checked ~ .tabs-container #layCR_TECH_1 {
    display: block;
}

/* Show CULT content when its checkbox is checked */
#visiteckb_cult:checked ~ .tabs-container #layCR_CULT_1 {
    display: block;
}

/* Optional: style for checked checkbox */
.tab-checkbox:checked + span {
    font-weight: bold;
    color: #0066cc;
}

.companion_1Css
{
	color: #33489D;
}

.companion_2Css 
{
    padding: 15px;
    border-radius: 8px;
    background-color: #b5b7ba24;
}

.daysCircuit2
{
	background:#e9ecef9c; 
	border-bottom: #fffbfb solid 2px;
}

.daysCircuit3
{
	background:#e9ecef78; 
	border-bottom: #fffbfb solid 2px;
}

.daysCircuit4
{
	background:#e9ecef54; 
	border-bottom: #fffbfb solid 2px;
}

/***************************layCompanion_2************************************************/
#layCompanion_2 label
{
	width: 36%;!;!importan;
}

#layCompanion_2 input[type="text"] {
  width: 60% !important;
  margin-bottom: 30px;
}

/************************************** POPUP infobull **************************************/
   .popup {
	    display: none;
		position: absolute;
		background-color: white;
		border: 3px solid #cccccc26;
		padding: 10px;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
		z-index: 1000;
		border-radius: 10px;
    }
	
	.popup-content {
		font-style: italic;
		font-size: 13px;
		color: #686a6b;
    }

    /* Info Icon (!) - moved outside .popup */
    .info-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 18px;
        height: 18px;
        background: #3498db;
        color: white;
        border-radius: 50%;
        font-size: 12px;
        font-weight: bold;
        cursor: pointer;
        transition: background 0.2s;
        margin-left: 5px;
    }

    .close {		
		cursor: pointer;
		color: #106dab;
		float: right;
		margin-top: -10px;
		margin-right: -5px;
		font-size : 18px;
    }
	
	@media only screen and (max-width: 768px) 
{
	


	body  form.needs-validation 
	{
		padding:15px;
	}
	
	form.needs-validation  
	{
		width:100% !important;
	}
	
	form.needs-validation label {
		width:100%;
	}
	
	form.needs-validation input[type="text"],
	form.needs-validation input[type="email"],
	form.needs-validation select {
		width: 100%;
	}
	
	#floatingPrice #price span {
  font-size: 14px;
  text-align: left !important;
  margin: 0;
  font-family: Roboto-regular !important;
  width: 100% !important;
  float: left;
  color: #fffcfc;
  padding: 0px 10px 10px 10px;
}

#floatingPrice {
  position: fixed;
  top: 40%;
  right: 20px;
  background-color: #6889c5 !important;
  padding: 0;
  border-radius: 5px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  font-size: 12px;
  z-index: 1000;
  text-align: center;
  width: 205px;
  color: #efebeb;
}

.compte {
  margin: 0;
}
}