body {
	background-color: --color-second-light;
	margin: auto;
	font-family: var(--theme-font-family);
	font-weight: var(--font-weight-normal);
}


/**
* SPINNER LOADING
*/

.spinner {
	width: 40px;
	height: 40px;
	border: 4px solid rgba(0, 0, 0, 0.1);
	border-top: 4px solid #000;
	border-radius: 50%;
	animation: spin 0.8s linear infinite;
	margin: 0 auto 10px;
}

@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}


/**
* BREADCRUMP
*/

#breadcrumb {
	display: flex;
	justify-content: space-between;
	margin: auto;
	width: 30vw;
	min-width: 500px;
	max-width: 800px;
}

.breadcrumb_text_mobile {
	display: none;
}

.breadcrumb_text_desktop {
	display: inline;
}

.breadcrumb_step {
	display: flex;
	justify-content: center;
	flex-direction: column;
	align-items: center;
}

.breadcrumb_step img {
	width: 40px;
}

.breadcrumb_step p {
	color: #798E9A;
	font-family: var(--theme-font-family-bold);
	font-size: 12px;
}

.breadcrumb_separator {
	margin-top: 20px;
	width: 13px;
	align-self: center;
}

.breadcrumb_active .breadcrumb_number,
.breadcrumb_active .breadcrumb_text,
.breadcrumb_active .breadcrumb_dot {
	color: var(--color-main);
}

/**
* HEADER
*/
#header-logo {

	margin: 0;
	background-repeat: no-repeat;
	/*background: transparent url('images/geneva_logo.png') 0% 0% no-repeat padding-box;*/
	background-size: contain;
	background-position: center 0;
	height: 200px;
}

.header-body {
	display: var(--page-header);
	width: 60vw;
	/* min-width: 800px; */
	margin: auto;
	flex-direction: row-reverse;
	flex-wrap: nowrap;
}

.header-body-element {
	margin: 10px;
	margin-left: 0px;
	flex: 1;
	/*line-height: 75px;
  font-size: 30px;*/
}

.header-title {
	/* display: var(--card-image-title-header); */
	width: 45vw;
	min-width: 600px;
	letter-spacing: var(--character-spacing-0);
	color: var(--color-main);
	text-align: left;
	opacity: 1;
	font-size: var(--font-size-45);
	font-family: var(--theme-font-family-light);
	font-weight: var(--font-weight-light);
	line-height: var(--line-spacing-55);
	font-style: var(--font-style-normal);
	font-variant: normal;

}

.lang-card {
	display: flex;
	flex-direction: row;
}

.lang-card-element {
	/* width: 50%; */
	/* min-width: 350px; */


}

.inline-lang-button {
	cursor: pointer;
}

#card-and-discount {
	/* display: var(--card-image-title-header); */
	background-repeat: no-repeat;
	height: 130px;
	background-size: contain;
}


.menu-lang-button {
	width: 100px;
	height: 32px;
	background-color: white;
	border: 1px solid #dddddd;
	border-radius: 7px;
	text-align: center;
	font-size: 20px;
	font-family: var(--theme-font-family-medium);
	font-weight: var(--font-weight-medium);
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	float: right;
	margin-bottom: 20px;
	margin-top: 20px;

}

.menu-lang-button:hover .menu-lang-content {
	display: block;
	/*background-color:  #F6F6F6;*/
}


.menu-lang-content {
	width: 100%;
	display: none;
	position: absolute;
	border: 1px solid #dddddd;
	background-color: white;
	border-radius: 7px;
	text-align: center;
	z-index: 1;
	top: 30px;
	left: 0px;

}

.menu-lang-content a {
	display: block;
	font-size: var(--font-size-14);
	line-height: var(--line-spacing-20);
	font-family: var(--theme-font-family-medium);
	font-weight: var(--font-weight-medium);
	text-decoration: none;
	display: block;
	color: var(--color-dark-grey);
	padding: 12px 16px;
	border-bottom: 1px solid #DDDDDD;
}


.menu-lang-content a:last-child {

	border-bottom: 0px;
}

.menu-lang-content a:hover {
	background-color: #f1f1f1;
	font-family: var(--theme-font-family-medium);
	font-weight: var(--font-weight-medium);
}

.inline-lang-selector .active {
	font: normal normal bold 18px/27px Poppins !important;
	letter-spacing: 0px;
	color: #000000 !important;
	text-transform: uppercase;
}

.inline-lang-selector .inline-lang-button {
	font: normal normal bold 18px/27px Poppins;
	letter-spacing: 0px;
	color: #C0C0C0;
	text-transform: uppercase;
}

.inline-lang-separator {
	display: inline-block;
	width: 3px;
	height: 15px;
	background-color: currentColor;
	margin: 0 8px;
	vertical-align: middle;
	color: #C0C0C0;
}




#back-button {
	/* display: var(--back-button-header); */
}

#back-button a {
	padding-left: 4vw;
	color: var(--color-button-primary);
	font-family: var(--theme-font-family);
	font-weight: var(--font-weight-normal);
	font-size: var(--font-size-16);
	line-height: var(--line-spacing-20);
	font-style: var(--font-style-normal);
	font-weight: var(--font-weight-normal);
}

#back-button-generic {
	/* display: var(--back-button-header-generic); */
}

