html {
    scroll-behavior:smooth !important;
}

body {
    background:var(--white);
    font-family:Open Sans;
    font-size:var(--text-size);
}

body.menu {
    background:var(--light);
}



/* Header */

header {
    font-size:1em;
    background:var(--white);
}

header i {
    color:#b2b4b6 !important;
}

header.landing {
    text-align:left !important;
    padding:1rem 2rem !important;
}

header.landing i {
    font-size:1.25em;
    vertical-align: middle;
}

header.landing h5 {
    font-family: 'Roboto Slab' !important;
    font:1em;
    font-weight:400;
    color:var(--dark-grey);
}

header.landing a {
    font-size:1.25em;
    font-family: 'Roboto Slab';
    color:#b2b4b6 !important;
}

header .icon {
    padding:1rem;
    flex-grow: 1;
    font-size:2em;
}

header .selector {
    display:flex;
    justify-content: space-between;
    padding:1rem;
    font-size:1.25em;
}

.customised-count {
    display: inline-block;
    margin-left: 0.25rem;
    margin-top:-0.25rem;
    width:2em;
    height:2em;
    line-height:2em;
    border-radius:1em;
    background:var(--primary);
    color:var(--white);
    font-size:0.8em;
    font-weight:500;
    text-align: center;
    vertical-align: middle;
}

.sticky-header {
    background:var(--white);
    position:fixed;
    top:0;
    left:0;
    right:0;
    box-shadow: 0rem 0.5rem 1rem rgba(0, 0, 0, 0.05);
    z-index:2000;
}

footer {
    position:fixed;
    left:0;
    bottom:0;
    right:0;
    background:var(--white);
}

footer.landing {
    padding:2rem;
    padding-bottom:3rem;
    text-align: center;
}

footer.landing img {
    width:10rem;
}

footer .circle {
    width:3em;
    height:3em;
    line-height: 3em;
    border-radius: 3em;
    position:relative;
}

footer .circle i {
    font-size:1.25em;    
}

footer .count {
    position:absolute;
    bottom:0rem;
    right:-0.5rem;
    background:var(--secondary);
    color:var(--secondary-text);
    width:1.5em;
    height:1.5em;
    line-height: 1.5em;
    text-align: center;
    border-radius:1.5em;
    font-size:0.8em;
    font-weight:600;
}

.filter-menu a {
    font-size:1.2em;
    font-family:'Roboto Slab';
    color:var(--dark);
    font-weight: 600;
}

/* Landing screen */

main.landing .title {
    padding:1.75rem;
    padding-bottom:2.5rem;
    /*background:var(--white);*/
    text-align: center;
}

main.landing .title h1 {
    font-family: Poppins !important;
    font-size:2.25em !important;
    margin-bottom:2.5rem !important;
    color:var(--dark-grey);
    text-transform: uppercase;
}

main.landing {
    padding:2rem;
}

main.landing h1 {
    font-family: 'Roboto Slab' !important;
    font-size:2em !important;
    color:var(--bg-headings) !important;
    font-weight:600;
}

main.landing h2 {
    font-family: 'Roboto Slab' !important;
    font-size:1.5em !important;
    color:#999 !important;
    font-weight:600;
}

main.landing .options {
    background:var(--light);
    padding:1.5rem;
    font-size:1em;
    color:var(--dark-grey);
}

main.landing .options h2 {
    font-size:1.33em !important;
    color:var(--black);
    font-weight:700;
}

main.landing .container {
    padding:1.75rem;
}

main.menu {
    padding:1.25rem;
}

main.menu h1 {
    font-size:1.5em;
    font-weight:600;
    color:var(--dark);
    font-family:'Roboto Slab' !important;
}

main.menu h3 {
    font-size:1.35em;
    font-weight:600;
    color:var(--dark-grey);
    font-family:'Roboto Slab' !important;
}

.allergy-selector {
    display:flex;
    justify-content: space-between;
    background:var(--white);
    color:var(--black);
    padding:0.5rem;
    border-radius: 5rem;
}

.allergy-selector .circle {
    width:3em !important;
    height:3em !important;
    line-height: 3em;
    text-align: center;
    border-radius:50%;
    margin-right:0.75rem;
}

.allergy-selector .circle i {
    font-size:1.25em;    
}

.allergy-selector .label {
    flex-grow: 4;
    font-weight:600;
}

.allergy-selector .list {
    display:block;
    font-size:0.9em;
    color:var(--dark-grey);
    font-weight: 400;
}



/* Product screen */

#product {
    height:100%;
    overflow-y:auto;
    background:var(--white) !important;
}

#product h1 {
    font-size:1.5em;
    font-weight:600;
    color:var(--dark);
    font-family:'Roboto Slab' !important;
}


/* Text */

h1, h2, h3, h4, h5, h6 {
    margin:0 !important;
}

