body {
	font-family: 'Arial', sans-serif;
	line-height: 1.6;
	margin: 0;
	background-color: #f8f8f8;
	color: #333;
	/* Default text color for light mode */
	margin: 0;
	padding: 0;
	width: 100%;
	overflow-x: hidden; /* Prevent horizontal overflow */
}


h2 {
	text-align: center;
	border-bottom: 2px solid #666;
	padding-top: 20px;
	padding-bottom: 0;
	font-family: 'Snell Roundhand', 'Arial';
	font-size: 32px;
	margin-bottom: 0;
	margin-top: 0;
	background-color: #f8f8f8;
	position: sticky;
	top: 0;
	z-index: 100;
}

td{
	text-align: left;
}

.highlighted-row {
    background-color: #e7e7e7; /* Light yellow background for highlight */
}


.hidden{
	display:none;
}

.h2print {
	position: relative;
}

h2.subHeader {
	display: none;
}

.sub-category-header {
	font-size: 16px;
	margin-bottom: 5px;
	margin-top: 0;
	font-weight: bold;
	color: #555;
	text-transform: capitalize;
	border-bottom: solid 1px #CCCCCC;
	position: sticky;
	background-color: #f8f8f8;
	top: 73px;
	z-index: 100;
	padding-left: 20px;
}

.onlyprint{
	display: none;
}

.notprint{
	display: block;
}

ul {
	list-style-type: none;
	padding: 0;
	padding-top: 0px;
	padding-left: 20px;
	padding-right: 20px;
}

li {
	display: flex;
	flex-direction: column;
	align-items: left;
	margin-bottom: 15px;
	background-color: #fff;
	padding: 10px;
	border-radius: 5px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	transition: background-color 0.3s;
	padding-right: 20px;
}

strong {
	font-weight: bold;
	font-size: 1.1em;
	text-transform: capitalize;
}

span {
	font-style: italic;
	color: #666;
	margin-top: 5px;
}

.burgermenu {
	position: fixed;
	top: 0px;
	left: 0px;
	z-index: 200;
	font-weight: bold;
	margin: 0px;
	font-size: 27px;
	padding-bottom: 1px;
	color: #555;
	padding-left: 5px;
	padding-right: 5px;
	border-radius: 5px;
	border-bottom-left-radius: 10px;
}

.noalcicon {
	position: absolute;
	bottom: 2px;
	right: 1px;
	background-image: linear-gradient(#38ba6c, #117208);
	width: 10px;
	height: 10px;
	border-radius: 20px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
	display: none;
}

.search-bar {}

#searchIcon {
	right: 1px;
	position: fixed;
	top: 0px;
	z-index: 301;
	font-size: 22px;
	padding: 0;
	display: block;
	height: 36px;
	width: 30px;
	padding-top: 7px;
	border-radius: 0;
	border-radius: 8px;
	padding-left: 9px;
	padding-right: 6px;
}


.searchSelected{
	background-color:#ccc;
}

#searchInput {

	font-size: 14px;
	background-color: white;
	border: solid 1px #EFEFEF;
	box-sizing: border-box;
	position: absolute;
	top: 0;
	left: 0;
	display: none;
	background-color: white;
	border-radius: 8px;
	vertical-align: middle;
	padding-bottom: 6px;
	padding-top: 5px;
	padding-left:10px;
	height: 44px;
	right: 42px;
	z-index: 302;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

#searchInput:focus {
	outline-width: 0;
	outline: none;
}

.hasLabel {
	margin-bottom: 30px;
}

.drinkSuggestion {
	border: 1px solid #2580b2;
}

.mostOrdered {
	border: 1px solid #229018;
}

.labelSuggestion,
.labelMostOrdered {
	position: absolute;
	bottom: -26px;
	text-align: center;
	color: white;
	font-size: 13px;
	left: 15px;
	right: 15px;
	border-bottom: 1px solid #ccc;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	margin-bottom: 4px;
	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
	letter-spacing: 0.01em;
}

.labelSuggestion {
	background-image: linear-gradient(#18aeff, #2580b2);
	box-shadow: inset 0 2px 6px #026499;
}

.labelMostOrdered {
	background-image: linear-gradient(#38ba6c, #229018);
	box-shadow: inset 0 2px 6px #117208;
}


#drinkSuggestion {
	display: block;
	margin-bottom: 20px;
	text-align: left;
	font-size: 16px;
	margin-top: 30px;
}

#drinkSuggestionButtons {
	text-align: right;
	margin-bottom: 5px;
}

#drinkSuggestionButtons button {
	margin: 5px;
	border-radius: 15px;
	font-size: 16px;
}

