:root, :host
{
	--base-default:   #FFF;
	--base-hovered:   #FAFBFE;
	--base-pressed:   #EBEBEB;
	--base-depth:     #F0F1F3;
	--base-highlight: #F9F9F9;
	--base-featured:  #9EA1A5;
	--base-surface:   rgba(4, 4, 4, 80%);

	--text-default: #585862;
	--text-hovered: #323338;
	--text-pressed: #1E1F22;
	/*--text-disable: #8C939B;  changed for a11y */
	--text-disable: #6C737B; 

	--text-base:    var(--base-default); /* deprecated, use --base-default */
	--text-white:   var(--base-default); /* deprecated, use --base-default */

	--border-default:  #DFE1E6;
	--border-featured: #8C9196;
	--border-hovered:  #787F86;
	--border-pressed:  #555;
	--border-disable:  #D2D5D8;
	--border-surface:  rgba(0, 0, 0, 8%);

	--positive-default:  #064;
	--positive-hovered:  #004E34;
	--positive-pressed:  #032;
	--positive-selected: #D0E2D9;
	--positive-base:     #E8F9F0;
	--positive-disable:  #7F907D;

	--attention-default: #926202;
	--attention-base:    #FFEFCF;

	--critical-default: #AE1B00;
	--critical-hovered: #8D1600;
	--critical-pressed: #6C1100;
	--critical-base:    #FFF4F4;

	--text-over-branding: var(--base-default);

	--brand-color-text: var(--brand-color);
	
	--brand-color-background: var(--brand-color);
	--brand-color-border: var(--brand-color);
	--brand-color-rgb-values: var(--brand-color-rgb);
	--brand-hovered-background: var(--brand-hovered);
	--brand-hovered-border: var(--brand-hovered);
	--brand-hovered-text: var(--brand-hovered);
	--brand-pressed-background: var(--brand-pressed);
	--brand-pressed-border: var(--brand-pressed);
	--brand-pressed-text: var(--brand-pressed);
	
	--spacing-1x:    8px;
	--spacing-0125x: calc(var(--spacing-1x) * 0.125);  /* 1px */
	--spacing-025x:  calc(var(--spacing-1x) * 0.25);  /* 2px */
	--spacing-05x:   calc(var(--spacing-1x) * 0.5);  /* 4px */
	--spacing-075x:  calc(var(--spacing-1x) * 0.75);  /* 6px */
	--spacing-15x:  calc(var(--spacing-1x) * 1.5);  /* 12px */
	--spacing-2x:   calc(var(--spacing-1x) * 2);  /* 16px */
	--spacing-3x:   calc(var(--spacing-1x) * 3);  /* 24px */
	--spacing-4x:   calc(var(--spacing-1x) * 4);  /* 32px */
	--spacing-5x:   calc(var(--spacing-1x) * 5);  /* 40px */
	--spacing-8x:   calc(var(--spacing-1x) * 8);  /* 64px */
	--spacing-9x:   calc(var(--spacing-1x) * 9);  /* 72px */

	--com-space: var(--spacing-2x); /* deprecated */
	
	--text-size-caption: 12px;
	--line-height-caption: 16px;
	--text-size-paragraph: 14px;
	--line-height-paragraph: 20px;
	--text-size-h5: 16px;
	--line-height-h5: 24px;
	--text-size-h4: 20px;
	--line-height-h4: 28px;
	--text-size-h3: 26px;
	--line-height-h3: 32px;

	--color-success:  var(--positive-base);  /* deprecated */
	--color-warning:  var(--attention-base); /* deprecated */
	--color-critical: var(--critical-base);  /* deprecated */
	--color-disabled: var(--text-disable);   /* deprecated */

	--border-success:  var(--positive-default);  /* deprecated */
	--border-warning:  var(--attention-default); /* deprecated */
	--border-critical: var(--critical-default);  /* deprecated */

	--border-radius-0125x: calc(var(--border-radius-1x) * 0.125);  /* 1px */
	--border-radius-025x:  calc(var(--border-radius-1x) * 0.25); /* 2px */
	--border-radius-05x:   calc(var(--border-radius-1x) * 0.5); /* 4px */
	--border-radius-075x:  calc(var(--border-radius-1x) * 0.75); /* 6px */
	--border-radius-15x:  calc(var(--border-radius-1x) * 1.5); /* 12px */
	--border-radius-2x:   calc(var(--border-radius-1x) * 2); /* 16px */
	--border-radius-3x:   calc(var(--border-radius-1x) * 3); /* 24px */


	--background-white:   var(--base-default); /* deprecated */
	--background-hovered: var(--base-hovered);
	--background-pressed: var(--base-pressed);
	--background-surface: var(--base-depth);
	--background-depth:   var(--base-depth);
	--background-disabled:   #EBEBEB;

	--rtl-correction: 1;

	--font-awesome: "Font Awesome 6 Pro";

	--mda-box-background:       var(--base-featured);
	--mda-box-text:             var(--text-pressed);
	--mda-box-text-hover:       var(--base-default);

	--cell-box-background: var(--base-highlight);
	--cell-box-text:       var(--text-default);

	/* Hardcoded, because it needs to be the same in darkmode */
	--gallery-icon-base:    var(--text-default);
	--gallery-icon-hovered: var(--text-hovered);
	--gallery-icon-pressed: var(--text-pressed);
	--gallery-icon-text:    var(--base-default);

	--img-ratio-primary: 16 / 9;
	--img-ratio-room-primary: 16 / 9;
	--img-ratio-room-primary-mobile: 16 / 9;
	--img-ratio-rate-primary: 16 / 9; /* now used by customisation */
	--img-ratio-rate-primary-mobile: 16 / 9; /* now used by customisation */

	--img-ratio-mda-secondary: 16 / 9;
	--img-ratio-mda-secondary-mobile: 16 / 9;
	--img-ratio-mda-secondary-rate: 16 / 9; /* now used by customisation */
	--img-ratio-mda-secondary-rate-mobile: 16 / 9; /* now used by customisation */
	--img-ratio-mda-secondary-room: 16 / 9;
	--img-ratio-mda-secondary-room-mobile: 16 / 9;
	
	--img-ratio-secondary: 4 / 3;
	--img-ratio-secondary-mobile: 4 / 3;
	--img-ratio-room-secondary: 5 / 3;
	--img-ratio-room-secondary-mobile: 16 / 9;
	--img-ratio-rate-secondary: 4 / 3; /* now used by customisation */
	--img-ratio-rate-secondary-mobile: 16 / 9; /* now used by customisation */
	
	--input-error-border:     var(--critical-default);
	--input-error-background: var(--critical-base);
}

/* Dark Mode */
.darkmode,
.darkmode *
{
	--base-default:   #1B2125;
	--base-hovered:   #2E3439;
	--base-pressed:   #32373B;
	--base-depth:     #0D1212;
	--base-highlight: #282e32; /*#1F1F1F;*/
	--base-featured:  #494e51; /*#3F3F3F;*/
	--base-surface:   rgba(4, 4, 4, 80%);

	--text-default: #DEE5E5;
	--text-hovered: #BAC1C1;
	--text-pressed: #A7ADB1;
	--text-disable: #6E7D86;

	--border-default:  #2D353B;
	--border-featured: #63676B;
	--border-hovered:  #CCD0D5;
	--border-pressed:  #6D7175;
	--border-disable:  #434953;
	--border-surface:  rgba(0, 0, 0, 8%);

	--positive-default:  #BDE4CF;
	--positive-hovered:  #004E34;
	--positive-pressed:  #032;
	--positive-selected: #D0E2D9;
	--positive-base:     #00291C;
	--positive-disable:  #00291C;

	--attention-default: #FFEFCF;
	--attention-base:    #5C400B;

	--critical-default: #FFF4F4;
	--critical-hovered: #8D1600;
	--critical-pressed: #6C1100;
	--critical-base:    #490B00;
	
	/* next 4 added by MG so everywhere gets them. need to review colors */
	--brand-color-text:   #DEE5E5;
	--text-over-branding: #fff;
	--brand-hovered-text: #fff;
	--brand-pressed-text: #fff;
	
	--brand-color-rgb-values: 255, 255, 255;

	--mda-box-text-hover: var(--text-default);
	--text-over-branding: var(--text-default);

	--gallery-icon-base:    var(--base-default);
	--gallery-icon-hovered: var(--base-hovered);
	--gallery-icon-pressed: var(--base-pressed);
	--gallery-icon-text:    var(--text-default);

	--background-disabled:   #32373B;
}

.darkmode img[src*="noimage"] { filter:invert(); }
.darkmode img[src*="var"] { filter:invert(); } /*details page ssl icon */
.darkmode .modal-footer img[src*="allora"] { filter:invert(); }
.darkmode div.scale-container { background-color: #fff; }
.darkmode .paymentsection img[src*="reddotpayment"] { background-color: #fff;}

html[dir=rtl]
{
	--rtl-correction: -1;
}

/* Minimum size supported by the designsystem. */
@media screen and (max-width:320px) {
	html, body { min-width: 320px; }
}

/* Custom Scrollbar Stuff */
* { /*scrollbar-color: var(--brand-color) transparent;*/ }
*::-webkit-scrollbar { width: 6px; }
*::-webkit-scrollbar-track { background-color: transparent; }
*::-webkit-scrollbar-thumb {
	background-color: transparent;
	box-shadow: inset 0 0 10px 10px /*var(--brand-color)*/;
	border: 1px solid transparent;
	border-left:none;
	border-radius: 5px;
}

.darkmode *::-webkit-scrollbar-thumb {
	box-shadow: inset 0 0 10px 10px var(--border-pressed);
}
/*
 * Hides the scrollbar when not mousing over the scroll area.
 * [This is the (unchangeable) scrollbar behavior in Firefox]
 */
/* Disabled, some of us find it confusing...
*:not(:hover)::-webkit-scrollbar-thumb {
	background-color: transparent;
	box-shadow: none;
}
*/
/* End of Custom Scrollbar Stuff */


a { color: var(--text-default); text-decoration: none; }
html { display:flex; height:100%; }

body
{
	display: flex;
	flex-direction: column;
	justify-content: end;

	margin: 0;
	padding: 0;
	font-family: var(--font-stack-sans-serif);
	color: var(--text-default);
	/*width:100%;*/
}

body * { box-sizing:border-box; }

body.notemplate-body { width:100%; display:block; background-color:transparent; /* when opening in iframes */ }

#minframe { min-height: 100px; align-items: center; position: relative; display:flex; gap:var(--spacing-2x); background-color: var(--base-default); border-radius: var(--border-radius-3x); padding: var(--spacing-2x); }
#minframe:focus:not(.hoverClose) { -webkit-box-shadow:inset 0px 0px 0px 1px var(--border-pressed); -moz-box-shadow:inset 0px 0px 0px 1px var(--border-pressed); box-shadow:inset 0px 0px 0px 1px var(--border-pressed); }
#minframe:hover:not(.hoverClose) { background-color: var(--base-hovered); -webkit-box-shadow:inset 0px 0px 0px 1px var(--border-pressed); -moz-box-shadow:inset 0px 0px 0px 1px var(--border-pressed); box-shadow:inset 0px 0px 0px 1px var(--border-pressed); }
#minframe:active:not(.hoverClose) { background-color: var(--base-pressed); -webkit-box-shadow:inset 0px 0px 0px 1px var(--border-pressed); -moz-box-shadow:inset 0px 0px 0px 1px var(--border-pressed); box-shadow:inset 0px 0px 0px 1px var(--border-pressed); }

#logo
{
	position: relative;

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

	width: 68px;
	height: 68px;

	border-radius: var(--border-radius-2x);
	background-color: var(--brand-color-background);
	color: #fff;

	font-size: 32px;
	text-align: center;
}

#badge {
	position: absolute;
	right: -5px;
	top: -5px;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 25px;
	height: 25px;
	font-size: 10px;
	background-color: var(--critical-default); 
	color: var(--base-default);
	border-radius: 50%;
}
html[dir=rtl] #badge { right: unset; left: -5px; }

#badge { font-size:17px; font-weight:400; }
#badgeWrapper { cursor: pointer; }

#minframe.superMinimised { min-height: 1px; /*border-radius: 50%;*/  /*padding: var(--spacing-1x);*/ }

#minframe.superMinimised { padding: var(--spacing-1x); }
#minframe.superMinimised #logo { width:60px; height:60px; }

.superMinimised #message{ display: none; }
.superMinimised #closeBadge{ display: none; }

#closeBadge, .closeBadge { position: absolute; right: 0px; top: 0px; }
html[dir=rtl] #closeBadge, html[dir=rtl] .closeBadge { right: unset; left: 0px; }

#closeBadge__:hover, .closeBadge__:hover{ opacity: .9; }

.room-image-grid { display:grid; gap: var(--spacing-1x); }
.room-image-grid-1 { grid-template-columns: 1fr; }
.room-image-grid-2 { grid-template-columns: 1fr 1fr; }
.room-image-grid-2 > div.image { aspect-ratio: 1; }
.room-image-grid-3 { grid-template-columns: 5fr 2fr; }
.room-image-grid > div.image:first-child { aspect-ratio:0; } 
.room-image-grid-1.multi-site > div.image { aspect-ratio: 2/1; }
.room-image-grid-3 > div.image:first-child { grid-row:1 / span 2; }
div.multi-site { aspect-ratio: 2/1; }

.hotel-rate-grid { display:grid; gap: var(--spacing-1x); grid-template-columns: 1fr 4fr; }

.reservationFeed img{ max-width: 100%; }
.flexColumns { display: flex; column-gap: var(--spacing-2x); }
.flex50 > *{ width: 50%; }

@-webkit-keyframes jello-horizontal {
	0% {-webkit-transform: scale3d(1, 1, 1);transform: scale3d(1, 1, 1);}
	30% {-webkit-transform: scale3d(1.25, 0.75, 1);transform: scale3d(1.25, 0.75, 1);}
	40% {-webkit-transform: scale3d(0.75, 1.25, 1);transform: scale3d(0.75, 1.25, 1);}
	50% {-webkit-transform: scale3d(1.15, 0.85, 1);transform: scale3d(1.15, 0.85, 1);}
	65% {-webkit-transform: scale3d(0.95, 1.05, 1);transform: scale3d(0.95, 1.05, 1);}
	75% {-webkit-transform: scale3d(1.05, 0.95, 1);transform: scale3d(1.05, 0.95, 1);}
	100% {-webkit-transform: scale3d(1, 1, 1);transform: scale3d(1, 1, 1);}
}
@keyframes jello-horizontal {
	0% {-webkit-transform: scale3d(1, 1, 1);transform: scale3d(1, 1, 1);}
	30% {-webkit-transform: scale3d(1.25, 0.75, 1);transform: scale3d(1.25, 0.75, 1);}
	40% {-webkit-transform: scale3d(0.75, 1.25, 1);transform: scale3d(0.75, 1.25, 1);}
	50% {-webkit-transform: scale3d(1.15, 0.85, 1);transform: scale3d(1.15, 0.85, 1);}
	65% {-webkit-transform: scale3d(0.95, 1.05, 1);transform: scale3d(0.95, 1.05, 1);}
	75% {-webkit-transform: scale3d(1.05, 0.95, 1);transform: scale3d(1.05, 0.95, 1);}
	100% {-webkit-transform: scale3d(1, 1, 1);transform: scale3d(1, 1, 1);}
}
.slide-out-blurred-bottom {
	-webkit-animation: slide-out-blurred-bottom 0.45s cubic-bezier(0.755, 0.050, 0.855, 0.060) both;
	animation: slide-out-blurred-bottom 0.45s cubic-bezier(0.755, 0.050, 0.855, 0.060) both;
}
@-webkit-keyframes slide-out-blurred-bottom {
	0% {
		-webkit-transform: scale(1);
		transform: scale(1);
		opacity: 0.99; }
	100% {
		-webkit-transform: scale(0.95);
		transform:  scale(0.95);
		opacity: 0; }
}
@keyframes slide-out-blurred-bottom {
	0% {
		-webkit-transform:  scale(1);
		transform:  scale(1);
		opacity: 0.99; }
	100% {
		-webkit-transform: translateY(10%) scale(0.95);
		transform: translateY(10%) scale(0.95);
		opacity: 0; }
}

#content { display:none; }
#content { border-radius: var(--border-radius-2x); background-color: var(--base-default); }

.one { display:flex; flex-direction:column; gap: var(--spacing-2x); }
.one { background-color: var(--base-default); -webkit-box-shadow:inset 0px 0px 0px 1px var(--base-pressed); -moz-box-shadow:inset 0px 0px 0px 1px var(--base-pressed); box-shadow:inset 0px 0px 0px 1px var(--base-pressed); border-radius: var(--border-radius-2x); padding: var(--spacing-2x);  }

.one .one { /*background-color: var(--background-surface);*/ /*padding: var(--spacing-1x);*/ }
.one .heading-5 { margin-bottom: var(--spacing-05x); }

.title { font-weight:600; font-size:16px; line-height:24px; }
/*.subtitle { font-weight:500; font-size:14px; line-height:20px; }*/

.sub { font-weight:500; font-size:14px; line-height:20px; }
#message { flex:1; display:flex; flex-direction:column; justify-content:center; transition:width 200ms ease-in-out; }
#message .heading { padding-inline-end: 32px; color: var(--text-default);  }
#message .paragraph { color: var(--brand-color-text); }

.top { padding:0 16px 16px 16px; border-bottom:1px solid var(--border-default); }
.top .heading-5 { margin-bottom: var(--spacing-05x); }
#close-link { display:flex; justify-content:end; }
.feed { background-color: var(--base-depth); padding: 24px 16px 24px 16px; display:flex; flex-direction:column; gap:10px; overflow-y:scroll; }

.top .head { font-weight:600; font-size:16px; line-height:24px; }
.top .subhead { font-weight:500; font-size:14px; line-height:20px; }

.one .image { display:flex; flex:0; width:100%; }
.one .image img { object-position:center; object-fit:cover; width:100%; height:100%; aspect-ratio:4/3; border-radius: var(--border-radius-1x); }
.one .image-multi-site img { aspect-ratio:2/1; }

.powered { padding:19px 24px 16px 24px; display:flex; flex-direction:row; justify-content:space-between; align-items:center; gap:24px; font-size:14px; line-height: 20px; }
.powered { border-top:1px solid var(--border-default); }
.powered i { font-size:16px; }
.powered button, .powered a { height:48px; display:inline-flex; justify-content:center; }
.footerBookNow  { display: flex; gap: var(--spacing-2x); align-items:end; }

/*
.footerBookNow .button--plain-underlined:hover .button__text { text-decoration : none; }
*/

.weather .top { display:flex; gap:6px; }
.weather .icon { flex:0; }
.weather .icon img { height:80px; }
.weather .temp { font-size:40px; font-weight:400; align-self:center; display:flex; gap: var(--spacing-05x); }
.weather .temp-deg { font-size:12px; align-self:start; margin-top:5px; } 
.weather .right { text-align:right; white-space:nowrap; display:flex; flex-direction:column; gap: var(--spacing-05x); }
.weather .p_weather { font-size:20px; font-weight:400; }
.weather .p_day { font-size:14px; opacity:0.8; }
.weather .p_desc { font-size:14px; opacity:0.8; }
.weather .small { display:grid; grid-template-columns:1fr 1fr 1fr 1fr 1fr; gap: var(--spacing-1x); }
.weather .small .icon img { height:40px; }
.weather .wind { font-size:11px; }
.weather .one_small { display:flex; flex-direction:column; gap: var(--spacing-1x); align-items:center; }
.weather .time { opacity:0.6; font-size:12px; }

/* info bar */
.info-bar-container { position:fixed; left:16px; bottom:16px; display:flex; flex-direction:column; gap:8px; z-index:9999; }
.info-bar-container:empty { display:none; }
.info-bar-container .item { display:flex; gap:16px; padding:8px; width:375px; border-radius:var(--border-radius-2x); position:relative; align-items:center; }
.info-bar-container .item.can-close { padding-right:40px; }
.info-bar-container .item.small { border-radius:var(--border-radius-1x); padding-left:12px; padding-right:12px; }
.info-bar-container .item.small i { font-size:16px; }

.info-bar-container .item { background-color: var(--base-default); border:1px solid var(--border-default); }
.info-bar-container .item:hover { background-color: var(--base-hovered); cursor:pointer; border:1px solid var(--border-hovered); }

.info-bar-container .item.item-positive { background-color:var(--color-success); border:1px solid var(--border-default); color: var(--border-success); }
.info-bar-container .item.item-positive:hover { border:1px solid var(--border-success); }

.info-bar-container .item.item-warning { background-color:var(--color-warning); border:1px solid var(--border-warning); color: var(--border-warning); }

.info-bar-container .item .info-countdown { width:100%; height:4px; background-color:rgb(from var(--border-default) r g b / 0.4); font-size:0; }
.info-bar-container .item.item-positive .info-countdown { background-color:rgb(from var(--border-success) r g b / 0.4); }
.info-bar-container .item.item-warning .info-countdown { background-color:rgb(from var(--border-warning) r g b / 0.4); }

.info-bar-container .one-item-icon { display:flex;align-items:center;justify-content:center;font-weight:700;font-size:30px;color:var(--color-success);width:68px;height:68px;border-radius:var(--border-radius-05x);background-color:var(--border-success); }
.info-bar-container .one-item-icon i { width: 68px; }
.info-bar-container .one-item-image { width:68px; height:68px; border:1px solid var(--border-default); border-radius:var(--border-radius-05x); background-color: var(--base-default); }
.info-bar-container .one-item-image img { object-position: center; object-fit: cover; width:68px; height:68px; border-radius:var(--border-radius-05x); }

@media screen and (max-width:2000px) {
	.info-bar-container { position:static; flex-direction:row; margin-top:16px; flex-wrap:wrap; }
	.info-bar-container .item.small { display:none; }
	.info-bar-container .item { width:unset; min-width: 375px; flex:1; }
}

.hotelImage { border-radius: var(--border-radius-1x); object-position: center; object-fit: cover; width: 160px;  aspect-ratio: 16/10; }

/* headings */
.heading { margin:0; color: var(--text-default); }
.heading.h1, .heading-1 { font:42px var(--font-stack-sans-serif); font-weight:600; line-height:44px; }
.heading-2 { font:28px var(--font-stack-sans-serif); font-weight:600; line-height:32px; }
.heading-3 { font: var(--text-size-h3) var(--font-stack-sans-serif); font-weight:500; line-height:var(--line-height-h3); }
.heading-4 { font: var(--text-size-h4) var(--font-stack-sans-serif); font-weight:500; line-height:var(--line-height-h4); }
.heading-5 { font: var(--text-size-h5) var(--font-stack-sans-serif); font-weight:600; line-height: var(--line-height-h5); }
.sub-heading { font:12px var(--font-stack-sans-serif); font-weight:600; line-height:16px; text-transform:uppercase; }

.paragraph
{
	font: var(--text-size-paragraph) var(--font-stack-sans-serif);
	font-style: normal;
	font-weight: 500;
	font-size: var(--text-size-paragraph);
	line-height: var(--line-height-paragraph);
	margin: 0;
}

.paragraph.underline { text-decoration-line: underline; }
.paragraph.strong { font-weight:700; }
.paragraph.font-normal { font-weight:400; }
.paragraph.strike { text-decoration: line-through; }

.caption { font: var(--text-size-caption) var(--font-stack-sans-serif); font-weight: 400; line-height: var(--line-height-caption); }
.caption.strong { font-weight:700; }

.text--default { color: var(--text-default); }

.ReFeedBlack { color: var(--text-hovered); }
.ReFlexRow { display: flex; flex-direction: row; gap: var(--spacing-1x); justify-content: space-between; }
.reviewFeed > div.feedTitleDesc { display: grid; gap: var(--spacing-1x); }
.reviewFeed > .heading-5 { margin-bottom: 0; }
.nowrap { white-space: nowrap; }

.reviewFeedScoreBar { border: 1px solid var(--border-featured); } 
.reviewFeedScore { font-size: 14px; line-height: 20px; font-weight: 500; }
.reviewFeedScoreBarBck { height: 6px; background-color: var(--positive-default); }
.reviewFeedScoreRating { color: var(--positive-default); font-weight: 600; }
.reviewFeed .reviewFeedLogo { width: 80px; }
.reviewBlock { background-color: var(--base-default); border-radius: var(--border-radius-2x); padding: var(--spacing-2x); font-size: 14px; line-height: 20px; font-weight: 500; color: var(--text-default); }
.channelBlock { width: 100%; }
.flexColumns { display: flex; flex-flow: row; justify-content: space-between; }
.guestRatingScoreWrapper { background: var(--base-default); border-radius: var(--border-radius-2x); padding: var(--spacing-2x);}
.reviewProLogo { width: 80px; margin-top: var(--spacing-1x); }
.headerText { font-size: 12px; line-height: 16px; margin: 18px 0; } 
.reviewChannel { text-align: right; font-size: 12px; line-height: 16px; }
.channelName { font-size: 14px; color: var(--text-default); }
.channelRating { color: var(--positive-default); font-weight: 600; }

@media screen and (max-width:600px) {
	/* headings */
	.heading.h1, .heading-1 { font:27px var(--font-stack-sans-serif); font-weight:600; line-height:36px;  }
	.heading-2 { font:24px var(--font-stack-sans-serif); font-weight:600; line-height:28px; }
	.heading-3 { font:21px var(--font-stack-sans-serif); font-weight:600; line-height:28px; }
}

.subtitle.spaceTop { margin-top: 20px; }
.confirmationCTA { display: flex; flex-direction: row; gap: 20px; }

.flagSprite { vertical-align: middle; margin-top: -1px; font-size: 1px; display: inline-block; width: 16px; height: 11px; zoom: 1; }
.flagsprite { vertical-align: middle; margin-right: var(--spacing-05x); margin-top: -2px; line-height: 13px; }


.header-grid { display:flex; gap: var(--spacing-2x); flex-wrap: wrap; }
.header-grid #grid-search-area { flex: 1; display:flex; }


.heading-section__title { display:flex; flex-direction:column; gap:0px; flex:1; }
/* template header area */
#grid-control-area { align-self:center; }
#grid-search-area { align-self:center; justify-self:start; }
#control-area-links { display:flex; gap:24px; justify-content:end; align-items:center; position:relative; }

.search { display:inline-flex; gap:0px; flex: 1 1 60%; }

.page-control-panel .button.button--plain{
	padding-left: var(--spacing-1x);
	padding-right: var(--spacing-1x);
}


.page-control-panel .seperator, /* please don't use this one */
.page-control-panel .separator
{
	margin: 0 2px;
	background: var(--border-disable); 
	width: 1px;
	height: 16px;
	align-self: center;
	display: inline;
}

.page-control-panel .seperator:last-child, /* please don't use this one */
.page-control-panel .separator:last-child
{
	display: none;
}

.page-control-panel .filters{
	display:flex;
	gap:0px;
	align-items:center;
}

@media only screen and (max-width: 744px) {
	.page-control-panel .filters .filter .button__text {
		display: none;		
	}
	
	.page-control-panel .filters .filter {
		border: 1px solid var(--border-featured);
		padding: 4px 10px;
	}
	
	.page-control-panel .filters .separator {
		display: none !important;	
	}
	
	.page-control-panel .filters {
		gap: var(--spacing-1x);	
	}
}

@media only screen and (max-width: 480px) {
	.search .button__icon { 
		display: none; 
	}
	
	.page-control-panel .filters {
		margin-inline-start: auto;
	}

	.page-control-panel .filters .filter {
		padding: 4px 6px;
	}
}

@media only screen and (max-width: 380px) {

	.page-control-panel .filters .filter {
		padding: 4px;
	}
}

a i { margin-inline-end: var(--spacing-05x); vertical-align:baseline; }

/* page navigation top left */
/*
.navigation-box { display: inline-flex; gap: var(--spacing-1x); align-items:center; font-weight: 600; }
*/
.navigation-box ol { display: inline-flex; gap: var(--spacing-1x); align-items:center; font-weight: 600; list-style: none; margin: 0; padding: 0; }
.navigation-box ol li
{ 
	display: inline-flex;
	gap: var(--spacing-1x); 
	align-items:center;
}
.navigation-box ol li::after
{ 
	content: '';
	border-top:1px solid var(--border-default);
	width:24px;
	display: block;
}

.navigation-box ol li:last-child:after
{ 
	display: none;
}
.navigation-box i.next { opacity: 0.8; }
.navigation-box-small { display:none; position:relative; }
.navigation-box .paragraph { font-weight: 600; }
/*#navigation-box-small-details { display:none; position:absolute; background-color:#fff; top:40px; z-index:500; width:calc(100vw - 30px); }*/
#navigation-box-small-details {
	display: none;
	position: absolute;
	background-color: var(--base-default);
	z-index: 500;
	left: 0;
	width: 100%;
	padding-left: var(--spacing-2x);
	margin-top: -16px;
}
#navigation-box-small-details > div { display:flex; gap: var(--spacing-1x); flex-direction:row; align-items:center; }

