: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-xxl) * 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: #b5d8f6;
	--color-main-dark: #4a91cf;
	--color-main-light: #e5eff9;
	/*
	--color-main-dark: #201a50;
	--color-main-light: #887edc;
	*/
	--color-splash: #f9e5cd;
	--color-go: #7fd1b9;
	--color-alert:  #fc080d;
	--color-lightgrey: #f3f2f2;
	--color-darkgrey: #727272;
	--color-border: #e6e6e6;
	--color-fade-dark: rgba(0,0,0,0.0235);
	--color-fade-light: rgba(255,255,255,0.0235);
	
	--gradient-main: linear-gradient(to top left, #bedcf6, #acd4f7);
	--gradient-dark: linear-gradient(to bottom right, #4a91cf, #3a81bf);
	--gradient-light: linear-gradient(to bottom, var(--color-lightgrey), 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;
}

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-l) * 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;
}
.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;
}

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-border);
	margin-top: var(--size-xl);
	margin-bottom: var(--size-xl);
}

.btn{
	display: inline-block;
	background: var(--gradient-main);
	font-size: var(--size-base);
	border: none;
	border-radius: 100px;
	color: var(--color-dark);
	padding: var(--size-s) var(--size-l);
	cursor: pointer;
	transition: 0.2s;
	outline: 2px solid transparent;
}
.btn:hover{
	outline: 2px solid var(--color-main-dark);
}
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.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.grey{
	background: var(--color-lightgrey);
	color: var(--color-dark);
}
.btn.grey:hover{
	
}
.btn.transparent{
	background: transparent;
	border: 2px solid var(--color-dark);
	padding: calc(var(--size-s) - 2px) calc(var(--size-l) - 2px);
}
.btn.lightblue{
	background: var(--color-main-light);
	color: var(--color-dark);
}
.btn.red{
	color: var(--color-light);
	background: var(--color-alert);
}
.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;	
}

.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);
}

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

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

.right{
	text-align: right;
}
.center{
	text-align: center;
}
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);
}
.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);	
}

.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));	
}

.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-l);
	margin: 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;
}

/* */

#header{
	background: var(--color-light);
	height: var(--size-xxl);
	text-align: right;
	box-shadow: 0px 0px 14px #eee;
}
#header nav{
	display: inline-flex;
	width: fit-content;
	flex-direction: row;
	align-items: center;
	height: 100%;
	margin-right: var(--size-s);
}
#header nav a{
	background: var(--color-light);
	width: var(--size-xl);
	height: var(--size-xl);
	text-align: center;
	line-height: 2.35;
	border-radius: 100px;
	margin-left: var(--size-s);
	color: var(--color-darkgrey);
}
#container{
	display: flex;
	flex-direction: row;
}
#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;
}

/* */
#messages{
	display: flex;
	flex-direction: row;
	background: transparent;
	height: calc(100vh - (var(--size-xl) * 2) - (var(--size-m) * 2) - var(--big-s));
	padding: var(--size-m) 0;
	margin-top: var(--size-l);
	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);
	display: none;
}
#the-messages{
	overflow: hidden;
	overflow-y: scroll;
}
.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.msg-from{
	background: var(--color-main-dark);
	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{
	border-top: 1px solid var(--color-lightgrey);
	margin-top:  var(--size-m);
	padding-top:  var(--size-m);
}
#send-msg-form textarea{
	width: calc(100% - 2px - var(--size-s) - var(--size-s));
	height: var(--size-xl);
}
#send-msg-form button[type="submit"]{
	margin-bottom: var(--size-xs);
}
#go-to-client{
	float: right;
	margin-top: var(--size-xs);
	color: var(--color-darkgrey);
}
#go-to-client:hover{
	color: var(--color-main-dark);
}
#bulk-textarea{
	height: var(--big-m);
}

/* */
#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);
}

/* */
#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));
}
.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{
	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 > 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 input[type="number"]{
	max-width: var(--big-s);
}
#added-foods > div textarea{
	height: var(--big-xs);
}
#gramspp{
	display: none;
}
.recipe{
	margin: 0 var(--size-s) var(--size-s) 0;
}
.recipe strong{
	color: var(--color-dark);
	margin-right: var(--size-m);
}
.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);
}
.nutrient input{
	max-width: var(--size-xxxl);
}
#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);
}
.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);
}

/* */
#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{
	background: var(--color-fade-dark);
}
#muscle-box{
	display: flex;
	flex-direction: row;
	margin: var(--size-l) 0;
}
#muscle-table{
	margin-right: var(--size-l);
}
#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 .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 .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');
}
.exercise-data{
	display: none;
}
.exercise-data .musclemap{
	width: var(--big-l);
	height: var(--big-l);
}

/* */
@keyframes blink{
	0%{top: 2px;}
	5%{top: 7px;}
	10%{top: 2px;}
	15%{top: 7px;}
	20%{top: 2px;}
	100%{top: 2px;}
}