.drinkSuggestionButtonsHelpText {
	text-align: center;
	font-size: 11px;
	color: #ccc;
	margin: 0;
	border-bottom: 1px solid #efefef;
	margin-right: 12px;
}

.drinkSuggestionButtonsHelpText p {
	margin: 0;
}

.drinkSuggestionContainer {
	padding-left: 20px;
	background-color: white;
	padding-top: 5px;
	padding-bottom: 5px;
	border-bottom: 1px solid #ccc;
	border-bottom-left-radius: 15px;
	border-bottom-right-radius: 15px;
	margin-bottom: 4px;
	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
}

#recommendationMessage {
	top: 3px;
	left: 59px;
	z-index: 200;
	float: left;
	position: fixed;
	padding: 10px;
}

#recommendationDot {
	width: 18px;
	height: 18px;
	border-radius: 20px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.recommendationIcon{
	width: 26px;
	height: 26px;
}

#recommendationHint {
	position: absolute;
	top: 48px;
	z-index: 200;
	text-align: center;
	color: white;
	font-size: 13px;
	left: 68px;
	border-bottom: 1px solid #ccc;
	border-radius: 5px;
	margin-bottom: 4px;
	box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.2);
	letter-spacing: 0.01em;
	background-image: linear-gradient(#18aeff, #2580b2);
	padding: 10px 15px;
}

#recommendationHint::before {

	/*content: '';
	position: absolute;
	left: -12px;
	top: 50%;
	border-style: solid;
	border-width: 10px 13px 8px 0;
	border-color: transparent #1b9add transparent transparent;
	transform: translateY(-50%);
	*/
	content: '';
	position: absolute;
	left: 14px;
	bottom: 100%;
	/* Position arrow above the label */
	border-style: solid;
	border-width: 0 10px 10px 10px;
	/* Create arrow shape */
	border-color: transparent transparent #18aeff transparent;
	/* Arrow color */
	transform: translateX(-50%);
	/* Center the arrow horizontally */
}

.searchOptionsContainer {
	margin-bottom: 20px;
	text-align: center;
	overflow: hidden;
	background-color: white;
	padding-top: 20px;
	padding-bottom: 5px;
	border-bottom: 1px solid #ccc;
	border-bottom-left-radius: 15px;
	border-bottom-right-radius: 15px;
	margin-bottom: 4px;
	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
	position: absolute;
	top: 32px;
	left: 0;
	right:0;
	z-index: 300;

}

.searchOptionsContainer h3 {
	margin: 0;
	font-size: 14px;
	text-align: left;
	padding-left:15px;
	color: #606060;
}

.searchOptionsContainer ul {
	display: flex;
	flex-direction: row;
	justify-content: left;
	align-items: left;
	margin-top: 0;
	width: 90%;
	overflow: scroll;
	padding-bottom: 10px;
	padding-top: 10px;
	/*
	background-color: #fafafa;
	box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.1), inset 0px -2px 4px rgba(0, 0, 0, 0.1);
	*/
}

.searchOptionsContainer ul li {
	margin: 0;
	margin-right: 10px;
	text-align: center;
	padding: 10px;
	border-radius: 20px;
	padding-bottom: 5px;
	padding-top: 5px;
	background-color:#ececec;
	border:1px solid #ececec;
}

.searchOptionsContainer ul li.selected{
	background-color: #ccc;
	border:1px solid #00000079;
}

.searchSuggestionContainer {
	padding-left: 20px;
	background-color: white;
	padding-top: 5px;
	padding-bottom: 5px;
	border-bottom: 1px solid #ccc;
	border-bottom-left-radius: 15px;
	border-bottom-right-radius: 15px;
	margin-bottom: 4px;
	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
}

.options {
	display: block;
	margin-bottom: 20px;
	margin-top: 20px;
	text-align: center;
}

.group-options {
	display: block;
	text-align: center;
	padding-top: 2px;
	background-color: white;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	border: 1px solid #ccc;
	padding-bottom: 6px;
	height:35px;
}


.group-options a {
	padding: 8px;
	color: black;
	padding-left: 7px;
	padding-right: 7px;
	font-size: 12px;
	border-radius: 8px;
	text-decoration: none;
}

.option-selected {
	font-weight:bold;
	background-color:#eee;
	padding-left:20px;
	padding-right:20px;
}
.option-not-selected {
	font-weight:normal;
	background-color:white;
	padding-left:7px;
	padding-right:7px;
}



#subCatnone {
	margin-left: 20px;
}

.options a {
	margin-left: 10px;
	margin-right: 10px;
	color: #ccc;
	font-size: 10px;
	text-decoration: none;
}

input[type=search] {
	-webkit-appearance: none;
}

.hidden {
	display: none;
}

