@import url("https://use.typekit.net/zck5jmh.css");
:root {
	--primary: #3c0f6c;
	--primary-text: #FFF; 
	--primary-hover: #DF20FD;
	--primary-text-hover: #FFF; 
	--secondary: #3c0f6c;
	--secondary-text: #ffffff; 
	--secondary-hover: #25004c;
	--secondary-text-hover: #ffffff; 
	--success: #d6e2ab;
	--success-hover: #d6e2ab;
	--white: #ffffff;
	--black: #000000;
	--purple: #25004c; 
	--dark-purple: #25004c;
	--pink: #DF20FD; 
	--green: #76feb9;
	/*--bg-danger: var(--red); 
	--text-danger: var(--bg-danger);
	--bg-warning: #fdb913; 
	--text-warning: var(--bg-warning); */
	--bg-success: #93fda6;  
	--success: var(--primary); 
	--success-hover: var(--primary-hover); 
	--text-success: var(--bg-success); 
	--bg-colour: #ffffff; 
	/*--breadcrumb-inactive: #d9d9d9; */
	--font-body-color: #000; 
	--font-body: "aktiv-grotesk", sans-serif; 
	--font-body-weight: 300;
	--font-heading: "aktiv-grotesk", serif; 
	--font-heading-weight: 700;
	--border-radius-size: 5px;
	--apple-pay-button-border-radius: var(--border-radius-size);
	--padding-with-border-radius: .75rem 1.25rem; 
	--bs-secondary-color: var(--secondary); 
}

strong{
	font-weight: 700;
}

.paymentBtnCover {
	background: var(--bg-colour) !important;
}

body{
	overflow-x:hidden;
	font-style: normal;
	overflow-x:hidden;
	font-size:1rem;
	font-family: var(--font-body);
	font-weight: var(--font-body-weight);
	background: var(--bg-colour);
	color: var(--font-body-color);
}

/* without this code the user menu won't appear on the left hand side of the page */
@media (min-width: 768px) {
	#navbarMyAccount:not(.show) {
		display: block;
	}
}

img{
	max-width:100%;
}

a{
	color: var(--primary);
}

a:hover{
	color: var(--secondary);
}

.container{
	max-width: 1200px;
}

.overlay{
	position: absolute;
	top:0px;
	left:0px;
	height:100%;
	width:100%;
}


/* Stop bootstrap adding padding right to the body */
body.modal-open{
  padding-right: 0px !important;
}

html{
	height: 100%;
	display: flex;
	flex-direction: column;
}
body{
	flex-grow: 1; 
	display: flex;
	flex-direction: column;
}

#navbarMyAccount .list-group-item{
	padding: 5px 0px;
	border: 0px;
	background: none;
}

#navbarMyAccount .list-group-item.list-group-item-parent{
	margin-top:15px;
}

@media (min-width: 576px) {
	.collapse-sm-none:not(.show) {
		display: block;
	}
	
	.w-sm-auto{
		width: auto !important;
	}
}

@media (min-width: 768px) {
	.collapse-md-none:not(.show) {
		display: block;
	}
	.w-md-auto{
		width: auto !important;
	}
}

@media (min-width: 992px) {
	.collapse-lg-none:not(.show) {
		display: block;
	}
	.w-lg-auto{
		width: auto !important;
	}
}

@media (min-width: 1200px) { 
	.collapse-xl-none:not(.show) {
		display: block;
	}
	.w-xl-auto{
		width: auto !important;
	}
	
}
/*  ----------------------------------------------------------	*/
/*  					Dark Theme Resets						*/
/*  ----------------------------------------------------------	*/
/* 
uncomment the below classes if you want to have a dark themed website, the below will reset most bootstrap classes to have a black background and white text depending on styling when otherwise they'd be white. If you want modals to have a dark theme too, add .modal to the list below. If not, you'll also need the .modal class that resets the text colour back to black rather than what you've set in body 

.basketIcon resets the svgs used on checkout from black to white
*/
/*
.card,
.list-group-item,
.list-group-item:hover,
.list-group-item-light.list-group-item-action:focus,
.list-group-item-light.list-group-item-action:hover, #ui-datepicker-div.ll-skin-melon{
	background: var(--black);
	color:var(--white);
	border-color: transparent;
}

.basketIcon{
	filter: invert(100%) sepia(100%) saturate(1%) hue-rotate(55deg) brightness(109%) contrast(101%);
}
.basketIcon svg{
	
}

.ll-skin-melon .ui-datepicker-prev:before, .ll-skin-melon .ui-datepicker-next:before{
	filter: invert(100%) sepia(100%) saturate(1%) hue-rotate(55deg) brightness(109%) contrast(101%);
}

*/
/* If you want to keep modals white with black text, uncomment the below as that resets the text colour back to black rather than what you've set in body */
/*
.modal {
	color: #000;
}
*/
/*  ----------------------------------------------------------	*/
/*  					Rounded Corner Resets					*/
/*  ----------------------------------------------------------	*/
/* Adjusting border radius on all boostrap items */

