:root {
	--font-family-1: "neuzeit-grotesk", helvetica, arial, sans-serif;
	
	--size-base: 16px;
	--size-xxs: calc( var(--size-base) / 1.62 / 1.62 / 1.62 );
	--size-xs: calc( var(--size-base) / 1.62 / 1.62 );
	--size-s: calc( var(--size-base) / 1.62 );
	--size-m: calc( var(--size-base) );
	--size-l: calc( var(--size-base) * 1.62 );
	--size-xl: calc( var(--size-base) * 1.62 * 1.62 );
	--size-xxl: calc( var(--size-base) * 1.62 * 1.62 * 1.62 );
	--size-xxxl: calc( var(--size-base) * 1.62 * 1.62 * 1.62 * 1.62 );
	
	--big-xxs: calc( var(--size-xxs) * 10 );
	--big-xs: calc( var(--size-xs) * 10 );
	--big-s: calc( var(--size-s) * 10 );
	--big-m: calc( var(--size-m) * 10 );
	--big-l: calc( var(--size-l) * 10 );
	--big-xl: calc( var(--size-xl) * 10 );
	--big-xxl: calc( var(--size-xxl) * 10 );
	--big-xxxl: calc( var(--size-xxxl) * 10 );
	
	--size-smaller: calc( var(--size-base) - var(--size-xxs) );
	
	--color-dark: #091326;
	--color-light: #fff;
	
	--color-main: #766cf8;
	--color-main-dark: #030334;
	--color-main-light: #f2f3fd;
	--color-splash: #fdeec0;
	--color-go: #00b894;
	--color-go-light: #f0f9f6;
	--color-alert:  #ff0050;
	
	--color-lightgrey: #f7f7f9;
	--color-darkgrey: #a7a7b8;
	--color-border: #e7e7e9;
	--color-fade-dark: rgba(0,0,0,0.15);
	--color-fade-light: rgba(255,255,255,0.15);
	
	--gradient-main: linear-gradient(to bottom, #696af5, #4f44db);
	--gradient-dark: linear-gradient(to bottom right, var(--color-main-dark), var(--color-main));
	--gradient-light: linear-gradient(to bottom, var(--color-lightgrey), var(--color-light));
	--gradient-main-light: linear-gradient(to bottom, var(--color-main-light), var(--color-light));

}

html, body{
	background: var(--color-light);
	font-size: var(--size-base);
	margin: 0;
	padding: 0;
	min-height: 100vh;
}
*{
	font-family: var(--font-family-1);
}

a{
	color: var(--color-main);
	text-decoration: none;
}
i{
	position: relative;
	top: 2px;
}

h1,
.flex-content h2{
	font-size: calc( var(--size-l) + var(--size-xs ));
}
h2{
	font-size: calc( var(--size-m) + var(--size-xxs) + var(--size-xxs) );
}
h3{
	font-size: calc( var(--size-m) + var(--size-xxs) );
}
h4{
	font-size: var(--size-m);
}
h5{
	font-size: var(--size-smaller);
}

input,
textarea,
select{
	background: #fff;
	border: 1px solid var(--color-border);
	border-radius: var(--size-xs);
	font-size: var(--size-base);
	padding: var(--size-s) var(--size-s);
	width: calc(100% - var(--size-s) - var(--size-s) - 2px);
	/* max-width: calc(( var(--big-s) * 1.62 ) - var(--size-s) - var(--size-s)); */
	outline: none !important;
}
textarea{
	height: var(--big-m);
}
input:focus{
	border: 1px solid var(--color-main);	
}
input[type="checkbox"],
input[type="radio"]{
	width: auto;
	transform: scale(1.5);
	display: inline-block;
	margin-right: var(--size-xs);
}
input[type="checkbox"] + label,
input[type="radio"] + label{
	width: auto;
	display: inline-block;
}
input[type="submit"]{
	width: auto;
}
label{
	color: var(--color-dark);
	font-weight: bold;
}
label input,
label textarea,
label select,
label .tox-tinymce{
	margin-top: var(--size-xxs);
}
.tox-tinymce{
	height: var(--big-l) !important;
}

table{
	background: transparent;
	border: none;
	border-collapse: collapse;
	width: 100%;
}
td, th{
	padding: var(--size-m);
	font-weight: normal;
	text-align: left;
	background: var(--color-light);
	border-bottom: var(--size-xs) solid transparent;
	color: var(--color-darkgrey);
	background-clip: padding-box;
}
th{
	padding: var(--size-xs) var(--size-m);
	font-weight: bold;
	background: transparent;
	color: var(--color-dark);
}
table a{
	border-bottom: 1px solid var(--color-main);
}
table.smaller{
	max-width: 400px;
}
table.smaller td,
table.smaller th{
	padding: var(--size-xs) var(--size-m);	
}
table tr:nth-child(2n+2) td{
	background: #f9f8f8;
}

tr.slimmed td{
	padding-top: var(--size-xs);
	padding-bottom: var(--size-xs);
	opacity: 0.38;
}

pre{
	background: var(--color-lightgrey);
	padding: var(--size-s);
	border: 1px solid var(--color-border);
	border-radius: var(--size-xs);
}
code{
	max-width: 100%;
}

hr{
	border: none;
	border-top: 1px solid var(--color-fade-dark);
	margin-top: var(--size-l);
	margin-bottom: var(--size-l);
}
hr.dashed{
	border-top-style: dashed;
}

.btn{
	display: inline-block;
	background: var(--gradient-main);
	font-size: var(--size-base);
	border: none;
	border-radius: 100px;
	color: var(--color-light);
	padding: var(--size-s) var(--size-l);
	cursor: pointer;
	transition: 0.2s;
	outline: 2px solid transparent;
}
a.btn{
	display: inline-block;
}
.btn:hover{
	outline: 2px solid var(--color-go);
}
table .btn{
	padding: var(--size-s) var(--size-l);	
}
.btn i{
	top: 3px;
	line-height: 0;
}
.btn i:last-child{
	margin-right: -5px;
}
.btn i:first-child{
	margin-right: 0;
}
.btn.bigger{
	padding: var(--size-m) var(--size-l);
	border-radius: var(--big-m);
	font-weight: bold;
}
.btn.smaller{
	padding: var(--size-xs) var(--size-m) var(--size-xs) var(--size-m);
	border-radius: var(--size-xxl);
	margin-bottom: var(--size-xs);
}
button.btn.smaller{
	padding: calc(var(--size-xs) - 1px) var(--size-m) var(--size-xs) var(--size-m);	
}
.btn.smallsquare{
	padding: var(--size-xs) var(--size-s) var(--size-xs) var(--size-s);
	border-radius: var(--size-s);
}
.btn.grey{
	background: var(--color-lightgrey);
	color: var(--color-dark);
}
.btn.grey:hover{
	
}
.btn.white{
	background: var(--color-light);
	color: var(--color-dark);
}
.btn.transparent{
	background: transparent;
	border: 2px solid var(--color-main);
	padding: calc(var(--size-s) - 2px) calc(var(--size-l) - 2px);
	color: var(--color-main);
}
.btn.transparent.bigger{
	background: transparent;
	border: 2px solid var(--color-main);
	padding: calc(var(--size-m) - 2px) calc(var(--size-l) - 2px);
	color: var(--color-main);
}
.btn.lightblue{
	background: var(--color-main-light);
	color: var(--color-dark);
}
.btn.red,
.btn.alert{
	color: var(--color-light);
	background: var(--color-alert);
}
.btn.green{
	color: var(--color-light);
	background: var(--color-go);
}
.btn.next{
	border-radius: var(--size-xs);
	background: var(--gradient-main);
	color: var(--color-light);
	height: 38px;
	top: 1px;
	position: relative;
}
table.smaller .btn{
	top: 2px;
	position: relative;	
}
a.btn + br + a.btn{
	margin-top: var(--size-s);
}
.no-btn{
	background: none;
	font-size: var(--size-m);
	text-decoration: underline;
	border: none;
	cursor: pointer;
}

.info{
	background: var(--gradient-light);
	padding: var(--size-s) var(--size-m);
	margin: 0 auto var(--size-xl) auto;
	max-width: 420px;
	border-radius: var(--size-xs);
	color: var(--color-darkgrey);
	line-height: 1.4;
	display: flex;
}
.info i{
	font-size: var(--size-xl);
	margin-right: var(--size-m);
	color: var(--color-dark);
}
.warning{
	background: var(--color-splash);
	padding: var(--size-s) var(--size-m);
	margin: 0 auto var(--size-xl) auto;
	width: calc(90% - var(--size-m) - var(--size-m));
	max-width: 420px;
	border-radius: var(--size-xs);
	color: var(--color-dark);
	line-height: 1.4;
	display: flex;	
}

.clear{
	clear: both;
	width: 100%;
	display: block;
	position: relative;
}

.fullwidth{
	width: 100%;
	max-width: 100%;
}

.fontblack{
	font-weight: 900;
}

.right{
	text-align: right;
}
.left{
	text-align: left;
}
.center{
	text-align: center;
}

.nomargin{
	margin: 0;
}

.hidden{
	display: none;
}
div.spacer{
	width: 100%;
	height: var(--size-l);
	display: block;
	position: relative;
}
div.spacer.small{
	height: var(--size-s);	
}
div.spacer.large{
	height: var(--size-xl);	
}

.box{
	padding: var(--size-l);
	max-width: var(--big-xl);
	border: 1px solid var(--color-border);
	border-radius: var(--size-m);
	position: relative;
}
.box.fullwidth{
	max-width: calc( 100% - var(--size-l) - var(--size-l) );	
}
.box + .box,
.btn + .box{
	margin-top: var(--size-m);
}
.box > *:first-child{
	margin-top: 0;
}

.alert{
	color: var(--color-alert);
	animation: blink 2s linear infinite;
}
.error{
	background: var(--color-alert);
	color: var(--color-light);
	padding: var(--size-s) var(--size-m);
	border-radius: var(--size-xs);
	display: inline-block;
	margin-top: var(--size-s);
}
.grey{
	color: var(--color-darkgrey);	
}
.red{
	color: var(--color-alert);	
}
.go, .green{
	color: var(--color-go);	
}

.response{
	padding: var(--size-s);
	color: var(--color-main);
}

.form{
	width: 100%;
	max-width: var(--big-xl);
}
.form label{
	width: 100%;
	display: block;
	margin-bottom: var(--size-s);
}
.form input[type="text"],
.form input[type="number"],
.form input[type="email"],
.form input[type="password"],
.form textarea{
	margin-bottom: var(--size-s);
	width: 100%;
	max-width: calc(100% - var(--size-s) - var(--size-s));	
}

.neat-check{
	vertical-align: top;	
}
.neat-check input{
	display: inline-block;
	vertical-align: top;
}
.neat-check span{
	display: inline-block;
	width: calc(100% - 40px);
	font-weight: 400;
	vertical-align: top;
}

.tabs-box{
	background: var(--color-light);
	border: 1px solid var(--color-border);
	border-radius: var(--size-s);
	overflow: hidden;
	padding: 0 var(--size-l) var(--size-l) var(--size-l);
}
.tabs-header{
	display: flex;
	flex-direction: row;
	margin-left: calc(0px - var(--size-l));
	margin-right: calc(0px - var(--size-l));
	position: relative;
	width: calc(100% + var(--size-l) + var(--size-l));
}
.tabs-header > *{
	flex: 1;
	text-align: center;
	padding: var(--size-m) 0;
	background: var(--color-lightgrey);
	cursor: pointer;
	font-weight: bold;
	font-size: var(--size-smaller);
	text-transform: uppercase;
	letter-spacing: 1px;
	border-left: 1px solid var(--color-border);
	border-bottom: 1px solid var(--color-border);
}
.tabs-header > *:first-child{
	border-left: none;
}
.tabs-header > *.active{
	background: var(--color-light);
	border-bottom: none;
}
.tabs-content > *{
	width: calc(100% - var(--size-l) - var(--size-l));
	display: none;
	padding: var(--size-l) 0;
}
.tabs-content > *:first-child{
	display: block;
}

/* auth */
#authlogo{
	width: var(--big-m);
	margin: var(--size-m) auto 0 auto;
	position: relative;
	display: block;
	margin-bottom: var(--size-m);
}
.card{
	background: var(--color-light);
	max-width: calc( var(--big-l) * 1.62 );
	margin: 0 auto;
	text-align: center;
	padding: var(--size-l);
	border-radius: var(--size-m);
}
.card-header{
	font-size: var(--size-l);
	font-weight: bold;
	margin-bottom: var(--size-m);
}
.card label{
	margin-top: var(--size-s);
	margin-bottom: var(--size-xs);
	position: relative;
	display: block;
}

