@import url('https://fonts.googleapis.com/css?family=Lato:300,400,700,900&display=swap');

:root {
  --content-width: 960px;
  --border-radius: 8px;

  /* Step: 330px (1080) → 460px (1800) */
  --side-bar-width: clamp(20.625rem, 8.438rem + 18.056vw, 28.75rem);

  /* Step: 27.975px (1080) → 37.3px (1800) = 25% */
  --font-head: clamp(1.7484rem, 0.8742rem + 1.2951vi, 2.3313rem);
  /* Step: 16.95px (1080) → 22.6px (1800) = 25% */
  --font-sub: clamp(1.0594rem, 0.5297rem + 0.7847vi, 1.4125rem);
  /* Step: 13.74px (1080) → 17.3px (1800) = 20% */
  --font-copy: clamp(0.8588rem, 0.525rem + 0.4944vi, 1.0813rem);
  /* Step: 12.41px (1080) → 14.6px (1800) = 15% */
  --font-small: clamp(0.7756rem, 0.5703rem + 0.3042vi, 0.9125rem);
  /* Step: 10.8px (1080) → 12px (1800) = 10% */
  --font-extra-small: clamp(0.675rem, 0.5625rem + 0.1667vi, 0.75rem);


/*  --font-head: 28pt;
  --font-sub: 17pt;
  --font-copy: 13pt;
  --font-small: 11pt;
  --font-extra-small: 9pt;*/

  --transition: 0.25s ease-in-out;

  --error-color: #C6372C;
  --carbs-color: #468FF9;
  --fats-color: #9cf74d;
  --proteins-color: #f27d24;

  --focus-opacity: 0.35;
}

/* CLIENT NUMBERS 
  --font-head: clamp(1.88rem, calc(1.49rem + 1.92vw), 3.13rem);
  --font-sub: clamp(1.06rem, calc(0.97rem + 0.48vw), 1.38rem);
  --font-copy: clamp(0.94rem, calc(0.90rem + 0.19vw), 1.06rem);
  --font-small: clamp(0.75rem, calc(0.69rem + 0.29vw), 0.94rem);
*/


/*** GLOBALS ***/
body, html{
	height: 100%;
	width: 100%;
}

body{
	margin: 0;padding: 0;
	background: var(--bg-color);
	overflow: hidden;
	overflow-y: scroll;
}

body::-webkit-scrollbar{
	width: 9px;
    height: 10px;
}

body::-webkit-scrollbar-thumb{
	background: var(--light-bg-color);
	border-radius: 10px;
}

body::-webkit-scrollbar-track{
	background: transparent;
}


*{
	font-family: 'Lato', sans-serif;
	box-sizing: border-box;
}

nav{
	width: 100%;
	position: relative;
	background: var(--dark-bg-color);
	padding: 30px 0;
}

input{
	background: var(--light-bg-color);
	padding: 13px 20px;
	margin: 0;
	outline: none;
	border: none;
	width: 100%;
	font-size: var(--font-copy);
	color: var(--white-color);
	border-radius: var(--border-radius);
}

input:disabled, select:disabled, textarea:disabled{
	opacity: var(--focus-opacity);
}

input::placeholder{
	opacity: 0.7;
}

textarea{
	border: none;
	outline: none;
	background: var(--light-bg-color);
    color: var(--white-color);
}

textarea::-webkit-scrollbar{
	width: 9px;
    height: 10px;
}

textarea::-webkit-resizer {
	border-width: 8px;
	border-style: solid;
	border-color: var(--bg-color) var(--light-bg-color) var(--light-bg-color) var(--bg-color);
}

textarea::-webkit-scrollbar-thumb{
	background: var(--light-bg-color);
	border-radius: 10px;
}

textarea::-webkit-scrollbar-track{
	background: transparent;
}

select {
	width: 100%;
    background: var(--light-bg-color);
    outline: none;
    border: none;
    padding: 13px 20px;
    margin: 0;
    border-radius: var(--border-radius);
    color: var(--white-color);
	-moz-appearance:none; /* Firefox */
    -webkit-appearance:none; /* Safari and Chrome */
    appearance:none;
    font-size: var(--font-copy);
	text-transform: capitalize;
}


button{
	outline: none;
	box-shadow: none;
	border: none;
	cursor:pointer;
}

h1, h2, h3, p, a, ul, ol{
	font-weight: 300;
	color: var(--white-color);
	margin: 0;
	letter-spacing:0.01em;
}


p, ul, ol{
	font-size: var(--font-copy);
}

h2{
	font-size: var(--font-sub);
}

i{
	margin: 0;
	padding:0;
}


canvas{
    position: fixed;
    z-index: 10000;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    background: transparent;
}

label{
	cursor: pointer;
}


.light input, .light select, .light textarea{
	background: var(--dark-bg-color);
}


.content_container{
	width: 95%;
	max-width: var(--content-width);
	margin: 0 auto;
	padding-top: 100px;
}


/*.noscroll{
	overflow: hidden !important;
}

.no-top-margin{
	margin-top: 0 !important;
}

.no-bottom-margin{
	margin-bottom: 0 !important;
}

.no-vertical-margin{
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

.add-right-margin{
	margin-right: 5px;
}
.add-bottom-margin{
	margin-bottom: 10px;
}
.add-top-margin{
	margin-top: 10px;
}
.text-center{
	text-align: center;
}
.text-left{
	text-align: left;
}
.float-right{
	float: right;
}

.minimal-scrollbar::-webkit-scrollbar {
    width: 2px !important;
    height: 0px !important;
}

.minimal-scrollbar::-webkit-scrollbar-thumb{
	background: var(--light-bg-color);
	border-radius: 10px;
}

.minimal-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}
*/

.page_input{
	background: var(--light-bg-color);
	padding: 20px;
	margin: 5px 0;
	outline: none;
	border: none;
	width: 100%;
	font-size: var(--font-copy);
	color: var(--white-color);
	border-radius: var(--border-radius);
}

textarea.page_input{
	min-height:  200px;
	resize: vertical;
}


.sep{
	border-bottom: 1px solid var(--light-bg-color);
	width: 100%;
}

.sep.extra-margin{
	margin:  25px 0;
}

.sep.inverted{
	border-bottom: 1px solid var(--bg-color);
}


p.small-p{
	font-size: var(--font-small) !important;
}


.tutorial-link{
	text-decoration: underline;
	margin-top: 10px;
	margin-bottom: 20px;
	display: block;
	cursor: pointer;
}


/**** NAVIGATION ****/

.nav_contain{
	max-width: 1080px;
	width: 95%;
	height: 100%;
	margin: 0 auto;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}


/*.logo{
	width: 50px;
	display: inline-block;
}*/

.logo svg {
    fill: var(--primary-color);
}

.nav_items, .nav_items-spacer{
	display: inline-flex;
	flex: 1;
	justify-content: end;
	align-items: center;
	gap: 10%;
}

.nav_link{
	font-weight: 500;
	text-decoration: none;
}

.nav_link.active{
	color: var(--primary-color);
}

.nav_module{
	width: 100%;
	padding:15px 10px;
	direction: ltr;
	cursor:pointer;
	position: relative;

}

.nav_module:after {
    border-bottom: 1px solid var(--light-bg-color);
    content: "";
    width: calc(100% - 30px);
    position: absolute;
    bottom: 0;
    margin: auto;
}

.dashboard_module.nav_module:after{
	display: none;
}


.nav_module-top{
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: relative;
	z-index: 10;
}


.nav_module .icon-arrow-right{
	font-size: 13pt;
	opacity:0;
    color: var(--white-color) !important;
    flex-basis: 20px;
    cursor:pointer;
    transform: translateX(-10px);
}

.nav_module-item .icon-arrow-right{
	transition: var(--transition);
}

.active_module .icon-arrow-right{
	opacity: 1;
	transform: translateX(0);
}


.nav_module-top .icon-more{
	padding: 5px 10px;
    background: var(--bg-color);
    color: var(--white-color);
    border-radius: var(--border-radius);
    font-size: 25px;
    cursor:pointer;
	display: flex;
    align-items: center;
    margin-left: 10px;

}

.nav_module-expand{
	display:none;
	padding-top: 20px;
	position: relative;
	z-index: 10;
}

.nav_module.active_module{
	background: var(--bg-color) !important;
	cursor:auto !important;
}

.nav_module.active_module .nav_module-expand{
	display: block;
}


.nav_module.half_active_module{
	cursor:auto !important;
}

.nav_module.half_active_module .nav_module-expand{
	display: block;
}

.nav_module.half_active_module:before{
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;left:0;
	background: var(--bg-color);
	opacity:0.25;
}


.nav_module-item {
    padding: 8px 0;
    padding-left: calc(var(--side-bar-width) / 5);
    color: var(--white-color);
    font-size: var(--font-copy);
    width: 90%;
    margin-left: -10px;
    border-bottom-right-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius);
    cursor:pointer;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    overflow: hidden;
    position: relative;
    z-index:10;
    text-decoration: none;
}

.nav_module-item:hover:after{
	content:"";
	width: 100%;
	height: 100%;
	background: var(--light-bg-color);
	opacity: var(--focus-opacity);
	position: absolute;
	top:0;left:0;
	z-index:-1;
}

.nav_module-item.active_item {
    color: var(--primary-color) !important;
    font-weight: 700;
    background: var(--light-bg-color);
}

.nav_module-item.active_item .icon{
    color: var(--primary-color) !important;	
}

.nav_module-item .icon{
	margin-right: 10px;
	font-size:20pt;
}

.nav_module.filter-hidden{
	display: none;
}


@media all and (max-width: 800px) {
	.nav_contain{
		flex-wrap: wrap;
	}

	.nav_items-spacer{
		display: none;
	}

	.nav_items{
		flex-basis: 100%;
		margin-top:15px;
		justify-content: center;
		align-items: center;
	}

	nav{
		padding:15px 0;
	}
}



#inactive .user_details h2{
	opacity: var(--focus-opacity);
}

#inactive .nav_module-top .icon-trash{
	color: var(--white-color);
    margin: 0 auto;
    font-size: 25pt;
    cursor:pointer;
}

#inactive .nav_module-top .icon-trash:hover{
    color: var(--error-color);
}

#inactive .half_active_module .nav_module-top .icon-trash{
	opacity:0;
	pointer-events: none;
}


.page_nav{
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 25px;
}

.page_nav-history{
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 90px;
}


.page_nav-client, .page_nav-crumb {
    padding: 5px 10px;
    border-radius: var(--border-radius);
    font-size: var(--font-small);
    color: var(--white-color) !important;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    cursor:pointer;
    text-decoration: none;
}

.page_nav-crumb .icon {
    margin-right: 10px;
}

.page_nav-client:after, .page_nav-crumb:after{
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	top:0;left:0;
	background: var(--dark-bg-color);
	opacity: var(--focus-opacity);
}

.page_nav-client-profile{
	width: 35px;
	height: 35px;
    background: var(--light-bg-color);
    background-size: cover;
    background-position: center;
    border-radius: 1000px;
    align-items: center;
    display: flex;
    justify-content: center;
    margin-right: 15px;
    position: relative;
    z-index: 10;
}

.page_nav-client-preview{
	display: block;
	margin-top: 3px;
	font-size: 11px;
}

.page_nav-client span, .page_nav-crumb span{
	position: relative;
	z-index: 10;
	letter-spacing:0.02em;
}

.back, .forward{
	position: relative;
	overflow: hidden;
	border-radius: 100px;
	width: 35px;
	height: 35px;
	color: var(--white-color) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor:pointer;
    text-decoration: none;
    margin:  0 auto;
}

.back .icon-arrow-right{
	transform: rotate(180deg);
	position: relative;
	z-index: 10;
}


.forward .icon-arrow-right{
	position: relative;
	z-index: 10;
}

.back:after, .forward:after{
	content: '';
	width: 100%;
	height: 100%;
	position: absolute;
	top:0;left:0;right:0;bottom:0;
	background: var(--dark-bg-color);
	opacity: var(--focus-opacity);
}

.back:hover:after, .forward:hover:after{
	opacity: 1;
}

.mobile-nav{
	display: none;
	justify-content: space-between;
	align-items: center;
	background:  var(--dark-bg-color);
	width: 100%;
	padding: 20px 0 30px 0;
	position: fixed;
	bottom: 0;left: 0;
	z-index: 9001;
}

.mobile-nav .nav_module-item{
	  padding: 0;
    width: 100%;
    flex-basis: 100%;
    margin: 0;
    justify-content: center;
    flex-direction: column;
    font-size:  calc(var(--font-small) / 1.2);
    color: var(--white-color);
    font-weight: 500;
}

.mobile-nav .nav_module-item.active_item, .mobile-nav .nav_module-item:hover:after{
	background:  transparent;
}

.mobile-nav .nav_module-item.active_item{
	font-size: 0;
}

.mobile-nav .nav_module-item .icon{
	font-size:  30px;
	margin: 0;
}



.login_btn {
    text-decoration: none;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    font-size: var(--font-copy);
    height: var(--font-copy);
}
.login_btn:hover{
	opacity: var(--focus-opacity);
}

#coach-token.token-preloaded{
	display: none !important;
}

footer{
	padding: 70px 10px;
}

.footer_contain{
	display: flex;
	justify-content: center;
	gap: 20px;
}

.footer_contain a{
	text-decoration: none;
	color: var(--white-color);
	font-family: var(--font-copy);
}

.footer_contain a:hover{
	text-decoration: underline;
}

/**** UI ELEMENTS ****/

.btn.page_btn{
	width: auto;
	padding: 15px 20px;
	min-width: 200px;
}

.btn.page_btn.loading{
	width: 60px;
	min-width: 60px;
}

.remove_full_width_btn{
    width: auto;
    padding: 7px 50px;
	display: inline-flex;
	margin: 10px 10px 0 0;
}

.search_input{
	width: 100%;
	background: var(--light-bg-color);
	border-radius:var(--border-radius);
	padding-left:45px;
	position: relative;
	margin-bottom: 25px;
}

.search_input:before{
	content: "\e910";

	/* use !important to prevent issues with browser extensions that change fonts */
	font-family: 'icons' !important;
	speak: never;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;

	position: absolute;
	top:0;bottom:0;left:10px;
	margin: auto;

    font-size: 30px;
    height: 30px;
	color: var(--white-color);
}

.search_input input{
	padding-left: 5px;
	background: transparent;
}

.search_input_expand-item{
	color:  var(--white-color);
	padding-left: 26px;
	margin: 15px 0 5px 0;
	background: transparent;

}
.search_input_expand-item:before{
  left: 0;
  font-size: 28px;
  height: 28px;
  color:  var(--light-bg-color);
}
.search_input_expand-item input{
	padding:  0 0 0 8px;
	min-width: 170px;
	background: transparent;
}
.search_input_expand-item input::placeholder{
	color: var(--light-bg-color);
	opacity: 1;
}

.search_results-compact{
    overflow-y: scroll;
    max-height: 400px;
}


.multi_block {
    background: var(--dark-bg-color);
    color: var(--white-color);
    padding: 20px 30px;
    margin-bottom: 10px;
    border-radius: var(--border-radius);
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    position: relative;
}

.multi_block-title {
    display: flex;
    flex-direction: column;
    font-size: var(--font-copy);
    flex-basis: 75%;
}

.multi_block-desc {
    font-size: var(--font-small);
    font-weight: 900;
    color: var(--primary-color);
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    text-transform: capitalize;
}

.multi_block-extra {
    color: var(--light-bg-color);
    text-align: right;
}

.multi_block .icon-minus.multi_block-extra:hover:before{
	color: var(--error-color);
}

.multi_block .icon-minus.multi_block-extra:hover:after,
.multi_block .delete_mealplan_minus.icon-minus:hover:after{
  content: '';
  width: 100%;height: 100%;
  background: var(--bg-color);
  position: absolute;
  top: 0;left: 0;
  opacity: 0.8;
  pointer-events: none;
  z-index: 2;
}

.multi_block .icon-minus:before{
	position: relative;
	z-index: 3;
}

.multi_block-expandable{
	height: auto;
	max-height: 0;
	transition: 0.25s ease-out;
	transition-delay: 0s;
	overflow: hidden;
    width: 100%;
    position: relative;
}
.multi_block-expand-item{
	display: flex;
	align-items: flex-start;
	opacity: 0;
	transition: 0.25s ease-out;
	padding: 15px 0;
    border-top: 1px solid var(--light-bg-color);
}

.multi_block-expand-item:first-child{
	margin-top:  15px;
}

.active_item .multi_block-expandable{
	max-height: 1000px;
	overflow-y: scroll;
	transition-delay: 0.12s !important;
}

.multi_block-expandable::-webkit-scrollbar{
	width: 7px;
    height: 10px;
}

.multi_block-expandable::-webkit-scrollbar-thumb{
	background: var(--bg-color);
	border-radius: 10px;
}

.multi_block-expandable::-webkit-scrollbar-track{
	background: transparent;
}

.active_item .multi_block-expand-item{
	opacity: 1;
}

.meals_contain-drawer .active_item .multi_block-expandable{
	padding-top: 10px;
}


.multi_block-expandable .multi_block-expand-item:nth-child(2){ transition-delay: 0.1s; }
.multi_block-expandable .multi_block-expand-item:nth-child(3){ transition-delay: 0.15s; }
.multi_block-expandable .multi_block-expand-item:nth-child(4){ transition-delay: 0.2s; }
.multi_block-expandable .multi_block-expand-item:nth-child(5){ transition-delay: 0.25s; }
.multi_block-expandable .multi_block-expand-item:nth-child(6){ transition-delay: 0.3s; }


.multi_block-expand-item.search_foods-block{
	flex-wrap: wrap;
	position: relative;
	z-index: 1;
}


.multi_block-color {
    position: absolute;
    top: 5px;right: 5px;
    z-index: 12;
	font-size: var(--font-extra-small);
	color: var(--white-color);
	letter-spacing: 0.04em;
	font-weight: 600;
	text-align: right;
}

.past_day .multi_block-color, .program_contain .multi_block-color{
	display: none;
}

.multi_block-color-dot {
    display: flex;
    align-items: flex-start;
	justify-content: end;
    gap: 4px;
}
.multi_block-color-dot:hover{
	min-width: 200px;
}


.multi_block-color-dot:after{
	content: '';
	display: inline-block;
	min-width: 8px;height:8px;
	border-radius: 100px;
	background: var(--p-color);
}

.multi_block-color-identifier{
	background: var(--p-color);
	width: max-content;
	display: none;
	padding: 2px 5px;
	border-radius: var(--border-radius);
	margin-top: 7px;
	box-shadow: 10px 10px 30px 4px rgba(6,6,6,0.8);
	color: var(--dark-bg-color)
}

.light .multi_block-color-identifier{
	box-shadow: 0 0 0 2px var(--light-bg-color);
}


.multi_block-color-dot:hover .multi_block-color-identifier{
	display: inline-block;
}

.search_foods-block .search_input{
	margin-bottom: 0px;
}


.page_error{
    width: calc(89% - var(--side-bar-width));
    padding: 10px;
    background: var(--error-color);
    color: var(--white-color);
    border-radius: var(--border-radius);
    margin: auto;
    text-align: center;
    position: fixed;
    opacity:0;
    transform: translateY(-100px);
    top: 15px;
	transition: var(--transition);
	z-index: 9000;
	pointer-events: none;
}

.page_error.active_page_error{
	transform: translateY(0px);
	opacity:1;
}

.page_error.inactive_page_error{
	opacity: 0;
}


@media all and (max-width: 1080px) {
	.page_error{
		width: 96%;
	}
}


/**** IN-APP NOTIFICATIONS ****/


.page_notification{
    width: calc(89% - var(--side-bar-width));
    padding: 20px 25px;
    background: var(--dark-bg-color);
    color: var(--white-color);
    border-radius: var(--border-radius);
    margin: auto;
    text-align: left;
    position: fixed;
    opacity:0;
    transform: translateY(-100px);
    top: 15px;
	transition: var(--transition);
	z-index: 9000;
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
	cursor: pointer;
	gap: 10px;
	
    user-select: none; /* standard syntax */
    -webkit-user-select: none; /* Safari 3.1+ */
    -moz-user-select: none; /* Firefox 2+ */
    -ms-user-select: none; /* IE 10+ */
}

.side_bar-minimized .page_notification{
	width: 40%;
}



.page_notification.active_page_notification{
	transform: translateY(0px);
	opacity:1;
}

.page_notification.inactive_page_notification:not(:hover){
	transform: translateY(-100px);
	opacity: 0;
	pointer-events: none	;
}

.page_notification p {
	flex: 1;
	pointer-events: none;
}

.page_notification:hover{
	background: var(--light-bg-color);
}


@media all and (max-width: 1080px) {
	.page_notification{
		width: 96%;
	}
}


/**** LOGIN / SIGNUP ****/

.login,
#create-account{
	margin: 0 auto;
	width: 100%;
	max-width: 460px;
	text-align: center;
}

#create-account input{
	margin: 5px auto;
}

#recaptcha-container{
	display:none !important;
}


#countryCode{
	width:  calc(100% - 4px);
	flex-basis: calc(100% - 4px);
	margin: 5px auto !important;
	background: transparent;
	box-shadow: 0 0 0 2px var(--light-bg-color);
	padding: 7px 20px;
}

#phoneNumber{
	width: 100%;
	flex-basis:100%;
	margin: 5px 0 !important;
}


.phoneInput{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

#new-client-country-code, #new-assistant-country-code{
	margin: 0 auto 10px 2px !important;
    background: transparent;
    box-shadow: 0 0 0 2px var(--light-bg-color);
    padding: 7px 20px;
    width: calc(100% - 4px);
    flex-basis: calc(100% - 4px);
}

#welcome-message{
	background: var(--message-color);
	color: var(--message-fg-color);
}

textarea#welcome-message::placeholder {
	color:  var(--white-color);
}

#onetime-email-btn{
	font-size: var(--font-copy) !important;
}

/***** QUICK ACTIONS ****/


#quick-actions {
    padding: 0 15px 20px 15px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.quick_action-btn{
	margin: 5px;
	flex-basis:calc(33% - 10px);
	flex: 0 0 calc(100% - 10px);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.quick_action-btn:nth-child(-n+3){
	flex: 1;
}

.quick_action-btn-help{
	display: inline-flex;
    justify-content: center;
    flex-direction: row-reverse;
    font-weight: 900;
    align-items: center;
    flex-basis: calc(100% - 10px) !important;
}

.quick_action-btn-help span{
	font-size: 16pt;
}

.filter_client{
	display: inline-block;
	position: relative;
  width: 100%;
}

.filter_client input{
	display: none;
}

.filter_client input:checked ~ label{
	color:  var(--primary-color);
}

.filter_client input:checked ~ label:before{
	background:  var(--primary-color);
	opacity: var(--focus-opacity);
}

.filter_client label:before{
	content:  '';
	flex-basis: 25px;
	min-width: 25px;
	width:  25px;height: 25px;
	border-radius:  var(--border-radius);
	background:  var(--light-bg-color);
	display: inline-block;
	margin-right: 10px;
}

.filter_client input:checked ~ label:after{
	content:  '';
	width:  19px;height: 19px;
	border-radius:  var(--border-radius);
	background:  var(--primary-color);
	display: inline-block;
	margin:  auto;
	margin-right: 10px;
	position: absolute;
	left: 3px;
	top: 0;bottom: 0}

.filter_client label{
	color:  var(--white-color);
	display: flex;
	align-items: center;
	justify-content: flex-start;
	margin:  5px 0;
    letter-spacing: 0.05em;
    font-weight: 300;
    font-size: var(--font-copy);
}

#bulk-message-clients, 
#bulk-program-clients,
#bulk-live-clients{
	margin-top: 10px;
	margin-bottom: 15px;
}

.bulk_drawer-clients{
    margin-top: 32px;
}

.zoom_id-placeholder {
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 0 0 2px var(--light-bg-color);
    border-radius: var(--border-radius);
    padding-left: 14px;
		font-weight: 900;
		margin-top: 15px;
}

input#zoom-id, input#zoom-password{
	background: transparent;
	margin:  0;
	padding-left: 0;

}

.zoom_id-placeholder label{
	font-size: var(--font-small);
	min-width: 85px;
		font-weight: 900;
		color: var(--white-color);
}

.zoom_password-placeholder {
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 0 0 2px var(--light-bg-color);
    border-radius: var(--border-radius);
    padding-left: 14px;
		font-weight: 900;
		margin-top: 10px;
}

.zoom_password-placeholder label{
	font-size: var(--font-small);
	min-width: 85px;
		font-weight: 900;
		color: var(--white-color);
}

input#zoom-password {
    padding: 5px 0;
}

.no-clients-added{
	padding: 20px 15px;
	font-size: var(--font-copy);
	flex-basis:  100%;
	text-align: center;
}

#bulk-send-to-list, .added_users_list{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    color: var(--white-color);
    margin-top: 10px;
    max-height: 50vh;
    overflow-y: scroll;
}

#bulk-send-to-list::-webkit-scrollbar, .added_users_list::-webkit-scrollbar{
	width: 7px;
    height: 10px;
}

#bulk-send-to-list::-webkit-scrollbar-thumb, .added_users_list::-webkit-scrollbar-thumb{
	background: var(--light-bg-color);
	border-radius: 10px;
}

#bulk-send-to-list::-webkit-scrollbar-track, .added_users_list::-webkit-scrollbar-track{
	background: transparent;
}


#bulk-send-to-list .user_in_group, .added_users_list .user_in_group{
	flex-basis: 28.5%;
}




/****** COACH DASHBOARD ********/

/*
.client{
	cursor:pointer;
	flex-basis: 32%;
	width: 32%;
	min-height: 100px;
	background: var(--dark-bg-color);
	padding:2%;
	border-radius: var(--border-radius);
	box-shadow: 0 0 0 3px var(--dark-bg-color);
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
}

.client h2{
	margin: 0;
	line-height: 100%;
}

.client_info{
	display:block;
	font-weight: 400;
	font-size: var(--font-small);
	color: var(--white-color);
}

.client:hover{
	box-shadow: 0 0 0 3px var(--primary-color);
}

.client_selected{
	box-shadow: 0 0 0 3px var(--primary-color);
	background: var(--primary-color);
}

.client_selected h2{
	color: var(--dark-bg-color);
}

.client_selected .client_info{
	color: var(--dark-bg-color) !important;
}

.client_new_message{
	max-width: 100%;
	white-space:nowrap;
	padding-top: 5px;
	position: relative;
	overflow: hidden;
	display:inline-block;
	color:rgba(255,255,255,0.5);
}

.client_selected .client_new_message{
	display:none;
}

.client_new_message:before{
	content: '';
	display:inline-block;
	background: var(--secondary-color);
	width: 10px;
	height: 10px;
	border-radius: 100px;
	margin-right: 10px;
}

.client_new_message:after{
	content: '';
	display:block;
	z-index: 10;
	position: absolute;
	width: 30%;height: 100%;
	background: linear-gradient(to right, transparent, var(--dark-bg-color));
	right:0;top:0;
}
*/

.dashboard-header{
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	position: relative;
	column-gap: 30px;
	z-index: 13;
}

.dashboard-header .secondary_btn_outline, .dashboard-header .select_filter{
	width: auto;
	min-width: 240px;
	margin: 0;
    font-weight: 500 !important;
    font-size: var(--font-copy);
}

.coach-events h4, .coach-notifications h4, .coach-activity-log h4{
	font-size:  var(--font-sub);
	color:  var(--white-color);
	font-weight: 300;
}

.coach-events{
	padding: 25px 0 50px 0;
	border-bottom: 1px solid var(--light-bg-color);
	position: relative;
}

.coach-notifications{
	padding: 25px 0;
	border-bottom: 1px solid var(--light-bg-color);
}

.nav_module-notifications{
	display: none;
    margin: 0 0 0 auto;
    width: calc(100% - 90px);
	text-align: center;
	direction: ltr;
	text-decoration: none;
}

.nav_module-notifications:hover{
	opacity: var(--focus-opacity);
}

.nav_module-notifications:before{
	content:'';
	width: 10px;height:10px;
	display: inline-block;
	margin-right: 10px;
	border-radius: 100px;
	background: var(--white-color);
}

.dashboard_module:not(.active_module) ~ .nav_module-notifications[data-total-notifications]{
	display: block;
}

.nav_module-notifications[data-total-notifications="0"]{
	display: none !important;
}


/*** MESSAGES ****/

.messages-conversation{
	width: 100%;
	background: var(--dark-bg-color);
	border-radius: var(--border-radius);
	color: var(--message-fg-color);

	margin-bottom:100px;

	height:600px;
	overflow: hidden;
	position: relative;
	padding-right:5px;
}

.messages-content{
	width: 100%;
	height: 100%;
	overflow: auto;
	overflow-x: hidden;
	padding:30px 10px;
	padding-bottom: 100px;

	display:flex;
	flex-direction: column;
}


.messages-content::-webkit-scrollbar{
	width: 0px;
    height: 10px;
}

.messages-content::-webkit-scrollbar-thumb{
	background: var(--dark-bg-color);
	border-radius: 10px;
}

.messages-content::-webkit-scrollbar-track{
	background: transparent;
}

.message{
	max-width: 80%;
	border-radius: 20px;
	padding: 10px 15px;
	margin: 2px auto;
	font-size: var(--font-copy);
	color: var(--white-color);
	position: relative;
	transition: 0.25s ease-in-out;
    overflow-wrap: break-word;
}

.message.type-checkin a.message_checkin, 
.flip_messages .received.message.type-audio p.audio-message_time,
.message-list:not(.flip_messages) .sent.message.type-audio p.audio-message_time{
	color: var(--message-fg-color);
}



/*.message:last-child {
    margin-bottom: 70px !important;
}*/

.message.type-videos, 
.message.type-files, 
.message.type-exercises,
.message.type-media{
	background: none !important;
	padding: 0 !important;
	width: 100%;
}

.message.type-videos .player,
.message.type-media .player{
	border-radius: 20px;
}

.message.type-checkin_response{
	background: none !important;
	box-shadow: 0 0 0 2px var(--message-color);	
    margin-top: 5px;
    margin-bottom: 5px;
}

.type-audio {
    width: 60%;
}

.message.type-media{
	transition: var(--transition);
}


/*.flip_messages .received.type-media{
	margin-left: 20%;
}

.message.type-media + .message.type-media {
    margin-top: -30px;
}

.message.type-media:nth-child(odd){
	transform: translateX(-5%);
}*/


/*.message.type-text + .message.type-media {
    transform: translate(0) !important;
}
*/

.message.type-media a{
	display: inline-block;
}


.message.type-link .icon-link{
  font-size: var(--font-sub);
}

.message.type-link a{
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
}


.message.type-live{
	background: none !important;
	box-shadow: 0 0 0 2px var(--message-color);
	margin-top: 7px;
	margin-bottom: 7px;
}


.message-info{
	position: absolute;
	font-size:var(--font-small);
	width: 100%;
	opacity:1;
	padding: 0;
	min-width: 200px;
	bottom:-20px;
	margin: auto;
	display: none;
}

.show_reciept .message-info{
	display: block;
}

.send-time{
	opacity:var(--focus-opacity);
    padding: 0 5px;
	transition: 0.25s ease-in-out;
}


.received{
	margin-left: 0;
	background: var(--light-bg-color);
	left: 45px;
}

.received .message-info { 
	left:0; 
	text-align: left; 
}


.sent{
	margin-right: 0;
	background: var(--message-color);
	color: var(--message-fg-color);
}

.sent .message-info { 
	right:0; 
	text-align: right;
}


.message-date {
    margin: 0 auto;
    text-align: center;
    padding: 20px 0;
    color: var(--light-bg-color);
}

.message-profile {
    width: 40px;
    height: 40px;
    background: var(--bg-color);
    border-radius: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center;
    position: absolute;
    top: 0;left: -45px;
    font-size: 26px;
}

.sent .message-profile{
	display: none;
}

.message.show_reciept {
    margin-bottom: 20px;
}


.flip_messages .received{
	margin-right:0;
	margin-left: auto;
	left: auto;
	background: var(--message-color);
	color: var(--message-fg-color);
}


.flip_messages .sent{
	margin-left:0;
	margin-right: auto;
	right: auto;
    background: var(--light-bg-color);
    color: var(--white-color);
}



.flip_messages .received .message-info { 
	right:0; 
	left:auto;
	text-align: right; 
}

.flip_messages .sent .message-info { 
	left:0; 
	text-align: left; 
}

.flip_messages .sent .wavelength{
	background: var(--bg-color);
}

.message_checkin {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    line-height: 168%;
    font-weight: 400;
    text-decoration: none;
    cursor: pointer;
}

.message_checkin-status{
	width: 20px;
	height:20px;
	box-shadow: 0 0 0 2px var(--message-fg-color);
    display: inline-flex;
    border-radius: 5px;
    margin-right: 10px;
    align-items: center;
    justify-content: center;
}

.message_checkin-status.checkin-completed{
	color: var(--message-color);
	background: var(--message-fg-color);
	font-size: 24px;
}

.message_checkin-status:not(.checkin-completed):before{
	display: none;
}



/*
.messages-list:not(.flip_messages) .message.received{
	margin-left: 0;
	background: var(--light-bg-color);
}

.message-list:not(.flip_messages) .message.sent{
	margin-right: 0;
	background: var(--secondary-color);
}


.message-list.flip_messages .message.received{
	margin-right: 0;
	background: var(--secondary-color);
}

.message-list.flip_messages .message.sent{
	margin-left: 0;
	background: var(--light-bg-color);
}

.message-list:not(.flip_messages) .message.sent .message-info{ right:0; text-align: right; }
.message-list:not(.flip_messages) .message.received .message-info{ left:0; text-align: left; }

.message-list.flip_messages .message.received .message-info{ right:0; text-align: right; }
.message-list.flip_messages .message.sent .message-info{ left:0; text-align: left; }

*/

.message-response_container{
	width: 100%;
	position: absolute;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
/*	height: 75px;*/
	bottom:0;left:0;
	background:rgba(6,6,6,0.8);
	-webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    padding: 10px 2%;
    z-index: 12;

    border-bottom-right-radius: var(--border-radius);
    border-bottom-left-radius: var(--border-radius);
}

.light .message-response_container{
	background: rgba(6,6,6,0.3);
}



.response{
	padding:0;
	width: 100%;
	height:calc(var(--font-copy) + 4px);
	font-size: var(--font-copy);
	color: var(--white-color);
	background: transparent !important;
	resize: none;
	overflow:hidden;
}

.response-text_placeholder{
	width:100%;
	font-size: var(--font-copy);
    pointer-events: none;
    position: relative;
    z-index: 2;
    pointer-events: none;
    visibility: hidden;

    /* inherit from textarea default formatting */
	letter-spacing: normal;
    word-spacing: normal;
    line-height: normal;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
    display: inline-block;
    text-align: start;
    appearance: auto;
    -webkit-rtl-ordering: logical;
    resize: auto;
    cursor: text;
    white-space: pre-wrap;
    overflow-wrap: break-word;

    display: none;
}


.response-text_container_fill{
	position: relative;
	padding: 10px 15px;
}


.response-text_container{
	position: relative;
	flex-basis:100%;
    margin: 0 10px 0 0;
	border-radius: 20px;
	background: var(--bg-color);
	min-height: 40px;
    max-height: 200px;
    overflow: hidden;
    overflow-y: scroll;
    transform: translate3d(0,0,0);
}

.response-text_container::-webkit-scrollbar{
	width: 0px;
    height: 10px;
}

.response-text_container::-webkit-scrollbar-thumb{
	background: var(--light-bg-color);
	border-radius: 10px;
}

.response-text_container::-webkit-scrollbar-track{
	background: transparent;
}

.send-media_previews{
	display: flex;
	justify-content: flex-start;
}

.send-audio_message{
	display: none;
}

.send-audio_message.active_audio_recording{
	width:  100%;
	height:  100%;
	background: var(--bg-color);
	position: absolute;
	top: 0;left: 0;
	z-index: 11;
    display: flex;
    justify-content: space-between;
    align-items: center;
}


.audio-message{
	flex-basis: 100%;
	margin-left: 15px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	overflow: hidden;
}

.audio-message audio{
	display: none;
}

/*.send-audio_message .audio-message:after{
	content: '';
	width: 100%;height: 4px;
	background: var(--light-bg-color);
	display: inline-block;
	border-radius: 100px;
}*/

/*.wavelength{
	height: 40px;
	width:  100%;
    background-color: var(--message-color);
    -webkit-mask-image: url('/media/wavelength.svg');
    mask-image: url('/media/wavelength.svg');

	animation: waves 10s linear infinite;
}


@keyframes waves {
	0% {
		-webkit-mask-position: 0% 0%;
		mask-position: 0% 0%;
	}
	100% {
		-webkit-mask-position: 100% 0%;
		mask-position: 100% 0%;
	}
}
*/

.play-audio{
	display: none;
    font-size: 21px;
    margin-right: 10px;
    cursor: pointer;
}

audio + .play-audio{
	display: flex;
}

.play-audio:hover{
	opacity: var(--focus-opacity);
}



.is-playing .play-audio:before{
	content: '\e929';
}

.sending-audio .send-media_previews{
	display: none;
}
.sending-audio .response, .sending-audio .response-text_placeholder, .sending-audio .send-media{
	display: none !important;
}

.wavelength{
	width: 100%;height: 4px;
	background: var(--light-bg-color);
	display: inline-block;
	border-radius: 100px;
	position: relative;
	overflow: hidden;
}

