@import url("https://use.typekit.net/dfz4hxa.css");

@font-face{
    font-family: "ChunkFive Regular";
    src: url("https://db.onlinewebfonts.com/t/24be71ed157ac61b982a98bba9e7bf62.eot");
    src: url("https://db.onlinewebfonts.com/t/24be71ed157ac61b982a98bba9e7bf62.eot?#iefix")format("embedded-opentype"),
        url("https://db.onlinewebfonts.com/t/24be71ed157ac61b982a98bba9e7bf62.woff")format("woff"),
        url("https://db.onlinewebfonts.com/t/24be71ed157ac61b982a98bba9e7bf62.woff2")format("woff2"),
        url("https://db.onlinewebfonts.com/t/24be71ed157ac61b982a98bba9e7bf62.ttf")format("truetype"),
        url("https://db.onlinewebfonts.com/t/24be71ed157ac61b982a98bba9e7bf62.svg#ChunkFive Regular")format("svg");
    font-weight:normal;
    font-style:normal;
    font-display:swap;
}
 

:root {
	--primary: #f1860b;
	--primary-hover: #f7b309;
	--secondary: #432a19;
	--secondary-hover: #321b10;
	--success: #198754;
	--success-hover: #198754;
	--brown: #432a19;
	--light-brown: #c99e67;
	--light-brown-shadow: #321b10; 
	--orange: #e9501a; 
	--yellow: #ffeb00; 
	--gradient: linear-gradient(#e9501a, #ffeb00);
	--text-stroke-width: 1.5px;
	--text-stroke-color: var(--secondary); 
	--white: #ffffff;
	--black: #000000;
	--font-body: "Arial", sans-serif; 
	--font-body-weight: 400;
	--font-heading: "ChunkFive Regular";
	--font-heading-weight: 400;
	--border-radius-size: 0px;
	--padding-with-border-radius: .75rem 1.25rem; 
}

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

/* 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 {
	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{
	
}
*/

/* 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;
}
*/
/*  ----------------------------------------------------------	*/
/*  					Buttons / Headings 	 					*/
/*  ----------------------------------------------------------	*/
.btn, .time-slot{
	font-family: var(--font-heading);
	font-weight: var(--font-heading-weight);
	font-size: 1.2rem;
	box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
}

/* 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, .connect-checkout-btn{
	background-color: var(--primary); !important;
	color: var(--brown) !important;
	width: ;
	height: ; 
}

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

.btn-primary.disabled, .btn-primary:disabled {
	color: var(--brown); 
	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(--brown);
}

.btn-secondary{
	background: var(--secondary);
	border-color: var(--secondary);
	color: var(--light-brown);
	text-shadow: 1px 1px var(--light-brown-shadow);

}

.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{
	background: var(--secondary-hover);
	border-color: var(--secondary-hover);
	color: var(--light-brown);
}

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

.btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active{
	color: var(--light-brown);
	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(--light-brown);
	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 + 7px);

}
/* 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: 80px;
	-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);
	text-transform: uppercase;
	background: -webkit-linear-gradient(var(--orange), var(--yellow));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	-webkit-text-stroke: var(--text-stroke-width) var(--brown);
  	text-stroke: var(--text-stroke-width) var(--brown);
}

h1, .h1{ 
	font-size: 2.2rem; 
	background: -webkit-linear-gradient(var(--orange), var(--yellow));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	-webkit-text-stroke: var(--text-stroke-width) var(--brown);
  	text-stroke: var(--text-stroke-width) var(--brown);
}
h2, .h2{ font-size: 2.0rem; }
h3, .h3{ font-size: 1.6rem;}
h4, .h4{ font-size: 1.4rem;}
h5, .h5{ font-size: 1.2rem;}
h6, .h6{ font-size: 1.1rem;}

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

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

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

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

.breadcrumbWrap{
	display: none;
}

/*  ----------------------------------------------------------	*/
/*  						Header 	 							*/
/*  ----------------------------------------------------------	*/

#header {
	background-color: var(--black);
	color: var(--white);
	background-image: url(/assets/images/header-background.png);
	background-position: center;
}

#header .navbar-brand img{
	height: 80px;
}

#topBar {
	background: var(--brown);
	color: var(--light-brown);
	text-shadow: 1px 1px var(--light-brown-shadow);
	font-family: var(--font-heading);
	font-weight: var(--font-heading-weight);
	font-size: 1rem;
}
#topBar a:not(.btn) {
	color: var(--light-brown);
}
#topBar a:not(.btn):hover {
	color: var(--white);
}