h5 {
    font-family:'Roboto Slab';
    color:var(--dark-grey);
    font-weight:400;
}

.text-xs {
    font-size:0.8em !important;
}

.text-sm {
    font-size:0.9em !important;
}

.text-md {
    font-size:1.1em !important;
}

.text-lg {
    font-size:1.2em !important;
}

.text-xl {
    font-size:1.3em !important;
}

.text-link-dashed {
    color:var(--primary);
    border-bottom: thin dashed var(--primary);
}

.font-size-sm {
    font-size:1.3rem !important;
}

.font-size-md {
    font-size:2.2rem !important;
}

.font-size-lg {
    font-size:3.1rem !important;
}

.font-custom {
    font-family: 'Poppins' !important;
    text-transform: uppercase !important;
    font-weight: 400 !important;
}

/* Borders */

.border-top {
    border-color:var(--border) !important;
}

/* Buttons */

.btn {
    /*border-radius:5rem !important;*/
    border-radius:0.5rem !important;
    padding:0.375rem 1.375rem;
    font-size:1em;
    font-family:'Roboto Slab' !important;
    font-weight:400 !important;
}

.btn-lg {
    padding:0.5rem 1.5rem;
}

.btn-xl {
    padding:0.75rem 1.75rem;
    font-size:1.5em;
    border-radius:0.35rem;
    font-weight:600;
}

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

.btn-secondary {
    background:var(--light);
    border-color:var(--light) !important;
    color:var(--dark-grey) !important;
}

.btn-clear {
    background:var(--white);
    border:thin solid var(--border);
    color:var(--dark-grey);
}

/* Rounding */

.rounded-xl {
    border-radius:1rem;
}

/* Forms */

label {
    font-size:1.1em;
    font-weight:500;
    color:var(--dark-grey);
    font-family:'Roboto Slab';
}

textarea {
    height:150px;
    font-size:1.1em !important;
}

input[type=text] {
    font-size:1.1em !important;
}

/* Sidebars */

.sidebar {
    position:fixed;
    width:100%;
    height:100%;
    top:0;
    right:calc(-100% - 10px);
    background:var(--white);
    z-index:1050;
}

.sidebar-scroll {
    overflow-y:auto !important;
}

.sidebar-active {
    right:0px;
}

.sidebar-header {
    display:flex;
    justify-content: space-between;
    padding:1.75rem 2rem;
}

.sidebar-title {
    color:var(--dark-grey);
}

.sidebar-title h1 {
    font-size:2em !important;
    font-weight: 700 !important;
    color:var(--black);
    margin:0 !important;
    margin-bottom:0.25rem !important;
}

.sidebar-close {
    font-size:1.5em;
    color:var(--dark-grey);
}

.sidebar-body {
    height:100%;
    overflow-y:auto;
    padding:1.75rem;
    padding-top:0;
}

.sidebar-footer {
    padding:1.75rem;
    text-align: center;
}



/* Pills */

.pills {
    display:flex;
    flex-wrap: wrap;
    gap:1rem;
}

.pills-no-wrap {
    display:flex;
    gap:1rem;
}

.pill {
    padding:0.5rem 0.75rem;
    font-size:1.2em;
    background:var(--light);
    color:var(--medium-dark);
    border-radius:0.5rem;
    font-weight:400;
    font-family:'Roboto Slab';
    cursor: pointer;
    white-space: nowrap;
}

.pill.active {
    background:var(--primary);
    color:white;
}

.pill.current {
    background:#ff6600 !important;
    color:white !important;
}

.pill.full {
    display:block;
    width:100%;
}

.pill i {
    font-size:1.25em;
}

.pill-rounded {
    border-radius:2rem;
}

.pill.active {
    background:var(--primary);
    color:var(--primary-text) !important;
    border-color:var(--primary);
}



/* Tabs */

.tabs-no-wrap {
    white-space: nowrap;
}

.tab {
    display:inline-block;
    padding:0.5rem 0.75rem;
    font-size:1.1em;
    background:var(--white);
    color:var(--dark);
    font-weight:400;
    font-family:'Roboto Slab';
    cursor: pointer;
    white-space: nowrap;
    z-index:-10;
    margin-left:0.5rem;
    margin-right:0.5rem;
}

.tab:first-child {
    margin-left:1rem;
}

.tab:last-child {
    margin-right:1rem;
}

.tab.active {
    border-bottom:4px solid var(--primary);
    z-index:1000;
    margin-bottom:-1px;
}



/* Backgrounds */

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

.bg-allergies-pastel {
    background:var(--allergies-pastel);
    color:var(--white);
}

.bg-diets-pastel {
    background:var(--diets-pastel);
    color:var(--white);
}

.bg-size-pastel {
    background:var(--size-pastel);
    color:var(--white);
}