.light .wavelength{
	background: transparent;
}

.wavelength .audio-progress{
	position: absolute;
	top: 0;left: 0;width: 100%;height: 100%;
	background: var(--white-color);
}

.flip_messages .received .wavelength .audio-progress,
.message-list:not(.flip_messages) .sent .wavelength .audio-progress{
	background: var(--message-fg-color);
}

.wavelength.animating-waves .audio-progress{
	animation: waves .5s ease infinite;
}



@keyframes waves {
	0% {
		width: 20%;
	}
	50% {
		width: 30%;
	}
	100% {
		width: 20%;
	}
}





.audio-message_time{
	margin:0 10px;
	font-weight: 700;
	font-size: var(--font-small);
}


.message-response_container .delete-audio_message{
    height: 40px;
    width: 40px;
    min-width: 40px;
    flex-basis: 40px;
    display: none;
    align-items: center;
    justify-content: center;
	background: var(--bg-color);
	color: var(--white-color);
	border-radius: 100px;
    font-size: 18pt;
    cursor: pointer;
    margin: 0 5px;
}

.sending-audio .delete-audio_message{
	display: flex;
}

.delete-audio_message:hover{
	color: var(--error-color);
	background: var(--light-bg-color);
}

.message-response_container .send {
    height: 40px;
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
	background: var(--message-color);
	color: var(--message-fg-color);
	border-radius: 100px;
    font-size: 21pt;
}


.send .icon-send{
	margin: 0 auto;
}

.send:hover, .send-media:hover, .send-audio:hover, .delete-audio_message:hover ~ .response-text_container{
	opacity: var(--focus-opacity);
}


.message-response_container .send-media{
    height: 30px;
    width: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
	background: var(--dark-bg-color);
	color: var(--white-color);
	border-radius: 100px;
    font-size: 16pt;
    cursor: pointer;
    position: sticky;
    right: 5px;
    bottom: 5px;
    float: right;
    margin-top:  -30px;
}

.message-response_container .send-audio {
    height: 40px;
    min-width: 40px;
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
	background: var(--bg-color);
	color: var(--white-color);
	border-radius: 100px;
    font-size: 21pt;
    margin-right: 10px;
    cursor: pointer;
}



.send-media_thumb {
    height: 80px;
    width: 80px;
    border-radius: 20px;
    margin: 10px 0 10px 15px;
    display: inline-block;
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;

    background: linear-gradient(-70deg, var(--bg-color), var(--bg-color), var(--light-bg-color), var(--bg-color));
    background-size: 300% 300%;
    animation: loading 2s ease infinite;
}


.send-media_thumb[data-src], .send-media_thumb[data-url]{
  animation: none;
  background-size: cover;
}


.send-media_thumb:after{
  color:  var(--white-color);
  font-size: 20px;
  position: absolute;
  bottom: 5px;right: 5px;

  font-family: 'icons' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.send-media_type_video:after{
	content: '\e901';
}

.send-media_type_image:after{
	content: '\e918';
}



.send-media_thumb.send-media_type_pdf,
.send-media_thumb.send-media_type_file{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  background: var(--light-bg-color);
}

.send-media_thumb.send-media_type_pdf:before,
.send-media_thumb.send-media_type_file:before{
  content: attr(data-content);
  font-size: 10px;
  font-weight: 500;
  line-height: 120%;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: 25px;
}



.quick_response-contain .send {
	background: var(--message-color);
    color: var(--message-fg-color);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100px;
    position: absolute;
    right: 5px;bottom: 5px;
    font-size: 21pt;
}

.quick_response-contain{
	height: 150px;
	overflow: hidden;
	background: var(--light-bg-color);
	border-radius: var(--border-radius);
	position: relative;
	display: none;
	margin-left: auto;
    margin-top: 10px;
    margin-right: 0;
    width: calc(100% - 80px);
    padding: 2px;
}

.quick_response-contain.quick_response_active{
	display:block;
}

.quick_response-input{
	height: calc(100% - 50px);
    width: 100%;
    background: transparent !important;
    border: none;
    outline: none !important;
    padding: 5%;
    color: var(--white-color);
    font-size: var(--font-copy);
	resize: none;
}



/*.group-message .send-audio, .group-message .send-media{
	display: none !important;
}
*/






.message-actions-contain, .message-actions-view {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    flex-wrap: wrap;
}

.message-actions-view .content_small{
	overflow: hidden;
}

.message_action-btn {
	flex-basis: 48%;
    width: 48%;
    display: inline-block;
    margin: 5px 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-size: var(--font-copy);
    text-align: left;
}

.message_action-btn.active-action{
	background: var(--light-bg-color);
}

.message_action-btn .icon{
	font-size: var(--font-sub);
	margin-right:10px;
}



.message-actions-view-contain{
	display: none;
	text-align: left;
	width: 100%;
	padding-top: 20px;
}
.message-actions-view-contain.active-action-contain{
	display: inline-block;
}

.message-actions-load {
    margin: 15px auto;
    display: inline-block;
    text-align: center;
    color: var(--white-color);
    font-size: var(--font-copy);
    box-shadow: 0 0 0 2px var(--light-bg-color);
    border-radius: var(--border-radius);
    padding: 10px 30px;
    cursor: pointer;
    line-height: 200%;
    width: 100%;
}

.message-actions-load .icon-reset{
	font-size: var(--font-sub);
    position: relative;
    top: 4px;
}

.message-actions-view .content_small{
	flex-basis: 48%;
	width: 48%;
	margin: 5px 0;
	cursor: auto !important;
}

.message-actions-view .content_title{
	display:flex;
	justify-content: space-between;
	align-items: flex-end;
}

.message-actions-view .content_title .content_title-contain{
	flex-basis:calc(100% - 50px);
	text-align: left;
}
.message-actions-view .content_small .send{
	height: 40px;
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--message-color);
    color: var(--message-fg-color);
    border-radius: 100px;
    font-size: 21pt;
    transform: translateY(100px);
    transition: var(--transition);
    cursor: pointer;
}



.message-actions-view .content_small:hover:after{ display:none !important; }
.message-actions-view .content_small:hover .content_thumb{ 
	box-shadow: none !important; 
    opacity: var(--focus-opacity);
}
.message-actions-view .content_small:hover .send{
	transform: translateY(0px);
}

.message-actions-view .content_small.no_image{
	min-height: 60px;
    padding: 0;
    flex-basis: 100%;
    width: 100%;
}
.message-actions-view .content_small.no_image .content_title{
	position: relative;
    bottom: 0;
    align-items: center;
    padding: 10px 0;
}

.content_desc-contain{
	font-size: var(--font-small);
	margin-top: 6px;
}

.placeholder_action_item.action_item-workouts, .placeholder_action_item.action_item-meals, .placeholder_action_item.action_item-texts{
	height: 60px;
    flex-basis: 100%;
    width: 100%;	
}

.message-actions-view .metric{
	flex-basis: 100%;
	margin: 5px 0;
}

.placeholder_action_item{
	width: 48%;
	height: 170px;

	border-radius: var(--border-radius);
	margin: 5px 0 5px auto;

	background: linear-gradient(-70deg, var(--bg-color), var(--bg-color), var(--light-bg-color), var(--bg-color));
	background-size: 300% 300%;
	animation: loading 2s ease infinite;
}

.placeholder_action_item:nth-child(2){ animation-delay: 0.05s; }
.placeholder_action_item:nth-child(3){ animation-delay: 0.1s; }
.placeholder_action_item:nth-child(4){ animation-delay: 0.15s; }
.placeholder_action_item:nth-child(5){ animation-delay: 0.2s; }

.action_list_item-no-results{
    margin: 15px 0 5px auto;
    box-shadow: 0 0 0 2px var(--light-bg-color);
    color: var(--white-color);
    border-radius: var(--border-radius);
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	padding-right: 0px;
 	position: relative;
 	min-height: 170px;
 	width: 100%;
}



a.message_live{
		text-decoration: none;
}

.message_live-btn:hover{
	opacity: var(--focus-opacity);
}

.message_live-btn.expired{
	opacity: var(--focus-opacity);
}

.message_live span {
    display: block;
}

.message_live-btn{
	display: inline-block;
	padding: 5px 15px;
	background: var(--message-color);
	color: var(--message-fg-color);
	border-radius:  100px;
	margin:15px 0 5px 0;
	text-decoration: none;
}

.play_video_container, .show_file_container{
	position: relative;
	min-height: 150px;
}

.sent .play_video_container, .sent .show_file_container, .flip_messages .play_video_container, .flip_messages .show_file_container{
	text-align: right;
}

.play_video_container img, .show_file_container img {
    width: 100%;
    object-fit: cover;
    min-height: 200px;
    border-radius:  20px;
    margin-bottom:  -4px;
}


.show_audio_container {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0;
    border-radius: 20px;
}

.show_audio_container .audio-message{
	margin-left: 0;
}

.show_audio_container .audio-message_time{
	margin-right: 0;
}


.message_content_container{
	width: 100%;
	min-height: 150px;
    background: var(--light-bg-color);
    border-radius: 20px;
    margin-bottom:  5px;
    overflow: hidden;
}


.play_video_container .player{
/*	margin-bottom:  5px;*/
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0)
}

.message .content_info{
    margin-left: auto;
    font-size: var(--font-copy);
    color: var(--white-color);
    max-width: 90%;
    min-width: 0px;
/*    min-width: 180px;*/
    cursor: pointer;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    text-align: left;
    text-decoration: none;
    border-radius: 20px;
    padding: 10px 20px;
    margin:  2px auto;
}

.flip_messages .received .content_info{
	box-shadow:0 0 0 2px var(--message-color);
}

.flip_messages .sent .content_info{
    background: var(--light-bg-color);
}

.message .content_thumb{
	font-size: 154px;
    height: 100%;
    width: 2000px;
    max-width: 100%;
    position: relative;
    text-align: center;
    color: var(--light-bg-color);
    background: var(--bg-color);
    margin-bottom: 6px;
    border-radius: 20px;
}

@media all and (max-width: 1080px) {
	.messages-conversation{
		margin-bottom: 30px;
	}
}

/*
.play_video_container:after, 
.show_file_container:after{
    content: '';
    position: absolute;
    bottom:0;left:0;
    z-index: 1;
    width:100%;
    height:20px;
    background: var(--dark-bg-color);
}*/

.play_video_container .icon, 
.show_file_container .icon, 
.type-workouts .icon,
.type-meals .icon,
.type-mealplans .icon{
font-size: 30px;
    margin-right: 10px;
}



.message-actions-view .metric_data{
	margin: 0;
}

.message-actions-view select{
	margin: 5px 0;
}

.action-search-results{
	max-height: 270px;
	overflow: hidden;
	overflow-y: scroll;
	padding-bottom: 15px;
}

.action-history-view{
	flex-basis: 100%;
	width: 100%;
}
.action-send-history{
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
  color: var(--white-color);
  text-align: left;
}

.action-send-history strong{
	color: var(--primary-color);
	font-weight:400;
}

.action-send-history .send{
	height: 40px;
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--message-color);
    color: var(--message-fg-color);
    border-radius: 100px;
    font-size: 21pt;
    cursor: pointer;
}
.action-history-content {
    color: var(--white-color);
    margin: 5px 0 15px 0;
    padding: 20px;
    background: var(--light-bg-color);
    font-size: var(--font-copy);
    text-align: left;
    border-radius: var(--border-radius);
}

.action-history-content.type-textfield, .action-history-content.type-number{
	background: var(--message-color);
	border-radius:  20px;
}
.action-history-content.type-textfield p, .action-history-content.type-textfield h3, 
.action-history-content.type-number p, .action-history-content.type-number h3{
	color: var(--message-fg-color);
}

.action-history-content.type-photo, .action-history-content.type-video{
	padding:0;
	border-radius: 0;
	background: transparent;
}

.history-content-header{
	font-size: var(--font-small);
	margin-bottom: 5px;
	font-weight:500;
	line-height: 110%;
	display: flex;
	align-items: center;
}

.history-content-header .icon-progress{
	font-size:  var(--font-copy);
}

.graph-content-message{
	font-size: var(--font-copy);
	font-weight:500;
	padding: 15px;
	box-shadow: 0 0 0 2px var(--message-color);
	border-radius: 20px;
	max-width: 100%;
	margin-left: auto;
	position: relative;
	margin-top: -23px;
	line-height:  150%;
	z-index: 2;
	display: flex;
	align-items: center;
}

.history-content-header .icon-progress, .graph-content-message .icon-progress{
	font-size: 30px;
    position: relative;
    margin-right: 10px;
}

.history-content-image {
    width: 100%;
}

.message.type-history{
	padding:0;
	background: transparent;
	max-width: 80%;
	margin-top: 10px;
	margin-bottom: 10px;
}

.message.type-graph{
	padding:0;
	background: transparent;
	width: 100%;
}

.show_history_container{
	padding:10px 15px 15px 15px;
	min-height: 70px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    text-align: left;
    box-shadow: 0 0 0 2px var(--message-color);
    border-radius: 20px;
}

.show_graph_container{
	min-height: 70px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    text-align: left;
/*    margin-bottom:  10px;*/
}

.show_graph_container .graph_container{
	height: 275px;
}

.show_history_container .history-content-header{
	margin-bottom:5px;
}

.show_history_container.type-photo, 
.show_history_container.type-video,
.type-workouts, 
.type-meals,
.type-mealplans{
	padding:0;
	border-radius:0;
	background: transparent !important;
	margin-bottom: 0px;/** Used to be 20px **/
	box-shadow: none;
}

.show_history_container.type-photo .history-content-header, 
.show_history_container.type-video .history-content-header,
.type-workouts .content_info,
.type-meals .content_info,
.type-mealplans .content_info {
    font-size: var(--font-copy);
    font-weight: 400;
    padding: 10px 20px;
    box-shadow: 0 0 0 2px var(--message-color);
    border-radius: 20px;
    max-width: 100%;
    margin-left: auto;
    position: relative;
    margin-top: 6px;
    line-height: 150%;
    z-index: 2;
    display: flex;
    align-items: center;
}

.type-videos .content_info,
.type-files .content_info,
.type-exercises .content_info {
    box-shadow: 0 0 0 2px var(--message-color);
}

.message-actions-view .action-graph-contain{
	width: 100%;
}


.action-history-dates{
	display: flex;
	justify-content: space-between;
	margin:  5px 0;
	width: 100%;
}

.action-history-dates select{
	flex-basis: calc(100% - 80px);
	max-width: calc(100% - 80px);
	width: calc(100% - 80px);
	margin: 0 !important;
}
.action-history-dates .icon-compare{
	height: calc(100% - 4px);
	margin-top: 2px;
	color: var(--white-color);
	box-shadow: 0 0 0 2px var(--light-bg-color);
	border-radius: var(--border-radius);
	flex-basis: 70px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 40px;
	cursor: pointer;
}
.action-history-dates .icon-compare:hover{
	background: var(--light-bg-color);
}

.placeholder_message_preview{
	border-radius: 20px;
	width: 100%;

	animation: loading 2s ease infinite;
}

.placeholder_message_preview.received{
	background: linear-gradient(-70deg, var(--message-color), var(--message-color), #366baf, var(--message-color));
	background-size: 300% 300%;
}

.placeholder_message_preview.sent{
	background: linear-gradient(-70deg, var(--dark-bg-color), var(--dark-bg-color), var(--bg-color), var(--dark-bg-color));
	background-size: 300% 300%;
}

.placeholder_message_preview.large{ height: 140px; min-height: 140px; }
.placeholder_message_preview.medium{ height: 80px; min-height: 80px; }
.placeholder_message_preview.small{ height: 40px; min-height: 40px; width: 45%;}

.placeholder_message_preview:nth-child(2){ animation-delay: 0.05s; }
.placeholder_message_preview:nth-child(3){ animation-delay: 0.1s; }
.placeholder_message_preview:nth-child(4){ animation-delay: 0.15s; }
.placeholder_message_preview:nth-child(5){ animation-delay: 0.2s; }
.placeholder_message_preview:nth-child(6){ animation-delay: 0.25s; }
.placeholder_message_preview:nth-child(7){ animation-delay: 0.3s; }
.placeholder_message_preview:nth-child(8){ animation-delay: 0.35s; }
.placeholder_message_preview:nth-child(9){ animation-delay: 0.4s; }
.placeholder_message_preview:nth-child(10){ animation-delay: 0.45s; }






.conversation-select{
	background: var(--dark-bg-color);
}






/* Mealplan logger */


.visible-logger{
	position: absolute;
	width:  100%;height: 100%;
	z-index: 21;
	overflow: hidden;
}

.drawer-body .visible-logger{
    position: fixed;
    top: 0;
    left: 0;
}

.visible-logger-container{
	width:  100%;
	height: 100%;
	overflow-y: scroll;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	font-size: var(--font-small);
	color: var(--white-color);
	padding-bottom: 75px;
}


.visible-logger-container::-webkit-scrollbar{
	width: 0px;
  height: 5px;
}

.visible-logger-container::-webkit-scrollbar-thumb{
	background: var(--light-bg-color);
	border-radius: 10px;
}

.visible-logger-container::-webkit-scrollbar-track{
	background: transparent;
}


.visible-logger p{
	position: absolute;
	font-weight: 400;
	letter-spacing: 0.01em;
	margin: 0 auto;
	width: 95%;
	max-width: 500px;
	padding: 0 10px;
	text-align: left;
	display: none;
	align-items: center;
	justify-content: center;
	top: 0;left: 0;bottom: 0;right: 0;
	height: 30px;
	margin:  auto;
	text-align: center;
}

.visible-logger p:last-child{
	display: flex;
}


/*.visible-logger p[data-completed="add_variety"]{
	color: var(--error-color);
}*/


.visible-logger p .icon-refresh{
	font-size: 18px;
	margin-right: 4px;
	margin-left: -10px;
}

.visible-logger p .icon-checkin{
	font-size: 16px;
	margin-right: 6px;
	margin-left: -10px;
}

.visible-logger:after{
	content: '';
	width: 100%;height: 100%;
	position: absolute;
	top: 0;left: 0;
	background: var(--bg-color);
	opacity: 0.8;
	z-index: -1;
}

p.main-adaptive-error {
    background: var(--bg-color);
    height: 100%;
    width: 100%;
    max-width: 100%;
    flex-direction: column;
    text-align: left;
}

p.main-adaptive-error .secondary_btn_outline{
	margin-top: 15px;
	max-width: 200px;
}

p.main-adaptive-error b{
	text-transform: capitalize;
	display: contents;
}

.main-adaptive-error .icon-info {
    font-size: 22px;
    position: relative;
    top: 3px;
    cursor: auto;
}

.main-adaptive-error .error-header{
	font-size: var(--font-sub);
	text-align: center;
}

.adaptive-progress-circle{
	height:  200px;
	width:  200px;
	position: absolute;
	top: 0;left: 0;right: 0;bottom: 0;
	margin: auto;
}
.adaptive-progress-circle circle {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.25s linear;
  stroke: var(--light-bg-color);
  stroke-width: 2px;
  margin:  0 auto;
}
.adaptive-progress-circle .adaptive-progress-circle-highlight {
  stroke: var(--primary-color);
  stroke-dashoffset: 565.487px;
}

/**** SIDEBAR *****/


.side_bar{
	width:var(--side-bar-width);
	position: relative;
	display: inline-block;
}

.side_bar-contain{
	display: block;
	position: fixed;
	width: var(--side-bar-width);
	height: 100%;
	top:0;left:0;
	background: var(--dark-bg-color);
	overflow-x: visible !important;
	overflow-y: scroll;
	direction: rtl;
	z-index: 999;
}

.light .side_bar-contain, .light .minimized .side_bar-minimized{
	border-right: 2px solid var(--light-bg-color);
}

.side_bar-contain::-webkit-scrollbar{
	width: 0px;
    height: 10px;
}

.side_bar-contain::-webkit-scrollbar-thumb{
	background: var(--light-bg-color);
	border-radius: 10px;
}

.side_bar-contain::-webkit-scrollbar-track{
	background: transparent;
}

.side_bar.minimized{
	width:50px;
}

.side_bar-minimized{
	display: none;
}

.minimized .side_bar-minimized {
	position: fixed;
	width: 50px;
	height: 100%;
	top:0;left:0;
	background: var(--dark-bg-color);
	direction: rtl;
	z-index: 999;
	display: flex;
    align-items: flex-start;
    padding-top: 20px;
}

.side_bar .minimize-btn {
	color: var(--white-color);
	cursor: pointer;
	position: relative;
	margin-right: -10px;
}

.minimized .side_bar-contain {
	display: none;
}

.side_bar.minimized .minimize-btn {
	background: var(--bg-color);
	width: 80%;
	padding:10px;
	border-radius: var(--border-radius);
	border-bottom-right-radius: 0;
	border-top-right-radius: 0;
}

.side_bar:not(.minimized) .minimize-btn {
	padding:10px;
	border-radius: var(--border-radius);
	border-bottom-left-radius: 0;
	border-top-left-radius: 0;
	overflow: hidden;
}

.side_bar:not(.minimized) .minimize-btn:after{
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--dark-bg-color);
    opacity: 0.25;
    z-index: -1;
}


.light .side_bar:not(.minimized) .minimize-btn:after{
	opacity: 1;
}


.main_content{
	width:calc(99% - var(--side-bar-width));
	padding: 40px 5% 5% 5%;
	display: inline-block;
	position: relative;
}


.main_content.side_bar-minimized{
	width:calc(99% - 50px);
	padding: 40px 5% 5% 5%;
}

.user_profile {
	width:15%;
	min-width: 30px;
    max-width: 60px;
    aspect-ratio: 1/1;
    background: var(--light-bg-color);
    background-size: cover;
    background-position: center;
    color: var(--white-color) !important;
    border-radius: 1000px;
    align-items: center;
    display: flex;
    justify-content: center;
	font-size: var(--font-head);
	cursor: pointer !important;
	margin-right:10px;
	position: relative;
}


.light .user_profile, .light .user_profile-group{
	color: var(--dark-bg-color) !important;
}


.user_profile.active_item{
	box-shadow: 0 0 0 2px var(--primary-color);
}

.user_details{
	flex-basis: calc(100% - 90px);
	width: calc(100% - 90px);
	text-align: left;
	position: relative;
	cursor: pointer;
}

#clients .user_details h2:after, #groups .user_details h2:after {
    content: "";
    position: absolute;
    width: 15%;
    height: 100%;
    background: linear-gradient(90deg, var(--dark-bg-color-transparent), var(--dark-bg-color));
    right: -2px;top: 0;
    z-index: 1;
}


#clients .active_module .user_details h2:after, #groups .active_module .user_details h2:after{
    background: linear-gradient(90deg, var(--bg-color-transparent) 0%, var(--bg-color) 100%);
}

.user_details h2{
	padding-bottom: 4px;
	font-weight: 400;
	text-transform: capitalize;
	letter-spacing:0.005em;
}


.quick_response_active:after{
	display: none;
}

.user_latest_message, .group_latest_message, #inactive .user_details p {
    max-height: calc(var(--font-copy) + 10px);
    white-space: nowrap;
/*    overflow: hidden;*/
    overflow-x: clip;
    width: 100%;
    cursor:pointer;
    line-height: 100%;
}

.user_latest_message span:not(.unread), .group_latest_message span:not(.unread), #inactive .user_details p {
	opacity: 0.5;
}

.quick_response_active .user_latest_message{
	white-space: pre-wrap;
	display: contents;
}

.user_latest_checkin {
	display: none;
}


#clients[data-sort-order="checkins"] .user_latest_checkin{
	display: flex;
}

#clients[data-sort-order="checkins"] .user_latest_message{
	display: none;
}

.user_latest_checkin:before{
	font-family: 'icons' !important;
	speak: never;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
  
	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;

	font-size: var(--font-sub);
	margin-right: 7px;
	display: inline-block;
}

.user_latest_checkin[data-completed="true"]:before{ content: "\e908" }
.user_latest_checkin[data-completed="scheduled"]:before{ content: "\e907" }
.user_latest_checkin[data-completed="false"]:before{ content: "\e91e" }

.user_latest_checkin[data-completed="true"]{ opacity: 0.5; }
.user_latest_checkin[data-completed="scheduled"]{ opacity: 0.5; }
.user_latest_checkin[data-completed="false"]{ color: var(--error-color); font-weight: 600; }

#groups .active_module .group_latest_message{
	display: none;
}

.module_title{
	display: flex;
	justify-content: space-between;
	align-items: center;
	text-transform: uppercase;
	font-weight: 900;
	direction: ltr;
	padding: 20px 15px;
/*	padding-top: 40px;*/
	color: var(--white-color);
}


#coach-name{
	font-size: var(--font-head);
}

.dashboard_module:not(.active_module) #coach-code{
	display: none;
}


.unread {
    width: 9pt;
    height: 9pt;
    display: inline-block;
    background: var(--message-color);
    border-radius: 100px;
    margin-right: 10px;
}





/*** CUSTOM DROPDOWN ***/

.select_title{
	position: relative;
	display: inline-block;
}

.select_title input[type=checkbox], .select_title input[type=radio]{
	display: none;
}

.select_title input[type=checkbox] ~ label:hover{
	opacity:var(--focus-opacity);
	cursor: pointer;
}

.select_title input[type=checkbox] ~ label:after{
    content: "\e901";
    font-family: 'icons' !important;
    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transform: rotate(90deg);
    position: absolute;
    right: -30px;
}

.select_title input[type=checkbox]:checked ~ label{
	opacity:var(--focus-opacity);
}


.select_title-dropdown{
	display: none;
	position: absolute;
	top:30px;
	left:0;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
	padding: 0 15px;
	border-radius: var(--border-radius);
	z-index: 9001;
	width: 400px;
	overflow: hidden;
	overflow-y: scroll;
	max-height: 180px;
}

/*.select_title-dropdown:after{
	content: '';
	width: 100%;
	height: 100%;
	background: var(--bg-color);
	opacity: 0.75;
	position: absolute;
	top: 0;left: 0;
}*/

.select_title input[type=checkbox]:checked ~ .select_title-dropdown {
	display: block;
}
.select_title-dropdown span:last-child label{
	border-bottom:  none;
}

.select_title-dropdown label{
    font-weight: 300;
    text-transform: capitalize;
    display: flex;
    justify-content: space-between;
    padding: 15px 0;
    border-bottom: 1px solid var(--light-bg-color);
    margin: 0;
    cursor: pointer;
    position: relative;
    z-index: 3;
    letter-spacing: 0.03em;
}

.select_title-title {
    margin: 10px 0 20px 0;
    display: block;
    opacity: var(--focus-opacity);
}

.select_title input[type=radio] ~ label span{
	position: relative;
}

.select_title-dropdown label span:nth-child(2){
	opacity:var(--focus-opacity);
	text-align: right;
}

.select_title-dropdown label:hover span:nth-child(1){
	opacity: var(--focus-opacity);
}

.select_title input[type=radio]:checked ~ label span:nth-child(1){
	opacity:1 !important;
	padding-left: 30px;
}

.select_title input[type=radio]:checked ~ label span:nth-child(1):before{
    content: "\e908";
    font-family: 'icons' !important;
    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position: absolute;
    font-size: 21px;
    left:0;
}

.select_title input[type=radio]:checked ~ label span:nth-child(1){
	color: var(--primary-color);
	font-weight: 900;
}


.fake_settings_select label:hover{
	opacity: 1 !important;
}

.fake_settings_select{
	font-size: var(--font-copy);
	color: var(--white-color);
	width: 100%;
	background: var(--light-bg-color);
	border-radius: var(--border-radius);
	padding: 20px;
	margin: 25px 0;
	line-height: 200%;
	cursor:pointer;
}
.fake_settings_select input[type=checkbox] ~ label:after{
	display: none;
}

.fake_settings_select .select_title-dropdown{
	top: 75px;
}

/** end **/










/*** COACH PAGES ***/

.page{
	display: none;
}

.active_page{
	display: block;
}

.page_header{
	display: flex;
	justify-content: space-between;
	align-items: center;
    padding-bottom: 40px;
    border-bottom: 1px solid var(--light-bg-color);
    margin-bottom: 20px;
}

.page_header-desc{
	flex-basis: 70%;
	max-width: 600px;
}

.page_header-desc .secondary_btn{
	display:  inline-block;
}

.page_header-desc p{
	max-width:350px;
}

.page_header-desc p.long-desc{
	max-width:100%;
}

.page_header h1{
	font-size: 45pt;
	font-weight: 900;
	letter-spacing:0.01em;
	margin-bottom: 15px;
	text-transform: capitalize;
}

h1 .icon-info{
	font-size: var(--font-head) !important;
}

.page_btn {
    max-width: 300px;
    margin: 0;
    text-decoration: none;
}

.page_content-header{
	display: block;
	width: 100%;
	font-size: var(--font-sub);
	padding-bottom: 40px;
    border-bottom: 1px solid var(--light-bg-color);
    display: flex;
    justify-content: space-between;
}

.page_content-footer{
	display: block;
	width: 100%;
	font-size: var(--font-sub);
	padding-top: 40px;
	margin-top: 200px;
    border-top: 1px solid var(--light-bg-color);
    display: flex;
    justify-content: space-between;
}



/*** MAIN DRAWER ***/

#main-drawer, #double-drawer{
    z-index: 9001;
}

.drawer-content{
	height: 100%;
	width: 550px;
	position: fixed;
	top:0;right: 0;
	background:var(--bg-color);
    transform: translateX(550px);
    transition: var(--transition);
    z-index: 9002;
    overflow: hidden;
}

.drawer-overlay{
	width: 100%;
	height: 100%;
	background: var(--dark-bg-color);
	position: fixed;
	top:0;left:0;
	opacity:0;
    transition: var(--transition);
	pointer-events: none;
	z-index:9001;
}

#main-drawer.active_drawer .drawer-overlay, #double-drawer.active_drawer .drawer-overlay{
	opacity: 0.8;
	pointer-events: all;
}

#main-drawer.active_drawer .drawer-content, #double-drawer.active_drawer .drawer-content{
	transform: translateX(0);
}

.drawer-body {
    padding: 25px 25px 100px 25px;
    margin-top: 15px;
    position: relative;
    overflow: hidden;
    overflow-y: scroll;
    height: calc(100% - 130px);
}

.drawer-body.full-height-drawer{
	height:  100% !important;
	margin-top: 30px !important;
}

.drawer-body.full-height-drawer .drawer-header{
	margin-top:  -30px;
}

.drawer-body::-webkit-scrollbar{
	width: 9px;
    height: 10px;
}

.drawer-body::-webkit-scrollbar-thumb{
	background: var(--light-bg-color);
	border-radius: 10px;
}

.drawer-body::-webkit-scrollbar-track{
	background: transparent;
}

/*.drawer-body .switch{
	margin: 25px 0;
}*/

.drawer_btn-back{
	margin-top: -25px;
}

.drawer-body .advanced-options-container{
	display: block;
	padding: 0 3px !important;
}

.drawer_btn-back .back{
	margin: 0;
}

.drawer-header {
    padding: 0 30px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.drawer-header .icon-group{
    font-size: 63px;
    margin-right: 11px;
}

.drawer-header .icon-schedule{
    font-size: 31px;
    margin-right: 5px;
}

.drawer-header .icon-smart{
    font-size: 31px;
    margin-right: 5px;
}

.drawer-header .icon-mealplans{
    font-size: 31px;
    margin-right: 5px;
    margin-bottom:  3px;
}

.drawer-header .icon-user{
    font-size: 26px;
    margin-right: 5px;
}

.drawer-header .icon-search{
    font-size: 30px;
    margin-right: 5px;
}

.drawer-header .icon-message{
    font-size: 26px;
    margin-right: 5px;
}

.drawer-header .icon-progress{
    font-size: 26px;
    margin-top: 3px;
    margin-right: 9px;
}

.drawer-header .icon-copy{
    font-size: 18px;
    margin-top: 3px;
    margin-right: 9px;
}

.drawer-header .icon-arrow-right{
    font-size: 26px;
    margin-top: 3px;
    margin-right: 9px;
}

.drawer-header .icon-file{
    font-size: 34px;
}

.drawer-header .icon-texts{
    font-size: 34px;
    margin-right: 7px;
}

.drawer-header .icon-edit{
	font-size: 36px;
    margin-right: 6px;
}

.drawer-header .icon-workouts{
    font-size: 26px;
    margin-top: 3px;
    margin-right: 9px;
}

.drawer-header .icon-more {
    margin-right: 8px;
    font-size: 32px;
}

.drawer-header .icon-programs {
    margin-right: 8px;
    font-size: 32px;
}

.drawer-header .icon-checkin {
    font-size: 30px;
    margin-right: 10px;
}

.drawer-header .icon-refresh {
    font-size: 30px;
    margin-right: 8px;
}

.drawer-header .icon-link{
    font-size: 26px;
    margin-top: 3px;
    margin-right: 9px;
}

.drawer-header .icon-payment{
    font-size: 26px;
    margin-right: 9px;	
}

.drawer-header h2{
	display: flex;
    align-items: center;
    justify-content: center;
}

.drawer_error{
    width: calc(100% - 50px);
    padding: 10px;
    background: var(--error-color);
    color: var(--white-color);
    border-radius: var(--border-radius);
    margin: auto;
    text-align: center;
    position: absolute;
    opacity:0;
    transform: translateY(-100px);
    top: 25px;left: 0;right: 0;
	transition: var(--transition);
	z-index: 20;
	pointer-events: none;
}

.drawer_error.active_drawer_error{
	transform: translateY(0px);
	opacity:1;
}

.drawer_error.inactive_drawer_error{
	opacity: 0;
}

.drawer_thumb{
	width:  100%;
	height: 200px;
	background-position: center;
	background-size: cover;
	display: block;
	cursor: pointer;
}

.drawer_thumb:hover{
	opacity: var(--focus-opacity);
}

.drawer-body textarea, .drawer-body input, .drawer-body .btn{
	position: relative;
	z-index: 10;
	margin-bottom: 10px;
}

.search_input input{
	margin-bottom: 0;
}

.error_input{
    box-shadow: 0 0 0 1px var(--error-color);
}


.drawer-desc{
	text-align: left;
	font-size: var(--font-small);
	margin: 10px 0 5px 0;
	color: var(--white-color);
    font-weight: 300;
}

.drawer-desc.add-bottom-margin{
	margin-bottom: 10px;
}

.drawer-label{
	display: block;
}

textarea.drawer-large_textbox{
	height: 300px;
    width: 100%;
    border: none;
    outline: none !important;
    padding: 13px 20px;
    font-size: var(--font-copy);
	resize: none;
	border-radius: var(--border-radius);
	margin: 10px 0;
}


textarea.drawer-med_textbox{
	height: 150px;
    width: 100%;
    border: none;
    outline: none !important;
    padding: 13px 20px;
    font-size: var(--font-copy);
	resize: none;
	border-radius: var(--border-radius);
	margin: 10px 0;
}

textarea.drawer-small_textbox{
	height: 75px;
    width: 100%;
    border: none;
    outline: none !important;
    padding: 13px 20px;
    font-size: var(--font-copy);
	resize: none;
	border-radius: var(--border-radius);
	margin: 10px 0;
}

.file_upload_label{
	width: calc(100% - 4px);
	margin: 0 auto;
	border-radius: var(--border-radius);
	color: var(--white-color);
	margin-bottom: 20px;
	box-shadow: 0 0 0 2px var(--light-bg-color);
	padding: 15px;
	text-align: left;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	font-size: var(--font-copy);
	cursor:pointer;
}

.file_upload_label:hover{
	background:var(--dark-bg-color);
	box-shadow: 0 0 0 2px var(--dark-bg-color);
}

.file_upload_label .icon-media, .file_upload_label .icon-file{
	font-size: 34px;
}


.drawer-progress{
	height: 3px;
	background: var(--primary-color);
	top:0;left:0;
	position: absolute;
	transition: var(--transition);
}


#video-file-label img {
    max-width: 70px;
    margin-right: 10px;
}

#video-file-label .icon-media, #file-label .icon-media{
	margin-right: 5px;
	font-size: 30px;
}

.static-drawer-warning{
	color: var(--error-color);
	font-weight: 600;
	display: block;
	width: 100%;
	position: relative;
	padding: 20px;
	border-radius: var(--border-radius);
	overflow: hidden;
}

.static-drawer-warning:after{
	content: '';
	position: absolute;
	top: 0;left:0;
	width: 100%;height:100%;
	background: var(--error-color);
	opacity: 0.2;
}


/*** MINI DRAWER ***/

#mini-drawer {
    position: fixed;
    right: 0;
    top: 0;
    height: 100%;
    background: var(--dark-bg-color);
    z-index: 9002;
    padding: 10px;
    display:  flex;

    transform: translateX(80px);
    transition: var(--transition) 0s;

		opacity: 0;
}

.mini_drawer-nav{
	  display: flex;
    flex-direction: column;
    align-items: center;
}

#mini-drawer.mini-active{
	opacity: 1;
	transform: translateX(-550px);
	transition: 0.4s ease-in-out 0s;
}

#mini-drawer .mini_drawer-nav .icon{
	color:  var(--white-color);
	font-size: 20pt;
	margin-bottom: 35px;
	cursor: pointer;
}

#mini-drawer .user_profile {
    width: 50px;
    height: 50px;
    min-width: 50px;
    min-height: 50px;
    margin-bottom: 35px;
    margin-right: 0;
    font-size:  20pt;
}

.mini_drawer-content{
	width: 0px;
	transition: var(--transition);
	overflow: hidden;
	position: relative;
}