.full-ribbon-one { background-color: var(--base-default); border-bottom:1px solid var(--border-default); }

.content{ padding-top: var(--spacing-2x); position: relative; }
.content.menuOpen:after {
	content: '';
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.6);
	display: block;
	position: absolute;
	top: 0;
	z-index: 20;
}

/* popup menu on 'more' */
.menuoptionsdiv { position:absolute; top:60px; right:0; border:1px solid var(--border-default); padding: var(--spacing-2x); border-radius: var(--border-radius-2x); background-color: var(--base-default); z-index:200; }
html[dir=rtl] .menuoptionsdiv { right:unset; left:0; }
.menuoptionsdiv { display:grid; gap: var(--spacing-1x); width:350px; max-width: calc(100vw - var(--spacing-4x)); }
#bookingEngineModal .menuoptionsdiv { box-shadow: 5px 5px 5px 0 rgba(0,0,0,0.6); }
.menuoptionsdiv .button-card-horizontal::after { display:none; }
.menuoptionsdiv a i { margin-right:0; }
.menuoptionsdiv .divider { display:none; }

.content-section { background-color: var(--base-default); padding: var(--spacing-2x); border-radius: var(--border-radius-2x); }
.content-wrapper { background-color: var(--base-default); padding: var(--spacing-2x); border-radius: var(--border-radius-2x); }
.content-narrow { width: 500px; max-width:100%; margin:auto; /* reslogin */  }
.content-narrow .form-row { flex-direction:column; }

.page-layout { display:flex; flex-direction:column; gap: var(--spacing-2x); }
.page-layout-inline { display:flex; flex-direction:column; gap: var(--spacing-2x); }

.panel-footer {
	display:none;
	position:fixed; bottom:0; left:0; width: 100%;
	background-color: var(--base-default);
	padding: var(--spacing-2x);
	box-shadow: 2px 2px 10px 2px #000000aa;
}

#bookingEngineModal .panel-footer {
	z-index: 10;
}

@media only screen and (max-width:1200px) {
	.full-ribbon-one { padding:0 var(--spacing-2x); }
}

@media only screen and (max-width: 1024px) {
	.panel-footer { display:flex; }
	.privacy-policy-container { margin-bottom:40px; }
	.footer-container { padding-left:16px; padding-right:16px; }
}

@media only screen and (max-width: 744px) {

	#control-area-links { gap: var(--spacing-2x); }
	.navigation-box { display:none; }
	.navigation-box-small { display:flex; flex-direction:column; gap: var(--spacing-2x); position: initial; }
}

#inlineModalFrame { border:0; }

.upsell-container > div.section { background-color: var(--base-default);border-radius:0;border-left:none;border-top:none;border-right:none;padding:0 0 16px 0; }
.upsell-container > div.section:last-child { border-bottom:none; padding-bottom:0; }
.side-panel { position:sticky;top:16px;align-self:start; box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.10), 0px 0px 2px 0px rgba(0, 0, 0, 0.20); }
.section-heading { padding-bottom: var(--spacing-2x); margin-bottom: var(--spacing-2x); border-bottom:1px solid var(--border-default); }
.content-mixed .heading { margin-top: var(--spacing-2x); }
.content-mixed .heading:first-child { margin-top:0; }

/* details page t&c, booking summary, etc */
.heading-section { display:flex; flex-direction:row; gap: var(--spacing-1x); flex-wrap:wrap; margin-bottom: var(--spacing-1x); align-items:start; width:100%; }

/* Timeline, details, finished, myres*/
.timeline .dateMarker { line-height: 21px; }
.timeline .tMarker { vertical-align: middle; }
.timeline .dateMarkerText { vertical-align: middle; }
.timeline .bookingStage
{
	border-left: 5px solid #a0a0ad;
	margin-left: 15px;
}
.timeline .tMarker{ color: #a0a0ad;}
.timeline .bookingStage.noCancel
{
	border-left: 5px solid #df1a1a;
	color: #df1a1a;
}
.timeline .pastDate{ opacity: 0.3; }

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

COMPONENTS

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

/*
Avvio Modal
avvio-modal
*/

#bookingEngineModal { width:1200px; max-height:80vh; }
#bookingEngineModal > .avvio-modal__content 
{
	display: contents;
}

@media only screen and (max-width: 1024px){
	#bookingEngineModal .layout-guests #mainarea
	{
		padding-bottom: 80px;
	}
}

@media only screen and (max-width: 480px){
	#bookingEngineModal { max-height:95vh; }
	#bookingEngineModal .full-ribbon-one
	{
		margin-left: calc(-1 * var(--spacing-1x));
		margin-right: calc(-1 * var(--spacing-1x));
	}
}



.avvio-modal {
	--main-space: 16px;
	max-width: 1000px;
	margin: 0 auto;
	/* position: relative; */
	display: flex;
	flex-direction: column;
	height: 100vh;
	background: var(--base-default);
	border-radius: var(--border-radius-3x);
	overflow: hidden;
	inset: 50% 50%;
	/* perspective is fix for chrome glitch where 1px movement on inital hover. Problem with blur on FF
	transform: perspective(1px) translate(-50%, -50%);
	*/
	transform: translate(-50%, -50%);
	position: fixed;
	box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2), 0px 2px 10px rgba(0, 0, 0, 0.1);
}

.darkmode .avvio-modal {

	box-shadow: 0px 0px 2px rgba(255, 255, 255, 0.2), 0px 2px 10px rgba(255, 255, 255, 0.1);
}

.avvio-modal__background {
	position: fixed;
	z-index: 99998;
	inset: 0;
	width: 100dvw;
	height: 100dvh;
	background-color: rgba(0, 0, 0, 0.5);
	-webkit-transition: background-color 200ms linear;
	-ms-transition: background-color 200ms linear;
	transition: background-color 200ms linear;
}

.avvio-modal__background:before {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	backdrop-filter: blur(1px);
}

/* Makes sure modals inside modals stack properly */
.avvio-modal .avvio-modal__background{ z-index: 99998;}
.avvio-modal .avvio-modal{ z-index: 99999;}

html[dir=rtl] .avvio-modal
{
	transform: translate(50%, -50%);
}

.avvio-modal {
	width:     1000px;
	max-width: 100%;
	max-height: 748px;
	overflow: visible !important;
	z-index: 99999;
	height: fit-content;

	-ms-scroll-chaining: none;
	overscroll-behavior: contain;
}

.avvio-modal:focus-visible {
	outline: none;
}

.avvio-modal .avvio-modal{
	max-height: 80%;
	width: 80%;
	height: -moz-fit-content;
	height: fit-content;

}

.avvio-modal__header{
	/* TODO: RD thinks this should be padding: 0 0 16px 0 */
	/* padding: 16px 12px 16px 16px; */
	padding-block-end: var(--spacing-2x);
	padding-inline-start: var(--spacing-2x);
	display: flex;
	align-items: start;
	justify-content: space-between;
	border-bottom: 1px solid var(--border-default);
/*	transform: translate3d( 0, 0, 0 ); */
}

.avvio-modal__header.noheader { padding: 0; border-bottom:none; }

.avvio-modal__heading {
	padding-top: 32px;
	margin: 0;
	color: var(--text-default);
}

.avvio-modal__header .closeModal, .closelink {
	margin-inline-start: auto;
	margin-block-end: auto;

}

.avvio-modal__content {
	display: flex;
	display: contents;
	flex-direction: column;
	overflow: auto;
	flex-grow: 1;
	border-radius: 0 0 var(--border-radius-3x) var(--border-radius-3x);
/*	transform: translate3d( 0, 0, 0 );  */
/*  RD: The line above causes the modal to have another scroll */
}

.calendar-modal .avvio-modal__content{
	display: flex;
}

.avvio-modal__top {
	padding: 0 var(--spacing-2x);
}

.avvio-modal__main {
	padding: var(--main-space, 16px);
	overflow: auto;
	border-radius: 0 0 var(--border-radius-3x) var(--border-radius-3x);
	/*border-top: 1px solid var(--border-default);*/

}

.avvio-modal__main--scroll
{
	background: var(--background-surface);
	flex-grow: 1;
}

.avvio-modal__footer {
	padding: var(--main-space, 16px);
	background: var(--base-default);
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-radius: 0 0 var(--border-radius-3x) var(--border-radius-3x);
}

@media only screen and (max-width: 480px){
	.avvio-modal
	{
		max-width: 100dvw;
		max-height: 90dvh;
	}

	.avvio-modal__main {
		border-radius: 0;
		padding: var(--spacing-1x);
	}
}

