:root{ --h2col:var(--hcol); --hcol-dark: color-mix(in srgb, var(--hcol) 75%, black); --hcol-light: color-mix(in srgb, var(--hcol) 75%, white); } /*//////////////////////////////////////// CUSTOM STYLES ////////////////////////////////////////*/ body.clinical .cOff, body:not(.clinical) .cOn{display: none;} body.client #staffArea, body.client #page_custDetails .tabmenu, body.client #dPrefsSummary > div.btn {display: none !important;} body.client #saTable #saTableHead .numbtn {opacity: 1 !important;} body.companion:not(.staff) #staffArea, body.companion #staffAreaOpener, body.companion #dPrefsSummary > div.btn {display: none !important;} body.companion #saTable #saTableHead .numbtn {opacity: 1 !important;} .mobileOnly{display: none;} .roundbtn.xlarge, .roundbtn.xxlarge{width: 90px; height: 90px; line-height: 90px; } /*temporary overwrite of core.css - remove after MAR 2023 */ /* MENU LIST */ html{background-color: transparent; } body{background:var(--bgcol) linear-gradient(0deg, rgba(100,100,100,0.1) 0%, rgba(0,0,0,0) 60%); overflow-x:hidden; transition: background 500ms; background-size:cover; background-position:center; background-attachment:fixed;} #bodynest{ position:fixed; overflow-y:auto; top:0; left:0; bottom:0; right:0; background:-moz-linear-gradient(top, rgba(0,0,0,0) 31%, rgba(0,0,0,0) 70%, rgba(0,0,0,0.65) 100%);background:-webkit-linear-gradient(top, rgba(0,0,0,0) 31%,rgba(0,0,0,0) 70%,rgba(0,0,0,0.65) 100%);background:linear-gradient(to bottom, rgba(0,0,0,0) 31%,rgba(0,0,0,0) 70%,rgba(0,0,0,0.65) 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 );} .noitalic{font-style: normal;} #progressContainer { position: fixed; left: 0; bottom: 0; padding: .5rem !important; border-top-right-radius: 1rem; width: 150px; padding: 0; background: var(--bgcol); font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; color: var(--txtcol); z-index: 5; } #progressContainer .progress-label { margin: 0 0 4px 0; font-weight: 600; font-size: 10px; } progress { width: 100%; height: 7px; -webkit-appearance: none; appearance: none; border-radius: 8px; box-shadow: inset 0 1px 2px rgba(0,0,0,0.1); overflow: hidden; background: transparent; } .dark progress {box-shadow: inset 0 1px 2px rgba(255,255,255,0.1); } .wrap{flex-wrap: wrap;} progress::-webkit-progress-bar { background-color: transparent; } progress::-webkit-progress-value { background: linear-gradient(90deg, var(--hcol-dark), var(--hcol), var(--hcol-light)); border-radius: 8px 0 0 8px; transition: width 0.3s ease; } progress::-moz-progress-bar { background: linear-gradient(90deg, var(--hcol-dark), var(--hcol), var(--hcol-light)); border-radius: 8px 0 0 8px; transition: width 0.3s ease; } #menulist{width:500px; max-width:90%; margin:25vh auto 50px; text-align:center;} #menulist h1{ margin-bottom:10px; text-shadow:2px 2px 20px #000; background:rgba(0,0,0,0.6); padding:10px; font-size:20px;} #menulist .menu, #menulist .empty:before{ background:rgba(255,255,255,0.9); padding:20px; margin-top:10px; font-size:24px; display:block; transition:all 300ms; border-radius:50px; font-family:roboto; font-weight:bold; color:#222; } #menulist .empty:before{ content:'No menus available'; color:#ccc; } .admin #menulist .empty:before{ content:'No menus available, drag one to here'; } #menulist #extraMenus .empty:before{ content:'No menus created, create one in app'; } #menulist .menu:hover{ transform:scale(1.025); background:#FFF; } #menulist .menu.prefade{ opacity:0; transform:scale(0.8); } #menulist .menuContainer.dragOver{ border:5px dashed #666; } .dragging #menulist .menuContainer .menu:not(.dragging){ pointer-events:none; } /*hacky fix so dragOver on parent is called before dragOver on child*/ #menulist .menu .subtitle{ font-size:13px; color:#999; line-height: 14px; display: block; margin-top:5px} #menuheader{ max-width:90%; margin:4vh auto 21px; text-align:center; } #menuheader .menuconfig{float:left; } #menuheader .menuconfig ul{list-style-type:none; } #menuheader .menuconfig ul li a{display:flex; } #menuheader .menuconfig ul li .itemconfig{ background:rgba(0,0,0,0.6); border-radius:48px; height:48px; width:48px; border:2px solid #fff; border-radius:48px; } #menuheader .menuconfig img{ margin: 9px;} #menuheader .itemconfigtext{margin: 16px 0 0 6px;text-shadow: 2px 2px 20px #000;} #extraMenus{margin-top:50px;} #extraMenus a{opacity:0.8;} #tools{background:rgba(0,0,0,0.5); padding:10px 30px; border-radius:3px; position:fixed; bottom:0; right:0; display:none;} .admin #tools{ display:block; } #tools.admin:before{content:"- ADMIN TOOLS -";display:block; text-align:center; color:#FFF; position:absolute; top:-4px; left:0; width:100%; font-family:Arial; font-size:8px; font-weight:bold; } #imageEditor{display:none;} #imageEditor.on{display:block;} #imageEditor .delbtn{ position:absolute; top:0px; right:20px; z-index:3; background:#333; border-radius:50%; padding:0; font-size:12px; transform: none;} .backgroundphoto{position:fixed; left:0; top:0; right:0; bottom:0; padding:0 10px 10px;background:rgba(0,0,0,0.6); z-index:2} .backgroundphoto:before{content:"Edit your background"; color:#FFF; text-shadow:2px 2px 20px #000; padding:10px; font-size:20px; font-family:roboto; font-weight:bold; text-transform:uppercase; display:block;} .backgroundphoto iframe{width:100%; height:calc(100% - 40px);} /* LOGIN FORM */ #pop { position:absolute; left:50%; margin-left:-200px; margin-top:-200px; width:400px; height:400px; background:#FFF; border-radius:200px; box-sizing:border-box; padding:100px 50px; z-index:10; box-shadow:2px 3px 6px rgba(0,0,0,0.2),0px 0px 0 20px rgba(0,0,0,0.1) inset; display:block; text-align:center; color:#333; top: 50%; transition:all 700ms cubic-bezier(0.68, 0.80, 0.265, 1.30); transform:scale(0.3) rotateZ(-30deg); opacity:0;transition-delay:400ms; } #pop.popLoginMaster{padding: 115px 45px;} #pop.popLoginStaff{padding: 30px 45px;} #pop.popLoginClient #idnoContainer > div{position: relative;} #pop.popLoginClient #idnoContainer #QRscanBtn{position: absolute;margin: unset;right: 8px;top: 8px;color: var(--hcol);width: 40px;height: 40px;line-height: 40px;} #pop.popLoginClient #idnoContainer #QRscanBtn svg{margin: 2px 0 2px;} #pop.popLoginClient #idnoContainer input{padding-right: 50px;} #pop.popLoginClient #idnoContainer input::placeholder { transform: translateX(25px); } #pop.popLoginClient #clientLoginBedNumber{ position:absolute; right:10px; top:70px; } #pop.popLoginClient #clientLoginHeader{margin-bottom: 10px;} #pop.popLoginClient .split label{display: inline-block; margin-right: -2px;} #pop.popLoginClient .split .dropdown::before{content: '';} #pop.popLoginClient .split .drop{max-height: 200px; background-color: #FFF; width: 300px;} #pop.popLoginClient .dropdown.on input::placeholder{ color:var(--hcol)} #pop.popLoginClient .split .drop a{ display: inline-block; width: 33.3%;} #pop.popLoginClient + #logoFooter > img{ position: absolute; height: calc(100% - 30px); top: 15px; right: 30px;} .on #pop{transform:scale(1) rotateZ(0deg); opacity:1} #pop h3 { color:#333; text-align:center; margin:0 0 -10px; font-weight:bold; opacity: 0.9} #pop .btns{margin-top:20px;} #pop p, #pop label, #pop .label { margin:5px 0; line-height:140%; display:block; font-size:8px; text-transform:uppercase; font-weight:bold; } #logoFooter { position:absolute; top:50%; left:0; right:0; height:70px; padding:18px 10%; background:var(--bgcol2); margin-top:-50px; transition:all 500ms; } .on #logoFooter { top:50%; height:200px; margin-top:-100px; padding-top:90px; background-repeat:no-repeat; background-position:center right 60px; background-size:170px; } #logoFooter { color:var(--txtcol); font-size:16px; font-weight:bold; } #logoFooter span { max-width: 250px; display: block; } #staffPin{font-size: 30px;width: 198px; background: transparent!important} #numPad {width:calc(100% - 79px); height: calc(90% - 40px);margin: -5px auto; transform: scale(0.95);} #numPad a{margin:0px 3px 4px; font-size: 20px} #numPad .dummyKey{pointer-events:none; border: 0;background: transparent;} #numPad [type='submit']{margin:0px 3px 4px;} .popLoginStaff .backspace { position:absolute; right:80px; top: 40px; } .popLoginStaff .backspace svg{width: 34px;} #staffPin:placeholder-shown+.backspace { opacity: 0} #res { color:#FFF; background:var(--hcol); padding:15px 30px; margin:auto; font-size:15px; position:absolute;left:50%; margin-left:-170px; border-radius:100px; line-height:120%; z-index: 1; bottom:0; transition:all 400ms cubic-bezier(0.68, 0.80, 0.265, 1.55); transform:scale(0.5); opacity:0.5} #res:empty{display:none; } #res.on{transform:scale(1); opacity:1} /* CUSTOMISE POPUPS */ #checkoutForm { z-index: 5; overflow-y: auto;} .popup.dark .popwindow.clearback{ position: relative; height:90%; padding-top: 130px; background:none; box-shadow: none; color: #FFF; transition:all 300ms;} .popup.dark .popwindow.clearback h3{ font-size: 30px;} .popup.dark .popwindow.clearback .delbtn {margin: 20px -40px;} .popup .confirm #btnConfirm .btn{margin: 0px 6px 0px 6px;} .popup .btnGap #btnConfirm {display: flex;justify-content: center;gap:30px} /* .popup.dark .clearback .delbtn {border:0;font-size:24px;margin: 20px -40px;transition:background 300ms;line-height:36px;} .popup.dark .clearback .delbtn:hover{ background: var(--hcol); } */ .popup.dark .popwindow.clearback .tabmenu.hidden + #tab-eatIn:has(.tabmenu.dropdown.maximised){top:-250px !important;position:relative} .popup.dark .clearback>.page{ position:absolute; width:100%; transition:transform 400ms; } .popup.dark .clearback>.page.on{ transform:translateX(0); } .popup.dark .clearback>.page.on+.page{ transform:translateX(100vw); } .popup.dark .clearback>.page:not(.on):first-of-type{ transform:translateX(-100vw); } .popup.dark .clearback>.page>.tabmenu { transition:all 300ms; position:absolute; width:90%; transform:translate(-50%,-130px) } .popup.dark .clearback>.page>.tabmenu.centered{ transform:scale(1.4) translate(-36%,150%); } #checkoutForm form{ width:550px; margin: 0 auto; max-width: 100%; position: relative; white-space: normal;} #checkoutForm #payment-form{width: 600px;} #msg-errors{margin: -30px 0; opacity:1; transition: all 600ms} #msg-errors:empty{ opacity: 0; height: 0px} #msg-errors:not(:empty):before{ content:'!'; display:inline-block; color:red; border:solid 2px red; width:20px; height:20px; text-align:center; border-radius:50%; line-height:20px; font-size:18px; margin-right:10px; font-weight:900; } #card-element{background:rgba(50,50,50,0.8); padding:20px; margin:30px 0 10px; border-radius:50px; border:4px solid; height:70px;} #card-errors{margin: 20px 0; opacity:1; transition: all 600ms} #card-errors:empty{ opacity: 0; height: 0px} #card-errors:not(:empty):before{ content:'!'; display:inline-block; color:red; border:solid 2px red; width:20px; height:20px; text-align:center; border-radius:50%; line-height:20px; font-size:18px; margin-right:10px; font-weight:900; } #submit:disabled{ cursor:progress; background: #666; } #submit:disabled:after { content:''; border-radius:50%; width:20px; height:20px; border:solid 3px #FFF2; border-left:solid 3px currentColor; animation:spin 1.1s infinite linear; display:inline-block; vertical-align:middle; margin:0 -25px 0 15px; } .phoneDropBtn { position:absolute; left:3px; margin-top:27px; border-width:2.5px; border-right:0; border-radius:50px 0 0 50px; line-height:54px; padding:0 15px 0 8px; } .phoneDropBtn .drop{ text-shadow:none; border-radius:0px 0 0px 40px; margin-left:20px; } .phoneDropBtn .drop a:first-child{ border-bottom:solid 1px #DDD} #summary{ max-width:400px; width:100%; transform: scale(1.2); } .borderTop{ border-top:solid 1px #FFF; padding: 10px} /* #summaryItems{ max-height:calc(100vh - 460px); overflow:auto; min-height: 81px; } */ #summary p{ line-height: 43px; } #summary #summaryItems p{ line-height: 63px; } #summary #summaryItems b{ display: block; word-wrap:break-word;white-space: normal;} #summary #summaryItems p>span{ line-height: 100%; } #summary #summaryItems p>span{ line-height: 100%; } #summary p.smallTxt{ line-height: 20px; } #summary p>span:first-child{ display: inline-block; width:80px } #summary p>span{ display:inline-block; vertical-align:middle; line-height: 130%;} #summary .short p{line-height: 18px;} /*OCT22 44768 caused by too long client notes, limiting width and clip the text*/ #summary #summaryClientNotes, #summary #summaryClient {max-width:400px;} #summary #summaryClientNotes span, #summary #summaryClient span {max-width: 60%;overflow: hidden;text-overflow: ellipsis;white-space: no-wrap;} #couponCode, #summaryDiscount span{color:red;} #checkoutForm label{transition: all 300ms;} #page_custDetails>.tabmenu{ margin:-30px 0 30px; } #worldPayIframe{ display: none; z-index: 99;} .tableGroups { max-height:90%; padding-bottom:50px; padding-top: 30px; overflow-y: auto;} .tableGroups .tabmenu.dropdown {overflow: auto;max-width: 250px;right:10px;height: 459px;line-height: 18px;transform:translateY(-100%);margin-top: 369px;-ms-overflow-style: none;scrollbar-width: none;z-index: 0;min-width: 170px;} @media screen and (max-height:600px){ .tableGroups .tabmenu.dropdown { margin-top: 340px; } } .tableGroups .tabmenu.dropdown.on{z-index:2} .tableGroups .tabmenu.dropdown.on.maximised{ right:auto; max-width:none; width:100%; margin-top:450px; } .tableGroups .tabmenu.dropdown.on.maximised a{ height:65px } .tableGroups .tabmenu.dropdown.on.maximised~.tab{display: none;} .tableGroups .tabmenu.dropdown::-webkit-scrollbar{display: none;}/*hide scrollbar on chrome*/ .tabmenu.dropdown.b.mediumTxt.caps.on{z-index: 1;} .tabmenu.dropdown { display:inline-block; position: absolute; z-index: 1} .tabmenu.dropdown:before {margin: 16px 40%; position: absolute;} .tabmenu.dropdown a{color:#FFF;border:solid 2px #FFF;background:rgba(50,50,50,0.8);border-radius:50px;display: block;line-height: 14px;padding: 0 30px;transition: all 200ms;text-overflow: ellipsis;overflow: hidden;text-align: center;} .tabmenu.dropdown:not(.on) a:not(.on){ opacity: 0; pointer-events: none; } .tabmenu.dropdown:not(.on) a.on{ top:0; right: 0; position: absolute; height: 50px;display: flex; align-items: center;} .tabmenu.dropdown.on a{ height: 50px; background: var(--bgcol); color: var(--txtcol); font-weight: bold; margin-bottom:1px; box-shadow:0px 2px 8px #0008;display: flex; align-items: center;} .tabmenu.dropdown.on a:active{ background: var(--hcol)} /*JUN22 31165 (changed display to flex to allow the correct row wrapping)*/ #tableGroups > .tab.on {display: flex; flex-wrap: wrap; justify-content: center} #tableGroups > .tab.on > a {flex-shrink: 0;} #tableGroups > .tab.on > a:first-child{margin-top: 5px} /*SCROLL DETAIL FOR SORT*/ #scrollDetail{ position:absolute; right:5px; display:none; background-color:#1d76bb; color:white; font-weight:bold; padding:10px; z-index:1; border-radius:50%;display: none;} #scrollDetail.on{ display:none; } /*ALLERGEN ICONS*/ .allergenicon{text-transform:uppercase;font-size:8px;font-weight:bold;display:inline-block; margin:0 2px 3px 2px; text-align:center;min-width:44px;word-wrap:break-word;/* white-space:nowrap; */text-align:center;box-sizing:content-box; max-width:90px; vertical-align:top;} .allergenicon span{ width:34px; height:34px; padding:6px; background:#777; border-radius:50%; vertical-align:middle; display:inline-block; margin-bottom:5px;box-shadow:1px 1px 3px rgba(0,0,0,0.15) inset; white-space:nowrap; letter-spacing: -1px;} .allergenicon svg{width:100%; height:100%; fill:#FFF; } .allergenicon.icon-milk span, .allergenicon.texture6 span{background:#a0c3e6;} .allergenicon.icon-eggs span, .allergenicon.texture3 span{background:#FCCA2B;} .allergenicon.icon-gluten span{background:#A0845A;} .allergenicon.icon-soya span, .allergenicon.texture4 span{background:#62B36C;} .allergenicon.icon-nuts span{background:#9E5738;} .allergenicon.icon-nuts.on{font-size: 8px!important;} .allergenicon.icon-peanuts span{background:#ed4a47;} .allergenicon.icon-celery span{background:#9ec64f;} .allergenicon.icon-mustard span{background:#E0D23D;} .allergenicon.icon-sesame span{background:#E0C791;} .allergenicon.icon-crustaceans span, .allergenicon.texture2 span{background:#f492a2;} .allergenicon.icon-sulphites span, .allergenicon.texture5 span{background:#f7941e;} .allergenicon.icon-fish span{background:#51B5B5;} .allergenicon.icon-molluscs span{background:#6570A8;} .allergenicon.icon-lupin span{background:#B1477D;} .allergenicon.texture7 span{background-color: #444;} .allergenicon.texture1 span{background-color: #777;} .allergenicon.texture0 span{background-color: #FFF; color: #999} .allergenicon.prop span{background:#FFF; border:solid 2px #999;} .allergenicon.prop svg{fill:#777;} /*FOOD LABEL*/ .label{ transform:scale(0.8); } .label h1{text-align: left;text-transform: inherit;} /*PORTIONS*/ .item .portionsHeaders, .item.portionsOn .portionsBlanket{ display:none; position:absolute; width:100%; top:0px; left:0px; } .item.portionsOn .portionsHeaders{width: 84%;left: 8%;top:40%;transform:translateY(-50%);z-index:2;} .item.portionsOn .portionsBlanket{height:100%;background-color: rgba(0,0,0,0.4);} .portionsBlanket span{display: none;} .item.on.portionsOn .portionsBlanket span{color: #FFF;display: block;margin-top: 16px;font-weight: bold;font-size: 17px;text-shadow: 0 0 5px rgba(0,0,0,0.5);} .item.portionsOn .portionsHeaders .portionBtn{background-color:white;color:black;font-size:12px;margin-top:5px;border-radius:30px;transition:all 300ms;padding: 15px 10px; white-space:nowrap;display: flex; align-items: center; gap: 5px;} .item.portionsOn .portionsHeaders .portionBtn:hover{ transform:scale(1.1);} .item.portionsOn .portionsHeaders .portionBtn.prefade{opacity:0; transform:scale(0.8) rotateZ(-2deg)!important; background:#FFF!important;} .item.portionsOn .portionsHeaders .portionBtn >div{ display:inline-block; vertical-align: middle; } .item.portionsOn .portionsHeaders .portionBtn .phName{text-align:left;white-space:nowrap;/* width: 120px; */overflow: hidden;text-overflow: ellipsis;font-weight: bold; margin-right: auto;} .item.portionsOn .portionsHeaders .portionBtn .phCals{text-align:right;white-space:nowrap;/* width:50px; */} .item.portionsOn .portionsHeaders .portionBtn .phPrice{ text-align:right; font-weight:bold; /* width:40px; */ } .item.portionsOn .portionsBlanket{ display:none; position:absolute; } .item.on.portionsOn .portionsHeaders,.item.on.portionsOn .portionsBlanket{display:block;border-radius: 3px;} #disclaimer { display:inline-block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding: 10px 110px 10px 10px; top: 100%; color:#FFF; position:absolute; left:0; width:100%; text-shadow:0 0 2px #000; font-size:13px; max-height: 40px; transition: max-height 300ms, padding 300ms;} .item #disclaimer{display:none;} #disclaimer.on {white-space:normal;padding: 20px 110px 20px 10px;background-color:rgba(0,0,0,0.6);z-index:1;max-height:120px;font-size:16px;line-height:130%;overflow-y: auto;margin: 10px 0;border-radius: 25px;} #disclaimer a{ color:#FFF; border-bottom:solid 1px #FFF; float:right; margin-right:-100px; position: relative;} #kcalDisclaimer {bottom: 5px; position:absolute; left:0;width: 410px;} .portion #kcalDisclaimer { display: none; } .cardHeader{display:inline;} /*JUN22 31771 Hide servings labels and portion name on cards*/ .item .portion .cardHeader .name i {display: none} .item .portion .name .portionName{display: none;} .item.soldOut:after, .portionBtn.soldOut:after { content:'SOLD OUT'; background:#222; color:#FFF; font-weight:900; display:block; transform:rotate(-45deg) translate(-35px, -3px); line-height:24px; height:24px; position:absolute; width:130px; top:0; left:0; } .portionBtn.soldOut {clip-path: border-box;} .portionBtn.soldOut:after {height: unset;width: 180px;top: 10%;right: -30%;left:unset;transform: rotate(-20deg) translate(-35px, -3px);} .unavailable, #unavailable{font-size:22px; padding:50px; margin:20px; color:#CCC; font-style: italic; white-space: normal; text-align: center; font-weight:900; letter-spacing:-0.5px;} /* BANNER */ #topBar{ padding:10px; text-align:center; width:100%; position:fixed; bottom:0; left:0; z-index:3; font-size: 10px; box-shadow:0 -2px 10px rgba(0,0,0,0.5);} #banner{padding: 20px 45px 0;} #banner .backbutton{ float: left; margin:-3px 10px 10px -2px; color:var(--txtcol)} #banner .backbutton:hover{ color:#FFF } #pageTitle {float:left;position:relative;z-index:1; margin:25px 0 0; font-size:34px; line-height: 90%; letter-spacing:0px;text-transform: none;color:var(--txtcol);letter-spacing: -1px;width:32%;text-align: left;/* font-weight: 400; */} .bannerphoto {height: 140px;position:relative;background-repeat:no-repeat;background-position:right;background-size:contain;margin:-10px 0 -20px;z-index: -1;width: 370px;float: right;} .bannerphoto img{ height:100%; width: auto;} #touchHint { position:fixed; z-index:2; left:0; top:0; bottom:0; right:0; background:rgba(0,0,0,0.75); transition:opacity 250ms; opacity:0; pointer-events:none; text-align: center;} #touchHint.on{opacity:1; pointer-events:all;} #touchHint div{position:absolute; top:50%; left:50%; width:400px; margin:-30px -200px; color:#FFF; font-size:32px; text-shadow:1px 1px 20px #000; text-transform:uppercase; line-height:200px; animation:swell 5s infinite; -moz-animation:swell 5s infinite; -webkit-animation:swell 5s infinite; -o-animation:swell 5s infinite;} #touchHint div:before{content:''; display: block; background:#FFF url(media/anim-hand.gif) no-repeat center; width:200px; height:200px; border-radius:50%; position:relative; margin:-115px auto -60px; box-shadow:1px 1px 10px rgba(0,0,0,0.5);} #main{transition:blur 300ms linear 50ms} body.popupOn #main{filter:blur(3px); bottom:0; top:0; left:0; right:0; position: relative;}/*//APR07 -> #33040p */ body.popupOn {overflow-y: hidden;}/*//APR07 -> #33040p */ #results{text-align:center;padding-bottom: 50px;display: flex;flex-wrap: wrap;justify-content: center;} #results.items3{zoom: 133%;} #results.items5{zoom: 80%;} #results .label{ display:none; } #noresults { font-size:50px; color:var(--txtcol); margin:150px 0 100px; display:none; opacity:0.2; } #noresults.on{display:block;} /*MAIN MENU*/ #menu {display: table;padding:0 40px;border-radius: 30px;line-height: 50px;margin: 10px auto 15px;background:var(--bgcol2);clear: both;} #menu a {display:inline-block;font-size: 12px;padding: 0 30px;color:var(--txtcol);text-transform:uppercase;transition:background 300ms;font-weight: bold;} #menu a:hover{background:rgba(0,0,0,0.1);} #menu a.on{ color: var(--hcol); position:relative; border-bottom: solid 3px var(--hcol); margin-bottom: -2px; } #menu a.on:after{content:'';border-style:solid;border-width:7px 5px 0 5px;border-color:transparent; border-top-color: var(--icol); position:absolute;left:50%;margin-left:-5px;bottom: -10px;} #menu a span.counter { width: 25px; height: 25px; line-height: 25px; margin-top: 12px; margin-left: 3px; } .menuContainer{padding-bottom: 50px; margin-bottom: -50px;} .item{display:inline-block;position:relative;width: 280px;height: 280px;margin: 15px;vertical-align:top;box-shadow:1px 2px 6px rgba(0,0,0,0.3);transition:all 300ms;transform:scale(1);display:none;box-sizing: content-box;border-radius: 30px;overflow: hidden;} .item.prefade{opacity:0; transform:scale(0.8) rotateZ(-2deg)!important; background:var(--bgcol)!important;} .item:hover{transform:scale(1.1); box-shadow:1px 1px 10px rgba(0,0,0,0.8); z-index:1; background:#FFF} .item.on{ display:inline-block; } .item h3{position:absolute;color:#FFF;text-shadow:0 0 10px #000;background:-moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 80%);background:-webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.7) 80%);background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.50) 80%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 );padding:10px 35px 20px 15px;bottom: 0;left: 0;right: 0;font-weight: bold; height:80px; overflow:hidden; font-size: 20px;margin: 0;border-radius: 0 0 30px 30px;} .foodphoto{display:block;width: 280px;height: 280px;float:left;background-size:cover;background-position: center;border-radius: 30px;} .foodphoto.default { background-size:50%!important; background-repeat:no-repeat!important; background-position:center!important; background-blend-mode:multiply!important; } .noTouch .item{background:#FFF;} .noPhotos .item{ height: 60px; margin:2px; border-width:3px; border-style:solid; border-radius:20px; box-shadow: none; background: var(--bgcol2); opacity: 0.9;} .noPhotos .item:hover{ opacity: 1;} .noPhotos .item:not(.portionsOn) .foodphoto{display: none;} .noPhotos .item.portionsOn { height: 280px; } .noPhotos .portionsBlanket, .noPhotos .foodphoto{border-radius: 15px!important;} .noPhotos .item .badges { display:none; } .noPhotos .item .cals{ bottom:auto; top:8px; transform: scale(0.65) translate(-19px, -5px); background:rgba(0,0,0,0.1); color: var(--txtcol);} .noPhotos .item .price{ background:var(--hcol); color:#FFF; height:22px; border-radius:50px 0 0 50px; box-shadow: none; width:60px; top:8px; right:0; font-size:15px; transform: scale(0.65) translate(17px, -5px); } .noPhotos .item h3{ display:flex; background:none; color: var(--txtcol); align-items:center; font-size:15px; font-weight: normal; text-shadow: none; padding: 10px 35px 6px; height: auto; letter-spacing: 0; } .noPhotos .item h3>span{text-align: center !important;width: 100%;} .noPhotos .item.soldOut:after{ left:auto; right:-20px; scale: 0.8; font-size:12px;} .item .counter.cat, .cardHeader .counter.cat{display: none;} .noPhotos .item .counter.cat{display: inline-block; transform: translateX(-140%);} .noPhotos .fp_badge.small { width: 30px; height: 30px; } .cals { position:absolute; background:#333; padding:0px 15px; font-size:15px; font-weight:bold; color:#FFF; line-height:22px; border-radius:0 50px 50px 0; bottom:75px; left:0; } .cals:after{position:absolute;/* content:''; */border-style:solid;border-width: 0 0 25px 12px;margin-right: -11px;border-color:transparent transparent transparent #333;right:0;top:0;} .cals span{margin-left:2px;} #cardnest .cals .smallTxt:after { content:' *'; } /*JUN22 38267 added display flex for auto alignment and removed line-height*/ .price{display:flex; align-items:center;justify-content:center;color:#333; position:absolute; font-weight:bold; letter-spacing:-1px; font-size:16px; top:15px; right:13px; width:50px; height:50px; text-align:center; background:#FFF; box-shadow:1px 1px 8px rgba(0,0,0,0.7); border-radius:50%;} .portions.on .price { display:none; } .price .smallTxt.abs{margin: -15px 0 10px;} .allergens, .inpopup{display:none;} .sendEmail { margin-left:-20px; border-radius:0 50px 50px 0; } .quickInput { display:block; margin:70px -19px 30px; width:250px; } .toLibro.sendEmail{position: relative; bottom: 0; left: 0; margin: 10px auto; text-align: center;outline: none!important;} #optionsToLibro{width:95%; height:100%;} #optionsToLibro .option{display: block; width:45%;} #optionsToLibro .option img{width:70%;} #optionsToLibro .msgWarning{opacity:0; color: var(--hcol); font-style: italic;} #optionsToLibro .msgWarning.on{opacity:1} .backbtn { position:absolute; left:-35px; bottom:40px;} .desc{display:none;} /* CARD STYLING */ #card.on .inpopup {display:block;}/* scrolling handled by .itemIcons - avoids nested scrollbars */ #card.on .inpopup.half{width: 50%;/* height:247px */} #card .foodphoto{background-color:#AAA;} #card .foodphoto.default{opacity:0.3;} #cardnest{width: 900px;} #cardnest.label{width:400px; height: 550px; padding:50px 30px; margin: -250px -215px;} #cardnest .foodphoto {width: 390px;height: 390px;position:absolute;top: 7px;left: 7px;z-index: 1;} #cardnest .byo { max-height: inherit; } #cardnest .byo div.round:has(img.foodphoto) { top:-30px; left:-30px; border: 5px solid white; width: 100px; height: 100px; overflow: hidden; z-index: 1; } #cardnest .byo div.round img.foodphoto { width:110%; height:auto; margin:-5px; position: static; } #cardnest .byo #allergensContainer { border-right: 5px solid #DDD; } #cardnest .byo #nutrientContainer { border-left: 5px solid #DDD; margin-left: -4px;} #cardnest .byo div.lgreyback { padding: 10px 30px 10px 20px } #cardnest .byo div.hflex:has(> #nutritionContainer) { padding-right: 10px; overflow-y: auto; max-height: calc(60vh - 70px); } #cardnest .byo h2 { padding-top: 20px; margin-bottom:0; } #cardnest .byo div.round:has(img.foodphoto) { background-color: #d3d3d3;} #cardnest .byo hr { background: #d3d3d3;} #cardnest .byo .fp_badge.logo { width:130px; margin: 0; background: var(--hcol); mask: url(media/components/fp_logo.svg) no-repeat center / contain; } #cardnest .byo hr + .hflex { justify-content: space-between; align-items: center; } #cardnest .byo .pBubble { left: unset; top: 50%; right: -70px; width: 65px; height: 65px; translate: 0 -50% } #cardnest :is(.hflex, .vflex).center { justify-content: center;} #cardnest .byo .drop { overflow: visible; } #cardnest .byo .drop > span.pill { top: -10px; right: 20px; line-height: 18px; } #cardnest .byo .stickyfooter { height:stretch } #cardnest #nutrientContainer { padding-left: 10px; } #cardnest #nutrientContainer .nut { display: flex; justify-content: space-between; font-size: 11px; } #cardnest #nutrientContainer .nut .name { padding-left: 10px; } /* #cardnest #nutrientContainer .nut span.h2col { width: 50px; } */ #cardnest #nutrientContainer .nutgroup { border-bottom: 2px solid #ddd; padding: 10px 0;} #cardnest #nutrientContainer .nutgroup:last-child{border:0;} #cardnest .half:has(> #groupsContainer) { padding-left: 35px; padding-right: 10px; } #cardnest #groupsContainer { max-height: var(--max-height, 100%); min-height:50px; overflow:auto; overflow-x:clip; } #cardnest #groupsContainer [data-group], #cardnest #groupsContainer + div:has(#notesInput) { border: 4px solid #ddd; margin: 10px; } #cardnest #groupsContainer + div:has(#notesInput) { padding: 20px; } #cardnest #groupsContainer + div #notesInput { border: unset; } #cardnest #groupsContainer [data-group]:has(.dropdown.on) { z-index: 9; } #cardnest #groupsContainer [data-group] > span, #cardnest #groupsContainer + div:has(#notesInput) span { padding: 2px 10px; left: 30px; top: -10px; } #cardnest #groupsContainer [data-group] > span:nth-child(2) { left: unset; right: 30px; } #cardnest #groupsContainer [data-group] > div { justify-content: space-between; padding: 10px 10px 10px 35px; } #cardnest #groupsContainer [data-group] .drop { padding: 10px 20px; transform: none; position: fixed; width: max-content; min-width: unset; right: auto; bottom: auto; margin-left: 0; margin-top: 0; z-index: 0; } #cardnest #groupsContainer [data-group] .drop label > div{ margin-left:10px; gap: 5px; } #cardnest #groupsContainer [data-group] .drop .disabled { pointer-events: all; } #cardnest #groupsContainer [data-group] .drop .disabled label::before { content: "\2139"; } input[type="checkbox"]:checked+label:before, .checkbox.on:before { background:#FFF; color:var(--hcol); } #aBox input[type="checkbox"]:checked+label:before, .checkbox.on:before { color:#FFF; background-color:var(--hcol); } #cardnest h3 { font-size:26px; padding:36px 15px 15px 15px; font-weight:900; } #cardnest .desc{display:block; margin:-17px 10px 0; height: 38px; font-size: 14px; font-style:italic; color: #777} #cardnest form input{background: #FFF;} /* .popwindow>.delbtn {border: solid 2px #FFF} */ #cardnest .pBubble {position: absolute; top:170px; left:395px; width:80px; height:80px; background:#222; color:#FFF; border:solid 5px #FFF; transform:translate(-50%);z-index: 1; border-radius:50%; line-height: 100%;} #cardnest .pBubble:empty{display: none;} #cardnest .cals, #cardnest .price { all:unset; display: block; } #cardnest .badges{display: none;} .badges{ top:68px; position:absolute; right:0px; height:40px; background:#FFF; border-radius:10px 0 0 10px; box-shadow:0 1px 10px rgba(0,0,0,0.4); } .badges.s_showFoodprintScores{ scale:0.9; margin:-3px -5px; background:none; box-shadow:none; } .badges .fp_bg{ box-shadow: 1px 1px 8px rgba(0,0,0,0.7);} .badges.s_showFoodProps{ border-radius: 50px 0 0 50px; height: 35px;} .badges .allergenicon { margin:5px 0; min-width: 28px; } .badges .allergenicon:first-of-type{ margin-left:7px; } .badges .allergenicon:last-of-type{ margin-right:5px; } .badges .allergenicon>b{ display:none; } .badges .allergenicon span { width:27px; height:27px; padding:2px; background:#FFF; border:solid 2px #DDD; color:#666; box-shadow:none; } .badges .allergenicon svg { fill:currentColor } .badges.limitClaims{right:85px;height: 80px;width: 80px;background: #fff;border-radius: 50px;overflow: hidden;} .badges.limitClaims img {max-width: 100%; max-height: 100%;} .badges.limitClaims.SFDAHS {right:0px !important; left:25px !important;} #innerCard .fp_badge.default { transform: scale(1.2);margin-top: 15px;} #extraInfo .half .fp_badge.default {margin-top: 20px;}/*51927 52035 fix overlapping badge*/ #cardnest .claimBadges { position:absolute; bottom:40px; left:7px; z-index:1; width:390px; display:flex; justify-content:center; flex-wrap:wrap-reverse; } #cardnest .claimBadges>span { position: relative; display:inline-block; height:80px; width:80px; padding:10px; background:#FFF; border-radius:50px; box-shadow:0 1px 10px rgba(0,0,0,0.4); overflow:hidden; margin:2px; } #cardnest .claimBadges>span img { max-width:100%; max-height:100%; } .item .claimBadges{display: none;} #cardnest .pBubble.small .cals { font-weight:bold; font-size:14px; line-height:15px; } #cardnest .pBubble:not(.small)>div:first-child{ font-size:19px; font-weight:bold; } #cardnest .pBubble:not(.small)>div:only-child .smallTxt,#cardnest .pBubble:not(.small)>div:first-child.cals .smallTxt { display:block; margin-top:5px; font-weight: normal} #cardnest .pBubble:not(.small)>div>b{ font-size:8px; margin-bottom:-2px; display:block;} #cardnest .cals { font-size:11px; line-height:11px; margin-top:3px;} #cardnest .medText {font-size: 10px!important;} .notesHist { margin:5px -30px; height:116px; overflow-y:auto; } .notesHist>div{margin: 0 0 3px; padding: 0 0 0 25px; line-height: 35px; height: 35px;} .notesHist>div>.btn{ margin:-3px 0 0 10px; transform: scale(0.7); box-shadow: none!important;} .itemActions {display:none;position:absolute;bottom:25px;right:25px;width: 425px;text-align:right;} #cardnest .itemActions{display: block;} .itemActions .librobtn svg { color:#F60; width:25px; margin:0 10px 0 -25px; } .itemActions .librobtn:hover svg { color:#FFF; } form.editing .hideOnEdit, form:not(.editing) .showOnEdit{display:none;} /* FORM ELEMENTS */ form.page2 { padding-top:30px; box-shadow:4px 0 6px #666; } .updownbox{position: relative; margin:5px auto 30px; width: 180px;height:60px; text-align: center;} .updownbox input {display:inline-block;height: 60px; width: 60px; line-height: 60px;text-align:center;font-size: 26px;color: #333;font-weight: 900;border: 0; border-top: solid 3px #DDD; border-bottom: solid 3px #DDD; border-radius:0} body.staff .updownbox { margin: 5px auto; } .updownbox button { position:absolute; top:0; width:60px; color:#888; font-size:20px; background:transparent; height:100%; overflow:hidden; border-radius:60px 0 0 60px; border:solid 3px #DDD; left:0; padding-left:12px; font-weight:900; } .updownbox button:last-child{ border-radius: 0 60px 60px 0; left:auto; right: 0; padding: 0 12px 0 0;} .updownbox button:active{ background:var(--hcol); border-color: var(--hcol); color:#FFF} .defaultOptions { margin: 15px 0 15px; display: block; } form label{ margin: 5px auto; } form .label{} form input { display: block; height:60px; background:rgba(50,50,50,0.8); border:solid 3px #DDD; border-radius:60px; text-align:center; font-size:16px; line-height:140%; color:#333; transition: background 500ms, color 500ms} form input:focus, form input[value]:not([value='']), form.whiteback input{background: #FFF;} form input:focus{color:var(--hcol)} form .split>label input{border-radius:0; border-left: 0; border-right: 0} form .split>label:first-child input{border-radius:50px 0 0 50px; border-left:solid 3px #DDD;} form .split>label:last-child input{border-radius:0 50px 50px 0; border-right:solid 3px #DDD;} form .footer{margin-top: 30px;} form .footer .btn+.btn{margin-left: 10px;} /*CARD INTERNAL PAGES */ .page2{display: none; } #cardnest .page2{display: block; border-radius:0 30px 30px 0; width:50%;background:#FFF;height:100%;z-index: 0;position:absolute;top:0;left: 0;transition: transform 300ms, opacity 300ms; pointer-events: none; box-shadow: 6px 0 6px #333; opacity: 0; transform: scaleX(0.7), scaleY(0.9);} #cardnest .page2:not(#libroPage0){padding-right: 30px; } #cardnest.on .page2.on{transform: translateX(100%);opacity: 1;pointer-events: all;} body.staff #cardnest .page2 h3{ padding: 10px 15px 15px 15px; } input+.delbtn{margin: -50px 8px;} input[value='']+.delbtn{display: none;} /* CARD SLIDING: */ #card.left #cardnest{ margin-left: -140%;} #card.right #cardnest{ margin-left: 55%;} #cardnest.bigslide { height:900px; width:900px; margin:-450px; } #cardnest.bigslide .foodphoto{width: 100%; height: 100%; } /* MORE INFO PANEL */ #innerCard{ overflow: hidden; height:408px; min-height: 408px; width: 101%; border-radius:0 0 12px 0;} #extraInfo,#mainInfo .scrollbtn{display: none;} #innerCard #extraInfo,#innerCard #mainInfo .scrollbtn{display: block;} #innerCard .infoItem{ padding-left:50%; position: relative; display:flex; flex-direction:column; height:calc(100% - 52px);} #innerCard .infoItem>.cardHeader, #innerCard .infoItem>.desc{ flex-shrink:0; } .itemIcons{ display:none; } #innerCard .itemIcons{ display:block; flex:1 1 auto; min-height:0; overflow-y:auto; margin-top:-10px; } #innerCard .itemIcons:has(>.b.dotted.outlined){ display:flex; flex-grow: 0; height:stretch; justify-content: center; align-items: center; } #innerCard .itemIcons >.b.dotted.outlined { padding: 5px; } #innerCard #extraInfo { width:100%; vertical-align:middle; height:415px; overflow-y:scroll; padding-bottom:110px;} #innerCard #extraInfo .half { display:inline-table; width:50%; vertical-align:top;} #extraInfo #EUbopLabel,#extraInfo #UKbopLabel, #extraInfo #SAbopLabel{ width:350px; max-width: 95%; font-size: 13px; font-size:12px; font-family:Roboto;} #EUbopLabel.lab table, #UKbopLabel.lab table {border: solid 4px #CCC;} #EUbopLabel.lab table td, #UKbopLabel.lab table td{border:solid #DDD 1px;} .nutriBadges{height: 60px;} .nutriBadges .EUNsLabel { box-shadow:0 1px 20px #DDD; padding:3px 24px; border-radius:50px; margin-top:5px; } #innerCard .ingList{ font-size: 14px; line-height: 140%; padding-right: 30px;} #innerCard .alBorder span{border:1px solid; padding:3px 10px; display:inline-block; margin:8px 0 0; border-radius:50px; } #innerCard #mainInfo{height:408px;transition: all 0.3s;} #innerCard.showExtraInfo #mainInfo {margin-top:-480px; margin-bottom: 65px;} #innerCard.showExtraInfo .cals { display:none; } .allergens h5{margin-bottom: 3px;} #innerCard #nClaims{display: inline-block!important; width: 100%;}/* height:100% removed - was for the old inner scrollbar, would now clip against the scrolling .itemIcons */ #nClaims.half{float: right;width: 50%!important;} #nClaims.half #claimsbox{float: left;} #nClaims.half #claimsbox h4{display:flex;width:auto;align-items:center;gap:0;padding-right:10px;} #nClaims { text-align: left; display: none;} #claimsbox h4 { display:inline-block; width:50%; font-size:10px; margin:0; font-weight:777; color:#333; text-transform:uppercase; text-align:left; } .claimText:before{content:'\2605'; padding-right: 5px; position: relative;} .claim span{ display:inline-block; width:32px; height:32px; color: var(--hcol); flex-shrink: 0; } .claim .icon{fill:#7b9e35; background:#FFF; width:32px; padding:5px 0 0 0; margin:0} #ingList{font-size: 12px;} .item .scrollbtn{display: none;} .scrollbtn { position:absolute; left:145px; bottom:25px; z-index: 1; } .scrollbtn svg{ transform:rotate(-90deg); transition: transform 300ms} .scrollbtn.on svg{transform:rotate(90deg); } /* #innerCard{ overflow: hidden; min-height: 430px; width: 50%;} */ .allergenicon.prefade{opacity:0!important; transform:scale(0.8);} /* #orderBar{ position:fixed; bottom:0; left:0; right:0; background:#000; height:100px; border-top:solid 5px #444; z-index:5; color:#FFF; padding:20px 30px; transition:height 500ms} */ #dPrefsSummary { position:absolute; top:10px; left:50%; z-index: 1; padding:15px 40px 0px; border-radius:50px 50px 0 0; width:480px; text-align:center; transform:translateX(-50%); border-bottom:0; box-shadow:0 -5px 8px rgba(0,0,0,0.15); background:linear-gradient(0deg, rgba(255,255,255,0) 20%, rgba(255,255,255,0.04) 100%);} #dPrefsSummary>svg{ margin-top:-2px; } #dPrefsSummary>.btn{ position:absolute; left:20px; top:10px; } #dPrefsSummary>.delbtn{ right:20px; left:auto; z-index: 1} #dPrefsSummary>.btn.on{ background:var(--hcol); } #dPrefsSummary.empty .delbtn, #dPrefsSummary:not(.empty) #gTranslate{ display: none; } /* #dPrefsHead:empty:before, #aBox.on:before{content:"DIETARY REQUIREMENTS";} */ #aBox:not(.client)+#dPrefsSummary>.dropdown{display: none;} #dPrefsSummary .drop>h4{ margin-top: 10px; } #clientNotes{width:350px; height: 65px; margin-bottom: -17px} #aBox { position:absolute; font-size:14px; top:0px; padding-top:40px; left:50%; width:85%; height:124px; overflow:hidden; text-align:center; transition:height 300ms; color:var(--txtcol); transform:translateX(-50%); } #aBox.half{ width:50% } #aBox.on{ color: #444; margin-top: -5px;} #aBox.on .tab { width: 50%; float: right; } #aBox.on.half .tab{ width:100% } #aBox.on.half .tab+.tab{ display:none; } #aBox:not(.on) *{pointer-events: none;} #aBox:not(.on) #dietHint.on , #aBox:not(.on) #tab1.on , #aBox:not(.on) #tab2.on{pointer-events: all !important;} #aBox:not(.on) #tab1.on , #aBox:not(.on) #tab2.on{max-width:235px; height:80px; overflow:auto;} #page_custDetails.on a{z-index:1 !important} /* #aBox.on:before { position:absolute; left:50%; display:block; padding:26px; color:#444; top:0; font-weight:900; transform:translateX(-50%); } */ #aBox .dietary{display:none;} #aBox.on .dietary { display:block; position:absolute; left:50%; padding:0 12%; top:20px; white-space: nowrap; font-weight:900; transform:translateX(-50%); line-height:40px; font-size: 14px; } #aBox:not(.half).on #tab1{ border-left: solid 7px #F5F5F5; } #aBox .allergenicon{ transition:all 300ms; opacity:0; width:0; min-width: 0; margin:0; pointer-events:none;} #aBox .allergenicon.on, #aBox.on .allergenicon{width:auto; opacity:1; margin:0 5px; border-radius: 15px;} #aBox .allergenicon span{width:38px; height:38px; border:solid 2px #EEE; line-height:25px; font-size:15px; transition:border 300ms;} #aBox .allergenicon:hover{background:#E9E9E9;} .hasTouch #aBox .allergenicon:hover{background:transparent;} #aBox:not(.on) a, #aBox:not(.on) .btn, #aBox:not(.on) label, #aBox:not(.on) .pillhead, #aBox:not(.on) #patientInfo{display:none;} #aBox:not(.on) .allergenicon.on, #aBox:not(.on) .tag.on, #aBox:not(.on) .tab{display:inline-block; vertical-align:top; margin-top:5px; } #aBox:not(.on) .tag.on{ background:var(--bgcol2); color:var(--txtcol); box-shadow:none; padding:0 20px; line-height:25px; margin-top: 20px;} #aBox:not(.on) .exclamationTag.on{line-height: 15px;margin-top: 10px;} #aBox:not(.on) .spacer{display:none;} #aBox.on .tag{margin: 2px} #aBox.on .tag.exclamationTag{display: none !important;} #aBox .tag.clientTag{display: none;} #p-s_showMayContain+label{margin-top:15px; max-width: calc(100% - 100px);} .subAllergens{ display: none; } .subAllergens.on { display: block; } .subAllergens a { color: #444 ; font-size: 10px; text-transform: uppercase; font-weight: 900} #aBox:not(.half) .subAllergens { margin-left: 40px; } #sub-c-nuts.subAllergens { margin-left: 70px; } #aBox:not(.half) #sub-c-nuts.subAllergens { margin-left: 120px; } .subAllergens .scroll { position: absolute; margin-top:20px; } .subAllergens .scroll:before { content: ''; border-style: solid; border-width: 0 6px 7px 6px; border-color: transparent transparent #FFF transparent; position: absolute; top: 34px; left: 37px; z-index: 2; } .subAllergens ul { overflow-y: auto; max-height: 220px; background: #FFF; border-radius:20px; width: 160px; list-style: none; position: absolute; margin-top: 40px; margin-left: 17px; box-shadow:0 5px 30px rgba(0,0,0,0.3);z-index: 1; } .subAllergens ul li { text-align:left; padding:0 12px; line-height:40px; } .subAllergens ul li svg { opacity:0; width:27px; height:27px; margin-right:10px; color:var(--hcol); transform: scale(0.8); transition: transform 300ms, opacity 300ms} .subAllergens ul li.on svg{opacity: 1; transform: scale(1);} .subAllergens ul li:hover { background-color: #E9E9E9; } .subAllergens ul li.on { background-color: #EEE; } #aBox.on {height:fit-content;min-height: 750px;max-height: 100vh;background:#FFF;padding:41px 10px;box-shadow:1px 1px 15px rgba(0,0,0,0.7);z-index:3;border-radius: 0 0 40px 40px;} #aBox.on .allergenicon{font-size: 10px; padding: 9px 11px; margin:1px; pointer-events:all; vertical-align: top;} #aBox.on .allergenicon span{width:52px; height:52px; line-height:37px; transition:opacity 500ms} #aBox.on .allergenicon.textureicon span{ text-indent: -5px;} #aBox.on .allergenicon.textureicon:not(.enabled){opacity:0.3; pointer-events: none;} #aBox.on .allergenicon.on{ background:#CCC; color:#222; border-radius:10px;} #aBox.on .allergenicon.on span{ border:solid 3px #FFF; box-shadow:1px 1px 5px rgba(0,0,0,0.15);} #aBox.on .allergenicon b, #aBox.on .delbtn, #aBox.on .applybtn, #aBox.on .revertbtn{display:block;} .tag.on{ background-color: var(--hcol); box-shadow:inset -2px 3px 2px #0002; transform:scale(0.95)} #aBox.on .applybtn, #aBox.on .revertbtn{ position:absolute; bottom:1px;right:1px;width:80px;height:80px;line-height:90px;box-sizing:border-box;padding: 0 0 0 10px;border-radius: 100% 0 40px 0px;font-size: 10px;font-weight:bold;text-transform:uppercase;} #aBox.on .revertbtn { right:auto; left:1px; } #aBox.on .applybtn:hover, #aBox.on .revertbtn:hover{background:var(--hcol); color:#FFF} #tab2 .delbtn svg{margin: -1px 2px 0 0;} #aBox:not(.client) #patientInfo {display: none;} #aBox.on #patientInfo { position:absolute; right:20px; } #patientInfo svg { margin:19px 2px 0px; width:16px; } #aBox #tags{max-height:170px; overflow-y:auto;} #aBox:not(.on) #tags{display: inline-block;} #dietHint, #aBox.on #dietHint.on{border-radius: 50px; color:#FFF; margin:0 auto; width:130px; display:none;} .btn#dietHint.on{display:block; margin-top: 10px;} /* BASKET */ #basket { position:fixed; bottom:0; background:#FFF; width:80%; padding:15px; left:50%; margin-left:-40%; border-radius:30px 30px 0 0; box-shadow:0 -2px 10px #0005; height:70px; z-index:2; line-height:40px; display:flex; flex-wrap:nowrap; transform: translateY(120%); opacity: 0; pointer-events: none; transition: transform 300ms} #basket.on{ transform:none; opacity: 1; pointer-events: all;} #tableNo { position:absolute; top:-13px; transition:all 300ms; left:-50px; } #tableNo.empty .heading{display:block; letter-spacing: normal; margin-top:-5px; color:var(--hcol); font-size:12px; } #aBox #tableNoBtn .heading:empty:before { content:"CHOOSE..."; display:block; letter-spacing: normal; color:var(--hcol); font-size:10px; } #basket .btn{margin-left: 5px;} #basket #orderContent #orderHistory>svg{ margin: 0 0 2px -2px; } #basket #orderContent #orderHistory{margin-right: 15px;} #basket #orderContent #orderHistory .counter{bottom: 0px;right: -5px;width: 15px;height: 15px;line-height: 16px;font-size: 10px;} #card.popup.on:has( .byo) ~ #basket {z-index: -1;} #dueDay{margin-left: -2px;} #dueDay{color: #222} #orderDue a .hcol{ display:inline-block; min-width:35px; } #orderDue .drop>button.hback{position:relative; left:50%; transform:translateX(-50%); margin:0px 0 -10px;} #basketFlag { background:var(--hcol); color:#FFF; border-radius:50px; line-height:24px; padding:0 20px; box-shadow:1px 2px 5px rgba(0,0,0,0.5); top:0; font-size:12px; font-weight:900; position:absolute; left:150px; transition:all 500ms; pointer-events:none; opacity:0; } #basketFlag:before{content:'▼'; position: absolute; color: var(--hcol); bottom: -15px; } #basketFlag.on{ top: -40px; opacity: 1;} #basketCounter{position:fixed; z-index: 2; pointer-events: none; opacity: 0; margin-left: 220px!important; transition: opacity 1500ms, transform 1500ms; transform:scale(0.4) translateX(-30px);} #basketCounter.on{ transition: opacity 250ms, transform 250ms, top 300ms; opacity: 0.95; transform:scale(0.9)} #basketCounter:before{ content:'+'} #orderContent{text-align: center; display: inline-flex; flex-grow: 1; width: calc(100% - 600px); margin-left:50px;} #orderContent .empty{color: #BBB; font-size: 22px;letter-spacing: -1px;font-style: italic;} #tableNo.hidden+#orderContent{margin-left: 20px;} #orderContent .empty{ display:block; text-align:center; width:100%; } #orderContent .notempty{ font-size:10px; color:#333; margin:0 10px 0 -10px; width:70px; font-weight:900; line-height:15px; transform:translateY(-50%); top:50%; position:relative; height:max-content; } #orderContent:empty~#clearBasketBtn { display: none;} .summaryItem { display: inline-block; width:60px;height:60px;border-radius:50px;margin:-10px 5px;background-size:cover;position:relative;box-shadow:1px 1px 5px #333;border:solid 2px #FFF; transition:transform 200ms} .summaryItem.prefade{ transform: scale(0.2)} .summaryItem:hover{ transform: scale(1.1)} .summaryItem .counter{ bottom:-2px; right:-5px;} .summaryItem .counter[data-servings=1]{ display:none} #mobilePanel{display: none;} .popwindow .animIcon{width:120px; margin:90px 0 10px; } #customDuePop .popwindow{padding: 30px 50px} #customDuePop .flatpickr-input { width:250px; position:absolute; top:0; left:50%; transform:translate(-50%,-50%); } #customDuePop .flatpickr-calendar { margin-top: 80px; } #customDuePop .hsplit2+.hsplit2{ height:calc(100vh - 70px); max-height:500px; overflow-y:auto; overflow-x:hidden; margin-right:-100px; padding-right:50px; } #customOrderSlots{ column-count:3; } #customOrderSlots>button{margin: 2px 1px; display: block; width:133px;} #customOrderSlots:empty{column-count:auto; } #customOrderSlots:empty:before{ content: "No order times are currently available on the selected date"; display: block; font-size: 28px; color: #AAA; text-align: center; margin-top: 200px} #customOrderSlots>button>.xsmallTxt{ position:absolute; transform:translateY(-13px); width:100%; left:0; pointer-events:none; opacity: 0.8; } /* #customOrderSlots>button:hover>.xsmallTxt{ color:#FFF;} */ /*FOOTER*/ #footer{position:relative; bottom:20px;left:0;right:0;padding:10px 20px; color: #BBB;} #status { color:var(--txtcol); transition:opacity 1s; max-width:250px; bottom:0; left:0; position:fixed; line-height:20px; opacity:0.9; text-shadow:0 1px 4px var(--bgcol); padding:10px; z-index: 99} #status:has(#pendingOrderCount){ background: var(--bgcol); border-top-right-radius: 1rem; } #status:not(.on){opacity:0} #status:hover{ opacity:1 } #status .spinner{ margin-right: 5px;} #status .spinner.small, .spinner.small:before {width: 9px;height: 9px;border-width: 3px;} #status svg{ width:16px; margin-top:-5px;} #status #pendingOrderCount {display: block; width: 60px; text-wrap: pretty; font-size: 9px;} #status #pendingOrderCount::before {content: attr(data-pending); font-size: 14px;} #footer .libroBanner{ display: none; position:absolute; width:100%; background-color:#333; top:0px; margin-left:-20px; border-top:2px solid; height:40px; z-index:1; box-shadow: 0 -2px 10px #000; } #footer .libroBanner div{ line-height:38px; color:#FFF; padding:0px 8px; float:left; display:inline-block; } #footer .libroBanner .libroIcon{ background: #222 url(appmobdev/media/logo-white.png) center/80px no-repeat; width:100px; height: 40px;} #logo { display:inline-block; height:22px; width:100px; vertical-align:middle; margin:-8px 0px 0 2px; background:url(media/logo-quickdish.svg) no-repeat; background-size:contain; } /* .dark #logo {background-image: url(media/logo-invertedx22.png);} */ /* MOVE BED POPUP */ .col {display: flex; flex-direction: column; gap: 5px;width: 100%;align-items: center;} .row {display: flex;gap: 5px; align-items: center; justify-content: center;width: 100%;} #offlineBody{min-height: 250px;justify-content: center;align-items: center;flex-direction: column; padding: 10px; gap: 15px;} #offlineBody .btn{min-width: 200px;} #checkoutBody {min-height: 250px;justify-content: start;align-items: center; flex-direction: column;} #checkoutBody > div:first-child, #moveBedBody > div:first-child { height: 70px; min-height: 70px; padding-bottom: 10px; margin-bottom: 20px; border-bottom: solid 3px #EEE; } #moveBedBody > div:nth-child(2), #checkoutBody > div:nth-child(2){ position: relative; } #moveFooter, #checkoutFooter { margin:40px 0 10px; justify-content: space-between;} #checkoutDate{ width: 110px;} #moveBedBody {flex-direction: column;justify-content: start; align-items: center; max-height: calc(100vh - 270px);overflow-y: auto;} #moveBedBody.on,#offlineBody.on,#checkoutBody.on{display: flex;width: 100%; height: 100%;} #moveBedBody > div, #checkoutNote {width: 100%;} #moveBedBody .tabmenu {top: -45px; left: 50%;transform: translateX(-50%); transform-origin: center;overflow:auto;max-height:205px;}/*//Divya//#62267//added overflow & height*/ #moveBedBody .tabmenu.dropdown:before{ z-index: 2; top: 20px; right: 17px; margin: 0; } #moveBedBody .tabmenu.dropdown a{ justify-content: center; } #moveBedBody .tabmenu.dropdown:not(.on) a.on{ right: auto; transform: scale(0.9);} #moveBedBody .tabmenu.dropdown a.on{ background: var(--hcol); color:#FFF; position: relative; } #moveBedBody .tab .btn {transform:scale(0.7); margin:0 -15px -35px;} #moveBedBody .tab .btn.selected, #moveBedBody .tab .btn:hover{background: var(--hcol);color: white;} #moveBedBody .tab>.btn:first-child {margin-top: unset;} #moveBedBody .tab .btn .smallTxt {display: none;} #moveBedBody .tabmenu.dropdown:not(.on) a:not(.on){display: none;} #moveBedBody .tab.on {margin: auto;margin-top: 15px;width: 80%;display: flex;flex-wrap: wrap;justify-content: center;align-items: center;gap: 10px;} #moveBedBody .mealTicks, #moveBedBody .mealTicks + .pause {display: none;} #moveFooter{margin-top: 70px;} /*ORDER HISTORY POPUP*/ .orderHistoryPop .innerCard {padding:24px;min-height: 100%; width: 100%; overflow-x: auto;} .orderHistoryPop h3 {font-weight: bold;letter-spacing: normal;} .orderHistoryPop .ordersContainer {display: flex; align-items: start; gap: 15px;width: 100%;padding: 20px 0px; overflow-x: auto;} .orderHistoryPop .order{display: flex;flex-direction: column;flex-wrap: wrap;max-width: 200px;justify-content: center;align-items: center; margin: 0 auto; transition:transform 300ms;} .orderHistoryPop .order:hover{ transform:scale(1.05);} .orderHistoryPop .order:active{ color:var(--hcol); } .orderHistoryPop .orderItems+span{ transform:scale(0);transition:all 300ms!important; position: absolute; margin-top: -45px; } .orderHistoryPop .orderItems.prefade+span{ transform:scale(1); } .orderHistoryPop .order .xlargeTxt {display: block; margin: 5px 0;} .orderHistoryPop .orderItems {flex-wrap:wrap;pointer-events:none; width: 150px;min-height: 150px;margin: 5px;padding: 5px;display: flex;justify-content: center;align-items: center;border-radius: 100%;background: #eeeeee;} .orderHistoryPop .orderItems .counter {bottom: unset;} /* STAFF AREA POPUP */ #staffArea{z-index: 5} #staffArea .popwindow.clearback{ padding-top: 100px;} #staffHeader { top:0; position:fixed; width:calc(100vw - 100px); left:50%; transform:translate(-50%,0); max-width: 98%;} #staffHeader #offlineBtnContainer { width: 0; margin-left: 1rem; float: left; padding: unset; .track { width:100px; height:38px; border-radius:19px; border:2px solid white; background:transparent; display:flex; align-items:center; position:relative; cursor:pointer; transition:background-color 0.3s ease; box-sizing:border-box; } .thumb { width:30px; height:30px; background:white; border-radius:50%; position:absolute; top:2px; left:4px; transition:transform 0.3s ease; display:flex; align-items:center; justify-content:center; } .track.off .thumb { transform:translateX(59px); } .icon { width:16px; height:16px; background:black; mask:url("data:image/svg+xml;utf8,") no-repeat center / contain; } .label { flex:1; text-align:center; color:white; font-weight:bold; font-size:14px; pointer-events:none; } } #staffArea>.popwindow>h3{margin-bottom: 20px} #staffArea>.popwindow>.tabmenu{ margin-top:-35px;} #dayName, #saTableDate{display: inline-block; width: 130px; vertical-align:middle;} #dayName .spacer, #saTableDate .spacer{margin: 5px auto;} #allMealsBtn{ position:absolute; left:5px; z-index: 1} .largeTicks #allMealsBtn{background: var(--hcol); border-color: transparent;} #staff_TableGroups .spinner:not(.prefade){transition:all 300ms 500ms!important;} .tableGroups .roundbtn { vertical-align:baseline; margin:5px; transition: all 300ms; } .tableGroups .roundbtn:not(:active){ background:#FFF; color: #444; } body.clinical .tableGroups .roundbtn.vacant{color: #BBB; transform: scale(0.8);} .tableGroups .roundbtn:not(.orderingAllowed) .pause, .tableGroups .roundbtn.orderingAllowed .mealTicks {display: none;} .tableGroups .roundbtn.orderingAllowed .smallTxt { width: 50%; margin: -3px 22px; padding-top: 1px; } /* body.clinical .tableGroups .roundbtn.vacant .heading:before { content:'EMPTY'; font-size:12px; display:block; line-height:18px; top:-6px; position:absolute; width:55px; color:#FFF; background:var(--hcol); margin:0 17px; border-radius:50px; } */ .mealTicks, .tableGroups .roundbtn.orderingAllowed .pause { position:absolute; bottom:-5px; line-height:100%; left:0; text-align:center; width:100%; transition: transform 300ms;} .largeTicks .mealTicks{transform: scale(1.7);} .mealTicks .counter{ position: static; display: inline-block; margin: 0 -1px} .mealTicks .counter:not(.on){display: none;} .mealTicks .counter:before{content: '✓';} .mealTicks .counter.greyback:before{content: 'x'; font-size: 80%} .mealTicks .counter.greyback{transform:scale(0.8); color:#777;} .mealTicks .companion.counter:before{content: '✓✓' !important;} .mealTicks .companion.counter.greyback:before{content: 'x' !important; font-size: 80% !important} .flatpickr-calendar.inline { display:block; position:static; margin:40px auto; transform:scale(1.23); background:transparent; overflow: hidden!important;} #saDateInput+input { margin:50px auto 0; width:120px; } /* STAFF AREA BED POPUP */ #saTable{z-index: 6; text-align: center;} #saTable .popwindow.half.on {width: max(50%, 650px)!important;min-width: fit-content;} #saTableDateControl{ position:absolute; top:0; left:50%; width:300px; transform:translate(-50%,-80px); } #saTableHead{ display:flex; justify-content: center; flex-wrap:nowrap; padding: 10px 0} #saTableHead>div{ display:inline-flex; justify-content: center; width:33%; padding-top: 10px;} #saTableHead button{ margin: 0 5px; flex: none;} #saTableHead button:not(.small){ margin-top:-10px; } #saTableHead button svg{ width:24px } #saTableHead.vacant #saTableNo.hcol{color:#999} #saTableHead:not(.vacant)>.numbtn{ box-shadow: inset 0px 0px 0px 4px var(--hcol); } #saTableHead>:nth-child(1) { position:absolute; left:-20px; margin:0; z-index:1; top:0px; } #saTableHead>:nth-child(2) { margin:0 -20px 0 20px; } #saTableCheckIn svg {transform: rotate(-90deg);} #saTableCheckOut svg {transform: rotate(90deg);} #saTableCheckOut:not(.hidden)+#moveBedBtn, .vacant #moveBedBtn{display: none;} #saTableHead>:nth-child(3) { width: 250px; } #saTableHead>:nth-child(3)>span { width: 110px; } #saTableVacant{padding-top: 10px;} #saTableClient{margin-top: -5px;} #saTableClient svg{ margin-top: -6px;} #saTableCName{line-height:13px; display:block;} #saTableCIdno, #saTableCIdno:empty+#saTableCName{ color: #333; white-space:nowrap;} #saTableHead.vacant #saTableClient, #saTableHead:not(.vacant) #saTableVacant, #saTableVacant em:empty, #saTableBody:has(.tab) + #saTableAlert{display: none;} #saTableAlert{position: absolute;bottom: 20px;height: 65px;z-index: 10;background: white;border-radius: 100vw;left: 15px;right: 15px;border: 5px solid var(--hcol);display: flex;align-items:center;padding: 0 20px;color: var(--hcol); } #saTableAlert.orderingAllowed{bottom:-30px} #saTableAlert.orderingAllowed .smallTxt{display: none;} #saTableAlert.orderingAllowed .info{border-radius: 100%; border: 4px solid var(--hcol);width: 33px; height: 33px;} #saTableAlert svg {width: 38px; height: 38px;} #saTableAlert.orderingAllowed .pause, #saTableAlert:not(.orderingAllowed) .info{display: none;} #saTableAlert #alertContent{margin: auto;} #saTableBody{display: flex; padding: 50px 0 30px} #saTable .oBlock{ flex: 1; display:flex; flex-direction:column; min-height:200px; position: relative;} #saTable .oBlock .grow{ align-items:center; flex-direction:column; justify-content:center; display:flex; margin-bottom:20px; } #saTable:has(#saTableAlert:not(.orderingAllowed):not(.hidden)):not(:has(#saTableBody .tab)) .oBlock .footer {pointer-events: none; visibility: hidden;} #saTable .oBlock.free .finished, #saTable .oBlock.free .ordered, #saTable .oBlock.ordered .finished, #saTable .oBlock.ordered .free, #saTable .oBlock.finished .ordered, #saTable .oBlock.finished .free, #saTable .oBlock.expired .finished, #saTable .oBlock.expired .ordered {display: none;} #saTable .oBlock.finished, #saTable .oBlock.finished .hcol{ color: #888; } #saTable .oBlock.expired{filter: grayscale(); opacity: 0.7;} #saTable .oBlock.expired .free button{ pointer-events: none; /*color:transparent;*/ text-shadow: none;} #saTable .oBlock.expired .free button:before { /*content:"Closed";*/ color:#FFF; position:absolute; width:100%; left:0; padding:0 20px; } #saTable .spinnerCover{position:absolute; background:#FFF; width:100%; height:180px; margin-top:50px; padding-top:25px;} /*#saTable .oBlock.free .footer .expired{filter: grayscale();opacity: 0.7;} #saTable .oBlock.free .footer .expired button{ pointer-events: none; color:transparent; text-shadow: none;} #saTable .oBlock.free .footer .expired button:before{ content:"Closed"; color:#FFF; position:absolute; width:100%; left:0; padding:0 20px;}*/ #companionOrderDetails.popup{text-align: left;padding-left: 25px;left: -25px;top: 25px;z-index: 5 !important;align-content:center;width:200px;height:100px;color:black;background:lightgrey;position:absolute} #companionOrderDetails .btn{top: -65px;} .companionOrder{position:relative;cursor:pointer} #saTable #saTableHead .companion{pointer-events:none !important;} #saTable .hideTime_1{visibility: hidden;} #saTableBody .companionOrder{font-style:bold !important; padding: 5px;font-size:12px;background-color: white;color:red;width:130px;border: 1px solid;bottom: 10px;margin: auto !important;} #saTableBody .companionOrder svg{background-color:red;color:white;border-radius:10px;margin: -2px 0px 0px 0px !important;} /* TRANSLATE STYLING: */ /* #conveythis-wrapper{position: absolute !important; top: 10px !important; left: 57% !important; z-index: 1 !important;} */ iframe[name*='privateStripeController'] + div, .skiptranslate{display: none!important;} body{top:0!important;} #gTranslate .dropdown { position:absolute; right:20px; top:10px; padding: 0 10px!important; } #dPrefsSummary #gTranslate .dropdown { right:-40px!important; top:0px!important; } #gTranslate .dropdown .btnLabel{ bottom: -5px; font-size: 8px} #gTranslate .dropdown:before { margin: 2px -5px 0 1px; } body .uwy.userway_p1 .uai { top:20px!important; right:-30px!important; left:auto!important; } /* QR SCANNER: */ #QRscanBtnCustomer{ margin: -25px 5px; } #QRscanBtn{ position:absolute; right:60px;} #QRscanPop.popup.dark .popwindow.clearback{ padding-top: 0} #QRscanPop{ z-index: 6; margin-top: -20px} #QRscan{ width:80%; margin-left:10%; overflow:hidden; border-radius:25px; border: solid 4px #FFF!important; text-align: center;} #QRscan__dashboard_section{text-align: center!important;} #QRscan__dashboard_section div{display: inline-block;} #QRscan button, #QRscan select, #QRscan__dashboard_section_swaplink{ height: 50px; line-height: 50px; background: #DDD; border: 0; display: inline-block; padding: 0 30px; font-size: 10px; text-transform: uppercase; font-weight:bold; border-radius: 50px; color:#333; text-decoration:none!important; margin-left:5px; transition:background 300ms } #QRscan button:hover, #QRscan select:hover, #QRscan__dashboard_section_swaplink:hover{background: var(--hcol); color: #FFF;} #QRscan select option, #QRscan select:hover option{ background: #FFF; color: #333; font-weight: bold; font-size: 12px; text-transform: none; line-height: 40px;} /* SLIDERS: */ /*to change the size of the slider, just use the next line OR set the inline style on the element*/ /*#slider_cals{ width:80%; height:30px; }*/ #sliders{ position:relative; display:none; } #sliders.on{ display:block; } #sliders >div{ position:relative; margin:3px 0px 0px 30px; } #sliders >div >a{display:block;position:absolute;left:30px;top:9px;font-size:10px;text-transform:uppercase;color:#666;font-weight: bold;} #sliders >div >div.nuts-slider{ height:30px; margin-left:80px } .nuts-slider{ background-color:white; position:relative; /*box-shadow:0px 0px 5px 5px #ccc;*/ z-index:2; display:none; } .nuts-slider.visible{ display:block; } .nuts-slider-track{ position:absolute; background-color:#eee; cursor:move; z-index:-1; } .nuts-slider-track-highlight{position:absolute;background-color: var(--hcol);z-index:-1;border-radius: 50px;} /*.nuts-slider-step{ padding:20% 10%; } .nuts-slider-step *{ background-color:black; height:100%; width:50%; left:25%; }*/ .nuts-slider-tracker{ position:absolute; background-color:#fff; border-radius:50%; cursor:move; border:solid 2px #666; } .nuts-slider-tracker:active{border-color:var(--hcol);} .nuts-slider-tracker:after { content:'< 'attr(data-pos); white-space:nowrap; background-color:#666; font-size:12px; font-weight:bold; color:white; z-index:-1; position:absolute; top:50%; transform:translateY(-50%); padding:6px 0 6px 8px; padding-right:50%; right:60%; border-radius:30px 0 0 30px; } .nuts-slider-tracker:active:after{ background:var(--hcol); } .nuts-slider[data-orientation=vertical] .nuts-slider-track, .nuts-slider[data-orientation=vertical] .nuts-slider-track-highlight{ width:20%; left:25%; transform:translateX(-50%); } .nuts-slider[data-orientation=horizontal] .nuts-slider-track, .nuts-slider[data-orientation=horizontal] .nuts-slider-track-highlight{ height:20%; top:50%; transform:translateY(-50%); } .nuts-slider.moving .nuts-slider-track{ background:#ccc; } .nuts-slider.moving .nuts-slider-track-highlight{ background:#f40; } /* NUTRITIONAL INFORMATION */ #nutritionSummaryBtn::before{display: none;} #nutritionSummaryBtn .spinner{margin-bottom: 20px;} #nutritionSummaryBtn .drop{bottom: 50px; margin-left:-150px; padding: 20px 20px 0 20px;min-width: max-content;overflow: visible;border-spacing: 1rem 0;max-height: 60vh;} #nutritionSummaryBtn .drop > div:last-child {overflow-y: auto;} #nutritionSummaryBtn .drop > div:last-child::after {content:'▼';display: block;color: var(--hcol);position: absolute;bottom: -24px;left: var(--left);transform: translate(-50%);} #nutritionSummaryBtn #offline {min-width: 250px;min-height: 250px;display: flex;flex-direction: column;justify-content: center; align-items: center;gap: 15px; padding: 16px; color: #333; text-align: center;} #nutritionSummaryBtn #offline svg {width: 60px !important; color: #999;} #nutritionSummaryBtn .row:first-child {position: sticky; top: 0; background-color: white; z-index: 9;box-shadow: 0 -10px 0 0 white;} #nutritionSummaryBtn .row:first-child > .hback{box-shadow: 0 -20px 0 1px white;} #nutritionSummaryBtn .row {display: table-row;} #nutritionSummaryBtn .row .center {text-align: center;} #nutritionSummaryBtn .row > * {display: table-cell;position: relative;} #nutritionSummaryBtn .row:not(:first-child) > * {vertical-align: middle;} #nutritionSummaryBtn #nut-energyKcal.row {line-height: 20px;} #nutritionSummaryBtn .row .hback {padding: 0 10px;} #nutritionSummaryBtn .row .hback.head {border-radius: 20px 20px 0 0;} #nutritionSummaryBtn .round { background-color:#EEE; width:30px; height:30px; display:flex; justify-content:center; align-items:center; margin:1px auto; } #nutritionSummaryBtn .round.orange {background-color: #FFEDC5;color: #F60;} #nutritionSummaryBtn .round.green {background-color: #E5FFC5;color: #090;} #nutritionSummaryBtn .round.red {background-color: #FFE1E1;color: #C00;} #nutritionSummaryBtn .round.grey {background-color: #AAA;color: #EEE;} #nutritionSummaryBtn .userIcon{position:absolute; left:-25px; margin-top:5px;} /* translations */ .listing #translationPanel{position: fixed;left: 180px;z-index: 9999;} body:not(.listing) #translationPanel{position: absolute; top: 10px; right: 62px;} .listing #translationPanel #gTranslate{display:none;}/*only show the pro version in listings*/ /* Trial help - popup hints */ #msgflag { position:fixed; padding:0 35px; z-index:11; box-shadow:1px 1px 10px rgba(0,0,0,0.5); font-size:13px; color:#FFF; font-weight:bold; white-space:nowrap; opacity:0; transform:scale(0.8); transition:all 300ms; pointer-events:none; line-height:34px; border-radius:50px; } #msgflag.on { opacity:1; background:#ff6600; transform:scale(1); transition:scale 300ms,opacity 300ms, padding 500ms, opacity 300ms, margin 700ms; margin:25px 0px 25px 30px; pointer-events:all; } #msgflag>span { position:absolute; border-style:solid; border-width:0 18px 32px 0; border-color:transparent #ff6600 transparent transparent; left:-16px; margin-top:-8px; } #msgflag:before { content:""; display:block; position:absolute; width:6px; height:6px; border-radius:50%; left:-28px; top:-30px; border:solid 2px #FFF; animation:bigswell 5s infinite; -moz-animation:bigswell 5s infinite; -webkit-animation:bigswell 1s infinite; background:color-mix(in srgb, #ff6600, #FFF 15%); z-index:1; pointer-events:none; } div#msgflag:after { content:''; display:block; border:solid 1px #ff6600; position:absolute; transform:rotate(62deg); width:57px; top:-3px; left:-41px; pointer-events:none; z-index:-1; border-radius:50px; } #msgflag:empty{opacity:0; transform:scale(0.8); margin-top:-10px; padding-left:0; padding-right:0; transition:all 300ms} #msgflag p{margin: 0;} #msgflag.flip p{transform:rotateY(-180deg); display:inline-block;} #msgflag p a { color:#FFE;border-bottom:dotted 1px #FFE;padding:2px 5px;font-size:9px;text-transform:uppercase;vertical-align:middle;cursor: pointer;} #msgflag p a:hover{color:#FFF;border-bottom-color:#FFF;} #msgflag b{color:#FFC} /*.listing #translationPanel #gTranslate{display:none;}only show the pro version in listings*/ .nodietary {margin-top: 15px;} #lang_dropdown > div.drop, #gTranslate > div > .drop {max-height: min(60vh, 400px) !important;} /**************************** RESPONSIVE STYLING **************************/ /*FIX MENU IN SMALL SCREENS*/ @media only screen and (max-width: 1280px) { #results.items3{zoom: 99%;} #results.items4{zoom: 74%!important;} #results.items5{zoom: 59%!important;} #dPrefsSummary .txtCol.alignR{right: -80px;} } /* MOBILE/TABLETS */ /*main difference: changes main banner styling so logo is centered*/ @media only screen and (max-width: 1023px) { #results{} #banner { padding:10px 10px 40px 50px; } .bannerphoto{ height:120px; width:280px; margin-top: -50px; } #dPrefsSummary {top:100px;} #aBox:before{font-size: 10px;} #aBox.on .allergenicon{padding: 9px 5px;} #menu a{ font-size:10px } .dark #menu a.on{ background:#FFF } #pageTitle {text-align:center; margin:20px auto -20px; float:none;width:100%;position: static;} #pageTitle .backbutton {position: absolute;left: 15px;top: 15px; z-index:1;} #menu {display:inherit; background:none; padding:0 20px; margin: 160px auto 0px; text-align:center;} #menu a{ background-color: var(--bgcol2); line-height: 40px; border-radius: 50px; padding: 0 25px;} .popup.dark .popwindow.clearback .delbtn{right: 50px;} /*#menu:after{content:''; display:inline-block; border-style:solid; border-width:16px 6px 0 6px; border-color:#222 transparent transparent transparent; position:relative; top:0px; left:11px;transition:transform 600ms; transform:rotate(1deg);}*/ /* #dietHint.on{width:92%; max-width:300px;} */ #footer{padding: 10px 5px;} #staffHeader{ width: calc(100vw - 50px); } #saTable .popwindow{ margin-top: 30px; } } /* LANDSCAPE MOBILES/ PORTRAIT TABLETS */ /*main difference: changes item cards to portrait mode*/ @media only screen and (max-width: 899px) { .delbtn { width:40px; height:40px; margin:4px; line-height:35px; } #banner{ padding:130px 0 20px; min-height:360px; } #pageTitle{font-size: 24px;} .bannerphoto{ background-position:center; top:15px; position:absolute; width:80%; height:140px; margin:0 auto; left:10%;} #dPrefsSummary { position:absolute; top:207px; left:50%; max-width: 100%;} #dPrefsSummary .txtCol.alignR{right: auto;} #aBox{top: 200px; width:100%;} #aBox.on{position: fixed; height: calc(100vh); width:100%; top:0px; margin:0px; padding: 0 10px 80px; overflow: auto; max-height: none;} #aBox.on #tab1{width: 100%; border:0!important} #aBox.on #tab2{display: none;} #aBox.on .dietary{width: 95%;} #aBox.on .applybtn, #aBox.on .revertbtn{position: relative; right:0; bottom:0; display: inline-block;} #aBox.on .applybtn {right: -10px; float: right;} #aBox.on .revertbtn {left: -10px; float: left;} #dietHint.on{width:140px} #QRscanBtnCustomer{ margin: 20px 0px; } #cardnest{ width:95%; height:calc(80vh - 41px); max-width:500px; z-index: 999; margin-top: -48px;} #mainInfo .scrollbtn{display: none!important;} /* #cardnest .foodphoto{width:320px; height:294px; float:left;} */ #cardnest .cardHeader{display:inline-block; position:relative; width:98%; height:305px; } /* #cardnest .allergens{width:49%; height:145px; overflow:auto;} #cardnest .foodphoto{width: 50%; height: 100%; background-repeat: no-repeat; background-size: 100% 100%;} */ #cardnest .foodphoto { width:100%; height:300px; left:0px; } #cardnest .infoItem { width:100%; padding: 0} #cardnest #innerCard #mainInfo, #innerCard .itemIcons{height: auto;} #cardnest #extraInfo { height:auto; overflow-y:visible;} #innerCard #extraInfo .half{width:100%;float: none; margin-bottom: 15px;} #cardnest .pBubble { right:-9px; left:auto; top:263px; z-index:2; transform:scale(0.85); } #moreInfo{display: none;} .notesHist{margin: 5px 0px;} #cardnest h3{ font-size: 26px; line-height: 110%; display: inline-block; } #cardnest .cardHeader h3 { position:absolute; color:#FFF; text-shadow:0 0 10px #000; background:-moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%); background:-webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.7) 100%); background:linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.70) 100%); filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 ); padding:50px 20px 35px 20px; bottom:-5px; left:0px; right:0px; text-align:left; z-index:1; border-radius:0 0 30px 30px; } #cardnest .allergens {display:block!important; width:100%; position:static; top:336px; overflow:visible; max-height: 300px; margin-bottom: 30px; padding: 10px 0px; height:auto!important;} #cardnest .label{width:100%; transform: scale(1);} #cardnest .price{right:0px; bottom:0px; top:230px;} #cardnest #disclaimer{font-size:12px!important; z-index:2;} #cardnest #disclaimer.on{ max-height: 150px; top:auto; bottom: 0px; background-color: rgba(0,0,0,0.85);} #cardnest #innerCard{overflow-y: auto;width: 100%; height:100%; min-height: unset; padding-bottom:50px;} #cardnest .desc { position:relative; top:5px; width:100%; display:block; margin:20px 0px 30px; font-style:italic; font-size:16px; } #cardnest h5:first-child{ margin-top:0;} /* #cardnest .itemActions{ position:fixed; background:#FFF; left:-10px; right:-10px; width:auto; bottom:-75px; padding:10px; box-shadow:0 -2px 7px #0006;} */ #cardnest .itemActions { background:#EEE; width:95%; padding:10px; border-radius:50px; margin:0 auto; box-shadow:none; left:0; right:0; bottom:5px; z-index:2; } #cardnest.on .page2{ width:100%; border-radius: 30px; transform: translateX(-120%); } #cardnest.on .page2.on{ transform:translateX(0%); z-index: 2; padding: 20px 10px!important;} #allMealsBtn{margin-top: -60px} #basket{width: 100%; margin-left: -50%; } #mobileClearBasketBtn{position: absolute; right:10px; top: -20px;} #basket .CTAbtn{margin-left:auto;} #orderDue{position:absolute; top:-25px; width:150px; left:50%; transform:translate(-59%);} body.popupOn #basket{transform: translateY(120%)!important;} /*hide basket on mobile when popups are on */ #basket.open{ height:200px; display:block; transition: height 300ms} #basket.open #orderContent{ display:block!important; width:calc(100% + 30px); justify-content:center; margin:25px -15px; overflow-x:auto; overflow-y:hidden; white-space:nowrap; } #basket.open #orderContent:not(:empty):before{ position:absolute; left:0; top:30px; font-size:14px; width:100%; } #basket.open #orderContent>div{transform:scale(1.2); margin:10px 7px; display:inline-block;} #totalPrice{ position:absolute; left:50%; bottom:15px; transform:translate(-60%,0); } #editBasketBtn{ position:absolute; left:3%; bottom: 15px;} #basket.open #submitOrder{ position:absolute; right:3%; bottom: 15px;} #basket.open #editBasketBtn{ width: 70px;} #basket.open #editBasketBtn>span{display: none;} #basket.open #editBasketBtn:before{ content:'▼ Close'; } #customDuePop .popwindow{ padding:0 0 0 10px; } #customDuePop .hsplit2{display:block; width:100%; height:40vh!important; padding: 0 15px 0 0px!important;} #customOrderSlots>button{ width: 29vw; } #staffArea .popwindow.clearback{padding-top: 140px} .tableGroups .tabmenu.dropdown{margin-top: 319px} } /* PORTRAIT MOBILES ONLY */ @media only screen and (max-width: 499px){ .hideOnMobile{display: none!important;} .mobileOnly{display: block!important;} .noscroll{overflow: hidden} .pillbtn{padding: 0 29px;} .darkcover{background: rgba(0,0,0,0.7);} .popwindow{transform:scale(0.7) translate(-70%,-40%)} .delbtn{ width: 50px; height: 50px; margin: -14px; line-height: 45px; border-width: 3px} body.popupOn #main{-webkit-filter:none;} #aBox.on .dietary{padding: 0 25px; text-align:left;} #card.on .inpopup.half,#nClaims.half{width:100%!important;} #cardnest .cardHeader h3{ text-align: center;} #nClaims.half #claimsbox h4{display: inline-block; width: 50%;} #sliders{margin-top:20px;} #sliders >div >a:before{ left:-5px!important; top:10px!important; font-size:9px!important; } #gTranslate .drop{left:auto; right:-20px;} #footer{ font-size:10px; height: 40px; } #footer .libroBanner{ display: block; } .nuts-slider[data-orientation=horizontal] .nuts-slider-track, .nuts-slider[data-orientation=horizontal] .nuts-slider-track-highlight{ transform: translateY(-50%) translateZ(0)!important; } #optionsToLibro{ padding-top:20px; } #optionsToLibro .option{ margin-left: 10px; } #optionsToLibro .option img { width:100%; } .quickInput input { margin-top:90px; position:fixed; left:50%; width:84vw; transform:translateX(-50%); } .popup.dark .clearback{min-height:100vh; padding-bottom: 500px; } .popup.dark .clearback>#page_custDetails{position: relative;} .popup.dark .clearback>.page>.tabmenu{ width:98%; padding:0; transform:translate(-50%,-20vw); background:#222; padding:0; line-height:50px; margin:0 -10px; } .popup.dark .clearback>.page>.tabmenu.centered {max-width:70vw;} .popup.dark .clearback>.page>.tabmenu.centered .btn{font-size:9px } .popup.dark .clearback>.page>.tabmenu.centered svg{ width: 16px} .popup.dark .clearback>.page>.tabmenu .btn { margin:0; padding:0; width:33%; border-radius:0; border:0; } .popup.dark .clearback>.page>.tabmenu .btn:first-child{border-radius: 50px 0 0 50px;} .popup.dark .clearback>.page>.tabmenu .btn:last-child{border-radius: 0 50px 50px 0;} .popup.dark .clearback h3 { font-size:24px!important; text-align:center; font-weight:900; letter-spacing:0; } #page_custDetails>.tabmenu{ margin:-50px 0 50px; } #page_custDetails>.tabmenu .btn.on{ background:#FFF; color:#333; text-shadow:none; } #tab-eatIn h3 { text-align:left; margin:-20px 0 20px 10px; } .popup.dark .clearback h3:after{content:':'} #checkoutForm { width:100%; overflow-x:hidden } #checkoutForm form { width:90%!important; margin-top: -20px; padding-bottom: 500px; } .tableGroups .tabmenu.dropdown{/* z-index: 1 */} .dropdown a{padding: 0 25px;} input[name='phonenumber']{padding-right:2px; text-align: right;} #staffArea{padding-top: 40px;} #dPrefsSummary .txtCol.alignR{right: auto; left:0} } /* TINY MOBILES ONLY */ @media only screen and (max-width: 359px){ .item, .foodphoto{ width: 264px; height: 264px; } #card.on #cardnest .label{width:100%; overflow: hidden;} .fopLabel{transform: scale(0.9);} .pillbtn{padding: 0px 25px;} .pillbtn.large{padding: 0px 35px; font-size: 10px} #cardnest #innerCard{ min-height: 0; } #cardnest .cardHeader{ height:275px; } #cardnest .foodphoto{ height: 270px; } #footer .libroBanner .desc{ display:none; } } /* MOBILE/TABLET KEYBOARD IS OPEN */ @media only screen and (max-height:399px){ input.floatOnMobile:focus{position: fixed; margin:0; top:calc(100% - 110px); left:50%; z-index: 99; transform:translate(-50%, -50%); box-shadow: 1px 2px 5px rgba(0,0,0,0.5); border-color: var(--hcol);} } /* dont add new styles here please - do them in their respective sections above or add new sections above the responsive media queries */ /* FOP LABELS */ .lab *{ -webkit-user-select:auto} .labelBlock{width:350px; display:inline-block; vertical-align:top; margin:40px 20px 0 0;} .labelBlock h5{text-align:center;} .downloadlabel{ border-radius: 50%; padding:8px!important; border:solid 2px #FFF!important;} .labelBlock .blueline{display:none!important} .labelBlock a{display:inline-block!important; margin: -5px; } .labelBlock a img{width:13px; height:auto;} .labelBlock #AUSbopLabel table td{white-space:normal;} .labelBlock .lab{margin-top:10px;} .lab{-webkit-user-select:auto; transform-origin: top left; margin:0 auto; } .lab table{ margin-bottom:5px; width:100%; max-width:350px; border-collapse: collapse;} .lab table td{border:solid #DDD 1px; padding:5px 10px 5px 10px; cursor:default; box-sizing:border-box; overflow:hidden; vertical-align:middle; transition:background 200ms; background-color:white;} .lab p.lCompact {width: 90%;border-bottom: 1px dotted #000;text-align: center;font-weight: bold;padding-bottom: 2px;margin:0 auto 5px;} .lab table.lCompact tr { text-align:left !important; border: none; } .lab table.lCompact tr td.comp2 {width: 52%;} .lab table.lCompact tr td.wider {width: 58%;} .lab table.lCompact tr td .ofw {padding-left: 7px;display: block;} .lab table.lCompact tr td { border: none; padding: 0 0 0 10px;} .lab table.lCompact tr td:first-child { border-right: 1px dotted #000 !important; } .lab table.lCompact tr:last-child td { border: none !important; } .lServ table.lCompact tr td:last-child { border-left: 1px dotted #000 !important; } .lServ table.lCompact tr:last-child td { border: none !important; } .lServ.lCompact tr td.wider {width: 46% !important;} .lab{pointer-events:none;} .lab.eOnly table{width:25%;} .fopLabel{text-align:center; width:302px; font-size:11px; line-height:12px; display:inline-block;} .fopLabel table{table-layout:fixed; margin:10px 0; border-top:solid 1px #000; border-collapse: collapse;} .fopLabel.lab td {border: solid 1px #222; border-bottom:0; border-top:0;} .fopLabel td{width:20%; padding:0 0 6px; line-height:14px; letter-spacing:-1px; font-size:20px;} .download .fopLabel td{letter-spacing:0px;} .fopLabel tr:nth-child(2) td:first-child{padding:2px 0 3px;} .fopLabel td .medText{letter-spacing:normal; margin-left:1px} .fopLabel tr:first-child td{letter-spacing:normal; border-bottom-color:#FFF; padding:10px 0 0px; font-weight:bold; text-transform:uppercase; font-size:9px; background:transparent;} .fopLabel .tLights td{border:0!important; padding:0; background:none;} .fopLabel .tLights .red,.fopLabelv .tLights.red{background:#D1282B; color:#FFF!important; text-shadow:0 0 5px rgba(0,0,0,0.5);} .fopLabel .tLights .orange,.fopLabelv .tLights.orange{background:#EB9735; color:#FFF!important; text-shadow:0 0 5px rgba(0,0,0,0.5);} .fopLabel .tLights .green,.fopLabelv .tLights.green{background:#79B73C; color:#FFF!important; text-shadow:0 0 5px rgba(0,0,0,0.5);} .fopLabel.lowRes .tLights .red,.fopLabelv.lowRes .tLights .red,.fopLabel.lowRes .tLights .orange,.fopLabelv.lowRes .tLights .orange,.fopLabel.lowRes .tLights .green,.fopLabelv.lowRes .tLights .green,.lowRes .fopLabelv .tLights .green,.lowRes .fopLabel .tLights .green,.lowRes .fopLabelv .tLights .red,.lowRes .fopLabel .tLights .red,.lowRes .fopLabelv .tLights .orange,.lowRes .fopLabel .tLights .orange{color:#000!important; background: #fff} .fopLabel .roundbottom{background:#FFF;} .fopLabel.eOnly table{margin:10px auto;} .fopLabel.eOnly tr td:nth-last-child(-n+4){ display:none;} .fopLabel.eOnlyv .tLights td:first-child { position:absolute; top:21px; margin-left:58px; } .fopLabel.eOnlyv .tLights td:first-child span{padding:26px 5px 24px 5px; border-radius:0% 50% 50% 0%; display:inline-block; border-top: solid 2px;} .fopLabel.rounded {width:375px; white-space: nowrap;} .fopLabel.rounded table{max-width:375px;} .fopLabel.rounded table,.fopLabel.rounded table td{border:0;} .fopLabel.rounded tr:first-child td{ display:inline-block; width:100%; height:46px; line-height:68px; overflow:hidden; padding:0px;} .fopLabel.rounded tr:first-child td span{ border-width:2px 2px 0px 2px; height:80px; text-transform:capitalize; font-size:14px; letter-spacing:normal; border-radius:50% 50% 0% 0%; display:block; font-weight:bold; border-style:solid;border-color:#000; color:#fff; } .fopLabel.rounded tr:nth-child(1) span,.fopLabel.rounded tr:nth-child(2) span{color:#FFF!important;} .fopLabel.rounded tr:nth-child(1) td:first-child span,.fopLabel.rounded tr:nth-child(2) td:first-child span{color:#000!important} .fopLabel.rounded tr:nth-child(2) td span:not(.medText){ border-style:solid; border-width:0px 2px 0px 2px; display:inline-block; padding:2px 0px 0px 0px; width:100%;box-sizing: border-box; height: 40px; line-height: 32px; font-weight:bold; color:#fff; border-color:#000;} .fopLabel.rounded tr:nth-child(2) td:first-child span{line-height:14px; font-size:16px!important;} .fopLabel.rounded tr:first-child td:nth-child(n+2) span{ margin: 0px -1px;} .fopLabel.rounded tr:first-child td:last-child span{margin:0px 0px 0px -1px;} .fopLabel.rounded tr:nth-child(2) td:nth-child(n+2) span{border-width:0px 1px 0px 1px} .fopLabel.rounded tr:nth-child(2) td:last-child span{border-width:0px 2px 0px 1px} .fopLabel.rounded tr:nth-child(2) td{ display:inline-block; width:100%; padding:0; box-sizing:border-box; border-bottom:2px solid;} .fopLabel.rounded .orange{background: #ebad14;} .fopLabel.rounded .green{background: #97d700;} .fopLabel.rounded .red{background:#ed2e38;} .fopLabel.rounded table+p{ margin-top:10px; border:2px solid; border-radius:10px; padding:5px 0px; font-size:14px; margin-bottom:5px;} .fopLabel.rounded p:first-child,.fopLabel.rounded table+p+p {font-size: 14px;font-weight: bold;} .fopLabel.rounded tr:last-child td span{border-width:2px 2px 2px 2px; height:80px; text-transform:capitalize; font-size:14px; letter-spacing:normal; border-radius:0% 0% 50% 50%; display:block; font-weight:bold; border-color:#000; margin-top:-50px; background:#fff; line-height:120px; border-style:solid; padding:0px; color:#000!Important; text-shadow:none;} .fopLabel.rounded tr:last-child td:nth-child(n+2) span{margin-left:-1px; margin-right:-1px;} .fopLabel.rounded tr:last-child td:last-child span{margin-right:0px; margin-left:-1px;} /* .fopLabel.rounded tr:nth-child(2) td:nth-child(even) span{display: none;border-right:1px!Important;} */ .EUfopLabelv, .UKfopLabelv{text-align:center; line-height:normal; } .EUfopLabelv table, .UKfopLabelv table {border: 1px solid #000; display: block;} .EUfopLabelv #vWrapper, .UKfopLabelv #vWrapper{display:block; width:100px; margin:0 auto;height:60px;} .EUfopLabelv .vNameWrapper, .UKfopLabelv .vNameWrapper { height:59px; width:65px; border-width:1px 0px 0px 1px!important; float:left; border: 1px solid; } .vNameWrapper.Salt{border-bottom: 1px solid!important;} .EUfopLabelv .vlightsWrapper, .UKfopLabelv .vlightsWrapper { width:30px; float:left; } .EUfopLabelv .nutName, .UKfopLabelv .nutName{ display:block; text-align:center; padding-top:9px; font-size:9px;} .EUfopLabelv div span:nth-child(2), .UKfopLabelv div span:nth-child(2) {display:block; text-align:center; font-size:20px;} .EUfopLabelv div span:nth-child(3), .UKfopLabelv div span:nth-child(3){display:block; text-align:center;} #fopPreview .EUfopLabelv div:nth-child(odd), #fopPreview .UKfopLabelv div:nth-child(odd){left: 165px;} .roundright{ letter-spacing:normal; border-radius:0% 50% 50% 0%; display:block; padding:20px 0 20px; font-weight:bold; border:solid 1px; font-size:15px; } .roundbottom{letter-spacing:normal; border-radius:0 0 50% 50%; display: block; padding: 4px 0 7px; font-weight: bold; border: solid 1px; font-size:15px; position: relative;} .roundtop{letter-spacing:normal; border-radius:50% 50% 0% 0%; display: block; padding: 7px 0 5px; font-weight: bold; border: solid 1px; } #EUbopLabel,#UKbopLabel,#SAbopLabel {width: 260px; /*text-align:left; display:inline;*/display: inline-block;} #EUbopLabel tr,#UKbopLabel tr,#SAbopLabel tr{text-align:left;} #EUbopLabel tr:first-child,#UKbopLabel tr:first-child,#SAbopLabel tr:first-child{text-align: inherit;} #EUbopLabel,#UKbopLabel{width:267px;} #fopPreview #EUbopLabel.lCompact, #fopPreview #UKbopLabel.lCompact{width:205px;} #fopPreview #EUbopLabel.lCompact.wider, #fopPreview #UKbopLabel.lCompact.wider{width:235px;} #fopPreview #EUbopLabel.lServ, #fopPreview #UKbopLabel.lServ,#fopPreview #EUbopLabel.lServ.wider, #fopPreview #UKbopLabel.lServ.wider{width:295px;} #EUbopLabel.lCompact, #UKbopLabel.lCompact{width:155px;} #EUbopLabel.lCompact.wider, #UKbopLabel.lCompact.wider{width:210px;} #EUbopLabel.lServ, #UKbopLabel.lServ,#EUbopLabel.lServ.wider, #UKbopLabel.lServ.wider{width:240px;} /*for digital mennu*/ .popup.label #SAbopLabel{width:300px;} .popup.label #SAbopLabel table,.popup.label #SAbopLabel p{font-size:12px;} #EUbopLabel table, #UKbopLabel table,#SAbopLabel table, #fopPreview.lowRes #EUbopLabel p, #fopPreview.lowRes #UKbopLabel p,#fopPreview.lowRes #SAbopLabel p{background:#fff;} #fopPreview.lowRes #EUbopLabel, #fopPreview.lowRes #UKbopLabel,#fopPreview.lowRes #SAbopLabel{word-wrap: normal;white-space: initial;} #fopPreview.lowRes{font-size:11px;} #fopPreview{width:100%;white-space: normal;padding:3px;} #fopPreview div {padding:0 3px 8px 3px;} #fopPreview{width:100%;} #EUbopLabel table td, #UKbopLabel table td,#SAbopLabel table td{border-color:#000; /* max-width: 0; */ white-space: normal;border-bottom:none} #EUbopLabel table tr:last-child td, #UKbopLabel table tr:last-child td,#SAbopLabel table tr:last-child td{ border-bottom: solid #000 1px;} #EUbopLabel table td, #UKbopLabel table td{border-left:0; border-right:0;} #EUbopLabel:not(.lCompact) .indent td, #UKbopLabel:not(.lCompact) .indent td{border: 0; /* padding: 0 10px 5px; */; padding: 2.5px 10px 2.5px; line-height: 100%;} #EUbopLabel:not(.lCompact) .indent :first-child:not(span), #UKbopLabel:not(.lCompact) .indent :first-child:not(span){padding-left: 15px} /*jagpreet*/ #EUbopLabel:not(.lCompact) tr td > span, #UKbopLabel:not(.lCompact) tr td > span,#EUbopLabel:not(.lCompact) p, #UKbopLabel:not(.lCompact) p { /*jagpreet*/transform: scale(1,1.2)!important;display: inline-block;} #EUbopLabel .indent td span, #UKbopLabel .indent td span{position:relative; top:-1px;} #EUbopLabel .indent:last-of-type td, #UKbopLabel .indent:last-of-type td{padding-bottom: 20px} #EUbopLabel table td.nobb, #UKbopLabel table td.nobb,#SAbopLabel table td.nobb{border-bottom:0; padding-bottom:1px; } #EUbopLabel table td.nobt, #UKbopLabel table td.nobt,#SAbopLabel table td.nobt{ border-top:0; padding-top:1px;} #SAbopLabel .halfTD{width:100px;} .percRI,.perServ,.per100g {width: 60px!important;} .halfTD { width: 60px;} .leftpad{padding-left:15px!important;} .rtalign,.leftpad{border-top: none;} .noperc b{display:none;} #AUSbopLabel{width:250px; display:inline-block;/* margin-bottom:15px; */} #AUSbopLabel table{ background-color:#FFF;}/*#25664*/ #fopPreview #AUSbopLabel table td{white-space: pre-wrap;} #AUSbopLabel table td b{width: 100%;text-align: right;} #AUSbopLabel.AUBOPc{width:100%;} #fopPreview #AUSbopLabel.AUBOPc .footer{display:block;} #AUSbopLabel table td{border-color:#000; padding: 2px 10px; /*white-space: pre-wrap;*/border-bottom-color:transparent;} #AUSbopLabel table tr:nth-child(3) td, #AUSbopLabel table tr:last-child td {border-bottom-color:#000;} #AUSbopLabel table tr:first-child td{padding-top:4px!important;} #AUSbopLabel table tr:nth-child(3) td{padding-bottom:4px!important} #AUSbopLabel table tr:nth-child(-n+3) td{ padding: 0px 10px;} #AUSbopLabel table tr td:nth-last-child(2),#AUSbopLabel table tr td:nth-last-child(3){border-right-color:transparent!important;} #AUSbopLabel table tr td:first-child{width:180px;} #AUSbopLabel table tr:last-child td{padding-bottom:8px;} .remBorder{border-bottom-color:transparent!important;} #AUfopLabel table{ width:210px; position:relative; left:80px;border-top:0;} #AUfopLabel tr:first-child td{border:0px;} #AUfopLabel tr:nth-child(2) td{padding:7px 0 7px; border:1px solid;font-size:16px;} #AUfopLabel tr:first-child td span,#AUfopLabel tr:last-child td span { background-color:#000!important; color:#fff!important; } #AUfopLabel #ratingImg{position:absolute; width:76px; height:76px; top:17px;-webkit-print-color-adjust: exact; overflow:hidden;} #ratingImg img{position:relative; width:100%!important; height:760px!important;} .download #AUfopLabel #ratingImg img{margin-top: -1px!important;} .download #AUfopLabel tr:nth-child(2) td{padding: 9px 0 11px;} #AUfopLabel p{white-space:normal;} .lowRes #AUfopLabel.fopLabel.AUFOPo1 td{width:20%;} .lowRes #AUfopLabel .roundbottom{border:solid 1px; border-top:solid 1px;} #AUfopLabel td{display:none;} #AUfopLabel table{margin:0;} #AUSbopLabel table,#AUSbopLabel .footer{/*display:inline-block; text-align:left;*/} #AUSbopLabel table tr{text-align: left} #AUSbopLabel tr:nth-child(-n+3){text-align: inherit;} #AUSbopLabel.AUBOPc table {width:140px; white-space:normal;margin-bottom:9px;} #AUSbopLabel.AUBOPc .footer{width:140px;white-space:normal;} #AUSbopLabel.AUBOPc.servOn table ,#AUSbopLabel.AUBOPc.percOn table, #AUSbopLabel.AUBOPc.servOn .footer,#AUSbopLabel.AUBOPc.percOn .footer{width:185px;} #AUSbopLabel.AUBOPc.servOn.percOn table,#AUSbopLabel.AUBOPc.servOn.percOn .footer {width:230px;} #AUSbopLabel.AUBOPc td{padding:0px 10px} #AUfopLabel.AUFOPo1 table{width:220px; left:77px; } #AUfopLabel.AUFOPo1 td{display:inline-block;} #AUfopLabel.AUFOPo1 tr:nth-child(2) td{font-size:12px;} #AUfopLabel td{font-size:7px; line-height:7px} #AUfopLabel .roundbottom{font-size:9px!important;} #AUfopLabel.medText{font-size: 10px!important;} #AUfopLabel p:last-child{margin-top:10px;} .v2 #AUfopLabel td{font-size: 8px;line-height: 8px;} #AUfopLabel.AUFOPo2{width:286px; position:relative;} #AUfopLabel.AUFOPo2 table{width:255px;left:55px; } #AUfopLabel.AUFOPo2 tr td:nth-child(-n+4){display:inline-block;} #AUfopLabel.AUFOPo3 tr td:first-child{display: inline-block; margin-left: -65%;} #AUfopLabel.AUFOPo3 #ratingImg{left:18px;} #AUfopLabel.AUFOPo4,#AUfopLabel.AUFOPo3{width:190px;} #AUfopLabel.AUFOPo4 table{display:none;} #AUfopLabel.AUFOPo4 #ratingImg { margin:auto; left:0; right:0; bottom:0; top:0; margin-top:20px; } #AUfopLabel.AUFOPo4 p:last-child{margin-top:95px;} #AUfopLabel.AUFOPo4{ min-height: 140px;} #AUfopLabel.AUFOPo5{width:200px;} #AUfopLabel.AUFOPo5 td{width:65px;} #AUfopLabel.AUFOPo5 table{width:100%;left:0;} #AUfopLabel.AUFOPo5 tr td:first-child{display: inline-block;} #AUfopLabel.AUFOPo5 #ratingImg{display:none;} #USbopLabel, #GCbopLabel {border:1px solid #000; padding:4pt;width:62mm; color:#000; text-align:left !important;line-height: 150%; box-sizing: border-box;} #USbopLabel *, #GCbopLabel * {font-family:Arial, Helvetica, sans-serif!important;} #USbopLabel .b, #GCbopLabel .b {font-weight: 900;} #USbopLabel .adjustSugar span:nth-child(2), #GCbopLabel .adjustSugar span:nth-child(2) {display:none;} #USbopLabel h1.header, #GCbopLabel h1.header { margin:0; line-height: 90%; font-weight: 900; letter-spacing: normal;text-align:left} #USbopLabel.USBOP h1.header, #USbopLabel.USBOPc h1.header, #GCbopLabel.GCBOP h1.header, #GCbopLabel.GCBOPc h1.header {border-bottom: 1pt solid #000;} #USbopLabel:not(.USBOPvs) h1.header, #GCbopLabel:not(.GCBOPvs) h1.header {padding-bottom:6pt; padding-top:4pt; } #USbopLabel .perContainer, #GCbopLabel .perContainer { border-bottom: none; padding:4pt 0pt 2pt 1pt;} #USbopLabel:not(.USBOPvs) .servSize, #GCbopLabel:not(.GCBOPvs) .servSize {text-align:right;font-weight:bold; padding:2pt 0pt 4pt 0pt;} #USbopLabel:not(.USBOPvs) .perServ, #GCbopLabel:not(.GCBOPvs) .perServ {width:100%!important; padding-top:4pt;} #USbopLabel .cal, #GCbopLabel .cal {position: relative;padding:2pt 0pt 7pt 0pt; font-weight: 900;} #USbopLabel .cal strong, #GCbopLabel .cal strong {font-weight: 900;} #USbopLabel:not(.USBOPdc) .cal strong, #GCbopLabel:not(.GCBOPdc) .cal strong {position:absolute; right:0; bottom:12px; } #USbopLabel .dailyVal, #GCbopLabel .dailyVal {display:block; width:100%; text-align:right; padding:2pt 0pt;} #USbopLabel .USnuts, #GCbopLabel .GCnuts {padding: 2pt 0;} #USbopLabel .adjustSugar, #GCbopLabel .adjustSugar {position:relative; width:90%; right:-10%;} #USbopLabel .inline, #GCbopLabel .inline {width: 50%;float:left; white-space: nowrap;} #USbopLabel:not(.USBOPvs) .inline.dot:after, #GCbopLabel:not(.GCBOPvs) .inline.dot:after { content:'\b7'; font-size:9pt; float:right; } #USbopLabel .inline span, #GCbopLabel .inline span {float:none !important; margin-left:2px;} #USbopLabel .inline span:nth-child(2), #GCbopLabel .inline span:nth-child(2) {margin-left:0px;} #USbopLabel .USnuts.protein .fr, #GCbopLabel .GCnuts.protein .fr {display: none;} #USbopLabel .footer, #GCbopLabel .footer {padding:2pt 0pt 0pt 1pt;clear:both;white-space: normal;} #USbopLabel #nutBlock.default .inline, #GCbopLabel #nutBlock.default .inline {float: none; width:100%;} #USbopLabel #nutBlock.default .inline.rtalign, #GCbopLabel #nutBlock.default .inline.rtalign {text-align: left!important;} #USbopLabel #nutBlock.default .dot:after, #GCbopLabel #nutBlock.default .dot:after {display: none;} #USbopLabel #nutBlock.default .inline span:last-child, #GCbopLabel #nutBlock.default .inline span:last-child {float: right;} #USbopLabel #nutBlock.default p:nth-child(2), #GCbopLabel #nutBlock.default p:nth-child(2) {border-top:solid 0.24pt #000} #USbopLabel.USBOPc, #USbopLabel.USBOPdc, #GCbopLabel.GCBOPc, #GCbopLabel.GCBOPdc {width:55mm;} #USbopLabel.USBOPc .inline.dot:after, #GCbopLabel.GCBOPc .inline.dot:after { content:'\b7'; font-size:8pt; float:right; } #USbopLabel .leftpad, #GCbopLabel .leftpad {padding-left:10pt!important} #USbopLabel .leftpad1, #GCbopLabel .leftpad1 {padding-left:20pt!important} #USbopLabel .thinborder, #GCbopLabel .thinborder {border-top:solid 0.24pt #000;} #USbopLabel.USBOPc .thinborder, #USbopLabel.USBOP .thinborder, #GCbopLabel.GCBOPc .thinborder, #GCbopLabel.GCBOP .thinborder {border-top:solid 1pt #000;} #USbopLabel .thickborder, #GCbopLabel .thickborder {border-top:solid 3pt #000;} #USbopLabel .xthickborder, #GCbopLabel .xthickborder {border-top:solid 7pt #000;} /*MINIMUM FONT SIZE REQUIREMENT*/ #USbopLabel.USBOPc .xsmall, #USbopLabel.USBOPdc .xsmall, #GCbopLabel.GCBOPc .xsmall, #GCbopLabel.GCBOPdc .xsmall {font-size: 6pt;} #USbopLabel.USBOPc .small, #USbopLabel.USBOPdc .small, #GCbopLabel.GCBOPc .small, #GCbopLabel.GCBOPdc .small {font-size: 8pt;} #USbopLabel.USBOPc .med, #USbopLabel.USBOPdc .med, #GCbopLabel.GCBOPc .med, #GCbopLabel.GCBOPdc .med {font-size: 10pt;} #USbopLabel.USBOPc .large, #USbopLabel.USBOPdc .large, #GCbopLabel.GCBOPc .large, #GCbopLabel.GCBOPdc .large {font-size: 16pt;} #USbopLabel.USBOPc .xlarge, #USbopLabel.USBOPdc .xlarge, #GCbopLabel.GCBOPc .xlarge, #GCbopLabel.GCBOPdc .xlarge {font-size: 17.8pt;} #USbopLabel.USBOPc .xxlarge, #USbopLabel.USBOPdc .xxlarge, #GCbopLabel.GCBOPc .xxlarge, #GCbopLabel.GCBOPdc .xxlarge {font-size: 22pt;} #USbopLabel.USBOPc .USnuts, #GCbopLabel.GCBOPc .GCnuts {padding:1.2pt 0} #USbopLabel.USBOPc .footer, #USbopLabel.USBOPdc .footer, #GCbopLabel.GCBOPc .footer, #GCbopLabel.GCBOPdc .footer {line-height: 8px;} /*MINMUM SIZES: (DON'T GO BELOW IT!)*/ #USbopLabel.USBOPvs .small, #GCbopLabel.GCBOPvs .small {font-size: inherit;} #USbopLabel.USBOPvs .xsmall, #GCbopLabel.GCBOPvs .xsmall {font-size: inherit;} #USbopLabel.USBOPvs .med, #GCbopLabel.GCBOPvs .med {font-size: inherit;} #USbopLabel.USBOPvs .large, #GCbopLabel.GCBOPvs .large {font-size: inherit;} #USbopLabel.USBOPvs .xlarge, #GCbopLabel.GCBOPvs .xlarge {font-size: inherit;} #USbopLabel.USBOPvs .xxlarge, #GCbopLabel.GCBOPvs .xxlarge {font-size: inherit;} #USbopLabel .xsmall, #GCbopLabel .xsmall {font-size: 7pt;} #USbopLabel .small, #GCbopLabel .small {font-size: 9pt;} #USbopLabel .med, #GCbopLabel .med {font-size: 11pt;} #USbopLabel .large, #GCbopLabel .large {font-size: 17pt;} #USbopLabel .xlarge, #GCbopLabel .xlarge {font-size: 20pt;} #USbopLabel .xxlarge, #GCbopLabel .xxlarge {font-size: 22pt;} #USbopLabel.USBOPvs, #GCbopLabel.GCBOPvs {width:initial; line-height: 120%} #USbopLabel.USBOPvs p, #USbopLabel.USBOPvs h1, #USbopLabel.USBOPvs #nutBlock, #GCbopLabel.GCBOPvs p, #GCbopLabel.GCBOPvs h1, #GCbopLabel.GCBOPvs #nutBlock {display: inline;text-wrap: wrap;} #USbopLabel.USBOPvs p.perServ>strong, #GCbopLabel.GCBOPvs p.perServ>strong {font-weight:normal;} #USbopLabel.USBOPvs .xthickborder, #USbopLabel.USBOPvs .thickborder, #USbopLabel.USBOPvs .thinborder, #GCbopLabel.GCBOPvs .xthickborder, #GCbopLabel.GCBOPvs .thickborder, #GCbopLabel.GCBOPvs .thinborder {border: 0} #USbopLabel.USBOPvs .perServ:after, #GCbopLabel.GCBOPvs .perServ:after {content:':'} #USbopLabel.USBOPvs .servSize span, #GCbopLabel.GCBOPvs .servSize span {float:none !important;font-weight:bold;} #USbopLabel.USBOPvs .servSize>i, #GCbopLabel.GCBOPvs .servSize>i {font-weight:bold;} #USbopLabel.USBOPvs .servSize>i:after, #GCbopLabel.GCBOPvs .servSize>i:after {content:',';} #USbopLabel.USBOPvs .perContainer>span, #GCbopLabel.GCBOPvs .perContainer>span {display:inline;} #USbopLabel.USBOPvs .cal, #GCbopLabel.GCBOPvs .cal {display: inline-block; padding:0;} #USbopLabel.USBOPvs .cal strong, #GCbopLabel.GCBOPvs .cal strong {/*float:right;*/ position: inherit!important; display: inline-block; bottom:0px; margin-left:4px;} #USbopLabel.USBOPvs .span, #GCbopLabel.GCBOPvs .span {float:right; position:relative; bottom:2px; left:2px;} #USbopLabel.USBOPvs .dailyVal, #GCbopLabel.GCBOPvs .dailyVal {display: none;} #USbopLabel.USBOPvs .USnuts, #GCbopLabel.GCBOPvs .GCnuts {padding:0;} #USbopLabel.USBOPvs .USnuts:after, #USbopLabel.USBOPvs .perContainer:after, #USbopLabel.USBOPvs .cal strong:after, #GCbopLabel.GCBOPvs .GCnuts:after, #GCbopLabel.GCBOPvs .perContainer:after, #GCbopLabel.GCBOPvs .cal strong:after {content:','} #USbopLabel.USBOPvs .USnuts span:last-child, #GCbopLabel.GCBOPvs .GCnuts span:last-child {float: none !important;margin:0;font-weight: normal !important;} #USbopLabel.USBOPvs .USnuts span:last-child:empty, #GCbopLabel.GCBOPvs .GCnuts span:last-child:empty {display: none;} #USbopLabel.USBOPvs .USnuts:not(.adjustSugar) span.fr:not(:empty):before, #GCbopLabel.GCBOPvs .GCnuts:not(.adjustSugar) span.fr:not(:empty):before {content:'('} #USbopLabel.USBOPvs .USnuts span.fr:not(:empty):after, #GCbopLabel.GCBOPvs .GCnuts span.fr:not(:empty):after {content:' DV)'} #USbopLabel.USBOPvs .USnuts:nth-child(16) .fr, #GCbopLabel.GCBOPvs .GCnuts:nth-child(16) .fr {display: none;} #USbopLabel.USBOPvs .leftpad, #GCbopLabel.GCBOPvs .leftpad {padding:0px!important} #USbopLabel.USBOPvs .adjustSugar, #GCbopLabel.GCBOPvs .adjustSugar {position:inherit;} #USbopLabel.USBOPvs .adjustSugar:before, #GCbopLabel.GCBOPvs .adjustSugar:before {content:'('} #USbopLabel.USBOPvs .USnuts.adjustSugar:not(:has(span.fr)):after, #GCbopLabel.GCBOPvs .GCnuts.adjustSugar:not(:has(span.fr)):after {content:'),'} #USbopLabel.USBOPvs .inline, #GCbopLabel.GCBOPvs .inline {width: auto;float:none;} #USbopLabel.USBOPvs .footer, #GCbopLabel.GCBOPvs .footer {display: none;} #USbopLabel.USBOPvs p:nth-child(8):after, #USbopLabel.USBOPvs p:nth-child(12):after, #GCbopLabel.GCBOPvs p:nth-child(8):after, #GCbopLabel.GCBOPvs p:nth-child(12):after {content:',\A';} #USbopLabel.USBOPvs .inline span, #GCbopLabel.GCBOPvs .inline span {margin:0;} #USbopLabel.USBOPdc, #GCbopLabel.GCBOPdc {width: 80.5mm;} #USbopLabel.USBOPdc .col, #GCbopLabel.GCBOPdc .col { width:85px; display:table-cell; text-align:right; border-right:1px solid; padding-right:5px; padding-left:5px; box-sizing: content-box;} #USbopLabel.USBOPdc .col:first-child, #GCbopLabel.GCBOPdc .col:first-child {padding-left: 0px;} #USbopLabel.USBOPdc .col:last-child, #GCbopLabel.GCBOPdc .col:last-child {padding-right: 0px; border-right: 0;} #USbopLabel.USBOPdc p .col:first-child, #GCbopLabel.GCBOPdc p .col:first-child {width: 100px!important;text-align: left;} #USbopLabel.USBOPdc .cal, #USbopLabel.USBOPdc .dailyVal, #GCbopLabel.GCBOPdc .cal, #GCbopLabel.GCBOPdc .dailyVal {padding:0pt} #USbopLabel.USBOPdc .cal .col, #GCbopLabel.GCBOPdc .cal .col { padding-bottom:5px; vertical-align: top; } #USbopLabel.USBOPdc .cal .col:first-child strong, #GCbopLabel.GCBOPdc .cal .col:first-child strong {display:inline-block; margin-top:21px;} #USbopLabel.USBOPdc .cal .xsmall, #GCbopLabel.GCBOPdc .cal .xsmall { display:block; margin-bottom:5px;} #USbopLabel.USBOPdc .USnuts .col span, #GCbopLabel.GCBOPdc .GCnuts .col span {width:100%; display:inline-block; box-sizing:border-box;} #USbopLabel.USBOPdc .USnuts .col span:not(.xthickborder), #GCbopLabel.GCBOPdc .GCnuts .col span:not(.xthickborder) {border-top:1px solid;} #USbopLabel.USBOPdc .USnuts, #GCbopLabel.GCBOPdc .GCnuts {padding:0pt; } #USbopLabel.USBOPdc .USnuts .col, #GCbopLabel.GCBOPdc .GCnuts .col { text-align:left; } #USbopLabel.USBOPdc .USnuts span>.b.addedNutrient, #USbopLabel.USBOPdc .USnuts.vitd .b, #USbopLabel.USBOPdc .USnuts.calcium .b, #USbopLabel.USBOPdc .USnuts.iron .b, #USbopLabel.USBOPdc .USnuts.potassium .b, #GCbopLabel.GCBOPdc .GCnuts span>.b.addedNutrient, #GCbopLabel.GCBOPdc .GCnuts.vitd .b, #GCbopLabel.GCBOPdc .GCnuts.calcium .b, #GCbopLabel.GCBOPdc .GCnuts.iron .b, #GCbopLabel.GCBOPdc .GCnuts.potassium .b {font-weight: normal !important;} #USbopLabel.USBOPdc .USnuts span>.b.addedNutrient, #USbopLabel.USBOPdc .USnuts.vitd span>.b, #USbopLabel.USBOPdc .USnuts.calcium span>.b, #USbopLabel.USBOPdc .USnuts.iron span>.b, #USbopLabel.USBOPdc .USnuts.potassium span>.b, #GCbopLabel.GCBOPdc .GCnuts span>.b.addedNutrient, #GCbopLabel.GCBOPdc .GCnuts.vitd span>.b, #GCbopLabel.GCBOPdc .GCnuts.calcium span>.b, #GCbopLabel.GCBOPdc .GCnuts.iron span>.b, #GCbopLabel.GCBOPdc .GCnuts.potassium span>.b {font-family: Arial, Helvetica, sans-serif !important;} #USbopLabel.USBOP #nutBlock .USnuts span.b, #USbopLabel.USBOPc #nutBlock .USnuts span.b, #USbopLabel.USBOPvs #nutBlock .USnuts span.b, #GCbopLabel.GCBOP #nutBlock .GCnuts span.b, #GCbopLabel.GCBOPc #nutBlock .GCnuts span.b, #GCbopLabel.GCBOPvs #nutBlock .GCnuts span.b {font-weight: normal !important;} #USbopLabel.USBOPdc .adjustSugar, #GCbopLabel.GCBOPdc .adjustSugar { width:80px!important; margin-left:20px; position:unset; } #USbopLabel.USBOPdc .footer, #GCbopLabel.GCBOPdc .footer {margin-top:4px;} .rtalign #USbopLabel h1.header, .rtalign #USbopLabel .perContainer, .rtalign #USbopLabel .perServ, .rtalign #USbopLabel .USnuts, .rtalign #USbopLabel .footer, #USbopLabel .USnuts.rtalign, .rtalign #GCbopLabel h1.header, .rtalign #GCbopLabel .perContainer, .rtalign #GCbopLabel .perServ, .rtalign #GCbopLabel .GCnuts, .rtalign #GCbopLabel .footer, #GCbopLabel .GCnuts.rtalign {text-align:right;} .rtalign #USbopLabel .servSize, .rtalign #USbopLabel .dailyVal, .rtalign #GCbopLabel .servSize, .rtalign #GCbopLabel .dailyVal {text-align: left;} .rtalign #USbopLabel .servSize span, .rtalign #GCbopLabel .servSize span {float:right!important} .rtalign #USbopLabel .USnuts span:last-child, .rtalign #GCbopLabel .GCnuts span:last-child {float:left!important} .rtalign #USbopLabel .USnuts.leftpad, .rtalign #GCbopLabel .GCnuts.leftpad {padding-left: 0px!important; padding-right:15px;} .rtalign #USbopLabel .adjustSugar, .rtalign #GCbopLabel .adjustSugar { right:20px;} #USbopLabel .servSize span:first-child, #GCbopLabel .servSize span:first-child {text-align: left;min-width: 100px;} @font-face { font-family: 'ArchivoBlack'; font-style: 700; src: url(media/fonts/ArchivoBlack-Regular.ttf) format('truetype'); } #USbopLabel:not(.USBOPvs) h1.header, #USbopLabel:not(.USBOPvs) .servSize > *, #USbopLabel:not(.USBOPvs) .perServ *, #USbopLabel:not(.USBOPvs) .cal, #USbopLabel:not(.USBOPvs) .cal .col strong:first-child, #USbopLabel:not(.USBOPvs) .dailyVal, #USbopLabel:not(.USBOPvs) .USnuts .b:first-child, #USbopLabel:not(.USBOPvs) .USnuts.protein *:first-child, #GCbopLabel:not(.GCBOPvs) h1.header, #GCbopLabel:not(.GCBOPvs) .servSize > *, #GCbopLabel:not(.GCBOPvs) .perServ *, #GCbopLabel:not(.GCBOPvs) .cal, #GCbopLabel:not(.GCBOPvs) .cal .col strong:first-child, #GCbopLabel:not(.GCBOPvs) .dailyVal, #GCbopLabel:not(.GCBOPvs) .GCnuts .b:first-child, #GCbopLabel:not(.GCBOPvs) .GCnuts.protein *:first-child { font-family: 'ArchivoBlack'!important;} #lPreviewNest .el .USBOPc, #lPreviewNest #USbopLabel.USBOPc *, #lPreviewNest .el .USBOP, #lPreviewNest #USbopLabel.USBOP *, #lPreviewNest .el .USBOPdc, #lPreviewNest #USbopLabel.USBOPdc *, #lPreviewNest .el .GCBOPc, #lPreviewNest #GCbopLabel.GCBOPc *, #lPreviewNest .el .GCBOP, #lPreviewNest #GCbopLabel.GCBOP *, #lPreviewNest .el .GCBOPdc, #lPreviewNest #GCbopLabel.GCBOPdc * {font-family: 'Roboto' !important;} #pageNest .el .USBOPc, #pageNest #USbopLabel.USBOPc *, #pageNest .el .USBOP, #pageNest #USbopLabel.USBOP *, #pageNest .el .USBOPdc, #pageNest #USbopLabel.USBOPdc *, #pageNest .el .GCBOPc, #pageNest #GCbopLabel.GCBOPc *, #pageNest .el .GCBOP, #pageNest #GCbopLabel.GCBOP *, #pageNest .el .GCBOPdc, #pageNest #GCbopLabel.GCBOPdc * {font-family: 'Roboto' !important;} #USbopLabel.USBOP h1.header, #GCbopLabel.GCBOP h1.header {font-size:20pt;} #USbopLabel.USBOP .xsmall, #GCbopLabel.GCBOP .xsmall {font-size:8pt !important;} #USbopLabel.USBOP .small, #GCbopLabel.GCBOP .small {font-size:10pt !important;} #USbopLabel.USBOP .large, #GCbopLabel.GCBOP .large {font-size:18pt !important;} #USbopLabel.USBOP .xxlarge, #GCbopLabel.GCBOP .xxlarge {font-size:24pt !important;} #USbopLabel:not(.USBOPvs) h1.header, #GCbopLabel:not(.GCBOPvs) h1.header {text-align:center !important;} #USbopLabel.USBOPdc h1.header, #GCbopLabel.GCBOPdc h1.header {font-size:3.95em !important;} #USbopLabel.USBOP .perContainer, #USbopLabel.USBOP .servSize, #GCbopLabel.GCBOP .perContainer, #GCbopLabel.GCBOP .servSize {padding:0px !important;line-height:120% !important} #USbopLabel:not(.USBOPvs) .servSize i>span:first-child, #GCbopLabel:not(.GCBOPvs) .servSize i>span:first-child {text-overflow: ellipsis;display: inline-block;white-space: nowrap;overflow: hidden;min-width: 70px !important;text-align:right !important;flex-grow: 1;} #USbopLabel:not(.USBOPvs) .servSize, #GCbopLabel:not(.GCBOPvs) .servSize {display: flex !important;justify-content : space-between;} #USbopLabel:not(.USBOPvs) .servSize i, #GCbopLabel:not(.GCBOPvs) .servSize i {display: flex !important;flex-grow: 1;overflow: hidden;} #USbopLabel:not(.USBOPvs) .servSize>span:first-child, #GCbopLabel:not(.GCBOPvs) .servSize>span:first-child {min-width: unset;white-space: nowrap;margin-right: 5px;} #USbopLabel:not(.USBOPvs) .perContainer>span, #GCbopLabel:not(.GCBOPvs) .perContainer>span {text-overflow: ellipsis; display: inline-block;overflow: hidden;max-width: 100%;white-space: nowrap;} #USbopLabel.USBOPc h1.header, #GCbopLabel.GCBOPc h1.header {font-size:21pt;} #USbopLabel.USBOPc .xsmall, #GCbopLabel.GCBOPc .xsmall {font-size:7pt !important;} #USbopLabel.USBOPc .small, #GCbopLabel.GCBOPc .small {font-size:8pt !important;} #USbopLabel.USBOPc .med, #GCbopLabel.GCBOPc .med {font-size:8pt !important;} #USbopLabel.USBOPc .large, #GCbopLabel.GCBOPc .large {font-size:18pt !important;} #USbopLabel.USBOPc .xxlarge, #GCbopLabel.GCBOPc .xxlarge {font-size:22pt !important;} #USbopLabel.USBOPc .perContainer, #USbopLabel.USBOPc .servSize, #GCbopLabel.GCBOPc .perContainer, #GCbopLabel.GCBOPc .servSize {padding:0px !important;line-height:120% !important} #USbopLabel.USBOPc .servSize i, #GCbopLabel.GCBOPc .servSize i {margin-left: -10px !important;} #USbopLabel.USBOPc .servSize>span:first-child, #GCbopLabel.GCBOPc .servSize>span:first-child {min-width:87px !important} #USbopLabel.USBOPdc .servSize i>span:first-child, #GCbopLabel.GCBOPdc .servSize i>span:first-child {width:150px !important;min-width:0px !important;} /*LOW RES FOP LABELS*/ .lowRes{color:black; font-size:13px;} .lowRes .fopLabel{} .lowRes .fopLabel table{ border-top:solid 2px #000; margin-bottom:5px;} .lowRes .fopLabel td,.lowRes.fopLabel td{ border:solid 2px #000; /*width:60px; padding:0 0 6px; */ font-size:20px;} .lowRes .fopLabel tr:first-child td{/font-size:11px; padding:10px 0 5px;/} .lowRes .red, .lowRes .green,.lowRes .orange{ background: none; color: inherit!important; text-shadow: none!important;} .lowRes .roundbottom{border:solid 2px; border-top: solid 0px} .lowRes .fopLabel td .medText{/font-size:14px!important;/} .lowRes .fopLabel{background:#fff;} .lowRes #drawOrigin{filter:grayscale(1);} .labelPrefs { float:right; box-sizing:border-box; background:url(media/icon-settings2.gif) no-repeat center; width:28px; height:24px; border:0; margin-right:8px!important; border-radius:0; margin-top:0px!important; } .labelPrefs.sel{ background-color: #1d76bb!important; z-index: 4; position: relative;} .labelPrefs.sel:after { content: " "; border: 6px solid transparent; margin: 24px 0 0 4px; position: absolute; border-top-color: #1d76bb;} .labelPrefsSub { background:#eee; width:367px; position:absolute; margin-top:24px; transition:all 0.5s; pointer-events:none; opacity:0; box-shadow:1px 2px 9px rgba(0,0,0,0.6) } .labelPrefsSub.sel{ opacity:1; pointer-events:all;} .labelPrefsSub input[type=checkbox]+label{ width: 175px; padding: 8px; font-size:13px; } #labelPrefsContent{ padding: 21px; padding-left: 35px;} /*MODERN STYLE: */ .fopLabel.modern table{border:0; margin-bottom:20px;} .fopLabel.modern td{background:#D5D5D5 !important; border:solid 2px #FFF; border-bottom: solid 2px #D5D5D5; border-top: solid 2px #D5D5D5; color:#000} .fopLabel.modern tr:first-child td{ padding-top:8px; border-bottom:solid 2px #d5d5d5; border-top:0; border-radius: 10px 10px 0px 0px;} .fopLabel.modern tr:nth-child(2) td:first-child{padding:3px 0 8px;} .fopLabel.modern .tLights td{ height:20px; border-left:2px solid #FFF!important; border-right:2px solid #FFF!important; border-radius:0 0 35% 35%; padding-bottom:40px;} .fopLabel.modern .tLights span{ border-width:2px;margin-top: -6px;} .modern td:first-child .roundbottom{border-color:#AAA} .modern .roundbottom { margin:-17px 9px; z-index:2; position:absolute; width:40px; height:40px; line-height:40px; padding:0; border-radius:50%; box-sizing: content-box; } .lowRes .modern .roundbottom {background:#FFF!important; border-color:#000!important}/* GENERIC */ td:has(#susBadge){ vertical-align: top; } .fp_badge{position: relative; margin: auto; font-family: Roboto; background: transparent; max-width: 100%;} .fp_badge>*{position: absolute; width:100%; left: 50%; top:50%; transform:translate(-50%,-50%); shape-rendering: geometricprecision;} .fp_badge svg{width: 100%;} .comPackTable .fp_badge svg{overflow: visible;} .fp_badge.noGrade .fp_grade { display:none; } #compare td:has(#susBadge){overflow:visible;}/*//Divya//#62621*/ /* COLOURS */ .fp_badge:not(.lowres).A, .fp_badge:not(.lowres).A+.fp_badge.qr{color: #6aa629;} .fp_badge:not(.lowres).B, .fp_badge:not(.lowres).B+.fp_badge.qr{color: #b6d900;} .fp_badge:not(.lowres).C, .fp_badge:not(.lowres).C+.fp_badge.qr{color: #f5e81f;} .fp_badge:not(.lowres).D, .fp_badge:not(.lowres).D+.fp_badge.qr{color: #f7931e;} .fp_badge:not(.lowres).E, .fp_badge:not(.lowres).E+.fp_badge.qr{color: #ff4242;} .fp_badge.default.A .fp_bg, .fp_bg_A{background-color: #6aa629;} .fp_badge.default.B .fp_bg, .fp_bg_B{background-color: #b6d900;} .fp_badge.default.C .fp_bg, .fp_bg_C{background-color: #f5e81f;} .fp_badge.default.D .fp_bg, .fp_bg_D{background-color: #f7931e;} .fp_badge.default.E .fp_bg, .fp_bg_E{background-color: #ff4242;} .fp_badge.default.X .fp_bg{ box-shadow:none; background:#FFF; } .fb_bg_C{ color: #333; } .fp_bg_X{ background-color: #DDD; } .fp_badge.bg .fp_bg{ background-color:#FFF; } .fp_bg_water{ background-color: #006a91; } /* DEFAULT BADGE */ .fp_badge.default{max-width: 175px; max-height: 175px; height: auto; aspect-ratio: 1; z-index: 1} .fp_badge.default .fp_bg{ width:159px; aspect-ratio: 1; margin-left: -0.9px; border-radius:500px; border: solid 4px #FFF; box-shadow: 0px 1px 10px #EEE; background: #EEE} .fp_badge.default .fp_main{margin: -2px;} /* LOWRES BADGE */ .fp_badge.lowres{width: 175px; height: 175px; color:#000!important; z-index: 1} .fp_badge.lowres.text_co2eq,.fp_badge.lowres.text_water{width: auto;height:auto;}/*overwrite style.css*/ .fp_badge.micro.lowres svg>path {fill: #000 !important;} /* LOGO BADGE */ .fp_badge.logo { max-width:175px; width: 100%; aspect-ratio: 4.3; background:url(media/components/fp_logo.svg) no-repeat center; background-size: 62%; } .lowRes .el[data-eltype='text'] .fp_badge.logo{background:url(media/components/fp_logo.svg) no-repeat center !important;} /* QR BADGE */ .fp_badge.qr { background:#FFF; height:120px; width:140px; border-radius:0 20px 20px 0; position:absolute; right:-85px; top:30px; padding:0px 0px 0px 43px; box-sizing:border-box; border:solid 4px currentColor; z-index:0; } .fp_badge.qr img { width:90px; border-radius:20px; position:static; transform:none; } .fp_badge.qr:after { content:'SCAN FOR DETAILS'; display:block; bottom:5px; position:absolute; font-weight:bold; font-size:10px; line-height:100%; } .fp_badge:not(.lowres).C .fp_badge.qr { border-color:#f5e81f } .fp_badge:not(.lowres).C .fp_badge.qr:after { color:#222 } .fp_badge.lowres .fp_badge.qr{ color:#000 } /* SMALL BADGE */ .fp_badge.small{width: 90px !important; height: 90px !important;} .fp_badge.small.bg .fp_bg{ height:100%; border-radius:50%; } /* MICRO BADGE */ .comPackTable .packBadges .fp_badge.micro { margin-bottom:25px; } .comPackTable .packBadges .fp_badge.micro:last-child { margin-bottom:10px; } .fp_badge.micro{ width: 110px !important; height: 30px !important;} .fp_badge.micro.noGrade{ width: 85px !important; } .fp_badge.micro>*:not(.fp_bg){ width:auto; left:0; top:0; transform:none; } .fp_badge.micro:not(.noGrade)>*:not(.fp_bg){ margin-left:25px; } .fp_badge.micro .fp_grade { margin:0px; top:0; left:-28px; width:30px; } .fp_badge.micro .fp_bar{background:#333; height:4px; left: 36px; top: 13px;} .fp_badge.micro.bg .fp_bg{ height:calc(100% + 10px); width:calc(100% + 18px); border-radius:10px; } .labelMaker .fp_badge.micro, .labelBack .fp_badge.micro{margin-top:5px; margin-bottom: 5px;} /*#79241*/ /* WATER BADGE */ .fp_badge.water{width: 175px; height: 60px; font-weight: bolder;} .fp_badge.water .fp_bg { color: #006a91; background-color:#CCC; width:49%; height:35%; left:12%; transform:none; top:32%; } .fp_badge.water.lowres .fp_bg{ color:#000;} /* DQI BADGE 42276 styling for the dqi badge*/ .fp_badge.dqi{width: 175px; height: 20px; font-weight: bolder;display: flex; align-items: center; margin: 15px auto 0;} .fp_badge.dqi>*{display: block;position: relative;transform: unset;top: 0;left: 0;} /* LOADER BOX */ #fp_loaderbox{max-width:176px;max-height:176px;width:100%;height:auto;aspect-ratio:1;} /* PACKAGING */ .packCreator #susPanel .packBadges{display: flex; margin: 10px 50px;} .packCreator #susPanel .fp_badge.micro svg{overflow: visible;} .livepreview #susWrapper .panelbody>.left { width: calc(100% - 235px);} /* Hack just happen in livepreview second line*/ /* Headless Chrome exports without all these fixes */ /** MOSTLY UNDO APP STYLE */ /*.mobitPrint .fp_badge>*, .pdfdownloadmode .download .fp_badge>*, .pdfonedownloadmode .pdfdownloadmode .fp_badge>*{top: 0; left: 0; transform:none} .mobitPrint .fp_badge:not(.small):not(.water), .pdfdownloadmode .download .fp_badge:not(.small):not(.water), .pdfonedownloadmode .pdfdownloadmode .fp_badge:not(.small):not(.water){padding-left: 1%;} .mobitPrint .fp_badge.lowres:not(.small):not(.water), .pdfdownloadmode .download .fp_badge.lowres:not(.small):not(.water), .pdfonedownloadmode .pdfdownloadmode .fp_badge.lowres:not(.small):not(.water){padding-top: 6.5%;} .mobitPrint .fp_badge.lowres, .pdfdownloadmode .download .fp_badge.lowres, .pdfonedownloadmode .pdfdownloadmode .fp_badge.lowres{width: auto; height: auto;} .mobitPrint .fp_badge:not(.water) .fp_bg, .pdfdownloadmode .download .fp_badge:not(.water) .fp_bg, .pdfonedownloadmode .pdfdownloadmode .fp_badge:not(.water) .fp_bg{position: static; top: auto; left: auto; display: block; width: auto; margin-left: auto; margin-right: auto;} .mobitPrint .fp_badge:not(.small):not(.water) .fp_bg, .pdfdownloadmode .download .fp_badge:not(.small):not(.water) .fp_bg, .pdfonedownloadmode .pdfdownloadmode .fp_badge:not(.small):not(.water) .fp_bg{width: 87%; margin-bottom: 6.5%;} .mobitPrint .fp_badge.default .fp_main, .pdfdownloadmode .download .fp_badge.default .fp_main, .pdfonedownloadmode .pdfdownloadmode .fp_badge.default .fp_main{margin: -1.3%;} .mobitPrint .fp_badge.small, .pdfdownloadmode .download .fp_badge.small, .pdfonedownloadmode .pdfdownloadmode .fp_badge.small{padding-top: 1%;} .mobitPrint .fp_badge.water .fp_bg, .pdfdownloadmode .download .fp_badge.water .fp_bg, .pdfonedownloadmode .pdfdownloadmode .fp_badge.water .fp_bg{width:51%; height:46%; top:29%; left:11.5%; transform:none; } .mobitPrint .fp_badge.water, .pdfdownloadmode .download .fp_badge.water, .pdfonedownloadmode .pdfdownloadmode .fp_badge.water{height: auto;} .mobitPrint .fp_badge.logo, .pdfdownloadmode .download .fp_badge.logo, .pdfonedownloadmode .pdfdownloadmode .fp_badge.logo{padding-top: 25%; background-size: auto; width: 55%; margin: 0% auto !important;}*/ /** EXPORT STYLE */ /*.mobitPrint .fp_badge.default, .pdfdownloadmode .download .fp_badge.default, .pdfonedownloadmode .pdfdownloadmode .fp_badge.default{padding-top: 5%;} .mobitPrint .fp_badge.default .fp_bg, .pdfdownloadmode .download .fp_badge.default .fp_bg, .pdfonedownloadmode .pdfdownloadmode .fp_badge.default .fp_bg{box-shadow: 0px 1px 0px #EEE !important;} .mobitPrint .fp_badge.default>*:not(.fp_bg), .pdfdownloadmode .download .fp_badge.default>*:not(.fp_bg), .pdfonedownloadmode .pdfdownloadmode .fp_badge.default>*:not(.fp_bg), .mobitPrint .fp_badge.lowres:not(.small):not(.water)>*:not(.fp_bg), .pdfdownloadmode .download .fp_badge.lowres:not(.small):not(.water)>*:not(.fp_bg), .pdfonedownloadmode .pdfdownloadmode .fp_badge.lowres:not(.small):not(.water)>*:not(.fp_bg){padding-top: 100%;} .mobitPrint .fp_badge.default .fp_bg, .pdfdownloadmode .download .fp_badge.default .fp_bg, .pdfonedownloadmode .pdfdownloadmode.fp_badge.default .fp_bg, .mobitPrint .fp_badge.lowres:not(.small):not(.water) .fp_bg, .pdfdownloadmode .download .fp_badge.lowres:not(.small):not(.water) .fp_bg, .pdfonedownloadmode .pdfdownloadmode .fp_badge.lowres:not(.small):not(.water) .fp_bg{width: 86% !important;padding-top: 86% !important;} .mobitPrint .fp_badge.default svg, .pdfdownloadmode .download .fp_badge.default svg, .pdfonedownloadmode .pdfdownloadmode .fp_badge.default svg, .mobitPrint .fp_badge.lowres svg, .pdfdownloadmode .download .fp_badge.lowres svg, .pdfonedownloadmode .pdfdownloadmode .fp_badge.lowres svg{position: absolute !important; top: 0 !important; padding-right: 100%; width: auto; min-height: 100% !important;} .mobitPrint .fp_badge.small>*:not(.fp_bg), .pdfdownloadmode .download .fp_badge.small>*:not(.fp_bg), .pdfonedownloadmode .pdfdownloadmode .fp_badge.small>*:not(.fp_bg){padding-top: 100%;} .mobitPrint .fp_badge.small svg, .pdfdownloadmode .download .fp_badge.small svg, .pdfonedownloadmode .pdfdownloadmode .fp_badge.small svg{position: absolute !important; top: 0 !important; padding-right: 100%; width: auto; min-height: 100% !important;} .mobitPrint .fp_badge.water>*:not(.fp_bg), .pdfdownloadmode .download .fp_badge.water>*:not(.fp_bg), .pdfonedownloadmode .pdfdownloadmode .fp_badge.water>*:not(.fp_bg){padding-top: 34%;} .mobitPrint .fp_badge.water, .pdfdownloadmode .download .fp_badge.water, .pdfonedownloadmode .pdfdownloadmode .fp_badge.water{padding-top: 32%;} .mobitPrint .fp_badge.water svg, .pdfdownloadmode .download .fp_badge.water svg, .pdfonedownloadmode .pdfdownloadmode .fp_badge.water svg{position: absolute !important; top: 0 !important; padding-right: 100%; width: auto; min-height: 100% !important;} */