.mini_drawer-content.active_mini{
	width: 385px;
	padding-left: 10px;
}

.light #mini-drawer{
	padding: 0;
}

.light .mini_drawer-content{
	padding: 10px 0;
	background: var(--bg-color);
}

.light .active_mini.mini_drawer-content{
	padding: 10px 10px;
}

.light .mini_drawer-nav{
	padding: 10px;
}

.icon.active_mini-module{
	color:  var(--primary-color) !important;
}

.mini_container{
	width: 375px;
	height: 100%;
	overflow: hidden;
	transition: var(--transition);
	pointer-events: none;
	opacity: 0;
	position: absolute;
	top: 0;left: 10px;
	transform: translateX(-115px);
}

.active_mini-container{
	pointer-events: all;
	opacity: 1;
	transform: translateX(0);
}

.mini_container .messages-conversation{
	height: 100%;
	padding-right: 0;
}

.mini_container .message-response_container{
	background: transparent;
}


.mini_container .list_metrics{
	padding:  0 2px;
}
.mini_container .list_metrics .metric_data{
    box-shadow: 0 0 0 2px var(--light-bg-color);
}

.mini_container .list_metrics .active_metric_preview{
	background: transparent !important;
}

.mini_container .preview_active .list_metrics{
	display: none;
}

.mini_container .selected_metric-contain{
	position: absolute;
	top: 0;left: 0;
	padding: 0 7px;
	height: 100%;
	width:  100%;
	background: var(--dark-bg-color);
	display: none;
	z-index: 2;
}

.mini_container .selected_metric-contain.show_metric_preview, 
.mini_container .show_metric_preview .delete_btn{
	display: block;
}

.mini_container .selected_metric-contain .btn{
	display: none;
}
.mini_container .selected_metric-contain .back{
	margin: 0;
}
.mini_container .selected_metric-contain .back:after{
	background: var(--light-bg-color);
}

.profile_mini-container{
	height: 100%;
	padding: 0 2px;
	overflow: hidden;
	overflow-y: scroll;
}

.profile_mini-container::-webkit-scrollbar {
    width: 4px !important;
    height: 0px !important;
}

.profile_mini-container::-webkit-scrollbar-thumb{
	background: var(--bg-color);
	border-radius: 10px;
	cursor: pointer;
}

.profile_mini-container::-webkit-scrollbar-track {
    background: transparent;
}


.profile_mini-container .settings_item{
	flex-basis: 100%;
	max-width: 100%;
}

.profile_mini-container .settings_item.type_header{
	margin-bottom: 15px;
}
.profile_mini-container .settings_block{
	padding: 25px 0 25px 0;
}

.profile_mini-container .settings_nav,
.profile_mini-container .secondary_btn_outline,
.profile_mini-container .auto_message_headers,
.profile_mini-container .delete_btn{
	display: none;
}

.profile_mini-container .auto_message-container{
	pointer-events: none;
	flex-wrap: wrap;
}

.profile_mini-container .auto_message-container .auto_message{
	margin-top: 10px;
	flex-basis: 100%;
}

.profile_mini-container .auto_message-item.auto_trigger{
	padding-left: 0;
}


.profile_mini-container .checkin_item, .profile_mini-container .recurring_item{
	pointer-events: none;
}


.profile_mini-container .multi_block, .profile_mini-container .macro_widget-custom{
	background: var(--bg-color);
}

.progress_mini-container{
	height: 100%;
	padding: 0 2px;
	overflow: hidden;
	overflow-y: scroll;
}

.progress_mini-container::-webkit-scrollbar {
    width: 4px !important;
    height: 0px !important;
}

.progress_mini-container::-webkit-scrollbar-thumb{
	background: var(--bg-color);
	border-radius: 10px;
	cursor: pointer;
}

.progress_mini-container::-webkit-scrollbar-track {
    background: transparent;
}




/*** DOUBLE DRAWER ***/

#double-drawer .drawer-content{
	width: 700px;
	transform: translateX(700px);
}


#double-drawer .drawer-body{
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}

.drawer-content .drawer-col{
	flex-basis: 49%;
}


/*** CONTENT QUEUE ***/

#upload-queue{
	position: fixed;
    bottom: 0;right:20px;
    z-index: 101;
    max-width: 350px;
	min-width: 236px;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
	overflow: hidden;
	border-top-left-radius: var(--border-radius);
	border-top-right-radius: var(--border-radius);
}

#upload-queue:after{
	content: '';
	position: absolute;
	width:100%;height:100%;
	top:0;left:0;
	background-color: var(--light-bg-color);
	opacity: var(--focus-opacity);
	z-index: -1;
}


#upload-queue[data-content="0"]{ display: none; }


.upload_queue-header {
    color: var(--white-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
	position: relative;
	background: var(--light-bg-color);
	border-top-left-radius: var(--border-radius);
	border-top-right-radius: var(--border-radius);
	cursor: pointer;
}

.queue-collapsed .upload_queue-header .icon-arrow-down{
	transform: rotate(-90deg);
}

.queue-collapsed .upload_queue-header{
	background: transparent;
}

.upload_queue-header-title{
	display: flex;
	align-items: center;
	gap: 10px;
}

.queue-collapsed .spinner{
    display: initial;
    position: relative;
    top: 0;left: 0;
    border-top-color: var(--white-color);
}

#upload-queue.queue-collapsed:before{
    content: attr(data-content);
    top: 0;bottom: 0;right: 35px;
    position: absolute;
    font-size: var(--font-small);
    z-index: 1;
    height: calc(var(--font-small) + 4px);
    color: var(--white-color);
    background: var(--bg-color);
    padding: 2px 7px;
    border-radius: var(--border-radius);
    margin: auto;
}


.upload_queue-items{
	display: flex;
	flex-direction: column;
	gap: 5px;
	align-items: end;
	max-height: 500px;
	overflow-y: scroll;
	padding: 15px 15px 20px 15px;
}

.upload_queue-items::-webkit-scrollbar {
    width: 9px;
    height: 10px;
}
.upload_queue-items::-webkit-scrollbar-thumb {
    background: var(--light-bg-color);
    border-radius: 10px;
}
.upload_queue-items::-webkit-scrollbar-track {
    background: transparent;
}

.queue-collapsed .upload_queue-items {
    height: 0;
    padding: 0 15px 0 15px;
}



.upload_queue-item{
	width: 100%;
	background-color: var(--light-bg-color);
	border-radius: var(--border-radius);
	position: relative;
	overflow: hidden;
	max-height:0;
    transition: var(--transition);
    box-shadow: 0 7px 30px 0 var(--dark-bg-color);
	padding: 0 20px;
    display: flex;
    gap: 10px;
	flex-shrink: 0;
	align-items: center;
}



.upload_queue-item.queued-active{
	max-height: 300px;
	padding: 15px 20px;
}

.queued-header{
	font-size: var(--font-small);
	transition: var(--transition);
}

.queued-complete .queued-header{
	opacity: 0;
}

.queued-icon {
    color: var(--white-color);
    font-size: var(--font-copy);
}

.queued-progress{
    height: 100%;
    background: var(--primary-color);
    top: 0;
    left: 0;
    position: absolute;
    transition: var(--transition);
	opacity: var(--focus-opacity);
}

.queued-complete .queued-progress{
	opacity: 1.0;
}

.queued-complete .icon-checkin{
	position: absolute;
    color: var(--bg-color);
    left: 0;top: 0;bottom: 0;
    margin: auto;
    font-size: var(--font-sub);
    z-index: 1;
    display: flex;
    align-items: center;
    padding: 0 10px;
}

.upload_queue-item:before {
    content: "Upload Successful!";
    position: absolute;
    left: 48px;
    font-weight: 900;
    color: var(--bg-color);
    z-index: 1;
    font-size: var(--font-small);
	opacity: 0;
	visibility: hidden;
	transition-delay: 0.25s;
	transition: var(--transition);
}

.upload_queue-item.queued-complete:before{
	visibility: visible;
	opacity: 1;
}


@media all and (max-width: 1080px) {
	#upload-queue{
		left:0;right:0;bottom: 90px;
		margin: auto;
		width: 90%;
		max-width: 90%;
	}
}

/*** GROUPS ****/

.users-in-group{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	margin-top: 20px;
	color: var(--white-color);
    font-size: var(--font-copy);
    letter-spacing: 0.01em;
    font-weight: 300;
}

.user_in_group{
	flex-basis: 16.5%;
	text-align: center;
	margin: 7px;
	position: relative;
}

.user_profile-group .icon-minus{
	color: var(--white-color);
	margin: 0 10px;
	position: absolute;
	top:0;right:-20px;
	font-size:25pt;
    border-radius: 1000px;
    align-items: center;
    display: flex;
    justify-content: center;
    background:  var(--bg-color);
}


.user_profile-group{
    width: 70px;
    height: 70px;
    background: var(--light-bg-color);
    background-size: cover;
    background-position: center;
    color: var(--white-color) !important;
    border-radius: 1000px;
    align-items: center;
    display: flex;
    justify-content: center;
	font-size: 30pt;
	margin:10px auto;
	cursor:pointer;
	position: relative;
}



.user_profile-group:hover .icon-minus{
	font-size: 30pt;
    width: 70px;
    height: 70px;
    background: var(--light-bg-color);
    color: var(--error-color);
    top:0;right:0;left:0;bottom:0;
    margin: auto;
}


.add_user {
    display: flex;
    justify-content: flex-start;
    width: 100%;
    align-items: center;
    padding: 15px 0;
    border-radius: var(--border-radius);
    overflow: hidden;
    position: relative;
    cursor:pointer;
}

.add_user:after{
    border-bottom: 1px solid var(--light-bg-color);
    content: "";
    width: 100%;
    position: absolute;
    bottom: 0;
    margin: auto;
}


.add_user:hover{
	background: var(--light-bg-color);
}

.add_user .user_profile-group{
	margin: 0 10px 0 10px;
}


.add_user .icon-plus {
    color: var(--white-color);
    font-size: 27pt;
    height: 27pt;
    position: absolute;
    top:0;bottom:0;right: 10px;
    margin: auto;
}



.delete_btn{
	font-weight: 900;
	color: var(--error-color);
	cursor:pointer;
    text-align: center;
    margin: 0 auto;
    font-size: var(--font-small);
    padding: 5px;
    margin: 70px auto 20px auto;
    border-radius: var(--border-radius);
}

.delete_btn:hover{
	opacity: var(--focus-opacity);
}

.client_action-btns{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin: 70px 0 120px 0;
	gap: 10px;
}

.client_action-btns .secondary_btn_outline{
    max-width: 400px;
    display: inline-flex;
    margin: 0;
    text-align: center;
    justify-content: center;
}

.delete_outline {
    box-shadow: 0 0 0 2px var(--error-color);
    color: var(--error-color);
    font-weight: 800;
}

.delete_outline:hover{
	background: var(--error-color);
	color: var(--bg-color);
}

#group-welcome-message{
	background: var(--message-color);
	color: var(--message-fg-color)
}

textarea#group-welcome-message::placeholder {
	color: var(--message-fg-color)
}



/****** CONFIRM PASSWORD ******/

#confirm-login{
	position: fixed;
	top:0;left:0;
	width: 100%;
	height: 100%;
	display: none;
	z-index: 9001;
	justify-content: center;
	align-items: center;
}

#confirm-login.active_confirm{
	display:flex;
}

#confirm-token{
	margin-bottom: 30px;
}


#confirm-login:after{
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	top:0;left:0;
	background:var(--dark-bg-color);
	opacity:0.8;
}

#confirm-login p{
	font-size: var(--font-copy);
    letter-spacing: 0.05em;
    line-height: 150%;
    text-align: center;
    margin-bottom: 20px;
}

.confirm-btns{
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.confirm-btn{
	padding: 10px 15px;
	width: 100%;
	border-radius:var(--border-radius);
	text-align: center;
	cursor:pointer;
	font-weight: 700;
}

.confirm-btn:hover{
	opacity:0.5;
}

#deny-confirmation{
	background: var(--light-bg-color);
	color: var(--white-color);
	margin-right: 20px;
}

#submit-confirmation{
	background: var(--primary-color);
}

.login-step{
	display: none;
}

.active-step{
	display: block;
}

.login-step p{
	margin-bottom: 40px;
}


#error-box {
    background: #652f39;
    border-radius: var(--border-radius);
    padding: 10px 25px;
    color: #de5359;
    line-height:150%;
}

#error-box a.simple-link{
	color: #de5359;
	text-decoration: underline;
}


.terms-contain{
	background: var(--light-bg-color);
	border-radius: var(--border-radius);
	padding: 20px;
	text-align: left;
	font-size: var(--font-small);
	color: var(--white-color);
	max-height: 300px;
	overflow: auto;
}

.terms-contain p, .terms-contain ul, .terms-contain a, .terms-contain ol{
	font-size: var(--font-small);	
}

.terms-contain p{
	margin: 10px 0;
}



#create-account-overlay {
    position: fixed;
    z-index: 90001;
    top: 0;
    left: 0;
    width: 100%;
    background: var(--dark-bg-color);
    height: 100vh;
	display: flex;
    justify-content: center;
    flex-direction: column;
}

#create-account-overlay h2{
	margin-bottom: 20px;
	font-size: 2em;
}

#create-account-overlay .login-step{
    margin: 0 auto;
    width: 100%;
    max-width: 460px;
    text-align: center;
}

#create-account-overlay #error-box{
    margin: 20px auto;
    width: 100%;
    max-width: 460px;
    text-align: center;
}

.nameInputs{
	display: flex;
	gap: 10px;
	margin: 10px 0;
}

#create-account-overlay #phoneNumber{
	margin: 10px 0 !important;
}


/****** INFO ******/

#info-box, #onboarding-journey-box{
	position: fixed;
	top:0;left:0;
	width: 100%;
	height: 100%;
	display: none;
	z-index: 9002;
	justify-content: center;
	align-items: center;
}

#info-box.active_info_box, #onboarding-journey-box.active_info_box{
	display:flex;
}

.info_contain{
	position: relative;
	z-index: 10;
	width: 90%;
	max-width: 500px;
	height: auto;
	background: var(--bg-color);
	padding: 20px;
	border-radius: var(--border-radius);
}


#info-box:after, #onboarding-journey-box:after{
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	top:0;left:0;
	background:var(--dark-bg-color);
	opacity:0.8;
}

#info-msg{
	font-size: var(--font-copy);
    letter-spacing: 0.05em;
    line-height: 150%;
    text-align: left;
    height: 100%;
	max-height: 400px;
    overflow-y: scroll;
    padding-right: 10px;
}

#info-msg::-webkit-scrollbar-thumb{
	background: var(--light-bg-color);
	border-radius: 10px;
}
#info-msg::-webkit-scrollbar {
    width: 5px !important;
    height: 0px !important;
}
#info-msg::-webkit-scrollbar-track {
    background: transparent;
}


#info-box.active_tutorial .info_contain{
	max-width: 760px;
	background: var(--dark-bg-color)
}

#info-box.active_tutorial #info-msg{
	padding-right: 0;
	height: auto;
	max-height: fit-content;
}

.activity_level_info{
	text-align: left;
}
.activity_level_info h3{
	font-size:  var(--font-sub);
	font-weight:  900;
}

.activity_level_info p span{
	display: block;
}
.activity_level_info p{
	margin:  25px 0;
}

.activity_level_info p b{
	padding:  15px;
	background:  var(--dark-bg-color);
	margin:0 10px 15px 0;
	border-radius:  var(--border-radius);
	display:  block;
}

#onboarding-journey-box .info_contain{
	max-width: 800px;
	text-align: center;
	padding-top: 30px;
    overflow-y: scroll;
    max-height: 90%;
}

#onboarding-journey-box .btn{
	margin: 20px auto;
	max-width: fit-content;
	padding: 15px 30px !important;
	min-width: 280px;
	position: sticky;
	z-index: 10;
	bottom:0;left:0;
}

#onboarding-journey-box .btn.btn_outline{
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 7px 30px !important;
	text-align: left;
}

#onboarding-journey-box .onboarding-step[data-step="2"] .btn.btn_outline{
	padding: 15px 30px !important;
    text-align: center !important;
    justify-content: center;
	position: relative;
}

#onboarding-journey-box .btn .icon-share{
	font-size: 22pt;
}

#onboarding-journey-box h2{
	font-weight: 800;
	font-size: var(--font-head);
	max-width: 610px;
    margin: 20px auto;
}

#onboarding-journey-box p{
	margin:0 auto 20px auto;
	max-width: 600px;
}

.onboarding-step {
	display: none;
}

.onboarding-step.active-step{
	display: block;
}


@media all and (max-width: 1080px) {
	#onboarding-journey-box .info_contain {

	}

	.onboarding-step:after {
	    content: '';
	    position: sticky;
	    width: 100%;
	    height: 120px;
	    bottom: -25px;
	    margin-top: -67px;
	    left: 0;
	    background: linear-gradient(0deg, var(--bg-color), var(--bg-color-transparent));
	    display: block;
	    pointer-events: none;
	}
}

/****** WARNING ******/



.warning-box{
	position: fixed;
	top:0;left:0;
	width: 100%;
	height: 100%;
	display: none;
	z-index: 9002;
	justify-content: center;
	align-items: center;
}

.warning-box.active_warning{
	display: flex;
}


.warning_contain{
	position: relative;
	z-index: 10;
	width: 90%;
	max-width: 500px;
	height: auto;
	background: var(--bg-color);
	padding: 20px;
	border-radius: var(--border-radius);
	max-height: 90%;
	overflow-y: scroll;
}

.warning_overlay{
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	top:0;left:0;
	background:var(--dark-bg-color);
	opacity:0.8;
}

#warning-msg{
	margin-bottom: 25px;
	font-size: var(--font-sub);
    letter-spacing: 0.01em;
    line-height: 150%;
    color: var(--white-color);
}

#warning-msg p{
	line-height: 120%;
}

#warning-msg .warning-head{
	color: var(--error-color);
	font-size:  var(--font-sub);
	font-weight: 900;
	display:  flex;
	align-items: center;
	padding-bottom: 10px;
}

#warning-msg .icon-info, #warning-msg .icon-info:hover{
	padding-left: 0;
	transform: rotate(180deg);
	opacity: 1 !important;
	cursor: default;
	font-size:  42px !important;
}

#warning-msg .warning-small{
    font-size: var(--font-copy);
    line-height: 135% !important;
    display: inline-block;
}

.warning-btns{
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.warning-btn{
	padding: 10px 15px;
	width: 100%;
	border-radius:var(--border-radius);
	text-align: center;
	cursor:pointer;
	font-weight: 700;
}

.warning-btn:hover{
	opacity:0.5;
}


#warning-deny, .warning-btn-deny{
	background: var(--light-bg-color);
	color: var(--white-color);
}

#warning-confirm{
	background: var(--primary-color);
	color: var(--bg-color);
	margin-left: 20px;
}

.warning-btns-tripple{
	align-items: unset;
	gap: 10px;
	margin-top: 30px;
}

.warning-btns-tripple .warning-btn{
    align-items: center;
    display: inline-flex;
    justify-content: center;
	padding: 7px 15px;
    line-height: 100%;
    position: relative;
}

.warning-btns-tripple .warning-btn .spinner{
	border-top-color: var(--primary-color);
}

.warning-btns-tripple .warning-btn-secondary{
	box-shadow: 0 0 0 2px var(--primary-color);
	color: var(--primary-color);
}

.warning-btns-tripple .warning-btn.warning-btn-secondary:not(.loading):hover{
	background: var(--primary-color);
	color: var(--bg-color);
	opacity: 1;
}

.warning-error-text{
	color: var(--error-color);
}


.warning-error-box{
	color: var(--bg-color);
	background: var(--error-color);
	padding: 10px 15px;
	border-radius: var(--border-radius);
    font-weight: 800;
    text-align: center;
    margin-bottom: 10px;
}



/****** SETTINGS PAGE ******/

.settings_nav{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;

}

.settings_nav-item{
	flex: 1;
	min-width: 120px;
	padding: 20px;
	background: var(--light-bg-color);
	border-radius: var(--border-radius);
	color: var(--primary-color);
	text-align: center;
	cursor:pointer;
	font-size: var(--font-copy);
}

.light .settings_nav-item{
	background: transparent;
	box-shadow: 0 0 0 2px var(--light-bg-color);
}

.light .settings_nav-item:hover{
	background: var(--light-bg-color);
}

.settings_nav-item .icon{
	display: block;
	margin: 0 auto;
	font-size: 42pt;
	margin-bottom: 10px;
}

.settings_nav-item:hover{
	background: transparent;
}

.settings_block{
	padding: 60px 0 80px 0;
    border-bottom: 1px solid var(--light-bg-color);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    row-gap: 20px;
}


.settings_item{
	flex-basis: 48%;
	max-width: 48%;
	text-align: left;
}

.settings_item h2{
	font-weight: 900;
	margin-bottom: 25px;
	font-size: var(--font-head);
}

.settings_item.type_header p{
	max-width: 350px;
	margin-bottom: 20px;
}

.type_input label, .type_select label{
	margin-bottom: 10px;
	color: var(--white-color);
	opacity: var(--focus-opacity);
}

.type_input, .type_select{
	display: flex;
  margin-top: 30px;
  position: relative;
  flex-direction: column;
  align-self: flex-start;
}


.type_select.type_select-double{
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}

.type_select.type_select-double label,
.type_select.type_select-double select{
  width: 48%;
}


.option_select {
    display: flex;
    justify-content: space-between;
    margin-top: 5px;
    flex-wrap: wrap;
}

.option_select label{
    padding: 20px 0;
    color: var(--white-color);
    font-size: var(--font-copy);
    border-radius: var(--border-radius);
    box-shadow: 0 0 0 2px var(--light-bg-color);
    margin: 10px 0;
    display: block;
    cursor:pointer;
    width: 100%;
}

.option_select input:checked ~ label{
	box-shadow: 0 0 0 2px var(--primary-color);
	color: var(--primary-color);
}

.option_select span{
	flex-basis:32%;
	text-align: center;
}


.save_custom{
    background: var(--primary-color);
    border-radius: var(--border-radius);
    color: var(--bg-color);
    position: absolute;
    right: 5px;bottom: 5px;
    padding: 0 15px;
    cursor: pointer;
    display: flex;
    height: calc(100% - 40px);
    align-items: center;
    max-height: 40px;
}

.save_custom.error{
	background: var(--error-color);
	color: var(--white-color);
}

.fake_label{
	margin: 25px 0 10px 0;
	font-weight: 200;
    font-size: var(--font-copy);
    flex-basis: 100%;
    max-width: 100% !important;
}


.save_global_nutriton-btn {
    padding: 3px 20px;
    width: auto;
    margin:  0 0 0 5px !important;
    opacity: 0;
    pointer-events: none;
}

.save_global_nutriton-btn.has_unsaved_changes{
	opacity: 1;
	pointer-events: all;
}


.client_global_nutrition .macro_widget-controls{
	top:  -45px;
}

.stripe-account{
	background: var(--dark-bg-color);
	padding: 10px 20px 20px 20px;
	border-radius: var(--border-radius);
	position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    column-gap: 30px;
    align-items: end;
}

.stripe-account .type_select, .stripe-account .type_input{
	width: 100%;
	margin: 10px 0;
}

.stripe-account input, .stripe-account select{
	background: var(--bg-color);
	opacity: 1;
}

.stripe-payment {
	flex-direction: row;
	flex-wrap: wrap;
	column-gap: 20px;
}

.stripe-payment label{
	flex-basis: 100%;
}

.stripe-payment input{
	text-transform: capitalize;
	opacity: 1;
	flex: 1;
}

.stripe-payment .secondary_btn_outline{
	margin: 0;
    align-items: center;
    display: flex;
}

.stripe-connect-container{
	display: none;
}

.no-stripe-account .stripe-connect-container{
	display: flex;
	justify-content: center;
	align-items: center;
    position: absolute;
    top: 0;left: 0;
    width: 100%;height: 100%;
    margin-top:0;
}

.no-stripe-account .stripe-connect-container:after{
	content: '';
	width: 100%;height:100%;
	position: absolute;
	top:0;left:0;
	background: var(--bg-color);
	opacity: 0.7;
}

.stripe-connect{
	width: 95%;
    max-width: 350px !important;
    flex-basis: auto;
	z-index: 2;
}

.stripe-dashboard{
    margin: 20px auto 0 auto;
    height: 46px;
    padding: 11px;
}

.no-stripe-account .btn.stripe-dashboard{
	color: var(--bg-color);
	box-shadow: 0 0 0 2px var(--bg-color);
}

.manage_plan-btns .btn{
	padding: 7px 20px;
	width: 100% !important;
    border-radius: var(--border-radius) !important;
}
.manage_plan-btns .btn .text{
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.manage_plan-btns .btn .icon-share{
	font-size: var(--font-sub);
}

.manage_plan-btns .delete_btn{
	margin: 40px auto 0 auto;
}

.cancel_plan-btns {
    text-align: center;
    justify-content: end;
    display: flex;
    gap: 11px;
    align-items: center;
    margin-top: 40px !important;
}

.cancel-survey-option{
    display: inline-flex;
    font-size: var(--font-copy);
    position: relative;
    align-items: center;
    font-weight: 300;
}

.cancel-survey-option:before{
    content: '';
    flex-basis: 25px;
    min-width: 25px;
    width: 25px;
    height: 25px;
    border-radius: var(--border-radius);
    background: var(--light-bg-color);
    display: inline-block;
    margin-right: 10px;
}

.cancel_reasons input:checked ~ label:before {
    background: var(--error-color);
    opacity: var(--focus-opacity);
}

.cancel_reasons input:checked ~ label:after {
    content: '';
    width: 19px;
    height: 19px;
    border-radius: var(--border-radius);
    background: var(--error-color);
    display: inline-block;
    margin: auto;
    margin-right: 10px;
    position: absolute;
    left: 3px;
    top: 0;
    bottom: 0;
}

.cancel_reasons input:checked ~ label {
    color: var(--error-color);
}





.client_private_notes{
	max-width: 100% !important;
	flex-basis: 100%;
	width: 100%;
}

.notes_input {
	display: flex;
    flex-direction: column;
    position: relative;
}

.notes_input .btn{
	align-self: end;
	display: none;
}

.notes_input.unsaved .btn{
	display: inline-block;
}

.client-notes_textbox{
	height: 200px;
    width: 100%;
    border: none;
    outline: none !important;
    padding: 13px 20px;
    font-size: var(--font-copy);
	resize: none;
	border-radius: var(--border-radius);
	margin-bottom: 10px;
}

textarea.client-notes_textbox::-webkit-scrollbar{
	width: 9px;
  height: 10px;
}

textarea.client-notes_textbox::-webkit-scrollbar-thumb{
	background: var(--bg-color);
	border-radius: 10px;
}

textarea.client-notes_textbox::-webkit-scrollbar-track{
	background: transparent;
}


.last-login:before {
    content: '';
    width: 14px;
    height: 14px;
    border-radius: 100px;
    display: inline-block;
    background: var(--primary-color);
    margin-right: 8px;
}


.affiliate_row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.affiliate_row-code {
    display: flex;
    justify-content: end;
    gap: 10px;
    flex: 1;
}

.referral-code-input{
	font-size: var(--font-copy);
	padding: 13px 20px;
	background: var(--light-bg-color);
	border-radius: var(--border-radius);
	position: relative;
	overflow: hidden;
    display: flex;
    align-items: center;
    gap: 7px;
    font-weight: 400;
    margin-bottom:10px;
}

.light .referral-code-input{
	background: var(--dark-bg-color);
}

.referral-code-input.copied-referral:after{
	z-index: 3;
	content: "Copied!";
	position: absolute;
	top:0;left:0;bottom:0;right:0;
	text-align: center;
	width: 100%;
	margin: auto;
	height: var(--font-small);
	font-size: var(--font-small);
	color: var(--white-color);
}

.referral-code-input.copied-referral:before{
	content: "";
	width: 100%;height:100%;
	background: var(--bg-color);
	opacity: 0.8;
	position: absolute;
	top:0;left:0;
}

.referral-code-input .icon-copy{
	font-size: 20px;
	color: var(--white-color);
	cursor: pointer;
}

.referral-code-input .icon-copy:hover{
	opacity: var(--focus-opacity);
}

#coach-affiliate-title {
    font-size: var(--font-sub);
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    margin: 20px 0;
}


.affiliate_progress{
	content: '';
	z-index: 1;
	width: 100%;
	height: 3px;
	background: rgba(0, 0, 0, 0.5);
	position: relative;
	bottom:0;left: 0;	
}

.affiliate_progress_bar{
	width: 0%;
	background: var(--primary-color);
	height: 3px;
	z-index:10;
	position: absolute;
	bottom:0;
}

.sync_client_settings_btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    line-height: 100%;
    padding: 7px 35px 7px 30px;
    max-height: 31px;
    transform: translateY(4px);
}

.sync_client_settings_btn .icon-refresh{
	font-size: var(--font-sub);
}

.sync_client_settings-title{
	font-weight: 800;
	padding: 0 5px;
}


/***** EVENTS *******/


.events{
	margin-top:25px;
}

#coach-events{
	margin-top: 15px;
}

.event_availability{
	margin:15px 0 60px 0;
	display: flex;
	justify-content: space-between;
}

.event_availability span{
	width: 100%;
}

.event_availability label{
	background: var(--primary-color);
	border-radius: var(--border-radius);
	padding: 5px;
	color: var(--bg-color);
	margin: 2px;
	cursor:pointer;
    display: block;
    text-align: center;
}

.event_availability input:not(:checked) ~ label{
	background: var(--bg-color);
	color: var(--light-bg-color);
}



.double_select_contain{
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom:30px;
	color: var(--white-color);
	margin-top: 50px;
}

.drawer-body .double_select_contain{
	margin-top: 0;
}

.double_select_contain .type_select{
	flex-basis: 46%;
	margin-top: 0;
}

.small-select{
	max-width:48%;
	flex-basis:48%;
	padding: 10px 15px;
	text-overflow: ellipsis;
}

#coach-events-list{
	display: flex;
  justify-content: flex-start;
  position: relative;
  overflow-y: hidden;
  overflow-x: scroll;
  padding-bottom: 10px;
}

#coach-events-list::-webkit-scrollbar {
    width: 0px !important;
    height: 10px !important;
}
#coach-events-list::-webkit-scrollbar-track {
    background: transparent;
}

#coach-events-list::-webkit-scrollbar-thumb {
    background: var(--light-bg-color);
    border-radius: 100px;
}

.event{
	border-radius: var(--border-radius);
	padding: 25px 20px;
	background: var(--dark-bg-color);
	flex-basis:30%;
    min-width: 30%;
    max-width: 30%;
	margin-right: 15px;
  	flex: 1 0;
  	position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.event_time{
	cursor: pointer;
}

.event_time:hover:after {
    content: '';
    position: absolute;
    top: 0;left: 0;
    width: 100%;height: 100%;
    background: var(--bg-color);
    opacity: 0.8;
    z-index: 10;
    pointer-events: none;
}


.event_time h4{
	margin: 0;
	text-transform: lowercase;
	color:  var(--primary-color);
	font-size:  var(--font-sub);
}

.event_time h4, .event_time p{
	z-index: 11;
	position: relative;
}

.event_user-message{
	margin-top:  25px;
	flex: 1;
}

.event_user-message .quick_response-contain{
	margin: 5px 0 0 0;
    width: 100%;
    height: 37px;
    border-radius: 100px;
}

.event_user-message .quick_response-input {
	line-height: 150%;
	height: 100%;
	padding: 4px 5% 0 5%;
}

.event_user-message .send{
	width: 30px;
	height: 30px;
	right: 4px;bottom: 4px;
	font-size: 16pt;
}

.event_user-message .quick_response-input::-webkit-scrollbar-thumb{
	background:  transparent;
}

.event_user-message .quick_response-input:placeholder-shown ~ .send{
	display: none;
}

.event_user {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 20px;
}

.event_user .user_profile{
	margin:0 0 0 5px;
}

.event.inactive_event{
    opacity: var(--focus-opacity);
}

/*.event.inactive_event .event_time{
    opacity: var(--focus-opacity);
}*/

.event.inactive_event .quick_response-contain{
	background: var(--bg-color);
}


@media all and (max-width: 1080px) {

	.event{
	    flex-basis: 80%;
	    min-width: 80%;
	    max-width: 80%;
	}
}



/******** RECURRING SCHEDULE ITEMS ******/

.add_recurring{
	margin:  10px 0;
	padding: 15px 20px;
	text-align: left;
	font-size: var(--font-copy);
	display: flex;
	align-items: center;
	position: relative;
}

.add_recurring .icon {
    font-size: 25px;
    margin-right: 10px;
}

.add_recurring .icon-plus{
	font-size: 30px;
	color: var(--light-bg-color);
	position: absolute;
	top: 0;bottom: 0;right: 20px;
	height: 30px;
	margin:  auto;
}

.add_recurring:hover .icon-plus{
	color: var(--bg-color);
}

#page-create-recurring-schedule .schedule_day{
	border-right: 0;
	padding: 0;
}

#page-create-recurring-schedule .schedule_contain:after{
	display: none;
}

#page-create-recurring-schedule .schedule_day-list{
	margin-top: 0;
}
#page-create-recurring-schedule .multi_block-extra{
	display: none;
}

#page-create-recurring-schedule .compact_custom_save{
	display: none;
}

.recurriong_details-progress{
	padding: 25px 20px;
	background: var(--dark-bg-color);
	border-radius: var(--border-radius);
    display: flex;
    flex-direction: column;
    gap: 5px;
}

#view-recurring-details h2{
	margin-bottom: 10px;
	font-weight: 600;
	font-size: var(--font-sub);
	display: flex;
	align-items: center;
	line-height: 120%;
	margin-top: 25px;
	cursor: pointer;
}

#view-recurring-details .icon-link{
	margin-right: 10px;
	color: var(--primary-color);
	font-size: 22px;
}

#view-recurring-details h2:hover{
	opacity: var(--focus-opacity);
}

#view-recurring-details p.sub-details{
	color: var(--light-bg-color);
	text-transform: uppercase;
	font-weight: 900;
	margin: 15px 0;
}


.recurring_schedule_item{
/*	background: var(--light-bg-color);*/
	background: transparent !important;
}

.recurring_schedule_item:before{
	content: '';
	z-index: -1;
	position: absolute;
	width: 100%; height: 100%;
	top: 0;left: 0;
	background: var(--dark-bg-color);
	opacity: var(--focus-opacity);
	border-radius: var(--border-radius);
}

.light .recurring_schedule_item:before{
	opacity: 1;
}

.recurring_schedule_item .icon-minus{
	pointer-events: none;
}

.recurring_schedule_item:not(.mealplan_schedule_item) .multi_block-extra:before{
	content: '\e90f';
	font-size:  31px;
	transition: var(--transition);
}

.recurring_schedule_item:not(.mealplan_schedule_item) .multi_block-extra{
	pointer-events: none;
}


.mealplan_schedule_item + .mealplan_schedule_item.recurring_schedule_item{
	display: none;
}

.mealplan_schedule_item.recurring_schedule_item .daily_macros-remove{
	pointer-events: none;
}

.recurring_schedule_item .daily_macros-remove .icon-minus:before{
	content: '\e90f';	
}

.recurring_schedule_item .multi_block-title:hover ~ .icon-minus:before{
	transform: rotate(180deg);
}
.recurring_schedule_item:after{
	opacity: 0;
}

.change_recurring{
	margin-top: 30px;
}

.delete_recurring{
	margin-top:  30px;
}


.recurring_schedule_item .multi_block-title{
/*	flex-basis: calc(100% - 10px) !important;*/
}

.recurring_message-bubble{
	border-radius:  10px;
	background: var(--message-color);
	margin-bottom: 20px;
	padding: 15px;
}

.no_video_attached{
	height: 300px;
	border-radius: var(--border-radius);
	width:  100%;
	background:  var(--light-bg-color);
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	color:  var(--bg-color);
	font-size: var(--font-copy);
	font-weight: 800;
}

.label-select{
	display: inline-block;
	position: relative;
  width: 100%;
}

.label-select input:checked ~ label:before{
	background:  var(--primary-color);
	opacity: var(--focus-opacity);
}

.label-select label:before{
	content:  '';
	flex-basis: 30px;
	min-width: 30px;
	width:  30px;height: 30px;
	border-radius:  var(--border-radius);
	background:  var(--light-bg-color);
	display: inline-block;
	margin-right: 10px;


}

.label-select input:checked ~ label:after{
	content:  '\e908';
	width:  24px;height: 24px;
	border-radius:  var(--border-radius);
	background:  var(--primary-color);
	color: var(--bg-color);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin:  auto;
	margin-right: 10px;
	position: absolute;
	left: 3px;
	top: 0;bottom: 0;

	font-family: 'icons' !important;
	speak: never;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.label-select label{
	color:  var(--white-color);
	display: flex;
	align-items: center;
	justify-content: flex-start;
	margin:  5px 0;
    letter-spacing: 0.05em;
    font-weight: 300;
    font-size: var(--font-copy);
}

#link-mealplan-calories-input{
    padding: 3px 10px;
    width: 6ch;
    margin-left: 10px;
}


/****** EXERCIISE NAME ORGANIZATION ******/


.draggable-list{
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
	margin-top: 25px;
}

.exercises_contain.draggable-list{
	display: block;
}

.draggable-item{
	display: flex;
	align-items: center;
	border-radius: var(--border-radius);
	color: var(--white-color);
	background: var(--dark-bg-color);
	cursor: pointer;
}

