/*As Body Default & Overrides*/
html, body {
    background-color: #fafafa;
    max-width: 412px;
    height: 100dh;
    max-height: 100dh;
    margin: 0 auto;
    overflow: hidden;
    align-self: flex-start;
    font-family: 'Inter', sans-serif;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.cart-container {
    max-width: 412px;
}
.header {
	transform: translateX(-0%);
	background: #f4f6f8;
}
.header-logo-icon {
    /* width: 7.5em; */
    width: 120px;
    height: 40px;
    aspect-ratio: auto 120 / 40;
}
.main-header-container {
	padding: 1em !important;
}
.menu-bar-container {
	position: absolute;
	right: 1rem;
	height: calc(100% - 1rem);
}

.terms-icon-container {
	position: absolute;
	top: 20px; 
	right: 10px; 
}

.terms-icon-button {
	background: none; 
	border: none; 
	padding: 0; 
	cursor: pointer; 
}

.terms-icon {
	width: 24px;
}

.back-bar-container {
	position: absolute;
	left: 1rem;
	height: calc(100% - 1rem);
}
.back-bar-container img {
	width: 24px;
}
.back-bar {
	cursor: pointer;
}
.order-info-container {
	padding: 1rem !important;
	padding-top: 0 !important;
	padding-bottom: 0.5rem !important;
}
.order-info-container>div {
    border-radius: 16px;
    background: #4A8C44;
    padding: 12px 5px;
}
.order-info-container .info-text {
	font-size: 0.9rem;
	height: fit-content;
}

.category-title {
	font-size: 18px;
    font-weight: bold;
    color: #252865;
}

.menu-holder {
	padding-left: 5px !important;
	padding-right: 5px !important;
}

.custom-button.full-button {
    font-size: 12px;
    padding: 10px;
    width: 100%;
}

/*Overwrites*/
.header {
    border-bottom: none;
}
.title-holder {
	padding: 1rem;
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
}
.order-listing-holder {
	background: #ffffff;
}
.order-listing-holder::before {
	background: none;
}
.order-listing ul {
	padding-bottom: 25px;
}
.order-listing ul li {
	border-bottom: none;
	/*box-shadow: 0px 0 30px rgba(1, 41, 112, 0.1);*/
	background: #ffffff;
	/*margin-bottom: 5px;*/
	padding-left: 5px;
	padding-right: 5px;
}
.fullcontainer {
	background: #f4f6f8;
}
.order-box-info {
	padding-right: 5px;
}
.cart-button-holder {
	padding-right: 5px;
}
#footer-container {
	padding-top: 5px;
	padding-bottom: 5px;
}
.nav-header {
	padding: 0px;
	height: 100%;
}
.nav-holder {
	background: #f4f6f8 !important;
}
.nav-menu-profile-bar {
	margin-bottom: 15px;
	height: auto;
	color: black;
	padding-left: 20px;
	padding-right: 20px;
}
.account-info-div {
    border-radius: 16px;
    background: #FFFFFF;
    padding: 12px 15px;
    box-shadow: 0 2px 16px rgb(0 0 0/ 0.2);
}
.nav-menu-list {
    height: 100%;
    margin-top: 15px;
    background: white;
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
    padding-top: 35px;
    color: black;
}
.nav-menu-list>div.list-item {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}
.nav-menu-list>div.list-item:not(:first-child) {
    border-top: 1px solid #D8D4D4;
    padding-top: 15px;
    padding-bottom: 15px;
}
/*Overwrites*/
.modal-body.bottom-modal {
	padding: 0px;
}
.modal.bottom-modal .modal-dialog {
    width: 100%;
    max-width: 412px;
    position: fixed;
    bottom: 0;
    right: 0;
    left: 0;
    margin: 0;
    margin-left: auto;
    margin-right: auto;
}
.modal-content .modal-header.bottom-modal {
    border: none;
}
.modal-content .modal-header .close.payment-confirmation {
    background: none;
    border: none;
    position: absolute;
    right: 60px;
    top: -15px;
    /* margin: 0 calc(50vw - (412px / 2) + 25px) 30px 0; */
}
.modal-dialog .modal-content.payment-confirmation {
	min-height: 55vh;
	border-top-left-radius: 40px;
    border-top-right-radius: 40px;
}
.modal-footer-button.bottom-modal {
    /* background: #373CA0; */
    background: #4B8C45;
    bottom: 0;
    height: 70px;
    width: 100%;
    display: flex;
    justify-content: center;
    color: white;
}
.modal-footer-button.bottom-modal > p.button-text {
    font-size: 16px;
    color: white;
    font-weight: 600;
    text-align: center;
    margin: 0;
    text-transform: uppercase;
    align-self: center;
}
.modal.bottom-modal .close {
	background: none !important;
}
.modal.bottom-modal .close img {
    max-width: none;
    width: 32px;
    height: 32px;
}

/* To Prevent Pull To Refresh */
html, body {
  overscroll-behavior-y: none;
}

.text_on_line {
	display: flex;
	flex-direction: row;
}