/* */
#container{
	display: flex;
	flex-direction: row;
	position: relative;
}
#sidebar{
	width: calc( var(--big-m) + var(--size-xl) );
	min-width: calc( var(--big-m) + var(--size-xl) );
	background: var(--color-light);	
	min-height: 100vh;
	margin-top: 0;
	border-right: 1px solid var(--color-border);
}
#sidebar > div{
	position: sticky;
	top: 0;
	display: block;
	padding-bottom: var(--size-l);
}
#sidebar #logo{
	width: calc(100% - var(--size-xxl));
	display: block;
	position: relative;
	height: auto;
	margin: 0 auto var(--size-l) auto;
	padding-top: var(--size-l);
}
#sidebar ul{
	list-style: none;
	padding: 0 var(--size-s);
}
#sidebar li.spacer{
	width: 100%;
	height: var(--size-m);
}
#sidebar li.active{
	background: transparent;
	border-radius: 100px;
	color: var(--color-dark);
}
#sidebar li.active a{
	color: var(--color-dark);
	font-weight: bold;
	padding: var(--size-xs) var(--size-m);
	margin: var(--size-xxs) 0;
}
#sidebar a{
	color: var(--color-darkgrey);
	padding: var(--size-s) var(--size-m);
	display: block;
}
#sidebar a i{
	margin-right: var(--size-s);
}
#sidebar a:hover{
	color: var(--color-dark);
}
#content{
	flex-grow: 1;
	padding: var(--size-xxl) var(--size-xxl) var(--size-xxl) var(--size-xxl);
	overflow: scroll;
	position: relative;
}

/* */
#messages{
	display: flex;
	flex-direction: row;
	background: transparent;
	height: calc(100vh - (var(--size-xxl) * 2) - var(--size-l));
	padding: 0 0;
	margin-top: 0px;
	position: relative;
}
#messages-peoples{
	padding: 0;
	width: calc( var(--big-m) + var(--size-xl) );
	min-width: var(--big-m);
	margin-right: 0;
	height: calc( 100vh - var(--size-xxl) - var(--size-xxl) );
	height: 100%;
	overflow-y: scroll;
	overflow-x: hidden;
	position: relative;
}
#messages-messages{
	width: calc(var(--big-l) * 1.62);
	max-width: calc(100% - var(--size-l) - var(--size-l));
	height: calc( 100vh - var(--size-xxl) - var(--size-xxl) );
	height: 100%;
	overflow-y: scroll;
	overflow-x: hidden;
	padding: 0;
	background: var(--color-light);
	border-left: 1px solid var(--color-border);
	margin-left: var(--size-m);
	padding-left: var(--size-m);
	padding-right: 0;
	display: none;
	
	display: flex;
	flex-direction: column;
}
#the-messages{
	overflow: hidden;
	overflow-y: scroll;
	
	flex: 1;
}
.message{
	width: 62%;
	background: var(--color-lightgrey);
	padding: var(--size-s) var(--size-m);
	border-radius: 0 var(--size-m) var(--size-m) var(--size-m);
	margin-bottom: var(--size-l);
	float: left;
	position: relative;
}
.message img,
.message video{
	width: 100%;
	ehight: auto;	
}
.message.msg-from{
	background: var(--color-main);
	float: right;
	color: var(--color-light);
	border-radius: var(--size-m) var(--size-m) 0 var(--size-m);
}
.msg-date{
	position: absolute;
	left: var(--size-m);
	top: -16px;
	color: var(--color-darkgrey);
	font-size: var(--size-smaller);
	text-transform: uppercase;
	letter-spacing: -0.5px;
}
.message.msg-from .msg-date{
	right: var(--size-m);
	left: auto;
}
.people{
	background: var(--color-light);
	padding: var(--size-m) 0;
	display: block;
	position: relative;
	color: var(--color-darkgrey);
	cursor: pointer;
	border-top: 1px solid var(--color-border);
}
.people:hover{
	color: var(--color-dark) !important;
}
.people.unread{
	color: var(--color-dark);
	font-weight: bold;
}
.people.active{
	color: var(--color-dark);
	padding-left: var(--size-l);
	font-weight: bold;
}

.people.active:before{
	content: '';
	position: absolute;
	top: calc(var(--size-s) + var(--size-s));
	left: 0;
	width: 0; 
	height: 0; 
	border-top: var(--size-xs) solid transparent;
	border-bottom: var(--size-xs) solid transparent;
	
	border-left: var(--size-xs) solid var(--color-main);
}
.people.active span{
	font-weight: normal;
}
.people span.alert{
	font-size: var(--size-smaller);
}
.people span.prompt{
	font-size: var(--size-smaller);
	color: var(--color-dark);	
}
.people span.nothing{
	font-size: var(--size-smaller);
}
#send-msg-form{
	margin-top:  var(--size-m);
	
	height: 82px;
	
	display: flex;
	position: relative;
}
#send-msg-form textarea{
	flex: 1;
	height: 59px;
}
#send-msg-form > div:nth-child(2){
	width: 110px;
	margin-left: var(--size-m);
}
#send-msg-form button[type="submit"]{
	margin-bottom: var(--size-xs);
	width: 100%;
	padding-left: 0;
	padding-right: 0;
}
#msg-attachment{
	position: relative;
}
#msg-attachment button{
	position: relative;
	width: 100%;
	padding-left: 0;
	padding-right: 0;
}
#msg-attachment button.file-added{
	background: var(--color-splash);
	border-color: var(--color-dark);
	color: var(--color-dark);
}
#msg-attachment input{
	height: 36px;
	position: absolute;
	padding: 0;
	width: 100%;
	top: 0;
	left: 0;
	opacity: 0;
	cursor: pointer;
	z-index: 999;
}
#attached-file{
	background: var(--color-splash); 
	display: none; 
	padding: var(--size-xxs) var(--size-xs);
	border-radius: var(--size-xs);
	border: 2px solid var(--color-dark);
}
#go-to-client{
	color: var(--color-darkgrey);
	height: 30px;
	width: 100%;
	text-align: center;
	display: block;
}
#go-to-client:hover{
	color: var(--color-main-dark);
}
#go-to-client.hidden{
	dislay: none;
}
#bulk-textarea{
	height: var(--big-m);
}