.draggable-item.dragging{
	opacity:var(--focus-opacity);
}

#exercise-nomenclature .draggable-item{
	padding: 15px 20px;
	margin: 5px;
}

.icon-move{
	color: var(--light-bg-color);
	margin-right: 10px;
	font-size: 25px;
}


.exercise_nomenclature{
	max-width: 100% !important;
	margin-top: 10px;
}

#exercise-name-example{
	font-size: var(--font-sub);
	font-weight: 900;
}


/*** SUBSCRIPTIONS ***/



.client_subscription{
  display: flex;
  width: 100%;
  margin-bottom: 10px;
  background: var(--dark-bg-color);
  padding: 20px 30px;
  border-radius: var(--border-radius);
  color: var(--white-color);
  flex-wrap: wrap;
  align-items: center;
}

.client_subscription-none{
  background: var(--light-bg-color);
}

.client_subscription-title{
  font-size: var(--font-sub);
  flex: 1;
  flex-direction: column;
  display: flex;
  align-items: flex-start;
  gap: 5px;
}

.client_subscription-desc{
  font-size: var(--font-small);
  color: var(--primary-color);
  font-weight: 900;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
}

.client_subscription-desc .icon-refresh{
  flex-basis: auto;
  font-size: calc(var(--font-small) * 1.7);
  margin-right: 5px;
}

.client_subscription-title .product_frequency, .client_subscription-title .product_title, .client_subscription-title .subscription_next_charge{
  text-align: left !important;
  flex-basis: 100%;
}


.client_subscription-next-charge{
  font-size: var(--font-small);
  color: var(--light-bg-color);
}


#coach-subscription-plan-title{
    font-size: var(--font-sub);
    font-weight: 600;
	display: flex;
	justify-content: space-between;
}

#coach-subscription-plan-desc p{
	display: flex;
	justify-content: space-between;
}



/******* DEFAULT CHECKIN ******/

.multi_block.checkin_item{
	width: 100%;
	overflow: hidden;
}

.multi_block.checkin_item .multi_block-title{
	font-size: var(--font-sub);
}
.multi_block.checkin_item .multi_block-desc{
	text-transform: capitalize;
}

.multi_block .multi_block-extra{
	font-size: var(--font-sub);
	z-index: 10;
}


.multi_block .multi_block-extra.expandable{
	position: relative;
}

.locked_checkin_form{
	flex-wrap: wrap;
}
.locked_checkin_form .checkin_item{
	flex-basis:  100%;
	margin-top:  15px;
}

.locked_checkin_form .multi_block-extra{
	opacity: 0;
	pointer-events: none;
}

.locked_checkin_form .checkin_item .icon-lock{
	color: var(--light-bg-color);
    margin-right: 10px;
    font-size: 38px;
}

.switch_checkbox:not(:checked) ~ .checkin_item{
	opacity: var(--focus-opacity);
}

/****** DO NOT DISTURB *****/
.dnd-automatic-response{
    padding: 30px 35px;
    background: var(--message-color);
    border-radius: var(--border-radius);
    width: 100%;
    height: 160px;
    resize: none;
    outline: none;
    color: var(--message-fg-color);
    font-size: var(--font-copy);
    border: none;
}

textarea.dnd-automatic-response::placeholder {
	color: var(--message-fg-color);
}




/***** COACH DESIGN *******/
#primary-color{background:var(--temp-primary-color);}
#dark-bg-color{background:var(--temp-dark-bg-color);}
#light-bg-color{background:var(--temp-light-bg-color);}


.color-swatch{
	width: 100%;
	height:170px;
	position: relative;
	/*box-shadow: 0 0 0 1px var(--white-color);*/
	border-radius: var(--border-radius);
	margin-top: 25px;
	background: var(--temp-primary-color);
}

.color-edit{
	position: absolute;
	bottom:0;right:0;
	padding:12px 2px;
	width: 100%;
	background: var(--bg-color);
	display: flex;
	justify-content: flex-start;
	font-weight:900;
	align-items: center;
	border-top: 1px solid var(--light-bg-color);
}

.color-edit .save_custom{
	  height: calc(100% - 12px);
    bottom: 6px;right: 0;
}

.color-edit label{
	font-size: 11pt;
	color: var(--white-color);
}

.color-edit input{
	flex: 1;
	width: 80%;
	padding: 0;
	padding-left: 5px;
	letter-spacing: 0.05em;
	font-weight: 900;
	color: var(--dark-bg-color);
	background: transparent;
	font-size: 11pt;
	color: var(--white-color);
}

input.color-picker{
    visibility: hidden;
    height: 100%;
    outline: none;
    padding: 0;
    border-width: 0px;
    background: transparent;
    appearance: none;
    color: transparent;
    inline-size: 100%;
    font-size: 0;
}

.picker-label{
	position: absolute;
	top:0;left:0;
	width: 100%;height:100%;
	opacity: 0;
	background: var(--bg-color);
}

.picker-label:hover{
	opacity: var(--focus-opacity);
}

.save_color_btn{
	font-size:11pt;
	background: var(--light-bg-color);
	color: var(--white-color);;
	padding:5px;
	border-radius: var(--border-radius);
	cursor:pointer;
	font-weight: 500;
}

.swatch_label{
	position: absolute;
	top: -25px;left:0;
	color:var(--white-color);
	opacity: var(--focus-opacity);
}


.coach_logo{
	width: 100%;
}

.coach_colors{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	width: 100%;
	position: relative;
	margin-top: 25px;
}


.color_edit .save_custom{
	right: 0;
}



.settings_image_contain {
    box-shadow:0 0 0 2px var(--light-bg-color);
    margin: 20px 0;
    padding: 10px;
    color: var(--white-color);
    border-radius: var(--border-radius);
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.settings_image_contain .fake_label{
	font-weight: 200;
    font-size: var(--font-small);
}

.upload_btn{
	padding: 10px;
	background: var(--light-bg-color);
	border-radius: var(--border-radius);
	cursor:pointer;
	line-height: 110%;
  display: inline-block;
}

.upload_btn:hover{
	background: var(--dark-bg-color);
}



#coach-profile-image-preview{
	min-width: 150px;
	height: 150px;
	background-size: cover;
	background-position: center;
	margin-right:25px;
	background-color: var(--light-bg-color);
	border-radius: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#coach-profile-image-preview .icon-user{
	font-size: 80px;
}

#coach-logo-preview{
	width: 100%;
	height: 150px;
	background-size: contain;
	background-position: center;
	background-color: var(--light-bg-color);
	background-repeat: no-repeat;
	border-radius: var(--border-radius);
	color: var(--white-color);
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	position: relative;
}


.delete-coach-logo{
	display: none;
	position: unset;
	max-width: 50%;
}

#coach-logo-preview:hover .delete-coach-logo{
	display: inline-block;
}


#coach-logo-preview:hover:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    background: var(--bg-color);
    width: 100%;
    height: 100%;
    opacity: 0.8;
}


.coach_logo {
    justify-content: center;
    text-align: center;
    padding: 100px 20px;
}

#coach-profile{
	position: relative;
}

#coach-profile:after{
	content:'\e91a';
	position: absolute;
	font-size: 25px;
	bottom:-2px;left:-4px;
	color: var(--white-color);
	background: var(--dark-bg-color);
	border-radius: 100px;
	padding: 2px;

	font-family: 'icons' !important;
	speak: never;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;

	transform: rotate(0deg);
	transition: transform var(--transition);
}

.active_module #coach-profile:after{
	background: var(--bg-color);
}

.active_item#coach-profile:after{
	color: var(--bg-color);
	background: var(--primary-color);
	transform: rotate(45deg);
}


/**** AUTO TRIGGER MESSAGES ****/
#auto-trigger{
	margin-bottom: 5px;
}

#about-auto-trigger{
	background: var(--dark-bg-color);
	border-radius: var(--border-radius);
	width: 100%;
	padding: 5%;
	color: var(--white-color);
	font-size: var(--font-copy);
	display:none;
}

select#auto-trigger-delay{
	text-transform: none;
}

/*
#about-auto-trigger{
	border-radius: var(--border-radius);
	width: calc(100% - 4px);
	padding: 5%;
	color: var(--white-color);
	font-size: var(--font-copy);
	box-shadow: 0 0 0 2px var(--light-bg-color);
	margin: 0 auto;
	margin-top: 10px;
}*/

#about-auto-trigger .icon-info {
    padding: 0;
    position: relative;
    left: -4px;
    top: 2px;
    font-size: 21px;
}

#about-auto-trigger .icon-info:hover{
	opacity: 1 !important;
}

#auto-trigger-message{
	background: var(--message-color);
	color: var(--message-fg-color);
}

textarea#auto-trigger-message::placeholder {
	color:  var(--message-fg-color);
}

.drawer-desc.auto-trigger-delay-desc{
	margin-top: 25px;
}

.auto_message-container {
    display: flex;
    justify-content: space-between;
    margin: 20px 0;
    cursor:pointer;
}

.auto_message-item {
    flex-basis: 40%;
    width: 40%;
    align-items: center;
    display: flex;
    padding: 30px 20px;
    font-size: var(--font-copy);
    overflow: hidden;
    border-radius: var(--border-radius);
    color: var(--white-color);
}

.auto_message-item.auto_message{
	background: var(--message-color);
	color: var(--message-fg-color);
}
.auto_message-item.auto_trigger{
	background: var(--dark-bg-color);
	text-transform: capitalize;
}

.auto_delay {
    text-align: center;
    color: var(--white-color);
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    display: flex;
    flex-direction: column;
}

.auto_delay .icon-send {
    width: 50px;
    height: 50px;
    background: var(--message-color);
    color: var(--message-fg-color);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 200px;
    font-size: 30px;
    margin: 5px auto !important;
    transform: rotateZ(90deg);
}


.auto_message_headers {
    display: flex;
    justify-content: space-between;
}




/****** CLIENT PROGRESS METRICS ******/
.two_col{
	display: flex;
	width: 100%;
	justify-content: space-between;
	align-items: flex-start;
}

.two_col .col{
	flex-basis: 48%;
	width: 48%;
}

.two_col.number_cols{
	align-items: center;
}

.metric_btns {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    flex-basis: 50%;
/*    max-width: 380px;*/
}

.metric_btns .secondary_btn_outline{
	flex-basis: 48%;
	margin: 0;
}

.metric_category_title{
	width: 100%;
	display: block;
	border-bottom: 1px solid var(--light-bg-color);
	padding: 15px 0;
	margin: 25px 0 15px 0;
}

h3.metric_category_title{
	width: 100%;
	display: block;
	margin: 25px 0 15px 0;
	font-size: var(--font-sub);
	font-weight: 800;
	padding: 0;
	border: 0;
}


textarea#metric-desc::placeholder {
	opacity:0.75 !important;
}


.metric_data {
    padding:10px 20px;
    margin: 7px 0;
    background: var(--dark-bg-color);
    border-radius: var(--border-radius);
    color: var(--white-color);
    cursor:pointer;
    display: flex;
    justify-content: start;
    align-items: center;
    min-height: 60px;
    position: relative;
    overflow: hidden;
}

.metric_data .icon-compare{
	font-size: 35px;
}

.metric_data:hover, .active_metric_preview .metric_data{
	box-shadow: 0 0 0 2px var(--light-bg-color);
	background: var(--bg-color) !important;
}

.default_metric .metric_data:hover{
	box-shadow: none;
	background: var(--dark-bg-color) !important;
}

.default_metric .metric_data:hover .icon-minus:after{
	content: '';
  width: 100%;
  height: 100%;
  background: var(--bg-color);
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.8;
  pointer-events: none;
  z-index: 2;
}

.metric_data .last{
	font-size: var(--font-sub);
	letter-spacing: 0.02em;
	width: 70%;
    text-align: right;
}

.metric_data .last.last_small{
	font-size: var(--font-copy);
}

.metric_data .last.empty{
	color: var(--light-bg-color);
    min-width: 110px;
    text-align: right;
}

.search_results .metric_data{
	background:  var(--dark-bg-color);
	min-height: 60px;
	padding: 10px 20px;
}

.compact_schedule-edit .metric_data{
	box-shadow: 0 0 0 2px var(--light-bg-color);
}


.metric_title{
	font-size: var(--font-copy);
	font-weight: 500;
	color: var(--primary-color);
	margin: 0;
	flex-basis: 100%;
    width: 100%;
}

.existing_metric .metric_title, .default_metric .metric_title{
		flex-basis: 55%;
}

.search_results .metric_title{
		color:  var(--white-color);
}

.metric_title span{
	color: var(--white-color);
	font-size: var(--font-small);
	display: block;
	font-weight: 200;
	line-height: 150%;
}
.metric_title span:first-letter{
	text-transform: capitalize;
}
.metric_group .metric_title span{
	display: none;
}

.metric_group_title {
    width: 100%;
    max-width: 100% !important;
    background: var(--light-bg-color);
    padding: 8px 20px;
    border-radius: var(--border-radius);
    display: flex;
    justify-content: space-between;
    cursor:pointer;
    margin-bottom:  10px;
    align-items: center;
    transition: var(--transition);
}

.metric_group_title p{
    font-weight: 900;
    text-transform: uppercase;
}

.metric_desc-type{
	color: var(--light-bg-color);
	font-size: var(--font-small);
	font-weight: 800;
	text-transform: uppercase;
	text-align:  center;
	width: 33%;
    flex-basis: 33%;
}

.metric_group_title.group_collapsed{
    padding: 15px 20px;
}

.metric_group .metric:last-child{
	margin-bottom:  10px;
}


.metric_group_title .icon-arrow-right {
    transform: rotate(90deg);
    transition: var(--transition);
    transform-origin: center;
    color: var(--white-color);
}

.metric_group_title.group_collapsed .icon-arrow-right {
    transform: rotate(-90deg);
}

.metric_group{
	position: relative;
	height: auto;
	width: 100%;
}

.metric_group.group_collapsed {
    height: 0;
	overflow: hidden;
}

.metric_data .icon-plus {
    font-size: 27px;
    line-height: 100%;
    margin-left: 10px;
    color: var(--bg-color);
}

.metric_data .icon-minus {
    font-size: 27px;
    line-height: 100%;
    margin-left: 10px;
    color: var(--light-bg-color);
    flex: 1;
    text-align: right;
}

.metric_data .icon-minus:before {
    position: relative;
    z-index: 3;
}

.metric_data:hover .icon-plus{
	color: var(--light-bg-color);
}
.metric_data .icon-minus:hover{
	color: var(--error-color);
}
.list_metrics .search_results{
	margin: 0 0 20px 0;
}
.list_metrics .search_input{
	margin-bottom: 0px;
}

.selected_metric h3{
	font-size: var(--font-sub);
	font-weight: 900;
}

.selected_metric .small-text{
	line-height: 120%;
}

.selected_metric .delete_btn{
	margin:  20px auto;
}


.metric_quick_stats_title {
    display: flex;
    align-items: center;
    flex-direction: column;
    margin: 20px 0;
    line-height: 150%;
}


.metric_multiple-select{
	display: flex;
	justify-content: space-between;
}

.metric_multiple-select .small-select{
	width:49%;
	max-width: 49%;
	flex-basis: 49%;
}

.last_updated{
    opacity: var(--focus-opacity);
    font-size: var(--font-small);
}

#metric-time-period{
	margin: 10px 0 25px 0;
}


.metric_quick_stats_btns{
	display: flex;
	justify-content: space-between;
	width: 100%;
	flex-wrap: wrap;
}

.metric_quick_stats_btn{
    width: 100%;
    flex-basis: 100%;
    margin: 10px 0;
    color: var(--white-color);
    font-size: var(--font-copy);
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid var(--light-bg-color);
    padding-bottom: 15px;
    font-weight: 900;
}

.metric_quick_stats_btn span{
	font-weight:300;
}

.no_history_found {
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: var(--font-sub);
    max-width: 300px;
    color: var(--white-color);
    text-align: center;
    margin: 0 auto;
    flex-direction: column;
}

.metric_preview_textfield{
    line-height: 170%;
    font-size: var(--font-copy);
    width: 100%;
    border-top: 1px solid var(--light-bg-color);
    padding-top: 25px;
    margin-top: 10px;
}

.selected_metric .btn{
	margin: 25px auto;
	padding: 13px 20px;
	display: block;
}

#metric-group{
	text-transform: capitalize;
}

.time_period_select{
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.metric_preview_photo_compare{
	display: flex;
	justify-content: space-between;
	align-items: flex-end;	
}

.metric_preview_photo{
	max-width: 49%;
	flex-basis: 49%;
	overflow: hidden;
	border-radius: var(--border-radius);
}

.metric_preview_img{
	width: 100%;
}

.metric_preview_photo-select {
    padding: 10px 20px;
    margin-top: 10px;
}

.metric_stats h3{
	font-size: var(--font-sub);
	font-weight: 900;
	margin-bottom:10px;
}

.metric_stats .metric_quick_stats_btns{
	margin:20px 0;
}

.metric_history {
    width: 100%;
    padding-top: 20px;
}

.metric_history-header{
	display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 40px;
}

.metric_history-header h2{
	font-size: var(--font-head);
	font-weight: 900;
}

.history_item {
    padding: 30px 0;
    border-top: 1px solid var(--light-bg-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}


.history_item h3{
	font-size: var(--font-sub);
}
.number_cols{
	border-bottom: 1px solid var(--light-bg-color);
	padding-bottom: 100px;
    margin-bottom: 50px;
}

.history_data .last_updated{
	margin-top: 15px;
	width: 100%;
	flex-basis: 100%;
}

h3.history_data-multi{
	position: relative;
    margin-bottom: 3px;
    padding-bottom: 7px;
}

h3.history_data-multi:after{
	content: '';
    height: 1px;
    background: var(--light-bg-color);
    width: 25%;
    position: absolute;
    bottom: 0;
    left: 0;
}

.history_data-multiline {
    display: flex;
    flex-wrap: wrap;
    column-gap: 20px;
}

.history_data-multiline h3{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	font-weight: 600;
}

.history_data-multiline-compare{
	font-size: var(--font-copy);
}

.history_data-multiline-label{
	text-transform: capitalize;
	font-size: var(--font-small);
	margin-top: 7px;
	font-weight: 300;
}

.history_details{
    display: flex;
    justify-content: space-around;
}

.history_details .icon-more {
	padding: 5px 10px;
    background: var(--light-bg-color);
    color: var(--white-color);
    border-radius: var(--border-radius);
    font-size: 25px;
    cursor:pointer;
	display: flex;
    align-items: center;
    margin-left: 10px;
}

.photo_link{
	text-decoration: none;
	padding: 5px 10px;
	background: var(--light-bg-color);
	border-radius: var(--border-radius);
	display: flex;
	align-items: center;
	margin-left: 10px;
}

.notes_link{
	text-decoration: none;
	padding: 5px 10px;
	background: var(--light-bg-color);
	border-radius: var(--border-radius);
	display: flex;
	align-items: center;
	margin-left: 10px;
	cursor:pointer;
}

.meals_link{
	text-decoration: none;
	padding: 5px 10px;
	background: var(--light-bg-color);
	border-radius: var(--border-radius);
	display: flex;
	align-items: center;
	margin-left: 10px;
	cursor: pointer;
}


.photo_link .icon-media{
	font-size: 35px;
}

.photo_link .icon-arrow-right{
	font-size: 25px;
}

.meals_link .icon-mealplans{
	font-size: 25px;
	margin-right: 4px;
}

.notes_link .icon-message{
	font-size: 23px;
	margin-right: 5px;
}


input.with_unit{
	width: 86%;
	display: inline-block;
}

.history-unit{
	display: inline-block;
	width: 10%;
	font-size: var(--font-sub);
	margin-left: 2%;
}



::-webkit-calendar-picker-indicator {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 400 400"><path class="st0" fill="%23bbbbbb" d="M200.01,86.46c-62.7,0-113.55,50.83-113.55,113.53s50.85,113.55,113.55,113.55s113.53-50.85,113.53-113.55 S262.71,86.46,200.01,86.46z M261.31,228.47h-82.05V122.46h36.09v69.92h45.96V228.47z"/></svg>');
}


.placeholder_metric_preview{
	width: 100%;
	height: 100px;
	border-radius: var(--border-radius);
	margin: 5px 0 5px auto;

	background: linear-gradient(-70deg, var(--bg-color), var(--bg-color), var(--light-bg-color), var(--bg-color));
	background-size: 300% 300%;
	animation: loading 2s ease infinite;
}

.placeholder_metric_preview.size_large{
	height: 300px;
}

.placeholder_metric_preview.size_small{
	height: 50px;
}

.placeholder_metric_preview:nth-child(2){ animation-delay: 0.05s; }
.placeholder_metric_preview:nth-child(3){ animation-delay: 0.1s; }
.placeholder_metric_preview:nth-child(4){ animation-delay: 0.15s; }
.placeholder_metric_preview:nth-child(5){ animation-delay: 0.2s; }
.placeholder_metric_preview:nth-child(6){ animation-delay: 0.25s; }
.placeholder_metric_preview:nth-child(7){ animation-delay: 0.3s; }
.placeholder_metric_preview:nth-child(8){ animation-delay: 0.35s; }
.placeholder_metric_preview:nth-child(9){ animation-delay: 0.4s; }
.placeholder_metric_preview:nth-child(10){ animation-delay: 0.45s; }




.add_metric_to_coach{
	  display: inline-block;
    position: relative;
    width: 100%;
}
.add_metric_to_coach label {
    color: var(--white-color);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin: 5px 0;
    letter-spacing: 0.05em;
    font-weight: 300;
}
.add_metric_to_coach input:checked ~ label {
    color: var(--primary-color);
}

.add_metric_to_coach label:before {
    content: '';
    width: 25px;
    height: 25px;
    border-radius: var(--border-radius);
    background: var(--light-bg-color);
    display: inline-block;
    margin-right: 10px;
}
.add_metric_to_coach input:checked ~ label:before {
    background: var(--primary-color);
    opacity: var(--focus-opacity);
}

.add_metric_to_coach input:checked ~ label:after {
    content: '';
    width: 19px;height: 19px;
    border-radius: var(--border-radius);
    background: var(--primary-color);
    display: inline-block;
    margin: auto;
    margin-right: 10px;
    position: absolute;
    left: 3px;top: 0;bottom: 0;
}

.existing_metric_step, 
.new_metric_step, 
.existing_content_step, 
.new_workout_step,
.customize_recurring_item,
.select_recurring_item,
.search_recurring_item,
.program_select_step,
.program_start_date_step,
.drawer_step{
	display: none;
}

.full-height-drawer h2{
	font-size: var(--font-sub);
    text-transform: capitalize;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-bottom: 50px;
}

.full-height-drawer h2 span{
    font-size: 26px;
    margin-right: 9px;
}

.active_drawer_step{
	display: block !important;
}

.compact_schedule-edit .new_metric_step .secondary_btn {
    display: inline-block;
    margin: 5px auto;
    color: var(--white-color);
    width: 100%;
    text-align: center;
}

.completed_history-desc{
	text-align: center;
	margin-bottom: 30px;
	margin-top: -30px;
}

.completed_history-view {
    background: var(--dark-bg-color);
    padding: 15px;
    border-radius: var(--border-radius);
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 20px;
    color: var(--white-color);
    margin-bottom: 5px;
}

.completed_history-view p{
	font-size: var(--font-small);
}

.completed_history-view h5{
	font-size: var(--font-copy);
	text-align: left;
	margin: 0;
	width:100%;
	font-weight: 300;
}

.completed_history-view h4{
	font-size: var(--font-sub);
	text-align: left;
	margin: 0;
	width:100%;
	font-weight: 800;
}

.completed_history-view[data-progress-type="number"] h3, .completed_history-view[data-progress-type="time"] h3{
    font-size: var(--font-head);
    font-weight: 800;
}

.completed_history-view[data-progress-type="photo"], .completed_history-view[data-progress-type="video"]{
	padding: 0 0 20px 0;
	overflow: hidden;
	gap: 20px;
}

.completed_history-view[data-progress-type="multiple"]{
	text-align: left;
	gap: 20px;
}
.completed_history-view[data-progress-type="multiple"] h3 {
	font-weight: 800;
	font-size: var(--font-sub);
}

.completed_history-notes {
    padding: 15px;
    background: var(--light-bg-color);
    border-radius: 20px;
    max-width: 350px;
    text-align: left;
}

.completed_history-multi h5{
	display: flex;
	justify-content: space-between;
    padding: 5px 10px;
    border-bottom: 1px solid var(--bg-color);
}

/****** EXERCISES *******/


.result-difficulty{
	display: flex;
	justify-content: flex-start;
	margin:0 10px 0 10px;
}

.result-difficulty span{
	width:10px;height:10px;
	margin-right:7px;
	border-radius:200px;
	box-shadow: 0 0 0 2px var(--primary-color);
}

.result-difficulty span.active-diff{
	background: var(--primary-color);
}

#exercise-equipment, #edit-myexercises-equipment, #edit-aiexercises-equipment{
	text-transform: capitalize;
}

.exercise-nomenclature {
    display: none;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.exercise-nomenclature.use_nom{
	display: flex;
  margin-top: 40px;
}


.use_nom ~ .exercise-equipment-title,
.use_nom ~ .exercise-equipment-select{
	display: none;
}

.hide-nom{
	display: none;
}

.use-custom-nom{
	display: inline-block;
	float: right;
	padding:4px 10px;
	border-radius:var(--border-radius);
	color: var(--white-color);
	cursor: pointer;

}

#use-custom-nom:checked ~ label{
	background: var(--light-bg-color);
}





.exercise-nom-container{
	display: flex;
	justify-content: space-between;
	margin: 0 5px 35px 0;
	flex-wrap: wrap;
	align-items: flex-start;
	position: relative;
}

.exercise-nom-input{
	position: relative;
	z-index: 2;
	background: var(--bg-color);
	padding: 10px 15px;
	border-radius: var(--border-radius);
	flex: 1;
}

.exercise-nom-add{
	padding: 0 5px;
	height: 40px;
	flex-basis: 19px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--light-bg-color);
	border-radius: var(--border-radius);
	color:  var(--white-color);
	cursor: pointer;
    margin-left: 3px;
}

.exercise-nom-add:hover{
	opacity: var(--focus-opacity);
}

.exercise-nom-label{
	font-size: var(--font-small);
	position: absolute;
	text-transform: capitalize;
    top: -21px;left: 0;
    color: var(--white-color);
    font-weight: 300;
}

.exercise-nom-placeholder{
	font-size: var(--font-small);
	width:  100%;
    max-width: 100%;
    font-weight: 400;
    outline: none !important;
    letter-spacing: 0.05em;
    line-height: 120% !important;
    padding: 0;
    display: inline-block;
    visibility: hidden;
    white-space: pre;
    z-index: 2;
    min-width: 61px;
}

.exercise-nom-container[data-key="limb_number"] .exercise-nom-placeholder{
    min-width: 80px;
}

.exercise-nom-col{
	width: 100%;
	flex-basis: 100%;
	max-width: 100%;
	padding: 10px 15px !important;
	font-size: var(--font-small);
    position: absolute !important;
    top: 0;left: 0;right: 0;bottom: 0;
	color: var(--white-color);
	border-radius: var(--border-radius) !important;
	line-height: 120% !important;
	text-transform: capitalize;
	margin: 0 !important;
}

.exercise-nom-results{
	flex-basis: 100%;
}

.exercise-nom-results p{
	margin: 5px 0;
	line-height: 100%;
	text-transform: capitalize;
}




.exercise-nom-col::placeholder{
	opacity: 1 !important;
	color: var(--white-color);
}

.exercise-nom-col:placeholder-shown {
    opacity: var(--focus-opacity);
}


.exercise-nom-col[disabled], 
.exercise-nom-col:invalid{
	opacity: var(--focus-opacity);
}

.exercise-title-disabled {
    background: transparent;
    padding: 5px 0;
    font-size: var(--font-sub);
}

.substitution {
    width: 100%;
    margin: 5px 0;
    padding: 10px 15px;
    background: var(--light-bg-color);
    border-radius: var(--border-radius);
    color: var(--white-color);
    font-size: var(--font-copy);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}


.substitution span:nth-child(2){
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}


.substitution .icon-minus{
	font-size: 22px;
	cursor:pointer;
	flex-basis: 22px;
}
.substitution .icon-minus:before{
	z-index: 2;
	position: relative;
}
.substitution .icon-minus:hover{
	color: var(--error-color);
}

.substitution .icon-minus:hover:after{
	content: '';
	width:  100%;
	height:  100%;
	background:  var(--bg-color);
	opacity: 0.8;
	top: 0;left: 0;
	position: absolute;
	pointer-events: none;
}

.exercise-location{
	margin: 10px 0;
}

.swaps-manual{
	display: none;
}

.use_swaps .swaps-manual{
	display: block;
}

.swaps-list{
	display: block !important;
	margin-top: 0;
}

.swaps-list .icon-move{
	opacity: var(--focus-opacity);
	color: var(--white-color);
	font-size: 14px;
}

.swaps-list-results{
	max-height: 300px;
	overflow-y: scroll;
}

.swap-details{
	flex-basis: calc(98% - 22px);
	display: flex;
	justify-content: flex-start;
	align-items: center;
	overflow: hidden;
}

/****** VIDEO PLAYERS ********/
/* moved to shared styles sheet */


/***** CONTENT PAGE ******/



.all_content{
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 20px;
}

.all_content-item{
	min-width: calc(50% - 10px);
	flex: 1;
	background: var(--dark-bg-color);
	border-radius: var(--border-radius);
	padding: 100px 0;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	color: var(--white-color);
	cursor:pointer;
}

.all_content-item:hover{
	background: var(--light-bg-color);
}

.all_content-item .icon{
	font-size: 50px;
	margin-bottom: 10px;
}
.all_content-item h3{
	font-size: var(--font-sub);
}

.content_category-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 40px 0 25px 0;
    padding: 30px 0 25px 0;
    border-bottom: 1px solid var(--light-bg-color);
}

.content_search-result {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
}

.select_filter{
    box-shadow: 0 0 0 2px var(--light-bg-color);
    display: inline-block;
    border-radius: var(--border-radius);
    color: var(--white-color);
    position: relative;
    margin: 10px 10px 10px 0;
    cursor:pointer;
}

.select_filter .icon-arrow-right{
	font-size: var(--font-small);
    transform: rotate(90deg);
    position: absolute;
    top:0;bottom:0;right: 15px;
    margin: auto;
    width: var(--font-small);height:var(--font-small);
    pointer-events: none;
}

.filter_by {
    background: var(--bg-color);
    width: auto;
    padding: 4px 40px 4px 20px;
    text-transform: capitalize;
    cursor:pointer;
}

select.filter_by{
	background: transparent !important;
}

@media all and (max-width: 1080px) {

	.all_content-item{
		padding: 50px 0;
	}
}



/** CONTENT FILTER **/

.content_filter_select{
    box-shadow: 0 0 0 2px var(--light-bg-color);
    display: inline-block;
    border-radius: var(--border-radius);
    color: var(--white-color);
    position: relative;
    margin: 10px 10px 0 0;
    cursor:pointer;
    transition: var(--transition);
}

.content_filter{
    background: transparent;
    width: auto;
    border-radius: var(--border-radius);
    padding: 4px 40px 4px 20px;
    text-transform: capitalize;
		max-width: 300px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    pointer-events: none;
}

.content_filter_select:hover{
  box-shadow: 0 0 0 2px var(--dark-bg-color);
	background: var(--dark-bg-color);
}

.content_filter_select .expand-item{
	padding-right: 25px;
	text-transform: capitalize;
}

.content_filter_select .expand{
	left: 0 !important;
}

.content_filter_select-expand{
	background: transparent;
	transition: var(--transition);
	box-shadow: 0 0 0 0px transparent;
	border-radius: var(--border-radius);
}

.content_filter_select-expand.expand-active{
	background: var(--dark-bg-color);
  box-shadow: 0 0 0 2px var(--dark-bg-color);
}


.content_filter:after {
	content: "\e901";

	  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icons' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

	font-size: var(--font-small);
    transform: rotate(90deg);
    position: absolute;
    top:0;bottom:0;right: 15px;
    margin: auto;
    width: var(--font-small);height:var(--font-small);
}

.content_filter_select .expand-item:before, 
.client_ordering_select .expand-item:before {
    content: '';
    width: 25px;min-width:25px;
    height: 25px;
    border-radius: var(--border-radius);
    background: var(--light-bg-color);
    display: inline-block;
    margin-right: 10px;
}


.content_filter_select .expand-item.selected-filter, 
.client_ordering_select .expand-item.selected-filter{
	color: var(--primary-color);
}

.content_filter_select .expand-item.selected-filter:before,
.client_ordering_select .expand-item.selected-filter:before{
    background: var(--primary-color);
    opacity: var(--focus-opacity);
 }

.content_filter_select .expand-item.selected-filter:after,
.client_ordering_select .expand-item.selected-filter:after{
    content: '';
    width: 19px;
    height: 19px;
    border-radius: var(--border-radius);
    background: var(--primary-color);
    display: inline-block;
    margin: auto;
    margin-right: 10px;
    position: absolute;
    left: 3px;
    top: 0;
    bottom: 0;
}

.expandable.client_ordering_select .expand-item{
    white-space: normal;
    text-transform: capitalize;
    line-height: 150%;
}

.expandable.client_ordering_select .icon-search{
	font-size: var(--font-sub);
}

.expandable.client_ordering_select{
    display: flex;
    align-items: center;
    gap: 7px;
}

.client_ordering_select .expand {
    max-width: calc(var(--side-bar-width) - 25% - 20px);
	min-width: calc(var(--side-bar-width) - 50%);
}

/*** MULTICHECK BOX SELECT **/

.multi_select{
    display: inline-block;
    border-radius: var(--border-radius);
    color: var(--white-color);
    position: relative;
    width:  100%;
    background: var(--light-bg-color);
    cursor:pointer;
    transition: var(--transition);
}

.light .multi_select{
	background: var(--dark-bg-color);
}

.multi_select-selected{
    background: transparent;
    width: auto;
    border-radius: var(--border-radius);
    padding: 13px 20px;
    text-transform: capitalize;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    pointer-events: none;
}

.multi_select .expand-item{
	padding-right: 25px;
	text-transform: capitalize;
}

.multi_select .expand{
	left: 0 !important;
}

.multi_select-expand{
	background: transparent;
	transition: var(--transition);
	box-shadow: 0 0 0 0px transparent;
	border-radius: var(--border-radius);
}

.multi_select-expand.expand-active{
	background: var(--light-bg-color);
}

.multi_select-expand .expand{
	width:  100%;
}

.multi_select-selected:after{
	content: "\e901";

	  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icons' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

	font-size: var(--font-small);
    transform: rotate(90deg);
    position: absolute;
    top:0;bottom:0;right: 15px;
    margin: auto;
    width: var(--font-small);height:var(--font-small);
}

.multi_select .expand-item:before {
    content: '';
    width: 25px;
    height: 25px;
    border-radius: var(--border-radius);
    background: var(--light-bg-color);
    display: inline-block;
    margin-right: 10px;
}

.multi_select .expand-item.selected-item{
	color: var(--primary-color);
}

.multi_select .expand-item.selected-item:before {
    background: var(--primary-color);
    opacity: var(--focus-opacity);
 }

.multi_select .expand-item.selected-item:after{
    content: '';
    width: 19px;
    height: 19px;
    border-radius: var(--border-radius);
    background: var(--primary-color);
    display: inline-block;
    margin: auto;
    margin-right: 10px;
    position: absolute;
    left: 3px;
    top: 0;
    bottom: 0;
}






.search_input-by-database{
	width: 100%;
	display: flex;
	margin-bottom:  25px;
}

.search_input-by-database .search_input{
	margin-bottom: 0;
}

.database-select{
	color: var(--white-color);
  display: flex;
  overflow: hidden;
  border-radius: var(--border-radius);
  position: relative;
	margin-left: 8px;
	align-items: center;
}

.database-select:after {
    content: '';
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: absolute;
    background: var(--light-bg-color);
    z-index: -1;
    border-radius: var(--border-radius);
    opacity: var( --focus-opacity);
}


.database-select .switch_selector.equal_value{
	position: relative;
	z-index: 2;
	height: 100%;
	border-radius: 0;
	background: transparent;
	flex-basis: 85px !important;
  width: 85px !important;
}

.database-select .switch_element{
	height: calc(100% - 4px) !important;
  border-radius: var(--border-radius);
}

.database-select .switch_overlay{
	font-weight: 900;
	transition: var(--transition);
}

.database-select .switch_selector.equal_value .switch_element{
	background:  var(--light-bg-color);
}
.database-select .switch_checkbox:not(:checked) ~ .switch_selector .switch_overlay:nth-child(2){
	color:  var(--light-bg-color);
	font-weight: 400;
}
.database-select .switch_checkbox:checked ~ .switch_selector .switch_overlay:nth-child(1){
	color:  var(--light-bg-color);
	font-weight: 400;
}


.expand-active-search .expand-item:not(.expand-item-result),
.expand-active-search .expand-item-subhead{
	display: none;
}


.filter_no-results{
  display: none;

  padding: 12px 0;
  color: var(--white-color);
  opacity: var(--focus-opacity);
  font-size: var(--font-copy) !important;
  line-height: 110%;
  transition:  var(--transition);
  text-decoration: none;
  font-weight:  400 !important;
  letter-spacing: 0.02em;
  position: relative;
}

.filter_no-results.active-no-results{
	display: block;
}