#noResults {
	display: none;
	text-align: center;
	font-weight: bold;
	padding-top: 100px;
	padding-bottom: 150px;
	padding: left 30px;
	padding-right: 30px;
}

#menuContainer {
	/*    padding: 20px;*/
	padding-top: 0;
}

.menuImage {
	width: 60px;
	height: 60px;
	object-fit: cover;
	border-radius: 5px;
	margin-right: 10px;
	position: absolute;
	left: 10px;
}

.menuImageBg {
	width: 60px;
	height: 60px;
	border-radius: 5px;
	margin-right: 10px;
	position: absolute;
	left: 10px;
	background-size: cover;
	/* Cover ensures the image covers the entire container */
	background-position: center;
}

.menuImageBg.noalc{
	border-bottom-color: rgb(13, 181, 13);
	border-bottom-style: solid;
}

.menuImageBg.noalc::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px; /* thickness of the gradient border */
    background: linear-gradient(to bottom, transparent, rgb(13, 181, 13));
    z-index: 2; /* ensure it's above the image */
}

.isWineCategory .menuImageBg {
	width: 60px;
	height: 80px;
	border-radius: 5px;
	margin-right: 10px;
	position: absolute;
	left: 10px;
	background-size: cover;
	/* Cover ensures the image covers the entire container */
	background-position: center bottom;
}

.appPromo {
	text-align: center;
	width: 100%;
	display: none;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: #eee;
	z-index: 400;
	padding-top: 100px;
	/*background-image: linear-gradient(#73b7ff, #aeb0b2);*/
}

.appPromo .shareimg {
	width: 25px;
	height: 25px;
	border-radius: 8px;
	box-shadow: 1px 1px 2px #000;
	vertical-align: middle;
	margin-left: 5px;
	margin-right: 5px;
}

#appPromoImg {
	width: 150px;
	height: 150px;
	border-radius: 8px;
	box-shadow: 1px 1px 2px #000;
	vertical-align: middle;
	margin-left: 5px;
	margin-right: 5px;
}

.appPromoReject {
	text-align: center;
	font-size: 12px;
	color: #ccc;
	display: block;
	margin: 0;
	margin-top: 25px;
}

#orderHistoryContainer {
	width: 100%;
	position: fixed;
	top: 45px;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: #fff;
	z-index: 300;
	overflow: auto;

}

#orderHistoryContainer span {
	font-size:14px;
}

.recipe {
	text-align: center;
	width: 100%;
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: #fff;
	z-index: 800;
	overflow: auto;

}

.alcohol{
	position:absolute;
	bottom:5px;
	right:10px;
	font-size:11px;
	color:#ccc;
	display:none;
}

input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	height: 20px;
	width: 20px;
	border-radius: 50%;
	box-shadow: 0 0 2px 0 #555;
  }

#recipeSteps strong{
	display:block;
	margin-top:5px;
}

#recipeDrinkName{
	margin-bottom:20px;
	padding-top:13px;
}

#recipeRaw{
	font-size:11px;
	background-color:white;
}

.recipe h2{
	margin-bottom: 0px;
}

.recipe span{
	font-size: 16px;
	color: #000;
	margin-top:0;
	display: block;
	background-color: #ccc;
}

#recipeFor{
	margin-top:-20px;
	margin-bottom:10px;
}

.recipe img{
	width: 100%;
	max-width: 200px;
	border-radius: 20px;
	margin-top:30px;
}


.recipeSection{
	background-color:#efefef;
	border-radius:15px;
	margin-left:50px;
	margin-right:50px;
}

.arrow,
.arrow:before {
	position: absolute;
	left: 50%;
}

.arrow {
	width: 40px;
	height: 40px;
	bottom: 10px;
	margin: -20px 0 0 -20px;
	-webkit-transform: rotate(45deg);
	border-left: none;
	border-top: none;
	border-right: 2px #000 solid;
	border-bottom: 2px #000 solid;
}

.arrow:before {
	content: '';
	width: 20px;
	height: 20px;
	top: 50%;
	margin: -10px 0 0 -10px;
	border-left: none;
	border-top: none;
	border-right: 1px #000 solid;
	border-bottom: 1px #000 solid;
	animation-duration: 2s;
	animation-iteration-count: infinite;
	animation-name: arrow;
}

@keyframes arrow {
	0% {
		opacity: 1;
	}

	100% {
		opacity: 0;
		transform: translate(-10px, -10px);
	}

}

#drinksOverview{
	display:none;
}

.drinks-overview-container {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 5px;
	padding: 5px;
}

.drink-item {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	gap: 0;
	padding:7px;
	break-inside: avoid-column;
}

.drink-image {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 5px;
    margin-right: 10px;
}