.avvio-modal__content::-webkit-scrollbar {
	display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.avvio-modal__content {
	-ms-overflow-style: none; /* IE and Edge */
	scrollbar-width: none; /* Firefox */
}

@media only screen and (max-width: 744px)
{
	.avvio-modal {
		inset: auto 50% 0;
		transform: translateX(-50%) !important;
		max-width: 100% !important;
		border-radius: var(--border-radius-3x) var(--border-radius-3x) 0 0;
		max-height:95dvh;
	}

	[dir="rtl"] .avvio-modal
	{
		inset: auto auto 0 50% !important;
	}

	.avvio-modal .avvio-modal{
		width: 100%;

	}

	.avvio-modal__content {
		border-radius: 0;
	}

}

.avvio-modal[id^="roomGalleryModal_"],
.avvio-modal[id^="roomVideos_"],
.avvio-modal[id^="room3D_"],
.calendar-modal,
.avvio-modal[id^="auxCalendarModal"],
.avvio-modal--big
{
	width: 1440px;
	max-height: 1024px; 
	max-height: 95dvh;
}

.calendar-modal,
.avvio-modal[id^="auxCalendarModal"],
.avvio-modal[id^="roomGalleryModal_"],
.avvio-modal[id^="roomVideos_"],
.avvio-modal--big {
	width:944px;
}

.avvio-modal[id^="roomGalleryModal_"] .avvio-modal__main--scroll,
.avvio-modal[id^="roomVideos_"] .avvio-modal__main--scroll
{
	background: var(--base-default);
}

@media only screen and (max-height: 880px)
{
	.avvio-modal[id^="roomGalleryModal_"] .gallery__slides,
	.avvio-modal[id^="roomVideos_"] .gallery__slides{
		max-width: 600px;
	}

	.calendar-modal  {
		max-height: 95dvh;
	}

	.avvio-modal {
		max-height: 95dvh;
	}
}

@media only screen and (max-width: 480px)
{
	.avvio-modal[id^="roomGalleryModal_"],
	.avvio-modal[id^="roomVideos_"],
	.avvio-modal[id^="room3D_"],
	.calendar-modal,
	.avvio-modal[id^="auxCalendarModal"],
	.avvio-modal--big{
		max-height: 100dvh;
	}
}

@media only screen and (max-height: 748px) and (min-width: 480px){

	.avvio-modal
	{
		max-height: 100% !important;

	}
}

/*
Button
button
*/

.button
{
	display: flex;
	gap: var(--spacing-1x);

	cursor: pointer;

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

	padding: 14px;

	border-radius: var(--border-radius-1x);
	border: 1px solid var(--border-featured);

	white-space:nowrap;
}

/* Has to be the first to get less priority */
.button,
.button--secondary
{
	color: var(--text-default);
	border-color: var(--border-featured);
	background-color: var(--base-default);
}

/* Has to be the first to get less priority */
.button:hover,
.button--secondary:hover
{
	color: var(--text-hovered);
	border-color: var(--border-hovered);
	background-color: var(--background-hovered);
}

/* Has to be the first to get less priority */
.button:active,
.button--secondary:active
{
	color: var(--text-pressed);
	border-color: var(--border-pressed);
	background-color: var(--background-pressed);
}

.button__icon{
	font-size: 16px;
}

.button--plain
{
	border: none;
	padding: var(--spacing-2x) 0;
	background-color: transparent;
}

.button--plain:hover,
.button--plain:active
{
/*	background-color: var(--text-white); */
	background-color: transparent;
}
.button--plain sup
{
	font-size: 10px;
	display: inline-block;
	margin-top: -4px;
}

.button--branded
{
	color: var(--text-over-branding);
	background-color: var(--branding-default);/* var(--brand-color-background); */
	border: 1px solid var(--border-surface);/* rgba(0,0,0,0.08); */
}

.button--branded:hover
{
	color: var(--text-over-branding);
	background-color: var(--branding-hovered);
	border: 1px solid var(--border-surface);/* rgba(0,0,0,0.08); */
}

.button--branded:active
{
	color: var(--text-over-branding);
	background-color: var(--branding-pressed);
	border: 1px solid var(--border-surface);/* rgba(0,0,0,0.08); */
}

.button--primary
{
	color: var(--brand-color-text);
	background-color: var(--base-default);
	border-color: var(--brand-color-border);
}

.button--primary:hover
{
	color: var(--brand-hovered-text);
	border-color: var(--brand-hovered-border);
}

.button--primary:active
{
	color: var(--brand-pressed-text);
	border-color: var(--brand-pressed-border);
}

.button:disabled,
.button.disabled
{
	cursor: default;
	color: var(--text-disable);
	background-color: var(--base-default);
	border-color: var(--text-disable);
}

.button--underlined .button__text
{
	text-decoration: underline;
}

.button--small
{
	padding: var(--spacing-05x);
	gap: var(--spacing-05x);
	line-height: 20px;
}

.button--small .button__icon
{
	font-size: 12px;
	line-height: 20px;
}

.button--small .button__text
{
	font-size: 12px;
	line-height: 20px;
}

/* button--medium added by MG, not in design system */
.button--medium
{
	padding: var(--spacing-1x);
	gap: var(--spacing-1x);
	line-height: 20px;	
}

.button--medium .button__icon
{
	font-size: 12px;
	line-height: 20px;
}

.button--medium .button__text
{
	font-size: 12px;
	line-height: 20px;
}

.button--inline
{
	display: inline-flex;
	padding: 0;
	margin:  0;
	margin-inline-start: var(--spacing-05x);
}

/*
Button Card Vertical
card-button
*/
.card-button, .card-button:visited{
	box-sizing: border-box;
	display: flex;
	color: var(--text-hovered);
	cursor: pointer;
	flex-direction: column;
	padding: var(--spacing-2x);
	gap: var(--spacing-2x);
	background: var(--base-default);
	border: 1px solid var(--border-default);
	border-radius: var(--border-radius-2x);
	text-decoration: none;
}
.card-button__image, .card-button img{
	max-width: 100%;
	border-radius: var(--border-radius-2x);
}

.card-button .card-button__title{
	color: var(--brand-color-text);
}
.card-button:hover{
	background: var(--base-hovered);
	border: 1px solid var(--border-hovered); 
}

.card-button:hover .card-button__text{
	color: var(--text-hovered);
}

.card-button:active{
	background: var(--base-pressed);
	border: 1px solid var(--border-pressed);
}

.card-button:active .card-button__text{
	color: var(--text-pressed);
}

.card-button--secondary .card-button__title{
	color: var(--text-default);
}

/*
 * ExpandableText
 * expandable-text
 */

.expandable-text__long
{
	display: none;
}

/*
Gallery
Gallery
*/

.gallery{
	box-sizing: border-box;
	position: relative;
	display: flex;
	align-items: stretch;
	flex-wrap: wrap;
}

.gallery__slider{
	width: 100%;
	position: relative;
	text-align: center;
}

.gallery__slides{
	aspect-ratio: 4 / 3;
	width: 100%;
	overflow: hidden;
	margin: 0 auto;
	position: relative;
	text-align: center;
	max-width: 800px;
}

@supports not (aspect-ratio: 4 / 3) {
	.gallery__slides{
		height: -webkit-fill-available;
	}

}

.gallery__main-image {
/*	transition: all .25s; */
	transform: translateX(-200%);
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	height: 100%;
	max-width: 100%;
	-webkit-user-drag: none;
	-khtml-user-drag: none;
	-moz-user-drag: none;
	-o-user-drag: none;
	user-drag: none;
	border-radius: var(--border-radius-2x);
}

.gallery__main-image.next + .gallery__main-image:not(.current) {
	transform: translateX(200%);
}

.gallery__main-image.prev {
	z-index: 10;
	transform: translateX(-100%);
}

.gallery__main-image.current {
	z-index: 10;
	transform: translateX(0);
	position: static;
	opacity: 1;
}

.gallery__main-image.next {
	z-index: 10;
	transform: translateX(100%);
}

.gallery__prev, .gallery__next {
	position: absolute;
	top: calc(50% - 12px);
}

.gallery__prev {
	left: 0px;
	z-index: 20;
}

html[dir=rtl] .gallery__prev {
	left: auto;
	right: 0px;
	transform: scaleX(-1);
}

.gallery__next {
	right: 0px;
	z-index: 20;
}

html[dir=rtl] .gallery__next {
	right: auto;
	left: 0px;
	transform: scaleX(-1);
}
.gallery__carousel{
	position: relative;
	width: 100%;
	overflow: hidden;
	margin: var(--spacing-2x) auto 0;
}

.gallery__carousel-images{
	position: relative;
	display: flex;
	width: fit-content;/* 100%; */
	gap: var(--spacing-1x);
	transition: all 0.5s;
	left: 0;
	margin: 0 auto;
}

.gallery__thumb-image{
	cursor: pointer;
	width: 134px;
	aspect-ratio: 4 / 3;
	border-radius: var(--border-radius-1x);
}

.gallery__thumb-image.current{
	opacity: 0.6;
}

.gallery__counter{
	margin-bottom: 10px;
	text-align: center;
	width: 100%;
}

.gallery__video-iframe
{
	max-width: 100%;
	max-height: 100%;
	border-radius: var(--border-radius-2x);
}

@media only screen and (max-width: 744px)
{

	.button-icon.gallery__prev, .button-icon.gallery__next {
		top: initial;
		bottom: initial;
		display:inline-flex;
		position: relative;
	}

	.gallery__carousel {
		margin-top: 0;
		overflow: auto;
	}

}

@media only screen and (max-width: 480px)
{

	.gallery__thumb-image{
		width: 143px;
	}


}

/* Hide scrollbar for Chrome, Safari and Opera */
.gallery__carousel::-webkit-scrollbar {
	display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.gallery__carousel {
	-ms-overflow-style: none;  /* IE and Edge */
	scrollbar-width: none;  /* Firefox */
}

/* Gallery Animations */

@keyframes from-left-side {
	from {
		transform: translateX(-100%);
		opacity: 0;
	}
	to {
		transform: translateX(0);
		opacity: 1;
	}
}

@keyframes from-right-side {
	from {
		transform: translateX(100%);
		opacity: 0;
	}
	to {
		transform: translateX(0);
		opacity: 1;
	}
}

.enter-stage {
	animation-duration: 250ms;
	animation-timing-function: ease-in;
	transform: translateX(0);
	opacity: 1;
}

.leave-stage {
	animation-duration: 250ms;
	animation-timing-function: ease-out;
	animation-direction: reverse;
	opacity: 0;
}

.in-stage {
	transform: translateX(0);
	opacity: 1;
}

.enter-stage--left {
	animation-name: from-left-side;
}

.enter-stage--right {
	animation-name: from-right-side;
}

.leave-stage--left {
	animation-name: from-left-side;
	transform: translateX(-100%);
}

.leave-stage--right {
	animation-name: from-right-side;
	transform: translateX(100%);
}

/*
Badge
badge
*/

.badge{
	box-sizing: border-box;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	padding: var(--spacing-1x);
	background: var(--base-default);
	border: 1px solid var(--border-default);
	border-radius: 50px;
	gap: 20px;
	width: fit-content;
	font-size: 14px;
	cursor: pointer;
}

.badge__icon{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	isolation: isolate;
	width: 48px;
	height: 48px;
	background: var(--brand-color-background);
	border-radius: 48px;
	position: relative;

}

.badge__num{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	color: #fff;
	position: absolute;
	width: 25px;
	height: 25px;
	background: var(--critical-default);
	border-radius: 25px;
	left: calc(50% - 25px/2 + 19px);
	top: calc(50% - 25px/2 - 17px);

}

.badge__icon i{
	width: 21px;
	height: 24px;
	font-size: 24px;
	line-height: 24px;
	color: #fff;
}

.badge__title, .badge__text{
	margin-right: 10px;
}

.badge:hover{
	background: var(--base-hovered);
}

.badge:hover .badge__icon{
	background: linear-gradient(0deg, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.16)), var(--brand-color-background);
}

.badge:hover :is(.badge__title, .badge__text){
	color: var(--text-hovered);
}

.badge:active{
	background: var(--base-pressed);
}

.badge:active .badge__icon{
	background: linear-gradient(0deg, rgba(0, 0, 0, 0.32), rgba(0, 0, 0, 0.32)), var(--brand-color-background);
}

.badge:active :is(.badge__title, .badge__text){
	color: var(--text-pressed);
}

/*
Selectable Card Inline
selectable-card-inline
*/
.selectable-card-inline{
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	padding: var(--spacing-2x);
	gap: var(--spacing-1x);
	background: var(--base-default);
	border-radius: var(--border-radius-1x);
	cursor: pointer;
	border: 1px solid #fff;
	color: var(--text-default);
}

.selectable-card-inline:hover{
	background: var(--base-hovered);
	border: 1px solid var(--text-hovered);
	color: var(--text-hovered);
}

.selectable-card-inline:active{
	color: var(--text-pressed);
}

.selectable-card-inline__text{
	display: inline-block;
}

.selectable-card-inline--selected::after{
	content: "\f00c";
	font-family: var(--font-awesome);
}

/*
Card Large
card-large
*/
.card-large{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 30px;
	padding: var(--main-space);
	border: 1px solid var(--border-default);
	border-radius: var(--border-radius-2x);
	background: var(--base-default);
	box-sizing: border-box;
	color: var(--text-default);
	justify-items: stretch;
}

.card-large__image{
	border-radius: var(--border-radius-2x);
	max-width: 100%;
}

.card-large__details{
	display: grid;
	grid-template-rows: auto auto 1fr;
}

.card-large__title {
	margin: 0 0 5px 0;
}

.card-large__description{
	word-break: break-word;
	margin-bottom: 20px;
	font-size: 14px;
}

.card-large__ctas > *{
	width: 100%;
	align-self: end;
	margin-top: var(--spacing-2x);
}

.card-large__text{
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.card-large__text > *{
	width: calc(50% - 10px);
}

.card-large__item{
	font-size: 12px;
	color: var(--text-default);
}

.card-large__ctas{
	display: flex;
	flex-wrap: wrap;
}

@media only screen and (max-width: 480px){
	.card-large {
		display: block;
	}
}

/*
Banner
banner
*/

.banner
{
	--banner-background-color: var(--background-depth);
	--banner-border-color:     var(--border-default);
	--banner-text-color:       var(--text-default);

	display: flex;
	align-items: center;

	padding: var(--spacing-2x);
	gap: var(--spacing-1x);

	border: 1px solid var(--banner-border-color);
	border-radius: var(--border-radius-1x);

	background-color: var(--banner-background-color);
	color: var(--banner-text-color);
}

.banner__text
{
	display: flex;
	flex-direction: column;
	gap: var(--spacing-05x);
}

.banner .button
{
	background-color: transparent;
}

/* Needs the specificity */
.banner .banner__icon
{
	line-height: 20px;
	align-self: flex-start;
}

.banner .banner__icon,
.banner .banner__title,
.banner .banner__paragraph,
.banner .banner__caption
{
	color: var(--banner-text-color);
	margin: 0;
}

.banner--small
{
	padding: 0 8px;
}

.banner--small .banner__text
{
	flex-direction: row;
	padding: var(--spacing-1x) 0;
}

.banner--small .banner__icon
{
	width: 24px;
	line-height: 24px;
	padding: 0 4px;
	align-self: center;
}

.banner--small .banner__content
{
	display: flex;
	flex-direction: row;
	gap: var(--spacing-1x);
	align-items: center;
}

.banner--default
{
	--banner-background-color: var(--background-depth);
	--banner-border-color:     var(--border-default);
}

.banner--success
{
	--banner-background-color: var(--color-success);
	--banner-border-color:     var(--border-success);
	--banner-text-color:	   var(--border-success);
}

.banner--warning
{
	--banner-background-color: var(--color-warning);
	--banner-border-color:     var(--border-warning);
	--banner-text-color:	   var(--border-warning);
}

.banner--critical
{
	--banner-background-color: var(--color-critical);
	--banner-border-color:     var(--border-critical);
	--banner-text-color:	   var(--border-critical);
}

.banner--branded
{
	--banner-background-color: var(--background-surface);
	--banner-border-color:     rgba(var(--brand-color-rgb-values), 0.08);
	--banner-text-color:       var(--brand-color-text);
}

.banner--branded-ghost
{
	--banner-background-color: transparent;
	--banner-border-color:     var(--brand-color-border);
	--banner-text-color:       var(--brand-color-text);
}

.discount-box
{
	position: absolute;
	top: 32px;
	display: flex;
	gap: var(--spacing-1x);
}

/*
Button Card Horizontal
button-card-horizontal
*/

.button-card-horizontal, .button-card-horizontal:visited{
	box-sizing: border-box;
	display: flex;
	color: var(--text-hovered);
	cursor: pointer;
	padding: var(--spacing-1x);
	gap: var(--spacing-1x);
	background: var(--base-default);
	border: 1px solid var(--border-default);
	border-radius: var(--border-radius-1x);
	text-decoration: none;
	align-items: center;
}

.button-card-horizontal__image, .button-card-horizontal img{
	max-width: 80px;
	border-radius: var(--border-radius-05x);
}

.button-card-horizontal__details {
	flex: 1;
}

.button-card-horizontal .button-card-horizontal__title{
	color: var(--brand-color-text);
	font-size: 14px;
}
.button-card-horizontal:hover{
	background: var(--base-hovered);
	border: 1px solid var(--border-hovered);
}

.button-card-horizontal__text{
	font-size: 12px;
	font-weight: 400;
	margin: 0;
}

.button-card-horizontal:hover .button-card-horizontal__text{
	color: var(--text-hovered);

}

.button-card-horizontal:active{
	background: var(--base-pressed);
	border: 1px solid var(--border-pressed);
}

.button-card-horizontal:active .button-card-horizontal__text{
	color: var(--text-pressed);
}

.button-card-horizontal--secondary .button-card-horizontal__title{
	color: var(--text-default);
}

.button-card-horizontal.selected, .slect.selected { border: 1px solid #000; }
.button-card-horizontal:after, .select:after {
	content: '';
	font-family: var(--font-awesome);
	font-weight: 400;
	margin-left: auto;
	font-size:  var(--spacing-2x);
	margin-right: var(--spacing-1x);;
}

.button-card-horizontal.selected:after, .select.selected:after {
	content: '\f00c';
}

.button-card-horizontal.expandable {
	padding: var(--spacing-2x);
	display: flex;
	gap: var(--spacing-2x);
	border-radius: var(--border-radius-2x);
	width: 100%;
	text-align: left;
}

html[dir=rtl] .button-card-horizontal.expandable {
	text-align: right;
}

.button-card-horizontal.expandable::after {
	display:none;
}

.button-card-horizontal.expanded {
	/*background-color: #fff;*/
	border-bottom:none;
	border-color: var(--border-default);
	border-radius: var(--border-radius-2x) var(--border-radius-2x) 0 0;
	color: var(--text-pressed);
}

.button-card-horizontal.disabled {
	cursor: initial;
}

.button-card-horizontal.disabled:hover {
	background: var(--base-default);
	border: 1px solid var(--border-default);
	border-bottom:none;
}

.button-card-icon-container {
	display:flex;
	align-items:center;
	justify-content:center;
	background-color: var(--text-default);
	color: var(--base-default);
	border-radius: var(--border-radius-3x);
	width:32px;
	height:32px;
}
.expanded .button-card-icon-container {
	background-color:var(--text-pressed);
}
.expanded .button-card-horizontal__title {
	color:var(--text-pressed);
}
.button-card-icon-container i { margin-right:0; }


.expandable-card-section {
	--expandable-width: 100%;
	padding: var(--spacing-2x);
	/*background-color: #ebebeb;*/
	border:1px solid var(--border-default);
	border-radius:0 0 var(--border-radius-2x) var(--border-radius-2x);
	width: var(--expandable-width);
}

@media only screen and (max-width: 480px){
	.expandable-card-section {
		/* TS this is used because of an issue on ios where if text is long enough without whitespace it pushes div past 100%
			Normal css rules don't seem to work but only on mobile devices. 
			In JS we change the mobile var here to the width of the expanded div parent wrapper width
		*/
		--expandable-mobile-width: 100%;
		--expandable-width: var(--expandable-mobile-width);
	}
}

/*
Selectable Card Horizontal
selectable-card-horizontal
*/

.selectable-card-horizontal, .selectable-card-horizontal:visited{
	box-sizing: border-box;
	display: flex;
	color: var(--text-hovered);
	cursor: pointer;
	padding: var(--spacing-1x);
	gap: var(--spacing-1x);
	background: var(--base-default);
	border: 1px solid var(--border-default);;
	border-radius: var(--border-radius-1x);
	text-decoration: none;
	align-items: center;
}

.selectable-card-horizontal__image, .selectable-card-horizontal img{
	max-width: 80px;
	border-radius: var(--border-radius-05x);
}

.selectable-card-horizontal .selectable-card-horizontal__title{
	color: var(--text-default);
	font-size: 14px;
}
.selectable-card-horizontal:hover{
	background: var(--base-hovered);
	border: 1px solid var(--border-hovered);
}

.selectable-card-horizontal__text{
	font-size: 12px;
	font-weight: 400;
}

.selectable-card-horizontal:hover .selectable-card-horizontal__text{
	color: var(--text-hovered);

}

.selectable-card-horizontal:active{
	background: var(--base-pressed);
	border: 1px solid var(--border-pressed);
}

.selectable-card-horizontal:active .selectable-card-horizontal__text{
	color: var(--text-pressed);
}

.selectable-card-horizontal--secondary .selectable-card-horizontal__title{
	color: var(--text-default);
}

/*
Button Icon
button-icon
*/

.button-icon{
	display: flex;
	align-items: center;
	justify-content: center;

	width:  48px;
	height: 48px;

	background: transparent;
	font-size: 16px;
	padding: var(--spacing-1x);
	border: none;
	cursor: pointer;
}

.button-icon .button-icon__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;

	width: 24px;
	height: 24px;

	color: var(--text-default);

	border-radius: 18px;
}

.button-icon:focus
{
	border-radius: var(--border-radius-05x);
}

.button-icon:hover:not(.disabled) .button-icon__icon {
	color: var(--text-hovered);
	border: 1px solid var(--border-hovered);
	background-color: var(--background-hovered);
}

.button-icon:active:not(.disabled) .button-icon__icon {
	color: var(--text-pressed);
	border: 1px solid var(--border-pressed);
	background-color: var(--background-pressed);
	outline: none;
}

.button-icon:disabled, .button-icon.disabled {
	cursor: initial;
}

.button-icon:disabled .button-icon__icon, .button-icon.disabled .button-icon__icon {
	color: var(--text-disable);
}

/* secondary */

.button-icon--secondary .button-icon__icon{
	border: 1px solid var(--border-hovered);
}

/* branded */

.button-icon.button-icon--branded .button-icon__icon
{
	margin: 0;
	color: var(--text-over-branding);
	background-color: var(--branding-default);
	border: 1px solid var(--border-surface);
}

.button-icon.button-icon--branded:hover:not(.disabled) .button-icon__icon
{
	color: var(--text-over-branding);
	background-color: var(--branding-hovered);
	border: 1px solid var(--border-surface);
}

.button-icon.button-icon--branded:active:not(.disabled) .button-icon__icon,
.button-icon.button-icon--branded:visited:not(.disabled) .button-icon__icon
{
	background-color: var(--branding-pressed);
}


.button-icon--branded.disabled .button-icon__icon,
.button-icon--branded.disabled:hover .button-icon__icon
{
	background: none;
	color: var(--text-disable);
}

.button__icon.fad {
	/*--fa-primary-color: var(--text-default);*/
	--fa-secondary-color: var(--brand-color);
}

/*
Button Rounded
button-rounded
*/

.button-rounded{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 10px var(--spacing-2x);
	gap: 10px;
	background: var(--brand-color-background);
	border: 5px solid #fff;
	border-radius: 40px;
	color: #fff;
	text-decoration: none;
	outline: 1px solid var(--border-default);
}

.button-rounded:focus{
	outline-color: #000;
}


.button-rounded:hover{
	outline-color: var(--border-hovered);
	background: linear-gradient(0deg, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.16)), var(--brand-color-background);
}

.button-rounded:active{
	background: linear-gradient(0deg, rgba(0, 0, 0, 0.32), rgba(0, 0, 0, 0.32)), var(--brand-color-background);
}

.button-rounded:disabled,
.button-rounded.disabled{
	outline-color: var(--border-hovered);
	color: var(--color-disabled);
	background: var(--base-default);

}

/*
Dropdown
dropdown
*/

.dropdown {
	position: relative;
	display: flex;
	gap: var(--spacing-2x);
	background: var(--base-default);
	border: 1px solid var(--text-default);
	border-radius: 5px;
	padding: 10px;
	text-indent: 6px;
	line-height: 30px;
}

/*
Avvio Image
avvio-image
*/

.avvio-image{
	position: relative;
	display: flex; /* avoid buggy font-size margin underneath */
}

.avvio-image__galleryLabel{
	content: 'Gallery';
	background: var(--gallery-icon-base);
	padding: var(--spacing-05x);
	border-radius: var(--border-radius-2x);
	position: absolute;
	left: 8px;
	top: 8px;
	color: var(--gallery-icon-text);
	font-size: 12px;
	cursor: pointer;
}

html[dir=rtl] .avvio-image__galleryLabel{
	left: initial;
	right: 8px;
}

.avvio-image__galleryLabel-icon{
	margin-right: var(--spacing-05x);
}

html[dir=rtl] .avvio-image__galleryLabel-icon{
	margin-left: var(--spacing-05x);
	margin-right: 0;
}

.avvio-image__galleryLabel + .avvio-image__image{
	cursor: pointer;
}
.avvio-image:hover .avvio-image__galleryLabel {
	background: var(--gallery-icon-hovered);
}
.avvio-image:active .avvio-image__galleryLabel{
	background: var(--gallery-icon-pressed);
}

/*
Avvio Amenities
avvio-amenities
*/
.avvio-amenities {
	display: grid;
	grid-template-columns: 1fr 1fr;
	margin:0;
	gap: var(--spacing-05x);
	padding-left: 20px;
}

.avvio-amenities li {
	padding-right: 20px;
}
/* Incentives */
.avvio-incentives {
	display: flex;
	gap: var(--spacing-05x);
	flex-wrap: wrap;
	list-style-type: none;
	padding: 0;
	margin: 0;
}
.avvio-incentives__item {
	padding: var(--spacing-05x);
	background: rgba(var(--brand-color-rgb-values), 0.08);
	font-size: 12px;
	font-weight: 400;
}

@media screen and (max-width:744px) {
	.avvio-amenities {
		grid-template-columns: 1fr;
	}
	
	.avvio-incentives .avvio-incentives__item:nth-child(n+3) { display:none; }
}

/*
Card
card  (kept for compatibility reasons with RE, use card-information instead!)
*/

.card {
	display: flex;
	flex-wrap: wrap;
	column-gap: 10px;
	align-items: start;
	padding: var(--main-space, 16px);
	border-radius: var(--border-radius-1x, 16px);
	border: 1px solid var(--border-default);
	background: var(--base-default);
	justify-content: space-between;
}

.card__image-holder{
	flex: 0 0 auto;
}

.card__image{
	width: 165px;
	border-radius: var(--border-radius-1x);
}

.card__content{
	align-self: start;
	flex: 1;
}

.card__tags{
	display: flex;
	gap: 5px;
	flex-wrap: wrap;
}

.card__tag{
	padding: 5px;
	background: rgba(var(--brand-color-rgb-values), 0.08);
	font-size: 12px;
}

.card__title{
	color: var(--brand-color-text, #000);
	margin-bottom: 6px;
}


.card:has(img[src*="noimage"]) .card__title{
	flex-basis: 100%;
	align-self: start;
}

.card__plain-buttons{
	/*flex-basis: 100%;*/
	gap: var(--main-space, 16px);
	margin: 4px 0 0 0;
	display: flex;
	flex-wrap: wrap;
}

.card > .card__plain-buttons {
	min-height: 30px;
	align-items: flex-end;
	flex-basis: 100%;
	display: none;
}

.card > .card__plain-buttons button{
	padding: 0;
}

.card__description{
	word-break: break-word;
	flex-basis: 100%;
	margin: 10px 0;
}

.card__price{
	color: var(--brand-color-text);
}

.card__cta-info{
	margin-inline-start: auto;
	display: flex;
	gap: var(--main-space, 16px);
	align-items: center;
	align-self: end;
	white-space: nowrap;
}


.card__price-details{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: end;
}

.card__price, .card__sub-price{
	color: var(--brand-color-text);
}
.card__sub-price{
	width: 100%;
	display: flex;
	justify-content: flex-end;
	align-items: baseline;
}
.card__sub-price__figure{
	font-size: 14px;
	font-weight: 500;
}
.card__sub-price__desc{
	font-size: 12px;
	font-weight: 400;
	text-transform: capitalize;
}

.card__strikeprice{
	text-decoration: line-through;
	display: block;
	margin-right: var(--spacing-05x);
}

.card__extra{
	font-size: 12px;
	width: 100%;
}

.card--vertical > div{
	flex-basis: 100%;
}

.card--vertical .card__image-holder{
	order: 1;
}

.card--vertical .card__image-holder img{
	width: 100%;
}

.card--vertical .card__content{
	order: 0;
}

.card--vertical .card__cta-info{
	order: 2;
}


@media only screen and (max-width: 744px)
{

	.card{
		/*display: block; */
		gap: 10px;
	}

	.card__image-holder{
		order:2;
		flex-basis: calc(50% - var(--spacing-1x));
	}

	.card__content {
		order: 1;
		flex-basis: 100%;
	}

	.card__cta-info {
		margin-top: 0;
		margin-left: 0;
		order: 3;
		flex-wrap: wrap;
		justify-content: end;
		flex-basis: calc(50% - var(--spacing-1x));

	}

	.card__price-details{
		flex-basis: 100%;
	}

	.card__strikeprice{

	}

	.card__button{
		flex-basis: 60%;
		margin-top: 0px;
	}
}

/* media querys to hide elements on different devices*/
@media screen and (min-width:1201px) {
	.hideOnDesktop { display: none !important; }
}
@media screen and (min-width: 481px) and (max-width:1200px) {
	.hideOnTablet { display: none !important; }
}
@media screen and (max-width:480px) {
	.hideOnMobile { display: none !important; }
}

/*
 * CardInformation
 * card-information
 */

.card-information
{
	display: flex;
	flex-direction: column;
	padding: var(--spacing-2x);
	align-items: center;
	border-radius: var(--border-radius-2x);
	border: 1px solid var(--border-default);
	background-color: var(--base-default);
	gap: var(--spacing-2x);
	position: relative;
}

.card-information__info-container
{
	display: flex;
	width: 100%;
}

.card-information__header-area
{
	display: flex;
	width: 100%;
}


.card-information__info-area
{
	display: flex;
	flex-direction: column;
	/* flex-basis: 100%; */
	flex-grow: 1;
	align-items: flex-start;
}

.card-information__image-area
{
	margin-inline-end: var(--spacing-2x);
}

.card-information__title
{
	padding: 0;
}

.card-information__title--first-level > .button__text
{
	line-height: 28px;
	font-size: 20px;
	font-style: normal;
	font-weight: 500;
}

.card-information__title--second-level > .button__text
{
	line-height: 20px;
	font-size: 16px;
	font-style: normal;
	font-weight: 600;
}

.card-information__price-area
{
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: flex-start;
	margin-inline-start: var(--spacing-5x);
	gap: var(--spacing-1x);
}

.card-information__bubble-area
{
	display: flex;
	flex-direction: row;
	/*flex-grow: 1;*/
	gap: var(--spacing-05x);
}

.card-information__info-buttons
{
	display: flex;
	gap: var(--spacing-2x);
}

.card-information__bubble
{
	margin: 0;
	white-space: nowrap;
	padding: 0 4px;
/*	padding: 4px 8px;
/*	padding-bottom: 2px;  /* test correction for alignment problem */
}

.card-information__bubble .banner__caption
{
	display: flex;
	align-items: center;
	gap: var(--spacing-05x);
	height: 24px;
}

.card-information__occIcons .banner__caption
{
	align-items: baseline;
	gap: 0;
	flex-wrap: wrap;
	height: auto;
	max-width: 200px;
}

.card-information__occIcons ~ .tooltip-ctrl__tooltip,
.card-information__occGroup ~ .tooltip-ctrl__tooltip
{
	width: max-content;
}

.mda-table .card-information__bubble i.occicon,
.card-information__bubble i.occicon
{
	font-size: 14px;
	width: auto;
}

.mda-table .card-information__bubble i.occicon.childocc,
.card-information__bubble i.occicon.childocc
{
	font-size: 12px;
}

.mda-table .card-information__bubble i.occicon.occdivider,
.card-information__bubble i.occicon.occdivider 
{
	margin: 0 var(--spacing-05x); 
}

.mda-table .card-information__bubble i.occicon.occdivider,
.card-information__bubble i.occicon.occdivider 
{
	margin: 0 var(--spacing-05x); 
}

.card-information__bubble i
{
	line-height: 24px;
	width: 24px;
	font-size: 16px;
}

.card-information__price-and-button
{
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: var(--spacing-1x);
	height: 48px;
	justify-content: flex-end;
}

.card-information__price-row,
.card-information__avg-row,
.card-information__fees-row,
.card-information__added-fees-row,
.card-information__avg-adults-row
{
	display: flex;
	align-items: baseline;
	justify-content: flex-end;
	gap: var(--spacing-1x);
	flex-wrap: nowrap;
}

.card-information__avg-row,
.card-information__fees-row
{
	gap: var(--spacing-05x);
	white-space: nowrap;
}

.card-information__strike
{
	color: var(--text-default);
}

.card-information__price/*,
.card-information__avg-price,
.card-information__avg-text*/
{
	color: var(--brand-color-text);
	white-space: nowrap;
}

.card-information__book-now
{
	white-space: nowrap;
	min-width: 112px;
}

.card-information__selected-date
{
	text-align: right;
	margin-bottom: calc(-1 * var(--spacing-2x));
	margin-top: var(--spacing-3x);
	font-weight: 600;
}

html[dir=rtl] .card-information__selected-date
{
	text-align: left;
}

.card-information__content-area
{
	display: flex;
	flex-grow: 1;
	flex-direction: column;
	width: 100%;
	gap: var(--spacing-2x);
}

.card-information__content-area > :empty{ display: none; }

.card-information__title
{
	color: var(--brand-color-text);
}

.card-information__tags
{
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-05x);
}

.card-information__ribbon { position: absolute; right: 76px; top: 2px; z-index: 1; width: fit-content; height: 75px; text-align: right; border-bottom-right-radius: 100%; }
.card-information__ribbon span { font-size: 12px; color: #FFF; text-align: center; line-height: 20px; transform: rotate(40deg); -webkit-transform: rotate(40deg); width: 100px; display: block; background: #79A70A; background: linear-gradient(#666666 0%, #000000 100%); box-shadow: 0 3px 10px -5px #000000; position: absolute; top: 8px; } /* JT hardcoded */
.card-information__ribbon span::before { content: ""; position: absolute; left: 0px; top: 100%; z-index: -1; border-left: 3px solid #000000; border-right: 3px solid transparent; border-bottom: 3px solid transparent; border-top: 3px solid #000000; } /* JT hardcoded */
.card-information__ribbon span::after { content: ""; position: absolute; right: 0px; top: 100%; z-index: -1; border-left: 3px solid transparent; border-right: 3px solid #000000; border-bottom: 3px solid transparent; border-top: 3px solid #000000; } /* JT hardcoded */


.card-information__info-container .avvio-image__image
{
	border-radius: var(--border-radius-1x);
	object-position: center;
	object-fit: cover;

	width: 280px;
	aspect-ratio: 4/3;
}

.card-information--small > .card-information__info-container .avvio-image__image
{
	width: 108px;
}

.card-information__info-container .avvio-image__image,
.card-information--medium > .card-information__info-container .avvio-image__image
{
	width: 152px;
}

.card-information--large > .card-information__info-container .avvio-image__image
{
	width: 280px;
}

.card-information--extra-large > .card-information__info-container .avvio-image__image
{
	width: 320px;
}

.card-information--room-primary > .card-information__info-container .avvio-image__image,
.card-information--rate-primary > .card-information__info-container .avvio-image__image
{
	width: 320px;
	aspect-ratio: 4/3;
}
.card-information--rate-primary > .card-information__info-container .avvio-image__image
{
	width: 280px;
	aspect-ratio: 4/3;
}

.card-information--room-secondary > .card-information__info-container .avvio-image__image
{
	width: 160px;
	aspect-ratio: 16/10;
}

.card-information--large.rate-group-info > .card-information__info-container .avvio-image__image {
	width: 350px;
	aspect-ratio: 16 / 9;
	max-width: 100%;
}

.card-information__price-occ-info
{
	position: absolute;
	left:50%;
	top: -30px;
	transform: translate(-50%, 100%);
	z-index: 10;
	display: none;
	width: 200px;
	font-size: 12px;
	line-height:var(--line-height-paragraph);
}

@media only screen and (max-width: 1200px)
{
	.card-information--primary .card-information__info-container,
	.unavailable-box .card-information__info-container
	{
		flex-flow: row wrap;
	}

	.card-information--secondary .card-information__info-container,
	.list-section:not(.unavailable-box) .card-information__info-container
	{
		flex-wrap: nowrap;
	}

	.card-information--primary > .card-information__info-container .card-information__info-area
	{
		flex: 1 1 200px;
	}


	.card-information__price-area
	{
		flex-grow: 1;
	}
}

@media only screen and (max-width: 744px)
{
		
	.card-information__info-container{ gap: var(--spacing-1x); 	flex-wrap: wrap; }

	.card-information--secondary .card-information__info-container,
	.list-section:not(.unavailable-box) .card-information__info-container
	{
		gap: var(--spacing-1x);
		display: grid;
		grid-template-columns: 1fr 60%;
	}
	
	.list-vouchers.list-section .card-information__info-container
	{
		grid-template-columns: 1fr;
		gap: var(--spacing-1x) 0;
	}

	.card-information--primary > .card-information__info-container .card-information__info-area
	{
		flex: auto;
	}


	.card-information__info-area{ flex-basis: 100%; }

	.card-information--secondary .card-information__info-area,
	.list-section:not(.unavailable-box) .card-information__info-area
	{
		order: 1;
		flex-basis: 100%;
		flex-wrap: wrap;
		flex-direction: row;
		grid-column-start: 1;
		grid-column-end: 3;
		align-items: center;

	}

	.card-information--secondary.card-information--room .card-information__info-area
	{
		margin-top: calc(var(--spacing-2x) * -1);
	}

	.card-information--secondary .card-information__image-area,
	.list-section:not(.unavailable-box) .card-information__image-area
	{
		order: 2;
		margin-inline-end: 0;
	}

	.card-information--secondary .card-information__price-area,
	.list-section:not(.unavailable-box) .card-information__price-area
	{
		order: 3;
		margin-inline-start: 0;
		flex-direction: column-reverse;
	}


	.card-information--secondary .cta-box-large__buttons-holder,
	.list-section:not(.unavailable-box) .cta-box-large__buttons-holder
	{
		order: 2;
		margin-inline-start: auto;
	}

	.card-information--secondary .avvio-incentives
	{
		flex-basis: 100%;
	}

	.card-information--secondary .cta-box-large__tags,
	.list-section:not(.unavailable-box)  .cta-box-large__tags
	{
		order: 3;
		flex-basis: 100%;
	}

	.card-information--room-secondary > .card-information__info-container .avvio-image__image,
	.list-section:not(.unavailable-box) .card-information__info-container .avvio-image__image,
	.card-information--rate.card-information--secondary .card-information__info-container .avvio-image__image
	{
		max-width:100%;
		width: auto;
		aspect-ratio: 16/8;
	}
	
	.card-information--room-primary > .card-information__info-container .card-information__image-area,
	.card-information--rate-primary > .card-information__info-container .card-information__image-area
	{

		width: 100%;
	}

	.card-information--room-primary > .card-information__info-container .card-information__image-area,
	.card-information--rate-primary > .card-information__info-container .card-information__image-area,
	.card-information__info-container .card-information__image-area
	{
		margin-inline-end: 0;
		width: 100%;

	}

	.card-information--rate-primary > .card-information__info-container .avvio-image__image,
	.card-information--large > .card-information__info-container .avvio-image__image,
	.card-information--room-primary > .card-information__info-container .avvio-image__image
	{
		width: 100%;
		aspect-ratio: 16/9;
	}

	:not(.card-information__content-area) > .card-information__info-container .card-information__price-area
	{
		margin-top: var(--spacing-1x);
	}

	.card-information--secondary .card-information__bubble-area
	{
		flex-wrap: wrap;
		justify-content: end;
	}

	#partner-content .card-information__info-container
	{
		display: block;	
	}

}



@media only screen and (max-width: 480px)
{
	.card-information--room-secondary .card-information__info-container,
	.card-information--rate-secondary .card-information__info-container
	{
		grid-template-columns: 1fr 70%;
	}

	.list-section:not(.unavailable-box) .card-information__info-container .price-and-button
	{
		flex-wrap: wrap;
	}

	.card-information--room-secondary > .card-information__info-container .avvio-image__image,
	.list-section:not(.unavailable-box) .card-information__info-container .avvio-image__image
	{

		aspect-ratio: 4/3;
	}

	.card-information > .card-information__info-container .avvio-image
	{
		width: 100%;
	}

	:not(.card-information__content-area) > .card-information__info-container .card-information__price-area
	{
	/* TS what is this used for as it hides call to actions on mobile. Commenting out for now
		display: none;
	*/

	}

	.card-information__info-area
	{
		flex-direction: column;
	}

	.card-information__info-container
	{
		gap: var(--spacing-1x);
	}

	.card-information__price-area
	{
		margin-inline-start: 0;
	}

	.card-information--room-secondary .card-information__info-area,
	.card-information--room-primary .card-information .card-information__info-area
	{
		order: 1;
		flex-basis: 100%;
		flex-direction: column;
		align-items: start;
		flex-wrap: nowrap;
	}

	.card-information--room-secondary .cta-box-large__buttons-holder,
	.card-information--room-primary .card-information .cta-box-large__buttons-holder,
	.card-information--room-primary .card-information .avvio-incentives
	{
		margin-inline-start: 0;
	}

	.card-information--rate.card-information--secondary .card-information__image-area
	{
		order: 2;
	}

	.card-information__price-and-button
	{
		height: auto;
	}

	.card-information--secondary.card-information--room .card-information__info-area,
	.list-section:not(.unavailable-box) .card-information__info-area
	{
		margin-top: 0;
	}

	.card-information--secondary .cta-box-large__buttons-holder,
	.list-section:not(.unavailable-box) .cta-box-large__buttons-holder,
	.card-information--room-primary .card-information .avvio-incentives
	{
		margin-inline-start: 0;
		flex-basis: 100%;
	}

	.card-information--secondary .cta-box-large__buttons-holder,
	.list-section:not(.unavailable-box) .cta-box-large__buttons-holder
	{
		order: 3;
	}

	.card-information--secondary .cta-box-large__tags,
	.list-section:not(.unavailable-box)  .cta-box-large__tags
	{
		order: 2;
	}

}

@media only screen and (max-width: 480px)
{
	.card-information
	{
		/*min-width: 300px;*/
	}

	.card-information .card-information
	{
		width: 100%;
	}
}

/*
 * TextField
 * text-field
 */

.text-field
{
	position: relative;
	display: flex;
	align-items: center;
	height: 48px;
	overflow: hidden;
	white-space: nowrap;
}

.text-field .text-field__input,
.text-field .text-field__label
{
	display: flex;
	align-items: center;
	width:  100%;
	height: 100%;
}

.text-field .text-field__input
{
	font-size: 14px;
	border-radius: var(--border-radius-05x);
	border: 1px solid var(--border-featured);
	padding: var(--spacing-2x) var(--spacing-2x) 0;

	color: var(--text-default);
	background-color: var(--base-default);
}

.text-field .text-field__label
{
	position: absolute;
	line-height: 48px;
	height: 48px;
	font-size: 14px;
	pointer-events: none;
	left: var(--spacing-2x);

	transition-duration: 500ms;
	transform-origin: 0 0;
}

html[dir=rtl] .text-field .text-field__label
{
	left: unset;
	right: var(--spacing-2x);
}

.text-field:focus-within > label,
.text-field:focus-within > .text-field__label,
.text-field > .text-field__input:not(:placeholder-shown) + label,
.text-field > .text-field__input:not(:placeholder-shown) + .text-field__label
{
	transform: translate(0, -8px) scale(0.85);
}

/*
 * NumberField
 */

.number-field
{
	display: flex;
	align-items: center;
	height: 48px;
}

.number-field__label
{
	flex-grow: 1;
}

.number-field__input-container
{
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}

/* Hides the arrows on Chrome, Safari, Edge, Opera */
.number-field__input::-webkit-outer-spin-button,
.number-field__input::-webkit-inner-spin-button
{
	-webkit-appearance: none;
	margin: 0;
}

.number-field__input
{
	/* Hides the arrows on firefox */
	-moz-appearance: textfield;
/*	appearance: textfield; Does not hide the arrows on chrome... */
	padding: 0 var(--spacing-2x);
	display: flex;
	width: 48px;
	height: 48px;
	text-align: center;

	color: var(--text-default);
	background-color: var(--base-default);

	font-size: 14px;
	border-radius: 5px;
	border: 1px solid var(--border-featured);
}

/*
 * SelectField
 * select-field
 */

/*
.select-field
{
	position: relative;
	display: flex;
	align-items: center;
	height: 48px;
	overflow: hidden;
	white-space: nowrap;
}

.select-field .select-field__input,
.select-field .select-field__label
{
	display: flex;
	align-items: center;
	width:  100%;
	height: 100%;
}

.select-field .select-field__input
{
	font-size: 14px;
	border-radius: var(--border-radius-05x);
	border: 1px solid var(--border-featured);
	padding: var(--spacing-2x) 0;
	padding-inline-start: var(--spacing-2x);
	background-color: var(--text-white);
	font-weight: 500;
	color: var(--text-pressed);
	-webkit-appearance: caret;
	-webkit-padding-end: var(--spacing-2x);
}

.select-field .select-field__label
{
	position: absolute;
	line-height: 48px;
	height: 48px;
	font-size: 14px;
	pointer-events: none;
	left: var(--spacing-2x);

	transition-duration: 500ms;
	transform-origin: 0 0;
}

html[dir=rtl] .select-field .select-field__label
{
	left: unset;
}

.select-field:focus-within > label,
.select-field:focus-within > .select-field__label,
.select-field > .select-field__input:not(:placeholder-shown) + label,
.select-field > .select-field__input:not(:placeholder-shown) + .select-field__label
{
	transform: translate(0, -8px) scale(0.85);
}
*/

/*
 * PromoCodeModal
 */

.modal-promo-code__success,
.modal-promo-code__critical
{
	display: none;
}

.modal-promo-code__buttons
{
	display: flex;
	flex-direction: row;
	gap: var(--spacing-2x);
}

.modal-promo-code label.text-field input:focus-visible
{
	outline-color: var(--text-default);
}

/*
 * Carousel
 */

.carousel{
	border: 1px solid #ddd;
	border-radius: var(--border-radius-2x);
	background: var(--background-white);
	display: flex;
	flex-wrap: wrap;
	padding: 24px;

}

.carousel__header{
	display: flex;
	gap: var(--spacing-2x);
	align-items: center;
	flex-basis: 100%;
}

.carousel__title{
	color: var(--brand-color-text);
}

.carousel__button .button__text{
	border-color: var(--brand-color-border);
}

.carousel__button .button__text{
	color: var(--brand-color-text);
}
.carousel__nav{
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-inline-start: auto;
}


.carousel__content{

	background: var(--base-depth);
	overflow: auto;
	padding: var(--spacing-1x);
	width: 0;
	flex-basis: 100%;
	border-radius: var(--border-radius-2x);
	box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.10) inset, 0px 0px 2px 0px rgba(0, 0, 0, 0.20) inset;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.carousel__content::-webkit-scrollbar {
	display: none;
}

.carousel__items {
	position: relative;
	display: flex;
	width: fit-content;
	transition: all 0.5s;
	left: 0;
	margin: 0 auto;
}

.carousel__item{
	border-radius: var(--border-radius-2x);
	display: inline-block;
	padding: var(--spacing-1x);

}

.carousel__item *{
	max-width: 100%;

}

.tooltip-ctrl {
	position: relative;
}

.tooltip-ctrl__tooltip {
	position: absolute;
	z-index: 999;

	padding: var(--spacing-2x);
	border-radius: var(--border-radius-2x);
	border: 1px solid var(--border-default);
	background-color: var(--base-default);
	color: var(--text-default);
	font-size: 12px;

	width: 200px;
	top: 30px;
	right: 0;
/*

	left:50%;
	transform: translate(-50%, 100%);
	display: none;
	width: 200px;
	line-height:var(--line-height-paragraph);
*/
}

.mda-table .tooltip-ctrl__tooltip
{
	right: initial;
	left: 0;
}

.mda-table__tooltip-ctrl .tooltip-ctrl__tooltip
{
	margin-inline-start: -5px;
	bottom: -40px;
	top: initial;
}

@media screen and (max-width:740px) {
	.tooltip-ctrl__tooltip
	{
	
		right: 10px !important;
		left: initial !important;
	}
}

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

COMPONENTS END

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

@-webkit-keyframes fade-in-bck{
	0%{ opacity:0; transform: scale(0.95) /*translateX(-52.5%) translateY(-49.5%) translateZ(0)*/ translate3d( -52.5%, -49.5%, 0 ); }
	100%{ opacity:0.99; transform: scale(1) /*translateX(-50%) translateY(-50%) translateZ(0)*/ translate3d( -50%, -50%, 0 ); }
}
@keyframes fade-in-bck
{
	0% {
		opacity: 0;
		transform: scale(0.95) translate3d(calc(var(--rtl-correction) * -52.5%), -49.5%, 0 );
		/*translateX(-52.5%) translateY(-49.5%) translateZ(0)*/
	}
	100% {
		opacity: 0.99;
		transform: scale(1) translate3d(calc(var(--rtl-correction) * -50%), -50%, 0 );
		/*translateX(-50%) translateY(-50%) translateZ(0)*/
	}
}

@keyframes fade-out-bck
{
	0% {
		opacity: 0.99;
		transform: scale(1) translate3d(calc(var(--rtl-correction) * -50%), -50%, 0 );
		/*translateX(-50%) translateY(-50%) translateZ(0)*/
	}
	100% {
		opacity: 0;
		transform: scale(0.95) translate3d(calc(var(--rtl-correction) * -52.5%), -49.5%, 0 );
		/*translateX(-52.5%) translateY(-49.5%) translateZ(0)*/
	}
}

@-webkit-keyframes fade-in-bck-mobile{
	0%{ opacity:0; transform: scale(0.95) /*translateX(-52.5%) translateY(0) translateZ(0)*/ translate3d( -52.5%, 0, 0 );  }
	100%{ opacity:0.99; transform: scale(1) /*translateX(-50%) translateY(0) translateZ(0)*/ translate3d( -50%, 0, 0 ); }
}
@keyframes fade-in-bck-mobile{
	0%{ opacity:0; transform: scale(0.95) /*translateX(-52.5%) translateY(0) translateZ(0)*/ translate3d( -52.5%, 0, 0 ); }
	100%{ opacity:0.99; transform: scale(1) /*translateX(-50%) translateY(0) translateZ(0)*/ translate3d( -50%, 0, 0 ); }
}

@-webkit-keyframes fade-out-bck{
	0%{ opacity:0.99; transform: scale(1) /*translateX(-50%) translateY(-50%) translateZ(0)*/ translate3d( -50%, -50%, 0 ); }
	100%{ opacity:0; transform: scale(0.95) /*translateX(-52.5%) translateY(-49.5%) translateZ(0)*/ translate3d( -52.5%, -49.5%, 0 ); }
}

@-webkit-keyframes fade-out-bck-mobile{
	0%{ opacity:0.99; transform: scale(1) /*translateX(-50%) translateY(0) translateZ(0)*/ translate3d( -50%, 0, 0 ); }
	100%{ opacity:0; transform: scale(0.95) /*translateX(-52.5%) translateY(0) translateZ(0)*/ translate3d( -52.5%, 0, 0 );  }
}
@keyframes fade-out-bck-mobile{
	0%{ opacity:0.99; transform: scale(1) /*translateX(-50%) translateY(0) translateZ(0)*/ translate3d( -50%, 0, 0 ); }
	100%{ opacity:0; transform: scale(0.95) /*translateX(-52.5%) translateY(0) translateZ(0)*/ translate3d( -52.5%, 0, 0 ); }
}

@media screen and (min-width:481px) {
	.fade-in-bck, .fade-in-modal {
		-webkit-animation: fade-in-bck 0.4s cubic-bezier(.175,.885,.32,1.275) both;
		animation: fade-in-bck 0.4s cubic-bezier(.175,.885,.32,1.275) both;
	}

	.fade-out-bck, .fade-out-modal{ -webkit-animation:fade-out-bck 0.4s cubic-bezier(.175,.885,.32,1.275) both; animation:fade-out-bck 0.4s cubic-bezier(.175,.885,.32,1.275) both; }
}
@media screen and (max-width:480px) {
	.fade-in-bck, .fade-in-modal{ -webkit-animation:fade-in-bck-mobile 0.4s cubic-bezier(.175,.885,.32,1.275) both; animation:fade-in-bck-mobile 0.4s cubic-bezier(.175,.885,.32,1.275) both; }
	.fade-out-bck, .fade-out-modal{ -webkit-animation:fade-out-bck-mobile 0.4s cubic-bezier(.175,.885,.32,1.275) both; animation:fade-out-bck-mobile 0.4s cubic-bezier(.175,.885,.32,1.275) both; }
}

.modal-promo-code
{
	width: 351px;
}

@media screen and (max-width:744px) {
	.modal-promo-code
	{
		width: 100%;
	}
}

.modal-promo-code .avvio-modal__main--scroll
{
	background-color: var(--background-white);
	display: flex;
	flex-direction: column;
	align-content:  end;
	gap: var(--spacing-2x);
}

/* .modal-promo-code .avvio-modal__main--scroll button */
.modal-promo-code__skip,
.modal-promo-code__apply
{
	width: 50%;
	align-self: flex-end;
}

.modal-promo-code__clear
{
	position: absolute;
	right: var(--spacing-1x);
	top: calc(-1 * var(--spacing-025x));
	display: none;
}

.modal-promo-code__clear .fa-lg
{
	line-height: unset;
}

#promoCodeButton.applied, #promoCodeButton.applied:hover
{
	/*
	--text-default: var(--border-success);
	*/
}

#promoCodeButton .code_not_applied { display: inline; }
#promoCodeButton .code_applied     { display: none; }

#promoCodeButton.applied .code_not_applied { display: none; }
#promoCodeButton.applied .code_applied     { display: inline; }


.occupancy-modal
{
	width: 428px;
	height: fit-content;
	max-height: 792px;
	
}

@media screen and (max-width:744px) {
	.occupancy-modal
	{
		width: 100%;
		max-height: 95dvh;
	}
}
.occupancy-modal .avvio-modal__main, .avvio-modal__content:has(.avvio-modal__bottom) .avvio-modal__main
{
	border-radius: 0;
}

.occupancy-modal .avvio-modal__bottom
{
	display: flex;
	padding: var(--spacing-2x);
	border-top:1px solid var(--border-default);
}

.avvio-modal .avvio-modal__bottom
{
	border-top:1px solid var(--border-default);
}

.calendar-modal .avvio-modal__bottom
{
	border-top:none;
}

.occupancy-modal .avvio-modal__main--scroll
{
	display: flex;
	flex-direction: column;
	gap: var(--spacing-2x);
}

.occupancy-modal__children-ages
{
	display: flex;
	flex-direction: column;
	gap: var(--spacing-1x);

	border: none;
	border-top: 1px solid var(--border-default);

	margin: 0;
	margin-top: var(--spacing-2x);

	padding: 0;
	padding-top: var(--spacing-2x);
}

.occupancy-modal__child-age-field.occupancy-modal__party-size-field
{
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding-inline-end: var(--spacing-2x);
}

.occupancy-modal__line-title
{
	flex-grow: 1;
}

.occupancy-modal var
{
	font-style: normal;

}

.occupancy-modal__child-age-input
{
	width: 80px;
}

.occupancy-modal__child-age-input .text-field__label
{
	text-align: center;
}

.spacer { flex-grow: 1; }

/* Accessibility[a11y] shortcuts */
nav.a11y-menu
{
	display: flex;
	height: 0;
	overflow: hidden;
	flex-direction: column;
	background-color: var(--base-default);
}

nav.a11y-menu a
{
	display: flex;
	flex-grow: 1;

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

	width: 100%;
	height: 0;

	overflow: hidden;
	font-weight: 600;
	font-size: 16px;
}

nav.a11y-menu:focus-within { height: 32px; }
nav.a11y-menu:focus-within a:focus-within { height: 32px; }

/* forms */
.form-row { display:flex; flex-direction:row; gap: var(--spacing-1x); margin-bottom: var(--spacing-1x); width:100%; text-wrap:wrap; }
.form-fieldset-no-style { border:none; padding:0; }
.form-row-submit { margin-top: var(--spacing-2x); }
.form-row-submit .submit-section { display:flex; flex:1; align-items:end; justify-content:flex-end; }
.checkbox-row{ align-items: start;}
.form-row label.checkbox{ display: flex; gap: var(--spacing-1x); align-items: start; }
.g-recaptcha { min-height:78px; }

.input-container { flex:1; /*height: 48px; */ position: relative; width: 100%; display:flex; flex-direction:column; gap: var(--spacing-05x); align-self:start; }
.input {
	background-color: var(--background-white);
	border-radius: var(--border-radius-05x);
	border: 1px solid var(--border-featured);
	box-sizing: border-box;
	color: var(--text-pressed);
	font-size: 14px;
	font-weight:500;
	height: 100%;
	/*
	TS: is this needed? removed to allow browser put focus state on inputs (a11y)
	outline: 0;
	*/
	width: 100%;
	padding:10px;
	/*line-height:50px;*/
	padding-top:24px;
	padding-bottom: var(--spacing-1x);
}

.input:autofill {
	background-color: var(--background-white);
	-webkit-box-shadow: 0 0 0 30px var(--background-white) inset !important;
	-webkit-text-fill-color: var(--text-default) !important;
	filter:none;
}

.input[type="text"]:disabled
{
	background: var(--background-disabled);
}

/*.input:-webkit-autofill {
	background-color: var(--background-white);
	filter:none;
}

.input:-moz-autofill {
	background-color: var(--background-white);
	filter:none;
}*/

select.input { padding-top:24px; }
@media only screen and (max-width: 600px) {
	select.input { height: 51px; }
}
textarea.input { min-height:100px; }
select.input {
/* TS we had this commented out. Why? Needed for safari style. Leaving moz for now */
	
	-webkit-appearance: none;
	/*-moz-appearance: none; */
}

.form-page-layout {
	display:flex;flex-direction:column;gap: var(--spacing-2x);
}
.form-page-layout .form-row-submit { margin-top:0; }
.form-page-layout .form-section-heading { margin-bottom: var(--spacing-05x); }

.form-page-layout .form-row:last-child { margin-bottom:0; }

/* Safari-specific hack */
@media not all and (min-resolution:.001dpcm) { @media {
	select.input {
		-webkit-appearance: none;
		appearance:none;
	}
}}

.placeholder {
	color: var(--text-default);
	left: 10px;
	line-height: 1em;
	pointer-events: none;
	position: absolute;
	transform-origin: 0 50%;
	transition: transform 200ms, color 200ms;
	top: 19px;
}

textarea + .placeholder {
	top: 19px;
}

.label-container { min-height:40px; display:flex; align-items:center; }
.label-container > label { height:100%; display:flex; align-items:center; }

html[dir=rtl] .placeholder { left:unset; right:10px; transform-origin: 50% 0; }

span.mandatory { transition: transform 200ms, color 200ms; }

.input:focus ~ .placeholder,
.input:not(:placeholder-shown) ~ .placeholder,
.input:-webkit-autofill ~ .placeholder {
transform: translateY(-12px) translateX(0px) scale(0.85);
}

.fw_inputerror ~ .APPButtonDiv {
	border-color: var(--input-error-border);
	height: calc(100% - 5px);
}
.input.fw_inputerror,
.input.touched:not(:focus):invalid {
	box-shadow: inset 0px 0px 0px 1px var(--input-error-border);
	border-color: var(--input-error-border);
	background-color: var(--input-error-background);
}

#avvio_cc_details .fw_inputerror{
	border-color:var(--input-error-border );
	box-shadow: inset 0px 0px 0px 1px var(--input-error-border);
	background-color: var(--input-error-background);
}

/*input:focus-within ~ .APPButtonDiv { border-color: #000; border-width:2px; } */
input:focus-within ~ .APPButtonDiv { outline: none; }

.input:not(:placeholder-shown) ~ .placeholder {
	color: var(--text-default);
}

.input:focus ~ .placeholder {
	color: var(--text-default); /* color of label when moved */
}

.input-group { display:flex; flex:1; }
.input-group :not(:first-child) .input { border-left:none; border-radius:0; }
.input-group :first-child .input { border-radius:4px 0 0 4px; }
.input-group :last-child .input { border-radius:0 4px 4px 0px; }

.form-row span.mandatory { position:absolute; right:12px; top:7px; font-size:18px; opacity:0.6; }
.paymentsection .form-row span.mandatory { position: relative; right: unset; left: 6px; top: 2px; } 
.input:focus ~ span.mandatory,
.input:not(:placeholder-shown) ~ span.mandatory {
	transform: translateY(-4px) translateX(4px) scale(0.8);
}

.form-row-payment label { flex:1; }
.form-row-payment select,
.form-row-payment input {
	border: 1px solid var(--border-featured);
	background-color: var(--background-white);
	color: var(--text-pressed);
	border-radius: var(--border-radius-05x);
	display: flex;
	height: 48px;
	padding: 10px;
	width: 100%;

}

.feedback-container { display:flex; color:var(--border-critical); justify-content:end; }
.feedback-container:empty { display:none; }

.policy-link-container { margin-top: var(--spacing-1x); margin-bottom: var(--spacing-1x); }
.policy-link-container input[type=checkbox] { margin-right: var(--spacing-1x); }
.policy-link-container a { text-decoration:underline; }

.cug-signup-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-1x);
	width: 100%;
	justify-content: flex-end;
}

#section_closedsignup .button-icon {
	margin-block-start: calc(-1 * var(--spacing-2x));
	margin-inline-end:  calc(-1 * var(--spacing-2x));
/*
	align-items:start;
	justify-content:end;
 */
}