.no-results{
	font-size: var(--font-small);
	color: var(--white-color);
	position: absolute;
	top:0;bottom:0;right: 10px;
	margin: auto;
	height: var(--font-small);
	z-index: 10;
	display: none;
}

.no-results.nothing{
	display: block;
}

.list_checkbox_input{
	display:none;
}

.list_item .list_checkbox{
	flex: none;
	margin: 0 20px;
	display: block;
	cursor:pointer;
}

.list_item .icon{
	color: var(--dark-bg-color);
	font-size: 24px;
	position: relative;
	z-index: 10;
	border-radius: var(--border-radius);
	box-shadow: 0 0 0 2px var(--light-bg-color);
}

.list_item input[type=checkbox]:checked ~ label, .filter_bar_list input[type=checkbox]:checked ~ label{
	background: var(--primary-color);
	box-shadow: 0 0 0 2px var(--primary-color);
}

/*
.list_item input[type=checkbox]:checked ~ label .icon{
	background:var(--primary-color);
	box-shadow: 0 0 0 2px var(--primary-color);
}
*/

.list_item input[type=checkbox]:checked ~ label .icon:before{
	background:var(--primary-color);
	box-shadow: 0 0 0 2px var(--primary-color);
	color: var(--primary-color);
	border-radius: var(--border-radius);
	opacity: var(--focus-opacity);
}
.list_item input[type=checkbox]:checked ~ label .icon:after{
	content: '';
	position: absolute;
	width: 19px;
	height: 19px;
	top: 0;left: 0;right: 0;bottom: 0;
	margin:  auto;
	background: var(--primary-color);
	border-radius: var(--border-radius);
}

.list_item input[type=checkbox]:checked ~ label:after{
	content: '';
	width: 100%;
	height: 100%;
	position: absolute;
	top:0;left:0;
	background: var(--light-bg-color);
}


.filter_bar_list{
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	margin-bottom: 10px;
}

.filter_bar_list .select_filter{
	margin-bottom: 0;
}

.select_all{
    display: block;
    color: var(--bg-color);
    font-size: 24px;
    position: relative;
    z-index: 10;
    border-radius: var(--border-radius);
    box-shadow: 0 0 0 2px var(--light-bg-color);
    flex: none;
    height: 28px;
    width: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-bottom: 4px;
}

.list_handler {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--white-color);
    margin: 20px 0 50px 0;
}

.prev_list_page[data-value="0"]{
	opacity: 0;
	pointer-events: none;
}

.prev_list_page, .next_list_page{
	cursor: pointer;
}

.placeholder_list_item{
	width: 100%;
	height: 80px;

	border-radius: var(--border-radius);
	margin: 5px 0 5px auto;

	background: linear-gradient(-70deg, var(--bg-color), var(--bg-color), var(--light-bg-color), var(--bg-color));
	background-size: 300% 300%;
	animation: loading 2s ease infinite;
}

.placeholder_list_item:nth-child(2){ animation-delay: 0.05s; }
.placeholder_list_item:nth-child(3){ animation-delay: 0.1s; }
.placeholder_list_item:nth-child(4){ animation-delay: 0.15s; }
.placeholder_list_item:nth-child(5){ animation-delay: 0.2s; }
.placeholder_list_item:nth-child(6){ animation-delay: 0.25s; }
.placeholder_list_item:nth-child(7){ animation-delay: 0.3s; }
.placeholder_list_item:nth-child(8){ animation-delay: 0.35s; }
.placeholder_list_item:nth-child(9){ animation-delay: 0.4s; }
.placeholder_list_item:nth-child(10){ animation-delay: 0.45s; }


@keyframes loading {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}



/****** CONTENT GROUPS *******/

.no_content_groups{
	margin: 20px 0;
	width: 100%;
	padding: 20px;
	border-radius: var(--border-radius);
	background: var(--dark-bg-color);
}


.content_group{
	margin: 5px 0;
	width: 100%;
	padding: 20px;
	border-radius: var(--border-radius);
	background: var(--dark-bg-color);	
}

.content_group-header{
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.content_group-details {
    display: flex;
    justify-content: space-between;
}

.content_group h3{
	font-size: var(--font-sub);
	cursor:pointer;
}


.content_group-body{
	height: 0px;
	opacity:0;
	padding: 0 5px;
	display: flex;
	overflow:hidden;
	transition: var(--transition);
	flex-direction: column;
}

.expand_content_group .content_group-body{
	overflow-y: scroll;
	height: 500px;
	padding: 20px 5px;
	opacity: 1;
	margin-top: 20px;
}

.expand_content_group .content_group-body::-webkit-scrollbar{
	width: 0px;
  height: 10px;
}

.expand_content_group .content_group-body::-webkit-scrollbar-thumb{
	background: var(--bg-color);
	border-radius: 10px;
}

.expand_content_group .content_group-body::-webkit-scrollbar-track{
	background: transparent;
}


.content_group-body p{
	max-width: 600px;
}


.content_group .icon-more, .content_group .icon-trash{
	padding: 5px 10px;
    background: var(--light-bg-color);
    color: var(--white-color);
    border-radius: var(--border-radius);
    font-size: 25px;
    cursor:pointer;
	display: flex;
    align-items: center;
    margin-left: 10px;
}


.content_group-content{
	display: flex;
	width:  100%;
	justify-content: space-between;
	align-items: flex-start;
	margin-top:  25px;
}

.content_group-content .content{
	flex-basis: 50%;
}

.content_group-content .content_group-settings{
	flex-basis:  48%;
}

.content_group-settings .search_input{
	margin: 10px 0;
}

.content-add select{
	margin-bottom:  10px;
}

.content_group-content-item:first-child{
	margin-top:  0 !important;
}

.content_group-content-item-detail{
	margin: 10px 0;
}
.content_group-content-item-detail .tags .tag{
	background: var(--bg-color);
	padding: 3px 10px;
}

.content_group-content-item-detail .edit-meal-nutrition p{
	box-shadow: 0 0 0 2px var(--bg-color);
}

.content_group-content-item-detail .edit-meal-ingredient{
	width: 100%;
	font-size: var(--font-copy);
	padding-bottom: 10px;
}

.content_group-content-item {
    padding: 10px 15px;
    background: var(--light-bg-color);
    margin: 5px 0;
    border-radius: var(--border-radius);
    font-size: var(--font-copy);
    display:  flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    width: 100%;
}

.content_group-content-item span{
	font-size:  var(--font-sub);
	margin-right:  10px;
}

.content_group-content-item .icon-minus{
	color:  var(--white-color);
	margin-right: 0;
	cursor: pointer;
	font-size:  25pt;
	align-self: baseline;
}
.content_group-content-item .icon-minus:before{
	position: relative;
	z-index: 11;
}

.content_group-content-item .icon-minus:hover:after{
	content: '';
	width:  100%;
	height:  100%;
	background:  var(--dark-bg-color);
	opacity: 0.8;
	top: 0;left: 0;
	position: absolute;
	pointer-events: none;
	z-index: 10;
}

.content_group-content-item .icon-minus:hover{
	color:  var(--error-color);
}

.content_group-content-item p{
	display:  flex;
	align-items: center;
}


.client_search-item{
	  display: flex;
    justify-content: flex-start;
    width: 100%;
    align-items: center;
    padding: 15px 0;
    border-radius: var(--border-radius);
    overflow: hidden;
    position: relative;
    cursor:pointer;
}

.client_search-item:hover{
	background: var(--light-bg-color);
}

.client_result-profile{
    width: 40px;
    height: 40px;
    background: var(--light-bg-color);
    background-size: cover;
    background-position: center;
    color: var(--white-color) !important;
    border-radius: 1000px;
    align-items: center;
    display: flex;
    justify-content: center;
	font-size: 20pt;
	margin:0 10px;
	cursor:pointer;
	position: relative;
}

.client_search-item .icon-plus {
    color: var(--white-color);
    font-size: 27pt;
    height: 27pt;
    position: absolute;
    top:0;bottom:0;right: 10px;
    margin: auto;
}

.user_in_group p{
	margin-top:  10px;
	font-size:  var(--font-small);

}

.clients_in_content_group{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    color: var(--white-color);

}

.clients_in_content_group .user_profile-group:not(:hover) .icon-minus{
	background:  var(--dark-bg-color);
}


/****** VIDEO CONTENT PAGE ******/

.my_videos, .ai_videos, .my_files, .my_exercises, .ai_exercises, .my_meals, .ai_meals, .my_foods, .ai_foods, .my_texts, .ai_texts {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.content_small {
	width: 24%;
	flex-basis: 24%;
	margin-right: 1%;
    min-height: 170px;
    position: relative;
    cursor:pointer;
}

.content_small:before{
	content: '';
	position: absolute;
	top:0;left:0;
	width: 100%;
	height: 100%;
	background: linear-gradient(to top, var(--dark-bg-color), var(--dark-bg-color-transparent));
	opacity:0.8;
	z-index: 5;
    border-radius: var(--border-radius);
}

.content_small .content_thumb {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-size: cover;
    background-position: center;
    border-radius: var(--border-radius);
    background-color: var(--dark-bg-color);
    overflow: hidden;
}

.content_small .content_thumb .placeholder_icon{
    color: var(--bg-color);
    position: absolute;
    top: 0;right: 0;left:0;bottom:0;
    width: 250px;
    height: 250px;
    font-size: 250px;
    margin: auto;
}

.content_small:hover .content_thumb{
    box-shadow: 0 0 0 2px var(--primary-color);	
}

.content_small:hover:after{
    box-shadow: 0 0 0 7px var(--primary-color);
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;left: 0;
    opacity: var(--focus-opacity);
    border-radius: var(--border-radius);
}

.content_highlight {
    background: var(--primary-color);
    color: var(--dark-bg-color);
    padding: 2px 10px;
    display: inline-block;
    border-radius: var(--border-radius);
    font-size: var(--font-small);

    position: absolute;
    top: -4px;right: 0;
    border-bottom-right-radius:  0;
    font-weight: 700;
}


.content_small .content_title {
    position: absolute;
    z-index: 10;
    width: 95%;
    right: 0;
    left: 0;
    bottom: 5%;
    margin: auto !important;
    color: var(--white-color);
    font-size: var(--font-copy);
    letter-spacing: 0.02em;
}



.content_small-workouts .placeholder_icon,
.content_small-meals .placeholder_icon,
.content_small-mealplans .placeholder_icon,
.content_small-texts .placeholder_icon{
	display: none;
}

.content_small-workouts,
.content_small-mealplans,
.content_small-meals,
.content_small-texts{
	min-height: auto;
}

.content_small-workouts .content_title,
.content_small-meals .content_title,
.content_small-mealplans .content_title,
.content_small-texts .content_title{
	align-items: center;
	padding: 15px 0 15px 15px;
	position: relative;
	bottom: 0;
	height: 100%;
}


.content_result {
    width: 100%;
    margin: 5px 0 0 0;
    font-size: var(--font-copy);
    color: var(--white-color);
    letter-spacing: 0.02em;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    border-radius: var(--border-radius);
    cursor:pointer;
    position: relative;
}

.content_result .content_title{
	position: relative;
	z-index: 2;
    padding: 15px 0 15px 25px;
    flex: 1;
}

.content_result:after {
    content: '';
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: absolute;
    background: var(--light-bg-color);
    z-index: -1;
    border-radius: var(--border-radius);
    opacity: var( --focus-opacity);
}


.content_result:hover{
	background: var(--light-bg-color);
}

.content_result:hover .ai-badge{
	opacity: var(--focus-opacity);
}

.content_result:last-child{
	margin-bottom: 15px;
}


.content_result .content_thumb{
    width: 30%;
    height: 70px;
	background-position: center;
	background-size: cover;
    background-color: var(--dark-bg-color);
    position: relative;
    overflow: hidden;
    border-top-left-radius: var(--border-radius);
    border-bottom-left-radius: var(--border-radius);
}

.content_result .content_title{
	flex-basis: 75%;
}

.content_result.extra_result_spacing{
	min-height: 70px;
}

.add_to_schedule.content_result{
	align-items:  stretch;
	min-height: 70px;
	position: relative;
}


.content_result.add_to_schedule:after {
    content: '';
    width: 100%;
    height: 100%;
    top: 0;left: 0;
    position: absolute;
    background: var(--light-bg-color);
    z-index: -1;
    border-radius: var(--border-radius);
    opacity: var( --focus-opacity);
}

.add_to_schedule.content_result .content_title{
	padding:0 15px;
	flex-basis: 100%;
	align-items: center;
	display: flex;
}

.add_to_schedule.content_result .icon-link{
	display: flex;
	align-items: center;
  font-size: 30px;
  margin-right: 15px;
}

.add_to_schedule.content_result .icon-more{
	display: flex;
	align-items: center;
}

.add_to_schedule.content_result .icon-more:before{
  font-size: 22px;
  margin-right: 15px;
  background: var(--bg-color);
  padding: 3px 5px;
  border-radius: var(--border-radius);
}

.add_to_schedule.content_result .ai-badge{
    font-size: var(--font-small);
    font-weight: 800;
    margin-right: 15px;
    background: var(--bg-color);
    padding: 5px 10px;
    border-radius: var(--border-radius);
    height: 28px;
    margin-top: 21px;
    box-shadow: 0 0 0 2px var(--primary-color);
}

.add_to_schedule.content_result .icon-copy{
	font-size: 20px;
}


.content_result .content_thumb .placeholder_icon {
    color: var(--bg-color);
    position: absolute;
    top: 0;right: 0;left:0;bottom:0;
    width: 100px;
    height: 100px;
    font-size: 100px;
    margin: auto;
}

.content_result:hover .content_thumb{
	opacity: var(--focus-opacity);
}

.add_to_schedule.content_result:hover .content_title{
	opacity: var(--focus-opacity);
}

.add_to_schedule.content_result:hover .icon-link{
	color:  var(--bg-color);
}

.exercise_substitution.content_result .content_thumb{
	min-height: 50px;
	cursor: pointer;
}

.content_result .preview_exercise{
    width: 30%;
    aspect-ratio: 16 / 9;
/*    height: 70px;*/
	background-position: center;
	background-size: cover;
    background-color: var(--dark-bg-color);
    border-top-left-radius: var(--border-radius);
    border-bottom-left-radius: var(--border-radius);
    position: relative;
    overflow: hidden;

}



.add_to_schedule .content_macros-auto-sync{
    font-size: var(--font-small);
    background: var(--light-bg-color);
    align-self: center;
    padding: 4px;
    border-radius: var(--border-radius);
    text-align: center;
    min-width: 50px;
    margin-right: 15px;
}

.exercise_substitution .content_title{
	min-height: 50px;
  display: flex;
  align-items: center;
  cursor: pointer;
}


.exercise_substitution.content_result{
	cursor: initial;
}
.exercise_substitution.content_result:hover{
	background: inherit;
}

.exercise_substitution.content_result:hover{
	background: inherit;
}

.exercise_substitution.content_result:hover .content_thumb{
	opacity: 1;
}

.exercise_substitution.content_result .content_thumb:hover{
	opacity: var(--focus-opacity)
}


.exercise_substitution .content_title:hover{
	opacity: var(--focus-opacity);
}

.load_related{
	padding: 0 15px;
	font-size: 25px;
	cursor: pointer;
}

.load_related:before{
    transform: rotate(90deg);
    display: inline-block;
    font-size: 19px;
}

.load_related:hover{
	color: var(--primary-color);
}

.content_result-related {
    padding-left: 40px;
}

.content_result-related .content_result:first-child{
	margin-top: 20px;
}

.content_result-related .content_result .content_title{
	padding-right: 10px;
}

.no_related_found{
	margin: 20px 0;
}

.content_result.exercise_substitution .spinner{
	display: none;
  border-top: 4px solid var(--white-color);
  left: auto;
  right: 12px;
  z-index: 10;
}


.add_to_content_group.content_result .content_thumb{
	height: 70px;
}

.add_to_schedule.content_result .content_thumb{
	height: 70px;
	margin-right: 0;
}

.add_to_content_group.content_result .icon-plus{
	font-size:  30px;
	margin-right:  15px;
}

.exercise_substitution.content_result, .add_to_content_group.content_result, .add_to_schedule.content_result{
	font-size: var(--font-copy);
}

.content_list_item {
    margin: 5px 0 5px auto;
    background: var(--dark-bg-color);
    color: var(--white-color);
    border-radius: var(--border-radius);
 	display: flex;
 	align-items: center;
 	justify-content: flex-start;
 	padding-right: 0px;
 	position: relative;
 	overflow: hidden;
 	min-height: 50px;
}

.content_details{
	padding: 10px 10px 10px 0;
	cursor:pointer;
}

.video_details:hover:after {
	content: '';
    width: 100%;height: 100%;
    position: absolute;
    pointer-events: none;
    box-shadow: 0 0 0 2px var(--primary-color);
    top:0;left:0;
    border-radius: var(--border-radius);
    z-index: 11;
}
/*
#program-select-search-results .content_list_item{
	background: transparent;
	margin:  0 !important;
}
*/
.list_item .content_title{
    color: var(--white-color);
    font-size: var(--font-copy);
    letter-spacing: 0.02em;
	position: relative;
	z-index: 10;
}

.list_item .content_tags{
	position: relative;
	z-index: 10;
}

.list_item .content_thumb {
    width: 130px;
    min-height: 70px;
    background-size: cover;
    background-position: center;
    flex: none;
    align-self: stretch;
	position: relative;
	z-index: 10;
	border-top-left-radius: var(--border-radius);
    border-bottom-left-radius: var(--border-radius);
}

.list_item .content_thumb span{
	position: absolute;
	bottom: 5px;
	right:5px;
	color: var(--white-color);
	font-size: var(--font-small);
}

.list_item .content_thumb .placeholder_icon {
	color: var(--bg-color);
	font-size:100px;
	width:100px;
	height:100px;
	position: absolute;
	top:0;left:0;bottom:0;right:0;
	margin: auto;
}

.content_list_item-no-results{
    margin: 15px 0 5px auto;
    box-shadow: 0 0 0 2px var(--light-bg-color);
    color: var(--white-color);
    border-radius: var(--border-radius);
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	padding-right: 0px;
 	position: relative;
 	min-height: 60px;
}

.connections {
    margin: 25px 0;
}

.connection {
    padding: 5px 10px;
    background: var(--light-bg-color);
    color: var(--white-color);
    border-radius: var(--border-radius);
    text-transform: capitalize;
    margin: 5px 0;
    font-size: var(--font-small);
    display: flex;
    align-items: center;
}

.connection:before {
    content: '';
    position: relative;
    width: 10px;
    height: 10px;
    display: inline-block;
    border-radius: 100px;
    margin-right: 10px;
    background: var(--primary-color);
}

#create-new-schedule-content{
	margin: 10px auto 25px auto !important;
}
.new-progress-schedule-metric{
	margin: 10px auto 25px auto !important;	
}

/*
.connection:after {
  font-family: 'icons' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;


  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  content: '\e91d';
  position: relative;
  font-size: 25px;
  display: inline-block;
  color: var(--bg-color);
}
*/
/*
.my_videos_list {
    overflow-anchor: none;
}*/


.content_tags span {
    background: var(--light-bg-color);
    margin: 5px 5px 0 0;
    padding: 5px;
    display: inline-block;
    border-radius: var(--border-radius);
    line-height: 100%;
    text-transform: capitalize;
    font-size: var(--font-small);
}


.list_item input[type=checkbox]:checked ~ .content_details .content_tags span{
	display: none;
}

.edit-content_thumb {
    width: 100%;
    min-height: 200px;
    position: relative;
    background-color:var(--dark-bg-color);
    border-radius: var(--border-radius);
    margin-bottom: 20px;
    background-size: cover;
    background-position: center;
}

.edit-content_thumb .placeholder_icon{
	font-size: 100px;
	width: 100px;
	height:100px;
	position: absolute;
	top:0;left:0;right:0;bottom:0;
	margin: auto;
	color: var(--bg-color);
}
/*
.edit-content_thumb .video-container{
	z-index: 101;
}*/

.content_thumb .icon-more{
	padding: 5px 10px;
  background: var(--dark-bg-color);
  color: var(--white-color);
  border-radius: var(--border-radius);
  font-size: 25px;
  cursor: pointer;
  display: flex;
  align-items: center;
  margin-left: 10px;
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 21;
}

.content_thumb.with_video{
	height: auto;
	min-height: auto !important;
	position: relative;
}

.edit-title{
	background: transparent;
    padding: 0;
    margin-bottom: 20px;
    font-size: var(--font-sub);
    border-radius: 0;
    width: 100%;
    text-transform: capitalize;
}

.edit-brand{
	background: transparent;
    padding: 0;
    margin-bottom: 20px;
    font-size: var(--font-copy);
    border-radius: 0;
    width: 100%;
    text-transform: capitalize;
}

.edit-desc{
	background: transparent;
	width: 100%;
	margin-bottom: 30px;
	outline: none;
	color: var(--white-color);
	font-size: var(--font-copy);
	font-weight: 300;
	resize: vertical;
	min-height: 120px;
}

.edit-desc-lg{
	min-height: 250px;
}

.edit-desc-sm{
	min-height: 75px;
}

.exercise-substitutions .search_input{
	margin-bottom:0;
}
.exercise-substitutions{
	margin-bottom: 20px;
}

.edit-file-link{
    width: 100%;
    display: flex;
    height: 100%;
    position: absolute;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    font-size: 130px;
    color: var(--white-color);
}

.edit-file-link .icon-media{
	display: none;
}

.content_thumb[data-value=""] .edit-file-link .icon-media{
	display: inline-block;
}

.edit-file-link:hover:before{
	content: "VIEW FILE";
	display: inline-flex;
	position: absolute;
	z-index: 2;
	color: var(--white-color);
    font-size: var(--font-copy);
    letter-spacing: 0.02em;
    font-weight: 700;
}


.edit-file-link:hover:after{
	content: "";
	position: absolute;
	width: 100%;
	height:100%;
	top:0;left:0;
	background: var(--dark-bg-color);
	opacity: 0.85;
	border-radius: var(--border-radius);
}

.col .tags{
	margin: 10px 0;
}

.edit_video .btn{
	margin-top: 30px;
}

.edit_video h2{
	font-size: var(--font-head);
	margin-bottom: 20px;
}

.edit-disabled{
	font-size: var(--font-sub);
	display: flex;
	align-items: center;
	justify-content: flex-start;
	background: var(--light-bg-color);
	border-radius: var(--border-radius);
	color: var(--white-color);
}

.edit-disabled .icon-lock{
	font-size: 40px;
}

.copy_of_ai .use_nom:before {
    content: "Note: This is a copy of an Ai Exercise, in order to maintain our algorithms some sections may not be editable.";
    display: flex;
    flex-basis: 100%;
    margin-bottom: 50px;
    color: var(--white-color);
    font-size: var(--font-small);
    letter-spacing: 0.02em;
    font-weight: 700;
}

.copy_of_ai .exercise-nom-container,
.copy_of_ai .exercise-equipment-title,
.copy_of_ai .exercise-location-title,
.copy_of_ai .exercise-difficulty-title,
.copy_of_ai .difficulty-contain,
.copy_of_ai .exercise-equipment-select,
.copy_of_ai .edit-myexercises-swaps,
.copy_of_ai .exercise-location {
	pointer-events: none;
    opacity: 0.5;
}

.copy_of_ai .search_input-by-database,
.copy_of_ai .edit-myexercises-swaps .switch,
.copy_of_ai .nom-switch,
.copy_of_ai .use_swaps .icon-minus,
.copy_of_ai .exercise-nom-add {
	display: none;
}



#edit-myexercises-thumb:not(.with_video)[data-value=""]:after, #edit-myvideos-title[data-value=""]:after, #edit-myfiles-title[data-value=""]:after{
		font-family: 'icons' !important;
    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    content: "\e918";
    position: absolute;
    width: 100%;
    text-align: center;
    font-size: 100px;
    height: 100px;
    top: 0;left: 0;right: 0;bottom: 0;
    margin: auto;
    color: var(--light-bg-color);
}


/***** WORKOUTS CONTENT PAGE ******/

.my_workouts, .ai_workouts{
    display: flex;
    justify-content: space-between;
    flex-wrap:  wrap;
}

.no_image{
	width: 48%;
	flex-basis: 48%;
	margin-bottom:  25px;
	background:  var(--dark-bg-color);
	color:  var(--white-color);
	position: relative;
	cursor:pointer;
	display: flex;
	justify-content: space-between;
	border-radius:  var(--border-radius);
	padding: 20px;
	align-items: center;
}

.no_image .content_title{
	color:  var(--white-color);
	margin-right: 15px;
	font-size:  var(--font-copy);
}

.no_image .icon-more {
    padding: 5px 10px;
    background: var(--light-bg-color);
    color: var(--white-color);
    border-radius: var(--border-radius);
    font-size: 25px;
    cursor: pointer;
    display: flex;
    align-items: center;
    margin-left: 10px;
}

.no_image .ai-badge{
    padding: 7px 15px;
    background: var(--light-bg-color);
    color: var(--white-color);
    border-radius: var(--border-radius);
    font-size: var(--font-small);
    font-weight: 800;
    cursor: pointer;
    display: flex;
    align-items: center;
    margin-left: 10px;	
    pointer-events: none;
    box-shadow: 0 0 0 2px var(--primary-color);
}

.content_result.no_image_result{
  padding: 20px 25px;
}

.content_result.no_image_result .icon-workouts,
.content_result.no_image_result .icon-programs,
.content_result.no_image_result .icon-mealplans{
	position: relative;
	font-size: 25px;
	position: relative;
  font-size: 25px;
  bottom: -4px;
  margin-right: 11px;
  line-height: 0%;
}

.content_result.no_image_result:hover{
	background: var(--light-bg-color);
}

.content_result.no_image_result:hover .content_title{
	opacity: var(--focus-opacity);
}

.client_action_result{
	text-align: left;
	padding: 0 !important;
	overflow: hidden;
}

.client_action_result .content_title{
	padding: 10px 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-basis: 100%;
}

.client_action_result:hover .content_title{
	opacity: 1 !important;
}
.client_action_result:hover .content_title .title-inner{
	opacity: var(--focus-opacity) !important;
}

.client_action_result .send {
    height: 40px;
    width: 40px;
    min-width: 40px;
    flex-basis: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--message-color);
    color: var(--message-fg-color);
    border-radius: 100px;
    font-size: 21pt;
    cursor: pointer;
    transition: var(--transition);
    transform: translateY(70px);
}
.client_action_result:hover .send{
	transform: translateY(0);
}

.full_width_results .no_image{
	flex-basis: 100%;
	width: 100%;
	margin-bottom: 5px;
}

/***** TAGS *****/

.tags{
	display: flex;
	justify-content: flex-start;
	align-items: center;
	flex-wrap: wrap;
}

.tag{
	padding: 3px 20px;
	padding-right: 0;
	margin: 5px;
	background: var(--light-bg-color);
	color: var(--white-color);
	font-size: var(--font-copy);
	border-radius: var(--border-radius);
	display: flex;
	justify-content: space-between;
	align-items: center;
	box-shadow: 0 0 0 2px var(--light-bg-color);
  position: relative;
  text-transform: capitalize;
}

.add_tag{
	cursor:pointer;
	padding:5px 20px;
	background: var(--body-bg);
}

.add_tag:hover{
	background: var(--light-bg-color);
}

.tag input {
    padding: 0;
    margin: 0;
    max-width: 110px;
    border-radius:0;
    background: transparent;
}

.tag .icon-plus, .tag .icon-minus {
	cursor:pointer;
    font-size: 26px;
    margin-left: 5px;
}
.tag .icon-plus:before, .tag .icon-minus:before{
	position: relative;
	z-index: 2;
}

.tag .icon-plus:hover {
	color: var(--bg-color);
}

.tag .icon-minus:hover {
	color: var(--error-color);
}

.tag .icon-minus:hover:after {
	content: '';
	width: calc(100% + 4px);
	height: calc(100% + 4px);
	background: var(--bg-color);
	opacity: 0.8;
	top: -2px;left: -2px;
	position: absolute;
	pointer-events: none;
	border-radius: var(--border-radius);
}


/*** WORKOUTS PAGE *****/

.workout-details {
    margin: 50px 0 0 0;
    padding-bottom: 20px;
    display: flex;
    justify-content: space-between;
}


.exercises_contain-superset{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	align-items: flex-start;
	position: relative;
	margin:  10px 0;
}
/*
.exercises_contain-set-single{
	position: relative;
}*/

.exercises_contain-set .exercise .sets{
	pointer-events: none;
	opacity: var(--focus-opacity);
}
.exercises_contain-set .exercise .sets .sets-name:after{
	content: "\e912";
  font-size: 23px;
	color:  var(--white-color);
	display: inline-flex;
	align-items: center;
	height:  100%;
	margin-left: 0;

  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icons' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;


  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.exercises_contain-set .exercise:nth-child(2) .sets .sets-name:after{
	display: none;
}

.exercises_contain-set .exercise:nth-child(2) .sets{
	pointer-events: all;
	opacity: 1;
}

.exercise-info, .exercise-headers{
	display: flex;
	justify-content: space-between;
	margin-top: 0px;
}

.exercise-info{
	margin-bottom:  10px;
}

.exercise-headers{
	margin-bottom:  10px;
}

.exercise{
	position: relative;
}

.exercises_contain-set, .exercises_contain-rest{
	display: block;
	cursor: auto;
	position: relative;
    padding: 20px 25px;
    border-radius: var(--border-radius);
    margin-top: 15px !important;
}

.exercises_contain-set{
    background: var(--dark-bg-color);
}

.exercises_contain-rest{
    background: var(--light-bg-color);
    overflow: hidden;

}

.exercise-header-spacer{
	flex-basis:  40px;
}

.exercise-info input, .exercise_search-contain{
	background:  transparent;
}

.exercise_search-contain:after{
	content:  '';
	top: 0;left: 0;
	width:  100%;height: 100%;
	background: var(--light-bg-color);
	position: absolute;
	opacity: var(--focus-opacity);
}

.exercise-name .exercise_search-contain .search_input:before{
	content: '\e927';
  font-size: 27px;
  height: 27px;
  opacity: var(--focus-opacity);
}

.exercise-name[data-content-id] .exercise_search-contain .search_input:before{
	content: '\e91d';
  font-size: 30px;
  height: 30px;
  opacity: 1;
}

.exercise_search-contain .database-select{
	display: none;
	height: 35px;
    align-self: center;
    margin-right: 10px;
}

.exercise-name.active-search .database-select{
	display: flex;
}

.exercise-name[data-content-id] .database-select{
	display: none !important;
}

.exercise-name[data-content-id] .exercise-search_filter, .exercise-name[data-content-id] .available_content_filters{
	display: none !important;
}


.exercise-name .available_content_filters p.content_filter,
.exercise-name .available_content_filters .expand-item{
	font-size: var(--font-small) !important;
}

.exercise-name .exercise-search_filter{
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.exercise-detail{
	display: flex;
	justify-content: flex-start;
	position: relative;
	z-index: 12;
}

.exercise-detail-flexible:before{
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--light-bg-color);
    position: absolute;
    opacity: var(--focus-opacity);
    border-radius: var(--border-radius);
}

.sets.exercise-detail,
.reps.exercise-detail {
	padding-left: 10px;
	max-height: 48px;
}

.exercise-detail-flexible{
	position: relative;
	z-index: 2;
}

.reps-value, .sets-value{
	margin-right: 5px;
}
.reps-name, .sets-name{
	padding: 0 10px;
	flex-basis: 100%;
	flex: 1;
}


.reps-name .exercise-value-placeholder-input, .sets-name  .exercise-value-placeholder-input{
	text-align: left;
	padding-left: 10px !important;
}

.reps-name .exercise-value-placeholder, .sets-name .exercise-value-placeholder{
	padding: 0 !important;
}


.reps-value, .sets-value, .reps-name, .sets-name{
	overflow: hidden;
  border-radius: var(--border-radius);
}

.exercise-detail .exercise-value{
	padding: 0;
}

.exercise-detail[data-fixed="true"] .icon-more,
.exercise-detail[data-fixed="true"] .icon-minus{
	display: none;
}

/*.exercise-name[data-content-id] .exercise-detail[data-fixed="true"] .icon-more,
.exercise-name[data-content-id] .exercise-detail[data-fixed="true"] .icon-minus{
	display: none;
}
*/
.exercise-value-placeholder {
    font-size: var(--font-sub);
    max-width: 100%;
    font-weight: 400;
    outline: none !important;
    letter-spacing: 0.05em;
    line-height: 120% !important;
    padding: 0 10px;
    display: inline-block;
    visibility: hidden;
    white-space: pre;
    z-index: 2;
    min-width: 34px;
}

.sets-name .exercise-value-placeholder{
	min-width: 44px;
}

.exercise-value-placeholder-input{
	  font-size: var(--font-sub);
    max-width: 100%;
    font-weight: 400;
    outline: none !important;
    padding: 0 !important;
    letter-spacing: 0.05em;
    line-height: 120% !important;
    position: absolute !important;
    margin:  0 !important;
    top: 0;left: 0;right: 0;bottom: 0;
    width: 100%;
    text-align: center;
    z-index: 2 !important;
}

.exercise-info .search_input{
		margin-bottom: 0;
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
    transition: var(--transition);
    background: transparent;
    position: relative;
    z-index: 2;
}

.exercise_search-contain {
    display: flex;
    border-radius: var(--border-radius);
    transition: var(--transition);
    position: relative;
    z-index: 3;
    overflow: hidden;
}

.toggle-exercise-detail {
    color: var(--white-color);
    align-items: center;
    display: flex;
    padding-right: 15px;
    border-top-right-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius);
    cursor: pointer;
    position: relative;
    z-index: 2;

    font-size:  16px;
}

.toggle-exercise-detail:before{
	transform: rotate(90deg);
}

.exercise-details-visible .toggle-exercise-detail:before{
	opacity: var(--focus-opacity);
}

.exercise_has_details .toggle-exercise-detail:after {
    content: '';
    position: absolute;
    top: calc(50% - 10px);
    right: calc(50% - 5px);
    width: 7px;
    height: 7px;
    border-radius: 100px;
    background: var(--primary-color);
}

.exercise-detail-notes {
    height: 60px;
    min-height: 60px;
    background: var(--light-bg-color) !important;
    border-radius: var(--border-radius);
    padding: 10px 15px;
    margin: 0 15px 10px 0;
    min-width: 25%;
    width: 25%;
    font-size: var(--font-copy);
    color: var(--white-color);
    max-width: 50%;
    max-height: 200px;
    z-index: 1;
}

.exercise-detail-notes:not(:placeholder-shown){
	height: 80px;
	width:33%;
}

.exercises_contain-superset{
    align-items: inherit;
		margin: 30px 0;
}

.exercises_contain-rest {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: var(--font-copy);
	color: var(--white-color);
	position: relative;
	line-height: 100%;
	padding:  10px 25px;
}

.exercises_contain-rest .seconds input{
    font-size: var(--font-copy);
    max-width: 100%;
    font-weight: 400;
    outline: none !important;
    padding: 0 !important;
    letter-spacing: 0.05em;
    line-height: 120% !important;
    position: absolute;
    top: 0;left: 0;right: 0;bottom: 0;
    width: 100%;
    text-align: center;
    z-index: 2;
    background:  transparent;
    border-radius: 0;
}

.exercises_contain-rest .seconds {
	text-align: left;
	display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  padding:  10px;
  border-radius: var(--border-radius);
/*  flex-basis: 30%;*/
}
.exercises_contain-rest .seconds p{
	font-size: var(--font-copy);
	font-weight: 400;
	line-height: 120%;
	z-index: 2;
}

.exercises_contain-rest .seconds:after{
	  content: '';
    top: 0;left: 0;
    width: 100%;height: 100%;
    background: var(--dark-bg-color);
    position: absolute;
    opacity: var(--focus-opacity);
    border-radius: var(--border-radius);
}

.seconds-flexible{
	position: relative;
	overflow: hidden;
}

.seconds-flexible-placeholder{
    font-size: var(--font-copy);
    max-width: 100%;
    font-weight: 400;
    outline: none !important;
    letter-spacing: 0.05em;
    line-height: 120% !important;
    padding: 0 10px;
    display: inline-block;
    visibility: hidden;
    white-space: pre;
    z-index: 2;

}

/*.exercises_contain-rest .seconds:after{
	content: "Seconds";
	font-size: var(--font-small);
}
*/
.converted_seconds .icon-stopwatch{
    font-size: 30px;
    margin-right: 10px;
}

.converted_seconds-time{
    font-weight: 900;
    margin-left: 8px;
}
.converted_seconds{ 
	flex: 1; 
	display: flex;
	align-items: center;
}

.rest-remove{
	color: var(--bg-color) !important;
	/*
display: none !important;
	visibility: hidden;
	pointer-events: none;*/
}

.exercises_contain .rest-remove:hover:after{
	background: var(--bg-color) !important;
}


.seconds{ flex-basis: 20%; }
.spacer{ flex-basis: 15%; }
.exercise-name{ flex-basis: 52%; }
.sets{ flex-basis: 20%; max-width: 20%; }
.reps{ flex-basis: 20%; max-width: 20%; }
.more{ flex-basis: 15%; }
.remove{ flex-basis: 5%; text-align: right;}

.superset_exercise .exercise-name{ flex-basis: 66%; }
.superset_exercise .sets, .superset_exercise .reps, .superset_exercise .more{ flex-basis: 16%; }