.client-msgs{
	align-items: center;
}
.client-msgs #messages-messages{
	margin: 0 auto;
	padding: 0;
	border: none;
}

/* */
#client-register,
.client-register{
	display: none;
}
#client-register label,
.client-register label{
	position: relative;
	display: block;
}
.client-register{
	background: var(--gradient-light);
	margin-bottom: var(--size-l);
	box-shadow: none;
	padding: var(--size-l);
	max-width: var(--big-xxl);
	border-radius: var(--size-s);
	margin-left: var(--size-s);
}
.client-register label{
	display: inline-block;
	width: 100%;
	max-width: 200px;
	padding-right: var(--size-m);
	margin-bottom: var(--size-m);
}
.client-register label.fullwidth{
	max-width: 100%;
}
.client-register label.fullwidth textarea{
	max-width: calc(100% - 60px);
}
#client-register label span{
	font-weight: 400;
}

#client-h1{
	margin-top: 0;
}
#client-icons{
	position: absolute;
	top: var(--size-xxl);
	right: var(--size-xxl);
}

#client-measures{
	margin-bottom: var(--size-xs);
}
#client-measures span{
	margin-right: var(--size-l);
}

#client-note{
	position: absolute;
	top: calc(var(--big-m) + var(--size-xl));
	left: var(--size-xxl);
	background: var(--color-splash);
	padding: var(--size-m);
	max-width: var(--big-m);
}
#client-note-textarea{
	display: none;
}

#client-eat{
	margin-bottom: var(--size-xl);
}
#client-eat label{
	display: inline-block;
	max-width: var(--big-m);
}

#daily-kcal-input{
	border-radius: var(--size-xs) 0 0 var(--size-xs);	
}
#kcal-calculator{
	border-radius: 0 var(--size-xs) var(--size-xs) 0;
	padding: calc(var(--size-s) + 2px) var(--size-m) calc(var(--size-s) + 3px) var(--size-m);
	top: 4px;
	position: relative;
	display: inline-block;
	margin-right: var(--size-xs);
	margin-left: -5px;
}
#kcal-calculator-options{
	margin: var(--size-l) auto 0 auto;
	display: none;
	position: relative;	
	padding: var(--size-l);
	background: var(--color-main-light);
	border-radius: var(--size-xs);
	max-width: var(--big-xxl);
}
#kcal-calculator-options .btn.grey{
	background: #fff;
}

#daily-nutritients{
	margin-top: var(--size-l);
}

#client-meals{
	text-align: center;
}
#client-meals .column{
	width: var(--size-xxxl);
	display: inline-block;
	margin: 0 var(--size-xs);
}
#client-meals .column .meal-blocks > div{
	width: 100%;
	position: relative;
	display: block;
	padding: var(--size-l) 0;
	background: var(--color-go-light);
	border-bottom: 1px solid var(--color-light);
	cursor: pointer;
}
#client-meals .column .meal-blocks > div.active,
#client-meals .column .meal-blocks > div.active + div,
#client-meals .column .meal-blocks > div.active + div + div,
#client-meals .column .meal-blocks > div.active + div + div + div,
#client-meals .column .meal-blocks > div.active + div + div + div + div,
#client-meals .column .meal-blocks > div.active + div + div + div + div + div{
	background: var(--color-go);
}
#client-meals .column .meal-blocks:hover > div{
	background: var(--color-go-light) !important;
}
#client-meals .column .meal-blocks > div:hover,
#client-meals .column .meal-blocks > div:hover + div,
#client-meals .column .meal-blocks > div:hover + div + div,
#client-meals .column .meal-blocks > div:hover + div + div + div,
#client-meals .column .meal-blocks > div:hover + div + div + div + div,
#client-meals .column .meal-blocks > div:hover + div + div + div + div + div{
	background: var(--color-go) !important;
}
#client-meals .column-name{
	border: none;
	margin-bottom: var(--size-xs);
	padding: var(--size-xs);
	text-align: center;
	
	border: 1px solid var(--color-go);
	color: var(--color-go);
}
#client-meals .recipe-search{
	margin-top: var(--size-s);
	text-align: center;
}
#client-meals .column span{
	color: var(--color-darkgrey);	
	font-size: var(--size-smaller);
	padding-top: var(--size-s);
	display: block;
}
#search-recipes{
	display: flex;
	flex-direction: row;
}
#search-recipes h4{
	margin-top: 0;
}
#search-recipes > *{
	flex: 1;
	margin: 0 var(--size-m);
	padding: var(--size-m);
	background: var(--color-lightgrey);
	background: var(--gradient-light);
	border-radius: vaR(--size-xs);
}
#search-recipes .foods{
	margin-top: var(--size-m);
}
#search-recipes .foods a{
	color: var(--color-dark);
}
#search-recipes .foods > div{
	position: relative;
	padding: var(--size-xs) var(--size-l) var(--size-xs) var(--size-s);
	text-align: left;
	background: var(--color-light);
	border-radius: var(--size-xs);
	margin-bottom: var(--size-xs);
	font-weight: bold;
}
#search-recipes .foods > div i{
	color: var(--color-alert);
	font-weight: bold;
	padding: var(--size-xs);
	display: inline-block;
	border-radius: var(--size-xs);
	cursor: pointer;
	position: absolute;
	top: 0;
	right: 0;
}
#search-recipes .foods > div i:hover{
	background: var(--color-fade-dark);
}


#search-recipes .foods > div .nutrient-warning{
	position: absolute;
	top: 6px;
	left: -6px;
	color: transparent;
	font-weight: 900;
	cursor: pointer;
}
#search-recipes .foods > div .nutrient-warning.great{
	
}
#search-recipes .foods > div .nutrient-warning.careful{
	color: #ffA550;
}
#search-recipes .foods > div .nutrient-warning.avoid{
	color: var(--color-alert);
}


#search-recipes .foods > div .nutrient-warning::after{
	content: '';
	font-weight: normal;
	background: var(--color-main-dark);
	color: var(--color-light);
	padding: var(--size-xxs) var(--size-s);
	border-radius: var(--size-xs);
	display: none;
	z-index: 20;
	position: absolute;
	top: 0;
	left: 15px;
	min-width: calc(var(--big-m) + var(--size-l));
}
#search-recipes .foods > div .nutrient-warning:hover:after{
	display: block;
}
#search-recipes .foods > div .nutrient-warning.great::after{
	display: none !important;
}
#search-recipes .foods > div .nutrient-warning.careful::after{
	content: "Doesn't match this person's dietary needs.";
}
#search-recipes .foods > div .nutrient-warning.avoid::after{
	content: "Severely contradicts this person's dietary needs.";
}

.auto-suggest{
	margin-top: var(--size-m);
}
.auto-suggest + button,
.auto-suggest + button + button,
.auto-suggest + button + button + button{
	margin-top: var(--size-s);
}

#empty-workout{
	padding: var(--size-xs);
	border: none;
	background: transparent;
	cursor: pointer;
	text-decoration: underline;
	font-size: var(--size-m);
}

#client-wos{
	margin-top: var(--size-l);
}
#client-wos .workout-template{
	padding: var(--size-m) var(--size-m) var(--size-xl) var(--size-m);
	border-radius: var(--size-s);
	background: var(--gradient-light);
	background: var(--gradient-main-light);
	margin-bottom: var(--size-m);
	position: relative;
}
#client-wos .workout-name-input{
	font-size: var(--size-l);
	text-align: center;
	font-weight: bold;
	margin-bottom: var(--size-l);
	border: none;
	color: var(--color-dark);
}
#client-wos .workout-template label{
	max-width: var(--size-xxxl);
	text-align: left;
	display: inline-block;
	font-weight: normal;
	font-size: var(--size-smaller);
	text-transform: uppercase;
	letter-spacing: 1px;
	position: relative;
}
#client-wos .wos-exercises{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	width: 100%;
}
#client-wos .wos-exercise{
	flex: 1;
	min-width: calc(var(--big-m) + var(--size-xxl));
	text-align: left;
	display: inline-block;
	padding: var(--size-s);
	margin: var(--size-xs);
	border-radius: var(--size-xs);
	position: relative;
	background: var(--color-light);
	background: var(--color-main-light);
	border-top: 1px solid rgba(255,255,255,0.62);
	vertical-align: top;
}
#client-wos .wos-exercise h4{
	margin-top: 0;
	margin-bottom: var(--size-s);
}
#client-wos .wos-exercise input{
	border: none;
}
#client-wos .wos-exercise textarea{
	margin-top: var(--size-xs);
	max-height: var(--big-s);
	border: none;
}
#client-wos .wos-exercise .exercise-prev-next{
	text-align: center;
	padding: var(--size-xs) 0;
}
#client-wos .delete-exercise{
	color: var(--color-alert);
	font-weight: bold;
	padding: var(--size-xs);
	border-radius: var(--size-xs);
	position: absolute;
	top: 0;
	right: 0;
	cursor: pointer;
}
#client-wos .delete-exercise:hover{
	background: var(--color-main-light);
}
#client-wos .tox-tinymce{
	max-height: var(--big-m);
	border: 1px solid var(--color-main);
	border: none;
}

#client-wos h3{
	margin-top: 0px;
}

.wos-advanced-reps{
	position: absolute;
	top: 27px;
	right: var(--size-xxs);
	padding: var(--size-xxs);
}
#added-foods .wos-advanced-reps{
	display: none;
}
#added-foods .reps + .wos-advanced-reps{
	display: block;
	top: 18px;
}