.cug-signup-row .policy-link-container { margin-top:0; }
.cug-signup-row .banner { height:100%; }
.cug-signup-terms { flex-grow:1; }
.cug-signup-email { align-self:end; }

@media only screen and (max-width: 600px) {
	.form-row { flex-direction:column; }
	.occprices { flex-wrap:wrap; }
	.occprices .form-row { flex-direction:row; flex-wrap: wrap; }
	.form-row.checkbox-row { flex-direction:row; }

	#section_closedsignup .card-information__image-area { display:none; }
}


.error{
	display: flex;
	flex-direction: row;
	/*align-items: center;*/
	padding: var(--spacing-2x);
	gap: var(--spacing-1x);
	border: 1px solid #000;
	border-radius: var(--border-radius-1x);
	background: var(--base-default);
	color: var(--border-critical);
	background: var(--color-critical);
	border-color: var(--border-critical);
	margin-bottom: var(--spacing-2x);
}
.error-messages{
	display:flex; flex-direction:column; gap: var(--spacing-1x);
}

#ipulse div.message {
	border: 1px solid var(--border-warning);
	background-color: var(--color-warning);
	color: var(--border-warning);
	padding: var(--spacing-2x);
	line-height: 140%;
	margin-bottom: var(--spacing-2x);
	border-radius: var(--border-radius-1x);
}

.tickbox-list label { height:32px; display:flex; align-items:center; }
.tickbox-list input[type=checkbox] { margin-right: var(--spacing-05x); }
.form-page-layout .policy-link-container { display:flex; align-items:center; }

.list-interests { display:grid; grid-template-columns:1fr 1fr 1fr 1fr; gap:0px; width:100%; }
.list-facilities { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; width:100%; }
.grid-cols-2 .list-facilities { grid-template-columns:1fr 1fr; }

.list-sites { display:grid; grid-template-columns:1fr 1fr 1fr 1fr; gap: var(--spacing-1x); width:100%; }
.form-row .banner { height: 100%; flex:1; }
.form-row.flex-end { justify-content:flex-end; }

.occupancy-modal__room-config
{
	display: flex;
	flex-direction: column;
	border-radius: var(--border-radius-2x);
	background-color: var(--base-default);
	padding: var(--spacing-2x);
}

.occupancy-modal__room-config-header
{
	display: flex;
}

.occupancy-modal__room-config-title
{
	line-height: 40px;
	flex-grow: 1;
}

.occupancy-modal__party-size
{
	display: flex;
	flex-direction: column;
	border: none;
	padding: 0;
	margin: 0;
	gap: var(--spacing-1x);
}

.occupancy-modal__party-size-field
{
	display: flex;
	padding: var(--spacing-2x) 0;
	padding-inline-start: var(--spacing-2x);
	border: 1px solid var(--border-default);
	border-radius: var(--border-radius-1x);
	height: fit-content;
}

.sort-bar
{
	display: flex;
	align-items: center;
	margin-bottom: var(--spacing-2x);
	gap: var(--spacing-1x);
}

.sort-bar__spacer
{
	flex-grow: 1;
}

.sort-bar .banner__caption
{
	display: flex;
	align-items: center;
}

.sort-bar .banner__caption .button
{
	margin-inline: var(--spacing-1x);
	background-color: transparent;
}

/*
 * CalendarStrip
 * calendar-strip
 */


.calendar-strip
{
	display: flex;
	/*height: 56px;*/
	align-items: center;
	justify-content: center;
	border-radius: var(--border-radius-1x);
	cursor: pointer;
}

@media only screen and (max-width: 600px)
{
	.card-information--rate-primary > .card-information__info-container .card-information__price-area
	{
		flex-basis: 100%;
	}

	.card-information--rate-primary .card-information__price-area > .caption
	{
		display: none;
	}

}

.calendar-strip__container
{
	display:flex;
	flex-direction:column;
}

.calendar-strip__dayname
{
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 8px 0;
	border-top: 1px solid var(--border-default);
}

.calendar-strip__item
{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: start;
	padding: 8px 0;
	gap: var(--spacing-05x);
/*	min-width: 48px; */
	width: 48px;
	height: 56px;
	color: var(--text-disable);

	border-top: 1px solid var(--border-disable); 
	border-bottom: 1px solid var(--border-disable); 
}

.calendar-strip__container:first-child .calendar-strip__item
{
	border-inline-start: 1px solid var(--border-disable); 
	border-start-start-radius: var(--border-radius-1x); /* "top"    "left"  */
	border-start-end-radius:   0;   /* "top"    "right" */
	border-end-start-radius:   var(--border-radius-1x); /* "bottom" "left"  */
	border-end-end-radius:     0;   /* "bottom" "right" */
}

.calendar-strip__container:last-child .calendar-strip__item
{
	border-inline-end: 1px solid var(--border-disable); 
	border-radius: 0 var(--border-radius-1x) var(--border-radius-1x) 0;
	border-start-start-radius: 0;   /* "top"    "left"  */
	border-start-end-radius:   var(--border-radius-1x); /* "top"    "right" */
	border-end-start-radius:   0;   /* "bottom" "left"  */
	border-end-end-radius:     var(--border-radius-1x); /* "bottom" "right" */
}

.calendar-strip__item-start-date
{
	background-color: var(--text-pressed);
	color: var(--text-white);
	border-start-start-radius: var(--border-radius-1x); /* "top"    "left"  */
	border-start-end-radius:   0;   /* "top"    "right" */
	border-end-start-radius:   var(--border-radius-1x); /* "bottom" "left"  */
	border-end-end-radius:     0;   /* "bottom" "right" */
}