.exercises_contain .remove{
	color:  var(--light-bg-color);
	font-size: 40px;
	cursor: pointer;
  flex-basis: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}


.exercises_contain-set .exercises_contain .remove{
    align-self: flex-start;
    margin-top: 4px;
}


.exercises_contain .remove .icon-minus{
	position: relative;
	z-index:  13;
}

.add-new {
    height: 61px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--light-bg-color);
    border-radius: var(--border-radius);
    color: var(--white-color);
    padding: 0 20px;
    cursor:  pointer;
}
.add-new:hover{
	opacity:  var(--focus-opacity);
}
.exercise-details-visible .exercise_search-contain{
	border-bottom-left-radius: 0;
}

.exercises_contain-superset .exercise-name .search_input{
	margin-bottom:  0;
}

.exercise-name .content_result:last-child, .exercise-name .content_result-related:last-child{
	margin-bottom: 30px !important;
}

.exercise-name{
	position: relative;
}


/*.exercise-name .search_results:not(:hover){display: none;}*/
.exercise-name:not(.active-search) .search_results,
.exercise-name:not(.active-search) .exercise-search_filter{
	display: none;
}

.exercise-name.active-search:not([data-content-id]) .search_results{
	display: block;
	margin-top: 10px;
	padding-top: 10px;
}

/*.exercise-name .no-results.nothing{display: none;}*/
.exercise-name:focus-within .no-results.nothing{display: none;}



.exercise-name .search_results {
    max-height: 300px;
    overflow-y: scroll;
    position: relative;
    width: 100%;
}

.exercise-name .search_results::-webkit-scrollbar{
	width: 7px !important;
  	height: 0px !important;
}
.exercise-name .search_results::-webkit-scrollbar-track{
	background: transparent;
}

.exercise-name .search_results::-webkit-scrollbar-thumb{
	background: var(--light-bg-color);
	border-radius: 100px;
}

.exercise .exercise-name.active-search:after, .exercise .exercise-name.active-search:after {
	content: ' ';
	display: block !important;
	position: absolute;
	width: 100%;height: 50px;
	bottom: 0;left: 0;
	z-index: 2;
	pointer-events: none;
	background: linear-gradient(0deg, var(--dark-bg-color) 0%, var(--dark-bg-color-transparent) 80%);
}
.exercises_contain .remove:hover .icon-minus{
	color:  var(--error-color);
}

.exercises_contain .remove:hover:after {
  content: '';
  width: 100%;height: 100%;
  background: var(--dark-bg-color);
  position: absolute;
  top: 0;left: 0;
  z-index:  12;
  opacity: 0.85;
  pointer-events: none;
}

.superset_exercises{
	display: flex;
	justify-content: space-between;
	flex-basis: 93.8%;
	flex-wrap: wrap;
}

.superset_exercise{
	display: flex;
	justify-content: space-between;
	flex-basis: 100%;
	flex-wrap: wrap;
	margin-bottom:  10px;
}

.superset_exercise .exercise-value:disabled{

	pointer-events: none;
}

.exercise_btns{
	display: flex;
  justify-content: flex-start;
  margin-top:  25px;
}

.exercise_btn{
	background:  var(--dark-bg-color);
	border-radius:  var(--border-radius);
	padding:  10px 25px;
	margin-right: 5px;
	cursor: pointer;
}


.exercise_btn:hover{
	opacity: var(--focus-opacity);
}


.add_to_super {
    margin-top: 10px;
    background: var(--light-bg-color);
    color: var(--white-color);
    border-radius: var(--border-radius);
    padding: 5px 20px;
    font-size: var(--font-small);
    cursor: pointer;
}

.add_to_super:hover{
	opacity: var(--focus-opacity);
}

.source-exercises{
	display: flex;
    align-items: center;
    justify-content: space-between;
}

.source-exercises p{
	margin-right:  10px;
}


.source-exercises label{
	padding:  5px 10px;
	border-radius: var(--border-radius);
	color:  var(--white-color);
	margin:  5px 0;
	opacity: var(--focus-opacity);
}

.source-exercises input:checked ~ label {
	background: transparent;
}
.source-exercises input:checked + label {
	background: var(--light-bg-color);
	opacity: 1;
}

.linked_exercise{
	position: relative;
    width:  100%;
    cursor: pointer;
    z-index: 2;
}

.linked_exercise:before{
	content: "\e91d";

	/* use !important to prevent issues with browser extensions that change fonts */
	font-family: 'icons' !important;
	speak: never;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;

	position: absolute;
	top:0;bottom:0;left:2%;
	margin: auto;
	z-index: 1;

  font-size: 25px;
  height: 25px;
	color: var(--white-color);
}

.linked_exercise input{
    width: 100%;
    border-radius: var(--border-radius);
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
    padding-left: 45px;
    position: relative;
    opacity: 1;
    transition: var(--transition);
}

.exercise-details {
    display: flex;
    align-items: flex-end;
    flex-wrap:  wrap;
    justify-content: flex-start;
    border-bottom-left-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius);
    position: relative;
    max-height: 0px;
    transition: 0.25s ease-out;
    overflow: hidden;
    padding: 0 2% 0 2%;
    opacity: 0;
}

.exercise-details-visible .exercise-details{
	opacity: 1;
	max-height: 500px;
  padding: 10px 2% 10px 2%;
  margin-bottom: 10px;
  margin-top:  -5px;
  overflow: visible;
  opacity: 1;
}

.exercise-details:after{
	content:  '';
	position: absolute;
	left: 0;top: 0;
	width:  100%;height: 100%;
/*	background:  var(--light-bg-color);*/
background:  linear-gradient(-90deg, var(--bg-color-transparent) 0%, var(--bg-color) 100%);
	opacity: var(--focus-opacity);
    border-bottom-left-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius);
    pointer-events: none;
}

.exercise-details .exercise-detail:not(:last-child){
	margin-right: 15px;
}

input.exercise-col, p.exercise-col{
	padding: 0;
	background:  transparent;
	font-size: var(--font-copy);
	font-weight: 300;
	border-radius: 0;
	opacity: 1 !important;
}

p.exercise-col{
	margin-bottom:  5px;
}

.exercise-detail-value{
	padding: 10px 15px;
	background: var(--light-bg-color) !important;
}

.custom.exercise-detail .exercise-value-contain{
/*	max-width: 50%;*/
}

.exercise-value-contain {
    background: var(--light-bg-color);
    border-radius: var(--border-radius);
    position: relative;
}

.exercise-value-contain .icon-minus{
	position: absolute;
	top: 0;bottom: 0;right: 5px;
	margin:  auto;
	font-size:  26px;
	height: 26px;
	cursor: pointer;
	color: var(--white-color);
}

.exercise-value-contain .icon-minus:hover{
	color:  var(--error-color);
}

.exercise-custom-ratios {
    display: flex;
    max-width: 231px;
    justify-content: space-between;
    background:  transparent;
}

.exercise-custom-ratios .exercise-ratio-value{
    padding: 10px 15px;
    flex-basis: 31%;
    width:  31%;
}

.exercise-custom-ratios .icon-minus{
    position: relative;
    margin: auto 0px auto 5px;
    right: 0;
}

.ratio-sep{
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    margin-bottom: 7px;
    padding: 0 2px;
}


.custom.exercise-detail{
	margin-bottom:  10px;
	flex-direction: column;
}

.exercise-col-contain {
    align-items: center;
    display: flex;
}
.exercise-col-contain{
	margin-bottom:  5px;
}

.exercise-col-contain .icon-more{
	color: var(--light-bg-color);
    font-size: 21px;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.exercise-col-header .icon-plus{
	font-size:  28px;
	color:  var(--light-bg-color);
	cursor: pointer;
}
.exercise-col-header .icon-plus:hover{
	color: var(--primary-color);
}

.col-header-add-new{
	margin-bottom: 0 !important;
}


.per-set-rest{
	background: transparent !important;
	padding: 0;
	margin:  0 5px 0 0;
	display: inline-block;
	width: auto;
	border-radius: 0;
	color:  var(--primary-color);
}

.header-set-rests{
	font-size: var(--font-small) !important;
	text-align: right;
	line-height: 170%;
}

.header-set-rests .icon-stopwatch{
    font-size: 20px !important;
    position: relative;
    top: 2px;
   	color:  var(--primary-color);
}

.exercise-rests-input{
	background: var(--bg-color);
	padding: 5px 10px;
	border-radius: var(--border-radius);
	margin: 0 3px;
}
/*
.per-set-rest_desc{
	font-size: var(--font-copy) !important;
	font-weight: 400;
}*/


.per-set-rest-converted{
	font-weight: 600;
}

.add-exercise-detail:first-child{
	margin-top: 10px;
}

.add-exercise-detail {
    padding: 9px 15px;
    box-shadow: 0 0 0 2px var(--light-bg-color);
    border-radius: var(--border-radius);
    cursor: pointer;
    font-weight:  400;
	position: relative;
	z-index:  2;
	margin-bottom:  10px;
}

.add-exercise-detail:hover{
    background: var(--light-bg-color);
}


.exercises_contain-small{
	margin:0 auto 10px auto;
}

.exercises_contain-small .exercise-info{ flex-wrap: wrap; }
.exercises_contain-small .exercise-name{ flex-basis: 100%;  }
.exercises_contain-small .sets.exercise-detail, .exercises_contain-small .reps.exercise-detail{
	padding-left: 0;
	flex-basis: calc(48% - 20px);
	max-width: calc(48% - 20px);
	margin-top: 10px;
}
.exercises_contain-small .exercise-detail-flexible{
	padding: 8px 10px;
}
.exercises_contain-small .exercise-value-placeholder, .exercises_contain-small .exercise-value-placeholder-input,
.exercises_contain-small .exercises_contain-rest input, .exercises_contain-small .seconds-flexible-placeholder,
.exercises_contain-small .exercises_contain-rest p{
	font-size: var(--font-copy);
}
.exercises_contain-small .exercises_contain-rest{
	flex-wrap: wrap;
	font-size: var(--font-copy);
	padding: 10px 0 10px 10px;
}
.exercises_contain-small .seconds{ 
	flex-basis: calc(40% - 40px);
}
.exercises_contain-small input{
	margin-bottom: 0;
}

.exercises_contain-small .custom.exercise-detail{
	width: 100%;
	margin: 0 0 10px 0 !important;
}

.exercises_contain-small .exercise-value-contain{
	max-width: 100% !important;
}

.exercises_contain-small .exercise-detail-value {
    max-width: calc(100% - 35px);
}

.exercises_contain-small .exercise-detail-notes{
	width: 100%;
	max-width: 100%;
	margin-right:0;
}


.compact_schedule-edit .exercises_contain-set{
	padding: 0;
}

.compact_schedule-edit .exercise-details-visible .exercise-details{
	padding: 15px;
}

.compact_schedule-edit .exercise_search-contain:after, .compact_schedule-edit .exercise-detail-flexible:before{
	opacity: 1;
}

.compact_schedule-edit .icon-minus:hover:after{
	background: transparent;
}




.exercises_contain-disabled .icon-minus, 
.exercises_contain-disabled .icon-plus, 
.exercises_contain-disabled .add-exercise-detail{
	visibility: hidden;
	pointer-events: none;
}

.exercises_contain-disabled input{
	pointer-events: none;
}

/**** PROGRAM PAGE ******/
.my_programs{
    display: flex;
    justify-content: space-between;
    flex-wrap:  wrap;
}

.program-details {
    margin: 50px 0 0 0;
    padding-bottom: 20px;
    gap: 20px;
    display: flex;
    justify-content: flex-start;
}

.program-color{
	position: relative;
	width: 230px;
}

.program-color label{
	font-weight: 300;
    cursor: pointer;
    font-size: var(--font-copy);
    letter-spacing: 0.01em;
	color: var(--white-color);
	display: block;
}

.program-color input.color-picker{
	position: absolute;
	top:0;left:0;
}

.program-color input[type="text"]{
	color: var(--dark-bg-color);
	background: var(--temp-color);
}
.program_contain-header{
	margin-bottom: 10px;
}

.load-more-btn{
	display: none;
}

.month_arrangement ~ .load-more-btn{
	display: inline-block;
}

.month_arrangement ~ .save-program{
	display: none;
}

#bulk-add-program-to-list{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    color: var(--white-color);
    margin-top: 10px;
}

#bulk-add-program-to-list .user_in_group{
	flex-basis: 28.5%;
}

.month_arrangement .last_day_in_week .expand.direction-bottom-right {
    left: auto;
    right: 0;
}


/*** TEXTS PAGES ****/

.content_body{
	margin: 5px 0;
	position: relative;
}

.content_body p{
	font-size: var(--font-small);
	font-weight: 300;
	line-height: 1em;
	word-wrap: break-word;
}



/**** SCHEDULER *****/

.schedule_contain{
	position: relative;
	/*overflow: hidden;*/
	margin-bottom: 25px;
}

.schedule_contain:after, .coach-events:after{
	content: '';
	position: absolute;
	top: 0;right: 0;
	width: 10%;height: 100%;
	background: linear-gradient(90deg, var(--bg-color-transparent) 0%, var(--bg-color) 100%);
	pointer-events: none;
	z-index: 12;
}

.schedule_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 50px 0 30px 0;
    position: relative;
    z-index: 13;
    flex-wrap: wrap;
}


.schedule_title{
	flex-basis: 25%;
	font-size:  var(--font-head);
	font-weight: 800;
}

.prev-week-btn {
    display: flex;
    width: 160px;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
}

.schedule_arrange {
    background: var(--light-bg-color);
 		border-radius: var(--border-radius);
    color: var(--white-color);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-basis: 35%;
    position: relative;
    overflow: hidden;
}

.arrange_slider{
	width:  33%;height: 100%;
	position: absolute;
	left: 0;top: 0;
	border-radius: var(--border-radius);
	background:  var(--white-color);
	transition: var(--transition);
}

.schedule_arrange label {
    flex-basis: 33%;
    position: relative;
    z-index:  2;
    text-align: center;
    transition: var(--transition);
    padding:  7px 0;
}

.schedule_arrange.double label{
	flex-basis: 50%;
}
.schedule_arrange.double .arrange_slider{
	width:  50%;
}
.schedule_arrange.double input[value="week"]:checked ~ .arrange_slider{
	left:  50%;
}

.schedule_arrange input:checked + label{
	color: var(--dark-bg-color);
}

.schedule_arrange input[value="day"]:checked ~ .arrange_slider{
	left: 0;
}

.schedule_arrange input[value="week"]:checked ~ .arrange_slider{
	left: 33%;
}
.schedule_arrange input[value="month"]:checked ~ .arrange_slider{
	left: calc(66% + 4px);
}

.schedule_nav{
    display: flex;
    flex-wrap:  wrap;
    flex-basis: 25%;
    justify-content: flex-end;
    align-items: center;
	  color:  var(--white-color);
	  transition: var(--transition);
	  opacity: 1;
}

.schedule_nav .icon-arrow-right{
	cursor: pointer;
}


.schedule_nav .icon-arrow-right:hover{
	opacity: var(--focus-opacity);
}

.schedule_nav .icon-arrow-right:nth-child(1){
	transform: rotate(180deg);
}

.schedule_nav .schedule_selected_day{
	padding: 0 20px;
}


.schedule_body{
	display: flex;
	justify-content: flex-start;
	position: relative;
	overflow-y: hidden;
	overflow-x: scroll;
	padding-bottom: 150px;
}


.schedule_body::-webkit-scrollbar{
	width: 0px !important;
  height: 0px !important;
}
.schedule_body::-webkit-scrollbar-track{
	background: transparent;
}

.schedule_day{
	transition: var(--transition);
	border-right: 1px solid var(--light-bg-color);
	border-bottom: 1px solid var(--bg-color);
	padding: 10px;
	flex: 1 0;
	display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
}

.schedule_day-header{
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	font-size:  var(--font-sub);
	color:  var(--white-color);
	margin: 0;
}

.active_day .schedule_day-header{
	color:  var(--primary-color);
}

.schedule_day-header .expand{
	max-height: 250px;
}

.schedule_day-body{
	margin:  0;
}

.schedule_day-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 20px;
    color: var(--white-color);
    padding: 10px 0;
    margin-top: auto;
    gap: 20px;
    font-size: var(--font-sub);
}

.schedule_day-footer span{
	cursor: pointer;
    opacity: var(--focus-opacity);
}

.schedule_day-footer .copy_day:hover{
	color: var(--primary-color) !important;
	opacity: 1;
}
.schedule_day-footer .paste_day:hover{
	color: var(--error-color) !important;
	opacity: 1;
}

.schedule_day .copy_day:before, .schedule_day .paste_day:before{
	position: relative;
	z-index: 6;
}

.schedule_day .copy_day:after, .schedule_day .paste_day:after{
	pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;height: 100%;
    position: absolute;
    top: 0;left: 0;
    background: var(--bg-color);
    opacity: 0.9;
	font-family: 'Lato', sans-serif;
	color:  var(--white-color);
	font-size:  var(--font-sub);
	z-index: 5;
	font-weight: 900;
}

.schedule_day .copy_day:hover:after {
    content: attr(data-content);
}
.schedule_day .paste_day:hover:after {
    content: attr(data-content);
}
.schedule_day-header .show_actions{
	cursor: pointer;
	font-size: 35px;
}

.schedule_day:not(.active_day) .show_actions.icon-plus:before:hover{
	color: var(--primary-color) !important;
}

.schedule_day.active_day .show_actions.icon-plus:before:hover{
	opacity: var(--focus-opacity);
}


.schedule_day-number{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    position: relative;
    flex-basis: 1;
    font-size:  var(--font-copy);
}


.schedule_day-number .day-numb{
	color:  var(--white-color);
	font-weight: 900;
	margin-right: 10px;
}

.active_day .schedule_day-number .day-numb, .active_day .schedule_day-number .day-name-long, .active_day .schedule_day-number .day-name-short{
	color:  var(--primary-color);
	opacity: 1	;
}

.no_content_scheduled{
	width: 100%;
	padding: 25px 0;
	opacity: var(--focus-opacity);
	text-align: left;
}


.day-name-long, .day-name-short{
	transition: var(--transition);
	width: 100%;
	overflow: hidden;
	position: relative;
	top: 0; bottom: 0;
	margin: auto;
	opacity: var(--focus-opacity);
}

.schedule_day-list{
	margin-top:  20px;
}

.schedule_item:after {
	  pointer-events: none;
    content: '';
    position: absolute;
    top: 0;right: 0;
    border-radius: var(--border-radius);
    height: 100%;width: calc(30% + 35px);
    background: linear-gradient(90deg, var(--dark-bg-color-transparent) 0%, var(--dark-bg-color) 80%);
}

.schedule_item {
    padding: 20px 7% 20px 7%;
    width: 100%;
/*    overflow: hidden;
    z-index: 1;*/
    flex-wrap: wrap;
}


.compact_schedule-edit{
	flex-basis: 100%;
	margin-top:  15px;
	padding-top:  15px;
	min-height: 400px;
	border-top: 1px solid var(--light-bg-color);
	position: relative;
	z-index: 1;
}



.multi_block-desc [class^="icon-"]{
    margin-right: 7px;
    font-size: 20px;
}



.schedule_item .multi_block-title{
/*	flex-basis:  100%;*/
flex:  1;
  white-space: nowrap;
	overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 10px;
  display: block;
}

.multi_block-lock {

    color: var(--light-bg-color);
    z-index: 4;

  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icons' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

}

.multi_block-lock.locked:before {
	position: absolute;
	height:  46px;
	top: 20px;right: 10px;
    display: flex;
    align-items: center;
    font-size: 42px;
  content: "\e912";
  z-index: 3;
}

.multi_block-lock.locked:hover:before {
  content: "\e926";
}

.multi_block-lock.locked:after {
    content: '';
    width: 100%;
    height: 100%;
    background: var(--bg-color);
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.3;
    z-index: 2;
    cursor:  default;
}

.multi_block-lock.locked:hover:after {
    opacity: 0.8;
}

.multi_block-lock.locked ~ .icon-minus{
	display: none;
}

.multi_block-lock.locked ~ .multi_block-title .multi_block-head,
.multi_block-lock.locked ~ .multi_block-title .multi_block-desc{
	color:  var(--light-bg-color);
	pointer-events: none;
}

.multi_block-head input{
	background: transparent;
	padding:  0;
	border-radius: 0;
}


.schedule_item .icon-unlocked{
	color:  var(--light-bg-color) !important;
  margin: 0 0 0 4px;
  font-size: 22px !important;
}

.schedule_item .icon-unlocked:hover{
	opacity: 0.8;
}

.schedule_item .icon-unlocked:hover:before{
	content: "\e912";
}

.schedule_item .multi_block-extra:before{
	position: relative;
	height:  46px;
    display: flex;
    align-items: center;
}

.week_arrangement .schedule_item .multi_block-extra:before,
.month_arrangement .schedule_item .multi_block-extra:before,
.month_arrangement .schedule_item .multi_block-lock.locked:before,
.week_arrangement .schedule_item .multi_block-lock.locked:before{
	height: 35px;
}

/*
.schedule_item .multi_block-extra:before{
	position: absolute;
	height:  35px;
	top: 0;bottom: 0;right: 10px;
	margin: auto;
}*/

.schedule_item[data-value="custom"] .multi_block-desc span:not(.macros):nth-child(2):before{
	content:  'Custom ';
}

/*
.schedule_item[data-value="custom"] .multi_block-desc span:nth-child(2):after{
	content:  ' *';
}
*/
.month_seperator {
    display: flex;
    flex-basis: 100%;
    font-size: var(--font-head);
    font-weight: 900;
    color: var(--white-color);
    margin: 50px 0 25px 0;
}

.save-day, .clear-day{
	    font-size: var(--font-small);
    padding: 7px 20px !important;
    min-width: auto;
    display: none;
    margin: 5px auto !important;
    z-index: 1;
}

.has_unsaved_changes .save-day, .has_unsaved_changes .clear-day{
	display:  inline-block !important;
}

/* per day values */
.day_arrangement .schedule_day{
	flex-basis: 40%;
	max-width: 40%;
	min-height: 300px;
}

.day_arrangement .month_seperator{
	display: none;
}

.day_arrangement .day-name-short{
	width: 0px;
	opacity: 0;
	position:  absolute;
	left: 22px;
}

.day_arrangement .schedule_day-header .show_actions{
	padding-right: 10px;
}


/* per week values */
.week_arrangement .schedule_day{
	flex-basis: 14%;
	max-width: 14%;
	min-height: 300px;
}

.week_arrangement .month_seperator{
	display: none;
}


.week_arrangement .schedule_body:after {
    content: '';
    flex-basis: 14%;
    flex: 1 0;
    padding: 0 5%;
}
.week_arrangement .day-name-long{
	width: 0px;
	opacity: 0;
	position:  absolute;
	left: 22px;
}

.week_arrangement .schedule_item .multi_block-extra:before,
.week_arrangement .multi_block-lock.locked:before{
	right: 0;
}

/* per month values */
.month_arrangement .day-name-long{
	width: 0px;
	opacity: 0;
	position:  absolute;
	left: 22px;
}
.month_arrangement .schedule_day{
	flex-basis: 14.2%;
	max-width: 14.2%;
	border-bottom: 1px solid var(--light-bg-color);
	min-height: 150px;
}

.month_arrangement .schedule_body{
	flex-wrap:  wrap;
	z-index: 10;
	overflow: visible;
}
.month_arrangement .schedule_nav{
	pointer-events: none;
	opacity: 0;
}
.month_arrangement .schedule_day:not(.active_day) .schedule_day-header{
	color:  var(--white-color);
}

.month_arrangement .schedule_day:not(.active_day) .day-numb, .month_arrangement .schedule_day:not(.active_day) .show_actions{
	opacity: var(--focus-opacity);
}

.week_arrangement .schedule_action-text, .month_arrangement .schedule_action-text, .month_arrangement .multi_block-desc span, .week_arrangement .multi_block-desc span{
	display: none;
}

.month_arrangement .multi_block-extra:before,
.month_arrangement .multi_block-lock.locked:before {
	right: 0;
}

.month_arrangement .schedule_body{
	padding: 3px;
}

.month_arrangement .multi_block-desc, .week_arrangement .multi_block-desc{
	margin-bottom: 0;
	display: inline-flex;
  position: relative;
  top: 3px;
}
.month_arrangement .multi_block-desc [class^="icon-"], .week_arrangement .multi_block-desc [class^="icon-"]{
   display: inline-block !important;
   margin-right: 0;
}

.month_arrangement .multi_block-title, .week_arrangement .multi_block-title {
    padding-right: 3px;
    display: inline-block;
    font-size: var(--font-small);
}

.month_arrangement.schedule_contain:after{
	opacity: 0;
}

/*
.month_arrangement .schedule_item:after{
	width: 30%;
  background: linear-gradient(90deg, var(--dark-bg-color-transparent) 0%, var(--dark-bg-color) 100%);
}
*/


.month_arrangement .multi_block-desc .icon-unlocked, .week_arrangement .multi_block-desc .icon-unlocked{
	display: none !important;
}


.completed-icon {
    color: var(--primary-color);
    font-size: 25px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-color);
    border-radius: 100px;
    z-index: 1;
}

.incomplete-icon {
    color: var(--error-color);
    font-size: 25px;
    width: 40px;
    height: 40px;
    min-width: 40px;
    margin-left: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-color);
    border-radius: 100px;
    z-index: 1;
}

.day_arrangement .completed-icon,
.day_arrangement .incomplete-icon{
	margin-right: -10px;
}

.complete.mealplan_schedule_item  .completed-icon,
.incomplete.mealplan_schedule_item  .incomplete-icon{
	position: absolute;
	margin: auto;
	top:0;bottom:0;right:calc(7% - 10px);

	/* temp? */
	display:none;
}
/*
.complete.mealplan_schedule_item .multi_block-mealplan-macros,
.incomplete.mealplan_schedule_item .multi_block-mealplan-macros{
	margin-right: 50px;
}*/

.complete.schedule_item, .complete.recurring_schedule_item:before{
	background-color: var(--light-bg-color);
	opacity: 1;
}

.incomplete.schedule_item, .incomplete.recurring_schedule_item:before{
	background-color: var(--light-bg-color);
	opacity: 1;
}

.week_arrangement .complete.schedule_item,
.week_arrangement .incomplete.schedule_item,
.month_arrangement .complete.schedule_item,
.month_arrangement .incomplete.schedule_item{
	padding: 10px 7% 10px 7%;
}

.complete.schedule_item:after, .incomplete.schedule_item:after{
	background: linear-gradient(90deg, var(--light-bg-color-transparent) 0%, var(--light-bg-color) 80%);
}

/*.incomplete.schedule_item:after{
	background: linear-gradient(90deg, var(--bg-color-transparent) 0%, var(--bg-color) 80%);
}
*/

.schedule_item.complete .multi_block-extra,
.schedule_item.incomplete .multi_block-extra,
.schedule_item.complete .delete_mealplan_minus,
.schedule_item.incomplete .delete_mealplan_minus,
.schedule_item.complete .macro_widget-input-controls,
.schedule_item.incomplete .macro_widget-input-controls{
	display: none !important;
}



.add_content_to_schedule-forms .database-select,
.add_content_to_schedule-forms .expand-item.customize-item{
	display: none;
}



.day-linked .icon-link, .day-linked .icon-unlinked{
	display: none;
    font-size: 23px;
    margin: 4px 0 0 8px;
}

.day-linked .icon-link:before, .day-linked .icon-unlinked:before{
	z-index: 12;
	position: relative;
}

.month_arrangement .day-linked .icon-link, .month_arrangement .day-linked .icon-unlinked{
	font-size: 17px;
}

.has_programs .custom_day_items:not(.past_day) .day-linked .icon-unlinked{
	display: block;
}

.day-linked .icon-info{
	pointer-events: none;
}

/*.day-linked .icon-unlinked:not(.expand-active):hover .day-linked-info, 
.day-linked:hover .icon-unlinked:not(.expand-active) .day-linked-info{*/

.day-linked .day-linked-info{
    position: absolute;
    color: var(--white-color);
    z-index: 10;
    width: 252px;
    font-size: var(--font-small);
    background: var(--light-bg-color);
    padding: 5px 10px;
    border-radius: var(--border-radius);
    line-height: 120%;
    top: 21px;
    left: -45px;
    right: 0;
    margin: auto;
    box-shadow: 10px 10px 30px 4px rgba(6,6,6,0.8);
    display: none;
}

.day-linked:hover  .icon-unlinked:not(.expand-active) .day-linked-info{
	display: block;
}



.day-linked:hover .icon-unlinked:not(.expand-active):after{
    content: '';
    position: absolute;
    top: -5px;
    left: -5px;
    border-top-left-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius);
    width: calc(100% + 10px);
    height: calc(100% + 10px);
    background: var(--light-bg-color);
    z-index: 11;
}


/***** SMART ACTIONS *****/

.smart_actions-btns{
	margin-top:  25px;
}

.smart_actions-btns .btn{
	display: flex;
	align-items: center;
	color: var(--white-color);
	background:  var(--dark-bg-color);
	box-shadow: 0 0 0 0 var(--dark-bg-color);
	font-weight: 400;
	text-align: left;
}

.smart_actions-btns .btn:hover{
	box-shadow: 0 0 0 2px var(--primary-color);
}

.smart_actions-btns .btn [class^="icon-"]{
		font-size: 24px;
		position: relative;
		top: 2px;
		margin-right: 9px;
}

.compact_schedule-edit .smart_actions-btns .btn:not(:hover){
	  background: var(--bg-color);
    box-shadow: 0 0 0 0 var(--bg-color);
}

.compact_schedule-edit .smart_actions-btns{
	margin-top:  10px;
}

.smart_action-nutrition-action{
	display: flex;
	justify-content: space-between;
	align-items: center;
	color:  var(--white-color);
	margin: 15px 0;
}

.smart_action-nutrition-action input{
	max-width: 100px;
	padding: 10px 15px;
}
.smart_action_select{
	text-align: center;
}

.smart_action_select .add-bottom-margin{
	margin-bottom: 25px;
	text-align: left;
}

.smart_action_select .secondary_btn{
	display: inline-block;
	margin:  5px auto;
	color:  var(--white-color);
	width:  100%;
	text-align: center;
}
.smart_action_select .drawer_btn-back{
	margin-bottom: 10px;
}

.product-options{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	padding: 15px;
	background: var(--dark-bg-color);
	border-radius: var(--border-radius);
}

.product-options .small-select{
	max-width: 90px;
}

.product-options select, .product-options input, .product-options textarea{
	background: var(--bg-color);
}

.product-price{
	margin: 0 10px 0 0 !important;
	flex: 1;
	width: auto;
}

.product-title{
	flex-basis: 100%;
}


/****** CLIENT SCHEDULE *******/

.client_programs-header{
	display: flex;
	justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.client_programs-btns .secondary_btn_outline{
	display: inline-flex;
    width: auto;
    align-items: center;
    font-weight: 900;
    padding: 3.5px 10px;
    margin-right: 6px;
}

.client_programs-btns span[class^="icon-"]{
	font-size: 20px;
}

.client_programs-btns a{
	justify-content: center;
	flex: 1;
}

.client_program{
	border-radius: var(--border-radius);
	background: var(--light-bg-color);
	padding: 5px 5px 5px calc(var(--font-small) + 20px);
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
    width: 100%;
	max-width: 100%;
    min-width: 190px;
    position: relative;
	min-height: 42px;
}

.light .client_program{ background: var(--dark-bg-color)  }


.client_program.ended, .client_program.nothing-found{
	background: transparent;
}

.client_program.ended:after, .client_program.nothing-found:after{
	z-index: -1;
	content: '';
	position: absolute;
	width: 100%;height:100%;
	top:0;left:0;
	opacity: var(--focus-opacity);
	background: var(--dark-bg-color);
	border-radius: var(--border-radius);
}


.light .client_program.ended:after, .light .client_program.nothing-found:after{ background: var(--light-bg-color);  }

.client_program p {
	font-size: var(--font-small);
    text-overflow: ellipsis;
    text-wrap: nowrap;
    overflow: hidden;
}

.client_program p b{
	font-size: var(--font-small);
}

.client_program.ended p, .client_program.nothing-found p {
	opacity: var(--focus-opacity);
}

.client_program .icon-more {
	padding: 2px 8px;
    background: var(--bg-color);
    color: var(--white-color);
    border-radius: var(--border-radius);
    font-size: 20px;
    cursor:pointer;
	display: flex;
    align-items: center;
    margin-left: 10px;
}

.client_programs-list .placeholder_list_item{
	height: 40px;
}

.client_programs:not(.show-inactive) .client_programs-list .ended, .client_programs.show-inactive .show_inactive_btn{
	display: none !important;
}

.client_program-descriptor{
	display: flex;
	justify-content: space-between;
	flex-basis: 100%;
	align-items: center;
	gap: 5px;
	position: relative;
}

.client_program-descriptor span:first-child{
	display: block;
    text-overflow: ellipsis;
    text-wrap: nowrap;
    overflow: hidden;
}

.client_program.short .client_program-descriptor{
	display: block;
}

.client_program.short .client_program-descriptor span {
    text-overflow: ellipsis;
    display: block;
    text-wrap: nowrap;
    overflow: hidden;
}
.client_program:before{
	content:'';
	min-width: var(--font-small);height:var(--font-small);
	border-radius:100px;
	background: var(--p-color);
	display: inline-block;
	position: absolute;
	left:var(--font-small);top:0;bottom:0;margin:auto;
}

/*
.client_program-title:before {
    content: 'ACTIVE PROGRAM';
    display: block;
    font-size: var(--font-small);
    margin-bottom: 5px;
    font-weight: 900;
    color: var(--primary-color);
}
*/

.client_program-progress {
    display: block;
    font-size: var(--font-small);
    font-weight: 900;
    color: var(--primary-color);
    margin-bottom: 5px;
}

.client_program-title {
    font-size: var(--font-copy);
}

#program-select-search-results .content_title{
	flex-basis:  100%;
	font-size:  var(--font-copy);
}

.program-start-head {
	text-align: center;
	font-size:  var(--font-head);
	color:  var(--primary-color);
	font-weight:  700;
	margin-bottom:  -25px;
}


.program-start-day {
    display: flex;
    padding: 20px 0;
    justify-content: center;
    background: var(--light-bg-color);
    border-radius: var(--border-radius);
}

.program-start-day .icon-info {
	pointer-events: none;
    font-size: var(--font-sub) !important;
    margin-right: 5px;
}


@media all and (max-width: 800px) {
	.client_programs-btns {
		display: flex;
		width: 100%;
		align-items: center;
	}

	.client_programs-header{
		flex-direction: column;
		gap: 10px;
		align-items: flex-start;
	}

	.client_program{
		width: 100% !important;
		margin-left:0 !important;
	}
}


/****** CLIENT CHECKINS ***********/

.client_checkins{
	margin-bottom:  20px;
	display: flex;
	align-items: center;
	justify-content: space-around;
	flex-wrap: wrap;
}

.client_checkins .client_checkins-block:nth-last-child(-n+3){
	display: block;
}

.client_checkins-block{
	display: none;
	text-align: center;
	margin:  0 15px;
    padding: 10px 40px;
    border-radius: var(--border-radius);
}

.client_checkins-date{
	font-size: var(--font-sub);
	margin: 10px 0;
}
.client_checkins-date_desc{
	font-size:  var(--font-small);
	font-weight: 900;
}


.client_checkins-block .secondary_btn{
	display: inline-block;
}
.client_checkins-block .secondary_btn.disabled{
	opacity: var(--focus-opacity);
	pointer-events: none;
}
.client_checkins-block.active-checkin{
	background: var(--light-bg-color);
}
.client_checkins-block.active-checkin .secondary_btn{
	display: none;
}

.client_checkins-notification{
	background: var(--primary-color);
	padding: 15px 25px;
	color: var(--dark-bg-color);
	font-weight: 800;
	border-radius: var(--border-radius);
	margin-bottom: 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	letter-spacing: 0.01em;
	gap: 20px;
}

.client_checkins-notification .secondary_btn{
	color: var(--white-color);
	margin-right: 10px;
	text-align: center;
	justify-content: center;
}


.not_scheduled_checkin p.client_checkins-date{
	color:  var(--error-color);
}

.checkin_step{
	display: none;
}
.checkin_step.active_checkin_step{
	display: block;
}

.checkin_btn{
	padding:  10px 0;
	margin:  25px 0 !important;
}

#page-checkin-schedule .schedule_body{
	margin-top: 20px;
}

#page-checkin-schedule .schedule_day{
	justify-content: start;
}

#page-checkin-schedule .day_arrangement .schedule_day{
	border: none !important;
	padding: 0 !important;
}

#page-checkin-schedule .day_arrangement .schedule_body{
	overflow-x: hidden;
}

#page-checkin-schedule .week_arrangement .schedule_day{
	padding: 0 3px !important;
}
#page-checkin-schedule .week_arrangement .schedule_body:after{
	display: none;
}

#page-checkin-schedule .schedule_body{
	padding-bottom:  0;
}

#page-checkin-schedule .day_arrangement .schedule_day{
  flex-basis: calc(100% - 4px);
  max-width: calc(100% - 4px);
  margin-left: 2px;
  display: none;
}

#page-checkin-schedule .day_arrangement .schedule_day.active_day{
	display: flex;
}

#page-checkin-schedule .week_arrangement .schedule_day{
	flex-basis:  24%;
	max-width:  24%;
}
#page-checkin-schedule .week_arrangement .add_content_to_checkin-btn,
#page-checkin-schedule .week_arrangement .icon-minus,
#page-checkin-schedule .day_arrangement .schedule_day-header{
	display: none;
}