.drink-info {
    display: flex;
    flex-direction: column;
}

.drink-info h3 {
    margin: 0;
    font-size: 0.9em;
    font-weight: bold;
    text-transform: capitalize;
}

.drink-info .drink-recipe {
	font-size: 0.7em;
	color: #666;
	margin-top: 0px;
	margin-bottom: 0;
}

.drink-item.page-break {
    page-break-after: always;
}

.page-break {
    page-break-after: always;
    page-break-before: always;
}


/* Print-specific styles */
@media print {
	#drinksOverview{
		display:block;
	}

    .drinks-overview-container {
		grid-template-columns: repeat(2, 1fr);
		page-break-before: always;
    }

    .drink-item {
        page-break-inside: avoid;
    }
	
	.drink-item.page-break {
        page-break-after: always;
    }
}






.agecheck {
	text-align: center;
	width: 100%;
	display: none;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: white;
	z-index: 500;
	padding-top: 100px;
}

.agecheck button {
	width: 180px;
	height: 70px;
	font-size: 17px;
}

button {
	background-image: linear-gradient(#42A1EC, #0070C9);
	border: 1px solid #0077CC;
	border-radius: 4px;
	box-sizing: border-box;
	color: #FFFFFF;
	cursor: pointer;
	direction: ltr;
	font-family: "SF Pro Text", "SF Pro Icons", "AOS Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 14px;
	font-weight: 400;
	letter-spacing: -.022em;
	line-height: 1.47059;
	min-width: 30px;
	overflow: visible;
	padding: 4px 15px;
	text-align: center;
	vertical-align: baseline;
	user-select: none;
	-webkit-user-select: none;
	touch-action: manipulation;
	white-space: nowrap;
}

.usual-button {
	position: absolute;
	right: 20px;
	border-radius: 15px;
	letter-spacing: -.022em;
	line-height: 1.4;
	margin-top: 5px;
	width: 20px;
	height: 20px;
	background: #eee;
	border: 1px solid #ccc;
	font-size: 14px;
	font-weight: 400;
	font-family: verdana;
	font-style: normal;
	color: #ccc;
	opacity: 0.3;
}

.agecheck span {
	display: block;
	margin-bottom: 10px;
}


.itemWithImage {
	min-height: 60px;
}

.isWineCategory .itemWithImage {
	min-height: 80px;
}

.qr {
	text-align: center;
	display: none;
}

.qr img {
	width: 180px;
	height: 180px;
}

.qr div {
	width: 100%;
	height: 100%;
	text-align: center;
}

.addtohome {
	text-align: center;
	font-size: 14px;
	background-color: white;
	padding-top: 10px;
	padding-bottom: 15px;
	border-top: #ccc solid 1px;
	border-bottom: #ccc solid 1px;
	margin-top:40px;
}

.addtohome img {
	width: 25px;
	height: 25px;
	border-radius: 8px;
	box-shadow: 1px 1px 2px #000;
	vertical-align: middle;
	margin-left: 5px;
	margin-right: 5px;
}

.addtohome div {
	width: 100%;
	height: 100%;
	text-align: center;
}

.coverpage {
	display: none;
}

.headerWithImage,
.descriptionWithImage {
	margin-left: 80px;
}

.headerWithoutImage,
.descriptionWithoutImage {
	text-align: center;

}

#historyIconContainer{
	position: fixed;
	top: 0px;
	left: 30px;
	z-index: 200;
	padding: 9px;
	border-radius: 8px;
	padding-bottom: 0px;
	padding-top: 14px;
}

#historyIconContainer img{
	width:23px;
}

.star {
	font-style: normal;
	font-weight: bold;
	text-align: right;
	position: absolute;
	top: -5px;
	right: 0;
	color: #ccc;
	padding: 10px;
}

.isStarred {
	color: orange;
}

.itemCount{
	font-style: normal;
	font-size: 72px;
	font-weight: bold;
	text-align: right;
	position: absolute;
	top: -2px;
	right: -3px;
	color: #eee;
}

.sort-toggle {
	border: none;
	background-color: transparent;
	cursor: pointer;
	font-size: 0.3em;
	color: #cccccc;
	transition: color 0.3s;
	float: right;
	position: absolute;
	right: 0;
	bottom: 0;
}

.sort-toggle:hover {
	color: #333;
}


/* Order */
#orderInformation {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: rgba(0, 0, 0, 0.4);
	z-index: 500;
}

.orderContent {
	position: relative;
	top: 50px;
	background-color: white;
	z-index: 500;
	border: solid 1px #ccc;
	border-radius: 15px;
	box-shadow: 2px 2px 20px #ccc;
	text-align: center;
	margin-right: 20px;
	margin-left: 20px;
	margin-bottom: 20px;
	overflow: visible;
}