#workout-search-results{
	margin: 0 auto;
	max-width: var(--big-m);
}
#workout-search-results .workout{
	padding: var(--size-s);
	background: var(--color-main-light);
	border-radius: var(--size-xs);
	display: block;
	margin: var(--size-s) 0 0 0;
	cursor: pointer;
}
#workout-search-results .workout:hover{
	background: var(--color-main);
}
#workout-search-results .workout i{
	float: left;
}
button[classtarget="wos-add-exercise"]{
	margin-top: var(--size-m);
	margin-bottom: var(--size-m);
}
.wos-add-exercise{
	max-width: var(--big-l);
	margin: var(--size-s) auto 0 auto;
}
.wos-add-exercise input{
	margin-bottom: var(--size-s);
}

#client-wos .delete-workout{
	color: var(--color-alert);
	font-weight: bold;
	padding: var(--size-xs);
	border-radius: var(--size-xs);
	position: absolute;
	top: 0;
	right: 0;
	cursor: pointer;
}
#client-wos .delete-workout:hover{
	background: var(--color-main-light);
}

.exercise{
	margin-bottom: var(--size-xs);
	margin-top: 0;
	padding: var(--size-s) var(--size-m);
	padding-left: 38px;
	background: var(--color-main-light);
	overflow: hidden;
	border-radius: var(--size-xs);
	cursor: pointer;
	position: relative;
}
.exercise:hover{
	background: var(--color-main);
}
.exercise i{
	position: absolute;
	top: 11px;
	top: calc(50% - 8px);
	left: var(--size-s);
}

/* */
#site-content input,
#site-customers input{
	clear: both;
	display: block;
	margin-bottom: var(--size-s);
}
#site-content input[type="submit"],
#site-customers input[type="submit"]{
	margin-top: var(--size-m);
}
#site-content label,
#site-customers label{
	max-width: calc(( var(--big-l) * 1.62 ));
	display: block;	
}
#site-content label + label,
#site-customers label + label{
	margin-top: var(--size-m);	
}
#change-slug-form{
	display: none;
	margin-top: var(--size-m);
}
#slugmessage{
	display: none;
	clear: both;
}
#slugmessage.error{
	display: inline-block;
}
.service-btn-form{
	display: inline;
}
#embedcode{
	width: 100%;
	max-width: calc(100% - var(--size-s) - var(--size-s));
	display: block;
}
#embed{
	display: none;
}
#create-service-form input,
#change-slug-form input{
	width: calc(100% - var(--big-m));
}
#create-service-form .response{
	padding: var(--size-xs);
}
#create-service-form + span{
	display: block;
	margin-bottom: var(--size-s);
}
.fileimg{
	width: 100%;
	max-width: 180px;
	height: auto;
	display: block;
	margin-bottom: var(--size-s);
}
#add-new-reference-form{
	display: none;
	padding: var(--size-l) 0;
}
.reference{
	display: flex;
	flex-direction: row;
	margin-top: var(--size-l);
}
.reference > *{
	margin-right: var(--size-m);
	font-weight: bold;
}
.reference > *:last-child{
	margin-left: auto;
}
.reference .after-pic,
.reference .before-pic{
	width: var(--size-xxl);
	height: var(--size-xxl);
	background: no-rpeat center center;
	background-size: cover;
}
.reference span.smaller{
	font-size: var(--size-smaller);
	text-transform: uppercase;
	font-weight: normal;
	letter-spacing: 2px;
	color: var(--color-darkgrey);
	padding-bottom: var(--size-s);
	position: relative;
	display: inline-block;
}

/* Lead */
.lead-container + .lead-container{
	border-top: 1px dashed var(--color-fade-dark);
	padding-top: var(--size-l);
}
.lead{
	padding: var(--size-l) var(--size-l);
	background: var(--color-light);
	border-top: 1px solid var(--color-border);
	margin-bottom: var(--size-s);
	display: flex;
	flex-direction: row;
}
.lead:nth-child(1){
	border-top: none;
	padding-top: 0;
}
.lead-contact{
	padding-right: var(--size-xl);
	line-height: 1.6;
	min-width: 160px;
}
.lead-contact strong{
	font-size: var(--size-l);
}
.lead-contact > *{
	width: 100%;
	display: block;
}
.lead-info > *{
	display: inline-block;
	padding: var(--size-s) var(--size-l) var(--size-s) var(--size-s);
	margin-bottom: var(--size-s);
	border-left: 1px solid var(--color-darkgrey);
	vertical-align: top;
	max-width: 100px;
	font-size: var(--size-smaller);
	text-transform: uppercase;
	font-weight: bold;
	letter-spacing: 2px;
}
.lead-info > * > *:nth-child(1){
	color: var(--color-darkgrey);	
}
.lead-info > * > *:nth-child(2){
	font-size: var(--size-m);
	text-transform: none;
	font-weight: normal;
	letter-spacing: normal;
	padding-top: var(--size-xs);
}
.lead-actions{
	width: 76%;
	display: flex;
	flex-direction: row;
	margin: 0 0 var(--size-l) 0;
}
.lead-actions > *{
	flex: 1;
	text-align: center;
	margin: 0 var(--size-s);
}
.lead-actions > * button{
	width: 100%;
}
#leads-emails-form{
	margin: 0 auto var(--size-l) auto;
	max-width: 420px;
	text-align: center;
}
#leads-emails-form label{
	font-weight: normal;
}
li.alert{
	animation: blink 2s linear infinite;
	background: var(--color-alert);
	border-radius: var(--size-xs);
	position: relative;
}
li.alert a{
	color: var(--color-light) !important;	
}
.header-breaker{
	font-size: var(--size-m);
	text-transform: uppercase;
	letter-spacing: 4px;
	color: var(--color-dark);
	margin-bottom: var(--size-s);
}
.leads.box + .header-breaker{
	margin-top: var(--size-xxl);
}
.lead-actions + .header-breaker{
	margin-top: var(--size-xxl);
}
.leads{
	max-width: none;
}

.lead-box.done{
	color: var(--color-darkgrey);
}
.lead-box.done .lead{
	margin-bottom: 0;
	padding-bottom: 0;
}
.lead-box.done .client-register{
	display: none !important;
}
.lead-box.done .lead-actions{
	display: none;
}
.lead-box.done:before{
	content: 'Lead added as client';
	text-align: center;
	width: 100%;
	color: var(--color-light);
	font-weight: bold;
	display: block;
	background: var(--color-dark);
	padding: var(--size-s);
	border-radius: var(--size-xs);
	margin-bottom: var(--size-m);
}
.lead-box.done.failed:before{
	content: 'Failed - clients email already exists';
	background: var(--color-alert);
}

/* */
#add-recipe{
	display: flex;
	flex-direction: row;
	margin-top: var(--size-l);
}
#add-recipe > *{
	width: auto;
	max-width: none;
	flex-grow: 1;
}
#add-recipe #searchfood{
	max-width: calc(var(--big-l) + var(--size-xxl));
	margin-left: var(--size-m);
}
#added-foods > div{
	position: relative;
	margin-bottom: var(--size-xs);
	padding: var(--size-m);
	background: var(--color-lightgrey);
	border-radius: var(--size-xs);
}
#added-foods > div:last-child{
	margin-bottom: var(--size-l);
}
#added-foods > div label{
	padding-top: var(--size-xs);
	display: block;
	font-weight: normal;
}
#added-foods > div label input{
	max-width: var(--size-xxxl);
}
#added-foods input[type="number"]{
	margin-right: var(--size-s);
}
#added-foods > div .delete{
	position: absolute;
	top: 4px;
	right: 4px;
	padding: var(--size-xs);
	color: var(--color-alert);
	scale: 1.5;
	cursor: pointer;
}
#added-foods > div h4{
	margin-top: 0;
	margin-bottom: var(--size-s);
}
#added-foods > div label{
	max-width: var(--big-s);
	display: inline-block;
	margin-right: var(--size-s);
	position: relative;
}
#added-foods > div label input[type="number"],
#added-foods > div label input[type="text"]{
	width: calc(100% - var(--size-s) - var(--size-s));
}
#added-foods > div textarea{
	height: var(--big-xs);
}
#added-foods div[data-type="gym"] input[name="distance[]"],
#added-foods div[data-type="gym"] input[name="time[]"],
#added-foods div[data-type="distance"] input[name="reps[]"],
#added-foods div[data-type="distance"] input[name="sets[]"],
#added-foods div[data-type="distance"] input[name="time[]"],
#added-foods div[data-type="time"] input[name="reps[]"],
#added-foods div[data-type="time"] input[name="sets[]"],
#added-foods div[data-type="time"] input[name="distance[]"]{
	display: none;
}
#gramspp{
	display: none;
}
.recipe{
	margin: 0 var(--size-s) var(--size-s) 0;
}
.recipe strong{
	color: var(--color-dark);
	margin-right: var(--size-m);
}
.recipe i{
	margin: 0px !important;
}
.nutrients{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	margin-top: var(--size-m);
	align-items: flex-end;
}
.nutrient{
	flex-basis: 20%;
	margin-bottom: var(--size-l);
	margin-right: var(--size-m);
}
.appbox .nutrient{
	flex-basis: calc((100% / 3) - 3%);
	margin: 0;
	padding-right: 3%;
	padding-bottom: var(--size-m);
}
#addrecipeform{
	
}
#morenutrients{
	display: none;
}
#food-nutrients-table{
	display: none;
	margin-top: var(--size-m);
}
#food-nutrients-table:before{
	content: 'per 100g';
	font-weight: bold;
}
#food-nutrients-table td{
	padding: var(--size-xs) var(--size-m);
}
#food-nutrients-table td:nth-child(1){
	min-width: var(--size-xl);
}
.food{
	margin-bottom: var(--size-xs);
	margin-top: 0;
	padding: var(--size-s) var(--size-m);
	padding-left: 38px;
	background: var(--color-main-light);
	overflow: hidden;
	border-radius: var(--size-xs);
	cursor: pointer;
	position: relative;
}
.food:hover{
	background: var(--color-main);
}
.food i{
	position: absolute;
	top: 11px;
	top: calc(50% - 8px);
	left: var(--size-s);
}
.food-name{
	width: 100%;
	display: inline-block;
	font-weight: bold;
}
.delete-food{
	display: inline-block;
	float: right;
	border-radius: 100px !important;
	width: var(--size-xl);
	height: var(--size-xl);
	position: relative;
	top: -6px;
	margin-left: var(--size-xxl);
}
.delete-food-form{
	text-align: center;
	background: #fff;
	padding: var(--size-l);
	max-width: var(--big-l);
	float: right;
	border-radius: var(--size-s);
	display: none;
}
.delete-food-form button{
	margin-top: var(--size-m);
}