#page-checkin-schedule .week_arrangement .multi_block-title{
	text-overflow: unset;
}


#page-checkin-schedule .schedule_contain{
	margin-bottom: 0;
}
#page-checkin-schedule .schedule_contain:after{
	display: none;
}

#page-checkin-schedule .schedule_arrange{
	margin: 5px 0 15px 0;
}

#page-checkin-schedule .schedule_arrange label, #page-checkin-schedule .arrange_slider{
	flex-basis: 50%;
	width:  50%;
}

#page-checkin-schedule .schedule_arrange input[value="week"]:checked ~ .arrange_slider{
	left:  50%;
}

#page-checkin-schedule .week_arrangement .schedule_day{
	cursor: pointer;
}

#page-checkin-schedule .week_arrangement .schedule_day-body{
	pointer-events: none;
}

.schedule-checkin-date.checkin-date-head{
	text-align: center;
	font-size:  var(--font-head);
	color:  var(--primary-color);
	font-weight:  700;
	margin-bottom:  -25px;
}

.schedule-checkin-date-range{
	text-align: center;
	color:  var(--primary-color);
	font-weight:  700;	
	margin-bottom: 15px;
}

.checkin-schedule-date{
	text-align: center;
	font-size:  var(--font-head);
	color:  var(--white-color);
	font-weight:  700;
}


.datepicker .ui-datepicker-year, .datepicker .ui-datepicker-month{
	display: none;
}

#program-start-date.datepicker .ui-datepicker-month{
    position: relative;
    top: 32px;
    font-size: var(--font-copy);
    display: block;
    color: var(--light-bg-color);
    font-weight: 700;
}

.checkin_step h2{
	font-size:  var(--font-sub);
	text-transform: capitalize;
	text-align: center;
	display:  inline-block;
	width:  100%;
	margin-bottom:  15px;
}

.schedule-checkin-compare_progress{
	margin-top:  25px;
}

.schedule-checkin-compare_progress .search_input{
	margin-bottom:  10px;
}

.metric_to_compare{
	background: var(--dark-bg-color);
	border-radius:  var(--border-radius);
	padding:  10px 15px;
	margin-bottom:  10px;
}

.metric_to_compare-title{
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding:  10px 0;
}

.metric_to_compare-title p{
	font-weight:  900;
	color:  var(--primary-color);
	flex: 1;
}
.metric_sidebyside{
	display:  flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 10px;
}

.metric_sidebyside-col{
	flex-basis:  48%;
	flex: 1;
}
.metric_sidebyside-col h3{
	display:  inline-block;
	font-size: var(--font-sub);
	font-weight:  700;
	margin-bottom:  20px;
	text-align: center;
}
.metric_sidebyside-col p{
	text-align: left;
	display: inline-block;
	margin-bottom: 20px;
	font-size: var(--font-sub);
}

.metric_sidebyside-col p.long, .metric_sidebyside-col p.medium{
	font-size: var(--font-small);
}

.metric_sidebyside-date{
	padding: 10px 15px;
}

.metric_sidebyside-img{
	background-size:  cover;
	background-position: center;
	border-radius: var(--border-radius);
	width: 100%;
	margin-bottom:  15px;
}

/*.metric_sidebyside-img.vertical{
	aspect-ratio: 9 / 16;
}
.metric_sidebyside-img.horizontal{
	height: 150px;
}

.metric_sidebyside-img.none{
	height: 200px;
}
*/
.metric_sidebyside-col .player{
	margin-bottom:  15px;
}

#schedule-checkin-schedule .schedule_day{
	border:  none !important;
	padding: 0;
}

.add_content_to_checkin-btn{
    font-weight: 300;
    padding: 7px 10px;
    border-radius: var(--border-radius);
    cursor: pointer;
    z-index: 11;
    font-size: var(--font-small);
    box-shadow: 0 0 0 2px var(--light-bg-color);
    background: transparent;
    text-align: center;
    color: var(--white-color);
    width: 100%;
    margin: 3px auto 0 0;
}

.checkin-schedule-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--white-color);
    margin-bottom: 30px;
}

.checkin-schedule-header span{
	cursor: pointer;
}
.checkin-schedule-header span:hover{
	opacity: var(--focus-opacity);
}

#checkin-summary-items{
	margin-top:  25px;
}

.checkin_summary-empty{
	padding: 20px;
	background: var(--dark-bg-color);
	border-radius: var(--border-radius);
	width: 100%;
}

.checkin_summary-contain {
    padding: 20px 15px;
    margin:  5px 0;
    background: var(--dark-bg-color);
    border-radius: var(--border-radius);
}

.checkin_summary-head{
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.checkin_summary-title{
	display: flex;
	align-items: center;
	text-transform: capitalize;
}

.change_date {
    margin-left: 10px;
    font-size: var(--font-small);
}

.checkin_summary-title .change_date{
    display: contents;
}

.change_count{
	margin:0 7px;
}

.checkin_summary-head .icon{
	font-size:  25px;
	margin-right:  10px;
}

.checkin_summary-expand-btn{
	transform: rotate(90deg);
	font-size:  var(--font-small);
	transition:  var(--transition);
}
.checkin_summary-expand{
	display:  none;
	border-top: 1px solid var(--light-bg-color);
	margin-top:  15px;
	padding-top:  15px;
}

input.checkin_summary-expand-input:checked ~ .checkin_summary-expand{
	display: block;
}
input.checkin_summary-expand-input:checked ~ .checkin_summary-head{
	color:  var(--light-bg-color);
}

input.checkin_summary-expand-input:checked ~ .checkin_summary-head .checkin_summary-expand-btn{
	transform: rotate(-90deg);
}

.checkin_summary-expand .macro_widget.compare_macros{
	display: flex;
	justify-content: space-between;
}

.checkin_summary-change{
	margin:  10px 0;
	display:  flex;
  justify-content: space-between;
  align-items: center;
  border-radius: var(--border-radius);
  background: var(--light-bg-color);
  padding: 10px;
  position: relative;
}


.checkin_summary-change .icon{
    font-size: 25px;
    margin-right:  10px;
}
.checkin_summary-change .icon-minus{
	cursor: pointer;
	margin-right:  0;
}
.checkin_summary-change .icon-minus:hover{
	color:  var(--error-color);
}
.checkin_summary-change .icon-minus:before{
	position: relative;
	z-index:  3;
}

.checkin_summary-change .icon-minus:hover:after{
  content: '';
  width: 100%;height: 100%;
  background: var(--dark-bg-color);
  position: absolute;
  top: 0;left: 0;
  opacity: 0.8;
  pointer-events: none;
  z-index: 2;
}


.daily_nutrition-change{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	align-items: center;
	padding: 20px;
}

.daily_nutrition-change .change_date{
	flex-basis: 100%;
	margin-bottom:  16px;
	margin-left: 0;
}

.checkin_summary-macro{
	display: flex;
	flex-direction: column;
	text-align: left;
	justify-content: flex-start;
	margin: 0;
	color: var(--bg-color);
}

.checkin_summary-macro:last-child{
	margin-right: 20px;
}

.macro_change-original{
	font-size: var(--font-sub);
	position: relative;
	display: inline-block;
	font-weight: 600;
	letter-spacing: 0.01em;
}
.macro_change-descriptor{
	font-size: var(--font-small);
	letter-spacing: 0.02em;
	font-weight:  400;
	line-height: 100%;
}

.macro_change-amount{
	position: absolute;
	top: -9pt;
	right: -20px;
	font-weight: 700;
	color: var(--primary-color);
	font-size: var(--font-small);
}

.daily_macros-icon{
    margin-right: 7px;
    position: relative;
    font-size: 20px;
    top: -2px;

    display: none;
}

/*.macros[style*="display:none"]{

}*/


.daily_macros-add {
    cursor: pointer;
/*    color:  var(--dark-bg-color);*/
    font-weight: 800;
    margin-left: 3px;
    align-items: center;
    display: flex;
}

.daily_macros-add:after {
	content: '';
	position: absolute;
	width:  100%;height: 100%;
	top: 0;left: 0;
	background: var(--light-bg-color);
	z-index: -1;
}

.daily_macros-remove {
    cursor: pointer;
    color:  var(--dark-bg-color);
    background: transparent;
    font-weight: 800;
    margin-left: 3px;
    align-items: center;
    display: flex;
}


.daily_macros-remove:after {
	content: '';
	position: absolute;
	width:  100%;height: 100%;
	top: 0;left: 0;
	background: var(--primary-color);
	z-index: -1;
}

.daily_macros-add:hover:after{
	opacity: var(--focus-opacity);
}

.daily_macros-remove:hover{
	color:  var(--white-color);
}

.daily_macros-remove:hover:after{
	background: var(--error-color);
}

.daily_macros-remove, 
.daily_macros-add{
	position: absolute;
	top: -22px;
	right: 0;
	padding:  5px 10px;
	border-radius:  var(--border-radius);
	z-index: 5;
	overflow: hidden;
	font-weight: 600;
	max-width: 80%;
}


.mealplan-macro_header{
	font-size: var(--font-small);
    display: flex;
    align-items: center;
    margin-top: 7px;
}

.mealplan-macro_title {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}


.daily_macros-add .icon-plus, .daily_macros-remove .icon-minus{
	font-size: 21px;
	z-index: 1;
}


.daily_macros-add .icon-link, .daily_macros-remove .icon-unlinked{
	font-size: 21px;
	z-index: 1;
}


.week_arrangement .macro_widget-input-controls,
.month_arrangement .macro_widget-input-controls{
	display: none;
}
.week_arrangement .schedule_daily_macros .macro_widget-col,
.month_arrangement .schedule_daily_macros .macro_widget-col,
.week_arrangement .actual_macros_widget-macro{
	margin-right: 0;
	padding-right: 0;
	margin-bottom:  7px;
	flex-basis:  100%;
}

.week_arrangement .schedule_daily_macros .macro_widget-input input,
.week_arrangement .schedule_daily_macros .macro_widget-operator,
.month_arrangement .schedule_daily_macros .macro_widget-input input,
.month_arrangement .schedule_daily_macros .macro_widget-operator,
.week_arrangement .actual_macros_widget-macro{
	font-size: var(--font-copy);
}

.week_arrangement .schedule_daily_macros .macro_widget-input,
.month_arrangement .schedule_daily_macros .macro_widget-input{
	align-items: center;
}

.month_arrangement .macro_widget-cals,
.month_arrangement .macro_widget-carbs,
.month_arrangement .macro_widget-fats,
.month_arrangement .macro_widget-proteins,
.month_arrangement .multi_block-mealplan-macros,
.month_arrangement .schedule_actual_macros{
	display:  none !important;
}


.week_arrangement .daily_macros-remove .icon-minus, 
.week_arrangement .daily_macros-remove .mealplan-macro_title,
.month_arrangement .daily_macros-remove .icon-minus, 
.month_arrangement .daily_macros-remove .mealplan-macro_title{
	display: none;
}

.week_arrangement .daily_macros-remove:before, 
.month_arrangement .daily_macros-remove:before{
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icons' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  content:  '\e903';
  color:  var(--dark-bg-color);
  font-size: 17px;
}

.daily_macros-add-text{
	margin-left:  6px;
}

.week_arrangement .daily_macros-add-text, 
.month_arrangement .daily_macros-add-text{
	display: none;
}

.month_arrangement .schedule_daily_macros .macro_widget-header{
	margin-bottom: 0;
}

.week_arrangement .mealplan-macro_header, 
.month_arrangement .mealplan-macro_header{
	margin-top: 0;
	min-height: 35px;
}



.schedule_day-checkin{
	width: 100%;
	padding:  7px 5px 10px 5px;
	text-align: center;
	border-radius: var(--border-radius);
	color:  var(--dark-bg-color);
	font-weight: 800;
	background: var(--primary-color);
	margin-top: 20px;
	cursor: pointer;
}

.schedule_day-checkin .icon-checkin{
	font-size:  20px;
    position: relative;
    top: 2px;
}

.week_arrangement .schedule_day-checkin .extra-detail,
.month_arrangement .schedule_day-checkin .extra-detail{
	display: none;
}


.schedule_day-checkin + .schedule_daily_macros .macro_widget-custom,
.schedule_day-checkin ~ .schedule_day-body .schedule_day-list{
	margin-top: 10px;
}

.confirm_checkin-btns{
	display: flex;
	justify-content: space-between;
	column-gap: 10px;
}

.confirm_checkin-btns .secondary_btn{
	flex: 1;
	text-align: center;
}

.confirm_new_checkin_metric .existing_metric_step{
	width: 100%;
}
.confirm_new_checkin_metric .metric_data {
    box-shadow: 0 0 0 2px var(--light-bg-color);
}
.confirm_new_checkin_metric .new_metric_step .secondary_btn{
    display: inline-block;
    margin: 5px auto;
    color: var(--white-color);
    width: 100%;
    text-align: center;
}

#confirm-new-checkin-metrics{
	overflow-y: scroll;
	max-height: 400px;
    padding: 0 3px;
}



/** CLIENT CHECKINS PAGE ****/

.checkin_data{
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding-bottom: 100px;
  margin-top: 20px;
}

.checkin_data-metric{
  flex: 1;
  background: var(--dark-bg-color);
  padding: 20px;
  border-radius: var(--border-radius);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  height: fit-content;
}

.checkin_data-metric.metric-type-number,
.checkin_data-metric.metric-type-time{
/*  padding:30px 20px;*/
}

.checkin_data-metric.metric-type-photo,
.checkin_data-metric.metric-type-video{
  padding: 0;
  background: transparent;
}

.metric-type-number .checkin_data-metric-input,
.metric-type-time .checkin_data-metric-input{
  font-size: var(--font-sub);
}

.checkin_data-label{
  font-size: var(--font-small);
  margin-bottom: 10px;
  font-weight: 800;
  color: var(--primary-color);
  flex-basis: 100%;
}

.checkin_data-metric-col{
	flex: 1;
}

.checkin_data-metric .graph_container{
	max-height: 50px;
	height: auto;
}

.checkin_data-percent-change {
    background: var(--bg-color);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-left: 15px;
    border-radius: var(--border-radius);
    padding: 0 10px;
    color: var(--white-color);
    font-size: calc(var(--font-small) / 1.2);
    font-weight:800;
}

.icon-percent-increase{
	font-size: 20px;
	margin-top: -10px;
}

.icon-percent-decrease{
	font-size: 20px;
	margin-bottom: -10px;
}

.icon-percent-increase:before{transform: rotateZ(-90deg);display:block;}
.icon-percent-decrease:before{transform: rotateZ(90deg);display:block;}


.checkin_data-metric.metric-type-number,
.checkin_data-metric.metric-type-time{
  flex-basis: 48%;
}

.checkin_data-metric.metric-type-textfield.length-medium,
.checkin_data-metric.metric-type-textfield.length-short{
  flex-basis: 48%;
}


.checkin_data-metric.metric-type-textfield.length-long{
  flex-basis: 100%;
}

.checkin_data-metric.metric-type-video{
  flex-basis: 48%;
  max-width: 48%;
}

.checkin_data-metric-input{
  display: inline-flex;
  flex: 1;
  align-self: center;
}

.metric-type-photo{
  flex-basis: 48%;
}

.metric-type-photo .metric_sidebyside{
	width: 100%;
}

.metric-type-photo .metric_sidebyside p{
	font-size: var(--font-copy);
	margin-bottom: 10px;
}


.checkin_data-col{
	flex-basis: 48%;
    gap: 10px;
    display: inline-flex;
    flex-direction: column;
    align-self: flex-start;
}

.checkin_data-col .checkin_data-metric{
	flex-basis: 100% !important;
}


@media all and (max-width: 1080px) {
	.checkin_data-col, .checkin_data-metric{
	    max-width: 100% !important;
	    flex-basis: 100% !important;
	}

	.client_checkins-notification .secondary_btn{
		width: 100%;
	}

	.client_checkins-notification{
		flex-wrap: wrap;
	}
}

/**** RAW DATE PICKER ****/

.datepicker {
  width: 100%;
  background: transparent;
  margin: 0 auto;
  overflow: hidden;
  max-width: 500px;
}

.datepicker table{
  background: transparent;
}

.ui-datepicker-today a{
/*  opacity:  var(--focus-opacity);*/
  font-weight: 900;
}

.ui-datepicker-inline {
  padding-bottom: 25px;
}

.ui-datepicker-header {
  text-align: center;
  padding-bottom: 60px;
  color: var(--white-color);
  font-size:  var(--font-small);
  font-weight:  200;
}

.ui-datepicker-prev,
.ui-datepicker-next {
    display: inline;
    float: left;
    cursor: pointer;
    font-size: 16px;
    padding: 0;
}
  
.ui-datepicker-next {
    float: right;
}

.ui-datepicker-calendar {
    width: 100%;
    text-align: center;
}

.ui-datepicker-calendar tbody td {
  width: 2.5rem;
  height:2.5rem;
  text-align: center;
  padding: 0;
}

.ui-datepicker-calendar tbody td a {
  display: block;
  text-decoration: none;
  border-radius: 100px;
    padding: 10px;
}

.ui-datepicker-calendar tbody td span{
  opacity:var(--focus-opacity);
      color: var(--white-color);
      font-weight:  200;
}

.ui-datepicker-calendar tbody td a:hover {
  opacity:  var(--focus-opacity);
  background:  var(--light-bg-color);
}


.ui-state-active, .ui-datepicker-calendar tbody td a.ui-state-active:hover{
  background: var(--light-bg-color);
  color: var(--primary-color) !important;
  opacity: 1;
}

.ui-datepicker-calendar thead th {
  padding: 0.25em 0;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 400;
  padding-bottom: 20px;
  color: var(--white-color);
}

#datepicker a{
  color: var(--white-color);
}



/****** MACRO WIDGET ******/

.macro_widget{
	width:  100%;
	color:  var(--white-color);
    margin: 45px 0 10px 0;
    position: relative;
    line-height: initial;
}

.macro_widget-header{
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-basis:  100%;
	margin-bottom:  15px;
}

.schedule_daily_macros .macro_widget-header{
	margin-bottom: 11px;
}

.macro_widget-header p{
	font-size: var(--font-small);
	display: flex;
	align-items: center;
}

.macro_profile, .macro_profile_for{
	font-size: var(--font-copy);
	text-transform: capitalize;
	color:  var(--light-bg-color);
	/*display: none;*/
}

.macro_widget-custom {
    display: flex;
    margin-top: 20px;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap:  wrap;
    padding:  15px;
    background:  var(--dark-bg-color);
	border-radius: var(--border-radius);
}

.macro_widget-custom-vertical {
    display: inline-flex;
    margin-top: 20px;
    justify-content: space-between;
    align-items: flex-start;
    flex-direction: column;
    flex-wrap:  wrap;
    padding:0;
    background:  var(--dark-bg-color);
	border-radius: var(--border-radius);
	flex-basis: 33%;
}

.macro_widget-custom-vertical.force-right{
	align-items: flex-end;
}

.macro_widget-custom-vertical .macro_widget-col{
	margin-bottom: 15px;
}

.use_auto .macro_widget-custom, .use_auto .macro_format, .use_calculator .macro_widget-custom, .use_calculator .macro_widget-auto{
	display: none !important;
}

.settings_item .macro_widget-custom{
	padding: 30px;
	margin-bottom: 30px;
}

.macro_widget-compare {
    align-items: center;
}

.macro_widget-compare input, .macro_widget-compare .macro_widget-operator{
	color: var(--primary-color);
}

.macro_widget-compare .macro_widget-operator{
	margin-right: 0;
}

.macro_widget-input{
	display: flex;
/*	justify-content: space-between;*/
	align-items: flex-end;
}

.macro_widget-input input {
    padding: 0;
    background: transparent;
    font-size: var(--font-sub);
    margin-bottom: 0;
    border-radius: 0;
    opacity: 1 !important;
    z-index: 2;
}

.macro_widget-col.disabled-col{
	opacity: var(--focus-opacity);
}

.macro_widget-disabled{
	background: var(--light-bg-color);
}

.macro_widget-disabled .macro_widget-col.disabled-col{
	opacity: 1;
}

/*.macro_widget-col{
	margin-right:  5px;
}
*/

.macro_widget-input-controls{
	display: flex;
	flex-direction: column;
	height: 100%;
	margin: 0 3px;
}

.macro_widget-input-controls span:first-child{
	margin-bottom:  2px;
}

.macro_widget-input-controls span{
	cursor: pointer;
	background:  var(--light-bg-color);
	border-radius: var(--border-radius);
	padding:  0 6px;
	text-align: center;
	font-size:  10px;
}

.macro_widget-input-controls span:hover{
	opacity: var(--focus-opacity);
}

.macro_widget-input input::-webkit-outer-spin-button,
.macro_widget-input input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.macro_widget-input input[type=number] {
  -moz-appearance: textfield;
}

.macro_widget-input-desc{
	font-size:  var(--font-small);
}

.macro_percent .number-for-grams{
	display: none;
}

.macro_grams .number-for-percent{
	display: none;
}

.macro_widget-operator{
	margin-right: 5px;
	font-size:  var(--font-sub);
}

.macro_grams .macro_widget-operator:after{
	content: 'g';
}

.macro_percent .macro_widget-operator:after{
	content: '%';
}

.macro_profile-title{
	color:  var(--white-color);
}

.macro_profile-title:after{
	content: '\e901';
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icons' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  margin-left: 15px;
  font-size: 15px;
  transform: rotate(90deg);
  position: relative;
  display: inline-block;
}

.macro_widget-auto-btn {
    font-size: 13px;
    border-radius: 100px;
    background: var(--light-bg-color);
    padding: 3px 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.macro_widget-controls{
	width:  100%;
	   position: absolute;
    top: -33px;left: 0;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}
.macro_widget-controls p{
	max-width: 100%;
}

.macro_widget-btns{
	display:  flex;
	align-items:  end;
}

.use_auto .macro_widget-btns{
	width:  100%;
	justify-content: space-between;
}

.macro_widget-auto-btn:hover{
	opacity: var(--focus-opacity);
}


.macro_widget-auto-btn .icon-calc{
	margin-right:  5px;
	font-size:  var(--font-copy);
}

/*
.use_auto .macro_widget-auto-btn{
	background:  var(--dark-bg-color);
}*/

.use_auto_macros_switch{
	justify-content: center;
}

.use_auto_macros_switch .icon-refresh{
	margin-right:  2px;
	font-size:  24px;
}

.use_auto_macros_switch label{
	margin-right:  10px;
}
.use_auto_macros_switch .switch_selector.equal_value{
	flex-basis: 135px !important;
	width:  135px !important;
}

.macro_widget-auto{
	display:  none;
	overflow: hidden;
    padding:  15px;
    background:  var(--dark-bg-color);
	border-radius: var(--border-radius);
}

.use_auto .macro_widget-auto{
	display: block;
}

.macro_widget-slider{
	margin:  20px 0;
	padding:  0;
	flex-basis:  100%;
	position: relative;
}
.macro_widget-custom .macro_widget-slider{
	display: none;
}
.use_expanded .macro_widget-slider, .use_expanded .macro_profile{
	display: block;
}

.macro_profile_for{
	display:  block;
}

.use_expanded .macro_profile_for{
	display: none;
}

.macro_widget-auto .nutrition_goal{
margin-top: 10px;
}


/*.macro_widget-slider-header, .macro_widget-slider-footer{
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding:  0 10px;
	position: relative;
}
*/
.macro_widget-slider-header p, .macro_widget-slider-footer p{
	position: absolute;
}

.macro_widget-slider-header p:nth-child(1){ left: 10px; top: 0;}
.macro_widget-slider-footer p:nth-child(1){ left: 10px; bottom: 0;}
.macro_widget-slider-header p:nth-child(2){
	left: 0; right: 0;
	top: 0;
	margin: auto;
	text-align: center;
}

.macro_widget-slider-footer p:nth-child(2){
	left: 0; right: 0;
	bottom: 0;
	margin: auto;
	text-align: center;
}
.macro_widget-slider-header p:nth-child(3){ right: 10px; top: 0; } 
.macro_widget-slider-footer p:nth-child(3){ right: 10px; bottom: 0; }




.macro_widget-slider-header p, .macro_widget-slider-footer p, p.slider_current-value{
	color:  var(--light-bg-color);
	font-size: var(--font-small);
	-webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; 
}

.macro_widget-slider-line{
	display: flex;
	align-items: center;
/*  width: calc(100% - 50px);*/
	width: 100%;
  margin: 20px auto;
  height:  80px;
}

.macro_widget-slider-box{
	width:  100%;
	height: 2px;
	background:  var(--light-bg-color);
	position: relative;
}

.macro_widget-slider-controls{
	background:  var(--primary-color);
	width:  20px;
	height:  20px;
	margin-left:  -10px;
	border-radius: 100px;
	font-weight:  900;
	position: absolute;
	z-index: 3;
	cursor: pointer;
}

.macro_widget-slider-percent, .macro_widget-slider-cals{
	position: absolute;
	color:  var(--primary-color);
	background: linear-gradient(-90deg, var(--dark-bg-color-transparent) 0%, var(--dark-bg-color) 20%, var(--dark-bg-color) 80%, var(--dark-bg-color-transparent) 100%);
	pointer-events: none;
	z-index: 3;
	padding:  0 10px;
	text-align: center;
	margin:  auto;
}

.macro_widget-slider-percent{ top: 0;}
.macro_widget-slider-percent:after{
	content:  attr(data-content);
}

.macro_widget-slider-cals{ bottom: 0;}
.macro_widget-slider-cals:after{
	content:  attr(data-content);
}




.macro_widget-custom .macro_widget-slider-cals{
	display: none;
}

.macro_widget-custom .macro_widget-slider-percent{
	bottom:  0;
	top:  inherit;
}

.macro_widget-custom .macro_widget-slider-line{
	height: 40px;
}


.macro_widget-slider-auto{
	width: calc(100% - 36px) !important;
	-webkit-appearance: none;
	padding: 0;margin-bottom: 0 !important;
	background:  transparent;
	position: relative;
	margin:  0 auto;
}

.macro_widget-slider-auto:focus {
  outline: none;
}

.macro_widget-slider-auto::-webkit-slider-runnable-track {
  width: 100%;
  height: 2px;
  cursor: pointer;
  background: var(--light-bg-color);
  border-radius: 100px;
}
.macro_widget-slider-auto::-webkit-slider-thumb {
  border: 0px solid rgba(0, 0, 0, 0);
  height: 20px;
  width: 20px;
  border-radius: 100px;
  background: var(--primary-color);
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -10px;
  position: relative;
}

.macro_widget-slider-auto::-webkit-slider-thumb:after{
	position: absolute;
	content: attr(data-content);
}

.new-macro-profile{
	min-width:  250px;
	padding:  10px;
}

.macro_widget-calculator{
	display: none;
	padding:  15px;
	justify-content: space-between;
	background:  var(--dark-bg-color);
	border-radius: var(--border-radius);
	flex-wrap: wrap;
}
.macro_widget-calculator-col:nth-child(1){
	flex-basis:  100%;
}

.macro_widget-calculator-col{
	flex-basis: 48%;
	margin-bottom: 10px;
}

.macro_widget-calculator-col select, .macro_widget-calculator-col input{
	width: 100% !important;
	max-width: 100% !important;
	padding: 10px 15px !important;
	margin-top:  5px;
}

.metric_select-contain{
	position: relative;
	display: inline-block;
}

.metric_select-contain select{
	background:  transparent;
	padding: 0 20px 0 0 !important;
	width:  auto !important;
	display: inline-block;
	cursor: pointer;
	font-size: var(--font-copy);
	margin:  0;
}

.metric_select-contain select ~ .icon-arrow-right{
	transform: rotate(90deg);
	font-size:  var(--font-small);
	display: inline-block;
	position: absolute;
	right: 9px;top: 3px;bottom: 0;
	margin: auto;
	pointer-events: none;
}

.use_calculator .macro_widget-calculator{
	display: flex;
}
.use_calculator .macro_widget-auto-btn{
	background:  var(--primary-color);
	color:  var(--dark-bg-color);
}

.suggested_calories{
	margin-top: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.new-calculated-calories{
	font-size:  var(--font-sub);
}
.apply_calories_btn{
	    max-width: 150px;
    padding: 10px;
    margin: 0;
}

.macro_compact-btn{
	font-size:  23px;
	cursor: pointer;
	color:  var(--white-color);
}

.macro_compact-btn:hover{
	opacity: var(--focus-opacity);
}

.use_expanded .macro_compact-btn{
	color:  var(--primary-color);
}

.auto_mealplan-connected{
	display: none;
	color:  var(--dark-bg-color);
}

.auto_mealplan-connected:after{
	background-color:  var(--primary-color);
}

.macro_widget.auto_mealplan .daily_macros-add{
	display: none;
}

.macro_widget.auto_mealplan .auto_mealplan-connected{
	display: flex;
}

.macro_widget.client_main_nutrition{
	margin: 55px 0 30px 0;
	padding-bottom: 10px;
	border-bottom:  1px solid var(--light-bg-color);
}

.macro_widget.auto_mealplan .macro_widget-input-controls{
	display: none;
}

.macro_widget.auto_mealplan .macro_widget-input{
	pointer-events: none;
}

.client_main_nutrition-drawer{
	border-bottom: 0 !important;
}

.client_main_nutrition-drawer .macro_widget-custom{
	background: transparent;
	padding: 18px 7% 15px 7%;
	position: relative;
}

.client_main_nutrition-drawer .macro_widget-custom:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: var(--light-bg-color);
    opacity: var(--focus-opacity);
    z-index: -1;
    border-radius: var(--border-radius);
}

/**** DAILY MACROS WIDGET *****/

.schedule_daily_macros .macro_widget-custom{
	background:  transparent;
	position: relative;
}

.schedule_daily_macros .macro_widget-custom:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: var(--light-bg-color);
    opacity: var(--focus-opacity);
    z-index: -1;
    border-radius: var(--border-radius);
}

.schedule_daily_macros{ 
	display: none; 
	margin:  20px 0 0 0;
}

.schedule_daily_macros .macro_widget-header .icon-minus{
	cursor: pointer;
	color: var(--light-bg-color);
	font-size: 35px;
}

.schedule_daily_macros .macro_widget-header .icon-minus:hover:before{
	color: var(--error-color);
	z-index: 12;
	position: relative;
}

.schedule_daily_macros .macro_widget-header .icon-minus:hover:after {
    content: '';
    width: 100%;
    height: 100%;
    background: var(--bg-color);
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.8;
    pointer-events: none;
    z-index: 4;
}

.macro_format-schedule-contain{
	display: flex;
	align-items: center;
}


.use_daily_macros .schedule_daily_macros{ display: block;  }

.use_daily_macros.past_day .daily_macros-add, .use_daily_macros.past_day .macro_format-schedule-contain .icon-minus, .use_daily_macros.past_day .macro_widget-input-controls{
	display: none;
}

/*.use_daily_macros:not(.past_day) .schedule_daily_macros{ display: block;  }*/



.add_to_schedule_macros {
	margin: 0 0 30px 0;
}

.add_to_schedule_macros .macro_widget-custom {
    background: transparent;
    position: relative;
    margin-top: 0;
}

.add_to_schedule_macros .macro_widget-custom:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: var(--light-bg-color);
    opacity: var(--focus-opacity);
    z-index: -1;
    border-radius: var(--border-radius);
}

.overwrite-days{
	display: none;
	border-top: 1px solid var(--light-bg-color);
	padding-top: 15px;
}

#warning-msg .overwrite-days .icon-info{
	font-size:  19px !important;
	cursor: pointer !important;
}

#future-macros:checked ~ .overwrite-days, #all-macros:checked ~ .overwrite-days{
	display: flex;
}

.macro_widget-disabled{

}

/****** MEALS / MEALPLANS *******/