.orderImage {
	width: 60%;
	border-radius: 15px;
}

.orderText {
	width: 80%;
	text-align: center;
	padding-left: 10%;
	padding-right: 10%;
}

.countdownDisplay {
	text-align: center;
	font-style: italic;
	color: #ccc;
}


/* Modal styles */
.modal {
	display: none;
	position: fixed;
	z-index: 400;
	padding-top: 0;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	overflow: auto;
	background-color: rgba(0, 0, 0, 0.4);
}

.modal h2 {
	border-bottom: 0px;
	background-color: white;
	position: fixed;
	right: 0;
	left: 0;
	border-bottom-style: solid;
	border-bottom-color: #efefef;
	border-bottom-width: 1px;
	box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5)
}

.related-drink-image{
	max-width: 200px;
	max-height:300px;
	border-radius: 20px;
	margin-top:30px;
	text-align: center;
	margin-left:auto;
	margin-right:auto;
}
.related-drink{
	text-align: center;
	margin-top: 10px;
	font-size: 20px;
	margin-left:auto;
	margin-right:auto;
	font-family: 'Snell Roundhand', 'Arial';
	
}
#modal-related{
	margin-top:20px;
}

#modal-barclosed{
	background-color:#efefef;
	border-radius:8px;
	margin-top:20px;
}

#recipeLink {
	text-align: center;
	margin-top: 10px;
	margin-bottom: 10px;
	color: #ccc;
	font-size: 10px;
}

#recipeDescription {
	text-align: center;
	margin-top: 10px;
	margin-bottom: 10px;
	font-size: 10px;
}

.modal-content {
	background-color: #fefefe;
	/* margin: auto; */
	padding: 20px;
	padding-top: 0;
	/* max-width: 500px; */
	overflow-y: auto;
	/* max-height: 95vh; */
	/* width: 90%; */
	top: 0;
	left: 0;
	right: 0;
	padding-top:90px;
}

.modal-footer {
	text-align: center;
	color: #707070;
	padding: 10px;
	font-size: 12px;
}

#modal-aifooter {
	text-align: left;
	color: #CCC;
	padding-bottom: 15px;
	font-size: 10px;
	font-style: italic;
}

.modal-image {
	max-width: 100%;
	border-radius: 20px;
	text-align: center;
	max-height: calc(100vh - 400px);
	display: block;
	margin-left: auto;
	margin-right: auto;
}

#modal-bestil,
#modal-bestil-noalc,
#modal-bestil-comment {
	width: 100%;
	height: 35px;
	margin-bottom: 10px;
}

#modal-bestil-noalc {
	background-image: linear-gradient(#38ba6c, #117208);
	margin-left: auto;
	margin-right: 1%;
	border: 1px solid #0c8301;
}

.modal-pitch {
	margin-top: 15px;
	margin-bottom: 5px;
	margin-top: 30px;
}

.modal-header {
	padding: 12px 16px;
	color: #333;
}


.close {
	color: #000;
	float: right;
	font-size: 28px;
	position: fixed;
	top: 20px;
	right: 20px;
	z-index: 300;
	width: 40px;
	background-color: #fff;

	border-radius: 15px;
	letter-spacing: -.022em;
	line-height: 1.4;
	margin-top: 5px;
	width: 20px;
	height: 20px;
	background: #eee;
	border: 1px solid #ccc;
	font-size: 14px;
	font-weight: 400;
	font-family: verdana;
	font-style: normal;
	color: #ccc;
	opacity: 0.3;
}

.close:hover,
.close:focus {
	color: black;
	text-decoration: none;
	cursor: pointer;
}


.bestil-btn {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 100px;
	/* Width of the button */
	height: 100%;
	/* Make it cover the full height of the list item */
	background-color: #007AFF;
	/* Blue color similar to iOS */
	color: #FFFFFF;
	/* White text color */
	border: none;
	/* Remove borders */
	text-align: center;
	/* Center the text */
	font-weight: bold;
	/* Bold text */
	border-radius: 0;
	/* Rectangular button, no rounded corners */
	font-size: 16px;
	/* Font size */
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
	transition: background-color 0.3s;
	/* Smooth background color transition */
}

.bestil-btn:hover {
	background-color: #0051A8;
	/* Change background color on hover for a "pressable" effect */
}


/* Responsive adjustments */
@media screen and (max-width: 600px) {
	.modal-content {}
}