#back-button-generic a {
	padding-left: 4vw;
	color: var(--color-button-primary);
	font-family: var(--theme-font-family);
	font-weight: var(--font-weight-normal);
	font-size: var(--font-size-16);
	line-height: var(--line-spacing-20);
	font-style: var(--font-style-normal);
	font-weight: var(--font-weight-normal);
}


/**
* =====================================
* No Reservation
* =====================================
* */
#noReservation {
	width: 60vw;
	margin: auto;
	background-color: var(--color-second-light);
}

/**
* =====================================
* Content Home Page
* =====================================
* */

#content {
	margin: 0;
	width: 100%;
	background-color: var(--color-second-light);
	/* position: absolute;
	left: 0; */
}


.body-content {

	padding-top: 30px;
	padding-bottom: 30px;
}

.home-content {
	display: flex;
	justify-content: space-between;
	width: 60vw;
	/* min-width: 800px; */
	margin: auto;
	padding-top: 30px;
	padding-bottom: 30px;
	flex-wrap: wrap;
	gap: 40px;
}

#start-create-card-button::before {
	content: "→";
	margin-right: 8px;
}

.body-panel {
	/* width: 35%; */
	margin-top: 0px;
	flex: 1;
}


.left-body-panel-desc {
	min-width: 300px;
}

.right-body-panel {
	/* width: 400px; */
	max-width: 400px;
	min-width: 300px;
}

.left-body-panel-desc {
	color: var(--color-dark-grey);
	font-size: var(--font-size-20);
	font-family: var(--theme-font-family);
	font-weight: var(--font-weight-normal);
	line-height: var(--line-spacing-28);
	font-style: var(--font-style-normal);
	margin-top: 0px;
	max-width: 500px;
}

.body-panel-fantom {
	width: 50px;
}

.moreinfo-button,
.lessinfo-button {
	height: 32px;
	text-align: center;
	color: var(--color-dark-grey);
	font-size: var(--font-size-14);
	font-family: var(--theme-font-family);
	font-weight: var(--font-weight-normal);
	line-height: var(--line-spacing-20);
	font-style: var(--font-style-normal);
	padding-right: 16px;
	padding-left: 16px;
}

.moreinfo-button:hover {
	background-color: #F6F6F6;
}


#available-card-management {
	display: flex;
	justify-content: space-between;
	/* border-bottom: 1px solid var(--color-light-blue); */

}

#available-card-text,
#available-card-quantity {
	color: var(--color-main);
	font-size: 24px;
	font-family: var(--theme-font-family-medium);
	font-weight: var(--font-weight-medium);
	line-height: 30px;
	font-style: var(--font-style-normal);
	letter-spacing: var(--character-spacing-0);
}

#available-card-quantity {
	text-align: center;
	width: 100px;
}

#children-management {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.children-text {
	color: var(--color-dark-grey);
	font-size: 16px;
	font-family: var(--theme-font-family);
	font-weight: var(--font-weight-normal);
	line-height: 20px;
	font-style: var(--font-style-normal);
	letter-spacing: var(--character-spacing-0);
	padding: 10px;
	width: 250px;
}

.children-buttons {
	display: flex;
	align-items: center;
	width: 100px;
	justify-content: space-between;
}

.children-quantity {
	color: var(--color-children-quantity);
	font-size: 24px;
	font-family: var(--theme-font-family-medium);
	font-weight: var(--font-weight-medium);
	line-height: 30px;
	font-style: var(--font-style-normal);
	letter-spacing: var(--character-spacing-0);
}

.children-decrement,
.children-increment {
	color: var(--color-button-enable);
}



.card-birthdate {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 44px;
	padding: 0 12px;
	font-size: 16px;
	box-sizing: border-box;
	border: 1px solid #ccc;
	border-radius: 4px;
	background-color: white;
	text-align: left;
	vertical-align: middle;
}



#infos_homeowners {
	display: flex;
	justify-content: space-between;
}

#infos_homeowners-text {
	color: var(--color-main);
	font-size: var(--font-size-16);
	line-height: 30px;
	font-style: var(--font-style-normal);
	letter-spacing: var(--character-spacing-0);
}

.help-button {
	font-size: 16px;
	width: 32px;
	height: 32px;
	text-align: center;
}


.help-button:hover {
	background-color: #F6F6F6;
}

.single-icon {
	color: var(--color-dark-grey);
	font-size: 23px;
}

.single-icon:hover {
	color: var(--color-icon-hover);
}



/**
* =====================================
* Additional info page
* =====================================
* */

#additional-infos {
	display: flex;
	gap: 50px;
	flex-wrap: wrap;
}

#additional-infos .body-panel {
	width: 50%;
	min-width: 300px;
}

/**
* =====================================
* Payment page
* =====================================
* */
#content-payment {
	/* display: var(--payment-page); */
	justify-content: space-around;
	width: 60vw;
	/* min-width: 800px; */
	margin: auto;
	padding-top: 30px;
	padding-bottom: 30px;
}

#payment_amount-text,
#payment_tax_amount {
	color: var(--color-main);
	font-size: 24px;
	font-family: var(--theme-font-family-medium);
	font-weight: var(--font-weight-medium);
	line-height: 30px;
	font-style: var(--font-style-normal);
	letter-spacing: var(--character-spacing-0);
}