@media (min-width: 768px) {
	#header .navbar-brand img{
		height: 120px;
	}
}
/*


#topBar .nav-link {
	color: white;
	font-weight: 600;
	font-size: 13px;
}

#topBar .link-icon {
	font-size: 16px;
}

.nav-link.nav-icon {
	background-color: var(--primary-brown);
	  border-radius: 4px;
	  color: white;
	  border: none;
	font-size: 14px;
	padding: 8px 14px;
}

.navbar-brand {
 margin-right: 0px;
}

@media (max-width:944px){
	#header{
		background-image: url(/assets/images/header-background.png);
		background-size: cover;
	}
	.navbar-brand img{
		height: 80px;
	}
}
*/

/*  ----------------------------------------------------------	*/
/*  						Footer 	 							*/
/*  ----------------------------------------------------------	*/
#footer {
	background: var(--brown);
	color:  var(--light-brown);
	font-size: 0.9rem;
}

#footer a{
	color:  var(--light-brown);
}
/*  ----------------------------------------------------------	*/
/*  						Cards  	 							*/
/*  ----------------------------------------------------------	*/
.card{

}
.card-footer{
	background: transparent;
	border-top: 0px;
}
/*  ----------------------------------------------------------	*/
/*  					Calendar  	 							*/
/*  ----------------------------------------------------------	*/
.ll-skin-melon .ui-datepicker .ui-datepicker-title {
	color: var(--bs-secondary);
	font-family: var(--font-heading);
	font-weight: var(--font-heading-weight);
	font-size: 1.8rem;
}

.ll-skin-melon .ui-datepicker .ui-datepicker-next span.ui-icon,
.ll-skin-melon .ui-datepicker .ui-datepicker-prev span.ui-icon {
	color: var(--secondary);
}

.ll-skin-melon .ui-datepicker-prev span:before,
.ll-skin-melon .ui-datepicker-next span:before {
	color: var(--secondary);
}

.ll-skin-melon .ui-datepicker-prev,
.ll-skin-melon .ui-datepicker-next {
	display: flex;
	justify-content: center;
	align-items: center;
	background: white;
}

.ll-skin-melon .ui-datepicker th {
	color: var(--secondary);
	font-family: var(--font-heading);
	font-weight: var(--font-heading-weight);
	font-style: normal;
	font-size: 0.8rem;
}

@media (min-width: 568px) {
	.ll-skin-melon .ui-datepicker th {
		font-size: 1rem;
	}
}


.ll-skin-melon .ui-datepicker td {
	background: var(--white);
	border-color: ;
	border-width: 2px;
	font-family: var(--font-heading);
	font-weight: var(--font-heading-weight) !important;
	font-style: normal;
}

.ll-skin-melon .ui-datepicker .ui-datepicker-unselectable.ui-state-disabled {}

.ll-skin-melon .ui-state-disabled .ui-state-default {
	background: #f8f9fa;
	border-color: #f8f9fa;
	color: rgba(0, 0, 0, 0.2);
}

.ll-skin-melon td .ui-state-active {
	background: var(--primary);
	border-color: var(--primary);
	color: #fff;
}

.ll-skin-melon td .ui-state-hover {
	background: var(--secondary);
	color: #fff;
}

.time-slot {
	background: var(--bs-primary);
	border-color: var(--bs-primary);
	color: var(--white);
	font-size: 15px;
	padding: 4px;
	font-weight: 500;
	position: relative;
}

.time-slot small {
	font-size: 1em;
	font-weight: 600;
}

.time-slot:not(.unavailable):hover {
	opacity: 0.5;
}

.ll-skin-melon td .ui-state-default {
	line-height: 1.5;
	display: flex;
	flex-direction: column;
	min-height: 70px;
	align-items: center;
	justify-content: center;
}

.ll-skin-melon td .ui-state-default .datePrice {
	font-size: 0.8rem;
	line-height: 15px;
	font-family: var(--font-body);
	font-weight: var(--font-body-weight);
}

.ll-skin-melon td .ui-state-hover .datePrice {
	color: ;
}

.availability-good {
	/*
	background-color:#00FD4A !important;
	border-color:#00FD4A !important;
	*/
}

.availability-good .datePrice {
	color: ;
	/* color:#00FD4A !important; */
}

.availability-limited {
	/*
	background-color:#FF9900 !important;
	border-color:#FF9900 !important;
	*/
}

.availability-good .datePrice {
	color: ;
}

/* .availability-limited-text {
	color:#FF9900 !important;
}

.availability-soldout {
	background-color:#FF0000 !important;
	border-color:#FF0000 !important;
	color:#fff !important;
}

.availability-soldout-text {
	color:#FF0000 !important;
} */