/* Larger screens */
@media screen and (min-width: 768px) {
	ul {
		/* Create a grid layout with 2 columns */
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-gap: 20px;
		/* Adjust the gap between columns */
	}

	li {
		/* Adjust list items if needed for the larger view */
		/* Example: making them take the full width of the grid column */
		width: 90%;
	}

	.menuImageBg {
		/* Adjust position if necessary when in two-column view */
		position: static;
		/* Example: setting position to static */
		margin: 0 auto;
		/* Center the image if necessary */
		width: 120px;
		height: 120px;
		margin-top: 7px;
	}

	.menuImageBg.noalc{
		border-bottom: none;
	}


	.isWineCategory .menuImageBg {
		width: 120px;
		height: 120px;
		margin-top: 7px;
		position: static;
		/* Example: setting position to static */
		margin: 0 auto;
		/* Center the image if necessary */
		background-size: contain;
		/* Scales the image to fit within the container */
		background-position: center;
		/* Centers the image in the container */
		background-repeat: no-repeat;
	}

	.modal-content {
		/* Optional: Adjust modal width on larger screens for better visibility */

		/* Or any other suitable max width */
	}

	.headerWithImage {
		text-align: center;
		margin-left: 0;
		margin-top: 10px;
	}

	.descriptionWithImage {
		text-align: center;
		margin-left: 0;
	}

	.qr {
		text-align: center;
		display: none;
	}

	.qr img {
		width: 100px;
		height: 100px;
	}
}


/* Very large screens */
@media screen and (min-width: 1000px) {
	ul {
		/* Create a grid layout with 2 columns */
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		grid-gap: 20px;
		/* Adjust the gap between columns */
	}
}





/* Dark Mode Styles */

/* prefers-dark-interface */
/* @media (prefers-color-scheme: dark) { */

@media (prefers-color-scheme: dark) {
	body {
		background-color: #121212; /* Dark background */
		color: #f1f1f1; /* Lighter text color for readability */
	}
	
	h2, .sub-category-header{
		background-color: #121212; /* Dark background for headers */
		color: #ffffff; /* Light text color */
		border-bottom-color: #444; /* Darker border color */
	}
	
	.modal h2 {
		background-color: #222; /* Dark background for headers */
		color: #ffffff; /* Light text color */
		border-bottom-color: #444; /* Darker border color */
	}
	
	ul li {
		background-color: #2b2b2b; /* Dark background for list items */
		color: #e0e0e0; /* Light text color */
		box-shadow: 0 2px 4px rgba(255, 255, 255, 0.1); /* Lighter shadow */
	}


	.highlighted-row {
		background-color: #4b4b4b; /* Light yellow background for highlight */
	}

	.addtohome{
		background-color:#2b2b2b;
		border-color:#000;
	}

 #modal-barclosed{
		background-color:#2b2b2b;
		color: #e0e0e0;
		}

	.appPromo{
		background-color: #000;
	}

	.arrow {
		border-right: 2px #eee solid;
		border-bottom: 2px #eee solid;
	}
	
	.arrow:before {
		border-right: 1px #eee solid;
		border-bottom: 1px #eee solid;
	}
	
	strong, span {
		color: #e0e0e0; /* Light text color */
	}
	
	.burgermenu, .usual-button, .close {
		color: #f1f1f1; /* Light icon color */
	}
	
	.labelSuggestion, .labelMostOrdered {
		box-shadow: inset 0 2px 6px #033d58; /* Darker shadow for label */
		border-bottom:0;
	}

	.mostOrdered{
		border:1px solid #13550d;
	}

	.drinkSuggestion{
		border:1px solid #165477;
	}
	
	.drinkSuggestionContainer, .searchSuggestionContainer {
		background-color: #1a1a1a; /* Dark background for containers */
		color: #e0e0e0; /* Light text color */
		box-shadow: 0 2px 4px rgba(255, 255, 255, 0.2); /* Lighter shadow */
	}
	
	input{
		background-color:#363636;
	}

	#searchInput {
		font-size: 14px;
		background-color: #363636;
		border: solid 1px #000;
		color: #EEE;
	}

	.group-options a {
		color: #dddddd; /* Light text color for group options */
	}

	.group-options {
		background-color: #2b2b2b; /* Dark background for list items */
		border-color:#000;
	}
	
	.options a {
		color: #bbbbbb; /* Light link color */
	}


	.option-selected {
		font-weight:bold;
		background-color:#393939;
		padding-left:20px;
		padding-right:20px;
	}
	.option-not-selected {
		font-weight:normal;
		background-color:#2b2b2b;
		padding-left:7px;
		padding-right:7px;
	}
	
	#orderInformation {
		background-color: rgba(0, 0, 0, 0.7); /* Darker overlay */
	}
	
	.orderContent {
		background-color: #222; /* Dark background for order content */
		color: #f1f1f1; /* Light text color */
	}
	
	.modal .modal-content {
		background-color: #222; /* Dark background for modal */
		color: #f1f1f1; /* Light text color */
		border: 1px solid #222;
	}
	
	.recipeSection{
		background-color:#2b2b2b;
		border-radius:15px;
		margin-left:50px;
		margin-right:50px;
	}

	.recipe {
		background-color: #222;
	}

	#recipeRaw{
		font-size:11px;
		background-color:#222;
	}

	.recipe span{
		font-size: 16px;
		color: #e0e0e0;
		margin-top:0;
		display: block;
		background-color: #2b2b2b;
	}

	#currentScale{
		color:white;
	}


	#orderHistoryContainer {
		background-color: #121212;
	}

	.itemCount{
		color: #707070;
	}

	.historyIcon,
	.recommendationIcon{
		filter: invert(1);
	}

	.searchSelected{
		background-color:#626262;
	}
	
	.searchOptionsContainer {
		background-color: #2b2b2b;
		box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
		border:1px solid #3b3b3b;
	}

	.searchOptionsContainer h3 {
		color: #afafaf;
	}


	.searchOptionsContainer a {
		color:#707070 !important;
	}

	.searchOptionsContainer ul li {
		background-color:#121212;
		border:1px solid #707070;
	}

	.searchOptionsContainer ul li.selected{
		background-color: #ccc;
		border:1px solid #00000079;
		color:black;
	}

	.searchSuggestionContainer {
		background-color: white;
		border-bottom: 1px solid #ccc;
		box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
	}
}