#payment-info-text {
	color: var(--color-main);
	font-size: 15px;
	font-family: var(--theme-font-family-medium);
	font-weight: var(--font-weight-medium);
	line-height: 20px;
	font-style: var(--font-style-normal);
	letter-spacing: var(--character-spacing-0);
	margin-top: 0px;
}

#payment_tax_amount {
	text-align: center;
	width: 100px;
}

#payment-management {
	display: flex;
	justify-content: space-between;
}

/**
* =====================================
* Card guest
* =====================================
* */

#address-field {
	/* width: 730px; */
	min-width: 300px;
	max-width: 95%;
	box-sizing: border-box;
	background-color: white;
	background-image: url("../images/pin.png");
	background-position: 10px 10px;
	background-size: 20px;
	background-repeat: no-repeat;
	margin-left: 0px;
	padding-left: 40px;
	font-size: 16px;
	height: 48px;
}

#address-field.inputfailed {
	background-image: url("../images/pinred.png");
}

#address-field.inputsuccess {
	background-image: url("../images/pingreen.png");
}

#addressList {
	display: flex;
	gap: 5px;
	align-items: flex-end;
}

#addressList #countrySelector {
	flex: 2;
	margin-left: 0px !important;
	margin-right: 0px !important;
}

#addressList #postalcode-field {
	flex: 1;
	margin-left: 0px !important;
	margin-right: 0px !important;
}



#countrySelector {
	font-size: 14px;
	border-radius: 6px;
}

#traveler-type {
	flex-direction: row;
	width: 100%;
	justify-content: space-between;
	margin-bottom: 20px;
}

#add-more-card-button {
	width: 358px;
	margin-top: 0px;
	margin-bottom: 15px;
	margin-left: 15px;
	margin-right: 15px;
	max-width: 80vw;
}

#add-more-card-button>p:hover {
	cursor: pointer;
}

#no-more-card-available-text {
	color: #ffffff;
	margin-top: 15px;
	margin-bottom: 15px;
}

.content-card {
	margin: auto;
	background-color: var(--color-second-light);
	padding-bottom: 30px;
	padding-left: 10vw;
	width: 60vw;
	padding-left: 0;
}


.title-create-card-guest {
	/* display: var(--create-card); */
	margin-bottom: 20px;
}

#translation_select_address_in_list_below {
	/* display: var(--create-card); */
}

.title-send-card-guest {
	/* display: var(--send-card);; */
}

.subtitle-send-card-guest {
	/* display: var(--send-card);; */
}

.send-all-guest-card-to-one-mail {
	/* display: var(--send-all-cards-to-one-mail); */
	max-width: 315px;
}

.title-send-card-individually {
	/* display: var(--send-all-cards-to-one-mail); */

}

#content-create-card {
	box-sizing: border-box;
}

.content-create-card-info,
.content-create-card-asterix {
	/* display:  var(--create-card);	 */
	margin-left: auto;
	margin-right: auto;
	width: 60vw;
}


#content-create-card-label {
	display: var(--create-card);
	font-weight: bold;
	margin-left: 2.75em;
	margin-bottom: 0;
}

.validate-card-button {
	/*display:  var(--create-card);	*/
}

.send-card-button {
	/* display:  var(--send-card);	 */
}

#mail-to-send-all-cards {
	margin: 0px;
	max-width: 80vw;
	padding: 1px 15px;
	width: 358px;
	margin-right: 15px;
	margin-bottom: 15px;
	box-sizing: border-box;
}

#content-create-card h2 {
	margin-bottom: 10px;
}


.card-guest-content {
	display: flex;
	flex-wrap: wrap;
	margin-top: 20px;
	margin-bottom: 20px;
}

.card-guest {
	min-width: 350px;
	margin-right: 15px;
	margin-bottom: 15px;
	flex: 0 1 29%;
}

.card-guest-header {
	/* display: var(--display-card); */

	border-radius: 7px 7px 0px 0px;
	background: var(--color-card-header) 0% 0% no-repeat padding-box;
	height: 30px;
	padding-left: 15px;
	color: white;
	padding-top: 10px;
}

.card-guest-header p {
	display: inline;
	margin-top: 0;
}

.create-card-guest-body {
	/* display: var(--create-card); */
	background: #FFFFFF 0% 0% no-repeat padding-box;
	box-shadow: 0px 5px 20px #0E79E326;
	padding-bottom: 10px;
	border-radius: 0px 0px 7px 7px;
}

.card-guest-body p {
	display: inline;
}

.card-guest-body p input {
	padding-left: 15px;
	margin-left: 15px;
	margin-right: 17px;
	margin-top: 20px;
}

.card-guest-body p input:focus {
	border: 2px solid var(--color-button-primary) !important;
}

.send-card-guest-body {
	/* display: var(--send-card); */
	background: #FFFFFF 0% 0% no-repeat padding-box;
	box-shadow: 0px 5px 20px #0E79E326;
	padding-bottom: 20px;
	border-radius: 0px 0px 7px 7px;
	padding-top: 15px;
}

.send-card-to {
	margin-left: 15px;
	color: #727272;
	font-size: var(--font-size-16);
	font-family: var(--theme-font-family);
	font-weight: var(--font-weight-normal);
	line-height: var(--line-spacing-19);
	font-style: var(--font-style-normal);
	letter-spacing: var(--character-spacing-0);
}