.bg-mode-pastel {
    background:var(--mode-pastel);
    color:var(--white);
}

.bg-custom-primary {
    background:var(--custom-primary);
    color:var(--white);
}

.bg-nutrition-high {
    background:#dd3c3c !important;
}

.bg-nutrition-medium {
    background:#ff9933 !important;
}

.bg-nutrition-low {
    background:#339966 !important;
}

.bg-nutrition-kcal {
    background:#555 !important;
}

.icon-dismiss {
    color:var(--dark) !important;
}



/* Opacity */

.opacity-100 {
    opacity: 1;
}

.opacity-90 {
    opacity: 0.9;
}

.opacity-80 {
    opacity: 0.8;
}

.opacity-70 {
    opacity: 0.7;
}

.opacity-60 {
    opacity: 0.6;
}

.opacity-50 {
    opacity: 0.5;
}

.opacity-40 {
    opacity: 0.4;
}

.opacity-30 {
    opacity: 0.3;
}

.opacity-20 {
    opacity: 0.2;
}

.opacity-10 {
    opacity: 0.1;
}

.opacity-0 {
    opacity: 0;
}

/* Menu courses */

.menu-course-slider {
    border-top:thin solid var(--border) !important;
    overflow-x:auto;
    display:flex;
    justify-content: flex-start;
    gap:0.75rem;
    padding:0.75rem;
}

.menu-course-item {
    background:var(--course-menu);
    color:var(--course-menu-text);
    border-radius:50px;
    padding:0.5rem 1.25rem;
    border:thin solid var(--border);
    white-space: nowrap;
}

.menu-course-item.active {
    background:var(--course-menu-active);
    color:var(--course-menu-active-text);
    border:thin solid var(--course-menu-active);
    font-weight: 600;
}

.menu-items {
    margin-top:1em !important;
    margin-bottom:2.5em !important;
}

.menu-item {
    background:var(--white);
    border-radius:0.5rem;
    padding:1rem;
    cursor: pointer;
}

.menu-item h6 {
    font-size:1.2em;
    font-family: 'Roboto Slab';
    color:var(--bg-headings-dark) !important;
}

.menu-item .price {
    font-size:1.2em;
    font-family: 'Roboto Slab';
    color:var(--bg-headings-dark) !important;
}

.menu-item-not-suitable {
    opacity:0.5;
}

#product {
    display:none;
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:var(--white);
    z-index:3000;
}

.product-info {
    font:1em;
    font-family: 'Roboto Slab';
    font-weight:400;
    color:var(--bg-headings);
}

.nutrition {
    width:100%;
    display:flex;
    justify-content: flex-start;
    gap: 0.75rem;
}

.nutrition-item {
    max-width:500px;
    text-align: center;
    white-space: nowrap;
}

.nutrition-item label {
    font-size:1em;
    display:block;
    margin: 0 !important;
}

.nutrition-item .score {
    width:100%;
    background:var(--medium);
    color:var(--white);
    padding:0.5rem 1rem;
    border-radius:0.5rem;
    margin-top:0.33rem;
}

.allergen-item {
    display:inline-block;
    background:var(--light);
    border-radius:0.25rem;
    padding:0.33rem 1rem;
    margin-right:0.5rem;
    margin-bottom:0.5rem;
}

.allergen-item.empty {
    background:var(--white);
    border:thin solid var(--border);
}



/* Text */

h6 {
    font-size:1em;
    font-family: 'Roboto Slab';
    color:var(--dark);
}

.font-weight-100 {
    font-weight:100;
}

.font-weight-200 {
    font-weight:200;
}

.font-weight-300 {
    font-weight:300;
}

.font-weight-400 {
    font-weight:400;
}

.font-weight-500 {
    font-weight:500;
}

.font-weight-600 {
    font-weight:600;
}

.font-weight-700 {
    font-weight:700;
}

.font-weight-800 {
    font-weight:800;
}

.font-weight-900 {
    font-weight:900;
}



/* Cursors */

.cursor-pointer {
    cursor: pointer;
}



/* Traffic lights */

.traffic-lights {
    float:right;
    display: flex;
    gap:0.25rem;
}

.traffic-light-red {
    width:1.5em;
    height:1.5em;
    border-radius:1.5em;
    background:red;
}

.traffic-light-amber {
    width:1.5em;
    height:1.5em;
    border-radius:1.5em;
    background:orange;
}

.traffic-light-green {
    width:1.5em;
    height:1.5em;
    border-radius:1.5em;
    background:green;
}

/* Scrollbars */

/* Hide scrollbar for Chrome, Safari and Opera */
.no-x-scroll-bar::-webkit-scrollbar {
	display: none;
}
/* Hide scrollbar for IE and Edge */
.no-x-scroll-bar {
	-ms-overflow-style: none;
	overflow-x:scroll;
}