.card, .list-group-item.mb-1, .list-group-item.mb-2, .list-group-item.mb-3, .list-group-item.mb-4, .list-group-item.mb-5, .list-group-item.mt-1, .list-group-item.mt-2, .list-group-item.mt-3, .list-group-item.mt-4, .list-group-item.mt-5, .list-group-item.my-1, .list-group-item.my-2, .list-group-item.my-3, .list-group-item.my-4, .list-group-item.my-5{
	border-radius: var(--border-radius-size);
}

.card{
	overflow:hidden;
}

.list-group-item:first-child, .list-group-item:first-of-type{
	border-top-left-radius: var(--border-radius-size) !important;
	border-top-right-radius: var(--border-radius-size) !important;
}

.list-group-item:last-child{
	border-bottom-left-radius: var(--border-radius-size) !important;
	border-bottom-right-radius: var(--border-radius-size) !important;
}

.card .card-body, .card .card-footer, .list-group-item{
	padding: var(--padding-with-border-radius);
}

.card-body + .card-footer {
	padding-top:0px;
}

/*  ----------------------------------------------------------	*/
/*  						Backgrounds 	 					*/
/*  ----------------------------------------------------------	*/
.bg-primary{
	background: var(--primary) !important;
	border-color: var(--primary) !important;
	color: var(--primary-text);
}

.bg-secondary{
	background: var(--secondary) !important;
	border-color: var(--secondary) !important;
	color: var(--secondary-text);
}

.text-primary{
	color: var(--primary) !important;
}

.text-secondary{
	color: var(--secondary) !important;
}

/*  ----------------------------------------------------------	*/
/*  				Payment Sense Overrides 	 				*/
/*  ----------------------------------------------------------	*/
/* For Payment Sense they override the button styling and there's no way to add our btn btn-primary class to it. Set styling here (the same as your .btn and .btn-primary class) - you will need to !important nearly all styling in .conntect-btn class */
.connect-btn{
	background-color: var(--primary) !important;
	border: var(--primary) !important;
	border-radius: var(--border-radius-size) !important;
	color: var(--primary-text) !important;
	height: ;
	margin: 0px !important;
	width: 100% !important;
	font-family: var(--font-heading);
	font-weight: var(--font-heading-weight);
}

/* adds padding around the pay button to the payment sense button element */
.connect-container .footer{
	text-align:center;
	padding: 15px;
}

/* Make the form fields / google pay button width of container */
.connect-container iframe{
	width: 100%;
}


#blinkforms #gpay-button-online-api-id{
	border-radius: var(--border-radius-size);
}

/*  ----------------------------------------------------------	*/
/*  					Buttons / Headings 	 					*/
/*  ----------------------------------------------------------	*/
.btn, .time-slot{
	font-family: var(--font-heading);
	font-weight: var(--font-heading-weight);
	border-radius: var(--border-radius-size);
	border-width: 2px;
}

.btn-primary{
	background: var(--primary);
	border-color: var(--primary);
	color: var(--primary-text);
}