.send-card-to-name {
	margin-left: 15px;
	margin-top: 10px;
	margin-bottom: 0px;
	color: #727272;
	font-size: var(--font-size-16);
	font-family: var(--theme-font-family-medium);
	font-weight: var(--font-weight-medium);
	line-height: var(--line-spacing-20);
	font-style: var(--font-style-normal);
	letter-spacing: var(--character-spacing-0);
	display: inline-block !important;

}


.content-create-card-buttons {
	text-align: center;
	width: 358px;
	max-width: 80vw;
}

#generateButton::before {
  content: "✓";
  margin-right: 8px;
  font-size: 16px;
  font-weight: 600;
}
.content-create-card-info {
	color: var(--color-light-blue);
	font-size: var(--font-size-16);
	font-family: var(--theme-font-family);
	font-weight: var(--font-weight-normal);
	line-height: var(--line-spacing-20);
	font-style: var(--font-style-normal);
	letter-spacing: var(--character-spacing-0);
}

.content-create-card-asterix {
	margin-top: 60px;
	color: var(--color-second);
	font-size: var(--font-size-12);
	font-family: var(--theme-font-family);
	font-weight: var(--font-weight-normal);
	line-height: var(--line-spacing-20);
	font-style: var(--font-style-normal);
	letter-spacing: var(--character-spacing-0);
}

#info_asterix
{
	width: 60vw;
	margin: auto;
}

.content-create-card-info-correct {
	display: block;
	color: var(--color-second);
	font-size: var(--font-size-16);
	font-family: var(--theme-font-family);
	font-weight: var(--font-weight-normal);
	line-height: var(--line-spacing-20);
	font-style: var(--font-style-normal);
	letter-spacing: var(--character-spacing-0);
}

.content-create-card-info-failed {
	color: var(--color-red);
}

.content-create-card-info-empty {
	display: none;
	color: var(--color-red);
	font-size: var(--font-size-16);
	font-family: var(--theme-font-family);
	font-weight: var(--font-weight-normal);
	line-height: var(--line-spacing-20);
	font-style: var(--font-style-normal);
	letter-spacing: var(--character-spacing-0);
}


.add-card-plus
{
	color : #000000;
	cursor: pointer;
}

.card-info-locked
{
	color : #000000;
	margin-left: 15px;
}

.label-locked {
  display: block !important;
  font-size: 12px;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}

.card-info-locked {
  font-size: 16px;
  font-weight: 600;
  color: #111827;
  margin-bottom: 18px;
  line-height: 1.4;
}

.card-locked .label-locked
{
	height: auto !important;
}

.card-locked .input-field:first-child
{
	margin-bottom: 0px;
}

/**
* =====================================
* Processing card
* =====================================
* */

#content-process-card {
	width: 60vw;
	margin: auto;
	box-sizing: border-box;

}

.content-process-card-body {
	display: flex;
}

.process-pdf-loading-block {
	width: 350px;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	align-content: center;
	background-color: white;
	box-shadow: 0px 5px 20px #0E79E326;
	border-radius: 7px;
	padding: 15px;
	margin-top: 20px;
}

.process-pdf-fail-block {
	/* display: var(--process-card-fail); */
	width: 350px;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	align-content: center;
	background-color: white;
	box-shadow: 0px 5px 20px #0E79E326;
	border-radius: 7px;
	padding: 15px;
	margin-top: 20px;
}

.process-pdf-loading-block img {
	width: 100px;
	height: 100px;
	margin-top: 30px;
}


.process-pdf-fail-block img {
	width: 100px;
	margin-top: 30px;
}

.processing-blue-text {
	color: var(--color-blue);
	font-size: var(--font-size-20);
	font-family: var(--theme-font-family);
	font-weight: var(--font-weight-normal);
	line-height: var(--line-spacing-28);
	font-style: var(--font-style-normal);
	letter-spacing: var(--character-spacing-0);
	width: 90vw;
	max-width: 400px;

}

.processing-green-text {
	color: var(--color-green);
	font-size: var(--font-size-20);
	font-family: var(--theme-font-family);
	font-weight: var(--font-weight-normal);
	line-height: var(--line-spacing-28);
	font-style: var(--font-style-normal);
	letter-spacing: var(--character-spacing-0);
	width: 90vw;
	max-width: 400px;
}

.process-pdf-loading-block p,
.process-pdf-fail-block p {
	color: var(--color-dark-grey);
	font-size: var(--font-size-18);
	font-family: var(--theme-font-family);
	font-weight: var(--font-weight-normal);
	line-height: var(--line-spacing-25);
	font-style: var(--font-style-normal);
	letter-spacing: var(--character-spacing-0);
	text-align: center;
	margin-bottom: 30px;
}

.process-body-panel-fantom {
	min-width: 130px;
}



.mail-block-wrapper {
	opacity: 0;
	transform: translateY(10px);
	max-height: 0;
	overflow: hidden;
	transition: opacity 220ms ease, transform 220ms ease, max-height 260ms ease;
}

.mail-block-wrapper--open {
	opacity: 1;
	transform: translateY(0);
	max-height: 1200px;
	/* assez grand pour contenir le bloc */
}


.all-infos-correct {
	color: var(--color-main);
}

/**
* =====================================
* Newsletter
* =====================================
* */

#subscribeNews,
#subscribeSpecialOffer {
	background-color: white;
	border: 0px;
	border-radius: 7px;
}

.newsletter-loading {
	pointer-events: none;
	/* bloque les clics */
}

