@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700;800&family=Roboto:wght@100;300;400;500;700;900&display=swap');
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css");

:root {
	--main-font: 'Open Sans', sans-serif;
	--base-size:1.1rem;

	--box-shadow: 0 0 0 rgba(0, 0, 0, 0);
	--box-shadow-hover: 0 10px 26px rgba(0, 0, 0, 0.1);

	--modal-bg: rgba(255, 255, 255, 0.2);
	--modal-filter: blur(12px);

	--transition: all .7s cubic-bezier(.25, .8, .25, 1);

	--transform: scale(1) translateY(0px);
	--transform-hover: scale(1.01) translateY(-2px);

	--font-awesome: "Font Awesome 7 Free";

	/* Alerts */
	--alert-radius: 14px;
	--alert-padding: 1rem 1.25rem;
	--alert-gap: 0.85rem;
	--alert-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
	--alert-border-width: 4px;
	--alert-transition: 0.25s ease;

	/* Borders / Radius */
	--radius-sm: 4px;
	--radius-md: 14px;
	--radius-card: 25px;
	--radius-btn: 999px;
}

.modalPopUp{
	max-width:70% !important;
	width:100% !important;
	display:none;
}

div.field fieldset span.valueSpan.de_cols_1.hide{
	display:none !important;	
}

div[data-group="code-terms"] .valueSpan.de_cols_1{
	max-width: 100% !important;
	width:100% !important;
}
div[data-group="permission"] fieldset legend{
	display:none;	
}
div[data-group="permission"] p{
	display:none;	
}
div[data-group="permission"] p.body-text{
	display:block;
	margin:1rem 0;
}
.alert.alert-success{
	display:none !important;	
}
div.field div.form-group label,
div.field div.form-group legend.left{
	width: 29%;
}
div.field div.form-group div{
	width: 70%;	
}
div[data-group="note"] .text-editable{
	width:100% !important;	
}
h2{
	border-bottom: 2px solid rgba(00, 147, 141, 0.2) !important;
	font-size: 1.4rem !important;
	font-weight: 500 !important;
}
ul.nav.navbar-nav {
	max-width: 85%;
	margin: 0 auto;
	display: flex;
	align-items: center;
	width: 100%;
	justify-content: flex-start;
	gap: 0rem;
}
.navbar-nav>li {
	width: auto !important;
	float: none !important;
	margin: 0 !important;
}
.navbar-nav>li a{
	font-size:var(--base-size);	
}
div#fieldContainer {
	display: grid;
	gap: 0.5rem;
}
div.field{
	overflow: visible !important;
	margin: 0px !important;
	width: 100% !important;
}
.form-group{
	overflow: visible !important;	
}
#content,
#header div.container,
#footer .footer{
	max-width:85%;
	width:100% !important;
}
.btn-wrapper{
	padding: 1rem;
	display: flex;
	justify-content: space-between;
	width: 100%;
	flex-wrap: wrap;
	align-items: center;	
}
.btn-wrapper a{
	transition:var(--transition);
	transform:var(--transform);
	box-shadow:var(--box-shadow);
}
.btn-wrapper a:hover{
	transform:var(--transform-hover);
	box-shadow:var(--box-shadow-hover);

}
/******************************
Alerts
******************************/
.alert, .pageinfo {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: var(--alert-gap);
	padding: var(--alert-padding) !important;
	border-radius: var(--alert-radius);
	border: none;
	font-size: 0.95rem;
	line-height: 1.55;
	font-weight: 500;
	box-shadow: var(--alert-shadow);
	transition: all var(--alert-transition);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	animation: alertFadeIn 0.35s ease;
}

.alert strong,
.pageinfo strong{
	font-weight: 600;
}

.alert:hover,
.pageinfo:hover{
	transform: translateY(-2px);
}