.calendar-strip__item-end-date
{
	/*
	background-color: var(--text-pressed);
	color: var(--text-white);
	border-radius: 0 8px 8px 0;
	*/
	background-color: var(--base-default);
	color: var(--text-disable);
	border: 1px solid var(--border-disable); 
	border-inline-start: 0;
	border-start-start-radius: 0;   /* "top"    "left"  */
	border-start-end-radius:   var(--border-radius-1x); /* "top"    "right" */
	border-end-start-radius:   0;   /* "bottom" "left"  */
	border-end-end-radius:     var(--border-radius-1x); /* "bottom" "right" */
}

.box .unavailable-box .calendar-strip__item-end-date
{
	border-right: 0;
}

.box .unavailable-box .calendar-strip__item-start-date,
.box .unavailable-box .calendar-strip__item-end-date
{
	border-radius: 0;
}

.box .unavailable-box .calendar-strip__item-start-date,
.box .unavailable-box .calendar-strip__item-selected-date
{
	background: none;
	color: var(--text-disable);
}

.calendar-strip__item-discount
{
	position: relative;
}
.calendar-strip__item-discount::after
{
	content: '\F02B';
	font-family: var(--font-awesome);

	position: absolute;
	top: 2px;
	right: 2px;
	height: 16px;
	text-align: center;
}

html[lang='ar'] .calendar-strip__item-discount::after
{
	left: 2px;
	right: unset;
}

/*
 * Needs to be hidden, as the price is not relevant for the selection
 * Ps.: We're displaying that price now, but removing the emphasis.
 *
 * [RD] I think we should should have a better look at this.
 */
.calendar-strip__item-end-date .calendar-strip__price
{
	/*
	display: none;
	*/
}

.calendar-strip__item-selected-date
{
	background-color: var(--background-pressed);
	color: var(--text-pressed);
}

.calendar-strip__item-selected-date:last-child
{
	border-radius: 0;
}

.calendar-strip__day
{
	font-weight: 700;
}

/*
 * RadioGroupField
 * radio-group-field
 */

.radio-group-field
{
	display: flex;
	flex-direction: column;

	padding: var(--spacing-2x);
	border-radius: var(--border-radius-2x);
	border: none;
	background-color: var(--base-default);

}

.radio-group-field__field-label
{
	margin-bottom: var(--spacing-1x);
}

.radio-group-field__input-label
{
	display: flex;
	align-items: center;
	height: 48px;
	gap: var(--spacing-1x);
}

/*
 * Filter Modal
 */

.filter-modal
{
	max-width: 480px;
}

.filter-modal .heading
{
	color: var(--text-default);
}

.filter-modal .avvio-modal__main--scroll
{
	display: flex;
	flex-direction: column;
	gap: var(--spacing-2x);
	border-radius: 0;
}

.filter-modal .avvio-modal__bottom
{
	display: flex;
	padding: var(--spacing-2x);
	border-top: 1px solid var(--border-default);
}

.filter-modal__option-group,
.filter-modal__options
{
	display: flex;
	flex-direction: column;
}

.filter-modal__option-group.box
{
	padding: var(--spacing-2x);
}

.filter-modal__child
{
	margin-inline-start: var(--spacing-3x);
}

/*
 *
 */

.checkbox-field
{
	display: flex;
	align-items: center;
	gap: var(--spacing-1x);
	height: 48px;

	color: var(--text-default);
}

.checkbox-field__input
{
	margin: 0;
}

.checkbox-field__input + .checkbox-field__icon
{
	border-radius: 2px;
	border: 2px solid var(--border-hovered);
	background: var(--background-hovered);
	width: 16px;
	height: 16px;
	padding: 2px;
	flex-shrink: 0;
}

.checkbox-field__input:focus + .checkbox-field__icon
{
	outline: 1px solid #000;

}

.checkbox-field__input:checked + .checkbox-field__icon
{
	display: flex;
	align-items: center;
	justify-content: center;

	background-color: var(--border-hovered);
	color: var(--text-white);
}

.checkbox-field__input:checked + .checkbox-field__icon::before
{
	content: "\2714";
}

.checkbox-field__input
{
	position: absolute;
	/*visibility: hidden; */

	width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.checkbox-field__input:checked ~ .checkbox-field__text
{
	color: var(--text-pressed);
}

/*
 *
 */

.rate-group-info {
	/*margin-bottom: 16px;*/
}

.discount-bubble {
	gap: var(--spacing-05x);
}

.discount-bubble .button__text {
	font-size: 12px;
	font-weight: 400;
	line-height: 20px;
}

.discount-list {
	display: inline-block;
	color: var(--border-success);
	background-color: var(--color-success);
	border-color:     var(--border-success);
	border-width:1px;
	border-style:solid;
	border-radius: var(--border-radius-1x);
	list-style-type: none;
	margin:0;
	/*margin-top:8px;*/
	padding: 16px 24px 8px 16px;
}
.discount-list span.button__text {
	color: var(--border-success);
}


/*
 *
 */

#inlineModal { width:fit-content; height:fit-content; }
#inlineModalFrame { width: 900px; max-width:calc(100vw - 32px); height: 500px; }
#inlineModalFrame.login { width: 480px; height: 200px; }
#inlineModalFrame.login_with-sections { width:800px; height: 200px; }
/* #inlineModalFrame.login_without-sections { width:480px; height: 200px; } */
#inlineModalFrame.contact { height: 570px; }
#inlineModalFrame.newsletter { height: 550px; }
#inlineModalFrame.request_account { width: 900px; height: 650px; }
#inlineModalFrame.password_reset { width: 500px; height: 300px; }
#inlineModalFrame.my_profile { width: 600px; height:300px; }
#inlineModalFrame.change_login_profile { width: 900px; height: 500px; }

#inlineModal #inlineModalFrame{ max-height: 640px; }

#inlineModalFrame.password_reset_with-sections { width:800px;}

.customised-group-section { display: flex; gap: 16px;}
.customised-group-section > div { flex-basis: 100%; width: 100%; }
.customised-group-section .custom-section { max-width: 392px; flex-wrap: wrap;}
.customised-group-section .crm-section-details { padding-top: 10px; flex: 1;}
.customised-group-section #login button { width: 100%;}
.customised-group-section .incentives-group { max-height: 72px; overflow: hidden;}
.customised-group-section .incentives-group span { display: inline-block; margin:0 2px 2px 0; }
.customised-group-section .crm-form-title { text-transform: uppercase; font-size: 14px; font-weight: 600; padding-bottom: 20px;}
.customised-group-section .img-wrapper { position:relative; flex: 0;}
.customised-group-section .crm-section-image { width: 100%; aspect-ratio: 3 / 2; border-radius: var(--border-radius-1x); object-position: center; /*object-fit: cover;*/}
.customised-group-section .crm-section-title{ font-size: 16px; font-weight: 600;}
.page-request_account .customised-group-section .custom-section { height: fit-content; position: sticky; top: 0;}
.notemplate-body.page-request_account .customised-group-section form .form-row{ flex-direction: column; }

.customised-group-section .link-group { margin-top: 40px; }
.customised-group-section .division-or, .customised-group-section .crm-form-title{ display: block;}

.link-group{ display:flex; gap:16px; margin-top:24px; }
.forgot-link{ flex:1; display:flex;}
.division-or, .crm-form-title{ display: none;}

@media only screen and (max-width: 744px)
{
	#inlineModal, #inlineModal #inlineModalFrame{ width:100%; max-width: 100%; }
	.customised-group-section { flex-direction: column; gap: 0px; }
	.customised-group-section .custom-section {display:flex; gap:16px; border-bottom-right-radius: 0; border-bottom-left-radius: 0; border-bottom: none; max-width:unset;}
	.customised-group-section .crm-section-image {/*object-fit: cover;*/ min-width: 150px;}
	.customised-group-section .crm-section-details { padding-top: 0;}
	.customised-group-section .crm-section-description p { margin-top: 2px;}
	.customised-group-section .content-wrapper{ border-top-right-radius: 0; border-top-left-radius: 0; }
	.page-request_account .customised-group-section .custom-section{ position: unset;}
}

@media only screen and (max-width: 600px)
{
	/**/
}

@media only screen and (max-height: 748px){

	#inlineModal
	{
		max-height: 100%;

	}

	#inlineModal .avvio-modal__main
	{
		overflow: hidden;

	}

	#inlineModal #inlineModalFrame
	{
		max-height: 90%; 
		max-height: 90dvh;
	}
}

/*
 * Stuff that was on results.css
 */


#currencySelector {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	padding: var(--spacing-2x);
	background: var(--base-depth);
	gap: var(--spacing-1x);
	overflow: auto;
	border-radius:  0 0 var(--border-radius-3x) var(--border-radius-3x);
}

.closeCurrencyModal{
	color: var(--text-hovered); 
}

#section_currency{
	position: sticky;
	bottom: 0;
}

#languageSelector {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	padding: var(--spacing-2x);
	background: var(--base-depth);
	gap: var(--spacing-1x);
	overflow: auto;
	border-radius:  0 0 var(--border-radius-3x) var(--border-radius-3x);
}
#languageSelector div.flagsprite { font-size:unset !important; }
#languageSelector p { display:none; }

@media only screen and (max-width: 744px) {
	#currencySelector, #languageSelector {
		grid-template-columns:1fr;
	}
}

.content-section {
	padding: 0px;
	background-color: transparent;
}
.content-section .bottom { width: 100%; }

.content-section #section_target_details {
	gap: var(--spacing-2x);
}

.cta-box-large__buttons {
	display: flex;
	gap: var(--spacing-2x);
}

#roomsModal .avvio-modal__main, #ratesModal .avvio-modal__main{
	border-radius: 0;
}

#roomsModal .avvio-modal__bottom, #ratesModal .avvio-modal__bottom{
	padding: 10px var(--spacing-2x);
	display: flex;
	justify-content: space-between;
	border-top:1px solid var(--border-default);
}

#section_currency_selector .avvio-modal__main {
	padding: 0 !important;
}

#section_target_info .avvio-modal {
	max-width: 881px;
}

#section_currency_selector .avvio-modal {
	max-width: 738px;
}

#section_currency_selector .avvio-modal__content {
	border-radius: 0 0 var(--border-radius-3x) var(--border-radius-3x);
}

.target_detailed_info {
	border-radius: var(--border-radius-2x);
	background-color: var(--base-default);
	padding: var(--spacing-2x);
}

.button-icon {
	padding: 0 !important;
}


#selector, #hotelName{ margin-right: auto; }
#avvioCalendar-results{
	width: 100%;
	max-height: 90%;
}
#avvioCalendar-auxresults{
	width: 100%;
	max-height: 90%;
}

.a11y-loader
{
	position: absolute;
}

#loader, .modal-loader, .a11y-loader{
	z-index: 99999;
}

#loader:before, .modal-loader:before, .a11y-loader:before {
	position: fixed; /*absolute;*/
	top: calc(50% - 24px);
	left: calc(50% - 24px);
	border: 8px solid var(--border-featured);
	border-radius: 50%;
	border-top: 8px solid transparent;
	width: 48px;
	height: 48px;
	-webkit-animation: show-spinner 0.2s, spin 1s 0.2s linear infinite;
	animation: show-spinner 0.2s, spin 1s 0.2s linear infinite;
	box-sizing: border-box;
	content: "";
	opacity: .8;
}

@-webkit-keyframes spin {
	0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
	100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}

@keyframes spin {
	0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
	100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}

@-webkit-keyframes show-spinner {
	from { -webkit-transform: scale(0); transform: scale(0);}
	to { -webkit-transform: scale(1); transform: scale(1);}
}

@keyframes show-spinner {
	from {transform: scale(0);}
	to {transform: scale(1);}
}

@-webkit-keyframes spin2 {
	0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
	100% { -webkit-transform: rotate(1turn); transform: rotate(1turn); }
}

@keyframes spin2 {
	0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
	100% { -webkit-transform: rotate(1turn); transform: rotate(1turn); }
}

#section_room
{
	display: grid;
	/*
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	*/
	grid-template-columns: 1fr;
	gap: var(--spacing-2x);
}

#section_target_details{
	display: grid;
	gap: var(--spacing-2x);
}

.cta-box-large__image{
	width: 288px;
	/*margin-bottom: 24px;*/
}

.cta-box-large__details{
	flex-basis: calc(100% - calc(288px + var(--spacing-2x)));
	display: flex;
	flex-direction: column;
	gap: var(--spacing-2x);
}

.cta-box-large__title{
	color: var(--brand-color-text);
}

/*
.cta-box-large .avvio-incentives{
	margin-top: -8px;

}
*/

.cta-box-large__buttons-holder{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--spacing-1x);

	/* Fix for chrome glitch where 1px movement on inital hover */
	will-change: transform;
}

.cta-box-large__buttons{
	display: flex;
	gap: var(--spacing-2x);
}

.cta-box-large__occupancy{
	font-size: 12px;
}

.box .avvio-image__image, .box .cta-box-large__image{
	max-width: 100%;
}

.cta-box-large__image{
	border-radius: var(--border-radius-2x);
}

.cta-box-large__tags{
	display: flex;
	gap: 5px;
	flex-wrap: wrap;
}

.box .unavailable-box .avvio-image__image { max-width:unset; width:160px; aspect-ratio:5/3; filter:opacity(0.8); }


.cta-box-large__tag{
	padding: 5px;
	background: rgba(var(--brand-color-rgb-values), 0.08);
	/*background: color-mix(in srgb, var(--brand-color) 8%, white);*/
	font-size: 12px;
}

#avvioCurrencyBG {
	background: rgba(0, 0, 0, 0.4);
	width: 100%;
	height: 100%;
	position: absolute;
	content: '';
	z-index: 99999998;
}

#avvioCalendarBG, #avvioCurrencyBG{
	border-radius: var(--border-radius-3x);
}

.closeLanguageModal{
	color: var(--text-hovered); 
}

.card-large {
	display: grid;
	grid-template-columns: 2fr 2fr;
	grid-template-rows: 1fr 2fr 1fr;
	grid-template-areas:
		"image title"
		"image description"
		"image button";
	gap: 30px;
	padding: var(--spacing-2x);
	border: 1px solid var(--border-default);
	border-radius: var(--border-radius-2x);
	background: var(--base-default);
}

.avvio-modal .selection{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--spacing-1x);
}

.banner--warning .heading-5{
	font-size: 12px;
}

.ctas-holder{
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--spacing-1x);
	width: 100%;
}


/* FIXME: Use message-modal instead */
[id^=roomInfo_] .avvio-modal__main,
[id^=rateInfo_] .avvio-modal__main
{
	border-radius: 0;
}

[id^=roomInfo_] .avvio-modal__bottom,
[id^=roomInfoTabs_] .avvio-modal__bottom,
[id^=rateInfo_] .avvio-modal__bottom
{
	padding: var(--spacing-2x);
	border-top:1px solid var(--border-default);
	display: flex;
	justify-content: space-between;
}

[id^=roomInfo_] .avvio-modal__bottom .button,
[id^=rateInfo_] .avvio-modal__bottom .button,
.avvio-modal .avvio-modal__bottom .button {
	margin-inline: auto 0px;
}

[id^=roomInfo_] .avvio-modal__bottom .cta,
[id^=roomInfoTabs_] .avvio-modal__bottom .cta,
[id^=rateInfo_] .avvio-modal__bottom .cta {
margin-inline: 0;
}
/* End of FIXME */

.message-modal .avvio-modal__main
{
	border-radius: 0;
}

.message-modal .avvio-modal__bottom
{
	display: flex;
	padding: var(--spacing-2x);
	border-top:1px solid var(--border-default);

}

.calendar-modal .avvio-modal__main,
#auxCalendarModal .avvio-modal__main
{
	padding: 5px 0 0 0;
	background: var(--background-white);
	border-top: none;
}

.calendar-modal .avvio-modal__header,
#auxCalendarModal .avvio-modal__header
{
	justify-content: end;
	padding-bottom: 0;
}

.calendar-modal .banner,
#auxCalendarModal .banner,
#bigCalendar .banner
{
	width: fit-content;
	margin: 0;
}

.calendar-modal .avvio-modal__bottom,
#auxCalendarModal .avvio-modal__bottom,
#bigCalendar .bottom
{
	padding: var(--spacing-2x);
}

/*
changed index. to remove
.bottom-left { flex:1; }
.bottom-right { display:flex; gap:var(--spacing-2x); align-items:end; }
*/

.calendar-modal .avvio-modal__bottom,
#auxCalendarModal .avvio-modal__bottom,
#bigCalendar .bottom
{
	display: flex;
	gap: var(--spacing-2x);
	align-items: end;
}

#bigCalendar .bottom {
	justify-content: end;

}

.calendar-modal__confirm-section,
.calendarModal__confirm-section
{
	flex: 1;
}

.calendar-modal__confirm-button,
.calendarModal__confirm-section button 
{
	text-wrap: nowrap;
	width: 100%;
}

#bigCalendar .confirm-section button 
{
	width: 230px;
}

.calendar-modal__price-section,
.calendarModal__price-section,
#bigCalendar .bottom .price-section {
	text-align: end;
	display: flex;
	flex-wrap: wrap;
	justify-content: end;
	align-items: center;
	gap: var(--spacing-05x);
	flex-basis: 220px;
}

#bigCalendar .bottom .price-section .datesAvailable
{
	flex-basis: 100%;
}

@media only screen and (max-width: 744px) {

	.calendar-modal .avvio-modal__bottom,
	#bigCalendar .bottom
	{
		gap: var(--spacing-1x);
		padding: var(--spacing-1x);
		flex-wrap: wrap;
		justify-content: end;
		min-height: 130px;
	}

	.calendar-modal .banner,
	#auxCalendarModal .banner,
	#bigCalendar .banner{

		padding: var(--spacing-1x);
		flex-basis: 100%;
		order: 999;
	}


	.calendar-modal .avvio-modal__main,
	#auxCalendarModal .avvio-modal__main
	{
		overflow: initial;
	}

	.avvioCalendarFragment .button-holder {
		display: none !important;
	}

}

@media only screen and (max-width: 400px) {
	.calendar-modal__price-section,
	.calendarModal__price-section,
	#bigCalendar .bottom .price-section {
	
		flex-basis: 200px;
	}
}

#bigCalendar .bottom .price-section {

	margin-inline-start: auto;
}

.avvio-calendar__price,
.avvio-calendar__los-price
{
	display: none;
}

.calendar-modal__striked-price,
#strikedPrice {
	position: relative;
}

.calendar-modal__display-price,
.cheapestPrice 
{
	color: var(--brand-color-text);
}

.calendar-modal__selected-range,
#datesAvailable {
	display: block;
	flex-basis: 100%;
}

.unavailable-box
{
	display: flex;
	flex-direction: column;
	gap: var(--spacing-2x);

}

.unavailable-message-box
{
	display: flex;
	flex-direction: column;
	gap: var(--spacing-2x);
}

.unavailable-message-box .card-information__info-area
{
	align-items: center;
}

.unavailable-message-box__options
{
	display: flex;
	flex-direction: column;
	list-style: none;
	padding: 0;
	margin: 0;
}

.unavailable-message-box__option
{
	display: flex;
	align-items: center;
	gap: var(--spacing-3x);
}

.unavailable-message-box__option p
{
	flex-grow: 1;
}

@media (max-width:744px) {
	.unavailable-message-box__option p{ flex-basis: 50%; }
}


.unavailable-message-box__option .button
{
	width: 100px;
}

.multi-room-modal .avvio-modal__main--scroll
{
	display: flex;
	flex-direction: column;
	gap: var(--spacing-3x);
}

.multi-room-modal__option-group,
.multi-room-modal__options
{
	display: flex;
	flex-direction: column;
	gap: var(--spacing-1x);
}

.multi-room-modal__option {
	cursor: pointer;
}

.multi-room-modal .avvio-modal__bottom
{
	display: flex;
	padding: var(--spacing-2x);
	align-items: center;
	gap: var(--spacing-1x);
}

.multi-room-modal__price-and-radio
{
	display: flex;
	height: 100%;
	align-items: center;
}

.multi-room-modal__price-area
{
	display: flex;
	height: 100%;
	flex-direction: column;
}

.multi-room-modal__radio-area
{
	display: flex;
	justify-content: center;
	padding-inline-start: var(--spacing-2x);
}

.multi-room-modal__radio-area input
{
	display: none;
}

.multi-room-modal__radio-area input:checked + i
{
	visibility: visible;
}

.multi-room-modal__radio-area input + i
{
	visibility: hidden;
}

.multi-room-modal__footer-price
{
	color: var(--brand-color-text);
}

.discount-btn
{
	margin-inline-start: 0;
}

.discount-title
{
	display: flex;
	font-weight: 600;
	gap: var(--spacing-1x);
	align-items: center;
}

.discount-list li
{
	/*
	line-height: 30px;
	*/
	margin-bottom:var(--spacing-05x);
}

.discount-list li:not(.discount-title)
{
	padding-inline-start: 24px;
}

/*
------------------------------------ Calendar ------------------------------------
*/

@keyframes showerrbox {
	from { opacity: 0; }
	to   { opacity: 1; }
}

.avvio-calendar__errbox {
	display: flex;
	flex-wrap: wrap;
	width: 20px;
	gap: 2px;
	margin: auto;

	opacity: 0;

	animation-name: showerrbox;
	animation-duration: 1s;
	animation-delay: 1s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}

.avvio-calendar__error {
	width: 8px;
	height: 8px;
	background-color: #000;
}

.avvio-calendar__no-error {
	width: 8px;
	height: 8px;
	border: 1px solid #000;
	background-color: transparent;
}

/*
#avvioCalendarBG{
	background: rgba(0, 0, 0, 0.4);
	width:100%;
	height:100%;
	position:absolute;
	content: '';
	z-index:4999;
}
*/
.avvioCalendarFragment{
	position: relative;
	padding: 0px 80px;
	background: var(--background-white);
	text-align: center;
	box-sizing: border-box;
	--cal-space: var(--com-space, 20px);
}
/*		
.avvioCalendarFragment.hasTrigger{
	display: none;
	position:absolute;
	z-index:99999;
	overflow: auto;
}
*/

.avvioCalendarFragment.hasTrigger .close-cal{
	position: absolute;
	top: 10px;
	right: 10px;
	cursor: pointer;
}

html[dir="rtl"] .avvioCalendarFragment.hasTrigger .close-cal{
	right: auto;
	left: 10px;
}

.avvioCalendarFragment .label{
	display: inline-flex;
	margin: 0;
	min-width: 190px;
	position: relative;
	color: var(--text-default);
	cursor: default;
	padding: var(--spacing-1x) 0;
	align-items: baseline;
}

.avvioCalendarFragment .label:after{
	content: '\\f00d';
	font-family: "Font Awesome 6 Pro";
	display: none;
}
/*
.avvioCalendarFragment .label.selected:after{
	display: block;
}
*/		
/*
.avvioCalendarFragment .label.active .button__text{
	color: #1E1F22;
}
*/

.avvio-calendar-container{
	position: relative;
	background: var(--background-depth);
	border-radius: 24px;
	padding: var(--cal-space, 16px);
}


.avvioCalendarFragment .button-holder{
	display: flex;
	justify-content: center;
	gap:8px;
	margin-bottom: var(--spacing-05x);
}
.avvioCalendarFragment :is(.prev-btn, .next-btn){
	position: absolute;
	top: calc(50% - 24px);
}

.avvioCalendarFragment .prev-btn{
	left: -50px;
}

.avvioCalendarFragment .next-btn{
	right: -50px;
}

html[dir="rtl"] .avvioCalendarFragment .prev-btn{
	right: -50px;
	transform: scaleX(-1);
	left: unset;
}

html[dir="rtl"] .avvioCalendarFragment .next-btn{
	left: -50px;
	transform: scaleX(-1);
	right: unset;
}

.avvio-calendar{
	display: grid;
	grid-template-columns: repeat({$this->numMonthsToShow}, 1fr);
	grid-gap: var(--cal-space, 16px);
}

.avvio-calendar__month {
	display: inline-block;
	background: var(--background-white);
	border-radius: var(--cal-space, 16px);
	padding: var(--cal-space, 16px); 
}

.avvio-calendar__month-header {
	text-align: center;
	font-weight: bold;
	font-size: 14px;
	color: var(--text-default);
	position: relative;
	cursor: pointer;
	display: block;
	width: 100%;
	padding: 10px 0 20px 0;
	margin: 0;
}

.avvio-calendar__month-header i {
	margin-inline-start: var(--spacing-05x);
}	

.monthSelector
{
	max-width: 600px;
}

.avvio-calendar__month-selector-container
{
	gap: 10px;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	
}

.avvio-calendar__month-selector-container h4
{
	grid-column: 1 / 4;
	margin: 0;
}

.monthSelector .avvio-modal__main--scroll
{
	background: var(--base-depth);
	padding-top: 0;
}

.avvio-calendar__month-selector-container .month
{
	cursor: pointer;
}

.avvio-calendar__month-body {
	display: grid;
	grid-template-rows: auto repeat(6, 1fr);
	/*
	grid-template-columns: repeat(7, 1fr);
	grid-gap: 1px;
	*/
}

.avvio-calendar__month-body .week-row {
	display: grid;
	grid-template-columns: repeat(7, 1fr);

	grid-gap: 1px;
}

.avvio-calendar__dayname {
	text-align: center;
	font-weight: bold;
	color: var(--text-default);
	font-size: 14px;
	margin-bottom: 12px;
}

.avvio-calendar__date {
	text-align: center;
	cursor: pointer;
	padding: 8px 0;
	margin: 0;
	color: var(--mda-box-text);
	border: 1px solid transparent;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: start;
	gap: 0px;
	height: 54px;
	position: relative;
	user-select: none;
	background: none;
	width: 100%;
}

.avvio-calendar__date.unavailable {
	cursor:default;
}

.avvio-calendar__day, .avvio-calendar__price, .avvio-calendar__los-price {
	display: block;
	font-weight: bold;
	font-size:14px;
	pointer-events:none;
	line-height: 20px;
	z-index: 1;
}

.avvio-calendar__price, .avvio-calendar__los-price {
	font-weight: normal;
	font-size:12px;
	color: rgba(133, 140, 148, 0.5)
	transition: all 5s ease-in;
	filter: blur(0);
	-webkit-transition: 1s -webkit-filter linear;
	-moz-transition: 1s -moz-filter linear;
	-moz-transition: 1s filter linear;
	-ms-transition: 1s -ms-filter linear;
	-o-transition: 1s -o-filter linear;
	transition: 1s filter linear, 1s -webkit-filter linear, 1s opacity, height 1ms;
	display: block;
	opacity: 1;
	height: fit-content;
	display:grid;
	grid-template-rows: 1fr;
	line-height: 16px;
}