/* overlay */
.newsletter-loading-overlay {
	position: absolute;
	inset: 0;
	background: rgba(255, 255, 255, 0.7);
	backdrop-filter: blur(3px);
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 12px;
	z-index: 10;
}

/* spinner */
.newsletter-spinner {
	width: 34px;
	height: 34px;
	border: 4px solid #e53935;
	border-top: 4px solid transparent;
	border-radius: 50%;
	animation: newsletterSpin 0.7s linear infinite;
}

@keyframes newsletterSpin {
	to {
		transform: rotate(360deg);
	}
}

.content-deliverycards-body {
	display: flex;
	justify-content: space-between;
	width: 60vw;
	box-sizing: border-box;
	margin: auto;
	gap: 40px;
	padding-bottom: 20px;
	flex-wrap: wrap;
}

.content-deliverycards-body #right-panel {
	background-color: #ffffff;
	padding: 10px;
	flex: 1;
	border-radius: 7px;
	min-width: 300px;
	box-sizing: border-box;
}


.content-deliverycards-body #left-panel {
	flex: 2;
	min-width: 300px;
	box-sizing: border-box;
}

#content-newsletter {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	gap: 10px;
}

#content-newsletter #newsletter-email-field {
	margin: 0px;
	margin-top: 10px;
	margin-bottom: 10px;
	width: 100%;
	box-sizing: border-box;
}


.newsletter-left-body-panel-done {
	/* display: var(--newsletter-subscribing-done); */
}

.newsletter-right-body-panel-done {
	/* display: var(--newsletter-subscribing-done); */
}

.newsletter-body-left-panel-spacer {
	height: 1.5em;
}


.newsletter-body-panel-fantom {
	width: 65px;
}

.newsletter-left-body-panel {
	/* display: var(--newsletter-subscribing); */
	width: 30vw;
	max-width: 600px;
	min-width: 300px;
}

.newsletter-right-body-panel {
	/* display: var(--newsletter-subscribing); */
	width: 25vw;
	max-width: 570px;
	margin-top: 20px;
}

.newsletter-right-body-panel img {
	width: 25vw;
	max-width: 450px;
}

.newsletter-left-body-panel .title-checkspam {
	color: var(--color-main);
	font-size: var(--font-size-14);
	font-family: var(--theme-font-family);
	font-weight: var(--font-weight-normal);
	line-height: var(--line-spacing-30);
	font-style: var(--font-style-normal);
	margin-bottom: 10px;
}

#translation_error_newsletter_subscription {
	display: none;
	color: red;
}

.input-error {
	border-color: #e10b16 !important;
}

.block-error input[type="radio"]+label {
	color: #e10b16;
}

.block-error input[type="radio"] {
	outline: 2px solid #e10b16;
	outline-offset: 2px;
	border-radius: 999px;
}

.content-create-card-info-error {
	color: #e10b16;
}


.resort-pass-button-mobile {
	display: none;
}


.resort-pass-button-mobile-done {
	display: none;
}



#subscribe-newsletter-button {
	width: 100%;
	max-width: unset !important;
	box-sizing: border-box;

}

#mail-subscribe {
	margin-left: 0px;
	margin-right: 0px;
	width: 100%;
	box-sizing: border-box;
}

#discover-resort-pass-button,
#webapp-button-with-lang {
	/* hors restort 
	background-color:  #0E79E3 !important;
	border: 0px !important;
	color: white !important;
  width: fit-content;
  padding: 0px 30px;*/
	width: 360px;
	background-color: transparent;
}


#discover-resort-pass-button-2 {
	max-width: 360px;
}


.checkbox-subscribe-block {
	display: flex;
	align-items: flex-start;
	margin-top: 10px;
	margin-bottom: 20px;
}

.checkbox-subscribe-block p {
	margin: 0;
	color: var(--color-second);
	font-size: var(--font-size-16);
	font-family: var(--theme-font-family-medium);
	font-weight: var(--font-weight-medium);
	line-height: var(--line-spacing-20);
	font-style: var(--font-style-normal);
	letter-spacing: var(--character-spacing-0);
}

#subscribeNews,
#subscribeSpecialOffer {
	margin: 0px;
	margin-right: 10px;
}

.newsletter-special-offer {
	font-family: var(--theme-font-family);
	font-weight: var(--font-weight-normal);
}

.newsletter-blue-text {
	color: var(--color-second);
	font-size: var(--font-size-18);
	font-family: var(--theme-font-family);
	font-weight: var(--font-weight-normal);
	line-height: var(--line-spacing-28);
	font-style: var(--font-style-normal);
	letter-spacing: var(--character-spacing-0);
	margin-top: 30px;
}

.thanksNewsletterSubscribing {
	margin-top: 100px;
	margin-bottom: 50px
}



#download_cards {
	width: 360px;
}


/* Spinner animation */
.icn-spinner {
	animation: spin-animation 1s infinite;
	display: inline-block;
}

@keyframes spin-animation {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(359deg);
	}
}

/**
* =====================================
* Extend cards
* =====================================
* */

#content-extend-card {
	/* display: var(--extend-card); */
	width: 100%;
}

.content-extend-card-body {
	display: flex;
	margin: auto;
	width: 55vw;
	padding-top: 2em;
	padding-bottom: 0;
}