.alert-success,
.pageinfo.rev{
	border-left: none;
	background:
		linear-gradient(white, white) padding-box,
		linear-gradient(180deg, #10b981, #059669) border-box;
	border-left: 4px solid rgba(46, 204, 113, 1);
}

.pageinfo.rev{
	border-right: 4px solid rgba(46, 204, 113, 1);
	justify-content:center;
	margin: 2rem 0;
}


.alert-info,
.pageinfo.editpagenote{
	background: rgba(59, 130, 246, 0.12);
	color: #1e3a8a;
	border-left: var(--alert-border-width) solid #3b82f6;
}
.pageinfo.editpagenote{
	border-right: var(--alert-border-width) solid #3b82f6;
	justify-content:center;
	margin: 2rem 0;
}
.alert-warning {
	background: rgba(245, 158, 11, 0.15);
	color: #78350f;
	border-left: var(--alert-border-width) solid #f59e0b;
}

.alert-danger {
	background: rgba(239, 68, 68, 0.12);
	color: #7f1d1d;
	border-left: var(--alert-border-width) solid #ef4444;
}

.alert-inclusive {
	background: rgba(155, 89, 182, 0.03);

	border-left: var(--alert-border-width) solid rgba(155, 89, 182, 1);
}

.alert-inclusive i {
	color: rgba(155, 89, 182, 1);
}

.alert-inclusive span {
	display: flex;
	gap: 0.5rem;
}

.alert-icon {
	font-size: 1.2rem;
	margin-top: 2px;
	flex-shrink: 0;
	opacity: 0.95;
	transition: transform var(--alert-transition),
		opacity var(--alert-transition);
}

.alert:hover .alert-icon {
	transform: scale(1.15);
	opacity: 1;
}

#content .alert i {
	font-size: 1.5rem;
}

@keyframes alertFadeIn {
	from {
		opacity: 0;
		transform: translateY(-8px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.alert .close {
	margin-left: auto;
	font-size: 1rem;
	opacity: 0.5;
	transition: opacity 0.2s ease;
}

.alert .close:hover {
	opacity: 1;
}

/******************************
Modal Adjustments
******************************/

.modalPopUp {
	width: 55% !important;
	display: inline-block;

	padding: 1.3rem;
	border-radius: 25px;
	box-shadow: 0px 4px 18px rgba(0, 0, 0, 0.2);
	display: none;
}

.modalPopUp h1 {
	font-weight: bold;
}

.modalPopUp p {
	margin: 1rem;
}

.fancybox-slide {
	background-color: transparent;
}

.fancybox-container .fancybox-bg {
	opacity: 1 !important;
	background: rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(6px);
}

.modal-backdrop.in {
	background: rgba(255, 255, 255, 0.1) !important;
	backdrop-filter: blur(10px) !important;
	opacity: 1 !important;
}

#mycs-loading-mask {
	display: none;
	background: rgba(255, 255, 255, 0.1) !important;
	opacity: 1 !important;
	backdrop-filter: blur(10px) !important;
}

#mycs-loading-mask #mycs-spinner {
	background: url('https://mycs-cdn.myconferencesuite.com/other/Project/3986/6e/a0/6ea052d8f523e4e155019e524ad2c31d95f92df49d3674323978a17ae63ff4be.gif') no-repeat center center / contain !important;
	width: 155px;
	height: 155px;
	transform: translate(-50%, -50%) scale(1);
	display: flex;
	align-items: center;
	justify-content: center;
	animation: pulse 1.8s ease-in-out infinite;
	filter: drop-shadow(0px 2px 10px rgba(00, 00, 00, 0.25));
}

.fancybox-slide>* {
	box-shadow: 0px 0px 20px rgba(00, 00, 00, 0.6);
	border-radius: 25px;
}

.fancybox-close-small:after {
	background: rgba(192, 57, 43, 0.8) !important;
	border: 2px solid #ffffff !important;
	box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.1) !important;
	color: #ffffff !important;
	text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1) !important;
	transition: all 0.3s ease;
	transform: scale(1);
	outline: none !important;
	display: flex;
	align-items: center;
	justify-content: center;
}

.fancybox-close-small:hover:after,
.fancybox-close-small:focus:after {
	background: rgba(192, 57, 43, 1) !important;
	border: 2px solid #ffffff !important;
	box-shadow: 2px 2px 14px rgba(0, 0, 0, 0.2) !important;
	color: #ffffff !important;
	text-shadow: 1px 2px 10px rgba(0, 0, 0, 0.2) !important;
	transition: all 0.3s ease;
	transform: scale(1.1);
	outline: none !important;
}

#header-inner-wrap {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 1rem;
	padding: 1rem 0;
}

#header-inner-wrap .header-logo{
	width: unset;
	float: unset;
	padding: unset;
}