.my-food{
	margin-bottom: var(--size-s);
	padding-bottom: var(--size-s);
	border-bottom: 1px solid var(--color-border);
	max-width: var(--big-xl);
	overflow: hidden;
}
.my-food button{
	margin-top: var(--size-m);
}
.my-food button i{
	margin-right: 0 !important;
	margin-left: -2.5px;
}

#searchfoodresults{
	margin-top: var(--size-m);
}

#add-recipe.appbox{
	flex-direction: column-reverse;
	margin-top: 0px;
	width: 100%;
	max-width: 100%;	
}
#add-recipe.appbox > *{
	width: 100%;
	max-width: calc(100% - var(--size-m) - var(--size-m)) !important;
	margin-left: var(--size-m);
	margin-right: var(--size-m);		
}
.appbox #searchexercise{
	width: 100%;
	margin: 0 0 var(--size-m) 0;
}
.appbox .tabs-content > *{
	margin: var(--size-l) 0 0 0;
	padding: 0;
	width: 100%;
}
#add-recipe.appbox form{
	background: var(--color-main-light);
	border-radius: var(--size-s);
	padding: 0 var(--size-m) var(--size-m) var(--size-m);
	margin-bottom: var(--size-m) !important;
	max-width: calc(100% - var(--size-m) - var(--size-m) - var(--size-m) - var(--size-m)) !important;
}
#add-recipe.appbox form .food{
	background: var(--color-light);
}
.appbox #added-foods > div{
	background: var(--color-light);	
}

#app-create-food-foods{
	background: var(--gradient-light);
	border-radius: var(--size-s);
	padding: var(--size-s) var(--size-l);
}

/* */
#searchexercise{
	width: var(--big-l);
	max-width: var(--big-l);
	min-width: var(--big-l);
	margin-left: var(--size-l);
}
#searchexerciseresults{
	margin-top: var(--size-m);
}
#exercisetype{
	margin-top: var(--size-m);
	margin-bottom: var(--size-m);
}
#muscle-table td,
#muscle-table th{
	padding: var(--size-xs);
}
#muscle-table tr:nth-child(2n+2) td{
}
#muscle-box{
	display: flex;
	flex-direction: row;
	margin: var(--size-l) 0;
}
#muscle-table{
	margin-right: var(--size-l);
}
.exercise-desc textarea{
	max-width: 511px;
}
#muscle-box .musclemap{	
	width: calc(var(--big-xl) - var(--big-s));
	max-width: calc(var(--big-xl) - var(--big-s));
	min-width: calc(var(--big-xl) - var(--big-s));
	margin-left: var(--size-xl);
}
.musclemap{
	background: url('../img/muscles/musclemap4.png') no-repeat top center;
	background-size: contain;
	flex: 1;
	position: relative;
}
.musclemap > *{
	background: url() no-repeat top center;
	background-size: contain;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	position: absolute;	
	opacity: 0;
}
.musclemap > *[data-level="0"]{
	opacity: 0;
}
.musclemap > *[data-level="1"]{
	opacity: 0.33;
}
.musclemap > *[data-level="2"]{
	opacity: 0.66;
}
.musclemap > *[data-level="3"]{
	opacity: 1;
}
.musclemap .Chest{
	background-image: url('../img/muscles/Chest.png');
}
.musclemap .Back{
	background-image: url('../img/muscles/Back.png');
}
.musclemap .Shoulders{
	background-image: url('../img/muscles/Shoulders.png');
}
.musclemap .RearShoulders{
	background-image: url('../img/muscles/RearShoulders.png');
}
.musclemap .Back{
	background-image: url('../img/muscles/Back.png');
}
.musclemap .Abs{
	background-image: url('../img/muscles/Abs.png');
}
.musclemap .Calves{
	background-image: url('../img/muscles/Calves.png');
}
.musclemap .Forearms{
	background-image: url('../img/muscles/Forearms.png');
}
.musclemap .Glutes{
	background-image: url('../img/muscles/Glutes.png');
}
.musclemap .Hamstrings{
	background-image: url('../img/muscles/Hamstrings.png');
}
.musclemap .Adductors{
	background-image: url('../img/muscles/Adductors.png');
}
.musclemap .Abductors{
	background-image: url('../img/muscles/Abductors.png');
}
.musclemap .Quads{
	background-image: url('../img/muscles/Quads.png');
}
.musclemap .Traps{
	background-image: url('../img/muscles/Traps.png');
}
.musclemap .Triceps{
	background-image: url('../img/muscles/Triceps.png');
}
.musclemap .Biceps{
	background-image: url('../img/muscles/Biceps.png');
}
.musclemap .Obliques{
	background-image: url('../img/muscles/Obliques.png');
}
.musclemap .LowerBack{
	background-image: url('../img/muscles/LowerBack.png');
}
.musclemap .Cardio{
	background-image: url('../img/muscles/Cardio.png');
}

#weight_per_side{
	margin-bottom: var(--size-l);
}
#weight_per_side label{
	font-weight: normal;
	margin-right: var(--size-l);
	
}
#weight_per_side strong{
	display: block;
}

.exercise-data{
	display: none;
}
.exercise-data.visible{
	display: block;
}
.exercise-data .musclemap{
	width: var(--big-l);
	height: var(--big-l);
}

.delete-exercise-form{
	text-align: center;
	background: #fff;
	padding: var(--size-l);
	max-width: var(--big-l);
	float: left;
	border-radius: var(--size-s);
	display: none;
}
.delete-exercise-form button{
	margin-top: var(--size-m);
}

.my-exercise{
	margin-bottom: var(--size-s);
	padding: var(--size-xs);
	border-bottom: 1px solid var(--color-border);
	max-width: var(--big-xl);
	overflow: hidden;
}
.my-exercise button{
	margin-top: var(--size-m);
}
.my-exercise button i{
	margin-right: 0 !important;
	margin-left: -2.5px;
}
.see-exercise{
	float: right;
}

.mini-table{
	max-width: var(--big-m);
	float: left;
	margin-right: var(--size-l);
}
.mini-table tr td{
	background: transparent !important;
}
.mini-table tr:nth-child(2n+1) td {
	background: #f9f8f8 !important;
}
.exercise-inst{
	color: var(--color-darkgrey);
}
.mm-medium{
	width: var(--big-xl);
	height: var(--big-xl);
	max-width: 100%;
}

/* Economy */
#change-price label{
	font-weight: normal;
	display: block;
}
form.delete-sub{
	padding: var(--size-s);
	display: none;
}
form.delete-sub button{
	margin-top: var(--size-s);
}

/* */
@keyframes blink{
	0%{top: 2px;}
	5%{top: 7px;}
	10%{top: 2px;}
	15%{top: 7px;}
	20%{top: 2px;}
	100%{top: 2px;}
}
@keyframes hintblink{
	0%{opacity: 1;}
	33%{opacity: 0.5;}
	66%{opacity: 0.5;}
	100%{opacity: 1;}
}

/* CLIENT SITE */
#client-container{
	padding-top: var(--size-xl);
	padding-bottom: var(--big-s);
}
#client-container:before{
	content: '';
	position: absolute;
	top: var(--size-s);
	left: var(--size-s);
	height: var(--size-xl);
	width: var(--size-xxl);
	background: url('../img/ptdark.png') no-repeat top left;
	background-size: contain;
}
.appbox{
	width: calc(100% - var(--size-s) - var(--size-s));
	margin: 0 auto;
	position: relative;
}
.appbox.morepad{
	width: calc(100% - var(--size-l) - var(--size-l));	
}
#client-menu{
	display: flex;
	flex-direction: row;
	position: fixed;
	width: 100%;
	bottom: 0;
	left: 0;
	right: 0;
	border-top: 1px solid var(--color-light);
	background: var(--gradient-main-light);
	z-index: 1000;
}
#client-menu > a{
	flex: 1;
	border-left: 1px solid var(--color-light);
	padding: var(--size-m) var(--size-s);
	text-align: center;
	font-size: var(--size-smaller);
	text-transform: uppercase;
	color: var(--color-main-dark);
	position: relative;
}
#client-menu > a:nth-child(1){
	border-left: 0;
}
#client-menu > a i{
	font-size: calc(var(--size-m) + var(--size-xs));
	margin-bottom: var(--size-s);
	display: inline-block;
	line-height: 0.8;
}
#client-menu > a:hover{
	background: var(--color-light);
}