.extend-card-left-body-panel {
	/* display: var(--extend-card); */
	width: fit-content;
	/* min-width: 450px; */
}

.title-extend-card {
	letter-spacing: var(--character-spacing-0);
	color: var(--color-main);
	text-align: left;
	opacity: 1;
	font-size: var(--font-size-45);
	font-family: var(--theme-font-family-light);
	font-weight: var(--font-weight-light);
	line-height: var(--line-spacing-55);
	font-style: var(--font-style-normal);
	font-variant: normal;
}

.title-extend-card .nowrap {
	white-space: nowrap;
}

.card-expiration-text {
	margin-top: 0;
	font-family: var(--theme-font-family);
	color: var(--color-main);
}

#extend-card-button {
	width: fit-content;
	padding: 0 2em;
}

#cards-will-expire {
	/* display: var(--cards-will-expire); */
}

#cards-have-expired {
	/* display: var(--cards-have-expired); */
}

.extend-card-body-panel-fantom {
	display: none
}

.extend-card-right-body-panel {
	width: 25vw;
	max-width: 400px;
}

.extend-card-right-body-panel img {
	width: 25vw;
	max-width: 400px;
}

/**
*
* =====================================
* Loading
* =====================================
* * /
/* Fullscreen overlay */
#app-loader {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.4);
	/* grey effect */
	backdrop-filter: blur(2px);
	/* flou */
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9999;
}

/* Loader box */
#loader-view {
	background: #ffffffb9;
	padding: 24px 36px;
	border-radius: 12px;
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
	font-size: 16px;
	font-weight: 500;
}

#loader-view p {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
}

.spin {
	animation: spin 1s linear infinite;
}

@keyframes spin {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}


/**
* =====================================
* Reservation
* =====================================
* */

#reservation {
	/* display: var(--reservation-block); */
	background-color: white;
	left: 0;
}

.reservation-element {
	margin: auto;
	width: 60vw;
	padding-top: 30px;
	padding-bottom: 30px;
	display: flex;
}

.reservation-element h2 {}

.reservation-item {
	display: flex;
	align-items: center;
	color: var(--color-dark-grey);
	font-family: var(--theme-font-family);
	font-weight: var(--font-weight-normal);
	font-size: var(--font-size-20);
	line-height: var(--line-spacing-28);
	padding-top: 12.5px;
	padding-bottom: 12.5px;

}

.reservation-item p {
	margin-top: 0;
	margin-bottom: 0;

}

.reservation-item img {
	width: 16px;
	height: 16px;
	margin-right: 20px;

}

#reservationInfos {
	font-family: var(--theme-font-family);
	color: var(--color-red);
}

/**
* =====================================
* Footer
* =====================================
* */

#footer-note {
	background-color: white;

}

#footer-note p {
	width: 60vw;
	margin: auto;
	padding-bottom: 20px;
}

#footer-note #translation_footer_contact_establishment {
	width: 50%;
	display: inline-block;
}

#footer {
	margin: auto;
	width: 60vw;
	color: var(--color-dark-grey);
	font-family: var(--theme-font-family);
	font-weight: var(--font-weight-normal);
	font-size: var(--font-size-14);
	line-height: var(--line-spacing-20);
	margin-bottom: 20px;
	padding-top: 30px;
	padding-bottom: 30px;

}

#footer-note {
	font-weight: bold;
}

#footer a {
	color: var(--color-dark-grey);
	text-decoration: underline;
}

#footer img {
	margin-top: 30px;
}

#footer-links {
	/* display: var(--footer-links); */
}

#footer-copyright {
	display: flex;
	justify-content: space-between;
}

#footer-copyright a {
	text-decoration: none;
	color: #000000;
}


.footer_contact {
	margin: 0px;
}

#footer_contact_name {
	font-weight: bold;
}

.footer-items {
	flex: 0 1 30%;
}

/**
* =====================================
* Modal
* =====================================
* */

.close-modal-more-info {
	position: absolute;
	top: 10px;
	right: 10px;

	width: 20px;
	height: 20px;
	border-radius: 50%;

	background-color: #b71c1c;
	border: none;
	cursor: pointer;

	display: flex;
	align-items: center;
	justify-content: center;

	padding: 0;
}

/* Croix blanche */
.close-modal-more-info::before,
.close-modal-more-info::after {
	content: "";
	position: absolute;
	width: 10px;
	height: 1.5px;
	background: white;
}

.close-modal-more-info::before {
	transform: rotate(45deg);
}

.close-modal-more-info::after {
	transform: rotate(-45deg);
}

/* Petit effet hover élégant */
.close-modal-more-info:hover {
	background-color: #d32f2f;
}

.close-modal-more-info:focus {
	outline: 2px solid #fff;
	outline-offset: 2px;
}



#close-button {
	float: right;
	display: block;
	margin: 0px;
	color: var(--color-button-primary);
	font-size: 20px;
	position: absolute;
	right: 15px;
	top: 15px;
	cursor: pointer;
}

.bold-text {
	font-family: var(--theme-font-family-medium) !important;
	font-weight: var(--font-weight-medium) !important;
}

.small-text {
	font-size: var(--font-size-14) !important;
}

.blue-text {
	color: var(--color-second) !important;
	font-size: var(--font-size-16) !important;
	font-family: var(--theme-font-family-medium) !important;
	font-weight: var(--font-weight-normal-medium) !important;
	line-height: var(--line-spacing-20) !important;
	font-style: var(--font-style-normal) !important;
	letter-spacing: var(--character-spacing-0) !important;
	margin-top: 0 !important;
}