.today.available:not(.check-in) .avvio-calendar__los-price
{
	display: none !important;
}

.avvio-calendar__price:empty {
	filter: blur(5px);
	opacity: 0;
	/*height: 0;*/
	grid-template-rows: 0fr;
}

.avvio-calendar__price:empty::after {
	content: '---';
	opacity: 0;
}

.avvio-calendar .available {
	text-decoration: none;
}

.avvio-calendar .unavailable:not(.range,.hovered, .los),
.avvio-calendar .strike:not(.range,.hovered, .check-out)
{
	color: #8C939B;
	text-decoration: line-through;
}
.avvio-calendar .not-los {
	color: #858C94;
	text-decoration: line-through;
}

.avvio-calendar .today {
	background-color: #105E6514;
}

.avvio-calendar .check-in span.p,
.avvio-calendar .check-out span.p{
	
}
.avvio-calendar .check-in {
	border-start-start-radius: 0;
	border-start-end-radius: 0;
	border-end-start-radius: var(--spacing-15x);
	border-end-end-radius: 0;

	background-color: var(--mda-box-background);
	color: var(--mda-box-text-hover);
	

}

.avvio-calendar .hovered:hover,
.avvio-calendar .check-out {
	position: relative;
	border-left-color: var(--mda-box-background);
}

html[dir=rtl] .avvio-calendar .check-out 
{
	border-right: 1px solid var(--mda-box-background);
	border-left: none;
}

.avvio-calendar .hovered:hover::before,
.avvio-calendar .check-out::before {

	
	text-decoration: none;
	color: #fff;

	display: block;
	content: '';

	position: absolute;
	top: -1px;
	left: 0;
	width: 100%;
	
	height: calc(100% + 2px);

	background-color: var(--mda-box-background); /* Use CSS variable for background color */

	-webkit-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 100 100"><path d="M 0 0 L 100 100 L 0 100 L 0 0 Z"/></svg>') no-repeat;
	mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 100 100"><path d="M 0 0 L 100 100 L 0 100 L 0 0 Z"/></svg>') no-repeat;
	
	/* Ensure mask fills the entire element */
	-webkit-mask-size: cover;
	mask-size: cover;
	object-fit: cover;
	background-size: 100% 100%;
}

.avvio-calendar .avvio-calendar__state
{
	content: '';
	position: absolute;
	display: none;
	bottom: -5px;
	font-size: 12px;
	text-align: center;
	left: 0;
	background: #000;
	width: 100%;
	height: fit-content;
	color: #fff;
	border-radius: 6px;
	z-index: 10;
	overflow: hidden;
	text-overflow: ellipsis;
}

.avvio-calendar .hovered:hover .avvio-calendar__state,
.avvio-calendar .check-out .avvio-calendar__state {

	display: block;
}

.avvio-calendar .check-in .avvio-calendar__state{

	display: block;
	top: -5px;
}

.avvio-calendar .avvio-calendar__date.available.los .avvio-calendar__state.night{
	display: block;
}

.avvio-calendar .avvio-calendar__date.available .minlosTooltip
{
	content: '';
	position: absolute;
	display: none;
	font-size: 12px;
	text-align: center;
	left: 0;
	background:  var(--brand-color-background);
	height: 16px;
	color: #fff;
	border-radius: 6px;
	z-index: 10;
	overflow: hidden;
	text-overflow: ellipsis;
	left: -30%;
	top: -25px;
	width: 160%;
	overflow: visible;
}

.avvio-calendar .avvio-calendar__date.available:hover .minlosTooltip
{
	display: block;
}

.minlosTooltip:after 
{
	content: "";
	border: solid 2px var(--brand-color-background);
	width: 12px;
	height: 20px;
	border-radius: 50%;
	left: 9px;
	border-right: none;
	border-top: none;
	border-bottom: none;
	position: absolute;
	bottom: -120%;
}

.minlosTooltip::before 
{
	content: "";
	position: absolute;
	bottom: -150%;  
	left: 10px; 
	width: 0;
	height: 0;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-top: 8px solid var(--brand-color-background);
	transform: rotate(-50deg);
}



.avvioCalendarFragment .avvio-calendar__reset
{
	position: absolute;
	top:-8px;
	right: -8px;
	transition: transform .2s ease-in-out;
	font-size: 24px;
	color: #fff;
	z-index: 10;
}

html[dir=rtl] .avvioCalendarFragment .avvio-calendar__reset
{
	right: auto;
	left: -8px;
}

.avvioCalendarFragment .avvio-calendar__reset:after
{
	opacity: 1;
	color: #000;
}

.avvioCalendarFragment .avvio-calendar__reset:hover
{

	transform: rotate(180deg);
/*	
	animation-name: spin2;
	animation-duration: 1s;
	animation-iteration-count: 1;
	animation-timing-function: ease-in-out;
	animation-delay: 0s;
	animation-direction: normal;
*/
}

.avvio-calendar .check-in .avvio-calendar__reset
{
	top: initial;
	bottom:-5px;
}

html[dir=rtl] .avvio-calendar .check-out::before {
	left: auto;
	right: 0;
	transform: scaleX(-1);
	border-radius: 0;
}

.avvio-calendar .range {
	background-color: var(--mda-box-background);
	color: var(--mda-box-text-hover);
}

.avvio-calendar .hovered {
	background-color: var(--mda-box-background);
	color: var(--mda-box-text-hover);
}

.avvio-calendar .hovered:hover::before {
	
}

.avvio-calendar .hovered:hover {
	background-color: #FFF;
	color: #000;
}

.avvio-calendar__date:not(.check-out):not(.unavailable):hover {
	background-color: var(--mda-box-background);
	color: var(--mda-box-text-hover);

}

@media only screen and (max-width: 1024px) {

	.avvioCalendarFragment :is(.prev-btn, .next-btn){
		top: -50px;
	}

	.avvioCalendarFragment .prev-btn{
		left: 10px;
	}

	.avvioCalendarFragment .next-btn{
		right: 10px;
	}

	html[dir="rtl"] .avvioCalendarFragment .prev-btn{
		right: 10px;
		left: unset;
	}

	html[dir="rtl"] .avvioCalendarFragment .next-btn{
		left: 10px;
		right: unset;
	}

	.avvioCalendarFragment{

		padding: 0px 20px;
	
	}

	

}	

@media only screen and (max-width: 744px) {
/*
	.avvioCalendarFragment :is(.prev-btn, .next-btn){
		position: relative;
		inset: auto;
		margin: calc(var(--cal-space, 16px) / 2);
	}
*/
	.avvioCalendarFragment :is(.prev-btn, .next-btn){
		top: 0px;
	}

	.avvioCalendarFragment .prev-btn{
		left: 10px;
	}

	.avvioCalendarFragment .next-btn{
		right: 10px;
	}

	.avvio-calendar__date {
	
		height: 50px;
	}

	.avvio-calendar__date.check-out:hover {
	

	}

	.avvio-calendar__month
	{
		padding-top: 8px;
		padding-bottom: 8px;
	}

	.avvioCalendarFragment{
		padding: 0px 0px 0;
	}
	
	.avvio-calendar-container{
		padding: 0px;
	}

	.avvioCalendarFragment .button-holder{
		/* display: none; */
	}

}

@media only screen and (max-width: 480px) {

	.cal-label__day{
		display: none;
	}

	.avvio-calendar__month {
		padding: var(--spacing-1x); 
	}

}	

/*
@media only screen and (min-width: 740px) {



	.avvio-calendar__date.available:hover  {
		background-color: #323338;
		color: #FFF;
	}

}	
*/

/*
------------------------------------ NEW GRID LAYOUT CARDS START ------------------------------------
*/



.grid-layout
{
	display: grid;
}

.grid-layout > :empty
	{
		display: none;
	}
	
.card-grid__area
{
	position: relative;
}

.card-grid--primary
{
	
	grid-template-areas:
	"image title title title bubbles"
	"image incentives incentives incentives incentives"
	"image description description description description"
	"image description description description description"
	"image description description description description"
	"image . . . sel-date"
	"content content content content content";

	grid-template-columns: 320px 1fr auto auto auto;
	grid-template-rows: auto auto auto 1fr auto;

	padding: var(--spacing-2x);
	border-radius: var(--border-radius-2x);
	border: 1px solid var(--border-default);
	background-color: var(--base-default);
	gap: 0 var(--spacing-2x);
	position: relative;

}

.card-grid--room-primary
{
	grid-template-columns: 330px 1fr auto auto auto;
}

.card-grid--primary.card-grid--multi-room
{
	grid-template-areas:
		"image   title       bubbles     bubbles     bubbles"
		"image   incentives  incentives  incentives  incentives"
		"image   description description description ."
		"image   description description description ."
		"image   .           .           price       button"
		"content content     content     content     content";

}

.card-grid--primary > .card-grid__button,
.card-grid--unavailable .card-grid__button
{
	margin-top: var(--spacing-1x);
	align-self: start;
}

.card-grid__mda-strip {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: start;
	gap: var(--spacing-1x);
	
}

.card-grid__content {
	display: flex;
	flex-grow: 1;
	flex-direction: column;
	width: 100%;
	gap: var(--spacing-2x);
	margin-top: var(--spacing-2x);
}

.card-grid--primary > .card-grid__image .avvio-image__image
{
	width: 330px;
	aspect-ratio: 16 / 9;
}

.card-grid--primary.card-grid--rate-primary > .card-grid__image .avvio-image__image
{
	width: 330px;
	aspect-ratio: var(--img-ratio-rate-primary);
}

.card-grid--primary.card-grid--room-primary > .card-grid__image .avvio-image__image
{
	width: 330px;
	aspect-ratio: 16 / 9;
}

.card-grid--secondary
{
	grid-template-areas:
		"image title bubbles bubbles bubbles"
		"image incentives bubbles bubbles bubbles"
		"image description description . ."
		"image description description price button";

	grid-template-columns: 160px 1fr auto min-content min-content;
	grid-template-rows: auto auto 1fr auto;
	gap: 0 var(--spacing-2x);
}

.card-grid--secondary.card-grid--multi-room
{
	grid-template-areas:
		"image title       bubbles     bubbles check"
		"image incentives  bubbles     bubbles check"
		"image description description .       check"
		"image description description price   check";
}

.card-grid--small
{
	grid-template-columns: 108px 1fr auto min-content min-content;
}

.card-grid--unavailable
{
	grid-template-areas:
		"image title bubbles bubbles bubbles"
		"image incentives mda-strip mda-strip mda-strip"
		"image description  mda-strip mda-strip mda-strip"
		"image description . . button";

	grid-template-columns: 160px 1fr auto auto auto;
	grid-template-rows: auto auto auto;
	gap: 0 var(--spacing-2x);



}

.card-grid--unavailable > .card-grid__image .avvio-image__image
{
	max-width: unset;
	width: 160px;
	aspect-ratio: 5 / 3;
	filter: opacity(0.8);
}

.card-grid--room-secondary .card-grid__image img
{
	width: 160px;
	aspect-ratio: 5 / 3;
}

.card-grid--small img
{
	width: 108px;
}


.card-grid.grid-layout img
{
	border-radius: var(--border-radius-1x);
}

.card-grid__image img
{
	object-position: center;
	object-fit: cover;
	aspect-ratio: var(--img-ratio-secondary);
}

.card-grid--secondary.card-grid--room img
{
	aspect-ratio: var(--img-ratio-room-secondary);
}

.card-grid--secondary.card-grid--rate img
{
	aspect-ratio: var(--img-ratio-rate-secondary);
}

.card-grid__bubble
{
	justify-content: end;
	flex-wrap: wrap;
}

.card-grid__price
{
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.card-grid__button
{
	justify-self: end;
	align-self: end;
}

.card-grid__description
{
	display: flex;
	gap: var(--spacing-1x);
	align-self: start;
	flex-wrap: wrap;
}

.card-grid--small .card-grid__description
{
	display: block;
}

.card-grid--small .card-grid__description .discount-list
{
	margin-top: var(--spacing-1x);
}

.card-grid__bubbles .card-information__bubble-area
{

	justify-content: end;
}

.card-grid.grid-layout
{
	padding-top: var(--spacing-2x);
	border-top: 1px solid var(--border-default);

}

.card-grid__bubbles .card-information__bubble-area
{
	flex-wrap: wrap;
}

.multi-room-modal__option
{
	grid-template-areas:
		"image title bubbles bubbles bubbles check"
		"image incentives bubbles bubbles bubbles check"
		"image description description . . check"
		"image description description price button check";

	grid-template-columns: 160px 1fr auto auto auto auto;
	grid-template-rows: auto auto 1fr auto;
	gap: 0 var(--spacing-2x);
	
}

.card-grid__check
{
	align-self: center;
	width: var(--spacing-2x);
}

.card-grid__title h4,
.card-grid__title h5
{
	cursor: pointer;
	text-decoration: underline;
}

.card-grid__title h4.nonclick,
.card-grid__title h5.nonclick
{
	cursor: default;
	text-decoration: none;
}

.card-grid--rate-primary
{
	grid-template-columns: 330px 1fr auto auto auto;
}

@media (max-width:1200px) {

	.card-grid--primary, .card-grid--primary.card-grid--multi-room
	{
		grid-template-areas:
		"image title bubbles"
		"image incentives incentives"
		"image description description"
		"image mda-strip mda-strip"
		"image . button"
		"image . sel-date"
		"content content content";

		grid-template-columns: 330px 1fr auto;
		grid-template-rows: auto auto 1fr auto auto auto auto;
		gap: 0 16px;
	}
	
	.card-grid--primary.card-grid--multi-room
	{
		grid-template-areas:
		"image title bubbles"
		"image incentives incentives"
		"image description description"
		"image . price"
		"image . button"
		"content content content";

		grid-template-columns: 320px 1fr auto;


	}

	.card-grid--room-primary {
		grid-template-columns: 330px 1fr auto;
	}
	
	.card-grid--unavailable
	{
		grid-template-areas:
			"image title title"
			"image incentives incentives"
			"image description description"
			"mda-strip mda-strip mda-strip"
			"bubbles bubbles button";
	
		grid-template-columns: 160px 1fr auto;
		grid-template-rows: auto auto 1fr auto auto;
		gap: 0 var(--spacing-2x);

	}
	
	.card-grid--unavailable .card-grid__bubbles
	{
		justify-self: end;
		align-self: end;
	
	}
}

@media (max-width:1024px) {
	.card-grid--room-primary {
		grid-template-columns: 330px 1fr auto;
	}

	.card-grid--rate-primary
	{
		grid-template-columns: 1fr auto auto;
	}
}



@media (max-width:744px) {

	.card-grid--primary
	{
		grid-template-areas:
			"image image"
			"title bubbles"
			"incentives bubbles"
			"description description"
			"mda-strip mda-strip"
			"button button"
			"sel-date sel-date"
			"content content";

		grid-template-columns: 1fr auto;
		grid-template-rows: auto auto auto 1fr auto auto auto auto;
		gap: 0;

	}
	
	.card-grid--primary.card-grid--multi-room
	{
		grid-template-areas:
			"image image"
			"title bubbles"
			"incentives bubbles"
			"description description"
			"price price"
			"button button";

		grid-template-columns: auto auto;


	}
	
	.card-grid__content
	{
		margin-top: 0;
	}

	.card-grid--primary > .card-grid__image .avvio-image__image,
	.card-grid--primary.card-grid--room-primary > .card-grid__image .avvio-image__image
	{
		/* TS to clean. important added as results-copy and result different */
		width: 100% !important;
		aspect-ratio: var(--img-ratio-primary-mobile);
	}

	.card-grid--primary.card-grid--room-primary > .card-grid__image .avvio-image__image
	{
		aspect-ratio: var(--img-ratio-room-primary-mobile);
	}

	.card-grid--primary.card-grid--rate-primary > .card-grid__image .avvio-image__image
	{
		aspect-ratio: var(--img-ratio-rate-primary-mobile);
	}

	.card-grid--primary > .card-grid__bubbles
	{
		margin: var(--spacing-1x) 0;
	}


	.card-grid--secondary
	{
		grid-template-areas:
		"title title bubbles bubbles"
		"image price price button"
		"image price price button";

		grid-template-columns: auto minmax(0, 1fr) auto auto;
		grid-template-rows: auto auto auto auto auto auto;
		gap: 0 var(--spacing-1x);
	}

	.card-grid.grid-layout .card-information__bubble-area
	{
		justify-content: end;
		flex-wrap: wrap;
	}
	
	.multi-room-modal__option
	{
		grid-template-areas:
			". . bubbles bubbles bubbles check"
				"image title bubbles bubbles bubbles check"
				"image incentives incentives incentives incentives check"
				"image description description description description check"
				"image . . price button check";
	
		grid-template-columns: 160px 1fr auto auto auto auto;
		grid-template-rows: auto auto auto 1fr auto;
		gap: var(--spacing-1x);
		
	}
	
	.card-grid__mda-strip{ display: none; }
	
	.card-grid--secondary .card-grid__description
	{
		margin-bottom: var(--spacing-1x);
		display: none;
	}

	.card-grid--secondary .card-grid__description p
	{
		display: none;
	}

	.card-grid--primary .card-information__selected-date
	{
		margin-bottom: 0;
		padding-right:0;
		padding-bottom: 0;;
	}

	.card-grid--secondary img
	{
		width: 100%;
		max-width: 110px;
		aspect-ratio: 16 / 9;
	}

	.card-grid--room-secondary img
	{
		aspect-ratio: 16 / 9;
	}

}

@media (max-width:600px) {
	
	.multi-room-modal__option
	{
		grid-template-areas:
			". bubbles bubbles check"
			"title title title check"
			"incentives incentives incentives check"
			"description description description check"
			"image image price check"
			"image image button check";

		grid-template-columns: auto auto auto auto;
		grid-template-rows: auto auto auto 1fr auto auto;
		
	}
	
	.card-grid--primary > .card-grid__title
	{
		margin-top: var(--spacing-1x);
	}

	.card-grid__description
	{
		flex-wrap: wrap;
	}

	.card-grid--secondary.card-grid--room img
	{
		aspect-ratio: var(--img-ratio-room-secondary-mobile);
	}

	.card-grid--secondary.card-grid--rate img
	{
		aspect-ratio: var(--img-ratio-rate-secondary-mobile);
	}

	.card-grid__price
	{
		justify-content: end;
	}

	.card-grid--secondary .card-grid__price
	{
		margin-bottom: 0;
	}

	.card-information__price-row
	{
		flex-wrap: wrap;
	}

}

@media (max-width:480px) {
	
	.card-grid--primary
	{
		grid-template-areas:
			"image image"
			"title bubbles"
			"incentives bubbles"
			"description description"
			"mda-strip mda-strip"
			"button button"
			"sel-date sel-date"
			"content content";

		grid-template-columns: 1fr auto;
		grid-template-rows: auto auto auto 1fr auto auto auto auto;

	}

	.card-grid--unavailable
	{
		grid-template-areas:
			"image"
			"title"
			"incentives"
			"description"
			"mda-strip "
			"bubbles"
			"button";
	
		grid-template-columns: auto;
		grid-template-rows:repeat(7, auto);
		gap: var(--spacing-1x);

	}
	
	.card-grid--unavailable > .card-grid__image .avvio-image__image
	{
		width: 100%;
	}	
	
	.card-grid--secondary
	{
		grid-template-areas:
		"title title bubbles bubbles"
		"image price price button"
		"image price price button";

		grid-template-columns: auto minmax(0, 1fr) auto auto;
		grid-template-rows: auto auto auto auto auto auto;

	}

	.card-grid--small:not(.card-grid--unavailable)
	{
		grid-template-columns: auto minmax(0, 1fr) auto auto;
	}
	
	.multi-room-modal__option,
	.card-grid--secondary.card-grid--multi-room
	{
		grid-template-areas:
			"bubbles bubbles check"
			"title title check"
			"incentives incentives check"
			"description description check"
			"image price check"
			"image button check";

		grid-template-columns: 1fr auto auto;
		grid-template-rows: auto auto auto auto 1fr auto;
		row-gap: 0;
	}
	
	.discount-list
	{ 
		width: 100%; 
	}
	
	.card-information__avg-row, .card-information__fees-row
	{
		row-gap: 0;
	}

	.card-grid--secondary img
	{
		width: 100%;
		max-width: 110px;
	}

	.card-grid__description > .button,
	.discount-bubble .button__text,
	.card-grid__bubbles .remaining-bubble,
	.mda-table__data-row .remaining-bubble
	{
		display: none;
	}

}

/*
------------------------------------ NEW GRID LAYOUT CARDS END ------------------------------------
*/



.section { border:1px solid var(--border-default); border-radius: var(--border-radius-2x); padding:var(--spacing-2x); }
.xxxxsection.external-section { border-width:8px; border-color:var(--brand-background); /*box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.10), 0px 0px 2px 0px rgba(0, 0, 0, 0.20);*/  }
.section.external-section { border: 8px solid var(--brand-background); box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.10), 0px 0px 2px 0px rgba(0, 0, 0, 0.20); }
.section.sectionerror { box-shadow: 0 0 1px 2px var(--border-critical); }
.caption.below-header, .paragraph.below-header { padding-bottom:var(--spacing-2x); margin-top: var(--spacing-05x); }
.caption.below-input, .paragraph.below-input { padding-bottom: var(--spacing-1x); }
.caption.above-input, .paragraph.above-input { padding-top: var(--spacing-1x); }

.action-banner { display:flex; flex-direction:row; gap:var(--spacing-2x); border-radius: var(--border-radius-2x); padding: var(--spacing-2x); background-color: var(--base-default); color: var(--text-default); border:1px solid var(--border-default); }
.action-banner a { color:  var(--text-default); }
.action-banner-grid { flex:1; display:flex; gap:var(--spacing-2x); }
.action-banner div.action-banner-icon { background-color: var(--text-default); border-radius: var(--border-radius-3x); color: var(--base-default); display: flex; width: 32px; height: 32px; justify-content: center; align-items: center; font-size: 16px; }
.action-banner div.action-banner-content { display:flex; flex-direction:column; gap: var(--spacing-1x); flex:1; }
.action-banner div.action-banner-title { font-weight:600; }
.action-banner .heading { color: var(--text-default); }

@media (max-width:744px) {
	.action-banner-grid { flex-direction:column; }
	.list-interests { grid-template-columns:1fr 1fr; }
	.list-facilities { grid-template-columns:1fr 1fr; }
	.list-sites { grid-template-columns:1fr 1fr; }
}

@media (max-width: 480px) {
	.list-interests { grid-template-columns:1fr; }
	.list-facilities { grid-template-columns:1fr; }
	.list-sites { grid-template-columns:1fr; }
}

/* OTAInsight */
#ipulse .pc-widget-container { position:relative; padding:0px; display:flex; justify-content:end; }
#ipulse .pc-widget { min-height: 60px; display:flex; flex:1; max-width:850px; direction:ltr; }
#ipulse .pc-widget .oneprice { flex: 1; text-align:center; font-size:14px; line-height:150%; border:1px solid var(--border-featured); background-color: var(--background-white); }
#ipulse .pc-widget .myprice { flex: 1; text-align:center; font-size:14px; line-height:150%; }
#ipulse .pc-widget .myprice { background-color: var(--color-success); color: var(--border-success); border:1px solid var(--border-success); font-size:14px; font-weight:500; }
#ipulse .pc-widget div:first-child { border-radius: var(--border-radius-1x) 0 0 var(--border-radius-1x); }
#ipulse .pc-widget div:last-child { border-radius:0px var(--border-radius-1x) var(--border-radius-1x) 0; }
#ipulse .pc-widget > div.oneprice,
#ipulse .pc-widget > div.myprice { border-inline-end-width:0; }
#ipulse .pc-widget > div:last-child { border-inline-end-width:1px; }
#ipulse .pc-widget .myprice .otaprice { font-weight:600; }
#ipulse .pc-widget .si { display:flex; flex-direction:column; justify-content:center; }
#ipulse .pc-widget .pc-incentives { text-align:center; font-weight:normal; flex:1.5; }
#ipulse .pc-widget .pc-spacer { flex:0.2; }
#ipulse .pc-powered { position:absolute; left:1px; bottom:-3px; }

@media (max-width: 600px) {
	#ipulse .pc-widget { flex-wrap: wrap; flex-basis: 100%; }
	#ipulse .pc-widget .otaname { flex: 1; text-align:left; }
	#ipulse .pc-widget .otaprice { flex: 1; text-align:right; }
	#ipulse .pc-widget .oneprice { flex-direction:row; min-width:100%; padding: var(--spacing-1x); }
	#ipulse .pc-widget .myprice { min-width:100%; justify-content:center; padding: var(--spacing-1x); }
	#ipulse .pc-widget > div.oneprice,
	#ipulse .pc-widget > div.myprice { border-right-width:1px; border-bottom-width:0; }
	#ipulse .pc-widget > div:last-child { border-bottom-width:1px; }
	#ipulse .pc-widget div:first-child { border-radius: var(--border-radius-1x) var(--border-radius-1x) 0 0; }
	#ipulse .pc-widget div:last-child { border-radius:0 0 var(--border-radius-1x) var(--border-radius-1x); }
	#ipulse .pc-widget .si { flex-direction:row; }
	#ipulse .pc-widget .pc-incentives { flex-direction:row; }
	#ipulse .pc-widget .pc-incentive { flex: 1; text-align:center; }
	#ipulse .pc-widget .pc-spacer { display:none; }
	#ipulse .pc-powered { position:relative; text-align:center; }
}

.price-and-button {
	white-space: nowrap;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: end;
	gap: var(--spacing-1x);
}

.page-control-panel {
	display: flex;
	flex-direction: column;
	padding: var(--spacing-1x) var(--spacing-2x) var(--spacing-1x);
	gap: var(--spacing-2x);
	margin-bottom:var(--spacing-2x);
	/*position:sticky; top:0; z-index:9000;*/
}

.box.page-control-panel {
	padding: var(--spacing-05x) var(--spacing-1x);
	top: -1px;
}

.layout-results .box.page-control-panel,
.layout-search .box.page-control-panel 
{
	position: sticky;
}

.layout-results .box.page-control-panel.is-pinned,
.layout-search .box.page-control-panel.is-pinned
{
	border-top-left-radius: 0;
	border-top-right-radius: 0;
	box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.10), 0px 0px 2px 0px rgba(0, 0, 0, 0.20);
	z-index: 20;
}

