@import url('https://fonts.googleapis.com/css2?family=Anton&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');

:root {
	--primary: #6da9c8;
	--primary-hover: #578da9;
	--primary-text: #ffffff; 
	--primary-text-hover: #ffffff; 
	--secondary: #001d2d;
	--secondary-hover: #001d2d;
	--secondary-text: #FFFFFF; 
	--secondary-text-hover: #ffffff; 
	--success: #198754;
	--success-hover: #198754;
	--success-text: #FFFFFF; 
	--success-text-hover: #ffffff; 
	--white: #ffffff;
	--black: #000000;
    --navy: #001d2d;
    --blue: #578da9; 
    --light-grey: #eef1f8;
	--bg-colour: #FFF; 
	--font-body-color: #000000; 
	--font-body: "Raleway", sans-serif; 
	--font-body-weight: 400;
	--font-heading: "Anton", sans-serif;
	--font-heading-weight: 400;
	--border-radius-size: 10px;
	--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);
	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: 1830px;
}

.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;
	}
	
}

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

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

.paymentBtnCover {
	background: var(--bg-colour);
}
/*  ----------------------------------------------------------	*/
/*  					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(--white);
}

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


/*  ----------------------------------------------------------	*/
/*  				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: #FFF !important;
	height: ;
	margin: 0px !important;
	width: 100% !important;
	font-family: var(--font-heading);
	font-weight: var(--font-heading-weight);
	font-size: 1.5rem;
    text-transform: capitalize;
}

/* 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%;
}

/*  ----------------------------------------------------------	*/
/*  					Buttons / Headings 	 					*/
/*  ----------------------------------------------------------	*/
.btn, .time-slot{
	font-family: var(--font-heading);
	font-weight: var(--font-heading-weight);
	border-radius: var(--border-radius-size);
	font-size: ;
	padding:;
    text-transform: capitalize;
}

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

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

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

.form-control{
	height: calc(1.5em + .75rem + 15px);
}
/* 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;
	
}
h1, .h1{ font-size: 2.0rem; color: var(--primary); }
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.2rem; }
	h2, .h2{ font-size: 1.8rem; }
	h3, .h3{ font-size: 1.6rem;}
	h4, .h4{ font-size: 1.4rem;}
	h5, .h5{ font-size: 1.2rem;}
	h6, .h6{ font-size: 1rem;}
}

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

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

.breadcrumbWrap{
	display: none;
}

/*  ----------------------------------------------------------	*/
/*  						Header 	 							*/
/*  ----------------------------------------------------------	*/
#header {
	background: var(--navy);
    color: var(--white);
}

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

#header .dropdown-menu{
    background: var(--navy);
    color: var(--white);
}

.dropdown-item:focus, .dropdown-item:hover {
    color: var(--primary-text);
    text-decoration: none;
    background-color: var(--primary);
}

#header .basket-count{
	position:absolute;
	top:-4px;
	right:-8px;
	background: var(--primary);
	color: var(--primary-text);
	border: 1px solid var(--white);
	border-radius:30px;
	display:flex;
	align-items:center;
	justify-content:center;
	height: 16px;
	width:16px;
	font-size: 0.5rem;

}
/*  ----------------------------------------------------------	*/
/*  						Footer 	 							*/
/*  ----------------------------------------------------------	*/
#footer {
    background: var(--light-grey);
}

#footer a{
	color: var(--black);
}