#header-inner-wrap .header-logo img {
	height: 145px !important;
	margin: 0px !important;
}
#header div.container {
	margin: 0 auto !important;
}
#header div.container:before,
#header div.container:after{
	display:none;	
}
img.landing-image {
	margin: 0 0 1rem 0;
	border-radius: 25px;
	box-shadow: 0px 10px 23px rgba(00, 00, 00, .1);
	border: 2px solid rgba(38, 71, 124, 0.1);
}
h4 {
	font-weight: bold;
	text-align: center;
	margin: 2rem 0;
	font-size: 1.5rem;
	display: grid;
	gap: 1rem;
	line-height: normal;
}
h4 span:first-of-type{

}
h4 span:last-of-type{
	color:#26477c;
	font-size:1.7rem;
}
p.contact{
	display:grid;
	gap:0.5rem;
	align-items:center;
}
p.contact span{
	display: flex;
	align-items: center;
	gap: 0.5rem;	
}
p.contact span i {
	color: rgba(00, 147, 141, 1);
}
p.contact span a{
	font-weight:normal;	
}

#register,
#returning,
#button input,
.btn-primary,
#addAdt,
#paybtn,
div.colleagueBag a.addAnotherColleague{
	will-change:transform, background;
	transition:var(--transition);
	transform:var(--transform);
	box-shadow:var(--box-shadow);
	padding: 1rem 2rem !important;
	font-size: 1.2rem;
	font-weight: normal;
	text-transform: unset;
	border-radius: 16px;
}

#register:hover,
#returning:hover,
#button input:hover,
.btn-primary:hover,
#addAdt:hover,
#paybtn:hover,
div.colleagueBag a.addAnotherColleague:hover{
	transform:var(--transform-hover);
	box-shadow:var(--box-shadow-hover);
}

html,
body{
	font-family:var(--main-font);
	font-size: var(--base-size) !important;
	background: rgba(246, 246, 246, 1);
}
input,
select,
textarea,
label,
legend,
legend.left{
	font-size: var(--base-size) !important;
}

.modal-header strong.modal-title{
	display:none;	
}
#details{
	padding:4px 6px;
}
.de_cols_1 #details{
	transition: all 0.2s ease-in;
}
#details:after{
	top: -9px;
	right: -10px;
	box-shadow: 0px 0px 2px rgb(00,00,00,0.1);
}
small{
	font-size:80% !important;
}
a, a:active, a:visited{
	color: rgba(00, 147, 141, 1);
	font-weight:bold;
	outline:none !important;
}
a:hover,
a:focus{
	text-decoration:none;	
	outline:none !important;
}
a.btn,
a.btn:hover,
a.btn:focus{
	text-decoration:none !important;
}
a.sponsor{
	padding: 11px 20px !important;
	font-size: 16px;
}


