@import url(/media/fonts/roboto.css); /*
blue: #22689E
	blue2: #1d76bb (light)
	blue3: #16598C (dark1)
	blue4: #195380 (dark2)
orange: #F60
	orange2: #ff7900 (light)
	orange3: #E84700 (dark)
*/
/*BASE STYLES*/

html,body{font-family:'roboto'; background:#FFF; }
body{ color:#333; font-size:14px; opacity:0; transition:opacity 1s}
body.on{background:#FFF; opacity:1;}
h1,h2,h3,h4,h5,h6{line-height:110%;}
h1{font-size:50px; top:-50px;}
/* h2{font-size:28px; margin:15px 0; font-weight:400; letter-spacing:-1px;} */
/* h3{font-size:30px; font-weight:normal; color:#1d76bb; margin:10px 0;} */
h4 { text-align:center; font-size:21px; padding:25px 0; margin:0; letter-spacing:-0.5px; }
	.page-content>h4{padding:25px 15px;}
	h4+.para{ margin-top: -15px;}
h5{ font-size:10px; text-transform:uppercase; font-weight:bold; color:#FFF; background:#444; text-align:center; padding:5px 20px; display:block; border-radius:0;}
	h5.blue{background:#16598C; color:#FFF;}
	h5.orange{background:#E84700; color:#FFF;}
/* h6{font-size: inherit; margin: 0 0 10px 0;} */
h2{font-size: 43px; font-weight: 100; margin:35px 0 20px; letter-spacing: -2px; line-height: 85%}
	h2.center { border-bottom:solid 1px #DDD; margin:0; padding:20px 0; }
	h2.blue{color: #16598C}
	h2.black{ font-size:24px; text-transform:uppercase; font-weight: 900; letter-spacing: -1px;}
h3{font-size: 17px; font-weight: bold; color:#1d76bb; letter-spacing: normal;}
	h2+h3{ margin:-10px 0 40px 5px; font-size:13px; text-transform:uppercase; font-weight:400; color:#777; }
h6{font-size: 9px; color: #F60; font-weight: normal;}
 ::placeholder{ letter-spacing:normal; transform:translate3d(0,-4px,0); }
/*input,textarea{cursor:text; user-select:auto; font-family:'roboto';}
.prefade{opacity:0!important; margin-top:30px!important; transition:opacity 300ms, margin-top 300ms}

.smallcaps{font-size:8px; text-transform:uppercase;}
.small{font-size:10px!important;}
.normal{font-size:12px!important;}
.med{ font-size:14px!important; line-height:140%; }
.large{font-size:18px!important; line-height:140%; color:#666}
.fr{float:right;}
.fl{float:left;}
.fc{ margin:30px auto;} */

/* .center{ text-align:center}
.hidden{display:none!important;}
hr{ height:1px; visibility:hidden; clear:both;}
svg{fill:currentColor; pointer-events:none; width:30px; height:30px; vertical-align: middle;}
.overflow{ overflow: visible!important; }
.b{font-weight: bold;}
.i{font-style: italic;} */

.orange{color:#F60;}
.blue{color:#1d76bb;}
.hback{background-color: #16598C};
.line{border-bottom:dotted 1px currentColor;}
.whiteback { color:inherit; }
p.greyback{padding: 20px;}
.fc:last-child{margin-bottom: 10px;}
form input:focus, form input[value]:not([value='']) { background:inherit; }
/*.nopad{padding:0}
.nomargin{margin:0}
.flipH{ transform:scaleX(-1);}
.flipV{ transform:scaleY(-1);}
.greyback{ background:#EEE;}
.counter { font-size:10px; font-weight:900; background:#F60; width:16px; height:16px; position:absolute; bottom:24px; color:#FFF; display:inline-block; border-radius:50px; line-height:16px; text-align:center; margin-left:-8px; pointer-events: none;}
.counter.inline { position:static; margin:0; vertical-align:middle; display:inline-block; } */
.txtLink{font-size: 10px; font-weight: 900; text-transform: uppercase;}
	.blue.active-state, .txtLink.active-state{ color:#F60;}
	.orange.active-state{ color:#1d76bb;}

.popup:not(.on){ overflow-x: hidden;}
.actions-modal.modal-in {padding-bottom: 15vh;}
.loadingicon{ width:55px; height:10px; margin:50px auto 0; background:url(/media/loading-bar.gif) no-repeat center; display:block; transform:scale(0.7); }
html.pull2refresh{background: #EEE;}
	html.pull2refresh.ready:before{content:'Release to Reload'; font-weight: 900; display: block; text-align: center; width:100%; margin-top:120px; color: #BBB; position: absolute;}
	#pull2refresh { content:''; display: block; background:#333 url(/media/svg/icons/frag#reload) no-repeat center; filter:invert(1); width:40px; height:40px;  position:fixed; top:-40px; left:50%; margin-left:-25px; border-radius:50%; z-index: 1}
	#pull2refresh.on{transition:background 300ms, width 300ms, height 300ms, margin 300ms; width:50px; height:50px; margin:-5px 0 0 -30px; animation: rotate 400ms infinite; background-color:#17B8FF; z-index: 9999; border:solid 5px #0099FF!important; box-shadow: 1px 1px 5px #FFF5}

.icon20,.icon20 b,.icon30,.icon50{width:35px;height:35px;line-height:35px;padding:0;text-align:center;font-weight: 900;border-radius:50%;display:inline-block;color:#FFF;background:rgba(0,0,0,.2);}
.icon20.active-state b,.icon30.active-state,.icon50.active-state{background:#F60;}
.icon50{ width:50px; height:50px; line-height:50px;}
.icon20{ line-height:100%; background:transparent; position:relative; z-index:1}
	.icon20 b{ width:21px; height:21px; line-height:21px; font-size:10px;}
	.icon20 b svg{width: 100%; height: 100%;}
.icon20 span,.icon30 span, .icon50 span{display:block; color:#BBB; font-style:normal; /* margin-top:17px; */ ; margin-top:5px; position:absolute; font-size:10px; font-weight:bold; line-height:100%; min-width:100%;}

.icon20.orange b,.icon30.orange,.icon50.orange{ background-color:#F60; }
	.icon20.orange.active-state b,.icon30.orange.active-state,.icon50.orange.active-state{background-color:#E84700}
.icon20.blue b,.icon30.blue,.icon50.blue{ background-color:#1d76bb; }
	.icon20.blue.active-state b,.icon30.blue.active-state,.icon50.orange.active-state{background-color:#16598C}
.icon20.white b,.icon30.white,.icon50.white{ color:#555; background-color:#FFF; font-weight: bold;}
	.icon20.white.active-state b,.icon30.white.active-state,.icon30.white.active-state{background-color:#F60; color: #FFF}
.icon20.border b,.icon30.border,.icon50.border{ border:solid 5px #DDD; box-sizing:content-box}
	.icon20.border:hover b,.icon30.border:hover,.icon50.border:hover{ border-color:#AAA}
.icon20.clear b,.icon30.clear,.icon50.clear{ background:transparent; color:#AAA; }
	.icon20.clear.active-state b,.icon30.clear.active-state,.icon50.clear.active-state{color:#F60;}
.icon20.grey b,.icon30.grey,.icon50.grey{background: #777;color:#FFF;font-weight:bold;}
	.icon20.grey.active-state b,.icon30.grey.active-state,.icon50.grey.active-state{background-color:#16598C;}
.icon20.black b,.icon30.black,.icon50.black{background: #EEE;color:#444;font-weight:bold;}
	.icon20.black.active-state b,.icon30.black.active-state,.icon50.black.active-state{background-color:#F60; color: #FFF}
.icon50 svg{width:30px; margin:0 auto;}
.icon30 svg{width:16px;margin-top: -3px;}

h4 .icon20.fl{ margin:-4px -50px 0 15px;}
h4 .icon20.fr{ margin:-4px 15px 0 -50px; transform: translateY(-100%);}

button{display:inline-block; padding:10px 20px; outline: none; border:0; background:none; font-weight:bold; text-transform:uppercase; font-family: Roboto; vertical-align:middle}
	button.wide{ min-width:100px;}
	button.icon50{ min-width:auto;}
	.button{  background-color:rgba(0,0,0,0.05);}
	button.clear{ background:transparent; color:#AAA;}
	button.orange{ background-color:#F60; color:#FFF;}
		button.orange.active-state{background-color:#E84700;}
		.button.orange .ripple-wave {background-color: #bb3900;}

	button.blue{ background:#22689E; color:#fff; font-size:10px; }
	button.blue.active-state{background-color:#16598C;}
		button.blue .ripple-wave {background-color: #1d76bb;}

	button.lgrey{ background:#E5E5E5; color:#333; font-size:10px; }
	button.lgrey.active-state{background-color:#F60; color: #FFF}
		button.lgrey .ripple-wave {background-color: #bb3900;}

	.pillbtn, .pillmenu button{display: inline-block; font-size: 10px; padding: 0 20px; border-radius: 50px; line-height: 25px; margin: 3px; height: auto; transition: background 300ms}
		.pillmenu button.lgrey{background: #BBB; color: #FFF}
		.pillmenu button.on{background: #F60!important;}
		.pillbtn.fc{display: block; margin: 30px auto}
		.pillbtn.fc+.pillbtn.fc{margin-top:0}

.morphMenu>*{transition:margin 300ms, transform 300ms, opacity 300ms; max-width:120px; }
	.morphMenu:not(.on)>:not(:first-child),
	.morphMenu.on>:first-child{ opacity:0; pointer-events:none; max-width:0px; padding:0; min-width:0; transform:scale(0.8); margin:0; }

.page-content{padding: 80px 0 200px!important; overflow-x:hidden!important;}
.content-block:last-child{margin:0; padding-bottom:200px!important;}
	.content-block:empty{display:none;}
.para{padding:30px 25px; line-height:150%; }
	.para+.para{padding-top: 0;}
	.para ol, .para ul{ margin-left: 30px; line-height: 130%; }
	.para ol, .para ul{ list-style: none; counter-reset: li;}
	.para li{ margin-top: 20px;}
	.para li:before { content: ""; display: inline-block; margin:0px 10px 0px -20px; width: 10px; height: 10px; margin-right: 10px; background-color: #444; border-radius: 50px; }
	.para ol>li{ counter-increment: li; }
	.para ol>li:before { content:counter(li); margin:0px 10px 0px -30px; width:20px; height:20px; line-height:21px; color:#FFF; text-align:center;font-weight:900; letter-spacing:-2px; text-indent:-2px; transition:background 300ms; font-size:11px;	}
	.expandable{max-height:150px; transition: max-height 500ms; overflow:hidden; position:relative}
	.expandable.on{max-height:800px; padding-bottom:25px;}
	.expandable:after { content:'...read on'; color:#1d76bb; text-transform:uppercase; font-size:12px; position:absolute; bottom:0; font-weight:bold; width:100px; right:0; text-align:center;  line-height:25px; background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 15%,rgba(255,255,255,1) 100%); }
		.expandable:active:after, .expandable.active-state:after{ color:#F60; }
		.expandable.on:after{ content:'close'; background:#FFF}
.list b{ float:left; width:15%;}
	table.list td:first-child{ width:15%; }
	table.list td{ line-height:120%; padding:7px 0; border-bottom:dotted 2px #EEE}
	table.list tr:last-child td{ border-bottom:0;}
.divider{ background:#EEE; text-align:center; font-weight:bold;}
	p.divider{ display:block; font-family:Arial; font-size:9px; padding:1px; margin:20px 0 10px; background:#EEE; text-align:center; text-transform:uppercase; font-weight:900;  color: #666; line-height: 22px;}
		.content-block p.divider{margin-left:-26px; margin-right: -26px;}
	.divider:not(.leader):before, ..divider:not(.leader):after{content:'●'; margin:0px 5px; font-size: 7px; vertical-align: middle; vertical-align:top; display:inline-block;}
	hr.divider{ visibility:visible; border:0; padding:4px; }
	.para+hr, .divider+.para{ margin-top:0; padding-top:0;}
	h3.divider{padding: 15px; background: #EEE; color: #444}
		h3.divider+.greyback{margin-top:-5px; border-top:solid 1px #DDD;}
		h3.divider:before, h3.divider:after{content:'';}

.unavailable { font-size:22px; padding:40px; margin:20px; color:#DDD; font-style:italic; white-space:normal; text-align:center; line-height:140%; text-transform:none; font-weight:bold; letter-spacing:-0.5px; }
	.unavailable.greyback{margin:0;}
.portions .unavailable{font-size:14px;margin:0px;padding: 60px 40px;}

.bluetooth { width:56px; height:56px; left:50%; top:50px; position:absolute; color:white; background-color:#999; z-index:2; border-radius:50%; text-align:center; font-size:10px; line-height:10px; transition:all 600ms; border:solid 3px #FFF; box-shadow:1px 1px 5px rgba(0,0,0,0.5); transform:translate(-50%); margin-top:-15px; }
	.bluetooth *{pointer-events: none;}
	.bluetooth:active, .bluetooth.active-state{background: #F60!important; transition:none}
	.nophoto .bluetooth{ margin-top: -45px;}
	.bluetoothImg svg{  height: 20px;  width: 20px;  background-color:rgba(0,0,0,0.3);  border-radius: 50%;  padding: 3px;}
	.bluetoothImg{  height: 30px; padding-top: 5px;}
	.bluetooth.connected{background-color: #1d76bb;}
.bluetooth.connected .bluetoothImg:before, .bluetooth.connected .bluetoothImg:after { content:'\2022'; margin:0 -6px; position:relative; color:#FFF; font-size:9px; vertical-align:middle; }
		.bluetooth:not(.connected){width:36px; height:36px}
		.bluetooth:not(.connected) .bluetoothValue{display: none;}5p
		.bluetooth.connecting svg{ animation:orbit2 1.5s infinite ease-in-out; background:#22689e;}

/*PANES & LAYOUT*/
.views { height:100%; overflow:auto; -webkit-overflow-scrolling:touch; }
#swipeFromLeft{position:fixed; top:80px; left:0; height:100vh; width:8px; background:transparent; z-index:99999}
#pTemplate,#library{display:none;}
.preloader-indicator-modal{border-radius:50%; background:#FF6600;}
.page:before { content:''; position:fixed; width:100%; height:40px; background:linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); pointer-events:none; z-index:2; bottom:0; left:0 }
.page, .navbar-inner, .not-visible{visibility:hidden;}
.page:last-child, .navbar-inner:last-child{visibility:visible;}
.page.dark{ackground:#333; color:#FFF;}

#left{background:#333; width:80px; padding-top:80px; text-align:center; overflow: visible; box-shadow: 0 0 20px rgba(0,0,0,.5) inset;}
#left.active.on{z-index: 9999;  }

body.with-panel-left-reveal .panel-overlay, body.with-panel-right-reveal .panel-overlay{ background:#FFF; opacity:0.5}
body.with-panel-left-reveal .views,
body.with-panel-left-reveal .panel-overlay,
body.with-panel-left-cover .panel-left{transform: translate3d(80px,0,0); box-shadow:none}
	#left a{display:block; padding:15px 0px; -webkit-tap-highlight-color:#ff6600; color:#FFF; text-transform:uppercase; font-size:8px; font-weight:bold; box-sizing:border-box; transition:background 300ms}
	#left>a svg { display:block; margin:0 auto 3px; width:20px; }
	#left a.on{background:#111;}
	#left a.active-state{color:#F60;}
#left a:after { content:''; border-style:solid; border-width:6px 0 6px 5px; border-color:transparent transparent transparent #111; position:absolute; right:-5px; margin-right:7px; margin-top:-18px; transition:margin-right 200ms; opacity:0 }
#left.on a.on:after{ margin-right:0; opacity:1 }
#left.on:not(.active) a.on:after{ border-color:transparent transparent transparent #F60;  }

#left #footermenu { position:absolute; bottom:0; text-align:center; width:100%; }
	#left #footermenu a{padding:0; width: 100%; white-space: nowrap; line-height:56px; height:56px; border-top:solid 1px #444;}
	#left #footermenu svg { width: 16px; float:left; margin:13px -6px 0 8px; }

#librobar { transition:top 250ms 150ms, border 200ms 100ms, background-position-y 300ms 250ms; top:-90px; height:80px; z-index:9999; position:fixed; width:100%; border-bottom:solid 5px #F60; background:#FFF url(../media/logo.png) no-repeat center; background-size:145px; background-position:calc(50% + 5px) -50px; padding-right:15px; }
	#left.active+#librobar{ top:0; border-bottom:solid 3px #999; background-position-y:14px;}
	#librobar .close-panel svg{ width:16px; margin:35px -20px; fill:#F60; transition:margin 300ms, fill 200ms}
	#librobar .close-panel:active svg{fill:#F60;}
	#librobar .icon30.fr{ margin:25px 0;}
	#librobar .icon30.fr svg{ width:20px;}
	#left.active+#librobar .close-panel svg{ display:none; fill:#666;}/*To Hide menu icon*/
/*.statusbar-overlay{background: #fff;}*/ /*to hide the top bar in iphones*/

/*NAV BARS*/
.navbar{pointer-events:none;}
.log:not(.scrolled) .navbar{ z-index:1;}
.log:not(.scrolled) .page-content{ padding-top: 10px!important; margin-top: 70px;} /* fix first orange btn cutoff in log*/
.navbar-inner{height:80px; background: #195380; text-transform:uppercase;}
.navbar .center, .subnavbar .center, h1{ font-size: 20px; text-transform:uppercase; position:absolute; width:100%; text-align:center; margin:0; pointer-events:none; font-weight:bold;left:0;}
	.navbar .center>img:only-child { max-height:60px; max-width:150px; vertical-align:middle; }
	.page.whiteback .navbar-inner{ background:#FFF;}
	.page.whiteback .navbar-inner h1, .page.whiteback .navbar-inner a.link{color:#999;}
	.page.whiteback .navbar-inner .center{ color:#444;}
	.page.whiteback .navbar-inner .shortName{text-transform: none;}
	.page.whiteback .navbar svg{color:#AAA;}
	.page.whiteback .navbar-inner{ background:#FFF; }
	.page.whiteback.border .navbar-inner{ border-bottom: solid 5px #EEE}
	.page.grey .navbar-inner, .page.grey .navbar-inner h1, .page.grey .navbar-inner a.link{color:#444;}
	.page.grey .navbar-inner .small{ color:#999; }
	.page.border .navbar-inner{ border-bottom:solid 5px #DDD ;}
	.page.greyback .navbar-inner{background:#666;}


.navbar h1{ text-transform:uppercase; text-align:center; font-size:29px; letter-spacing:-1px; width:100%; margin-left:-50px}
.navbar .menubtn{display:none!important;}
	.page.nobackbtn .navbar .menubtn{display:block!important; }
	.navbar svg{height:20px; width:20px; color:#FFF; transition:none!important;}
	.menubtn svg{width:17px!important; height:17px!important;}
	.navbar .active-state svg{ color:#F60!important; }
	.navbar .center .small{ line-height: 100%; margin-top: -15px; font-weight:normal;}

.nobackbtn .backbtn{display:none!important;}
.navbar.navbar-hidden{ transform: translate3d(0,-150%,0);}
.navbar, .subnavbar{ background:transparent; }

.toolbar{height:40px; background:#DDD; font-weight:bold; font-size:15px; overflow:visible; }
	.toolbar.black{ background: #333;color:#FFF; border-bottom: solid 4px #DDD;}


/*AI PANEL*/
#aiPanel { z-index:20000; white-space:nowrap; position:fixed; bottom:0; right:0; left:0; background:#333; color:#FFF; font-family:Arial; overflow:visible; box-sizing:border-box; max-height:0; padding:0; border-radius: 40px 40px 0 0; transition:all 300ms; }
	#aiPanel.on{padding:3px 15px 64px 15px;max-height:320px;}
	#aiPanel p { position:relative; display:inline-block; opacity:0; clear:both; background:#444; padding:10px 20px; margin:4px 0; border-radius:20px 20px 20px 0; font-size: 14px; transition:background-color 300ms,margin-left 400ms,margin-right 400ms,opacity 500ms 150ms,font-size 300ms; margin-left:-100%; max-width:97%; line-height:120%; word-wrap:break-word; white-space:normal;}
	#aiPanel p:first-child{ margin-top:0;}
	#aiPanel p:last-child{ margin-bottom:0;}
	#aiPanel p.active-state, #aiPanel input.active-state{background-color:#F60!important;}
		#aiPanel p.fl.on, #aiPanel p.fr.on{opacity:1; margin-left:0;margin-right:0; }
		#aiPanel p:empty{display:none;}
		#aiPanel p.fr{background:#777; margin-right:-100%; border-radius:20px 20px 0 20px}
		#aiPanel p.fl{background:url(../favicon.ico) left center #444 no-repeat; background-position: 8px 11px; padding-left: 30px;}
		/* #aiPanel p:only-of-type{font-size:16px;} */
		#aiPanel p.full { padding:25px 20px 25px 30px; line-height:130%; font-size:16px; margin:10px 0 60px; }
			#aiPanel p.full.fl{ background-position: 8px 27px;}
		#aiPanel a{color: #F60; font-weight: bold}
		#aiPanel .button{ background:#F60; color:#FFF; font-size:10px; font-weight:bold; display:inline-block; padding:0 10px; line-height:30px; height:auto; vertical-align:middle; margin:5px 0 0 5px;}
		#aiPanel .button.grey, #aiPanel .button[data-action='cancel'], #aiPanel .button[data-action='discard']{ background:#666;}
		#aiPanel img.gif { display:block; margin-top:5px; border-radius:7px; border:solid 4px #555; }


	#aiPanel input { position:absolute; display:block; bottom:0; right:-50%; width:100px; padding:12px 50px; border:solid 2px #F60; margin-bottom:12px; border-radius:50px 0 0 50px; background-size:24px; color:#FFF; background-color:#F60; font-size:16px; opacity:0; pointer-events:none; transition:all 400ms 100ms; }
		#aiPanel.on input{opacity:1;pointer-events:all;background-color:#222;border-color:#444;width: calc(100vw - 55px);right:40px;z-index: 1;}
		#aiPanel.on input:focus{ border-color:#F60;}
		#aiPanel input+svg{fill:#888;position: fixed;width:30px;bottom:18px;left: 30px;z-index:1;display:none;transition:fill 300ms;}
		#aiPanel.on svg{ display:inline-block; }
	#aiPanel.quickmenu2{ border-top:solid 4px #555;max-height: 420px;border-radius: 100% 0 0 0;height: 420px;padding: 40px 15px 0 0;width: 110%;left: auto; }
		#aiPanel:not(.quickmenu2) #quickmenu{ position:absolute; opacity:0; right: 12px; bottom:-230px; background: #444;padding: 13px 10px;border-radius: 100px;width: 55px;height: 225px; transition: bottom 200ms 50ms, opacity 500ms}
			#quickmenu:after { content:""; display:block; width:80px; background:#444; height:80px; border-radius:50%; margin:-12px -22px; position:relative; z-index:-1; }
			#aiPanel.quickmenu:not(.quickmenu2) #quickmenu{bottom: 35px; opacity:1}
		#quickmenu2{ display: none; }
			#quickmenu button{transition: all 400ms;display: block;margin: 0 0 10px;}
				#quickmenu button:nth-child(2){background-color: #FF8000}
				#quickmenu button:nth-child(3){background-color: #F60}
				#quickmenu button:nth-child(4){background-color: #F24A00}
				#quickmenu button:active{background: inherit;}
				#quickmenu button span{display: none;}
				#quickmenu button .med { font-size:20px!important; font-weight:normal; margin-top:3px; display:inline-block; }
				#quickmenu button.prefade{margin: 0 -100px 0 5px!important; transform: scale(0.5)}
			#aiPanel.quickmenu2 #quickmenu2{ display: block; }
			#aiPanel.quickmenu p{ max-width: calc(100% - 160px);}
			#aiPanel.quickmenu2 button {float: right;display:block;background-color:#22689E;margin: 5px 4px 4px 80%;}
			#aiPanel.quickmenu2 button, #aiPanel.quickmenu2 button.active-state{background:#F60;border: solid 3px #F80;box-sizing: content-box;}
			#aiPanel.quickmenu2 button span {display:inline-block;position:absolute;margin-left: calc(-40px - 100%);font-size: 14px;color:#CCC;text-transform:none;font-style:italic;font-family:Roboto;text-align: right;width: 100%;}
			#aiPanel.quickmenu2 #extendbtn {position:absolute;top: -20px;right: 15px;text-indent:-35px;overflow:hidden;background: #222;font-size:13px;font-weight:bold;color:#DDD;text-transform:none;border: 0;padding: 2px;}
			#aiPanel.quickmenu2 #extendbtn:before{content:'x'; margin-left: 30px; float: right;}
			#aiPanel.quickmenu2 #quickmenu:after {display: none;}

	/*open basket*/
		#aiBasket { position:absolute; background:#414141; box-shadow:0 -2px 7px rgba(0,0,0,0.3); left:0; right:0; top:100%; z-index:11001; overflow:visible; border-radius:40px 40px 0 0; transition:transform 300ms, opacity 200ms; color:#FFF; display:flex; flex-direction:column; min-height: 75px; max-height:85vh; will-change:transform; transform:translatey(-100%); }
			#aiBasket.on{max-height:85vh; padding-top: 2px;overflow: hidden;border-radius: 18px 18px 0 0;}
			#basketHead{width:90%;margin: 10px auto 0px; }
				#aiBasket h1{position:static;font-size: 11px;color: #FFF; letter-spacing: normal}
				#basketHead a{ margin:-6px -17px -6px 17px;}
				#basketHead button { margin:-12px 15px 0 -15px; transform:scale(0.8); }
					#basketHead button svg{ width:19px;}
					#basketBody { overflow-y:auto; overflow-x:hidden; width:calc(100% - 16px); margin:0 auto; min-height: 0; transition: min-height 0.3s;}
					#basketBody.minHeight{ min-height: 185px;}
				#basketBody { overflow-y:auto; overflow-x:hidden; width:calc(100% - 16px); margin:0 auto; }
				#aiBasket .listItem{ border-top:solid 1px #DDD; background: #494949; border-color: #5c5c5c!important; width:100%!important; transition: transform 300ms}
				#aiBasket .listItem.prefade{margin:0!important; opacity:1!important; transform: translateX(-100%);  transition: transform 300ms}
				#aiBasket .listItem:first-child{ border-top:solid 1px #666;}
				#aiBasket .listItem.custom{ border:none;}
					#aiBasket .quant{background:#555; color: #CCC;}
					#aiBasket .listItem p, #aiBasket .quant strong{color: #FFF;}
				#aiBasket .listImg{transition: all 300ms 300ms}
			/*closed basket*/
			#aiBasket:not(.on), #aiBasket.shrinking{ color: #FFF; transform:translatey(-75px);}
				#aiBasket.closed{ transform:translatey(75px);}
				#aiBasket.closed #basketTitle{display: none!important;}
				#aiBasket:not(.on) #basketBody{height: 75px}
				#aiBasket:not(.on) #basketHead { margin:0; }
				#aiBasket:not(.on) #basketHead>*:not(h1){ display:none; }
				#aiBasket:not(.on) #basketBody { pointer-events:none; padding: 0 70px 0 0px;}
					#aiBasket:not(.on) h1 { background:#666; color:#FFF; position:absolute; display:inline-block; top:-8px; padding:0 20px; line-height:16px; font-size:10px; border-radius:50px; text-transform:uppercase; font-weight:900; left:50%; transform:translateX(-50%); width:auto; }
					#aiBasket:not(.on) .listItem{ background:none; display: inline;}
					#aiBasket:not(.on) .listItem *, #aiBasket:not(.on) #basketFooter, #aiBasket:not(.on) .exp{ display:none}
						#aiBasket:not(.on) .listImg{display:block; border-radius:50px; height: 50px; width: 50px; border:solid 3px #FFF; box-shadow: 1px 1px 5px #222;  margin:0px 1px 2px; transform: translate(25%,25%) scale(0.4); opacity: 0; transition-delay:0ms;}
						#aiBasket:not(.on) .listImg.prefade{ margin-top: 0!important}
						#aiBasket:not(.on) .listImg:not(.prefade){ transform: translate(25%,25%); opacity: 1; }
						#aiBasket:not(.on) .listImg.svgicon *{display:block;}
						#aiBasket:not(.on) .listImg svg{margin-left: 6px;}
			#aiBasket.pickerOn{ top: calc(100% - 210px); }
			#basketFooter{clear:both;/* height:75px;line-height:75px;padding: 0 65px 0 10px; */}
			   #basketFooter #savetoOpts {position:absolute;width:115px;background:#ff6600;right: 55px;border-radius:20px 20px 0px 0px;bottom: 55px;/* padding-top:10px; */max-height:0px;overflow:hidden;font-weight:bold;transition:all 300ms;}

				#basketFooter #savetoOpts.on {max-height:205px;overflow:auto;box-shadow:2px -3px 5px #0002;text-shadow:0px 1px 3px #0004;padding: 4px 5px 0 4px;}
				   #basketFooter #savetoOpts.on+button:after{transform: rotate(180deg);}
				   #basketFooter #savetoOpts.on+button{border-radius: 0px; background:#ff7900; text-shadow:0px 1px 3px #0004;}
			   #basketFooter #savetoOpts span { display:block; line-height:initial; padding:10px 9px; text-transform:uppercase; font-size:10px; white-space: nowrap; }
				   #basketFooter #savetoOpts span:first-child{padding-top: 11px;}
				   #aiBasket:not(.order) #savetoOpts span:last-child{display: none;}
				   #aiBasket.recipe-search #savetoOpts span:last-child{display: inherit;}
				   .basketExtras{line-height:10px; padding:20px 18px 6px 20px; font-size:10px; background:#222; text-align:left; position:relative; margin-left:-10px; border-radius:0px 50px 50px 0px; color:#fff;width:80px; height:36px;}
				   #basketPrice { display:block; width:96.5%; height:auto; line-height:30px; margin:0 auto; padding:10px 15px; text-align:right; font-size:14px; border-radius:0 0 20px 20px; font-weight:bold; }
				   #basketPrice::before { content:'TOTAL'; display:inline-block; float:left; }
				   #basketPrice .small{float:left;font-style: italic; margin-left: 5px;}
				   #basketPrice .ordertotal{border: 1px #AAA solid;border-right: 0px;border-left: 0px;border-bottom: 0px;}
				   #basketTime{margin-top:20px; margin-left:0px;}
			   #basketTime {  line-height:10px; padding:20px 18px 6px 23px; font-size:10px; background:#111; text-align:left; position:relative; margin-left:-10px; border-radius:0px 50px 50px 0px; color:#fff;width:80px; height:36px;}
				   #basketTime.hideDate span:last-child{display: none;}
				   #basketTime.hideDate span:first-of-type{padding:15px 0px 0px 23px}
				   #basketTime svg{margin: -12px 0px 0px 10px;}
				   #basketTime span{display: block;}
				   #basketTime span:first-of-type{ font-size:11px; position:absolute; width:77px; top:0px; height:35px; left:0px; padding:10px 0px 0px 23px; box-sizing:border-box;}
				   #basketTime span:last-child{color:#AAA;}
			#basketActionA { position:relative; margin:20px 55px; border-radius:0; padding:0; width:115px; text-align:left; padding-left:10px; border-radius: 50px 0px 0px 50px; transition:all 300ms}
   				#basketActionA span{white-space: nowrap;  text-overflow: ellipsis;  width: 75px;  display: inline-block;  overflow: hidden;vertical-align: top;}
			   #basketActionA:before {  content:attr(data-content); background:#555; display:inline-block; padding:0px 100px 0px 13px; border-radius:50px 0px 0px 50px; position:absolute; left:-27px; z-index:-1;}
			   #basketActionA:after{ content:'▼'; margin-left:2px; transition:all 300ms; display:inline-block; }
				#basketActionB{padding:0px 20px;margin:20px 10px;}
		   #aiBasket.recipe-search #notesInput,#aiBasket.recipe #notesInput{display:none;}

	#aiBTNtooltip { position:fixed; bottom:25px; right:45px; z-index:20000; padding:3px 7px 3px 15px; background-color:#195380; color:white; border-radius:20px 0 0 20px; overflow:hidden; width:1px; white-space:nowrap; transition:width 300ms}
	#aiBTNtooltip:after { content:''; border-style:solid; border-width:4px 0 4px 6px; border-color:transparent transparent transparent #ffffff; margin:0 4px; display:inline-block; }
	#aiBTNtooltip.on{ right:65px; width:130px}
	#aiBTN { position:fixed; z-index:20000; width:64px; height:64px; line-height:64px; bottom:6px; right:6px; transition:all 150ms; background-color:#f24a00; box-shadow:1px 1px 5px rgba(0,0,0,0.7); border:5px solid #FF6600; font-size:10px; font-weight:bold; color:#FFF; will-change:transform; box-sizing:border-box; -webkit-transform:translateZ(0); }

	#aiBTN.on, #aiBTN.focus{border-color:#f24a00; background-color:#F60; }
		#aiBTN.loading{ transform:scale(0.9) translateZ(0); -webkit-transform:scale(0.9) translateZ(0); background:#22689E; border-color:#1d76bb}
		#aiBTN svg{ height:29px; margin-top:-11px; -webkit-transform:translateZ(0); transition:transform 200ms;}
		#aiBTN.loading svg{transform:rotateY(90deg) scale(0.8) translateZ(0);-webkit-transform:rotateY(90deg) scale(0.8) translateZ(0);}
		#aiBTN.on svg{animation:swell 1s infinite; -moz-animation:swell 1s infinite; -webkit-animation:swell 1s infinite; -o-animation:swell 1s infinite;}


		#aiBTN.on:before, #aiBTN.on:after{ content:''; width:80%; height:80%; border-radius:50%; background-color:#FFF; opacity:0.2; position:absolute; top:10%; left:10%; -webkit-animation:bounce 800ms infinite ease-in-out; animation:bounce 800ms infinite ease-in-out; will-change: transform}
		#aiBTN.on:after { -webkit-animation-delay:400ms; animation-delay:400ms; }

	#aiTabs{ position:absolute; left:50%; top:0; transform:translate(-50%,-60px); z-index:20000; display:flex; text-align: center; transition:transform 200ms, opacity 250ms 200ms}
	#aiTabs.picker-open{transform: translate(-50%, 100%) !important;}
		#aiTabs a { background:#EEE; color: #444; border:solid 2px #FFF; box-shadow: 1px 1px 5px rgb(0 0 0 / 50%); transition: background 250ms, bottom 200ms}
			#aiTabs a.on { background:#16598c; color:#FFF; }
			#aiTabs a:active, #aiTabs a.active-state { background:#F60; color:#FFF; }
			#aiTabs svg { width: 20px; height: 20px; }
			#aiTabs a:first-child, #aiTabs a:last-child{ width:65px; height:40px; line-height:35px; }
			#aiTabs a.icon50{ line-height:44px; margin:-5px -10px 0; z-index: 1; position: relative;}
			#aiTabs a:first-child{border-radius:50px 0 0 50px; padding-right: 5px;}
			#aiTabs a:last-child{border-radius:0 50px 50px 0; padding-left: 5px;}
		#aiBasket:not(.closed)+#aiPanel #aiTabs { transform: translate(-50%,-135px); }
		#aiBasket.on+#aiPanel #aiTabs { opacity:0; pointer-events: none; transition:transform 200ms}


	#aiMenu { position:fixed; bottom:74px; right:16px; z-index:20000; width:40px; display:flex; flex-flow:column-reverse; }
		#aiMenu a { border:solid 3px #0002; margin-top: 3px; box-shadow:0px 1px 5px rgba(0,0,0,0.5); box-sizing:content-box; transform: scale(0.3); opacity: 0; transition: transform 300ms, opacity 300ms}
		#aiMenu a.on{transform: scale(1); opacity: 1}


	/* not used anywhere .gobtn.moveLog, .backbtn.moveLog{bottom:130px !important;} */
	#leftBtn, .goHomeBTN { position:fixed; z-index:2; bottom:19px; left:-3px; background:#22689E; transition:none; color:#FFF; font-size:10px; padding-left:5px; width:110px; height:41px; text-align:right; overflow: visible; border:solid 2px #FFF; line-height:36px; border-radius:0 50px 50px 0; box-shadow:0px 1px 5px rgba(0,0,0,0.5); }
		#leftBtn{display:none;}
		#leftBtn.cancel {background:#444;}
		#leftBtn.back{width:auto; padding:0px 20px 0px 10px;}
		#leftBtn.back span {float:right;}
		#leftBtn.on, #leftBtn.backbtn{display:block;transition:all 200ms;}
		#leftBtn.backbtn span { float:right; width:80px; text-align:center; }
		#leftBtn.trackerbtn{display:block; border-radius: 50px;}
		#leftBtn:active, #leftBtn.active-state{ background:#195380; }
		#leftBtn svg { height:18px; width:auto; margin:0 6px 0 2px; }
		#leftBtn .ripple-wave {background-color: #1d76bb;}
	/*	.goHomeBTN{ left: 150px; text-align: center; opacity:0; transition:opacity 500ms; pointer-events:none}*/
		.goHomeBTN{ right:-3px; text-align:center; opacity:0; transition:opacity 500ms; pointer-events:none; left:auto; top:-54px; width:80px; line-height:24px; height:30px; position:absolute; border-radius:50px 0 0 50px; top:26px;position: fixed;}
		.goHomeBTN.on{ opacity:1; pointer-events:all;}
		.primary.goHomeBTN{display:none;}
		.home .primary.goHomeBTN{display:block;}

@keyframes bounce {
	0%, 100% { transform:scale(0.0); -webkit-transform:scale(0.0); }
	50% { transform:scale(1.0); -webkit-transform:scale(1.0); }
}
@keyframes swell {
  from { transform:scale(1.1); }
  50%{ transform:scale(1); }
  to { transform:scale(1.1); }
}

#aiBTN.wait{-webkit-animation: rotate 1.0s infinite linear; animation: rotate 1.0s infinite linear; box-shadow:none;}
#aiBTN.wait:before, #aiBTN.wait:after{ content:''; width:10px; height:10px; display:inline-block; background-color:#FFF; border-radius:50px; -webkit-animation:orbit 1.5s infinite ease-in-out; animation:orbit 1.5s infinite ease-in-out; margin:0px -16px; }
#aiBTN.wait:after{ bottom:0; -webkit-animation-delay:-0.5s; animation-delay:-0.5s; }
#aiBTN.search svg{ zoom:0.65; -webkit-animation:orbit2 1s infinite; animation:orbit2 1s infinite;}
#aiBTN.save svg { margin-top:-11px; height:26px; }
#aiBTN.enter svg { height:26px; margin-left:-3px; }


.rotate{-webkit-animation:rotate 1s infinite; animation:rotate 1s infinite;}
@keyframes rotate {
	0%{ transform: rotate(0deg); -webkit-transform: rotate(0deg) }
	100% { transform: rotate(360deg); -webkit-transform: rotate(360deg) }
}
@keyframes orbit {
  0%, 100% {
	transform: scale(0.2); opacity:0.3;
  } 50% {
	transform: scale(1.0); opacity:1; margin-left:-8px
  }
}
@keyframes orbit2 {
	from { transform: rotate(0deg) translateX(10px) rotate(0deg);}
	to   { transform: rotate(360deg) translateX(10px) rotate(-360deg); }
}

.rippleClick::before {position:absolute; top:50%; left:50%;	margin:-35px 0 0 -35px;	width:70px;	height:70px; border-radius:50%;	content:'';	opacity:0;	pointer-events:none; }
.rippleClick::before,.rippleClick::after {	box-shadow:0 0 0 2px rgba(111,148,182,0.5); }
.rippleClick.active::before {	-webkit-animation:rippleClick-1 0.5s forwards;	animation:rippleClick-1 0.5s forwards; }
.rippleClick.active::after {	-webkit-animation:rippleClick-2 0.5s forwards;	animation:rippleClick-2 0.5s forwards; }
@-webkit-keyframes rippleClick-1 {	0% { opacity:1; -webkit-transform:scale3d(0.5, 0.5, 1); transform:scale3d(0.5, 0.5, 1);	}
	100% { opacity:0; -webkit-transform:scale3d(1.5, 1.5, 1); transform:scale3d(1.5, 1.5, 1);	}
}
@keyframes rippleClick-1 {	0% { opacity:1; -webkit-transform:scale3d(0.5, 0.5, 1); transform:scale3d(0.5, 0.5, 1);	}
	100% { opacity:0; -webkit-transform:scale3d(1.5, 1.5, 1); transform:scale3d(1.5, 1.5, 1);	}
}
@-webkit-keyframes rippleClick-2 {	0% { opacity:1; -webkit-transform:scale3d(0.5, 0.5, 1); transform:scale3d(0.5, 0.5, 1);	}
	50%, 100% { opacity:0; -webkit-transform:scale3d(3, 3, 1); transform:scale3d(3, 3, 1);	}
}
@keyframes rippleClick-2 {	0% { opacity:1; -webkit-transform:scale3d(0.5, 0.5, 1); transform:scale3d(0.5, 0.5, 1);	}
	50%, 100% { opacity:0; -webkit-transform:scale3d(3, 3, 1); transform:scale3d(3, 3, 1);	}
}

.loadSpinner{height:26px; width:26px; margin:100px auto; animation:loadSpinner 1.5s infinite ease-in-out; border-radius:50%; border: solid 5px #CCC;}
@keyframes loadSpinner {
	0%{ transform:scale(1); border-width: 5px; border-color: #CCC}
	25% {  border-width: 1px;}
	50%{ transform:scale(1.8); border-width: 5px; border-color: #CCC }
	75% {  border-width: 1px; border-color: #F60}
	100%{ transform:scale(1); border-width: 5px; border-color: #CCC }
}



/* F7 COMPONENTS */
.progressbar-infinite{ position:absolute; top:0; background:#EEE; height: 3px; pointer-events:none;opacity:0; transition:opacity 300ms, margin-top 250ms 150ms; }
	.progressbar-infinite.on{opacity:1}
	.progressbar-infinite:after, .progressbar-infinite:before{background:#F60;}
	#left.active+#librobar+.progressbar-infinite{ margin-top:77px; background:#DDD}

.navbar-fixed .toolbar{top:0; background:#444; /* border-bottom:solid 4px #DDD; */}
	.tabbar .tab-link-highlight{ background:#F60; bottom:0px; height:4px;}
	.tabs-animated-wrap{ overflow:visible; overflow-x:hidden; margin-bottom:-110px}
	.tabbar-scrollable a.tab-link{font-size:10px; padding: 0 18px 4px; border-radius: 0;}
	.tabs.swiper-wrapper{min-height:100vh;}
	.tabbar-scrollable .toolbar-inner:before { content:''; background:#DDD; width:100%; height:4px; position:absolute; bottom:0; }

.popover{width:200px; margin-top:40px; border-top:solid 3px #F60;}
	.popover:before{content:''; border-style:solid; border-width:0 6px 7px 6px; border-color: transparent transparent #F60 transparent; position:absolute; top:-10px; left:20px; z-index:2;}
	.popover-inner{overflow:visible;}
	.popover a.active-state{color:#F60!important;}
	.popover li.on{background: #ccc;  border-bottom: 1px dotted;}
	.popover.right:before{ right:20px; left: auto;}
#swiper-recipeIdeas .card{margin: unset;}
#swiper-recipeIdeas .swiper-wrapper{padding-left: 5px;}
#swiper-tracker{margin: -16px; min-height: 340px;}
.swiper-wrapper{transition-duration: 0ms; transform: translate3d(0px, 0px, 0px);}
.swiper-container{overflow:visible;}
	.swiper-container .swiper-button-next, .swiper-container .swiper-button-prev{ transform:scale(1); transition:transform 300ms, opacity 300ms; }
	.swiper-container.lastSlide .swiper-button-next, .swiper-container.firstSlide .swiper-button-prev{opacity:0!important; pointer-events: none; transform:scale(0.8)}

	.page #mealsFilter{display: none;}
	.page.home #mealsFilter{display: block;}
	#mealsFilter{ position:relative; transition:all ease-out 0.5s; overflow:hidden; background:#f5f5f5; text-align:center; /* margin-top:-80px; */ box-sizing:border-box; box-shadow:inset 0 -10px 10px -10px rgba(0,0,0,0.3);z-index: 1;}
		#mealsFilter.white *{ color:#fff!important; background:#fff; border-color:#fff;filter: invert(0);}
		#mealsFilter .icon{filter: invert(1);opacity: 0.6}
		#mealsFilter #calender .picker-modal-inner{height: 280px;}
		#mealsFilter.on+div{transform: translateY(0px)!important;}
		#mealsFilter.on+div .pies,#mealsFilter.on+div .swiper-container{pointer-events: none; touch-action: none;}
		#mealsFilter.on:after { content:''; border-style:solid; border-width:0px 9px 10px 9px; border-color:transparent transparent #fff transparent; position:absolute; left:50%; margin-left:-9px; bottom:0px; -webkit-filter:drop-shadow(0 0 3px rgba(130,130,130,1)); }
	/*     #mealsFilter #calender:empty{height: 0px;} */
		#mealsFilter #calender{ transition: height 0.3s; height: 350px;}
		#mealsFilter #sTWrapper{ box-shadow:inset 0 -10px 10px -10px rgba(0,0,0,0.3);}
		#mealsFilter #collectors{transform: translateZ(0);}
		#mealsFilter #collectors #specficTimes{min-height: 55px;}
		#mealsFilter #collectors #specficTimes.on{margin-bottom: 0px;}
			#collectors #specficTimes.on{/* margin-bottom: 25px; */}
			#collectors #specficTimes #toggleTime {position:absolute; left:60px; right:60px; margin:0 auto; font-size: 14px; background-color: #DDD;}
			#collectors #specficTimes #toggleTime svg{margin-right:2px; width:12px;}
			.swiper-slide #collectors #specficTimes #toggleTime{color:#f60;}
			#collectors #specficTimes #clearTime { color:#fff; position:absolute; top:33px; line-height:20px; font-size:10px; margin-left:98px; padding:11px 12px 11px 9px; border-radius:0px 50px 50px 0px; }
			#collectors #specficTimes #clearTime.active-state{background-color: var(--h2col);}

			#collectors #specficTimes{position:relative; overflow:hidden; padding-top:9px; min-height:35px;}
			#collectors #specficTimes #toggleTime:empty:after{content:'or choose specific times...'; font-size: 10px; color: #777;}
			#collectors #specficTimes.on #toggleTime{ opacity: 0; pointer-events: none;}

			#collectors #sTWrapper{ background:#DDD; width:100%; display:block; height:110px; max-height:0px; overflow:hidden; transition: all 0.2s ease; will-change: transform;opacity: 0;}
			#collectors #sTWrapper label svg{ position:absolute; width:13px; top:9px; left:2px; color:#888; }
			#collectors #sTWrapper::before{ content:'specific times...'; display:block; text-transform:uppercase; font-size:10px; font-weight:bold; color:#999; padding-top:5px; color:#444!important;margin-left: 10px;}
			#collectors #specficTimes.on #sTWrapper{max-height: 110px;opacity: 1;}
			#collectors #sTWrapper label { width:100px; margin-top:22px; }
			/* #collectors #sTWrapper label:first-child{margin-right: 5px} */
			#collectors #sTWrapper input{margin-top:-13px; padding:10px 0px 10px 25px; border:0}
			#collectors #sTWrapper label:first-child input{border-radius: 50px 0px 0px 50px;}
			#collectors #sTWrapper input.focus-state{background: #195380; color: #FFF;}
			#collectors #sTWrapper input.focus-state+span+svg{color: #FFF;}
						#sTWrapper #sTInputs{ display:block; width:max-content; height:100px; margin:0 auto; }

			#collectors .hovergrow span{pointer-events: none;}

			#collectors #sTWrapper .btn.xxsmall{ position: absolute; top: 10px; right: 10px; }
			#collectors button,#collectors #sTWrapper::before{display:inline-block; margin-right:2px; font-size:10px; padding:0px 15px; line-height: 26px; }
			#collectors button.lgrey{color: #AAA;}
			#collectors button.orange{ background-color:#F60!important; color:#FFF!important; }

		 /*  #collectors[data-btnsHidden='0']+button,#collectors[data-timeHidden='0']+button{display: none;} */

		h1+#mealsFilterBtn{display: block;}
		#mealsFilterBtn{margin:20px auto; display:block; font-size:9px;transform: translateZ(0);}
		#mealsFilterBtn:before{ content:'▼'; display:inline-block; float:right; font-size:8px; margin-left:2px;}
		/* #mealsFilterBtn.on:before{transform: rotate(180deg);} */
		#mealsFilterBtn:after{content:'all day'}
		#mealsFilterBtn.on{ background-color: var(--hcol); color:#FFF;}
		#mealsFilterBtn.on:before{ transform:rotate(180deg); }
		#mealsFilterBtn.on:after{content: 'close'}
		.toolbar-inner .left.arrFrom:after{left: calc(50% - 54px);}
		.toolbar-inner .left.arrTo:after{left: calc(50% + 40px);}
		.toolbar-inner .left.arrHide:after{display: none;}

	/*PAGE CSS FOR MEALFILTERS*/
	.page-content #collectors{text-align:center;  margin-top:25px; margin-bottom: 25px;}
	.page.home #mealsFilter.on{/*max-height: 600px; padding-bottom: 20px; */ }
	.page.home .page-content { background:#FFF; position:relative; z-index:1; /* transition:transform 400ms; */ }
	.picker-calendar .toolbar-inner{background: #16598C;}
	.mFilterCalender.picker-calendar .toolbar-inner{ background:#d4d4d4;color:#333; }
	.picker-calendar-day span{ border:solid 2px transparent; line-height:34px;}
	.picker-calendar-day.picker-calendar-day-selected:not(.picker-calendar-day-prev) span{ border:solid 2px #F60!important; background:#FFF; color:#F60!important; font-weight:bold; transition:border-color 300ms}
	.picker-calendar-day.picker-calendar-day-selected span { background:none; color:inherit; }
		.picker-calendar-day.x0 span,
		.picker-calendar-day.x1 span,
		.picker-calendar-day.x2 span,
		.picker-calendar-day.x3 span,
		.picker-calendar-day.x4 span,
		.picker-calendar-day.x5 span,
		.picker-calendar-day.x6 span{ color:#1d76bb; border:solid 2px #E5E5E5; font-weight: bold; text-shadow: 0 0 7px #FFF;}
		.picker-calendar-day.x0 span{ background:-webkit-linear-gradient(top, #ffffff 95%,#E5E5E5 95%);}
		.picker-calendar-day.x1 span{ background:-webkit-linear-gradient(top, #ffffff 60%,#E5E5E5 60%);}
		.picker-calendar-day.x2 span{ background:-webkit-linear-gradient(top, #ffffff 30%,#E5E5E5 30%);}
		.picker-calendar-day.x3 span,.picker-calendar-day.x4 span,.picker-calendar-day.x5 span,.picker-calendar-day.x6 span{ background:#E5E5E5;}

	.mFilterCalender.picker-modal .picker-header{ background:transparent; height:30px; line-height:24px; position:absolute; bottom:0px; left:50%; margin-left:-72px; }
	.mFilterCalender .picker-calendar-selected-date{ font-weight:bold; color:#333; font-size:16px; line-height:24px; text-align:center; text-transform:uppercase; }
	.mFilterCalender .close-picker{display:none;}
	.picker-modal .picker-header { background:#1d76bb; height:24px; line-height:24px; }
	.picker-calendar-selected-date { font-weight:bold; color:#FFF; font-size:12px; line-height:24px; text-align:center; text-transform:uppercase; }
	.picker-calendar-week-days{ background:#E5E5E5;font-size:8px; text-transform:uppercase; font-weight:bold; color:#666;}
	.picker-modal.picker-modal-inline, .popover .picker-modal{height:inherit;margin: 15px 15px 0px 15px;}
	.close-picker{font-weight:bold; background:#EEE;}

.dateSelector{ margin:-71px auto 0; width:30%; display:block; text-align:center; line-height:30px; pointer-events:all; position: relative; transition: all 0.3s;}
	.dateSelector input{ font-size:8px; text-transform:uppercase; text-align: center; width:45px; padding:0; font-weight:bold; border:0; background:transparent; pointer-events:none;}
	.dateSelector:after { content:'\25be'; font-size:12px; margin: 1px -3px; position:absolute; }
	.log .dateSelector{margin-top:-30px;}
	.log .dateSelector:after{ margin:5px -20px 0 -2px}
	.dateSelector.active-state input, .dateSelector.active-state:after{color:#F60!important;}


.swiper-inline{overflow: hidden;}
/*.button{color:#F60; font-weight:bold;}*/
.page.home .swiper-inline .swiper-slide, .exp .swiper-inline .swiper-slide { background:#fff;  border-right:solid 1px #DDD;  }
	/*.swiper-inline .swiper-slide span { text-align:center; display:block; margin:10px; font-size:21px; }*/
	.page.home .swiper-container.swiper-inline{ height:180px; }

	.swiper-pagination{pointer-events:none;}
		.swiper-container-horizontal>.swiper-pagination .swiper-pagination-bullet { margin:0 4px; }
		.swiper-pagination-bullet { width:5px; height:5px; background:#F60; opacity:.3!important; }
		.swiper-pagination-bullet-active{opacity:1!important}

 /*.picker-modal{ z-index:20001; }stay in front of the AI BTN*/
.picker-columns{height: 280px}
	.picker-items{ font-size:28px; letter-spacing:-1px}
	.basicPicker .picker-items{display:none;}
	/*.basicPicker #numPad{width:100%;}*/
	.modal-in{ box-shadow: 0 -3px 15px rgba(0,0,0,0.3); -webkit-overflow-scrolling: touch;}
	.picker-center-highlight{background: #EEE; z-index: -1;}
	.picker-columns .toolbar a.link{ font-size:10px; text-transform:uppercase; font-weight:bold; width:80px; background-color:#f60}
	.picker-columns .toolbar{color:#F60;}
	.picker-items-col:not(.picker-items-col-divider){min-width:80px;}
		.activity .picker-selected:after{font-size: 14px; margin-left:2px;}
		.activity .picker-items-col .picker-selected:after{content:'hrs';}
		.activity .picker-items-col-left .picker-selected:after{content:'mins';}
	.toolbar-inner .left {padding-left: 22px; }
	.toolbar-inner .left:after{content:''; border-style:solid; border-width:6px 5px 0 5px; border-color:#333 transparent transparent transparent; position:absolute; top:-0px; left:33px; z-index:2; }
		.activity .toolbar-inner .left:after{left:175px;}
	.portionPicker .toolbar-inner .left:after{ left:50%; margin-left:-8px;}
	.notesPicker .toolbar-inner .left:after{right:33px; left:auto;}
	.portionPicker .toolbar-inner .left:before{content:"Enter a Quantity:"}
	.timePicker{z-index:20000;}
		.timePicker .toolbar-inner .left:before{content:"Choose Date/Time:"}
		.timePicker.activity .toolbar-inner .left:before{content:"Choose a Duration:"}
	.notesPicker .toolbar-inner .left:before{content:"Add a Note:"}
.portionPicker .picker-items{ width:80px; float:right; text-align:left; border-left:solid 1px #CCC}
.notesPicker .picker-items{display:none;}

#numPad {width:calc(100% - 79px); height: calc(100% - 40px); border-right:solid 1px #CCC; display:none;}
	.picker-columns #numPad, .picker-columns #textInput{ display:block;}
	#numPad a:first-child { position:absolute; top:0px; z-index:501; right:80px; width:calc((100% - 70px)/3); height:40px; line-height:37px; background-color:rgba(0,0,0,0.06); border:0; color: #666; }
	#numPad a { display:block; width:33%; height:25%; line-height:60px; font-size:24px; text-align:center; border:solid 1px #EEE; float:left; border-right:0; border-top:0; color:#555; }
	#numPad a.active-state{background:#F60; color:#FFF;}
	.portionPicker #numPad a.jumper{ display:none; }
	.portionPicker.tabIdx #numPad a.jumper{ display:block; position:absolute; right:0; top:40px; height:60px!important; width:80px!important; }

#textInput{ height: calc(100% - 40px); display:none;}
	#textInput textarea{ width:100%; height:100%; padding:13px 18px; font-size:14px; color:#333; border: 0; }

.label-switch { width:100%; height:auto; padding:20px 0; }
	.label-switch .checkbox{ display:inline-block; margin-right: 5px;}

.accordion-item .item-inner{background-position: 0px!important;}
.accordion-item.accordion-item-expanded .item-inner{background-position: -6px!important; font-weight:bold; }
.accordion-item .item-title{padding-left:20px!important;}
.accordion-item-content .content-block{padding-bottom: 0px; padding-left: 40px;}
.accordion-item .item-content{padding-left:20px;}
.accordion-item-expanded{ background:#EEE; margin:0 -20px; padding:0 20px; border-bottom:solid 3px #DDD;}
	.accordion-item-expanded>.item-link { color:#F60; border-top:solid 3px #F60; margin: -1px -20px -15px -20px; padding-left: 40px; }

.modal-overlay{z-index:11000;}
.modal{ height:94%; /*margin-top:-83%!important;*/ width:90%; margin-left:-45%; position:fixed;z-index:11500;}
	.modal-inner { max-height:92%; overflow-y:auto; padding:0 0px;  }
	.modal-title { text-align:center; font-size:16px; margin:25px 6px 0px; padding-top:0px; line-height:18px; z-index:-1; color:#666; font-weight:bold; }
	.modal-buttons { background:#333; bottom:0; position:absolute; width:100.5%; }
	.modal-buttons .modal-button { width: 100%;color:#FFF; }
	.closeModal{position:fixed; right:0; top:0;}
	.closeModal a b{width:26px; height:26px; line-height:26px; font-size:10px; font-weight:bold;}
	.closeModal a{ position:relative; z-index:1; margin:15px 10px;}
	.modal.modal-in[data-modal-type='prompt']{ height:200px; margin-top:-100px!important; }
		.modal.modal-in[data-modal-type='prompt'] .modal-text{padding:7px 20px; font-size: 14px; margin:0; text-align: center;}
	.modal .list-block{margin: 0;}
	input.modal-text-input{ box-sizing:border-box; padding:30px 20px; background: #EEE}
	.focus-state .input-field:after, .focus-state .item-input-field:after, .input-field.focus-state:after, .input-field.not-empty-state:after, .item-input-field.focus-state:after, .item-input-field.not-empty-state:after, .not-empty-state .input-field:after, .not-empty-state .item-input-field:after{background: #F60;}

.item-input .range-slider { top:0; padding:10px 10px 5px; }
	.range-slider span{ font-weight:900; color:#16598c; display:block; text-align:center;}

/* FANCY CHECKBOXES: */
input[type=checkbox] { display:none!important;}

input[type=checkbox]+label{font-size:12px;line-height: 53px;}
input[type=checkbox]+label:hover{background:rgba(0,0,0,0.05);}
input[type=checkbox]+label:before {content:"\2714\FE0E\a0"; color:rgba(0,0,0,0.3); display: inline-block; width: 22px;  height: 22px; line-height:22px; vertical-align:middle;	margin-right: 8px; 	background-color:rgba(0,0,0,0.1); border-radius: 50%; transition:all 300ms; text-align:center; font-size:10px; font-weight: 900;}
input[type=checkbox]+label.fr:before{ float:right; margin-left:8px; margin-right:5px;}
input[type=checkbox]:checked + label:before { color:white;	background-color: #1d76bb;}
input[type=checkbox]:checked:disabled + label:before{ color: #888;  background-color: #DDD; cursor:not-allowed}
input[type=checkbox]:checked:disabled + label{color:#AAA; background:transparent; }
.form input.inlineInput{width:40px!important; color:#1d76bb!important; display:inline-block!important; float:none!important; font-weight:bold;  text-align:center; vertical-align:baseline; }
.form input.hiddenInput{ font-weight: bold;  color: #444; display: inline-block; width: 135px; margin: -6px 0px; font-size: inherit; border-color:transparent; background-color:transparent;}

/* TOGGLE SWITCHES: */
.toggle{display:inline-block; width:44px; height:15px;  background:#DDD; color:#999; border-radius:10px; margin: 2px 5px; padding:0; position:relative; transition: background 400ms ease 200ms; vertical-align:top}
	.toggle:before{content:'OFF'; text-align:right; font-size:8px; font-weight:bold; line-height:15px;  font-family:Arial; display:block; padding:0 6px 0 7px}
	.toggle:after{content:''; display:block; width:17px; height:17px; border:solid 2px #CCC; background:#FFF; border-radius:50%; position:absolute; top:-3px; left:-1px; transition:left 250ms}
	.toggle:hover{color:#555; box-shadow:1px 1px 3px rgba(0,0,0,0.2) inset; background: #DDD;}
	.toggle:hover:after{box-shadow:0px 1px 6px rgba(0,0,0,0.3); border-color:#AAA}

	.toggle.on{background:#1D76BB; color:#FFF; text-align:left; box-shadow:1px 1px 3px rgba(0,0,0,0.2) inset;}
	.toggle.on:before{content:'ON'; text-align:left;}
	.toggle.on:after{left:23px; border-color:#1D76BB}


/* PAGE SPECIFIC LAYOUTS*/
.home .navbar-inner{background:transparent!important; border:0; color:transparent; pointer-events:none;}
.home .content-block-inner:before{display:none;}
.navbar .home h1{color:#666;}
.navbar .left{pointer-events:all;z-index:1;}
#nav-registerform, #nav-loginform, #nav-welcome{display:none;}
.registerform, .loginform{border-top: solid 4px #F60;}

.page-content.tab{ padding:0!important;overflow-x:inherit!important; overflow:inherit;}
	.searchheader .navbar-inner{ background:transparent!important; }
.searchheader .center{pointer-events:all!important;}
.store #searchbar{border-bottom-color:#fff;}
.dev{text-align: center;}
	.dev button{margin:5px; display: inline-block;}
.log h5, #searchdata h5{margin:0;}
.log .center svg { margin:8px 8px 0 -36px; background:#FFF; padding:4px; border-radius:50%; fill:#195380; box-sizing:content-box; }


/* LOGIN */
.darkform { text-align:center; margin-top:-80px; padding-top:300px; background:url(../media/logo.png) no-repeat; background-size:52%; background-position:center 200px; color:#FFF }
	.darkform input,.dark .darkform textarea{ font-size:20px; padding:10px 20px; color:#22689E; margin:2px; margin:2px auto; transition:all 300ms; text-align:center}
	.darkform input[type=text], .darkform input[type=password]{ display:block; border-radius: 50px;}
	.darkform input.prefade{margin-top:10px}
	.darkform input[type=submit]{display:block; opacity:0; pointer-events:none;}
	.darkform label{display:block;}
	.darkform .icon50{ position:absolute; right: -4px; margin-top: -29px; width:60px; height:60px; line-height:60px; font-size:12px; }
	.darkform a{ margin:20px 20px; display:inline-block; font-weight: bold;}
	.darkform input[type=checkbox]:not(:checked)+label:before{ background:rgba(255,255,255,0.3); color:#333; }
.dark .darkform{background-image:url(../media/logo-white2.png);}
	.dark .darkform input,.dark .darkform textarea{background-color: #222;  border: solid 2px #444; color:#FFF;}
.dark .darkform textarea{width:270px; height: 150px}
.dark .darkform input:focus,.dark .darkform textarea:focus{ border-color:#F60; background-image: unset;}
.dark .darkform label span{display:none;}

.popup.login{ background-color:#222; }
.popup.login >.icon20{ display:none; }

/* HOME */
.tasks{ font-size: 14px; text-transform: uppercase; margin:20px 0 40px}
	.tasks>.unavailable{margin-bottom:-20px;}
.tasks .divider{background: #444; color: #FFF; padding: 5px 20px; font-size: 10px; font-weight: bold; font-family: roboto;}
	.intro { text-align:center; background:#EEE; padding:10px 0 30px; margin:0; }
		h2+h6, h6+h3{margin-top: -20px}
		.tasks h3{ margin-left:8%; margin-right:8%; line-height: 140%}
		.intromsg { text-transform:none; font-style:italic; font-size:16px; padding:0 30px; color:#555; margin-top: -15px}
	.tasks .divider{margin: 0;}
		.tasks .divider:before, .tasks .divider:after{content:''}
	.tasks h3.black{margin: 20px 0 -30px;}

	/*.task{background: #FFF; transition:background 500ms 100ms}
	 .task:active{background: transparent; transition:none} */
	 .task.on { font-weight:bold; background:#EEE; border-top: solid 1px #DDD}
		.task label { padding:11px 0; float:left; display:inline-block; width:47px; text-align:right; }
			.task input[type=checkbox]+label:before {content:'';margin:0;width:28px;height:28px;line-height:28px;}
			.tasks .task label:before{ border:solid 3px #CCC; background:#FFF;}
			.task.exercise label:before{border-color:#F60; background:#FFF;}
			.task.meal label:before{border-color:#1d76bb; background:#FFF;}
		.task a:not(.icon50) { padding:0px 5px; color:#444; display:inline-flex; align-items:center; position:relative; line-height:120%; max-width:calc(100% - 130px); margin-left:5px; font-weight:bold; font-size:13px; text-transform:none; max-height:80px; overflow:hidden; min-height:75px; }
			.task.on a:before{display: none;}
			.task.exercise a{color: #F60;}
			.task.meal a{color: #1d76bb;}
			.task:after { content:''; width:16px; height:16px; display:inline-block; background-size:16px; vertical-align:middle; margin:-44px 30px 0 0; filter:contrast(0); float:right; }
				.task.exercise:after{background-image:url(/media/svg/nutico/frag#exercise); filter:invert(100%) brightness(0.5) sepia(8) hue-rotate(-10deg)saturate(20);}
				.task.article:after{background-image:url(/media/svg/nutico/frag#article)}
				.task.notification:after{background-image:url(/media/svg/nutico/frag#bell)}
				.task.meeting:after{background-image:url(/media/svg/nutico/frag#meeting)}
				.task.form:after{background-image:url(/media/svg/nutico/frag#form)}
				.task.meal:after{background-image:url(/media/svg/nutico/frag#food); filter:invert(100%) brightness(0.2) sepia(1) hue-rotate(140deg) saturate(20); }
				.task.video:after{background-image:url(/media/svg/nutico/frag#video)}
				.task.notification:after{background-image:url(/media/svg/nutico/frag#bell)}
			.task.on:after{display: none;}


	.tasks .task{clear: both;}
		.tasks .task:before { content:'i'; float:right; width:80px; height:80px; line-height:73px; text-align:center; border-radius:50px; text-transform:none; background:#666; font-weight:bold; font-size:13px; position:absolute; right:27px; margin:-1px -27px; color:#FFF; opacity:0; transform:scale(0.3); transition:all 200ms; }
		.tasks .task.on:before {transform:none; opacity: 1; border-radius:2px;}
			.tasks .task.meal:before{background-color:#1d76bb}
			.tasks .task.exercise:before{background-color:#F60}
		.task a:after{ content:''; position:absolute; width:0; left:6px; top:38px; border-top:solid 2px #AAA; box-shadow:0 1px 1px #FFF; transition:width 300ms;}
		.task+.task, .task:first-of-type{border-top:solid 1px #DDD;}
		.task:last-of-type{border-bottom:solid 1px #DDD;}
		.task input:checked+label:before { background:#AAA url(/media/svg/icons/frag#tick) center no-repeat; border:solid 1px transparent; margin: 1px 1px 0 0; text-indent:5px; opacity:0.3; transition:opacity 200ms, border 300ms 300ms, margin 300ms 300ms, background-color 800ms 300ms}
		.task input:checked+label+a{ color: #AAA!important; text-decoration: line-through; }
		/*.task input:checked+label+a:after { width:93%; }*/

		.tasks.old h6 {color:#444!important;}
		.tasks.old h3, .tasks.old h2, .tasks.old a, .tasks.old h4 {color:#888!important;}
		.tasks.old .task:after{filter: contrast(0) brightness(1.5)!important;}
		.tasks.old .task label:before{border-color:#DDD;}
		.tasks.old .divider, .tasks.old .task:before{background:#888!important;}
		.tasks.old .exp:before {border-top-color:#888!important;}


.exp.cards{background: #FFF;}
	.exp.cards.on{ height:300px; max-height:300px}
  .exp.cards *{opacity: 0; /*transition: opacity 300ms 200ms*/}
	.exp.cards.on *{opacity: 1}
	.tasks .task .exp.cards.on .swiper-container.swiper-inline{height: 300px;}
	.tasks .task .video-overlay{width: 100%; height: 70%;position: absolute; top: 0; left: 0;}
	.cards h3 { color:#999; text-align:center; margin:5px 0; font-size:15px; }
	.cards .swiper-inline .swiper-slide{ background:transparent; padding:0px; border-right:solid 3px #EEE; border-left:solid 3px #EEE;}
	.cards .swiper-container.swiper-inline{height: 300px;}
	.cards .icon50{margin:85px 3px 0;}
	.cards .icon50:not(span) svg{width: 16px; height: 16px; fill:#444}
	.cards .blue.icon50{ transform:rotate(180deg); }
		.cards .blue.icon50 svg{fill:#FFF;}
		.cards .taskBackBtn{margin:5px; box-shadow: 1px 1px 5px #0006}
	.cards .swiper-slide{text-transform: none; overflow-y: auto}
		.cards .swiper-slide h4{text-align:center; position:relative; top:50%; -ms-transform:translateY(-50%); -webkit-transform:translateY(-50%); transform:translateY(-50%); margin: 0}
		.cards .swiper-slide.cover, .cards .swiper-slide.video{padding: 0;}
		.cards .coverpic{height: 100%;}
			.cards .coverpic #mainTitle{bottom: 35px; right: 3px;}
		.cards .ing{margin: 0; font-weight: normal;}
			.cards .ing b{display: inline-block; width: 50px;}
		.bigcheck { width:80px; height:80px; border-radius:50px; background:#EEE; top:50%; transform:translateY(-50%); margin:0 auto!important; display:block!important; text-align:center;  transition: background 300ms, transform 300ms; line-height: 80px!important;}
		.bigcheck+h4{margin-top: -25px; font-size: 14px;}
		.bigcheck svg{fill:#999; width:40px; height:40px; margin-top:15px;}
		.bigcheck.on{background-color: #F60; transform: translateY(-50%) scale(1.1);}
		.bigcheck.on svg{ fill: #FFF;}

.ogCard { border:solid 4px #EEE; border-radius:5px; padding:10px 15px 10px 20px; font-size:12px; font-weight:normal; border-left:0; border-right:0; position:relative; }
	.ogCard.active-state, .ogCard.active{border-color:#F60;}
	.ogCard h6{color: #444; font-size: 18px; margin: 5px 0; font-weight: 900}
	.ogCard .img { max-width:120px; height:100%; margin:0 10px 0 -18px; float:left; }
	.ogCard .img img{max-width:120px; max-height:120px; }
	.ogCard a { padding:7px 0 3px; color:#1d76bb; font-weight:bold; display:block; max-width:none; text-align:right; }
	.ogCard a:before{content:'\2197'; float: right; display: inline-block; font-weight: normal; color: #FFF; width: 20px; height: 20px; line-height: 20px; border-radius: 50px; background: #1d76bb; text-align: center; font-size: 14px; margin:-2px -13px 0 6px}


.pies {text-align:left; width:320px; margin:-20px auto 0; min-height: 250px;}
.pies a{transition:all 200ms ease-out; background:#FFF; transform:scale(0.9); opacity:0; display:block; float:left; width:140px; height:140px; margin:15px 10px; text-align:center; border-radius:50%; font-weight:bold; text-transform:uppercase; color:#888; position:relative; font-size:10px; line-height: 100%}
.slideToday .pies a{ transition:all 250ms ease-out; opacity:0; transform:scale(0.4); }
	.pies a>span{position:absolute; z-index:1; width:100%; height: 90px; color:#555; top:50px;left:0px; -webkit-transform: translateZ(0);}
	.pies a b{ font-size:37px; letter-spacing:-3px; display:block; line-height:100%; color:#555; height:38px;}
	.pies a b span{text-transform:none;  margin-left:3px; letter-spacing:normal;}
	.pies a em{display:block; color:#AAA; font-style:normal; font-weight:normal; top:95px; width: 140px; position:absolute}
	.pies a.blue, .pies a.blue span{color:#1d76bb;}
	.pies a.blue b{color:#16598C;}
	.pies a.orange, .pies a.orange span{color:#F60;}
	.pies a.orange b{color:#E84700;}
	.pies svg{ transform:rotate(-90deg); border-radius:50%; box-shadow:inset 0 0 0 6px #DDD; width:100%; height:100%; position:relative;}
	.pies svg circle { fill:transparent; stroke:currentColor; stroke-width:2.5px; stroke-dasharray:0 100; transition:stroke-dasharray 1.5s cubic-bezier(0, 0.01, 0, 1); }
	.pies .icon20 { margin:34px 20px; position:relative; }
	.pies .icon20 b{ font-size: 15px; }
	.pies .icon20 span{ margin:9px -11px;}
	.pastDay .pies a:not(.full), .pastDay .pies a:not(.full) span, .pastDay .pies a:not(.full) b{color:#AAA;}
	.pastDay .pies a.above:not(.full):not(#pie-energyKcal):not(.zero):not(.mfilter),
	.pastDay .pies a.above:not(.full):not(#pie-energyKcal):not(.zero):not(.mfilter) span,
	.pastDay .pies a.above:not(.full):not(#pie-energyKcal):not(.zero):not(.mfilter) b{color:#900;}
	.pastDay .pies a.above:not(.full) circle{color:#999}

	.pies a.small{ width:50px; height: 50px; margin: 22px 13px;}
		.pies a.small:first-of-type{margin-left:20px;}
		.pies a.small>span{ top:20px;}
		.pies a.small>span span{text-transform:none;}
		.pies a.small>span span:before{content:'(';}
		.pies a.small>span span:after{content:')';}
		.pies a.small b{ font-size:12px; letter-spacing:-1px; margin-bottom: 20px; height:auto;}
		.pies a.small em{position: static; display: inline;}
		.pies .small svg{box-shadow:inset 0 0 0 4px #DDD;}
		.pies .small svg circle{ stroke-width:5px; }

	.pies a.full b{letter-spacing:-1px;}
	.pies a.full svg{box-shadow:inset 0 0 0 6px #BBB;}
	.pies a.full.small svg{box-shadow: inset 0 0 0 4px #BBB;}
	.pies a.full.above.small svg circle{ opacity:0.8; color:#999 }
	.pies a.full.above svg circle{ opacity:0.8; }
	.pies a.full.above *, .pies a.below:not(.full):not(.perc75) *{ color:#999;}
	.pies a.full.above>span, .pies a.below>span{ padding-top:56px; font-weight:normal }
	.pies a.small.full.above>span, .pies a.small.below>span{ padding-top:34px}
	.pies a.full.above b, .pies a.below b{font-size:20px; position:absolute; bottom:35px; width:100%; height: auto; text-align:center;}
		.pies a.full.above, .pies a.below{ background-repeat:no-repeat; background-size:35px 35px; background-position:51% 40%; background-image:url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='16px' height='17.6px' viewBox='0 0 16 17.6'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23999999;%7D%0A%3C/style%3E%3Cpath class='st0' d='M16,0.1c-3.7,4-6.6,8.4-9,13.3c-0.6,1.3-1.2,2.7-1.8,4c0,0.1,0,0.1-0.1,0.2c-1.7-2.3-3.4-4.7-5.1-7c0,0,0,0,0,0 c1.4,1,2.9,1.9,4.3,2.9c0-0.1,0.1-0.1,0.1-0.2C5.8,11.1,7.3,8.9,9,6.8c1.6-2,3.3-3.8,5.2-5.4C14.8,0.9,15.4,0.5,16,0.1 C16,0,16,0,16,0.1C16,0,16,0.1,16,0.1z'/%3E%3C/svg%3E%0A");}
		.pies a.below:not(.perc75){ color: #CCC;}

		.pies a.full.below{color: #900!important; background-position:50% 40%; background-image:url(data:image/svg+xml,%3Csvg%20version%3D%221.1%22%0A%09%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%0A%09%20x%3D%220px%22%20y%3D%220px%22%20width%3D%222.9px%22%20height%3D%2211.5px%22%20viewBox%3D%220%200%202.9%2011.5%22%20style%3D%22enable-background%3Anew%200%200%202.9%2011.5%3B%22%0A%09%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cdefs%3E%0A%3C/defs%3E%0A%3Cg%3E%0A%09%3Cpath%20style%3D%22fill%3A%23AA0000%22%20d%3D%22M0%2C10.2c0-0.4%2C0.1-0.7%2C0.4-0.9C0.7%2C9%2C1%2C8.9%2C1.5%2C8.9c0.4%2C0%2C0.8%2C0.1%2C1%2C0.4c0.3%2C0.2%2C0.4%2C0.6%2C0.4%2C0.9%0A%09%09s-0.1%2C0.7-0.4%2C0.9c-0.3%2C0.2-0.6%2C0.4-1%2C0.4c-0.4%2C0-0.8-0.1-1-0.4C0.1%2C10.9%2C0%2C10.6%2C0%2C10.2z%20M2.5%2C7.8H0.4L0.1%2C0h2.8L2.5%2C7.8z%22/%3E%0A%3C/g%3E%3C/svg%3E);}

		.pies a.full.below.mfilter{ background-image:url(data:image/svg+xml,%3Csvg%20version%3D%221.1%22%0A%09%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%0A%09%20x%3D%220px%22%20y%3D%220px%22%20width%3D%222.9px%22%20height%3D%2211.5px%22%20viewBox%3D%220%200%202.9%2011.5%22%20style%3D%22enable-background%3Anew%200%200%202.9%2011.5%3B%22%0A%09%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cdefs%3E%0A%3C/defs%3E%0A%3Cg%3E%0A%09%3Cpath%20style%3D%22fill%3A%23AAA%22%20d%3D%22M0%2C10.2c0-0.4%2C0.1-0.7%2C0.4-0.9C0.7%2C9%2C1%2C8.9%2C1.5%2C8.9c0.4%2C0%2C0.8%2C0.1%2C1%2C0.4c0.3%2C0.2%2C0.4%2C0.6%2C0.4%2C0.9%0A%09%09s-0.1%2C0.7-0.4%2C0.9c-0.3%2C0.2-0.6%2C0.4-1%2C0.4c-0.4%2C0-0.8-0.1-1-0.4C0.1%2C10.9%2C0%2C10.6%2C0%2C10.2z%20M2.5%2C7.8H0.4L0.1%2C0h2.8L2.5%2C7.8z%22/%3E%0A%3C/g%3E%3C/svg%3E);}
		.pastDay .pies a.full.below.mfilter svg circle, .pastDay .pies a.full.below.mfilter span, .pastDay .pies a.full.below.mfilter span b,.pies a.full.below.mfilter {color:#AAA!important;}

	.pies a.full.below span, .pies a.full.below:not(.mfilter) b{ color:#600;}
	.pies a.full.below svg circle{ color:#000; opacity:0.8 }
	/*svg{ box-shadow:inset 0 0 0 4px #C00; }*/


	.pies a.small.full.below{ background-size:14px 14px; background-position:50% 31%;}
	.pies a.small.full.above, .pies a.small.below{ background-size:16px; background-position: 55% 27%; }
	.pies a.small.full span{ font-weight:bold}
	.pies a.small.below span{padding-top:33px; font-weight:bold}
	.pies a.small.full b, .pies a.small.below b{ font-size:11px; bottom:52px; }


/* LOG */
#collector-diet>h5:first-child{display:none;}
.collector{ min-height:100px; }
	.logGroup{background:#E84700 url(data:text/plain;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCI+DQogIDxwYXRoIGQ9Ik0xNi42IDJIMTNWMEg2djJIMi41djNoMTQuMlYyek0xMiAySDd2LS43aDVWMnpNMy40IDE4LjNjMCAuNS40IDEgMSAxaDEwYy41IDAgMS0uNSAxLTFMMTUuNSA2SDMuM3YxMi4zem03LjgtMTFoMVYxNmgtMVY3LjJ6TTcgNy4yaC44VjE2aC0xVjcuMnoiLz4NCjwvc3ZnPg==)}
	.logGroup:empty{ height:100px; text-align:center; background:url(/media/arrow-orange.png) 88% 27px no-repeat;}
	.logGroup:empty:before{ content:'Add items to your log'; line-height:100px; color:#AAA; font-size:20px; font-style:italic;  letter-spacing:-1px;}
	.collector .orange.fr{margin:-28px 21px;font-size: 16px; font-weight: normal; position: relative; z-index:3;}

.scrolllist h2{margin-left:15px;}
.listItem{height:80px; padding:15px; font-size:18px; display:block; box-sizing: border-box; line-height: 140%; border-bottom:solid 2px #F5F5F5; text-align:left; padding:0; background:#FFF;}
.listItem:first-of-type { border-top:solid 2px #F5F5F5; height: 81px; }
.listItem #meta{display:none;}
	.listItem:hover, .listItem:active{color:#1d76bb;}
	.task .listItem:first-of-type{border-top:solid 2px #F5F5F5; margin-top:10px;}
	.task .listItem .icon50{right: 38px;}
	.listItem .button.fr{margin:20px 15px;}
	.listItem .ficon{ left:-20px; top:0; }
	.listItem p { font-size:15px; text-transform:none; color:#444; margin:0; margin-right:115px; margin-left:100px; line-height:110%; word-wrap:break-word; white-space:normal; pointer-events:none; transform:translateY(-50%); top:50%; position:relative; }
		.listItem p>span{overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; margin: 0!important}
		.listItem p .grey{display:block; color:#AAA; font-size:10px;}
	.listItem .plus { font-size:24px; color:#E84700; float:right; width:80px; height:80px; text-align:center; line-height:79px; font-weight:bold; pointer-events:none; white-space:normal; transition:background 500ms;}
	.listItem .plus:not(:empty):before{display: none;}
	.listItem .plus:before{content:'+'}
		.task .listItem .plus:before,
			.listItem.outletMenu .plus:before{ content:'\25b6'; font-size:13px; vertical-align: text-bottom;} /* > arrow*/
		.listItem.report .plus:before { content:'\2197'; } /* external url arrow */
		.task .listItem .plus{width: 50px;}
			.task .listItem .plus:before{margin-right: -35px;}


		.listItem .plus svg{ width:17px; }
		.listItem.grey .plus svg{ color:#AAA; }
		.plus .counter {  top:40px; right:20px;}
	.listItem.outlet .icon50 svg { height:38px; width:38px; }
	.listItem.outlet .icon50.mappin{margin-top: 9px;}

	.listItem.greyback{ background: #EEE;}
	.listItem.active-state .plus svg, .listItem:active .plus svg{ color:#F60; }
	.listItem .edit { position:absolute; width:80px; height:80px; background:#fff; right:0; text-align:center; font-weight:bold; transition:background 500ms; padding-top:25px; white-space:normal; font-size:10px;display:none;}
	.listItem.on .edit{background:#1d76bb;color:#fff;display:block;}
	.listItem .edit:before { content:'Edit Portion'; width:40px; display:inline-block; line-height:12px; }

	.listItem .icon50 { transform:scale(0.4); margin:7px 0 0; position:absolute; right:58px; transition:right 300ms; background:#FFF; border:solid 7px #BBB; color:#AAA; box-sizing:content-box; }
		.listItem .quant+.icon50 { right:65px; }
		.listItem .icon50 svg{height:28px; margin-top:-2px}
		.listItem.on .icon50{ right:70px;z-index:1;}
		.listItem .icon50.active-state, .listItem .icon50:active{ border-color:#F60; color:#F60;}
		.listItem:not(.on) .bin{display:none;}

	.listItem.on{ background-color:#EEE; box-shadow:0 2px 9px rgba(0,0,0,0.2); z-index:2; border-bottom:0; }
	.listItem.on .plus{ background:#1d76bb; color:#FFF; padding-top:25px; line-height:8px;}
	.listItem.on .plus:before{content:'Choose A Portion'; font-size:10px; text-transform:uppercase; }
	.listItem .icon20{position:absolute; left:0px; border-radius:inherit; width:80px; height:80px; background:rgba(191,191,191, 0.25); display:none;}
	.listItem .icon20.on{display:block;}
	.listItem .bin{ background-position: 50%; display:none; right: 30px; z-index: -1;}
	.listItem .bin.on{display:block;}
	/*.listItem .bin.on + p{width: calc(100% - 130px)!important;}*/
		/*#log .listItem .name{width:90%;transition:width 0.5s;}*/
		.listItem.grey p.name{color: #AAA;}
		/* #log .listItem .name{ transition:width 0.5s; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } */
		.listItem .desc { font-size:10px; color:#999; font-weight:bold; display:block; line-height:120%; margin-top:5px!important; }
		.listItem .desc:after{content:attr(data-content);}
		.listItem>svg{margin: 20px 0 0 40p  x;}
		.listItem svg+.name{font-weight: 900;}
	.listitem:nth-child(even){background:#EEE;}
	.listItem.deleting{filter: grayscale(1); pointer-events: none; overflow: visible;}
	.listItem.meal{}
		.listItem.meal.on .plus:before{content: 'Change Portions';}
		.listItem.isParent+.exp{ border-left: solid 15px #DDD; }
		.listItem.isParent+.exp:after { content:''; width:100%; height:7px; position:absolute; left:0; bottom:0; right:0; background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.15) 100%); }
		.listItem.isParent+.exp .listItem{border-left:solid 1px rgba(0,0,0,0.1);}
		.listItem.meal .ficon { background:#ff924a url(/media/svg/nutico/frag#meal) no-repeat center; background-size:12px; filter:invert(1); width:18px; height:18px; }
		.listItem.showCInfo #collectorInfo,.listItem.showCInfo .bin{display: block}
			.listItem.showCInfo .plus,.listItem.showCInfo .info{display: none;}
			.listItem.showCInfoMenu #collectorInfo,.listItem.showCInfoMenu .bin{display: block}
			.listItem.showCInfoMenu .plus{display: none;}
			.listItem #collectorInfo,.listItem .bin{display: none;}
			.listItem .plus,.listItem .info{display: block;right: 70px;z-index: 1;}

		.listItem.halfHeight{height: 40px;}
			.listItem.halfHeight .quant, .listItem.halfHeight .edit{height:40px; padding:10px; line-height:20px;}
			.listItem.halfHeight .listImg{height:40px; line-height:40px; background: none; }
			.listItem.halfHeight .listImg svg{ width: 12px; margin: 0 2px 0 -5px}
			.listItem.halfHeight.on .icon50{margin-top: -12px;}
			.listItem.halfHeight .edit:before{content: 'edit'}


	.binIconSwipe{display: none;}
	.listItem.deleting .binIconSwipe { display:block; position:absolute; height:50px; width:30px; line-height:50px; color:#FFF; left:-30px; text-align:center; border-radius:100px 0 0 100px; top:10px; }
		.listItem.deleting .binIconSwipe:before { content:'deleting...'; position:absolute; transform:translateX(-100%); font-size:10px; font-weight:bold; background:rgba(0,0,0,0.15); padding:0 35px 0 20px; z-index:-1; border-radius:50px 0 0 50px; left:100%; }
	  .listItem .binIconSwipe svg{ width: 16px; height: 16px;  margin-top:-3px; }

	.quant{width:80px; height:79px; background:#E9E9E9; color:#999;  text-align:center; padding:25px 0 0 ; float:right; font-size:9px; line-height:18px; font-weight:bold; text-transform:none;}

	.quant strong{ font-size:18px; letter-spacing:-1px; color:#444; font-weight:900; display:block;}
	.quant:hover strong, .quant:active strong{ color:#1d76bb}
	.quant strong:empty+span { font-size:18px; margin-top:4px; display:inline-block; letter-spacing:-1px; font-weight:900; }
	.quant strong:empty+span span{ font-size: 9px; font-weight: normal; letter-spacing: 0; margin-left: -2px}

	.listImg { width:80px; height:79px; display:inline-block; float:left; vertical-align:middle; margin-right:15px; background:#EEE url(/media/back-item.png) no-repeat center; background-size:100%!important; text-align:center; font-size:14px; font-weight:900;}
		.listImg.recipe, .listItem.recipe .listImg{ background-image:url(/media/back-chef.png);}
		.listImg.food, .listItem.food .listImg{ background-image:url(/media/back-apple.png);}
		.outlet .listImg{ background-image:url(/media/back-shop.png); background-size:contain!important;}
	.listImg.composite { white-space:normal; background:transparent; line-height:80%; text-align:center; overflow:hidden; border-radius:50px; overflow:visible; }
		.listImg.composite i { display:inline-block; width:40px; height:40px; background-size:130%; border:solid 3px #FFF; margin:-1px; background-position:top center; border-radius:50px; box-shadow:1px 0px 5px rgba(0,0,0,0.2); }
			.listImg.composite i:only-child { width:75px; height:75px; border:solid 4px #FFF; }
			.listImg+.counter { position: absolute; left: 65px; z-index: 1; top: 30px; }
			.listImg.composite+.counter { left: 30px; }
			.listImg.composite+.counter.large { left: 22px; top: 22px; border: solid 2px; box-sizing: content-box; }
		.listImg.icon, .listImg.svgicon{ width:50px; height: auto; margin: 15px; background:none;}
		.listImg.svgicon { height:50px; background: #EEE}
		.listImg.svgicon svg { width:28px}

	.listBadge { position:absolute; width:80px; height:30px; right:calc(100% - 87px); text-align:right; top:25px; }
	.hScore+.lPoints{ margin-left: 0px!important;}
	.counter.hScore{color: #F60; }
	.hScore+.lPoints{margin-left: -5px;}
		.hScore[data-value^='0'],
		.hScore[data-value^='1']{color:#ed1c24;}
		.hScore[data-value^='4'],
		.hScore[data-value^='5']{color:#39b54a;}

	.ficon { background-color:#1d76bb; color:#FFF; border-radius:10px; font-size:8px; width:15px; height:15px; line-height:14px; text-align:center; font-weight:bold; display:inline-block; position:absolute; pointer-events: all; }
		.ficon.sharedIn:before { content:'\2794'; position:absolute; background-color:#fff; color:#1d76bb; font-size:10px; transform:rotate(35deg); border-radius:12px; box-shadow:-1px 1px 4px rgba(0,0,0,0.4); width:15px; height:15px; line-height:15px; margin:-7px -15px; }
		.ficon.clientFood{ background:rgba(200,200,200,0.6) url(/media/svg/nutico/frag#user) center no-repeat; filter:invert(1); background-size:11px; color: rgba(255,255,255,0.6); }
		.ficon.clientFood:after{ content:''; display: block;}
		.ficon.clientFood:before{ filter:invert(1); }
		.ficon.clientFood b { position:absolute; margin:13px -8px; }
		.ficon.clientFood b:not(:empty):before{content:'\2605'; margin-right: 1px}
		.ficon.clientFood span,.ficon.published span{display: none;}
		.ficon.published:after{content:'\2714';display: block;}


	/* .listItem[data-isrecipe="0"][data-userfood="0"][data-fromNUser="0"] .ficon{ display:none; }
	.listItem[data-isrecipe="0"] .ficon:after{ content:'F'; }
	.listItem[data-isrecipe="0"] .ficon.clientFood{ background:#666 url(/media/svg/nutico/frag#user) center no-repeat; filter:invert(1); background-size:11px;}
		.listItem[data-isrecipe="0"] .ficon.clientFood:after{ content:''; display: block;}
		.listItem[data-isrecipe="0"] .ficon.clientFood:before{ filter:invert(1); }
		.listItem[data-isrecipe="0"] .ficon.clientFood b { position:absolute; margin:13px -8px; color:#888; }
		.listItem[data-isrecipe="0"] .ficon.clientFood b:not(:empty):before{content:'\2605'; margin-right: 1px}
	.listItem[data-isrecipe="1"] .ficon:after{ content:'R'; }
	.listItem .ficon.sharedIn:before { content:'\2794'; position:absolute; background-color:#fff; color:#1d76bb; font-size:10px; transform:rotate(35deg); border-radius:12px; box-shadow:-1px 1px 4px rgba(0,0,0,0.4); width:15px; height:15px; line-height:15px; margin:-7px -15px; }
	.listItem[data-userfood="0"][data-fromNUser="0"] .ficon{ background-color:#bbb!important; } */

		#log .listItem .details{ font-size:11px; color:darkgrey; }
		#log .listItem.activity .details{ padding-left:20px; }
		.listItem.activity .normal{line-height: 120%; display: block; margin-top: 5px;}
h3+.listItem{border-top: solid 1px #DDD;}
.activity.listItem:not(.showCInfo) p{padding-left:20px; margin-left:0px;}
	.activity.listItem.on .plus:before{content:'Enter Duration';}
	.activity.special.listItem.on .plus:before{content:'Enter Calories';}
	.activity.exp,#collector-activity .exp{height:50px;}
	.activity.exp{height:50px;}
	.activity .portionFooter .white{display:none;}
	.activity .edit:before{content:'Edit Duration';}
	.activity .foodphoto{display:none;}
	.activity.custom .quant span{display:none;}
	.listItem.activity.custom{background: #EEE; border-left: solid 4px #F60;}

.outlet+.exp{background: #FFF; overflow-y: auto;}

.mealFooter{ margin:0; padding:7px 20px; box-shadow:0px 3px 7px rgba(0,0,0,0.1); z-index:1; position:relative; text-align:right; }

 .allergyWarning{width:75%; border: solid 5px #EEE; border-radius:100px; font-size:14px; }
	.allergyWarning label{ float:left; margin:10px; position: relative;}
	.allergyWarning svg{width:20px!important; height:20px!important;}
	.allergyWarning span{width:48px!important; height:48px!important; border:solid 2px #EEE; transition:border 300ms}


.tipLink{ text-align:center; display:block; line-height:40px; text-transform:uppercase; font-weight:bold; font-size:10px; color:#1d76bb; padding: 0 30px; border-bottom:solid 1px #DDD}
.tipLink svg { float:left; width:20px; vertical-align:middle; height:40px; display:inline-block; }
	.tipLink:after{content:'\25b6'; float: right; margin-right: 5px}

#cMethods{display:none;}
#cMethods svg { width: 50px; height: 50px; }
.page.editFood #cMethods,.page[data-page='search-0'] #cMethods,#aiBasket #cMethods { display:block; position:absolute; right:0px; font-size:10px; color:#fff; text-align:center; padding:0px; width:80px; height:50px; }
.cMethods { background:#fff; width:50%; float:left; height:135px; border-bottom:1px solid #ddd; text-align:center; }
.cMethods.on{ color: #F60; border-bottom: solid 3px #F60;}
.cMethods:nth-child(odd) { border-right: 1px solid #ddd;}
.cMethods:nth-child(-n+4) {border-top:1px solid #ddd; }
.cMethods .cIcon { display:block; height:90px; line-height:110px; }
.cMethods .cIcon svg{height:85px; width:85px;}
.cMethods .name { font-size:10px; text-transform:uppercase; line-height:120%; font-weight:bold; display:block; padding:0 30px; }

/* SEARCH */
#searchbar{ border-top:solid 4px #DDD; border-bottom:solid 5px #1d76bb; margin-left:0px;  }
#searchbar>svg{ fill:#AAA; position:absolute; width:16px; margin:27px 57px; height: 18px;left:0;}
	#searchbar button svg{ width:20px; margin:6px 0; fill:#AAA}
	#searchbar button.active-state svg{fill:#F60;}
	#searchbar button:first-child { right:auto; height:72px; margin:0; transition:none!important;}

#searchinput { line-height:72px; border:0; padding:0 120px 0 90px; font-size:26px; color:#22689E; font-weight:bold; letter-spacing:-1px; display:block; width:100%; margin: 0}
.store #searchinput{ padding-right:80px; }
	#searchbar button{position:absolute; right:14px; margin-top:10px; transition:all 300ms; z-index: 2;}
	#searchbar .infoBtn{right:60px;}
	#searchbar .icon50 svg{width:20px; display:block; margin:5px auto; fill:#FFF}
	#searchbar .icon20{  margin-top: 20px; margin-right:10px; opacity:0; pointer-events:none; transform:scale(0.8);}
	#searchbar #captureImg{ width:30px; position:absolute; right:76px; top:30px; opacity:0; z-index:1; }

#searchbar.on button:not(.icon20){opacity:0; pointer-events:none; transform:scale(0.8); }
	#searchbar.on .icon20{opacity:1; pointer-events:all; transform:scale(1);}
	#searchbar.on form{display:none;}
	#searchbar.on input{padding-right:65px}
	#searchbar.on:after{ content:''; border-style:solid; border-width:8px 7px 0 7px; border-color:#444 transparent transparent transparent; position:absolute; top:-8px; right:32px; z-index:2; transition:top 150ms; }

#searchdata:not(.on) #searchresults, #searchdata.on #searchpredata{display:none;}
#searchpredata{min-height:700px;}
#searchresults:empty:before{ content:'No results'; display:block; text-align:center; padding:50px; color:#CCC; font-weight:bold; font-size:20px; font-style:italic; }

#basket h1{position:unset; padding:22px 20px; border-top:4px solid #f60; border-bottom:1px solid #DDD;}
	#basket #timeInput,#basket #notesInput{display:block;}
	#basket #portionInput{ margin-left:0px; }
	#basket .icon50.hidden,#basket .plus{display: none;}

.exp{ background:#DDD; box-shadow:0 3px 9px rgba(0,0,0,0.1) inset; height:230px; position:relative;  max-height:0; overflow:hidden; transition:max-height 200ms}
	.exp:before{content:''; border-style:solid; border-width:8px 7px 0 7px;border-color:#195380 transparent transparent transparent; position:absolute; top:-8px; right:32px; z-index: 2;  pointer-events:none; transition: top 150ms}
	.exp.on{ max-height:230px; /* margin-top: -1px; margin-bottom: -1px */}
	.exp.on:before{top:0; transition: top 300ms 200ms}
		.exercise .exp:before{border-top-color: #E84700;}
		.meal .exp:before, .food+.exp:before{border-top-color: #16598C;}
	.exp .swiper-slide .options{ opacity:0; pointer-events:none; top:50%; margin-top:-10px; position:absolute; width: 100%; transition:opacity 200ms}
	.exp .swiper-slide.on .options{opacity:1; pointer-events:all;text-align:initial;}
	.exp.nophoto .swiper-pagination{ top:35px;}
	.portions .swiper-pagination{top: 10px;  bottom:auto; margin-left: -1px;}
		.portionphoto { display:block; width:100%; height:160px;background:url(/media/back-apple.png) #E5E5E5 no-repeat center; background-size:cover; margin:0px!important; }
		.portionSize { position:absolute; display: block; font-size:18px; width:100px;height:100px; border-radius:50% 50% 50% 50%; color:#1d76bb;  background:#fff; margin:-30px 0px 0px 50px; line-height:41px; font-weight:bold; text-align: center; letter-spacing:-1px;}
		.portionName { position:relative; display: block; z-index:1; text-transform:uppercase; font-size:10px!important; font-weight:bold; color:#AAA; top:0;text-align: center; }
		.multiplier { color:#FFF; font-weight:bold; font-size:11px; position:absolute; bottom:25px; left:120px; width:24px; height:24px; background:#F60; line-height:24px; letter-spacing: -0.5px; border-radius:50%; overflow:hidden; transition:all 200ms; text-align:center; }
		.multiplier:empty { width:0px; height:0px; bottom:30px; left:56%; }
		.portions .swiper-slide .icon20{position:absolute;right:0px; top:2px; opacity:0;pointer-events: none;}
		.portions .swiper-slide.on .icon20{opacity:1;pointer-events: all;}

		.nophoto.exp.on{max-height:130px;}
		/* .nophoto .swiper-container.swiper-inline{height:80px; line-height:80px; } */
		.nophoto .portionName{ pointer-events:none;  color:#666; vertical-align:middle; font-size: 14px!important; text-transform: none; line-height:16px; display:inline-block; width:100%; padding: 0 30px 10px;}
		.nophoto .portionSize { pointer-events:none; display:inline; z-index:2; color:#1d76bb; font-size:10px; width:50px; height:50px; line-height:30px; margin:0; float:right; bottom:-25px; left:50%; margin-left:-25px; background:#DDD; }
		.nophoto .multiplier{ bottom: 11px; z-index: 2; margin-left: -14px;}

		.nophoto.exp.on{max-height:175px;}
		.nophoto.exp .icon30{width:40px; height:40px; line-height:40px;}
		.nophoto.exp .icon20 b{width:25px; height:25px; line-height:25px;}
		.nophoto .swiper-container.swiper-inline .swiper-wrapper{height:125px; line-height:125px; }
		.nophoto .portionName{ pointer-events:none;  color:#666; vertical-align:middle; font-size: 16px!important; text-transform: none; line-height:16px; display:inline-block; width:100%; padding: 0 42px 10px;}
		.nophoto .portionSize { pointer-events:none; display:inline; z-index:2; color:#1d76bb; font-size:12px; width:55px; height:50px; line-height:30px; margin:0; float:right; bottom:-25px; left:50%; margin-left:-25px; background:#DDD; }
		.nophoto .multiplier{ bottom: 11px; z-index: 2; margin-left: -4px;}
		.nophoto.exp .portionFooter .icon20{margin-top:7px;}
		.nophoto.exp .swiper-slide .options{margin-top: -22px;}

	.portionFooter{position: relative;z-index: 1; background:#333; color:#FFF; height: 50px; line-height: 50px; text-align:center;}
		.icon-clock{ width: 12px; margin: 19px 7px; position: absolute; left: 0;}
		.portionFooter input{ font-size:14px; font-weight:bold; width:80px; height:50px; color:#FFF!important; background:transparent!important; border:0; text-align:center;float:left; vertical-align: middle;}
		.portionFooter input:nth-child(2){font-size:25px;  letter-spacing:-1px; width:calc(100% - 160px); }
		.portionFooter .icon50 { position:absolute; right: 8px; margin-top:-7px; z-index:2; width:60px; height:60px; line-height:60px; display:none;}
		.portionFooter .icon50,.portionFooter .icon20{opacity:0; pointer-events:none; transition:opacity 500ms;}
		.portionFooter .icon20{ position:absolute; margin-top:10px; left:85px; }
		.portionFooter .icon20+.icon20{ left:auto; right:85px;}
		.portionFooter .icon20 b, .exp .icon30{font-size: 14px; font-weight: bold; vertical-align:top; z-index:3}
		.portionFooter input.focus-state{ background:#195380!important;}
		.portionFooter.on .icon50,.portionFooter.on .icon20{opacity:1; pointer-events:all;}
		.portions .unavailable { font-size:15px; margin:0px; padding:33px 0; line-height:10%; width:100%; }

/* FOOD DETAIL */
.popup>.icon20{ position:relative; z-index:1; margin:15px 10px}
	.popup>.icon20 b,.labelWizard>a b, .minimenu a b, #basketHead a b{ width:26px; height:26px; line-height:26px; font-size:10px; box-shadow: 1px 1px 10px rgba(0,0,0,0.3);}
.minimenu{position:fixed; display:block; top:11px; right:11px; }
	.minimenu a { float:right }
		.minimenu a b{vertical-align: middle;}
		.minimenu a svg { width:16px; height:16px; }
.menuItem p.name { font-weight:bold; font-size:13px;color: #666; }


.labelWizard>a{ position:absolute; z-index:1; /* margin:15px 10px; */ right:10px; top:10px;}
.coverpic{height:360px; position:relative; border-top:solid 5px #333;}
	.modal-out .coverpic{border-color: #F60;}
	.coverpic #mainTitle{color:#FFF; font-weight:800; font-size:28px; position:absolute; bottom:30px; left:25px; margin:0; line-height:100%; letter-spacing:-1px; text-shadow:0 0 2px rgba(0,0,0,0.5)}
	#mainTitle .ficon{margin-top:5px; left: -20px; transform: scale(1.2); }
	#mainTitle .ficon.sharedIn:before{ scale: 0.5; margin: -5px -11px; }
	#foodDetail{padding-bottom: 200px;}
	#foodDetail p.blue{background:#195380; color:#FFF; padding:10px 80px 10px 25px; line-height:120%; margin:0; min-height: 35px;}
	#foodDetail p.blue:empty{padding:4px;}
		#foodDetail #barcodediv,#foodDetail .foodlabel .monitor,#foodDetail #toggleNuts{display: none;}
		#foodDetail .foodlabel input{ pointer-events:none; border:0px;}
		#foodDetail #selectLabel,#foodDetail #isLiquid{display: none;}
		#ingredients{ margin:0 25px; }
		.labelWizard .foodlabel.portionPanel.notVisible {width: 0 !important; height: 0 !important; visibility: hidden; display: block !important;}
		.labelWizard #mainFoodTab, .labelWizard #tabfromValues, .labelWizard #tabfromLabel {padding: 0 !important;}
		.labelWizard .tab.active:not(#tabfromValues) {height: 40vh;}
		.labelWizard .tab.active .icon50 {color: #333; background-color: #EEE;display: flex;justify-content: center;align-items: center;}
		.labelWizard .tab.active:not(#tabfromValues), .labelWizard .tab.active:not(#tabfromValues) > div {display: flex;flex-direction: column;justify-content: center;align-items: center;}
		.labelWizard #tabfromLabel.tab.active {gap: 1rem;}
		.labelWizard #tabfromLabel.tab.active > b {font-size: 1.5rem;}
		.labelWizard #tabfromLabel.tab.active > div:nth-child(2) .preview .check {position: absolute; bottom: .5rem;right: .5rem;display: flex;justify-content: center;align-items: center;background-color: #333;color: white; width: 50px; height: 50px; border-radius: 100%; border: 2px solid white;}
		.labelWizard #tabfromLabel.tab.active > div {flex-direction: row; justify-content: space-evenly; width: 100%;}
		.labelWizard #tabfromLabel.tab.active > div:nth-child(2) > div {display: flex; flex-direction: column; justify-content: center;align-items:center;padding: 0 .5rem;gap: .5rem;}
		.labelWizard #tabfromLabel.tab.active > div:nth-child(2) .preview {position: relative;background-color: #EEE; aspect-ratio: 16/9; height: 100px; border-radius: .5rem;display: flex;justify-content: center;align-items: center;}
		.labelWizard #tabfromLabel.tab.active > div:nth-child(2) .preview img {width: 100%;object-fit: cover;height: 100%;border-radius: 0.5rem;}
		.labelWizard #tabfromLabel.tab.active > div:nth-child(2) .preview img[src=''], .labelWizard #tabfromLabel.tab.active > div:nth-child(2) .preview .hidden {display: none;}
		.labelWizard #tabfromLabel.tab.active > div:nth-child(2) .preview img[src=''] + div {width: 50px;height: 50px;display: flex;justify-content: center;border-radius: 100%;border: 4px solid #AAA;color: #AAA;}
		.labelWizard #tabfromLabel.tab.active > div:nth-child(2) .preview img:not([src='']) + div {display: none;}
		.labelWizard #tabfromLabel.tab.active > div:nth-child(3) {justify-content: center;gap: 15px;}

	.coverpic>div:not(#mainTitle){ background:#333; color:#FFF; margin-top:10px; display:inline-block; font-size:10px; font-weight:bold; line-height:24px; text-transform:uppercase; padding:0 12px 0 17px; margin-left:-10px; border-radius:0 20px 20px 0;}
	.coverpic>div.blue:not(#mainTitle){background:#195380; position: relative;}
	.coverpic .flag{margin-right:3px;}
	#props{ text-shadow: none; height: 55px; }
	.allergenicon{letter-spacing: 0;}
		.allergenicon.prop span{ background:rgba(0,0,0,0.4); border:solid 2px #FFF; line-height:30px; display: block;}
		.allergenicon.prop span.active-state{background:#F60;}
		.allergenicon.prop{color:transparent;}
		.allergenicon.prop svg{fill:#FFF; width:100%; height:100%;}
		.allergenicon.prop.icon-number{color: #FFF; margin-right:7px}
		.allergenicon.prop.icon-number span{display:block; color: #FFF; font-size: 18px; font-weight: bold; margin-bottom:-52px; letter-spacing: -1px}
		.icon-info svg{width:16px!important;}

	#foodDetail .blue+.icon50{ position:absolute; right:6px; margin-top:-45px; line-height: 90%; font-size:18px; box-shadow:0 1px 5px rgba(0,0,0,0.5); z-index:2}
	#foodDetail .blue+.icon50#portionDropBTN{width:70px; height:70px; margin-top: -55px;}
	#foodDetail .blue+.icon50 svg{width:20px;}
		#portionDropBTN:before{content:'PER'; font-weight:normal; font-size:8px; display:block; margin-top:-10px;}
		#portionDropBTN.recipe:before{content:'PER SERVING'}
		#portionDropBTN:after{content:''; border-style:solid;border-width:6px 3.5px 0 3.5px;border-color:#ffffff transparent transparent transparent; position: absolute; margin:5px 2px;}
		#portionDropBTN+.exp:before{right: 34px; border-color:#FFF transparent transparent transparent}
		#portionDropBTN.on{background: #F60;}
		#portionDropBTN.on b, #portionDropBTN.on .smallTxt, #portionDropBTN.on .small, #portionDropBTN.on:after{ display:none; }
		#portionDropBTN.on:before{content:'CHOOSE';font-weight:bold; font-size:10px; margin:0;}

	.popup #notesInput, .popup #timeInput, .popup .icon-clock, .page.editFood #notesInput, .page.editFood #timeInput, .page.editFood .icon-clock, .page[data-page='search-0'] #notesInput, .page[data-page='search-0'] #timeInput, .page[data-page='search-0'] .icon-clock{display:none;}
	.popup #portionInput, .page.editFood #portionInput,.page[data-page='search-0'] #portionInput{ margin-left: 80px; }
	/*.page.editFood .portionFooter .icon50{display:block;}*/

	.nutrients{margin:20px 0;}
		.nutrients p{ line-height:50px; font-size:15px; color:#333; margin:0 25px; border-bottom:otted 2px #EEE; white-space:nowrap; transition:opacity 300ms, margin-top 300ms}
			.nutrients p b{ font-size:24px; color:#195380; float:right; letter-spacing:-2px; line-height:45px; margin-right:10%;}
			.nutrients p em{ float:right; font-style:normal; width:34px; height:34px; line-height:34px; display:inline-block; font-size:10px; font-weight:bold; background:#DDD; border-radius:30px; text-align:center; margin-top: 8px;}
			.nutrients p em.orange{ background:#F60; color:#FFF;}
			.nutrients p em.red{ background:#F22C00; color:#FFF;}
			.nutrients p .small { letter-spacing:normal; float:right; width:20px; margin-left:4px; line-height:51px; }
			/*.nutrients p em:last-child { margin-right:38px; font-size:20px; background:transparent; font-style:italic; }*/
			.nutrients p>span{ text-overflow:ellipsis; overflow:hidden; white-space:nowrap; width:50%; display:inline-block; line-height:15px;}

	.greypanel{ background:#CCC; color:#555; font-weight:bold; text-align:center; padding:20px 0}
		.greypanel p{margin:0;}
		.greypanel input{ border:0; font-size:24px; color:#555; background:transparent; font-weight:bold; text-align:center; margin:0; letter-spacing:-1px;}

/* HEALTH STAR RATING */
#AUfopLabel #ratingImg { width: 76px; height: 76px; -webkit-print-color-adjust: exact; overflow: hidden; margin: 0 auto; }
	#ratingImg img { position: relative; width: 100%!important; }
#AUfopLabel p, #AUfopLabel table { display: none; }

/* FOOD LABEL */
.page.editFood .navbar,.page.recipe .navbar,.page.editFood p em{display:none;}
.page.editFood .page-content,.page.recipe .page-content{padding: 0px 0 200px!important}

.resultExtra{padding:20px 0; font-size:15px; color:#AAA; text-align:center}
	.resultExtra.on{ display:block; }
	.resultExtra button{display:inline-block; margin:10px;}
	#inactiveOutlets:not(:empty)+.resultExtra{display: none;}
	.notFoundMsg{border-bottom:solid 1px #DDD; padding-bottom:30px;}
.labelWizard.recipe #aDivider,.labelWizard.recipe label[data-isprop='0']{display:none;}
.labelWizard .foodlabel{margin:5px 0px 20px 0; position:relative;}
.labelWizard .foodlabel div#isLiquid {  position:absolute; top:-5px; right:86px; width:37px; box-shadow:none; height:46px; border:none; border-radius: 0 50px 50px 0;}
.labelWizard .foodlabel div#isLiquid .selected{padding:0; line-height: 48px;}
.labelWizard .foodlabel div#isLiquid .selected:after{background-color:transparent}
.labelWizard .foodlabel div#isLiquid .selected span{ line-height:58px; font-size:10px;}
.labelWizard .foodlabel div#isLiquid .selectdrop div{padding:0px 5px 0px 5px;}

	#selectLabel{display:none;}
		.startscreen #selectLabel { left:235px; top:42px;}
		#selectLabel { display:inline-block; font-size:12px; position:absolute; width:80px;  border:0;box-shadow:none; line-height:30px;}
		#selectLabel .flag{ margin-right:4px; margin-top:-3px;}
		#selectLabel .selected::after{background:none;}
		#selectLabel.hov .selected::after{color:#1d76bb;}
		#selectLabel .selectdrop div{padding-left:10px;}
		.select .selected { padding-left:5px; color:#1d76bb; display:block; overflow:hidden; position:relative; height:100%; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; }
		#selectLabel .flag { margin-right:4px; margin-top:-3px; }
		.select .selected::after { content:"▼"; color:#888; font-size:8px; display:inline-block; padding:0 5px; background:#EEE; position:absolute; right:0; top:0; height:100%; transition:background 300ms; }
		#selectLabel .selected::after { background:none; }
		.select .selectdrop { box-shadow:1px 4px 8px rgba(0,0,0,0.4); border-radius:0 0 7px 7px; }
		.select .selectdrop { max-height:0px; overflow:hidden; transition:max-height 300ms; }
		.select:not(.clickable):hover .selectdrop, .select.hov .selectdrop { background:#FFF; max-height:400px; overflow-y:auto; border-top:dotted 1px #CCC; }
		.select .selectdrop div { display:block; padding:0px 5px 0px 15px; border-bottom:solid 1px #DDD; font-size:14px; transition:background 200ms; background:#EEE; font-weight: bold; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; }
		#selectLabel .selectdrop div { padding-left:10px; }
		.select:not(.clickable):hover, .select.hov { border-radius:0 0 7px 7px; z-index:6; }
		.select { width:150px; background:#FFF; position:absolute; border-left:solid 1px #CCC; line-height:40px; z-index:1; box-shadow:0px 1px 1px rgba(0,0,0,0.1); }
		.select:not(.clickable):hover:before, .select.hov:before { content:''; background:transparent; display:block; left:-50px; right:-50px; position:absolute; top:0px; bottom:-50px; z-index:-1; }
		#toggleNuts{padding-left: 45px;}
		#toggleNuts:before{content:'+ show'}
		#toggleNuts.hideNuts:before{content:'+ hide'}
		.foodlabel.showLabel p:not(.lInput):not(.monitor), .foodlabel.showLabel .grouphead,.foodlabel.showLabel hr{display: none;}
		.foodlabel .grouphead{background:#DDD; font-size:10px; text-transform:uppercase; text-align:center; padding:4px; font-weight:bold; margin:10px 0; color:#1d76bb; border-top:dotted 2px #DDD;}

	.foodlabel #selectLabel { height:49px; line-height:49px; width:85px; top:-5px; right:0px; background:transparent;}
	.foodlabel #selectLabel .selected{text-align: right;padding-right: 20px;}
	.foodlabel .monitor {font-size:15px; background:#EEE; margin:0; top:-6px; text-align:center;}
	.foodlabel .monitor span { position:relative; text-align:left; display:block; margin:0 25px;  font-weight: bold;}
	.foodlabel .monitor span input{ height:50px; top:0; right:60px; width:105px; padding-right:40px; background:#FFF; }
   .foodlabel .monitor span select{position:absolute; margin-left:58px; height:30px; margin-top:10px; border:solid 1px #DDD; border-left-color:transparent; border-right-color:transparent;}

	.foodlabel p { line-height:50px; font-size:15px; color:#555; margin:0 25px; transition:opacity 300ms, margin-top 300ms; position:relative; }
	.foodlabel p button{position:absolute; right:40px;}
	.foodlabel input { position:absolute; top:2px; right:60px; width:105px; height:47px; border:solid 3px #EEE; display:inline-block; text-align:right; font-weight:bold; padding:8px 35px 7px 8px; letter-spacing:-1px; font-size:24px; color:var(--hcol); transition:all 300ms, background 300ms; border-radius:50px; }
	.foodlabel input.focus-state:not(#barcode):not(#recipeMonitor) { border-color:transparent; border-bottom:solid 3px #444; border-radius:5px; background:#195380; color:#FFF; height:50px; text-align:center; padding:10px; width:190px;}
	.foodlabel input.focus-state+span{color:#FFF;}
	.foodlabel input.textinput{ width:161px!important; text-align:left!important; font-size:16px; position:static; letter-spacing:normal; vertical-align: middle; margin-top: -3px;}
	.foodlabel.portionPanel input.textinput{ padding-left: 20px; width: calc(100% - 115px)!important; }
	.foodlabel.portionPanel input, .foodlabel.portionPanel p:not(.monitor) span{ right:0; }
	.foodlabel p:not(.monitor) span{ position:absolute; top:5px; right:68px; width:25px; font-weight:bold; pointer-events:none; }
		.foodlabel p:not(.monitor) span.labelRating{ font-size: 25px!important; top: 0px; }
.labelWizard .description{background:#195380; color:#FFF; padding:10px 80px 10px 20px; line-height:120%;}
	.labelWizard #chooseCat { color:#FFF; display:inline-block; font-size:10px; font-weight:bold; line-height:24px; text-transform:uppercase; padding:0px 15px 0px 25px; margin-left:-10px; border-radius:0 20px 20px 0; height:26px; z-index:1; position:absolute; top:10px; left:0; }
	.labelWizard #photoOpts { width:135px; position:absolute; left:50%; margin-left:-67px!important; top:45%; }
	.labelWizard #barcodediv{position: absolute; top:-135px; right: 0;}
		.labelWizard #barcodediv button{position:absolute; right:0; padding: 9px 8px; margin-top: -3px;}
		.labelWizard #barcodediv input { font-size:13px; width:160px; right:0; height:28px; border-radius:50px 0 0 50px; border:0; text-align:center; padding-left:25px; color: #999; background-color: #FFF;}
.photoOpts{color:#AAA; font-size:10px; width:135px; height:30px; border-radius:50px; border:0; line-height:30px; position:absolute; left:50%; margin-left:-67px; top:45%; opacity:0; background:#444; transition:all 0.5s;}
#addPhoto{opacity:1;}
#photoOpts.on #addPhoto{opacity:0; pointer-events: none}
#photoOpts.on #fromFolder,#photoOpts.on #fromCamera{opacity:1}
#photoOpts.on #fromFolder{left:-5%}
#photoOpts.on #fromCamera{left:100%}

/* Label Rating Exceptions */
#foodlabel-labelRating { display: none; }
.labelWizard #foodlabel-labelRating { display: block; }

.labelWizard #name { width:100%; display:block; font-weight:bold; padding:10px 20px; letter-spacing:-1px; font-size:28px; color:#fff; background:#333; border:0; position:absolute; bottom:0; }
.description input { width:100%; display:block; color:#fff; background:transparent; border:0; }
.labelWizard #pWrapper { font-size:17px; padding:10px 0px 10px 20px; position:relative; height:45px; background:#EEE; margin:0; }
.labelWizard #portionCount { width:80px; display:inline-block; font-weight:bold; padding:0 15px; letter-spacing:-1px; font-size:20px; border:solid 1px #DDD; color:#195380; position:absolute; right:0px; top: 0; z-index: 1; text-align:center; height: 100%;}
#newIngrSummary{ font-style: italic; font-size: 17px; font-weight:bold; color:#AAA; display:block; border:solid 2px #DDD; border-radius:50px; padding:5px 25px; width:240px;}
#newIngrSummary:empty{display: none;}

#foodPhoto{background: #222;}/*temporary*/
.labelWizard .coverpic{height:auto; min-height:360px;}
#foodPhoto img{width: 100%; height: auto;}
#foodPhoto iframe { width:100%; height:85%; position:absolute; left:0; }
#allergybox {text-align:center; text-transform:uppercase; margin-bottom:10px; }
#allergybox h5, #labelRating h5{ background: #ccc; color: #555555;}
#aBox label.allergenicon,.allergenicon{  text-transform:uppercase; font-size:7px; font-weight:bold; display:inline-block; margin-right:3px; text-align:center; width:44px; word-wrap:break-word;  text-align:center; box-sizing:content-box; color:#444; vertical-align:top;}
	.allergenicon span{ padding:5px; background:#777; border-radius:50%; vertical-align:middle; display:inline-block; margin-bottom:3px; height: 44px; width: 44px; line-height: 33px;}
	svg.icon, .svgicon { fill:#666; background:#DDD; border-radius:50%; padding:3px; width:25px; height: auto; vertical-align:middle; text-align: center;}
		.svgicon svg { fill:#555; width:24px; height:100%; }
	.allergenicon svg { width:80%; height:80%; fill:#FFF; }
			.allergenicon.icon-milk span,.back-milk{background:#a0c3e6;}
			.allergenicon.icon-eggs span,.back-eggs{background:#FCCA2B;}
			.allergenicon.icon-gluten span,.back-gluten{background:#A0845A;}
			.allergenicon.icon-soya span,.back-soya{background:#62B36C;}
			.allergenicon.icon-nuts span,.back-nuts{background:#9E5738;}
			.allergenicon.icon-peanuts span,.back-peanuts{background:#ed4a47;}
			.allergenicon.icon-celery span,.back-celery{background:#9ec64f;}
			.allergenicon.icon-mustard span,.back-mustard{background:#E0D23D;}
			.allergenicon.icon-sesame span,.back-sesame{background:#E0C791;}
			.allergenicon.icon-crustaceans span,.back-crustaceans{background:#f492a2;}
			.allergenicon.icon-sulphites span,.back-sulphites{background:#f7941e;}
			.allergenicon.icon-fish span,.back-fish{background:#51B5B5;}
			.allergenicon.icon-molluscs span,.back-molluscs{background:#6570A8;}
			.allergenicon.icon-lupin span,.back-lupin{background:#B1477D;}
	.back-vegetarian,.back-vegan,.back-glutenfree,.back-kosher,.back-halal{background:#777;}
	#properties{padding: 0px 25px 10px 25px;}
	#aBox{ text-align:center; clear:both}
	#aBox.hidden, #aBox.hidden + .divider {display: none !important;}
	#aBox .allergenicon{ transition:all 300ms; opacity:0; width:0; min-width: 0; margin:0; pointer-events:none;}
	#aBox .allergenicon b, #aBox .delbtn, #aBox .applybtn{display:none;}
	#aBox .allergenicon.on, #aBox.on .allergenicon{width:auto; opacity:1; margin:0 5px}
	#aBox .allergenicon span{width:38px; height:38px; border:solid 2px #EEE; transition:border 300ms}
	#aBox .allergenicon:hover{background:#E9E9E9;}

	#aBox.on {background:#FFF; padding:10px 10px; z-index:3;}
	#aBox.on:before{ font-family:roboto; font-size:inherit; font-weight:normal; padding:5px; color:#444; top:0; box-sizing: border-box;}
	#aBox.on .allergenicon{font-size:8px; padding:5px 0.5%;  color:#666; margin:2px 1.5px; pointer-events:all;}
	#aBox.on .allergenicon span{width:46px; height:46px; transition:opacity 500ms}
	#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{display:block;}
	#aBox.on .applybtn{background:#777; position:absolute; color:#FFF; bottom:1px; right:1px; width:70px; height:70px; line-height:80px; box-sizing:border-box; padding-left:10px; border-radius:100% 0 0 0px; font-family: arial; font-size: 10px; font-weight:bold; text-transform:uppercase;}
	#aBox.on .applybtn:hover{background:#444;}
/* 	.subAllergens {position:absolute;overflow:hidden; background:red;} */
	.subAllergens .allergenicon span{width:30px!important;height:30px!important;line-height:18px; }
	#sub-c-gluten {margin-top:66px;}
	#sub-c-nuts{display:none;}

	.subAllergens label{background-color:#fff;margin:-50px 0px 0px 0px!important;}
	.subAllergens label.show{margin-top:0px!important;}

	/* SUB ALLERGENS MENU PREFS  */
	.suballergens{position: absolute; background: red; z-index: 3;   font-size:10px; text-align:left; padding:0 0 10px; font-weight:bold; border-top:solid 5px #1d77bb; overflow:hidden; transition:all 200ms; width:110px; max-height:0px; opacity:0; pointer-events:none;}
	#toggleValc-nuts+.suballergens{margin-left:219px;}
	.suballergens .icon{ margin:0 30px 5px; fill:#1d77bb!important; margin-top:7px!important;}
	.on+.suballergens{ max-height:280px; opacity:1; pointer-events:all; overflow:visible; box-shadow: 1px 2px 8px 0px #777777;}
	.on+.suballergens:before{  border-style:solid; border-width:6px 7px 0 7px; border-color:#ddd transparent transparent transparent; position:absolute; left:42px; top:60px; }
	.on+.suballergens:after{content:'x'; width:12px; height:12px; position:absolute; top:5px; right:5px; border:solid 1px #999; color:#999; text-align:center; line-height:10px; border-radius:50%;}
	.suballergens a{display:block; padding:3px 1px; transition:background 300ms; color:#999; text-transform:uppercase;}
	.suballergens a.on1, .suballergens a.on2, .suballergens a.on0{ color:#FFF;}
	.suballergens a.on0{text-decoration:line-through;}
	.suballergens a:hover{background:#555;}
	.suballergens a:after{  content:''; border:solid 1px transparent; float:left; width:10px; height:10px; border-radius:50%; text-align:center; line-height:10px; margin: 6px 5px}
	.suballergens a.on1:after{ content:'!'; border:solid 2px #1d77bb; color:#FFF; box-shadow:0px 0px 0px 1px #AAA; width:7px; height:7px;}
	.suballergens a.on2:after{ content:'\2713'; background-color:rgba(0,0,0,0.5); color:#FFF; font-size:10px; line-height:10px; text-align:center;}
   .suballergens a.on0:after{ content:'x'; border-color:#FFF; color:#FFF;}
	#aBox .suballergens{ margin:-1px -18px; border-top:solid 3px rgba(0,0,0,0.1); background-color: #a0845a}
	#aBox .suballergens .icon{ margin:0 20px 5px; }
	#aBox #c-nuts+.suballergens{margin-left:88px; background: #9e5738}
	#aBox .suballergens a{  color:rgba(255,255,255,0.7);}
	#aBox .suballergens a:hover{ color: #FFF; background-color: rgba(0,0,0,0.2);}
	#aBox .suballergens a.on2{color: #FFF;}
	#aBox .suballergens:after { content:''; width:0; height:0; border-style:solid; border-width:0 4.5px 7px 4.5px; border-color:transparent transparent #a0845a transparent; position:absolute; top:-9px; left:50%; margin-left:-5px; }
	#aBox #c-nuts+.suballergens:after{border-color:transparent transparent #9e5738 transparent;}
	#aBox .allergenicon.on2 { background: #CCC; color: #222; border-radius: 10px; }

#dietHint, #aBox.on #dietHint.on{ background:#F60; border-radius: 50px; padding:10px 30px; color:#FFF; margin:0 auto; width:130px; display:none; font-size:18px; display:none;}
		#dietHint:hover{background:#F40; color:#FFF; transition:background 300ms;}
		#dietHint.on{display:block;}
.backtorecbtn:before{content:'back to recipe';float:right;}
.backtorecbtn{left:-3px; border-radius: 0 50px 50px 0;}
.labelWizard .notesContainer {display: flex;justify-content: center;align-items: center;}
.labelWizard .notesContainer #notes {width: 80vw;}
#notes { min-height:250px; margin: 40px 0 20px; }
#footer{position:fixed; bottom:0; left:0; right:0; padding:10px 20px;}

/* STORE */
.store h2{margin:40px 0 20px;}
.store h2 .icon50{margin-right:10px;}
.store h2 svg{ vertical-align:baseline;}
.card { width:160px; width:calc(50vw - 15px); min-height:110px; display:inline-block; margin:4px; padding:15px; vertical-align:top; line-height:100%; position:relative; text-align:left; border-radius:10px; box-shadow:1px 1px 8px rgb(0 0 0 / 30%); transition: transform 200ms}
.card.large{height: 250px;}
		.card .img { width:100%; height:75%; min-height: 50px; background-size:contain; background-repeat:no-repeat; background-position:center left; border-radius:7px;}
		.card.center {text-align: center;}
			.card.center .img{background-position: center;}
		.card .img+.name{margin-top: 10px;}
		.card .name{ display:block; }
		.card .subhead{ font-size:10px; color:#AAA}
		.card.installed .name, .card.installed svg{color:#AAA;}
		.card>svg{margin-right:5px; margin-left:-5px; width:25px; height:auto}
		.card .footer { display:block; position:absolute; background:#EEE; bottom:0; left:0; right:0; height:18px; font-size:10px; font-weight:bold; border-radius:0 0 10px 10px; padding:0 12px; line-height:18px; }
		.card.active-state { transform: scale(1.05)}
		.card .counter.badge { bottom:-5px; right:-12px; box-shadow:0 0 0 3px #FFF; z-index: 1}
		.card.clearback.nopad .img{background-size:cover;}

	.card.noimg { padding: 40px 15px; }
	.card.square { width:110px; }
	.card.clearback { box-shadow:none; }
	.card.noname{ padding: 5px}
		.card.noname .name{ display:none; }
		.card.noname .img{ height: 100%; min-height: 110px; }

		.card.tracker .subhead{text-transform: uppercase;}
	.card.extraBtn{ height:182.5px; line-height: 182.5px; padding: 0;}

.store #searchresults{position:absolute; background:#FFF; z-index:9999; border-top:solid 5px #1D76BB; padding:20px; min-height:100%; width: 100%;}
	.store #searchresults:empty{ display:none;}
	.store #searchresults:empty:before{content:'';}

/* TRACKER */
.trackerForm{ max-height:0px; overflow:hidden; transition:max-height 300ms; background-color:#DDD; border-bottom: solid 1px #DDD; clear:both; }
	.trackerForm.on{ max-height:500px;}
	.trackerForm label{padding:20px; border-bottom:solid 2px #CCC;}
	.trackerForm button{margin:20px 20px 20px;}
.tracker p.greyback{ border-bottom:solid 5px #DDD; padding:20px 18px; line-height:120%; margin: -17px 0; min-height:80px;}
	.tracker p.greyback .button{margin-left:10px;}
	.tracker p.greyback .button.on{background:#888;}
	.tracker p.greyback .button.on:after { content:'\25bc'; margin-left:5px}

.tracker .pies{ height:230px; width:100%; margin:0; position: relative; }
	.tracker .pies:before {  top:20px; left:8%; content:'LOADING...'; background:#DDD; position:absolute; width:120px; height:120px; z-index:0; line-height:125px; text-align:center; font-size:12px; font-weight:bold; color:#FFF; border-radius:50%;  }
	.tracker .pies a{ margin: 10px 0 0 6%;}
	.hbars{ float:right; width: 47%; margin:10px 0 0 0; border-left:solid 6px #DDD; padding:5px 0; line-height:28px; text-transform:uppercase; font-weight:bold; color:rgba(0,0,0,0.8); font-size:8px; height:210px; overflow-y:auto;  position:relative; z-index:1;}
		.hbars>div{  min-height:100%; width: 70%; border-right:solid 1px #AAA;}
		.hbars li{list-style: none; position:relative; padding-left:5px;}
			.hbars b{ display:block; background:#CCC; border-radius:0 3px 3px 0; position:absolute; height: 100%; z-index: -1; left:0; border-bottom:solid 2px #FFF;}
			.hbars li.on{color:#FFF;}
			.hbars li.on.blue{ color:#1d76bb;}
			.hbars li.on b{background:#1d76bb;}
			.hbars.orange li.on b{background:#F60;}
	.tracker .page-content{overflow-x:hidden;}

.tracker #leftBtn { position:absolute; height:35px; line-height:30px; left:7%; top:300px; }
.topintake{border-bottom:solid 5px #DDD;}
.topintake h5{margin: 0 0;}
.fTrackerUpdBtn svg{width:18px;}
/* SETTINGS */
#profile label{display:block;}
#profile {padding-bottom: 0px;}
#profile #label-dob span{top:-35px;}
#label-s_publisher,#s_publisher{display: inline-block; width:100%;text-align: center;}
.hovergrow{font-family:Arial; display:block; display:block; min-height:50px; position:relative; width:100%; float:left; margin-top:25px; vertical-align:middle; }
	.hovergrow input, .hovergrow select, .hovergrow textarea{ box-sizing:border-box; width:99%; border:2px #DDD solid; border-right:0; border-left:0; outline:none; padding:10px 20px; transition:all 200ms; font-weight:bold; font-size:18px; color:var(--hcol); }
	.hovergrow input[value=""]+span ,.hovergrow textarea[value=""]+span { top: -7px; }
	.hovergrow span { box-sizing:border-box; position:absolute; top:-35px; padding:10px; display:block; width:100%; transition:all 200ms; font-size:10px; font-weight:bold; text-transform:uppercase; color:#888; }
	.hovergrow span strong { float:right; color:#BBB; font-style:italic; display:none; margin-right:5px; }
	/* .hovergrow input[value=""]+span,.hovergrow textarea[value=""]+span{top:0px; } */
	.hovergrow input:focus+span,.hovergrow textarea:focus+span{top:-35px; color:#1d76bb}
	.hovergrow input:focus+span strong,.hovergrow textarea:focus+span strong{display:inline;}
	.hovergrow input:focus, .hovergrow textarea:focus{border-bottom-color:#F60; color:#1d76bb}
	.hovergrow select{padding:9px 20px;}
	.hovergrow select:focus{ color:#1d76bb}
#help p { font-style:italic; color:#999; font-size:16px; padding:14px 0; border-bottom:dotted 2px #EEE; margin:0; }
#help p:before,#help p:after{content:'"';}
#help h6{margin-bottom:20px;}
#help h6+p{border-top:dotted 2px #EEE; margin-top:-10px;}
#help p+h6{margin-top:40px;}
h2+h6{margin-top:-15px; margin-bottom:40px}
h6+h6{margin-top:40px;}

.pCard{  position:relative; width:100%;  display:inline-block; padding-left:5%; padding-right:5%; transition:all 500ms; margin-left:0px; opacity:1; vertical-align: top;}
	.pCard+.pCard{margin-top: 50px}
	 .pCard .cardElement{margin-top:0;}
	 .cardElement>.btn.xsmall{margin: 7px;}
	 /* .pCard:not(.editCard):not(.addCard):before{content:attr(data-cardname); display:block; text-align:left; font-size:18px; font-weight:bold; padding:10px 10px 10px 20px;} */
	 /* .pCard .del{background:#22689e; width:35px; height:35px; position:absolute; text-align:center; border-radius:50%; color:#FFF; top:3px; right:4px;}
		.pCard .del svg{width:18px; vertical-align:text-top;} */
	.pCard input[type=checkbox]+label:before{float: right; margin-top: 15px; margin-left: 5px;}
	/* .pCardInput{background:#EEE; border-radius:50px; padding:12px; width:335px;font-weight: bold; text-align: left;} */
	.pCardInput { background:#EEE; border-radius:50px; padding:12px; width:100%; font-weight:bold; text-align:left; }

	.pCardInput+button{position:absolute; right:4px;top:1px;}
	.pCardInput #cardImg{vertical-align:bottom; margin-right:4px; margin-left:7px;}

	.pCardName input{background:#FFF!important; border:0!important;}
		.pCardName .fname{font-style:italic; text-transform:inherit; color:#AAA;}
	.pCardCheck { position:absolute; right:23px; top:18px; }

	.pCard.offScreen { margin-left:-375px; opacity:0; }
	.pCard.addCard .pCardInput{padding: 12px 42px 12px 12px;}
	.pCard .pCardSelect { position:absolute; top:3px; right:3px; background:#222222; color:#FFF; border-radius:50%; width:35px; height:35px; display:inline-block; text-align:center; font-size:7px; line-height:35px; transform:rotate(90deg); }
	.pCard.editCard .fname{display: none;}

.paySettings .unavailable{padding:56px;}
#allpCards{ display:inline-block; width:100%; }
	#allpCards .unavailable{margin:0; padding:73.5px;}
#addpCard { margin:0 auto; display:inherit; transition: margin 300ms }


/*DEV TOOLS*/
.boolean{color:#1d76bb;}
.number{color:#900}
.string{color:#F60}
#devLog{white-space: pre; font-family:monospace; line-height: 100%; font-size: 14px;}
#devLog:empty:before{content:'The trace log is empty'; font-size:20px; padding:50px 0; text-align:center; display:block; coLor:#CCC}
#devLog hr { visibility: visible; margin:10px 0 0; border: solid 3px #EEE; }
#build { background:#AAA; color:#FFF; position:fixed; bottom:0; left:0; display:block; z-index:99999999; padding:1px 14px; font-size:10px; text-transform:uppercase; border-radius:0 11px 0 0; opacity:1 }

/* ALL FOOD PAGE */
.card-healthScore .xxlargeTxt { margin:25px 0px 13px -5px; display:inline-block; color:#195380; }

/* OUTLET PAGE */
.outletFooter{padding: 60px 20px;}
	.outletFooter>img{ mix-blend-mode:multiply; opacity:0.7;}
	.page.outlet .para .counter.large{margin-top:-4px;}

.slideshow { width:100%; height: 270px; position: relative;}
	.slideshow>div { position: absolute; width:100%; height:100%; background:#DDD url(/media/back-apple.png) no-repeat center; background-size:cover; transition: opacity 500ms; opacity: 0}
	.slideshow>div.on{opacity: 1;}
.slideshow+h4 { background:linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 20%,rgba(30,30,30,0.8) 100%); position:absolute; width:100%; transform:translateY(-100%); text-shadow:0 1px 4px rgb(0 0 0 / 50%); padding:40px 15px 30px; font-size: 28px	}


/*MENU PAGE*/
.page.menu{text-align: center;}
	.page.menu #searchbar{border-bottom-color: #F60;}
	.page.menu #searchpredata{padding-top:50px!important;}
	.menulogo { width:120px; display:block; margin:0 auto 30px; }
	h2.black{ margin-top:-5px;}
	.page.menu h2+h3{text-transform: none;}
	.page.menu .divider{margin-bottom: 0}
	.menuItems{min-height: 200px;}
	.menuItems .listItem:not(.vis){display: none;}
	.menuItems div .desc{ display:-webkit-box; max-width:200px; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis; line-height:114%; }


/*MENU ORDERS*/
.page.menu.order #portionInput,#aiBasket.order #portionInput{ pointer-events:none; position:absolute; left:80px;}
.page.menu.order .portionFooter:before,#aiBasket.order .portionFooter:before { content:'Choose servings'; position:absolute; z-index:1; background:#333333; width:calc(100% - 160px); left:80px; top:0px; text-transform:uppercase; font-size:10px; font-weight:bold; color:#AAA; letter-spacing:normal; }
.page.menu.order #notesInput,#aiBasket.order #notesInput{float: right}
	.page.menu.order .portionFooter.on:before, #aiBasket.order .portionFooter.on:before{content:'';opacity: 0;background: transparent;}
.page.menu.order .portionFooter .icon20, #aiBasket.order .portionFooter .icon20, .page.menu.order #timeInput,#aiBasket.order #timeInput, .page.menu.order .icon-clock,#aiBasket.order .icon-clock,#aiBasket.order #cMethods{display: none;}

.orderItems.card{ width: calc(100vw - 4px);height: auto; padding: 10px 15px;}
	.orderItems .card-header ,.orderItems .card-footer{    padding: 0; }

#customerForm { /* width:340px; */ margin:0px auto; max-height:0px; /* overflow:hidden; */ transition:transform 400ms; /* max-height:500px; */ transform:translateX(400px);}
#customerForm .tabmenu .pillbtn{ position:relative; padding:0px 40px; background:#414141; margin-bottom:40px; margin-top:20px;}
	#customerForm .tabmenu .pillbtn svg { width: 20px; margin:-4px 2px 0 -7px; }
		#customerForm .tabmenu .pillbtn.on{background:#FFF; color:#333;}
		#customerForm .tabmenu .pillbtn.on:after{content:''; border-style:solid; border-width:9px 6px 0 6px; border-color:transparent; border-top-color:#FFF; position:absolute; left:50%; margin-left:-6px; bottom:-7px; }
	#customerForm .hovergrow input{height:40px; background:#333; color:#EEE;  border:1px #AAA solid; border-right:0; border-left:0;}
	#customerForm .tab{display: none}
	#customerForm .tab.on{display: block;}
#customerForm .pCard{padding:0;}
#customerForm .pCard .pCardInput{display:inline-block; background: #333;}
#customerForm .selectedCard.on .pCardDrop{max-height: 500px; background: #555555;}
#customerForm .selectedCard:before { content: attr(data-header); display:block; padding:0px 10px 10px; font-size:10px; font-weight:bold; text-transform:uppercase; color:#888; text-align:left }
#customerForm .pCardDrop{ max-height: 0px; overflow:hidden; transition: max-height 300ms;margin-top:-44px; padding-top:55px; width:100%; border-radius:20px;}
#customerForm .pCardDrop button{margin-bottom: 20px}
#customerForm .pCard{text-align: center;}

#specificTimesPop .dateinput { border:0; width:200px; text-align:center; font-size:20px; position:absolute; left:50%; margin-left:-100px; top:15px; }
#orderCalender{padding: 15px;}
	#orderCalender .picker-calendar{ margin:0; width:100%; height:330px; min-width: 290px;}
	#orderCalender .picker-modal-inner{ height: 280px;}
	#timeBtns{text-align:center; padding:20px 0px 70px 0px;}
		#timeBtns button{width: 95px; position: relative;}
			#timeBtns button span{ position:absolute; transform:translateY(-10px); width:100%; left:0; pointer-events:none; opacity:0.8;}
	#orderCalender .picker-header, #orderCalender .picker-footer{display: none;}
	#timeBtns:empty:before { content:"No order times are currently available on the selected date"; display:block; font-size:28px; color:#AAA; text-align:center; }


#aiBasket.order .moveIn{transform: translateX(0px)!important;}
#aiBasket.order .moveOut { display: inline-block!important; transform:translateX(-500px); }

.page.menu #leftBtn.pillCenter{ display: flex!important;flex-direction: row-reverse;}
	.page.menu #leftBtn.pillCenter svg{margin: 8px 6px 0px 0px;}

.orderBtn{display: none!important;}
	.orderBtn.on{display: block!important;}

/*MENU PREFS*/
.rightButtons{position: absolute; right: 20px; margin-top: 20px;}
	#activePrefCount { margin:18px; }
.prefspopup { width:93%; height:525px; max-height:calc(100vh - 110px); margin-top:68px; border-radius:2px 2px 40px 40px; margin-left:2%; }
.prefspopup form{ max-height:calc(100vh - 186px); overflow-y:auto;}
	#tickbtn { position:absolute; right:1px; top:-80px; border:solid 3px #FFF; opacity:0; transform:scale(0.8); transition: opacity 300ms, transform 300ms}
		#tickbtn.on{opacity: 1; transform:scale(1);}
		#tickbtn svg { width:26px; display:block; height:45px; }
		#tickbtn:after { content:'DONE'; display:block; margin:2px 0; background:#999; line-height:6px; padding:7px 0 0; text-shadow:1px 1px 3px #666; }
	.prefspopup #aBox{background:none; width:100%; margin-top: -30px;}
	.popup.userPrefs{ height:500px; top:81px; left:5%; width:90%; border-radius:0 0 30px 30px; }
	.userPrefs .icon20{ display:none; }
	#outletStarBtn{ position: absolute; margin-top: 25px; left:20px;}