.box.page-control-panel.is-pinned-frame 
{
	top: -17px;
}

@media screen and (max-width:744px) {

	.layout-results .box.page-control-panel,
	.layout-search .box.page-control-panel 
	{
		position: relative;
	}

	#bookingEngineModal .layout-results .box.page-control-panel,
	#bookingEngineModal .layout-search .box.page-control-panel 
	{
		position: sticky;
	}

	:not(.avvio-modal__main) > .layout-results .box.page-control-panel.is-pinned > div,
	:not(.avvio-modal__main) > .layout-search .box.page-control-panel.is-pinned > div
	{
		border-top-left-radius: 0;
		border-top-right-radius: 0;
		z-index: 10;
		box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.10), 0px 0px 2px 0px rgba(0, 0, 0, 0.20);
		position: fixed;
		top:0;
		left:0;
		width: 100%;
		background: var(--base-default);
		padding: var(--spacing-05x) var(--spacing-1x);
	}



}


.box.page-control-panel:has(.banner) 
{
	gap: 0;
	padding-bottom: var(--spacing-2x);
}

.box.page-control-panel:has(.banner) > .banner,
.box.page-control-panel #section_filtered-banner .banner
{
	margin-inline-start: var(--spacing-1x);
}

.page-layout > :empty {
	display: none;
}

.details-page-grid {
	display: grid;
	grid-template-columns: 3fr 2fr;
	gap: var(--spacing-2x);
}

.next-page-message {
	/* next page messages */
	margin-bottom: var(--spacing-2x);
}

@media screen and (max-width:1024px) {
	/*.content { padding-top:0; }*/
	.page-control-panel.box { margin-top: calc(var(--spacing-2x) * -1); border-radius:0; border-left:none; border-right:none; border-top:none; }
	.page-layout, #message_container { gap:var(--spacing-2x); padding:0 var(--spacing-2x); }
	.page-layout-inline { gap:var(--spacing-2x); }
	/*#bigCalendar { border-radius:0; }*/
	/*.page-box.box { border-radius:0; }*/
	/*.page-layout > div { xborder-radius:0; xborder-left:none; xborder-right:none; }*/
}

@media only screen and (max-width: 900px) {
.details-page-grid { display:flex; flex-direction:column;gap:var(--spacing-2x); }
.details-page-terms { flex-direction:column; margin-top: var(--spacing-1x); align-items:end; }
}

@media screen and (max-width:744px) {

	.page-layout, #message_container { gap:var(--spacing-2x); padding:0 var(--spacing-1x); }
	.page-layout-inline { gap:var(--spacing-2x); }

	.box.page-control-panel:has(.banner) 
	{
		gap: var(--spacing-1x);
		padding-bottom: var(--spacing-1x);
	}

	.next-page-message {
		/* next page messages */
		margin-bottom: var(--spacing-3x);
		margin-top: calc(var(--spacing-1x)* -1);
	}
	
}

@media screen and (max-width:600px) {
	.page-layout, #message_container { gap: var(--spacing-2x); padding:0 8px; }
	.page-layout-inline { gap: var(--spacing-1x); }
	.details-page-grid { gap: var(--spacing-1x); margin-top:-8px; /*nasty*/ }
	.page-control-panel { margin-bottom: var(--spacing-2x); }

}


@media screen and (max-width:480px) {
	.page-layout, #message_container { padding:0 var(--spacing-05x); }
	.is-pinned + .page-layout 
	{ 
		padding-top: 60px; 
	}
}


/*****************************
 *
 *  MDA Table
 *
 */

.mda-table
{
	border-collapse: collapse;
	z-index: 0;
}

.mda-table tr th {
	border-bottom: 1px solid var(--border-default);

	position: sticky !important;
	top: 60px;
	z-index: 999;
	background: var(--background-white);
}

.mda-table .date-header
{
	background:  var(--cell-box-background);
	border-inline-start:1px solid var(--border-default);
	height: 50px;
}

.mda-table .date-header:last-child {
	border-inline-end:1px solid var(--border-default);
}

.mda-table tr td:last-child,
.mda-table tr th:last-child
{
	position: relative; 
}

.mda-table tr:first-child th > div
{
	height: 60px;
	padding: var(--spacing-1x);
	align-items: baseline;
}

.mda-table .room-header
{
	width: 330px;
}

/*.mda-table__closed
{
	background-image: linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(-45deg, #ccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(-45deg, transparent 75%, #ccc 75%);
	background-size: 20px 20px;
	background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}*/

.mda-cell-stay { background-color: var(--cell-box-background); }

.mda-table__hovered.good {
	background-color: green !important;
}

.mda-table__hovered.bad {
	background-color: red !important;
}

tr .mda-table__closed:not(.mda-table__los-available, .mda-table__checkout-date):after
{
	content: '';
	display: block;
	width: 30%;
	height: 30%;
	margin: auto;

	background-image:
		linear-gradient( 45deg, transparent 48%, var(--border-pressed) 50%, var(--border-pressed) 50%, transparent 53%),
		linear-gradient(-45deg, transparent 48%, var(--border-pressed) 50%, var(--border-pressed) 50%, transparent 53%);

	z-index: 9;
}

html[dir=rtl] .mda-table__closed:before {
	left: auto;
	right: 0;
}

html[dir=rtl] .mda-table__closed:after {
	left: auto;
	right: 5%;
}


tr.picking .mda-table__checkin-date ~ .mda-table__closed:not(.mda-table__los-available, .mda-table__checkout-date):after
{
	display: none;
}


.mda-table__data-row:not(.picking) .mda-table__no-checkin span.display-price, .mda-table__data-row:not(.picking) .mda-table__no-checkin span.display-currency,
.mda-table__data-row .mda-table__hovered ~ .mda-table__hovered.mda-table__no-checkin .mda-table__col-price-status
{ 
	display:none; 
}

.mda-table__data-row .mda-table__no-checkin.mda-table__stay-date span.display-price, .mda-table__data-row .mda-table__no-checkin.mda-table__stay-date span.display-currency,
.mda-table__data-row .mda-table__no-checkin.mda-cell-stay span.display-price, .mda-table__data-row .mda-table__no-checkin.mda-cell-stay span.display-currency,
.mda-table__data-row .mda-table__hovered ~ .mda-table__hovered.mda-table__no-checkin span.display-price, 
.mda-table__data-row .mda-table__hovered ~ .mda-table__hovered.mda-table__no-checkin span.display-currency 
{ 
	display:unset; 
}

.mda-table__no-checkin:not(.mda-cell-stay, .mda-table__stay-date, .mda-table__checkout-date) .mda-table__col-price-status .status
{
	bottom: initial;
	position: initial;
}

.mda-table th.price-header
{
	width: 275px;
}

.mda-table .date-header p
{
	margin: 0;
}

.mda-table .date-header .state
{
	font-size: 12px;
	display: block;
	margin-bottom: 5px;
	font-weight: 600;
	line-height: 18px;
}

.mda-table .date-header .state.active
{
	color: #fff;
	/*background: rgba(var(--brand-color-rgb-values), 1);*/
	background-color: var(--mda-box-background);
}

.mda-table__col-price
{	
	user-select: none;
}

.mda-table__col-price, .mda-table__total-price
{
	/*border: 1px solid var(--border-default);*/
	border-inline-start:1px solid var(--border-default);
}

.mda-table__col-price:last-child { border-right:1px solid var(--border-default); }

.mda-table tr td
{ 
	border-bottom:1px solid var(--border-default); 
	position: relative; 
	/*transition: all 0.1s ease-in; */
	color: var(--mda-box-text);
	padding: 0;
}

.mda-table__col-price span, .date-header .caption
{
	filter: none;
	-webkit-transition: 0.1s -webkit-filter linear;
	-moz-transition: 0.1s -moz-filter linear; 
	-moz-transition: 0.1s filter linear;
	-ms-transition: 0.1s -ms-filter linear;
	-o-transition: 0.1s -o-filter linear;
	transition: 0.1s filter linear, 0.1s -webkit-filter linear, 0.1s opacity;

}

.mda-table--blur-content .mda-table__col-price span, 
.mda-table--blur-content .date-header .caption
{
	filter: blur(3px);

}

.mda-table.mda-table--blur-content .date-header .state
{
	color: transparent; 
  	text-shadow: 0 0 5px rgba(255, 255, 255, 0.5); 
}

.mda-table .mda-table__checkin-date
{
	/*border-start-start-radius: var(--spacing-1x);
	border-end-start-radius: var(--spacing-15x);*/
}

.mda-table tbody td:empty:hover,
.mda-table__col-price.mda-table__no-checkin:hover
{
	cursor: default;
}

.mda-table .picking td.mda-table__los-available:hover
{
	cursor: pointer;
}

.mda-table__mda-nav
{
	margin-top: calc(-1 * var(--spacing-05x));
}

html[dir="rtl"] .mda-table__mda-nav
{
	transform: scaleX(-1);
}

.mda-table__mda-nav .button-icon__icon
{
	width: 20px;
	height: 20px;
	border-radius: 20px;
	font-size: 14px;
}

.mda-table .price-header p
{
	margin: 0;
	font-size: 12px;
}

.mda-table .card-information__bubble-area
{
	flex-wrap: wrap;
}

.mda-table .card-information__bubble-area.mda-sm-view
{
	align-self: start;
	margin-inline-start: auto;
	flex-direction: row-reverse;
}

/* from results */
				

.mda-table .avvio-image img
{
	height: 62px;
	aspect-ratio: var(--img-ratio-mda-secondary);
	object-position: center;
	object-fit: cover;
}

.card-grid--room-primary .mda-table .avvio-image img
{
	aspect-ratio: var(--img-ratio-mda-secondary-rate);
}

.card-grid--rate-primary .mda-table .avvio-image img
{
	aspect-ratio: var(--img-ratio-mda-secondary-room);
}

.mda-table__col-price, .mda-table th.date-header, .mda-table__tooltip-actor
{
	width: 74px;
	text-align: center;
	height: 77px;
	position: relative; 
	min-width: 0;
	flex-basis: calc(100% / 7);
	flex-grow: 0;
	flex-shrink: 0;
	font-weight:600;
	align-content: center;
}

.mda-table__tooltip-ctlr
{
	position: absolute;
	top:0;
}

.mda-table th.date-header
{
	height: 60px;
	padding: 0;
	padding-bottom: 5px;
	vertical-align: baseline;
}

.mda-table__col-price-discount
{
	top: 2px;
	left: 2px;
	padding: 0 4px;
	margin: 0px;
	font-size: 9px;
	border-radius: 0;
	position: absolute;
}

.mda-table__col-price-discount .banner__caption
{
	font-size: 11px;
}

.mda-table__checkout-date
{
	background: transparent;
}

.mda-table__checkout-date .currency-symbol,
.mda-table__checkout-date .price
{
	display: none;
}

.mda-table__checkout-date::after,
.mda-table__checkout-date .mda-table__tooltip-actor::after
{
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
	background: transparent;
	background-color: var(--mda-box-background); /* Use CSS variable for background color */
		
	/* Use SVG as a mask */
	-webkit-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 100 100"><path d="M 0 0 L 100 100 L 0 100 L 0 0 Z"/></svg>') no-repeat;
	mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 100 100"><path d="M 0 0 L 100 100 L 0 100 L 0 0 Z"/></svg>') no-repeat;
	/*background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 100 100"><path d="M 0 0 L 100 100 L 0 100 L 0 0 Z" style="fill: transparent;" /></svg>'), red;
	background-repeat: no-repeat;*/

	/* Ensure mask fills the entire element */
	-webkit-mask-size: cover;
	mask-size: 100% 100%, cover;
	object-fit: cover;
	background-size: 100% 100%;
	content: '';
	border-radius: 0;
	/*border-start-end-radius: 8px;
	border-end-end-radius: 8px;
	*/
	top: 0;
	right: 0;

	z-index: 10;
}

.mda-table__checkout-date:has(.mda-table__tooltip-ctrl):after
{
	display: none;
}

html[dir=rtl] .mda-table__checkout-date::after,
html[dir=rtl] .mda-table__checkout-date .mda-table__tooltip-actor::after
{
	transform: scaleX(-1);
}

.mda-table__checkout-date::after>svg>path { fill: red; }

.mda-table__checkout-date .mda-table__col-price-status,
.mda-table__checkin-date .mda-table__col-price-status
{
	z-index: 999999;
	display: block !important;
}

.mda-table__checkout-date .status,
.mda-table__checkin-date .status,
.mda-table__hovered-min .status
{
	display: block !important;
	color: var(--text-pressed);
}

tr:not(.picking) .mda-table__hovered.mda-table__checkout-date:hover:after,
tr:not(.picking) .mda-table__checkout-date:not(:hover) .mda-table__col-price-discount,
tr.picking .mda-table__checkout-date .mda-table__col-price-discount,
tr:not(.picking) .mda-table__no-checkin .mda-table__col-price-discount,
tr:not(.picking) .mda-table__hovered.mda-table__checkout-date:hover .mda-table__tooltip-actor:after
{
	display: none;
}

tr:not(.picking) .mda-table__hovered.mda-table__checkout-date:not(.mda-table__no-checkin):hover .currency-symbol,
tr:not(.picking) .mda-table__hovered.mda-table__checkout-date:not(.mda-table__no-checkin):hover .price
{
	display: inline-block;
}

.mda-table tr td.mda-table__checkin-date,
.mda-table tr td.mda-table__stay-date
{
	position: relative;
	background-color: var(--mda-box-background);
	color: var(--mda-box-text-hover);

}

.mda-table th.date-header-stay
{
	background-color: var(--cell-box-background);
}

/* from results end */
.mda-table__hovered:not(.mda-table__closed, .mda-table__no-checkin, .mda-table__no-depart):hover,
.mda-table__col-price.mda-table__stay-date:not(.mda-table__no-checkin, .mda-table__checkout-date):hover,
.mda-table__hovered:hover ~ .mda-table__hovered:not(.mda-table__checkout-date)
{
	background-color: var(--mda-box-background);
	cursor: pointer;
	color: var(--mda-box-text-hover);

}

.picking .mda-table__hovered.mda-table__checkout-date
{
	background-color: transparent;

}

.picking .mda-table__checkout-date.mda-cell-stay
{
	background-color: var(--cell-box-background);
}

.mda-table__no-checkin.mda-table__hovered:hover
{
	cursor: default;
}

.mda-table tr.mda-table__discount-row .mda-table__discount-container
{
	display: flex;
}

.mda-table tr.mda-table__discount-row .discount-list
{
	padding: var(--spacing-1x);
	margin: var(--spacing-1x);
	margin-inline-start: auto;
	width: auto;
}

.mda-table tr td.mda-table__discount-padding
{
	border-left: none;
}

.mda-table .mda-table__has-discount td:first-child
{
	border-bottom: none;
}

.room-tabs .room-tabs__buttons
{
	display: flex;
	justify-content: start;
	list-style: none;
	gap: var(--spacing-2x);
	padding: 0;
	background: none;
	border-bottom: 2px solid var(--border-default);
	margin: 0 0 var(--spacing-2x) 0;
}

.room-tabs .room-tabs__buttons li
{
	margin-bottom: -2px;
}

.room-tabs .room-tabs__buttons li.active,
.room-tabs .room-tabs__buttons li:hover
{
	border-bottom: 2px solid var(--brand-color-border);
}

.room-tabs .room-tabs__buttons li.active .button
{
	color: var(--brand-color-text);
}

.room-tabs .room-tabs__buttons li .button
{
	border: none;
	height: 44px;
}

.tabs-container > div
{
	display: none;
}

.tabs-container > div.active
{
	display: block;
}

.picking .mda-table__col-price:not(.mda-table__los-available, .mda-table__checkin-date, .mda-table__stay-date, .mda-table__checkout-date)
{
	color: #ddd;
	text-decoration: line-through;
	/* pointer-events: none; */
}

.picking .mda-table__checkin-date ~ .mda-table__col-price:not(.mda-table__los-available, .mda-table__stay-date, .mda-table__checkout-date)
{
	 pointer-events: none; 
}

.mda-table__info
{
	padding: var(--spacing-1x);
	padding-inline-start: 0;
}

.mda-table__col-price-status,
.mda-table__col-price-status span
{
	display: none;
}

.picking .mda-table__col-price-status,
.mda-table__no-checkin .mda-table__col-price-status,
.mda-table__checkout-date .mda-table__col-price-status,
.mda-table__checkin-date .mda-table__col-price-status,
.mda-table__hovered-min:not(.mda-table__checkin-date) .mda-table__col-price-status
{
	display: block;
}

.picking .mda-table__col-price-status .status,
.mda-table__no-checkin .mda-table__col-price-status .status,
.mda-table__checkout-date .mda-table__col-price-status .status,
.mda-table__checkin-date .mda-table__col-price-status .status,
.mda-table__hovered-min .mda-table__col-price-status .status
{
	display: block;
	position: absolute;
	bottom: 10px;
	width: 100%;
	text-align: center;
	padding: 0 var(--spacing-05x);
	line-height: 12px;
	z-index: 20;
	overflow: hidden;
	text-overflow: ellipsis;
	
}

.mda-table__checkout-date .mda-table__col-price-status .status,
.mda-table__checkin-date .mda-table__col-price-status .status,
.mda-table__hovered-min .mda-table__col-price-status .status
{
	background: #000;
	color: #fff;
	border-radius: 8px;
}

.mda-table__checkout-date .mda-table__col-price-status .status,
.mda-table__checkin-date .mda-table__col-price-status .status
{
	bottom: -5px;
}

.mda-table__checkin-date .mda-table__col-price-status .status
{
	top: -6px;
	bottom: auto;
	line-height: 14px;
}

.mda-table:not(.mobileTable) tbody tr:first-child .mda-table__checkin-date .mda-table__col-price-status .status
{
	top: 0px;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}

.mda-table__checkout-date .mda-table__col-price-status .status,
.mda-table__hovered-min .mda-table__col-price-status .status
{
	bottom: -6px;
	line-height: 14px;
	top: initial;
}

.mda-table__hovered:not(.mda-table__checkin-date, .mda-table__checkout-date) .mda-table__col-price-status .status
{
	text-transform: lowercase;
}

.picking .mda-table__los-available .mda-table__col-price-status .picking,
/*.picking :not(.mda-table__checkin-date) .mda-table__col-price-status .picking,*/
.picking .mda-table__checkin-date ~ .mda-table__col-price .mda-table__col-price-status .picking,
.mda-table__no-checkin .mda-table__col-price-status .status
{
	display: block;
}

.picking .mda-table__col-price-status .status,
.picking .mda-table__los-available :not(:has(.display-price)) .mda-table__col-price-status
{
	display: none;
}

.mda-table tr:first-child th:nth-child(2)
{
	border-top-left-radius: var(--spacing-1x);
	border-left: none;
}

.mda-table tr:first-child th:nth-child(8)
{
	border-top-right-radius: var(--spacing-1x);
}

.mda-table span.checkout-hint
{
	display: none;
	position: absolute;
	top: -20px;
	left: -25%;
	padding: var(--spacing-05x);
	border-radius: 0;
	width: max-content;
	z-index: 10;
	color: var(--text-default);
}

.mda-table tr td.mda-table__no-results-cell
{
	padding: var(--spacing-1x);
	text-align: center;
	border: none;
}



.mda-table__empty-row-nav
{
	display: none;
}

td.mda-table__mobile-nav
{
	display: flex;
	justify-content: space-between;
	order: 999;
	flex-basis: 100%;

}

.mda-table__longer-los-ctl
{
	position: absolute;
	top: 0;
	height: 100%;
}

.mda-table__longer-los-ctl .tooltip-ctrl__tooltip
{
	top: 55px;
	margin-inline-start: -24px;
}

.mda-table__longer-los
{
	position: absolute;
	top: calc(50% - 24px);
	left: -24px;
	z-index: 11;
}

.mda-table__select-checkout
{
	align-content: center;
}



@media (max-width: 1100px) {
	.mda-table .room-header{ width: auto;}
	/*.mda-table__col-price, .mda-table th.date-header{ width: 50px;} */
}

@media (min-width: 1001px) {
	.mda-table .card-information__bubble i
	{
		font-size: var(--text-size-caption);
		width: auto;
	}

	.mda-sm-view{ display: none !important;}
}

@media (max-width: 1000px) {

	.mda-lg-view{ display: none !important;}
	.mda-table tr{ display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--border-default); padding: var(--spacing-1x) 0; position: relative;}
	.mda-table tr:first-child{border-bottom: none;}
	.mda-table tr td:first-child{ flex-basis: 100%;}
	.mda-table tr:not(.mda-table__discount-row) td:first-child{border:none;}
	/*.mda-table tr td:last-child{ display: table-cell; flex-basis:100%;} */

	.mda-table tr.mda-table__discount-row
	{
		padding-top: 0;
	}

	.mda-table tr.mda-table__discount-row .discount-list
	{
		margin-top:0;
	}

	.mda-table tr th.room-header,
	.mda-table tr th.date-header
	{
		display: none;
	}

	.mda-table tr th.price-header
	{
		flex-basis: 100%;
	}

	.mda-table tr th.price-header > div
	{
		display: block;
		height: initial;
	}

	.mda-table tr th .mda-table__mda-nav
	{
		display: none;
	}

	.mda-table tr td:last-child
	{
		border: none;
	}

	.mda-table .mda-table__has-discount td:last-child,
	.mda-table .mda-table__has-discount,
	.mda-table__discount-row .mda-table__discount-cell
	{
		border-bottom: none;
	}

	.mda-table__info
	{
		padding:  0 0 var(--spacing-1x) 0;
	}

	.mda-table__total-price
	{
		display: flex;
		justify-content: space-between;
		flex-basis: 100%;
	}

	.mda-table__total-price .avvio-image
	{
		margin-bottom: var(--spacing-1x);
	}


	.mda-table .mda-table__info + .mda-table__col-price
	{
		border-inline-start:1px solid var(--border-default);
		margin-inline-start: auto;
	}

	.mda-table__col-price-date
	{
		font-size: 12px;
		color: hsl(from var(--text-default) h s l / 1);
	}

	.mda-table__col-price .display-price
	{
		font-weight: bold;
	}

	.mda-table__tooltip-ctrl .tooltip-ctrl__tooltip
	{
	}

	.mda-table tr td.mda-table__col-price, .mda-table__tooltip-actor
	{
		display: flex;
		align-items: center;
		align-content: center;
		justify-content: center;
		flex-wrap: wrap;
		border-top: 1px solid var(--border-default);
		border-top: none;
		border-bottom: none;
		margin-bottom: var(--spacing-1x);
		order: 3;
		height: 90px;
		border-inline-start: none;
		border-inline-end: 1px solid var(--border-default);
		transition: transform 0.5s ease;
	}

	.mobileTable tr td.mda-table__col-price, .mda-table__tooltip-actor
	{

		z-index: 10;
	}
	
	.card-grid--primary
	{
		overflow-x: hidden;
	}

	.mda-table tr.item td:nth-last-of-type(3)
	{
		margin-inline-end: auto;
	}

	.mda-table:not(.mobileTable) .item .mda-table__info + .mda-table__col-price::before,
	.mda-table:not(.mobileTable) tr.item td:nth-last-of-type(3)::before
	{
		font-family: var(--font-awesome);
		position: absolute;
		font-size: 11px;
		color: var(--text-default);
		content: "00 \A 00";
		background: var(--base-default);
		height: 90px;
		width: 30px;
		display: flex;
		align-items: center;
		text-align: center;
		filter: blur(3px);
		justify-content: center;
		animation: none;
		right: -30px;
		white-space: pre-wrap;

		
	}

	html[dir=rtl] .mda-table tr.item td:nth-last-of-type(3)::before
	{
		right: auto;
		left: -30px;
	}

	.mda-table:not(.mobileTable) .item .mda-table__info + .mda-table__col-price::before
	{
		right:auto;
		left: -30px;
		content: "00 \A 00";
		animation: none;
	}

	html[dir=rtl] .mda-table .item .mda-table__info + .mda-table__col-price::before
	{
		right: -30px;
		left: auto;
	}

	.mda-table__col-price.move-left, html[dir=rtl1] .mda-table__col-price.move-right  
	{
		transform: translateX(-30px);
	}

	.mda-table__col-price.move-right, html[dir=rtl1] .mda-table__col-price.move-left 
	{
		transform: translateX(30px);
	}

	.mda-table:has(.mda-table__mda-nav-prev:disabled) .mda-table__info + .mda-table__col-price::before,
	.mda-table:has(.mda-table__mda-nav-next:disabled) tr.item td:nth-last-of-type(2)::before
	{
		display: none;
	}

	@keyframes navHintRight {
		0% {
			opacity: 0;
			transform:  translate(0px, 0px);
		}
		50% {
			opacity: 1;
		}
		100% {
			opacity: 0;
			transform: translate(10px, 0px);
		}
	}

	@keyframes navHintLeft {
		0% {
			opacity: 0;
			transform:  translate(0px, 0px);
		}
		50% {
			opacity: 1;
		}
		100% {
			opacity: 0;
			transform: translate(-10px, 0px);
		}
	}

	.mda-table__info
	{
		order: 1;
	}

	.mda-table tr td.mda-table__total-price
	{
		order: 2;
		border-bottom: none;
		border-left: none;
	}
	
	.mda-table .avvio-image img
	{
		height: auto;
		width: 110px;
		aspect-ratio: 16 / 9;
	}
	
	.mda-table__mobile-nav-buttons
	{
		order: 4;
		justify-content: space-between;
		flex-basis: 100%;
		display: none;
	}

	tr:not(.picking) .mda-table__stay-date, tr:not(.picking) .mda-table__checkout-date
	{
		outline: 1px solid var(--base-pressed);
	}
	
	tr:not(.picking) .mda-table__checkout-date
	{
		background: var(--base-default);
	}

	tr.picking .mda-table__checkout-date, tr.picking .mda-table__stay-date
	{
		background: none;
	}

	.mda-table__checkout-date + td
	{
		border-left: none;
	}
	
	tr .mda-table__checkout-date .mda-table__col-price-date
	{
		display: inline;
		color: var(--text-default);
		z-index: 20;
	}

	.mda-table__checkout-date .mda-table__col-price-status
	{
		display: none;
	}

	.mda-table__no-checkin .mda-table__col-price-status span
	{
		line-height: 10px;
	}

	.mda-table .card-information__price-row
	{
		align-items: center;
		flex-direction: row;
		gap: 0 var(--spacing-1x);
		flex-wrap: wrap;
	}

	.mda-table tr .mda-table__total-cta
	{
		padding-top: 0;
		z-index: 10;
		
	}

	.mda-table .mda-table__total-price .button--medium,
	.card-grid--secondary .card-grid__button .button
	{
		padding: var(--spacing-1x);
	}

	.mda-table .mda-table__total-price .button--medium *
	{
		font-size: var(--text-size-paragraph);
		line-height: var(--line-height-paragraph);
	}

	.mda-table__empty-row-nav
	{
		display: flex;
	}

	.mda-table__empty-row-nav td
	{
		display: flex;
		justify-content: center;
	}
	
	.mda-table .avvio-incentives,
	.card-grid__price .tooltip-ctrl,
	.mda-table  .card-information__price-row .tooltip-ctrl,
	.card-grid__incentives
	{
		display: none;
	}

	.mda-table__no-checkin .mda-table__col-price-status .status
	{
		bottom: var(--spacing-025x);
	}

	table.mobileTable .mda-table__mobile-nav
	{

		position: absolute !important;
		bottom: 35px;
		width: 100%;
		z-index: 1;
	}
	
	.mda-table__longer-los-ctl
	{
		width: 100%;
	}

	.mda-table__longer-los
	{
		
		top: 50px;
		right: -24px;
		left: initial;
	}

	.mda-table__currency-symbol
	{
		position: absolute;
		top: calc(-1 * var(--spacing-3x));;
	}
}