#client-data{
	background: var(--color-main-light);
	padding: var(--size-l) var(--size-l);
	border-bottom: 1px dashed var(--color-fade-dark);
	position: relative;
	z-index: 3;
	margin-bottom: var(--size-l);
}
#client-data h3{
	font-weight: 400;
	margin-top: 0;
	margin-bottom: var(--size-l);
	text-align: center;
	padding: 0 var(--size-xl);
}
#client-data > div{
	margin-bottom: var(--size-l);
}
#client-data > div label{
	font-weight: normal;
}
#client-data label{
	margin-bottom: var(--size-m);
	display: block;	
}

/* food */
#food-fold{
	width: 100%;
	/* min-height: calc(438px - var(--size-xl) - var(--size-l)); */
	background: var(--color-main-light);
	padding: var(--size-xl) 0 var(--size-l) 0;
	margin-top: calc(0px - var(--size-xl));
}
#food-fold .donut{
	height: 300px;
	width: 300px;
}
#kcal-data{
	margin: 0 auto;
	width: calc(100vw - 120px);
	height: calc(100vw - 120px);
	margin-top: calc(0px - (100vw - 120px));
	text-align: center;
	
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
#kcal-data > div{
	margin-bottom: var(--size-m);
	color: var(--color-main-dark);
}
#kcal-eaten{
	font-size: var(--size-m);
	text-transform: uppercase;
	width: 100%;
}
#kcal-eaten span{
	font-size: var(--size-l);
	font-weight: bold;
	display: block;
}
#kcal-left{
	font-size: var(--size-m);
	text-transform: uppercase;
	width: 100%;
}
#kcal-left span{
	font-size: var(--size-xl);
	font-weight: bold;
	display: block;
}

#client-daily-nut{
	width: calc(100% - var(--size-xl) - var(--size-xl));
	display: flex;
	flex-direction: row;
	padding: 0 var(--size-xl);
	margin-top: var(--size-m);
}
#client-daily-nut > div{
	text-align: center;
	flex: 1;
	color: var(--color-dark);
	font-size: var(--size-smaller);
	background: var(--color-light);
	margin: 0 var(--size-xxs);
	border-radius: var(--size-xs);
	padding: var(--size-m) var(--size-xs) var(--size-s) var(--size-xs);
}

#day-bar{
	background: var(--color-main-light);
	height: var(--size-xxl);
	display: flex;
	align-items: center;
	color: var(--color-dark);
	border-top: 1px dashed var(--color-fade-dark);
}
#day-prev,
#day-next{
	width: var(--big-xs);
	text-align: center;
	font-size: var(--size-l);
	cursor: pointer;
	color: var(--color-dark);
}
#day-now{
	flex: 1;
	text-align: center;
}
#day-now span{
	font-weight: bold;
	display: block;
}
#day-bar i{
	position: relative;
	top: 5px;
}

#client-food-actions{
	text-align: center;
	margin-top: var(--size-l);
}
#client-food-actions button{
	display: block;
	margin: var(--size-s) auto;
}

#food-log{
	width: calc(100% - var(--size-l) - var(--size-l));
	margin: 0 auto;
}
.flog{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	padding: var(--size-m) var(--size-m);
	background: var(--color-main-light);
	border-radius: var(--size-xs);
	cursor: pointer;
}
.flog:hover{
	outline: 1px solid var(--color-main-dark);
}
.flog + .flog{
	margin-top: var(--size-xs);
}
.flog > *{
	flex: 1;
	padding-left: var(--size-s);
}
.flog > *:first-child{
	font-weight: bold;
	padding-left: 0;
}
.flog > .flog-kcal{
	max-width: 80px;
	text-align: right;
}
.flog > .flog-grams{
	max-width: 80px;
	text-align: right;
}
.flog .logfoodform{
	flex-basis: 100%;
	padding: 0 0 0 0;
	display: none;
}
.flog .logfoodform input{
	width: calc(100% - var(--size-s) - var(--size-s) - 94px)
}
.flog hr{
	border-color: var(--color-fade-dark);
	margin: var(--size-m) 0;
}

#logfoodform{
	display: none;
}

#select-meal button{
	margin-bottom: var(--size-m);
}
#select-other-meal{
	display: block;
	padding: var(--size-l) var(--size-l);
}
#select-other-meal .client-recipe{
	text-align: left;
}
.recipes-all{
	display: none;
	padding: var(--size-l) var(--size-l);
}
.client-recipes{
	margin: var(--size-l) auto 0 auto;
}
.client-recipes > p{
	margin-bottom: var(--size-xs);
}
.client-recipes-date{
	margin: 0 auto 0 auto;
}
.client-recipes-date + *{
	margin-top: var(--size-xs);
}
.client-recipe{
	background: var(--color-lightgrey);
	padding: var(--size-s) var(--size-m);
	width: calc(100% - var(--size-m) - var(--size-m));
	border-radius: var(--size-xs);
	display: block;
	color: var(--color-dark);
	font-weight: bold;
	border: 1px solid var(--color-border);
	overflow: hidden;
	margin-bottom: var(--size-xs);
}
.client-recipe span{
	float: right;
	margin: 0 !important;
	font-weight: normal;
	display: block;
}
#add-recipe-to-log{
	background: var(--gradient-main-light);
	color: var(--color-main-dark);
}
#add-recipe-to-log label{
	color: var(--color-main-dark);
	font-weight: 400;
}
#add-recipe-to-log input[type="number"]{
	width: calc(100% - var(--size-s) - var(--size-s) - 90px);
	font-weight: 900;
}
.logrecipe{
	margin-top: 0;
	padding-bottom: var(--size-m);
	font-size: var(--size-l);
	border-bottom: 1px dashed var(--color-fade-dark);
}
.logrecipe b,
.logrecipe strong{
	font-weight: 900;
}
#recipe-multipliers{
	margin-top: var(--size-m);
}
#recipe-multipliers button.active{
	background: var(--color-main);
	color: var(--color-light);
}
.log-element{
	background: var(--color-main-light);
	padding: var(--size-m);
	border-radius: var(--size-s);
	color: var(--color-light);
	margin-bottom: var(--size-xs);
}
.log-element hr{
	display: none;
}
.log-element .food-measurement{
	color: var(--color-dark);
	padding-top: var(--size-xs);
	padding-left: var(--size-s);
	display: block;
}

.td-grams span{
	white-space: nowrap;
}


/* CLIENT WORKOUTS */
#workouts-fold{
	background: var(--color-main-light);	
	padding-top: var(--size-xl);
	margin-top: calc(0px - var(--size-xl));
}
#workouts-fold hr{
	margin-top: 0;
	margin-bottom: var(--size-m);
}
#time-btns{
	margin-top: var(--size-m);
	margin-bottom: var(--size-xs);
	border-bottom: 1px dashed var(--color-fade-dark);
}
#time-btns .grey,
#data-btns .grey{
	background: var(--color-light);
	color: var(--color-dark);
	border: 1px solid var(--color-fade-dark);
}
#time-btns .grey.active,
#data-btns .grey.active{
	background: var(--color-go);
	color: var(--color-light);
}
#client-workouts{
	background: var(--color-light);
	padding: var(--size-l) 0 var(--size-l) 0;
}
#client-workouts hr{
	border-color: var(--color-fade-dark);
}
.workout-log{
	background: var(--color-main-light);
	padding: var(--size-xs) var(--size-xs) var(--size-xs) var(--size-s);
	border-radius: var(--size-xs);
	margin-bottom: var(--size-s);
	display: flex;
	flex-direction: row;
	align-items: center;
}
.workout-log > *:first-child{
	flex: 1;
	text-align: left;
	margin-right: var(--size-s);
}
.workout-log > *:last-child{
	margin-left: var(--size-m);
}
.client-exercise{
	background: var(--color-main-light);
	padding: var(--size-m);
	margin-bottom: var(--size-m);
	border-radius: var(--size-xs);
}
.client-exercise h3{
	margin: 0;
}
.client-exercise.grouped{
	padding-top: 0;
	margin-top: calc(0pc - var(--size-m));
}
.client-exercise.grouped h3{
	display: none;
}
.client-workout-desc{
	text-align: left;
	padding: 0 var(--size-m);
}
.ex-ins{
	margin-top: var(--size-s);
}
.set{
	display: flex;
	flex-direction: row;
	margin-top: var(--size-s);
	padding-top: var(--size-s);
	border-top: 1px dashed var(--color-fade-dark);
}
.set label{
	font-weight: bold;
	font-size: var(--size-smaller);
}
.set > *{
	margin-right: var(--size-s);
}
.set > button{
	margin-right: 0;
	border-radius: var(--size-xs) !important;
	height: 37px;
	position: relative;
	top: 19px;
}
.set.setdone{
	opacity: 0.5;
}
.set.setdone button{
	background: var(--color-darkgrey);
}
.last-time{
	font-weight: normal;
	font-style: italic;
	padding-left: var(--size-xxs);
	display: none;
}
.set input:focus + .last-time{
	display: block;
}

.appbox button.alert{
	display: block;
	text-decoration: underline;
	text-align: center;
	padding: 0;
	font-size: var(--size-m);
	outline: none;
	border: none;
	background: transparent;
	margin: 0 auto;
	cursor: pointer;
}
#cancel-app-workout-link{
	display: block;
	text-decoration: underline;
	text-align: center;
	padding: 0;
	font-size: var(--size-m);
	outline: none;
	border: none;
	background: transparent;
	margin: 0 auto;
	cursor: pointer;
	color: var(--color-alert);
}
#cancelworkout{
	display: none;
}