/* Print Styles */
@media print {
	body {
		background-color: #fff;
		/* Change the background to white for print */
		color: #000;
		/* Change text color to black for print */

	}

	h2 {
		page-break-before: always;
		/* Avoid breaking inside an item */
		page-break-after: avoid-page;
		/* Avoid breaking the page after a heading */
		padding-top: 10px;
		background-color: #ffffff;
		position: relative;
	}

	h2.subHeader {
		display: block;
		page-break-before: always;
		/* Avoid breaking inside an item */
	}




	.sub-category-header{
		font-size: 16px;
		margin-bottom: 0;
		margin-top: 10px;
		font-weight: bold;
		color: #555;
		text-transform: capitalize;
		border-bottom: solid 1px #EFEFEF;
		background-color: white;
		/* top: 75px; */
		z-index: 100;
		padding-left: 20px;
		text-align: center;
		font-weight: 100;
		font-family: Apple Chancery;
		position:static;
	}

	.onlyprint{
		display: block;
	}
	.notprint{
		display: none;
	}

	li {
		box-shadow: none;
		/* Remove box-shadow for print */
		page-break-before: avoid;
		/* Avoid breaking inside an item */
		page-break-inside: avoid;
		/* Avoid breaking inside a column */
		width: 90%;
		margin-bottom: 9px;
	}

	.hasLabel {
		margin-bottom: 18px;
	}

	ul {
		/* Create a grid layout with 2 columns */
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-gap: 0;
		/* Adjust the gap between columns */
		page-break-before: avoid;
		/* Avoid breaking inside an item */
		/* page-break-after: always; /* Avoid breaking inside an item */
		padding-bottom: 15px;
		margin-bottom:0;
	}

	ul :last-of-type {
		page-break-after: avoid-page;
		/* Avoid breaking inside an item */

	}

	.qr {
		page-break-before: always;
		display: block;
		text-align: center;
		padding-top: 300px;
	}

	.qr img {
		width: 150px;
		height: 150px;
	}

	.headerWithImage {
		text-align: left;
		margin-left: 80px;
	}

	.descriptionWithImage{
		margin-left:80px;
		text-align:left;
		font-size:15px;
	}

	.coverpage {
		text-align: center;
		display: block;
		page-break-after: always;
		/* Avoid breaking inside an item */

	}

	.coverpage span {
		font-family: 'Snell Roundhand', 'Arial';
		font-size: 180px;
		margin: 0;
		padding: 0;

		color: black;
	}

	.coverpage img {
		width: 180px;
		height: 180px;
	}

	.coverpage div {
		width: 100%;
		height: 100%;
		text-align: center;
	}

	.mostOrdered,
	.drinkSuggestion{
		border:none;
	}

	.search-bar,
	.sort-toggle,
	.modal,
	.close,
	.menuImage,
	.options,
	.star,
	/*.menuImageBg,*/
	.group-options,
	.addtohome,
	.agecheck,
	.noalcicon,
	.labelSuggestion,
	.labelMostOrdered,
	.burgermenu {
		display: none;
		/* Hide elements that aren't necessary for print */
	}

}