@media (max-width: 744px) {
	.mda-table tr th.price-header > div 
	{
		margin-bottom: 0;
		padding-right:0;
		padding-bottom: 0;;
	}

	table.mobileTable td.mda-table__mobile-nav::before,
	table.mobileTable td.mda-table__mobile-nav::after
	{
		font-family: var(--font-awesome);
		position: absolute;
		font-size: 16px;
		color: var(--text-default);
		opacity: 0.8;
		content: "00 \A 00";
		background: var(--base-default);
		width: 30px;
		display: flex;
		align-items: center;
		text-align: center;
		filter: blur(5px);
		justify-content: center;
		animation: none;
		left: 5px;
		top: 5px;
		white-space: pre-wrap;
		z-index: 1;
		
	}

	table.mobileTable td.mda-table__mobile-nav::after
	{
		right: 5px;
		left: initial;

	}

	table.mobileTable td.mda-table__mobile-nav button
	{
		z-index: 10;
	}

	.card-grid--room-primary .mda-table .avvio-image img
	{
		aspect-ratio: var(--img-ratio-mda-secondary-rate-mobile);
	}

	.card-grid--rate-primary .mda-table .avvio-image img
	{
		aspect-ratio: var(--img-ratio-mda-secondary-room-mobile);
	}

	.room-3d iframe
	{
		height: 350px;
	}

/*
	td.mda-table__mobile-nav button
	{
		margin-inline-start: -16px;
		margin-inline-end: auto;
	}

	td.mda-table__mobile-nav button:last-child
	{
		margin-inline-start: auto;
		margin-inline-end: -16px;
	}
*/

}

.all-discounts-modal
{
	width: 100%;
	min-width: 320px;
	max-width: 450px;
}

.all-discounts-modal .discount-list
{
	width: 100%;
}

/* AVVIOSiteMaxLOS1 = body class CSS */
/*.AVVIOSiteMaxLOS1 #calendarModal.calendar-modal .avvio-modal__bottom,
.AVVIOSiteMaxLOS1 #bigCalendar .bottom,*/
.AVVIOSiteMaxLOS1 .mda-table th.date-header .state,
.AVVIOSiteMaxLOS1 .mda-table tr:first-child th:first-child > div,
.AVVIOSiteMaxLOS1.page-results .page-control-panel .button:nth-of-type(2),
.AVVIOSiteMaxLOS1.page-results .page-control-panel .separator:nth-of-type(1),
.AVVIOSiteMaxLOS1.page-index .page-control-panel .button:nth-of-type(1),
.AVVIOSiteMaxLOS1.page-index .page-control-panel .separator:nth-of-type(1),
.AVVIOSiteMaxLOS1 .avvio-calendar__date.check-out .avvio-calendar__state,
.AVVIOSiteMaxLOS1 .avvio-calendar__date.check-out::before,
.AVVIOSiteMaxLOS1 .avvioCalendarFragment .button-holder button:nth-child(2),
.AVVIOSiteMaxLOS1 .avvioCalendarFragment .avvio-calendar .check-out .avvio-calendar__reset,
.AVVIOSiteMaxLOS1 #section_calendar-button-text
{
	display: none;
}

.AVVIOSiteMaxLOS1 .avvioCalendarFragment .avvio-calendar .check-in .avvio-calendar__reset
{
	left: auto;
	right: -28px;
	top: -8px;
	bottom: auto;
}


.AVVIOSiteMaxLOS1 #calendarModal.calendar-modal{ padding-bottom: var(--spacing-2x); }

.AVVIOSiteMaxLOS1 .avvio-calendar__date.check-out
{
	border: none;
}

/* AVVIOSiteMaxLOS1 = body class CSS END */


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

Utility classes

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

.brand-color-text{ color: var(--brand-color-text); }
.brand-color-background{ background: var(--brand-color-background); }

.padding-0{ padding: 0; }
.padding-0125x{ padding: var(--spacing-0125x); }
.padding-025x{ padding: var(--spacing-025x); }
.padding-05x{ padding: var(--spacing-05x); }
.padding-1x{ padding: var(--spacing-1x); }
.padding-15x{ padding: var(--spacing-15x); }
.padding-2x{ padding: var(--spacing-2x); }
.padding-3x{ padding: var(--spacing-3x); }
.padding-4x{ padding: var(--spacing-4x); }
.padding-5x{ padding: var(--spacing-5x); }
.padding-8x{ padding: var(--spacing-8x); }

.padding-top-0{ padding-top: 0; }
.padding-top-1x{ padding-top: var(--spacing-1x); }
.padding-top-15x{ padding-top: var(--spacing-15x); }
.padding-top-2x{ padding-top: var(--spacing-2x); }
.padding-top-3x{ padding-top: var(--spacing-3x); }
.padding-top-4x{ padding-top: var(--spacing-4x); }
.padding-top-5x{ padding-top: var(--spacing-5x); }
.padding-top-8x{ padding-top: var(--spacing-8x); }

.padding-right-0{ padding-right: 0; padding-inline-end: 0; }
.padding-right-1x{ padding-inline-end: var(--spacing-1x); }
.padding-right-15x{ padding-inline-end: var(--spacing-15x); }
.padding-right-2x{ padding-inline-end: var(--spacing-2x); }
.padding-right-3x{ padding-inline-end: var(--spacing-3x); }
.padding-right-4x{ padding-inline-end: var(--spacing-4x); }
.padding-right-5x{ padding-inline-end: var(--spacing-5x); }
.padding-right-8x{ padding-inline-end: var(--spacing-8x); }

.padding-bottom-0{ padding-bottom: 0; }
.padding-bottom-1x{ padding-bottom: var(--spacing-1x); }
.padding-bottom-15x{ padding-bottom: var(--spacing-15x); }
.padding-bottom-2x{ padding-bottom: var(--spacing-2x); }
.padding-bottom-3x{ padding-bottom: var(--spacing-3x); }
.padding-bottom-4x{ padding-bottom: var(--spacing-4x); }
.padding-bottom-5x{ padding-bottom: var(--spacing-5x); }
.padding-bottom-8x{ padding-bottom: var(--spacing-8x); }

.padding-left-0{ padding: 0; padding-inline-start: 0; }
.padding-left-1x{ padding-inline-start: var(--spacing-1x); }
.padding-left-15x{ padding-inline-start: var(--spacing-15x); }
.padding-left-2x{ padding-inline-start: var(--spacing-2x); }
.padding-left-3x{ padding-inline-start: var(--spacing-3x); }
.padding-left-4x{ padding-inline-start: var(--spacing-4x); }
.padding-left-5x{ padding-inline-start: var(--spacing-5x); }
.padding-left-8x{ padding-inline-start: var(--spacing-8x); }

.margin-0{ margin: 0; }
.margin-0125x{ margin: var(--spacing-0125x); }
.margin-025x{ margin: var(--spacing-025x); }
.margin-05x{ margin: var(--spacing-05x); }
.margin-1x{ margin: var(--spacing-1x); }
.margin-15x{ margin: var(--spacing-15x); }
.margin-2x{ margin: var(--spacing-2x); }
.margin-3x{ margin: var(--spacing-3x); }
.margin-4x{ margin: var(--spacing-4x); }
.margin-5x{ margin: var(--spacing-5x); }
.margin-8x{ margin: var(--spacing-8x); }

.margin-top-auto{ margin-top: auto; }
.margin-top-0{ margin-top: 0; }
.margin-top-1x{ margin-top: var(--spacing-1x); }
.margin-top-15x{ margin-top: var(--spacing-15x); }
.margin-top-2x{ margin-top: var(--spacing-2x); }
.margin-top-3x{ margin-top: var(--spacing-3x); }
.margin-top-4x{ margin-top: var(--spacing-4x); }
.margin-top-5x{ margin-top: var(--spacing-5x); }
.margin-top-8x{ margin-top: var(--spacing-8x); }

.margin-right-0{ margin-right: 0; margin-inline-end: 0; }
.margin-right-1x{ margin-inline-end: var(--spacing-1x); }
.margin-right-15x{ margin-inline-end: var(--spacing-15x); }
.margin-right-2x{ margin-inline-end: var(--spacing-2x); }
.margin-right-3x{ margin-inline-end: var(--spacing-3x); }
.margin-right-4x{ margin-inline-end: var(--spacing-4x); }
.margin-right-5x{ margin-inline-end: var(--spacing-5x); }
.margin-right-8x{ margin-inline-end: var(--spacing-8x); }

.margin-bottom-auto{ margin-bottom: auto; }
.margin-bottom-0{ margin-bottom: 0; }
.margin-bottom-1x{ margin-bottom: var(--spacing-1x); }
.margin-bottom-15x{ margin-bottom: var(--spacing-15x); }
.margin-bottom-2x{ margin-bottom: var(--spacing-2x); }
.margin-bottom-3x{ margin-bottom: var(--spacing-3x); }
.margin-bottom-4x{ margin-bottom: var(--spacing-4x); }
.margin-bottom-5x{ margin-bottom: var(--spacing-5x); }
.margin-bottom-8x{ margin-bottom: var(--spacing-8x); }
.margin-auto{ margin-left: auto; margin-right: auto; }

.margin-left-0{ margin-left: 0; margin-inline-start: 0; }
.margin-left-1x{ margin-inline-start: var(--spacing-1x); }
.margin-left-15x{ margin-inline-start: var(--spacing-15x); }
.margin-left-2x{ margin-inline-start: var(--spacing-2x); }
.margin-left-3x{ margin-inline-start: var(--spacing-3x); }
.margin-left-4x{ margin-inline-start: var(--spacing-4x); }
.margin-left-5x{ margin-inline-start: var(--spacing-5x); }
.margin-left-8x{ margin-inline-start: var(--spacing-8x); }

.flex{display: flex; flex-direction: row; gap: var(--spacing-1x);}
.flex-hide-empty > :empty { display: none; }
.flex-center { justify-content: center; }
.flex-start { justify-content: start; }
.flex-end { justify-content: end; }
.flex-grow { flex-grow: 1; }
.flex-row{ flex-direction: row; }
.flex-column{ flex-direction: column; }
.flex-1{ flex-grow: 1; }
.flex-2{ flex-grow: 2; }
.flex-wrap{ flex-wrap: wrap; }

.basis-0{ flex-basis: 0px; }
.basis-1x{ flex-basis: var(--spacing-1x); }
.basis-2x{ flex-basis: var(--spacing-2x); }
.basis-3x{ flex-basis: var(--spacing-3x); }
.basis-4x{ flex-basis: var(--spacing-4x); }
.basis-5x{ flex-basis: var(--spacing-5x); }
.basis-8x{ flex-basis: var(--spacing-8x); }
.basis-9x{ flex-basis: var(--spacing-9x); }

.basis-10{ flex-basis: 10%; }
.basis-20{ flex-basis: 20%; }
.basis-30{ flex-basis: 30%; }
.basis-40{ flex-basis: 40%; }
.basis-50{ flex-basis: 50%; }
.basis-60{ flex-basis: 60%; }
.basis-70{ flex-basis: 70%; }
.basis-80{ flex-basis: 80%; }
.basis-90{ flex-basis: 90%; }
.basis-100{ flex-basis: 100%; }
.basis-400px{ flex-basis: 400px; }
.basis-500px{ flex-basis: 500px; }
.basis-600px{ flex-basis: 600px; }

.items-start{ align-items: flex-start; }
.items-end{ align-items: flex-end; }
.items-center{ align-items: center; }
.items-baseline{ align-items: baseline; }
.items-stretch{ align-items: stretch; }

.justify-normal{ justify-content: normal; }
.justify-start{ justify-content: flex-start; }
.justify-end{ justify-content: flex-end; }
.justify-center{ justify-content: center; }
.justify-between{ justify-content: space-between; }
.justify-around{ justify-content: space-around; }
.justify-evenly{ justify-content: space-evenly; }
.justify-stretch{ justify-content: stretch; }

.self-self{ align-self: auto; }
.self-start{ align-self: flex-start; }
.self-end{ align-self: flex-end; }
.self-end-safe{ align-self: safe flex-end; }
.self-center{ align-self: center; }
.self-center-safe{ align-self: safe center; }
.self-stretch{ align-self: stretch; }
.self-baseline{ align-self: baseline; }
.self-baseline-last{ align-self: last baseline; }

.grid{display: grid; gap: var(--spacing-1x);}

.gap-0{ gap: 0; }
.gap-0125x{ gap: var(--spacing-0125x); }
.gap-025x{ gap: var(--spacing-025x); }
.gap-05x{ gap: var(--spacing-05x); }
.gap-1x{ gap: var(--spacing-1x); }
.gap-15x{ gap: var(--spacing-15x); }
.gap-2x{ gap: var(--spacing-2x); }
.gap-3x{ gap: var(--spacing-3x); }
.gap-4x{ gap: var(--spacing-4x); }
.gap-5x{ gap: var(--spacing-5x); }
.gap-8x{ gap: var(--spacing-8x); }

.row-gap-0{ row-gap: 0; }
.row-gap-0125x{ row-gap: var(--spacing-0125x); }
.row-gap-025x{ row-gap: var(--spacing-025x); }
.row-gap-05x{ row-gap: var(--spacing-05x); }
.row-gap-1x{ row-gap: var(--spacing-1x); }
.row-gap-15x{ row-gap: var(--spacing-15x); }
.row-gap-2x{ row-gap: var(--spacing-2x); }
.row-gap-3x{ row-gap: var(--spacing-3x); }
.row-gap-4x{ row-gap: var(--spacing-4x); }
.row-gap-5x{ row-gap: var(--spacing-5x); }
.row-gap-8x{ row-gap: var(--spacing-8x); }

.column-gap-0125x{ column-gap: var(--spacing-0125x); }
.column-gap-025x{ column-gap: var(--spacing-025x); }
.column-gap-05x{ column-gap: var(--spacing-05x); }
.column-gap-1x{ column-gap: var(--spacing-1x); }
.column-gap-15x{ column-gap: var(--spacing-15x); }
.column-gap-2x{ column-gap: var(--spacing-2x); }
.column-gap-3x{ column-gap: var(--spacing-3x); }
.column-gap-4x{ column-gap: var(--spacing-4x); }
.column-gap-5x{ column-gap: var(--spacing-5x); }
.column-gap-8x{ column-gap: var(--spacing-8x); }

.grid-cols-1{ grid-template-columns: 1fr; }
.grid-cols-2{ grid-template-columns: repeat(2, 1fr); }
.grid-cols-3{ grid-template-columns: repeat(3, 1fr); }
.grid-cols-4{ grid-template-columns: repeat(4, 1fr); }

@media only screen and (max-width: 744px) {
	.grid { gap: var(--spacing-1x); }
}

@media only screen and (max-width: 600px) {
	.grid { 
		grid-template-columns: 1fr; 
	}
}

.width-10{ width: 10%; }
.width-20{ width: 20%; }
.width-30{ width: 30%; }
.width-40{ width: 40%; }
.width-50{ width: 50%; }
.width-60{ width: 60%; }
.width-70{ width: 70%; }
.width-80{ width: 80%; }
.width-90{ width: 90%; }
.width-100{ width: 100%; }

.height-100{ height: 100%; }

.display-contents{ display: contents; }

.min-width-10{ min-width: 10%; }
.min-width-20{ min-width: 20%; }
.min-width-30{ min-width: 30%; }
.min-width-40{ min-width: 40%; }
.min-width-50{ min-width: 50%; }
.min-width-60{ min-width: 60%; }
.min-width-70{ min-width: 70%; }
.min-width-80{ min-width: 80%; }
.min-width-90{ min-width: 90%; }
.min-width-100{ min-width: 100%; }
.min-width-400px{ min-width: 400px; }
.min-width-500px{ min-width: 500px; }
.min-width-600px{ min-width: 600px; }

.max-width-10{ max-width: 10%; }
.max-width-20{ max-width: 20%; }
.max-width-30{ max-width: 30%; }
.max-width-40{ max-width: 40%; }
.max-width-50{ max-width: 50%; }
.max-width-60{ max-width: 60%; }
.max-width-70{ max-width: 70%; }
.max-width-80{ max-width: 80%; }
.max-width-90{ max-width: 90%; }
.max-width-100{ max-width: 100%; }
.max-width-400px{ max-width: 400px; }
.max-width-500px{ max-width: 500px; }
.max-width-600px{ max-width: 600px; }


.box {
	padding: var(--spacing-2x);
	border-radius: var(--border-radius-2x);
	border: 1px solid var(--border-default);
	background-color: var(--base-default);
}

.border-radius-1x{border-radius: var(--border-radius-1x);}
.border-radius-2x{border-radius: var(--border-radius-2x);}
.border-radius-3x{border-radius: var(--border-radius-3x);}

.width-golden-large { width: 62%; }
.width-golden-small { width: 38%; }

.white-space-nowrap { white-space: nowrap; }
.white-space-normal { white-space: normal; }

.inline-block, .inline .inline-block { display: inline-block; zoom: 1; }

.text-left { text-align: left; }
.text-right { text-align: right; }
.text-center { text-align: center; }

.relative { position: relative; }
.border-box { -moz-box-sizing: border-box; box-sizing: border-box; }
.inline-text { display: inline; }
.float-left { float: left; }
.float-right { float: right; }
.center { text-align: center; }
.background-no { background: transparent; }

.border-top       { border-top: 1px solid var(--border-default); } 
.border-top-no    { border-top: 0; }
.border-left      { border-inline-start: 1px solid var(--border-default); } 
.border-left-no   { border-inline-start: 0; }
.border-bottom    { border-bottom: 1px solid var(--border-default); } 
.border-bottom-no { border-bottom: 0; }
.border-right     { border-inline-end: 1px solid var(--border-default); } 
.border-right-no  { border-inline-end: 0; }
.border-no        { border: 0; }

.border-warning{ --border-featured: var(--border-critical);}

.text-left   { text-align: left; }
.text-right  { text-align: right; }
.text-center { text-align: center; }

.bold { font-weight: bold; }
.font-bold { font-weight: bold; }
.normal { font-weight: normal; }
.font-normal { font-weight: normal; }
.font-italic { font-style: italic; }
.text-size-120 { font-size: 120%; }
.vertical-top { vertical-align: top; }
.vertical-bottom { vertical-align: bottom; }
.vertical-middle { vertical-align: middle; }
.white-space-nowrap { white-space: nowrap; }
.white-space-normal { white-space: normal; }
.no-underline, .no-underline:hover, .no-underline, .no-underline:focus { text-decoration: none; }
.display-none { display: none; }
.overflow-hidden { overflow: hidden; }
.overflow-auto { overflow: auto; }

.box-shadow{ box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.10), 0px 0px 2px 0px rgba(0, 0, 0, 0.20); }

.no-scroll{ position: fixed; overflow-y: scroll; }
.no-scroll.no-overflow{ overflow-y: hidden; }

.color-success,
.color-success:hover
{
	background-color: var(--color-success);
	border-color:     var(--border-success);
	color:            var(--border-success);
}

.list-section
{ 
	display: grid; 
	gap: var(--spacing-2x); 
}

.list-section:not(.list-vouchers) .card-information { border-radius:0;border-top:none;border-left:none;border-right:none;padding:0 0 var(--spacing-2x) 0; }
.list-section:not(.list-vouchers) .card-information:last-child { border-bottom:none; padding-bottom:0; }

.cursor-auto{ cursor: auto; }
.cursor-default{ cursor: default; }
.cursor-pointer{ cursor: pointer; }
.cursor-wait{ cursor: wait; }
.cursor-text{ cursor: text; }
.cursor-move{ cursor: move; }
.cursor-help{ cursor: help; }
.cursor-not-allowed{ cursor: not-allowed;  }

.font-thin{ font-weight: 100; }
.font-extralight{ font-weight: 200; }
.font-light{ font-weight: 300; }
.font-normal{ font-weight: 400; }
.font-medium{ font-weight: 500; }
.font-semibold{ font-weight: 600; }
.font-bold{ font-weight: 700; }
.font-extrabold{ font-weight: 800; }
.font-black{ font-weight: 900; }

.underline{text-decoration-line: underline; }
.overline{text-decoration-line: overline; }
.line-through{text-decoration-line: line-through; }
.no-underline{text-decoration-line: none; }

.list-no-style
{
	padding: 0;
	margin: 0;
	list-style: none;

}

/* Used to hide text that should only be read by screen readers */
.sr-only
{
	display: block;
	width: 0;
	height: 0;
	overflow: hidden;
}

.sr-visibility-none
{
	visibility: hidden;
}

/* RTL */
html[dir=rtl] .float-left  { float: right; }
html[dir=rtl] .float-right { float: left; }
html[dir=rtl] .text-left   { text-align: right; }
html[dir=rtl] .text-right  { text-align: left; }

@media (max-width: 1200px) {

}

@media (max-width: 1024px) {
	.lg-flex-col{ flex-direction: column; }
	.lg-flex-col-rev{ flex-direction: column-reverse; }
	
	.lg-items-start{ align-items: flex-start; }
	.lg-items-end{ align-items: flex-end; }
	.lg-items-center{ align-items: center; }
	.lg-items-baseline{ align-items: baseline; }
	.lg-items-stretch{ align-items: stretch; }

	.lg-justify-normal{ justify-content: normal; }
	.lg-justify-start{ justify-content: flex-start; }
	.lg-justify-end{ justify-content: flex-end; }
	.lg-justify-center{ justify-content: center; }
	.lg-justify-between{ justify-content: space-between; }
	.lg-justify-around{ justify-content: space-around; }
	.lg-justify-evenly{ justify-content: space-evenly; }
	.lg-justify-stretch{ justify-content: stretch; }

	.lg-width-10{ width: 10%; }
	.lg-width-20{ width: 20%; }
	.lg-width-30{ width: 30%; }
	.lg-width-40{ width: 40%; }
	.lg-width-50{ width: 50%; }
	.lg-width-60{ width: 60%; }
	.lg-width-70{ width: 70%; }
	.lg-width-80{ width: 80%; }
	.lg-width-90{ width: 90%; }
	.lg-width-100{ width: 100%; }
	.lg-image-ratio-169 { aspect-ratio: 16 / 9; }

	.lg-hide{ display: none; }
}

@media (max-width: 744px) {
	.width-10, .width-20, .width-30, .width-40, .width-50, .width-60, .width-70, .width-80, .width-90, .width-100{ width: 100%; }
	.sm-width-10{ width: 10%; }
	.sm-width-20{ width: 20%; }
	.sm-width-30{ width: 30%; }
	.sm-width-40{ width: 40%; }
	.sm-width-50{ width: 50%; }
	.sm-width-60{ width: 60%; }
	.sm-width-70{ width: 70%; }
	.sm-width-80{ width: 80%; }
	.sm-width-90{ width: 90%; }
	.sm-width-100{ width: 100%; }

	.md-flex-col{ flex-direction: column; }
	.md-flex-col-rev{ flex-direction: column-reverse; }

	.md-items-start{ align-items: flex-start; }
	.md-items-end{ align-items: flex-end; }
	.md-items-center{ align-items: center; }
	.md-items-baseline{ align-items: baseline; }
	.md-items-stretch{ align-items: stretch; }

	.md-justify-normal{ justify-content: normal; }
	.md-justify-start{ justify-content: flex-start; }
	.md-justify-end{ justify-content: flex-end; }
	.md-justify-center{ justify-content: center; }
	.md-justify-between{ justify-content: space-between; }
	.md-justify-around{ justify-content: space-around; }
	.md-justify-evenly{ justify-content: space-evenly; }
	.md-justify-stretch{ justify-content: stretch; }
	
	.md-hide{ display: none; }

	.md-text-left   { text-align: left; }
	.md-text-right  { text-align: right; }
	.md-text-center { text-align: center; }
}

@media (min-width: 601px) {
	.hide-desktop{ display: none; }
}

@media (max-width: 600px) {
	.hide-mobile{ display: none; }
}


@media (max-width: 480px) {
	.sm-flex-col{ flex-direction: column; }
	.sm-flex-col-rev{ flex-direction: column-reverse; }

	.sm-items-start{ align-items: flex-start; }
	.sm-items-end{ align-items: flex-end; }
	.sm-items-center{ align-items: center; }
	.sm-items-baseline{ align-items: baseline; }
	.sm-items-stretch{ align-items: stretch; }

	.sm-justify-normal{ justify-content: normal; }
	.sm-justify-start{ justify-content: flex-start; }
	.sm-justify-end{ justify-content: flex-end; }
	.sm-justify-center{ justify-content: center; }
	.sm-justify-between{ justify-content: space-between; }
	.sm-justify-around{ justify-content: space-around; }
	.sm-justify-evenly{ justify-content: space-evenly; }
	.sm-justify-stretch{ justify-content: stretch; }

	.sm-margin-top-1x{ margin-top: var(--spacing-1x); }

	.sm-hide{ display: none; }
}


/*
 ****************************************************************************
 *                                                                          *
 * !!! IMPORTANT !!!                                                        *
 *                                                                          *
 * The utility classes and their media-query adjusts really need to be the  *
 * last things declared in this file for proper cascading to happen!        *
 *                                                                          *
 ****************************************************************************
 */