.de_cols_1:nth-child(2) #details:after {
	/*background: #d3af37;*/
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#d3af37+0,d3af37+27,f2f23a+50,d3af37+74,d3af37+100 */
	background: rgb(211,175,55); /* Old browsers */
	background: -moz-linear-gradient(-75deg,  rgba(211,175,55,1) 0%, rgba(211,175,55,1) 27%, rgba(242,242,58,1) 50%, rgba(211,175,55,1) 74%, rgba(211,175,55,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(-75deg,  rgba(211,175,55,1) 0%,rgba(211,175,55,1) 27%,rgba(242,242,58,1) 50%,rgba(211,175,55,1) 74%,rgba(211,175,55,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(165deg,  rgba(211,175,55,1) 0%,rgba(211,175,55,1) 27%,rgba(242,242,58,1) 50%,rgba(211,175,55,1) 74%,rgba(211,175,55,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d3af37', endColorstr='#d3af37',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
	border: 1px solid #d3af37;
}
.de_cols_1:nth-child(3) #details:after {
	/*background: #c0c0c0;*/
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#c0c0c0+0,c0c0c0+27,ededed+50,c0c0c0+74,c0c0c0+100 */
	background: rgb(192,192,192); /* Old browsers */
	background: -moz-linear-gradient(-75deg,  rgba(192,192,192,1) 0%, rgba(192,192,192,1) 27%, rgba(237,237,237,1) 50%, rgba(192,192,192,1) 74%, rgba(192,192,192,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(-75deg,  rgba(192,192,192,1) 0%,rgba(192,192,192,1) 27%,rgba(237,237,237,1) 50%,rgba(192,192,192,1) 74%,rgba(192,192,192,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(165deg,  rgba(192,192,192,1) 0%,rgba(192,192,192,1) 27%,rgba(237,237,237,1) 50%,rgba(192,192,192,1) 74%,rgba(192,192,192,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c0c0c0', endColorstr='#c0c0c0',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
	border: 1px solid #c0c0c0;
}
.de_cols_1:nth-child(4) #details:after {
	/*background: #9f7833;*/
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#9f7833+0,9f7833+27,c4a740+50,9f7833+74,9f7833+100 */
	background: rgb(159,120,51); /* Old browsers */
	background: -moz-linear-gradient(-75deg,  rgba(159,120,51,1) 0%, rgba(159,120,51,1) 27%, rgba(196,167,64,1) 50%, rgba(159,120,51,1) 74%, rgba(159,120,51,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(-75deg,  rgba(159,120,51,1) 0%,rgba(159,120,51,1) 27%,rgba(196,167,64,1) 50%,rgba(159,120,51,1) 74%,rgba(159,120,51,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(165deg,  rgba(159,120,51,1) 0%,rgba(159,120,51,1) 27%,rgba(196,167,64,1) 50%,rgba(159,120,51,1) 74%,rgba(159,120,51,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9f7833', endColorstr='#9f7833',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
	border: 1px solid #9f7833;
}
.colleagueFieldHeading{
	float: left;
	width: 26%;
	display: inline-block;
	font-weight: normal;
	font-size: 16px;
}
div[data-group="gala_tickets"]{
	position:relative;
	padding-bottom: 0px;
}
div[data-group="gala_tickets"] .well {
	background: none;
	border: none;
	box-shadow: none;
	padding-top: 5px;
	padding-right: 0px;
	width: 70% !important;
	padding-left: 0px;
	padding-bottom: 0px;
	margin-bottom: 10px;
}
#field-82042 p{
	display:none;	
}
#field-82042 p.addTicket {
	display: block !important;
	font-size: 13px;
	font-style: italic;
	padding: 10px;
	margin: 8px 0px;
	background: rgba(11, 57, 84, 0.1);
	border: 1px solid rgba(11, 57, 84, 0.3);
	color: #333333;
	text-shadow: none;
	width: 74% !important;

	right: 0;
	float: right;
}
#field-82042 .text-editable{
	width:100% !important;	
}

div.colleagueBag a.addAnotherColleague{
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: var(--base-size) !important;
	text-transform: none;
	margin: 0px !important;
	text-decoration: none;
	padding: 0.75rem 1.25rem !important;
}

div.colleagueBag a.addAnotherColleague i{
	will-change:transform;
	transition:var(--transition);
	transform:scale(1) rotate(0deg);
	font-size:1.2rem;
}

div.colleagueBag a.addAnotherColleague:hover i{
	transform:scale(1.01) rotate(-10deg);	
}

div.colleagueBag ul li a.colleagueDelete {
	float: right;
	background: #e74c3c;
	color: #ffffff;
	border-radius: 4px;
	padding: 0px 7px;
	border: 1px solid #c0392b;
	margin: 9px 0px;
}
#paymentForm [type="radio"],
#paymentForm [type="checkbox"]{
	opacity:1;
	position: inherit;
}
#colleagueForm- #field-74526{
	display:none !important;
}

.member-error{
	display: block;
	width: 73%;
	float: right;
	display:none;
}
nav.navbar {
	min-height: auto !important;
}
div[data-group="WLegend"] p{
	display:none;	
}
div[data-group="WLegend"] p.fieldValue{
	display:block !important;
	clear:both;
}
div.field label.left{

}

input[type="text"],
input[type="email"],
select,
textarea {
	will-change:transform, box-shadow;
	font-size: var(--base-size) !important;
	height: unset;
	line-height: unset;
	transition: var(--transition);
	transform: var(--transform);
	box-shadow: var(--box-shadow);
	border-radius: 8px;
	padding: 0.5rem 1rem;
}
.field label{
	will-change:transform;
	transition: var(--transition);
	transform: var(--transform);	
}
.field:hover label{
	transform:var(--transform-hover);

	color:rgba(00, 147, 141, 1);
}

.field:hover .de_fieldset label{
	text-shadow:none;
	color:unset;
	transform:unset;
}

.field:hover input[type="text"],
.field:hover input[type="email"],
.field:hover input[type="password"],
.field:hover select,
.field:hover textarea{
	transform: var(--transform-hover);
	box-shadow: var(--box-shadow-hover);
}


form.colleagueForm #fieldContainer p{
	margin:0px !important;	
}

nav.navbar{
	border-bottom:none !important;	
}
.nav>li>a {
	background-color: transparent;
	padding: 22px 15px !important;
}

#content{
	display: block;
	padding: 1rem;
	border-radius: 25px !important;
	box-shadow: 0 14px 24px rgba(00, 00, 00, .1);
	overflow: hidden;
	background: #ffffff;
	margin: 1rem auto;	
}

div.colleagueFieldHeading{
	width: 29% !important;	
}
div.colleagueFieldHeading span{
	display: block;
	padding-bottom: 0;
	font-weight: normal;
	font-size: inherit;
	margin-top: 0;
	line-height: normal;
	font-size: var(--base-size);
}

.de_fieldset{
	display: flex;
	align-items: center;
	justify-content: flex-start;
	flex-wrap:wrap;
	width: auto;
	gap: 1rem;
	height: stretch;
}
div.field fieldset span.valueSpan.de_cols_1{
	margin: 0px;
	padding: 0;
	clear: unset !important;
	display: flex !important;
	height: stretch;
	float:none;
	width: 100%;
	max-width: 48%;
}
.de_fieldset .valueSpan label{
	margin: 0 !important;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem;
	position: relative;
	box-shadow: 0px 0px 5px rgba(00, 00, 00, .1);
	border-radius: 14px;
	text-align: center;
	padding: 1rem 2rem !important;
	width: 100% !important;
	float: none !important;
	height: stretch;
	transition: var(--transition);
	transform: var(--transform);
	border:1px solid transparent;
}

.de_fieldset .valueSpan label:hover,
.de_fieldset .valueSpan input:checked+label{
	transform: var(--transform-hover);
	box-shadow: var(--box-shadow-hover);
}
.de_fieldset .valueSpan input:checked+label{
	box-shadow:0 10px 26px rgba(29, 209, 161, 0.1);
	border-color: rgba(29, 209, 161, 1);
}

.de_fieldset .valueSpan label *{
	transition: var(--transition);
	transform: var(--transform);
}
.de_fieldset .valueSpan label:hover *{
	transform: var(--transform-hover);
}
.de_fee{
	will-change:transform, box-shadow;
	transition:var(--transition);
	transform:var(--transform);
	box-shadow:var(--box-shadow);
}
.de_fieldset .valueSpan label:hover .de_fee{
	transform:var(--transform-hover);
	box-shadow:var(--box-shadow-hover);	
}
div.field label > span.de_quantity,
div.field label span.de_fee.no-fee{
	display:none !important;
}


.de_fieldset .valueSpan label:before{
	font-family: var(--font-awesome);
	display:inline-block;
	font-weight: 400;
	content:"";
	border: none;
	font-size: 1.4rem;
	width: unset;
	height: unset;
	left:unset;
	right:-6px;
	top:-7px;
	background: unset;
	color:#26477c;
	background: #ffffff;
	transition: var(--transition);
	transform: var(--transform);
	box-shadow: 1px 2px 4px rgba(00, 00, 00, .1);
}


.de_fieldset .valueSpan label:hover:before,
.de_fieldset .valueSpan input:checked+label:before{
	transform: var(--transform-hover);
	box-shadow: 3px 8px 10px rgba(00, 00, 00, .2);
}

.de_fieldset .valueSpan input:checked+label:before{
	color:#01948e;
}
.de_fieldset .valueSpan input[type="checkbox"]+label:before{
	content:"\f0c8";
}
.de_fieldset .valueSpan input[type="radio"]+label:before{
	content:"\f111";
}
.de_fieldset .valueSpan input[type="checkbox"]:checked+label:before{
	content:"\f14a";
	font-weight:900;
}
.de_fieldset .valueSpan input[type="radio"]:checked+label:before{
	content:"\f058";
	font-weight:900;
}
div.field div.form-group fieldset div.de_fieldset span.de_cols_1 label span:nth-child(1){
	flex: 0 0 100%;
	left: unset;
	top: unset;
}
div.field label span.de_fee {
	float: none !important;
	width: 100%;
	text-align: center;
	font-size: 0.8rem;
	font-weight: 500;
	background: rgba(16, 172, 132,1.0);
	border-radius: 7px;
	width: auto;
	margin: 0 auto;
	padding: 0.5rem;
	color: #ffffff;
}
.de_fieldset .valueSpan label:after{
	display:none !important;
}

.modal-dialog{
	height: auto;
	max-width: 50%;
	width: 100%;
	top: 50%;
	transform: translateY(-50%) !important;
	border-radius: 25px !important;
	overflow: hidden;
	background: rgba(255, 255, 255, 1);
	box-shadow: 0px 18px 32px rgba(00, 00, 00, .1);
	border: 1px solid rgba(00, 00, 00, .1);	
}
.modal-dialog .modal-content{
	background:transparent;
	border:none;
}
.modal-header {
	padding: 1rem;
	border-bottom: 1px solid #e5e5e5;
	background: rgba(131, 149, 167, 1.0);
	color: #ffffff;
}
button.close{
	will-change:transform, box-shadow, text-shadow;
	opacity: 1;
	margin: 0 !important;
	display: flex;
	align-items: center;
	justify-content: center;
	transition:var(--transition);
	transform:var(--transform);
	box-shadow:var(--box-shadow);
	text-shadow:none;
}
button.close:hover{
	opacity:1;
}
button.close span {
	will-change:transform, box-shadow, text-shadow;
	transition:var(--transition);
	transform:var(--transform);
	box-shadow:var(--box-shadow);
	font-size: 1.8rem;
	text-shadow: none;
	background: rgba(192, 57, 43, 1.0);
	opacity: 1 !important;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	color: #ffffff;
	font-weight: 400;
	line-height: 1rem;
	padding: 0;
	height: 34px;
	width: 34px;
}
button.close:hover span{
	transform:var(--transform-hover);
	box-shadow:var(--box-shadow-hover);
	text-shadow:0 6px 14px rgba(00,00,00,.3);
}


.sidebar-pricing {
	display: flex;
	flex-direction: column;
	gap: 14px;
	width: 100%;
}

.sidebar-price-card {
	position: relative;
	overflow: hidden;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
	transition: all 0.25s ease;
}

.sidebar-price-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(15, 23, 42, 0.10);
	border-color: #d1d5db;
}


/* Header */

.sidebar-price-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 15px 16px 8px;
}

.sidebar-price-type {
	color: #2c3e50;
	font-size: 14px;
	font-weight: 700;
}

.sidebar-price-badge {
	padding: 4px 7px;
	border-radius: 20px;
	background: #eef3f6;
	color: #2c3e50;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
}


/* Price */

.sidebar-price {
	display: flex;
	align-items: baseline;
	gap: 4px;
	padding: 2px 16px 0;
}

.sidebar-price strong {
	color: #2c3e50;
	font-size: 32px;
	line-height: 1;
	font-weight: 750;
}

.sidebar-price span {
	color: #64748b;
	font-size: 11px;
	font-weight: 600;
}

.sidebar-price-note {
	padding: 6px 16px 14px;
	color: #64748b;
	font-size: 11px;
}


/* Regular price */

.sidebar-regular {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 2px 8px;
	margin: 0 10px 10px;
	padding: 10px 11px;
	background: #f8fafc;
	border-radius: 8px;
}

.sidebar-regular span {
	color: #64748b;
	font-size: 10px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .03em;
}

.sidebar-regular strong {
	color: #475569;
	font-size: 14px;
}

.sidebar-regular small {
	grid-column: 1 / -1;
	color: #78889e;
	font-size: 10px;
}


/* Gala */

.sidebar-gala {
	background: #2c3e50;
	border-color: #2c3e50;
}

.sidebar-gala:hover {
	border-color: #2c3e50;
}

.sidebar-gala .sidebar-price-header {
	padding-bottom: 6px;
}

.sidebar-gala .sidebar-price-type {
	color: #fff;
}

.sidebar-gala .sidebar-gala-title {
	padding: 4px 16px 12px;
	color: #fff;
	font-size: 16px;
	line-height: 1.3;
	font-weight: 700;
}

.sidebar-gala .sidebar-price {
	padding-bottom: 16px;
}

.sidebar-gala .sidebar-price strong {
	color: #fff;
}

.sidebar-gala .sidebar-price span {
	color: rgba(255,255,255,.7);
}

.sidebar-price-card.small{
	font-size:0.85rem !important;	
	background: rgba(59, 130, 246, 0.05);
	border-color: rgba(59, 130, 246, .15);
}

/* Smaller sidebar widths */
@media (max-width: 350px) {

	.sidebar-price-header {
		padding-left: 13px;
		padding-right: 13px;
	}

	.sidebar-price {
		padding-left: 13px;
		padding-right: 13px;
	}

	.sidebar-price-note {
		padding-left: 13px;
		padding-right: 13px;
	}

	.sidebar-price strong {
		font-size: 28px;
	}

	.sidebar-gala .sidebar-gala-title {
		padding-left: 13px;
		padding-right: 13px;
	}
}