.btn-primary.disabled, .btn-primary:disabled {
	color: var(--primary-text);
	background: var(--primary);
	border-color: var(--primary);
	opacity: 0.3;
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show > .btn-primary.dropdown-toggle{
	background: var(--primary-hover);
	border-color: var(--primary-hover);
	color: var(--primary-text-hover);
}

.btn-secondary, .input-group .btn-primary{
	background: var(--secondary);
	border-color: var(--secondary);
	color: var(--secondary-text);
}

.btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active, .btn-secondary:not(:disabled):not(.disabled).active, .btn-secondary:not(:disabled):not(.disabled):active, .show > .btn-secondary.dropdown-toggle, .input-group .btn-primary:hover, .input-group .btn-primary:active, .input-group .btn-primary:not(:disabled):not(.disabled).active{
	background: var(--secondary-hover);
	border-color: var(--secondary-hover);
	color: var(--secondary-text-hover);
}

.btn-outline-primary{
	color: var(--primary);
	border-color: var(--primary);
}

.btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active{
	color: var(--white);
	border-color: var(--primary);
	background: var(--primary);

}
.btn-outline-secondary{
	color: var(--secondary);
	border-color: var(--secondary);
}

.btn-outline-secondary:hover, .btn-outline-secondary:focus, .btn-outline-secondary:active{
	color: var(--white);
	border-color: var(--secondary);
	background: var(--secondary);
}

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

.btn-success:hover{
	background: var(--success-hover);
	border-color: var(--success-hover);
	color: var(--white);
}

.form-control{
	height: calc(1.5em + .75rem + 4px);
	border-radius: var(--border-radius-size);
}

input[type=checkbox]
{
  /* Double-sized Checkboxes */
  -ms-transform: scale(1.2); /* IE */
  -moz-transform: scale(1.2); /* FF */
  -webkit-transform: scale(1.2); /* Safari and Chrome */
  -o-transform: scale(1.2); /* Opera */
  transform: scale(1.2);
  padding: 10px;
}
/* needed for bootstrap 5*/
/*
select.form-control{
	background-image: url('/common/assets/images/icons/down-arrow.svg');
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 0.8em;
	cursor: pointer;
	padding-right: 35px
}
*/
.input-group-quantity .form-control{
	max-width: 50px;
	-webkit-appearance: none;
	 -moz-appearance: textfield;
}

.input-group-quantity .btn{
	
}

.input-group-quantity .btn:hover{
	color: ;
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6{
	font-family: var(--font-heading);
	font-weight: var(--font-heading-weight);
}

h1, .h1{ font-size: 2.0rem; }
h2, .h2{ font-size: 1.6rem; }
h3, .h3{ font-size: 1.5rem;}
h4, .h4{ font-size: 1.4rem;}
h5, .h5{ font-size: 1.2rem;}
h6, .h6{ font-size: 1rem;}

@media (min-width: 576px) {
	
}

@media (min-width: 768px) {
	h1, .h1{ font-size: 2.833rem;}
	h2, .h2{ font-size: 1.8rem;}
	h3, .h3{ font-size: 1.6rem;}
	h4, .h4{ font-size: 1.4rem;}
	h5, .h5{ font-size: 1.167rem;}
	h6, .h6{ font-size: 1.167rem;}
}

@media (min-width: 992px) {
	
}

@media (min-width: 1200px) {
	
}

.breadcrumbWrap{
	display: none;
}

/*  ----------------------------------------------------------	*/
/*  				        	Header         					*/
/*  ----------------------------------------------------------	*/
#topBar{
	display:none;
}

#header{
	background:var(--dark-purple);
	color: var(--white);
}

#header a{
	color: var(--white);
}

#header .fa-regular{
	font-size:1.2rem;
}

#headerLogo{
	height: 43px;
}

#header .nav-link.nav-user{
	background: var(--pink);
	border: 2px solid var(--pink);
	border-radius: 70px; 
	font-family: var(--font-heading);
	font-weight: var(--font-heading-weight);
	display:flex;
	align-items:center;
	justify-content:center;
	padding:0px;
	height:45px;
	width:45px;
	font-size:1rem; 
	color: var(--primary-text);
}

#header .basketCircle{
	background: var(--pink);
	border: 2px solid var(--pink);
	border-radius: 70px; 
	font-family: var(--font-heading);
	font-weight: var(--font-heading-weight);
	display:flex;
	align-items:center;
	justify-content:center;
	padding:0px;
	height:15px;
	width:15px;
	font-size:0.7rem; 
	top:0px;
	right:0px;
	color: var(--primary-text);
}

@media (min-width: 992px) {
	#headerLogo{
		height: 46px;
	}
}


/*
#header .navbar-toggler{
	color: #fff;
}

.burgerIcon:active{
	transform: scale(0.92);
}

.signIn{
	list-style: none;
}

.mobile-navbar{
	height: 150px;
	padding-top: 10px;
	padding-bottom: 10px;
	overflow:hidden;
	opacity: 1;
	transition:all 0.3s ease;
}

.hide{
	opacity: 0;
	height:0px;
	padding:0;
}
*/
/*  ----------------------------------------------------------	*/
/*  				    	Footer				 		     	*/
/*  ----------------------------------------------------------	*/
#footer{
	font-size:10px;
	background: #fff;
	color: #000;
	font-size:10pt;
	position: relative;
	margin-top:auto;
}

.footer a{
	color: #000
}