.my_mealplans{
	    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.mealplan_schedule .schedule_item .multi_block-title{
	text-overflow: initial;
}

.mealplan_schedule_item {
	background: transparent;
	margin: 20px 0 20px 0;
	padding:  18px 7% 15px 7%;
	overflow: visible;
}

.mealplan_schedule_item:after{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: var(--light-bg-color);
    opacity: var(--focus-opacity);
    z-index: -1;
    border-radius:  var(--border-radius);
}
/*.mealplan_schedule_item .multi_block-desc{
	display: none;
}*/
.mealplan_schedule_item .multi_block-head{
	font-size: var(--font-small);
	font-weight: 300;
    margin-top: 9px;
}

.mealplan_schedule_item .multi_block-title{
	padding-right: 0;
	padding-top: 30px;
	margin-top: -30px;
	flex-basis: 100% !important;
}

.meals_contain-drawer .multi_block-title {
    flex: 1 !important;
}

/*.mealplan_schedule_item .compact_schedule-edit .compact_custom_save{
	display: none;
}
*/


.week_arrangement .compact_schedule-edit{
	display: none;
}

.multi_block-head-macros {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.macros.macros_expand-item {
    padding: 0 4px;
}

.use_daily_macros .add_macros-expand-item{
	display: none;
}

/*.mealplan_schedule_item[data-content-id] .multi_block-desc{
	display: none;
}*/
/*
.mealplan_schedule_item[data-content-id] .multi_block-head:before{
	content: "\e90c";
	font-family: 'icons' !important;
	speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

	display: inline-block;
    margin-right: 7px;
    position: relative;
    font-size: 20px;
    top: 2px;
}*/

.mealplan_schedule_item .macro_format-schedule-contain{
	position: absolute;
    top: 22px;
    right: calc(7% + 35px);
}

.mealplan_schedule_item .delete_mealplan_minus.icon-minus{
	cursor: pointer;
	color: var(--light-bg-color);
	font-size: 35px;
}
.mealplan_schedule_item .delete_mealplan_minus.icon-minus:before{
	position: absolute;
	top: 16px;
	right: 7%;
}

.mealplan_schedule_item .delete_mealplan_minus.icon-minus:hover:before{
	color: var(--error-color);
	z-index: 11;
}


.meal-edit-ingredient{
	width:  100%;
	color:  var(--white-color);
	font-size:  var(--font-copy);
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin:  10px 0;
	position: relative;
}

.meal-edit-ingredient-title_text{
	padding:  15px;
	padding-right: 25px;
	display: block;
}

.meal-edit-ingredient-amount{
	flex-basis: 20%;
	display: flex;
	align-items: baseline;
	padding:  15px;
	border-radius: var(--border-radius);
	background: var(--light-bg-color);
}

.meal-edit-ingredient-amount input{
	padding: 0;
	background: transparent;
	width: 90%;
	border-radius: 0;
	margin-bottom: 0;
}

.meal-edit-ingredient-title{
	flex-basis: 75%;
	margin-left: 10px;
	position: relative;
	border-radius: var(--border-radius);
	background: var(--light-bg-color);
	cursor: pointer;
}

.meal-edit-ingredient-title .icon-arrow-right{
	position: absolute;
	right: 10px;
	top: 0;bottom: 0;
	margin: auto;
    width: var(--font-small);
    height: var(--font-small);
    font-size: var(--font-small);
	transform: rotate(90deg);
	cursor: pointer;
}

.edit-ingredient-details{
	overflow: hidden;
	max-height: 0;
	width: calc(100% - 4px);
	border-bottom-left-radius: var(--border-radius);
	border-bottom-right-radius: var(--border-radius);
	background:  var(--bg-color);
	margin:  0 auto;
}

.edit-ingredient-macros{
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: var(--font-small);
}

.active-ingredient-details .edit-ingredient-details{
	padding:  20px 15px;
	max-height: 500px;
	box-shadow:  0 0 0 2px var(--light-bg-color);
}

.active-ingredient-details.meal-edit-ingredient{
	align-items: flex-start;
}

.active-ingredient-details .icon-arrow-right{
	bottom: inherit;
	top:  18px;
	transform: rotate(-90deg);
}

.edit-meal-macros, .edit-food-macros {
    width: 100%;
    color: var(--white-color);
    display: flex;
    justify-content: space-between;
    padding: 15px;
    box-shadow: 0 0 0 2px var(--light-bg-color);
    margin: 7px 0 30px 0;
    border-radius: var(--border-radius);
}

.edit-meal-nutrition {
    width: 100%;
    color: var(--white-color);
    display: flex;
    justify-content: flex-start;
    padding: 0;
    margin: 7px 0 30px 0;
    border-radius: var(--border-radius);
    flex-wrap:  wrap;
    text-transform: capitalize;
}

.edit-meal-nutrition p{
	padding: 5px 10px;
    box-shadow: 0 0 0 2px var(--light-bg-color);
    margin: 0 10px 10px 0;
    border-radius: var(--border-radius);
}


.edit-meal-nutrition, .edit-meal-nutrition-title{
	display: none;
}




.edit-meal-price {
    font-weight: 500;
}

.meal-edit-ingredient-remove.icon-minus {
    font-size: 34px;
    color: var(--light-bg-color);
    cursor: pointer;
}
.meal-edit-ingredient-remove.icon-minus:before{
	position: relative;
	z-index: 11;
}

.meal-edit-ingredient-remove.icon-minus:hover{
	color:  var(--error-color);
}

.meal-edit-ingredient-remove.icon-minus:hover:after{
content: '';
    width: 100%;
    height: calc(100% + 2px);
    background: var(--bg-color);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    opacity: 0.8;
    pointer-events: none;
}

.my_meals, .ai_meals, .my_texts, .ai_texts, .my_foods, .ai_foods{
    flex-wrap:  wrap;
}


.edit_header-with-btn{
	display: flex;
	justify-content: space-between;
	align-items: centers;
}

.search_foods{
	padding: 15px 0 15px 5px;
}

.meal-edit-food-search .search_input-by-database{
	margin: 0 !important;
	flex-basis: calc(100% - 34px);
}

.search_foods-block .search_input-by-database{
	z-index: 2;
}


.meal-edit-food-search{
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
	margin:  10px 0 !important;
	flex-wrap:  wrap;
}

.meal-edit-food-result{
	flex-basis: 100%;
	max-height: 300px;
    overflow-y: scroll;
}

.search_result-ingredient{
	width:  calc(100% - 4px);
	padding: 10px 15px;
	margin:  7px auto;
	border-radius: var(--border-radius);
	box-shadow: 0 0 0 2px var(--light-bg-color);
	cursor: pointer;
}

.search_result-ingredient:hover{
	background:  var(--light-bg-color);
}


.content_result-ingredient{
	display: flex;
	align-items: center;
	width:  calc(100% - 4px);
	padding: 10px 15px;
	margin:  7px auto;
	border-radius: var(--border-radius);
	box-shadow: 0 0 0 2px var(--light-bg-color);
	cursor: pointer;
}

.content_result-ingredient:hover{
	background:  var(--light-bg-color);
}

.content_result-ingredient-title{
	flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.content_result-ingredient-desc{
	opacity: var(--focus-opacity);
	font-size: var(--font-small);
}

.content_result-ingredient .icon-plus{
	font-size: calc(var(--font-sub) * 1.5);
}


.search_foods-results{
	width: 100%;
	flex-basis: 100%;
	max-height: 400px;
	position: relative;
	overflow-y: scroll;
}

.search_foods-results .content_result-ingredient:last-child{
	margin-bottom: 70px;
}

.search_foods-block:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100px;
    bottom: 0;
    left: 0;
    background: linear-gradient(180deg, var(--dark-bg-color-transparent), var(--dark-bg-color));
    pointer-events: none;
}

.search_foods-disclaimer{
	z-index: 2;
	display: none;
}

.add_to_schedule_macros-change{
	margin:  10px 0;
	display:  flex;
  justify-content: space-between;
  align-items: center;
  border-radius: var(--border-radius);
  background: var(--light-bg-color);
  padding: 15px 7%;
  position: relative;
}


/****** FOODS *******/

.edit-food-nutrients p {
	font-weight: 700;
}

.edit-food-nutrients input{
	max-width: 110px;
}
.edit-food-nutrients .type_input{
	position: relative;
	margin: 5px 0;
	padding-left: 20px;

}

.edit-food-nutrients .type_input:nth-child(odd):after{
	content: '';
	background: var(--light-bg-color);
	opacity: var(--focus-opacity);
	width: 100%;height: 100%;
	position: absolute;
	z-index: -1;
	top:0;left:0;
	border-radius: var(--border-radius);
}

.food-nutrients-dropdown {
	display: flex;
    justify-content: space-between;
}

.edit-servings-amount {
    display: flex;
    gap: 5px;
    justify-content: end;
    min-width: 50%;
}

.edit-servings-amount select {
    font-size: var(--font-sub);
    text-transform: none;
    width: 105px;
}

.edit-servings {
    min-width: 50%;
}



.edit-food-contain .type_input{
	margin: 5px 0;
}

.foods-macros{
	display: flex;
	justify-content: space-between;
	color: var(--white-color);
    font-size: var(--font-small);
    gap: 10px;
    margin-top: 20px;
}

.edit-macro-input {
    background: var(--light-bg-color);
    border-radius: var(--border-radius);
    display: flex;
    align-items: baseline;
    flex-direction: column;
    padding: 10px 15px;
}

.edit-macro-input input{
	font-size: var(--font-sub);
	padding: 0 !important;
	border-radius: 0;
}

.nutrient-day-total, .nutrient-dropdown-label{
	display: flex;
	justify-content: space-between;
	padding: 0 10px;
}

.nutrient-day-total:first-child{
	margin-top: 15px;
}

.nutrient-day-total {
    padding: 10px 0 10px 10%;
    border-top: 1px solid var(--light-bg-color);
}

.nutrient-day-id{
	text-transform: capitalize;
}

.nutrient-day{
	padding: 10px;
	background: var(--dark-bg-color);
	border-radius: var(--border-radius);
}


/**** CUSTOM MACROS ****/

.custom_radios input{
	display: none;
}

.custom_radios{
	margin:  0 auto;
	padding:  10px 0;
	line-height: 100%;
}

.custom_radios label.radio-label{
	color:  var(--light-bg-color);
	font-size: var(--font-copy);
	text-align:  left;
	display:  flex;
	align-items:  center;
	padding:  10px 30px;
	font-weight: 500;
	margin:  0 auto;
}

.custom_radios label.radio-label:before{
	content:  '';
	width:  20px;
	height:  20px;
	background:  var(--light-bg-color);
	border-radius:  100px;
	margin-right:  10px;
}

.custom_radios input[type="radio"]:checked + label.radio-label:before{
	background:  var(--primary-color);
}
.custom_radios input[type="radio"]:checked + label.radio-label{
	color:  var(--white-color);
}


.radio-desc{
	display: none;
	margin: 0;
	padding: 0 30px 0 60px;
	line-height: 110%;
}

.custom_radios input:checked + label + .radio-desc{
	display: block;
}

/** MYNUTRITION AI **/

.schedule_actual_macros{
	width: 100%;
	display: none;
}

.has_actual_macros .schedule_actual_macros{
	display: block;
	padding-top: 20px;
}

.actual_macros_widget-head{
	font-weight: 800;
	color: var(--primary-color);
	font-size: var(--font-small);
}

.actual_macros_widget{
	display: flex;
	justify-content: space-between;
	padding-top: 10px;
	flex-wrap: wrap;
}

.actual_macros_widget-macro{
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
/*	padding-right: 26px;*/
}
.actual_macros_widget-macro {
	font-size: var(--font-sub)
}

.actual_macros_widget-macro-desc {
	display: block;
    font-size: var(--font-small);
    font-weight: 300;
}

#view-metric-mynutritionai .btn, #view-metric-mynutritionai .delete_btn {
	display: none;
}

/***** MEALPLANS ********/


.mealplans_vault .content_title{
	display: flex;
	align-items: center;
}
.mealplans_vault .content_title .icon-link{
	color:  var(--primary-color);
    font-size: 24px;
    margin-right: 6px;
}

.mealplan_overview{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

.mealplan_overview-title{
	flex-basis: 100%;
	margin-bottom:  15px;
}

.mealplan_overview-box{
	background:  var(--dark-bg-color);
	border-radius: var(--border-radius);
	display: flex;
	align-items: center;
	min-height:  280px;
	color: var(--white-color);
	justify-content: center;
	flex-wrap:  wrap;
	padding: 25px 20px;
	position: relative;
	height: auto;

	flex: 1;
	margin-right: 10px;
}
.mealplan_overview-box:last-child{
	margin-right: 0;
}


.mealplan_overview-cals{
	flex-basis: 20%;
	font-size:  var(--font-copy);
	text-align: center;
}

.mealplan_overview-cals .mealplan_overview-macros-input{
	margin-bottom: 4px;
}

.mealplan_overview-cals .daily-cals, .mealplan_overview-cals .avg-daily-cals{
	text-align: center;
	margin-bottom:  0;
	width:  5ch;
	display: block;
	font-size:  var(--font-sub);
	height: var(--font-sub);
	padding: 0;
	border-radius: 0;
	background: transparent;
	opacity: 1;
}


.mealplan_overview-macros{
	flex-basis:  40%;
	align-items: flex-start;
	flex-wrap: wrap;
}


.mealplan_overview-macros-contain p input{
	display: inline-block;
	background:  transparent;
	padding: 0;
	width: 1ch;
	border-radius: 0;
	font-size: var(--font-sub);
}

.mealplan_overview-macros-contain p input:disabled{
	opacity: 1;
}

.mealplan_overview-macros p:nth-child(1){
	font-size: var(--font-sub);
}
.mealplan_overview-macros p:nth-child(2){
	font-size: var(--font-copy);
}

.mealplan_overview-macros-contain{
	flex-basis: 33%;
	width:  33%;
	display: flex;
	justify-content: space-between;
	height: 100%;
	align-items: center;
	flex-direction: column;
}



.mealplan_overview-macros-input{
	display: flex;
    align-items: flex-end;
    margin-left: 14px;
}

.mealplan_overview-macros-controls{
	display: flex;
    flex-direction: column;
    height: 100%;
    margin: 0 3px 0 8px;
}

.mealplan_overview-macros-controls span:first-child {
    margin-bottom: 2px;
}

.mealplan_overview-macros-controls span {
    cursor: pointer;
    background: var(--light-bg-color);
    border-radius: var(--border-radius);
    padding: 0 6px;
    text-align: center;
    font-size: 10px;
}



.mealplan_percent-macros{
	position: relative;
	background:  var(--bg-color);
	border-radius: var(--border-radius);
	width: 20px;
	height:  100%;
	margin: 5px 0 15px 0;
	overflow: hidden;
}

.percent-slider{
	width:  100%;
	position: absolute;
	bottom: 0;left: 0;
	transition: var(--transition);
	text-align: right;
	padding-right:  5px;
	font-size:  var(--font-small);
	color:  var(--white-color);
	display: flex;
	align-items: center;
	justify-content: center;
}


.percent-carbs .percent-slider{ background: var(--carbs-color)  }
.percent-fats .percent-slider{ background: #9cf74d  }
.percent-proteins .percent-slider{ background: var(--proteins-color)  }


.mealplan_overview-nutrition{
	flex-basis: 35%;
	flex-direction: column;
	padding: 0;

	display: none;
}

.mealplan_overview-nutrition-tags{
	text-align: center;
	padding:  0 20px;
	padding-top:  25px;
}

.mealplan_overview-nutrition-price{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding:10px 25px 10px 25px;
    margin-top: 10px;
}

.mealplan_overview-nutrition-price span{
	background:  var(--bg-color);
	text-align: center;
	margin: 6px 0 0 0 !important;
	box-shadow: none !important;
}
.mealplan_overview-nutrition-price span:first-child{
	margin-right:  10px !important;
}

.mealplan_macro_format {
    position: absolute;
    top: -34px;
    right: 0;
}

.mealplan_macro_format .switch_selector{
	background: var(--dark-bg-color);
}


.mealplan_overview-macros .grams{
	display: none;
}

.mealplan_overview-macros.macro_grams .grams{
	display: inline-block;
}

.mealplan_overview-macros.macro_grams .percent{
	display: none;
}

.reload_adaptive_plan {
    width: auto !important;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight:  600;
}

.reload_adaptive_plan .icon-reset{
	font-size: 22px;
	margin-right: 5px;
}

.mealplan_schedule.day_arrangement .schedule_day{
	flex-basis: 45%;
	max-width: 45%;
}

.mealplan_schedule .multi_block-desc{
	font-weight: 300;
/*  display: flex;
  justify-content: space-between;*/
  color:  var(--white-color);
  z-index: 1;
  position: relative;
}

.mealplan_schedule .multi_block-desc span[data-macro]{
	opacity: var(--focus-opacity);
}

.mealplan_schedule .multi_block-desc span{
	margin-bottom: 10px;
}

.mealplan_schedule .multi_block-desc span:not(:first-child){
	margin-left: 20px;
}
/*.mealplan_schedule.day_arrangement .multi_block-desc{
	  margin-bottom: 10px;
}*/
.mealplan_schedule .multi_block-desc span[data-macro="cals"]{
	color:  var(--primary-color);
	opacity: 1;
}

.mealplan_schedule .multi_block-desc span.icon-mealplans{
	color:  var(--primary-color);
	margin-bottom: 5px !important;
}

.mealplan_schedule .multi_block-desc span.icon-mealplans ~ span{
	color:  var(--primary-color);
	margin-left: 0 !important;
	font-weight: 900;
	margin-bottom: 0;
}



.mealplan_overview-nutrition span{
		padding: 5px 10px;
    box-shadow: 0 0 0 2px var(--light-bg-color);
    margin: 0 10px 10px 0;
    border-radius: var(--border-radius);
    font-size: var(--font-small);
    text-transform: capitalize;
    display: inline-block;
}

input.temp-debugging-p {
    display: inline-block;
    width: 26px;
    min-width: auto;
    padding: 0;
    background: transparent;
    border-radius: 0;
}

/*
.mealplan_schedule.day_arrangement .multi_block-title{
	white-space: normal;
}
*/

.placeholder_schedule_day .placeholder_list_item{
	margin-bottom:  10px;
	height:  88px;
	margin-top: 0;
}

.schedule-edit_list .placeholder_list_item,
.schedule-recurring_list .placeholder_list_item{
	height: 68px;
}

.food_item-macros{
	font-weight: 300;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--white-color);
    font-size: var(--font-small);
    margin-top:  15px;
    z-index: 1;
    opacity: var(--focus-opacity);
}

.food_item-details{
	flex: 1;
    z-index: 1;
}

.multi_block-expand-item[data-food-id]{
	position: relative;
	flex-wrap: wrap;
	align-items: center;
}


.food_item-details .remove-food:before{
	top:  2px;
	margin-left: 6px;
}

.food_item-details .remove-food:hover{
	color:  var(--error-color);
}

.multi_block .food_item-details .icon-minus:hover:after{
	background: var(--dark-bg-color);
}

.food_item-amount{
	margin-right:  10px;
	background:  var(--light-bg-color);
	max-width: 25%;
	width:  25%;
	border-radius: var(--border-radius);
	padding:  10px;
	display: flex;
}

input.food_item-amount-input{
	padding: 0;
	background:  transparent;
	border-radius: 0;
	padding-right: 5px;
	margin-bottom: 0;
}


.food_item-amount-select {
    background: var(--light-bg-color);
    border-radius: var(--border-radius);
    display: flex;
    justify-content: space-between;
    margin-right: 10px;
    position: relative;
    padding-right: 5px;
}

.food_item-amount-select input {
	padding-left: 10px;
	max-width: 50px;
}


.food_item-amount-select select{
	padding: 10px 10px 10px 0;
    width: auto;
    text-transform: none;
    text-align: left;
    background: transparent;
}


.food_item-amount-select:after{

	position: absolute;
	top:0;bottom:0;
	margin-right: 5px;
	content:'\e901';
	transform: rotateZ(90deg);
	right: calc(var(--font-extra-small) + 5px);
	font-size: var(--font-extra-small);
	pointer-events: none;
	color: var(--white-color);

	/* use !important to prevent issues with browser extensions that change fonts */
	font-family: 'icons' !important;
	speak: never;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}





.debugging-p{
	margin-top: -5px;
    margin-bottom: 17px;
    font-size: var(--font-small);
    display: none;
}


.meals_drawer-title{
font-size: var(--font-head);
    text-align: center;
    font-weight: 700;
}

.meals_drawer-header{
	display: flex;
	justify-content: space-between;
	align-items: center;
    margin: -30px 0 50px 0;
    color: var(--white-color);
}
.compact_schedule-edit .meals_drawer-header{
	margin-top: 0;
}

.meals_drawer-header span{
	cursor: pointer;
}

.meals_drawer-header span:hover{
	opacity: var(--focus-opacity);
}

.meals_contain-drawer {
    margin: 10px 0;
}

.multi_block-mealplan-macros {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    font-size: var(--font-sub);
    position: relative;
    z-index: 1;
    flex-wrap: wrap;
/*    color: var(--light-bg-color);*/
}

.multi_block-mealplan-macros .macro_widget-input-controls{
	pointer-events: none;
	margin-left: 7px;
}

.multi_block-mealplan-macro input{
	padding: 0;
	margin-bottom: 0;
	border-radius: 0;
	font-size: var(--font-sub);
	background: transparent;
	color: var(--white-color);
	width: 2ch;
	opacity: 1;
}


/*.multi_block-mealplan-macros.custom_macros{
	color:  var(--white-color);
}
*/
.multi_block-mealplan-macro .macro_widget-input-desc{
	display: block;
	font-size: var(--font-small);
	font-weight: 300;
}

.week_arrangement .mealplan_schedule_item .multi_block-head,
.week_arrangement .macro_format-schedule-contain .macro_format,
.month_arrangement .mealplan_schedule_item .multi_block-head,
.month_arrangement .macro_format-schedule-contain .macro_format{
	display: none;
}

.week_arrangement .multi_block-mealplan-macros,
.week_arrangement .multi_block-mealplan-macros input,
.month_arrangement .multi_block-mealplan-macros,
.month_arrangement .multi_block-mealplan-macros input{
	margin-top: 0;
	font-size: var(--font-copy);
}

.week_arrangement .multi_block-mealplan-macros,
.month_arrangement .multi_block-mealplan-macros{
	flex-wrap: wrap;
}
.week_arrangement .multi_block-mealplan-macro,
.month_arrangement .multi_block-mealplan-macro{
	flex-basis: 100%;
	font-size: var(--font-copy);
	margin-bottom:  7px;
}

.drawer-body .mealplan_overview-cals{
    min-height: 111px;
    margin-top: 10px;
}

.drawer-body .mealplan_overview-box{
	margin-right: 0;
	height: 0;
	flex-basis: 100%;
}

.drawer-body .mealplan_overview-macros{
	margin-top:  45px;
}

/*.drawer-body .mealplan_overview {
    display: block;
}*/

.drawer-body.mealplan_overview, .compact_schedule-edit .adaptive_mealplan_overview{
	display: none;
}

.meals_contain-drawer .icon-minus, .meals_contain-drawer .search_foods-block{
	display: none;
}

.meals_contain-drawer input{
/*	pointer-events: none;*/
	margin-bottom: 0;
}


#adaptive-removed-foods {
    margin: 3px;
}

.regenerate_mealplan-btn{
	box-shadow:0 0 0 2px var(--light-bg-color);
}
.regenerate_mealplan-btn .icon-refresh {
    font-size: 24px;
    position: relative;
    top: 4px;
    margin-right: 5px;
}




.mini_overview-macros{
	display: none;
	border-radius: var(--border-radius);
	align-items: center;
	height:  280px;
	color: var(--white-color);
	justify-content: center;
	flex-wrap:  wrap;
	padding: 25px 20px;
	position: relative;
    width: calc(100% - 4px);
    margin: 0 auto;
    box-shadow: 0 0 0 2px var(--light-bg-color);
    overflow: hidden;
}
.active_day .mini_overview-macros{
	display: flex;
}

.mini_overview-macros .mealplan_percent-macros{
	background: var(--light-bg-color);
}

.mini_overview-macros:after{
	content: '';
	opacity: var(--focus-opacity);
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
  background: var(--light-bg-color);
  z-index: -1;
}

.custom_foods_to_remove{
	position: relative;
	border-radius: var(--border-radius);
	padding:  10px;
	margin-top: 10px;
	height: 300px;
	overflow: hidden;
}

.custom_foods_to_remove:after{
	position: absolute;
	content:  '';
	width:  100%;height: 100%;
	top: 0; left: 0;
	z-index: -1;
	background: var(--light-bg-color);
	opacity: var(--focus-opacity);
}

.custom_foods_to_remove .search_input{
	margin-bottom: 5px;
	background: transparent;
}

.custom_foods_to_remove .search_food_vault{
	background: transparent;
}

.custom_foods_to_remove-container{
	height: 236px;
	overflow: hidden;
	overflow-y: scroll;
	padding-bottom: 10px;
}

.custom_foods_to_remove-results .search_result-ingredient{
    font-size: var(--font-small);
    margin: 2px 0;
    padding: 2px 0 2px 13px;
    box-shadow: none;
    display: flex;
    align-items: center;
    min-height: 29px;
}

.custom_remove-inner{
	display: flex;
	align-items: center;
}

.custom_foods_to_remove-results .search_result-ingredient:hover,
.custom_foods_to_remove .custom_food_to_remove:hover{
	background: var(--bg-color);
}

.custom_food_to_remove{
    font-size: var(--font-copy);
    font-weight: 500;
    margin: 2px 0;
    padding: 5px 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: var(--border-radius);
    cursor: pointer;
}

.custom_remove-inner{
	    transition: var(--transition);
    color:  var(--error-color);
}

.just_added_to_removed .custom_remove-inner{
	color:  var(--white-color);
}

.custom_foods_to_remove .custom_food_to_remove:hover .secondary_btn:after{
	opacity: var(--focus-opacity);
}

.custom_foods_to_remove-container .icon-incomplete{
	color: var(--error-color);
}

.custom_foods_to_remove-results .search_result-ingredient .icon-incomplete{
	font-size: 0;
}

.custom_foods_to_remove-results .search_result-ingredient:hover .icon-incomplete{
	font-size: 20px;
	margin-right: 5px;
}

.custom_foods_to_remove-container .custom_remove-inner .icon-incomplete{
	font-size: 30px;
	margin-right: 5px;
}


.no-macros{
	display: none !important;
}

/****** GROCERY LIST *****/

.debug-btn{
	cursor: pointer;
	color: var(--light-bg-color);
	font-weight: 700;
}


.grocery_list_btn {
  margin-bottom: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  font-weight:  700;
  padding: 7px 35px;
}

.grocery_list_item-contain{
	display: flex;
	margin:  5px 0;
	justify-content: space-between;
}

.grocery_list_item{
	padding: 10px 15px;
	position: relative;
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	border-radius: var(--border-radius);
	overflow: hidden;
}

.grocery_list_item:after{
	content:  '';
	position: absolute;
	width:  100%;
	height: 100%;
	top: 0;left: 0;
	z-index: -1;
	background: var(--light-bg-color);
	opacity: var(--focus-opacity);
}

.grocery-package{
		width: 65%;
}

.grocery-servings{
	width: 35%;
	margin-right: 5px;
	position: relative;
}

.select-with-arrow{
	position: relative;
}

.select-with-arrow:before{
	position: absolute;
	top:0;bottom:0;
	margin-right: 15px;
	content:'\e901';
	transform: rotateZ(90deg);
    right: var(--font-small);
    font-size: var(--font-small);
    color: var(--white-color);
    pointer-events: none;

	/* use !important to prevent issues with browser extensions that change fonts */
	font-family: 'icons' !important;
	speak: never;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}



.grocery_list_item-amount{
	margin-right: 10px;
	font-weight: 900;
}

.grocery_list_item-price{
	opacity: var(--focus-opacity);
}


#grocery-list-amount {
    padding: 0;
    background: transparent;
}


/****** CHECKOUT / HOMEPAGE *******/

.checkout_selector{
    text-align: center;
    width:  95%;
    max-width: 500px;
    margin:  0 auto;
}
.checkout_selector h1{
    font-size: 50px;
    margin-bottom: 25px;
}



/****** COACH NOTIFICATIONS *******/

.notification {
    width: 100%;
    display: none;
    justify-content: space-between;
    background: var(--dark-bg-color);
    align-items: center;
    border-radius: var(--border-radius);
    color:  var(--white-color);
    font-size:  var(--font-copy);
    overflow: hidden;
    position: relative;
    margin: 5px 0;
}

.notification_text{
	padding: 15px 10px 15px 15px;
	flex-basis: 100%;
    display: flex;
    align-items: center;
	text-decoration: none;
}

.notification_text a{
	line-height: 150%;
	text-decoration: none;
}

.notification_text .user_profile{
	margin-right: 15px;
}

.notification_text-name{
/*	color:  var(--light-bg-color);*/
}

.notification_actions{
	height: 100%;
	position: absolute;
	top: 0;right: 0;
	transform: translateX(100%);
	background:  var(--dark-bg-color);
	transition: transform 0.15s ease-in-out;
}



.dismiss{
    height: 100%;
    background: var(--light-bg-color);
    display: inline-flex;
    align-items: center;
    padding: 0 20px;
    cursor: pointer;
    width: 120px;
    min-width: 120px;
    justify-content: center;
    overflow: hidden;
    transition: 0.15s;
    transform: translateX(100%);
}

.dismiss:hover{
	opacity: var(--focus-opacity);
}

.dismiss.reject{
	background: var(--error-color);
	transform: translateX(200%);
	transition: 0.3s ease-in-out;
}

.notification:hover .notification_actions{
		transform: translateX(0);
}

.notification:hover .dismiss{
	min-width: 120px;
	padding: 0 20px;
	transform: translateX(0);
}

.notification_timestamp {
    font-size: var(--font-small);
    opacity: var(--focus-opacity);
    display: block;
    margin-top: 0;
}

.notification_content{
	font-weight: 900;
}


.all .notification, 
.all_missed_checkin .notif_missed_checkin,
.all_event_request .notif_event_request, 
.all_missed_workout .notif_missed_workout,
.all_missed_video .notif_missed_video,
.all_missed_file .notif_missed_file,
.all_missed_meal .notif_missed_meal,
.all_completed_checkin .notif_completed_checkin,
.all_completed_form .notif_completed_form,
.all_completed_workout .notif_completed_workout,
.all_completed_video .notif_completed_video,
.all_completed_mealplan .notif_completed_mealplan,
.all_completed_file .notif_completed_file,
.all_completed_meal .notif_completed_meal,
.all_invite_accepted .notif_invite_accepted,
.all_program_ended .notif_program_ended,
.all_subscription_deleted .notif_subscription_deleted{
	display: flex;
}


#coach-notifications-list.all .notification:nth-child(n+11) {
    display: none;
}


#coach-notifications-list.all .notification:nth-child(10):after{
    content: '';
    position: absolute;
    width: 100%;
    height: 75%;
    background: linear-gradient(180deg, var(--bg-color-transparent) 0%, var(--bg-color) 100%);
    bottom: 0;
    pointer-events: none;
}

/*** COACH ACTIVITY *****/

.activity{
	margin: 5px 0;
	padding: 5px 0;
	display: flex;
	justify-content: space-between;
	border-bottom: 1px solid var(--light-bg-color);
	align-items: center;
}

.activity-from, .activity-timestamp{
	font-size: var(--font-small);
}

.activity-more{
	margin-top: 20px;
}

@media all and (max-width: 1080px) {
	.activity{
		flex-direction: column;
		align-items: flex-start;
		text-align: left;
	}
}

/**** FORMS ****/

.multi_block.form_item{
	width: 100%;
}

.form_item .multi_block-title{
	width: 75%;
}

.form_item .multi_block-head {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 100%;
}

.add_to_form-btn{
	display: block;
    font-weight: 300;
    padding: 7px 10px;
    border-radius: var(--border-radius);
    cursor: pointer;
    z-index: 11;
    font-size: var(--font-small);
    box-shadow: 0 0 0 2px var(--light-bg-color);
    background: transparent;
    text-align: center;
    color: var(--white-color);
    width: 100%;
    margin: 15px auto 0 0;
}

.form_multi_options{
	margin-bottom: 15px;
}

.form_multi_option{
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	position: relative;
	margin-bottom: 5px;
}

.form_multi_option .icon-minus,
.form_setting_option .icon-minus{
	font-size: 25px;
	color: var(--light-bg-color);
	cursor: pointer;
}

.form_multi_option .icon-minus:before,
.form_setting_option .icon-minus:before{
	z-index: 11;
	position: relative;
}

.form_multi_option .icon-minus:hover,
.form_setting_option .icon-minus:hover{
	color: var(--error-color);
}

.form_multi_option .icon-minus:hover:after,
.form_setting_option .icon-minus:hover:after{
	content: '';
	position: absolute;
	top:0;left:0;
	width: 100%;height: 100%;
	background: var(--bg-color);
	opacity: 0.8;
	z-index: 10;
}

input.form_multi_option-input{
	margin: 0;
}

.form_multi_option-add{
	display: inline-block;
	width: auto;
}

.form_setting_option-add{
    z-index: 11;
    margin: 0;
    overflow: visible;
    width: initial;
}

.agreement_type:not(.active_agreement){
	display: none;
}

.agreement_type-field .agreement-field{
	white-space: pre-wrap;
}

.form_file-uploaded{
	display: none;
}

.has_file_uploaded .form_file-uploaded{
    display: flex;
    padding: 25px 20px;
    margin-bottom: 12px;
    background: var(--light-bg-color);
    color: var(--white-color);
    align-items: center;
    justify-content: space-between;
    border-radius: var(--border-radius);
    font-size: var(--font-copy);
    cursor: pointer;
}

.form_file-uploaded .icon-link{
	font-size: 30px;
    color: var(--primary-color);
}

.form_step-upload-video .player{
	margin-bottom: 15px;
}

.has_file_uploaded .file_upload_label{
	padding: 0px 15px;
}


.is_uploading .file_upload_label{
	font-size: 0;
}

.is_uploading .file_upload_label:after{
	content: 'Uploading...';
	font-size: var(--font-copy);
}

.file_upload_label-placeholder{
	width: 70px;
    margin-right: 10px;
    height: 40px;

    background: linear-gradient(-70deg, var(--bg-color), var(--bg-color), var(--light-bg-color), var(--bg-color));
	background-size: 300% 300%;

	animation: loading 2s ease infinite;
}

.form_step-loading{
	display: none;
	position: fixed;
	justify-content: center;
	align-items: center;
	top:0;left:0;
	width: 100%;height: 100%;
	z-index: 101;
}

.form_step-loading .spinner{
    border-top-color: var(--white-color);
    z-index: 14;
}

.form_step-loading .uploading_progress{
	font-size: var(--font-small);
	color: var(--white-color);
	display: block;
	height: var(--font-small);
    z-index: 14;
    margin-top: 60px;
}

.is_uploading .form_step-loading{
	display: flex;
}

.is_uploading .form_step-loading:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: var(--bg-color);
    z-index: 13;
    opacity: 0.7;
}

#save-form-btn{
	margin: 0 auto;
}

.multi_block.form_item .multi_block-title{
	font-size: var(--font-sub);
}

img.form_media-image {
    width: 100%;
    margin-bottom: 15px;
}


textarea.step-title{
	margin: 0;
}
.form_step_options-header{
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 15px;
}


.form_setting_option{
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	color: var(--white-color);
	position: relative;
	margin-bottom: 5px;
}

.form_setting_option p{
	flex : 1;
	background: var(--light-bg-color);
	border-radius: var(--border-radius);
	padding: 15px;
	font-size: var(--font-size);
}

.form_answer {
    display: flex;
    flex-direction: column;
    margin: 10px 0;
    gap: 10px;
    background: var(--light-bg-color);
    padding: 10px 20px;
    border-radius: var(--border-radius);
}

.form_answer-title{
    display: flex;
    font-weight: 800;
    color: var(--primary-color);
    align-items: center;
    gap: 10px;
}

.form_answer.answer_type_videofield .player,
.form_answer.answer_type_imagefield img{
	max-width: 600px;
}

.form_answer.form_answer-singleline{
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
}
.form_answer-lg-title{
	font-weight: 800;
	font-size: var(--font-sub);
}
.form_answer.form_answer-singleline [class^="icon-"]{
	font-size: 35px !important;
	color: var(--primary-color);
}

.form_answer-timestamp{
	font-size: var(--font-small);
}

.send_form_btn{
	margin-bottom: 10px !important;
}


.forms_search-results .content_result.selected_form:after{
	opacity: 1;
}

.forms_search-results .content_result.selected_form .content_title:before{
	content: "\e908";
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icons' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--primary-color);
  margin-right: 10px;
}


.metric_data.pending:has(> .icon-trash:hover) .metric_title {
	opacity: var(--focus-opacity);
}

.metric_data.pending:hover {
	box-shadow: none !important;
	background: var(--dark-bg-color) !important;
}

.metric_data.pending .icon-trash{
	width: auto;
	font-size: 26px;
}

.metric_data.pending .icon-trash:hover {
	color: var(--error-color) !important;
}



/*** CLIENT LIST PAGE ***/

.client_list-client {
    display: flex;
    flex-direction: column;
    row-gap: 20px;
    margin: 15px 0;
    padding: 15px;
    background: var(--dark-bg-color);
    border-radius: var(--border-radius);
}

.client_list-top {
    display: flex;
    justify-content: start;
    align-items: center;
    position: relative;
    column-gap: 15px;
    z-index: 10;
}

.client_list-nav{
	display: flex;
	justify-content: start;
	align-items: start;
	gap: 10px;
}

.client_list-nav a{
	padding: 7px;
	border-radius: var(--border-radius);
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	background: var(--bg-color);
	text-decoration: none;
	font-size: var(--font-extra-small);
	text-align: center;
	flex: 1;
}

.client_list-nav a:hover{
	background: var(--primary-color);
	color: var(--dark-bg-color);
}

.client_list-nav a .icon{
	font-size: 25px;
}

.client_list-details{
	display: flex;
	flex-direction: column;
	flex: 1;
	row-gap: 6px;
}

.client_list-client .quick_response-contain{
	width: 100%;
}



/** ASSISTANT STYLING ***/

.assistant-container {
    padding: 20px 0;
    border-bottom: 1px solid var(--light-bg-color);
}

.assistant-dropdown{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.assistant-dropdown .permissions{
	font-size: var(--font-small);
	text-transform: uppercase;
	font-weight: 800;
}

.assistant-container .delete_outline{
    width: auto;
    margin: 10px auto 20px auto;
    box-shadow: none;
/*    display: inline-block;*/
}

.assistant-container .dropdown{
	overflow-y: scroll;
}

.no-assistants {
    width: 100%;
    text-align: center;
    margin-top: 100px;
}

.assistant-details {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
}

.assistnant-clients_cols{
	display: flex;
	justify-content: space-between;
}

.assistnant-clients_col{
	flex-basis: 49%;
}

/*.client_list-top .user_profile{
	width: 70px;height:70px;
	min-width: 70px;min-height: 70px;
	margin: 0;
}*/



/** HELP DESK **/

.help-btn {
    text-decoration: none;
    display: flex;
    width: 100%;
    padding: 20px;
    box-shadow: 0 0 0 2px var(--light-bg-color);
    border-radius: var(--border-radius);
    cursor: pointer;
	font-size: var(--font-copy);
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    gap: 20px;
	position: relative;
}

.help-btn:hover{
	background: var(--light-bg-color);
}

.help-btn.highlighted {
	box-shadow: 0 0 0 2px var(--primary-color);
}

.help-btn-info span{
	font-size: var(--font-small);
	display: block;
	margin-top: 10px;
}

.help-btn .icon-share{
	font-size: 25pt;
}

.help-btn .highlighted-text {
	position: absolute;
	top: 10px;right:10px;
	background-color: var(--primary-color);
	padding: 2px 15px;
	border-radius: var(--border-radius);
	color: var(--dark-bg-color);
	font-weight: 800;
    font-size: var(--font-small);
}

.help-chat{
	margin: 30px 0;
	text-align: center;
}

.help-chat h3{
	font-size: var(--font-sub);
}

.help-chat .btn{
	width: auto;
	max-width: fit-content;
	margin: 15px auto;
	padding: 15px 30px !important;
}


/**
  
 LARGE BREAKPOINT 
  
 **/

@media all and (max-width: 1380px) {

	.main_content{
		padding: 40px 2% 200px 2%;
	}

	.user_in_group{
		flex-basis: 30%;
	}
}


/**
  
 MEDIUM BREAKPOINT 
  
 **/

@media all and (max-width: 1080px) {


	.side_bar{
		display: none;
	}

	.mobile-nav{
		display: flex;
	}

	/*** 

	   CONTENT UPDATES 
		 Basically we are just going full width when we are at medium size

	***/

	.main_content{
		width: 100%;
		padding: 20px 2% 200px 2%;
	}

	.main_content.side_bar-minimized{
		width: 100%;
		padding: 20px 2% 200px 70px;
	}

	.page_header{
		flex-wrap:  wrap;
		margin-top:  25px;
	}

	.page_header-desc{
		flex-basis: 100%;
	}

	.btn{
		margin: 20px 0;
		width: 100% !important;
		max-width: 100% !important;
/*		flex-basis:  100%;*/
	}

	.btn.loading{
			width: 60px !important;	
	}

/*	.page_nav {
	    position: fixed;
	    top: 0;left: 0;
	    width: 100%;
	    padding: 10px 2% 2% 2%;
	    z-index: 999;
	}*/

	#mini-drawer{
		display:  none !important;
	}

	.drawer-content{
		width: 95% !important;
		margin:  0 auto;
		left: 0;top:0;
		border-top-left-radius: var(--border-radius);
		border-top-right-radius: var(--border-radius);
		transform: translateX(0) translateY(100%) !important;
		position: fixed;
	}


	.drawer-header{
		height:  70px;
	}

	.drawer-body{
		margin-top: 0;
		height: calc(100% - 70px);
		padding:  10px 10px 100px 10px;
	}

	.drawer_btn-back{
		margin-top:  -10px;
	}


	.drawer-body .btn{
		margin-bottom: 60px;
	}

	#main-drawer.active_drawer .drawer-content, #double-drawer.active_drawer .drawer-content{
		transform: translateX(0) translateY(10vh) !important;
	}

	.two_col{
		flex-wrap: wrap;
	}

	.two_col .col {
	    flex-basis: 100%;
	    width: 100%;
	}
	.schedule_title, .schedule_arrange, .schedule_nav{
		flex-basis: 100%;
	    justify-content: inherit;
	    margin-bottom: 20px;
	    text-align: center;
	}

	.settings_item{
		flex-basis: 100%;
		max-width: 100%;
		margin-top: 0;
	}


	.dashboard-header{
		flex-direction: column;
		align-items: flex-start;
		margin-bottom: 20px;
	}

	.dashboard-header h4{
		margin: 0 0 20px 0;
	}
}