.text_on_line:before, .text_on_line:after {
	content: "";
	flex: 1 1;
	border-bottom: 1px solid;
	margin: auto;
}

.text_on_line:before {
	margin-right: 10px;
}

.text_on_line:after {
	margin-left: 10px;
}

.ribbon_redeemed {
	position: absolute;
	text-indent: -9999px;
	top: -2px;
	left: -5px;
	background: url(../images/ribbon_redeemed.png) no-repeat 0 0;
	width: 81px;
	height: 80px;
	z-index: 3;
}

.ribbon_expired {
	position: absolute;
	text-indent: -9999px;
	top: -2px;
	left: -5px;
	background: url(../images/ribbon_expired.png) no-repeat 0 0;
	width: 81px;
	height: 80px;
	z-index: 3;
}

.opacity_06 {
	opacity: 0.6;
}

.custom-btn-link, .custom-btn-link:link, .custom-btn-link:active,
	.custom-btn-link:hover, .custom-btn-link:visited {
	color: var(--primary);
	text-decoration: none;
}

.custom-btn-outline {
	color: var(--primary);
    background-color: #FFF;
    border-color: var(--primary);
}

.custom-btn-outline:hover {
	color: #FFF;
    background-color: var(--primary);
    border-color: var(--primary);
}

.cursor-pointer {
	cursor: pointer;
}

.strike-through {
	text-decoration: line-through;
}

.scroll-invisible {
	-ms-overflow-style: none; /* Internet Explorer 10+ */
	scrollbar-width: none; /* Firefox */
}

.scroll-invisible::-webkit-scrollbar {
	display: none; /* Safari and Chrome */
}

.noselect {
	-webkit-touch-callout: none; /* iOS Safari */
	-webkit-user-select: none; /* Safari */
	-khtml-user-select: none; /* Konqueror HTML */
	-moz-user-select: none; /* Old versions of Firefox */
	-ms-user-select: none; /* Internet Explorer/Edge */
	user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

.voucher-disabled {
	pointer-events: none;
	cursor: default;
	opacity: 0.6;
}

.item-disabled {
	pointer-events: none;
	cursor: default;
	opacity: 0.6;
}

.button-disabled {
	pointer-events: none;
	cursor: default;
	opacity: 0.6;
}

.button-look-disabled {
	opacity: 0.6;
}

.custom-cart-summary-container {
	background-color: #ffffff;
	position: absolute;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100%;
	z-index: 2;
	-webkit-transition: left linear .5s;
    transition: left linear .5s;
}

.custom-cart-summary-container.ng-hide {
	left: -100vw;
}

.custom-disabled {
	pointer-events: none;
	cursor: default;
	opacity: 0.6;
}

.custom-header-border-left {
	border-left: 2px solid var(--primary);
}
.custom-header-border-right {
	border-right: 2px solid var(--primary);
}
.custom-header-border-top {
	border-top: 2px solid var(--primary);
}
.custom-header-border-bottom {
	border-bottom: 2px solid var(--primary);
}

.mpc-not-completed {
	border: 2px solid var(--primary);
}

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

.custom-hr {
	border: 2px solid var(--primary);
}

/*Overwrite Google Login Button*/
#google-login .abcRioButton {
	/*Flex Fill*/
	flex: 1 1 auto !important;
	flex-grow: 1 !important;
	flex-shrink: 1 !important;
	flex-basis: auto !important;
}

/*Overwrite style.css*/
.form-control, .bootstrap-select .btn, .bootstrap-select .btn.btn-default,
	.bootstrap-select .btn.btn-default:hover, .bootstrap-select .btn.btn-default:focus,
	.styled-select select {
	color: var(--dark);
}

.order-listing-holder::before {
    pointer-events: none;
}

.custom-button.invert-custom-button {
	color: var(--primary);
	background: #ffffff;
}

.custom-button.small-button {
	font-size: 12px;
	padding: 10px 20px;
	min-width: 90px;
}
.custom-button.small-fit-to-text-button {
	font-size: 12px;
	padding: 7px 14px;
	width: fit-content;
	min-width: fit-content;
	height: fit-content;
	min-height: fit-content;
}

.nav-tabs .nav-link:hover::before { width: 0; }
.nav-tabs .nav-link.active:hover::before { width: 100%; left: 0; }
@media (hover: hover) {
	.nav-tabs .nav-link:hover::before { width: 100%; left: 0; }
}

.custom-img-holder {
	position: unset;
	padding-bottom: 0;
	height: fit-content;
}
.custom-img-holder figure {
	position: unset;
}
.img-holder.custom-img-holder figure img {
    max-height: 40vh;
}

div#wrapper {
	background: white;
}

.pay-at-counter {
	height: 55px;
}

.refresh-button {
	display: inline-block;
	padding: 5px 10px;
	font-size: 12px;
	background-color:var(--primary);
	color: white;
	border: none;
	border-radius: 3px;
	cursor: pointer;
}
.refresh-button:hover {
	background-color:var(--primary);
}