.block-button-for-modal {
	position: relative;
}


/**
* =====================================
* Modal more info
* =====================================
* */
#modal-more-info {
	/* display: var(--modal-more-info); */
	margin: auto;
	width: 670px;
	background-color: white;
	border-radius: 7px;
	position: absolute;
	z-index: 1;
	top: 0;
	box-shadow: 0px 3px 30px #00000029;
	border: 1px solid #DDDDDD;
	padding: 16px;
}


#modal-more-info p {
	color: var(--color-dark-grey);
	font-family: var(--theme-font-family);
	font-weight: var(--font-weight-normal);
	font-size: var(--font-size-20);
	line-height: var(--line-spacing-28);
}



.geneva-resort-pass-img,
.geneva-resort-pass-img-de,
.geneva-resort-pass-img-fr,
.geneva-resort-pass-img-en {
	margin-top: 20px;
	width: 400px;
}

#modal-more-info #discover-resort-pass-button {
	margin-top: 20px !important;
	margin-bottom: 60px;

}



/**
* =====================================
* Modal help
* =====================================
* */
#modal-help {
	/* display: var(--modal-help); */
	margin: auto;
	width: 350px;
	background-color: white;
	border-radius: 7px;
	position: absolute;
	z-index: 1;
	box-shadow: 0px 3px 30px #00000029;
	border: 1px solid #DDDDDD;
	padding: 25px;
	top: 0;
}

#modal-help p {
	color: var(--color-dark-grey);
	font-family: var(--theme-font-family);
	font-weight: var(--font-weight-normal);
	font-size: var(--font-size-16);
	line-height: var(--line-spacing-20);
	margin-bottom: 0;
	margin-top: 25px;
}


/**
* =====================================
* Buttons
* =====================================
* */


button {
	border: 1px solid #DDDDDD;
	background: #FFFFFF 0% 0% no-repeat padding-box;
	border-radius: 7px;
	color: var(--color-dark-grey);
	font-size: 12px;
	font-family: var(--theme-font-family-light);
	font-weight: var(--font-weight-light);
	line-height: 14px;
	font-style: var(--font-style-normal);
	letter-spacing: var(--character-spacing-0);
	text-align: left;
	cursor: pointer;
}

.action-buttons-group {
	width: auto;
	display: flex;
	flex-direction: column;
}

.action-buttons-group>.action-button {
	margin-bottom: 20px;
	padding-left: 30px;
	padding-right: 30px;
}

.action-buttons-group>.disabled-action-button {
	margin-bottom: 20px;
	padding-left: 30px;
	padding-right: 30px;
}

.action-button {
	background-color: white;
	border: 1px solid var(--color-button-primary);
	border-radius: 22px;
	color: var(--color-button-primary);
	font-family: var(--theme-font-family-medium);
	font-weight: var(--font-weight-medium);
	font-size: var(--font-size-20);
	line-height: var(--line-spacing-24);
	text-align: center;
	width: 100%;
	height: 45px;
}

.action-button:hover {
	background-color: #F6F6F6;
}

.disabled-action-button {
	background-color: var(--color-disable-button);
	border: 0px;
	border-radius: 22px;
	color: white;
	font-family: var(--theme-font-family-medium);
	font-weight: var(--font-weight-medium);
	font-size: var(--font-size-20);
	line-height: var(--line-spacing-24);
	text-align: center;
	width: 100%;
	height: 45px;
}

.enabled-action-button {
	background-color: var(--color-button-primary);
	border: 0px;
	border-radius: 22px;
	color: white;
	font-family: var(--theme-font-family-medium);
	font-weight: var(--font-weight-medium);
	font-size: var(--font-size-20);
	line-height: var(--line-spacing-24);
	text-align: center;
	width: 100%;
	height: 45px;
}

.enabled-action-button:hover {
	background-color: var(--color-button-hover) !important;
}


#create-card-postal-address {
	margin-bottom: 30px
}

#address-list-block {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	width: 100%;
	align-items: flex-end;
	margin-left: 0px;

}

#address-list-block>div {
	width: 50%;
}

#postalcode-block {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	margin-bottom: 30px
}

#postalcode-block label {
	display: flex;
	flex-direction: row;
	align-items: center;
}

#postalcode-block input {
	width: 50px;
	margin-left: 0px;
}


.children-radio-buttons,
.traveler-type-radio-buttons,
.transport-mode-radio-buttons {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	font-family: "pangeabasic-bold", sans-serif;
	margin-right: 20px;
}

.traveler-type-radio-buttons,
.transport-mode-radio-buttons {
	margin-top: 15px;
}

.children-radio-buttons label,
.traveler-type-radio-buttons label,
.transport-mode-radio-buttons label {
	margin-left: 5px;
	margin-bottom: 0px;
	font-size: 16px;
}

.child-radio-button,
.traveler-type-radio-button,
.transport-mode-radio-button {
	display: flex;
	align-items: center;
	margin-bottom: 5px;
	min-width: 100px;
}

.error-banner {
	color: #E10B16;
}

.success-banner {
	color: #5eb435;

}

.checkbox-subscribe-block {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 8px 10px;
	border-radius: 10px;
}