#footer #footerContinuumLogo{
	width:201px;
}
/*  ----------------------------------------------------------	*/
/*  				Cards / Extras  	 					*/
/*  ----------------------------------------------------------	*/
/*.card.prodItem{
	background: var(--brown);
	border-color: transparent;
	color: var(--light);
}

.card.prodItem h1, .card.prodItem h2, .card.prodItem h3, .card.prodItem h4, .card.prodItem h5, .card.prodItem h6 {
	color: var(--white);
}

.card.prodItem .btn-primary{
	background: var(--yellow);
	border-color: var(--yellow); 
	color: var(--brown);
}
*/
.card.prodItem:hover .btn-primary{
	background: var(--primary-hover);
	border-color: var(--primary-hover); 
	color: var(--primary-text-hover);
}

.card-footer{
	background: transparent;
	border-top:0px;
}

.navbar-collapse {
	flex-grow: unset !important;
}

/*  ----------------------------------------------------------	*/
/*  					Breadcrumbs  	 							*/
/*  ----------------------------------------------------------	*/
#breadcrumbContainer .breadcrumb{
	padding-bottom: 0px !important;
} 
#breadcrumbContainer .breadcrumb-item.complete::after, #breadcrumbContainer .breadcrumb-item.active::after, .breadcrumb-item.complete::before, 
.breadcrumb-item.complete + .breadcrumb-item.complete::before{
	background: var(--pink) !important;
}

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

.time-slot{
    background: transparent !important;
    border: var(--primary) 2px solid  !important;
    color: var(--primary); 
    overflow:visible !important;
}

.time-slot:not(.time-slot-unavailable):hover{
    color: var(--secondary);
}

.time-slot.active, .time-slot:active, .time-slot:focus{
    background: var(--primary) !important;
    border-color: var(--primary)  !important;
    color: var(--primary-text) !important;
}

.time-slot.time-slot-unavailable:hover{
	 color: var(--primary-text);
}

.time-slot.active:hover{
	color: black;
}

.time-slot.timeslot-high::before, .time-slot.timeslot-good::before, .time-slot.timeslot-limited::before, .time-slot.timeslot-low::before {
    content: "";
    position: absolute;
    top: 0px;
    transform: translate3d(0,-50%,0);
    min-width: 60%;
    width:auto;
    height: auto;
    border-radius: var(--border-radius-size);
	border-radius: 10px;
    padding: 1px 10px;
    padding-bottom:3px;
    font-size: 0.7rem;
    text-align:center;
    color: var(--white);
}

.time-slot.timeslot-high::before {
    content: "Availability";
	background: var(-bg-success, #006a52);
	display:none;
}

.time-slot.timeslot-good::before {
    display:none;
}

.time-slot.timeslot-limited::before {
    content: "Last few";
	background: var(--bg-warning, #006a52);
}

.time-slot.timeslot-low::before {
    content: "Selling fast";
	background: var(--bg-danger, #006a52);
}

.time-slot .timeText{
	line-height: 24px; 
}

.time-slot .badge{
    position: absolute;
    top: 0px;
    transform: translate3d(0,-50%,0);
    min-width: 60%;
    width:auto;
    height: auto;
    border-radius: var(--border-radius-size);
    padding: 1px 10px;
    padding-bottom:3px;
    font-size: 0.7rem;
    text-align:center;
    line-height: normal;
}

.star-tour-corner {
	position:absolute;
	background-color:none !important;
	background:url('/assets/common/images/upgrade-corner.png');
	top:0px;
	left:0px;
	width:15px;
	height:15px;
	border-radius: 0px !important;
}

/*  ----------------------------------------------------------	*/
/*  					Category Grouped Products  	 			*/
/*  ----------------------------------------------------------	*/
#categoryContentWrapper .list-group-item{
	padding-left:0px;
	padding-right:0px;
}

@media (max-width: 992px) {
	#categoryContentWrapper{
		padding: 1rem;
		border: 2px solid black;
		border-radius: var(--border-radius-size);
		margin-top:1rem;  
	}

	#categoryContentWrapper .list-group-item{
		border: 0px;
	}
} 

#divBookingExtras .card, #upsellsContainer .card{
	border: 2px solid black;
	box-shadow: none;
	background: var(--gold);
}

#divBookingExtras .card-image.col-5{
	border-radius:0px;
}

/*  ----------------------------------------------------------	*/
/*  					TMP HIDING ELEMENTS  	 				*/
/*  ----------------------------------------------------------	*/
/* HIding to match design, in future Continuum to delete category descriptions */
#categoryDescription, .extraCategoryDescription{
	display:none
}

.successInfoCircle {
  background: var(--pink) !important;
  color: var(--secondary-text);
}