.media-btn{
	float: right;
	font-weight: 400 !important;
}
.exercise-media{
	width: 100%;
	height: auto;
	margin-top: var(--size-s);
	display: none;
}
.exercise-media img,
.exercise-media video{
	width: 100%;
	height: auto;	
}

#workout-timer{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	text-align: center;
	padding: var(--size-s) var(--size-m);
	background: var(--color-main-light);
	color: var(--color-dark);
	border-bottom: 1px solid var(--color-light);
	z-index: 50;
}
#workout-timer input{
	width: var(--size-xxxl);
}
#workout-timer button{
	margin-left: var(--size-m);
}
#workout-timer + form{
	margin-top: var(--size-xl);
}
#workout-timer-clock{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	text-align: center;
	padding: var(--size-s) var(--size-m);
	background: var(--color-main-light);
	color: var(--color-dark);
	border-bottom: 1px solid var(--color-light);
	z-index: 51;
	font-weight: bold;
	font-size: var(--size-l);
	display: none;
}
#workout-timer-clock span{
	position: relative;
	display: inline-block;
	top: 4px;
	margin-right: var(--size-m);
}

#update-weight-form{
	width: calc( 100% - var(--size-l) - var(--size-l) );
	padding: var(--size-l);
	display: none;
}

#myTimeChart-title{
	margin-top: 0px;
	margin-bottom: var(--size-s);
}
#myTimeChart-title button{
	float: right;
}
#myTimeChart{
	padding-bottom: var(--size-m);
}
#myTimeChart .chartjs-size-monitor, #myTimeChart .chartjs-render-monitor {
  display: none;
}

/* CLIENT MESSAGES */
#messages.clientapp-msgs{
	width: calc(100% - var(--size-m) - var(--size-m));
	height: calc(100vh - 180px);
	margin: 0 auto;
}

/* CLIENT SETTINGS */
#client-payments{
	background: var(--color-main-light);
	padding: var(--size-l) 0;
	margin: var(--size-m) 0;
}
#client-payments h3{
	margin-top: 0;
}
#stripe-invoices{
	margin-bottom: var(--size-l);
}
.stripe-invoice{
	display: flex;
	flex-direction: row;
	padding: var(--size-s) 0;
	border-bottom: 1px dashed var(--color-fade-dark);
}
.stripe-invoice > *{
	flex: 1;
	text-align: left;
}
.stripe-invoice > *:first-child{
	min-width: var(--size-xxxl);
}
.stripe-invoice > *:last-child{
	text-align: right;
}
.cancelsubform{
	display: none;
}

/* SUPER */
.super #muscle-table td, #muscle-table th {
	padding: 0px var(--size-xs);
}

/* */
.peity{
	margin: 0 auto 0 auto;
	position: relative;
	display: block;
}

/* */
#no-active-stripe{
	padding: 0 var(--size-xl) var(--size-xl) var(--size-xl);
	width: calc(100% - var(--size-xl) - var(--size-xl));
	
}
#no-active-stripe .grey{
	font-size: var(--size-smaller);
	margin-top: var(--size-l);
}

/* */
#menu-btn{
	display: none;
	font-size: var(--size-l);
	padding: var(--size-s) var(--size-m);
	cursor: pointer;
	top: 0;
	right: 0;
	position: absolute;
}
#menu-btn.light{
	color: var(--color-light);
}

/* Public Web Site */
#header{
	background: var(--color-light);
	background: transparent;
	background: linear-gradient(to bottom, rgba(0,0,0,0.38), transparent 80%, transparent);
	height: var(--size-xxl);
	width: 100%;
	display: block;
	position: relative;
	margin-bottom: calc(0px - var(--size-xxl));
	z-index: 500;
	text-align: center;
	overflow: hidden;
}
#header #logo{
	height: var(--size-l);
	margin: var(--size-m);
	float: left;
}
#header #menu{
	display: inline-block;
}
#header #right-menu{
	float: right;
}
#header .top-menu{
	display: block;
	align-items: center;
	margin-top: var(--size-l);
	margin-right: var(--size-xl);
	list-style: none;
}
#header .top-menu li{
	display: inline-block;
}
#header .top-menu a{
	height: var(--size-l);
	text-align: center;
	color: var(--color-light);
	padding: var(--size-s) var(--size-m);
}
#header .top-menu a.cta-toned{
	background: var(--color-fade-dark);
	color: var(--color-light);
	padding: var(--size-s) var(--size-l);
	border-radius: 100px;
	margin-left: var(--size-l);
	font-weight: bold;
	font-weight: normal;
}
#header .top-menu a.cta{
	background: var(--color-go);
	color: var(--color-light);
	padding: var(--size-s) var(--size-l);
	border-radius: 100px;
	margin-left: var(--size-xs);
	font-weight: 300;
	letter-spacing: 1.5px;
}

.flexbox{
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	position: relative;
}
.flexbox > *{
	flex: 1;
}
.flexbox .flex-content{
	padding: var(--size-xxl) var(--size-xl);
	text-align: left;
}
.flexbox .flex-content.center{
	text-align: center;
}
.flexbox .flex-content > *:first-child{
	margin-top: 0px;
}
.flexbox .flex-img{
	background: no-repeat center center;
	background-size: cover;
	height: 100%;
	min-height: 62vh;
	min-width: 58vw;
}
.flexbox .btn.green{
	font-weight: 300;
	letter-spacing: 1.5px;
}

#web-fold{
	position: relative;
	width: 100%;
	height: auto;
	display: block;
	background: var(--color-main);
}
#web-fold video {
	  width: 100%;
	  height: 100%;
	  position: absolute;
	  object-fit: cover;
	  z-index: 0;
}
#web-fold-content{
	position: relative;
	z-index: 1;
	text-align: center;
	color: var(--color-light);
	padding: var(--big-l) var(--size-l);
}
#web-fold h1{
	margin-top: 0;
	margin-bottom: var(--size-m);
	font-weight: normal;
	font-size: var(--size-xxl);
}
#web-fold p{
	margin-bottom: var(--size-xl);
	text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.15);
	font-size: var(--size-l);
}
#web-fold .btn{
	font-weight: 300;
	letter-spacing: 1.5px;
}

#platform{
	text-align: center;
}
#platform .flexbox{
	background: var(--gradient-main-light);
}
#platform > *:first-child{
	margin-top: 0;
}
#platform h1,
#platform h2{
	font-weight: 900;
	font-size: var(--size-xl);
	margin-bottom: var(--size-m);
}
#platform .btn{
	margin-top: var(--size-l);
}
#platform-img{
	background-image: url('/img/platform.webp');
	background-size: contain;
}
#app-img{
	background-image: url('/img/phone-app3.webp');
	background-size: cover;
	background-position: bottom left;
}
#pf-clients p{
	font-weight: 300;
	line-height: 1.4;
}
#pf-payments{
	padding: var(--size-xxl) 0;
}
#pf-payments img{
	width: 62%;
	max-width: var(--big-s);
	height: auto;
}
#pf-payments img + br + img{
	max-width: var(--big-l);	
}
#contact{
	background: var(--color-main-dark);
	color: var(--color-light);
	padding: var(--size-xxl);
}
#contact h2,
#pf-payments h2,
#pf-clients h2{
	font-weight: 400;
	font-size: var(--size-xl);
}
#contact > *:first-child{
	margin-top: 0;
}
#contact form{
	max-width: var(--big-xl);
	margin: 0 auto;
	position: relative;
}
#contact form input,
#contact form textarea{
	margin-bottom: var(--size-s);
}

#platform #pf-platform{
	align-items: flex-start;
	padding: var(--size-xl) 0 0 0;
	background: var(--gradient-main-light);
	padding-bottom: var(--size-xxxl);
}
#platform #pf-platform .flex-content{
	padding-bottom: var(--size-m);
}
#platform #pf-platform h2{
	font-size: var(--size-xxl);
	font-weight: normal;
	text-align: center;
	margin-bottom: var(--size-l);
}
#platform #pf-platform p{
	max-width: calc(var(--big-xxl) - var(--size-xxxl));
	margin-left: auto;
	margin-right: auto;
	font-size: var(--size-l);
	font-weight: 300;
}
#platform .btn{
	margin-top: var(--size-m);
}
#platform-img{
	background-image: url('/img/platform.webp');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
	width: 100%;
	height: var(--big-xxl);
	margin-bottom: var(--size-l);
}
#platform-pros{
	overflow: hidden;
	width: 100%;
	background: var(--color-lightgrey);
}
#platform-pros p{
	white-space: nowrap;
	position: relative;
	animation: moveLeftAnimation 500s forwards;
	font-weight: bold;
	margin: var(--size-l) 0;
}
#platform-pros p i{
	font-weight: 300;
	margin-right: var(--size-m);
	margin-left: var(--size-m);
}
@keyframes moveLeftAnimation {
  from {
	left: 0;
  }
  to {
	left: -20000px;
  }
}
#pf-clients .flex-content{
	padding-left: var(--size-xxxl);
	padding-right: var(--size-xxxl);
}