.checkbox-block-error {
	background: #fff5f5;
	border: 1px solid #e53935;
}

.checkbox-block-error input[type="checkbox"] {
	accent-color: #e53935;
}



input[type='radio'] {
	appearance: none;
	background-color: #fff;
	margin: 0;
	font: small-caption;
	color: currentColor;
	width: 18px;
	height: 18px;
	border: 2px solid var(--color-button-primary);
	border-radius: 50%;
	display: grid;
	place-content: center;
	outline: none;

}



input[type="radio"]::before {
	content: "";
	width: 10px;
	height: 10px;
	border-radius: 50%;
	transform: scale(0);
	transition: 120ms transform ease-in-out;
	box-shadow: inset 1em 1em var(--color-button-primary);
	outline: 0px;
}

input[type="radio"]:focus {
	outline: 0px;
}

input[type="radio"]:checked:focus {
	outline: 0px;
}

input[type="radio"]:checked::before {
	transform: scale(1);
}

/**
* =====================================
* Titles
* =====================================
* */
h1 {
	color: var(--color-main);
	font-size: var(--font-size-25);
	font-family: var(--theme-font-family-medium);
	font-weight: var(--font-weight-medium);
	line-height: var(--line-spacing-30);
	font-style: var(--font-style-normal);
	margin-bottom: 10px;
}


h2 {
	color: var(--color-second);
	font-size: var(--font-size-20);
	font-family: var(--theme-font-family-medium);
	font-weight: var(--font-weight-medium);
	line-height: var(--line-spacing-28);
	font-style: var(--font-style-normal);
	margin-bottom: 0px;
}

h3 {
	color: var(--color-main);
	font-size: var(--font-size-20);
	font-family: var(--theme-font-family);
	font-weight: var(--font-weight-normal);
	line-height: var(--line-spacing-24);
	font-style: var(--font-style-normal);
	margin-top: 0px;
}

/**
* =====================================
* INPUT
* =====================================
* */
input[type=text],
input[type=email],
input[type=date],
select {
	box-sizing: content-box;
	width: 80%;
	margin: 5%;
	max-width: 300px;
	margin-top: 10px;
	margin-bottom: 10px;
	height: 42px;
	border: 2px solid #dddddd;
	border-radius: 7px;
	padding: 1px 5%;

	color: var(--color-dark-grey);
	font-size: var(--font-size-16);
	font-family: var(--theme-font-family);
	font-weight: var(--font-weight-normal);
	line-height: var(--line-spacing-20);
	font-style: var(--font-style-normal);
	letter-spacing: var(--character-spacing-0);
}

select {
	width: calc(85% - 20px) !important;
	padding-right: 24px;
	border-radius: 10px;
	margin-left: 14px;
	margin: 10px 17px !important;
}

a {
	text-decoration: none;
	color: var(--color-button-primary);

}

input[type=checkbox] {
	-moz-appearance: none;
	-webkit-appearance: none;
	-o-appearance: none;
	outline: none;
	content: none;
	width: 20px;
}

input[type=checkbox]:before {
	font-family: "FontAwesome";
	content: "\2714";
	font-size: 15px;
	color: transparent !important;
	display: block;
	margin-right: 7px;
	border: 2px solid var(--color-second);
	border-radius: 3px;
	width: 20px;
	height: 20px;
}


input[type=checkbox]:checked:before {
	color: var(--color-second) !important;
	text-align: center;
}



.unchecked-checkbox:before {
	border: 2px solid red !important;
}

.inputfailed {
	color: var(--color-red) !important;
	border-color: var(--color-red) !important;
}

.inputfailed::-webkit-input-placeholder {
	color: var(--color-red) !important;
}


.inputsuccess {
	color: var(--color-green) !important;
	border-color: var(--color-green) !important;
}

.inputsuccess::-webkit-input-placeholder {
	color: var(--color-green) !important;
}


/* Fieldset */
.input-field {
	display: flex;
	flex-direction: column;
	width: 500px;
	max-width: 95%;
}

.input-field label {
	margin-left: 30px;
	font-size: var(--font-size-14);
	font-family: var(--theme-font-family);
	font-weight: var(--font-weight-normal);
	color: #8d8d8d;
}

.input-field label .label-style {
	background: #FFF;
	padding: 0 5px;
	position: relative;
}

.input-field input {
	height: 25px;
	margin-top: -10px;
	padding: 10px 20px;
	border-radius: 10px;
	margin-left: 15px;
	margin-right: 25px;
}




[data-tip] {
	position: relative;
}

[data-tip]:before {
	content: '';
	/* hides the tooltip when not hovered */
	display: none;
	content: '';
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-bottom: 5px solid #1a1a1a;
	position: absolute;
	top: 60px;
	left: 45%;
	z-index: 8;
	font-size: 0;
	line-height: 0;
	width: 0;
	height: 0;
}

[data-tip]:after {
	display: none;
	content: attr(data-tip);
	position: absolute;
	top: 65px;
	left: 35%;
	padding: 5px 8px;
	background: #1a1a1a;
	color: #fff;
	z-index: 9;
	font-size: 0.75em;
	height: 18px;
	line-height: 18px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	white-space: nowrap;
	word-wrap: normal;
}

[data-tip]:hover:before,
[data-tip]:hover:after {
	display: block;
}


.image-center {
	display: block;
	margin: auto;
}