.imessage {
	background-color: #f8f8f8;
	border: 1px solid #e5e5ea;
	border-radius: 0.25rem;
	display: flex;
	flex-direction: column;
	font-size: 1.30rem;
	margin: 0 auto 1rem;
	max-width: 600px;
	padding: 0.5rem 1.5rem;
}

.imessage p {
	border-radius: 1.15rem;
	line-height: 1.15;
	max-width: 75%;
	padding: 0.5rem .875rem;
	position: relative;
	word-wrap: break-word;
	font-family: Arial,
		BlinkMacSystemFont,
		"Segoe UI",
		Roboto,
		Oxygen-Sans,
		Ubuntu,
		Cantarell,
		"Helvetica Neue",
		sans-serif;
	font-weight: normal;
}

.imessage p::before,
.imessage p::after {
	bottom: -0.1rem;
	content: "";
	height: 1rem;
	position: absolute;
}

p.from-me {
	align-self: flex-end;
	background-color: #248bf5;
	color: #fff;
}

p.from-me::before {
	border-bottom-left-radius: 0.8rem 0.7rem;
	border-right: 1rem solid #248bf5;
	right: -0.35rem;
	transform: translate(0, -0.1rem);
}

p.from-me::after {
	background-color: #f8f8f8;
	border-bottom-left-radius: 0.5rem;
	right: -40px;
	transform: translate(-30px, -2px);
	width: 10px;
}

p[class^="from-"] {
	margin: 0.5rem 0;
	width: fit-content;
}

p.from-me~p.from-me {
	margin: 0.25rem 0 0;
}

p.from-me~p.from-me:not(:last-child) {
	margin: 0.25rem 0 0;
}

p.from-me~p.from-me:last-child {
	margin-bottom: 0.5rem;
}

p.from-them {
	align-items: flex-start;
	background-color: #e5e5ea;
	color: #000;
}

p.from-them:before {
	border-bottom-right-radius: 0.8rem 0.7rem;
	border-left: 1rem solid #e5e5ea;
	left: -0.35rem;
	transform: translate(0, -0.1rem);
}

p.from-them::after {
	background-color: #f8f8f8;
	border-bottom-right-radius: 0.5rem;
	left: 20px;
	transform: translate(-30px, -2px);
	width: 10px;
}

p[class^="from-"].emoji {
	background: none;
	font-size: 2.5rem;
}

p[class^="from-"].emoji::before {
	content: none;
}

.no-tail::before {
	display: none;
}

.margin-b_none {
	margin-bottom: 0 !important;
}

.margin-b_one {
	margin-bottom: 1rem !important;
}

.margin-t_one {
	margin-top: 1rem !important;
}




/* General styles remain unchanged */

.new-look li {
	position: relative;
	margin: 0;
	padding: 0;
	width: 100%; /* Set the width of the list items to 100% */
	height: 100vw; /* Ensure height is equal to the viewport width for a square */
	overflow: hidden;
	display: block;
	border-radius: 0;
	margin-bottom: 0px;
  }

.new-look ul {
	padding-left:0;
	padding-right: 0;
	margin-top:0;
}
  
  /* Ensure the .menuImageBg div maintains a square aspect ratio */
  .new-look .menuImageBg {
	width: 100%;
	height: 100%; /* Ensure height matches the width for a square */
	background-size: cover; /* Make sure the image covers the entire area */
	background-position: center; /* Center the image */
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1; /* Behind the text and star */
	border-radius: 0;
  }
  
  /* Favorite star in the top-right corner */
  .new-look .star {
	position: absolute;
	top: 10px;
	right: 10px;
	font-size: 24px;
	color: orange;
	z-index: 3; /* Ensure it's above the image and text */
	display: block; /* Ensure it's visible */
  }
  
  /* Overlay for the drink name */
  .new-look .headerWithImage {
	position: absolute;
	bottom: 30px; /* Adjust this value to position the title above the description */
	left: 10px; /* Align text to the left */
	right: 10px;
	padding: 5px;
	color: white;
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8); /* Only text shadow for better visibility */
	z-index: 2; /* Ensure it's above the image */
	display: block;
	font-size: 1.4em;
	font-weight: bold;
	text-align: left; /* Align text to the left */
	margin-left: 0;
	border-radius:0;
  }
  
  /* Overlay for the drink description */
  .new-look .descriptionWithImage {
	position: absolute;
	bottom: 10px;
	left: 10px; /* Align text to the left */
	right: 10px;
	padding: 5px;
	color: white;
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8); /* Only text shadow for better visibility */
	z-index: 2; /* Ensure it's above the image */
	display: block;
	font-size: 1em;
	text-align: left; /* Align text to the left */
	margin-left: 0;
  }
  
  /* Hide default smaller image */
  .new-look .menuImage {
	display: none;
  }