#web-fold.apply{
	min-height: 100vh;
	display: flex;
	background: var(--gradient-main);
}
.apply .response{
	font-size: var(--size-l);
	font-weight: bold;
	color: var(--color-light);
	background: var(--color-go);
	border-radius: var(--size-s);
	text-align: center;
}
form#web-fold-content{
	text-align: left;
	padding-top: var(--size-xxxl);
	padding-bottom: var(--size-xxxl);
	width: 100%;
	max-width: var(--big-l);
	margin-left: auto;
	margin-right: auto;
}
form#web-fold-content p{
	font-size: var(--size-m);
}
form#web-fold-content label{
	margin-bottom: var(--size-s);
	display: block;
	color: var(--color-light);
	font-weight: 300;
}
.numclients{
	padding: var(--size-l) var(--size-l);
	background: var(--color-fade-dark);
	border-radius: var(--size-xs);
	margin-bottom: var(--size-s);
	display: none;
}
.numclients p{
	margin-top: 0px !important;
	margin-bottom: var(--size-s) !important;
	margin-left: 0px !important;
	margin-right: 0px !important;
	font-weight: 300;
}

#careers{
	background: var(--gradient-main);
	color: var(--color-light);
	min-height: calc(100vh - var(--size-xxxl));
	margin-top: calc(0pc - var(--size-s));
	padding-top: var(--size-xxxl);
}

/* */
@keyframes blinky {
	0% {
		background: var(--color-main-light);
	}
	50% {
		background: var(--color-main);
	}
	100% {
		background: var(--color-main-light);
	}
}
.blinky {
	animation: blinky 0.4s infinite;
}

@media only screen and (max-width: 1080px) {
	#container{
		flex-direction: column;
	}
	#content{
		padding: var(--size-xs) var(--size-m) var(--size-m) var(--size-m);
	}
	.mob-center{
		text-align: center;
	}
	#sidebar{
		width: 100%;
		min-width: 100%;
		border: none;
		height: auto;
		min-height: auto;
	}
	#menu-btn{
		display: block;
	}
	#sidebar #logo{
		width: 20vw;
		height: auto;
		margin: var(--size-m) var(--size-m) 0 var(--size-m);
		padding: 0;
		display: inline-block;
	}
	#sidebar > div{
		padding-bottom: 0;
	}
	#sidebar > div > ul{
		display: none;
	}
	
	/* commons */
	.form{
		max-width: calc(100% - var(--size-l) - var(--size-l));
		width: 100%;
	}
	table {
	  display: flex;
	  flex-direction: column;
	}
	table tr {
	  display: flex;
		flex-direction: column;
	  width: 100%;
	  justify-content: space-between;
	}
	table td {
	  flex: 1;
	  text-align: center !important;
	  padding: var(--size-xs);
	}
	table td:first-child{
		padding-top: var(--size-m);
	}
	table th{
		display: none;
	}
	
	/* messages */
	#messages{
		padding-top: 0px;
		margin-top: var(--size-l);
		height: calc(100vh - (var(--size-xl) * 4) - var(--size-l));
	}
	#messages-peoples{
		width: var(--big-s);
		min-width: var(--big-s);
	}
	.people.active {
		padding-left: var(--size-m);
	}
	
	/* client */
	#client-icons {
		position: relative;
		display: block;
		top: auto;
		right: auto;
		text-align: center;
		margin: var(--size-l) 0;
	}
	#client-meals .column span{
		margin-bottom: var(--size-l);
	}
	#search-recipes{
		flex-direction: column;
	}
	#search-recipes > *{
		background: var(--color-main-light);
		margin-bottom: var(--size-m);
	}
	#client-wos .workout-template{
		background: var(--color-main);
	}
	#client-wos .delete-exercise{
		padding: var(--size-s);
		top: -4px;
		right: -4px;
		background: var(--color-alert);
		color: var(--color-light);
	}
	#client-wos .delete-workout{
		padding: var(--size-s);
		top: -4px;
		right: -4px;
		background: var(--color-alert);
		color: var(--color-light);
	}
	.exercise:hover{
		background-color: var(--color-fade-dark);
	}
	
	/* Workouts */
	#add-recipe{
		flex-direction: column-reverse;
		margin-top: 0px;
		width: 100%;
		max-width: 100%;	
	}
	#add-recipe > *{
		width: 100%;
		max-width: 100%;		
	}
	#searchexercise{
		width: 100%;
		margin: 0 0 var(--size-m) 0;
	}
	.tabs-content > *{
		margin: var(--size-l) 0 0 0;
		padding: 0;
		width: 100%;
	}
	#muscle-box{
		flex-direction: column-reverse;
	}
	#muscle-box .musclemap{
		flex: none;
		width: 100%;
		aspect-ratio: 1 / 1;
		margin: 0 0 var(--size-m) 0;
		padding: 0;
	}
	#muscle-table{
		margin: 0;
	}
	#muscle-table td{
		text-align: left !important;
		padding: var(--size-xs) var(--size-s);
	}
	#muscle-table td:nth-child(1){
		color: var(--color-dark);
		font-weight: bold;
		padding: var(--size-s) var(--size-s) 0 var(--size-s);
	}
	#muscle-table td:nth-child(2)::after{
		content: 'Primary';
	}
	#muscle-table td:nth-child(3)::after{
		content: 'Secondary';
	}
	
	/* Recipes */
	#add-recipe #searchfood{
		margin: 0;
	}
	#add-recipe.appbox #searchfood{
		margin: 0 var(--size-m);
	}
	
	#clientapp-recipe-table tr{
		flex-direction: column-reverse;
	}
	#clientapp-recipe-table tr td:last-child{
		font-weight: bold;
		color: var(--color-dark);
		padding-top: var(--size-m);
		padding-bottom: 0;
		margin-bottom: 0;
	}
	#clientapp-recipe-table tr td:first-child{
		padding-top: 0;
		padding-bottom: var(--size-m);
	}
	
	/* Main Website */
	.flexbox{
		flex-direction: column;
	}
	.flexbox .flex-img{
		width: 100% !important;
		height: 62vw !important;
		max-width: none !important;
		min-height: 62vw !important;
	}
	#pf-clients{
		flex-direction: column-reverse;
	}
	#web-fold-content {
		padding: calc( 50vh - 140px ) var(--size-l);
	}
	#web-fold h1,
	h2{
		font-size: var(--size-xl) !important;
	}
	#web-fold p {
		max-width: 62vw;
		margin-left: auto;
		margin-right: auto;
	}
	#platform #pf-platform{
		padding-left: var(--size-l);
		padding-right: var(--size-l);
	}
	#pf-platform .flex-content{
		padding-bottom: var(--size-l);
	}
	#pf-platform .flex-img{
		margin-bottom: var(--size-l);
	}
	#pf-clients .flex-content {
		text-align: center;
		padding-left: var(--size-xl);
		padding-right: var(--size-xl);
	}
	#platform-img{
		height: 38vh;
	}
	
	#header{
		overflow: visible;
		text-align: left;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		background: transparent;
	}
	#header #logo{
		float: none;
	}
	#header .top-menu{
		display: block;
		margin: 0 auto;
		padding: 0;
		float: none !important;
		width: calc(100% - var(--size-m) - var(--size-m));
		text-align: center;
		background: rgba(0,0,0,0.82);
		padding: var(--size-m) 0;
	}
	#header .top-menu li{
		width: 100%;
		display: block;
	}
	#header .top-menu li a{
		display: block;
		padding: var(--size-xs) var(--size-m);
	}
	#header #menu{
		margin-top: calc(0px - var(--size-s));
		display: none;
		border-radius: var(--size-s);
	}
	#header #right-menu{
		margin-top: var(--size-xs);
		display: none;
		padding: var(--size-l) 0 var(--size-xl) 0;
		border-radius: var(--size-s);
	}
	#header #right-menu li{
		width: auto;
		display: block;
		margin: var(--size-xl) 0 0 0;
	}
	#header #right-menu li:first-child{
		margin-top: 0px;
	}
	#header #right-menu li a{
		width: auto;
		display: inline;
		margin: 0;
	}
	#header .top-menu a.cta-toned{
		background: transparent;
	}
	
	form#web-fold-content{
		padding-top: var(--size-xxl);
	}
}
@media only screen and (max-width: 1280px) {	
	#client-note{
		position: relative;
		top: auto;
		left: auto;
		background: var(--color-splash);
		padding: var(--size-m);
		max-width: none;
	}
}

@media only screen and (min-width: 1081px) {
	#wrapper{
		position: relative;
	}
	#client-container{
		max-width: var(--big-xl);
		margin: var(--size-m) auto var(--big-m) auto;
		border-radius: var(--size-m);
		border: var(--size-xs) solid var(--color-main-light);
		position: relative;
	}
	#client-menu{
		max-width: calc(var(--big-l) + var(--size-xxl));
		margin-left: auto;
		margin-right: auto;		
		border-radius: var(--size-m) var(--size-m) 0 0;
		border: 2px solid var(--color-main-light);
		border-bottom: none;
	}
	#client-menu a{
		
	}
	#kcal-data{
		width: 300px;
		height: 300px;
		margin-top: -300px;
	}
	#client-daily-nut{
		max-width: var(--big-xl);
		margin-left: auto;
		margin-right: auto;
	}
	
	#food-fold{
		min-height: auto;
	}
	#food-fold .donut{
		height: calc( (100vw - 240px) / 2 );
		width: calc( (100vw - 240px) / 2 );
	}
	
	#workout-timer,
	#workout-timer-clock{
		max-width: 400px;
		left: 50%;
		margin-left: -200px;
		padding-left: 0;
		padding-right: 0;
		border-radius: var(--size-s);
		position: relative;
	}
}